/* RIVES — landing page (EN / FR) Built from Figma RIV003_Landing_Page_V1 (frame 8002:12388, 1443px wide). */ @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --navy: #101523; --gold: #f2b805; --amber: #f29e05; --mist: #c4dce8; --gutter: clamp(20px, 3.26vw, 47px); --star-w: min(1156px, 92vw); /* footer star outline width */ --ease: cubic-bezier(.2, .7, .2, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--navy); color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, p { margin: 0; } /* ---------- Language switching ---------- Both languages live in the markup; (set before first paint by the inline head script) decides which one shows. No JS = English. */ html:not([data-lang="fr"]) [data-l="fr"], html[data-lang="fr"] [data-l="en"] { display: none !important; } .skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 100px; background: var(--amber); color: var(--navy); font-weight: 700; text-decoration: none; } .skip:focus { top: 12px; } /* ---------- Header ---------- */ .site-head { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding: clamp(20px, 3vw, 43px) var(--gutter) 0; } .site-head .logo img { width: clamp(120px, 18.1vw, 261px); height: auto; } .lang { display: flex; align-items: center; gap: 6px; margin-top: clamp(2px, 1.1vw, 14px); padding-right: clamp(0px, 3.3vw, 1px); font-size: 14px; line-height: 1.6; text-transform: uppercase; } .lang button { font: inherit; font-weight: 700; color: #fff; background: none; border: 0; padding: 6px 4px; cursor: pointer; opacity: .6; transition: opacity .2s; } .lang button:hover, .lang button[aria-pressed="true"] { opacity: 1; } .lang button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .lang .sep { font-weight: 300; } .lang button:focus-visible, .btn:focus-visible, .site-foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; height: clamp(620px, 98.55vw, 1422px); background: #4f7fa8; } .hero__bg { position: absolute; inset: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 83%; } .hero__content { position: relative; z-index: 1; padding: clamp(118px, 17.2vw, 248px) 20px 0; text-align: center; } .hero__title { max-width: 1121px; margin: 0 auto; font-weight: 400; font-size: clamp(29px, 4.3vw, 62px); line-height: 1.194; letter-spacing: 1px; text-wrap: pretty; } .hero__title em { font-style: normal; font-weight: 600; color: var(--gold); } .hero__badge { width: 46px; height: 46px; margin: clamp(16px, 1.6vw, 23px) auto; } .hero__stats { font-weight: 700; font-size: clamp(15px, 1.6vw, 23px); line-height: 1.565; letter-spacing: 1px; color: rgba(255, 255, 255, .8); } .hero__stats .sep { font-weight: 400; margin: 0 .55em; } /* ---------- Location / USPs ---------- */ .intro { position: relative; overflow: hidden; isolation: isolate; padding: clamp(52px, 5.8vw, 84px) 20px clamp(64px, 4.8vw, 69px); text-align: center; color: var(--navy); /* sampled from the Figma render (sky image under Rectangle 7's #c4dce8 fade) */ background: linear-gradient(180deg, #e9edf1 0%, #c6d0d8 13.6%, #abbcc9 27.3%, #9bb0bf 40.9%, #93acbe 58%, #9cb7c9 75.1%, #adc9d7 88.7%, #bcd5e1 100%); } .intro::before { /* dot grid from Figma "Regular Square Grid" */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/grid.svg") 50% 100% / max(100%, 1443px) auto no-repeat; } .intro h2 { max-width: 1121px; margin: 0 auto; font-weight: 600; font-size: clamp(20px, 1.95vw, 28px); line-height: 1.3; letter-spacing: 1px; text-wrap: balance; } .intro .lede { max-width: 760px; margin: clamp(12px, 1.4vw, 20px) auto 0; font-size: clamp(16px, 1.6vw, 23px); line-height: 1.26; letter-spacing: 1px; text-wrap: balance; } .usps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1092px; margin: 24px auto 0; } .usp { display: flex; flex-direction: column; align-items: center; padding: 23px 18px 22px; color: #fff; text-shadow: 0 1px 3px rgba(16, 21, 35, .18); } .usp + .usp { border-left: 1px solid rgba(255, 255, 255, .75); } .usp img { width: 86px; height: 86px; } .usp h3 { margin-top: 28px; max-width: 320px; font-weight: 600; font-size: 17px; line-height: 22px; opacity: .9; text-wrap: balance; } .usp p { max-width: 300px; font-weight: 400; font-size: 17px; line-height: 22px; opacity: .9; text-wrap: balance; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 47px; padding: 0 36px; border: 1px solid var(--amber); border-radius: 100px; background: var(--navy); color: var(--amber); font-weight: 700; font-size: 14px; line-height: 1.6; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s, transform .25s var(--ease); } .btn img { flex: none; transition: transform .25s var(--ease); } .btn:hover { background: #1b2236; } .btn:hover img { transform: translateY(2px); } .btn--map:hover img { transform: translateX(3px); } /* ---------- Gallery ---------- */ .gallery { position: relative; padding: 14px 12px 0; background: var(--navy); } .gallery__cta { position: absolute; z-index: 2; left: 50%; top: -17px; transform: translateX(-50%); } .gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; max-width: 1419px; margin: 0 auto; } .shot { position: relative; overflow: hidden; margin: 0; aspect-ratio: 703 / 468; background: #1b2236; } .shot img { position: absolute; top: 0; left: 0; max-width: none; height: auto; } /* Figma crops, 8002:14224 / 8002:14225 (they also keep the corner marks out of frame) */ .shot--aerial img { width: 141.02%; transform: translate(-0.886%, -18.84%); } .shot--interior img { width: 128.96%; transform: translate(-5.785%, -1.147%); } .gallery__map { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: -17px; } /* ---------- Footer ---------- */ .site-foot { position: relative; overflow: hidden; isolation: isolate; padding: calc(69px + var(--star-w) * .334) 20px 44px; text-align: center; background: var(--navy); } .site-foot__star { position: absolute; z-index: -1; top: 69px; left: 50%; width: var(--star-w); height: auto; max-width: none; transform: translateX(-50%); pointer-events: none; /* Figma fades the outline out with Rectangle 10/11 (transparent → #101523) */ -webkit-mask-image: linear-gradient(#000 50.4%, transparent 74.3%); mask-image: linear-gradient(#000 50.4%, transparent 74.3%); } .site-foot__logo { width: clamp(170px, calc(var(--star-w) * .276), 319px); margin: 0 auto; } .site-foot__mirastar { width: clamp(130px, 11.8vw, 170px); margin: clamp(36px, 4.2vw, 61px) auto 0; } .contact { margin-top: 34px; font-style: normal; font-size: 17px; line-height: 22px; opacity: .9; } .contact strong { display: block; font-weight: 600; } .contact a { color: var(--amber); text-decoration: none; } .contact a:hover { text-decoration: underline; text-underline-offset: 3px; } .disclaimer { max-width: 1346px; margin: 49px auto 0; font-size: 13px; line-height: 16px; opacity: .9; } .credit { margin-top: 27px; font-size: 13px; line-height: 16px; opacity: .5; } .credit a { text-decoration: none; } .credit a:hover { text-decoration: underline; } /* ---------- Reveal (only when JS is running) ---------- */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .usps { grid-template-columns: 1fr; max-width: 420px; margin-top: 20px; } .usp { padding: 26px 0; } .usp + .usp { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .75); } .usp h3 { margin-top: 18px; } } @media (max-width: 700px) { .gallery__grid { grid-template-columns: 1fr; gap: 10px; } .gallery { padding: 34px 10px 0; } .btn { padding: 0 24px; font-size: 13px; gap: 10px; } .disclaimer { font-size: 12px; } }