/* Hill Country Dairies: design tokens. Every value site.css uses comes from this file. If a value is not here, it is not a value the site has. Colour rule: one accent. Barn red is the logo's lettering and the truck wrap's red; it is used on a few things only (primary buttons, the Texas map band, placeholders). Everything else is white, light grey and ink. */ @font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-500.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-700.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-600.woff2") format("woff2"); } :root { /* ---- Colour: the accent ---- */ --red: rgb(189 53 39); /* barn red, the one accent */ --red-deep: rgb(156 41 30); /* pressed / hover on red */ --red-tint: rgb(189 53 39 / 0.08); --texas-line: rgb(189 53 39 / 0.38); /* footer Texas outline */ --texas-fill: rgb(189 53 39 / 0.06); /* and its inside shading */ /* ---- Colour: field green ---- Two greens from the logo's fields, each for one job. --green (deep): the hover wipe behind white button text, about 6:1. The bright green fails there (white text on it is ~2.6:1). --green-bright: green TEXT on dark ground, i.e. the home kicker. */ --green: rgb(32 112 48); /* The logo's bright field green. Added for the home kicker ("Texas dairy since 1970."), which sits on the intro photo: the deep --green above measures ~1.1:1 there and vanishes. This one passes 3:1 (large text) only together with the stronger --scrim-gate below. */ --green-bright: rgb(64 176 80); /* ---- Colour: the green family (round 2, Ian 2026-10-06: "more greens") ---- Pulled from the logo: tree green is the logo's #005600, field green its #39b54a. Field green is decoration only (2.5:1 on white, never text). Night is the darkest green, a section ground that carries white text. */ --green-tree: rgb(0 86 0); /* logo trees; white text 9.4:1 */ --green-field: rgb(57 181 74); /* logo fields; decoration only */ --green-night: rgb(14 44 20); /* darkest green ground, a green ink */ /* ---- Texture pack (round 2) ---- Each texture is a layer element (.tex) inside a .has-tex section, so several can stack. Colour comes from --tex-ink, never from the image, so one tile serves every variant. Lab: site/_lab/texture-pack.html. */ --tex-flannel-img: url("../images/texture/flannel.svg"); /* 100 x 100 buffalo check repeat, twill bands */ --tex-flannel-tile: 120px; /* one repeat = two 60px squares */ --tex-flannel-tile-sm: 88px; --tex-alpha-flannel: 0.12; /* the fade; 1 is full-strength flannel */ /* Barn banner: the logo scene right of the line from the bottom-left of COUNTRY's N to the top-left of DAIRIES' E (silo, barn, trees, rows). It fades in across its whole width on a smootherstep curve (6t^5 - 15t^4 + 10t^3), from 0 at the left edge to 30% at the right, so there is no visible start line or kink (Ian, 2026-10-06: "make the fade more smooth"). The mask carries all of the fade, so any tint layered over it inherits the same shape. */ --barn-img: url("../images/texture/barn-scene.svg"); --barn-ratio: 183 / 156; --barn-fade: linear-gradient(90deg, rgb(0 0 0 / 0.0000) 0.0%, rgb(0 0 0 / 0.0015) 8.3%, rgb(0 0 0 / 0.0106) 16.7%, rgb(0 0 0 / 0.0311) 25.0%, rgb(0 0 0 / 0.0630) 33.3%, rgb(0 0 0 / 0.1040) 41.7%, rgb(0 0 0 / 0.1500) 50.0%, rgb(0 0 0 / 0.1960) 58.3%, rgb(0 0 0 / 0.2370) 66.7%, rgb(0 0 0 / 0.2689) 75.0%, rgb(0 0 0 / 0.2894) 83.3%, rgb(0 0 0 / 0.2985) 91.7%, rgb(0 0 0 / 0.3000) 100.0%); --barn-tint: linear-gradient(transparent, transparent); /* none; variants swap in a colour */ --barn-blend: normal; /* ---- Colour: neutrals ---- */ --white: rgb(255 255 255); --paper: rgb(247 247 247); /* alternating section ground */ --line: rgb(229 229 229); /* hairlines, card borders */ --body: rgb(79 79 79); /* body text */ --muted: rgb(120 120 120); /* captions, meta */ --ink: rgb(18 18 18); /* headlines, footer ground */ --ink-soft: rgb(38 38 38); /* raised surface on ink */ /* ---- Colour: overlays ---- */ --scrim: linear-gradient(180deg, rgb(18 18 18 / 0.55) 0%, rgb(18 18 18 / 0.15) 40%, rgb(18 18 18 / 0.65) 100%); --frost: rgb(255 255 255 / 0.82); --frost-filter: saturate(1.6) blur(14px); /* header frost once the page scrolls */ --on-dark: rgb(255 255 255 / 0.88); --on-dark-muted: rgb(255 255 255 / 0.62); --on-dark-line: rgb(255 255 255 / 0.16); --scrim-flat: rgb(18 18 18 / 0.35); /* even dim over a poster */ --scrim-chip: rgb(18 18 18 / 0.45); /* placeholder chip over a photo */ --blur-frost: 14px; /* frosted header, logo glow */ --blur-chip: 6px; /* placeholder chip over a photo */ /* ---- Colour: text selection ---- Highlighted text takes the brand instead of the browser blue. The pair flips with the ground so it always reads: red on a pale red wash over white and paper, white on red over ink and photos, red on white over the red band. Every pair clears 4.5:1. */ --select-wash: rgb(246 227 225); /* barn red at 14% over white, solid */ --select-bg: var(--select-wash); --select-fg: var(--red); --select-bg-dark: var(--red); --select-fg-dark: var(--white); --select-bg-red: var(--white); --select-fg-red: var(--red); /* ---- Semantic ---- */ --text: var(--body); --text-strong: var(--ink); --accent: var(--red); --accent-hover: var(--red-deep); --focus: var(--red); /* ---- Type families ---- */ --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- Type scale: fluid between 390px and 1440px viewports ---- Display sizes are measured from the Framer draft at 1440 and scaled down smoothly instead of the draft's single jump at 768. */ --fs-hero: clamp(2.75rem, 1.82rem + 3.81vw, 6rem); /* 44 -> 96 */ --fs-h1: clamp(2.5rem, 1.85rem + 2.67vw, 4.5rem); /* 40 -> 72 */ --fs-h2: clamp(2.25rem, 1.79rem + 1.9vw, 3.5rem); /* 36 -> 56 */ --fs-h3: clamp(1.5rem, 1.31rem + 0.76vw, 2.25rem); /* 24 -> 36 */ --fs-h4: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem); /* 20 -> 24 */ --fs-lead: clamp(1.0625rem, 1.02rem + 0.19vw, 1.25rem);/* 17 -> 20 */ --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; --lh-display: 0.92; --lh-heading: 1.05; --lh-body: 1.6; --track-display: -0.02em; --track-eyebrow: 0.14em; --track-caps: 0.03em; /* product names set in capitals, as the client's list writes them */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ---- Space ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-section: clamp(4.5rem, 3.3rem + 4.9vw, 8rem); /* Product cards pack into columns (no dead space under short cards). */ --plist-cols: 3; --plist-cols-md: 2; --plist-cols-sm: 1; --gutter: clamp(1rem, 0.3rem + 2.86vw, 3.75rem); /* 16 -> 60 */ --container: 82.5rem; /* 1320px */ --measure: 38rem; /* readable line length */ /* ---- Shape ---- */ --r-xs: 2px; /* hairline bars */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 30px; --r-round: 50%; --wave-r: 14px; /* radius of one scallop on the milk edge */ --border: 1px solid var(--line); /* ---- Elevation ---- */ --shadow-header: 0 1px 0 rgb(18 18 18 / 0.06), 0 8px 24px rgb(18 18 18 / 0.06); --shadow-card: 0 1px 2px rgb(18 18 18 / 0.06), 0 12px 32px rgb(18 18 18 / 0.08); /* ---- Layout ---- */ --admin-bar-h: 0px; /* WordPress: set from the rule below, zero when logged out */ --header-h: 76px; --logo-w: calc(116px * 1.28); /* 148px; the PNG's transparent padding keeps the oval inside the bar */ --logo-w-sm: calc(96px * 1.28); /* 123px under 520px */ --tap: 44px; /* minimum touch target */ --bp-nav: 1080px; /* reference only; media queries repeat it as a literal */ /* ---- Motion ---- Enter: arriving content. Soft stop, no overshoot. Hover: answering the pointer. Quick and crisp. */ --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); --ease-hover: cubic-bezier(0.3, 0.7, 0.4, 1); --dur-reveal: 0.6s; --dur-hero: 0.6s; --delay-hero: 0.4s; --stagger: 0.08s; --dur-hover: 0.2s; --dur-wipe: 0.5s; /* green sliding across a button on hover, and back */ --dur-wipe-fade: 0.4s; /* the green fades as it slides, so it feels soft */ --ease-wipe: cubic-bezier(0.45, 0, 0.25, 1); /* gentle at both ends, so the return reads as the same move in reverse */ --dur-header: 0.7s; /* nav background fading in on scroll; slow on purpose */ --dur-zoom: 0.5s; --rise-reveal: 20px; --drop-hero: 30px; --lift: -1px; --zoom: 1.02; /* ---- Intro gate ---- The home page opens on a full-screen gate (the Buda Juice pattern). Its lines arrive one after another, slower than the hero drop-in, and the gate leaves by lifting like a curtain: an in-out curve, so it starts and stops gently. */ --fs-gate: clamp(3.25rem, 1.9rem + 5.6vw, 8rem); /* 52 -> 128 */ --kicker-color: var(--green-bright); --fs-gate-kicker: clamp(1.375rem, 1.13rem + 1vw, 2.25rem); /* 22 -> 36; back to the original size, Ian 2026-10-06 */ --delay-gate: 0.3s; --stagger-gate: 0.22s; --dur-gate: 0.9s; --ease-gate: cubic-bezier(0.76, 0, 0.24, 1); --scrim-side: linear-gradient(90deg, rgb(18 18 18 / 0.72) 0%, rgb(18 18 18 / 0.45) 50%, rgb(18 18 18 / 0) 85%); /* Was 0.35 in the centre fading to 0.7. Raised to an even 0.72, Ian's call 2026-10-06, so the bright green kicker clears 3:1 over 90% of the photo behind it at 390, 768, 1280x720 and 1440 (measured; 0.70 was the floor). */ --scrim-gate: linear-gradient(rgb(18 18 18 / 0.72), rgb(18 18 18 / 0.72)); /* Gate logo box (16:9, the oval sits inside transparent margins). Three times the old clamp(120px, 12vw, 180px); capped by viewport height so the gate's copy and button still fit on short laptop screens. */ --logo-gate: clamp(min(360px, 92vw), min(36vw, 60svh), 540px); /* ---- Logo intro (cow walk-in) ---- Geometry of the layered logo in hcd-logo-intro.css, measured from the client's logo file. These must match the images in /img/intro/ to the pixel: do not change them without re-exporting the layers. Timing and easing live in hcd-logo-intro.js, which drives the animation. */ --intro-ratio: 16 / 9; /* every layer is cut from a 1600 x 900 frame */ --intro-scene-clip: ellipse(28.2% 23.15% at 50.19% 50.2%); /* the scene oval the cow walks inside */ --intro-far-shade: brightness(0.74); /* the far front leg, a darkened copy of the near one */ /* ---- Texas map (home band, texas-map.css) ---- Our own Texas from Census data (tools/texas_map.py), in the flat Ben E. Keith style. The band is red, so Texas is cream (Ian approved 2026-10-06), edged in field green. Every map colour is a token so the texture pack can swap the ground. */ --map-ground: var(--red); --map-land: rgb(250 243 228); /* cream Texas */ --map-line: rgb(255 255 255 / 0.35); /* neighbouring-state hairlines */ --map-line-w: 1px; --map-edge: var(--green); /* outline around Texas */ --map-edge-w: 2px; --map-ink: var(--white); /* list type on red */ --map-tx-mid: 0.48; /* Texas's centre across the map box, from tools/texas_map.py framing */ --map-w: 110%; /* map box width at 1024 and up: bleeds off the right edge */ --map-w-md: min(190%, 1600px); /* 768 to 1023: Texas about 550 to 600px, centred */ --map-w-sm: 242%; /* under 768: Texas about 92% of the screen, centred */ --map-bar-w: 40px; /* short bar above the Locations heading */ --map-bar-h: 3px; /* Delivery regions on the Locations map: the client's own colours from their 2020 delivery-area map, one per region, on the cream Texas. */ --region-dfw: rgb(124 52 52); --region-waco-austin: rgb(213 208 194); --region-sa: rgb(64 110 172); --region-houston: rgb(110 138 100); --region-victoria: rgb(160 160 196); --region-corpus: rgb(244 206 90); --county-line: rgb(18 18 18 / 0.16); /* county lines inside Texas */ --county-line-w: 0.75px; --city-dot: rgb(196 64 52); /* the client map's red city dot */ --city-dot-size: 10px; --city-dot-ring: 2px solid var(--white); --city-label: var(--ink); --city-label-halo: 0 0 3px var(--map-land), 0 0 3px var(--map-land), 0 0 6px var(--map-land); --city-label-gap: 24px; /* clear of a branch star when one sits on the dot */ --pin-size: 32px; --pin-size-md: 36px; --pin-size-sm: 26px; --pin-bg: var(--white); --pin-star: var(--red); --pin-shadow: 0 1px 4px rgb(18 18 18 / 0.3); /* lifts the white pin off cream Texas */ --pin-grow: 1.18; --pin-here-grow: 1.35; /* this page's branch on a branch page */ --pin-other-scale: 0.5; /* the other branches on a branch page */ --pin-other-alpha: 0.55; --pin-ring: 3px solid var(--ink); /* keyboard focus */ --pin-ring-gap: 3px; /* Hover card ("cliff notes"), Ben E. Keith's measured box */ --map-card-w: 210px; --map-card-pad: var(--space-3); --map-card-r: var(--r-md); --map-card-shadow: 2px 2px 10px rgb(18 18 18 / 0.2); --map-card-gap: var(--space-3); /* arrow height between the card and the marker */ --map-card-arrow: 18px; /* arrow width */ --dur-map-card: 0.15s; /* opacity-only fade */ --ease-map-card: linear; --blog-banner-ratio: 1729 / 910; /* the client's blog title banners */ /* ---- Branch page: details, a gray bar, a live map ---- */ --branch-edge: var(--space-6); /* side margin: closer to the edge than the 60px container */ --branch-info-w: 26rem; /* the details column */ --branch-bar-w: 4px; --branch-bar: var(--line); /* the gray divider */ --branch-map-h: min(32rem, 70vh); /* ---- Customer logos (home testimonials) ---- Each quote shows its brand on the right; it pops in as that quote becomes current. (The looping logo strip was removed, Ian 2026-10-07.) */ --logo-quote-w: clamp(140px, 18vw, 240px); --logo-pop: 0.92; /* scale the logo grows from as it pops in */ --dur-logo-pop: 0.5s; /* ---- Nav hover ---- The label grows and turns red at hover speed, then a faint red glow builds slowly for as long as the pointer stays. Leaving drops it fast. */ --nav-grow: 1.2; --nav-glow: 0 0 14px rgb(189 53 39 / 0.28); --logo-glow: rgb(189 53 39 / 0.35); /* the blurred red behind the header logo on hover */ --dur-glow: 3s; --ease-glow: linear; /* builds steadily, so holding longer reads as more */ } /* WordPress admin bar height. Core bumps the page itself; these offset our fixed and sticky elements. Under 600px the bar scrolls away, so nothing offsets except the gate, which never scrolls: its corner holds Customer Login and the phone. */ .admin-bar { --admin-bar-h: 32px; --admin-bar-gate: 32px; } @media (max-width: 782px) { .admin-bar { --admin-bar-h: 46px; --admin-bar-gate: 46px; } } @media (max-width: 600px) { .admin-bar { --admin-bar-h: 0px; } }