1 line
14 KiB
CSS
1 line
14 KiB
CSS
@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-MediumItalic.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format("truetype");font-weight:600;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:'Gloria Hallelujah';src:url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format("truetype");font-weight:400;font-style:normal}:root{--text-font-family: 'Nunito', Verdana, sans-serif;--title-font-family: 'Gloria Hallelujah', Verdana, sans-serif;--regular-font-weight: 400;--medium-font-weight: 500;--semi-bold-font-weight: 600;--bold-font-weight: 700;--text-font-size: 1.2rem;--small-text-font-size: 1rem;--h1-font-size: 2rem;--h2-font-size: 1.6rem;--h3-font-size: 1.6rem;--h4-font-size: 1.4rem;--content-max-width: 140rem;--text-max-width: 70rem;--icon-size: 2.5rem;--header-vertical-padding: 2rem;--header-horizontal-padding: 2rem;--header-height: calc((var(--header-vertical-padding) * 2) + var(--h1-font-size));--footer-vertical-padding: 2rem;--footer-horizontal-padding: 2rem;--footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));--generic-section-vertical-padding: 2rem;--generic-section-horizontal-padding: 1rem;--home-section-min-height: calc(100vh - var(--header-height) - var(--footer-height));--home-nav-gap: 1rem;--home-nav-item-size: 2rem;--home-nav-item-translation: 0;--home-nav-image-max-height: calc(100vh - var(--header-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-height));--black: #000;--jet: #333333;--white: #fff}@media screen and (min-width: 48rem){:root{--icon-size: 3rem;--header-horizontal-padding: 4rem;--footer-horizontal-padding: 4rem;--footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size));--generic-section-horizontal-padding: 2rem}}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@-webkit-keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}@keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}body{font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-font-size);color:var(--jet);background-color:var(--white)}h1,h2,h3,h4{color:var(--black)}h1{font-family:var(--title-font-family);font-size:var(--h1-font-size);line-height:var(--h1-font-size)}h2{font-family:var(--title-font-family);font-size:var(--h2-font-size);line-height:var(--h2-font-size);margin:2rem 0 0 0}h3{font-family:var(--text-font-family);font-size:var(--h3-font-size);line-height:var(--h3-font-size);margin:1rem 0}h4{font-family:var(--text-font-family);font-size:var(--h4-font-size);line-height:var(--h4-font-size);margin:1rem 0}p{text-align:justify}a{color:var(--jet);text-decoration:underline;-webkit-transition:color 200ms ease-in-out;-o-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}a:hover,a:focus,a:active{color:var(--black)}body{min-height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;grid:'header' auto 'main' 1fr 'footer' auto / 1fr}header{grid-area:header}main{grid-area:main}footer{grid-area:footer}header{height:var(--header-height);padding:var(--header-vertical-padding) var(--header-horizontal-padding)}.header-bar{max-width:var(--content-max-width);margin:auto}.header-bar__logo{width:max-content}.header-bar__logo-link{text-decoration:none}.home-section{max-width:var(--content-max-width);min-height:var(--home-section-min-height);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home__nav{height:100%;display:-ms-grid;display:grid;grid:"top-left top top-right" var(--home-nav-item-size) "left center right" auto "bottom-left bottom bottom-right" var(--home-nav-item-size)/var(--home-nav-item-size) auto var(--home-nav-item-size);place-content:center center;gap:var(--home-nav-gap);line-height:0}.home__nav-image{grid-area:center}.home__nav-image img{min-width:12rem;min-height:12rem;max-height:var(--home-nav-image-max-height)}.home__nav--2-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--2-items .home__nav-item-2{grid-area:bottom;place-self:start center}.home__nav--3-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-3{grid-area:bottom;place-self:start center}.home__nav--4-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--4-items .home__nav-item-2{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--4-items .home__nav-item-3{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--4-items .home__nav-item-4{grid-area:bottom;place-self:start center}.home__nav--5-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--5-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--5-items .home__nav-item-5{grid-area:bottom;place-self:start center}.home__nav--6-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--6-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--6-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--6-items .home__nav-item-6{grid-area:bottom;place-self:start center}.home__nav--7-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--7-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--7-items .home__nav-item-5{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-6{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-7{grid-area:bottom;place-self:start center}.home__nav--8-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--8-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--8-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--8-items .home__nav-item-6{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-7{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-8{grid-area:bottom;place-self:start center}.home__nav-link{color:var(--black);text-decoration:none;-webkit-animation:fade-in 1s ease-out;animation:fade-in 1s ease-in-out}.home__nav-letter--wave-up{-webkit-animation:wave-up 600ms ease-out;animation:wave-up 600ms ease-in-out}.home__nav-letter--wave-down{-webkit-animation:wave-down 600ms ease-out;animation:wave-down 600ms ease-in-out}footer{height:var(--footer-height);padding:var(--footer-vertical-padding) var(--footer-horizontal-padding)}.footer-bar{max-width:var(--content-max-width);margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--icon-size);height:var(--icon-size)}.footer-bar__social a svg{fill:var(--jet);width:100%;height:100%;-webkit-transition:fill 200ms ease-in-out;-o-transition:fill 200ms ease-in-out;transition:fill 200ms ease-in-out}.footer-bar__social a:hover svg,.footer-bar__social a:focus svg,.footer-bar__social a:active svg{fill:var(--black)}.footer-bar__social a+a{margin:0 0 0 1rem}.footer-bar__copyright{font-size:var(--small-text-font-size);margin:1rem 0 0 0}@media screen and (min-width: 48rem){.footer-bar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.footer-bar__social{order:2}.footer-bar__copyright{order:1;margin:0}}
|