/*! Purple Holiday Homes — v2 "Modern Product" theme (site-wide retrofit). Loaded LAST in so it re-skins the legacy/functional templates (404, privacy, terms, estimate-revenue) into the white + vibrant-purple + Plus Jakarta Sans direction without touching their markup/content/SEO. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap'); :root{ --t-paper:#FFFFFF; --t-paper2:#F6F5FB; --t-card:#FFFFFF; --t-ink:#16131D; --t-ink2:#574F63; --t-muted:#8B8597; --t-line:#ECEAF3; --t-line2:#E2DDEE; --t-purple:#7C3AED; --t-purple-d:#6D28D9; --t-purple-deep:#4C1D95; --t-soft:#F3EEFE; /* gold aliases neutralised → purple/lilac */ --t-gold:#C4A9F5; --t-gold-d:#6D28D9; --t-gold-bg:#F3EEFE; --t-disp:'Plus Jakarta Sans','Inter',system-ui,sans-serif; --t-sans:'Inter',system-ui,sans-serif; --t-mono:'Inter',system-ui,sans-serif; --t-ease:cubic-bezier(.22,1,.36,1); } /* ---- base ---- */ html body{font-family:var(--t-sans)!important; background:var(--t-paper)!important; color:var(--t-ink)!important; -webkit-font-smoothing:antialiased;} /* drop paper grain */ body::after{display:none!important; content:none!important;} /* ---- headings → Plus Jakarta Sans ---- */ h1,h2,h3,h4,h5,.ph1,h3.ph1,h2.sh,.sh,.content-block h2,.cell h3,h3.card-title, .phh-footer-col-heading,.phh-footer-links-group h3,.faq-btn,.phh-mobile-nav-link{ font-family:var(--t-disp)!important; letter-spacing:-.025em!important; font-weight:800!important;} .ph1 em,.sh em{font-style:normal!important; color:var(--t-purple)!important;} /* mono micro-labels → clean sans, purple */ .ey,.phtag,.eyebrow,.dash-stat-label,.phh-trust-item{font-family:var(--t-sans)!important;} .ey,.phtag{color:var(--t-purple-d)!important; letter-spacing:0!important; text-transform:none!important; font-weight:600!important;} .ey::before,.ey::after,.phtag::before{background:var(--t-purple)!important;} /* ---- building/legacy hero surfaces ---- */ .phero{background:linear-gradient(135deg,#FAF7FF 0%,#F6F5FB 60%,#F3EEFE 100%)!important;} .phero::before{background:radial-gradient(circle,rgba(124,58,237,.16) 0%,transparent 68%)!important;} .sec-cr{background:var(--t-paper2)!important;} .sec-crw{background:var(--t-paper)!important;} .sec-cr2{background:var(--t-soft)!important;} .cell,.snap,.split-card,.dashboard-mock{background:var(--t-card)!important; border-color:var(--t-line)!important;} .content-block h2,.sh{color:var(--t-ink)!important;} .phero-badge{background:var(--t-soft)!important; border-color:rgba(124,58,237,.28)!important; color:var(--t-purple-d)!important; font-family:var(--t-sans)!important; font-weight:600!important;} .ck{background:var(--t-soft)!important;} .ck svg{color:var(--t-purple-d)!important;} .phero-chip svg{color:var(--t-purple-d)!important;} /* ---- buttons → vibrant purple pills ---- */ .btn-pu,.phh-nav-cta,.btn.btn-pu{background:var(--t-purple)!important; border-radius:999px!important; box-shadow:0 10px 26px -10px rgba(124,58,237,.45)!important;} .btn-pu:hover,.phh-nav-cta:hover{background:var(--t-purple-d)!important;} .btn-wh{color:var(--t-purple-d)!important;} .btn-ol:hover{border-color:var(--t-purple)!important; color:var(--t-purple-d)!important;} .lead-bar{background:linear-gradient(135deg,var(--t-purple-deep),var(--t-purple) 92%)!important;} /* ---- links accent ---- */ a{ text-underline-offset:3px; } .content-block a,.sp a{ color:var(--t-purple-d)!important; } /* ---- header → white, refined ---- */ .phh-header{background:rgba(255,255,255,.86)!important; backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--t-line)!important; box-shadow:none!important;} .phh-nav-link,.phh-nav-custom a{color:var(--t-ink2)!important; font-family:var(--t-sans)!important;} .phh-nav-link:hover,.phh-nav-link.phh-active,.phh-nav-custom a:hover{color:var(--t-purple-d)!important; background:var(--t-soft)!important;} /* ---- footer → deep purple, modern ---- */ .phh-footer,.phh-footer-wrap{background:linear-gradient(180deg,#1E1630,#14101F)!important;} .phh-footer .phh-footer-col-heading,.phh-footer-links-group h3{color:#fff!important;} .phh-trust-item,.phh-social-row a{background:rgba(255,255,255,.07)!important; border-color:rgba(255,255,255,.16)!important;} /* ---- area / tailwind utility pages ---- */ .bg-gray-50,.bg-slate-50,.bg-neutral-50{background-color:var(--t-paper2)!important;} .text-purple-600,.text-purple-700,.text-violet-600{color:var(--t-purple)!important;} .bg-purple-600,.bg-violet-600{background-color:var(--t-purple)!important;} /* ---- selection ---- */ ::selection{background:var(--t-purple); color:#fff;} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;}} /* ============================================================ component polish (applies site-wide via this file) ============================================================ */ :root{ --pu:#7C3AED; --pu2:#7C3AED; --pu3:#4C1D95; --cr:#F6F5FB; --crw:#FFFFFF; --cr2:#F3EEFE; --pub:#F3EEFE; --pul:#FAF7FF; --pulb:#F3EEFE; --ink:#16131D; --ink2:#574F63; --ink3:#8B8597; --border:var(--t-line); --border2:rgba(22,19,29,.06); } .phero{overflow:hidden;} .phero::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(42% 54% at 84% 10%,rgba(124,58,237,.16),transparent 70%), radial-gradient(40% 48% at 6% 72%,rgba(124,58,237,.10),transparent 72%);} .phero .wrap,.phero-inner{position:relative; z-index:1;} .cell,.snap,.split-card,.dashboard-mock{border-radius:20px!important; transition:transform .4s var(--t-ease),box-shadow .4s var(--t-ease)!important; box-shadow:0 20px 46px -34px rgba(22,19,29,.28)!important;} .cell:hover,.area:hover{transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(22,19,29,.34)!important;} .snap-stat,.dash-stat{background:transparent!important; border:none!important; border-top:1px solid var(--t-line)!important; border-radius:0!important; padding:14px 2px!important;} .snap-bars .b.hi,.dash-bar.active{background:linear-gradient(180deg,var(--t-purple),var(--t-purple-d))!important;} /* FAQ */ .faq-item{border-color:var(--t-line)!important;} .faq-btn{font-family:var(--t-disp)!important; font-size:19px!important; color:var(--t-ink)!important; letter-spacing:-.018em!important; font-weight:700!important;} .faq-btn:hover{color:var(--t-purple-d)!important;} .faq-pl{background:var(--t-soft)!important; border-color:rgba(124,58,237,.28)!important;} .faq-pl svg{fill:var(--t-purple-d)!important;} .faq-item.open .faq-pl{background:var(--t-purple-d)!important;} .faq-item.open .faq-pl svg{fill:#fff!important;} .ey,.phtag,.eyebrow{font-size:13px!important;} hr,.phh-footer-hr{border-color:rgba(255,255,255,.16)!important;} .sec{padding:clamp(60px,8vw,100px) 0!important;} .content-block a,.sp a,.faq-body-in a{text-decoration:underline; text-decoration-color:rgba(124,58,237,.4); text-underline-offset:3px;} /* tailwind white panels → soft card */ .bg-white.shadow-sm,.bg-white.shadow,.bg-white.shadow-md,.bg-white.shadow-lg,.bg-white.rounded-2xl,.bg-white.rounded-xl{background-color:var(--t-card)!important; border:1px solid var(--t-line)!important; box-shadow:0 18px 44px -32px rgba(22,19,29,.25)!important;} .rounded-full.bg-purple-100,.bg-purple-50{background-color:var(--t-soft)!important; color:var(--t-purple-d)!important;} /* legacy skyline band — hidden in the modern direction */ .phht-skyband{display:none!important;} .nav.scrolled,.phh-header.phh-scrolled{backdrop-filter:blur(18px) saturate(160%)!important;-webkit-backdrop-filter:blur(18px) saturate(160%)!important} .cell,.snap,.split-card{box-shadow:0 20px 46px -34px rgba(22,19,29,.3),0 6px 16px -12px rgba(124,58,237,.14)!important} .phh-footer-link-list a,.content-block a{background-image:linear-gradient(var(--t-purple-d),var(--t-purple-d));background-size:0 1.4px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--t-ease),color .25s} .phh-footer-link-list a:hover,.content-block a:hover{background-size:100% 1.4px} /* type baseline */ html body{font-size:17px!important;line-height:1.62!important;letter-spacing:-.003em} .sh,h1,h2{letter-spacing:-.028em!important} .ey,.phtag,.eyebrow{font-weight:600!important;letter-spacing:0!important} @media(max-width:600px){html body{font-size:16.5px!important} .sec{padding:56px 0!important} .wrap{padding:0 20px}}