/* ========================================================================== Teddy's — Saini Enclave, Karkardooma One page, one stylesheet. Nothing loaded from another domain. The palette is black, off-white and their own red. Their logo sits on a flat #F73334; every photograph they have is a night shot of a red neon sign. So the hero is a black band and the page under it is near-white — the red does the work, which is what the shopfront already does. ========================================================================== */ /* ---- fonts, self-hosted --------------------------------------------- */ @font-face { font-family: "Anton"; src: url("/assets/fonts/anton-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Anton and Archivo are cut to Google's "latin" subset, which does not carry the rupee sign. These two files are the same fonts subset down to that one glyph, so ₹ matches the type around it instead of falling back to whatever the device has. */ @font-face { font-family: "Anton"; src: url("/assets/fonts/anton-rupee.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+20B9; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-rupee.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+20B9; } /* ---- colour ---------------------------------------------------------- Three states, in this order: 1. light tokens, always 2. dark tokens when the device asks for dark AND the reader has not pinned light 3. dark tokens when the reader has pinned dark The switch in the footer sets data-theme on . With no switch touched, the device decides — which is still the default. ---------------------------------------------------------------------- */ :root { --paper: #fbfaf8; --card: #ffffff; --ink: #141210; --muted: #63594f; --line: #e4e0d8; --line-strong: #cdc6ba; --brand: #f73334; /* the logo red — fills and large type only */ --accent: #cf2226; /* the same red, dark enough for small text */ --accent-fill: #d8262a; --accent-ink: #ffffff; --veg: #2f7d32; --nonveg: #9a2a1e; /* the hero band is dark in both schemes */ --night: #121010; --night-ink: #f6f2ec; --night-muted: #a99f94; --night-line: #2c2724; --night-accent: #ff6156; --radius: 14px; --measure: 64ch; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #131110; --card: #1c1917; --ink: #f6f2ec; --muted: #a89e93; --line: #2c2725; --line-strong: #443c36; --brand: #ff5a4e; --accent: #ff7268; /* lifted: the flat red goes muddy on near-black */ --accent-fill: #ff5a4e; --accent-ink: #1a1210; --veg: #6cc472; --nonveg: #ff8a72; } } :root[data-theme="dark"] { --paper: #131110; --card: #1c1917; --ink: #f6f2ec; --muted: #a89e93; --line: #2c2725; --line-strong: #443c36; --brand: #ff5a4e; --accent: #ff7268; --accent-fill: #ff5a4e; --accent-ink: #1a1210; --veg: #6cc472; --nonveg: #ff8a72; } /* ---- reset ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Archivo", "Noto Sans", "Segoe UI", Roboto, system-ui, sans-serif; font-size: 17px; line-height: 1.62; font-synthesis-weight: none; padding-bottom: env(safe-area-inset-bottom); } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: .07em; } a:hover { color: var(--ink); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } h1, h2, h3 { font-family: "Anton", "Archivo", "Arial Narrow", system-ui, sans-serif; font-weight: 400; letter-spacing: .004em; line-height: 1.02; text-transform: uppercase; margin: 0; } h1 { font-size: clamp(2.7rem, 8.6vw, 5.2rem); } h2 { font-size: clamp(1.9rem, 5.2vw, 3rem); } h3 { font-family: "Archivo", system-ui, sans-serif; font-weight: 700; text-transform: none; letter-spacing: -.01em; font-size: 1.16rem; line-height: 1.32; } p { margin: 0 0 1.1em; max-width: var(--measure); } h1 + p, h2 + p, h1 + .lede, h2 + .lede { margin-top: .9rem; } h3 + p { margin-top: .35rem; } .skip { position: absolute; left: -9999px; top: 0; background: var(--accent-fill); color: var(--accent-ink); padding: .7rem 1.1rem; z-index: 200; font-weight: 600; } .skip:focus { left: .6rem; top: .6rem; } /* ---- layout ---------------------------------------------------------- */ .wrap { width: min(100% - 2.2rem, 1120px); margin-inline: auto; } @media (max-width: 380px) { .wrap { width: min(100% - 1.5rem, 1120px); } } /* a measured column for the prose blocks, left-aligned on purpose so it shares its left edge with everything else. Used inside .wrap. */ .wrap--narrow { width: min(100%, 760px); margin-inline: 0 auto; } .section { padding: clamp(3rem, 7vw, 5.4rem) 0; scroll-margin-top: 5rem; } .section--tight { padding: clamp(2.2rem, 4.5vw, 3.4rem) 0; } .eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin: 0 0 .85rem; } .lede { font-size: 1.16rem; color: var(--muted); } .rule { border: 0; border-top: 1px solid var(--line); margin: 0; } /* ---- header ---------------------------------------------------------- */ .site-head { border-bottom: 1px solid var(--night-line); background: var(--night); color: var(--night-ink); } @media (min-width: 700px) { .site-head { position: sticky; top: 0; z-index: 90; } } .site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; } .brand { display: flex; align-items: center; gap: .68rem; text-decoration: none; color: inherit; } .brand__mark { width: 44px; height: 44px; flex: none; background: #f73334; /* the logo's own red, always */ border-radius: 11px; display: grid; place-items: center; overflow: hidden; } .brand__mark img { width: 38px; height: 39px; } .brand__name { font-family: "Anton", system-ui, sans-serif; font-size: 1.4rem; letter-spacing: .012em; line-height: 1; text-transform: uppercase; } .brand__sub { display: block; font-family: "Archivo", system-ui, sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .19em; color: var(--night-muted); margin-top: .2rem; text-transform: uppercase; } .nav { display: flex; gap: 1.5rem; align-items: center; } .nav a { color: var(--night-ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .3rem 0; border-bottom: 2px solid transparent; } .nav a:hover { border-bottom-color: var(--night-accent); color: var(--night-accent); } @media (max-width: 700px) { .nav { gap: 1.05rem; } .nav a { font-size: .87rem; } .brand__mark { width: 40px; height: 40px; border-radius: 10px; } .brand__mark img { width: 35px; height: 36px; } .brand__name { font-size: 1.2rem; } } @media (max-width: 430px) { .site-head__in { flex-wrap: wrap; } .nav { width: 100%; justify-content: space-between; border-top: 1px solid var(--night-line); padding-top: .55rem; } .brand__sub { display: none; } } /* ---- buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 700; padding: .78rem 1.35rem; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; line-height: 1.2; } .btn--primary { background: var(--accent-fill); color: var(--accent-ink); } .btn--primary:hover { background: var(--ink); color: var(--paper); } .btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: var(--ink); } .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; } /* on the dark hero band. #e0282b rather than the logo's #f73334: the flat logo red with white on it is 3.8:1, which fails AA at this text size. */ .hero .btn--primary { background: #e0282b; color: #fff; } .hero .btn--primary:hover { background: #fff; color: #121010; } .hero .btn--ghost { border-color: #4a423c; color: var(--night-ink); } .hero .btn--ghost:hover { border-color: var(--night-ink); } /* ---- hero, on black -------------------------------------------------- */ .hero { background: var(--night); color: var(--night-ink); padding: clamp(2.4rem, 5vw, 4.2rem) 0 0; } .hero__grid { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: end; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.12fr .88fr; } } .hero .eyebrow { color: var(--night-accent); } .hero h1 { margin-bottom: 1.05rem; } .hero h1 em { font-style: normal; color: var(--brand); } :root[data-theme="dark"] .hero h1 em, .hero h1 em { color: #f73334; } .hero .lede { color: var(--night-muted); } .hero__figure { margin: 0; } .hero__figure img { width: 100%; border-radius: var(--radius); } .hero__figure figcaption { font-size: .82rem; color: var(--night-muted); margin-top: .6rem; line-height: 1.45; } /* the facts strip — deliberately one line, not three cards */ .facts { border-top: 1px solid var(--night-line); margin-top: clamp(2rem, 4vw, 3rem); } .facts dl { display: flex; flex-wrap: wrap; margin: 0; } .facts > dl > div { padding: 1.05rem 1.4rem 1.05rem 0; margin-right: 1.4rem; border-right: 1px solid var(--night-line); flex: 1 1 auto; } .facts > dl > div:last-child { border-right: 0; margin-right: 0; } .facts dt { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--night-muted); margin-bottom: .18rem; } .facts dd { margin: 0; font-weight: 600; font-size: 1.02rem; color: var(--night-ink); } .facts dd a { color: var(--night-accent); text-decoration: none; font-weight: 700; } .facts dd a:hover { text-decoration: underline; } @media (max-width: 700px) { .facts > dl > div { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--night-line); padding: .8rem 0; margin-right: 0; } .facts > dl > div:last-child { border-bottom: 0; } } /* ---- picks ----------------------------------------------------------- */ .picks { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); } @media (min-width: 860px) { .picks { grid-template-columns: 1.25fr 1fr; align-items: start; } } .pick-lead { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.1rem); } .pick-lead .price-big { font-family: "Anton", system-ui, sans-serif; font-size: clamp(2.6rem, 7vw, 3.6rem); color: var(--accent); line-height: .95; display: block; margin: .55rem 0 .9rem; } .pick-lead h3 { font-size: 1.5rem; } .pick-list { list-style: none; margin: 0; padding: 0; } .pick-list li { display: flex; align-items: baseline; gap: .7rem; padding: .82rem 0; border-bottom: 1px solid var(--line); } .pick-list li:first-child { border-top: 1px solid var(--line); } .pick-list .dots { flex: 1 1 auto; border-bottom: 1px dotted var(--line-strong); transform: translateY(-.22em); } .pick-list .rate { font-weight: 700; white-space: nowrap; } .pick-list small { display: block; font-weight: 400; color: var(--muted); font-size: .84rem; line-height: 1.4; } /* ---- split block (photo + words) ------------------------------------- */ .split { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; } @media (min-width: 860px) { .split { grid-template-columns: 400px 1fr; } .split--flip { grid-template-columns: 1fr 400px; } .split--flip > figure { order: 2; } } .split figure { margin: 0; } .split figure img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; } .split figcaption { font-size: .82rem; color: var(--muted); margin-top: .6rem; } /* ---- the menu -------------------------------------------------------- */ .menu-jump { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 1.6rem 0 0; list-style: none; } .menu-jump a { display: inline-block; border: 1px solid var(--line-strong); border-radius: 999px; padding: .38rem .82rem; font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--ink); } .menu-jump a:hover { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); } .course { padding-top: clamp(2.4rem, 5vw, 3.6rem); scroll-margin-top: 5rem; } .course > h2 { border-bottom: 3px solid var(--ink); padding-bottom: .35rem; margin-bottom: .3rem; } .course__note { font-size: .88rem; color: var(--muted); margin: .5rem 0 1.3rem; } .dishes { list-style: none; margin: 0; padding: 0; } @media (min-width: 820px) { .dishes { columns: 2; column-gap: 3.2rem; } .dishes li { break-inside: avoid; } } .dishes li { padding: .78rem 0; border-bottom: 1px solid var(--line); } .dish__top { display: flex; align-items: baseline; gap: .55rem; } .dish__name { font-weight: 700; letter-spacing: -.005em; } .dish__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--line-strong); transform: translateY(-.24em); min-width: 1.5rem; } .dish__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .dish__desc { display: block; color: var(--muted); font-size: .87rem; line-height: 1.5; margin-top: .12rem; } .dish__slash { color: var(--muted); font-weight: 400; padding: 0 .06rem; } /* the veg / non-veg square everybody in India reads at a glance. The dot is drawn with a border, not a background, because browsers do not print backgrounds by default and this menu gets printed. */ .mark { width: .78rem; height: .78rem; flex: none; border: 1.5px solid currentColor; border-radius: 2px; display: inline-grid; place-items: center; transform: translateY(-.06em); } .mark::before { content: ""; width: 0; height: 0; border: .17rem solid currentColor; border-radius: 50%; } .mark--veg { color: var(--veg); } .mark--nonveg { color: var(--nonveg); } .legend { display: flex; gap: 1.3rem; flex-wrap: wrap; font-size: .87rem; color: var(--muted); margin-top: 1rem; } .legend span { display: inline-flex; align-items: center; gap: .42rem; } .tenders-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .tenders-table th, .tenders-table td { padding: .62rem .5rem; border-bottom: 1px solid var(--line); text-align: right; } .tenders-table th:first-child, .tenders-table td:first-child { text-align: left; padding-left: 0; } .tenders-table thead th { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .box-note { margin-top: 1.4rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent-fill); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; font-size: .95rem; } .box-note p { margin: 0; max-width: none; } .box-note p + p { margin-top: .45rem; } /* ---- enquiry form ---------------------------------------------------- */ .enquiry-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3.5vw, 2.3rem); } .enquiry { max-width: 34rem; } .enquiry__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .enquiry__field { margin-bottom: 1rem; } .enquiry__field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; } .enquiry__optional { font-weight: 400; color: var(--muted); } .enquiry input, .enquiry textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; padding: .68rem .8rem; } .enquiry input:focus, .enquiry textarea:focus { border-color: var(--accent); } .enquiry textarea { resize: vertical; min-height: 6rem; } .enquiry button { font: inherit; font-weight: 700; background: var(--accent-fill); color: var(--accent-ink); border: 0; border-radius: 999px; padding: .78rem 1.7rem; cursor: pointer; } .enquiry button:hover { background: var(--ink); color: var(--paper); } .enquiry__done { font-weight: 600; margin: 0; } /* ---- footer ---------------------------------------------------------- */ .site-foot { border-top: 1px solid var(--line); padding: clamp(2.4rem, 5vw, 3.4rem) 0 1.6rem; } .foot-grid { display: grid; gap: 2rem; } @media (min-width: 760px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } } .site-foot h2 { font-family: "Archivo", system-ui, sans-serif; text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--muted); margin-bottom: .7rem; } .site-foot ul { list-style: none; margin: 0; padding: 0; } .site-foot li { margin-bottom: .38rem; } .site-foot a { color: var(--ink); text-decoration: none; } .site-foot a:hover { color: var(--accent); text-decoration: underline; } .site-foot address { font-style: normal; color: var(--muted); line-height: 1.6; } .foot-base { margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: .84rem; color: var(--muted); } .foot-base p { margin: 0; } /* ---- the light / dark switch ----------------------------------------- */ /* The site follows the device on its own. This is the manual override, and the only thing on the site that stores anything: one localStorage key holding the word "light" or "dark". No cookie, nothing sent anywhere. */ .theme-switch { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .theme-switch__label { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .theme-switch__set { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; } .theme-switch button { font: inherit; font-size: .8rem; font-weight: 600; background: transparent; color: var(--muted); border: 0; padding: .34rem .78rem; cursor: pointer; line-height: 1.5; } .theme-switch button + button { border-left: 1px solid var(--line-strong); } .theme-switch button:hover { color: var(--ink); } .theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } /* ---- the OTLU Sites credit ------------------------------------------- */ .built-by { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--muted); font-size: .78rem; opacity: .78; } .built-by:hover { opacity: 1; color: var(--muted); } .built-by img { width: 76px; height: 16px; } .built-by .on-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .built-by .on-light { display: none; } :root:not([data-theme="light"]) .built-by .on-dark { display: block; } } :root[data-theme="dark"] .built-by .on-light { display: none; } :root[data-theme="dark"] .built-by .on-dark { display: block; } :root[data-theme="light"] .built-by .on-light { display: block; } :root[data-theme="light"] .built-by .on-dark { display: none; } /* ---- the fixed call bar (phones) ------------------------------------- */ .callbar { display: none; } @media (max-width: 860px) { body { padding-bottom: calc(4.1rem + env(safe-area-inset-bottom)); } .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--paper); border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom); } .callbar a { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .95rem .5rem; font-weight: 700; text-decoration: none; color: var(--accent-ink); background: var(--accent-fill); } .callbar a + a { background: var(--ink); color: var(--paper); } .callbar svg { width: 18px; height: 18px; flex: none; } } /* ---- 404 ------------------------------------------------------------- */ .notfound { text-align: center; padding: clamp(3rem, 10vw, 7rem) 0; } .notfound img { width: 128px; height: auto; margin: 0 auto 1.6rem; } .notfound p { margin-left: auto; margin-right: auto; } /* ---- print ----------------------------------------------------------- */ /* Menus and price lists get printed. A printed page with a navigation bar and a WhatsApp button on it looks careless. */ @media print { :root, :root[data-theme="dark"], :root[data-theme="light"] { --paper: #fff; --card: #fff; --ink: #000; --muted: #333; --line: #bbb; --line-strong: #999; --accent: #000; --accent-fill: #000; --night: #fff; --night-ink: #000; --night-muted: #333; --night-line: #bbb; /* the veg mark keeps its colour — on this menu it carries meaning */ --veg: #1f6b23; --nonveg: #8c2318; } .mark { print-color-adjust: exact; -webkit-print-color-adjust: exact; } body { font-size: 11.5pt; line-height: 1.42; padding: 0; background: #fff; } .site-head, .callbar, .menu-jump, .btn-row, .enquiry-block, .site-foot, .hero, .split figure, .picks, .print-hide { display: none !important; } .wrap, .wrap--narrow { width: 100%; } .section, .course { padding: 0; } .course { padding-top: 14pt; break-inside: auto; } .course > h2 { font-size: 15pt; border-bottom: 1.5pt solid #000; } h1 { font-size: 21pt; } h2 { font-size: 16pt; } .dishes { columns: 2; column-gap: 22pt; } .dishes li { break-inside: avoid; padding: 4pt 0; } .dish__desc { font-size: 8.5pt; } .print-only { display: block !important; } a[href]::after { content: ""; } /* a printed menu that does not carry the address and the phone number is a printed menu somebody throws away */ .print-head { border-bottom: 1.5pt solid #000; padding-bottom: 6pt; margin-bottom: 4pt; font-size: 9.5pt; line-height: 1.4; } .print-head b { font-family: "Anton", sans-serif; font-size: 15pt; letter-spacing: .01em; } } .print-only { display: none; }