.spinner-reparation {
display: none;
opacity: 0;
position: absolute;
left: 50%;
top: 400px;
width: 35px;
height: 35px;
border: 5px solid #353349;
border-top: 5px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.spinner-reparation.active {
display: block;
opacity: 1;
}
.reparation-section {
position: relative;
max-width: 1200px;
min-height: 100dvh;
margin: auto;
display: flex;
flex-direction: column;
padding: 0px 30px;
overflow-x: visible;
}
.products-grid,
.models-grid,
.repairs-grid {
scroll-behavior: smooth !important;
position: relative;
height: 100%;
padding: 100px 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
justify-content: center;
justify-items: center;
gap: 50px;
}
.products-grid h2,
.models-grid h2,
.repairs-grid h2 {
position: relative;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
display: block;
padding: 50px 60px;
margin: 40px auto 50px auto;
border-radius: 25px;
color: var(--secondary-color);
font-family: 'Poppins', sans-serif;
font-weight: bold;
grid-column: 1 / -1;
background-color: var(--primary-color);
text-transform: uppercase;
}
.models-grid h2,
.repairs-grid h2 {
margin: 40px auto 40px auto;
}
.products-grid h2:nth-child(1):after {
content: '';
background-image: url(https://mobile-labs.fr/wp-content/themes/mobilelabs2024/images/telephone_pleure.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
top: -67px;
right: -187px;
width: 300px;
height: 215px;
z-index: -1;
}
.product-card {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
padding: 30px 20px;
border-radius: 25px;
box-shadow: 0 0px 20px rgba(18, 51, 84, 0.125);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: medium;
transition: box-shadow .6s ease;
}
.normal-price {
display: block;
}
.product-card:hover,
.model-card:hover,
.repair-prices-grid:hover {
box-shadow: 0 0px 60px rgba(18, 51, 84, 0.23);
cursor: pointer;
}
.product-card:hover img {
transform: translateY(0px);
display: block;
}
.product-card:hover h2 {
opacity: 1;
}
.product-card img {
transform: translateY(88px);
transition: all 0.6s ease-in;
max-width: calc(100% - 70px);
max-height: calc(100% - 70px);
}
.model-card {
position: relative;
text-align: center;
padding: 10px 20px;
min-height: 100px;
width: calc(100% - 50px);
overflow: hidden;
text-overflow: ellipsis;
border-radius: 25px;
box-shadow: 0 0px 20px rgba(18, 51, 84, 0.125);
scroll-margin: 300px;
scroll-behavior: smooth;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
transition: box-shadow .6s ease;
}
.model-card::after {
content: attr(data-content);
position: absolute;
top: 50%;
left: 10px;
color: rgba(237, 196, 74, .3);
font-size: 35px;
white-space: nowrap;
z-index: -1;
transform: translate3d(0, 0, 0);
}
@keyframes scrollText {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.model-card:hover::after {
animation: scrollText 10s linear infinite;
}
.repairs-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(1fr, 1fr));
grid-auto-rows: .7fr;
justify-items: stretch;
}
.repair-prices-grid {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
justify-items: center;
border: 1px solid gainsboro;
padding: 10px 20px 0 20px;
border-radius: 20px;
transition: box-shadow .6s ease;
}
.repair-prices-grid:hover {
border: 1px solid var(--primary-color);
cursor: default;
}
.repair-name {
color: var(--secondary-color);
font-weight: 500;
padding: 10px 0;
}
.repair-price {
display: flex;
flex-direction: column;
gap: 7px;
padding: 10px 0;
}
.repair-price,
.quali-repar-price {
font-weight: 700;
background-color: var(--primary-color);
color: var(--secondary-color);
min-width: calc(100% + 40px);
border-radius: 0 0 19px 19px;
text-align: center;
}
.quali-repar-container {
display: block;
}
.repair-price em {
color: var(--secondary-color);
font-weight: 400;
font-style: normal;
}
.repair-picture {
position: relative;
padding: 10px 0 20px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.repair-image {
display: block;
margin: auto;
width: 50px;
height: 50px;
}
.repair-picture::after {
content: '';
position: absolute;
top: 25px;
left: 0;
width: 100%;
height: 20px;
border-radius: 0 5px 5px 0;
background-color: var(--primary-color);
rotate: -20deg;
z-index: -1;
}
.repair-image svg {
fill: var(--primary-color) !important;
}
.search-bar {
position: sticky;
top: 100px;
left: 0;
display: block;
margin: 15px auto 0 auto;
min-width: 100%;
z-index: 3;
}
.reparation-section label {
margin-top: 50px;
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 600;
color: var(--secondary-color);
font-family: 'Poppins', sans-serif;
}
.search-bar input {
background: rgba(230, 230, 230, 0.60);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: block;
margin: auto;
min-width: calc(100% - 80px);
padding: 15px 30px 15px 50px;
border-radius: 30px;
box-shadow: 0px 0px 0px transparent;
transition: all .6s ease-out;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: var(--secondary-color);
border: none;
}
.search-bar input:focus-visible {
outline: none;
box-shadow: 0px 0px 20px rgba(18, 51, 84, 0.150);
background: rgba(255, 255, 255, 0.6);
}
.search-bar input::placeholder {
color: var(--secondary-color);
opacity: .4;
}
.search-bar::after {
content: '';
background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="var(--primary-color)" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 25px;
height: 25px;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
.return-button,
.return-button-repair-option {
display: block;
grid-column: 1 / -1;
align-self: center;
justify-self: flex-start;
background-color: var(--primary-color);
padding: 20px 40px;
border-radius: 20px;
width: fit-content;
height: fit-content;
font-weight: 700;
border: 2px solid transparent;
color: var(--secondary-color);
letter-spacing: 1.5;
transition: border .4s ease;
}
.return-button:hover,
.return-button-repair-option:hover {
border: 2px solid var(--secondary-color);
}
.link-to-cgv {
margin: 0 0 70px 0;
text-align: end;
}
.link-to-cgv strong {
color: firebrick;
}
.link-to-cgv a {
font-size: 15px;
text-decoration: underline;
}
.link-to-cgv a:hover {
color: var(--primary-color);
}
@media screen and (max-width: 700px) {
.products-grid h2:nth-child(1):after {
content: '';
background-image: url(//mobile-labs.fr/static/telephone_pleure-81080857bac4250c251f5206b93f27fa.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
rotate: -32deg;
top: -121px;
right: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
.products-grid h2,
.models-grid h2,
.repairs-grid h2 {
position: relative;
max-width: 100%;
max-width: 100%;
max-width: calc(100% - 120px);
min-width: calc(100% - 20px);
max-height: 60px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 0;
overflow: hidden;
overflow: hidden;
padding: 50px 15px;
margin: 40px auto 50px auto;
border-radius: 25px;
color: var(--secondary-color);
font-family: 'Poppins', sans-serif;
grid-column: 1 / -1;
background-color: var(--primary-color);
text-transform: uppercase;
}
}