/* 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 color, 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} /* The app's sign-off and copyright, on every document page. Quieter than the lines above them: those say where the data came from, these say who made it. */ .tfe-sig{margin:18px 0 4px} .tfe-copy{margin:0;color:var(--faint)} .tfe-sig a{color:var(--accent);text-decoration:none;font-weight:700; border-bottom:1px solid transparent} .tfe-sig a:hover,.tfe-sig a:focus-visible{border-bottom-color:var(--accent)} .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} /* ---------- The bar's menu on a phone ---------- Same failure the app's bar had, and worse: this one pushed the PAGE sideways. Measured before the change, buttons hung off the right edge at 414, 390, 360 and 320, and at 320 the document itself overflowed by 10-31px depending on the page — which breaks the one rule this stylesheet states outright, that the boxes scroll sideways and the page never does. Scrolling the nav was the old answer and it was the wrong one for the same reason it was wrong in the app: nav that scrolls out of sight is not nav, and nothing tells you there is more of it. No JavaScript here, ever — so the disclosure is a

, which needs none. Find 'Em stays in the bar because it is the one thing on the page that leaves it; the four that move you down the page go behind the summary. */ .tfe-menu{display:none;position:relative} .tfe-burger{list-style:none;cursor:pointer;width:44px;height:44px;flex:0 0 auto; display:flex;align-items:center;justify-content:center; border:2px solid var(--hair);border-radius:7px;color:var(--key); transition:border-color .15s} .tfe-burger::-webkit-details-marker{display:none} .tfe-burger::marker{content:""} .tfe-menu[open] .tfe-burger,.tfe-burger:hover{border-color:var(--accent)} /* Three bars drawn rather than typed — a glyph arrives at a weight nobody chose. The same shape the app's burger draws, because it is the same idea. */ .tfe-burger i{display:block;width:18px;height:2px;background:currentColor;position:relative} .tfe-burger i::before,.tfe-burger i::after{content:"";position:absolute;left:0; width:18px;height:2px;background:currentColor} .tfe-burger i::before{top:-6px} .tfe-burger i::after{top:6px} .tfe-menupanel{position:absolute;right:0;top:calc(100% + 9px);z-index:61; display:flex;flex-direction:column;gap:8px;padding:12px; min-width:200px;max-width:calc(100vw - 28px); background:var(--panel);border:1px solid var(--hair);border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.45)} .tfe-menupanel .tfe-btn{justify-content:flex-start;padding:12px 14px} .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 color, 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 ---------- */ /* The heading over the hub's list of everything built below it. Smaller than an H2 because it is inside a section rather than starting one, and monospaced for the same reason the legend and the counts are: it is a label on a list, not a sentence. */ /* ---------- The roadtrip line ---------- */ /* The drive, drawn on the same Texas the dots sit on. Wider than a hairline and under the dots on purpose: the stops are the answer and the route is the question they answer. --accent rather than a chain color, because a drive belongs to no chain. */ .tfe-route{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round; stroke-linecap:round;opacity:.9} .tfe-end{fill:var(--accent);stroke:var(--bg);stroke-width:2} /* Beats .tfe-legend i, which paints the chain color a drive doesn't have. */ .tfe-legend i.tfe-routekey,.tfe-links i.tfe-routekey{background:var(--accent)} /* Where the line came from. Quieter than the independence line above it and louder than nothing, which is what the licence asks for. */ .tfe-osm{color:var(--faint)} .tfe-osm a{color:var(--accent);text-decoration:none;font-weight:700; border-bottom:1px solid transparent} .tfe-osm a:hover,.tfe-osm a:focus-visible{border-bottom-color:var(--accent)} /* The stops table is five columns and its first is a distance, so the widths the store table sets are wrong for it. */ .tfe-route-table th:nth-child(1),.tfe-route-table td:nth-child(1){width:1%;white-space:nowrap} .tfe-route-table td:nth-child(2){width:auto} .tfe-route-table td:nth-child(3){width:18%} .tfe-route-table td:nth-child(4),.tfe-route-table td:nth-child(5){width:1%;white-space:nowrap} .tfe-subhead{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--faint); margin:26px 0 12px} /* The line that says whose answers these are. It sits above the questions rather than under them, because an attribution a reader meets after the claim is an attribution they have already not seen. No max-width, deliberately: the rule under it is the same rule that divides one question from the next, and a rule that stops short of the others reads as a mistake rather than as a measure. The line is short enough that capping it bought nothing anyway. */ .tfe-said{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--hair); color:var(--faint);font-size:13px;line-height:1.6} /* How strongly people agreed, as a chip rather than a sentence — it is a label on an answer, and it has to read as not-a-fact at a glance. Two levels: a scale with five rungs invites the middle three to mean nothing. */ .tfe-conf{display:inline-block;margin:10px 0 0;font-family:'Overpass Mono',monospace; font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; border-radius:4px;padding:3px 8px;border:1px solid var(--hair);color:var(--faint)} .tfe-conf-strong{border-color:var(--chain);color:var(--chain)} .tfe-conf-common{border-color:var(--hair);color:var(--faint)} .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{font-variant-numeric:tabular-nums} .tfe-hrs span{display:block;white-space:nowrap} .tfe-hrs span+span{margin-top:3px} /* The hours page puts its pattern in the row header, and a tbody th is bold and in the key color — which made the whole line shout, days and times alike. The days are the label and the times are the value: only the label is bold. */ .tfe-table tbody th.tfe-hrs{font-weight:400;color:var(--faint)} .tfe-hrs b{font-weight:700;color:var(--key)} /* 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. One move buys it: the four jump links go behind the burger, leaving the mark, Find 'Em and the summary — three things, which fits at 320 with the wordmark still beside the longhorn. They used to scroll sideways inside their own nav instead, with Find 'Em stuck to the right edge of that scroller. It looked deliberate and it was not working: measured, buttons were clipped off the right at every phone width, and at 320 the page itself overflowed. Nav you cannot see is not nav, and a scroller cannot fail visibly enough for anyone to report it. */ .tfe-barin{padding:8px 14px;gap:10px;flex-wrap:nowrap} /* The wordmark used to go here, leaving the longhorn alone. It was the cheapest 130px in the bar and it was the wrong 130px: the longhorn on its own is a shape people have to already know, and this site is mostly somebody's first visit. It stays, smaller, beside a smaller mark. */ .tfe-word{font-size:13px} .tfe-mark{width:26px} .tfe-home{gap:8px;min-width:0} /* overflow must stay visible: the menu's panel is positioned out of this nav, and a scroller would clip it into a sliver. There is nothing left to scroll anyway — the four jump links are in the panel now. */ .tfe-jump{margin-left:auto;flex-wrap:nowrap;overflow:visible;min-width:0} .tfe-jump > .tfe-btn:not(.tfe-btn-go){display:none} .tfe-menu{display:block} .tfe-btn{flex:0 0 auto;padding:9px 11px} .tfe-menupanel .tfe-btn{display:flex} .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%} } /* A row carries two buttons now — Find 'Em, which runs the search, and More, which opens that drive's own page. Measured, the pair plus a name like "San Antonio to Corpus Christi" does not fit 320 on one line, and because the row is nowrap it pushed the PAGE sideways rather than wrapping, which is the one thing this stylesheet says never happens. So on the narrowest phones the name takes its own line and the buttons sit under it. Truncating the name was the alternative and it is worse: the name is the whole content of the row, and "San Antonio to Corpus Chr…" is a drive nobody can identify. */ @media (max-width:400px){ .tfe-links li{flex-wrap:wrap;row-gap:8px} .tfe-links .tfe-link-name{flex:1 1 100%} .tfe-links .tfe-btn{flex:1 1 auto;justify-content:center} }