/* Grown and Made UK — design system Racing green on warm paper. Shared by every page. Category vars must stay literal hex: index.html reads them with getComputedStyle. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Karla:wght@400;500;600&display=swap'); :root{ /* Core */ --green:#004225; --green-dark:#00301B; --brass:#C09A4F; /* Surfaces — page is beige, cards are white */ --paper:#FAF7F0; --paper-2:#F4EFE4; --surface:#FFFFFF; /* Ink */ --ink:#1E2621; --muted:#57544B; /* Comp had #7A7568, which measures 4.29 on the beige page and 4.01 on the header band — both under AA. Darkened until it passes on every surface. */ --muted-2:#6E6A5F; /* Hairlines */ --line:#E4DCCB; --line-strong:#D4C9B2; /* Tiers — -pin is a fill (3:1 threshold), -mark carries text (4.5:1). Not interchangeable. */ --gold-pin:#C79A3E; --gold-mark:#7D5F22; --gold-bg:#F4EBD4; --silver-pin:#535E58; --silver-mark:#3F4744; --silver-bg:#E7E9E6; /* Categories */ --clothing:#4A5F72; --farm:#5C6B3C; --ceramics:#8F5A38; --jewellery:#6B4F63; --cutlery:#4A4A46; --red:#8C1D2C; --font-heading:'Cormorant Garamond',Georgia,serif; --font-body:'Karla',-apple-system,system-ui,sans-serif; /* Header flag. The only place the Union Jack appears, recoloured out of red-white-blue into the heritage palette. All tunable here: panel width, image scale and crop, starting strength, and where it fades to nothing. If it ever reads as a flag rather than as texture, drop the opacity. A 16:9 flag inside a ~7:1 header strip: `cover` would scale to the width and crop away all but a thin horizontal band, which reads as a zoom rather than as a flag. Scaling to height instead shows over half the flag, and the panel is then sized to the width the image naturally occupies. */ --flag-w:260px; --flag-size:auto 180%; --flag-pos:left 40%; --flag-opacity:.24; --flag-fade:88%; --flag-inset:0px; /* Back-compat aliases. Old rules retint without being rewritten. Anything read by JS resolves to a literal above, never to a var(). */ --racing-green:#004225; --navy:#004225; --bg:#FAF7F0; --gold:#C79A3E; --silver:#535E58; } /* ---------- Header flag ---------- Painted as a pseudo-element so no page needs markup for it. Deliberately not clipped with overflow:hidden — the menu dropdown lives inside #topbar and would be cut off. The mask does the containing instead. */ #topbar{position:relative} #topbar::before{ content:"";position:absolute;left:0;top:0;bottom:0; width:var(--flag-w); background:url('flag-heritage.jpg') var(--flag-pos)/var(--flag-size) no-repeat; opacity:var(--flag-opacity); -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.45) 45%,transparent var(--flag-fade)); mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.45) 45%,transparent var(--flag-fade)); pointer-events:none;z-index:0; } /* Everything in the bar sits above the flag. */ #topbar > *{position:relative;z-index:1} /* Only the map page has a left-aligned wordmark, so only it needs shifting clear of the dense end of the flag. The content pages centre theirs. */ .bar-top .brand-logo{padding-left:var(--flag-inset)} /* Mobile stacks the header into two rows, so the strip is close to the flag's own proportions and `cover` works there — which is why it already looked right on a phone. Left as it was. */ @media (max-width:760px){ :root{--flag-w:62%;--flag-size:cover;--flag-pos:left center; --flag-opacity:.16;--flag-fade:82%;--flag-inset:0px} } /* ---------- Map pin ---------- 24px overall for every listing, Gold and Silver alike. Reading outward: tier metal disc, paper gap, category ring, paper halo, dark edge. The paper gap means the tier and category colours never have to contrast with each other, so both stay legible over any tile. */ .pin{ width:10px;height:10px;border-radius:50%;transform:none;border:none; background:var(--silver-pin); box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--cat,var(--green)), 0 0 0 6px var(--paper), 0 0 0 7px rgba(0,48,27,.45); } .pin::after{content:none} .pin.tier-gold{background:var(--gold-pin)} .pin.tier-silver{background:var(--silver-pin)} /* ---------- Tier ---------- The hexagonal G/S hallmark was removed 3 Aug 2026. Tier is carried by the .tag pill alone, identical in the sidebar list, map popup and grid card. */ .tier-label{font-family:var(--font-body);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:.1em} .tier-label.gold{color:var(--gold-mark)} .tier-label.silver{color:var(--silver-mark)} /* ---------- Shared page furniture for the content pages ---------- */ .gm-page{background:var(--paper);color:var(--ink);font-family:var(--font-body); font-size:15px;line-height:1.7} .gm-page h1,.gm-page h2,.gm-page h3{font-family:var(--font-heading);color:var(--green); font-weight:500;letter-spacing:.01em} .gm-page a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(0,66,37,.3)} .gm-page a:hover{color:var(--green-dark);border-bottom-color:var(--brass)} ::selection{background:var(--brass);color:var(--ink)} /* ---------- Site footer ---------- Used on every page except the map, which is full-bleed and has no room for it. Markup lives in each page (static HTML so the trading disclosures are crawlable and survive with JS off); all styling is here so there is one place to change it. The band deliberately repeats the header: same --paper-2, same hairline. The page then reads as a plate between two matching rules. */ .site-footer{ background:var(--paper-2); border-top:1px solid var(--line-strong); margin-top:64px; font-family:var(--font-body); color:var(--muted); } .site-footer .foot-inner{ max-width:680px;margin:0 auto; padding:40px calc(18px + env(safe-area-inset-right,0px)) 0 calc(18px + env(safe-area-inset-left,0px)); } /* Brand block plus two link columns. The brand is given the extra width because the strapline needs a readable measure; the link columns only need their longest label ("Suggest a business") to fit on one line. */ .site-footer .foot-top{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr); gap:34px 30px; } .site-footer .foot-seal{display:block;width:74px;height:auto;margin:0 0 14px} .site-footer .foot-name{ font-family:var(--font-heading);font-size:22px;font-weight:600;letter-spacing:.01em; color:var(--green);margin:0 0 8px;line-height:1.15; } .site-footer .foot-strap{ margin:0;font-size:13.5px;line-height:1.65;color:var(--muted-2);max-width:34ch; } .site-footer .foot-col h2{ font-family:var(--font-body);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.11em;color:var(--green); margin:0 0 12px; } .site-footer .foot-col a{ display:block;font-size:13.5px;line-height:1.45;padding:5px 0; color:var(--muted);text-decoration:none;border-bottom:none; } .site-footer .foot-col a:hover{color:var(--green);text-decoration:underline; text-underline-offset:3px;text-decoration-color:var(--brass)} .site-footer a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px} /* The legal strip. The pledge sits here rather than in the columns because it is the one claim a visitor most needs to be able to find from any page. */ .site-footer .foot-legal{ margin-top:34px;padding:18px 0 calc(30px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line-strong); } .site-footer .foot-pledge{ margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--green);letter-spacing:.01em; } .site-footer .foot-reg{ margin:0;font-size:11.5px;line-height:1.7;color:var(--muted-2); } .site-footer .foot-reg strong{font-weight:600;color:var(--muted)} @media (max-width:767px){ .site-footer{margin-top:44px} .site-footer .foot-inner{ padding:32px calc(12px + env(safe-area-inset-right,0px)) 0 calc(12px + env(safe-area-inset-left,0px)); } /* Two columns below the brand rather than three across: the link labels stop wrapping and the touch targets keep their full height. */ .site-footer .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px} .site-footer .foot-brand{grid-column:1 / -1} .site-footer .foot-strap{max-width:none} .site-footer .foot-col a{padding:8px 0;font-size:14px} } /* Keep the footer at the foot of the window on short pages (contact, say, on a tall monitor) without it ever overlapping content on long ones. Scoped with :has() so the map page — which has no footer and manages its own full-height layout — is left completely alone. #sketchBg is position:fixed and so isn't a flex item. */ body:has(> .site-footer){min-height:100vh;display:flex;flex-direction:column} body:has(> .site-footer) > #topbar{flex:0 0 auto} body:has(> .site-footer) > .wrap{flex:1 0 auto} body:has(> .site-footer) > .site-footer{flex:0 0 auto}