/* ══════════════════════════════════════════════════════════════ 0. DESIGN TOKENS ══════════════════════════════════════════════════════════════ */ *,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--pp-sans); background: var(--pp-parchment); color: var(--pp-ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } button { border: none; cursor: pointer; font-family: inherit; background: none; } ul { list-style: none; } :root { /* palette */ --pp-earth: #2b2520; --pp-earth-deep: #1a1714; --pp-stone: #3d3730; --pp-gold: #c9ad7a; --pp-gold-hover: #d4bc8a; --pp-gold-dim: rgba(201,173,122,.12); --pp-sand: #e8dfd4; --pp-linen: #f4f0eb; --pp-parchment: #faf8f5; --pp-ink: #1e1b18; --pp-ink-soft: #5c5650; --pp-ink-muted: #9a928a; /* type */ --pp-serif: 'Playfair Display', Georgia, serif; --pp-sans: 'Libre Franklin', 'Helvetica Neue', sans-serif; /* motion */ --pp-expo: cubic-bezier(.16,1,.3,1); --pp-quart: cubic-bezier(.25,1,.5,1); /* image base */ --pp-img: https://paysagementpierreperrier.com/wp-content/uploads/2026/02; } /* ══════════════════════════════════════════════════════════════ 1. ELEMENTOR OVERRIDES ══════════════════════════════════════════════════════════════ */ .pp-wrap, .pp-wrap .elementor-widget-wrap, .pp-wrap .elementor-element { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } .pp-wrap .elementor-widget-html { padding: 0 !important; margin: 0 !important; } /* Kill Elementor default button/link accents */ .pp-nav button, .pp-nav button:hover, .pp-nav button:focus, .pp-nav button:active, .pp-mob button, .pp-burger, .pp-burger:hover, .pp-burger:focus, .pp-burger:active, .elementor-widget-html .pp-burger, .elementor-widget-html .pp-burger:hover { color: inherit !important; background-color: transparent !important; border-color: transparent !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; } /* ══════════════════════════════════════════════════════════════ 2. SCROLL REVEAL ══════════════════════════════════════════════════════════════ */ /* Content visible by default. JS adds .pp-ready to , enabling animations. */ .r { opacity: 1; transform: translateY(0); } html.pp-ready .r { opacity: 0; transform: translateY(50px); transition: opacity 1s var(--pp-expo), transform 1s var(--pp-expo); } html.pp-ready .r.v { opacity: 1; transform: translateY(0); } html.pp-ready .rd1 { transition-delay: .12s; } html.pp-ready .rd2 { transition-delay: .24s; } html.pp-ready .rd3 { transition-delay: .36s; } html.pp-ready .rd4 { transition-delay: .48s; } html.pp-ready .rd5 { transition-delay: .6s; } html.pp-ready .rd6 { transition-delay: .72s; } /* ══════════════════════════════════════════════════════════════ 3. GTRANSLATE STYLING ══════════════════════════════════════════════════════════════ */ .glink a { font-family: var(--pp-sans) !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255,255,255,.6) !important; transition: color .3s !important; text-decoration: none !important; padding: 0 4px !important; } .glink a:hover, .glink a.gt-current-lang { color: var(--pp-gold) !important; } /* When in footer context */ .pp-footer .glink a { color: rgba(232,223,212,.45) !important; } .pp-footer .glink a:hover { color: var(--pp-gold) !important; } /* ══════════════════════════════════════════════════════════════ 4. NAVIGATION ══════════════════════════════════════════════════════════════ */ .pp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10003; display: flex; align-items: center; justify-content: space-between; padding: 24px 4vw; background: linear-gradient(180deg, rgba(26,23,20,.7) 0%, transparent 100%); transition: all .5s var(--pp-expo); } .pp-nav.stuck { background: rgba(26,23,20,.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 14px 4vw; box-shadow: 0 1px 0 rgba(201,173,122,.08); } /* Logo */ .pp-nav-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; } .pp-nav-logo-icon { width: 42px; height: 42px; border: 1.5px solid var(--pp-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pp-gold); font-family: var(--pp-serif); font-size: 17px; font-weight: 600; flex-shrink: 0; } .pp-nav-logo-text { font-family: var(--pp-serif); font-size: 15px; letter-spacing: 1px; color: #fff; font-weight: 500; line-height: 1.2; } .pp-nav-logo-text span { display: block; font-family: var(--pp-sans); font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(--pp-gold); margin-top: 2px; font-weight: 400; } /* Desktop links */ .pp-nav-right { display: flex; align-items: center; gap: 32px; } .pp-nav-menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .pp-nav-menu > li { position: relative; } .pp-nav-menu > li > a { font-family: var(--pp-sans); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.85); font-weight: 300; position: relative; transition: color .3s; text-decoration: none; padding: 8px 0; } .pp-nav-menu > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--pp-gold); transition: width .4s var(--pp-expo); } .pp-nav-menu > li > a:hover { color: var(--pp-gold); } .pp-nav-menu > li > a:hover::after { width: 100%; } /* Services trigger arrow */ .pp-nav-svc-trigger { display: flex; align-items: center; gap: 5px; cursor: pointer; } .pp-nav-svc-trigger svg { width: 10px; height: 10px; color: rgba(255,255,255,.5); transition: transform .3s var(--pp-expo), color .3s; } .pp-nav-svc-trigger:hover svg { color: var(--pp-gold); } .pp-nav-svc-open .pp-nav-svc-trigger svg { transform: rotate(180deg); } /* Mega menu */ .pp-mega { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); width: 740px; background: rgba(26,23,20,.97); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(201,173,122,.08); padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); transition: opacity .35s var(--pp-expo), transform .35s var(--pp-expo); z-index: 100; } .pp-nav-svc-open .pp-mega { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .pp-mega::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; } .pp-mega-item { display: flex; align-items: center; gap: 16px; padding: 14px 16px; text-decoration: none; border-radius: 4px; transition: background .3s; } .pp-mega-item:hover { background: rgba(201,173,122,.08); } .pp-mega-item-img { width: 80px; height: 80px; border-radius: 4px; overflow: hidden; flex-shrink: 0; } .pp-mega-item-img img { width: 100%; height: 100%; object-fit: cover; } .pp-mega-item-text { flex: 1; } .pp-mega-item-title { font-family: var(--pp-serif); font-size: 14px; font-weight: 500; color: var(--pp-sand); margin-bottom: 3px; line-height: 1.2; } .pp-mega-item-desc { font-family: var(--pp-sans); font-size: 11px; color: var(--pp-ink-muted); font-weight: 300; line-height: 1.4; } /* CTA button in nav */ .pp-nav-cta { display: inline-block; padding: 10px 28px; border: 1px solid var(--pp-gold); font-family: var(--pp-sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--pp-gold); text-decoration: none; transition: all .35s var(--pp-expo); } .pp-nav-cta:hover { background: var(--pp-gold); color: var(--pp-earth-deep); } /* Hamburger */ .pp-burger { display: none; flex-direction: column; gap: 5px; padding: 10px; z-index: 10002; background: none !important; border: none !important; cursor: pointer; outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .pp-burger:hover, .pp-burger:focus, .pp-burger:active { background: none !important; border: none !important; outline: none !important; box-shadow: none !important; } .pp-burger span { display: block; width: 26px; height: 1.5px; background: #fff !important; transition: all .4s var(--pp-expo); transform-origin: center; pointer-events: none; } .pp-burger.on span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); } .pp-burger.on span:nth-child(2) { opacity: 0; } .pp-burger.on span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); } /* Mobile fullscreen menu */ .pp-mob { position: fixed; inset: 0; z-index: 10001; background: var(--pp-earth-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; opacity: 0; pointer-events: none; transition: opacity .5s var(--pp-expo); overflow-y: auto; padding: 100px 8vw 60px; } .pp-mob.open { opacity: 1; pointer-events: all; } .pp-mob-link { font-family: var(--pp-serif); font-size: 28px; color: var(--pp-sand); font-weight: 400; text-decoration: none; padding: 14px 0; display: block; text-align: center; opacity: 0; transform: translateY(16px); transition: all .5s var(--pp-expo), color .3s; } .pp-mob.open .pp-mob-link { opacity: 1; transform: translateY(0); } .pp-mob.open .pp-mob-link:nth-child(1) { transition-delay: .08s; } .pp-mob.open .pp-mob-link:nth-child(2) { transition-delay: .12s; } .pp-mob.open .pp-mob-link:nth-child(3) { transition-delay: .16s; } .pp-mob.open .pp-mob-link:nth-child(4) { transition-delay: .2s; } .pp-mob.open .pp-mob-link:nth-child(5) { transition-delay: .24s; } .pp-mob.open .pp-mob-link:nth-child(6) { transition-delay: .28s; } .pp-mob.open .pp-mob-link:nth-child(7) { transition-delay: .32s; } .pp-mob-link:hover { color: var(--pp-gold); } /* Mobile accordion */ .pp-mob-svc-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; } .pp-mob-svc-toggle svg { width: 14px; height: 14px; color: var(--pp-gold); transition: transform .4s var(--pp-expo); } .pp-mob-svc-toggle.open svg { transform: rotate(180deg); } .pp-mob-svc-list { max-height: 0; overflow: hidden; transition: max-height .5s var(--pp-expo); display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .pp-mob-svc-list.open { max-height: 400px; } .pp-mob-svc-list a { font-family: var(--pp-sans); font-size: 14px; font-weight: 300; color: var(--pp-ink-muted); text-decoration: none; padding: 10px 0; display: block; text-align: center; transition: color .3s; letter-spacing: 1px; } .pp-mob-svc-list a:hover { color: var(--pp-gold); } .pp-mob-cta { display: inline-block; margin-top: 24px; padding: 14px 36px; border: 1px solid var(--pp-gold); font-family: var(--pp-sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--pp-gold); text-decoration: none; transition: all .35s var(--pp-expo); } .pp-mob-cta:hover { background: var(--pp-gold); color: var(--pp-earth-deep); } .pp-mob-gtranslate { margin-top: 20px; opacity: 0; transform: translateY(16px); transition: all .5s var(--pp-expo); } .pp-mob.open .pp-mob-gtranslate { opacity: 1; transform: translateY(0); transition-delay: .36s; } @media (max-width: 960px) { .pp-nav-right { display: none !important; } .pp-burger { display: flex !important; } .pp-nav .pp-burger { position: relative; z-index: 10002; } } /* ══════════════════════════════════════════════════════════════ 5. SHARED COMPONENTS ══════════════════════════════════════════════════════════════ */ /* Buttons */ .pp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: var(--pp-gold); color: var(--pp-earth-deep); font-family: var(--pp-sans); font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: all .4s var(--pp-expo); border: none; cursor: pointer; } .pp-btn:hover { background: var(--pp-gold-hover); color: var(--pp-earth-deep); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(201,173,122,.25); } .pp-btn svg { width: 14px; height: 14px; transition: transform .3s; } .pp-btn:hover svg { transform: translateX(3px); } .pp-btn-outline { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: transparent; border: 1px solid var(--pp-gold); color: var(--pp-gold); font-family: var(--pp-sans); font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 500; text-decoration: none; transition: all .4s var(--pp-expo); cursor: pointer; } .pp-btn-outline:hover { background: var(--pp-gold); color: var(--pp-earth-deep); } .pp-btn-ghost { font-family: var(--pp-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(232,223,212,.6); border-bottom: 1px solid rgba(232,223,212,.25); padding-bottom: 4px; transition: all .3s; text-decoration: none; } .pp-btn-ghost:hover { color: var(--pp-gold); border-color: var(--pp-gold); } /* Tags & headings */ .pp-tag { font-family: var(--pp-sans); font-size: 10px; letter-spacing: 6px; text-transform: uppercase; color: var(--pp-gold); margin-bottom: 20px; display: block; } .pp-h2 { font-family: var(--pp-serif); font-size: clamp(28px, 3vw, 42px); font-weight: 400; line-height: 1.2; color: var(--pp-ink); margin-bottom: 28px; } .pp-h2 em { font-style: italic; color: var(--pp-gold); } .pp-h3 { font-family: var(--pp-serif); font-size: clamp(20px, 2vw, 28px); font-weight: 500; line-height: 1.25; color: var(--pp-ink); margin-bottom: 16px; } .pp-body { font-family: var(--pp-sans); font-size: 15px; line-height: 1.95; color: var(--pp-ink-soft); font-weight: 300; margin-bottom: 16px; } .pp-rule { width: 48px; height: 1px; background: var(--pp-gold); margin: 32px 0; opacity: .5; } /* Light-on-dark text variants */ .pp-h2--light { color: var(--pp-sand); } .pp-body--light { color: rgba(232,223,212,.65); } /* ══════════════════════════════════════════════════════════════ 6. HERO (shared across all pages) ══════════════════════════════════════════════════════════════ */ .pp-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; background: var(--pp-earth-deep); overflow: hidden; } .pp-hero--short { min-height: 75vh; align-items: center; } .pp-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); animation: ppHeroZoom 10s var(--pp-expo) forwards; } .pp-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,23,20,.5) 0%, rgba(26,23,20,.35) 30%, rgba(26,23,20,.7) 65%, rgba(26,23,20,.95) 100% ); } @keyframes ppHeroZoom { to { transform: scale(1); } } .pp-hero-content { position: relative; z-index: 2; width: 100%; padding: 0 4vw 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; max-width: 1500px; margin: 0 auto; } /* For inner pages — centered single column */ .pp-hero-content--center { grid-template-columns: 1fr; text-align: center; max-width: 800px; justify-items: center; align-items: center; padding-top: 120px; } .pp-hero-tag { font-family: var(--pp-sans); font-size: 14px; font-weight:500; letter-spacing: 5px; text-transform: uppercase; color: var(--pp-gold); margin-bottom: 10px; opacity: 0; animation: ppRise 1s .6s var(--pp-expo) forwards; text-shadow: 0 1px 6px rgba(0,0,0,.7), 0 0 15px rgba(0,0,0,.5) !important; } .pp-hero-h1 { font-family: var(--pp-serif); font-size: clamp(40px, 5.5vw, 76px); font-weight: 400; line-height: 1.08; color: var(--pp-sand); margin-bottom: 28px; opacity: 0; animation: ppRise 1s .8s var(--pp-expo) forwards; } .pp-hero-h1 em { font-style: italic; color: var(--pp-gold); } /* Inner page hero — smaller h1 */ .pp-hero-h1--inner { font-size: clamp(32px, 4vw, 56px); } .pp-hero-side { opacity: 0; animation: ppRise 1s 1s var(--pp-expo) forwards; } .pp-hero-p { font-family: var(--pp-sans); font-size: 15px; line-height: 1.9; color: rgba(232,223,212,.7); font-weight: 300; max-width: 420px; margin-bottom: 40px; } .pp-hero-content--center .pp-hero-p { max-width: 560px; margin-left: auto; margin-right: auto; } .pp-hero-btns { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .pp-hero-content--center .pp-hero-btns { justify-content: center; } .pp-hero-scroll { position: absolute; bottom: 30px; right: 4vw; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(232,223,212,.3); font-family: var(--pp-sans); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; } .pp-hero-scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--pp-gold), transparent); animation: ppPulse 2s infinite; } @keyframes ppPulse { 0%,100% { opacity: 1; transform: scaleY(1); } 50% { opacity: .3; transform: scaleY(.5); } } @keyframes ppRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .pp-hero-content { grid-template-columns: 1fr; gap: 24px; padding: 120px 6vw 60px; } .pp-hero-scroll { display: none; } .pp-hero { min-height: 90vh; } .pp-hero--short { min-height: 70vh; padding-top: 140px; } } /* ══════════════════════════════════════════════════════════════ 7. MARQUEE ══════════════════════════════════════════════════════════════ */ .pp-marquee { background: var(--pp-earth); overflow: hidden; padding: 22px 0; border-top: 1px solid rgba(201,173,122,.08); border-bottom: 1px solid rgba(201,173,122,.08); } .pp-marquee-track { display: flex; gap: 60px; align-items: center; animation: ppScroll 20s linear infinite; width: max-content; } .pp-marquee-track span { font-family: var(--pp-serif); font-size: 16px; font-style: italic; color: var(--pp-gold); white-space: nowrap; opacity: .9; } .pp-marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--pp-gold); opacity: .5; flex-shrink: 0; } @keyframes ppScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════════════ 8. ABOUT SECTION ══════════════════════════════════════════════════════════════ */ .pp-about { padding: 140px 4vw; background: var(--pp-parchment); } .pp-about-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 45% 1fr; gap: 80px; align-items: center; } .pp-about-visual { position: relative; } .pp-about-img-wrap { position: relative; overflow: hidden; } .pp-about-img-wrap img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: brightness(.92) contrast(1.05) saturate(1.05); } .pp-about-img-wrap::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--pp-gold); transform: translate(16px, 16px); pointer-events: none; opacity: .3; } .pp-about-badge { position: absolute; bottom: -30px; right: -30px; width: 160px; height: 160px; background: var(--pp-earth); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; } .pp-about-badge-num { font-family: var(--pp-serif); font-size: 48px; color: var(--pp-gold); line-height: 1; } .pp-about-badge-txt { font-family: var(--pp-sans); font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--pp-sand); opacity: .5; margin-top: 4px; } .pp-sig-name { font-family: var(--pp-serif); font-size: 22px; font-style: italic; color: var(--pp-ink); } .pp-sig-role { font-family: var(--pp-sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--pp-ink-muted); margin-top: 3px; } @media (max-width: 900px) { .pp-about { padding: 80px 6vw; } .pp-about-inner { grid-template-columns: 1fr; gap: 50px; } .pp-about-visual { order: -1; } .pp-about-badge { width: 120px; height: 120px; bottom: -16px; right: -8px; } .pp-about-badge-num { font-size: 36px; } } /* ══════════════════════════════════════════════════════════════ 9. SERVICE CARDS (Homepage) ══════════════════════════════════════════════════════════════ */ .pp-services { padding: 140px 4vw; background: var(--pp-linen); } .pp-services-inner { max-width: 1400px; margin: 0 auto; } .pp-services-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 80px; flex-wrap: wrap; gap: 20px; } .pp-services-head .pp-h2 { margin-bottom: 0; } .pp-svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; gap: 20px; } .pp-svc-card { position: relative; overflow: hidden; cursor: pointer; min-height: 380px; } .pp-svc-card:nth-child(1) { grid-column: 1/7; grid-row: 1/3; min-height: 700px; } .pp-svc-card:nth-child(2) { grid-column: 7/10; } .pp-svc-card:nth-child(3) { grid-column: 10/13; } .pp-svc-card:nth-child(4) { grid-column: 7/10; } .pp-svc-card:nth-child(5) { grid-column: 10/13; } .pp-svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--pp-expo), filter .6s; filter: brightness(.6) saturate(1.1); } .pp-svc-card:hover img { transform: scale(1.06); filter: brightness(.4) saturate(1.2); } .pp-svc-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px 28px; } .pp-svc-num { font-family: var(--pp-serif); font-size: 13px; color: var(--pp-gold); letter-spacing: 2px; margin-bottom: 10px; } .pp-svc-title { font-family: var(--pp-serif); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; color: var(--pp-sand); line-height: 1.25; margin-bottom: 8px; } .pp-svc-desc { font-family: var(--pp-sans); font-size: 13px; color: rgba(232,223,212,.7); line-height: 1.7; font-weight: 300; max-height: 0; overflow: hidden; transition: max-height .6s var(--pp-expo), opacity .4s; opacity: 0; } .pp-svc-card:hover .pp-svc-desc { max-height: 100px; opacity: 1; } .pp-svc-arrow { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--pp-sans); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--pp-gold); transform: translateY(8px); opacity: 0; transition: all .4s var(--pp-expo) .1s; text-decoration: none; } .pp-svc-card:hover .pp-svc-arrow { transform: translateY(0); opacity: 1; } @media (max-width: 900px) { .pp-svc-grid { display: flex; flex-direction: column; gap: 16px; } .pp-svc-card { min-height: 280px !important; } .pp-svc-desc { max-height: 100px; opacity: 1; } .pp-svc-arrow { transform: translateY(0); opacity: 1; } } /* ══════════════════════════════════════════════════════════════ 10. RÉALISATIONS SCROLL ══════════════════════════════════════════════════════════════ */ .pp-real { padding: 120px 0; background: var(--pp-earth-deep); overflow: hidden; } .pp-real-header { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 4vw; margin-bottom: 60px; flex-wrap: wrap; gap: 20px; } .pp-real-header .pp-h2 { color: var(--pp-sand); margin-bottom: 0; } .pp-real-link { font-family: var(--pp-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--pp-gold); border-bottom: 1px solid rgba(201,173,122,.25); padding-bottom: 4px; transition: all .3s; text-decoration: none; } .pp-real-link:hover { border-color: var(--pp-gold); } /* Carousel header layout */ .pp-real-header-right { display: flex; align-items: center; gap: 28px; } /* Arrow buttons */ .pp-carousel-nav { display: flex; gap: 8px; } .pp-carousel-btn { width: 44px; height: 44px; border: 1px solid rgba(201,173,122,.25); display: flex; align-items: center; justify-content: center; color: var(--pp-gold); background: transparent; cursor: pointer; transition: all .3s var(--pp-expo); } .pp-carousel-btn:hover { background: var(--pp-gold); color: var(--pp-earth-deep); border-color: var(--pp-gold); } /* Dots */ .pp-carousel-dots { display: flex; justify-content: center; gap: 10px; padding: 36px 4vw 0; } .pp-carousel-dot-btn { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; background: rgba(201,173,122,.2); transition: all .4s var(--pp-expo); padding: 0; } .pp-carousel-dot-btn.active { background: var(--pp-gold); transform: scale(1.25); } @media (max-width: 768px) { .pp-real-header { flex-direction: column; align-items: flex-start; gap: 16px; } .pp-carousel-nav { display: none; } } .pp-hscroll { display: flex; gap: 20px; padding: 0 4vw; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; cursor: grab; scroll-behavior: smooth; } .pp-hscroll::-webkit-scrollbar { display: none; } .pp-hscroll.grabbing { cursor: grabbing; } .pp-real-card { flex: 0 0 380px; scroll-snap-align: start; position: relative; overflow: hidden; aspect-ratio: 4/5; } .pp-real-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--pp-expo); filter: brightness(.8); } .pp-real-card:hover img { transform: scale(1.05); filter: brightness(.95); } .pp-real-card-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26,23,20,.7) 0%, transparent 50%); pointer-events: none; z-index: 1; } @media (max-width: 768px) { .pp-real { padding: 80px 0; } .pp-real-card { flex: 0 0 280px; } } /* ══════════════════════════════════════════════════════════════ 11. WHY US CARDS ══════════════════════════════════════════════════════════════ */ .pp-why { padding: 140px 4vw; background: var(--pp-parchment); } .pp-why-inner { max-width: 1200px; margin: 0 auto; } .pp-why-header { text-align: center; max-width: 560px; margin: 0 auto 80px; } .pp-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--pp-sand); } .pp-why-card { background: var(--pp-parchment); padding: 48px 32px; text-align: center; transition: all .5s var(--pp-expo); position: relative; } .pp-why-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--pp-gold); transform: scaleX(0); transition: transform .5s var(--pp-expo); transform-origin: left; } .pp-why-card:hover { background: var(--pp-linen); } .pp-why-card:hover::after { transform: scaleX(1); } .pp-why-icon { width: 48px; height: 48px; margin: 0 auto 24px; border: 1px solid var(--pp-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pp-gold); } .pp-why-title { font-family: var(--pp-serif); font-size: 18px; font-weight: 500; color: var(--pp-ink); margin-bottom: 12px; } .pp-why-text { font-family: var(--pp-sans); font-size: 13px; color: var(--pp-ink-soft); line-height: 1.8; font-weight: 300; } @media (max-width: 900px) { .pp-why-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .pp-why-grid { grid-template-columns: 1fr; } .pp-why { padding: 80px 6vw; } } /* ══════════════════════════════════════════════════════════════ 12. CTA SECTION ══════════════════════════════════════════════════════════════ */ .pp-cta { position: relative; padding: 140px 4vw; overflow: hidden; } .pp-cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .pp-cta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,23,20,.93), rgba(26,23,20,.85)); } .pp-cta-inner { position: relative; z-index: 2; text-align: center; max-width: 640px; margin: 0 auto; } .pp-cta .pp-h2 { color: var(--pp-sand); margin-bottom: 20px; } .pp-cta .pp-body { color: rgba(232,223,212,.55); margin-bottom: 40px; } .pp-cta-actions { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } .pp-cta-phone { display: flex; align-items: center; gap: 8px; color: rgba(232,223,212,.6); font-family: var(--pp-sans); font-size: 14px; transition: color .3s; text-decoration: none; } .pp-cta-phone:hover { color: var(--pp-gold); } .pp-cta-phone svg { width: 16px; height: 16px; color: var(--pp-gold); } @media (max-width: 768px) { .pp-cta { padding: 100px 6vw; } } /* ══════════════════════════════════════════════════════════════ 13. SERVICE PAGE — editorial blocks ══════════════════════════════════════════════════════════════ */ .pp-svc-page-section { padding: 120px 4vw; } .pp-svc-page-section:nth-child(odd) { background: var(--pp-parchment); } .pp-svc-page-section:nth-child(even) { background: var(--pp-linen); } .pp-svc-block { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .pp-svc-block--reverse { direction: rtl; } .pp-svc-block--reverse > * { direction: ltr; } .pp-svc-block-img { position: relative; overflow: hidden; } .pp-svc-block-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: brightness(.92) contrast(1.05); transition: transform .6s var(--pp-expo); } .pp-svc-block-img:hover img { transform: scale(1.03); } .pp-svc-block-copy {} .pp-svc-block-copy ul { list-style: none; padding: 0; margin: 0 0 24px 0; } .pp-svc-block-copy ul li { font-family: var(--pp-sans); font-size: 14px; color: var(--pp-ink-soft); font-weight: 300; line-height: 1.8; padding: 8px 0 8px 20px; border-bottom: 1px solid rgba(201,173,122,.1); position: relative; } .pp-svc-block-copy ul li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; border: 1px solid var(--pp-gold); border-radius: 50%; } @media (max-width: 900px) { .pp-svc-page-section { padding: 80px 6vw; } .pp-svc-block { grid-template-columns: 1fr; gap: 40px; } .pp-svc-block--reverse { direction: ltr; } } /* Service page gallery grid */ /* Process section grids */ .pp-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .pp-process-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 60px; } @media (max-width: 768px) { .pp-process-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .pp-process-photos { grid-template-columns: 1fr; gap: 6px; margin-top: 40px; } } .pp-svc-gallery { padding: 80px 4vw; background: var(--pp-earth-deep); } .pp-svc-gallery-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .pp-svc-gallery-item { overflow: hidden; aspect-ratio: 4/3; } .pp-svc-gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: all .5s var(--pp-expo); } .pp-svc-gallery-item:hover img { filter: brightness(.95); transform: scale(1.04); } @media (max-width: 768px) { .pp-svc-gallery-grid { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════════════════════════════════════════ 14. PORTFOLIO PAGE — filterable ══════════════════════════════════════════════════════════════ */ .pp-portfolio { padding: 80px 4vw 140px; background: var(--pp-parchment); } .pp-portfolio-inner { max-width: 1400px; margin: 0 auto; } .pp-filters { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 60px; } .pp-filter-btn { font-family: var(--pp-sans); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; padding: 10px 24px; background: transparent; border: 1px solid var(--pp-sand); color: var(--pp-ink-muted); cursor: pointer; transition: all .3s var(--pp-expo); font-weight: 400; } .pp-filter-btn:hover { border-color: var(--pp-gold); color: var(--pp-ink); } .pp-filter-btn.active { background: var(--pp-gold); border-color: var(--pp-gold); color: var(--pp-earth-deep); font-weight: 600; } .pp-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pp-portfolio-item { overflow: hidden; aspect-ratio: 4/3; position: relative; transition: opacity .4s, transform .4s; } .pp-portfolio-item.hidden { display: none; } .pp-portfolio-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: all .6s var(--pp-expo); } .pp-portfolio-item:hover img { filter: brightness(1); transform: scale(1.04); } @media (max-width: 768px) { .pp-portfolio-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .pp-portfolio-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════ 15. CONTACT PAGE ══════════════════════════════════════════════════════════════ */ .pp-contact { padding: 100px 4vw 140px; background: var(--pp-parchment); } .pp-contact-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; } .pp-contact-info {} .pp-contact-info-item { display: flex; align-items: flex-start; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--pp-sand); } .pp-contact-info-icon { width: 40px; height: 40px; border: 1px solid var(--pp-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pp-gold); flex-shrink: 0; } .pp-contact-info-label { font-family: var(--pp-sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--pp-ink-muted); margin-bottom: 4px; } .pp-contact-info-value { font-family: var(--pp-serif); font-size: 18px; color: var(--pp-ink); } .pp-contact-info-value a { text-decoration: none; color: var(--pp-ink); transition: color .3s; } .pp-contact-info-value a:hover { color: var(--pp-gold); } .pp-contact-form { background: var(--pp-linen); padding: 48px; border: 1px solid var(--pp-sand); } .pp-contact-form-title { font-family: var(--pp-serif); font-size: 24px; font-weight: 500; color: var(--pp-ink); margin-bottom: 8px; } .pp-contact-form-sub { font-family: var(--pp-sans); font-size: 13px; color: var(--pp-ink-muted); font-weight: 300; margin-bottom: 32px; } @media (max-width: 900px) { .pp-contact-inner { grid-template-columns: 1fr; gap: 40px; } .pp-contact-form { padding: 32px 24px; } } /* ══════════════════════════════════════════════════════════════ 16. ABOUT PAGE EXTRAS ══════════════════════════════════════════════════════════════ */ .pp-values { padding: 120px 4vw; background: var(--pp-linen); } .pp-values-inner { max-width: 1200px; margin: 0 auto; } .pp-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; } .pp-value-card { padding: 40px; background: var(--pp-parchment); border: 1px solid var(--pp-sand); transition: all .5s var(--pp-expo); } .pp-value-card:hover { border-color: rgba(201,173,122,.3); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.06); } .pp-value-num { font-family: var(--pp-serif); font-size: 36px; color: var(--pp-gold); line-height: 1; margin-bottom: 16px; opacity: .5; } .pp-value-title { font-family: var(--pp-serif); font-size: 20px; font-weight: 500; color: var(--pp-ink); margin-bottom: 12px; } .pp-value-text { font-family: var(--pp-sans); font-size: 13px; color: var(--pp-ink-soft); line-height: 1.8; font-weight: 300; } /* Team placeholder */ .pp-team { padding: 120px 4vw; background: var(--pp-parchment); } .pp-team-inner { max-width: 1200px; margin: 0 auto; } .pp-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 60px; } .pp-team-card { text-align: center; } .pp-team-img { width: 100%; aspect-ratio: 3/4; background: var(--pp-sand); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow: hidden; } .pp-team-img img { width: 100%; height: 100%; object-fit: cover; } .pp-team-placeholder { font-family: var(--pp-sans); font-size: 12px; color: var(--pp-ink-muted); letter-spacing: 2px; text-transform: uppercase; } .pp-team-name { font-family: var(--pp-serif); font-size: 20px; font-weight: 500; color: var(--pp-ink); } .pp-team-role { font-family: var(--pp-sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--pp-ink-muted); margin-top: 4px; } /* Stats bar (about page) */ .pp-stats { background: var(--pp-earth-deep); border-top: 1px solid rgba(201,173,122,.08); } .pp-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; } .pp-stat { padding: 50px 30px; text-align: center; border-right: 1px solid rgba(201,173,122,.06); } .pp-stat:last-child { border-right: none; } .pp-stat-num { font-family: var(--pp-serif); font-size: clamp(36px, 4vw, 52px); font-weight: 300; color: var(--pp-gold); line-height: 1; margin-bottom: 8px; } .pp-stat-label { font-family: var(--pp-sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(232,223,212,.4); } @media (max-width: 768px) { .pp-stats-inner { grid-template-columns: repeat(2, 1fr); } .pp-stat { padding: 35px 20px; } .pp-stat:nth-child(2) { border-right: none; } .pp-values-grid { grid-template-columns: 1fr; } .pp-team-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; } } /* ══════════════════════════════════════════════════════════════ 17. FOOTER ══════════════════════════════════════════════════════════════ */ .pp-footer { background: var(--pp-earth-deep); border-top: 1px solid rgba(201,173,122,.06); padding: 80px 4vw 36px; } .pp-footer-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 60px; } .pp-footer-about { font-family: var(--pp-sans); font-size: 13px; color: rgba(232,223,212,.45); line-height: 1.9; font-weight: 300; margin-top: 20px; max-width: 340px; } .pp-footer-col-title { font-family: var(--pp-sans); font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(--pp-gold); margin-bottom: 22px; opacity: .7; } .pp-footer-links { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; } .pp-footer-links a { font-family: var(--pp-sans); font-size: 13px; color: rgba(232,223,212,.55); font-weight: 300; transition: color .3s; text-decoration: none; } .pp-footer-links a:hover { color: var(--pp-gold); } .pp-footer-bottom { max-width: 1300px; margin: 60px auto 0; padding-top: 28px; border-top: 1px solid rgba(201,173,122,.05); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .pp-footer-copy { font-family: var(--pp-sans); font-size: 11px; color: rgba(232,223,212,.3); } @media (max-width: 900px) { .pp-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 500px) { .pp-footer-inner { grid-template-columns: 1fr; gap: 36px; } }