:root{
--nopal-header-height:60px;
--nopal-header-text:#4C4B4B;
--nopal-header-hover:#2F2F2F;
--nopal-header-bg:#FFFFFF;
--nopal-sidebar-width:420px;
}
html{
scroll-behavior:smooth;
scroll-padding-top:var(--nopal-header-height);
}
body.nopal-menu-open{
overflow:hidden;
}
.nopal-header,
.nopal-header *{
box-sizing:border-box;
}
.nopal-header{
position:sticky;
top:0;
width:100%;
height:var(--nopal-header-height);
background:var(--nopal-header-bg);
border-bottom:1px solid rgba(0,0,0,.05);
box-shadow:0 3px 10px rgba(0,0,0,.035);
z-index:99990;
}
.nopal-header__inner{
width:calc(100% - 96px);
max-width:1800px;
height:100%;
margin-inline:auto;
display:grid;
align-items:center;
gap:32px;
} .nopal-header--home .nopal-header__inner{
grid-template-columns:max-content minmax(0,1fr) 44px;
} .nopal-header--internal .nopal-header__inner{
grid-template-columns:max-content minmax(0,1fr);
}
.nopal-header__brand{
min-width:0;
display:flex;
align-items:center;
gap:20px;
color:var(--nopal-header-text);
text-decoration:none;
}
.nopal-header__logo{
width:113.77px !important;
min-width:113.77px;
max-width:113.77px !important;
height:auto !important;
max-height:44px;
display:block !important;
object-fit:contain;
}
.nopal-header__logo-fallback{
font:800 42px/1 "Public Sans",sans-serif;
letter-spacing:-3px;
color:var(--nopal-header-text);
}
.nopal-header__tagline{
position:relative;
top:6px;
font:400 14px/1.1 "Libre Baskerville",serif;
color:var(--nopal-header-text);
white-space:nowrap;
}
.nopal-header__nav{
min-width:0;
height:100%;
display:flex;
justify-content:flex-end;
align-items:center;
gap:clamp(32px,3.1vw,64px);
}
.nopal-header__nav a{
position:relative;
height:100%;
display:inline-flex;
align-items:center;
color:var(--nopal-header-text);
text-decoration:none;
transition:color .25s ease;
}
.nopal-header__nav--home a{
font:600 17px/1 "Public Sans",sans-serif;
}
.nopal-header__nav--internal a{
font:400 16px/1 "Public Sans",sans-serif;
}
.nopal-header__nav a:hover,
.nopal-header__nav a:focus-visible{
color:var(--nopal-header-hover);
}
.nopal-header__nav a::after{
content:"";
position:absolute;
left:0;
right:100%;
bottom:12px;
height:1px;
background:currentColor;
transition:right .28s ease;
}
.nopal-header__nav a:hover::after,
.nopal-header__nav a:focus-visible::after{
right:0;
}
.nopal-header__toggle{
appearance:none !important;
width:44px !important;
height:44px !important;
padding:8px 2px !important;
display:flex;
align-items:center;
justify-content:center;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:var(--nopal-header-text) !important;
cursor:pointer;
}
.nopal-header--internal .nopal-header__toggle{
display:none;
}
.nopal-header__toggle:hover,
.nopal-header__toggle:focus,
.nopal-header__toggle:active{
background:transparent !important;
color:var(--nopal-header-hover) !important;
}
.nopal-header__toggle svg{
width:32px;
height:23px;
fill:currentColor;
overflow:visible;
}
.nopal-header__toggle .nopal-line{
transform-box:fill-box;
transform-origin:center;
transition:transform .32s ease,opacity .2s ease;
}
.nopal-header.is-open .nopal-line--top{
transform:translateY(12.75px) rotate(45deg);
}
.nopal-header.is-open .nopal-line--middle{
opacity:0;
}
.nopal-header.is-open .nopal-line--bottom{
transform:translateY(-12.75px) rotate(-45deg);
} .nopal-sidebar-overlay{
position:fixed;
inset:var(--nopal-header-height) 0 0;
background:rgba(0,0,0,.28);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .35s ease,visibility .35s ease;
z-index:99970;
}
.nopal-sidebar-overlay.is-visible{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.nopal-sidebar{
position:fixed;
top:var(--nopal-header-height);
right:0;
bottom:0;
width:min(var(--nopal-sidebar-width),92vw);
background:#fff;
transform:translateX(101%);
visibility:hidden;
transition:transform .4s cubic-bezier(.22,.61,.36,1),visibility .4s ease;
z-index:99980;
overflow-y:auto;
}
.nopal-sidebar.is-open{
transform:translateX(0);
visibility:visible;
}
.nopal-sidebar__inner{
min-height:100%;
padding:64px 48px 48px;
}
.nopal-sidebar__main{
display:none;
}
.nopal-sidebar__main-links{
display:flex;
flex-direction:column;
margin-bottom:44px;
}
.nopal-sidebar__main-links a{
padding:12px 0;
font:700 25px/1.2 "Public Sans",sans-serif;
color:var(--nopal-header-text);
text-decoration:none;
}
.nopal-sidebar--internal .nopal-sidebar__main-links a{
font-weight:400;
}
.nopal-sidebar__title{
margin:0 0 36px;
font:400 32px/1.2 "Libre Baskerville",serif;
color:var(--nopal-header-text);
}
.nopal-sidebar__projects{
display:flex;
flex-direction:column;
}
.nopal-sidebar__projects a{
min-height:62px;
padding:17px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
border-bottom:1px solid rgba(76,75,75,.26);
font:600 18px/1.2 "Public Sans",sans-serif;
color:var(--nopal-header-text);
text-decoration:none;
}
[id]{
scroll-margin-top:var(--nopal-header-height);
} @media(max-width:1399px){
.nopal-header__inner{
width:calc(100% - 64px);
gap:26px;
}
.nopal-header__brand{
gap:20px;
}
.nopal-header__nav{
gap:34px;
}
.nopal-header__nav--home a{
font-size:17px;
}
.nopal-header__nav--internal a{
font-size:15px;
}
} @media(max-width:1024px){
.nopal-header__inner{
width:calc(100% - 48px);
}
.nopal-header--home .nopal-header__inner{
grid-template-columns:max-content minmax(0,1fr) 44px;
}
.nopal-header--internal .nopal-header__inner{
grid-template-columns:max-content minmax(0,1fr);
}
.nopal-header__tagline{
font-size:14px;
}
.nopal-header__nav{
gap:24px;
}
.nopal-header__nav--home a{
font-size:14px;
}
.nopal-header__nav--internal a{
font-size:14px;
}
} @media(max-width:767px){
.nopal-header__inner,
.nopal-header--home .nopal-header__inner,
.nopal-header--internal .nopal-header__inner{
width:calc(100% - 40px);
grid-template-columns:minmax(0,1fr) 44px;
gap:18px;
}
.nopal-header__logo{
width:96px !important;
min-width:96px;
max-width:96px !important;
}
.nopal-header__tagline,
.nopal-header__nav{
display:none;
}
.nopal-header__toggle svg{
width:29px;
height:21px;
}
.nopal-header--internal .nopal-header__toggle{
display:flex;
}
.nopal-sidebar__main{
display:block;
}
.nopal-sidebar{
width:min(88vw,380px);
}
.nopal-sidebar__inner{
padding:44px 30px 36px;
} .nopal-sidebar--home .nopal-sidebar__title,
.nopal-sidebar--home .nopal-sidebar__projects{
display:none;
}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}
.nopal-sidebar,
.nopal-sidebar-overlay,
.nopal-header__toggle .nopal-line{
transition:none;
}
} .nopal-header__nav--home a{
font-weight:400!important;
font-size:16px!important;
}
.home .nopal-header__nav--home li:first-child{display:none!important;}