@charset 'UTF-8'; /* NOTES: All .ui-* classes are applied to for use in CSS styling. They are used to indicate the state of the webpage for CSS styling and JavaScript manipulation. It should be assumed that if there's any .ui-* classes, that JavaScript is enabled, as none are default classes on . All #ui-* IDs are NOT to be used for CSS targeting — they are only for use with ARIA and JavaScript! Thank you! ~Devan */ .ui-navigation-open { position: fixed; } /* Site Header */ .site-header { color: #ffffff; background: #000000; line-height: 1; display: block; box-sizing: border-box !important; transition: padding-right 0.2s cubic-bezier(0.6, 0, 0.75, 1); } .ui-javascript .site-header { display: flex; align-items: center; justify-content: space-between; position: -webkit-sticky; position: sticky; top: 0; z-index: 4; } .site-title { font-size: inherit; font-weight: bold; margin: 0; display: block; flex-grow: 1; } .site-title-link { color: inherit; min-width: 8mm; min-height: 8mm; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; padding: 16px; padding-left: 72px; display: block; box-sizing: border-box; overflow: hidden; } .site-logo { width: 48px; height: 42.56px; position: absolute; top: 4px; left: 8px; } .donation { color: #ffffff; background-color: #5F3891; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); padding: 7px 15px; border: 1px solid #5F3891; border-radius: 4px; flex-grow: 0; flex-shrink: 0; } .donation:hover { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); } .toggle-navigation { background: inherit; min-width: 8mm; min-height: 8mm; text-decoration: underline; white-space: nowrap; padding: 16px; border: 0; display: none; flex-shrink: 0; position: relative; } .ui-javascript .toggle-navigation { display: block; } /* Site Navigation */ .site-navigation { color: #ffffff; font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif; font-size: 16px; line-height: 1; display: block; } .ui-javascript .site-navigation { width: 100%; height: 100%; position: fixed; top: 0; right: 0; z-index: 16; pointer-events: none; } .ui-navigation-open .site-navigation { pointer-events: auto; } .ui-javascript .navigation-overlay { content: ''; background: #0A125D; width: 100%; height: 100%; opacity: 0; display: block; /*transition: opacity 0.2s cubic-bezier(0.75, 0, 0.6, 1);*/ /*will-change: opacity;*/ } .ui-navigation-open .navigation-overlay { opacity: 0.7; } .navigation-drawer { color: #ffffff; background: #000000; width: 100%; box-shadow: 0 4px 9px #000000; position: relative; z-index: 16; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .ui-javascript .navigation-drawer { width: calc(100% - 16mm); max-width: 360px; height: 100%; position: absolute; top: 0; right: 0; transform: translateX(104%); transition: transform 0.2s cubic-bezier(0.75, 0, 0.6, 1); } .ui-navigation-open .navigation-drawer { transform: translateX(0%); } .navigation-header { background: #000000; width: 100%; height: 48px; display: none; } .ui-javascript .navigation-header { display: flex; align-items: center; justify-content: flex-end; position: -webkit-sticky; position: sticky; top: 0; z-index: 4; } .navigation-title { width: 1px; height: 1px; font-size: inherit; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; margin: 0; padding: 16px; padding: 0; overflow: hidden; } /* Site Navigation Tracks */ .navigation-drawer .menu { margin: 0; padding: 0; list-style: none; } .track { margin: 0; padding: 0; } .track-header { font-size: 24px; font-weight: bold; margin: 0; padding: 12px; padding-left: 44px; display: block; position: relative; } .track-header::before { content: ''; background: #888888; width: 24px; height: 24px; border-radius: 50%; display: block; position: absolute; bottom: 12px; left: 12px; z-index: 1; } /* Site Navigation Stops */ .track > .menu { display: none; } .track.expanded > .menu { display: block; } .stop { width: 100%; margin: 0; padding: 0; list-style: none; position: relative; } .stop:hover { background: #444444; } .stop a { color: inherit; min-height: 8mm; text-decoration: none; padding: 12px; display: block; } .stop-title { text-decoration: underline; } .stop-cast { text-overflow: ellipsis; white-space: nowrap; font-size: 14px; padding-top: 2px; opacity: 0.7; display: none; overflow: hidden; } .track .stop { padding-left: 32px; } .track .stop::before { content: '●'; color: #000000; background: #888888; width: 12px; height: 100%; font-size: 16px; text-align: center; padding-top: 26px; position: absolute; top: -14px; left: 18px; } .track .stop.last::before { padding-bottom: 15px; border-radius: 0 0 99px 99px; } /* Colorations */ .track:nth-child(1) .track-header::before, .track:nth-child(1) .stop::before { color: #000000; background: #ff2200; } .track:nth-child(2) .track-header::before, .track:nth-child(2) .stop::before { color: #ffffff; background: #0044ff; } .track:nth-child(3) .track-header::before, .track:nth-child(3) .stop::before { color: #000000; background: #ffff00; } .track:nth-child(4) .track-header::before, .track:nth-child(4) .stop::before { color: #000000; background: #00cc66; } .track:nth-child(5) .track-header::before, .track:nth-child(5) .stop::before { background: #666666; } /* Tablet Portrait and Up */ @media screen and (min-width: 600px) { #priority .stop-cast { display: block; } #priority .track .stop.last::before { padding-bottom: 12px; } } /* Tablet Landscape and Up */ @media screen and (min-width: 900px) { .site-header, .ui-javascript .navigation-drawer { transition-duration: 0.3s; } } /* Desktop and Up */ @media screen and (min-width: 1200px) { .site-header, .ui-javascript .navigation-drawer { transition-duration: 0.4s; } #priority .site-header { padding-right: 360px; } #priority .toggle-navigation { display: none; } #priority .site-navigation { width: 360px; height: 100%; position: fixed; top: 0; right: 0; pointer-events: auto; } #priority .site-navigation::before { display: none; } #priority .navigation-drawer { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; display: block; box-shadow: none; transform: translateX(0%); } #priority .navigation-header { display: block; position: relative; top: -100%; } }