/* * site.css: the only stylesheet for anthonyandrewsbutchers.co.uk. * * Sections, in order: * 1. Tokens colours, fonts, spacing, breakpoints (custom properties) * 2. Fonts @font-face for self-hosted fonts * 3. Base reset and element defaults * 4. Layout rows/columns (mirrors the original Elementor sections: 10px column padding) * 5. Components one block per component: "=== Component: ===" * 6. Pages page-specific rules: "=== Page: ===" * 7. Utilities a handful of helpers * * Breakpoints (the original's Elementor breakpoints; media queries can't use custom properties): * mobile <= 767px tablet 768px-1024px desktop >= 1025px * The header menu turns into the burger dropdown at <= 1024px. * * Editing: change tokens to restyle the site; add new components as new blocks; * add modifier classes instead of changing a component for one page. */ /* ============ 1. Tokens ============ */ :root { /* Colours (from the original's computed styles / Elementor kit) */ --color-text: #000000; --color-bg: #ededE9; /* page background, every light band */ --color-sage: #abaa97; /* buttons, App and gallery bands, nav hover */ --color-white: #ffffff; --color-facebook: #3b5998; --color-instagram: #bc2a8d; --color-dropdown-hover: #3f444b; /* mobile dropdown item hover (Elementor default) */ --color-toggle-bg: rgb(0 0 0 / 0.05); --backdrop-popup: rgb(0 0 0 / 0.8); /* Typography (self-hosted Google Fonts) */ --font-body: "Cabin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-heading: "Chivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-social: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Layout */ --container: 1200px; /* most sections */ --container-narrow: 1140px; /* "Going Green" and the hygiene-rating band */ --col-pad: 10px; /* Elementor default column gap */ --widget-gap: 20px; /* Elementor space between widgets */ --radius-toggle: 3px; --shadow-popup: 2px 8px 23px 3px rgb(0 0 0 / 0.2); /* Motion (match the original's timings) */ --duration: 300ms; --duration-popup: 1.2s; --ease: ease; } /* ============ 2. Fonts ============ */ /* Variable fonts, latin subset, from Google Fonts. Cabin 400-600, Chivo 100-500, Roboto 600. */ @font-face { font-family: "Cabin"; src: url("/assets/fonts/cabin-latin-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: "Chivo"; src: url("/assets/fonts/chivo-latin-var.woff2") format("woff2"); font-weight: 100 500; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* ============ 3. Base ============ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: normal; color: var(--color-text); background: var(--color-bg); } img, svg, video, iframe { max-width: 100%; } img, video { height: auto; } img { vertical-align: middle; border: 0; } h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 100; line-height: 1; color: var(--color-text); } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; } /* ============ 4. Layout ============ */ .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; } .row { display: flex; width: 100%; max-width: var(--container); margin-inline: auto; } .row--narrow { max-width: var(--container-narrow); } .row--full { max-width: none; } .row--middle { align-items: center; } .col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: var(--col-pad); } .col--flush { padding: 0; } .col > :not(:last-child) { margin-bottom: var(--widget-gap); } .band { position: relative; background: var(--color-bg); } .band--sage { background: var(--color-sage); } .band > .row { position: relative; } @media (max-width: 767px) { .row { flex-direction: column; align-items: stretch; } .col { flex: none; width: 100%; } } /* ============ 5. Components ============ */ /* === Component: skip-link === */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.5rem 1rem; background: var(--color-white); color: var(--color-text); } .skip-link:focus { left: 1rem; } /* === Component: site-header === * Not sticky. Three columns >= 768px (logo | menu | ORDER NOW); stacked on mobile, where * ORDER NOW is hidden (as the original). Menu: horizontal > 1024px, burger dropdown <= 1024px * that pushes the page down (in-flow, like the original). */ .site-header { background: var(--color-bg); } .site-header__logo-col { text-align: center; } .site-header__logo { display: block; } .site-header__logo img { width: 69%; } .site-header__menu { padding: 15px; } .site-header__cta { padding: 25px; text-align: center; } @media (min-width: 768px) { .site-header__logo-col { flex: 0 0 29.909%; } .site-header__nav-col { flex: 0 0 44.631%; } .site-header__cta-col { flex: 0 0 25.112%; } } @media (max-width: 1024px) { .site-header__logo { padding-left: 16px; } .site-header__logo img { width: 86%; } .site-header .button--order { font-size: 14px; line-height: 14px; } } @media (max-width: 767px) { .site-header__cta { display: none; } } /* === Component: site-nav (menu items, desktop underline pointer + mobile dropdown) === */ .site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; } .site-nav__list a { position: relative; display: flex; justify-content: center; padding: 13px 16px; font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 20px; text-transform: uppercase; text-decoration: none; color: var(--color-text); transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); } .site-nav__list a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--color-sage); opacity: 0; transition: opacity var(--duration) cubic-bezier(.58, .3, .005, 1); } .site-nav__list a:hover, .site-nav__list a:focus-visible { color: var(--color-sage); } .site-nav__list a:hover::after, .site-nav__list a:focus-visible::after { opacity: 1; } .nav-toggle { display: none; align-items: center; justify-content: center; margin: 0 auto; width: 33px; height: 33px; padding: 0; border: 0; border-radius: var(--radius-toggle); background: var(--color-toggle-bg); color: var(--color-text); font-size: 22px; cursor: pointer; } .nav-toggle__close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } @media (max-width: 1024px) { .site-header__menu { display: flex; flex-direction: column; align-items: stretch; } .nav-toggle { display: inline-flex; position: relative; } .nav-toggle::after { content: ""; position: absolute; inset: -6px; } /* 44px tap target */ .site-nav { display: grid; grid-template-rows: 0fr; margin-top: 10px; visibility: hidden; transition: grid-template-rows var(--duration) var(--ease), visibility var(--duration); } .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; } .site-nav.is-instant { transition: none; } .site-nav__inner { overflow: hidden; min-height: 0; } .site-nav__list { display: block; background: var(--color-bg); } .site-nav__list a { padding: 10px 20px; font-weight: 500; border-inline-start: 8px solid transparent; } .site-nav__list a::after { display: none; } .site-nav__list a:hover, .site-nav__list a:focus-visible { color: var(--color-white); background: var(--color-dropdown-hover); } } /* === Component: site-footer (new: the original had no footer; holds the OrderYOYO credit) === */ .site-footer { background: var(--color-sage); color: var(--color-text); font-size: 14px; } .site-footer__bar { padding-block: 14px; } .site-footer__bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; } .site-footer__bar p { margin: 0; } .site-footer a { color: inherit; text-decoration: underline; } @media (max-width: 767px) { .site-footer__bar-inner { justify-content: center; text-align: center; } } /* === Component: button === * Elementor buttons: line-height 1, no hover change. Modifiers set the original's sizes. */ .button { display: inline-block; font-family: var(--font-body); font-size: 20px; font-weight: 500; line-height: 20px; color: var(--color-text); background: var(--color-sage); text-decoration: none; text-align: center; border: 0; cursor: pointer; } .button--order { padding: 10px 25px; border-radius: 15px; } /* header ORDER NOW */ .button--story { padding: 10px; border-radius: 10px; } /* ORDER NOW under the story */ .button--pill { display: block; width: 100%; padding: 20px 40px; border-radius: 999px; font-family: var(--font-heading); font-size: 18px; line-height: 18px; color: var(--color-white); } /* popup Download Form */ .button-row { text-align: center; } /* === Component: icon-link (text + icon after it, transparent: "FIND US") === */ .icon-link { display: inline-flex; align-items: center; gap: 17px; font-family: var(--font-body); font-size: 20px; font-weight: 500; line-height: 20px; letter-spacing: -1px; color: var(--color-text); text-decoration: none; } .icon-link svg { width: 19px; height: 19px; fill: currentColor; } /* === Component: heading sizes (Elementor headings, line-height 1) === */ .title-xl { font-size: 98px; } /* Our Story */ .title-lg { font-size: 80px; } /* Our App */ .title-md { font-size: 53px; font-weight: 300; } /* Get In Touch */ .title-sm { font-size: 36px; } /* Going Green */ @media (max-width: 1024px) { .title-xl { font-size: 49px; } .title-lg { font-size: 50px; } .title-md { font-size: 39px; } .title-sm { font-size: 30px; } } /* === Component: prose (Cabin text blocks; blank-line gaps between paragraphs like the original) === */ .prose { font-family: var(--font-body); font-size: 20px; font-weight: 400; } .prose p { margin: 0; } .prose p + p { margin-top: 1.2em; } /* one empty line (Cabin "normal" line height) */ .prose p.prose__tight { margin-top: 0; } /* line that followed the previous one without a gap */ @media (max-width: 1024px) { .prose { font-size: 17px; } } @media (max-width: 767px) { .prose { padding: 10px; } } /* === Component: story (heading + text | image) === */ .story { padding: 50px 0; } .story__text { padding-bottom: 1.2em; } /* the original ends with an empty line */ .story__media { justify-content: center; align-items: center; text-align: center; } .story__media img { width: 80%; border-radius: 20px; } .intro { padding: 50px 0; } @media (max-width: 1024px) { .story, .intro { padding: 50px; } .story__media img { width: 100%; } } @media (max-width: 767px) { .story, .intro { padding: 25px; } .story .title-xl { text-align: center; } .story__text { padding-bottom: calc(10px + 1.2em); } .story__media > div { padding: 10px 10px 10px 21px; } .story__media img { width: 50%; } } /* === Component: pig-chart band background (sage bands with the butcher's pig drawing) === */ .band--pig::before { content: ""; position: absolute; inset: 0; background: url("/wp-content/uploads/2022/04/pig-chart-ink-black-white-drawing-butchers-115269468-1.png") bottom center / contain no-repeat; pointer-events: none; } .band--pig-multiply::before { mix-blend-mode: multiply; } .band--pig-faint::before { opacity: 0.5; } /* === Component: app-promo (phone mock-up | heading, text, store badges) === */ .app-promo > .row { min-height: 400px; } .app-promo__phone img { width: 73%; } .app-promo__text { display: flow-root; font-family: var(--font-body); font-size: 31px; } .app-promo__text p { margin: 1em 0; } .app-promo__badges img { width: 298px; } /* 64% of the image's own width on the original */ @media (min-width: 768px) { .app-promo__phone { flex: 0 0 56.781%; } .app-promo__content { flex: 0 0 43.219%; } } @media (max-width: 1024px) { .app-promo > .row { min-height: 40vh; } .app-promo__phone img { width: 94%; } .app-promo__text { padding: 19px; font-size: 16px; } .app-promo__badges { padding: 18px; } .app-promo__badges img { width: 65%; } } @media (max-width: 767px) { .app-promo__phone img { display: none; } .app-promo__content .title-lg { padding: 20px; text-align: center; } .app-promo__text { padding: 20px; } .app-promo__badges { padding: 20px; text-align: center; } } /* === Component: social (Follow us headings + icons | shop photo) === */ .social { padding: 60px 0; } .social__links { text-align: center; } .social__title { font-family: var(--font-social); font-size: 75px; font-weight: 600; text-align: center; } .social__title--facebook { color: var(--color-facebook); } .social__title--instagram { color: var(--color-instagram); } .social__spacer { height: 50px; } .social__photo { text-align: end; } .social__photo img { width: 100%; max-width: 84%; } @media (min-width: 768px) { .social__links { flex: 0 0 49.223%; } .social__photo { flex: 0 0 50.777%; } } @media (max-width: 1024px) { .social__links > :not(:last-child) { margin-bottom: 0; } .social__title--facebook { padding: 1px; font-size: 31px; } .social__title--instagram { font-size: 29px; } .social__icon--facebook { width: 14%; } .social__icon--instagram { width: 19%; } } @media (max-width: 767px) { .social__title--facebook { padding: 13px; } .social__spacer { height: 46px; } .social__photo { text-align: center; } } /* === Component: gallery (5-column thumbnails, GLightbox opens a.glightbox links) === */ .gallery-band { padding: 60px 0; } .gallery { display: flex; flex-wrap: wrap; margin: 0 -38px -38px 0; padding: 0; list-style: none; } .gallery__item { width: 20%; padding: 0 38px 38px 0; text-align: center; } .gallery__item a { display: block; } .gallery__item img { display: block; margin-inline: auto; width: 150px; max-width: 100%; border-radius: 7px; } @media (max-width: 1024px) { .gallery-wrap { padding: 43px; } } @media (max-width: 767px) { .gallery__item { width: 100%; } } /* GLightbox: dark overlay like the original Elementor lightbox */ .glightbox-clean .gslide-description { display: none; } .goverlay { background: rgb(0 0 0 / 0.9); } /* === Component: green (centred heading, text block) === */ .green { padding: 60px 0; } .green .title-sm { text-align: center; } .green__spacer { height: 10px; } @media (max-width: 1024px) { .green { padding: 50px; } .green__spacer { display: none; } } @media (max-width: 767px) { .green { padding: 25px; } .green .title-sm { padding: 20px; } } /* === Component: location (map | Get In Touch) === */ .location { padding: 50px 0; } .map-wrap { padding: 40px; } .map { display: block; width: 100%; height: 666px; border: 0; } .contact-info__title { padding: 20px; text-align: center; } .contact-info__text { display: flow-root; padding: 20px; text-align: center; font-family: var(--font-heading); font-size: 25px; font-weight: 400; } .contact-info__text p { margin: 1em 0; } @media (min-width: 768px) and (max-width: 1024px) { .location__map { flex: 0 0 55%; } .location__info { flex: 0 0 45%; } } @media (max-width: 1024px) { .map { height: 507px; } .contact-info__text { font-size: 16px; } } /* === Component: badge-band (food hygiene rating image) === */ .badge-band { padding: 0 0 50px; } .badge-band__col { text-align: center; } .badge-band img { width: 31%; } @media (max-width: 1024px) { .badge-band img { width: 13%; } } @media (max-width: 767px) { .badge-band img { width: 33%; } } /* === Component: contact-email (not used: the original has no forms; kept for future use) === */ .contact-email { display: grid; gap: 1rem; justify-items: center; text-align: center; } .contact-email__address { font-weight: 600; word-break: break-word; } /* === Component: popup ("Christmas Orders", native