/* Theme Name: SSmarty Requires at least: WordPress 7.0+ Version: 1.0 Last Update: 2024-0306 0000p Author: PaulGagu Text Domain: rocket */ :root{ --navy : #1D3A58; --navy2 : #122538; --teal : #007084; --blue : #68B9B4; --yellow : #F3C136; --yellow2 : #E3B533; --orange : #D14C20; --beige : #E8E0D5; --greige : #ECEAE7; --black : #010202; --white : #FFFFFF; --site-width : 1920px; --site-padx : 40px ; --mobi-padx : 8% ; } html { margin: 0; padding: 0; position: relative; scroll-behavior: smooth; scroll-padding-top: 120px; background-color: var(--greige); } body{ margin: 0 auto !important; padding: 0; max-width: var(--site-width); position: relative; background-color: var(--greige);} 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; } @media ( max-width: 600px ){ .content { padding:0 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", serif; font-optical-sizing: auto; font-style:normal; } .ambroise { font-family: 'ambroise-std', serif; font-style: italic; font-weight: 400; } /* - - typography - - */ html{ font-size: 10px; } body{ font-family: "Plus Jakarta Sans", sans-serif; font-size:16px; font-weight:500; 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; } h1, .font-h1 { font-size: 52px; line-height: 56px; } h2, .font-h2 { font-size: 40px; line-height: 48px; } h3, .font-h3 { font-size: 32px; line-height: 40px; } h4, .font-h4 { font-size: 24px; line-height: 32px; } h5, .font-h5 { font-size: 20px; line-height: 28px; } h6, .font-h6 { font-size: 16px; line-height: 24px; } p{ margin-bottom:12px; } p:last-child { margin-bottom: 0; } ol, ul { padding-left: 20px; font-family: "Plus Jakarta Sans", sans-serif; font-size:16px; line-height: 24px; margin-bottom: 12px; } li{ margin-bottom:12px; } li:last-child { margin-bottom: 0; } small, .small { font-size:12px; line-height: 16px; } @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: 40px; } h3, .font-h3 { font-size: 24px; line-height: 32px; } h4, .font-h4 { font-size: 20px; line-height: 28px; } h5, .font-h5 { font-size: 16px; line-height: 24px; } h6, .font-h6 { font-size: 16px; line-height: 24px; } } /* - - color & backgrounds - - */ a{ color:var(--navy); } a:hover{ color:var(--teal); } a.clean-link, .clean-link { text-decoration: none; } .has-clean-links a{ text-decoration: none; } /* _______________________________ BUILD ____________________________________ */ /* - - - - has-links - - - - */ .has-links-navy a { color:var(--navy); } .has-links-teal a { color:var(--teal); } .has-links-blue a { color:var(--blue); } .has-links-yellow a { color:var(--yellow); } .has-links-orange a { color:var(--orange); } .has-links-beige a { color:var(--beige); } .has-links-greige a { color:var(--greige); } .has-links-black a { color:var(--black); } .has-links-white a { color:var(--white); } .has-links-hover-navy a:hover { color:var(--navy); } .has-links-hover-teal a:hover { color:var(--teal); } .has-links-hover-blue a:hover { color:var(--blue); } .has-links-hover-yellow a:hover { color:var(--yellow); } .has-links-hover-orange a:hover { color:var(--orange); } .has-links-hover-beige a:hover { color:var(--beige); } .has-links-hover-greige a:hover { color:var(--greige); } .has-links-hover-black a:hover { color:var(--black); } .has-links-hover-white a:hover { color:var(--white); } /* ----- button colors ------ */ .gb-button{ cursor: pointer !important; } .gb-button-navy, .gb-button-yellow, .gb-button-beige, .btn, .btn-small, .btn-menu { display:inline-block !important; border:0; border-radius:9999px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight:700; cursor: pointer; transition: .2s background-color ease-in-out; text-decoration: none; } .btn { line-height: 24px; font-size:18px; padding: 16px 32px; } .btn-small { line-height: 24px; font-size:16px; padding: 6px 16px; } .btn-menu { line-height: 24px; font-size:18px; padding: 8px 16px; } .gb-button-navy:hover, .gb-button-yellow:hover, .gb-button-beige:hover, .btn:hover, .btn-small:hover, .btn-menu:hover { transition: .2s background-color ease-in-out ; } .btn, .gb-button-yellow, .btn-yellow, a.btn-yellow { color:var(--navy); background-color:var(--yellow); } .gb-button-navy, .btn-navy, a.btn-navy { color:var(--beige); background-color:var(--navy); } .gb-button-beige, .btn-beige, a.btn-beige { color:var(--navy); background-color:var(--beige); } .btn:hover, .gb-button-yellow:hover, .btn-yellow:hover, a.btn-yellow:hover { color:var(--navy); background-color:var(--yellow2); } .gb-button-navy:hover, .btn-navy:hover, a.btn-navy:hover { color:var(--beige); background-color:var(--navy2); } .gb-button-beige:hover, .btn-beige:hover, a.btn-beige:hover { color:var(--navy); background-color:var(--greige); } @media all and ( max-width: 600px ) { } /* ----- color & backgrounds ----- */ .has-navy-color, .color-navy, .navy { color:var(--navy); } .has-teal-color, .color-teal, .teal { color:var(--teal); } .has-blue-color, .color-blue, .blue { color:var(--blue); } .has-yellow-color, .color-yellow, .yellow { color:var(--yellow); } .has-orange-color, .color-orange, .orange { color:var(--orange); } .has-beige-color, .color-beige, .beige { color:var(--beige); } .has-greige-color, .color-greige, .greige { color:var(--greige); } .has-black-color, .color-black, .black { color:var(--black); } .has-white-color, .color-white, .white { color:var(--white); } .has-navy-background-color, .bg-navy { background-color:var(--navy); } .has-teal-background-color, .bg-teal { background-color:var(--teal); } .has-blue-background-color, .bg-blue { background-color:var(--blue); } .has-yellow-background-color, .bg-yellow { background-color:var(--yellow); } .has-orange-background-color, .bg-orange { background-color:var(--orange); } .has-beige-background-color, .bg-beige { background-color:var(--beige); } .has-greige-background-color, .bg-greige { background-color:var(--greige); } .has-black-background-color, .bg-black { background-color:var(--black); } .has-white-background-color, .bg-white { background-color:var(--white); } .hover-navy:hover { color:var(--navy); } .hover-teal:hover { color:var(--teal); } .hover-blue:hover { color:var(--blue); } .hover-yellow:hover { color:var(--yellow); } .hover-orange:hover { color:var(--orange); } .hover-beige:hover { color:var(--beige); } .hover-greige:hover { color:var(--greige); } .hover-black:hover { color:var(--black); } .hover-white:hover { color:var(--white); } .hover-bg-navy:hover { background-color:var(--navy); } .hover-bg-teal:hover { background-color:var(--teal); } .hover-bg-blue:hover { background-color:var(--blue); } .hover-bg-yellow:hover { background-color:var(--yellow); } .hover-bg-orange:hover { background-color:var(--orange); } .hover-bg-beige:hover { background-color:var(--beige); } .hover-bg-greige:hover { background-color:var(--greige); } .hover-bg-black:hover { background-color:var(--black); } .hover-bg-white:hover { background-color:var(--white); } /* - - - - border-colors - - - - */ .border-navy { border-color:var(--navy); border-style:solid; } .border-teal { border-color:var(--teal); border-style:solid; } .border-blue { border-color:var(--blue); border-style:solid; } .border-yellow { border-color:var(--yellow); border-style:solid; } .border-orange { border-color:var(--orange); border-style:solid; } .border-beige { border-color:var(--beige); border-style:solid; } .border-greige { border-color:var(--greige); border-style:solid; } .border-black { border-color:var(--black); border-style:solid; } .border-white { border-color:var(--white); border-style:solid; } /* _______________________________ eof:BUILD ____________________________________ */ /* - - - - is-style classes for gutenberg blocks - - - - */ /* core/paragraph */ .is-style-margin-0 { margin:0; } /* - - - - special theme classes - - - - */ figure{ margin:0 !important;} .mix-font em{ font-family: 'ambroise-std', serif; font-style: italic; font-weight: 400; font-size:140%; } .mix-100\% em{ font-size:100%; } .mix-110\% em{ font-size:110%; } .mix-120\% em{ font-size:120%; } .mix-130\% em{ font-size:130%; } .wide-blue:before { content:''; position:absolute; width:110vw; top:0; bottom:0; z-index:0; left:-10vw; background:var(--blue); } .wide-teal:before { content:''; position:absolute; width:110vw; top:0; bottom:0; z-index:0; left:-10vw; background:var(--teal); } .wide-navy:before { content:''; position:absolute; width:110vw; top:0; bottom:0; z-index:0; left:-10vw; background:var(--navy); } .wide-yellow:before { content:''; position:absolute; width:110vw; top:0; bottom:0; z-index:0; left:-10vw; background:var(--yellow); } .wide-beige:before { content:''; position:absolute; width:110vw; top:0; bottom:0; z-index:0; left:-10vw; background:var(--beige); } .wide-orange:before { content:''; position:absolute; width:110vw; top:0; bottom:0; z-index:0; left:-10vw; background:var(--orange); } .wide-greige:before { content:''; position:absolute; width:110vw; top:0; bottom:0; z-index:0; left:-10vw; background:var(--greige); } .wide-z0:before { z-index:0;} .wide-z10:before{ z-index:10;} .wide-z20:before{ z-index:20;} .wide-z30:before{ z-index:30;} .wide-z40:before{ z-index:40;} .wide-z50:before{ z-index:50;} .rotate-45{ transform: rotate(45deg); } .rotate-90{ transform: rotate(90deg); } @media all and ( max-width: 600px ) { } .video-play{ position: relative; display:inline-block; } .video-play:after{ content:''; position:absolute; top:calc(50% - 20px); left:calc(50% - 20px); width:40px; height:40px; 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='%23FFFFFFAA' /%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; } /* ---- forms ---- */ :root{ } .SS-form label { display:block; margin:0; padding:0; line-height: 30px; font-size:14px; } .SS-form select, .SS-form textarea, .SS-form input[type="text"], .SS-form input[type="password"], .SS-form input[type="email"] { display:block; border:0; border-bottom:1px solid var(--black); width:100%; height:40px; margin:0; padding:0 5px; background:transparent; color:var(--black); font-size:16px; font-family: "Plus Jakarta Sans"; font-weight:500; } .SS-form textarea { border-radius:0; height:120px; padding:8px 5px; line-height: 24px; } .SS-form select { } .SS-form option { line-height: 24px; font-size:16px; font-family: "Plus Jakarta Sans"; } .SS-form ::placeholder { font-family:16px; font-weight:500; color:var(--black); font-family: "Plus Jakarta Sans"; } .SS-form .wpcf7-spinner{ position:absolute; } .SS-form select, .SS-form textarea, .SS-form input[type="text"], .SS-form input[type="email"], .SS-form input[type="password"] { border-bottom:1px solid var(--yellow); color:var(--greige); } .SS-form ::placeholder { color:var(--greige); } .form-navy select, .form-navy textarea, .form-navy input[type="text"], .form-navy input[type="email"], .form-navy input[type="password"] { border-bottom:1px solid var(--navy); color:var(--navy); } .form-navy ::placeholder { color:var(--navy); } @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; } /*-------------------------------------------------------------- # slick slier --------------------------------------------------------------*/ .slick-dots li{ margin:0;} .slick-dots li button:before,.slick-next:before,.slick-prev:before{ font-family:sans-serif; } .slick-dots li button:before{ font-size:50px; opacity:1; color:var(--light);} .slick-dots li.slick-active button:before{opacity:.75;color:var(--red)} .wp-block-cb-carousel .slick-next, .wp-block-cb-carousel .slick-prev{ width:30px; height:30px; font-size: 12px; background-repeat: no-repeat !important; background-size: contain !important; } .wp-block-cb-carousel .slick-next:before, .wp-block-cb-carousel .slick-prev:before{content:' '; font-size: 12px; } .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-dots li button:not(:hover):not(:active){ background-color:transparent;} .wp-block-cb-carousel .slick-next:hover:not(:active), .wp-block-cb-carousel .slick-prev:hover:not(:active){ background-color:transparent; } .wp-block-cb-carousel .slick-next:before{ content:'\276F'; font-size:20px; color:black;} .wp-block-cb-carousel .slick-prev:before{ content:'\276E'; font-size:20px; color:black;} .wp-block-cb-carousel.gsl-slider .slick-prev{ top:112%; left:44% !important; width:14px; } .wp-block-cb-carousel.gsl-slider .slick-next{ top:112%; right:44% !important; width:14px; } .wp-block-cb-carousel.gsl-slider .slick-next:focus, .wp-block-cb-carousel.gsl-slider .slick-next:hover, .wp-block-cb-carousel.gsl-slider .slick-prev:focus, .wp-block-cb-carousel.gsl-slider .slick-prev:hover { color: transparent; } .wp-block-cb-carousel .slick-prev{ left:-40px !important; z-index:30; } .wp-block-cb-carousel .slick-next{ right:-40px !important; z-index:30; } .wp-block-cb-carousel .slick-next{ background-image:url( } .wp-block-cb-carousel .slick-prev{ background-image:url( } .wp-block-cb-carousel.ctrl-red .slick-next:not(:hover):not(:active), .wp-block-cb-carousel.ctrl-red .slick-prev:not(:hover):not(:active){ background-color:var(--red);} .wp-block-cb-carousel.ctrl-red .slick-next:hover:not(:active), .wp-block-cb-carousel.ctrl-red .slick-prev:hover:not(:active){ background-color:var(--red);} .wp-block-cb-carousel.is-style-ctrl-red .slick-next:not(:hover):not(:active), .wp-block-cb-carousel.is-style-ctrl-red .slick-prev:not(:hover):not(:active){ background-color:var(--red);} .wp-block-cb-carousel.is-style-ctrl-red .slick-next:hover:not(:active), .wp-block-cb-carousel.is-style-ctrl-red .slick-prev:hover:not(:active){ background-color:var(--red);} .wp-block-cb-carousel.ctrl-white .slick-next:not(:hover):not(:active), .wp-block-cb-carousel.ctrl-white .slick-prev:not(:hover):not(:active){ background-color:var(--white);} .wp-block-cb-carousel.ctrl-white .slick-next:hover:not(:active), .wp-block-cb-carousel.ctrl-white .slick-prev:hover:not(:active){ background-color:var(--white);} .wp-block-cb-carousel.is-style-ctrl-white .slick-next:not(:hover):not(:active), .wp-block-cb-carousel.is-style-ctrl-white .slick-prev:not(:hover):not(:active){ background-color:var(--white);} .wp-block-cb-carousel.is-style-ctrl-white .slick-next:hover:not(:active), .wp-block-cb-carousel.is-style-ctrl-white .slick-prev:hover:not(:active){ background-color:var(--white);} @media all and ( max-width: 600px ) { .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; }