/* ========================================================================= 牽手姻緣網 lovemywife.org　前台樣式 ========================================================================= ── 為什麼要跟其他八站長得不一樣（規範第 45 條）── 同一組客戶、同一台伺服器、同一個 Cloudflare 帳號、同一產業九個站。 版型如果一樣，就是教科書等級的同源足跡，對每一個站都不利。 骨架是從 rus-wife 複製的，所以**特別要跟它拉開**： rus-wife（骨架來源） lovemywife（本站） ───────────────────── ───────────────────── 深靛藍 #101d33 深紫檀 #3a2b47 磚紅 #b0392e 青瓷藍 #3f7f8c 圓角 0 圓角 10px eyebrow 細線＋紅字 eyebrow 膠囊底色 區塊標題上框線 2px 區塊標題左側直立色棒 卡片左側色棒、無底無圓角 卡片有底色、圓角、細框、hover 浮起 格線用 1px gap 做細線 卡片之間留實際間距 目前九站的色系與圓角分配： lovewife 玫瑰 #a13455 14px tw-wife 青玉 #2c6a5b 4px vietnam-wife 靛藍 #34518c 0 wife-rus 墨綠＋黃銅 0 rus-wife 靛藍＋磚紅 0 lovemywife 紫檀＋青瓷藍 10px ← 本站 ── 顏色的取法 ── 紫檀是傳統婚嫁家具的木色，青瓷藍取自越南與華南共通的青花瓷器， 兩者跟「兩地制度比較」這個主題有連結， 而且九站裡沒有任何一站用過紫或青瓷藍，區隔度最高。 ── 排版邏輯 ── 這是資訊站，讀者是來查制度與流程的， 所以走「好讀」而不是「好看」：大量留白、靠左對齊、 段落之間留呼吸空間。圓角與柔和的底色是為了讓長文不那麼硬。 ========================================================================= */ /* ---------- 設計變數 ---------- */ :root{ /* 主色：深紫檀。比純黑柔和，長文閱讀比較不刺眼 */ --ink:#3a2b47; --ink-70:#5d5068; --ink-50:#857a8e; --muted:#8b8394; /* 強調色：青瓷藍。只用在少量位置 —— 連結、按鈕、標題色棒 */ --accent:#3f7f8c; --accent-dark:#2f636e; --accent-soft:#e3eff1; /* 底色：帶一點紫調的白，不是純白。純白在大面積時會偏冷， 而且底色若完全中性，紫檀色的標題會顯得突兀 */ --paper:#faf9fb; --paper-2:#f2eff4; --line:#e4dfe8; --line-strong:#cbc3d1; --wrap:1180px; /* 圓角 10px —— 其他八站是 0／4／14，這個值不與任何一站重複 */ --radius:10px; --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei", -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.85; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px} h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; line-height:1.35; letter-spacing:-.01em; margin:0 0 .7em; color:var(--ink); } h1{font-size:clamp(1.9rem,4.4vw,2.9rem);letter-spacing:-.02em} h2{font-size:clamp(1.35rem,2.6vw,1.75rem)} h3{font-size:1.12rem} p{margin:0 0 1.15em} ul,ol{margin:0 0 1.15em;padding-left:1.35em} li{margin-bottom:.45em} hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px} .skip-link{ position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff; padding:.7rem 1.1rem;z-index:200; } .skip-link:focus{left:0} .muted{color:var(--muted)} .small{font-size:.88rem} .center{text-align:center} .mt-3{margin-top:1rem} .mb-0{margin-bottom:0} /* * 小標籤。rus-wife 是「細線 + 紅色小字」，這裡改成有底色的膠囊。 * 沒有偽元素，所以不會有 rus-wife 那條 26px 短線。 */ .eyebrow{ display:inline-block; font-size:.74rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-dark); background:var(--accent-soft); padding:.3rem .8rem;border-radius:999px; margin-bottom:.9rem; } /* ========================================================================= 頁首 —— 淺色，與 wife-rus 的深色頁首相反 ========================================================================= */ .site-header{ background:rgba(251,250,248,.93); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:100; } .header-inner{ display:flex;align-items:center;gap:1.4rem; min-height:70px; } .brand{display:flex;align-items:center;gap:.75rem;flex:0 0 auto} /* 樣板是 站名副標， 兩行各自給樣式，只設 .brand-text 的話 small 會擠在同一行 */ .brand img{max-height:38px;width:auto} .brand-text{display:flex;flex-direction:column;line-height:1.22} /* * nowrap 是必要的，不是保險。 * * 這一站的主選單有 7 個項目（首頁／制度比較／越南配偶／大陸配偶／ * 流程說明／關於我們／聯絡我們），在 1200～1400px 的視窗寬度下 * 會把 .brand 擠窄，副標「跨國婚姻文化交流」就被折成兩行， * 整個品牌區變成三行、頁首被撐高。 * * .brand 雖然有 flex:0 0 auto（不縮），但那只保證 flex 不主動壓縮它， * 不會阻止裡面的文字自己換行。 */ .brand-text strong{ font-size:1.08rem;font-weight:800;letter-spacing:-.01em;color:var(--ink); white-space:nowrap; } .brand-text small{ font-size:.7rem;color:var(--muted);letter-spacing:.08em; white-space:nowrap; } .brand:hover{text-decoration:none} /* * 漢堡按鈕。樣板裡是三個獨立的 ， * 所以要用 span 直接畫三條線，不能只設一條再用偽元素補 * —— 那樣會變成五條（3 個 span + 2 個偽元素）。 */ .nav-toggle{ display:none;margin-left:auto; flex-direction:column;justify-content:center;gap:5px; width:42px;height:42px;padding:0; background:none;border:1px solid var(--line-strong);cursor:pointer; } .nav-toggle span{display:block;width:19px;height:1.5px;background:var(--ink);margin-inline:auto} /* * 樣板是