/* ===================================================================== GharMilap — premium layer --------------------------------------------------------------------- Loaded LAST, after the template's own stylesheets. Everything here is either a token override (so the whole template re-themes at once) or a .gm-* component that the template has never heard of. Palette deep forest ink + brass, on warm ivory paper. Display Bricolage Grotesque (already fetched for the lead form) Body DM Sans Data/labels JetBrains Mono The signature element is the compare slate: a docked strip that grows into a side-by-side sheet and marks the best figure in every row. ===================================================================== */ /* ------------------------------------------------------------------ 1. Tokens — retheming the template through its own variables ------------------------------------------------------------------ */ :root { --gm-ink: #0E2A1D; --gm-forest: #123626; --gm-forest-2: #1B4633; --gm-forest-deep:#08190F; --gm-brass: #C0872E; --gm-brass-lit: #E3A33D; --gm-brass-soft: #F6EBD6; --gm-paper: #F7F5F0; --gm-paper-2: #EFEDE5; --gm-sand: #E4DFD2; --gm-mute: #5D6B63; --gm-white: #FFFFFF; --gm-display: "Bricolage Grotesque", "DM Sans", Georgia, serif; --gm-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --gm-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --gm-r-sm: 10px; --gm-r-md: 16px; --gm-r-lg: 22px; --gm-lift: 0 1px 2px rgba(14,42,29,.05), 0 18px 44px -26px rgba(14,42,29,.34); --gm-lift-2: 0 2px 4px rgba(14,42,29,.06), 0 34px 70px -30px rgba(14,42,29,.42); /* --- template variables, re-pointed --- */ --Primary: #C0872E; --Sub-primary-1: #FAF4E7; --Sub-primary-2: rgba(192,135,46,.16); --Sub-primary-3: rgba(192,135,46,.10); --shadown: rgba(14,42,29,.12); --Heading: #0E2A1D; --Secondary: #0E2A1D; --Text: #5D6B63; --Text-2: #0E2A1D; --Text-3: rgba(14,42,29,.62); --Text-4: rgba(14,42,29,.52); --Text-5: rgba(14,42,29,.52); --Line: #E4DFD2; --Color-3: #C0872E; --Color-6: #F6EBD6; --bg-body-color: #0A1F16; } /* the template hard-codes the old orange into inline SVG strokes; this catches the ones that sit on a light surface */ svg [stroke="#F1913D"], svg [fill="#F1913D"], svg [stroke="#f1913d"], svg [fill="#f1913d"] { stroke: currentColor; } .icons svg [stroke="#F1913D"] { stroke: var(--gm-brass); } /* ------------------------------------------------------------------ 2. Page surface and typography ------------------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; background: #F7F5F0; /* so the tint at z-index -1 has a floor */ } body { background: var(--gm-paper); font-family: var(--gm-body); } /* a page-wide paper grain, quiet enough to read as texture not pattern */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .5; background-image: radial-gradient(circle at 18% 12%, rgba(192,135,46,.07), transparent 42%), radial-gradient(circle at 84% 68%, rgba(18,54,38,.06), transparent 46%); } /* #wrapper used to carry z-index:1 so it sat above the tint above. That made it a stacking context that outranked anything a third-party script appends to without a z-index of its own — the Agentforce chat among them. The tint is pushed behind everything instead, and #wrapper goes back to competing on equal terms. */ #wrapper { position: relative; } h1, h2, h3, h4, h5, h6, .title, .heading-section .title { font-family: var(--gm-display); letter-spacing: -.028em; color: var(--gm-ink); } h1, .page-title .title { font-weight: 700; line-height: 1.06; } .heading-section .title { font-weight: 700; } /* every section heading gets a mono eyebrow rule above it */ .heading-section > .title::before { content: ""; display: block; width: 46px; height: 2px; margin: 0 0 18px; background: linear-gradient(90deg, var(--gm-brass), rgba(192,135,46,0)); } .heading-section.text-center > .title::before { margin-left: auto; margin-right: auto; } .text-1, p { font-family: var(--gm-body); } /* mono for the small data labels the template sets in caps */ .flat-tag, .gm-price__unit, .categories-item .content .text-1, .gm-rail__count, .gm-rail__pct { font-family: var(--gm-mono); } /* ------------------------------------------------------------------ 3. Buttons — flatter, tighter, brass ------------------------------------------------------------------ */ .tf-btn { font-family: var(--gm-body); font-weight: 600; letter-spacing: -.005em; border-radius: var(--gm-r-sm); transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, color .18s, border-color .18s; } .tf-btn.bg-color-primary { background: var(--gm-forest); border-color: var(--gm-forest); color: var(--gm-white); box-shadow: 0 10px 24px -16px rgba(14,42,29,.7); } .tf-btn.bg-color-primary:hover { background: var(--gm-forest-deep); border-color: var(--gm-forest-deep); color: var(--gm-white); transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(14,42,29,.75); } .tf-btn.style-border { border: 1px solid var(--gm-sand); background: var(--gm-white); color: var(--gm-ink); } .tf-btn.style-border:hover { border-color: var(--gm-forest); background: var(--gm-forest); color: var(--gm-white); transform: translateY(-2px); } /* Some of these buttons sit on top of a photograph and carry .text_white. The light-surface treatment above would paint white text on a white pill, so anything marked .text_white keeps the ghost look instead. */ .tf-btn.style-border.text_white { background: rgba(8,25,15,.34); border-color: rgba(255,255,255,.62); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .tf-btn.style-border.text_white:hover { background: #fff; border-color: #fff; color: var(--gm-forest-deep); } .tf-btn.style-border.text_white:hover i { color: var(--gm-forest-deep); } /* ------------------------------------------------------------------ 4. Header ------------------------------------------------------------------ */ .header { background: rgba(247,245,240,.82); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid rgba(228,223,210,.9); } .header.header-sticky, .header.gm-shrunk { background: rgba(247,245,240,.95); box-shadow: 0 1px 0 rgba(228,223,210,1), 0 14px 34px -28px rgba(14,42,29,.5); } .main-menu .navigation > li > a { font-family: var(--gm-body); font-weight: 500; color: var(--gm-ink); } .main-menu .navigation > li.current-menu > a { color: var(--gm-brass); } .header .btn-add .tf-btn { background: var(--gm-forest); border-color: var(--gm-forest); color: var(--gm-white); } .header .btn-add .tf-btn:hover { background: var(--gm-brass); border-color: var(--gm-brass); color: var(--gm-forest-deep); } /* ------------------------------------------------------------------ 5. Hero ------------------------------------------------------------------ */ .page-title.home01 { position: relative; } .page-title.home01::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(180deg, rgba(247,245,240,0), var(--gm-paper)); pointer-events: none; } .page-title .content-inner { position: relative; z-index: 2; } .gm-hero-title { font-size: clamp(34px, 6.2vw, 68px); } .gm-rotator { color: var(--gm-brass-lit); } .gm-hero-chips { gap: 8px; } .gm-hero-chips .gm-chip { font-family: var(--gm-mono); font-size: 12px; letter-spacing: .02em; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 13px; } /* the filter widget reads as a single instrument panel */ .wg-filter { border-radius: var(--gm-r-lg); box-shadow: var(--gm-lift-2); border: 1px solid rgba(255,255,255,.6); overflow: hidden; } /* ------------------------------------------------------------------ 6. Property cards ------------------------------------------------------------------ */ .box-house { background: var(--gm-white); border: 1px solid var(--gm-sand); border-radius: var(--gm-r-md); overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s; } .box-house:hover { transform: translateY(-4px); border-color: rgba(192,135,46,.5); box-shadow: var(--gm-lift); } .box-house .image-wrap { border-radius: 0; } .box-house .content { padding: 20px; } .box-house h5.title a { font-family: var(--gm-display); letter-spacing: -.02em; } .box-house .price { font-family: var(--gm-display); color: var(--gm-ink); } .gm-price__unit { font-family: var(--gm-mono); font-size: 11.5px; font-weight: 400; color: var(--gm-mute); letter-spacing: .01em; } .box-house .flat-tag.bg-main { background: var(--gm-forest); } .box-house .flat-tag.bg-3 { background: var(--gm-brass); color: var(--gm-forest-deep) !important; } /* the two round icon buttons on the photo — bigger touch target, real states */ .box-house .list-btn .btn-icon { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.94); border-radius: 50%; color: var(--gm-forest); transition: background .18s, color .18s, transform .18s; } .box-house .list-btn .btn-icon:hover { background: var(--gm-forest); color: var(--gm-white); transform: scale(1.06); } .box-house .list-btn .btn-icon.is-saved { background: var(--gm-brass); color: var(--gm-forest-deep); } /* compare link becomes a real, stateful control */ .box-house .wrap-btn .compare { font-family: var(--gm-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--gm-mute); border: 1px solid var(--gm-sand); border-radius: 999px; padding: 7px 13px; min-height: 36px; cursor: pointer; transition: .18s ease; } .box-house .wrap-btn .compare:hover { color: var(--gm-forest); border-color: var(--gm-forest); } .box-house .wrap-btn .compare.is-on { background: var(--gm-forest); border-color: var(--gm-forest); color: var(--gm-white); } .box-house .wrap-btn .compare.is-on i::before { content: "\2713"; } /* ------------------------------------------------------------------ 7. "List your property" band — replaces the old in-page form ------------------------------------------------------------------ */ .gm-cta-band { position: relative; margin: 0; padding: clamp(48px, 7vw, 92px) 0; background: radial-gradient(120% 140% at 12% 0%, #1B4633 0%, #123626 46%, #08190F 100%); color: #E9EFEA; overflow: hidden; } .gm-cta-band::after { content: ""; position: absolute; right: -12%; top: -30%; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(227,163,61,.16), transparent 62%); pointer-events: none; } .gm-cta-band__inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .gm-cta-band__eyebrow { font-family: var(--gm-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gm-brass-lit); margin: 0 0 14px; } .gm-cta-band__title { font-family: var(--gm-display); font-weight: 700; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.03em; color: #FFFFFF; margin: 0 0 16px; } .gm-cta-band__title em { font-style: normal; color: var(--gm-brass-lit); } .gm-cta-band__copy { font-size: 16px; line-height: 1.62; color: rgba(233,239,234,.82); max-width: 52ch; margin: 0 0 28px; } .gm-cta-band__acts { display: flex; flex-wrap: wrap; gap: 12px; } .gm-cta-band .gm-cta-primary, .gm-cta-band .gm-cta-ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 10px; font-family: var(--gm-body); font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .18s cubic-bezier(.2,.7,.3,1), background .18s, color .18s, border-color .18s; } .gm-cta-band .gm-cta-primary { background: var(--gm-brass-lit); color: var(--gm-forest-deep); box-shadow: 0 14px 30px -18px rgba(227,163,61,.9); } .gm-cta-band .gm-cta-primary:hover { background: #F0B455; transform: translateY(-2px); color: var(--gm-forest-deep); } .gm-cta-band .gm-cta-ghost { border: 1px solid rgba(233,239,234,.34); color: #E9EFEA; } .gm-cta-band .gm-cta-ghost:hover { border-color: #E9EFEA; background: rgba(233,239,234,.08); color: #fff; transform: translateY(-2px); } /* the receipt-style panel: what actually happens after you send it */ .gm-cta-steps { background: rgba(255,255,255,.05); border: 1px solid rgba(233,239,234,.16); border-radius: var(--gm-r-md); padding: 26px 26px 20px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .gm-cta-steps__h { font-family: var(--gm-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(233,239,234,.6); margin: 0 0 18px; } .gm-cta-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: gmstep; } /* The number sits in its own column and spans both rows, so the label and the sentence stack under each other instead of the sentence falling into the 30px number column one word at a time. */ .gm-cta-steps li { counter-increment: gmstep; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 0 0 18px; position: relative; } .gm-cta-steps li:last-child { padding-bottom: 0; } .gm-cta-steps li::before { content: counter(gmstep, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; font-family: var(--gm-mono); font-size: 11px; color: var(--gm-brass-lit); line-height: 22px; } /* the rule that ties the steps together is the sequence, so it is drawn */ .gm-cta-steps li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 26px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(227,163,61,.5), rgba(227,163,61,.05)); } .gm-cta-steps li strong { grid-column: 2; grid-row: 1; font-size: 14.5px; color: #fff; font-weight: 600; } .gm-cta-steps li span { grid-column: 2; grid-row: 2; font-size: 13.5px; color: rgba(233,239,234,.72); line-height: 1.5; } /* ------------------------------------------------------------------ 8. SIGNATURE — the compare slate ------------------------------------------------------------------ */ .gm-slate { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; transform: translateY(115%); transition: transform .38s cubic-bezier(.2,.8,.25,1); padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none; } .gm-slate.is-up { transform: translateY(0); pointer-events: auto; } .gm-slate__bar { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 14px; background: var(--gm-forest-deep); color: #E9EFEA; border: 1px solid rgba(233,239,234,.14); border-radius: 16px; padding: 12px 14px; box-shadow: 0 -6px 50px -18px rgba(8,25,15,.85); } .gm-slate__label { font-family: var(--gm-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(233,239,234,.55); flex: none; padding-left: 4px; } .gm-slate__list { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; } .gm-slate__list::-webkit-scrollbar { display: none; } .gm-slot { position: relative; flex: none; display: flex; align-items: center; gap: 9px; background: rgba(233,239,234,.07); border: 1px solid rgba(233,239,234,.16); border-radius: 11px; padding: 6px 30px 6px 6px; max-width: 250px; animation: gmSlotIn .3s cubic-bezier(.2,.8,.25,1) both; } @keyframes gmSlotIn { from { opacity: 0; transform: translateY(8px) scale(.96); } } .gm-slot img { width: 40px; height: 40px; flex: none; border-radius: 7px; object-fit: cover; background: rgba(255,255,255,.08); } .gm-slot__txt { min-width: 0; } .gm-slot__t { display: block; font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gm-slot__p { display: block; font-family: var(--gm-mono); font-size: 11px; color: var(--gm-brass-lit); } .gm-slot__x { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: rgba(233,239,234,.55); font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; } .gm-slot__x:hover { background: rgba(233,239,234,.14); color: #fff; } .gm-slot--empty { border-style: dashed; border-color: rgba(233,239,234,.2); background: transparent; padding: 6px 14px; min-height: 52px; align-items: center; } .gm-slot--empty span { font-family: var(--gm-mono); font-size: 11px; color: rgba(233,239,234,.4); } .gm-slate__acts { display: flex; align-items: center; gap: 8px; flex: none; } .gm-slate__go { min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--gm-brass-lit); color: var(--gm-forest-deep); font-family: var(--gm-body); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .18s, transform .18s; white-space: nowrap; } .gm-slate__go:hover:not(:disabled) { background: #F0B455; transform: translateY(-1px); } .gm-slate__go:disabled { opacity: .4; cursor: not-allowed; } .gm-slate__clear { min-height: 44px; padding: 0 12px; background: transparent; border: 0; color: rgba(233,239,234,.6); font-family: var(--gm-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .gm-slate__clear:hover { color: #fff; } /* --- the sheet --- */ .gm-sheet { position: fixed; inset: 0; z-index: 1200; display: none; background: rgba(8,25,15,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 3vh 14px; overscroll-behavior: contain; } .gm-sheet.is-open { display: grid; place-items: start center; } .gm-sheet__panel { width: 100%; max-width: 1080px; max-height: 94vh; display: flex; flex-direction: column; background: var(--gm-paper); border-radius: var(--gm-r-lg); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(8,25,15,.7); animation: gmSheetIn .34s cubic-bezier(.2,.8,.25,1) both; } @keyframes gmSheetIn { from { opacity: 0; transform: translateY(22px) scale(.985); } } .gm-sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: var(--gm-forest); color: #fff; flex: none; } .gm-sheet__top h2 { font-family: var(--gm-display); font-size: 20px; margin: 0; color: #fff; letter-spacing: -.02em; } .gm-sheet__top p { font-family: var(--gm-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 3px 0 0; } .gm-sheet__x { width: 40px; height: 40px; flex: none; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s; } .gm-sheet__x:hover { background: rgba(255,255,255,.14); } .gm-sheet__scroll { overflow: auto; -webkit-overflow-scrolling: touch; } .gm-tbl { width: 100%; border-collapse: collapse; min-width: 560px; } .gm-tbl th, .gm-tbl td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--gm-sand); vertical-align: middle; } .gm-tbl thead th { position: sticky; top: 0; z-index: 3; background: var(--gm-paper-2); border-bottom: 1px solid var(--gm-sand); } .gm-tbl tbody th { position: sticky; left: 0; z-index: 2; background: var(--gm-paper); font-family: var(--gm-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gm-mute); font-weight: 400; width: 150px; min-width: 130px; } .gm-tbl tbody tr:nth-child(even) th, .gm-tbl tbody tr:nth-child(even) td { background: #FCFBF8; } .gm-tbl tbody tr:last-child th, .gm-tbl tbody tr:last-child td { border-bottom: 0; } .gm-tbl__head { display: grid; gap: 8px; min-width: 150px; } .gm-tbl__head img { width: 100%; height: 92px; border-radius: 10px; object-fit: cover; background: var(--gm-sand); } .gm-tbl__head strong { font-family: var(--gm-display); font-size: 14.5px; line-height: 1.25; color: var(--gm-ink); letter-spacing: -.015em; } .gm-tbl__head small { font-size: 11.5px; color: var(--gm-mute); line-height: 1.35; } .gm-tbl__drop { justify-self: start; background: transparent; border: 0; padding: 0; font-family: var(--gm-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-mute); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .gm-tbl__drop:hover { color: #9E2B25; } .gm-tbl td { font-size: 14.5px; color: var(--gm-ink); } .gm-tbl td.gm-num { font-family: var(--gm-mono); font-size: 14px; } .gm-tbl td.gm-none { color: #A6B0A9; } /* the one thing the sheet is FOR: which cell wins the row */ .gm-tbl td.gm-best { position: relative; font-weight: 700; } .gm-tbl td.gm-best::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--gm-brass); } .gm-tbl td.gm-best::after { content: "best"; font-family: var(--gm-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-brass); margin-left: 8px; vertical-align: 1px; } .gm-sheet__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--gm-sand); background: var(--gm-white); } .gm-sheet__foot p { font-size: 13px; color: var(--gm-mute); margin: 0; flex: 1 1 220px; } .gm-sheet__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; background: var(--gm-forest); color: #fff; border: 0; border-radius: 10px; font-family: var(--gm-body); font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer; transition: background .18s, transform .18s; } .gm-sheet__cta:hover { background: var(--gm-forest-deep); color: #fff; transform: translateY(-2px); } /* ------------------------------------------------------------------ 9. Quick view — lightbox with real zoom ------------------------------------------------------------------ */ .gm-zoom { position: fixed; inset: 0; z-index: 1300; display: none; background: rgba(8,25,15,.94); touch-action: none; overscroll-behavior: contain; } .gm-zoom.is-open { display: block; } .gm-zoom__stage { position: absolute; inset: 0; overflow: hidden; cursor: zoom-in; display: grid; place-items: center; } .gm-zoom__stage.is-zoomed { cursor: grab; } .gm-zoom__stage.is-dragging { cursor: grabbing; } .gm-zoom__img { max-width: 92vw; max-height: 82vh; border-radius: 8px; transform-origin: center center; transition: transform .28s cubic-bezier(.2,.8,.25,1); will-change: transform; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); } .gm-zoom__stage.is-dragging .gm-zoom__img { transition: none; } .gm-zoom__top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px calc(18px + env(safe-area-inset-top, 0px)); background: linear-gradient(180deg, rgba(8,25,15,.85), transparent); color: #fff; pointer-events: none; } .gm-zoom__top > * { pointer-events: auto; } .gm-zoom__meta { min-width: 0; } .gm-zoom__meta h3 { font-family: var(--gm-display); font-size: clamp(16px, 2.4vw, 21px); margin: 0; color: #fff; letter-spacing: -.02em; } .gm-zoom__meta p { font-family: var(--gm-mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.62); margin: 4px 0 0; } .gm-zoom__x { width: 44px; height: 44px; flex: none; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; background: rgba(0,0,0,.2); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s; } .gm-zoom__x:hover { background: rgba(255,255,255,.18); } .gm-zoom__bar { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; background: rgba(8,25,15,.82); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 6px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .gm-zoom__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s, opacity .15s; } .gm-zoom__btn:hover:not(:disabled) { background: rgba(255,255,255,.14); } .gm-zoom__btn:disabled { opacity: .34; cursor: not-allowed; } .gm-zoom__level { min-width: 62px; text-align: center; font-family: var(--gm-mono); font-size: 12px; color: rgba(255,255,255,.8); -webkit-user-select: none; user-select: none; } .gm-zoom__hint { position: absolute; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); font-family: var(--gm-mono); font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.44); white-space: nowrap; transition: opacity .3s; } .gm-zoom__hint.is-gone { opacity: 0; } /* ------------------------------------------------------------------ 10. Toast — used by nav.js and the premium layer ------------------------------------------------------------------ */ .gm-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 26px); z-index: 1400; display: flex; align-items: flex-start; gap: 11px; max-width: min(92vw, 470px); padding: 14px 18px; background: var(--gm-forest-deep); color: #E9EFEA; border: 1px solid rgba(233,239,234,.14); border-radius: 12px; font-size: 14px; line-height: 1.45; box-shadow: 0 24px 50px -24px rgba(8,25,15,.9); opacity: 0; pointer-events: none; transition: opacity .26s, transform .26s cubic-bezier(.2,.8,.25,1); } .gm-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .gm-toast__ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gm-brass-lit); color: var(--gm-forest-deep); font-family: var(--gm-mono); font-size: 12px; font-weight: 700; } /* the slate lives at the bottom too — lift the toast clear of it */ body.gm-slate-up .gm-toast { bottom: 108px; } /* ------------------------------------------------------------------ 11. Floating call button ------------------------------------------------------------------ */ .gm-float-call { z-index: 930; /* below the slate, sheet and lightbox */ background: var(--gm-forest); color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -20px rgba(8,25,15,.9); } .gm-float-call:hover { background: var(--gm-brass); color: var(--gm-forest-deep); } body.gm-slate-up .gm-float-call { transform: translateY(-84px); } /* ------------------------------------------------------------------ 12. Footer ------------------------------------------------------------------ */ .footer { background: var(--gm-forest-deep); } .footer .footer-heading, .footer h6, .footer .title { color: #fff; font-family: var(--gm-display); } /* ------------------------------------------------------------------ 13. Focus, motion, dark theme ------------------------------------------------------------------ */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--gm-brass-lit); outline-offset: 2px; border-radius: 5px; } @media (prefers-reduced-motion: reduce) { .gm-slate, .gm-sheet__panel, .gm-zoom__img, .gm-toast, .box-house, .tf-btn { transition-duration: .001ms !important; animation-duration: .001ms !important; } } body.dark-theme { --gm-paper: #0C1F16; --gm-paper-2: #122A1E; --gm-sand: #233B2E; --gm-ink: #E8EFE9; --gm-mute: #9CB0A4; --gm-white: #102518; --Heading: #E8EFE9; --Text: #9CB0A4; --Line: #233B2E; } body.dark-theme .gm-sheet__panel { background: #0C1F16; } body.dark-theme .gm-sheet__foot { background: #102518; } body.dark-theme .gm-tbl tbody th { background: #0C1F16; } body.dark-theme .gm-tbl tbody tr:nth-child(even) th, body.dark-theme .gm-tbl tbody tr:nth-child(even) td { background: #0F2519; } body.dark-theme .gm-tbl__head strong { color: #E8EFE9; } body.dark-theme .header { background: rgba(12,31,22,.86); border-bottom-color: #233B2E; } /* ===================================================================== 14. MOBILE The template ships a desktop-first grid. Everything below re-fits it for a phone: one column, real touch targets, nothing off the edge. ===================================================================== */ /* nothing may push the page sideways */ img, svg, video, iframe, table { max-width: 100%; } iframe { border: 0; } @media (max-width: 1199.98px) { .gm-cta-band__inner { grid-template-columns: 1fr; } .gm-cta-steps { order: 2; } } @media (max-width: 991.98px) { .header .btn-add { display: none; } /* the mobile menu carries it */ .gm-hero-title { font-size: clamp(30px, 8vw, 46px); } .page-title.home01 { padding-top: 108px; } } @media (max-width: 767.98px) { /* ---- rhythm ---- */ .tf-container { padding-left: 18px; padding-right: 18px; } .tf-spacing-1 { padding-top: 52px; padding-bottom: 52px; } .heading-section { margin-bottom: 26px !important; } .heading-section .title { font-size: clamp(24px, 6.6vw, 32px); line-height: 1.14; } .heading-section .text-1 { font-size: 15px; } /* ---- hero ---- */ .gm-hero-title { font-size: clamp(28px, 8.6vw, 40px); } .gm-hero-chips { flex-wrap: wrap; row-gap: 8px; } .gm-hero-chips .gm-chip { font-size: 11px; padding: 5px 11px; } /* the search panel becomes a stack, not a squeezed row */ .wg-filter { border-radius: 16px; } .wg-filter .form-title { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; } .wg-filter .form-title .tf-dropdown-sort { width: 100%; } .wg-filter .form-title form { width: 100%; } .wg-filter .form-title form fieldset { width: 100%; } .wg-filter .form-title input { width: 100%; min-height: 48px; font-size: 16px; } .wg-filter .box-item.wrap-btn { display: flex; gap: 10px; width: 100%; } .wg-filter .box-item.wrap-btn .tf-btn { flex: 1; justify-content: center; min-height: 48px; } .wg-filter .btn-filter { flex: none; width: 48px; min-height: 48px; display: grid; place-items: center; } .wd-search-form .group-price, .wd-search-form .group-select { flex-direction: column; gap: 16px; } .wd-search-form .box-select, .wd-search-form .widget-price { width: 100%; } /* ---- cards ---- */ .box-house .content { padding: 16px; } .box-house h5.title a { font-size: 17px; } .box-house .meta-list { flex-wrap: wrap; row-gap: 6px; } .box-house .bot { flex-direction: column; align-items: stretch !important; gap: 12px; } .box-house .bot .wrap-btn { display: flex; gap: 8px; width: 100%; } .box-house .bot .wrap-btn .compare { flex: 1 1 auto; justify-content: center; min-height: 44px; } .box-house .bot .wrap-btn .tf-btn { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; } .box-house .list-btn .btn-icon { width: 42px; height: 42px; } /* tooltips are a mouse idea; on a phone they only cover the photo */ .box-house .hover-tooltip .tooltip { display: none !important; } /* ---- CTA band ---- */ .gm-cta-band { padding: 44px 0; } .gm-cta-band__inner { padding: 0 18px; } .gm-cta-band__acts { flex-direction: column; align-items: stretch; } .gm-cta-band .gm-cta-primary, .gm-cta-band .gm-cta-ghost { justify-content: center; width: 100%; } .gm-cta-steps { padding: 20px 18px 16px; } /* ---- compare slate ---- */ .gm-slate { padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); } .gm-slate__bar { flex-wrap: wrap; gap: 10px; padding: 10px; border-radius: 14px; } .gm-slate__label { display: none; } .gm-slate__list { order: 1; width: 100%; } .gm-slate__acts { order: 2; width: 100%; } .gm-slate__go { flex: 1; } .gm-slot { max-width: 190px; padding-right: 28px; } .gm-slot img { width: 34px; height: 34px; } .gm-slot__t { font-size: 12px; } .gm-slot--empty { display: none; } /* ---- compare sheet: a full-height card, table scrolls sideways ---- */ .gm-sheet { padding: 0; } .gm-sheet.is-open { place-items: stretch; } .gm-sheet__panel { max-width: none; max-height: 100%; height: 100%; border-radius: 0; } .gm-sheet__top { padding: 16px 18px calc(16px + env(safe-area-inset-top, 0px)); } .gm-sheet__top h2 { font-size: 17px; } .gm-tbl { min-width: 0; } .gm-tbl th, .gm-tbl td { padding: 11px 12px; } .gm-tbl tbody th { width: 100px; min-width: 100px; font-size: 9.5px; letter-spacing: .08em; } /* A long address stretches its column until only one property fits on screen. Capping the width lets two sit side by side, which is the entire point of the sheet. */ .gm-tbl thead th:not(:first-child), .gm-tbl tbody td { width: 136px; min-width: 136px; max-width: 136px; white-space: normal; overflow-wrap: anywhere; } .gm-tbl__head { min-width: 0; } .gm-tbl__head img { height: 74px; } .gm-tbl__head strong { font-size: 13px; } .gm-tbl td { font-size: 13.5px; } .gm-tbl td.gm-best::after { display: block; margin: 2px 0 0; } .gm-sheet__foot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); } .gm-sheet__foot .gm-sheet__cta { width: 100%; } /* ---- lightbox ---- */ .gm-zoom__img { max-width: 96vw; max-height: 74vh; } .gm-zoom__meta h3 { font-size: 15px; } .gm-zoom__meta p { font-size: 10.5px; } .gm-zoom__hint { display: none; } /* ---- toast ---- */ .gm-toast { left: 12px; right: 12px; bottom: 16px; max-width: none; transform: translateY(24px); } .gm-toast.is-on { transform: translateY(0); } body.gm-slate-up .gm-toast { bottom: 92px; } /* ---- floating call: icon only, out of the thumb zone of the slate ---- */ .gm-float-call span { display: none; } .gm-float-call { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; padding: 0; } body.gm-slate-up .gm-float-call { transform: translateY(-76px); } /* ---- footer ---- */ .footer .footer-cl-1, .footer .footer-cl-2, .footer .footer-cl-3, .footer .footer-cl-4 { width: 100%; margin-bottom: 26px; } .footer .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } /* ---- form controls never below 16px, or iOS zooms the page ---- */ input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], select, textarea { font-size: 16px; } } @media (max-width: 479.98px) { .gm-cta-band__title { font-size: clamp(24px, 8vw, 32px); } .gm-slot { max-width: 152px; } .gm-tbl tbody th { width: 88px; min-width: 88px; } .gm-tbl__head { min-width: 118px; } .gm-zoom__bar { gap: 2px; padding: 5px; } .gm-zoom__btn { width: 40px; height: 40px; } .gm-zoom__level { min-width: 52px; font-size: 11px; } } /* Touch devices have no hover, so the save and quick-view buttons would never appear at all. The template hides them on .btn-icon itself, which is what has to be undone. */ @media (hover: none) { .box-house .list-btn .btn-icon { opacity: 1 !important; visibility: visible !important; transform: none !important; transition-delay: 0s !important; } .box-house .list-btn { opacity: 1 !important; visibility: visible !important; } .box-house .image-wrap img { transform: none !important; } } /* ------------------------------------------------------------------ 15. Corrections to the animation layer The scroll bar was drawn in the old orange and sat at z-index 9999, which put it on top of the lightbox. Both are settled here rather than by editing gharmilap-animations.css, which stays untouched. ------------------------------------------------------------------ */ .gm-progress-bar { height: 2px; z-index: 900; /* under the slate, sheet and lightbox */ background: linear-gradient(90deg, var(--gm-forest), var(--gm-brass-lit)); box-shadow: 0 0 10px rgba(192,135,46,.45); } /* the settings and back-to-top widgets belong under the modals too */ .popup-setting { z-index: 930; } .progress-wrap { z-index: 930; } .progress-wrap svg.progress-circle path { stroke: var(--gm-brass); } /* ------------------------------------------------------------------ 16. Header crowding Between roughly 1200px and 1500px the menu, the phone number and the button all want the same strip, and the number wraps onto the "Contact" link. Nothing is dropped — the pieces are just given room. ------------------------------------------------------------------ */ .header .header-right { gap: 16px; margin-left: 22px; } .header .phone-number { flex: none; } .header .phone-number p { white-space: nowrap; font-family: var(--gm-mono); font-size: 13px; letter-spacing: -.01em; margin: 0; } .header .phone-number .icons svg [stroke="black"] { stroke: var(--gm-brass); } @media (min-width: 992px) and (max-width: 1399.98px) { .header .main-menu .navigation > li { margin-right: 18px; } .header .main-menu .navigation > li > a { font-size: 14.5px; } .header .phone-number p { font-size: 12.5px; } .header .btn-add .tf-btn { padding-left: 16px; padding-right: 16px; font-size: 13.5px; } } /* ------------------------------------------------------------------ 17. The two older GharMilap layers still carry the old orange gharmilap-animations.css keeps its palette in variables, so it is re-pointed. gharmilap-library.css hard-codes it in four places, so those rules are restated here instead of editing that file. ------------------------------------------------------------------ */ :root { --gm-primary: #C0872E; --gm-primary-soft: rgba(192,135,46,.14); --gm-primary-line: rgba(192,135,46,.35); } /* rent / buy switch */ .gm-mode__switch { background: var(--gm-paper-2); border-color: var(--gm-sand); } .gm-mode__btn { color: var(--gm-mute); } .gm-mode__btn:hover { color: var(--gm-ink); } .gm-mode__btn.is-on { background: var(--gm-forest); color: #fff; box-shadow: 0 6px 16px -8px rgba(14,42,29,.8); } .gm-mode__btn:focus-visible { outline-color: var(--gm-brass-lit); } .gm-mode__hint { color: var(--gm-mute); } .gm-price__unit { color: var(--gm-mute); } /* the Drive library layer keeps its palette in variables too */ :root { --gml-primary: #C0872E; --gml-primary-soft: rgba(192,135,46,.12); } /* ------------------------------------------------------------------ 18. Locality cards The label and the count sit on a photograph. If the photograph is missing — images/section/location-10.jpg is not in the folder — white text lands on the pale page and disappears. A dark tile behind every photo makes the card readable whether or not the image arrives. ------------------------------------------------------------------ */ .box-location .image-wrap { background: linear-gradient(155deg, #1B4633 0%, #123626 52%, #08190F 100%); } .box-location .content h6, .box-location .content .text_white { color: #fff; text-shadow: 0 1px 14px rgba(8,25,15,.55); } /* a scrim under the label, so text stays legible over a bright photo */ .box-location .image-wrap::after { content: ""; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(180deg, rgba(8,25,15,0), rgba(8,25,15,.72)); pointer-events: none; } /* The template already positions .content absolutely over the photo, so only the stacking order is needed here — never the position. It also lays the label and the count out with space-between and wrapping, which puts them side by side on a wide card and stacked on a narrow one. Stacking always is the consistent read. */ .box-location .content { z-index: 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; } /* ------------------------------------------------------------------ 19. Drive library cards gharmilap-library.js builds the card as a