/* Red -> black. Nothing else. * * The live page sets 162 custom properties inline on . Exactly 15 of * them are red; those 15 are listed below and no other property is touched. * Every other background, text colour, border, radius, size and spacing stays * as it is. * * Safe to do, because what sits ON the brand colour is white * (--foreground-color: #ffffff, --category-list-item-text: #ffffff), so the * bars keep their contrast. The tags that use black text — stock, discount, * item wrapper — sit on their own yellow (#ffd400), not on this, so none of * them end up black on black. * * Three of the fifteen are text on a WHITE background rather than a bar: * --category-list-item-active-text * --category-list-item-hover-text * --category-navbar-item-focus-color * Black reads better there than the red did. * * `!important` is required because the originals are inline styles on , * which otherwise take precedence. */ :root, html { /* was #ea1a27 */ --navbar-background: #000000 !important; --category-list-arrow-color: #000000 !important; --category-list-arrow-hover-color: #000000 !important; --alert-msg-bg-color: #000000 !important; --background-color: #000000 !important; /* was #ff0000 */ --category-list-bg: #000000 !important; --category-list-item-bg: #000000 !important; --category-list-item-hover-text: #000000 !important; --category-list-item-active-text: #000000 !important; --category-list-item-border: #000000 !important; --category-navbar-background: #000000 !important; --category-navbar-item-background: #000000 !important; --category-navbar-item-focus-color: #000000 !important; /* was 234, 26, 39 — used for translucent tints of the brand colour */ --light-background-color: 0, 0, 0 !important; /* was rgba(255, 86, 99, 1) */ --cartbackground: rgba(0, 0, 0, 1) !important; } /* ------------------------------------------------------------ the logo * * Read off the live DOM rather than guessed at. The structure is: * * div.flex.flex-1 the left group — holds the pills AND the logo * └ div (static) the logo wrapper, AFTER the pills in source order * └ a * └ div the size box: w-[140px] h-[28px] md:w-[241px] md:h-[44px] * └ img * * Two things follow from that, and both of my earlier attempts got them wrong: * * The wrapper is position:static, so `left` does nothing. It is a flex item, * so moving it to the left of the row is `order`, not `left`. * * The size box hard-codes its dimensions in classes, so overriding * --navbar-logo-width had no effect. The box itself has to be sized. * * There are two wrappers — one md:hidden, one hidden below md — so these * match on the image and catch both. */ /* first in the row, ahead of the delivery and phone pills */ div:has(> a > div > img[src*="gg-logo"]) { order: -1 !important; margin-right: 0.85rem !important; margin-left: 0 !important; } /* The badge is SQUARE, so the box must be too. A wide box left object-contain fitting the mark to the box height and leaving the rest of the width empty — which read as a gap between the logo and the pills. */ /* The mark is 2.5:1 — badge on the left, wordmark beside it — so the box has to be that shape. A square box would have fitted it to the height and left dead space either side, which is what caused the gap last time. */ div:has(> img[src*="gg-logo"]) { width: 115px !important; height: 46px !important; } @media (min-width: 768px) { div:has(> img[src*="gg-logo"]) { width: 160px !important; height: 64px !important; } } /* the whole badge, wordmark included — never a cropped square */ img[src*="gg-logo"] { object-fit: contain !important; } :root, html { --navbar-logo-border-radius: 0 !important; --navbar-logo-border: 0 !important; --navbar-logo-bg: transparent !important; } /* Nothing should sit between the left edge and the logo. The header's own padding is trimmed and the group's gap tightened so the mark, the delivery pill and the phone pill read as one block on the left. */ /* The bar's height is set by the tallest thing in it, which is now the logo. Trimming the vertical padding keeps the bar close to the mark instead of leaving a deep black band above and below it. */ header { padding-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } div:has(> a > div > img[src*="gg-logo"]) { margin-right: 0.5rem !important; } /* ------------------------------------------- category heading * * Every category already shows its name inside the banner artwork * ("GLAZE DEALS", "SPECIAL PIZZAS" and so on), so the plain text heading above * it repeats what the picture already says. Hidden rather than removed, so it * comes straight back by deleting this rule — and so it is still read by * screen readers and search engines. */ h2.black-bold-header { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* ========================================================================== * Fonts — Times New Roman for titles, Open Sans for everything else. * * Both are self-hosted under /fonts/. They are NOT loaded from Google: a * third-party font host costs a fresh DNS + TCP + TLS handshake, and at this * site's ~400ms round trip that is roughly a second before the first glyph * is even requested. nginx serves /fonts/ with a one-year expiry. * * Only the `latin` subsets are shipped (the menu is English), which is why * this is 177 KB rather than the 436 KB the full set would cost. * * Tinos is metric-compatible with Times New Roman and is listed after it: * Windows and macOS use the real Times New Roman, while Android and Linux — * where it is simply absent — get an identical-metric stand-in instead of * silently falling back to a sans-serif. * ========================================================================== */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/opensans-400-latin.woff2) format("woff2"); } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/opensans-600-latin.woff2) format("woff2"); } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/opensans-700-latin.woff2) format("woff2"); } @font-face { font-family: "Tinos"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/tinos-400-latin.woff2) format("woff2"); } @font-face { font-family: "Tinos"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/tinos-700-latin.woff2) format("woff2"); } :root, html { --gg-title-font: "Times New Roman", "Tinos", "Liberation Serif", Georgia, serif; --gg-body-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* The whole design routes through --font-sans, which in turn points at --font-poppins. Repointing that one variable moves every unstyled element onto Open Sans without touching a single class. */ --font-poppins: var(--gg-body-font) !important; --font-sans: var(--gg-body-font) !important; /* The category section headings have their own variable. */ --category-heading-font-family: var(--gg-title-font) !important; } body, .font-sans { font-family: var(--gg-body-font) !important; } /* Titles. Item names and section titles are real heading elements, so this catches them wherever they appear — card, modal and checkout alike. */ h1, h2, h3, h4, .melbrew-item-name-font, [class*="headerTitle"] { font-family: var(--gg-title-font) !important; } /* Descriptions are explicitly held on the body font so that a title's serif cannot inherit down into the text underneath it. */ p, .text-gray-500, .text-gray-400, [class*="description"], [class*="Description"] { font-family: var(--gg-body-font) !important; } /* The footer "about" block ships its own !important rule naming a font that does not exist on this site (KababjeesFriedItemName), at a specificity the bare element selector above cannot reach. Matched here so those headings land on the title face like every other heading. */ .roundflow-footer-about-content h1, .roundflow-footer-about-content h2, .roundflow-footer-about-content h3 { font-family: var(--gg-title-font) !important; } /* --------------------------------------------------- order-type picker logo * The picker wraps the logo in a box whose class is * bg-[var(--location-modal-logo-bg,#ffffff)] * and nothing ever sets that variable, so the built-in #ffffff fallback wins * and the mark sits on a white card inside an otherwise black dialog. * Defining the variable is enough -- once it has a value the fallback is * never consulted. */ :root, html { --location-modal-logo-bg: #000000 !important; } /* ----------------------------------------------------------- footer logo * The footer reads the very same `logo` setting as the navbar * (footerConstatntLogo || logo), so the wide mark cannot be swapped out in * the data without also changing the navbar. It is replaced here instead. * * The size has to be restated: the element is laid out for a 2.5:1 wordmark * (w-[170px] h-auto), and dropping a square image into that box would * letterbox it down to a third of its height. */ /* ----------------------------------------------------------- footer logo * The footer reads the same `logo` setting as the navbar, so the wide * wordmark cannot be swapped out in the data without also changing the * navbar. It is replaced here instead. * * The black disc is baked into the image file rather than drawn in CSS. * Drawing it here meant border-radius on a box whose width was still being * negotiated by the surrounding flexbox: when the box came out taller than * wide the radius produced an ellipse with flattened sides, and clipping the * square artwork to a circle sliced the ends off "GOLDEN GLAZE". With the * circle painted into the PNG none of that geometry exists -- object-fit * keeps it round even if the box is never square, and nothing can crop it. * * gg-disc-v2.png was built by cropping the artwork's transparent margin away * and scaling it to the largest size whose every opaque pixel still falls * inside the circle. The mark spans 71% of the disc; drawn in CSS it was * about 57%, which is why it looked lost in the middle. */ /* Breathing room between the disc and the restaurant name below it. */ footer div:has(> a > img[src*="gg-logo"]) { margin-bottom: 1.25rem !important; } footer img[src*="gg-logo"] { content: url("/ext/assets.indolj.io/upload/gg-disc-v2.png"); width: 170px !important; height: 170px !important; max-width: 100% !important; max-height: none !important; object-fit: contain; background: none !important; border-radius: 0 !important; padding: 0 !important; /* The gap lives on the image, not on the wrapper. The wrapper can only be reached through :has(), and that is evidently not matching this markup -- the disc renders, so `footer img[src*=...]` matches, while every rule hung off :has() has had no effect. This one uses the selector that is known to work. display:block also kills the inline baseline gap underneath the image. */ display: block !important; margin: 0 auto 1.75rem auto !important; } @media (min-width: 1024px) { footer img[src*="gg-logo"] { width: 200px !important; height: 200px !important; } } /* Phones. * * The block holding the logo carries a negative top margin (-mt-8) sized for * the short 2.5:1 wordmark that used to sit in this slot. The disc is much * taller, so that upward pull dragged it over the restaurant name and phone * number underneath. It is dropped here. * * The disc is centred on the column AND the contact block beneath it is * centred too. Centring only the disc would not line the two up: the text * block is full width and left-aligned, so its centre sits at half the text * width while the disc would sit at half the column width. Giving both the * same centre line is what actually puts the mark above the name. Only the * immediately following block is touched, so the links columns further down * keep their own alignment. */ @media (max-width: 639px) { footer div:has(> a > img[src*="gg-logo"]) { margin-top: 0 !important; margin-bottom: 2rem !important; width: 100% !important; max-width: 100% !important; align-items: center !important; align-self: center !important; } footer div:has(> a > img[src*="gg-logo"]) + div { align-items: center !important; text-align: center !important; } footer img[src*="gg-logo"] { /* sizes you set live in DevTools; the box is wider than tall on purpose -- object-fit:contain draws the disc at the 78px height and the extra width simply centres it */ width: 124px !important; height: 78px !important; margin: 0 auto 1.75rem auto !important; } }