:root { /* Primary colors */ --primary-1: #071956; --primary-2: #0d2ea0; /* Secondary colors */ --secondary-1: #1965e1; --secondary-2: #0e1a70; /* Tertiary colors */ --tertiary-1: #020920; --tertiary-2: #4d4d4d; --tertiary-3: #c8c8c9; --tertiary-4: #f5f6f8; /* Accent colors */ --accent-1: #d81d7e; --accent-2: #eb7200; --accent-3: #ffbf00; --accent-4: #54bfd4; --accent-5: #00b0aa; --accent-6: #6dc498; --accent-7: #50738a; --accent-8: #2d9b00; --accent-9: #d81d7e; /* Font */ --font-body: Helvetica; --font-title: Catamaran; } .productsSwiper { padding: 50px 0 !important; } .mySwiper { padding: 50px 50px !important; .swiper-wrapper { margin-bottom: 50px; } .swiper-slide { padding: 24px 16px; box-shadow: 12px 12px 36px 0 rgba(159, 152, 152, 0.25); border-radius: 8px; height: auto; } .swiper-pagination { bottom: 0 !important; .swiper-pagination-bullet { background-color: var(--tertiary-2); } .swiper-pagination-bullet-active { background: var(--accent-2); } } } .swiper { max-width: 1244px; width: 100%; height: 100%; } /* .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } */ .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } * { margin: 0; padding: 0; box-sizing: border-box; } body { color: var(--primary-blue); font-size: 48px; font-family: var(--font-title); line-height: 1.6; background-color: var(--tertiary-4); width: 100%; max-width: 100%; overflow-x: hidden; } .hero { display: flex; position: relative; background-color: var(--tertiary-4); max-width: 1504px; width: 100%; margin: 0 auto; gap: 80px; padding: 0 110px 0 15px; } .hero-left { flex: 1; background-color: var(--tertiary-4); z-index: 1; max-width: 50%; padding-block: 40px; } .hero-right { flex: 1; position: relative; z-index: 0; display: flex; } .blue-curve { position: absolute; top: 0; right: calc(0% - 110px); bottom: 0; left: 40%; background-color: var(--primary-1); border-radius: 0 0 200px 0; z-index: -1; max-height: 659px; } .brother-logo-container { margin-bottom: 50px; } .brother-logo { max-width: 344px; } .hero-text h1 { color: var(--secondary-2); font-family: var(--font-title); font-size: 88px; font-weight: 800; margin: 0; line-height: 77px; } .hero-text h2, .hero-text .chez-brother { color: var(--secondary-2); font-family: var(--font-title); font-size: 88px; line-height: 77px; font-weight: 400; } .subtitle { color: var(--secondary-2); margin-bottom: 0; font-family: var(--font-title); font-size: 56px; font-weight: 400; line-height: 70px; } .discover-container { display: flex; align-items: center; margin-block: 29px; } .discover-btn { background-color: var(--accent-2); color: var(--tertiary-4); border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; font-size: 22px; font-family: var(--font-body); text-transform: none; width: fit-content; height: fit-content; text-decoration: none; } .quote-btn { background-color: var(--accent-2); color: var(--tertiary-4); border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; font-size: 22px; font-family: var(--font-body); text-transform: none; width: fit-content; height: fit-content; text-decoration: none; } .discover-btn:hover, .quote-btn:hover { background-color: #cf6300; } .description { color: var(--tertiary-2); max-width: 534px; font-size: 20px; font-weight: 500; font-family: var(--font-body); line-height: normal; } .hero-image { height: 100%; width: 100%; overflow: hidden; position: relative; display: flex; top: 80px; } /* Carousel styles */ .carousel-container { width: 100%; max-width: 570px; height: 607px; position: relative; overflow: hidden; margin: 0 0 0 auto; border-radius: 100px 0 100px 0; } .carousel-track { position: relative; height: 100%; width: 100%; } .carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; transition: opacity 1s ease; visibility: hidden; } .carousel-slide.active { opacity: 1; visibility: visible; } .carousel-slide img { width: 570px; height: 607px; object-fit: cover; display: block; } .svg-overlay-hero { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 80%; height: 80%; display: flex; justify-content: center; align-items: center; pointer-events: none; } .svg-overlay { position: absolute; bottom: calc(0% - 125px); right: 82px; display: flex; } .grid-svg { width: 100%; height: 100%; max-width: 477px; max-height: 477px; } .solutions { width: 100%; max-width: 1504px; margin: 200px auto; box-sizing: border-box; padding-inline: 15px; .products-carousel { .swiper-wrapper { .swiper-slide-active { min-height: 517px; } } } } .solutions-header { margin-bottom: 5rem; display: flex; justify-content: space-between; align-items: center; max-width: 1504px; width: 100%; } .solutions-header h2 { color: var(--secondary-2); font-family: var(--font-title); font-size: 40px; font-weight: 700; line-height: 50px; } .solutions-header p { color: var(--secondary-2); font-family: var(--font-title); font-size: 40px; font-weight: 400; line-height: 50px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .product-card { background: var(--tertiary-4); border-radius: 14px; padding: 38px; display: flex; flex-direction: column; overflow: hidden; height: 418px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05); transition: all 0.5s; } .product-card img { height: 100%; width: 100%; object-fit: contain; margin-bottom: 0; } .product-card h3 { color: var(--tertiary-2); font-family: var(--font-body); font-size: 21px; font-weight: 400; line-height: normal; } .product-card p { color: var(--tertiary-2); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: normal; opacity: 0.6; } .product-card-content { display: flex; flex-direction: column; position: relative; gap: 10px; } .plus-btn { position: absolute; background-color: var(--tertiary-3); color: var(--tertiary-4); border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; z-index: 5; top: 0; right: 0; width: 26px; height: 26px; color: var(--accent-2); background-color: var(--tertiary-4); box-shadow: 6.5px 6.5px 19.5px 0px rgba(159, 152, 152, 0.25); text-decoration: none; } .discover-section { display: flex; justify-content: center; } .discover-btn-alt { line-height: normal; color: var(--secondary-2); border: 2px solid var(--secondary-2); padding: 10px; border-radius: 4px; cursor: pointer; font-weight: 400; transition: all 0.3s ease; font-size: 22px; font-family: var(--font-body); box-shadow: 8px 8px 24px 0px rgba(159, 152, 152, 0.25); text-decoration: none; } .discover-btn-alt:hover { background-color: var(--tertiary-3); border: 2px solid var(--tertiary-3); } /* Video Section */ .video-section { margin: auto; max-width: 1260px; width: 100%; box-sizing: border-box; } .video-container { display: flex; flex-direction: column; align-items: center; gap: 16px; } .video-container h2 { color: var(--primary-1); font-family: var(--font-title); font-weight: 700; margin-bottom: 0; font-size: 40px; align-self: baseline; line-height: 50px; } .video-wrapper { position: relative; width: 100%; max-width: 1248px; border-radius: 0px 90px; box-shadow: 8px 8px 24px 0px rgba(159, 152, 152, 0.25); } .video-wrapper video { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 0px 90px; object-fit: cover; } .video-overlay { pointer-events: none; } .play-button-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 20; cursor: pointer; } .play-button { border: none; cursor: pointer; background-color: rgba(224, 224, 235, 0.6); transition: transform 0.3s ease; width: 152px; padding-left: 10px; height: 152px; border-radius: 100px; display: flex; justify-content: center; align-items: center; } .play-button svg { filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2)); } .video-controls { display: none; width: 100%; position: absolute; bottom: 15px; left: 0; flex-direction: row; align-items: center; gap: 40px; padding: 0 0 20px 90px; z-index: 10; } #progress-bar { width: 70%; appearance: none; background: var(--tertiary-3); height: 5px; border-radius: 5px; cursor: pointer; } #progress-bar::-webkit-slider-thumb { appearance: none; width: 20px; height: 25px; background: var(--tertiary-3); border-radius: 50%; cursor: pointer; } #stop-button { padding: 10px 10px 7px 10px; border-radius: 100px; background: #e0e0eb99; box-shadow: 9.8px 9.8px 29px 0px rgba(0, 0, 0, 0.25); border: none; cursor: pointer; border-radius: 100px; display: none; } #stop-button svg { width: 30px; height: 30px; } .play-svg { padding: 37px 39px 37px 50px; border-radius: 100px; background: #e0e0eb99; box-shadow: 9.8px 9.8px 29px 0px rgba(0, 0, 0, 0.25); } /* L'overlay du bouton play (contenant le SVG) est visible par défaut */ .play-svg svg { display: block; width: 63px; height: 78px; } /* business-benefits Section Styles */ .business-benefits { margin: 200px auto; max-width: 1260px; } .business-benefits .section-title { color: var(--primary-1); font-family: var(--font-body); font-size: 40px; font-weight: 700; line-height: 50px; margin-bottom: 24px; } /* .swiper-horizontal { padding-block: 45px !important; } .swiper-slide { border-radius: 8px; padding: 24px 12px; max-height: 300px; transition: transform 0.3s ease; width: 300px !important; max-width: 275px !important; margin-right: 30px !important; background: rgba(245, 246, 248, 0.40); box-shadow: 12px 12px 36.5px 0px rgba(159, 152, 152, 0.25); backdrop-filter: blur(16px); } */ .slide-content { display: flex; flex-direction: column; } .slide-content .slide-bottom-content { display: flex; flex-direction: column; gap: 4px; } .slide-content .slide-bottom-content h3 { color: var(--secondary-2); font-family: var(--font-title); font-size: 20px; font-weight: 700; line-height: 25px; } .slide-content .slide-bottom-content p { color: var(--tertiary-2); font-family: var(--font-body); font-size: 10px; line-height: normal; } .icon-divider-container, .product-image-divider { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 16px; } .icon-divider-container svg { max-width: 110px; max-height: 110px; } .icon-divider-container .divider, .product-image-divider .divider { width: 100%; height: 0.76px; margin-bottom: 9px; background-color: var(--tertiary-2); } .slide-content h3 { font-size: 1.5rem; color: #333; margin: 0; line-height: 1.3; } .slide-content p { font-size: 1rem; color: #666; line-height: 1.6; margin: 0; } .swiper-container { max-width: 1238px; display: flex; margin: 0 auto; } /* .swiper { width: 100%; padding-bottom: 40px; } .business-benefits .swiper-pagination-bullet { background-color: var(--tertiary-3) !important; width: 9px !important; height: 9px !important; } .business-benefits .swiper-pagination-bullet-active { background-color: var(--accent-2) !important; } */ /* Partner Section Styles */ .partner-section { max-width: 1160px; width: 100%; margin: auto; box-sizing: border-box; } .partner-content { display: flex; gap: 120px; } .partner-image { position: relative; max-width: 516px; height: 606px; } .partner-image img { width: 100%; height: 100%; max-height: 555px; object-position: -85px; object-fit: cover; border-radius: 0px 0px 200px 0px; } .partner-image .partner-overlay { position: absolute; bottom: 0; left: -60.5px; z-index: 1; } .partner-right { display: flex; flex-direction: column; gap: 32px; flex: 1; } .partner-icon { display: flex; } .partner-icon img { width: 100%; max-width: 139px; height: auto; } .partner-text { color: var(--tertiary-2); font-family: var(--font-body); font-size: 28px; font-weight: 500; line-height: normal; } .partner-cta { display: inline-block; font-family: 'Catamaran', sans-serif; font-weight: 600; font-size: 16px; color: #1965e1; text-decoration: none; position: relative; padding-bottom: 5px; } .partner-cta:after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #1965e1; transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s ease-out; } .partner-cta:hover:after { transform: scaleX(1); transform-origin: bottom left; } /* Add a general container class to help with responsive layout */ main { width: 100%; max-width: 1728px; margin: 0 auto; overflow: hidden; } .contact-section { padding: 56px 0; overflow: hidden; margin: 200px auto; } .contact-container { max-width: 984px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; } .contact-image { position: relative; width: 100%; } .contact-image svg { position: absolute; top: 45%; right: calc(0% - 50px); z-index: 2; pointer-events: none; } .contact-img { max-height: 291px; width: 100%; border-radius: 8px; position: relative; z-index: 2; display: block; object-fit: cover; } .contact-btn { display: flex; background-color: var(--accent-2); text-decoration: none; padding: 10px; font-size: 22px; font-family: var(--font-body); border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; border: none; color: var(--tertiary-4); font-weight: 700; box-shadow: 8px 8px 24px 0px rgba(159, 152, 152, 0.25); line-height: normal; } .contact-btn:hover { background-color: #cf6300; } .contact-content { flex: 1; } .contact-title { font-size: 2.5rem; color: #1965e1; margin-bottom: 20px; font-weight: 700; } .contact-description { font-size: 1.2rem; color: #555; margin-bottom: 30px; line-height: 1.6; } @media (max-width: 768px) { .contact-container { flex-direction: column; text-align: center; } .contact-image { margin-bottom: 30px; max-width: 100%; } .contact-btn { margin: 0 auto; } } /* FAQ Section Styles */ .faq-section { max-width: 1250px; margin: 0 auto 200px auto; display: flex; gap: 78px; padding-block: 40px; } .faq-section .section-title { font-family: var(--font-title); color: var(--secondary-2); font-size: 48px; font-weight: 700; line-height: 50px; } .faq-container { width: 100%; display: flex; flex-direction: column; gap: 40px; overflow: visible; } .faq-question { display: flex; cursor: pointer; transition: all 0.3s ease; padding: 10px 16px; justify-content: space-between; align-items: center; align-self: stretch; border-radius: 8px; background: #fefefe; box-shadow: 8px 8px 24px 0px #9f989840; z-index: 1; position: relative; max-width: 861px; } .faq-question h3 { margin: 0; font-family: var(--font-body); color: var(--tertiary-2); font-size: 24px; font-weight: 700; line-height: normal; } .faq-toggle { border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 100px; background-color: var(--tertiary-4); box-shadow: 8px 8px 24px 0px #9f989840 inset; } .arrow-icon { fill: var(--accent-2); transition: transform 0.3s ease; width: 35px; padding: 5px; height: 35px; } .faq-item.active .arrow-icon { transform: rotate(180deg); } .faq-answer { padding: 0 1.5rem; max-height: 0; overflow: hidden; transition: all 0.3s ease; border-radius: 0px 0px 16px 16px; max-width: 853px; background-color: var(--tertiary-4); box-shadow: 8px 8px 24px 0px rgba(159, 152, 152, 0.25); justify-self: anchor-center; line-height: normal; gap: 30px; display: flex; flex-direction: column; } .faq-answer li { position: relative; padding-left: 30px; } .faq-answer ul { list-style-type: none; font-size: 10px; display: flex; flex-direction: column; gap: 30px; } .faq-answer li::before { content: '•'; position: absolute; left: 10px; top: -4px; color: var(--primary-1); font-size: 20px; } .faq-item.active .faq-answer { padding: 24px; max-height: fit-content; border-radius: 0px 0px 16px 16px; max-width: 853px; background-color: var(--tertiary-4); box-shadow: 8px 8px 24px 0px rgba(159, 152, 152, 0.25); justify-self: anchor-center; line-height: normal; gap: 30px; display: flex; flex-direction: column; } .faq-answer p { margin: 0; font-family: var(--font-body); color: var(--primary-1); font-size: 20px; font-weight: 500; line-height: normal; opacity: 0.6; } .faq-answer p strong { color: var(--primary-1); font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: normal; } .faq-image { max-width: 311px; max-height: 292px; border-radius: 80px 0px; object-fit: cover; box-shadow: 8px 8px 24px 0px rgba(159, 152, 152, 0.25); } @media (max-width: 768px) { .faq-section .container { grid-template-columns: 1fr; gap: 2rem; } .faq-image { order: -1; justify-content: center; } .faq-image img { width: 100%; transform: none; } .video-controls { padding: 0 0 10px 60px; } #stop-button svg { width: 15px; height: 15px; } /* .swiper-slide-active .product-card { width: auto; padding: 20px; } .swiper-slide-next .product-card { left: 74%; } */ } /* Media Queries */ @media screen and (max-width: 1366px) { .hero { max-width: 1024px; gap: 30px; } .blue-curve { max-height: 565px; } .hero-text h1, .hero-text h2, .hero-text .chez-brother { font-size: 64px; line-height: 56px; } .subtitle { font-size: 40px; line-height: 48px; } .description { font-size: 18px; line-height: 22px; } .carousel-container { max-width: 450px; height: 480px; } .carousel-slide img { width: 450px; height: 480px; } .solutions { max-width: 1024px; margin: 100px auto; } /* .swiper { padding: 0 20px; } */ .business-benefits { padding-inline: 15px; margin: 100px auto; } .partner-section { padding-inline: 15px; } .partner-content { gap: 30px; } .video-section { padding-inline: 15px; } .faq-section { padding-inline: 15px; margin: 0 auto 100px auto; } .contact-section { padding-inline: 15px; margin: 100px auto; } } @media screen and (max-width: 1024px) { .hero { flex-direction: column; gap: 40px; padding: 15px; } .hero-left { max-width: 100%; padding-block: 0; } .hero-right { width: 100%; justify-content: center; margin-top: 30px; } .blue-curve { display: none; } .carousel-container { max-width: 100%; height: 400px; margin: 0 auto; } .carousel-slide img { width: 100%; height: 400px; } .solutions-header { flex-direction: column; gap: 20px; text-align: center; } .partner-content { gap: 30px; flex-direction: column-reverse; } .partner-right { gap: 16px; flex-direction: row; } .partner-icon img { width: auto; object-fit: contain; } .partner-image { width: 100%; max-width: none; height: auto; } .partner-image img { object-fit: cover; border-radius: 90px 0; object-position: unset; } .faq-section .faq-container { align-items: center; } .faq-section img { display: none; } .video-section .svg-overlay { bottom: calc(0% - 60px); } .video-section .svg-overlay svg { width: 150px; height: 150px; } } @media screen and (max-width: 768px) { .hero-text h1, .hero-text h2, .hero-text .chez-brother { font-size: 48px; line-height: 44px; } .subtitle { font-size: 32px; line-height: 40px; } .description { font-size: 16px; line-height: 20px; } .brother-logo { max-width: 250px; } .carousel-container { height: 350px; border-radius: 50px 0 50px 0; } .carousel-slide img { height: 350px; } .partner-content { gap: 40px; text-align: center; } .partner-image { width: 100%; } .partner-right { width: 100%; align-items: center; } .partner-right .partner-text { font-size: 20px; } .business-benefits .section-title { font-size: 32px; line-height: 40px; } .video-container h2 { font-size: 32px; line-height: 40px; text-align: center; } .swiper-slide-active .product-card img { height: 230px; } /* .productsSwiper { height: 500px; padding: 30px 0; } */ /* .productsSwiper .swiper-slide-active { transform: scale(1.05); } */ } @media screen and (max-width: 480px) { .hero-text h1, .hero-text h2, .hero-text .chez-brother { font-size: 40px; line-height: 36px; } .subtitle { font-size: 28px; line-height: 34px; } .carousel-container { height: 300px; border-radius: 30px 0 30px 0; } .carousel-slide img { height: 300px; } .discover-btn, .quote-btn, .discover-btn-alt { font-size: 18px; padding: 8px 16px; } .solutions-header h2 { font-size: 28px; line-height: 34px; } /* .solutions .productsSwiper { height: 490px; } */ /* .product-card { width: 240px; } */ .product-card .product-card-content { flex: 1; } /* .swiper-slide-prev .product-card, .swiper-slide-next .product-card { height: 265px; } */ /* .swiper-slide-active .product-card { height: 300px; } */ /* .swiper-slide-active .product-card img { flex: 2.5; } */ /* .swiper-slide { width: 260px !important; } */ .video-section .svg-overlay { right: 0; } .faq-section { padding-block: 0; } .faq-question h3 { font-size: 18px; line-height: 24px; } .faq-answer p { font-size: 16px; line-height: 22px; } /* .solutions .productsSwiper { height: 450px; padding: 20px 0; } */ }