/* ========================================================================== heYYape — standalone tool pages Applied only to pages with . Tool pages are static HTML (one file per tool). They intentionally have NO animated WebGL background — that is home-portal only. These pages reuse the exact markup each tool had inside its modal, so the modal-specific layout is neutralised here and the content flows as a normal document. ========================================================================== */ /* -------------------------------- Page shell ------------------------------ */ body.tool-page { margin: 0; min-height: 100vh; background: #f5f7fa; } body.tool-page.dark-mode { background: #121212; } /* -------------------------------- Top app bar ----------------------------- */ .tool-page-bar { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 16px; box-sizing: border-box; padding: calc(12px + constant(safe-area-inset-top)) 20px 12px; padding: calc(12px + env(safe-area-inset-top)) 20px 12px; background: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); } body.dark-mode .tool-page-bar { background: #1e1e1e; border-bottom-color: rgba(255, 255, 255, 0.12); } .tool-page-bar .back-home { display: inline-flex; align-items: center; gap: 10px; color: #333; text-decoration: none; font-weight: 600; font-size: 16px; } body.dark-mode .tool-page-bar .back-home { color: #e0e0e0; } .tool-page-bar .back-home:hover { color: #555555; } body.dark-mode .tool-page-bar .back-home:hover { color: #ffffff; } .tool-page-bar .back-home img { width: 36px; height: 36px; object-fit: contain; } .tool-page-bar .bar-spacer { flex: 1; } /* ------------------- Modal markup reused as the page body ----------------- */ body.tool-page .modal-content.tool-page-content { position: static; display: block; height: auto; min-height: 0; max-width: 900px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: calc(24px + constant(safe-area-inset-top)) 20px calc(48px + constant(safe-area-inset-bottom)); padding: calc(24px + env(safe-area-inset-top)) 20px calc(48px + env(safe-area-inset-bottom)); border: none; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; } /* On a standalone page there is no modal to close — the back link does that. */ body.tool-page .modal-header-controls, body.tool-page .modal-content > .close { display: none; } /* Keep clear of the floating dark-mode / language buttons. */ @media (max-width: 768px) { body.tool-page .modal-content.tool-page-content { max-width: 100%; padding: calc(16px + constant(safe-area-inset-top)) 16px calc(90px + constant(safe-area-inset-bottom)); padding: calc(16px + env(safe-area-inset-top)) 16px calc(90px + env(safe-area-inset-bottom)); } } /* ========================================================================== Responsive — standalone tool pages Scoped to body.tool-page so the home portal keeps its own behaviour. These rules guarantee a clean mobile layout for every /tools/*.html page without touching the shared home styles. ========================================================================== */ /* Never let a wide widget push the whole document sideways. Wide widgets (timeline, tables, map) manage their own internal scrolling below. */ body.tool-page { overflow-x: hidden; } /* --- Phones: tighten the top bar, headings and page padding --- */ @media (max-width: 600px) { .tool-page-bar { gap: 8px; padding-left: 14px; padding-right: 14px; } .tool-page-bar .back-home { font-size: 14px; } .tool-page-bar .back-home img { width: 30px; height: 30px; } body.tool-page .modal-content.tool-page-content { padding-left: 14px; padding-right: 14px; } body.tool-page .modal-header { margin-bottom: 16px; } body.tool-page .modal-header h2 { font-size: 20px; } body.tool-page .modal-header h3 { font-size: 17px; } } /* --- Narrow screens: stack form controls into a single column --- */ @media (max-width: 640px) { body.tool-page .form-row, body.tool-page .wtb-controls, body.tool-page .conversion-row { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } body.tool-page .wtb-control-group { width: 100%; } /* Full-width, comfortably tappable, 16px font avoids iOS zoom-on-focus. */ body.tool-page input[type="text"], body.tool-page input[type="number"], body.tool-page input[type="date"], body.tool-page input[type="time"], body.tool-page input[type="email"], body.tool-page input[type="search"], body.tool-page input[type="url"], body.tool-page input:not([type]), body.tool-page select, body.tool-page textarea { width: 100%; box-sizing: border-box; font-size: 16px; } } /* --- Up to tablets: wide widgets scroll internally instead of overflowing --- */ @media (max-width: 768px) { /* World Time Buddy 24-hour timeline */ body.tool-page .wtb-timeline { -webkit-overflow-scrolling: touch; } body.tool-page .wtb-timeline-grid { min-width: 760px; } /* Real data tables scroll horizontally */ body.tool-page table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Map and canvases fill the viewport width */ body.tool-page .map-container { width: 100% !important; max-width: 100%; height: 60vh; min-height: 320px; } body.tool-page canvas { width: 100% !important; max-width: 100%; height: auto !important; } } /* --- Large screens: give the page a little more breathing room --- */ @media (min-width: 1200px) { body.tool-page .modal-content.tool-page-content { max-width: 960px; } }