/* assets/css/style.css Custom styles that complement the Tailwind theme defined in index.php. (Tailwind itself is loaded via the Play CDN in the .) */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* Thin vertical gold gradient divider */ .aurum-line { width: 1px; background: linear-gradient(to bottom, transparent, #dfca67, transparent); } /* Frosted-glass navigation surface */ .glass-nav { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Scroll-reveal animation (toggled by main.js IntersectionObserver). Two naming conventions are supported so markup from either design works: .reveal -> .active .reveal-on-scroll -> .visible */ .reveal, .reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active, .reveal-on-scroll.visible { opacity: 1; transform: translateY(0); } /* Frosted panel used by the contact design */ .glass-blur { backdrop-filter: blur(20px); background-color: rgba(255, 248, 239, 0.1); } /* Dotted leader filler placed BETWEEN a name and a price (grows to fill). Usage:
Name
Price
*/ .leader-dots { flex-grow: 1; border-bottom: 1px dotted #cdc6b2; margin: 0 12px; position: relative; top: -4px; } /* Horizontal gold gradient rule (counterpart to the vertical .aurum-line) */ .aurum-line-horizontal { height: 1px; background: linear-gradient(to right, transparent, #dfca67, transparent); width: 100px; } /* 7-column month grid used on the Events page */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } /* Dotted leader between a dish name and its price (Menu page) */ .menu-leader { display: flex; align-items: baseline; } .menu-leader::after { content: ""; flex: 1; margin: 0 12px; border-bottom: 1px dotted #cdc6b2; }