// External libraries @import "breakpoint"; // Fonts /* $sans-font: droid-sans, sans-serif; $serif-font: droid-serif, serif; */ $sans-font: "Source Sans Pro", sans-serif; $serif-font: "Source Serif Pro", serif; // Colours $white: #ffffff; $white-90: rgba(255, 255, 255, 0.9); $black: #000000; $black-50: rgba(0, 0, 0, 0.5); $grey-lt-65: rgba(200, 200, 200, 0.65); $grey-vlt: #979797; $grey-lt: #646367; $grey-vlt2: #c8c8c8; $grey-dk: #333333; $grey-dk-50: rgba(51, 51, 51, 0.5); $grey: #424242; $grey-blue: #323138; $grey-65: rgba(51, 51, 51, 0.65); $green: #5ac4c8; $green2: #04d8be; $blue-quiz: #133368; $green-quiz: #17cecb; $teal: #15ccad; $teal-dk: #38a1a7; $teal-md: #3fabb0; $teal-83: rgba(21, 204, 173, 0.83); $teal-gradient: linear-gradient(180deg, #2eb8c0, #00d7c9); $teal-gradient-25: linear-gradient( 180deg, rgba(46, 184, 192, 0.25), rgba(0, 215, 201, 0.25) ); $teal-gradient-reverse: linear-gradient(0deg, #2eb8c0, #00d7c9); $teal-gradient-reverse-25: linear-gradient( 0deg, rgba(46, 184, 192, 0.25), rgba(0, 215, 201, 0.25) ); //Phase 2 colors $color-video-player-default: #7b796a; $color-heading: #232628; $color-body: #4b4b50; $color-normal: $color-body; $color-hover: #15ccad; $color-active: #15ccc8; $color-link: #00d3b6; $color-button-normal: $color-hover; $color-button-hover: $color-active; $color-button-active: #2eb8c0; $color-button-inactive: #e1e1e1; $color-reflection-background: #caeef0; $gradient-download-hover: linear-gradient(180deg, $teal-dk, $color-active); // Breakpoints $tablet: (max-width 1279px); $mobile: (max-width 786px); // Mixins @mixin button { background: $color-button-normal; border-radius: 20px; box-shadow: 1px 1px 2px $grey-vlt2; color: white; cursor: pointer; display: inline-flex; font-size: 16px; font-weight: 700; height: 40px; letter-spacing: 1px; line-height: 20px; outline: none; padding: 0 23px; text-transform: uppercase; &::before { display: none; } .toga-icon { display: none; } &:hover { background: $color-button-hover; box-shadow: 1px 1px 2px $grey-vlt2; } &:active { background: $color-button-active; box-shadow: 1px 1px 2px $grey-vlt2; } @include breakpoint($mobile) { border-radius: 16px; font-size: 13px; height: 32px; letter-spacing: 0.81px; line-height: 16px; padding: 0 18px; } } @mixin icon-states { &:hover { filter: brightness(0) saturate(100%) invert(53%) sepia(90%) saturate(393%) hue-rotate(120deg) brightness(102%) contrast(94%); } &:active { filter: brightness(0) saturate(100%) invert(83%) sepia(42%) saturate(6664%) hue-rotate(132deg) brightness(101%) contrast(83%); } } @mixin icon-before-states { &:hover { &::before { filter: brightness(0) saturate(100%) invert(53%) sepia(90%) saturate(393%) hue-rotate(120deg) brightness(102%) contrast(94%); } } &:active { &::before { filter: brightness(0) saturate(100%) invert(83%) sepia(42%) saturate(6664%) hue-rotate(132deg) brightness(101%) contrast(83%); } } } @mixin ol-nested { .ol-nested { counter-reset: li; margin-top: 0 !important; padding-left: 20px !important; li { counter-increment: nested-counter; display: block; margin-bottom: 0; &::before { content: counter(nested-counter, decimal) "."; font-size: 18px; font-weight: 400; left: -20px; line-height: 24px; width: auto; } p { color: $teal-dk; font-size: 18px; font-weight: 400; line-height: 24px; margin-bottom: 12px; } } } } @mixin ul-nested { .ul-nested { counter-reset: li; margin-top: 0 !important; padding-left: 20px !important; li { display: block; margin-bottom: 0; &::before { background: $teal-dk; border-radius: 50%; content: ""; height: 10px; left: -18px; position: absolute; height: 5px; top: 10px; width: 5px; } p { color: $teal-dk; font-size: 18px; font-weight: 400; line-height: 24px; margin-bottom: 12px; } } } } @mixin letter-icon { color: $teal-dk; font-size: 100px; font-weight: 200; left: -110px; line-height: 70px; text-align: center; @include breakpoint($mobile) { font-size: 50px; left: -70px; line-height: 42px; width: 70px; } } // CSS body, button, input, textarea { font-family: $sans-font; } .hidden { display: none; } .course-player__container { grid-template-rows: 100% !important; grid-template-areas: "content" !important; } .course-player__branding-badge { display: none; } header.course-player__top-bar { display: none; } .course-player { height: 100vh; @include breakpoint($tablet) { .course-player__left-drawer { top: 50px; } .course-player__content { &::after { top: 50px; } } } .course-player__left-drawer { @media screen and (max-height: 900px) and (min-width: 1280px) { .course-player__top-bar__branding, .top-bar__dashboard-link { display: none; } .course-progress__inner-container { padding: 1rem; } } } .course-player__content-header { border-bottom: 1px solid $color-body; min-height: 50px; padding: 12px 20px 13px; position: relative; @include breakpoint($mobile) { min-height: 48px; padding: 10px 15px 13px; } .top-bar__dashboard-link { left: 30px; order: inherit !important; padding: 0 !important; width: auto !important; } .top-bar__dashboard-link__anchor { @include icon-before-states; color: $color-normal !important; font-size: 14px; line-height: 25px; outline: none; position: relative; &::before { background: url(https://leaders-map.jiminy.co.nz/empire/assets/back-dashboard-icon.svg) no-repeat; background-size: 20px auto; content: ""; height: 25px; left: -30px; position: absolute; top: 4px; width: 20px; } &:hover { color: $color-hover !important; } &:active { color: $color-active !important; } } .top-bar__spacer { flex-grow: 1; } .top-bar__help-link { @include icon-states; background: url(https://leaders-map.jiminy.co.nz/empire/assets/help-icon.svg) no-repeat; background-size: 20px auto; display: block; height: 20px; margin: 3px 20px 0 0; width: 20px; @include breakpoint($mobile) { margin: 4px 0 0 0; } } .course-player__top-bar__menu-toggle { &::after { color: $grey-dk; content: "Menu"; font-size: 14px; position: absolute; right: -41px; top: 2px; } &__bar { background-color: $black; height: 1px; width: 16px; } @include breakpoint($mobile) { left: 12px; } } .course-player__content-header__actions { margin-right: 0; margin-left: 0; > button { cursor: pointer; margin-left: 19px; } > button:not(.course-player__content-header__action-fullscreen) { background-color: $color-normal; border-radius: 10px; height: 20px; margin-bottom: 2px; margin-left: 0; margin-right: 20px; margin-top: 3px; padding: 0 8px 0 6px; &::before { display: none; } &:hover { background-color: $color-hover; } &:active { background-color: $color-active; } @include breakpoint($tablet) { margin-right: 0; } @include breakpoint($mobile) { margin: 4px 0 2px 10px; } .toga-icon-discussions { margin-left: 14px; position: relative; &::before { background: url(https://leaders-map.jiminy.co.nz/empire/assets/comment-icon.svg) no-repeat; background-size: 14px auto; content: ""; height: 12px; left: -14px; position: absolute; top: -5px; width: 14px; } } > div { > div { > span { &:nth-child(2) { display: none; } &:nth-child(3) { display: block; height: 20px; line-height: 20px; margin: 0 0 0 3px; width: auto; position: relative; } } } } } } .toga-icon-arrow-grow { @include icon-before-states; &::before { content: ""; background: url(https://leaders-map.jiminy.co.nz/empire/assets/expand-icon.svg) no-repeat; height: 18px; position: absolute; right: 21px; top: 15px; width: 18px; } } .toga-icon-arrow-shrink { @include icon-before-states; &::before { content: ""; background: url(https://leaders-map.jiminy.co.nz/empire/assets/contract-icon.svg) no-repeat; height: 18px; position: absolute; right: 21px; top: 15px; width: 18px; } } } &.course-player--fullscreen { .course-player__left-drawer { position: absolute; transition: margin-left 0.2s ease; top: 50px; z-index: 20001; } .course-player__content { &::after { top: 50px; } } &.left-drawer--open { .top-bar__dashboard-link { display: block; } .course-player__left-drawer { left: 0; margin-left: 0; opacity: 1; position: absolute; transition: margin-left 0.2s ease; top: 50px; } .course-player__content { &::after { background-color: rgba(69, 69, 69, 0.9); content: ""; display: block; height: 100%; left: 0; opacity: 1; position: absolute; top: 50px; transition: opacity 0.2s ease-in-out; width: 100%; z-index: 20000; } } } .course-player__content-header { .top-bar__dashboard-link__anchor { display: none; } .course-player__top-bar__menu-toggle { display: inline-block; } } } #main-content { padding: 0 !important; > .surface__container { box-shadow: -4px 0px 8px 0px $grey-vlt2; } .ember-modal-overlay { background-color: $white-90 !important; } #modal-content { width: 600px; .surface__container { box-shadow: 0 4px 10px $grey-vlt2; background: $teal-gradient; > nav { display: none; } .player-modal__content { padding-left: 130px; padding-right: 130px; position: relative; > div { padding-bottom: 56px; padding-top: 38px; } h2 { font-size: 32px; line-height: 38px; font-weight: 400; padding-top: 220px; &::before { background: url(https://leaders-map.jiminy.co.nz/empire/assets/trophy-icon.svg) no-repeat; content: ""; height: 120px; left: 50%; position: absolute; top: 70px; transform: translateX(-50%); width: 124px; } } button { background: $white; border-radius: 25px; box-shadow: 1px 1px 2px $black-50; color: #0db498; cursor: pointer; display: inline-flex; font-size: 18px; font-weight: 400; height: 50px; letter-spacing: 0.5px; line-height: 25px; outline: none; padding: 0 40px; text-transform: uppercase; width: 220px; &::before { display: none; } } a { display: none; } } } } } .left-drawer--open .course-player__lesson::after { top: 49px; } .course-player-footer__previous, .course-player-footer__next { @include icon-states; background-repeat: no-repeat; background-size: 60px auto; bottom: 34px; cursor: pointer; display: block; height: 32px; position: fixed; width: 60px; z-index: 1; @include breakpoint($mobile) { background-size: 20px auto; bottom: 27px; height: 16px; width: 20px; } } .course-player-footer__previous { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/arrow-big-previous.svg); left: calc(25rem + ((100vw - 25rem) / 2) - 350px); @include breakpoint($tablet) { left: calc(50% - 350px); } @include breakpoint($mobile) { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/back-dashboard-icon.svg); left: 20px; } } .course-player-footer__next { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/arrow-big-next.svg); left: calc(25rem + ((100vw - 25rem) / 2) + 290px); @include breakpoint($tablet) { left: calc(50% + 290px); } @include breakpoint($mobile) { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/back-dashboard-icon.svg); left: auto; right: 20px; transform: rotate(180deg); } } #course-player-footer { border-color: $color-body; padding: 27px 1rem 26px; @include breakpoint($mobile) { padding: 15px 0 19px; } .btn--continue { display: none; } button { @include button; /* &:focus { } */ } } } .course-player__html-item { margin: 0 auto; max-width: inherit; padding: 0; &::after { display: none; } } .custom-theme { height: 100%; padding-bottom: 0; position: relative; .fr-view img.fr-dib, .fr-view img.fr-dib { margin: 0; } img.full-width { height: auto; width: 100%; } img.center { margin: auto !important; } .page-title { display: flex; justify-content: flex-end; margin-bottom: 70px; @include breakpoint($mobile) { margin-bottom: 32px; } h5 { // @todo refactor .page-title out of layout display: none; } } h1 { color: $color-heading; font-size: 36px; font-weight: 700; line-height: 1; margin-bottom: 50px; margin-top: 0; .secondary { display: block; font-size: 21px; line-height: 26px; margin-top: 12px; } @include breakpoint($mobile) { font-size: 26px; line-height: 28px; margin: 0 15px 40px; br { display: none; } } } .teal { color: $teal-dk; } .strong { font-weight: 700; } h1.centered { font-size: 52px; font-weight: 700; line-height: 30px; text-align: center; } h1.centered.greenbg.lead { color: $white; font-family: $sans-font; font-size: 52px; font-weight: 600; letter-spacing: -0.25px; line-height: 1; margin: 0 auto; padding: 112px 0 65px; position: relative; text-align: center; @include breakpoint($mobile) { font-size: 32px; letter-spacing: -0.15px; line-height: 36px; padding: 67px 15px 33px; } &.w-460 { padding: 112px calc((100% - 460px) / 2) 65px; } &.w-660 { padding: 112px calc((100% - 660px) / 2) 65px; } div { font-size: 22px; font-weight: 900; left: 50%; letter-spacing: 0.69px; line-height: 25px; position: absolute; text-transform: uppercase; top: 60px; transform: translateX(-50%); @include breakpoint($mobile) { font-size: 16px; letter-spacing: 0.5px; line-height: 20px; top: 32px; } } span { position: relative; } &::before { background: $teal-gradient; content: ""; height: 560px; left: 0; position: absolute; top: 0; width: 100%; @include breakpoint($mobile) { } } &.h-500 { &::before { height: 480px; @include breakpoint($mobile) { height: 260px; } } } } h2, h3, h4 { color: $color-heading; font-family: $sans-font; font-size: 26px; font-weight: 700; line-height: 40px; margin: 0 auto; margin-bottom: 34px; text-align: left; max-width: 665px; } .h2-rule { border-top: 1px solid $color-body; font-size: 23px; line-height: 26px; margin-bottom: 40px; padding-left: 0; padding-top: 31px; @include breakpoint($mobile) { br { display: none; } } } h3 { padding-left: 55px; position: relative; @include breakpoint($mobile) { padding-left: 44px; } &.pleft-0 { padding-left: 0; } &.h3-rule { border-top: 1px solid $color-body; font-size: 18px; line-height: 22px; margin-bottom: 32px; padding-left: 0; padding-top: 24px; } &.f-20 { font-size: 23px; line-height: 26px; } span { border: 1px solid $grey-dk; border-radius: 50%; color: $grey; display: inline-block; font-size: 16px; height: 40px; left: 0; line-height: 36px; margin-right: 15px; position: absolute; text-align: center; top: 0; width: 40px; @include breakpoint($mobile) { font-size: 12px; height: 32px; line-height: 30px; margin-right: 12px; width: 32px; } } } p { color: $color-body; font-family: $serif-font; font-size: 21px; font-weight: 400; line-height: 1.428571428571429; margin: 0 auto; margin-bottom: 15px; text-align: left; max-width: 665px; @include breakpoint($mobile) { font-size: 16px; line-height: 22px; line-height: 1.4; margin-bottom: 12px; } &.teal { color: $teal-dk; } &.sans-bold { font-family: $sans-font; font-weight: 700; } > a { color: $teal; color: $color-link; text-decoration: none; } &.no-bottom-margin { margin-bottom: 0; .videoproxy_embed { max-width: 100% !important; } } &.inline-video { margin-bottom: 50px; margin-top: 50px; @include breakpoint($mobile) { margin-bottom: 40px; margin-top: 40px; } .videoproxy_embed { max-width: 100% !important; } &--square { height: 376px; margin-left: 0; width: 501px; > span { height: 376px; width: 501px; } } } .fr-video { box-shadow: 2px 6px 12px $grey-vlt2; padding-top: 0 !important; } &.small { font-size: 16px; line-height: 24px; } } hr { background: transparent; border: 0; border-top: 1px solid $color-body; color: transparent; height: 0; margin: 0 auto 25px; max-width: 665px; } .mtop-230 { margin-top: 230px !important; } .mtop-220 { margin-top: 220px !important; } .mtop-264 { margin-top: 264px !important; } .mtop-80 { margin-top: 80px !important; } .mtop-70 { margin-top: 70px !important; @include breakpoint($mobile) { margin-top: 56px !important; } } .mtop-65 { margin-top: 65px !important; } .mtop-60 { margin-top: 60px !important; } .mtop-55 { margin-top: 55px !important; @include breakpoint($mobile) { margin-top: 45px !important; } } .mtop-50 { margin-top: 50px !important; @include breakpoint($mobile) { margin-top: 40px !important; } } .mtop-40 { margin-top: 40px !important; @include breakpoint($mobile) { margin-top: 32px !important; } } .mtop-35 { margin-top: 35px !important; @include breakpoint($mobile) { margin-top: 22px !important; } } .mtop-30 { margin-top: 30px !important; @include breakpoint($mobile) { margin-top: 16px !important; } } .mtop-25 { margin-top: 25px !important; } .mtop-20 { margin-top: 20px !important; } .mtop-18 { margin-top: 18px !important; } .mtop-10 { margin-top: 10px !important; } .mtop--10 { margin-top: -10px; } .mbottom-0 { margin-bottom: 0 !important; } .mbottom-40 { margin-bottom: 40px !important; } .mbottom-50 { margin-bottom: 50px !important; } .mbottom-70 { margin-bottom: 70px !important; } .mbottom-90 { margin-bottom: 90px !important; } .pright-200 { padding-right: 200px; } .center { text-align: center; } h5 { font-family: $sans-font; font-size: 16px; letter-spacing: 0.5px; line-height: 25px; margin: 0; &.teal { color: $teal-dk; font-size: 21px; font-weight: 700; letter-spacing: 0; line-height: 21px; margin-left: auto; margin-right: auto; text-align: left; @include breakpoint($mobile) { font-size: 16px; letter-spacing: 0; line-height: 20px; margin-left: 15px; margin-right: 15px; } } } .module-map { height: 652px; margin: 0 auto; overflow: hidden; padding-bottom: 101px; position: relative; max-width: 665px; transition: height 0.2s ease-in-out; &.expanded { height: 1911px; .module-map__teaser--hide { opacity: 1; } .module-map__start { &::after { height: 1830px; } } } .module-map__teaser--hide { opacity: 0; } a.big { } h2, h5, p { text-align: center; width: auto; } h2 { font-size: 26px; font-weight: 600; line-height: 32px; margin-bottom: 12px; } p { margin-bottom: 20px; } &__start { position: relative; &::after { background: $teal-dk; content: ""; height: 580px; left: 350px; position: absolute; top: 38px; width: 2px; } } &__end { float: left; margin-top: 70px; width: 100% !important; } &--point-left, &--point-right { margin: 198px 0 16px; } &--point-right { margin: 295px 0 16px; } &--point-left { position: relative; &::after { background: url(https://leaders-map.jiminy.co.nz/empire/assets/module-path-left.svg) no-repeat; background-size: 200px auto; content: ""; height: 100px; left: 152px; position: absolute; top: -115px; width: 200px; } } &__teaser--center { float: left; margin-left: 25%; overflow: hidden; padding: 0 25px; text-align: center; width: 50%; } &__teaser--left { float: left; overflow: hidden; padding: 0 50px 0 0; text-align: center; width: 50%; } &__teaser--right { float: right; overflow: hidden; padding: 0 0 0 50px; text-align: center; width: 50%; } &--point-right { position: relative; &::after { background: url(https://leaders-map.jiminy.co.nz/empire/assets/module-path-right.svg) no-repeat; background-size: 200px auto; content: ""; height: 100px; right: 150px; position: absolute; top: -113px; width: 200px; } } } .alternate-course .module-map { height: 619px; &.expanded { height: 2013px; .module-map__start { &::after { height: 1932px; } } } } .module-map--programme-manager { height: auto; padding-bottom: 0; .module-map__teaser--right { overflow: visible; width: 52%; } .module-map--point-right { margin-top: 0; } h5 { float: left; position: relative; text-align: center; width: 100%; clear: both; &.module-1 { margin-top: 85px; &::after { background: #38a1a7; content: ""; height: 50px; left: 350px; position: absolute; top: -60px; width: 2px; } } &.module-2 { margin-top: 177px; &::after { background: #38a1a7; content: ""; height: 150px; left: 350px; position: absolute; top: -160px; width: 2px; } } &.module-8 { margin-bottom: 86px; margin-top: 66px; &::before { border-left: 2px #38a1a7 dashed; content: ""; height: 210px; left: 350px; position: absolute; top: -222px; width: 0; } &::after { background: #38a1a7; content: ""; height: 50px; left: 350px; position: absolute; top: 41px; width: 2px; } } } } a.big { color: $teal; display: block; font-size: 18px; letter-spacing: 0.5px; line-height: 24px; margin-top: 40px; text-align: center; text-decoration: none; text-transform: uppercase; &.module-map__expand { left: 50%; position: absolute; transform: translate(-50%, 597px); z-index: 1; &.show { display: block; } &.hide { display: none; } } &.module-map__contract { &.show { display: block; } &.hide { display: none; } } } .button--small { background: $white; border: 0.8px solid $teal; border-radius: 20px; box-shadow: 1px 1px 2px $grey-vlt2; color: $teal; cursor: pointer; display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: 1px; line-height: 16px; margin-bottom: 2px; padding: 10.7px 30px; text-decoration: none; text-transform: uppercase; } .row-flex--around { border-top: 1px solid $grey-lt-65; display: flex; justify-content: space-around; margin: 0 auto; padding: 33px 0; } .row-flex--between { border-top: 1px solid $grey-lt-65; display: flex; justify-content: space-between; margin: 0 auto; padding: 33px 0; } .row-flex--around, .row-flex--between { p { width: auto; } > div { display: flex; flex: 0 0 240px; > img { display: block; height: 38px; width: auto; } > div { flex: 0 0 182px; margin-left: 20px; > p { font-family: $serif-font; font-size: 16px; line-height: 20px; margin-bottom: 5px; } > .title { font-size: 18px; font-weight: 700; } } } } .blockquote { align-items: flex-start; display: flex; margin: 0 auto 0; &.top-border { border-top: 1px solid $color-body; padding-top: 20px; @include breakpoint($mobile) { padding-top: 23px; } } &.mtop-70 { margin-top: 70px; } img { display: block; height: auto; margin: 0 0 0 15px; width: 80px; @include breakpoint($mobile) { margin: 0 10px !important; width: 50px; } } p { color: $teal-dk; font-size: 23px; font-weight: 700; line-height: 26px; margin-left: 15px; margin-top: 10px; padding-right: 30px; @include breakpoint($mobile) { font-size: 18px; font-weight: 700; line-height: 20px; margin-bottom: 10px; margin-left: 0; margin-top: 0; padding-right: 0; } } &--grey { margin: 5px auto 32px; p { font-size: 20px; font-style: italic; line-height: 24px; margin-left: 30px; margin-bottom: 12px; } } } .single-column { margin: 0 auto; } .two-columns { columns: 2; column-gap: 45px; margin: 40px auto 10px; h5 { margin-bottom: 30px; } li { margin-top: 1px; } @include breakpoint($mobile) { columns: 1; margin: 32px auto 8px; } } .two-columns-flex { display: flex; margin: 0 auto 10px; > div { flex: 0 0 50%; } h5 { margin-bottom: 30px; } @include breakpoint($mobile) { display: block; margin: 32px auto 8px; } } .fr-view { .ol-green-lead.li-mbottom-50 { li{ margin-bottom: 40px; } } } .fr-view { .ul-green-lead, .ul-green, .ol-green-lead { list-style-type: none !important; padding-left: 25px !important; margin: 0 !important; li, > div { display: inline-block; //display: block; list-style-type: none !important; margin-bottom: 20px; position: relative; transform: translateZ(0); width: 100%; &::before { background: $teal-dk; border-radius: 50%; content: ""; height: 10px; left: -25px; position: absolute; top: 8px; width: 10px; } p { font-family: $sans-font; font-size: 18px; line-height: 24px; margin-bottom: 10px; width: auto; &:first-child { color: $teal-dk; font-size: 20px; font-weight: 700; margin-bottom: 12px; } } @include breakpoint($mobile) { margin-bottom: 16px; p { font-size: 14px; line-height: 20px; margin-bottom: 8px; &:first-child { font-size: 16px; margin-bottom: 8px; } } } @include ol-nested; @include ul-nested; } &.sb-40 { li { margin-bottom: 40px; } } } .ul-green { li { &::before { height: 5px; top: 10px; width: 5px; } p { color: $grey-blue; font-size: 18px; font-weight: 400; line-height: 24px; margin-bottom: 10px; &:first-child { color: $grey-blue !important; font-size: 18px; font-weight: 400; line-height: 24px; margin-bottom: 10px; } } } @include breakpoint($mobile) { padding-left: 16px !important; li { margin-bottom: 8px; &::before { left: -16px; top: 8px; width: 4px; } p { font-size: 14px; line-height: 20px; margin-bottom: 8px; &:first-child { font-size: 14px; line-height: 20px; margin-bottom: 8px; } } } } } .ol-green-lead { list-style: none; counter-reset: li; li, > div { counter-increment: decimal-counter; &::before { background: transparent; content: counter(decimal-counter, decimal) "."; color: $teal-md; font-size: 20px; font-weight: 700; line-height: 24px; top: 0; @include breakpoint($mobile) { font-size: 16px; line-height: 20px; } } } &.start-4 { li:first-child { counter-increment: decimal-counter 4; } } &.large { padding-left: 110px !important; @include breakpoint($mobile) { padding-left: 70px !important; } li, > div { &::before { content: counter(decimal-counter, decimal); font-size: 100px; font-weight: 200; left: -110px; line-height: 70px; text-align: center; width: 110px; @include breakpoint($mobile) { font-size: 50px; left: -70px; line-height: 42px; width: 70px; } } } } } .ul-green-lead { &.large { margin-top: 40px !important; padding-left: 110px !important; @include breakpoint($mobile) { margin-top: 32px !important; padding-left: 70px !important; } li { width: 100%; &::before { background-color: transparent; background-repeat: no-repeat; background-size: 80px auto; border-radius: 0; content: ""; height: 80px; left: -105px; text-align: center; top: 0; width: 110px; @include breakpoint($mobile) { background-size: 50px auto; height: 50px; left: -60px; width: 110px; } } &.intention::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/intention-icon.svg); } &.generic::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/generic-icon.svg); } &.location::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/location-icon.svg); background-size: auto 80px; left: -95px; @include breakpoint($mobile) { background-size: auto 50px; left: -52px; } } &.time::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/time-icon.svg); } &.conversation::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/conversation-icon.svg); } &.preperation::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/preperation-icon.svg); } &.compassion::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/compassion-icon.svg); } &.behavioral::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/behavioral-icon.svg); } &.tick::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/tick-icon.svg); } &.cross::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/cross-icon.svg); } &.self::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/self-icon-strong.svg); } &.self-others::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/self-others-icon.svg); } &.rain::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/rain-icon.png); } &.sleep::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/sleep-cycle-icon.png); } &.remedial::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/remedial-icon.svg); } &.people::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/people-icon.svg); } &.arrows::before { background-image: url(https://leaders-map.jiminy.co.nz/empire/assets/arrows-icon.svg); } &.s-icon::before { @include letter-icon; content: "S"; } &.g-icon::before { @include letter-icon; content: "G"; } &.t-icon::before { @include letter-icon; content: "T"; } &.o-icon::before { @include letter-icon; content: "O"; } &.b-icon::before { @include letter-icon; content: "B"; } &.i-icon::before { @include letter-icon; content: "I"; } &.n-icon::before { @include letter-icon; content: "N"; } &.l-icon::before { @include letter-icon; content: "L"; } &.e-icon::before { @include letter-icon; content: "E"; } &.a-icon::before { @include letter-icon; content: "A"; } &.p-icon::before { @include letter-icon; content: "P"; } &.d-icon::before { @include letter-icon; content: "D"; } &.r-icon::before { @include letter-icon; content: "R"; } &.h-icon::before { @include letter-icon; content: "H"; } } &.sans-semi { li { p { color: $teal-dk; font-family: $sans-font; font-size: 20px; font-weight: 600; line-height: 23px; } } } } } } .quote { color: $green; display: flex; flex-direction: column; margin: 40px auto 0; padding-left: 350px; .quote__name { font-size: 16px; /* font-weight: 700; */ line-height: 1.2; padding-left: 10px; text-align: left; } .quote__quote { font-size: 26px; font-weight: 600; line-height: 30px; margin-bottom: 15px; padding-left: 10px; quotes: "“" "”" "‘" "’"; text-align: left; text-indent: -10px; &::before { content: open-quote; } &::after { content: close-quote; } } @include breakpoint($mobile) { margin: 32px auto 0; padding-left: 0; .quote__name { font-size: 12px; } .quote__quote { font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; } } &.small { .quote__quote { font-size: 21px; line-height: 26px; @include breakpoint($mobile) { font-size: 16px; line-height: 1.3; } } } } .ol-green-lead { .quote { padding-left: 240px; } } .two-columns { .quote { margin: 0 auto 30px; padding-left: 0; } } .exercise-download { background: $teal-gradient; border-radius: 1px; box-shadow: 2px 4px 8px $grey-vlt2; color: $white; display: block; margin: 50px auto 0; min-height: 180px; padding: 30px 184px 30px 30px; position: relative; text-decoration: none; transition: all 0.2s ease-out; &:hover { background: $gradient-download-hover; box-shadow: -1px 2px 4px $grey-vlt2; } &__label { font-size: 16px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; margin-bottom: 20px; text-transform: uppercase; } &__title { font-family: $serif-font; font-size: 36px; font-weight: 700; line-height: 40px; } &::after { background: url(https://leaders-map.jiminy.co.nz/empire/assets/download-icon.svg) no-repeat; background-size: 120px auto; bottom: 30px; content: ""; height: 120px; position: absolute; right: 30px; text-indent: -9999px; width: 120px; } @include breakpoint($mobile) { margin: 40px auto 0; padding: 24px 20px 128px 20px; &__label { font-size: 12px; letter-spacing: 0.38px; margin-bottom: 12px; text-align: center; } &__title { align-items: center; display: flex; font-size: 28px; height: 96px; justify-content: center; line-height: 32px; text-align: center; } &::after { background-size: 80px auto; bottom: 28px; height: 80px; right: 50%; transform: translateX(50%); width: 80px; } } } .heading-icons { display: flex; justify-content: space-between; margin: 70px auto 40px; h3 { line-height: 30px; padding-top: 2px; margin-bottom: 0; margin-left: 0; margin-right: 0; width: auto; } &__icons { border-left: 1px solid $color-body; display: flex; max-height: 40px; padding-left: 20px; img { height: 38px; margin: 1px 0 0 0 !important; width: auto; /* &:first-child { margin-right: 16px !important; } */ } } @include breakpoint($mobile) { margin: 32px auto; h3 { font-size: 20px; line-height: 24px; br { display: none; } } &__icons { display: none; } } } .img-drop-shadow { box-shadow: 2px 4px 8px $grey-vlt2; display: block; margin-bottom: 50px !important; margin-left: auto !important; margin-right: auto !important; margin-top: 50px !important; @include breakpoint($mobile) { margin-bottom: 40px !important; margin-top: 40px !important; } } } .course-player__quiz, .course-player__survey { background: $teal-gradient-reverse; margin: 0; max-width: inherit; min-height: auto; padding: 0; &-inner { margin: 0 auto; max-width: 700px; padding-top: 100px; @include breakpoint($mobile) { margin-left: 40px; margin-right: 40px; } } .course-player__proctor-progress { color: #3a3a3a; font-size: 16px; letter-spacing: 0.44px; line-height: 1; margin-bottom: 40px; } &__prompt { color: #3a3a3a; font-size: 24px; line-height: 30px; margin-bottom: 40px; } &__instructions { color: #3a3a3a; font-size: 16px; letter-spacing: 0.44px; line-height: 1; margin-bottom: 40px; } &__choices { .course-player__interactive-checkbox { background-color: transparent; border-color: $blue-quiz; border-width: 1.5px; border-radius: 15px; margin-bottom: 20px; outline: none; .course-player__interactive-checkbox__choice-label { background-color: $blue-quiz; border-radius: 15px; padding: 0; transform: translateX(-1.5px); span { align-items: center; color: $green-quiz; display: flex; font-size: 25.7px; height: 49px; justify-content: center; text-align: center; width: 50px; } } &[class^="_interactive-checkbox--selected"], &[class*=" _interactive-checkbox--selected"] { border-color: $white; .course-player__interactive-checkbox__choice-label { background-color: $white; } } .course-player__interactive-checkbox__choice-text { color: $black; font-size: 20px; height: auto; padding: 13px 56px 13px 15px; } } } .course-player__interactive-navigation { button { background: $white; border-radius: 25px; box-shadow: 1px 1px 2px $black-50; color: $green2; display: inline-flex; font-size: 18px; height: 50px; line-height: 25px; text-align: center; width: 180px; &::before { display: none !important; } } } } .width-706 { padding-bottom: 70px; @include breakpoint($mobile) { padding-bottom: 56px; } .row-flex--around, .row-flex--between, .module-map, h2, h3, h4, h5, hr, > p, hr, .two-columns, .two-columns-flex, .single-column, .quote, .exercise-download, .heading-icons, .blockquote--grey, .blockquote { max-width: 700px; @include breakpoint($mobile) { margin-left: 15px; margin-right: 15px; } } } .bg-reflections { background: $color-reflection-background; } .bg-teal-gradient-100 { background: $teal-gradient-reverse; } p.z-energy { background: url(https://leaders-map.jiminy.co.nz/empire/assets/z-energy-small.svg) no-repeat top 20px right 20px; background-size: 40px 40px; border: 1px solid $grey-vlt; border-radius: 10px; font-family: $sans-font; font-size: 18px; line-height: 24px; margin: 50px auto; padding: 16px 135px 16px 16px; a { color: $teal-dk; font-family: $sans-font; font-size: 18px; line-height: 1.3; } @include breakpoint($mobile) { background: url(https://leaders-map.jiminy.co.nz/empire/assets/z-energy-small.svg) no-repeat top 16px right 16px; background-size: 32px 32px; border-radius: 8px; font-size: 14px; line-height: 20px; margin: 40px 15px; padding: 12px 68px 12px 12px; a { font-size: 14px; line-height: 20px; } } }