/* * Soda — design layer. * Brand book: green #004D2D · cream #FEFAD9 · accent red #BC3F2F. * Type: Archivo Expanded Black Italic (display, stands in for Pragmatica), * Qanelas (text and headings on the homepage), Quicksand (descriptor). * All fonts self-hosted (OFL), latin subset, font-display: swap. * Mobile-first: base styles are for phones; min-width queries add layout. */ /* Fonts ----------------------------------------------------------------- */ @font-face { font-family: "Archivo Expanded"; src: url(../fonts/archivo-expanded-black-italic.woff2) format("woff2"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo Expanded"; src: url(../fonts/archivo-expanded-black.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* Qanelas (licensed by SODA) — text font; Latin subset. */ @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-semibold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-regular-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-extrabold.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-black.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-bold-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-black-italic.woff2) format("woff2"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "Caveat"; src: url(../fonts/caveat-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Quicksand"; src: url(../fonts/quicksand-variable.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* Cyrillic (Russian partner page): Qanelas; the display font has no Cyrillic, so Qanelas Black stands in for it */ @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-regular-cyr.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-medium-cyr.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-semibold-cyr.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-bold-cyr.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-regular-italic-cyr.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-extrabold-cyr.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-black-cyr.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-bold-italic-cyr.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Qanelas"; src: url(../fonts/qanelas-black-italic-cyr.woff2) format("woff2"); font-weight: 900; font-style: italic; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Archivo Expanded"; src: url(../fonts/qanelas-black-italic-cyr.woff2) format("woff2"); font-weight: 900; font-style: italic; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Archivo Expanded"; src: url(../fonts/qanelas-black-cyr.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Tokens ---------------------------------------------------------------- */ :root { --green: #004d2d; --green-deep: #003820; --cream: #fefad9; --red: #bc3f2f; --paper: #fffdf4; --ink: #10281c; --muted: #4c5e53; --line: rgb(0 77 45 / .18); --font-display: "Archivo Expanded", "Arial Black", system-ui, sans-serif; --font-serif: "Qanelas", system-ui, -apple-system, "Segoe UI", sans-serif; /* the old serif (Brygada) is no longer used */ --font-body: "Qanelas", system-ui, -apple-system, "Segoe UI", sans-serif; --font-tag: "Quicksand", var(--font-body); --color-text: var(--ink); --color-muted: var(--muted); --color-bg: var(--paper); --color-surface: #f3efd6; --color-line: var(--line); --color-overlay: rgb(0 30 18 / .88); --color-focus: var(--red); --radius: 22px; --radius-sm: 14px; --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: clamp(4rem, 9vw, 7.5rem); --container: 84rem; --container-narrow: 46rem; --gutter: clamp(1rem, 4vw, 2.5rem); --header-h: 4rem; } /* Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 0; } #about, #contact, #spots, #gallery { scroll-margin-top: 0; } /* the header scrolls away (not sticky): sections land at the very top */ #about:focus, #contact:focus, #spots:focus { outline: none; } html.has-modal { overflow: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, video, iframe { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { line-height: 1.1; margin: 0 0 var(--space-2); color: var(--green); } h3 { font-family: var(--font-serif); font-weight: 700; } p, ul, ol, table, address, figure { margin: 0 0 var(--space-2); } address { font-style: normal; } a { color: inherit; text-underline-offset: .18em; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; } ul[role="list"] { list-style: none; padding: 0; } .icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; } .icon--down { transform: rotate(90deg); } .visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-2); top: -10rem; z-index: 200; padding: var(--space-1) var(--space-2); background: var(--cream); color: var(--green); border-radius: 999px; } .skip-link:focus { top: var(--space-2); } .site-main:focus { outline: none; } /* Layout & type ----------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: 100rem; } .section { padding-block: var(--space-5); } .section__title { font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -.01em; margin-bottom: var(--space-3); } .section__intro { color: var(--color-muted); max-width: 40rem; } .section__intro--center { margin-inline: auto; text-align: center; } .section__more { margin-top: var(--space-4); text-align: center; } .prose > * + * { margin-top: var(--space-2); } .display { font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 5.75rem); line-height: .92; letter-spacing: -.015em; color: var(--green); margin-bottom: var(--space-4); } .display--center { text-align: center; } .display--light { color: var(--cream); } .button { display: inline-flex; align-items: center; gap: .6em; min-height: 2.9rem; padding: .7em 1.5em; border: 1.5px solid currentColor; border-radius: 999px; text-decoration: none; background: none; color: inherit; font: 500 1rem/1.2 var(--font-body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } .button:hover { background: var(--green); border-color: var(--green); color: var(--cream); } .button--pill { color: var(--green); } .button--primary, .button--accent { background: var(--red); border-color: var(--red); color: var(--cream); } .button--primary:hover, .button--accent:hover { background: var(--cream); border-color: var(--cream); color: var(--green); } .button .icon { transition: transform .2s; } .button:hover .icon { transform: translateX(3px); } /* Header & nav ---------------------------------------------------------- */ /* Solid light bar; on desktop the menu is split around a centred logo. */ .site-header { position: relative; z-index: 20; color: var(--ink); background: #fff; } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-2); min-height: var(--header-h); } .site-header__brand { display: block; line-height: 0; color: #000; } /* black-and-white logo in the header only */ .site-header__logo { width: 5.75rem; height: auto; aspect-ratio: 1038 / 341; } .site-header__logo.site-header__logo--img { width: auto; height: 1.9rem; max-width: 10rem; aspect-ratio: auto; object-fit: contain; filter: grayscale(1) brightness(0); } .nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; } .nav__list a { font-weight: 500; font-size: .98rem; text-decoration: none; padding-block: .35rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .25s; } .nav__list a:hover, .nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a { background-size: 100% 1.5px; } .site-header .nav__list a { font-weight: 400; font-size: 1rem; letter-spacing: -.005em; } .nav-toggle { display: none; align-items: center; gap: .6rem; font: 500 1rem var(--font-body); color: inherit; background: none; border: 0; padding: .5rem 0; min-height: 2.75rem; cursor: pointer; } .nav-toggle__bars, .nav-toggle__bars::before { display: block; width: 1.5rem; height: 1.5px; background: currentColor; position: relative; transition: transform .2s; } .nav-toggle__bars::before { content: ""; position: absolute; top: 6px; } .nav-toggle__dots { display: none; } .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* for screen readers only */ .nav-toggle { min-width: 2.75rem; justify-content: center; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: translateY(3px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); } @media (max-width: 47.99em) { .nav--split { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding-bottom: var(--space-1); } .site-header__brand { display: flex; align-items: center; min-height: var(--header-h); } .nav-toggle { min-height: var(--header-h); } .js .nav-toggle { display: inline-flex; } .js .nav--primary { flex-basis: 100%; } .js .nav--primary:not(.is-open) { display: none; } .js .nav--primary.is-open { flex-direction: column; gap: .25rem; background: var(--green); color: var(--cream); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); } .js .nav--primary .nav__list { flex-direction: column; gap: .25rem; } .js .nav--primary .nav__list a { font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 1.35rem; } } @media (min-width: 48em) { .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: clamp(1.5rem, 3.5vw, 3rem); } .site-header__brand { grid-column: 2; grid-row: 1; } .site-header__logo { width: 6.25rem; } .site-header__logo.site-header__logo--img { width: auto; height: 2.05rem; max-width: 11rem; } .nav--split { display: contents; } .nav__list--start { grid-column: 1; grid-row: 1; justify-content: flex-end; } .nav__list--end { grid-column: 3; grid-row: 1; justify-content: flex-start; } .site-header .nav__list { flex-wrap: nowrap; gap: clamp(1rem, 2.2vw, 2rem); white-space: nowrap; } } /* Hero (home) ----------------------------------------------------------- */ .hero { position: relative; display: grid; min-height: max(34rem, calc(100svh - var(--header-h))); color: var(--cream); background: var(--green-deep); isolation: isolate; } .hero__media, .hero__content { grid-area: 1 / 1; } .hero__media { position: relative; overflow: hidden; z-index: -1; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / .25) 40%, rgb(0 0 0 / .55) 100%); } .hero__poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-video { opacity: 0; transition: opacity .8s; } .hero-video.is-playing { opacity: 1; } .hero__content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: var(--space-4); } .hero__title { margin: 0; color: inherit; line-height: 0; } .hero__logo { width: clamp(7.5rem, 22vw, 17rem); height: auto; aspect-ratio: 1038 / 341; filter: drop-shadow(0 2px 18px rgb(0 0 0 / .25)); } .hero__logo--img { aspect-ratio: auto; width: clamp(8rem, 24vw, 18.5rem); height: auto; } .hero__tagline { font-family: var(--font-tag); font-weight: 500; font-size: clamp(.95rem, 1.55vw, 1.3rem); letter-spacing: .02em; margin: var(--space-1) 0 var(--space-3); } .hero__spots ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; padding: 0; list-style: none; } .spot-button { display: inline-flex; align-items: center; justify-content: center; min-width: 6.5rem; min-height: 2.75rem; padding: .5rem 1.25rem; border-radius: 999px; background: var(--red); color: var(--cream); font-family: var(--font-tag); font-weight: 600; font-size: 1rem; letter-spacing: .01em; line-height: 1.2; text-decoration: none; transition: background-color .2s, transform .2s; } .spot-button:hover { transform: translateY(-2px); background: #a8352a; } .hero__cta { position: absolute; left: 50%; bottom: clamp(1.5rem, 5vh, 2.75rem); margin: 0; transform: translateX(-50%); white-space: nowrap; } .hero__explore { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: clamp(.85rem, 1.3vw, 1rem); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--cream); padding: .4rem .2rem; } .hero__explore .icon { transition: transform .25s; } .hero__explore:hover .icon { transform: rotate(90deg) translateX(3px); } @media (min-width: 48em) { .hero__spots ul { gap: .85rem; } .spot-button { min-width: 8rem; padding-inline: 1.6rem; font-size: 1.05rem; } } /* Home: Spots — text left, tall photo tiles right ------------------------- */ .home-spots__inner { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; } .home-spots__text { display: grid; gap: 1.1rem; justify-items: start; max-width: 30rem; } .home-spots__title { margin: 0; text-wrap: balance; } .home-spots__intro { margin: 0; color: var(--ink); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.55; } .home-spots__more { margin: .6rem 0 0; } .home-spots__all { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; min-height: 3.4rem; padding: .5rem 1.6rem .5rem 1.8rem; border-radius: 999px; background: var(--red); color: var(--cream); font-weight: 600; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color .2s, transform .2s; } .home-spots__all:hover { background: #a8352a; transform: translateY(-2px); } .home-spots__cards[role="list"] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12.5rem, 62%); gap: .8rem; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .25rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; } .home-spots__cards::-webkit-scrollbar { display: none; } .spot-tile { scroll-snap-align: start; min-width: 0; } .spot-tile__link { position: relative; display: block; aspect-ratio: 11 / 20; overflow: hidden; border-radius: 1rem; background: var(--green); color: #fff; text-decoration: none; isolation: isolate; } .spot-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / .35) 70%, rgb(0 0 0 / .72) 100%); } .spot-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .spot-tile__link:hover .spot-tile__img { transform: scale(1.05); } .spot-tile__name { position: absolute; z-index: 1; left: clamp(.9rem, 1.6vw, 1.1rem); right: 3.6rem; bottom: clamp(.9rem, 1.6vw, 1.1rem); font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.05; text-shadow: 0 1px 12px rgb(0 0 0 / .35); } .spot-tile__arrow { position: absolute; z-index: 1; right: clamp(.8rem, 1.4vw, 1rem); bottom: clamp(.8rem, 1.4vw, 1rem); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1.5px solid rgb(255 255 255 / .9); border-radius: 50%; transition: background-color .2s, color .2s; } .spot-tile__arrow .icon { width: 1.05rem; height: 1.05rem; } .spot-tile__link:hover .spot-tile__arrow { background: var(--red); border-color: var(--red); } .spot-tile__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; } @media (min-width: 48em) { .home-spots__cards[role="list"] { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; } /* 1–2 Spots: as many columns; 4 Spots: one row of four; 5+ wrap in rows of three. */ .home-spots__cards[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 20rem; } .home-spots__cards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-spots__cards[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 64em) { .home-spots__inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 4.5rem); } } /* Spots cards ------------------------------------------------------------- */ .cards { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin: 0; } .card__inner { position: relative; } .card__frame { padding: .55rem; border: 1px solid var(--line); border-radius: calc(var(--radius) + .55rem); margin-bottom: var(--space-2); transition: border-color .25s; } .card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--color-surface); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .card__inner:hover .card__media img { transform: scale(1.04); } .card__inner:hover .card__frame { border-color: var(--green); } .card__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: .2rem; } .card__link { text-decoration: none; } .card__link::after { content: ""; position: absolute; inset: 0; } /* whole card clickable; one link */ .card__link:focus-visible { outline: none; } .card__inner:has(.card__link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius); } .card__area { font-family: var(--font-tag); font-weight: 500; color: var(--muted); margin-bottom: .6rem; } .card__cta { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--red); } /* Brand ------------------------------------------------------------------- */ .section--brand { overflow: hidden; } .brand { display: grid; gap: var(--space-5); align-items: center; } .brand__text .display { font-size: clamp(2.2rem, 6vw, 4.6rem); } .brand__copy { font-size: 1.15rem; max-width: 36rem; } .brand__copy p:first-child { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.35; color: var(--green); } .values { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--space-3) 0 var(--space-4); } .values li { font-family: var(--font-tag); font-weight: 600; font-size: .95rem; padding: .35rem .95rem; border-radius: 999px; background: var(--cream); color: var(--green); } .brand__collage { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); align-items: start; padding: 1rem 0 2rem; } .brand__collage img:not(.brand__eye) { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; box-shadow: 0 24px 50px rgb(0 40 20 / .18); } .brand__collage--1 img:not(.brand__eye) { grid-column: 1 / -1; transform: rotate(-2.5deg); } .brand__collage--2 img:nth-child(1) { grid-column: 1 / 5; grid-row: 1; transform: rotate(-4deg); position: relative; z-index: 2; } /* photo 1 in front */ .brand__collage--2 img:nth-child(2) { grid-column: 3 / 7; grid-row: 1; margin-top: 30%; transform: rotate(5deg); position: relative; z-index: 1; } /* photo 2 behind */ .brand__eye { position: absolute; z-index: 2; width: clamp(4.5rem, 9vw, 7rem); height: auto; left: -.5rem; bottom: 8%; transform: rotate(-12deg); } @media (min-width: 56em) { .brand { grid-template-columns: 1fr 1.05fr; } } /* Masonry gallery (home) ------------------------------------------------- */ .section--gallery { background: var(--cream); } .masonry { columns: 2; column-gap: .75rem; margin: 0; } .masonry__item { break-inside: avoid; margin-bottom: .75rem; } .masonry a { display: block; border-radius: var(--radius); overflow: hidden; } .masonry img { width: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .masonry__item:nth-child(4n+2) img { aspect-ratio: 4 / 5; } .masonry__item:nth-child(4n+3) img { aspect-ratio: 2 / 3; } .masonry__item:nth-child(5n) img { aspect-ratio: 1; } .masonry a:hover img { transform: scale(1.035); } @media (max-width: 39.99em) { .masonry__item:nth-child(n+11) { display: none; } } /* 10 photos on phones; hidden ones are never downloaded (lazy) */ @media (min-width: 40em) { .masonry { columns: 3; column-gap: 1rem; } .masonry__item { margin-bottom: 1rem; } } @media (min-width: 64em) { .masonry { columns: 5; } } /* Franchise -------------------------------------------------------------- */ .section--franchise { background: #fff; overflow: hidden; } .partner__inner { display: grid; gap: clamp(2.5rem, 6vw, 3.5rem); align-items: center; } .partner__text { position: relative; display: grid; gap: 1.1rem; justify-items: start; max-width: 30rem; } .partner__title { margin: 0; font-size: clamp(2rem, 4.6vw, 3.6rem); text-wrap: balance; } .partner__lead { margin: 0; color: var(--ink); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.55; } .partner__cta { margin: .6rem 0 0; } .partner__button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; min-height: 3.4rem; padding: .5rem 1.6rem .5rem 1.8rem; border: 1.5px solid var(--green); border-radius: 999px; color: var(--green); font-weight: 600; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; } .partner__button:hover { background: var(--red); border-color: var(--red); color: var(--cream); } .partner__button .icon { width: 1.1rem; height: 1.1rem; transition: transform .2s; } .partner__button:hover .icon { transform: translateX(3px); } .partner__collage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); gap: clamp(.6rem, 1.5vw, 1rem); align-items: start; margin-right: calc(-1 * var(--gutter)); } .partner__photo { margin: 0; overflow: hidden; border-radius: 1rem; position: relative; } .partner__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .partner__photo--main { aspect-ratio: 4 / 3.3; } .partner__photo--side { aspect-ratio: 3 / 4.6; margin-top: -1.5rem; border-radius: 1rem 0 0 1rem; } .partner__note { position: absolute; left: -.4rem; top: 52%; z-index: 2; width: clamp(8.5rem, 16vw, 11rem); margin: 0; padding: 1.4rem 1rem 1.1rem; background: #f6c6bd; color: var(--ink); font: 500 clamp(1.2rem, 2.1vw, 1.6rem)/1.1 "Caveat", "Comic Sans MS", cursive; transform: rotate(-7deg); box-shadow: 0 10px 22px rgb(60 20 10 / .18); } .partner__tape { position: absolute; left: 50%; top: -.8rem; width: 3.4rem; height: 1.3rem; transform: translateX(-50%) rotate(-4deg); background: conic-gradient(var(--green) 25%, rgb(255 255 255 / .85) 0 50%, var(--green) 0 75%, rgb(255 255 255 / .85) 0) 0 0 / .5rem .5rem; opacity: .9; box-shadow: 0 1px 3px rgb(0 0 0 / .15); } .partner__eye { position: absolute; z-index: 3; left: clamp(3.5rem, 8vw, 5.5rem); bottom: -1.6rem; width: clamp(3.5rem, 7vw, 5.5rem); height: auto; transform: rotate(-4deg); } @media (min-width: 64em) { .partner__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: clamp(2.5rem, 5vw, 4rem); } .partner__note { left: -3.5rem; } } /* Contact block (home) --------------------------------------------------- */ .contact-block { position: relative; color: var(--ink); background: var(--cream); overflow: hidden; isolation: isolate; } .contact-block__inner { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem); align-items: start; padding-block: clamp(3rem, 7vw, 5.5rem); } .contact-block__text { display: grid; gap: 1.1rem; max-width: 34rem; } .contact-block__title { margin: 0; font-size: clamp(2rem, 4.6vw, 3.6rem); text-wrap: balance; } .contact-block__lead { margin: 0; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; color: var(--ink); max-width: 28rem; } .contact-btns[role="list"] { display: grid; gap: .75rem; margin: 0; padding: 0; } .contact-btn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; min-height: 3.6rem; padding: .5rem 1.25rem .5rem .9rem; border: 1.5px solid var(--green); border-radius: 999px; color: var(--green); background: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: border-color .2s, background-color .2s; } .contact-btn:hover { border-color: #000; background: #000; color: #fff; } .contact-btn:focus-visible { outline: 3px solid #000; outline-offset: 3px; } .contact-btn__icon { display: grid; place-items: center; width: 2rem; height: 2rem; } .contact-btn__icon .icon { width: 1.75rem; height: 1.75rem; } .contact-btn__img { width: 1.75rem; height: 1.75rem; object-fit: contain; } .contact-btn__arrow { width: 1.1rem; height: 1.1rem; transition: transform .2s; } .contact-btn:hover .contact-btn__arrow { transform: translateX(3px); } .contact-block__side { display: grid; gap: 1.5rem; } .contact-block__art { display: flex; justify-content: center; } .contact-block__bird { width: clamp(8rem, 22vw, 15rem); height: auto; pointer-events: none; } @media (min-width: 48em) { .contact-btns[role="list"] { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); } } @media (min-width: 64em) { /* Right column is as tall as the text: bird's top = title top, buttons' bottom = last text line. */ .contact-block__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; } .contact-block__side { display: flex; flex-direction: column; gap: 1.25rem; min-height: 0; margin: .1rem 0 .45rem; } /* optical: glyph tops and the last text line */ .contact-block__art { position: relative; flex: 1 1 0; min-height: 6rem; } .contact-block__art .contact-block__bird { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; } .contact-btns[role="list"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .channels { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin: 0; } .channels a { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-size: clamp(1.05rem, 1.8vw, 1.35rem); } .channels__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color .2s, color .2s; } .channels a:hover .channels__icon { background: var(--cream); color: var(--green); } .channels__icon .icon { width: 1.35rem; height: 1.35rem; } /* Spot page ------------------------------------------------------------- */ .spot-hero { position: relative; display: grid; min-height: min(80svh, 48rem); color: var(--color-bg); background: var(--color-text); } .spot-hero__media, .spot-hero__content { grid-area: 1 / 1; } .spot-hero__media { position: relative; overflow: hidden; } .spot-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .spot-hero__content { position: relative; z-index: 1; align-self: end; padding-block: var(--space-4); } .spot-hero__area { margin: 0; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; margin: 0 0 var(--space-2); font-size: .875rem; } .breadcrumbs li + li::before { content: "/"; margin-right: var(--space-1); opacity: .7; } .breadcrumbs [aria-current] { text-decoration: none; } .spot-section { padding-block: var(--space-4); } .spot-description { font-size: 1.125rem; } /* Mini gallery: 2 columns on phones, 3 on larger screens */ .mini-gallery { display: grid; gap: var(--space-1); grid-template-columns: repeat(2, 1fr); grid-auto-rows: 8rem; grid-auto-flow: dense; margin: 0; } .mini-gallery__item { grid-row: span 2; overflow: hidden; background: var(--color-surface); } .mini-gallery__item.is-portrait { grid-row: span 3; } .mini-gallery__item.is-wide { grid-column: span 2; } .mini-gallery a, .mini-gallery img, .mini-gallery video { display: block; width: 100%; height: 100%; } .mini-gallery img, .mini-gallery video { object-fit: cover; } @media (min-width: 48em) { .mini-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 10rem; } } /* The menu dialog (created by main.js; the content is the menu window below) */ .menu-dialog { border: 0; overflow-y: auto; overscroll-behavior: contain; } /* Action buttons */ .actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1); margin: 0; } .action { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .5rem 1rem; border: 1px solid var(--color-line); text-decoration: none; text-align: center; } .action:hover { border-color: currentColor; } @media (min-width: 40em) { .actions { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 64em) { .actions { display: flex; flex-wrap: wrap; } .action { min-width: 9rem; } } /* Location & hours */ .spot-location__grid { display: grid; gap: var(--space-4); } .spot-address { font-size: 1.125rem; } .spot-location__subtitle { font-size: 1rem; margin-top: var(--space-3); } .hours { border-collapse: collapse; } .hours caption { text-align: left; font-weight: 700; margin-bottom: var(--space-1); } .hours th, .hours td { text-align: left; padding: .3rem var(--space-3) .3rem 0; font-weight: 400; } .hours tr.is-today th, .hours tr.is-today td { font-weight: 700; } .hours__note { color: var(--color-muted); } @media (min-width: 48em) { .spot-location__grid { grid-template-columns: 1fr 1fr; } } /* Lightbox (created by main.js) ------------------------------------------ */ .lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: var(--space-4) var(--space-2); border: 0; background: transparent; color: #fff; } .lightbox::backdrop { background: var(--color-overlay); } .lightbox[open] { display: grid; place-items: center; } .lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: var(--space-1); justify-items: center; } .lightbox__img { max-width: 100%; max-height: calc(100svh - 7rem); width: auto; height: auto; object-fit: contain; } .lightbox__caption { font-size: .875rem; opacity: .8; } .lightbox button { position: fixed; min-width: 2.75rem; min-height: 2.75rem; font: inherit; font-size: 1.75rem; line-height: 1; color: inherit; background: rgb(0 0 0 / .4); border: 0; cursor: pointer; } .lightbox__close { top: var(--space-2); right: var(--space-2); } .lightbox__prev { left: var(--space-1); top: 50%; transform: translateY(-50%); } .lightbox__next { right: var(--space-1); top: 50%; transform: translateY(-50%); } /* Click-to-load embeds --------------------------------------------------- */ .facade { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 10rem; aspect-ratio: var(--ratio, 16 / 9); background: var(--color-surface); overflow: hidden; } .facade > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .facade__button { position: relative; z-index: 1; padding: .6em 1.2em; background: var(--color-bg); border: 1px solid currentColor; text-decoration: none; } .facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Pages ------------------------------------------------------------------ */ .page__header { padding-top: var(--space-5); } .page__image { margin-block: var(--space-3); aspect-ratio: 16 / 9; max-height: 70vh; overflow: hidden; } .page__image img { width: 100%; height: 100%; object-fit: cover; } .page__content { padding-bottom: var(--space-4); } .spot-contacts { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin: 0; } .spot-contacts__item p { margin-bottom: .25rem; } .link-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); } /* Footer ----------------------------------------------------------------- */ .checker { height: clamp(2.5rem, 6vw, 4.5rem); background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4.5rem) repeat-x; } .site-footer { background: #000; color: #fff; } .site-footer__inner { display: grid; gap: var(--space-4); padding-block: var(--space-4) calc(var(--space-4) + 3rem); } .site-footer__logo { width: 9rem; height: auto; aspect-ratio: 1038 / 341; } .site-footer__logo.site-footer__logo--img { width: auto; height: 2.95rem; max-width: 14rem; aspect-ratio: auto; object-fit: contain; } .site-footer .nav__list a { font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 1.05rem; } .site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgb(255 255 255 / .2); font-size: .875rem; opacity: .8; } .site-footer__legal p { margin: 0; } @media (min-width: 56em) { .site-footer__inner { grid-template-columns: 1fr auto 1fr; align-items: center; } .site-footer .nav--footer { justify-self: center; } } /* Fixed WhatsApp button: subtle, bottom-right, clear of iOS home indicator */ .whatsapp { position: fixed; z-index: 50; right: max(var(--space-2), env(safe-area-inset-right)); bottom: max(var(--space-2), env(safe-area-inset-bottom)); display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--red); color: var(--cream); border: 1.5px solid rgb(254 250 217 / .6); box-shadow: 0 6px 20px rgb(60 20 10 / .28); transition: transform .2s, background-color .2s; } .whatsapp:hover { transform: scale(1.06); background: #a8352a; } html.has-modal .whatsapp { display: none; } /* ====================================================================== * Spot page — Showcase layout (homepage-style hero, intro, collage, menu book) * ==================================================================== */ .hero--spot .hero__content { padding-block: var(--space-5); } .hero__actions { width: min(100%, 40rem); } .hero__actions ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; } .hero__actions .spot-button { width: 100%; min-width: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .92rem; padding-inline: .75rem; } @media (min-width: 48em) { .hero__actions ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; } .hero__actions .spot-button { font-size: 1rem; } } .spot-intro { padding-block: var(--space-5) 0; background: var(--cream); } /* one continuous band with the gallery below */ .spot-intro__text { max-width: 44rem; margin: 0 auto; text-align: center; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.6; color: var(--green); text-wrap: pretty; } .section--spot-gallery .container { max-width: 76rem; } .masonry--spot { columns: 2; } @media (max-width: 39.99em) { /* Phones: a tidy 3 × 3 grid of square photos */ .masonry--spot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; columns: auto; } .masonry--spot .masonry__item { margin: 0; } .masonry--spot .masonry__item:nth-child(n+9) { display: block; } .masonry--spot a { border-radius: .6rem; } .masonry--spot .masonry__item img { aspect-ratio: 1 !important; } } @media (min-width: 40em) { .masonry--spot { columns: 3; } } @media (min-width: 64em) { .masonry--spot { columns: 3; column-gap: 1.25rem; } .masonry--spot .masonry__item { margin-bottom: 1.25rem; } } /* The menu window stays out of the page (it opens from the Menu buttons). */ .js .spot .menu-app { display: none; } /* ====================================================================== * Menu window ("menu app", template-parts/spot/menu-app.php): a phone-like * column — logo and title, sticky category chips with search, dish cards; * a card opens the dish in a bottom sheet (options browsed inside). * ==================================================================== */ .menu-dialog--app { --ma-bg: #f7f7f1; --ma-card: #fff; --ma-line: #e2e4d7; --ma-text: #1b1d16; --ma-muted: #646859; --ma-acc: #525836; --ma-acc-bg: #eef0e3; --ma-acc-line: #525836; --ma-acc-text: #525836; --ma-soft: #f2f3ea; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; background: #ecebe8; color: var(--ma-text); scrollbar-gutter: stable; } .menu-dialog--app::backdrop { background: #ecebe8; } .menu-dialog--app .menu-panel.menu-app { max-width: 38rem; min-height: 100%; margin: 0 auto; padding: 0 0 2.5rem; background: var(--ma-bg); box-shadow: 0 0 2rem rgb(0 0 0 / .06); } .menu-app { font-family: var(--font-body); font-style: normal; color: var(--ma-text, #1d1a17); -webkit-font-smoothing: antialiased; } .menu-app h2, .menu-app h3, .menu-app p, .menu-app ul, .menu-app figure { margin: 0; } .menu-app h2, .menu-app h3 { color: var(--ma-text); } .menu-app button { font: inherit; color: inherit; } .ma-round { display: inline-grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; padding: 0; border: 1px solid var(--ma-line); border-radius: 50%; background: var(--ma-card); color: var(--ma-text); cursor: pointer; transition: background-color .2s, border-color .2s; } .ma-round .icon { width: 1.15rem; height: 1.15rem; } .ma-round:hover { border-color: var(--ma-acc-line); } .ma-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem; background: var(--ma-card); } .ma-head__logo { width: clamp(7rem, 16vw, 9.5rem); height: auto; color: var(--ma-acc); } /* Same size as the logo on the Spot cover and the site header */ .ma-head__close { background: var(--ma-acc-bg); border-color: transparent; color: var(--ma-acc); } .ma-banner { background: var(--ma-card); } .ma-banner__img { display: block; width: 100% !important; height: auto !important; max-width: 100%; } .ma-bar { position: sticky; top: 0; z-index: 4; padding: .7rem 0; background: var(--ma-card); border-bottom: 1px solid var(--ma-line); box-shadow: 0 .4rem .9rem -.6rem rgb(0 0 0 / .12); } .ma-chips { display: flex; align-items: center; gap: .45rem; padding: 0 1.1rem; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 1.1rem; } .ma-chips::-webkit-scrollbar { display: none; } .ma-chips ul { display: flex; gap: .45rem; padding: 0; list-style: none; } .ma-chip { display: block; padding: .7rem 1.1rem; border: 1px solid var(--ma-line); border-radius: 999px; background: var(--ma-card); color: var(--ma-text); font-size: .92rem; font-weight: 600; line-height: 1.1; white-space: nowrap; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; } .ma-chip:hover { border-color: var(--ma-acc-line); } .ma-chip.is-active { background: var(--ma-acc); border-color: var(--ma-acc); color: #fff; } .ma-bar__search { display: flex; align-items: center; gap: .6rem; margin: 0 1.1rem; padding: 0 0 0 .9rem; border: 1px solid var(--ma-acc-line); border-radius: 999px; background: var(--ma-card); } .ma-bar__search[hidden] { display: none; } .ma-bar__icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--ma-muted); } .ma-bar__input { flex: 1 1 auto; min-width: 0; height: 2.8rem; padding: 0; border: 0; background: none; font: 500 .95rem/1 var(--font-body); color: var(--ma-text); outline: none; } .ma-bar__input::-webkit-search-cancel-button { display: none; } .ma-bar__cancel { flex: none; height: 2.8rem; padding: 0 1rem; border: 0; border-left: 1px solid var(--ma-line); background: none; font-size: .82rem !important; font-weight: 600 !important; color: var(--ma-acc-text) !important; cursor: pointer; } .ma-bar.is-searching .ma-chips { display: none; } .ma-body { padding: 0 1.1rem; } .ma-sec { padding-top: 2.1rem; scroll-margin-top: 4.6rem; } .menu-app .ma-sec__title { margin-bottom: 1.1rem; font-size: 1.7rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-transform: none; font-family: inherit; } .menu-app .ma-sec__note { margin: -.6rem 0 1rem; font-size: .9rem; color: var(--ma-muted); } .ma-grp { padding-top: 2.1rem; scroll-margin-top: 4.6rem; } .menu-app .ma-grp__title { font-size: 1.7rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-transform: none; font-family: inherit; } .ma-sec--sub { padding-top: 1.1rem; } .menu-app .ma-sec--sub .ma-sec__title { margin-bottom: .7rem; font-size: 1.25rem; font-weight: 800; letter-spacing: 0; color: var(--ma-acc-text); } .ma-list { display: grid; gap: .9rem; padding: 0; list-style: none; } .ma-group { padding: .6rem 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ma-muted); } .ma-card { position: relative; display: grid; grid-template-columns: 7.7rem minmax(0, 1fr); min-height: 8.4rem; border: 1px solid var(--ma-line); border-radius: 1.15rem; background: var(--ma-card); overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: box-shadow .2s, transform .2s; } .ma-card:hover { box-shadow: 0 .5rem 1.2rem -.5rem rgb(0 0 0 / .18); } .ma-card:active { transform: scale(.992); } .ma-card__ph { position: relative; background: var(--ma-soft); } .ma-card__ph--empty { display: grid; place-items: center; } .ma-card__logo { width: 62%; height: auto; color: rgb(0 0 0 / .13); } .ma-card__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; } .ma-card__ph:has(.ma-card__img) { background: #fff; } .ma-card--promo .ma-card__img { object-fit: cover; } .ma-card__txt { display: grid; align-content: start; gap: .35rem; padding: .95rem 1.05rem 1rem; } .ma-card__name { font-size: 1.12rem; font-weight: 700; line-height: 1.25; font-family: inherit; text-transform: none; letter-spacing: 0; } .ma-card__hit { all: unset; cursor: pointer; } .ma-card__hit::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .ma-card__hit:focus-visible::after { outline: 2px solid var(--ma-acc-line); outline-offset: -2px; } .ma-card__desc { font-size: .9rem; line-height: 1.4; color: var(--ma-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .ma-card__opts { font-size: .9rem; color: var(--ma-muted); } .menu-app .ma-card__price { margin-top: .35rem; } .ma-card__more { position: absolute; right: .8rem; bottom: .8rem; width: 2.3rem; height: 2.3rem; color: var(--ma-acc-text); border-color: var(--ma-acc-line); } .ma-card__more .icon { width: 1rem; height: 1rem; } .ma-card--family { min-height: 7.7rem; } .ma-card--text { grid-template-columns: minmax(0, 1fr); min-height: 0; } .ma-card--text .ma-card__desc { -webkit-line-clamp: 2; } .ma-card--big { grid-template-columns: minmax(0, 1fr); } .ma-card--big .ma-card__ph { aspect-ratio: 4 / 3; } .ma-card--promo .ma-card__ph { aspect-ratio: 16 / 10; } .ma-card--big .ma-card__txt { gap: .45rem; padding: 1.15rem 1.2rem 1.2rem; } .ma-card--big .ma-card__name { font-size: 1.3rem; } .ma-card--big .ma-card__desc { -webkit-line-clamp: 2; } .ma-card__label { position: absolute; top: .8rem; left: .8rem; z-index: 2; padding: .38rem .8rem; border-radius: 999px; background: var(--ma-acc); color: #fff; font-size: .74rem; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase; } .ma-card__txt > .ma-card__label { position: static; justify-self: start; margin-bottom: .2rem; } .ma-card--promo { border: 2px solid var(--ma-acc); background: var(--ma-acc-bg); } .ma-card--promo .ma-card__txt { padding: 1.2rem 1.25rem 1.3rem; } .ma-card--promo .ma-card__name { font-size: 1.35rem; font-weight: 800; } .ma-card--promo .ma-card__desc { -webkit-line-clamp: 3; color: var(--ma-text); } .ma-price { font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--ma-acc); } .ma-price__label { font-size: .85rem; font-weight: 600; color: var(--ma-muted); } .ma-price__sep { font-weight: 400; color: var(--ma-muted); } .ma-badges { display: flex; flex-wrap: wrap; gap: .3rem; padding: .1rem 0; list-style: none; } .ma-badge { padding: .26rem .6rem; border: 1px solid var(--ma-line); border-radius: 999px; background: var(--ma-soft); font-size: .66rem; font-weight: 700; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: #4a443e; } .ma-badge--accent { background: var(--ma-acc); border-color: var(--ma-acc); color: #fff; } .ma-empty { padding: 3rem 0 1rem; text-align: center; color: var(--ma-muted); } .ma-note { padding-top: 2rem; font-size: .8rem; line-height: 1.5; color: var(--ma-muted); text-align: center; } .menu-app.is-searching .ma-sec--best { display: none; } .menu-app [data-hidden] { display: none !important; } /* Dish sheet */ .ma-sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; } .ma-sheet[hidden] { display: none; } .ma-sheet__scrim { position: absolute; inset: 0; background: rgb(20 18 16 / .42); animation: ma-fade .25s ease; } .ma-sheet__panel { position: relative; width: min(100%, 38rem); max-height: calc(100% - 1.5rem); display: flex; flex-direction: column; border-radius: 1.4rem 1.4rem 0 0; background: var(--ma-bg); overflow: hidden; animation: ma-up .32s cubic-bezier(.2, .8, .2, 1); } .ma-sheet__panel::before { content: ""; position: absolute; top: .45rem; left: 50%; z-index: 3; width: 2.4rem; height: .25rem; margin-left: -1.2rem; border-radius: 9px; background: rgb(0 0 0 / .18); } .ma-sheet__close { position: absolute; top: .9rem; right: .9rem; z-index: 3; background: rgb(60 55 50 / .72); border-color: transparent; color: #fff; } .ma-sheet__close:hover { background: rgb(40 36 33 / .9); } .ma-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1.6rem; } .ma-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .ma-track::-webkit-scrollbar { display: none; } .ma-slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; } .ma-slide__ph { position: relative; aspect-ratio: 4 / 3; background: var(--ma-soft); cursor: zoom-in; } .ma-slide__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; } .ma-slide__ph:has(.ma-slide__img) { background: #fff; } .ma-slide__zoom { position: absolute; right: .8rem; bottom: .8rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: rgb(40 36 33 / .72); color: #fff; font-size: .72rem; font-weight: 600; } .ma-slide__zoom .icon { width: .85rem; height: .85rem; } .ma-slide__txt { display: grid; gap: .5rem; padding: 1.2rem 1.2rem 0; } .ma-slide:not(:has(.ma-slide__ph)) .ma-slide__txt { padding-top: 3.8rem; } .ma-slide__name { padding-right: 1rem; font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-family: inherit; text-transform: none; } .ma-slide__desc { font-size: .98rem; line-height: 1.5; color: var(--ma-muted); } .ma-slide__price { font-size: 1.25rem; } .ma-slide__pnote { font-size: .82rem; color: var(--ma-muted); } .ma-sheet__body.has-pager { position: relative; } .ma-sheet__body { container-type: inline-size; } .ma-pager { position: absolute; top: 3.2rem; left: 0; right: 0; display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; gap: .5rem; padding: .8rem 1.2rem 0; pointer-events: none; } .ma-pager > * { pointer-events: auto; } .ma-sheet__body.has-ph .ma-pager { top: 75cqw; } .has-pager .ma-slide__txt { padding-top: 4.4rem; } .has-pager .ma-slide:not(:has(.ma-slide__ph)) .ma-slide__txt { padding-top: 7.4rem; } .ma-pager__label { display: grid; justify-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #4a443e; } .ma-pager__dots { display: flex; gap: .3rem; } .ma-pager__dots i { width: .38rem; height: .38rem; border-radius: 9px; background: #c9ccbb; transition: width .2s, background-color .2s; } .ma-pager__dots i.is-on { width: 1.1rem; background: var(--ma-acc-text); } .ma-pager .ma-round[disabled] { visibility: hidden; } .ma-pager__prev .icon { transform: scaleX(-1); } .ma-zoom { position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; padding: 1rem; background: rgb(10 10 10 / .92); cursor: zoom-out; } .ma-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; } @keyframes ma-up { from { transform: translateY(100%); } } @keyframes ma-fade { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ma-sheet__panel, .ma-sheet__scrim { animation: none; } } @media (min-width: 34em) { .ma-sheet { align-items: center; } .ma-sheet__panel { max-height: calc(100% - 3rem); border-radius: 1.4rem; } .ma-sheet__panel::before { display: none; } } /* ====================================================================== * Spot page — Showcase v2 (reference "Референс дизайн для страницы спотов") * No site header; the cover carries logo, area and a round "…" menu button. * ==================================================================== */ /* Spot pages: white instead of beige everywhere (backgrounds, menu text, footer) */ .single-spot { --cream: #fff; --paper: #fff; --color-bg: #fff; } .spot--showcase { --sp-cream: #fff; --sp-ink: #2a2119; background: var(--sp-cream); color: var(--sp-ink); } .sp-wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; } /* Cover */ .sp-hero { position: relative; display: grid; min-height: max(40rem, 100svh); color: #fff; background: #1b140e; isolation: isolate; overflow: hidden; } .sp-hero__media { position: absolute; inset: 0; z-index: -1; } .sp-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .12) 32%, rgb(0 0 0 / .35) 58%, rgb(0 0 0 / .78) 100%); } .sp-hero__poster, .sp-hero .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sp-hero__top { position: absolute; inset: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; padding-top: clamp(1.25rem, 3vw, 2rem); z-index: 2; } .sp-hero__brand { display: grid; gap: .55rem; color: #fff; text-decoration: none; } .sp-hero__logo { width: clamp(7rem, 16vw, 9.5rem); height: auto; aspect-ratio: 1038 / 341; } .sp-hero__area { font-weight: 500; font-size: clamp(.72rem, 1.4vw, .85rem); letter-spacing: .32em; text-transform: uppercase; opacity: .92; } .sp-dots { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1.5px solid rgb(255 255 255 / .85); border-radius: 50%; color: #fff; background: rgb(0 0 0 / .15); backdrop-filter: blur(6px); transition: background-color .2s; } .sp-dots:hover { background: rgb(255 255 255 / .15); } .sp-dots .icon { width: 1.4rem; height: 1.4rem; } .sp-hero__bird { position: absolute; z-index: 1; right: clamp(.5rem, 6vw, 8rem); top: clamp(5.5rem, 16vh, 10rem); width: clamp(6.5rem, 22vw, 14rem); height: auto; transform: rotate(-6deg); pointer-events: none; filter: drop-shadow(0 12px 24px rgb(0 0 0 / .35)); } .sp-hero__content { position: relative; z-index: 2; align-self: end; padding: clamp(9rem, 22vh, 12rem) 0 clamp(2rem, 5vh, 3.5rem); } .sp-hero__title { margin: 0 0 clamp(1.5rem, 4vh, 2.25rem); color: #fff; font-family: "Qanelas", var(--font-body); font-style: normal; font-weight: 700; font-size: clamp(2.7rem, 10vw, 5.75rem); line-height: .98; letter-spacing: -.025em; text-shadow: 0 2px 30px rgb(0 0 0 / .3); } .sp-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; max-width: 46rem; } .sp-cta__btn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; min-height: 3.4rem; padding: .4rem 1.1rem .4rem 1.2rem; border-radius: 999px; color: #fff; text-decoration: none; transition: transform .2s, background-color .2s, border-color .2s; } .sp-cta__btn:hover { transform: translateY(-2px); } .sp-cta__btn--menu { background: var(--red); box-shadow: 0 12px 30px rgb(0 0 0 / .25); } .sp-cta__btn--menu:hover { background: #a8352a; } .sp-cta__btn--location { border: 1.5px solid rgb(255 255 255 / .85); background: rgb(0 0 0 / .18); backdrop-filter: blur(6px); } .sp-cta__btn--location:hover { background: rgb(255 255 255 / .12); } .sp-cta__icon { width: 1.5rem; height: 1.5rem; } .sp-cta__text { display: grid; gap: .1rem; min-width: 0; } .sp-cta__label { font-weight: 700; font-size: clamp(.85rem, 2.4vw, 1rem); letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; } .sp-cta__sub { font-size: clamp(.58rem, 1.7vw, .72rem); letter-spacing: .06em; text-transform: uppercase; opacity: .9; line-height: 1.2; } .sp-cta__arrow { width: 1.2rem; height: 1.2rem; } .sp-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; max-width: 34rem; margin: clamp(1.4rem, 3.5vh, 2rem) 0 0; padding: 0; list-style: none; } .sp-link { display: grid; justify-items: center; gap: .55rem; color: #fff; text-decoration: none; } .sp-link__circle { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 1.5px solid rgb(255 255 255 / .85); border-radius: 50%; background: rgb(0 0 0 / .15); backdrop-filter: blur(6px); transition: background-color .2s, transform .2s; } .sp-link:hover .sp-link__circle { background: rgb(255 255 255 / .15); transform: translateY(-2px); } .sp-link__circle .icon { width: 1.45rem; height: 1.45rem; } .sp-link__label { font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; } @media (max-width: 26em) { .sp-cta__btn { padding-inline: .8rem .7rem; gap: .45rem; } .sp-cta__icon { width: 1.35rem; height: 1.35rem; } } /* Site menu (opened by the "…" button) */ .spot-nav { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--green); color: var(--cream); } .spot-nav:focus, .spot-nav :focus:not(:focus-visible) { outline: none; } .spot-nav::backdrop { background: rgb(0 0 0 / .5); } .spot-nav__inner { display: grid; align-content: start; gap: clamp(2rem, 8vh, 4rem); width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; padding-block: clamp(1.25rem, 3vw, 2rem); } .spot-nav__top { display: flex; align-items: center; justify-content: space-between; } .spot-nav__brand { color: var(--cream); line-height: 0; } .spot-nav__logo { width: clamp(7rem, 16vw, 9.5rem); height: auto; aspect-ratio: 1038 / 341; } .spot-nav__close { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; } .spot-nav__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; } .spot-nav__list a { font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 3.5rem); line-height: 1.05; color: var(--cream); text-decoration: none; } .spot-nav__list a:hover { color: #fff; } /* Intro */ .sp-intro { padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(1.25rem, 3vw, 2rem); } .sp-intro__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 4vw, 3rem); } .sp-intro__text { max-width: 44rem; margin: 0; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--sp-ink); } .sp-intro__sticker { width: clamp(5.5rem, 18vw, 10rem); height: auto; transform: rotate(4deg); } /* Gallery: Pinterest-style, two rows visible (4 photos on phones, 6 on larger screens), the rest scroll inside */ .sp-gallery { padding-bottom: clamp(1.5rem, 4vw, 3rem); } .sp-gallery__box { position: relative; } /* Window mode: the rest scrolls inside; no scrollbar; the page takes over at the end (no overscroll-behavior: contain). */ .sp-gallery__window { max-height: 110vw; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; border-radius: 1.1rem; } .sp-gallery__window::-webkit-scrollbar { display: none; } .sp-gallery__window.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 4.5rem), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 4.5rem), transparent); } .sp-gallery__window:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; } .sp-gallery__hint { position: absolute; left: 50%; bottom: .6rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: 0; border-radius: 50%; background: var(--green); color: var(--cream); transform: translateX(-50%); pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 6px 18px rgb(0 0 0 / .18); animation: sp-hint 1.6s ease-in-out infinite; } @keyframes sp-hint { 50% { translate: 0 4px; } } @media (prefers-reduced-motion: reduce) { .sp-gallery__hint { animation: none; } } .sp-gallery__hint .icon { width: 1.2rem; height: 1.2rem; transform: rotate(90deg); } .sp-gallery__hint.is-away { opacity: 0; transform: translate(-50%, .5rem); } .sp-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; } .sp-gallery__grid.is-packed { grid-auto-rows: 8px; align-items: start; } .sp-gallery__item { position: relative; } .sp-gallery__ph { display: block; overflow: hidden; border-radius: 1.1rem; } .sp-gallery__item img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 4; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .sp-gallery__item:nth-child(4n+2) img { aspect-ratio: 4 / 5; } .sp-gallery__item:nth-child(4n+3) img { aspect-ratio: 1; } .sp-gallery__item:nth-child(5n) img { aspect-ratio: 2 / 3; } @media (min-width: 48em) { .sp-gallery__window { max-height: 64rem; } .sp-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } } /* Opening hours · picture */ .sp-info__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(.9rem, 3vw, 2.5rem); padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 3.5vw, 2.5rem); border-top: 1px solid rgb(0 0 0 / .14); } .sp-info__hours { display: flex; align-items: center; gap: .75rem; margin: 0; color: var(--green); font-size: clamp(.9rem, 1.6vw, 1.05rem); line-height: 1.3; } .sp-info__hours strong { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; } .sp-info__clock { flex: none; width: 2.2rem; height: 2.2rem; color: var(--green); } .sp-info__eye { width: clamp(3.5rem, 9vw, 6rem); height: auto; } /* Follow Soda: dark card, text left, three photos right (reference "FOLLOW SODA") */ .sp-follow { padding-block: clamp(.5rem, 2vw, 1rem) clamp(2rem, 5vw, 3.5rem); } .sp-follow__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(.9rem, 2.2vw, 1.4rem); padding-left: clamp(1.25rem, 4vw, 2.75rem); border: 1.5px solid var(--green); border-radius: clamp(1.1rem, 2.5vw, 1.6rem); background: transparent; color: var(--sp-ink); text-decoration: none; transition: border-color .2s; } .sp-follow__card.has-pic { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.45fr); } .sp-follow__pic { width: clamp(3rem, 8vw, 5.5rem); height: auto; } .sp-follow__text { display: grid; gap: .55rem; min-width: 0; } .sp-follow__title { color: var(--green); font: 700 clamp(1.05rem, 2.6vw, 1.6rem)/1.05 "Qanelas", var(--font-body); letter-spacing: .01em; text-transform: uppercase; transition: color .2s; } .sp-follow__link { display: inline-flex; align-items: center; gap: clamp(.6rem, 2vw, 1.4rem); font-size: clamp(.8rem, 1.7vw, 1rem); color: var(--sp-ink); } .sp-follow__link .icon { flex: none; width: 1.15rem; height: 1.15rem; transition: transform .2s; } .sp-follow__card:hover .sp-follow__link .icon { transform: translateX(4px); } .sp-follow__card:hover { border-color: var(--red); } .sp-follow__card:hover .sp-follow__title { color: var(--red); } .sp-follow__card:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } .sp-follow__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.4rem, 1.2vw, .75rem); } .sp-follow__frame { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: clamp(.6rem, 1.5vw, 1rem); } .sp-follow__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .sp-follow__card:hover .sp-follow__frame img { transform: scale(1.04); } @media (max-width: 30em) { .sp-follow__card, .sp-follow__card.has-pic { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; padding-left: 1.1rem; } .sp-follow__card:not(.has-pic) .sp-follow__text { grid-column: 1 / -1; } .sp-follow__photos { grid-column: 1 / -1; } .sp-follow__text { grid-template-columns: auto auto; justify-content: space-between; align-items: center; } } /* Partner page (Open a Cafe) ------------------------------------------------ */ .partner-page { --p-gap: clamp(1.5rem, 4vw, 3.5rem); color: var(--ink); overflow-x: clip; } /* nothing may widen the page on phones */ .p-bar { position: relative; z-index: 2; } /* sits at the top of the page and scrolls away with it */ .p-bar__inner { display: flex; justify-content: flex-end; padding-top: .9rem; } .p-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(255 253 244 / .92); box-shadow: 0 4px 16px rgb(0 40 20 / .14); border: 1px solid var(--line); pointer-events: auto; backdrop-filter: blur(6px); } .p-lang a { min-width: 2.75rem; padding: .45rem .8rem; border-radius: 999px; color: var(--green); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-align: center; text-decoration: none; } .p-lang a[aria-current] { background: var(--green); color: var(--cream); } .p-lang a:not([aria-current]):hover { background: rgb(0 77 45 / .08); } .p-sec { position: relative; padding-block: clamp(3rem, 7vw, 6rem); } .p-sec--collage { padding-top: 1rem; } .p-sec--cream { background: var(--cream); } .p-sec--green { background: var(--green); color: var(--cream); } .p-sec--decor { overflow: hidden; } .p-title { margin: 0 0 clamp(1.25rem, 3vw, 2rem); font-size: clamp(2rem, 5.2vw, 4.2rem); text-wrap: balance; } .p-title__sub { display: block; margin-top: .35rem; font-size: .45em; line-height: 1.05; } .p-split { display: grid; gap: var(--p-gap); align-items: center; } .p-text { display: grid; gap: .9rem; align-content: start; max-width: 38rem; font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.6; } .p-text p, .p-text dl, .p-text ul { margin: 0; } .p-text--wide { max-width: 52rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .p-lead { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.45; color: var(--green); } .p-sec--green .p-lead { color: var(--cream); } .p-small { font-size: .92rem; color: var(--muted); } .p-big { font: italic 900 clamp(2rem, 4.5vw, 3.2rem)/1 var(--font-display); color: var(--green); } .p-accent { font: italic 900 clamp(1.3rem, 2.4vw, 1.9rem)/1.1 var(--font-display); text-transform: uppercase; color: var(--green); } .p-sub { display: flex; align-items: center; gap: .6rem; margin: 0; font: italic 900 clamp(1.15rem, 2vw, 1.5rem)/1.1 var(--font-display); color: var(--green); } .pi { width: 1.6em; height: 1.6em; flex: none; } .p-photo { display: block; width: 100%; height: 100%; object-fit: cover; } .p-grid { display: grid; gap: .7rem; } .p-grid__item { margin: 0; overflow: hidden; border-radius: 1rem; aspect-ratio: 4 / 5; background: var(--color-surface); } .p-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-grid--tilt .p-grid__item:nth-child(odd) { transform: rotate(-2deg); } .p-grid--tilt .p-grid__item:nth-child(even) { transform: rotate(2deg) translateY(.8rem); } .p-collage { columns: 2 10rem; column-gap: .7rem; } .p-collage__item { margin: 0 0 .7rem; break-inside: avoid; overflow: hidden; border-radius: 1rem; background: var(--color-surface); } .p-collage__item img { height: auto; } /* With JS the photos are dealt into columns of (almost) equal height, so no column ends much lower than the others. */ .p-collage.is-balanced { display: flex; align-items: flex-start; gap: .7rem; } .p-collage__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .7rem; } .p-collage.is-balanced .p-collage__item { flex: 1 1 0; min-height: 0; margin: 0; } .p-collage.is-balanced .p-collage__item img { width: 100%; height: 100%; object-fit: cover; } .p-collage--wide { columns: 2 9rem; } .p-values { display: grid; margin: 0; } .p-values > div { display: grid; grid-template-columns: minmax(7rem, .5fr) 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); } .p-values dt { font-weight: 800; color: var(--green); } .p-values dd { margin: 0; line-height: 1.55; } .p-values__side { display: grid; gap: .7rem; } .p-hours { padding: 1.1rem 1.25rem; border: 1.5px solid var(--green); border-radius: 1rem; color: var(--green); background: var(--paper); } .p-hours p { margin: 0; } .p-hours__label { font-size: .9rem; } .p-hours__time { font: italic 900 clamp(1.2rem, 2vw, 1.5rem)/1.2 var(--font-display); } .p-hours__note { margin-top: .3rem !important; font-size: .92rem; } .p-dots { display: grid; gap: .5rem; padding: 0; list-style: none; } .p-dots li { position: relative; padding-left: 1.3rem; } .p-dots li::before { content: ""; position: absolute; left: 0; top: .6em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); } .p-dots--light li::before { background: var(--cream); } .p-polaroids { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .p-polaroid { margin: 0; overflow: hidden; border-radius: 1rem; aspect-ratio: 4 / 5; box-shadow: 0 14px 30px rgb(0 40 20 / .16); } .p-polaroid--1 { transform: rotate(-4deg); } .p-polaroid--2 { transform: rotate(3deg) translateY(1.2rem); } .p-polaroid--3 { transform: rotate(2deg); } .p-polaroid--4 { transform: rotate(-3deg) translateY(1rem); } .p-bars { display: grid; gap: .8rem; margin-top: .6rem !important; padding: 0; list-style: none; } .p-bars li { display: flex; align-items: center; gap: .8rem; } .p-bars__bar { flex: none; width: calc(var(--v) * 0.42rem); max-width: 45%; height: 1.9rem; border-radius: .35rem; background: var(--green); } .p-bars b { font: italic 900 1.5rem/1 var(--font-display); color: var(--green); } .p-senses { display: grid; gap: 1.6rem; } .p-sense h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font: italic 900 clamp(1.4rem, 2.6vw, 2rem)/1 var(--font-display); color: var(--green); } .p-sense p { margin: 0; max-width: 34rem; line-height: 1.6; } .p-feature { margin: 0; overflow: hidden; border-radius: 1.2rem; aspect-ratio: 3 / 4; } .p-list { display: grid; gap: 1rem; } .p-list dt { font-weight: 800; color: var(--green); } .p-list dd { margin: .2rem 0 0; line-height: 1.55; } .p-decor { position: absolute; pointer-events: none; height: auto; } .p-decor--bird { right: -1rem; top: 1rem; width: clamp(7rem, 16vw, 13rem); } /* "Don't be basic" sticker: next to the title, never on top of it (drops below it when the row is full) */ .p-title-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(1rem, 3vw, 2rem); row-gap: .25rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); } @media (min-width: 48em) { .p-title-row { padding-right: clamp(4rem, 12vw, 11rem); } } /* room for the bird */ .p-title-row .p-title { margin: 0; } .p-sticker { width: clamp(6.5rem, 13vw, 10rem); height: auto; transform: rotate(-8deg); } .p-splash { width: clamp(9rem, 20vw, 15rem); height: auto; margin-top: .5rem; } /* Brand pyramid: a real triangle cut into layers (numbers), the meaning of each layer listed below */ .p-pyr { display: grid; gap: clamp(1.5rem, 3vw, 2rem); } .p-pyr__shape { display: grid; grid-auto-rows: clamp(2.5rem, 4.6vw, 3.3rem); gap: 4px; width: min(100%, 30rem); margin-inline: auto; } .p-pyr__layer { --a: calc(50% - var(--i) * 50% / var(--n)); --b: calc(50% - (var(--i) + 1) * 50% / var(--n)); display: grid; place-items: end center; padding-bottom: .35rem; clip-path: polygon(var(--a) 0, calc(100% - var(--a)) 0, calc(100% - var(--b)) 100%, var(--b) 100%); background: var(--green); color: var(--cream); font: italic 900 clamp(.95rem, 1.6vw, 1.15rem)/1 var(--font-display); } .p-pyr__layer:nth-child(even), .p-pyr__list li:nth-child(even) .p-pyr__num { background: #0b5c38; } .p-pyr__layer:first-child, .p-pyr__list li:first-child .p-pyr__num { background: var(--red); } .p-pyr__list { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; } .p-pyr__list li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; } .p-pyr__num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green); color: var(--cream); font: italic 900 .9rem/1 var(--font-display); } .p-pyr__list b { display: block; color: var(--green); font-weight: 800; line-height: 1.3; } .p-pyr__list li span:not(.p-pyr__num) { display: block; font-size: .95rem; line-height: 1.5; } .p-cards { display: grid; gap: .8rem; margin: 0; padding: 0; } .p-card { padding: 1.2rem 1.25rem; border: 1.5px solid rgb(0 77 45 / .35); border-radius: 1rem; background: var(--paper); } .p-card p { margin: 0; line-height: 1.5; } .p-card__h { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem !important; font: italic 900 clamp(1.3rem, 2.2vw, 1.7rem)/1 var(--font-display); color: var(--green); } .p-power { display: grid; gap: 1.2rem; max-width: 52rem; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; } .p-power p, .p-power ul { margin: 0; } .p-streams { position: relative; display: grid; gap: 1.2rem; } .p-stream { display: flex; gap: 1rem; align-items: flex-start; } .p-stream .pi { width: 3rem; height: 3rem; color: var(--green); } .p-stream h3 { margin: 0 0 .3rem; font: italic 900 1.2rem/1.1 var(--font-display); color: var(--green); } .p-stream p { margin: 0; line-height: 1.5; max-width: 22rem; } .p-streams__logo { display: none; } .p-map { position: relative; margin: 0; } .p-map img { display: block; width: 100%; height: auto; } .p-map__label { position: absolute; transform: translateY(-50%); font: italic 900 clamp(.7rem, 1.7vw, 1.35rem)/1 var(--font-display); color: var(--ink); white-space: nowrap; } .p-map__label--l { color: var(--green); } .p-map__title { position: absolute; left: 4%; top: 26%; width: 70%; font: italic 900 clamp(1rem, 2.4vw, 1.6rem)/1.05 var(--font-display); text-transform: uppercase; color: rgb(0 77 45 / .45); } .p-paths { display: grid; gap: 1rem; } .p-path { padding: clamp(1.25rem, 3vw, 2rem); border: 1.5px solid rgb(0 77 45 / .35); border-radius: 1.2rem; } .p-path h3 { display: flex; align-items: center; gap: .8rem; margin: 0 0 .8rem; font: italic 900 clamp(1.3rem, 2.4vw, 1.8rem)/1.05 var(--font-display); color: var(--green); } .p-path h3 .pi { width: 2.6rem; height: 2.6rem; } .p-path p { margin: 0 0 .8rem; line-height: 1.6; } .p-path__key { color: var(--green); font-weight: 700; } .p-model { display: grid; gap: var(--p-gap); } .p-terms { display: grid; gap: .5rem; } .p-terms dt { display: inline; font-weight: 800; font-style: italic; color: var(--green); } .p-terms dd { display: inline; margin: 0; } .p-fin { display: grid; gap: .6rem; padding: 0; margin: 0; } .p-fin li { display: flex; gap: .7rem; align-items: center; } .p-fin .pi { color: var(--green); } .p-offers { display: grid; gap: .8rem; margin: 0; padding: 0; } .p-offer { display: grid; gap: .45rem; align-content: start; padding: 1.2rem 1.25rem; border: 1.5px solid var(--green); border-radius: 1rem; background: var(--paper); font-size: .92rem; line-height: 1.45; } .p-offer h3 { margin: 0; font: italic 900 clamp(1.15rem, 1.8vw, 1.4rem)/1.1 var(--font-display); color: var(--green); } .p-offer p { margin: 0; } .p-offer__row b { display: block; font: italic 900 clamp(1.05rem, 1.6vw, 1.25rem)/1.2 var(--font-display); color: var(--green); } .p-offer__note { padding-top: .35rem; border-top: 1px solid var(--line); } .p-box { padding: 1.2rem 1.4rem; border: 1.5px solid rgb(0 77 45 / .35); border-radius: 1.2rem; } .p-box h3 { margin: 0 0 .5rem; font: italic 900 clamp(1.15rem, 2vw, 1.5rem)/1.1 var(--font-display); color: var(--green); } .p-box p { margin: 0 0 .4rem; line-height: 1.55; } .p-tiers { display: grid; gap: 1rem; margin: 0; padding: 0; } .p-tier { display: grid; gap: .6rem; align-content: start; padding: 1.4rem; border: 1.5px solid rgb(0 77 45 / .35); border-radius: 1.2rem; background: var(--paper); } .p-tier h3 { margin: 0; font: italic 900 1.4rem/1 var(--font-display); color: var(--green); } .p-tier__price { margin: 0; font: italic 900 clamp(2.4rem, 5vw, 3.4rem)/1 var(--font-display); color: var(--green); } .p-tier p { margin: 0; line-height: 1.55; } .p-tier__icons { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem !important; color: var(--green); } .p-tier__icons .pi { width: 2rem; height: 2rem; } .p-scroll-hint { margin: -1rem 0 .8rem; font-size: .85rem; color: var(--muted); } .p-table-wrap { position: relative; overflow-x: auto; border-radius: 1rem; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; } .p-table-wrap:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; } .p-table { width: 100%; min-width: 44rem; table-layout: fixed; border-collapse: collapse; font-size: .9rem; line-height: 1.4; } .p-table thead th { position: sticky; top: 0; background: var(--green); color: var(--cream); font: italic 900 .85rem/1.1 var(--font-display); text-transform: uppercase; padding: .75rem .6rem; border: 1px solid rgb(254 250 217 / .25); text-align: center; } .p-table thead th:first-child { text-align: left; } .p-table__feat { width: 44%; } .p-table tbody th { padding: .7rem .9rem; text-align: left; font-weight: 400; border-top: 1px solid var(--line); } .p-table tbody td { width: 14%; text-align: center; border-top: 1px solid var(--line); border-left: 1px solid var(--line); color: var(--green); } .p-table tr.is-group th, .p-table tr.is-group td { border-top: 2px solid rgb(0 77 45 / .4); } .p-table tbody tr:nth-child(even) { background: rgb(0 77 45 / .03); } .p-check { width: 1.6rem; height: 1.6rem; } .p-table__tier, .p-table__price { display: block; } /* Phones: the whole table fits the screen — no sideways swiping. Headers show the prices; tier names go to a key under the table. */ .p-table-key { display: none; } @media (max-width: 47.99em) { .p-table-wrap { overflow-x: visible; } .p-table { min-width: 0; font-size: .8rem; line-height: 1.35; } .p-table__feat { width: 44%; } .p-table thead th { position: static; padding: .6rem .15rem; font: 700 .58rem/1.2 var(--font-body); letter-spacing: .02em; } .p-table thead th:first-child { padding-left: .7rem; font: italic 900 .72rem/1.1 var(--font-display); } .p-table__tier { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .p-table__price { font: italic 900 clamp(.72rem, 3.3vw, .92rem)/1 var(--font-display); white-space: nowrap; } .p-table tbody th { padding: .55rem .6rem .55rem .7rem; } .p-table tbody td { width: 14%; } .p-check { width: 1.15rem; height: 1.15rem; } .p-scroll-hint { display: none; } .p-table-key { display: block; margin: .7rem 0 0; font-size: .82rem; color: var(--muted); } .p-table-key b { color: var(--green); font-weight: 800; } } @media (min-width: 48em) { .p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .p-collage { columns: 3 12rem; } .p-collage--wide { columns: 5 10rem; } .p-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .p-streams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; } .p-paths, .p-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .p-scroll-hint { display: none; } } @media (min-width: 64em) { .p-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .p-split--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .p-split--rev > :first-child { order: 0; } .p-collage--side { columns: 3 9rem; } .p-streams { grid-template-columns: 1fr auto 1fr; align-items: center; } .p-stream--1 { grid-area: 1 / 1; } .p-stream--2 { grid-area: 1 / 3; } .p-stream--3 { grid-area: 2 / 1; } .p-stream--4 { grid-area: 2 / 3; } .p-streams__logo { display: grid; place-items: center; grid-area: 1 / 2 / 3 / 3; width: 13rem; height: 13rem; border-radius: 50%; border: 1.5px dashed rgb(0 77 45 / .4); color: var(--green); } .p-streams__mark { width: 9rem; height: auto; aspect-ratio: 1038 / 341; } .p-model { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: start; } .p-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 47.99em) { .p-values > div { grid-template-columns: 1fr; gap: .25rem; } } .p-polaroid:nth-child(3):last-child, .p-grid--tilt .p-grid__item:nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; width: 62%; } @media (min-width: 64em) { .p-collage { columns: 4 12rem; } .p-collage--side { columns: 3 9rem; } .p-collage--wide { columns: 5 10rem; } } /* Home, phones: full-screen cover like the Spot pages — no white header bar, no logo, only the menu button (round, over the photo). */ @media (max-width: 47.99em) { .home .site-header { position: absolute; inset: 0 0 auto; background: transparent; color: #fff; } .home .site-header__inner { justify-content: flex-end; padding-top: 1.25rem; } .home .site-header__brand { display: none; } .home .nav-toggle { display: none; } .js .home .nav-toggle { display: grid; place-items: center; width: 3rem; height: 3rem; min-height: 3rem; padding: 0; border: 1.5px solid rgb(255 255 255 / .85); border-radius: 50%; background: rgb(0 0 0 / .15); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Same round "…" button as on the Spot pages; a cross while the menu is open. */ .home .nav-toggle__dots { display: block; width: 1.4rem; height: 1.4rem; } .home .nav-toggle__bars { display: none; width: 1.25rem; } .home .nav-toggle[aria-expanded="true"] .nav-toggle__dots { display: none; } .home .nav-toggle[aria-expanded="true"] .nav-toggle__bars { display: block; transform: translateY(0) rotate(45deg); } .home .nav--primary.is-open { margin-top: .75rem; box-shadow: 0 18px 40px rgb(0 0 0 / .25); } .home .hero { min-height: max(34rem, 100svh); } } /* ====================================================================== * Homepage — client changes: black, upright Qanelas headings (colour can be * changed in the admin), white backgrounds, outlined value pills, * monochrome contact buttons, carousel dots on phones. * ==================================================================== */ .home { --paper: #fff; --color-bg: #fff; } /* no beige on the homepage */ .hero__explore { color: #fff; } .site-footer__inner { padding-bottom: var(--space-4); } /* the checkered strip closes the page */ .home .display { font-family: "Qanelas", var(--font-body); font-style: normal; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--home-heading, #000); } .spot-tile__name { font-family: "Qanelas", var(--font-body); font-style: normal; font-weight: 700; letter-spacing: -.01em; } .home .brand__copy p:first-child { font-family: "Qanelas", var(--font-body); font-style: normal; font-weight: 700; font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.4; color: #000; } .home .values li { font-family: "Qanelas", var(--font-body); font-weight: 600; padding: .45rem 1.1rem; border: 1.5px solid #000; border-radius: 999px; background: #fff; color: #000; } .home .section--gallery { background: #fff; } .contact-block { background: #fff; } .contact-btn { border-color: #000; color: #000; background: #fff; } .site-footer .nav__list a, .site-footer__brand { color: #fff; } .site-footer__logo.site-footer__logo--img { filter: brightness(0) invert(1); } /* an uploaded logo shows white on black */ /* Spots carousel (phones): dots show there is more to swipe */ .home-spots__dots { display: none; } @media (max-width: 47.99em) { .home-spots__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; } .home-spots__dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgb(0 0 0 / .2); transition: background-color .2s, width .2s; } .home-spots__dot.is-active { width: 1.4rem; border-radius: 999px; background: #000; } } /* Mobile menus (homepage/pages panel and the Spot pages' full-screen menu): white, black Qanelas, an even cross to close. */ .nav-toggle__close { display: none; width: 1.4rem; height: 1.4rem; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars, .nav-toggle[aria-expanded="true"] .nav-toggle__dots { display: none !important; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } @media (max-width: 47.99em) { .js .nav--primary.is-open { background: #fff; color: #000; box-shadow: 0 18px 40px rgb(0 0 0 / .18); border: 1px solid rgb(0 0 0 / .08); } .js .nav--primary .nav__list a { font-family: "Qanelas", var(--font-body); font-style: normal; font-weight: 700; letter-spacing: -.01em; color: #000; } } .spot-nav { background: #fff; color: #000; } .spot-nav__brand { color: #000; } .spot-nav__close { border-color: #000; color: #000; } .spot-nav__close .icon { width: 1.4rem; height: 1.4rem; } .spot-nav__list a { font-family: "Qanelas", var(--font-body); font-style: normal; font-weight: 700; letter-spacing: -.02em; color: #000; } .spot-nav__list a:hover { color: #000; opacity: .6; } /* Spot pages: opening hours and Follow Soda in black (hover stays orange) */ .sp-info__hours, .sp-info__clock { color: #000; } .sp-follow__card { border-color: #000; } .sp-follow__title { color: #000; } .sp-follow__card:hover { border-color: var(--red); } .sp-follow__card:hover .sp-follow__title { color: var(--red); } .sp-follow__card:focus-visible { outline-color: #000; } .sp-gallery__hint { background: #000; color: #fff; } .sp-gallery__window:focus-visible { outline-color: #000; } .single-spot .skip-link { color: #000; } /* ====================================================================== * Homepage headings: one style for all (italic, black, same size and * spacing). Buttons read their colours/font from CSS variables that the * Brand Settings → "Design" fields can set (inc/design.php). * ==================================================================== */ .home .display { font-family: "Qanelas", var(--font-body); font-style: italic; font-weight: 900; font-size: clamp(2.1rem, 4.8vw, 3.75rem); line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; color: var(--home-heading, #000); } .partner__button { color: var(--btn-color, #000); border-color: var(--btn-color, #000); background: var(--btn-bg, transparent); font-family: var(--btn-font, inherit); } .partner__button:hover { background: var(--btn-hover-bg, var(--red)); border-color: var(--btn-hover-bg, var(--red)); color: var(--btn-hover-color, #fff); } .contact-btn { color: var(--btn-color, #000); border-color: var(--btn-color, #000); background: var(--btn-bg, #fff); font-family: var(--btn-font, inherit); } .contact-btn:hover { background: var(--btn-hover-bg, var(--red)); border-color: var(--btn-hover-bg, var(--red)); color: var(--btn-hover-color, #fff); } .contact-btn:focus-visible { outline-color: var(--btn-hover-bg, var(--red)); } .sp-cta__btn--menu { background: var(--btn-bg, var(--red)); color: var(--btn-color, #fff); font-family: var(--btn-font, inherit); } .sp-cta__btn--menu:hover { background: var(--btn-hover-bg, #a8352a); color: var(--btn-hover-color, #fff); } .sp-cta__btn--location { border-color: var(--btn-color, rgb(255 255 255 / .85)); color: var(--btn-color, #fff); background: var(--btn-bg, rgb(0 0 0 / .18)); font-family: var(--btn-font, inherit); } .sp-cta__btn--location:hover { background: var(--btn-hover-bg, rgb(255 255 255 / .12)); color: var(--btn-hover-color, #fff); } .spot-tile__name { font-style: normal; } /* Spot tiles: upright */ /* Mobile menus: italic and one step heavier, like the homepage headings */ .spot-nav__list a { font-style: italic; font-weight: 900; } @media (max-width: 47.99em) { .js .nav--primary .nav__list a { font-style: italic; font-weight: 900; } } /* Homepage gallery: every photo whole, in its own proportions (no crop, no zoom) */ .masonry img, .masonry__item:nth-child(n) img { height: auto; object-fit: cover; } /* proportions come from the photo (style attribute) */ /* Homepage headings: upright (not italic) */ .home .display { font-style: normal; } /* Footer: menu links without the underline animation */ .site-footer .nav__list a, .site-footer .nav__list a:hover, .site-footer .nav__list .current-menu-item > a { background: none; } /* Galleries (homepage and Spots): photos are not clickable; a light zoom on hover stays */ .masonry__ph { display: block; border-radius: var(--radius); overflow: hidden; } .masonry__ph:hover img, .sp-gallery__ph:hover img { transform: scale(1.035); } .sp-gallery__ph img { transition: transform .6s cubic-bezier(.2,.7,.2,1); } /* Homepage gallery with JS: equal number of photos per column (see main.js) */ .masonry.is-balanced { display: flex; align-items: flex-start; gap: .75rem; columns: auto; } .masonry__col { flex: 1 1 0; min-width: 0; list-style: none; } .masonry__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; } .masonry.is-balanced .masonry__item { margin: 0; display: block; } @media (min-width: 40em) { .masonry.is-balanced, .masonry__list { gap: 1rem; } } /* Contact buttons on phones: narrower, centred under the bird (homepage and Open a Cafe) */ @media (max-width: 47.99em) { .contact-btns[role="list"] { width: min(100%, 15rem); margin-inline: auto; } .contact-btn { min-height: 3.2rem; padding-inline: .8rem 1rem; } } /* Footer: menu in the same light grey as the © line (#ccc on black); white on hover */ .site-footer__legal { opacity: 1; color: #ccc; } .site-footer .nav__list a { color: #ccc; transition: color .2s; } .site-footer .nav__list a:hover, .site-footer .nav__list a:focus-visible { color: #fff; } /* Footer menu: upright, not italic */ .site-footer .nav__list a { font-style: normal; } /* Open a Cafe page only: cream header (brand book #fefad9), green logo (#004d2d), and the site's round "…" menu button on phones. */ .soda-partner .site-header { background: var(--color-bg); } /* same colour as the page background below it */ .soda-partner .site-header__brand { color: var(--green); } @media (max-width: 47.99em) { .js .soda-partner .nav-toggle { display: grid; place-items: center; width: 3rem; height: 3rem; min-width: 3rem; min-height: 3rem; margin-block: .5rem; padding: 0; border: 1.5px solid var(--green); border-radius: 50%; background: none; color: var(--green); } .soda-partner .nav-toggle__dots { display: block; width: 1.4rem; height: 1.4rem; } .soda-partner .nav-toggle__bars { display: none; } } /* Open a Cafe on phones: the same header geometry as the Spot pages — logo 20px from the top and the same size, round menu button 20px from the top at the same right edge, same height. */ @media (max-width: 47.99em) { .soda-partner .site-header__inner { align-items: flex-start; min-height: 0; padding-top: 1.25rem; padding-bottom: 1rem; } .soda-partner .site-header__brand { min-height: 0; } .soda-partner .site-header__logo { width: clamp(7rem, 16vw, 9.5rem); } .js .soda-partner .nav-toggle { margin: 0; } .js .soda-partner .nav--primary.is-open { margin-top: 1rem; } } @media (max-width: 47.99em) { .home .site-header__inner { padding-bottom: 1rem; } } /* same header height as the other pages */ @media (max-width: 47.99em) { /* ====================================================================== * Phones only: one header for every page, laid out like the Spot * pages: logo on the left, the round "…" menu button on the right — same * size, same place, same height. The menu opens as a panel under the header. * ==================================================================== */ .site-header__inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; column-gap: 1rem; width: min(100% - 2 * var(--gutter), 72rem); max-width: none; min-height: 0; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem) 0; grid-template-columns: none; } .site-header__brand { display: block; min-height: 0; line-height: 0; } .site-header__logo, .site-header__logo.site-header__logo--img { width: clamp(7rem, 16vw, 9.5rem); height: auto; max-width: none; } .js .nav-toggle { display: grid; place-items: center; width: 3rem; height: 3rem; min-width: 3rem; min-height: 3rem; margin: 0; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: #000; } .nav-toggle__dots { display: block; width: 1.4rem; height: 1.4rem; } .nav-toggle__bars { display: none !important; } .js .nav--primary:not(.is-open) { display: none; } .js .nav--primary.is-open { display: flex; flex-direction: column; flex-basis: 100%; gap: .25rem; margin: 1rem 0 0; padding: var(--space-2) var(--space-3); border: 1px solid rgb(0 0 0 / .08); border-radius: var(--radius); background: #fff; color: #000; box-shadow: 0 18px 40px rgb(0 0 0 / .18); } .js .nav--primary .nav__list { flex-direction: column; flex-wrap: nowrap; gap: .25rem; white-space: normal; } .js .nav--primary .nav__list a { font-family: "Qanelas", var(--font-body); font-style: italic; font-weight: 900; font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.01em; text-transform: uppercase; color: #000; background: none; } .js .nav--primary .nav__list a:hover { opacity: .6; } /* Open a Cafe: cream header, green logo and button (all widths) */ .soda-partner .site-header__inner { padding-bottom: clamp(1.25rem, 3vw, 2rem); } .js .soda-partner .nav-toggle { color: var(--green); border-color: var(--green); } .site-header__inner { padding-bottom: 1rem; } .soda-partner .site-header__inner { padding-bottom: 1rem; } } @media (max-width: 47.99em) { .site-header__brand { height: 3rem; } } /* header height = the round button, exactly as on the Spot pages */ /* Phones: the menu panel opens on top of the page (does not push it down), under the round button */ @media (max-width: 47.99em) { .js .nav--primary.is-open { position: absolute; z-index: 30; top: calc(100% - .5rem); right: var(--gutter); width: min(100% - 2 * var(--gutter), 24rem); margin: 0; } } .soda-partner .contact-block { background: var(--color-bg); } /* Open a Cafe: same colour as the section above; buttons stay white */ /* Open a Cafe only: green footer (brand book #004d2d); every light element cream (#fefad9) */ .soda-partner .site-footer { background: var(--green); color: var(--cream); } .soda-partner .site-footer__brand, .soda-partner .site-footer .nav__list a, .soda-partner .site-footer__legal, .soda-partner .site-footer__legal a { color: var(--cream); } .soda-partner .site-footer .nav__list a:hover, .soda-partner .site-footer .nav__list a:focus-visible { color: var(--cream); opacity: .7; } .soda-partner .site-footer__legal { border-top-color: rgb(254 250 217 / .25); } .soda-partner .checker { background-image: repeating-conic-gradient(var(--green) 0 25%, var(--cream) 0 50%); } .soda-partner .site-footer__brand { color: var(--paper); } /* Open a Cafe: footer logo in the page background colour (#fffdf4) */ /* Homepage: the eye sticker next to "Gallery" (look!), the walking flower in the brand collage */ .gallery__eye { display: inline-block; width: 1.9em; height: auto; margin-left: .2em; vertical-align: -.55em; transform: rotate(-10deg); pointer-events: none; } .brand__walker { z-index: 3; width: clamp(7.35rem, 14.7vw, 11.35rem); left: calc(-1rem + 40px); bottom: calc(12% - 50px); transform: rotate(-6deg); } /* over both photos */ /* Homepage Spot tile that is "not clickable yet": looks the same, no link, no hover effect */ .spot-tile.is-soon .spot-tile__link { cursor: default; } .spot-tile.is-soon .spot-tile__link:hover .spot-tile__img { transform: none; } .spot-tile.is-soon .spot-tile__link:hover .spot-tile__arrow { background: none; border-color: rgb(255 255 255 / .9); } /* Homepage, phones: the "A concept that travels" note 20px lower */ @media (max-width: 47.99em) { .partner__note { top: calc(52% + 20px); } } /* Contact block bird: 1.5x on phones (computers keep the original size) */ @media (max-width: 63.99em) { .contact-block__bird { width: clamp(12rem, 33vw, 22.5rem); } } /* Promo cards above a category title (e.g. “Free coffee with any breakfast” before Coffee) */ .menu-app .ma-list--promo { margin: 0 0 1.6rem; } .menu-app .ma-sec--sub .ma-list--promo { margin-top: .2rem; } /* Brand stickers next to category titles (Menu → category → Sticker) */ .ma-sec, .ma-grp { position: relative; } .ma-sticker { position: absolute; top: .9rem; right: calc(-.35rem + 20px); z-index: 3; width: clamp(4.6rem, 21vw, 6.4rem) !important; height: auto !important; pointer-events: none; transform: rotate(9deg); filter: drop-shadow(0 .3rem .5rem rgb(0 0 0 / .12)); translate: var(--dx, 0px) var(--dy, 0px); scale: var(--sc, 1); transform-origin: top center; } .ma-sticker--center { right: auto; left: 50%; translate: calc(-50% + var(--dx, 0px)) var(--dy, 0px); } .ma-grp > .ma-sticker { top: 1rem; } .ma-sticker--wine-glass { width: clamp(2.6rem, 11vw, 3.4rem) !important; top: .3rem; transform: rotate(-8deg); } .ma-sticker--cup-guy, .ma-sticker--diver { transform: rotate(-6deg); } .ma-sticker--bird { width: clamp(5.4rem, 25vw, 7.4rem) !important; top: 1.2rem; } .ma-sec--best .ma-sticker, .ma-sec--sub .ma-sticker { display: none; } .menu-app.is-searching .ma-sticker { display: none; } .menu-app .ma-sec__title, .menu-app .ma-grp__title { padding-right: 5.5rem; } .ma-price__one { white-space: nowrap; }