/* Theme Name: YesDesign Author: Jakub Havlíček Version: 1.0 */ /*------------------------RESET---------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ :root { --font1: "stevie-sans", sans-serif; /* 400, 700 */ --font2: "the-seasons", sans-serif; /* 700 */ --color0: #182127; --color0b: #21343F; --color0c: #80b0cb; --color0d: #b1dffa; --color1: #F2D59B; --color1b: #e8c47b; --color-error: rgb(229, 23, 75); --color-success: rgb(0, 169, 144); --wrapper-side: 4.5vw; --section-padding: min(7rem, calc(1.6rem + 7vw)); --gap1: 0.75rem; --gap2: 1.2rem; --gap3: 3rem; --border-radius0: 0.3em; --border-radius1: 0.6rem; } button {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;} html, body {width: 100%;} html {height: 100%; overflow-x: hidden; background: var(--color0);} body {display: block; font-size: min(16px, calc(6px + 2vw)); color: white; font-weight: 400; line-height: 1.5; position: relative; font-family: var(--font1); overflow-x: hidden;} .wrapper {display: flex; width: calc(100vw - 2 * var(--wrapper-side)); max-width: 66rem; flex-direction: column; align-items: center; margin-inline: auto; position: relative;} .wrapper.medium {max-width: 58rem;} .wrapper.wide {max-width: 78rem;} .anim {transition-delay: 2s; opacity: 0; transform: scale(0.9,0.9); transition: .6s ease-in-out;} .anim.play {opacity: 1; transform: scale(1,1);} strong {font-weight: 700;} h1, h2, h3 {display: block; width: 100%; text-align: center; font-weight: 700; line-height: 1.3; box-sizing: border-box; position: relative; font-family: var(--font2);} h1 {max-width: 14em; font-size: min(3.5rem, calc(0.9rem + 5vw)); color: white;} h2 {max-width: 40rem; font-size: min(3rem, calc(0.9rem + 5vw)); color: var(--color1); margin: 0 auto 1em;} .main {display: flex; width: 100%; flex-direction: column; flex-grow: 2; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2; transition: .3s ease-in-out;} .main :is(p, li) {font-size: 1em; letter-spacing: 0.06em;} .main p {display: block; width: 100%; box-sizing: border-box;} .main p a, .main li a {text-decoration: underline; color: white; text-decoration-color: var(--color1); transition: .15s ease-in-out;} .main p a:hover, .main li a:hover {color: var(--color1); text-decoration-color: transparent;} .section {display: flex; width: 100%; flex-direction: column; align-items: center; position: relative; padding-top: var(--section-padding); box-sizing: border-box;} .section.padding-bottom {padding-bottom: var(--section-padding);} .content {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2);} .content p {text-align: center;} .content .page-subtext {margin-bottom: var(--gap1);} /* Zopakovat u .form */ .button {display: flex; justify-content: center; align-items: center; font-size: 1em; color: var(--color0); font-weight: 400; background: var(--color1); text-transform: uppercase; padding: 0.45em 1.3em; border-radius: var(--border-radius0); border: none; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;} .button:hover {background: var(--color1b);} .section:has(.hero) {padding-top: 0;} .section:has(.hero) > img {display: block; width: var(--hero-img); margin-bottom: calc(-0.25 * var(--hero-img)); --hero-img: min(70em, 170%);} .logo {display: block; text-align: center; font-size: clamp(1.1em, calc(0.7em + 2vw), 1.5em); font-weight: 700; padding-block: 0.4em; position: relative;} .logo:before, .logo:after {display: block; width: 80%; height: 0.12em; background: var(--color1); position: absolute; left: 10%; content: "";} .logo:before {top: 0;} .logo:after {bottom: 0;} .hero {display: flex; width: 100%; flex-direction: column; align-items: center; flex-wrap: wrap; gap: var(--gap2);} .hero p {text-align: center; font-size: clamp(1em, calc(0.5em + 2vw), 1.3em); color: var(--color1); letter-spacing: 0.1em; padding-inline: 1em;} .infographics {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1);} .infographics > div {display: flex; width: 100%; align-items: center; gap: var(--gap2); padding: 1.8em; box-sizing: border-box; position: relative; z-index: 2;} .infographics > div:before {display: block; position: absolute; inset: 0; z-index: -1; border-radius: var(--border-radius1); content: "";} .infographics > div img {display: block; width: 3.8em; flex-shrink: 0;} @media screen and (min-width: 961px) { .infographics > div:before {background-image: linear-gradient(to right, var(--color0b), transparent);} .infographics > div:nth-child(odd):before {transform: rotate(180deg);} .infographics > div:nth-child(odd) p {order: -1; text-align: right;} } @media screen and (max-width: 960px) { .infographics > div {flex-direction: column;} .infographics > div:before {background-image: linear-gradient(to bottom, var(--color0b), transparent);} .infographics > div p {text-align: center;} } @media screen and (min-width: 641px) { .infographics > div {width: calc(50% - 0.5 * var(--gap1));} } .about {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap3) 0;} .about > div {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap1);} .about .video {display: block; aspect-ratio: 9/16; border-radius: var(--border-radius1); overflow: hidden; position: relative;} .about .video video {display: block; width: 100%; height: 100%; opacity: 0; transition: .35s ease-in-out;} .about .video .video-cover {display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; padding: 1.5em 1.5em 50%; /* background: url("images/img1.webp") no-repeat center center; background-size: cover; */ box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 2; cursor: pointer; container-type: inline-size; transition: opacity .3s ease-in-out; transition-delay: left 0.3s;} .about .video .video-cover .image {display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: -1;} .about .video .video-cover .image img {display: block; width: 100%; height: 100%; object-fit: cover;} .about .video .video-cover .icon {display: block; width: 3em;} .about .video .video-cover .title {font-size: 0.9em; margin-top: 0.5em;} .about .video.play .video-cover {opacity: 0; top: 0; left: -9999px;} .about .video.play video {opacity: 1;} .about .content {box-sizing: border-box;} .about .content .button {margin-top: 0.8em;} @media screen and (min-width: 961px) { .about {justify-content: space-between;} .about .video {width: 42%; order: -1;} .about .content {width: 52%; align-items: flex-start; padding-block: 1em 4em;} } @media screen and (max-width: 960px) { .about .content p {text-align: center;} .about .video {max-width: 25em;} } .section:has(.form) {background: url("images/img2.webp") no-repeat center center; background-size: cover;} .form {display: flex; width: 100%; flex-direction: column; align-items: center; flex-wrap: wrap; position: relative; z-index: 2; padding: min(3em, calc(1em + 5vw)); box-sizing: border-box; backdrop-filter: blur(8px); border-radius: var(--border-radius1); overflow: hidden;} .form:before {display: block; position: absolute; inset: 0; z-index: -1; background: var(--color0b); opacity: 0.7; content: "";} /* .form h3 {font-size: 1.2em; margin-block: -1em 1em; font-family: var(--font1);} .form .opts {display: flex; width: 100%; max-width: 30em; flex-wrap: wrap; gap: var(--gap1);} .form .opts .opt {display: flex; width: calc(50% - 0.5 * var(--gap1)); flex-wrap: wrap; position: relative; z-index: 1; margin: 0;} .form .opts .opt input[type=radio] {position: absolute; visibility: hidden; left: -9999px; top: 0;} .form .opts .opt label {display: flex; width: 100%; align-items: center; background: rgba(0,0,0,0.3); color: white; border-radius: var(--border-radius0); padding: 0.9em 1em 0.8em 2.6em; border: solid 0.08em transparent; box-sizing: border-box; cursor: pointer; position: relative; transition: .15s ease-in-out;} .form .opts .opt label:before {display: block; width: 1em; height: 1em; border: solid 0.1em var(--color1); border-radius: 100%; box-sizing: border-box; position: absolute; left: 1em; top: calc(50% - 0.5em); content: "";} .form .opts .opt label:hover {border-color: var(--color1);} .form .opts .opt input[type=radio]:checked ~ label {font-weight: 700;} .form .opts .opt input[type=radio]:checked ~ label:before {background: url("images/icons/icon-opt-check.svg") no-repeat center center, var(--color1); background-size: contain;} .form .button {width: 15em; font-size: 1.1em; margin-top: 1.8rem;} */ /* Forminator General */ .form .forminator-ui.forminator-custom-form[data-design=default] {display: block; max-width: 30em; margin: 0;} .form .forminator-ui.forminator-custom-form[data-design=default] .forminator-field {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-label {width: 100%; text-align: center; font-size: 1.2em;} /* Forminator Option buttons */ .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-label .forminator-required {color: var(--color1);} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-radio {display: flex; width: calc(50% - 0.5 * var(--gap1)); align-items: center; flex-wrap: wrap; background: rgba(0,0,0,0.3); color: white; border-radius: var(--border-radius0); padding: 0.95em 1em 0.8em; margin: 0; border: solid 0.08em transparent; box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; transition: .15s ease-in-out;} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-radio:hover {border-color: var(--color1);} .form .forminator-ui.forminator-custom-form[data-design=default] .forminator-radio .forminator-radio-label {flex: none; font-size: 1em; line-height: 1.2; margin-left: 0.4em;} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-radio .forminator-radio-bullet {display: block; width: 1em; height: 1em; flex: none; flex-shrink: 0; background: none; border: solid 0.1em var(--color1); border-radius: 100%; box-sizing: border-box; position: relative; top: -0.05em;} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-radio input:checked + .forminator-radio {font-weight: 700;} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-radio input:checked + .forminator-radio-bullet {background: var(--color1); border: none;} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-radio .forminator-radio-bullet:before {background: url("images/icons/icon-opt-check.svg") no-repeat center center; background-size: contain;} /* Forminator Error */ .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-has_error .forminator-radio .forminator-radio-bullet {border-color: var(--color-error);} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-error-message {width: 100%; text-align: center; font-size: 0.8em; background: var(--color-error); color: white; padding: 0.15em 1em 0.1em; border-radius: 0.3em;;} /* Forminator Footer */ .form .forminator-ui.forminator-custom-form[data-design=default] .forminator-pagination-footer {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1);} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-button-submit, .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-button-next {display: flex; width: 15em; justify-content: center; align-items: center; font-size: 1em; color: var(--color0); font-weight: 400; background: var(--color1); text-transform: uppercase; padding: 0.45em 1.3em; border-radius: var(--border-radius0); border: none; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-button-next:hover {background: var(--color1b);} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-button-back {width: auto; font-size: 0.9em; color: var(--color0c); text-transform: uppercase; text-decoration: underline; border: none; transition: .15s ease-in-out;} .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-button-back:hover {color: var(--color0d); text-decoration-color: transparent; box-shadow: none;} /* Forminator Footer */ .form .forminator-ui#forminator-module-126.forminator-design--default .forminator-response-message.forminator-success {width: 100%; text-align: center; font-size: 0.85em; background: var(--color-success); color: white; padding: 0.25em 1em 0.2em; border-radius: 0.3em;;} /* Forminator Step Message */ .form .form-step-message {display: block; width: 100%; margin-bottom: 0;} .form .form-step-message .forminator-field {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1);} .form .forminator-ui#forminator-module-126.forminator-design--default .form-step-message .forminator-label {font-size: min(1.6em, calc(1em + 3vw));} .form .forminator-ui#forminator-module-126.forminator-design--default .form-step-message p {text-align: center;} .form .form-item:has(input[type="text"]) .forminator-label {text-align: left !important;} .form .forminator-ui.forminator-custom-form[data-design=default] .forminator-input {display: block; width: 100%; background: rgba(0,0,0,0.3); font-size: 1em; color: white; border: none; border: solid 0.08em rgba(255,255,255,0.3); outline: none; border-radius: 0.3em; padding: 0.6em; box-sizing: border-box; position: relative; z-index: 2; font-family: var(--font1); transition: .15s ease-in-out;} .form .forminator-ui.forminator-custom-form[data-design=default] .forminator-input:focus {border-color: var(--color1); background: rgba(0,0,0,0.5);} .form .forminator-ui.forminator-custom-form[data-design=default] .forminator-input::placeholder {color: var(--color0e);} .section:has(.reviews) {background: white;} .section:has(.reviews) h2 {color: var(--color0);} .reviews {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2); margin-bottom: var(--gap3);} .reviews .review {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--gap2); padding: min(3em, calc(1em + 5vw)); box-sizing: border-box; border-radius: var(--border-radius1); border: solid 0.1em rgba(0,0,0,0.1);} .reviews .review h3 {display: block; width: 100%; text-align: left; font-size: 1.1em; color: var(--color0); font-weight: 700; font-family: var(--font1);} .reviews .review p {display: block; width: 100%; color: var(--color0); flex-grow: 2;} .reviews .review img {display: block; width: 5em;} @media screen and (min-width: 961px) { .reviews .review {width: calc(50% - 0.5 * var(--gap2));} } .section:has(.features) {background: white; padding-top: 0;} .features {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;} .features .upper {display: flex; width: 100%; flex-direction: column; align-items: center; background: var(--color0b); padding: var(--section-padding) 3em calc(1.7 * var(--section-padding)); box-sizing: border-box; border-radius: var(--border-radius1);} .features .feature-list {display: block; width: 100%; max-width: 54em;} .features .feature-list ul {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0;} .features .feature-list ul li {display: block; width: 100%; min-height: 2.6em; padding-left: 3.4em; box-sizing: border-box; position: relative;} .features .feature-list ul li:before {display: block; width: 2.5em; height: 2.5em; background: url("images/icons/icon-check.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.22em; content: "";} .features .compare {display: flex; width: 90%; max-width: 60em; justify-content: center; flex-wrap: wrap; gap: var(--gap2);} .features .compare > div {display: block; width: 100%; max-width: 30em; position: relative; border-radius: var(--border-radius1); overflow: hidden; margin-top: calc(-1 * var(--section-padding));} .features .compare > div > img {display: block; width: 100%;} .features .compare > div:nth-child(1) > img {filter: grayscale(1) contrast(0.5);} .features .compare > div > div {display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: min(1em, calc(0.5em + 3vw)); padding: 3em 3em 30%; box-sizing: border-box; position: absolute; inset: 0; z-index: 2;} .features .compare > div > div > img {display: block; width: 3.6em;} .features .compare > div > div h3 {font-size: 1.65em; color: var(--color0); margin-block: 0.2em 0.1em;} .features .compare > div > div p {text-align: center; font-size: 1.15em; color: var(--color0); font-weight: 700;} @media screen and (min-width: 769px) { .features .upper ul {max-width: 54em;} .features .upper ul li {width: 47%;} .features .compare > div {width: calc(50% - 0.5 * var(--gap2));} } .features + .button {font-size: 1.25em;} .button-info {text-align: center; font-size: 0.95em; color: var(--color0); margin-top: 0.6em;}