Zaktualizuj style CSS, dodaj nowe style dla elementów oraz popraw kolorystykę i czcionki

This commit is contained in:
Roman Pyrih
2025-04-07 16:00:23 +02:00
parent d5a334c6a8
commit a88a6f1bfd
3 changed files with 482 additions and 95 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAQ,4LAAA,CAQR,KACE,mCAAA,CACA,2CAAA,CAIA,gCACE,mBAAA,CACA,0BAAA,CACA,oBAAA,CAEA,gDACE,mCAAA,CACA,QAAA,CACA,0BAAA,CACA,mBAAA,CACA,WAAA,CACA,UAAA,CACA,kBAAA,CACA,sBAAA,CACA,cAAA,CACA,0BAAA,CAGF,sCACE,2CAAA,CAGA,wDACE,wBAAA,CADF,mDACE,wBAAA,CAQN,iDAEE,mBAAA,CACA,WAAA,CACA,sBAAA,CAAA,iBAAA,CACA,kBAAA,CACA,sBAAA,CACA,OAAA,CACA,cAAA,CAIE,wOAEE,+BAAA,CAIJ,yDACE,WAAA,CAGF,gNAEE,wBAAA,CACA,0BAAA,CACA,cAAA,CAIA,qFACE,mCAAA,CACA,mBAAA,CAMR,2CACE,uBAAA,CACA,mCAAA,CAGF,MACE,mCAAA,CAEA,yBACE,mCAAA,CAGE,8BACE,eAAA,CACA,cAAA,CACA,wBAAA,CACA,2CAAA,CAEA,oCACE,qBAAA,CAQR,wBACE,yCAAA,CACA,eAAA,CACA,eAAA","file":"style.css","sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');\r\n\r\n$cGold: #b8a982;\r\n$cBlackLight: #141414;\r\n$cBlackDark: #09090a;\r\n$cGreen: #22c55e;\r\n$cRed: #d16067;\r\n\r\nbody {\r\n background-color: #191919 !important;\r\n font-family: 'Poppins', sans-serif !important;\r\n}\r\n\r\n.storefront-search {\r\n .search__bar {\r\n border: 0 !important;\r\n border-radius: 0 !important;\r\n padding: 0 !important;\r\n\r\n .search__submit {\r\n background-color: $cGold !important;\r\n border: 0;\r\n border-radius: 0 !important;\r\n display: inline-flex;\r\n height: 44px;\r\n width: 45px;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n margin-top: -1px !important;\r\n }\r\n\r\n input {\r\n font-family: 'Poppins',\r\n sans-serif !important;\r\n\r\n &::placeholder {\r\n color: rgb(171, 171, 171) !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.module {\r\n\r\n .favourites-button,\r\n .labeled-icon {\r\n display: inline-flex;\r\n height: 45px;\r\n width: fit-content;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 5px;\r\n margin-top: 5px;\r\n\r\n &:hover {\r\n\r\n .favourites-button__signature,\r\n .labeled-icon__signature {\r\n text-decoration: none !important;\r\n }\r\n }\r\n\r\n svg {\r\n stroke: #FFF\r\n }\r\n\r\n .favourites-button__signature,\r\n .labeled-icon__signature {\r\n color: #A8A8A8 !important;\r\n font-weight: 400 !important;\r\n font-size: 13px;\r\n }\r\n\r\n .indicator {\r\n &::after {\r\n background-color: $cGold !important;\r\n border: 0 !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.storefront-search .search .search_outline {\r\n outline: none !important;\r\n border: 1px solid $cGold !important;\r\n}\r\n\r\n.menu {\r\n background: transparent !important;\r\n\r\n .menu-content_root {\r\n background: transparent !important;\r\n\r\n li {\r\n a {\r\n font-weight: 500;\r\n font-size: 14px;\r\n color: $cGold !important;\r\n font-family: 'Poppins', sans-serif !important;\r\n\r\n &:hover {\r\n color: #FFF !important;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\nheader {\r\n >.grid:last-child {\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n max-width: 100vw;\r\n margin-top: 25px;\r\n }\r\n}"]}
{"version":3,"sources":["style.scss"],"names":[],"mappings":"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","file":"style.css"}

View File

