@tailwind base; @tailwind components; @tailwind utilities; html, body, #root { height: 100%; } /* Only clip horizontal overflow on ; this propagates to the viewport and keeps the window as the vertical scroller. Adding overflow-x to (which has height:100%) would force its computed overflow-y to `auto`, turning body into its own scroll box so window.scrollY never moves — which breaks scroll-position features like the back-to-top button. */ html { overflow-x: hidden; } body { @apply bg-ark-bg text-neutral-100 antialiased; } /* Match theme: avoid default blue accent on controls */ :root { accent-color: #eeb726; } header a, header button { -webkit-tap-highlight-color: transparent; } .ark-header-menu-enter, .ark-header-popover-enter { animation: ark-header-menu-enter 180ms ease-out both; transform-origin: top center; will-change: clip-path, opacity; } @keyframes ark-header-menu-enter { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* Desktop header nav: thin scrollbar when links overflow (still 單列) */ .header-nav-scroll { scrollbar-width: thin; scrollbar-color: rgba(238, 183, 38, 0.45) transparent; } .header-nav-scroll::-webkit-scrollbar { height: 4px; } .header-nav-scroll::-webkit-scrollbar-thumb { background-color: rgba(238, 183, 38, 0.45); border-radius: 9999px; } .header-nav-scroll::-webkit-scrollbar-track { background: transparent; } .gold-underline { box-shadow: inset 0 -2px 0 #eeb726; } /* Reusable skeleton placeholder with a soft shimmer sweep. */ .ark-skeleton { position: relative; overflow: hidden; background-color: #1d1e23; } .ark-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.05), transparent ); animation: ark-shimmer 1.5s infinite; } @keyframes ark-shimmer { 100% { transform: translateX(100%); } } /* Image fade-in: add .is-loaded on the img's onLoad handler. */ .ark-img-fade { opacity: 0; transition: opacity 0.4s ease-out; } .ark-img-fade.is-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ark-skeleton::after { animation: none; } .ark-img-fade { opacity: 1; transition: none; } } /* Brief gold ring pulse when a bubble is targeted via a #post- deep link. */ .ark-bubble-highlight { border-radius: 1rem; animation: ark-bubble-highlight 2s ease-out both; } @keyframes ark-bubble-highlight { 0%, 35% { box-shadow: 0 0 0 2px rgba(238, 183, 38, 0.9); } 100% { box-shadow: 0 0 0 2px rgba(238, 183, 38, 0); } } @media (prefers-reduced-motion: reduce) { .ark-bubble-highlight { animation: none; } } .message-stream-noncopyable-control, .message-stream-noncopyable-control * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .message-stream-copyable-text, .message-stream-copyable-text * { -webkit-user-select: text; user-select: text; } .message-stream-copyable-text { -webkit-touch-callout: default; cursor: text; } .message-stream-copyable-text::selection, .message-stream-copyable-text *::selection { background: rgba(238, 183, 38, 0.35); }