/* ========================================================================= 美麗施卡 rus-wife.com　前台樣式 ========================================================================= ── 為什麼跟 wife-rus 長得完全不一樣 ── 同一組客戶手上有 wife-rus.com（卡迪娜），主題重疊、同一台伺服器、 同一個 Cloudflare 帳號、同一套後台。如果連版型都一樣， 兩個站在 Google 眼中就是明顯的同源複製， 對兩邊都不利。所以這一套刻意在每一個視覺決定上都走反方向： wife-rus rus-wife（本站） ───────────────── ───────────────── 深墨綠底 #11201c 紙白底 #fbfaf8 黃銅金 #a8813f 磚紅 #b0392e 襯線標題 無襯線標題 圓角 0 圓角 0 但用細線分隔，不用色塊 深色頁首 淺色頁首＋細下框線 置中滿版 hero 左右分欄 hero，中間一條細直線 卡片有底色 卡片只有左側一條色棒，無陰影 區塊標題置中 區塊標題靠左，前面帶編號 ── 排版邏輯 ── 這套走「編輯感」：大量留白、細線分隔、靠左對齊、 標題用數字編號帶出閱讀順序。內容站要的是好讀，不是華麗。 ── 顏色的取法 ── 深靛藍與磚紅是俄羅斯民間工藝與教堂建築上常見的組合， 跟主題有連結，同時跟 wife-rus 的墨綠黃銅完全區隔。 ========================================================================= */ /* ---------- 設計變數 ---------- */ :root{ /* 主色：深靛藍。比純黑柔和，長文閱讀比較不刺眼 */ --ink:#101d33; --ink-70:#41506b; --ink-50:#6b7893; --muted:#7a8499; /* 強調色：磚紅。只用在少量位置 —— 連結、按鈕、卡片色棒、編號 */ --accent:#b0392e; --accent-dark:#8d2c23; --accent-soft:#f5e6e3; /* 底色：暖紙白，不是純白。純白在大面積時會偏冷 */ --paper:#fbfaf8; --paper-2:#f3f1ec; --line:#e2ded6; --line-strong:#c9c3b8; --wrap:1180px; --radius:0; --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} /* * 小標籤。wife-rus 用的是字距拉開的大寫小字； * 這裡改成「細線 + 紅色小字」，視覺語言不同。 */ .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:.74rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--accent); margin-bottom:.9rem; } .eyebrow::before{ content:"";width:26px;height:2px;background:var(--accent);flex:none; } /* ========================================================================= 頁首 —— 淺色，與 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} .brand-text strong{font-size:1.08rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)} .brand-text small{font-size:.7rem;color:var(--muted);letter-spacing:.08em} .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} /* * 樣板是