/* ===== Moana Light Neon Theme ===== */ :root { --neon-blue: #0EA5E9; --neon-purple: #6366F1; --neon-pink: #F472B6; --neon-green: #10B981; --neon-violet: #8B5CF6; --neon-glow-blue: rgba(14,165,233,0.25); --neon-glow-purple: rgba(99,102,241,0.25); --neon-glow-pink: rgba(244,114,182,0.20); --bg-primary: #F8FAFC; --bg-card: #FFFFFF; --bg-soft: #F1F5F9; --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #94A3B8; --border-light: #E2E8F0; --shadow-card: 0 4px 24px rgba(14,165,233,0.08); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;line-height:1.6} img{max-width:100%;height:auto;display:block} /* ---- Neon Text Glow ---- */ .neon-glow{text-shadow:0 0 20px var(--neon-glow-blue),0 0 40px var(--neon-glow-blue)} /* ===== Navigation ===== */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(248,250,252,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-light);transition:box-shadow .3s} .nav-inner{max-width:1100px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between} .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-primary);font-weight:700;font-size:1.25rem} .nav-logo svg{filter:drop-shadow(0 0 6px var(--neon-glow-blue))} .nav-links{display:flex;list-style:none;gap:8px} .nav-links a{padding:8px 16px;border-radius:20px;text-decoration:none;color:var(--text-secondary);font-size:.9rem;font-weight:500;transition:all .3s} .nav-links a:hover{color:var(--neon-blue);background:var(--bg-soft);box-shadow:0 0 12px var(--neon-glow-blue)} .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .nav-toggle span{display:block;width:24px;height:2px;background:var(--text-primary);border-radius:2px;transition:all .3s} .nav-mobile{display:none} @media(max-width:768px){ .nav-links{display:none} .nav-toggle{display:flex} .nav-mobile{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(248,250,252,0.98);backdrop-filter:blur(16px);padding:16px 24px;border-bottom:1px solid var(--border-light)} .nav-mobile.open{display:flex;flex-direction:column;gap:4px} .nav-mobile a{padding:12px 16px;border-radius:12px;text-decoration:none;color:var(--text-secondary);font-size:1rem;font-weight:500;transition:all .2s} .nav-mobile a:hover{background:var(--bg-soft);color:var(--neon-blue)} } /* ===== Hero Section ===== */ .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 40%,rgba(14,165,233,0.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(99,102,241,0.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(244,114,182,0.04) 0%,transparent 50%);pointer-events:none} .hero-logo{margin-bottom:24px;filter:drop-shadow(0 0 20px var(--neon-glow-blue))drop-shadow(0 0 40px var(--neon-glow-purple))} .hero h1{font-size:clamp(2.8rem,7vw,5rem);font-weight:800;letter-spacing:-0.03em;background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px} .hero .subtitle{font-size:clamp(1.1rem,2.5vw,1.5rem);color:var(--text-secondary);font-weight:400;margin-bottom:12px;text-shadow:0 0 12px var(--neon-glow-blue)} .hero .hero-intro{font-size:clamp(1rem,2vw,1.15rem);color:var(--text-muted);max-width:500px;margin:0 auto 32px;line-height:1.7} .hero-scroll{animation:float 2.5s ease-in-out infinite;cursor:pointer;opacity:.5;transition:opacity .3s} .hero-scroll:hover{opacity:1} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* ===== Sections ===== */ .section{padding:100px 24px} .container{max-width:1100px;margin:0 auto} .section-title{font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:700;text-align:center;margin-bottom:8px;color:var(--text-primary);letter-spacing:-0.02em} .section-title::after{content:'';display:block;width:60px;height:4px;margin:12px auto 0;background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));border-radius:2px;box-shadow:0 0 12px var(--neon-glow-blue)} .section-desc{text-align:center;color:var(--text-muted);font-size:1.05rem;margin-bottom:48px;max-width:600px;margin-left:auto;margin-right:auto} /* ===== About Section ===== */ .about{display:flex;align-items:center;gap:48px;padding:40px 0} .about-avatar{flex-shrink:0;width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));padding:4px;box-shadow:0 0 30px var(--neon-glow-blue)} .about-avatar-inner{width:100%;height:100%;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;overflow:hidden} .about-avatar-inner img{width:90%;height:90%;object-fit:cover;border-radius:50%} .about-text h3{font-size:1.5rem;font-weight:700;margin-bottom:4px;color:var(--text-primary)} .about-text .tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} .about-text .tags span{padding:4px 14px;border-radius:20px;font-size:.82rem;font-weight:500;border:1px solid var(--border-light);color:var(--text-secondary);background:var(--bg-card);transition:all .3s} .about-text .tags span:hover{border-color:var(--neon-blue);box-shadow:0 0 10px var(--neon-glow-blue);color:var(--neon-blue)} .about-text p{color:var(--text-secondary);line-height:1.8;margin-bottom:4px} @media(max-width:640px){ .about{flex-direction:column;text-align:center;gap:24px} .about-avatar{width:140px;height:140px} } /* ===== Timeline ===== */ .timeline{max-width:700px;margin:0 auto;position:relative} .timeline::before{content:'';position:absolute;left:32px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--neon-blue),var(--neon-purple),var(--neon-pink));opacity:.5} .timeline-item{display:flex;align-items:flex-start;gap:16px;padding:20px 0;position:relative} .timeline-icon{width:48px;height:48px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;transition:all .3s;color:var(--neon-blue)} .timeline-item:hover .timeline-icon{border-color:var(--neon-blue);box-shadow:0 0 16px var(--neon-glow-blue)} .timeline-item::before{content:'';position:absolute;left:32px;top:48px;width:2px;height:calc(100% - 16px);background:var(--border-light);opacity:.3} .timeline-year{font-size:.82rem;color:var(--neon-blue);font-weight:600;min-width:50px;padding-top:4px} .timeline-title{font-weight:600;color:var(--text-primary);margin-bottom:2px} .timeline-desc{font-size:.9rem;color:var(--text-secondary)} /* ===== Gallery Grid ===== */ .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} .gallery-item{background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .4s;box-shadow:var(--shadow-card)} .gallery-item:hover{transform:translateY(-4px);border-color:var(--neon-blue);box-shadow:0 8px 32px var(--neon-glow-blue)} .gallery-img{width:100%;height:220px;object-fit:cover;border-bottom:1px solid var(--border-light)} .gallery-placeholder{width:100%;height:220px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--text-muted)} .gallery-info{padding:16px} .gallery-info h4{font-size:1rem;font-weight:600;margin-bottom:4px;color:var(--text-primary)} .gallery-year{font-size:.78rem;color:var(--neon-blue);font-weight:500} .gallery-desc{font-size:.85rem;color:var(--text-secondary);margin-top:6px;line-height:1.5} /* ===== Piano ===== */ .piano-list{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:16px} .piano-item{display:flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:16px;transition:all .3s;box-shadow:var(--shadow-card)} .piano-item:hover{border-color:var(--neon-purple);box-shadow:0 4px 20px var(--neon-glow-purple);transform:translateX(4px)} .piano-thumb{width:56px;height:56px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--text-muted)} .piano-thumb img{width:100%;height:100%;object-fit:cover} .piano-info{flex:1;min-width:0} .piano-info h4{font-size:.95rem;font-weight:600;color:var(--text-primary)} .piano-info p{font-size:.82rem;color:var(--text-secondary);margin-top:2px} .piano-play{width:44px;height:44px;border-radius:50%;border:2px solid var(--border-light);background:var(--bg-card);color:var(--neon-blue);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0} .piano-play:hover{border-color:var(--neon-blue);background:var(--neon-blue);color:#fff;box-shadow:0 0 16px var(--neon-glow-blue)} /* ===== Card List (Reading) ===== */ .card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} .card-item{display:flex;gap:16px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:16px;transition:all .3s;box-shadow:var(--shadow-card)} .card-item:hover{border-color:var(--neon-green);box-shadow:0 4px 20px rgba(16,185,129,0.15)} .card-cover{width:70px;height:100px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-soft);display:flex;align-items:center;justify-content:center} .card-cover img{width:100%;height:100%;object-fit:cover} .card-placeholder{width:70px;height:100px;display:flex;align-items:center;justify-content:center;color:var(--text-muted)} .card-info{flex:1;min-width:0} .card-info h4{font-size:.95rem;font-weight:600;color:var(--text-primary)} .card-meta{font-size:.8rem;color:var(--text-muted);margin:4px 0} .card-info p{font-size:.85rem;color:var(--text-secondary);line-height:1.5} /* ===== Craft Grid ===== */ .craft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} .craft-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;overflow:hidden;transition:all .3s;box-shadow:var(--shadow-card)} .craft-card:hover{transform:translateY(-3px);border-color:var(--neon-pink);box-shadow:0 8px 28px var(--neon-glow-pink)} .craft-img{width:100%;height:200px;object-fit:cover} .craft-placeholder{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--text-muted)} .craft-body{padding:16px} .craft-body h4{font-size:1rem;font-weight:600;color:var(--text-primary)} .craft-meta{font-size:.78rem;color:var(--neon-pink);font-weight:500;margin:4px 0} .craft-body p{font-size:.85rem;color:var(--text-secondary);line-height:1.5} /* ===== Load More Button ===== */ .load-more{text-align:center;margin-top:32px} .load-more button{padding:12px 36px;border-radius:30px;border:2px solid var(--neon-blue);background:transparent;color:var(--neon-blue);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s;letter-spacing:.02em} .load-more button:hover{background:var(--neon-blue);color:#fff;box-shadow:0 0 20px var(--neon-glow-blue)} /* ===== Lightbox ===== */ .lightbox{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,0.92);display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(8px)} .lightbox.open{display:flex} .lightbox-content{max-width:90vw;max-height:85vh;border-radius:12px;box-shadow:0 0 40px rgba(14,165,233,0.15)} .lightbox-close{position:absolute;top:24px;right:24px;color:#fff;font-size:28px;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.1);transition:all .2s} .lightbox-close:hover{background:rgba(255,255,255,0.2)} .lightbox-title{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:.95rem;background:rgba(0,0,0,0.5);padding:8px 20px;border-radius:8px} /* ===== Footer ===== */ .footer{padding:40px 24px;text-align:center;background:var(--bg-card);border-top:1px solid var(--border-light)} .footer p{font-size:.9rem;color:var(--text-muted)} .footer a{color:var(--neon-blue);text-decoration:none;transition:all .2s} .footer a:hover{text-shadow:0 0 8px var(--neon-glow-blue)} .footer-heart{color:var(--neon-pink)} .footer-beian{margin-top:4px;font-size:.8rem} /* ===== Fade In Animation ===== */ .fade-in{opacity:0;transform:translateY(24px);transition:all .6s cubic-bezier(0.16,1,0.3,1)} .fade-in.visible{opacity:1;transform:translateY(0)} /* ===== Audio Player ===== */ .audio-player{position:fixed;bottom:24px;right:24px;z-index:150;background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;padding:16px 20px;display:none;align-items:center;gap:12px;box-shadow:0 4px 24px rgba(0,0,0,0.1);max-width:360px} .audio-player.show{display:flex} .audio-player audio{flex:1;height:36px} .audio-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;padding:4px} /* ===== Mobile Responsive ===== */ @media(max-width:640px){ .section{padding:60px 16px} .gallery{grid-template-columns:1fr 1fr;gap:12px} .gallery-img,.gallery-placeholder{height:160px} .card-list{grid-template-columns:1fr} .craft-grid{grid-template-columns:1fr 1fr;gap:12px} .craft-img,.craft-placeholder{height:160px} }

Moana · 小海风

用画笔记录世界 · 用琴键表达心情

2018年夏天出生的小姑娘，爱笑、爱画、爱弹琴。

关于

小海风 · Moana

画画 钢琴 阅读 手工

2018年夏天出生，一个爱笑、爱画、爱弹琴的小姑娘。对世界充满好奇，最喜欢用画笔把想象中的故事变成纸上的色彩，也喜欢在钢琴上弹出属于自己的小旋律。

性格安静时像小猫，开心时像小鸟。梦想是长大后开一间自己的画室，里面有彩虹色的墙和永远吃不完的糖果。

成长印记

每一个重要时刻，都是成长路上闪光的足迹

2018 · 夏
来到这个世界
六月清晨，带着第一声啼哭，像海风一样轻盈地来了。
2020 · 秋
第一次拿起画笔
在纸上画了一个大大的圆圈，说是太阳——虽然看起来更像土豆。
2023 · 春
开始学钢琴
小手刚能够到琴键，第一首曲子是《小星星》。

钢琴演奏

琴键上的小旋律

小星星 Twinkle Twinkle

第一首学会的曲子 · 2023年春

致爱丽丝 Für Elise

最喜欢的古典曲目 · 2024年秋

菊次郎的夏天 Summer

暑假练了一个月 · 2025年夏

阅读时光

书页间的奇妙旅行

猜猜我有多爱你

山姆·麦克布雷尼 · 2024

最喜欢的睡前故事，每次读到小兔子张开手臂说「我爱你这么多」都会跟着比划。

好饿的毛毛虫

艾瑞·卡尔 · 2023

跟着毛毛虫一起数水果、认星期，最后变成蝴蝶的那一刻每次都哇地叫出来。

大卫，不可以

大卫·香农 · 2024

看到大卫捣蛋会咯咯笑，但最后一页妈妈抱住大卫说「我爱你」时，也会安静下来。