/* Theme Name: UKF Child Theme URI: https://ukfoodintolerance.co.uk/ Description: UK Food Intolerance child theme for GeneratePress. Lean, block-editor first, WooCommerce-ready. Author: UK Food Intolerance Template: generatepress Version: 0.34.3 Requires at least: 6.4 Requires PHP: 8.0 Text Domain: ukf-child */ :root { --ukf-ink: #0E1A3A; --ukf-ink-2: #283454; --ukf-muted: #3F4A66; --ukf-muted-2: #4C5672; --ukf-line: #DCE2EE; --ukf-bg: #FFFFFF; --ukf-white: #FFFFFF; --ukf-green: #012169; --ukf-green-dark: #00164A; --ukf-green-tint: #E8EDF8; --ukf-red: #C8102E; --ukf-red-dark: #A00C24; --ukf-red-tint: #FCEAEE; --ukf-amber-tint: #FFF4E2; --ukf-amber-ink: #5C2D04; --ukf-radius: 14px; --ukf-radius-lg: 20px; --ukf-font-display: "Plus Jakarta Sans", system-ui, sans-serif; --ukf-font-body: "Inter", system-ui, sans-serif; } body { background: var(--ukf-bg); color: var(--ukf-ink); font-family: var(--ukf-font-body); font-size: 17px; line-height: 1.6; } h1, h2, h3, h4, .site-title, .woocommerce div.product .product_title { font-family: var(--ukf-font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--ukf-ink); line-height: 1.12; } h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); } h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } h3 { font-size: 1.3rem; } a { color: var(--ukf-green); } a:hover, a:focus { color: var(--ukf-green-dark); } /* Header */ .site-header { background: var(--ukf-white); border-bottom: 1px solid var(--ukf-line); } .main-title a, .site-title a { color: var(--ukf-ink); font-family: var(--ukf-font-display); font-weight: 800; } .main-navigation .main-nav ul li a { font-weight: 500; color: var(--ukf-ink); } /* Announcement bar */ .ukf-bar { background: var(--ukf-ink); color: var(--ukf-white); font-size: 14px; text-align: center; padding: 10px 16px; line-height: 1.4; } /* Buttons */ .wp-block-button__link, .button, button.button, .woocommerce a.button, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce a.button.alt { background: var(--ukf-green); color: var(--ukf-white); border: 0; border-radius: 12px; font-family: var(--ukf-font-display); font-weight: 700; padding: 15px 24px; min-height: 44px; } .wp-block-button__link:hover, .woocommerce button.button.alt:hover, .woocommerce a.button:hover { background: var(--ukf-green-dark); color: var(--ukf-white); } .is-style-outline .wp-block-button__link { background: transparent; color: var(--ukf-green); border: 1.5px solid var(--ukf-green); } /* Cards (use the "ukf-card" class on a Group block) */ .ukf-card { background: var(--ukf-white); border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius-lg); padding: 26px; } .ukf-card--featured { border: 2px solid var(--ukf-green); box-shadow: 0 18px 40px rgba(1, 33, 105, 0.12); } .ukf-dark { background: var(--ukf-ink); color: #D5DCEE; } .ukf-dark h2, .ukf-dark h3, .ukf-dark strong { color: var(--ukf-white); } .ukf-dark a { color: var(--ukf-white); } .ukf-pill { display: inline-block; background: var(--ukf-green-tint); color: var(--ukf-green); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; } /* Digital service notice on product pages */ .ukf-digital-notice { display: flex; gap: 12px; align-items: flex-start; background: var(--ukf-green-tint); color: var(--ukf-ink); border-left: 4px solid var(--ukf-red); border-radius: var(--ukf-radius); padding: 14px 16px; font-size: 15px; line-height: 1.5; margin: 0 0 18px; } .ukf-digital-notice svg { flex: none; margin-top: 2px; } /* Trust row under add to basket */ .ukf-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; font-size: 14px; text-align: center; color: var(--ukf-ink-2); } .ukf-trust span { display: block; } /* WooCommerce product page */ .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ukf-ink); font-family: var(--ukf-font-display); font-weight: 800; font-size: 2.2rem; } .woocommerce div.product p.price del { color: #5C6378; font-size: 1.1rem; font-weight: 500; } .woocommerce div.product p.price ins { text-decoration: none; } .woocommerce span.onsale { display: none; } /* Branded product visual (used until product photos exist) */ .ukf-visual { aspect-ratio: 1 / 1; background: var(--ukf-green); color: var(--ukf-white); border-radius: var(--ukf-radius-lg); padding: 28px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; text-align: left; } .ukf-visual__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ukf-visual__brand { font-family: var(--ukf-font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; } .ukf-visual__badge { background: var(--ukf-white); color: var(--ukf-green); font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; } .ukf-visual__name { font-family: var(--ukf-font-display); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.05; } .ukf-visual__sub { color: #D5DCEE; font-size: 15px; margin-top: 6px; } .ukf-visual--small { padding: 18px; border-radius: var(--ukf-radius); margin-bottom: 12px; } .ukf-visual--small .ukf-visual__name { font-size: 1.3rem; } .ukf-visual--small .ukf-visual__sub { font-size: 13px; } .woocommerce-product-gallery--without-images .woocommerce-product-gallery__trigger { display: none; } /* Cart and checkout blocks: keep inside the page container */ .entry-content .wp-block-woocommerce-checkout, .entry-content .wp-block-woocommerce-cart { margin-left: 0; margin-right: 0; max-width: 100%; } /* Multibuy table from the quantity-discount plugin, if shown */ .ukf-multibuy { font-size: 15px; color: var(--ukf-muted); } /* Footer disclaimer */ .ukf-disclaimer { font-size: 13px; line-height: 1.6; color: #A9B4CF; } .site-footer { background: var(--ukf-ink); color: #CBD3E8; } .site-footer a { color: var(--ukf-white); } /* Page sections (block editor groups) */ .entry-content .wp-block-group > .wp-block-group__inner-container { padding: 0; } .entry-content .wp-block-list { margin-left: 1.2em; } .entry-content .wp-block-button .wp-block-button__link { background: var(--ukf-green); color: var(--ukf-white); border: 1.5px solid var(--ukf-green); border-radius: 12px; font-family: var(--ukf-font-display); font-weight: 700; padding: 14px 22px; } .entry-content .wp-block-button .wp-block-button__link:hover { background: var(--ukf-green-dark); border-color: var(--ukf-green-dark); } .entry-content .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ukf-green); } .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ukf-green-tint); } .entry-content .wp-block-buttons { gap: 12px; margin-bottom: 20px; } .ukf-hero { padding: 24px 0 8px; } .entry-content .ukf-hero .wp-block-list { margin-left: 0; } .ukf-hero .wp-block-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--ukf-ink-2); } .ukf-hero .wp-block-list li::before { content: "\2713\00a0"; color: var(--ukf-green); font-weight: 700; } .ukf-section { margin: 56px 0; } .ukf-dark.ukf-section { padding: 40px 32px; border-radius: var(--ukf-radius-lg); } .entry-content .ukf-dark .is-style-outline .wp-block-button__link { color: var(--ukf-white); border-color: var(--ukf-white); } .entry-content .ukf-dark .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.08); } .ukf-lead { font-size: 1.2rem; color: var(--ukf-ink-2); max-width: 46rem; } .ukf-small { font-size: 14px; color: var(--ukf-muted-2); } .ukf-placeholder { background: var(--ukf-amber-tint); color: var(--ukf-amber-ink); border: 1px dashed #D9A35B; border-radius: var(--ukf-radius); padding: 14px 16px; font-size: 15px; } .ukf-card-price strong { font-family: var(--ukf-font-display); font-size: 1.8rem; font-weight: 800; } .ukf-card-price del { color: #5C6378; margin-left: 6px; } .ukf-card .wp-block-list { padding-left: 1.1em; font-size: 15px; } .wp-block-columns { gap: 20px; } .wp-block-column > .ukf-card { height: 100%; } .entry-content > *:first-child { margin-top: 0; } .wp-block-details { background: var(--ukf-white); border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius); padding: 16px 18px; margin: 0 0 10px; } .wp-block-details summary { font-weight: 600; cursor: pointer; } .wp-block-details[open] summary { margin-bottom: 8px; } .wp-block-details p { margin: 0; color: var(--ukf-ink-2); } /* Multibuy tiles and priority option */ .ukf-tiles { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ukf-tiles legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; padding: 0; } .ukf-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid #C9D3CE; border-radius: 12px; background: var(--ukf-white); cursor: pointer; min-height: 72px; } .ukf-tile input { position: absolute; opacity: 0; pointer-events: none; } .ukf-tile.is-selected { border: 2px solid var(--ukf-green); background: var(--ukf-green-tint); padding: 11px; } .ukf-tile:focus-within { outline: 2px solid var(--ukf-green); outline-offset: 2px; } .ukf-tile__label { font-weight: 700; font-size: 15px; } .ukf-tile__price { font-size: 13px; color: var(--ukf-ink-2); } .ukf-tile__note { font-size: 12px; color: var(--ukf-muted-2); } .ukf-tile__price .woocommerce-Price-amount { font-weight: 600; } .ukf-priority { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--ukf-line); border-radius: 12px; padding: 14px; margin: 0 0 16px; background: var(--ukf-white); cursor: pointer; font-size: 15px; line-height: 1.45; } .ukf-priority input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ukf-green); flex: none; } .ukf-priority__sub { font-size: 13px; color: var(--ukf-muted-2); } form.cart.ukf-has-tiles { display: block; } form.cart.ukf-has-tiles .quantity { display: none !important; } form.cart.ukf-has-tiles button.single_add_to_cart_button { width: 100%; font-size: 17px; padding: 16px 20px; } .ukf-sample-link { margin-top: 12px; font-size: 15px; } @media (max-width: 768px) { .ukf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Header basket */ .ukf-basket a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--ukf-green-tint); color: var(--ukf-ink); margin-left: 8px; } .ukf-basket__count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--ukf-green); color: var(--ukf-white); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; padding: 0 5px; } .ukf-basket__count.is-empty { display: none; } /* Reviews */ .ukf-reviews__summary { color: var(--ukf-muted-2); } .ukf-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ukf-review { margin: 0; background: var(--ukf-white); border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; } .ukf-review__stars { color: #E2A400; letter-spacing: 2px; font-size: 16px; } .ukf-review blockquote { margin: 0; padding: 0; border: 0; font-style: normal; font-size: 15px; color: var(--ukf-ink-2); } .ukf-review figcaption { font-size: 13px; color: var(--ukf-muted-2); margin-top: auto; } @media (max-width: 900px) { .ukf-reviews { grid-template-columns: 1fr; } } /* Imported legal pages */ .ukf-legal { max-width: 46rem; } .ukf-legal h1, .ukf-legal h2, .ukf-legal h3 { margin-top: 1.6em; font-size: 1.3rem; } .ukf-legal p, .ukf-legal li { font-size: 16px; } /* Footer links */ .ukf-footer-nav ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; } .ukf-footer-nav a { color: var(--ukf-white); font-size: 15px; text-decoration: none; } .ukf-footer-nav a:hover { text-decoration: underline; } .site-info .inside-site-info { flex-direction: column; } /* Shop and category grids */ .woocommerce ul.products li.product { background: var(--ukf-white); border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius-lg); padding: 16px; text-align: left; } .woocommerce ul.products li.product img { border-radius: var(--ukf-radius); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--ukf-font-display); font-weight: 800; font-size: 1.15rem; } .woocommerce ul.products li.product .price { color: var(--ukf-ink); font-weight: 700; font-size: 1.2rem; } .woocommerce ul.products li.product .price del { color: #5C6378; font-weight: 400; font-size: 0.95rem; } .woocommerce ul.products li.product .button { width: 100%; text-align: center; } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { display: none; } .term-description, .woocommerce-products-header__description { max-width: 46rem; color: var(--ukf-ink-2); } /* ===== Product page (v0.5) ===== */ .single-product .site-main { margin-bottom: 0; } .ukf-rating { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; color: var(--ukf-ink-2); text-decoration: none; margin-bottom: 8px; } .ukf-rating:hover { color: var(--ukf-green); text-decoration: underline; } .ukf-rating__stars { color: #E2A400; letter-spacing: 1px; font-size: 17px; } .ukf-rating__stars--lg { font-size: 26px; letter-spacing: 3px; } .woocommerce div.product .product_title { margin-bottom: 14px; } .ukf-pricebox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px dashed #A9B7D9; border-radius: var(--ukf-radius); margin: 0 0 18px; background: var(--ukf-white); } .ukf-pricebox > div { padding: 12px 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; } .ukf-pricebox > div + div { border-left: 1px solid var(--ukf-line); } .ukf-pricebox span { font-size: 13px; color: var(--ukf-muted-2); } .ukf-pricebox strong, .ukf-pricebox del { font-family: var(--ukf-font-display); font-weight: 800; font-size: 1.6rem; line-height: 1.15; color: var(--ukf-ink); } .ukf-pricebox del { color: #5C6378; font-weight: 700; } .ukf-pricebox__save strong, .ukf-pricebox__save span { color: var(--ukf-green); } .ukf-pricebox .woocommerce-Price-amount { font: inherit; } .ukf-tile { padding-top: 18px; align-items: center; text-align: center; } .ukf-tile.is-selected { padding-top: 17px; } .ukf-tile__badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ukf-green-tint); color: var(--ukf-green); border: 1px solid #BFCBE6; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; } .ukf-tile__badge.is-best { background: var(--ukf-green); color: var(--ukf-white); border-color: var(--ukf-green); } .ukf-tile__stack { position: relative; display: block; width: 64px; height: 48px; margin: 4px auto 6px; } .ukf-tile__stack img { position: absolute; top: 0; left: 50%; width: 44px; height: 44px; object-fit: contain; transform: translateX(calc(-50% + (var(--n) * 8px) - 8px)) translateY(calc(var(--n) * 2px)); background: var(--ukf-white); border-radius: 4px; box-shadow: 0 2px 6px rgba(14,26,58,.12); } .ukf-tile__stack[data-count="1"] img { transform: translateX(-50%); } .ukf-tile__price { font-size: 13px; } .ukf-payin3 { margin: 14px 0 8px; font-size: 14px; text-align: center; color: var(--ukf-ink-2); } .ukf-paylogos { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .ukf-paylogos li { font-size: 11px; font-weight: 700; color: var(--ukf-ink-2); border: 1px solid var(--ukf-line); background: var(--ukf-white); border-radius: 6px; padding: 4px 7px; } ul.ukf-trust { list-style: none; margin: 0 0 18px; padding: 16px 0; border-top: 1px solid var(--ukf-line); border-bottom: 1px solid var(--ukf-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; text-align: center; font-size: 13px; line-height: 1.35; } ul.ukf-trust li { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ukf-ink-2); } .ukf-icon { color: var(--ukf-green); flex: none; } .ukf-acc details, .ukf-faqlist details { border-bottom: 1px solid var(--ukf-line); } .ukf-acc summary, .ukf-faqlist summary, .ukf-cat summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-weight: 700; font-family: var(--ukf-font-display); color: var(--ukf-ink); } .ukf-acc summary::-webkit-details-marker, .ukf-faqlist summary::-webkit-details-marker, .ukf-cat summary::-webkit-details-marker { display: none; } .ukf-acc summary::after, .ukf-faqlist summary::after, .ukf-cat summary::after { content: "+"; flex: none; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 400; font-size: 18px; color: var(--ukf-green); } .ukf-acc details[open] summary::after, .ukf-faqlist details[open] summary::after, .ukf-cat[open] summary::after { content: "\2212"; } .ukf-acc p, .ukf-acc ul, .ukf-faqlist p { margin: 0 0 14px; font-size: 15px; color: var(--ukf-ink-2); } .ukf-acc ul { padding-left: 1.2em; } /* Below the fold */ .ukf-pdp { clear: both; margin-top: 40px; } .ukf-jump { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; overflow-x: auto; background: var(--ukf-bg); border-bottom: 1px solid var(--ukf-line); padding: 8px 0; margin-bottom: 0; scrollbar-width: none; } .ukf-jump a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ukf-ink-2); text-decoration: none; } .ukf-jump a:hover { background: var(--ukf-green-tint); color: var(--ukf-green); } .ukf-band { padding: 56px 40px; margin: 0 -40px; scroll-margin-top: 64px; } .ukf-band--tint { background: var(--ukf-green-tint); } .ukf-band--cream { background: #F4F6FB; } .ukf-band h2 { margin-bottom: 14px; } .ukf-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .ukf-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ukf-green); margin-bottom: 6px; } .ukf-explainer h3 { font-size: 1rem; margin: 14px 0 4px; } .ukf-explainer p { font-size: 15px; margin-bottom: 6px; } .ukf-ticks { list-style: none; padding: 0; margin: 0 0 12px; font-size: 15px; } .ukf-ticks li::before { content: "\2713\00a0"; color: var(--ukf-green); font-weight: 700; } .ukf-desc h3 { font-size: 1.1rem; margin-top: 18px; } .ukf-desc ul, .ukf-desc ol { margin-left: 1.2em; } .ukf-hml { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 24px; } .ukf-hml__item { border-radius: var(--ukf-radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; background: var(--ukf-white); border-left: 6px solid; } .ukf-hml--high { border-color: #C2410C; } .ukf-hml--med { border-color: #E2A400; } .ukf-hml--low { border-color: #2E8B57; } .ukf-catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ukf-cat { background: var(--ukf-white); border: 1px solid var(--ukf-line); border-radius: 12px; padding: 0 16px; box-shadow: 0 4px 14px rgba(14,26,58,.05); } .ukf-cat p { margin: 0 0 14px; font-size: 15px; color: var(--ukf-ink-2); } .ukf-guarantee .ukf-split { align-items: center; grid-template-columns: 240px minmax(0, 1fr); } .ukf-badge { width: 220px; height: 220px; border-radius: 50%; background: #FFFFFF; color: var(--ukf-ink); border: 10px solid #C8102E; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; font-family: var(--ukf-font-display); font-weight: 700; line-height: 1.2; } .ukf-badge__big { font-size: 64px; font-weight: 800; line-height: 1; } .ukf-btn-outline { background: transparent !important; border: 1.5px solid var(--ukf-white) !important; color: var(--ukf-white) !important; } .ukf-btn-outline-dark { background: transparent !important; border: 1.5px solid var(--ukf-green) !important; color: var(--ukf-green) !important; } .ukf-steps { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ukf-steps li { background: var(--ukf-white); border-radius: var(--ukf-radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; } .ukf-steps__n { font-family: var(--ukf-font-display); font-weight: 800; font-size: 28px; color: var(--ukf-green); } .ukf-steps h3 { font-size: 1.05rem; margin: 0; } .ukf-steps p { font-size: 15px; margin: 0; color: var(--ukf-ink-2); } .ukf-textlink { margin-left: 14px; font-weight: 600; } .ukf-receive { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .ukf-receive li { display: flex; gap: 14px; align-items: flex-start; } .ukf-receive h3 { font-size: 1.1rem; margin: 0 0 4px; } .ukf-receive p { margin: 0; font-size: 15px; color: var(--ukf-ink-2); } .ukf-phonecard { border: 1px solid #BFCBE6; border-radius: var(--ukf-radius-lg); padding: 24px 24px 0; text-align: center; overflow: hidden; background: #F4F6FB; } .ukf-phonecard h3 { margin-bottom: 12px; } .ukf-phone { width: 240px; margin: 20px auto 0; background: #0E1A3A; border-radius: 34px 34px 0 0; padding: 10px 10px 0; } .ukf-phone__screen { background: var(--ukf-white); border-radius: 26px 26px 0 0; padding: 16px 16px 20px; text-align: left; font-size: 13px; } .ukf-phone__head { font-weight: 700; color: var(--ukf-green); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; text-align: center; } .ukf-phone__title { font-family: var(--ukf-font-display); font-weight: 800; font-size: 18px; text-align: center; margin: 6px 0 10px; } .ukf-phone__group { font-weight: 700; font-size: 12px; margin-top: 8px; } .ukf-phone__list { list-style: none; margin: 4px 0 0; padding: 0; } .ukf-phone__list li { padding-left: 14px; position: relative; line-height: 1.6; } .ukf-phone__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; } .ukf-phone__list.is-high li::before { background: #C2410C; } .ukf-phone__list.is-med li::before { background: #E2A400; } .ukf-phone__list.is-low li::before { background: #2E8B57; } .ukf-phone__note { margin-top: 10px; font-size: 11px; color: var(--ukf-muted-2); text-align: center; } .ukf-reviews-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: center; } .ukf-reviews-head h2 { font-size: 1.6rem; margin: 8px 0; } .ukf-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; } .ukf-carousel .ukf-review { flex: 0 0 280px; scroll-snap-align: start; } .ukf-verified { display: block; color: var(--ukf-green); font-size: 12px; font-weight: 600; margin-top: 2px; } .ukf-faqlist { max-width: 52rem; } .ukf-xsell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ukf-xsell__card { background: var(--ukf-white); border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ukf-ink); } .ukf-xsell__card img { border-radius: 10px; aspect-ratio: 1 / 1; object-fit: contain; background: var(--ukf-white); } .ukf-xsell__name { font-family: var(--ukf-font-display); font-weight: 800; font-size: 1.1rem; } .ukf-xsell__items { font-size: 14px; color: var(--ukf-muted-2); } .ukf-xsell__price { font-weight: 700; } .ukf-xsell__price del { color: #5C6378; font-weight: 400; } .ukf-xsell__card .button { margin-top: auto; text-align: center; } /* Header basket icon size (GeneratePress shrinks menu-bar SVGs) */ .ukf-basket svg { width: 22px !important; height: 22px !important; min-width: 22px; flex-shrink: 0; fill: none !important; } .ukf-basket a, .menu-bar-items .ukf-basket a { padding: 0 !important; } .ukf-basket a { color: var(--ukf-ink) !important; } @media (max-width: 900px) { .ukf-split, .ukf-guarantee .ukf-split, .ukf-reviews-wrap { grid-template-columns: 1fr; } .ukf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ukf-xsell { grid-template-columns: 1fr; } .ukf-badge { margin: 0 auto; width: 180px; height: 180px; } } @media (max-width: 768px) { .ukf-band { padding: 40px 16px; margin: 0 -16px; } .ukf-catgrid, .ukf-hml { grid-template-columns: 1fr; } ul.ukf-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ukf-pricebox strong, .ukf-pricebox del { font-size: 1.25rem; } .ukf-steps { grid-template-columns: 1fr; } } /* Digital product visual (replaces box shots) */ .ukf-visual { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 15%, #1B3A8C 0%, var(--ukf-green) 55%, var(--ukf-green-dark) 100%); } .ukf-visual--pet { background: radial-gradient(120% 90% at 85% 15%, #1B3A8C 0%, #012169 55%, #00164A 100%); } .ukf-visual__top { position: relative; z-index: 2; } .ukf-visual__phone { position: absolute; right: 7%; top: 19%; width: 29%; aspect-ratio: 9 / 18; background: #0E1A3A; border-radius: 22px; padding: 7px; box-shadow: 0 24px 40px rgba(0,0,0,.35); transform: rotate(6deg); } .ukf-visual__screen { background: #F7F8FC; border-radius: 16px; height: 100%; padding: 12% 10%; display: flex; flex-direction: column; gap: 7%; box-sizing: border-box; } .ukf-visual__screen b { font-family: var(--ukf-font-display); font-size: clamp(9px, 1.1vw, 13px); color: var(--ukf-ink); margin-bottom: 4%; } .ukf-visual__screen i { display: block; height: 6px; width: var(--w); border-radius: 3px; background: #DCE2EE; position: relative; margin-left: 12px; } .ukf-visual__screen i::before { content: ""; position: absolute; left: -12px; top: -1px; width: 8px; height: 8px; border-radius: 50%; } .ukf-visual__screen i.is-h::before { background: #C2410C; } .ukf-visual__screen i.is-m::before { background: #E2A400; } .ukf-visual__screen i.is-l::before { background: #2E8B57; } .ukf-visual__text { position: relative; z-index: 2; max-width: 54%; } .ukf-visual__name { font-size: clamp(1.5rem, 2.8vw, 2.2rem) !important; } .ukf-visual__tag { display: inline-block; margin-top: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: var(--ukf-white); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; } .ukf-visual--small .ukf-visual__phone { border-radius: 14px; padding: 4px; } .ukf-visual--small .ukf-visual__screen { border-radius: 10px; } .ukf-visual--small .ukf-visual__screen i { height: 4px; margin-left: 8px; } .ukf-visual--small .ukf-visual__screen i::before { left: -8px; width: 5px; height: 5px; } .ukf-visual--small .ukf-visual__tag { display: none; } .ukf-visual--small .ukf-visual__text { max-width: 62%; } .ukf-visual--small .ukf-visual__name { font-size: 1.05rem !important; } .ukf-visual--small .ukf-visual__phone { width: 28%; top: 24%; right: 6%; } .ukf-visual--small .ukf-visual__screen b { font-size: 7px; } .ukf-visual--small .ukf-visual__screen { gap: 5%; padding: 10% 8%; } .ukf-tile__people { display: flex; justify-content: center; gap: 1px; height: 22px; margin: 2px 0 4px; color: var(--ukf-green); } .ukf-tile__people svg { fill: currentColor; } .woocommerce div.product p.price del, .ukf-pricebox del .woocommerce-Price-currencySymbol { font-size: inherit; } /* ===== Illustrated visuals (v0.6) ===== */ .ukf-art { width: 72px; height: 72px; color: var(--ukf-green); } .ukf-art .f { fill: var(--ukf-green-tint); } .ukf-art .h { fill: #C2410C; stroke: #C2410C; } .ukf-art .m { fill: #E2A400; stroke: #E2A400; } .ukf-art .l { fill: #2E8B57; stroke: #2E8B57; } .ukf-hero-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; } .ukf-hero-art { position: relative; min-height: 520px; } .ukf-hero-art__blob { position: absolute; inset: 6% 2% 4% 8%; border-radius: 42% 58% 46% 54% / 52% 44% 56% 48%; background: radial-gradient(120% 100% at 30% 20%, #EEF2FA 0%, #DCE4F4 60%, #C9D5EE 100%); } .ukf-phone--free { position: absolute; left: 50%; top: 4%; transform: translateX(-50%) rotate(-4deg); width: 250px; border-radius: 36px; padding: 10px; background: #0E1A3A; box-shadow: 0 30px 60px rgba(14,26,58,.28); margin: 0; } .ukf-phone--free .ukf-phone__screen { border-radius: 28px; padding: 22px 18px 18px; } .ukf-hero-art__card { position: absolute; left: 0; bottom: 8%; display: flex; gap: 10px; align-items: center; background: var(--ukf-white); border-radius: 16px; padding: 10px 16px 10px 10px; box-shadow: 0 14px 30px rgba(14,26,58,.14); font-size: 13px; color: var(--ukf-muted-2); } .ukf-hero-art__card .ukf-art { width: 52px; height: 52px; } .ukf-hero-art__card strong { display: block; color: var(--ukf-ink); font-size: 14px; } .ukf-hero-art__chip { position: absolute; background: var(--ukf-white); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--ukf-ink); box-shadow: 0 10px 24px rgba(14,26,58,.12); white-space: nowrap; } .ukf-hero-art__chip--a { right: 0; top: 14%; } .ukf-hero-art__chip--b { right: 4%; top: 46%; background: var(--ukf-green); color: var(--ukf-white); } .ukf-hero-art__chip--c { right: 0; bottom: 12%; color: #9A6B00; } .ukf-steps--art { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ukf-steps--art li { align-items: flex-start; } .ukf-steps__art { position: relative; width: 96px; height: 96px; border-radius: 24px; background: var(--ukf-green-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .ukf-steps--art .ukf-steps__n { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--ukf-green); color: var(--ukf-white); font-size: 15px; display: flex; align-items: center; justify-content: center; } .ukf-card-visual { display: block; margin: -6px -6px 14px; text-decoration: none; } .ukf-card-visual .ukf-visual { aspect-ratio: 16 / 10; } .ukf-card-visual .ukf-visual__phone { top: 14%; width: 22%; } .ukf-phone-stage { position: relative; min-height: 470px; } .ukf-phone-stage .ukf-phone--free { top: 0; } .ukf-dark .ukf-phone-stage .ukf-phone--free { box-shadow: 0 30px 60px rgba(0,0,0,.45); background: #000F33; } .ukf-pet-band { background: linear-gradient(135deg, #012169 0%, #00164A 100%); color: #D8EAEE; border-radius: var(--ukf-radius-lg); padding: 40px; } .ukf-pet-band h2, .ukf-pet-band strong { color: var(--ukf-white); } .ukf-pet-band .wp-block-button__link { background: var(--ukf-white) !important; color: #00164A !important; border-color: var(--ukf-white) !important; } .ukf-pet-art { position: relative; min-height: 380px; color: #BFCBE6; } .ukf-pet-art svg { position: absolute; left: 0; bottom: 0; width: 58%; } .ukf-phone__screen { color: var(--ukf-ink); } .ukf-phone__title { color: var(--ukf-ink); } .ukf-pet-art .f { fill: currentColor; } .ukf-pet-art .ukf-phone--free { left: auto; right: 0; transform: rotate(5deg); width: 190px; top: 0; } @media (max-width: 900px) { .ukf-hero-split { grid-template-columns: 1fr; } .ukf-hero-art { min-height: 470px; max-width: 420px; margin: 0 auto; width: 100%; } .ukf-steps--art { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ukf-pet-art { min-height: 340px; max-width: 420px; margin: 0 auto; } } @media (max-width: 560px) { .ukf-steps--art { grid-template-columns: 1fr; } .ukf-hero-art__chip--c { display: none; } .ukf-phone--free { width: 220px; } } /* ===== Brand: Union Flag navy, red, white (v0.7) ===== */ body { background: var(--ukf-white); } .wp-block-button__link, .button, button.button, .woocommerce a.button, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce a.button.alt, .entry-content .wp-block-button .wp-block-button__link { background: var(--ukf-red); border-color: var(--ukf-red); color: var(--ukf-white); } .wp-block-button__link:hover, .woocommerce button.button.alt:hover, .woocommerce a.button:hover, .woocommerce a.button.alt:hover, .button:hover, .entry-content .wp-block-button .wp-block-button__link:hover { background: var(--ukf-red-dark); border-color: var(--ukf-red-dark); color: var(--ukf-white); } .entry-content .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ukf-green); border-color: var(--ukf-green); } .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ukf-green-tint); color: var(--ukf-green); } .ukf-btn-outline-dark { border-color: var(--ukf-green) !important; color: var(--ukf-green) !important; } .ukf-bar { background: var(--ukf-green); } .ukf-pricebox__save strong, .ukf-pricebox__save span { color: var(--ukf-red); } .ukf-tile__badge { background: var(--ukf-red-tint); color: var(--ukf-red); border-color: #F2C3CC; } .ukf-tile__badge.is-best { background: var(--ukf-green); color: var(--ukf-white); border-color: var(--ukf-green); } .ukf-hero-art__chip--b { background: var(--ukf-red); } .ukf-visual__badge { color: var(--ukf-red); } .ukf-visual--pet { background: radial-gradient(120% 90% at 85% 15%, #E0354F 0%, var(--ukf-red) 55%, #8E0B21 100%); } .ukf-pet-band { background: linear-gradient(135deg, var(--ukf-red) 0%, #8E0B21 100%); color: #FBE3E7; } .ukf-pet-band .wp-block-button__link { color: var(--ukf-red) !important; } .ukf-pet-band .ukf-pill { background: rgba(255,255,255,.16); color: var(--ukf-white); } .ukf-pet-art { color: #F6C2CB; } .ukf-badge { border-color: var(--ukf-red); } .ukf-badge__big { color: var(--ukf-red); } .ukf-band--tint { background: #F1F4FA; } .ukf-band--cream { background: #F7F8FC; } .ukf-pill { background: var(--ukf-green-tint); color: var(--ukf-green); } .ukf-card--featured { border-color: var(--ukf-red); box-shadow: 0 18px 40px rgba(200,16,46,.12); } .ukf-hero .wp-block-list li::before, .ukf-ticks li::before { color: var(--ukf-red); } .site-footer { background: var(--ukf-green-dark); } .wp-block-button__link, .button, a.button { text-decoration: none !important; } .ukf-steps li { border: 1px solid var(--ukf-line); } /* Wordmark */ .ukf-wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; line-height: 1; } .ukf-logo { display: inline-flex; align-items: center; gap: 10px; line-height: 1; white-space: nowrap; } .ukf-logo__badge { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 9px; border-radius: 9px; background: var(--ukf-red); color: #fff; font-family: var(--ukf-font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; padding-top: 1px; } .ukf-logo__name { font-family: var(--ukf-font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.025em; color: var(--ukf-green); } .ukf-logo--rev .ukf-logo__name { color: #fff; } .ukf-wordmark:hover .ukf-logo__badge { background: var(--ukf-red-dark); } @media (max-width: 600px) { .ukf-logo { gap: 8px; } .ukf-logo__badge { height: 32px; padding: 0 7px; border-radius: 7px; font-size: 17px; } .ukf-logo__name { font-size: 20px; } } /* Mobile: sticky add to basket bar */ .ukf-sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; align-items: center; justify-content: space-between; gap: 12px; background: var(--ukf-white); border-top: 1px solid var(--ukf-line); box-shadow: 0 -6px 24px rgba(14, 26, 58, 0.10); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); } .ukf-sticky-atc.is-visible { display: flex; } .ukf-sticky-atc .price { font-weight: 700; font-size: 16px; } @media (min-width: 769px) { .ukf-sticky-atc { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,22,74,.22); } } @media (max-width: 768px) { body { font-size: 16px; } .ukf-trust { grid-template-columns: 1fr; text-align: left; } } /* Card visuals: the card already shows its own badge */ .ukf-card-visual .ukf-visual__badge { display: none; } /* Tile price: "per test" on its own line so it never clips */ .ukf-tile__price small { display: block; font-size: 11px; color: var(--ukf-muted); } /* Extra gallery cards */ .ukf-gallery-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .ukf-gallery-card { position: relative; background: var(--ukf-green-tint); border-radius: 20px; padding: 18px; overflow: hidden; min-height: 300px; } .ukf-gallery-card__label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ukf-green); margin-bottom: 10px; } .ukf-gallery-card--report .ukf-phone-stage { min-height: 300px; } .ukf-gallery-card--report .ukf-phone--free { width: 190px; top: 0; transform: translateX(-50%) rotate(-3deg) scale(.92); transform-origin: top center; } .ukf-gallery-card--incl { background: var(--ukf-green); color: #fff; } .ukf-gallery-card--incl .ukf-gallery-card__label { color: #fff; opacity: .8; } .ukf-gallery-card--incl ul { list-style: none; margin: 0; padding: 0; } .ukf-gallery-card--incl li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid rgba(255,255,255,.15); font-weight: 600; line-height: 1.35; } .ukf-gallery-card--incl li:last-child { border-bottom: 0; } .ukf-gallery-card--incl li::before { content: ""; position: absolute; left: 0; top: 13px; width: 16px; height: 16px; border-radius: 50%; background: var(--ukf-red); box-shadow: inset 0 0 0 4px var(--ukf-red); } .ukf-gallery-card--incl li::after { content: ""; position: absolute; left: 5px; top: 16px; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (max-width: 768px) { .ukf-gallery-extra { display: none; } } /* Footer */ .site-footer .site-info, .site-info { background: transparent !important; color: #CBD3E8 !important; border-top: 1px solid rgba(255,255,255,.12); } .site-info a { color: #fff !important; } .site-info .ukf-disclaimer { color: #AEB8D6; font-size: 13px; max-width: 760px; margin: 0 auto; } .ukf-footer-cols { padding: 56px 0 32px; color: #CBD3E8; border-top: 4px solid var(--ukf-red); } .ukf-footer-cols__inner { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 0 40px; } .ukf-footer-brand__name { font-family: var(--ukf-font-display); font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 8px; } .ukf-footer-brand p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; } .ukf-footer-brand a, .ukf-footer-col a { color: #fff; text-decoration: none; } .ukf-footer-col a:hover, .ukf-footer-brand a:hover { text-decoration: underline; } .ukf-footer-col__title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #AEB8D6; margin-bottom: 12px; } .ukf-footer-col ul { list-style: none; margin: 0; padding: 0; } .ukf-footer-col li { margin: 0 0 9px; font-size: 15px; } @media (max-width: 900px) { .ukf-footer-cols__inner { grid-template-columns: 1fr 1fr; padding: 0 20px; } .ukf-footer-brand { grid-column: 1 / -1; } } /* Plain links styled as buttons inside page content */ .entry-content a.wp-element-button:not(.wp-block-button__link) { display: inline-block; background: var(--ukf-red); color: #fff !important; border-radius: 12px; font-family: var(--ukf-font-display); font-weight: 700; padding: 14px 24px; text-decoration: none !important; } .entry-content a.wp-element-button:not(.wp-block-button__link):hover { background: var(--ukf-red-dark); } /* Outline buttons: navy text on white, always visible */ .entry-content .wp-block-button.is-style-outline > .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link { background: #fff !important; color: var(--ukf-green) !important; border: 2px solid var(--ukf-green) !important; text-decoration: none !important; } .entry-content .wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--ukf-green) !important; color: #fff !important; } .ukf-dark .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent !important; color: #fff !important; border-color: #fff !important; } .ukf-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff !important; color: var(--ukf-green) !important; } /* Price box: keep the £ the same size as the number */ .ukf-pricebox .woocommerce-Price-currencySymbol { font-size: inherit; vertical-align: baseline; } /* ===== Guides (blog) ===== */ .single-post .entry-content { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 1.7; } .single-post .entry-header { max-width: 720px; margin: 0 auto 24px; } .single-post .entry-title { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.12; } .ukf-post-meta { display: inline-block; font-size: 14px; color: var(--ukf-muted); margin-top: 8px; } .single-post .entry-content h2 { font-size: 28px; margin: 44px 0 14px; scroll-margin-top: 90px; } .single-post .entry-content h3 { font-size: 21px; margin: 28px 0 10px; } .single-post .entry-content a:not(.ukf-gcard__btn):not(.ukf-guide) { color: var(--ukf-green); text-decoration-color: var(--ukf-red); text-underline-offset: 3px; } .ukf-toc { background: var(--ukf-green-tint); border-radius: 16px; padding: 20px 24px; margin: 24px 0 32px; } .ukf-toc__title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-green); margin: 0 0 8px; } .ukf-toc ol { margin: 0 0 0 20px; font-size: 16px; } .ukf-toc li { margin: 4px 0; } .ukf-gcard { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; border: 1px solid var(--ukf-line); border-left: 4px solid var(--ukf-red); border-radius: 16px; padding: 16px; margin: 36px 0; background: #fff; box-shadow: 0 8px 24px rgba(14,26,58,.06); } .ukf-gcard__visual { display: block; border-radius: 12px; overflow: hidden; } .ukf-gcard__visual .ukf-visual { margin: 0; } .ukf-gcard__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-red); margin: 0 0 4px; } .ukf-gcard__name { font-family: var(--ukf-font-display); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 0 0 8px; } .ukf-gcard__name a { color: var(--ukf-ink) !important; text-decoration: none !important; } .ukf-gcard__facts { list-style: none; margin: 0 0 12px; padding: 0; font-size: 15px; line-height: 1.5; } .ukf-gcard__facts li { padding-left: 20px; position: relative; } .ukf-gcard__facts li::before { content: "✓"; position: absolute; left: 0; color: var(--ukf-red); font-weight: 700; } .ukf-gcard__buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; } .ukf-gcard__price { font-weight: 800; font-size: 20px; } .ukf-gcard__price del { font-weight: 400; font-size: 15px; color: var(--ukf-muted); } .ukf-gcard__btn { background: var(--ukf-red); color: #fff !important; border-radius: 12px; padding: 12px 20px; font-family: var(--ukf-font-display); font-weight: 700; font-size: 16px; text-decoration: none !important; } .ukf-gcard__btn:hover { background: var(--ukf-red-dark); } .ukf-gcard--band { background: var(--ukf-green); border: 0; color: #CBD3E8; grid-template-columns: 240px 1fr; padding: 24px; } .ukf-gcard--band .ukf-gcard__kicker { color: #fff; opacity: .8; } .ukf-gcard--band .ukf-gcard__name a, .ukf-gcard--band .ukf-gcard__price { color: #fff !important; } .ukf-gcard--band .ukf-gcard__price del { color: #AEB8D6; } .ukf-gcard--band .ukf-gcard__facts li::before { color: #fff; } .ukf-guide-disclaimer { font-size: 14px; line-height: 1.6; color: var(--ukf-muted); border-top: 1px solid var(--ukf-line); padding-top: 16px; margin-top: 40px; } .ukf-related { margin-top: 48px; } .ukf-related h2 { margin-top: 0 !important; } .ukf-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ukf-guide { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; color: var(--ukf-ink) !important; border: 1px solid var(--ukf-line); border-radius: 16px; overflow: hidden; background: #fff; padding-bottom: 16px; transition: box-shadow .15s, transform .15s; } .ukf-guide:hover { box-shadow: 0 12px 28px rgba(14,26,58,.1); transform: translateY(-2px); } .ukf-guide__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-bottom: 8px; } .ukf-guide__img--blank { background: linear-gradient(135deg, var(--ukf-green) 0%, #1B3A8C 60%, var(--ukf-red) 140%); } .ukf-guide__cat, .ukf-guide__title, .ukf-guide__meta { padding: 0 16px; } .ukf-guide__cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ukf-red); } .ukf-guide__title { font-family: var(--ukf-font-display); font-weight: 700; font-size: 18px; line-height: 1.3; } .ukf-guide__meta { font-size: 13px; color: var(--ukf-muted); } .ukf-band__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; } .ukf-band__head h2 { margin: 0; } .ukf-band__more { font-weight: 700; color: var(--ukf-green); } /* Guides archive */ .blog .site-main, .archive.category .site-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog .site-main > .page-header, .archive.category .site-main > .page-header, .blog .site-main > .paging-navigation, .archive.category .site-main > .paging-navigation, .blog .site-main > .ukf-hub-head { grid-column: 1 / -1; } .blog .site-main article, .archive.category .site-main article { margin: 0; border: 1px solid var(--ukf-line); border-radius: 16px; overflow: hidden; background: #fff; } .blog .site-main article .inside-article, .archive.category .site-main article .inside-article { padding: 20px; } .blog .entry-summary, .archive.category .entry-summary { font-size: 15px; } .blog .entry-title, .archive.category .entry-title { font-size: 20px; line-height: 1.3; } @media (max-width: 900px) { .ukf-guides, .blog .site-main, .archive.category .site-main { grid-template-columns: 1fr; } .ukf-gcard, .ukf-gcard--band { grid-template-columns: 1fr; } .ukf-gcard__visual { max-width: 260px; } .single-post .entry-content { font-size: 17px; } } /* Priority upsell popup */ .ukf-upsell { border: 0; border-radius: 20px; padding: 28px 24px 16px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0,22,74,.35); color: var(--ukf-ink); } .ukf-upsell::backdrop { background: rgba(0,22,74,.55); } .ukf-upsell__close { position: absolute; top: 10px; right: 12px; background: none !important; border: 0; font-size: 28px; line-height: 1; color: var(--ukf-green) !important; padding: 6px 10px; cursor: pointer; min-height: 0; } .ukf-upsell__title { font-family: var(--ukf-font-display); font-weight: 800; font-size: 22px; text-align: center; color: var(--ukf-green); margin: 0 28px 18px; line-height: 1.25; } .ukf-upsell__offer { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; background: var(--ukf-green-tint); border: 2px solid var(--ukf-green); border-radius: 14px; padding: 14px 16px; cursor: pointer; margin: 0 0 14px; } .ukf-upsell__offer input { width: 22px; height: 22px; accent-color: var(--ukf-red); margin: 0; } .ukf-upsell__badge { width: 76px; height: 76px; border-radius: 50%; background: var(--ukf-green); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; line-height: 1.2; text-align: center; } .ukf-upsell__badge strong { font-size: 14px; font-family: var(--ukf-font-display); } .ukf-upsell__text { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.4; color: var(--ukf-muted); } .ukf-upsell__text strong { font-family: var(--ukf-font-display); font-size: 18px; color: var(--ukf-ink); } .ukf-upsell__price { font-family: var(--ukf-font-display); font-weight: 800; font-size: 18px; color: var(--ukf-red); white-space: nowrap; } .ukf-upsell__add { display: block; width: 100%; background: var(--ukf-red) !important; color: #fff !important; border: 0; border-radius: 12px; padding: 16px; font-family: var(--ukf-font-display); font-weight: 700; font-size: 18px; cursor: pointer; } .ukf-upsell__add:hover { background: var(--ukf-red-dark) !important; } .ukf-upsell__no { display: block; width: 100%; background: none !important; border: 0; color: var(--ukf-muted) !important; font-size: 16px; padding: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 480px) { .ukf-upsell__offer { grid-template-columns: auto 1fr auto; } .ukf-upsell__badge { display: none; } .ukf-upsell__title { font-size: 19px; } } /* ===== Distraction-free checkout ===== */ .ukf-focus .main-navigation, .ukf-focus .menu-toggle, .ukf-focus .ukf-bar, .ukf-focus .ukf-footer-cols { display: none !important; } .ukf-focus .inside-header { position: relative; justify-content: center; padding-top: 16px; padding-bottom: 16px; } .ukf-focus .site-header { border-bottom: 1px solid var(--ukf-line); } .ukf-focus__secure { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ukf-green); } .ukf-focus__basket { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--ukf-green-tint); color: var(--ukf-ink); } .ukf-focus__basket svg { width: 22px; height: 22px; flex-shrink: 0; } .ukf-focus__basket .ukf-basket__count { position: absolute; top: -4px; right: -4px; } .ukf-focus .entry-header, .ukf-focus .page-header { display: none; } .ukf-focus .site-content { padding-top: 28px; } .ukf-focus .site-info { padding: 20px 0; } .ukf-focus .site-info .ukf-disclaimer { display: none; } .ukf-focus__legal { margin: 0 0 6px; font-size: 14px; } .ukf-co-faq { margin-top: 24px; border: 1px solid var(--ukf-line); border-radius: 16px; padding: 20px; background: #fff; } .ukf-co-faq__title { font-size: 18px !important; margin: 0 0 8px !important; } .ukf-co-faq details { border-bottom: 1px solid var(--ukf-line); } .ukf-co-faq details:last-of-type { border-bottom: 0; } .ukf-co-faq summary { cursor: pointer; list-style: none; padding: 12px 28px 12px 0; position: relative; font-weight: 600; font-size: 15px; color: var(--ukf-ink); } .ukf-co-faq summary::-webkit-details-marker { display: none; } .ukf-co-faq summary::after { content: "+"; position: absolute; right: 2px; top: 9px; font-size: 20px; color: var(--ukf-green); } .ukf-co-faq details[open] summary::after { content: "–"; } .ukf-co-faq details p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ukf-muted); } .ukf-co-faq__contact { font-size: 14px; margin: 12px 0 10px; color: var(--ukf-muted); } .ukf-co-faq__contact a { color: var(--ukf-green); font-weight: 600; } .ukf-co-faq__trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--ukf-line); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 600; color: var(--ukf-green); } .ukf-co-faq__trust li::before { content: "✓ "; color: var(--ukf-red); } @media (max-width: 768px) { .ukf-focus__secure { left: 16px; font-size: 13px; } .ukf-focus__secure { gap: 4px; } .ukf-focus__basket { right: 16px; } .ukf-focus .inside-header { padding-left: 16px; padding-right: 16px; } .ukf-focus .ukf-wordmark { transform: scale(.9); } } @media (max-width: 420px) { .ukf-focus__secure span, .ukf-focus__secure { font-size: 0; } .ukf-focus__secure svg { width: 18px; height: 18px; } } .ukf-focus .site-content .inside-article { padding-top: 0; } .ukf-focus .entry-content { margin-top: 0; } .ukf-focus .wp-block-woocommerce-checkout { margin-top: 0; padding-top: 0; } .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button { background: var(--ukf-red) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; min-height: 56px; font-family: var(--ukf-font-display); font-weight: 700 !important; font-size: 18px !important; width: 100%; } .wc-block-components-checkout-place-order-button:hover, .wc-block-cart__submit-button:hover { background: var(--ukf-red-dark) !important; } /* Order summary: no repeated product blurb, no empty image boxes */ .wc-block-components-order-summary-item .wc-block-components-product-metadata__description, .wc-block-cart-item__product .wc-block-components-product-metadata__description { display: none; } .wc-block-components-order-summary-item__image img[src*="placeholder"] { opacity: 0; } /* Rendered product image is for feeds/basket; PDP shows the live visual, so no zoom trigger */ .single-product .woocommerce-product-gallery__trigger { display: none !important; } /* Guides hub header */ .ukf-hub-head { grid-column: 1 / -1; padding: 8px 0 8px; } .ukf-hub-head__kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-red); margin: 0 0 8px; } .ukf-hub-head__kicker a { color: inherit; text-decoration: none; } .ukf-hub-head h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 10px; } .ukf-hub-head__intro { font-size: 18px; color: var(--ukf-muted); max-width: 680px; margin: 0 0 20px; } .ukf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .ukf-chip { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ukf-line); background: #fff; color: var(--ukf-ink); font-size: 14px; font-weight: 600; text-decoration: none; } .ukf-chip:hover { border-color: var(--ukf-green); } .ukf-chip.is-active { background: var(--ukf-green); border-color: var(--ukf-green); color: #fff; } .ukf-hub .site-main > .ukf-gcard { grid-column: 1 / -1; margin: 8px 0 16px; } .ukf-hub .post-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .ukf-hub .entry-meta { font-size: 13px; } .ukf-hub article .read-more { font-weight: 700; color: var(--ukf-green); } /* Guides polish */ .ukf-hub .site-content { padding: 32px 40px 56px; } .ukf-hub .site-main { margin: 0 !important; } .single-post .entry-content .ukf-gcard__visual, .single-post .entry-content .ukf-gcard__visual * { text-decoration: none !important; color: #fff; } .single-post .featured-image, .single-post .page-header-image-single { max-width: 900px; margin: 0 auto 24px; } .single-post .featured-image img, .single-post .page-header-image-single img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; } .single-post .post-navigation, .single-post .comments-area, .single-post footer.entry-meta, .ukf-hub .comments-link, .ukf-hub footer.entry-meta { display: none !important; } .single-post .entry-content a[href^="http"]:not([href*="ukf-sandbox"]):not([href*="ukfoodintolerance"])::after { content: " ↗"; font-size: .8em; } @media (max-width: 768px) { .ukf-hub .site-content { padding: 20px 16px 40px; } } .ukf-hub .page-header { display: none !important; } .ukf-gcard__visual, .ukf-gcard__visual * { text-decoration: none !important; } /* Key takeaways + FAQ in guides */ .ukf-takeaways { background: var(--ukf-green-tint); border-left: 4px solid var(--ukf-red); border-radius: 12px; padding: 18px 22px; margin: 0 0 28px; } .ukf-takeaways__title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-green); margin: 0 0 8px; } .ukf-takeaways ul { margin: 0 0 0 18px; font-size: 16px; line-height: 1.55; } .ukf-takeaways li { margin: 6px 0; } .ukf-post-faq details { border-bottom: 1px solid var(--ukf-line); } .ukf-post-faq summary { cursor: pointer; list-style: none; padding: 14px 32px 14px 0; position: relative; font-weight: 700; font-size: 17px; } .ukf-post-faq summary::-webkit-details-marker { display: none; } .ukf-post-faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 22px; color: var(--ukf-green); } .ukf-post-faq details[open] summary::after { content: "–"; } .ukf-post-faq details p { margin: 0 0 14px; } .single-post .entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 20px 0 28px; display: block; overflow-x: auto; } .single-post .entry-content th { background: var(--ukf-green); color: #fff; text-align: left; padding: 10px 12px; font-weight: 700; } .single-post .entry-content td { border-bottom: 1px solid var(--ukf-line); padding: 10px 12px; vertical-align: top; } .single-post .entry-content tr:nth-child(even) td { background: #F7F9FD; } .ukf-price { font-weight: 700; white-space: nowrap; } /* Payment marks */ .ukf-paylogos { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .ukf-paylogos li { border: 0 !important; padding: 0 !important; background: none !important; line-height: 0; } .ukf-paylogos img { display: block; width: 38px; height: 24px; border: 1px solid #DCE2EE; border-radius: 4px; background: #fff; } .ukf-paylogos--footer { margin: 0 0 14px; } .ukf-paylogos--footer img { border-color: rgba(255,255,255,.2); } .ukf-paylogos--checkout { justify-content: flex-start; margin: 12px 0 0; } .ukf-paylogos--cart { margin-top: 14px; } /* Spec tiles */ .ukf-spec { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ukf-spec li { display: flex; align-items: center; gap: 8px; background: var(--ukf-green-tint); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.25; color: var(--ukf-muted); } .ukf-spec li svg { flex: none; color: var(--ukf-green); } .ukf-spec li strong { display: block; color: var(--ukf-ink); font-size: 14px; } @media (max-width: 600px) { .ukf-spec { grid-template-columns: repeat(2, 1fr); } } /* Availability, fees, ask us */ .ukf-avail { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ukf-ink); margin: 12px 0 2px; } .ukf-avail__dot { width: 9px; height: 9px; border-radius: 50%; background: #2E8B57; box-shadow: 0 0 0 4px rgba(46,139,87,.15); flex: none; } .ukf-nofees { font-size: 13px; color: var(--ukf-muted); margin: 0 0 4px 17px; } .ukf-askus { font-size: 13px; color: var(--ukf-muted); text-align: center; margin: 14px 0 0; } .ukf-askus a { color: var(--ukf-green); font-weight: 600; } /* Upgrade offer */ .ukf-upgrade { margin: 16px 0 0; border: 2px dashed var(--ukf-green); border-radius: 14px; padding: 14px 16px; background: #F7F9FD; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .ukf-upgrade__kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-red); margin: 0 0 2px; } .ukf-upgrade__title { font-family: var(--ukf-font-display); font-weight: 800; font-size: 17px; margin: 0 0 4px; color: var(--ukf-ink); } .ukf-upgrade__delta { font-family: var(--ukf-font-body); font-weight: 700; font-size: 14px; color: var(--ukf-green); white-space: nowrap; } .ukf-upgrade__desc { font-size: 13.5px; line-height: 1.45; color: var(--ukf-muted); margin: 0; } .ukf-upgrade__desc a { color: var(--ukf-green); font-weight: 600; } .woocommerce .ukf-upgrade__btn, .ukf-upgrade__btn { background: #fff !important; color: var(--ukf-green) !important; border: 2px solid var(--ukf-green) !important; border-radius: 10px; font-weight: 700; padding: 10px 14px; font-size: 14px; cursor: pointer; white-space: nowrap; min-height: 44px; } .ukf-upgrade__btn:hover { background: var(--ukf-green) !important; color: #fff !important; } @media (max-width: 600px) { .ukf-upgrade { grid-template-columns: 1fr; } .ukf-upgrade__btn { width: 100%; } } /* What the test covers: example items */ .ukf-cat__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ukf-green); margin: 12px 0 6px; } .ukf-cat__group { margin: 0 0 10px; } .ukf-cat__gname { display: block; font-size: 13px; font-weight: 700; color: var(--ukf-ink); margin: 0 0 6px; } .ukf-chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .ukf-chiplist li { font-size: 13px; background: #fff; border: 1px solid var(--ukf-line); border-radius: 999px; padding: 3px 10px; color: var(--ukf-ink); } .ukf-cat[open] { background: var(--ukf-green-tint); } .ukf-catgrid { align-items: start; } /* Review avatars */ .ukf-review figcaption { display: flex; align-items: center; gap: 10px; } .ukf-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--ukf-font-display); font-weight: 800; font-size: 16px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,22,74,.18); } /* Guarantee seal */ .ukf-seal-wrap { display: flex; justify-content: center; } .ukf-seal { width: 210px; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); } .ukf-seal--sm { width: 92px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,22,74,.2)); } .ukf-card .ukf-seal-wrap { float: right; margin: -8px 0 8px 24px; } .ukf-card .ukf-seal { width: 150px; } @media (max-width: 600px) { .ukf-card .ukf-seal-wrap { float: none; margin: 0 0 12px; } .ukf-seal { width: 170px; } } /* Guarantee pop-up */ .ukf-gdlg { border: 0; border-radius: 20px; padding: 24px 24px 12px; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 30px 80px rgba(0,22,74,.35); color: var(--ukf-ink); } .ukf-gdlg::backdrop { background: rgba(0,22,74,.55); } .ukf-gdlg__close { position: absolute; top: 10px; right: 12px; background: none !important; border: 0; font-size: 28px; line-height: 1; color: var(--ukf-green) !important; padding: 6px 10px; cursor: pointer; min-height: 0; } .ukf-gdlg__head { display: flex; align-items: center; gap: 16px; margin: 0 24px 12px 0; } .ukf-gdlg__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-red); margin: 0 0 2px; } .ukf-gdlg__head h2 { font-size: 24px; margin: 0; } .ukf-gdlg__body { font-size: 15px; line-height: 1.6; } .ukf-gdlg__body h2 { font-size: 18px; margin: 18px 0 6px; } .ukf-gdlg__body .wp-block-buttons, .ukf-gdlg__body .ukf-steps { display: none; } .ukf-gdlg__foot { text-align: right; margin: 12px 0 0; position: sticky; bottom: 0; background: #fff; padding: 10px 0; } .ukf-gdlg__ok { background: var(--ukf-red) !important; color: #fff !important; border: 0; border-radius: 12px; padding: 12px 22px; font-weight: 700; cursor: pointer; } [data-ukf-guarantee].is-link { cursor: pointer; } [data-ukf-guarantee].is-link span, .ukf-co-faq__trust [data-ukf-guarantee] { text-decoration: underline; text-decoration-color: rgba(200,16,46,.5); text-underline-offset: 3px; } /* Report download */ .ukf-download { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ukf-green) !important; border: 2px solid var(--ukf-green); border-radius: 12px; padding: 10px 16px; text-decoration: none !important; background: #fff; } .ukf-download:hover { background: var(--ukf-green); color: #fff !important; } .ukf-gallery-download { text-align: center; margin: 14px 0 0; } /* Illustrated steps */ .ukf-steps__art--scene { width: 100%; height: auto; aspect-ratio: 240 / 150; border-radius: 18px; padding: 0; overflow: visible; } .ukf-scene { width: 100%; height: 100%; display: block; } .ukf-steps--art .ukf-steps__art--scene .ukf-steps__n { top: 10px; left: 10px; right: auto; } /* Box master image in cards */ .ukf-boximg { display: block; background: radial-gradient(90% 80% at 45% 35%, #FFFFFF 0%, #EEF2FA 60%, #DDE4F2 100%); border-radius: 14px; overflow: hidden; } .ukf-boximg img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .ukf-card-visual .ukf-boximg img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 55%; } .ukf-gcard__visual .ukf-boximg img { aspect-ratio: 1 / 1; } .single-product div.product div.images img { border-radius: 20px; } /* Hub pages */ .ukf-chips--hub { margin: 18px 0 24px; } .ukf-alert { background: #FCEAEE; border-left: 4px solid var(--ukf-red); border-radius: 10px; padding: 14px 18px; font-size: 15px; margin: 0 0 28px; } .ukf-hubsec { scroll-margin-top: 90px; border-top: 1px solid var(--ukf-line); padding-top: 8px; } .ukf-hubfaq details { border-bottom: 1px solid var(--ukf-line); } .ukf-hubfaq summary { cursor: pointer; list-style: none; padding: 12px 32px 12px 0; position: relative; font-weight: 700; } .ukf-hubfaq summary::-webkit-details-marker { display: none; } .ukf-hubfaq summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font-size: 22px; color: var(--ukf-green); } .ukf-hubfaq details[open] summary::after { content: "–"; } .ukf-hubfaq details p { margin: 0 0 12px; } .page .entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 16px 0 28px; display: block; overflow-x: auto; } .page .entry-content th { background: var(--ukf-green); color: #fff; text-align: left; padding: 10px 12px; } .page .entry-content td { border-bottom: 1px solid var(--ukf-line); padding: 10px 12px; vertical-align: top; } /* Lines and offers inside the add-to-basket form take a full row */ .woocommerce div.product form.cart { flex-wrap: wrap; } .woocommerce div.product form.cart .ukf-avail, .woocommerce div.product form.cart .ukf-nofees, .woocommerce div.product form.cart .ukf-upgrade { flex: 0 0 100%; width: 100%; } .woocommerce div.product form.cart .ukf-nofees { margin-left: 0; padding-left: 17px; } .ukf-footer-brand .ukf-logo__badge { height: 34px; font-size: 18px; border-radius: 8px; padding: 0 8px; } .ukf-footer-brand .ukf-logo__name { font-size: 22px; } /* ---------- Human layer (v0.14) ---------- */ .ukf-familiar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0 20px; } .ukf-familiar p { margin: 0; background: var(--ukf-green-tint); border-radius: var(--ukf-radius); padding: 18px 20px; font-size: 17px; line-height: 1.45; color: var(--ukf-ink); font-weight: 500; position: relative; } .ukf-familiar p::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ukf-red); } .ukf-familiar__close { font-size: 18px; font-weight: 600; color: var(--ukf-green); max-width: 720px; } @media (max-width: 700px) { .ukf-familiar { grid-template-columns: 1fr; } } .ukf-human { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--ukf-line); border-left: 4px solid var(--ukf-red); border-radius: var(--ukf-radius); padding: 20px 22px; margin: 8px 0 24px; } .ukf-human__icon { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ukf-green-tint); color: var(--ukf-green); display: flex; align-items: center; justify-content: center; } .ukf-human__title { font-family: var(--ukf-font-display); font-weight: 800; font-size: 19px; color: var(--ukf-green); margin: 0 0 6px; } .ukf-human p { margin: 0 0 8px; } .ukf-human__cta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 6px 0 0 !important; } .ukf-human__mail { font-weight: 700; color: var(--ukf-green); } .ukf-human__cta span { font-size: 14px; color: var(--ukf-muted); } .ukf-chooser { background: #fff; border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius-lg); padding: 24px 26px; margin: 28px 0 8px; box-shadow: 0 6px 24px rgba(14,26,58,.06); } .ukf-chooser__kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-red); margin: 0 0 10px; } .ukf-chooser__title { font-family: var(--ukf-font-display); font-weight: 800; font-size: 20px; color: var(--ukf-green); margin: 0 0 14px; } .ukf-chooser__opts { display: flex; flex-wrap: wrap; gap: 10px; } .ukf-chooser__opts button { background: var(--ukf-green-tint); color: var(--ukf-green); border: 2px solid transparent; border-radius: 999px; padding: 11px 18px; font-weight: 700; font-size: 15px; cursor: pointer; } .ukf-chooser__opts button:hover, .ukf-chooser__opts button:focus-visible { border-color: var(--ukf-green); background: #fff; } .ukf-chooser__again { background: none; border: 0; color: var(--ukf-green); text-decoration: underline; font-weight: 600; cursor: pointer; margin-left: 10px; } .ukf-chooser__help { font-size: 14px; color: var(--ukf-muted); margin-top: 12px; } .ukf-honest { margin: 14px 0 6px; border: 1px solid var(--ukf-line); border-radius: 10px; background: #FAFBFD; } .ukf-honest summary { cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: 14.5px; color: var(--ukf-green); list-style: none; } .ukf-honest summary::-webkit-details-marker { display: none; } .ukf-honest summary::after { content: "+"; float: right; font-weight: 800; } .ukf-honest[open] summary::after { content: "–"; } .ukf-honest p { padding: 0 14px 12px; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ukf-muted); } .ukf-thanks { background: var(--ukf-green-tint); border-radius: var(--ukf-radius-lg); padding: 26px 28px; margin: 0 0 28px; } .ukf-thanks__kicker { font-weight: 700; color: var(--ukf-red); margin: 0 0 4px; font-size: 15px; } .ukf-thanks h2 { margin: 0 0 14px; font-size: 24px; color: var(--ukf-green); } .ukf-thanks__steps { margin: 0 0 14px 20px; } .ukf-thanks__steps li { margin-bottom: 8px; } .ukf-thanks__note { font-size: 14.5px; color: var(--ukf-muted); } .ukf-thanks__links { font-weight: 600; margin: 0; } .ukf-empty-basket { text-align: center; max-width: 560px; margin: 40px auto; } .ukf-empty-basket h2 { color: var(--ukf-green); } .ukf-empty-basket__ctas { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; } .ukf-empty-basket__help { font-size: 14.5px; color: var(--ukf-muted); } .ukf-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin: 16px 0 28px; } .ukf-team__person { margin: 0; text-align: center; } .ukf-team__person img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 10px; } .ukf-team__person strong { display: block; color: var(--ukf-green); } .ukf-team__person span { display: block; font-size: 14px; color: var(--ukf-muted); } .ukf-team__person em { display: block; font-size: 14px; margin-top: 4px; } /* ---------- Landing & promo pages (v0.16) ---------- */ .ukf-lp .site-content { padding-top: 0; } .ukf-lp .entry-content > *:first-child { margin-top: 0; } .ukf-lp__help { margin-left: auto; font-size: 14px; color: var(--ukf-muted); } .ukf-lp__help a { font-weight: 700; color: var(--ukf-green); } .ukf-lp__hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 40px 0 28px; } .ukf-lp__hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; margin: 10px 0 14px; color: var(--ukf-ink); } .ukf-lp__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; } .ukf-lp__ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 15px; } .ukf-lp__ticks li { padding-left: 22px; position: relative; } .ukf-lp__ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--ukf-red); font-weight: 800; } .ukf-lp__sec { padding: 36px 0; border-top: 1px solid var(--ukf-line); } .ukf-lp__sec h2 { margin-top: 0; } .ukf-lpcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin: 18px 0 10px; } .ukf-lpcard { position: relative; background: #fff; border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 6px; } .ukf-lpcard.is-featured { border: 2px solid var(--ukf-red); box-shadow: 0 10px 30px rgba(200,16,46,.10); } .ukf-lpcard__flag { position: absolute; top: -12px; left: 18px; background: var(--ukf-red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; } .ukf-lpcard__media img { width: 100%; height: auto; border-radius: 12px; display: block; } .ukf-lpcard__name { font-size: 1.2rem; margin: 6px 0 0; } .ukf-lpcard__name a { color: var(--ukf-ink); text-decoration: none; } .ukf-lpcard__items { margin: 0; color: var(--ukf-muted); font-weight: 600; font-size: 14px; } .ukf-lpcard__price { margin: 2px 0; font-family: var(--ukf-font-display); font-weight: 800; font-size: 1.4rem; color: var(--ukf-ink); } .ukf-lpcard__price del { font-size: .95rem; color: var(--ukf-muted); font-weight: 600; margin-right: 6px; } .ukf-lpcard__price ins { text-decoration: none; } .ukf-lpcard__desc { font-size: 14.5px; color: var(--ukf-ink-2, var(--ukf-ink)); margin: 0 0 8px; flex: 1; } .ukf-lpcard .wp-element-button { text-align: center; } .entry-content .ukf-lpcard a.wp-element-button.is-outline, .entry-content .ukf-lp__ctas a.wp-element-button.is-outline { background: #fff !important; color: var(--ukf-green) !important; border: 2px solid var(--ukf-green) !important; } .ukf-lp__note { background: var(--ukf-amber-tint); color: var(--ukf-amber-ink); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; } .ukf-lp__report { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; } .ukf-lp__guarantee { display: flex; gap: 24px; align-items: center; } .ukf-lp__guarantee .ukf-seal, .ukf-lp__guarantee svg { flex: none; width: 140px; height: auto; } .ukf-lp__final { text-align: center; margin-top: 16px; } .ukf-pill--red { background: var(--ukf-red) !important; color: #fff !important; } .ukf-promo--after .ukf-lp__visual { opacity: .85; } .ukf-bar a { color: inherit; text-decoration: underline; font-weight: 700; } @media (max-width: 860px) { .ukf-lp__hero, .ukf-lp__report { grid-template-columns: 1fr; gap: 20px; } .ukf-lp__visual { display: none; } .ukf-lp__ticks { grid-template-columns: 1fr; } .ukf-lp__help { display: none; } .ukf-lp__guarantee { flex-direction: column; text-align: center; } } /* ---------- Who it's for (v0.17) ---------- */ .ukf-fit { background: var(--ukf-green-tint); border-radius: var(--ukf-radius); padding: 16px 18px; margin: 4px 0 18px; } .ukf-fit__label { margin: 0 0 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-red); } .ukf-fit__best { margin: 0 0 8px; font-family: var(--ukf-font-display); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--ukf-green); } .ukf-fit__list { list-style: none; margin: 0 0 8px; padding: 0; } .ukf-fit__list li { position: relative; padding-left: 24px; margin: 0 0 4px; font-size: 15px; } .ukf-fit__list li::before { content: "✓"; position: absolute; left: 2px; color: #1F7A4D; font-weight: 800; } .ukf-fit__alt { margin: 0; font-size: 14px; color: var(--ukf-muted); } .ukf-fit__alt a { font-weight: 700; } .ukf-card-best, .ukf-lpcard__best, .ukf-loop-best { font-size: 14.5px; line-height: 1.4; color: var(--ukf-green); font-weight: 600; margin: 4px 0 8px; } .ukf-lpcard__best { background: var(--ukf-green-tint); border-radius: 8px; padding: 8px 10px; } .ukf-compare-wrap { overflow-x: auto; margin: 14px 0 10px; -webkit-overflow-scrolling: touch; } .ukf-compare { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius); font-size: 14.5px; } .ukf-compare th, .ukf-compare td { padding: 11px 12px; border-bottom: 1px solid var(--ukf-line); text-align: center; vertical-align: middle; } .ukf-compare tbody th { text-align: left; font-weight: 600; color: var(--ukf-ink); width: 34%; } .ukf-compare thead th { font-family: var(--ukf-font-display); font-weight: 800; font-size: 16px; } .ukf-compare thead th a { color: var(--ukf-green); text-decoration: none; } .ukf-compare__items { display: block; font-family: var(--ukf-font-body); font-weight: 600; font-size: 13px; color: var(--ukf-muted); } .ukf-compare__best td { font-size: 13.5px; color: var(--ukf-green); font-weight: 600; text-align: left; } .ukf-compare__no { color: #A3ACC2; font-weight: 700; } .ukf-compare__price td { border-bottom: 0; } .ukf-compare__price .wp-element-button { display: block; margin: 8px auto 0; padding: 8px 14px; font-size: 14px; max-width: 120px; } .ukf-compare tr:last-child th { border-bottom: 0; } .ukf-lp__compare { margin: 14px 0; border: 1px solid var(--ukf-line); border-radius: var(--ukf-radius); padding: 0 16px; background: #fff; } .ukf-lp__compare summary { cursor: pointer; padding: 13px 0; font-weight: 700; color: var(--ukf-green); } .entry-content .ukf-compare th, .entry-content .ukf-compare td { background: #fff; color: var(--ukf-ink); } .entry-content .ukf-compare tbody th { background: #F7F9FD; } .entry-content .ukf-compare thead th { background: #fff; color: var(--ukf-green); border-bottom: 2px solid var(--ukf-line); } .entry-content .ukf-compare thead th a { color: var(--ukf-green); } .entry-content .ukf-compare .ukf-compare__best td { background: var(--ukf-green-tint); color: var(--ukf-green); } .entry-content .ukf-compare .ukf-compare__best th { background: var(--ukf-green-tint); color: var(--ukf-green); font-weight: 800; } .entry-content .ukf-compare__price del { color: var(--ukf-muted); font-size: 13px; } .entry-content .ukf-compare__price ins { text-decoration: none; font-weight: 800; } .entry-content .ukf-compare__price a.wp-element-button { display: block !important; width: fit-content; margin: 8px auto 0 !important; padding: 8px 16px !important; font-size: 14px !important; } .entry-content .ukf-compare__price td { white-space: nowrap; } .ukf-vs { min-width: 520px; } .entry-content .ukf-vs tbody th { width: 30%; font-weight: 700; } .entry-content .ukf-vs td { text-align: left; } .entry-content .ukf-vs td.is-us { background: var(--ukf-green-tint); } .entry-content .ukf-vs thead th.is-us { background: var(--ukf-green); color: #fff; text-align: left; padding: 14px 16px; } .entry-content .ukf-vs thead th.is-us .ukf-logo__badge { height: 28px; font-size: 15px; border-radius: 7px; padding: 0 7px; } .entry-content .ukf-vs thead th.is-us .ukf-logo__name { font-size: 18px; color: #fff; } .entry-content .ukf-vs thead th.is-them { text-align: left; color: var(--ukf-muted); font-size: 17px; } .entry-content .ukf-vs thead th.is-them span { display: block; font-family: var(--ukf-font-body); font-weight: 600; font-size: 13px; } .ukf-vs__cell { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; } .ukf-vs__cell svg { flex: none; margin-top: 1px; } .entry-content .ukf-vs td.is-them .ukf-vs__cell span { color: var(--ukf-muted); } .entry-content table.ukf-compare { display: table !important; width: 100% !important; } /* Product gallery: main image + up to 4 extras on one row of thumbnails */ .single-product .woocommerce-product-gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; } .single-product .woocommerce-product-gallery .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; } .single-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 12px; opacity: .7; transition: opacity .15s; } .single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .single-product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; outline: 2px solid #012169; outline-offset: 2px; } /* Back to top */ .ukf-totop { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ukf-green); color: #fff; box-shadow: 0 8px 24px rgba(0,22,74,.28); cursor: pointer; transition: transform .15s, background-color .15s, bottom .2s; } .ukf-totop[hidden] { display: none; } .ukf-totop:hover { background: var(--ukf-green-dark); transform: translateY(-2px); } .ukf-totop:focus-visible { outline: 3px solid var(--ukf-red); outline-offset: 3px; } .ukf-totop--lift { bottom: calc(84px + env(safe-area-inset-bottom)); } @media (prefers-reduced-motion: reduce) { .ukf-totop { transition: none; } } @media print { .ukf-totop { display: none !important; } } /* Live chat bubble sits bottom right; back-to-top stacks above it, both clear of bottom bars (set by inc/chat.php). */ html.ukf-chat #ukf-totop, html.ukf-chat body.ukf-lp--promo #ukf-totop { right: 22px; bottom: calc(var(--ukf-float-base, 0px) + 88px) !important; } /* Download link under a gallery slider */ .ukf-gallery-download--below { float: left; clear: left; width: 48%; margin: 14px 0 0; } @media (max-width: 768px) { .ukf-gallery-download--below { float: none; width: auto; } } /* Guide author box */ .ukf-post-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ukf-author { display: flex; gap: 18px; align-items: flex-start; background: var(--ukf-green-tint); border-radius: 18px; padding: 22px 24px; margin: 40px 0 8px; } .ukf-author__img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; } .ukf-author__img--logo { border-radius: 16px; padding: 0; } .ukf-author__img--initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; color: #fff; background: var(--ukf-green); } .ukf-author__body p { margin: 0; } .ukf-author__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-red); } .ukf-author__name { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 20px; color: var(--ukf-ink); margin-top: 2px !important; } .ukf-author__name a { color: inherit; text-decoration: none; } .ukf-author__name a:hover { text-decoration: underline; } .ukf-author__role { font-size: 14px; color: var(--ukf-muted); font-weight: 600; } .ukf-author__bio { font-size: 15px; line-height: 1.6; margin-top: 8px !important; color: var(--ukf-ink-2); } .ukf-author__reviewer { font-size: 14px; margin-top: 8px !important; font-weight: 600; } .ukf-author__meta { font-size: 13px; color: var(--ukf-muted); margin-top: 10px !important; } .ukf-author__meta a { color: var(--ukf-green); } .ukf-authors { display: grid; gap: 16px; margin: 16px 0 28px; } .ukf-authors .ukf-author { margin: 0; scroll-margin-top: 100px; } @media (max-width: 600px) { .ukf-author { flex-direction: column; gap: 12px; padding: 18px; } .ukf-author__img { width: 56px; height: 56px; } } /* Basket (block cart) */ .woocommerce-cart .entry-title { margin-bottom: 8px; } .wc-block-cart .wc-block-cart__sidebar .wc-block-components-panel__button, .wc-block-cart .wc-block-cart__totals-title { font-family: var(--ukf-font-display); } .wc-block-cart .wc-block-cart__totals-title { font-size: 14px !important; letter-spacing: .08em; color: var(--ukf-muted); } .wc-block-cart .wc-block-cart__sidebar { background: #fff; border: 1px solid var(--ukf-line); border-radius: 18px; padding: 20px 22px !important; align-self: flex-start; } .wc-block-cart .wc-block-cart-items th { font-size: 13px; letter-spacing: .06em; color: var(--ukf-muted); } .wc-block-cart .wc-block-components-product-name { font-family: var(--ukf-font-display); font-weight: 700; color: var(--ukf-ink); text-decoration: none; } .ukf-basket-mb { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ukf-green-tint); border-radius: 14px; padding: 14px 18px; margin: 18px 0 0; } .ukf-basket-mb p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ukf-ink-2); } .ukf-basket-mb p span { color: var(--ukf-muted); } .ukf-basket-mb__btn { flex: none; background: #fff !important; color: var(--ukf-green) !important; border: 1.5px solid var(--ukf-green) !important; border-radius: 10px !important; padding: 9px 16px !important; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; } .ukf-basket-mb__btn:hover { background: var(--ukf-green) !important; color: #fff !important; } .ukf-basket-mb__btn:disabled { opacity: .6; cursor: wait; } .ukf-basket-help { margin-top: 18px; } .ukf-basket-help__trust { list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; color: var(--ukf-ink-2); } .ukf-basket-help__trust li { position: relative; padding-left: 24px; margin: 6px 0; } .ukf-basket-help__trust li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2.5px solid #1F7A4D; border-bottom: 2.5px solid #1F7A4D; transform: rotate(-45deg); } .ukf-basket-help__trust li.is-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .ukf-co-faq--basket { margin-top: 16px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--ukf-line); border-radius: 0; } @media (max-width: 600px) { .ukf-basket-mb { flex-direction: column; align-items: flex-start; } } /* Header: tighter menu on small laptops */ @media (min-width: 1025px) and (max-width: 1240px) { .main-navigation .main-nav ul li a { padding-left: 12px !important; padding-right: 12px !important; } .ukf-logo__name { font-size: 24px; } } .entry-content .wc-block-cart table.wc-block-cart-items { display: table !important; width: 100% !important; } /* PDP breathing room (Rob's review, all product pages): one consistent vertical rhythm */ .single-product div.product .summary .ukf-rating { margin-bottom: 12px !important; } .single-product div.product .summary .product_title { margin-bottom: 22px !important; } .single-product div.product .summary .ukf-spec { margin-bottom: 28px !important; } .single-product div.product .summary .ukf-fit { margin: 0 0 32px !important; } .single-product div.product .summary .ukf-pricebox { margin-bottom: 24px !important; } .single-product div.product .summary .ukf-digital-notice { margin-bottom: 28px !important; } .single-product div.product .summary .woocommerce-product-details__short-description { margin-bottom: 32px !important; } .single-product div.product .summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } .single-product div.product .summary form.cart { margin-bottom: 36px !important; } .single-product div.product .summary form.cart .ukf-tiles { margin-bottom: 26px !important; } .single-product div.product .summary form.cart .ukf-priority { margin-bottom: 26px !important; } .single-product div.product .summary form.cart .ukf-avail { margin-top: 18px !important; } .single-product div.product .summary form.cart .ukf-nofees { margin-bottom: 8px !important; } .single-product div.product .summary form.cart .ukf-upgrade { margin-top: 32px !important; } .single-product div.product .summary .ukf-payin3 { margin: 0 0 12px !important; } .single-product div.product .summary .ukf-paylogos { margin-bottom: 32px !important; } .single-product div.product .summary .ukf-trust { margin-bottom: 32px !important; row-gap: 14px !important; column-gap: 12px !important; } .single-product div.product .summary .ukf-honest { margin: 0 0 16px !important; } @media (min-width: 769px) { .single-product .ukf-band { padding-top: 80px !important; padding-bottom: 80px !important; } .single-product .ukf-band h2 { margin-bottom: 28px; } } .single-product div.product .summary .ukf-tiles legend { margin-bottom: 20px !important; font-size: 16px; } .single-product div.product .summary .ukf-avail { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .single-product div.product .summary .ukf-avail__dot { flex: none; margin-top: 7px; } /* The add to basket button was floated, so the line under it sat flush against it */ .single-product div.product .summary form.cart .single_add_to_cart_button { float: none !important; display: block; width: 100%; } .single-product div.product .summary form.cart .ukf-avail { margin-top: 22px !important; clear: both; } /* Product pages: breadcrumb sits closer to the header (was ~80–110px) */ .single-product .site-main { margin-top: 0 !important; } .single-product .inside-article { padding-top: 24px !important; } .single-product .inside-article > .entry-content { margin-top: 0 !important; } .single-product .woocommerce-breadcrumb { margin-bottom: 20px !important; } @media (max-width: 768px) { .single-product .inside-article { padding-top: 16px !important; } } /* Product gallery arrows and counter */ .single-product .woocommerce-product-gallery .flex-viewport { position: relative; } .single-product .woocommerce-product-gallery .flex-direction-nav { list-style: none; margin: 0; padding: 0; } .single-product .woocommerce-product-gallery .flex-direction-nav li { margin: 0; } .single-product .woocommerce-product-gallery .flex-direction-nav a { position: absolute; top: 50%; z-index: 5; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(0,22,74,.18); border: 1px solid var(--ukf-line); font-size: 0; color: transparent; overflow: hidden; display: block; transition: transform .15s, background-color .15s; } .single-product .woocommerce-product-gallery .flex-direction-nav a::before { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; border-top: 2.5px solid var(--ukf-green); border-right: 2.5px solid var(--ukf-green); } .single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev { left: 12px; } .single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev::before { transform: translate(-35%, -50%) rotate(-135deg); } .single-product .woocommerce-product-gallery .flex-direction-nav .flex-next { right: 12px; } .single-product .woocommerce-product-gallery .flex-direction-nav .flex-next::before { transform: translate(-65%, -50%) rotate(45deg); } .single-product .woocommerce-product-gallery .flex-direction-nav a:hover { background: #fff; transform: scale(1.06); } .single-product .woocommerce-product-gallery .flex-direction-nav a:focus-visible { outline: 3px solid var(--ukf-red); outline-offset: 2px; } .ukf-gal-count { position: absolute; right: 12px; bottom: 12px; z-index: 5; background: rgba(14,26,58,.78); color: #fff; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 11px; letter-spacing: .02em; pointer-events: none; } @media (hover: hover) and (min-width: 1025px) { .single-product .woocommerce-product-gallery .flex-direction-nav a { opacity: .85; } .single-product .woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; } } /* Gap between the main image and the thumbnail row */ .single-product .woocommerce-product-gallery .flex-control-thumbs { margin-top: 16px !important; padding-top: 0 !important; } /* Room for the selected-thumbnail outline so it isn't clipped at the edges */ .single-product .woocommerce-product-gallery .flex-control-thumbs { padding: 4px !important; margin-left: -4px !important; margin-right: -4px !important; } /* "What's covered": sections start closed; opening one doesn't stretch its neighbour */ .ukf-catgrid { align-items: start; } .ukf-catgrid + .ukf-small { margin-top: 20px; } /* No orphans: balance headings, avoid single-word last lines in body copy (sitewide) */ h1, h2, h3, h4, .ukf-fit__best, .ukf-lp h1 { text-wrap: balance; } p, li, dd, figcaption, summary, .ukf-small { text-wrap: pretty; } /* Homepage hero v2: product range image, tighter intro, CTAs above the fold on phones */ .ukf-hero-img { display: block; width: 100%; height: auto; border-radius: 24px; } .ukf-hero-img--m { display: none; } .ukf-hero .ukf-hero-rating { font-size: 14px; color: var(--ukf-muted); margin: 14px 0 0; } .ukf-hero .ukf-hero-rating b { color: #E3A008; letter-spacing: 1px; font-weight: 400; } @media (max-width: 768px) { .home .site-main { margin-top: 0 !important; } .home .inside-article { padding-top: 12px !important; } .home .ukf-hero-split { gap: 0; } .home .ukf-hero { padding: 8px 0 0; } .home .ukf-hero .ukf-pill { font-size: 13px; padding: 5px 12px; margin-bottom: 12px; } .home .ukf-hero h1 { font-size: clamp(32px, 9vw, 42px) !important; line-height: 1.05; margin-bottom: 12px; } .home .ukf-hero .ukf-lead { font-size: 16.5px; line-height: 1.55; margin-bottom: 16px; } .ukf-hero-img--m { display: block; margin: 4px -8px 18px; width: calc(100% + 16px); max-width: none; border-radius: 18px; } .home .ukf-hero-visual { display: none; } .home .ukf-hero .wp-block-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .home .ukf-hero .wp-block-buttons .wp-block-button { width: 100%; margin: 0; } .home .ukf-hero .wp-block-buttons .wp-block-button__link { width: 100%; padding: 14px 10px; font-size: 16px; text-align: center; } .home .ukf-hero .wp-block-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 13.5px; margin-top: 16px; } } /* Us vs the others: fit phones without sideways scrolling */ @media (max-width: 600px) { .ukf-vs { min-width: 0 !important; table-layout: fixed; } .entry-content .ukf-vs th, .entry-content .ukf-vs td { padding: 10px 8px !important; } .entry-content .ukf-vs tbody th { width: 32%; font-size: 13px; } .ukf-vs__cell { font-size: 13px; gap: 6px; } .ukf-vs__cell svg { width: 16px; height: 16px; } .entry-content .ukf-vs thead th.is-us { padding: 10px 8px; } .entry-content .ukf-vs thead th.is-us .ukf-logo__badge { height: 22px; font-size: 12px; padding: 0 5px; } .entry-content .ukf-vs thead th.is-us .ukf-logo__name { font-size: 13px; white-space: normal; } .entry-content .ukf-vs thead th.is-them { font-size: 14px; } .entry-content .ukf-vs thead th.is-them span { font-size: 11.5px; } } /* Compare tables: never push the page sideways; the 3-test table fits phones */ .ukf-compare-wrap { max-width: 100%; min-width: 0; } @media (max-width: 600px) { .ukf-compare { min-width: 0 !important; table-layout: fixed; } .entry-content .ukf-compare th, .entry-content .ukf-compare td { padding: 9px 5px; font-size: 12.5px; line-height: 1.35; } .entry-content .ukf-compare tbody th { width: 31%; padding-left: 8px; } .entry-content .ukf-compare thead th { font-size: 13.5px; } .ukf-compare__items { font-size: 11.5px; } .ukf-compare__best td { font-size: 11.5px !important; } .entry-content .ukf-compare__price td { font-size: 13px; } .entry-content .ukf-compare__price del, .entry-content .ukf-compare__price ins { display: block; } .ukf-compare__price .wp-element-button { padding: 7px 6px; font-size: 12.5px; max-width: none; } .ukf-compare svg { width: 16px; height: 16px; } } /* Guarantee seal: the new seal carries its own soft shadow, so no extra CSS shadow; tidy card layout on phones */ .ukf-seal { filter: none !important; } .ukf-nowrap { white-space: nowrap; } @media (max-width: 600px) { .ukf-card .wp-block-group__inner-container:has(> .ukf-seal-wrap) { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; align-items: center; } .ukf-card .wp-block-group__inner-container:has(> .ukf-seal-wrap) > * { grid-column: 1 / -1; } .ukf-card .wp-block-group__inner-container:has(> .ukf-seal-wrap) > .ukf-seal-wrap { grid-column: 1; float: none; margin: 0; } .ukf-card .wp-block-group__inner-container:has(> .ukf-seal-wrap) > .ukf-seal-wrap + * { grid-column: 2; margin: 0 !important; font-size: 22px !important; line-height: 1.2; } .ukf-card .ukf-seal, .ukf-seal { width: 96px; } .ukf-card .wp-block-group__inner-container:has(> .ukf-seal-wrap) > p:first-of-type { margin-top: 16px; } .ukf-lp__guarantee .ukf-seal, .ukf-lp__guarantee svg { width: 112px; } } /* "Register test" (results portal) in the header: quieter than the shop links */ .main-navigation .ukf-menu-register > a { color: var(--ukf-muted) !important; } .main-navigation .ukf-menu-register > a:hover { color: var(--ukf-green) !important; } /* 0.25.1: Couple/Family tile notes, free priority (promo) */ .ukf-tile__note { font-size: 12px; line-height: 1.2; color: var(--ukf-muted-2); margin-bottom: 2px; } .ukf-tile.is-selected .ukf-tile__note { color: var(--ukf-ink-2); } .ukf-priority.is-free { cursor: default; border: 2px solid var(--ukf-green); background: var(--ukf-green-tint); padding: 13px; } .ukf-priority__tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ukf-green); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .ukf-priority.is-free .ukf-priority__price { font-weight: 700; color: var(--ukf-green); } .ukf-priority.is-free .ukf-priority__price del { font-weight: 400; color: var(--ukf-muted-2); margin-right: 2px; } /* 0.25.3: header fits with "Register test" (basket icon never wraps) */ @media (min-width: 1025px) { .main-navigation .inside-navigation { flex-wrap: nowrap; } } @media (min-width: 1025px) { .main-navigation .main-nav ul li a { padding-left: 12px !important; padding-right: 12px !important; } } @media (min-width: 1025px) and (max-width: 1199px) { /* Small laptops: the portal link stays in the footer, emails and thank-you page. */ .main-navigation .ukf-menu-register { display: none; } .main-navigation .main-nav ul li a { padding-left: 10px !important; padding-right: 10px !important; } } /* 0.25.5: homepage hero sits close to the header on tablet and desktop (was 84px of stacked spacing) */ @media (min-width: 769px) { body.home #main.site-main { margin-top: 0 !important; } body.home .inside-article { padding-top: 0 !important; } body.home .entry-content > .ukf-hero-split:first-child, body.home .entry-content > .wp-block-group.ukf-hero:first-child { margin-top: 0 !important; } body.home .ukf-hero { padding-top: 32px !important; } } /* ===== 0.26.0: Black Friday page (layout follows the GetTested Black Friday Event design) ===== */ :root { --ukf-bf-black: #09090B; } body.ukf-lp--promo { overflow-x: clip; } body.ukf-lp--promo #main.site-main { margin-top: 0 !important; margin-bottom: 0 !important; } body.ukf-lp--promo .inside-article { padding-top: 0 !important; padding-bottom: 0 !important; } body.ukf-lp--promo .entry-content > .ukf-bf-hero:first-child { margin-top: 0 !important; } .ukf-bf-hero { width: 100vw; margin-left: calc(50% - 50vw); background: var(--ukf-bf-black); color: #FAFAFA; } .ukf-bf-hero__in { max-width: 1200px; margin: 0 auto; padding: 52px 24px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; } .ukf-bf-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FAFAFA; border: 1px solid #3F3F46; padding: 6px 12px; border-radius: 999px; } .ukf-bf-eyebrow span { color: #FCA5A5; } .ukf-bf-hero h1 { color: #fff !important; margin: 0 !important; font-size: clamp(2rem, 4.4vw, 2.9rem) !important; line-height: 1.1 !important; letter-spacing: -.02em; } .ukf-bf-sub { margin: 6px 0 0; font-size: 16px; color: #A1A1AA; } .ukf-bf-clock { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 26px; } .ukf-bf-clock__label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #A1A1AA; } .ukf-bf-clock__units { display: flex; gap: 8px; } .ukf-bf-clock__units span { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 6px 6px 5px; border-radius: 10px; border: 1px solid #3F3F46; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A1A1AA; } .ukf-bf-clock__units b { font-family: var(--ukf-font-display); font-size: 24px; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; } .ukf-bf-clock__fallback { font-weight: 700; color: #fff; } .ukf-bf-clock__units[hidden], .ukf-bf-clock__fallback[hidden] { display: none; } .ukf-bf-offers { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } .ukf-bf-offer { border: 1px solid #3F3F46; border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .ukf-bf-offer--main { border-color: #7F1D1D; background: linear-gradient(180deg, rgba(200,16,46,.16), rgba(200,16,46,0) 70%); } .ukf-bf-offer__kicker { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FCA5A5; } .ukf-bf-offer__kicker--muted { color: #A1A1AA; } .ukf-bf-offer__big { font-family: var(--ukf-font-display); font-size: clamp(3.2rem, 6vw, 4.5rem); line-height: .95; font-weight: 800; letter-spacing: -.03em; color: #fff; } .ukf-bf-offer__what { font-size: 22px; font-weight: 700; } .ukf-bf-offer__note { font-size: 16px; color: #D4D4D8; max-width: 34ch; } .ukf-bf-btn { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 12px; background: var(--ukf-red); color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 17px; } .ukf-bf-btn:hover { background: #A50D26; } .ukf-bf-btn--light { background: #FAFAFA; color: var(--ukf-bf-black) !important; } .ukf-bf-btn--light:hover { background: #fff; } .ukf-bf-small { margin: 16px 0 0; font-size: 13px; color: #A1A1AA; } .ukf-bf-ctas { margin: 18px 0 0; } .ukf-bf-trust { width: 100vw; margin-left: calc(50% - 50vw); border-bottom: 1px solid #E4E4E7; padding: 14px 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 36px; font-size: 14px; font-weight: 500; color: #3F3F46; } .ukf-bf-trust span::before { content: "✓"; color: var(--ukf-red); font-weight: 800; margin-right: 8px; } .ukf-bf-sec { padding: 40px 0 8px; } .ukf-bf-sec--tight { padding-top: 16px; } .ukf-bf-sec h2 { margin: 0 0 4px; font-size: 32px; letter-spacing: -.01em; } .ukf-bf-sec__head p { margin: 0 0 18px; color: #52525B; } .ukf-bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; } .ukf-bf-card { border: 1px solid #E4E4E7; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: #fff; } .ukf-bf-card__media { position: relative; display: block; background: #F4F4F5; } .ukf-bf-card__media img { width: 100%; height: auto; display: block; } .ukf-bf-card__badge { position: absolute; top: 12px; right: 12px; background: var(--ukf-red); color: #fff; font-weight: 800; font-size: 13px; border-radius: 8px; padding: 4px 9px; } .ukf-bf-card__chip { position: absolute; left: 12px; bottom: 12px; background: var(--ukf-green); color: #fff; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; } .ukf-bf-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .ukf-bf-card__body h3 { margin: 0; font-size: 17px; line-height: 1.3; } .ukf-bf-card__body h3 a { color: var(--ukf-ink); text-decoration: none; } .ukf-bf-card__fit { margin: 0; font-size: 13.5px; line-height: 1.4; color: #52525B; } .ukf-bf-card__price { margin: 2px 0 0; font-family: var(--ukf-font-display); font-weight: 800; font-size: 22px; color: var(--ukf-ink); } .ukf-bf-card__price del { font-size: 14px; font-weight: 500; color: #71717A; margin-right: 6px; } .ukf-bf-card__price ins { text-decoration: none; } .ukf-bf-card__spacer { flex: 1; } .ukf-bf-card__btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; background: var(--ukf-bf-black); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none !important; } .ukf-bf-card__btn:hover { background: #27272A; } .ukf-bf-card__btn.added { background: #E6EBF5; color: var(--ukf-green) !important; } .ukf-bf-card .added_to_cart { display: block; text-align: center; font-size: 14px; font-weight: 700; margin-top: 6px; } .ukf-bf-card__more { font-size: 13px; text-align: center; color: var(--ukf-green); } .ukf-bf-banner { background: var(--ukf-bf-black); color: #FAFAFA; border-radius: 20px; padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .ukf-bf-banner > div { flex: 1 1 420px; min-width: 0; } .ukf-bf-banner h2 { color: #fff; font-size: 28px; } .ukf-bf-banner p { margin: 0; color: #D4D4D8; } .ukf-bf-banner .ukf-bf-btn { margin: 0; } .ukf-bf-pet { text-align: center; margin-top: 14px; } .ukf-bf-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .ukf-bf-steps li { border: 1px solid #E4E4E7; border-radius: 16px; padding: 20px; } .ukf-bf-steps__n { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--ukf-bf-black); color: #fff; font-weight: 800; align-items: center; justify-content: center; } .ukf-bf-steps h3 { font-size: 1.1rem; margin: 12px 0 6px; } .ukf-bf-steps p { margin: 0; font-size: 15px; color: #3F3F46; } .ukf-bf-remindband { width: 100vw; margin: 40px 0 0 calc(50% - 50vw); background: #E6EBF5; } .ukf-bf-remindband__in { max-width: 1200px; margin: 0 auto; padding: 44px 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; } .ukf-bf-remindband__in > div { flex: 1 1 380px; } .ukf-bf-remindband h2 { margin: 0 0 4px; font-size: 26px; } .ukf-bf-remindband p { margin: 0; color: #3F3F46; } .ukf-remind { flex: 1 1 420px; max-width: 520px; margin: 0; } .ukf-remind__row { display: flex; gap: 10px; } .ukf-remind__row input[type=email] { flex: 1; min-width: 0; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid #A1A1AA; font-size: 16px; background: #fff; color: var(--ukf-ink); } .ukf-remind__btn { min-height: 50px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ukf-green); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; white-space: nowrap; } .ukf-remind__btn:hover { background: #001A55; } .ukf-remind__hp { position: absolute; left: -9999px; } .ukf-remind__small { font-size: 13px; color: #52525B; margin: 8px 0 0 !important; } .ukf-remind__ok { margin: 10px 0 0 !important; font-weight: 700; color: #1F7A4D !important; } .ukf-remind__err { margin: 10px 0 0 !important; font-weight: 700; color: #B4343F !important; } .ukf-remind[data-done] .ukf-remind__row, .ukf-remind[data-done] .ukf-remind__small { display: none; } .ukf-remind p[hidden] { display: none; } .ukf-bf-faq { max-width: 860px; margin: 0 auto; padding-bottom: 64px; } .ukf-bf-faq h2 { margin-bottom: 14px; } .ukf-bf-faq details { border: 1px solid #E4E4E7; border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; } .ukf-bf-faq summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; } .ukf-bf-faq summary::-webkit-details-marker { display: none; } .ukf-bf-faq summary::after { content: "+"; float: right; font-weight: 700; color: #71717A; } .ukf-bf-faq details[open] summary::after { content: "–"; } .ukf-bf-faq details p { margin: 10px 0 0; color: #3F3F46; } .ukf-bf-sticky { display: none; } /* Menu link and bar chip */ .main-navigation .ukf-menu-promo > a { color: var(--ukf-red) !important; font-weight: 800 !important; } .ukf-bar__ends { display: inline-block; background: #fff; color: #9F0C24; border-radius: 6px; padding: 1px 8px; margin-right: 10px; font-weight: 800; } .ukf-bar__ends[hidden] { display: none; } @media (max-width: 900px) { .ukf-bf-steps { grid-template-columns: 1fr; } } @media (max-width: 640px) { .ukf-bf-hero__in { padding: 22px 14px 24px; } .ukf-bf-sub { font-size: 14px; } .ukf-bf-clock { margin: 12px 0 16px; } .ukf-bf-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ukf-bf-offer { padding: 14px 10px; border-radius: 14px; gap: 2px; } .ukf-bf-offer__kicker { font-size: 11px; } .ukf-bf-offer__big { font-size: 30px; white-space: nowrap; } .ukf-bf-offer__what { font-size: 15px; } .ukf-bf-offer__note { font-size: 13px; line-height: 1.3; } .ukf-bf-offer .ukf-bf-btn { min-height: 44px; padding: 0 10px; font-size: 14px; width: 100%; margin-top: auto; } .ukf-bf-offer__note { margin-bottom: 8px; } .ukf-bf-trust { gap: 4px 18px; font-size: 13px; padding: 10px 14px; } .ukf-bf-sec h2 { font-size: 24px; } .ukf-bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ukf-bf-card__body { padding: 10px; } .ukf-bf-card__body h3 { font-size: 14.5px; } .ukf-bf-card__fit, .ukf-bf-card__more, .ukf-bf-card__chip { display: none; } .ukf-bf-card__badge { font-size: 11px; top: 6px; right: 6px; padding: 2px 6px; } .ukf-bf-card__price { font-size: 18px; } .ukf-bf-card__btn { min-height: 44px; font-size: 14px; } .ukf-bf-banner { padding: 20px 16px; border-radius: 14px; } .ukf-bf-banner h2 { font-size: 21px; } .ukf-bf-banner .ukf-bf-btn { width: 100%; } .ukf-remind__row { flex-direction: column; } .ukf-remind__btn { width: 100%; } .ukf-bf-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ukf-bf-black); color: #FAFAFA; padding: 8px 10px 12px 14px; align-items: center; justify-content: space-between; gap: 8px; box-shadow: 0 -6px 18px rgba(0,0,0,.18); font-size: 14px; } .ukf-bf-sticky a { background: #FAFAFA; color: var(--ukf-bf-black); border-radius: 10px; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; } body.ukf-lp--promo #ukf-totop { bottom: 76px; } } .ukf-promo-on .ukf-bar { background: var(--ukf-red) !important; color: #fff; } /* While the Black Friday menu link shows, Contact leaves the desktop menu (still in the footer) so it fits on one line. */ @media (min-width: 1025px) { .ukf-promo-menu .main-navigation .menu > li:has(> a[href*="/contact"]) { display: none; } } /* 0.26.3: Black Friday page split into people / pets */ .ukf-bf-jump { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 22px 0 0; } .ukf-bf-jump a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; border: 1.5px solid #D4D4D8; color: var(--ukf-ink) !important; font-weight: 700; text-decoration: none !important; } .ukf-bf-jump a:hover { border-color: var(--ukf-bf-black); } .ukf-bf-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ukf-red); } .ukf-bf-sec--pet { margin-top: 32px; padding-top: 40px; border-top: 1px solid #E4E4E7; } #tests, #pet-tests { scroll-margin-top: 90px; } /* 0.26.6: no lone card on the Black Friday page: 5 people tests in one row on desktop, 3 + 2 on tablets; pets 3 across */ @media (min-width: 641px) { #tests .ukf-bf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #pet-tests .ukf-bf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { #tests .ukf-bf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } #tests .ukf-bf-card__body { padding: 14px; } #tests .ukf-bf-card__body h3 { font-size: 16px; } } @media (max-width: 640px) { /* Odd last card spans both columns, side by side, so nothing sits alone */ .ukf-bf-grid > .ukf-bf-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; } .ukf-bf-grid > .ukf-bf-card:last-child:nth-child(odd) .ukf-bf-card__media { flex: 0 0 46%; } .ukf-bf-grid > .ukf-bf-card:last-child:nth-child(odd) .ukf-bf-card__media img { height: 100%; object-fit: cover; } } /* 0.26.7: Black Friday multibuy breakdown */ .ukf-bf-mb { scroll-margin-top: 90px; } .ukf-bf-tiers { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ukf-bf-tier { border: 1px solid #E4E4E7; border-radius: 16px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: #fff; } .ukf-bf-tier.is-best { background: var(--ukf-bf-black); border-color: var(--ukf-bf-black); color: #FAFAFA; } .ukf-bf-tier__who { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ukf-red); } .ukf-bf-tier.is-best .ukf-bf-tier__who { color: #FCA5A5; } .ukf-bf-tier__n { font-size: 15px; font-weight: 600; color: #52525B; } .ukf-bf-tier.is-best .ukf-bf-tier__n, .ukf-bf-tier.is-best .ukf-bf-tier__on { color: #D4D4D8; } .ukf-bf-tier__off { font-family: var(--ukf-font-display); font-size: 30px; font-weight: 800; line-height: 1.1; margin-top: 4px; } .ukf-bf-tier__on { font-size: 14px; color: #52525B; } .ukf-bf-mbtable-wrap { overflow-x: auto; border: 1px solid #E4E4E7; border-radius: 16px; } .ukf-bf-mbtable { width: 100%; border-collapse: collapse; margin: 0; display: table !important; font-size: 15px; } .ukf-bf-mbtable caption { text-align: left; font-weight: 700; padding: 14px 16px 6px; } .ukf-bf-mbtable th, .ukf-bf-mbtable td { padding: 12px 10px; border-top: 1px solid #F0F0F2; text-align: center; border-left: 0; border-right: 0; } .ukf-bf-mbtable thead th { border-top: 0; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ukf-ink); background: #FAFAFA; } .ukf-bf-mbtable thead th span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #71717A; } .ukf-bf-mbtable th[scope=row] { text-align: left; font-weight: 700; padding-left: 16px; } .ukf-bf-mbtable th[scope=row] a { color: var(--ukf-ink); text-decoration: none; } .ukf-bf-mbtable td a { display: inline-block; min-width: 72px; padding: 8px 6px; border-radius: 10px; font-weight: 700; color: var(--ukf-ink); text-decoration: none; border: 1px solid transparent; } .ukf-bf-mbtable td a:hover { border-color: var(--ukf-bf-black); background: #FAFAFA; } .ukf-bf-mbtable td:last-child a { color: var(--ukf-red); } .ukf-bf-mb__note { margin-top: 10px; } @media (max-width: 640px) { .ukf-bf-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ukf-bf-tier { padding: 12px 8px; } .ukf-bf-tier__off { font-size: 24px; } .ukf-bf-mbtable { font-size: 13px; } .ukf-bf-mbtable th, .ukf-bf-mbtable td { padding: 8px 3px; } .ukf-bf-mbtable th[scope=row] { padding-left: 10px; } .ukf-bf-mbtable thead th { font-size: 10.5px; letter-spacing: 0; } .ukf-bf-mbtable td a { min-width: 0; padding: 6px 2px; } } /* multibuy table: beat the site-wide table styles */ .entry-content .ukf-bf-mbtable thead th { background: #FAFAFA !important; color: var(--ukf-ink) !important; border-bottom: 1px solid #E4E4E7; } .entry-content .ukf-bf-mbtable tbody th[scope=row] { background: #fff !important; color: var(--ukf-ink) !important; } .entry-content .ukf-bf-mbtable tbody tr:nth-child(even) th, .entry-content .ukf-bf-mbtable tbody tr:nth-child(even) td { background: #FCFCFD !important; } .ukf-bf-mbtable__who { display: block; } .ukf-bf-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 640px) { .ukf-bf-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ukf-bf-tier { padding: 10px 4px; border-radius: 12px; } .ukf-bf-tier__who { font-size: 11px; letter-spacing: .03em; } .ukf-bf-tier__n, .ukf-bf-tier__on { font-size: 12px; } .ukf-bf-tier__off { font-size: 21px; } .ukf-bf-mbtable-wrap { overflow-x: visible; } .ukf-bf-mbtable { table-layout: fixed; } .ukf-bf-mbtable th[scope=row] { width: 26%; font-size: 12.5px; line-height: 1.25; } .ukf-bf-mbtable__who { display: none; } .ukf-bf-mbtable thead th { font-size: 12px; } .ukf-bf-mbtable caption { padding: 10px 10px 4px; font-size: 14px; } } @media (max-width: 640px) { .ukf-bf-mbtable thead th span.ukf-bf-mbtable__who { display: none; } .ukf-bf-mbtable thead th span { font-size: 11.5px; color: var(--ukf-ink); font-weight: 700; } .ukf-bf-mbtable th[scope=row] { width: 31%; font-size: 12px; word-break: normal; overflow-wrap: normal; hyphens: none; padding-left: 8px; padding-right: 2px; } .ukf-bf-mbtable thead th:first-child { width: 31%; padding-left: 8px; font-size: 11px; } .ukf-bf-mbtable td { font-size: 12px; padding: 8px 1px; } .ukf-bf-mbtable td a { padding: 6px 0; font-size: 12px; letter-spacing: -.01em; } } /* 0.27.3: seal with a straight ribbon; bigger on phones so "30 DAYS MONEY-BACK" is readable */ .ukf-seal { aspect-ratio: 260 / 250; } @media (max-width: 600px) { .ukf-seal { width: 150px; } .ukf-card .wp-block-group__inner-container:has(> .ukf-seal-wrap) { grid-template-columns: 124px 1fr; } .ukf-card .ukf-seal { width: 124px; } .ukf-lp__guarantee .ukf-seal, .ukf-lp__guarantee svg { width: 150px; } .ukf-seal--sm { width: 96px; } } /* 0.28.0: pet multibuy tiles (paw icons), BF pet saving line */ .ukf-tiles--pet .ukf-tile__people svg { fill: currentColor; } .ukf-bf-petmb { display: inline-block; margin-top: 6px !important; font-weight: 700; color: var(--ukf-ink) !important; background: #F4F4F5; border-radius: 10px; padding: 8px 12px; } /* ===== 0.29.0: mobile menu panel ===== */ .ukf-mm { position: fixed; inset: 0; z-index: 100000; } .ukf-mm[hidden] { display: none; } html.ukf-mm-lock, html.ukf-mm-lock body { overflow: hidden; } .ukf-mm__scrim { position: absolute; inset: 0; background: rgba(9, 13, 30, .5); opacity: 0; transition: opacity .2s ease; } .ukf-mm__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 400px); background: #F6F7FB; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; box-shadow: -12px 0 40px rgba(9,13,30,.25); outline: none; } .ukf-mm.is-open .ukf-mm__scrim { opacity: 1; } .ukf-mm.is-open .ukf-mm__panel { transform: none; } @media (prefers-reduced-motion: reduce) { .ukf-mm__panel, .ukf-mm__scrim { transition: none; } } .ukf-mm__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; background: #fff; border-bottom: 1px solid #E6E9F0; } .ukf-mm__logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; } .ukf-mm__logo b { background: var(--ukf-red); color: #fff; border-radius: 8px; padding: 3px 7px; font-family: var(--ukf-font-display); font-weight: 800; font-size: 15px; } .ukf-mm__logo span { font-family: var(--ukf-font-display); font-weight: 800; font-size: 18px; color: var(--ukf-green); letter-spacing: -.02em; } .ukf-mm__close { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #F1F3F8; color: var(--ukf-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .ukf-mm__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 28px; } .ukf-mm a { text-decoration: none !important; } .ukf-mm__h { margin: 22px 4px 8px !important; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6B7590; } .ukf-mm__body > .ukf-mm__h:first-child { margin-top: 4px !important; } /* Promo */ .ukf-mm__promo { position: relative; display: grid; gap: 2px; padding: 14px 44px 14px 16px; border-radius: 16px; background: #09090B; color: #FAFAFA !important; } .ukf-mm__promo-k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FCA5A5; } .ukf-mm__promo strong { font-family: var(--ukf-font-display); font-size: 20px; letter-spacing: -.01em; } .ukf-mm__promo > span:not(.ukf-mm__promo-k) { font-size: 14px; color: #D4D4D8; } .ukf-mm__promo svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #fff; } /* Shop tiles */ .ukf-mm__shop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ukf-mm__tile { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--ukf-green); color: #fff !important; min-height: 112px; } .ukf-mm__tile--pet { background: var(--ukf-red); } .ukf-mm__tile svg { width: 30px; height: 30px; margin-bottom: auto; } .ukf-mm__tile strong { font-family: var(--ukf-font-display); font-size: 17px; line-height: 1.15; margin-top: 10px; } .ukf-mm__tile span { font-size: 13px; opacity: .85; } .ukf-mm__top { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid #E6E9F0; color: var(--ukf-ink) !important; } .ukf-mm__top-img { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #F1F3F8; display: block; } .ukf-mm__top-img img, .ukf-mm__top-img .ukf-boximg { width: 100%; height: 100%; object-fit: cover; display: block; } .ukf-mm__top-txt { flex: 1; display: grid; gap: 1px; min-width: 0; } .ukf-mm__top-txt em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ukf-red); } .ukf-mm__top-txt strong { font-size: 15.5px; line-height: 1.25; } .ukf-mm__top-price { font-size: 14px; font-weight: 700; } .ukf-mm__top-price del { color: #8A93A8; font-weight: 500; margin-right: 4px; } .ukf-mm__top-price ins { text-decoration: none; } .ukf-mm__top > svg, .ukf-mm__choose > svg:last-child, .ukf-mm__list a > svg:last-child { flex: none; width: 18px; height: 18px; color: #A3ACC2; } .ukf-mm__choose { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: #E6EBF5; color: var(--ukf-ink) !important; font-size: 14.5px; line-height: 1.3; } .ukf-mm__choose > svg:first-child { flex: none; color: var(--ukf-green); } .ukf-mm__choose span { flex: 1; } /* Lists */ .ukf-mm__list { list-style: none; margin: 0 !important; padding: 0; background: #fff; border: 1px solid #E6E9F0; border-radius: 16px; overflow: hidden; } .ukf-mm__list li + li { border-top: 1px solid #EEF0F5; } .ukf-mm__list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; color: var(--ukf-ink) !important; } .ukf-mm__list a > svg:first-child { flex: none; color: var(--ukf-green); } .ukf-mm__list a span { flex: 1; display: grid; } .ukf-mm__list strong { font-size: 15.5px; font-weight: 600; } .ukf-mm__list small { font-size: 13px; color: #6B7590; line-height: 1.3; } .ukf-mm__foot { margin: 22px 4px 0 !important; font-size: 13px; color: #6B7590; text-align: center; } .ukf-mm__foot a { color: var(--ukf-green) !important; font-weight: 600; } @media (min-width: 1025px) { .ukf-mm { display: none !important; } } html.ukf-mm-lock .ukf-fb, html.ukf-mm-lock .ukf-fb-layer, html.ukf-mm-lock .ukf-totop, html.ukf-mm-lock .ukf-sticky-atc { display: none !important; } /* 0.29.2: hero v3 (transparent render, people + pet), pet link */ .ukf-hero .ukf-hero-pet { font-size: 15px; color: var(--ukf-muted); margin: 12px 0 0 !important; } .ukf-hero .ukf-hero-pet a { color: var(--ukf-red); font-weight: 700; } .ukf-hero-img { border-radius: 0; } .ukf-pet-range__img { display: block; width: 100%; height: auto; } /* hero ticks: tidy 2 x 2 grid on desktop, one column on small phones */ .home .ukf-hero .wp-block-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 18px; } .home .ukf-hero .wp-block-list li { padding-left: 20px; text-indent: -20px; line-height: 1.4; } @media (max-width: 480px) { .home .ukf-hero .wp-block-list { grid-template-columns: 1fr; font-size: 14.5px; } } /* 0.29.4: pet band goes deep navy so the red pet boxes stand out; soft red glow behind the render */ .ukf-pet-band { background: radial-gradient(70% 90% at 78% 45%, rgba(200,16,46,.28) 0%, rgba(200,16,46,0) 60%), linear-gradient(135deg, #0B1B4D 0%, #071238 100%) !important; color: #DCE3F2; } .ukf-pet-band .wp-block-button__link { background: var(--ukf-red) !important; color: #fff !important; border-color: var(--ukf-red) !important; } .ukf-pet-band .ukf-pill { background: rgba(255,255,255,.12); color: #fff; } .ukf-pet-range { margin: -10px -10px -10px 0; } @media (max-width: 768px) { .ukf-pet-range { margin: 8px -12px -12px; } } /* ===== 0.29.5: feedback 4 Nov ===== */ /* Compare table on phones: sideways scroll, pinned feature column, hint + edge fade */ .ukf-swipe { position: relative; } .ukf-swipe__hint { display: none; } @media (max-width: 600px) { .ukf-swipe.is-scrollable .ukf-swipe__hint { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 8px; padding: 7px 12px; border-radius: 999px; background: var(--ukf-green-tint); color: var(--ukf-green); font-size: 13.5px; font-weight: 700; transition: opacity .25s; } .ukf-swipe__hint svg { animation: ukf-nudge 1.4s ease-in-out infinite; } .ukf-swipe.is-moved .ukf-swipe__hint { opacity: .45; } @keyframes ukf-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { .ukf-swipe__hint svg { animation: none; } } .ukf-compare-wrap--swipe { overflow-x: auto !important; overscroll-behavior-x: contain; border-radius: var(--ukf-radius); } .ukf-compare-wrap--swipe .ukf-compare { min-width: 600px !important; table-layout: auto !important; } .entry-content .ukf-compare-wrap--swipe .ukf-compare th, .entry-content .ukf-compare-wrap--swipe .ukf-compare td { padding: 10px 8px; font-size: 13.5px; } .entry-content .ukf-compare-wrap--swipe tbody th, .entry-content .ukf-compare-wrap--swipe thead th:first-child { position: sticky; left: 0; z-index: 2; width: 128px; min-width: 128px; max-width: 128px; box-shadow: 1px 0 0 var(--ukf-line), 6px 0 10px -6px rgba(14,26,58,.18); } .entry-content .ukf-compare-wrap--swipe thead th:first-child { background: #fff; } .ukf-compare-wrap--swipe .ukf-compare__best td { min-width: 150px; } .ukf-swipe::after { content: ""; position: absolute; top: 44px; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95)); border-radius: 0 var(--ukf-radius) var(--ukf-radius) 0; opacity: 0; transition: opacity .2s; } .ukf-swipe.is-scrollable:not(.is-end)::after { opacity: 1; } } /* Test cards: equal height, buttons on one line on desktop */ @media (min-width: 782px) { .wp-block-column > .ukf-card { height: 100%; display: flex; flex-direction: column; } .wp-block-column > .ukf-card > .wp-block-group__inner-container { display: flex; flex-direction: column; flex: 1; } .wp-block-column > .ukf-card > .wp-block-group__inner-container > .wp-block-buttons:last-child { margin-top: auto; padding-top: 12px; } .wp-block-columns:has(> .wp-block-column > .ukf-card) { align-items: stretch !important; } } /* Guides → Questions: more room; FAQ list → "All questions" button: more room */ .ukf-home-guides + h2, .ukf-home-guides + .wp-block-heading { margin-top: 64px !important; } .ukf-section details + .wp-block-buttons { margin-top: 28px !important; } /* 0.29.6: floating header row for the comparison table on phones */ .ukf-swipe__float { display: none; } @media (max-width: 600px) { .ukf-swipe__float { position: fixed; z-index: 80; overflow: hidden; background: #fff; box-shadow: 0 6px 14px -6px rgba(14,26,58,.25); border-bottom: 1px solid var(--ukf-line); pointer-events: none; } .ukf-swipe__float.is-on { display: block; } .ukf-swipe__float table.ukf-compare { display: table !important; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; border: 0; border-radius: 0; background: #fff; min-width: 0 !important; } .ukf-swipe__float th { padding: 8px; font-family: var(--ukf-font-display); font-weight: 800; font-size: 14px; color: var(--ukf-green); background: #fff; text-align: center; border-bottom: 0; } .ukf-swipe__float th a { color: var(--ukf-green); text-decoration: none; } .ukf-swipe__float th:first-child { position: sticky; left: 0; z-index: 2; background: #F7F9FD; box-shadow: 1px 0 0 var(--ukf-line); } .ukf-swipe__float .ukf-compare__items { display: block; font-family: var(--ukf-font-body); font-weight: 600; font-size: 12px; color: var(--ukf-muted); } html.ukf-mm-lock .ukf-swipe__float { display: none !important; } } /* 0.29.8: mobile header: basket and menu buttons spaced apart and matching */ @media (max-width: 1024px) { .mobile-menu-control-wrapper { display: flex; align-items: center; gap: 10px; } .mobile-menu-control-wrapper .menu-bar-items { margin: 0 !important; } .mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus { width: 44px; height: 44px; padding: 0 !important; margin: 0 !important; border-radius: 10px; background: #E8EDF8 !important; color: var(--ukf-ink) !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .mobile-menu-control-wrapper .menu-toggle .gp-icon svg { width: 20px; height: 20px; } .mobile-menu-control-wrapper .menu-toggle .mobile-menu { display: none; } } /* 0.29.9: homepage hero CTAs: identical width and height at every size */ .home .ukf-hero .wp-block-buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; } .home .ukf-hero .wp-block-buttons .wp-block-button { width: 100%; margin: 0; display: flex; } .home .ukf-hero .wp-block-buttons .wp-block-button__link { flex: 1; width: 100%; min-height: 56px; display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 12px 14px !important; border: 2px solid transparent; box-sizing: border-box; line-height: 1.2; white-space: nowrap; } .home .ukf-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { border-color: var(--ukf-red); } @media (max-width: 480px) { .home .ukf-hero .ukf-btn-extra { display: none; } .home .ukf-hero .wp-block-buttons .wp-block-button__link { font-size: 16px !important; min-height: 52px; } } /* 0.29.10 – product card renders: show the whole box (no top crop) · reassurance strip under the comparison table */ .ukf-card-visual .ukf-boximg img { aspect-ratio: 6 / 5; object-fit: cover; object-position: 50% 25%; width: 100%; height: auto; } .entry-content .ukf-assure { list-style: none; margin: 28px 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .entry-content .ukf-assure li { margin: 0; display: flex; align-items: center; gap: 14px; background: #F4F6FA; border-radius: 14px; padding: 16px 18px; } .ukf-assure svg { flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: #fff; fill: none; stroke: var(--ukf-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ukf-assure span { font-size: 15px; line-height: 1.35; color: #3F4A66; } .ukf-assure strong { display: block; color: var(--ukf-ink); font-size: 16px; margin-bottom: 2px; } @media (max-width: 860px) { .entry-content .ukf-assure { grid-template-columns: 1fr; gap: 10px; } .entry-content .ukf-assure li { padding: 14px 16px; } } /* 0.29.10 – chooser moved above the test cards: tinted panel, progress dots, options beside the question on desktop */ .entry-content .ukf-chooser { background: #F4F6FA; border: 0; border-left: 4px solid var(--ukf-red); box-shadow: none; border-radius: 16px; padding: 22px 24px; margin: 22px 0 30px; } .ukf-chooser__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .entry-content .ukf-chooser__kicker { margin: 0; letter-spacing: .06em; font-size: 13px; } .entry-content .ukf-chooser__prog { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #6B7590; white-space: nowrap; } .ukf-chooser__prog span { margin-right: 6px; } .ukf-chooser__prog i { width: 8px; height: 8px; border-radius: 50%; background: #CDD4E2; } .ukf-chooser__prog i.is-on { background: var(--ukf-red); } .ukf-chooser__prog i[hidden] { display: none; } .entry-content .ukf-chooser__title { font-size: 21px; margin: 0 0 14px; } .ukf-chooser__opts button { background: #fff; border-color: #D7DCE6; } .ukf-chooser__opts button:hover, .ukf-chooser__opts button:focus-visible { border-color: var(--ukf-green); background: var(--ukf-green-tint); } @media (min-width: 900px) { .ukf-chooser__q:not([hidden]) { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; align-items: center; gap: 20px; } .ukf-chooser__q .ukf-chooser__title { margin: 0; } } @media (max-width: 600px) { .entry-content .ukf-chooser { padding: 18px 16px; } .ukf-chooser__opts button { padding: 11px 16px; } .ukf-chooser__head { flex-wrap: wrap; } } .home .ukf-hero .wp-block-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100%; } /* 0.29.12 – gallery arrows sit flush on the image edges as slim tabs, so they cover far less of the slide */ .single-product .woocommerce-product-gallery .flex-direction-nav a { width: 30px; height: 56px; margin-top: -28px; border: 0; box-shadow: 0 2px 10px rgba(0,22,74,.16); background: rgba(255,255,255,.92); } .single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev { left: 0; border-radius: 0 28px 28px 0; } .single-product .woocommerce-product-gallery .flex-direction-nav .flex-next { right: 0; border-radius: 28px 0 0 28px; } .single-product .woocommerce-product-gallery .flex-direction-nav a::before { width: 9px; height: 9px; border-width: 2.5px; } .single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev::before { transform: translate(-60%, -50%) rotate(-135deg); } .single-product .woocommerce-product-gallery .flex-direction-nav .flex-next::before { transform: translate(-45%, -50%) rotate(45deg); } .single-product .woocommerce-product-gallery .flex-direction-nav a:hover { transform: none; background: #fff; } .single-product .woocommerce-product-gallery .flex-direction-nav a::after { content: ""; position: absolute; inset: -8px -10px; } /* bigger tap area */ .home .ukf-hero .ukf-btn-extra { margin-left: .3em; font-weight: 600; opacity: .85; } /* 0.29.13 – sticky add to basket: follows the visitor, with a reassurance line and the test name */ .ukf-sticky-atc { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); } .ukf-sticky-atc__note { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ukf-green); line-height: 1.25; } .ukf-sticky-atc__note svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ukf-sticky-atc--promo .ukf-sticky-atc__note { color: var(--ukf-red); } .ukf-sticky-atc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ukf-sticky-atc__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .ukf-sticky-atc__name { font-family: var(--ukf-font-display); font-weight: 800; font-size: 15px; color: var(--ukf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ukf-sticky-atc .price { font-size: 16px; margin-top: 2px; } .ukf-sticky-atc .price del { font-weight: 500; color: var(--ukf-muted); font-size: 14px; margin-right: 4px; } .ukf-sticky-atc .price ins { text-decoration: none; } .ukf-sticky-atc .button.alt { flex: 0 0 auto; min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 12px; } .ukf-sticky-atc.is-visible { display: flex; animation: ukf-atc-in .2s ease-out; } @keyframes ukf-atc-in { from { transform: translateY(100%); } to { transform: none; } } @media (min-width: 769px) { .ukf-sticky-atc.is-visible { animation: none; } } .ukf-totop--lift { bottom: calc(118px + env(safe-area-inset-bottom)); } @media (max-width: 768px) { html.ukf-atc-on .ukf-fb { bottom: 128px; } } /* 0.29.15 – add to basket feedback on the product page: basket bounces, count pops, pill drops below */ .ukf-basket { position: relative; } .ukf-basket--added > a svg { animation: ukf-bump .7s cubic-bezier(.3,1.6,.5,1) .15s both; transform-origin: 50% 80%; } .ukf-basket--added .ukf-basket__count { animation: ukf-pop .6s cubic-bezier(.3,1.8,.5,1) .35s both; background: var(--ukf-red) !important; color: #fff !important; } @keyframes ukf-bump { 0% { transform: none; } 25% { transform: translateY(-5px) rotate(-10deg); } 50% { transform: translateY(0) rotate(8deg); } 75% { transform: rotate(-4deg); } 100% { transform: none; } } @keyframes ukf-pop { 0% { transform: scale(.2); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } } .ukf-added-pill { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--ukf-green); color: #fff !important; text-decoration: none !important; font-size: 14px; font-weight: 700; line-height: 1; padding: 11px 14px; border-radius: 12px; box-shadow: 0 10px 28px rgba(0,22,74,.28); animation: ukf-pill-in .35s ease-out .45s both; } .ukf-added-pill::before { content: ""; position: absolute; top: -6px; right: 16px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; } .ukf-added-pill svg { width: 18px; height: 18px; fill: none; stroke: #7BE0A0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ukf-added-pill span { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; opacity: .9; } .ukf-added-pill.is-out { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; } @keyframes ukf-pill-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ukf-basket--added > a svg, .ukf-basket--added .ukf-basket__count, .ukf-added-pill { animation: none; } } /* Basket: breathing room between the multibuy nudge and the totals card */ .ukf-basket-mb { margin: 20px 0 28px; } @media (max-width: 600px) { .ukf-basket-mb { padding: 16px 18px 18px; margin-bottom: 24px; } } /* 0.29.16 – checkout header on phones/tablets: logo left, then "Secure checkout" and the basket on the right (no overlap) */ @media (max-width: 900px) { .ukf-focus .inside-header { display: flex !important; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 16px !important; } .ukf-focus .inside-header > .site-branding-container, .ukf-focus .inside-header > .site-branding, .ukf-focus .inside-header > .site-logo { order: 1; margin: 0 auto 0 0 !important; min-width: 0; } .ukf-focus__secure, .ukf-focus__basket { position: static; transform: none; } .ukf-focus__secure { order: 2; font-size: 13px !important; gap: 5px; flex-direction: column; line-height: 1.1; text-align: center; } .ukf-focus__secure span { font-size: 11px !important; font-weight: 700; letter-spacing: .02em; max-width: 64px; } .ukf-focus__secure svg { width: 18px; height: 18px; } .ukf-focus__basket { order: 3; flex: 0 0 44px; position: relative; } .ukf-focus .ukf-wordmark { transform: none; } } @media (max-width: 380px) { .ukf-focus__secure span { display: none; } } @media (max-width: 480px) { .ukf-focus .ukf-logo__name { font-size: 17px !important; } .ukf-focus .ukf-logo__badge { transform: scale(.9); } } /* Pill lives on (header link styles no longer apply); JS places it under the basket icon */ body > .ukf-added-pill { position: absolute; top: 0; right: 16px; left: auto; width: auto; height: auto; z-index: 1000; } body > .ukf-added-pill::before { right: var(--ukf-pill-arrow, 16px); } @media (max-width: 900px) { .ukf-focus .inside-header { flex-wrap: nowrap !important; } .ukf-focus__basket { right: auto !important; left: auto !important; top: auto !important; } .ukf-focus__secure { left: auto !important; top: auto !important; flex: 0 0 auto; } } @media (max-width: 900px) { .ukf-focus .inside-header { flex-direction: row !important; } .ukf-focus .inside-header > * { margin-top: 0 !important; margin-bottom: 0 !important; } } /* 0.29.19 – priority results on basket and checkout */ .ukf-prio { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--ukf-green); border-radius: 14px; padding: 14px 16px; margin: 0 0 24px; } .ukf-prio[hidden] { display: none; } .ukf-prio__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--ukf-green-tint); display: flex; align-items: center; justify-content: center; } .ukf-prio__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ukf-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ukf-prio__txt { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--ukf-ink-2, #3F4A66); } .ukf-prio__txt strong { display: block; font-size: 16px; color: var(--ukf-ink); margin-bottom: 2px; } .ukf-prio__add { flex: none; background: var(--ukf-green); color: #fff; border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; } .ukf-prio__add:hover { background: var(--ukf-green-dark, #00164A); } .ukf-prio__undo { flex: none; background: none; border: 0; color: var(--ukf-muted); text-decoration: underline; font-size: 14px; cursor: pointer; padding: 6px; } .ukf-prio button:disabled { opacity: .65; cursor: wait; } .ukf-prio.is-on { border-color: #2E8B57; background: #F2FAF5; } .ukf-prio.is-on .ukf-prio__icon { background: #DDF2E5; } .ukf-prio.is-on .ukf-prio__icon svg { stroke: #2E8B57; stroke-width: 3; } .wc-block-cart__main .ukf-prio { margin-top: 0; } .wc-block-checkout__main .ukf-prio { margin: 8px 0 28px; } @media (max-width: 600px) { .ukf-prio { flex-wrap: wrap; align-items: flex-start; } .ukf-prio__txt { flex-basis: calc(100% - 54px); } .ukf-prio__add { width: 100%; min-height: 48px; } .ukf-prio__undo { margin-left: 54px; padding-left: 0; } } .ukf-vs-note { margin-top: 12px !important; font-size: 13.5px !important; line-height: 1.5; } .ukf-vs-note > span[aria-hidden], th.is-them sup { color: var(--ukf-red); font-weight: 700; } th.is-them sup { font-size: .85em; margin-left: 1px; } /* Checkout: no order-note checkbox */ .ukf-focus .wc-block-checkout__add-note, .ukf-focus .wp-block-woocommerce-checkout-order-note-block { display: none !important; } /* Priority option inside the "When will I get my results?" FAQ */ .ukf-prio-faq { margin: -4px 0 14px; } .ukf-prio-faq[hidden] { display: none; } .ukf-prio-faq__add { background: var(--ukf-green-tint); color: var(--ukf-green); border: 1.5px solid var(--ukf-green); border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 14px; cursor: pointer; } .ukf-prio-faq__add:hover { background: var(--ukf-green); color: #fff; } .ukf-prio-faq__add:disabled { opacity: .65; cursor: wait; } .ukf-prio-faq.is-on { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #2E8B57; } .ukf-prio-faq.is-on svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ukf-focus .wc-block-checkout__guest-checkout-notice, .ukf-focus .wc-block-checkout__login-prompt { display: none !important; } /* Marketing opt-in: no "Additional order information" heading, just the tick box */ .ukf-focus .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__heading { display: none; } .ukf-focus .wp-block-woocommerce-checkout-additional-information-block { margin: 0 0 8px; padding: 0; } .ukf-focus .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox__label { font-size: 15px; line-height: 1.4; } /* 0.30.0 – refer a friend on the thank-you page */ .ukf-refer { margin: 28px 0; padding: 20px 22px; background: var(--ukf-green-tint); border-radius: 16px; } .ukf-refer__title { font-family: var(--ukf-font-display); font-weight: 800; font-size: 19px; color: var(--ukf-ink); margin: 0 0 6px !important; } .ukf-refer p { margin: 0 0 12px; color: #3F4A66; } .ukf-refer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ukf-refer__code { font: 800 18px/1 var(--ukf-font-display); letter-spacing: .05em; color: var(--ukf-green); background: #fff; border: 2px dashed var(--ukf-green); border-radius: 10px; padding: 11px 14px; } .ukf-refer__btn { background: var(--ukf-green); color: #fff; border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 700; cursor: pointer; } /* Add to basket busy state (background add on product pages) */ form.cart button.is-busy, .ukf-sticky-atc .button.is-busy { opacity: .7; pointer-events: none; } /* "Skip to content" only appears for keyboard users, never after a tap */ .skip-link.screen-reader-text:focus:not(:focus-visible) { clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; } /* 0.31.0 – practitioners & partners enquiry form */ .ukf-pform { background: #F4F6FA; border-radius: 18px; padding: 24px; margin: 18px 0 28px; scroll-margin-top: 90px; } .ukf-pform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .ukf-pform__f { margin: 0 0 14px; } .ukf-pform__f label, .ukf-pform__f legend { display: block; font-weight: 700; font-size: 15px; color: var(--ukf-ink); margin-bottom: 6px; } .ukf-pform__f label span, .ukf-pform__f legend span { font-weight: 400; color: #6B7590; } .ukf-pform input[type=text], .ukf-pform input[type=email], .ukf-pform input[type=tel], .ukf-pform select, .ukf-pform textarea { width: 100%; min-height: 50px; border: 1px solid #A3ACC2; border-radius: 12px; padding: 10px 14px; font-size: 16px; background: #fff; box-sizing: border-box; } .ukf-pform textarea { min-height: 110px; } .ukf-pform input:focus, .ukf-pform select:focus, .ukf-pform textarea:focus { outline: 2px solid var(--ukf-green); outline-offset: 1px; } .ukf-pform__checks { border: 0; padding: 0; } .ukf-pform__checks label { display: flex; align-items: center; gap: 10px; font-weight: 500; margin: 0 0 8px; } .ukf-pform__checks input { width: 20px; height: 20px; accent-color: var(--ukf-green); } .ukf-pform__btn { width: 100%; min-height: 54px; background: var(--ukf-red); color: #fff; border: 0; border-radius: 12px; font-weight: 800; font-size: 17px; cursor: pointer; } .ukf-pform__small { font-size: 13px; color: #6B7590; margin: 10px 0 0; } .ukf-pform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ukf-pform__done { background: #F2FAF5; border: 2px solid #2E8B57; border-radius: 14px; padding: 16px 18px; color: #1F5F3B; } .ukf-pform__err { background: #FDECEE; color: #9F0C24; border-radius: 10px; padding: 10px 12px; font-weight: 600; } @media (max-width: 640px) { .ukf-pform { padding: 18px 16px; } .ukf-pform__grid { grid-template-columns: 1fr; } } /* 0.31.5 – allergy vs intolerance landing page */ .ukf-avi { border: 1px solid #D7DCE6; border-radius: 16px; overflow: hidden; background: #fff; } .ukf-avi__row { display: grid; grid-template-columns: 1.1fr 1.5fr 1.5fr; border-top: 1px solid #E6E9F0; } .ukf-avi__row:first-child { border-top: 0; } .ukf-avi__row > span { padding: 14px 16px; font-size: 15px; line-height: 1.45; color: #3F4A66; } .ukf-avi__row > span:first-child { font-weight: 700; color: var(--ukf-ink); background: #F7F8FB; } .ukf-avi__head > span { font-weight: 800 !important; color: var(--ukf-ink) !important; font-size: 16px !important; background: #F4F6FA; } .ukf-avi__head > span:nth-child(2) { color: var(--ukf-red) !important; } .ukf-avi__head > span:nth-child(3) { color: var(--ukf-green) !important; } .ukf-avi__row > span:nth-child(3) { background: #F5F8FF; } .ukf-avi__row--verdict > span { font-weight: 700; color: var(--ukf-ink); } .ukf-avi__urgent { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--ukf-red); background: #FDF1F3; border-radius: 0 10px 10px 0; font-size: 15px; } @media (max-width: 640px) { .ukf-avi__head { display: none; } .ukf-avi__row { grid-template-columns: 1fr 1fr; } .ukf-avi__row > span:first-child { grid-column: 1 / -1; padding: 10px 14px; font-size: 14px; } .ukf-avi__row > span[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .ukf-avi__row > span:nth-child(2)::before { color: var(--ukf-red); } .ukf-avi__row > span:nth-child(3)::before { color: var(--ukf-green); } .ukf-avi__row > span { padding: 10px 14px; font-size: 14px; } } /* --------------------------------------------------------------------------- * Cookie banner (Complianz, 6 Nov). Brand colours and fonts. Accept and Reject * are the same size and weight, as the ICO expects: rejecting must be as easy * as accepting. * ------------------------------------------------------------------------- */ html:root { --cmplz_banner_width: 460px; --cmplz_banner_background_color: #FFFFFF; --cmplz_banner_border_color: var(--ukf-line); --cmplz_banner_border_width: 1px; --cmplz_banner_border_radius: 16px; --cmplz_text_color: var(--ukf-ink-2); --cmplz_hyperlink_color: var(--ukf-green); --cmplz_text_font_size: 14px; --cmplz_link_font_size: 13px; --cmplz_title_font_size: 17px; --cmplz_button_accept_background_color: var(--ukf-green); --cmplz_button_accept_border_color: var(--ukf-green); --cmplz_button_accept_text_color: #FFFFFF; --cmplz_button_deny_background_color: var(--ukf-green); --cmplz_button_deny_border_color: var(--ukf-green); --cmplz_button_deny_text_color: #FFFFFF; --cmplz_button_settings_background_color: #FFFFFF; --cmplz_button_settings_border_color: var(--ukf-line); --cmplz_button_settings_text_color: var(--ukf-ink); --cmplz_button_border_radius: 10px; --cmplz_button_font_size: 14px; --cmplz_slider_active_color: var(--ukf-green); --cmplz_category_header_always_active_color: var(--ukf-green); } .cmplz-cookiebanner { font-family: var(--ukf-font-body); box-shadow: 0 12px 40px rgba(14, 26, 58, .18) !important; } .cmplz-cookiebanner .cmplz-title { font-family: var(--ukf-font-display); font-weight: 800; color: var(--ukf-ink); } .cmplz-cookiebanner .cmplz-btn { font-weight: 700 !important; min-height: 44px; } .cmplz-cookiebanner .cmplz-btn:focus-visible { outline: 3px solid var(--ukf-red); outline-offset: 2px; } .cmplz-cookiebanner .cmplz-logo { display: none; } @media (max-width: 768px) { /* Sit above the floating Add to basket bar and the iPhone home bar. */ .cmplz-cookiebanner { z-index: 100000 !important; margin-bottom: env(safe-area-inset-bottom) !important; } .cmplz-cookiebanner .cmplz-message { font-size: 13px; } } /* Hover tab on desktop is replaced by the "Cookie settings" footer link. */ #cmplz-manage-consent .cmplz-manage-consent { display: none !important; } /* Abandoned-basket notice under the checkout email field. */ .ukf-email-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--ukf-muted); } /* Comparison tables: keep the visually hidden labels inside the scroll box, so phones don't scroll sideways (10 Nov QA). */ .ukf-compare-wrap { position: relative; } /* Priority pop-up: no checkbox any more, the two buttons are the choice (10 Nov). */ .ukf-upsell__offer { grid-template-columns: auto 1fr auto; cursor: default; } .ukf-upsell__no { color: var(--ukf-ink) !important; } @media (max-width: 480px) { .ukf-upsell__offer { grid-template-columns: 1fr auto; } } /* Full-bleed bands (100vw) are a scrollbar wider than the page on desktop, which let some pages scroll sideways. clip (not hidden) so sticky elements keep working (10 Nov QA). */ #page.site { overflow-x: clip; }