/* ================================================================ Bell Equipment — Home Template Styles Used by all sites with TemplateKey = "home" Brand colours are injected as CSS vars on by _Layout.cshtml: --color-primary, --color-secondary, --color-btn, --color-btn-hover, --color-btn-text ================================================================ */ :root { --home-max: 1280px; --home-dark: var(--color-secondary, #1a1a1a); --home-gold: var(--color-btn, #FDBA31); --home-white: #ffffff; --home-grey: #f5f5f5; } /* ── Shared section heading style ────────────────────────────── */ .uk-section-heading { background: var(--home-dark); padding: 32px 20px; text-align: center; } .uk-section-heading h2 { font-family: 'Barlow', sans-serif; font-size: 28px; font-weight: 700; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0; } .uk-section-heading h2::after { content: ''; display: block; width: 60px; height: 3px; background: var(--home-gold); margin: 10px auto 0; } /* ── Hero Content Overlay ────────────────────────────────────── */ .uk-hero__content { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--home-max); padding: 0 30px; z-index: 10; pointer-events: none; } .uk-hero__content h1 { font-family: 'Barlow', sans-serif; font-size: 42px; font-weight: 700; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); max-width: 640px; } .uk-hero__content p { font-family: 'Quicksand', sans-serif; font-size: 16px; color: var(--home-white); margin: 0 0 20px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); max-width: 560px; } .uk-hero__content .bell-btn { pointer-events: all; } /* ── Buttons ─────────────────────────────────────────────────── */ .bell-btn { display: inline-block; padding: 12px 28px; font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 3px; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .bell-btn--primary { background: var(--color-btn, var(--home-gold)); color: var(--color-btn-text, #1a1a1a); } .bell-btn--primary:hover { background: var(--color-btn-hover, #e6a800); color: var(--color-btn-text, #1a1a1a); } /* ── Stats Bar ───────────────────────────────────────────────── */ .bell-stats-bar { background: var(--home-dark); padding: 32px 20px; } .bell-stats-bar__grid { max-width: var(--home-max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; } .bell-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; } .bell-stat__number { font-family: 'Barlow', sans-serif; font-size: 40px; font-weight: 700; color: var(--home-gold); line-height: 1; } .bell-stat__label { font-family: 'Quicksand', sans-serif; font-size: 14px; color: var(--home-white); text-align: center; text-transform: uppercase; letter-spacing: 0.5px; } /* ── CTA Banner ──────────────────────────────────────────────── */ .bell-cta-banner { background: var(--home-dark); background-size: cover; background-position: center; position: relative; padding: 80px 20px; text-align: center; } .bell-cta-banner::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.55); } .bell-cta-banner__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .bell-cta-banner h2 { font-family: 'Barlow', sans-serif; font-size: 36px; font-weight: 700; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px; } .bell-cta-banner p { font-family: 'Quicksand', sans-serif; font-size: 16px; color: rgba(255,255,255,0.85); margin: 0 0 28px; line-height: 1.6; } /* ── Hero Slideshow ──────────────────────────────────────────── */ .uk-hero { position: relative; width: 100%; height: var(--hero-height, 600px); overflow: hidden; margin-top: -30px; } .uk-hero__slideshow { position: absolute; inset: 0; } .uk-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; transform: scale(1); } .uk-hero__slide.active { opacity: 1; animation: kenBurns 8s ease-in-out forwards; } @keyframes kenBurns { from { transform: scale(1.05); } to { transform: scale(1); } } /* ── Products To Take Your Business Further ──────────────────── */ .uk-products-heading { background: var(--home-dark); padding: 20px; border-top: 3px solid var(--home-white); text-align: center; } .uk-products-heading__inner { max-width: var(--home-max); margin: 0 auto; } .uk-products-heading h2 { font-family: 'Barlow', sans-serif; font-size: 30px; font-weight: 600; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0; } /* ── Featured Product Cards ──────────────────────────────────── */ .uk-featured-products { background: #fff; padding: 3rem 0; } .uk-featured-products .ps-card__img { background: #fff; height: 220px; display: flex; align-items: center; justify-content: center; } .uk-featured-products .ps-card__img img { object-fit: contain; padding: 0.75rem; height: 100%; } .uk-featured-products__inner { max-width: var(--home-max); margin: 0 auto; } .uk-featured-products__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .uk-pcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e0e0e0; transition: box-shadow 0.2s; } .uk-pcard:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .uk-pcard__img { height: 220px; background-size: cover; background-position: center; } .uk-pcard__body { padding: 20px 22px 24px; flex: 1; } .uk-pcard__title { font-family: 'Barlow', sans-serif; font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; } .uk-pcard__divider { width: 50px; height: 3px; background: var(--home-gold); margin-bottom: 12px; } .uk-pcard__desc { font-family: 'Quicksand', sans-serif; font-size: 14px; color: #444; line-height: 1.6; margin: 0; } /* ── Category heading ──────────────────────────────────────── */ .uk-category-heading { background: var(--home-dark); padding: 20px; border-top: 3px solid var(--home-white); text-align: center; } .uk-category-heading__inner { max-width: var(--home-max); margin: 0 auto; } .uk-category-heading h2 { font-family: 'Barlow', sans-serif; font-size: 28px; font-weight: 600; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0; } /* ── Product Category Grid ───────────────────────────────────── */ .uk-category-grid { background: #f5f5f5; padding: 3rem 0; } .uk-category-grid__inner { max-width: var(--home-max); margin: 0 auto; padding: 0 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .uk-cat-card { position: relative; display: block; height: 270px; overflow: hidden; text-decoration: none; background: #fff; box-shadow: 0 0 7px 3px rgba(0,0,0,0.15); transition: box-shadow 0.35s ease; } .uk-cat-card:hover { box-shadow: 0 0 14px 4px rgba(0,0,0,0.25); } .uk-cat-card__img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; padding: 0.75rem; transition: transform 0.35s ease; } .uk-cat-card:hover .uk-cat-card__img { transform: scale(1.04); } .uk-cat-card__overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-primary, #FFC200); transform: translateY(100%); transition: transform 0.35s ease; padding: 0 1rem; } .uk-cat-card:hover .uk-cat-card__overlay { transform: translateY(0); } .uk-cat-card__overlay h2 { font-family: var(--font-heading, 'Barlow', sans-serif); font-size: 0.85rem; font-weight: 700; color: var(--color-secondary, #1A1A1A); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Dealer Locator ──────────────────────────────────────────── */ .uk-dealer-locator { background: var(--home-white); } .uk-dealer-locator__heading-wrap { background: var(--home-dark); padding: 20px; border-top: 3px solid var(--home-white); text-align: center; } .uk-dealer-locator__heading-inner { max-width: var(--home-max); margin: 0 auto; } .uk-dealer-locator__heading-inner h2 { font-family: 'Barlow', sans-serif; font-size: 28px; font-weight: 600; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0; } .uk-dealer-locator__map-wrap { max-width: var(--home-max); margin: 0 auto; padding: 40px 20px; } .uk-dealer-locator__map-ratio { position: relative; padding-bottom: 50%; height: 0; overflow: hidden; } .uk-dealer-locator__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ── Optimise Your Investment ────────────────────────────────── */ .uk-optimise { background: #f5f5f5; padding-bottom: 3rem; } .uk-optimise__heading-wrap { background: var(--home-dark); padding: 20px; border-top: 3px solid var(--home-white); text-align: center; } .uk-optimise__heading-inner { max-width: var(--home-max); margin: 0 auto; } .uk-optimise__heading-inner h2 { font-family: var(--font-heading, 'Barlow', sans-serif); font-size: 28px; font-weight: 600; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0; } .uk-optimise__carousel-wrap { max-width: var(--home-max); margin: 0 auto; padding: 40px 50px 3rem; position: relative; overflow: visible; } .uk-ocard { display: block; text-decoration: none; color: inherit; background: #fff; box-shadow: 0 0 7px 3px rgba(0,0,0,0.15); transition: box-shadow 0.25s ease; } .uk-ocard:hover { box-shadow: 0 0 14px 4px rgba(0,0,0,0.25); } .uk-ocard__img { width: 100%; height: 220px; object-fit: contain; display: block; background: #fff; padding: 0.75rem; } .uk-ocard__shadow { width: 100%; padding: 0 2rem 2.5rem; background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; } .uk-ocard__title { font-family: var(--font-heading, 'Barlow', sans-serif); font-size: 1rem; font-weight: 700; color: var(--color-primary, #FFC200); text-transform: uppercase; letter-spacing: 0.5px; margin: 1rem 0 0; } .uk-ocard__divider { width: 50%; height: 2px; background: var(--color-primary, #FFC200); margin: 10px auto 12px; } .uk-ocard__desc { font-family: var(--font-body, 'Quicksand', sans-serif); font-size: 0.9rem; color: #555; line-height: 1.6; margin: 0; min-height: 5.76rem; /* reserve space for 4 lines so all cards match */ } /* Hide x-overflow always (prevents next slide bleeding in). Allow y-overflow after init so card box-shadows are not clipped. */ .uk-optimise-swiper, .uk-innovation-swiper { overflow: hidden; } .uk-optimise-swiper.swiper-initialized, .uk-innovation-swiper.swiper-initialized { overflow-x: hidden; overflow-y: visible; } /* Swiper nav buttons */ .uk-optimise-swiper .swiper-button-next, .uk-optimise-swiper .swiper-button-prev, .uk-innovation-swiper .swiper-button-next, .uk-innovation-swiper .swiper-button-prev { color: var(--color-secondary, #1a1a1a); } .uk-optimise-swiper .swiper-button-next::after, .uk-optimise-swiper .swiper-button-prev::after, .uk-innovation-swiper .swiper-button-next::after, .uk-innovation-swiper .swiper-button-prev::after { font-size: 22px; } /* ── Innovation & Technology ─────────────────────────────────── */ .uk-innovation { background: var(--home-white); } .uk-innovation__heading-wrap { background: var(--home-dark); padding: 20px; border-top: 3px solid var(--home-white); text-align: center; } .uk-innovation__heading-inner { max-width: var(--home-max); margin: 0 auto; } .uk-innovation__heading-inner h2 { font-family: 'Barlow', sans-serif; font-size: 28px; font-weight: 600; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0; } .uk-innovation__carousel-wrap { max-width: var(--home-max); margin: 0 auto; padding: 40px 50px; position: relative; } .uk-vcard { display: block; text-decoration: none; color: inherit; background: var(--color-primary, #FFC200); margin: 10px; box-shadow: 0 0 7px 3px rgba(0,0,0,0.15); transition: box-shadow 0.25s ease; } .uk-vcard:hover { box-shadow: 0 0 14px 4px rgba(0,0,0,0.25); } .uk-vcard__video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; } .uk-vcard__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .uk-vcard__title { font-family: var(--font-body, 'Quicksand', sans-serif); font-size: 16px; font-weight: 600; color: var(--color-secondary, #1a1a1a); padding: 14px 16px; margin: 0; } /* ── News & Testimonials ─────────────────────────────────────── */ .uk-news { background: var(--home-white); } .uk-news__heading-wrap { background: var(--home-dark); padding: 20px; border-top: 3px solid var(--home-white); text-align: center; } .uk-news__heading-inner { max-width: var(--home-max); margin: 0 auto; } .uk-news__heading-inner h2 { font-family: 'Barlow', sans-serif; font-size: 28px; font-weight: 600; color: var(--home-white); text-transform: uppercase; letter-spacing: 1px; margin: 0; } .uk-news__search-wrap { background: var(--home-white); padding: 20px 20px 0; border-bottom: 1px solid #e8e8e8; } .uk-news__search-inner { max-width: var(--home-max); margin: 0 auto; padding-bottom: 20px; } .uk-news__search-box { position: relative; max-width: 520px; } .uk-news__search-input { width: 100%; padding: 10px 40px 10px 14px; border: 1px solid #ddd; border-bottom: 2px solid var(--color-primary, #FFC200); background: #f7f7f7; color: #1a1a1a; font-family: var(--font-body, 'Quicksand', sans-serif); font-size: 0.95rem; outline: none; box-sizing: border-box; } .uk-news__search-input::placeholder { color: #999; } .uk-news__search-input:focus { background: #fff; border-color: #ccc; border-bottom-color: var(--color-primary, #FFC200); } .uk-news__search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-primary, #FFC200); pointer-events: none; } .uk-news__search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 200; border-top: 3px solid var(--color-primary, #FFC200); max-height: 420px; overflow-y: auto; } .uk-news__search-result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid #f0f0f0; transition: background 0.15s; } .uk-news__search-result:last-child { border-bottom: none; } .uk-news__search-result:hover { background: #f8f8f8; } .uk-news__search-result-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .uk-news__search-result-title { font-family: var(--font-body, 'Quicksand', sans-serif); font-size: 0.9rem; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uk-news__search-result-date { font-size: 0.75rem; color: #888; } .uk-news__search-thumb { width: 64px; height: 48px; object-fit: cover; flex-shrink: 0; border-radius: 2px; } .uk-news__search-thumb--placeholder { background: #e8e8e8; display: block; } .uk-news__search-empty { padding: 14px; font-size: 0.875rem; color: #888; text-align: center; } .uk-news__inner { max-width: var(--home-max); margin: 0 auto; padding: 0 20px 40px; } .uk-news__list { display: flex; flex-direction: column; gap: 0; max-height: 460px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-primary, #FFC200) #f0f0f0; } .uk-news__list::-webkit-scrollbar { width: 4px; } .uk-news__list::-webkit-scrollbar-track { background: #f0f0f0; } .uk-news__list::-webkit-scrollbar-thumb { background: var(--color-primary, #FFC200); border-radius: 2px; } .uk-ncard { display: flex; align-items: flex-start; gap: 20px; text-decoration: none; color: inherit; background: var(--home-white); padding: 20px 0; border-bottom: 1px solid #e8e8e8; } .uk-ncard:first-child { border-top: 1px solid #e8e8e8; } .uk-ncard:hover .uk-ncard__title { color: var(--home-gold); } .uk-ncard__img { width: 160px; height: 110px; object-fit: cover; flex-shrink: 0; border-radius: 2px; } .uk-ncard__body { flex: 1; min-width: 0; } .uk-ncard__meta { font-family: 'Quicksand', sans-serif; font-size: 12px; color: #888; margin: 0 0 6px; } .uk-ncard__title { font-family: 'Barlow', sans-serif; font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; transition: color 0.2s; } .uk-ncard__desc { font-family: 'Quicksand', sans-serif; font-size: 14px; color: #555; line-height: 1.6; margin: 0; } /* ── Back to top ─────────────────────────────────────────────── */ .bell-back-to-top { background: #fff; padding: 0.75rem 0; text-align: center; } .bell-back-to-top a { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; color: #1a1a1a; font-family: var(--font-body, 'Quicksand', sans-serif); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: color 0.2s ease; } .bell-back-to-top a:hover { color: var(--color-primary, #FFC200); } .bell-back-to-top svg { width: 12px; height: 12px; fill: currentColor; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 1024px) { .uk-featured-products__grid { grid-template-columns: 1fr; } .uk-category-grid__inner { grid-template-columns: 1fr 1fr; } .uk-ncard { flex-direction: column; } .uk-ncard__img { width: 100%; height: 180px; } } @media (max-width: 767px) { .uk-hero { height: 300px; margin-top: 0; } .uk-hero__content { bottom: 20px; padding: 0 16px; } .uk-hero__content h1 { font-size: 26px; } .uk-hero__content p { font-size: 14px; margin-bottom: 14px; } .uk-optimise__carousel-wrap, .uk-innovation__carousel-wrap, .uk-category-grid__inner { padding: 24px 36px; } .bell-stat__number { font-size: 30px; } .bell-stats-bar__grid { gap: 24px; } .bell-cta-banner { padding: 50px 20px; } .bell-cta-banner h2 { font-size: 24px; } .uk-category-grid__inner { grid-template-columns: 1fr; } .uk-cat-card { height: 220px; } } @media (max-width: 480px) { .uk-hero { height: 220px; } .uk-hero__content { bottom: 14px; } .uk-hero__content h1 { font-size: 20px; } .uk-hero__content p { display: none; } .uk-optimise__carousel-wrap, .uk-innovation__carousel-wrap { padding: 16px 32px; } .uk-products-heading h2, .uk-category-heading h2, .uk-dealer-locator__heading-inner h2, .uk-optimise__heading-inner h2, .uk-innovation__heading-inner h2, .uk-news__heading-inner h2, .uk-section-heading h2 { font-size: 22px; } .bell-cta-banner h2 { font-size: 20px; } .bell-stat__number { font-size: 26px; } .bell-stats-bar__grid { gap: 16px; } .uk-pcard__img { height: 180px; } .uk-dealer-locator__map-wrap { padding: 24px 16px; } }