/* ========================================================= CLÉLYSSÉ — MAIN STYLESHEET Luxury Edition Typography: Montserrat (titres + corps) ========================================================= */ /* ========================================================= 1. FONTS Montserrat chargée via Google Fonts dans le (voir index.html) — plus de police locale à héberger. ========================================================= */ /* ========================================================= 2. VARIABLES ========================================================= */ :root { /* Colors */ --night: #101820; --night-2: #17242d; --night-3: #24343d; --gold: #cda43e; --gold-light: #e8c96b; --gold-dark: #98751d; --ivory: #f7f4ee; --cream: #eee8dd; --white: #ffffff; --ink: #182229; --muted: #73797c; --line: rgba(16, 24, 32, .11); --line-light: rgba(255, 255, 255, .13); /* Typography */ --serif: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* Echelle de tailles cohérente (labels / texte / titres) */ --fs-label: 11px; /* petits libellés majuscules trackés */ --fs-caption: 12px; /* légendes, noms, mentions secondaires */ --fs-small: 13px; /* boutons, nav, meta */ --fs-body: 15px; /* paragraphes courants */ /* Shadow */ --shadow: 0 30px 80px rgba(16, 24, 32, .12); } /* ========================================================= 3. RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { margin: 0; padding: 0; scroll-behavior: smooth; scroll-padding-top: 100px; } body { margin: 0; padding: 0; color: var(--ink); background: var(--ivory); font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.7; overflow-x: hidden; } body, button, input, select, textarea { font-family: var(--sans); } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ========================================================= 4. CONTAINER ========================================================= */ .container { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .row { position: relative; z-index: 2; } /* ========================================================= CLÉLYSSÉ — PREMIUM SAAS / FRAMER BACKGROUND ========================================================= */ :root { --grid-size: 64px; --grid-color: rgba(16, 24, 32, 0.045); --grid-gold: rgba(205, 164, 62, 0.07); } /* ========================================================= PAGE BACKGROUND ========================================================= */ body { position: relative; background: #f7f4ee; } /* ========================================================= ANIMATED GRID ========================================================= */ .page-grid { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 1; overflow: hidden; background-color: transparent; /* grille fine + accent doré toutes les 4 cases */ background-image: linear-gradient( to right, var(--grid-gold) 1px, transparent 1px ), linear-gradient( to bottom, var(--grid-gold) 1px, transparent 1px ), linear-gradient( to right, var(--grid-color) 1px, transparent 1px ), linear-gradient( to bottom, var(--grid-color) 1px, transparent 1px ); background-size: calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); background-position: center center; /* fondu sur les bords */ -webkit-mask-image: radial-gradient( ellipse 90% 80% at 50% 25%, #000 0%, rgba(0,0,0,.9) 45%, rgba(0,0,0,.5) 75%, transparent 100% ); mask-image: radial-gradient( ellipse 90% 80% at 50% 25%, #000 0%, rgba(0,0,0,.9) 45%, rgba(0,0,0,.5) 75%, transparent 100% ); animation: gridDrift 28s linear infinite, gridPulse 12s ease-in-out infinite alternate; } /* ========================================================= GRID MOTION ========================================================= */ @keyframes gridDrift { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 50% { background-position: 32px 32px, 32px 32px, 32px 32px, 32px 32px; } 100% { background-position: 64px 64px, 64px 64px, 64px 64px, 64px 64px; } } @keyframes gridPulse { from { opacity: .55; } to { opacity: .85; } } /* ========================================================= AMBIENT LIGHT ========================================================= */ .page-grid::before { content: ""; position: absolute; width: 800px; height: 800px; left: 50%; top: 5%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient( circle, rgba(205,164,62,.10) 0%, rgba(205,164,62,.045) 25%, transparent 68% ); filter: blur(30px); animation: gridGlow 10s ease-in-out infinite alternate; } /* ========================================================= SECOND LIGHT ========================================================= */ .page-grid::after { content: ""; position: absolute; width: 500px; height: 500px; right: -150px; top: 35%; border-radius: 50%; background: radial-gradient( circle, rgba(90,120,135,.07), transparent 70% ); filter: blur(50px); animation: ambientMove 14s ease-in-out infinite alternate; } @keyframes gridGlow { from { opacity: .45; transform: translateX(-50%) scale(.95); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } } @keyframes ambientMove { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-80px,40px,0) scale(1.15); } } /* ========================================================= CONTENT ABOVE GRID ========================================================= */ main, footer, nav { position: relative; z-index: 2; } /* ========================================================= IMPORTANT : SECTIONS TRANSPARENTES ========================================================= */ .section { position: relative; } /* On laisse apparaître le grid dans les zones claires. Les sections qui doivent avoir leur propre fond restent opaques volontairement. */ .intro, .method, .faq { background: rgba(247,244,238,.78); } .properties, .testimonials, .reassurance { background: rgba(255,255,255,.82); } /* ========================================================= PREMIUM GRID LOCAL — SECTIONS CLAIRES ========================================================= */ .intro::before, .method::before, .faq::before, .properties::before, .testimonials::before, .reassurance::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4; background-image: linear-gradient( to right, rgba(16,24,32,.035) 1px, transparent 1px ), linear-gradient( to bottom, rgba(16,24,32,.035) 1px, transparent 1px ); background-size: 64px 64px; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 15%, #000 70%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000 15%, #000 70%, transparent 100% ); animation: sectionGridMove 35s linear infinite; } @keyframes sectionGridMove { from { background-position: 0 0, 0 0; } to { background-position: 64px 64px, 64px 64px; } } /* contenu au-dessus du grid */ .intro > *, .method > *, .faq > *, .properties > *, .testimonials > *, .reassurance > * { position: relative; z-index: 2; } /* ========================================================= AMBIENT LIGHT — FRAMER STYLE ========================================================= */ .page-grid::after { content: ""; position: absolute; width: 700px; height: 700px; top: -250px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(205, 164, 62, .09) 0%, rgba(205, 164, 62, .035) 35%, transparent 70% ); filter: blur(20px); animation: ambientGlow 12s ease-in-out infinite alternate; } @keyframes ambientGlow { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-80px, 70px, 0) scale(1.08); } } /* ========================================================= 6. CURSOR GLOW ========================================================= */ .cursor-glow { position: fixed; width: 500px; height: 500px; left: 50%; top: 30%; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient( circle, rgba(205, 164, 62, .07), transparent 68% ); transform: translate(-50%, -50%); filter: blur(20px); } /* ========================================================= 7. GLOBAL LAYERING ========================================================= */ main, footer, nav, section { position: relative; } main, footer, nav { z-index: 1; } /* ========================================================= 8. SECTIONS ========================================================= */ .section { position: relative; width: 100%; padding: 120px 0; } /* ========================================================= 9. SECTION LABEL ========================================================= */ .section-label { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--gold-dark); font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; } /* .section-label::before { content: ""; width: 32px; height: 1px; flex: 0 0 auto; background: currentColor; } */ /* ========================================================= 10. GLOBAL SECTION TITLE ========================================================= */ .section-title { max-width: 720px; margin: 0; color: var(--night); font-family: var(--serif); /* Beaucoup plus discret que précédemment. Le luxe vient ici de l'espace et du rythme. */ font-size: clamp(30px, 3.2vw, 42px); font-weight: 500; letter-spacing: -.015em; line-height: 1.08; } .section-title em { color: var(--gold-dark); font-style: italic; font-weight: 400; } .section-title.light { color: #fff; } /* ========================================================= 11. SECTION COPY ========================================================= */ .section-copy { max-width: 600px; margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.85; } .section-copy.light { color: rgba(255, 255, 255, .6); } /* ========================================================= 12. BUTTONS ========================================================= */ .btn-primary-gold { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 14px 24px; border: 1px solid var(--gold); background: var(--gold); color: var(--night); font-size: 13px; font-weight: 700; line-height: 1.2; transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; } .btn-primary-gold:hover { color: var(--night); background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: 0 15px 35px rgba(205, 164, 62, .22); } .btn-text-light { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 500; transition: color .25s ease; } .btn-text-light:hover { color: var(--gold-light); } .btn-outline-dark { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 20px; border: 1px solid rgba(16, 24, 32, .25); color: var(--night); font-size: 13px; font-weight: 600; transition: color .3s ease, border-color .3s ease, background .3s ease; } .btn-outline-dark:hover { color: var(--gold-dark); border-color: var(--gold); } /* ========================================================= 13. NAVIGATION ========================================================= */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 92px; } .site-nav.scrolled { height: 74px; background: rgba(16, 24, 32, .96); box-shadow: 0 15px 45px rgba(0, 0, 0, .18); } .site-nav .container { max-width: 1200px; height: 100%; background: rgba(16, 24, 32, .76); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .07); transition: height .35s ease, background .35s ease, box-shadow .35s ease; border-radius: 50px; } .site-nav .navbar { height: 100%; } .brand { display: flex; align-items: center; gap: 12px; color: #fff !important; } .brand-logo { width: 50px; height: 50px; object-fit: cover; border-radius: 50%; background: #fff; transition: .35s ease; } .site-nav.scrolled .brand-logo { width: 43px; height: 43px; } .brand-text { display: flex; flex-direction: column; } .brand-word { color: #fff; font-size: 21px; font-weight: 600; letter-spacing: -.035em; line-height: 1; } .brand-sub { margin-top: 5px; color: var(--gold-light); font-size: var(--fs-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; } .nav-link { margin: 0 7px; color: rgba(255, 255, 255, .7) !important; font-size: 12px; font-weight: 500; transition: color .2s ease; } .nav-link:hover { color: var(--gold-light) !important; } .nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 16px; border: 1px solid rgba(205, 164, 62, .65); color: #fff; font-size: 14px; font-weight: 600; transition: .3s ease; border-radius: 20px; } .nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--night); } .navbar-toggler { border: 0; color: #fff !important; } .navbar-toggler:focus { box-shadow: none; } .navbar-toggler i { font-size: 28px; } /* ========================================================= 14. HERO ========================================================= */ .hero { position: relative; min-height: 820px; display: flex; align-items: center; overflow: hidden; padding: 145px 0 90px; color: #fff; background: radial-gradient( circle at 85% 15%, rgba(205, 164, 62, .12), transparent 28% ), linear-gradient( 125deg, #0b1319, #17242d 60%, #101920 ); } .hero-container { position: relative; z-index: 2; } .hero-light { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px); } .hero-light-one { width: 500px; height: 500px; right: -180px; top: 100px; background: rgba(205, 164, 62, .07); } .hero-light-two { width: 400px; height: 400px; left: -200px; bottom: -150px; background: rgba(120, 150, 160, .06); } .hero-content { position: relative; z-index: 3; } /* ========================================================= 15. HERO EYEBROW ========================================================= */ .eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; color: var(--gold-light); font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .eyebrow-line { width: 36px; height: 1px; flex: 0 0 auto; background: var(--gold); } /* ========================================================= 16. HERO TITLE ========================================================= */ .hero-title { max-width: 630px; margin: 0; color: #fff; font-family: var(--serif); /* Taille volontairement réduite. Le titre doit respirer et non occuper tout l'écran. */ font-size: clamp(38px, 4.2vw, 54px); font-weight: 500; letter-spacing: -.02em; line-height: 1.02; } .hero-title em { color: var(--gold-light); font-style: italic; font-weight: 400; } /* ========================================================= 17. HERO DESCRIPTION ========================================================= */ .hero-description { max-width: 540px; margin: 28px 0 0; color: rgba(255, 255, 255, .65); font-size: 15px; line-height: 1.85; } /* ========================================================= 18. HERO ACTIONS ========================================================= */ .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 30px; } .hero-proof { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; } .hero-proof span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .5); font-size: var(--fs-caption); } .hero-proof i { color: var(--gold); } /* ========================================================= 19. HERO VISUAL ========================================================= */ .hero-visual { position: relative; width: 100%; } .hero-image-wrap { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(205, 164, 62, .35); } .hero-image-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(16, 24, 32, .03), rgba(16, 24, 32, .2) ); } .hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); } .hero-visual:hover .hero-image-wrap img { transform: scale(1.035); } .hero-image-number { position: absolute; top: 22px; right: 22px; z-index: 5; color: rgba(255, 255, 255, .82); font-size: var(--fs-label); letter-spacing: .12em; } .hero-image-number span { margin: 0 5px; color: var(--gold); } /* ========================================================= 20. HERO PROPERTY CARD ========================================================= */ .hero-property-card { position: relative; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 18px; width: 100%; padding: 15px 24px; background: rgba(16, 24, 32, .93); border-left: 2px solid var(--gold); box-shadow: 0 25px 60px rgba(0, 0, 0, .25); } .card-eyebrow { flex-shrink: 0; margin-bottom: 0; color: var(--gold-light); font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .hero-property-card strong { flex: 1 1 260px; color: #fff; font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; } .card-line { flex-shrink: 0; width: 1px; height: 26px; margin: 0; background: var(--gold); } .hero-property-card small { flex-shrink: 0; color: rgba(255, 255, 255, .46); font-size: var(--fs-caption); white-space: nowrap; } .hero-bottom { position: absolute; left: 0; bottom: 20px; display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, .38); font-size: var(--fs-label); letter-spacing: .2em; } .scroll-line { width: 65px; height: 1px; background: rgba(255, 255, 255, .23); } /* ========================================================= 21. INTRO ========================================================= */ .intro { background: var(--ivory); } .intro-media { position: relative; } .intro-video { width: auto; max-width: 100%; height: 640px; margin: 0 auto; aspect-ratio: 9 / 16; overflow: hidden; background: var(--night); } .intro-video video { display: block; width: 100%; height: 100%; object-fit: contain; } .media-caption { position: relative; margin-top: 14px; display: flex; justify-content: space-between; gap: 20px; padding: 12px 14px; background: rgba(16, 24, 32, .78); backdrop-filter: blur(10px); color: rgba(255, 255, 255, .68); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; } .signature { display: flex; flex-direction: column; margin-top: 20px; } .signature strong { color: var(--night); font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.2; } .signature span { color: var(--muted); font-size: var(--fs-caption); } .intro-quote { max-width: 640px; margin-top: 35px; padding-left: 24px; border-left: 1px solid var(--gold); color: var(--night); font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -.01em; line-height: 1.35; } .intro-details { margin-top: 32px; } .intro-detail { display: flex; gap: 23px; padding: 19px 0; border-bottom: 1px solid var(--line); } .intro-detail:first-child { border-top: 1px solid var(--line); } .detail-number { min-width: 32px; color: var(--gold-dark); font-size: var(--fs-label); font-weight: 700; } .intro-detail h3 { margin: 0 0 4px; color: var(--night); font-size: 18px; font-weight: 600; } .intro-detail p { max-width: 550px; margin: 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.7; } /* ========================================================= 22. PROPERTY GALLERY ========================================================= */ .properties { background: #fff; } .property-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; grid-template-rows: 340px 270px; gap: 12px; } .property-card { position: relative; min-height: 240px; overflow: hidden; background: var(--night); } .property-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); } .property-card:hover img { transform: scale(1.05); } .property-large { grid-row: span 2; } .property-medium { grid-column: span 1; } .property-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, transparent 35%, rgba(8, 15, 19, .75) ); } .property-info { position: absolute; z-index: 2; left: 25px; right: 25px; bottom: 24px; color: #fff; } .property-info span { display: block; margin-bottom: 7px; color: var(--gold-light); font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .property-info h3 { margin: 0; color: #fff; font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; } .property-info small { display: block; margin-top: 7px; color: rgba(255, 255, 255, .6); font-size: var(--fs-caption); } /* ========================================================= 23. SERVICES ========================================================= */ .services { background: var(--night); color: #fff; } .services-header { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; } .services .section-label { color: var(--gold-light); } .services-list { margin-top: 70px; } .service-row { position: relative; display: grid; grid-template-columns: 60px 1fr 1fr 45px; align-items: center; gap: 28px; min-height: 135px; border-top: 1px solid var(--line-light); transition: padding .35s ease; } .service-row:last-child { border-bottom: 1px solid var(--line-light); } .service-row:hover { padding-left: 12px; } .service-number { color: var(--gold); font-size: var(--fs-label); font-weight: 700; } .service-title { color: #fff; font-family: var(--serif); /* Les services restent élégants, mais ne dominent pas la page. */ font-size: clamp(29px, 3vw, 37px); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; } .service-description { max-width: 390px; color: rgba(255, 255, 255, .52); font-size: var(--fs-body); line-height: 1.75; } .service-arrow { color: var(--gold-light); font-size: 17px; transition: transform .3s ease; } .service-row:hover .service-arrow { transform: translate(4px, -4px); } /* ========================================================= 24. METHOD ========================================================= */ .method { background: #fff; } .method-intro { max-width: 750px; margin: 0 auto; } .method-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin-top: 85px; } .method-line { position: absolute; top: 35px; left: 16%; right: 16%; height: 1px; background: rgba(205, 164, 62, .4); } .method-step { position: relative; text-align: center; } .step-number { position: relative; z-index: 2; width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 23px; border: 1px solid rgba(205, 164, 62, .6); border-radius: 50%; background: var(--cream); color: var(--gold-dark); font-size: var(--fs-label); font-weight: 700; } .method-step h3 { margin: 0 0 9px; color: var(--night); font-size: 18px; font-weight: 600; } .method-step p { max-width: 280px; margin: 0 auto; color: var(--muted); font-size: var(--fs-body); line-height: 1.75; } /* ========================================================= 25. TESTIMONIALS ========================================================= */ .testimonials { overflow: hidden; background: #fff; padding-bottom: 130px; } .testimonials-heading { margin-bottom: 60px; } .testimonial-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 8%, #000 92%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, #000 8%, #000 92%, transparent 100% ); } .testimonial-track { display: flex; width: max-content; gap: 16px; } .marquee-right .testimonial-track { animation: testimonialRight 45s linear infinite; } .marquee-left .testimonial-track { animation: testimonialLeft 45s linear infinite; } @keyframes testimonialRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes testimonialLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testimonial-card { width: 380px; min-height: 225px; padding: 26px; flex-shrink: 0; background: var(--ivory); border-radius: 8px; } .stars { color: var(--gold); font-size: 14px; letter-spacing: .12em; } .testimonial-card p { margin: 19px 0; color: var(--night); font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -.005em; line-height: 1.4; } .testimonial-author { display: flex; flex-direction: column; gap: 2px; } .testimonial-author strong { color: var(--night); font-size: var(--fs-caption); font-weight: 600; } .testimonial-author span { color: var(--muted); font-size: var(--fs-caption); } /* ========================================================= 26. MODEL / REMUNERATION ========================================================= */ .model { background: var(--cream); } .model-panel { position: relative; overflow: hidden; padding: 70px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); } .model-content { position: relative; z-index: 2; max-width: 720px; } .model-title { max-width: 700px; margin: 18px 0 0; color: var(--night); font-family: var(--serif); font-size: clamp(34px, 4vw, 46px); font-weight: 500; letter-spacing: -.018em; line-height: 1.02; } .model-title em { color: var(--gold-dark); font-style: italic; font-weight: 400; } .model-copy { max-width: 620px; margin: 27px 0; color: var(--muted); font-size: 15px; line-height: 1.8; } .model-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; } .model-points > div { padding-top: 14px; border-top: 1px solid var(--line); } .model-points span { color: var(--gold-dark); } .model-points strong { display: block; margin-top: 6px; color: var(--night); font-size: var(--fs-label); line-height: 1.5; } .model-symbol { position: absolute; z-index: 1; right: -40px; bottom: -120px; color: rgba(205, 164, 62, .07); font-family: var(--serif); font-size: 360px; line-height: 1; } /* ========================================================= 27. REASSURANCE ========================================================= */ .reassurance { background: #fff; } .reassurance-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .reassurance-item { min-height: 220px; padding: 28px 24px; border-right: 1px solid var(--line); } .reassurance-item:last-child { border-right: 0; } .reassurance-icon { display: block; color: var(--gold-dark); font-size: 21px; } .reassurance-item strong { display: block; margin: 18px 0 7px; color: var(--night); font-size: 14px; } .reassurance-item p { margin: 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.75; } /* ========================================================= 28. FAQ ========================================================= */ .faq { background: var(--ivory); } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px 0; border: 0; background: transparent; color: var(--night); text-align: left; font-size: 14px; font-weight: 600; } .faq-question i { color: var(--gold-dark); font-size: 18px; transition: transform .3s ease; } .faq-item.active .faq-question i { transform: rotate(45deg); } .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } .faq-answer p { overflow: hidden; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; } .faq-item.active .faq-answer { grid-template-rows: 1fr; } .faq-item.active .faq-answer p { padding: 0 0 24px; } /* ========================================================= 29. CONTACT ========================================================= */ .contact { background: radial-gradient( circle at 80% 15%, rgba(205, 164, 62, .11), transparent 30% ), var(--night); } .contact-wrapper { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: center; } .contact .section-label { color: var(--gold-light); } .contact-title { max-width: 620px; margin: 18px 0 0; color: #fff; font-family: var(--serif); font-size: clamp(36px, 4.2vw, 48px); font-weight: 500; letter-spacing: -.018em; line-height: 1.02; } .contact-title em { color: var(--gold-light); font-style: italic; font-weight: 400; } .contact-copy { max-width: 520px; margin-top: 27px; color: rgba(255, 255, 255, .6); font-size: 15px; line-height: 1.8; } .contact-points { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; } .contact-points span { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .57); font-size: 14px; } .contact-points i { color: var(--gold); } .contact-form-wrap { position: relative; } .contact-form { padding: 38px; background: #fff; box-shadow: 0 35px 80px rgba(0, 0, 0, .25); } .form-heading { display: flex; flex-direction: column; margin-bottom: 24px; } .form-heading span { color: var(--gold-dark); font-size: var(--fs-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .form-heading strong { margin-top: 5px; color: var(--night); font-family: var(--serif); font-size: 27px; font-weight: 500; } .form-label { display: block; margin-bottom: 6px; color: var(--night); font-size: 14px; font-weight: 700; } .form-control, .form-select { width: 100%; min-height: 49px; padding: 10px 12px; border: 1px solid #ddd9d1; border-radius: 0; color: var(--night); background: #fff; font-size: 12px; } textarea.form-control { min-height: 115px; resize: vertical; } .form-control:focus, .form-select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(205, 164, 62, .1); } .form-control::placeholder { color: #aaa; } .form-note { margin-top: 11px; color: #91918d; font-size: 12px; line-height: 1.6; } .form-success { display: none; margin-top: 12px; padding: 12px; border: 1px solid #c8dfcd; background: #eff8f1; color: #2c6940; font-size: 11px; } /* ========================================================= 30. FOOTER ========================================================= */ footer { padding: 65px 0 28px; background: #0b1217; color: rgba(255, 255, 255, .48); } .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 45px; } .footer-main > div { display: flex; flex-direction: column; height: 100%; } .footer-main > div:last-child .footer-socials { margin-top: auto; } .footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; } .footer-brand img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; } .footer-brand span { font-size: 19px; font-weight: 600; } .footer-description { max-width: 300px; margin-top: 14px; font-size: var(--fs-body); line-height: 1.8; } .footer-heading { display: block; margin-bottom: 14px; color: rgba(255, 255, 255, .78); font-size: var(--fs-label); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .footer-main > div:not(:first-child) a { margin-bottom: 8px; color: rgba(255, 255, 255, .46); font-size: var(--fs-small); transition: color .2s ease; } .footer-main a:hover { color: var(--gold-light); } .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; margin-top: 45px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: var(--fs-caption); } .footer-socials { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .footer-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .75); font-size: 18px; transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; } .footer-social-icon:hover { color: var(--night); background: var(--gold); border-color: var(--gold); transform: translateY(-3px); } /* ========================================================= 31. REVEAL ANIMATIONS ========================================================= */ .reveal { opacity: 1; transform: none; } .js-ready .reveal { opacity: 0; transform: translateY(25px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .75, .25, 1); } .js-ready .reveal.visible { opacity: 1; transform: translateY(0); } /* ========================================================= 32. TABLET — 1199PX ========================================================= */ @media (max-width: 1199px) { .hero { min-height: 780px; } .hero-title { font-size: 48px; } .model-panel { padding: 60px; } } /* ========================================================= 33. TABLET — 991PX ========================================================= */ @media (max-width: 991px) { .section { padding: 95px 0; } .site-nav { height: 78px; } .navbar-collapse { margin-top: 10px; padding: 15px; background: rgba(16, 24, 32, .98); border: 1px solid rgba(255, 255, 255, .08); } .nav-link { padding: 9px 0; } .nav-cta { margin-top: 8px; } .hero { min-height: auto; padding: 135px 0 80px; } .hero-title { max-width: 650px; font-size: 44px; } .hero-visual { margin-top: 40px; } .services-header { grid-template-columns: 1fr; gap: 20px; } .method-line { display: none; } .method-steps { grid-template-columns: 1fr; gap: 50px; } .reassurance-grid { grid-template-columns: repeat(2, 1fr); } .reassurance-item:nth-child(2) { border-right: 0; } .reassurance-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .contact-wrapper { grid-template-columns: 1fr; gap: 50px; } .footer-main { grid-template-columns: 2fr 1fr 1fr; } .footer-main > div:last-child { grid-column: 2; } } /* ========================================================= 34. MOBILE — 767PX ========================================================= */ @media (max-width: 767px) { body { font-size: 15px; } .container { padding-left: 18px; padding-right: 18px; } .page-grid { background-size: 55px 55px; } .section { padding: 72px 0; } /* Section title */ .section-title { font-size: 38px; line-height: 1.08; } /* Hero */ .hero { padding: 120px 0 65px; } .hero-title { font-size: 45px; line-height: 1.04; } .hero-description { margin-top: 23px; font-size: 14px; } .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; } .hero-proof { flex-direction: column; gap: 8px; } .hero-visual { margin-top: 30px; } .hero-image-wrap { width: calc(100% - 15px); margin-left: 15px; } .hero-property-card { padding: 14px 18px; margin-top: 14px; } .hero-bottom { display: none; } .intro-quote { padding-left: 18px; font-size: 22px; } .intro-video { height: 520px; } /* Properties */ .property-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 280px 210px 210px; } .property-large { grid-column: span 2; grid-row: span 1; } .property-info { left: 17px; right: 17px; bottom: 17px; } .property-info h3 { font-size: 21px; } /* Services */ .service-row { grid-template-columns: 40px 1fr 25px; gap: 10px; padding: 23px 0; } .service-title { font-size: 29px; } .service-description { grid-column: 2 / 4; margin-top: -6px; } .service-arrow { grid-column: 3; grid-row: 1; } /* Testimonials */ .testimonial-card { width: 310px; min-height: 210px; } .testimonial-card p { font-size: 18px; } /* Model */ .model-panel { padding: 38px 24px; } .model-title { font-size: 41px; } .model-points { grid-template-columns: 1fr; } .model-symbol { font-size: 230px; } /* Reassurance */ .reassurance-grid { grid-template-columns: 1fr; } .reassurance-item { border-right: 0; border-bottom: 1px solid var(--line); } .reassurance-item:last-child { border-bottom: 0; } /* Contact */ .contact-title { font-size: 43px; } .contact-form { padding: 25px 18px; } /* Footer */ .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-main > div:first-child { grid-column: span 2; } .footer-main > div:last-child { grid-column: auto; } .footer-bottom { flex-direction: column; } } /* ========================================================= 35. SMALL MOBILE — 480PX ========================================================= */ @media (max-width: 480px) { .section { padding: 65px 0; } .section-title { font-size: 35px; } .hero-title { font-size: 40px; } .hero { padding: 112px 0 60px; } .hero-property-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; } .card-line { display: none; } .intro-quote { font-size: 21px; } .intro-video { height: 440px; } .property-grid { grid-template-columns: 1fr; grid-template-rows: 290px 240px 240px 240px 240px; } .property-large { grid-column: span 1; } .property-info h3 { font-size: 22px; } .service-title { font-size: 27px; } .model-title { font-size: 38px; } .contact-title { font-size: 39px; } .contact-form { padding: 22px 16px; } .media-caption { flex-direction: column; gap: 4px; } } /* ========================================================= 36. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .form-message { display: none; margin-top: 15px; padding: 14px 16px; border-radius: 8px; font-size: 14px; line-height: 1.5; } .form-message.success, .form-message.error { display: flex; align-items: center; gap: 10px; } .form-message.success { color: #287a3d; background: rgba(40, 167, 69, 0.10); border: 1px solid rgba(40, 167, 69, 0.25); } .form-message.error { color: #a52834; background: rgba(220, 53, 69, 0.10); border: 1px solid rgba(220, 53, 69, 0.25); } .contact-form button:disabled { opacity: 0.7; cursor: wait; } .form-message .bi-check-circle { font-size: 18px; } /* ========================================================= COOKIE CONSENT ========================================================= */ .cookie-banner { position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 99999; } .cookie-banner[hidden], .cookie-modal[hidden] { display: none !important; } .cookie-banner-content { max-width: 1180px; margin: 0 auto; padding: 24px 28px; background: #101820; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: space-between; gap: 30px; } .cookie-banner-text { display: flex; align-items: flex-start; gap: 18px; max-width: 720px; } .cookie-icon { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(210, 178, 96, 0.4); color: #d2b260; font-size: 20px; } .cookie-banner-text h2 { margin: 0 0 7px; font-family: "Bodoni Moda", serif; font-size: 20px; font-weight: 500; } .cookie-banner-text p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.65; } .cookie-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .cookie-btn { min-height: 44px; padding: 0 20px; border: 1px solid transparent; font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .cookie-btn:hover { transform: translateY(-1px); } .cookie-btn-primary { background: #d2b260; color: #101820; border-color: #d2b260; } .cookie-btn-primary:hover { background: #e0c47a; border-color: #e0c47a; } .cookie-btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); } .cookie-btn-secondary:hover { border-color: #fff; } .cookie-btn-outline { background: transparent; color: #d2b260; border-color: rgba(210, 178, 96, 0.6); } .cookie-btn-outline:hover { background: rgba(210, 178, 96, 0.08); } /* ========================================================= COOKIE MODAL ========================================================= */ .cookie-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; } .cookie-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 18, 0.78); backdrop-filter: blur(6px); } .cookie-modal-box { position: relative; z-index: 1; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 38px; background: #fff; color: #101820; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.35); } .cookie-modal-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid rgba(16, 24, 32, 0.12); background: transparent; color: #101820; cursor: pointer; } .cookie-modal-header { padding-right: 40px; margin-bottom: 28px; } .cookie-modal-label { display: block; margin-bottom: 10px; color: #a3843d; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; } .cookie-modal-header h2 { margin: 0 0 12px; font-family: "Bodoni Moda", serif; font-size: 34px; font-weight: 500; } .cookie-modal-header p { margin: 0; color: #62686d; font-size: 13px; line-height: 1.7; } .cookie-categories { border-top: 1px solid #e5e5e5; } .cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid #e5e5e5; } .cookie-category-content { flex: 1; } .cookie-category-title { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 7px; } .cookie-category-title i { color: #a3843d; } .cookie-category-title strong { font-size: 14px; } .cookie-category-content p { margin: 0; color: #71777b; font-size: 12px; line-height: 1.65; } .cookie-always-active { padding: 4px 8px; background: #f1f1ee; color: #777; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* ========================================================= TOGGLE ========================================================= */ .cookie-switch { position: relative; width: 48px; height: 26px; flex: 0 0 48px; cursor: pointer; } .cookie-switch input { position: absolute; opacity: 0; pointer-events: none; } .cookie-slider { position: absolute; inset: 0; background: #d9d9d9; border-radius: 50px; transition: 0.2s ease; } .cookie-slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: 0.2s ease; } .cookie-switch input:checked + .cookie-slider { background: #101820; } .cookie-switch input:checked + .cookie-slider::before { transform: translateX(22px); } .cookie-toggle { width: 48px; height: 26px; flex: 0 0 48px; border-radius: 50px; background: #101820; } .cookie-toggle span { display: block; width: 20px; height: 20px; margin: 3px; background: #d2b260; border-radius: 50%; } /* ========================================================= MODAL FOOTER ========================================================= */ .cookie-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 25px; } .cookie-modal-legal { margin: 18px 0 0; color: #888; font-size: 10px; line-height: 1.6; text-align: right; } /* ========================================================= FOOTER COOKIE BUTTON ========================================================= */ .footer-cookie-button { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; opacity: 0.8; transition: opacity 0.2s ease; } .footer-cookie-button:hover { opacity: 1; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; } .cookie-banner-content { padding: 20px; display: block; } .cookie-banner-text { gap: 12px; } .cookie-icon { width: 38px; height: 38px; flex-basis: 38px; } .cookie-banner-text h2 { font-size: 18px; } .cookie-banner-text p { font-size: 12px; } .cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; } .cookie-btn { width: 100%; padding: 0 12px; } .cookie-btn-primary { grid-column: span 2; order: -1; } .cookie-modal { padding: 10px; } .cookie-modal-box { padding: 28px 20px; } .cookie-modal-header h2 { font-size: 28px; } .cookie-category { align-items: flex-start; } .cookie-modal-footer { display: grid; grid-template-columns: 1fr; } .cookie-modal-footer .cookie-btn { width: 100%; } }