/* ============================================================ 各頁「備援／前置」樣式（原本寫在 style.css 連結之前， 設計上會被下方共用樣式以同權重蓋過——順序不可移到共用樣式之後） ============================================================ */ /* ---------- blueprint.html（page-blueprint）前置備援 ---------- */ :root:where(.page-blueprint){ /* fallback（若 style.css 變數已定義會被覆蓋） */ --navy:#002347;--paper:#f4ede0;--gold:#b89968;--gold-soft:#d4bc92; --white:#fdfaf4;--ink:#2c2c2c;--navy-70:rgba(0,35,71,.7);--line:rgba(184,153,104,.35); --disp:'Italiana',serif;--quote:'Cormorant',serif;--tc:'Noto Serif TC',serif; } :where(html.page-blueprint) body{background:var(--paper);margin:0} :where(html.page-blueprint) .bp-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 36px;z-index:5} :where(html.page-blueprint) .bp-nav .brandmark{font-family:var(--disp);letter-spacing:.16em;color:var(--paper);text-decoration:none;font-size:1.15rem} :where(html.page-blueprint) .bp-nav .back{font-family:var(--tc);font-weight:300;font-size:.85rem;color:rgba(244,237,224,.65);text-decoration:none;letter-spacing:.08em} :where(html.page-blueprint) .bp-nav .back:hover{color:var(--gold-soft)} :where(html.page-blueprint) .bp-hero{background:var(--navy);color:var(--paper);text-align:center;padding:150px 32px 90px;position:relative;overflow:hidden} :where(html.page-blueprint) .bp-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%, rgba(184,153,104,.14), transparent 60%);pointer-events:none} :where(html.page-blueprint) .bp-hero .label-top{font-family:var(--quote);font-style:italic;letter-spacing:.2em;font-size:.9rem;color:var(--gold);text-transform:uppercase;margin-bottom:24px} :where(html.page-blueprint) .bp-hero h1{font-family:var(--tc);font-weight:500;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:.1em;color:var(--white);line-height:1.5;margin:0} :where(html.page-blueprint) .bp-hero .h1-sub{font-family:var(--tc);font-weight:300;font-size:clamp(1.1rem,3vw,1.5rem);letter-spacing:.3em;color:var(--gold-soft);margin-top:14px} :where(html.page-blueprint) .bp-hero .desc{font-family:var(--tc);font-weight:300;font-size:.98rem;color:rgba(244,237,224,.75);letter-spacing:.06em;line-height:2.1;margin:34px auto 44px;max-width:560px} :where(html.page-blueprint) .bp-hero .desc strong{font-weight:500;color:var(--gold-soft)} :where(html.page-blueprint) .bp-sym{font-size:1.3rem;color:var(--gold);letter-spacing:.3em;margin-bottom:26px} :where(html.page-blueprint) .bp-form{display:flex;gap:12px;justify-content:center;align-items:stretch;flex-wrap:wrap;width:auto;max-width:none;margin:0 auto;padding:0;background:none;border:none;position:relative;z-index:2} :where(html.page-blueprint) .bp-form input{box-sizing:border-box;width:auto;max-width:260px;margin:0;background:transparent;border:1px solid rgba(244,237,224,.35);border-radius:0;color:var(--paper);padding:13px 18px;font-family:var(--tc);font-weight:300;font-size:.95rem;min-width:200px;flex:0 1 auto} :where(html.page-blueprint) .bp-form input::placeholder{color:rgba(244,237,224,.45)} :where(html.page-blueprint) .bp-form input:focus{outline:none;border-color:var(--gold)} :where(html.page-blueprint) .bp-form .bp-btn{box-sizing:border-box;width:auto;margin:0;background:var(--gold);color:var(--navy);border:none;border-radius:0;padding:13px 34px;font-family:var(--tc);letter-spacing:.12em;font-size:.95rem;cursor:pointer;transition:.3s;flex:0 0 auto} :where(html.page-blueprint) .bp-form .bp-btn:hover{background:var(--gold-soft)} :where(html.page-blueprint) .form-meta-bp{font-family:var(--tc);font-weight:300;font-size:.82rem;color:rgba(244,237,224,.6);letter-spacing:.08em;margin-top:18px;text-align:center} :where(html.page-blueprint) .bp-section{padding:90px 24px} :where(html.page-blueprint) .bp-wrap{max-width:880px;margin:0 auto} :where(html.page-blueprint) .bp-label{display:block;text-align:center;font-family:var(--quote);font-style:italic;letter-spacing:.18em;font-size:.85rem;color:var(--gold);text-transform:uppercase} :where(html.page-blueprint) .bp-h2{text-align:center;font-family:var(--tc);font-weight:500;font-size:1.5rem;color:var(--navy);letter-spacing:.08em;margin:10px 0 50px} :where(html.page-blueprint) .bp-two{display:grid;grid-template-columns:1fr 1fr;gap:26px} :where(html.page-blueprint) .bp-card{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:38px 34px} :where(html.page-blueprint) .bp-card .csym{font-size:1.2rem;color:var(--gold);margin-bottom:16px} :where(html.page-blueprint) .bp-card h3{font-family:var(--tc);font-weight:500;font-size:1.15rem;color:var(--navy);margin:0 0 6px;letter-spacing:.05em} :where(html.page-blueprint) .bp-card .en{font-family:var(--quote);font-style:italic;font-size:.9rem;color:var(--gold);margin-bottom:16px} :where(html.page-blueprint) .bp-card p{font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink);line-height:2;margin:0} :where(html.page-blueprint) .bp-card p strong{font-weight:500;color:var(--navy)} :where(html.page-blueprint) .bp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step} :where(html.page-blueprint) .bp-step{text-align:center;padding:10px 14px} :where(html.page-blueprint) .bp-step .num{font-family:var(--quote);font-style:italic;font-size:2.2rem;color:var(--gold);line-height:1} :where(html.page-blueprint) .bp-step h4{font-family:var(--tc);font-weight:500;font-size:1.02rem;color:var(--navy);margin:14px 0 8px;letter-spacing:.05em} :where(html.page-blueprint) .bp-step p{font-family:var(--tc);font-weight:300;font-size:.88rem;color:var(--ink);line-height:1.9;margin:0} :where(html.page-blueprint) .bp-note{max-width:640px;margin:70px auto 0;padding-top:34px;border-top:1px solid var(--line);text-align:center;font-family:var(--tc);font-weight:300;font-size:.92rem;color:var(--navy-70);line-height:2.1} :where(html.page-blueprint) .bp-final{background:var(--navy);text-align:center;padding:90px 24px} :where(html.page-blueprint) .bp-final .q{font-family:var(--quote);font-style:italic;font-size:1.3rem;color:var(--gold-soft);margin-bottom:30px} @media(max-width:680px){:where(html.page-blueprint) .bp-two,:where(html.page-blueprint) .bp-steps{grid-template-columns:1fr}} /* ---------- consult.html（page-consult）前置備援 ---------- */ :root:where(.page-consult){ /* fallback（若 style.css 變數已定義會被覆蓋） */ --navy:#002347;--paper:#f4ede0;--gold:#b89968;--gold-soft:#d4bc92; --white:#fdfaf4;--ink:#2c2c2c;--navy-70:rgba(0,35,71,.7);--line:rgba(184,153,104,.35); --disp:'Italiana',serif;--quote:'Cormorant',serif;--tc:'Noto Serif TC',serif; } :where(html.page-consult) body{background:var(--paper);margin:0} :where(html.page-consult) .mini-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 34px;z-index:5} :where(html.page-consult) .mini-nav .brandmark{font-family:var(--disp);letter-spacing:.18em;font-size:1.05rem;color:var(--paper);text-decoration:none;text-transform:uppercase} :where(html.page-consult) .mini-nav .back{font-family:var(--tc);font-weight:300;font-size:.85rem;letter-spacing:.08em;color:var(--gold-soft);text-decoration:none} :where(html.page-consult) .q-hero{position:relative;background:var(--navy);color:var(--paper);text-align:center;padding:130px 32px 70px} :where(html.page-consult) .q-hero .sym{font-size:1.3rem;color:var(--gold);letter-spacing:.3em;margin-bottom:22px} :where(html.page-consult) .q-hero h1{font-family:var(--tc);font-weight:400;font-size:clamp(1.7rem,4.5vw,2.5rem);letter-spacing:.08em;color:var(--white);margin:0} :where(html.page-consult) .q-hero .en{font-family:var(--quote);font-style:italic;font-size:1.15rem;color:var(--gold-soft);margin-top:16px} :where(html.page-consult) .q-hero .sub{font-family:var(--tc);font-weight:300;font-size:.95rem;color:rgba(244,237,224,.72);letter-spacing:.06em;margin-top:20px;line-height:2} :where(html.page-consult) .q-wrap{max-width:680px;margin:0 auto;padding:70px 24px 100px} :where(html.page-consult) .q-part{margin-top:56px} :where(html.page-consult) .q-part:first-child{margin-top:0} :where(html.page-consult) .q-part-label{font-family:var(--quote);font-style:italic;letter-spacing:.14em;font-size:.85rem;color:var(--gold);text-transform:uppercase} :where(html.page-consult) .q-part-title{font-family:var(--tc);font-weight:500;font-size:1.3rem;color:var(--navy);margin:8px 0 6px} :where(html.page-consult) .q-block{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:28px 30px;margin-top:22px} :where(html.page-consult) .q-block h3{font-family:var(--tc);font-weight:500;font-size:1.02rem;color:var(--navy);line-height:1.8;margin:0 0 16px} :where(html.page-consult) .q-block h3 .qn{color:var(--gold);font-family:var(--quote);font-style:italic;margin-right:10px} :where(html.page-consult) .q-block h3 .opt{font-weight:300;font-size:.82rem;color:var(--navy-70)} :where(html.page-consult) .q-opt{display:flex;align-items:flex-start;gap:10px;padding:8px 4px;cursor:pointer;font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink);line-height:1.7} :where(html.page-consult) .q-opt input{margin-top:6px;accent-color:var(--gold)} :where(html.page-consult) .q-opt:hover{color:var(--navy)} :where(html.page-consult) .q-open{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:3px;background:transparent; font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink);padding:14px 16px;min-height:96px;line-height:1.8;resize:vertical} :where(html.page-consult) .q-open:focus{outline:none;border-color:var(--gold)} :where(html.page-consult) .q-open::placeholder{color:rgba(44,44,44,.38)} :where(html.page-consult) .q-id{display:grid;grid-template-columns:1fr 1fr;gap:14px} :where(html.page-consult) .q-id input,:where(html.page-consult) .q-link input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:3px;background:transparent;padding:13px 16px; font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink)} :where(html.page-consult) .q-id input:focus,:where(html.page-consult) .q-link input:focus{outline:none;border-color:var(--gold)} :where(html.page-consult) .q-link{margin-top:14px} :where(html.page-consult) .q-submit{margin-top:64px;text-align:center} :where(html.page-consult) .q-submit .btn{font-family:var(--tc);letter-spacing:.14em;background:var(--navy);color:var(--paper); border:1px solid var(--gold);padding:16px 54px;font-size:.98rem;cursor:pointer;transition:.3s} :where(html.page-consult) .q-submit .btn:hover{background:var(--gold);color:var(--navy)} :where(html.page-consult) .q-submit .meta{font-family:var(--tc);font-weight:300;font-size:.82rem;color:var(--navy-70);margin-top:18px;letter-spacing:.06em} :where(html.page-consult) .q-quote{margin:52px auto 0;padding-top:30px;border-top:1px solid var(--line);text-align:center; font-family:var(--quote);font-style:italic;font-size:1.2rem;color:var(--navy);line-height:1.7} :where(html.page-consult) .q-quote .zh{display:block;font-style:normal;font-family:var(--tc);font-weight:300;font-size:.85rem;color:var(--navy-70);margin-top:10px;letter-spacing:.08em} :where(html.page-consult) .q-done{display:none;text-align:center;padding:80px 24px} :where(html.page-consult) .q-done h2{font-family:var(--tc);font-weight:400;font-size:1.6rem;color:var(--navy)} :where(html.page-consult) .q-done p{font-family:var(--tc);font-weight:300;color:var(--ink);line-height:2.1} :where(html.page-consult) .q-done .btn{display:inline-block;margin-top:28px;font-family:var(--tc);letter-spacing:.14em;background:var(--navy);color:var(--paper); border:1px solid var(--gold);padding:16px 54px;font-size:.98rem;text-decoration:none;transition:.3s} :where(html.page-consult) .q-done .btn:hover{background:var(--gold);color:var(--navy)} :where(html.page-consult) .q-done .meta{font-family:var(--tc);font-weight:300;font-size:.82rem;color:var(--navy-70);margin-top:18px;letter-spacing:.06em} @media(max-width:560px){:where(html.page-consult) .q-id{grid-template-columns:1fr}:where(html.page-consult) .mini-nav{padding:22px 22px}} /* ---------- form.html（page-form）前置備援 ---------- */ :root:where(.page-form){ /* fallback（若 style.css 變數已定義會被覆蓋） */ --navy:#002347;--paper:#f4ede0;--gold:#b89968;--gold-soft:#d4bc92; --white:#fdfaf4;--ink:#2c2c2c;--navy-70:rgba(0,35,71,.7);--line:rgba(184,153,104,.35); --disp:'Italiana',serif;--quote:'Cormorant',serif;--tc:'Noto Serif TC',serif; } :where(html.page-form) body{background:var(--paper);margin:0} :where(html.page-form) .q-hero{background:var(--navy);color:var(--paper);text-align:center;padding:130px 32px 70px} :where(html.page-form) .q-hero .sym{font-size:1.3rem;color:var(--gold);letter-spacing:.3em;margin-bottom:22px} :where(html.page-form) .q-hero h1{font-family:var(--tc);font-weight:400;font-size:clamp(1.7rem,4.5vw,2.5rem);letter-spacing:.08em;color:var(--white);margin:0} :where(html.page-form) .q-hero .en{font-family:var(--quote);font-style:italic;font-size:1.15rem;color:var(--gold-soft);margin-top:16px} :where(html.page-form) .q-hero .sub{font-family:var(--tc);font-weight:300;font-size:.95rem;color:rgba(244,237,224,.72);letter-spacing:.06em;margin-top:20px;line-height:2} :where(html.page-form) .q-wrap{max-width:680px;margin:0 auto;padding:70px 24px 100px} :where(html.page-form) .q-part{margin-top:56px} :where(html.page-form) .q-part-label{font-family:var(--quote);font-style:italic;letter-spacing:.14em;font-size:.85rem;color:var(--gold);text-transform:uppercase} :where(html.page-form) .q-part-title{font-family:var(--tc);font-weight:500;font-size:1.3rem;color:var(--navy);margin:8px 0 6px} :where(html.page-form) .q-part-note{font-family:var(--tc);font-weight:300;font-size:.88rem;color:var(--navy-70);margin-bottom:8px} :where(html.page-form) .q-block{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:28px 30px;margin-top:22px} :where(html.page-form) .q-block h3{font-family:var(--tc);font-weight:500;font-size:1.02rem;color:var(--navy);line-height:1.8;margin:0 0 16px} :where(html.page-form) .q-block h3 .qn{color:var(--gold);font-family:var(--quote);font-style:italic;margin-right:10px} :where(html.page-form) .q-opt{display:flex;align-items:flex-start;gap:10px;padding:8px 4px;cursor:pointer;font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink);line-height:1.7} :where(html.page-form) .q-opt input{margin-top:6px;accent-color:var(--gold)} :where(html.page-form) .q-opt:hover{color:var(--navy)} :where(html.page-form) .q-open{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:3px;background:transparent; font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink);padding:14px 16px;min-height:96px;line-height:1.8;resize:vertical} :where(html.page-form) .q-open:focus{outline:none;border-color:var(--gold)} :where(html.page-form) .q-open::placeholder{color:rgba(44,44,44,.38)} :where(html.page-form) .q-id{display:grid;grid-template-columns:1fr 1fr;gap:14px} :where(html.page-form) .q-id input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:3px;background:transparent;padding:13px 16px; font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink)} :where(html.page-form) .q-id input:focus{outline:none;border-color:var(--gold)} :where(html.page-form) .q-submit{margin-top:64px;text-align:center} :where(html.page-form) .q-submit .btn{font-family:var(--tc);letter-spacing:.14em;background:var(--navy);color:var(--paper); border:1px solid var(--gold);padding:16px 54px;font-size:.98rem;cursor:pointer;transition:.3s} :where(html.page-form) .q-submit .btn:hover{background:var(--gold);color:var(--navy)} :where(html.page-form) .q-submit .meta{font-family:var(--tc);font-weight:300;font-size:.82rem;color:var(--navy-70);margin-top:18px;letter-spacing:.06em} :where(html.page-form) .q-quote{margin:52px auto 0;padding-top:30px;border-top:1px solid var(--line);text-align:center; font-family:var(--quote);font-style:italic;font-size:1.2rem;color:var(--navy);line-height:1.7} :where(html.page-form) .q-quote .zh{display:block;font-style:normal;font-family:var(--tc);font-weight:300;font-size:.85rem;color:var(--navy-70);margin-top:10px;letter-spacing:.08em} :where(html.page-form) .q-done{display:none;text-align:center;padding:80px 24px} :where(html.page-form) .q-done h2{font-family:var(--tc);font-weight:400;font-size:1.6rem;color:var(--navy)} :where(html.page-form) .q-done p{font-family:var(--tc);font-weight:300;color:var(--ink);line-height:2.1} @media(max-width:560px){:where(html.page-form) .q-id{grid-template-columns:1fr}} /* ---------- newsletter.html（page-newsletter）前置備援 ---------- */ /* ===== 備援樣式：單獨開啟時使用，放回網站後由 style.css 覆蓋 ===== */ :root:where(.page-newsletter){ --navy:#1c2a3a;--paper:#f4ede0;--cream:#faf5ea;--gold:#b89968;--gold-soft:#d4bc92; --white:#fdfaf4;--ink:#2c2c2c;--navy-70:rgba(28,42,58,.7);--line:rgba(184,153,104,.35); --disp:'Italiana',serif;--quote:'Cormorant',serif;--tc:'Noto Serif TC',serif; } :where(html.page-newsletter) *{box-sizing:border-box} :where(html.page-newsletter) body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--tc)} :where(html.page-newsletter) a{color:inherit} /* nav */ :where(html.page-newsletter) #nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center; padding:18px 36px;background:var(--navy);border-bottom:1px solid rgba(184,153,104,.25)} :where(html.page-newsletter) #nav .brandmark{font-family:var(--disp);letter-spacing:.16em;font-size:1.15rem;color:var(--paper);text-decoration:none} :where(html.page-newsletter) .navlinks{display:flex;gap:26px;align-items:center} :where(html.page-newsletter) .navlinks a{font-family:var(--tc);font-weight:300;font-size:.9rem;letter-spacing:.08em;color:rgba(244,237,224,.8);text-decoration:none} :where(html.page-newsletter) .navlinks a:hover,:where(html.page-newsletter) .navlinks a.active{color:var(--gold-soft)} :where(html.page-newsletter) .has-sub{position:relative} :where(html.page-newsletter) .has-sub .submenu{display:none;position:absolute;top:100%;left:0;background:var(--navy);border:1px solid var(--line); padding:10px 0;min-width:230px;flex-direction:column} :where(html.page-newsletter) .has-sub:hover .submenu{display:flex} :where(html.page-newsletter) .submenu a{padding:9px 18px;font-size:.85rem} :where(html.page-newsletter) .navtoggle{display:none} /* sections */ :where(html.page-newsletter) .section{padding:96px 24px} :where(html.page-newsletter) .on-paper{background:var(--paper)} :where(html.page-newsletter) .on-cream{background:var(--cream)} :where(html.page-newsletter) .on-navy{background:var(--navy)} :where(html.page-newsletter) .wrap{max-width:1080px;margin:0 auto} :where(html.page-newsletter) .sec-head.center{text-align:center;margin-bottom:48px} :where(html.page-newsletter) .sec-head .label{font-family:var(--quote);font-style:italic;letter-spacing:.18em;font-size:.85rem;color:var(--gold);text-transform:uppercase} :where(html.page-newsletter) .sec-head h2{font-family:var(--tc);font-weight:500;font-size:1.6rem;color:var(--navy);letter-spacing:.08em;margin:10px 0 8px} :where(html.page-newsletter) .sec-head .sub{font-family:var(--quote);font-style:italic;color:var(--navy-70);font-size:1rem;margin:0} /* cards */ :where(html.page-newsletter) .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} :where(html.page-newsletter) .card{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:38px 32px} :where(html.page-newsletter) .csym{font-size:1.2rem;color:var(--gold);margin-bottom:14px} :where(html.page-newsletter) .ctitle{font-family:var(--tc);font-weight:500;font-size:1.15rem;color:var(--navy);letter-spacing:.05em} :where(html.page-newsletter) .cen{font-family:var(--quote);font-style:italic;font-size:.9rem;color:var(--gold);margin:4px 0 16px} :where(html.page-newsletter) .cdesc{font-family:var(--tc);font-weight:300;font-size:.93rem;line-height:2;color:var(--ink);margin:0} :where(html.page-newsletter) .hl-box{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:34px 36px;text-align:center} :where(html.page-newsletter) .hl-eng{font-family:var(--quote);font-style:italic;letter-spacing:.14em;font-size:.85rem;color:var(--gold);margin-bottom:14px} :where(html.page-newsletter) .hl-box p{font-family:var(--tc);font-weight:300;font-size:.95rem;line-height:2.1;margin:0} /* subscribe form */ :where(html.page-newsletter) .subscribe-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} :where(html.page-newsletter) .subscribe-form input{background:transparent;border:1px solid rgba(244,237,224,.35);color:var(--paper); padding:13px 18px;font-family:var(--tc);font-weight:300;font-size:.95rem;min-width:200px} :where(html.page-newsletter) .subscribe-form input::placeholder{color:rgba(244,237,224,.45)} :where(html.page-newsletter) .subscribe-form input:focus{outline:none;border-color:var(--gold)} :where(html.page-newsletter) .subscribe-form .btn{background:var(--gold);color:var(--navy);border:none;padding:13px 34px; font-family:var(--tc);letter-spacing:.12em;font-size:.95rem;cursor:pointer;transition:.3s} :where(html.page-newsletter) .subscribe-form .btn:hover{background:var(--gold-soft)} :where(html.page-newsletter) .form-meta{font-family:var(--tc);font-weight:300;font-size:.82rem;color:rgba(244,237,224,.6);letter-spacing:.08em;margin-top:16px} /* footer */ :where(html.page-newsletter) .foot{background:var(--navy);color:var(--paper);padding:60px 36px 30px} :where(html.page-newsletter) .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:30px;max-width:1080px;margin:0 auto} :where(html.page-newsletter) .fbrand .brandmark{font-family:var(--disp);letter-spacing:.16em;font-size:1.2rem} :where(html.page-newsletter) .fbrand .zh{font-weight:300;font-size:.85rem;color:rgba(244,237,224,.6);margin-top:8px} :where(html.page-newsletter) .fcol h4{font-family:var(--quote);font-style:italic;letter-spacing:.12em;font-size:.9rem;color:var(--gold);margin:0 0 14px} :where(html.page-newsletter) .fcol a{display:block;font-weight:300;font-size:.86rem;color:rgba(244,237,224,.75);text-decoration:none;margin-bottom:9px} :where(html.page-newsletter) .fcol a:hover{color:var(--gold-soft)} :where(html.page-newsletter) .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;max-width:1080px;margin:44px auto 0; padding-top:22px;border-top:1px solid rgba(184,153,104,.25);font-weight:300;font-size:.78rem;color:rgba(244,237,224,.5)} :where(html.page-newsletter) .legal a{color:inherit} @media(max-width:860px){ :where(html.page-newsletter) .navlinks{display:none} :where(html.page-newsletter) .cards,:where(html.page-newsletter) .fgrid{grid-template-columns:1fr} } /* ---------- session.html（page-session）前置備援 ---------- */ :root:where(.page-session){ /* fallback（若 style.css 變數已定義會被覆蓋） */ --navy:#002347;--paper:#f4ede0;--gold:#b89968;--gold-soft:#d4bc92; --white:#fdfaf4;--ink:#2c2c2c;--navy-70:rgba(0,35,71,.7);--line:rgba(184,153,104,.35); --disp:'Italiana',serif;--quote:'Cormorant',serif;--tc:'Noto Serif TC',serif; } :where(html.page-session) body{background:var(--paper);margin:0} :where(html.page-session) .mini-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 34px;z-index:5} :where(html.page-session) .mini-nav .brandmark{font-family:var(--disp);letter-spacing:.18em;font-size:1.05rem;color:var(--paper);text-decoration:none;text-transform:uppercase} :where(html.page-session) .mini-nav .back{font-family:var(--tc);font-weight:300;font-size:.85rem;letter-spacing:.08em;color:var(--gold-soft);text-decoration:none} :where(html.page-session) .q-hero{position:relative;background:var(--navy);color:var(--paper);text-align:center;padding:130px 32px 70px} :where(html.page-session) .q-hero .sym{font-size:1.3rem;color:var(--gold);letter-spacing:.3em;margin-bottom:22px} :where(html.page-session) .q-hero h1{font-family:var(--tc);font-weight:400;font-size:clamp(1.7rem,4.5vw,2.5rem);letter-spacing:.08em;color:var(--white);margin:0} :where(html.page-session) .q-hero .en{font-family:var(--quote);font-style:italic;font-size:1.15rem;color:var(--gold-soft);margin-top:16px} :where(html.page-session) .q-hero .sub{font-family:var(--tc);font-weight:300;font-size:.95rem;color:rgba(244,237,224,.72);letter-spacing:.06em;margin-top:20px;line-height:2} :where(html.page-session) .q-wrap{max-width:680px;margin:0 auto;padding:70px 24px 100px} :where(html.page-session) .q-part{margin-top:56px} :where(html.page-session) .q-part:first-child{margin-top:0} :where(html.page-session) .q-part-label{font-family:var(--quote);font-style:italic;letter-spacing:.14em;font-size:.85rem;color:var(--gold);text-transform:uppercase} :where(html.page-session) .q-part-title{font-family:var(--tc);font-weight:500;font-size:1.3rem;color:var(--navy);margin:8px 0 6px} :where(html.page-session) .q-block{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:28px 30px;margin-top:22px} :where(html.page-session) .q-block h3{font-family:var(--tc);font-weight:500;font-size:1.02rem;color:var(--navy);line-height:1.8;margin:0 0 16px} :where(html.page-session) .q-block h3 .qn{color:var(--gold);font-family:var(--quote);font-style:italic;margin-right:10px} :where(html.page-session) .q-block h3 .opt{font-weight:300;font-size:.82rem;color:var(--navy-70)} :where(html.page-session) .q-open{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:3px;background:transparent; font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink);padding:14px 16px;min-height:96px;line-height:1.8;resize:vertical} :where(html.page-session) .q-open:focus{outline:none;border-color:var(--gold)} :where(html.page-session) .q-open::placeholder{color:rgba(44,44,44,.38)} :where(html.page-session) .q-id{display:grid;grid-template-columns:1fr 1fr;gap:14px} :where(html.page-session) .q-id input,:where(html.page-session) .q-link input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:3px;background:transparent;padding:13px 16px; font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--ink)} :where(html.page-session) .q-id input:focus,:where(html.page-session) .q-link input:focus{outline:none;border-color:var(--gold)} :where(html.page-session) .q-link{margin-top:14px} :where(html.page-session) .q-submit{margin-top:64px;text-align:center} :where(html.page-session) .q-submit .btn{font-family:var(--tc);letter-spacing:.14em;background:var(--navy);color:var(--paper); border:1px solid var(--gold);padding:16px 54px;font-size:.98rem;cursor:pointer;transition:.3s} :where(html.page-session) .q-submit .btn:hover{background:var(--gold);color:var(--navy)} :where(html.page-session) .q-submit .meta{font-family:var(--tc);font-weight:300;font-size:.82rem;color:var(--navy-70);margin-top:18px;letter-spacing:.06em} :where(html.page-session) .q-quote{margin:52px auto 0;padding-top:30px;border-top:1px solid var(--line);text-align:center; font-family:var(--quote);font-style:italic;font-size:1.2rem;color:var(--navy);line-height:1.7} :where(html.page-session) .q-quote .zh{display:block;font-style:normal;font-family:var(--tc);font-weight:300;font-size:.85rem;color:var(--navy-70);margin-top:10px;letter-spacing:.08em} :where(html.page-session) .q-done{display:none;text-align:center;padding:80px 24px} :where(html.page-session) .q-done h2{font-family:var(--tc);font-weight:400;font-size:1.6rem;color:var(--navy)} :where(html.page-session) .q-done p{font-family:var(--tc);font-weight:300;color:var(--ink);line-height:2.1} :where(html.page-session) .q-done .btn{display:inline-block;margin-top:28px;font-family:var(--tc);letter-spacing:.14em;background:var(--navy);color:var(--paper); border:1px solid var(--gold);padding:16px 54px;font-size:.98rem;text-decoration:none;transition:.3s} :where(html.page-session) .q-done .btn:hover{background:var(--gold);color:var(--navy)} :where(html.page-session) .q-done .meta{font-family:var(--tc);font-weight:300;font-size:.82rem;color:var(--navy-70);margin-top:18px;letter-spacing:.06em} @media(max-width:560px){:where(html.page-session) .q-id{grid-template-columns:1fr}:where(html.page-session) .mini-nav{padding:22px 22px}} /* ============================================================ On The Way ｜ 共用設計系統 主視覺：深藍 #002347 × 金 #B89968 × 米色紙感 ============================================================ */ :root{ --navy:#002347; --navy-soft:#0a3158; --gold:#B89968; --gold-soft:#cdb489; --gold-deep:#8a6a30; --paper:#F4EDE0; --cream:#EBE2CF; --white:#FAF6ED; --ink:#1c2733; --navy-70:rgba(0,35,71,.70); --navy-45:rgba(0,35,71,.45); --line:rgba(184,153,104,.3); --line-soft:rgba(184,153,104,.15); --disp:'Italiana',serif; --quote:'Cormorant',serif; --body:'EB Garamond',serif; --mono:'JetBrains Mono',monospace; --tc:'Noto Serif TC',serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--white); color:var(--ink); font-family:var(--body),var(--tc); font-size:18px; line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .zh{font-family:var(--tc)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); } .wrap{max-width:1080px;margin:0 auto;padding:0 32px} /* ---------- NAV ---------- */ nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:20px 32px; background:transparent; transition:background .4s ease, padding .4s ease, box-shadow .4s ease; } nav.scrolled, nav.solid{ background:rgba(2,26,52,.92); backdrop-filter:blur(8px); padding:14px 32px; box-shadow:0 1px 0 rgba(184,153,104,.25); } nav .brandmark{ font-family:var(--disp); font-size:1rem; letter-spacing:.42em; text-transform:uppercase; color:var(--paper); padding-left:.42em; white-space:nowrap; } nav .navlinks{display:flex;gap:30px;align-items:center} nav .navlinks a{ font-family:var(--mono); font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; color:rgba(244,237,224,.72); transition:color .25s; } nav .navlinks a:hover{color:var(--gold-soft)} nav .navlinks a.active{color:var(--gold)} /* ---- 下拉選單 ---- */ nav .has-sub{position:relative;display:flex;align-items:center} nav .has-sub>a{display:inline-flex;align-items:center;gap:6px;padding:10px 0} nav .has-sub>a .caret{font-size:.55em;opacity:.65;transition:transform .25s} nav .has-sub:hover>a .caret{transform:translateY(1px);opacity:1} nav .submenu{ position:absolute;top:100%;left:50%; transform:translateX(-50%) translateY(6px); background:rgba(2,26,52,.97); backdrop-filter:blur(8px); border:1px solid rgba(184,153,104,.3); padding:12px 0;min-width:220px; opacity:0;visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s; box-shadow:0 16px 40px rgba(0,0,0,.35); } nav .has-sub:hover .submenu, nav .has-sub:focus-within .submenu{ opacity:1;visibility:visible; transform:translateX(-50%) translateY(0); } nav .submenu a{ display:block;padding:10px 24px;white-space:nowrap; font-family:var(--tc);font-weight:300;font-size:.85rem; letter-spacing:.08em;text-transform:none; color:rgba(244,237,224,.78); border-left:2px solid transparent; transition:color .25s,border-color .25s,padding-left .25s; } nav .submenu a:hover{color:var(--gold-soft);border-left-color:var(--gold);padding-left:28px} .navtoggle{display:none;background:none;border:0;cursor:pointer;padding:6px} .navtoggle span{display:block;width:24px;height:1.5px;background:var(--paper);margin:5px 0;transition:.3s} /* ---------- PAGE HERO（內頁頁首） ---------- */ .page-hero{ background:var(--navy); color:var(--paper); padding:180px 32px 90px; text-align:center; position:relative; overflow:hidden; } .page-hero::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% 20%, rgba(184,153,104,.10), transparent 60%); pointer-events:none; } .page-hero .eyebrow{display:block;margin-bottom:22px} .page-hero h1{ font-family:var(--tc); font-weight:400; font-size:clamp(1.9rem,5vw,3rem); letter-spacing:.08em; color:var(--white); line-height:1.4; } .page-hero .en-sub{ font-family:var(--quote); font-style:italic; font-size:clamp(1.05rem,2.6vw,1.4rem); color:var(--gold-soft); margin-top:16px; } .page-hero .intro{ font-family:var(--tc);font-weight:300; color:rgba(244,237,224,.72); max-width:620px;margin:26px auto 0; font-size:1rem;letter-spacing:.04em;line-height:2; } /* ---------- SECTIONS ---------- */ .section{padding:104px 0} .section.on-navy{background:var(--navy);color:var(--paper)} .section.on-cream{background:var(--cream)} .section.on-paper{background:var(--paper)} .sec-head{max-width:720px;margin-bottom:56px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head .label{display:block;margin-bottom:20px} .sec-head h2{ font-family:var(--tc);font-weight:400; font-size:clamp(1.8rem,4.6vw,2.6rem); letter-spacing:.05em;line-height:1.4;color:var(--navy); } .on-navy .sec-head h2{color:var(--white)} .sec-head .sub{ font-family:var(--quote);font-style:italic; font-size:1.35rem;color:var(--gold);margin-top:16px;letter-spacing:.01em; } .sec-head .desc{ font-family:var(--tc);font-weight:300; color:var(--navy-70);margin-top:18px;font-size:1rem;letter-spacing:.03em;line-height:2; } .on-navy .sec-head .desc{color:rgba(244,237,224,.72)} /* ---------- STACK ROWS ---------- */ .stack{display:grid;gap:0;border-top:1px solid var(--line)} .row{ display:grid;grid-template-columns:56px 1fr auto; gap:28px;align-items:baseline; padding:34px 4px; border-bottom:1px solid var(--line); transition:padding-left .35s ease; } .row:hover{padding-left:16px} .row .idx{font-family:var(--mono);font-size:.8rem;color:var(--gold);letter-spacing:.1em} .row .rtitle{font-family:var(--tc);font-weight:500;font-size:1.32rem;letter-spacing:.04em;color:var(--navy)} .on-navy .row .rtitle{color:var(--white)} .row .rdesc{font-family:var(--tc);font-weight:300;font-size:.98rem;margin-top:8px;line-height:1.8;color:var(--ink)} .on-navy .row .rdesc{color:rgba(244,237,224,.72)} .row .rstage{font-family:var(--quote);font-style:italic;font-size:1.15rem;color:var(--gold);white-space:nowrap} .row .rmeta{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--gold);white-space:nowrap;text-align:right} /* ---------- ARCH GRID（深藍三格） ---------- */ /* ---------- CARDS ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px} .cards.cards-4{grid-template-columns:repeat(2,1fr)} @media(max-width:640px){.cards.cards-4{grid-template-columns:1fr}} .card{ background:var(--white); border:1px solid var(--line-soft); border-left:3px solid var(--gold); padding:36px 32px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:0 14px 40px rgba(0,35,71,.08)} .card .csym{font-size:1.4rem;color:var(--gold);margin-bottom:14px} .card .ctitle{font-family:var(--tc);font-weight:500;font-size:1.2rem;color:var(--navy);letter-spacing:.04em;margin-bottom:4px} .card .cen{font-family:var(--quote);font-style:italic;font-size:.95rem;color:var(--gold-deep);margin-bottom:16px} .card .cdesc{font-family:var(--tc);font-weight:300;font-size:.95rem;line-height:1.9;color:var(--ink)} .card ul{list-style:none;margin-top:14px} .card li{position:relative;padding:5px 0 5px 20px;font-family:var(--tc);font-weight:300;font-size:.92rem;line-height:1.8} .card li::before{content:"◇";position:absolute;left:0;top:6px;color:var(--gold);font-size:.7rem} /* ---------- STATS ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .stat{background:var(--navy);padding:44px 30px;text-align:center} .stat .sv{font-family:var(--quote);font-weight:500;font-size:2.7rem;color:var(--gold-soft);letter-spacing:.03em;line-height:1.1} .stat .sl{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,237,224,.6);margin-top:12px} .stat .sd{font-family:var(--tc);font-weight:300;font-size:.88rem;color:rgba(244,237,224,.75);margin-top:8px;line-height:1.7} /* ---------- TESTIMONIALS ---------- */ .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px} .quote-card{ background:var(--white); border:1px solid var(--line-soft); padding:38px 34px 30px; position:relative; } .quote-card::before{ content:"“"; font-family:var(--quote);font-style:italic; font-size:3rem;color:var(--gold);line-height:1; display:block;margin-bottom:10px; } .quote-card .qtext{font-family:var(--tc);font-weight:300;font-size:.98rem;line-height:2;color:var(--ink)} .quote-card .qwho{ margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft); font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--gold-deep);text-transform:uppercase; } /* ---------- STEPS（流程） ---------- */ .steps{position:relative;margin-top:8px} .steps::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:1px;background:var(--line)} .step{display:grid;grid-template-columns:56px 1fr;gap:28px;padding:22px 0;position:relative;align-items:start} .step .snum{ width:56px;height:56px;border-radius:50%; background:var(--paper);border:1.5px solid var(--gold); display:flex;align-items:center;justify-content:center; font-family:var(--quote);font-style:italic;font-size:1.2rem;color:var(--gold-deep); position:relative;z-index:1; } .step .sbody h3{font-family:var(--tc);font-weight:500;font-size:1.15rem;color:var(--navy);letter-spacing:.03em} .step .sbody .sdur{font-family:var(--quote);font-style:italic;font-size:.92rem;color:var(--gold-deep);margin:2px 0 8px} .step .sbody p{font-family:var(--tc);font-weight:300;font-size:.95rem;line-height:1.9;color:var(--ink)} .step .sbody .deliver{ display:inline-block;margin-top:10px; font-family:var(--mono);font-size:.66rem;letter-spacing:.12em; color:var(--gold-deep);border:1px solid var(--line); padding:5px 14px;border-radius:100px;background:rgba(184,153,104,.07); } /* ---------- PRICE ---------- */ .price-tag{ display:inline-block;padding:14px 36px; border:1px solid var(--gold);border-radius:100px; font-family:var(--quote);font-size:1.3rem;color:var(--gold-deep); letter-spacing:.08em;background:rgba(244,237,224,.5); } .on-navy .price-tag{color:var(--gold-soft);background:rgba(184,153,104,.08)} .price-tag strong{font-weight:500;font-size:1.5rem} /* ---------- FAQ ---------- */ .faq{display:grid;gap:0;border-top:1px solid var(--line)} .faq-item{padding:30px 4px;border-bottom:1px solid var(--line)} .faq-q{font-family:var(--tc);font-weight:500;font-size:1.1rem;color:var(--navy);letter-spacing:.03em;display:flex;gap:14px} .faq-q .qn{font-family:var(--quote);font-style:italic;color:var(--gold);flex:0 0 auto} .faq-a{font-family:var(--tc);font-weight:300;font-size:.95rem;line-height:2;color:var(--ink);margin-top:12px;padding-left:44px} /* ---------- HIGHLIGHT BOX ---------- */ .hl-box{ margin-top:48px;padding:30px 36px; background:rgba(184,153,104,.07); border-left:2px solid var(--gold); max-width:760px; } .hl-box .hl-eng{font-family:var(--quote);font-style:italic;font-size:1.05rem;color:var(--gold-deep);margin-bottom:10px;letter-spacing:.04em} .hl-box p{font-family:var(--tc);font-weight:300;font-size:.95rem;line-height:2;color:var(--ink)} /* ---------- BUTTONS ---------- */ .btn{ display:inline-block; font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--navy);background:var(--gold); padding:16px 34px;transition:background .3s,transform .3s;white-space:nowrap; border:0;cursor:pointer; } .btn:hover{background:var(--gold-soft);transform:translateY(-2px)} .btn.ghost{ background:transparent;color:var(--navy); border:1px solid var(--gold); } .btn.ghost:hover{background:rgba(184,153,104,.12)} .on-navy .btn.ghost{color:var(--paper)} .enter{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--navy); border-bottom:1px solid var(--gold); padding-bottom:4px;transition:gap .3s,color .3s; } .enter:hover{gap:18px;color:var(--gold)} .on-navy .enter{color:var(--paper)} /* ---------- PHILOSOPHY ---------- */ .philo{background:var(--paper);padding:120px 0} .philo .wrap{max-width:820px;text-align:center} .philo blockquote{ font-family:var(--quote);font-style:italic; font-size:clamp(1.6rem,4.4vw,2.5rem); line-height:1.5;color:var(--navy);letter-spacing:.01em; } .philo .zh-quote{ font-family:var(--tc);font-weight:300; font-size:clamp(1.05rem,2.6vw,1.3rem); color:var(--navy-70);margin-top:28px;letter-spacing:.14em;line-height:2; } .philo .rule{width:1px;height:60px;background:var(--gold);margin:44px auto 0} .philo .cred{ font-family:var(--tc);font-weight:300;font-size:.95rem;color:var(--navy-45); margin-top:44px;letter-spacing:.06em; } /* ---------- SUBSCRIBE FORM ---------- */ .subscribe-form{ display:flex;flex-direction:column; width:100%;max-width:480px; border:1px solid var(--gold-soft); background:rgba(255,255,255,.05); } .subscribe-form input{ width:100%;padding:18px 22px;border:none;background:transparent; font-family:var(--tc);font-size:.92rem;color:var(--paper);outline:none;letter-spacing:.05em; } .subscribe-form input:first-child{border-bottom:1px solid rgba(205,180,137,.25)} .subscribe-form input::placeholder{color:rgba(244,237,224,.5);font-style:italic;font-family:var(--quote);font-size:1rem} .subscribe-form .btn{width:100%} .form-meta{ margin-top:16px; font-family:var(--quote);font-style:italic;font-size:.82rem; color:rgba(244,237,224,.6);letter-spacing:.14em; } /* ---------- FOOTER ---------- */ .foot{background:var(--navy);color:var(--paper);padding:100px 0 44px} .foot .cta-band{ display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end; gap:40px;padding-bottom:64px;border-bottom:1px solid rgba(184,153,104,.28); } .foot .cta-band .ct-left{max-width:520px} .foot .cta-band h2{ font-family:var(--tc);font-weight:400;font-size:clamp(1.6rem,4vw,2.3rem); color:var(--white);letter-spacing:.05em;line-height:1.4; } .foot .cta-band p{font-family:var(--tc);font-weight:300;color:rgba(244,237,224,.66);margin-top:16px;letter-spacing:.03em} .foot .fgrid{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px; padding-top:52px; } .foot .fbrand .brandmark{ font-family:var(--disp);font-size:1.15rem;letter-spacing:.42em;text-transform:uppercase;color:var(--paper);padding-left:.42em; } .foot .fbrand .zh{font-family:var(--tc);font-weight:300;color:rgba(244,237,224,.6);margin-top:12px;letter-spacing:.3em;font-size:.85rem} .foot .fcol h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px} .foot .fcol a{display:block;font-family:var(--tc);font-weight:300;color:rgba(244,237,224,.72);margin-bottom:12px;font-size:.95rem;transition:color .25s} .foot .fcol a:hover{color:var(--gold-soft)} .foot .legal{ margin-top:56px;padding-top:24px;border-top:1px solid rgba(184,153,104,.18); font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:rgba(244,237,224,.4); display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; } .foot .legal a{border-bottom:1px solid rgba(184,153,104,.35);transition:color .25s} .foot .legal a:hover{color:var(--gold-soft)} /* ---------- REVEAL ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* ---------- RESPONSIVE ---------- */ @media(max-width:820px){ body{font-size:17px} nav .navlinks{ position:fixed;inset:0 0 0 auto;width:74%;max-width:320px; background:var(--navy);flex-direction:column;justify-content:center; gap:30px;transform:translateX(100%);transition:transform .4s ease; box-shadow:-10px 0 40px rgba(0,0,0,.3); } nav .navlinks.open{transform:translateX(0)} nav .navlinks a{font-size:.8rem} nav .navlinks{overflow-y:auto;padding:60px 0} nav .has-sub{flex-direction:column} nav .has-sub>a .caret{display:none} nav .submenu{ position:static;transform:none;opacity:1;visibility:visible; background:transparent;border:0;box-shadow:none; padding:10px 0 0;display:flex;flex-direction:column;gap:14px;align-items:center; } nav .submenu a{ padding:0;border-left:0;font-size:.82rem; color:rgba(244,237,224,.55); } nav .submenu a:hover{padding-left:0} .navtoggle{display:block;z-index:60} .row{grid-template-columns:40px 1fr;gap:16px} .row .rstage,.row .rmeta{grid-column:2;text-align:left;margin-top:6px} .foot .cta-band{flex-direction:column;align-items:flex-start} .wrap{padding:0 24px} .page-hero{padding:150px 24px 70px} .faq-a{padding-left:0} .step{grid-template-columns:44px 1fr;gap:18px} .step .snum{width:44px;height:44px;font-size:1rem} .steps::before{left:21px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} } :focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* 導覽列品牌標籤（全站） */ nav .brandmark .brandtag{font-family:var(--tc);font-size:.8rem;font-weight:300;letter-spacing:.28em;color:var(--gold-soft); margin-left:13px;padding-left:13px;border-left:1px solid rgba(184,153,104,.4);vertical-align:2px} @media(max-width:600px){nav .brandmark .brandtag{display:none}} /* ============================================================ 以下為各頁專屬樣式（原本寫在各 HTML 的