/* ========================================================= Triple Peak Property Management — site.css Fonts load separately via /assets/fonts/fonts.css (no @import here). All asset URLs are root-relative. ========================================================= */ /* ---------- Tokens ---------- */ :root{ --tp-navy:#0C1D39; --tp-navy-2:#142A49; --tp-footer:#071429; --tp-bronze:#B18452; --tp-bronze-light:#C49A67; /* bronze accent on dark backgrounds only */ --tp-slate:#5D6875; --tp-body:#59636e; /* body copy on light */ --tp-sand:#D8D0C5; --tp-sand-bg:#ede9e2; --tp-warm-white:#F8F7F4; --tp-white:#FFFFFF; --tp-ink:#18212B; --tp-serif:'Libre Baskerville',Georgia,serif; --tp-sans:'Inter','Helvetica Neue',Arial,sans-serif; --tp-radius:4px; --tp-max:1180px; } /* ---------- Base ---------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--tp-warm-white);color:var(--tp-ink);font-family:var(--tp-sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:inline-block} [hidden]{display:none !important} [id]{scroll-margin-top:96px} h1,h2,h3,h4{font-family:var(--tp-serif);font-weight:400;color:var(--tp-navy);line-height:1.12;margin:0 0 20px} h1{font-size:clamp(42px,5.2vw,64px);letter-spacing:-1px} h2{font-size:clamp(31px,3.8vw,44px)} h3{font-size:26px} p{margin:0 0 18px;color:var(--tp-body)} p:last-child{margin-bottom:0} a{color:var(--tp-navy)} a:focus-visible,button:focus-visible{outline:2px solid var(--tp-bronze);outline-offset:2px} .container{width:min(var(--tp-max),calc(100% - 80px));margin:auto} .eyebrow{text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:12px;color:var(--tp-bronze);margin-bottom:14px} .muted{color:#68717b} .lead{font-size:19px} .section-intro{max-width:820px;margin-bottom:38px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .buttons{display:flex;gap:14px;flex-wrap:wrap} .section{padding:98px 0} .section.no-top{padding-top:0} .section--sand{background:var(--tp-sand-bg)} /* ---------- Buttons ---------- */ .button{display:inline-block;padding:15px 22px;border:1px solid var(--tp-bronze);background:var(--tp-bronze);color:#fff;text-decoration:none;text-align:center;text-transform:uppercase;font-family:var(--tp-sans);font-size:12px;font-weight:700;letter-spacing:1.5px;line-height:1.3;cursor:pointer;transition:background .18s,border-color .18s,color .18s} .button:hover{background:#9c744a;border-color:#9c744a} .button.secondary{background:transparent;border-color:#fff;color:#fff} .button.secondary:hover{background:rgba(255,255,255,.14)} .button.navy{background:var(--tp-navy);border-color:var(--tp-navy);color:#fff} .button.navy:hover{background:var(--tp-navy-2);border-color:var(--tp-navy-2)} .button.navy-outline{background:transparent;border-color:var(--tp-navy);color:var(--tp-navy)} .button.navy-outline:hover{background:var(--tp-navy);color:#fff} /* ---------- Utility bar ---------- */ .utility-bar{background:var(--tp-navy-2);color:#cbd2db;font-size:11px;text-transform:uppercase;letter-spacing:1.5px} .utility-links{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:9px 0} .utility-links a{color:#cbd2db;text-decoration:none} .utility-links a:hover{color:#fff} .utility-links a+a::before{content:"\00B7";margin-right:14px;color:rgba(255,255,255,.35)} /* ---------- Header ---------- */ /* Default = homepage: transparent header absolutely positioned over .hero. Interior pages: -> solid navy header in normal flow. */ .site-top{position:absolute;top:0;left:0;right:0;z-index:100} body.interior .site-top{position:relative} .site-header{padding:20px 0;color:#fff} body.interior .site-header{background:var(--tp-navy);border-bottom:1px solid rgba(255,255,255,.06)} .nav{display:flex;justify-content:space-between;align-items:center;gap:20px} .brand{display:block;flex:none} .brand img{width:300px;height:auto;display:block} .navlinks{display:flex;gap:22px;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:1.2px} .navlinks a{color:#fff;text-decoration:none} .navlinks a:not(.button):hover{color:var(--tp-bronze-light)} .navlinks .button{padding:12px 17px}.navlinks .button.secondary{background:rgba(7,20,40,.6);backdrop-filter:blur(2px)} /* Hamburger */ .menu-toggle{display:none;background:none;border:0;padding:8px;width:44px;height:42px;cursor:pointer;position:relative;z-index:120} .menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px auto;transition:transform .22s,opacity .18s} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Mobile menu overlay ---------- */ .mobile-menu{position:fixed;inset:0;z-index:90;background:var(--tp-navy);color:#fff;overflow-y:auto;padding:132px 0 48px} .menu-close{position:absolute;top:52px;right:22px;background:none;border:0;color:#fff;font-size:34px;line-height:1;padding:6px 10px;cursor:pointer} .mobile-menu .buttons{flex-direction:column;align-items:stretch;max-width:340px;margin-bottom:34px} .mobile-menu-nav{display:flex;flex-direction:column} .mobile-menu-nav a{color:#fff;text-decoration:none;font-family:var(--tp-serif);font-size:26px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.09)} .mobile-menu-nav a:hover{color:var(--tp-bronze-light)} .mobile-menu-utility{margin-top:28px;display:flex;flex-direction:column;gap:12px;font-size:12px;text-transform:uppercase;letter-spacing:1.5px} .mobile-menu-utility a{color:#cbd2db;text-decoration:none} .mobile-menu-utility a:hover{color:#fff} body.nav-open{overflow:hidden} /* ---------- Homepage hero ---------- */ .hero{min-height:760px;position:relative;background-color:#071428;background-image:linear-gradient(180deg,rgba(7,20,40,.72) 0,rgba(7,20,40,0) 170px),linear-gradient(90deg,rgba(7,20,40,.95) 0%,rgba(7,20,40,.5) 48%,rgba(7,20,40,0) 72%),url('/assets/img/ext-victorian-v7.webp');background-size:100% 100%,100% 100%,auto 100%;background-position:0 0,0 0,right center;background-repeat:no-repeat;display:flex;align-items:center;color:#fff;padding:185px 0 90px} .hero h1{color:#fff;max-width:780px;font-size:clamp(44px,5.6vw,66px)} .hero h1 span{color:var(--tp-bronze-light)} .hero p{font-size:20px;max-width:690px;color:#eef1f4;margin:22px 0 34px} /* ---------- Interior page hero ---------- */ .page-hero{background:linear-gradient(135deg,var(--tp-navy) 0%,var(--tp-navy-2) 100%);color:#fff;padding:86px 0 74px} .page-hero .eyebrow{color:var(--tp-bronze-light)} .page-hero h1{color:#fff;margin-bottom:14px;font-size:clamp(38px,4.6vw,58px)} .page-hero p{color:#d9dfe6;font-size:19px;max-width:760px;margin:0} /* ---------- Proof bar ---------- */ .proof{background:var(--tp-navy);color:#fff;padding:31px 0} .proof-grid{display:grid;grid-template-columns:repeat(4,1fr)} .proof-item{padding:4px 28px;border-right:1px solid rgba(255,255,255,.2)} .proof-item:last-child{border-right:0} .proof strong{font-family:var(--tp-serif);font-size:31px;font-weight:400} .proof small{display:block;text-transform:uppercase;letter-spacing:1.8px;margin-top:7px;color:#cbd2db;font-size:10px} /* ---------- Intro split + photo frame ---------- */ .intro{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center} .intro p{font-size:18px} .photo-frame{height:490px;background-size:cover;background-position:center;border-radius:2px;box-shadow:18px 18px 0 var(--tp-sand)} /* set the image per page:

*/ /* ---------- Pillars ---------- */ .pillar{background:#fff;border-top:3px solid var(--tp-bronze);padding:34px 30px;min-height:250px;box-shadow:0 10px 25px rgba(12,29,57,.06)} .pillar .num{font-family:var(--tp-serif);color:var(--tp-bronze);font-size:20px;margin-bottom:10px} .pillar h3{font-size:24px} /* ---------- Asset mosaic ---------- */ .asset-section{background:var(--tp-sand-bg)} .asset-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:250px 250px;gap:14px} .asset-grid>div{background-size:cover;background-position:center;position:relative} .asset-grid .a{grid-row:1/3;background-image:linear-gradient(0deg,rgba(12,29,57,.68),transparent 45%),url('/assets/img/ext-red.jpg')} .asset-grid .b{background-image:url('/assets/img/kitchen-sun.jpg')} .asset-grid .c{background:var(--tp-navy);padding:36px;color:#fff} .asset-grid .c h3{color:#fff} .asset-grid .c p{color:#dfe4ea} .asset-grid .d{background-image:url('/assets/img/living-fireplace.jpg')} .asset-grid .e{background:#fff;padding:30px} .asset-label{position:absolute;bottom:22px;left:24px;color:#fff;font-family:var(--tp-serif);font-size:30px} /* ---------- Service cards (homepage grid + services page blocks) ---------- */ .service{display:block;padding:28px 24px;border:1px solid #ddd7cf;background:#fff;color:var(--tp-body);font-size:15px;text-decoration:none;transition:border-color .18s,box-shadow .18s} .service b{display:block;color:var(--tp-navy);margin-bottom:7px;font-size:16px} a.service:hover{border-color:var(--tp-bronze);box-shadow:0 10px 25px rgba(12,29,57,.08)} .service-block{background:#fff;border:1px solid #ddd7cf;border-top:3px solid var(--tp-bronze);padding:32px 28px;box-shadow:0 10px 25px rgba(12,29,57,.05)} .service-block h3{font-size:23px;margin-bottom:12px} .service-block ul{list-style:none;margin:14px 0 0;padding:0} .service-block li{position:relative;padding-left:22px;margin:8px 0;color:var(--tp-body);font-size:15px} .service-block li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--tp-bronze)} /* ---------- Navy band + local cards ---------- */ .local{background:var(--tp-navy);color:#fff} .local h2{color:#fff} .local p{color:#d9dfe6;font-size:18px} .local-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center} .market-card{background:#102746;border:1px solid rgba(255,255,255,.15);padding:28px;margin:12px 0;color:#d9dfe6} .market-card strong{color:#d1a66f;letter-spacing:1.5px;font-size:13px;text-transform:uppercase} .market-card p{color:#d9dfe6;margin:8px 0 0} .market-card h3{color:#fff;font-size:22px;margin:6px 0 10px} /* ---------- Check list ---------- */ .check-list{list-style:none;margin:0;padding:0} .check-list li{position:relative;padding-left:32px;margin:13px 0;color:var(--tp-body)} .check-list li::before{content:"";position:absolute;left:2px;top:7px;width:14px;height:8px;border-left:2px solid var(--tp-bronze);border-bottom:2px solid var(--tp-bronze);transform:rotate(-45deg)} /* ---------- CTA band (bronze) ---------- */ .cta{background:var(--tp-bronze);color:#fff;text-align:center;padding:85px 0} .cta .eyebrow{color:#fff} .cta h2{color:#fff} .cta p{font-size:18px;color:#fff;max-width:640px;margin:0 auto 30px} .cta .button{background:var(--tp-navy);border-color:var(--tp-navy)} .cta .button:hover{background:var(--tp-navy-2);border-color:var(--tp-navy-2)} /* ---------- Renter band (sand) ---------- */ .renter-band{background:var(--tp-sand-bg);text-align:center;padding:84px 0} .renter-band h2{margin-bottom:14px} .renter-band p{max-width:640px;margin:0 auto 30px} .renter-band .buttons{justify-content:center} /* ---------- Forms ---------- */ .split{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start} .form-card{background:#fff;border:1px solid #ddd7cf;padding:36px 32px;border-radius:2px;box-shadow:0 10px 25px rgba(12,29,57,.06)} .form-field{margin-bottom:18px} .form-field label,.field-label{display:block;font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--tp-navy);margin-bottom:7px} .form-field input,.form-field select,.form-field textarea{width:100%;padding:12px 14px;font-family:var(--tp-sans);font-size:15px;color:var(--tp-ink);background:#fff;border:1px solid #c9cfd6;border-radius:var(--tp-radius)} .form-field textarea{min-height:130px;resize:vertical} .form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--tp-navy);box-shadow:0 0 0 3px rgba(12,29,57,.18)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .checkbox-group{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:4px} .checkbox-group label{display:flex;align-items:flex-start;gap:9px;font-weight:400;font-size:14px;letter-spacing:0;color:#3f4954;margin:0} .checkbox-group input{width:auto;margin:3px 0 0;accent-color:var(--tp-navy)} .required{color:var(--tp-bronze)} .form-note{font-size:13px;color:#68717b;margin-top:10px} .form-fallback{display:none;margin-top:16px;padding:14px 16px;background:#f6efe6;border:1px solid var(--tp-bronze);border-radius:var(--tp-radius);color:#54452f;font-size:15px} .form-fallback.visible{display:block} .hp-field{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- Info card (contact page address etc.) ---------- */ .info-card{background:#fff;border:1px solid #ddd7cf;padding:28px 26px;border-radius:2px;margin-bottom:20px} .info-card h3{font-size:21px;margin-bottom:10px} .info-card address{font-style:normal;color:var(--tp-body);line-height:1.6} /* ---------- Footer ---------- */ .site-footer{background:var(--tp-footer);color:#abb6c2;padding:64px 0 0;font-size:14.5px} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:48px;padding-bottom:48px} .footer-brand img{width:280px;height:auto;max-width:100%} .footer-tagline{color:#fff;font-family:var(--tp-serif);font-size:16px;margin:18px 0 12px} .footer-brand p{color:#8b98a7;font-size:14px} .footer-col h4{color:#fff;font-family:var(--tp-sans);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin:0 0 16px;line-height:1.3} .footer-col ul{list-style:none;margin:0;padding:0} .footer-col li{margin:0 0 11px} .footer-col a{color:#abb6c2;text-decoration:none} .footer-col a:hover{color:#fff} .footer-col address{font-style:normal;color:#abb6c2;margin:0 0 12px;line-height:1.65} .footer-col p{color:#abb6c2;margin:0 0 14px} .footer-col .button{padding:12px 18px;font-size:11px} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:24px 0 30px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;font-size:12.5px;color:#8b98a7} .footer-bottom p{margin:0;color:#8b98a7;font-size:12.5px} .eho{display:flex;align-items:flex-start;gap:10px;max-width:460px} .eho-glyph{flex:none;margin-top:1px} /* ---------- Simple pages (thanks / 404) ---------- */ .page-simple{padding:120px 0;text-align:center} .page-simple h1{font-size:clamp(38px,4.5vw,54px)} .page-simple p{max-width:560px;margin:0 auto 30px} .page-simple .buttons{justify-content:center} /* ---------- Responsive ---------- */ /* Hamburger takes over at 1100px so the horizontal logo never renders below its 280px digital minimum while the full nav is visible. */ @media(max-width:1100px){ .navlinks{display:none} .menu-toggle{display:block} } @media(max-width:900px){ .grid4{grid-template-columns:1fr 1fr} .split{grid-template-columns:1fr;gap:44px} .footer-grid{grid-template-columns:1fr 1fr;gap:36px} .hero{padding:160px 0 70px} } @media(max-width:760px){ .container{width:min(100% - 36px,var(--tp-max))} .site-header{padding:14px 0} .brand img{width:205px} .hero{min-height:660px;background-image:linear-gradient(180deg,rgba(7,20,40,.60),rgba(7,20,40,.94)),url('/assets/img/ext-victorian-v7.webp');background-size:100% 100%,auto 100%;background-position:0 0,right center} .hero p{font-size:17px} .hero .buttons{flex-direction:column;align-items:flex-start} .page-hero{padding:58px 0 50px} .proof-grid{grid-template-columns:1fr 1fr} .proof-item{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.15)} .proof strong{font-size:25px} .section{padding:68px 0} .intro,.local-wrap{grid-template-columns:1fr;gap:45px} .photo-frame{height:360px} .asset-grid{grid-template-columns:1fr;grid-template-rows:auto} .asset-grid>div{min-height:250px} .asset-grid .a{grid-row:auto} .grid2,.grid3,.grid4{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .checkbox-group{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:32px} .footer-bottom{flex-direction:column} .cta{padding:64px 0} .renter-band{padding:64px 0} .page-simple{padding:80px 0} }