/* SoftHub Marketplace — Glass primitive + base */ * { box-sizing: border-box; } html, body { background: var(--bg-paper); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--d-state) var(--ease), color var(--d-state) var(--ease); } /* Hide native number input spinners (up/down arrows) site-wide */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Built-in 90% UI scale — looks like Chrome zoom 90% without user action. `zoom` is supported in Chrome / Edge / Safari and Firefox 126+. */ body { zoom: var(--ui-scale, 1); } @supports not (zoom: 1) { /* Fallback for very old browsers — scale via transform. Trade-off: requires width compensation. */ body { transform: scale(var(--ui-scale, 1)); transform-origin: 0 0; width: calc(100% / var(--ui-scale, 1)); min-height: calc(100vh / var(--ui-scale, 1)); } } /* Aurora background — applied to on visible pages. Layered radial gradients (warm peach + cool sky + gold accent) on cream paper give enough chroma contrast that backdrop-filter blur on .glass surfaces produces a clearly visible "frosted glass" effect. */ body.aurora { position: relative; background: radial-gradient(ellipse 75% 55% at 12% 8%, var(--bg-aurora-1), transparent 60%), radial-gradient(ellipse 70% 50% at 88% 92%, var(--bg-aurora-2), transparent 60%), radial-gradient(ellipse 50% 40% at 50% 30%, var(--bg-aurora-3), transparent 70%), var(--bg-paper); background-attachment: fixed; background-size: 180% 180%; animation: auroraShift 22s ease-in-out infinite; } body.dark.aurora { background: radial-gradient(ellipse 60% 50% at 92% 95%, rgba(245, 220, 170, 0.18), transparent 60%), radial-gradient(ellipse 65% 45% at 8% 5%, rgba(180, 150, 220, 0.16), transparent 60%), radial-gradient(ellipse 50% 40% at 50% 30%, rgba(255, 200, 100, 0.10), transparent 70%), linear-gradient(125deg, #0a0a0a 0%, #14110d 55%, #1f1a14 100%); background-attachment: fixed; background-size: 200% 200%; animation: auroraShift 22s ease-in-out infinite; } @keyframes auroraShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Drifting spotlight — a soft light ellipse slowly travels across the viewport, providing visible motion behind .glass surfaces. This is the "ánh sáng chạy dưới bg" effect that lets users perceive blur depth. */ body.aurora::before { content: ''; position: fixed; inset: -20vh -20vw; /* Light-mode spotlight — soft warm-pink halo, very subtle so it whispers rather than dominates. Dark-mode override below pushes it brighter. */ background: radial-gradient( ellipse 38% 30% at 50% 50%, rgba(248, 220, 200, 0.22), transparent 65% ); pointer-events: none; z-index: -1; animation: auroraSpotlight 22s ease-in-out infinite alternate; will-change: transform; } body.dark.aurora::before { background: radial-gradient( ellipse 35% 28% at 50% 50%, rgba(255, 200, 120, 0.18), transparent 65% ); } @keyframes auroraSpotlight { 0% { transform: translate(-25%, -15%) rotate(0deg); } 50% { transform: translate(20%, 10%) rotate(180deg); } 100% { transform: translate(-15%, 25%) rotate(360deg); } } /* Reduced motion — disable the drift for users who prefer less motion */ @media (prefers-reduced-motion: reduce) { body.aurora, body.aurora::before { animation: none !important; } } /* Glass primitive — every elevated surface */ .glass { background: var(--surface); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--border-glass); box-shadow: var(--sh-inset), var(--sh-md); } .glass-strong { background: var(--surface-strong); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--border-glass); box-shadow: var(--sh-inset), var(--sh-md); } @supports not (backdrop-filter: blur(1px)) { .glass, .glass-strong { background: var(--surface-strong); } } /* Same-document View Transitions — used by theme toggle (theme.js) AND page navigation fade-state reveal (core/script.php). Override default crossfade so JS clip-path animation drives the visual. Cross-document `@view-transition { navigation: auto }` is NOT used — too fragile on production hosting (HTTPS redirects, www mismatch, etc.). */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 9999; } /* Page navigation "fade state" — applied to just before VT snapshot. Content remains VISIBLE (not covered by solid bg) but progressively muted, so the radiating circle reveals a faded version of the same page instead of a flat overlay. Mimics dark-mode toggle's content-visible feel. */ body.is-navigating { opacity: 0.45; filter: blur(3px) saturate(0.8); transition: none !important; } /* Typography helpers */ .t-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; } .t-display-italic { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: -0.015em; } .t-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.05em; } .eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-4); } /* Focus-visible — non-negotiable */ :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } /* Hairline utility */ .hairline-t { border-top: 1px solid var(--hairline); } .hairline-b { border-bottom: 1px solid var(--hairline); } /* Shimmer (loading) */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-strong) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 2s linear infinite; border-radius: var(--r-input); } /* Entry keyframe — transform-only (never opacity) */ @keyframes itemIn { from { transform: translateY(8px); } to { transform: translateY(0); } } @keyframes liveIn { from { transform: translateY(16px) scale(0.96); } to { transform: translateY(0) scale(1); } } @keyframes scalein { from { transform: scale(0.96) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* Hot pulse dot */ @keyframes hotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } } .hot-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); animation: hotPulse 1.4s var(--ease) infinite; } .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: hotPulse 1.6s var(--ease) infinite; } /* Ripple span (inserted by JS) */ .ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: rgba(255, 255, 255, 0.4); animation: rippleScale 600ms var(--ease) forwards; } @keyframes rippleScale { to { transform: scale(4); opacity: 0; } } /* Hide scrollbar but keep scroll */ .scroll-hide::-webkit-scrollbar { display: none; } .scroll-hide { scrollbar-width: none; }