/* Theme Name: Rocket Requires at least: WordPress 7.0+ Version: 1.0 Last Update: 2024-0306 0000p Author: PaulGagu Text Domain: rocket */ :root{ --paper : #F2F5E8; --iceberg : #C8EEDF; --blue : #213A8F; --orange : #EF9237; --pink : #E5287C; --red : #CA1541; --white : #ffffff; --light : #E4E4E4; --black : #000000; --site-width : 1920px; --site-padx : 3% ; --mobi-padx : 8% ; } html { margin: 0; padding: 0; position: relative; scroll-behavior: smooth; scroll-padding-top: 120px; background-color: var(--paper); } body{ margin: 0 auto !important; padding: 0; max-width: var(--site-width); position: relative; background-color: var(--paper);} 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(-150px); transition: transform 0.3s; z-index: 9999; } .skip-link:focus { transform: translateY(0px); } .raleway { font-family: "Raleway", sans-serif; font-optical-sizing: auto; } /* - - typography - - */ html{ font-size: 10px; } body{ font-family: "Raleway", sans-serif; font-size:16px; font-weight:500; line-height: 24px; letter-spacing: 0.01em; } h1, .font-h1, h2, .font-h2 { font-family: "Raleway", sans-serif; font-weight:800; font-size: 48px; line-height: 48px; letter-spacing: -0.02em; } h3, .font-h3 { font-family: "Raleway", sans-serif; font-weight:800; font-size: 38px; line-height: 44px; letter-spacing: -0.02em; } h4, .font-h4 { font-family: "Raleway", sans-serif; font-weight:800; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; } h5, .font-h5, h6, .font-h6 { font-family: "Raleway", sans-serif; font-weight:800; font-size: 16px; line-height: 24px; } p{ margin-bottom:12px; } p:last-child { margin-bottom: 0; } ol, ul { padding-left: 20px; font-family: "Raleway", sans-serif; font-size:16px; margin-bottom: 12px; } li{ margin-bottom:12px; } li:last-child { margin-bottom: 0; } @media all and ( max-width: 600px ) { body{ font-size: 16px; line-height: 24px; } h1, .font-h1 { font-size: 48px; 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: 18px; line-height: 24px; } h5, .font-h5 { font-size: 16px; line-height: 24px; } h6, .font-h6 { font-size: 16px; line-height: 24px; } } /* - - color & backgrounds - - */ a{ color:var(--red); } a:hover{ color:var(--orange); } a.clean-link, .clean-link { text-decoration: none; } .has-clean-links a{ text-decoration: none; } /* _______________________________ BUILD ____________________________________ */ /* - - - - has-links - - - - */ .has-links-paper a { color:var(--paper); } .has-links-iceberg a { color:var(--iceberg); } .has-links-blue a { color:var(--blue); } .has-links-orange a { color:var(--orange); } .has-links-pink a { color:var(--pink); } .has-links-red a { color:var(--red); } .has-links-white a { color:var(--white); } .has-links-light a { color:var(--light); } .has-links-black a { color:var(--black); } .has-links-hover-paper a:hover { color:var(--paper); } .has-links-hover-iceberg a:hover { color:var(--iceberg); } .has-links-hover-blue a:hover { color:var(--blue); } .has-links-hover-orange a:hover { color:var(--orange); } .has-links-hover-pink a:hover { color:var(--pink); } .has-links-hover-red a:hover { color:var(--red); } .has-links-hover-white a:hover { color:var(--white); } .has-links-hover-light a:hover { color:var(--light); } .has-links-hover-black a:hover { color:var(--black); } /* ----- button colors ------ */ .gb-button{ cursor: pointer !important; } .gb-button-paper, .gb-button-iceberg, .gb-button-blue, .gb-button-orange, .gb-button-pink, .gb-button-red, .gb-button-white, .gb-button-light, .gb-button-black, .btn, .btn-paper, .btn-iceberg, .btn-blue, .btn-orange, .btn-pink, .btn-red, .btn-white, .btn-light, .btn-black { display:inline-block !important; padding:12px 16px; border:0; font-family: 'Raleway', sans-serif; font-size:16px; line-height: 20px; cursor: pointer; transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; text-decoration: none; } .btn-small { line-height: 22px; padding:0 22px; font-size:11px; } .gb-button-paper:hover, .gb-button-iceberg:hover, .gb-button-blue:hover, .gb-button-orange:hover, .gb-button-pink:hover, .gb-button-red:hover, .gb-button-white:hover, .gb-button-light:hover, .gb-button-black:hover, .btn:hover, .btn-paper:hover, .btn-iceberg:hover, .btn-blue:hover, .btn-orange:hover, .btn-pink:hover, .btn-red:hover, .btn-white:hover, .btn-light:hover, .btn-black:hover { transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; } .btn, .gb-button-pink, .btn-pink { color:var(--white); background-color:var(--pink); } .gb-button-paper, .btn-paper { color:var(--white); background-color:var(--paper); } .gb-button-iceberg, .btn-iceberg { color:var(--white); background-color:var(--iceberg); } .gb-button-blue, .btn-blue { color:var(--white); background-color:var(--blue); } .gb-button-orange, .btn-orange { color:var(--white); background-color:var(--orange); } .gb-button-red, .btn-red { color:var(--white); background-color:var(--red); } .gb-button-white, .btn-white { color:var(--white); background-color:var(--white); } .gb-button-light, .btn-light { color:var(--white); background-color:var(--light); } .gb-button-black, .btn-black { color:var(--white); background-color:var(--black); } .btn:hover, .gb-button-pink:hover, .btn-pink:hover { color:var(--white); background-color:var(--black); } .gb-button-paper:hover, .btn-paper:hover { color:var(--white); background-color:var(--black); } .gb-button-iceberg:hover, .btn-iceberg:hover { color:var(--white); background-color:var(--black); } .gb-button-blue:hover, .btn-blue:hover { color:var(--white); background-color:var(--black); } .gb-button-orange:hover, .btn-orange:hover { color:var(--white); background-color:var(--black); } .gb-button-red:hover, .btn-red:hover { color:var(--white); background-color:var(--black); } .gb-button-white:hover, .btn-white:hover { color:var(--white); background-color:var(--black); } .gb-button-light:hover, .btn-light:hover { color:var(--white); background-color:var(--black); } .gb-button-black:hover, .btn-black:hover { color:var(--black); background-color:var(--white); } @media all and ( max-width: 600px ) { } /* ----- color & backgrounds ----- */ .has-paper-color, .color-paper, .paper { color:var(--paper); } .has-iceberg-color, .color-iceberg, .iceberg { color:var(--iceberg); } .has-blue-color, .color-blue, .blue { color:var(--blue); } .has-orange-color, .color-orange, .orange { color:var(--orange); } .has-pink-color, .color-pink, .pink { color:var(--pink); } .has-red-color, .color-red, .red { color:var(--red); } .has-white-color, .color-white, .white { color:var(--white); } .has-light-color, .color-light, .light { color:var(--light); } .has-black-color, .color-black, .black { color:var(--black); } .has-paper-background-color, .bg-paper { background-color:var(--paper); } .has-iceberg-background-color, .bg-iceberg { background-color:var(--iceberg);} .has-blue-background-color, .bg-blue { background-color:var(--blue); } .has-orange-background-color, .bg-orange { background-color:var(--orange); } .has-pink-background-color, .bg-pink { background-color:var(--pink); } .has-red-background-color, .bg-red { background-color:var(--red); } .has-white-background-color, .bg-white { background-color:var(--white); } .has-light-background-color, .bg-light { background-color:var(--light); } .has-black-background-color, .bg-black { background-color:var(--black); } .hover-paper:hover { color:var(--paper); } .hover-iceberg:hover { color:var(--iceberg);} .hover-blue:hover { color:var(--blue); } .hover-orange:hover { color:var(--orange); } .hover-pink:hover { color:var(--pink); } .hover-red:hover { color:var(--red); } .hover-white:hover { color:var(--white); } .hover-light:hover { color:var(--light); } .hover-black:hover { color:var(--black); } .hover-bg-paper:hover { background-color:var(--paper); } .hover-bg-iceberg:hover { background-color:var(--iceberg);} .hover-bg-blue:hover { background-color:var(--blue); } .hover-bg-orange:hover { background-color:var(--orange); } .hover-bg-pink:hover { background-color:var(--pink); } .hover-bg-red:hover { background-color:var(--red); } .hover-bg-white:hover { background-color:var(--white); } .hover-bg-light:hover { background-color:var(--light); } .hover-bg-black:hover { background-color:var(--black); } /* - - - - border-colors - - - - */ .border-paper { border-color:var(--paper); } .border-iceberg { border-color:var(--iceberg);} .border-blue { border-color:var(--blue); } .border-orange { border-color:var(--orange); } .border-pink { border-color:var(--pink); } .border-red { border-color:var(--red); } .border-white { border-color:var(--white); } .border-light { border-color:var(--light); } .border-black { border-color:var(--black); } /* _______________________________ eof:BUILD ____________________________________ */ /* - - - - is-style classes for gutenberg blocks - - - - */ /* core/paragraph */ .is-style-margin-0 { margin:0; } /* - - - - special theme classes - - - - */ @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; } /* ---- forms ---- */ :root{ } .RL-form label { display:block; margin:0; padding:0; line-height: 30px; font-size:14px; } .RL-form select, .RL-form textarea, .RL-form input[type="text"], .RL-form input[type="password"], .RL-form input[type="email"] { display:block; border:0; border-bottom:1px solid white; width:100%; height:40px; margin:0; padding:0 5px; background:transparent; } .RL-form textarea { border-radius:0; height:120px; padding:8px 5px; line-height: 24px; font-size:14px; font-family: "Raleway"; } .RL-form select { } .RL-form option { line-height: 24px; font-size:14px; font-family: "Raleway"; } .RL-form input[type="submit"]{ display:inline-block; line-height: 24px; padding:12px 16px; cursor: pointer; border:0; font-family: 'Raleway', sans-serif; font-size:16px; color:white; background-color:var(--iceberg); color: black; transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; } .RL-form input[type="submit"]:hover { transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; background-color:var(--pink);} .RL-form::placeholder { font-family:14px; color:var(--iceberg); font-family: "Raleway"; } @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; }