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

Kontakt page

Browse Source
This commit is contained in:
Roman Pyrih
2026-02-09 15:34:25 +01:00
parent bd7aa65738
commit f7796f5dc1
12 changed files with 704 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -238,8 +238,8 @@ select {
}
.box-2 {
padding-top: 105px;
padding-bottom: 112px;
padding-top: 90px;
padding-bottom: 80px;
.box-2--wrapper {
.c-row {
@@ -414,69 +414,14 @@ select {
display: none;
}
&-1 {
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;
}
&[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 {
input {
&[type='text'],
&[type='email'] {
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
min-height: 100px;
color: #3f3f3f;
font-size: 14px;
@@ -485,205 +430,264 @@ select {
font-weight: 300;
outline: none;
resize: none;
}
select {
&[type='radio'],
&[type='checkbox'] {
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;
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;
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: column;
row-gap: 8px;
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;
}
._1_column {
display: flex;
flex-direction: row;
margin-bottom: 5px;
> * {
width: 50% !important;
&._col_message {
margin-top: 15px;
margin-bottom: 16px;
}
> * {
@include respond-below(sm) {
width: 100% !important;
}
}
}
._2_columns {
display: flex;
flex-direction: row;
column-gap: 25px;
margin-bottom: 7px;
._text {
margin: 16px 0 14px;
text-align: center;
@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;
p {
color: #1d1d1e;
font-size: 11px;
font-weight: 300;
border: none;
font-family: $font3;
margin-bottom: 0px;
}
}
.fileuploader-input {
width: fit-content;
margin: 0 auto;
._file {
padding: 29px;
margin: 0 0 26px 0;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
.fileuploader-input-caption {
span {
padding-top: 3px;
display: inline-block;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
border: none;
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 300;
}
}
.fileuploader-input {
width: fit-content;
margin: 0 auto;
button.fileuploader-input-button {
background: #1e2832;
border-radius: 25px;
padding: 10px 36px;
.fileuploader-input-caption {
span {
padding-top: 3px;
display: inline-block;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
color: #fff;
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (max-width: 768px) {
flex-direction: column;
font-weight: 300;
}
}
@media (max-width: 576px) {
}
}
button.fileuploader-input-button {
background: #1e2832;
border-radius: 25px;
padding: 10px 36px;
._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'] {
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;
color: #fff;
font-family: $font3;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
letter-spacing: 2px;
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: 768px) {
flex-direction: column;
}
}
@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;
flex-direction: row;
@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;
}
}
}
&-1 {
textarea {
min-height: 100px;
}
}
&-2 {
@@ -692,34 +696,20 @@ select {
.tabs-content-map {
width: 100%;
padding: 30px 10px 30px 10px;
padding: 20px 10px 20px 10px;
.tabs-content-map--head {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 50px;
margin-bottom: 40px;
.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;
color: #181c1d;
font-family: $font3;
font-weight: 300;
font-size: 14px;
font-size: 24px;
line-height: 1.3;
letter-spacing: -0.02em;
}
}
@@ -727,20 +717,18 @@ select {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
column-gap: 20px;
.tabs-content-map--sidebar {
padding-top: 60px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 178px;
border-bottom: 1px solid #1e2832;
.tabs-content-map--sidebar-head {
display: flex;
flex-direction: column;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #1e2832;
.name {
color: #000;
@@ -777,21 +765,50 @@ select {
outline: none;
}
}
}
.tabs-content-map--sidebar-list {
.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);
}
}
}
}
}
.tabs-content-map--footer {
margin-top: 24px;
.tabs-content-map--sidebar-list {
display: flex;
flex: 1;
ul.personal-list {
display: flex;
flex: 1;
padding: 0;
margin: 0;
list-style: none;
width: 100%;
row-gap: 36px;
column-gap: 30px;
flex-wrap: wrap;
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 {
width: calc(50% - 15px);
.personal-item--head {
margin-bottom: 20px;
@@ -829,28 +846,6 @@ select {
}
}
}
.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);
}
}
}
}
}
}
}
@@ -863,6 +858,7 @@ select {
.box-4 {
background: #1e2832;
margin-bottom: 100px;
.box-4--wrapper {
padding: 100px 0;
@@ -1006,20 +1002,6 @@ select {
}
}
.box-5 {
margin-top: 83px;
margin-bottom: 72px;
.box-5--wrapper {
.c-row {
width: 100%;
max-width: 1014px;
height: 1px;
background: #1e2832;
margin: 0 auto;
}
}
}
.box-6 {
padding-bottom: 100px;
@@ -1030,108 +1012,81 @@ select {
.c-row {
&-1 {
padding: 36px 35px;
border-radius: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background: #f6f5f4;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 48px;
gap: 40px;
transition: all 250ms ease-in-out;
transition-delay: 250ms;
margin-bottom: 10px;
.c-col {
&-1 {
.c-col-head {
margin-bottom: 24px;
width: 50%;
p {
color: #1e2832;
font-family: $font3;
font-weight: 700;
font-size: 16px;
line-height: 1.25;
margin: 0;
}
}
.c-col-body {
img {
border-radius: 10px;
}
img {
border-radius: 10px;
}
}
&-2 {
width: 100%;
width: 50%;
align-content: center;
.c-col-head {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
column-gap: 20px;
margin-bottom: 60px;
* {
color: #1e2832;
font-family: $font3;
}
.c-col-head--text {
p {
&.text-title {
color: #1e2832;
font-family: $font3;
font-weight: 500;
font-size: 20px;
line-height: 1;
}
&:not(.text-title) {
color: #1e2832;
font-family: $font3;
font-size: 16px;
ol {
padding: 0;
margin: 0;
list-style: none;
}
.info-tiles {
display: grid;
grid-template-columns: 182px 1fr;
row-gap: 50px;
column-gap: 60px;
.info-tile {
&-1 {
p {
font-weight: 400;
line-height: 1.3;
font-size: 16px;
strong {
display: block;
font-weight: 700;
font-size: 23px;
}
}
}
}
.c-col-head--logo {
img {
width: 100%;
max-width: 110px;
&-2 {
ol {
li {
a {
font-size: 16px;
font-family: $font3;
font-weight: 800;
display: inline-flex;
flex-direction: row;
align-content: center;
column-gap: 10px;
}
}
}
}
}
}
.c-col-body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.text-1,
.text-2,
.text-3 {
width: 50%;
}
.text-1 {
color: #1d1d1e;
font-family: $font3;
font-weight: 700;
font-size: 16px;
line-height: 1.5;
}
ol {
padding: 0;
margin: 0;
list-style: none;
li {
a {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
&-3 {
}
&-4 {
p {
margin-bottom: 0;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
}
}
}
@@ -1141,12 +1096,6 @@ select {
}
&-2 {
display: none;
.c-col {
padding-top: 12px;
}
.tiles {
display: flex;
flex-direction: row;
@@ -1171,14 +1120,23 @@ select {
width: 100%;
}
h3 {
color: #1d1d1e;
font-size: 20px;
font-weight: 700;
.tile-head {
margin-bottom: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
column-gap: 20px;
@include respond-below(md) {
font-size: 18px;
h3 {
color: #1d1d1e;
font-size: 20px;
font-weight: 700;
margin-bottom: 0;
@include respond-below(md) {
font-size: 18px;
}
}
}
@@ -1234,21 +1192,6 @@ select {
}
}
}
&-3 {
padding-top: 50px;
.c-col {
p {
color: $cTxtBlack;
font-family: $font3;
font-weight: 300;
font-size: 15px;
line-height: 1.55;
text-align: justify;
}
}
}
}
}
}

24
layout/style-scss/salony-sprzedazy.scss
View File

@@ -223,6 +223,12 @@ strong {
position: relative;
cursor: pointer;
&:hover {
.sidebar-item--wrapper {
background: #fff;
box-shadow: -2px 2px 4.6px rgb(180, 170, 162, 0.5);
}
}
&.active {
.sidebar-item--wrapper {
background: #fff;
@@ -234,7 +240,7 @@ strong {
.sidebar-item--wrapper {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px 32px;
gap: 48px 32px;
padding: 24px;
// border: 1px solid #b4aaa2;
border-radius: 10px;
@@ -408,8 +414,8 @@ strong {
.popup--body-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 20px;
gap: 30px 40px;
padding: 42px 52px;
p,
a {
@@ -444,7 +450,7 @@ strong {
font-weight: 700;
font-size: 16px;
line-height: 1;
margin-bottom: 20px;
margin-bottom: 10px;
}
ul {
padding: 0;
@@ -452,16 +458,18 @@ strong {
list-style: none;
display: flex;
flex-direction: row;
column-gap: 30px;
max-width: 180px;
column-gap: 24px;
max-width: 200px;
align-items: center;
li {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
row-gap: 12px;
width: calc(100% / 3 - (30px - (30px / 3)));
column-gap: 5px;
width: calc(100% / 3 - (24px - (24px / 3)));
max-width: fit-content;
p {
color: $cTxtBlack;

6
layout/style-scss/style.scss
View File

@@ -10962,7 +10962,7 @@ header#header {
footer#footer {
&.c-footer {
margin-top: 30px;
padding-top: 25px;
padding-top: 35px;
padding-bottom: 25px;
background: #1e2832;
@@ -11012,10 +11012,6 @@ footer#footer {
// }
&-2 {
column-gap: 40px;
padding-top: 20px;
border-top: solid 1px rgba(255, 255, 255, 0.2);
padding-bottom: 30px;
margin-bottom: 20px;
border-bottom: solid 1px rgba(255, 255, 255, 0.2);