/* Theme Name: BrilliantC Requires at least: WordPress 7.0+ Version: 1.0 Last Update: 2024-0306 0000p Author: PaulGagu Text Domain: rocket */ :root{ --light : #F7F4F2; --grey : #EBE3DE; --terra : #B8B0AB; --blue : #0A5AEF; --blue2 : #0027BC; --orange : #FC7200; --orange2: #E25900; --yellow : #FFDF01; --white : #ffffff; --medium : #D9D9D9; --black : #000000; --site-width : 1920px; --site-padx : 32px ; --mobi-padx : 32px ; } html { margin: 0; padding: 0; position: relative; scroll-behavior: smooth; scroll-padding-top: 120px; background-color: white; } body{ margin: 0 auto !important; padding: 0; max-width: var(--site-width); position: relative; background-color: var(--white); } main { min-height: 80vh; position: relative; } .content { width:100%; margin:0 auto; padding:0 var(--site-padx); position:relative; } .full-site { width:100%; margin:0 auto; padding:0; position:relative; } .pad-site { padding: var(--site-padx); } .pad-lsite { padding-left: var(--site-padx); } .pad-rsite { padding-right: var(--site-padx); } .pad-hsite { padding-left: var(--site-padx); padding-right: var(--site-padx); } @media ( max-width: 600px ){ .content { padding:0 var(--mobi-padx); } .pad-site { padding: var(--mobi-padx); } .pad-lsite { padding-left: var(--mobi-padx); } .pad-rsite { padding-right: var(--mobi-padx); } .pad-hsite { padding-left: var(--mobi-padx); padding-right: var(--mobi-padx); } } .skip-link { background: black; color:white; height: 30px; left: 50%; padding: 8px; position: absolute; transform: translateY(-120px); transition: transform 0.3s; z-index: 9999; } .skip-link:focus { transform: translateY(0px); } .jakarta { font-family: "Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; } .barlow { font-family: "Barlow Condensed", sans-serif; font-style: normal; } .dm-serif { font-family: "DM Serif Text", serif; font-weight: 400; font-style: italic; } /* - - typography - - */ html{ font-size: 10px; } body{ font-family: "Plus Jakarta Sans", sans-serif; font-size:18px; font-weight:400; line-height: 24px; } h1, .font-h1, h2, .font-h2, h3, .font-h3, h4, .font-h4, h5, .font-h5, h6, .font-h6 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; margin:0 0 12px; } h1, .font-h1 { font-size: 56px; line-height: 68px; } h2, .font-h2 { font-size: 48px; line-height: 58px; } h3, .font-h3 { font-size: 40px; line-height: 48px; } h4, .font-h4 { font-size: 32px; line-height: 38px; } h5, .font-h5 { font-size: 24px; line-height: 32px; } h6, .font-h6 { font-size: 20px; line-height: 24px; } h1 em, .font-h1 em, h2 em, .font-h2 em, h3 em, .font-h3 em, h4 em, .font-h4 em, h5 em, .font-h5 em, h6 em, .font-h6 em { font-family: "DM Serif Text", serif; font-weight: 600; font-size:115%; font-style: italic; } p, ul, ol, li { font-family: 'Plus Jakarta Sans', sans-serif; font-size:18px; font-weight:400; margin:0 0 12px; } ol, ul { padding-left: 20px; } p:last-child { margin-bottom: 0; } li:last-child { margin-bottom: 0; } @media all and (min-width:601px) and (max-width:980px){ body{ font-size: 16px; line-height: 24px; } h1, .font-h1 { font-size: 48px; line-height: 56px; } h2, .font-h2 { font-size: 40px; line-height: 46px; } h3, .font-h3 { font-size: 32px; line-height: 36px; } h4, .font-h4 { font-size: 28px; line-height: 32px; } h5, .font-h5 { font-size: 22px; line-height: 26px; } h6, .font-h6 { font-size: 18px; line-height: 24px; } .font-h0 { font-size: 60px; line-height: 60px; } } @media all and ( max-width: 600px ) { body{ font-size: 16px; line-height: 24px; } h1, .font-h1 { font-size: 40px; line-height: 48px; } h2, .font-h2 { font-size: 32px; line-height: 32px; } h3, .font-h3 { font-size: 24px; line-height: 24px; } h4, .font-h4 { font-size: 20px; line-height: 24px; } h5, .font-h5 { font-size: 18px; line-height: 24px; } h6, .font-h6 { font-size: 16px; line-height: 24px; } .font-h0 { font-size: 60px; line-height: 60px; } p, ul, ol, li { font-size:16px; } } /* - - color & backgrounds - - */ a{ color:var(--orange); } a:hover{ color:var(--blue); } a.clean-link, .clean-link { text-decoration: none; } .has-clean-links a{ text-decoration: none; } /* _______________________________ BUILD ____________________________________ */ /* - - - - has-links - - - - */ .has-links-light a { color:var(--light); } .has-links-grey a { color:var(--grey); } .has-links-terra a { color:var(--terra); } .has-links-blue a { color:var(--blue); } .has-links-blue2 a { color:var(--blue2); } .has-links-orange a { color:var(--orange); } .has-links-orange2 a { color:var(--orange2);} .has-links-yellow a { color:var(--yellow); } .has-links-white a { color:var(--white); } .has-links-medium a { color:var(--medium); } .has-links-black a { color:var(--black); } .has-links-hover-light a:hover { color:var(--light); } .has-links-hover-grey a:hover { color:var(--grey); } .has-links-hover-terra a:hover { color:var(--terra); } .has-links-hover-blue a:hover { color:var(--blue); } .has-links-hover-blue2 a:hover { color:var(--blue2); } .has-links-hover-orange a:hover { color:var(--orange); } .has-links-hover-orange2 a:hover { color:var(--orange2);} .has-links-hover-yellow a:hover { color:var(--yellow); } .has-links-hover-white a:hover { color:var(--white); } .has-links-hover-medium a:hover { color:var(--medium); } .has-links-hover-black a:hover { color:var(--black); } /* ----- button colors ------ */ .gb-button{ cursor: pointer !important; } .gb-button-grey, .gb-button-blue, .gb-button-orange, .gb-button-yellow, .gb-button-white, .gb-button-black, .btn, .btn-grey, .btn-blue, .btn-orange, .btn-yellow, .btn-white, .btn-black { display:inline-block !important; line-height: 1.2; padding:12px 24px; cursor: pointer; border:1px solid; border-radius:8px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; } .btn { color:var(--white); background-color:var(--orange); border-color:var(--orange2); } .gb-button-grey, .btn-grey { color:var(--white); background-color:var(--grey); border-color:var(--terra); } .gb-button-blue, .btn-blue { color:var(--white); background-color:var(--blue); border-color:var(--blue2); } .gb-button-orange, .btn-orange { color:var(--orange2); background-color:var(--white); border-color:var(--orange2); } .gb-button-yellow, .btn-yellow { color:var(--white); background-color:var(--yellow); border-color:var(--yellow); } .gb-button-white, .btn-white { color:var(--orange); background-color:var(--white); border-color:var(--orange); } .gb-button-black, .btn-black { color:var(--white); background-color:var(--black); border-color:var(--black); } .btn:hover { color:var(--white); background-color:var(--orange2); } .gb-button-grey:hover, .btn-grey:hover { color:var(--black); background-color:var(--grey); } .gb-button-blue:hover, .btn-blue:hover { color:var(--black); background-color:var(--blue); } .gb-button-orange:hover, .btn-orange:hover{ color:var(--white); background-color:var(--orange2); } .gb-button-yellow:hover, .btn-yellow:hover{ color:var(--black); background-color:var(--yellow); } .gb-button-white:hover, .btn-white:hover { color:var(--black); background-color:var(--white); } .gb-button-black:hover, .btn-black:hover { color:var(--black); background-color:var(--black); } @media all and ( max-width: 600px ) { } /* ----- color & backgrounds ----- */ .has-light-color, .color-light, .light { color:var(--light); } .has-grey-color, .color-grey, .grey { color:var(--grey); } .has-terra-color, .color-terra, .terra { color:var(--terra); } .has-blue-color, .color-blue, .blue { color:var(--blue); } .has-blue2-color, .color-blue2, .blue2 { color:var(--blue2); } .has-orange-color, .color-orange, .orange { color:var(--orange); } .has-orange2-color, .color-orange2, .orange2 { color:var(--orange2); } .has-yellow-color, .color-yellow, .yellow { color:var(--yellow); } .has-white-color, .color-white, .white { color:var(--white); } .has-medium-color, .color-medium, .medium { color:var(--medium); } .has-black-color, .color-black, .black { color:var(--black); } .has-light-background-color, .bg-light { background-color:var(--light); } .has-grey-background-color, .bg-grey { background-color:var(--grey); } .has-terra-background-color, .bg-terra { background-color:var(--terra); } .has-blue-background-color, .bg-blue { background-color:var(--blue); } .has-blue2-background-color, .bg-blue2 { background-color:var(--blue2); } .has-orange-background-color, .bg-orange{ background-color:var(--orange); } .has-orange2-background-color, .bg-orange2{ background-color:var(--orange2); } .has-yellow-background-color, .bg-yellow{ background-color:var(--yellow); } .has-white-background-color, .bg-white { background-color:var(--white); } .has-medium-background-color, .bg-medium{ background-color:var(--medium); } .has-black-background-color, .bg-black { background-color:var(--black); } .hover-light:hover { color:var(--light); } .hover-grey:hover { color:var(--grey); } .hover-terra:hover { color:var(--terra); } .hover-blue:hover { color:var(--blue); } .hover-blue2:hover { color:var(--blue2); } .hover-orange:hover { color:var(--orange); } .hover-orange2:hover { color:var(--orange2); } .hover-yellow:hover { color:var(--yellow); } .hover-white:hover { color:var(--white); } .hover-medium:hover { color:var(--medium); } .hover-black:hover { color:var(--black); } .hover-bg-light:hover { background-color:var(--light); } .hover-bg-grey:hover { background-color:var(--grey); } .hover-bg-terra:hover { background-color:var(--terra); } .hover-bg-blue:hover { background-color:var(--blue); } .hover-bg-blue2:hover { background-color:var(--blue2); } .hover-bg-orange:hover { background-color:var(--orange); } .hover-bg-orange2:hover { background-color:var(--orange2); } .hover-bg-yellow:hover { background-color:var(--yellow); } .hover-bg-white:hover { background-color:var(--white); } .hover-bg-medium:hover { background-color:var(--medium); } .hover-bg-black:hover { background-color:var(--black); } /* - - - - border-colors - - - - */ .border-light { border-color:var(--light); border-style:solid; } .border-grey { border-color:var(--grey); border-style:solid; } .border-terra { border-color:var(--terra); border-style:solid; } .border-blue { border-color:var(--blue); border-style:solid; } .border-blue2 { border-color:var(--blue2); border-style:solid; } .border-orange { border-color:var(--orange); border-style:solid; } .border-orange2{ border-color:var(--orange2); border-style:solid; } .border-yellow { border-color:var(--yellow); border-style:solid; } .border-white { border-color:var(--white); border-style:solid; } .border-medium { border-color:var(--medium); border-style:solid; } .border-black { border-color:var(--black); border-style:solid; } /* _______________________________ eof:BUILD ____________________________________ */ /* - - - - is-style classes for gutenberg blocks - - - - */ /* core/paragraph */ .is-style-margin-0 { margin:0; } /* - - - - special theme classes - - - - */ .columns-1{ column-count:1; } .columns-2{ column-count:2; } .columns-3{ column-count:3; } .columns-4{ column-count:4; } .col-gap-0 { column-gap: 0px; } .col-gap-10 { column-gap: 10px; } .col-gap-20 { column-gap: 20px; } .col-gap-30 { column-gap: 30px; } .col-gap-40 { column-gap: 40px; } .col-gap-50 { column-gap: 50px; } .col-gap-60 { column-gap: 60px; } @media only screen and ( max-width: 1024px ) { .tablet-columns-1{ column-count:1; } .tablet-columns-2{ column-count:2; } .tablet-columns-3{ column-count:3; } .tablet-columns-4{ column-count:4; } .tablet-col-gap-0 { column-gap: 0px; } .tablet-col-gap-10 { column-gap: 10px; } .tablet-col-gap-20 { column-gap: 20px; } .tablet-col-gap-30 { column-gap: 30px; } .tablet-col-gap-40 { column-gap: 40px; } .tablet-col-gap-50 { column-gap: 50px; } .tablet-col-gap-60 { column-gap: 60px; } } @media only screen and ( max-width: 600px ) { .mobi-columns-1{ column-count:1; } .mobi-columns-2{ column-count:2; } .mobi-columns-3{ column-count:3; } .mobi-columns-4{ column-count:4; } .mobi-col-gap-0 { column-gap: 0px; } .mobi-col-gap-10 { column-gap: 10px; } .mobi-col-gap-20 { column-gap: 20px; } .mobi-col-gap-30 { column-gap: 30px; } .mobi-col-gap-40 { column-gap: 40px; } .mobi-col-gap-50 { column-gap: 50px; } .mobi-col-gap-60 { column-gap: 60px; } } @media all and ( max-width: 600px ) { } .video-play{ position: relative; display:inline-block; } .video-play:after{ content:''; position:absolute; top:calc(50% - 40px); left:calc(50% - 40px); width:80px; height:80px; display:inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 22v-20l18 10-18 10z' fill='%23FFFF00' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover; } .video-play:hover:after{ opacity: 0.9; } .iframe-box, .video-box, [data-iframe], [data-video] { cursor: pointer; } .padding-16 { padding: 16px; } .padding-24 { padding: 24px; } .padding-32 { padding: 32px; } .border-radius-4 { border-radius: 4px; } .border-radius-8 { border-radius: 8px; } /* ---- forms ---- */ :root{ } .BC-form label { display:block; margin:0; padding:0; line-height: 30px; font-size:14px; } .search-form input[type="text"], .BC-form select, .BC-form textarea, .BC-form input[type="text"], .BC-form input[type="password"], .BC-form input[type="email"] { display:block; border:1px solid var(--blue); border-radius:4px; width:100%; height:40px; margin:0; padding:0 5px; background:white; } .BC-form textarea { height:120px; padding:8px 5px; line-height: 24px; font-size:14px; font-family: "Plus Jakarta Sans"; } .BC-form select { } .BC-form option { line-height: 24px; font-size:14px; font-family: "Plus Jakarta Sans"; } .BC-form input[type="submit"]{ } .BC-form input[type="submit"]:hover { } .search-form::placeholder, .BC-form::placeholder { font-family:14px; color:var(--iceberg); font-family: "Plus Jakarta Sans"; } .width-48\% { width:48%; } @media all and ( max-width: 600px ) { } /*-------------------------------------------------------------- # lity lightbox --------------------------------------------------------------*/ .lity-close, .lity-close:active, .lity-close:focus, .lity-close:hover, .lity-close:visited { background: var(--red); } /*-------------------------------------------------------------- # generate blocks styles --------------------------------------------------------------*/ .gb-container { position: relative; } figure{ margin:0; width:100%; height: auto; } /*-------------------------------------------------------------- # slick slier --------------------------------------------------------------*/ .wp-block-cb-carousel .slick-dots li { margin:0;} .wp-block-cb-carousel .slick-dots li button:before { } .wp-block-cb-carousel .slick-dots li button:before { font-size:50px; opacity:0.2; color:var(--black); } .wp-block-cb-carousel .slick-dots li.slick-active button:before { opacity:1; color:var(--orange); } .wp-block-cb-carousel .slick-dots li button:not(:hover):not(:active) { } .wp-block-cb-carousel .slick-dots li button:before { font-size:12px; } .wp-block-cb-carousel .slick-next, .wp-block-cb-carousel .slick-prev{ width:30px; height:30px; font-size:0; background-repeat: no-repeat !important; background-size: contain !important; color:black; } .wp-block-cb-carousel .slick-next{ background-image:url(/National_Library/oe_/https://brilliantcities.org/wp-content/themes/brilliant-c/assets/svgs/icon-arrow.svg); } .wp-block-cb-carousel .slick-prev{ background-image:url(/National_Library/oe_/https://brilliantcities.org/wp-content/themes/brilliant-c/assets/svgs/icon-arrow.svg); transform: scaleX(-1); } .wp-block-cb-carousel .slick-next:before, .wp-block-cb-carousel .slick-prev:before{ content:''; font-size:0; } .wp-block-cb-carousel .slick-next:not(:hover):not(:active), .wp-block-cb-carousel .slick-prev:not(:hover):not(:active){ background-color: transparent; } .wp-block-cb-carousel .slick-next:focus, .wp-block-cb-carousel .slick-next:hover, .wp-block-cb-carousel .slick-prev:focus, .wp-block-cb-carousel .slick-prev:hover { color:transparent; background-image:url(/National_Library/oe_/https://brilliantcities.org/wp-content/themes/brilliant-c/assets/svgs/icon-arrow.svg); } .wp-block-cb-carousel .slick-next:hover:not(:active), .wp-block-cb-carousel .slick-prev:hover:not(:active){ } .wp-block-cb-carousel .slick-prev{ left:-80px !important; z-index:30; } .wp-block-cb-carousel .slick-next{ right:-80px !important; z-index:30; } @media all and ( max-width: 600px ) { .wp-block-cb-carousel .slick-prev{ left:-40px !important; } .wp-block-cb-carousel .slick-next{ right:-40px !important; } .mobi-no-arrows .slick-prev, .mobi-no-arrows .slick-next{ display:none !important; } .mobi-no-dots .slick-dots{ display:none !important; } } /*-------------------------------------------------------------- # plugin forms --------------------------------------------------------------*/ .right-arrow{ padding-right:40px; position:relative; } .right-arrow:before{ content:"\276F"; position:absolute; right:0; background-repeat: no-repeat; top:0; width:28px; height:28px; display:inline-block; border-radius:50%; z-index: 30; border:1px solid currentColor; background: #d4d4d4; text-align: center; font-size: 18px; line-height: 26px; }