/* ══════════════════════════════════════════════ LAYOUT.CSS .inner / Header Navigation / Breadcrumb / Section Divider / CTA Band / Footer ══════════════════════════════════════════════ */ /* ── 閱讀容器 ── */ .inner{ max-width:var(--page-max); margin-left:auto; margin-right:auto; width:100%; } /* ── NAV ── */ .site-nav{ position:fixed;top:0;left:0;right:0;z-index:100; padding:1rem 3.5rem; background:var(--surface-overlay); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); display:flex;align-items:center;justify-content:space-between; box-shadow:0 1px 0 var(--divider-subtle); min-height:70px; } .nav-logo{ font-family:var(--serif);font-size:1.05rem;font-weight:500; color:var(--text-primary);letter-spacing:0.14em;text-decoration:none;line-height:1.4 } .nav-logo span{ display:block;font-size:0.68rem;font-family:var(--sans);font-weight:300; letter-spacing:0.22em;opacity:0.55;margin-top:2px } .nav-links{display:flex;gap:0;list-style:none;align-items:center} .nav-links li a{ font-family:var(--sans);font-size:0.94rem;font-weight:300;letter-spacing:0.14em; color:var(--text-secondary);text-decoration:none; display:inline-flex;align-items:center;padding:0 1.1rem;min-height:48px; position:relative;transition:color 0.3s; } .nav-links li a::after{ content:'';position:absolute;bottom:10px;left:1.1rem;right:1.1rem; height:1px;background:currentColor;transform:scaleX(0);transform-origin:center; transition:transform 0.35s cubic-bezier(0.22,1,0.36,1); } .nav-links li a:hover,.nav-links li a.active{color:var(--text-body)} .nav-links li a:hover::after,.nav-links li a.active::after{transform:scaleX(1)} .nav-links li.nav-cta a{ background:var(--accent-celadon-bg); color:var(--accent-celadon); border:1px solid var(--accent-celadon-border); padding:0 1.2rem;margin-left:0.6rem; } .nav-links li.nav-cta a::after{display:none} .nav-links li.nav-cta a:hover{background:var(--accent-celadon-bg-hover);color:var(--accent-celadon)} /* ══════════════════════════════════════════════ NAVIGATION v2 (shared) — sticky, light-background Nav with Mobile MENU/CLOSE + dropdown. Opt-in via the .site-nav--v2 modifier class on .site-nav, so pages still on the legacy Nav above (which never carry this class) are unaffected. Used by both Homepage (website/index.html) and Case Pages. Values carried over unchanged from the validated pilot. ══════════════════════════════════════════════ */ /* ── NAV v2 — Desktop ── */ .site-nav.site-nav--v2{ position:sticky;top:0;z-index:100; padding:0 3.5rem; min-height:68px; background:rgba(247,245,240,0.98); backdrop-filter:none;-webkit-backdrop-filter:none; /* Restrained separation so Nav doesn't visually merge with Case Header below it — a hairline + near-invisible shadow, not a band or floating-card effect. */ box-shadow:0 1px 3px rgba(26,25,22,0.04); border-bottom:1px solid var(--divider-subtle); transition:min-height 0.28s ease, background 0.28s ease, border-color 0.28s ease; } .site-nav--v2.nav-scrolled{ min-height:57px; background:rgba(247,245,240,1); border-bottom:1px solid var(--divider-subtle); } .site-nav--v2 .nav-logo--brand{display:inline-flex;align-items:center;gap:0.65rem} .site-nav--v2 .nav-logo-mark{width:30px;height:30px;display:block;flex-shrink:0} .site-nav--v2 .nav-logo-word{display:flex;flex-direction:column;line-height:1.4} .site-nav--v2 .nav-logo-word span{font-size:0.64rem;letter-spacing:0.16em;opacity:0.6} .site-nav--v2 .nav-links li a{ font-size:1rem;font-weight:400;letter-spacing:0.1em; color:var(--text-body); } .site-nav--v2 .nav-links li a:hover,.site-nav--v2 .nav-links li a.active{color:var(--accent-celadon)} .site-nav--v2 .nav-links li.nav-cta a{font-weight:400} /* Mobile menu toggle + dropdown — hidden by default (desktop), enabled only inside the <=980px media query below. */ .nav-menu-toggle{display:none} .mobile-nav-dropdown{display:none} /* ── NAV v2 — Mobile (<=980px) ── */ @media (max-width:980px){ .site-nav.site-nav--v2{ padding:0.85rem 1.2rem; min-height:0; background:rgba(247,245,240,0.98); backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:0 1px 3px rgba(26,25,22,0.04); border-bottom:1px solid var(--divider-subtle); justify-content:space-between; transition:background 0.25s ease, border-color 0.25s ease; } .site-nav--v2.nav-scrolled{ background:rgba(247,245,240,1); border-bottom:1px solid var(--divider-subtle); } .site-nav--v2 .nav-logo-word span{display:none} .site-nav--v2 .nav-links{display:none} .nav-menu-toggle{ display:inline-flex;align-items:center;gap:0.4rem; font-family:var(--sans);font-size:0.68rem;font-weight:500;letter-spacing:0.22em; color:var(--text-body);background:none;border:none;padding:0.4rem 0.2rem; cursor:pointer; } .nav-menu-toggle .bar{display:block;width:16px;height:1px;background:currentColor;position:relative} .nav-menu-toggle .bar::before,.nav-menu-toggle .bar::after{ content:'';position:absolute;left:0;width:16px;height:1px;background:currentColor;transition:transform 0.25s ease,opacity 0.25s ease; } .nav-menu-toggle .bar::before{top:-5px} .nav-menu-toggle .bar::after{top:5px} .nav-menu-toggle.is-open .bar{background:transparent} .nav-menu-toggle.is-open .bar::before{transform:translateY(5px) rotate(45deg)} .nav-menu-toggle.is-open .bar::after{transform:translateY(-5px) rotate(-45deg)} /* ── MOBILE DROPDOWN ── */ .mobile-nav-dropdown{ display:block; position:sticky;top:53px;z-index:99; background:var(--surface-base); border-bottom:1px solid transparent; max-height:0;overflow:hidden; transition:max-height 0.32s cubic-bezier(0.22,1,0.36,1), border-color 0.32s ease; } .mobile-nav-dropdown.is-open{ max-height:320px; border-bottom:1px solid var(--divider-subtle); } .mobile-nav-dropdown ul{list-style:none;padding:0.4rem 1.2rem 1rem} .mobile-nav-dropdown li a{ display:block;padding:0.85rem 0; font-family:var(--sans);font-size:0.92rem;font-weight:400;letter-spacing:0.08em; color:var(--text-body);text-decoration:none; border-top:1px solid var(--divider-subtle); } .mobile-nav-dropdown li:first-child a{border-top:none} .mobile-nav-dropdown li.nav-cta a{color:var(--accent-celadon)} } /* ── BREADCRUMB ── */ .breadcrumb{ padding:5.5rem var(--page-pad) 0; } .breadcrumb .inner{ display:flex;align-items:center;gap:0.6rem; } .breadcrumb a,.breadcrumb span{ font-family:var(--sans);font-size:0.6rem;letter-spacing:0.22em; color:var(--text-secondary);text-decoration:none;transition:color 0.3s; } .breadcrumb a:hover{color:var(--accent-celadon)} .breadcrumb-sep{opacity:0.4} .breadcrumb-current{color:var(--text-body)} /* ── SECTION DIVIDER ── */ .section-divider{ max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad); position:relative; } .section-divider::after{ content:'';display:block;height:1px; background:linear-gradient(to right,transparent,var(--divider-default) 20%,var(--divider-default) 80%,transparent); } /* ── CTA BAND ── */ .cta-band{ background:var(--surface-raised);padding:6rem var(--page-pad); } .cta-band .inner{ display:flex;justify-content:space-between;align-items:center;gap:3rem; } .cta-band-text h2{ font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.85rem); font-weight:300;color:var(--text-primary);letter-spacing:0.09em;line-height:1.75;margin-bottom:0.8rem; } .cta-band-text p{ font-family:var(--serif);font-size:0.92rem;color:var(--text-secondary); line-height:2.3;max-width:44ch;letter-spacing:0.05em; } .cta-band-btn{ flex-shrink:0;display:inline-block;font-family:var(--sans);font-size:0.76rem; letter-spacing:0.25em;color:var(--text-on-dark);background:var(--charcoal); text-decoration:none;padding:1.1rem 2.8rem;transition:background 0.4s;white-space:nowrap; } .cta-band-btn:hover{background:var(--accent-celadon)} /* ── FOOTER ── */ footer{ background:var(--surface-dark);padding:5rem var(--page-pad) 3rem; } footer .inner{ display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:4rem; } .footer-brand h3{ font-family:var(--serif);font-size:1.1rem;font-weight:400; color:var(--text-on-dark);letter-spacing:0.14em;margin-bottom:0.4rem } .footer-brand .sub{ font-family:var(--sans);font-size:0.65rem;letter-spacing:0.22em; color:var(--text-on-dark-faint);margin-bottom:1.8rem;line-height:2 } .footer-brand .tagline{ font-family:var(--serif);font-size:0.84rem; color:var(--text-on-image-faint); line-height:2.2;max-width:28ch;letter-spacing:0.05em } .footer-col h4{ font-family:var(--sans);font-size:0.6rem;letter-spacing:0.3em; color:var(--text-on-dark-muted);margin-bottom:1.4rem } .footer-col ul{list-style:none} .footer-col li{ font-family:var(--serif);font-size:0.82rem; color:var(--text-on-dark-muted); line-height:2.8;letter-spacing:0.05em;transition:color 0.3s } .footer-col li a{color:inherit;text-decoration:none} .footer-col li:hover{color:var(--accent-celadon)} .footer-bottom{ background:var(--surface-dark);padding:1.5rem var(--page-pad); border-top:1px solid var(--divider-on-dark); } .footer-bottom p{ font-family:var(--sans);font-size:0.6rem;letter-spacing:0.12em; color:var(--text-on-dark-faint) } /* ── RESPONSIVE ── */ @media(max-width:900px){ :root{ --page-pad:1.8rem } .site-nav{padding:0.8rem 1.5rem} .breadcrumb{padding:5rem var(--page-pad) 0} .cta-band .inner{flex-direction:column;gap:2.5rem} footer .inner{grid-template-columns:1fr;gap:3rem} .footer-bottom .inner{flex-direction:column!important;gap:0.5rem;text-align:center} } /* ══════════════════════════════════════════════ SHARED FOOTER + QR MODAL 全站共用（Case Page 與 Homepage 皆已套用）。 .site-footer 為新版 Footer 容器；.qr-modal-* 為 LINE／WeChat QR Code Modal，由 Contact CTA（case.css／homepage.css）的 .qr-trigger 按鈕觸發。 舊版