/* Theme Name: Configen
Theme URI: https://configen.ai
Author: https://configen.ai
Author URI: https://configen.ai
Description: configen
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
*/
/* CSS Variables for Reusable Gradients */
:root {
--gradient: linear-gradient(270deg, #02FAA4 0%, #1AC1F6 100%);
--gradient-hover: linear-gradient(270deg, #1AC1F6 0%, #02FAA4 50%, #1AC1F6 100%);
--gradient-text: linear-gradient(280.14deg, #7AFFD1 -0.04%, #02FAA4 49.96%, #1AC1F6 99.96%);
}
/* Reset and General Styles */
@font-face {
font-family: 'Inter';
src: url('/wp-content/themes/configen/fonts/inter.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('/wp-content/themes/configen/fonts/inter-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
background-color: #0A1A2F;
color: #FFFFFF;
line-height: 1.6;
/*background-image: url('/wp-content/themes/configen/img/bg.png');
background-size: 100%;*/
}
.container {
max-width: calc(100% - 48px);
width: 1200px;
margin: 0 auto;
padding: 12px 0;
}
img {
max-width: 100%;
}
.descktop-hide{
display: none;
}
/* Header */
header {
justify-content: space-between;
background: rgba(15, 23, 42, 0.4);
min-height: 115px;
}
header .header-top-line {
background: var(--gradient);
color: rgba(15, 23, 42, 1);
text-align: center;
padding: 5px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.029em;
display: block;
}
header .header-top-line a {
color: rgba(15, 23, 42, 1);
font-weight: 700;
text-decoration: none;
}
header .logo img {
width: 110px;
}
header nav ul {
list-style: none;
display: flex;
gap: 20px;
}
header nav ul li a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
header nav ul li a:hover {
color: #00FFB2;
}
video#bg-video {
z-index: -1;
position: absolute;
top: calc(50% - 115px);
left: 50%;
width: 100%;
height: calc(100% + 115px);
transform: translate(-50%, calc(-50% + 58px));
object-fit: cover;
}
.pay-by {
font-size: 14px;
color: rgba(229, 242, 255, 0.6);
text-align: center;
display: grid;
gap: 4px;
padding-bottom: 8px;
}
.logo.container a {
display: inline-block;
}
h1, h2 {
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-align: left;
width: fit-content;
font-size: 34px;
margin-bottom: 16px;
line-height: 120%;
}
.left-block {
position: sticky;
top: 36px;
align-self: start;
}
#funding .left-block, #careers .left-block {
align-self: center;
position: relative;
top: 0;
}
#funding .left-block{
background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 10%) 0%, transparent 60%);
}
#use-cases .container, #funding .container, #careers .container, #faq .container {
display: grid;
grid-template-columns: 454px 1fr;
gap: 56px;
align-items: baseline;
}
#use-cases .container {
grid-template-columns: 1fr 894px;
}
#use-cases .container .tab-pane.active {
display: grid;
grid-template-columns: 1fr;
}
.use-cases-no-conf, .use-cases-conf{
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding:16px;
box-shadow: 0px -1px 2px 0px #ffffff63;
align-self: start;
position: sticky;
top: 32px;
}
.use-cases-conf{
background: linear-gradient(270deg, rgba(2, 250, 164, 0.14) 0%, rgba(26, 193, 246, 0.14) 100%);
}
.use-cases-conf .use-cases-list-item{
background: linear-gradient(270deg, rgba(2, 250, 164, 0.14) 0%, rgba(26, 193, 246, 0.14) 100%);
}
.use-cases-task {
font-size: 18px;
font-weight: 700;
}
.use-cases-list {
display: grid;
gap: 8px;
}
.use-cases-vs{
align-self: start;
position: sticky;
top: 32px;
}
.count-block {
color: #fff;
font-weight: 700;
background: rgba(255, 255, 255, 0.04);
display: block;
height: 24px;
display: flex;
border-radius: 50%;
justify-content: center;
align-items: center;
box-shadow: 0px -1px 2px 0px #ffffff63;
margin-top: 5px;
}
.use-cases-conf .count-block {
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.use-cases-vs {
align-self: start;
position: sticky;
margin-top: 32px;
font-size: 16px;
font-weight: 700;
display: grid;
background: rgba(255, 255, 255, 0.04);
border-radius: 50%;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
box-shadow: 0px -1px 2px 0px #ffffff63;
}
.use-cases-list .use-cases-list-item:not(:first-child) .count-block::before{
top: 0;
width: 8px;
height: 16px;
flex: none;
order: 0;
flex-grow: 0;
content: '';
position: absolute;
background-image: url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.64645 15.3536C3.84171 15.5488 4.15829 15.5488 4.35355 15.3536L7.53553 12.1716C7.7308 11.9763 7.7308 11.6597 7.53553 11.4645C7.34027 11.2692 7.02369 11.2692 6.82843 11.4645L4 14.2929L1.17157 11.4645C0.976311 11.2692 0.659728 11.2692 0.464466 11.4645C0.269204 11.6597 0.269204 11.9763 0.464466 12.1716L3.64645 15.3536ZM4 0H3.5V15H4H4.5V0H4Z" fill="url(%23paint0_linear_670_5409)"/><defs><linearGradient id="paint0_linear_670_5409" x1="4.5" y1="0" x2="4.5" y2="15" gradientUnits="userSpaceOnUse"><stop stop-color="%23E5F2FF" stop-opacity="0.8"/><stop offset="1" stop-color="%23E5F2FF"/></linearGradient></defs></svg>');
}
.use-cases-conf .use-cases-list .use-cases-list-item:not(:first-child) .count-block::before{
background-image: url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.64645 15.3536C3.84171 15.5488 4.15829 15.5488 4.35355 15.3536L7.53553 12.1716C7.7308 11.9763 7.7308 11.6597 7.53553 11.4645C7.34027 11.2692 7.02369 11.2692 6.82843 11.4645L4 14.2929L1.17157 11.4645C0.976311 11.2692 0.659728 11.2692 0.464466 11.4645C0.269204 11.6597 0.269204 11.9763 0.464466 12.1716L3.64645 15.3536ZM4 0H3.5V15H4H4.5V0H4Z" fill="url(%23paint0_linear_670_5630)"/><defs><linearGradient id="paint0_linear_670_5630" x1="4.5" y1="0" x2="4.5" y2="15" gradientUnits="userSpaceOnUse"><stop stop-color="%2305F3AD" stop-opacity="0.8"/><stop offset="1" stop-color="%2305F3AD" stop-opacity="0.8"/></linearGradient></defs></svg>');
}
.use-cases-list .use-cases-list-item:not(:last-child) .count-block:after{
content: '';
width: 1px;
background: linear-gradient(180deg, rgba(229, 242, 255, 0) 0%, rgba(229, 242, 255, 0.5) 100%);
position: absolute;
height: calc(100% - 12px - 24px - 5px);
top: 41px;
}
.use-cases-conf .use-cases-list .use-cases-list-item:not(:last-child) .count-block:after{
background: linear-gradient(180deg, rgba(5, 243, 173, 0) 0%, rgba(5, 243, 173, 0.7) 100%);
}
.use-cases-main-block {
display: grid;
grid-template-columns: 1fr 48px 1fr;
gap: 8px;
}
.use-cases-desc em,.use-cases-task span, .use-cases-time span{
color: #fff;
font-style: normal;
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.use-cases-desc em{
font-weight: 700;
}
.use-cases-list h3 {
text-align: center;
padding-bottom: 8px;
font-size: 16px;
padding-top: 8px;
}
.use-cases-conf h3{
font-style: normal;
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.use-cases-list-item {
display: grid;
grid-template-columns: 24px 1fr;
gap: 8px;
padding: 12px 12px 6px 12px;
border-radius: 16px;
box-shadow: 0px -1px 2px 0px #ffffff63;
background: rgba(255, 255, 255, 0.04);
color: rgba(229, 242, 255, 0.6);
position: relative;
}
.uc-title-block {
display: grid;
font-weight: 800;
grid-template-columns: 1fr auto;
gap: 8px;
}
.use-cases-conf .uc-title, .use-cases-conf .uc-time{
color: #fff;
}
.use-cases-desc {
font-style: italic;
font-weight: 400;
padding: 16px;
border-radius: 16px;
background: linear-gradient(270deg, rgba(2, 250, 164, 0.1) 0%, rgba(26, 193, 246, 0.1) 100%);
}
#use-cases .use-cases-desc p:last-child{
margin-bottom: 0;
}
.uc-time{
font-weight: 400;
}
.uc-time span{
font-weight: 700;
}
.uc-desc {
font-size: 14px;
}
.use-cases-time {
background: rgba(255, 255, 255, 0.04);
padding: 12px;
text-align: center;
margin-top: 8px;
border-radius: 16px;
font-weight: 700;
}
.use-cases-conf .use-cases-time {
background: none;
}
#use-cases p, #faq p, #careers p, #funding p {
color: #B0B0B0;
margin-bottom: 28px;
text-align: left;
letter-spacing: 0.4px;
font-size: 18px;
line-height: 150%;
}
#funding .left-block p {
line-height: 150%;
margin-bottom: 10px;
}
#funding p.red-text {
color: #E6483D;
font-weight: bold;
margin-bottom: 36px;
letter-spacing: -0.1px;
}
.apply-linkedin {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.2px;
}
.alt-button:hover .apply-linkedin .linkedin-path {
fill: url(#textGradient);
fill-opacity: 1;
}
/* Hero Section */
#hero .container {
display: grid;
grid-template-columns: 454px 1fr;
gap: 56px;
align-items: center;
min-height: calc(100vh - 215px);
}
#hero {
text-align: center;
padding: 50px 20px;
background: rgba(15, 23, 42, 0.4);
position: relative;
}
#hero .left-block {
position: relative;
align-self: center;
text-align: left;
top: 0;
background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 15%) 0%, transparent 70%);
}
#hero h1 {
font-size: 54px;
line-height: 120%;
margin-bottom: 26px;
}
#hero p {
font-size: 20px;
margin-bottom: 30px;
text-align: left;
letter-spacing: 0.025em;
line-height: 130%;
}
.button {
background: var(--gradient);
color: rgba(15, 23, 42, 1);
border: none;
padding: 18px 22px;
font-size: 14px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
display: inline-block;
margin-top: 16px;
text-decoration: none;
text-align: center;
}
.button:hover {
background: var(--gradient-hover);
background-size: 200% 100%;
animation: slideGradient 0.5s linear;
}
.button.main {
width: auto;
padding: 20px;
letter-spacing: 0.8px;
margin-top: 0;
text-transform: uppercase;
display: inline-block;
}
/* Keyframes for the sliding gradient animation */
@keyframes slideGradient {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
#hero .video img {
width: 100%;
max-width: 600px;
margin-top: 30px;
border-radius: 10px;
}
.video {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
aspect-ratio: 4 / 3;
padding-bottom: 56.25%;
height: 0;
}
.video iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: none;
}
/* Features Section */
#features {
padding: 70px 20px;
text-align: center;
}
#features p {
color: #B0B0B0;
margin-bottom: 28px;
text-align: left;
letter-spacing: 0.4px;
font-size: 18px;
}
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 40px;
max-width: 1200px;
margin: 0 auto;
border: 1px solid rgba(229, 242, 255, 0.14);
border-radius: 16px;
}
.feature {
display: grid;
grid-template-columns: 72px 1fr;
gap: 16px;
background-color: rgba(255, 255, 255, 0.04);
padding: 24px;
border-radius: 10px;
text-align: left;
border: 1px solid rgba(229, 242, 255, 0.14);
}
.feature h3 {
font-size: 18px;
}
#features .feature p {
color: #B0B0B0;
font-size: 14px;
line-height: 140%;
}
/* Use Cases Section */
#use-cases, #funding,#careers {
padding: 80px 20px;
background: rgba(23, 30, 49, 1);
}
#use-cases .right-block, #funding .right-block, #careers .right-block {
background: #212c41;
border-radius: 24px;
padding: 40px;
border: 1px solid rgba(229, 242, 255, 0.14);
background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 4%) 0%, transparent 90%);
}
#careers .right-block {
padding: 24px 40px;
}
.tabs {
width: 100%;
/*background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 4%) 0%, transparent 90%);*/
}
.tab-buttons {
display: flex;
gap: 24px;
margin-bottom: 30px;
justify-content: flex-start;
}
.tab-button {
background: none;
border: none;
padding: 6px 2px;
font-size: 16px;
color: #fff;
cursor: pointer;
transition: color 0.3s ease;
position: relative;
letter-spacing: -0.4px;
opacity: 0.6;
}
.tab-button.active {
color: #fff;
opacity: 1;
}
.tab-button.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: var(--gradient);
}
.tab-content {
width: 100%;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
#funding .tab-pane.active {
grid-template-columns: 1fr;
min-height: 328px;
}
.use-case-before,
.use-case-after {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 16px 24px 24px;
border: 1px solid rgba(229, 242, 255, 0.14);
backdrop-filter: blur(10px);
text-align: center;
}
#use-cases .use-case-before p,
#use-cases .use-case-after p {
font-size: 16px;
color: #FFFFFF;
text-align: center;
margin-bottom: 20px;
font-weight: 600;
}
.use-case-before img,
.use-case-after img {
width: 100%;
height: auto;
border-radius: 8px;
}
/* Pricing Section */
#pricing {
padding: 80px 20px;
}
#pricing h2 {
text-transform: uppercase;
font-size: 36px;
letter-spacing: -1.2px;
margin-bottom: 32px;
}
.pricing-grid {
display: grid;
grid-template-columns: 340px 1fr;
gap: 64px;
padding-left: 2px;
}
.main-plan {
background: #002d38;
border-radius: 16px;
padding: 24px;
position: relative;
border: none;
}
.main-plan::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient);
border-radius: 18px;
z-index: -1;
}
.main-plan .plan h3, .others-plan h3 {
text-transform: uppercase;
background: var(--gradient);
color: #0A1A2F;
border-radius: 20px;
padding: 2px 10px;
font-size: 14px;
font-weight: 700;
display: block;
margin-bottom: 16px;
text-align: right;
width: fit-content;
}
.others-plan h3 {
margin-bottom: 24px;
}
.main-plan .plan .price {
font-size: 48px;
color: #FFFFFF;
font-weight: 700;
letter-spacing: 1px;
line-height: 120%;
margin-bottom: 0;
padding-bottom: 6px;
}
.main-plan .plan .price::after {
content: '/ lifetime';
font-size: 18px;
color: #B0B0B0;
font-weight: 400;
margin-left: 8px;
}
#pricing .button{
width: 100%;
text-transform: uppercase;
margin-top: 0;
}
.main-plan .plan p {
color: #E6483D;
font-size: 16px;
margin-bottom: 24px;
line-height: 1.5;
}
.main-plan .plan p.main-price-desc {
font-size: 18px;
font-weight: 800;
border-top: 1px solid rgba(229, 242, 255, 0.14);
padding-top: 16px;
margin-bottom: 8px;
}
.alt-button {
color: #fff;
background: #123c49;
display: block;
text-align: center;
text-decoration: none;
padding: 18px 22px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
margin-top: 8px;
text-transform: uppercase;
}
#careers .alt-button, #faq .alt-button {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin-top: 36px;
background:#272d41;
}
#careers .alt-button:hover, #faq .alt-button:hover {
background: #242c44;
}
.alt-button:hover{
background: #124150;
}
.alt-button:hover span{
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.others-plan {
padding: 24px 40px 40px;
background: rgba(18, 26, 45, 1);
border-radius: 24px;
border: 1px solid rgba(229, 242, 255, 0.14);
}
.others-plan-block {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
.others-plan .plan {
background: #1c2035;
border-radius: 16px;
padding: 24px;
border: 1px solid rgba(229, 242, 255, 0.14);
position: relative;
align-self: baseline;
}
.others-plan .plan[aria-label="Basic"] {
background: #002d38;
background: linear-gradient(270deg, rgba(2, 250, 164, 0.1) 0%, rgba(26, 193, 246, 0.1) 100%);
}
.others-plan .plan .plan-label {
position: relative;
z-index: 1;
background: #1c2035;
border-radius: 16px;
padding: 4px 10px;
}
.others-plan .plan[aria-label="Basic"] .plan-label {
background: #002d38;
}
.others-plan .plan .plan-label span {
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 14px;
font-weight: 500;
}
.others-plan .plan .plan-label:after {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: var(--gradient);
border-radius: 16px;
z-index: -2;
}
.others-plan .plan .price {
font-size: 36px;
color: #FFFFFF;
margin: 14px 0 10px;
font-weight: 700;
padding-bottom: 10px;
border-bottom: 1px solid rgba(229, 242, 255, 0.14);
}
.others-plan .plan .price::after {
content: '/ month';
font-size: 16px;
color: #B0B0B0;
font-weight: 400;
margin-left: 8px;
}
.others-plan .plan p {
color: #B0B0B0;
font-size: 14px;
margin-top: 8px;
line-height: 1.5;
}
.others-plan .plan ul {
list-style: none;
padding-bottom: 6px;
border-bottom: 1px solid rgba(229, 242, 255, 0.14);
}
.others-plan .plan ul li {
color: #fff;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
line-height: 150%;
}
.others-plan .plan ul li svg {
width: 36px;
height: 16px;
}
.others-plan .plan ul li svg path[fill="white"] {
fill: #FFFFFF;
fill-opacity: 0.16;
}
.others-plan .plan ul li svg path[fill="url(#paint0_linear_331_5169)"],
.others-plan .plan ul li svg path[fill="url(#paint1_linear_331_5707)"],
.others-plan .plan ul li svg path[fill="url(#paint2_linear_331_6087)"] {
fill: inherit;
}
/* Careers Section */
#careers {
padding: 50px 20px;
text-align: center;
}
.job {
padding: 0px;
text-align: left;
}
.job h3 {
font-size: 14px;
margin-bottom: 4px;
color: rgba(229, 242, 255, 0.6);
font-weight: 400;
}
.job p::before {
content: '';
position: absolute;
left: 16px;
width: 4px;
height: 16px;
background: var(--gradient);
border-radius: 2px;
}
#careers .job p {
color: #B0B0B0;
padding-left: 5px;
display: inline-block;
position: relative;
/* border: 1px solid; */
font-size: 16px;
box-shadow: 0px -1px 2px 0px #ffffff80;
padding: 12px 16px 12px 28px;
border-radius: 8px;
margin-right: 4px;
margin-bottom: 8px;
line-height: 100%;
background: rgba(255, 255, 255, 0.04);
}
/* FAQ Section */
/* FAQ Section */
#faq {
padding: 50px 20px;
text-align: center;
background: rgba(18, 26, 45, 1);
}
section#faq h2 {
margin-top: 8px;
}
details {
background: rgba(255, 255, 255, 0.04);
box-shadow: 0px -1px 2px 0px #ffffff4f;
padding: 14px 24px;
margin: 8px auto;
border-radius: 16px;
max-width: 800px;
text-align: left;
letter-spacing: -0.3px;
}
summary.faq-summary {
font-size: 1.1rem;
cursor: pointer;
color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
transition: color 0.3s ease;
}
summary.faq-summary:hover {
color: #FFFFFF;
}
details:not([open]) summary.faq-summary:hover {
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: -3px;
}
summary.faq-summary:hover .chevron path {
stroke: url(#faqGradient);
}
details[open] summary.faq-summary .chevron {
transform: rotate(180deg);
}
details[open] summary.faq-summary .chevron path {
stroke: url(#faqGradient);
}
.chevron {
transition: transform 0.3s ease;
}
.chevron path {
transition: stroke 0.3s ease;
}
#faq details p {
color: rgba(229, 242, 255, 0.6);
padding-top: 16px;
margin: 0;
font-size: 16px;
}
/* Footer */
footer {
background: rgba(18, 26, 45, 1);
}
footer .container {
padding: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
footer .bottom-block{
background: rgba(15, 23, 42, 1);
}
footer .bottom-block .container {
padding: 24px 0;
}
.footer-logo img {
width: 120px;
}
footer .social-links a,
footer .footer-links a, .copyright {
font-size: 14px;
color: #B0B0B0;
text-decoration: none;
max-height: 20px;
}
footer .footer-links, footer .social-links{
display: flex;
gap: 24px;
align-items: center;
justify-content: end;
}
footer .social-links a:hover,
footer .footer-links a:hover {
color: #00CC99;
}
#faq .alt-button {
margin-top: 8px;
min-width: 200px;
}
#job-application-form label {
display: block;
margin: 18px 0 5px;
font-size: 12px;
font-weight: 500;
color: #fff;
text-align: left;
}
#job-application-form select,
#job-application-form input[type="text"],
#job-application-form input[type="email"],
#job-application-form input[type="file"] {
width: 100%;
padding: 12px 16px;
margin-bottom: 2px;
border: 1px solid rgba(229, 242, 255, 0.18);
border-radius: 12px;
background: none !important;
font-size: 14px;
color: #fff;
}
#job-application-form select option {
color: black;
}
#job-application-form select:focus,
#job-application-form input[type="text"]:focus,
#job-application-form input[type="email"]:focus,
#job-application-form input[type="file"]:focus {
border-color: #00c6ff;
background-color: #fff;
outline: none;
}
#job-application-form input[type="checkbox"] {
transform: scale(1.2);
margin-right: 6px;
accent-color: var(--gradient);
}
#job-application-form input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid rgba(229, 242, 255, 0.18);
position: relative;
cursor: pointer;
vertical-align: middle;
}
#job-application-form input[type="checkbox"]:checked{
background: var(--gradient);
}
/* Checkmark */
#job-application-form input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 4px;
height: 6px;
border: rgba(15, 23, 42, 1);
border-width: 0 1px 1px 0;
border-style: solid;
transform: rotate(45deg);
z-index: 22222;
color: #000;
}
#job-application-form button {
width: 100%;
}
.button.main:disabled, .button.main[disabled] {
background: rgba(229, 242, 255, 0.14);
color: rgba(229, 242, 255, 0.32);
cursor: not-allowed;
}
#form-message {
margin-top: 10px;
font-size: 13px;
color: #e53e3e;
}
#role-description {
margin: 10px 0;
font-size: 12px;
color: #a0aec0;
}
.thanksMessage {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
gap: 8px;
}
.thanksMessage h2{
font-size: 24px;
-webkit-text-fill-color: #fff;
text-align: center;
}
#careers #form-message p {
font-size: 14px;
text-align: center;
margin-bottom: 0;
}
.custom-file-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
}
.custom-file-label {
display: inline-block;
position: relative;
cursor: pointer;
padding: 8px 14px;
border: 1px solid rgba(229, 242, 255, 0.18);
color: white;
border-radius: 6px;
font-weight: 500;
overflow: hidden;
text-align: center;
width: fit-content;
font-size: 12px;
}
.custom-file-label input[type="file"] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
height: 100%;
width: 100%;
cursor: pointer;
}
.file-info {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
padding: 8px 14px;
border: 1px solid rgba(229, 242, 255, 0.18);
color: white;
border-radius: 6px;
width: fit-content;
max-width: 100%;
font-size: 12px;
margin-top: 18px;
}
.file-info button {
background: none;
border: none;
color: rgba(229, 242, 255, 0.6);
font-size: 18px;
cursor: pointer;
padding: 0;
}
#role-description p{
margin-bottom:0;
font-size: 14px;
}
#role-description ul {
text-align: left;
color: #fff;
font-size: 14px;
padding: 0 0 20px 20px;
}
input:-internal-autofill-selected {
appearance: menulist-button;
background-image: none !important;
background: none !important;
color: fieldtext !important;
}
input:-webkit-autofill {
box-shadow: 0 0 0px 1000px white inset !important;
-webkit-text-fill-color: #000 !important;
transition: background-color 9999s ease-in-out 0s;
}
#job-application-form label.input-job {
FONT-SIZE: 14PX;
margin-bottom: 20px;
}
#job-application-form select.invalid,
#job-application-form input[type="text"].invalid,
#job-application-form input[type="email"].invalid {
border-color: #E6483D;
}
#job-application-form .error-message {
color: #E6483D;
font-size: 12px;
margin-top: 5px;
display: flex;
align-items: center;
gap: 5px;
}
#job-application-form .error-message svg {
vertical-align: middle;
}
@media (max-width: 1281px) {
#hero h1 {
font-size: 40px;
}
#use-cases .container{
gap:40px;
}
}
/* Responsive Design */
@media (max-width: 1200px) {
#hero .container , #use-cases .container, #funding .container, #careers .container, #faq .container{
grid-template-columns: 1fr 1fr;
}
#use-cases .container{
grid-template-columns: 1fr 840px;
}
.pricing-grid {
grid-template-columns: 1fr;
}
.tab-buttons {
display: inline-block;
margin: -6px -4px 12px -4px;
}
.tab-button {
margin: 6px 4px;
}
#funding .tab-content {
border-radius: 16px;
}
.tab-pane.active {
grid-template-columns: 1fr;
}
#use-cases .tab-pane.active {
grid-template-columns: 1fr 1fr;
}
#funding .left-block{
background-image: none;
}
}
@media (max-width: 1024px) {
.use-cases-vs, .use-cases-conf, .use-cases-no-conf{
position: initial;
top: 0;
margin-top: 0;
}
.use-cases-vs{
justify-self: center;
}
.uc-time {
font-weight: 400;
font-size: 14px;
}
/*video#bg-video {
min-height:770px;
}*/
img {
max-width: 100%;
}
.descktop-hide{
display: block;
margin: auto;
}
.mobile-hide{
display: none;
}
#hero .left-block {
background-image: none;
}
#hero .container, #use-cases .container, #funding .container, #careers .container, #faq .container{
grid-template-columns: 1fr;
gap: 40px;
}
header .header-top-line{
font-size: 12px;
padding: 5px 24px;
}
header .logo img {
height: 35px;
}
#hero {
text-align: center;
padding: 0 0;
}
#hero h1 {
font-size: 36px;
padding-top: 10px;
margin-bottom: 20px;
}
.button {
margin-top: 4px;
width: 100%;
}
.button.main {
width: 100%;
}
#careers .alt-button, #faq .alt-button{
width: 100%;
}
#careers .right-block {
padding: 24px;
}
#features {
padding: 36px 0 24px;
text-align: center;
}
.feature {
display: grid;
grid-template-columns: 1fr;
padding: 16px;
border-radius: 16px;
}
.feature .title-content{
display: grid;
grid-template-columns: 72px 1fr;
align-items: center;
gap: 24px;
}
.features-grid {
grid-template-columns: 1fr;
gap: 8px;
padding: 8px;
border: 1px solid rgba(229, 242, 255, 0.14);
border-radius: 24px;
}
#features .feature p {
color: #B0B0B0;
font-size: 14px;
line-height: 140%;
padding-top: 12px;
margin-bottom: 0;
}
#use-cases, #funding, #careers {
padding: 20px 0px;
}
#careers {
padding: 40px 0px 20px;
}
#use-cases p, #faq p, #careers p, #funding p {
margin-bottom: 8px;
}
h1, h2, #pricing h2 {
font-size: 30px;
}
#features p {
line-height: 144%;
}
.tab-button {
white-space: nowrap;
font-size: 14px;
}
.use-cases-main-block {
gap: 16px;
grid-template-columns: 1fr;
}
.use-case-before, .use-case-after {
border-radius: 16px;
}
#pricing {
padding: 24px 0px;
}
#hero p {
font-size: 18px;
}
#use-cases .container {
grid-template-columns: 1fr;
gap: 16px;
}
#pricing .pricing-grid {
grid-template-columns: 1fr;
gap: 24px;
}
#use-cases .left-block {
position: static;
}
#use-cases .right-block {
padding: 20px;
}
#funding .right-block {
padding: 16px;
}
.others-plan {
display: grid;
grid-template-columns: 1fr;
gap: 0px;
padding: 24px;
}
.others-plan .plan .price {
margin: 10px 0 6px;
}
.others-plan .plan {
padding: 24px 24px 16px 24px;
}
.main-plan .plan {
padding: 0;
}
.main-plan .plan .price {
font-size: 36px;
}
.others-plan-block {
grid-template-columns: 1fr;
}
.others-plan h3 {
position: static;
transform: none;
margin-bottom: 16px;
}
.features-grid,
.use-cases-grid,
.job-listings {
grid-template-columns: 1fr;
}
#faq {
padding: 24px 0;
}
#faq .container {
gap: 24px;
}
footer .container {
padding: 20px 0;
}
.footer-logo img {
height: 35px;
}
footer .bottom-block .container {
flex-direction: column-reverse;
gap: 6px;
padding: 15px 0;
align-items: baseline;
}
.left-block {
position: relative;
top: 0;
}
#job-application-form label.input-job {
display: grid;
grid-template-columns: 20px 1fr;
gap: 8px;
}
#job-application-form input[type="checkbox"] {
margin-top: 4px;
}
#job-application-form label {
font-size: 14px;
}
}
@media (max-width: 600px) {
#use-cases .tab-pane.active {
grid-template-columns: 1fr;
}
}
#pre-seed-content .container {
display: grid;
grid-template-columns: auto 588px;
gap: 64px;
align-items: start;
}
.left-pre-seed {
position: sticky;
top: 36px;
}
.left-pre-seed p{
color: #B0B0B0;
margin-bottom: 28px;
text-align: left;
letter-spacing: 0.4px;
font-size: 18px;
line-height: 150%;
}
/* Hero Section */
.hero-section {
text-align: center;
padding: 60px 20px;
}
#pre-seed-content .hero-section .container {
grid-template-columns: 1fr;
gap: 24px;
}
.hero-section h1 {
font-size: 36px;
margin-bottom: 20px;
text-align: center;
margin: auto;
letter-spacing: -0.5px;
}
.hero-section p {
font-size: 18px;
color: rgba(229, 242, 255, 0.6);
}
.hero-section .button {
width: fit-content;
margin: auto;
margin-top: 10px;
box-shadow: 0 0 160px #00f5bdc7;
}
.hero-section .btn:hover {
background-color: #00b8e6;
}
/* Problem Section */
.problem-section {
padding: 80px 20px;
background: rgba(23, 30, 49, 1);
}
.problem-section h2 {
font-size: 36px;
margin-bottom: 20px;
}
.problem-section p {
font-size: 16px;
margin-bottom: 40px;
}
.problem-list {
background: rgba(255, 255, 255, 0.02);
border-radius: 24px;
padding: 40px;
border: 1px solid rgba(229, 242, 255, 0.14);
}
.market-opportunity-section .problem-list ul, ul.problem-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 8px;
}
.problem-list li {
background-color: #2b3d5b;
padding: 16px;
border-radius: 16px;
display: grid;
grid-template-columns: 40px 1fr;
box-shadow: 0px -1px 2px 0px #ffffff63;
align-items: center;
background: rgba(255, 255, 255, 0.04);
letter-spacing: 0.3px;
}
.problem-list li span:before {
content: '';
width: 32px;
height: 32px;
display: block;
background-image: url('/wp-content/themes/configen/img/Error.svg');
}
.li-content {
border-left: 1px solid rgba(217, 217, 217, 0.2);
padding-left: 12px;
}
.problem-list h3 {
font-size: 18px;
}
.problem-list p {
font-size: 14px;
line-height:130%;
margin: 0;
color: rgba(229, 242, 255, 0.6);
}
/* Solution Section */
.solution-section {
padding: 80px 20px;
background-color: #0A1A2F;
background-image: url('/wp-content/themes/configen/img/bg.png');
background-size: contain;
}
.solution-section .problem-list li span:before {
background-image: url(/wp-content/themes/configen/img/Check.svg);
}
.solution-section h2 {
font-size: 36px;
margin-bottom: 20px;
}
.solution-section p {
font-size: 16px;
}
/* Market Opportunity Section */
.market-opportunity-section {
padding: 80px 20px;
background: rgba(23, 30, 49, 1);
}
.market-opportunity-section h2 {
font-size: 36px;
margin-bottom: 20px;
}
.problem-list>h3{
text-align: center;
margin-bottom: 10px;
}
.market-opportunity-section p {
font-size: 16px;
}
.market-opportunity-section .problem-list li span:before {
content: '';
width: 5px;
height: 50px;
display: block;
background: rgba(116, 145, 172, 1);
border-radius: 3px;
}
.market-opportunity-section .problem-list li {
grid-template-columns: 10px 1fr;
background: linear-gradient(270deg, rgba(2, 250, 164, 0) 0%, #1ac1f626 100%);
}
.market-opportunity-section .li-content {
border-left: none;
padding-left: 12px;
}
/* Why Invest Now Section */
.why-invest-section {
padding: 80px 20px;
background-color: #0A1A2F;
background-image: url('/wp-content/themes/configen/img/bg.png');
}
.why-invest-section h2 {
font-size: 36px;
margin-bottom: 20px;
}
.why-invest-section p {
font-size: 16px;
}
.why-invest-section .problem-list li span:before {
content: '';
width: 5px;
height: 50px;
display: block;
background: rgba(113, 182, 177, 1);
border-radius: 3px;
}
.why-invest-section .problem-list li {
grid-template-columns: 10px 1fr;
background: linear-gradient(270deg, rgba(2, 250, 164, 0) 0%, #1ac1f626 100%);
}
.why-invest-section .li-content {
border-left: none;
padding-left: 12px;
}
/* Investment Opportunity Section */
.investment-opportunity-section {
padding: 80px 20px;
background: rgba(23, 30, 49, 1);
}
.right-pre-seed{
background: rgba(255, 255, 255, 0.02);
border-radius: 24px;
border: 1px solid rgba(229, 242, 255, 0.14);
padding: 40px;
}
.investment-opportunity-section h2 {
font-size: 36px;
margin-bottom: 20px;
}
.investment-opportunity-section p {
font-size: 14px;
}
.investment-opportunity-section .left-pre-seed p {
font-size: 16px;
margin-bottom: 13px;
line-height: 160%;
letter-spacing: 1.2px;
}
.problem-list .funding-allocation li span:before{
display: none;
}
.funding-allocation h3 {
font-size: 18px;
margin-bottom: 10px;
color: #ffffff;
text-align: center;
}
.allocation-bar-parent {
padding: 8px;
box-shadow: 0px -1px 2px 0px #ffffff0a;
background: #ffffff04;
border-radius: 24px;
margin-bottom: 16px;
}
.allocation-bar {
display: flex;
width: 100%;
height: 40px;
border-radius: 20px;
overflow: hidden;
}
.allocation-segment {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
}
.allocation-segment:not(:last-child)
{
margin-right: 2px;
}
.allocation-percentage {
color: #000;
font-size: 16px;
font-weight: bold;
position: absolute;
text-align: center;
width: 100%;
}
.allocation-labels {
list-style: none;
padding: 0;
}
.problem-list li.allocation-label {
grid-template-columns: 20px 1fr;
}
.allocation-label {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.label-color {
width: 5px;
height: 100%;
margin-right: 10px;
border-radius: 4px;
}
.label-text {
font-size: 16px;
color: #ffffff;
font-weight: 800;
margin-bottom: 4px;
display: block;
}
/* Milestones Section */
/* Projected Milestones Section */
.milestones-section {
padding: 80px 20px;
background-color: #0A1A2F;
}
.milestones-section h2 {
font-size: 36px;
margin-bottom: 20px;
color: #ffffff;
}
.milestones-section p {
font-size: 16px;
margin-bottom: 40px;
color: #a0a0a0;
}
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 0px 0;
}
.timeline-line {
position: absolute;
top: 0;
bottom: 0;
left: 0%;
width: 2px;
background: linear-gradient(270deg, #02FAA4 0%, #1AC1F6 100%);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
align-items: center;
margin-bottom: 24px;
}
.timeline-item:last-child{
margin-bottom: 0;
}
.timeline-date {
width: 100%;
text-align: left;
padding-left: 16px;
}
.milestone-date {
font-size: 14px;
padding: 10px 34px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0px -1px 2px 0px #ffffff6b;
color: #fff;
border-radius: 20px;
}
.timeline-dot {
position: absolute;
top: 8px;
left: 0%;
width: 8px;
height: 8px;
background: linear-gradient(270deg, #02FAA4 0%, #1AC1F6 100%);
border-radius: 50%;
transform: translateX(-50%);
z-index: 1;
}
.timeline-content {
width: 100%;
padding-left: 20px;
color: #ffffff;
}
.timeline-content strong {
font-size: 18px;
font-weight: bold;
color: #00d4ff; /* Cyan title */
display: block;
margin-bottom: 10px;
}
.timeline-content h3{
font-size: 16px;
margin-top: 16px;
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.timeline-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.timeline-content ul li {
font-size: 14px;
color: #a0a0a0;
margin-bottom: 5px;
position: relative;
padding-left: 15px;
}
.timeline-content ul li:before {
content: "•";
position: absolute;
left: 0;
color: #a0a0a0;
}
/* Team Section */
.team-section {
padding: 80px 20px;
background: rgba(23, 30, 49, 1);
}
.team-section a.alt-button {
width: fit-content;
display: flex;
}
.team-section h2 {
font-size: 36px;
margin-bottom: 20px;
}
.team-section p , .team-section ul{
font-size: 18px;
color: rgba(229, 242, 255, 0.6);
letter-spacing: 0.35px;
line-height: 145%;
}
.team-section ul {
padding: 0 20px 10px 28px;
}
.team-members {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.team-members h3{
margin-top: 8px;
font-size: 18px;
}
.team-role-wrap {
display: flex;
gap: 20px;
justify-content: space-between;
}
/* Contact Section */
.contact-section {
padding: 80px 20px;
background:linear-gradient(270deg, #02FAA4 0%, #1AC1F6 100%);
}
#pre-seed-content .contact-section .container{
text-align: center;
align-items: center;
}
.contact-section h2 {
font-size: 36px;
margin-bottom: 20px;
background: #000;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.3px;
}
.contact-section p , .contact-section a {
font-size: 24px;
color: rgba(15, 23, 42, 1);
text-align: left;
font-weight: 700;
letter-spacing: -0.3px;
}
.thanks-section .container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
min-height: calc(100vh - 304px);
}
.thanks-top {
text-align: center;
}
.thanks-top h2 {
font-size: 24px;
margin-bottom: 0px;
background: #fff;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.thanks-top p{
color: rgba(229, 242, 255, 0.6);
font-size: 14px;
}
.thanks-section img{
margin: -100px 0;
clip-path: inset(100px 0 100px 0);
object-fit: cover;
max-width: 100%;
}
#main-content{
padding: 40px 0;
}
#main-content h2{
text-align: center;
margin: 0 auto 24px;
}
}
.article{
color:rgba(229, 242, 255, 0.6);
}
.article p {
padding-bottom: 24px;
}
@media (max-width: 1024px) {
.hero-section h1 {
font-size: 28px;
line-height: 130%;
text-align: left;
}
.hero-section {
text-align: left;
padding: 32px 0;
}
#pre-seed-content .hero-section .container {
grid-template-columns: 1fr;
gap: 12px;
}
.hero-section p {
text-align: left;
}
.hero-section .button {
width: 100%;
}
#pre-seed-content .container {
grid-template-columns: 1fr;
gap: 16px;
}
.problem-list h3 {
font-size: 18px;
letter-spacing: -0.1px;
}
.problem-section p {
font-size: 16px;
margin-bottom: 32px;
}
.problem-section .problem-list p , .solution-section .problem-list p, .market-opportunity-section .problem-list p, .why-invest-section .problem-list p {
font-size: 14px;
margin-bottom: 0;
letter-spacing: -0.1px;
}
.solution-section, .problem-section, .market-opportunity-section, .why-invest-section,.investment-opportunity-section, .milestones-section,.team-section, .contact-section {
padding: 32px 0;
}
.solution-section h2,.problem-section h2, .market-opportunity-section h2, .why-invest-section h2,.investment-opportunity-section h2,.milestones-section h2, .team-section h2,.contact-section h2 {
margin-bottom: 10px;
}
.contact-section h2 {
font-size: 30px;
}
#pre-seed-content .contact-section .container {
gap: 0;
}
.left-pre-seed {
position: relative;
top: 0;
}
.milestone-date {
display: inline-block;
width: 136px;
font-size: 14px;
padding: 10px 0px;
text-align: center;
}
.milestones-section .right-pre-seed {
padding: 40px 24px;
}
.timeline-dot {
position: absolute;
top: 16px;
}
.timeline-content ul li {
margin-left: 8px;
margin-bottom: 0;
letter-spacing: -0.1px;
line-height: 20px;
}
.problem-list {
background: rgba(255, 255, 255, 0.02);
border-radius: 24px;
padding: 8px;
}
.left-pre-seed p {
margin-bottom: 16px;
}
.allocation-label {
margin-bottom: 8px;
}
.allocation-bar {
height: 34px;
}
.market-opportunity-section .problem-list li span, .market-opportunity-section .problem-list li span:before,
.why-invest-section .problem-list li span, .why-invest-section .problem-list li span:before{
display: block;
height: 100%
}
.team-section h2{
position:absolute;
top:0px;
}
.left-pre-seed {
position: initial;
}
.team-section .right-pre-seed {
padding: 24px;
}
#pre-seed-content .team-section .container {
display: flex ;
flex-direction: column-reverse;
position: relative;
padding-top: 50px;
gap: 30px;
}
.team-section a.alt-button {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
}
.team-section .team-members a.alt-button {
margin-top: 0px;
width: fit-content;
}
.contact-section p, .contact-section a {
font-size: 18px;
color: rgba(15, 23, 42, 1);
text-align: left;
font-weight: 700;
letter-spacing: -0.1px;
line-height: 25px;
}
#pre-seed-content footer .container {
grid-template-columns: 1fr 1fr;
align-items: center;
}
#pre-seed-content footer .bottom-block .container {
grid-template-columns: 1fr;
display: flex;
align-items: start;
}
}
#role-description li{
list-style-image: url('data:image/svg+xml,<svg transform="scale(0.8) translate(0, 5)" transform-origin="center" width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.68107 14.3434C5.86516 14.5275 6.16365 14.5275 6.34773 14.3434L14.014 6.67637C14.3821 6.30818 14.979 6.30806 15.3473 6.6761C15.7158 7.0443 15.7159 7.64153 15.3475 8.00987L6.34773 17.0097C6.16364 17.1937 5.86517 17.1937 5.68108 17.0097L0.681076 12.0096C0.312951 11.6415 0.312951 11.0447 0.681075 10.6765C1.0492 10.3084 1.64605 10.3084 2.01417 10.6765L5.68107 14.3434Z" fill="url(%23paint0_linear_717_9138)"/><defs><linearGradient id="paint0_linear_717_9138" x1="16.0145" y1="11.6764" x2="0.0145264" y2="11.6764" gradientUnits="userSpaceOnUse"><stop stop-color="%2302FAA4"/><stop offset="1" stop-color="%231AC1F6"/></linearGradient></defs></svg>');/* Use translate(X, Y) to position the SVG up, down, left, and right */
}
#role-description li::marker{
font-size: 16px;
line-height: 16px;
}