@import url("fonts.css"); /* Rumi Café & Grill — the five menu screens. * * One menu is one screen. Nothing rotates, nothing scrolls, every dish is up at * once. That single rule drives the rest of this file: the masthead, the title * and the foot are cut as thin as they can be read at, so the dishes get the * height, and the page shrinks its own type until the longest column fits. * * Written for a 32" Hisense at 1366×768, which is why every size here is in vh: * the panel is 16:9, so a viewport height is the only unit that means the same * thing on the television, on the manager's laptop and in a browser preview. * Nothing thinner than 2px, because at 768 lines a 1px gold rule is a * flickering grey one. * * No animation ever touches a dish name or a price. What moves — the * candlelight, the flame on the mark, the dancer's slow turn — moves slowly * enough not to catch the eye of somebody reading. */ :root { color-scheme: dark; /* Charcoal, gold and cream, taken off the printed cards. */ --ink: #14110d; --ink-2: #1d1913; --paper: #f4ead6; --paper-dim: #cbbb9c; --muted: #a2937a; --gold: #c9ae62; --gold-light: #ecdcab; --gold-deep: #8f7736; --rule: #4a3f28; /* How tall the dancer stands. Fixed in vh rather than in the type scale, so * a crowded screen shrinks its words around her instead of shrinking her. */ --dancer-h: 26vh; } /* The same screens on cream, for a set in a bright window or a client who wants * the printed menu note for note. Set data-theme="paper" on . */ :root[data-theme="paper"] { color-scheme: light; --ink: #f6f0e4; --ink-2: #efe6d4; --paper: #29241d; --paper-dim: #4c4335; --muted: #6e6355; --gold: #8c7b31; --gold-light: #6d5f26; --gold-deep: #b9a755; --rule: #d8c9a4; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper); font-family: Cormorant, "Cormorant Garamond", Garamond, serif; /* A television has no pointer, and a mini PC plugged into one has a mouse * that was last touched in March. */ cursor: none; -webkit-font-smoothing: antialiased; /* Cormorant sets old-style figures by default, which drop £15.90 below the * x-height and turn 100% into 1oo%. Beautiful on a printed card at reading * distance; mush on a 768-line panel across the room. */ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } /* ---------------------------------------------------------------- the room */ .stage { position: fixed; inset: 0; display: flex; flex-direction: column; background: radial-gradient(115% 80% at 50% -10%, rgba(201, 174, 98, 0.14), transparent 62%), radial-gradient(90% 70% at 50% 108%, rgba(201, 174, 98, 0.07), transparent 60%), var(--ink); } /* Candlelight: a warm wash breathing about as slowly as somebody sitting down. */ .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(75% 55% at 50% 42%, rgba(255, 206, 128, 0.09), transparent 70%); animation: breathe 17s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* The jadval: the double rule that frames a Persian page. */ .frame, .frame::before { position: absolute; pointer-events: none; z-index: 4; } .frame { inset: 1.3vh 0.9vw; border: 2px solid var(--rule); } .frame::before { content: ""; inset: 0.7vh 0.45vw; border: 2px solid color-mix(in srgb, var(--rule) 55%, transparent); } .frame i { position: absolute; width: 1vh; height: 1vh; border: 2px solid var(--gold-deep); transform: rotate(45deg); background: var(--ink); } .frame i:nth-child(1) { left: -0.6vh; top: -0.6vh; } .frame i:nth-child(2) { right: -0.6vh; top: -0.6vh; } .frame i:nth-child(3) { left: -0.6vh; bottom: -0.6vh; } .frame i:nth-child(4) { right: -0.6vh; bottom: -0.6vh; } /* ------------------------------------------------------------- the masthead */ /* One line, not three. On a menu that has to show everything at once, every * vh spent on chrome is a vh taken off the dishes — the mark, the name of the * menu and the welcome earn their keep side by side, and the eight or nine vh * that saves is worth about a point of type size on the crowded screens. */ .mast { position: relative; z-index: 6; flex: 0 0 10vh; display: flex; align-items: center; justify-content: space-between; gap: 2.4vw; margin: 0 4.2vw; padding-bottom: 1.2vh; border-bottom: 2px solid var(--rule); } .mark { position: relative; flex: 0 0 auto; height: 6.2vh; aspect-ratio: 1.75; } .mark .word { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* The flame sits over the dot of the i, and is the one thing on the page * allowed to be restless. It is a flame. */ .mark .flame { position: absolute; left: 53.2%; top: -14%; height: 56%; transform-origin: 50% 100%; animation: flame-dance 2.7s ease-in-out infinite, flame-flicker 1.05s ease-in-out infinite; } @keyframes flame-dance { 0% { transform: rotate(-2.2deg) scaleY(1) scaleX(1); } 22% { transform: rotate(1.6deg) scaleY(1.07) scaleX(0.985); } 45% { transform: rotate(-1.2deg) scaleY(0.96) scaleX(1.02); } 68% { transform: rotate(2.4deg) scaleY(1.05) scaleX(0.99); } 100% { transform: rotate(-2.2deg) scaleY(1) scaleX(1); } } @keyframes flame-flicker { 0%, 100% { filter: brightness(1); } 38% { filter: brightness(1.22); } 62% { filter: brightness(0.9); } } /* The name of the menu, held in the middle of the row between two diamonds — * laid over the row rather than in it, so it centres on the screen and not on * whatever is left between the mark and the welcome. */ .title { position: absolute; left: 0; right: 0; top: 0; bottom: 1.2vh; display: flex; align-items: center; justify-content: center; gap: 1.4vw; min-width: 0; } .title::before, .title::after { content: ""; width: 0.8vh; height: 0.8vh; flex: 0 0 auto; border: 2px solid var(--gold-deep); transform: rotate(45deg); } .title span { font-size: 3.6vh; font-style: italic; font-weight: 500; color: var(--gold-light); white-space: nowrap; } .welcome { flex: 0 0 auto; text-align: right; white-space: nowrap; font-size: 1.5vh; font-weight: 700; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: var(--gold); } /* ---------------------------------------------------------------- the sheet */ .sheet { position: relative; z-index: 6; flex: 1 1 auto; min-height: 0; margin: 1.6vh 4.2vw 0; display: flex; gap: 2.8vw; /* Everything inside is sized in em off this line, so the fitter can take a * crowded screen down a notch by moving one number. */ font-size: calc(var(--s, 1) * 1vh); opacity: 0; transition: opacity 0.5s ease; } /* Shown only once the fitter has settled, so nobody watches the page resize. */ .sheet.is-set { opacity: 1; } /* While the fitter is measuring, the two blocks that normally rest on the floor * of a column come back to the top of it. On an auto margin a column that fits * and a column that overflows measure identically, and the fitter would have * nothing to read. */ .sheet.is-measuring .photo, .sheet.is-measuring .house { margin-top: 0; } /* Four and five columns are narrow enough that the gutters have to give. */ .sheet.cols-4 { gap: 2.1vw; } .sheet.cols-5 { gap: 1.6vw; } /* In a narrow column a long name has to wrap, and a leader dotted across to a * price that has been pushed onto its own line is worse than no leader at all. * Four columns and up: the name takes the left, the price is set hard right on * the first line of it, and the dots go. */ .sheet.cols-4 .line, .sheet.cols-5 .line { display: grid; grid-template-columns: 1fr auto; column-gap: 0.7em; } .sheet.cols-4 .dots, .sheet.cols-5 .dots { display: none; } .sheet.cols-4 .sec b, .sheet.cols-5 .sec b { letter-spacing: 0.15em; } .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } /* Never let a crowded column squeeze its own dishes — overflow is the fitter's * business, and it has to be able to see the overflow to act on it. */ .col > * { flex: 0 0 auto; } .sec { margin-bottom: 1.3em; padding-bottom: 0.7em; border-bottom: 2px solid var(--gold-deep); } .sec b { display: block; font-size: 2.4em; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); line-height: 1.1; } .sec i { display: block; margin-top: 0.45em; font-size: 1.95em; font-style: italic; font-weight: 500; color: var(--muted); line-height: 1.22; } .gap { visibility: hidden; } /* A section that could not be given a column top needs to announce itself: * real air above it, so the eye scanning a column catches the break. */ .col > .sec:not(:first-child) { margin-top: 2.6em; } .item { margin-bottom: 1.3em; } .item:last-child { margin-bottom: 0; } .line { display: flex; align-items: baseline; } .nm { font-size: 3.05em; font-weight: 600; line-height: 1.14; color: var(--paper); } .dots { flex: 1 1 auto; min-width: 1.2em; margin: 0 0.8em; border-bottom: 2px dotted var(--rule); transform: translateY(-0.45em); } .pr { font-size: 2.8em; font-weight: 600; white-space: nowrap; color: var(--gold); } .ds { margin-top: 0.3em; padding-right: 1.6em; font-size: 2.15em; font-style: italic; font-weight: 500; line-height: 1.24; color: var(--paper-dim); } .two { margin-top: 0.35em; font-size: 2.15em; font-weight: 600; color: var(--gold); } .nt { margin-top: 1.2em; font-size: 2.05em; font-style: italic; font-weight: 600; line-height: 1.28; color: var(--muted); } /* ------------------------------------------------------------- the dancer */ /* She is a figure standing in the menu, not a wash behind it: one column on * each of the five screens ends with her, and it is a different column every * time. Sized in vh rather than in the type scale, so the words shrink around * her and she stays the same height on all five. */ .photo { margin-top: auto; padding-top: 1.6em; display: flex; justify-content: center; } .ph-img { height: var(--dancer-h); aspect-ratio: 1024 / 1536; /* The photograph, exactly as supplied — a different one on each menu, set * from menu.js. Each has its own transparency, so it sits on the dark and * the cream theme alike. */ background: no-repeat center / contain; } /* The house line, where a column has room to spare at its foot. */ .house { margin-top: auto; padding-top: 2.6em; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9em; } .house::before { content: ""; width: 6em; border-top: 2px solid var(--gold-deep); margin-bottom: 0.4em; } .house q { font-size: 2.9em; font-style: italic; font-weight: 500; color: var(--gold-light); quotes: none; } .house em { font-size: 1.75em; font-style: normal; font-weight: 700; letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase; color: var(--muted); } /* ---------------------------------------------------------------- the foot */ .foot { position: relative; z-index: 6; flex: 0 0 5.4vh; display: flex; align-items: center; justify-content: space-between; gap: 2.4vw; margin: 1.4vh 4.2vw 0; padding: 1vh 0 1.6vh; border-top: 2px solid var(--rule); font-size: 1.5vh; line-height: 1.3; color: var(--muted); } .foot .allergen { font-style: italic; flex: 1 1 0; max-width: 34vw; } .foot .where { font-weight: 700; letter-spacing: 0.24em; text-indent: 0.24em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; text-align: right; flex: 1 1 0; } /* ----------------------------------------------------------- the index card */ .index { position: relative; z-index: 6; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh; margin: 0 4.2vw; } .index a { display: flex; align-items: baseline; gap: 1.4vw; width: min(58vw, 100%); padding: 1.5vh 2.4vw; border: 2px solid var(--rule); text-decoration: none; color: var(--paper); font-size: 3vh; } .index a b { font-weight: 600; } .index a span { margin-left: auto; font-size: 0.62em; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } /* --------------------------------------------------------------- on a phone */ /* The screens are the job, but the manager will open this in the shop and the * owner will forward the link. In portrait the columns unstack into one * scrolling card, sized in px — a viewport height means something specific on a * 16:9 panel and nothing at all on a phone. */ @media (max-aspect-ratio: 1/1) { html, body { height: auto; overflow: auto; cursor: auto; } .stage { position: static; min-height: 100vh; } .frame { display: none; } /* The one-line masthead is a landscape idea. Stack it. */ .mast { flex: none; flex-direction: column; align-items: center; gap: 14px; margin: 0 22px; padding: 26px 0 16px; } .mark { height: 62px; } .welcome { max-width: none; text-align: center; font-size: 10px; letter-spacing: 0.24em; text-indent: 0.24em; } .title { position: static; gap: 16px; } .title::before, .title::after { width: 6px; height: 6px; } .title span { font-size: 25px; white-space: normal; text-align: center; } .sheet { flex: none; flex-direction: column; gap: 0; margin: 22px 22px 0; font-size: 7.4px; opacity: 1; } .sheet .line { display: flex; } .sheet .dots { display: block; } .col + .col { margin-top: 2.8em; } /* Nothing to align to once the columns are stacked. */ .gap { display: none; } .photo, .house { margin-top: 0; } .ph-img { height: 260px; } .index { flex: none; margin: 0 22px; } .index a { width: 100%; padding: 14px 18px; font-size: 19px; } .foot { flex: none; flex-wrap: wrap; justify-content: center; text-align: center; gap: 8px; margin: 34px 22px 0; padding: 16px 0 34px; font-size: 11px; } .foot .allergen, .foot .where { flex: none; max-width: none; text-align: center; white-space: normal; } }