/* --------------------------------------------------------------------------- THE TWO ICONS THIS SITE USES, DRAWN RATHER THAN LOADED. Font Awesome was three stylesheets and about 30KB on EVERY page for exactly two glyphs: a telephone and a right arrow. CLAUDE.md has said so for weeks - "Font Awesome is loaded for exactly one arrow and one telephone" - and this is that note acted on. A MASK, NOT A BACKGROUND IMAGE, so the glyph takes its colour from `color` the way a font does. Every rule that used to say `.fas{color:...}` keeps working with only its selector renamed, because currentColor is what the mask paints. That matters here: the telephone is green on a transparent pill and ink on a gold one, and hands back to ink on hover, and all of that was already written as colour. Sized in em for the same reason - the existing `font-size:.9em` and `.82em` rules that tuned the glyph against its label still apply. The phone is the artwork Carter supplied, 24x24 single path; the arrow is drawn to the same box. No icon font, no third-party request, no FA4 shim. ------------------------------------------------------------------------ */ .hat-ico{ display:inline-block; width:1em; height:1em; flex:none; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; /* An icon is not text: no baseline shift from the line it sits on, and not selectable. */ vertical-align:-0.125em; user-select:none; } .hat-ico--phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.00589%204.54166C1.905%203.11236%203.11531%202%204.54522%202H7.60606C8.34006%202%209.00207%202.44226%209.28438%203.1212L10.5643%206.19946C10.8761%206.94932%2010.6548%207.81544%2010.0218%208.32292L9.22394%208.96254C8.86788%209.24798%208.74683%209.74018%208.95794%2010.1448C10.0429%2012.2241%2011.6464%2013.9888%2013.5964%2015.2667C14.008%2015.5364%2014.5517%2015.4291%2014.8588%2015.0445L15.6902%2014.003C16.1966%2013.3687%2017.0609%2013.147%2017.8092%2013.4594L20.8811%2014.742C21.5587%2015.0249%2022%2015.6883%2022%2016.4238V19.5C22%2020.9329%2020.8489%2022.0955%2019.4226%2021.9941C10.3021%2021.3452%202.65247%2013.7017%202.00589%204.54166Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.00589%204.54166C1.905%203.11236%203.11531%202%204.54522%202H7.60606C8.34006%202%209.00207%202.44226%209.28438%203.1212L10.5643%206.19946C10.8761%206.94932%2010.6548%207.81544%2010.0218%208.32292L9.22394%208.96254C8.86788%209.24798%208.74683%209.74018%208.95794%2010.1448C10.0429%2012.2241%2011.6464%2013.9888%2013.5964%2015.2667C14.008%2015.5364%2014.5517%2015.4291%2014.8588%2015.0445L15.6902%2014.003C16.1966%2013.3687%2017.0609%2013.147%2017.8092%2013.4594L20.8811%2014.742C21.5587%2015.0249%2022%2015.6883%2022%2016.4238V19.5C22%2020.9329%2020.8489%2022.0955%2019.4226%2021.9941C10.3021%2021.3452%202.65247%2013.7017%202.00589%204.54166Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")} .hat-ico--arrow{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.05%204.55%2020.5%2012l-7.45%207.45-1.42-1.4%205.03-5.05H3.5v-2h13.16l-5.03-5.05z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.05%204.55%2020.5%2012l-7.45%207.45-1.42-1.4%205.03-5.05H3.5v-2h13.16l-5.03-5.05z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")} /* The hero's telephone is an Elementor Button widget, so there is no element of ours to hang a class on. Its icon control went with the Font Awesome dependency and the glyph is drawn here instead. ALIGN-SELF AND A MARGIN, BOTH OF THEM NEEDED, and the first cut had neither. The button is display:flex but its align-items computes to `normal`, which behaves as stretch; a flex item with an explicit height cannot stretch, so it falls to flex-start and the telephone sat at the TOP of a 58px button while the label sat centred. And the gap is `normal`, not the 9px that .hat-telbtn carries - that is a different class on different markup - so the glyph also had nothing between it and the text. */ .hat-telpill .elementor-button::before{ content:""; display:inline-block; width:.95em; height:.95em; flex:none; align-self:center; margin-right:9px; background-color:var(--green-text); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.00589%204.54166C1.905%203.11236%203.11531%202%204.54522%202H7.60606C8.34006%202%209.00207%202.44226%209.28438%203.1212L10.5643%206.19946C10.8761%206.94932%2010.6548%207.81544%2010.0218%208.32292L9.22394%208.96254C8.86788%209.24798%208.74683%209.74018%208.95794%2010.1448C10.0429%2012.2241%2011.6464%2013.9888%2013.5964%2015.2667C14.008%2015.5364%2014.5517%2015.4291%2014.8588%2015.0445L15.6902%2014.003C16.1966%2013.3687%2017.0609%2013.147%2017.8092%2013.4594L20.8811%2014.742C21.5587%2015.0249%2022%2015.6883%2022%2016.4238V19.5C22%2020.9329%2020.8489%2022.0955%2019.4226%2021.9941C10.3021%2021.3452%202.65247%2013.7017%202.00589%204.54166Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.00589%204.54166C1.905%203.11236%203.11531%202%204.54522%202H7.60606C8.34006%202%209.00207%202.44226%209.28438%203.1212L10.5643%206.19946C10.8761%206.94932%2010.6548%207.81544%2010.0218%208.32292L9.22394%208.96254C8.86788%209.24798%208.74683%209.74018%208.95794%2010.1448C10.0429%2012.2241%2011.6464%2013.9888%2013.5964%2015.2667C14.008%2015.5364%2014.5517%2015.4291%2014.8588%2015.0445L15.6902%2014.003C16.1966%2013.3687%2017.0609%2013.147%2017.8092%2013.4594L20.8811%2014.742C21.5587%2015.0249%2022%2015.6883%2022%2016.4238V19.5C22%2020.9329%2020.8489%2022.0955%2019.4226%2021.9941C10.3021%2021.3452%202.65247%2013.7017%202.00589%204.54166Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } /* ============================================================================ Hattricks. The ONLY stylesheet. Everything here is something Elementor cannot express. If a rule below could have been a Kit value or a widget control, it is in the wrong place. ========================================================================= */ :root{ --gold:#e0ae1f; /* UI gold. Buttons, marquee, type on dark. Never text on cream (1.79). */ --gold-logo:#f8cc00; /* The wordmark only. */ --green:#009c3b; /* Shamrock. Fills and badges, always with ink on it (5.1). */ --green-text:#0f6b32; /* Green as words on cream (5.93). Never a fill. */ --green-dark:#003119; /* Tavern green. Dark bands, header, footer. */ --ink:#141414; --cream:#f7f2e6; --bone:#ece5d5; /* PAPER IS THE CARD COLOUR. See the surface rule below. Added 2026-08-24 on the argument that the light end had no room, because cream to bone and cream to white are both 1.12. The first half is true and the conclusion was not: measured 2026-08-25, cream to PAPER is 1.082, a SMALLER step than either. Paper never added room to a cream ground; what it adds is a strong step off a BONE one, 1.215, the largest the light end has. That is why the rule below puts cards on bone wherever it has the choice. Mirrors hat-paper in the kit, the same way --cream mirrors hat-cream. Keep the two in step: tools/set-kit-colors.php is the other half. */ --paper:#fdfbf8; /* The face tokens are prefixed because Elementor 4 sets --display:flex on every flexbox container. A token named --display therefore resolves to "flex" inside any container, and font-family:var(--display) silently renders in a fallback face. Do not rename these back. */ --face-display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif; --face-ui:'Barlow Semi Condensed',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; /* The traced mark, as a mask rather than an image, so its colour still comes from the palette instead of being baked into a file. Used by the Locations pill and the mobile picker row, both of which are Button widgets: Elementor's icon control only accepts a custom SVG when unfiltered uploads are enabled, and they are off on this install. */ --mark-shamrock:url('../img/shamrock-traced.svg'); /* What the chrome takes out of a mobile viewport, so the hero can fill exactly what is left rather than running under it. Measured at 390 on 2026-08-20: header bar 88.7 + picker row 42.6 + jersey 7 = 138.3, and the sticky order bar 49. RE-MEASURE IF THE HEADER CHANGES; these are the only two numbers in this file that describe another element's size. */ --hat-chrome-top:138px; --hat-chrome-bottom:49px; } /* --------------------------------------------------------------------------- THE SURFACE RULE. Decided 2026-08-25. Three light values, one job each. BANDS ALTERNATE. bone and cream are bands. Never a card. CARDS ARE PAPER. paper is a card. Never a band. INSIDE A CARD IS BONE. a card is a raise; a thing inside one is not a second raise, so it steps back down. A card is anything that paints its own light background on top of a band. That is a mechanical test: a photograph is not a card, text on the band is not a card, and an OUTLINE CONTROL is not a card. Controls are governed by the button vocabulary instead, which is why .hat-locmodal__pick is transparent with an ink border and a press hover rather than a fill. Because paper is the top rung, a card is always the lightest thing on the page, so "forward is lighter" holds with no exceptions and no flip rule. Four rules of the form `.hat-band-cream .hat-thing{background:var(--bone)}` were deleted on 2026-08-25 for exactly that reason. The steps are deliberately unequal: 1.215 on a bone band, 1.082 on a cream one. The ink border is what separates a card in both cases, 2px to 4px of it; the tone is the second cue and not the only one. Where a band carries cards and has NO alternation to honour it takes bone, which is why .hat-locindex is bone rather than cream. That is a preference and not a law: .hat-contact__body is the one waiver, cream to match its own head, and the reason is written where it lives. A CARD THAT CONTAINS AN EYEBROW MUST SET --secbg TO ITS OWN COLOUR. .hat-rule-eyebrow > * paints var(--secbg,var(--cream)) to knock a hole in its rule line, and --secbg is declared by the BAND. Left alone, an eyebrow inside a paper card paints a cream patch on it. NOT a card, and deliberately unchanged: .hat-slide, which is the same width as the .hat-promos band it sits in and is therefore that band's content rather than a card on it. Nothing to separate. ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- Body text colour. The mockup's body is `color:var(--ink)`. Hello Elementor's reset sets #333 and the kit cannot override it: Site Settings > Typography carries Body TYPOGRAPHY, link colours and H1 to H6, and the only kit control with a {{WRAPPER}} colour selector is body_background_color. Checked against the kit's own control registry on 2026-08-20, not from memory. So this is the one place it can live. The kit's own body typography (face, size, weight, line-height) is NOT here. That is a global value and it belongs in the kit. ------------------------------------------------------------------------ */ body{color:var(--ink)} /* --------------------------------------------------------------------------- Button press-in hover. The Kit carries fill, border, radius, shadow and typography, and clears the shadow on hover. It has no transform control, and setting Advanced > Transform per widget would be a manual operation on every button on the site. One shared selector is both cheaper and cached sitewide, so it stays here. ------------------------------------------------------------------------ */ .elementor-button{ transition:transform .09s ease, box-shadow .09s ease; } .elementor-button:hover{ transform:translate(3px,3px); } /* The mockup's .btn.sm carries a 2px shadow, so it presses 2px. At the shared 3px it overshoots its own shadow by a pixel and reads as a slide rather than a press. */ .hat-btn-sm .elementor-button:hover{ transform:translate(2px,2px); } /* --------------------------------------------------------------------------- Band classes. A section declares its ground once, and anything inside that needs to match it reads --secbg rather than restating a colour. Apply to a section container via Advanced > CSS Classes. Set the container's own background from the matching Global Color, so the class and the control agree; the class carries the variable, not the paint. ------------------------------------------------------------------------ */ .hat-band-cream{--secbg:var(--cream)} .hat-band-bone {--secbg:var(--bone)} .hat-band-dark {--secbg:var(--green-dark)} .hat-band-gold {--secbg:var(--gold)} /* --------------------------------------------------------------------------- Hero. Mockup 169-190. The container controls carry the photograph, the min-height, the padding and the centring. Three things they cannot carry: The scrim is a THREE stop gradient, 0 / 42% / 100%. Elementor's background overlay gradient has two stops, so it cannot express the mid point that keeps the headline legible without darkening the whole photo. The eyebrow's shadow is two layers. The widget's text-shadow control is one. Gold is the palette's weakest colour over an image and this is the only hero text without a shadow of its own, so both layers matter. The sub's measure is 62ch. Elementor's width control has no ch unit. ------------------------------------------------------------------------ */ .hat-hero{background-color:var(--ink)} /* svh, not vh. On a phone vh measures the LARGE viewport, the one you only get once the browser chrome has scrolled away, so 88vh was more than a screenful of what you can actually see while the chrome is up. svh measures the small viewport. The vh line stays first as the fallback for anything that does not know svh. */ .hat-hero{min-height:min(88vh,760px)} .hat-hero{min-height:min(88svh,760px)} @media(max-width:980px){ /* On mobile the hero fills exactly what is left of the screen, rather than a percentage of it. 88% of the viewport plus a 138px header plus a 49px sticky bar came to 86px more than the screen, which pushed the rating badge under the fold: the badge is pinned to the hero's bottom, so if the hero ends off-screen the badge does too. */ .hat-hero{min-height:calc(100svh - var(--hat-chrome-top) - var(--hat-chrome-bottom))} } .hat-hero::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.72) 100%); } /* 15px and .2em, not the kit's 14.5px hat-eyebrow: the mockup steps the hero's up, and a preset that exists for one use is worse than a class. Targeted at the title element, not the widget wrapper. Elementor's Heading widget wraps its text and sets `.elementor-heading-title{line-height:1}`, so a line-height on the wrapper is inherited and then overridden: the eyebrow measured 15px tall where the mockup's is 24. Same reason the section rule eyebrow below targets its child. */ .hat-hero__eyebrow .elementor-heading-title{ font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; line-height:1.6;margin:0 0 10px; text-shadow:0 1px 10px rgba(0,0,0,.8),0 0 26px rgba(0,0,0,.55); } /* Measure on the paragraph, spacing on the widget. Elementor pins the widget to max-width:100% with more specificity than a single class, so a measure set on the wrapper is silently dropped; and it resets the paragraph's own margins, so spacing set there never appears. The wrapper is a flex item, whose margins do not collapse, which is why the pair works. */ .hat-hero__sub p{max-width:62ch;margin:0 auto} /* Three selectors, and margin-block-end named explicitly, for one reason: the kit's widget spacing emits .elementor-widget:not(:last-child){margin-block-end:0} in post-2141.css. That is (0,2,0), the same as a two-class rule, and it uses the LOGICAL property, so a physical `margin-bottom` at equal specificity loses on source order. The symptom is a top margin that applies and a bottom margin that does not, which reads like a collapse bug and is not one. Expect this on every section, not just here. */ .hat-hero .hat-hero__sub.elementor-widget{margin:18px 0 26px;margin-block-end:26px} /* The mockup's buttons carry `margin:0 10px 10px 0`, so the row is 10px taller than the buttons. Without it the whole hero block centres 5px high. */ .hat-hero__ctas{margin-bottom:10px} @media(max-width:760px){ /* At 13px/.22em the eyebrow wrapped and split "South Tampa" over two lines. */ .hat-hero__eyebrow .elementor-heading-title{font-size:13px;letter-spacing:.11em} } /* --------------------------------------------------------------------------- Shop. Mockup 328-335. Grid, reflow at 820. The merch shot is 3:4 portrait. Without a ratio it drives the row height and the section grows far taller than its copy column. ------------------------------------------------------------------------ */ .hat-shop > .e-con-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .hat-shop__copy{align-self:center} .hat-shop__ph{ align-self:center; border:4px solid var(--ink);border-radius:20px;overflow:hidden;aspect-ratio:1/1; } .hat-shop__ph img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block} .hat-shop__p p{margin:0;max-width:40ch;color:#5d574a} .hat-shop .hat-shop__p.elementor-widget{margin-block-end:16px} .hat-shop .hat-shop__p.elementor-widget{margin-block-start:16px} .hat-shop .hat-shop__btn.elementor-widget{margin-block-end:10px} @media(max-width:820px){ .hat-shop > .e-con-inner{grid-template-columns:1fr;gap:26px} } /* --------------------------------------------------------------------------- Instagram row. Mockup 336-348. A scroller, not a grid: it overflows on purpose and snaps. The scrollbar is hidden because the tiles themselves are the affordance. ------------------------------------------------------------------------ */ /* flex-direction too, not just display: an Elementor container defaults to a COLUMN, so display:flex alone left eight full-width tiles stacked vertically and the section 2931px tall. */ .hat-igcar.e-con{ display:flex;flex-direction:row;gap:6px; /* nowrap, and it matters only on mobile: Elementor sets --flex-wrap-mobile to wrap on every container, so below the tablet breakpoint the eight tiles wrapped into four rows and the carousel became a grid. */ flex-wrap:nowrap; overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none; } .hat-igcar.e-con::-webkit-scrollbar{display:none} /* THE SHORTCODE'S WRAPPERS ARE TRANSPARENT TO THE ROW. .hat-igcar is the flex row and .hat-igcar__cell has to be a DIRECT child of it. [hat_instagram] arrives inside Elementor's two widget wrappers, which would make every tile a grandchild and collapse the row into one block. display:contents removes the boxes from the layout while keeping their children, which is exactly what is wanted and costs nothing: neither wrapper paints a background, a border or a shadow, so there is nothing to lose. */ .hat-igcar > .elementor-widget-shortcode, .hat-igcar > .elementor-widget-shortcode > .elementor-widget-container, /* THREE wrappers, not two. Elementor's Shortcode widget adds .elementor-shortcode inside the widget container, so a rule that stopped at two left the tiles one level down and the row still closed over a single block. */ .hat-igcar > .elementor-widget-shortcode .elementor-shortcode{ display:contents; } /* A live tile is an , and .elementor a{box-shadow:none} is (0,1,1), so anything styling it needs two classes. Nothing here needs a shadow; this is only to keep the link from picking up the theme's underline and colour. */ .hat-igcar .hat-igcar__cell{ display:block; text-decoration:none; } .hat-igcar__cell{ flex:0 0 clamp(230px,23vw,320px);aspect-ratio:1/1;overflow:hidden; scroll-snap-align:start;border:4px solid var(--ink);border-radius:14px;background:var(--ink); } .hat-igcar__cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block} .hat-igcar__cell:hover img{transform:scale(1.05)} .hat-ig__head{margin-bottom:24px} @media(max-width:760px){ /* 230 was the clamp floor, so a 390px screen showed one and a half tiles. 158 shows two and a half, which is what tells you the row scrolls without a "swipe" label saying so. */ .hat-igcar.e-con{gap:5px} .hat-igcar{padding-left:16px;padding-right:16px} .hat-igcar__cell{flex:0 0 158px} } /* --------------------------------------------------------------------------- The story, and the seal. Mockup 316-327. Grid again, and again because the reflow is at 900px. The seal hangs off the top edge of the band and must not intercept clicks, hence pointer-events:none on the rail. ------------------------------------------------------------------------ */ .hat-story > .e-con-inner{ display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center; } /* align-self, because a grid item stretches by default: the collage was taking the row's full height instead of centring its 403px against the copy. */ .hat-collage{position:relative;align-self:center} .hat-collage img{border:6px solid var(--cream);border-radius:16px;display:block} .hat-collage__p1{width:78%} .hat-collage__p2{width:56%;position:absolute;right:0;bottom:0} .hat-story__copy{align-self:center} .hat-story__p p{margin:0;color:rgba(247,242,230,.86)} /* The mockup's rhythm here is three separate things: an 18px lead-in on the FIRST paragraph only, the global `p{margin:0 0 16px}` under both, and 8px on the button. Setting 18 above every paragraph and nothing below them made the copy column 14px short, which then stopped the collage centring against it. */ .hat-story .hat-story__p.elementor-widget{margin-block-end:16px} .hat-story .hat-story__p--lead.elementor-widget{margin-block-start:18px} /* 8 above from the mockup's inline style, 10 below from `.btn{margin:0 10px 10px 0}`. The 10 is what makes the copy column 422 rather than 412, which is in turn what the collage centres against. */ .hat-story .hat-story__btn.elementor-widget{margin-block-start:8px;margin-block-end:10px} /* The rail is absolute against the band, which Elementor already makes relative. */ .hat-sealrail{ position:absolute;top:-79px;left:0;right:0;z-index:20;pointer-events:none; max-width:1240px;margin:0 auto; } /* The seal is an HTML widget, and a widget is a block child that fills its parent, so justify-content on the rail moved nothing and the seal sat at the left. An auto left margin moves the widget itself. */ .hat-sealrail > *{margin-left:auto;width:max-content} .hat-sealrail .seal{width:158px;height:auto;display:block} @media(max-width:900px){ .hat-story > .e-con-inner{grid-template-columns:1fr;gap:34px} .hat-sealrail{top:-56px} .hat-sealrail .seal{width:112px} } /* --------------------------------------------------------------------------- The kitchen and the bar. Mockup 302-315. A grid rather than container controls for the same reason as sports: the reflow is at 820px, which is neither of Elementor's breakpoints. The mobile hide is a media query and NOT Elementor's per-widget mobile visibility, which was the original instruction. Elementor's mobile breakpoint is 767 and this grid drops to two columns at 820, so hiding at 767 would leave 53px of viewport showing eight cells in two columns: four rows, and roughly double the section height. The hide has to happen at the same width as the reflow. ------------------------------------------------------------------------ */ /* On the container itself, not on .e-con-inner: a FULL width container has no inner wrapper, its children are direct. A boxed one does, which is why the sports row targets the inner and this does not. And .e-con in the selector because Elementor sets display from a variable on that class, so a bare one-class rule only wins on source order. */ .hat-foodgrid.e-con{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .hat-food__cell{ aspect-ratio:1/1;overflow:hidden;background:var(--ink); border:4px solid var(--ink);border-radius:14px; } .hat-food__cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .hat-food__cell:hover img{transform:scale(1.05)} .hat-food__head{margin-bottom:30px} /* The 10px is the mockup's `.btn{margin:0 10px 10px 0}` again: the row is 10px taller than the buttons, and without it the section is 10px short. */ .hat-food__ctas{margin-top:34px;padding-bottom:10px} @media(max-width:820px){ .hat-foodgrid.e-con{grid-template-columns:repeat(2,1fr)} .hat-foodgrid{padding-left:16px;padding-right:16px} .hat-food__cell:nth-child(n+5){display:none} } /* --------------------------------------------------------------------------- Sports. Mockup 270-287. The row is a grid here rather than a container control, and deliberately: the columns are 1fr 1.55fr 1fr, and the responsive rule reflows at 900px, which is neither of Elementor's breakpoints. Half of this layout has to be a media query whatever happens, so keeping both halves together beats splitting one layout across a control and a stylesheet. ------------------------------------------------------------------------ */ .hat-sports > .e-con-inner{ display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:26px;align-items:center; } .hat-sports__art{display:flex;align-items:center;justify-content:center} .hat-sports__art img{display:block;width:auto;max-width:100%;height:clamp(170px,22vw,320px)} /* Both marks are drawn facing right. Unflipped they would run the same way and the right-hand one would face away from the headline. The pair faces inward. */ .hat-sports__art--flip img{transform:scaleX(-1)} /* The grid centres its items, but an Elementor container child stretches by default, so the copy column filled the 320px row and sat at the top of it. */ .hat-sports__mid{text-align:center;align-self:center} /* auto margins, because the measure is narrower than the column and the mockup centres it within the column rather than aligning it left. */ .hat-sports__p p{margin:0 auto;max-width:46ch;color:rgba(247,242,230,.86);font-size:16px} .hat-sports .hat-sports__p.elementor-widget{margin-block-start:16px} @media(max-width:900px){ /* Copy first, then both marks side by side underneath. Nothing drops, which was the only real flaw in this layout. */ .hat-sports > .e-con-inner{grid-template-columns:1fr 1fr;gap:18px 26px} .hat-sports__mid{grid-column:1 / -1;order:-1} /* 200 rather than 150. Stacked, these are the only images in the section and the column has the room, so they were reading as decoration at a size the desktop layout needed and this one does not. */ .hat-sports__art img{height:200px} } /* --------------------------------------------------------------------------- Location cards, option C1. Mockup 248-269. The card's photograph, border, radius and height are all container controls. What is here: The scrim is a FOUR stop gradient, and Elementor's overlay carries two and lives on the container's ::before, which Elementor owns. So the body IS the scrim: inset over the whole card, gradient behind it, content pinned to the bottom. One element doing two jobs, rather than a spare one doing nothing. The status chip's arrow is a clip-path. No control expresses that. 820px is the mockup's own breakpoint for the grid and it is neither of Elementor's, so the single-column switch lives here too. ------------------------------------------------------------------------ */ .hat-locs{margin-top:34px} @media(max-width:820px){ .hat-locs{flex-direction:column} } .hat-loc{position:relative;overflow:hidden;transition:border-color .15s ease} /* THE PHOTOGRAPH, ON ITS OWN LAYER, SO THE HOVER CAN MOVE IT ALONE. Added 2026-08-25. It was a background image on .hat-loc itself, where a zoom would have carried the heading, the address, the buttons and the border with it, and where `cover` cannot transition to a percentage anyway: it is a keyword, so background-size jumps rather than moves. UNDERNEATH THE GRADIENT. .hat-loc__body is absolutely positioned and comes later in the DOM, so it paints above this without either needing a z-index; the card's own link overlay is z-index:1 and the buttons are 2, both above both. Only this layer moves. scale(1.06), not more: the card is 4px-bordered with overflow:hidden, so the crop is the whole effect, and a larger jump reads as the picture changing rather than as the card responding. */ .hat-loc__pic{ position:absolute;inset:0; background-size:cover;background-position:center center;background-repeat:no-repeat; transform:scale(1); transition:transform .45s cubic-bezier(.25,.85,.35,1); } /* DOUBLED CLASS, for the same reason the border hover below is doubled: these are Elementor containers and their own generated rules are written at element-id specificity. */ .hat-loc.hat-loc:hover .hat-loc__pic, .hat-loc.hat-loc:focus-within .hat-loc__pic{transform:scale(1.06)} /* Nothing moves for anyone who has asked for less of it. The border colour still changes, so the card still answers the cursor. */ @media(prefers-reduced-motion:reduce){ .hat-loc__pic{transition:none} .hat-loc.hat-loc:hover .hat-loc__pic, .hat-loc.hat-loc:focus-within .hat-loc__pic{transform:none} } /* FOUR CLASSES, AND THE DOUBLED ONE WAS STILL ONE SHORT. Elementor binds the border colour on the container and writes it as `.elementor-60 .elementor-element.elementor-element-d200009`, which is (0,3,0). `.hat-loc.hat-loc:hover` is (0,2,0), so it did not tie and lose on order, it lost outright. Measured 2026-08-25 by reading the cascade: the rule was in the served file, greps as present, and had never once fired, which is what the comment that used to sit here already suspected and under-counted. .elementor-element and .e-con are the container's own classes and do not move between rebuilds; the element id does, so it cannot be targeted. GOLD, NOT GREEN. It was --green-text, which is a dark green against a 4px ink border on a photograph: a change nobody would see even when it worked. Gold is what this site already means by "you are interacting with this" - nav hover, the current page, every button. */ .hat-loc.hat-loc.elementor-element.e-con:hover, .hat-loc.hat-loc.elementor-element.e-con:focus-within{border-color:var(--gold)} /* The whole card is the click target. The anchor on the name is stretched over the card, and the buttons are lifted above it so they still get their own clicks. Wrapping the card in an anchor would nest buttons inside a link. THE WIDGET HAS TO BE STATIC TOO, and that line is the whole fix. Elementor gives every .elementor-widget `position:relative`, so the stretched pseudo-element resolved against the HEADING WIDGET rather than against the card: measured, its containing block was 544px wide and one line tall inside a 608 by 520 card. The card was position:relative, the anchor was static, the inset was 0, and every one of those was correct, which is why this read as a design choice rather than a bug. Only the name was clickable because only the name's box was ever being covered. */ .hat-loc .hat-loc__name{position:static} .hat-loc__name a{position:static;text-decoration:none;color:inherit} .hat-loc__name a::after{content:"";position:absolute;inset:0;z-index:1} .hat-loc__ctas{position:relative;z-index:2} .hat-loc__body{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.10) 34%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.9) 100%); } .hat-loc__status .elementor-heading-title{ display:inline-block;background:var(--gold);color:var(--ink); font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; line-height:1.6;padding:5px 22px 5px 12px; clip-path:polygon(0 0,100% 0,86% 50%,100% 100%,0 100%); } /* Three selectors and the logical property, because the kit's widget spacing eats a plain margin-bottom. See the note on .hat-hero__sub. */ .hat-loc .hat-loc__status.elementor-widget{margin-block-end:12px} /* clamp(32,4.6vw,58) is this card's own step and matches no kit preset. If a second thing ever needs it, it becomes a Global Font instead. */ .hat-loc__name .elementor-heading-title{ font-size:clamp(32px,4.6vw,58px);line-height:.94;margin:0; } /* Spacing on the widget, type on the paragraph. Elementor resets the paragraph's own margins inside a Text Editor, so an 8px set there never appears. */ .hat-loc__addr p{font-size:17px;color:rgba(247,242,230,.9);margin:0;line-height:1.4} .hat-loc .hat-loc__addr.elementor-widget{margin-block-start:8px} /* The 10px is the mockup's `.btn{margin:0 10px 10px 0}`: it lifts the row off the card's bottom padding. Without it the buttons sit 10px lower than designed. */ .hat-loc__ctas{margin-top:18px;padding-bottom:10px} /* --------------------------------------------------------------------------- Google rating badge. Mockup 191-210. Chrome, layout and spacing are container controls. Here: the position, and the two drawn marks. Position is a class rather than Elementor's offset controls because of the mobile case: at <=760 the badge re-pins to bottom centre with a translate, and a container has no transform control to express that. Never make it static. It is a flex sibling of the hero's inner column, so static drops it beside the headline instead of below it. ------------------------------------------------------------------------ */ /* width:max-content because Elementor pins every container to width:100%, so an absolutely positioned one spans the viewport and only looks right-aligned because the inset happens to land. */ .hat-grating{ position:absolute;bottom:24px;z-index:3; /* Its right edge lines up with the 1240 content column rather than the viewport edge. Below 1240 the gutter goes negative, so the 26px floor takes over and it behaves as it did. */ right:max(26px, calc((100% - 1240px) / 2)); /* Elementor pins every container to width:100%, so an absolutely positioned one spans the viewport and only looks right-aligned because the inset lands. */ width:max-content;max-width:none; /* The mockup's .rt. Without it every row here inherits the body's 25.6px and the badge measures 47.6 against the mockup's 43. */ line-height:1.25; } /* The Google mark hangs off the SCORE, not off the badge, because ::before on a container belongs to Elementor: it uses it for the background overlay and positions it absolutely, so it contributes no width and a flex row simply closes over it. On a widget the pseudo-element is still free. */ .hat-grating__score .elementor-heading-title{ display:flex;align-items:center; font-size:13.5px;font-weight:700;line-height:1.25;color:var(--ink); } .hat-grating__score .elementor-heading-title::before{ content:"";width:21px;height:21px;flex:0 0 21px;margin-right:11px; background:url('../img/google-g.svg') center/contain no-repeat; } .hat-grating__reviews .elementor-heading-title{ display:flex;align-items:center; font-size:12.5px;font-weight:500;line-height:1.25;color:#5f6368; } /* 5 stars at 13px with 1.5px gaps: 65 + 6. The 7px is .r1's gap, which the row container cannot supply here because the stars live inside this element. */ .hat-grating__reviews .elementor-heading-title::before{ content:"";width:71px;height:13px;flex:0 0 71px;margin-right:7px; background:url('../img/rating-stars-4-4.svg') center/contain no-repeat; } @media(max-width:760px){ .hat-grating{right:auto;left:50%;transform:translateX(-50%);bottom:20px;white-space:nowrap} } /* --------------------------------------------------------------------------- Section heading rule, the eyebrow breaking through it. Option 6d. Native was rejected: Elementor's heading background is per widget with no inheritance, so the native route needs the band colour set by hand at every one of ~40 uses. --secbg lets the section say it once. Applied as a Heading widget with CSS Classes "hat-rule-eyebrow". Elementor's Heading widget wraps its text in a child element, so the rule targets the direct child rather than the container itself. ------------------------------------------------------------------------ */ .hat-rule-eyebrow{ position:relative;margin:0 0 16px;text-align:center; /* align-self, and without it there is no rule at all. The eyebrow is a Heading widget, so it is a flex ITEM of whatever column holds it. align-items on that column is the CROSS axis, which in a column is the horizontal one, so a container set to center or flex-start shrinks the eyebrow to exactly the width of its own label. The ::before still draws, at left:0;right:0 of a box that is now label-width, and the label's own knockout background covers every pixel of it. The failure is total and looks like the rule was never written: the location pages had no line on any of their three eyebrows while the homepage, whose columns stretch, had them everywhere. */ align-self:stretch; } /* The 16px again, at a specificity that survives. As a Heading widget this is a .elementor-widget, and the kit's widget spacing sets margin-block-end:0 on those at the same specificity as a two-class rule. Without this every section heading sits 16px tight under its eyebrow. */ .hat-rule-eyebrow.elementor-widget.elementor-widget{margin-block-end:16px} .hat-rule-eyebrow::before{ content:"";position:absolute;left:0;right:0;top:50%;height:2px; background:var(--green-text); } .hat-rule-eyebrow > *{ position:relative;display:inline-block; background:var(--secbg,var(--cream));padding:0 18px; /* Colour only. Size, weight, tracking and case come from the kit's hat-eyebrow preset, bound on the widget. Colour cannot: it flips per band, and a widget binding would pin it to one ground. */ color:var(--green-text); } /* The mockup's label is an inline span, whose box is the font's natural height. Elementor sets line-height:1 on the heading title, which made the coloured band behind the label 3px shorter than the mockup's and broke the rule at the wrong height. */ .hat-rule-eyebrow .elementor-heading-title{line-height:normal} .hat-rule-eyebrow--left{text-align:left} .hat-rule-eyebrow--left > *{padding-left:0} /* PHONE: THE RULE IS DRAWN BEHIND THE LABEL, SO A LONG LABEL HIDES ALL OF IT. The knockout above works by painting the label in the band colour on top of a full-width line. That needs the label to be NARROWER than the container, and on a 390px phone the content width is 342 while the two longest eyebrows on the site measure 347 and more at 13px with their 18px of padding: "Super Bowls | Stanley Cups | World Series" /about/ 347 "Bucs | Rays | Lightning | Rowdies | USF..." /standings/ 347+ Both rendered a full-width label with 0px of line exposed on either side. The rule was painted every time and covered every time, which is why it read as a missing line rather than a too-long label, and why only SOME eyebrows lost theirs: at 300px /downtown/ keeps 42px of rule and looks merely tight. So below the tablet breakpoint the line stops being one band behind the label and becomes two beside it. flex:1 0 22px is the whole fix - GROW to fill, never SHRINK, so each side keeps 22px whatever the label does, and the label takes what is left and wraps to a second line rather than pushing the rule to nothing. The knockout background goes with it: there is no line under the label any more, so painting --secbg there would only put a patch of band colour on any card that holds an eyebrow. Desktop is deliberately untouched. The approved rendering is the absolute ::before, and at 1240 no string on this site comes close to filling it. */ @media (max-width:767px){ .hat-rule-eyebrow{display:flex;align-items:center;gap:12px} .hat-rule-eyebrow::before{position:static;flex:1 0 22px;min-width:0} .hat-rule-eyebrow::after{ content:"";flex:1 0 22px;min-width:0;height:2px; background:var(--green-text); } .hat-rule-eyebrow > *{ flex:0 1 auto;min-width:0;padding:0;background:none; } /* The left variant is a line on ONE side by definition. */ .hat-rule-eyebrow--left{justify-content:flex-start} .hat-rule-eyebrow--left::before{display:none} } /* On dark and gold bands both the rule and the label flip. The rule is --green-text on light grounds because that is the green that passes as type on cream at 5.93; shamrock green would be too light at 2px. */ .hat-band-dark .hat-rule-eyebrow::before, .hat-band-dark .hat-rule-eyebrow::after{background:var(--gold)} .hat-band-dark .hat-rule-eyebrow > *{color:var(--gold)} .hat-band-gold .hat-rule-eyebrow::before, .hat-band-gold .hat-rule-eyebrow::after{background:var(--ink)} .hat-band-gold .hat-rule-eyebrow > *{color:var(--ink)} /* --------------------------------------------------------------------------- Marquee. Gold band, ink type, traced shamrock between phrases. A genuine exception: Elementor has no marquee widget and no animation control that produces a seamless infinite scroll. Markup, as an HTML widget inside a full-width container:
Cold beer ... Every game ...
The track holds the phrase set TWICE and translates -50%, which is what makes the loop seamless. Halving the content breaks it. ------------------------------------------------------------------------ */ /* The gold comes from the container's own background control, not from here, so the band has one source of truth for its paint. */ .hat-marquee{overflow:hidden;white-space:nowrap;margin:0} /* inline-FLEX, not inline-block: the two sets are Text Editor widgets, which are block elements and would otherwise stack. Two equal flex children also make the -50% translate land exactly one set along. */ /* Paused until assets/js/marquee.js says the display face has loaded. The track's width IS its text's width, 2222px in Big Shoulders Display against 533px on the fallback, and the animation translates -50% of it, so a swap mid-scroll moves the band by 76% of a cycle in one frame. will-change so the transform runs on its own layer rather than repainting 4445px of masked text every frame. */ .hat-marquee__track{ display:inline-flex;width:max-content;will-change:transform; animation:hat-slide 34s linear infinite; animation-play-state:paused; } .hat-marquee__track.is-ready{animation-play-state:running} /* A band that scrolls forever with no way to stop it is a WCAG 2.2.2 problem. This covers the people who have asked the platform to stop moving things; a pause control for everyone else is a separate decision. */ @media (prefers-reduced-motion:reduce){ .hat-marquee__track{animation:none} } .hat-marquee__set p{ margin:0; font-family:var(--face-display);font-weight:800;font-size:clamp(38px,5.2vw,68px); text-transform:uppercase;color:var(--ink);letter-spacing:.02em;line-height:1;white-space:nowrap; } /* Equal margin both sides so the mark centres between phrases. The traced shamrock is centred at y=32 in its 64 viewBox, so its optical centre is the box centre at vertical-align + .36em. Big Shoulders Display 800 measures a 0.6758 cap ratio, so the cap centre sits at .338em and the offset is .338 - .36 = -.022em. This was `baseline` while the display face was Anton. IF THE DISPLAY FACE CHANGES AGAIN, RE-MEASURE. Do not assume. */ .hat-marquee__sham{ display:inline-block;width:.72em;height:.72em;vertical-align:-.022em; margin:0 .42em; /* A mask rather than an inline SVG, so the separator is a decorative mark on a text widget instead of hand-written markup in the page, and its colour is still the palette token. */ background-color:var(--green-dark); -webkit-mask:var(--mark-shamrock) center/contain no-repeat; mask:var(--mark-shamrock) center/contain no-repeat; } @keyframes hat-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Respect a reduced-motion preference. An infinite scroll is exactly what this setting exists for, and the band still reads fine static. */ @media(prefers-reduced-motion:reduce){ .hat-marquee__track{animation:none} } /* --------------------------------------------------------------------------- Location chooser. Click-triggered only, NEVER on load. It is not a gate: the homepage stays a rankable brand page. This opens only when someone reaches for a location-scoped action, and never once a location is already in context. ------------------------------------------------------------------------ */ .hat-locmodal{ position:fixed;inset:0;z-index:200;display:none; align-items:center;justify-content:center;padding:20px; } .hat-locmodal.is-open{display:flex} .hat-locmodal__backdrop{position:absolute;inset:0;background:rgba(0,20,10,.72);backdrop-filter:blur(3px)} /* THE MODAL'S WAY OUT THAT IS NOT A CHOICE. Was 14px underlined text below the checkbox, and quiet on purpose so it did not compete with the two picks. The reasoning held; the weight did not. Every route to /locations/ in the header opens this modal instead of navigating, so with JS running the footer is the only other link to that page on the site, and this was the quietest thing in the panel. SET APART RATHER THAN MADE LOUD. A rule above it and its own breathing room, so it reads as a third way OUT rather than a third choice; the two picks are still the only cards. The arrow is the one .hat-menu__away uses to mean "this leaves rather than staying put", and it is the same Font Awesome Solid that is already enqueued. Two classes, because `.elementor a` rules would otherwise take the underline decision, and :hover is named separately for the same reason. */ .hat-locmodal .hat-locmodal__all{ display:flex;align-items:center;justify-content:center;gap:9px; margin:20px 0 0;padding:16px 0 2px; border-top:2px solid rgba(20,20,20,.14); font-family:var(--face-ui);font-size:16px;font-weight:700;letter-spacing:.04em; color:var(--green-text);text-decoration:none; } /* THE RULE BELONGS TO THE WORDS, NOT THE LINK. Declared on the it painted across the whole flex line, so the arrow sat on a length of underline that was not part of any word. A decoration on an ancestor cannot be cancelled on a descendant, so the fix is to never put it on the ancestor: the label carries its own, and the glyph is simply outside it. */ .hat-locmodal .hat-locmodal__all span{ text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px; } .hat-locmodal .hat-locmodal__all:hover{color:var(--ink)} .hat-locmodal .hat-locmodal__all:hover span{text-decoration-color:var(--ink)} /* Sized off the label rather than stated, and it inherits its colour, so the glyph follows the link on hover instead of being left behind. */ .hat-locmodal .hat-locmodal__all .hat-ico{font-size:.8em;color:inherit} /* THE ONLY GREY PANEL SHADOW ON THE SITE, and the only one the mockup draws. The offset shadow is a PRESS AFFORDANCE and nothing else, decided 2026-08-25: it belongs on controls, which rest in it and press down into it on hover. This panel is the exception because it FLOATS, over a scrim, with the page still visible behind it, which is the one thing on this site a shadow is describing rather than decorating. Five others were dropped the same day, each invented while building its own section and each at a different offset: .hat-cshot__card and .hat-contact__form at 6px, .hat-locindex__map img at 6px, .hat-mapcard at 5px, .hat-contact__card at 4px/.28, plus a sixth on .hat-fcard set as an Elementor control in tools/location/section-hero.php. None of them float and none of them press; what they were doing was greying the ground beside them. NOT part of this family, and deliberately kept: the two BLURRED shadows, on the promo carousel's dots and on .hat-locstrip__item in map view. A blur is elevation rather than press, and the strip card sits on a live photographic basemap where a border alone cannot hold it. */ .hat-locmodal__panel{ position:relative;z-index:2;background:var(--paper);border:4px solid var(--ink); border-radius:22px;max-width:640px;width:100%;padding:34px 30px 30px;text-align:center; box-shadow:8px 8px 0 rgba(0,0,0,.35); } /* The real traced mark, printed once by the footer builder. */ .hat-locmodal__shamicon{width:34px;height:34px;fill:var(--green);display:block;margin:0 auto 12px} /* IT ROLLS IN WHEN THE PICKER OPENS. Chosen 2026-08-24 over the same idea beside a section heading, and the picker is the better home for one reason: this panel APPEARS. An entrance animation on something that was already on screen is decoration; on something arriving it is just how it arrived. It also fires once per interaction rather than once per section, so it cannot wear out. THE ROTATION IS DERIVED FROM THE DISTANCE, not chosen. A mark that travels without turning at the matching rate reads as sliding, and the eye catches that immediately even when it cannot say why: turns = distance / (PI * diameter) 120 / (PI * 34) = 1.12 turns = 404 degrees It travels rightward into place, so it turns clockwise: the keyframe starts at -404deg and lands at 0 rather than the reverse. Change either number and the other has to change with it. */ .hat-locmodal.is-open .hat-locmodal__shamicon{ animation:hat-sham-roll .62s cubic-bezier(.25,.85,.35,1) both; } @keyframes hat-sham-roll{ from{transform:translateX(-120px) rotate(-404deg);opacity:0} 14%{opacity:1} to{transform:translateX(0) rotate(0);opacity:1} } /* A rolling mark is small and contained, which is a different proposition from a full viewport slide, but someone who has asked for less motion has asked for less motion. */ @media(prefers-reduced-motion:reduce){ .hat-locmodal.is-open .hat-locmodal__shamicon{animation:none} } .hat-locmodal__panel h2{ font-family:var(--face-display);font-weight:800;text-transform:uppercase; font-size:clamp(30px,4.4vw,44px);line-height:.94;letter-spacing:.01em; margin:0 0 8px;color:var(--ink); } .hat-locmodal__lede{color:#5d574a;font-size:16.5px;margin:0 0 22px} .hat-locmodal__picks{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:600px){.hat-locmodal__picks{grid-template-columns:1fr}} .hat-locmodal__pick{ display:block;text-decoration:none;background:transparent;border:3px solid var(--ink); border-radius:16px;padding:18px 16px;text-align:left; transition:transform .1s ease,box-shadow .1s ease; } /* THE SITE'S PRESS, NOT A LIFT. Until 2026-08-25 this rested with NO shadow and gained `4px 4px 0` on hover while sliding up-left, which is the opposite motion to every other control here: a button, .hat-telbtn, the footer pills and the menu jump pills all rest at `3px 3px 0 var(--ink)` and press DOWN into it. Same gesture, two directions, on one site. It matters more now the pick is an outline rather than a fill. A filled pick carried its own weight; an outlined one needs the resting shadow to read as pressable at all, and that is the better thing for it to communicate anyway, since the modal exists to get a choice out of someone. TWO CLASSES ON THE REST STATE, AND THAT IS THE WHOLE REASON THE SHADOW LIVED IN :hover BEFORE. The pick is an , and `.elementor a{box-shadow:none}` in custom-frontend.min.css is (0,1,1), so a bare `.hat-locmodal__pick` at (0,1,0) loses and the shadow silently never paints. `:hover` was (0,2,0) and won, which is why the old rule worked and looked deliberate. Parenting to .hat-locmodal buys the point on both. */ .hat-locmodal .hat-locmodal__pick{box-shadow:3px 3px 0 var(--ink)} .hat-locmodal .hat-locmodal__pick:hover{transform:translate(3px,3px);box-shadow:none} /* THE PICKS NEED THEIR OWN FOCUS RING, BECAUSE reset.css's FLATTENS THEM. `a:focus-visible{outline:2px solid #000; outline-offset:2px}` in reset.css is the only rule setting `outline` on these, so it applies uncontested - its box-shadow loses to the resting rule at (0,2,0), which is what made it look innocent. The outline is the problem on its own: the 3px 3px offset shadow reads as RAISED only because it falls on the right and bottom alone, and a black ring on all four sides closes that read. The control then looks pressed in from the moment the modal opens, and "un-presses" on blur. Gold rather than black, because gold is what this site already means by "you are interacting with this" - nav hover, current page, every button - and because it cannot be mistaken for the ink border or the ink shadow. Offset 4 clears the 3px shadow on the right and bottom, so the ring encircles the control without touching it. Three classes to beat `a:focus-visible` at (0,1,1). */ .hat-locmodal .hat-locmodal__pick:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; } /* The panel takes focus on open and must not draw a ring for it: it is a container being focused for keyboard reasons, not a control. */ .hat-locmodal .hat-locmodal__panel:focus, .hat-locmodal .hat-locmodal__panel:focus-visible{outline:none} .hat-locmodal__pick b{ display:block;font-family:var(--face-display);font-weight:800;text-transform:uppercase; font-size:26px;line-height:1;color:var(--ink); } .hat-locmodal__pick span{display:block;font-size:14.5px;color:#6b6455;margin-top:6px} /* The maps chooser (maps-chooser.js) is this dialog again with two apps for picks. Narrower, because its picks are short, and the lede is the address, which may run to two lines. */ .hat-mapsmodal .hat-locmodal__panel{max-width:520px} .hat-mapsmodal .hat-locmodal__lede{overflow-wrap:anywhere} /* Two pills of equal weight, neither the default: the site's control vocabulary (3px ink border, 3px 3px ink shadow, press on hover) in outline form. Two classes on everything, because these are elements and `.elementor a{box-shadow:none}` is (0,1,1). */ .hat-mapsmodal .hat-mapsmodal__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .hat-mapsmodal .hat-mapsbtn{ flex:1 1 180px;display:flex;align-items:center;justify-content:center;gap:10px; padding:13px 22px;border:3px solid var(--ink);border-radius:999px; background:transparent;color:var(--ink);text-decoration:none; font-family:var(--face-ui);font-size:16px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;line-height:1.2;white-space:nowrap; box-shadow:3px 3px 0 var(--ink);transition:transform .1s ease,box-shadow .1s ease; } .hat-mapsmodal .hat-mapsbtn:hover{transform:translate(3px,3px);box-shadow:none;color:var(--ink)} .hat-mapsmodal .hat-mapsbtn:focus-visible{outline:3px solid var(--gold);outline-offset:4px} .hat-mapsmodal .hat-mapsbtn__mark{width:20px;height:20px;flex:none} /* Stacked on a phone. After the pill rule on purpose: in a column the 180px basis would become each pill's HEIGHT, so the basis has to go as well. */ @media(max-width:600px){ .hat-mapsmodal .hat-mapsmodal__btns{flex-direction:column} .hat-mapsmodal .hat-mapsbtn{flex:none} } /* Waze on touch devices only: on a mouse-and-trackpad computer its link is a web map rather than navigation. Tablets count as touch. */ @media (hover:hover) and (pointer:fine){.hat-mapsmodal .hat-mapsbtn--touch{display:none}} /* THE SUGGESTED PICK, Order only (location-chooser.js suggest()). Gold fill is what this site means by the primary action, so the likely location reads as the obvious press without being chosen for anyone: both picks stay live. The tag hangs off the itself, which is a plain element, so its ::after is free. Two classes for the same (0,1,1) reason as the resting shadow. */ .hat-locmodal .hat-locmodal__pick.is-suggested{background:var(--gold);position:relative} .hat-locmodal .hat-locmodal__pick.is-suggested span{color:var(--ink)} .hat-locmodal .hat-locmodal__pick.is-suggested::after{ content:attr(data-hat-tag);position:absolute;top:-11px;right:14px; background:var(--ink);color:var(--paper);border-radius:999px;padding:3px 10px; font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3; } /* Two class selectors, because a bare .hat-locmodal__close loses to the kit's `.elementor-kit-2141 button` and renders as a 13px uppercase gold-bordered Elementor button. Every property the kit or Hello Elementor's reset sets on a