Files
cdnPRO/modoo-pl/styles/omnichannel_v2.scss
2026-04-07 14:04:27 +02:00

210 lines
3.1 KiB
SCSS

$color_0: #000000;
$color_1: #e3c6b0;
$color_2: #b88f70;
$fRaleway: 'Raleway', sans-serif;
.container {
@media (min-width: 1200px) {
.container {
max-width: 980px;
}
}
}
.box-title {
padding-bottom: 10px;
margin-bottom: 30px;
border-bottom: 7px solid $color_1;
h2 {
color: $color_0;
font-family: $fRaleway;
font-size: 36px;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
@media (max-width: 978px) {
h2 {
font-size: 28px;
}
}
@media (max-width: 700px) {
h2 {
font-size: 22px;
}
}
@media (max-width: 560px) {
h2 {
font-size: 18px;
}
}
}
._row {
display: grid;
grid-template-columns: 170px 1fr;
@media (max-width: 700px) {
grid-template-columns: 120px 1fr;
gap: 20px;
}
@media (max-width: 500px) {
grid-template-columns: 1fr;
}
._col-1 {
@media (max-width: 500px) {
text-align: center;
}
img {
width: 100%;
max-width: fit-content;
}
}
._col-2 {
h3 {
color: $color_2;
font-family: $fRaleway;
font-size: 22px;
font-weight: 800;
margin-bottom: 30px;
@media (max-width: 978px) {
font-size: 20px;
}
@media (max-width: 700px) {
font-size: 18px;
}
@media (max-width: 560px) {
font-size: 16px;
}
}
p {
color: $color_0;
font-family: $fRaleway;
font-size: 20px;
@media (max-width: 700px) {
font-size: 18px;
}
@media (max-width: 560px) {
font-size: 16px;
}
strong {
font-size: 25px;
font-weight: 800;
margin-bottom: 10px;
display: inline-block;
@media (max-width: 978px) {
font-size: 20px;
}
@media (max-width: 700px) {
font-size: 18px;
}
@media (max-width: 560px) {
font-size: 16px;
}
}
}
ul {
list-style: none;
padding-left: 0 !important;
li {
position: relative;
color: $color_0;
font-family: $fRaleway;
font-size: 20px;
line-height: 2;
padding-left: 50px;
&::before {
content: '';
color: $color_0;
font-size: 30px;
position: absolute;
top: 0;
left: 0;
line-height: 1.3;
}
@media (max-width: 978px) {
font-size: 20px;
padding-left: 30px;
}
@media (max-width: 700px) {
font-size: 18px;
}
@media (max-width: 560px) {
font-size: 16px;
}
}
}
}
}
.text_menu_title_header {
display: none;
}
#container {
&.container {
@media (min-width: 1480px) {
max-width: 1420px;
}
}
}
.box-1 {
margin-bottom: 80px;
margin-top: 100px;
.container {
@media (min-width: 1200px) {
max-width: 1170px;
}
@media (min-width: 1480px) {
max-width: 1420px;
}
}
}
.box-2,
.box-3,
.box-4 {
margin-bottom: 70px;
}
.box-5 {
margin-bottom: 100px;
p {
max-width: 400px;
margin-bottom: 40px;
font-style: italic;
}
a {
color: #ffffff;
font-size: 24px;
font-weight: 500;
line-height: 1;
font-family: $fRaleway;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 20px 40px;
background: $color_0;
@media (max-width: 700px) {
font-size: 20px;
}
@media (max-width: 560px) {
font-size: 18px;
}
}
}