/* ============================================================ SEO TOOLKIT — SUB-HUB (shared stylesheet for all 8 sub-hubs) UnitConverterTool.com | Dark theme | Rose accent #F43F5E External stylesheet — linked via Elementor Custom Code () ============================================================ */ /* === RANK MATH BREADCRUMB === */ .rank-math-breadcrumb{max-width:1000px;margin:0 auto;padding:12px 20px;font-family:'DM Sans',sans-serif;font-size:13px} .rank-math-breadcrumb a{color:#5A7090;text-decoration:none} .rank-math-breadcrumb a:hover{color:#F43F5E} .rank-math-breadcrumb .separator{color:#374B64;margin:0 8px} .rank-math-breadcrumb .last{color:#8899AA} /* === WRAPPER === */ .uct-widget-wrap{background:#0A0F1C;font-family:'DM Sans',sans-serif;color:#C8D8E8;overflow-x:hidden;width:100%;box-sizing:border-box} .uct-widget-wrap *{box-sizing:border-box} .uct-widget-wrap a{text-decoration:none} .uct-inner{max-width:1180px;margin:0 auto;padding:0 20px} /* === LABELS / TITLES === */ .uct-eyebrow{display:block;text-align:center;color:#F43F5E;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px} .uct-h2{text-align:center;color:#fff;font-weight:700;font-size:32px;line-height:1.2;margin:0 0 14px} .uct-h2 .uct-accent{color:#F43F5E} .uct-sub{text-align:center;color:#8899AA;font-size:16px;max-width:700px;margin:0 auto 40px;line-height:1.6} /* === HERO === */ .uct-hero{padding:50px 0 26px;text-align:center} .uct-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(244,63,94,0.12);color:#F43F5E;font-size:13px;font-weight:600;padding:7px 16px;border-radius:30px;border:1px solid rgba(244,63,94,0.3);margin-bottom:22px} .uct-hero h1{color:#fff;font-weight:800;font-size:42px;line-height:1.15;margin:0 0 18px;letter-spacing:-.01em} .uct-hero h1 .uct-accent{color:#F43F5E} .uct-hero-text{color:#A9BBD0;font-size:16.5px;line-height:1.65;max-width:680px;margin:0 auto 26px} .uct-hero-text b{color:#C8D8E8;font-weight:600} .uct-hero-text a,.uct-inline-link{color:#F43F5E !important;border-bottom:1px solid rgba(244,63,94,0.3);transition:color .18s,border-color .18s} .uct-hero-text a:hover,.uct-inline-link:hover{color:#FB7185 !important;border-color:#FB7185} /* === STATS === */ .uct-stats{padding:24px 0 8px} .uct-stats-grid{display:flex;justify-content:center;gap:54px;flex-wrap:wrap;max-width:760px;margin:0 auto;text-align:center} .uct-stat-num{color:#F43F5E;font-size:32px;font-weight:800;line-height:1} .uct-stat-num .uct-pct{color:#fff} .uct-stat-label{color:#8899AA;font-size:13px;margin-top:8px} /* === SECTION === */ .uct-section{padding:44px 0} /* === INTRO BLOCK === */ .uct-intro-block{background:#0E1626;border:1px solid rgba(55,75,100,0.3);border-radius:14px;padding:26px 30px;max-width:980px;margin:0 auto;color:#A9BBD0;font-size:15.5px;line-height:1.8} .uct-intro-block a{color:#F43F5E !important;border-bottom:1px solid rgba(244,63,94,0.3);transition:color .18s} .uct-intro-block a:hover{color:#FB7185 !important;border-color:#FB7185} /* === TOOL CARDS === */ .uct-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .uct-card{position:relative;display:block;background:#111B2E;border:1px solid rgba(55,75,100,0.3);border-radius:14px;padding:22px 22px 20px;transition:transform .2s,border-color .2s,box-shadow .2s} .uct-card:hover{transform:translateY(-2px);border-color:rgba(244,63,94,0.45);box-shadow:0 10px 30px rgba(244,63,94,0.08)} .uct-card-ic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:21px;background:rgba(244,63,94,0.15);margin-bottom:14px} .uct-card-title{color:#fff;font-size:17px;font-weight:700;margin:0 0 7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .uct-badge-pop{background:rgba(244,63,94,0.15);color:#F43F5E;font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 8px;border-radius:20px;text-transform:uppercase} .uct-card-desc{color:#8899AA;font-size:13.5px;line-height:1.6;margin:0 0 14px} .uct-card-chips{display:flex;flex-wrap:wrap;gap:7px} .uct-chip{background:#0E1626;border:1px solid rgba(55,75,100,0.4);color:#7E92AC;font-size:11px;padding:4px 10px;border-radius:8px} .uct-card-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:#F43F5E;font-size:13.5px;font-weight:600} .uct-card:hover .uct-card-link{color:#FB7185} /* === WHY USE (feature cards) === */ .uct-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto} .uct-feature{background:#111B2E;border:1px solid rgba(55,75,100,0.3);border-radius:14px;padding:26px 24px;text-align:center;transition:transform .2s,border-color .2s} .uct-feature:hover{transform:translateY(-2px);border-color:rgba(244,63,94,0.4)} .uct-feature-ic{width:48px;height:48px;border-radius:12px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:23px} .uct-fi-rose{background:linear-gradient(135deg,#F43F5E,#E11D48)} .uct-fi-green{background:linear-gradient(135deg,#22C55E,#16A34A)} .uct-fi-blue{background:linear-gradient(135deg,#3B82F6,#2563EB)} .uct-fi-orange{background:linear-gradient(135deg,#F97316,#EA580C)} .uct-fi-purple{background:linear-gradient(135deg,#A855F7,#7C3AED)} .uct-fi-cyan{background:linear-gradient(135deg,#06B6D4,#0891B2)} .uct-feature h3{color:#fff;font-size:17px;font-weight:700;margin:0 0 9px} .uct-feature p{color:#8899AA;font-size:13.5px;line-height:1.6;margin:0} /* === SIBLING SUB-HUB NAV === */ .uct-siblings{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1100px;margin:0 auto} .uct-sibling{display:flex;align-items:center;gap:10px;background:#111B2E;border:1px solid rgba(55,75,100,0.3);border-radius:12px;padding:14px 16px;transition:transform .18s,border-color .18s} .uct-sibling:hover{transform:translateY(-2px);border-color:rgba(244,63,94,0.4)} .uct-sibling-ic{font-size:20px;flex:none} .uct-sibling-name{color:#C8D8E8;font-size:13.5px;font-weight:600;line-height:1.3} .uct-sibling:hover .uct-sibling-name{color:#fff} /* === FAQ === */ .uct-faq-wrap{max-width:820px;margin:0 auto} .uct-faq-item{background:#111B2E;border:1px solid rgba(55,75,100,0.3);border-radius:12px;margin-bottom:14px;overflow:hidden;transition:border-color .2s} .uct-faq-item.is-open{border-color:rgba(244,63,94,0.4)} .uct-faq-question{width:100%;text-align:left;cursor:pointer;background:transparent;border:0;outline:none;color:#fff;font-size:16px;font-weight:600;font-family:inherit;padding:20px 56px 20px 22px;position:relative;display:flex;align-items:center} .uct-faq-question:focus-visible{box-shadow:inset 0 0 0 2px rgba(244,63,94,0.5)} .uct-faq-question::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:24px;color:#F43F5E;font-weight:400;transition:transform .25s} .uct-faq-item.is-open .uct-faq-question::after{transform:translateY(-50%) rotate(45deg)} .uct-faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 22px} .uct-faq-item.is-open .uct-faq-answer{max-height:360px;padding:0 22px 20px} .uct-faq-answer p{color:#9FB1C7;font-size:14.5px;line-height:1.7;margin:0} .uct-faq-answer a{color:#F43F5E !important;border-bottom:1px solid rgba(244,63,94,0.3)} .uct-faq-answer a:hover{color:#FB7185 !important} /* === OTHER CATEGORIES === */ .uct-categories-inner{max-width:1100px;margin:0 auto;text-align:center} .uct-categories-label{display:block;color:#F43F5E;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px} .uct-categories-title{color:#fff;font-size:28px;font-weight:700;margin:0 0 34px} .uct-categories-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .uct-category-card{display:block;background:#111B2E;border:1px solid rgba(55,75,100,0.3);border-radius:14px;padding:24px 20px;text-align:left;transition:transform .2s,border-color .2s} .uct-category-card:hover{transform:translateY(-2px);border-color:rgba(244,63,94,0.4)} .uct-category-card-icons{margin-bottom:14px} .uct-category-icon{font-size:26px !important;width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center} .uct-ci-blue{background:rgba(59,130,246,0.15)} .uct-ci-green{background:rgba(16,185,129,0.15)} .uct-ci-orange{background:rgba(245,158,11,0.15)} .uct-ci-purple{background:rgba(139,92,246,0.15)} .uct-category-card h3{color:#fff;font-size:17px;font-weight:700;margin:0 0 8px} .uct-category-card p{color:#8899AA;font-size:13px;line-height:1.6;margin:0} /* === CTA === */ .uct-cta{text-align:center;padding:54px 0 62px} .uct-cta h2{color:#fff;font-size:28px;font-weight:700;margin:0 0 14px} .uct-cta p{color:#8899AA;font-size:15.5px;line-height:1.6;max-width:560px;margin:0 auto 28px} .uct-btn{display:inline-flex;align-items:center;gap:10px;background:#F43F5E;color:#fff;font-size:15px;font-weight:600;font-family:inherit;padding:14px 30px;border-radius:10px;border:0;cursor:pointer;transition:background .18s,transform .18s} .uct-btn:hover{background:#E11D48;transform:translateY(-2px);color:#fff} .uct-btn-ic{font-size:16px} .uct-btn-secondary{background:transparent;border:1px solid rgba(244,63,94,0.4);color:#F43F5E;margin-left:12px} .uct-btn-secondary:hover{background:rgba(244,63,94,0.1);color:#FB7185} /* === RESPONSIVE 768 === */ @media (max-width:768px){ .uct-hero{padding:40px 0 22px} .uct-hero h1{font-size:32px} .uct-h2{font-size:26px} .uct-stats-grid{gap:30px} .uct-stat-num{font-size:27px} .uct-cards{grid-template-columns:repeat(2,1fr);gap:16px} .uct-feature-grid{grid-template-columns:repeat(2,1fr)} .uct-siblings{grid-template-columns:repeat(2,1fr)} .uct-categories-grid{grid-template-columns:repeat(2,1fr)} .uct-categories-title{font-size:24px} .uct-intro-block{padding:22px;font-size:15px} } /* === RESPONSIVE 480 === */ @media (max-width:480px){ .uct-inner{padding:0 16px} .uct-hero h1{font-size:27px} .uct-h2{font-size:22px} .uct-sub{font-size:14.5px} .uct-stats-grid{gap:22px 36px} .uct-stat-num{font-size:24px} .uct-cards{grid-template-columns:1fr} .uct-feature-grid{grid-template-columns:1fr} .uct-siblings{grid-template-columns:1fr} .uct-categories-grid{grid-template-columns:1fr} .uct-faq-question{font-size:14.5px;padding:17px 50px 17px 18px} .uct-cta h2{font-size:24px} .uct-btn-secondary{margin-left:0;margin-top:12px} }