/* ════════════════════════════════════════════════════════════════════════ TACTILE — the "not flat" layer shared by every public page (Sept 2026). Loaded last, after each page's own styles. The brutalist look stays (hard edges, ink, orange); what it adds is response: things you can click lift onto an offset shadow, buttons press in, fields light up when you point at them or type in them, hint text is readable, and the FAQ answers the mouse. Everything that moves stops for visitors who ask for reduced motion. ════════════════════════════════════════════════════════════════════════ */ :root{--t-hot:var(--ab-hot,#ff3d00);--t-btn:var(--ab-hot-btn,#df3500);--t-ink:var(--ab-ink,#0a0a0a);--t-ease:cubic-bezier(.2,.8,.2,1)} /* ── 1. Hint text you can read ────────────────────────────────────────── */ /* The theme set every placeholder to 11 px spaced capitals ("JUAN DELA CRUZ"), which read as a label, not an example. */ html body input::placeholder,html body textarea::placeholder{text-transform:none !important;letter-spacing:0 !important;font-family:'Inter',system-ui,sans-serif !important;font-size:14px !important;font-weight:500 !important;opacity:1 !important} /* ── 2. Fields answer the mouse and the keyboard ──────────────────────── */ html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]):not([type=color]),select,textarea){transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease} @media(hover:hover){ html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]):not([type=color]),select,textarea):not(:focus):not(:disabled):not([readonly]):hover{border-color:var(--t-hot) !important} } html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]):not([type=color]),select,textarea):focus{border-color:var(--t-hot) !important;box-shadow:0 0 0 3px rgba(255,61,0,.28) !important;outline:none !important} html body :is(input[type=checkbox],input[type=radio]){accent-color:var(--t-btn)} /* ── 3. Buttons that press ────────────────────────────────────────────── */ html body :is(button,[role=button],.btn,[class*="-btn"],[class*="btn-"]):not(:disabled):not(.floating-btn):not(.mobile-menu-btn):not([class*="leaflet"]):not([class*="maplibre"]):not(.glg-nav):active{transform:translate(2px,2px) !important} /* The solid call-to-action buttons lift onto an ink shadow when pointed at. */ @media(hover:hover){ html body :is(.submit-btn,.cta-btn,.btn-gold,.glra-btn:not(.glra-btn-ghost),.modal-inquire-btn,.calculate-btn,.view-all-btn,.broker-btn-primary,.print-btn,.comm-btn):not(:disabled){transition:transform .16s var(--t-ease),box-shadow .16s var(--t-ease),background-color .18s,color .18s !important} html body :is(.submit-btn,.cta-btn,.btn-gold,.glra-btn:not(.glra-btn-ghost),.modal-inquire-btn,.calculate-btn,.view-all-btn,.broker-btn-primary,.print-btn,.comm-btn):not(:disabled):hover{transform:translate(-2px,-2px) !important;box-shadow:4px 4px 0 var(--t-ink) !important} html body :is(.submit-btn,.cta-btn,.btn-gold,.glra-btn:not(.glra-btn-ghost),.modal-inquire-btn,.calculate-btn,.view-all-btn,.broker-btn-primary,.print-btn,.comm-btn):not(:disabled):active{transform:translate(2px,2px) !important;box-shadow:0 0 0 var(--t-ink) !important} } html body :is(button,a,[role=button],summary):focus-visible{outline:3px solid var(--t-hot) !important;outline-offset:3px !important} /* ── 4. Cards you can open lift onto an orange shadow ─────────────────── */ /* The theme deliberately stopped every card moving on hover; the result was a page that never answered the mouse. Only cards that go somewhere lift. */ @media(hover:hover){ html body :is(a.tool-card,.tool-card[onclick],a.area-card,.area-card[onclick],a.resource-card,.resource-card[onclick],a.blog-card,.blog-card[onclick],a.nh-card,.nh-card[onclick],a.arth-card,.arth-card[onclick],.qs-card[onclick],a.qs-card){transition:transform .22s var(--t-ease),box-shadow .22s var(--t-ease),background-color .2s !important} html body :is(a.tool-card,.tool-card[onclick],a.area-card,.area-card[onclick],a.resource-card,.resource-card[onclick],a.blog-card,.blog-card[onclick],a.nh-card,.nh-card[onclick],a.arth-card,.arth-card[onclick],.qs-card[onclick],a.qs-card):hover{transform:translate(-4px,-4px) !important;box-shadow:6px 6px 0 var(--t-btn) !important;position:relative;z-index:2} html body .section .prop-card{transition:transform .22s var(--t-ease),box-shadow .22s var(--t-ease),background-color .2s !important} html body .section .prop-card:hover{transform:translate(-4px,-4px) !important;box-shadow:6px 6px 0 var(--t-btn) !important;position:relative;z-index:3} html body .section .prop-card:hover .prop-card-image img{transform:scale(1.045) !important;transition:transform .6s var(--t-ease) !important} html body .prop-card .prop-card-image{overflow:hidden} } /* Cards that are only text still get a quiet edge on hover, not a jump. */ @media(hover:hover){ html body :is(.testimonial-card,.value-card,.step-card,.section-card){transition:box-shadow .22s var(--t-ease) !important} html body :is(.testimonial-card,.value-card,.step-card,.section-card):hover{box-shadow:inset 4px 0 0 var(--t-btn) !important} } /* ── 5. The FAQ answers the mouse ─────────────────────────────────────── */ html body .faq-item summary{transition:background-color .18s,padding-left .22s var(--t-ease),color .18s !important} @media(hover:hover){html body .faq-item summary:hover{background:rgba(255,61,0,.06) !important;padding-left:12px !important}} html body .faq-item[open]{box-shadow:inset 4px 0 0 var(--t-btn) !important} html body .faq-item[open] summary{padding-left:14px !important;color:var(--ab-hot-text,#c02e00) !important} html body .faq-item[open] .faq-answer{padding-left:72px !important;animation:tFaq .3s var(--t-ease) both} @media(max-width:560px){html body .faq-item[open] .faq-answer{padding-left:14px !important}} html body .faq-item summary::after{transition:transform .25s var(--t-ease),color .2s !important} html body .faq-item[open] summary::after{color:var(--ab-hot-text,#c02e00) !important} @keyframes tFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ── 6. Reduced motion ────────────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ html body *{transition-duration:.01ms !important} html body .faq-item[open] .faq-answer{animation:none} html body :is(a.tool-card,.tool-card[onclick],a.area-card,a.resource-card,a.blog-card,a.nh-card,a.arth-card,.section .prop-card):hover{transform:none !important} } /* ── Phone menu: the X gets its own solid top bar ──────────────────────────── The X floated over the menu with a see-through fill, so the menu's first divider cut across it and every divider slid through it as the menu scrolled. A sticky ink bar now runs across the top of the menu (it slides in with the menu, unlike a fixed one), carries the divider line itself, and sits under the X; links scroll away beneath it. The X is solid and lines up with the 24px menu column. */ html body .mobile-overlay::before{ content:"";display:block;flex:0 0 auto;align-self:stretch; position:sticky;top:-60px;z-index:3; /* sticky counts from inside the 60px padding */ height:74px;margin:-60px -24px 0; background:#0a0a0a;border-bottom:1px solid rgba(241,238,233,.2); } html body .mobile-overlay .mobile-overlay-links{border-top:0 !important;margin-top:0 !important} html body .mobile-overlay .close-menu{ position:fixed !important;top:14px !important;right:24px !important;left:auto !important; width:46px !important;height:46px !important;z-index:5500 !important; background:#0a0a0a !important;border:1px solid rgba(241,238,233,.45) !important; border-radius:0 !important;color:#f1eee9 !important; -webkit-tap-highlight-color:transparent; transition:opacity .2s ease,visibility .2s ease,background-color .15s,border-color .15s,transform .1s !important; } /* A tap on a phone leaves :hover stuck on, which left the X half-orange. */ @media (hover:none){ html body .mobile-overlay .close-menu:hover{background:#0a0a0a !important;border-color:rgba(241,238,233,.45) !important} } html body .mobile-overlay .close-menu:active{background:var(--ab-hot,#df3500) !important;border-color:var(--ab-hot,#df3500) !important;transform:scale(.94)} html body .mobile-overlay .close-menu:focus-visible{outline:2px solid #ff3d00;outline-offset:3px} /* ── Page headlines: the -3px tracking ate the word spaces on a phone ("PROPERTIESFOR SALE"). Give the gap back. */ html body .page-hero h1{word-spacing:.1em} @media(max-width:640px){html body .page-hero h1{letter-spacing:-1.5px !important}} /* ── Icons sit in the middle of their slot ────────────────────────────────── Every page reserves a 1em-wide slot per icon (min-width:1em, against layout shift) but left the glyph at the slot's left edge. A narrow glyph like the menu's X then sat 4-5px left of centre in its square button. */ html body :is(i.fas,i.far,i.fab,i.fa,i.fa-solid,i.fa-regular,i.fa-brands){text-align:center} /* ── Phone footer: two columns, not one very long list ───────────────────── One column made the footer longer than a whole screen of links on every page. The brand block spans the top; link columns pair up; an odd last column (Company + Contact) takes the full width. Social icons line up with the text above them instead of floating in the middle. */ @media(max-width:640px){ html body footer .footer-content{grid-template-columns:1fr 1fr !important;column-gap:20px !important;row-gap:30px !important} html body footer .footer-content>.footer-col{min-width:0} html body footer .footer-content>.footer-col:first-child, html body footer .footer-content>.footer-col:last-child:nth-child(even){grid-column:1/-1} html body footer .footer-social{justify-content:flex-start !important} html body footer .footer-col ul li a{display:flex;align-items:center;min-height:40px;overflow-wrap:anywhere} } /* ── Credentials strip on a phone: a proper grid ─────────────────────────── Five items in two columns left the fifth alone with the dividers only between some of the cells. Every cell now has its lines, and an odd last item spans the full width. */ @media(max-width:600px){ html body .trust-grid .trust-item{border-right:1px solid var(--ab-line) !important;border-bottom:1px solid var(--ab-line) !important} html body .trust-grid .trust-item:nth-child(2n){border-right:0 !important} html body .trust-grid .trust-item:last-child:nth-child(odd){grid-column:1/-1;border-right:0 !important} html body .trust-grid .trust-item:last-child, html body .trust-grid .trust-item:nth-last-child(2):nth-child(odd){border-bottom:0 !important} } /* ── Leftover from the old gold theme: a 100px line centred under every page headline, under text that is left-aligned. Read as a stray mark. */ html body .page-hero::after{display:none !important} /* ── Arthaland pages: their own button colour, not the site's orange ──────── These pages always run in dark mode, and the theme's `body.dark-mode a.cta{background:#df3500 !important}` outranked each page's own `[data-x] .cta` rule, so every main button turned orange with near-black text. Each page's accent is restored here. */ html[data-arth] body a.cta:not(.ghost){background:var(--bone) !important;border-color:var(--bone) !important;color:#0a0a0b !important} html[data-sondris] body a.cta:not(.ghost){background:var(--brass) !important;border-color:var(--brass) !important;color:#15100a !important} html[data-eluria] body a.cta:not(.ghost){background:var(--sage) !important;border-color:var(--sage) !important;color:#121611 !important} html[data-liv] body a.cta:not(.ghost){background:var(--teal) !important;border-color:var(--teal) !important;color:#0d1416 !important} html[data-una] body a.cta:not(.ghost){background:var(--clay) !important;border-color:var(--clay) !important;color:#1a0f0a !important} html[data-lucima] body a.cta:not(.ghost){background:var(--champ) !important;border-color:var(--champ) !important;color:#14120c !important} @media(hover:hover){html:is([data-arth],[data-sondris],[data-eluria],[data-liv],[data-una],[data-lucima]) body a.cta:not(.ghost):hover{background:#fff !important;border-color:#fff !important;color:#0a0a0b !important}} /* Arthaland pages on a phone: the closing buttons were three different widths; the certification tags wrapped 3 + 1; each building's fact row wrapped its third fact onto a line of its own behind a stray divider. */ @media(max-width:640px){ html:is([data-arth],[data-sondris],[data-eluria],[data-liv],[data-una],[data-lucima]) .close-btns{display:grid !important;grid-template-columns:1fr;gap:12px} html:is([data-arth],[data-sondris],[data-eluria],[data-liv],[data-una],[data-lucima]) .close-btns .cta{justify-content:center;width:100%;box-sizing:border-box;padding-left:16px !important;padding-right:16px !important} html:is([data-arth],[data-sondris],[data-eluria],[data-liv],[data-una],[data-lucima]) .cert-list{display:grid !important;grid-template-columns:repeat(4,1fr);gap:8px} html:is([data-arth],[data-sondris],[data-eluria],[data-liv],[data-una],[data-lucima]) .cert-list li{text-align:center;padding:11px 4px !important} html[data-arth] .pl-facts{display:grid !important;grid-template-columns:1fr 1fr} html[data-arth] .pl-facts span{padding:11px 12px 11px 0 !important;border-left:0 !important} html[data-arth] .pl-facts span:nth-child(2n){padding-left:14px !important;border-left:1px solid var(--line) !important} html[data-arth] .pl-facts span:nth-child(n+3){border-top:1px solid var(--line)} } /* ── Tables on a phone (see TABLE-SCROLL in main.js) ────────────────────── break-word, unlike anywhere, does not shrink a column below its longest word, so words stay whole; the wrapper scrolls sideways instead. */ html body :is(td,th){overflow-wrap:break-word} .glra-tbl-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .glra-tbl-scroll>table{margin-top:0} /* ── Shortcut chip rows on a phone: even grids, no orphan on a line alone ── Commission (6 chips) wrapped 5 + 1; the loan calculator's rate and term chips wrapped into ragged pairs. */ @media(max-width:640px){ html body #commissionButtons{display:grid !important;grid-template-columns:repeat(6,1fr);gap:6px} html body #commissionButtons .comm-btn{padding:10px 0 !important;text-align:center;min-width:0;display:flex;align-items:center;justify-content:center} html body .presets{display:grid !important;grid-template-columns:repeat(3,1fr);gap:6px} html body .presets button{min-height:38px;padding:6px 4px !important;text-align:center;line-height:1.2;display:flex;align-items:center;justify-content:center} } /* Stacked newsletter form on a phone: the full-width Subscribe button kept its label at the left edge. */ html body .newsletter-form button{justify-content:center;text-align:center} /* ── Home page on a phone ─────────────────────────────────────────────────── */ /* Section intros: at 880px the header drops to one column, but the paragraph and eyebrow kept `grid-column:2/-1`, which made an implicit second column and squeezed the text into a 150px sliver down the right-hand side. */ @media(max-width:880px){ html body :is(.section,.resources-section,.testimonials,.contact-form-section,.faq-section,.how-it-works,.arth-feat) .section-header>*{grid-column:1/-1 !important;justify-self:start !important;text-align:left !important} html body :is(.section,.resources-section,.testimonials,.contact-form-section,.faq-section,.how-it-works,.arth-feat) .section-header>div:empty{display:none} } /* FAQ: an empty in each question took the third grid cell and pushed the "+" onto a line of its own under the question (desktop too). */ html body .faq-item summary>span:empty{display:none} /* Broker buttons wrapped 2 + 1; now an even grid, an odd last one full width. */ @media(max-width:640px){ html body .broker-contact-buttons{display:grid !important;grid-template-columns:1fr 1fr;gap:10px} html body .broker-contact-buttons>*{justify-content:center;text-align:center;margin:0 !important} html body .broker-contact-buttons>*:last-child:nth-child(odd){grid-column:1/-1} /* Popular searches: one row that scrolls sideways instead of 3 + 2. */ /* contain:inline-size keeps the row's own width out of the hero column's sizing; without it the column grew to fit every chip and the whole hero ran off the right edge. */ html body .hx-chips{contain:inline-size;min-width:0;max-width:100%;flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)} html body .hx-chips::-webkit-scrollbar{display:none} html body .hx-chips>*{flex:none} /* Map key and toggles wrapped 3 + 1: a two-column grid, CTA full width. */ html body .home-map-tools{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch} html body .home-map-tools .home-map-sp{display:none} html body .home-map-tools .home-map-btn{justify-content:center;margin:0 !important;width:100%;box-sizing:border-box} html body .home-map-tools .home-map-btn.is-cta{grid-column:1/-1} } /* Arthaland tiles: "31 STOREYS" vanished against a bright sky. */ html body .arth-card::after{background:linear-gradient(180deg,rgba(5,5,6,.72) 0%,rgba(5,5,6,.25) 30%,rgba(5,5,6,0) 50%,rgba(5,5,6,.86) 100%) !important} html body .arth-top{color:rgba(236,235,231,.85) !important;text-shadow:0 1px 8px rgba(0,0,0,.55)} /* ── 9. Calculator pages look like the homepage (Oct 2026) ─────────────── */ /* Rafael: "the boxes look plain". The 17 calculators share .calc-card, .input-group and .section-divider, so one layer here lifts them all: cards stand on an offset ink shadow like the homepage search panel, the header carries an orange rule and icon tile, fields are solid white slabs that lift when you point at them, and hints are plain readable text instead of typewriter capitals. */ html body .calc-card{border:2px solid var(--t-ink) !important;box-shadow:8px 8px 0 var(--t-ink) !important;overflow:visible !important;margin-bottom:34px !important} html body.dark-mode .calc-card{border-color:#3a3833 !important;box-shadow:8px 8px 0 rgba(223,53,0,.55) !important} html body .calc-card-header{position:relative;padding:20px 24px 18px !important;border-bottom:0 !important;background:#0a0a0a linear-gradient(135deg,#141412 0%,#0a0a0a 60%) !important} html body .calc-card-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--t-btn) 0 64px,rgba(255,61,0,.35) 64px 100%)} html body .calc-card-header h2{font-size:19px !important;gap:12px !important} html body .calc-card-header h2 i{width:34px;height:34px;display:inline-flex !important;align-items:center;justify-content:center;background:var(--t-btn);color:#fff !important;font-size:15px !important;flex-shrink:0;box-shadow:3px 3px 0 rgba(255,255,255,.18)} html body .calc-card-header p{margin-top:10px !important;margin-left:46px !important;color:rgba(241,238,233,.78) !important} html body .calc-body{padding:26px 24px 22px !important;background:var(--ab-paper) linear-gradient(180deg,rgba(10,10,10,.025),transparent 120px) !important} html body .input-group{margin-bottom:18px !important} html body .input-group label{color:var(--t-ink) !important;opacity:.82;font-size:11.5px !important} html body.dark-mode .input-group label{color:#f1eee9 !important} html body .input-group :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select){background:#fff !important;border:2px solid var(--t-ink) !important;min-height:52px;padding:13px 16px !important;font-size:16px !important;font-weight:700 !important;box-shadow:3px 3px 0 rgba(10,10,10,.14) !important;transition:transform .16s var(--t-ease),box-shadow .16s var(--t-ease),border-color .16s !important} html body.dark-mode .input-group :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select){background:#1a1917 !important;border-color:#4a4843 !important;box-shadow:3px 3px 0 rgba(0,0,0,.5) !important} @media(hover:hover){html body .input-group :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select):not(:focus):hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--t-btn) !important}} html body .input-group :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select):focus{box-shadow:5px 5px 0 var(--t-btn),0 0 0 3px rgba(255,61,0,.22) !important} html body .input-hint{font-family:'Inter',system-ui,sans-serif !important;font-size:12.5px !important;letter-spacing:0 !important;font-weight:500 !important;line-height:1.55 !important;margin-top:8px !important} html body .section-divider{display:flex !important;align-items:center;gap:10px;border-top:2px dashed var(--ab-line,#d6d1c7) !important;padding-top:22px !important;margin:28px 0 16px !important;font-weight:800 !important;font-family:'JetBrains Mono',monospace} html body .section-divider::before{content:'';width:22px;height:4px;background:var(--t-btn);flex-shrink:0} html body :is(.alarm,.result-block,.result-item,.result-mini,.vs-card,.phase){box-shadow:4px 4px 0 rgba(10,10,10,.12)} html body.dark-mode :is(.alarm,.result-block,.result-item,.result-mini,.vs-card,.phase){box-shadow:4px 4px 0 rgba(0,0,0,.5)} @media(max-width:560px){ html body .calc-card{box-shadow:5px 5px 0 var(--t-ink) !important;margin-right:5px} html body .calc-card-header{padding:18px 18px 16px !important} html body .calc-card-header p{margin-left:0 !important} html body .calc-body{padding:22px 18px 18px !important} } @media(prefers-reduced-motion:reduce){html body .input-group :is(input,select){transition:none !important}} /* ── 10. No side scrollbar on the page itself (Oct 2026) ───────────────── */ /* The orange reading-progress bar along the top already shows how far down you are, so the page's own orange scrollbar on the right was a second, competing indicator. Inner scroll boxes (tables, menus) keep theirs. */ html{scrollbar-width:none} html::-webkit-scrollbar,body::-webkit-scrollbar{width:0 !important;height:0 !important;display:none} /* ── 11. Brand icons without the 102 KB brands font (Oct 2026) ─────────── */ /* Only five brand icons are used (Facebook, Messenger, Instagram, Viber, WhatsApp). Drawing them as masks means the Font Awesome Brands webfont is never requested; colour still follows the text colour. Paths: Font Awesome Free 6.0.0, CC BY 4.0. */ html body .fab{font-family:inherit !important;font-weight:400 !important} html body .fab::before{content:"" !important;font-family:inherit !important;display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain} html body .fab.fa-facebook-f::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} html body .fab.fa-facebook-messenger::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} html body .fab.fa-instagram::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} html body .fab.fa-viber::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} html body .fab.fa-whatsapp::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} /* ── 12. Premium motion (Oct 2026) — driven by the PREMIUM MOTION block in main.js ── */ :root{--gm-ease:cubic-bezier(.16,1,.3,1)} /* Page changes: the old page lifts away, the new one settles up into place. */ @keyframes gmOut{to{opacity:0;transform:translateY(-10px)}} @keyframes gmIn{from{opacity:0;transform:translateY(14px)}} ::view-transition-old(root){animation:gmOut .22s cubic-bezier(.4,0,1,1) both !important} ::view-transition-new(root){animation:gmIn .42s var(--gm-ease) both !important} /* Headings rise word by word from behind a clip line. */ html.gm .gm-head .gm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em} html.gm .gm-head .gm-wi{display:inline-block;transform:translateY(105%);transition:transform .9s var(--gm-ease);transition-delay:calc(var(--i,0) * 55ms)} html.gm .gm-head.gm-in .gm-wi{transform:none} /* Photos unveil upward with a slow settle. */ html.gm img.gm-img{clip-path:inset(100% 0 0 0);scale:1.08;transition:clip-path 1.1s var(--gm-ease),scale 1.6s var(--gm-ease)} html.gm img.gm-img.gm-in{clip-path:inset(0 0 0 0);scale:1} /* Pointer glow on cards. */ .gm-glow{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s ease; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,61,0,.13),transparent 62%)} :hover > .gm-glow{opacity:1} html body.dark-mode .gm-glow{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,61,0,.18),transparent 62%)} /* Magnetic buttons ease back when the pointer leaves. */ :is(.cta-btn,.submit-btn,.contact-btn-nav,.glra-btn,.calculate-btn,.print-btn,.view-all-btn,.cta-primary,.ss-cta,.reset-filters-btn){transition-property:translate,transform,box-shadow,background-color,color,border-color !important;transition-duration:.25s !important} /* Navbar gains depth once the page scrolls. */ .navbar,.ab-nav{transition:box-shadow .3s ease,background-color .3s ease} .navbar.gm-scrolled,.ab-nav.gm-scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.35)} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} ::view-transition-old(root),::view-transition-new(root){animation:none !important} html.gm .gm-head .gm-wi,html.gm img.gm-img{transform:none !important;clip-path:none !important;scale:1 !important;transition:none !important} } /* ── 13. Calculator columns never outgrow a phone (Oct 2026) ───────────── A grid column grows to fit its widest unbreakable content, and a