/* Theme Name: Фактурник Theme URI: https://fakturnik.com Author: LICENSE LTD Author URI: https://fakturnik.com Description: Програма за фактури • склад • API Version: 1.0 Text Domain: webart */ :root { /* PADDING */ --padding-content: unset; --padding-module: 60px; /* RADIUS */ --radius-image: 3px; /* SHADOWS */ --shadow-primary: #0000001f; --shadow-card: rgba(0,0,0,0.09); --shadow-sm: 0px 0px 12px -11px rgba(0,0,0,0.1); } /*
.loader-dots { width:50px; opacity:1; display:inline-flex; align-items:center; justify-content:space-between; transition:opacity 1s; } .loader-dots i { background-color: red; height:10px; width:10px; border-radius:50%; transform:scale3d(0, 0, 0); transform-origin:center center; will-change:transform; animation:animateDots 1s ease-in-out infinite; } .loader-dots i:nth-child(2){ animation-delay:.1666666667s; } .loader-dots i:nth-child(3){ animation-delay:.3333333333s; } @keyframes animateDots{0%{ transform:scale3d(0, 0, 0)}50%{ transform:scaleX(1)}to{ transform:scale3d(0, 0, 0)}} */ body { /* scroll-padding-top: 80px; */ } .link-purple { color: var(--purple); } .red { color: var(--red); } .green { color: var(--green); } .page-loader { width: 3em; height: 3em; border-radius: 50%; background-clip: padding-box; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border-top: 0.5em solid rgba(0, 0, 0, 0.2); border-right: 0.5em solid rgba(0, 0, 0, 0.2); border-bottom: 0.5em solid #333; border-left: 0.5em solid rgba(0, 0, 0, 0.2); animation: page-loader-rotate 1.8s infinite linear; } .page-loader small { color: transparent; font-size: 0; } @keyframes page-loader-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } [class^="grid-"] { display: grid; gap: 36px; margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ THEME ║ */ /* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */ .header-wrapper { background-color: var(--white); padding: 13px 0 13px 0; box-shadow: var(--shadow-primary) 0px 4px 16px 0px; } .header { display: flex; align-items: center; gap: 0 20px; } .header-logo { width: 220px; } .header-logo .logo { display: block; } .header-spacer { flex: 1; } .header-menu { } .header-extra { } .header-hamburger { display: none; } .pageloader { background:var(--purple); height:3px; overflow: hidden; position:fixed; left:0; bottom:0; z-index:9999; pointer-events: none; user-select: none; } .breadcrumbs-wrapper { } .breadcrumbs { display: flex; align-items: center; justify-content: space-between; } .breadcrumbs ol { margin: 0; padding: 10px 0 8px 0; list-style: none none; list-style-position: inside; display: inline-flex; align-items: center; border-bottom: 4px solid var(--purple); font-size: 14px; } .breadcrumbs ol li.item { display: inline; } .breadcrumbs ol li.item::after { content: '—'; padding: 0 8px; } .breadcrumbs ol li.item a { color: var(--purple); } .breadcrumbs ol li.item-last { max-width: 180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .breadcrumbs ol li.item-last::after { content: ''; } .breadcrumbs ul.actions { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: inline-flex; align-items: center; gap: 0 30px; } .breadcrumbs ul.actions li {} .breadcrumbs ul.actions li a { color: var(--purple); text-decoration: none; } /* Desktop Navigation */ .menu-desktop { position: relative; display: flex; align-items: center; gap: 0 22px; margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .menu-desktop li.menu-item { font-family: "Sofia Sans", sans-serif; border-bottom: 3px solid transparent; } .menu-desktop li.menu-item a { display: block; padding: 6px 0px; line-height: 1; color: inherit; text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 17px; } .menu-desktop li.current-menu-item { border-color: var(--purple); } .menu-desktop li.current-menu-item a { color: var(--purple); } #magic-line { position: absolute; bottom: 0px; left: 0; width: 100%; height: 3px; background:var(--yellow); opacity: 0; } .menu-extra { display: flex; align-items: center; justify-content: center; gap: 0 12px; } .menu-extra a { font-size: 17.5px; } .menu-extra a strong { font-weight: 600; } .static-layout { display: flex; align-items: stretch; margin-bottom: calc(var(--padding-module) / 2); } .static-layout .col-main { order: 3; flex-grow: 1; } .static-layout .col-main .ratio-21x9 { --aspect-ratio: calc(8/21*100%); } .static-layout .col-spacer { order: 2; flex-shrink: 0; width: 40px; } .static-layout .col-sidebar { order: 1; flex-shrink: 0; width: 320px; } .rich {} .rich h1 { font-size: 26px; margin-bottom: 40px; } .rich h2 { font-size: 24px; } .rich h3 { font-size: 22px; } .rich h4 { font-size: 20px; } .rich .sup { display: block; text-transform: uppercase; font-weight: bold; opacity: 0.5;} .rich .date { display: block; color: var(--fuchsia); } .rich-subtitle { margin-bottom: 30px; } .rich-subtitle .subtitle { margin: 0; color: var(--blue); } .rich-subtitle .subtitle i { color: var(--black); } .card-sidebar { background-color: var(--purple-lightest); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 20px; } .card-data {} ul.sidebar-menu { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } ul.sidebar-menu > li { margin-bottom: 20px; line-height: 1.25; } ul.sidebar-menu > li:last-child { margin-bottom: 0; } ul.sidebar-menu > li > a { display: inline; color: inherit; text-decoration: none; padding: 1px 0; transition:color 0.3s; background-image: linear-gradient(to bottom, transparent 20%, currentColor 21%); background-position: 0 18px; background-repeat: no-repeat; background-size: 0% 4px; /*=*/ transition: background-size 0.5s ease-in-out 0.2s; } ul.sidebar-menu > li:not(.current-menu-item) > a:hover, ul.sidebar-menu > li:not(.current-menu-item) > a:focus { text-decoration: none; color: var(--purple); transition-delay: 0s; background-size: 100% 4px; /*=*/ } ul.sidebar-menu > li.current-menu-item { border-left: 4px solid var(--purple); padding-left: 9px; } ul.sidebar-menu > li.current-menu-item > a { color: var(--purple); font-weight: 600; } ul.menu-legal { margin: 0; padding: 0; list-style: none none; list-style-position: inside; border: 3px solid var(--blue-lightest); border-radius: 6px; padding: 15px 25px; } ul.menu-legal > li { border-bottom: 1px solid var(--grey-05); } ul.menu-legal > li:last-child { border-bottom: 0; } ul.menu-legal > li > a { display: block; padding: 10px 0; text-decoration: none; color: inherit; transition:color 0.3s; } ul.menu-legal > li > a:hover { color: var(--purple); text-decoration: underline; } ul.menu-legal > li > a::before { content: '» '; } #footer { position: relative; padding-top: var(--padding-module); position: relative; background-color: #080B27; color: var(--white); background-image: url('images/footer.webp'); background-size: cover; background-position: bottom top; background-repeat: no-repeat; margin-top: var(--padding-module); } #footer::before { content: ''; left: 0; right: 0; height: 50px; display: block; position: absolute; overflow: hidden; background-size: 105% 105%; background-repeat: no-repeat; background-position: center bottom; bottom: 100%; background-image: url('images/curve-footer.svg'); margin-bottom: -12px; } #footer .pointing { display: block; width: 100px; position: absolute; pointer-events: none; } #footer .pointing-left { left: 0; top: 15%; } #footer .pointing-right { right: 0; bottom: 15%; transform: scaleX(-1); /* scaleY(-1) */ } .copyright-doodle { position: absolute; pointer-events: none; left: 20px; bottom: 20px; line-height: 1; font-size: 60px; opacity: 0.2; } .footer-cta { position: relative; } .footer-cta .doodle { position: absolute; top: 0; right: 0; font-size: 140px; line-height: 1; color: var(--blue); opacity: 0.25; pointer-events: none; } .footer-cta .heading-wrapper { position: relative; margin-left: auto; margin-right: auto; margin-bottom: 40px; text-align: center; max-width: 540px; } .footer-cta .heading { margin: 0; } .footer-cta .heading mark { color: var(--yellow-light); } .footer-cta .actions { display: flex; justify-content: center; align-items: center; gap: 0 30px; } .footer-cta .actions .btn-solid { font-size: 22px; } .footer-cta .description { text-align: center; padding-top: 30px; font-size: 14px; font-style: italic; opacity: 0.4; max-width: 80%; margin-left: auto; margin-right: auto; } .footer-liner { margin: 40px 0; border-width: 3px; border-color: var(--purple-subtle); opacity: 0.4; } .footer-cta .nectar-scribble { transform: scaleY(0.6); /* scale: 1 0.6; */ position: absolute; top: 92%; width: 250px; /* z-index: -1; */ } @keyframes nectarStrokeAnimation { 0% { stroke-dashoffset:1; opacity:0; } 1% { opacity:1; } 100% { stroke-dashoffset:0; } } .footer-cta .squiggle-underline-2 path { stroke-dasharray:1; stroke-dashoffset:1; opacity:0; } .footer-cta.animatenow .squiggle-underline-2 path { stroke-linecap: round; opacity: 1; animation: nectarStrokeAnimation 1.3s cubic-bezier(0.65,0,0.35,1) forwards; } .row-footer { display: flex; gap: 0 40px; } .row-footer .col-menu { flex: 1 0 300px; } .row-footer .col-license { flex: 1 1 100%; } .row-footer .col-actions { flex: 1 0 400px; } .footer-brand { margin-bottom: 30px; } .footer-brand img { max-width: 280px; } .footer-menu {} .footer-menu ul { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .footer-menu ul > li { margin-bottom: 8px; } .footer-menu ul > li:last-child { margin-bottom: 0; } .footer-menu ul a { color: inherit; text-decoration: none; } .footer-menu ul a:hover { text-decoration: underline; } .badge-menu { margin-left: 4px; display: inline-flex; padding: 4px 5px; border-radius: 12px; line-height: 1; justify-content: center; align-items: center; gap: 0 4px; background-color: #FFF079; color: #6F470B; font-size: 11px; } .badge-menu i { opacity: 0.5; animation: rotateAnimation 5s linear infinite; } .badge-menu strong { font-weight: 700; font-size: 90%; } @keyframes rotateAnimation { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .footer-payment-wrapper { padding-top: 30px; } ul.footer-payment { display: flex; align-items: center; justify-content: center; gap: 2px 12px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none none; list-style-position: inside; } ul.footer-payment > li { opacity: 0.4; } ul.footer-payment > li.break-line { flex-basis: 100%; /* Forces the element onto a new line */ } .copyright-wrapper {} .copyright-wrapper hr { margin: 30px 0 0 0; border-width: 3px; border-color: var(--purple-subtle); opacity: 0.4; } .copyright { display: flex; align-items: center; justify-content: space-between; gap: 0 20px; font-size: 14px; opacity: 0.4; padding: 20px 0; } .copyright .primary {} .copyright nav {} .copyright nav a { color: inherit; text-decoration: none; } .copyright nav a:hover { text-decoration: underline; } .copyright nav .divider { color: var(--purple-subtle); font-weight: 700; padding: 0 8px; } .card-customer { background-color: var(--blue-dark); border-radius: 8px; padding: 25px; } .card-customer .heading { margin-bottom: 12px; color: var(--yellow-light); } .card-customer picture { display: block; margin-bottom: 15px; border-radius: 6px; overflow: hidden; } .card-customer .description { margin-bottom: 0; } .card-customer .description a { color: inherit; } .card-customer .description a:hover { color: var(--yellow-light); } .card-customer .actions { padding-top: 20px; display: flex; gap: 0 20px; } .card-customer .actions a.btn { display: flex; align-items: center; justify-content: center; gap: 8px 8px; border-radius: 6px; border: 2px solid var(--blue-link); text-decoration: none; color: inherit; padding: 8px 15px; flex: 1 1 100%; /* can grow & shrink equally within a flex container, with an initial size of 100% */ font-size: 18px; transition:all 0.2s; } .card-customer .actions a.btn:hover { border-color: var(--yellow-light); background-color: rgba(0, 0, 0, 0.2); transform: translateY(-1px); } .card-license { border-radius: 8px; padding: 25px 25px 0px 25px; } .card-license .heading { margin-bottom: 12px; color: var(--yellow-light); } .card-license .clarification { font-size: 14px; color: var(--blue-light); line-height: 1.35; } .card-license .clarification a { color: inherit;} .card-license .clarification a:hover { color: var(--yellow-light); text-decoration: underline; } .card-license-options { margin: 0 0 15px 0; padding: 0; list-style: none none; list-style-position: inside; } .card-license-options > li { margin-bottom: 15px; } .card-license-options > li:last-child { margin-bottom:0; } .card-license-options a.link { display: flex; align-items: center; gap: 0 8px; padding: 7px 12px; color: inherit; text-decoration: none; border: 1.6px solid var(--blue-link); border-radius: 6px; transition: border-color 0.3s, transform 0.25s; } .card-license-options a.link .symbol { display: block; flex-shrink: 0; font-size: 32px; line-height: 1; color: var(--blue-link); transition:color 0.3s, transform 0.2s; } .card-license-options a.link .labels { display: block; } .card-license-options a.link .labels strong { display: block; font-size: 20px; line-height: 1; font-weight: 700; } .card-license-options a.link .labels small { display: block; line-height: 1; color: var(--blue-light); padding-top: 3px; } .card-license-options a.link:hover { border-color: var(--yellow-light); transform: translateY(-1px); } .card-license-options a.link:hover .symbol { color: var(--yellow-light); transform: translateX(-2px); } .javascript-warning { position: fixed; top:48%; left: 15px; right: 15px; z-index: 999999999; } .javascript-warning .alert { text-align: center; margin-bottom: 0; max-width: 860px; margin-left: auto; margin-right: auto; box-shadow: 0px 0px 100px rgba(241, 90, 90, 1); } .custom-modal {} .custom-modal header { display: flex; align-items: center; margin-bottom: 15px; } .custom-modal header .label { flex-grow: 1; } .custom-modal header .label i { color: var(--blue); } .custom-modal header .actions { flex-shrink: 0; } .custom-modal article {} .custom-modal footer {} .btn-modal-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; outline: none; border-radius: 50%; border: none; line-height: 1; font-size: 18px; background-color: var(--red); color: var(--white); } .btn-modal-close i { transition:all 0.2s; } .btn-modal-close:hover i { transform: rotate(90deg); } .shake { transition: all .35s ease-in-out 0s; animation: shake 1.25s ease-in-out infinite; } @keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}} @keyframes shake{0%{transform:rotate(0)}10%{transform:rotate(10deg)}20%{transform:rotate(-10deg)}30%{transform:rotate(6deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(2deg)}60%{transform:rotate(-1deg)}70%,80%,to{transform:rotate(0)}} .header-promo-wrapper { background-color: var(--yellow-subtle); padding: 10px 0; } .header-promo { display: flex; align-items: center; justify-content: space-between; gap: 0 20px; } .header-promo:hover, .header-promo:focus { color: inherit; } .header-promo:hover .data { text-decoration: underline; } .header-promo .data { display: block; color: inherit; text-decoration: none; } .header-promo .data .link { color: var(--link-color); } .header-promo .data mark { font-weight: 700; text-decoration: underline; color: var(--fuchsia); } .header-promo .actions { flex-shrink: 0; } .header-promo-dismiss { outline: none; border: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--fuchsia); font-size: 14px; width: 34px; height: 34px; background-color: var(--white); box-shadow: 0 0px 6px rgba(0,0,0,0.2); transition:all 0.2s; } .header-promo-dismiss:hover, .header-promo-dismiss:focus { color: var(--white); background-color: var(--fuchsia); } /* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ MODULES ║ */ /* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */ .module { position: relative; } .module[data-padding="1"] { padding-top: var(--padding-module); padding-bottom: var(--padding-module); } [data-background="default"] + [data-background="default"], [data-background="#FFFFFF"] + [data-background="#FFFFFF"], [data-background="#F0F2FC"] + [data-background="#F0F2FC"], [data-background="#F4F5F8"] + [data-background="#F4F5F8"], [data-background="blue-dark"] + [data-background="blue-dark"] { margin-top: calc(var(--padding-module) * -1)} [data-background="default"] { background-color: transparent; } [data-background="#FFFFFF"] { background-color: var(--white); } [data-background="#F0F2FC"] { background-color: var(--purple-lightest); } [data-background="#F4F5F8"] { background-color: var(--purple-shade); } [data-background="blue-dark"] { background-color: var(--blue-dark); color: var(--white); } .module-heading { display: flex; flex-direction: column; margin-bottom: 30px; } .module-heading .heading { margin-bottom: 0; } .module-heading hr { margin: 20px 0 0 0; width: 100%; max-width: 160px; border-radius: 4px; border-width: 6px; border-color: var(--yellow); } .module-heading-centered { margin-left: auto; margin-right: auto; align-items: center; text-align: center; } body.home {} body.home #page { } body.home #header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; box-shadow: none; } body.home .header-wrapper { background-color: transparent; } body.home .menu-desktop li.menu-item a { color: var(--white); opacity: 0.8; } body.home .menu-desktop li.current-menu-item a { opacity: 1; } /* MODULE 0 ------------------------------------------------------------------------------------- */ .module-0 { background-color: #060920; background-image: url('images/hero.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .module-0[data-padding="1"] { padding-top: calc(var(--padding-module) * 3); } .module-0 .module-heading { margin-bottom: 40px; } .module-0 .module-heading hr { border-color: var(--sky); } .module-0 .module-heading .description { max-width: 920px; margin-left: auto; margin-right: auto; margin-bottom: 0; padding-top: 22px; } .module-0 .noted { max-width: 920px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 0; opacity: 0.8; padding-top: 20px; } .row-cards > [class^="col-"] { margin-bottom: 20px; } .card-options { height: 100%; border-radius: 7px; padding: 20px; background-color: var(--white); color: var(--body-font-color); } .card-heading { display: flex; align-items: center; gap: 0 8px; margin-bottom: 20px; } .card-heading .symbol { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; } .card-heading .symbol i { font-size: 28px; line-height: 1; } .card-heading .heading { margin: 0; font-weight: 700; } .card-options.type-1 {} .card-options.type-2 .symbol { background-color: #E0F495; color: #568402; } .card-options.type-3 .symbol { background-color: var(--purple-light); color: var(--purple-intense); } .card-features { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: grid; grid-template-columns: repeat(2, 1fr); } .card-features > li { padding: 20px; text-align: center } .card-features > li:nth-child(1) { border-bottom: 3px solid var(--purple-lightest); border-right: 3px solid var(--purple-lightest); } .card-features > li:nth-child(2) { border-bottom: 3px solid var(--purple-lightest); } .card-features > li:nth-child(2) dl dt { color: var(--sky); } .card-features > li:nth-child(3) { border-right: 3px solid var(--purple-lightest); } .card-features > li:nth-child(3) dl dt { color: var(--orange); } .card-features > li:nth-child(4) {} .card-features > li:nth-child(4) dl dt { color: var(--purple-intense); } .card-features dl { margin-bottom: 0; } .card-features dl dt { line-height: 1; font-size: 84px; color: #648593; } .card-features dl dd { padding-top: 12px; font-weight: 800; opacity: 0.8; font-size: 17px; } .card-list { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .card-list > li { border-top: 3px solid var(--blue-link); padding: 20px 0; } .card-options .actions {} .card-options .actions .link { display: flex; gap: 0 7px; align-items: center; justify-content: center; padding: 8px 15px; background-color: #F1F4F9; border: 2px solid var(--blue-lightest); border-radius: 6px; color: inherit; text-decoration: none; transition:all 0.2s; width: 100%; } .card-options .actions .link i { font-size: 20px; color: var(--red); } .card-options .actions .link strong { font-size: 20px; font-weight: 700; } .card-options .actions .link:hover { background-color: var(--red); color: var(--white); border-color: var(--red-dark); } .card-options .actions .link:hover i { color: var(--white); } dl.card-db { display: flex; gap: 0 14px; } dl.card-db dt { flex-shrink: 0; width: 70px; } dl.card-db dd { flex-grow: 1; } dl.card-db dd .heading { font-weight: 700; margin-bottom: 10px; } dl.card-db dd p { margin-bottom: 0; } .calculated-list { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .calculated-list > li:not(:last-child) { margin-bottom: 8px; } .calculated-list > li .label { line-height: 1.2; } .calculated-list > li .pricing { font-size: 14px; white-space: nowrap; } .calculated-list > li:hover .pricing { } .calculated-price { display: flex; align-items: center; gap: 0 15px; justify-content: space-between; padding: 8px 15px; border-radius: 6px; background-color: #F1F4F9; line-height: 1; } .calculated-price .label { opacity: 0.8; } .calculated-price .price { color: var(--purple-intense); font-size: 28px; white-space: nowrap; } .calculated-action { margin-bottom: 0; } .calculated-action .btn-solid { display: flex; border-radius: 6px; } .calculated-action .btn-solid .label { font-size: 19px; font-weight: bold; } ol.check-options { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } ol.check-options > li { margin-bottom: 4px; } /* Checkboxes */ .check-option { font-weight: 400; display: flex; align-items: center; gap: 0 8px; transition:background-color 0.2s; padding: 0; cursor: pointer; } .check-option[aria-pressed="true"] { } .check-option var { flex-shrink: 0; display: inline-block; box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.12); border-radius: 2px; overflow: hidden; width: 20px; height: 20px; border: 2px solid var(--purple-intense); background-color: var(--white); background-size: 80%; background-position: center center; background-repeat: no-repeat; } .check-option [type="checkbox"] { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } .check-option [type="checkbox"]:checked + var { background-color: var(--purple-intense); border-color: var(--purple-intense); background-image: url('images/checkbox-on-white.svg'); } .check-option .label { flex-grow: 1; color: var(--purple-intense); } .check-option .label .code { font-weight: 600; font-size: 12px; } .check-option .price { flex-shrink: 0; } .check-option:hover .label { text-decoration: none; } .check-option [type="checkbox"]:disabled + var { border-color: var(--grey-30); cursor: not-allowed; } .check-option [type="checkbox"]:disabled ~ .label { color: var(--grey-50); text-decoration: none; cursor: not-allowed; } /* Radios */ .radio-option { font-weight: 400; display: flex; align-items: center; gap: 0 8px; transition:background-color 0.2s; padding: 0; cursor: pointer; } .radio-option[aria-pressed="true"] { } .radio-option var { flex-shrink: 0; display: inline-block; box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.12); border-radius: 50%; overflow: hidden; width: 21px; height: 21px; border: 2px solid var(--purple-intense); background-color: var(--white); background-size: 70%; background-position: center center; background-repeat: no-repeat; } .radio-option [type="radio"] { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } .radio-option [type="radio"]:checked + var { background-color: var(--purple-intense); border-color: var(--purple-intense); background-image: url('images/checkbox-on-white.svg'); } .radio-option .label { flex-grow: 1; } .radio-option .price { flex-shrink: 0; } .radio-option:hover .label { text-decoration: underline; } dl.card-choices {} dl.card-choices dt { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } dl.card-choices dt .link-hint { color: var(--purple-intense); text-decoration: none; } dl.card-choices dt .link-hint:hover u { text-decoration: none; } dl.card-choices dd {} dl.card-choices select { cursor: pointer; width: 100%; border: 3px solid var(--purple-intense); padding: 9px 13px; background-color: var(--white); border-radius: 4px; } .hero { display: flex; gap: 0 50px; margin-bottom: var(--padding-module); position: relative; } .hero .hero-media { flex-shrink: 0; width: 600px; } .hero .hero-data { flex-grow: 1; padding-top: 6%; } .hero-heading {} .hero-heading .superheading { margin-bottom: 15px; } .hero-heading .superheading .badge { font-size: 10px; } .hero-heading .heading { color: var(--yellow-light); margin: 0; } .hero-heading hr { border-color: var(--yellow-light); margin: 18px 0; max-width: 160px; border-width: 6px; border-radius: 3px; overflow: hidden; } .hero-heading .description { font-size: 17px; opacity: 0.8; } .badge { border: 2px solid transparent; padding: 5px 8px; border-radius: 4px; line-height: 1; border-radius: 3px; } .badge-purple { border-color: var(--pink); } ul.hero-logos { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: flex; gap: 0 30px; align-items: center; justify-content: space-between; } ul.hero-logos > li {} ul.hero-logos > li:nth-child(1) {} ul.hero-logos > li:nth-child(2) { width: 148px; } ul.hero-logos > li:nth-child(3) { width: 148px; } dl.google-rating { display: flex; align-items: center; gap: 0 8px; margin-bottom: 0; } dl.google-rating dt { flex-shrink: 0; width: 38px;} dl.google-rating dd { font-size: 16px; white-space: nowrap; } dl.google-rating dd strong { opacity: 0.8; line-height: 1; font-weight: 600; } dl.google-rating dd i { color: var(--orange); margin-left: 4px; } dl.google-rating dd small { display: block; opacity: 0.8; font-size: 12px; } @keyframes business-star-rating { 0%{transform:scale(1,1);opacity:.05;filter:saturate(0)} 5%{transform:scale(.1,1);opacity:.15} 8%{transform:scale(.1,1);opacity:.5} 14%{opacity:1} 21%{transform:scale(1.25,1.25);filter:saturate(100%)} 25%{transform:scale(1,1);filter:brightness(100%)} 100%,88%{transform:scale(1,1);filter:brightness(100%) saturate(100%)} 94%{transform:scale(1.15,1.15);filter:brightness(120%) saturate(85%)} } dl.google-rating dd i{transform:scale(-1,1);animation:business-star-rating 3s .5s ease-in-out 1;animation-fill-mode:backwards;animation-play-state:paused;animation-play-state:running;transform-origin:50% 50%} dl.google-rating dd i:nth-of-type(1){animation-duration:3s;animation-delay:.5s} dl.google-rating dd i:nth-of-type(2){animation-duration:2.8s;animation-delay:.9s} dl.google-rating dd i:nth-of-type(3){animation-duration:2.6s;animation-delay:1.3s} dl.google-rating dd i:nth-of-type(4){animation-duration:2.4s;animation-delay:1.7s} dl.google-rating dd i:nth-of-type(5){animation-duration:2.2s;animation-delay:2.1s} .hero-video { display: block; text-decoration: none; color: inherit; margin-bottom: 30px; position: relative; } .hero-video .img-cover { transition:all 0.5s; } .hero-video .ratio { background-color: var(--grey-90); border-radius: 8px; overflow: hidden; } .hero-video .ratio-16x9 { --aspect-ratio: calc(9 / 14 * 100%); } .hero-video:hover .btn-play-video { opacity: 1; } .hero-video:hover .img-cover { filter: brightness(150%); } .btn-play-video { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: flex; align-items: center; gap: 0 10px; padding: 6px; border-radius: 36px; border: none; outline: none; white-space: nowrap; background-color: var(--white); color: var(--body-font-color); opacity: 0.8; } .btn-play-video .symbol { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; color: var(--white); line-height: 1; font-size: 18px; background: #C42127; background: linear-gradient(45deg,rgba(196, 33, 39, 1) 0%, rgba(150, 7, 16, 1) 100%); } .btn-play-video .label { padding-right: 12px; font-size: 20px; } .hero-doodle { position: absolute; top: 100%; right: 0; } .hero-doodle i { font-size: 120px; line-height: 1; color: var(--blue); opacity: 0.25; pointer-events: none; } .btn-duration { display: flex; align-items: center; justify-content: center; gap: 0 8px; position: absolute; bottom: 15px; left: 15px; padding: 8px; background-color: var(--black); color: var(--white); opacity: 0.6; line-height: 1; border-radius: 24px; white-space: nowrap; pointer-events: none; user-select: none; } .btn-duration i { font-size: 20px; } .btn-duration time { margin-right: 6px; font-size: 14px; } /* MODULE 1 ------------------------------------------------------------------------------------- */ .module-1 { } /* MODULE 2 ------------------------------------------------------------------------------------- */ .module-2 { } .module-2 .module-heading hr { border-color: var(--green-electric); } .module-2 .module-heading .description { padding-top: 20px; max-width: 90%; margin-left: auto; margin-right: auto; } .softscreen { padding: 10px; display: block; margin-left: auto; margin-right: auto; position: relative; max-width: 930px; } .softscreen img { filter: drop-shadow(0 0 5px rgba(0,0,0,0.1)); } .softscreen + figcaption { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } .softscreen dl { margin: 0; padding: 0; position: absolute; } .softscreen dl dt { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: var(--green-electric); color: var(--blue-dark); border-radius: 50%; outline: 2px solid var(--green-electric); outline-offset: 3px; cursor: pointer; box-shadow: 0 0px 10px rgba(0,0,0,0.2); transition:all 0.25s; animation: hotPulse 0.5s infinite alternate; /* Keyframe animation */ } .softscreen dl dt i { transition:transform 0.25s; } .softscreen dl dt:hover i { transform: scale(1.25); } .softscreen dl dd { bottom: calc(100% + 40px); background-color: var(--blue-link); color: var(--white); padding: 8px 12px; width: 250px; border-radius: 6px; margin: 0; position: absolute; left: 50%; transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0,0,0,0.3); font-weight: 500; font-style: italic; line-height: 1.25; font-size: 15px; text-align: center; opacity: 0; pointer-events: none; transition:all 0.25s; } .softscreen dl dd::before { content:''; display: block; width: 12px; height: 12px; position: absolute; left: calc(50% - 6px); bottom: -6px; background-color: var(--blue-link); transform: rotate(45deg); } .softscreen dl.is_active {} .softscreen dl.is_active dt { transform: rotate(45deg); outline-offset: 5px; outline-width: 3px; outline-color: var(--blue-link); background-color: var(--red); color: var(--white); /* box-shadow: 0 1px 3px rgba(0,0,0,0.2); */ box-shadow: 0 0px 30px rgb(255, 32, 32) } .softscreen dl.is_active dd { opacity: 1; pointer-events: auto; bottom: calc(100% + 20px); } .softscreen dl.is_active dt { outline-color: var(--red); outline-style: dashed; } /* Screen 0 */ .softscreen dl.hot0.hotspot-0 { top: 12%; right: 22%; } .softscreen dl.hot0.hotspot-1 { top: 26%; right: 40%; } .softscreen dl.hot0.hotspot-2 { top: 48%; right: 28%; } .softscreen dl.hot0.hotspot-3 { bottom: 50%; left: 21%; } .softscreen dl.hot0.hotspot-4 { bottom: 9%; right: 59%; } /* Screen 1 */ .softscreen dl.hot1.hotspot-0 { top: 25%; left: 31%; } .softscreen dl.hot1.hotspot-1 { top: 51%; left: 9%; } .softscreen dl.hot1.hotspot-2 { top: 63%; left: 49%; } .softscreen dl.hot1.hotspot-3 { bottom: 15%; left: 14%; } .softscreen dl.hot1.hotspot-4 { bottom: 15%; right: 14%; } .softscreen dl.hot1.hotspot-5 { top: 22%; right: 15%; } /* Screen 2 */ .softscreen dl.hot2.hotspot-0 { top: 11%; left: 18%; } .softscreen dl.hot2.hotspot-1 { top: 26%; left: 6%; } .softscreen dl.hot2.hotspot-2 { top: 57%; left: 12%; } .softscreen dl.hot2.hotspot-3 { top: 23%; left: 50%; } .softscreen dl.hot2.hotspot-4 { top: 61%; left: 57%; } .softscreen dl.hot2.hotspot-5 { top: 35%; right: 16%; } /* Screen 3 */ .softscreen dl.hot3.hotspot-0 { top: 16%; left: 26%; } .softscreen dl.hot3.hotspot-1 { top: 40%; left: 9%; } .softscreen dl.hot3.hotspot-2 { top: 65%; left: 39%; } .softscreen dl.hot3.hotspot-3 { top: 20%; right: 12%; } .softscreen dl.hot3.hotspot-4 { top: 41%; right: 26%; } .softscreen dl.hot3.hotspot-5 { bottom: 19%; right: 19%; } /* Screen 4 */ .softscreen dl.hot4.hotspot-0 { top: 36%; left: 10%; } .softscreen dl.hot4.hotspot-1 { top: 25%; left: 40%; } .softscreen dl.hot4.hotspot-2 { top: 75%; left: 10%; } .softscreen dl.hot4.hotspot-3 { bottom: 19%; left: 38%; } .softscreen dl.hot4.hotspot-4 { top: 37%; right: 24%; } @keyframes hotPulse { 0% { outline-offset: 2px; } 100% { outline-offset: 6px; } } .module-2 { overflow: hidden; } .single-fakturnik-wrapper { margin-bottom: 30px; } .single-fakturnik {} .single-fakturnik figure { margin-bottom: 0; } .single-fakturnik .slick-list { overflow: visible !important; } .single-fakturnik .slick-slide { opacity: 0.3; } .single-fakturnik .slick-slide.slick-active { opacity: 1; } .single-fakturnik .slick-arrow { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; cursor: pointer; border-radius: 50%; overflow: hidden; font-size: 28px; opacity: 0.7; transition:all 0.2s; background-color: var(--green-electric); color: var(--blue-dark); } .single-fakturnik .slick-arrow:hover { opacity: 1; color: var(--blue-subtle); box-shadow: 0 5px 10px rgba(55, 121, 207, 0.1); } .single-fakturnik .slick-prev { left: 0; } .single-fakturnik .slick-next { right: 0; } .single-fakturnik .slick-prev i { animation: leftArrow 0.5s infinite alternate; /* Keyframe animation */ } .single-fakturnik .slick-next i { animation: rightArrow 0.5s infinite alternate; /* Keyframe animation */ } @keyframes leftArrow { 0% { transform: translateX(-2px); } 100% { transform: translateX(2px); } } @keyframes rightArrow { 0% { transform: translateX(2px); } 100% { transform: translateX(-2px); } } .key-highlights-section { padding: 0 120px; } .key-highlights-wrapper { margin-left: auto; margin-right: auto; max-width: 1440px; } .key-highlights { } .key-highlights .slick-slide { margin: 0 15px; } .key-highlights .slick-list { margin: 0 -15px; } .key-highlights .slick-arrow { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; cursor: pointer; border-radius: 50%; overflow: hidden; font-size: 28px; opacity: 0.7; transition:all 0.2s; background-color: var(--blue-lightest); color: var(--blue); } .key-highlights .slick-prev { left: -100px; } .key-highlights .slick-next { right: -100px; } .key-highlights .slick-prev i { animation: leftArrow 0.5s infinite alternate; /* Keyframe animation */ } .key-highlights .slick-next i { animation: rightArrow 0.5s infinite alternate; /* Keyframe animation */ } .card-highlight { border: 3px solid var(--purple-lightest); padding: 20px; border-radius: 6px; } .card-highlight figure { display: flex; flex-direction: column; margin-bottom: 12px; } .card-highlight picture { order: 2; border-radius: 4px; overflow: hidden; background-color: var(--grey-05); } .card-highlight figcaption { order: 1; font-weight: 700; margin-bottom: 15px; } .card-highlight p { margin-bottom: 0; font-size: 16px; } /* MODULE 3 ------------------------------------------------------------------------------------- */ .module-3 { } .module-3 .module-heading { margin-bottom: 50px; } .module-3 .module-heading hr { margin-top: 15px; } .module-3 .module-inner { border: 3px solid var(--purple-lightest); padding: 30px; border-radius: 6px; background-position: bottom -50px right 0; background-repeat: no-repeat; background-image: url('images/warehouse-screen.webp'); background-size: 38% auto; } .module-3 .features-wrapper {} .module-3 .features { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: grid; gap: 20px 30px; grid-template-columns: repeat(2, 1fr); } .module-3 .features > li { position: relative; padding-left: 32px; } .module-3 .features > li::before { font-family: "Fakturnik Icons"; font-weight: 400; content:"\E530"; color: var(--green-electric); position: absolute; left: 0; } .module-3 .noted { padding-top: 30px; font-size: 14px; margin-bottom: 0; } /* MODULE 4 ------------------------------------------------------------------------------------- */ .module-4 { } .module-4 .module-inner { border: 3px solid var(--purple-lightest); padding: 30px; border-radius: 6px; background-position: bottom -15px right; background-repeat: no-repeat; background-image: url('images/platforms.webp'); background-size: 35% auto; } .module-4 .features-wrapper {} .module-4 .features { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: grid; gap: 20px 30px; grid-template-columns: repeat(2, 1fr); } .module-4 .features > li { position: relative; padding-left: 32px; } .module-4 .features > li::before { font-family: "Fakturnik Icons"; font-weight: 400; content:"\E530"; color: var(--green-electric); position: absolute; left: 0; } .module-4 .noted { padding-top: 30px; font-size: 14px; margin-bottom: 0; } .heading-wrapper-4 { display: flex; gap: 0 22px; align-items: center; } .heading-wrapper-4 .symbol-wrapper { flex-shrink: 0; } .heading-wrapper-4 .symbol { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; font-size: 55px; border-radius: 50%; line-height: 1; } .heading-wrapper-4 .symbol img { max-width: 54%; } .heading-wrapper-4 .headline { flex-grow: 1; } .heading-wrapper-4 .superheading { margin-bottom: 6px; } .heading-wrapper-4 .superheading abbr { text-decoration: none; border: none; font-family: "Fakturnik Icons"; font-weight: 400; } .heading-wrapper-4 .heading { margin: 0; font-weight: 700; } .heading-section-4 { margin-bottom: 45px; display: flex; gap: 0 30px; align-items: center; } .heading-section-4 .primary { flex-grow: 1; } .heading-section-4 .secondary { flex-shrink: 0; } .heading-section-4[data-theme="orange"] .symbol { background-color: var(--orange-lightest); color: var(--orange-dark); } .heading-section-4[data-theme="orange"] .superheading { color: var(--orange-subtle); } .heading-section-4[data-theme="purple"] .symbol { background-color: var(--purple-light); color: var(--purple-intense); } .heading-section-4[data-theme="purple"] .superheading {color: var(--purple-intense); } .heading-price-4 {} .heading-price-4 .labeled { color: var(--blue-dark); font-size: 18px; margin-bottom: 8px; } .heading-price-4 .actions {} .heading-price-4 .actions .btn-solid { font-size: 17.5px; } /* MODULE 5 ------------------------------------------------------------------------------------- */ .module-5 { } .module-5 .module-heading-wrapper { margin-bottom: 25px; } .module-5 .module-heading { display: flex; align-items: center; flex-direction: row; margin-bottom: 0; gap: 0 12px; } .module-5 .module-heading .symbol { flex-shrink: 0; } .module-5 .module-heading .symbol img { width: 50px;} .module-5 .module-heading .heading { flex-grow: 1; margin: 0; display: block; } .module-5 .module-inner { border: 3px solid var(--orange-lightest); padding: 25px; border-radius: 6px; background-image: url('images/lion.svg'); background-size: 220px auto; background-position: bottom -70px right -30px; background-repeat: no-repeat; } .module-5 .heading-divider { margin: 12px 0 0 0; width: 100%; max-width: 275px; border-radius: 4px; border-width: 6px; border-color: var(--orange); } .module-5 .subheading { } .module-5 .features-wrapper { padding-right: 240px; } .module-5 ol.features { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: grid; gap: 12px 30px; grid-template-columns: repeat(2, 1fr); } .module-5 ol.features > li { grid-column: span 1; position: relative; padding-left: 32px; } .module-5 ol.features > li:last-child { margin-bottom: 0; } .module-5 ol.features > li::before { font-family: "Fakturnik Icons"; font-weight: 400; content:"\E530"; color: var(--green-electric); position: absolute; left: 0; } .card-warning { border-radius: 10px; padding: 25px 30px; background-color: var(--orange-light); } .card-warning .description { font-size: 108%; color: var(--red-dark); } .card-warning .actions .btn-md { display: flex; font-size: 19px; } .split-content-5 { display: flex; gap: 0 20px; } .split-content-5 .col-media { flex-shrink: 0; user-select: none; pointer-events: none; } .split-content-5 .col-details { flex-grow: 1; } .pricecap { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; position: relative; } .pricecap sup { position: absolute; top: -10px; right: 0; padding: 0 8px; background-color: var(--orange-dark); display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; width: 52px; height: 52px; } .pricecap { border-radius: 50%; background-color: var(--green-regular); color: var(--white); display: flex; align-items: center; justify-content: center; flex-direction: column; width: 160px; height: 160px; text-align: center; } .pricecap .price-eur { line-height: 0.9; font-weight: 700; font-size: 49px; } .pricecap .price-bgn { line-height: 0.9; font-weight: 700; font-size: 22px; } .pricecap hr { display: block; width: 94px; margin: 8px 0; border-color: var(--white); border-width: 1px; } .pricecap small { line-height: 1; font-size: 100%; } .floating { animation: floating 6s ease-in-out infinite; } @keyframes floating { 0% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.3); transform: translatey(0px); } 50% { box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.15); transform: translatey(-10px); } 100% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.3); transform: translatey(0px); } } .floating-only { animation: floatingOnly 4s ease-in-out infinite; } @keyframes floatingOnly { 0% { transform: translatey(1px); } 50% { transform: translatey(-4px); } 100% { transform: translatey(1px); } } /* MODULE 6 ------------------------------------------------------------------------------------- */ .module-6 { } .module-6 .alert-wrapper { padding-top: 30px; } .module-6 .alert-wrapper .alert { margin-bottom: 0; } .module-6 .grid-2 {} .card-module { border: 3px solid var(--purple-lightest); padding: 30px; border-radius: 6px; } .card-module-heading { display: flex; align-items: center; gap: 0 22px; margin-bottom: 25px; } .card-module-heading .col-symbol { flex-shrink: 0; } .card-module-heading .col-symbol .symbol { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; font-size: 50px; border-radius: 50%; line-height: 1; } .card-module-1 .card-module-heading .col-symbol .symbol { color: var(--sky); background-color: var(--sky-lightest); } .card-module-1 .card-module-heading .superscript { color: var(--sky); } .card-module-2 .card-module-heading .col-symbol .symbol { color: var(--orange); background-color: var(--orange-lightest); } .card-module-2 .card-module-heading .superscript { color: var(--orange); } .card-module-heading .superscript { margin-bottom: 5px; font-size: 20px; font-weight: 700; text-transform: uppercase; } .card-module-heading .heading { font-weight: 700; margin: 0; } .card-module-heading .col-data { flex-grow: 1; } .card-module ul.features { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .card-module ul.features > li { position: relative; margin-bottom: 12px; padding-left: 32px; } .card-module ul.features > li:last-child { margin-bottom: 0; } .card-module ul.features > li::before { font-family: "Fakturnik Icons"; font-weight: 400; content:"\E530"; color: var(--green-electric); position: absolute; left: 0; } /* MODULE 7 ------------------------------------------------------------------------------------- */ .module-7 { } .module-7 .module-heading { max-width: 660px; margin-bottom: 50px; } .module-7 .module-heading hr { border-color: var(--blue-link); } .module-7 .actions { display: flex; gap: 0 30px; justify-content: center; } /* MODULE 8 ------------------------------------------------------------------------------------- */ .module-8 { background-image: url('images/icon-faq-book.svg'); background-size: 260px auto; background-position: bottom 60px left -80px; background-repeat: no-repeat; margin-top: var(--padding-module); margin-bottom: var(--padding-module); } .module-8::before, .module-8::after { content: ''; left: 0; right: 0; height: 50px; display: block; position: absolute; overflow: hidden; background-size: 105% 105%; background-repeat: no-repeat; background-position: center bottom; } .module-8::before { bottom: 100%; background-image: url('images/curve-module-8.svg'); margin-bottom: -9px; } .module-8::after { transform: scaleX(-1) scaleY(-1); top: 100%; background-image: url('images/curve-module-8.svg'); margin-top: -9px; } .layout-faq { display: flex; gap: 0 60px; } .layout-faq .col-sidebar { flex-shrink: 0; width: 260px; } .layout-faq .col-content { flex-grow: 1; } .plusminus::before { content:''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); height: 32px; width: 32px; border-radius: 50%; opacity: 0; transition: all 333ms ease-in-out; } .plusminus { display: block; position: relative; width: 32px; height: 32px; border: 2.5px solid var(--green); border-radius: 50%; flex-shrink: 0; } .plusminus em, .plusminus i { display: block; position: absolute; border-radius: 3px; background-color: var(--green); transition: all .25s ease; } .plusminus em { margin: 0 20%; width: 60%; height: 3px; top: calc(50% - 1.5px); /* half the height*/ } .plusminus i { margin: 20% 0; width: 3px; height: 60%; left: calc(50% - 1.5px); /* half the width*/ } .faqz-wrapper {} .faqz-wrapper dl.faqz:last-of-type { border-bottom: none; } dl.faqz { margin: 0; border-bottom: 2px solid var(--blue-lightest); } dl.faqz dt { display: flex; align-items: center; justify-content: space-between; gap: 0 15px; padding: 17px 0; cursor: pointer; } dl.faqz dt .heading { margin: 0; font-weight: 700; } dl.faqz dd { padding-bottom: 20px; display: none; } dl.faqz.faqz-active dt .heading { color: var(--purple); } dl.faqz.faqz-active dt .plusminus { border-color: var(--blue-lightest); } dl.faqz.faqz-active dt .plusminus em { background-color: var(--purple); } dl.faqz.faqz-active dt .plusminus i { background-color: transparent; transform: rotate(-90deg); } /* Hover */ dl.faqz dt:hover .heading { text-decoration: underline; } dl.faqz dt:hover .plusminus::before { background-color: var(--white); outline: 3px solid var(--blue-lightest); opacity: 1; transform: translate(-50%, -50%) scale(1.0); transform-origin: center center; /* Ensures scaling from the center */ } dl.faqz dt:hover .plusminus em, dl.faqz dt:hover .plusminus i { background-color: var(--purple); } /* MODULE 9 ------------------------------------------------------------------------------------- */ .module-9 { } .heading-help-wrapper { margin-bottom: 40px; } .heading-help { display: flex; align-items: center; gap: 0 20px; margin-bottom: 15px; } .heading-help .heading { margin: 0; } .heading-help .heading-link { color: var(--purple); } .heading-help .divider { display: block; width: 0; height: 36px; border-left: 3px solid var(--grey-05); } .heading-help .description p:last-of-type { margin-bottom: 0; } .card-tool { color: inherit; text-decoration: none; display: flex; gap: 0 30px; } .card-tool:hover { color: inherit; } .card-tool .col-media { flex-shrink: 0; width: 120px; } .card-tool .col-details { flex-grow: 1; } .card-tool .heading { max-width: 80%; margin-bottom: 10px; color: var(--blue); } .card-tool:hover .heading { color: var(--blue); text-decoration: underline; } /* MODULE 10 ------------------------------------------------------------------------------------- */ .module-10 { } .component-searching { display: flex; align-items: center; gap: 0 75px; } .component-searching .col-media { flex-shrink: 0; width: 250px; } .component-searching .col-details { flex-grow: 1; } .component-searching .heading { margin-bottom: 15px; } .component-searching .description { margin-bottom: 30px; } .help-search {} .help-search form.wp-search::before { width: 32px; height: 32px; right: 10px; pointer-events: none; user-select: none; } .help-search.ajax-search .wp-search.loading::before { width: 19px; height: 19px; right: 18px; top: 26%; } .help-search input#wp-search-field-1 { background-color: var(--white); border: none; font-weight: 600; font-style: italic; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .help-search [type="submit"] { font-size: 0; color: transparent; } /* .searchform {} .searchform > div { display: flex; } .searchform .screen-reader-text { display: none; } .searchform #s { flex-grow: 1; } .searchform #searchsubmit { flex-shrink: 0 } */ /* MODULE 11 ------------------------------------------------------------------------------------- */ .module-11 { } .card-function { position: relative; display: block; color: inherit; text-decoration: none; text-align: center; padding: 30px 60px; border: 3px solid var(--blue-lightest); border-radius: 6px; transition: color 0.2s, border-color 0.2s; } .card-function picture { display: block; margin-bottom: 20px; } .card-function picture img { max-height: 160px; } .card-function .heading { margin: 0; transition:color 0.2s;} .card-function:hover .heading { text-decoration: underline; } .card-function .items-count { display: inline-flex; align-items: center; justify-content: center; padding: 0px 8px; border-radius: 16px; height: 24px; line-height: 1; position: absolute; top: 15px; right: 15px; z-index: 1; pointer-events: none; border: 2px solid var(--blue-light); font-size: 13px; font-weight: 500; opacity: 0.5; } a.card-function:hover { border-color: var(--yellow); color: inherit; } a.card-function:hover .heading { color: var(--purple); } a.card-function:hover .items-count { opacity: 1.0; border-color: var(--yellow); } .card-news-wrapper { padding: 6px 0; } .row-articles { align-items: stretch; } .card-news { background-color: var(--white); box-shadow: var(--shadow-primary) 0px 0px 8px 0px; border-radius: 6px; overflow: hidden; min-height: 100%; } .card-news a { color: var(--purple); } .card-news .col-media { position: relative; transition:opacity 0.2s; } .card-news .col-media:hover { opacity: 0.85; } .card-news .col-media time { position: absolute; bottom: 15px; right: 15px; font-size: 12px; display: inline-block; line-height: 1; padding: 4px 8px; border: 1px solid var(--white); color: var(--white); pointer-events: none; user-select: none; } .card-news .col-details { padding: 18px 20px; } .card-news .col-details .heading { margin-bottom: 15px; font-size: 22px; padding-left: 12px; border-left: 5px solid var(--yellow); } .card-news .col-details .description {} /* MODULE 12 ------------------------------------------------------------------------------------- */ .module-12 { } .module-divider { margin: 0; border-width: 3px; border-radius: 4px; border-color: var(--grey-05); } /* MODULE 13 ------------------------------------------------------------------------------------- */ .module-13 { overflow: hidden; } .module-13 .module-heading { margin-bottom: 25px; } .module-13 .module-heading hr { margin-top: 8px; border-color: var(--green-electric); } .cform-wrapper .element { position: absolute; right: 100%; top: 10%; z-index: 1; font-size: 70px; opacity: 0.1; color: var(--purple); } /* START | Base styling only */ .cform-wrapper { padding: 25px 25px; border-radius: 12px; box-shadow: var(--shadow-card) 0px 0px 30px 0px; background-color: var(--white); position: relative; z-index: 2; } .cform .wpforms-container .wpforms-field, .cform .wp-core-ui div.wpforms-container .wpforms-field { padding: 5px 0; } .cform .wpforms-container .wpforms-field-label, .cform .wp-core-ui div.wpforms-container-full .wpforms-field-label { font-weight: normal; font-style: italic; color: var(--blue-subtle); margin-bottom: 6px; } .cform .wpforms-container .wpforms-required-label, .cform .wp-core-ui div.wpforms-container .wpforms-required-label { color: var(--red); font-weight: normal; } .cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform input[type="phone"], .cform input[type="number"], .cform textarea { display: block; width: 100%; box-sizing: border-box; font-family: inherit; font-style: normal; font-weight: 400; margin: 0; border-radius: 3px; outline: 2px solid #DCF4FE; height: 42px; padding: 0 15px; border: 1px solid #8DB5DE; font-size: 16px; line-height: 100%; box-shadow: none; transition: border 0.15s, box-shadow 0.15s; } .cform textarea { line-height: 1.3; min-height: 43px; height: 120px; padding: 14px 14px; resize: vertical; } .cform .wpforms-container .wpforms-field-description, .cform .wpforms-container .wpforms-field-limit-text, .cform .wp-core-ui div.wpforms-container .wpforms-field-description, .cform .wp-core-ui div.wpforms-container .wpforms-field-limit-text { font-size: 14px; line-height: 1.25; color: rgba(0, 0, 0, 0.55); margin: 5px; } /* Размери */ .wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large, .wp-core-ui div.wpforms-container input.wpforms-field-large, .wp-core-ui div.wpforms-container select.wpforms-field-large, .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-large { max-width: 100%; } .cform .wpforms-container ul { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .cform .wpforms-container ul li { } .cform div.wpforms-container-full .wpforms-field.wpforms-field-checkbox.wpforms-list-inline ul { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: inline-flex; flex-wrap: wrap; padding: 0; gap: 15px; } .cform div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li { height: unset; line-height: 16px; display: flex; align-items: flex-start; margin: 0; } .cform div.wpforms-container-full hr, .cform div.wpforms-field-html hr.divider { border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.25); margin: 0.5em auto; border-color: var(--grey-10); } @keyframes blinkAlerts { 0% { color: var(--white); } 50% { color: transparent; } 100% { color: var(--white); } } .cform .wpforms-container label.wpforms-error, .cform .wpforms-container em.wpforms-error { z-index: 1; position: relative; padding: 4px 8px 5px 8px; font-style: italic; font-size: 13px; border-radius: 2px; line-height: 1.1; color: var(--white); background-color: var(--red); animation: blinkAlerts 1s infinite; } .cform div.wpforms-container div.wpforms-uploader { border-radius: 3px; background-color: #ecf9ff; border-color: #8DB5DE; border-width: 2px; } .cform div.wpforms-container div.wpforms-uploader .dz-message svg { color: #8DB5DE; opacity: 1; } .cform div.wpforms-container div.wpforms-uploader .dz-preview .dz-details { color: var(--purple); } .cform div.wpforms-container div.wpforms-uploader .dz-preview .dz-image { border-color: var(--purple); background-size: 70%; border-radius: 4px; border-width: 2px; background-image: url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFDGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgeG1wOkNyZWF0ZURhdGU9IjIwMjYtMDgtMDJUMTM6NDQ6NTQrMDE6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDI2LTA4LTAyVDEzOjQ1OjI3KzAxOjAwIgogICB4bXA6TWV0YWRhdGFEYXRlPSIyMDI2LTA4LTAyVDEzOjQ1OjI3KzAxOjAwIgogICBwaG90b3Nob3A6RGF0ZUNyZWF0ZWQ9IjIwMjYtMDgtMDJUMTM6NDQ6NTQrMDE6MDAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjQ4IgogICBleGlmOlBpeGVsWURp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); } .cform div.wpforms-container div.wpforms-uploader .modern-title { font-size: 12px; } .cform div.wpforms-container div.wpforms-uploader .dz-preview .dz-progress { background-color: var(--purple); } .cform div.wpforms-container div.wpforms-uploader .dz-preview .dz-progress .dz-upload { background-color: var(--green-electric); } .cform div.wpforms-container .wpforms-field-description { font-size: 13px; font-style: italic; } /* .cform { --wpforms-field-border-color: #8DB5DE !important; } .cform div.wpforms-container-full:not(:empty) { margin: 0px auto; } .cform div.wpforms-container input[type="text"], .cform div.wpforms-container input[type="email"], .cform div.wpforms-container input[type="tel"], .cform div.wpforms-container textarea { outline: 2px solid #DCF4FE; } .cform div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium { height: calc( var(--wpforms-field-size-input-height) * 3.0); } .cform div.wpforms-container-full .wpforms-form label.wpforms-error, .cform div.wpforms-container-full .wpforms-form em.wpforms-error { --wpforms-field-size-input-spacing: 6px; padding: 3px 9px; font-size: 13px; border-left: 3px solid var(--wpforms-label-error-color); } .cform div.wpforms-container input[type="text"].wpforms-error, .cform div.wpforms-container input[type="email"].wpforms-error, .cform div.wpforms-container input[type="tel"].wpforms-error, .cform div.wpforms-container textarea.wpforms-error { outline-color: #ffc2c2 !important; } */ /* .cform .wpforms-container .wpforms-field.wpforms-field-checkbox { border-width: 2px; border-color: var(--purple); background-color: var(--purple); padding: 12px; border-radius: 6px; background-color: var(--blue-background); margin-bottom: 20px; } .cform .wpforms-container .wpforms-field.wpforms-field-checkbox:hover { outline: 2px solid var(--purple-lightest); } .cform .wpforms-container .wpforms-field.wpforms-field-checkbox .wpforms-field-label-inline { padding-inline-start: 1px; font-style: italic; font-size: 14px; } .cform .wpforms-container .wpforms-field.wpforms-field-checkbox .wpforms-field-label-inline a { color: var(--purple); } */ .cform .wpforms-container .wpforms-field.contact-consent { border-width: 2px; border-color: var(--purple); background-color: var(--purple); padding: 12px; border-radius: 6px; background-color: var(--blue-background); margin-top: 12px; margin-bottom: 20px; } .cform .wpforms-container .wpforms-field.contact-consent:hover { outline: 2px solid var(--purple-lightest); } .cform .wpforms-container .wpforms-field.contact-consent ul { margin: 0; padding: 0 0 0 30px; list-style: none none; list-style-position: inside; position: relative; } .cform .wpforms-container .wpforms-field.contact-consent ul .wpforms-field-label-inline { display: block; cursor: pointer; font-style: italic; font-size: 15px; line-height: 1.15; } .cform .wpforms-container .wpforms-field.contact-consent ul .wpforms-field-label-inline:hover { color: var(--link-hover-color); } .cform .wpforms-container .wpforms-field.contact-consent input[type="checkbox"] { position: absolute; top: 1px; left: 0; } .cform .wpforms-container .wpforms-field.contact-consent em.wpforms-error { margin-top: 6px; } .cform .wpforms-field-container { margin-bottom: 15px; } .cform .wpforms-recaptcha-container { width: 280px; height: 53px; overflow: hidden; float: left !important; } .cform .wpforms-recaptcha-container .wpforms-turnstile { transform: scale(0.75); transform-origin: top left; } .cform .wpforms-submit-container { clear: none !important; width: auto; float: right; } .cform .wpforms-container .wpforms-recaptcha-container .g-recaptcha, .cform .wpforms-container .wpforms-recaptcha-container .h-captcha, .cform .wpforms-container .wpforms-recaptcha-container .wpforms-turnstile { padding: 0; } .cform .wpforms-submit-container { margin-bottom: 0px; margin-top: 0px; } .cform .wpforms-submit-container button[type="submit"] { background: var(--green-electric); color: var(--body-font-color); border: none; border-radius: 26px; height: 50px; padding: 0px 25px; font-family: "Sofia Sans", sans-serif; font-size: 20px; font-weight: 700; transition:all 0.2s; opacity: 0.8; transform: translateY(1px); width: 100%; } .cform .wpforms-submit-container button[type="submit"]:hover { background: var(--green-electric); opacity: 1; box-shadow: 0 2px 6px 0px rgba(0, 0, 0, 0.10); transform: translateY(-1px); } /* END | Base styling only */ .row-contacts { align-items: center; } .row-contacts > [class^="col-"] { margin-bottom: 30px; } .card-contact-wrapper { padding-left: 60px; position: relative; } .card-contact-wrapper .element { position: absolute; left: 90%; top: 10%; z-index: 1; font-size: 70px; opacity: 0.25; color: var(--green-electric); } .card-contact {} .card-contact .heading { margin-bottom: 25px; } .checklist { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: grid; gap: 20px 30px; grid-template-columns: repeat(1, 1fr); } .checklist > li { position: relative; padding-left: 32px; } .checklist > li::before { font-family: "Fakturnik Icons"; font-weight: 400; content:"\E530"; color: var(--green-electric); position: absolute; left: 0; } .card-contact .checklist { margin-bottom: 50px; max-width: 400px; } .card-connection { border-radius: 8px; /* corner-shape: squircle; */ padding: 20px; border: 3px solid var(--blue-link); } dl.connection { margin-bottom: 20px; } dl.connection dt { text-transform: uppercase; font-weight: 800; opacity: 0.7; margin-bottom: 8px; } dl.connection dd { } .connection-line { display: flex; align-items: center; gap: 0 8px; padding: 15px 20px; border-radius: 6px; background-color: var(--blue-background); outline: 2px solid transparent; transition:outline-color 0.2s; } .connection-line:hover { outline-color: var(--purple-lightest); } .connection-line .symbol { flex-shrink: 0; width: 80px; position: relative; } .connection-line .symbol::before { position: absolute; top: 0; right: 0; content: ''; display: block; width: 5px; height: 100%; border-radius: 3px; background-color: var(--blue-link); } .connection-line .symbol i { line-height: 1; } .connection-line .data { flex-grow: 1; padding-left: 12px; } .connection-line .data a.link { position: relative; transition:color 0.2s; line-height: 1.2; text-decoration: none; display: block; color: inherit; text-decoration: nome; font-size: 26px; font-weight: 700; } .connection-line .data a.link::after { position: absolute; bottom: 0; left: 0; content: ''; display: block; width: 0; height: 3px; border-radius: 3px; background-color: var(--yellow); transition: width 0.3s; background: linear-gradient(45deg,rgba(231, 173, 69, 1) 0%, rgba(231, 173, 69, 0) 100%); } .connection-line .data a.link:hover::after { width: 100%; } .connection-line .data a.link:hover, .connection-line .data a.link:focus { color: var(--blue-link); } dl.connection.connection-1 {} dl.connection.connection-1 .connection-line .symbol i { font-size: 30px; } dl.connection.connection-2 { } dl.connection.connection-2 .connection-line .symbol i { font-size: 56px; } .card-connection .noted { font-size: 13px; opacity: 0.7; line-height: 1.35; } /* Animated SVG Icons */ :root { --state-success: var(--green-electric); --state-error: var(--red); --state-warning: var(--yellow); --state-inactive: transparent; } svg.error circle.solid { stroke: var(--state-inactive); } svg.error circle.animation { transition: stroke-dashoffset 200ms linear 260ms, stroke-dasharray 200ms linear 260ms; stroke: var(--state-error); stroke-dasharray: 1,200; stroke-dashoffset: 2; } svg.error.toggle circle.animation { transition: stroke-dashoffset 200ms linear 0ms, stroke-dasharray 200ms linear 0ms; stroke-dasharray: 200,0; stroke-dashoffset: 0; } svg.error line { stroke: var(--state-error); } svg.error line { stroke-dashoffset: -50px; stroke-dasharray: 50px; } svg.error line.left { transition: stroke-dashoffset 120ms linear 0ms; } svg.error line.right { transition: stroke-dashoffset 120ms linear 160ms; } svg.error.toggle line.left { transition: stroke-dashoffset 120ms linear 260ms; stroke-dashoffset: 0; } svg.error.toggle line.right { transition: stroke-dashoffset 120ms linear 440ms; stroke-dashoffset: 0; } svg.success circle.solid { stroke: var(--state-inactive); } svg.success circle.animation { transition: stroke-dashoffset 200ms linear 260ms, stroke-dasharray 200ms linear 260ms; stroke: var(--state-success); stroke-dasharray: 1,200; stroke-dashoffset: 2; } svg.success.toggle circle.animation { transition: stroke-dashoffset 200ms linear 0ms, stroke-dasharray 200ms linear 0ms; stroke-dasharray: 200,0; stroke-dashoffset: 0; } svg.success path { stroke: var(--state-success); transition: stroke-dashoffset 160ms linear 0ms; stroke-dashoffset: -50px; stroke-dasharray: 50px; } svg.success.toggle path { transition: stroke-dashoffset 200ms linear 260ms; stroke-dashoffset: 0; } svg.warning circle.solid { stroke: var(--state-inactive); } svg.warning circle.animation { transition: stroke-dashoffset 200ms linear 260ms, stroke-dasharray 200ms linear 260ms; stroke: var(--state-warning); stroke-dasharray: 1,200; stroke-dashoffset: 2; } svg.warning.toggle circle.animation { transition: stroke-dashoffset 200ms linear 0ms, stroke-dasharray 200ms linear 0ms; stroke-dasharray: 200,0; stroke-dashoffset: 0; } svg.warning path, svg.warning line { stroke: var(--state-warning); } svg.warning path { transition: stroke-dashoffset 180ms linear 0ms; stroke-dashoffset: -50px; stroke-dasharray: 50px; } svg.warning line { transition: stroke-width 30ms linear 200ms; stroke-width: 0; } svg.warning.toggle path { transition: stroke-dashoffset 180ms linear 280ms; stroke-dashoffset: 0; } svg.warning.toggle line { transition: stroke-width 30ms linear 260ms; stroke-width: 8; } /* END | Animated SVG Icons */ @keyframes elementFadeIn { from { opacity: 0; } to { opacity: 1; } } .message-block { margin-bottom: 30px;} .message-block .col-media { margin-bottom: 40px; } .message-block .col-media picture { display: block; max-width: 360px; width: 100%; margin-left: auto; margin-right: auto; position: relative; transform: translateX(50px); animation: elementFadeIn 1500ms forwards; } .message-block .col-media picture svg { width: 62px; position: absolute; top: 40%; right: 100%; } .message-block .col-details { text-align: center; margin-left: auto; margin-right: auto; max-width: 730px; } .message-block-actions { display: flex; align-items: center; justify-content: center; gap: 0 20px; } .message-block-actions a.btn-md { font-size: 19px; } .message-block-actions a.btn-md strong { font-weight: 700; } /* START | Sharer */ #sharer {} #sharer.white-popup-block { max-width: 500px; } .row-qr { display: flex; align-items: center; gap: 0 25px; margin-bottom: 20px; padding: 15px; border-radius: 6px; border: 2px dashed var(--grey-10); } .row-qr .col-details { flex-grow: 1; } .row-qr .col-media { flex-shrink: 0; width: 120px; } .qr-wrapper { padding: 13px; background-image: url('images/qr-wrapper.svg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .sharer {} .sharer .heading { margin-bottom: 10px; } .row-url { outline: 3px solid transparent; display: flex; align-items: center; gap: 0 8px; background-color: #F6F6F6; border-radius: 5px; padding: 4px 8px; line-height: 1; transition:all 0.3s; } .row-url .col-icon { flex-shrink: 0; } .row-url .col-icon i { opacity: 0.5; transition:opacity 0.2s, color 0.2s; } .row-url .col-input { flex-grow: 1; } .row-url input[type="url"] { font-size: 14px; color: rgba(0, 0, 0, 0.6); padding: 0px; display: block; width: 100%; border:none; outline: none; background-color: transparent; transition:color 0.2s; } .row-url .col-button { flex-shrink: 0; } .row-url [type="button"] { line-height: 1; background-color: transparent; outline: none; border: none; padding: 7px 8px; color: var(--purple); transition:all 0.2s; border-radius: 3px; } .row-url:hover .col-icon i { opacity: 1; color: var(--purple); } .row-url:hover input[type="url"] { color: var(--purple); text-decoration: underline; } .row-url:hover [type="button"] { background-color: var(--purple); color: var(--white); } .row-url:hover { outline-color: var(--yellow); outline-offset: 1px; } .row-url.is_copied { outline-color: var(--blue-link); } .row-url.is_copied [type="button"], .row-url.is_copied [type="button"]:focus, .row-url.is_copied [type="button"]:active { background-color:var(--blue-link); color: var(--white); } ul.sharer-links { margin: 0 0 20px 0; padding: 12px 0 12px 0; list-style: none none; list-style-position: inside; display: flex; align-items: center; justify-content: space-between; border:1.5px solid var(--grey-05); border-left: none; border-right: none; } ul.sharer-links > li {} ul.sharer-links > li > a { transition:all 0.2s; font-size: 26px; color: var(--purple); display: flex; align-items: center; justify-content: center; text-decoration: none; width: 56px; height: 56px; border-radius: 50%; border:1.5px solid var(--grey-05); outline: 3px solid transparent; } ul.sharer-links > li > a i { transition:all 0.2s; } ul.sharer-links > li > a:hover { background-color:var(--blue-link); border-color: var(--blue-link); color: var(--white); outline-color: var(--yellow); outline-offset: 3px; } ul.sharer-links > li > a:hover i { transform: scale(1.1); } .copy-url-success { display: none; padding-top: 12px; } .copy-url-success .alert { margin-bottom: 0; } /* END | Sharer */ .card-instructions { padding: 25px 25px; border-radius: 12px; box-shadow: var(--shadow-card) 0px 0px 30px 0px; position: relative; z-index: 2; } .card-instructions .alert { margin-bottom: 0; } .card-instructions .alert-warning { background-color: #FDF4DF; color: var(--grey-70); } .card-instructions .setup-exe { display: block; width: 100%; max-width: 260px; } .archpass { display: flex; align-items: center; gap: 0 10px; } .archpass .char { font-family: var(--headings-font-family); font-size: 34px; line-height: 1; display: flex; width: 50px; height: 50px; border-radius: 4px; align-items: center; justify-content: center; background-color: var(--purple-light); color: var(--purple); } .filename-icon { text-decoration: none; display: flex; gap: 0 8px; align-items: center; } .filename-icon .icon { flex-shrink: 0; } .filename-icon .icon img { height: 30px; } .filename-icon .label { text-decoration: underline; font-weight: 700; font-size: 24px; color: var(--brown); } .filename-icon:hover .label { text-decoration: none; } .card-download { text-align: center; } .card-download .symbol { margin-bottom: 30px; position: relative; } .card-download .symbol picture { position: relative; border: 2px dashed var(--grey-15); display: inline-block; width: 130px; padding: 20px; border-radius: 6px; } .card-download .heading { margin-bottom: 5px; } .card-download .actions { margin-bottom: 30px } .card-download .actions .btn-md { font-size: 20px; transition: all 0.4s; transition-timing-function: cubic-bezier(0.5, 3, 0, 1); } .card-download .actions .btn-md:hover { transform: scale(1.06, 1.06); } .card-download hr { margin: 25px auto; width: 100%; max-width: 160px; border-radius: 4px; border-width: 6px; border-color: var(--green-electric); } .card-download .subtitle { font-size: 14px; color: var(--blue-link); } .card-download .description { font-style: italic; margin-left: auto; margin-right: auto; max-width: 460px; color: var(--blue-subtle); } .downarrow-wrapper { position: absolute; top: 0; right: -48px; width: 48px; height: 150px; filter: url("#goo"); } .downarrow-wrapper .el-arrow { fill: #55544F; animation: downloadFakturnik 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite; perspective: 9000px; transform: translateZ(0); transform-origin: bottom; } @keyframes downloadFakturnik { 0% { opacity: 0; transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg); } 30% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); } 70% { transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); } 95% { transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); } 100% { transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); } } .row.row-download { align-items: center; } .button_fx { position: relative; overflow: hidden; } .button_fx i, .button_fx .label { position: relative; pointer-events: none; } .button_fx::before { --sizefx: 0; content: ''; position: absolute; left: var(--x); top: var(--y); width: var(--sizefx); height: var(--sizefx); background: radial-gradient(circle closest-side, #8f8cee, transparent); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: width .2s ease, height .2s ease; } .button_fx:hover::before { --sizefx: 400px; } /* MODULE 14 ------------------------------------------------------------------------------------- */ .module-14 { } .module-14 .module-heading { margin-bottom: 25px; } .module-14 .module-heading hr { margin-top: 8px; border-color: var(--green-electric); } .row-pricing-intro { margin-bottom: 60px; } .row-pricing-intro a { color: var(--purple); } .row-pricing { align-items: center; } .sideinfo-wrapper { padding-left: 30px; } .sideinfo {} .sideinfo a { color: var(--purple); } .sideinfo .heading {} .sideinfo .description { margin-bottom: 0; } .sideinfo .actions { display: flex; align-items: center; gap: 0 20px; padding-top: 30px; } .sideinfo .actions .btn-solid { --button-font-size: 18px; --button-height: 44px; --button-padding: 0 18px; } .sideinfo .extra { padding-top: 30px; } .pricetable-wrapper { padding: 25px 25px; border-radius: 12px; box-shadow: var(--shadow-card) 0px 0px 30px 0px; } table.pricetable { display: table; width:100%; max-width:100%; border-spacing:0; border-collapse:collapse; } table.pricetable th, table.pricetable td { border: 1px solid var(--grey-20); padding: 15px 20px; transition:background-color 0.2s; } table.pricetable thead th { border-top: none; } table.pricetable thead th:first-child { border-left: none; } table.pricetable thead th:last-child { border-right: none; } table.pricetable thead .th-1 { width: 300px; } table.pricetable thead .th-2 { text-align: center; } table.pricetable thead .th-3 { text-align: center; } table.pricetable tbody tr td:first-child { border-left: none; } table.pricetable tbody tr td:last-child { border-right: none; } table.pricetable tbody tr:last-child td { border-bottom: none; } table.pricetable tbody tr td.option { text-align: center; } table.pricetable tbody tr:hover td { background-color: var(--yellow-subtle); } table.pricetable tfoot td { padding-top: 25px; border: none; } table.pricetable dl { display: inline-block; margin-bottom: 0; } table.pricetable dl dt { margin-bottom: 3px; } table.pricetable dl dt img { width: 56px; } table.pricetable dl dd {} table.pricetable strong.heading { font-size: 20px; } .pricetable-total { display: flex; align-items: center; gap: 0 15px; justify-content: space-between; padding: 10px 18px; border-radius: 6px; background-color: #F1F4F9; line-height: 1; } .pricetable-total .label { opacity: 0.8; } .pricetable-total .price { display: inline-block; text-align: right; font-weight: 700; width: 100px; outline: none; background-color: transparent; border: none; color: var(--purple-intense); font-size: 28px; white-space: nowrap; } .pricetable-period-heading { font-size: 20px; margin-bottom: 6px; } .pricetable-period { display: flex; gap: 0 15px; justify-content: space-between; } .pricetable-period select { width: 100%; max-width: 100%; border: 2px solid var(--purple-intense); background-color: var(--white); font-size: 16px; font-weight: 500; color: var(--purple-intense); border-radius: 4px; padding: 6px 8px; } .mychoice { display: inline-block; cursor: pointer; padding: 8px; user-select: none; } .mychoice:hover { text-decoration: underline; } /* MODULE 15 ------------------------------------------------------------------------------------- */ .module-15 { } /* MODULE 16 ------------------------------------------------------------------------------------- */ .module-16 { } .module-16 .module-inner { border: 3px solid var(--purple-lightest); padding: 30px; border-radius: 6px; } .module-16 .alert-success { padding: 20px; background-color: var(--green-light); } .module-16 hr { margin: 30px 0; border-width: 2px; border-color: var(--purple-lightest); } .heading-symbol { display: flex; align-items: center; gap: 0 12px; margin-bottom: 20px; } .heading-symbol .symbol { line-height: 1; flex-shrink: 0; font-size: 44px; } .heading-symbol .heading { margin-bottom: 0; flex-grow: 1; } /* MODULE 17 ------------------------------------------------------------------------------------- */ .module-17 { } .module-17 .module-heading { margin-bottom: 50px; } .module-17 .module-heading hr { border-color: var(--green-electric); } .module-17 .module-heading .description { max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 0; padding-top: 22px; } .licensing-menu { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: flex; gap: 0 30px; justify-content: center; } .licensing-menu > li { } .opt { color: inherit; display: flex; align-items: center; gap: 0 20px; text-decoration: none; width: 350px; border: 2px solid var(--grey-10); border-radius: 8px; outline: 3px solid var(--grey-03); padding: 18px 18px; transition:all 0.2s; } .opt .col-media { flex-shrink: 0; } .opt .col-media picture { display: block; width: 72px; transition:all 0.3s; filter:grayscale(0.1); opacity: 0.7; } .opt .col-details { flex-grow: 1; } .opt .col-details .heading { display: block; margin-bottom: 7px; transition:color 0.2s; color: var(--blue-dark); } .opt .col-details .description { display: block; line-height: 1.35; opacity: 0.85; } .opt:hover, .opt:focus, .opt:active { color: inherit; border-color: var(--purple); outline-color: var(--purple-lightest); outline-width: 5px; } .opt:hover .col-media picture { filter:grayscale(0); opacity: 1; } .opt:hover .heading { color: var(--purple); } .licensing-steps { display: flex; align-items: center; justify-content: center; gap: 0 30px; padding-top: 50px; } /* MODULE 18 ------------------------------------------------------------------------------------- */ .module-18 { } .module-18 a { color: var(--purple); } .module-18 .module-heading {} .module-18 .module-description { margin-bottom: 60px; } ol.licsteps { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 140px; overflow: hidden; } ol.licsteps > li.item { --offset-step-arrow: -103px; position: relative; border: 2px dashed var(--grey-15); display: block; padding: 20px; border-radius: 6px; } ol.licsteps > li.item-1 { grid-area: 1 / 1; } ol.licsteps > li.item-4 { grid-area: 2 / 1; } /* Positioning item-4 where item-3 was */ ol.licsteps > li.item-3 { grid-area: 2 / 2; } /* Positioning item-3 where item-4 was */ ol.licsteps > li.item-2 { grid-area: 1 / 2; } dl.licstep {} dl.licstep dt { display: flex; align-items: center; gap: 0 12px; margin-bottom: 10px; } dl.licstep dt .step { flex-shrink: 0; font-family: var(--headings-font-family); font-size: 30px; line-height: 1; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background-color: var(--grey-40); color: var(--white); } dl.licstep dt .heading { font-size: 24px; line-height: 1.15; } dl.licstep dd {} ol.licsteps > li.item::before { content:''; display: block; width: 66px; height: 66px; position: absolute; background-size: contain; background-position: center center; background-repeat: no-repeat; } ol.licsteps > li.item-1::before { display: none; } ol.licsteps > li.item-2::before { top: 50%; transform: translateY(-50%); left: var(--offset-step-arrow); background-image: url('images/arrow-right-red.svg'); } ol.licsteps > li.item-3::before { left: 50%; transform: translateX(-50%); top: var(--offset-step-arrow); background-image: url('images/arrow-down-yellow.svg'); } ol.licsteps > li.item-4::before { top: 50%; transform: translateY(-50%); right: var(--offset-step-arrow); background-image: url('images/arrow-left-green.svg'); } ol.licsteps > li.item-1 dl.licstep dt .step { background-color: var(--blue-subtle); } ol.licsteps > li.item-2 dl.licstep dt .step { background-color: var(--red); } ol.licsteps > li.item-3 dl.licstep dt .step { background-color: var(--yellow); } ol.licsteps > li.item-4 dl.licstep dt .step { background-color: var(--green-regular); } /* MODULE 19 ------------------------------------------------------------------------------------- */ .module-19 { } ul.stepitems { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } ul.stepitems > li.item { padding: 15px 15px; border-radius: 12px; box-shadow: var(--shadow-card) 0px 0px 30px 0px; margin-bottom: 25px; } ul.stepitems > li.item-complete {} ul.stepitems > li.item-current { padding-bottom: 50px; } .step-heading { display: flex; align-items: center; gap: 0 8px; } .step-heading picture { flex-shrink: 0; width: 36px; text-align: center; } .step-heading picture i { font-size: 31px; } .step-heading p { flex-grow: 1; margin-bottom: 0; font-family: "Sofia Sans", sans-serif; font-weight: 700; font-size: 21px; } .step-heading a { flex-shrink: 0; color: var(--purple); } .step-heading a i { margin-right: 4px; } .row-reform { --column-gutter-default: 90px; padding: 30px 0 60px 0; } .row-eiks-actions { display: flex; gap: 0 90px; } .row-eiks-actions .col-captcha { flex: 0 0 auto; max-width: 100%; width: 28%; } .row-eiks-actions .col-info { flex-grow: 1; opacity: 0.5; position: relative; padding-left: 76px; } .row-eiks-actions .col-info a { color: inherit; } .row-eiks-actions .col-info i { position: absolute; top: 0; left: 0; font-size: 60px; line-height: 1; opacity: 0.7; } .reform {} .reform .wpcf7-form-control { display: block; width: 100%; height: 54px; border-radius: 6px; outline: 4px solid var(--purple-lightest); border: 2px solid var(--blue-light); padding: 7px 15px; font-size: 22px; font-weight: 600; color: var(--purple); background-color: var(--white); transition:all 0.2s; } .reform .wpcf7-form-control:hover { outline-width: 6px; border-color: var(--purple); } .reform .wpcf7-select { font-size: 20px; } /* MODULE 20 ------------------------------------------------------------------------------------- */ .module-20 { } figure.screenshot { margin-bottom: 20px; } figure.screenshot picture { display: block; margin-bottom: 8px; } figure.screenshot figcaption { display: block; text-align: center; font-style: italic; opacity: 0.7; font-size: 95%; } .extra-links-wrapper { padding-top: 60px; display: flex; justify-content: center; } .extra-links { display: flex; align-items: center; gap: 0 10px; } .extra-links picture { flex-shrink: 0; } .extra-links picture i { line-height: 1; font-size: 36px; opacity: 0.2; } .extra-links ul { display: inline-block; margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .extra-links ul a { color: var(--purple); } /* MODULE 21 ------------------------------------------------------------------------------------- */ .module-21 { } .myfield { margin-bottom: 15px; } .mylabel { text-transform: uppercase; font-weight: 700; font-size: 13px; margin-bottom: 5px; } .myselect, .myinput { display: block; width: 100%; height: 44px; border-radius: 4px; outline: 3px solid var(--purple-lightest); border: 2px solid var(--blue-light); color: var(--purple); background-color: var(--white); padding: 4px 12px; font-size: 18px; font-weight: 600; transition:all 0.2s; } .myselect:hover, .myinput:hover { outline-width: 4px; border-color: var(--purple); } .hr-form { padding: 15px 0 35px 0; } .hr-form hr { margin: 0; border-width: 2px; border-color: var(--blue-lightest); } .shimmer-text { color:transparent; background-image:linear-gradient(110deg,var(--black) 20%,#a2a2a2 60%,var(--black) 80%); background-clip:text; background-size:200% auto; animation:shimmer-text-animation 1.5s linear infinite; } @keyframes shimmer-text-animation { to { background-position:-200% } } /* MODULE 22 ------------------------------------------------------------------------------------- */ .module-22 { } .layout-capital-wrapper {} .layout-capital { display: flex; } .layout-capital .col-main { flex-grow: 1; } .layout-capital .col-spacer { width: 60px; flex-shrink: 0; } .layout-capital .col-sidebar { flex-shrink: 0; width: 370px; } .card-obligation { padding: 15px; border-radius: 12px; background-color: var(--orange-light); } .content-hr { padding: 6px 0; } .content-hr hr { border-width: 2px; } .ticklist-wrapper { } .ticklist { margin: 0; padding: 0; list-style: none none; list-style-position: inside; display: grid; gap: 20px 40px; } .ticklist > li { grid-column: span 1; position: relative; padding-left: 32px; } .ticklist > li:last-child { margin-bottom: 0; } .ticklist > li::before { font-family: "Fakturnik Icons"; font-weight: 400; content:"\E530"; color: var(--green-electric); position: absolute; left: 0; } .ticklist > li.excl::before { content:"\E641"; color: var(--red); } .ticklist-1col { grid-template-columns: 1fr; /* 1 column */ } .ticklist-2col { grid-template-columns: repeat(2, 1fr); } /* 2 columns */ .card-capital-price { margin-bottom: 30px; display: flex; align-items: center; gap: 0 30px; padding: 15px; border-radius: 12px; background-color: var(--green-light); } .card-capital-price .col-content { flex-grow: 1; } .card-capital-price .col-content .lead { font-size: 120%; } .card-capital-price .col-price { flex-shrink: 0; width: 130px; } .card-capital-price .pricebox { white-space: nowrap; background-color: var(--white); padding: 8px 15px; border-radius: 4px; text-align: center; } .card-deadline { padding: 15px; border-radius: 12px; background-color: var(--orange-light); color: var(--red-dark); font-size: 110%; } #wpforms-184, #wpforms-207 { margin-bottom: 0; } #wpforms-form-184 .wpforms-recaptcha-container, #wpforms-form-207 .wpforms-recaptcha-container { /* width: 100%; height: 60px; float: none !important; margin-bottom: 15px; display: flex; justify-content: center; */ height: 0 !important; } #wpforms-form-184 .wpforms-submit-container, #wpforms-form-207 .wpforms-submit-container { width: 100%; float: none !important; display: flex; justify-content: center; } #wpforms-form-184 .wpforms-recaptcha-container .wpforms-turnstile, #wpforms-form-207 .wpforms-recaptcha-container .wpforms-turnstile { /* transform: scale(0.85); transform-origin: center center; */ height: 0 !important; } body.page-id-171 { background-image: url('images/lion-grey.svg'); background-size: auto 70vh; background-attachment: fixed; background-position: bottom -10vh right 0; background-repeat: no-repeat; } .picture-menu {} .picture-menu img { width: 100%; max-width: 460px; } /* MODULE 23 ------------------------------------------------------------------------------------- */ .module-23 { } /* MODULE 24 ------------------------------------------------------------------------------------- */ .module-24 { } .layout-insights { display: flex; align-items: stretch; gap: 0; } .layout-insights .col-main { order: 3; flex-grow: 1; } .layout-insights .col-spacer { order: 2; flex-shrink: 0; width: 60px; } .layout-insights .col-sidebar { order: 1; flex-shrink: 0; width: 300px; } .menu-sidebar { border-radius: 10px; padding: 10px 10px; background-color: var(--purple-lightest); } .menu-sidebar ul { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .menu-sidebar ul > li { margin-bottom: 8px; } .menu-sidebar ul > li:last-child { margin-bottom: 0; } .menu-sidebar ul > li.item > a.href { display: block; padding: 8px 12px; border-radius: 4px; text-decoration: none; color: inherit; border: 2px solid var(--white); background-color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 0 12px; transition:box-shadow 0.3s; } .menu-sidebar ul > li.item > a.href i { margin-right: 8px; color: var(--yellow); } .menu-sidebar ul > li.item > a.href strong { font-weight: 500; } .menu-sidebar ul > li.item > a.href em { opacity: 0.3; font-style: normal; font-weight: normal; } .menu-sidebar ul > li.item-active > a.href { background-color: var(--purple-subtle) !important; color: var(--white) !important; } .menu-sidebar ul > li.item > a.href:hover { color: var(--purple-subtle); background-color: var(--white); box-shadow: var(--shadow-primary) 0px 0px 12px 0px } .menu-sidebar ul > li.item > a.href:hover strong { text-decoration: underline; } .is_sticky { position: sticky; top: 36px; z-index: 1; } ul.menu-articles { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } ul.menu-articles li { margin-bottom: 8px; } ul.menu-articles li:last-child { margin-bottom: 0; } ul.menu-articles li a { text-decoration: none; color: inherit; background-color: var(--white); display: block; padding: 8px 12px; border-radius: 3px; border: 1px solid var(--grey-06); outline: 2px solid var(--grey-02); transition:box-shadow 0.3s; display: flex; gap: 0 15px; align-items: center; justify-content: space-between; } ul.menu-articles li a strong { transition:all 0.2s; font-weight: normal; } ul.menu-articles li a i { } ul.menu-articles li a:hover { box-shadow: var(--shadow-primary) 0px 0px 12px 0px; text-decoration: none; color: var(--purple-subtle) /* border-color: var(--yellow); outline-color: var(--yellow-subtle); */ } ul.menu-articles li a:hover strong { text-decoration: underline; transform: translateX(4px); } .rich-content {} .rich-content .date-published { opacity: 0.5; font-size: 14px; } .rich-content .heading-wrapper { margin-bottom: 20px; } .rich-content .heading-wrapper .heading { margin: 0; } .rich-content .featured-image { margin-bottom: 30px; border-radius: 6px; overflow: hidden; } /* MODULE 25 ------------------------------------------------------------------------------------- */ .module-25 { } /* HEARTS (heart animation instalive like) ------------------------------------------------------------------------------------- */ .heartstream-wrapper { position: relative; } .heartstream {} .heart { width:30px; height:30px; opacity:1; position:absolute; bottom:0; display:none; user-select: none; pointer-events: none; } .heart i {opacity:1; } .colOne{color:#fce473} .colTwo{color:#f68b39} .colThree{color:#ed6c63} .colFour{color:#847bb9} .colFive{color:#97cd76} .colSix{color:#35b1d1} @keyframes flowOne { 0%{opacity:0;bottom:0;left:14%} 40%{opacity:.8} 50%{opacity:1;left:0} 60%{opacity:.2} 80%{bottom:80%} 100%{opacity:0;bottom:100%;left:18%} } @keyframes flowTwo { 0%{opacity:0;bottom:0;left:0} 40%{opacity:.8} 50%{opacity:1;left:11%} 60%{opacity:.2} 80%{bottom:60%} 100%{opacity:0;bottom:80%;left:0} } @keyframes flowThree { 0%{opacity:0;bottom:0;left:0} 40%{opacity:.8} 50%{opacity:1;left:30%} 60%{opacity:.2} 80%{bottom:70%} 100%{opacity:0;bottom:90%;left:0} } /* END | HEARTS (heart animation instalive like) ------------------------------------------------------------------------------------- */ /* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ BREAKPOINTS ║ */ /* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */ @media (min-width: 576px) {} @media (min-width: 768px) {} @media (min-width: 992px) {} @media (min-width: 1280px) {} @media (min-width: 1366px) {} @media (min-width: 1440px) {} @media (min-width: 1600px) {} @media (min-width: 1920px) {} /* 1920px & Up */ /* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ #################################### DEVELOPMENT BREAKPOINTS ################################## ║ */ /* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* 4XL */ @media (max-width: 1919.98px) { } /* @media -----------------------------------| width < 1920px |-------------------------------------------*/ /* 3XL */ @media (max-width: 1599.98px) { } /* @media -----------------------------------| width < 1600px |-------------------------------------------*/ /* 2XL */ @media (max-width: 1439.98px) {} /* @media -----------------------------------| width < 1440px |-------------------------------------------*/ /* XL */ @media (max-width: 1365.98px) {} /* @media -----------------------------------| width < 1366px |-------------------------------------------*/ /* LG */ @media (max-width: 1279.98px) { :root { --padding-module: 40px; } .rich h1 { font-size: 26px; margin-bottom: 30px; } .rich h2 { font-size: 24px; } .rich h3 { font-size: 22px; } .rich h4 { font-size: 20px; } #footer::before { margin-bottom: -15px; } .row-footer { flex-wrap: wrap; gap: 0; } .row-footer .col-menu { flex-basis: 50%; margin-bottom: 30px; } .row-footer .col-license { flex-basis: 50%; margin-bottom: 30px; } .row-footer .col-actions { flex-basis: 100%; margin-bottom: 30px; } ul.footer-payment { justify-content: flex-start; } .header-extra { display: none; } .header-hamburger { display: block; } .header-promo-wrapper { padding: 6px 0; } .footer-cta .nectar-scribble { top: 100%; left: 50%; transform: translateX(-50%) scaleY(0.6); } .card-function { padding: 30px; } .module-8::before { margin-bottom: -17px; } .row-eiks-actions .col-captcha { width: 26%; } .row-reform { --column-gutter-default: 30px; padding: 20px 0 30px 0 } .hero { gap: 0 30px; } .hero .hero-media { width: 500px; } dl.google-rating dd small { font-size: 9px; } ul.hero-logos > li:nth-child(2) { width: 120px; } ul.hero-logos > li:nth-child(3) { width: 122px; } .card-features dl dt { font-size: 66px; } dl.card-db dt { width: 57px; } } /* @media -----------------------------------| width < 1200px |-------------------------------------------*/ /* MD */ @media (max-width: 991.98px) { :root { --padding-module: 40px; } .header-hamburger { display: block; } .header-promo { font-size: 14px; } .header-menu { display: none; } .header-wrapper { padding: 8px 0 9px 0; } .header-logo { width: 180px; } #footer .pointing { width: 60px; } #footer::before { margin-bottom: -20px; } .module-8::after { margin-top: -20px; } .copyright { flex-wrap: wrap; } .copyright .primary { order: 2; width: 100%; text-align: center; } .copyright .secondary { order: 1; width: 100%; text-align: center; margin-bottom: 12px; } .card-license { padding: 0; } .footer-cta .actions .btn-solid { font-size: 22px; } .component-searching { gap: 0 30px; } .component-searching .col-media { width: 200px; } .card-function { padding: 20px; } .grid-categories { gap: 20px; } .card-news .col-details .heading { font-size: 20px; } .layout-faq { flex-wrap: wrap; } .layout-faq .col-sidebar { width: 100%; text-align: center; } .layout-faq .col-content { width: 100%; } .layout-insights { flex-wrap: wrap; gap: 0; } .layout-insights .col-main { order: 1; width: 100%; } .layout-insights .col-spacer { order: 2; height: 30px; width: 100%; } .layout-insights .col-sidebar { order: 3; width: 100%; } .module-5 .module-inner { padding: 20px; } .module-5 .module-heading .symbol img { width: 36px; } .module-5 .module-inner { background-image: none; } .module-5 .features-wrapper { padding-right: 0; } .row-splitcapital {} .row-splitcapital > [class^="col-"] { width: 100%; margin-bottom: 30px; } .static-layout .col-sidebar { width: 240px; } .cartform { flex-wrap: wrap; gap: 0; } .cartform .col-cart { order: 2; width: 100%; margin-bottom: 30px; } .cartform .col-form { order: 1; width: 100%; } .row-eiks-actions .col-captcha { width: 23%; } .row-contacts {} .row-contacts .col-6 { width: 100%; } .card-contact-wrapper { padding: 0; } .layout-capital { flex-wrap: wrap; gap: 0; } .layout-capital .col-main { width: 100%; } .layout-capital .col-spacer { width: 100%; height: 40px; } .layout-capital .col-sidebar { width: 100%; } .hero { flex-wrap: wrap; } .hero-doodle { display: none; } .hero .hero-media { order: 2; width: 100%; margin-bottom: 10px; } .hero .hero-data { order: 1; width: 100%; padding-top: 120px; margin-bottom: 10px; } .hero-video { margin-bottom: 15px; } ul.hero-logos { flex-wrap: wrap; } ul.hero-logos > li { margin-top: 20px; } .row-cards {} .row-cards > [class^="col-"] { width: 100%; margin-bottom: 30px; } .hero-heading .description { font-size: 15px; } .heading-price-4 .labeled { margin-bottom: 20px; } } /* @media -----------------------------------| width < 992px |-------------------------------------------*/ /* SM */ @media (max-width: 767.98px) { :root { --padding-module: 25px; } .row-footer .col-menu { order: 3; flex-basis: 100%; } .row-footer .col-license { order: 1; flex-basis: 100%; } .row-footer .col-actions { order: 2; } .footer-cta .actions .btn-solid { font-size: 20px; } .card-customer .actions a.btn { font-size: 17px; } .copyright-doodle, .footer-cta .doodle { display: none; } .footer-liner { margin: 20px 0; } .row-footer .col-menu { margin-bottom: 0; } #footer .pointing { width: 60px; } .message-block-actions a.btn-md { font-size: 18px; } .component-searching .col-media { width: 172px; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .row-articles .col-6 { margin-bottom: 30px; } .module-12 { display: none; } .module-8::before, .module-8::after { display: none; } .pricecap { width: 120px; height: 120px; } .pricecap .price-eur { font-size: 38px; } .pricecap hr { margin: 6px 0; } .pricecap small { font-size: 12px; } .static-layout { flex-wrap: wrap; gap: 0; } .static-layout .col-main { order: 1; width: 100%; } .static-layout .col-spacer { order: 2; height: 30px; width: 100%; } .static-layout .col-sidebar { order: 3; width: 100%; } .row-eiks-actions { flex-wrap: wrap; gap: 0; } .row-eiks-actions .col-captcha { width: 100%; } .row-eiks-actions .col-info { width: 100%; } .step-heading { flex-wrap: wrap; } .step-heading.mb-3 { margin-bottom: 0; } .step-heading picture { margin-bottom: 15px; } .step-heading p { font-size: 18px; line-height: 1.1; } .row-reform .col-4 { margin-bottom: 30px; } .reform .wpcf7-select { font-size: 18px; } .module-18 .module-description { margin-bottom: 30px; } ol.licsteps { gap: 20px; display: grid; grid-template-columns: 1fr 1fr; } ol.licsteps > li.item { padding: 12px; } ol.licsteps > li.item::before { display: none; } ol.licsteps > li.item-1 { grid-area: 1 / 1; } ol.licsteps > li.item-2 { grid-area: 1 / 2; } ol.licsteps > li.item-3 { grid-area: 2 / 2; } ol.licsteps > li.item-4 { grid-area: 2 / 1; } dl.licstep dt .heading { font-size: 22px; } dl.licstep dt .step { width: 40px; height: 40px; font-size: 24px; } .licensing-menu { flex-wrap: wrap; } .licensing-menu > li { margin-bottom: 20px; } .opt { width: 100%; } .cform .wpforms-submit-container { float: none; } .pricetable-wrapper { margin-bottom: 30px; } table.pricetable dl dt img { width: 44px; } table.pricetable strong.heading { font-size: 17px; } table.pricetable th, table.pricetable td { padding: 12px 15px; } table.pricetable tfoot td { padding-top: 20px; } .row-pricing-intro { margin-bottom: 20px; } .row-module-16 {} .row-module-16 > [class^="col-"] { margin-bottom: 20px; } .filename-icon .label { font-size: 21px; } .single-fakturnik .slick-arrow { font-size: 22px; width: 44px; height: 44px; } .module-3 .module-inner, .module-4 .module-inner { background-image: none; } .heading-section-4 { margin-bottom: 20px; flex-wrap: wrap; gap: 0; margin-bottom: 30px; } .heading-section-4 .primary { margin-bottom: 20px; } .heading-section-4 .secondary { width: 100%; } .grid-2 { grid-template-columns: 1fr; } .heading-wrapper-4 { gap: 0 20px; } .heading-wrapper-4 .symbol { width: 50px; height: 50px; } .module-3 .features, .module-4 .features { grid-template-columns: 1fr; } .card-module-heading .superscript { font-size: 16px; } .card-module-heading .col-symbol .symbol { width: 60px; height: 60px; font-size: 36px; } } /* @media -----------------------------------| width < 768px |-------------------------------------------*/ /* XS */ @media (max-width: 575.98px) and (orientation:landscape) {} @media (max-width: 575.98px) { .module-heading { margin-bottom: 20px; } .module-heading hr { margin-top: 12px; } #footer::before { display: none; } .breadcrumbs-wrapper { display: none; } #footer .pointing { display: none; } .footer-cta .heading-wrapper { margin-bottom: 30px; } .footer-cta .actions { margin-bottom: 30px; } .footer-cta .description { padding: 0; max-width: 100%; } .card-customer .actions { flex-wrap: wrap; } .card-customer .actions > a.btn { width: 100%; margin-bottom: 15px; } .card-customer .actions > a.btn:last-child { margin-bottom: 0; } .message-block-actions { flex-wrap: wrap; } .message-block-actions > [class^="btn-"] { width: 100%; margin-bottom: 20px; } .message-block-actions > [class^="btn-"]:last-child { margin-bottom: 0; } .message-block .col-media picture { max-width: 230px; transform: translateX(30px); } .message-block .col-media picture svg { width: 40px; top: 30%; } .message-block-actions a.btn-md { font-size: 17px; } .footer-cta .actions .btn-solid { font-size: 18px; } .card-license-options a.link .labels strong { font-size: 18px; } .component-searching { flex-wrap: wrap; gap: 0; } .component-searching .col-media { width: 100%; margin-bottom: 30px; } .component-searching .col-details { width: 100%; } .grid-3 { grid-template-columns: 1fr; } .ticklist-2col { grid-template-columns: 1fr; } .module-7 .actions { flex-wrap: wrap; } .module-7 .actions > [class^="btn-"] { width: 100%; margin-bottom: 20px; } .module-7 .actions > [class^="btn-"]:last-child { margin-bottom: 0; } .split-content-5 { flex-wrap: wrap; } .split-content-5 .col-media { width: 100%; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .split-content-5 .col-details { width: 100%; margin-bottom: 20px; } .row-splitcapital > [class^="col-"] { margin-bottom: 15px; } .card-warning { padding: 15px; } .card-warning .actions .btn-md { font-size: 17px; } .module-5 ol.features { grid-template-columns: 1fr; } .formbox-heading { flex-wrap: wrap; } .formbox-heading .heading { font-size: 18px; } .modchoice .modhead .label { font-size: 17px; } .modchoice .modhead samp { font-size: 15px; } .row-eiks-actions .col-info i { font-size: 32px; } .row-eiks-actions .col-info { padding-left: 46px; } .licensing-steps { padding-top: 25px; flex-wrap: wrap; } .licensing-steps .btn-outline { order: 2; width: 100%; } .licensing-steps .btn-solid { order: 1; margin-bottom: 20px; width: 100%; } dl.licstep dt .heading { font-size: 20px; } ol.licsteps { grid-template-columns: 1fr; } ol.licsteps > li.item-1 { grid-area: 1; } ol.licsteps > li.item-2 { grid-area: 2; } ol.licsteps > li.item-3 { grid-area: 3; } ol.licsteps > li.item-4 { grid-area: 4; } .cform-wrapper { padding: 20px; } .connection-line { padding: 10px 15px; } .connection-line .symbol { width: 56px; } dl.connection.connection-1 .connection-line .symbol i { font-size: 20px; } dl.connection.connection-2 .connection-line .symbol i { font-size: 40px; } .connection-line .data a.link { font-size: 19px; } .sideinfo .actions { flex-wrap: wrap; } .sideinfo .actions > [class^="btn-"] { width: 100%; margin-bottom: 20px; } .sideinfo .actions > [class^="btn-"]:last-child { margin-bottom: 0; } table.pricetable { display: flex; flex-wrap: wrap; flex-grow: 1; } table.pricetable > *, table.pricetable > * > * { display: flex; flex-wrap: wrap; flex-grow: 1; } table.pricetable thead .th-1 { width: 100%; } table.pricetable thead .th-2 { width: 50%; } table.pricetable thead .th-3 { width: 50%; } table.pricetable tbody tr td[class^="td-col-"] { border-top: 2px solid var(--grey-20); } table.pricetable tbody tr td.td-col-1 { width: 50%; } table.pricetable tbody tr td.td-col-2_3 { width: 50%; text-align: center; } table.pricetable tbody tr td.td-col-2, table.pricetable tbody tr td.td-col-3 { width: 25%; white-space: nowrap; } table.pricetable tbody tr td.td-col-1_2_3 { width: 50%; } table.pricetable th, table.pricetable td { padding: 10px 6px; border: none; } table.pricetable dl dt img { width: 32px; } .pricetable-wrapper { padding: 5px 10px; border-radius: 6px; } .pricetable-period-heading { line-height: 1.2; font-size: 16px; } .pricetable-total .price { font-size: 21px; } } /* @media -----------------------------------| width < 576px |-------------------------------------------*/ /* XXS */ @media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { } @media (max-width: 319.98px) { } /* @media -----------------------------------| width < 320px |-------------------------------------------*/ /* ════════════════════════════════════════════╣ END ╠════════════════════════════════════════════ */ /* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ ¡ NO STYLES BELOW THIS LINE PLEASE ! ║ */ /* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */