/* Source notice / 源码声明 Author / 作者: 伤感咩吖 Project / 项目: aurora-fansite License / 许可: Custom Proprietary Fan Site License. Unauthorized copying, cloning, redistribution, or template reuse is prohibited. / 自定义专有粉丝站许可证。禁止未授权复制、 克隆、再分发或照搬为模板。 Disclaimer / 免责声明: Unofficial non-commercial fan site; not affiliated with or endorsed by AURORA or related rights holders. / 非官方非商业粉丝站，与 AURORA 或相关权利方无隶属或背书关系。 */ /* ============================================================ base.css — shared foundation Author: 伤感咩吖 Reset, variables, atmospherics, custom cursor, motion respect. Loaded by both gate and main page. ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } @font-face { font-family: 'ConlangGlyphs'; src: url('../fonts/ConlangGlyphs.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'AURORAxCHROME'; src: url('../fonts/AURORAxCHROME.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } :root { --bg: #050414; --ink: #ece6f2; --ink-dim: #a59cb4; --ink-faint: #5a526a; --line: rgba(236, 230, 242, 0.10); --line-bright: rgba(236, 230, 242, 0.22); --aurora-a: #a8e6cf; --aurora-b: #88d8e0; --aurora-c: #b8a9e8; --aurora-d: #f0a0c0; --serif: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', serif; --sans: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; --display: 'IBM Plex Sans', 'Inter', system-ui, sans-serif; --chrome: 'AURORAxCHROME', 'IBM Plex Sans', 'Inter', system-ui, sans-serif; --glyph: 'ConlangGlyphs', var(--sans); --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.45, 0, 0.15, 1); } html { background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Performance tier hook — JS adds .perf-low or .perf-mid to on weak devices (low RAM / low cores / save-data / coarse pointer / reduced motion). The atmospheric layer, motifs, blurs and blend modes are scaled down accordingly. */ html.perf-low, html.perf-low body { background: #050414; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.65; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden; overflow-x: clip; } ::selection { background: rgba(168, 230, 207, 0.25); color: #fff; } ::-webkit-scrollbar { width: 0; height: 0; } html { scrollbar-width: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ====== Atmospherics ====== */ #aurora-canvas, #particle-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; z-index: 0; } #aurora-canvas { z-index: 0; } #particle-canvas { z-index: 1; } .vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%), linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 12%, transparent 88%, rgba(0,0,0,0.35) 100%); } .scanlines { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px ); opacity: 0.4; mix-blend-mode: overlay; } .grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-repeat: repeat; background-size: 180px 180px; } /* ====== Custom cursor (3-layer aurora sparkle) ====== */ @media (hover: hover) and (pointer: fine) { body { cursor: none; } a, button, input, label, [data-cursor] { cursor: none; } } .cursor-star, .cursor-halo { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 0.5s var(--ease); will-change: transform; } .cursor-star.on, .cursor-halo.on { opacity: 1; } .cursor-star { width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; background: linear-gradient(135deg, var(--aurora-a) 0%, var(--aurora-b) 30%, var(--aurora-c) 65%, var(--aurora-d) 100%); background-size: 300% 300%; clip-path: polygon( 50% 0%, 56% 38%, 75% 25%, 62% 44%, 100% 50%, 62% 56%, 75% 75%, 56% 62%, 50% 100%, 44% 62%, 25% 75%, 38% 56%, 0% 50%, 38% 44%, 25% 25%, 44% 38% ); filter: drop-shadow(0 0 4px rgba(168,230,207,0.65)); animation: cursorShift 6s ease infinite; transition: opacity 0.5s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), filter 0.3s var(--ease); } .cursor-star.expand { width: 26px; height: 26px; margin-left: -13px; margin-top: -13px; filter: drop-shadow(0 0 8px rgba(168,230,207,0.9)) drop-shadow(0 0 14px rgba(240,160,192,0.45)); } @keyframes cursorShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .cursor-halo { width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; border-radius: 50%; border: 1px solid rgba(184, 169, 232, 0.35); box-shadow: inset 0 0 12px rgba(168, 230, 207, 0.18); transition: opacity 0.5s var(--ease), width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); } .cursor-halo.expand { width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; border-color: rgba(168, 230, 207, 0.7); box-shadow: inset 0 0 20px rgba(168, 230, 207, 0.3), 0 0 30px rgba(184, 169, 232, 0.25); } @media (hover: none) { body, a, button { cursor: auto !important; } .cursor-star, .cursor-halo { display: none !important; } } /* Shared keyframe used by gradient text in both pages */ @keyframes shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ====== Low-performance fallback ====== Triggered by JS when a weak device is detected. Strips expensive composite layers: blend modes, large blurs, animated gradients and the custom cursor. The atmospheric canvas script also short-circuits its loops when this class is present, so visual cost drops to nearly zero. */ html.perf-low .grain, html.perf-low .scanlines { display: none !important; } html.perf-low .vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); } html.perf-low #aurora-canvas, html.perf-low #particle-canvas { display: none !important; } html.perf-low body { background: radial-gradient(ellipse at 30% 20%, rgba(120,160,200,0.18), transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(184,150,210,0.14), transparent 60%), var(--bg); background-attachment: fixed; } html.perf-low .cursor-star, html.perf-low .cursor-halo { display: none !important; } html.perf-low, html.perf-low body, html.perf-low a, html.perf-low button, html.perf-low input, html.perf-low label, html.perf-low [data-cursor] { cursor: auto !important; } /* Mid tier — keep canvases but flatten heavy blends. */ html.perf-mid .scanlines { display: none !important; } html.perf-mid .grain { opacity: 0.04; mix-blend-mode: normal; }