/* ========================================================================== The Original Clam Tavern & Broadway Bar & Grille Two restaurants, one house. Shared shell + per-venue accent tokens. ========================================================================== */ :root { /* Paper & ink */ --paper: #FBF8F2; --paper-2: #F2ECE0; --paper-3: #E8E0D0; --ink: #1A1917; --ink-2: #4E4A42; --ink-3: #655F55; --rule: #DDD5C5; /* House colour: deep sea-green. Overridden per venue below. */ --accent: #10312A; --accent-deep: #0A211C; --on-accent: #F7F3EA; --mark: #8C1D18; /* oxblood, from the printed menu banner */ --shell-h: 62px; --rail-h: 52px; --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --measure: 68ch; --wrap: 1080px; --narrow: 680px; } /* Venue identities ------------------------------------------------------- */ body[data-venue="clam"] { --accent: #14543C; /* the green from the printed menu headings */ --accent-deep: #0D3626; --mark: #8C1D18; } body[data-venue="broadway"] { --accent: #1C1C1C; /* Broadway is black-and-white by nature */ --accent-deep: #000000; --mark: #B8801F; } /* Reset ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; /* 17px */ line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; /* NOT hidden: hidden breaks position:sticky */ } img { max-width: 100%; display: block; } a { color: var(--accent); } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; } /* Fraunces' "&" is a calligraphic et-ligature that reads as an unknown glyph - it turns "Broadway Bar & Grille" into "Broadway Bar ⅋ Grille". Set the ampersand in a normal italic serif; still elegant, actually legible. */ .amp { font-family: 'Iowan Old Style', Georgia, serif; font-style: italic; font-weight: 400; } /* Anchor targets clear the sticky chrome. Set on targets only - adding scroll-padding-top to as well would double the offset. */ [id] { scroll-margin-top: calc(var(--shell-h) + 16px); } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .narrow { max-width: var(--narrow); margin-inline: auto; padding-inline: 20px; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 12px 18px; } :root { --focus: #1A1917; } /* Dark chrome flips the focus ring to light. A single fixed colour cannot clear 3:1 against both the cream paper and the deep-green header. */ .shell, .hero, .ribbon, .menuhead, .foot, .sec--dark { --focus: #FBF8F2; } :where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; font-family: var(--sans); font-size: 1rem; font-weight: 600; border: 1.5px solid transparent; border-radius: 3px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .btn svg { width: 18px; height: 18px; flex: none; } .btn--fill { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn--fill:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn--out { background: transparent; color: var(--accent); border-color: #9C9484; } .btn--out:hover { border-color: var(--accent); } .btn--onDark { background: transparent; color: var(--on-accent); border-color: rgba(255,255,255,.38); } .btn--onDark:hover { background: rgba(255,255,255,.1); border-color: var(--on-accent); } .btn--light { background: var(--paper); color: var(--accent); border-color: var(--paper); } .btn--light:hover { background: #fff; } /* Shell: header ---------------------------------------------------------- */ .shell { position: sticky; top: 0; z-index: 100; height: var(--shell-h); background: var(--accent); color: var(--on-accent); } .shell__in { height: var(--shell-h); display: flex; align-items: center; gap: 18px; } .mark { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: var(--on-accent); font-family: var(--serif); font-size: 1.02rem; line-height: 1.1; } .mark img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--paper); flex: none; } .mark span { display: block; } .mark small { display: block; font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .68; margin-top: 2px; } .nav { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; } .nav a { display: flex; align-items: center; min-height: 40px; padding: 0 13px; color: var(--on-accent); text-decoration: none; font-size: .96rem; opacity: .84; border-radius: 3px; } .nav a:hover { opacity: 1; } .nav a[aria-current] { opacity: 1; font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; border-radius: 0; } .burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; background: none; border: 1px solid rgba(255,255,255,.32); border-radius: 4px; color: var(--on-accent); cursor: pointer; } .burger svg { width: 20px; height: 20px; } .burger .x { display: none; } .nav-open .burger .x { display: block; } .nav-open .burger .bars { display: none; } /* Hero ------------------------------------------------------------------- */ .hero { background: var(--accent); color: var(--on-accent); padding: 54px 0 60px; } /* Hero with a photographic backdrop --------------------------------------- */ .hero--shot { position: relative; isolation: isolate; overflow: hidden; } .hero--shot > .wrap { position: relative; z-index: 2; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; /* overridden per slide; see index.html */ background-repeat: no-repeat; opacity: 0; transition: opacity 1.6s ease-in-out; /* No scale(): it magnifies the crop, and on a wide viewport that is exactly what was cutting the heads off the group photo. */ } .hero__slide.on { opacity: 1; } /* The scrim. The photos are busy and mid-bright, and the headline is cream: without this the text fails contrast outright. Heaviest on the left, where the type sits. */ .hero--shot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(16, 49, 42, .93) 0%, rgba(16, 49, 42, .82) 45%, /* text runs to ~53%, so hold the scrim past it */ rgba(16, 49, 42, .60) 70%, rgba(16, 49, 42, .45) 100%), linear-gradient(180deg, rgba(10, 33, 28, .45) 0%, rgba(10, 33, 28, .15) 40%, rgba(10, 33, 28, .55) 100%); } @media (max-width: 760px) { /* On a phone the text spans the full width, so the scrim has to be even. */ .hero--shot::before { background: linear-gradient(180deg, rgba(16, 49, 42, .93) 0%, rgba(16, 49, 42, .88) 60%, rgba(16, 49, 42, .94) 100%); } } @media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } } .hero__kicker { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .66; margin-bottom: 18px; } .hero h1 { font-size: clamp(2rem, 5.2vw, 3.15rem); } .hero h1 em { font-style: italic; opacity: .82; font-weight: 500; } .hero__sub { margin-top: 18px; max-width: 52ch; font-size: 1.12rem; color: rgba(247,243,234,.82); } .hero__acts { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; } /* Live open/closed status ------------------------------------------------ */ .ribbon { background: var(--accent-deep); color: rgba(247,243,234,.9); border-top: 1px solid rgba(255,255,255,.1); font-size: .96rem; } .ribbon__in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-block: 14px; } .status { display: none; align-items: center; gap: 10px; } .js .status { display: flex; } /* The dot colour drives both the dot and its pulse ring. */ .status { --dot: #6E6A62; } .status[data-state="open"] { --dot: #4ED17F; } .status[data-state="soon"] { --dot: #E8B44C; } .status[data-state="closed"] { --dot: #D0685E; } .status__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dot); } /* The ring that radiates out. NO z-index:-1 here: .status creates no stacking context, so a negative z-index would drop the ring behind the ribbon's own background and it would simply never be seen. It paints over the dot instead - same colour, low opacity, so the dot still reads solid. */ .status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dot); pointer-events: none; } /* Open: a calm, confident pulse. */ .status[data-state="open"] .status__dot::after { animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; } /* Closing soon: same pulse, quicker - it should feel like a clock running. */ .status[data-state="soon"] .status__dot::after { animation: ping 1.3s cubic-bezier(0, 0, .2, 1) infinite; } /* Closed: NO ping. A radiating red dot reads as an alarm, and nothing is actually happening. It just breathes gently instead. */ .status[data-state="closed"] .status__dot { animation: breathe 3.4s ease-in-out infinite; } @keyframes ping { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } } @keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .status__text { color: var(--on-accent); font-weight: 600; } .status__sub { color: rgba(247,243,234,.72); font-weight: 400; } .ribbon__more { margin-left: auto; color: rgba(247,243,234,.85); font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .ribbon__more:hover { color: #fff; } /* Shown until JS hydrates, and forever if JS never runs. */ .hours-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; } .hours-list li { color: rgba(247,243,234,.85); } .hours-list b { color: var(--on-accent); font-weight: 600; } .js .hours-list { display: none; } /* Videos ----------------------------------------------------------------- */ .videos { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .video { margin: 0; } .video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--accent); border-radius: 4px; overflow: hidden; } .video__frame iframe, .video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video__todo { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; padding: 16px; color: rgba(247,243,234,.62); font-size: .9rem; border: 1px dashed rgba(247,243,234,.3); border-radius: 4px; } .video__todo b { color: rgba(247,243,234,.9); font-weight: 600; } .video__todo code { font-size: .78rem; font-family: ui-monospace, Menlo, monospace; } .video figcaption { margin-top: 10px; color: var(--ink-2); font-size: .97rem; } .video figcaption b { color: var(--ink); font-weight: 600; } /* Some broadcasters (FOX 29) send frame-ancestors 'self', so they cannot be iframed at all - an embed would render a blank "refused to connect" box. Those become a click-through card instead. */ .video__link { display: block; position: absolute; inset: 0; } .video__link img { width: 100%; height: 100%; object-fit: cover; } .video__link::after { content: ""; position: absolute; inset: 0; background: rgba(10, 25, 20, .35); transition: background .18s; } .video__link:hover::after { background: rgba(10, 25, 20, .15); } .video__play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(251, 248, 242, .94); display: grid; place-items: center; box-shadow: 0 4px 18px rgba(0,0,0,.3); transition: transform .18s; } .video__link:hover .video__play { transform: translate(-50%, -50%) scale(1.06); } .video__play svg { width: 20px; height: 20px; margin-left: 3px; fill: var(--accent); } .video__off { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 8px 12px; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.92); background: rgba(0,0,0,.42); } /* Sections --------------------------------------------------------------- */ .sec { padding: 60px 0; } .sec--tint { background: var(--paper-2); border-block: 1px solid var(--rule); } .sec--dark { background: var(--accent); color: var(--on-accent); } .sec--dark a { color: var(--on-accent); } .sec h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); } .sec__lead { margin-top: 12px; color: var(--ink-2); max-width: var(--measure); font-size: 1.1rem; } .sec--dark .sec__lead { color: rgba(247,243,234,.75); } .sec__head { margin-bottom: 34px; } .prose p { max-width: var(--measure); color: var(--ink-2); font-size: 1.1rem; } .prose p + p { margin-top: 16px; } .prose strong { color: var(--ink); font-weight: 600; } /* The two venues --------------------------------------------------------- */ .venues { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .venue { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; } .venue--clam { border-top: 4px solid #14543C; } .venue--broadway { border-top: 4px solid #1C1C1C; } .venue__shot { aspect-ratio: 16 / 11; overflow: hidden; background: var(--paper-3); } .venue__shot img { width: 100%; height: 100%; object-fit: cover; } .venue__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .venue__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .venue--clam .venue__eyebrow { color: #14543C; } .venue--broadway .venue__eyebrow { color: #8A6A1C; } .venue :is(h2, h3) { font-size: 1.5rem; } .venue__desc { margin-top: 12px; color: var(--ink-2); } .venue .locale__hours { margin: 16px 0 4px; } .venue__facts { margin-top: 18px; font-size: 1rem; color: var(--ink-2); display: grid; gap: 4px; } .venue__facts a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); color: var(--ink); } .venue__facts a:hover { border-color: currentColor; } .venue__acts { margin-top: auto; padding-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; } .venue__acts .btn { flex: 0 1 auto; } .venue--clam .btn--fill { background: #14543C; border-color: #14543C; color: #F7F3EA; } .venue--broadway .btn--fill { background: #1C1C1C; border-color: #1C1C1C; color: #F7F3EA; } /* Press ------------------------------------------------------------------ */ .press-also { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .98rem; } .press-also b { color: var(--ink); font-weight: 600; } /* Press strip ------------------------------------------------------------ */ .press { padding: 26px 0; border-bottom: 1px solid var(--rule); } .press__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: .92rem; color: var(--ink-3); text-align: center; } .press b { color: var(--ink); font-weight: 600; } /* Pull quote ------------------------------------------------------------- */ .quote { border-left: 3px solid var(--mark); padding-left: 22px; margin: 30px 0; } .quote p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; font-style: italic; color: var(--ink); max-width: 46ch; } .quote cite { display: block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } /* Visit ------------------------------------------------------------------ */ .visit { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .visit :is(h2, h3) { font-size: 1.25rem; margin-bottom: 14px; } .visit table { border-collapse: collapse; width: 100%; margin-bottom: 16px; } .visit :is(td, th) { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; text-align: left; font-weight: 400; } .visit td:last-child { text-align: right; color: var(--ink-2); white-space: nowrap; } .visit address { font-style: normal; color: var(--ink-2); } .visit address a { color: var(--ink); font-weight: 600; } /* Footer ----------------------------------------------------------------- */ .foot { background: var(--accent); color: rgba(247,243,234,.74); padding: 56px 0 24px; font-size: .95rem; } .foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; } .foot__brand img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--paper); margin-bottom: 14px; } .foot__name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; color: var(--on-accent); } .foot__place { margin-top: 8px; color: rgba(247,243,234,.55); font-size: .9rem; } .foot__col h3 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(247,243,234,.5); margin-bottom: 14px; } .foot__col p { margin-bottom: 12px; line-height: 1.55; } .foot__col a { display: block; color: rgba(247,243,234,.9); text-decoration: none; padding: 3px 0; } .foot__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .foot__social { display: flex; gap: 10px; margin-top: 18px; } .foot__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); color: rgba(247,243,234,.85); transition: background .15s, color .15s, border-color .15s; } .foot__social a:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); } .foot__social svg { width: 17px; height: 17px; } .foot__bar { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; font-size: .84rem; color: rgba(247,243,234,.5); } .foot__credit a { color: rgba(247,243,234,.82); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(247,243,234,.3); padding-bottom: 1px; } .foot__credit a:hover { color: #fff; border-color: #fff; } /* ========================================================================== MENU ========================================================================== */ .menuhead { background: var(--accent); color: var(--on-accent); padding: 46px 0 34px; } .menuhead h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); } .menuhead__sub { margin-top: 10px; color: rgba(247,243,234,.75); max-width: 54ch; } .menuhead__acts { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; } /* Sticky course rail */ .rail { position: sticky; top: var(--shell-h); z-index: 90; height: var(--rail-h); background: var(--paper); border-bottom: 1px solid var(--rule); } /* Scroll affordance. The rail scrolls sideways and there was nothing telling anyone that - the courses past "Sandwiches" were simply undiscoverable on a phone. A fading edge plus a chevron, shown only on the side there is more to see. */ /* The arrows anchor to the 680px content column, NOT to the full-bleed .rail - otherwise on desktop the chevron floats out at the viewport edge, miles from the chips it belongs to. */ .rail__wrap { position: relative; height: 100%; } .rail__edge { position: absolute; top: 0; bottom: 0; z-index: 2; width: 54px; display: flex; align-items: center; border: 0; padding: 0; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .rail__edge svg { width: 18px; height: 18px; } .rail__edge--next { right: 20px; /* == .narrow padding-inline, so it lines up with the chips */ justify-content: flex-end; padding-right: 2px; background: linear-gradient(to right, rgba(251,248,242,0) 0%, var(--paper) 58%); color: var(--accent); } .rail__edge--prev { left: 20px; justify-content: flex-start; padding-left: 2px; background: linear-gradient(to left, rgba(251,248,242,0) 0%, var(--paper) 58%); color: var(--accent); } .rail.can-next .rail__edge--next, .rail.can-prev .rail__edge--prev { opacity: 1; pointer-events: auto; } /* A gentle nudge, so the arrow reads as "there is more this way" rather than as decoration. Stops as soon as you actually scroll the rail. */ .rail.can-next:not(.rail--used) .rail__edge--next svg { animation: nudge 1.8s ease-in-out 3; } @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .rail__edge--next svg { animation: none !important; } } .rail__in { position: relative; height: var(--rail-h); display: flex; align-items: center; gap: 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; /* swiping the rail must not scroll the page */ scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rail__in::-webkit-scrollbar { display: none; } .rail a { flex: 0 0 auto; display: flex; align-items: center; min-height: 36px; padding: 0 14px; font-size: .94rem; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 100px; white-space: nowrap; } .rail a:hover { background: var(--paper-2); color: var(--ink); } .rail a.on, .rail a[aria-current] { background: var(--accent); color: var(--on-accent); font-weight: 600; } /* Courses */ .menu { padding: 44px 0 10px; } .course { scroll-margin-top: calc(var(--shell-h) + var(--rail-h) + 16px); } .course + .course { margin-top: 54px; } .course > h2 { font-size: 1.55rem; color: var(--accent); padding-bottom: 10px; border-bottom: 2px solid var(--accent); } .course__note { margin-top: 12px; color: var(--ink-2); font-size: .98rem; font-style: italic; } .dishes { list-style: none; padding: 0; margin-top: 6px; } .dish { padding: 18px 0; border-bottom: 1px solid var(--rule); } .dish:last-child { border-bottom: 0; } .dish__top { display: flex; align-items: baseline; gap: 14px; } .dish__name { font-family: var(--sans); font-size: 1.06rem; font-weight: 600; flex: 1; } .dish__price { font-weight: 600; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; } .dish__price.mp { font-weight: 500; font-style: italic; color: var(--ink-3); font-size: .95rem; } .dish p { margin-top: 5px; color: var(--ink-2); font-size: 1rem; max-width: 56ch; } .dish__opts { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 5px; } .dish__opts li { display: flex; gap: 14px; font-size: .97rem; color: var(--ink-2); } .dish__opts span:first-child { flex: 1; } .dish__opts span:last-child { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .flag { display: inline-block; margin-left: 8px; vertical-align: 2px; font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mark); border: 1px solid currentColor; padding: 2px 6px; border-radius: 2px; } .fine { margin-top: 54px; padding: 22px 0 0; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .9rem; line-height: 1.6; } .fine strong { color: var(--ink-2); } .review { margin: 34px 0; padding: 18px 20px; background: #FFF6D6; border: 1px solid #E5CE7A; border-radius: 4px; color: #5C4A12; font-size: .96rem; } .review b { display: block; margin-bottom: 4px; color: #3D3008; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 980px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: 34px; } .foot__brand { grid-column: 1 / -1; } } @media (max-width: 880px) { .venues { grid-template-columns: 1fr; } .visit { grid-template-columns: 1fr; gap: 34px; } } @media (max-width: 760px) { .burger { display: flex; } .nav { position: absolute; top: var(--shell-h); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--accent); padding: 4px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.16); max-height: calc(100dvh - var(--shell-h)); overflow-y: auto; } .nav-open .nav { display: flex; } .nav a { min-height: 50px; padding: 0; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.12); } .nav a[aria-current] { box-shadow: none; } .hero { padding: 40px 0 44px; } /* Buttons size to their text and wrap, rather than stretching to fill a row (which left "Call 484-461-2802" squashed next to "Download PDF"). */ .hero__acts, .menuhead__acts, .venue__acts, .locale__acts { gap: 10px; } .hero__acts .btn, .menuhead__acts .btn, .venue__acts .btn, .locale__acts .btn { flex: 0 0 auto; padding: 0 20px; } .sec { padding: 46px 0; } .ribbon__in { padding-block: 12px; } .ribbon__more { margin-left: 0; flex-basis: 100%; } .hours-list { display: grid; gap: 3px; } .videos--two { grid-template-columns: 1fr; } } @media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; gap: 30px; } .foot__bar { flex-direction: column; gap: 10px; } } @media (max-width: 420px) { .mark small { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ========================================================================== PRINT — also what Chrome renders when generating the downloadable PDFs ========================================================================== */ @media print { @page { margin: 14mm 12mm; } .shell, .rail, .menuhead__acts, .hero__acts, .burger, .review, .noprint { display: none !important; } body { background: #fff; color: #000; font-size: 10.5pt; overflow: visible; } .menuhead { background: #fff !important; color: #000 !important; padding: 0 0 10pt; border-bottom: 2pt solid #000; margin-bottom: 16pt; } .menuhead h1 { font-size: 22pt; } .menuhead__sub { color: #444 !important; } .menu { padding: 0; } .narrow, .wrap { max-width: none; padding: 0; } .course { break-inside: auto; } .course + .course { margin-top: 20pt; } .course > h2 { font-size: 13pt; color: #000; border-bottom: 1pt solid #000; break-after: avoid; break-inside: avoid; } /* Two columns on paper: a menu that runs 6 pages is useless to print. */ .dishes { columns: 2; column-gap: 20pt; margin-top: 4pt; } .dish { break-inside: avoid; padding: 5pt 0; border-bottom: none; -webkit-column-break-inside: avoid; } .dish__name { font-size: 10.5pt; } .dish__price { color: #000; } .dish p { font-size: 9pt; color: #333; margin-top: 1pt; } .dish__opts li { font-size: 9pt; } .dish__opts span:last-child { color: #000; } .flag { border-color: #000; color: #000; } .fine { margin-top: 16pt; font-size: 8.5pt; color: #333; } .foot { background: #fff !important; color: #000 !important; padding: 10pt 0 0; } .foot__cols { gap: 20pt; } .foot h3 { color: #000; } .foot a { color: #000; } .foot__bar { border-color: #999; color: #333; } a[href^="tel:"]::after { content: ""; } } /* ========================================================================== ABOUT ========================================================================== */ .about-lead { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.55rem); line-height: 1.45; color: var(--ink); max-width: 34ch; } .about-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 60px); align-items: start; } .about-figure { border: 1px solid var(--rule); background: #fff; border-radius: 4px; overflow: hidden; } .about-figure img { width: 100%; height: auto; } .about-figure figcaption { padding: 12px 14px; font-size: .9rem; color: var(--ink-2); border-top: 1px solid var(--rule); } .facts { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 0; } .facts li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); } .facts dt, .facts b { flex: 0 0 116px; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .facts span { color: var(--ink-2); } .facts a { color: var(--accent); font-weight: 600; } /* Social embeds ---------------------------------------------------------- */ .socials { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; } /* Each embed gets a height that matches ITS content. Instagram's profile grid ends ~350px in and then pads with white; Facebook's feed keeps going. Forcing one shared height just reintroduced the dead space. */ .social-card--ig .social-card__frame { height: 358px; } .social-card--fb .social-card__frame { height: 470px; } .social-card h3 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } /* Both embeds render taller than their content: Instagram's profile iframe is 596px with ~150px of dead white below the grid, Facebook's is 640px. Left alone they are unequal AND padded with nothing. Crop both to one preview height and fade the cut, so it reads as a deliberate teaser rather than a chopped iframe. The "View on..." link below is what actually takes you there. */ .social-card__frame { position: relative; height: 470px; /* default; each network gets its own below */ border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; } .social-card__frame iframe { display: block; width: 100%; height: 100%; border: 0; } .social-card__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%); pointer-events: none; } .social-card__frame .instagram-media { margin: 0 !important; box-shadow: none !important; border: 0 !important; } .social-card__link { margin-top: 12px; display: inline-block; font-weight: 600; } @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } .socials { grid-template-columns: 1fr; } } /* ========================================================================== FIND US ========================================================================== */ .locales { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .locale { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 26px 26px 24px; border-top: 4px solid var(--rule); } .locale--clam { border-top-color: #14543C; } .locale--broadway { border-top-color: #1C1C1C; } .locale__tag { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; } .locale--clam .locale__tag { color: #14543C; } .locale--broadway .locale__tag { color: #8A6A1C; } .locale h3 { font-size: 1.4rem; } .locale__hours { width: 100%; border-collapse: collapse; margin: 20px 0 4px; table-layout: fixed; /* keeps the time column aligned */ } .locale__hours th, .locale__hours td { padding: 9px 0; border-bottom: 1px solid var(--rule); font-weight: 400; font-size: .98rem; text-align: left; } .locale__hours td { width: 7.5em; /* fixed, so every time starts at the same x */ text-align: right; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; } /* today's row is the one people are actually looking for */ .locale__hours tr.today th, .locale__hours tr.today td { color: var(--ink); font-weight: 700; } .locale__hours tr.today th::before { content: ""; display: inline-block; vertical-align: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; } .locale--broadway .locale__hours tr.today th::before { background: #1C1C1C; } .locale--clam .locale__hours tr.today th::before { background: #14543C; } .locale__meta { margin-top: 18px; display: grid; gap: 6px; font-size: 1rem; } .locale__meta a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); justify-self: start; } .locale__meta a:hover { border-color: currentColor; } .locale__meta span { color: var(--ink-2); } .locale__acts { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; } .locale__acts .btn { flex: 0 1 auto; } .locale--clam .btn--fill { background: #14543C; border-color: #14543C; color: #F7F3EA; } .locale--broadway .btn--fill { background: #1C1C1C; border-color: #1C1C1C; color: #F7F3EA; } .map { margin-top: 26px; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--paper-2); } .map iframe { display: block; width: 100%; height: 340px; border: 0; } .map__note { padding: 12px 18px; border-top: 1px solid var(--rule); font-size: .93rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; } .map__note b { color: var(--ink); font-weight: 600; } @media (max-width: 880px) { .locales { grid-template-columns: 1fr; } .map iframe { height: 280px; } } /* Hours tables on small screens: smaller, tighter, still aligned. */ @media (max-width: 560px) { .locale__hours th, .locale__hours td { font-size: .92rem; padding: 8px 0; } .locale__hours td { width: 6.8em; } .locale { padding: 22px 20px 20px; } .locale__meta span { font-size: .95rem; } } /* ========================================================================== MOTION Restrained on purpose: a nav underline that draws itself, a small lift on cards, and one short fade-up as sections arrive. Nothing bounces. ========================================================================== */ /* Nav: an underline that wipes in from the left. It sits on the inner , not the : the link stays a full-width tap target on mobile, while the rule only ever runs the length of the label. */ .nav a span { position: relative; display: inline-block; } .nav a span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1); } .nav a:hover span::after, .nav a:focus-visible span::after { transform: scaleX(1); } .nav a[aria-current] { box-shadow: none; } .nav a[aria-current] span::after { transform: scaleX(1); } .mark img { transition: transform .3s cubic-bezier(.2,.7,.3,1); } .mark:hover img { transform: rotate(-6deg) scale(1.06); } /* Cards lift slightly toward the cursor */ .venue, .locale, .video__frame { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s cubic-bezier(.2,.7,.3,1); } .venue:hover, .locale:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(16, 49, 42, .10); } .video:hover .video__frame { transform: translateY(-2px); } .btn { transition: background .18s, color .18s, border-color .18s, transform .18s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .rail a { transition: background .18s, color .18s; } /* Sections fade up once, as they arrive */ .rise { opacity: 0; transform: translateY(14px); } .js .rise { transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); } .rise.in { opacity: 1; transform: none; } /* a light stagger so a row of cards arrives in sequence, not as a block */ .venues .venue:nth-child(2), .locales .locale:nth-child(2), .videos .video:nth-child(2) { transition-delay: .07s; } .videos .video:nth-child(3) { transition-delay: .14s; } /* The hero settles on load rather than animating on scroll */ .js .hero h1, .js .hero__sub, .js .hero__acts, .js .menuhead h1, .js .menuhead__sub, .js .menuhead__acts { animation: settle .6s cubic-bezier(.2,.7,.3,1) both; } .js .hero__sub, .js .menuhead__sub { animation-delay: .07s; } .js .hero__acts, .js .menuhead__acts { animation-delay: .14s; } @keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .status__dot, .status__dot::after { animation: none !important; } .rise, .rise.in { opacity: 1 !important; transform: none !important; } .js .hero h1, .js .hero__sub, .js .hero__acts, .js .menuhead h1, .js .menuhead__sub, .js .menuhead__acts { animation: none; } .nav a::after { transition: none; } .venue:hover, .locale:hover, .btn:hover, .mark:hover img { transform: none; } }