html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
input,
textarea,
select {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
--base-font-color: #1c1e24;
--fade-font-color: #404249;
--fade2-font-color: #5e606b;
--base-back-color: #fbfdff;
--fade-back-color: #ebf0f5;
--fade2-back-color: #d5dce4;
--hlight-color: #075694;
--hlight2-color: #3a7aad;
--accent-color: #f5a828;
--accent2-color: #ffd470;
--hlight-gradient: linear-gradient(to top right,
var(--hlight-color),
var(--hlight2-color));
--trihlight-gradient: linear-gradient(to right,
#3a7aaf 0%,
var(--hlight-color) 50%,
#3a7aaf 100%);
--section-gap: 60px;
--box-color: var(--fade-back-color);
--box-radius: 10px;
--skeleton-anim: skeleton 2s ease infinite;
color: var(--base-font-color);
background-color: var(--base-back-color);
min-height: 100vh;
}
.header {
width: 100%;
background: #0a5896;
height: 60px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 max(calc(50vw - 700px), 30px);
box-sizing: border-box;
z-index: 700;
position: relative;
&>.logo {
height: 30px;
& img {
height: 100%;
}
}
&>.top-nav {
&>.list {
display: flex;
flex-direction: row;
column-gap: 15px;
color: var(--fade2-back-color);
align-items: center;
&>.item {
font-size: 0.8em;
white-space: nowrap;
transition: all 0.3s ease;
text-transform: uppercase;
height: 40px;
line-height: 40px;
& a {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: row;
column-gap: 5px;
align-items: center;
& .icon {
font-size: 0.8em;
height: 16px;
width: 16px;
display: flex;
flex-direction: row;
align-items: center;
translate: 0 1px;
}
}
&:hover {
opacity: 1;
cursor: pointer;
text-decoration: underline;
}
}
&>.item-search {
display: none;
}
}
}
}
.footer {
width: 100%;
background: var(--fade-back-color);
min-height: 200px;
padding: 15px 0;
color: var(--fade-font-color);
& .title {
font-weight: bold;
margin-bottom: 15px;
}
& .content {
line-height: 1.2em;
& li {
margin: 5px 0;
}
& b {
font-weight: bold;
margin-top: 5px;
margin-bottom: 3px;
margin-right: 5px;
display: inline-block;
}
& .icon {
font-size: 0.7em;
margin-right: 3px;
display: inline-block;
height: 16px;
translate: 0 2px;
}
}
& a {
color: var(--hlight2-color);
text-decoration: none;
transition: color 0.3s ease;
&:hover {
color: var(--hlight-color);
cursor: pointer;
text-decoration: underline;
}
}
& .footer-bottom,
& .footer-top {
padding: 0 15px;
box-sizing: border-box;
}
& .footer-bottom {
font-size: 0.9em;
color: var(--fade2-font-color);
}
& .logo {
flex: 0 1 auto;
padding-right: 30px;
box-sizing: border-box;
&>img {
height: 40px;
}
}
}
.page {
max-width: 100%;
width: 1200px;
margin: 0 auto;
}
.icon>svg {
width: 1.4em;
height: 1.4em;
}
.search-box {
flex: 1 1 auto;
padding: 0 30px;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 10px;
&>.back-search {
box-sizing: border-box;
background-color: #22222222;
border-radius: 10px;
color: #dedede;
height: 35px;
width: 35px;
font-size: .9em;
flex: 0 0 35px;
transition: all 0.3s ease;
display: none;
&>.icon {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
&:hover {
cursor: pointer;
color: #fafafa;
background-color: #222222;
}
}
&>.top-box-search {
flex: 1 1 auto;
height: 35px;
max-width: 500px;
border-radius: var(--box-radius);
background-color: var(--base-back-color);
margin: 0 auto;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
border: 1px solid var(--base-back-color);
box-sizing: border-box;
transition: border 0.3s ease;
&:hover {
border-color: var(--accent-color);
}
& input {
height: 35px;
flex: 1 1 auto;
font-size: 1em;
padding: 0 15px;
outline: none;
border: none;
min-width: 100px;
width: 100px;
}
& .icon {
height: 35px;
width: 35px;
flex: 0 0 auto;
border-left: var(--fade-back-color);
background-image: var(--trihlight-gradient);
background-size: 200% 100%;
background-position: 0% 100%;
transition: background-position 0.5s ease;
cursor: pointer;
color: var(--base-back-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
&:hover {
background-position: 100% 100%;
}
}
}
}
.top-box-features {
width: 100%;
margin-top: 30px;
z-index: 10;
position: relative;
&>ul {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: row;
column-gap: 15px;
height: 60px;
&>li.item {
flex: 1 1 33.33%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: var(--box-color);
border-radius: var(--box-radius);
border: 2px solid var(--base-back-color);
box-sizing: border-box;
color: var(--fade2-font-color);
&>.icon {
flex: 0 0 60px;
width: 60px;
text-align: center;
}
&>.text {
flex: 1 1 auto;
font-size: 0.9em;
}
}
}
}
.ban-box {
display: flex;
flex-direction: row;
margin: var(--section-gap) auto;
column-gap: 15px;
max-width: 100%;
width: min(1500px, calc(100% - 60px));
box-sizing: border-box;
margin-top: 30px;
&>.ban-box-categories {
background-color: var(--box-color);
height: 100%;
border-radius: var(--box-radius);
flex: 0 0 20%;
aspect-ratio: 5/8;
& .list {
display: grid;
height: 100%;
padding: 10px 0;
box-sizing: border-box;
position: relative;
z-index: 1100;
&>.item {
box-sizing: border-box;
column-gap: 10px;
color: var(--fade-font-color);
border-top: 1px solid var(--base-back-color);
margin-top: -1px;
z-index: 1200;
& .list {
position: absolute;
top: 0;
left: 90%;
bottom: 0;
width: 100%;
display: none;
background-color: var(--box-color);
border-radius: 0 10px 10px 0;
aspect-ratio: 5/8;
height: 100%;
border-left: 2px solid var(--hlight-color);
z-index: 1210;
flex-direction: column;
&>.item {
min-height: 25px;
max-height: 35.15px;
flex: 0 1 35.15px;
}
}
&:hover {
z-index: 1220;
&>.list {
z-index: 1240;
display: flex;
&>.item {
z-index: 1260;
&:hover {
z-index: 1270;
&>.list {
z-index: 1280;
&>.item {
z-index: 1300;
}
}
}
}
}
}
&>a {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
padding: 0 10px;
width: 100%;
height: 100%;
box-sizing: border-box;
&>.icon {
width: 50px;
flex: 0 0 40px;
text-align: center;
font-size: 0.85em;
}
&>.text {
flex: 1 1 auto;
}
}
&:last-child {
border-bottom: 1px solid var(--base-back-color);
margin-bottom: -1px;
}
&:hover {
background-color: var(--hlight-color);
color: var(--base-back-color);
cursor: pointer;
border-color: var(--hlight-color);
&+.item {
border-top-color: var(--hlight-color);
}
}
}
}
}
&>.ban-box-banners {
background-color: var(--box-color);
height: 100%;
border-radius: var(--box-radius);
overflow: hidden;
flex: 1 1 auto;
position: relative;
aspect-ratio: 10/4;
&>.list {
width: 100%;
height: 100%;
&>.item {
width: 100%;
height: 100%;
translate: 100%;
transition: translate 0.5s ease;
position: absolute;
left: 0;
top: 0;
z-index: 50;
opacity: 0;
&>a,
&>a>img {
width: 100%;
height: 100%;
object-fit: cover;
}
&.active {
translate: 0;
z-index: 100;
opacity: 1;
}
&.fade {
translate: -100%;
z-index: 1;
opacity: 1;
}
}
}
}
&>.ban-box-side {
background-color: var(--box-color);
height: 100%;
border-radius: var(--box-radius);
overflow: hidden;
flex: 0 0 20%;
padding: 30px 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
aspect-ratio: 5/8;
&>form {
display: contents;
flex: 0 0 min-content;
}
&>form>h2 {
font-weight: bold;
font-size: 1.1em;
padding: 0 10px;
margin-bottom: 15px;
}
&>form>.in {
border-radius: var(--box-radius);
width: 100%;
height: 40px;
background-color: var(--base-back-color);
margin-top: 15px;
display: block;
position: relative;
border: 1px solid transparent;
transition: all 0.3s ease;
&:hover,
&:focus-within {
border-color: var(--hlight-color);
}
&>input {
width: 100%;
height: 100%;
border: 0;
outline: 0;
background: transparent;
padding: 5px 10px 0;
box-sizing: border-box;
font-size: 1em;
}
&>span {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: max-content;
padding: 0 10px;
opacity: 0.7;
pointer-events: none;
transition: all 0.3s ease;
}
&:has(input:focus-visible)>span,
&:has(input:not(:placeholder-shown))>span {
bottom: 30px;
font-size: 0.7em;
}
}
&>form>.forgot {
text-align: right;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
margin-top: 15px;
&>a {
font-size: 0.8em;
color: var(--hlight-color);
text-decoration: none;
transition: all 0.3s ease;
&:hover {
color: var(--hlight2-color);
}
}
}
&>.gap,
&>.split {
margin-top: 15px;
flex: 1 1 auto;
}
&>.btn {
flex: 0 0 40px;
}
& .btn {
border-radius: 5px;
background-color: var(--hlight-color);
opacity: 0.7;
transition: all 0.3s ease;
color: var(--base-back-color);
border: 0;
outline: none;
height: 30px;
width: 100%;
box-sizing: border-box;
margin-top: 25px;
text-align: center;
font-size: 0.9em;
&.register {
background-color: var(--accent-color);
height: 40px;
color: var(--base-font-color);
}
&>a {
color: var(--base-font-color);
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&:hover {
opacity: 1;
cursor: pointer;
}
}
}
}
.sec-box {
display: flex;
flex-direction: column;
margin: var(--section-gap) auto;
row-gap: var(--section-gap);
max-width: 100%;
width: min(1500px, calc(100% - 60px));
box-sizing: border-box;
&>.sec-box-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
column-gap: 30px;
row-gap: 30px;
width: 100%;
&>.sec-box-section {
flex: 1 1 auto;
display: flex;
flex-direction: column;
&>.head {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
flex: 0 0 max-content;
height: 24px;
&>.title {
font-weight: bold;
padding: 0 10px;
flex: 1 1 auto;
&.load {
height: 24px;
background-color: var(--fade-back-color);
border-radius: 10px;
width: 200px;
flex: 0 0 200px;
animation: var(--skeleton-anim);
pointer-events: none;
}
}
&>.more {
flex: 0 0 max-content;
font-size: 0.85em;
padding: 5px 7px;
background-color: #085795;
border-radius: 5px;
color: var(--fade-back-color);
opacity: 0.8;
transition: all 0.3s ease;
background-image: var(--hlight-gradient);
text-decoration: none;
box-sizing: border-box;
&.load {
height: 24px;
border-radius: 10px;
width: 100px;
flex: 0 0 100px;
animation: var(--skeleton-anim);
pointer-events: none;
}
&:hover {
opacity: 1;
cursor: pointer;
}
}
}
&>.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
column-gap: 15px;
grid-template-rows: 1fr 0 0 0 0 0;
row-gap: 2px;
flex: 1 1 auto;
}
}
}
}
.pod-box {
display: flex;
flex-direction: row;
margin: var(--section-gap) auto;
column-gap: 30px;
max-width: 100%;
width: min(1500px, calc(100% - 60px));
box-sizing: border-box;
&>.pod-box-bg {
display: none;
}
&>.pod-box-sidebar {
background-color: var(--box-color);
min-height: 400px;
border-radius: var(--box-radius);
overflow: hidden;
flex: 0 0 20%;
color: var(--fade-font-color);
padding: 10px 0 30px;
min-width: 300px;
& .filter-sec {
padding: 0;
width: 100%;
box-sizing: border-box;
&.self {
padding-bottom: 20px;
border-bottom: 20px solid #fafafa;
margin-bottom: 20px;
}
&>.slider {
&>.filter-inner-sec {
display: flex;
flex-direction: row;
align-items: center;
padding: 5px 15px;
column-gap: 15px;
width: 100%;
box-sizing: border-box;
&>label,
&>.label {
display: flex;
flex-direction: row;
align-items: center;
flex: 1 1 auto;
position: relative;
&>.wrap {
position: absolute;
left: 0;
right: 25px;
top: 0;
bottom: 0;
&.hidden {
display: none;
}
}
&>.icon {
flex: 0 0 25px;
background-color: var(--fade2-back-color);
border-radius: 0 10px 10px 0;
height: 30px;
line-height: 30px;
font-size: 0.85em;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 1px solid transparent;
box-sizing: border-box;
margin-left: -1px;
&:hover {
cursor: pointer;
color: var(--base-back-color);
background-color: rgb(233, 93, 93);
border-color: var(--hlight-color);
}
}
&>input {
flex: 1 1 auto;
height: 30px;
outline: none;
background-color: var(--base-back-color);
border: 1px solid transparent;
transition: all 0.3s ease;
box-sizing: border-box;
padding: 0 5px;
font-size: 1.02em;
text-align: center;
border-radius: 10px 0 0 10px;
flex: 1 1 auto;
&:hover,
&:active,
&:focus {
border-color: var(--hlight-color);
}
}
}
}
}
&>.filter-elm {
margin-top: 15px;
width: 100%;
box-sizing: border-box;
& .clear {
margin-top: 15px;
display: flex;
flex-direction: row;
align-items: center;
padding: 5px 15px;
column-gap: 15px;
width: 100%;
box-sizing: border-box;
cursor: pointer;
transition: all 0.3s ease;
&>* {
opacity: 0.7;
transition: all 0.3s ease;
}
&>.text {
flex: 1 1 auto;
}
&>.icon {
display: flex;
flex-direction: row;
align-items: center;
font-size: 0.85em;
}
&:hover {
color: var(--base-back-color);
background-color: rgb(233, 93, 93);
border-color: var(--hlight-color);
&>* {
opacity: 1;
}
}
}
&.collp {
&.collapsed {
&+.filter-elm {
margin-top: 0;
}
&>.title {
&>.arrow {
transform: rotate(-90deg);
}
}
&>.filter-inner-sec {
height: 0;
overflow: hidden;
}
}
}
&>.title {
font-weight: bold;
padding: 7px 15px;
font-size: 0.9em;
display: flex;
flex-direction: row;
align-items: center;
&>.text {
flex: 1 1 auto;
}
&>.arrow {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
padding: 2px;
}
&:hover {
cursor: pointer;
&>.arrow {
background-color: var(--fade2-back-color);
border-radius: 5px;
}
}
}
}
& .filter-inner-sec {
height: min-content;
min-width: 0;
&>.filter-inner-elm {
&>.filter-inner-sec>.filter-inner-elm {
&>label,
&>.label {
padding-left: 30px;
position: relative;
&::before {
content: "•";
position: absolute;
left: 15px;
font-weight: bold;
opacity: 0.8;
font-size: 0.9em;
}
}
&>.filter-inner-sec>.filter-inner-elm {
&>label,
&>.label {
padding-left: 45px;
&::before {
content: "•";
position: absolute;
left: 30px;
font-weight: bold;
opacity: 0.8;
font-size: 0.9em;
}
}
}
}
&>label,
&>.label {
display: flex;
flex-direction: row;
row-gap: 5px;
padding: 7px 15px 7px 13px;
border-left: 2px solid transparent;
column-gap: 5px;
transition: all 0.3s ease;
&:has(input:checked) {
border-left-color: var(--hlight-color);
color: var(--hlight-color);
}
&.catelm:has(input:checked) {
font-weight: bold;
}
&:hover {
background-color: var(--fade2-back-color);
cursor: pointer;
}
&>.count {
color: var(--fade2-font-color);
font-size: 0.95em;
flex: 1 1 auto;
}
&>.sel {
width: 16px;
height: 16px;
border: 1px solid var(--fade2-font-color);
border-radius: 4px;
margin-right: 5px;
box-sizing: border-box;
transition: all 0.3s ease;
&.hidden {
display: none;
}
&>input {
display: none;
}
&:has(input:checked) {
border: 8px solid var(--hlight-color);
}
}
}
}
}
}
}
&>.pod-box-content {
min-height: 400px;
border-radius: var(--box-radius);
flex: 1 1 auto;
overflow: hidden;
& .msg {
border-radius: 10px;
padding: 15px;
display: flex;
flex-direction: row;
column-gap: 10px;
background-color: #f33f3f;
text-align: center;
justify-content: flex-start;
color: #fafafa;
line-height: normal;
margin-bottom: 30px;
&.info {
background-color: #266fdd;
}
&>* {
display: flex;
flex-direction: row;
text-align: center;
}
}
&>.tophead {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
min-height: 50px;
padding: 0 15px;
font-size: 0.95em;
margin-left: -10px;
column-gap: 10px;
align-items: start;
&>.clearflt,
&>.listflt .filter-elm {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 5px;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid transparent;
transition: all 0.3s ease;
&>.icon {
font-size: 0.95em;
display: flex;
flex-direction: row;
align-items: center;
transition: all 0.3s ease;
}
&>.text {
white-space: nowrap;
text-overflow: ellipsis;
&>* {
display: inline;
&.key {
opacity: 0.7;
}
}
}
&:hover {
border-color: #cc1420;
cursor: context-menu;
&>.icon {
color: #cc1420;
}
}
}
&>.clearflt {
flex: 0 0 min-content;
background-color: var(--fade-back-color);
}
&>.listflt {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 10px;
flex-wrap: wrap;
}
}
&>.head {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 50px;
padding: 0 15px;
margin-bottom: 10px;
.sec {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 50px;
&>.results {
flex: 1 1 auto;
& b {
font-weight: bold;
}
}
.filter-show {
padding-right: 30px;
opacity: .8;
display: none !important;
&:hover {
cursor: pointer;
opacity: 1;
}
}
& .group {
flex: 0 0 min-content;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 10px;
&>.title {
font-weight: bold;
font-size: 0.9em;
color: var(--fade-font-color);
white-space: nowrap;
}
& .sel>select {
border-radius: 5px;
background-color: var(--fade-back-color);
color: var(--base-font-color);
border: 0;
outline: none;
box-sizing: border-box;
padding: 10px 15px;
font-size: 0.9em;
}
& .btn {
height: 30px;
width: 30px;
opacity: 0.7;
color: var(--fade-font-color);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
&:hover {
opacity: 1;
cursor: pointer;
}
&.is-active {
opacity: 1;
color: var(--hlight-color);
}
}
}
}
}
&>.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
column-gap: 15px;
row-gap: 15px;
justify-items: start;
&>.empty {
padding: 30px 15px 50px;
font-weight: bold;
font-size: .95em;
opacity: .8;
}
}
&>.foot {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 50px;
padding: 0 15px;
margin-top: 10px;
&>.pages {
flex: 1 1 auto;
}
&>.pagination {
display: flex;
flex-direction: row;
column-gap: 5px;
&>* {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
transition: all 0.3s ease;
box-sizing: border-box;
color: var(--fade2-font-color);
overflow: hidden;
box-sizing: border-box;
font-size: .95em;
&:has(> svg) {
padding: 4px;
opacity: .7;
}
&.cur {
background-color: var(--hlight-color);
color: #fafafa;
}
&.btn {
border: 1px solid var(--fade-back-color);
&:hover {
background-color: var(--fade-back-color);
cursor: pointer;
color: var(--base-font-color);
}
}
}
}
}
}
}
.prod {
transition: all 0.3s ease;
width: 100%;
overflow: hidden;
&.invis,
&.invis>* {
visibility: none !important;
opacity: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
&.load {
&>.wrap {
animation: var(--skeleton-anim);
min-height: 300px;
pointer-events: none;
}
}
&>.wrap {
display: flex;
flex-direction: column;
row-gap: 10px;
height: 100%;
border: 1px solid transparent;
overflow: hidden;
background-color: var(--box-color);
border-radius: var(--box-radius);
box-sizing: border-box;
&:hover {
border-color: var(--hlight-color);
}
&:has(>*>.thumb:hover),
&:has(>*>.content>.title:hover) {
cursor: pointer;
&>*>.content>.title:hover {
text-decoration: underline;
}
}
&>* {
display: flex;
flex-direction: column;
row-gap: 10px;
color: inherit;
text-decoration: none;
padding: 5px;
box-sizing: border-box;
align-items: flex-start;
height: 100%;
}
&>*>.thumb {
width: 100%;
border-radius: var(--box-radius);
overflow: hidden;
position: relative;
flex: 0 0 max-content;
&>.back {
width: 100%;
aspect-ratio: 1/1;
padding: 5px;
background-color: #ffffff;
box-sizing: border-box;
display: block;
text-decoration: none;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&>.actions {
position: absolute;
top: 5px;
right: 5px;
display: flex;
flex-direction: column;
row-gap: 5px;
&>* {
background-color: var(--box-color);
border-radius: 5px;
padding: 5px;
box-sizing: border-box;
width: 30px;
height: 30px;
color: var(--fade2-font-color);
transition: all 0.3s ease;
&:hover {
cursor: pointer;
background-color: var(--hlight-color);
color: #fafafa;
}
&>.icon,
&>.icon>svg {
width: 100%;
height: 100%;
}
}
}
}
&>*>.content {
display: flex;
flex-direction: column;
row-gap: 5px;
width: 100%;
font-size: 0.95em;
padding: 0 5px;
box-sizing: border-box;
padding-top: 5px;
padding-bottom: 5px;
height: 40%;
flex: 1 1 auto;
& .title {
font-weight: bold;
line-height: 1.2em;
min-height: 1.2em;
max-height: 3.6em;
overflow: hidden;
text-overflow: ellipsis;
color: var(--fade-font-color);
text-decoration: none;
color: inherit;
display: block;
}
& .sin {
font-size: 0.85em;
color: var(--fade2-font-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
& .available {
font-size: 0.85em;
font-weight: bold;
color: var(--fade2-font-color);
display: flex;
flex-direction: row;
column-gap: 5px;
align-items: center;
margin-top: 5px;
&>* {
line-height: 12px;
}
&>.icon {
width: 10px;
height: 10px;
border-radius: 50%;
opacity: 0.7;
border: 1px solid var(--base-back-color);
}
}
&>.spacer {
flex: 1 1;
}
& .bar {
display: flex;
flex-direction: row;
column-gap: 10px;
align-items: center;
margin-top: 5px;
&~.bar {
margin-top: -5px;
}
&>.price {
font-weight: bold;
color: #cc1420;
line-height: 17px;
font-size: 1.1em;
transform-origin: center left;
margin-right: 5px;
}
&>.striken {
text-decoration: line-through;
opacity: 0.7;
line-height: 17px;
color: var(--fade2-font-color);
}
&>.msrp {
font-size: .85em;
opacity: 0.65;
line-height: 17px;
color: var(--fade2-font-color);
}
&>.spacer {
flex: 1 1;
}
&>.qtt {
display: flex;
flex-direction: row;
& input {
width: 80px;
height: 30px;
border-radius: 10px;
border: 1px solid var(--fade2-back-color);
background-color: var(--base-back-color);
padding: 0 10px;
box-sizing: border-box;
text-align: center;
font-weight: bold;
&:hover {
border-color: var(--hlight-color);
}
}
& .icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 5px;
color: var(--fade2-font-color);
&:hover {
cursor: pointer;
color: #e34545;
}
}
}
}
&>.add-cart {
margin-top: 10px;
height: 35px;
min-width: 100%;
max-width: 100%;
box-sizing: border-box;
color: var(--fade-font-color);
transition: all 0.3s ease;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: var(--fade-back-color);
border-radius: 5px;
border: 1px solid #157147;
transition: all 0.3s ease;
overflow: hidden;
flex: 0 0 35px;
&.incart {
color: var(--base-back-color);
background-color: #157147;
&>.active {
display: contents;
}
&>.notactive {
display: none;
}
}
&>.active {
display: none;
& input {
height: 100%;
border: none;
outline: none;
background-color: var(--base-back-color);
width: 100%;
text-align: center;
font-weight: bold;
}
& .icon {
font-size: 0.85em;
padding: 0 4px 0 5px;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
&:has(> .active .icon:hover) {
background-color: #e34545;
border-color: #e34545;
}
&:hover>.notactive>.extra {
display: block;
}
&>.notactive {
display: contents;
background-color: #157147;
&>.extra {
display: block;
line-height: 1em;
font-size: 0.85em;
width: 80px;
margin-left: 5px;
}
& .icon {
font-size: 0.8em;
padding: 0 5px;
}
}
&:hover {
color: var(--base-back-color);
background-color: #157147;
cursor: pointer;
}
}
}
}
}
.layrow {
& .empty {
padding: 20px 15px;
font-weight: bold;
opacity: .5;
}
&>.prod {
width: 100%;
max-width: 100%;
position: relative;
&.incart.load>.wrap {
min-height: 150px;
}
&>.wrap {
&>* {
width: 100%;
max-width: 100%;
flex-direction: row;
column-gap: 10px;
align-items: flex-start;
padding-top: 10px;
padding-bottom: 10px;
}
&>*>.thumb {
height: 120px;
width: 120px;
flex: 0 0 120px;
}
&.incart>*>.thumb {
width: 70px;
height: 70px;
flex: 0 0 70px;
}
&>*>.content {
max-height: min-content;
margin: auto 0;
flex: 1 1;
justify-content: center;
aspect-ratio: auto;
height: auto;
}
& .buthover {
position: absolute;
top: 15px;
right: 15px;
padding: 5px;
background-color: var(--base-back-color);
border-radius: 5px;
font-size: .9em;
height: 20px;
width: 20px;
transition: all 0.3s ease;
& svg {
width: 100%;
height: 100%;
}
&:hover {
cursor: pointer;
background-color: #e34545;
color: var(--base-back-color);
}
}
& .sin {
&>b {
font-weight: bold;
}
}
}
}
}
.split,
.gap {
width: 100%;
position: relative;
flex: 1 1 auto;
&.split::after {
content: "";
position: absolute;
height: 2px;
background-color: #000;
width: 100%;
opacity: 0.05;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
display: none;
background-color: var(--box-color);
border-radius: var(--box-radius);
border: 2px solid var(--base-back-color);
box-sizing: border-box;
color: var(--fade2-font-color);
width: min(250px, 300px);
height: max-content;
padding: 15px 15px;
&.nopad {
padding: 0;
}
&.show-modal {
display: flex;
}
}
.sign-sec.self-check {
width: 700px;
max-width: 90%;
margin: 30px auto;
background-color: var(--fade-back-color);
padding: 30px 30px;
border-radius: var(--box-radius);
box-sizing: border-box;
}
.sign-sec>form>.ingrp {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
margin-bottom: 15px;
column-gap: 15px;
row-gap: 15px;
box-sizing: border-box;
}
.sign-sec>form>.gap {
height: 30px;
}
.sign-sec>form>.ingrp>.in,
.sign-sec>form>.in,
form .in {
border-radius: var(--box-radius);
width: 100%;
height: 40px;
background-color: var(--base-back-color);
display: block;
position: relative;
border: 1px solid transparent;
transition: all 0.3s ease;
box-sizing: border-box;
&:has(input[type="file"]) {
height: 60px;
padding: 10px 0;
& span {
bottom: 50px !important;
}
}
&:has(select) {
overflow: hidden;
& select {
width: 100%;
height: 100%;
border: 0;
padding: 0 10px;
box-sizing: border-box;
font-size: 1em;
background-color: var(--base-back-color);
}
}
&:hover,
&:focus-within {
border-color: var(--hlight-color);
}
&>input {
width: 100%;
height: 100%;
border: 0;
outline: 0;
background: transparent;
padding: 5px 10px 0;
box-sizing: border-box;
font-size: 1em;
}
&>span {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: max-content;
padding: 0 10px;
opacity: 0.7;
pointer-events: none;
transition: all 0.3s ease;
}
&:has(input:focus-visible)>span,
&:has(input:valid)>span,
&:has(select)>span,
&:has(input[type="file"])>span {
bottom: 30px;
font-size: 0.7em;
}
}
.sign-sec>form>.forgot {
text-align: right;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
margin-top: 15px;
&>a {
font-size: 0.8em;
color: var(--hlight-color);
text-decoration: none;
transition: all 0.3s ease;
&:hover {
color: var(--hlight2-color);
}
}
}
.sign-sec>.gap,
.sign-sec>.split {
margin-top: 15px;
flex: 1 1 auto;
}
.sign-sec .btn {
flex: 0 0 40px;
}
.sign-sec .btn {
border-radius: 5px;
background-color: var(--hlight-color);
opacity: 0.7;
transition: all 0.3s ease;
color: var(--base-back-color);
border: 0;
outline: none;
height: 30px;
width: 100%;
box-sizing: border-box;
margin-top: 25px;
text-align: center;
font-size: 0.9em;
&.register {
background-color: var(--accent-color);
height: 40px;
color: var(--base-font-color);
}
&>a {
color: var(--base-font-color);
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&:hover {
opacity: 1;
cursor: pointer;
}
}
form {
& label:has(+ inerr),
& label:has(> inerr) {
margin-bottom: 5px;
}
& label:has(+ inerr),
& label:has(> inerr),
& label:has(~ inerr.inerr--) {
border-color: #e34545 !important;
}
& inerr {
font-size: 0.75em;
color: #e34545;
padding: 0 10px;
box-sizing: border-box;
}
}
.container {
max-width: 100%;
width: min(1500px, calc(100% - 60px));
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
.info-row {
margin: 15px auto;
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
background-color: rgba(245, 168, 40, 0.7);
border-radius: var(--box-radius);
padding: 15px 15px;
&+.ban-box {
margin-top: 15px;
}
}
.row {
padding: 30px 0;
display: grid;
column-gap: 30px;
row-gap: 30px;
box-sizing: border-box;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
&.row-mid {
align-items: center;
justify-content: center;
}
}
.flex {
display: flex;
flex-direction: row;
padding: 30px 0;
column-gap: 30px;
row-gap: 30px;
box-sizing: border-box;
&.flex-mid {
align-items: center;
justify-content: center;
}
}
.cmx {
flex: 1 1 auto;
box-sizing: border-box;
}
.cmn {
flex: 1 1 min-content;
}
.modnotif {
position: fixed;
pointer-events: none;
bottom: 20px;
left: 0;
right: 0;
margin: 0 auto;
width: 400px;
max-width: 80vw;
z-index: 5000;
&>* {
pointer-events: all;
height: 70px;
width: 100%;
background-color: #d6e2f1;
border: 1px solid var(--fade2-back-color);
border-radius: var(--box-radius);
font-size: 0.9em;
padding: 0 15px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
translate: 0 -25px;
transition: all 0.3s ease;
scale: 0.75;
opacity: 0;
z-index: 2;
&:first-child {
translate: 0;
scale: 1;
z-index: 5;
opacity: 1;
}
&:nth-child(2) {
translate: 0 -10px;
scale: 0.95;
z-index: 4;
opacity: 1;
}
&:nth-child(3) {
translate: 0 -20px;
scale: 0.9;
z-index: 3;
opacity: 1;
}
&.fade {
translate: 0 25px;
scale: 0.75;
opacity: 0;
}
&>.msg {
&>.txt {
font-weight: bold;
font-size: 0.95em;
line-height: 15px;
max-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
&>.time {
font-size: 0.8em;
opacity: 0.85;
margin-top: 7px;
}
}
&>button {
padding: 7px 5px;
border: 1px solid var(--fade-font-color);
border-radius: 7px;
background: var(--fade-font-color);
color: var(--fade-back-color);
transition: all 0.3s ease;
&:hover {
cursor: pointer;
border-color: var(--hlight-color);
background-color: var(--hlight-color);
}
}
}
&:hover>* {
&:first-child,
&:nth-child(2),
&:nth-child(3) {
scale: 1;
}
&:first-child {
translate: 0 0;
}
&:nth-child(2) {
translate: 0 -80px;
}
&:nth-child(3) {
translate: 0 -160px;
}
}
}
.prod-list {
display: flex;
flex-direction: column;
row-gap: 15px;
padding-bottom: 30px;
}
.modcart {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 500px;
translate: 500px 0;
border-left: 1px solid var(--fade-back-color);
box-sizing: border-box;
height: 100vh;
transition: all 0.5s ease;
z-index: 500;
&.show {
translate: 0 0;
}
&>.cartbox {
background-color: var(--base-back-color);
margin: 0 0 0 auto;
padding: 30px 15px;
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 80px;
display: flex;
flex-direction: column;
height: 100%;
& .msg {
padding: 10px 15px;
border: 1px solid #e34545;
color: #e34545;
border-radius: 10px;
font-size: 0.9em;
font-weight: bold;
margin-bottom: 15px;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 10px;
line-height: 1.3em;
&.error {
border-color: #e34545;
color: #e34545;
}
&.info {
border-color: #0a5896;
color: #0a5896;
}
&.success {
border-color: #1ca823;
color: #1ca823;
}
&>.icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 0 0 20px;
}
&>.text {
flex: 1 1 auto;
}
}
&>.content {
flex: 1 1 auto;
overflow-y: scroll;
&>.head {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
&>.title {
font-size: 1.3em;
font-weight: bold;
padding: 0 15px;
color: var(--fade-font-color);
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
flex: 1 1 auto;
&>.icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
box-sizing: border-box;
border-radius: 50%;
transition: all 0.3s ease;
padding: 3px;
&:hover {
background-color: var(--fade2-back-color);
cursor: pointer;
color: var(--hlight-color);
}
}
}
&>.actions {
display: flex;
flex-direction: row;
flex: 0 0 max-content;
align-items: center;
&>* {
font-size: .9em;
border-radius: 10px;
background-color: var(--fade-back-color);
height: 25px;
line-height: 25px;
padding: 0 10px;
transition: all .3s ease;
&:hover {
background-color: rgb(233, 93, 93);
color: #fafafa;
cursor: pointer;
}
}
}
}
& .chained {
display: flex;
flex-direction: column;
row-gap: 15px;
& .resumo {
padding: 0 15px;
line-height: 1.3em;
& .total {
font-weight: bold;
font-size: 1.1em;
line-height: 1.5em;
}
}
& .obs {
width: 100%;
& textarea {
width: 100%;
max-width: 100%;
min-width: 100%;
min-height: 100px;
max-height: 500px;
border-radius: 10px;
border: 1px solid var(--fade2-back-color);
box-sizing: border-box;
padding: 15px;
outline: none;
&:focus {
border-color: #075694;
}
}
}
& .hidden {
display: none;
}
&>.delivery>.sel,
&>.home>.sel,
&>.store>.sel,
&>.billing>.sel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
column-gap: 15px;
row-gap: 15px;
&.xlean>.ingrp {
padding: 0;
&>.in {
height: 50px;
border-color: var(--accent-color);
&:hover,
&:focus-within {
border-color: var(--hlight-color);
}
}
}
&>* {
background-color: var(--fade-back-color);
border-radius: 10px;
padding: 15px;
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
border: 1px solid transparent;
box-sizing: border-box;
transition: all 0.3s ease;
&>.icon {
font-size: 0.8em;
}
}
}
&>.home,
&>.store,
&>.billing,
&>.pay {
display: none;
}
&>.home>.btn {
background-color: var(--fade-back-color);
border-radius: 10px;
padding: 15px;
border: none;
width: 100%;
opacity: 0.7;
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 1 solid transparent;
box-sizing: border-box;
margin-top: 5px;
&:hover {
opacity: 1;
cursor: pointer;
border-color: var(--hlight-color);
}
&>.icon {
font-size: 0.8em;
display: flex;
flex-direction: row;
align-items: center;
}
}
&>.delivery>.sel>*,
&>.home>.sel>*,
&>.store>.sel>* {
&:hover {
border-color: var(--hlight-color);
cursor: pointer;
}
&:has(input:checked) {
background-color: var(--hlight-color);
border-color: var(--hlight-color);
color: #fafafa;
}
}
&>.home>.sel,
&>.store>.sel,
&>.billing>.sel {
grid-template-columns: 1fr;
row-gap: 5px;
&>* {
flex-direction: column;
align-items: flex-start;
row-gap: 5px;
& .title {
font-weight: bold;
}
}
}
& h3 {
font-size: 1.1em;
font-weight: bold;
margin-top: 15px;
margin-bottom: 15px;
padding: 0 15px;
color: var(--fade-font-color);
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
}
&>.pay {
width: 100%;
height: 40px;
margin-top: 30px;
&>.btn {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 0;
outline: none;
background-color: var(--accent2-color);
border-radius: 10px;
color: #222222;
font-weight: bold;
font-size: 0.95em;
transition: all 0.3s ease;
&:hover {
cursor: pointer;
background-color: var(--accent-color);
}
}
}
}
}
.ingrp.add>.in {
height: 50px;
border-color: var(--fade2-back-color);
margin-bottom: 10px;
& select {
background-color: var(--base-back-color);
}
}
.btn.add {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 0;
outline: none;
background-color: var(--fade-back-color);
border-radius: 10px;
color: #222222;
font-size: 0.9em;
transition: all 0.3s ease;
&:hover {
cursor: pointer;
background-color: var(--fade2-back-color);
}
&>.icon {
display: flex;
flex-direction: row;
align-items: center;
font-size: 0.8em;
margin-right: 10px;
}
}
&>.toggle {
position: fixed;
right: 100%;
top: 70px;
margin-right: 10px;
background-color: var(--accent-color);
border-radius: 10px;
width: 40px;
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: #222;
transition: all 0.3s ease;
opacity: 0.8;
font-size: 0.9em;
&:hover {
cursor: pointer;
opacity: 1;
}
&>.number {
position: absolute;
padding: 5px;
background-color: var(--fade-back-color);
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 5px;
bottom: -6px;
right: -6px;
text-align: center;
font-weight: bold;
font-size: 0.9em;
}
}
&>.botbar {
flex: 0 0 max-content;
display: flex;
flex-direction: column;
row-gap: 15px;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 50px;
background: linear-gradient(#fff0, #fff);
pointer-events: none;
}
&>.details {
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 0 15px 0 170px;
&>* {
display: flex;
flex-direction: row;
&>.title {
flex: 1 1 auto;
color: var(--fade2-font-color);
&.err {
color: #e34545;
font-size: 0.85em;
font-weight: bold;
}
}
&>.text {
font-weight: bold;
flex: 0 0 max-content;
}
}
}
&>.total {
text-align: right;
padding: 0 15px;
&>.text {
flex: 1 1 max-content;
}
&>.price {
font-size: 1.3em;
font-weight: bold;
}
}
&>.actions {
column-gap: 10px;
display: grid;
grid-template-columns: 1fr;
row-gap: 10px;
align-items: center;
/*&>*:last-child:nth-child(odd) {
translate: calc(50% + 5px) 0;
}*/
&>.elm>.btn {
width: 100%;
}
&>.elm {
position: relative;
&>.ext,
&>*>.ext {
position: absolute;
bottom: 100%;
margin-bottom: 10px;
border: 1px solid transparent;
left: 0;
right: 0;
width: 100%;
height: 30px;
transform: translateZ(-10px);
box-sizing: border-box;
border-radius: var(--box-radius);
&>.dtls {
position: absolute;
bottom: 100%;
margin-bottom: 10px;
text-align: left;
font-size: 0.85em;
width: 100%;
display: none;
&>.item {
display: flex;
flex-direction: row;
&>.label {
flex: 1 1 auto;
}
&>.value {
flex: 0 0 max-content;
font-weight: bold;
}
}
}
&:hover {
border-color: var(--hlight-color);
&>.dtls {
display: block;
}
}
&>.line {
width: 100%;
height: 100%;
background-color: var(--fade-back-color);
flex: 0 0 10px;
position: relative;
overflow: hidden;
border-radius: var(--box-radius);
&>.inline {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 100%;
background-color: #ff661b;
overflow: hidden;
z-index: 5;
opacity: 0.99;
&.in2 {
background-color: var(--hlight2-color);
z-index: 3;
opacity: 0.99;
}
&>.value {
color: #fafafa;
}
}
& .value {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: var(--fade-font-color);
font-weight: bold;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
&>.btn,
&>.elm>.btn {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: var(--box-radius);
border: 1px solid transparent;
color: var(--fade-font-color);
transition: all 0.3s ease;
height: 40px;
background-color: var(--fade-back-color);
padding: 0 10px;
box-sizing: border-box;
position: relative;
transform-style: preserve-3d;
&.disabled {
opacity: 0.5;
&:hover {
cursor: not-allowed;
}
}
&>.icon {
width: 30px;
flex: 0 0 30px;
height: 30px;
&>img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&>.label {
flex: 1 1 auto;
font-size: 1.1em;
}
&:hover {
cursor: pointer;
border-color: var(--hlight-color);
}
}
}
}
}
}
.register-sec {
width: 1200px;
max-width: 90%;
margin: 30px auto;
background-color: var(--fade-back-color);
padding: 30px 30px;
border-radius: var(--box-radius);
box-sizing: border-box;
&.register-sec>form>.in {
width: 45%;
display: inline-block;
}
}
.base {
display: flex;
flex-direction: row;
width: 100%;
box-sizing: border-box;
&>.content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: auto;
order: 1;
container-type: inline-size;
container-name: content;
box-sizing: border-box;
min-height: calc(100vh - 60px);
&>page {
flex: 1 1 auto;
}
}
&>.cart {
order: 2;
position: relative;
z-index: 500;
translate: 0 0;
transition: all 0.5s ease;
overflow: hidden;
height: 100vh;
translate: 500px 0;
width: 0;
flex: 0 0 0;
pointer-events: none;
z-index: -1;
position: relative;
box-sizing: border-box;
&.show {
flex: 0 0 500px;
width: 500px;
translate: 0 0;
}
}
}
.accpage {
display: grid;
grid-template-columns: 1fr 4fr;
padding: 30px 0;
column-gap: 30px;
box-sizing: border-box;
& .actions {
display: flex;
flex-direction: row;
column-gap: 10px;
align-items: center;
justify-content: flex-end;
height: 60px;
padding: 0 15px;
box-sizing: border-box;
margin-bottom: 15px;
&>* {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
background-color: var(--fade2-back-color);
border-radius: var(--box-radius);
padding: 0 15px 0 10px;
box-sizing: border-box;
transition: all 0.3s ease;
text-decoration: none;
color: var(--fade-font-color);
height: 35px;
&>.icon {
flex: 0 0 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 0.8em;
}
&>.text {
flex: 1 1 auto;
white-space: nowrap;
}
&:hover {
cursor: pointer;
background-color: var(--hlight-color);
color: #fafafa;
}
}
}
&>.side {
background-color: var(--fade-back-color);
padding: 15px 0;
border-radius: var(--box-radius);
color: var(--fade-font-color);
&>.grp {
padding-bottom: 10px;
&:has(+ .grp) {
border-bottom: 1px solid var(--fade2-back-color);
}
&+.grp {
margin-top: 10px;
}
&>.item {
display: contents;
&>a {
padding: 0 15px;
display: flex;
flex-direction: row;
height: 40px;
align-items: center;
transition: all 0.3s ease;
text-decoration: none;
color: var(--fade-font-color);
&>.icon {
width: 30px;
flex: 0 0 30px;
height: 30px;
display: flex;
flex-direction: row;
align-items: center;
font-size: 0.9em;
}
&>.text {
flex: 1 1 auto;
}
&:hover {
cursor: pointer;
background-color: var(--fade2-back-color);
}
}
&.active {
&>a {
background-color: var(--hlight-color);
color: #fafafa;
}
}
}
}
}
& .plafond {
&>.data {
display: flex;
flex-direction: row;
color: var(--fade-font-color);
line-height: 25px;
&>.title {
flex: 1 1 auto;
}
&>.value {
flex: 0 0 max-content;
font-weight: bold;
}
}
&>.line {
background-color: var(--base-back-color);
width: 100%;
height: 20px;
border-radius: var(--box-radius);
margin-top: 10px;
display: flex;
flex-direction: row;
color: var(--fade-font-color);
overflow: hidden;
&>.inline {
height: 100%;
background-color: #ff661b;
}
}
}
& .curpay,
& .plafond {
&>.title {
font-weight: bold;
line-height: 25px;
margin-bottom: 5px;
}
}
& .curpay {
display: flex;
flex-direction: column;
row-gap: 10px;
color: var(--fade-font-color);
&>.item {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
column-gap: 10px;
row-gap: 10px;
padding: 7px 10px;
margin: 0 -10px;
border: 1px solid #22222222;
border-radius: 5px;
background-color: #22222205;
&>.data {
display: flex;
flex-direction: row;
column-gap: 5px;
&>.value {
font-weight: bold;
}
}
}
}
& .info {
display: flex;
flex-direction: column;
row-gap: 15px;
color: var(--fade-font-color);
&>.title {
font-weight: bold;
line-height: 25px;
}
&>.data {
display: flex;
flex-direction: row;
column-gap: 5px;
&>.value {
font-weight: bold;
& a {
text-decoration: none;
color: var(--hlight-color);
&:hover {
text-decoration: underline;
}
}
}
}
}
}
page>.main {
margin-top: 30px;
}
.main {
display: flex;
flex-direction: column;
row-gap: 15px;
margin-bottom: 30px;
& .lin {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
column-gap: 15px;
row-gap: 15px;
justify-items: start;
&.sec-box {
margin: 10px 0;
}
&.switch {
&>.box {
display: flex;
flex-direction: row;
align-items: center;
padding: 15px 30px;
&.hidden {
display: none;
}
&>.title {
flex: 1 1 auto;
padding: 0;
&>input {
background-color: var(--base-back-color);
border: 0;
outline: 0;
font-weight: bold;
font-size: 1em;
height: 30px;
width: 100%;
box-sizing: border-box;
margin-left: -15px;
padding-left: 15px;
border-radius: 5px;
}
}
&>.actbox {
flex: 0 0 max-content;
&>* {
height: 20px;
width: 20px;
background-color: var(--base-back-color);
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
padding: 5px;
transition: all 0.3s ease;
&:hover {
background-color: #075694;
color: #fafafa;
cursor: pointer;
}
}
}
}
}
}
& .col {
width: 100%;
display: grid;
grid-template-columns: 1fr;
column-gap: 15px;
row-gap: 15px;
justify-items: start;
&.sec-box {
margin: 10px 0;
}
}
& .box {
background-color: var(--fade-back-color);
padding: 30px;
border-radius: var(--box-radius);
width: 100%;
box-sizing: border-box;
&.lean {
padding: 30px 0;
overflow: hidden;
}
&.xlean {
padding: 0;
overflow: hidden;
}
&.frow,
& .frow {
display: flex;
flex-direction: row;
column-gap: 15px;
}
&.fcol,
& .fcol {
display: flex;
flex-direction: column;
row-gap: 15px;
}
& .strow {
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
min-height: 30px;
padding: 10px 0;
box-sizing: border-box;
&>.title {
flex: 0 0 30%;
font-weight: bold;
width: 30%;
}
&>.value {
flex: 1 1;
}
}
&.hrow {
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
box-sizing: border-box;
width: 100%;
&>.title {
flex: 1 1 auto;
}
}
& .wrap {
width: 120px;
border: 1px solid var(--fade2-back-color);
border-radius: 5px;
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
background-color: #ecaeae;
border-color: #e34545;
padding: 0 15px;
box-sizing: border-box;
&:has(.circle.green) {
background-color: #b1ebb1;
border-color: #27c72f;
}
& .circle {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #e34545;
margin-right: 10px;
border: 1px solid #fafafa55;
&.green {
background-color: #27c72f;
}
}
}
}
}
.backbox {
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
box-sizing: border-box;
padding: 15px 0;
text-decoration: none;
font-weight: bold;
opacity: .9;
color: var(--fade2-font-color);
&>.icon {
height: 20px;
}
&:hover {
color: var(--hlight-color);
}
}
.prodpage {
& .prodimg {
padding: 5px !important;
box-sizing: border-box;
& .thumb {
width: 100%;
aspect-ratio: 1;
box-sizing: border-box;
border-radius: 10px 10px 0 0;
overflow: hidden;
margin-bottom: 2px;
padding: 5px;
background-color: #fff;
display: block;
&>img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
& .imglist {
display: flex;
flex-direction: row;
column-gap: 2px;
overflow: auto hidden;
border-radius: 0 0 10px 10px;
height: 60px;
width: 100%;
position: relative;
&>* {
width: 60px;
width: 60px;
flex: 0 0 60px;
aspect-ratio: 1;
display: inline-block;
padding: 5px;
box-sizing: border-box;
border: 1px solid transparent;
background-color: #fff;
&:first-child {
border-radius: 0 0 0 10px;
}
&:last-child {
border-radius: 0 0 10px 0;
}
&:first-child:last-child {
border-radius: 0 0 10px 10px;
}
&>img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover {
cursor: pointer;
border-color: var(--hlight-color);
}
}
}
}
& .info {
display: flex;
flex-direction: column;
.cats {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 15px 15px 0;
&>* {
height: 20px;
text-decoration: none;
color: var(--fade2-font-color);
font-weight: bold;
opacity: .8;
&:has(+ *)::after {
content: "•";
margin: 0 10px;
opacity: 0.6;
}
&:hover {
cursor: pointer;
color: var(--hlight-color);
opacity: 1;
}
}
}
.brand {
margin-bottom: 5px;
font-weight: bold;
font-size: 0.95em;
color: var(--fade2-font-color);
display: block;
text-decoration: none;
&:hover {
color: var(--hlight-color);
cursor: pointer;
text-decoration: underline;
}
}
.title {
margin-top: 5px;
margin-bottom: 5px;
font-size: 1.2em;
color: var(--fade1-font-color);
font-weight: bold;
}
.sin {
margin-top: 5px;
margin-bottom: 10px;
color: var(--fade2-font-color);
font-size: 0.95em;
&:has(+ .sin) {
margin-bottom: 0;
}
&>b {
font-weight: bold;
}
}
.available {
margin-top: 5px;
margin-bottom: 10px;
font-size: 0.95em;
font-weight: bold;
color: var(--fade2-font-color);
display: flex;
flex-direction: row;
column-gap: 5px;
align-items: center;
&>* {
line-height: 10px;
}
&>.icon {
width: 10px;
height: 10px;
border-radius: 50%;
opacity: 0.7;
border: 1px solid var(--base-back-color);
}
}
.bar {
display: flex;
flex-direction: row;
column-gap: 5px;
align-items: center;
font-size: 1.2em;
&>.price {
font-weight: bold;
color: #cc1420;
line-height: 17px;
font-size: 1.1em;
transform-origin: center left;
margin-right: 5px;
}
&>.striken {
text-decoration: line-through;
opacity: 0.7;
line-height: 17px;
color: var(--fade2-font-color);
}
&>.msrp {
font-size: .8em;
margin-left: 5px;
opacity: 0.8;
line-height: 17px;
color: var(--fade2-font-color);
}
&>.spacer {
flex: 1 1;
}
&>.qtt input {
width: 80px;
height: 30px;
border-radius: 10px;
border: 1px solid var(--fade2-back-color);
background-color: var(--base-back-color);
padding: 0 10px;
box-sizing: border-box;
text-align: center;
font-weight: bold;
&:hover {
border-color: var(--hlight-color);
}
}
}
.description {
margin: 15px 0;
color: var(--fade2-font-color);
font-size: 1em;
line-height: 1.2em;
}
.actions {
display: flex;
flex-direction: row;
column-gap: 10px;
justify-content: flex-end;
}
.actbox {
height: 40px;
border-radius: 10px;
border: 1px solid var(--fade2-back-color);
background-color: var(--base-back-color);
box-sizing: border-box;
text-align: center;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition: border 0.3s ease;
&.addcart {
background-color: #198754;
border-color: #198754;
text-transform: capitalize;
color: #222222;
padding: 0 12px;
border-width: 1px;
column-gap: 5px;
cursor: pointer;
color: white;
border-radius: 5px;
transition: all 0.3s ease;
&:hover {
background-color: #0d6e2d;
border-color: #0d6e2d;
cursor: pointer;
}
}
&.addlist {
background-color: var(--box-color);
border-radius: 5px;
padding: 5px;
box-sizing: border-box;
width: 40px;
height: 40px;
color: var(--fade2-font-color);
transition: all 0.3s ease;
&:hover {
background-color: #075694;
border-color: #075694;
cursor: pointer;
color: #fafafa;
}
}
&.ioncart {
padding: 0;
overflow: hidden;
width: 150px;
display: none;
& input {
height: 40px;
border: 0;
box-sizing: border-box;
outline: none;
text-align: center;
width: 100%;
font-size: 1.05em;
font-weight: bold;
}
&>.qtt {
flex: 1 1 auto;
}
& .icon {
height: 40px;
width: 30px;
transition: all 0.3s ease;
flex: 0 0 30px;
&:hover {
background-color: #e34545;
color: #fafafa;
cursor: pointer;
}
}
}
& .icon {
font-size: 0.9em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
&:hover {
border-color: var(--hlight-color);
}
}
}
& .specs {
display: flex;
flex-direction: column;
&>.grp:not(:last-child) {
border-bottom: 1px solid var(--fade-back-color);
}
& .head {
display: flex;
flex-direction: row;
column-gap: 10px;
height: 40px;
align-items: center;
padding: 0 30px;
background-color: var(--fade2-back-color);
&>.title {
font-weight: bold;
flex: 1 1 auto;
}
&>.icon {
font-size: 0.9em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
&:hover {
cursor: pointer;
}
}
& .list {
display: flex;
flex-direction: column;
padding: 15px 0;
& .item {
display: flex;
flex-direction: row;
column-gap: 10px;
align-items: center;
padding: 5px 30px;
&>.title {
width: min(300px, 40%);
color: var(--fade1-font-color);
}
&>.value {
color: var(--fade2-font-color);
}
&:hover {
background-color: #22222210;
}
}
}
& .collapsed {
& .head {
&>.icon {
transform: rotate(-90deg);
}
}
& .list {
display: none;
}
}
}
& .description {
margin: 15px 0;
color: var(--fade2-font-color);
font-size: 1em;
line-height: 1.2em;
&.spec {
width: 100%;
& table {
width: 100%;
margin-bottom: 15px;
border: 1px solid var(--fade2-back-color);
}
& tr {
width: 100%;
line-height: 25px;
border-radius: 5px;
box-sizing: border-box;
}
& th {
font-weight: bold;
flex: 0 0 min(50%, 300px);
text-align: left;
border: 1px solid var(--fade2-back-color);
padding: 5px 10px;
background-color: var(--base-back-color);
}
& td {
flex: 1 1 auto;
text-align: left;
border: 1px solid var(--fade2-back-color);
padding: 5px 10px;
background-color: var(--base-back-color);
}
}
& p,
& ul,
& ol {
margin: 20px 0;
}
ul,
ol {
padding-left: 30px;
list-style: disc outside;
&>li {
margin: 5px 0;
padding-left: 10px;
}
}
ol {
list-style: decimal outside;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 25px 0 20px;
font-weight: bold;
color: var(--fade-font-color);
}
h1 {
font-size: 1.1em;
}
h2 {
font-size: 1.07em;
}
h3 {
font-size: 1.05em;
}
}
&.incart {
& .actbox.addcart {
display: none;
}
& .actbox.ioncart {
display: flex;
}
}
}
.h404 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 30px 0 15px;
box-sizing: border-box;
& .title {
font-size: 10em;
font-weight: bold;
margin-bottom: 15px;
color: #0a5896;
background: linear-gradient(to right, #0a5896 0%, #f5a828 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
& .subtitle {
font-size: 1.6em;
font-weight: bold;
margin-bottom: 30px;
color: var(--fade2-font-color);
}
& .link {
font-size: 1.15em;
font-weight: bold;
color: var(--fade2-font-color);
text-decoration: none;
padding: 10px 15px;
background-color: var(--fade-back-color);
border-radius: 10px;
transition: all 0.3s ease;
&:hover {
background-color: #075694;
color: #fafafa;
}
}
}
.listssec {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
min-height: 50px;
padding-bottom: 10px;
& .ld {
padding: 15px 0;
}
&>.searchsec {
display: flex;
flex-direction: row;
row-gap: 15px;
width: 100%;
box-sizing: border-box;
padding: 5px;
margin-bottom: 5px;
&>input {
flex: 1 1 auto;
width: 0;
background-color: var(--base-back-color);
border: 1px solid var(--fade-back-color);
border-radius: 10px 0 0 10px;
padding: 10px 15px;
box-sizing: border-box;
color: var(--fade-font-color);
font-size: .9em;
height: 40px;
outline: none;
}
&>.addbtn {
flex: 0 0 40px;
width: 40px;
height: 40px;
background-color: var(--fade2-back-color);
border-radius: 0 10px 10px 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&.disabled {
opacity: 0.5;
pointer-events: none;
}
&:hover {
cursor: pointer;
background-color: #075694;
color: #fafafa;
}
}
}
&>.list {
display: flex;
flex-direction: column;
width: 100%;
&>* {
display: flex;
flex-direction: row;
row-gap: 15px;
height: 30px;
padding: 0 10px 0 7px;
align-items: center;
column-gap: 5px;
border-left: 3px solid transparent;
box-sizing: border-box;
background-color: #22222210;
transition: background-color .3s ease;
&:nth-child(even) {
background-color: #22222207;
}
&>.cbox {
display: none;
}
&:has(>.cbox:checked) {
border-color: #075694;
&>.box {
background-color: #075694;
border-color: #075694;
}
&>.icon,
&>.title {
color: #075694;
}
}
&>.box {
flex: 0 0 20px;
height: 20px;
width: 20px;
border-radius: 7px;
background-color: var(--base-back-color);
border: 1px solid var(--fade2-back-color);
transition: background-color .3s ease, border-color .3s ease;
}
&>.icon {
flex: 0 0 20px;
height: 20px;
width: 20px;
padding: 2px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: var(--fade2-font-color);
}
&>.title {
flex: 1 1 auto;
}
&:hover {
background-color: var(--fade2-back-color);
}
}
}
}
.brandlist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
column-gap: 15px;
row-gap: 15px;
justify-items: start;
&>.brand {
border-radius: 15px;
background-color: #075694;
color: #fafafa;
padding: 10px;
width: 100%;
box-sizing: border-box;
&>.thumb {
aspect-ratio: 202/120;
width: 100%;
border-radius: 10px;
overflow: hidden;
background-color: #fafafa;
&>img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&>.title {
margin: 15px 0 10px;
font-weight: bold;
}
&>.description {
font-size: .95em;
opacity: .8;
line-height: 1.1em;
}
&>.link {
display: block;
border-radius: 10px;
padding: 5px 10px;
background-color: #fafafa22;
font-size: .9em;
margin: 15px auto 10px;
width: max-content;
color: #fafafadd;
text-decoration: none;
&:hover {
cursor: pointer;
background-color: #fafafa44;
}
}
}
}
.orderline>.title {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 10px;
font-weight: bold;
font-size: .95em;
color: var(--fade-font-color);
padding: 15px 30px;
}
.mechatable {
width: 100%;
display: grid;
grid-template-columns: 1fr 3fr 3fr 3fr 3fr;
overflow-x: auto !important;
& tbody,
& thead,
& tfoot,
& tr {
display: contents;
}
& th {
font-weight: bold;
font-size: 0.95em;
color: var(--fade-font-color);
text-align: left;
padding: 0 10px 15px;
}
& tr th:first-child,
& tr td:first-child {
padding-left: 30px;
}
& tr th:last-child,
& tr td:last-child {
padding-right: 30px;
}
& td {
color: var(--fade-font-color);
min-height: 40px;
padding: 10px 10px;
box-sizing: border-box;
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
& .wrap {
width: 120px;
border: 1px solid var(--fade2-back-color);
border-radius: 5px;
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
background-color: #ecaeae;
border-color: #e34545;
padding: 0 15px;
box-sizing: border-box;
&:has(.circle.green) {
background-color: #b1ebb1;
border-color: #27c72f;
}
& .circle {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #e34545;
margin-right: 10px;
border: 1px solid #fafafa55;
&.green {
background-color: #27c72f;
}
}
}
& .icon {
font-size: 0.8em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #22222208;
border-radius: 5px;
padding: 5px;
box-sizing: border-box;
transition: all 0.3s ease;
&.trash:hover {
cursor: pointer;
background-color: #e34545;
color: #fafafa;
}
&.save:hover {
cursor: pointer;
background-color: #075694;
color: #fafafa;
}
}
& input,
& select {
width: 100%;
height: 100%;
border-radius: 5px;
border: 1px solid var(--fade2-back-color);
padding: 0 5px;
box-sizing: border-box;
}
}
tr:nth-child(even)>td {
background-color: #22222208;
}
tr:hover>td {
background-color: var(--fade2-back-color);
cursor: pointer;
}
}
.pagesec {
overflow: hidden;
padding: 30px 15px 40px;
color: var(--fade1-font-color);
width: 1200px;
h1 {
font-weight: bold;
font-size: 1.5em;
margin: 30px 0 20px;
color: #075694;
}
h2 {
font-weight: bold;
font-size: 1.3em;
margin: 30px 0 20px;
color: #075694;
}
h3 {
font-weight: bold;
font-size: 1.2em;
margin: 30px 0 20px;
color: #075694;
}
p {
margin: 10px 0 15px;
line-height: 1.5em;
}
a {
color: var(--hlight-color);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
img {
width: 100%;
object-fit: cover;
}
.breadcrumbs {
display: flex;
flex-direction: row;
margin: 15px 0;
& li {
font-size: 0.9em;
color: var(--fade-font-color);
&:not(:last-child):after {
content: "•";
margin: 0 10px;
font-weight: bold;
}
}
}
div ul,
div ol {
margin: 10px 0 15px;
line-height: 1.5em;
margin-bottom: 30px;
& li {
margin: 5px 0;
}
}
div ol {
list-style: lower-roman;
& li {
margin: 5px 25px;
}
}
div ul>li {
margin: 5px 0;
&::before {
content: "•";
margin: 0 10px;
font-weight: bold;
}
}
strong,
b {
font-weight: bold;
}
}
.cartprocess {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 15px;
width: 600px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
& .refcard {
padding: 15px 15px;
background-color: var(--fade-back-color);
display: flex;
flex-direction: row;
column-gap: 30px;
color: #222222;
border-radius: 10px;
font-size: 0.95em;
margin-bottom: 15px;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 10px;
line-height: 1.2em;
border: 1px solid #0a5896;
&>.logo {
flex: 0 0 70px;
width: 70px;
& img {
width: 100%;
object-fit: cover;
}
}
&>.info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
row-gap: 5px;
&>* {
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
&>.label {
width: 35%;
text-align: right;
font-weight: bold;
font-size: 0.95em;
}
}
}
}
& .msg {
padding: 15px 15px;
border: 1px solid #e34545;
color: #e34545;
border-radius: 10px;
font-size: 0.9em;
font-weight: bold;
margin-bottom: 15px;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 10px;
line-height: 1.2em;
background-color: var(--fade-back-color);
&.success {
border-color: #1ca823;
color: #1ca823;
}
&.info {
border-color: #0a5896;
color: #0a5896;
}
&>.icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 0 0 20px;
}
&>.text {
flex: 1 1 auto;
}
}
& .actions {
display: flex;
flex-direction: column;
row-gap: 10px;
align-items: center;
justify-content: center;
margin: 30px 0;
&>* {
border-radius: 10px;
border: 1px solid var(--accent-color);
text-align: left;
text-decoration: none;
color: #222222;
margin: auto;
width: 80%;
font-size: 0.95em;
height: 40px;
line-height: 40px;
transition: all 0.3s ease;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 15px;
box-sizing: border-box;
column-gap: 15px;
background-color: var(--fade-back-color);
margin: 0 auto;
&>.icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 0 0 25px;
width: 25px;
font-size: 0.8em;
opacity: 0.7;
flex: 0 0 20px;
}
&>.text {
flex: 0 0 150px;
width: 150px;
}
&:hover {
background-color: var(--accent-color) !important;
cursor: pointer;
}
}
}
}
@keyframes scrollGradient {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.loadingbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 5px;
background-image: linear-gradient(to right,
var(--accent-color),
var(--hlight-color),
var(--accent-color));
background-size: 200% 100%;
z-index: 7000;
animation: scrollGradient 3s linear infinite;
display: none;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-column {
display: flex;
flex-direction: column;
}
.align-center {
display: flex;
align-items: center;
justify-content: center;
}
.brand-sec {
margin: 30px auto 50px;
row-gap: 30px;
padding: 0;
&>.title {
font-size: 1.5em;
text-align: center;
& b {
color: var(--hlight-color);
font-weight: bold;
}
}
&>.list-container {
position: relative;
&>.list {
display: flex;
flex-direction: row;
column-gap: 30px;
row-gap: 30px;
justify-content: start;
margin: 30px 0;
overflow: hidden;
height: 100px;
margin: 0;
&>.elm {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
padding: 15px 15px;
border-radius: var(--box-radius);
border: 1px solid var(--fade2-back-color);
flex: 0 0 150px;
width: 150px;
height: 100px;
padding: 20px;
box-sizing: border-box;
transition: all 0.3s ease;
&>img {
width: 100%;
height: 100%;
object-fit: contain;
}
&:hover {
filter: grayscale(0);
cursor: pointer;
padding: 15px;
}
}
}
&:before {
left: 0;
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 15vw;
background: linear-gradient(to right,
var(--base-back-color),
transparent);
z-index: 100;
pointer-events: none;
}
&:after {
right: 0;
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 15vw;
background: linear-gradient(to right,
transparent,
var(--base-back-color));
z-index: 100;
pointer-events: none;
}
}
}
@media screen and (max-width: 600px) {
.header {
&>.logo {
width: 38px;
overflow: hidden;
}
&>.top-nav>.list {
column-gap: 8px;
}
}
}
@media screen and (max-width: 800px) {
.pod-box {
&>.pod-box-content>.head {
flex-direction: column;
height: 100px;
&>.sec:first-child {
align-self: start;
}
&>.sec:last-child {
align-self: end;
}
}
}
.header {
&.show-search {
&>.logo {
width: 38px;
overflow: hidden;
}
&>.search-box {
padding-left: 10px;
}
}
&>.top-nav>.list>.item:has(.icon) {
height: 30px;
& .icon {
font-size: 1.5em;
height: 30px;
width: 30px;
padding: 5px;
box-sizing: border-box;
}
& .texthid {
display: none;
}
& .text {
height: 30px;
line-height: 30px;
}
}
}
.accpage {
display: flex;
flex-direction: column;
row-gap: 15px;
&>.side {
display: flex;
flex-direction: row;
padding: 0;
overflow: auto hidden;
&>.grp {
display: flex;
flex-direction: row;
padding: 0;
}
}
}
.lin {
grid-template-columns: 1fr !important;
}
.flex {
flex-direction: column;
}
.container {
width: min(1500px, calc(100% - 30px));
}
}
@media screen and (max-width: 1200px) {
.base>.cart {
translate: 0 0 !important;
width: 0 !important;
flex: 0 0 0 !important;
}
.modcart {
z-index: 1500;
&>.cartbox {
padding-top: 0;
}
&.show {
width: min(500px, 90vw);
}
}
}
@media screen and (max-width: 1000px) {
.pod-box {
flex-direction: column;
width: min(1500px, calc(100%));
&>.pod-box-content>.head>.sec .filter-show {
display: flex !important;
}
&>.pod-box-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
opacity: 0;
display: block;
transition: opacity 0.3s ease;
pointer-events: none;
&>.close {
position: absolute;
right: 0;
top: 0;
color: #fafafa;
width: 30px;
height: 30px;
padding: 15px;
&:hover {
cursor: pointer;
color: #e34545;
}
}
}
&>.pod-box-content {
order: 2;
}
&>.pod-box-sidebar {
order: 1;
min-height: 0;
&.pbs {
position: fixed;
left: 0;
top: 0;
bottom: 0;
max-width: 90vw;
z-index: 1000;
border-radius: 0;
overflow: auto;
translate: -400px 0;
transition: translate 0.3s ease;
}
}
&.show {
&>.pod-box-bg {
opacity: 1;
pointer-events: all;
}
&>.pod-box-sidebar.pbs {
translate: 0 0;
}
}
}
.header {
position: relative;
&>.top-nav>.list>.item-search {
display: block;
}
&>.search-box {
display: none;
width: 100%;
padding-right: 0;
&>.back-search {
display: block;
}
&>.top-box-search {
width: 100%;
max-width: 100%;
}
}
&.show-search {
&>.search-box {
display: flex;
}
&>.top-nav {
display: none;
}
}
}
}
@container content (width < 1200px) {
.ban-box {
flex-direction: column;
row-gap: 15px;
&>.ban-box-banners,
&>.ban-box-categories {
width: 100%;
}
&>.ban-box-banners {
order: 1;
}
&>.ban-box-categories,
&>.ban-box-side {
aspect-ratio: auto;
order: 2;
&>.list {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding: 0;
& .list {
display: none !important;
}
&>.item {
height: 40px;
&:hover {
&+.item {
border-top-color: transparent;
}
}
}
}
}
}
}
.checkout {
& .secset {
&>.title {
font-weight: bold;
padding: 15px;
font-size: 1.3em;
opacity: .6;
}
&>.data {
display: none;
}
&.active {
&>.title {
color: var(--base-font-color);
opacity: 1;
}
&>.data {
display: grid;
}
}
}
& .data {
display: flex;
flex-direction: column;
row-gap: 15px;
& .resumo {
padding: 0 15px;
line-height: 1.3em;
& .total {
font-weight: bold;
font-size: 1.1em;
line-height: 1.5em;
}
& ul {
list-style: none;
& li {
margin: 0;
&::before {
content: '';
padding: 0;
margin: 0;
}
}
}
}
& .obs {
width: 100%;
& textarea {
width: 100%;
max-width: 100%;
min-width: 100%;
min-height: 100px;
max-height: 500px;
border-radius: 10px;
border: 1px solid var(--fade2-back-color);
box-sizing: border-box;
padding: 15px;
outline: none;
&:focus {
border-color: #075694;
}
}
}
& .hidden {
display: none;
}
&>* {
width: 100%;
box-sizing: border-box;
}
& .ingrp {
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 20px 15px;
&>span {
padding: 0 10px;
font-weight: bold;
}
&>input {
padding: 5px 10px;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
height: 40px;
border: 1px solid var(--fade2-back-color);
}
}
&>.shipping>ul {
padding: 0 15px;
list-style: none;
margin: 0;
&>li {
margin: 0 0;
&::before {
content: '';
padding: 0;
margin: 0;
}
}
}
&>.delivery>.sel,
&>.home>.sel,
&>.store>.sel,
&>.billing>.sel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
column-gap: 15px;
row-gap: 15px;
width: 100%;
box-sizing: border-box;
&.xlean>.ingrp {
padding: 0;
&>.in {
height: 50px;
border-color: var(--accent-color);
&:hover,
&:focus-within {
border-color: var(--hlight-color);
}
}
}
&>* {
background-color: var(--fade-back-color);
border-radius: 10px;
padding: 15px;
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
border: 1px solid transparent;
box-sizing: border-box;
transition: all 0.3s ease;
&>.icon {
font-size: 0.8em;
}
}
}
&>.home>.btn {
background-color: var(--fade-back-color);
border-radius: 10px;
padding: 15px;
border: none;
width: 100%;
opacity: 0.7;
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 1 solid transparent;
box-sizing: border-box;
margin-top: 5px;
&:hover {
opacity: 1;
cursor: pointer;
border-color: var(--hlight-color);
}
&>.icon {
font-size: 0.8em;
display: flex;
flex-direction: row;
align-items: center;
}
}
&>.delivery>.sel>*,
&>.home>.sel>*,
&>.store>.sel>* {
&:hover {
border-color: var(--hlight-color);
cursor: pointer;
}
&:has(input:checked) {
background-color: var(--hlight-color);
border-color: var(--hlight-color);
color: #fafafa;
}
}
&>.home>.sel,
&>.store>.sel,
&>.billing>.sel {
grid-template-columns: 1fr;
row-gap: 5px;
&>* {
flex-direction: column;
align-items: flex-start;
row-gap: 5px;
& .title {
font-weight: bold;
}
}
}
& h3 {
font-size: 1.1em;
font-weight: bold;
margin-top: 15px;
margin-bottom: 15px;
padding: 0 15px;
color: var(--fade-font-color);
display: flex;
flex-direction: row;
column-gap: 15px;
align-items: center;
}
&>.pay {
width: 100%;
height: 40px;
margin-top: 30px;
&>.btn {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 0;
outline: none;
background-color: var(--accent2-color);
border-radius: 10px;
color: #222222;
font-weight: bold;
font-size: 0.95em;
transition: all 0.3s ease;
&:hover {
cursor: pointer;
background-color: var(--accent-color);
}
}
}
& .actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 15px;
row-gap: 15px;
justify-content: flex-start;
&>* {
height: 100px;
width: 150px;
display: flex;
flex: 0 0 150px;
flex-direction: column;
align-items: center;
justify-items: center;
justify-content: center;
background-color: var(--fade-back-color);
padding: 30px;
border-radius: var(--box-radius);
width: 100%;
box-sizing: border-box;
border: 1px solid transparent;
transition: all 0.3s ease;
padding: 5px 10px;
position: relative;
color: var(--fade-font-color);
transition: all 0.3s ease;
&:hover {
border-color: var(--hlight-color);
cursor: pointer;
&>.ext>.dtls {
display: block;
}
}
&:has(input:checked) {
background-color: var(--hlight-color);
border-color: var(--hlight-color);
color: #dedede;
&>.ext>.dtls {
background-color: var(--hlight-color);
}
}
&.bext {
width: 300px;
flex: 0 0 300px;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 15px;
}
&>.dtls {
text-align: left;
font-size: 0.85em;
flex: 1 1 auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
&>.item {
display: flex;
flex-direction: row;
&>.label {
flex: 1 1 auto;
}
&>.value {
flex: 0 0 max-content;
font-weight: bold;
margin-left: 5px;
}
}
}
&>.preext {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
}
&>.ext,
&>.preext>.ext {
width: 100px;
height: 50px;
box-sizing: border-box;
border-radius: var(--box-radius);
&>.line {
width: 100%;
height: 100%;
background-color: var(--fade2-back-color);
flex: 0 0 10px;
position: relative;
overflow: hidden;
border-radius: var(--box-radius);
&>.inline {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 100%;
background-color: #ff661b;
overflow: hidden;
z-index: 5;
opacity: 0.99;
&.in2 {
background-color: var(--hlight2-color);
z-index: 3;
opacity: 0.99;
}
&>.value {
color: #fafafa;
}
}
& .value {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: var(--fade-font-color);
font-weight: bold;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
&>.icon,
&>.preext>.icon {
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
& svg,
& img {
height: 100%;
width: 100%;
object-fit: contain;
}
& svg {
opacity: .6;
padding: 10px;
box-sizing: border-box;
}
}
&>.label,
&>.preext>.label {
height: 20px;
line-height: 20px;
text-align: center;
font-size: .9em;
}
}
}
}
}
metrics {
position: fixed;
bottom: 15px;
right: 15px;
padding: 15px;
background-color: #fafafa;
z-index: 999999;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
max-height: calc(100vh - 30px);
overflow: auto;
box-sizing: border-box;
& td {
padding: 5px 10px;
}
}
.loader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #22222200;
z-index: 2000;
&>.spinner {
width: 30px;
height: 30px;
border: 3px solid #0a5896;
border-bottom-color: #f5a828;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: .8;
}
}
.skload {
background-color: var(--fade-back-color);
animation: var(--skeleton-anim);
pointer-events: none;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes skeleton {
0% {
opacity: 1;
}
50% {
opacity: .6;
}
100% {
opacity: 1;
}
}