/*** 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: #a07747; --card-accent: white; --h-accent: #404040; } html{ scroll-behavior: smooth; } body{ /* font-family: 'Zen Kaku Gothic New', sans-serif; */ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳＰゴシック", "MS PGothic", "ＭＳゴシック" , "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif; -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; } h2{ margin: auto; width: fit-content; font-size: x-large; display: block; text-align: center; color: var(--h-accent); font-weight: bold; } h3{ margin-top: 0.4em; font-size: large; text-align: center; color: var(--h-accent); font-weight: bold; } strong{ font-weight: bold; } .pages ol, .pages ul{ list-style: revert; max-width: 680px; padding: 1rem 1.5rem 0 4rem; margin: auto; } .pages .workshop-title-text { text-align: center; } .pages-main > div.workshop-main.others > div.ulwrapper > ul{ padding: 0rem 2rem 0 2rem; } .pages .on{ color: firebrick; border: 2px solid firebrick; padding: 0.1rem 0.5rem; display: inline-flex; border-radius: 0.4rem; } .pages .on::before{ content: '満員御礼'; } .pages .caption{ margin-bottom: 0; padding: 0.5rem; text-align: left; max-width: 60ch; } ul li::marker{ color: var(--accent); } /* .content p a, .card a{ color: var(--accent); text-decoration: underline; } */ .deco{ max-width: 200px; width: 50vw; display: block; margin: 0.5rem auto 0 auto; } test ul a::after, .footer-nav ul a::after, .bold::after, .settings a::after { content: ''; display: block; width: 0; height: 2px; border-radius: 1px; background: white; transition: width .3s; } .kuchikomi-more::after { content: ''; display: block; width: 0; height: 2px; border-radius: 1px; background: var(--accent); transition: width .3s; } .ui-timepicker-wrapper { width: 15ch !important; } .ui-timepicker-wrapper .ui-timepicker-list li { margin: 0.3rem !important; } .settings a::after { background: var(--h-accent); } test ul a:hover::after, .footer-nav ul a:hover::after, .bold:hover::after, .settings a:hover:after, .kuchikomi-more:hover::after{ width: 100%; transition: width .3s; } .underline::after{ background: var(--accent); margin: auto; display: block; content: ''; width: 4ch; border-radius: 0.2rem; border: 0.1rem solid var(--accent); } p{ padding: 1rem 1.5rem 0 1.5rem; line-height: 1.8; max-width: 680px; margin: auto; } section{ margin: auto; padding: 3rem 0; display: inline-block; width: 100%; } .logo{ text-align: center; } .logo img{ margin: 0.5rem auto; width: 12.5rem; height: auto; } .slogan{ word-break: keep-all; color: white; font-size: xx-large; margin: 0 auto; text-align: center; position: relative; z-index: 2; padding: 2rem; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: normal; /* -moz-text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6); -webkit-text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6); -ms-text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6); text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6); */ } .slogan span{ opacity: 0; } nav{ padding: 1.2rem 0; display: flex; height: fit-content; justify-content: center; align-items: center; color: var(--accent); } nav ul{ display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; font-weight: bold; } nav ul li{ display: grid; margin: 0 0.23rem; justify-items: center; } nav ul li span{ font-size: 0.9rem; margin-top: -0.4rem; color: gray; } nav ul li a{ display: contents; } .hero{ position: relative; background: url(assets/img/hero.webp)center center; height: 70vh; width: 100%; background-size: cover; z-index: 10; } .hero::before{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: .35; content: ''; z-index: 1; } .cta{ gap: 0.5rem; border-radius: 2.4rem; font-weight: bold; padding: 0.6rem 1.4rem; color: white; background: var(--accent); display: flex; margin: auto; margin-top: 1.4rem; cursor: pointer; width: fit-content; } .cta:hover, .form .card-cta:hover, .sns-wrapper a img:hover, .card-cta:hover, .edit:hover, .remove:hover, .link:hover{ transform: scale(1.05); box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; } .arrow{ font-size: large; font-family: slick; margin-top: 0.25rem; } section:nth-child(odd){ background-color: #f8f8f8; } .pic-container{ margin: auto; display: flex; max-width: 580px; padding: 1rem 0 0.3rem 0; } .pic-container .slick-track a img{ border-radius: 0.5rem; aspect-ratio: 4/3; width: 100%; } .pic-container .slick-slide{ object-fit: cover; margin: 0 2.5rem; } .pic-container .slick-prev{ left: 10px !important; } .pic-container .slick-next{ right: 10px !important; } .slick-prev, .slick-next { z-index: 100 !important; top: calc(50% - 1rem) !important; transform: translate(0, -50%)scale(1.5) !important; } .slick-prev:before, .slick-next:before { color: var(--accent) !important; } .slick-dotted.slick-slider { margin-bottom: 0 !important; } .pic-container .slick-dots{ position: relative !important; } .slick-dots{ bottom: 0 !important; } .slick-dots li button:before{ font-size: 0.5rem !important; } .slick-dots li.slick-active button:before { opacity: 1 !important; color: var(--accent) !important; } .slick-dots li button:hover:before { opacity: 0.5 !important; } .slick-dots li:only-child{ display:none; } .card-wrapper{ /* grid-template-columns: repeat(auto-fit, 300px); justify-content: space-around; flex-wrap: wrap; display: grid; */ max-width: 680px; margin: auto; width: calc(100vw - 3rem); } .card{ background: white; box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; border-radius: 0.5rem; position: relative; } .card img{ aspect-ratio: 4/3; object-fit: cover; border-radius: 0.5rem 0.5rem 0 0; display: block; width: 100%; } .card h3::after{ background: var(--accent); margin: 0.35rem 0 0.25rem 0; display: block; content: ''; width: 2ch; border-radius: 0.2rem; border: 0.1rem solid var(--accent); } .card a{ display: contents; } .card-wrapper .card{ margin: 0 1rem 2rem 1rem !important; } .card-wrapper .slick-slide{ /* margin: 0.5rem 2.5rem 2rem 2.5rem; */ } .card-wrapper .card img{ aspect-ratio: 16/9; width: 100%; } .card-wrapper .slick-prev{ left: -12px !important; } .card-wrapper .slick-next{ right: -12px !important; } .toknow{ align-items: baseline; display: flex; color: white; margin-bottom: 0.5rem; } .date{ align-items: center; color: var(--accent); border-radius: 0.5rem 0 0 0.5rem; font-weight: bold; font-size: large; } .time{ margin-left: 0.3rem; display: flex; border-radius: 0 0.5rem 0.5rem 0; color: #999; font-weight: bold; } .card p{ padding: 0.5rem 0 0 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-align: left; text-overflow: ellipsis; } .card-cta{ gap: 0.5rem; border-radius: 1rem; align-items: center; padding: 0.3rem 1rem; background: var(--accent); font-weight: bold; /* margin: 1rem 0rem 1.5rem 1rem; */ display: inline-flex; cursor: pointer; color: #ffffff; } .card-cta .arrow{ font-size: unset; font-family: slick; margin-top: 0.1rem; } .workshop-main{ max-width: 680px; margin: auto; padding: 0 1.5rem; } .workshop-main ul:not(.slick-dots){ margin-left: 1.5rem; margin-right: 1.5rem; } .workshop-main ul .date{ text-align: right; display: inline-block; width: 8ch; } .archived-title{ display: inline; margin-left: 0.5rem; } .workshop-main ul li:not(.slick-dots > li){ padding: 0.2rem 0; border-bottom: 1px dotted #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .workshop-main h3, .card h3{ white-space: nowrap; text-overflow: ellipsis; margin-top: 1rem; font-weight: bold; text-align: left; overflow: hidden; color: var(--h-accent); } .workshop-main h3{ margin-top: 1.5rem; } .colored-h3{ width: fit-content; background: #f8f8f8; margin: auto; padding: 0.3rem 1rem 0.2rem 1rem; margin-bottom: 0.8rem; border-left: 0.2rem solid var(--accent); } .workshop-main p{ padding: 0; } .workshop-main .card{ max-width: 450px; margin: 0 auto 1rem auto; } .workshop-main .card p{ } .kuchikomi{ padding: 0 1.5rem 0.5rem 1.5rem; max-width: 350px; margin: auto; } .kuchikomi .slick-dots{ position: relative !important; } .kuchikomi-card{ padding: 1rem; border-radius: 0.5rem; box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; margin: 0 1rem 1rem 1rem; border-top: solid 0.2rem var(--accent); } .kuchikomi-card img{ max-width: 6rem; margin: auto; } .kuchikomi-card .date{ text-align: center; margin: 0.3rem 0 0 0; } .label{ font-weight: bold; padding: 0.1rem; position: relative; color: white; background-color: var(--accent); text-align: center; display: grid; font-size: small; margin-bottom: 0.7rem; } .kuchikomi-text p{ padding: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-align: left; text-overflow: ellipsis; white-space: pre-line; } .kuchi-wrapper{ display: flex; justify-content: flex-end; } .kuchikomi-more, .past-events-more{ margin-top: 0.5rem; text-align: right; color: var(--accent); font-weight: bold; display: block; margin-right: 0.5rem; cursor: pointer; } .past-events-more{ margin-right: 0; text-align: center; margin-top: 1rem; } .kuchikomi .slick-prev{ left: 0px !important; } .kuchikomi .slick-next{ right: 0px !important; } .caption{ margin: 0 auto 3.5rem auto; max-width: 680px; width: calc(100% - 2rem); color: gray; font-size: 0.9rem; text-align: center; } .workshop-main .caption p:first-child{ text-align: center; margin: 0 0 0.2rem 0; } .dot{ display: inline-block; width: 1rem; height: 1rem; background: var(--accent); border-radius: 100%; } .workshop-title-text{ margin-left: 1rem; margin-right: 1rem; color: var(--h-accent); display: block; margin-bottom: 0.4rem; margin-top: 1.5rem; font-size: larger; font-weight: bold; } .counseling .underline::after, .counseling .icons img, .counseling .colored-h3, .counseling .slick-prev:before, .counseling .slick-next:before, .counseling .cta, .counseling .slick-dots li.slick-active button:before, .counseling a{ filter: hue-rotate(70deg) !important; } .counseling .kuchikomi-card:not(image) { border-top: solid 0.2rem var(--accent); filter: hue-rotate(70deg) !important; } .counseling .kuchikomi-card > img{ filter: hue-rotate(300deg) !important; } .counseling .detail{ color: var(--accent); filter: hue-rotate(70deg) !important; } .extra{ text-align: center; font-size: initial; font-weight: bold; } @media (min-width: 576px) { .others .workshop-title{ padding: 0 1.5rem; } .ulwrapper{ margin: auto; width: fit-content; } .mininav:hover{ transform: scale(1.05); box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; } #uploadform{ margin-top: 2rem !important; border-radius: 0.5rem !important; } .hidden-menu{ display: block !important; } .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/5)); 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; } .fadeInNav:nth-child(6) { animation-delay: 3s; display: inline-block; } .fadeInNav:nth-child(7) { animation-delay: 3.2s; display: inline-block; } .fadeInNav:nth-child(8) { animation-delay: 3.4s; display: inline-block; } .fadeInNav:nth-child(9) { animation-delay: 3.6s; display: inline-block; } .fadeInNav:nth-child(10) { animation-delay: 3.8s; display: inline-block; } .fadeInNav:nth-child(11) { animation-delay: 4s; display: inline-block; } .mininav a:not(:first-child){ display: none; } .workshop-main .card { display: flex; width: 100%; max-width: 100%; } #upcoming-events .card a img{ width: 100%; aspect-ratio: 1/1; max-width: 275px; border-radius: 0.5rem 0 0 0.5rem; } #upcoming-events-admin > div > div > img{ width: 100%; aspect-ratio: 1/1; max-width: 275px; border-radius: 0.5rem 0 0 0.5rem; } details > .card > img{ width: 100%; aspect-ratio: 1/1; max-width: 275px; border-radius: 0.5rem 0 0 0.5rem; } .card-wrapper .slick-prev{ left: -25px !important; } .card-wrapper .slick-next{ right: -25px !important; } test ul{ font-size: 1rem !important; top: calc(70vh - 2.2rem) !important; } .footer-wrapper{ padding: 3rem 0 3rem 0 !important; } .overlay{ bottom: 1rem !important; } .radiowrapper{ display: flex !important; } .card-short-paragraph{ min-height: 10ch !important; } } .info{ width: inherit; display: grid; text-align: right; position: relative; padding: 0 1.3rem; height: fit-content; } .info h3:hover{ text-decoration: underline; } .profile img{ display: block; width: 50vw; max-width: 200px; border-radius: 50%; text-align: center; margin: 2rem auto 0.5rem auto; } .position, .name{ display: block; margin: auto; text-align: center; width: fit-content; } .position{ color: #999; } .map{ } footer{ background-color: var(--accent); } footer h2{ margin: 3rem auto 0 auto; width: fit-content; font-size: x-large; display: block; text-align: center; color: white; font-weight: bold; } footer .underline::after { background: var(--h-accent); margin: auto; display: block; content: ''; width: 4ch; border-radius: 0.2rem; border: 0.1rem solid var(--h-accent); } footer p{ color: white; } .footer-wrapper{ justify-items: center; padding: 3rem 1rem 5rem 1rem; max-width: 500px; display: grid; background-color: var(--accent); margin: auto; } footer .logo-footer img{ width: 12rem; height: auto; margin-bottom: 1rem; } .sns{ margin-bottom: 2rem; align-items: center; display: flex; flex-flow: column; color: white; gap: 0.5rem; } .sns-wrapper { display: flex; gap: 1rem; } .sns-wrapper a img{ width: 2rem; } .footer-nav{ margin-bottom: 2rem; } .footer-nav ul{ font-weight: bold; display: flex; text-underline-offset: 0.3rem; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; color: white; line-height: 1.8; justify-content: center; padding: 0; } .footer-nav ul a{ margin: 0 0.5rem; } .footer-info{ text-align: center; color: white; } .footer-info span{ color: white; font-size: 0.8rem; text-align: center; } .bold{ display: inline-block; font-size: 0.8rem; font-weight: bold; } form{ margin: auto; max-width: 600px; border-radius: 0.5rem; padding: 0 1.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 { 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; } /* spinner and thanks */ .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; } } .access-media-wrapper { max-width: 680px; padding: 1.5rem 1.5rem 0 1.5rem; gap: 1.5rem; display: flex; margin: auto; } .access-media-wrapper img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; } .divider{ display: flex; gap: 1rem; } .adress { } .entrance, .map{ width: 50%; max-width: 50%; } .entrance{ display: flex; } .access .caption{ margin-bottom: 0.5rem; } .hidden-menu{ display: none; } .fadeInBottom { animation-name: fadeInBottom; animation-duration: 2.4s; animation-fill-mode: both } .fadeIn { animation-name: fadeIn; animation-duration: 1.6s; animation-fill-mode: both } .fadeInNav { animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: both } @keyframes fadeInBottom { from { opacity: 0; transform: translate(0%, 35vh); } to { opacity: 1 } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1 } } .fadeIn:nth-child(1) { animation-delay: 0.1s; display: inline-block; } .fadeIn:nth-child(3) { animation-delay: 0.5s; display: inline-block; } .fadeIn:nth-child(5) { animation-delay: 1s ; display: inline-block;} .fadeIn:nth-child(2) { animation-delay: 0.2; display: inline-block; } .fadeIn:nth-child(4) { animation-delay: 1s; display: inline-block; } .fadeInBottom{animation-delay: 1.4s;} .fadeInNav:nth-child(1) { animation-delay: 2s; display: inline-block; } .fadeInNav:nth-child(2) { animation-delay: 2.2s; display: inline-block; } .fadeInNav:nth-child(3) { animation-delay: 2.4s ; display: inline-block;} .fadeInNav:nth-child(4) { animation-delay: 2.6s; display: inline-block; } .fadeInNav:nth-child(5) { animation-delay: 2.8s; display: inline-block; } test ul{ white-space: nowrap; gap: 0.5rem; justify-content: center; width: 100%; color: white; display: flex; font-size: 0.9rem; position: absolute; top: calc(70vh - 2rem); z-index: 100; } test ul li{ opacity: 0; } .mininav-wrapper{ display: none; } .mininav{ color: gray; padding: 0.4rem 0 0.2rem 0; grid-auto-flow: column; width: 100%; background: white; display: grid; position: fixed; bottom: 0rem; justify-content: space-evenly; box-shadow: rgb(0 0 0 / 10%) 0px 0px 6px -1px, rgb(0 0 0 / 6%) 0px 0px 4px -1px; z-index: 150; } .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); } .others{ margin-top: 3rem; padding: 0; } /* #sex{ width: 8ch; } #age{ width: 6ch; } #tel{ width: 15ch; } */ .divider{ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); display: grid; gap: 1rem; } .ulwrapper > ul{ max-height: calc(7 * (2px + 2.1rem)); overflow: hidden; } .ulwrapper > ul > li{ line-height: 1.7rem; } /************************/ /*********pages**********/ /************************/ .page-link, p a{ color: var(--accent); text-decoration: underline; } .indent{ display: block; padding-left: 2ch; } .indent-2x{ display: block; padding-left: 4ch; } .important{ color: var(--accent); font-size: smaller; } .picture{ max-width: 60ch; margin: auto; padding: 0 1.5rem 0 1.5rem; } .picture img{ margin: 1rem auto; max-height: 22rem; border-radius: 0.5rem; } .back a{ margin-top: 0; } .pages h2{ padding: 0 1.5rem; margin-bottom: 1rem; } .pages section:nth-child(even) { background-color: #f8f8f8; margin-bottom: 3rem; } .pages section:nth-child(odd) { background-color: white !important; } .pages-main{ /* box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px; margin-bottom: 3rem; */ background-color: white !important; position: relative; } .pages p{ max-width: 60ch; } .pages #access{ padding: 0 0 3rem 0; } .page-event-info{ padding: 2.5rem 1.5rem 1rem 1.5rem; max-width: 60ch; margin: auto; } .page-event-info .time{ margin-left: 0; } .page-event-info h3{ white-space: nowrap; text-overflow: ellipsis; margin-top: 0; font-weight: bold; text-align: left; overflow: hidden; color: var(--h-accent); padding-bottom: 0.25rem; } .page-event-info h3::after{ background: var(--accent); margin: 0.35rem 0 0.25rem 0; display: block; content: ''; width: 2ch; border-radius: 0.2rem; border: 0.1rem solid var(--accent); } .icons{ padding: 0 1.5rem; margin: auto; margin-bottom: 3rem; max-width: 550px; display: grid; grid-auto-flow: column; justify-content: space-around; margin-top: 1.5rem; } .icons img{ max-width: 5rem; } #tel{ width: 100%; } .footer-pages{ padding-bottom: 2rem; } /************************/ /******admin page********/ /************************/ .greetings{ text-transform: capitalize; } #uploadform h2{ margin: unset; margin-bottom: 0.5rem; } #upcoming-events-admin h2, #past-events-admin h2{ padding-left: 1rem; margin-bottom: 0.6rem; width: 100%; display: block; text-align: left; max-width: 680px; } input:focus, textarea:focus, select:focus{ border:solid 1px; background-color: #fff; border-color: #a07747; outline: 0; box-shadow: 0 0 0 0.2rem rgb(160 119 71 / 29%) !important; } .settings{ gap: 0.5rem; padding-right: 3rem; width: 100%; display: grid; max-width: 620px; margin: 3rem auto; justify-content: right; } #uploadhtml{ scroll-behavior: unset; } #upcoming-events h2, #past-events h2 { padding: 3rem 0rem 1rem 2rem; max-width: 680px; margin: auto; width: auto; text-align: left; } #upcoming-events .card{ margin-bottom: 2rem; } #uploadbody{ background-color: white; } #uploadform{ margin-top: 0; border-radius: 0 0 0.5rem 0.5rem; max-width: 680px; color: var(--h-accent); box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; padding-top: 2rem; display: grid; background-color: #f8f8f8; } #uploadform input:focus::placeholder, #uploadform textarea:focus::placeholder { color: transparent; } #uploadform input, #uploadform textarea{ background: white; padding: 0.6rem 0.5rem 0.5rem 1rem; box-shadow: rgb(17 17 26 / 10%) -1px -1px 0px 0px; width: 100%; border-radius: 0.3rem; margin-bottom: 1rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .datewrapper{ grid-template-columns: repeat(auto-fill, minmax(12ch, 1fr)); display: grid; gap: 1rem; margin-bottom: 2rem; } .datewrapper input{ text-align: center; width: 100%; padding: 0.5rem 0 !important; } #content{ max-width: 680px; margin: auto; /* padding: 0 1.5rem; */ margin-bottom: 2.5rem; } #uploadform input[type=radio], #uploadform input[type=checkbox]{ all:revert; accent-color: var(--accent); } #uploadform input[type="file"]::file-selector-button{ margin-right: 0.8rem; } #upcoming-events-admin .workshop-main .card, #past-events-admin .workshop-main .card { margin: 0 auto 2rem auto; } .overlay{ gap: 0.5rem; top: 1rem; display: flex; position: absolute; flex-flow: column-reverse; } .price, .type{ padding: 0.2rem 0.6rem; color: white; text-transform: uppercase; font-size: smaller; } .price{ background: hwb(0deg 100% 0% / 80%); color: black; width: fit-content; } .type{ background: rgba(0, 0, 0, 0.8); } .radiowrapper{ display: block; gap: 1.5rem; justify-content: center; margin: 1rem 0; } .datewrapper input{ margin-bottom: 0 !important; } #preview{ object-fit: contain; max-height: 20rem; margin: auto; } #uploadform .card-cta{ margin: 1rem auto 1.5rem auto; } .tox-tinymce{ box-shadow: rgb(17 17 26 / 10%) -1px -1px 0px 0px !important; border: none !important; border-radius: 0.3rem !important; margin-bottom: 1rem !important; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .tox:not(.tox-tinymce-inline) .tox-editor-header { box-shadow: rgb(17 17 26 / 10%) -1px 1px 0px 0px !important; } #uploadform > div.tox.tox-tinymce.focused{ border:solid 1px !important; background-color: #fff !important; border-color: #a07747 !important; outline: 0 !important; box-shadow: 0 0 0 0.2rem rgb(160 119 71 / 29%) !important; } .buttonwrapper{ display: flex; justify-content: center; gap: 1rem; } #cancel, #save{ margin: 1rem 0 1.5rem 0 !important; } .remove, .edit, .link{ text-decoration: none !important; border-radius: 50%; display: flex; background: var(--accent); height: 2rem; width: 2rem; justify-content: center; align-items: center; } .remove svg, .edit svg, .link svg{ fill: white; } .remove{ background-color: firebrick; } .edit{ background-color: seagreen; } .link{ background-color: var(--h-accent); } .remove .card-cta, #cancel{ background-color: firebrick; } .hiddendescription, .buttonwrapper{ display: none; } .archived-title:hover { text-decoration: underline; cursor: pointer; } summary{ padding: 0.2rem 0; border-bottom: 1px dotted #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #past-events-admin > div > ul > li{ padding: 0; border: none; } /* .workshop-main ul li { white-space: unset; overflow: unset; text-overflow: unset; } */ .open{ white-space: unset !important; overflow: unset !important; text-overflow: unset !important; } .cta-container{ margin: 1.3rem 0;; display: flex; justify-content: end; gap: 0.5rem; } .cta-container a{ display: flex; } #past-events{ margin-bottom: 6rem; }