/* ========================================================================== แข็งแรง.com — Base styles, custom scrollbar and animations (replaces src/index.css + the motion/react animations) ========================================================================== */ body { font-family: "Sarabun", "Inter", ui-sans-serif, system-ui, sans-serif; background-color: #f7faf9; color: #1e293b; /* `clip` prevents horizontal overflow WITHOUT turning into a scroll container (which `hidden` does — it forces overflow-y to auto and stops the window scroll event from firing). This keeps the viewport as the scroller. */ overflow-x: clip; } /* Beautiful custom scrollbar for clinical articles */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Hidden scrollbar helper (category pills row) */ .scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; } .scrollbar-none::-webkit-scrollbar { display: none; } /* ========================================================================== Keyframes ========================================================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleUp { from { opacity: 0; transform: scale(0.95) translateY(15px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 600px; } } /* ========================================================================== Animation utility classes (used by markup) ========================================================================== */ .animate-fadeIn { animation: fadeIn 0.5s ease-out both; } /* Use backwards fill only: retaining the final transform with `both` creates a containing block for fixed descendants. That made the article's floating TOC and share widgets behave as if they were tied to the first re-render (such as clicking the rating button) instead of remaining fixed to the viewport. */ .view-enter { animation: fadeInUp 0.35s ease-out backwards; } .animate-scaleUp { animation: scaleUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .animate-slideInRight{ animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } .animate-backdrop { animation: fadeBackdrop 0.3s ease-out both; } .animate-slideDown { animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Carousel smooth track */ .carousel-track { transition: transform 0.5s ease-out; } /* Line clamp fallback (Tailwind v4 provides these, kept for safety) */ .line-clamp-1, .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-1 { -webkit-line-clamp: 1; } .line-clamp-2 { -webkit-line-clamp: 2; } /* ========================================================================== Toast notifications (top-right slide-in, 3s countdown loadbar) ========================================================================== */ #toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; max-width: calc(100vw - 2rem); } .toast { pointer-events: auto; } .toast-enter { animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .toast-exit { animation: toastOut 0.4s cubic-bezier(0.4, 0, 1, 1) both; } @keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } } /* The side loadbar depletes from full height to zero over 3 seconds */ .toast-bar { animation: toastBar 3s linear forwards; } @keyframes toastBar { from { height: 100%; } to { height: 0%; } } /* ========================================================================== Rich article content — shared by the public article body (.rich-content) and the admin WYSIWYG editor (.rc-editor), so "what you edit" matches "what you get". Element-level styling keeps stored HTML clean (bare tags). ========================================================================== */ .rich-content { color: #374151; font-size: 16.5px; line-height: 1.8; font-weight: 500; } .rich-content > *:first-child { margin-top: 0; } .rich-content > *:last-child { margin-bottom: 0; } .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { font-family: "Space Grotesk", "Sarabun", sans-serif; color: #003b46; font-weight: 800; line-height: 1.3; margin: 1.4em 0 0.5em; scroll-margin-top: 6rem; } .rich-content h1 { font-size: 24px; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25em; } .rich-content h2 { font-size: 20px; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25em; } .rich-content h3 { font-size: 17px; } .rich-content h4 { font-size: 15px; } .rich-content p { margin: 0.75em 0; } .rich-content strong, .rich-content b { color: #003b46; font-weight: 800; } .rich-content em, .rich-content i { font-style: italic; } .rich-content a { color: #028a9b; font-weight: 700; text-decoration: underline; } .rich-content ul, .rich-content ol { margin: 0.75em 0; padding-left: 1.5em; color: #4b5563; font-weight: 600; } .rich-content ul { list-style: disc; } .rich-content ol { list-style: decimal; } .rich-content li { margin: 0.25em 0; } .rich-content img { max-width: 100%; height: auto; border-radius: 1rem; border: 1px solid #f1f5f9; margin: 1.25em 0; } .rich-content figure { margin: 1.25em 0; } .rich-content figure img { margin: 0; } .rich-content figcaption { text-align: center; font-size: 11px; color: #9ca3af; margin-top: 0.5em; } .rich-content table { width: 100%; border-collapse: collapse; margin: 1.25em 0; font-size: 14px; display: block; overflow-x: auto; } .rich-content th { background: #f0f7f7; color: #003b46; font-weight: 800; border: 1px solid #bcdce2; padding: 0.5em 0.75em; text-align: start; } .rich-content td { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; color: #4b5563; font-weight: 600; } .rich-content pre { background: #0f2b30; color: #e5e7eb; border-radius: 1rem; padding: 1rem; overflow-x: auto; margin: 1.25em 0; } .rich-content pre code { font-family: "JetBrains Mono", monospace; font-size: 12.5px; background: none; color: inherit; padding: 0; } .rich-content code { font-family: "JetBrains Mono", monospace; background: #f0f7f7; color: #005f6e; padding: 0.1em 0.35em; border-radius: 0.35em; font-size: 0.9em; } .rich-content blockquote { border-left: 4px solid #bcdce2; padding-left: 1em; color: #6b7280; font-style: italic; margin: 1em 0; } .rich-content hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5em 0; } .rich-content .rc-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.25em 0; border-radius: 1rem; overflow: hidden; background: #000; } .rich-content .rc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Click-to-play YouTube facade: thumbnail + big play button. */ .rich-content .rc-yt { cursor: pointer; } .rich-content .rc-yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .rich-content .rc-yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 50px; border-radius: 14px; background: rgba(20, 20, 20, 0.78); transition: background 0.2s ease, transform 0.2s ease; } .rich-content .rc-yt-play::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; } .rich-content .rc-yt:hover .rc-yt-play, .rich-content .rc-yt:focus-visible .rc-yt-play { background: #ff0000; transform: translate(-50%, -50%) scale(1.06); } .rich-content .rc-btn { display: inline-flex; align-items: center; gap: 0.4em; background: #028a9b; color: #fff !important; padding: 0.6em 1.2em; border-radius: 0.75rem; font-weight: 700; text-decoration: none !important; margin: 0.5em 0; transition: background 0.2s; } .rich-content .rc-btn:hover { background: #005f6e; } /* ========================================================================== Animated hamburger button (mobile) — circular wrapper, hover effect, and a smooth morph into an X when open. ========================================================================== */ /* Layout (display/align) is applied via Tailwind utilities on the button so the responsive `lg:hidden` can override it — otherwise this rule would win by source order and the button would show on desktop too. */ .ham { width: 44px; height: 44px; border-radius: 9999px; background: #f1f5f9; border: 1px solid transparent; cursor: pointer; transition: background .25s ease, transform .2s ease, box-shadow .25s ease; -webkit-tap-highlight-color: transparent; } .ham:hover { background: #dff1f2; transform: scale(1.08); box-shadow: 0 6px 16px rgba(2, 138, 155, .2); } .ham:active { transform: scale(.92); } .ham-box { position: relative; width: 20px; height: 16px; } .ham-line { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #005f6e; transition: transform .38s cubic-bezier(.68, -.55, .27, 1.55), opacity .2s ease, width .3s ease, background .25s ease; } .ham-line-1 { top: 0; } .ham-line-2 { top: 7px; } .ham-line-3 { top: 14px; } .ham:hover .ham-line { background: #028a9b; } .ham:hover .ham-line-1 { width: 65%; } .ham:hover .ham-line-3 { width: 82%; } .ham.is-open { background: #028a9b; } .ham.is-open:hover { background: #005f6e; transform: scale(1.08) rotate(90deg); } .ham.is-open .ham-line { background: #fff; width: 100%; } .ham.is-open .ham-line-1 { top: 7px; transform: rotate(45deg); } .ham.is-open .ham-line-2 { opacity: 0; transform: scaleX(0); } .ham.is-open .ham-line-3 { top: 7px; transform: rotate(-45deg); } /* Mobile menu is always in the DOM; visibility toggled via .is-open so the button morph + menu slide can animate without a full re-render. */ .mobile-menu { opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .25s ease, transform .32s cubic-bezier(.16, 1, .3, 1), visibility .25s ease; } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* WYSIWYG editable surface */ .rc-editor { min-height: 300px; outline: none; padding: 1rem 1.1rem; } .rc-editor:empty::before { content: attr(data-placeholder); color: #cbd5e1; font-style: italic; } .rc-editor:focus { box-shadow: none; } /* ========================================================================== GLOBAL TYPE SCALE — a single harmonious set of readable sizes for the whole site. Many original utilities were too small (text-[10px], text-xs), so each tier is remapped up to a comfortable size while keeping a clear hierarchy; line-height is tuned per tier (looser for body, tighter for headings). `:root` prefix gives higher specificity than Tailwind's text-* utilities. ========================================================================== */ /* micro & label tiers (badges, captions, meta) */ :root .text-\[8px\] { font-size: 11px; line-height: 1.35; } :root .text-\[9px\] { font-size: 12px; line-height: 1.4; } :root .text-\[10px\] { font-size: 13px; line-height: 1.45; } :root .text-\[11px\] { font-size: 14px; line-height: 1.45; } :root .text-\[13px\] { font-size: 15px; line-height: 1.55; } :root .text-\[14px\] { font-size: 16px; line-height: 1.6; } :root .text-\[16px\] { font-size: 17px; line-height: 1.65; } /* one-off heading sizes */ :root .text-\[20px\] { font-size: 23px; line-height: 1.3; } :root .text-\[22px\] { font-size: 25px; line-height: 1.28; } :root .text-\[23px\] { font-size: 26px; line-height: 1.25; } /* named tiers */ :root .text-xs { font-size: 15px; line-height: 1.55; } :root .text-sm { font-size: 16px; line-height: 1.6; } :root .text-base { font-size: 17px; line-height: 1.65; } :root .text-lg { font-size: 20px; line-height: 1.4; } :root .text-xl { font-size: 23px; line-height: 1.35; } :root .text-2xl { font-size: 28px; line-height: 1.3; } :root .text-3xl { font-size: 34px; line-height: 1.25; } /* ========================================================================== Floating Table-of-Contents widget — sticks below the header in the article's left gutter and slides in from the left once the inline TOC scrolls out of view (toggled by IntersectionObserver in app.js). Width is FLUID: the left edge keeps a fixed margin while the right edge is pinned to just before the article's left edge (max-w-4xl = 56rem, half 28rem), so the widget grows/shrinks with the gutter but can NEVER overlap the content. Shown only on viewports wide enough to hold it. ========================================================================== */ #toc-floating { position: fixed; top: 5rem; /* sticky just under the sticky header */ right: calc(50% + 28rem + 1rem); /* RIGHT edge hugs the article's left edge (1rem gap) */ left: auto; /* Extend left by its own width, capped to the available gutter so it hugs the article instead of the screen edge and never runs off-screen on the left. */ width: min(280px, calc(50vw - 28rem - 1.75rem)); max-height: calc(100vh - 6.5rem); z-index: 40; transform: translateX(-135%); /* parked off-screen to the left */ opacity: 0; pointer-events: none; display: none; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; } #toc-floating.toc-visible { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Show once there's enough gutter beside the 896px article to fit it. */ @media (min-width: 1180px) { #toc-floating { display: block; } } /* Active TOC entry (scroll-spy highlight) — applies to both the inline and the floating TOC. Higher specificity than Tailwind's utility classes on the inner spans, so it overrides them without !important. */ [data-action="toc-jump"].toc-active { background-color: #f0f7f7; } [data-action="toc-jump"].toc-active > span:first-child { background-color: #028a9b; border-color: #028a9b; color: #ffffff; } [data-action="toc-jump"].toc-active > span:last-child { color: #028a9b; } /* ========================================================================== Floating social-share widget — mirror of the TOC in the RIGHT gutter, slides in from the right. Its left edge is pinned just past the article's right edge so it never overlaps the content. ========================================================================== */ #share-floating { position: fixed; top: 5rem; left: calc(50% + 28rem + 1rem); /* LEFT edge hugs the article's right edge (1rem gap) */ right: auto; width: min(280px, calc(50vw - 28rem - 1.75rem)); max-height: calc(100vh - 6.5rem); z-index: 40; transform: translateX(135%); /* parked off-screen to the right */ opacity: 0; pointer-events: none; display: none; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; } #share-floating.share-visible { transform: translateX(0); opacity: 1; pointer-events: auto; } @media (min-width: 1180px) { #share-floating { display: block; } }