at runtime. The wrapper
is the scroll container, so the table itself keeps
its real table layout (column widths, thead alignment,
row hover, etc.) instead of being deformed.
(b) On small screens we also tighten cell padding and
font-size so the table actually shrinks to fit, and
only falls back to horizontal scroll when the content
genuinely cannot fit (e.g. 4 narrow numeric columns).
----------------------------------------------------------- */
/* Wrapper around every .mn-table — created by app.js */
.mn-table-wrap {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin: 0 0 16px;
/* visible scrollbar hint on touch devices */
border-bottom: 2px solid var(--line);
}
.mn-table-wrap::-webkit-scrollbar { height: 8px; }
.mn-table-wrap::-webkit-scrollbar-track { background: var(--paper-3); }
.mn-table-wrap::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 4px; }
/* The table itself: remove the original overflow:hidden
(which clipped data on mobile) and let it size to its
natural content. The wrapper handles overflow. */
.mn-table {
overflow: visible;
table-layout: auto;
}
/* Use overflow-wrap (breaks ONLY at word boundaries) instead
of word-break:break-word (which can split "₹15,000" into
"₹15,0" + "00"). With overflow-wrap, prices and short
numbers stay intact; the wrapper scrolls horizontally if
a column genuinely cannot fit. */
.mn-table th, .mn-table td {
white-space: normal;
overflow-wrap: break-word;
word-break: keep-all;
}
/* Long descriptive cells (the colspan row in pricing tables,
etc.) should still wrap normally — no nowrap on them. */
.mn-table td[colspan],
.mn-table td:only-child {
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
}
/* Tighten padding/font on small screens so the table
shrinks first, scrolls only as a last resort. */
@media (max-width: 760px) {
.mn-table th, .mn-table td { padding: 10px 12px; }
.mn-table thead th { font-size: 11px; letter-spacing: 1px; }
.mn-table td strong { font-size: 14px; }
.mn-table .mn-price { font-size: 17px; }
}
@media (max-width: 480px) {
.mn-table th, .mn-table td { padding: 8px 9px; font-size: 13px; line-height: 1.4; }
.mn-table thead th { font-size: 10px; letter-spacing: 0.5px; }
.mn-table td strong { font-size: 13px; }
.mn-table .mn-price { font-size: 15px; }
}
/* --- 9. Float CTAs — keep clear of viewport edge -----------
On very small phones the floating CALL / WhatsApp
buttons sat flush to the edge; the 2px border could
cause a 1px horizontal scroll on some browsers.
----------------------------------------------------------- */
@media (max-width: 360px) {
.mn-float { right: 10px; }
.mn-float a { width: 46px; height: 46px; font-size: 18px; }
}
/* --- 10. Hero CTA row — wrap properly on narrow phones ----
.mn-cta-row already has flex-wrap:wrap, but on very
narrow viewports the buttons themselves could push out.
Force shrink on the button content.
----------------------------------------------------------- */
.mn-cta-row { max-width: 100%; }
.mn-cta-row .mn-btn {
max-width: 100%;
flex: 0 1 auto;
min-width: 0;
}
.mn-cta-row .mn-btn > * { min-width: 0; }
/* --- 11. Profile spec grid — collapse to single column
earlier so it never overflows on small phones --------- */
@media (max-width: 480px) {
.mn-spec-grid { grid-template-columns: 1fr; }
}
/* --- 12. Crumb — never let long breadcrumb overflow --------
.mn-crumb-inner already has flex-wrap:wrap, but ensure
long last-segment names don't force horizontal scroll. */
.mn-crumb-inner > * { min-width: 0; max-width: 100%; }
/* --- 13. Building foot — allow proper wrapping -------------
.mn-building-foot already has flex-wrap:wrap; reinforce
that the children can shrink. */
.mn-building-foot > * { min-width: 0; max-width: 100%; }
/* --- 14. Top bar — logo + burger layout on tiny phones -----
Original: .mn-logo is `flex: 0 0 auto` with an ![]()
carrying HTML width=220 attribute. At viewports narrower
than 220+padding, the logo refused to shrink and pushed
the burger button past the right edge of the screen.
Fix: allow the logo to shrink (flex: 0 1 auto), cap the
image width to its container, and pin the burger to the
right edge of the top bar so it never overflows.
NOTE: We do NOT touch the original height:50px / 38px
rules — only add max-width constraints.
----------------------------------------------------------- */
.mn-logo {
flex: 0 1 auto;
min-width: 0;
max-width: calc(100% - 60px); /* leave room for burger */
}
.mn-logo img { max-width: 100%; }
@media (max-width: 760px) {
.mn-logo { max-width: calc(100% - 52px); }
}
@media (max-width: 360px) {
.mn-logo { max-width: calc(100% - 48px); }
}
/* Push the burger to the right edge — the original CSS
relied on .mn-nav's margin-left:auto, but .mn-nav is
display:none on mobile so the auto margin vanishes. */
@media (max-width: 1000px) {
.mn-burger { margin-left: auto; flex: 0 0 auto; }
}
/* =========================================================
DATE / TIME STRIP — sits ABOVE the sticky header on
every page. Shows live date + time + IST zone + a static
"Page last updated" stamp rendered from the file's mtime.
Goal: every page always shows a fresh timestamp so users
(and search-engine crawlers) see the page is current.
========================================================= */
.mn-datetime {
background: var(--ink);
color: var(--paper);
border-bottom: 1.5px solid var(--terra);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.4px;
line-height: 1;
position: relative;
z-index: 60; /* sits above the sticky header (which is z:50) */
/* NOTE: NOT sticky. It scrolls away with the page so it
doesn't permanently eat vertical space on mobile. */
}
.mn-datetime-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 7px 18px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
/* Pill markers for the live values */
.mn-dt-date,
.mn-dt-time,
.mn-dt-zone {
display: inline-flex;
align-items: center;
font-weight: 700;
color: var(--mustard);
letter-spacing: 0.6px;
}
/* Tiny "LIVE" indicator dot — pulses so visitors notice
the time is actually live. */
.mn-dt-time::before {
content: "";
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: #25D366;
margin-right: 6px;
box-shadow: 0 0 0 0 rgba(37,211,102,.7);
animation: mn-dt-pulse 2s infinite;
vertical-align: middle;
}
@keyframes mn-dt-pulse {
0% { box-shadow: 0 0 0 0 rgba(37,211,102,.7); }
70% { box-shadow: 0 0 0 6px rgba(37,211,102,0); }
100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
/* Separator dot */
.mn-dt-sep {
color: var(--ink-3);
opacity: 0.7;
font-weight: 400;
}
/* Zone badge */
.mn-dt-zone {
color: var(--paper-2);
font-weight: 400;
background: rgba(255,255,255,.07);
padding: 3px 7px;
border-radius: 3px;
font-size: 10.5px;
letter-spacing: 1px;
}
/* The "last updated" line — pushed to the right on desktop,
wraps to its own line on mobile. */
.mn-dt-updated {
margin-left: auto;
color: var(--paper-2);
opacity: 0.78;
font-size: 11px;
letter-spacing: 0.5px;
}
.mn-dt-updated strong {
color: var(--mustard);
font-weight: 700;
font-family: var(--mono);
}
/* -------- Responsive -------- */
@media (max-width: 760px) {
.mn-datetime-inner {
padding: 6px 14px;
gap: 6px;
font-size: 11px;
}
.mn-dt-zone { font-size: 9.5px; padding: 2px 6px; }
.mn-dt-updated { font-size: 10px; }
}
@media (max-width: 480px) {
/* On very small phones: drop the IST badge (saves space)
and let "last updated" wrap below the live time. */
.mn-datetime-inner {
flex-wrap: wrap;
gap: 5px 8px;
padding: 6px 12px;
}
.mn-dt-zone { display: none; }
.mn-dt-updated {
margin-left: 0;
width: 100%;
border-top: 1px dashed rgba(255,255,255,.12);
padding-top: 5px;
margin-top: 2px;
}
}
@media (max-width: 360px) {
.mn-datetime-inner { padding: 5px 10px; font-size: 10.5px; }
.mn-dt-date, .mn-dt-time { font-size: 10.5px; }
.mn-dt-updated { font-size: 9.5px; }
}
/* Respect reduced-motion users — stop the pulsing dot */
@media (prefers-reduced-motion: reduce) {
.mn-dt-time::before { animation: none; }
}
/* Hidden state — if JS is disabled, the bar still shows
meaningful static text via