/* * site.css: the only stylesheet for jumboluton.co.uk (Jumbo Chinese Takeaway Luton). * * 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 container, sections, grids * 5. Components one block per component: "=== Component: ===" * 6. Pages rare page-specific rules: "=== Page: ===" * 7. Utilities a handful of helpers * * Breakpoints (from the original Elementor build; media queries can't use custom properties): * mobile <= 767px tablet 768px-1024px desktop >= 1025px * - the header is hidden on mobile (as the original) * - the nav collapses to a burger + dropdown at <= 1024px * * Editing: change tokens to restyle the site; add new components as new blocks; * add modifier classes (.button--outline) instead of changing a component for one page. */ /* ============ 1. Tokens ============ */ :root { /* Colours (from the original's computed styles) */ --color-gold: #ddaa44; /* header, footer, buttons, headings */ --color-red: #97262a; /* nav links */ --color-text: #7a7a7a; /* body copy (Elementor global text colour) */ --color-dark: #33373d; /* dropdown menu items, burger */ --color-dark-hover: #3f444b; /* dropdown item hover background */ --color-close: #1f2124; /* popup close icon */ --color-bg: #ffffff; --color-bg-alt: #f4f4f4; /* "Our Offers" band */ --color-white: #ffffff; --overlay-hero: rgb(0 0 0 / 0.6); --overlay-popup: rgb(0 0 0 / 0.31); --backdrop-popup: rgb(0 0 0 / 0.8); /* Typography */ --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-heading: "Alegreya", Georgia, "Times New Roman", serif; --weight-body: 300; --weight-heading: 700; --text-base: 1rem; /* 16px: hours, address, footer */ --text-lg: 1.25rem; /* 20px: section copy, nav, buttons */ --text-h1: 3.125rem; /* 50px */ --text-h2: 2.5rem; /* 40px section headings */ --text-h3: 1.875rem; /* 30px contact headings (h2 elements styled smaller) */ --leading: 1.5; /* Spacing and shape */ --container: 1140px; /* Elementor boxed width */ --gutter: 10px; /* Elementor column padding */ --section-pad: 100px 50px; /* About / Offers / Loyalty bands */ --section-pad-mobile: 50px 30px; --header-height: 121px; --radius: 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 ============ */ /* Self-hosted Google Fonts (latin subset, variable woff2: one file covers all weights used). */ @font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-latin-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "Rubik"; src: url("/assets/fonts/rubik-latin-var.woff2") format("woff2"); font-weight: 300 900; 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-weight: var(--weight-body); font-size: var(--text-base); line-height: var(--leading); color: var(--color-text); background: var(--color-bg); } img, svg, video, iframe { max-width: 100%; } img, video { height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--weight-heading); line-height: 1; margin: 0; } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); color: var(--color-gold); } p { margin: 0 0 1em; } a { color: inherit; transition: color var(--duration) var(--ease); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; } [id] { scroll-margin-top: var(--header-height); } @media (max-width: 767px) { [id] { scroll-margin-top: 0; } } /* ============ 4. Layout ============ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding: var(--section-pad); } .section--alt { background: var(--color-bg-alt); } .section > .container { padding-block: 10px; } .section__title { text-align: center; padding-bottom: 40px; } /* 20px heading padding + 20px Elementor widget gap */ .section__text { font-size: var(--text-lg); line-height: 1.5; text-align: center; } .section__text p { margin: 20px 0; } .section__text--left { text-align: start; } @media (max-width: 1024px) { .container { max-width: 1024px; } } @media (max-width: 767px) { .section { padding: var(--section-pad-mobile); } } /* ============ 5. Components ============ */ /* === Component: skip-link === */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.5rem 1rem; background: var(--color-bg); color: var(--color-red); } .skip-link:focus { left: 1rem; } /* === Component: icon (inline SVG; size follows font-size; symbols live in the footer sprite) === */ .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { display: inline-block; width: auto; height: 1em; fill: currentColor; flex: none; } /* === Component: site-header === * Gold bar, logo left, anchor nav right. Sticky on desktop/tablet. * <= 1024px: burger toggle centred in the right half; dropdown slides open below it * (grid 0fr -> 1fr; the column uses align-items: stretch so items are clipped while animating). * <= 767px: no header at all (as the original). */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-gold); padding: 20px; } .site-header__inner { display: flex; align-items: center; } .site-header__brand, .site-header__menu { flex: 0 0 50%; min-width: 0; } .site-header__logo { display: block; width: max-content; line-height: 0; } .site-header__logo img { width: 150px; height: 81px; } .site-nav__list { display: flex; justify-content: flex-end; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .site-nav__list a { display: flex; padding: 13px 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 300; line-height: 20px; color: var(--color-red); text-decoration: none; } .site-nav__list li + li a { margin-inline-start: 57px; } .site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a.is-active { color: var(--color-white); } .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); background: rgb(0 0 0 / 0.05); color: var(--color-dark); 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-white); } .site-nav__list li + li a { margin-inline-start: 0; } .site-nav__list a { padding: 10px 20px; color: var(--color-dark); } .site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a.is-active { color: var(--color-white); background: var(--color-dark-hover); } } @media (max-width: 767px) { .site-header { display: none; } } /* === Component: site-footer === */ .site-footer { background: var(--color-gold); color: var(--color-white); font-family: var(--font-body); font-weight: 300; line-height: normal; } .site-footer__inner { display: flex; align-items: center; padding-inline: 0; } /* the columns carry the 10px gutter */ .site-footer__copyright, .site-footer__credit { flex: 0 0 50%; padding: 10px; margin: 0; } .site-footer__copyright p, .site-footer__credit p { margin: 1em 0; } .site-footer__credit { text-align: end; } .site-footer__credit a { color: var(--color-white); font-weight: 700; text-decoration: none; } .site-footer__credit a:hover { text-decoration: underline; } @media (max-width: 767px) { .site-footer { font-size: 14px; } /* original: 55% / 45%; the longer "OrderYOYO" credit would wrap, so the credit takes its own width */ .site-footer__copyright { flex: 1 1 auto; } .site-footer__credit { flex: 0 0 auto; } } /* === Component: button === * Gold filled (.button) or white outline (.button--outline); text then icon; "grow-rotate" hover. */ .button { display: inline-flex; align-items: center; gap: 15px; padding: 12px 24px; border: 3px solid var(--color-gold); border-radius: var(--radius); background: var(--color-gold); color: var(--color-white); font-family: var(--font-body); font-size: var(--text-lg); font-weight: 300; line-height: 20px; text-decoration: none; cursor: pointer; transition: transform var(--duration) var(--ease); } .button:hover, .button:focus-visible { transform: scale(1.1) rotate(4deg); color: var(--color-white); } .button--outline { background: transparent; border-color: var(--color-white); } .button--plain { border: 0; padding: 15px 30px; } /* === Component: hero === */ .hero { position: relative; display: flex; align-items: center; min-height: calc(266px + 200px); padding: 100px 0; margin-bottom: 6px; background: center / cover no-repeat; } .hero::before { content: ""; position: absolute; inset: 0; background: var(--overlay-hero); mix-blend-mode: darken; } .hero__content { position: relative; text-align: center; padding-block: 10px; } .hero__title { color: var(--color-white); font-size: var(--text-h1); line-height: 1; } .hero__actions { display: grid; grid-template-columns: 1fr 1fr; max-width: 500px; margin: 20px auto 0; } .hero__actions > div { padding: 10px; } .hero__actions > div:first-child { text-align: end; } .hero__actions > div:last-child { text-align: start; } @media (max-width: 767px) { .hero__actions { grid-template-columns: 1fr; } .hero__actions > div:first-child, .hero__actions > div:last-child { text-align: center; } } /* === Component: image-strip (3 food photos as backgrounds, no links) === */ .image-strip { display: flex; min-height: 300px; } .image-strip__item { flex: 1 1 0; margin: 0 3px; background: center / cover no-repeat; } @media (max-width: 767px) { .image-strip { flex-direction: column; min-height: 500px; } } /* === Component: app-promo (white card over a food photo, store badges) === */ .app-promo { display: flex; background: center / cover no-repeat; } .app-promo__card { flex: 0 0 calc(55.009% - 60px); margin: 30px; padding: 30px; background: var(--color-white); } .app-promo__card h2 { text-align: start; } .app-promo__card p { font-size: var(--text-lg); line-height: 1.5; margin: 40px 0; } .app-promo__badges { display: flex; flex-wrap: wrap; gap: 0 10px; } .app-promo__badges img { height: 50px; width: auto; } @media (max-width: 1024px) { .app-promo__badges { padding-bottom: 10px; } } @media (max-width: 767px) { .app-promo__card { flex-basis: auto; width: calc(100% - 60px); } } /* === Component: contact-band (map left, hours + address right) === */ .contact-band { display: flex; } .contact-band__map { flex: 0 0 55.072%; } .contact-band__info { flex: 0 0 44.928%; padding: 80px; } .contact-band__cols { display: flex; max-width: 560px; margin-inline: auto; } .contact-band__col { flex: 0 0 50%; padding: 10px; } .contact-band__col h2 { font-size: var(--text-h3); padding-bottom: 40px; } .contact-band__col p { margin: 1em 0; } .opening-hours { line-height: 2; white-space: nowrap; } .contact-band__address { padding-bottom: 50px; } @media (max-width: 1024px) { .contact-band { flex-direction: column; } .contact-band__info { padding: 50px; } } @media (max-width: 767px) { .contact-band__cols { flex-direction: column; } } /* === Component: map === */ .map { display: block; width: 100%; height: 520px; border: 0; } /* === Component: contact-email (replaces WordPress forms; none on this site, kept for future use) === */ .contact-email { display: grid; gap: 1rem; justify-items: start; } .contact-email__address { font-weight: 400; word-break: break-word; } .contact-email__phone a { color: inherit; } /* === Component: popup (native