/*** The new CSS reset - version 1.11.2 (last updated 15.11.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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* 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; box-sizing: border-box; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* * { outline: #7ac142 1px solid; } */ :root{ --text-color: #ffe3a0; } html{ overflow-x: hidden; } body{ background-color: #2c3122; line-height: 1.6; font-family: "Noto Sans JP","游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳゴシック",sans-serif; } .hero-container{ padding: 0 2rem; width: 100%; text-align: center; z-index: 1; color: var(--text-color); position: absolute; margin: 5rem auto; font-size: large; bottom: 0; word-break: keep-all; overflow-x: hidden; } h2{ font-size: x-large; font-weight: bold; text-align: center; color: var(--text-color); } h3{ font-size: larger; font-weight: bold; } p{ white-space: pre-line; text-align: center; } strong{ font-weight: bold; font-size: 1.15rem; } a{ text-decoration: underline; font-weight: bold; } nav{ top: 8%; left: 50%; transform: translate(-50%, -50%); max-width: 750px; padding: 1.5rem; z-index: 1; color: white; position: absolute; display: grid; grid-auto-flow: column; justify-content: space-between; width: 100%; align-items: start; margin-top: 1rem; } #menu{ display: grid; margin: 1rem; } #logo { font-size: xx-large; } #logo img{ width: 50vw; max-width: 15rem; } /* section:first-of-type{ padding-top: 100svh; } */ .logo-menu img{ max-width: 17rem; margin-bottom: 3rem; } .img-wrapper{ display: grid; justify-content: center; max-width: 560px; margin: auto; } .bg-container{ height: 100svh; overflow: hidden; position: relative; } .bg-container::after{ content: ''; /* border-image: fill 0 linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 65%); */ height: 100%; position: absolute; display: block; width: 100%; top: 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 65%, #000 100%); } .intro{ position: relative; } .intro::after{ content: ''; /* border-image: fill 0 linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 65%); */ height: 10rem; position: absolute; display: block; width: calc(100vw + 1.5rem); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 65%, #000000 100%); bottom: 0; left: -1.5rem; } .bg-container img{ background: black; color: white; position: relative; display: block; animation: animatedBackground 20s ease-in-out infinite alternate; height: 100%; object-fit: cover; width: 100%; } .profile img, .burunabara img{ width: 55vw; /* border-radius: 100vw; */ -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); mask-image: radial-gradient(circle, black 56%, rgba(0, 0, 0, -1.5) 70%); } .profile img{ max-width: 15rem; } .moons img{ max-width: 500px; width: 80vw; } .info { background-image: url(images/night.jpg); border-radius: 0.5rem; padding: 2rem !important; font-size: 0.8rem; max-width: 500px !important; width: 80vw; background-size: cover; background-repeat: no-repeat; background-position-y: center; } .burunabara{ grid-template-columns: repeat(3, 1fr); gap: 1rem; } .bg2, .bg3{ height: 60vh; } .bg2::after{ border-image: fill 0 linear-gradient(0deg, rgb(98 86 78) 0%, rgb(98 86 78) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 100%); } .bg3::after{ background-image: -webkit-linear-gradient(90deg, #2c3122 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 70%, rgba(34, 37, 31, 1) 100%); /* border-image: fill 0 linear-gradient(0deg, #2c3122 0%, #2c3122 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 60%, #22251f 100%); */ } .sr{ background-color: #000; color: #fff; } .sr-bg{ height: 50vh; } .sr-bg::after{ background-image: -webkit-linear-gradient(90deg, #000000 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 70%, rgb(0, 0, 0) 100%); /* border-image: fill 0 linear-gradient(0deg, #2c3122 0%, #2c3122 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 60%, #22251f 100%); */ } .sr h3{ padding: 0 1.5rem; max-width: 680px; margin: auto; } .sr p{ text-align: left; padding: 0 1.5rem; max-width: 680px; margin: auto; } .fade{ height: 10rem; width: 100%; position: relative; } .fade::after{ content: ''; /* border-image: fill 0 linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 65%); */ height: 100%; position: absolute; display: block; width: 100%; top: 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(34, 37, 31, 1) 100%); } @keyframes animatedBackground { from { transform: scale(1); } to { transform: scale(1.3); } } .container{ color: white; padding: 1.5rem; } .main{ background-color: rgb(98 86 78); position: relative; padding-bottom: 6rem; } .main::after{ /* content: ''; */ border-image: fill 0 linear-gradient(0deg, rgb(43 27 63) 0%, rgb(43 27 63) 0%, rgba(0, 0, 0, 0) 4rem); height: 100%; position: absolute; display: block; width: 100%; top: 0; left: 0; } .container p{ padding: 1rem 0 0 0; word-break: auto-phrase; color: var(--text-color); } .intro{ background-color: black; padding-bottom: 4rem; } .scroll-container{ display: grid; position: absolute; width: 100%; justify-items: center; align-items: start; top: calc(100svh - (40px + 1.5rem)); } .scroll { width: 32px; height: 32px; border: 2px solid var(--text-color); border-radius: 50%; position: absolute; animation: down 1.5s infinite; -webkit-animation: down 2.5s infinite; z-index: 1; } .scroll::before { content: ""; position: absolute; top: 5px; left: 8px; width: 13px; height: 13px; border-left: 2px solid var(--text-color); border-bottom: 2px solid var(--text-color); transform: rotate(-45deg); } @keyframes down { 0% { transform: translate(0); } 20% { transform: translateY(15px); } 40% { transform: translate(0); } } @-webkit-keyframes down { 0% { transform: translate(0); } 20% { transform: translateY(15px); } 40% { transform: translate(0); } } .contact{ color: white; padding: 1.5rem; padding-bottom: 4rem; } .checkmarktext, .spinner-wrapper{ height: 10rem; display: none !important; } .checkmark_wrapper { display: flex; justify-content: center; align-items: center; } .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #7ac142; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards } .checkmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 1.8rem 0 0.2rem 0; box-shadow: inset 0px 0px 0px #7ac142; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both } .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards } .thanks{ word-break: keep-all; text-align: center; padding-bottom: 1rem; } @keyframes stroke { 100% { stroke-dashoffset: 0 } } @keyframes scale { 0%, 100% { transform: none } 50% { transform: scale3d(1.1, 1.1, 1) } } @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #7ac142 } } .spinner-wrapper{ display: flex; justify-items: center; justify-content: center; align-items: center; padding: 2rem; margin-bottom: 2rem; } .lds-spinner { transform: scale(0.8); color: gray; display: inline-block; position: relative; width: 80px; height: 80px; } .lds-spinner div { transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite; } .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 37px; width: 6px; height: 18px; border-radius: 20%; background: gray; } .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } } #sendmessage{ text-align: end; width: 100%; display: block; } #sendmessage > .button:hover{ cursor: pointer; } form{ margin: auto; max-width: 600px; border-radius: 0.5rem; } .form input[type=date], .form input[type=datetime], .form input[type=number], .form input[type=search], .form input[type=time], .form input[type=url], .form input[type=email], .form input[type=mail], .form input[type=tel], .form input[type=text], .form textarea, .form select { color: #000; background: white; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0.4em 0.8rem; border-radius: 0.5rem; margin: 0.5rem 0; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; /* outline: none; */ line-height: 1.8; box-shadow: rgb(17 17 26 / 10%) -1px -1px 0px 0px; } /* .form input:invalid { border: solid 5px red; } */ .form select:required:invalid { color: #a5a5a5; } .form option[value=""][disabled] { display: none; } .form option { color: black; } .field { width: 100%; /* margin-bottom: 0.6em !important; */ } .form .card-cta{ background: var(--h-accent); margin-top: 1rem; margin-right: 1rem; margin-left: auto; display: flex; width: fit-content; text-align: revert; } .form ::placeholder{ color: #a5a5a5; } .form textarea{ margin-bottom: 0; } .footer-wrapper{ border-image: fill 0 linear-gradient(180deg, #2c3122 0%, #2c3122 0%, rgba(0, 0, 0, 0) 4rem); font-size: small; text-align: center; padding-bottom: 3rem; margin: auto; padding-top: 7rem; display: grid; color: white; justify-items: center; background-color: black; } .logo{ width: 35vw; max-width: 12rem; } .sns{ display: grid; grid-auto-flow: column; grid-gap: 2rem; margin: 4rem 1rem 0rem 1rem; justify-content: center; } .button-wrapper{ display: flex; justify-content: center; } .button { display: inline-grid; grid-auto-flow: column; background: white; color: black; padding: 0.3rem 1rem; border-radius: 100vw; margin-top: 1rem; margin-bottom: 1.5rem; align-content: center; align-items: center; } .footer > .button{ margin-right: 1.5rem; } .menu-wrap{ box-shadow: 3px 3px 8px rgba(0, 0, 0, .3); height: 2rem; position: fixed; top: 3rem; right: calc(100vw / 10); z-index: 4; width: 2rem; background-image: url(images/menu.svg); } .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: 2rem; cursor: pointer; opacity: 0; height: 2rem; } .menu-wrap .hamburger{ flex-direction: column; position: absolute; top: 0; z-index: 3; width: 2rem; height: 2rem; 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: gray; 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; } */ .hamburger > div{ opacity: 0; } .menu-wrap .toggler:checked + .hamburger > div{ opacity: 1; transition: all 500ms; } /* .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.8s ease; z-index: 1; filter: drop-shadow(0px 0px 2px black); } .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{ 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::after{ content: ''; position: absolute; width: 100%; height: 100%; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } .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: white; 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; }