:root { --debug: 0; /* or 0 to disable */ --color-pink: #ff008a; --color-green: #acff42; --color-blue: #0075ff; --color-purple: #6100ff; --color-orange: #ff5c00; --color-gray2: #8f8f8f; --color-black: #3c2929; } *, *:before, *:after { outline: calc(var(--debug) * 1px) dotted red; } /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "/user-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) ) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; max-width: 100%; height: auto; } video { width: 100%; height: auto; border-radius: 16px; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using /user-select:none on the text input doesn't working */ input, textarea { -webkit-/user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-/user-select: auto; added for Safari in case of using /user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-/user-modify: read-write; -webkit-/user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-/user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-/user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/Inter-ExtraLight.woff2?v=3.19") format("woff2"), url("../fonts/Inter-ExtraLight.woff?v=3.19") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Inter-Light.woff2?v=3.19") format("woff2"), url("../fonts/Inter-Light.woff?v=3.19") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("../fonts/Inter-Regular.woff?v=3.19") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.woff2?v=3.19") format("woff2"), url("../fonts/Inter-Bold.woff?v=3.19") format("woff"); } html { font-family: "Inter", sans-serif; font-size: 62.5%; } body { font-size: 1.6rem; color: var(--color-black); } ::selection { color: color(srgb 1 0.01 0.5422 / 0.68); background-color: rgba(255, 0, 138, 0.05); } #gallery *::selection { color: var(--color-green); background-color: rgba(172, 255, 66, 0.12); } #team *::selection { color: var(--color-purple); background-color: rgba(97, 0, 255, 0.12); } .hidden { display: none; } .svgicon { width: 50px; height: 50px; margin: 0em; } .info h1 span { position: relative; } .svgicon.smiley { position: absolute; bottom: -7rem; right: -40%; width: 4rem; } .hero, .relative { position: relative; } .svgicon.pinky-down { position: absolute; left: -5rem; bottom: -8rem; height: 11rem; width: 6rem; } .svgicon.orange-down { position: absolute; right: -2rem; top: -6rem; height: 7rem; width: 7rem; } .svgicon.blue-spark, .svgicon.yellow-spark { position: absolute; left: -6rem; bottom: -6rem; height: 6rem; width: 6rem; } .svgicon.icon-contact { position: absolute; left: -4.2rem; top: 0rem; width: 2.4rem; height: 2.4rem; } .svgicon.swirl { position: absolute; bottom: 1rem; right: -10rem; width: 10rem; height: 12rem; } .svgicon.arrow-up { position: absolute; bottom: -7rem; left: 4rem; width: 11rem; height: 11rem; } .svgicon.plane { position: absolute; right: 5rem; bottom: 4rem; height: 6rem; width: 6rem; } .why .arrow { width: 15rem; height: auto; } .uhrada { border: 1px solid #f7f7f7; border-radius: 1rem; padding: 2rem 3rem !important; color: var(--color-gray2); } .uhrada strong { font-weight: 800; } .uhrada-detail { color: color(srgb 1 0.01 0.5422 / 0.68); /* background-color: rgba(255, 0, 138, 0.05); */ font-size: 2rem; } .copyme { position: relative; cursor: pointer; } .copyme:hover { color: color(srgb 1 0.01 0.5422 / 0.68); background-color: rgba(255, 0, 138, 0.05); } .copyme::after { content: "📋"; /* Default icon */ position: absolute; right: -40px; top: -5px; color: #578022; background-color: #0075ff; padding: 2px 5px; border-radius: 3px; opacity: 0; transition: opacity 0.2s; font-size: 14px; color: color(srgb 1 0.01 0.5422 / 0.68); background-color: rgba(255, 0, 138, 0.05); } .copyme:hover::after { opacity: 1; } .copyme.copied::after { content: "✅"; /* Checkmark icon after copying */ opacity: 1; } input[type="file"]::file-selector-button { padding: 1.2rem 3.2rem; background: var(--color-pink); color: #fff; border: 1px solid var(--color-pink); border-radius: 100px; display: inline-block; width: fit-content; text-decoration: none; transition: all 0.3s ease-out; cursor: pointer; -webkit-/user-select: none; -moz-/user-select: none; -ms-/user-select: none; /user-select: none; font-weight: 800; } input[type="file"]::file-selector-button:hover { opacity: 0.5; } .form-spacer { border-bottom: 1px solid #f7f7f7; margin-top: 3rem; margin-bottom: 2rem; padding-bottom: 1rem; } .camp #form .wrapper { width: 50%; min-width: 65rem; } .camp .form-wrap { grid-template-columns: 1fr; } .camp .why { flex-direction: column; justify-content: space-between; padding: 0; gap: 6rem; } .camp .why h1 { font-size: clamp(3.6rem, 1vw, 4.8rem); } .camp .why .zapis { color: #acff41; } .camp #about ul { display: flex; flex-direction: column; gap: 4rem; } .smaller { font-size: clamp(2rem, 1vw, 3rem); } h1 { font-size: 4.8rem; line-height: 110%; /* 70.4px */ font-weight: bold; } h2 { color: var(--color-gray2); font-size: 4rem; font-style: normal; font-weight: 300; line-height: 110%; /* 44px */ } h3 { color: #000; font-size: 2.4rem; font-style: normal; font-weight: 300; line-height: 140%; /* 33.6px */ } .bundle p { color: var(--color-gray2); font-size: 1.6rem; font-weight: 400; line-height: 150%; /* 24px */ } .why { padding: 10rem 0 4rem; display: flex; } .why ul { display: flex; flex-direction: column; gap: 8rem; } .why li { display: flex; gap: 2.4rem; } .why .icon { width: 4.8rem; display: flex; align-content: center; padding-top: 0.4rem; } .module { justify-content: space-between; display: flex; flex-direction: column; } .camp .module { justify-content: initial; } .camp #about .zapis { /* color: #ACFF41; */ } .title-group { margin-bottom: 6rem; } .title-group h1 { margin-bottom: 1rem; } .title-group p { font-size: 1.8rem; /* color: var(--color-gray2); */ opacity: 0.7; } #kontakt .title-group p { opacity: 1; color: #bbb; } .title-group .subtitle { font-size: 1.6rem; color: var(--color-pink); } .callout h1 { color: var(--color-gray2); font-family: Inter; font-size: 3.6rem; font-style: normal; font-weight: 200; line-height: 110%; /* 52.8px */ margin-bottom: 0; } .top-bar { color: var(--color-gray2); font-size: 1.6rem; line-height: 150%; /* 24px */ } .top-bar ul { border-bottom: 1px solid rgba(205, 205, 205, 0.25); padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 0; padding-right: 0; display: flex; justify-content: flex-end; align-items: center; align-self: stretch; } .top-bar a:hover { color: var(--color-pink); } .camp #main-logo img { width: 200px; height: auto; } header { display: flex; } header .callout { margin: 5.4rem 0 3.6rem; display: grid; grid-template-columns: 1fr 3fr; gap: 0 5rem; } .form-head .title-group, header .title-group { margin-bottom: 0; } .hero { display: flex; flex-direction: column; background-image: url("../images/hero.webp"); background-repeat: no-repeat; background-position: center; background-size: 100%; aspect-ratio: 2.16/1; justify-content: center; align-items: start; padding: 3.2rem 10% 3.2rem; color: #fff; } .action-bar { display: flex; gap: 1.6rem; margin-top: 1.6rem; } .date { color: var(--color-green); font-size: 3.6rem; font-weight: 100; } .camp #about .date { color: #2475ff; } .about .info { display: flex; gap: 2.4rem; padding: 0 0 10rem; } header { margin-bottom: 10rem; } .about .wrapper { display: flex; flex-direction: column; } .camp .about .wrapper { justify-content: space-between; flex-direction: row; } .about .info > *, .about .why > * { flex: 1 1 0px; } .about .info p { color: var(--color-gray2); font-size: 1.6rem; line-height: 150%; /* 24px */ } .wrapper { margin: 0 auto; padding-left: 40px; padding-right: 40px; max-width: 1280px; width: 95%; } .tagbar { display: flex; width: 100%; height: 3em; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; color: #000; text-align: center; font-size: clamp(1rem, 1vw, 1.5rem); white-space: nowrap; overflow: hidden; font-style: normal; font-weight: 400; line-height: 224.5%; /* 35.92px */ letter-spacing: 2.08px; text-transform: uppercase; margin-bottom: 12rem; -webkit-/user-select: none; -moz-/user-select: none; -ms-/user-select: none; /user-select: none; cursor: default; position: relative; } .tagbar img { /* filter: invert(); */ opacity: 0.8; height: 1rem; max-inline-size: unset; max-block-size: unset; position: absolute; animation: slide-l 16s linear infinite alternate; } .dot { opacity: 0.5; } .body-wrapper > section { padding-bottom: 12rem; display: flex; flex-direction: column; } .gallery { background: black; color: white; text-align: center; background-image: url("../images/bg-gallery.webp"); } .gallery .subtitle { color: var(--color-green); } .gallery .tagbar { background-color: var(--color-green); } .gallery .tagbar img { filter: invert(); opacity: 0.5; } .gallery-grid { display: flex; flex-direction: row; gap: 2.4rem; } .gallery-grid .column { display: flex; flex-direction: column; gap: 2.4rem; } .team { text-align: center; color: white; background-image: url("../images/bg-team.webp"); background-size: cover; /* linear-gradient(414deg, #FF008A 0%, #FF5C00 64.4%), */ } .team .tagbar { background: var(--color-purple); } .team .subtitle { color: var(--color-purple); } .team-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.4rem; } .card { border-radius: 16px; position: relative; overflow: hidden; aspect-ratio: 4/5; background-color: #dbdbdb; background-image: url("../images/team/Image.webp"); background-repeat: no-repeat; background-size: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); text-align: left; cursor: pointer; } #anit { background-image: url("../images/team/anit.webp"); } #tami { background-image: url("../images/team/tama.webp"); } #tani { background-image: url("../images/team/tani.webp"); } #nela { background-image: url("../images/team/nela.webp"); } #dia { background-image: url("../images/team/dia.webp"); } #sima { background-image: url("../images/team/sima.webp"); } .card .info { position: absolute; bottom: 0; padding: 10%; color: #fff; width: 100%; } .card .name { font-weight: bold; z-index: 10; font-size: clamp(2rem, 2vw + 1rem, 3.8rem); } .card .name:before { content: ""; background: url("../images/shape-star.svg"); background-size: 0.9em; margin-right: 0.2em; position: relative; top: 0.1em; width: 0.9em; height: 0.9em; display: inline-block; } .zapis:before { content: url("../images/shape-star.svg"); width: 32px; position: relative; top: 3px; } /* .top-bar .menu-highlight { border-radius: 30px; padding: 4px 16px; transition: all 0.3s ease-out; } .menu-highlight:hover { color: var(--color-green) !important; background: var(--color-black); } */ /* .menu-highlight:before { content: url('data:image/svg+xml;utf8, '); position: relative; top: 3px; margin-right: 0.4rem; } */ .zapis { font-weight: 800; color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; gap: 0.8rem; } .card:before { content: url("../images/blur.svg"); display: block; width: max-content; position: absolute; left: -550px; bottom: -650px; transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1); /* background: radial-gradient(ellipse at 75% 75%, #6100ff 4.2%, rgba(0, 255, 255, 0.67) 37.82%, rgba(255, 255, 255, 0)); */ } .overlay { width: 100%; position: absolute; left: 0; bottom: -25%; transition: all 0.25s ease-out; } .item { transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1); border-radius: 16px; width: 100%; height: auto; } .item:nth-child(-n + 3):hover { transform-origin: bottom; } #gallery .item:hover { transform: scale(1.075) skew(-0.001turn, 1deg); /* transform: scale(1.075); */ /* box-shadow: rgba(41, 45, 49, 0.3) 0px 8px 24px; */ } #gallery .column:nth-of-type(1) a:nth-of-type(1):hover img { box-shadow: 0 8px 40px rgba(255, 93, 2, 0.35); } #gallery .column:nth-of-type(2) a:nth-of-type(2):hover img { box-shadow: 0 8px 40px rgba(255, 255, 255, 0.35); } #gallery .column:nth-of-type(2) a:nth-of-type(1):hover img, #gallery .column:nth-of-type(2) a:nth-of-type(3):hover img { box-shadow: 0 8px 40px rgba(255, 0, 138, 0.35); } #gallery .column:nth-of-type(3) a:nth-of-type(1):hover img { box-shadow: 0 8px 40px rgba(37, 117, 255, 0.5); } #gallery .column:nth-of-type(3) a:nth-of-type(2):hover img, #gallery .column:nth-of-type(1) a:nth-of-type(2):hover img { box-shadow: 0 8px 40px rgba(97, 0, 255, 0.5); } /* .glightbox-open .glightbox-clean .gclose path, */ .glightbox-open .glightbox-clean .gnext path, .glightbox-open .glightbox-clean .gprev path { fill: var(--color-pink); } .feed-grid { grid-template-columns: 1fr 1fr 1fr 1fr; display: grid; gap: 2.4rem; margin-bottom: 6rem; } .feed-grid a { transition: all 0.75s ease-out; border-radius: 24px; /* overflow: hidden; */ position: relative; } .feed-grid a:after { content: url("../images/icons/ig.svg"); /* background: rgba(0, 0, 0, 0.302); */ opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; justify-content: center; align-items: center; display: none; transition: opacity 0.3s ease-out; } .feed-grid a:hover:after { display: flex; opacity: 1; /* transform: scale(1.25); */ } .feed-grid a:hover img { filter: grayscale(); } .glams { display: flex; align-items: start; gap: 2.4rem; } .feed-grid .item { } .card:hover { transform: scale(1.05) skew(-0.001turn, 1deg); transform-origin: top; box-shadow: rgba(41, 45, 49, 0.3) 0px 8px 24px; } .card:nth-child(-n + 3):hover { transform-origin: bottom; } .card:hover:before { bottom: -135%; } .card .position { opacity: 0.9; font-size: clamp(1rem, 2vw + 0.5rem, 2rem); } #form { background-color: #97c0d2; background-image: url("../images/form-bg.webp"); background-position: top center; background-repeat: no-repeat; background-size: cover; } #form .wrapper { background: #fff; border-radius: 16px; padding-top: 6.4rem; padding-bottom: 4.8rem; } .form-head { display: flex; justify-content: space-between; } .form-wrap { display: grid; gap: 6rem; grid-template-columns: 1fr 1fr; } #prihlaska { display: grid; flex-direction: column; gap: 2.4rem; padding-top: 2.75rem; grid-template-columns: 1fr 1fr; } .camp #prihlaska { gap: 3rem 2.4rem; } .span-full { grid-column: 1/3; } .required { color: var(--color-pink); } form input, textarea, select { padding: 1.2rem; align-items: center; border: 1px solid #e5e5e5; background: #fff; border-radius: 4px; resize: vertical; position: relative; } form input:focus, textarea:focus, select:focus { outline: none; border-color: #9ecaed; box-shadow: 0 0 10px rgba(158, 202, 237, 0.52); } select { width: 100%; } label, legend { font-size: 1.6rem; color: var(--color-black); } input::placeholder, textarea::placeholder { color: rgb(194, 179, 179); font-size: 1.4rem; } /* .meno-detail .form-input-wrapper:after { content: "Ak prihlasujete dieťa, uveďte jeho meno a priezvisko."; color: var(--color-gray2); font-size: 1.4rem; } .guardian-detail .form-input-wrapper:after { content: "Vyplňte, len ak prihlasujete dieťa."; color: var(--color-gray2); font-size: 1.4rem; } */ .uid { font-size: 2rem; font-weight: 400; background-color: #fff2f9; border-radius: 4px; padding: 2px 4px; color: var(--color-pink); font-family: monospace; } .camp .dropzone { border: 0px dashed #ff008a; border-radius: 0.5rem; background-color: #fff2f9; display: flex; justify-content: center; padding: 2rem 4rem; } .checkbox-group, [data-grav-field="radio"] { display: flex; gap: 0.8rem; align-items: center; flex-direction: row-reverse; -webkit-/user-select: none; -moz-/user-select: none; -ms-/user-select: none; /user-select: none; cursor: pointer; position: relative; justify-content: left; color: var(--color-gray2); } .form-input-wrapper label { display: flex; gap: 0.4rem; align-items: center; -webkit-/user-select: none; -moz-/user-select: none; -ms-/user-select: none; /user-select: none; cursor: pointer; position: relative; justify-content: left; color: var(--color-gray2); } fieldset, fieldset .field-group { flex-direction: row; margin-top: 1.6rem; flex-wrap: wrap; display: flex; gap: 0.8rem 1.6rem; color: var(--color-black); } .field-group, .form-field, .form-input-wrapper, .form-textarea-wrapper { display: flex; flex-direction: column; gap: 0.8rem; } .field-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; } .label, fieldset legend { position: relative; color: var(--color-black); } [type="checkbox"], [type="radio"] { width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; transition: background 300ms; padding: 0; } [type="checkbox"]:checked::before, [type="radio"]:checked::before { display: block; } [type="checkbox"]:before, [type="radio"]:before { content: ""; background: var(--color-pink); width: 1.3rem; height: 1.3rem; border-radius: 2px; display: none; position: absolute; left: 0.25rem; top: 0.25rem; } [type="radio"], [type="radio"]:before { border-radius: 2rem; } [type="radio"] { top: 0.4rem; } .radio { border: 1px solid #e5e5e5; border-radius: 2rem; padding: 0.1rem 0.4rem 0.4rem 0.6rem; } .radio label { padding-right: 1.6rem; } .form-input-wrapper label, select { font-size: 1.4rem; color: var(--color-gray2); } .form-detail { color: var(--color-gray2); font-size: 1.4rem; } #form .tagbar { background-color: var(--color-pink); } .tagbar.diagonal.s-one { transform: rotate(-3deg); position: absolute; top: 10%; } .tagbar.diagonal.s-one img { animation-direction: reverse; } .tagbar.diagonal.s-two { transform: rotate(-10deg); position: absolute; top: 24%; width: 135%; right: -10%; } .tagbar.diagonal img { filter: invert(); opacity: 0.5; scale: 1; } #novinky { text-align: center; } #cta .tagbar, #novinky .tagbar { background: #f7f7f7; color: #c2c2c2; } #cta .call { padding: 3.2rem 0 3.2rem 4.8rem; } #novinky .subtitle { color: var(--color-pink); } footer { background: #000; color: #fff; display: flex; flex-direction: column; align-content: center; overflow: hidden; } .links { display: flex; gap: 1.6rem; } footer .wrapper { display: flex; flex-direction: column; } .logo-huge { margin-top: 5rem; position: relative; left: 2.25rem; } .bottombar { font-size: 1.4rem; border-top: 1px solid #464646; display: flex; justify-content: space-between; padding: 1.6rem 0 0.9rem; } .bottombar a, .site-info p { opacity: 0.7; transition: all 0.3s ease-out; } .bottombar a:hover { opacity: 1; } .social-icons { display: flex; gap: 1.6rem; } .site-info { display: flex; gap: 1.6rem; } a { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; } .top-bar a { text-decoration: none; font-weight: 300; padding: 0 0.8rem; } .split { display: flex; justify-content: space-between; } .split > * { padding: 10rem 0; } .button { padding: 1.2rem 3.2rem; background: var(--color-pink); color: #fff; border: 1px solid var(--color-pink); border-radius: 100px; display: inline-block; width: fit-content; text-decoration: none; transition: all 0.3s ease-out; cursor: pointer; -webkit-/user-select: none; -moz-/user-select: none; -ms-/user-select: none; /user-select: none; font-weight: 800; } .buttons { margin-top: 3rem; } .button.primary:hover, button.button:hover { color: #fff; background: var(--color-blue); border-color: var(--color-blue); cursor: pointer; } .button.green { color: #11255a; background: var(--color-green); border-color: var(--color-green); } .button.primary.white { color: #11255a; background: #fff; border-color: #fff; } .button.white:hover { color: #11255a; background: var(--color-green); border-color: var(--color-green); } .button.secondary { background: transparent; color: var(--color-pink); border: 1px solid var(--color-pink); } .action-bar .secondary { display: none; } .button.secondary:hover { background: var(--color-pink); color: #fff; border: 1px solid var(--color-pink); } .button.secondary.white { color: #fff; border: 1px solid #fff; } .button.secondary.white:hover { background: #fff; color: var(--color-pink); border: 1px solid #fff; } .contact-info { display: flex; flex-direction: column; gap: 3.2rem; margin-right: 9rem; padding-left: 4.2rem; } .contact-info p { font-size: 20px; font-weight: bold; padding-bottom: 0.5rem; } .contact-info a { text-decoration: none; } .contact-info span { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(255, 255, 255, 0.5); transition: all 0.3s ease-out; } .contact-info a:hover span { color: var(--color-pink); } #map { border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; margin: 0 0 5rem; position: relative; overflow: hidden; } #map img { transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1); } #map a, .feed-grid a { line-height: 0; } #map:hover img { transform: scale(1.15); } #cta { padding: calc(6rem + 10vw) 0 16rem; position: relative; overflow: hidden; } #cta .banner { background-color: #6d82b9; background-image: url("../images/ctabg.webp"); background-repeat: no-repeat; border-radius: 24px; position: relative; transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1); color: #fff; display: grid; grid-template-columns: 10fr 12fr; min-height: 35rem; /* aspect-ratio: 6/2.25; */ background-size: cover; } .banner h4 { color: #fff; font-size: 4.8rem; font-weight: 700; line-height: 120%; /* 57.6px */ } .banner h5 { font-weight: bold; font-size: 1.8rem; } .banner p, .banner span { font-size: 1.4rem; font-weight: bold; } .call section > p { opacity: 0.6; } .price-bar { border-radius: 8px; /* border: 1px solid rgba(255, 255, 255, 0.2); */ /* padding: 0.7rem 2rem 0.4rem; */ display: flex; gap: 1rem; margin-top: 1rem; align-items: baseline; transition: all 0.25s ease-out; } .separator { /* border-left: 1px solid rgba(255, 255, 255, 0.2); */ font-size: 1rem; border-radius: 16px; padding: 2px 8px 4px; border: 1px solid #acff42; font-weight: 300; position: relative; bottom: 0.25rem; } .banner .price-bar .price { font-size: 1.8rem; font-weight: bold; } .call { display: flex; flex-direction: column; gap: 2rem; justify-content: center; } #cta .banner:after { opacity: 0; } #cta .banner > * { z-index: 5; } #cta .banner:hover:after, #cta .banner:active:after { /* Shine */ opacity: 1; content: ""; top: 0; left: 0; width: 100%; height: 100%; position: absolute; animation: slide 0.5s ease-in-out; animation-iteration-count: 1; animation-direction: normal; background: linear-gradient( 35deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100% ); background-size: 250%; } /* animation */ @keyframes slide { 0% { background-position: 100%; } 100% { background-position: 0%; } } .deva { position: absolute; aspect-ratio: 48/43; bottom: 2.4rem; height: auto; width: 100%; max-block-size: unset; } .decor:before { content: url("../images/new.svg"); position: absolute; display: block; bottom: min(20rem, 15vw); left: 4vw; z-index: 10; transform: scale(0.9); animation: mover 1.5s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; } @keyframes mover { 0% { transform: translateY(0) scale(0.9); } 100% { transform: translateY(1rem) scale(0.9); } } .decor { position: relative; z-index: 5; display: flex; justify-content: end; } .gslide-image { border-radius: 16px; overflow: hidden; } /* FaQ */ .faq h2 { font-size: clamp(2rem, 4vw, 3rem); } .accordion { position: relative; border-top: 1px solid #e9e9e9; } .accordion:last-child { position: relative; border-bottom: 1px solid #e9e9e9; } .accordion h3 { cursor: pointer; color: var(--color-black); font-weight: 400; font-size: 1.6rem; line-height: 150%; /* 27px */ } .accordion h3 { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 2rem 0rem; } .accordion:hover h3 { padding-left: 2rem; } .accordion:hover:after { background: rgba(241, 241, 241, 1); } .accordion.active h3 { padding-left: 2rem; } .accordion.active:hover h3 { padding-left: 2rem; } .accordion .answer { padding-left: 2rem; padding-right: 2rem; } .accordion::after { content: ""; display: block; position: absolute; left: 0; top: 2.75rem; width: 10px; height: 10px; border-radius: 100%; background-color: transparent; } .accordion.active::after { background-color: var(--color-pink); } .accordion.active .answer { opacity: 1; transition: opacity 0.3s ease-out; } .accordion p { padding: 0 0 20px; } .answer { overflow: hidden; height: 0; transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); color: #8f8f8f; font-size: 1.6rem; line-height: 150%; /* 24px */ opacity: 0; } .faq h2 { padding-bottom: 2rem; } .gallery-grid a { line-height: 0; } .form-message { margin-top: 6rem; font-size: 4rem; line-height: 7rem; /* background-color: #FF028A; color: #fff; */ background-color: var(--color-green); color: #000; display: flex; justify-content: center; font-weight: 600; border-radius: 24px; } .form-message p { padding: 4rem; text-align: center; } .emoji { font-size: 5rem; vertical-align: middle; padding: 0.1em; background: rgb(255, 255, 255); height: 6rem; width: 14rem; border-radius: 6rem; display: inline-block; text-align: center; margin: 0 1rem; transition: all 0.3s ease-out; line-height: 5rem; } .thankyou .hero { display: none; } .emoji:hover { background: black; font-size: 2.4em; padding: 0; } /* Camp */ .camp #main-logo img { filter: invert(); } .camp .body-wrapper > header { background-image: url("../images/redorange.jpg"); /* aspect-ratio: 2 / 1; */ width: 100%; background-size: cover; justify-content: center; align-items: center; padding: 8rem 4rem 4rem; } .camp .hero { background-image: url("../images/heroblu.jpg"); /* aspect-ratio: 2.34 / 1; */ aspect-ratio: 2.6 / 1; background-size: cover; max-width: 1440px; width: 100%; border-radius: 42px; padding: 6.4rem; } .camp .top-bar { position: absolute; top: 0; right: 0; width: 100%; background-color: rgba(255, 255, 255, 0.34); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); color: #fff; } .camp .top-bar .wrapper { max-width: 1440px; } .camp .hero .date { color: #2475ff; } .camp .callout h1 { color: #fff; font-size: 6rem; } .camp .hero .callout { display: flex; flex-direction: column; justify-content: space-between; /* gap: 4rem; */ margin: 0; } .camp .hero .inner { gap: 4rem; display: flex; flex-direction: column; justify-content: space-between; } #coto { background-color: #acff42; padding-bottom: 4rem; } #coto .tagbar { background: #000; } #coto .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4rem; } #zbalit, #strava, #vcene { background: #ffffff; border-radius: 20px; padding: 4rem 4rem; display: flex; gap: 2rem; flex-direction: column; } #zbalit ul { column-count: 2; } #coto b { font-weight: bold; } #coto .title-group { grid-column: 1 / 4; text-align: center; } #strava { grid-column: 1 / 2; background: black; color: #acff41; } #vcene { background: #ebede9; color: #acff41; background-image: url("../images/bggg.jpg"); /* border-image: fill 0 linear-gradient(#fff, #fff0); */ background-size: contain; background-position-y: bottom; background-repeat: no-repeat; position: relative; padding: 6rem 4rem; gap: 4rem; /* justify-content: space-between;*/ justify-content: end; } #vcene .button { width: 100%; text-align: center; } #spolocna { position: absolute; width: 64rem; right: -6rem; top: 3rem; max-width: 200%; transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1); } #spolocna:hover { transform: scale(1.075) skew(-0.001turn, 1deg) rotate(-0.1rad); } .camp #vcene ul { gap: 1rem; color: #000; /* font-weight: bold; */ margin-top: 2rem; color: #3c2929; } .camp #vcene ul b { font-weight: bold; } .camp #vcene h3 { font-weight: bold; color: #3c2929; } .cena-camp { font-weight: bold; color: #ffffff; } #strava h2 { color: #fff; } #zbalit { grid-column: 2 / 4; } #coto .wrapper > h2 { grid-column: 1 / 4; text-align: center; margin: 2rem auto; color: #000; } #coto ul { list-style: disc; list-style-position: inside; } @media (max-width: 1280px) { .wrapper { padding-left: 40px; padding-right: 40px; width: 90%; } } @media (max-width: 1100px) { body { font-size: 1.5rem; } .wrapper { padding-left: 0; padding-right: 0; width: 90%; } .card:before { left: -500px; bottom: -150px; width: 500px; height: 500px; } .card:hover:before { bottom: -75px; } #form .wrapper { padding: 8rem 4rem; } .form-wrap { grid-template-columns: 1fr; } .top-bar a { font-size: 1.4rem; font-weight: 400; } .why { display: grid; grid-template-columns: 2fr 3fr; gap: 5rem; } .why .arrow { display: none; } .glams-gray { width: 80%; } .callout h1 { font-size: clamp(3rem, 1vw, 4.8rem); } h1 { font-size: 3.8rem; } h2 { font-size: 3rem; } .callout .subtitle { font-size: clamp(1rem, 2vw, 1.6rem); } } @media (max-width: 860px) { .gallery-grid { flex-wrap: wrap; justify-content: space-between; } .gallery-grid .column:nth-of-type(1) a img, .gallery-grid .column:nth-of-type(2) a img { height: 100%; object-fit: cover; } .gallery-grid .column:nth-of-type(3) { grid-template-columns: 1fr 1fr; display: grid; flex-basis: 100%; } .gallery-grid .column { flex-basis: calc(50% - 1.2rem); /* gap: 1.2rem; */ display: grid; } .team-grid { grid-template-columns: 1fr 1fr; } #cta .banner { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; background-color: #6d82b9; background-size: cover; aspect-ratio: auto; } .call { display: flex; flex-wrap: wrap; flex-direction: column; grid-row-start: 1; justify-content: start; } .decor { grid-row-start: 1; display: flex; justify-content: right; flex-direction: row; height: 100%; position: relative; align-items: end; } .decor:before { display: none; } /* .deva { max-block-size: unset; height: min-intrinsic; bottom: 0; */ .feed-grid { gap: 1.2rem; } .gallery-grid, .gallery-grid .column, .team-grid, .feedgrid { gap: 1.2rem; } .contact-info { margin-right: 3rem; } /* !! */ .camp .about .wrapper, .camp .form-head { grid-template-columns: 1fr; flex-direction: column; } #zbalit, #strava, .camp .why, #coto .title-group, #coto .wrapper > h2, .camp #karty { grid-column: 1; } .camp .why { display: flex; } #coto .wrapper, .camp #prihlaska { grid-template-columns: 1fr; } .camp #prihlaska .span-full, .camp #prihlaska .form-field { grid-column: 1; } #spolocna { width: 35rem; right: -4rem; top: -9rem; } #vcene { padding-top: 15rem; } .camp #form .wrapper { width: 95%; min-width: auto; } .camp .glams { width: 20rem; } .camp .body-wrapper > header { padding: 8rem 2rem 2rem; } .camp .hero { padding: 4rem; } .camp .callout h1 { font-size: clamp(3.6rem, 1vw, 4.8rem); } .camp .hero .date { font-size: clamp(2.4rem, 1vw, 4.8rem); } } @media (max-width: 725px) { #cta .banner { grid-template-columns: 1fr; grid-template-rows: 1fr; } .span-full { grid-column: 1; } .buttons { justify-content: start; } .deva { /* height: auto; display: none; */ width: 45%; } inner { padding: 0.8rem; } .callout h1 { font-size: clamp(2rem, 2vw + 1rem, 3rem); } header .callout { gap: 0 3rem; margin: 5.4rem 0 0; } #cta .call { padding: 3.2rem; /* grid-column: 1/3; */ } .banner h4 { font-size: 2.8rem; } .svgicon.swirl { position: absolute; bottom: -19rem; right: 18rem; width: 10rem; height: 12rem; } .contact-info { margin-right: 0; } .split { gap: 8rem; } .tagbar img { animation-name: none; } .svgicon.swirl { display: none; } .camp .about .wrapper { flex-direction: column; } /* .camp .why, #zbalit, #strava, #coto .title-group, .camp #prihlaska, #karty { grid-template-columns: 1fr; } #zbalit, #strava, #coto .title-group, .camp #prihlaska, #karty, */ .camp .why { grid-column: 1; grid-template-columns: 1fr; } .camp #coto .wrapper { grid-template-columns: 1fr; flex-direction: column; } #coto .wrapper > h2 { grid-column: 1; } .camp #form .wrapper { width: 90%; min-width: 90%; } } @media (max-width: 460px) { .hero { background-image: url("../images/hero-square.webp"); aspect-ratio: 1; padding: 6rem; justify-content: end; } #prihlaska { grid-template-columns: 1fr; } .top-bar ul { justify-content: space-between; } h1 { font-size: 3.2rem; } header .callout, .why, .info, .why, .form-wrap, .split, .bottombar, .site-info { display: flex; flex-direction: column; } .split { padding: 6rem 2rem; } .split .title-group { padding: 0; } .contact-info { padding-bottom: 0rem; padding-top: 0; } #form .title-group { margin-bottom: 1rem; } #form .wrapper { padding: 4rem 3rem; } .title-group .subtitle { font-size: 1.4rem; color: var(--color-pink); margin-bottom: 0.6rem; } .feed-grid { grid-template-columns: 1fr 1fr; } #cta .banner { grid-template-columns: 1fr; } .decor, .glams-gray { display: none; } .callout .subtitle { display: none; } .callout h1 { font-size: clamp(2rem, 2vw + 1rem, 4rem); } header .callout { gap: 1rem; } .hide-on-mobile { display: none; } #main-logo img { width: 100%; height: auto; } .menu-highlight { padding: 0 0.8rem; } .tagbar { font-size: clamp(1.25rem, 1vw, 3rem); } .logo-huge { margin-top: 0; left: 0; max-inline-size: unset; max-block-size: unset; width: 107%; } header .callout { margin: 3rem 0 0; } .menu-highlight:before, .form-head svg { display: none; } .top-bar .menu-highlight { padding: 0; } .top-bar .menu-highlight:hover { background: unset; color: var(--color-pink); } .hero .call { padding: 0; } .button { padding: 1.4rem 2.4rem; } .tagbar { margin-bottom: 6rem; } .gallery-grid, .gallery-grid .column, .team-grid, .feedgrid { gap: 0.8rem; } .inner { display: flex; flex-direction: column; gap: 1rem; } #map img { height: 40rem; max-block-size: initial; max-inline-size: unset; } #map { margin-bottom: 8rem; } .split { margin-bottom: 4rem; } #map a { display: flex; justify-content: center; } .contact-info { margin-right: 0; } #cta call { padding: 3.2rem 3.2rem 4.8rem; } .hero { padding: 3.6rem; align-items: stretch; } .zapis:before { scale: 0.6; } .about .info { padding: 0 0 6rem; } header { margin-bottom: 6rem; overflow: hidden; } .svgicon.smiley, .svgicon.pinky-down, .svgicon.plane { display: none; } .span-full { grid-column: 1; } .social-icons { order: 2; } .bottombar { display: grid; grid-template-columns: 5fr 1fr; } .site-info { gap: 0.6rem; } .tagbar img { animation-name: none; } .svgicon.swirl { display: none; } .emoji { font-size: 3rem; width: 5rem; height: 5rem; padding: 0; } .form-message { font-size: 2rem; line-height: 3.2rem; } .card:before { left: -500px; bottom: 50px; width: 250px; height: 250px; } button[type="submit"], #cta .button, .hero .button { width: 100%; text-align: center; -webkit-/user-select: none; -moz-/user-select: none; -ms-/user-select: none; /user-select: none; } .hero h1 { font-size: clamp(3rem, 2.4rem + 3vw, 3.875rem); text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6); } #cta .call { padding: 3.2rem; } form input, textarea, select { font-size: 1.6rem; } } @media (max-width: 375px) { .button { padding: 1.4rem; } h1 { font-size: clamp(2.8rem, 1vw, 3.8rem); } .hero h1 { font-size: clamp(2.4rem, 2.4rem + 1vw, 3rem); } .date { font-size: clamp(2.4rem, 1vw, 3.2rem); } .zapis { font-size: clamp(1rem, 1vw, 2rem); } .top-bar a { font-size: 1.3rem; } #form .wrapper { padding: 4rem 2rem; } .emoji { line-height: 4rem; } } @keyframes slide-x { from { left: 0; } to { left: -33%; } } @keyframes slide-l { from { left: 0; } to { left: -50%; } } @keyframes slide-m { from { left: 0; } to { left: -75%; } } @keyframes slide-s { from { left: 0; } to { left: -100%; } } .camp #form { border-radius: 0 0 30px 30px; overflow: hidden; padding-bottom: 30px; } #karty { width: 100%; grid-column: 1 / 3; } #karty .content { margin-top: 2rem; } #karty .credits { display: none; } .camp #prihlaska { gap: 1.2rem; } .camp #prihlaska .form-field { padding-bottom: 0.8rem; } .camp #prihlaska .form-field.suhlas-detail { padding-bottom: 0rem; } .my-config { --uc-primary-oklch-dark: 0.65 0.26 359.36; --uc-primary-oklch-light: 0.65 0.26 359.36; } #error p { font-size: 3.6rem; color: #3c2929; font-weight: 400; padding-bottom: 2rem; line-height: 1.4; max-width: 34ch; } #error { padding: 8rem; text-align: center; color: #fff; } #error .emoji { font-size: 12rem; vertical-align: middle; padding: 0.1em; background: rgb(255, 255, 255); height: 12rem; width: 24rem; border-radius: 6rem; display: inline-block; text-align: center; margin: 0 1rem; transition: all 0.3s ease-out; line-height: 5rem; color: #000; } #error .emoji:hover { background: black; font-size: 20rem; padding: 0; color: #fff; } #error .button { font-size: 2rem; padding: 0em 2em; } .emoji.four::before, .emoji.zero::before { content: attr(data-emoji); } .emoji.four:hover::before { content: "4"; color: #fff; } .emoji.zero:hover::before { content: "0"; color: #fff; } .forofor .glams-gray { width: 90vh; height: auto; position: absolute; z-index: -1; top: -4rem; left: 50%; transform: translate(-50%, 0%); } .forofor { height: 100vh; display: grid; } .forofor .wrapper { position: relative; } .forofor header { margin: 0; } .forofor #error > div { display: flex; flex-direction: column; align-items: center; } .toast-error { background: #ff000014; grid-column: 1 / 3; border-radius: 4px; text-align: center; color: red; padding: 1rem; } .toast-error b, .toast-error br { display: none; }