@@ -1,116 +1,503 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://cdn.projectpro.pl/juicedupmotorcycles.pl/scandia/stylesheet.css');
$cTxtWhite: #dadadc;
$cGold: #b8a982;
$cBlackLight: #141414;
$cGolden: #b79e5f;
$cBlackLight: #141417;
$cBlackDark: #09090a;
$cBlack: #000;
$cGreen: #22c55e;
$cRed: #d16067;
$cOnyx: #0a0a0b;
$fScandia: 'Scandia', sans-serif;
$fPlayfair: 'Playfair Display', serif;
body {
background-color: #191919 !important;
font-family: 'Poppins', sans-serif !important;
background-color: $cBlackLight !important;
font-family: 'Scandia', 'Poppins', sans-serif !important;
> .wrap {
overflow: hidden;
}
}
.storefront-search {
.search__bar {
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
p {
margin-top: 0;
.search__submit {
background-color: $cGold !important;
border: 0;
border-radius: 0 !important;
display: inline-flex;
height: 44px;
width: 45px;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: -1px !important;
}
input {
font-family: 'Poppins',
sans-serif !important;
&::placeholder {
color: rgb(171, 171, 171) !important;
}
}
}
&:last-child {
margin-bottom: 0 !important;
}
}
.module {
// .container {
// @media (min-width: 1460px) {
// max-width: 1440px !important;
// }
// }
.favourites-button,
.labeled-icon {
display: inline-flex;
height: 45px;
width: fit-content;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 5px;
&:hover {
.favourites-button__signature,
.labeled-icon__signature {
text-decoration: none !important;
}
}
svg {
stroke: #FFF
}
.favourites-button__signature,
.labeled-icon__signature {
color: #A8A8A8 !important;
font-weight: 400 !important;
font-size: 13px;
}
.indicator {
&::after {
background-color: $cGold !important;
border: 0 !important;
}
}
}
._sub_title {
color: $cGolden;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
margin: 0 0 8px 0;
}
.storefront-search .search .search_outline {
outline: none !important;
border: 1px solid $cGold !important;
._title {
position: relative;
color: $cTxtWhite;
font-size: 51px;
font-family: $fPlayfair;
font-weight: 500;
}
.menu {
background: transparent !important;
.box_custom#box-1 {
height: 600px;
background-image: url('https://sklep214936.shoparena.pl/skins/user/rwd_shoper_2/images/user/beard-quiz-home-hero-desktop.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
align-content: center;
margin-bottom: 0;
.menu-content_root {
background: transparent !important;
.box_wrapper {
margin-left: 20vw;
}
li {
a {
font-weight: 500;
font-size: 14px;
color: $cGold !important;
font-family: 'Poppins', sans-serif !important;
h2 {
color: $cTxtWhite;
font-size: 60px;
font-weight: 700;
margin: 0;
}
h3 {
color: $cTxtWhite;
font-size: 16px;
font-weight: 500;
display: inline-block;
background-color: $cBlackDark;
border-radius: 2.375rem;
padding: 4px 12px;
text-transform: uppercase;
margin: 0 0 15px 0;
}
p {
color: $cTxtWhite;
font-size: 18px;
font-weight: 400;
margin: 10px 0 20px;
&:hover {
color: #FFF !important;
}
}
}
}
&:last-child {
margin: 0;
}
}
a {
display: inline-block;
color: $cBlack;
font-size: 20px;
font-weight: 500;
padding: 16px 36px;
background: linear-gradient(119deg, #d0bf95 0%, #a48446 100%);
border-radius: 100px;
transition: all 250ms ease;
&:hover {
background: linear-gradient(119deg, #a48446 0%, #d0bf95 100%);
}
}
}
header {
>.grid:last-child {
border-top: 1px solid rgba(255, 255, 255, 0.1);
max-width: 100vw;
margin-top: 25px;
}
}
.box_custom#box-2 {
padding: 16px;
margin-bottom: 0;
background-color: #0f0f11;
opacity: 0.6;
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
li {
img {
height: 30px;
width: auto;
object-fit: contain;
}
}
}
}
.box_custom#box-3 {
position: relative;
padding: 100px 0;
.c-row {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.c-col {
width: 50%;
&.c-col-1 {
h2 {
@extend ._title;
position: relative;
margin: 0 0 40px 0;
&::after {
content: url('https://sklep214936.shoparena.pl/skins/user/rwd_shoper_2/images/user/Vector_1.png');
position: absolute;
left: 105px;
bottom: -30px;
}
}
h3 {
@extend ._sub_title;
}
p {
color: $cTxtWhite;
font-size: 22px;
font-weight: 400;
line-height: 1.4;
max-width: 400px;
}
}
&.c-col-2 {
img {
border-radius: 20px;
}
}
}
}
}
.box_custom#box-4 {
position: relative;
padding: 100px 0;
.c-row {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.c-col {
width: 50%;
&.c-col-1 {
h2 {
@extend ._title;
position: relative;
margin: 0 0 30px 0;
}
h3 {
@extend ._sub_title;
}
ul {
padding: 0;
margin: 0;
list-style: none;
max-width: 400px;
li {
&:not(:last-child) {
margin-bottom: 20px;
}
p {
color: $cTxtWhite;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin: 0;
strong {
font-weight: 500;
}
}
}
}
}
&.c-col-2 {
img {
border-radius: 20px;
}
}
}
}
}
.box_custom#box-faq {
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
.boxhead {
margin-bottom: 30px;
border: none;
span {
color: $cTxtWhite;
font-size: 40px;
font-weight: 700;
font-family: $fPlayfair;
text-align: center;
}
}
#faq {
ul {
padding: 0;
margin: 0;
list-style: none;
li {
border-bottom: 1px solid #60606b;
&:first-child {
border-top: 1px solid #60606b;
}
&.active {
h3 {
&::after {
height: 0;
}
}
}
h3 {
position: relative;
color: $cTxtWhite;
font-size: 16px;
font-weight: 500;
padding: 16px 30px 16px 0;
margin: 0;
cursor: pointer;
&::before {
content: '';
position: absolute;
right: 2px;
top: 50%;
width: 15px;
height: 2px;
background: $cTxtWhite;
transform: translate(-50%, -50%);
}
&::after {
content: '';
position: absolute;
right: 15px;
top: 50%;
height: 15px;
width: 2px;
background: $cTxtWhite;
transform: translate(-50%, -50%);
transition: all 250ms ease;
}
}
> div {
display: none;
p {
color: #a3a3a3;
font-size: 16px;
font-weight: 400;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 20px !important;
}
}
}
}
}
}
}
.bottom-footer {
background-color: $cOnyx;
}
footer.footer {
margin-bottom: 0;
background-color: $cOnyx;
.innerfooter {
ul {
li {
font-size: 14px;
font-weight: 400;
&.head {
color: $cTxtWhite;
font-weight: 600;
background-color: transparent;
}
}
}
}
}
#shoper-foot {
background-color: $cOnyx !important;
a {
color: $cTxtWhite;
}
}
#box_lastadded,
#box_specialoffer {
position: relative;
padding-top: 100px;
padding-bottom: 100px;
&::after {
content: '';
display: block;
position: absolute;
inset: 0 0 0 50%;
width: 100svw;
background: $cOnyx;
transform: translateX(-50%);
}
.boxhead {
position: relative;
z-index: 1;
margin-bottom: 50px;
border: none !important;
span {
@extend ._title;
line-height: 1;
}
}
.innerbox {
position: relative;
z-index: 1;
}
}
// .storefront-search {
// .search__bar {
// border: 0 !important;
// border-radius: 0 !important;
// padding: 0 !important;
// .search__submit {
// background-color: $cGold !important;
// border: 0;
// border-radius: 0 !important;
// display: inline-flex;
// height: 44px;
// width: 45px;
// align-items: center;
// justify-content: center;
// cursor: pointer;
// margin-top: -1px !important;
// }
// input {
// font-family: 'Poppins', sans-serif !important;
// &::placeholder {
// color: rgb(171, 171, 171) !important;
// }
// }
// }
// }
// .module {
// .favourites-button,
// .labeled-icon {
// display: inline-flex;
// height: 45px;
// width: fit-content;
// align-items: center;
// justify-content: center;
// gap: 5px;
// margin-top: 5px;
// &:hover {
// .favourites-button__signature,
// .labeled-icon__signature {
// text-decoration: none !important;
// }
// }
// svg {
// stroke: #fff;
// }
// .favourites-button__signature,
// .labeled-icon__signature {
// color: #a8a8a8 !important;
// font-weight: 400 !important;
// font-size: 13px;
// }
// .indicator {
// &::after {
// background-color: $cGold !important;
// border: 0 !important;
// }
// }
// }
// }
// .storefront-search .search .search_outline {
// outline: none !important;
// border: 1px solid $cGold !important;
// }
// .menu {
// background: transparent !important;
// .menu-content_root {
// background: transparent !important;
// li {
// a {
// font-weight: 500;
// font-size: 14px;
// color: $cGold !important;
// font-family: 'Poppins', sans-serif !important;
// &:hover {
// color: #fff !important;
// }
// }
// }
// }
// }
// header {
// > .grid:last-child {
// border-top: 1px solid rgba(255, 255, 255, 0.1);
// max-width: 100vw;
// margin-top: 25px;
// }
// }