:root {
--white: #F8F8F8;
--lGrey: #F0F0F0;
--dGrey: #0F0F0F;
--black: #070707;
--accent1: #55AAFF;
--accent2: #0055AA;
--lGradient: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.03),
rgba(0, 0, 0, 0.03) 1px,
transparent 1px,
transparent 16px
),
repeating-linear-gradient(
90deg,
rgba(0, 0, 0, 0.03),
rgba(0, 0, 0, 0.03) 1px,
transparent 1px,
transparent 16px
);
--dGradient: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.03) 1px,
transparent 1px,
transparent 16px
),
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.03) 1px,
transparent 1px,
transparent 16px
);
--fonts: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--center: center;
--pointer: pointer;
--none: none;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
html, body {
color: var(--black);
background-color: var(--white);
background-image: var(--lGradient);
width: 100%;
height: 100%;
}
.wrapper {
flex: 1;
}
::selection {
color: var(--black);
background-color: var(--accent1);
}
.hero-bg, .dark-bg {
color: var(--white);
background-color: var(--dGrey);
}
.hero-bg {
position: relative;
background: url('../images/hero-lg.webp') center no-repeat;
background-size: cover;
padding: 200px 100px;
}
.hero-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.93);
z-index: 1;
}
.hero-bg .container, .hero-bg * {
position: relative;
z-index: 2;
}
.dark-bg {
background-image: var(--dGradient);
}
.white-bg, .grey-bg, .dark-bg {
padding: 80px 25px;
}
.white-bg, .grey-bg {
color: var(--black);
background-image: var(--lGradient);
}
.white-bg {
background-color: var(--white);
}
.grey-bg {
background-color: var(--lGrey);
}
@font-face {
font-family: 'Poppins-ExtraBold';
src: url(../fonts/Poppins-ExtraBold.woff2);
font-display: swap;
}
@font-face {
font-family: 'Poppins-Bold';
src: url(../fonts/Poppins-Bold.woff2);
font-display: swap;
}
@font-face {
font-family: 'Poppins-SemiBold';
src: url(../fonts/Poppins-SemiBold.woff2);
font-display: swap;
}
@font-face {
font-family: 'OpenSans-Medium';
src: url(../fonts/OpenSans-Medium.woff2);
font-display: swap;
}
@font-face {
font-family: 'OpenSans-Regular';
src: url(../fonts/OpenSans-Regular.woff2);
font-display: swap;
}
@font-face {
font-family: 'Dyslexic';
src: url(../fonts/OpenDyslexic-Regular.woff2);
font-display: swap;
}
h1, .icon {
font-size: 3rem;
}
h1 {
font-family: 'Poppins-ExtraBold', var(--fonts);
font-weight: 800;
}
h2 {
font-family: 'Poppins-Bold', var(--fonts);
font-size: 2.5rem;
font-weight: 700;
border-bottom: 2px solid var(--accent1);
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.5rem;
}
.button1, .button2, label, .footer-link {
font-size: 1.25rem;
}
h3, .button1, .button2, label, h4, .footer-link, .access-button, .navbar-button {
font-family: 'Poppins-SemiBold', var(--fonts);
}
h3, .button1, .button2, strong, .price-info, .price-description, label, h4 ,.footer-link, .access-button, .navbar-button {
font-weight: 600;
}
h1, h2, h3, .button1, .button2, label, h4, .footer-link, .access-button, .navbar-button {
line-height: 1.2;
letter-spacing: -0.02em;
}
p, li, .price-info, .price-feature, .price-description, blockquote, input::placeholder, textarea::placeholder, .error {
font-family: 'OpenSans-Regular', var(--fonts);
}
.nav-link {
font-family: 'OpenSans-Medium', var(--fonts);
font-weight: 500;
}
p, li, .price-info, .price-feature, .price-description, blockquote, input::placeholder, textarea::placeholder, .error, .nav-link {
line-height: 1.4;
letter-spacing: 0.02em;
}
p, li, .price-info, .price-feature, .price-description, blockquote, input::placeholder, textarea::placeholder, .error, .access-button, .nav-link, .navbar-button {
font-size: 1.125rem;
}
p, li, .price-feature, blockquote, input::placeholder, textarea::placeholder, .error {
font-weight: 400;
}
blockquote {
font-style: italic;
}
abbr {
text-decoration: underline;
text-decoration-style: dashed !important;
}
abbr:hover {
cursor: help;
text-decoration: var(--none);
}
.icon {
color: var(--accent1);
}
.button1, .navbar-button:hover, .navbar-button:focus {
color: var(--black);
background-color: var(--accent1);
}
.button1, .navbar-button {
border: var(--none);
transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
.button2 {
background: transparent;
border: 2px solid var(--accent1);
}
.button2, .access-button {
color: var(--white);
}
.button1, .button2, .navbar-button {
text-wrap: nowrap;
text-decoration: var(--none);
border-radius: 5px;
padding: 20px 40px;
}
.navbar-button {
padding: 10px 20px;
}
.button1, .button2 {
padding: 20px 40px;
}
.access-button {
background: transparent;
border: var(--none);
padding: 0;
margin: 0;
}
.button1:hover, .button1:focus, .navbar-button {
color: var(--white);
background-color: var(--accent2);
}
.button2:hover, .button2:focus {
border: 2px solid var(--white);
}
.access-button:hover, .access-button:focus {
color: var(--accent1);
}
.button1:active, .button2:active, .access-button:active, .navbar-button:active {
transform: translateY(2px);
}
.button1:hover, .button2:hover, .button1:active, .button2:active, .access-button:hover, .access-button:active, .navbar-button:hover, .navbar-button:active, .button1:focus, .button2:focus, .navbar-button:focus, .access-button:focus {
text-decoration: underline;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.about-img {
width: 100%;
}
.text-link {
color: var(--accent2);
}
.text-link:visited {
color: purple;
}
.text-link:hover, .text-link:focus {
text-decoration: var(--none);
}
.text-link, .text-link:visited, .text-link:active {
text-decoration: underline;
}
.button1:hover, .button2:hover, .button1:active, .button2:active, .access-button:hover, .access-button:active, .navbar-button:hover, .navbar-button:active, .text-link:hover, .text-link:active, .footer-link:hover, .footer-link:active, .price-feature:hover, .price-feature:active {
cursor: var(--pointer);
}
input, textarea {
color: var(--white);
border: 2px solid var(--white);
background: transparent;
border-radius: 0;
}
textarea {
resize: var(--none);
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
-webkit-text-fill-color: #F8F8F8 !important;
border: 2px solid #F8F8F8;
transition: background-color 5000s ease-in-out 0s;
}
input, textarea, .button2 {
transition: border 0.25s ease-in-out;
}
input:focus, textarea:focus {
border: 2px solid var(--accent1);
outline: var(--none);
}
header {
color: var(--black);
background-color: var(--white);
}
nav .container {
padding: 0;
}
.navbar-brand img {
width: 200px;
height: 33px;
}
.navbar-brand:focus {
outline: 2px solid var(--black);
}
.navbar-toggler {
color: var(--black);
border: 2px solid var(--black);
border-radius: 5px;
}
.nav-link {
color: var(--black);
text-decoration: var(--none);
}
.nav-link:hover, .nav-link:focus, .active {
color: var(--accent2) !important;
text-decoration: underline;
}
.nav-link:active {
text-decoration: var(--none);
}
footer {
background-color: var(--black);
padding: 50px 25px;
}
footer, .footer-link {
color: var(--white);
}
.footer-link:hover, .footer-link:focus {
text-decoration: underline;
}
.footer-link, .footer-link:active {
text-decoration: var(--none);
}
.service-card, .price-card, .question-card, .review-card {
color: var(--black);
background-color: var(--white);
}
.service-card, .price-card, .review-card {
border-radius: 10px;
}
.question-card, .review-card {
border: 2px solid var(--black);
}
.service-card, .price-card {
border: 4px solid var(--accent1);
}
.question-card {
border-radius: 0;
}
.service-card {
padding: 30px 15px;
}
.price-card {
padding: 15px;
}
.price-list {
list-style-type: var(--none);
border-top: 2px solid var(--accent1);
border-bottom: 2px solid var(--accent1);
}
.price-feature {
text-align: left;
width: 100%;
background: transparent;
border: var(--none);
border-bottom: 1px solid var(--accent1);
margin: 0;
padding: 0;
}
.price-description {
color: var(--black);
background-color: var(--accent1);
border: var(--none);
border-radius: 5px;
padding: 10px;
opacity: 0;
}
.price-description, .portfolio-overlay {
transition: opacity 0.25s ease-in-out;
}
.price-description.visible {
opacity: 1;
}
.price-feature:hover, .price-feature:focus {
color: var(--accent2);
}
.price-feature:active {
text-decoration: underline;
}
.portfolio-item {
position: relative;
overflow: hidden;
}
.portfolio-img {
width: 100%;
border: var(--none);
border-radius: 10px;
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.75);
opacity: 0;
}
.portfolio-title {
width: 90%;
}
.portfolio-item:hover .portfolio-overlay, .portfolio-item:focus-within .portfolio-overlay {
opacity: 1;
}
.center, .button1, .button2, .navbar-button {
text-align: var(--center);
}
.left {
text-align: left;
}
ul {
list-style-type: square;
}
.btn, .nav-link, .price-feature {
transition: color 0.25s ease-in-out;
}
.btn:hover, .btn:focus {
color: var(--accent2);
text-decoration: underline;
}
.btn:active {
text-decoration: var(--none);
}
.review-header {
border-bottom: 2px solid var(--black);
}
.d-flexflex-column, .error, .img1200, .img992, .img1400, .price-description {
display: var(--none);
}
.error, .red {
color: red;
}
.overflow-break {
text-wrap: wrap;
overflow-wrap: break-word;
word-wrap: break-word;
}
.red-border {
border: 2px solid red !important;
}
.black-border {
border: 2px solid #F8F8F8 !important;
}
.submitted-button {
opacity: 0.7 !important;
cursor: not-allowed !important;
}
body.dyslexic-mode *:not(i) { 
font-family: 'Dyslexic', var(--fonts);
font-size: 1rem;
line-height: 1;
letter-spacing: -0.25em; 
}
body.high-contrast * { 
color: white;
background-color: black;
border-color: white; 
}
@media screen and (max-width: 1399px) {
.img1400 {
display: block;
}
}
@media screen and (max-width: 1199px) {
.img1200 {
display: block;
}
}
@media screen and (max-width: 991px) {
.hide-img, .img1200, .img1400 {
display: var(--none);
}
.img992 {
display: block;
}
nav .container {
padding: 0 10px;
}
.nav-item {
border-bottom: 1px solid var(--black);
}
}
@media screen and (max-width: 767px) {
h1 {
font-size: 2rem;
}
.icon {
font-size: 2.5rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
.button1, .button2, label, .footer-link {
font-size: 1.125rem;
}
.hero-bg {
background: url('../images/hero-md.webp') center no-repeat;
padding: 100px 25px;
}
.white-bg, .grey-bg, .dark-bg {
padding: 50px 25px;
}
.button1, .button2 {
padding: 15px 30px;
}
.service-card {
padding: 20px 15px;
}
.price-card {
padding: 13px;
}
.price-description {
padding: 8px;
}
footer {
padding: 25px;
}
}
@media only screen and (max-width: 374px) {
.cap {
display: inline-block;
transform: scale(0.8);
transform-origin: 0 0;
}
}