/* iPad/平板 RWD — max-width ≤1180px(含 iPad 直/橫與小平板/小筆電) */ /* 頂欄漢堡:與 style.css 992 斷點一致,避免本檔 1180 規則把選單列壓回橫排 */ @media (max-width: 991px) { .portal-nav>ul { flex: none; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .portal-nav>ul>li>a { flex-direction: row; } } @media (max-width: 1180px) { html:has(.portal-nav) { scroll-padding-top: clamp(52px, 12vw, 76px); } nav:not(.portal-nav) { padding-left: clamp(14px, 2vw + 10px, 32px) !important; padding-right: clamp(14px, 2vw + 10px, 32px) !important; } .portal-nav { padding-left: clamp(14px, 2vw + 10px, 32px) !important; padding-right: clamp(14px, 2vw + 10px, 32px) !important; row-gap: 12px; flex-wrap: wrap; align-items: center; } .portal-nav>ul { align-items: center; } .portal-nav .logo { width: min(240px, 38vw); max-width: 100%; flex-shrink: 0; } .portal-nav>ul { flex-wrap: wrap; gap: clamp(12px, 2vw, 18px); justify-content: flex-end; min-width: 0; flex: 1 1 280px; } .portal-nav>ul>li>a { min-height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; } nav:not(.portal-nav):not(.bilivideo-episode-nav) ul { gap: clamp(12px, 2vw, 20px); } header { background-size: cover; background-position: center center; } header#origin .hero .site-header-inner .main-title { font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem); } .hero p { font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem); } .container, .content-container { padding-left: clamp(14px, 1.5vw + 10px, 22px); padding-right: clamp(14px, 1.5vw + 10px, 22px); } .home-page .container { padding-left: clamp(14px, 1.5vw + 10px, 22px); padding-right: clamp(14px, 1.5vw + 10px, 22px); } section { padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important; } .story-grid { gap: clamp(18px, 4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .card { padding: clamp(18px, 4vw, 26px); } table { font-size: 0.92rem; } table th, table td { padding: clamp(10px, 2vw, 14px); } /* 首頁/跨時空軌跡:鑽石主軸在平板改左側縱線(對齊舊 ≤900px 邏輯) */ .merged-storyline::before { left: 18px; transform: none; } .merged-storyline .story-node { width: calc(100% - 44px); margin-left: 44px; margin-right: 0; } .merged-storyline .story-node:nth-of-type(odd), .merged-storyline .story-node:nth-of-type(even) { margin-left: 44px; margin-right: 0; } .merged-storyline .story-node::before { left: -39px; right: auto; } .merged-storyline .story-node::after, .merged-storyline .story-node:nth-of-type(odd)::after, .merged-storyline .story-node:nth-of-type(even)::after { left: 12px; right: auto; top: -14px; transform: rotate(-8deg); transform-origin: center center; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; padding: 4px 9px; } .merged-storyline .story-node:nth-of-type(odd)::before, .merged-storyline .story-node:nth-of-type(even)::before { left: -39px; right: auto; } .merged-storyline .story-node:nth-of-type(odd), .merged-storyline .story-node:nth-of-type(even) { margin-top: 35px; } /* 紀實長卷/pillar 段落 */ .chronicle-reader, .chronicle-pager { max-width: min(920px, 100%); } .variety-block { padding: clamp(18px, 4vw, 22px); } .site-header-inner .main-title { letter-spacing: clamp(3px, 1vw, 6px); } .map-layout { grid-template-columns: minmax(280px, 42%) minmax(0, 1fr); gap: clamp(16px, 3vw, 22px); } .map-my-maps-frame { height: min(52vh, 520px); min-height: 360px; } .map-embed-all { gap: 12px; } /* 重逢區兩張演唱會大卡之間留白 */ #stage-now { gap: clamp(36px, 5vw, 50px); } /* 演唱會卡片內距 */ .con-1, .con-2, .con-3, .con-4, #yellownote-stage { padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important; } .title { margin: clamp(24px, 5vw, 40px) !important; font-size: clamp(1.15rem, 2.8vw, 1.45rem); } .concert-container { padding-left: clamp(12px, 3vw, 20px); padding-right: clamp(12px, 3vw, 20px); } .search-input:focus { max-width: 100%; } .concert-page .search-input:focus { width: min(100%, 440px); } .concert-page img[src*="assets/images/concert/"] { width: min(560px, 88%); max-width: 100%; } /* 歌詞頁 */ body.lyrics-page { margin: clamp(24px, 5vw, 56px) !important; box-sizing: border-box; overflow-x: hidden; } html:has(body.lyrics-page) { font-size: 118.75% !important; } body.lyrics-page .lyrics-main-table { border-spacing: clamp(12px, 3vw, 24px) !important; max-width: 100%; } body.lyrics-page .main-left { width: 100% !important; display: block; box-sizing: border-box; } body.lyrics-page .lyrics-main-table p { font-size: 1.2rem !important; max-width: none; } body.lyrics-page h1 { font-size: clamp(1.6rem, 5vw, 2.1rem) !important; } }