:root {
--primary-color: #133b75;
--secondary-color: #1a4e9b;
--bg-color: #FCFDFD;
--button-color: #1a4e9b;
--h1-color: #1a4e9b;
}
[data-theme="dark"] {
--primary-color: #FCFDFD;
--secondary-color: #b5b5b5;
--bg-color: #1a4e9b;
--button-color: #FCFDFD;
--h1-color: #FCFDFD;
}
* {
margin: 0;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
.contact-container {
display: flex;
width: 100vw;
height: 100vh;
background: var(--bg-color);
}
.left-col {
width: 45vw;
height: 100%;
background-image: url("https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500");
background-size: cover;
background-repeat: no-repeat;
}
.logo {
width: 10rem;
padding: 1.5rem;
}
.right-col {
background: var(--bg-color);
width: 700vw;
height: 100vh;
padding: 5rem 3.5rem;
}
h1, label, button, .description {
font-family: 'Jost', sans-serif;
font-weight: 400;
letter-spacing: 0.1rem;
}
h1 {
color:var(--h1-color);
text-transform: uppercase;
font-size: 2.5rem;
letter-spacing: 0.5rem;
font-weight: 300;
}
p {
color: var(--secondary-color);
font-size: 0.9rem;
letter-spacing: 0.01rem;
width: 40vw;
margin: 0.25rem 0;
}
label, .description {
color: var(--secondary-color);
text-transform: uppercase;
font-size: 0.625rem;
}
form {
width: 31.25rem;
position: relative;
margin-top: 2rem;
padding: 1rem 0;
}
input, textarea, label, p {
width: 70vw;
display: block;
}
p, placeholder, input, textarea {
font-family: 'Helvetica Neue', sans-serif;
}
input::placeholder, textarea::placeholder {
color: var(--primary-color);
}
input, textarea {
color: var(--primary-color);
font-weight: 500;
background: var(--bg-color);
border: none;
border-bottom: 1px solid var(--secondary-color);
padding: 0.5rem 0;
margin-bottom: 1rem;
outline: none;
}
textarea {
resize: none;
}
button {
text-transform: uppercase;
font-weight: 300;
background: var(--button-color);
color: var(--bg-color);
width: 10rem;
height: 2.25rem;
border: none;
border-radius: 2px;
outline: none;
cursor: pointer;
}
input:hover, textarea:hover, button:hover {
opacity: 0.5;
}
button:active {
opacity: 0.8;
}
/* Toggle Switch */
.theme-switch-wrapper {
display: flex;
align-items: center;
text-align: center;
width: 160px;
position: absolute;
top: 0.5rem;
right: 0;
}
.description {
margin-left: 1.25rem;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 0.25rem;
content: "";
width: 26px;
height: 26px;
left: 0.25rem;
position: absolute;
transition: .4s;
}
input:checked + .slider {
background-color: var(--button-color);
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
#error, #success-msg {
width: 40vw;
margin: 0.125rem 0;
font-size: 0.75rem;
text-transform: uppercase;
font-family: 'Jost';
color: var(--secondary-color);
}
#success-msg {
transition-delay: 3s;
}
@media only screen and (max-width: 950px) {
.logo {
width: 8rem;
}
h1 {
font-size: 1.75rem;
}
p {
font-size: 0.7rem;
}
input, textarea, button {
font-size: 0.65rem;
}
.description {
font-size: 0.3rem;
margin-left: 0.4rem;
}
button {
width: 7rem;
}
.theme-switch-wrapper {
width: 120px;
}
.theme-switch {
height: 28px;
width: 50px;
}
.theme-switch input {
display:none;
}
.slider:before {
background-color: #fff;
bottom: 0.25rem;
content: "";
width: 20px;
height: 20px;
left: 0.25rem;
position: absolute;
transition: .4s;
}
input:checked + .slider:before {
transform: translateX(16px);
}
.slider.round {
border-radius: 15px;
}
.slider.round:before {
border-radius: 50%;
}
}
.radio-container {
margin-top: 1%;
margin-bottom: 3%;
}
.radio-container label {
margin-left: 0.5rem;
display: flex;
align-items: center; /* Выравнивание содержимого label по центру по вертикали */
margin-bottom: 0.5rem; /* Увеличивает расстояние между label элементами */
width: 60vh;
}
.radio-container input {
display: none;
opacity: 0;
pointer-events: none;
}
.radio-container input + label {
position: relative;
cursor: pointer;
}
.radio-container input + label:before {
content: '';
display: inline-block;
width: 1.2rem;
height: 1.2rem;
border: 1px solid var(--secondary-color);
border-radius: 50%;
margin-right: 0.5rem;
vertical-align: middle; /* Align the text vertically */
transition: background-color 0.2s;
}
.radio-container input:checked + label:before {
background-color: var(--secondary-color);
}
.agree {
display: none; /* Hide the default checkbox */
/*opacity: 0; !* Make it fully transparent *!*/
/*pointer-events: none; !* Prevents all click, state and cursor options on the checkbox *!*/
}
.agree + label {
position: relative;
cursor: pointer;
padding-left: 2.5em; /* Adjust if necessary to fit the custom checkbox */
display: inline-block; /* Keeps label in line */
vertical-align: top; /* Aligns label with the top of the line */
margin-bottom: 0.5em; /* Space between checkbox items */
}
.agree + label:before {
content: '';
display: inline-block;
position: absolute;
left: 0;
top: 0;
width: 1.2em;
height: 1.2em;
border: 2px solid var(--secondary-color); /* Adjust to your preferred border color */
border-radius: 0.2em; /* Rounded corners for checkbox, adjust as needed */
background-color: #fff; /* Initial background color for checkbox */
transition: background-color 0.3s; /* Smooth transition for checking effect */
}
.agree:checked + label:before {
background-color: var(--secondary-color); /* Change color when checked */
}
.agree-container label a {
display: inline; /* Ensures the link does not break onto a new line */
color: var(--primary-color); /* Color of your link text */
}
/*
www.OnlineWebFonts.Com
You must credit the author Copy this link on your web
Font made from
Web Fontsis licensed by CC BY 4.0