/* Theme Name: 18th Amendment Theme URI: https://sitereboots.com/ Author: Site Reboots Description: Block theme for the 18th Amendment Neighborhood Bar, Sioux Falls. Deco roundel, framed sign panels, and a week laid out the way their own specials board is. Version: 1.0 Requires at least: 6.5 Tested up to: 6.6 Requires PHP: 8.1 License: GPL-2.0-or-later Text Domain: amendment */ /* =========================================================================== THE DESIGN. mechanics.css has already loaded and owns behaviour — sticky header, burger, mobile panel, action bar, tap targets. Nothing in this file should repeat it. The organising idea is THE WEEK. This bar's whole trade runs on a calendar: happy hour every day 11-7, and then a different deal every night. They already own the artefact that says so — a five-panel specials board hanging in the room. So the site is laid out as a board of nights, and the framed sign panel is the shape language throughout. Shape language · 0px radius on everything. The one curve on the site is the ROUNDEL, taken from their deco badge, and it is only ever used for a night marker or the mark itself. · Every panel carries a hairline rule inset 7px from its edge — that is literally how their menu boards are printed. · No shadows anywhere. A sign is flat. Deliberately NOT the agency's look: the ground is espresso rather than warm cream, the accent is brass and oxblood rather than orange, a card is a dark framed panel rather than a white box with a 2px border and a 6px radius, and a button is a square-cut fill with no border. ======================================================================== */ :root{ --amd-ink:#15100A; --amd-soot:#241A10; --amd-bark:#2A1E12; --amd-paper:#F4EEE2; --amd-oat:#E9DECA; --amd-cream:#F6EAD2; --amd-brass:#C9953C; --amd-oxblood:#7A2B20; --amd-sand:#BCA98C; --amd-stone:#6B5B45; --amd-rule-dark:rgba(201,149,60,.34); /* inset frame on espresso */ --amd-rule-light:rgba(42,30,18,.20); /* inset frame on paper */ --amd-display:var(--wp--preset--font-family--display,"Josefin Sans",system-ui,sans-serif); --amd-text:var(--wp--preset--font-family--text,Epilogue,system-ui,sans-serif); /* ── the four variables mechanics.css requires ───────────────────────── */ --amd-focus:#C9953C; --amd-nav-bg:#15100A; --amd-burger:#F6EAD2; --amd-header-h:78px; /* a starting guess only; site.js overwrites it */ } /* --------------------------------------------------------------- base --- */ body{background:var(--amd-paper);color:var(--amd-bark)} ::selection{background:var(--amd-brass);color:var(--amd-ink)} h1,h2,h3,h4{font-family:var(--amd-display);font-weight:600;letter-spacing:.01em} h1{line-height:1.02} h2{line-height:1.08} strong,b{font-weight:650} /* Prices, times and yardages all want to line up in a column. */ .amd-num,.amd-price,.amd-rate{font-variant-numeric:tabular-nums lining-nums} /* ----------------------------------------------------------- the bands --- */ /* Full-bleed sections. The rhythm is espresso → paper → oat → espresso, and a dark band is never the last thing before the dark footer: the page closes on a photo band instead, so there is a visible seam. */ .amd-band{padding-block:clamp(3.25rem,7vw,5.5rem);position:relative} .amd-band__in{max-width:68rem;margin-inline:auto;padding-inline:1.25rem} .amd-band__in--wide{max-width:82rem} .amd-band--paper{background:var(--amd-paper);color:var(--amd-bark)} .amd-band--oat{background:var(--amd-oat);color:var(--amd-bark)} .amd-band--ink{background:var(--amd-ink);color:var(--amd-cream)} .amd-band--soot{background:var(--amd-soot);color:var(--amd-cream)} .amd-band--ink h1,.amd-band--ink h2,.amd-band--ink h3,.amd-band--ink h4, .amd-band--soot h1,.amd-band--soot h2,.amd-band--soot h3,.amd-band--soot h4{color:var(--amd-cream)} .amd-band--ink p,.amd-band--soot p{color:var(--amd-sand)} .amd-band--ink a:not(.amd-btn):not(.amd-ab), .amd-band--soot a:not(.amd-btn):not(.amd-ab){color:var(--amd-brass)} /* A hairline of brass between a light band and the espresso one below it, so the two never just butt together. */ .amd-band--ink + .amd-band--paper, .amd-band--paper + .amd-band--ink, .amd-band--oat + .amd-band--ink{border-top:1px solid rgba(201,149,60,.45)} /* ------------------------------------------------------------ eyebrow ---- */ /* NOT a bare letterspaced rust-red cap line — that is the agency's. This one is a composite: a short brass rule, then the label in stone (or brass on a dark ground). */ .amd-eyebrow{ display:flex;align-items:center;gap:.7rem; font-family:var(--amd-display);font-weight:600; font-size:.875rem;letter-spacing:.17em;text-transform:uppercase; color:var(--amd-stone);margin:0 0 1rem } .amd-eyebrow::before{content:"";flex:0 0 auto;width:30px;height:2px;background:var(--amd-brass)} /* There are THREE dark sections on this site and only one of them is .amd-band--ink: .amd-cta and .amd-hero are the other two. Listing them one at a time shipped a stone eyebrow on espresso at 2.89:1 twice over, so they are enumerated together here and nowhere else. Adding a fourth dark section means adding it to this list. */ .amd-band--ink .amd-eyebrow, .amd-band--soot .amd-eyebrow, .amd-cta .amd-eyebrow, .amd-hero .amd-eyebrow{color:var(--amd-brass)} .amd-band--ink .amd-eyebrow::before, .amd-band--soot .amd-eyebrow::before, .amd-cta .amd-eyebrow::before, .amd-hero .amd-eyebrow::before{background:var(--amd-cream)} .amd-eyebrow--mid{justify-content:center} /* ------------------------------------------------------------- panels ---- */ /* The shape language. A panel is a flat rectangle with a hairline rule set in from the edge, exactly like their printed menu boards. */ /* A panel carries its OWN muted/accent/rule tokens and every rule inside it reads them. The first version set `.amd-panel .amd-item__d{color:sand}` for the dark panel, and `.amd-panel--light` is still a `.amd-panel`, so 90 text nodes shipped sand-on-paper at 1.98:1. A modifier must not have to remember to undo each individual rule. */ .amd-panel{ --amd-p-muted:var(--amd-sand); --amd-p-accent:var(--amd-brass); --amd-p-rule:var(--amd-rule-dark); position:relative;background:var(--amd-soot);color:var(--amd-cream); padding:clamp(1.5rem,3vw,2.25rem) } .amd-panel::before{content:"";position:absolute;inset:7px;border:1px solid var(--amd-p-rule);pointer-events:none} .amd-panel--light,.amd-panel--oat{ --amd-p-muted:var(--amd-stone); --amd-p-accent:var(--amd-oxblood); --amd-p-rule:var(--amd-rule-light); color:var(--amd-bark) } .amd-panel--light{background:var(--amd-paper)} .amd-panel--oat{background:var(--amd-oat)} .amd-panel > *:first-child{margin-top:0} .amd-panel > *:last-child{margin-bottom:0} .amd-panel h3{color:inherit} /* ----------------------------------------------------------- roundel ----- */ /* The only curve on the site. Straight off their badge. */ .amd-roundel{ flex:0 0 auto;display:grid;place-items:center; width:3.25rem;height:3.25rem;border-radius:999px; border:2px solid var(--amd-brass);color:var(--amd-brass); font-family:var(--amd-display);font-weight:600;font-size:.875rem; letter-spacing:.08em;text-transform:uppercase;line-height:1 } .amd-panel--light .amd-roundel,.amd-panel--oat .amd-roundel{border-color:var(--amd-oxblood);color:var(--amd-oxblood)} /* ------------------------------------------------------------ buttons ---- */ /* Square-cut, no border, no radius. The agency's is a 6px-radius orange fill with a 2px border and a dark label; none of those five things match. */ .amd-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:52px;padding:.85rem 1.6rem; font-family:var(--amd-display);font-weight:600;font-size:1rem; letter-spacing:.09em;text-transform:uppercase;text-decoration:none; background:var(--amd-oxblood);color:var(--amd-cream); border:0;border-radius:0;cursor:pointer; transition:background .16s ease,color .16s ease } .amd-btn:hover,.amd-btn:focus-visible{background:var(--amd-ink);color:var(--amd-cream)} .amd-btn--brass{background:var(--amd-brass);color:var(--amd-ink)} .amd-btn--brass:hover,.amd-btn--brass:focus-visible{background:var(--amd-cream);color:var(--amd-ink)} .amd-btn--ghost{background:transparent;color:var(--amd-cream);box-shadow:inset 0 0 0 2px var(--amd-brass)} .amd-btn--ghost:hover,.amd-btn--ghost:focus-visible{background:var(--amd-brass);color:var(--amd-ink)} .amd-btn--ghostdark{background:transparent;color:var(--amd-bark);box-shadow:inset 0 0 0 2px var(--amd-bark)} .amd-btn--ghostdark:hover,.amd-btn--ghostdark:focus-visible{background:var(--amd-bark);color:var(--amd-paper)} .amd-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem} /* ------------------------------------------------------------- header ---- */ .amd-header{background:var(--amd-ink);color:var(--amd-cream);border-bottom:1px solid rgba(201,149,60,.42)} .amd-headbar{ max-width:82rem;margin-inline:auto;padding:.7rem 1.25rem; /* A LITERAL min-height. site.js measures this bar and publishes the result as --amd-header-h; feeding that variable back in here closes the loop and the header grows a few pixels on every settle. */ min-height:78px } .amd-brand{gap:.7rem;color:var(--amd-cream)} .amd-brand img,.amd-brand svg{display:block;width:46px;height:46px} .amd-brand__txt{display:flex;flex-direction:column;line-height:1} .amd-brand__n{font-family:var(--amd-display);font-weight:600;font-size:1.22rem;letter-spacing:.055em;text-transform:uppercase;color:var(--amd-cream)} .amd-brand__s{font-family:var(--amd-display);font-weight:500;font-size:.645rem;letter-spacing:.235em;text-transform:uppercase;color:var(--amd-brass);margin-top:.28rem} .amd-nav__link{ font-family:var(--amd-display);font-weight:600;font-size:.9rem; letter-spacing:.11em;text-transform:uppercase;text-decoration:none; color:var(--amd-cream) } .amd-nav__link:hover,.amd-nav__link:focus-visible{color:var(--amd-brass)} .amd-nav__link[aria-current="page"]{color:var(--amd-brass)} /* The mobile panel. Colours only — mechanics.css already positions it. */ .amd-header .amd-nav__link{border-bottom:1px solid rgba(201,149,60,.2)} .amd-nav__foot{color:var(--amd-sand);font-size:.95rem} .amd-nav__foot .amd-btn{width:100%;margin-bottom:1rem} .amd-nav__tel{display:block;font-family:var(--amd-display);font-weight:600;font-size:1.5rem;letter-spacing:.04em;color:var(--amd-brass);text-decoration:none} /* ── desktop navigation ───────────────────────────────────────────────────── EVERY rule in here must stay inside this query. mechanics.css sets the mobile panel inside @media (max-width:52rem) and this file loads second, so an unscoped display/flex-direction/position rule on these selectors wins at phone width too and unrolls the menu across the screen. */ @media (min-width:52.0625rem){ /* mechanics.css puts margin-right:auto on .amd-brand, which shoves the logo hard left and crushes the links against the CTA. Move the spring to the nav, at (0,2,0) so it beats the (0,1,0) rule there. */ .amd-header .amd-brand{margin-right:1.9rem} .amd-header .amd-nav{margin-right:auto} .amd-header .amd-nav__inner{display:flex;align-items:center;gap:1.45rem;margin:0;padding:0;list-style:none} .amd-header .amd-nav__link{min-height:44px;display:inline-flex;align-items:center;border-bottom:0} .amd-header .amd-nav__foot{display:none} } /* The tightest desktop band is just above the 52rem breakpoint, where the full nav and the CTA have the least room. "Tonight's deal" wrapped onto two lines at 834px and 860px — invisible in a 1440px screenshot, and an overflow check does not see it either, because the button simply gets taller. */ @media (min-width:52.0625rem) and (max-width:64rem){ .amd-header .amd-brand{margin-right:1rem} .amd-header .amd-nav__inner{gap:.8rem} .amd-nav__link{font-size:.78rem;letter-spacing:.05em} .amd-brand__n{font-size:1.05rem;letter-spacing:.03em} .amd-brand__s{letter-spacing:.17em} .amd-headcta{padding-inline:.85rem;font-size:.78rem;letter-spacing:.04em} } .amd-headcta{display:none;white-space:nowrap} @media (min-width:52.0625rem){.amd-headcta{display:inline-flex}} /* --------------------------------------------------------------- hero ---- */ /* Flat espresso with their room photo pushed right back under a heavy gradient — it is 1000px wide and ten years old, so it works as a texture and would not survive being looked at. The headline carries the screen. */ .amd-hero{position:relative;background:var(--amd-ink);color:var(--amd-cream);overflow:hidden} .amd-hero__bg{position:absolute;inset:0;background-size:cover;background-position:50% 45%;opacity:.3;filter:saturate(.72) contrast(1.05)} .amd-hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(104deg,rgba(21,16,10,.97) 0%,rgba(21,16,10,.9) 42%,rgba(21,16,10,.66) 100%) } .amd-hero__in{position:relative;z-index:2;max-width:68rem;margin-inline:auto;padding:clamp(3.5rem,8vw,6.5rem) 1.25rem clamp(3rem,6vw,4.5rem)} .amd-hero h1{ font-size:clamp(2.6rem,8.2vw,5.1rem);font-weight:600;line-height:.98; letter-spacing:.005em;color:var(--amd-cream);margin:0 0 1.35rem;max-width:16ch } .amd-hero h1 em{font-style:normal;color:var(--amd-brass);display:block} .amd-hero__lede{font-size:clamp(1.0625rem,2vw,1.25rem);color:var(--amd-sand);max-width:50ch;margin:0} /* The strip under the hero headline: the three facts a first-time visitor actually wants, set as a row of plates. */ .amd-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:2.5rem;border:1px solid rgba(201,149,60,.42)} .amd-fact{flex:1 1 11rem;padding:1.1rem 1.25rem;border-right:1px solid rgba(201,149,60,.42)} .amd-fact:last-child{border-right:0} .amd-fact__k{display:block;font-family:var(--amd-display);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amd-brass);margin-bottom:.4rem} .amd-fact__v{display:block;font-family:var(--amd-display);font-weight:600;font-size:1.32rem;letter-spacing:.03em;color:var(--amd-cream);line-height:1.2} .amd-fact__v small{display:block;font-family:var(--amd-text);font-weight:400;font-size:.8125rem;letter-spacing:0;color:var(--amd-sand);margin-top:.3rem;text-transform:none} @media (max-width:40rem){ .amd-fact{flex:1 1 100%;border-right:0;border-bottom:1px solid rgba(201,149,60,.42)} .amd-fact:last-child{border-bottom:0} } /* ------------------------------------------------------------ the week --- */ /* The spine of the home page. One panel per night, the way their board is. */ .amd-week{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))} .amd-night{ position:relative;background:var(--amd-soot);color:var(--amd-cream); padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem /* NO height:100% — a grid item already stretches, and pinning it to the row height computed before the webfont loads makes it overflow and paint over the section below. */ } .amd-night::before{content:"";position:absolute;inset:7px;border:1px solid var(--amd-rule-dark);pointer-events:none} .amd-night__top{display:flex;align-items:center;gap:.9rem} .amd-night__day{font-family:var(--amd-display);font-weight:600;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amd-brass)} .amd-night__h{font-family:var(--amd-display);font-weight:600;font-size:1.45rem;line-height:1.12;color:var(--amd-cream);margin:0} .amd-night__p{font-size:.95rem;color:var(--amd-sand);margin:0} .amd-night__price{margin-top:auto;padding-top:.6rem;font-family:var(--amd-display);font-weight:600;font-size:1.6rem;letter-spacing:.02em;color:var(--amd-brass);font-variant-numeric:tabular-nums} .amd-night__price span{font-family:var(--amd-text);font-weight:400;font-size:.8125rem;letter-spacing:.02em;color:var(--amd-sand);display:block;margin-top:.2rem} /* Their physical board is one wide HAPPY HOUR panel with four night panels under it, so the grid is built the same way: the everyday deal is a banner, and the four nights sit in an even row beneath. Putting all five in one auto-fit grid left a single orphan panel in a row of its own. */ .amd-night--wide{ flex-direction:row;align-items:center;flex-wrap:wrap; gap:1rem 2.5rem;margin-bottom:1rem;padding-block:1.35rem } .amd-night--wide .amd-night__top{flex:0 0 auto} .amd-night--wide .amd-night__body{flex:1 1 18rem} .amd-night--wide .amd-night__h{margin-bottom:.25rem} .amd-night--wide .amd-night__price{margin-top:0;padding-top:0;flex:0 0 auto;text-align:right} @media (max-width:40rem){ .amd-night--wide .amd-night__price{text-align:left} } /* Every day, not a night: the one that is always true gets the brass panel. */ .amd-night--all{background:var(--amd-brass);color:var(--amd-ink)} .amd-night--all::before{border-color:rgba(21,16,10,.38)} .amd-night--all .amd-night__day{color:var(--amd-ink);opacity:.72} .amd-night--all .amd-night__h,.amd-night--all .amd-night__price{color:var(--amd-ink)} .amd-night--all .amd-night__p,.amd-night--all .amd-night__price span{color:rgba(21,16,10,.78)} .amd-night--all .amd-roundel{border-color:var(--amd-ink);color:var(--amd-ink)} /* -------------------------------------------------------------- menu ----- */ .amd-menu{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))} .amd-menu--one{grid-template-columns:1fr} .amd-item{padding:.95rem 0;border-bottom:1px solid var(--amd-rule-light)} .amd-item:last-child{border-bottom:0} .amd-panel .amd-item{border-bottom-color:var(--amd-p-rule)} .amd-item__h{display:flex;align-items:baseline;gap:.75rem;justify-content:space-between} .amd-item__n{font-family:var(--amd-display);font-weight:600;font-size:1.0625rem;letter-spacing:.075em;text-transform:uppercase;margin:0;color:inherit} .amd-item__p{flex:0 0 auto;font-family:var(--amd-display);font-weight:600;font-size:1.0625rem;color:var(--amd-oxblood);font-variant-numeric:tabular-nums} .amd-panel .amd-item__p{color:var(--amd-p-accent)} .amd-item__d{margin:.35rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--amd-stone)} .amd-panel .amd-item__d{color:var(--amd-p-muted)} .amd-band--ink .amd-item__d,.amd-band--soot .amd-item__d{color:var(--amd-sand)} /* The pizza sizes: one price row, four columns, tabular so they stack up. */ .amd-sizes{display:flex;flex-wrap:wrap;gap:.3rem 1.15rem;margin:.5rem 0 0;padding:0;list-style:none} .amd-sizes li{font-size:.875rem;color:var(--amd-stone);font-variant-numeric:tabular-nums} .amd-panel .amd-sizes li{color:var(--amd-p-muted)} .amd-sizes b{font-family:var(--amd-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;color:var(--amd-oxblood);margin-right:.3rem} .amd-panel .amd-sizes b{color:var(--amd-p-accent)} /* A note set off from the list — "allow 30 minutes for Chicago style". */ .amd-note{ margin:1.5rem 0 0;padding:.9rem 1.1rem; border-left:3px solid var(--amd-brass); background:rgba(201,149,60,.09); font-size:.9375rem;color:var(--amd-stone) } .amd-panel .amd-note{color:var(--amd-p-muted);background:rgba(201,149,60,.1)} .amd-band--ink .amd-note,.amd-band--soot .amd-note{color:var(--amd-sand);background:rgba(201,149,60,.1)} /* ------------------------------------------------------------- lists ----- */ .amd-ticks{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))} .amd-ticks li{position:relative;padding-left:1.5rem;font-size:.9688rem} .amd-ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--amd-brass)} /* --------------------------------------------------------------- prose --- */ .amd-prose{max-width:38rem} .amd-prose--wide{max-width:46rem} .amd-prose p{margin:0 0 1.15rem} .amd-prose p:last-child{margin-bottom:0} .amd-lede{font-size:clamp(1.0625rem,1.6vw,1.1875rem);line-height:1.62} .amd-head{margin:0 0 2.25rem} .amd-head h2{margin:0 0 .75rem} .amd-head p{margin:0;max-width:52ch;color:var(--amd-stone)} .amd-band--ink .amd-head p,.amd-band--soot .amd-head p{color:var(--amd-sand)} .amd-head--mid{text-align:center} .amd-head--mid p{margin-inline:auto} /* ------------------------------------------------------------- photos ---- */ .amd-shot{position:relative;display:block;margin:0;background:var(--amd-ink)} .amd-shot img{display:block;width:100%;height:auto} .amd-shot figcaption{ padding:.75rem 1rem;font-size:.8125rem;letter-spacing:.04em; color:var(--amd-sand);background:var(--amd-ink) } .amd-split{display:grid;gap:2.25rem;align-items:center;grid-template-columns:1fr} @media (min-width:56rem){ .amd-split{grid-template-columns:1.05fr .95fr;gap:3rem} .amd-split--flip > *:first-child{order:2} } /* CTA band built on a photograph, so the page can close dark without fusing into the footer. A dark band directly above a dark footer reads as one slab with no seam. */ .amd-cta{position:relative;background:var(--amd-ink);color:var(--amd-cream);overflow:hidden;text-align:center} .amd-cta__bg{position:absolute;inset:0;background-size:cover;background-position:50% 50%;opacity:.26} .amd-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,16,10,.93),rgba(21,16,10,.82))} .amd-cta__in{position:relative;z-index:2;max-width:46rem;margin-inline:auto;padding:clamp(3.25rem,7vw,5rem) 1.25rem} .amd-cta h2{color:var(--amd-cream);margin:0 0 .9rem} .amd-cta p{color:var(--amd-sand);margin:0 auto;max-width:44ch} .amd-cta .amd-btns{justify-content:center} /* --------------------------------------------------------------- forms --- */ .amd-form{display:grid;gap:1rem} .amd-field{display:grid;gap:.4rem} .amd-field label{font-family:var(--amd-display);font-weight:600;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--amd-stone)} .amd-field input,.amd-field textarea,.amd-field select{ font-family:var(--amd-text);font-size:1rem;color:var(--amd-bark); background:#fff;border:1px solid var(--amd-rule-light);border-radius:0; padding:.8rem .9rem;min-height:52px;width:100% } .amd-field textarea{min-height:9rem;resize:vertical} .amd-field input:focus-visible,.amd-field textarea:focus-visible,.amd-field select:focus-visible{border-color:var(--amd-brass);outline:3px solid var(--amd-focus);outline-offset:2px} /* These class names belong to 010-amendment-enquiries.php, which renders the form. They are not mine to rename. */ .amd-field-row{display:grid;gap:1rem;grid-template-columns:1fr} @media (min-width:40rem){.amd-field-row{grid-template-columns:1fr 1fr}} .amd-hint{display:block;font-family:var(--amd-text);font-weight:400;font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--amd-stone);margin-top:.2rem} .amd-form__intro{max-width:44rem;margin:0 0 1.75rem;color:var(--amd-stone)} .amd-form__fine{margin:1.25rem 0 0;font-size:.8125rem;color:var(--amd-stone)} /* .amd-submit IS the