/* ========================================================================== Tom Thomas Premium — design system Palette preserved from the original site: brass #edae44 · light brass #fdd79a · charcoal #313131 · black · white ========================================================================== */ :root{ --ttp-ink:#0c0e0f; --ttp-ink-2:#14171a; --ttp-charcoal:#313131; --ttp-brass:#edae44; --ttp-brass-lt:#fdd79a; --ttp-paper:#f7f4ee; --ttp-paper-2:#efeae0; --ttp-white:#fff; --ttp-hair:rgba(237,174,68,.30); --ttp-hair-dk:rgba(12,14,15,.14); --ttp-display:"Bodoni Moda",Georgia,"Times New Roman",serif; --ttp-util:"Montserrat",Helvetica,Arial,sans-serif; --ttp-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --ttp-pad:clamp(20px,5vw,72px); --ttp-maxw:1280px; --ttp-sec-y:clamp(72px,10vw,152px); } /* -------------------------------------------------------------------------- Base — scoped so we never fight the theme outside our own markup -------------------------------------------------------------------------- */ body.ttp-active{ background:var(--ttp-paper); color:var(--ttp-charcoal); font-family:var(--ttp-body); font-weight:300; font-size:clamp(15.5px,1.05vw,17px); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .ttp *,.ttp *::before,.ttp *::after{box-sizing:border-box} .ttp img{max-width:100%;display:block;height:auto} .ttp :focus-visible{outline:2px solid var(--ttp-brass);outline-offset:3px} /* Elementor resets: keep our containers edge-to-edge and unpadded */ .ttp-wrap{width:100%} /* -------------------------------------------------------------------------- Type -------------------------------------------------------------------------- */ .ttp .ttp-eyebrow, .ttp .ttp-eyebrow.elementor-heading-title{ font-family:var(--ttp-util);font-weight:600;font-size:11px; letter-spacing:.28em;text-transform:uppercase;color:var(--ttp-brass); display:flex;align-items:center;gap:18px;margin:0 0 26px;line-height:1.4; } .ttp .ttp-eyebrow::after{content:"";flex:1;height:1px;background:var(--ttp-hair)} .ttp .ttp-eyebrow--center{justify-content:center} .ttp .ttp-eyebrow--center::before{content:"";flex:1;height:1px;background:var(--ttp-hair)} .ttp .ttp-display, .ttp .ttp-display .elementor-heading-title, .ttp h1.ttp-display,.ttp h2.ttp-display,.ttp h3.ttp-display{ font-family:var(--ttp-display);font-optical-sizing:auto; font-weight:500;line-height:1.06;letter-spacing:-.015em; color:var(--ttp-ink);margin:0; } .ttp .ttp-h-xl .elementor-heading-title,.ttp .ttp-h-xl{font-size:clamp(42px,7vw,98px)} .ttp .ttp-h-lg .elementor-heading-title,.ttp .ttp-h-lg{font-size:clamp(32px,4.4vw,60px)} .ttp .ttp-h-md .elementor-heading-title,.ttp .ttp-h-md{font-size:clamp(25px,2.9vw,38px)} .ttp .ttp-h-sm .elementor-heading-title,.ttp .ttp-h-sm{font-size:clamp(20px,2.1vw,27px)} .ttp .ttp-lede,.ttp .ttp-lede p{ font-size:clamp(17px,1.35vw,20px);line-height:1.65;font-weight:400;color:var(--ttp-ink); } .ttp .ttp-body p{margin:0 0 22px} .ttp .ttp-body p:last-child{margin-bottom:0} .ttp .ttp-body strong,.ttp .ttp-body b{font-weight:500;color:var(--ttp-ink)} .ttp .ttp-script,.ttp .ttp-script p{ font-family:var(--ttp-display);font-style:italic; font-size:clamp(20px,1.9vw,26px);color:var(--ttp-ink);line-height:1.4; } /* Centred brass rule under a section heading */ .ttp .ttp-rule{width:64px;height:1px;background:var(--ttp-brass);margin:26px auto 0;position:relative} .ttp .ttp-rule::before,.ttp .ttp-rule::after{content:"";position:absolute;top:0;width:120px;height:1px} .ttp .ttp-rule::before{right:100%;background:linear-gradient(to left,var(--ttp-hair),transparent)} .ttp .ttp-rule::after{left:100%;background:linear-gradient(to right,var(--ttp-hair),transparent)} /* Dark sections */ .ttp .ttp-on-dark{color:rgba(255,255,255,.72)} .ttp .ttp-on-dark .ttp-display, .ttp .ttp-on-dark .ttp-display .elementor-heading-title, .ttp .ttp-on-dark .ttp-lede,.ttp .ttp-on-dark .ttp-lede p{color:var(--ttp-white)} .ttp .ttp-on-dark .ttp-body p{color:rgba(255,255,255,.66)} .ttp .ttp-on-dark .ttp-script,.ttp .ttp-on-dark .ttp-script p{color:var(--ttp-brass)} /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .ttp .ttp-btn .elementor-button{ --bg:var(--ttp-brass);--fg:var(--ttp-ink); display:inline-flex;align-items:center;gap:14px; font-family:var(--ttp-util);font-weight:600;font-size:11.5px; letter-spacing:.22em;text-transform:uppercase;text-decoration:none; padding:19px 34px;background:var(--bg);color:var(--fg); border:1px solid var(--bg);border-radius:0;position:relative;overflow:hidden; transition:color .45s ease,border-color .45s ease; } .ttp .ttp-btn .elementor-button::before{ content:"";position:absolute;inset:0;background:var(--ttp-ink); transform:translateY(101%);transition:transform .45s cubic-bezier(.4,0,.2,1);z-index:0; } .ttp .ttp-btn .elementor-button:hover::before{transform:translateY(0)} .ttp .ttp-btn .elementor-button:hover{color:var(--ttp-brass);border-color:var(--ttp-ink)} .ttp .ttp-btn .elementor-button > *{position:relative;z-index:1} .ttp .ttp-btn--ghost .elementor-button{ --bg:transparent;--fg:var(--ttp-white);border-color:rgba(255,255,255,.42); } .ttp .ttp-btn--ghost .elementor-button::before{background:var(--ttp-brass)} .ttp .ttp-btn--ghost .elementor-button:hover{color:var(--ttp-ink);border-color:var(--ttp-brass)} .ttp .ttp-btn--dark .elementor-button{--bg:var(--ttp-ink);--fg:var(--ttp-white);border-color:var(--ttp-ink)} .ttp .ttp-btn--dark .elementor-button::before{background:var(--ttp-brass)} .ttp .ttp-btn--dark .elementor-button:hover{color:var(--ttp-ink);border-color:var(--ttp-brass)} /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .ttp-topbar{ background:var(--ttp-ink);color:rgba(255,255,255,.62); font-family:var(--ttp-util);font-size:10.5px;font-weight:500; letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:60; } .ttp-topbar__in{gap:16px} .ttp-topbar a{color:var(--ttp-brass);text-decoration:none} .ttp-topbar a:hover{color:var(--ttp-brass-lt)} .ttp-hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.12); background:var(--ttp-ink);transition:background .45s ease,border-color .45s ease,box-shadow .45s ease} .ttp-hdr--overlay{background:transparent;margin-bottom:-92px} .ttp-hdr.is-stuck{background:rgba(12,14,15,.96);backdrop-filter:blur(14px); border-bottom-color:var(--ttp-hair);box-shadow:0 14px 44px rgba(0,0,0,.3)} .ttp-hdr__in{gap:28px;min-height:92px} .ttp-brand img{height:clamp(38px,4vw,52px);width:auto} .ttp-nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,28px)} .ttp-nav__lnk{font-family:var(--ttp-util);font-size:11px;font-weight:600;letter-spacing:.19em; text-transform:uppercase;color:rgba(255,255,255,.86);text-decoration:none; padding:34px 0;display:inline-flex;align-items:center;gap:7px;position:relative} .ttp-nav__lnk::after{content:"";position:absolute;left:0;bottom:28px;height:1px;width:0; background:var(--ttp-brass);transition:width .38s cubic-bezier(.4,0,.2,1)} .ttp-nav__lnk:hover,.ttp-nav__lnk.is-on{color:var(--ttp-brass)} .ttp-nav__lnk:hover::after,.ttp-nav__lnk.is-on::after{width:100%} .ttp-caret{width:8px;height:8px;flex:none;opacity:.7} .ttp-has-sub{position:relative} .ttp-sub{position:absolute;top:100%;left:-22px;min-width:274px;background:var(--ttp-ink-2); border:1px solid var(--ttp-hair);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s ease,transform .3s ease,visibility .3s;box-shadow:0 26px 60px rgba(0,0,0,.45)} .ttp-has-sub:hover .ttp-sub,.ttp-has-sub:focus-within .ttp-sub{opacity:1;visibility:visible;transform:translateY(0)} .ttp-sub a{display:block;padding:12px 24px;text-decoration:none;font-family:var(--ttp-body); font-size:14px;font-weight:400;color:rgba(255,255,255,.7);transition:color .25s,background .25s,padding .25s} .ttp-sub a:hover{color:var(--ttp-brass);background:rgba(237,174,68,.07);padding-left:30px} .ttp-burger{display:none;background:none;border:0;padding:10px;cursor:pointer;flex-direction:column;gap:5px} .ttp-burger i{display:block;width:24px;height:1.5px;background:var(--ttp-white);transition:transform .35s,opacity .25s} .ttp-burger.is-open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .ttp-burger.is-open i:nth-child(2){opacity:0} .ttp-burger.is-open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .ttp-drawer{position:fixed;inset:92px 0 0;background:var(--ttp-ink);z-index:45; padding:8px var(--ttp-pad) 48px;overflow-y:auto;transform:translateX(100%); transition:transform .45s cubic-bezier(.4,0,.2,1)} .ttp-drawer.is-open{transform:translateX(0)} .ttp-drawer a{text-decoration:none} .ttp-drawer__row{border-bottom:1px solid rgba(255,255,255,.09)} .ttp-drawer__top{width:100%;display:flex;justify-content:space-between;align-items:center; background:none;border:0;color:var(--ttp-white);cursor:pointer;font-family:var(--ttp-util); font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:20px 2px;text-align:left} .ttp-drawer__panel{max-height:0;overflow:hidden;transition:max-height .4s ease} .ttp-drawer__panel.is-open{max-height:360px} .ttp-drawer__panel a{display:block;padding:11px 2px 11px 18px;color:rgba(255,255,255,.6); font-size:14.5px;border-left:1px solid var(--ttp-hair);margin-left:2px} .ttp-drawer .ttp-btn{width:100%;justify-content:center;margin-top:30px} /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .ttp-hero{position:relative;display:flex;align-items:flex-end;isolation:isolate; background-position:center center;background-size:cover;background-repeat:no-repeat; animation:ttp-pan 34s ease-in-out infinite alternate} .ttp-hero--tall{min-height:min(104vh,940px)} .ttp-hero--page{min-height:min(66vh,620px)} @keyframes ttp-pan{from{background-position:center 45%}to{background-position:center 55%}} .ttp-hero__in{width:100%} .ttp-hero__grid{align-items:flex-end;width:100%} .ttp-hero__col{min-width:0} .ttp-hero .ttp-eyebrow, .ttp-hero .ttp-eyebrow .elementor-heading-title{color:var(--ttp-brass-lt)} .ttp-hero .ttp-eyebrow{margin-bottom:22px} .ttp-hero .ttp-eyebrow::after{background:rgba(253,215,154,.4)} .ttp .ttp-hero__h, .ttp .ttp-hero__h .elementor-heading-title{color:var(--ttp-white);text-shadow:0 3px 40px rgba(0,0,0,.4)} .ttp .ttp-hero__h em, .ttp .ttp-hero__h .elementor-heading-title em{font-style:italic;font-weight:400;color:var(--ttp-brass)} .ttp-hero__sub p{color:rgba(255,255,255,.8);max-width:60ch;margin:22px 0 0;font-size:clamp(16px,1.25vw,19px)} .ttp-hero__btn{margin-top:clamp(28px,3.4vw,44px)} .ttp-quote-card{border-left:1px solid var(--ttp-hair);padding:6px 0 6px 30px;min-width:0} .ttp-quote-card__q p{font-family:var(--ttp-display);font-style:italic;font-weight:400; font-size:clamp(16px,1.32vw,19.5px);line-height:1.62;color:rgba(255,255,255,.9);margin:0 0 18px} .ttp-quote-card__by, .ttp-quote-card__by .elementor-heading-title{font-family:var(--ttp-util);font-size:10px;font-weight:600; letter-spacing:.26em;text-transform:uppercase;color:var(--ttp-brass);margin:0} /* -------------------------------------------------------------------------- Sections & layout -------------------------------------------------------------------------- */ .ttp-sec--paper{background:var(--ttp-paper)} .ttp-sec--paper2{background:var(--ttp-paper-2)} .ttp-sec--ink{background:var(--ttp-ink)} .ttp-split{align-items:center;gap:40px} .ttp-split--rev{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)} .ttp-split--top{align-items:start} .ttp-split--even{grid-template-columns:repeat(2,minmax(0,1fr))} .ttp-head-center{max-width:820px;margin:0 auto clamp(46px,6vw,80px);text-align:center} .ttp-figure{position:relative} .ttp-figure img{width:100%;object-fit:cover;position:relative;z-index:1} .ttp-figure::before{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--ttp-brass);z-index:0} /* Two-panel */ .ttp-panels{background:var(--ttp-hair)} .ttp-panel{background:var(--ttp-ink);padding:clamp(32px,3.8vw,58px);display:flex;flex-direction:column;transition:background .5s ease} .ttp-panel:hover{background:var(--ttp-ink-2)} .ttp-panel__k{font-family:var(--ttp-util);font-size:10px;font-weight:600;letter-spacing:.26em; text-transform:uppercase;color:var(--ttp-brass);margin:0 0 20px} .ttp-panel .ttp-btn{align-self:flex-start;margin-top:auto} /* Numbered process — used only where the content is genuinely sequential */ .ttp-steps{background:var(--ttp-hair-dk);border-top:1px solid var(--ttp-hair-dk)} .ttp-step{background:var(--ttp-paper);padding:clamp(26px,3vw,44px);display:grid;gap:clamp(20px,3vw,44px);align-items:start} .ttp-step__n{font-family:var(--ttp-display);font-size:clamp(30px,3.6vw,50px);line-height:1; color:var(--ttp-brass);min-width:1.6em} .ttp-step h3{font-family:var(--ttp-display);font-size:clamp(21px,2.1vw,28px);color:var(--ttp-ink); margin:0 0 12px;font-weight:500;line-height:1.2} .ttp-step p{margin:0} .ttp-sec--ink .ttp-step{background:var(--ttp-ink-2)} .ttp-sec--ink .ttp-step h3{color:var(--ttp-white)} /* Stat strip */ .ttp-stats{background:var(--ttp-hair)} .ttp-stat{background:var(--ttp-ink)} .ttp-stat b{display:block;font-family:var(--ttp-display);font-size:clamp(30px,3.6vw,48px); color:var(--ttp-brass);line-height:1;margin-bottom:10px;font-weight:500} .ttp-stat span{font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:rgba(255,255,255,.6)} /* Listing cards */ /* Grid sizing lives in the flex-layout block at the end of this file. */ .ttp-card{background:var(--ttp-white);text-decoration:none;color:inherit;display:flex;flex-direction:column; border:1px solid var(--ttp-hair-dk);transition:transform .5s cubic-bezier(.4,0,.2,1),box-shadow .5s ease} .ttp-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(12,14,15,.14)} .ttp-card__img{aspect-ratio:4/3;overflow:hidden;background:var(--ttp-paper-2)} .ttp-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1)} .ttp-card:hover .ttp-card__img img{transform:scale(1.06)} .ttp-card__body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1} .ttp-card__price{font-family:var(--ttp-display);font-size:26px;color:var(--ttp-ink);margin:0 0 8px;font-weight:500} .ttp-card__addr{font-family:var(--ttp-body);font-size:15px;color:var(--ttp-charcoal);margin:0 0 18px;line-height:1.5} .ttp-card__meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--ttp-hair-dk); font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--ttp-charcoal);opacity:.7;display:flex;gap:14px;flex-wrap:wrap} /* Property facts */ .ttp-facts{background:var(--ttp-hair-dk);border:1px solid var(--ttp-hair-dk);margin:34px 0} .ttp-fact{background:var(--ttp-paper)} .ttp-fact b{display:block;font-family:var(--ttp-display);font-size:clamp(22px,2.2vw,30px); color:var(--ttp-ink);line-height:1;margin-bottom:7px;font-weight:500} .ttp-fact span{font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--ttp-charcoal);opacity:.65} /* Testimonials */ .ttp-stage{max-width:940px;margin:0 auto;display:grid;text-align:center;align-items:center} .ttp-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .7s ease,transform .7s ease,visibility .7s} .ttp-slide.is-on{opacity:1;visibility:visible;transform:translateY(0)} .ttp-slide blockquote{margin:0;font-family:var(--ttp-display);font-weight:400; font-size:clamp(19px,2.15vw,29px);line-height:1.5;color:var(--ttp-ink)} .ttp-slide__by{margin-top:30px;display:flex;align-items:center;justify-content:center;gap:12px; font-family:var(--ttp-util);font-size:10px;font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--ttp-charcoal)} .ttp-badge{display:inline-flex;align-items:center;gap:6px;color:var(--ttp-brass); border:1px solid var(--ttp-hair);padding:5px 11px;letter-spacing:.18em} .ttp-quo{font-family:var(--ttp-display);font-size:clamp(56px,6.4vw,96px);line-height:1; color:var(--ttp-brass);opacity:.3;margin:clamp(22px,2.6vw,34px) 0 -.28em;height:.46em;overflow:hidden} .ttp-dots{display:flex;gap:9px;justify-content:center;margin-top:clamp(36px,4vw,52px)} .ttp-dot{width:34px;height:2px;background:rgba(12,14,15,.16);border:0;padding:0;cursor:pointer;transition:background .35s ease} .ttp-dot.is-on{background:var(--ttp-brass)} /* FAQ — doubles as the AI-answerability block */ .ttp-faq{max-width:920px;margin:0 auto;border-top:1px solid var(--ttp-hair-dk)} .ttp-faq__item{border-bottom:1px solid var(--ttp-hair-dk)} .ttp-faq__q{width:100%;background:none;border:0;cursor:pointer;text-align:left; padding:26px 44px 26px 0;position:relative;font-family:var(--ttp-display); font-size:clamp(18px,1.75vw,23px);color:var(--ttp-ink);line-height:1.35;font-weight:500} .ttp-faq__q::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px; border-right:1.5px solid var(--ttp-brass);border-bottom:1.5px solid var(--ttp-brass); transform:translateY(-70%) rotate(45deg);transition:transform .35s ease} .ttp-faq__item.is-open .ttp-faq__q::after{transform:translateY(-30%) rotate(-135deg)} .ttp-faq__a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)} .ttp-faq__a-in{padding:0 44px 28px 0} .ttp-faq__a p{margin:0 0 14px} .ttp-faq__a p:last-child{margin-bottom:0} /* CTA band */ .ttp-cta{background:var(--ttp-ink);position:relative;overflow:hidden} .ttp-cta::before{content:"";position:absolute;inset:0; background:linear-gradient(115deg,rgba(237,174,68,.14),transparent 52%)} .ttp-cta__in{position:relative;gap:clamp(30px,5vw,70px);align-items:center} /* Signature block */ .ttp-sig{border-top:1px solid var(--ttp-hair-dk);margin-top:42px;padding-top:28px; font-size:14.5px;line-height:1.85} .ttp-sig b{font-family:var(--ttp-display);font-size:22px;font-weight:500;color:var(--ttp-ink);display:block;margin-bottom:6px} .ttp-sig a{color:var(--ttp-charcoal)} .ttp-on-dark .ttp-sig{border-color:rgba(255,255,255,.14)} .ttp-on-dark .ttp-sig b{color:var(--ttp-white)} .ttp-on-dark .ttp-sig a{color:rgba(255,255,255,.75)} /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .ttp-foot{background:var(--ttp-ink-2);border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.6)} .ttp-foot__in{gap:clamp(30px,5vw,64px);flex-wrap:wrap} .ttp-foot__col{flex:1 1 220px;min-width:0} .ttp-foot__col--plaque{flex:0 0 auto} .ttp-foot__name{font-family:var(--ttp-display);font-size:28px;color:var(--ttp-white);margin:0 0 6px;font-weight:500} .ttp-foot dl{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px} .ttp-foot dt{font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--ttp-brass);padding-top:3px} .ttp-foot dd{margin:0} .ttp-foot a{color:rgba(255,255,255,.78);text-decoration:none;border-bottom:1px solid var(--ttp-hair);padding-bottom:1px} .ttp-foot a:hover{color:var(--ttp-brass)} .ttp-foot__links{list-style:none;margin:0;padding:0;display:grid;gap:11px} .ttp-foot__links a{border:0;font-family:var(--ttp-util);font-size:10.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)} .ttp-foot__links a:hover{color:var(--ttp-brass)} .ttp-plaque{background:var(--ttp-white);padding:18px 22px;display:inline-block} .ttp-plaque img{width:118px;height:auto} .ttp-foot__basewrap{border-top:1px solid rgba(255,255,255,.08)} .ttp-foot__base{font-family:var(--ttp-util);font-size:9.5px;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)} .ttp-foot__base a{color:var(--ttp-brass);border:0} .ttp-foot__legal{font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.34)} /* -------------------------------------------------------------------------- Reveal -------------------------------------------------------------------------- */ .ttp-rv{opacity:0;transform:translateY(26px); transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1)} .ttp-rv.in{opacity:1;transform:none} /* Never hide content inside the Elementor editor */ .elementor-editor-active .ttp-rv, .elementor-editor-preview .ttp-rv{opacity:1;transform:none} .elementor-editor-active .ttp-slide, .elementor-editor-preview .ttp-slide{position:relative} /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width:1080px){ .ttp-nav,.ttp-hdr__cta{display:none} .ttp-burger{display:flex} .ttp-hero__grid{grid-template-columns:1fr;gap:36px} .ttp-cta__in{grid-template-columns:1fr} .ttp-foot__in{grid-template-columns:1fr 1fr;gap:40px} } @media (max-width:860px){ .ttp-split,.ttp-split--rev{grid-template-columns:1fr;gap:52px} .ttp-figure::before{inset:16px -16px -16px 16px} .ttp-panels{grid-template-columns:1fr} .ttp-step{grid-template-columns:1fr;gap:12px} } @media (max-width:620px){ .ttp-topbar__note{display:none} .ttp-topbar__in{justify-content:center} .ttp-foot__in{grid-template-columns:1fr} .ttp-hero--tall,.ttp-hero--page{min-height:auto} } @media (prefers-reduced-motion:reduce){ .ttp *,.ttp *::before,.ttp *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important; } .ttp-rv{opacity:1;transform:none} } /* ========================================================================== NATIVE ELEMENTOR WIDGET STYLING Everything below targets Elementor's own markup, so each element stays editable in the builder while still matching the design. ========================================================================== */ /* --- Headings & text produced by widgets --- */ .ttp .elementor-widget-heading .elementor-heading-title{margin:0} .ttp .ttp-eyebrow .elementor-heading-title{ font-family:var(--ttp-util);font-weight:600;font-size:11px;letter-spacing:.28em; text-transform:uppercase;color:var(--ttp-brass);display:flex;align-items:center;gap:18px;line-height:1.4} .ttp .ttp-eyebrow .elementor-heading-title::after{content:"";flex:1;height:1px;background:var(--ttp-hair)} .ttp .ttp-eyebrow{margin-bottom:26px} .ttp .ttp-eyebrow--center .elementor-heading-title{justify-content:center} .ttp .ttp-eyebrow--center .elementor-heading-title::before{content:"";flex:1;height:1px;background:var(--ttp-hair)} .ttp .ttp-script .elementor-heading-title{ font-family:var(--ttp-display);font-style:italic;font-weight:400; font-size:clamp(20px,1.9vw,26px);color:var(--ttp-ink);line-height:1.4} .ttp .ttp-on-dark .ttp-script .elementor-heading-title{color:var(--ttp-brass)} .ttp .ttp-script{margin-top:22px;margin-bottom:24px} .ttp .ttp-center .elementor-heading-title{text-align:center} .ttp .ttp-body--center{text-align:center;max-width:760px;margin-inline:auto} .ttp .ttp-lede p{font-size:clamp(17px,1.35vw,20px);line-height:1.65;font-weight:400;color:var(--ttp-ink);margin:26px 0 0} .ttp .ttp-on-dark .ttp-lede p{color:var(--ttp-white)} .ttp-prose{max-width:820px} .ttp-prose--mid{max-width:840px;margin-inline:auto} .ttp-center-act{align-items:center;margin-top:34px} .ttp-center-act .elementor-widget-button{text-align:center} /* --- Divider used as the brass rule --- */ .ttp .ttp-rule-w{margin-top:26px} .ttp .ttp-rule-w .elementor-divider{padding-block:0} .ttp .ttp-rule-w .elementor-divider-separator{margin-inline:auto} /* --- Buttons rendered by the Button widget --- */ .ttp .ttp-btn .elementor-button{ display:inline-flex;align-items:center;gap:14px; font-family:var(--ttp-util);font-weight:600;font-size:11.5px;letter-spacing:.22em; text-transform:uppercase;padding:19px 34px;border-radius:0; background:var(--ttp-brass);color:var(--ttp-ink);border:1px solid var(--ttp-brass); transition:background .4s ease,color .4s ease,border-color .4s ease} .ttp .ttp-btn .elementor-button:hover{background:var(--ttp-ink);color:var(--ttp-brass);border-color:var(--ttp-ink)} .ttp .ttp-btn--ghost .elementor-button{background:transparent;color:var(--ttp-white);border-color:rgba(255,255,255,.42)} .ttp .ttp-btn--ghost .elementor-button:hover{background:var(--ttp-brass);color:var(--ttp-ink);border-color:var(--ttp-brass)} .ttp .elementor-widget-button{align-self:flex-start} .ttp .ttp-center-act .elementor-widget-button{align-self:center} /* --- Panels --- */ .ttp-panels{background:var(--ttp-hair)} .ttp-panel{background:var(--ttp-ink);transition:background .5s ease} .ttp-panel:hover{background:var(--ttp-ink-2)} .ttp-panel .ttp-panel__k .elementor-heading-title{ font-family:var(--ttp-util);font-size:10px;font-weight:600;letter-spacing:.26em; text-transform:uppercase;color:var(--ttp-brass)} .ttp-panel .ttp-panel__k{margin-bottom:20px} .ttp-panel .elementor-widget-button{margin-top:auto} /* --- Steps --- */ .ttp-steps{border-top:1px solid var(--ttp-hair-dk)} .ttp-step{background:var(--ttp-paper);gap:clamp(20px,3vw,44px);border-bottom:1px solid var(--ttp-hair-dk)} .ttp-sec--ink .ttp-steps{border-top-color:var(--ttp-hair)} .ttp-sec--ink .ttp-step{background:var(--ttp-ink-2);border-bottom-color:var(--ttp-hair)} .ttp-step__num{flex:0 0 auto} .ttp-step__body{flex:1 1 auto;min-width:0} .ttp .ttp-step__n .elementor-heading-title{ font-family:var(--ttp-display);font-size:clamp(30px,3.6vw,50px);line-height:1;color:var(--ttp-brass)} .ttp .ttp-step__t .elementor-heading-title{ font-family:var(--ttp-display);font-size:clamp(21px,2.1vw,28px);color:var(--ttp-ink); font-weight:500;line-height:1.2} .ttp-sec--ink .ttp-step__t .elementor-heading-title{color:var(--ttp-white)} .ttp-step__t{margin-bottom:12px} /* --- Stats --- */ .ttp-stats{background:var(--ttp-hair)} .ttp-stat{background:var(--ttp-ink)} .ttp .ttp-stat__b .elementor-heading-title{ font-family:var(--ttp-display);font-size:clamp(30px,3.6vw,48px);color:var(--ttp-brass); line-height:1;font-weight:500} .ttp .ttp-stat__l .elementor-heading-title{ font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:rgba(255,255,255,.6)} .ttp-stat__b{margin-bottom:10px} /* --- Cards --- */ .ttp-card{background:var(--ttp-white);border:1px solid var(--ttp-hair-dk);overflow:hidden; transition:transform .5s cubic-bezier(.4,0,.2,1),box-shadow .5s ease;cursor:pointer} .ttp-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(12,14,15,.14)} .ttp-card__media{overflow:hidden} .ttp-card__media .elementor-widget-image,.ttp-card__media figure,.ttp-card__media img{margin:0;display:block;width:100%} .ttp-card__media img{aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1)} .ttp-card:hover .ttp-card__media img{transform:scale(1.06)} .ttp-card__body{flex:1} .ttp .ttp-card__price .elementor-heading-title{ font-family:var(--ttp-display);font-size:26px;color:var(--ttp-ink);font-weight:500;line-height:1.1} .ttp .ttp-card__addr .elementor-heading-title{ font-family:var(--ttp-body);font-size:15px;font-weight:400;color:var(--ttp-charcoal);line-height:1.5} .ttp-card__price{margin-bottom:8px} .ttp-card__addr{margin-bottom:16px} .ttp .ttp-card__meta p{margin:0;padding-top:16px;border-top:1px solid var(--ttp-hair-dk); font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--ttp-charcoal);opacity:.7} .ttp-card--text .ttp-card__body{min-height:200px} /* --- Property facts --- */ .ttp-facts{background:var(--ttp-hair-dk);border:1px solid var(--ttp-hair-dk);margin:34px 0} .ttp-fact{background:var(--ttp-paper)} .ttp .ttp-fact__b .elementor-heading-title{ font-family:var(--ttp-display);font-size:clamp(22px,2.2vw,30px);color:var(--ttp-ink); line-height:1;font-weight:500} .ttp .ttp-fact__l .elementor-heading-title{ font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--ttp-charcoal);opacity:.65} .ttp-fact__b{margin-bottom:7px} /* --- Testimonial carousel (Pro) --- */ .ttp-testi .elementor-testimonial__text{ font-family:var(--ttp-display);font-weight:400;font-size:clamp(19px,2.15vw,29px); line-height:1.5;color:var(--ttp-ink)} .ttp-testi .elementor-testimonial__name{ font-family:var(--ttp-util);font-size:10px;font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--ttp-charcoal);margin-top:26px} .ttp-testi .elementor-testimonial__title{ font-family:var(--ttp-util);font-size:10px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--ttp-brass)} .ttp-testi .swiper-pagination-bullet{background:rgba(12,14,15,.2);opacity:1;border-radius:0;width:30px;height:2px} .ttp-testi .swiper-pagination-bullet-active{background:var(--ttp-brass)} .ttp-testi .elementor-swiper-button{color:var(--ttp-brass)} /* --- Accordion / FAQ --- */ .ttp-faq-w{max-width:920px;margin-inline:auto;width:100%} .ttp-faq-w .elementor-accordion .elementor-accordion-item{ border:0;border-bottom:1px solid var(--ttp-hair-dk)} .ttp-faq-w .elementor-accordion .elementor-accordion-item:first-of-type{border-top:1px solid var(--ttp-hair-dk)} .ttp-faq-w .elementor-tab-title{ background:transparent;padding:26px 44px 26px 0; font-family:var(--ttp-display);font-size:clamp(18px,1.75vw,23px); color:var(--ttp-ink);line-height:1.35;font-weight:500} .ttp-faq-w .elementor-tab-title.elementor-active{color:var(--ttp-brass)} .ttp-faq-w .elementor-tab-title .elementor-accordion-icon{color:var(--ttp-brass);font-size:13px} .ttp-faq-w .elementor-tab-content{ background:transparent;border:0;padding:0 44px 28px 0; font-family:var(--ttp-body);font-weight:300;line-height:1.75;color:var(--ttp-charcoal)} .ttp-faq-w .elementor-tab-content p{margin:0 0 14px} /* --- Listing gallery carousel --- */ .ttp-gallery{width:100%} .ttp-gallery .swiper-slide img{aspect-ratio:3/2;object-fit:cover;width:100%} .ttp-gallery .elementor-swiper-button{color:var(--ttp-brass);background:rgba(12,14,15,.55);padding:14px} .ttp-gallery .swiper-pagination-bullet{background:rgba(12,14,15,.25);opacity:1;border-radius:0;width:26px;height:2px} .ttp-gallery .swiper-pagination-bullet-active{background:var(--ttp-brass)} /* --- Signature block --- */ .ttp .ttp-sig{border-top:1px solid var(--ttp-hair-dk);margin-top:42px;padding-top:28px; font-size:14.5px;line-height:1.85;max-width:560px} .ttp .ttp-sig p{margin:0 0 4px} .ttp .ttp-sig strong{font-family:var(--ttp-display);font-size:22px;font-weight:500;color:var(--ttp-ink)} .ttp .ttp-sig__pre{color:var(--ttp-charcoal);margin-bottom:10px} .ttp .ttp-body--center + .ttp-center-act + .ttp-sig{margin-inline:auto;text-align:center} /* --- Contact --- */ .ttp-contact__details,.ttp-contact__form{min-width:0} .ttp-contact__form .ttp-eyebrow{margin-bottom:22px} /* --- CTA band --- */ .ttp-cta__in{width:100%} .ttp-cta__text{min-width:0} .ttp-cta__act{flex:0 0 auto} /* --- Topbar / footer text widgets --- */ .ttp .ttp-topbar__note p,.ttp .ttp-topbar__tel p{margin:0} .ttp .ttp-foot__name .elementor-heading-title{ font-family:var(--ttp-display);font-size:28px;color:var(--ttp-white);font-weight:500} .ttp .ttp-foot__details{margin-top:16px;font-size:13.5px} .ttp .ttp-foot__details p{margin:0 0 9px;display:flex;gap:14px} .ttp .ttp-foot__details span{ font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--ttp-brass);flex:0 0 72px;padding-top:3px} .ttp .ttp-foot__legal p{margin:0} .ttp .ttp-foot__base p{margin:0} .ttp .ttp-plaque .elementor-widget-container{background:var(--ttp-white);padding:18px 22px;display:inline-block} .ttp .ttp-plaque img{width:118px;height:auto} @media (max-width:860px){ .ttp-panels,.ttp-hero__grid{grid-template-columns:1fr!important} .ttp-step{flex-direction:column;gap:12px} } /* ========================================================================== ELEMENTOR PRO THEME-BUILDER WIDGETS (Site Logo, Nav Menu, Form) ========================================================================== */ /* --- Site Logo --- */ .ttp .ttp-logo .elementor-widget-container{line-height:0} .ttp .ttp-logo img{height:clamp(38px,4vw,52px);width:auto;max-width:220px;object-fit:contain} /* --- Nav Menu: desktop --- */ .ttp .ttp-menu .elementor-nav-menu--main .elementor-nav-menu{ display:flex;gap:clamp(14px,1.9vw,28px);list-style:none;margin:0;padding:0} .ttp .ttp-menu .elementor-nav-menu--main .elementor-item{ font-family:var(--ttp-util);font-size:11px;font-weight:600;letter-spacing:.19em; text-transform:uppercase;color:rgba(255,255,255,.86);text-decoration:none; padding:34px 0;fill:currentColor;position:relative;white-space:nowrap;background:transparent} .ttp .ttp-menu .elementor-nav-menu--main .elementor-item:hover, .ttp .ttp-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .ttp .ttp-menu .elementor-nav-menu--main .elementor-item.highlighted, .ttp .ttp-menu .elementor-nav-menu--main .elementor-item:focus{color:var(--ttp-brass);background:transparent} .ttp .ttp-menu .elementor-nav-menu--main .elementor-item::after{ content:"";position:absolute;left:0;bottom:28px;height:1px;width:0;background:var(--ttp-brass); transition:width .38s cubic-bezier(.4,0,.2,1)} .ttp .ttp-menu .elementor-nav-menu--main .elementor-item:hover::after, .ttp .ttp-menu .elementor-nav-menu--main .elementor-item.elementor-item-active::after{width:100%} /* --- Nav Menu: dropdowns --- */ .ttp .ttp-menu .elementor-nav-menu--dropdown{ background:var(--ttp-ink-2);border:1px solid var(--ttp-hair);box-shadow:0 26px 60px rgba(0,0,0,.45)} .ttp .ttp-menu .elementor-nav-menu--dropdown a{ font-family:var(--ttp-body);font-size:14px;font-weight:400;color:rgba(255,255,255,.7); padding:12px 24px;transition:color .25s,background .25s,padding .25s} .ttp .ttp-menu .elementor-nav-menu--dropdown a:hover, .ttp .ttp-menu .elementor-nav-menu--dropdown a.elementor-item-active{ color:var(--ttp-brass);background:rgba(237,174,68,.07);padding-left:30px} /* --- Nav Menu: mobile toggle --- */ .ttp .ttp-menu .elementor-menu-toggle{color:var(--ttp-white);background:transparent;border:0;padding:10px} .ttp .ttp-menu .elementor-menu-toggle:hover{background:transparent;color:var(--ttp-brass)} .ttp .ttp-menu .elementor-menu-toggle i,.ttp .ttp-menu .elementor-menu-toggle svg{font-size:26px;width:26px;height:26px} .ttp .ttp-menu .elementor-nav-menu--dropdown .elementor-item{ font-family:var(--ttp-util);font-size:12px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--ttp-white);padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.09)} .ttp .ttp-menu .elementor-nav-menu--dropdown .elementor-sub-item{ text-transform:none;letter-spacing:0;font-family:var(--ttp-body); color:rgba(255,255,255,.6);padding-left:40px} /* --- Footer nav (vertical) --- */ .ttp .ttp-foot-menu .elementor-nav-menu{display:flex;flex-direction:column;align-items:flex-start; gap:0;list-style:none;margin:0;padding:0} .ttp .ttp-foot-menu .elementor-nav-menu .elementor-item{ font-family:var(--ttp-util);font-size:10.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:rgba(255,255,255,.62);padding:6px 0;text-decoration:none;background:transparent} .ttp .ttp-foot-menu .elementor-nav-menu .elementor-item:hover, .ttp .ttp-foot-menu .elementor-nav-menu .elementor-item.elementor-item-active{ color:var(--ttp-brass);background:transparent} .ttp .ttp-foot-menu .elementor-nav-menu--dropdown{display:none} /* --- Form (Elementor Pro) --- */ .ttp .ttp-form .elementor-field-group > label{ font-family:var(--ttp-util);font-size:9.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--ttp-charcoal);margin-bottom:9px} .ttp .ttp-form .elementor-field-textual{ background:transparent;border:0;border-bottom:1px solid var(--ttp-hair-dk);border-radius:0; padding:12px 2px;font-family:var(--ttp-body);font-size:15px;color:var(--ttp-ink); transition:border-color .3s ease;width:100%} .ttp .ttp-form .elementor-field-textual:focus{border-bottom-color:var(--ttp-brass);box-shadow:none;outline:none} .ttp .ttp-form .elementor-field-textual::placeholder{color:rgba(49,49,49,.4)} .ttp .ttp-form .elementor-button[type="submit"], .ttp .ttp-form button[type="submit"]{ background:var(--ttp-brass);color:var(--ttp-ink);border:1px solid var(--ttp-brass);border-radius:0; font-family:var(--ttp-util);font-weight:600;font-size:11.5px;letter-spacing:.22em; text-transform:uppercase;padding:19px 34px;cursor:pointer; transition:background .4s ease,color .4s ease,border-color .4s ease} .ttp .ttp-form .elementor-button[type="submit"]:hover, .ttp .ttp-form button[type="submit"]:hover{background:var(--ttp-ink);color:var(--ttp-brass);border-color:var(--ttp-ink)} /* --- Header bars --- */ .ttp-topbar{background:var(--ttp-ink)} .ttp .ttp-topbar__note p,.ttp .ttp-topbar__tel p{ font-family:var(--ttp-util);font-size:10.5px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:rgba(255,255,255,.62);margin:0} .ttp .ttp-topbar__tel a{color:var(--ttp-brass);text-decoration:none} .ttp .ttp-topbar__tel a:hover{color:var(--ttp-brass-lt)} .ttp-hdr{position:sticky;top:0;z-index:50;background:var(--ttp-ink); border-bottom:1px solid rgba(255,255,255,.12)} .ttp .ttp-hdr__cta .elementor-button{padding:16px 26px} @media (max-width:1080px){ .ttp .ttp-hdr__cta{display:none} } /* --- Hero scrim ----------------------------------------------------------- Kept in CSS rather than Elementor's background overlay: the overlay control only supports a two-stop gradient, and this needs to be dark at the top (for the sticky header) AND at the bottom (where the headline sits), with the photo showing through the middle. ------------------------------------------------------------------------- */ .ttp-hero{position:relative;isolation:isolate} /* The darkening is applied to the background IMAGE via blend mode, not as a layer over the whole section — so only the photograph is dimmed and the container itself stays untouched. */ .ttp-hero{ background-color:rgba(12,14,15,.60); background-blend-mode:multiply; } /* Extra weight only where the type sits, still blended into the image rather than painted across the container. */ .ttp-hero__in{position:relative;z-index:1} .ttp-hero > *{position:relative;z-index:1} /* ========================================================================== FLEX ROW BEHAVIOUR Column WIDTHS are set per-container in Elementor's own settings (with width_tablet / width_mobile collapsing to 100%), so nothing here sizes children — CSS child selectors do not survive the editor's injected DOM. Only wrap behaviour and gaps live here. ========================================================================== */ .ttp-grid,.ttp-panels,.ttp-stats,.ttp-facts,.ttp-split,.ttp-hero__grid,.ttp-foot__in{flex-wrap:wrap} .ttp-grid{gap:32px} .ttp-grid--4{gap:24px} .ttp-panels,.ttp-stats,.ttp-facts{gap:1px} .ttp-split{gap:40px} .ttp-hero__grid{gap:clamp(34px,5vw,84px)} /* ========================================================================== CONTENT WIDTH Elementor's boxed-container setting did not apply reliably, so the max-width is pinned here instead. Padding still comes from Elementor's own settings. ========================================================================== */ .ttp .ttp-wrap, .ttp .ttp-hero__in, .ttp .ttp-topbar__in, .ttp .ttp-hdr__in, .ttp .ttp-foot__in, .ttp .ttp-foot__legalwrap, .ttp .ttp-foot__basewrap{ max-width:calc(1280px + (2 * clamp(20px,5vw,72px))); margin-inline:auto; width:100%; } /* ========================================================================== THEME CHROME When this plugin is rendering the header/footer, the theme's own must not also appear. The template-part filters remove it where supported; this is the guaranteed backstop. ========================================================================== */ body.ttp-chrome #site-header, body.ttp-chrome #site-footer, body.ttp-chrome > header.site-header, body.ttp-chrome > footer.site-footer{display:none !important} /* ========================================================================== NAV BREAKPOINT Elementor swaps the horizontal menu for a burger below its dropdown breakpoint. These rules make sure our styling never overrides that — an always-visible desktop menu overflows the viewport on phones. ========================================================================== */ @media (max-width:1080px){ .ttp .ttp-menu .elementor-nav-menu--main{display:none} .ttp .ttp-menu .elementor-menu-toggle{display:flex} } @media (min-width:1081px){ .ttp .ttp-menu .elementor-menu-toggle{display:none} } .ttp .ttp-menu .elementor-nav-menu--dropdown .elementor-nav-menu{ display:block;list-style:none;margin:0;padding:0} /* Nothing in the layout may push the page wider than the viewport. */ body.ttp-active:not(.elementor-editor-active){overflow-x:hidden} /* The mobile panel is a