Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Save

Browse Source
This commit is contained in:
Roman Pyrih
2026-02-02 15:57:49 +01:00
parent c5c71bf086
commit d93d1152c2
4 changed files with 870 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

680
layout/style-scss/kontakt-v8.scss
View File

@@ -315,17 +315,13 @@ strong {
width: 100%;
max-width: 410px;
input[type='radio'] {
appearance: none;
&.active {
p {
color: #fff !important;
background: #1e2832 !important;
}
}
input[type='radio']:checked + label {
color: #fff !important;
background: #1e2832 !important;
}
label,
a {
p {
color: #3f3f3f;
font-family: $font3;
font-style: normal;
@@ -359,6 +355,8 @@ strong {
padding: 25px 28px 40px 34px;
background: #f7f6f5;
border-radius: 15px;
display: flex;
flex-direction: column;
@include respond-below(md) {
max-width: unset;
@@ -366,272 +364,450 @@ strong {
// @include respond-below(md) {
// border-radius: 14px 14px 22px 22px;
// }
input {
&[type='text'],
&[type='email'] {
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
.tabs-content {
&:not(.active) {
display: none;
}
&[type='radio'],
&[type='checkbox'] {
position: relative;
appearance: none;
width: 11px;
min-width: 11px;
height: 11px;
border-radius: 100%;
border: 1px solid #dfdfdf;
transition: all 250ms ease-in-out;
outline: none;
&-1 {
input {
&[type='text'],
&[type='email'] {
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 100%;
background: #1d1d1e;
transform: translate(-50%, -50%);
visibility: hidden;
transition: all 250ms ease-in-out;
}
&:checked {
border-color: #1d1d1e;
&::before {
width: 6px;
height: 6px;
visibility: visible;
}
}
}
}
textarea {
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
min-height: 100px;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
resize: none;
}
select {
position: relative;
appearance: none;
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
}
._1_column {
display: flex;
flex-direction: row;
margin-bottom: 5px;
&._col_message {
margin-top: 15px;
margin-bottom: 16px;
}
> * {
width: 100% !important;
}
}
._2_columns {
display: flex;
flex-direction: row;
column-gap: 25px;
margin-bottom: 7px;
@include respond-below(sm) {
flex-wrap: wrap;
row-gap: 14px;
}
> * {
width: 50% !important;
@include respond-below(sm) {
width: 100% !important;
}
}
}
._text {
margin: 16px 0 14px;
text-align: center;
p {
color: #1d1d1e;
font-size: 11px;
font-weight: 300;
font-family: $font3;
margin-bottom: 0px;
}
}
._file {
padding: 29px;
margin: 0 0 26px 0;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
border: none;
.fileuploader-input {
width: fit-content;
margin: 0 auto;
.fileuploader-input-caption {
span {
padding-top: 3px;
display: inline-block;
color: #1d1d1e;
font-size: 16px;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
}
&[type='radio'],
&[type='checkbox'] {
position: relative;
appearance: none;
width: 11px;
min-width: 11px;
height: 11px;
border-radius: 100%;
border: 1px solid #dfdfdf;
transition: all 250ms ease-in-out;
outline: none;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 100%;
background: #1d1d1e;
transform: translate(-50%, -50%);
visibility: hidden;
transition: all 250ms ease-in-out;
}
&:checked {
border-color: #1d1d1e;
&::before {
width: 6px;
height: 6px;
visibility: visible;
}
}
}
}
textarea {
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
min-height: 100px;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
resize: none;
}
select {
position: relative;
appearance: none;
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
}
._1_column {
display: flex;
flex-direction: row;
margin-bottom: 5px;
&._col_message {
margin-top: 15px;
margin-bottom: 16px;
}
> * {
width: 100% !important;
}
}
button.fileuploader-input-button {
background: #1e2832;
border-radius: 25px;
padding: 10px 36px;
._2_columns {
display: flex;
flex-direction: row;
column-gap: 25px;
margin-bottom: 7px;
@include respond-below(sm) {
flex-wrap: wrap;
row-gap: 14px;
}
> * {
width: 50% !important;
@include respond-below(sm) {
width: 100% !important;
}
}
}
._text {
margin: 16px 0 14px;
text-align: center;
p {
color: #1d1d1e;
font-size: 11px;
font-weight: 300;
font-family: $font3;
margin-bottom: 0px;
}
}
._file {
padding: 29px;
margin: 0 0 26px 0;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
border: none;
.fileuploader-input {
width: fit-content;
margin: 0 auto;
.fileuploader-input-caption {
span {
padding-top: 3px;
display: inline-block;
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 300;
}
}
button.fileuploader-input-button {
background: #1e2832;
border-radius: 25px;
padding: 10px 36px;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
color: #fff;
font-family: $font3;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (max-width: 768px) {
flex-direction: column;
}
}
@media (max-width: 576px) {
}
}
._radio,
._checkbox {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
gap: 8px;
color: #fff;
font-family: $font3;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
label {
color: #1d1d1e;
font-size: 10px;
font-family: $font3;
font-weight: 300;
line-height: 1;
padding-top: 2px;
margin-bottom: 0;
cursor: pointer;
}
}
@media (max-width: 768px) {
flex-direction: column;
.form_actions {
margin-top: 37px;
align-items: center;
margin-bottom: 0;
@include respond-below(xs) {
flex-direction: column;
align-items: center;
row-gap: 30px;
}
button[type='submit'] {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 13px 20px 10px 20px;
margin: 0;
background: #fff246;
border-radius: 6px;
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
width: fit-content !important;
height: auto;
border: none;
outline: none;
cursor: pointer;
// &:active {
// background: #f0e875;
// }
img {
width: 20px;
padding-bottom: 3px;
}
@include respond-above(xs) {
margin-left: 20px;
}
}
.g-recaptcha {
width: fit-content !important;
@include respond-above(xs) {
margin-left: auto;
}
}
}
}
@media (max-width: 576px) {
}
}
._radio,
._checkbox {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
label {
color: #1d1d1e;
font-size: 10px;
font-family: $font3;
font-weight: 300;
line-height: 1;
padding-top: 2px;
margin-bottom: 0;
cursor: pointer;
}
}
.form_actions {
margin-top: 37px;
align-items: center;
margin-bottom: 0;
@include respond-below(xs) {
flex-direction: column;
align-items: center;
row-gap: 30px;
}
button[type='submit'] {
&-2 {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 13px 20px 10px 20px;
margin: 0;
background: #fff246;
border-radius: 6px;
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
width: fit-content !important;
height: auto;
border: none;
outline: none;
cursor: pointer;
// &:active {
// background: #f0e875;
// }
flex: 1;
img {
width: 20px;
padding-bottom: 3px;
}
.tabs-content-map {
width: 100%;
padding: 30px 10px 30px 10px;
@include respond-above(xs) {
margin-left: 20px;
}
}
.tabs-content-map--head {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 50px;
.g-recaptcha {
width: fit-content !important;
.tabs-content-map--title {
color: #948679;
font-family: $font3;
font-weight: 500;
font-size: 18px;
line-height: 1.1;
text-align: right;
letter-spacing: 0.05em;
text-transform: uppercase;
padding-right: 20px;
margin: 0 20px 0 0;
border-right: 1px solid #b8aea4;
}
.tabs-content-map--subtitle {
color: #948679;
font-family: $font3;
font-weight: 300;
font-size: 14px;
line-height: 1.3;
letter-spacing: -0.02em;
}
}
@include respond-above(xs) {
margin-left: auto;
.tabs-content-map--body {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
column-gap: 20px;
.tabs-content-map--sidebar {
padding-top: 60px;
display: flex;
flex-direction: column;
.tabs-content-map--sidebar-head {
display: flex;
flex-direction: column;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #1e2832;
.name {
color: #000;
font-family: $font3;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
margin: 0;
}
.curent_value {
color: #000;
font-family: $font3;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
margin: 0 0 18px 0;
}
select {
position: relative;
appearance: none;
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
}
}
.tabs-content-map--sidebar-list {
display: flex;
flex: 1;
ul.personal-list {
display: flex;
flex: 1;
padding: 0;
margin: 0;
list-style: none;
width: 240px;
overflow: auto;
max-height: 330px;
row-gap: 36px;
.personal-item--head {
margin-bottom: 20px;
p {
color: #181c1d;
font-family: $font3;
font-weight: 400;
font-size: 16px;
line-height: 1.35;
margin: 0;
}
}
.personal-item--body {
ol {
padding: 0;
margin: 0;
list-style: none;
li {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 6px;
a {
color: #181c1d;
font-family: $font3;
font-weight: 400;
font-size: 16px;
line-height: 1;
}
}
}
}
}
}
}
.tabs-content-map--map {
width: 100%;
#interactive-map {
display: flex;
width: 100%;
svg {
width: 100%;
path {
fill: #fff;
stroke: #7c7c7c;
stroke-width: 1px;
}
path:hover {
filter: brightness(0.95);
}
}
}
}
}
}
}
}