@charset "utf-8";
/* CSS Document */
 /* ========================================================= Fur Universe - Joint Product SEO Responsive / Fluid Layout ========================================================= */ .fu-joint-page { --fu-green: #6f8d68; --fu-dark: #3f5540; --fu-light: #f4f8f1; --fu-light2: #edf4e9; --fu-gold: #c6a15b; --fu-text: #555; --fu-border: #e1e8dd; --fu-white: #fff; width: 100%; max-width: none; margin: 0; padding: 0 3vw 5vw; color: var(--fu-text); font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif; line-height: 1.85; overflow-wrap: anywhere; } .fu-joint-page *, .fu-joint-page *::before, .fu-joint-page *::after { box-sizing: border-box; } .fu-joint-page img, .fu-joint-page video, .fu-joint-page iframe { max-width: 100%; height: auto; } .fu-joint-page table { max-width: 100%; } /* ========================================================= SEO Intro ========================================================= */ .fu-joint-hero { width: 100%; margin-bottom: 5vw; padding: clamp(28px, 5vw, 50px) clamp(18px, 4vw, 35px); border-radius: clamp(16px, 2vw, 24px); background: linear-gradient( 135deg, #f4f8f1 0%, #fbfcf9 55%, #d1dbdf 100% ); border: 1px solid var(--fu-border); text-align: center; } .fu-joint-label { display: inline-block; max-width: 100%; padding: 5px 18px; margin-bottom: 15px; border-radius: 30px; background: #fff; border: 1px solid #dbe6d7; color: var(--fu-green); font-size: clamp(13px, 1.5vw, 14px); font-weight: 600; letter-spacing: 1px; } .fu-joint-hero h1 { margin: 0 0 18px; color: var(--fu-dark); font-size: clamp(26px, 4vw, 34px); line-height: 1.4; font-weight: 700; } .fu-joint-hero .fu-lead { width: 100%; max-width: none; margin: 0 auto; color: #666; font-size: clamp(15px, 1.8vw, 17px); } .fu-joint-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 25px; } .fu-joint-keywords span { max-width: 100%; padding: 6px 14px; border-radius: 30px; background: #fff; color: #60735b; border: 1px solid #dce7d8; font-size: clamp(13px, 1.5vw, 14px); } /* ========================================================= Common Section ========================================================= */ .fu-joint-section { width: 100%; margin-bottom: clamp(40px, 6vw, 65px); } .fu-joint-heading { margin-bottom: clamp(22px, 3vw, 30px); text-align: center; } .fu-joint-heading h2 { position: relative; display: inline-block; max-width: 100%; margin: 0 0 10px; padding-bottom: 12px; color:#3969a8;font-size: 24px; line-height: 1.45; } .fu-joint-heading h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 55px; height: 3px; transform: translateX(-50%); border-radius: 10px; background: var(--fu-gold); } .fu-joint-heading p { margin: 0; color: #888; font-size: clamp(14px, 1.7vw, 15px); } /* ========================================================= Why Joint Care ========================================================= */ .fu-joint-care-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 25px); } .fu-care-box { min-width: 0; padding: clamp(22px, 3vw, 30px); border-radius: clamp(15px, 2vw, 20px); background: #fff; border: 1px solid var(--fu-border); } .fu-care-box h3 { margin: 0 0 15px; color: var(--fu-dark); font-size: clamp(19px, 2.4vw, 22px); } .fu-care-box p { margin: 0 0 12px; font-size: clamp(15px, 1.8vw, 16px); } .fu-care-box p:last-child { margin-bottom: 0; } /* ========================================================= Product Core ========================================================= */ .fu-product-core { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 30px); align-items: stretch; } .fu-product-core-box { min-width: 0; padding: clamp(24px, 3.5vw, 35px); border-radius: clamp(16px, 2vw, 22px); background: #f7f0e5; border: 1px solid var(--fu-border); } .fu-product-core-box h3 { margin: 0 0 15px; color: var(--fu-dark); font-size: clamp(21px, 2.6vw, 24px); } .fu-product-core-box p { margin: 0 0 15px; } .fu-product-core-box p:last-child { margin-bottom: 0; } .fu-feature-list { margin: 20px 0 0; padding: 0; list-style: none; } .fu-feature-list li { position: relative; margin-bottom: 12px; padding-left: 28px; } .fu-feature-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--fu-green); font-weight: 700; } /* ========================================================= 7 Ingredients ========================================================= */ .fu-ingredient-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 20px); } .fu-ingredient-card { position: relative; min-width: 0; padding: clamp(22px, 2.5vw, 28px) clamp(18px, 2.2vw, 25px); background: #fff; border: 1px solid var(--fu-border); border-radius: clamp(15px, 2vw, 18px); transition: all .3s ease; } .fu-ingredient-card:hover { transform: translateY(-5px); border-color: #cbdcc5; box-shadow: 0 12px 28px rgba(63, 85, 64, .10); } .fu-ingredient-number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 15px; border-radius: 50%; background: var(--fu-light); color: var(--fu-blue); font-size: 13px; font-weight: 700; } .fu-ingredient-card h3 { margin: 0 0 10px; color: #3969a8; font-size: clamp(18px, 2vw, 19px); line-height: 1.5; } .fu-ingredient-card p { margin: 0; color: #666; font-size: clamp(14px, 1.7vw, 15px); } /* ========================================================= Formula ========================================================= */ .fu-formula { width: 100%; padding: clamp(24px, 3.5vw, 35px); border-radius: clamp(16px, 2vw, 22px); background: var(--fu-light); border: 1px solid var(--fu-border); } .fu-formula h3 { margin: 0 0 15px; color: var(--fu-dark); font-size: clamp(20px, 2.5vw, 22px); } .fu-formula p { margin: 0; font-size: clamp(15px, 1.8vw, 16px); } .fu-formula-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .fu-formula-tags span { display: inline-block; max-width: 100%; padding: 7px 14px; border-radius: 8px; background: #fff; border: 1px solid #dbe6d7; color: #586954; font-size: clamp(13px, 1.6vw, 14px); } /* ========================================================= Feeding ========================================================= */ .fu-feeding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 25px); } .fu-feeding-box { min-width: 0; padding: clamp(22px, 3vw, 30px); background: #fff; border: 1px solid var(--fu-border); border-radius: clamp(15px, 2vw, 20px); } .fu-feeding-box h3 { margin: 0 0 20px; color:#3969a8; font-size: clamp(19px, 2.3vw, 21px); } .fu-dose-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .fu-dose-table th, .fu-dose-table td { padding: clamp(10px, 1.5vw, 13px) clamp(8px, 1.5vw, 12px); border-bottom: 1px solid #edf0eb; text-align: left; overflow-wrap: anywhere; } .fu-dose-table th { background: var(--fu-light); color:#3969a8; font-weight: 600; } .fu-dose-table td:last-child { color: var(--fu-blue); font-weight: 700; text-align: right; } .fu-dose-table tr:last-child td { border-bottom: none; } .fu-feeding-note { margin-top: 20px; padding: 17px 20px; border-left: 4px solid var(--fu-gold); border-radius: 8px; background: #fffaf0; color: #3969a8; font-size: clamp(13px, 1.6vw, 14px); } /* ========================================================= Product Specification ========================================================= */ .fu-spec-table { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; overflow: hidden; background: #fff; border: 1px solid var(--fu-border); border-radius: 16px; } .fu-spec-table th, .fu-spec-table td { padding: clamp(11px, 1.8vw, 15px) clamp(10px, 2vw, 18px); border-bottom: 1px solid #edf0eb; text-align: left; overflow-wrap: anywhere; } .fu-spec-table th { width: 25%; background: var(--fu-light); color: var(--fu-dark); font-weight: 600; } .fu-spec-table tr:last-child th, .fu-spec-table tr:last-child td { border-bottom: none; } /* ========================================================= Daily Care ========================================================= */ .fu-daily-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 20px); } .fu-daily-card { min-width: 0; padding: clamp(22px, 2.5vw, 28px) clamp(18px, 2vw, 24px); text-align: center; border-radius: clamp(15px, 2vw, 18px); background: #fff; border: 1px solid var(--fu-border); } .fu-daily-icon { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; margin: 0 auto 15px; border-radius: 50%; background: var(--fu-light); color: #3969a8; font-size: 22px; } .fu-daily-card h3 { margin: 0 0 10px; color: var(--fu-dark); font-size: clamp(18px, 2vw, 19px); } .fu-daily-card p { margin: 0; color: #666; font-size: clamp(14px, 1.7vw, 15px); } /* ========================================================= Safety ========================================================= */ .fu-safety { width: 100%; padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 30px); text-align: center; color: #fff; border-radius: clamp(16px, 2vw, 22px); background: #86a2b6; } .fu-safety h2 { margin: 0 0 12px; color: #fff; font-size: clamp(22px, 3vw, 27px); } .fu-safety p { width: 100%; max-width: none; margin: 0 auto 22px; opacity: .95; } .fu-safety-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } .fu-safety-badges span { max-width: 100%; padding: 8px 18px; border: 1px solid rgba(255,255,255,.45); border-radius: 30px; font-size: clamp(13px, 1.6vw, 14px); } /* ========================================================= FAQ ========================================================= */ .fu-faq { width: 100%; max-width: none; margin: 0; } .fu-faq-item { margin-bottom: 12px; border: 1px solid var(--fu-border); border-radius: 12px; background: #fff; overflow: hidden; } .fu-faq-item summary { position: relative; padding: 18px 50px 18px 20px; cursor: pointer; color: var(--fu-dark); font-size: clamp(15px, 1.9vw, 17px); font-weight: 600; list-style: none; } .fu-faq-item summary::-webkit-details-marker { display: none; } .fu-faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 14px; color: var(--fu-blue); font-size: 25px; font-weight: 400; } .fu-faq-item[open] summary::after { content: "−"; } .fu-faq-answer { padding: 0 20px 20px; color: #666; font-size: clamp(14px, 1.7vw, 15px); } .fu-faq-answer p { margin: 0; } /* ========================================================= Company ========================================================= */ .fu-company { width: 100%; padding: clamp(22px, 3vw, 30px); border-radius: clamp(15px, 2vw, 18px); background: #f8faf6; border: 1px solid var(--fu-border); } .fu-company h2 { margin: 0 0 20px; color: var(--fu-dark); font-size: clamp(21px, 2.6vw, 24px); } .fu-company-list { margin: 0; padding: 0; list-style: none; } .fu-company-list li { padding: 8px 0; border-bottom: 1px dashed #dfe6db; overflow-wrap: anywhere; } .fu-company-list li:last-child { border-bottom: none; } .fu-company-list strong { display: inline-block; min-width: 90px; color: var(--fu-dark); } /* ========================================================= CTA ========================================================= */ .fu-joint-cta { width: 100%; margin-top: 5vw; padding: clamp(28px, 4vw, 40px) clamp(18px, 3vw, 25px); border-radius: clamp(16px, 2vw, 22px); background: var(--fu-light); text-align: center; } .fu-joint-cta h2 { margin: 0 0 10px; color: var(--fu-dark); font-size: clamp(22px, 3vw, 27px); } .fu-joint-cta p { margin: 0; color: #666; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 900px) { .fu-product-core, .fu-joint-care-intro, .fu-feeding-grid { grid-template-columns: 1fr; } .fu-ingredient-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fu-daily-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .fu-joint-page { padding: 0 12px 40px; } .fu-joint-hero { padding: 35px 20px; border-radius: 18px; } .fu-joint-hero h1 { font-size: 27px; } .fu-joint-hero .fu-lead { font-size: 15px; } .fu-joint-heading h2 { font-size: 24px; } .fu-ingredient-grid { grid-template-columns: 1fr; } .fu-care-box, .fu-product-core-box, .fu-formula, .fu-feeding-box, .fu-company { padding: 24px 20px; } .fu-safety { padding: 32px 20px; } .fu-spec-table { display: block; overflow-x: auto; white-space: normal; } .fu-spec-table th, .fu-spec-table td { min-width: 120px; padding: 12px 10px; font-size: 14px; } .fu-spec-table th { width: auto; } .fu-dose-table th, .fu-dose-table td { padding: 11px 8px; font-size: 14px; } }