/** * Gurgaon.xdates.in - 2026 redesign layer * * Presentation only. Every selector below restyles markup that already exists; * no link, form, shortcode or script behaviour is changed by this file. * * Loaded after bloghash-child/style.css and after the ghs-* mu-plugin inline * styles (priority 999), so equal-specificity rules win on source order. */ /* --------------------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------------------ */ :root { --ghs-wine: #a31545; --ghs-wine-deep: #7a0e33; --ghs-plum: #241c2b; --ghs-rose: #f2c8d5; --ghs-champagne: #d8b47a; --ghs-ink: #1d1722; --ghs-ink-muted: #6b6474; --ghs-line: rgba(36, 28, 43, .10); --ghs-surface: #ffffff; --ghs-surface-alt: #faf6f7; --ghs-radius-sm: 10px; --ghs-radius: 18px; --ghs-radius-lg: 26px; --ghs-shadow-sm: 0 2px 8px rgba(36, 28, 43, .06); --ghs-shadow: 0 12px 34px -14px rgba(36, 28, 43, .28); --ghs-shadow-lg: 0 28px 60px -26px rgba(122, 14, 51, .42); --ghs-gradient: linear-gradient(135deg, var(--ghs-wine) 0%, var(--ghs-wine-deep) 100%); --ghs-gradient-soft: linear-gradient(135deg, #fdf3f6 0%, #f7eef2 100%); --ghs-section-gap: 6.4rem; --ghs-shell: 118rem; /* tighter reading measure for hero / ticker */ --ghs-shell-wide: 148rem; /* matches the theme container, used by the header */ } /* Dark mode. The theme toggle sets data-darkmode="dark" on . */ [data-darkmode="dark"] { --ghs-ink: #f3eef5; --ghs-ink-muted: #b3a9bd; --ghs-line: rgba(255, 255, 255, .12); --ghs-surface: #2b2233; --ghs-surface-alt: #241c2b; --ghs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .4); --ghs-shadow: 0 12px 34px -14px rgba(0, 0, 0, .6); --ghs-shadow-lg: 0 28px 60px -26px rgba(0, 0, 0, .7); --ghs-gradient-soft: linear-gradient(135deg, #2e2437 0%, #241c2b 100%); } /* --------------------------------------------------------------------------- 2. Header - utility top bar ------------------------------------------------------------------------ */ .ghs-topbar { background: var(--ghs-plum); color: rgba(255, 255, 255, .84); font-size: 1.3rem; line-height: 1.4; position: relative; z-index: 100; } .ghs-topbar::after { content: ""; display: block; height: 2px; background: linear-gradient(90deg, var(--ghs-wine), var(--ghs-champagne), var(--ghs-wine)); } .ghs-topbar__inner { max-width: var(--ghs-shell-wide); margin: 0 auto; padding: 0 2rem; min-height: 4.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; } .ghs-topbar__tag { display: inline-flex; align-items: center; gap: .8rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; font-size: 1.15rem; color: rgba(255, 255, 255, .7); } .ghs-topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: #35d07f; animation: ghs-pulse-dot 2.4s ease-out infinite; } @keyframes ghs-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .6); } 70% { box-shadow: 0 0 0 8px rgba(53, 208, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); } } .ghs-topbar__links { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .ghs-topbar__link { display: inline-flex; align-items: center; gap: .7rem; color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 600; transition: color .2s ease; } .ghs-topbar__link:hover, .ghs-topbar__link:focus { color: #fff; text-decoration: none; } .ghs-topbar__link svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; } @media (max-width: 767px) { .ghs-topbar__inner { justify-content: center; gap: 1rem; padding: .8rem 1.6rem; } .ghs-topbar__tag { width: 100%; justify-content: center; } } /* --------------------------------------------------------------------------- 3. Header - main bar ------------------------------------------------------------------------ */ #masthead.site-header { position: relative; z-index: 99; } #bloghash-header { background: var(--ghs-surface); border-bottom: 1px solid var(--ghs-line); transition: box-shadow .3s ease, background-color .3s ease; } body.ghs-header-stuck #bloghash-header { box-shadow: 0 10px 30px -18px rgba(36, 28, 43, .5); } #bloghash-header-inner > .bloghash-header-container { max-width: var(--ghs-shell-wide); padding-top: 1.2rem; padding-bottom: 1.2rem; } /* Nine menu items plus two CTA pills will not share a line with the logo at any realistic width - the theme's menu is justified flex-end, so the overflow spills back across the wordmark. Give the menu its own full-width row instead: brand and actions on top, navigation centred beneath. */ @media (min-width: 992px) { #bloghash-header-inner > .bloghash-header-container { flex-wrap: wrap; align-items: center; } #bloghash-header-inner > .bloghash-header-container > .bloghash-logo { order: 1; flex: 0 0 auto; margin-right: auto; align-items: center; } #bloghash-header-inner > .bloghash-header-container > .bloghash-header-widgets { order: 2; flex: 0 0 auto; margin-left: auto; } #bloghash-header-inner > .bloghash-header-container > .bloghash-nav { order: 3; flex: 0 0 100%; width: 100%; min-width: 0; margin-top: 1.2rem; padding-top: .6rem; border-top: 1px solid var(--ghs-line); } .bloghash-primary-nav > ul { justify-content: center; } } /* --- Logo mark ---------------------------------------------------------- */ /* Mark on the left, title stacked over the tagline on the right. Both columns are content-sized - a 1fr column here would stretch the logo block and push the mobile hamburger off-screen. */ .bloghash-logo .logo-inner { display: grid; grid-template-columns: auto minmax(0, max-content); grid-template-rows: auto auto; align-items: center; justify-content: start; column-gap: 1.3rem; min-width: 0; max-width: 100%; } .bloghash-logo .logo-inner > a:first-child { grid-row: 1 / span 2; grid-column: 1; align-self: center; } .bloghash-logo .site-title { grid-column: 2; align-self: end; } .bloghash-logo .site-description { grid-column: 2; align-self: start; } .bloghash-logo .logo-inner > a { display: inline-flex; align-items: center; justify-content: center; width: 5.4rem; height: 5.4rem; flex: 0 0 auto; border-radius: 50%; background: #fff; border: 2px solid var(--ghs-wine); box-shadow: 0 6px 18px -8px rgba(163, 21, 69, .55); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .bloghash-logo .logo-inner > a:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(163, 21, 69, .7); } /* The source mark carries a lot of white margin, so overscale it slightly to fill the badge. */ .bloghash-logo .logo-inner img { width: auto; height: 6.6rem; max-width: none; object-fit: contain; display: block; mix-blend-mode: multiply; } [data-darkmode="dark"] .bloghash-logo .logo-inner img { mix-blend-mode: normal; } .bloghash-logo .site-title { margin: 0; font-size: 2.1rem; line-height: 1.15; letter-spacing: -.01em; font-weight: 700; } .bloghash-logo .site-title a { text-decoration: none; background: var(--ghs-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-darkmode="dark"] .bloghash-logo .site-title a { background: linear-gradient(135deg, #ff7fa5 0%, var(--ghs-rose) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Bring the tagline back as a visible kicker under the title, but only on screens wide enough that it does not squeeze the menu. */ @media (min-width: 992px) { .bloghash-logo .site-description.screen-reader-text { position: static !important; clip: auto !important; clip-path: none !important; width: auto !important; height: auto !important; overflow: visible !important; margin: .1rem 0 0 !important; padding: 0 !important; font-size: 1.05rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--ghs-ink-muted); white-space: nowrap; } } @media (max-width: 991px) { .bloghash-logo .site-title { font-size: 1.8rem; } .bloghash-logo .logo-inner > a { width: 4.4rem; height: 4.4rem; } .bloghash-logo .logo-inner img { height: 5.4rem; } } /* --- Primary navigation ------------------------------------------------- */ .bloghash-primary-nav > ul > li > a { font-size: 1.45rem; font-weight: 600; letter-spacing: .01em; padding-left: 1.4rem; padding-right: 1.4rem; border-radius: 999px; white-space: nowrap; transition: color .2s ease, background-color .2s ease; } .bloghash-primary-nav > ul > li > a > span { position: relative; } .bloghash-primary-nav > ul > li > a > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.5rem; height: 2px; border-radius: 2px; background: var(--ghs-gradient); transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .bloghash-primary-nav > ul > li:hover > a > span::after, .bloghash-primary-nav > ul > li:focus-within > a > span::after, .bloghash-primary-nav > ul > li.current-menu-item > a > span::after, .bloghash-primary-nav > ul > li.current_page_item > a > span::after { transform: scaleX(1); } .bloghash-primary-nav > ul > li.current-menu-item > a, .bloghash-primary-nav > ul > li.current_page_item > a { color: var(--ghs-wine); } .bloghash-primary-nav .sub-menu { border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius-sm); box-shadow: var(--ghs-shadow); overflow: hidden; padding: .6rem; } .bloghash-primary-nav .sub-menu li a { border-radius: 8px; font-size: 1.4rem; } /* --- Header CTA --------------------------------------------------------- */ .ghs-header-cta { display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 2rem; border-radius: 999px; background: var(--ghs-gradient); color: #fff !important; font-size: 1.4rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(163, 21, 69, .9); transition: transform .2s ease, box-shadow .2s ease; } .ghs-header-cta:hover, .ghs-header-cta:focus { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(163, 21, 69, 1); color: #fff !important; text-decoration: none; } .ghs-header-cta svg { width: 16px; height: 16px; flex: 0 0 auto; } .bloghash-header-widget__ghs-cta .bloghash-widget-wrapper { display: flex; align-items: center; gap: .8rem; } /* The Customizer-managed WhatsApp button, matched to the new CTA pill. */ .bloghash-header-widget__button a.bloghash-btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.8rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, #25d366 0%, #128c4a 100%); color: #fff !important; font-size: 1.4rem; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(18, 140, 74, .9); transition: transform .2s ease, box-shadow .2s ease; } .bloghash-header-widget__button a.bloghash-btn:hover, .bloghash-header-widget__button a.bloghash-btn:focus { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(18, 140, 74, 1); color: #fff !important; background: linear-gradient(135deg, #25d366 0%, #128c4a 100%); } .bloghash-header-widget__button a.bloghash-btn .bloghash-icon, .bloghash-header-widget__button a.bloghash-btn i { color: #fff; } @media (max-width: 1199px) { .ghs-header-cta { padding: .9rem 1.5rem; font-size: 1.3rem; } .bloghash-header-widget__button { display: none; } } /* On mobile the header must leave room for the hamburger; the CTA carries the theme's own bloghash-hide-mobile-tablet class, and the floating call / WhatsApp buttons plus the top bar number cover booking there. */ .bloghash-header-widgets .bloghash-search, .bloghash-header-widgets .bloghash-darkmode { border-radius: 999px; } /* --------------------------------------------------------------------------- 4. Shared section furniture ------------------------------------------------------------------------ */ body.home .ges-home-listing, #page .ghs-packages-widget, #page .ghs-reviews, #page .ghs-services, #page .ghs-faq { position: relative; margin: 0 0 var(--ghs-section-gap); padding: 4rem 3.2rem; background: var(--ghs-surface); border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius-lg); box-shadow: var(--ghs-shadow); } #page .ghs-packages-widget, #page .ghs-services { background: var(--ghs-gradient-soft); } /* Section headings share an eyebrow rule + centred setting. */ body.home .ges-home-listing .ges-home-listing-title, #page .ghs-packages-widget > .widget-title, #page .ghs-reviews > .widget-title, #page .ghs-services > .widget-title, #page .ghs-faq > .widget-title { position: relative; margin: 0 0 3.2rem; padding-top: 2.4rem; font-size: clamp(2.6rem, 3.6vw, 3.6rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--ghs-ink); text-align: center; } body.home .ges-home-listing .ges-home-listing-title::before, #page .ghs-packages-widget > .widget-title::before, #page .ghs-reviews > .widget-title::before, #page .ghs-services > .widget-title::before, #page .ghs-faq > .widget-title::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 5.6rem; height: 4px; border-radius: 4px; background: var(--ghs-gradient); } @media (max-width: 767px) { :root { --ghs-section-gap: 4rem; } body.home .ges-home-listing, body .ghs-packages-widget, body .ghs-reviews, body .ghs-services, body .ghs-faq { padding: 3rem 1.8rem; border-radius: var(--ghs-radius); } } /* --------------------------------------------------------------------------- 5. Hero slider / ticker / "you may have missed" ------------------------------------------------------------------------ */ #hero .bloghash-hero-container, #ticker .bloghash-ticker-container, #pyml .bloghash-pyml-container { max-width: var(--ghs-shell-wide); } #hero .ghs-hero-image-slide { border-radius: var(--ghs-radius-lg); overflow: hidden; box-shadow: var(--ghs-shadow-lg); } #hero .ghs-hero-image-link { display: block; height: 64rem; max-height: 80vh; } #hero .ghs-hero-image-link img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2, .7, .3, 1); } #hero .ghs-hero-image-slide:hover .ghs-hero-image-link img { transform: scale(1.06); } @media only screen and (max-width: 767px) { #hero .ghs-hero-image-link { height: 42rem; } } #pyml .bloghash-post-thumb img { transition: transform .7s cubic-bezier(.2, .7, .3, 1); } #pyml .bloghash-post-item:hover .bloghash-post-thumb img { transform: scale(1.06); } #pyml .bloghash-post-content .entry-title a { letter-spacing: -.015em; } #pyml .post-category a, .bloghash-article .post-category a { display: inline-block; padding: .4rem 1.2rem; border-radius: 999px; background: var(--ghs-gradient); color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; } #hero .swiper-button-next, #hero .swiper-button-prev { width: 4.4rem; height: 4.4rem; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ghs-wine); box-shadow: var(--ghs-shadow); } #ticker .bloghash-ticker { border-radius: 999px; border: 1px solid var(--ghs-line); background: var(--ghs-surface); box-shadow: var(--ghs-shadow-sm); overflow: hidden; } #ticker .ticker-item { padding-left: 1.6rem; padding-right: 1.6rem; } #pyml .bloghash-pyml { border-radius: var(--ghs-radius-lg); } /* --------------------------------------------------------------------------- 6. Latest posts listing ------------------------------------------------------------------------ */ body.home .ges-home-listing-inner { max-width: none; } body.home .ges-home-listing .bloghash-article { border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius); background: var(--ghs-surface-alt); overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } body.home .ges-home-listing .bloghash-article:hover { transform: translateY(-3px); border-color: rgba(163, 21, 69, .35); box-shadow: var(--ghs-shadow); } body.home .ges-home-listing .bloghash-article .entry-title { letter-spacing: -.015em; } body.home .ges-home-listing .bloghash-article .post-thumb img { transition: transform .6s cubic-bezier(.2, .7, .3, 1); } body.home .ges-home-listing .bloghash-article:hover .post-thumb img { transform: scale(1.05); } /* --------------------------------------------------------------------------- 7. Packages / pricing ------------------------------------------------------------------------ */ #page .ghs-packages-list.ghs-pricing-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 2.4rem; align-items: stretch; } #page .ghs-package-card.ghs-pricing-card { position: relative; display: flex; flex-direction: column; padding: 3.2rem 2.6rem 2.6rem; background: var(--ghs-surface); border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius); box-shadow: var(--ghs-shadow-sm); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } #page .ghs-package-card.ghs-pricing-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--ghs-gradient); } #page .ghs-package-card.ghs-pricing-card:hover { transform: translateY(-6px); border-color: rgba(163, 21, 69, .35); box-shadow: var(--ghs-shadow-lg); } #page .ghs-package-card.is-featured { border-color: rgba(163, 21, 69, .45); box-shadow: var(--ghs-shadow); } #page .ghs-package-card.is-featured::before { height: 7px; background: linear-gradient(90deg, var(--ghs-champagne), var(--ghs-wine), var(--ghs-champagne)); } #page .ghs-pricing-ribbon { position: absolute; top: 1.8rem; right: -3.4rem; transform: rotate(45deg); width: 13rem; padding: .5rem 0; text-align: center; background: var(--ghs-gradient); color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(122, 14, 51, .8); } /* Keep the plan name clear of the rotated corner ribbon. */ #page .ghs-pricing-head { margin-bottom: 1.2rem; padding-right: 6.5rem; min-height: 2.6rem; } #page .ghs-pricing-name { font-size: 1.25rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ghs-wine); } #page .ghs-pricing-price { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.4rem; } #page .ghs-pricing-price .ghs-price { font-size: 4rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--ghs-ink); } #page .ghs-pricing-price .ghs-period { font-size: 1.25rem; font-weight: 600; letter-spacing: .04em; color: var(--ghs-ink-muted); } #page .ghs-pricing-sub { margin-bottom: 2rem; padding: 1rem 1.4rem; border-radius: var(--ghs-radius-sm); background: rgba(163, 21, 69, .06); color: var(--ghs-ink); font-size: 1.35rem; font-weight: 600; } #page .ghs-pricing-features { list-style: none; margin: 0 0 2.4rem; padding: 0; display: grid; gap: .9rem; flex: 1 1 auto; } #page .ghs-pricing-features li { display: flex; align-items: flex-start; gap: 1rem; margin: 0; font-size: 1.4rem; line-height: 1.45; color: var(--ghs-ink); } #page .ghs-pricing-features li .mark { flex: 0 0 auto; width: 2rem; height: 2rem; margin-top: .1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; background: rgba(53, 208, 127, .16); color: #0f8b4c; } #page .ghs-pricing-features li:not(.ok) .mark { background: rgba(163, 21, 69, .12); color: var(--ghs-wine); } #page .ghs-pricing-features li:not(.ok) .text { color: var(--ghs-ink-muted); text-decoration: line-through; } #page a.ghs-package-cta.ghs-pricing-cta { display: block; margin-top: auto; padding: 1.4rem 2rem; border: 0; border-radius: 999px; background: var(--ghs-gradient); color: #fff !important; font-size: 1.5rem; font-weight: 700; text-align: center; text-decoration: none; box-shadow: 0 12px 26px -14px rgba(163, 21, 69, .95); transition: transform .2s ease, box-shadow .2s ease; } #page a.ghs-package-cta.ghs-pricing-cta:hover, #page a.ghs-package-cta.ghs-pricing-cta:focus { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(163, 21, 69, 1); color: #fff !important; } /* --------------------------------------------------------------------------- 8. Reviews ------------------------------------------------------------------------ */ #page .ghs-reviews-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2.4rem; } #page .ghs-review-card { position: relative; display: flex; flex-direction: column; padding: 3.4rem 2.6rem 2.4rem; background: var(--ghs-surface-alt); border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius); box-shadow: var(--ghs-shadow-sm); transition: transform .28s ease, box-shadow .28s ease; } #page .ghs-review-card::before { content: "\201C"; position: absolute; top: .6rem; left: 2.2rem; font-family: Georgia, "Times New Roman", serif; font-size: 7rem; line-height: 1; color: rgba(163, 21, 69, .14); pointer-events: none; } #page .ghs-review-card:hover { transform: translateY(-4px); box-shadow: var(--ghs-shadow); } #page .ghs-review-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.2rem; } #page .ghs-review-title { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; color: var(--ghs-ink); } #page .ghs-review-stars { flex: 0 0 auto; letter-spacing: .1em; font-size: 1.4rem; } #page .ghs-review-stars .ghs-star.on { color: var(--ghs-champagne); } #page .ghs-review-stars .ghs-star.off { color: rgba(36, 28, 43, .18); } [data-darkmode="dark"] .ghs-review-stars .ghs-star.off { color: rgba(255, 255, 255, .2); } #page .ghs-review-text { flex: 1 1 auto; margin-bottom: 1.8rem; color: var(--ghs-ink-muted); font-size: 1.5rem; line-height: 1.65; } #page .ghs-review-text p { margin: 0; } #page .ghs-review-meta { display: flex; align-items: center; gap: .8rem; padding-top: 1.4rem; border-top: 1px solid var(--ghs-line); font-size: 1.3rem; color: var(--ghs-ink-muted); } #page .ghs-review-meta .ghs-review-name { font-weight: 700; color: var(--ghs-ink); } #page .ghs-review-meta .ghs-review-dot { opacity: .5; } /* --------------------------------------------------------------------------- 9. Services ------------------------------------------------------------------------ */ #page .ghs-services-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr)); gap: 2.4rem; } #page .ghs-service-card { display: flex; flex-direction: column; padding: 3rem 2.6rem 2.6rem; background: var(--ghs-surface); border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius); box-shadow: var(--ghs-shadow-sm); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } #page .ghs-service-card:hover { transform: translateY(-4px); border-color: rgba(163, 21, 69, .3); box-shadow: var(--ghs-shadow); } #page .ghs-service-head { margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--ghs-line); } #page .ghs-service-name { position: relative; padding-left: 1.6rem; font-size: 1.9rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--ghs-ink); } #page .ghs-service-name::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 4px; border-radius: 4px; background: var(--ghs-gradient); } #page .ghs-service-desc { color: var(--ghs-ink-muted); font-size: 1.45rem; line-height: 1.7; } #page .ghs-service-desc p:last-child { margin-bottom: 0; } #page .ghs-service-desc strong { color: var(--ghs-ink); } #page .ghs-service-items { list-style: none; margin: 1.8rem 0 2.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; flex: 1 1 auto; align-content: flex-start; } #page .ghs-service-items li { margin: 0; padding: .55rem 1.2rem; border-radius: 999px; border: 1px solid rgba(163, 21, 69, .2); background: rgba(163, 21, 69, .06); color: var(--ghs-ink); font-size: 1.25rem; font-weight: 600; line-height: 1.35; } #page .ghs-service-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: auto; } #page a.ghs-service-cta { flex: 1 1 14rem; padding: 1.2rem 1.8rem; border: 0; border-radius: 999px; font-size: 1.45rem; font-weight: 700; text-align: center; text-decoration: none; color: #fff !important; transition: transform .2s ease, box-shadow .2s ease; } #page a.ghs-service-cta.ghs-service-call { background: var(--ghs-gradient); box-shadow: 0 12px 26px -14px rgba(163, 21, 69, .95); } #page a.ghs-service-cta.ghs-service-wa { background: linear-gradient(135deg, #25d366 0%, #128c4a 100%); box-shadow: 0 12px 26px -14px rgba(18, 140, 74, .95); } #page a.ghs-service-cta:hover, #page a.ghs-service-cta:focus { transform: translateY(-2px); color: #fff !important; } /* --------------------------------------------------------------------------- 10. FAQ ------------------------------------------------------------------------ */ #page .ghs-faq-list { display: grid; gap: 1.2rem; } #page details.ghs-faq-item { background: var(--ghs-surface-alt); border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius-sm); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } #page details.ghs-faq-item[open] { border-color: rgba(163, 21, 69, .35); box-shadow: var(--ghs-shadow-sm); } /* The existing accordion marker is a +/- glyph on summary::after, set in the theme's generated dynamic-styles.css at a higher specificity. Keep that affordance and dress it as a round token rather than adding a second one - hence the matching selector depth below. */ #page .ghs-faq-list details.ghs-faq-item summary.ghs-faq-q { list-style: none; cursor: pointer; gap: 1.6rem; padding: 1.7rem 2rem 1.7rem 2.2rem; font-size: 1.6rem; font-weight: 700; line-height: 1.45; color: var(--ghs-ink); transition: color .2s ease; } #page summary.ghs-faq-q::-webkit-details-marker { display: none; } #page .ghs-faq-list details.ghs-faq-item summary.ghs-faq-q:hover { color: var(--ghs-wine); } #page .ghs-faq-list details.ghs-faq-item summary.ghs-faq-q::after { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(163, 21, 69, .1); color: var(--ghs-wine); font-size: 1.9rem; font-weight: 700; line-height: 1; transition: background-color .2s ease, color .2s ease; } #page .ghs-faq-list details.ghs-faq-item[open] summary.ghs-faq-q::after { background: var(--ghs-wine); color: #fff; } #page .ghs-faq-a { padding: 0 2.2rem 2rem; color: var(--ghs-ink-muted); font-size: 1.45rem; line-height: 1.7; } #page .ghs-faq-a p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- 11. Home prose block (the SEO copy under the sections) ------------------------------------------------------------------------ */ /* The home page runs full width, so its running text still needs a readable measure. Inner pages already sit in a narrower column. */ body.home .entry-content.bloghash-entry > h1, body.home .entry-content.bloghash-entry > h2, body.home .entry-content.bloghash-entry > h3, body.home .entry-content.bloghash-entry > h4, body.home .entry-content.bloghash-entry > p, body.home .entry-content.bloghash-entry > ul, body.home .entry-content.bloghash-entry > ol { max-width: 88rem; margin-left: auto; margin-right: auto; } #page .entry-content.bloghash-entry > h1, #page .entry-content.bloghash-entry > h2 { margin-top: 4rem; margin-bottom: 1.4rem; letter-spacing: -.02em; line-height: 1.25; } #page .entry-content.bloghash-entry > h2 { position: relative; padding-left: 1.8rem; } #page .entry-content.bloghash-entry > h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: var(--ghs-gradient); } #page .entry-content.bloghash-entry > h3 { margin-top: 3rem; margin-bottom: 1rem; color: var(--ghs-wine); } #page .entry-content.bloghash-entry > p { font-size: 1.55rem; line-height: 1.8; color: var(--ghs-ink-muted); } #page .entry-content.bloghash-entry > p strong { color: var(--ghs-ink); } #page .entry-content.bloghash-entry > p a { color: var(--ghs-wine); text-decoration-thickness: 1px; text-underline-offset: .25em; } /* --------------------------------------------------------------------------- 12. Floating action buttons - align with the new palette ------------------------------------------------------------------------ */ .ges-float { box-shadow: 0 16px 34px -14px rgba(36, 28, 43, .55); transition: transform .2s ease, box-shadow .2s ease; } .ges-float:hover { transform: translateY(-3px); } .ges-float-call { background: var(--ghs-gradient) !important; color: #fff !important; } /* --------------------------------------------------------------------------- 13. Footer polish ------------------------------------------------------------------------ */ #bloghash-footer .bloghash-footer-widget .widget-title, #bloghash-footer .h4.widget-title { position: relative; padding-bottom: 1rem; margin-bottom: 1.8rem; letter-spacing: .02em; } #bloghash-footer .bloghash-footer-widget .widget-title::after, #bloghash-footer .h4.widget-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.6rem; height: 3px; border-radius: 3px; background: var(--ghs-gradient); } #bloghash-copyright.contained-separator { border-top: 1px solid var(--ghs-line); } /* --------------------------------------------------------------------------- 14. Motion preferences ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .ghs-topbar__dot { animation: none; } body .ghs-package-card.ghs-pricing-card, body .ghs-review-card, body .ghs-service-card, body.home .ges-home-listing .bloghash-article, .ghs-header-cta, .ges-float, #hero .bloghash-post-thumb img, #pyml .bloghash-post-thumb img { transition: none; } body .ghs-package-card.ghs-pricing-card:hover, body .ghs-review-card:hover, body .ghs-service-card:hover, body.home .ges-home-listing .bloghash-article:hover, .ghs-header-cta:hover, .ges-float:hover { transform: none; } } /* --------------------------------------------------------------------------- 15. Inner pages (About, Packages, FAQ, Services, Blog, Gallery, Contact) A lighter version of the home treatment: branded page header, the content in the same card as the home sections, and matching sidebar widgets. ------------------------------------------------------------------------ */ /* --- Page header banner -------------------------------------------------- */ body:not(.home) .page-header { position: relative; margin-bottom: 4rem; padding: 4.4rem 0 4rem; background: var(--ghs-gradient-soft); border-bottom: 1px solid var(--ghs-line); overflow: hidden; } body:not(.home) .page-header::before { content: ""; position: absolute; top: -60%; right: -8rem; width: 42rem; height: 42rem; border-radius: 50%; background: radial-gradient(circle, rgba(163, 21, 69, .1) 0%, transparent 68%); pointer-events: none; } body:not(.home) .page-header > .bloghash-container { position: relative; max-width: var(--ghs-shell-wide); } body:not(.home) .page-header .page-title { position: relative; margin: 0; padding-top: 2.2rem; font-size: clamp(3rem, 4.4vw, 4.4rem); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: var(--ghs-ink); } body:not(.home) .page-header .page-title::before { content: ""; position: absolute; top: 0; left: 0; width: 5.6rem; height: 4px; border-radius: 4px; background: var(--ghs-gradient); } /* --- Breadcrumbs --------------------------------------------------------- */ body:not(.home) .bloghash-breadcrumbs { margin-top: 1.6rem; font-size: 1.3rem; } body:not(.home) .bloghash-breadcrumbs p { margin: 0; color: var(--ghs-ink-muted); } body:not(.home) .bloghash-breadcrumbs a { color: var(--ghs-wine); text-decoration: none; font-weight: 600; } body:not(.home) .bloghash-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: .25em; } body:not(.home) .bloghash-breadcrumbs .separator { opacity: .45; padding: 0 .3rem; } /* --- Content card -------------------------------------------------------- */ body.page:not(.home) #primary .bloghash-article, body.single #primary .bloghash-article { padding: 3.6rem 3.2rem; background: var(--ghs-surface); border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius-lg); box-shadow: var(--ghs-shadow); } body.page:not(.home) #primary .bloghash-article > .entry-header .entry-title, body.single #primary .bloghash-article > .entry-header .entry-title { letter-spacing: -.02em; } @media (max-width: 767px) { body:not(.home) .page-header { padding: 3rem 0 2.6rem; margin-bottom: 2.8rem; } body.page:not(.home) #primary .bloghash-article, body.single #primary .bloghash-article { padding: 2.4rem 1.8rem; border-radius: var(--ghs-radius); } } /* --- Sidebar widgets ----------------------------------------------------- */ #secondary .bloghash-sidebar-widget { padding: 2.4rem 2.2rem; background: var(--ghs-surface); border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius); box-shadow: var(--ghs-shadow-sm); } #secondary .bloghash-sidebar-widget .widget-title, #secondary .bloghash-sidebar-widget .h4 { position: relative; padding-bottom: 1rem; margin-bottom: 1.6rem; font-size: 1.8rem; letter-spacing: -.01em; } #secondary .bloghash-sidebar-widget .widget-title::after, #secondary .bloghash-sidebar-widget .h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 3px; border-radius: 3px; background: var(--ghs-gradient); } #secondary .bloghash-sidebar-widget a { text-decoration: none; } #secondary .bloghash-sidebar-widget a:hover { color: var(--ghs-wine); } #secondary .bloghash-sidebar-widget .wp-block-search__button, #secondary .bloghash-sidebar-widget input[type="submit"] { border: 0; border-radius: 999px; padding: 1rem 1.8rem; background: var(--ghs-gradient); color: #fff; font-weight: 700; } #secondary .bloghash-sidebar-widget input[type="search"], #secondary .bloghash-sidebar-widget .wp-block-search__input { border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius-sm); padding: 1rem 1.4rem; } /* --- Blog / archive listings -------------------------------------------- */ body.blog .bloghash-article, body.archive .bloghash-article, body.search .bloghash-article { border: 1px solid var(--ghs-line); border-radius: var(--ghs-radius); background: var(--ghs-surface); overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } body.blog .bloghash-article:hover, body.archive .bloghash-article:hover, body.search .bloghash-article:hover { transform: translateY(-3px); border-color: rgba(163, 21, 69, .35); box-shadow: var(--ghs-shadow); } @media (prefers-reduced-motion: reduce) { body.blog .bloghash-article, body.archive .bloghash-article, body.search .bloghash-article { transition: none; } body.blog .bloghash-article:hover, body.archive .bloghash-article:hover, body.search .bloghash-article:hover { transform: none; } }