/* Generated by scripts/build-pages.mjs. Do not hand-edit — the next build overwrites it. The tokens come out of index.html so the documents and the app cannot drift apart on colour, and the map, the cards and the buttons are deliberately the same shapes the app uses. --chain is set per page on from BRANDS, so a page is tinted by the chain it is about. */ :root{--bg:#001233; --sunk:#001A47; --panel:#00265C; --land:#003074; --key:#F2F4F8; --key-rgb:242,244,248; --accent:#E03A3E; --accent-ink:#FFFFFF; --faint:rgba(var(--key-rgb),0.54); --hair:rgba(var(--key-rgb),0.39); --sign-radius:14px} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--key); font-family:'Overpass',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px;line-height:1.55; background-image:radial-gradient(1200px 600px at 50% -200px,var(--sunk),var(--bg))} .tfe-head,main,.tfe-foot{max-width:900px;margin:0 auto;padding:0 20px} .tfe-skip{position:absolute;left:-9999px} .tfe-skip:focus{left:12px;top:12px;position:fixed;background:var(--panel);color:var(--key); padding:10px 14px;border:2px solid currentColor;border-radius:6px;z-index:9} /* ---------- The sticky bar: the mark left, the buttons hard right ---------- */ /* Sticky rather than fixed, so it takes its own space in the flow and nothing has to be padded down by a number somebody keeps in their head. It sticks from the first pixel because there is nothing above it — a document page has no hero to scroll past, and a bar that appears partway down needs a scroll listener these pages do not get to have. */ .tfe-bar{position:sticky;top:0;z-index:60;background:var(--sunk); border-bottom:1px solid var(--hair); box-shadow:0 6px 18px rgba(0,0,0,.28)} .tfe-barin{max-width:900px;margin:0 auto;padding:10px 20px; display:flex;gap:18px;align-items:center;flex-wrap:wrap} /* @supports, because without sticky this would be an ordinary bar that scrolls away — which is fine — but the shadow would then sit over the page's first paragraph for no reason. */ @supports not (position:sticky){ .tfe-bar{box-shadow:none} } .tfe-head{padding-top:14px;padding-bottom:0} .tfe-home{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--key)} .tfe-mark{width:38px;flex:0 0 auto;display:block} .tfe-mark svg{display:block;width:100%;height:auto;fill:var(--key)} .tfe-word{font-family:'Bungee',sans-serif;font-size:clamp(17px,2.2vw,21px);line-height:1; letter-spacing:.005em} .tfe-word em{font-style:normal;color:var(--accent)} .tfe-crumb{font-size:12px;color:var(--faint);margin:0; font-family:'Overpass Mono',monospace;letter-spacing:.04em} .tfe-crumb a{color:var(--faint)} /* Same declaration the app gives .sb-btn and .jumplink: a reader who learns the shape on the map should not have to learn another one here. */ .tfe-jump{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center} .tfe-btn{font-family:'Overpass',sans-serif;background:transparent; border:2px solid var(--hair);color:var(--key);border-radius:7px;padding:6px 11px; font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; display:inline-flex;align-items:center;gap:7px;white-space:nowrap; text-decoration:none;transition:border-color .15s} .tfe-btn:hover{border-color:var(--accent)} /* Filled, and there is exactly ONE per page: the button in the bar. The rule is not "it leaves" — the five buttons in Find More in Texas leave too, and filling those made a stack of five red slabs that shouted down the one action this page is actually for. Filled means primary. Everything else on the page, whether it moves you down it or off it, is outlined. */ .tfe-btn-go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .tfe-btn-go:hover{border-color:var(--accent);filter:brightness(1.08)} /* ---------- Type ---------- */ h1{font-family:'Bungee',sans-serif;font-size:clamp(28px,5.4vw,46px);line-height:1.05; margin:26px 0 16px;letter-spacing:.005em} h2{font-family:'Bungee',sans-serif;font-size:clamp(18px,2.6vw,24px);margin:0 0 16px; letter-spacing:.01em;display:flex;align-items:center;gap:12px} /* The chain's own colour, as a rule that runs out from the heading. */ h2::after{content:"";flex:1 1 auto;height:2px;background:var(--chain);opacity:.45;border-radius:2px} h3{font-size:16px;margin:0 0 4px;font-weight:700} a{color:var(--key)} .tfe-sec{margin:38px 0 0} /* scroll-margin, because every one of these is a jump target now and the bar above is 58-odd pixels of opaque. Without it the heading you jumped to is the thing the bar is sitting on. */ .tfe-sec{scroll-margin-top:74px} /* The app's own two lines. Mono for the date, because the app sets its Data Freshness in mono and the same fact should not change typeface between two pages of one site. */ .tfe-fresh{font-family:'Overpass Mono',monospace;font-size:12.5px;letter-spacing:.03em; color:var(--faint);margin:-6px 0 10px} .tfe-fresh b{color:var(--key);font-weight:700} .tfe-truly{font-size:14.5px;line-height:1.55;color:var(--faint);margin:0 0 20px; max-width:70ch;border-left:4px solid var(--chain);padding-left:14px} .tfe-truly b{color:var(--key);font-weight:700} /* The sentence an assistant lifts, and the first paragraph of prose in main. */ .tfe-answer{font-size:clamp(17px,2.3vw,21px);line-height:1.5;margin:0 0 24px; color:var(--key);max-width:62ch} /* ---------- Cards: the app's .sign, double border and all ---------- */ .tfe-card{background:var(--panel);border-radius:var(--sign-radius); box-shadow:0 0 0 2px var(--bg),0 10px 30px rgba(0,0,0,.38);position:relative} .tfe-card::after{content:"";position:absolute;inset:7px;border:2px solid var(--key); border-radius:calc(var(--sign-radius) - 6px);pointer-events:none;opacity:.9} .tfe-card-in{padding:24px 26px 22px;position:relative;z-index:1} .tfe-mapcard{overflow:hidden;margin:0 0 6px} .tfe-maplink{display:block;text-decoration:none;color:var(--key);padding:20px 20px 0; position:relative;z-index:1} .tfe-map{display:block;width:100%;height:auto} .state-fill{fill:var(--land)} .state-line{fill:none;stroke:var(--key);stroke-width:1.6;opacity:.85;vector-effect:non-scaling-stroke} .tfe-dots circle{stroke:var(--bg);stroke-width:1} /* The app's .maprow: a hairline, the legend on the left, the way out on the right. */ .tfe-maprow{display:flex;align-items:center;gap:14px;flex-wrap:wrap; border-top:1px solid var(--hair);margin-top:6px;padding:14px 4px 18px} .tfe-legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim,var(--faint)); font-weight:600;letter-spacing:.03em;flex:0 0 auto} .tfe-legend i{width:10px;height:10px;border-radius:50%;display:block;background:var(--chain); box-shadow:0 0 0 1px var(--key)} .tfe-legend b{color:var(--key)} .tfe-cta{margin-left:auto;font-family:'Overpass Mono',monospace;font-size:12px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--accent);flex:0 1 auto} .tfe-maplink:hover .tfe-cta{text-decoration:underline} /* ---------- The facts ---------- */ /* One card each rather than a bullet list. Every one of these is something the build worked out across the whole chain, which is the thing nothing else on the internet has — a bullet was underselling it. */ .tfe-facts{list-style:none;margin:0;padding:0;display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))} .tfe-facts li{background:var(--sunk);border-radius:10px;padding:16px 18px; border-left:4px solid var(--chain);font-size:15px;line-height:1.5;color:var(--faint)} .tfe-facts li b{color:var(--key);font-weight:700} /* ---------- Questions ---------- */ .tfe-qa+.tfe-qa{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)} .tfe-qa p{margin:0;color:var(--faint)} /* ---------- The table ---------- */ /* Wide content scrolls inside its own box; the page body never scrolls sideways, at any width. */ .tfe-scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:10px} .tfe-table{border-collapse:collapse;width:100%;font-size:14px;min-width:660px} .tfe-table caption{text-align:left;padding:0 0 12px;color:var(--faint);font-size:12px; font-family:'Overpass Mono',monospace;letter-spacing:.04em;text-transform:uppercase} .tfe-table th,.tfe-table td{text-align:left;padding:10px 14px;border-top:1px solid var(--hair); vertical-align:top} /* Auto layout hands the widest column whatever is left over, which on the two big chains is the amenity pills — and the name column got squeezed until "Buc-ee's" broke at its own hyphen into "Buc-" and "ee's". Every store on five of the six chains has the chain's name inside its name, so that break was on nearly every row. Percentages rather than fixed widths so the shape holds from the 660px floor to a wide desktop; Directions takes 1% and gets its content width, which is what a nowrap cell does under a 1% hint. */ .tfe-table th:nth-child(1){width:23%} .tfe-table td:nth-child(2){width:22%} .tfe-table td:nth-child(3){width:15%} .tfe-table td:nth-child(5){width:1%;white-space:nowrap} .tfe-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.07em; color:var(--faint);border-top:0;background:var(--sunk)} .tfe-table tbody th{font-weight:700;color:var(--key)} .tfe-table td{color:var(--faint)} .tfe-table tbody tr:hover td,.tfe-table tbody tr:hover th{background:rgba(var(--key-rgb),.04)} .tfe-nm{display:block} /* The store number, in the app's mono, for the same job it does on a card: telling two stores in one town apart. */ .tfe-sid{display:block;font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.04em;color:var(--chain);margin-top:2px} .tfe-town{display:block;color:var(--faint);font-size:12.5px;margin-top:2px} .tfe-hrs{white-space:nowrap;font-variant-numeric:tabular-nums} /* Flat, no border, no hover: the app's rule is that a pill is a caption and an action is a control, and a reader decides what to touch from shape alone. */ .tfe-pill{display:inline-block;background:rgba(var(--key-rgb),.09);border-radius:999px; padding:3px 9px;margin:0 4px 4px 0;font-size:11.5px;color:var(--key);white-space:nowrap} .tfe-none{color:var(--faint);font-style:italic;font-size:12.5px} .tfe-map-link{display:inline-block;white-space:nowrap;border:2px solid var(--hair); border-radius:7px;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;text-decoration:none;transition:border-color .15s} .tfe-map-link:hover{border-color:var(--accent)} .tfe-note{color:var(--faint);font-size:13px;margin:16px 0 0} /* ---------- The rest of the map ---------- */ .tfe-links{list-style:none;margin:0;padding:0;display:grid;gap:8px} .tfe-links li{display:flex;align-items:center;gap:10px;background:var(--panel); border-radius:10px;padding:12px 16px;font-size:14px;flex-wrap:wrap} .tfe-link-name{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700} .tfe-link-name:hover{text-decoration:underline} /* The button never underlines with the name beside it, and it keeps its own hover — two targets in one row that respond as one row is a row that reads as a single link with a decoration on the end. */ .tfe-links .tfe-btn{flex:0 0 auto} .tfe-links .tfe-btn:hover{text-decoration:none} .tfe-links i{width:10px;height:10px;border-radius:50%;display:block;flex:0 0 auto; box-shadow:0 0 0 1px var(--key)} .tfe-links .tfe-all{background:linear-gradient(135deg,#FF3B4E 0 33%,#F5C518 33% 66%,#A98BFF 66%)} .tfe-links > li > span{margin-left:auto;color:var(--faint);font-size:12px; font-family:'Overpass Mono',monospace} .tfe-foot{margin:48px auto 64px;padding-top:18px;border-top:1px solid var(--hair); color:var(--faint);font-size:13px} .tfe-foot p{margin:0 0 8px} @media (max-width:640px){ /* ONE ROW on a phone, and this is the whole reason for the rules below. Wrapped, the bar was 124px of an 844px screen — 15% of the viewport gone for the entire length of a page whose main content is a long table. The app's bar is a single row and so is this one. Three moves buy it. The wordmark goes, leaving the longhorn, which is still the link home and is the mark people recognise anyway. The jump links stop wrapping and scroll sideways inside their own nav — the page body still never scrolls sideways, which is the rule that matters. And Find 'Em is sticky to the right edge OF THAT SCROLLER, so the one button that does something is on screen at every scroll position while the four that move you down the page slide under it. */ .tfe-barin{padding:8px 14px;gap:10px;flex-wrap:nowrap} .tfe-word{display:none} .tfe-jump{margin-left:auto;flex-wrap:nowrap;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0; mask-image:linear-gradient(90deg,transparent 0,#000 12px)} .tfe-jump::-webkit-scrollbar{display:none} .tfe-btn{flex:0 0 auto;padding:9px 11px} /* A solid spread of the bar's own colour before the blur, not a blur alone: a button sliding under a soft gradient reads as a rendering fault, and the hard edge is what makes it read as one thing passing behind another. */ .tfe-btn-go{position:sticky;right:0;margin-left:2px; box-shadow:-7px 0 0 7px var(--sunk),-20px 0 14px -6px var(--sunk)} .tfe-sec{scroll-margin-top:64px} /* The count is the thing that goes when a row runs out of room: the name and the button are both destinations, and a store count is a caption. */ .tfe-links > li > span{display:none} .tfe-links li{gap:10px;flex-wrap:nowrap} .tfe-link-name{flex:1 1 auto;min-width:0} /* A real target on a phone, same 44px the app holds its controls to. */ .tfe-links .tfe-btn{padding:12px 12px} .tfe-card-in{padding:20px 16px 18px} .tfe-maplink{padding:14px 12px 0} .tfe-cta{margin-left:0;flex-basis:100%} }