@media(min-width:901px){.navbar-right,.navbar-links,#teamNavItem,#newsNavItem{position:relative;z-index:3}#teamNavItem,#newsNavItem{padding-block:20px;margin-block:-20px}#teamNavItem .nav-dropdown,#newsNavItem .nav-dropdown{top:100%;margin-top:6px;z-index:6}#teamNavItem .nav-dropdown::before,#newsNavItem .nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}} /* Contact keeps the one deliberate navy "signature" panel; about & services now read as light editorial surfaces instead of repeating it. */ #view-contact .contact-form{background:var(--navy);border:1px solid rgba(192,154,126,.32);border-radius:28px;box-shadow:0 18px 44px rgba(22,40,63,.11)} #view-contact .view-title{font-weight:600} /* 除首頁外，各分頁標題（關於南嶼／專業團隊／服務項目／最新消息／承辦案例／聯絡南嶼）放大到與服務項目卡片標題（如「刑事案件」）同級的字體大小，並加粗；不影響上方導覽列按鈕。 */ .eyebrow span{font-size:21px;font-weight:600} #view-about .about-copy{max-width:none;padding:clamp(28px,4vw,50px) clamp(30px,4vw,54px);gap:25px;align-items:stretch;background:rgba(255,255,255,.4);border:0;border-left:3px solid var(--gold);border-radius:2px;box-shadow:none} #view-about .about-copy p,#view-about .about-copy p.lead{display:block;width:100%;margin:0;padding:0;text-align:justify;text-align-last:left;text-justify:inter-ideograph;text-indent:0;overflow-wrap:break-word} #view-about .about-copy p.lead{font-size:clamp(21px,2.4vw,26px);line-height:1.9} #view-about .about-strip{margin-top:34px} #view-services .services-grid>article{position:relative;padding:34px 30px 30px;background:var(--cream-3);border:1px solid var(--border-2);border-radius:22px;box-shadow:0 14px 34px rgba(22,40,63,.06);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s ease} #view-services .services-grid>article:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(22,40,63,.12)} #view-services .service-head{position:relative;z-index:1} #view-services .service-head span{position:absolute;top:-8px;right:-2px;z-index:0;font-family:var(--serif);font-size:68px;font-weight:600;letter-spacing:0;color:rgba(22,40,63,.06);line-height:1;pointer-events:none} #view-contact .contact-form{width:min(100%,860px);padding:clamp(28px,4vw,48px);margin:40px auto 0} #view-contact .contact-note,#view-contact .field label{color:rgba(246,241,232,.84)} #view-contact .field input,#view-contact .field textarea{background:rgba(246,241,232,.96);border-color:rgba(246,241,232,.55);color:var(--navy)} #view-contact .submit-btn{border-radius:999px;background:#d4a07c;color:var(--navy)} #view-contact .submit-btn:hover{background:#f6f1e8} #view-contact .form-msg{color:rgba(246,241,232,.73)} #view-contact .form-grid,#view-contact .field{min-width:0} #view-contact .field input,#view-contact .field textarea{width:100%;max-width:100%;min-width:0} #view-contact .contact-facts{border-top-color:rgba(22,40,63,.18)} #view-contact .contact-row{border-bottom-color:rgba(22,40,63,.18)} #view-contact .contact-row .label{color:var(--rust)} #view-contact .contact-row .value{color:var(--navy)} /* 最新消息／承辦案例已各自獨立成分頁（不再有頁內分類側欄），共用 .ny-news-shared 樣式。 */ .ny-news-shared .news-list{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:16px;border-top:0} .ny-news-shared .english-article-notice{margin:0 0 16px;color:var(--muted);font-family:var(--sans);font-size:12px;line-height:1.7;letter-spacing:.035em} .ny-news-shared .news-item{width:100%;height:174px;padding:26px 28px;border:1px solid rgba(192,154,126,.3);border-radius:24px;background:var(--navy);box-shadow:0 12px 30px rgba(22,40,63,.09);overflow:hidden;transition:background .28s ease,transform .28s var(--ease),box-shadow .28s ease} .ny-news-shared .news-item:hover{padding-left:28px;background:#203956;transform:translateY(-4px);box-shadow:0 20px 40px rgba(22,40,63,.18)} .ny-news-shared .news-date{color:#d4a07c} .ny-news-shared .news-title{margin-bottom:10px;color:#f6f1e8;font-size:clamp(18px,2vw,21px);line-height:1.62;letter-spacing:.08em} .ny-news-shared .news-summary{color:rgba(246,241,232,.78);font-size:14.5px;line-height:2;letter-spacing:.045em} .ny-news-shared .news-title,.ny-news-shared .news-summary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} .ny-news-shared .news-title{-webkit-line-clamp:2} .ny-news-shared .news-summary{-webkit-line-clamp:2} .ny-news-shared .news-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:34px;padding:4px} .ny-news-shared .news-pagination button{min-width:42px;height:42px;padding:0 13px;border:1px solid rgba(22,40,63,.2);border-radius:999px;background:rgba(251,249,245,.94);color:var(--navy);font-family:var(--sans);font-size:13px;line-height:1;transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s var(--ease)} .ny-news-shared .news-pagination button:hover:not(:disabled),.ny-news-shared .news-pagination button:focus-visible{background:var(--navy);border-color:var(--navy);color:#f6f1e8;transform:translateY(-2px);outline:none} .ny-news-shared .news-pagination .is-current{background:var(--rust);border-color:var(--rust);color:#fff} .ny-news-shared .news-pagination button:disabled{opacity:.38;cursor:not-allowed} /* Article and lawyer detail pages share one stable rhythm in both languages. */ #view-article .article-body{display:grid;grid-template-columns:minmax(0,1fr);gap:26px} #view-article .article-body>p{min-width:0;margin:0} #view-lawyer .lawyer-grid>*,#view-lawyer .lawyer-blocks>div{opacity:1;transform:none} #view-lawyer.ny-route-revealing .lawyer-photo{animation:nyPanelDrop 1.18s .12s var(--ease) both} #view-lawyer.ny-route-revealing .lawyer-grid>div:last-child{animation:nyPanelDrop 1.3s .32s var(--ease) both} #view-lawyer .lawyer-role,#view-lawyer .lawyer-name{font-weight:600} #view-lawyer .is-managing-lawyer .lawyer-role{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);font-weight:600;line-height:1.35;letter-spacing:.16em;margin-bottom:14px;color:var(--rust)} /* Faint watermark of the lawyer's surname behind the name, echoing the services/team ghost numerals. */ #view-lawyer .lawyer-name{position:relative;z-index:0} #view-lawyer .lawyer-name::before{content:attr(data-initial);position:absolute;left:-6px;top:50%;z-index:-1;transform:translateY(-50%);font-family:var(--serif);font-weight:600;font-size:120px;line-height:1;color:rgba(22,40,63,.045);pointer-events:none;user-select:none;white-space:nowrap} /* Résumé lines read as a simple timeline instead of a flat text dump. */ #view-lawyer .lawyer-blocks p{position:relative;padding-left:20px} #view-lawyer .lawyer-blocks p::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--gold)} #view-lawyer .lawyer-blocks p:not(:last-child)::after{content:"";position:absolute;left:2.5px;top:13px;bottom:-8px;width:1px;background:rgba(22,40,63,.14)} #view-lawyer .lawyer-blocks h3{position:relative} #view-lawyer .lawyer-blocks h3::after{content:"";position:absolute;left:0;bottom:-1px;width:40px;height:1px;background:var(--gold);transform-origin:left} #view-lawyer.ny-route-revealing .lawyer-blocks h3::after{animation:nyLine 1s .5s var(--ease) both} /* Deliberate pace for all visual movement except the island and sailboat scenes. */ .view{animation-duration:1s} .hero-content>div{animation-duration:1.55s!important} .hero-rule{animation-duration:1.75s!important} .nav-link,.nav-cta,.nav-link::after,.nav-cta::after{transition-duration:.42s!important} .about-strip img,.team-avatar img,.news-item,.home-intro-action{transition-duration:.52s!important} /* .team-card 原本也在上面這條清單裡，但 !important 會蓋過 dealTeamCards()／recallTeamCards() 用 JS 設定的 transitionDuration（依裝置寬度動態算出的發牌／回收秒數），導致卡片動畫實際播放 速度一律被強制鎖在 .52s，跟程式碼想要的秒數對不上；卡片 hover 效果沿用 index.html 內 .team-card{transition:...}原本的秒數即可，不需要也不應該再受這條規則管控。 */ .line-btn,.line-panel,.submit-btn{transition-duration:.45s!important} /* Route entrance: top-to-bottom progression */ @keyframes nyPanelDrop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:translateY(0)}} #view-about.ny-route-revealing .eyebrow,#view-team.ny-route-revealing .eyebrow,#view-services.ny-route-revealing .eyebrow{animation:nyPanelDrop 1.12s var(--ease) both} #view-about.ny-route-revealing .about-copy{animation:nyPanelDrop 1.34s .24s var(--ease) both} #view-about.ny-route-revealing .about-strip{animation:nyPanelDrop 1.36s .54s var(--ease) both} #view-team.ny-route-revealing .team-section-title{animation:nyPanelDrop 1.16s .18s var(--ease) both} /* 卡片本身改由 dealTeamCards()／recallTeamCards()（見 index.html）用 JS 控制 transform／opacity 的 transition 播放「從 Logo 發牌」動畫。這裡若仍保留 .team-card 的 CSS animation（也是動 transform／opacity）， 瀏覽器規則是同一個屬性上「animation 會蓋過 transition」，會讓卡片整個改播這個舊的、跟 Logo 位置完全無關的 簡單淡入下墜效果，JS 那邊設定的 transition 直接被蓋掉、完全不會顯示——這正是「卡片發牌動畫看起來完全沒作用」 的真正原因，必須整條規則移除，讓卡片只播 JS 那組動畫。 */ #view-services.ny-route-revealing .services-grid>article{animation:nyPanelDrop 1.26s var(--ease) both} #view-services.ny-route-revealing .services-grid>article:nth-child(1){animation-delay:.28s}#view-services.ny-route-revealing .services-grid>article:nth-child(2){animation-delay:.48s}#view-services.ny-route-revealing .services-grid>article:nth-child(3){animation-delay:.68s}#view-services.ny-route-revealing .services-grid>article:nth-child(4){animation-delay:.88s}#view-services.ny-route-revealing .services-grid>article:nth-child(5){animation-delay:1.08s}#view-services.ny-route-revealing .services-grid>article:nth-child(6){animation-delay:1.28s} #view-contact.ny-route-revealing .eyebrow{animation:nyPanelDrop 1.12s var(--ease) both} #view-contact.ny-route-revealing .view-title{animation:nyPanelDrop 1.2s .14s var(--ease) both} #view-contact.ny-route-revealing .contact-grid{animation:nyPanelDrop 1.3s .3s var(--ease) both} #view-contact.ny-route-revealing .contact-form{animation:nyPanelDrop 1.34s .48s var(--ease) both} .ny-news-shared.ny-route-revealing .eyebrow{animation:nyPanelDrop 1.12s var(--ease) both} .ny-news-shared.ny-route-revealing .news-item{animation:nyPanelDrop 1.24s var(--ease) both} .ny-news-shared.ny-route-revealing .news-item:nth-child(1){animation-delay:.28s}.ny-news-shared.ny-route-revealing .news-item:nth-child(2){animation-delay:.4s}.ny-news-shared.ny-route-revealing .news-item:nth-child(3){animation-delay:.52s}.ny-news-shared.ny-route-revealing .news-item:nth-child(4){animation-delay:.64s}.ny-news-shared.ny-route-revealing .news-item:nth-child(5){animation-delay:.76s}.ny-news-shared.ny-route-revealing .news-item:nth-child(6){animation-delay:.88s} #view-article.ny-route-revealing .back-link{animation:nyPanelDrop 1.1s var(--ease) both} #view-article.ny-route-revealing .article-kicker,#view-article.ny-route-revealing .article-title,#view-article.ny-route-revealing .article-date{animation:nyPanelDrop 1.2s .16s var(--ease) both} #view-article.ny-route-revealing .article-body>p{animation:nyPanelDrop 1.3s .34s var(--ease) both} /* Gold rule draws in under the section kicker on every interior page, echoing the homepage hero-rule. 分頁標題（.eyebrow span）字級放大後，底線改為貼齊該 span 本身的內容寬度（而非固定 56px），文字多長線就多長，中英文長度不同也能自動對齊。 */ .article-kicker{position:relative} .article-kicker::after{content:"";position:absolute;left:0;bottom:-13px;width:56px;height:1px;background:var(--gold);transform-origin:left} .eyebrow span{position:relative;display:inline-block} .eyebrow span::after{content:"";position:absolute;left:0;bottom:-13px;width:100%;height:1px;background:var(--gold);transform-origin:left} #view-about.ny-route-revealing .eyebrow span::after,#view-team.ny-route-revealing .eyebrow span::after,#view-services.ny-route-revealing .eyebrow span::after,#view-contact.ny-route-revealing .eyebrow span::after,.ny-news-shared.ny-route-revealing .eyebrow span::after{animation:nyLine 1s .32s var(--ease) both} #view-article.ny-route-revealing .article-kicker::after{animation:nyLine 1s .3s var(--ease) both} @media(max-width:600px){#view-about .about-copy{padding:22px 20px 22px 22px}#view-team .team-avatar{height:auto;aspect-ratio:3/4;margin:0 0 24px;background:transparent;border:0;border-radius:20px;overflow:hidden;isolation:isolate;clip-path:inset(0 round 20px);-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0)}#view-team .team-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 32%;border-radius:inherit;clip-path:inset(0 round 20px);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}#view-services .services-grid>article{padding:26px 22px 24px;border-radius:20px}#view-contact .contact-form{padding:27px 23px;border-radius:24px}#view-contact .form-grid{grid-template-columns:minmax(0,1fr);gap:22px}#view-contact .field.full{grid-column:1}#view-contact .field input,#view-contact .field textarea{font-size:16px;padding-inline:14px}.ny-news-shared .news-item{height:190px;grid-template-columns:1fr;gap:8px;padding:23px 22px;border-radius:22px}.ny-news-shared .news-item:hover{padding-left:22px}.ny-news-shared .news-pagination{gap:7px;margin-inline:-8px}.ny-news-shared .news-pagination button{min-width:38px;height:38px;padding:0 10px;font-size:12px}.ny-news-shared .news-page-nav{flex:0 1 auto}} @media(prefers-reduced-motion:reduce){#view-about.ny-route-revealing .eyebrow,#view-team.ny-route-revealing .eyebrow,#view-services.ny-route-revealing .eyebrow,#view-about.ny-route-revealing .about-copy,#view-about.ny-route-revealing .about-strip,#view-team.ny-route-revealing .team-section-title,#view-services.ny-route-revealing .services-grid>article,#view-lawyer.ny-route-revealing .lawyer-photo,#view-lawyer.ny-route-revealing .lawyer-grid>div:last-child,#view-contact.ny-route-revealing .eyebrow,#view-contact.ny-route-revealing .view-title,#view-contact.ny-route-revealing .contact-grid,#view-contact.ny-route-revealing .contact-form,.ny-news-shared.ny-route-revealing .eyebrow,.ny-news-shared.ny-route-revealing .news-item,#view-article.ny-route-revealing .back-link,#view-article.ny-route-revealing .article-kicker,#view-article.ny-route-revealing .article-title,#view-article.ny-route-revealing .article-date,#view-article.ny-route-revealing .article-body>p,#view-about.ny-route-revealing .eyebrow span::after,#view-team.ny-route-revealing .eyebrow span::after,#view-services.ny-route-revealing .eyebrow span::after,#view-contact.ny-route-revealing .eyebrow span::after,.ny-news-shared.ny-route-revealing .eyebrow span::after,#view-article.ny-route-revealing .article-kicker::after,#view-lawyer.ny-route-revealing .lawyer-blocks h3::after{animation:none!important}}