@font-face { font-family: "Chewie DEMO"; src: url(/assets/ChewieDEMO-Light-c6f5235cd740a35b026cc68c0aa67616fe38d2664b0f2008ee9b92dda0e05e8c.otf) format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Chewie DEMO"; src: url(/assets/ChewieDEMO-Regular-bca923c83a3d65848a5cf9fc7a181fc6d3dc270a0f62f658b3db462e962d9a47.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Chewie DEMO"; src: url(/assets/ChewieDEMO-Medium-1b45f2ef622b6bed20770ea81247c34107c727dab6ffeb1507f3278826a0d3ac.otf) format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Chewie DEMO"; src: url(/assets/ChewieDEMO-SemiBold-1a5bd09c5cdf5c0c304667aab692d0d3a4306a098c42ba254c39adc911f07207.otf) format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Chewie DEMO"; src: url(/assets/ChewieDEMO-Bold-b1cca9e4b9df5e9d1cf6e520c486124deb05aafd4e65955dd979565c37d3d62b.otf) format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Chewie DEMO"; src: url(/assets/ChewieDEMO-ExtraBold-c8b20e5cce2ecf4037c21c4c0a2eb3910d059e9ca8cbff7f3416e2f3a13a7f75.otf) format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } :root { --teal-900: #005461; --teal-700: #00acc7; --teal-500: #00b7b5; --teal-300: #498f99; --teal-100: #c7dfe0; --gray-light: #e5e7eb; --gray-text: #b5bec8; --bg-cream: #fafafa; --white: #ffffff; --gradient-warm: linear-gradient(110deg, #f9d25f 5%, #ff944a 100%); --gradient-cool: linear-gradient(140deg, #00b7b5 0%, #0074e8 100%); --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-soft: 0 0 8px rgba(0, 0, 0, 0.1); --shadow-card-light: 0 0 10px rgba(0, 0, 0, 0.05); --shadow-elev: 0 4px 4px rgba(0, 0, 0, 0.1); --font-display: "Chewie DEMO", "Poppins", "Helvetica Neue", system-ui, sans-serif; --font-body: "Open Sans", system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); color: var(--teal-900); background: linear-gradient(180deg, #FFF 0%, #E6F0E6 100%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Smooth in-page navigation when clicking anchor links (#features, etc.). Only affects programmatic scrolls — user-initiated wheel/trackpad scrolling keeps its native speed, so no scroll-lock or jank. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } img { max-width: 100%; display: block; } /* `overflow-x: hidden` forces overflow-y to `auto`, creating a nested Y-scroll container that competes with . Use `clip` (clips without creating a scroll container) with `hidden` as a fallback. */ .page-home { overflow-x: hidden; overflow-x: clip; } /* ============================================================ SCROLL REVEAL — opt-in via .js-reveal on (inline script) ============================================================ */ .js-reveal .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal, .js-reveal .reveal.is-visible { opacity: 1; transform: none; transition: none; } } .container { max-width: 1332px; margin: 0 auto; padding: 0 54px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; background: var(--teal-900); border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; overflow: hidden; overflow: clip; } .hero__stage { position: relative; width: 100%; max-width: 1440px; min-height: 775px; margin: 0 auto; } .hero__nav { position: absolute; top: 31px; left: 54px; right: 54px; height: 80px; background: rgba(0, 0, 0, 0.15); border-radius: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px 0 34px; z-index: 5; } .hero__logo-link { display: inline-flex; align-items: center; text-decoration: none; } .hero__logo { height: 25px; width: 129px; object-fit: contain; } .hero__nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 16px; } .hero__nav-links a { color: var(--gray-text); text-decoration: none; transition: color 0.2s ease; } .hero__nav-links a:hover, .hero__nav-links a.is-active { color: var(--teal-500); } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 30px; font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 12px 28px; text-decoration: none; cursor: pointer; border: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--teal-500); color: var(--white); } .btn--primary:hover { box-shadow: 0 8px 24px rgba(0, 183, 181, 0.35); } .btn--ghost { background: transparent; color: var(--teal-500); border: 1px solid var(--teal-500); } .btn--dark-outline { background: transparent; color: var(--teal-900); border: 1px solid var(--teal-900); padding: 8px 24px; font-family: var(--font-body); font-weight: 400; font-size: 14px; letter-spacing: 0.04em; } .btn--header { height: 46px; width: 178px; padding: 0; } .hero__text-card { position: absolute; left: 54px; top: 140px; width: 658px; height: 511px; background: rgba(0, 0, 0, 0.15); border-radius: 25px; padding: 42px 42px 54px; display: flex; flex-direction: column; } .hero__title { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 70px; margin: 0 0 25px; background: linear-gradient(110.19deg, #f9d25f 4.73%, #ff944a 101.54%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__subtitle { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 33px; color: rgba(255, 255, 255, 0.7); margin: 0 0 68px; max-width: 489px; } .hero__cta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: auto; } .hero__cta .btn { height: 46px; } .hero__cta .btn--primary { width: 253px; } .hero__cta .btn--ghost { width: 231px; } .hero__image { position: absolute; left: 770px; top: 120px; width: 600px; height: auto; max-height: 540px; object-fit: contain; z-index: 2; pointer-events: none; } /* ============================================================ HERO ENTRANCE ANIMATION (runs once on page load, staggered) ============================================================ */ @keyframes hero-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes hero-fade-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } } @keyframes hero-fade-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } .hero__nav { animation: hero-fade-down 0.7s ease-out 0.05s both; } .hero__title { animation: hero-fade-up 0.8s ease-out 0.2s both; } .hero__subtitle { animation: hero-fade-up 0.8s ease-out 0.4s both; } .hero__cta { animation: hero-fade-up 0.8s ease-out 0.6s both; } .hero__image { animation: hero-fade-right 0.9s ease-out 0.35s both; } @media (prefers-reduced-motion: reduce) { .hero__nav, .hero__title, .hero__subtitle, .hero__cta, .hero__image { animation: none; } } /* ============================================================ STATS BAR ============================================================ */ .stats-wrap { position: relative; z-index: 5; margin-top: -87px; padding: 0 54px; } .stats { background: var(--white); border: 1px solid var(--gray-light); border-radius: 25px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); height: 162px; padding: 51px 178px 39px 178px; max-width: 1332px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 121px; } .stat { text-align: center; flex-shrink: 0; } .stat__value { background: var(--gradient-cool); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 40px; margin: 0 0 14px; white-space: nowrap; } .stat__label { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 30px; color: var(--teal-900); margin: 0; white-space: nowrap; } .stat:last-child .stat__label { font-size: 16px; } /* ============================================================ FEATURES SECTION (Tout ce dont tu as besoin) ============================================================ */ .features { padding: 46px 0 0; position: relative; } .features__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } .features > .features__grid { grid-template-columns: 1.6fr 1fr; } .features__hero { position: relative; height: 602px; border-radius: 25px; overflow: hidden; border: 1px solid var(--gray-light); } .features__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .features__hero-content { position: absolute; left: 41px; right: 41px; bottom: 60px; z-index: 2; } .features__hero-title { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 56px; color: transparent; background: var(--gradient-warm); -webkit-background-clip: text; background-clip: text; margin: 0 0 18px; } .features__hero-text { color: var(--white); font-size: 16px; line-height: 30px; max-width: 540px; margin: 0 0 32px; } .features__hero .btn { width: 277px; height: 48px; } .features__cards { display: flex; flex-direction: column; gap: 24px; } .feature-card { background: var(--white); border: 1px solid var(--teal-100); border-radius: 25px; padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; } .feature-card__head { display: flex; align-items: center; gap: 18px; } .feature-card__icon { width: 38px; height: 38px; flex-shrink: 0; } .feature-card__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 30px; background: var(--gradient-cool); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .feature-card__body { font-size: 16px; line-height: 28px; color: var(--teal-900); margin: 0; } .feature-card--wide { grid-column: 1 / -1; } .features__wide { margin-top: 36px; } /* ============================================================ SIMPLE SECTION (dark) ============================================================ */ .simple { background: var(--teal-900); padding: 88px 0 79px; position: relative; margin-top: 60px; } .simple > .container { padding-left: 0; padding-right: 0; } .simple__title { font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1.2; color: var(--white); margin: 0 0 30px; text-align: left; } .simple__grid { display: grid; grid-template-columns: minmax(0, 766px) 1fr; gap: 60px; align-items: start; justify-content: space-between; } .simple__left { display: flex; flex-direction: column; } .simple__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; } .simple-card { background: rgba(0, 0, 0, 0.15); border-radius: 25px; padding: 40px 30px 36px; color: var(--white); display: flex; flex-direction: column; gap: 15px; min-height: 256px; } .simple-card:nth-child(n+3) { min-height: 247px; } .simple-card__icon { width: 38px; height: 38px; margin: 0; } .simple-card__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 24px; background: var(--gradient-warm); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .simple-card__body { font-size: 16px; line-height: 26px; color: var(--white); margin: 0; } .simple__phone-wrap { display: flex; justify-content: center; align-items: flex-start; padding-top: 20px; } .simple__phone { height: 610px; border-radius: 19px; } /* ============================================================ CONTENUS (exclusifs) SECTION ============================================================ */ .contenus { padding: 72px 0 0; } .contenus > .container { padding-left: 0; padding-right: 0; } .contenus__head { text-align: center; max-width: 720px; margin: 0 auto 60px; } .contenus__title { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 50px; background: var(--gradient-cool); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 18px; } .contenus__sub { font-size: 16px; line-height: 28px; color: var(--teal-900); margin: 0; } .contenus__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .contenu-card { background: var(--teal-900); border-radius: 25px; padding: 40px 36px; color: var(--white); min-height: 272px; } .contenu-card__icon { width: 52px; height: 47px; margin-bottom: 20px; } .contenu-card__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 28px; background: var(--gradient-warm); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 22px; } .contenu-card__list { margin: 0; padding: 0 0 0 22px; color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 28px; } /* ============================================================ COMMUNAUTE SECTION ============================================================ */ .communaute { padding: 60px 0 49px; } .communaute__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .communaute__image { border-radius: 25px; overflow: hidden; height: 416px; position: relative; } .communaute__image img { width: 100%; height: 100%; object-fit: cover; } .communaute__pill { display: inline-flex; align-items: center; margin-bottom: 24px; } .communaute__title { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 54px; background: var(--gradient-cool); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 20px; } .communaute__text { color: var(--teal-900); font-size: 16px; line-height: 28px; margin: 0 0 36px; max-width: 530px; } .communaute__cta { display: flex; gap: 19px; flex-wrap: wrap; } .communaute__cta .btn { width: 260px; height: 48px; padding: 0; } /* ============================================================ CTA DOWNLOAD CARD ============================================================ */ .cta-download-section { padding-bottom: 54px; } .cta-download-section > .container { padding-left: 0; padding-right: 0; } .cta-download { background: var(--white); border: 1px solid var(--teal-100); border-radius: 25px; box-shadow: var(--shadow-elev); padding: 48px 62px 43px 53px; display: flex; flex-direction: column; gap: 40px; } .cta-download__top { display: flex; align-items: center; justify-content: space-between; gap: 60px; margin: 0; } .cta-download__top > div:first-child { flex: 1; min-width: 0; } .cta-download__title { font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 74px; color: var(--teal-900); margin: 0 0 10px; } .cta-download__sub { font-family: var(--font-body); font-weight: 400; color: var(--teal-300); font-size: 16px; line-height: 28px; margin: 0; } .cta-download__stores { display: flex; gap: 25px; align-items: center; flex-shrink: 0; } .cta-download__stores img { height: 66px; width: auto; } .cta-download__divider { height: 1px; background: var(--teal-100); margin: 0; } .cta-download__form { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin: 0; } .cta-download__form-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--teal-300); margin: 0; flex-shrink: 0; } .cta-download__input-group { display: flex; gap: 19px; flex: 1; min-width: 320px; max-width: 595px; align-items: center; margin-left: auto; } .cta-download__input { flex: 1; height: 48px; background: var(--bg-cream); border: 1px solid var(--teal-100); border-radius: 30px; padding: 0 32px; font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--teal-900); outline: none; transition: border-color 0.2s ease; } .cta-download__input::placeholder { color: var(--teal-300); } .cta-download__input:focus { border-color: var(--teal-500); } .cta-download__submit { height: 48px; width: 165px; padding: 0; flex-shrink: 0; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--teal-900); color: rgba(255, 255, 255, 0.6); padding: 51px 0 28px; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; align-items: start; margin-bottom: 60px; } .footer__logo { height: 36px; width: auto; margin-bottom: 28px; } .footer__tagline { font-size: 16px; line-height: 30px; margin: 0; max-width: 392px; } .footer__col-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--white); margin: 0 0 20px; letter-spacing: 0.02em; } .footer__list { list-style: none; margin: 0; padding: 0; } .footer__list li { font-size: 14px; line-height: 32px; } .footer__list a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s ease; } .footer__list a:hover { color: var(--white); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer__copy { font-size: 14px; margin: 0; } .footer__social { display: flex; gap: 24px; align-items: center; } .footer__social img { width: 22px; height: 22px; opacity: 0.7; transition: opacity 0.2s ease; } .footer__social a:hover img { opacity: 1; } /* ============================================================ DECORATIVE BUBBLES ============================================================ */ .bubble { position: absolute; width: 60px; height: 60px; pointer-events: none; z-index: 5; } .bubble--hero-1 { top: 60px; right: 350px; transform: rotate(-14deg); } .bubble--hero-2 { top: 95px; right: 480px; } .bubble--hero-3 { top: 250px; right: 0; } .features__deco-1 { left: 280px; top: 200px; } .features__deco-2 { left: 540px; top: 160px; transform: rotate(45deg); } .simple__deco { right: 60px; top: 200px; transform: rotate(-37deg); } .simple__deco-2 { right: 50px; bottom: 120px; transform: rotate(45deg); } .communaute__deco-1 { left: 260px; top: 200px; } .communaute__deco-2 { left: 80px; top: 280px; } .communaute__deco-3 { left: 250px; top: 340px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1380px) { .hero__image { left: auto; right: 24px; width: 540px; } } @media (max-width: 1100px) { .container { padding-left: 32px; padding-right: 32px; } /* Re-enable container padding inside sections that neutralized it on desktop */ .simple > .container, .contenus > .container, .cta-download-section > .container { padding-left: 32px; padding-right: 32px; } /* Sections with class="X container" — restore horizontal padding without losing vertical */ .features { padding: 46px 32px 0; } .communaute { padding: 60px 32px 49px; } .hero { overflow: visible; } .hero__stage { height: auto; min-height: 0; padding: 24px 32px 60px; } .hero__nav { position: static; padding: 0 16px; height: 64px; margin-bottom: 32px; } .hero__text-card { position: static; width: 100%; height: auto; padding: 32px 28px; margin-bottom: 24px; } .hero__title { font-size: 36px; line-height: 50px; } .hero__subtitle { margin: 0 0 32px; max-width: 100%; } .hero__image { position: static; width: 100%; max-width: 600px; max-height: none; margin: 0 auto 24px; display: block; } .stats-wrap { padding: 0 32px; margin-top: -50px; } .stats { padding: 32px 40px; height: auto; flex-wrap: wrap; gap: 32px; justify-content: space-around; } .features__grid, .features > .features__grid { grid-template-columns: 1fr; } .features__hero { height: 460px; } .features__hero-title { font-size: 32px; line-height: 42px; } .simple__grid { grid-template-columns: 1fr; } .simple__cards { grid-template-columns: 1fr; } .simple__phone-wrap { justify-content: center; } .contenus__grid { grid-template-columns: 1fr; } .communaute__grid { grid-template-columns: 1fr; } .communaute__image { height: 360px; } .cta-download { padding: 32px 28px; } .cta-download__top { flex-direction: column; align-items: flex-start; } .cta-download__stores { flex-wrap: wrap; } .cta-download__title { font-size: 36px; line-height: 50px; } .cta-download__form-label { width: 100%; } .cta-download__input-group { width: 100%; max-width: none; min-width: 0; margin-left: 0; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .container { padding-left: 20px; padding-right: 20px; } .simple > .container, .contenus > .container, .cta-download-section > .container { padding-left: 20px; padding-right: 20px; } .features { padding: 32px 20px 0; } .hero__stage { padding: 16px 16px 60px; } .hero__nav { display: none; } .hero__text-card { padding: 24px 20px; border-radius: 20px; } .hero__title { font-size: 28px; line-height: 40px; } .hero__subtitle { font-size: 15px; line-height: 28px; margin: 0 0 24px; } .hero__cta { gap: 12px; } .hero__cta .btn { width: 100%; } .hero__image { max-width: 100%; } .stats-wrap { padding: 0 20px; margin-top: -32px; } .stats { gap: 20px; padding: 24px 16px; border-radius: 20px; flex-direction: column; } .stat__value { font-size: 36px; line-height: 1.1; } .stat__label { font-size: 13px; white-space: normal; } .stat:last-child .stat__label { font-size: 14px; } .features { padding-top: 32px; } .features__hero { height: 380px; } .features__hero-content { left: 24px; right: 24px; bottom: 32px; } .features__hero-title { font-size: 26px; line-height: 36px; } .features__hero .btn { width: 100%; } .feature-card { padding: 22px 22px; } .feature-card__title { font-size: 20px; line-height: 26px; } .simple { padding: 56px 0 56px; margin-top: 32px; } .simple__title { font-size: 30px; margin: 0 0 24px; } .simple__cards { gap: 20px; } .simple-card { min-height: 0; padding: 28px 22px; } .simple-card:nth-child(n+3) { min-height: 0; } .contenus { padding: 56px 0 40px; } .contenus__head { margin-bottom: 32px; } .contenus__title { font-size: 26px; line-height: 34px; } .contenu-card { padding: 28px 24px; min-height: 0; } .contenu-card__title { font-size: 22px; } .communaute { padding: 40px 20px 56px; } .communaute__grid { gap: 32px; } .communaute__image { height: 280px; } .communaute__title { font-size: 26px; line-height: 34px; } .communaute__text { font-size: 15px; line-height: 26px; margin-bottom: 24px; } .communaute__cta { gap: 12px; width: 100%; } .communaute__cta .btn { width: 100%; height: 46px; } .cta-download-section { padding-bottom: 56px; } .cta-download { padding: 28px 22px; border-radius: 20px; } .cta-download__title { font-size: 24px; line-height: 32px; } .cta-download__sub { font-size: 14px; line-height: 24px; } .cta-download__stores { gap: 12px; } .cta-download__stores img { height: 50px; } .cta-download__input-group { flex-direction: column; align-items: stretch; gap: 12px; } .cta-download__input { width: 100%; height: 48px; min-height: 48px; flex: 0 0 48px; padding: 0 24px; -webkit-appearance: none; appearance: none; } .cta-download__submit { width: 100%; height: 48px; flex: 0 0 48px; } .footer { padding: 40px 0 24px; } .footer__grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; } .footer__bottom { flex-direction: column; gap: 16px; text-align: center; } } /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */