653 lines
12 KiB
Plaintext
653 lines
12 KiB
Plaintext
|
|
/*
|
|
Put your custom overlay styles in here
|
|
You can use your northpass color palette in this file
|
|
|
|
{{ color_palette.button_font_color }}
|
|
{{ color_palette.button_color }}
|
|
{{ color_palette.button_hover_color }}
|
|
{{ color_palette.header_font_color }}
|
|
{{ color_palette.header_font_hover_color }}
|
|
{{ color_palette.header_color }}
|
|
*/
|
|
|
|
/* FONT IMPORT */
|
|
@font-face {
|
|
font-family: "EngelVoelkersHead";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersHead_W_Rg.woff") format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EngelVoelkersHead";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersHead_W_Bd.woff") format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EngelVoelkersText";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersText_W_Rg.woff") format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EngelVoelkersText";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersText_W_Lt.woff") format('woff');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EngelVoelkersText";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersText_W_BD.woff") format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
|
|
{% comment %}
|
|
Styles for course.html.liquid template
|
|
{% endcomment %}
|
|
* {
|
|
color: #0d0d0d !important;
|
|
|
|
}
|
|
|
|
html {
|
|
font-family: "EngelVoelkersText", Arial, sans-serif;
|
|
color: #0d0d0d;
|
|
font-size:16px;
|
|
}
|
|
|
|
body {
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-y: scroll;
|
|
margin: 0 0 5% 0%;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-family: "EngelVoelkersHead", Georgia, serif;
|
|
}
|
|
|
|
h3, h4, h5 {
|
|
font-family: "EngelVoelkersText", Arial, sans-serif;
|
|
}
|
|
|
|
.header-modify {
|
|
width: 1440px;
|
|
}
|
|
.uk-container-mod {
|
|
}
|
|
|
|
{% comment %}
|
|
Header Nav Styles
|
|
{% endcomment %}
|
|
.uk-navbar-nav{
|
|
float: none ;
|
|
display: flex;
|
|
|
|
}
|
|
.course-top-nav li{
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content:flex-end;
|
|
list-style: none;
|
|
width: 100%;
|
|
font-size: 18px;
|
|
letter-spacing: .05px;
|
|
list-style: none;
|
|
height: auto;
|
|
|
|
}
|
|
.course-top-nav li a {
|
|
text-decoration:none;
|
|
color: #444444;
|
|
letter-spacing: 0.01px;
|
|
font-size: 18px;
|
|
font-weight:bolder;
|
|
list-style: none;
|
|
height: auto;
|
|
line-height:30px;
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
|
|
.current::after {
|
|
content: "";
|
|
bottom: 2px;
|
|
height: 2px;
|
|
background: red;
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
@media all and (max-width: 879px) {
|
|
.resize-nav li{
|
|
flex-flow: column wrap !important;
|
|
height: auto;
|
|
}
|
|
.resize-nav li a{
|
|
justify-content:center;
|
|
text-align: center;
|
|
width: auto;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.course-top-nav li a {
|
|
line-height: 35px;
|
|
}
|
|
|
|
.current::after{
|
|
content: "";
|
|
bottom: 2px;
|
|
height: 2px;
|
|
background: red;
|
|
display: flex;
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media all and (max-width: 500px) {
|
|
.resize-nav {
|
|
height: auto;
|
|
|
|
|
|
}
|
|
.resize-nav a {
|
|
text-align: center;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
.course-top-nav a:hover {
|
|
-ms-transform: translateY(-2px);
|
|
-webkit-transform: translateY(-2px);
|
|
transform: translateY(-2px);
|
|
transition:.5s;
|
|
}
|
|
|
|
.uk-border {
|
|
border: none !important;
|
|
}
|
|
.uk-border-bottom {
|
|
border-bottom:none !important;
|
|
}
|
|
|
|
|
|
.my-course-title{
|
|
letter-spacing: .05px;
|
|
font-weight:bolder;
|
|
color: #444444;
|
|
letter-spacing: 0.01px;
|
|
height:5%;
|
|
}
|
|
|
|
.space-title {
|
|
display:flex;
|
|
}
|
|
.uk-grid-modify {
|
|
width: 1100px;
|
|
}
|
|
.search-box {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
|
|
{% comment %} .uk-margin-large-bottom .course-time p{
|
|
color:red;
|
|
margin-bottom: 0px;
|
|
} {% endcomment %}
|
|
|
|
|
|
.course-desc-clamp {
|
|
margin-top:4% !important;
|
|
display: -webkit-box !important;
|
|
-webkit-box-orient: vertical !important;
|
|
-webkit-line-clamp: 3 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
|
|
.course-desc-clamp p span{
|
|
color: #444444 !important;
|
|
|
|
}
|
|
|
|
.uk-panel-teaser-mod {
|
|
position: relative !important;
|
|
display: inline-block !important;
|
|
transition: transform 150ms ease-in-out !important;
|
|
color: white;
|
|
|
|
}
|
|
.uk-panel-teaser-mod img {
|
|
display: block !important;
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
.uk-panel-teaser-mod svg{
|
|
position: absolute !important;
|
|
bottom: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
{% comment %}
|
|
Styles for percentage circle within Course image element
|
|
{% endcomment %}
|
|
.percent-circle {
|
|
display: block !important;
|
|
margin: 10px auto !important;
|
|
max-width: 20% !important;
|
|
max-height: 20% !important;
|
|
}
|
|
.circle-bg {
|
|
fill: white;
|
|
stroke: #eee;
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
.circle {
|
|
fill: none;
|
|
stroke-width: 2.2;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.percent-circle.red .circle {
|
|
stroke: rgb(210,4,0) ;
|
|
}
|
|
|
|
.percentage {
|
|
fill: #666;
|
|
font-size: .70rem !important;
|
|
color: black !important;
|
|
text-anchor: middle !important;
|
|
}
|
|
|
|
{% comment %}
|
|
Homepage
|
|
{% endcomment %}
|
|
.uk-heading-mod {
|
|
font-stretch: normal;
|
|
font-style: normal;
|
|
letter-spacing: 0.02px;
|
|
}
|
|
.uk-subheading-mod {
|
|
font-size: 20px;
|
|
max-width: 735px;
|
|
margin: 0 auto;
|
|
}
|
|
.school-hero-mod {
|
|
max-width: 1044px;
|
|
max-height: 400px;
|
|
margin: 0 auto 0 auto;
|
|
display:block;
|
|
}
|
|
|
|
.left-margin-h2 {
|
|
margin: 0 auto 0 auto;
|
|
padding-left:
|
|
}
|
|
.uk-text-center-mod {
|
|
max-width: 800px;
|
|
font-size: 21px;
|
|
display:block;
|
|
margin: 0 auto 0 auto;
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
.uk-heading-large {
|
|
font-size: 25px;
|
|
line-height: auto;
|
|
}
|
|
.uk-text-center-mod {
|
|
max-width: 450px;
|
|
font-size: 14x;
|
|
display:block;
|
|
margin: 0 auto 0 auto;
|
|
}
|
|
|
|
}
|
|
|
|
{% comment %}
|
|
Styles for Clock SVG next to Estimated Course Completion Time
|
|
{% endcomment %}
|
|
.clock-container {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content:flex-start;
|
|
align-items: flex-end;
|
|
background: white;
|
|
color: #E60000 !important;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.clock-container svg{
|
|
display: flex;
|
|
width: 7%;
|
|
margin-right: 2%;
|
|
background: white;
|
|
}
|
|
|
|
{% comment %} .svg-time-position.clock-container svg {
|
|
display:flex;
|
|
align-items: flex-end;
|
|
} {% endcomment %}
|
|
|
|
.school-website-course-tile .uk-panel-box {
|
|
display: grid;
|
|
}
|
|
|
|
#face { stroke-width: 3px; stroke: red; fill:white;}
|
|
#hour, #min {
|
|
stroke-width: 2.2px;
|
|
fill: rgb(213,20,16);
|
|
stroke: rgb(213,20,16);
|
|
}
|
|
#clock, #red {
|
|
width:20%;
|
|
}
|
|
|
|
|
|
{% comment %}
|
|
Course Catalog
|
|
{% endcomment %}
|
|
|
|
.header-image img{
|
|
margin: 0 auto;
|
|
display:block;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.category-chosen {
|
|
background: rgb(255,255,255) !important;
|
|
color: #E60000 !important;
|
|
padding-left: 5px;
|
|
font-size: 16px;
|
|
text-align: left;
|
|
border-radius: 6px;
|
|
border: 1px solid #E60000 !important;
|
|
}
|
|
|
|
@media screen and (max-width: 830px) {
|
|
.category-chosen {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
.uk-list-mod li a{
|
|
line-height: 35px;
|
|
width: 85%;
|
|
}
|
|
|
|
@media (min-width: 768px)
|
|
.uk-list-mod {
|
|
width: 20%;
|
|
}
|
|
|
|
.h3-size-mod {
|
|
max-width: 160px;
|
|
}
|
|
{% comment %}
|
|
Learning Path Style
|
|
{% endcomment %}
|
|
|
|
.go-path-style {
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
overflow: visible;
|
|
font: inherit;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
padding: 0 25px;
|
|
vertical-align: middle;
|
|
line-height: 39px;
|
|
min-height: 30px;
|
|
font-size: 18px;
|
|
font-weight:bolder;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
transition: background-color 100ms ease-in;
|
|
border: 1px solid #068ca8;
|
|
border-color: #e60000 !important;
|
|
color: #ffffff !important;
|
|
background: #e60000 !important;
|
|
|
|
}
|
|
|
|
|
|
{% comment %}
|
|
.go-path-style {
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
overflow: visible;
|
|
font: inherit;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
padding: 0 20px;
|
|
vertical-align: middle;
|
|
line-height: 39px;
|
|
min-height: 30px;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
transition: background-color 100ms ease-in;
|
|
border: 1px solid #068ca8;
|
|
border-color: #d20400 !important;
|
|
color: #ffffff !important;
|
|
background: #d20400 !important;
|
|
|
|
}
|
|
{% endcomment %}
|
|
|
|
{% comment %}
|
|
My Dashboard Styles
|
|
{% endcomment %}
|
|
|
|
.discover-events-button {
|
|
background: rgb(210,4,0) !important;
|
|
color: rgb(255,255,255) !important;
|
|
padding: 0 25px;
|
|
font-size: 18px;
|
|
font-weight:bolder;
|
|
border-radius: 6px;
|
|
border: 1px solid #eee !important;
|
|
}
|
|
|
|
|
|
|
|
{% comment %}
|
|
Footer Styles
|
|
{% endcomment %}
|
|
|
|
.footer-container {
|
|
border-top: 1px solid #e4e4e4;
|
|
}
|
|
|
|
.footer-container .footer-content {
|
|
padding-top: 50px;
|
|
display: flex;
|
|
-webkit-box-align: baseline;
|
|
align-items: baseline;
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-between;
|
|
font-weight: 300;
|
|
flex-wrap: wrap;
|
|
margin: 0px auto;
|
|
width: 95%;
|
|
height: 100%;
|
|
}
|
|
|
|
.group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
-webkit-box-align: baseline;
|
|
align-items: baseline;
|
|
margin: 0 2.5% 0 2.5%;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 830px)
|
|
.footer-container .footer-content .group {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
padding: 10px 0 10px 0;
|
|
}
|
|
|
|
.group img{
|
|
display: flex;
|
|
height: 45px;
|
|
}
|
|
|
|
@media all and (max-width: 830px) {
|
|
.group {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.copyright {
|
|
font-size: 14px !important;
|
|
display:flex;
|
|
}
|
|
@media all and (max-width: 830px) {
|
|
.copyright {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.footer-container img {
|
|
border-style:none;
|
|
}
|
|
|
|
.ev-links {
|
|
display:flex;
|
|
justify-content: space-between !important;
|
|
margin: 0 4% 0 4%;
|
|
width:400px;
|
|
}
|
|
|
|
.ev-links a {
|
|
margin: 0 10% 0 10%;
|
|
justify-content: space-between
|
|
|
|
}
|
|
|
|
@media all and (max-width: 830px) {
|
|
.ev-links a {
|
|
margin-top: 18px;
|
|
}
|
|
}
|
|
|
|
.sk-branding-banner {
|
|
-webkit-box-align: none;
|
|
align-items: none;
|
|
background-color: none;
|
|
display: none;
|
|
height: none;
|
|
-webkit-box-pack: none;
|
|
justify-content: none;
|
|
}
|
|
|
|
.sk-branding-banner .sk-powered-button {
|
|
display:none;
|
|
height: 0px;
|
|
width: 0px;
|
|
}
|
|
|
|
.sk-branding-banner.uk-button.uk-button-link.uk-text-small .sk-powered-button{
|
|
display:none !important;
|
|
height: 0px;
|
|
width:0px;
|
|
line-height: 0px !important;
|
|
font-size: 0px !important;
|
|
}
|
|
|
|
{% comment %}
|
|
Events Page
|
|
{% endcomment %}
|
|
.stopwatch-color {
|
|
color: rgb(210,4,0) !important;
|
|
}
|
|
|
|
|
|
.view-button {
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
line-height: 28px;
|
|
margin-left: 4%;
|
|
}
|
|
|
|
|
|
|
|
.apply-button {
|
|
border-radius: 6px;
|
|
font-size: 18px;
|
|
font-weight:bolder;
|
|
padding: 0 25px;
|
|
}
|
|
|
|
{% comment %}
|
|
Styles for Events List Segement in My Dashboard
|
|
{% endcomment %}
|
|
|
|
.event-name-highlighted {
|
|
font-size: 16px;
|
|
list-style: none;
|
|
line-height: 30px;
|
|
color: rgb(210,4,0) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.event-list-item__title {
|
|
font-size: 16px;
|
|
list-style: none;
|
|
line-height: 30px;
|
|
color: rgb(210,4,0) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
.event-list-item__actions {
|
|
font-weight:550;
|
|
}
|
|
|
|
.iZnTPu {
|
|
font: white !important;
|
|
display:none;
|
|
}
|
|
|
|
.uk-float-right {
|
|
float: none;
|
|
}
|
|
|
|
.search-box {
|
|
display:flex;
|
|
justify-content: flex-end;
|
|
} |