/* Theme Name: Hive Construction Theme URI: https://buzzdash.co.uk Author: Buzz Website Solutions Author URI: https://buzzdash.co.uk Description: A premium construction & building trade child theme for the Hive Framework. Includes a bold hero, trust/stats bar, Services and Projects custom post types with a filterable portfolio grid, testimonials, a quote-request call-to-action band, and full construction-themed demo content. Template: hive-framework Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Tested up to: 6.7 License: GPL v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: hive-construction */ /* ========================================================================== 0. Brand palette Overrides the parent's --hive-accent variables. Also used directly as extra --hc- variables for anything the parent framework doesn't cover (dark navy sections, safety-orange highlight, concrete grey neutrals). A site owner can still repaint the accent colour from the Customizer — these are just sensible construction-trade defaults. ========================================================================== */ :root { --hive-accent: #e8891c; --hive-accent-hover: #c86f0f; --hive-header-bg: #12233b; --hive-header-text: #ffffff; --hive-footer-bg: #0c1a2c; --hive-footer-text: #b9c3d1; --hc-navy: #12233b; --hc-navy-darker: #0c1a2c; --hc-orange: #e8891c; --hc-orange-dark: #c86f0f; --hc-concrete: #f2f4f7; --hc-concrete-dark: #6b7280; --hc-line: #e2e6ec; } /* ========================================================================== 1. Header refinements Parent's .site-header already reads --hive-header-bg/text; this just adds the utility bar (phone + emergency line) fired above it and tightens the nav to sit comfortably on a dark header. ========================================================================== */ .hc-topbar { background: var( --hc-navy-darker ); color: #cfd6e0; font-size: 0.8rem; max-height: 36px; overflow: hidden; transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease; } body.hc-scrolled .hc-topbar { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } .hc-topbar .wrap { max-width: 1200px; margin: 0 auto; padding: 0.4rem 20px; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between; } .hc-topbar a { color: #ffffff; font-weight: 600; } .hc-topbar .hc-emergency { color: var( --hc-orange ); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .hc-topbar .hc-license { color: #8b96a7; } .hc-topbar .hc-hours { color: #cfd6e0; } .hc-topbar .hc-topbar-left { display: flex; flex-wrap: wrap; gap: 0 1.25rem; } .site-header .nav-primary-menu a { color: #ffffff; } .site-header .nav-primary-menu a:hover, .site-header .nav-primary-menu a:focus, .site-header .nav-primary-menu .current-menu-item > a { color: var( --hc-orange ); border-bottom-color: var( --hc-orange ); } .site-header .menu-toggle { border-color: rgba( 255, 255, 255, 0.25 ); } .site-header .menu-toggle-bar { background: #ffffff; } .hc-header-cta { display: inline-block; margin-left: 0.5rem; } /* Shrink-on-scroll — see assets/js/header-scroll.js, which toggles the "hc-scrolled" class on . Requires the parent theme's Sticky Header option to be on (the demo installer enables it) so the header stays in view to shrink against. The base (non-scrolled) sizing below is already noticeably tighter than the parent theme's 1rem default — this is a compact header even before scrolling. */ .site-header { padding: 0.55rem 0; transition: padding 0.25s ease, box-shadow 0.25s ease; } body.hc-scrolled .site-header { padding: 0.4rem 0; box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.18 ); } .site-branding .custom-logo { max-height: 42px; width: auto; transition: max-height 0.25s ease; } body.hc-scrolled .site-branding .custom-logo { max-height: 32px; } .hc-header-cta { padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: 0.85rem; } body.hc-scrolled .hc-header-cta { padding-top: 0.45rem; padding-bottom: 0.45rem; } /* ========================================================================== 1b. Primary navigation — top-level items + dropdown submenus. The parent theme ships no submenu styling at all (nested

just renders inline), so this is built from scratch here. ========================================================================== */ .nav-primary-menu { align-items: center; } .nav-primary-menu > li { position: relative; } .nav-primary-menu > li > a { font-size: 0.92rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .nav-primary-menu li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 0.4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate( 45deg ) translateY( -2px ); opacity: 0.7; } /* Desktop dropdown panel. */ .nav-primary-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 250; min-width: 230px; margin: 0; padding: 0.5rem 0; list-style: none; background: #ffffff; border-radius: 8px; box-shadow: 0 16px 34px rgba( 12, 26, 44, 0.18 ); opacity: 0; visibility: hidden; transform: translateY( 8px ); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } .nav-primary-menu > li:hover > .sub-menu, .nav-primary-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY( 0 ); } .nav-primary-menu .sub-menu li { position: relative; } .nav-primary-menu .sub-menu a { display: block; padding: 0.6rem 1.25rem; color: var( --hc-navy ); font-size: 0.88rem; font-weight: 600; text-transform: none; letter-spacing: normal; border-bottom: none; white-space: nowrap; } .nav-primary-menu .sub-menu a:hover, .nav-primary-menu .sub-menu a:focus, .nav-primary-menu .sub-menu .current-menu-item > a { background: var( --hc-concrete ); color: var( --hc-orange ); } /* Third-level (sub-sub) menus open to the side rather than stacking further downward. */ .nav-primary-menu .sub-menu .sub-menu { top: -0.5rem; left: 100%; } @media ( max-width: 782px ) { .nav-primary-menu > li > a { font-size: 0.95rem; } .nav-primary-menu li.menu-item-has-children > a::after { float: right; margin-top: 0.5em; } .nav-primary-menu .sub-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background: rgba( 255, 255, 255, 0.04 ); border-radius: 0; padding: 0 0 0.4rem; } .nav-primary-menu .sub-menu a { color: #ffffff; padding: 0.5rem 0 0.5rem 1.25rem; font-size: 0.85rem; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .nav-primary-menu .sub-menu a:hover, .nav-primary-menu .sub-menu a:focus { background: transparent; color: var( --hc-orange ); } } @media ( max-width: 782px ) { .hc-topbar .wrap { justify-content: center; text-align: center; } .hc-header-cta { display: none; } } /* ========================================================================== 2. Hero ========================================================================== */ .hc-hero { position: relative; background: linear-gradient( 135deg, var( --hc-navy ) 0%, var( --hc-navy-darker ) 100% ); color: #ffffff; padding: 5rem 20px; overflow: hidden; } .hc-hero::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 45deg, rgba( 232, 137, 28, 0.06 ) 0, rgba( 232, 137, 28, 0.06 ) 2px, transparent 2px, transparent 26px ); pointer-events: none; } .hc-hero .wrap { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; } .hc-hero-eyebrow { display: inline-block; color: var( --hc-orange ); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; margin-bottom: 0.75rem; } .hc-hero h1 { font-size: clamp( 2rem, 4.2vw, 3.1rem ); line-height: 1.15; margin: 0 0 1rem; } .hc-hero p { font-size: 1.125rem; color: #d7dee8; max-width: 46ch; margin: 0 0 1.75rem; } .hc-hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } .hc-hero-actions .button.hc-btn-outline { background: transparent; border: 2px solid #ffffff; color: #ffffff; } .hc-hero-actions .button.hc-btn-outline:hover { background: #ffffff; color: var( --hc-navy ); } .hc-hero-media { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 45px rgba( 0, 0, 0, 0.35 ); } .hc-hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } @media ( max-width: 900px ) { .hc-hero .wrap { grid-template-columns: 1fr; } .hc-hero { padding: 3.5rem 20px; } } /* ========================================================================== 3. Stats / trust bar ========================================================================== */ .hc-stats { background: var( --hc-orange ); color: #1a1200; } .hc-stats .wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 20px; display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 1.5rem; text-align: center; } .hc-stat-number { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1; margin-bottom: 0.35rem; } .hc-stat-label { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } @media ( max-width: 782px ) { .hc-stats .wrap { grid-template-columns: repeat( 2, 1fr ); } } /* ========================================================================== 4. Section scaffolding ========================================================================== */ .hc-section { padding: 4.5rem 20px; } .hc-section .wrap { max-width: 1200px; margin: 0 auto; } .hc-section--muted { background: var( --hc-concrete ); } .hc-section--navy { background: var( --hc-navy ); color: #ffffff; } .hc-section-head { max-width: 640px; margin: 0 0 2.75rem; } .hc-section--center .hc-section-head { margin-left: auto; margin-right: auto; text-align: center; } .hc-eyebrow { display: block; color: var( --hc-orange ); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin-bottom: 0.5rem; } .hc-section-head h2 { font-size: clamp( 1.6rem, 3vw, 2.25rem ); margin: 0 0 0.75rem; } .hc-section--navy .hc-section-head p { color: #c3cbd8; } /* ========================================================================== 5. Services grid ========================================================================== */ .hc-service-group + .hc-service-group { margin-top: 4rem; } .hc-services-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1.75rem; } .hc-service-card { background: #ffffff; border: 1px solid var( --hc-line ); border-radius: 10px; padding: 2rem 1.75rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .hc-service-card:hover { transform: translateY( -4px ); box-shadow: 0 14px 30px rgba( 18, 35, 59, 0.08 ); } .hc-service-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 8px; background: rgba( 232, 137, 28, 0.12 ); color: var( --hc-orange ); font-size: 1.5rem; margin-bottom: 1.1rem; } .hc-service-card h3 { margin: 0 0 0.6rem; font-size: 1.15rem; } .hc-service-card h3 a { color: inherit; } .hc-service-card p { color: var( --hc-concrete-dark ); margin: 0 0 1rem; font-size: 0.95rem; } .hc-service-card .hc-more { font-weight: 700; font-size: 0.9rem; } @media ( max-width: 900px ) { .hc-services-grid { grid-template-columns: repeat( 2, 1fr ); } } @media ( max-width: 600px ) { .hc-services-grid { grid-template-columns: 1fr; } } /* ========================================================================== 6. Projects / portfolio grid ========================================================================== */ .hc-filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: -1.5rem 0 2.5rem; } .hc-filter-bar button { background: #ffffff; border: 1px solid var( --hc-line ); border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var( --hc-navy ); } .hc-filter-bar button:hover, .hc-filter-bar button.is-active { background: var( --hc-navy ); border-color: var( --hc-navy ); color: #ffffff; } .hc-filter-bar .hc-filter-link { display: inline-block; background: #ffffff; border: 1px solid var( --hc-line ); border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.85rem; font-weight: 600; color: var( --hc-navy ); text-decoration: none; } .hc-filter-bar .hc-filter-link:hover, .hc-filter-bar .hc-filter-link.is-active { background: var( --hc-navy ); border-color: var( --hc-navy ); color: #ffffff; text-decoration: none; } .hc-projects-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1.75rem; } .hc-project-card { position: relative; border-radius: 10px; overflow: hidden; background: var( --hc-navy ); color: #ffffff; aspect-ratio: 4 / 3; display: block; } .hc-project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity 0.15s ease, transform 0.2s ease; } .hc-project-card:hover img { opacity: 0.45; transform: scale( 1.04 ); } .hc-project-card .hc-project-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; background: linear-gradient( to top, rgba( 12, 26, 44, 0.92 ), rgba( 12, 26, 44, 0 ) 70% ); } .hc-project-card .hc-project-cat { color: var( --hc-orange ); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; } .hc-project-card h3 { margin: 0; font-size: 1.1rem; } .hc-project-card a.hc-project-link { color: inherit; text-decoration: none; } @media ( max-width: 900px ) { .hc-projects-grid { grid-template-columns: repeat( 2, 1fr ); } } @media ( max-width: 600px ) { .hc-projects-grid { grid-template-columns: 1fr; } } /* Single project detail */ .hc-project-meta { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1.25rem; background: var( --hc-concrete ); border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0 2rem; } .hc-project-meta dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var( --hc-concrete-dark ); margin-bottom: 0.2rem; } .hc-project-meta dd { margin: 0; font-weight: 700; color: var( --hc-navy ); } @media ( max-width: 600px ) { .hc-project-meta { grid-template-columns: 1fr 1fr; } } /* ========================================================================== 7. Testimonials ========================================================================== */ .hc-testimonials-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1.75rem; } .hc-testimonial-card { background: rgba( 255, 255, 255, 0.06 ); border: 1px solid rgba( 255, 255, 255, 0.12 ); border-radius: 10px; padding: 1.85rem; } .hc-testimonial-stars { color: var( --hc-orange ); letter-spacing: 0.15em; margin-bottom: 0.75rem; } .hc-testimonial-card p.hc-quote { color: #dde3ec; font-size: 0.98rem; margin: 0 0 1.1rem; } .hc-testimonial-name { font-weight: 700; margin: 0; } .hc-testimonial-role { color: #93a0b3; font-size: 0.85rem; margin: 0; } @media ( max-width: 900px ) { .hc-testimonials-grid { grid-template-columns: 1fr; } } /* ========================================================================== 8. CTA / quote band ========================================================================== */ .hc-cta-band { background: var( --hc-orange ); color: #1a1200; padding: 3rem 20px; text-align: center; } .hc-cta-band .wrap { max-width: 800px; margin: 0 auto; } .hc-cta-band h2 { margin: 0 0 0.5rem; font-size: clamp( 1.5rem, 3vw, 2rem ); } .hc-cta-band p { margin: 0 0 1.5rem; font-size: 1.05rem; } .hc-cta-band .button { background: var( --hc-navy ); } .hc-cta-band .button:hover { background: var( --hc-navy-darker ); } /* ========================================================================== 9. Contact / quote form styling (works with plain markup or a form-plugin's default output — kept generic on purpose) ========================================================================== */ .hc-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } .hc-contact-card { background: var( --hc-concrete ); border-radius: 10px; padding: 1.75rem; } .hc-contact-card h3 { margin-top: 0; } .hc-contact-list { list-style: none; margin: 0; padding: 0; } .hc-contact-list li { padding: 0.5rem 0; border-bottom: 1px solid var( --hc-line ); } .hc-contact-list li:last-child { border-bottom: none; } @media ( max-width: 782px ) { .hc-contact-grid { grid-template-columns: 1fr; } } /* ========================================================================== 10. Breadcrumbs ========================================================================== */ .hc-breadcrumbs { background: var( --hc-concrete ); border-bottom: 1px solid var( --hc-line ); font-size: 0.85rem; color: var( --hc-concrete-dark ); } .hc-breadcrumbs .wrap { max-width: 1200px; margin: 0 auto; padding: 0.75rem 20px; } .hc-breadcrumbs a { color: var( --hc-navy ); font-weight: 600; } /* ========================================================================== 11. Misc / utility ========================================================================== */ .hc-badge-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .hc-badge { display: inline-block; background: rgba( 255, 255, 255, 0.1 ); border: 1px solid rgba( 255, 255, 255, 0.2 ); color: #ffffff; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; } .hc-no-results { text-align: center; color: var( --hc-concrete-dark ); padding: 2rem 0; } /* ========================================================================== 12. Tagline / secondary CTA strip (under the hero) ========================================================================== */ .hc-tagline-band { background: var( --hc-navy-darker ); color: #ffffff; padding: 2rem 20px; } .hc-tagline-band .wrap { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; } .hc-tagline-band h2 { margin: 0; font-size: clamp( 1.1rem, 2vw, 1.4rem ); font-weight: 700; max-width: 62ch; } .hc-tagline-band .button { flex-shrink: 0; } @media ( max-width: 700px ) { .hc-tagline-band .wrap { flex-direction: column; align-items: flex-start; text-align: left; } } /* ========================================================================== 13. Why Choose Us — asymmetric image-tile grid ========================================================================== */ .hc-whyus-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat( 2, 220px ); gap: 1.25rem; } .hc-whyus-tile { position: relative; border-radius: 10px; overflow: hidden; background: var( --hc-navy ); color: #ffffff; } .hc-whyus-tile-1 { grid-row: 1 / 3; } .hc-whyus-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .hc-whyus-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; background: linear-gradient( to top, rgba( 12, 26, 44, 0.9 ), rgba( 12, 26, 44, 0.15 ) 65% ); } .hc-whyus-overlay h3 { margin: 0 0 0.4rem; font-size: 1.15rem; } .hc-whyus-tile-1 .hc-whyus-overlay h3 { font-size: 1.4rem; } .hc-whyus-overlay p { margin: 0; font-size: 0.9rem; color: #d7dee8; } @media ( max-width: 782px ) { .hc-whyus-grid { grid-template-columns: 1fr; grid-template-rows: none; } .hc-whyus-tile { height: 260px; } .hc-whyus-tile-1 { grid-row: auto; } } /* ========================================================================== 14. Homepage services tabs ("What We Offer") ========================================================================== */ .hc-tabs-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; } .hc-tab-trigger { background: #ffffff; border: 1px solid var( --hc-line ); border-radius: 999px; padding: 0.6rem 1.3rem; font-size: 0.9rem; font-weight: 700; color: var( --hc-navy ); cursor: pointer; } .hc-tab-trigger.is-active, .hc-tab-trigger:hover { background: var( --hc-orange ); border-color: var( --hc-orange ); color: #1a1200; } .hc-tab-panel { display: none; } .hc-tab-panel.is-active { display: block; } .hc-tab-panel-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; background: #ffffff; border: 1px solid var( --hc-line ); border-radius: 12px; padding: 2.5rem; } .hc-tab-panel-body h3 { margin-top: 0; color: var( --hc-orange ); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .hc-tab-points { list-style: none; margin: 0 0 1.25rem; padding: 0; } .hc-tab-points li { padding: 0.4rem 0 0.4rem 1.6rem; position: relative; font-weight: 600; color: var( --hc-navy ); } .hc-tab-points li::before { content: ""; position: absolute; left: 0; top: 0.9rem; width: 9px; height: 9px; background: var( --hc-orange ); border-radius: 2px; } .hc-tab-panel-body p { color: var( --hc-concrete-dark ); margin: 0 0 1.25rem; } .hc-tab-panel-media img { width: 100%; border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; } @media ( max-width: 900px ) { .hc-tab-panel-inner { grid-template-columns: 1fr; padding: 1.75rem; } .hc-tab-panel-media { order: -1; } } /* ========================================================================== 15. Client logos strip ========================================================================== */ .hc-clients-strip { background: var( --hc-concrete ); border-top: 1px solid var( --hc-line ); border-bottom: 1px solid var( --hc-line ); padding: 2.5rem 20px; } .hc-clients-strip .wrap { max-width: 1200px; margin: 0 auto; text-align: center; } .hc-clients-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var( --hc-concrete-dark ); margin: 0 0 1.75rem; } .hc-clients-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 3rem; } .hc-client-logo { display: inline-flex; align-items: center; } .hc-client-logo img { max-height: 42px; width: auto; filter: grayscale( 100% ); opacity: 0.6; transition: opacity 0.15s ease, filter 0.15s ease; } .hc-client-logo:hover img { filter: grayscale( 0% ); opacity: 1; } /* ========================================================================== 16. Footer widget content (About / Services / Recent Projects) ========================================================================== */ .footer-widget-title { color: #ffffff; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 1rem; } .hc-widget-about-text { color: var( --hive-footer-text ); line-height: 1.6; margin: 0 0 1rem; } .hc-widget-about-meta, .hc-widget-links { list-style: none; margin: 0; padding: 0; } .hc-widget-about-meta li, .hc-widget-links li { padding: 0.35rem 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .hc-widget-about-meta li:last-child, .hc-widget-links li:last-child { border-bottom: none; } .hc-widget-links a { transition: color 0.15s ease; } .hc-widget-links a:hover, .hc-widget-links a:focus { color: var( --hc-orange ); text-decoration: none; } .footer-widget .widget_nav_menu ul { list-style: none; margin: 0; padding: 0; } .footer-widget .widget_nav_menu li { padding: 0.35rem 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .footer-widget .widget_nav_menu li:last-child { border-bottom: none; } .footer-widget .widget_nav_menu a:hover, .footer-widget .widget_nav_menu a:focus { color: var( --hc-orange ); } /* ========================================================================== 16. Areas We Cover — UK county map Inline SVG of GB local-authority boundaries. North West England counties (construction service area) are highlighted in the brand orange; the rest of Great Britain sits in a quieter concrete tone to represent UK-wide architectural design coverage. ========================================================================== */ .hc-areas-intro { max-width: 760px; } .hc-map-layout { display: grid; grid-template-columns: minmax( 0, 1.3fr ) minmax( 240px, 0.7fr ); gap: 2.5rem; align-items: start; } @media ( max-width: 782px ) { .hc-map-layout { grid-template-columns: 1fr; } } .hc-map-figure { position: relative; background: #ffffff; border: 1px solid var( --hc-line ); border-radius: 12px; padding: 1.25rem; } .hc-map-svg { display: block; width: 100%; height: auto; } .hc-county { fill: #dfe4ea; stroke: #ffffff; stroke-width: 0.6; transition: fill 0.15s ease; cursor: pointer; } .hc-county:hover, .hc-county:focus-visible { fill: #c3cbd8; outline: none; } .hc-county--nw { fill: var( --hc-orange ); } .hc-county--nw:hover, .hc-county--nw:focus-visible { fill: var( --hc-orange-dark ); } .hc-map-jumplinks { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .hc-map-jumplinks a { display: inline-block; background: #ffffff; border: 1px solid var( --hc-line ); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.78rem; font-weight: 600; color: var( --hc-navy ); text-decoration: none; } .hc-map-jumplinks a:hover { border-color: var( --hc-orange ); color: var( --hc-orange ); } .hc-county-sections { scroll-margin-top: 90px; } .hc-county-section { max-width: 900px; margin: 0 auto 2.5rem; padding: 1.5rem; border-radius: 12px; scroll-margin-top: 90px; transition: background 0.4s ease, box-shadow 0.4s ease; } .hc-county-section:last-child { margin-bottom: 0; } .hc-county-section h3 { margin: 0 0 0.9rem; font-size: 1.15rem; } .hc-county-section.is-highlighted { background: #fdf0e0; box-shadow: 0 0 0 2px var( --hc-orange ) inset; } #architectural-design { scroll-margin-top: 90px; transition: box-shadow 0.4s ease; } #architectural-design.is-highlighted { box-shadow: 0 0 0 2px var( --hc-orange ) inset; } .hc-map-county-list a { color: var( --hc-navy ); text-decoration: none; } .hc-map-county-list a:hover { color: var( --hc-orange ); } .hc-map-tooltip { position: absolute; top: 0.75rem; left: 0.75rem; margin: 0; padding: 0.35rem 0.7rem; background: var( --hc-navy ); color: #ffffff; font-size: 0.8rem; font-weight: 600; border-radius: 6px; pointer-events: none; opacity: 0; transform: translateY( -4px ); transition: opacity 0.12s ease, transform 0.12s ease; } .hc-map-tooltip.is-visible { opacity: 1; transform: translateY( 0 ); } .hc-map-key { display: flex; flex-direction: column; gap: 1.75rem; } .hc-map-key-item { display: flex; gap: 0.9rem; } .hc-map-swatch { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; margin-top: 0.2rem; } .hc-map-swatch--nw { background: var( --hc-orange ); } .hc-map-swatch--uk { background: #dfe4ea; border: 1px solid var( --hc-line ); } .hc-map-key-item h3 { margin: 0 0 0.3rem; font-size: 1.05rem; } .hc-map-key-item p { margin: 0 0 0.5rem; color: var( --hc-concrete-dark ); font-size: 0.92rem; } .hc-map-county-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .hc-map-county-list li { background: var( --hc-concrete ); border: 1px solid var( --hc-line ); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.78rem; font-weight: 600; color: var( --hc-navy ); } /* ========================================================================== Design Region towns/cities search (single-hive_design_region.php) ========================================================================== */ .hc-region-towns { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var( --hc-line ); } .hc-region-towns h2 { margin: 0 0 1rem; font-size: 1.3rem; } .hc-town-search-wrap { position: relative; max-width: 420px; margin-bottom: 1.25rem; } .hc-town-search-input { width: 100%; padding: 0.65rem 1rem; font-size: 0.95rem; border: 1px solid var( --hc-line ); border-radius: 8px; background: #ffffff; color: var( --hc-navy ); } .hc-town-search-input:focus { outline: none; border-color: var( --hc-orange ); box-shadow: 0 0 0 3px rgba( 232, 137, 28, 0.15 ); } .hc-town-search-count { margin: 0.4rem 0 0; font-size: 0.78rem; color: var( --hc-concrete-dark ); } .hc-town-search-list li { transition: opacity 0.15s ease; } /* ========================================================================== 13. "Book a Free Consultation Call" wizard ========================================================================== */ .hc-cta-band-buttons { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; } .button--outline { background: transparent; border: 2px solid var( --hc-navy ); color: var( --hc-navy ); } .button--outline:hover { background: var( --hc-navy ); color: #ffffff; } .hc-booking-phone-alt { margin-top: 1rem; font-size: 0.95rem; color: var( --hc-concrete-dark ); } .hc-booking-phone-alt a { font-weight: 700; color: var( --hc-navy ); margin-left: 0.3rem; } .hc-booking-notice { max-width: 640px; margin: 0 auto 2rem; padding: 1.25rem 1.5rem; border-radius: 10px; text-align: left; } .hc-booking-notice strong { display: block; margin-bottom: 0.3rem; font-size: 1.05rem; } .hc-booking-notice p { margin: 0; } .hc-booking-notice--success { background: #eaf6ec; border: 1px solid #b9dfc0; color: #1e5c2a; } .hc-booking-notice--error { background: #fdecec; border: 1px solid #f2c1c1; color: #7a1f1f; } .hc-booking-wizard { max-width: 720px; margin: 0 auto; text-align: left; } /* Honeypot field: hidden from sighted users but still present/tabbable to real browsers rendering the DOM, which is exactly what should trip up a bot filling every field blindly. */ .hc-booking-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .hc-wizard-progress { position: relative; background: var( --hc-line ); border-radius: 999px; height: 8px; margin-bottom: 0.6rem; overflow: hidden; } .hc-wizard-progress-bar { background: var( --hc-orange ); height: 100%; width: 0; transition: width 0.25s ease; } .hc-wizard-progress-text { display: block; font-size: 0.8rem; font-weight: 600; color: var( --hc-concrete-dark ); margin-bottom: 2rem; } /* Without JS, every step is stacked and visible so the form still works end to end; booking-wizard.js adds .hc-wizard--js and only then do the is-active rules below take effect. */ .hc-wizard--js .hc-wizard-step { display: none; } .hc-wizard--js .hc-wizard-step.is-active { display: block; } .hc-wizard-step-title { font-size: 1.3rem; margin: 0 0 1.5rem; } .hc-wizard-step-title:focus { outline: none; } .hc-wizard-card-grid { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 0.85rem; margin-bottom: 2rem; } .hc-wizard-card-grid--property, .hc-wizard-card-grid--timeline, .hc-wizard-card-grid--services { grid-template-columns: repeat( 2, 1fr ); } .hc-wizard-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; background: #ffffff; border: 2px solid var( --hc-line ); border-radius: 10px; padding: 1.1rem 0.75rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .hc-wizard-card--compact { padding: 0.85rem 0.5rem; } .hc-wizard-card--wide { flex-direction: row; justify-content: flex-start; text-align: left; } .hc-wizard-card input { position: absolute; opacity: 0; width: 1px; height: 1px; } .hc-wizard-card-icon { color: var( --hc-navy ); } .hc-wizard-card-label { font-weight: 600; color: var( --hc-navy ); font-size: 0.92rem; } .hc-wizard-card:hover { border-color: var( --hc-orange ); } .hc-wizard-card:has( input:checked ) { border-color: var( --hc-orange ); background: rgba( 232, 137, 28, 0.08 ); } .hc-wizard-card:has( input:focus-visible ) { outline: 2px solid var( --hc-orange ); outline-offset: 2px; } .hc-wizard-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-bottom: 1.25rem; } .hc-wizard-field--wide { grid-column: 1 / -1; } .hc-wizard-field label { display: block; font-weight: 600; font-size: 0.85rem; color: var( --hc-navy ); margin-bottom: 0.35rem; } .hc-wizard-field input, .hc-wizard-field select, .hc-wizard-field textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var( --hc-line ); border-radius: 8px; font-size: 0.95rem; font-family: inherit; background: #ffffff; color: var( --hc-navy ); } .hc-wizard-field input:focus, .hc-wizard-field select:focus, .hc-wizard-field textarea:focus { outline: none; border-color: var( --hc-orange ); box-shadow: 0 0 0 3px rgba( 232, 137, 28, 0.15 ); } .hc-wizard-checkbox { font-size: 0.88rem; margin-bottom: 0.6rem; } .hc-wizard-checkbox label { display: flex; align-items: flex-start; gap: 0.5rem; } .hc-wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var( --hc-line ); } .hc-wizard-btn--next, .hc-wizard-btn--submit { margin-left: auto; } @media ( max-width: 600px ) { .hc-wizard-card-grid, .hc-wizard-card-grid--property, .hc-wizard-card-grid--timeline, .hc-wizard-card-grid--services { grid-template-columns: repeat( 2, 1fr ); } .hc-wizard-fields { grid-template-columns: 1fr; } }