.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}@font-face {
font-family: 'Inclusive Sans';
src: url(https://konexsoftware.com/wp-content/themes/konexsoftware/assets/fonts/InclusiveSans-VariableFont_wght.ttf) format('truetype');
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inclusive Sans';
src: url(https://konexsoftware.com/wp-content/themes/konexsoftware/assets/fonts/InclusiveSans-Italic-VariableFont_wght.ttf) format('truetype');
font-weight: 300 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mohave';
src: url(https://konexsoftware.com/wp-content/themes/konexsoftware/assets/fonts/Mohave-VariableFont_wght.ttf) format('truetype');
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mohave';
src: url(https://konexsoftware.com/wp-content/themes/konexsoftware/assets/fonts/Mohave-Italic-VariableFont_wght.ttf) format('truetype');
font-weight: 300 700;
font-style: italic;
font-display: swap;
}
:root { --blue-100: #03323A;
--blue-300: #0B5865;
--blue-500: #00778C;
--blue-700: #00D1E2;
--blue-900: #72dde6;
--blue-highlight: #30b4cb85; --blue-green-100: #004B46;
--blue-green-300: #007D6F;
--blue-green-500: #02AFA1;
--blue-green-700: #42D0B6;
--blue-green-900: #8DEED1; --green-100: #005B21;
--green-300: #0C903D;
--green-500: #2CC564;
--green-700: #5EF997;
--green-900: #A5FFC6; --gold-100: #968F0F;
--gold-300: #ACA523;
--gold-500: #C3BD41;
--gold-700: #F0E84C;
--gold-900: #FAF592; --orange: #CE520F; --red: #CE260F; --black: #111111; --gray-200: #222222;
--gray-300: #333333;
--gray-500: #545454;
--gray-700: #676767;
--gray-900: #CCCCCC; --white: #FFFFFF; --gradient-radial-blue-green: radial-gradient(circle, #00778C 0%, #2CC564 100%);
--gradient-linear-blue-green: linear-gradient(135deg, #00778C 0%, #2CC564 100%);
--stripes: repeating-linear-gradient(
135deg,
#111111c1,
#111111c1 3px,
#ffffff00 3px,
#ffffff00 9px
); --font-family: 'Inclusive Sans', sans-serif;
--font-family-headings: 'Mohave', sans-serif; --padding: 1.5rem;
}  .gradient-radial-blue-green {
background: var(--gradient-radial-blue-green);
}
.gradient-linear-blue-green {
background: var(--gradient-linear-blue-green);
} .bg-blue-100 { background-color: var(--blue-100); }
.bg-blue-300 { background-color: var(--blue-300); }
.bg-blue-500 { background-color: var(--blue-500); }
.bg-blue-700 { background-color: var(--blue-700); }
.bg-blue-900 { background-color: var(--blue-900); }
.bg-blue-green-100 { background-color: var(--blue-green-100); }
.bg-blue-green-300 { background-color: var(--blue-green-300); }
.bg-blue-green-500 { background-color: var(--blue-green-500); }
.bg-blue-green-700 { background-color: var(--blue-green-700); }
.bg-blue-green-900 { background-color: var(--blue-green-900); }
.bg-green-100 { background-color: var(--green-100); }
.bg-green-300 { background-color: var(--green-300); }
.bg-green-500 { background-color: var(--green-500); }
.bg-green-700 { background-color: var(--green-700); }
.bg-green-900 { background-color: var(--green-900); }
.bg-gold-100 { background-color: var(--gold-100); }
.bg-gold-500 { background-color: var(--gold-500); }
.bg-gold-900 { background-color: var(--gold-900); }
.bg-orange { background-color: var(--orange); }
.bg-black { background-color: var(--black); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-900 { background-color: var(--gray-900); }
.bg-white { background-color: var(--white); }
.bg-stripes { background: var(--stripes); } .arrow-container--left,
.arrow-container--right {
position: relative;
display: inline-flex;
}
main .arrow-container--left,
main .arrow-container--right {
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.arrow-container--left {
margin-left: 10%;
padding-left: 1em;
}
.arrow-container--right {
margin-right: 10%;
padding-right: 1em;
} .arrow-container--left::before,
.arrow-container--right::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
height: 100%;
aspect-ratio: 19/64;
background-image: url('data:image/svg+xml,<svg width="19" height="64" viewBox="0 0 19 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.7677 64L-3.34025e-05 31L18.7677 0L18.7677 64Z" fill="%23111111"/></svg>');
background-size: contain
}
.bg-gray-200.arrow-container--left::before,
.bg-gray-200.arrow-container--right::after {
background-image: url('data:image/svg+xml,<svg width="19" height="64" viewBox="0 0 19 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.7677 64L-3.34025e-05 31L18.7677 0L18.7677 64Z" fill="%23222222"/></svg>');
}
.bg-gray-300.arrow-container--left::before,
.bg-gray-300.arrow-container--right::after {
background-image: url('data:image/svg+xml,<svg width="19" height="64" viewBox="0 0 19 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.7677 64L-3.34025e-05 31L18.7677 0L18.7677 64Z" fill="%23333333"/></svg>');
}
.arrow-container--left::before {
right: 99.5%;
}
.arrow-container--right::after {
transform: scaleX(-1); left: 99.3%;
} .arrow-container--left::after,
.arrow-container--right::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
width: 100vw;
height: 100%;
background: inherit;
}
.arrow-container--left::after {
left: 100%;
}
.arrow-container--right::before {
right: 100%;
}  .text-blue-100 { color: var(--blue-100); }
.text-blue-300 { color: var(--blue-300); }
.text-blue-500 { color: var(--blue-500); }
.text-blue-700 { color: var(--blue-700); }
.text-blue-900 { color: var(--blue-900); }
.text-green-100 { color: var(--green-100); }
.text-green-300 { color: var(--green-300); }
.text-green-500 { color: var(--green-500); }
.text-green-700 { color: var(--green-700); }
.text-green-900 { color: var(--green-900); }
.text-gold-100 { color: var(--gold-100); }
.text-gold-500 { color: var(--gold-500); }
.text-gold-900 { color: var(--gold-900); }
.text-orange { color: var(--orange); }
.text-black { color: var(--black); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-900 { color: var(--gray-900); }
.text-white { color: var(--white); }
main {
font-family: var(--font-family);
line-height: 1.5;
}
main > .post > section {
margin-bottom: calc( var(--padding) * 4);
} h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6  {
font-family: var(--font-family-headings);
}
.bg-black,
.bg-gray-200,
.bg-gray-300,
.bg-blue-300,
bg.blue-green-300,
bg.green-300 {
color: var(--white);
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p,
a {
color: var(--white);
}
}
h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {
margin: 1em 0 .25em;
}
.arrow-container--left h2, 
.arrow-container--left .h2,
.arrow-container--right h2, 
.arrow-container--right .h2 {
margin: .25em 0;
}
h1, 
.h1 {
font-size: clamp( 3rem, 5vw, 4rem);
}
h2,
.h2 {
font-size: 3rem;
font-weight: 500;
}
h2::before,
.h2::before {
content: '#';
display: inline-block;
margin-right: .25em;
background: var(--gradient-linear-blue-green);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.gradient-linear-blue-green h2::before,
.gradient-linear-blue-green .h2::before {
background: var(--black);
background-clip: text;
-webkit-text-fill-color: transparent;
}
h3,
.h3 {
font-size: 1.75rem;
font-weight: 500;
}
h3::before,
.h3::before {
content: '//';
display: inline-block;
margin-right: .25em; color: var(--blue-green-500);
font-weight: 700;
letter-spacing: -3px;
}
h4,
.h4 {
font-size: 1.25rem;
font-weight: 500;
}
h4::before,
.h4::before {
content: '--';
display: inline-block;
margin-right: .25em;
color: var(--blue-green-500);
}
a {
transition: all 0.25s ease-in-out;
}
.post a:not(.wp-element-button):hover,
.post a:not(.wp-element-button):focus-within {
color: var(--gold-500);
text-decoration: underline;
} * {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
.container,
.post > .is-layout-constrained {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 0 var(--padding);
}
img {
max-width: 100%;
height: auto;
}
.sr-only {
clip: rect(1px, 1px, 1px, 1px); 
clip-path: inset(50%); 
height: 1px;
margin: -1px; 
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
} .wp-element-button,
input[type="submit"] {
position: relative;
}
input[type="submit"] {
cursor: pointer;
background-color: var(--black) !important;
border-width: 0;
color: #fff;
font-family: inherit;
font-size: inherit;
line-height: inherit;
padding: calc(0.667em + 2px) calc(1.333em + 2px);
text-decoration: none;
}
.form-row.button-row p{
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
position: relative;
}
.button-row .wpcf7-spinner {
position: absolute;
left: calc(100% + 1em);
top: 50%;
transform: translateY(-50%);
}
.wp-element-button:hover::before,
.wp-element-button:focus-within::before,
.button-row p:hover::before,
.button-row p:focus-within::before {
transform: translate(-.4em, .4em);
opacity: .75; }
.wp-element-button::before,
.button-row p::before {
content: '';
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px; background: var(--stripes);
z-index: -1;
opacity: .1;
transition: all 0.5s ease-in-out;
}
.button-row p::before {
z-index: 0;
} .form-row {
display: flex;
flex-direction: row;
gap: 1em;
justify-content: stretch;
align-items: flex-start;
}
.form-row div,
.form-row p {
margin: 0;
padding: 0;
flex-grow: 1;
flex-shrink: 1;
}
.form-row.button-row{
margin-bottom: 1em;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="datetime-local"],
.form-row input[type="month"],
.form-row input[type="time"],
.form-row input[type="week"],
.form-row input[type="password"],
.form-row input[type="search"],
.form-row input[type="color"],
.form-row textarea {
flex-grow: 1;
width: 100%;
padding: .5em 1em .25em;
margin: 0 0 .5em;
font-size: 1.25rem;
border: none;
border-bottom: 4px solid transparent;
transition: all 0.3s ease-in-out;
position: relative;
z-index: 1;
&:focus,
&:focus-within {
border-bottom-color: var(--black);
outline: none;
}
}
.wpcf7-not-valid-tip {
font-size: .85rem;
background-color: var(--red);
color: var(--white);
padding: .25em .5em;
}
textarea + .wpcf7-not-valid-tip {
margin-top: -5px;
}
.wpcf7-response-output {
border-color: var(--black)!important;
background-color: var(--white);
padding: 1rem;
font-size: .85rem;
}
form label {
display: block;
font-family: var(--font-family-headings);
font-size: 1.25rem;
font-weight: 500;
margin: .5em 0 .125em;
} #site-header {
position: relative;
}
#site-header .container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
padding-bottom: 1rem;
gap: 1.25rem;
}
#site-header .site-logo {
margin: 0 2rem 0 0;
padding-top: 1rem;
padding-bottom: 1rem;
padding-right: 1rem;
}
.page-title {
min-height: 2.85em;
}
.page-title::before {
content: '#';
display: inline-block;
}
.page-title .wrap {
position: relative;
}
.page-title .wrap::after {
content: " ";
display: inline-block;
width: .4em;
height: 1em;
margin-bottom: -.025em;
margin-left: .05em;
background-color: var(--gray-900);
animation-name: blink-caret;
animation-duration: 1.25s;
animation-iteration-count: infinite;
opacity: .9;
}
@keyframes blink-caret {
0%, 100% { opacity: .9; }
30% { opacity: .2; }
}
#site-header::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 68px;
background: var(--stripes);
opacity: .75;
} #site-navigation {
position: sticky;
top: 0;
padding: 0;
overflow-x: hidden;
z-index:9999;
transition: transform 0.3s ease-in-out;
transform: translateY(0);
}
#site-navigation .container{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
#site-navigation .arrow-container--left {
align-items: center;
}
#nav-logo { opacity: 0;
width: 0;
height: 0;
margin-right: 0;
transition: margin-right 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
#nav-logo img {
height: 2em;
width: auto;
}
#nav-logo.active { opacity: 1;
height: 2em;
width: auto;
margin-right: 3vw;
}
#menu-primary {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 3vw;
padding-left: 0;
list-style: none;
}
#menu-primary a {
color: var(--white);
font-family: var(--font-family-headings);
text-decoration: none;
}
#menu-primary a:hover,
#menu-primary a:focus-within {
color: var(--gold-500);
} #site-footer .footer-top .arrow-container--right {
font-family: var(--font-family-headings);
padding-top: 11px;
padding-bottom: 11px;
gap: 10px;
align-items: center;
}
#site-footer .footer-top .arrow-container--right::after {
left: 99.9%;
}
#site-footer .footer-widgets {
padding-top: clamp( 2rem, 5vw, 10vh);
padding-bottom: 5vh;
}
@media(max-width: 782px){
#contact {
flex-wrap: wrap;
}
}
#site-footer .copy-block {
max-width: 27vw;
padding-right: 7vw;
min-width: 18em;
}
#site-footer .footer-widgets .wp-block-heading:first-child {
margin-top: 0;
}
#site-footer .footer-bottom {
font-size: .75em;
padding: .75em 0;
}
#site-footer .footer-bottom  p{
margin: 0;
color: var(gray-900);
}  #skills-links {
display: none;
}
#skills-links p{
margin: 0;
}
#skills-links a {
text-decoration: none;
display: inline-block;
padding: .25em 0 .25em 1.5em;
font-family: var(--font-family-headings);
font-size: clamp(1rem, 2vw, 1.5rem);
font-weight: 400;
color: var(--white);
}
#skills-links a:hover,
#skills-links a:focus-within {
color: var(--blue-green-700);
}
#skills-links a.active {
color: var(--blue-green-500);
}
#skills-arrow-container {
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
#skills-content > div + div {
padding-top: 10vh;
}
.skills-list {
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: .65em;
}
.skills-list li {
margin: 0;
padding: .25em .5em;
background-color: var(--blue-highlight);
font-size: .855em;
}
#services-grid {
gap: calc( 2vw + 12px );
}
.tile {
background: var(--white);
padding: 1rem;
position: relative; color: var(--white);
border: 8px solid var(--black);
background: var(--black); display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch; }
.tile::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; background: var(--stripes); z-index: -1;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.tile:hover::before,
.tile:focus-within::before {
top: 10px;
left: -18px;
right: 18px;
bottom: -18px;
opacity: .75;
}
#skills-content h3.wp-block-heading {
margin-top:0;
}
.tile .wp-block-heading {
margin: .25em 0 1em;
}
.tile a.wp-element-button {
position: static
}
.tile a.wp-element-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: transparent;
}
.tile .wp-block-buttons {
justify-self: flex-end;
margin-top: auto;
width: 100%;
}
#testimonials {
overflow-x: hidden;
}
@media(min-width: 782px){
:root {
--padding: 2rem;
}
h1, 
.h1 {
font-size: clamp( 1.85rem, 5vw, 4rem);
}
#site-header {
padding: 6vh 0;
}
#site-header .container {
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding-top: 1rem;
}
.page-title {
min-height: auto;
}
#skills-nav {
position: sticky;
top: 8vh;
}
#skills-arrow-container {
padding: var(--padding) 0;
}
#skills-links {
display: block;
}
#skills-content {
padding-left: 4vw
}
#skills-content > div {
padding-top: 10vh;
}
#skills-content > div:last-child {
padding-bottom: 10vh;
}
}
@media(min-width: 1024px){
:root {
--padding: 3rem;
}
}