-
Notifications
You must be signed in to change notification settings - Fork 0
/
headerMenuMain.css
1 lines (1 loc) · 7.7 KB
/
headerMenuMain.css
1
:root{--header-height:80px;--menu-side-padding:1rem;--menu-vert-padding:.5rem;--latest-text-bg-color:rgba(35,35,35,0.5);--latest-text-bg-hover-color:rgba(35,35,35,0.75);--desktop-menu-width:9.5rem;--desktop-menu-height:20rem;--desktop-body-width:calc(100% - var(--desktop-menu-width));--desktop-hor-padding:2rem;--background-color:#2e2e2e;--main-bottom-padding:.5rem;--header-color:#00c6c6;--scrollbar-color:rgba(0,198,198,0.2);--img-text:#91fff0;--img-text-size:2em;--hover-transition:.25s;--button-size:calc(var(--header-height) * 0.5);--burger-bar-length:var(--button-size);--burger-bar-height:calc(var(--burger-bar-length) * 0.1);--burger-offset:4vw;--x-bar-length:56.6px;--logo-size-mobile:70px;--logo-size-desktop:40px}*{font-family:Arial,Helvetica,sans-serif;scrollbar-width:auto;scrollbar-color:var(--scrollbar-color) transparent}body{background-color:var(--background-color);overflow-x:hidden;overflow-y:scroll}@media (min-width: 1025px){body{display:flex;flex-direction:column;height:auto;overflow-y:scroll;overflow-x:hide}}a:link,a:visited,a:hover /*,a:active*/{text-decoration:none}ol{list-style-type:decimal;list-style-position:inside;margin-bottom:3em}ol>li{margin-bottom:10px}ol>li::marker{font-weight:700}.img-text-box{color:var(--img-text);padding:.5em;background-color:var(--latest-text-bg-color);pointer-events:none}.heading,main .statement .title{font-size:2.5rem;font-weight:400;padding:1em 0;margin-bottom:0}.sub-heading{font-size:1.3rem;font-weight:550;padding-bottom:1em;margin-bottom:0}.mag-icon{margin:auto;position:relative;transform:translateY(-15%);transition-duration:var(--hover-transition)}.mag-glass{height:20px;width:20px;border-radius:50%;border:4px var(--img-text) solid;background-color:transparent}.mag-handle{position:absolute;bottom:0;left:0;width:15px;height:5px;transform-origin:0;transform:translateX(100%) rotate(45deg);background-color:var(--img-text)}.tiles-header-container{color:#fff;display:flex;justify-content:space-between;align-items:center;padding:3em 0}.tiles-header-container h2{font-size:2.2em;line-height:1}.tiles-header-container a{font-size:1.5em;line-height:1;text-decoration:underline;color:#fff}.tiles-container{display:flex;flex-wrap:wrap;gap:3em}.tile{flex-basis:100%;position:relative}.tile img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}.tile.landscape img{aspect-ratio:3/2}.tile-more{position:absolute;width:100%;height:100%;transition-duration:var(--hover-transition);color:transparent;display:flex;align-items:center;pointer-events:none}.tile-more-text{flex-basis:100%;text-align:center;font-size:3em}.tile:hover .tile-more{background-color:var(--latest-text-bg-color);color:var(--img-text)}.tile-mag{transform:translate(-20%,-40%) scale(140%);display:inline-block}.tile-mag .mag-glass{border-color:transparent;color:transparent;transition-duration:var(--hover-transition)}.tile-mag .mag-handle{background-color:transparent;transition-duration:var(--hover-transition)}.tile:hover .mag-glass{border-color:var(--img-text)}.tile:hover .mag-handle{background-color:var(--img-text)}.tile-text{position:absolute;bottom:0;left:0;font-size:var(--img-text-size)}.tile-section{display:block;margin-top:0;width:90%;margin-left:5%}@media (min-width:550px){.tiles-container{gap:0;justify-content:flex-start}.tile{flex-basis:calc(50% - 3%);margin-right:6%;margin-bottom:6%}.tile:nth-child(2n){margin-right:0}}@media (min-width:1025px){.tile-section{width:100%;margin-left:0}.tile{flex-basis:calc(33.333% - 3%);margin-right:4.5%;margin-bottom:4.5%}.tile:nth-child(2n){margin-right:4.5%}.tile:nth-child(3n){margin-right:0}}header{position:fixed;z-index:91;background-image:linear-gradient(90deg,var(--header-color),transparent);color:#000;font-size:1.3rem;height:var(--header-height);align-items:center;width:100%}.header-content{position:relative;display:flex;margin:calc(var(--header-height) * 0.17);column-gap:calc(var(--header-height) * 0.17);padding:0}.header-words{display:flex;flex-direction:column;color:#000;transition-duration:var(--hover-transition)}.header-words:link,.header-words:visited /*,a:active*/{text-decoration:none;color:#000}.header-words:hover{color:#fff}.menu-button{position:relative;cursor:pointer;background-color:transparent;border-color:transparent}.header-title{font-size:1.2em;line-height:30px}@media (min-width: 1025px){header{position:relative;padding-left:0;width:100%}.header-content{margin-left:var(--menu-side-padding)}}.hamburger{margin:0;width:var(--button-size);height:var(--button-size);position:relative;justify-content:space-between;z-index:inherit}.hamburger .bar{padding:0;width:100%;height:var(--burger-bar-height);background-color:#000;display:block;transition:all .35s ease-in-out;position:absolute}.bar1{top:0}.bar2,.bar3{top:calc(var(--burger-bar-length) * 0.5 - var(--burger-bar-height) * 0.5)}.bar4{bottom:0}.mobile-menu-open .bar1,.mobile-menu-open .bar4 /*,.mobile-menu-open .bar2,.mobile-menu-open .bar3 */{width:var(--x-bar-length)}.mobile-menu-open .bar1{transform:rotate(45deg);transform-origin:5%}.mobile-menu-open .bar2{transform-origin:50%;transform:scaleX(50%);background-color:transparent}.mobile-menu-open .bar3{transform-origin:50%;transform:scaleX(50%);background-color:transparent}.mobile-menu-open .bar4{transform:rotate(-45deg);transform-origin:5%}.menu{background-image:linear-gradient(to right,teal,rgba(46,46,46,0.85));position:fixed;top:var(--header-height);left:0;z-index:0;flex-direction:column;width:100vw;height:calc(100dvh - var(--header-height));font-size:clamp(0.1rem,2.0rem,2.0rem);display:none}.menu-item{display:flex;flex-basis:25%}.menu-item a{color:#fff;margin:auto}.menu-visible{display:flex;z-index:99}@media (min-aspect-ratio:11){.menu{flex-direction:column;flex-wrap:wrap}.menu-item{flex-basis:50%}}@media (min-width: 1025px){.menu-main-container{display:flex;flex-direction:row}.menu{position:sticky;top:0;width:var(--desktop-menu-width);height:var(--desktop-menu-height);font-size:25px;line-height:35px;display:flex;flex-wrap:nowrap;padding:var(--menu-vert-padding) var(--menu-side-padding)}.menu a{margin:auto auto auto 0}.menu-button{display:none}}.no-scroll{height:100%;overflow-y:hidden}main{width:calc(100vw - (100vw - 100%));display:block;padding-top:var(--header-height);padding-bottom:var(--main-bottom-padding);color:#fff;overflow-x:hide;overflow-y:auto}@media (min-width: 1025px){main{width:var(--desktop-body-width);padding:0 var(--desktop-hor-padding) var(--main-bottom-padding) 0}}footer{margin:4em 0;display:flex;flex-direction:column;row-gap:4rem;color:#fff;font-style:italic;text-align:center}.copyright,footer a{display:block;margin:auto}.copyright{font-size:1rem}footer a{color:var(--header-color);font-size:1.5em}footer a:any-link{text-decoration:underline}.centered{text-align:center}.ig-logo{position:relative;width:var(--logo-size-mobile);height:var(--logo-size-mobile);border:calc(var(--logo-size-mobile) * 0.05) var(--header-color) solid;border-radius:35%;background-color:transparent;margin:auto}.ig-logo-lense{position:absolute;width:calc(var(--logo-size-mobile) * 0.5);height:calc(var(--logo-size-mobile) * 0.5);border:calc(var(--logo-size-mobile) * 0.05) var(--header-color) solid;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.ig-logo-flash{position:absolute;width:calc(var(--logo-size-mobile) * 0.05);height:calc(var(--logo-size-mobile) * 0.05);border:calc(var(--logo-size-mobile) * 0.04) var(--header-color) solid;border-radius:50%;left:80%;top:20%;transform:translate(-50%,-50%)}@media (min-width: 1025px){footer{display:flex;flex-direction:row;justify-content:space-between;color:#fff;margin:6em 0 2em}footer a{display:block;color:var(--header-color)}footer a:any-link{text-decoration:underline}.ig-logo{width:var(--logo-size-desktop);height:var(--logo-size-desktop)}.ig-logo-lense{width:calc(var(--logo-size-desktop) * 0.5);height:calc(var(--logo-size-desktop) * 0.5)}}