3 /// html5up.net | @ajlkn
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
9 @include keyframes('reveal-header') {
10 0% { top: -4em; opacity: 0; }
11 100% { top: 0; opacity: 1; }
15 @include vendor('display', 'flex');
16 background-color: _palette_light(bg-alt);
17 box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);
19 font-weight: _font(weight-bold);
22 letter-spacing: _font(letter-spacing-alt);
26 text-transform: uppercase;
29 z-index: _misc(z-index-base);
30 @media screen and (prefers-color-scheme: dark) {
31 background-color: _palette_dark(bg-alt);
36 display: inline-block;
43 @include vendor('transition', (
44 'background-color #{_duration(transition)} ease-in-out',
45 'color #{_duration(transition)} ease-in-out'
47 background-color: _palette_light(fg-bold);
48 color: _palette_light(bg);
49 display: inline-block;
51 margin-right: 0.325em;
52 padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);
53 @media screen and (prefers-color-scheme: dark) {
54 background-color: _palette_dark(fg-bold);
55 color: _palette_dark(bg);
61 background-color: _palette_light(highlight);
62 @media screen and (prefers-color-scheme: dark) {
63 background-color: _palette_dark(highlight);
70 background-color: desaturate(darken(_palette_light(highlight), 15), 5);
71 @media screen and (prefers-color-scheme: dark) {
72 background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
79 @include vendor('display', 'flex');
80 @include vendor('justify-content', 'flex-end');
81 @include vendor('flex-grow', '1');
93 vertical-align: middle;
100 padding-right: 3.325em !important;
103 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
104 background-position: center;
105 background-repeat: no-repeat;
106 background-size: 24px 32px;
113 vertical-align: middle;
115 @media screen and (prefers-color-scheme: dark) {
116 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
121 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
122 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
125 @media screen and (prefers-color-scheme: dark) {
126 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
137 padding-right: 3.875em !important;
148 @include vendor('animation', 'reveal-header 0.35s ease');
152 @include vendor('transition', 'opacity #{_duration(banner)} ease');
153 @include vendor('transition-delay', '0.75s');
154 @include vendor('animation', 'none');
155 background-color: transparent;
159 &.style1 { .logo { strong { color: _palette_light(accent1); } } }
160 &.style2 { .logo { strong { color: _palette_light(accent2); } } }
161 &.style3 { .logo { strong { color: _palette_light(accent3); } } }
162 &.style4 { .logo { strong { color: _palette_light(accent4); } } }
163 &.style5 { .logo { strong { color: _palette_light(accent5); } } }
164 &.style6 { .logo { strong { color: _palette_light(accent6); } } }
165 @media screen and (prefers-color-scheme: dark) {
166 &.style1 { .logo { strong { color: _palette_dark(accent1); } } }
167 &.style2 { .logo { strong { color: _palette_dark(accent2); } } }
168 &.style3 { .logo { strong { color: _palette_dark(accent3); } } }
169 &.style4 { .logo { strong { color: _palette_dark(accent4); } } }
170 &.style5 { .logo { strong { color: _palette_dark(accent5); } } }
171 &.style6 { .logo { strong { color: _palette_dark(accent6); } } }
181 @include breakpoint('<=xlarge') {
185 padding-right: 3.75em !important;
188 padding-right: 4.25em !important;
195 @include breakpoint('<=large') {
199 padding-right: 4em !important;
202 padding-right: 4.5em !important;
209 @include breakpoint('<=small') {
226 padding-right: 3.25em !important;
233 padding-right: 4em !important;
244 @include breakpoint('<=xsmall') {
255 padding-right: 0 !important;