/* The back wall: dark plaster with faint plank lines and the sign's light on it. */ .um-wall { background-color: var(--um-night); background-image: radial-gradient(ellipse 70% 55% at 50% 34%, rgba(232, 160, 51, 0.22), transparent 70%), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 96px), linear-gradient(#1a1512, var(--um-night)); } /* The sign: their logo, each color lit in its own glow (logo-sign.tsx); the leaf over the Á flickers now and then. */ .um-neon-layer { filter: brightness(1.08) drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 28px color-mix(in srgb, var(--glow) 55%, transparent)); } .um-neon-flicker { animation: um-flicker 9s linear infinite; } @keyframes um-flicker { 0%, 41%, 43%, 71%, 72.6%, 100% { opacity: 1; } 42% { opacity: 0.45; } 72% { opacity: 0.65; } } /* Chalkboards: matte slate, dust, a dark frame. */ .um-slate { background-color: var(--um-slate); background-image: radial-gradient(ellipse at 30% 10%, rgba(255, 255, 255, 0.06), transparent 60%), url("data:image/svg+xml;utf8,"); } .um-chalk-tag { background-color: var(--um-slate); background-image: url("data:image/svg+xml;utf8,"); border: 2px solid #0e0b09; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.9); } .um-frame { border: 10px solid #0e0b09; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 22px 36px -22px rgba(0, 0, 0, 0.8); } .um-chalk-underline { background-image: linear-gradient(transparent 82%, rgba(235, 227, 210, 0.75) 82%, rgba(235, 227, 210, 0.75) 90%, transparent 90%); } /* The bar: their star tiles behind the handles, a brass rail, dark wood panels below. */ .um-tiles { background-color: #f7f4ed; background-image: url("data:image/svg+xml;utf8,"); background-size: 56px 56px; box-shadow: inset 0 -14px 24px -16px rgba(0, 0, 0, 0.55), inset 0 14px 24px -16px rgba(0, 0, 0, 0.55); } /* Until the screen is wide enough for all twenty-four, the handles slide sideways; the right edge fades to say so. */ @media (max-width: 1151px) { .um-handles { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); } } .um-rail { height: 14px; background: linear-gradient(#e8cd7f, #b08a3a 55%, #7d5f22); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.8); } .um-bar-front { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 2px, transparent 2px 88px), linear-gradient(var(--um-wood), #241810); border-radius: 0 0 6px 6px; } /* Handles (glassware.tsx): pulled while its beer is in the glass, leaning a little under a fine pointer or keyboard focus. */ .um-handle { transform-box: view-box; transform-origin: 32px 118px; transition: transform var(--um-t-base) var(--um-ease-out); } .um-handle[data-pulled] { transform: rotate(-18deg); } .um-tap:focus-visible .um-handle:not([data-pulled]) { transform: rotate(-6deg); } @media (hover: hover) and (pointer: fine) { .um-tap:hover .um-handle:not([data-pulled]) { transform: rotate(-6deg); } } /* The glass: the beer rises from the bottom, then the foam settles; a seltzer's bubbles climb. */ .um-beer { transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--um-t-slow) var(--um-ease-out); } .um-foam { transition: opacity var(--um-t-fast) linear var(--um-t-slow); } [data-empty] .um-beer { transform: scaleY(0); } [data-empty] .um-foam { opacity: 0; transition-delay: 0s; } .um-bubble { transform-box: fill-box; animation: um-bubble 2.6s linear infinite; } .um-b2 { animation-duration: 3.1s; animation-delay: -1.2s; } .um-b3 { animation-duration: 2.3s; animation-delay: -0.7s; } [data-empty] .um-bubble { animation: none; opacity: 0; } @keyframes um-bubble { from { transform: translateY(0); opacity: 0.8; } to { transform: translateY(-48px); opacity: 0; } } /* The board's lines and chips. */ .um-row { border-bottom: 1px solid var(--um-line); transition: background-color var(--um-t-fast); } li:last-child > .um-row { border-bottom: 0; } .um-row:hover { background-color: rgba(255, 255, 255, 0.03); } .um-row[aria-pressed="true"] { background-color: rgba(232, 160, 51, 0.09); } .um-chip[aria-pressed="true"] { background: var(--um-glow); color: var(--um-night); border-color: var(--um-glow); } .um-press { transition-property: color, background-color, border-color, transform; transition-duration: var(--um-t-fast); } .um-press:active { transform: scale(0.96); } .um-note { animation: um-note var(--um-t-fast) var(--um-ease-out) both; } @keyframes um-note { from { opacity: 0; transform: translateY(3px); } } /* Over the hero reel: dark at the top and the foot (into the wall below), and darkest behind the sign and the line. */ .um-hero-scrim { background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(12, 9, 7, 0.55), transparent 75%), linear-gradient(rgba(14, 11, 9, 0.72), rgba(14, 11, 9, 0.58) 40%, rgba(14, 11, 9, 0.7) 75%, var(--um-night)); } /* Clips and photos from their Instagram, in the boards' dark frame. */ .um-media { background-color: var(--um-slate); border: 6px solid #0e0b09; border-radius: 10px; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.9); } /* Dotted leaders on the food boards. */ .um-leader { flex: 1; border-bottom: 2px dotted rgba(235, 227, 210, 0.35); margin: 0 8px 6px; } /* The type from their sign: the flared capitals of UNA MÁS for headings (Rakkas), and the wide-set ·TAPROOM· capitals for the small line over each one (Josefin Sans). */ .um-sign { font-family: var(--font-sign), Georgia, serif; font-weight: 400; line-height: 1; letter-spacing: 0.005em; } .um-label { font-family: var(--font-label), ui-sans-serif, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: 0.32em; text-transform: uppercase; color: var(--um-glow); } @media (prefers-reduced-motion: reduce) { .um-neon-flicker, .um-note, .um-bubble { animation: none; } .um-handles { scroll-behavior: auto; } .um-bubble { opacity: 0.6; } .um-handle, .um-beer, .um-foam, .um-row { transition: none; } .um-press:active { transform: none; } }

Update the board