/* @group WebFonts */
:root {
--bg-primary: #021c30;
--bg-secondary: #071627;
--bg-dark: #135a98;
--text-yellow: #fdd204;
--text-blue: #36a6fe;
--accent-blue: #073054;
--text-white: #ffffff;
--text-gray: #9ca3af;
/* Additional properties for UI components */
--text-blue-light: #60a5fa;
--text-blue-lighter: #93c5fd;
--overlay-blue: rgba(54, 166, 254, 0.12);
--overlay-white: rgba(255, 255, 255, 0.1);
--tag-bg: rgba(59, 130, 246, 0.1);
--tag-bg-hover: rgba(59, 130, 246, 0.2);
--tag-border: rgba(59, 130, 246, 0.2);
--tag-border-hover: rgba(59, 130, 246, 0.3);
/* Extended color palette from multicraft-page.css */
--bg-light: #04233b;
--bg-dark-alt: #02192b;
--bg-darker: #041f33;
--text-yellow-light: #ffe14e;
--text-light: #e5e7e9;
--text-pale: #f0e4e6;
--text-white-75: rgba(255, 255, 255, 0.75);
--text-white-80: rgba(255, 255, 255, 0.8);
--text-white-85: rgba(255, 255, 255, 0.85);
--text-white-90: rgba(255, 255, 255, 0.9);
--text-white-95: rgba(255, 255, 255, 0.95);
--text-white-70: rgba(255, 255, 255, 0.7);
--accent-orange: #e6a016;
--accent-green: #01ec35;
--button-blue-start: #007bff;
--button-blue-end: #0056b3;
/* Common transparency overlays */
--overlay-black-10: rgba(0, 0, 0, 0.1);
--overlay-black-15: rgba(0, 0, 0, 0.15);
--overlay-black-20: rgba(0, 0, 0, 0.2);
--overlay-black-25: rgba(0, 0, 0, 0.25);
--overlay-black-30: rgba(0, 0, 0, 0.3);
--overlay-white-02: rgba(255, 255, 255, 0.02);
--overlay-white-05: rgba(255, 255, 255, 0.05);
--overlay-white-08: rgba(255, 255, 255, 0.08);
--overlay-white-12: rgba(255, 255, 255, 0.12);
/* Yellow/Gold variations */
--yellow-overlay-05: rgba(253, 210, 4, 0.05);
--yellow-overlay-10: rgba(253, 210, 4, 0.1);
--yellow-overlay-20: rgba(253, 210, 4, 0.2);
--yellow-overlay-30: rgba(253, 210, 4, 0.3);
--yellow-overlay-40: rgba(253, 210, 4, 0.4);
--green-overlay-20: rgba(1, 236, 53, 0.2);
/* Blue overlay variations */
--blue-overlay-10: rgba(0, 123, 255, 0.1);
--blue-overlay-30: rgba(0, 123, 255, 0.3);
--blue-overlay-40: rgba(0, 123, 255, 0.4);
/* Dark overlay variations */
--dark-overlay-05: rgba(33, 37, 41, 0.05);
--dark-overlay-10: rgba(33, 37, 41, 0.1);
/* Solid colors */
--color-black: #000;
--color-white: #fff;
--color-yellow: #fdd204;
/* Common color variations */
--text-white-60: rgba(255, 255, 255, 0.6);
--text-white-50: rgba(255, 255, 255, 0.5);
--text-white-40: rgba(255, 255, 255, 0.4);
--overlay-white-15: rgba(255, 255, 255, 0.15);
--overlay-white-06: rgba(255, 255, 255, 0.06);
--overlay-white-04: rgba(255, 255, 255, 0.04);
--overlay-white-03: rgba(255, 255, 255, 0.03);
/* Blue variations */
--blue-overlay-15: rgba(54, 166, 254, 0.15);
--blue-overlay-12: rgba(54, 166, 254, 0.12);
--blue-overlay-08: rgba(54, 166, 254, 0.08);
--blue-overlay-05: rgba(54, 166, 254, 0.05);
--blue-overlay-04: rgba(54, 166, 254, 0.04);
--blue-overlay-02: rgba(54, 166, 254, 0.02);
--blue-overlay-25: rgba(54, 166, 254, 0.25);
--blue-overlay-20: rgba(54, 166, 254, 0.2);
/* Primary background variations */
--bg-primary-80: rgba(2, 25, 43, 0.8);
--bg-primary-90: rgba(2, 25, 43, 0.9);
--bg-primary-60: rgba(2, 25, 43, 0.6);
--bg-primary-30: rgba(2, 25, 43, 0.3);
--bg-primary-85: rgba(2, 25, 43, 0.85);
/* Yellow variations */
--yellow-overlay-15: rgba(253, 210, 4, 0.15);
--yellow-overlay-08: rgba(253, 210, 4, 0.08);
--yellow-overlay-50: rgba(253, 210, 4, 0.5);
--yellow-overlay-60: rgba(253, 210, 4, 0.6);
--yellow-overlay-80: rgba(253, 210, 4, 0.8);
--yellow-overlay-90: rgba(253, 210, 4, 0.9);
/* Additional background variations */
--bg-gray-800: rgba(31, 41, 55, 0.8);
--bg-gray-700: rgba(55, 65, 81, 0.8);
--bg-gray-600: rgba(75, 85, 99, 0.6);
--bg-gray-500: rgba(55, 65, 81, 0.5);
--bg-gray-600-alt: rgba(31, 41, 55, 0.6);
--bg-gray-700-alt: rgba(55, 65, 81, 0.7);
--border-gray-400: rgba(75, 85, 99, 0.4);
--border-gray-600: rgba(75, 85, 99, 0.6);
/* Complex shadow combinations */
--shadow-complex-1:
0 8px 32px var(--blue-overlay-08), 0 0 0 1px var(--blue-overlay-05),
inset 0 1px 0 var(--overlay-white-03), inset 0 0 16px var(--blue-overlay-02);
--shadow-complex-2:
0 40px 80px rgba(0, 0, 0, 0.18), 0 12px 40px var(--blue-overlay-12),
0 0 0 1px var(--blue-overlay-20), inset 0 1px 0 var(--overlay-white-06),
inset 0 0 24px var(--blue-overlay-04);
/* Other color variations */
--text-blue-light-2: #83c9ff;
/* Common gradients */
--gradient-dark: linear-gradient(
135deg,
var(--bg-dark-alt) 0%,
var(--bg-darker) 100%
);
--gradient-button-blue: linear-gradient(
135deg,
var(--button-blue-start) 0%,
var(--button-blue-end) 100%
);
--gradient-yellow-line: linear-gradient(
90deg,
transparent,
var(--text-yellow),
transparent
);
--gradient-yellow-subtle: linear-gradient(
90deg,
transparent,
var(--yellow-overlay-30),
transparent
);
--gradient-yellow-bg: linear-gradient(
135deg,
var(--yellow-overlay-20),
var(--yellow-overlay-10)
);
--gradient-yellow-bg-hover: linear-gradient(
135deg,
var(--yellow-overlay-30),
var(--yellow-overlay-20)
);
--border-dark: 1px solid #135a9cd8;
}
body {
margin-bottom: 0px;
background: var(--bg-primary);
/*background: var(--bg-primary) url(https://stickypiston.co/wp-content/uploads/bg_shadow.png) repeat-x;
background-image: url(https://stickypiston.co/wp-content/uploads/tile_bg.gif);*/
}
body.christmas.disabled {
background-image: url(https://stickypiston.co/wp-content/uploads/snow_bg3.png);
}
body,
input,
textarea {
color: #e5e7e9;
font-size: 16px;
font-weight: 300;
line-height: 1.8;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
a {
color: var(--text-blue);
text-decoration: none;
}
a:focus,
a:hover {
color: #83c9fe;
color: var(--text-blue-lighter)
text-decoration: underline;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-yellow);
font-weight: 300;
font-family: "Teko", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-wrap: balance;
font-optical-sizing: auto;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
font-weight: 300;
line-height: 1;
color: var(--text-yellow);
}
h1 {
font-size: 50px;
margin: 0 0 10px 0;
}
h2,
.h2 {
font-size: 40px;
}
h3,
.h3 {
font-size: 35px;
}
h4,
.h4 {
font-size: 25px;
}
h5,
.h5 {
font-size: 25px;
}
h6,
.h6 {
font-size: 21px;
}
ul,
ol {
margin: 0 0 0 2.5em;
padding: 0;
}
ol {
line-height: 30px;
}
ul {
list-style: square;
}
#main ol,
#main ul {
margin-bottom: 30px;
}
sup {
top: -0.2em;
}
body.admin-bar {
margin-top: 32px;
}
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.nopadleft {
padding-left: 0 !important;
}
.nopadright {
padding-right: 0 !important;
}
.prettywrap {
text-wrap: balance;
}
.highlight {
color: #fdd204;
font-weight: 300;
}
.highlight-reverse {
background: #fdd204;
color: #000;
padding: 0 5px;
border-radius: 3px;
font-weight: 300;
}
.well {
font-size: 16px;
}
.well h2 {
margin: 0 0 30px;
}
.well .btn {
margin-bottom: 10px;
}
ol.kb {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol.kb > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol.kb > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
ol.kb li ol > li {
margin: 0;
}
ol.kb li ol > li:before {
content: counters(item, ".") " ";
}
#content li,
.main-content li {
padding: 0 0 0 4px;
}
section#main-body,
#content,
.main-content,
#main {
background: #021c30;
}
.hidden {
display: block;
position: absolute;
top: -9999px;
left: -9999px;
}
html.video {
margin: 0 !important;
}
/* @group Header */
#header-notice {
width: 100% !important;
height: 75px !important;
background: #d80000;
text-align: center;
}
.header .container-fluid {
padding: 0;
}
header.header,
section#header {
font:
16px/27px "Roboto Slab",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif !important;
position: relative;
margin-top: 0px;
height: 70px;
background: #071627;
border-bottom: 1px solid #073054;
margin-bottom: 0px;
}
h1.strapline,
h2.strapline {
font-size: 35px;
color: #fff;
position: absolute;
letter-spacing: 0.06em;
top: 25px;
left: 390px;
font-weight: 400;
margin: 0;
}
h1.strapline strong,
h2.strapline strong {
font-weight: 400;
text-transform: uppercase;
}
h1.strapline small,
h2.strapline small {
color: #fff;
}
h1.strapline span,
h2.strapline span {
text-transform: uppercase;
color: #00ed34;
font-weight: 300;
padding-left: 15px;
}
blink,
.blink {
-webkit-animation: blink 1s step-end infinite;
-moz-animation: blink 1s step-end infinite;
-o-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
67% {
opacity: 0;
}
}
@-moz-keyframes blink {
67% {
opacity: 0;
}
}
@-o-keyframes blink {
67% {
opacity: 0;
}
}
@keyframes blink {
67% {
opacity: 0;
}
}
.blinking {
font-size: 14px;
position: absolute;
top: 5px;
right: -20px;
}
.form-group {
margin: 10px 0;
margin-bottom: 10px;
}
.form-control,
#order-standard_cart .form-control {
border-radius: 5px;
padding: 6px 12px 6px 6px;
background: #135a98;
border: 1px solid #135a98;
color: #fff;
height: 37px;
transition: 0.4s all;
font-size: 16px;
}
input#inputPhone.form-control {
padding-left: 84px;
}
.form-control:focus,
#order-standard_cart .form-control:focus {
border-color: #1989e9;
background-color: #073054;
}
.form-control[disabled],
.form-control[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly] {
background-color: rgb(15 23 42);
color: #85b2d9;
}
.form-control::-moz-placeholder,
#order-standard_cart .form-control::-moz-placeholder {
color: #fff;
opacity: 1;
}
.form-control:-ms-input-placeholder,
#order-standard_cart .form-control:-ms-input-placeholder {
color: #fff;
}
.form-control::-webkit-input-placeholder,
#order-standard_cart .form-control::-webkit-input-placeholder {
color: #fff;
}
.form-control::-ms-expand,
#order-standard_cart .form-control::-ms-expand {
background-color: transparent;
border: 0;
}
/* Social Icons */
.social-icons {
position: absolute;
top: 50px;
right: 20px;
}
.social-icons a {
color: #ffffff;
font-size: 25px;
margin: 0 3px;
}
.form-search-head {
position: absolute;
top: 60px;
left: 215px;
padding: 0;
z-index: 1001;
}
.form-search-head .form-control {
background: #273759
url(https://stickypiston.co/wp-content/themes/strappress-sp-child/images/searchwh.png)
no-repeat 10px 7px;
font-size: 15px;
border: 0;
height: 34px;
line-height: 1.2em;
padding: 4px 10px 5px 35px;
color: #ffffff;
border: 1px solid #fff;
font-weight: 400;
z-index: 1500;
}
.form-search-head .form-control::-webkit-input-placeholder {
color: #fff;
}
.form-search-head .form-control::-moz-placeholder {
color: #fff;
} /* firefox 19+ */
.form-search-head .form-control:-ms-input-placeholder {
color: #fff;
} /* ie */
.form-search-head .form-control:-moz-placeholder {
color: #fff;
}
input#searchsubmit {
display: none;
}
.navbar {
margin-bottom: 1px;
}
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
display: block;
height: 81px;
width: 74px;
position: absolute;
z-index: 2000;
background: transparent
url(https://stickypiston.co/wp-content/uploads/Asset-3@2x.png) no-repeat
center center;
margin: 0;
padding: 0;
top: -32px;
left: 0px;
background-size: contain;
}
/*
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
display: block;
height: 72px;
width: 179px;
position: absolute;
z-index: 999;
background: transparent
url(https://stickypiston.co/wp-content/uploads/sp-brand-sh-christmas.png)
no-repeat center center;
margin: 0;
top: -2px;
left: -15px;
}
*/
.navbar-brand span {
left: -10000px;
position: absolute;
}
.navbar-default {
background: none;
border: none;
}
/* Primary Navigation */
#menu-toolbar-container {
margin: 0;
height: 30px;
font-size: 15px;
position: absolute;
top: 15px;
left: 572px;
background: transparent;
}
#menu-toolbar-container ul {
margin: 0;
padding: 0;
}
#menu-toolbar-container li {
float: left;
list-style: none;
padding: 0px;
font-size: 15px;
}
#menu-toolbar-container li a {
padding: 7px 16px;
text-transform: uppercase;
color: #fff;
color: rgba(255, 255, 255, 0.9);
}
#menu-primary-navigation {
top: 16px;
left: 95px;
font-size: 16px;
background: transparent;
padding-left: 0;
float: none;
position: absolute;
width: auto;
}
#menu-primary-navigation li {
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
/*
#menu-primary-navigation li:last-child li {
float: left;
}
*/
#menu-primary-navigation li:last-child ul a {
width: 257px;
}
#menu-primary-navigation li li {
border: 0;
}
#menu-primary-navigation a {
color: #fff;
padding: 7px 7px 7px;
margin: 0 2px 0;
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
font-size: 14px;
}
#menu-primary-navigation li:last-child ul a {
width: 257px;
}
#menu-primary-navigation ul a {
padding: 1px 7px;
line-height: 30px;
border-radius: 3px;
margin: 3px;
text-transform: unset;
font-size: 15px;
}
#menu-primary-navigation li.menu-item-has-children.active a:hover,
#menu-primary-navigation li.menu-item-has-children a,
.navbar-default .navbar-nav > li > a:hover {
border-radius: 3px 3px 0 0;
}
#menu-primary-navigation li.menu-item-has-children.active a {
border-radius: 3px;
}
#menu-primary-navigation ul.dropdown-menu a {
border-radius: 3px;
}
#menu-primary-navigation li:hover > a,
#menu-primary-navigation li li:hover > a,
#menu-primary-navigation li.open,
#menu-primary-navigation li.open a,
.navbar-nav li.open .dropdown-menu,
.navbar-nav li:hover .dropdown-menu {
background: #08365f;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > li > a:hover {
background: #a30438;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
background: #a30438;
}
/* Dropdown menu */
.dropdown-menu {
font-size: 15px;
padding: 0;
font-weight: 400;
border: none;
-webkit-box-shadow: 10px 10px 12px rgba(0, 0, 0, 0.3);
box-shadow: 10px 10px 12px rgba(0, 0, 0, 0.3);
margin: 0 2px 0;
width: 300px;
}
.dropdown-menu > li > a {
font-weight: 400;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > .dropdown-menu > .active > a {
background: #e5204b;
}
.navbar-nav > li > .dropdown-menu {
border-radius: 0px 3px 3px 3px;
margin-top: -2px;
}
#menu-primary-navigation .dropdown-menu .dropdown-menu {
border-radius: 0px 3px 3px 0px;
}
#menu-primary-navigation .dropdown-menu > li > a:focus,
#menu-primary-navigation .dropdown-menu > li > a:hover,
#menu-primary-navigation .dropdown-menu > li.active > a {
color: #fff;
background: #052949;
}
.dropdown-menu .dropdown-menu {
left: 200px;
top: -3px;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.navbar-nav .dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(6px) scale(0.98);
transition:
opacity 180ms ease,
transform 180ms ease,
visibility 0s linear 180ms;
background: rgba(9, 22, 39, 0.72);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 12px;
/* border: 1px solid rgba(255, 255, 255, 0.08); */
box-shadow: 0 20px 24px rgba(0, 0, 0, 0.28);
padding: 6px 10px 12px 10px;
}
.navbar-nav li.open > .dropdown-menu,
.navbar-nav li:hover > .dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
transition:
opacity 200ms ease,
transform 200ms ease,
visibility 0s;
}
.navbar-nav .dropdown-menu > li > a {
color: #fff;
background: transparent;
border-radius: 8px;
padding: 8px 10px;
}
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
background: rgba(255, 255, 255, 0.08);
}
.navbar-nav .dropdown-menu .dropdown-menu {
margin-left: 6px;
margin-top: -4px;
transform: translateX(6px);
}
/* @start custom version select dropdcaown */
.custom-select {
--custom-dropdown-margin: 0px;
position: relative;
user-select: none;
font-size: 16px !important;
margin: 0;
}
.custom-select > #version-select-label {
font-size: 17px;
color: #cde8fb;
font-weight: 200;
margin-left: 3px;
}
.custom-select > .selected {
display: flex;
align-items: center;
margin: 5px 0 10px 0;
font-size: 16px;
}
.custom-select > .selected > .arrow-container {
display: flex;
align-items: center;
}
.custom-select > .selected .dropdown-arrow {
fill: white;
}
.custom-select > .options {
position: absolute;
top: 100%;
left: var(--custom-dropdown-margin);
background: #135a98;
color: white;
width: calc(100% - (var(--custom-dropdown-margin) * 2));
border-radius: 0 0 10px 10px;
z-index: 1;
overflow: auto;
max-height: 250px;
margin-top: -2px;
}
.custom-select > .options > .option {
border: 1px solid #135a98;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 0;
border-style: solid;
padding: 5px;
cursor: pointer;
display: flex;
}
.custom-select > .options > :first-child {
border-top-width: 1px;
}
.custom-select > .options > :last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.custom-select > .options > .option:hover {
background: #104879;
}
/* Generic flag styling */
.custom-select .flag {
border-radius: 3px;
padding: 3px 7px;
margin: 0 5px 2px 0;
font-size: 0.8em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
}
/* Release Type Flags */
.custom-select > .options > .option .stable {
background: #004d00;
}
.custom-select > .options > .option .beta {
color: black;
background: orange;
}
.custom-select > .options > .option .alpha {
color: white;
background: red;
}
.custom-select > .options > .option .default {
background: green;
}
.custom-select > .options > .option .live {
background: #004d00;
}
.custom-select > .options > .option .needs-testing {
color: black;
background: yellow;
}
.custom-select > .options > .option .test-failed {
background: darkred;
color: white;
}
/* General Flags */
.custom-select .staff.flag {
color: black;
background: yellow;
}
.custom-select .minecraft-version {
color: white;
background: #073054;
margin: 0px 10px 0px 0px;
}
/* @end custom version select dropdown */
.order a {
border-radius: 3px;
}
.jumbotron .h1,
.jumbotron h1 {
font-size: 35px;
}
.jumbotron p {
font-size: 16px;
}
/* Login Popover */
#top-nav {
position: absolute;
text-align: center;
right: 0;
top: 20px;
}
#top-nav {
background: #041727 !important;
box-shadow: 0 10px 12px #04213b8c;
width: 100%;
top: 0;
padding: 10px 0 2px;
margin-bottom: 0px;
position: inherit;
}
#top-nav #menu-toolbar {
list-style: none;
font-size: 15px;
margin: 0 0 5px 90px;
padding: 5px 0 0 0;
display: flex;
}
#top-nav #menu-toolbar li a {
color: #fff;
font-weight: 500;
padding: 7px 7px;
border-radius: 5px;
border: 1px solid transparent;
}
#top-nav #menu-toolbar li a:hover {
background: #093054;
text-decoration: none;
border: 1px solid #125a98;
}
#top-nav a.quick-nav {
color: #fff;
font-size: 16px;
margin: 0 0 0 15px;
}
#top-nav a.quick-nav:hover {
text-decoration: none;
}
a#languageChooser {
padding-top: 2px;
}
#top-nav .nav {
margin-top: 3px;
margin-right: 100px;
}
@media (max-width: 991px) {
#top-nav .nav {
margin-top: 3px;
margin-right: 107px;
}
}
.pull-right.nav.languagechooser {
margin-right: 7px !important;
}
#top-nav .badge {
background-color: #fcd106;
color: #073054;
font-weight: 700;
margin-top: -3px;
}
.badge {
border-radius: 3px;
padding: 4px 7px;
margin: 0 3px;
font-weight: 400;
}
#top-nav a#loginOrRegister,
#top-nav a#AccountLoggedIn {
background: #3ab200;
text-decoration: none;
padding: 3px 15px;
border-radius: 5px;
display: inline-block;
margin-right: 0px;
}
a#gscWrapperCollapseButton,
#top-nav a#loginOrRegister,
#top-nav a#AccountLoggedIn {
min-height: 34px;
}
#top-nav a#loginOrRegister:hover,
#top-nav a#AccountLoggedIn:hover {
background: #339b01;
box-shadow: 1px 1px 10px #3175b9;
}
.login-popover {
font-size: 15px;
}
.login-popover .form-group {
margin-bottom: 10px;
}
.popover-title {
font-size: 25px;
text-align: center;
padding: 10px 0 5px 0;
background-color: #072949;
border-bottom: 1px solid #021c30;
margin: -5px -10px 5px -10px;
}
.login-popover .btn-primary.orderbutton {
text-transform: capitalize;
margin: 15px auto 15px auto;
display: block;
}
.popover {
max-width: 360px;
font-size: 13px;
border-radius: 10px;
background: #093054;
border: none;
}
.popover-user-notifications ul li a {
color: #fff;
}
.popover-user-notifications ul li a:hover {
background-color: #0f3d74;
}
.login-popover fieldset {
margin: 20px 0 0 0;
padding: 0;
}
.login-popover legend {
margin: 10px 0;
border: 2px solid #0f3d74;
border-width: 0 0 2px 0;
line-height: 0px;
font-size: 22px;
font-family: "Teko", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #0f3d74;
}
.login-popover legend span {
background: #fff;
padding: 0 5px;
}
.popover.bottom > .arrow:after {
border-bottom-color: #093054;
}
.popover-content {
padding: 5px 10px;
}
.popover-content .panels {
background-color: #0c2f57;
background-image: -webkit-linear-gradient(
top,
#0c2f57,
#124683
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#0c2f57,
#124683
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
padding: 7px 5px 3px 5px;
color: #fff;
border-radius: 5px;
width: 338px;
font-size: 14px;
}
.popover-content .panels h4 {
color: #fff;
margin: 0 0 7px;
}
.popover-content .btn {
text-transform: capitalize;
}
.popover-content .btn i.fas {
font-size: 20px;
}
.popover-content .panels a {
color: #fff;
text-decoration: none;
}
.control-panels ul {
display: flex;
list-style: none;
margin: 0 0 10px 0 !important;
padding: 0;
justify-content: space-around;
}
.control-panels ul li {
padding: 0px;
font-weight: bold;
text-transform: uppercase;
border: none !important;
font-size: 12px;
}
.control-panels ul li a,
.popover-user-notifications .control-panels ul li a {
padding: 6px 7px;
border-radius: 3px;
color: #fff;
}
.popover-user-notifications .control-panels ul li a:hover,
.control-panels ul li a:hover {
background: #093054;
text-decoration: none;
border: 1px solid #125a98;
padding: 5px 6px;
}
.popover-content .control-panels img.flag {
border: 1px solid #8686ad;
width: 25px;
margin: 0px 4px 2px 0px;
}
#languageChooser .fa-language {
font-size: 23px;
}
#AccountLoggedInContent li {
min-height: 48px;
}
#AccountLoggedInContent li a {
padding: 10px 15px 10px 12px;
}
.popover-user-notifications {
padding: 5px 10px;
}
.popover-user-notifications .popover-content {
padding: 0;
}
.popover-user-notifications ul {
margin: 0;
padding: 0;
list-style: none;
}
.popover-user-notifications ul li {
padding: 0px 0;
min-height: auto;
border-bottom: 1px solid #021c30;
}
.popover-user-notifications ul li a {
padding: 7px 15px 7px 12px;
display: block;
}
.clientalert {
margin: 5px 0 10px 0;
}
.alert {
border-radius: 10px;
margin-bottom: 15px;
}
.text-info {
color: #57c8ff;
}
.text-warning {
color: #e5b562;
}
.text-success {
color: #6bd26d;
}
.btn-primary {
background-color: #fdd206;
background-image: -webkit-linear-gradient(
top,
#fdd206,
#f3a50b
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#fdd206,
#ffa900
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
border: none;
border-radius: 5px;
color: #00003f;
font-weight: 700;
text-transform: uppercase;
text-shadow: 1px 1px 0px #ffffffba;
border: 1px solid #a17215;
text-decoration: none !important;
transition: all 0.4s ease;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
color: #00003f;
background-color: #fdd206;
background-image: -webkit-linear-gradient(
top,
#f5d43a,
#ffb219
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#f5d43a,
#ffb219
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
box-shadow: 0px 0px 5px #67cace40;
box-shadow: 0px 5px 20px #051c30e0;
border: 1px solid #f5d43a;
}
.btn-primary:active {
border-color: #afa311;
}
.btn-primary:focus {
border-color: #f1e016;
}
.btn-primary span {
color: #3f3f39;
font-weight: normal;
font-size: 18px;
text-transform: capitalize;
}
.btn-primary a {
color: #fff;
}
.btn-default {
color: #ffffff;
background-color: #135aa5;
background-image: -webkit-linear-gradient(
top,
#3692ef,
#0f4c8d
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#3692ef,
#0f4c8d
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
border: none;
border-radius: 5px;
font-weight: 500;
text-transform: uppercase;
text-shadow: 1px 1px 0px #00013f;
border: 1px solid #0f4c8d;
text-decoration: none;
transition: all 0.4s ease;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn-default:hover,
.btn-default:active,
.btn-default:focus {
color: #ffffff;
background-color: #227fdd;
background-image: -webkit-linear-gradient(
top,
#298bed,
#124e8a
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#479df2,
#165a9f
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
outline: none !important;
box-shadow: 0px 0px 5px #051c30e0;
border: 1px solid #479df2;
}
.btn-info {
background-color: #17e7ee;
background-image: -webkit-linear-gradient(
top,
#46f4fa,
#117e81
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#46f4fa,
#117e81
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
border: none;
border-radius: 5px;
color: #00003f;
font-weight: 700;
text-transform: uppercase;
text-shadow: 1px 1px 0px #ffffffba;
border: 1px solid #2c9699;
text-decoration: none !important;
transition: all 0.4s ease;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn-info:hover,
.btn-info:active,
.btn-info:focus {
color: #00003f;
background-color: #17e7ee;
background-image: -webkit-linear-gradient(
top,
#73faff,
#0f8e90
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#73faff,
#0f8e90
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
outline: none !important;
box-shadow: 0px 5px 20px #051c30e0;
border: 1px solid #73faff;
}
.btn-danger {
background-color: #c9302c;
background-image: -webkit-linear-gradient(
top,
#ee4844,
#c9302c
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#ee4844,
#a32623
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
border-radius: 5px;
color: #ffffff;
font-weight: 500;
text-transform: uppercase;
text-shadow: 1px 1px 0px #00013f;
border: 1px solid #a32723;
text-decoration: none !important;
transition: all 0.4s ease;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
background-color: #d9413d;
background-image: -webkit-linear-gradient(
top,
#f86966,
#b7110d
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#f86966,
#b7110d
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
outline: none !important;
box-shadow: 0px 5px 20px #051c30e0;
border: 1px solid #f86966;
}
.btn-success {
background-color: #5cb85c;
background-image: -webkit-linear-gradient(
top,
#5cb85c,
#348334
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#3ae13a,
#197619
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
border: none;
border-radius: 3px;
color: #ffffff;
font-weight: 500;
text-transform: uppercase;
text-shadow: 1px 1px 0px #000000;
border: 1px solid #348334;
text-decoration: none !important;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
background-color: #37b737;
background-image: -webkit-linear-gradient(
top,
#35e435,
#218b21
); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(
to bottom,
#35e435,
#218b21
); /* Chrome 26, Firefox 16+, IE 10+, Opera */
outline: none !important;
box-shadow: 0px 5px 20px #051c30e0;
border: 1px solid #35e435;
}
.btn-success:hover,
.btn-success:focus {
box-shadow: 0px 0px 3px #00000030;
}
.btn-lg,
.btn-large,
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
/* Enhanced Primary Button for Premium Components */
.btn-primary-enhanced {
background: linear-gradient(135deg, #fdd206 0%, #ffa900 100%);
color: #00003f;
padding: 18px 28px;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.5px;
border-radius: 8px;
text-transform: uppercase;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.73);
border: 1px solid #a17215;
box-shadow:
0 4px 12px rgba(253, 210, 6, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none !important;
cursor: pointer;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.btn-primary-enhanced:hover,
.btn-primary-enhanced:focus {
background: linear-gradient(135deg, #f5d43a 0%, #ffb219 100%);
color: #00003f;
text-decoration: none !important;
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(253, 210, 6, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.2);
border-color: #f5d43a;
}
.btn-primary-enhanced:active {
transform: translateY(0);
border-color: #afa311;
}
.btn-primary-enhanced svg {
transition: transform 0.3s ease;
}
.btn-primary-enhanced:hover svg {
transform: translateX(4px);
}
/* Mobile Responsive for Enhanced Button */
@media (max-width: 768px) {
.btn-primary-enhanced {
padding: 14px 20px;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.btn-primary-enhanced {
padding: 12px 16px;
font-size: 0.9rem;
letter-spacing: 0.3px;
}
}
.feature-icon {
font-size: 2rem;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #031727;
border-radius: 50%;
flex-shrink: 0;
}
.feature-text {
display: flex;
flex-direction: column;
}
.feature-text strong {
color: #fdd204;
font-size: 1.1rem;
margin-bottom: 4px;
}
.feature-text span {
color: #b0c4de;
font-size: 0.95rem;
line-height: 1.4;
}
.trust-guarantee {
background: linear-gradient(
135deg,
rgba(253, 207, 3, 0.1) 0%,
rgba(253, 207, 3, 0.05) 100%
);
padding: 25px;
border-radius: 16px;
border: 2px solid rgba(253, 207, 3, 0.3);
}
.guarantee-badge {
display: flex;
align-items: center;
gap: 16px;
}
.badge-icon {
width: 50px;
height: 50px;
background: #fdd204;
color: #021c30;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 900;
flex-shrink: 0;
}
.badge-text {
display: flex;
flex-direction: column;
}
.badge-text strong {
color: #fdd204;
font-size: 1.2rem;
margin-bottom: 4px;
}
.badge-text span {
color: #e8f0f7;
font-size: 1rem;
line-height: 1.4;
}
/* Custom Google Search */
.gsc-wrapper {
max-width: 100% !important;
}
form.gsc-search-box {
margin: 0 0 20px!important;
max-width: 99%!important;
}
#gscWrapper .gsc-control-wrapper-cse {
margin-top: 10px;
width: 101%;
}
#gscWrapper table.gsc-search-box td.gsc-input {
padding: 0;
}
.cse .gsc-control-cse,
.gsc-control-cse {
padding: 0 !important;
}
.gsc-modal-background-image {
background: #04041a !important;
}
#gscWrapper .gsc-results-wrapper-overlay {
background-color: #073054;
height: 90%;
top: 10%;
bottom: 10%;
left: 0%;
right: 0%;
border-radius: 15px;
width: 80%;
box-shadow: 0 0 23px #000;
}
#gscWrapper .gsc-results-wrapper-overlay {
scrollbar-width: thin; /* Firefox */
scrollbar-color: #01ec35 #041727; /* Firefox: thumb track */
}
/* Chrome, Edge, Safari */
#gscWrapper .gsc-results-wrapper-overlay::-webkit-scrollbar {
width: 10px;
}
#gscWrapper .gsc-results-wrapper-overlay::-webkit-scrollbar-track {
background: #041727;
border-radius: 10px;
}
#gscWrapper .gsc-results-wrapper-overlay::-webkit-scrollbar-thumb {
background: #01ec35;
border-radius: 10px;
border: 2px solid #041727;
}
#gscWrapper .gsc-results-wrapper-overlay::-webkit-scrollbar-thumb:hover {
background: #00c92d;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page,
.gsc-results .gsc-cursor-box .gsc-cursor-page {
border-color: #073054 !important;
background-color: #073054 !important;
}
#gscWrapper .gscb_a {
line-height: 37px;
}
/* #gscWrapper input.gsc-input {
padding: 15px 5px !important;
} */
.gsc-input-box {
border-radius: 3px;
padding: 5px 0;
}
.cse .gsc-search-button-v2,
.gsc-search-button-v2 {
padding: 13px 28px !important;
border-radius: 3px !important;
}
a#gscWrapperCollapseButton {
position: absolute;
height: 35px;
top: -36px;
border-left: groove;
z-index: 1001;
padding: 6px 25px;
right: 5px;
border: none;
border-radius: 5px;
}
a#gscWrapperCollapseButton[aria-expanded="false"] .fa-caret-up {
display: none;
}
a#gscWrapperCollapseButton[aria-expanded="true"] .fa-caret-down {
display: none;
}
#gscWrapper .gsc-search-button-v2 {
margin-left: -78px;
background-color: transparent;
border: 0;
opacity: 0.5;
}
#gscWrapper .gsc-search-button-v2 svg {
width: 20px;
height: 20px;
fill: #fff;
}
#gscWrapper .gsc-input-box,
#gscWrapper .gsc-input {
background: #135a98;
border: none;
color: #fff;
border-radius: 10px;
height: 45px!important;
}
#gscWrapper .gsst_a {
margin-right: 84px;
}
#gscWrapper .gsc-results-close-btn {
top: 15px;
right: 30px;
}
#gscWrapper .gsc-result-info {
font-size: 17px;
padding: 4px 4px 4px 4px;
}
#gscWrapper .gsc-control-cse {
border-color: #051c30;
background-color: #051c30;
}
.gstl_50 {
margin-top: 0px;
padding-top: 10px;
}
.gssb_a {
padding: 5px 9px 5px 15px !important;
}
.gsc-completion-container {
border-radius: 0 0 10px 10px !important;
box-shadow: none !important;
background: #125a98 !important;
border: none !important;
margin: -8px -0px 0 0px !important;
}
.gsc-completion-container span {
color: #00ed33;
}
.gsc-completion-container span b {
color: #fff !important;
font-weight: normal;
}
.gsc-completion-selected {
background: #083054 !important;
cursor: pointer !important;
color: #fff !important;
}
#gscWrapper .gsc-selected-option-container {
font-size: 17px;
}
.gsc-control-cse,
.gsc-control-cse .gsc-table-result {
font-size: 17px !important;
}
#gscWrapper .gsc-results {
width: 100%;
padding-top: 15px;
}
#gscWrapper .gsc-result {
padding: 15px;
border-radius: 10px;
}
#gscWrapper .gs-result {
max-width: 1000px;
}
#gscWrapper .gs-result .gs-image,
#gscWrapper .gs-result .gs-promotion-image {
box-shadow: 0 0 22px #00000075;
border-radius: 3px;
height: 140px!important;
width: auto!important;
}
.gsc-wrapper > div:first-child {
position: absolute;
left: -9000px;
}
.gsc-control-cse .gs-spelling,
.gsc-control-cse .gs-result .gs-title,
.gsc-control-cse .gs-result .gs-title * {
font-size: 25px !important;
}
#gscWrapper .gs-webResult.gs-result a.gs-title:visited,
#gscWrapper .gs-webResult.gs-result a.gs-title:visited b,
#gscWrapper .gs-imageResult a.gs-title:visited,
#gscWrapper .gs-imageResult a.gs-title:visited b {
font-size: 25px !important;
}
.gsc-result-info,
.gsc-orderby-label,
.gs-spelling {
color: #fff !important;
font-size: 18px!important;
}
.gs-spelling a {
color: #6fa8dc !important;
font-size: 16px;
}
#gscWrapper .gs-image-box.gs-web-image-box.gs-web-image-box-landscape {
width: 300px;
padding: 9px 9px 3px 0;
}
.gs-image-box.gs-web-image-box.gs-web-image-box-portrait {
height: 140px !important;
width: auto !important;
}
.gs-web-image-box-portrait img.gs-image {
max-width: 95% !important;
max-height: 140px !important;
}
.gs-web-image-box-landscape img.gs-image {
max-width: 290px !important;
max-height: 140px !important;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
color: #f5b312 !important;
font-size: 22px;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
color: #01ec35!important;
}
.gsc-results .gsc-cursor-box {
margin: 10px 0 !important;;
font-size: 18px;
border-top: 1px solid #0a365d
padding: 10px 0;
text-align: left !important;
}
#gscWrapper .gcsc-more-maybe-branding-root {
display: none;
}
.gs-web-image-box .gs-image, .gs-promotion-image-box .gs-promotion-image {
width: auto;
}
#gscWrapper .gs-image-box.gs-web-image-box.gs-web-image-box-landscape {
padding: 0px 9px 3px 15px;
}
#gscWrapper .gsc-control-cse .gsc-option-selector {
background-image: url("data:image/svg+xml;utf8,")!important;
}
#gscWrapper .gsib_a {
background-image: url("data:image/svg+xml;utf8,")!important;
}
#gscWrapper .gscb_a {
background: url("data:image/svg+xml;utf8,") center no-repeat!important;
height: 32px;
width: 32px;
}
#gscWrapper .gsc-results-close-btn {
background: url("data:image/svg+xml;utf8,") center no-repeat!important;
height: 32px;
width: 32px;
background-image: none;
}
/* @end */
/* Tailwind-inspired size utility classes for icons */
.size-3 {
width: 0.75rem;
height: 0.75rem;
}
.size-4 {
width: 1rem;
height: 1rem;
}
.size-5 {
width: 1.25rem;
height: 1.25rem;
}
.size-6 {
width: 1.5rem;
height: 1.5rem;
}
.size-7 {
width: 1.75rem;
height: 1.75rem;
}
.size-8 {
width: 2rem;
height: 2rem;
}
.size-10 {
width: 2.5rem;
height: 2.5rem;
}
.size-12 {
width: 3rem;
height: 3rem;
}
.size-14 {
width: 3.5rem;
height: 3.5rem;
}
.size-16 {
width: 4rem;
height: 4rem;
}
.size-20 {
width: 5rem;
height: 5rem;
}
/* @group Footer */
.why_sp {
margin: 40px 0 0;
padding: 110px 0 0px 0px;
background-clip: padding-box;
color: #fff;
font-size: 16px;
background: #000000;
/* background-image: url(/wp-content/themes/strappress-sp-child/svg/footerfade_ob.svg); */
background-image:
url(/wp-content/themes/strappress-sp-child/svg/footerfade_ot.svg?d),
linear-gradient(#051c30 0%, #000000 50%);
background-position: 0 0px;
background-repeat: repeat-x;
background-size: 50px 62px;
}
.why_sp h3 {
margin-bottom: 0px;
margin-top: 20px;
color: #ffffff;
}
.why_sp ul {
list-style: none;
padding: 0px;
margin: 0 0px 0 0px;
/* border: 1px solid white; */
}
.why_sp ul li {
padding: 5px 0 5px 11px;
margin: 0;
}
.why_sp ul li span {
/* background: url(https://stickypiston.co/wp-content/uploads/footer_blocks2.png) no-repeat 0 0; */
background: url(/wp-content/themes/strappress-sp-child/svg/footer_blocks.svg)
no-repeat 0 0;
background-size: 90px 94px;
display: block;
width: 27px;
height: 27px;
float: left;
margin: 4px 14px 0 0px;
}
.why_sp ul li.block1 span {
background-position: 1px 0;
}
.why_sp ul li.block2 span {
background-position: 1px -35px;
}
.why_sp ul li.block3 span {
background-position: 1px -70px;
}
.why_sp ul li.block4 span {
background-position: -32px 0;
}
.why_sp ul li.block5 span {
background-position: -32px -35px;
}
.why_sp ul li.block6 span {
background-position: -32px -70px;
}
.why_sp ul li.block7 span {
background-position: -63px 0;
}
.why_sp ul li.block8 span {
background-position: -63px -35px;
}
.why_sp ul li.block9 span {
background-position: -63px -70px;
}
.social-stack {
font-size: 20px;
margin: 10px 0 0 0;
}
.social-stack svg {
width: 20px;
}
.social-stack span {
display: none;
}
footer.footer {
background: #000;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 58%,
rgb(4 20 34) 97%
);
color: #fff;
font-size: 16px;
padding: 86px 60px 100px;
}
footer.footer h4 {
font-size: 26px;
margin: 0 0 1px 0;
font-weight: 300 !important;
color: #00ed33;
text-transform: uppercase;
}
footer.footer ul {
list-style: none;
margin: 0;
padding: 0 0 0 13px;
}
footer.footer a,
footer.footer a:visited {
color: #fff;
text-decoration: none;
}
footer.footer .sp_logo {
position: absolute;
left: 10px;
bottom: -100px;
}
footer.footer .sp_logo small {
color: #134d8e;
font-size: 11px;
}
#languagechooser {
position: absolute;
bottom: -60px;
right: 0;
}
#menu-toolbar-container {
top: 66px;
left: 375px;
}
.form-search-head {
top: 72px;
left: 215px;
}
/* @end */
@media (min-width: 1441px) {
.container {
width: 1440px;
}
}
@media (max-width: 1440px) {
.container {
width: 100%;
}
}
@media (max-width: 1200px) {
h1.strapline,
h2.strapline {
font-size: 35px;
top: 20px;
left: 287px;
}
#menu-toolbar-container {
top: 56px;
left: 270px;
}
}
@media (max-width: 1000px) {
#menu-primary-navigation a {
margin: 0 3px 0;
}
#menu-primary-navigation li.menu-item-126 a {
font-size: 19px;
padding: 10px 4px 27px 4px;
}
#menu-primary-navigation li.menu-item-126 .caret {
display: inline-block;
}
#menu-primary-navigation li.menu-item-126 .dropdown-menu a {
font-size: 15px;
}
.navbar-toggle .icon-bar {
width: 28px;
height: 6px;
}
.introheader h2 {
font-size: 17px;
}
.launcher {
font-size: 16px;
}
}
@media (max-width: 991px) {
.serversearch .nopadright.servertype {
padding-right: 15px !important;
}
header.header,
section#header {
/* padding: 0; */
}
a#gscWrapperCollapseButton {
/* bottom: 3px; */
/* right: 7px; */
}
#top-nav {
right: 40px;
top: 15px;
}
.navbar-toggle {
border: none;
color: #fff;
}
.navbar-toggle:hover {
background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
header.header .spnav {
min-height: 95px;
}
h1.strapline,
h2.strapline {
font-size: 27px;
top: 15px;
left: 190px;
}
#menu-toolbar-container {
top: 56px;
left: 175px;
}
}
@media (max-width: 992px) {
.container {
/*width: auto;*/
width: 100%;
}
}
@media (min-width: 768px) {
#main {
padding: 0px;
font-size: 18px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown:hover .dropdown-menu li .dropdown-menu {
display: none;
}
.dropdown .dropdown-menu li:hover ul.dropdown-menu {
display: block;
}
/* LOGIN */
#menu-primary-navigation li.menu-item-126 {
height: 50px;
width: 130px;
text-align: center;
z-index: 1000;
bottom: 18px;
right: 18px;
border-radius: 3px;
}
#menu-primary-navigation li.menu-item-126 .caret {
margin: 0 auto;
display: inline-block;
}
#menu-primary-navigation li.menu-item-126 li {
height: 30px;
border: 0;
}
#menu-primary-navigation li.menu-item-126 .dropdown-menu {
left: auto;
right: 0;
border-radius: 3px 0px 3px 3px;
margin: 0;
}
#menu-primary-navigation li.menu-item-126 a {
line-height: 164%;
padding: 8px 4px 12px 15px;
margin: 0;
background-image: none;
}
#menu-primary-navigation li.menu-item-126 li a {
padding: 2px 15px;
background-image: none;
border-left: 0 !important;
border-radius: 3px;
margin: 3px;
}
#menu-primary-navigation li.menu-item-126 li a {
line-height: 170%;
text-align: left;
}
#menu-primary-navigation li.menu-item-126 span {
font-size: 10px;
display: block;
}
#menu-primary-navigation li.menu-item-126 {
background: #00b22d;
position: absolute;
}
#menu-primary-navigation ul li.menu-item-126 ul a {
background: #007d1f;
}
#menu-primary-navigation ul li.menu-item-126 ul a:hover {
background: #00d134;
}
#menu-primary-navigation ul li.menu-item-126 ul a:last-child {
border-radius: 0px 0px 3px 3px;
}
#menu-primary-navigation li.menu-item-126:hover > a,
#menu-primary-navigation li.menu-item-126 li:hover > a,
#menu-primary-navigation li.menu-item-126.open,
#menu-primary-navigation li.menu-item-126.open a,
.navbar-nav li.menu-item-126.open .dropdown-menu,
.navbar-nav li.menu-item-126:hover .dropdown-menu {
background: #007d1f;
}
#menu-primary-navigation li.menu-item-126:hover > a {
border-top-left-radius: 3px !important;
border-top-right-radius: 3px !important;
}
#menu-primary-navigation li.menu-item-126 li:hover > a {
background: #00b22d;
}
#menu-primary-navigation li.menu-item-3565 {
border-right: 0;
}
}
@media (max-width: 768px) {
body,
input,
textarea {
font-size: 15px;
}
body {
background-image: none;
}
.container {
width: 100%;
}
#main,
#content {
padding: 0px 15px 0 15px;
margin: 0 -15px;
}
header.header {
padding-top: 0;
font-family:
14px/27px "Roboto Slab",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
min-height: 25px;
z-index: 100;
margin: 0;
}
header.header .spnav {
min-height: 45px;
}
h1.strapline,
h2.strapline {
top: 13px;
left: 120px;
font-weight: 400;
}
#top-nav a#loginOrRegister,
#top-nav a#AccountLoggedIn {
padding: 3px 15px;
}
.social-icons {
position: absolute;
top: 45px;
right: 0px;
}
/* Social Icons */
.social-icons a {
color: #ffffff;
font-size: 20px;
margin: 0 3px;
}
/* Navigation */
.navbar-header,
.navbar {
background: transparent;
margin-bottom: 0;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border: 0;
background: #032441;
width: 109%;
position: absolute;
height: 7000%;
left: 0;
top: 21px;
z-index: 999;
}
.supportnav .navbar-header {
background: #032441;
}
#menu-toolbar-container {
clear: both;
margin: 0 -15px 0px -15px;
padding: 5px 10px 5px 10px;
height: 40px;
top: -3px;
left: 180px;
z-index: 500;
position: absolute;
}
#menu-toolbar-container ul {
margin: 0;
clear: both;
}
#top-nav {
right: 40px;
top: 7px;
}
#menu-primary-navigation {
padding-left: 15px;
margin-top: 0;
}
#menu-primary-navigation {
top: 2px;
left: 0px;
font-size: 16px;
height: 4000% !important;
z-index: 999;
background: #091627 !important;
width: 100%;
right: unset;
}
#menu-primary-navigation ul {
width: 98%;
}
.order a {
border-radius: 0 !important;
}
#menu-primary-navigation li.menu-item-has-children.active a:hover,
#menu-primary-navigation li.menu-item-has-children a,
.navbar-default .navbar-nav > li > a:hover {
border-radius: 5px !important;
}
#menu-primary-navigation ul li.menu-item-has-children.active a:hover,
#menu-primary-navigation ul li.menu-item-has-children a,
.navbar-default .navbar-nav > li > a:hover {
border-radius: 5px;
}
#menu-primary-navigation li {
border: none;
border-radius: 5px;
margin-bottom: 8px;
}
#menu-primary-navigation li .caret {
display: inline-block;
}
#menu-primary-navigation a {
padding: 10px 12px;
margin: 0;
border-radius: 5px;
}
#menu-primary-navigation ul a {
width: auto;
}
#menu-toolbar-container li a {
padding: 7px 5px;
}
#menu-primary-navigation ul a,
#menu-primary-navigation li.menu-item-126 ul a {
padding: 1px 6px;
line-height: 30px;
border-radius: 3px;
margin: 3px;
width: auto;
}
.navbar-nav {
margin-bottom: 0;
}
.navbar-toggle {
border-width: 2px;
padding: 4px 2px;
margin-top: -35px;
/* margin-right: 17px; */
border: none;
z-index: 1002;
}
.spnav .navbar-toggle {
margin-right: 0;
}
.navbar-default .navbar-toggle {
border-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: transparent;
}
#menu-toolbar-container {
bottom: 0px;
top: auto;
left: -5px;
}
#menu-toolbar-container li {
font-size: 13px;
}
a#gscWrapperCollapseButton {
bottom: auto;
top: -36px;
right: 36px;
height: auto;
padding: 6px 13px;
font-size: 15px;
z-index: 1000;
width: auto;
display: inline-flex;
align-items: center;
gap: 6px;
/*height: auto;*/
line-height: 1.2;
white-space: nowrap;
}
.gsc-spwrapper.in {
z-index: 1001;
}
.gsc-results-wrapper-overlay {
width: 100% !important;
left: 0% !important;
top: 25% !important;
}
.navbar-main .navbar-nav > li > a {
padding: 10px 10px;
}
/* LOGIN */
/*#menu-primary-navigation li.menu-item-126 span {
font-size: 10px;
display: block;
}*/
#menu-primary-navigation li.menu-item-126 a {
font-size: 15px;
padding: 12px;
}
#menu-primary-navigation li.menu-item-126 {
background: #00b22d;
}
#menu-primary-navigation ul li.menu-item-126 ul a {
background: #007d1f;
}
#menu-primary-navigation ul li.menu-item-126 ul a:hover {
background: #00d134;
}
#menu-primary-navigation ul li.menu-item-126 ul a:last-child {
border-radius: 0px 0px 3px 3px;
}
#menu-primary-navigation li.menu-item-126:hover > a,
#menu-primary-navigation li.menu-item-126 li:hover > a,
#menu-primary-navigation li.menu-item-126.open,
#menu-primary-navigation li.menu-item-126.open a,
.navbar-nav li.menu-item-126.open .dropdown-menu,
.navbar-nav li.menu-item-126:hover .dropdown-menu {
background: #007d1f;
}
#menu-primary-navigation li.menu-item-126 li:hover > a {
background: #00b22d;
}
.navlabel {
color: #fff;
float: left;
margin: -4px 0 0 -108px;
font-weight: 100;
width: 100px;
text-align: right;
}
/* Search */
.form-search-head {
position: absolute;
top: auto;
left: 180px;
top: 52px;
z-index: 999;
}
.form-search-head .form-control {
font-size: 14px;
height: 34px;
}
.form-search-head .form-control::-webkit-input-placeholder {
color: #fff;
}
.form-search-head .form-control::-moz-placeholder {
color: #fff;
} /* firefox 19+ */
.form-search-head .form-control:-ms-input-placeholder {
color: #fff;
} /* ie */
.form-search-head .form-control:-moz-placeholder {
color: #fff;
}
.form-search-head .btn-default {
border: 1px solid #fff;
}
/* Footer */
.why_sp {
padding: 110px 0 0px 15px;
margin: 50px -15px 0 -15px;
font-size: 14px;
}
.why_sp h3 {
/* font-size: 22px; */
margin: 0 0 0 15px;
}
.why_sp ul {
list-style: none;
padding: 0;
margin: 0 0 0 15px;
}
footer.footer {
padding: 70px 0px 100px 30px;
margin: 0 -15px 0 -15px;
}
.newprice {
padding: 0px !important;
font-size: 30px !important;
}
.oldprice,
.old-price {
font-size: 20px !important;
position: initial !important;
margin-right: 8px !important;
}
.old-price::after,
.oldprice::after {
border-bottom: none !important;
}
.featurerow {
margin: 50px 0 70px 0 !important;
}
.currency-btn-group button,
.currency-btn-group span {
font-size: 13px;
}
}
@media (width: 768px) {
#menu-primary-navigation {
padding-left: 0;
}
#menu-primary-navigation {
left: 110px;
top: -4px;
}
#menu-primary-navigation a {
color: #fff;
padding: 7px 7px 7px;
margin: 0 2px 0;
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
font-size: 14px;
}
a#gscWrapperCollapseButton {
right: 13px;
top: -36px;
padding: 6px 25px;
}
.launchers {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
.text-white {
color: #ffffff !important;
}
.title-slim {
font-weight: 100;
}
.mb-section {
margin-bottom: 30px;
}
.no-x-margin {
margin: 0 !important;
}
.no-y-margin {
margin-top: 0;
margin-bottom: 0;
}
@media (max-width: 767px) {
#top-nav #menu-toolbar {
width: 100%;
display: flex;
justify-content: flex-end;
margin: 0 0 5px 0;
}
}
@media (max-width: 600px) {
#top-nav {
right: 40px;
top: 7px;
}
#top-nav #menu-toolbar {
/* margin: 0 0 10px 80px; */
padding: 5px 0 0 0px;
/* height: 30px; */
/* float: none !important; */
}
#top-nav #menu-toolbar li {
margin-right: 0px;
}
h1.strapline,
h2.strapline {
display: none;
}
}
/* Benefits Section Styling */
.whatmore.benefits2 {
padding: 60px 15px 0px 15px;
}
.benefits-row {
margin: 20px 0;
padding: 10px 0;
display: flex;
align-items: center;
min-height: 420px;
}
.benefits-row .benefits {
padding-top: 20px;
padding-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: flex-start;
text-align: left;
}
.benefits-row .benefitsimg {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.benefits-row .benefitsimg img {
width: 95%;
max-width: 95%;
height: auto;
border-radius: 8px;
/*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
}
.benefits-row h3.headerbar {
margin-bottom: 20px;
font-size: 32px;
color: #fdd204;
}
.benefits-row p {
line-height: 1.6;
margin-bottom: 15px;
width: 100%;
}
@media (max-width: 768px) {
.benefits-row {
margin: 30px 0;
padding: 20px 0;
min-height: auto;
flex-direction: column;
}
.benefits-row .benefits,
.benefits-row .benefitsimg {
padding: 15px;
}
.benefits-row .benefitsimg img {
width: 90%;
}
}
/* Hero Section Styling */
.hero-section {
position: relative;
min-height: 65vh;
width: auto;
margin: 0 -15px;
display: flex;
align-items: center;
justify-content: flex-start;
/*background: linear-gradient(135deg, #000000 0%, #021c30 30%, #073054 70%, #0a4572 100%);*/
overflow: hidden;
clear: both;
}
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background: */
/* radial-gradient(600px circle at 20% 30%, rgba(253, 210, 4, 0.15), transparent),*/
/* radial-gradient(800px circle at 80% 70%, rgba(54, 166, 254, 0.1), transparent),*/
/* radial-gradient(400px circle at 40% 80%, rgba(253, 210, 4, 0.08), transparent);*/
z-index: 1;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.hero-circle {
position: absolute;
border-radius: 50%;
filter: blur(3px);
}
.hero-circle-1 {
width: 180px;
height: 180px;
background: radial-gradient(
circle,
rgba(253, 210, 4, 0.03) 0%,
rgba(253, 210, 4, 0.01) 40%,
transparent 70%
);
top: 20%;
right: 25%;
animation: heroShimmer 8s ease-in-out infinite;
}
.hero-circle-2 {
width: 120px;
height: 120px;
background: radial-gradient(
circle,
rgba(54, 166, 254, 0.025) 0%,
rgba(54, 166, 254, 0.008) 40%,
transparent 70%
);
bottom: 30%;
right: 15%;
animation: heroShimmer 12s ease-in-out infinite 4s;
}
.hero-circle-3 {
width: 90px;
height: 90px;
background: radial-gradient(
circle,
rgba(253, 210, 4, 0.02) 0%,
rgba(253, 210, 4, 0.005) 40%,
transparent 70%
);
top: 60%;
right: 35%;
animation: heroShimmer 10s ease-in-out infinite 2s;
}
@keyframes heroShimmer {
0%,
100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
.link-primary,
.benefits2 a,
.benefits2 a:visited {
color: #fdd204 !important;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.hero-content {
position: relative;
z-index: 10;
text-align: left;
max-width: 745px;
padding: 70px 60px 70px 0px;
}
.hero-eyebrow {
color: #00b22d;
margin-bottom: 0.5em;
display: block;
}
.hero-title {
font-size: 4.5rem;
font-weight: 200;
color: #ffffff;
text-align: center;
margin-bottom: 18px;
line-height: 1.1;
letter-spacing: -0.03em;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
font-family: "Teko", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*.hero-title::after {*/
/* content: '';*/
/* display: block;*/
/* width: 120px;*/
/* height: 4px;*/
/* background: linear-gradient(90deg, #00EE34 0%, #0e3e71 100%);*/
/* margin: 30px 0px;*/
/* border-radius: 2px;*/
/*}*/
.hero-subtitle {
font-weight: 300;
color: #e5e7e9;
margin-bottom: 60px;
line-height: 1.7;
max-width: 800px;
margin-left: 0;
margin-right: auto;
opacity: 0.95;
letter-spacing: 0.01em;
}
.hero-title span {
color: #01ec35;
}
.hero-cta {
display: flex;
gap: 30px;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-top: 60px;
}
.hero-btn {
padding: 22px 50px;
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 6px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
min-width: 220px;
position: relative;
overflow: hidden;
}
.hero-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.6s;
}
.hero-btn:hover::before {
left: 100%;
}
.hero-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.4),
0 5px 15px rgba(253, 210, 4, 0.3);
}
.hero-btn-secondary {
background: rgba(54, 166, 254, 0.1);
border: 1px solid #1767af;
color: #1767af;
backdrop-filter: blur(10px);
}
.hero-btn-secondary:hover {
background: #1767af;
color: #ffffff;
border-color: #1767af;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.4),
0 5px 15px rgba(54, 166, 254, 0.4);
}
.hero-image {
position: absolute;
right: 0%;
top: 43%;
transform: translateY(-50%);
width: 60%;
/* max-width: 650px; */
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-circle {
position: absolute;
border-radius: 50%;
filter: blur(2px);
z-index: -1;
}
.hero-image-circle-1 {
width: 250px;
height: 250px;
background: radial-gradient(
circle,
rgba(0, 238, 52, 0.08) 0%,
rgba(0, 238, 52, 0.04) 50%,
transparent 80%
);
top: 0%;
left: -30%;
animation: heroImageShimmer 9s ease-in-out infinite;
}
.hero-image-circle-2 {
width: 180px;
height: 180px;
background: radial-gradient(
circle,
rgba(14, 62, 113, 0.06) 0%,
rgba(14, 62, 113, 0.03) 40%,
transparent 70%
);
bottom: 17%;
right: 6%;
animation: heroImageShimmer 11s ease-in-out infinite 3s;
}
@keyframes heroImageShimmer {
0%,
100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
.hero-logo {
width: 100%;
height: auto;
max-width: 1111px;
opacity: 0.9;
/* filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
animation: verticalFloat 6s ease-in-out infinite; */
}
.vertical-float {
animation: verticalFloat 6s ease-in-out infinite;
}
@keyframes verticalFloat {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Ensure proper clearing */
.hero-section + * {
clear: both;
margin-top: 0;
padding-top: 40px;
}
/* Mobile Responsiveness */
@media (max-width: 1200px) {
.hero-content {
padding: 100px 50px 100px 0px;
/*max-width: 700px;*/
/*width: 60%;*/
}
.hero-title {
font-size: 4rem;
}
}
@media (max-width: 768px) {
.hero-section {
min-height: 70vh;
margin: 0;
width: 100%;
justify-content: center;
}
.hero-content {
padding: 60px 30px;
width: 100%;
max-width: 100%;
text-align: center;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 30px;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 50px;
}
.hero-cta {
flex-direction: column;
gap: 20px;
margin-top: 50px;
justify-content: center;
}
.hero-btn {
padding: 18px 40px;
font-size: 1.1rem;
min-width: auto;
width: 100%;
max-width: 320px;
}
.hero-image {
display: none;
}
.hero-logo {
max-width: 150px;
}
.hero-image-circle-1 {
width: 120px;
height: 120px;
top: -20%;
left: -15%;
}
.hero-image-circle-2 {
width: 90px;
height: 90px;
bottom: -15%;
right: -10%;
}
.hero-circle-1 {
width: 120px;
height: 120px;
top: 15%;
right: 20%;
}
.hero-circle-2 {
width: 80px;
height: 80px;
bottom: 25%;
right: 10%;
}
.hero-circle-3 {
width: 60px;
height: 60px;
top: 70%;
right: 30%;
}
.hero-section + * {
padding-top: 60px;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2.8rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.hero-btn {
padding: 16px 35px;
font-size: 1rem;
}
}
/* Mobile Layout Improvements */
@media (max-width: 768px) {
/* Consistent mobile padding */
#content,
.container,
.row.clearfix {
padding-left: 20px;
padding-right: 20px;
}
/* Hero intro section */
.home_hero_intro {
text-align: center;
padding: 30px 20px;
margin-bottom: 30px;
}
.home_hero_intro h2 {
font-size: 2.2rem;
line-height: 1.2;
margin-bottom: 15px;
}
.home_hero_intro h3 {
font-size: 1.1rem;
line-height: 1.4;
opacity: 0.9;
}
/* Launchers section */
.launchers {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 20px;
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
max-width: none;
}
.launcher {
text-align: center;
font-size: 0.9rem;
padding: 12px 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 80px;
background: transparent;
border: none;
font-weight: 600;
}
.launcher img.launcherlogo {
margin-bottom: 8px;
}
/* Intro section */
.introhome {
font-size: 1.8rem !important;
line-height: 1.3;
text-align: center;
padding: 20px;
margin: 20px 0;
}
/* Benefits section mobile */
.benefits-row {
margin: 0px 0;
padding: 10px 0;
}
.benefits-row .benefits {
padding: 20px;
text-align: center;
}
.benefits-row .benefits h3.headerbar {
font-size: 1.8rem;
text-align: center !important;
margin: 0px auto 15px auto;
}
/* Whatmore titles centered */
.whatmore h2,
.whatmore h3,
.whatmore .introhome {
text-align: center !important;
}
.benefits-row .benefits p {
font-size: 1rem;
line-height: 1.5;
text-align: center;
margin-bottom: 15px;
}
.benefits-row .benefitsimg {
padding: 15px;
text-align: center;
}
/* Consistent mobile typography */
body {
font-size: 16px;
}
h1,
.h1 {
font-size: 2.2rem;
line-height: 1.2;
}
h2,
.h2 {
font-size: 1.8rem;
line-height: 1.3;
}
h3,
.h3 {
font-size: 1.5rem;
line-height: 1.3;
}
/* Links */
.link-primary {
font-size: 1rem;
font-weight: 500;
}
/* Altorder padding */
.altorder,
*[class*="altorder"] {
margin-left: 20px;
margin-right: 20px;
}
}
@media (max-width: 480px) {
/* Extra small mobile adjustments */
#content,
.container,
.row.clearfix {
padding-left: 15px;
padding-right: 15px;
}
.home_hero_intro h2 {
font-size: 1.9rem;
}
.home_hero_intro h3 {
font-size: 1rem;
}
.introhome {
font-size: 1.6rem !important;
padding: 15px;
}
.benefits-row .benefits h3.headerbar {
font-size: 1.6rem;
}
.benefits-row .benefits p {
font-size: 0.95rem;
}
/* Altorder smaller padding */
.altorder,
*[class*="altorder"] {
margin-left: 15px;
margin-right: 15px;
}
/* Launchers smaller padding */
.launchers {
margin-left: 15px;
margin-right: 15px;
}
/* Navbar brand mobile styles */
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand,
.navbar-brand {
display: block;
height: 70px;
width: 56px;
position: absolute;
z-index: 999;
background: transparent
url(https://stickypiston.co/wp-content/uploads/Asset-3@2x.png) no-repeat
center center;
margin: 0;
top: -67px;
left: 0px;
background-size: contain;
}
}
/* Extended CTA Banner Section */
.extended-cta-banner {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
position: relative;
margin: 80px 0;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.extended-cta-banner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at 30% 50%,
rgba(59, 130, 246, 0.1) 0%,
transparent 50%
);
pointer-events: none;
}
.cta-content {
padding: 100px 60px;
position: relative;
z-index: 2;
display: flex;
align-items: center;
min-height: 600px;
}
.cta-content-inner {
max-width: 480px;
}
.cta-title {
color: #ffffff;
font-size: 3.2rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 32px;
letter-spacing: -0.02em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.cta-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.3rem;
line-height: 1.6;
margin-bottom: 48px;
font-weight: 500;
}
.cta-features {
margin-bottom: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 24px;
}
.cta-feature {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.95);
font-size: 1.05rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.05);
padding: 12px 16px;
border-radius: 8px;
border-left: 3px solid #3b82f6;
transition: all 0.3s ease;
}
.cta-feature:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(4px);
}
.cta-icon {
font-size: 1.5rem;
margin-right: 12px;
width: 32px;
text-align: center;
}
.cta-buttons {
display: flex;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.cta-btn-primary {
background: linear-gradient(45deg, #3b82f6, #1d4ed8);
border: none;
padding: 16px 32px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}
.cta-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
background: linear-gradient(45deg, #1d4ed8, #1e40af);
}
.cta-btn-secondary {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
padding: 14px 32px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
}
.cta-btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
transform: translateY(-1px);
}
.cta-guarantee {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
margin: 0;
font-weight: 400;
}
.cta-image-container {
position: relative;
height: 600px;
overflow: hidden;
padding: 0;
}
.cta-image-wrapper {
position: relative;
height: 100%;
width: 100%;
margin-left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cta-banner-image {
width: 80%;
height: auto;
max-height: 400px;
object-fit: contain;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
transition: transform 0.3s ease;
animation: float 6s ease-in-out infinite;
}
.cta-banner-image:hover {
transform: scale(1.05);
}
/* Add floating animation */
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
/* Mobile styles for CTA */
@media (max-width: 768px) {
.extended-cta-banner {
margin: 40px 20px;
border-radius: 12px;
}
.cta-content {
padding: 50px 30px;
min-height: auto;
text-align: center;
}
.cta-title {
font-size: 2.4rem;
margin-bottom: 24px;
}
.cta-subtitle {
font-size: 1.15rem;
margin-bottom: 36px;
}
.cta-features {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 40px;
}
.cta-buttons {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 12px;
}
.cta-btn-primary,
.cta-btn-secondary {
width: 100%;
max-width: 280px;
padding: 16px 24px;
font-size: 1.05rem;
}
.cta-image-container {
height: 320px;
margin-top: 40px;
}
.cta-image-wrapper {
width: 100%;
margin-left: 0;
}
.cta-banner-image {
width: 70%;
max-height: 280px;
}
}
/* Hero Search Component */
.hero-search {
margin: 32px 0 40px;
max-width: 500px;
}
.search-form {
width: 100%;
}
.search-container {
position: relative;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 5px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
overflow: hidden;
}
.search-container:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.search-container:focus-within {
background: rgba(0, 0, 0, 0.4);
border-color: #ffc107;
box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}
.search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 14px 20px;
color: #ffffff !important;
font-size: 1rem;
font-weight: 400;
placeholder-color: rgba(255, 255, 255, 0.6);
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.6);
font-style: italic;
}
.search-input:focus::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.search-button {
background: transparent;
border: none;
outline: none;
padding: 14px 18px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.search-button:hover {
color: #ffc107;
background: rgba(255, 193, 7, 0.1);
}
.search-button svg {
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.search-button:hover svg {
transform: scale(1.1);
}
/* Mobile search styles */
@media (max-width: 768px) {
.hero-search {
margin: 24px 0 32px;
max-width: 100%;
}
.search-input {
padding: 12px 16px;
font-size: 0.95rem;
}
.search-button {
padding: 12px 16px;
}
.search-button svg {
width: 16px;
height: 16px;
}
}
/* Home Hero Intro Section */
.home_hero_intro {
text-align: center;
}
.home_hero_intro h2 {
text-align: center;
}
.home_hero_intro h3 {
text-align: center;
}
/* Launcher Grid Desktop Styles */
.launchers {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 16px;
padding: 20px 0;
width: 100%;
/*max-width: 1200px;*/
margin: 50px auto 50px auto;
}
.launcher {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px 8px;
transition: all 0.3s ease;
text-decoration: none;
color: #ffffff;
font-weight: 600;
font-size: 0.9rem;
min-height: 110px;
background: transparent;
border: none;
}
.launcher:hover {
transform: translateY(-2px);
color: #ffffff;
text-decoration: none;
}
.launcher img.launcherlogo {
margin-bottom: 10px;
transition: transform 0.3s ease;
}
.launcher:hover img.launcherlogo {
transform: scale(1.1);
}
/* FAQ Section */
.faq-section {
background: #073054;
position: relative;
padding: 50px 40px 120px 40px;
margin: 30px 0px;
border-radius: 12px;
border: 1px solid #021524;
}
.faq-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background: radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);*/
pointer-events: none;
}
.faq-header {
text-align: center;
margin-bottom: 40px;
position: relative;
z-index: 2;
margin-top: 60px;
}
.faq-items {
margin: 0 auto;
position: relative;
z-index: 2;
}
.faq-item {
background: transparent;
border-radius: 12px;
margin-bottom: 16px;
box-shadow: none;
border: 1px solid #092b45;
transition: all 0.3s ease;
overflow: hidden;
}
.faq-item:hover {
border-color: #ffc107;
transform: translateY(-2px);
}
.faq-item.active {
border-color: #ffc107;
}
.faq-question {
padding: 24px 28px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
user-select: none;
}
.faq-question:hover {
background: var(--bg-light);
}
.faq-text {
font-size: 1.1rem;
font-weight: 300;
color: #ffffff;
line-height: 1.4;
flex: 1;
margin-right: 20px;
}
.faq-toggle {
width: 32px;
height: 32px;
background: #ffc107;
color: #000000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 500;
transition: all 0.3s ease;
flex-shrink: 0;
}
.faq-item.active .faq-toggle {
background: #ffca2c;
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
background: transparent;
}
.faq-answer p {
padding: 0 28px 28px;
margin: 0;
color: #ffffff;
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
opacity: 0.9;
}
.faq-footer {
text-align: center;
margin-top: 40px;
position: relative;
z-index: 2;
}
.faq-contact {
font-size: 1.1rem;
color: #ffffff;
margin: 0;
}
.faq-link {
color: #ffc107;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.faq-link:hover {
color: #ffca2c;
text-decoration: underline;
}
.section-heading {
font-size: 48px;
}
.page-heading {
font-size: 56px;
}
.intro-para {
font-size: 25px;
line-height: 1.5;
}
.text-yellow {
color: #fdd204 !important;
}
a.text-yellow:hover {
color: var(--text-yellow-light) !important;
text-decoration: none !important;
}
.border-yellow {
border: 1px solid #fdd204 !important;
}
.text-centered {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* Mobile styles for FAQ */
@media (max-width: 768px) {
.section-heading {
font-size: 32px;
text-align: center;
}
.faq-section {
padding: 20px 12px;
margin: 15px 0;
}
.faq-header {
margin-bottom: 20px;
}
.faq-title {
font-size: 1.8rem;
margin-bottom: 8px;
}
.faq-subtitle {
font-size: 0.9rem;
}
.faq-question {
padding: 15px 16px;
}
.faq-text {
font-size: 0.85rem;
margin-right: 12px;
}
.faq-toggle {
width: 24px;
height: 24px;
font-size: 0.9rem;
}
.faq-answer p {
padding: 0 16px 16px;
font-size: 0.8rem;
}
.faq-footer {
margin-top: 20px;
}
.faq-contact {
font-size: 0.85rem;
}
/* Mobile Layout Improvements */
/* Intro paragraph mobile size */
.intro-para {
font-size: 1rem !important;
}
/* Altorder full width and centered */
.altorder,
*[class*="altorder"] {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
text-align: center;
padding: 0 15px;
}
/* Benefits2 section full width on mobile */
.whatmore.benefits2 {
padding: 40px 0 !important;
width: 100% !important;
margin: 0 !important;
}
.benefits2.row.clearfix {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Benefits rows mobile styling */
.benefits-row {
flex-direction: column !important;
min-height: auto !important;
margin: 15px 0 !important;
padding: 20px 15px !important;
text-align: center !important;
}
.benefits-row .benefits {
order: 2;
/*padding: 15px !important;*/
align-items: center !important;
text-align: center !important;
margin-bottom: 20px;
}
.benefits-row .benefitsimg {
order: 1;
padding: 10px !important;
margin-bottom: 15px;
justify-content: center !important;
width: 100%;
}
/* Smaller images in benefits section */
.benefits-row .benefitsimg img {
max-width: 280px !important;
height: auto !important;
margin: 0 auto;
}
/* Better spacing for benefits text */
.benefits-row .benefits h3.headerbar {
font-size: 1.4rem !important;
margin-bottom: 15px !important;
text-align: center !important;
}
.benefits-row .benefits p {
font-size: 0.9rem !important;
line-height: 1.4 !important;
text-align: center !important;
margin-bottom: 10px !important;
}
/* Launcher Grid Mobile Improvements */
.launchers {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
padding: 5px 0px !important;
margin: 20px 0 !important;
width: 100% !important;
}
.launcher {
padding: 12px 8px !important;
min-height: 90px !important;
height: 90px !important;
font-size: 0.8rem !important;
background: rgba(7, 48, 84, 0.3) !important;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.launcher:hover {
background: rgba(7, 48, 84, 0.5) !important;
transform: none !important;
}
.launcher img.launcherlogo {
width: 32px !important;
height: 32px !important;
margin-bottom: 8px !important;
display: block !important;
flex-shrink: 0 !important;
}
.launcher:hover img.launcherlogo {
transform: none !important;
}
/* Main Benefits2 - 2 per row on mobile */
ul.mainbenefits2 {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
padding: 10px !important;
}
.mainbenefits2 li {
margin: 0 !important;
padding: 6px !important;
font-size: 0.6rem !important;
}
/* Benefits2 section - reduced vertical spacing */
.whatmore.benefits2 {
padding: 30px 0 !important;
}
.benefits-row {
margin: 10px 0 !important;
padding: 15px !important;
}
.benefits-row .benefits {
padding: 10px !important;
margin-bottom: 15px !important;
}
.benefits-row .benefitsimg {
margin-bottom: 10px !important;
}
/* Closer spacing for benefits text */
.benefits-row .benefits h3.headerbar {
margin-bottom: 10px !important;
}
.benefits-row .benefits p {
margin-bottom: 8px !important;
}
/* Benefit Options - smaller icons on mobile */
ul.benefit-options .far.fa-check-square,
ul.benefit-options .fa-check-square,
ul.benefit-options .fa-exclamation-circle {
font-size: 14px !important;
margin-right: 8px !important;
}
ul.benefit-options li {
margin: 8px 0 !important;
padding-bottom: 10px !important;
font-size: 0.85rem !important;
line-height: 1.4 !important;
}
/* Make all benefit-options images much smaller on mobile */
ul.benefit-options li img {
height: 80px !important;
width: auto !important;
max-width: 80px !important;
margin-bottom: 10px !important;
}
}
/* ===================================================================
TAILWIND-INSPIRED FLEX UTILITY CLASSES
These classes make it easy to create flexible layouts without writing custom CSS.
Use them to align, distribute, and control the behavior of elements within containers.
=================================================================== */
/* WANT TO MOVE THESE TO A FILE CALLED utilities.css AND LINK IT IN THE HEADER BEFRE THE STYLE.CSS and SHARED.CSS */
/* Flex Display - Turn elements into flex containers */
.flex {
display: flex !important;
/* Makes an element a flex container, allowing you to use all other flex utilities on its children */
}
.inline-flex {
display: inline-flex !important;
/* Like .flex, but the container behaves like an inline element (sits next to other elements) */
}
/* Flex Direction - Control the main axis direction */
.flex-row {
flex-direction: row !important;
/* Default: Children line up horizontally from left to right */
}
.flex-row-reverse {
flex-direction: row-reverse !important;
/* Children line up horizontally from right to left */
}
.flex-col {
flex-direction: column !important;
/* Children stack vertically from top to bottom */
}
.flex-col-reverse {
flex-direction: column-reverse !important;
/* Children stack vertically from bottom to top */
}
/* Flex Wrap - Control whether children wrap to new lines */
.flex-wrap {
flex-wrap: wrap !important;
/* Children can wrap to the next line when they run out of space */
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
/* Children wrap to new lines, but in reverse order */
}
.flex-nowrap {
flex-wrap: nowrap !important;
/* Children stay on one line, even if they overflow (default behavior) */
}
/* Flex - Control how children grow and shrink */
.flex-1 {
flex: 1 1 0% !important;
/* Child takes up equal space with other .flex-1 elements, can grow and shrink */
}
.flex-auto {
flex: 1 1 auto !important;
/* Child grows and shrinks based on its content size */
}
.flex-initial {
flex: 0 1 auto !important;
/* Child keeps its natural size but can shrink if needed */
}
.flex-none {
flex: none !important;
/* Child keeps its natural size and never grows or shrinks */
}
/* Flex Grow - Control how much extra space a child should take */
.flex-grow {
flex-grow: 1 !important;
/* Child will grow to fill available space */
}
.flex-grow-0 {
flex-grow: 0 !important;
/* Child will not grow beyond its natural size */
}
/* Flex Shrink - Control how much a child should shrink when space is tight */
.flex-shrink {
flex-shrink: 1 !important;
/* Child can shrink when there's not enough space (default) */
}
.flex-shrink-0 {
flex-shrink: 0 !important;
/* Child will never shrink below its natural size */
}
/* Justify Content - Control horizontal alignment along the main axis */
.justify-start {
justify-content: flex-start !important;
/* Pack children to the left/start of the container */
}
.justify-end {
justify-content: flex-end !important;
/* Pack children to the right/end of the container */
}
.justify-center {
justify-content: center !important;
/* Center children horizontally in the container */
}
.justify-between {
justify-content: space-between !important;
/* Spread children out with equal space between them, none at the edges */
}
.justify-around {
justify-content: space-around !important;
/* Spread children out with equal space around each one */
}
.justify-evenly {
justify-content: space-evenly !important;
/* Spread children out with perfectly equal space between and around them */
}
/* Align Items - Control vertical alignment along the cross axis */
.items-start {
align-items: flex-start !important;
/* Align children to the top of the container */
}
.items-end {
align-items: flex-end !important;
/* Align children to the bottom of the container */
}
.items-center {
align-items: center !important;
/* Center children vertically in the container */
}
.items-baseline {
align-items: baseline !important;
/* Align children so their text baselines line up */
}
.items-stretch {
align-items: stretch !important;
/* Make children expand to fill the full height of the container */
}
/* Align Content - Control alignment of wrapped lines */
.content-start {
align-content: flex-start !important;
/* Pack wrapped lines to the top */
}
.content-end {
align-content: flex-end !important;
/* Pack wrapped lines to the bottom */
}
.content-center {
align-content: center !important;
/* Center wrapped lines vertically */
}
.content-between {
align-content: space-between !important;
/* Distribute wrapped lines with space between them */
}
.content-around {
align-content: space-around !important;
/* Distribute wrapped lines with space around them */
}
.content-evenly {
align-content: space-evenly !important;
/* Distribute wrapped lines with equal space */
}
/* Align Self - Override alignment for individual children */
.self-auto {
align-self: auto !important;
/* Use the parent's align-items setting */
}
.self-start {
align-self: flex-start !important;
/* Align this child to the top, regardless of parent setting */
}
.self-end {
align-self: flex-end !important;
/* Align this child to the bottom, regardless of parent setting */
}
.self-center {
align-self: center !important;
/* Center this child vertically, regardless of parent setting */
}
.self-stretch {
align-self: stretch !important;
/* Make this child fill the full height, regardless of parent setting */
}
.self-baseline {
align-self: baseline !important;
/* Align this child's text baseline, regardless of parent setting */
}
/* Common Flex Combinations - Shortcuts for frequent patterns */
.flex-center {
display: flex !important;
justify-content: center !important;
align-items: center !important;
/* Perfect centering: horizontally and vertically center all children */
}
.flex-center-col {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
/* Perfect centering in a column: stack children vertically and center them */
}
/* Section Spacing - Match homepage pattern */
.py-lg {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
.px-50 {
padding-left: 50px;
padding-right: 50px;
}
.page-section {
padding: 80px 0;
}
/* ===================================================================
TAILWIND-STYLE UTILITY CLASSES
=================================================================== */
/* Spacing Scale (following Tailwind convention):
0 = 0px, 1 = 0.25rem (4px), 2 = 0.5rem (8px), 3 = 0.75rem (12px), 4 = 1rem (16px),
5 = 1.25rem (20px), 6 = 1.5rem (24px), 8 = 2rem (32px), 10 = 2.5rem (40px),
12 = 3rem (48px), 16 = 4rem (64px), 20 = 5rem (80px), 24 = 6rem (96px),
32 = 8rem (128px), 40 = 10rem (160px), 48 = 12rem (192px), 56 = 14rem (224px),
64 = 16rem (256px) */
/* Padding - All sides (px) */
.p-0 {
padding: 0;
}
.p-1 {
padding: 0.25rem;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.p-10 {
padding: 2.5rem;
}
.p-12 {
padding: 3rem;
}
.p-16 {
padding: 4rem;
}
.p-20 {
padding: 5rem;
}
.p-24 {
padding: 6rem;
}
.p-32 {
padding: 8rem;
}
.p-40 {
padding: 10rem;
}
.p-48 {
padding: 12rem;
}
/* Padding - Horizontal (px) */
.px-0 {
padding-left: 0;
padding-right: 0;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.px-24 {
padding-left: 6rem;
padding-right: 6rem;
}
.px-32 {
padding-left: 8rem;
padding-right: 8rem;
}
.px-40 {
padding-left: 10rem;
padding-right: 10rem;
}
.px-48 {
padding-left: 12rem;
padding-right: 12rem;
}
/* Padding - Vertical (py) */
.py-0 {
padding-top: 0;
padding-bottom: 0;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.py-40 {
padding-top: 10rem;
padding-bottom: 10rem;
}
.py-48 {
padding-top: 12rem;
padding-bottom: 12rem;
}
/* Padding - Top (pt) */
.pt-0 {
padding-top: 0;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.pt-10 {
padding-top: 2.5rem;
}
.pt-12 {
padding-top: 3rem;
}
.pt-16 {
padding-top: 4rem;
}
.pt-20 {
padding-top: 5rem;
}
.pt-24 {
padding-top: 6rem;
}
.pt-32 {
padding-top: 8rem;
}
.pt-40 {
padding-top: 10rem;
}
.pt-48 {
padding-top: 12rem;
}
/* Padding - Bottom (pb) */
.pb-0 {
padding-bottom: 0;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-5 {
padding-bottom: 1.25rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-12 {
padding-bottom: 3rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.pb-24 {
padding-bottom: 6rem;
}
.pb-32 {
padding-bottom: 8rem;
}
.pb-40 {
padding-bottom: 10rem;
}
.pb-48 {
padding-bottom: 12rem;
}
/* Padding - Left (pl) */
.pl-0 {
padding-left: 0;
}
.pl-1 {
padding-left: 0.25rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-3 {
padding-left: 0.75rem;
}
.pl-4 {
padding-left: 1rem;
}
.pl-5 {
padding-left: 1.25rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.pl-8 {
padding-left: 2rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.pl-12 {
padding-left: 3rem;
}
.pl-16 {
padding-left: 4rem;
}
.pl-20 {
padding-left: 5rem;
}
.pl-24 {
padding-left: 6rem;
}
.pl-32 {
padding-left: 8rem;
}
.pl-40 {
padding-left: 10rem;
}
.pl-48 {
padding-left: 12rem;
}
/* Padding - Right (pr) */
.pr-0 {
padding-right: 0;
}
.pr-1 {
padding-right: 0.25rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pr-3 {
padding-right: 0.75rem;
}
.pr-4 {
padding-right: 1rem;
}
.pr-5 {
padding-right: 1.25rem;
}
.pr-6 {
padding-right: 1.5rem;
}
.pr-8 {
padding-right: 2rem;
}
.pr-10 {
padding-right: 2.5rem;
}
.pr-12 {
padding-right: 3rem;
}
.pr-16 {
padding-right: 4rem;
}
.pr-20 {
padding-right: 5rem;
}
.pr-24 {
padding-right: 6rem;
}
.pr-32 {
padding-right: 8rem;
}
.pr-40 {
padding-right: 10rem;
}
.pr-48 {
padding-right: 12rem;
}
/* Margin - All sides (m) */
.m-0 {
margin: 0;
}
.m-1 {
margin: 0.25rem;
}
.m-2 {
margin: 0.5rem;
}
.m-3 {
margin: 0.75rem;
}
.m-4 {
margin: 1rem;
}
.m-5 {
margin: 1.25rem;
}
.m-6 {
margin: 1.5rem;
}
.m-8 {
margin: 2rem;
}
.m-10 {
margin: 2.5rem;
}
.m-12 {
margin: 3rem;
}
.m-16 {
margin: 4rem;
}
.m-20 {
margin: 5rem;
}
.m-24 {
margin: 6rem;
}
.m-32 {
margin: 8rem;
}
.m-40 {
margin: 10rem;
}
.m-48 {
margin: 12rem;
}
.m-auto {
margin: auto;
}
/* Margin - Horizontal (mx) */
.mx-0 {
margin-left: 0;
margin-right: 0;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.mx-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
.mx-12 {
margin-left: 3rem;
margin-right: 3rem;
}
.mx-16 {
margin-left: 4rem;
margin-right: 4rem;
}
.mx-20 {
margin-left: 5rem;
margin-right: 5rem;
}
.mx-24 {
margin-left: 6rem;
margin-right: 6rem;
}
.mx-32 {
margin-left: 8rem;
margin-right: 8rem;
}
.mx-40 {
margin-left: 10rem;
margin-right: 10rem;
}
.mx-48 {
margin-left: 12rem;
margin-right: 12rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
/* Margin - Vertical (my) */
.my-0 {
margin-top: 0;
margin-bottom: 0;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.my-24 {
margin-top: 6rem;
margin-bottom: 6rem;
}
.my-32 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.my-40 {
margin-top: 10rem;
margin-bottom: 10rem;
}
.my-48 {
margin-top: 12rem;
margin-bottom: 12rem;
}
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
/* Margin - Top (mt) */
.mt-0 {
margin-top: 0;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-20 {
margin-top: 5rem;
}
.mt-24 {
margin-top: 6rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-40 {
margin-top: 10rem;
}
.mt-48 {
margin-top: 12rem;
}
.mt-auto {
margin-top: auto;
}
/* Margin - Bottom (mb) */
.mb-0 {
margin-bottom: 0;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.mb-24 {
margin-bottom: 6rem;
}
.mb-32 {
margin-bottom: 8rem;
}
.mb-40 {
margin-bottom: 10rem;
}
.mb-48 {
margin-bottom: 12rem;
}
.mb-auto {
margin-bottom: auto;
}
/* Margin - Left (ml) */
.ml-0 {
margin-left: 0;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-5 {
margin-left: 1.25rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.ml-8 {
margin-left: 2rem;
}
.ml-10 {
margin-left: 2.5rem;
}
.ml-12 {
margin-left: 3rem;
}
.ml-16 {
margin-left: 4rem;
}
.ml-20 {
margin-left: 5rem;
}
.ml-24 {
margin-left: 6rem;
}
.ml-32 {
margin-left: 8rem;
}
.ml-40 {
margin-left: 10rem;
}
.ml-48 {
margin-left: 12rem;
}
.ml-auto {
margin-left: auto;
}
/* Margin - Right (mr) */
.mr-0 {
margin-right: 0;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-4 {
margin-right: 1rem;
}
.mr-5 {
margin-right: 1.25rem;
}
.mr-6 {
margin-right: 1.5rem;
}
.mr-8 {
margin-right: 2rem;
}
.mr-10 {
margin-right: 2.5rem;
}
.mr-12 {
margin-right: 3rem;
}
.mr-16 {
margin-right: 4rem;
}
.mr-20 {
margin-right: 5rem;
}
.mr-24 {
margin-right: 6rem;
}
.mr-32 {
margin-right: 8rem;
}
.mr-40 {
margin-right: 10rem;
}
.mr-48 {
margin-right: 12rem;
}
.mr-auto {
margin-right: auto;
}
/* Legacy utility classes - keeping for backwards compatibility */
.mb-3 {
margin-bottom: 1rem;
}
.mb-4 {
margin-bottom: 1.5rem;
}
.mb-5 {
margin-bottom: 3rem;
}
.text-centered {
text-align: center;
}
/* Height utilities for flex centering */
.h-full {
height: 100% !important;
/* Make element take full height of its parent - useful with flex centering */
}
.min-h-full {
min-height: 100% !important;
/* Make element at least as tall as its parent - useful with flex centering */
}
/* ===================================================================
TAILWIND-INSPIRED GAP UTILITY CLASSES
These classes control the spacing between children in flex and grid containers.
Use them to create consistent spacing without adding margins to individual items.
=================================================================== */
/* Gap - Controls spacing between all children (both horizontal and vertical) */
.gap-0 {
gap: 0px !important;
/* No space between children */
}
.gap-px {
gap: 1px !important;
/* 1px space between children */
}
.gap-0\.5 {
gap: 0.125rem !important;
/* 2px space between children */
}
.gap-1 {
gap: 0.25rem !important;
/* 4px space between children */
}
.gap-1\.5 {
gap: 0.375rem !important;
/* 6px space between children */
}
.gap-2 {
gap: 0.5rem !important;
/* 8px space between children */
}
.gap-2\.5 {
gap: 0.625rem !important;
/* 10px space between children */
}
.gap-3 {
gap: 0.75rem !important;
/* 12px space between children */
}
.gap-3\.5 {
gap: 0.875rem !important;
/* 14px space between children */
}
.gap-4 {
gap: 1rem !important;
/* 16px space between children */
}
.gap-5 {
gap: 1.25rem !important;
/* 20px space between children */
}
.gap-6 {
gap: 1.5rem !important;
/* 24px space between children */
}
.gap-7 {
gap: 1.75rem !important;
/* 28px space between children */
}
.gap-8 {
gap: 2rem !important;
/* 32px space between children */
}
.gap-9 {
gap: 2.25rem !important;
/* 36px space between children */
}
.gap-10 {
gap: 2.5rem !important;
/* 40px space between children */
}
.gap-11 {
gap: 2.75rem !important;
/* 44px space between children */
}
.gap-12 {
gap: 3rem !important;
/* 48px space between children */
}
.gap-14 {
gap: 3.5rem !important;
/* 56px space between children */
}
.gap-16 {
gap: 4rem !important;
/* 64px space between children */
}
.gap-20 {
gap: 5rem !important;
/* 80px space between children */
}
.gap-24 {
gap: 6rem !important;
/* 96px space between children */
}
.gap-28 {
gap: 7rem !important;
/* 112px space between children */
}
.gap-32 {
gap: 8rem !important;
/* 128px space between children */
}
.gap-36 {
gap: 9rem !important;
/* 144px space between children */
}
.gap-40 {
gap: 10rem !important;
/* 160px space between children */
}
.gap-44 {
gap: 11rem !important;
/* 176px space between children */
}
.gap-48 {
gap: 12rem !important;
/* 192px space between children */
}
.gap-52 {
gap: 13rem !important;
/* 208px space between children */
}
.gap-56 {
gap: 14rem !important;
/* 224px space between children */
}
.gap-60 {
gap: 15rem !important;
/* 240px space between children */
}
.gap-64 {
gap: 16rem !important;
/* 256px space between children */
}
.gap-72 {
gap: 18rem !important;
/* 288px space between children */
}
.gap-80 {
gap: 20rem !important;
/* 320px space between children */
}
.gap-96 {
gap: 24rem !important;
/* 384px space between children */
}
/* Gap X - Controls horizontal spacing only (between columns) */
.gap-x-0 {
column-gap: 0px !important;
/* No horizontal space between children */
}
.gap-x-px {
column-gap: 1px !important;
/* 1px horizontal space between children */
}
.gap-x-0\.5 {
column-gap: 0.125rem !important;
/* 2px horizontal space between children */
}
.gap-x-1 {
column-gap: 0.25rem !important;
/* 4px horizontal space between children */
}
.gap-x-1\.5 {
column-gap: 0.375rem !important;
/* 6px horizontal space between children */
}
.gap-x-2 {
column-gap: 0.5rem !important;
/* 8px horizontal space between children */
}
.gap-x-2\.5 {
column-gap: 0.625rem !important;
/* 10px horizontal space between children */
}
.gap-x-3 {
column-gap: 0.75rem !important;
/* 12px horizontal space between children */
}
.gap-x-3\.5 {
column-gap: 0.875rem !important;
/* 14px horizontal space between children */
}
.gap-x-4 {
column-gap: 1rem !important;
/* 16px horizontal space between children */
}
.gap-x-5 {
column-gap: 1.25rem !important;
/* 20px horizontal space between children */
}
.gap-x-6 {
column-gap: 1.5rem !important;
/* 24px horizontal space between children */
}
.gap-x-7 {
column-gap: 1.75rem !important;
/* 28px horizontal space between children */
}
.gap-x-8 {
column-gap: 2rem !important;
/* 32px horizontal space between children */
}
.gap-x-9 {
column-gap: 2.25rem !important;
/* 36px horizontal space between children */
}
.gap-x-10 {
column-gap: 2.5rem !important;
/* 40px horizontal space between children */
}
.gap-x-11 {
column-gap: 2.75rem !important;
/* 44px horizontal space between children */
}
.gap-x-12 {
column-gap: 3rem !important;
/* 48px horizontal space between children */
}
.gap-x-14 {
column-gap: 3.5rem !important;
/* 56px horizontal space between children */
}
.gap-x-16 {
column-gap: 4rem !important;
/* 64px horizontal space between children */
}
.gap-x-20 {
column-gap: 5rem !important;
/* 80px horizontal space between children */
}
.gap-x-24 {
column-gap: 6rem !important;
/* 96px horizontal space between children */
}
.gap-x-28 {
column-gap: 7rem !important;
/* 112px horizontal space between children */
}
.gap-x-32 {
column-gap: 8rem !important;
/* 128px horizontal space between children */
}
.gap-x-36 {
column-gap: 9rem !important;
/* 144px horizontal space between children */
}
.gap-x-40 {
column-gap: 10rem !important;
/* 160px horizontal space between children */
}
.gap-x-44 {
column-gap: 11rem !important;
/* 176px horizontal space between children */
}
.gap-x-48 {
column-gap: 12rem !important;
/* 192px horizontal space between children */
}
.gap-x-52 {
column-gap: 13rem !important;
/* 208px horizontal space between children */
}
.gap-x-56 {
column-gap: 14rem !important;
/* 224px horizontal space between children */
}
.gap-x-60 {
column-gap: 15rem !important;
/* 240px horizontal space between children */
}
.gap-x-64 {
column-gap: 16rem !important;
/* 256px horizontal space between children */
}
.gap-x-72 {
column-gap: 18rem !important;
/* 288px horizontal space between children */
}
.gap-x-80 {
column-gap: 20rem !important;
/* 320px horizontal space between children */
}
.gap-x-96 {
column-gap: 24rem !important;
/* 384px horizontal space between children */
}
/* Gap Y - Controls vertical spacing only (between rows) */
.gap-y-0 {
row-gap: 0px !important;
/* No vertical space between children */
}
.gap-y-px {
row-gap: 1px !important;
/* 1px vertical space between children */
}
.gap-y-0\.5 {
row-gap: 0.125rem !important;
/* 2px vertical space between children */
}
.gap-y-1 {
row-gap: 0.25rem !important;
/* 4px vertical space between children */
}
.gap-y-1\.5 {
row-gap: 0.375rem !important;
/* 6px vertical space between children */
}
.gap-y-2 {
row-gap: 0.5rem !important;
/* 8px vertical space between children */
}
.gap-y-2\.5 {
row-gap: 0.625rem !important;
/* 10px vertical space between children */
}
.gap-y-3 {
row-gap: 0.75rem !important;
/* 12px vertical space between children */
}
.gap-y-3\.5 {
row-gap: 0.875rem !important;
/* 14px vertical space between children */
}
.gap-y-4 {
row-gap: 1rem !important;
/* 16px vertical space between children */
}
.gap-y-5 {
row-gap: 1.25rem !important;
/* 20px vertical space between children */
}
.gap-y-6 {
row-gap: 1.5rem !important;
/* 24px vertical space between children */
}
.gap-y-7 {
row-gap: 1.75rem !important;
/* 28px vertical space between children */
}
.gap-y-8 {
row-gap: 2rem !important;
/* 32px vertical space between children */
}
.gap-y-9 {
row-gap: 2.25rem !important;
/* 36px vertical space between children */
}
.gap-y-10 {
row-gap: 2.5rem !important;
/* 40px vertical space between children */
}
.gap-y-11 {
row-gap: 2.75rem !important;
/* 44px vertical space between children */
}
.gap-y-12 {
row-gap: 3rem !important;
/* 48px vertical space between children */
}
.gap-y-14 {
row-gap: 3.5rem !important;
/* 56px vertical space between children */
}
.gap-y-16 {
row-gap: 4rem !important;
/* 64px vertical space between children */
}
.gap-y-20 {
row-gap: 5rem !important;
/* 80px vertical space between children */
}
.gap-y-24 {
row-gap: 6rem !important;
/* 96px vertical space between children */
}
.gap-y-28 {
row-gap: 7rem !important;
/* 112px vertical space between children */
}
.gap-y-32 {
row-gap: 8rem !important;
/* 128px vertical space between children */
}
.gap-y-36 {
row-gap: 9rem !important;
/* 144px vertical space between children */
}
.gap-y-40 {
row-gap: 10rem !important;
/* 160px vertical space between children */
}
.gap-y-44 {
row-gap: 11rem !important;
/* 176px vertical space between children */
}
.gap-y-48 {
row-gap: 12rem !important;
/* 192px vertical space between children */
}
.gap-y-52 {
row-gap: 13rem !important;
/* 208px vertical space between children */
}
.gap-y-56 {
row-gap: 14rem !important;
/* 224px vertical space between children */
}
.gap-y-60 {
row-gap: 15rem !important;
/* 240px vertical space between children */
}
.gap-y-64 {
row-gap: 16rem !important;
/* 256px vertical space between children */
}
.gap-y-72 {
row-gap: 18rem !important;
/* 288px vertical space between children */
}
.gap-y-80 {
row-gap: 20rem !important;
/* 320px vertical space between children */
}
.gap-y-96 {
row-gap: 24rem !important;
/* 384px vertical space between children */
}
/* ===================================================================
TAILWIND-INSPIRED BORDER RADIUS UTILITY CLASSES
=================================================================== */
/* Border Radius */
.rounded-none {
border-radius: 0px !important;
}
.rounded-sm {
border-radius: 2px !important;
}
.rounded {
border-radius: 4px !important;
}
.rounded-md {
border-radius: 6px !important;
}
.rounded-lg {
border-radius: 12px !important;
}
.rounded-xl {
border-radius: 16px !important;
}
.rounded-2xl {
border-radius: 20px !important;
}
.rounded-3xl {
border-radius: 24px !important;
}
.rounded-full {
border-radius: 9999px !important;
}
/* Border Radius - Top */
.rounded-t-none {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
.rounded-t-sm {
border-top-left-radius: 2px !important;
border-top-right-radius: 2px !important;
}
.rounded-t {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.rounded-t-md {
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
}
.rounded-t-lg {
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
}
.rounded-t-xl {
border-top-left-radius: 16px !important;
border-top-right-radius: 16px !important;
}
.rounded-t-2xl {
border-top-left-radius: 20px !important;
border-top-right-radius: 20px !important;
}
.rounded-t-3xl {
border-top-left-radius: 24px !important;
border-top-right-radius: 24px !important;
}
.rounded-t-full {
border-top-left-radius: 9999px !important;
border-top-right-radius: 9999px !important;
}
/* Border Radius - Right */
.rounded-r-none {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.rounded-r-sm {
border-top-right-radius: 2px !important;
border-bottom-right-radius: 2px !important;
}
.rounded-r {
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
.rounded-r-md {
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
}
.rounded-r-lg {
border-top-right-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
.rounded-r-xl {
border-top-right-radius: 16px !important;
border-bottom-right-radius: 16px !important;
}
.rounded-r-2xl {
border-top-right-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}
.rounded-r-3xl {
border-top-right-radius: 24px !important;
border-bottom-right-radius: 24px !important;
}
.rounded-r-full {
border-top-right-radius: 9999px !important;
border-bottom-right-radius: 9999px !important;
}
/* Border Radius - Bottom */
.rounded-b-none {
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.rounded-b-sm {
border-bottom-right-radius: 2px !important;
border-bottom-left-radius: 2px !important;
}
.rounded-b {
border-bottom-right-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
.rounded-b-md {
border-bottom-right-radius: 6px !important;
border-bottom-left-radius: 6px !important;
}
.rounded-b-lg {
border-bottom-right-radius: 12px !important;
border-bottom-left-radius: 12px !important;
}
.rounded-b-xl {
border-bottom-right-radius: 16px !important;
border-bottom-left-radius: 16px !important;
}
.rounded-b-2xl {
border-bottom-right-radius: 20px !important;
border-bottom-left-radius: 20px !important;
}
.rounded-b-3xl {
border-bottom-right-radius: 24px !important;
border-bottom-left-radius: 24px !important;
}
.rounded-b-full {
border-bottom-right-radius: 9999px !important;
border-bottom-left-radius: 9999px !important;
}
/* Border Radius - Left */
.rounded-l-none {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.rounded-l-sm {
border-top-left-radius: 2px !important;
border-bottom-left-radius: 2px !important;
}
.rounded-l {
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
.rounded-l-md {
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
}
.rounded-l-lg {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
}
.rounded-l-xl {
border-top-left-radius: 16px !important;
border-bottom-left-radius: 16px !important;
}
.rounded-l-2xl {
border-top-left-radius: 20px !important;
border-bottom-left-radius: 20px !important;
}
.rounded-l-3xl {
border-top-left-radius: 24px !important;
border-bottom-left-radius: 24px !important;
}
.rounded-l-full {
border-top-left-radius: 9999px !important;
border-bottom-left-radius: 9999px !important;
}
/* Border Radius - Individual Corners */
.rounded-tl-none {
border-top-left-radius: 0px !important;
}
.rounded-tl-sm {
border-top-left-radius: 2px !important;
}
.rounded-tl {
border-top-left-radius: 4px !important;
}
.rounded-tl-md {
border-top-left-radius: 6px !important;
}
.rounded-tl-lg {
border-top-left-radius: 12px !important;
}
.rounded-tl-xl {
border-top-left-radius: 16px !important;
}
.rounded-tl-2xl {
border-top-left-radius: 20px !important;
}
.rounded-tl-3xl {
border-top-left-radius: 24px !important;
}
.rounded-tl-full {
border-top-left-radius: 9999px !important;
}
.rounded-tr-none {
border-top-right-radius: 0px !important;
}
.rounded-tr-sm {
border-top-right-radius: 2px !important;
}
.rounded-tr {
border-top-right-radius: 4px !important;
}
.rounded-tr-md {
border-top-right-radius: 6px !important;
}
.rounded-tr-lg {
border-top-right-radius: 12px !important;
}
.rounded-tr-xl {
border-top-right-radius: 16px !important;
}
.rounded-tr-2xl {
border-top-right-radius: 20px !important;
}
.rounded-tr-3xl {
border-top-right-radius: 24px !important;
}
.rounded-tr-full {
border-top-right-radius: 9999px !important;
}
.rounded-br-none {
border-bottom-right-radius: 0px !important;
}
.rounded-br-sm {
border-bottom-right-radius: 2px !important;
}
.rounded-br {
border-bottom-right-radius: 4px !important;
}
.rounded-br-md {
border-bottom-right-radius: 6px !important;
}
.rounded-br-lg {
border-bottom-right-radius: 12px !important;
}
.rounded-br-xl {
border-bottom-right-radius: 16px !important;
}
.rounded-br-2xl {
border-bottom-right-radius: 20px !important;
}
.rounded-br-3xl {
border-bottom-right-radius: 24px !important;
}
.rounded-br-full {
border-bottom-right-radius: 9999px !important;
}
.rounded-bl-none {
border-bottom-left-radius: 0px !important;
}
.rounded-bl-sm {
border-bottom-left-radius: 2px !important;
}
.rounded-bl {
border-bottom-left-radius: 4px !important;
}
.rounded-bl-md {
border-bottom-left-radius: 6px !important;
}
.rounded-bl-lg {
border-bottom-left-radius: 12px !important;
}
.rounded-bl-xl {
border-bottom-left-radius: 16px !important;
}
.rounded-bl-2xl {
border-bottom-left-radius: 20px !important;
}
.rounded-bl-3xl {
border-bottom-left-radius: 24px !important;
}
.rounded-bl-full {
border-bottom-left-radius: 9999px !important;
}
/* ===================================================================
TAILWIND-INSPIRED FONT WEIGHT UTILITY CLASSES
=================================================================== */
/* Font Weight */
.font-thin {
font-weight: 100 !important;
}
.font-extralight {
font-weight: 200 !important;
}
.font-light {
font-weight: 300 !important;
}
.font-normal {
font-weight: 400 !important;
}
.font-medium {
font-weight: 500 !important;
}
.font-semibold {
font-weight: 500 !important;
}
.font-bold {
font-weight: 700 !important;
}
.font-extrabold {
font-weight: 800 !important;
}
.font-black {
font-weight: 900 !important;
}
/* ===================================================================
TAILWIND-INSPIRED FONT SIZE UTILITY CLASSES
=================================================================== */
/* Font Size - Small Sizes */
.text-xs {
font-size: 0.75rem !important;
} /* 12px */
.text-sm {
font-size: 0.875rem !important;
} /* 14px */
.text-base {
font-size: 1rem !important;
} /* 16px - current default */
.text-lg {
font-size: 1.125rem !important;
} /* 18px */
.text-xl {
font-size: 1.25rem !important;
} /* 20px */
/* Font Size - Large Sizes */
.text-2xl {
font-size: 1.5rem !important;
} /* 24px */
.text-3xl {
font-size: 1.875rem !important;
} /* 30px */
.text-4xl {
font-size: 2.25rem !important;
} /* 36px */
.text-5xl {
font-size: 3rem !important;
} /* 48px */
.text-6xl {
font-size: 3.75rem !important;
} /* 60px */
.text-7xl {
font-size: 4.5rem !important;
} /* 72px */
.text-8xl {
font-size: 6rem !important;
} /* 96px */
.text-9xl {
font-size: 8rem !important;
} /* 128px */
/* Font Size - Heading Equivalents (matching current theme) */
.text-h1 {
font-size: 40px !important;
} /* h1 equivalent */
.text-h2 {
font-size: 40px !important;
} /* h2 equivalent */
.text-h3 {
font-size: 35px !important;
} /* h3 equivalent */
.text-h4 {
font-size: 25px !important;
} /* h4 equivalent */
.text-h5 {
font-size: 23px !important;
} /* h5 equivalent */
.text-h6 {
font-size: 21px !important;
} /* h6 equivalent */
/* Font Size - Theme Specific */
.text-section-heading {
font-size: 48px !important;
} /* .section-heading equivalent */
.text-page-heading {
font-size: 56px !important;
} /* .page-heading equivalent */
.text-intro-para {
font-size: 25px !important;
} /* .intro-para equivalent */
figcaption {
font-size: 15px;
font-weight: 300;
opacity: 0.8;
color: var(--text-blue-lighter);
/*italic*/
font-style: italic;
}
hr {
background: none;
clear: both;
float: none;
height: 1px;
margin: 0 0 1.45em;
width: 100%;
opacity: 0.5;
border-bottom: 2px solid var(--bg-dark);
}
.whitespace-nowrap {
white-space: nowrap;
}
.blue-border {
border: 1px solid rgba(54, 166, 254, 0.15);
}
.blue-glow {
box-shadow:
0 32px 64px rgba(0, 0, 0, 0.15),
0 8px 32px rgba(54, 166, 254, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 0 20px rgba(54, 166, 254, 0.02);
}
.blue-glow-md {
box-shadow:
0 32px 64px rgba(0, 0, 0, 0.2),
0 8px 32px rgba(54, 166, 254, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 0 24px rgba(54, 166, 254, 0.04);
}
.float {
animation: verticalFloat 6s ease-in-out infinite;
}
.text-balance {
text-wrap: balance;
}
a#gscWrapperCollapseButton .fa,
a#gscWrapperCollapseButton .fas,
a#gscWrapperCollapseButton svg {
font-size: 16px;
line-height: 1; /* prevent icons from increasing button height */
}