/* ========================================================================== GARDEN CANGGU — Design System "Come for the Game. Stay for the Pizza." Typographic system: Swiss grotesque, tight tracking, editorial grid. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Brand palette — from Garden Canggu Brand Guide */ --forest: #1F361B; --forest-deep: #16250F; --forest-mid: #2A4623; --forest-line: #3A5A31; --green: #407D3F; --gold: #EDB65A; --amber: #EA9922; --red: #971F1F; --bone: #F4F1EA; --bone-dim: #CFC9BB; --paper: #FFFFFF; --ink: #101510; /* Ink-side counterparts, contrast-checked against --bone (#F4F1EA): gold-ink 4.8:1 · ink-mute 5.1:1 · ink-faint 4.0:1 */ --gold-ink: #8F6208; --ink-mute: rgba(16,21,16,.66); --ink-faint: rgba(16,21,16,.55); --ink-rule: rgba(16,21,16,.15); --ink-rule-strong: rgba(16,21,16,.28); /* Semantic */ --bg: var(--forest); --bg-deep: var(--forest-deep); --fg: var(--bone); --fg-mute: rgba(244, 241, 234, .62); --fg-faint: rgba(244, 241, 234, .38); --rule: rgba(244, 241, 234, .16); --rule-strong: rgba(244, 241, 234, .34); --accent: var(--gold); /* Type */ --sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Fluid type scale — 1.25 minor third, tightened at display sizes */ --t-mega: clamp(3.4rem, 13.2vw, 11.5rem); --t-d1: clamp(2.75rem, 8.2vw, 7rem); --t-d2: clamp(2.1rem, 5.4vw, 4.25rem); --t-h1: clamp(1.75rem, 3.6vw, 2.9rem); --t-h2: clamp(1.4rem, 2.4vw, 2rem); --t-h3: clamp(1.12rem, 1.5vw, 1.35rem); --t-body: clamp(1rem, 1.02vw, 1.075rem); --t-sm: .875rem; --t-xs: .75rem; --t-label: .6875rem; /* Space — 8px base */ --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 8rem; --s9: 11rem; /* Layout */ --maxw: 1560px; --gutter: clamp(1.25rem, 4vw, 4.5rem); --col-gap: clamp(1rem, 2vw, 2.25rem); --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --header-h: 78px; } /* -------------------------------------------------------------------------- 2. FONT LOADING — self-describing @font-face via Google Fonts CDN -------------------------------------------------------------------------- */ /* Loaded in with preconnect. Fallback stack is metric-adjacent. */ /* -------------------------------------------------------------------------- 3. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; font-weight: 420; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; height: auto; } /* is a pure wrapper — let the be the real layout child so that object-fit/height rules on descendants of positioned containers resolve. */ picture { display: contents; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--gold); color: var(--forest-deep); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY PRIMITIVES -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; } .mega { font-size: var(--t-mega); font-weight: 800; line-height: .84; letter-spacing: -0.052em; text-transform: uppercase; } .d1 { font-size: var(--t-d1); font-weight: 800; line-height: .90; letter-spacing: -0.045em; text-transform: uppercase; } .d2 { font-size: var(--t-d2); font-weight: 750; line-height: .96; letter-spacing: -0.038em; } .h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.032em; } .h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.028em; } .h3 { font-size: var(--t-h3); font-weight: 650; letter-spacing: -0.02em; } /* Editorial lead paragraph */ .lead { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.42; letter-spacing: -0.019em; font-weight: 400; color: var(--fg); max-width: 46ch; text-wrap: pretty; } .body-lg { font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.62; } /* The system's connective tissue: monospaced micro-labels */ .label { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .19em; text-transform: uppercase; color: var(--fg-mute); line-height: 1; } .label--gold { color: var(--gold); } .label--ink { color: rgba(16,21,16,.55); } /* Numbered section marker — Bierut-ish index device */ .marker { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); margin-bottom: var(--s4); } /* Right-aligned small print on the section rule (menu page only) */ .marker__note { margin-left: auto; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; /* mute, not faint: this is pricing information a guest needs to read, so it has to clear 4.5:1 rather than the 3:1 decorative floor */ color: var(--fg-mute); text-align: right; white-space: nowrap; } .on-bone .marker__note { color: var(--ink-mute); } /* Below 760px the kicker and the note no longer fit side by side, so the note drops to its own line and reads left-aligned. */ @media (max-width: 760px) { .marker__note { margin-left: 0; width: 100%; text-align: left; white-space: normal; margin-top: .35rem; } } .marker__num { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; color: var(--gold); flex: none; } .marker__txt { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .19em; text-transform: uppercase; color: var(--fg-mute); } .mute { color: var(--fg-mute); } .faint { color: var(--fg-faint); } .gold { color: var(--gold); } .amber { color: var(--amber); } .measure { max-width: 62ch; } .measure-sm { max-width: 48ch; } .tnum { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } /* -------------------------------------------------------------------------- 5. LAYOUT -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 1080px; } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); } @media (max-width: 900px) { .grid { grid-template-columns: repeat(6, minmax(0,1fr)); } } @media (max-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } .section { padding-block: clamp(3.5rem, 8vw, var(--s8)); } .section--tight { padding-block: clamp(2.5rem, 5vw, var(--s6)); } .section--flush-top { padding-top: 0; } .rule { height: 1px; background: var(--rule); border: 0; } .rule--strong { background: var(--rule-strong); } /* Column span utilities. ⚠ These MUST set grid-column-END, not the `grid-column` shorthand. `grid-column: span 6` compiles to `grid-column-start: span 6`, so any `.start-N` rule later in the sheet overwrites the span and the element collapses to a single column. Writing the end edge explicitly lets `.c-6.start-7` resolve correctly as "start at 7, run 6 columns". */ .c-1{grid-column-end:span 1}.c-2{grid-column-end:span 2}.c-3{grid-column-end:span 3} .c-4{grid-column-end:span 4}.c-5{grid-column-end:span 5}.c-6{grid-column-end:span 6} .c-7{grid-column-end:span 7}.c-8{grid-column-end:span 8}.c-9{grid-column-end:span 9} .c-10{grid-column-end:span 10}.c-11{grid-column-end:span 11}.c-12{grid-column-end:span 12} .start-2{grid-column-start:2}.start-3{grid-column-start:3} .start-4{grid-column-start:4}.start-5{grid-column-start:5}.start-6{grid-column-start:6} .start-7{grid-column-start:7}.start-8{grid-column-start:8}.start-9{grid-column-start:9} .start-10{grid-column-start:10}.start-11{grid-column-start:11} @media (max-width: 900px) { .c-1,.c-2,.c-3,.c-4{grid-column-end:span 3} .c-5,.c-6,.c-7,.c-8,.c-9,.c-10,.c-11,.c-12{grid-column-end:span 6} .start-2,.start-3,.start-4,.start-5,.start-6, .start-7,.start-8,.start-9,.start-10,.start-11{grid-column-start:auto} } @media (max-width: 560px) { .c-1,.c-2,.c-3,.c-4,.c-5,.c-6,.c-7,.c-8,.c-9,.c-10,.c-11,.c-12{grid-column-end:span 2} } /* Surfaces */ /* --- LIGHT SECTION INVERSION ------------------------------------------- Every component that reads a light-side token gets an ink-side counterpart here. Redefining the tokens themselves on .on-bone means any component nested inside a light section inverts automatically, so a new block can never ship with cream text on a cream background. ---------------------- */ .on-bone { background: var(--bone); color: var(--ink); --fg: var(--ink); --fg-mute: var(--ink-mute); --fg-faint: var(--ink-faint); --rule: var(--ink-rule); --rule-strong: var(--ink-rule-strong); --gold: var(--gold-ink); --accent: var(--gold-ink); } .on-bone .label { color: var(--ink-mute); } .on-bone .mute { color: var(--ink-mute); } .on-bone .faint { color: var(--ink-faint); } .on-bone .gold { color: var(--gold-ink); } .on-bone .marker__txt { color: var(--ink-mute); } .on-bone .marker__num { color: var(--red); } .on-bone .rule { background: var(--ink-rule); } .on-bone .card { background: rgba(16,21,16,.03); } .on-bone .card:hover, .on-bone a.card:hover { background: rgba(16,21,16,.055); } .on-bone .card__media, .on-bone .split__media, .on-bone .gal figure { background: var(--bone-dim); } .on-bone .deal { border-color: var(--gold-ink); background: linear-gradient(180deg, rgba(143,98,8,.08), rgba(143,98,8,.02)); } .on-bone .deal__price, .on-bone .mitem__price, .on-bone .fixture__when { color: var(--gold-ink); } .on-bone .stat__n { color: var(--gold-ink); } .on-bone .field select { background-image: linear-gradient(45deg,transparent 50%,var(--gold-ink) 50%),linear-gradient(135deg,var(--gold-ink) 50%,transparent 50%); } .on-bone .field select option { background: var(--bone); color: var(--ink); } /* Gold-on-dark flips to gold-on-bone: swap the knockout text to bone so the pairing stays above 4.5:1 instead of collapsing to 3:1. */ .on-bone .tag, .on-bone .btn--gold { background: var(--gold-ink); color: var(--bone); } .on-bone .btn--gold:hover { background: #74500A; } .on-deep { background: var(--bg-deep); } /* -------------------------------------------------------------------------- 6. SKIP LINK -------------------------------------------------------------------------- */ .skip { position: absolute; left: var(--s2); top: var(--s2); transform: translateY(-200%); background: var(--gold); color: var(--forest-deep); padding: .6rem 1rem; font-weight: 650; font-size: var(--t-sm); z-index: 200; transition: transform .2s var(--ease); } .skip:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- 7. TOP RIBBON + HEADER -------------------------------------------------------------------------- */ .ribbon { background: var(--forest-deep); border-bottom: 1px solid rgba(244,241,234,.09); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .13em; text-transform: uppercase; color: var(--fg-mute); } .ribbon__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 38px; overflow: hidden; } .ribbon__set { display: flex; align-items: center; gap: var(--s3); } .ribbon .live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: .5em; vertical-align: middle; animation: pulse 2.4s var(--ease-io) infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} } .ribbon a:hover { color: var(--gold); } @media (max-width: 900px) { .ribbon__set--hide { display: none; } } .header { position: sticky; top: 0; z-index: 100; background: rgba(31,54,27,.90); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--rule); transition: background .3s var(--ease), border-color .3s var(--ease); } .header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--header-h); flex-wrap: nowrap; } /* The brand is the only part allowed to give way. The CTA cluster — and with it the burger — is flex:none, so the menu button can never be pushed off the edge and clipped by body{overflow-x:hidden}. */ .brand { display: flex; align-items: center; gap: .8rem; flex: 0 1 auto; min-width: 0; } .brand img { height: 42px; width: auto; flex: none; } .brand__txt { display: flex; flex-direction: column; line-height: 1; min-width: 0; } .brand__name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__sub { font-family: var(--mono); font-size: .625rem; letter-spacing: .19em; text-transform: uppercase; color: var(--fg-mute); margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 2rem); } .nav a { font-size: var(--t-sm); font-weight: 550; letter-spacing: -.012em; padding: .4rem 0; position: relative; color: var(--fg-mute); transition: color .22s var(--ease); } .nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); } .nav a:hover, .nav a:focus-visible { color: var(--fg); } .nav a:hover::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--fg); } .nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--gold); } .header__cta { display: flex; align-items: center; gap: .75rem; flex: none; } @media (max-width: 1080px) { .nav, .header__cta .btn--ghost { display: none; } } /* Phone: drop the strap-line, shrink the mark. The strap-line is set in mono with .19em tracking, which made it the widest object in the header. */ @media (max-width: 720px) { .brand__sub { display: none; } .brand img { height: 36px; } .brand__name { font-size: .95rem; } .brand { gap: .6rem; } :root { --header-h: 66px; } } /* Narrow phone: the header CTA goes icon-only. The floating WhatsApp button and the drawer both still carry a full-width "Book a Table". */ @media (max-width: 560px) { .header__cta .btn--gold span { display: none; } .header__cta .btn--gold { padding: .6rem; width: 42px; } .header__cta { gap: .5rem; } } /* Burger */ .burger { display: none; width: 46px; height: 46px; flex: none; border: 1px solid var(--rule-strong); background: rgba(244,241,234,.06); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; transition: border-color .2s var(--ease), background .2s var(--ease); } .burger:hover, .burger[aria-expanded="true"] { border-color: var(--gold); background: rgba(237,182,90,.12); } .burger span { display: block; width: 20px; height: 2px; background: var(--fg); transition: transform .3s var(--ease), opacity .2s; } /* 3 bars of 2px with 5px gaps = 16px tall; the outer bars travel 7px to meet in the middle and form the cross. */ .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1080px) { .burger { display: flex; } } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 99; background: var(--forest-deep); padding: calc(var(--header-h) + 48px) var(--gutter) var(--s5); display: flex; flex-direction: column; gap: var(--s2); transform: translateY(-100%); visibility: hidden; transition: transform .48s var(--ease), visibility .48s; overflow-y: auto; } .drawer[data-open="true"] { transform: translateY(0); visibility: visible; } .drawer a.drawer__link { font-size: clamp(1.9rem, 8vw, 3rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: 1.06; padding: .4rem 0; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .drawer a.drawer__link span { font-family: var(--mono); font-size: .625rem; letter-spacing: .18em; color: var(--gold); font-weight: 500; } .drawer a.drawer__link:hover { color: var(--gold); } .drawer__foot { margin-top: auto; padding-top: var(--s4); display: grid; gap: var(--s2); } /* -------------------------------------------------------------------------- 8. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.6rem; font-size: var(--t-sm); font-weight: 650; letter-spacing: -.008em; border: 1px solid transparent; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); text-align: center; line-height: 1.1; } .btn:active { transform: translateY(1px); } .btn svg { width: 17px; height: 17px; flex: none; } .btn--gold { background: var(--gold); color: var(--forest-deep); } .btn--gold:hover { background: var(--amber); } .btn--solid { background: var(--fg); color: var(--forest-deep); } .btn--solid:hover { background: var(--gold); } .btn--ghost { border-color: var(--rule-strong); color: var(--fg); background: transparent; } .btn--ghost:hover { border-color: var(--gold); color: var(--gold); } .on-bone .btn--ghost { border-color: rgba(16,21,16,.25); color: var(--ink); } .on-bone .btn--ghost:hover { border-color: var(--forest); background: var(--forest); color: var(--bone); } .on-bone .btn--solid { background: var(--forest); color: var(--bone); } .on-bone .btn--solid:hover { background: var(--ink); } .btn--sm { padding: .6rem 1.05rem; font-size: var(--t-xs); } .btn--lg { padding: 1.15rem 2.1rem; font-size: 1rem; } .btn--block { width: 100%; } .btn--gofood { background: #00AA13; color: #fff; } .btn--gofood:hover { background: #018F10; } .btn--grab { background: #00B14F; color: #fff; } .btn--grab:hover { background: #00963F; } /* Text link with arrow */ .tlink { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .17em; text-transform: uppercase; color: var(--gold); padding-bottom: .35rem; border-bottom: 1px solid rgba(237,182,90,.35); transition: border-color .25s var(--ease), gap .25s var(--ease); } .tlink:hover { border-color: var(--gold); gap: .95rem; } .tlink svg { width: 13px; height: 13px; } .on-bone .tlink { color: var(--red); border-color: rgba(151,31,31,.3); } .on-bone .tlink:hover { border-color: var(--red); } /* -------------------------------------------------------------------------- 9. HERO -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: var(--forest-deep); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; } .hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,37,15,.72) 0%, rgba(22,37,15,.32) 42%, rgba(22,37,15,.95) 100%), radial-gradient(120% 85% at 18% 30%, rgba(22,37,15,.15) 0%, rgba(22,37,15,.9) 100%); } .hero__in { position: relative; z-index: 1; padding-block: clamp(4.5rem, 12vw, 9rem) clamp(3rem, 7vw, 5.5rem); min-height: min(92vh, 900px); display: flex; flex-direction: column; justify-content: flex-end; } .hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); } .hero__eyebrow .pip { width: 22px; height: 1px; background: var(--gold); } .hero__title { margin-bottom: var(--s4); } .hero__title .l1, .hero__title .l2 { display: block; } .hero__title .l2 { color: var(--gold); } .hero__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: end; padding-top: var(--s4); border-top: 1px solid var(--rule); } @media (max-width: 860px) { .hero__foot { grid-template-columns: 1fr; } } .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; } /* Stat strip */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); } /* Four columns need ~1000px before the labels stop wrapping; below that two columns read better than four cramped ones. */ @media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* Each cell carries its divider on the right, so the NEXT cell needs matching left padding or its number sits flush against that line. The padding has to be judged against the EMPTY space on the other side of the rule, not on its own. The content is left-aligned in a wide cell, so a fixed 24px left a 1:5.8 imbalance (24px before the rule, 139px after it) and still read as touching. Scaling the inset with the viewport keeps that ratio near 1:2.5 at every width. Only the first cell of each row goes flush-left, to stay aligned with the text column above. */ .stat { padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.25rem, 3vw, 3.25rem); border-right: 1px solid var(--rule); } .stat:first-child { padding-left: 0; } .stat:last-child { border-right: 0; padding-right: 0; } @media (max-width: 1000px) { .stat:nth-child(2n) { border-right: 0; padding-right: 0; } .stat:nth-child(2n+1) { padding-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--rule); } } @media (max-width: 560px) { .stat { padding: var(--s2); } .stat__n { font-size: 1.75rem; } } .stat__n { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; } .stat__l { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); margin-top: .6rem; } /* -------------------------------------------------------------------------- 10. MARQUEE -------------------------------------------------------------------------- */ .marquee { overflow: hidden; border-block: 1px solid var(--rule); background: var(--forest-deep); padding-block: .95rem; --marq-speed: 42s; } .marquee__track { display: flex; width: max-content; animation: marq var(--marq-speed) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marq { to { transform: translateX(-50%); } } .marquee__item { display: inline-flex; align-items: center; gap: 1.1rem; padding-inline: 1.4rem; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .19em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; } .marquee__item b { color: var(--gold); font-weight: 500; } .marquee__item::after { content: ''; width: 5px; height: 5px; background: var(--rule-strong); border-radius: 50%; } /* -------------------------------------------------------------------------- 11. FEATURE / SPLIT BLOCKS -------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } @media (max-width: 940px) { .split { grid-template-columns: 1fr; } } .split__media { position: relative; min-height: 320px; overflow: hidden; } .split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .split__body { padding: clamp(2rem, 5vw, var(--s7)) clamp(1.5rem, 5vw, var(--s6)); display: flex; flex-direction: column; justify-content: center; } .split--rev .split__media { order: 2; } @media (max-width: 940px) { .split--rev .split__media { order: 0; } .split__media { min-height: 56vw; } } /* -------------------------------------------------------------------------- 12. CARDS -------------------------------------------------------------------------- */ .cards { display: grid; gap: var(--col-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .card { display: flex; flex-direction: column; border: 1px solid var(--rule); background: rgba(244,241,234,.026); transition: border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--ease); position: relative; overflow: hidden; } a.card:hover, .card:hover { border-color: var(--rule-strong); background: rgba(244,241,234,.05); } a.card:hover { transform: translateY(-3px); } .card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--forest-deep); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } a.card:hover .card__media img { transform: scale(1.045); } .card__body { padding: var(--s3); display: flex; flex-direction: column; gap: .75rem; flex: 1; } .card__title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.028em; line-height: 1.15; } .card__meta { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .card--tag { position: absolute; top: var(--s2); left: var(--s2); z-index: 2; } .tag { display: inline-block; padding: .35rem .7rem; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase; background: var(--gold); color: var(--forest-deep); font-weight: 600; } .tag--red { background: var(--red); color: var(--bone); } .tag--outline { background: transparent; border: 1px solid var(--rule-strong); color: var(--fg-mute); } .on-bone .tag--outline { border-color: rgba(16,21,16,.22); color: rgba(16,21,16,.6); } /* -------------------------------------------------------------------------- 13. MENU SYSTEM -------------------------------------------------------------------------- */ .menu-nav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(22,37,15,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--rule); } .menu-nav__in { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; } .menu-nav__in::-webkit-scrollbar { display: none; } .menu-nav a { flex: none; padding: 1.05rem 1.15rem; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .22s var(--ease), border-color .22s var(--ease); } .menu-nav a:hover { color: var(--fg); } .menu-nav a.is-active { color: var(--gold); border-bottom-color: var(--gold); } .mgroup { padding-block: clamp(2.5rem, 6vw, var(--s7)); border-top: 1px solid var(--rule); } .mgroup:first-of-type { border-top: 0; } .mgroup__head { margin-bottom: var(--s5); } .mgroup__title { font-size: var(--t-d2); font-weight: 800; text-transform: uppercase; letter-spacing: -.042em; line-height: .95; } .mgroup__note { margin-top: var(--s2); } .mlist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); } @media (max-width: 880px) { .mlist { grid-template-columns: 1fr; } } .mlist--one { grid-template-columns: 1fr; } .mitem { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .mitem__name { font-size: 1.02rem; font-weight: 650; letter-spacing: -.022em; line-height: 1.25; } .mitem__price { font-family: var(--mono); font-size: .875rem; font-weight: 500; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; } .mitem__desc { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--fg-mute); line-height: 1.5; max-width: 62ch; } .mitem__badge { display: inline-block; margin-left: .5rem; vertical-align: middle; } /* Two-price rows (glass / bottle) */ .mitem--dual { grid-template-columns: minmax(0, 1fr) auto auto; } .mitem--dual .mitem__price + .mitem__price { min-width: 5.5rem; text-align: right; } .mprice-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: .25rem; } .mprice-head span:not(:first-child) { min-width: 5.5rem; text-align: right; } /* Two 88px price columns plus gaps leave too little for the brand name on a narrow phone, so the price columns narrow with the screen. */ @media (max-width: 560px) { .mitem--dual, .mprice-head { gap: .3rem .9rem; } .mitem--dual .mitem__price + .mitem__price, .mprice-head span:not(:first-child) { min-width: 4.1rem; } } /* Deal panel */ .deal { border: 1px solid var(--gold); padding: clamp(1.5rem, 3.5vw, var(--s5)); background: linear-gradient(180deg, rgba(237,182,90,.09), rgba(237,182,90,.02)); } .deal__price { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; color: var(--gold); line-height: 1; } .deal__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .deal__row > div { min-width: 0; } /* -------------------------------------------------------------------------- 14. FIXTURE / SPORT TABLE -------------------------------------------------------------------------- */ .fixtures { border-top: 1px solid var(--rule-strong); } .fixture { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s3); padding: 1.35rem 0; border-bottom: 1px solid var(--rule); align-items: center; } @media (max-width: 720px) { .fixture { grid-template-columns: 1fr; gap: .55rem; padding: 1.1rem 0; } } .fixture__when { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; color: var(--gold); text-transform: uppercase; } .fixture__what { font-size: 1.05rem; font-weight: 650; letter-spacing: -.024em; } .fixture__what small { display: block; font-size: var(--t-sm); font-weight: 400; color: var(--fg-mute); margin-top: .2rem; letter-spacing: 0; } /* Sport chip row */ .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { padding: .5rem .9rem; border: 1px solid var(--rule); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); transition: all .22s var(--ease); } .chip:hover, .chip.is-on { border-color: var(--gold); color: var(--gold); } /* -------------------------------------------------------------------------- 15. GALLERY -------------------------------------------------------------------------- */ .gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); } @media (max-width: 900px) { .gal { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 560px) { .gal { grid-template-columns: repeat(2, 1fr); } } .gal figure { position: relative; overflow: hidden; background: var(--forest-deep); margin: 0; aspect-ratio: 3 / 2; } .gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .4s var(--ease); } .gal button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .gal button:hover img { transform: scale(1.04); } .gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s3) var(--s2) var(--s2); background: linear-gradient(180deg, transparent, rgba(22,37,15,.88)); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase; color: var(--bone); opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; } .gal figure:hover figcaption { opacity: 1; transform: translateY(0); } /* Lightbox */ .lb { position: fixed; inset: 0; z-index: 300; background: rgba(16,21,16,.96); display: flex; align-items: center; justify-content: center; padding: var(--s3); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .lb[data-open="true"] { opacity: 1; visibility: visible; } .lb img { max-width: 94vw; max-height: 86vh; object-fit: contain; } .lb__cap { position: absolute; bottom: var(--s3); left: 0; right: 0; text-align: center; } .lb__btn { position: absolute; background: none; border: 1px solid var(--rule-strong); color: var(--fg); width: 48px; height: 48px; cursor: pointer; display: grid; place-items: center; transition: border-color .2s, background .2s; } .lb__btn:hover { border-color: var(--gold); background: rgba(237,182,90,.12); } .lb__close { top: var(--s3); right: var(--s3); } .lb__prev { left: var(--s3); top: 50%; transform: translateY(-50%); } .lb__next { right: var(--s3); top: 50%; transform: translateY(-50%); } .lb__btn svg { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- 16. ACCORDION / FAQ -------------------------------------------------------------------------- */ .acc { border-top: 1px solid var(--rule); } .acc details { border-bottom: 1px solid var(--rule); } .acc summary { list-style: none; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0; font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 650; letter-spacing: -.024em; position: relative; transition: color .22s var(--ease); } .acc summary::-webkit-details-marker { display: none; } .acc summary:hover { color: var(--gold); } .acc summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 13px; height: 13px; background: linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 13px no-repeat; transform: translateY(-50%) rotate(0deg); transition: transform .35s var(--ease); } .acc details[open] summary::after { background: linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat; transform: translateY(-50%) rotate(180deg); } .acc__body { padding: 0 3rem 1.6rem 0; color: var(--fg-mute); max-width: 68ch; } .acc__body p + p { margin-top: .8rem; } .on-bone .acc, .on-bone .acc details { border-color: rgba(16,21,16,.14); } .on-bone .acc__body { color: rgba(16,21,16,.68); } /* -------------------------------------------------------------------------- 17. FORMS -------------------------------------------------------------------------- */ .field { display: grid; gap: .55rem; margin-bottom: var(--s3); } .field label { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); } .field input, .field select, .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); padding: .8rem 0; font-size: 1rem; color: var(--fg); transition: border-color .25s var(--ease); border-radius: 0; -webkit-appearance: none; appearance: none; } .field select { background-image: linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position: calc(100% - 14px) center, calc(100% - 8px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2rem; } .field select option { background: var(--forest-deep); color: var(--fg); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); } .field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); } .field textarea { resize: vertical; min-height: 110px; } .field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); margin-bottom: var(--s3); } .field--2 > .field { margin-bottom: 0; } @media (max-width: 620px) { .field--2 { grid-template-columns: 1fr; gap: var(--s3); } } /* -------------------------------------------------------------------------- 18. INFO LISTS -------------------------------------------------------------------------- */ .dl { border-top: 1px solid var(--rule); } /* minmax(0,…) so the label column can give way instead of forcing the value column below its content width — the .dl blocks sit in third-width columns on the contact page and would otherwise squeeze between 620 and 760px. */ .dl__row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: var(--s3); padding: 1.05rem 0; border-bottom: 1px solid var(--rule); } @media (max-width: 760px) { .dl__row { grid-template-columns: 1fr; gap: .3rem; } } .dl__row dt { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); padding-top: .22rem; } .dl__row dd { font-size: var(--t-sm); line-height: 1.55; } .on-bone .dl, .on-bone .dl__row { border-color: rgba(16,21,16,.14); } /* -------------------------------------------------------------------------- 19. PULL QUOTE -------------------------------------------------------------------------- */ .pull { font-size: clamp(1.5rem, 3.6vw, 2.8rem); font-weight: 700; line-height: 1.14; letter-spacing: -.036em; text-wrap: balance; max-width: 22ch; } .pull__by { margin-top: var(--s3); } /* -------------------------------------------------------------------------- 20. FOOTER -------------------------------------------------------------------------- */ .footer { background: var(--forest-deep); border-top: 1px solid var(--rule); padding-top: clamp(3rem, 7vw, var(--s7)); } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s5) var(--col-gap); padding-bottom: var(--s6); } @media (max-width: 1000px) { .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer__top { grid-template-columns: 1fr; } } .footer h3 { margin-bottom: var(--s3); } .footer__links { display: grid; gap: .7rem; } .footer__links a { font-size: var(--t-sm); color: var(--fg-mute); transition: color .2s var(--ease); width: fit-content; } .footer__links a:hover { color: var(--gold); } .footer__stamp { width: 108px; opacity: .9; margin-bottom: var(--s3); } .footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; align-items: center; padding-block: var(--s3); border-top: 1px solid var(--rule); } .footer__wordmark { font-size: clamp(2.2rem, 8.6vw, 9.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.055em; line-height: .82; color: rgba(244,241,234,.055); padding-bottom: var(--s3); user-select: none; white-space: nowrap; overflow: hidden; } /* -------------------------------------------------------------------------- 20B. SOCIAL ICON ROW -------------------------------------------------------------------------- */ .socials { display: flex; flex-wrap: wrap; gap: .5rem; } .socials a { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--rule); color: var(--fg-mute); transition: border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease); } .socials a svg { width: 17px; height: 17px; } .socials a:hover { border-color: var(--gold); color: var(--gold); background: rgba(237,182,90,.08); } .socials--lg a { width: 48px; height: 48px; } .socials--lg a svg { width: 19px; height: 19px; } .on-bone .socials a:hover { background: rgba(143,98,8,.08); } /* Labelled variant — icon + platform name, used in the contact page */ .social-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: .5rem; } .social-list a { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--rule); color: var(--fg-mute); font-size: var(--t-sm); transition: border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease); } .social-list a svg { width: 18px; height: 18px; flex: none; } .social-list a b { font-weight: 600; color: var(--fg); } .social-list a:hover { border-color: var(--gold); color: var(--gold); background: rgba(237,182,90,.06); } .social-list a:hover b { color: var(--gold); } .on-bone .social-list a:hover { background: rgba(143,98,8,.06); } /* Delivery platform variant (GoFood / GrabFood) */ .social-list a.dv-gofood svg { color: #00AA13; } .social-list a.dv-grab svg { color: #00B14F; } .social-list a.dv-gofood:hover, .social-list a.dv-gofood:hover b { border-color: #00AA13; color: #00AA13; background: rgba(0,170,19,.06); } .social-list a.dv-grab:hover, .social-list a.dv-grab:hover b { border-color: #00B14F; color: #00B14F; background: rgba(0,177,79,.06); } /* -------------------------------------------------------------------------- 21. FLOATING WHATSAPP -------------------------------------------------------------------------- */ .wa-float { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90; display: inline-flex; align-items: center; gap: .65rem; background: var(--gold); color: var(--forest-deep); padding: .85rem 1.2rem; font-size: var(--t-sm); font-weight: 700; box-shadow: 0 8px 32px rgba(0,0,0,.36); transition: background .25s var(--ease), transform .25s var(--ease); } .wa-float:hover { background: var(--amber); transform: translateY(-2px); } .wa-float svg { width: 19px; height: 19px; } @media (max-width: 560px) { .wa-float span { display: none; } .wa-float { padding: .95rem; border-radius: 50%; } } /* -------------------------------------------------------------------------- 22. BREADCRUMB -------------------------------------------------------------------------- */ .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding-block: var(--s3); } .crumb a { color: var(--fg-mute); transition: color .2s; } .crumb a:hover { color: var(--gold); } .crumb li { display: flex; align-items: center; gap: .55rem; } .crumb li + li::before { content: '/'; color: var(--fg-faint); } /* Page header */ .phead { padding-block: clamp(2.5rem, 6vw, var(--s6)) clamp(2rem, 5vw, var(--s5)); border-bottom: 1px solid var(--rule); } .phead__title { margin-block: var(--s3) var(--s3); } /* -------------------------------------------------------------------------- 23. REVEAL ANIMATION -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; } [data-reveal-delay="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 24. UTILITIES -------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .stack > * + * { margin-top: var(--s2); } .stack-lg > * + * { margin-top: var(--s4); } .flow > * + * { margin-top: 1em; } .mt1{margin-top:var(--s1)}.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}.mt6{margin-top:var(--s6)} .mb2{margin-bottom:var(--s2)}.mb3{margin-bottom:var(--s3)}.mb4{margin-bottom:var(--s4)}.mb5{margin-bottom:var(--s5)} .flex{display:flex}.between{justify-content:space-between}.items-end{align-items:flex-end} .items-center{align-items:center}.wrapf{flex-wrap:wrap}.gap2{gap:var(--s2)}.gap3{gap:var(--s3)} .tr{text-align:right}.tc{text-align:center} .hide-sm{display:initial} @media (max-width: 700px){.hide-sm{display:none}} /* Print */ @media print { .header, .ribbon, .footer, .wa-float, .marquee, .menu-nav, .drawer, .burger { display: none !important; } body { background: #fff; color: #000; } .mitem__price, .gold { color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } }