/* ============================================================ SEO TOOLKIT — SUPER HUB (/seo-toolkit/) 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 (minimal — no aggressive resets) === */ .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} /* === SHARED INNER CONTAINER === */ .uct-inner{max-width:1180px;margin:0 auto;padding:0 20px} /* === SECTION EYEBROW LABEL === */ .uct-eyebrow{ display:block;text-align:center; color:#F43F5E;font-size:13px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px; } /* === SECTION TITLES === */ .uct-h2{ text-align:center;color:#fff;font-weight:700; font-size:34px;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:680px;margin:0 auto 40px;line-height:1.6; } /* ============================================================ HERO (Widget 01 area) ============================================================ */ .uct-hero{padding:54px 0 30px;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:24px; } .uct-hero h1{ color:#fff;font-weight:800;font-size:46px;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:17px;line-height:1.65; max-width:660px;margin:0 auto 28px; } .uct-hero-text b{color:#C8D8E8;font-weight:600} /* search box (visual; can wire later) */ .uct-search{ max-width:560px;margin:0 auto;position:relative; } .uct-search input{ width:100%;background:#111B2E;border:1px solid rgba(55,75,100,0.5); border-radius:12px;padding:16px 18px 16px 48px; color:#C8D8E8;font-size:15px;font-family:inherit;outline:none; transition:border-color .2s,box-shadow .2s; } .uct-search input::placeholder{color:#5A7090} .uct-search input:focus{ border-color:#F43F5E;box-shadow:0 0 0 3px rgba(244,63,94,0.12); } .uct-search-ic{ position:absolute;left:18px;top:50%;transform:translateY(-50%); width:18px;height:18px;color:#5A7090; } /* ============================================================ STATS STRIP (Widget 02) ============================================================ */ .uct-stats{padding:30px 0 10px} .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:34px;font-weight:800;line-height:1; } .uct-stat-num .uct-pct{color:#fff} .uct-stat-label{color:#8899AA;font-size:13px;margin-top:8px} /* ============================================================ POPULAR PILLS + INTRO (part of Widget 03/04 area) ============================================================ */ .uct-section{padding:46px 0} .uct-pills{ display:flex;flex-wrap:wrap;justify-content:center;gap:12px; max-width:860px;margin:0 auto 8px; } .uct-pill{ display:inline-flex;align-items:center;gap:8px; background:#111B2E;border:1px solid rgba(55,75,100,0.4); color:#C8D8E8;font-size:14px;font-weight:500; padding:10px 18px;border-radius:30px; transition:transform .18s,border-color .18s,color .18s; } .uct-pill:hover{ transform:translateY(-2px);border-color:#F43F5E;color:#fff; } .uct-pill .uct-pill-ic{font-size:15px} /* intro paragraph 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:34px auto 0;color:#A9BBD0;font-size:15.5px;line-height:1.8; } .uct-intro-block a, .uct-inline-link{ color:#F43F5E !important; border-bottom:1px solid rgba(244,63,94,0.3); transition:color .18s,border-color .18s; } .uct-intro-block a:hover, .uct-inline-link:hover{color:#FB7185 !important;border-color:#FB7185} /* ============================================================ TOOL CARD GROUPS (Widget 05 — grouped by 8 sub-hubs) ============================================================ */ .uct-group{margin-bottom:46px} .uct-group-head{ display:flex;align-items:center;gap:12px; margin:0 auto 22px;max-width:1180px; } .uct-group-ic{ width:34px;height:34px;border-radius:9px;flex:none; display:flex;align-items:center;justify-content:center;font-size:18px; background:rgba(244,63,94,0.15); } .uct-group-title{color:#fff;font-size:22px;font-weight:700;margin:0} .uct-group-desc{color:#8899AA;font-size:14px;margin:3px 0 0} .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 US / BUILT DIFFERENT (Widget 06) ============================================================ */ .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} /* ============================================================ BUILT FOR EVERYONE (Widget 07) ============================================================ */ .uct-audience{ display:flex;flex-wrap:wrap;justify-content:center;gap:12px; max-width:820px;margin:0 auto; } .uct-aud-tag{ display:inline-flex;align-items:center;gap:8px; background:#111B2E;border:1px solid rgba(55,75,100,0.4); color:#C8D8E8;font-size:14px;padding:10px 18px;border-radius:30px; transition:transform .18s,border-color .18s; } .uct-aud-tag:hover{transform:translateY(-2px);border-color:#F43F5E} /* ============================================================ FAQ (Widget 08) ============================================================ */ .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:340px;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} /* ============================================================ ALL TOOLS AT A GLANCE (Widget 09 area — quick links footer) ============================================================ */ .uct-glance{ display:grid;grid-template-columns:repeat(4,1fr);gap:30px; max-width:1100px;margin:0 auto; } .uct-glance-col h3{ color:#F43F5E;font-size:15px;font-weight:700;margin:0 0 16px; padding-bottom:10px;border-bottom:1px solid rgba(55,75,100,0.3); } .uct-glance-h3-mt{margin-top:26px !important} .uct-glance-col ul{list-style:none;margin:0;padding:0} .uct-glance-col li{margin-bottom:11px} .uct-glance-col a{ color:#9FB1C7;font-size:13.5px;line-height:1.5; transition:color .18s;display:inline-flex;align-items:center;gap:6px; } .uct-glance-col a:hover{color:#F43F5E} .uct-glance-col a::before{content:"→";color:#5A7090;font-size:12px} /* ============================================================ OTHER TOOL CATEGORIES (cross-silo nav) ============================================================ */ .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:30px;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 (Widget 10) ============================================================ */ .uct-cta{text-align:center;padding:56px 0 64px} .uct-cta h2{color:#fff;font-size:30px;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} /* CTA button inside how-it-works/section reuse */ .uct-btn-wrap{text-align:center;margin-top:36px} /* ============================================================ RESPONSIVE — 768px ============================================================ */ @media (max-width:768px){ .uct-hero{padding:40px 0 24px} .uct-hero h1{font-size:34px} .uct-hero-text{font-size:15.5px} .uct-h2{font-size:27px} .uct-stats-grid{gap:30px} .uct-stat-num{font-size:28px} .uct-cards{grid-template-columns:repeat(2,1fr);gap:16px} .uct-feature-grid{grid-template-columns:repeat(2,1fr)} .uct-glance{grid-template-columns:repeat(2,1fr);gap:24px} .uct-categories-grid{grid-template-columns:repeat(2,1fr)} .uct-categories-title{font-size:25px} .uct-intro-block{padding:22px;font-size:15px} } /* ============================================================ RESPONSIVE — 480px ============================================================ */ @media (max-width:480px){ .uct-inner{padding:0 16px} .uct-hero h1{font-size:28px} .uct-badge{font-size:12px} .uct-h2{font-size:23px} .uct-sub{font-size:14.5px} .uct-stats-grid{gap:22px 36px} .uct-stat-num{font-size:25px} .uct-cards{grid-template-columns:1fr} .uct-feature-grid{grid-template-columns:1fr} .uct-glance{grid-template-columns:1fr} .uct-categories-grid{grid-template-columns:1fr} .uct-group-title{font-size:19px} .uct-faq-question{font-size:14.5px;padding:17px 50px 17px 18px} .uct-cta h2{font-size:25px} .uct-pill,.uct-aud-tag{font-size:13px;padding:9px 15px} }