/* ========================================================================== LingoGarden · 統一設計系統 (A 暖系風格 · 跟 index.html / J scroll 版) ========================================================================== 用法: 各 page 加 設計 tokens (14 個顏色 + 1 font + 1 radius), 共用 class: ========================================================================== */ :root { --paper:#FFF7F0; --card:#FFFFFF; --ink:#3A2E2A; --mute:#A89B92; --pink:#FFB6C1; --mint:#B5EAD7; --sky:#C7E9FF; --butter:#FFEAA7; --peach:#FFD3B6; --lavender:#E1BEE7; --coral:#FF8E8E; --orange:#FFB347; --green:#A8E6CF; --yellow:#FFD93D; --radius:28px; --font:'Zen Maru Gothic','Noto Sans TC',sans-serif; } body { font-family: var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } /* ============= 5 個 background bubbles (固定背景, 唔阻擋 click) ============= */ .bg-bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .bg-bubbles span{position:absolute;border-radius:50%;opacity:.25;animation:float-bubble 20s ease-in-out infinite} .bg-bubbles span:nth-child(1){width:200px;height:200px;background:var(--pink);top:5%;left:-50px;animation-delay:0s} .bg-bubbles span:nth-child(2){width:140px;height:140px;background:var(--mint);top:30%;right:5%;animation-delay:-3s} .bg-bubbles span:nth-child(3){width:180px;height:180px;background:var(--sky);top:60%;left:8%;animation-delay:-6s} .bg-bubbles span:nth-child(4){width:120px;height:120px;background:var(--butter);top:80%;right:15%;animation-delay:-9s} .bg-bubbles span:nth-child(5){width:160px;height:160px;background:var(--lavender);top:15%;right:25%;animation-delay:-12s} @keyframes float-bubble{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(15deg)}} /* ============= Sticky topbar (50px 圓, 3px pink border, 8px hard shadow) ============= */ .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#fff;border-radius:50px;box-shadow:0 8px 24px rgba(255,142,140,.12);border:3px solid var(--pink);margin-bottom:32px;flex-wrap:wrap;gap:12px} .brand{font-family:var(--font);font-size:20px;font-weight:900;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)} .brand-emoji{width:36px;height:36px;background:linear-gradient(135deg,var(--coral),var(--orange));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 12px rgba(255,142,140,.4)} .brand-en{font-size:10px;font-weight:700;color:var(--mute);letter-spacing:1.5px;text-transform:uppercase;margin-left:2px} .brand-back{color:var(--mute);text-decoration:none;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:50px;transition:.15s} .brand-back:hover{background:var(--cream);color:var(--ink)} /* ============= Hero (3px 黑色 border, 8px hard shadow, 32px 圓, 粉紅 gradient) ============= */ .hero{padding:36px 24px;background:linear-gradient(135deg,#FFE0E6,#FFD3DD);border:3px solid var(--ink);border-radius:32px;box-shadow:0 8px 0 var(--ink);text-align:center;margin-bottom:36px;position:relative;overflow:hidden} .hero::before,.hero::after{content:'';position:absolute;font-size:42px;opacity:.4;top:10px} .hero::before{left:18px;transform:rotate(-12deg)} .hero::after{right:18px;transform:rotate(12deg)} .hero-eyebrow{display:inline-block;background:#fff;border:2px solid var(--coral);color:var(--coral);font-size:11px;font-weight:800;letter-spacing:1.5px;padding:4px 12px;border-radius:50px;margin-bottom:10px;text-transform:uppercase} .hero-title{font-family:var(--font);font-size:48px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin-bottom:8px} .hero-title .em{color:var(--coral);position:relative;display:inline-block} .hero-title .em::after{content:'';position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--butter);z-index:-1;border-radius:8px;transform:skew(-8deg)} .hero-sub{font-size:15px;color:var(--mute);font-weight:600;margin-bottom:18px;line-height:1.6;max-width:640px;margin-left:auto;margin-right:auto} .hero-tip{background:rgba(255,255,255,.6);border:2px dashed var(--ink);border-radius:18px;padding:14px 18px;max-width:560px;margin:0 auto;font-size:14px;line-height:1.7;color:var(--ink)} .hero-tip b{color:var(--coral)} /* ============= Section title ============= */ .section-title{font-size:24px;font-weight:900;margin:0 0 18px;display:flex;align-items:center;gap:10px} .section-title-emoji{font-size:30px} .section-meta{font-size:13px;font-weight:600;color:var(--mute);margin-left:6px} /* ============= Wrap ============= */ .wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:20px 24px} /* ============= Entry card (28px 圓, 4px 黑色 border, 8px hard shadow) ============= */ .entry-card{background:#fff;border:4px solid var(--ink);border-radius:var(--radius);padding:24px 22px;display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit;cursor:pointer;transition:.2s;box-shadow:0 6px 0 var(--ink);position:relative;overflow:hidden} .entry-card:hover{transform:translate(-2px,-2px);box-shadow:0 8px 0 var(--ink)} .entry-card:active{transform:translate(2px,2px);box-shadow:0 4px 0 var(--ink)} .entry-ico{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:40px;flex-shrink:0;animation:bounce-soft 2.5s ease-in-out infinite} @keyframes bounce-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .entry-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0} .entry-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral)} .entry-title{font-size:22px;font-weight:900;letter-spacing:-.5px;line-height:1.1} .entry-desc{font-size:12px;color:var(--mute);line-height:1.5;margin-top:2px} .entry-go{position:absolute;bottom:14px;right:16px;background:var(--ink);color:#fff;padding:5px 12px;border-radius:50px;font-weight:800;font-size:10px;letter-spacing:1px;text-transform:uppercase} /* ============= Game card (28px 圓, 4px 黑色 border, 8px hard shadow) ============= */ .game-card{background:#fff;border:4px solid var(--ink);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 0 var(--ink);position:relative;overflow:hidden;transition:.2s;text-decoration:none;color:inherit;cursor:pointer} .game-card:hover{transform:translate(-2px,-2px);box-shadow:0 8px 0 var(--ink)} .game-card:active{transform:translate(2px,2px);box-shadow:0 4px 0 var(--ink)} .game-ico{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0;animation:bounce-soft 2.5s ease-in-out infinite} /* ============= Chip (50px 圓, 2px 黑色 border, 2px shadow) ============= */ .chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:#fff;border:2px solid var(--ink);border-radius:50px;font-size:12px;font-weight:800;color:var(--ink);text-decoration:none;box-shadow:0 2px 0 var(--ink);transition:.15s;font-family:inherit} .chip:hover{transform:translate(-1px,-1px);box-shadow:0 3px 0 var(--ink)} /* ============= Button ============= */ .btn{background:#fff;border:2px solid var(--ink);border-radius:50px;padding:8px 16px;font-size:13px;font-weight:800;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:4px;transition:.2s;cursor:pointer;font-family:inherit} .btn:hover{background:var(--cream);transform:translate(-1px,-1px);box-shadow:0 2px 0 var(--ink)} .btn-primary{background:var(--ink);color:#fff} .btn-primary:hover{background:var(--coral);color:#fff} .btn-coral{background:var(--coral);color:#fff;border-color:var(--ink)} .btn-coral:hover{background:#E55A4A;color:#fff} /* ============= Footer (dashed border) ============= */ .footer{text-align:center;padding:20px;color:var(--mute);font-size:12px;line-height:1.7;border-top:2px dashed var(--mute);position:relative;z-index:1} .footer b{color:var(--ink)}