vjrj
f775d4ac26
Second (last) jQuery/BS4 JS blocker to the BS5 CSS swap. Replaces the `bootstrap-carousel-swipe` jQuery plugin + `$(...).carousel()` init with react-bootstrap's <Carousel> (native swipe, no jQuery) for both home carousels. - Preserves the progressive `.lazy` background mechanism (blur -> full image on slide-in): the old `slide.bs.carousel` handler becomes <Carousel onSlide>, which marks the incoming index in component state. - Keeps all per-slide class hooks (carousel-item-N, carousel-snd-item-N). - CSS ports in Index-custom.scss for react-bootstrap's BS5 markup: indicators render as <button> (not <li>), and prev/next labels use .visually-hidden (BS4 had .sr-only) -> add a shim so labels stay hidden on current BS4 CSS. - Drops the now-unused bootstrap-carousel-swipe dependency. Full-app build boots clean. Needs a visual staging check of the home page.
417 lines
7.8 KiB
SCSS
417 lines
7.8 KiB
SCSS
@use '../../stylesheets/mixins' as *;
|
|
@use '../../stylesheets/colors' as *;
|
|
|
|
.full-width {
|
|
position: relative;
|
|
width: 100vw;
|
|
margin-left: calc(-50vw + 50%);
|
|
/* margin-top: -21px; full pagen */
|
|
/*
|
|
width: 100vw;
|
|
position: relative;
|
|
left: 50%;
|
|
right: 50%;
|
|
margin-left: -50vw;
|
|
margin-right: -50vw;*/
|
|
}
|
|
|
|
.carousel-item {
|
|
height: 65vh;
|
|
min-height: 300px;
|
|
background: no-repeat center center scroll;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
.carousel-snd-item {
|
|
height: 85vh;
|
|
min-height: 400px;
|
|
background: no-repeat center center scroll;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
.carousel-control-next-icon, .carousel-control-prev-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
// react-bootstrap v2 renders indicators as <button> (BS5 markup), not <li> (BS4),
|
|
// so port the base "bar" look here — the BS4 CSS only styles <li>. The last two
|
|
// rules are the original custom tweaks.
|
|
.carousel-indicators button,
|
|
.carousel-indicators li {
|
|
box-sizing: content-box;
|
|
flex: 0 1 auto;
|
|
width: 30px;
|
|
height: 5px;
|
|
padding: 0;
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
text-indent: -999px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border: 0;
|
|
border-top: 10px solid transparent;
|
|
border-bottom: 10px solid transparent;
|
|
border-radius: 2px;
|
|
opacity: .5;
|
|
transition: opacity .6s ease;
|
|
}
|
|
|
|
.carousel-indicators .active {
|
|
opacity: 1;
|
|
}
|
|
|
|
// BS5 renames BS4's `.sr-only` to `.visually-hidden`; react-bootstrap's carousel
|
|
// prev/next labels use it. Shim it until the Bootstrap 5 CSS swap lands, else the
|
|
// "Anterior"/"Siguiente" labels would render visible over the controls.
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.carousel-snd-caption > h3,
|
|
.carousel-caption > h3 {
|
|
> i {
|
|
display: none;
|
|
}
|
|
font-size: 2.5rem;
|
|
text-shadow: 2px 2px 1px #280B0B;
|
|
}
|
|
|
|
@include breakpoint(mobile) {
|
|
.carousel-caption > h3 {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(mobile) {
|
|
.carousel-snd-caption > h3 {
|
|
font-size: 1.3rem;
|
|
}
|
|
}
|
|
|
|
.py-5 > .container > {
|
|
div > h1 {
|
|
color: #280B0B;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: 20px;
|
|
}
|
|
p {
|
|
padding-top: 10px;
|
|
font-size: 1.7em;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(mobile) {
|
|
.py-5 > .container > {
|
|
p {
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
|
|
.pt-5, .py-5 {
|
|
padding-top: 1rem !important;
|
|
}
|
|
|
|
.moto {
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.slide-2-icon {
|
|
border-radius: 50%;
|
|
position: relative;
|
|
width: 30%;
|
|
left: 35%;
|
|
border: 14px solid #FFF;
|
|
opacity: .6;
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: 100%;
|
|
}
|
|
}
|
|
|
|
.slide-1-icon, .slide-2-icon, .slide-3-icon, .slide-4-icon {
|
|
position: relative;
|
|
top: 25%;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide-1-icon:before,
|
|
.slide-2-icon:before,
|
|
.slide-3-icon:before,
|
|
.slide-4-icon:before {
|
|
font-family: FontAwesome;
|
|
/* position: absolute; */
|
|
font-size: 140px;
|
|
color: white;
|
|
opacity: .6;
|
|
/* right: 35%; */
|
|
text-shadow: 2px 2px #280B0B;
|
|
}
|
|
|
|
@include breakpoint(mobile) {
|
|
.slide-1-icon:before,
|
|
.slide-2-icon,
|
|
.slide-2-icon:before,
|
|
.slide-3-icon:before,
|
|
.slide-4-icon:before {
|
|
font-size: 100px;
|
|
opacity: .6;
|
|
}
|
|
|
|
.slide-3-icon:before,
|
|
.slide-4-icon:before {
|
|
top: 10px;
|
|
/* top: -50px; */
|
|
}
|
|
}
|
|
|
|
.slide-1-icon:before {
|
|
content: "";
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slide-2-icon {
|
|
top: 5%;
|
|
}
|
|
|
|
@include breakpoint(mobile) {
|
|
.slide-2-icon {
|
|
top: 20%;
|
|
}
|
|
}
|
|
|
|
.slide-2-iconDISABLED:before {
|
|
content: "";
|
|
font-size: 320px;
|
|
top: -10%;
|
|
}
|
|
|
|
.slide-3-icon:before {
|
|
content: "";
|
|
}
|
|
|
|
.slide-4-icon:before {
|
|
content: "";
|
|
}
|
|
|
|
.scale__container--js {
|
|
text-align: center;
|
|
}
|
|
|
|
.scale--js {
|
|
display: inline-block;
|
|
transform-origin: 50% 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.no-webp .carousel-item-1 {
|
|
background-image: url('/images/home-slide1.jpg')
|
|
}
|
|
|
|
.no-webp .carousel-item-2.lazy {
|
|
background-image: url('/images/home-slide2.jpg')
|
|
}
|
|
|
|
.no-webp .carousel-item-3.lazy {
|
|
background-image: url('/images/home-slide3.jpg')
|
|
}
|
|
|
|
.no-webp .carousel-item-4.lazy {
|
|
background-image: url('/images/home-slide4.jpg')
|
|
}
|
|
|
|
.no-webp .carousel-snd-item-1 {
|
|
background-image: url('/images/home-slide-snd-1.jpg')
|
|
}
|
|
|
|
.no-webp .carousel-snd-item-2.lazy {
|
|
background-image: url('/images/home-slide-snd-2.jpg')
|
|
}
|
|
|
|
.webp .carousel-item-1 {
|
|
background-image: url('/images/home-slide1.webp')
|
|
}
|
|
|
|
.webp .carousel-item-2.lazy {
|
|
background-image: url('/images/home-slide2.webp')
|
|
}
|
|
|
|
.webp .carousel-item-3.lazy {
|
|
background-image: url('/images/home-slide3.webp')
|
|
}
|
|
|
|
.webp .carousel-item-4.lazy {
|
|
background-image: url('/images/home-slide4.webp')
|
|
}
|
|
|
|
/* .webp .carousel-item-1 {
|
|
background-image: url('/images/home-slide1-blur.webp')
|
|
} */
|
|
|
|
.webp .carousel-item-2 {
|
|
background-image: url('/images/home-slide2-blur.webp')
|
|
}
|
|
|
|
.webp .carousel-item-3 {
|
|
background-image: url('/images/home-slide3-blur.webp')
|
|
}
|
|
|
|
.webp .carousel-item-4 {
|
|
background-image: url('/images/home-slide4-blur.webp')
|
|
}
|
|
|
|
.webp .carousel-snd-item-1 {
|
|
background-image: url('/images/home-slide-snd-1.webp')
|
|
}
|
|
|
|
.webp .carousel-snd-item-2 {
|
|
background-image: url('/images/home-slide-snd-2-blur.webp')
|
|
}
|
|
|
|
.webp .carousel-snd-item-2.lazy {
|
|
background-image: url('/images/home-slide-snd-2.webp')
|
|
}
|
|
|
|
.participe-btn {
|
|
background-color: $todos-palette1;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.bg-image-full {
|
|
color: white;
|
|
text-shadow: 2px 2px 1px #280B0B;
|
|
background: no-repeat center center scroll;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
background-size: cover;
|
|
-o-background-size: cover;
|
|
}
|
|
|
|
.no-webp .bg-image-full {
|
|
background-image: url('/images/home-fires.jpg');
|
|
}
|
|
|
|
.webp .bg-image-full {
|
|
background-image: url('/images/home-fires.webp');
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.no-webp .bg-image-full {
|
|
background-image: url('/images/home-fires-800.jpg');
|
|
}
|
|
|
|
.webp .bg-image-full {
|
|
background-image: url('/images/home-fires-800.webp');
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 400px) {
|
|
.no-webp .bg-image-full {
|
|
background-image: url('/images/home-fires-400.jpg');
|
|
}
|
|
|
|
.webp .bg-image-full {
|
|
background-image: url('/images/home-fires-400.webp');
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
.no-webp .bg-image-full {
|
|
background-image: url('/images/home-fires-1000.jpg');
|
|
}
|
|
|
|
.webp .bg-image-full {
|
|
background-image: url('/images/home-fires-1000.webp');
|
|
}
|
|
}
|
|
|
|
.nowebp .device[data-device=iPhone6][data-orientation=portrait][data-color=white] {
|
|
background-image: url(/images/mobile.png);
|
|
}
|
|
|
|
.webp .device[data-device=iPhone6][data-orientation=portrait][data-color=white] {
|
|
background-image: url(/images/mobile.webp);
|
|
}
|
|
|
|
.full-width .page-header { // section titles
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.sect1 {
|
|
}
|
|
|
|
.sect2 {
|
|
}
|
|
|
|
.sect3 {
|
|
background-color: $todos-back4;
|
|
}
|
|
|
|
.sect4 {
|
|
background-color: $todos-back5;
|
|
}
|
|
|
|
.sect5 {
|
|
background-color: $todos-back6;
|
|
}
|
|
|
|
.sect6 {
|
|
background-color: $todos-back5;
|
|
}
|
|
|
|
.sect3, sect4, sect5, sect6 {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
|
|
.crowd-footer {
|
|
position: relative;
|
|
bottom: -150px;
|
|
left: 0px;
|
|
text-align: left;
|
|
}
|
|
|
|
.slides-footer {
|
|
position: relative;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
text-align: left;
|
|
}
|
|
|
|
.slides-footer > p,
|
|
.crowd-footer > p {
|
|
font-size: 13px;
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.slides-footer > p > a,
|
|
.slides-footer > p > a:hover {
|
|
color: #868e96 !important;
|
|
text-shadow: 2px 2px 1px #280B0B;
|
|
}
|
|
|
|
#carouselSndIndicators > div > div.carousel-item.carousel-snd-item-1 > div > h3 > span > a {
|
|
color: white;
|
|
}
|