:root{--color-primary: #69bd45;--color-secondary: #007ab8;--color-tertiary: #1ea4a9;--color-state: #4b7e2b;--color-state-hover: #3c6721;--color-state-focus: #3c6721;--color-state-active: #30541a;--color-state-highlight: #f6f9d7;--color-state-highlight-neutral: var(--color-neutral-3);--color-state-disabled: var(--color-neutral-5);--color-neutral-1: #fff;--color-neutral-2: #fafafa;--color-neutral-3: #f7f7f7;--color-neutral-4: #e6e4e4;--color-neutral-5: #c7c7c7;--color-neutral-6: #767676;--color-neutral-7: #262626;--color-background: var(--color-neutral-1);--color-border: var(--color-neutral-5);--color-text: var(--color-neutral-7);--color-text-disabled: var(--color-neutral-5);--color-text-hint: var(--color-neutral-6);--link-color: var(--color-state);--link-color-hover: var(--color-state-hover);--nav-bg-color: #fff;--nav-text-color: var(--color-text);--footer-bg-color: #fff;--footer-text-color: var(--color-text);--footer-text-color-hover: var(--footer-text-color);--btn-accent-color: var(--color-state);--btn-accent-color-active: var(--color-state-active);--btn-accent-color-hover: var(--color-state-hover);--btn-accent-color-disabled: var(--color-state-disabled)}:root{--nav-bg-color: #ffffff;--nav-text-color: #333366;--color-primary: #333366;--btn-prim-accent-color: #333366;--btn-accent-color: #3D444B;--link-color: #443b62;--color-state: #333366;--color-text: #333366;--footer-bg-color: #F9F9F9;--footer-text-color: #696969;--btn-prim-accent-color-focus: #29295c;--btn-prim-accent-color-active: #18184b;--btn-accent-color-focus: #333a41;--btn-accent-color-active: #222930;--link-color-hover: #3a3158;--color-state-hover: #29295c;--color-state-focus: #29295c;--color-state-active: #18184b;--footer-text-color-hover: #5f5f5f;}
/** WR473295 - Original styles from ZISHI with updates from Catalyst - 31.10.2025 **/
:root {
--font-body-size: .85rem;
--font-body-line-height: 1.4;
--font-h4-line-height: 1.1rem;
}
body {
font-family: 'Open Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
font-size: .9rem;
line-height: 1.4;
}
.totara_core__QuickAccess_flex-container-empty p, .totara_core__QuickAccess_flex-container-empty a, .totara_core__QuickAccess_flex-container-empty span{
color:white;
}
.messaging-area-container .messaging-area .messages-area .messages-header .btn-link {
padding: 0;
line-height: inherit;
background-color: #ffffff;
}
.totaraNav.scrolled nav #quickaccess-popover-content {
font-size: .9rem;
}
#page-login-index .site-banner, #pade-admin-tool-sitepolicy-userpolicy .site-banner, #page-login-forgot-password .site-banner {
background-color: #443b62;
order:2;
z-index:100;
display:none;
}
.site-banner p{
text-align:center;
color: white;
margin-top:10px;
}
.site-banner {
display:none;
}
h1, h2 {
font-weight:200;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.6rem;
font-weight: 400;
}
h4 {
font-size: 1.2rem;
font-weight: 400;
}
h5 {
font-size: .9rem;
font-weight: 400;
}
h6 {
font-size: .8rem;
font-weight: 400;
}
h1.trajan,
.block_html .content h2 {
font-size: 2.5rem;
font-weight: 200;
line-height: 1.16;
}
h2.trajan,
.block_html .content h2 {
font-size: 1.9rem;
font-weight: 200;
line-height: 1.16;
}
h1, .h1, h2, .h2, h3, .box.message .messagearea .messagesend .mform .fitemtitle, .box.message .messagearea .messagesend .mform .form-label, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
p {
margin: 0 0 10px;
}
.tw-catalog__title,
#maincontent + h1, .settingsform h1,
.questionbankwindow h1,
#completion_import h1, #addadmisform h1 {
font-weight: 500;
}
#course-card-template, #section-card-template, .d-none, #page-course-view-topics .section-settings {
display: none;
}
@media screen and (max-width: 425px){
.d-xs-none{
display: none;
}
}
#section-0 .sectionname, #completionprogressid{
display: none;
}
#page-course-view-topics .home-featured-courses .progress {
height: 7px;
margin-bottom: 20px;
border: none;
box-shadow: none;
background-color: #e2e2e2;
}
#page-course-view-topics .home-featured-courses .progress-bar {
background-color: #443b62;
box-shadow: none;
}
.headerSection>.container-fluid{
padding: 15px 30px 15px 30px;
}
.banner-text{
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
.banner-text.light h1{
color: white;
}
.banner-text h1{
text-align: center;
font-family: 'trajan-pro-3' !important;
font-size: 3.5rem;
line-height: 1.16;
}
@media screen and (max-width:480px){
.banner-text h1{
font-size: 2rem;
}
.logo-container{
padding: 20px 0px 40px 0px;
}
}
.embeddedshortname_system_browse_users{
overflow-y: visible;
overflow-x: visible;
}
/* --------------------- PAGE ORDERING --------------------- */
.totaraNav{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin-bottom: 0rem;
-webkit-box-shadow: 0px 4px 20px #c3c3c3;
box-shadow: 0px 4px 20px #c3c3c3;
z-index: 1;
}
.navSearchBar{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.breadcrumb-container{
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
#page{
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.zishi-footer{
-webkit-box-ordinal-group:6;
-ms-flex-order:5;
order:5;
}
ul.list-unstyled.social-list {
display: flex;
justify-content: flex-start;
}
.social-list a{
margin-right:10px;
}
.
/* -------------------- NAV SEARCH BOX --------------------- */
.notloggedin .navSearchBar{
display: none;
}
.navSearchBar{
width: 100%;
padding-bottom: 20px;
}
.navSearchBar button.btn.btn-default {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
height: 30px;
background-color:rgba(0,0,0,0);
border:0;
color:grey;
}
.navSearchBar .form-control{
border:0;
background-color:rgba(0,0,0,0);
padding-top:0px;
padding-bottom:0px;
height:30px;
font-size: 12px;
}
.navSearchBar .input-group {
border: 1px solid #443b62;
border-radius: 2px;
height: 20px;
float: right;
}
.float_event__search__floater {
position: fixed;
bottom: 50px;
right: 50px;
z-index:1000000;
-webkit-transition: all ease-in-out 0.2s;
-o-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.float_search__anchor{
position: relative;
width:auto;
height: auto;
}
.float_search__submit {
opacity:0;
width: 0px;
}
.float_search__bar {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
outline:none;
border:none;
background: #fff;
width: 50px;
height: 50px !important;
border-radius: 25px !important;
opacity: 0;
z-index:5;
-webkit-transition: all 0.2;
-o-transition: all 0.2;
transition: all 0.2;
font-size: 1em;
}
.float_search__bar:hover{
cursor: pointer;
}
.float_search__bar:focus {
width: 200px;
left:auto;
opacity: 1;
cursor: text;
-webkit-transition: all 0.2;
-o-transition: all 0.2;
transition: all 0.2;
padding-left: 25px;
padding-right: 70px;
}
.float_search__toggler {
position: absolute;
width: 60px;
height: 60px;
background: #443b62;
opacity: 1;
top: -4px;
left: -4px;
border-radius: 50%;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.float_search__toggler:hover{
cursor: pointer;
}
.float_search__toggler::before {
content: "";
position: absolute;
margin: auto;
top: 22px;
right:0;
bottom:0;
left: 22px;
width: 12px;
height: 2px;
background: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.float_search__toggler::after {
content: "";
position: absolute;
margin: auto;
top:-5px;
right:0;
bottom:0;
left: -5px;
width:25px;
height: 25px;
border-radius: 50%;
border: 2px solid #fff;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.float_search__bar:focus ~ .float_search__toggler {
right: 400px;
background: #151515;
z-index: 6;
-webkit-transition: all 0.2;
-o-transition: all 0.2;
transition: all 0.2;
}
.float_search__bar:focus ~ .float_search__toggler::before{
top: 0;
left: 0;
width: 25px;
}
.float_search__bar:focus ~ .float_search__toggler::after {
top: 0;
left: 0;
width: 25px;
height: 2px;
border: none;
background: white;
border-radius: 0%;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* -------------------- HOMEPAGE HEADER -------------------------- */
body#page-totara-dashboard-2 .headerSection.active {
background-position:bottom;
background-repeat:repeat-x;
background-size:contain;
padding-top:20px;
padding-bottom:20px
}
body#page-totara-dashboard-2 .headerSection.active .container-fluid {
display:flex;
justify-content:center;
position:relative;
align-items: center;
}
#page-totara-dashboard-2 .container-fluid.breadcrumb-container {
display: none;
}
/* --------------------- CUSTOM GALLERY IMAGES --------------------- */
.course-section-image{
display: none !important;
}
/* ---------------------- SLICK SLIDER ---------- */
.slick-slider{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.slick-list{
width:90%;
}
.slick-dotted.slick-slider {
padding-bottom: 30px;
margin-bottom: 0px;
}
.slick-dots{
bottom: 0px;
}
@media screen and (max-width: 480px){
.slick-list{
width:100%;
}
}
.slick-list, .slick-prev, .slick-next{
display: inline-block !important;
}
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: relative;
top: 50%;
display: block;
width: 4%;
height: 100%;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
z-index:1000;
}
.slick-prev:active,
.slick-next:active,.slick-prev:focus,
.slick-next:focus{
background-color:white !important;
border-color: white !important;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'FontAwesome'!important;
font-size: 20px;
line-height: 1;
opacity:1;
color: #443b62;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: 0px;
}
.slick-prev:before
{
content: '\f053';
}
.slick-next:before
{
content: '\f054';
}
.slick-next
{
right: 0px;
}
.slick-slider .course-card{
width: 100%;
display: block;
border: 1px solid #f3f3f3;
border-radius: 15px;
overflow: hidden;
-webkit-box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 8%);
box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 8%);
margin:10px;
}
.slick-slider .course-card-body{
padding:15px;
}
.slick-slider .course-card-title a{
font-weight:700;
color: #393253;
font-size: 2rem;
}
.slick-slider .course-card-text{
font-size:12px;
font-weight: 100;
color: #666;
}
.slick-slider .course-card-details{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position:relative;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom:5px;
}
.slick-slider .course-card-img-top {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* -------------------- PAGE STYLING ----------------------- */
#page-content{
margin: 0 1rem;
}
.container-fluid{
max-width: 1380px;
}
/* -------------------- NAV STYLING -------------------------- */
.pagelayout-dashboard .breadcrumb-nav{
display:none;
}
.totaraNav .totaraNav_prim{
padding: 0px 0px 0px 0px;
background: #f9f9f9 !important;
}
.totaraNav_prim--toggleNav .totaraNav_prim--toggleNav_target span{
color:#443b62;
}
.totaraNav_prim--toggleNav{
align-self: center;
}
.totaraNav_prim--list .navExpand--list, .totaraNav_prim {
background-color: #f9f9f9;
border-radius: 10px;
}
#page-content {
padding: 30px 0px;
}
.totaraNav nav, .breadcrumb-container>.row{
padding: 30px 0px 0px 0px;
}
.totaraNav_prim--list_item{
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.totaraNav_prim--list {
margin: 0 auto;
}
.totaraNav_prim--list a:hover {
background: transparent;
}
.totaraNav_prim--list a:focus{
background: transparent;
color: #ffffff;
}
.totaraNav_prim--list_item_selected a.totaraNav_prim--list_item_link{
color: #eaab34 !important;
background-color: transparent;
}
.totaraNav_prim--list a.totaraNav_prim--list_item_link, .navExpand--listSecond a.navExpand--list_item_link{
color: #443b62;
font-weight:600;
font-size: .8rem;
letter-spacing:0.8px
}
.totaraNav_prim--list a:hover .totaraNav_prim--list_item_label {
color: #eaab34;
}
.totaraNav_prim--list a, .totaraNav_prim--list a:visited{
color: #443b62;
font-weight: 400;
}
a.totaraNav_prim--list_item_link{
color: #443b62;
font-weight: 600;
}
.totaraNav_prim--list .totaraNav_prim--list_item_link:hover, .totaraNav_prim--list a:hover {
color: #eaab34;
}
.totaraNav_prim .masthead_logo--header_img {
height: 6em;
padding: 0.75em 0px 0.75em 0px;
margin-right: auto;
display: block;
position: relative;
}
.totaraNav_prim--side .usermenu a.toggle-display{
color: #443b62;
}
.totaraNav_prim--side{
color:#443b62;
margin: auto 0;
}
.totaraNav_prim--side .popover-region .nav-link:focus, .totaraNav_prim--side .popover-region .nav-link:hover{
background-color: #ffffff;
color:#CFD0D3;
}
.totara_core__QuickAccess h3.totara_core__QuickAccess_group-title{
color:#CFD0D3;
}
.headerSection{
display:none;
}
.headerSection.active{
display:block;
min-height: 350px;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
background-size:cover;
background-position:center;
}
.totaraNav .totaraNav_sub {
background: #e9e8ec;
padding: 5px 0px 5px 0px;
}
.totaraNav_sub--list_item .totaraNav_sub--list_item_link {
background: transparent;
color: #443b62;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.totaraNav_sub--list_item_selected .totaraNav_sub--list_item_link .totaraNav_sub--list_item_label {
color:#443b62;
background-color: #f4f2f2;
padding: 5px 15px;
border-radius: 50px;
}
#id_config_texteditable .headerInfo{
display:block;
}
.headerInfo{
display:none;
}
.totaraNav_prim--side .usermenu .toggle-display:hover {
background: #f9f9f9;
}
.totaraNav_prim--side .popover-region .nav-link:focus, .totaraNav_prim--side .popover-region .nav-link:hover {
background-color: #f9f9f9;
color: #6c6190;
}
.totaraNav.scrolled{
display:block;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100000;
font-size:2px !important;
}
.totaraNav.scrolled nav{
font-size:10px !important;
}
.totaraNav.scrolled .totaraNav_prim--list a.totaraNav_prim--list_item_link, .totaraNav.scrolled .navExpand--list_item_label{
font-size:10px;
}
.totaraNav.scrolled .totaraNav_prim .masthead_logo--header_img {
height: 3em;
padding: 0.25em 0px 0.25em 0px;
}
.totaraNav.scrolled .totaraNav_sub--list{
line-height:1;
}
.totaraNav_sub--list {
margin: 0;
vertical-align: middle;
display: flex;
align-items: center;
}
.totaraNav_prim .totaraNav--expand_indent {
display: inline-block;
min-width: 10px;
}
.totaraNav_prim--side .usermenu a.toggle-display:hover, .jsenabled .usermenu .moodle-actionmenu.show{
background: #f9f9f9;
color:#443b62;
}
/* -------------------- FOOTER STYLING ----------------- */
#page-footer{
display:none;
}
.zishi-footer{
padding: 20px 0px;
background-color: #f9f9f9;
margin:0px;
}
.zishi-footer .social-list svg{
width:35px;
}
.logo-container .footer-logo {
max-height:100px;
}
.logo-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.zishi-footer h5{
font-weight:600;
margin-bottom: 20px;
color:#443b62;
}
.zishi-footer ul{
flex-wrap: wrap;
margin-left: 0;
}
.zishi-footer li a {
color: #696969;
font-weight: 500;
font-size: 12px;
}
.copyright{
color:#696969;
font-size:12px;
}
/* --------------------- TRAINER REPORTS PAGE ----------------------- */
.path-report-myfeedback #region-main {
width: 100%;
left: 0;
}
/* ------------------------ HOMEPAGE CARDS ------------------- */
.homepage-header > .row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.home-featured-courses{
max-width:1180px;
margin: 0 auto;
}
.home-featured-courses .course-catalogue{
display: block;
position:relative;
margin-bottom: 40px;
padding-left:15px;
padding-right:15px;
margin-top: 40px;
}
.home-featured-courses h3{
display: inline-block;
position:relative;
margin-top: 5px !important;
}
.home-featured-courses .course-catalogue-button{
color: #393253;
padding: 10px 25px;
border: 1px solid #393253;
border-radius: 25px;
float: right;
display: inline-block;
position:relative;
}
.home-featured-courses .course-card {
width: 100%;
display: block;
border: 1px solid #e4e4e4;
border-radius: 15px;
overflow: hidden;
-webkit-box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
}
.home-featured-courses .course-card-body{
padding:15px;
}
.home-featured-courses h5.course-card-title{
font-weight:700;
color: #393253;
font-size: .9rem;
}
.home-featured-courses .course-card-text{
font-size:12px;
font-weight: 100;
color: #666;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
height: 17px;
}
.home-featured-courses .course-card-details{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position:relative;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom:5px;
height:100%;
}
.home-featured-courses .course-card-img-top{
width:100%;
}
.home-featured-courses .course-time{
float:right;
color: #12bb9a;
background-color:#e5f8f4;
padding: 3px 20px;
border-radius: 20px;
display: inline-block;
height:100%;
}
.home-featured-courses .course-category{
display: inline-block;
margin: 3px 0px 0px 0px;
}
/* --------------------- COURSE CARDS -------------------- */
.home-featured-courses {
max-width: 1180px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
position: relative;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.my-learning-container #section-container>div{
padding:0;
}
#page-admin-report-customsql-view h2{
margin:40px 0px 40px 0px;
}
#section-container>div{
min-width: 33%;
padding:15px;
}
#page-course-view-topics #section-container .course-category{
color: #999;
}
.single-section .section-navigation .jumpmenu, .section-navigation.navigationtitle{
display: none !important;
}
.course-content .single-section .section-navigation {
display: block;
padding: .5em;
margin-bottom: -.5em;
margin-top: 15px;
}
.section .activity.modtype_label.label{
background-color: #f1f1f1;
padding: 1em 2em;
}
.section .activity.modtype_label.label{
margin-top:2em;
}
.section .activity.modtype_label.label ~ .activity.modtype_label.label{
margin-top:4em;
}
.section li.activity{
background-color: #f8f8f8;
padding: 1em 2em 1em 2em;
}
.modtype_label h3{
font-weight: 600;
}
.modtype_label p{
font-weight:200;
}
.section .activity.modtype_label .contentwithoutlink{
padding-right:0px;
}
.locked .card-img-container {
position: relative;
}
.locked .card-img-container:after {
background-color: rgba(255,255,255,0.39);
background-size: cover;
content: "\f023";
font-family: 'FontAwesome'!important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
height: 100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
font-size:100px;
color:rgba(0, 0, 0, 0.5);
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
border-radius: 15px 15px 0px 0px;
}
.completed .card-img-container {
position: relative;
}
/* -------------------- CATALOGUE ------------------- */
.tw-catalogItemNarrow {
border: 1px solid #a8b7c7;
color: #443b62;
display: block;
position: relative;
-webkit-transition: -webkit-box-shadow .2s ease-in-out;
transition: -webkit-box-shadow .2s ease-in-out;
-o-transition: box-shadow .2s ease-in-out;
transition: box-shadow .2s ease-in-out;
transition: box-shadow .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
border: 1px solid #e4e4e4;
border-radius: 15px;
overflow: hidden;
-webkit-box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 10%);
box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 10%);
}
.tw-catalogItemNarrow__image {
padding-top: 50%;
position: relative;
}
.tw-catalog .progress .bar{
float: left;
width: 0;
height: 10px;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
border:none;
-webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
background-color: #443b62;
-webkit-box-shadow: none;
box-shadow: none;
}
.tw-catalog .progress{
height:10px;
border:none;
}
.tw-catalog .progressbar__text{
display:none;
}
.section .activity .availabilityinfo, .section .activity .contentafterlink {
margin-top: .5em;
margin-left: 0px;
}
#page-admin-report-customsql-view .breadcrumb-container{
display:none;
}
/* --------------------- MOBILE -----------------------------*/
@media (min-width: 992px){
.totaraNav_prim--list_item_selected a.totaraNav_prim--list_item_link {
border-bottom: 1px solid rgb(255 255 255 / 0%);
margin-bottom: -1px;
}
.totaraNav--list_item_expanded>a.totaraNav_prim--list_item_link {
background: transparent;
}
.totaraNav_prim--list_item_link {
padding: 1.2rem 1.6rem;
}
.totaraNav_prim>.container-fluid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: auto auto auto auto;
grid-template-areas:
"logo menu menu header";
grid-area: main;
width: 100%;
}
.totaraNav_prim .masthead_logo {
grid-area: logo;
}
.totaraNav_prim--list {
grid-area: menu;
}
.totaraNav_prim--side {
-ms-grid-column-align: end;
justify-self: end;
grid-area: header;
}
.totaraNav_prim--list {
text-transform:uppercase;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
grid-auto-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.totaraNav_prim .masthead_logo {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
}
.totaraNav_prim--list {
-ms-grid-row: 2;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
}
.totaraNav_prim--side {
-ms-grid-row: 1;
-ms-grid-column: 4;
vertical-align: middle;
justify-content: center;
-webkit-box-align: center;
grid-auto-flow: center;
align-items: center;
}
}
@media (min-width: 992px){
.totaraNav_prim .masthead_logo {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.totaraNav_prim--list {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
}
.totaraNav_prim--side {
-ms-grid-row: 1;
-ms-grid-column: 4;
}
}
.single-card{
min-height: 340px;
margin-bottom: 1.75rem;
padding-bottom: 50px;
width: 100%;
-webkit-box-shadow: 0 0 8px #ddd;
box-shadow: 0 0 8px #ddd;
border-radius: 2px;
background-color: #fff;
position: relative;
padding: 1rem;
background-size:cover;
-webkit-box-flex: 0;
-ms-flex: 0 0 49%;
flex: 0 0 49%;
max-width: 49%;
display: -webkit-inline-box!important;
display: -ms-inline-flexbox!important;
display: inline-flex!important;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin:1%;
}
.single-card:nth-of-type(odd){
margin:1% 0% 1% 1% !important;
}
.single-card:nth-of-type(even){
margin:1% 1% 1% 0% !important;
}
.single-card a{
font-family: trajan-pro-3, serif !important;
width:100%;
height: 100%;
top:0px;
left:0px;
position: absolute;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
text-align: center;
vertical-align:middle;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color:white;
font-size:1.5em;
font-weight:regular;
}
.single-card:nth-of-type(4n+1) a{
background-color: #337ab76e;
}
.single-card:nth-of-type(4n+2) a{
background-color: #b733336e;
}
.single-card:nth-of-type(4n+3) a{
background-color: #33b74a6e;
}
.single-card:nth-of-type(4n+4) a{
background-color: #b7339a6e;
}
.section-summary .section-summary-activities{
display:none;
}
@media screen and (min-width: 1024px){
.content-only .single-card:nth-of-type(1n+0){
min-height: 340px;
margin-bottom: 1.75rem;
padding-bottom: 50px;
width: 100%;
-webkit-box-shadow: 0 0 8px #ddd;
box-shadow: 0 0 8px #ddd;
border-radius: 2px;
background-color: #fff;
position: relative;
padding: 1rem;
background-size:cover;
-webkit-box-flex: 0;
-ms-flex: 0 0 32%;
flex: 0 0 32%;
max-width: 32%;
display: -webkit-inline-box!important;
display: -ms-inline-flexbox!important;
display: inline-flex!important;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin:1%;
}
.content-only .single-card:nth-of-type(3n+2){
margin:0.7% 0.7% 0.7% 0% !important;
}
.content-only .single-card:nth-of-type(3n+0){
margin:0.7% 0.7% 0.7% 0.7% !important;
}
.content-only .single-card:nth-of-type(3n+1){
margin: 0.7% 0% 0.7% 0.7% !important;
}
.zishi-footer>.container-fluid>.row{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
}
@media screen and (max-width: 768px) {
body#page-totara-dashboard-2 .headerSection.active .container-fluid{
display: block;
}
}
@media screen and (max-width: 480px){
.content-only .single-card{
min-height: 340px;
margin-bottom: 1.75rem;
padding-bottom: 50px;
width: 100%;
-webkit-box-shadow: 0 0 8px #ddd;
box-shadow: 0 0 8px #ddd;
border-radius: 2px;
background-color: #fff;
position: relative;
padding: 1rem;
background-size:cover;
-webkit-box-flex: 0;
-ms-flex: 0 0 99%;
flex: 0 0 99%;
max-width: 100%;
display: -webkit-inline-box!important;
display: -ms-inline-flexbox!important;
display: inline-flex!important;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin:0.5%;
}
.headerSection.active {
display: block;
min-height: 150px;
}
.totaraNav nav, .breadcrumb-container>.row, #page-content {
padding: 10px 0px;
}
.totaraNav_prim>.container-fluid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.totaraNav.scrolled nav{
font-size:12px !important;
}
.scrolled .totaraNav_prim .masthead_logo{
display:none;
}
.totaraNav_prim .masthead_logo {
-ms-flex-preferred-size: 80%;
flex-basis: 0%;
-ms-flex-positive: 1;
flex-grow: 0;
margin: auto 0;
vertical-align: top;
}
.totaraNav_prim--toggleNav {
position:absolute;
left:10px;
top:50%;
transform: translateY(-50%);
}
}
.trajan{
font-family: trajan-pro-3, serif !important;
}
.headerImg{
display:none !important;
}
/* --------------------------- IE ------------------------------------ */
.ie .masthead_logo--header_link {
display: block;
height: 6em;
}
.ie .totaraNav_prim--list{
height:6em;
}
.ie .totaraNav.scrolled{
position: fixed;
width:100%;
}
.ie .totaraNav.scrolled .masthead_logo--header_link {
display: block;
height: 3em;
}
.ie .totaraNav.scrolled .totaraNav_prim--list{
height:3em;
}
/** END - Original styles for Zishi with updates from Catalyst **/
/** WR446993 - CATALYST styles for T18 upgrade - DO NOT REMOVE **/
/** General styling **/
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, input, textarea {
color: #333366;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}
a:link:not([class*="tw-"]),
a:link:not([class^="tw-"]),
a:hover:not([class*="tw-"]),
a:hover:not([class^="tw-"]),
a:active:not([class*="tw-"]),
a:active:not([class^="tw-"]),
a:visited:not([class*="tw-"]),
a:visited:not([class^="tw-"]) {
color: #443b62;
}
.block,
.totaraNav_prim--list .navExpand--list, .totaraNav_prim {
border-radius: 0 !important;
}
button, .btn, .button, input.form-submit,
.tui-formBtn, .tui-iconBtn, .tui-actionLink, .tui-toggleSwitch__btn,
input[type="button"], input[type="submit"], input[type="reset"] {
font-weight: normal;
border-radius: 3px;
}
.btn,
a.btn,
button:not(.tui-toggleBtn):not(.ui-button):not([class*="atto_"]):not(.alert-close),
input.submit,
#id_buttonfield,
a.link-as-button,
a.tui-actionLink,
input[type="submit"],
input[type="reset"],
input[type="button"],
#page-footer a:link.btn,
.open > .dropdown-toggle.btn-default,
.tw-containerCourse-enrolmentBanner__enrolButton {
color: #FFF !important;
background-color: #443b62;
border-color: #443b62;
}
.btn:focus, .btn:hover,
a.btn:focus, a.btn:hover,
button:focus, button:hover,
input.submit:focus, input.submit:hover,
#id_buttonfield:focus, #id_buttonfield:hover,
a.link-as-button:focus, a.link-as-button:hover,
a.tui-actionLink:focus, a.tui-actionLink:hover,
input[type="submit"]:focus, input[type="submit"]:hover,
input[type="reset"]:focus, input[type="reset"]:hover,
input[type="button"]:focus, input[type="button"]:hover,
.tw-containerCourse-enrolmentBanner__enrolButton:focus,
.tw-containerCourse-enrolmentBanner__enrolButton:hover,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default:hover,
#page-footer a:link.btn:focus, #page-footer a:link.btn:hover {
color: #FFF;
background-color: #332c49;
}
label, .mform .fitem .fitemtitle .fstaticlabel, .fitem > fieldset > legend .legend {
font-weight: 700;
}
/** Page layouts **/
#page-navbar {
padding: 0 15px;
}
#region-main {
padding-bottom: 20px;
}
/** Totara navigation and logo **/
.totaraNav_prim .masthead_logo--header {
margin: 0 1rem;
}
.totaraNav_prim--side .usermenu {
display: flex;
align-items: center;
}
.totaraNav_prim--side .usermenu .caret {
display: inline-block;
margin-left: 7px;
}
.totaraNav_prim--side .usermenu .userpicture {
height: 2rem;
}
.jsenabled .moodle-actionmenu[data-enhance] {
margin: auto;
}
.jsenabled .totaraNav_prim--side .usermenu .toggle-display.textmenu {
align-items: center;
padding: .4rem;
}
.jsenabled .totaraNav_prim--side .usermenu .toggle-display.textmenu:focus,
.jsenabled .totaraNav_prim--side .usermenu .toggle-display.textmenu:hover {
color: #ffffff;
background-color: #333366;
}
.totaraNav_prim--list_item_label {
font-size: .8rem !important;
}
.totaraNav_prim--side .popover-region .nav-link {
font-size: .9rem;
}
.totaraNav_prim--side .popover-region .flex-icon.tfont-var-gear::before,
.totaraNav_prim .totaraNav--expand_indent .totaraNav--icon_chevron::before {
font-family: "FontAwesome";
font-weight: 600;
color: #443b62;
content: "\f078";
}
.totaraNav_prim .totaraNav--expand_indent .totaraNav--icon_chevron.tfont-var-chevron-up::before {
content: "\f077";
}
.totaraNav_prim--side .popover-region .flex-icon.tfont-var-gear::before {
content: "\f013";
}
.totaraNav_prim--side .popover-region .nav-link:focus .flex-icon.tfont-var-gear::before,
.totaraNav_prim--side .popover-region .nav-link:hover .flex-icon.tfont-var-gear::before {
color: #6c6190;
}
.totaraNav_prim--list a:hover .totaraNav--icon_chevron::before,
.totaraNav_prim--list .totaraNav_prim--list_item_selected .totaraNav--icon_chevron::before,
.totaraNav_prim--list .totaraNav_prim--list_item_link:hover .totaraNav--icon_chevron::before {
color: #eaab34 !important;
}
.totaraNav_prim--list_item_link .totaraNav_prim--list_item_label::after,
.totaraNav_prim--list_item_selected .totaraNav_prim--list_item_label::after,
.totaraNav_prim--list_item_link:focus .totaraNav_prim--list_item_label::after,
.totaraNav_prim--list_item_link:hover .totaraNav_prim--list_item_label::after,
.totaraNav_prim--list_item_link:active .totaraNav_prim--list_item_label::after {
height: 0 !important;
border: none !important;
transition: none;
}
/** Totara sub-navigation **/
.totaraNav_sub--list_item_selected {
border: none !important;
}
.totaraNav_sub--list_item_selected:focus,
.totaraNav_sub--list_item_selected:hover,
.totaraNav_sub--list_item .totaraNav_sub--list_item_link:focus,
.totaraNav_sub--list_item .totaraNav_sub--list_item_link:hover {
background: transparent;
}
/** Totara system notification **/
.tui-notificationToast.tui-notificationToast--success,
.tui-notificationToast.tui-notificationToast--success .tui-notificationToast__icon {
background-color: #443b62;
}
.alert {
border-radius: 8px 0 8px 0;
}
.alert-icon {
border-radius: 8px 0 0 0;
}
/** Blocks **/
.block .block-header h2,
#dockeditempanel .dockeditempanel_content h2,
#quickaccess-popover-container.totara_core__QuickAccess h3.totara_core__QuickAccess_group-title {
text-transform: uppercase;
font-size: 12.6px;
font-weight: 200;
color: #6a7884;
}
/** Catalogue cards **/
.tw-catalogItemNarrow__title {
font-size: .9rem;
}
/** Assignment Grader **/
.assignfeedback_editpdf_widget .pageheader select,
.assignfeedback_editpdf_widget .pageheader button {
color: inherit !important;
}
.path-mod-assign .assignfeedback_editpdf_widget .pageheader button,
.path-mod-assign .assignfeedback_editpdf_widget .pageheader select {
line-height: 1;
}
form input.float_search__bar:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
/** Login page **/
.path-login hr,
#login_hero-image {
display: none;
}
.path-login #page {
padding-top: 20px;
background: transparent;
}
.loginbox.twocolumns .loginpanel {
padding: 20px 0;
border: none;
}
.loginbox.twocolumns .signuppanel {
padding: 20px;
}
.loginbox.twocolumns .loginpanel h2 {
margin: 0;
padding: 30px 20px 10px;
background: #f5f5f5;
border: 1px solid #e3e3e3;
border-bottom: none;
border-radius: 4px 4px 0 0;
}
.loginbox.twocolumns .loginpanel .loginsub {
padding: 0 20px 20px;
background: #f5f5f5;
border: 1px solid #e3e3e3;
border-top: none;
border-radius: 0 0 4px 4px;
}
.loginbox .loginform .form-input {
margin-bottom: 5px;
}
.loginbox .loginform .form-label label {
font-weight: 700;
}
.loginbox #loginbtn {
width: 100%;
color: #fff;
font-weight: 700;
margin: 10px 0;
background-color: #008287;
}
@media screen and (min-width: 768px) {
.loginbox.twocolumns .loginpanel {
width: 25%;
}
.loginbox.twocolumns .signuppanel {
position: relative;
width: 66%;
left: 8.3%;
padding: 20px;
}
}
/* ============================================================================
ZISHI Lesson Styles — for ZISHI GFM Programme 1 (and future ZISHI lessons)
============================================================================
Install: paste at the bottom of the theme's Custom CSS field
(Catalyst-managed stylesheet on the active Totara theme).
Scope: every selector below is namespaced under .zishi-lesson or .fi-embed
so styles only apply to elements with these classes. The rest of
the platform is unaffected.
Reverse: delete this entire block from the Custom CSS field and save.
The platform reverts immediately.
Brand palette (from the existing Catalyst-managed Totara stylesheet):
Primary deep purple #443b62 buttons, headings, accents
Secondary text colour #333366 body copy
Accent gold #eaab34 hover states, callout highlights
Background light grey #f9f9f9 subtle section fills
Border light #e4e4e4 card and panel borders
Lesson typography:
Body uses the platform default (Open Sans inherited from body styles)
Display headings use Georgia serif for editorial feel inside lessons,
overriding the platform's !important Open Sans rule with !important.
Last updated: 2026-04-28 — initial release for GFM Programme 1
========================================================================== */
/* ============================================================================
SECTION 1 — Lesson container and chrome
============================================================================ */
.zishi-lesson {
max-width: 1140px;
margin: 0 auto;
padding: 1.5rem 1.25rem 3rem;
font-size: 1.0625rem;
line-height: 1.65;
color: #333366;
}
.zishi-lesson * {
box-sizing: border-box;
}
/* ----- Header ------------------------------------------------------------ */
.zishi-lesson .lesson-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 3px solid #c8a5ed;
}
.zishi-lesson .lesson-meta {
font-size: 0.8125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5a5a6a;
margin: 0 0 0.5rem;
font-weight: 600;
}
.zishi-lesson .lesson-title {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif !important;
font-size: 2.125rem !important;
line-height: 1.2;
color: #443b62 !important;
margin: 0 0 1rem !important;
font-weight: 700;
letter-spacing: -0.01em;
}
.zishi-lesson .lesson-context {
font-size: 1.125rem;
line-height: 1.55;
color: #333366;
margin: 0;
font-style: italic;
border-left: 3px solid #443b62;
padding-left: 1rem;
}
/* ----- Objectives and structure callout boxes ---------------------------- */
.zishi-lesson .lesson-objectives,
.zishi-lesson .lesson-structure {
background: #f4f0fb;
border-left: 4px solid #443b62;
padding: 1.25rem 1.5rem;
margin: 0 0 2rem;
border-radius: 0 4px 4px 0;
}
.zishi-lesson .lesson-objectives h2,
.zishi-lesson .lesson-structure h2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif !important;
font-size: 0.9375rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #443b62 !important;
margin: 0 0 0.75rem !important;
}
.zishi-lesson .lesson-objectives ul,
.zishi-lesson .lesson-structure ol {
margin: 0;
padding-left: 1.25rem;
}
.zishi-lesson .lesson-objectives li,
.zishi-lesson .lesson-structure li {
margin-bottom: 0.5rem;
}
.zishi-lesson .lesson-structure ol li::marker {
color: #443b62;
font-weight: 700;
}
/* ----- Body content ------------------------------------------------------ */
.zishi-lesson .lesson-body {
margin-bottom: 2.5rem;
}
.zishi-lesson .lesson-body h2 {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif !important;
font-size: 1.625rem !important;
line-height: 1.3;
color: #443b62 !important;
margin: 2.5rem 0 0.85rem !important;
font-weight: 700;
}
.zishi-lesson .lesson-body h2:first-child {
margin-top: 0 !important;
}
.zishi-lesson .lesson-body h3 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif !important;
font-size: 1.125rem !important;
font-weight: 700 !important;
color: #443b62 !important;
margin: 1.75rem 0 0.5rem !important;
}
.zishi-lesson .lesson-body p {
margin: 0 0 1.1rem;
}
.zishi-lesson .lesson-body em {
font-style: italic;
color: #443b62;
}
.zishi-lesson .lesson-body strong {
font-weight: 700;
}
.zishi-lesson .lesson-body ul,
.zishi-lesson .lesson-body ol {
margin: 0 0 1.25rem 0;
padding-left: 1.5rem;
}
.zishi-lesson .lesson-body li {
margin-bottom: 0.4rem;
}
.zishi-lesson .lesson-body a {
color: #443b62;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.zishi-lesson .lesson-body a:hover,
.zishi-lesson .lesson-body a:focus {
color: #eaab34;
text-decoration-thickness: 2px;
}
.zishi-lesson .lesson-body blockquote {
margin: 1.5rem 0;
padding: 0.5rem 0 0.5rem 1.25rem;
border-left: 4px solid #eaab34;
font-style: italic;
color: #333366;
}
/* ----- Tables (for reference data, comparison tables, job aids) ---------- */
.zishi-lesson .lesson-body table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
}
.zishi-lesson .lesson-body caption {
text-align: left;
font-weight: 700;
margin-bottom: 0.5rem;
color: #443b62;
caption-side: top;
}
.zishi-lesson .lesson-body th,
.zishi-lesson .lesson-body td {
text-align: left;
padding: 0.65rem 0.85rem;
border-bottom: 1px solid #c4c3c8;
vertical-align: top;
}
.zishi-lesson .lesson-body th {
background: #f4f0fb;
font-weight: 700;
color: #443b62;
}
/* ----- Recap panel ------------------------------------------------------- */
.zishi-lesson .lesson-recap {
background: #f9f9f9;
padding: 1.5rem 1.75rem;
margin: 2.5rem 0 1rem;
border-radius: 6px;
border-top: 4px solid #eaab34;
}
.zishi-lesson .lesson-recap h2 {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif !important;
font-size: 1.25rem !important;
color: #443b62 !important;
margin: 0 0 0.85rem !important;
font-weight: 700;
}
.zishi-lesson .lesson-recap ul {
margin: 0;
padding-left: 1.25rem;
}
.zishi-lesson .lesson-recap li {
margin-bottom: 0.55rem;
}
.zishi-lesson .lesson-recap li::marker {
color: #443b62;
}
/* ----- Footer ------------------------------------------------------------ */
.zishi-lesson .lesson-footer {
margin-top: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid #c4c3c8;
}
.zishi-lesson .lesson-next {
margin: 0;
font-size: 0.95rem;
color: #5a5a6a;
}
.zishi-lesson .lesson-next::before {
content: "→ ";
color: #443b62;
font-weight: 700;
}
/* ----- Embed placeholders (animation, H5P) ------------------------------- */
.zishi-lesson .embed-placeholder {
background: #0B1133;
color: #ffffff;
padding: 1.75rem 1.75rem 1.5rem;
border-radius: 6px;
margin: 2rem 0;
border: 1px dashed #c8a5ed;
}
.zishi-lesson .embed-placeholder p {
margin: 0 0 0.75rem;
color: #ffffff;
font-size: 0.95rem;
}
.zishi-lesson .embed-placeholder p:last-child {
margin-bottom: 0;
color: #c4c3c8;
font-size: 0.875rem;
font-style: italic;
}
.zishi-lesson .embed-placeholder strong {
color: #eaab34;
font-weight: 700;
display: block;
margin-bottom: 0.4rem;
font-size: 1rem;
}
.zishi-lesson .embed-animation::before,
.zishi-lesson .embed-h5p::before {
display: inline-block;
margin-right: 0.5rem;
color: #c8a5ed;
font-size: 1.1rem;
vertical-align: -0.05em;
}
.zishi-lesson .embed-animation::before { content: "▶"; }
.zishi-lesson .embed-h5p::before { content: "✦"; }
/* ----- Author-visible TODO markers (remove before go-live) --------------- */
.zishi-lesson .todo {
background: #fff8dc;
border: 2px dashed #eaab34;
padding: 0.75rem 1rem;
margin: 1rem 0;
border-radius: 4px;
color: #6b5500;
font-size: 0.95rem;
}
.zishi-lesson .todo::before {
content: "TODO: ";
font-weight: 700;
letter-spacing: 0.04em;
}
/* ----- Responsive (mobile) ----------------------------------------------- */
@media (max-width: 600px) {
.zishi-lesson {
padding: 1rem 1rem 2rem;
font-size: 1rem;
}
.zishi-lesson .lesson-title {
font-size: 1.625rem !important;
}
.zishi-lesson .lesson-context {
font-size: 1.05rem;
}
.zishi-lesson .lesson-body h2 {
font-size: 1.35rem !important;
margin-top: 2rem !important;
}
.zishi-lesson .lesson-body h3 {
font-size: 1.05rem !important;
}
.zishi-lesson .embed-placeholder {
padding: 1.25rem 1rem;
margin: 1.5rem 0;
}
.zishi-lesson .lesson-objectives,
.zishi-lesson .lesson-structure,
.zishi-lesson .lesson-recap {
padding: 1.1rem 1.25rem;
}
}
/* ----- Reduced motion (system-level accessibility) ----------------------- */
@media (prefers-reduced-motion: reduce) {
.zishi-lesson *,
.zishi-lesson *::before,
.zishi-lesson *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ----- Print (downloadable workbook job aids and accessibility) ---------- */
@media print {
.zishi-lesson {
max-width: 100%;
padding: 0;
font-size: 11pt;
}
.zishi-lesson .embed-placeholder {
border: 1px solid #999;
background: #fff;
color: #000;
page-break-inside: avoid;
}
.zishi-lesson .embed-placeholder p,
.zishi-lesson .embed-placeholder strong {
color: #000;
}
.zishi-lesson .lesson-footer {
display: none;
}
.zishi-lesson .lesson-recap {
page-break-inside: avoid;
}
}
/* ============================================================================
SECTION 2 — Animation embed (financial intermediation flow, M01-L02)
============================================================================
Used inside .zishi-lesson .lesson-body. The .fi-embed wrapper plus all
children are scoped to keep styles isolated from the rest of the lesson.
Future animations follow the same pattern with their own prefix.
========================================================================== */
.zishi-lesson .fi-embed {
--fi-navy: #0A1B3D;
--fi-navy-line: #1F3470;
--fi-white: #FFFFFF;
--fi-muted: #B9C2D6;
--fi-grey: #C4C3C8;
--fi-lilac: #C8A5ED;
--fi-yellow: #F2C964;
--fi-w: 1140px;
--fi-h: 520px;
width: 100%;
max-width: var(--fi-w);
margin: 2rem auto;
background: var(--fi-navy);
color: var(--fi-white);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
position: relative;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 1140 / 520;
contain: content;
isolation: isolate;
}
.zishi-lesson .fi-embed,
.zishi-lesson .fi-embed *,
.zishi-lesson .fi-embed *::before,
.zishi-lesson .fi-embed *::after {
box-sizing: border-box;
}
.zishi-lesson .fi-embed::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 22px 22px;
pointer-events: none;
z-index: 0;
}
.zishi-lesson .fi-stage {
position: absolute;
inset: 0;
z-index: 1;
}
/* Caption strip */
.zishi-lesson .fi-caption {
position: absolute;
left: 32px; right: 32px; top: 48px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
line-height: 1.45;
color: var(--fi-white);
min-height: 44px;
letter-spacing: 0.005em;
}
.zishi-lesson .fi-caption .lead,
.zishi-lesson .fi-caption .closer {
position: absolute;
left: 0; right: 0; top: 0;
opacity: 0;
transition: opacity 600ms ease;
pointer-events: none;
}
.zishi-lesson .fi-caption .lead.is-on,
.zishi-lesson .fi-caption .closer.is-on {
opacity: 1;
}
.zishi-lesson .fi-caption .closer {
color: var(--fi-yellow);
font-weight: 600;
}
/* Three-column layout */
.zishi-lesson .fi-cols {
position: absolute;
left: 32px; right: 32px;
top: 116px; bottom: 70px;
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: 28px;
z-index: 2;
}
.zishi-lesson .fi-col {
position: relative;
padding: 16px;
border-radius: 4px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
transition: opacity 400ms ease;
opacity: 0.55;
}
.zishi-lesson .fi-col.is-on {
opacity: 1;
border-color: rgba(200,165,237,0.45);
background: rgba(200,165,237,0.06);
}
.zishi-lesson .fi-col__eyebrow {
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fi-lilac);
font-weight: 700;
margin-bottom: 4px;
}
.zishi-lesson .fi-col__title {
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
color: var(--fi-white);
margin: 0 0 12px;
}
.zishi-lesson .fi-col__list {
list-style: none;
margin: 0;
padding: 0;
font-size: 12px;
line-height: 1.7;
color: var(--fi-muted);
}
.zishi-lesson .fi-col__list li::before {
content: "·";
color: var(--fi-lilac);
margin-right: 8px;
font-weight: 700;
}
/* Token pools (capital flowing) */
.zishi-lesson .fi-pool,
.zishi-lesson .fi-fill {
position: absolute;
bottom: 14px; left: 16px; right: 16px;
display: flex;
flex-wrap: wrap;
gap: 4px 5px;
}
.zishi-lesson .fi-token {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--fi-grey);
opacity: 0;
transform: scale(0.6);
transition: opacity 350ms ease, transform 350ms ease, background-color 350ms ease;
}
.zishi-lesson .fi-token.is-on {
opacity: 1;
transform: scale(1);
}
.zishi-lesson .fi-fill .fi-token.is-on {
background: var(--fi-lilac);
}
/* Centre card and transformations */
.zishi-lesson .fi-centre-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
padding: 12px;
margin-bottom: 12px;
}
.zishi-lesson .fi-pieces {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.zishi-lesson .fi-pieces span {
font-size: 11px;
padding: 4px 10px;
background: rgba(200,165,237,0.12);
color: var(--fi-white);
border-radius: 12px;
border: 1px solid rgba(200,165,237,0.3);
}
.zishi-lesson .fi-transforms {
display: flex;
flex-direction: column;
gap: 8px;
}
.zishi-lesson .fi-transform {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
color: var(--fi-muted);
opacity: 0.5;
transition: opacity 350ms ease, color 350ms ease;
}
.zishi-lesson .fi-transform.is-on {
opacity: 1;
color: var(--fi-white);
}
.zishi-lesson .fi-transform__dot {
width: 6px;
height: 6px;
margin-top: 5px;
border-radius: 50%;
background: var(--fi-lilac);
flex-shrink: 0;
}
/* Particle canvas */
.zishi-lesson .fi-particles {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
/* Bottom control strip */
.zishi-lesson .fi-bottom {
position: absolute;
left: 32px; right: 32px; bottom: 22px;
display: flex;
align-items: center;
gap: 14px;
z-index: 4;
}
.zishi-lesson .fi-control {
width: 28px;
height: 28px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
color: var(--fi-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
}
.zishi-lesson .fi-control:hover,
.zishi-lesson .fi-control:focus {
background: rgba(255,255,255,0.18);
outline: none;
}
.zishi-lesson .fi-progress {
flex: 1;
height: 2px;
background: rgba(255,255,255,0.15);
border-radius: 1px;
overflow: hidden;
}
.zishi-lesson .fi-progress__fill {
height: 100%;
width: 0%;
background: var(--fi-lilac);
transition: width 200ms linear;
}
.zishi-lesson .fi-meta {
font-size: 10.5px;
color: var(--fi-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.zishi-lesson .fi-logo {
font-size: 10.5px;
letter-spacing: 0.16em;
color: var(--fi-muted);
font-weight: 700;
flex-shrink: 0;
display: flex;
flex-direction: column;
line-height: 1.2;
text-align: right;
}
.zishi-lesson .fi-logo small {
font-size: 9px;
letter-spacing: 0.06em;
font-weight: 400;
color: rgba(185,194,214,0.7);
margin-top: 1px;
}
/* Mobile sizing for animation */
@media (max-width: 600px) {
.zishi-lesson .fi-embed {
aspect-ratio: 380 / 520;
}
.zishi-lesson .fi-cols {
left: 16px; right: 16px;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1.2fr 1fr;
gap: 10px;
top: 96px; bottom: 60px;
}
.zishi-lesson .fi-caption {
left: 16px; right: 16px;
font-size: 12px;
}
.zishi-lesson .fi-bottom {
left: 16px; right: 16px;
}
}
/* ============================================================================
END ZISHI Lesson Styles
========================================================================== */
/* ============================================================================
ZISHI Module Hero & Lesson Carousel — append to zishi-lesson-styles.css
============================================================================
For module-level pages within course sections. The module hero is a full-
width banner containing module identity (number, title, tagline) plus
learning outcomes. Below it sits a horizontally scrolling carousel of
lesson cards, each linking to a Totara activity.
Scoped under:
.zishi-module-hero — the banner block at the top of a section
.zishi-lesson-carousel — the 9-card carousel below it
.zishi-hide-activities — utility class added to the section to hide
the underlying activity list
Brand palette consistent with the rest of the stylesheet:
#443b62 deep purple (primary)
#c8a5ed lilac (accent)
#eaab34 gold (highlight)
#333366 text
#f4f0fb light purple (panel fill)
To install: paste this entire block at the bottom of the existing
zishi-lesson-styles.css in the theme Custom CSS field, after the END
marker of the previous section.
========================================================================== */
/* ============================================================================
GLOBAL FIX — prevent horizontal page scroll, robust at any zoom level
============================================================================ */
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
position: relative;
}
/* ============================================================================
SECTION 3 — Module Hero (full-width banner)
============================================================================ */
.zishi-module-hero {
--hero-navy: #1a1340;
--hero-purple: #443b62;
--hero-lilac: #c8a5ed;
--hero-gold: #eaab34;
--hero-white: #ffffff;
--hero-fade: rgba(255,255,255,0.72);
position: relative;
/* Full-width hero without viewport math — uses negative margins relative to a known parent */
margin-left: calc(-1 * (100vw - 100%) / 2);
margin-right: calc(-1 * (100vw - 100%) / 2);
max-width: 100vw;
margin-top: -1.5rem;
margin-bottom: 2.5rem;
padding: 4.5rem 2rem 4rem;
background: linear-gradient(135deg, #1a1340 0%, #2d2658 35%, #443b62 70%, #5a4d7a 100%);
color: var(--hero-white);
overflow: hidden;
isolation: isolate;
}
/* Decorative geometric shapes — built in CSS, no image required */
.zishi-module-hero::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 480px;
height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200,165,237,0.18) 0%, rgba(200,165,237,0) 70%);
z-index: 0;
}
.zishi-module-hero::after {
content: "";
position: absolute;
bottom: -200px;
left: -100px;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(234,171,52,0.08) 0%, rgba(234,171,52,0) 60%);
z-index: 0;
}
/* Optional decorative grid pattern */
.zishi-module-hero__pattern {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 48px 48px;
z-index: 0;
pointer-events: none;
}
.zishi-module-hero__inner {
position: relative;
z-index: 1;
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.zishi-module-hero__identity {
position: relative;
}
.zishi-module-hero__eyebrow {
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--hero-lilac);
font-weight: 700;
margin: 0 0 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.zishi-module-hero__eyebrow::before {
content: "";
width: 32px;
height: 2px;
background: var(--hero-gold);
flex-shrink: 0;
}
.zishi-module-hero__title {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif !important;
font-size: 3rem !important;
line-height: 1.1 !important;
font-weight: 700;
margin: 0 0 1.25rem !important;
color: var(--hero-white) !important;
letter-spacing: -0.015em;
}
.zishi-module-hero__tagline {
font-size: 1.15rem;
line-height: 1.55;
color: rgba(255,255,255,0.85);
margin: 0;
max-width: 95%;
}
/* Learning outcomes panel on the right */
.zishi-module-hero__outcomes {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(200,165,237,0.25);
border-radius: 4px;
padding: 1.75rem 1.85rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.zishi-module-hero__outcomes-label {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--hero-lilac);
font-weight: 700;
margin: 0 0 0.85rem;
}
.zishi-module-hero__outcomes ul {
list-style: none;
margin: 0;
padding: 0;
}
.zishi-module-hero__outcomes li {
position: relative;
padding-left: 1.65rem;
margin-bottom: 0.7rem;
font-size: 0.95rem;
line-height: 1.45;
color: rgba(255,255,255,0.9);
}
.zishi-module-hero__outcomes li:last-child {
margin-bottom: 0;
}
.zishi-module-hero__outcomes li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--hero-gold);
}
/* Mobile: stack vertically */
@media (max-width: 900px) {
.zishi-module-hero {
padding: 3rem 1.5rem 2.75rem;
}
.zishi-module-hero__inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.zishi-module-hero__title {
font-size: 2.25rem !important;
}
.zishi-module-hero__tagline {
font-size: 1.05rem;
}
.zishi-module-hero::before {
width: 320px;
height: 320px;
top: -80px;
right: -80px;
}
}
/* ============================================================================
SECTION 4 — Lesson Carousel (horizontal scroll of cards)
============================================================================ */
.zishi-lesson-carousel {
max-width: 1140px;
margin: 0 auto 2.5rem;
padding: 0 1rem;
position: relative;
overflow: hidden;
}
.zishi-lesson-carousel__header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1.25rem;
padding: 0 0.25rem;
}
.zishi-lesson-carousel__heading {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif !important;
font-size: 1.5rem !important;
font-weight: 700;
color: #443b62 !important;
margin: 0 !important;
}
.zishi-lesson-carousel__hint {
font-size: 0.85rem;
color: #5a5a6a;
font-style: italic;
}
/* The scrolling track */
.zishi-lesson-carousel__track {
display: flex;
gap: 1.25rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0.5rem 0.25rem 1.5rem;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Carousel native scrollbar — taller, more visible, with arrow buttons */
.zishi-lesson-carousel__track::-webkit-scrollbar {
height: 14px;
}
.zishi-lesson-carousel__track::-webkit-scrollbar-track {
background: #f4f0fb;
border-radius: 7px;
margin: 0 4px;
}
.zishi-lesson-carousel__track::-webkit-scrollbar-thumb {
background: #c8a5ed;
border-radius: 7px;
border: 2px solid #f4f0fb;
}
.zishi-lesson-carousel__track::-webkit-scrollbar-thumb:hover {
background: #443b62;
}
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button {
background-color: #f4f0fb;
display: block;
background-size: 10px;
background-repeat: no-repeat;
width: 24px;
height: 14px;
}
/* Left arrow */
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button:horizontal:decrement {
background-position: center;
background-image: url("data:image/svg+xml;utf8,");
}
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
background-image: url("data:image/svg+xml;utf8,");
}
/* Right arrow */
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button:horizontal:increment {
background-position: center;
background-image: url("data:image/svg+xml;utf8,");
}
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
background-image: url("data:image/svg+xml;utf8,");
}
/* Firefox fallback — Firefox doesn't support webkit-scrollbar styling */
.zishi-lesson-carousel__track {
scrollbar-width: auto;
scrollbar-color: #c8a5ed #f4f0fb;
}
/* Each lesson card */
.zishi-lesson-card {
flex: 0 0 280px;
min-width: 280px;
scroll-snap-align: start;
background: #ffffff;
border: 1px solid #e4e4e4;
border-radius: 8px;
overflow: hidden;
text-decoration: none !important;
color: inherit !important;
display: flex;
flex-direction: column;
box-shadow: 0 2px 12px rgba(68,59,98,0.06);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.zishi-lesson-card:hover,
.zishi-lesson-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(68,59,98,0.18);
border-color: #c8a5ed;
outline: none;
text-decoration: none !important;
}
.zishi-lesson-card:focus-visible {
outline: 2px solid #eaab34;
outline-offset: 2px;
}
/* The card's icon panel — coloured top section with geometric icon */
.zishi-lesson-card__icon-panel {
position: relative;
height: 140px;
background: linear-gradient(135deg, #443b62 0%, #5a4d7a 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.zishi-lesson-card__icon-panel::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200,165,237,0.25) 0%, rgba(200,165,237,0) 70%);
}
.zishi-lesson-card__icon {
position: relative;
z-index: 1;
width: 64px;
height: 64px;
color: #c8a5ed;
}
.zishi-lesson-card__icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Lesson number badge in top-left of card */
.zishi-lesson-card__number {
position: absolute;
top: 12px;
left: 14px;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
color: rgba(255,255,255,0.7);
z-index: 2;
}
/* Lesson type badge in top-right */
.zishi-lesson-card__type {
position: absolute;
top: 12px;
right: 14px;
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
color: #eaab34;
z-index: 2;
background: rgba(0,0,0,0.25);
padding: 3px 9px;
border-radius: 12px;
border: 1px solid rgba(234,171,52,0.4);
}
/* Card body */
.zishi-lesson-card__body {
flex: 1;
padding: 1.1rem 1.15rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.zishi-lesson-card__title {
font-size: 1rem;
line-height: 1.35;
font-weight: 700;
color: #333366;
margin: 0;
}
.zishi-lesson-card__meta {
font-size: 0.825rem;
color: #5a5a6a;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.zishi-lesson-card__meta-time {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.zishi-lesson-card__meta-time::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border: 1.5px solid currentColor;
border-radius: 50%;
background-image: linear-gradient(to bottom, currentColor 0, currentColor 50%, transparent 50%);
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: center;
opacity: 0.6;
}
.zishi-lesson-card__cta {
margin-top: auto;
padding-top: 0.75rem;
font-size: 0.85rem;
color: #443b62;
font-weight: 700;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.zishi-lesson-card__cta::after {
content: "→";
display: inline-block;
transition: transform 200ms ease;
}
.zishi-lesson-card:hover .zishi-lesson-card__cta::after {
transform: translateX(3px);
}
/* Variant card backgrounds — subtle differentiation by lesson type */
.zishi-lesson-card[data-lesson-type="quiz"] .zishi-lesson-card__icon-panel {
background: linear-gradient(135deg, #2d2658 0%, #443b62 50%, #6b4d8a 100%);
}
.zishi-lesson-card[data-lesson-type="book"] .zishi-lesson-card__icon-panel {
background: linear-gradient(135deg, #443b62 0%, #6b4d8a 100%);
}
.zishi-lesson-card[data-lesson-type="folder"] .zishi-lesson-card__icon-panel {
background: linear-gradient(135deg, #5a5a6a 0%, #443b62 100%);
}
/* Mobile: cards adjust width */
@media (max-width: 600px) {
.zishi-lesson-card {
flex: 0 0 240px;
min-width: 240px;
}
.zishi-lesson-card__icon-panel {
height: 110px;
}
.zishi-lesson-card__icon {
width: 48px;
height: 48px;
}
.zishi-lesson-carousel__heading {
font-size: 1.25rem !important;
}
}
/* ============================================================================
SECTION 5 — Hide the underlying Totara activity list when carousel is shown
============================================================================
Add the class .zishi-hide-activities to the section's HTML, OR target the
section by ID once known. The default Totara Topics format renders each
activity row inside a inside .
========================================================================== */
/* When a section contains a .zishi-module-hero, hide the activity list rows
inside that section. This is done by checking sibling order. The simplest
reliable approach: add .zishi-hide-activities to the section manually. */
.zishi-hide-activities .section.img-text {
display: none !important;
}
/* Optional: also hide the empty "Add an activity or resource" link when
editing is on, but only if the user wants that behaviour */
/* .zishi-hide-activities .section_add_menus { display: none !important; } */
/* ============================================================================
END Module Hero & Carousel additions
========================================================================== */
/* Suppress Totara's native .no-overflow scrollbar around our carousel —
the carousel has its own designed scrollbar (.zishi-lesson-carousel__track) */
.no-overflow:has(.zishi-lesson-carousel) {
overflow-x: hidden !important;
}
/* Fallback for browsers without :has() support — narrows the rule by
targeting any .no-overflow inside a Label activity that contains the carousel */
.modtype_label .no-overflow {
overflow-x: hidden !important;
}
/* ============================================================================
ZISHI Chapter Homepage — append to existing zishi CSS in theme Custom CSS
============================================================================
Three components for the chapter (course-level) homepage:
.zishi-chapter-hero — full-width chapter banner (similar to module hero)
.zishi-resources-strip — small horizontal strip of always-on resources
.zishi-roadmap — vertical journey of 7 stations (6 modules + wrap)
.zishi-roadmap__station — individual module/wrap card on the spine
Brand palette unchanged from existing stylesheet.
Install: paste this entire block at the bottom of the existing CSS, after
the END Module Hero & Carousel additions marker.
========================================================================== */
/* ============================================================================
SECTION 6 — Chapter Hero (full-width banner, course-level)
============================================================================ */
.zishi-chapter-hero {
--hero-navy: #1a1340;
--hero-purple: #443b62;
--hero-lilac: #c8a5ed;
--hero-gold: #eaab34;
--hero-white: #ffffff;
position: relative;
margin-left: calc(-1 * (100vw - 100%) / 2);
margin-right: calc(-1 * (100vw - 100%) / 2);
max-width: 100vw;
margin-top: -1.5rem;
margin-bottom: 2.5rem;
padding: 5rem 2rem 4.5rem;
background:
radial-gradient(circle at 15% 30%, rgba(200,165,237,0.22) 0%, rgba(200,165,237,0) 45%),
radial-gradient(circle at 90% 70%, rgba(234,171,52,0.12) 0%, rgba(234,171,52,0) 50%),
linear-gradient(135deg, #14102d 0%, #2d2658 35%, #443b62 70%, #5a4d7a 100%);
color: var(--hero-white);
overflow: hidden;
isolation: isolate;
}
.zishi-chapter-hero__pattern {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 56px 56px;
z-index: 0;
pointer-events: none;
}
.zishi-chapter-hero__inner {
position: relative;
z-index: 1;
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 3.5rem;
align-items: center;
}
.zishi-chapter-hero__identity {
position: relative;
}
.zishi-chapter-hero__eyebrow {
font-size: 0.8rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--hero-lilac);
font-weight: 700;
margin: 0 0 1.25rem;
display: flex;
align-items: center;
gap: 0.85rem;
}
.zishi-chapter-hero__eyebrow::before {
content: "";
width: 36px;
height: 2px;
background: var(--hero-gold);
flex-shrink: 0;
}
.zishi-chapter-hero__title {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif !important;
font-size: 3.6rem !important;
line-height: 1.05 !important;
font-weight: 700;
margin: 0 0 1.5rem !important;
color: var(--hero-white) !important;
letter-spacing: -0.02em;
}
.zishi-chapter-hero__subtitle {
font-family: Georgia, serif !important;
font-size: 1.4rem !important;
font-style: italic;
line-height: 1.35 !important;
color: rgba(255,255,255,0.78);
margin: 0 0 1.5rem !important;
font-weight: 400;
}
.zishi-chapter-hero__tagline {
font-size: 1.1rem;
line-height: 1.6;
color: rgba(255,255,255,0.85);
margin: 0;
max-width: 95%;
}
/* Outcomes panel on the right */
.zishi-chapter-hero__outcomes {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(200,165,237,0.25);
border-radius: 4px;
padding: 2rem 2rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.zishi-chapter-hero__outcomes-label {
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--hero-lilac);
font-weight: 700;
margin: 0 0 1rem;
}
.zishi-chapter-hero__outcomes ul {
list-style: none;
margin: 0;
padding: 0;
}
.zishi-chapter-hero__outcomes li {
position: relative;
padding-left: 1.65rem;
margin-bottom: 0.85rem;
font-size: 0.95rem;
line-height: 1.5;
color: rgba(255,255,255,0.92);
}
.zishi-chapter-hero__outcomes li:last-child {
margin-bottom: 0;
}
.zishi-chapter-hero__outcomes li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--hero-gold);
}
@media (max-width: 900px) {
.zishi-chapter-hero {
padding: 3rem 1.5rem 2.75rem;
}
.zishi-chapter-hero__inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.zishi-chapter-hero__title {
font-size: 2.4rem !important;
}
.zishi-chapter-hero__subtitle {
font-size: 1.15rem !important;
}
}
/* ============================================================================
SECTION 7 — Resources Strip (between hero and roadmap)
============================================================================ */
.zishi-resources-strip {
max-width: 1140px;
margin: 0 auto 3rem;
padding: 0 1rem;
}
.zishi-resources-strip__label {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #5a5a6a;
font-weight: 700;
margin: 0 0 0.85rem 0.25rem;
}
.zishi-resources-strip__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.zishi-resources-strip__item {
margin: 0;
}
.zishi-resources-strip__link {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.1rem 1.25rem;
background: #ffffff;
border: 1px solid #e4e4e4;
border-left: 4px solid #443b62;
border-radius: 4px;
text-decoration: none !important;
color: #333366 !important;
transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
height: 100%;
}
.zishi-resources-strip__link:hover,
.zishi-resources-strip__link:focus-visible {
border-left-color: #eaab34;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(68,59,98,0.12);
outline: none;
text-decoration: none !important;
}
.zishi-resources-strip__title {
font-weight: 700;
font-size: 0.95rem;
color: #443b62;
display: flex;
align-items: center;
gap: 0.5rem;
}
.zishi-resources-strip__title::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border: 1.5px solid currentColor;
border-radius: 2px;
flex-shrink: 0;
}
.zishi-resources-strip__item--workbook .zishi-resources-strip__title::before {
border-radius: 2px 2px 8px 2px;
}
.zishi-resources-strip__item--glossary .zishi-resources-strip__title::before {
border-radius: 50%;
}
.zishi-resources-strip__item--welcome .zishi-resources-strip__title::before {
border-radius: 0;
transform: rotate(45deg);
}
.zishi-resources-strip__desc {
font-size: 0.8rem;
color: #5a5a6a;
line-height: 1.4;
margin: 0;
}
@media (max-width: 700px) {
.zishi-resources-strip__list {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
/* ============================================================================
SECTION 8 — Roadmap (vertical journey of 7 stations)
============================================================================ */
.zishi-roadmap {
max-width: 1140px;
margin: 0 auto 4rem;
padding: 0 1rem;
position: relative;
}
.zishi-roadmap__header {
margin-bottom: 1.75rem;
padding: 0 0.25rem;
}
.zishi-roadmap__heading {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif !important;
font-size: 1.875rem !important;
font-weight: 700;
color: #443b62 !important;
margin: 0 0 0.5rem !important;
letter-spacing: -0.005em;
}
.zishi-roadmap__hint {
font-size: 1rem;
color: #5a5a6a;
font-style: italic;
margin: 0;
}
/* The track holding the stations and the spine */
.zishi-roadmap__track {
position: relative;
padding-left: 5rem;
list-style: none;
margin: 0;
}
/* The vertical spine running down the left side, behind the station numbers */
.zishi-roadmap__track::before {
content: "";
position: absolute;
left: 1.95rem;
top: 1.5rem;
bottom: 1.5rem;
width: 3px;
background: linear-gradient(to bottom,
#443b62 0%,
#c8a5ed 60%,
#eaab34 100%);
border-radius: 2px;
z-index: 0;
}
.zishi-roadmap__station {
position: relative;
margin-bottom: 1.25rem;
list-style: none;
}
.zishi-roadmap__station:last-child {
margin-bottom: 0;
}
/* Module number marker on the spine (the visual "station") */
.zishi-roadmap__marker {
position: absolute;
left: -3.65rem;
top: 1.25rem;
width: 3.4rem;
height: 3.4rem;
border-radius: 50%;
background: #ffffff;
border: 3px solid #443b62;
display: flex;
align-items: center;
justify-content: center;
font-family: Georgia, serif;
font-size: 1.25rem;
font-weight: 700;
color: #443b62;
z-index: 2;
transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease;
}
/* Variant marker for the wrap station — gold border to signal milestone */
.zishi-roadmap__station--wrap .zishi-roadmap__marker {
border-color: #eaab34;
background: #fff8dc;
color: #6b5500;
font-size: 0.9rem;
}
/* Station card */
.zishi-roadmap__card {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: center;
padding: 1.5rem 1.75rem;
background: #ffffff;
border: 1px solid #e4e4e4;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(68,59,98,0.06);
text-decoration: none !important;
color: inherit !important;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
position: relative;
}
.zishi-roadmap__card:hover,
.zishi-roadmap__card:focus-visible {
transform: translateX(4px);
box-shadow: 0 12px 28px rgba(68,59,98,0.15);
border-color: #c8a5ed;
outline: none;
text-decoration: none !important;
}
.zishi-roadmap__card:focus-visible {
outline: 2px solid #eaab34;
outline-offset: 3px;
}
.zishi-roadmap__card:hover .zishi-roadmap__marker,
.zishi-roadmap__station:hover .zishi-roadmap__marker {
transform: scale(1.08);
border-color: #eaab34;
}
/* Wrap station card has slightly different styling */
.zishi-roadmap__station--wrap .zishi-roadmap__card {
background: linear-gradient(135deg, #fffaef 0%, #ffffff 100%);
border-color: #eaab34;
border-width: 1px 1px 1px 4px;
}
.zishi-roadmap__main {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.zishi-roadmap__eyebrow {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: #5a5a6a;
margin: 0;
display: flex;
align-items: center;
gap: 0.65rem;
}
.zishi-roadmap__time {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #5a5a6a;
font-weight: 600;
letter-spacing: 0.05em;
}
.zishi-roadmap__time::before {
content: "·";
margin-right: 0.1rem;
color: #c4c3c8;
}
.zishi-roadmap__title {
font-family: Georgia, "Iowan Old Style", serif !important;
font-size: 1.4rem !important;
font-weight: 700;
color: #443b62 !important;
margin: 0 !important;
line-height: 1.25;
}
.zishi-roadmap__tagline {
font-size: 0.95rem;
color: #5a5a6a;
margin: 0;
line-height: 1.5;
max-width: 56ch;
}
.zishi-roadmap__outcomes {
margin: 0.4rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.zishi-roadmap__outcomes li {
position: relative;
padding-left: 1.1rem;
font-size: 0.85rem;
color: #5a5a6a;
line-height: 1.4;
}
.zishi-roadmap__outcomes li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #c8a5ed;
}
/* Right side — progress and CTA */
.zishi-roadmap__progress {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.6rem;
min-width: 140px;
}
.zishi-roadmap__progress-label {
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: #5a5a6a;
}
.zishi-roadmap__progress-bar {
width: 140px;
height: 6px;
background: #f4f0fb;
border-radius: 3px;
overflow: hidden;
}
.zishi-roadmap__progress-bar-fill {
height: 100%;
background: linear-gradient(to right, #443b62, #c8a5ed);
border-radius: 3px;
transition: width 400ms ease;
}
.zishi-roadmap__progress-pct {
font-size: 1.15rem;
font-weight: 700;
color: #443b62;
font-variant-numeric: tabular-nums;
}
.zishi-roadmap__cta {
font-size: 0.85rem;
font-weight: 700;
color: #443b62;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.25rem;
}
.zishi-roadmap__cta::after {
content: "→";
display: inline-block;
transition: transform 200ms ease;
}
.zishi-roadmap__card:hover .zishi-roadmap__cta::after {
transform: translateX(3px);
}
/* Status variants */
.zishi-roadmap__station--complete .zishi-roadmap__marker {
background: #443b62;
color: #ffffff;
border-color: #443b62;
}
.zishi-roadmap__station--complete .zishi-roadmap__marker::after {
content: "✓";
position: absolute;
font-size: 1.4rem;
}
.zishi-roadmap__station--complete .zishi-roadmap__marker > * {
display: none;
}
.zishi-roadmap__station--current .zishi-roadmap__marker {
background: #eaab34;
color: #1a1340;
border-color: #eaab34;
box-shadow: 0 0 0 4px rgba(234,171,52,0.18);
}
@media (max-width: 700px) {
.zishi-roadmap__track {
padding-left: 3.75rem;
}
.zishi-roadmap__track::before {
left: 1.4rem;
}
.zishi-roadmap__marker {
left: -2.85rem;
width: 2.6rem;
height: 2.6rem;
font-size: 1rem;
}
.zishi-roadmap__card {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.25rem 1.25rem;
}
.zishi-roadmap__progress {
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.zishi-roadmap__title {
font-size: 1.15rem !important;
}
}
/* ============================================================================
SECTION 9 — Hide existing course homepage section list (Option B)
============================================================================
When the chapter homepage shows hero + roadmap as Section 0 content, the
default Topics-format list of all sections becomes redundant. Hide for
learners only — admins editing keep full access.
========================================================================== */
/* ============================================================================
Hide section list on chapter homepage (learner view only)
Keeps Section 0 visible (it holds our hero, resources strip, and roadmap)
============================================================================ */
/* Hide non-Label activities in any section.img-text inside GFM-P01 course only.
This works on both the single-section view (Module 1 page) AND the chapter homepage
where Welcome/Workbook/Glossary rows live in Section 0's activity list. */
body.course-1112 ul.section.img-text > li.activity:not(.modtype_label) {
display: none !important;
}
/* Hide all section-summary blocks except section-0 on the chapter homepage.
Scoped to GFM-P01 course only — won't affect any other course. */
body.course-1112 ul.topics > li.section-summary[id^="section-"]:not(#section-0) {
display: none !important;
}
/* ============================================================================
END Chapter Homepage additions
========================================================================== */
/* Suppress Totara's native .no-overflow scrollbar around the chapter hero
and any Label-rendered content (carousel and chapter homepage) */
.no-overflow:has(.zishi-lesson-carousel),
.no-overflow:has(.zishi-chapter-hero) {
overflow-x: hidden !important;
}
.modtype_label .no-overflow {
overflow-x: hidden !important;
}
/* Override platform's blanket hide of #completionprogressid for our chapter homepage —
the block needs to render so we can read completion data from it via JS,
but we keep it visually hidden. */
body.course-1112 #completionprogressid {
display: block !important;
position: absolute !important;
left: -10000px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ============================================================================
Hide the Course completion status block from the chapter homepage
============================================================================
The block is added to the GFM-P01 course so its data is reachable via
/blocks/completionstatus/details.php — but we don't want the block visible
on the homepage itself, since the roadmap is the per-module display.
Append to existing zishi-chapter-homepage-additions.css (or anywhere in your
theme Custom CSS).
========================================================================== */
/* Hide the Course completion status block on the GFM-P01 chapter homepage only.
The block's plugin name is `block_completionstatus`; common selectors below
cover Totara/Catalyst variations. */
body.course-1112.path-course-view .block_completionstatus,
body.course-1112.path-course-view section[class*="block_completionstatus"],
body.course-1112.path-course-view div[class*="block_completionstatus"] {
display: none !important;
}
/* Style adjustment for the wrap roadmap station — its progress block is now
simpler (just a CTA, no bar). Compensate so the layout still looks right. */
.zishi-roadmap__station--wrap .zishi-roadmap__progress--wrap {
min-width: auto;
flex-direction: row;
align-items: center;
}
/* Collapse the right-hand block region on the GFM-P01 chapter homepage so the
hero and roadmap can use full width. The block_completionstatus block needs
to remain in the DOM so the JS can fetch its details, but we don't need
the visual region taking up grid space. */
body.course-1112.path-course-view #block-region-side-post {
display: none !important;
}
/* Reclaim the freed grid columns for the main content area */
body.course-1112.path-course-view #region-main {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* ============================================================================
M01-L02 Animation v5 narration integration plus fixes (auto-linker safe)
============================================================================
This version uses attribute selectors [class~="value"] instead of compound
class selectors like double-class chains, because the user's paste tool
auto-links short patterns it mistakes for domain names, corrupting CSS
selectors.
Behaves identically to the previous version. Replaces it entirely.
Replace the previous "M01-L02 Animation v5" block in your Custom CSS
with this whole file.
========================================================================== */
/* === Click-to-start and replay overlays === */
.zishi-lesson .fi-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(10,19,61,0.92) 0%, rgba(45,38,88,0.92) 100%);
cursor: pointer;
transition: opacity 400ms ease;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* Fully remove from layout when hidden — fixes black bar at top.
Uses attribute selector to dodge auto-link. */
.zishi-lesson .fi-overlay[class~="is-hidden"] {
display: none !important;
}
.zishi-lesson .fi-overlay__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
text-align: center;
padding: 2rem;
max-width: 80%;
}
.zishi-lesson .fi-overlay__btn {
width: 80px;
height: 80px;
border-radius: 50%;
background: #C8A5ED;
color: #0A133D;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(200,165,237,0.35);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.zishi-lesson .fi-overlay:hover .fi-overlay__btn,
.zishi-lesson .fi-overlay:focus-visible .fi-overlay__btn {
transform: scale(1.06);
box-shadow: 0 12px 32px rgba(200,165,237,0.5);
}
.zishi-lesson .fi-overlay:focus-visible {
outline: 2px solid #F2C964;
outline-offset: -4px;
}
.zishi-lesson .fi-overlay__title {
font-family: Georgia, "Palatino Linotype", serif;
font-size: 1.5rem;
font-weight: 700;
color: #FFFFFF;
letter-spacing: 0.01em;
}
.zishi-lesson .fi-overlay__meta {
font-size: 0.875rem;
color: rgba(255,255,255,0.65);
letter-spacing: 0.05em;
}
/* Replay overlay variant — slightly lighter background since closer is already visible underneath */
.zishi-lesson .fi-overlay--replay {
background: linear-gradient(135deg, rgba(10,19,61,0.78) 0%, rgba(45,38,88,0.78) 100%);
}
.zishi-lesson .fi-overlay--replay .fi-overlay__btn {
background: #F2C964;
}
/* === Mute button — state-specific styling (attribute selector, dodges auto-link) === */
.zishi-lesson .fi-control--mute[class~="is-muted"] {
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.45);
position: relative;
}
.zishi-lesson .fi-control--mute[class~="is-muted"]::after {
content: "";
position: absolute;
top: 50%;
left: 18%;
right: 18%;
height: 1.5px;
background: #F2C964;
transform: rotate(-25deg);
transform-origin: center;
}
/* === Column titles in gold for visibility ===
Using literal hex #F2C964 because var(--fi-yellow) resolves wrongly
in this context (computes to a dark purple). */
.zishi-lesson .fi-col__title {
color: #F2C964 !important;
opacity: 1 !important;
}
/* Slight dim before column is "active", but still visible.
Attribute selector dodges auto-link. */
.zishi-lesson .fi-col:not([class~="is-on"]) .fi-col__title {
opacity: 0.85;
}
.zishi-lesson .fi-col[class~="is-on"] .fi-col__title {
opacity: 1;
}
/* === Mobile sizing === */
@media (max-width: 600px) {
.zishi-lesson .fi-overlay__btn {
width: 64px;
height: 64px;
}
.zishi-lesson .fi-overlay__btn svg {
width: 26px;
height: 26px;
}
.zishi-lesson .fi-overlay__title {
font-size: 1.2rem;
}