/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ *: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-width: 100%; display: block; } /* 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; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* 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; } /*********easy debug layout**********/ /* * { outline: 1px solid red; } */ /*********global********/ :root{ --accent-color: #7d8770; } body{ font-family: serif; opacity: 0; overflow: hidden; background-color: white; position: relative; z-index: 1; } html{ /* background-color: var(--accent-color); */ scroll-behavior: smooth; } html::after { top: 0; content: url(images/logo.svg); display: block; margin-top: 40svh; position: absolute; text-align: center; width: 100%; transform: scale(0.6); z-index: -1; filter: invert(58%) sepia(21%) saturate(299%) hue-rotate(44deg) brightness(85%) contrast(81%); } h1{ color: var(--accent-color); font-size: 1.4rem; font-weight: bold; margin-bottom: 0.4rem; padding: 0 0 0 2.5rem; } h2{ color: var(--accent-color); font-size: 1.15rem; font-weight: bold; margin-bottom: 0.4rem; padding: 0 0 0 2.5rem; } p{ line-height: 1.8; padding: 0 2.5rem; padding-bottom: 1rem; } h3{ border-top: white 0.1rem solid; border-bottom: white 0.1rem solid; box-shadow: 0px 4px 0px 0px var(--accent-color), 0px -4px 0px 0px var(--accent-color); text-align: center; width: 100%; background: var(--accent-color); color: white; padding: 0.5rem; font-size: 1.25rem; font-weight: bold; position: relative; margin-top: 4px; } h4{ text-decoration: underline; text-decoration-style: double; text-decoration-thickness: auto; color: var(--accent-color); font-size: 1.1rem; font-weight: bold; padding: 0 0 0 0.5rem; line-height: 1.5; padding-bottom: 0.5rem; } strong{ display: block; text-align: center; color: #5d5d5d; } nav{ position: absolute; z-index: 1; -webkit-filter: invert(1); } .wrapper{ max-width: 797px; margin: auto; } .lesson-info-wrapper, .access-wrapper, .lesson-wrapper, .widget-wrapper{ max-width: 70ch; margin: auto; } .logo{ padding: 1rem; } .logo img{ width: calc(50vw - 1rem); height: auto; margin-bottom: 0.4rem; } .caption{ font-size: 1rem; line-height: 1.5; /* font-family: sans-serif; */ font-weight: bold; } .hero img{ aspect-ratio: 4/5; object-fit: cover; } .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -1; bottom: 15px; left: 10px; width: 50%; height: 25%; box-shadow :0 15px 10px rgba(0, 0, 0, 0.5); transform: rotate(-3deg); } .drop-shadow:after{ right: 10px; left: auto; transform: rotate(3deg); } .slick-list{ background-color: white; } .slick-list::after{ z-index: 1; content: ''; position: absolute; top: 0; right: 0; left: 0; height: 100%; background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 65%, var(--accent-color) 100%); } .slick-slider{ margin-bottom: 2.5rem; } .slick-dots { bottom: 0.5rem; } .slick-dots li button:before { color: var(--accent-color); font-size: 0.45rem; opacity: 1; } .slick-dots li.slick-active button:before { opacity: 1; color: white; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; color: white; } .sl-wrapper .sl-image .sl-caption { background: rgba(0, 0, 0, .25) !important; } .sl-overlay{ opacity: 1 !important; background: none !important; /* backdrop-filter: blur(50px); */ } .sl-overlay::before{ content: ''; position: absolute; width: 100%; height: 100%; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } /* .sl-counter, .sl-close{ color: var(--accent-color) !important; } */ .sl-wrapper .sl-navigation button { color: white !important; } .sl-wrapper .sl-navigation button.sl-next, .sl-wrapper .sl-navigation button.sl-prev { filter: drop-shadow(0px 0px 2px black); font-size: 3.5rem !important; } .quote{ line-height: 2.2rem; } .gf{ display: grid; justify-content: center; } .gf img{ width: 10rem; padding-bottom: 3rem; } .lesson, .access{ background-color: #f6edd9; } .lesson-wrapper, .access-wrapper{ z-index: 0; padding: 1.5rem; /* position: relative; */ } .lesson-wrapper p, .lesson-info-wrapper p { padding: 0.5rem 0.5rem 1.5rem 0.5rem; } .lesson-info-wrapper{ padding: 2rem; padding-top: unset; } .lesson-info-wrapper ul{ padding-left: 2.5rem; list-style: unset; padding-top: 0.5rem; } .policy-wrapper{ background: #f5f5f5; padding: 0.8rem; border-radius: 0.5rem; } .policy-wrapper p{ padding-bottom: 0.5rem; } .card{ border-radius: 0.5rem; overflow: hidden; margin-bottom: 3rem; box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; position: relative; } .img-wrapper{ } .img-wrapper img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; } .info-wrapper{ background-color: white; padding: 1.2rem 1.5rem; } .title{ padding: unset; } .button-wrapper{ text-align: right; padding: 0.5rem 0; } .button{ color: white; background-color: var(--accent-color); display: inline-block; padding: 0.5rem 1.5rem; border-radius: 100vw; } .button a{ display: grid; grid-auto-flow: column; grid-gap: 0.5rem; align-items: center; align-content: center; } .button a img{ height: 0.8rem; } .widget-wrapper{ padding: 1.5rem; padding-top: 2rem; } .lightwidget__caption{ margin-top: 1rem !important; } .lightwidget__image-wrapper img{ border-radius: 0.5rem !important; } .lightwidget__nav{ top: calc(25% - var(--lightwidget-slider-btn-padding)* 1rem - .2rem) !important; } .access-wrapper p{ padding: unset; } .access-wrapper ul{ padding: 0.5rem 2rem 2rem 2rem; list-style: unset; font-size: 0.8rem; color: #5d5d5d; } .mininav-wrapper{ display: none; } .mininav{ box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px !important; border-radius: 0.5rem; right: 0; margin-right: calc((100vw / 10)); width: 4.5rem !important; color: gray; padding: 0.4rem 0 0.2rem 0; grid-auto-flow: column; background: white; display: grid; position: fixed; bottom: 0rem; justify-content: space-evenly; z-index: 150; margin-bottom: 3rem; } .mininav a { align-items: center; text-align: center; flex-direction: column; display: flex; font-size: 0.8rem; } .mininav a svg { width: 1.4rem; height: 1.4rem; fill: var(--accent-color); } footer{ background-color: #3c4531; } .footer-logo{ -webkit-filter: invert(1); width: 8rem; height: auto; } .footer-wrapper { font-size: small; max-width: 760px; text-align: center; padding-bottom: 3rem; margin: auto; padding-top: 3rem; display: grid; color: white; justify-items: center; } .sns{ display: grid; grid-auto-flow: column; grid-gap: 1rem; margin: 1rem 1rem 2rem 1rem; } .iframe-wrapper{ position: relative; margin-bottom: 3rem; background-color: white; line-height: 0; } iframe.gmap { width: 100%; aspect-ratio: 14 / 9; height: auto; box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; position: relative; } .gallery { display: grid; grid-gap: 1rem; grid-auto-flow: column; margin-bottom: 2rem; } .gallery img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.5rem; } /* .remove{ display: none; } */ .button, .mininav{ transition: all .2s ease-in-out; } .button:hover, .mininav:hover, .menu-sns a img:hover{ transform: scale(1.05); } .button:hover{ box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px; } .logo-menu{ display: grid; justify-content: center; margin-bottom: 2rem; } .logo-menu img, .menu-sns img{ filter: invert(50%) sepia(23%) saturate(253%) hue-rotate(44deg) brightness(98%) contrast(91%) !important; opacity: 1 !important; } .menu-wrap{ border-radius: 70px; box-shadow: 3px 3px 8px rgba(0, 0, 0, .3); height: 70px; background: white; position: fixed; bottom: 0; right: 0; z-index: 4; width: 70px; margin: 1.6em; } .menu-wrap .toggler{ /*border-radius: 70px; box-shadow: 3px 3px 8px rgba(0, 0, 0, .5); height: 70px; background: white; position: fixed; bottom: 0; right: 0; z-index: 1; width: 70px; margin: 1.6em;*/ position: absolute; z-index: 4; width: 70px; cursor: pointer; opacity: 0; height: 70px; } .menu-wrap .hamburger{ flex-direction: column; position: absolute; top: 0; z-index: 3; width: 70px; height: 70px; display: flex; align-items: center; transition: all 0.8s ease; justify-content: center; } .menu-wrap .hamburger > div{ margin-top: 0.6rem; position: relative; width: 35%; height: 2px; background-color: var(--accent-color); display: flex; align-items: center; justify-content: center; } .menu-wrap .hamburger > div:before, .menu-wrap .hamburger > div:after{ content: ''; position: absolute; z-index: 1; top: -7px; width: 100%; height: 2px; background: inherit; transition: all .2s ease-out; } .menu-wrap .hamburger > div:after{ top: 7px; } .menu-wrap .hamburger span{ font-size: small; margin-top: 0.6rem; color: #5c5c5c; } .menu-wrap .toggler:checked + .hamburger > div{ transform: rotate(135deg); } .menu-wrap .toggler:checked + .hamburger > div:before, .menu-wrap .toggler:checked + .hamburger > div:after { top: 0; transform: rotate(90deg); } .menu-wrap .toggler:checked:hover + .hamburger > div{ transform: rotate(225deg); } .menu-wrap .toggler:checked ~ .menu { visibility: visible; } .menu-wrap .toggler:checked ~ .menu > div{ transform: scale(1); transition-duration: 0.3s; } .menu-wrap .toggler:checked ~ .menu > div > div { opacity: 1; transition: opacity 0.4s ease; } .menu-wrap .menu { position: fixed; top: 0; right: 0; width: 100%; height: 100%; visibility: hidden; overflow: hidden; display: flex; align-items: center; justify-content: center; } .menu-wrap .menu > div{ background: white; border-radius: 50%; width: 250vh; height: 250vh; display: flex; flex: none; align-items: center; justify-content: center; transform: scale(0); transition: all 0.4s ease; } .menu-wrap .menu > div > div{ text-align: center; max-width: 90vw; max-height: 100vh; opacity: 0; transition: opacity 0.4s ease; } .menu-wrap .menu > div > div > ul { grid-gap: 0.3rem; display: grid; justify-content: center; justify-items: center; } .menu-wrap .menu > div > div > ul > li { list-style: none; color: #5c5c5c; font-size: 1.2rem; padding-bottom: 0.5rem; } .menu-wrap .menu > div > div > ul > li:last-of-type { padding: 0; } .menu-wrap .menu > div > div > ul > li > a { color: inherit; text-decoration: none; transition: color 0.4s ease; align-items: center; } .menu-wrap .menu > div > div > ul > li > a::after{ border-radius: 100vw; height: 2px; display: block; content: ""; background-color: var(--accent-color); width: 0%; transition: width .3s; } .menu-wrap .menu > div > div > ul > li > a:hover::after{ width: 100%; transition: width .3s; } .menu-wrap .menu > div > div > ul > li > a > img { height: 1.5em; } .hidden{ position: relative; left: -1rem; top: 1.5rem; padding-bottom: 0; } .hidden::before{ z-index: -1; background-color: #fec252; } .scrolled{ opacity: 1 !important; visibility: visible !important; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ; } body > div.menu-wrap.scrolled > div.menu > div > div > div.sns{ margin-top: 3rem; display: grid; justify-content: center; justify-items: center; } #acchan{ margin: auto; width: 65%; border-radius: 50%; box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; } @media screen and (min-width: 797px) { .logo img { width: 15rem; } .hero img{ aspect-ratio: 16/9; object-fit: cover; } .logo{ display: grid; grid-auto-flow: column; align-items: end; gap: 0.8rem; } .remove{ display: block; } html::after { transform: scale(1); } .menu-wrap{ margin-right: calc((100vw / 5)); } .img-wrapper img { aspect-ratio: 16 / 9; } }