/* ============================================================ PageIt — Homepage styles Default mood: "Blush romance". Switch by adding a class to : .theme-golden → Golden hour .theme-wine → Wine & candlelight ============================================================ */ :root{ --pi-rose:#C36B84; --pi-wine:#8E3A57; --pi-blush-lite:#F6D6DD; --pi-wine-deep:#7c2f49; --pi-blush:#FCEFF1; /* page background */ --pi-cream:#FBF5EE; /* light sections */ --pi-ink:#33272A; /* text */ --pi-gold:#C9A24D; /* hairline / accent only */ --pi-card-r:24px; --pi-btn-r:999px; } .theme-golden{ --pi-rose:#C68A4E; --pi-wine:#995339; --pi-blush-lite:#F5DCC0; --pi-wine-deep:#7E3A2C; } .theme-wine{ --pi-rose:#A8506B; --pi-wine:#6E2A44; --pi-blush-lite:#E7B9C4; --pi-wine-deep:#54203A; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; } ::selection{ background:var(--pi-rose); color:#FBF5EE; } .pi-page{ font-family:'Mulish', system-ui, sans-serif; color:var(--pi-ink); background:var(--pi-blush); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,video{ display:block; max-width:100%; } /* ---------- shared type ---------- */ .pi-eyebrow{ margin:0 0 18px; font-size:0.76rem; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; } .pi-eyebrow--rose{ color:var(--pi-rose); } .pi-eyebrow--gold{ color:var(--pi-gold); } .pi-eyebrow--peach{ color:#F0C9B4; } .pi-h2{ margin:0 0 16px; font-family:'Playfair Display', serif; font-weight:500; font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.12; text-wrap:balance; } .pi-h2 em{ font-style:italic; color:var(--pi-rose); } .pi-sub{ margin:0; font-size:1.08rem; line-height:1.6; color:rgba(51,39,42,0.72); font-weight:300; } .pi-sub--narrow{ max-width:440px; margin-bottom:28px; } .pi-sub--center{ margin:0 auto clamp(44px,7vh,70px); max-width:520px; } .pi-head-center{ text-align:center; max-width:720px; margin:0 auto clamp(48px,8vh,80px); } .pi-head-left{ max-width:720px; margin:0 0 clamp(48px,8vh,80px); } .pi-section{ padding:clamp(80px,14vh,150px) clamp(20px,5vw,60px); } .pi-section--cream{ background:var(--pi-cream); } .pi-section--blush{ background:var(--pi-blush); } .pi-hairline{ height:1px; background:linear-gradient(to right, transparent, rgba(201,162,77,0.55) 30%, rgba(201,162,77,0.55) 70%, transparent); } /* ---------- buttons ---------- */ .pi-btn{ display:inline-block; font-weight:600; letter-spacing:0.02em; text-decoration:none; border-radius:var(--pi-btn-r); transition:transform 300ms ease, box-shadow 300ms ease; } .pi-btn:hover{ transform:translateY(-3px); } .pi-btn--light{ font-size:0.8rem; color:var(--pi-wine); background:#FBF5EE; padding:11px 22px; box-shadow:0 6px 18px rgba(142,58,87,0.18); } .pi-btn--light:hover{ box-shadow:0 16px 34px rgba(51,39,42,0.28); } .pi-btn--wine{ font-size:0.95rem; color:#FBF5EE; background:var(--pi-wine); padding:16px 34px; box-shadow:0 14px 34px rgba(51,39,42,0.34); } .pi-btn--wine:hover{ box-shadow:0 20px 46px rgba(51,39,42,0.42); } .pi-btn--lg{ font-size:1rem; padding:18px 46px; box-shadow:0 18px 40px rgba(51,39,42,0.4); } /* ============ NAV ============ */ .pi-nav{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(20px,5vw,60px); transition:background 400ms ease, backdrop-filter 400ms ease, box-shadow 400ms ease; } .pi-brand{ font-family:'Playfair Display', serif; font-size:1.5rem; font-weight:600; letter-spacing:0.01em; color:#FBF5EE; text-decoration:none; transition:color 400ms ease; } .pi-nav__right{ display:flex; align-items:center; gap:clamp(16px,3vw,36px); } .pi-navlink{ display:none; font-size:0.82rem; letter-spacing:0.04em; color:#FBF5EE; text-decoration:none; transition:color 400ms ease; } @media (min-width:760px){ .pi-navlink{ display:inline; } } /* solid state toggled by JS on scroll */ .pi-nav.is-solid{ background:rgba(252,239,241,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(201,162,77,0.35); } .pi-nav.is-solid .pi-brand, .pi-nav.is-solid .pi-navlink{ color:var(--pi-ink); } /* ============ HERO ============ */ .pi-hero{ position:relative; height:100vh; min-height:620px; width:100%; overflow:hidden; display:flex; align-items:flex-end; } .pi-hero__media{ position:absolute; inset:0; } .pi-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .pi-hero__fallback{ position:absolute; inset:0; background:radial-gradient(120% 90% at 30% 20%, var(--pi-blush-lite) 0%, #E7A9B9 38%, var(--pi-rose) 72%, var(--pi-wine) 100%); } .pi-bokeh{ position:absolute; border-radius:50%; } .pi-bokeh--1{ inset:-10%; width:46%; height:46%; left:8%; top:14%; background:radial-gradient(closest-side, rgba(251,245,238,0.85), transparent 70%); filter:blur(6px); animation:pi-bokeh 14s ease-in-out infinite; } .pi-bokeh--2{ width:30%; height:30%; right:12%; top:22%; background:radial-gradient(closest-side, rgba(201,162,77,0.55), transparent 70%); filter:blur(4px); animation:pi-drift 18s ease-in-out infinite; } .pi-bokeh--3{ width:22%; height:22%; right:26%; bottom:26%; background:radial-gradient(closest-side, rgba(251,245,238,0.6), transparent 70%); filter:blur(3px); animation:pi-bokeh 20s ease-in-out infinite; } .pi-bokeh--4{ width:18%; height:18%; left:30%; bottom:18%; background:radial-gradient(closest-side, rgba(246,214,221,0.7), transparent 70%); filter:blur(3px); animation:pi-drift 16s ease-in-out infinite; } .pi-hero__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(142,58,87,0.72) 0%, rgba(195,107,132,0.28) 38%, rgba(252,239,241,0.04) 70%, rgba(252,239,241,0.10) 100%); } .pi-hero__content{ position:relative; z-index:3; padding:0 clamp(20px,5vw,60px) clamp(48px,8vh,90px); max-width:960px; } .pi-hero__title{ margin:0; font-family:'Playfair Display', serif; font-weight:500; font-size:clamp(2.8rem,7vw,5rem); line-height:1.05; color:#FBF5EE; letter-spacing:-0.01em; text-wrap:balance; } .pi-hero__title em{ font-style:italic; color:var(--pi-blush-lite); } .pi-hero__lead{ margin:22px 0 34px; font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.6; color:rgba(251,245,238,0.92); max-width:560px; font-weight:300; } .pi-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; } .pi-link-down{ display:inline-flex; align-items:center; gap:9px; font-size:0.92rem; font-weight:500; color:#FBF5EE; text-decoration:none; opacity:0.92; } .pi-link-down span{ display:inline-block; width:26px; height:26px; border-radius:999px; border:1px solid rgba(251,245,238,0.6); text-align:center; line-height:24px; } /* ============ SHIFT ============ */ .pi-shift{ background:var(--pi-wine); color:#FBF5EE; position:relative; } .pi-shift__inner{ max-width:1080px; margin:0 auto; } .pi-shift__title{ margin:0 0 clamp(48px,8vh,84px); font-family:'Playfair Display', serif; font-weight:500; font-size:clamp(2rem,4.6vw,3.3rem); line-height:1.14; max-width:900px; text-wrap:balance; } .pi-shift__title em{ font-style:italic; color:var(--pi-blush-lite); } .pi-shift__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1px; background:rgba(201,162,77,0.35); border:1px solid rgba(201,162,77,0.35); } .pi-shift__cell{ background:var(--pi-wine); padding:clamp(28px,4vw,44px); } .pi-shift__cell--deep{ background:var(--pi-wine-deep); } .pi-shift__kicker{ margin:0 0 14px; font-size:0.74rem; letter-spacing:0.24em; text-transform:uppercase; } .pi-shift__kicker--muted{ color:rgba(246,214,221,0.7); } .pi-shift__kicker--gold{ color:var(--pi-gold); } .pi-shift__line{ margin:0; font-family:'Playfair Display', serif; font-size:1.5rem; font-weight:400; line-height:1.3; color:#FBF5EE; } .pi-shift__line--muted{ color:rgba(251,245,238,0.82); } /* ============ EXAMPLES ============ */ .pi-examples__inner{ max-width:1180px; margin:0 auto; } .pi-examples__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:clamp(24px,4vw,48px); align-items:start; justify-items:center; } .pi-example{ width:100%; max-width:300px; display:flex; flex-direction:column; align-items:center; text-decoration:none; color:inherit; } .pi-example:hover .pi-phone{ transform:translateY(-10px) rotate(-1deg); } .pi-example:hover .pi-example__link{ color:var(--pi-wine); } .pi-phone{ position:relative; width:240px; height:500px; border-radius:42px; background:#33272A; padding:10px; box-shadow:0 40px 70px -30px rgba(51,39,42,0.55), 0 10px 24px -12px rgba(51,39,42,0.4); transition:transform 500ms cubic-bezier(.2,.7,.2,1); } .pi-phone__notch{ position:absolute; top:22px; left:50%; transform:translateX(-50%); width:74px; height:6px; border-radius:999px; background:rgba(251,245,238,0.25); z-index:4; } .pi-phone__screen{ position:relative; width:100%; height:100%; border-radius:33px; overflow:hidden; } .pi-phone__cover{ height:58%; position:relative; } .pi-phone__cover-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(51,39,42,0.55), transparent 55%); } .pi-phone__eyebrow{ position:absolute; top:20px; left:20px; font-size:0.6rem; letter-spacing:0.28em; text-transform:uppercase; color:rgba(251,245,238,0.85); font-weight:600; } .pi-phone__cover-title{ position:absolute; left:20px; right:20px; bottom:18px; } .pi-phone__cover-title p{ margin:0; font-family:'Playfair Display', serif; font-size:1.35rem; line-height:1.15; color:#FBF5EE; font-weight:500; } .pi-phone__body{ padding:18px 18px 0; } .pi-phone__note{ margin:0 0 14px; font-size:0.78rem; line-height:1.55; color:var(--pi-ink); font-weight:400; } .pi-voice{ display:flex; align-items:center; gap:10px; border-radius:14px; padding:10px 12px; } .pi-voice__play{ flex:0 0 auto; width:28px; height:28px; border-radius:999px; color:#FBF5EE; display:flex; align-items:center; justify-content:center; font-size:0.7rem; } .pi-eq{ display:flex; align-items:flex-end; gap:3px; height:20px; flex:1; } .pi-eq i{ display:block; width:3px; background:var(--bar,var(--pi-rose)); border-radius:2px; } .pi-eq i:nth-child(1){ height:40%; animation:pi-eq 1.1s ease-in-out infinite; } .pi-eq i:nth-child(2){ height:80%; animation:pi-eq 1.1s ease-in-out infinite .15s; } .pi-eq i:nth-child(3){ height:55%; animation:pi-eq 1.1s ease-in-out infinite .3s; } .pi-eq i:nth-child(4){ height:95%; animation:pi-eq 1.1s ease-in-out infinite .45s; } .pi-eq i:nth-child(5){ height:65%; animation:pi-eq 1.1s ease-in-out infinite .6s; } .pi-eq i:nth-child(6){ height:35%; animation:pi-eq 1.1s ease-in-out infinite .75s; } .pi-voice__time{ font-size:0.62rem; color:var(--pi-ink); opacity:0.6; } .pi-example__label{ margin:22px 0 4px; font-family:'Playfair Display', serif; font-size:1.2rem; font-weight:500; } .pi-example__link{ font-size:0.82rem; letter-spacing:0.04em; color:var(--pi-rose); text-decoration:none; font-weight:600; transition:color 300ms ease; } /* ---- Real demo video (portrait-safe) ---- */ .pi-demo{ max-width:320px; margin:0 auto clamp(48px,7vh,72px); text-align:center; } .pi-demo__video{ width:100%; max-height:78vh; /* never taller than most of the screen */ object-fit:cover; /* fills the frame cleanly if ratios differ */ border-radius:28px; background:#33272A; box-shadow:0 40px 70px -30px rgba(51,39,42,0.55), 0 10px 24px -12px rgba(51,39,42,0.4); } .pi-demo__caption{ margin:18px 0 0; font-size:0.92rem; letter-spacing:0.02em; color:rgba(51,39,42,0.6); font-weight:300; } /* ============ HOW IT WORKS ============ */ .pi-how__inner{ max-width:1120px; margin:0 auto; } .pi-steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:clamp(20px,3vw,32px); } .pi-step{ background:var(--pi-cream); border-radius:var(--pi-card-r); padding:clamp(26px,3vw,36px); box-shadow:0 24px 50px -34px rgba(142,58,87,0.4), 0 2px 6px -3px rgba(142,58,87,0.15); } .pi-step__top{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; } .pi-step__num{ font-family:'Playfair Display', serif; font-size:2.4rem; font-weight:500; color:var(--pi-gold); line-height:1; } .pi-step__rule{ flex:1; height:1px; background:rgba(201,162,77,0.4); transform:translateY(-6px); } .pi-step__title{ margin:0 0 10px; font-family:'Playfair Display', serif; font-size:1.35rem; font-weight:500; line-height:1.2; } .pi-step__body{ margin:0; font-size:0.95rem; line-height:1.6; color:rgba(51,39,42,0.72); font-weight:300; } /* ============ TRUST ============ */ .pi-trust__inner{ max-width:1120px; margin:0 auto; } .pi-trust__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:clamp(28px,4vw,56px); align-items:start; } .pi-trust__intro{ position:sticky; top:100px; } .pi-guarantee{ display:flex; align-items:center; gap:14px; border-top:1px solid rgba(201,162,77,0.5); padding-top:24px; } .pi-guarantee__mark{ flex:0 0 auto; width:42px; height:42px; border-radius:999px; background:var(--pi-wine); color:#FBF5EE; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display', serif; font-size:1.1rem; } .pi-guarantee__title{ margin:0; font-weight:600; font-size:0.95rem; } .pi-guarantee__sub{ margin:2px 0 0; font-size:0.86rem; color:rgba(51,39,42,0.6); font-weight:300; } .pi-testimonials{ display:flex; flex-direction:column; gap:20px; } .pi-quote{ margin:0; background:var(--pi-blush); border-radius:var(--pi-card-r); padding:clamp(24px,3vw,34px); box-shadow:0 20px 44px -32px rgba(142,58,87,0.4); } .pi-quote__mark{ font-family:'Playfair Display', serif; font-size:2.6rem; color:var(--pi-gold); line-height:0.6; display:block; height:22px; } .pi-quote blockquote{ margin:0 0 20px; font-family:'Playfair Display', serif; font-size:1.22rem; font-weight:400; line-height:1.4; color:var(--pi-ink); } .pi-quote figcaption{ display:flex; align-items:center; gap:12px; } .pi-avatar{ flex:0 0 auto; width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:#FBF5EE; font-weight:600; font-size:0.9rem; } .pi-quote figcaption strong{ font-weight:600; font-size:0.9rem; } .pi-quote__place{ color:rgba(51,39,42,0.55); font-size:0.9rem; } /* ============ PRICING ============ */ .pi-pricing__inner{ max-width:920px; margin:0 auto; text-align:center; } .pi-price-card{ background:var(--pi-cream); border-radius:28px; padding:clamp(34px,5vw,56px); box-shadow:0 40px 80px -46px rgba(142,58,87,0.5), 0 3px 10px -5px rgba(142,58,87,0.2); border:1px solid rgba(201,162,77,0.35); } .pi-price-card__kicker{ margin:0 0 6px; font-size:0.76rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--pi-gold); font-weight:600; } .pi-price-card__amount{ margin:0 0 4px; font-family:'Playfair Display', serif; font-size:clamp(3rem,8vw,4.6rem); font-weight:500; line-height:1; color:var(--pi-wine); } .pi-price-card__sub{ margin:0 0 30px; font-size:0.95rem; color:rgba(51,39,42,0.6); font-weight:300; } .pi-price-card__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1px; background:rgba(201,162,77,0.3); border:1px solid rgba(201,162,77,0.3); border-radius:16px; overflow:hidden; margin-bottom:34px; } .pi-price-card__cell{ background:var(--pi-cream); padding:22px 16px; } .pi-price-card__cell-title{ margin:0 0 4px; font-family:'Playfair Display', serif; font-size:1.3rem; } .pi-price-card__cell-sub{ margin:0; font-size:0.85rem; color:rgba(51,39,42,0.6); font-weight:300; } /* ============ START ============ */ .pi-start{ position:relative; background:var(--pi-wine); color:#FBF5EE; padding:clamp(90px,16vh,170px) clamp(20px,5vw,60px); text-align:center; overflow:hidden; } .pi-start__glow{ position:absolute; filter:blur(10px); } .pi-start__glow--l{ width:40%; height:60%; background:radial-gradient(closest-side, rgba(201,162,77,0.28), transparent 70%); left:-8%; top:-10%; } .pi-start__glow--r{ width:44%; height:60%; background:radial-gradient(closest-side, rgba(246,214,221,0.22), transparent 70%); right:-10%; bottom:-12%; } .pi-start__inner{ position:relative; max-width:780px; margin:0 auto; } .pi-start__title{ margin:0 0 22px; font-family:'Playfair Display', serif; font-weight:500; font-size:clamp(2.2rem,5.6vw,4rem); line-height:1.08; text-wrap:balance; } .pi-start__title em{ font-style:italic; color:var(--pi-blush-lite); } .pi-start__lead{ margin:0 auto 38px; font-size:1.12rem; line-height:1.6; color:rgba(251,245,238,0.9); font-weight:300; max-width:500px; } /* ============ FOOTER ============ */ .pi-footer{ background:var(--pi-ink); color:rgba(251,245,238,0.72); padding:clamp(56px,9vh,88px) clamp(20px,5vw,60px) 40px; } .pi-footer__inner{ max-width:1120px; margin:0 auto; } .pi-footer__top{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start; padding-bottom:40px; border-bottom:1px solid rgba(201,162,77,0.3); } .pi-footer__brand{ max-width:320px; } .pi-footer__name{ margin:0 0 12px; font-family:'Playfair Display', serif; font-size:1.6rem; font-weight:600; color:#FBF5EE; } .pi-footer__tag{ margin:0; font-family:'Playfair Display', serif; font-style:italic; font-size:1.05rem; color:var(--pi-gold); } .pi-footer__cols{ display:flex; flex-wrap:wrap; gap:clamp(32px,6vw,72px); } .pi-footer__col{ display:flex; flex-direction:column; gap:12px; } .pi-footer__col-title{ margin:0 0 4px; font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase; color:rgba(251,245,238,0.45); } .pi-footer__col a{ color:rgba(251,245,238,0.8); text-decoration:none; font-size:0.92rem; } .pi-footer__col a:hover{ color:#FBF5EE; } .pi-footer__bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top:24px; font-size:0.8rem; color:rgba(251,245,238,0.5); } .pi-footer__bottom a{ color:rgba(251,245,238,0.5); text-decoration:none; } /* ============ reveal-on-scroll ============ */ [data-reveal]{ opacity:0; transform:translateY(24px); } [data-reveal].is-visible{ opacity:1; transform:translateY(0); transition:opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1); } /* ============ keyframes ============ */ @keyframes pi-bokeh{ 0%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(-3%,-4%,0) scale(1.08);} 100%{ transform:translate3d(0,0,0) scale(1);} } @keyframes pi-drift{ 0%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(4%,3%,0);} 100%{ transform:translate3d(0,0,0);} } @keyframes pi-eq{ 0%,100%{ height:22%;} 50%{ height:92%;} } /* ============ reduced motion ============ */ @media (prefers-reduced-motion:reduce){ .pi-bokeh, .pi-eq i{ animation:none; } [data-reveal]{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }