/* ========================================================================== HIVE — Kadence child theme Design tokens, the service colour pathway, and section styles. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts Self-hosted. Drop the woff2 files into assets/fonts/ (see README). font-display:swap so text paints immediately — Core Web Vitals. -------------------------------------------------------------------------- */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/plus-jakarta-sans-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Sen'; src: url('../fonts/sen-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Sen'; src: url('../fonts/sen-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { /* Service colours. One per product — see the pathway rules below. */ --hive-websites: #D8469B; --hive-boost: #F5A20A; --hive-ipacks: #91CD00; --hive-sky: #31C4F3; /* Ink to sit ON each accent. Picked for contrast, not for taste: the accents are light enough that white text on them fails WCAG AA. */ --hive-on-websites: #2A0A1E; --hive-on-boost: #241703; --hive-on-ipacks: #172200; /* Surfaces, darkest to lightest */ --hive-base: #050505; --hive-surface-alt: #0A0B0D; --hive-surface: #0E1014; --hive-line: #1C2026; --hive-line-soft: #16181C; /* Type */ --hive-white: #FFFFFF; --hive-muted: #9AA0A8; --hive-body: #8F959D; --hive-quiet: #6E747C; --hive-faint: #4A5059; --hive-ink: #221E20; --hive-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --hive-sans: 'Sen', system-ui, -apple-system, 'Segoe UI', sans-serif; --hive-radius-pill: 60px; --hive-section-y: clamp(64px, 8vw, 96px); --hive-gutter: clamp(20px, 5vw, 40px); /* Default accent. Overridden per pathway. */ --hive-accent: var(--hive-websites); --hive-on-accent: var(--hive-on-websites); } /* -------------------------------------------------------------------------- 3. The service colour pathway Every page belongs to one product and takes that product's accent. Set by the body class from functions.php. Sections never hardcode a colour — they use var(--hive-accent), so a page moved from one product to another recolours itself and cannot end up half amber and half pink. The umbrella home page is the one exception: it carries all of them, which is what the multicolour chevron logo is for. -------------------------------------------------------------------------- */ .hive-pathway-websites { --hive-accent: var(--hive-websites); --hive-on-accent: var(--hive-on-websites); } .hive-pathway-boost { --hive-accent: var(--hive-boost); --hive-on-accent: var(--hive-on-boost); } .hive-pathway-ipacks { --hive-accent: var(--hive-ipacks); --hive-on-accent: var(--hive-on-ipacks); } .hive-pathway-umbrella { --hive-accent: var(--hive-sky); --hive-on-accent: var(--hive-base); } /* -------------------------------------------------------------------------- 4. Base -------------------------------------------------------------------------- */ body { background: var(--hive-base); color: var(--hive-white); font-family: var(--hive-sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .hive-display { font-family: var(--hive-display); } /* Kadence sets its own container width; align it with the design. */ .content-container, .site-container, .entry-content > .alignwide { max-width: 1280px; } /* -------------------------------------------------------------------------- 5. Sections Every section pattern is a
with a modifier for its background. Vertical rhythm is the same everywhere so pages compose without anyone having to think about spacing. -------------------------------------------------------------------------- */ .hive-section { padding-block: var(--hive-section-y); } .hive-section__inner { max-width: 1280px; margin-inline: auto; padding-inline: var(--hive-gutter); } .hive-section--base { background: var(--hive-base); } .hive-section--alt { background: var(--hive-surface-alt); border-top: 1px solid var(--hive-line-soft); } .hive-section--accent { background: var(--hive-accent); color: var(--hive-on-accent); } .hive-section--accent h1, .hive-section--accent h2, .hive-section--accent h3, .hive-section--accent p { color: var(--hive-on-accent); } /* One accent band per page. More than one and the colour stops meaning anything — it is there to carry the single strongest argument. */ .hive-section__lede { font-size: 1.125rem; line-height: 1.7; color: var(--hive-muted); max-width: 42rem; margin: 0 0 3rem; } .hive-section--accent .hive-section__lede { color: var(--hive-on-accent); max-width: 36rem; } /* -------------------------------------------------------------------------- 6. Cards and grids -------------------------------------------------------------------------- */ .hive-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .hive-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; } @media (max-width: 900px) { .hive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .hive-grid, .hive-grid--2 { grid-template-columns: 1fr; } } .hive-card { background: var(--hive-surface); border: 1px solid var(--hive-line); padding: 30px; } .hive-card__title { font-family: var(--hive-display); font-size: 1.125rem; font-weight: 700; color: var(--hive-white); margin: 0 0 0.75rem; } .hive-card__body { font-size: 0.9375rem; line-height: 1.75; color: var(--hive-body); margin: 0; } /* Service card — the variant with an icon and a "find out more" link. */ .hive-card--service { display: flex; flex-direction: column; padding: 32px 30px 28px; } .hive-card--service .hive-card__icon { margin-bottom: 20px; color: var(--hive-accent); } .hive-card--service .hive-card__icon svg { display: block; } .hive-card--service .hive-card__body { flex: 1 1 auto; margin-bottom: 1.25rem; } .hive-more { font-family: var(--hive-display); font-size: 0.875rem; font-weight: 600; color: var(--hive-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .hive-more:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 7. Portfolio — the browser-chrome frame -------------------------------------------------------------------------- */ .hive-shot { display: block; text-decoration: none; color: inherit; } .hive-shot__frame { border: 1px solid var(--hive-line); background: var(--hive-surface); overflow: hidden; } .hive-shot__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #14171C; border-bottom: 1px solid var(--hive-line); } .hive-shot__dot { width: 9px; height: 9px; border-radius: 50%; background: #2C323A; display: inline-block; } .hive-shot__url { margin-left: 10px; font-family: var(--hive-display); font-size: 0.75rem; color: var(--hive-quiet); } .hive-shot__frame img { display: block; width: 100%; height: auto; } .hive-shot__name { font-family: var(--hive-display); font-size: 1.125rem; font-weight: 700; color: var(--hive-white); margin: 18px 0 7px; } .hive-shot__note { font-size: 0.9375rem; line-height: 1.68; color: var(--hive-body); margin: 0; } /* -------------------------------------------------------------------------- 8. The combined CTA — email field and button in one pill. The signature element. Appears in the hero and the closing band. -------------------------------------------------------------------------- */ .hive-cta { background: #FFFFFF; border-radius: var(--hive-radius-pill); padding: 7px 7px 7px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 480px; } .hive-cta input[type="email"] { flex: 1 1 180px; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--hive-sans); font-size: 1rem; color: #16181D; } .hive-cta input[type="email"]:focus-visible { outline: 2px solid var(--hive-accent); outline-offset: 4px; border-radius: 4px; } .hive-cta button { background: var(--hive-base); color: #FFFFFF; border: none; border-radius: var(--hive-radius-pill); font-family: var(--hive-display); font-size: 1rem; font-weight: 600; padding: 15px 28px; cursor: pointer; white-space: nowrap; } .hive-cta button:hover { background: #1A1D22; } .hive-cta__meta { font-size: 0.875rem; line-height: 1.7; color: var(--hive-quiet); margin: 1rem 0 0; } /* On an accent band the white pill disappears, so invert. */ .hive-section--accent .hive-cta { background: var(--hive-base); } .hive-section--accent .hive-cta input[type="email"] { color: var(--hive-white); } .hive-section--accent .hive-cta input::placeholder { color: var(--hive-quiet); } .hive-section--accent .hive-cta button { background: var(--hive-accent); color: var(--hive-on-accent); } /* -------------------------------------------------------------------------- 9. Hero -------------------------------------------------------------------------- */ .hive-hero { padding-block: clamp(48px, 7vw, 80px) 0; } .hive-hero__inner { max-width: 1280px; margin-inline: auto; padding-inline: var(--hive-gutter); display: flex; flex-wrap: wrap; gap: 60px; align-items: center; } .hive-hero__copy { flex: 1 1 470px; min-width: 0; } .hive-hero__media { flex: 1 1 540px; min-width: 0; } .hive-hero__eyebrow { font-family: var(--hive-display); font-size: 0.9375rem; font-weight: 600; color: var(--hive-accent); margin: 0 0 1rem; } .hive-hero h1 { margin: 0 0 1.375rem; } .hive-hero__lede { font-size: 1.125rem; line-height: 1.7; color: var(--hive-muted); margin: 0 0 2rem; } /* -------------------------------------------------------------------------- 10. Included list — the ticked list inside the accent band -------------------------------------------------------------------------- */ .hive-included { flex: 1 1 340px; min-width: 0; background: var(--hive-on-accent); padding: 32px; } .hive-included__label { font-family: var(--hive-display); font-size: 0.8125rem; font-weight: 700; color: var(--hive-accent); margin-bottom: 18px; } .hive-included ul { list-style: none; margin: 0; padding: 0; } .hive-included li { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--hive-line); font-size: 0.9375rem; line-height: 1.6; color: #C9CDD3; } .hive-included li:last-child { border-bottom: none; color: var(--hive-white); font-weight: 600; } .hive-included li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; background: var(--hive-accent); /* the HIVE chevron */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M6 3l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M6 3l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } /* -------------------------------------------------------------------------- 11. Two-column split used by the accent band and the editorial sections -------------------------------------------------------------------------- */ .hive-split { display: flex; flex-wrap: wrap; gap: 60px; align-items: center; } .hive-split__major { flex: 999 1 500px; min-width: 0; } .hive-split__minor { flex: 1 1 340px; min-width: 0; } /* -------------------------------------------------------------------------- 12. Accessibility -------------------------------------------------------------------------- */ .hive-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--hive-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 13. Kadence chrome — header and footer Kadence renders these outside the block content, so they can't be styled by a pattern. Everything here reads var(--hive-accent), so the header and footer recolour with the page's product pathway like every other section. -------------------------------------------------------------------------- */ .site-header, .site-header-wrap, .site-header-inner-wrap, .site-main-header-wrap, .site-top-header-wrap { background: var(--hive-base); } .site-header { border-bottom: 1px solid var(--hive-line-soft); } .site-title, .site-title a, .site-branding a { font-family: var(--hive-display); font-weight: 800; letter-spacing: -0.02em; color: var(--hive-white); text-decoration: none; } .site-branding a.brand:hover { color: var(--hive-accent); } .header-navigation ul li a, .primary-menu-container ul li a { font-family: var(--hive-display); font-weight: 500; font-size: 0.9375rem; color: var(--hive-white); } .header-navigation ul li a:hover, .header-navigation ul li.current-menu-item > a { color: var(--hive-accent); } /* Give the last nav item the menu class "nav-cta" to turn it into the pill button. */ .header-navigation li.nav-cta > a { background: var(--hive-accent); color: var(--hive-on-accent); border-radius: var(--hive-radius-pill); padding: 12px 24px; font-weight: 700; } .header-navigation li.nav-cta > a:hover { color: var(--hive-on-accent); opacity: .9; } .site-footer, .site-footer-wrap, .site-top-footer-wrap, .site-middle-footer-wrap, .site-bottom-footer-wrap { background: var(--hive-base); color: var(--hive-quiet); } .site-footer { border-top: 1px solid var(--hive-line-soft); } .site-footer a { color: var(--hive-muted); text-decoration: none; } .site-footer a:hover { color: var(--hive-accent); } /* -------------------------------------------------------------------------- 14. Full-bleed sections inside Kadence's content wrapper Kadence constrains and pads .entry-content. Our sections are full-bleed and set their own gutters, so the wrapper has to get out of the way — but only for pattern-built pages, so prose pages keep their measure. -------------------------------------------------------------------------- */ .entry-content > .hive-section, .entry-content > .hive-hero { margin-block: 0; max-width: none; } body.page .site-main { padding-block: 0; } body.page .entry-content, body.page .content-container { max-width: none; padding-inline: 0; } body.page .entry-header { display: none; } body.page .entry-content > :where(.hive-section, .hive-hero) { width: 100%; } /* -------------------------------------------------------------------------- 15. Kadence palette Kadence caches its palette in its own option rather than re-reading theme.json, and it reads the nine slots BY POSITION: 1 accent, 2 accent-2, 3 strongest text, 4 strong text, 5 medium text, 6 light text, 7 subtle background, 8 lighter background, 9 background. Putting a service colour in a text slot is what turned the site title green. The service colours belong in slots 1-2 only; 3-6 are text, 7-9 are surfaces. -------------------------------------------------------------------------- */ :root { --global-palette1: #D8469B; /* accent — websites pink */ --global-palette2: #F5A20A; /* accent 2 — Boost amber */ --global-palette3: #FFFFFF; /* strongest text */ --global-palette4: #E8EAED; /* strong text */ --global-palette5: #9AA0A8; /* medium text */ --global-palette6: #6E747C; /* light text */ --global-palette7: #0E1014; /* subtle background */ --global-palette8: #0A0B0D; /* lighter background */ --global-palette9: #050505; /* background */ --global-palette-highlight: var(--hive-accent); --global-palette-highlight-alt: var(--hive-accent); --global-palette-btn-bg: var(--hive-accent); --global-palette-btn: var(--hive-on-accent); --global-content-width: 1280px; } /* The accent slot follows the page's product pathway, so the header, buttons and links recolour with the rest of the page. */ .hive-pathway-websites { --global-palette1: #D8469B; } .hive-pathway-boost { --global-palette1: #F5A20A; } .hive-pathway-ipacks { --global-palette1: #91CD00; } .hive-pathway-umbrella { --global-palette1: #31C4F3; } body { background: var(--hive-base); } /* -------------------------------------------------------------------------- 16. Beating Kadence's inline customiser CSS Kadence prints customiser styles inline in , after this stylesheet, using #masthead and #colophon. An ID beats a class whatever the order, so these rules have to match that specificity rather than rely on cascade. Set the same values in the customiser eventually and these become harmless. -------------------------------------------------------------------------- */ #masthead, #masthead .site-header-row-container, #masthead .site-header-upper-wrap, #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) { background: var(--hive-base); } #masthead { border-bottom: 1px solid var(--hive-line-soft); } #colophon, #colophon .site-footer-row-container, #colophon .site-middle-footer-wrap, #colophon .site-bottom-footer-wrap { background: var(--hive-base); } /* Dropdowns default to white cards. */ .header-navigation ul ul.sub-menu, .header-navigation ul ul.submenu { background: var(--hive-surface); border: 1px solid var(--hive-line); box-shadow: 0 18px 40px rgba(0,0,0,.5); } .header-navigation ul ul.sub-menu a, .header-navigation ul ul.submenu a { color: var(--hive-muted); } .header-navigation ul ul.sub-menu a:hover, .header-navigation ul ul.submenu a:hover { color: var(--hive-accent); } /* Kadence's own button class, used by its header CTA and any block buttons. */ .kb-button, .button, button.button, .wp-block-button__link { background: var(--hive-accent); color: var(--hive-on-accent); border-radius: var(--hive-radius-pill); font-family: var(--hive-display); font-weight: 600; } /* -------------------------------------------------------------------------- 17. Logo lockup The real HIVE artwork lifted from the live site, drawn as two mask layers: the chevrons take var(--hive-accent) so they recolour with the product pathway, and the wordmark is painted white over them. Each product has its OWN lockup, not just its own colour — the wordmark artwork differs — so each pathway sets its own --hive-logo-wordmark. -------------------------------------------------------------------------- */ :root { --hive-logo-chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 816.1 403.3'%3E%3Cpath d='M307.4,173.2l-122.9-29.8L173.3,124l128.6,31.1l83.4-90.7l0.1,24L307.4,173.2z%20M386.9,149.1l-0.1-24l-72,78.4%20l-98.8-23.9l11.2,19.5l93.1,22.5L386.9,149.1z%20M399.9,197.4l0-24l-72,78.4L229,227.9l11.2,19.5l93.1,22.5L399.9,197.4z'/%3E%3C/svg%3E"); --hive-logo-ratio: 2.02; } .site-title { margin: 0; } /* Until a pathway supplies a wordmark, the site name stays as readable text. */ .hive-pathway-websites .site-branding a.brand, .hive-pathway-boost .site-branding a.brand, .hive-pathway-umbrella .site-branding a.brand { position: relative; display: block; width: 104px; height: 52px; font-size: 0; line-height: 0; color: transparent; background-color: var(--hive-accent); -webkit-mask: var(--hive-logo-chevrons) left center / contain no-repeat; mask: var(--hive-logo-chevrons) left center / contain no-repeat; } .hive-pathway-websites .site-branding a.brand::after, .hive-pathway-boost .site-branding a.brand::after, .hive-pathway-umbrella .site-branding a.brand::after { content: ''; position: absolute; inset: 0; background-color: var(--hive-white); -webkit-mask: var(--hive-logo-wordmark) left center / contain no-repeat; mask: var(--hive-logo-wordmark) left center / contain no-repeat; } .site-branding a.brand:hover { opacity: .85; } /* Websites — the "hive web design" lockup. */ .hive-pathway-websites { --hive-logo-wordmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 816.1 403.3'%3E%3Cpath d='M598.1,45.5L559.7,243l-14,3.8L413.6,94.9l17.5-4.7l115.8,133.1l33.7-173.2L598.1,45.5z%20M811.9,158.6l-138.1,37%20L655.7,128l130.6-35l-4.2-15.7l-130.6,35l-16.1-59.9l136.7-36.6L767.9,0L615.5,40.8l46.8,174.7l153.8-41.2L811.9,158.6z%20M167.6,160.8l-15.7,4.2l20.3,75.6L36,277.2l-20.3-75.6L0,205.7l46.8,174.7l15.7-4.2l-22.3-83.3l136.2-36.5l22.3,83.3l15.7-4.2%20L167.6,160.8z%20M229.3,392.2l-2.9,7.3l-6.2-16.2h-3.4l8.2,19.9h2.7l3.7-8.9l3.7,8.9h2.7l8.2-19.9h-3.4l-6.2,16.2l-3-7.3l3.4-8.8h-3%20l-2.5,6.7l-2.4-6.7h-2.9L229.3,392.2z%20M262,400.3v-6.1h8.9v-2.6H262V386h10.2v-2.8h-13.4v19.9h13.6v-2.8H262z%20M301.1,394.8%20c-0.7-0.9-1.6-1.5-2.7-1.8c0.9-0.4,1.6-1,2.1-1.9c0.5-0.8,0.7-1.8,0.7-2.7c0-0.6-0.1-1.2-0.3-1.8c-0.2-0.6-0.5-1.1-0.9-1.6%20c-0.4-0.5-0.9-0.9-1.4-1.2c-0.6-0.3-1.2-0.4-1.9-0.4h-10.2v19.9h9.5c0.8,0,1.6-0.1,2.4-0.3s1.4-0.6,1.9-1c0.6-0.4,1-1,1.3-1.6%20c0.3-0.6,0.5-1.4,0.5-2.2C302.1,396.7,301.7,395.7,301.1,394.8z%20M295.5,386c0.7,0,1.4,0.3,1.8,0.8c0.5,0.6,0.7,1.3,0.7,2.1%20c0,0.4-0.1,0.8-0.2,1.2c-0.1,0.4-0.3,0.7-0.6,0.9s-0.5,0.5-0.9,0.6c-0.3,0.1-0.7,0.2-1.1,0.2h-5.8V386H295.5z%20M298.6,398.6%20c-0.1,0.4-0.4,0.7-0.6,1c-0.3,0.3-0.6,0.5-0.9,0.6c-0.4,0.2-0.7,0.2-1.1,0.2h-6.4v-6.1h6.6c0.4,0,0.8,0.1,1.1,0.3s0.6,0.4,0.9,0.7%20c0.2,0.3,0.4,0.6,0.6,1s0.2,0.8,0.2,1.2C298.8,397.8,298.8,398.2,298.6,398.6z%20M329.2,385.3c-0.9-0.6-1.9-1.2-3-1.6%20c-1.1-0.4-2.4-0.6-3.8-0.6c-1,0-2,0.1-2.8,0.4s-1.6,0.6-2.3,1.2s-1.1,1.1-1.5,1.9c-0.4,0.8-0.5,1.6-0.5,2.6c0,0.8,0.1,1.5,0.4,2%20s0.6,1,1.1,1.4c0.5,0.4,1.1,0.8,1.8,1.1c0.7,0.3,1.6,0.6,2.6,0.8c0.9,0.2,1.6,0.4,2.3,0.6c0.7,0.2,1.2,0.4,1.7,0.7%20c0.5,0.3,0.8,0.5,1.1,0.9c0.2,0.3,0.4,0.8,0.4,1.3c0,0.8-0.3,1.5-1,1.9c-0.7,0.4-1.6,0.7-2.8,0.7c-0.8,0-1.5-0.1-2.3-0.3%20c-0.7-0.2-1.4-0.4-2-0.6c-0.6-0.3-1.1-0.5-1.6-0.8c-0.4-0.3-0.8-0.6-1-0.8l-1.5,2.7c1.1,0.9,2.4,1.5,3.8,2c1.4,0.5,2.9,0.7,4.4,0.7%20c1,0,1.9-0.1,2.8-0.3c0.9-0.2,1.6-0.6,2.3-1c0.7-0.5,1.2-1,1.6-1.8c0.4-0.7,0.6-1.6,0.6-2.7c0-0.9-0.2-1.7-0.5-2.3s-0.8-1.1-1.3-1.6%20s-1.3-0.8-2.1-1c-0.8-0.3-1.7-0.6-2.7-0.8c-0.8-0.2-1.5-0.4-2.2-0.6c-0.6-0.2-1.1-0.4-1.5-0.6c-0.4-0.2-0.7-0.5-0.9-0.8%20c-0.2-0.3-0.3-0.7-0.3-1.2c0-0.9,0.3-1.6,1-2c0.6-0.5,1.6-0.7,2.8-0.7c0.7,0,1.3,0.1,1.8,0.2c0.6,0.1,1.1,0.3,1.6,0.5%20c0.5,0.2,0.9,0.4,1.2,0.7c0.4,0.2,0.6,0.5,0.8,0.7L329.2,385.3z%20M346.9,403.1v-19.9h-3.1v19.9H346.9z%20M376.6,383.2h-16.4v2.8h6.6%20v17.1h3.1V386h6.6V383.2z%20M393.1,400.3v-6.1h8.9v-2.6h-8.9V386h10.2v-2.8h-13.4v19.9h13.6v-2.8H393.1z%20M442.1,403.1%20c1.5,0,2.8-0.2,4-0.7c1.2-0.5,2.2-1.1,3.1-2c0.8-0.9,1.5-1.9,1.9-3.1c0.5-1.2,0.7-2.6,0.7-4.1c0-1.4-0.2-2.6-0.6-3.9%20c-0.4-1.2-1-2.3-1.8-3.1c-0.8-0.9-1.8-1.6-3-2.1c-1.2-0.5-2.6-0.8-4.2-0.8H435v19.9H442.1z%20M448.1,396c-0.3,0.9-0.7,1.6-1.2,2.3%20c-0.6,0.6-1.2,1.1-2,1.5c-0.8,0.4-1.7,0.5-2.8,0.5h-3.9V386h3.9c1,0,1.9,0.2,2.7,0.5c0.8,0.4,1.5,0.8,2,1.5c0.6,0.6,1,1.4,1.3,2.3%20c0.3,0.9,0.4,1.8,0.4,2.9C448.6,394.2,448.4,395.1,448.1,396z%20M468.9,400.3v-6.1h8.9v-2.6h-8.9V386h10.2v-2.8h-13.4v19.9h13.6v-2.8%20H468.9z%20M506.3,385.3c-0.9-0.6-1.9-1.2-3-1.6c-1.1-0.4-2.4-0.6-3.8-0.6c-1,0-2,0.1-2.8,0.4c-0.9,0.3-1.6,0.6-2.3,1.2%20c-0.6,0.5-1.1,1.1-1.5,1.9c-0.4,0.8-0.5,1.6-0.5,2.6c0,0.8,0.1,1.5,0.4,2s0.6,1,1.1,1.4c0.5,0.4,1.1,0.8,1.8,1.1%20c0.7,0.3,1.6,0.6,2.6,0.8c0.9,0.2,1.6,0.4,2.3,0.6c0.7,0.2,1.2,0.4,1.7,0.7c0.5,0.3,0.8,0.5,1.1,0.9c0.2,0.3,0.4,0.8,0.4,1.3%20c0,0.8-0.3,1.5-1,1.9c-0.7,0.4-1.6,0.7-2.8,0.7c-0.8,0-1.5-0.1-2.3-0.3c-0.7-0.2-1.4-0.4-2-0.6c-0.6-0.3-1.1-0.5-1.6-0.8%20c-0.4-0.3-0.8-0.6-1-0.8l-1.5,2.7c1.1,0.9,2.4,1.5,3.8,2c1.4,0.5,2.9,0.7,4.4,0.7c1,0,1.9-0.1,2.8-0.3c0.9-0.2,1.6-0.6,2.3-1%20c0.7-0.5,1.2-1,1.6-1.8c0.4-0.7,0.6-1.6,0.6-2.7c0-0.9-0.2-1.7-0.5-2.3s-0.8-1.1-1.3-1.6s-1.3-0.8-2.1-1c-0.8-0.3-1.7-0.6-2.7-0.8%20c-0.8-0.2-1.5-0.4-2.2-0.6c-0.6-0.2-1.1-0.4-1.5-0.6s-0.7-0.5-0.9-0.8c-0.2-0.3-0.3-0.7-0.3-1.2c0-0.9,0.3-1.6,1-2%20c0.6-0.5,1.6-0.7,2.8-0.7c0.7,0,1.3,0.1,1.8,0.2c0.6,0.1,1.1,0.3,1.6,0.5c0.5,0.2,0.9,0.4,1.2,0.7c0.4,0.2,0.6,0.5,0.8,0.7%20L506.3,385.3z%20M524,403.1v-19.9h-3.1v19.9H524z%20M552.8,403.1h2.6v-10.1h-6.8v2.3h4.2v2.1c-1.6,2-3.4,2.9-5.4,2.9%20c-0.9,0-1.7-0.2-2.5-0.6s-1.4-0.9-2-1.6c-0.6-0.7-1-1.4-1.3-2.3c-0.3-0.9-0.5-1.8-0.5-2.8c0-1,0.1-1.9,0.4-2.7%20c0.3-0.9,0.7-1.6,1.2-2.3c0.5-0.7,1.2-1.2,1.9-1.6c0.7-0.4,1.6-0.6,2.5-0.6c1.1,0,2.1,0.3,3.1,0.8c0.9,0.5,1.7,1.4,2.2,2.4l2.4-1.7%20c-0.7-1.3-1.6-2.4-2.9-3.2c-1.3-0.8-2.8-1.2-4.7-1.2c-1.3,0-2.6,0.3-3.7,0.8c-1.1,0.5-2.1,1.3-3,2.2c-0.8,0.9-1.5,2-2,3.2%20c-0.5,1.2-0.7,2.5-0.7,3.8c0,1.3,0.2,2.6,0.7,3.8c0.5,1.2,1.1,2.3,2,3.2c0.8,0.9,1.8,1.7,2.9,2.3c1.1,0.6,2.3,0.9,3.6,0.9%20c2.2,0,4.1-0.9,5.7-2.6V403.1z%20M584.1,403.1h2.6v-19.9h-3.2v14.3l-11.4-14.3h-2.5v19.9h3.1v-14L584.1,403.1z'/%3E%3C/svg%3E"); } /* Kadence nests the name in p.site-title inside a.brand; the mask lives on the link. */ .hive-pathway-websites .site-title, .hive-pathway-boost .site-title, .hive-pathway-umbrella .site-title { font-size:0; line-height:0; color:transparent; } /* -------------------------------------------------------------------------- 18. Logo lockup fix A mask on an element also clips its pseudo-elements, so masking the link itself ate the wordmark layer. Both layers are pseudo-elements instead, on an unmasked link. -------------------------------------------------------------------------- */ .hive-pathway-websites .site-branding a.brand, .hive-pathway-boost .site-branding a.brand, .hive-pathway-umbrella .site-branding a.brand { position: relative; display: block; width: 112px; height: 56px; background: none; -webkit-mask: none; mask: none; } .hive-pathway-websites .site-branding a.brand::before, .hive-pathway-boost .site-branding a.brand::before, .hive-pathway-umbrella .site-branding a.brand::before { content: ''; position: absolute; inset: 0; background-color: var(--hive-accent); -webkit-mask: var(--hive-logo-chevrons) left center / contain no-repeat; mask: var(--hive-logo-chevrons) left center / contain no-repeat; } .hive-pathway-websites .site-branding a.brand::after, .hive-pathway-boost .site-branding a.brand::after, .hive-pathway-umbrella .site-branding a.brand::after { content: ''; position: absolute; inset: 0; background-color: var(--hive-white); -webkit-mask: var(--hive-logo-wordmark) left center / contain no-repeat; mask: var(--hive-logo-wordmark) left center / contain no-repeat; } /* -------------------------------------------------------------------------- 19. Boost lockup A different lockup, not just a different colour: its own wordmark ("hive boost") and its own viewBox, so the chevrons are redefined here too rather than inherited from the websites artwork. -------------------------------------------------------------------------- */ .hive-pathway-boost { --hive-logo-chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1905.1 976.6'%3E%3Cpath d='M734.9,425.3L448,355.8l-26.1-45.5L722.1,383L888,202.5l-49.8,0.3l76.7-29.5l1.9-2l0,1.3l26.3-10.1l-18.8,109.6l-8.2-43.8L734.9,425.3z%20M920.6,369l-0.1-56.1L752.3,495.9l-230.5-55.8l26.1,45.5l217.3,52.6L920.6,369z%20M981,538.6l-168.2,183l-230.6-55.8l26.1,45.5l217.3,52.6L981,594.7L981,538.6z%20M950.8,481.9l-0.1-56.1l-168.2,183L552,552.9l26.1,45.5L795.4,651L950.8,481.9z'/%3E%3C/svg%3E"); --hive-logo-wordmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1905.1 976.6'%3E%3Cpath d='M601.9,916.7c5.5-2.5,9.6-6.1,12.3-10.9c2.7-4.8,4.1-10,4.1-15.4c0-3.6-0.6-7.2-1.8-10.7c-1.2-3.5-3-6.6-5.2-9.3c-2.3-2.7-5-5-8.2-6.7c-3.2-1.7-6.8-2.6-10.8-2.6h-63.5v114.2h55.6c5.3,0,10.2-0.6,15-1.8c4.7-1.2,8.8-3.1,12.4-5.5c3.5-2.4,6.3-5.4,8.4-9.1c2-3.6,3.1-7.9,3.1-12.9c0-7.7-1.9-14-5.7-19C613.6,922.1,608.5,918.7,601.9,916.7z%20M555.1,883.6H582c2.8,0,5.2,1,7.2,3.1c2,2,3,4.9,3,8.7c0,4.1-1.1,7.1-3.4,9c-2.3,1.9-4.8,2.9-7.7,2.9h-25.9V883.6z%20M592.9,949.5c-2.3,2.2-5.1,3.4-8.5,3.4h-29.3V928h30.4c3.1,0,5.7,1.2,7.7,3.7c2,2.5,3.1,5.5,3.1,9C596.3,944.3,595.2,947.3,592.9,949.5z%20M794.6,878.6c-4.9-5.5-10.9-9.9-17.8-13.2c-7-3.3-14.7-5-23.2-5c-8.3,0-15.9,1.6-22.8,4.7c-7,3.2-13,7.4-18.1,12.7c-5.1,5.3-9.1,11.4-11.9,18.4c-2.8,7-4.3,14.2-4.3,21.7c0,7.4,1.4,14.6,4.1,21.5c2.7,7,6.6,13.2,11.5,18.6c4.9,5.4,10.9,9.8,17.8,13.1c7,3.3,14.7,5,23.2,5c8.3,0,15.9-1.6,22.8-4.8c7-3.2,13-7.5,18-12.8c5-5.3,9-11.4,11.8-18.4c2.8-7,4.3-14.2,4.3-21.7c0-7.2-1.3-14.3-4-21.2C803.3,890.3,799.5,884.1,794.6,878.6z%20M781.3,930.6c-1.2,4.1-3.1,7.8-5.5,11.1c-2.5,3.3-5.6,5.9-9.3,8c-3.8,2-8.1,3.1-13.2,3.1c-4.8,0-9.1-1-12.9-2.9c-3.8-1.9-6.9-4.5-9.4-7.7c-2.5-3.2-4.4-6.9-5.7-11c-1.3-4.1-1.9-8.4-1.9-12.8c0-4.3,0.6-8.5,1.8-12.6c1.2-4.1,3.1-7.8,5.6-11c2.5-3.2,5.6-5.8,9.3-7.8c3.7-2,8.1-3,13.1-3c4.8,0,9.1,0.9,12.8,2.8c3.7,1.9,6.8,4.4,9.4,7.6c2.6,3.2,4.5,6.8,5.8,10.9c1.3,4.1,1.9,8.4,1.9,12.8C783.1,922.3,782.5,926.5,781.3,930.6z%20M981.1,878.6c-4.9-5.5-10.9-9.9-17.8-13.2c-7-3.3-14.7-5-23.2-5c-8.3,0-15.9,1.6-22.8,4.7c-7,3.2-13,7.4-18.1,12.7c-5.1,5.3-9.1,11.4-11.9,18.4c-2.8,7-4.3,14.2-4.3,21.7c0,7.4,1.4,14.6,4.1,21.5c2.7,7,6.6,13.2,11.5,18.6c4.9,5.4,10.9,9.8,17.8,13.1c7,3.3,14.7,5,23.2,5c8.3,0,15.9-1.6,22.8-4.8c7-3.2,13-7.5,18-12.8c5-5.3,9-11.4,11.8-18.4c2.8-7,4.3-14.2,4.3-21.7c0-7.2-1.3-14.3-4-21.2C989.8,890.3,986,884.1,981.1,878.6z%20M967.8,930.6c-1.2,4.1-3.1,7.8-5.5,11.1c-2.5,3.3-5.6,5.9-9.3,8c-3.8,2-8.1,3.1-13.2,3.1c-4.8,0-9.1-1-12.9-2.9c-3.8-1.9-6.9-4.5-9.4-7.7c-2.5-3.2-4.4-6.9-5.7-11c-1.3-4.1-1.9-8.4-1.9-12.8c0-4.3,0.6-8.5,1.8-12.6c1.2-4.1,3.1-7.8,5.6-11c2.5-3.2,5.6-5.8,9.3-7.8c3.7-2,8.1-3,13.1-3c4.8,0,9.1,0.9,12.8,2.8c3.7,1.9,6.8,4.4,9.4,7.6c2.6,3.2,4.5,6.8,5.8,10.9c1.3,4.1,1.9,8.4,1.9,12.8C969.7,922.3,969.1,926.5,967.8,930.6z%20M1157.1,928.2c1.7,3.8,2.5,8.3,2.5,13.5c0,6.4-1.2,11.9-3.6,16.3c-2.4,4.4-5.6,8-9.6,10.8c-4,2.7-8.5,4.7-13.7,5.9c-5.1,1.2-10.5,1.8-15.9,1.8c-4.2,0-8.5-0.3-12.9-1c-4.4-0.6-8.7-1.6-12.9-2.8c-4.2-1.2-8.2-2.7-12.1-4.4c-3.9-1.7-7.5-3.7-10.9-5.9l11.6-23c0.4,0.5,1.8,1.6,4.2,3.1c2.4,1.5,5.3,3,8.8,4.5c3.5,1.5,7.4,2.8,11.7,4c4.3,1.2,8.6,1.8,13,1.8c9.3,0,14-2.8,14-8.5c0-2.1-0.7-3.9-2.1-5.3c-1.4-1.4-3.3-2.7-5.8-3.8c-2.5-1.1-5.4-2.2-8.8-3.1c-3.4-1-7-2-11-3.2c-5.3-1.6-9.8-3.3-13.7-5.2c-3.9-1.9-7-4-9.6-6.5c-2.5-2.5-4.4-5.3-5.6-8.5c-1.2-3.2-1.8-7-1.8-11.3c0-6,1.1-11.3,3.4-15.9c2.3-4.6,5.3-8.5,9.2-11.7c3.9-3.2,8.3-5.5,13.4-7.2c5.1-1.6,10.5-2.4,16.2-2.4c4,0,7.9,0.4,11.7,1.1c3.9,0.8,7.6,1.7,11.1,2.9c3.5,1.2,6.8,2.5,9.9,4c3.1,1.5,5.9,3,8.4,4.5l-11.6,21.9c-0.3-0.4-1.4-1.2-3.4-2.4c-1.9-1.2-4.3-2.4-7.2-3.7c-2.9-1.3-6.1-2.4-9.5-3.4c-3.4-1-6.9-1.4-10.3-1.4c-9.4,0-14.2,3.2-14.2,9.5c0,1.9,0.5,3.5,1.5,4.8c1,1.3,2.5,2.4,4.5,3.5c2,1,4.5,2,7.5,2.8c3,0.9,6.5,1.8,10.5,2.9c5.5,1.5,10.4,3.1,14.8,4.9c4.4,1.8,8.1,4,11.2,6.6C1153.1,921.2,1155.4,924.4,1157.1,928.2z%20M1229.5,861.1h96v23.2h-34.7v91h-26.4v-91h-34.9V861.1z%20M1355.4,117.1l40.8-10.9l-89.7,461.1l-32.7,8.8L965.5,221.6l40.9-11l270.3,310.8L1355.4,117.1z%20M1905.1,406.9L1546,503.1L1436.8,95.3L1792.5,0l9.9,36.7l-319.1,85.5l37.5,139.9l304.8-81.7l9.9,36.7l-304.8,81.7l42.3,157.7l322.4-86.4L1905.1,406.9z%20M391.3,375.4l109.3,407.8l-36.7,9.9l-52.1-194.5L93.9,683.8L146,878.2l-36.7,9.8L0,480.3l36.7-9.8L84,647.1l317.9-85.2l-47.3-176.6L391.3,375.4z'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 20. Umbrella lockup — home page The only one of the three that is genuinely multicolour: four chevrons in four fixed brand colours. It can't go through the accent mask like the others, so it's a background image and the mask layers are switched off. Converted from the supplied vector artwork; colours are the brand values. -------------------------------------------------------------------------- */ .hive-pathway-umbrella .site-branding a.brand { width: 120px; height: 56px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1943.9 906.2' role='img' aria-label='HIVE Estate Agency Systems'%3E%3Cpath fill='%23FFFFFF' d='M 1828.3 0 L 1465.6 97.2 L 1577 512.9 L 1943 414.8 L 1933 377.3 L 1604.4 465.4 L 1561.3 304.6 L 1872 221.3 L 1862 183.9 L 1551.2 267.2 L 1513 124.6 L 1838.3 37.4 Z M 1382.6 119.4 L 1302.4 531.6 L 1026.8 214.7 L 985.2 225.9 L 1299.5 587.2 L 1332.8 578.3 L 1424.3 108.3 Z M 362.4 392.8 L 410.6 572.8 L 86.5 659.7 L 38.3 479.6 L 0.9 489.6 L 112.2 905.3 L 149.7 895.3 L 96.6 697.1 L 420.6 610.3 L 473.7 808.5 L 511.2 798.4 L 399.8 382.7 Z M 362.4 392.8'/%3E%3Cpath fill='%2391CD00' d='M 983.3 584.9 L 824.9 757.3 L 603.3 703.7 L 576.7 657.3 L 811.8 714.2 L 983.2 527.7 Z M 983.3 584.9'/%3E%3Cpath fill='%23F7A300' d='M 732.4 412.2 L 439.9 341.3 L 413.3 295 L 719.3 369.1 L 917.7 153.2 L 917.9 210.4 Z M 732.4 412.2'/%3E%3Cpath fill='%23D8469B' d='M 763.2 527.2 L 541.7 473.6 L 515.1 427.2 L 750.1 484.1 L 921.5 297.6 L 921.7 354.8 Z M 763.2 527.2'/%3E%3Cpath fill='%2331C4F3' d='M 794 642.2 L 572.5 588.6 L 545.9 542.3 L 780.9 599.2 L 952.4 412.7 L 952.5 469.8 Z M 794 642.2'/%3E%3Cpath fill='%23FFFFFF' d='M 1320.1 904.6 L 1320.1 858.3 L 1329.1 858.3 L 1329.1 880.9 L 1349.2 858.2 L 1358.5 858.2 L 1340.7 878.8 L 1359.6 904.6 L 1350.1 904.6 L 1335.3 883.9 L 1329.1 890.6 L 1329.1 904.6 Z M 1264.7 897 C 1266.8 897 1268.6 896.5 1270.1 895.7 C 1271.5 894.8 1272.7 893.7 1273.6 892.3 C 1274.5 890.9 1275.1 889.3 1275.5 887.5 C 1275.8 885.7 1276 883.8 1276 881.9 L 1276 858.2 L 1285 858.2 L 1285 881.9 C 1285 885.1 1284.6 888.1 1283.8 890.8 C 1283.1 893.6 1281.9 896.1 1280.2 898.1 C 1278.6 900.2 1276.5 901.9 1273.9 903.1 C 1271.4 904.3 1268.3 904.9 1264.7 904.9 C 1261 904.9 1257.9 904.3 1255.3 903 C 1252.7 901.7 1250.6 900 1249 897.9 C 1247.4 895.8 1246.2 893.4 1245.5 890.6 C 1244.8 887.8 1244.4 884.9 1244.4 881.9 L 1244.4 858.2 L 1253.4 858.2 L 1253.4 881.9 C 1253.4 883.8 1253.6 885.7 1254 887.5 C 1254.4 889.3 1255 890.9 1255.9 892.3 C 1256.8 893.7 1257.9 894.9 1259.4 895.7 C 1260.8 896.6 1262.6 897 1264.7 897 M 1204.2 895.2 L 1211.4 895.2 L 1211.4 904.6 L 1204.2 904.6 Z M 1137.8 881.4 C 1137.8 883.4 1138.1 885.4 1138.7 887.2 C 1139.3 889.1 1140.2 890.8 1141.3 892.2 C 1142.4 893.6 1143.7 894.8 1145.3 895.7 C 1147 896.5 1148.8 897 1150.8 897 C 1152.9 897 1154.8 896.5 1156.4 895.6 C 1157.9 894.7 1159.3 893.6 1160.4 892.1 C 1161.5 890.6 1162.3 888.9 1162.9 887.1 C 1163.4 885.2 1163.7 883.3 1163.7 881.4 C 1163.7 879.4 1163.4 877.5 1162.8 875.6 C 1162.2 873.7 1161.3 872.1 1160.2 870.7 C 1159.1 869.2 1157.7 868.1 1156.2 867.2 C 1154.6 866.4 1152.8 866 1150.8 866 C 1148.7 866 1146.8 866.4 1145.2 867.3 C 1143.7 868.2 1142.3 869.4 1141.2 870.8 C 1140.1 872.3 1139.2 873.9 1138.7 875.8 C 1138.1 877.6 1137.8 879.5 1137.8 881.4 M 1150.7 904.9 C 1147.4 904.9 1144.5 904.3 1141.8 902.9 C 1139.1 901.6 1136.7 899.9 1134.8 897.7 C 1132.9 895.5 1131.4 892.9 1130.3 890.1 C 1129.3 887.3 1128.8 884.4 1128.8 881.4 C 1128.8 878.3 1129.3 875.4 1130.4 872.6 C 1131.5 869.7 1133.1 867.2 1135.1 865 C 1137 862.9 1139.4 861.1 1142.1 859.8 C 1144.8 858.6 1147.7 857.9 1150.9 857.9 C 1154.2 857.9 1157.1 858.6 1159.8 860 C 1162.5 861.3 1164.9 863.1 1166.8 865.4 C 1168.7 867.6 1170.2 870.1 1171.2 872.9 C 1172.3 875.8 1172.8 878.6 1172.8 881.6 C 1172.8 884.7 1172.2 887.6 1171.1 890.4 C 1170 893.2 1168.5 895.7 1166.5 897.9 C 1164.5 900 1162.2 901.7 1159.5 903 C 1156.8 904.3 1153.9 904.9 1150.7 904.9 M 1059.3 881.1 C 1059.3 878.3 1059.8 875.5 1060.8 872.7 C 1061.8 869.9 1063.3 867.5 1065.2 865.3 C 1067.1 863.1 1069.4 861.4 1072.1 860 C 1074.9 858.7 1078 858 1081.5 858 C 1085.7 858 1089.3 858.9 1092.3 860.8 C 1095.3 862.7 1097.5 865.1 1099 868.1 L 1092.1 872.9 C 1091.5 871.6 1090.9 870.5 1090 869.6 C 1089.2 868.7 1088.3 868 1087.3 867.5 C 1086.3 866.9 1085.3 866.6 1084.3 866.3 C 1083.2 866.1 1082.2 866 1081.3 866 C 1079.1 866 1077.3 866.4 1075.7 867.3 C 1074.1 868.2 1072.7 869.4 1071.6 870.9 C 1070.6 872.3 1069.8 874 1069.2 875.8 C 1068.7 877.7 1068.4 879.5 1068.4 881.4 C 1068.4 883.4 1068.7 885.4 1069.4 887.3 C 1070 889.2 1070.9 890.8 1072 892.3 C 1073.2 893.7 1074.6 894.9 1076.2 895.7 C 1077.8 896.6 1079.6 897 1081.5 897 C 1082.5 897 1083.5 896.9 1084.5 896.6 C 1085.6 896.4 1086.6 896 1087.6 895.4 C 1088.6 894.8 1089.5 894.1 1090.3 893.2 C 1091.1 892.3 1091.8 891.2 1092.3 890 L 1099.7 894.2 C 1099 896 1098 897.5 1096.7 898.8 C 1095.3 900.2 1093.8 901.3 1092.1 902.2 C 1090.4 903.1 1088.6 903.8 1086.8 904.3 C 1084.9 904.8 1083 905 1081.2 905 C 1078 905 1075 904.3 1072.4 902.9 C 1069.7 901.5 1067.4 899.7 1065.4 897.5 C 1063.5 895.2 1062 892.7 1060.9 889.8 C 1059.9 887 1059.3 884.1 1059.3 881.1 M 1020.2 895.2 L 1027.4 895.2 L 1027.4 904.6 L 1020.2 904.6 Z M 982.7 870.4 C 982.4 870.1 981.9 869.7 981.1 869.2 C 980.3 868.6 979.3 868.1 978.1 867.6 C 977 867.1 975.7 866.7 974.4 866.3 C 973 866 971.7 865.8 970.3 865.8 C 967.8 865.8 965.9 866.3 964.7 867.2 C 963.5 868.1 962.9 869.4 962.9 871 C 962.9 872 963.1 872.8 963.6 873.4 C 964 874.1 964.7 874.6 965.6 875.1 C 966.4 875.6 967.5 876 968.9 876.4 C 970.2 876.8 971.7 877.2 973.5 877.6 C 975.7 878.3 977.8 878.9 979.6 879.6 C 981.5 880.3 983.1 881.2 984.3 882.2 C 985.6 883.3 986.6 884.5 987.3 886 C 988 887.4 988.4 889.2 988.4 891.4 C 988.4 893.8 987.9 896 986.9 897.7 C 986 899.5 984.8 900.9 983.2 902 C 981.6 903.1 979.8 903.9 977.7 904.4 C 975.6 904.9 973.4 905.1 971.2 905.1 C 967.7 905.1 964.3 904.6 960.9 903.6 C 957.5 902.5 954.4 901 951.7 899.1 L 955.7 891.4 C 956.1 891.8 956.8 892.3 957.8 892.9 C 958.8 893.5 960.1 894.2 961.4 894.8 C 962.8 895.4 964.4 896 966.1 896.4 C 967.8 896.8 969.5 897 971.3 897 C 976.3 897 978.8 895.4 978.8 892.3 C 978.8 891.2 978.5 890.4 977.9 889.7 C 977.3 889 976.5 888.4 975.5 887.8 C 974.4 887.3 973.2 886.8 971.7 886.4 C 970.2 886 968.6 885.5 966.7 885 C 964.5 884.4 962.6 883.8 961 883 C 959.3 882.3 958 881.5 956.9 880.5 C 955.8 879.6 955 878.4 954.4 877.1 C 953.9 875.8 953.6 874.3 953.6 872.5 C 953.6 870.1 954 868 954.9 866.2 C 955.8 864.4 957 862.9 958.5 861.6 C 960.1 860.4 961.9 859.5 963.9 858.9 C 966 858.2 968.2 857.9 970.5 857.9 C 973.8 857.9 976.8 858.4 979.5 859.5 C 982.3 860.5 984.7 861.7 986.7 863.1 Z M 902.6 868 L 895.9 886.7 L 909.1 886.7 Z M 880.7 904.6 L 898.9 858.2 L 906.3 858.2 L 924.5 904.6 L 914.9 904.6 L 910.7 893.1 L 894.4 893.1 L 890.2 904.6 Z M 852 896.7 L 852 904.6 L 819.8 904.6 L 819.8 858.2 L 851.4 858.2 L 851.4 866.1 L 828.8 866.1 L 828.8 877.3 L 848.3 877.3 L 848.3 884.6 L 828.8 884.6 L 828.8 896.7 Z M 786.4 896.7 L 786.4 904.6 L 754.2 904.6 L 754.2 858.2 L 785.8 858.2 L 785.8 866.1 L 763.2 866.1 L 763.2 877.3 L 782.8 877.3 L 782.8 884.6 L 763.2 884.6 L 763.2 896.7 Z M 688.8 858.2 L 701.3 893.3 L 713.7 858.2 L 723.2 858.2 L 705.1 904.6 L 697.5 904.6 L 679.3 858.2 Z M 639.4 858.3 L 648.4 858.3 L 648.4 904.6 L 639.4 904.6 Z M 603.6 858.2 L 603.6 904.6 L 594.6 904.6 L 594.6 884.8 L 573.6 884.8 L 573.6 904.6 L 564.6 904.6 L 564.6 858.2 L 573.6 858.2 L 573.6 877 L 594.6 877 L 594.6 858.2 Z M 603.6 858.2'/%3E%3C/svg%3E") left center / contain no-repeat; -webkit-mask: none; mask: none; } .hive-pathway-umbrella .site-branding a.brand::before, .hive-pathway-umbrella .site-branding a.brand::after { content: none; } /* -------------------------------------------------------------------------- 21. Proof bar, product routes, quote list, flow Components for the home and Boost pages. All accent-driven, so the same markup carries pink on websites pages and amber on Boost. -------------------------------------------------------------------------- */ .hive-proof { background: var(--hive-ink); padding: 38px 0; } .hive-proof__inner { max-width: 1280px; margin-inline: auto; padding-inline: var(--hive-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .hive-proof__n { font-family: var(--hive-display); font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1; color: var(--hive-accent); } .hive-proof__l { font-size: 0.875rem; color: #A9A4A6; margin-top: 7px; } @media (max-width: 860px) { .hive-proof__inner { grid-template-columns: repeat(2, 1fr); gap: 28px; } } /* Product routes — the two doors on the umbrella page. Each carries its own product colour rather than the page accent, because the home page is where both live side by side. */ .hive-route { display: block; text-decoration: none; color: inherit; background: var(--hive-surface); border: 1px solid var(--hive-line); padding: 40px 36px 34px; transition: border-color .15s ease; } .hive-route--websites { --hive-accent: var(--hive-websites); } .hive-route--boost { --hive-accent: var(--hive-boost); } .hive-route:hover { border-color: var(--hive-accent); } .hive-route__label { font-family: var(--hive-display); font-size: 0.9375rem; font-weight: 600; color: var(--hive-accent); margin-bottom: 14px; } .hive-route__title { font-family: var(--hive-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.22; letter-spacing: -0.026em; color: var(--hive-white); margin: 0 0 16px; } .hive-route__body { font-size: 1rem; line-height: 1.75; color: var(--hive-body); margin: 0 0 22px; } /* A flat, anonymised sketch of the Find Quote screen. Invented firm names. */ .hive-ui { padding: 18px; background: var(--hive-surface); } .hive-ui__row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 10px; border-bottom: 1px solid var(--hive-line); font-size: 0.9375rem; color: #C9CDD3; } .hive-ui__row:last-child { border-bottom: none; } .hive-ui__row--head { font-family: var(--hive-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hive-quiet); } .hive-ui__tag { font-family: var(--hive-display); font-size: 0.75rem; font-weight: 600; padding: 5px 11px; border-radius: 60px; background: #1A1D22; color: var(--hive-muted); white-space: nowrap; } .hive-ui__tag--on { background: var(--hive-accent); color: var(--hive-on-accent); } /* Flow — what Boost touches, and the step it deliberately does not. */ .hive-flow { display: grid; gap: 14px; } .hive-flow__step { display: flex; gap: 20px; align-items: flex-start; background: var(--hive-surface); border: 1px solid var(--hive-line); padding: 24px 26px; } .hive-flow__n { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--hive-display); font-weight: 700; background: var(--hive-accent); color: var(--hive-on-accent); } .hive-flow__step strong { font-family: var(--hive-display); font-size: 1.0625rem; color: var(--hive-white); display: block; margin-bottom: 5px; } .hive-flow__step p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--hive-body); } .hive-flow__step--muted { border-style: dashed; background: transparent; } .hive-flow__step--muted .hive-flow__n { background: #1A1D22; color: var(--hive-quiet); } /* -------------------------------------------------------------------------- 22. Boost app mock A flat recreation of the real Find Quote screen, light-themed like the product itself against the dark page. Every client name, firm name and reference is invented — no real client data appears anywhere on the site. Replace wholesale when the UI refresh lands. -------------------------------------------------------------------------- */ .hive-app { background: #FFFFFF; font-family: var(--hive-sans); } .hive-app__bar { background: #000; padding: 9px 13px; display: flex; align-items: center; gap: 9px; } .hive-app__logo { font-family: var(--hive-display); font-size: 12px; font-weight: 800; letter-spacing: -0.02em; color: #FFF; } .hive-app__logo span { color: var(--hive-boost); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; margin-left: 5px; } .hive-app__avatar { margin-left: auto; width: 16px; height: 16px; background: #2A2E35; border-radius: 3px; } .hive-app__body { display: flex; } .hive-app__nav { width: 132px; flex-shrink: 0; background: #FFFFFF; border-right: 1px solid #EDEFF2; padding-bottom: 12px; } .hive-app__nav b { display: block; padding: 12px 14px 5px; font-family: var(--hive-display); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; color: #9AA0A8; } .hive-app__nav i { display: block; padding: 6px 14px; font-family: var(--hive-display); font-size: 11px; font-style: normal; font-weight: 500; color: #5A616B; } .hive-app__nav i.is-on { background: #F4F5F7; font-weight: 700; color: #16181D; } .hive-app__main { flex: 1; min-width: 0; background: #F6F7F9; padding: 13px; } .hive-app__card { background: #FFFFFF; border: 1px solid #EDEFF2; padding: 15px; } .hive-app__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .hive-app__head b { font-family: var(--hive-display); font-size: 13px; font-weight: 700; color: #16181D; margin-right: auto; } .hive-app__head span { border: 1px solid #E4E8ED; padding: 5px 10px; font-size: 10px; color: #8A919B; } .hive-app table { width: 100%; border-collapse: collapse; table-layout: fixed; } .hive-app th { text-align: left; padding: 0 6px 8px; font-family: var(--hive-display); font-size: 9px; font-weight: 700; color: #8A919B; border-bottom: 1px solid #E4E8ED; } .hive-app td { padding: 9px 6px; font-size: 10.5px; color: #5A616B; border-bottom: 1px solid #EDEFF2; } .hive-app tr:last-child td { border-bottom: none; } .hive-app td.id { color: #8A919B; } .hive-app td.who { color: #16181D; font-weight: 500; } .hive-app td.price { font-family: var(--hive-display); font-weight: 700; color: #16181D; text-align: right; white-space: nowrap; } .hive-app__tag { font-family: var(--hive-display); font-size: 8.5px; font-weight: 700; padding: 3px 7px; white-space: nowrap; } .hive-app__tag--quoted { background: var(--hive-boost); color: #1A1206; } .hive-app__tag--instructed { background: #16181D; color: #FFFFFF; } @media (max-width: 600px) { .hive-app__nav { display: none; } } /* -------------------------------------------------------------------------- 23. Pillars strip The four selling points, directly under the hero. Deliberately different from the proof bar: pillars say what you get, the proof bar says why trust us. One of each per page, never stacked together. -------------------------------------------------------------------------- */ .hive-pillars { background: var(--hive-surface-alt); border-block: 1px solid var(--hive-line-soft); padding: 54px 0; } .hive-pillars__inner { max-width: 1280px; margin-inline: auto; padding-inline: var(--hive-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; } .hive-pillar__icon { color: var(--hive-accent); margin-bottom: 14px; } .hive-pillar__icon svg { display: block; } .hive-pillar h3 { font-family: var(--hive-display); font-size: 1.0625rem; font-weight: 700; color: var(--hive-white); margin: 0 0 9px; line-height: 1.35; } .hive-pillar p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--hive-body); } @media (max-width: 960px) { .hive-pillars__inner { grid-template-columns: repeat(2, 1fr); gap: 30px; } } @media (max-width: 560px) { .hive-pillars__inner { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 24. Capability matrix "What we build" and "What Boost does" were nine identical bordered boxes, which reads as flat however it is decorated — the monotony is structural. So the boxes collapse into one ruled grid: a single object with internal divisions rather than nine floating cards. Each cell is marked with the HIVE chevron in the pathway accent, which is the brand's own device and does the job stock icons would do badly nine times over. Applies to .hive-grid--flush, so the same fix covers both pages. -------------------------------------------------------------------------- */ .hive-grid--flush { gap: 0; border: 1px solid var(--hive-line); background: var(--hive-line); } .hive-grid--flush .hive-card { border: 0; background: var(--hive-surface); padding: 32px 30px 30px; position: relative; transition: background .18s ease; /* hairlines come from the parent's background showing through */ margin: 0 1px 1px 0; } /* the chevron mark */ .hive-grid--flush .hive-card::before { content: ''; display: block; width: 19px; height: 19px; margin-bottom: 17px; background: var(--hive-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M6 3l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M6 3l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .18s ease; } .hive-grid--flush .hive-card:hover { background: #121519; } .hive-grid--flush .hive-card:hover::before { transform: translateX(4px); } .hive-grid--flush .hive-card__title { font-size: 1.125rem; line-height: 1.35; margin-bottom: 10px; } .hive-grid--flush .hive-card__body { color: var(--hive-body); } @media (max-width: 900px) { .hive-grid--flush { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 600px) { .hive-grid--flush { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 25. Hero / pillars seam The hero had no bottom padding, so the app screenshot ran straight into the next section's border. With #050505 against #0A0B0D the tone change is almost invisible, which left that hairline reading as an accidental seam rather than a deliberate edge. Fix: give the hero real bottom space, drop the full-bleed border, and let the pillars sit on the same ground with a contained rule above them. Rhythm does the separating instead of a line. -------------------------------------------------------------------------- */ .hive-hero { padding-block: clamp(48px, 7vw, 80px) clamp(52px, 6vw, 76px); } .hive-pillars { background: transparent; border-block: 0; padding: 0 0 clamp(56px, 7vw, 86px); } .hive-pillars__inner { gap: 44px 40px; padding-top: clamp(40px, 5vw, 58px); border-top: 1px solid var(--hive-line); } /* the rule should stop at the content measure, not run the full width */ .hive-pillars__inner { max-width: 1280px; margin-inline: auto; } .hive-pillar h3 { font-size: 1.125rem; margin-bottom: 11px; } .hive-pillar p { font-size: 0.9375rem; line-height: 1.75; } .hive-pillar__icon { margin-bottom: 16px; } /* the app mock shouldn't sit flush to the bottom of the hero either */ .hive-hero__media .hive-app, .hive-hero__media .hive-shot__frame { box-shadow: 0 24px 60px rgba(0,0,0,.55); } /* -------------------------------------------------------------------------- 26. Pillars on brand dark Gives the strip its own ground without spending the accent twice. #221E20 is the warm brand near-black — clearly a different surface from #050505, unlike #0A0B0D which was too close to read as deliberate. The rule above the grid is no longer needed once the background does the separating. -------------------------------------------------------------------------- */ .hive-pillars { background: var(--hive-ink); padding-block: clamp(52px, 6vw, 76px); } .hive-pillars__inner { border-top: 0; padding-top: 0; } .hive-pillar p { color: #B6B1B3; } /* -------------------------------------------------------------------------- 27. Section header — sticky, and coloured by product The header carries the product colour so the bar itself answers "where am I": amber in Boost, pink in Property websites, near-black on the umbrella home page. It is chrome rather than content, so it doesn't spend the one accent band a page gets — but see the note in 28 about the Boost band. On a coloured bar the logo goes solid white (both mask layers), because the accent chevrons would otherwise sit on their own colour and vanish. -------------------------------------------------------------------------- */ #masthead { position: sticky; top: 0; z-index: 99; } body.admin-bar #masthead { top: 32px; } @media (max-width: 782px) { body.admin-bar #masthead { top: 46px; } } .hive-pathway-websites #masthead, .hive-pathway-websites #masthead .site-header-row-container, .hive-pathway-websites #masthead .site-header-upper-wrap, .hive-pathway-boost #masthead, .hive-pathway-boost #masthead .site-header-row-container, .hive-pathway-boost #masthead .site-header-upper-wrap { background: var(--hive-accent); border-bottom: 0; } /* Logo goes fully white on a coloured bar. */ .hive-pathway-websites .site-branding a.brand::before, .hive-pathway-boost .site-branding a.brand::before { background-color: #FFFFFF; } /* -------------------------------------------------------------------------- 28. Nav as section switcher The two products are buttons, not text links, and the one you're in is filled. Together with the bar colour that's two signals for "where am I". -------------------------------------------------------------------------- */ .header-navigation ul { align-items: center; gap: 10px; } .hive-pathway-websites .header-navigation ul li a, .hive-pathway-boost .header-navigation ul li a { color: var(--hive-on-accent); border-radius: var(--hive-radius-pill); padding: 10px 20px; border: 1px solid rgba(0,0,0,.28); font-weight: 600; transition: background .15s ease, color .15s ease; } .hive-pathway-websites .header-navigation ul li a:hover, .hive-pathway-boost .header-navigation ul li a:hover { background: rgba(0,0,0,.12); color: var(--hive-on-accent); } /* the section you are currently in */ .hive-pathway-websites .header-navigation a[href*="/websites"], .hive-pathway-boost .header-navigation a[href*="/boost"] { background: var(--hive-on-accent); color: #FFFFFF; border-color: transparent; } .hive-pathway-websites .header-navigation a[href*="/websites"]:hover, .hive-pathway-boost .header-navigation a[href*="/boost"]:hover { background: var(--hive-on-accent); color: #FFFFFF; } /* Book a demo — solid black on the coloured bar, accent on the dark bar. The old rule put dark-on-accent text with an accent hover, which is what was reading as grey text turning pink. */ .header-navigation li.nav-cta > a, .hive-pathway-websites .header-navigation li.nav-cta > a, .hive-pathway-boost .header-navigation li.nav-cta > a { background: #050505; color: #FFFFFF; border: 1px solid #050505; font-weight: 700; } .header-navigation li.nav-cta > a:hover, .hive-pathway-websites .header-navigation li.nav-cta > a:hover, .hive-pathway-boost .header-navigation li.nav-cta > a:hover { background: #1A1D22; color: #FFFFFF; border-color: #1A1D22; } /* On the umbrella header (dark bar) the demo button keeps the accent. */ .hive-pathway-umbrella .header-navigation li.nav-cta > a { background: var(--hive-accent); color: var(--hive-on-accent); border-color: var(--hive-accent); } .hive-pathway-umbrella .header-navigation li.nav-cta > a:hover { background: var(--hive-accent); color: var(--hive-on-accent); opacity: .9; } /* -------------------------------------------------------------------------- 29. Nav colours, at ID specificity Kadence prints its nav colours inline against #masthead, so the class-based rules in 28 lost regardless of order and the links stayed grey — unreadable on the amber bar. Same lesson as section 16: match the ID, don't out-order it. -------------------------------------------------------------------------- */ .hive-pathway-websites #masthead .header-navigation ul li a, .hive-pathway-boost #masthead .header-navigation ul li a { color: var(--hive-on-accent); } .hive-pathway-websites #masthead .header-navigation ul li a:hover, .hive-pathway-boost #masthead .header-navigation ul li a:hover { color: var(--hive-on-accent); background: rgba(0,0,0,.12); } /* current section */ .hive-pathway-websites #masthead .header-navigation a[href*="/websites"], .hive-pathway-websites #masthead .header-navigation a[href*="/websites"]:hover, .hive-pathway-boost #masthead .header-navigation a[href*="/boost"], .hive-pathway-boost #masthead .header-navigation a[href*="/boost"]:hover { background: var(--hive-on-accent); color: #FFFFFF; } /* Book a demo */ #masthead .header-navigation li.nav-cta > a, #masthead .header-navigation li.nav-cta > a:hover { color: #FFFFFF; } .hive-pathway-umbrella #masthead .header-navigation li.nav-cta > a, .hive-pathway-umbrella #masthead .header-navigation li.nav-cta > a:hover { color: var(--hive-on-accent); } /* -------------------------------------------------------------------------- 30. Demo button, final The pathway nav rule in 29 has one more element in it than the CTA rule, so it won and painted the button's text dark on black. The CTA rule needs the pathway class and the same depth to take precedence. -------------------------------------------------------------------------- */ .hive-pathway-websites #masthead .header-navigation ul li.nav-cta > a, .hive-pathway-websites #masthead .header-navigation ul li.nav-cta > a:hover, .hive-pathway-boost #masthead .header-navigation ul li.nav-cta > a, .hive-pathway-boost #masthead .header-navigation ul li.nav-cta > a:hover { background: #050505; color: #FFFFFF; border-color: #050505; } .hive-pathway-websites #masthead .header-navigation ul li.nav-cta > a:hover, .hive-pathway-boost #masthead .header-navigation ul li.nav-cta > a:hover { background: #1A1D22; border-color: #1A1D22; } .hive-pathway-umbrella #masthead .header-navigation ul li.nav-cta > a, .hive-pathway-umbrella #masthead .header-navigation ul li.nav-cta > a:hover { background: var(--hive-accent); color: var(--hive-on-accent); border-color: var(--hive-accent); } /* -------------------------------------------------------------------------- 31. Dark logo on the coloured bar White on amber measured 2.09:1 — legal for a logo, but soft. The brand dark wordmark reads about 8:1 on amber and stays crisp. Both mask layers go dark so the mark holds together as one object rather than splitting into a dark wordmark with pale chevrons. -------------------------------------------------------------------------- */ .hive-pathway-websites .site-branding a.brand::before, .hive-pathway-websites .site-branding a.brand::after, .hive-pathway-boost .site-branding a.brand::before, .hive-pathway-boost .site-branding a.brand::after { background-color: var(--hive-on-accent); } /* -------------------------------------------------------------------------- 32. Mobile header Kadence renders a separate .site-mobile-header-wrap, which section 27 missed. The bar stayed dark on mobile while the logo went dark with the desktop rule, leaving a dark mark on a dark bar. The colour has to follow to mobile for the same reason it exists at all: the bar is the thing that says which section you're in, and most agents will see this on a phone. -------------------------------------------------------------------------- */ .hive-pathway-websites #masthead .site-mobile-header-wrap, .hive-pathway-websites #masthead .site-mobile-header-wrap .site-header-row-container, .hive-pathway-websites #masthead .site-mobile-header-wrap .site-header-upper-wrap, .hive-pathway-boost #masthead .site-mobile-header-wrap, .hive-pathway-boost #masthead .site-mobile-header-wrap .site-header-row-container, .hive-pathway-boost #masthead .site-mobile-header-wrap .site-header-upper-wrap { background: var(--hive-accent); } /* hamburger has to be legible on the colour too */ .hive-pathway-websites #masthead .menu-toggle-icon .menu-toggle-bar, .hive-pathway-boost #masthead .menu-toggle-icon .menu-toggle-bar, .hive-pathway-websites #masthead .menu-toggle-open .kadence-svg-iconset, .hive-pathway-boost #masthead .menu-toggle-open .kadence-svg-iconset, .hive-pathway-websites #masthead button.menu-toggle-open, .hive-pathway-boost #masthead button.menu-toggle-open { color: var(--hive-on-accent); background: transparent; } /* -------------------------------------------------------------------------- 33. Let the bar colour through Section 13 painted .site-header-wrap and .site-header-inner-wrap with the base near-black, back when every header was dark. Those sit INSIDE #masthead, so once the masthead went amber they covered it — the computed value on the masthead was right while the pixels stayed black. On a coloured pathway the inner wrappers have to be transparent and let the bar show. -------------------------------------------------------------------------- */ .hive-pathway-websites #masthead .site-header-wrap, .hive-pathway-websites #masthead .site-header-inner-wrap, .hive-pathway-websites #masthead .site-mobile-header-wrap, .hive-pathway-websites #masthead .site-main-header-wrap, .hive-pathway-websites #masthead .site-top-header-wrap, .hive-pathway-boost #masthead .site-header-wrap, .hive-pathway-boost #masthead .site-header-inner-wrap, .hive-pathway-boost #masthead .site-mobile-header-wrap, .hive-pathway-boost #masthead .site-main-header-wrap, .hive-pathway-boost #masthead .site-top-header-wrap { background: transparent; } /* -------------------------------------------------------------------------- 34. Section sub-navigation Sits directly under the coloured header and scrolls with the page — only the main bar is sticky, so the section menu doesn't eat vertical space on a phone. The current page is marked with the accent so the two bars together answer "which section" and "which page". -------------------------------------------------------------------------- */ .hive-subnav { background: var(--hive-surface-alt); border-bottom: 1px solid var(--hive-line); } .hive-subnav__inner { max-width: 1280px; margin-inline: auto; padding-inline: var(--hive-gutter); display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; } .hive-subnav__inner::-webkit-scrollbar { display: none; } .hive-subnav__link { flex: 0 0 auto; display: inline-block; padding: 16px 16px 14px; font-family: var(--hive-display); font-size: 0.9375rem; font-weight: 500; color: var(--hive-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s ease, border-color .15s ease; } .hive-subnav__link:hover { color: var(--hive-white); } .hive-subnav__link.is-current { color: var(--hive-white); font-weight: 700; border-bottom-color: var(--hive-accent); } /* it is injected into the content wrapper, so pull it full width */ body.page .entry-content > .hive-subnav { margin: 0; width: 100%; } /* -------------------------------------------------------------------------- 35. Three nav states, three treatments The active section and the demo button were both dark pills with white text, so "where you are" and "what to click" looked the same. They are different jobs and need to look different: inactive section outlined, transparent — available active section solid WHITE, dark text — a selected tab book a demo solid BLACK, white text — the only black thing on the bar -------------------------------------------------------------------------- */ .hive-pathway-websites #masthead .header-navigation ul li a.is-section-current, .hive-pathway-boost #masthead .header-navigation ul li a.is-section-current, .hive-pathway-websites #masthead .header-navigation a[href*="/websites"]:not(.nav-cta-link), .hive-pathway-boost #masthead .header-navigation a[href*="/boost"]:not(.nav-cta-link) { background: #FFFFFF; color: var(--hive-on-accent); border-color: #FFFFFF; font-weight: 700; } .hive-pathway-websites #masthead .header-navigation a[href*="/websites"]:not(.nav-cta-link):hover, .hive-pathway-boost #masthead .header-navigation a[href*="/boost"]:not(.nav-cta-link):hover { background: #FFFFFF; color: var(--hive-on-accent); } /* the demo button stays the only black pill, and must beat the rule above */ .hive-pathway-websites #masthead .header-navigation ul li.nav-cta > a, .hive-pathway-websites #masthead .header-navigation ul li.nav-cta > a:hover, .hive-pathway-boost #masthead .header-navigation ul li.nav-cta > a, .hive-pathway-boost #masthead .header-navigation ul li.nav-cta > a:hover { background: #050505; color: #FFFFFF; border-color: #050505; font-weight: 700; } /* -------------------------------------------------------------------------- 36. Keep the CTA out of the section match "Book a demo" links to #demo on the current page, and while that link was /websites/#demo the attribute match in 35 treated it as the current section and painted it white. Matching on href alone is fragile — exclude the CTA by its list item instead. -------------------------------------------------------------------------- */ .hive-pathway-websites #masthead .header-navigation ul li:not(.nav-cta) > a[href*="/websites"], .hive-pathway-websites #masthead .header-navigation ul li:not(.nav-cta) > a[href*="/websites"]:hover, .hive-pathway-boost #masthead .header-navigation ul li:not(.nav-cta) > a[href*="/boost"], .hive-pathway-boost #masthead .header-navigation ul li:not(.nav-cta) > a[href*="/boost"]:hover { background: #FFFFFF; color: var(--hive-on-accent); border-color: #FFFFFF; font-weight: 700; } .hive-pathway-websites #masthead .header-navigation ul li.nav-cta > a, .hive-pathway-websites #masthead .header-navigation ul li.nav-cta > a:hover, .hive-pathway-boost #masthead .header-navigation ul li.nav-cta > a, .hive-pathway-boost #masthead .header-navigation ul li.nav-cta > a:hover { background: #050505; color: #FFFFFF; border-color: #050505; } /* -------------------------------------------------------------------------- 37. Mobile drawer Kadence styles the drawer for a light background: its links were rgb(10,11,13) on a rgb(9,12,16) panel, so the menu was literally invisible — three divider lines and nothing else. Nothing in sections 13-36 touched the drawer because it renders outside #masthead. The drawer also now carries the section hierarchy: the two products as parents with the section pages nested beneath, so a phone gets the same structure the sub-nav bar gives a desktop. -------------------------------------------------------------------------- */ .popup-drawer .drawer-inner { background: var(--hive-base); } .popup-drawer .drawer-header { padding: 14px 20px; } .popup-drawer .drawer-toggle, .popup-drawer .menu-toggle-close { color: var(--hive-white); } .popup-drawer .mobile-navigation ul { list-style: none; margin: 0; padding: 0; } .popup-drawer .mobile-navigation a { display: block; color: var(--hive-white); font-family: var(--hive-display); font-size: 1.0625rem; font-weight: 600; padding: 15px 20px; border-bottom: 1px solid var(--hive-line); text-decoration: none; } .popup-drawer .mobile-navigation a:hover { color: var(--hive-accent); background: var(--hive-surface); } /* child items — the section pages */ .popup-drawer .mobile-navigation .sub-menu a { font-size: 0.9375rem; font-weight: 500; color: var(--hive-muted); padding-left: 36px; border-bottom-color: var(--hive-line-soft); } .popup-drawer .mobile-navigation .sub-menu a:hover { color: var(--hive-white); } /* where you are */ .popup-drawer .mobile-navigation .current-menu-item > a, .popup-drawer .mobile-navigation .current_page_item > a { color: var(--hive-accent); } /* the demo button keeps being a button */ .popup-drawer .mobile-navigation li.nav-cta > a { margin: 18px 20px; padding: 15px 24px; background: var(--hive-accent); color: var(--hive-on-accent); border: 0; border-radius: var(--hive-radius-pill); text-align: center; font-weight: 700; } .popup-drawer .mobile-navigation li.nav-cta > a:hover { background: var(--hive-accent); color: var(--hive-on-accent); opacity: .9; } /* the sub-nav bar is desktop wayfinding; the drawer covers it on a phone */ @media (max-width: 767px) { .hive-subnav { display: none; } } /* -------------------------------------------------------------------------- 38. Contact and map The map is click-to-load. Embedding Google Maps on page load sets Google cookies before anyone has consented to anything, which on a UK site selling compliance-ready websites would be a poor look — and it costs a third-party request on a page most people reach to find a phone number. -------------------------------------------------------------------------- */ .hive-contact__block { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--hive-line); } .hive-contact__block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .hive-contact__h { font-family: var(--hive-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hive-accent); margin: 0 0 10px; } .hive-contact__p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--hive-white); } .hive-contact__p a { color: var(--hive-white); text-decoration: none; border-bottom: 1px solid var(--hive-accent); } .hive-contact__p a:hover { color: var(--hive-accent); } .hive-map { position: relative; aspect-ratio: 16/10; background: var(--hive-surface); border: 1px solid var(--hive-line); display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; padding: 24px; } .hive-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .hive-map__load { background: var(--hive-accent); color: var(--hive-on-accent); border: 0; border-radius: var(--hive-radius-pill); font-family: var(--hive-display); font-size: 1rem; font-weight: 600; padding: 14px 26px; cursor: pointer; } .hive-map__note { margin: 0; font-size: 0.875rem; color: var(--hive-quiet); } /* -------------------------------------------------------------------------- 38. Contact page and forms Forminator ships light-theme styles, so its inputs are white-on-white against this site. Restyled to the dark surfaces rather than fought with. -------------------------------------------------------------------------- */ .hive-contact { background: var(--hive-surface); border: 1px solid var(--hive-line); padding: 32px 30px; } .hive-contact__h { font-family: var(--hive-display); font-size: 1.0625rem; font-weight: 700; color: var(--hive-white); margin: 0 0 16px; } .hive-contact__addr { font-style: normal; font-size: 1rem; line-height: 1.8; color: var(--hive-muted); margin: 0 0 18px; } .hive-contact__row { margin: 0 0 10px; font-size: 1.0625rem; } .hive-contact__row a { color: var(--hive-accent); text-decoration: none; font-weight: 600; } .hive-contact__row a:hover { text-decoration: underline; } .hive-contact__note { margin: 20px 0 0; font-size: 0.875rem; line-height: 1.7; color: var(--hive-quiet); } .hive-map { line-height: 0; margin-top: 44px; } .hive-map iframe { width: 100%; height: clamp(300px, 42vw, 460px); border: 0; display: block; filter: grayscale(.35) contrast(1.05); } /* --- Forminator ------------------------------------------------------------ */ .hive-form .forminator-ui.forminator-custom-form, .hive-form .forminator-row { color: var(--hive-white); } .hive-form .forminator-label, .hive-form .forminator-ui label { font-family: var(--hive-display) !important; font-size: 0.875rem !important; font-weight: 600 !important; color: var(--hive-muted) !important; } .hive-form .forminator-input, .hive-form .forminator-textarea, .hive-form select, .hive-form .forminator-select2 .selection .select2-selection { background: var(--hive-surface) !important; border: 1px solid var(--hive-line) !important; border-radius: 6px !important; color: var(--hive-white) !important; font-family: var(--hive-sans) !important; font-size: 1rem !important; min-height: 52px !important; padding: 14px 16px !important; } .hive-form .forminator-textarea { min-height: 130px !important; } .hive-form .forminator-input::placeholder, .hive-form .forminator-textarea::placeholder { color: var(--hive-quiet) !important; } .hive-form .forminator-input:focus, .hive-form .forminator-textarea:focus { border-color: var(--hive-accent) !important; outline: 2px solid var(--hive-accent) !important; outline-offset: 1px !important; } .hive-form .forminator-button-submit, .hive-form button.forminator-button { background: var(--hive-accent) !important; color: var(--hive-on-accent) !important; border: 0 !important; border-radius: var(--hive-radius-pill) !important; font-family: var(--hive-display) !important; font-weight: 700 !important; font-size: 1rem !important; padding: 16px 32px !important; min-height: 54px !important; } .hive-form .forminator-button-submit:hover { opacity: .92; } .hive-form .forminator-error-message { color: #FF8A8A !important; } .hive-form .forminator-response-message.forminator-success { background: var(--hive-surface) !important; border-left: 3px solid var(--hive-accent) !important; color: var(--hive-white) !important; } /* -------------------------------------------------------------------------- 39. Text-only heroes and form rhythm The hero padding was sized for a hero with a screenshot beside it. On a page with text alone that left a dead band between the lede and the next section. :has() lets the hero size itself rather than needing a modifier class on every page. Forminator also spaces its rows for a roomy light-theme form; tightened so the fields read as one block instead of drifting apart. -------------------------------------------------------------------------- */ .hive-hero:not(:has(.hive-hero__media)) { padding-block: clamp(40px, 5vw, 64px) clamp(20px, 2.5vw, 32px); } .hive-hero:not(:has(.hive-hero__media)) .hive-hero__lede { margin-bottom: 0; } /* contact: pull the two columns level and stop the aside floating */ .hive-split { align-items: flex-start; } .hive-contact { position: sticky; top: 110px; } @media (max-width: 900px) { .hive-contact { position: static; } } /* --- Forminator rhythm ----------------------------------------------------- */ .hive-form .forminator-row { margin-bottom: 18px !important; } .hive-form .forminator-row:last-of-type { margin-bottom: 0 !important; } .hive-form .forminator-field { margin-bottom: 0 !important; } .hive-form .forminator-label { margin-bottom: 7px !important; display: block !important; } .hive-form .forminator-col { padding-bottom: 0 !important; } .hive-form form { margin-top: 26px; } /* Forminator draws its own white card on some setups */ .hive-form .forminator-ui { background: transparent !important; padding: 0 !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- 40. Map band, and Forminator's own grid The map block was first written as a consent placeholder: a grid box with a 16/10 ratio holding a "load the map" button. The real embed went in later and the box kept its ratio, so on a wide screen a 460px iframe sat inside an 875px box and the difference showed as a slab of empty surface under the map. The ratio, padding and border go, and the map becomes a full-bleed band. Forminator also lays its rows out on a grid with negative side margins, which pushed every field 30px wider than the column holding it. -------------------------------------------------------------------------- */ .hive-map { display: block; aspect-ratio: auto; padding: 0; border: 0; border-top: 1px solid var(--hive-line); background: var(--hive-surface); overflow: hidden; } .hive-map iframe { position: static; inset: auto; width: 100%; height: clamp(300px, 34vw, 440px); } .hive-form .forminator-row { margin-left: 0 !important; margin-right: 0 !important; } .hive-form .forminator-col { padding-left: 0 !important; padding-right: 0 !important; } /* -------------------------------------------------------------------------- 41. Select2 — the one field Forminator does not render itself Forminator hides the real