/* ================================================================== 花式鑽石 pillar —— 手機版（aj.mobile）與桌機版 aj.frontend/css/fancy-diamond.css 是「各做一份」： class 名稱與設計語言完全相同，HTML 也由桌機版原樣帶過來，差別只在版型（多欄 → 單欄）與字級基準。 ⚠️ Trap 2：本站 bootstrap.min.css 設 html{font-size:10px}， 1rem = 10px 而非 16px。桌機版的 rem 都是以 16px 寫的，本檔所有 rem 值已一律乘 1.6 換算（共 104 處），所以視覺大小與桌機一致。**日後從桌機版搬任何規則過來，記得同樣乘 1.6，否則會小一大截。** ⚠️ Trap 8：最後一段深色 CTA 與頁尾之間要留 40px，否則會被頁尾那個半凸出的白色 AJ 徽章切成兩半。見檔尾 .ajfd .cta{}。 ================================================================== */ /* 花式鑽石 pillar 專用樣式。搭配 Views/Service/FancyDiamond.cshtml。本檔刻意不使用任何寬度斷點與視窗寬度單位，所有規則都掛在 .ajfd 前綴底下。 */ /* ===== 頁面專屬 class：.ajfd（掛在），所有規則都在此前綴底下 ===== */ .ajfd, .ajfd *, .ajfd *::before, .ajfd *::after{ box-sizing:border-box;margin:0;padding:0; } .ajfd{ --black:#303030; --footer:#202126; --white:#ffffff; --ivory:#f6f5f3; --stone:#eeecea; --line:#e2e0dd; --gold:#ad995a; --gold-dark:#8f7d47; --gold-line:#c3b183; --text:#303030; --muted:#5c5955; --muted-lt:#a39f9c; --sans:"Microsoft JhengHei","微軟正黑體","PingFang TC","Heiti TC","Helvetica Neue",Arial,sans-serif; --serif-display:"Cormorant Garamond","Microsoft JhengHei","微軟正黑體","PingFang TC",serif; --num:"Playfair Display",Georgia,serif; font-family:var(--sans); font-weight:400; font-size:16px; font-style:normal; color:var(--text); background:var(--white); line-height:1.9; min-width:1000px; } .ajfd h1,.ajfd h2,.ajfd h3,.ajfd h4{ font-family:var(--serif-display); font-weight:500; font-style:normal; color:var(--black); letter-spacing:.04em; line-height:1.5; } .ajfd a{color:inherit;text-decoration:none;font-size:inherit;} .ajfd strong{font-size:inherit;font-weight:600;} .ajfd .wrap{max-width:1000px;margin:0 auto;padding:0 48px;} /* 內容可用寬 904px */ .ajfd img{max-width:100%;display:block;} .ajfd .real-shot{width:100%;display:block;} .ajfd .contents{max-width:1000px;margin:0 auto;overflow:hidden;background:var(--white);} /* ===== 圖片框 ===== */ .ajfd .big-img{ background:repeating-linear-gradient(135deg,#f6f5f3,#f6f5f3 12px,#eeece9 12px,#eeece9 24px); border:1px dashed #c9c5c0; display:flex;align-items:center;justify-content:center; color:var(--muted); text-align:center; position:relative; padding:18px; } .ajfd .big-img .ph-label{ max-width:340px; background:rgba(255,255,255,.88); padding:14px 18px; font-size:1.312rem; font-style:normal; letter-spacing:.03em; line-height:1.7; color:var(--text); } .ajfd .big-img .ph-tag{ display:block;font-family:var(--sans);font-weight:500; font-size:1.088rem;letter-spacing:.2em;color:var(--gold-dark);margin-bottom:6px; text-transform:uppercase;font-style:normal; } .ajfd .big-img .ph-size{ display:block;font-family:var(--num);font-style:italic;font-weight:400; font-size:1.44rem;color:var(--gold-dark);letter-spacing:.02em;margin-top:6px; } .ajfd .big-img .ph-file{ display:block;font-family:var(--sans);font-size:1.152rem;color:var(--muted-lt); letter-spacing:.02em;margin-top:2px;font-style:normal; } .ajfd .big-img.photo{background:#000;border:none;padding:0;overflow:hidden;} .ajfd .big-img.photo img{width:100%;height:100%;object-fit:cover;display:block;} .ajfd .big-img.mini .ph-label{padding:8px 6px;font-size:1.152rem;max-width:100%;line-height:1.6;} .ajfd .big-img.mini .ph-tag{font-size:0.96rem;letter-spacing:.12em;margin-bottom:2px;} .ajfd .big-img.mini .ph-size{font-size:1.184rem;margin-top:2px;} .ajfd .big-img.mini .ph-file{font-size:0.992rem;} /* ===== sections ===== */ .ajfd section{padding:110px 0;} .ajfd .center{max-width:680px;margin:0 auto 64px;text-align:center;} .ajfd .eyebrow{ font-family:var(--serif-display); font-style:normal; color:var(--muted);letter-spacing:.08em;font-size:1.568rem;margin-bottom:16px; } .ajfd .eyebrow.lat{font-style:italic;} /* 斜體僅限拉丁字母 */ .ajfd .center h1,.ajfd .center h2{font-size:2.8rem;margin-bottom:22px;letter-spacing:.08em;} .ajfd .center p{color:var(--muted);font-size:1.568rem;} .ajfd hr.thin{border:none;border-top:1px solid var(--gold-line);width:44px;margin:0 auto 26px;} /* GEO：每個 H2 下方的一句話直答 */ .ajfd .quick-answer{ max-width:904px;margin:0 auto 56px;background:var(--ivory); border-left:3px solid var(--gold-line);padding:20px 26px; color:var(--text);font-size:1.536rem;line-height:1.9; } .ajfd .quick-answer strong{color:var(--gold-dark);font-size:1.536rem;} .ajfd .quick-answer .qa-note{ display:block;margin-top:10px;font-size:1.28rem;line-height:1.8;color:var(--muted-lt); } .ajfd .quick-answer .qa-note strong{font-size:1.28rem;color:var(--muted);} /* hero */ .ajfd .hero{padding-top:90px;padding-bottom:50px;} .ajfd .hero .center{max-width:820px;margin-bottom:50px;} .ajfd .hero h1{font-size:3.52rem;line-height:1.5;margin-bottom:26px;} .ajfd .hero-lede{color:var(--muted);font-size:1.6rem;max-width:680px;margin:0 auto 40px;} .ajfd .viewer-cta{display:flex;justify-content:center;gap:20px;margin-top:44px;} /* 2026-09-10 配戴模組下方雙按鈕，同一排置中 */ .ajfd .hero-actions{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:0;} .ajfd .hero .big-img{aspect-ratio:2000/840;margin:0 -48px 50px;width:calc(100% + 96px);box-sizing:border-box;} /* 內容底→深色區 100px */ .ajfd .btn-outline{ display:inline-block;border:1px solid var(--black);color:var(--black); padding:14px 36px;font-size:1.28rem;letter-spacing:.18em;transition:.3s; } .ajfd .btn-outline:hover{background:var(--black);color:#fff;} .ajfd .btn-outline.gold{border-color:var(--gold);color:var(--gold-dark);} .ajfd .btn-outline.gold:hover{background:var(--gold);color:#fff;} .ajfd .btn-outline.gold.filled{background:var(--gold);color:#fff;} .ajfd .btn-outline.gold.filled:hover{background:#fff;color:var(--gold-dark);} /* quick chips */ /* 目錄（TOC）：卡片式清單、細邊框、編號、右上角可摺疊 */ .ajfd .toc-wrap{padding:60px 0;} .ajfd .toc-card{margin:0 -48px;width:calc(100% + 96px);border:1px solid var(--line);background:var(--white);padding:26px 40px;transition:padding .35s ease;box-sizing:border-box;} .ajfd .toc-card.collapsed{padding-top:20px;padding-bottom:20px;} .ajfd .toc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .ajfd .toc-card.collapsed .toc-head{margin-bottom:0;} .ajfd .toc-head .toc-title{font-family:var(--serif-display);font-size:2.08rem;color:var(--black);letter-spacing:.06em;} .ajfd .toc-head .toc-title .lat{font-style:italic;color:var(--muted);font-size:1.36rem;margin-left:10px;} .ajfd .toc-toggle{width:30px;height:30px;border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center;color:var(--gold-dark);font-size:1.28rem;cursor:pointer;background:none;flex-shrink:0;transition:transform .25s;} .ajfd .toc-card.collapsed .toc-toggle{transform:rotate(-90deg);} .ajfd .toc-list{margin:0;padding:0;list-style:none;overflow:hidden;max-height:700px;transition:max-height .35s ease;} .ajfd .toc-card.collapsed .toc-list{max-height:0;} .ajfd .toc-item{border-bottom:1px solid var(--line);} .ajfd .toc-item:last-child{border-bottom:none;} .ajfd .toc-item a{display:flex;gap:12px;align-items:baseline;padding:10px 0;font-size:1.44rem;color:var(--text);} .ajfd .toc-item .toc-num{font-family:var(--num);font-weight:600;color:var(--gold-dark);flex-shrink:0;width:22px;font-size:1.44rem;} /* 三句重點列（✦ 條列，深色區與淺色區共用結構） */ .ajfd .point-lines{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 30px;} .ajfd .point-lines .pl{display:flex;gap:10px;align-items:baseline;font-size:1.52rem;line-height:1.9;} .ajfd .point-lines .pl .mark{font-size:1.44rem;line-height:1.9;flex-shrink:0;} /* 深色引言區版本 */ .ajfd .story .point-lines{margin-top:30px;} .ajfd .story .point-lines .pl{color:#cfcbc6;font-size:1.52rem;} .ajfd .story .point-lines .pl .mark{color:var(--gold-line);font-size:1.44rem;} /* 淺色內文區版本 */ /* .center 限寬 680px，三句單排放不下，故在此區塊撐回內容寬 904px 並置中 */ .ajfd .center .point-lines{margin-top:22px;width:904px;position:relative;left:50%;transform:translateX(-50%);} .ajfd .center .point-lines .pl{color:var(--muted);font-size:1.52rem;} .ajfd .center .point-lines .pl .mark{color:var(--gold);font-size:1.44rem;} /* story 深色引言區塊 */ .ajfd .story{ position:relative;padding:110px 0; background:linear-gradient(135deg,#3a3a3a,#242424); display:flex;align-items:center;justify-content:center; } .ajfd .story .inner{max-width:760px;text-align:center;color:#f0efed;padding:0 40px;} .ajfd .story .story-h2{color:#f0efed;font-size:2.48rem;letter-spacing:.06em;margin:0 0 14px;font-weight:500;} .ajfd .story .eyebrow{color:var(--gold-line);font-size:1.68rem;} .ajfd .story p{font-size:1.84rem;line-height:2.1;color:#e7e5e2;margin-bottom:0;font-style:normal;} .ajfd .story .sub{font-size:1.52rem;color:#a39f9c;margin-top:26px;} /* 形狀圖鑑：5 欄 × 164px，gap 21px → 5×164 + 4×21 = 904px */ .ajfd .shape-grid{display:grid;grid-template-columns:repeat(5,164px);gap:34px 21px;justify-content:center;} .ajfd .shape-card{text-align:center;} .ajfd .shape-card .big-img{width:164px;height:164px;margin-bottom:12px;} .ajfd .shape-card h3{font-size:1.6rem;margin-bottom:4px;font-weight:500;letter-spacing:.04em;} .ajfd .shape-card .en-name{font-family:var(--sans);font-style:normal;font-size:1.312rem;color:var(--gold-dark);letter-spacing:.06em;margin-bottom:10px;} /* 2026-09-09 使用者指定：改用內文同一套無襯線字體、非斜體（比照尺寸表內的英文），字級與金色維持原樣 */ .ajfd .shape-card p{color:var(--muted);font-size:1.344rem;line-height:1.75;} /* 彩鑽色卡：4 欄 × 208px，gap 24px → 4×208 + 3×24 = 904px */ .ajfd .color-grid{display:grid;grid-template-columns:repeat(4,208px);gap:24px;justify-content:center;} .ajfd .color-card{text-align:center;} .ajfd .color-card .big-img{width:208px;height:168px;margin-bottom:16px;} .ajfd .color-card h3{font-size:1.68rem;margin-bottom:6px;font-weight:500;letter-spacing:.04em;} .ajfd .color-card .en-name{font-family:var(--serif-display);font-style:italic;font-size:1.344rem;color:var(--gold-dark);letter-spacing:.06em;margin-bottom:8px;} .ajfd .color-card p{color:var(--muted);font-size:1.408rem;line-height:1.8;} /* comparison table */ .ajfd .compare-wrap{max-width:904px;margin:0 auto;} .ajfd table.compare{width:100%;border-collapse:collapse;font-size:1.504rem;} .ajfd table.compare caption{caption-side:top;text-align:left;font-size:1.28rem;letter-spacing:.1em;color:var(--muted-lt);margin-bottom:14px;} .ajfd table.compare th,.ajfd table.compare td{padding:18px 20px;border-bottom:1px solid #e2e0dd;text-align:left;vertical-align:top;font-size:1.504rem;} .ajfd table.compare thead th{ font-weight:500;color:var(--black);font-size:1.504rem; background:var(--ivory);border-bottom:1px solid var(--gold-line); } .ajfd table.compare tbody th{font-weight:400;color:var(--muted);white-space:nowrap;font-size:1.408rem;} .ajfd table.compare tbody td{color:var(--text);font-size:1.504rem;} .ajfd table.compare td .pr{font-family:var(--sans);font-style:normal;font-weight:700;font-size:1.568rem;color:var(--gold-dark);white-space:nowrap;} /* 價格區間 */ .ajfd table.compare td.size-word{font-family:var(--sans);font-style:normal;font-size:1.504rem;font-weight:600;color:var(--gold-dark);white-space:nowrap;} /* 2026-09-12 Albert 指定：數字一律用內文無襯線體。原本是 Playfair Display 斜體，那是展示用襯線體，數字辨識度差。 #ratio 先前已單獨改過，現在統一成同一條，特例規則已刪除。 */ .ajfd table.compare td.num{font-family:var(--sans);font-style:normal;font-weight:400;font-size:1.504rem;color:var(--gold-dark);white-space:nowrap;} .ajfd table.compare td.todo{color:var(--muted-lt);font-size:1.408rem;font-style:normal;} .ajfd .compare-note{max-width:904px;margin:34px auto 0;color:var(--muted);font-size:1.472rem;text-align:center;} /* ============================================================ 互動配戴視覺（純 CSS，無 JavaScript）結構：.viewer > [4 組 radio inputs] + .viewer-body 切換原理：#id:checked ~ .viewer-body 內對應的 span 由 none 改為 inline ============================================================ */ .ajfd .viewer{position:relative;max-width:904px;margin:0 auto;} .ajfd .viewer .v-in{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;} .ajfd .viewer-body{display:grid;grid-template-columns:440px 440px;gap:24px;align-items:start;} .ajfd .viewer-stage .big-img{width:440px;height:440px;} .ajfd .viewer-stage .ph-label{max-width:320px;} .ajfd .viewer-stage .combo{ display:block;font-family:var(--sans);font-size:1.44rem;font-weight:500; color:var(--black);letter-spacing:.02em;line-height:1.9;margin-top:6px; } .ajfd .viewer-caption{ font-size:1.344rem;color:var(--muted-lt);line-height:1.8;margin-top:12px;text-align:center; } .ajfd .ctrl-row{border-bottom:1px solid #e2e0dd;padding:0 0 18px;margin-bottom:18px;} .ajfd .ctrl-row:last-of-type{border-bottom:none;margin-bottom:0;} .ajfd .ctrl-label{ display:block;font-family:var(--sans);font-weight:500;font-size:1.28rem; letter-spacing:.16em;color:var(--gold-dark);margin-bottom:12px;font-style:normal; } .ajfd .ctrl-label .lat{font-family:var(--serif-display);font-style:italic;font-size:1.28rem;color:var(--muted-lt);letter-spacing:.06em;} .ajfd .chips{display:flex;flex-wrap:wrap;gap:8px;} .ajfd .chips label{ display:inline-block;border:1px solid var(--line);background:var(--white); color:var(--muted);font-size:1.344rem;line-height:1.6;letter-spacing:.02em; padding:7px 14px;cursor:pointer;transition:.2s;user-select:none; } .ajfd .chips label:hover{border-color:var(--gold-line);color:var(--gold-dark);} /* 舞台文字：預設全部隱藏，被選中的那一個顯示 */ .ajfd .viewer-stage .val span{display:none;font-size:inherit;} .ajfd .viewer-stage .val{font-size:inherit;} /* --- 互動配戴模組：選中狀態對應規則（自動展開，勿手改順序） --- */ .ajfd #fd-sh-oval:checked ~ .viewer-body .val-shape .fd-s-oval, .ajfd #fd-sh-pear:checked ~ .viewer-body .val-shape .fd-s-pear, .ajfd #fd-sh-marquise:checked ~ .viewer-body .val-shape .fd-s-marquise, .ajfd #fd-sh-cushion:checked ~ .viewer-body .val-shape .fd-s-cushion, .ajfd #fd-sh-emerald:checked ~ .viewer-body .val-shape .fd-s-emerald, .ajfd #fd-sh-radiant:checked ~ .viewer-body .val-shape .fd-s-radiant, .ajfd #fd-sh-princess:checked ~ .viewer-body .val-shape .fd-s-princess, .ajfd #fd-sh-heart:checked ~ .viewer-body .val-shape .fd-s-heart, .ajfd #fd-sh-asscher:checked ~ .viewer-body .val-shape .fd-s-asscher, .ajfd #fd-sh-round:checked ~ .viewer-body .val-shape .fd-s-round{display:inline;} .ajfd #fd-sh-oval:checked ~ .viewer-body label[for="fd-sh-oval"], .ajfd #fd-sh-pear:checked ~ .viewer-body label[for="fd-sh-pear"], .ajfd #fd-sh-marquise:checked ~ .viewer-body label[for="fd-sh-marquise"], .ajfd #fd-sh-cushion:checked ~ .viewer-body label[for="fd-sh-cushion"], .ajfd #fd-sh-emerald:checked ~ .viewer-body label[for="fd-sh-emerald"], .ajfd #fd-sh-radiant:checked ~ .viewer-body label[for="fd-sh-radiant"], .ajfd #fd-sh-princess:checked ~ .viewer-body label[for="fd-sh-princess"], .ajfd #fd-sh-heart:checked ~ .viewer-body label[for="fd-sh-heart"], .ajfd #fd-sh-asscher:checked ~ .viewer-body label[for="fd-sh-asscher"], .ajfd #fd-sh-round:checked ~ .viewer-body label[for="fd-sh-round"]{background:var(--gold);border-color:var(--gold);color:#fff;} .ajfd #fd-ra-r130:checked ~ .viewer-body .val-ratio .r-r130, .ajfd #fd-ra-r145:checked ~ .viewer-body .val-ratio .r-r145, .ajfd #fd-ra-r160:checked ~ .viewer-body .val-ratio .r-r160{display:inline;} .ajfd #fd-ra-r130:checked ~ .viewer-body label[for="fd-ra-r130"], .ajfd #fd-ra-r145:checked ~ .viewer-body label[for="fd-ra-r145"], .ajfd #fd-ra-r160:checked ~ .viewer-body label[for="fd-ra-r160"]{background:var(--gold);border-color:var(--gold);color:#fff;} .ajfd #fd-ct-050:checked ~ .viewer-body .val-ct .c-050, .ajfd #fd-ct-100:checked ~ .viewer-body .val-ct .c-100, .ajfd #fd-ct-150:checked ~ .viewer-body .val-ct .c-150, .ajfd #fd-ct-200:checked ~ .viewer-body .val-ct .c-200{display:inline;} .ajfd #fd-ct-050:checked ~ .viewer-body label[for="fd-ct-050"], .ajfd #fd-ct-100:checked ~ .viewer-body label[for="fd-ct-100"], .ajfd #fd-ct-150:checked ~ .viewer-body label[for="fd-ct-150"], .ajfd #fd-ct-200:checked ~ .viewer-body label[for="fd-ct-200"]{background:var(--gold);border-color:var(--gold);color:#fff;} /* reasons-style list（選購重點） */ .ajfd .reasons{background:var(--white);} /* 2026-09-09 使用者指定：Buying Tips 區塊底色改白 */ .ajfd .reason-row{ display:grid;grid-template-columns:44px 1fr;gap:20px; padding:32px 0;border-bottom:1px solid #e2e0dd;align-items:start; } .ajfd .reason-row:first-of-type{border-top:1px solid #e2e0dd;} .ajfd .reason-row .rn{font-family:var(--num);font-size:1.68rem;color:var(--gold);line-height:1.5;text-align:center;font-weight:600;} .ajfd .reason-row h3{font-size:1.84rem;margin-bottom:8px;font-weight:700;} .ajfd .reason-row h3.rn-gold{color:var(--gold-dark);font-size:1.84rem;font-weight:700;} /* 2026-09-09 使用者指定：第08點小標金字 */ .ajfd .reason-row p{color:var(--muted);font-size:1.536rem;} /* 大圖說明模組（證書區） */ .ajfd #certificate .meta p .field-name{display:block;font-size:1.568rem;color:var(--black);font-weight:600;margin-bottom:4px;} /* 2026-09-09 使用者指定：三個欄位小標獨立一行，內文放下一行 */ /* 長寬比三欄標示（對齊圖上三顆的位置） */ .ajfd .rt-key{color:var(--gold-dark);font-weight:700;font-size:1.536rem;} /* 2026-09-10 三個比例關鍵詞：金字粗體 */ .ajfd .ratio-fig{position:relative;} /* 標示改為絕對定位，left 百分比＝實測每顆鑽石在圖上的水平中心，確保與鑽石對齊 */ .ajfd .ratio-cols{position:absolute;left:0;right:0;bottom:0;height:0;} .ajfd .ratio-cols .rc-num{ position:absolute;bottom:26px;transform:translateX(-50%);white-space:nowrap; font-family:var(--sans);font-weight:700;font-size:1.6rem;color:var(--black);line-height:1.5;letter-spacing:.03em; } .ajfd .ratio-cols.cols-3 .rc-num:nth-child(1){left:18.7%;} .ajfd .ratio-cols.cols-3 .rc-num:nth-child(2){left:50.1%;} .ajfd .ratio-cols.cols-3 .rc-num:nth-child(3){left:82.5%;} .ajfd .ratio-cols.cols-2 .rc-num{font-size:1.312rem;letter-spacing:.02em;} .ajfd .ratio-cols.cols-2 .rc-num:nth-child(1){left:28.3%;} .ajfd .ratio-cols.cols-2 .rc-num:nth-child(2){left:71.8%;} .ajfd .img-caption .cap-line{display:block;font-size:1.2rem;line-height:1.9;} .ajfd .img-caption .cap-line strong{font-size:1.2rem;color:var(--muted);font-weight:600;} .ajfd .formation-col p.img-caption, .ajfd .img-caption{font-size:1.2rem;line-height:1.85;color:var(--muted-lt);margin-top:12px;letter-spacing:.02em;min-height:68px;} /* 需壓過 .formation-col p 的字級；min-height 固定 3 行，確保左右兩欄的 Point 齊平 */ .ajfd .process-step{padding:0;} .ajfd .process-step .big-img{aspect-ratio:904/474;margin-bottom:34px;} .ajfd .process-step .meta{display:grid;grid-template-columns:150px 1fr;gap:30px;max-width:904px;margin:0 auto;align-items:start;} .ajfd .process-step .meta .pn{display:inline-flex;align-items:baseline;gap:12px;} .ajfd .process-step .meta .pn .step-word{ font-family:var(--sans);font-weight:500; font-size:1.68rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;font-style:normal; } .ajfd .process-step .meta .pn .step-num{ display:inline-block;font-family:var(--num);font-weight:400;font-style:italic; font-size:3.36rem;color:var(--gold);letter-spacing:.01em; } .ajfd .process-step h3{font-size:2rem;margin-bottom:10px;font-weight:500;} .ajfd .process-step p{color:var(--muted);font-size:1.568rem;} .ajfd .process-step p + p{margin-top:14px;} /* 雙欄圖文（長寬比 / 證書上的車工寫法） */ .ajfd .formation-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:60px;} .ajfd .formation-col .big-img{aspect-ratio:16/9;margin-bottom:24px;} .ajfd .formation-col .pn{display:inline-flex;align-items:baseline;gap:12px;margin-bottom:8px;} .ajfd .formation-col .pn .step-word{ font-family:var(--sans);font-weight:500; font-size:1.472rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;font-style:normal; } .ajfd .formation-col .pn .step-num{ display:inline-block;font-family:var(--num);font-weight:400;font-style:italic; font-size:2.56rem;color:var(--gold);letter-spacing:.01em; } .ajfd .formation-col h3{font-size:2rem;margin-bottom:10px;font-weight:500;} .ajfd .formation-col p{color:var(--muted);font-size:1.568rem;} .ajfd .inline-cta{margin-top:22px;} .ajfd .inline-cta a{ font-size:1.36rem;letter-spacing:.05em;color:var(--gold-dark); display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid var(--gold-line);padding-bottom:2px; } /* 鑲嵌卡片：滑鼠移入放大看爪型（純 CSS，無 JavaScript）解析度：圖片輸出 1140×860、顯示 285×215（4 倍密度），放大 2.4 倍後等效需求 684×516，仍遠低於 1140，放大後依然銳利。 */ .ajfd .setting-card .big-img.zoom{overflow:hidden;position:relative;cursor:zoom-in;} .ajfd .setting-card .big-img.zoom img{transition:transform .45s ease;} .ajfd .setting-card .big-img.zoom:focus{outline:1px solid var(--gold-line);outline-offset:2px;} .ajfd .setting-card .big-img.zoom .zoom-hint{ position:absolute;right:10px;bottom:10px;width:26px;height:26px; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.85);border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.10); opacity:.92;transition:opacity .3s ease;pointer-events:none; font-size:1.12rem; } .ajfd .setting-card .big-img.zoom:hover .zoom-hint, .ajfd .setting-card .big-img.zoom:focus .zoom-hint{opacity:0;} .ajfd .setting-card .big-img.zoom .zoom-hint svg{width:13px;height:13px;display:block;} /* 滑鼠移入（或 Tab 聚焦）放大看爪型：整顆主石連同全部爪子填滿畫面。純 CSS、無 JavaScript。倍率 1.8 倍：顯示 285px × 1.8 = 513px，圖片實際 1140px，放大後仍銳利。--oy 一律 50%：戒指本體在每張圖裡都已垂直置中，放大後仍在畫面正中。倍率上限＝94÷戒指高度%，確保放大後戒指不會超出畫面（馬眼最長，只能到 1.5 倍）。 */ .ajfd .setting-card .big-img.zoom:hover img, .ajfd .setting-card .big-img.zoom:focus img, .ajfd .setting-card .big-img.zoom:focus-within img{ transform:scale(var(--zs,1.8)); transform-origin:50% var(--oy,42%); } /* 鑲嵌方式：3 欄 × 285px，gap 24px → 3×285 + 2×24 = 903px */ .ajfd .setting-group{max-width:904px;margin:0 auto 58px;} .ajfd .setting-group:last-of-type{margin-bottom:0;} .ajfd .setting-group-label{ display:flex;align-items:baseline;gap:14px; margin-bottom:26px;padding-bottom:12px;border-bottom:1px solid var(--line); } .ajfd .setting-group-label .gn{ font-family:var(--num);font-style:italic;font-weight:400; font-size:2.4rem;color:var(--gold);line-height:1.4; } .ajfd .setting-group-label .gt{ font-family:var(--serif-display);font-style:normal;font-weight:500; font-size:1.76rem;letter-spacing:.06em;color:var(--black); } .ajfd .setting-grid{display:grid;grid-template-columns:repeat(3,285px);gap:24px;justify-content:center;} .ajfd .setting-card{text-align:center;} .ajfd .setting-card .big-img{width:285px;height:215px;margin-bottom:18px;} .ajfd .setting-card h3{font-size:1.68rem;margin-bottom:4px;font-weight:500;letter-spacing:.04em;} .ajfd .setting-card .en-name{ /* 2026-09-09 同上：改用內文無襯線字體、非斜體 */ font-family:var(--sans);font-style:normal;font-size:1.312rem; color:var(--gold-dark);letter-spacing:.06em;margin-bottom:8px; } .ajfd .setting-card .pair{ font-family:var(--sans);font-size:1.408rem;font-weight:600;color:var(--black); letter-spacing:.02em;margin-bottom:10px;font-style:normal; } .ajfd .setting-card .pair .lead{font-weight:400;color:var(--muted-lt);font-size:1.248rem;letter-spacing:.1em;} .ajfd .setting-card p{color:var(--muted);font-size:1.44rem;line-height:1.8;} /* value columns */ .ajfd #trust{padding-top:60px;} /* 2026-09-09 使用者指定：與上方 Buying Tips 之間的留白收窄（原 110px） */ .ajfd .value-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;} .ajfd .value-cols.cols-4{grid-template-columns:repeat(4,208px);gap:24px;justify-content:center;} .ajfd .value-cols.cols-4 .big-img{width:208px;height:208px;margin:0 auto 18px;} .ajfd .value-cols.img-fixed{grid-template-columns:repeat(3,285px);gap:24px;justify-content:center;} .ajfd .value-cols.img-fixed .big-img{width:285px;height:215px;margin:0 auto 20px;} .ajfd .value-col{text-align:center;} .ajfd .value-col hr.thin{margin-bottom:24px;} .ajfd .value-col h3{font-size:1.68rem;margin-bottom:14px;font-weight:500;letter-spacing:.06em;} .ajfd .value-col .en-name{font-family:var(--serif-display);font-style:italic;font-size:1.312rem;color:var(--gold-dark);letter-spacing:.06em;margin-bottom:10px;} .ajfd .value-col p{color:var(--muted);font-size:1.52rem;} /* price bands */ .ajfd .price-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e2e0dd;border:1px solid #e2e0dd;} .ajfd .price-col{background:var(--white);padding:44px 30px;text-align:center;} .ajfd .price-col.featured{background:var(--ivory);} .ajfd .price-col .tag{font-weight:600;color:var(--gold);font-size:1.76rem;margin-bottom:18px;} .ajfd .price-col p{color:var(--muted);font-size:1.504rem;} /* faq */ .ajfd .faq-list{max-width:904px;margin:0 auto;} .ajfd .faq-item{border-bottom:1px solid #e2e0dd;} .ajfd .faq-q{ padding:26px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:20px; font-size:1.6rem;font-weight:500;letter-spacing:.03em; } .ajfd .faq-q .plus{color:var(--gold);font-size:1.92rem;transition:.25s;flex-shrink:0;} .ajfd .faq-item.open .plus{transform:rotate(45deg);} .ajfd .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted);font-size:1.536rem;} .ajfd .faq-a-inner{padding-bottom:26px;max-width:760px;font-size:1.536rem;} .ajfd .faq-item.open .faq-a{max-height:400px;} /* more references */ .ajfd .more-refs-grid{display:grid;grid-template-columns:repeat(3,285px);gap:24px;justify-content:center;} .ajfd .ref-card .big-img{width:285px;height:215px;margin-bottom:22px;} .ajfd .ref-img-link{display:block;} .ajfd .ref-img-link .big-img{transition:opacity .25s;} .ajfd .ref-img-link:hover .big-img{opacity:.85;} .ajfd .ref-card .ref-tag{ font-family:var(--sans);font-weight:500;font-size:1.248rem; letter-spacing:.15em;color:var(--gold);margin-bottom:10px;font-style:normal; } .ajfd .ref-card h3{font-size:1.76rem;margin-bottom:10px;font-weight:500;} .ajfd .ref-card p{color:var(--muted);font-size:1.52rem;margin-bottom:18px;} .ajfd .ref-card .ref-link{ font-size:1.36rem;letter-spacing:.05em;color:var(--black); display:inline-flex;align-items:center;gap:6px;transition:.25s; } .ajfd .ref-card .ref-link .arrow-r{transition:.25s;display:inline-block;} .ajfd .ref-card .ref-link:hover{color:var(--gold-dark);} .ajfd .ref-card .ref-link:hover .arrow-r{transform:translateX(4px);} /* cta */ .ajfd .cta{background:var(--footer);text-align:center;padding:140px 0;} .ajfd .cta .eyebrow{color:var(--gold-line);font-size:1.68rem;} .ajfd .cta h2{font-size:3.36rem;margin-bottom:22px;color:#f0efed;} .ajfd .cta p{color:#c7c4c1;margin-bottom:38px;max-width:600px;margin-left:auto;margin-right:auto;font-size:1.568rem;} .ajfd .btn-gold{ display:inline-block;border:1px solid #f0efed;color:#f0efed; padding:15px 40px;font-size:1.28rem;letter-spacing:.18em;transition:.3s; } .ajfd .btn-gold:hover{background:var(--gold);border-color:var(--gold);color:var(--footer);} .ajfd .btn-gold.filled{background:var(--gold);border-color:var(--gold);color:var(--footer);} .ajfd .btn-gold.filled:hover{background:var(--gold-dark);border-color:var(--gold-dark);} .ajfd .btn-gold.consult{display:table;margin:14px auto 0;cursor:pointer;} .ajfd .cta-contacts{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:56px;} .ajfd .cta-contacts a{color:#e7e5e2;font-size:1.6rem;letter-spacing:.03em;padding:6px 22px;transition:.25s;} .ajfd .cta-contacts a:hover{color:var(--gold-line);} .ajfd .cta-contacts .sep{width:1px;height:14px;background:#5a5854;display:inline-block;} /* 內部規劃備註（正式上線前整段移除） */ .ajfd .plan-note{ max-width:904px;margin:26px auto 0;border-left:3px solid var(--gold-line); background:#fbfaf8;padding:14px 18px;color:var(--muted);font-size:1.312rem;line-height:1.8; } .ajfd .plan-note strong{font-size:1.312rem;color:var(--gold-dark);font-weight:600;} .ajfd .plan-note code{font-family:Consolas,Monaco,monospace;font-size:1.248rem;color:var(--black);} /* 本頁不使用任何寬度斷點，以下唯一的 media query 是動態效果偏好設定。 */ @media (prefers-reduced-motion: reduce){ .ajfd .chips label, .ajfd .btn-outline, .ajfd .btn-outline.consult{cursor:pointer;} .ajfd .btn-gold, .ajfd .ref-card .ref-link, .ajfd .ref-card .ref-link .arrow-r, .ajfd .faq-q .plus, .ajfd .faq-a, .ajfd .cta-contacts a, .ajfd .setting-card .big-img.zoom img, .ajfd .setting-card .big-img.zoom .zoom-hint{transition:none;} } /* 版型的麵包屑在 .ajfd 外面：/fancy-diamond 不在 Mvc.sitemap 裡， SiteMapPath 會渲染成空的，但 site.css 的 .bt-a 仍帶 border-bottom:1px solid #e6e6e6，就是 header 底下那條灰線。 old-jewelry-remake 與 lab-grown-diamond 都是用同一招處理。 */ .breadcrumb.bt-a { display: none; } /* ================================================================== 手機版版型覆寫 —— 以下是桌機版沒有的部分本站是真正的流動版面，不需要也不使用斷點。 ================================================================== */ /* --- 先解掉桌機寫死的固定寬度，否則整頁會橫向捲動 --- .ajfd 的 min-width:1000px 是桌機版為了配合 site.css 的 .main/.contents 而設的；手機站的版面是流動的，一定要解掉。 .point-lines 用了 width:904px + translateX(-50%) 做置中，同樣要改。 --- */ .ajfd{ min-width:0; } .ajfd .contents{ max-width:none; overflow:visible; } .ajfd .center .point-lines{ width:auto; left:auto; transform:none; } .ajfd .hero .center{ max-width:none; } .ajfd .compare-wrap, .ajfd .compare-note, .ajfd .viewer, .ajfd .setting-group, .ajfd .faq-list, .ajfd .process-step .meta{ max-width:none; } /* --- 外框與間距 --- */ .ajfd .wrap{ max-width:none; padding:0 16px; } .ajfd section{ padding:44px 0; } .ajfd .story{ padding:40px 0; } .ajfd .story .inner{ padding:0 16px; } /* --- hero：桌機是 padding-top:90px，那條的特異性(0,2,0)壓過上面的 .ajfd section(0,1,1)，所以一定要指名覆寫。數值對齊 lab pillar 手機版。 --- */ .ajfd .hero{ padding:38px 0 34px; } /* lab pillar 的 hero 後面沒有圖，所以它 margin-bottom:0；本頁 hero 按鈕下面緊接著大圖，設 0 會讓按鈕壓到圖。 */ .ajfd .hero .center{ margin-bottom:28px; } /* --- 深色「先給答案」區：桌機的字級在手機上明顯過大，改成與 lab pillar 手機版同一組。長段中文在窄螢幕上置中很難讀，內文改靠左（lab 也是這樣）。 --- */ .ajfd .story{ padding:48px 0; } .ajfd .story .inner{ max-width:none; padding:0 20px; } .ajfd .story .story-h2{ font-size:2.1rem; margin-bottom:10px; } .ajfd .story .eyebrow{ font-size:1.5rem; margin-bottom:14px; } .ajfd .story p{ font-size:1.5rem; line-height:2; text-align:left; } .ajfd .story .sub{ font-size:1.4rem; margin-top:20px; } /* --- ✦ 的淡黃底（Trap 7）--- bootstrap.min.css 有全域的 .mark{background-color:#fcf8e3;padding:.2em}，本頁的 ✦ 會被套上一塊淡黃方塊。 lab pillar 當初是把 class 改名成 .pt-mark 迴避；本頁的 HTML 要與桌機版逐字相同（文案／FAQ／JSON-LD 同步用），所以改用覆寫：.ajfd .mark 是 (0,2,0)，壓得過 bootstrap 的 (0,1,0)。 --- */ .ajfd .mark{ background:none; background-color:transparent; padding:0; } /* --- 重點列：桌機一排，手機一行一條（對齊 lab 的 story-points） --- */ .ajfd .story .point-lines{ margin-top:20px; gap:10px; } .ajfd .story .point-lines .pl{ align-items:flex-start; } /* --- 標題字級：桌機的大標在手機上會爆版 --- */ .ajfd .hero h1{ font-size:2.4rem; line-height:1.5; } .ajfd .hero-lede{ font-size:1.45rem; } .ajfd h2{ font-size:2rem; line-height:1.45; } .ajfd h3{ font-size:1.6rem; } .ajfd .story-h2{ font-size:2rem; } /* --- hero 圖：桌機是滿版外推，手機直接貼齊內距 --- */ .ajfd .hero .big-img{ margin:0 0 32px; width:100%; } /* --- 卡片圖：桌機是固定像素（164/208/285px），手機一律填滿欄寬 --- 只改寬高、保留原比例；不這樣做的話兩欄相加會超出螢幕。 --- */ .ajfd .shape-card .big-img{ width:100%; height:auto; aspect-ratio:1/1; } .ajfd .color-card .big-img{ width:100%; height:auto; aspect-ratio:208/168; } .ajfd .setting-card .big-img{ width:100%; height:auto; aspect-ratio:285/215; } .ajfd .value-cols.cols-4 .big-img{ width:100%; height:auto; aspect-ratio:1/1; } .ajfd .value-cols.img-fixed .big-img{ width:100%; height:auto; aspect-ratio:285/215; } .ajfd .viewer-stage .big-img{ width:100%; height:auto; aspect-ratio:1/1; } /* --- 延伸閱讀卡片：桌機是三欄固定 285px --- */ .ajfd .more-refs-grid{ display:grid; grid-template-columns:1fr; gap:28px; justify-content:stretch; } .ajfd .ref-card .big-img{ width:100%; height:auto; aspect-ratio:285/215; margin-bottom:16px; } /* --- 目錄卡片：桌機用 margin:0 -48px 做滿版外推，手機縮成 -16px --- */ .ajfd .toc-card{ margin:0 -16px; width:calc(100% + 32px); padding:20px 16px; } /* --- 所有多欄一律改單欄 --- */ .ajfd .shape-grid, .ajfd .color-grid, .ajfd .setting-grid, .ajfd .value-cols, .ajfd .value-cols.cols-4, .ajfd .value-cols.img-fixed, .ajfd .formation-cols, .ajfd .price-cols, .ajfd .viewer-body{ display:grid; grid-template-columns:1fr; gap:24px; justify-content:stretch; } /* 形狀與彩鑽維持兩欄 —— 這兩組是要互相比較的，並排才看得出差異 */ .ajfd .shape-grid, .ajfd .color-grid{ grid-template-columns:repeat(2,1fr); gap:20px 12px; } .ajfd .process-step .meta{ grid-template-columns:1fr; gap:12px; } .ajfd .reason-row{ grid-template-columns:36px 1fr; gap:14px; } /* --- 按鈕：桌機並排，手機一顆一行比較好按 --- */ .ajfd .hero-actions, .ajfd .viewer-cta{ flex-direction:column; gap:12px; } .ajfd .hero-actions .btn-outline, .ajfd .viewer-cta .btn-outline{ width:100%; text-align:center; } /* --- 表格：手機放不下就橫捲，不要壓縮字級犧牲可讀性 --- */ /* 表格在手機上放不下，改成橫捲 —— 但一定要明講可以滑，否則使用者只會看到被切掉的一半，不會知道右邊還有欄位。提示用 CSS 產生，HTML 就能與桌機版保持逐字相同。 */ .ajfd .compare-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -16px; padding:0 16px; } .ajfd .compare-wrap::before{ content:"\2190 左右滑動可看完整表格 \2192"; display:block; font-size:1.28rem; letter-spacing:.06em; color:var(--gold-dark); background:var(--ivory); border:1px solid var(--line); padding:8px 12px; margin-bottom:10px; text-align:center; position:sticky; left:0; } .ajfd table.compare{ min-width:560px; } .ajfd table.compare th, .ajfd table.compare td{ padding:12px 14px; } /* --- 目錄 --- */ .ajfd .toc-item a{ font-size:1.4rem; } /* --- 重點列：桌機是一排，手機改成一行一條 --- */ .ajfd .point-lines{ flex-direction:column; align-items:flex-start; gap:6px; } /* --- Trap 8：最後一段深色區與頁尾之間要留白，否則頁尾那個 top:-21px 的白色 AJ 徽章會在深色上切出一塊白方塊。 .ajfd 的 reset 把子層 margin 歸零，所以必須寫兩層選擇器才蓋得過。 --- */ .ajfd .cta{ margin-bottom:40px; }