/// /// Dimension by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// /* Header */ #header { @include vendor('display', 'flex'); @include vendor('flex-direction', 'column'); @include vendor('align-items', 'center'); @include vendor('transition', ( 'transform #{_duration(article)} ease-in-out', 'filter #{_duration(article)} ease-in-out', 'opacity #{_duration(article)} ease-in-out', )); background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); max-width: 100%; text-align: center; > * { @include vendor('transition', 'opacity #{_duration(article)} ease-in-out'); position: relative; margin-top: 3.5rem; &:before { content: ''; display: block; position: absolute; top: calc(-3.5rem - 1px); left: calc(50% - #{_size(border-width) * 1}); width: _size(border-width); height: calc(3.5rem + 1px); background: _palette(border); } } > :first-child { margin-top: 0; &:before { display: none; } } .logo { width: 5.5rem; height: 5.5rem; line-height: 5.5rem; border: solid _size(border-width) _palette(border); border-radius: 100%; .icon { &:before { font-size: 2rem; } } } .content { border-style: solid; border-color: _palette(border); border-top-width: _size(border-width); border-bottom-width: _size(border-width); max-width: 100%; .inner { @include vendor('transition', ( 'max-height #{_duration(intro)} ease', 'padding #{_duration(intro)} ease', 'opacity #{_duration(article)} ease-in-out' )); @include vendor('transition-delay', '0.25s'); padding: 3rem 2rem; max-height: 40rem; overflow: hidden; > :last-child { margin-bottom: 0; } } p { text-transform: uppercase; letter-spacing: _font(letter-spacing); font-size: 0.8rem; line-height: 2; } } nav { ul { @include vendor('display', 'flex'); margin-bottom: 0; list-style: none; padding-left: 0; border: solid _size(border-width) _palette(border); border-radius: _size(border-radius); li { padding-left: 0; border-left: solid _size(border-width) _palette(border); &:first-child { border-left: 0; } a { display: block; min-width: 7.5rem; height: 2.75rem; line-height: 2.75rem; padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing)); text-transform: uppercase; letter-spacing: _font(letter-spacing); font-size: 0.8rem; border-bottom: 0; &:hover { background-color: _palette(border-bg); } &:active { background-color: _palette(border-bg-alt); } } } } &.use-middle { &:after { content: ''; display: block; position: absolute; top: 0; left: calc(50% - #{_size(border-width) * 1}); width: _size(border-width); height: 100%; background: _palette(border); } ul { li { &.is-middle { border-left: 0; } } } } } body.is-article-visible & { @include vendor('transform', 'scale(0.95)'); @include vendor('filter', 'blur(0.1rem)'); opacity: 0; } body.is-preload & { > * { opacity: 0; } @include vendor('filter', 'blur(0.125rem)'); .content { .inner { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } } } @include breakpoint('<=medium') { .content { p { br { display: none; } } } } @include breakpoint('<=small') { > * { margin-top: 2rem; &:before { top: calc(-2rem - 1px); height: calc(2rem + 1px); } } .logo { width: 4.75rem; height: 4.75rem; line-height: 4.75rem; .icon { &:before { font-size: 1.75rem; } } } .content { .inner { padding: 2.5rem 1rem; } p { line-height: 1.875; } } } @include breakpoint('<=xsmall') { padding: 1.5rem 0; .content { .inner { padding: 2.5rem 0; } } nav { ul { @include vendor('flex-direction', 'column'); min-width: 10rem; max-width: 100%; li { border-left: 0; border-top: solid _size(border-width) _palette(border); &:first-child { border-top: 0; } a { height: 3rem; line-height: 3rem; min-width: 0; width: 100%; } } } &.use-middle { &:after { display: none; } } } } }