/* Get Tools Lab V50 consolidated CSS */ /* assets/css/style.css */ :root{--bg:#f6f7fb;--surface:#fff;--surface-2:#f0f2f8;--text:#12182a;--muted:#697188;--primary:#6758e8;--primary-2:#8d7df4;--border:#e3e6ef;--shadow:0 20px 60px rgba(31,38,75,.10);--radius:20px}[data-theme="dark"]{--bg:#0d1220;--surface:#141b2b;--surface-2:#1d2638;--text:#f6f7fb;--muted:#aeb6c8;--border:#293348;--shadow:0 20px 60px rgba(0,0,0,.30)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.container{width:min(1180px,calc(100% - 36px));margin:auto}.narrow{max-width:860px}.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}.nav-wrap{height:76px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:900;letter-spacing:-.02em}.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 8px 22px rgba(103,88,232,.28)}.main-nav{display:flex;gap:24px;margin-left:auto}.main-nav a{font-weight:700;color:var(--muted);font-size:.94rem}.main-nav a:hover{color:var(--text)}.icon-button,.nav-toggle{width:42px;height:42px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;cursor:pointer}.nav-toggle{display:none;margin-left:auto}.hero{padding:92px 0 76px;background:radial-gradient(circle at 80% 10%,rgba(103,88,232,.18),transparent 32%),radial-gradient(circle at 7% 90%,rgba(68,184,255,.11),transparent 28%)}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.badge,.eyebrow{display:inline-block;color:var(--primary);font-weight:900;text-transform:uppercase;letter-spacing:.09em;font-size:.76rem}.hero h1,.page-hero h1{font-size:clamp(3rem,7vw,5.6rem);line-height:.98;letter-spacing:-.055em;margin:18px 0 24px}.hero h1 span{color:var(--primary)}.hero-lead,.page-hero p{font-size:1.12rem;color:var(--muted);max-width:680px}.hero-actions{display:flex;gap:12px;margin:30px 0}.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 21px;border-radius:13px;background:var(--primary);color:#fff;font-weight:850;box-shadow:0 12px 28px rgba(103,88,232,.22)}.button.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}.trust-row{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:.92rem;font-weight:700}.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:28px;box-shadow:var(--shadow)}.hero-card label{font-weight:850;display:block;margin-bottom:12px}.search-box,.inline-search{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:13px 15px}.search-box input,.inline-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}.hero-shortcuts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:.87rem}.hero-shortcuts a{color:var(--primary);font-weight:800}.search-suggestions{display:none;margin-top:10px;border:1px solid var(--border);border-radius:14px;overflow:hidden}.search-suggestions.open{display:block}.search-suggestions a{display:flex;justify-content:space-between;padding:11px 13px;background:var(--surface)}.search-suggestions a:hover{background:var(--surface-2)}.section{padding:82px 0}.section.compact{padding-top:64px}.section.alt{background:var(--surface)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}.section-head h2,.value-grid h2,.related-section h2{font-size:clamp(2rem,4vw,3rem);line-height:1.12;letter-spacing:-.035em;margin:8px 0 0}.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.category-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:.2s}.category-card:hover,.tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.category-card>span{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:var(--surface-2);font-weight:900;color:var(--primary)}.category-card h3{margin:0}.category-card p,.tool-card p,.related-card p,.value-grid p,.dashboard-panel p{color:var(--muted);margin:6px 0}.category-card>b{color:var(--primary);font-size:.88rem}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.dashboard-panel{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:22px;min-height:180px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-title h3{margin:0}.panel-title button{border:0;background:transparent;color:var(--primary);cursor:pointer;font-weight:800}.panel-title span{color:var(--muted);font-size:.85rem}.mini-tool-grid{display:grid;gap:10px}.mini-tool{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--border);background:var(--surface);border-radius:14px}.mini-tool span:first-child{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);color:var(--primary);font-size:.72rem;font-weight:900}.mini-tool div{flex:1}.mini-tool strong{display:block}.mini-tool small{color:var(--muted)}.empty-state{padding:22px;text-align:center}.tools-head .inline-search{width:min(340px,100%)}.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}.filter{border:1px solid var(--border);background:var(--surface);color:var(--muted);padding:9px 15px;border-radius:999px;cursor:pointer;font-weight:800}.filter.active{background:var(--primary);border-color:var(--primary);color:#fff}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tool-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;transition:.2s;min-height:245px;display:flex;flex-direction:column}.tool-card-top{display:flex;align-items:center;justify-content:space-between}.tool-icon{width:52px;height:52px;display:grid;place-items:center;background:var(--surface-2);border-radius:15px;color:var(--primary);font-size:.72rem;font-weight:950}.tool-category{padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.72rem;font-weight:850}.tool-card h3{font-size:1.18rem;margin:20px 0 6px}.tool-action{margin-top:auto;color:var(--primary);font-weight:850}.favorite-button{position:absolute;top:77px;right:22px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer}.favorite-button.active{color:#f3ad20}.no-results{text-align:center;color:var(--muted);padding:40px}.value-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}.value-cards{display:grid;gap:14px}.value-cards article{background:var(--surface);border:1px solid var(--border);padding:22px;border-radius:18px}.value-cards b{color:var(--primary)}.value-cards h3{margin:4px 0}.site-footer{background:#0b1020;color:#d8ddea;padding:60px 0 24px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footer-grid>div{display:flex;flex-direction:column;gap:10px}.footer-grid p{color:#9ca6bb}.footer-brand{color:#fff}.footer-bottom{border-top:1px solid #252d40;margin-top:38px;padding-top:22px;color:#929caf}.page-hero{padding:44px 0 28px}.page-hero h1{font-size:clamp(2.8rem,6vw,4.6rem)}.breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-bottom:26px}.breadcrumbs a{color:var(--primary)}.tool-page{padding:30px 0 70px}.tool-container{max-width:1000px}.tool-panel{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:28px;box-shadow:var(--shadow)}.tool-panel h1{font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.05;margin:8px 0 12px}.notice{color:var(--muted)}textarea,input[type="text"],input[type="number"],input[type="password"],select{max-width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:12px;padding:12px}textarea{width:100%;min-height:210px;resize:vertical}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.tool-panel button,.tool-panel .button{border:0;border-radius:12px;background:var(--primary);color:#fff;padding:12px 18px;font-weight:850;cursor:pointer}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.stat{background:var(--surface-2);border-radius:14px;padding:16px;text-align:center}.stat strong{display:block;font-size:1.5rem}.stat span{color:var(--muted);font-size:.85rem}.dropzone{border:2px dashed var(--border);border-radius:18px;padding:34px;text-align:center;background:var(--bg)}.preview{max-width:100%;border-radius:12px;margin-top:16px}.related-section{padding-top:58px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.related-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);padding:18px;border-radius:17px}.related-card>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);color:var(--primary);font-size:.7rem;font-weight:900}.related-card div{flex:1}.related-card h3{font-size:1rem;margin:0}.related-card p{font-size:.83rem}.related-card b{color:var(--primary)}details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:12px 0}summary{font-weight:850;cursor:pointer}@media(max-width:920px){.hero-grid,.value-grid{grid-template-columns:1fr}.category-grid,.tool-grid{grid-template-columns:repeat(2,1fr)}.main-nav{display:none;position:absolute;top:68px;left:18px;right:18px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);flex-direction:column;margin:0}.main-nav.open{display:flex}.nav-toggle{display:block}.dashboard-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}@media(max-width:640px){.hero{padding-top:64px}.hero h1{font-size:3.3rem}.hero-actions{flex-direction:column}.button{width:100%}.category-grid,.tool-grid,.related-grid,.footer-grid{grid-template-columns:1fr}.section-head{align-items:stretch;flex-direction:column}.tools-head .inline-search{width:100%}.stats{grid-template-columns:repeat(2,1fr)}.trust-row{gap:10px}.tool-panel{padding:20px}} .markdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.markdown-preview{min-height:210px;border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:18px;overflow:auto}.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.calc-grid article{background:var(--surface-2);border-radius:16px;padding:18px}.calc-grid input{width:110px;margin:5px}.calc-grid button{display:block;margin-top:12px}@media(max-width:920px){.category-grid{grid-template-columns:repeat(2,1fr)}.calc-grid{grid-template-columns:1fr}}@media(max-width:640px){.markdown-grid{grid-template-columns:1fr}.category-grid{grid-template-columns:1fr}} /* V6 production content */ .ad-slot{margin:28px 0;padding:22px;border:1px dashed var(--border);border-radius:18px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--muted);min-height:96px}.ad-slot span{font-weight:800;color:var(--text)}.ad-slot small{font-size:.78rem}.content-section{margin-top:42px}.steps-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.steps-grid li{display:flex;gap:12px;align-items:flex-start;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.steps-grid b{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--primary);color:white}.prose-card{padding:26px;background:var(--surface);border:1px solid var(--border);border-radius:20px}.prose-card p{color:var(--muted)}.faq-list{display:grid;gap:12px}.faq-list details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:0 18px}.faq-list summary{cursor:pointer;font-weight:800;padding:17px 0}.faq-list p{color:var(--muted);margin-top:0}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:999;background:var(--surface);padding:10px} @media(max-width:900px){.steps-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.steps-grid{grid-template-columns:1fr}.content-section{margin-top:32px}} /* V6.1 editorial system */ .article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.article-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:26px;box-shadow:0 12px 35px rgba(26,34,66,.06)}.article-card h2,.article-card h3{line-height:1.25;margin:16px 0 10px}.article-card p{color:var(--muted)}.article-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin:12px 0 18px}.article-page{padding:26px 0 84px}.article-layout{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:48px;align-items:start}.article-main h1{font-size:clamp(2.7rem,6vw,4.7rem);line-height:1.05;letter-spacing:-.045em;margin:20px 0}.article-main section{margin:42px 0}.article-main section h2{font-size:1.8rem}.article-main p{font-size:1.08rem;color:var(--muted)}.article-intro{font-size:1.28rem!important;color:var(--text)!important}.article-side{position:sticky;top:105px}.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:50px;padding:28px;border-radius:24px;background:linear-gradient(135deg,rgba(103,88,232,.13),rgba(77,190,255,.10));border:1px solid var(--border)}.guide-preview{background:var(--surface-2)}.article-grid.compact .article-card{box-shadow:none} @media(max-width:900px){.article-grid{grid-template-columns:1fr 1fr}.article-layout{grid-template-columns:1fr}.article-side{position:static}.guide-cta{align-items:flex-start;flex-direction:column}} @media(max-width:640px){.article-grid{grid-template-columns:1fr}} /* Get Tools Lab search — clean production version */ .hero-card { overflow: visible; } /* Supports both the V6 isolated container and the older fallback container. */ #qcSearchSuggestions, .qc-search, #searchSuggestions.qc-search { display: none; position: relative; z-index: 50; width: 100%; margin-top: 10px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 20px 55px rgba(20, 27, 43, .20); } #qcSearchSuggestions.open, .qc-search.open, #searchSuggestions.qc-search.open { display: block; } #qcSearchSuggestions > a, .qc-search > a, #searchSuggestions.qc-search > a { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 24px !important; align-items: center !important; gap: 13px !important; width: 100%; min-height: 74px; padding: 12px 14px !important; margin: 0 !important; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; } #qcSearchSuggestions > a:last-child, .qc-search > a:last-child, #searchSuggestions.qc-search > a:last-child { border-bottom: 0; } #qcSearchSuggestions > a:hover, #qcSearchSuggestions > a.active, .qc-search > a:hover, .qc-search > a.active, #searchSuggestions.qc-search > a:hover, #searchSuggestions.qc-search > a.active { background: var(--surface-2); } #qcSearchSuggestions > a.active, .qc-search > a.active, #searchSuggestions.qc-search > a.active { box-shadow: inset 3px 0 0 var(--primary); } #qcSearchSuggestions .qc-search__icon, .qc-search .qc-search__icon { display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; min-width: 40px; margin: 0 !important; padding: 0 !important; border-radius: 12px; background: var(--surface-2); color: var(--primary); font-size: .76rem; font-weight: 950; line-height: 1; } /* Match the class names actually generated by site-v6.js. */ #qcSearchSuggestions .qc-search__icon-guide, .qc-search .qc-search__icon-guide { background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)); } #qcSearchSuggestions .qc-search__icon-category, .qc-search .qc-search__icon-category { background: color-mix(in srgb, #44b8ff 14%, var(--surface-2)); color: #3696d3; } #qcSearchSuggestions .qc-search__content, .qc-search .qc-search__content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 4px !important; min-width: 0; width: 100%; margin: 0 !important; padding: 0 !important; } #qcSearchSuggestions .qc-search__content small, .qc-search .qc-search__content small { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; color: var(--muted); font-size: .69rem; font-weight: 900; letter-spacing: .055em; line-height: 1.2; text-transform: uppercase; } #qcSearchSuggestions .qc-search__content strong, .qc-search .qc-search__content strong { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; color: var(--text); font-size: .98rem; font-weight: 850; line-height: 1.35; } #qcSearchSuggestions .qc-search__content mark, .qc-search .qc-search__content mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); font-weight: 950; } #qcSearchSuggestions .qc-search__arrow, .qc-search .qc-search__arrow { display: block !important; justify-self: end; margin: 0 !important; padding: 0 !important; color: var(--primary); font-size: 1rem; line-height: 1; } #qcSearchSuggestions .qc-search__empty, .qc-search .qc-search__empty { grid-template-columns: minmax(0, 1fr) 24px !important; } #qcSearchSuggestions > a:focus-visible, .qc-search > a:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: -3px; } .search-box:focus-within, .inline-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); } @media (max-width: 640px) { #qcSearchSuggestions > a, .qc-search > a, #searchSuggestions.qc-search > a { grid-template-columns: 36px minmax(0, 1fr) 20px !important; min-height: 68px; padding: 11px 12px !important; } #qcSearchSuggestions .qc-search__icon, .qc-search .qc-search__icon { width: 36px !important; height: 36px !important; min-width: 36px; } #qcSearchSuggestions .qc-search__content strong, .qc-search .qc-search__content strong { font-size: .92rem; } #qcSearchSuggestions .qc-search__content small, .qc-search .qc-search__content small { font-size: .64rem; } } /* Get Tools Lab v7 delivery polish */ .stats-strip{padding-top:20px;padding-bottom:20px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stats-grid>div{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);text-align:center;box-shadow:var(--shadow-sm)}.stats-grid strong{display:block;font-size:clamp(1.5rem,4vw,2.35rem);color:var(--primary);line-height:1}.stats-grid span{display:block;margin-top:7px;color:var(--muted);font-weight:700;font-size:.86rem}.featured-tools{margin-top:24px}.footer-install{padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}.footer-install:hover{color:var(--primary)}.empty-page{max-width:680px;margin:60px auto;text-align:center;padding:48px 28px;border:1px solid var(--border);border-radius:28px;background:var(--surface)}.empty-page h1{font-size:clamp(2rem,6vw,4rem);margin:18px 0}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.control-grid label{display:grid;gap:8px;font-weight:800}.control-grid input,.control-grid select,.control-grid textarea{width:100%}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.result-grid>div{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}.result-grid small{display:block;color:var(--muted);margin-bottom:8px}.result-grid strong{font-size:1.3rem;color:var(--primary)} @media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr)}.control-grid,.result-grid{grid-template-columns:1fr}} /* Get Tools Lab Major Delivery v2 */ .saas-hero{padding:88px 0 70px;background:radial-gradient(circle at 85% 20%,rgba(103,88,232,.2),transparent 32%),linear-gradient(180deg,var(--surface,#fff),var(--background,#f7f7fb))}.saas-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.saas-hero h1{font-size:clamp(3rem,6vw,5.5rem);line-height:.98;letter-spacing:-.06em;max-width:800px;margin:20px 0}.saas-hero p{font-size:1.18rem;max-width:680px}.hero-search-panel{background:var(--card,#fff);border:1px solid var(--border,#e7e7ef);border-radius:28px;padding:30px;box-shadow:0 30px 80px rgba(31,27,80,.14);position:relative}.search-box.large{height:64px}.search-box kbd{margin-left:auto}.logo-strip{border-block:1px solid var(--border,#eee);padding:22px 0}.logo-strip .container{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;color:var(--muted,#65657a)}.category-cloud{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.category-cloud a{display:grid;gap:8px;padding:20px;border:1px solid var(--border,#e5e5ee);border-radius:18px;background:var(--card,#fff);text-decoration:none}.category-cloud span{font-size:.75rem;font-weight:800;color:var(--primary,#6758e8)}.category-cloud small{color:var(--muted)}.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.benefit-grid article,.testimonial-grid blockquote{padding:24px;border:1px solid var(--border,#e5e5ee);border-radius:18px;background:var(--card,#fff)}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.testimonial-grid cite{display:block;margin-top:16px;font-style:normal;font-weight:700}.cta-band{padding:58px 0;background:linear-gradient(135deg,#6758e8,#332a9a);color:#fff}.cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:30px}.button.light{background:#fff;color:#30277f}.filter-row.scrollable{overflow:auto;flex-wrap:nowrap;padding-bottom:8px}.tool-hero-card{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin:25px 0;padding:28px;border:1px solid var(--border,#e5e5ee);border-radius:22px;background:var(--card,#fff)}.tool-hero-card h1{margin:12px 0 8px}.tool-actions{display:flex;gap:10px}.tool-workspace{padding:28px;border:1px solid var(--border,#e5e5ee);border-radius:22px;background:var(--card,#fff);box-shadow:0 16px 45px rgba(31,27,80,.08)}.drop-zone{border:2px dashed var(--border,#d8d8e8);border-radius:18px;padding:28px;text-align:center;display:grid;justify-items:center;gap:8px;margin-bottom:22px}.drop-zone.dragging{border-color:#6758e8;background:rgba(103,88,232,.06)}.tool-input,.tool-output{width:100%;border:1px solid var(--border,#ddd);border-radius:14px;padding:16px;background:var(--background,#fafafe);color:inherit;font:inherit}.field-label{display:block;font-weight:800;margin:16px 0 8px}.tool-controls{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.loading-line{padding:12px;color:#6758e8}.loading-line span{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.qc-toast{position:fixed;right:22px;bottom:22px;background:#1d1b2d;color:#fff;padding:12px 18px;border-radius:12px;opacity:0;transform:translateY(12px);transition:.2s;z-index:9999}.qc-toast.show{opacity:1;transform:none}.search-suggestions mark{background:#fff0a6;color:inherit}.search-suggestions a small{display:block;color:var(--muted);margin-top:4px}.admin-login{min-height:100vh;display:grid;place-items:center;background:#f4f3fb}.admin-login form{width:min(420px,92%);padding:34px;background:#fff;border-radius:20px;box-shadow:0 20px 60px #25205124}.admin-login input,.admin-form input,.admin-search{width:100%;padding:13px;border:1px solid #ddd;border-radius:10px;margin:8px 0 16px}.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:#f7f7fb}.admin-shell aside{background:#1c183d;color:#fff;padding:28px;display:flex;flex-direction:column;gap:14px}.admin-shell aside a,.admin-shell aside button{color:#fff;text-decoration:none;background:none;border:0;text-align:left}.admin-shell>section{padding:34px;overflow:auto}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.admin-stats article{padding:22px;background:#fff;border-radius:14px}.admin-stats strong{font-size:2rem;display:block}.admin-table{overflow:auto;background:#fff;border-radius:14px;margin:16px 0 30px}.admin-table table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:13px;border-bottom:1px solid #eee;text-align:left}.admin-form{max-width:700px;background:#fff;padding:24px;border-radius:14px}.notice{padding:12px;background:#e9fff1;border-radius:10px} @media(max-width:900px){.saas-hero-grid,.value-grid{grid-template-columns:1fr}.category-cloud{grid-template-columns:repeat(2,1fr)}.testimonial-grid{grid-template-columns:1fr}.admin-shell{grid-template-columns:1fr}.admin-shell aside{flex-direction:row;overflow:auto}.admin-stats{grid-template-columns:1fr 1fr}} @media(max-width:560px){.category-cloud,.benefit-grid,.admin-stats{grid-template-columns:1fr}.cta-band .container,.tool-hero-card{align-items:flex-start;flex-direction:column}.saas-hero{padding-top:55px}} /* Get Tools Lab 8.0 final free-edition polish */ :root{--card:var(--surface);--background:var(--bg)} [data-theme="dark"]{--card:var(--surface);--background:var(--bg)} .category-cloud a{min-width:0;overflow:hidden;color:var(--text);box-shadow:0 8px 24px rgba(31,38,75,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .category-cloud a:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--primary) 40%,var(--border));box-shadow:var(--shadow)} .category-cloud a>span{display:block;width:auto;height:auto;background:none;white-space:normal;overflow:visible;color:var(--primary)} .category-cloud a strong{display:block;color:var(--text);font-size:1.05rem;white-space:normal;overflow-wrap:anywhere} .category-cloud a small{display:block;color:var(--muted)} .saas-hero{color:var(--text)}.hero-search-panel{color:var(--text)} .search-suggestions a{display:grid;justify-content:stretch;gap:2px}.search-suggestions a strong{color:var(--text)} .search-suggestions.open{display:block;max-height:430px;overflow:auto;background:var(--surface)} :focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 68%,white);outline-offset:3px} .skip-link{position:fixed;left:12px;top:-80px;background:var(--primary);color:#fff;padding:10px 14px;border-radius:10px;z-index:1000}.skip-link:focus{top:12px} .admin-error{padding:12px;border-radius:10px;background:#ffe8e8;color:#8d1515} .admin-form textarea{width:100%;min-height:130px} @media(max-width:1100px){.category-cloud{grid-template-columns:repeat(4,1fr)}} @media(max-width:800px){.category-cloud{grid-template-columns:repeat(2,1fr)}.nav-wrap{height:68px}} @media(max-width:480px){.category-cloud{grid-template-columns:1fr}.saas-hero h1{font-size:clamp(2.7rem,15vw,4rem)}} .tool-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px}.tool-workspace,.tool-side{background:var(--card,#fff);border:1px solid var(--border,#e3e7ef);border-radius:20px;padding:26px}.custom-workspace-icon{font-size:52px}.breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.section.alt details{border:1px solid var(--border,#e3e7ef);border-radius:12px;padding:14px 16px;margin:10px 0}.section.alt summary{cursor:pointer;font-weight:700}@media(max-width:800px){.tool-layout{grid-template-columns:1fr}} /* Full-functionality forms and status components */ .form-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow);margin:24px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid label{display:grid;gap:8px;font-weight:800}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid textarea,.form-grid select{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:12px;padding:12px}.notice{padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));color:var(--text)}.notice.error{background:#fff1f1;border-color:#efb5b5;color:#8b2020}.contact-form .button{border:0;cursor:pointer}@media(max-width:640px){.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}} /* Engagement and privacy module */ .footer-newsletter{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 0;border-top:1px solid var(--border,#e5e7eb)}.footer-newsletter p{margin:6px 0 0}.newsletter-form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:center;min-width:min(100%,440px)}.newsletter-form .form-status{grid-column:1/-1}.newsletter-form input{min-height:46px;border:1px solid var(--border,#d8dce5);border-radius:12px;padding:0 14px;background:var(--surface,#fff);color:inherit}.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}.tool-feedback-card{display:grid;grid-template-columns:1fr minmax(280px,480px);gap:32px;align-items:start}.tool-feedback-form{display:grid;gap:12px}.tool-feedback-form textarea{min-height:90px;border:1px solid var(--border,#d8dce5);border-radius:14px;padding:12px;background:var(--surface,#fff);color:inherit}.star-rating{display:flex;gap:5px}.star-rating button{border:0;background:transparent;font-size:30px;color:#cbd0dc;cursor:pointer;padding:2px}.star-rating button.active,.star-rating button:hover{color:#f5a524}.form-status{min-height:20px}.cookie-banner{position:fixed;z-index:9999;left:18px;right:18px;bottom:18px;max-width:900px;margin:auto;padding:18px 20px;border:1px solid var(--border,#d8dce5);border-radius:18px;background:var(--surface,#fff);box-shadow:0 18px 60px rgba(20,25,40,.2);display:flex;align-items:center;justify-content:space-between;gap:20px}.cookie-banner[hidden]{display:none}.cookie-banner p{margin:4px 0 0}.cookie-actions{display:flex;gap:10px;flex-shrink:0}@media(max-width:760px){.footer-newsletter,.tool-feedback-card,.cookie-banner{display:grid;grid-template-columns:1fr}.newsletter-form{grid-template-columns:1fr}.cookie-actions{display:grid;grid-template-columns:1fr 1fr}.cookie-banner{left:10px;right:10px;bottom:10px}} /* Platform Edition: announcements */ .site-announcement{border-bottom:1px solid var(--border,#e5e7eb);font-size:.95rem} .announcement-inner{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px;text-align:center} .site-announcement a{font-weight:700;text-decoration:underline} .announcement-info{background:#eef2ff;color:#312e81}.announcement-success{background:#ecfdf5;color:#065f46}.announcement-warning{background:#fff7ed;color:#9a3412} .announcement-close{margin-left:auto;border:0;background:transparent;color:inherit;font-size:1.4rem;cursor:pointer} /* Growth & API Edition */ .account-shell{max-width:760px;padding-top:64px;padding-bottom:80px}.account-card{background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:22px;padding:clamp(24px,5vw,48px);box-shadow:0 16px 50px rgba(15,23,42,.08)}.stack-form{display:grid;gap:18px;margin:24px 0}.stack-form label{display:grid;gap:7px;font-weight:700}.stack-form input{width:100%}.account-dashboard{padding-top:54px;padding-bottom:80px}.account-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:44px}.account-dashboard section{margin-top:40px}.empty-message{padding:24px;border:1px dashed var(--border,#d1d5db);border-radius:14px}.form-error{background:#fef2f2;color:#991b1b;padding:12px 14px;border-radius:10px}.form-success{background:#ecfdf5;color:#065f46;padding:12px 14px;border-radius:10px}.prose pre{overflow:auto;background:#111827;color:#f9fafb;padding:18px;border-radius:12px}.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}@media(max-width:700px){.account-heading{display:block}.account-heading .button-secondary{display:inline-flex;margin-top:16px}} /* Operations & Member Edition */ .account-actions{display:flex;gap:10px;flex-wrap:wrap}.account-split{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:30px;align-items:start}.ticket-panel{margin-top:20px}.ticket-thread{display:grid;gap:14px;margin:22px 0}.ticket-message{max-width:82%;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.ticket-message.from-member{margin-left:auto;background:var(--soft)}.ticket-message header{display:flex;justify-content:space-between;gap:12px;font-size:.88rem}.ticket-message time{opacity:.7}.ticket-message p{margin:8px 0 0;white-space:normal}.ticket-list{display:grid;gap:10px}.ticket-list-item{display:flex;justify-content:space-between;gap:18px;padding:16px;border:1px solid var(--border);border-radius:14px;text-decoration:none}.ticket-list-item span:first-child{display:grid;gap:4px}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.collection-card{padding:18px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.collection-card h3{margin-top:0}.collection-add{display:flex;gap:10px;margin:20px 0}.collection-add select{flex:1}.text-button{border:0;background:none;padding:0;color:var(--primary);cursor:pointer}.text-button.danger{color:#b42318}@media(max-width:800px){.account-split{grid-template-columns:1fr}.ticket-message{max-width:95%}.collection-add{align-items:stretch;flex-direction:column}} /* Commerce & affiliate edition */ .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}.pricing-card{border:1px solid var(--border,#e5e7eb);border-radius:18px;padding:26px;background:var(--card,#fff)}.pricing-card.featured{outline:3px solid #6758e8}.pricing-card h2{font-size:2rem}.pricing-card h2 small{font-size:.9rem;font-weight:500}.pricing-card ul{padding-left:20px;min-height:140px}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:24px 0}.metric-grid article{border:1px solid var(--border,#e5e7eb);padding:20px;border-radius:14px;display:grid;gap:6px}.metric-grid strong{font-size:1.8rem}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border,#e5e7eb)} /* Authority and SEO content hubs */ .page-shell{padding-top:42px;padding-bottom:64px}.page-shell>h1{max-width:900px}.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:28px 0}.content-card{border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:22px;background:var(--card,#fff)}.content-card h2{margin-top:0}.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.link-grid a,.topic-link{display:block;padding:10px 12px;border:1px solid var(--border,#e5e7eb);border-radius:10px;margin:6px 0}.footer-seo-links{display:flex;flex-wrap:wrap;gap:14px;padding:12px 0 30px;font-size:.9rem} /* Answer Engine and Generative Engine content blocks */ .answer-first,.definition-box{padding:20px 22px;border-radius:14px;margin:20px 0}.answer-first{background:#eef2ff;border-left:4px solid #4f46e5}.definition-box{background:#f8fafc;border:1px solid #cbd5e1}.answer-first p:last-child,.definition-box p{font-size:1.08rem;line-height:1.7;margin-bottom:0}.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:20px}.pros-cons>div{padding:18px;border:1px solid #e5e7eb;border-radius:12px}.content-rich section{margin:32px 0}@media(max-width:700px){.pros-cons{grid-template-columns:1fr}} /* Enterprise 2.0 Batch Image Studio */ .batch-studio{max-width:1400px;margin-inline:auto}.batch-layout{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:22px;margin-top:24px}.batch-settings{align-self:start;position:sticky;top:92px;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface,#fff);display:grid;gap:15px}.batch-settings h2{font-size:1.15rem;margin:0}.batch-settings label{display:grid;gap:7px;font-weight:700}.batch-settings input,.batch-settings select{width:100%}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check-row{display:flex!important;align-items:center;gap:9px!important}.check-row input{width:auto}.shortcut-card{display:grid;gap:7px;padding:13px;border-radius:12px;background:var(--surface-soft,#f5f7fb);font-size:.86rem}.shortcut-card span{display:flex;justify-content:space-between;gap:10px}.batch-workspace{min-width:0}.batch-drop{min-height:220px;border:2px dashed var(--border);border-radius:20px;display:grid;place-content:center;text-align:center;gap:7px;padding:30px;cursor:pointer;background:linear-gradient(145deg,var(--surface,#fff),var(--surface-soft,#f7f8fc));transition:.2s transform,.2s border-color,.2s background}.batch-drop:hover,.batch-drop:focus-visible,.batch-drop.is-over{border-color:var(--primary);transform:translateY(-2px);background:color-mix(in srgb,var(--primary) 7%,var(--surface))}.drop-icon{font-size:2.3rem;color:var(--primary)}.batch-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.batch-summary{display:flex;justify-content:space-between;gap:10px;padding:12px 2px;color:var(--muted)}.batch-empty{padding:42px 20px;text-align:center;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--muted)}.batch-empty>div{font-size:2.4rem}.batch-queue{display:grid;gap:12px}.batch-item{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 5px 20px rgba(15,23,42,.04)}.batch-item>img{width:76px;height:64px;object-fit:cover;border-radius:10px;background:#eef1f6}.batch-main{min-width:0;display:grid;gap:5px}.batch-main strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.batch-main small{color:var(--muted)}.batch-progress{height:7px;background:var(--surface-soft,#eef1f6);border-radius:99px;overflow:hidden}.batch-progress span{display:block;height:100%;background:var(--primary);transition:width .2s}.status-done .batch-progress span{background:#16a34a}.status-error .batch-progress span{background:#dc2626}.batch-actions{display:flex;gap:7px;align-items:center}.tiny{padding:7px 10px!important;font-size:.82rem!important}.icon-button{border:1px solid var(--border);background:transparent;border-radius:9px;width:34px;height:34px;font-size:1.2rem;cursor:pointer}.batch-history-panel{margin-top:26px;border:1px solid var(--border);border-radius:18px;padding:20px;background:var(--surface)}.batch-history-panel>div{display:flex;justify-content:space-between;align-items:start;gap:20px}.batch-history-panel h2{margin:0}.batch-history-panel ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}.batch-history-panel li{display:flex;justify-content:space-between;gap:14px;padding:10px;border-radius:10px;background:var(--surface-soft,#f7f8fc)}.batch-history-panel li span{display:grid}.batch-history-panel small,.batch-history-panel time{color:var(--muted);font-size:.8rem}.empty-line{display:block!important;text-align:center;color:var(--muted)} @media(max-width:900px){.batch-layout{grid-template-columns:1fr}.batch-settings{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.batch-settings h2,.shortcut-card{grid-column:1/-1}} @media(max-width:620px){.batch-settings{grid-template-columns:1fr}.batch-item{grid-template-columns:58px minmax(0,1fr)}.batch-item>img{width:58px;height:54px}.batch-actions{grid-column:1/-1;justify-content:flex-end}.batch-toolbar>*{flex:1 1 calc(50% - 10px)}.batch-history-panel li,.batch-history-panel>div{display:grid}.batch-drop{min-height:180px}.field-pair{grid-template-columns:1fr}} /* Document, Media & AI Suite */ .suite-actions,.studio-toolbar{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.25rem 0}.suite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.5rem}.suite-card,.readiness-grid article{border:1px solid var(--border,#dbe3ef);border-radius:18px;padding:1.15rem;background:var(--surface,#fff)}.suite-card ul{list-style:none;padding:0;margin:0}.suite-card li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--border,#eee)}.suite-card small{font-weight:700}.suite-card small.ready{color:#087b5b}.suite-card small.planned{color:#8a5a00}.studio-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.studio-tabs button{border:1px solid var(--border,#ccd6e0);background:transparent;padding:.7rem 1rem;border-radius:999px}.studio-tabs button.active{background:var(--primary,#5b4bdb);color:#fff}.editor-grid,.image-lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.editor-grid textarea{width:100%;min-height:360px}.editor-grid label,.audio-controls label,.option-panel label{display:grid;gap:.4rem}.option-panel,.audio-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1rem 0;padding:1rem;border:1px solid var(--border,#ddd);border-radius:16px}.audio-studio audio,#audioPreview{width:100%;margin:1rem 0}.process-status{padding:1rem;border-radius:14px;background:var(--muted,#f4f6fa);margin:1rem 0}.image-lab-grid canvas{width:100%;max-height:580px;object-fit:contain;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 50%/20px 20px;border-radius:16px}.readiness-grid{display:grid;gap:1rem}.readiness-grid article{display:flex;gap:1rem;align-items:flex-start}.status-dot{width:14px;height:14px;border-radius:50%;margin-top:.45rem;background:#9ca3af}.status-dot.ok{background:#10b981}.status-dot.off{background:#ef4444}@media(max-width:760px){.editor-grid,.image-lab-grid{grid-template-columns:1fr}.editor-grid textarea{min-height:240px}} /* Managed pages CMS */ .managed-page-content{font-size:1.05rem;line-height:1.75}.managed-page-content>h1:first-child{margin-top:.35rem}.managed-page-content h2{margin-top:2rem}.managed-page-content .pricing-grid{margin-top:2rem} /* Tool lifecycle transparency */ .tool-status-badge{margin-left:auto;display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.02em;white-space:nowrap} .tool-status-badge.status-beta{background:#fff3cd;color:#755500;border:1px solid #f2d778} .tool-status-badge.status-coming_soon{background:#e8e7ff;color:#4538a8;border:1px solid #c9c4ff} .tool-lifecycle-notice{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:13px 16px;border-radius:12px;border:1px solid}.tool-lifecycle-notice strong{white-space:nowrap}.tool-lifecycle-beta{background:#fff9df;border-color:#ead889;color:#594800}.tool-lifecycle-coming_soon{background:#f0efff;border-color:#cbc7ff;color:#352c83} @media(max-width:640px){.tool-lifecycle-notice{flex-direction:column;gap:4px}} @media(prefers-color-scheme:dark){.tool-status-badge.status-beta{background:#493d08;color:#ffe991;border-color:#746311}.tool-status-badge.status-coming_soon{background:#29245b;color:#d9d5ff;border-color:#4d4594}.tool-lifecycle-beta{background:#302a0c;color:#fff0ad;border-color:#5e5114}.tool-lifecycle-coming_soon{background:#252147;color:#e5e2ff;border-color:#47407c}} /* Tool lifecycle transparency */ .tool-status-badge{margin-left:auto;display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.02em;white-space:nowrap} .tool-status-badge.status-beta{background:#fff3cd;color:#755500;border:1px solid #f2d778} .tool-status-badge.status-coming_soon{background:#e8e7ff;color:#4538a8;border:1px solid #c9c4ff} .tool-lifecycle-notice{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:13px 16px;border-radius:12px;border:1px solid}.tool-lifecycle-notice strong{white-space:nowrap}.tool-lifecycle-beta{background:#fff9df;border-color:#ead889;color:#594800}.tool-lifecycle-coming_soon{background:#f0efff;border-color:#cbc7ff;color:#352c83} @media(max-width:640px){.tool-lifecycle-notice{flex-direction:column;gap:4px}} @media(prefers-color-scheme:dark){.tool-status-badge.status-beta{background:#493d08;color:#ffe991;border-color:#746311}.tool-status-badge.status-coming_soon{background:#29245b;color:#d9d5ff;border-color:#4d4594}.tool-lifecycle-beta{background:#302a0c;color:#fff0ad;border-color:#5e5114}.tool-lifecycle-coming_soon{background:#252147;color:#e5e2ff;border-color:#47407c}} /* assets/css/enterprise-2.css */ /* Get Tools Lab Enterprise 2.0 foundation */ :root{--qc-surface:#fff;--qc-surface-2:#f7f8fc;--qc-text:#171a2b;--qc-muted:#667085;--qc-border:#e4e7ec;--qc-primary:#6558e8;--qc-primary-2:#4f46c8;--qc-ring:rgba(101,88,232,.28);--qc-shadow:0 18px 55px rgba(30,35,90,.12);--qc-radius:18px} [data-theme="dark"]{--qc-surface:#171927;--qc-surface-2:#11131f;--qc-text:#f5f6ff;--qc-muted:#aeb4ca;--qc-border:#30344a;--qc-shadow:0 18px 55px rgba(0,0,0,.35)} html{scroll-behavior:smooth}body{background:var(--qc-surface-2);color:var(--qc-text)} .site-header{position:sticky;top:0;z-index:1000;background:color-mix(in srgb,var(--qc-surface) 92%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--qc-border)} .nav-wrap{min-height:72px}.brand-mark{box-shadow:0 8px 22px var(--qc-ring)} .enterprise-search{position:relative;flex:1;max-width:430px;margin:0 18px}.enterprise-search input{width:100%;height:44px;border:1px solid var(--qc-border);border-radius:999px;padding:0 92px 0 42px;background:var(--qc-surface);color:var(--qc-text);outline:0}.enterprise-search input:focus{border-color:var(--qc-primary);box-shadow:0 0 0 4px var(--qc-ring)}.enterprise-search .search-icon{position:absolute;left:16px;top:11px;color:var(--qc-muted)}.enterprise-search kbd{position:absolute;right:12px;top:10px;border:1px solid var(--qc-border);border-radius:7px;padding:3px 7px;background:var(--qc-surface-2);font-size:12px}.enterprise-search-results{position:absolute;top:52px;left:0;right:0;background:var(--qc-surface);border:1px solid var(--qc-border);border-radius:15px;box-shadow:var(--qc-shadow);padding:8px;display:none;max-height:420px;overflow:auto}.enterprise-search-results.open{display:block}.enterprise-search-results a{display:flex;gap:12px;padding:11px;border-radius:10px;color:inherit;text-decoration:none}.enterprise-search-results a:hover,.enterprise-search-results a:focus{background:var(--qc-surface-2)} .mega-trigger{position:relative}.mega-menu{position:absolute;left:50%;transform:translateX(-50%);top:58px;width:min(900px,92vw);background:var(--qc-surface);border:1px solid var(--qc-border);border-radius:20px;box-shadow:var(--qc-shadow);padding:20px;display:none;grid-template-columns:repeat(4,1fr);gap:14px}.mega-trigger:hover .mega-menu,.mega-trigger:focus-within .mega-menu,.mega-menu.open{display:grid}.mega-menu a{display:block;padding:11px;border-radius:11px}.mega-menu a:hover{background:var(--qc-surface-2)}.mega-menu strong{display:block;margin-bottom:6px}.mega-menu small{color:var(--qc-muted)} .saas-hero{background:radial-gradient(circle at 12% 20%,rgba(101,88,232,.19),transparent 32%),radial-gradient(circle at 88% 14%,rgba(36,190,190,.16),transparent 30%),var(--qc-surface)}.saas-hero h1{font-size:clamp(2.65rem,6vw,5.35rem);line-height:.98;letter-spacing:-.055em;max-width:880px}.hero-search-panel,.tool-panel,.dashboard-panel,.content-section,.article-card,.tool-card{background:var(--qc-surface);border-color:var(--qc-border);box-shadow:0 8px 30px rgba(40,42,80,.06)} .tool-card,.article-card,.related-card,.category-cloud a{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.tool-card:hover,.article-card:hover,.related-card:hover,.category-cloud a:hover{transform:translateY(-4px);box-shadow:var(--qc-shadow);border-color:color-mix(in srgb,var(--qc-primary) 45%,var(--qc-border))} .tool-container{max-width:1180px}.tool-panel{border-radius:24px;padding:clamp(20px,4vw,42px);overflow:hidden}.tool-panel>h1{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.04em}.tool-panel:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,var(--qc-primary),#28bdb3)}.tool-panel{position:relative} .qc-engine{margin:22px 0;border:1px solid var(--qc-border);border-radius:20px;background:var(--qc-surface);overflow:hidden}.qc-drop-area{padding:34px 22px;text-align:center;border:2px dashed color-mix(in srgb,var(--qc-primary) 40%,var(--qc-border));margin:12px;border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--qc-primary) 5%,var(--qc-surface)),var(--qc-surface));cursor:pointer;transition:.2s}.qc-drop-area.dragover{border-color:var(--qc-primary);background:color-mix(in srgb,var(--qc-primary) 10%,var(--qc-surface));transform:scale(1.005)}.qc-drop-area strong{display:block;font-size:1.15rem;margin:9px}.qc-drop-area small{color:var(--qc-muted)}.qc-engine-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--qc-border)}.qc-engine-toolbar .spacer{flex:1}.qc-file-list{display:grid;gap:10px;padding:12px}.qc-file-row{display:grid;grid-template-columns:52px minmax(0,1fr) 120px auto;gap:12px;align-items:center;border:1px solid var(--qc-border);border-radius:14px;padding:10px;background:var(--qc-surface-2)}.qc-file-thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--qc-surface);display:grid;place-items:center;font-size:21px}.qc-file-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qc-file-meta{font-size:.82rem;color:var(--qc-muted)}.qc-progress{height:7px;border-radius:999px;background:var(--qc-border);overflow:hidden}.qc-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--qc-primary),#22b8a8);width:0;transition:width .25s}.qc-row-actions{display:flex;gap:5px}.qc-icon-btn{border:1px solid var(--qc-border);background:var(--qc-surface);color:var(--qc-text);border-radius:9px;padding:7px 9px;cursor:pointer}.qc-icon-btn:hover{border-color:var(--qc-primary)}.qc-history{margin-top:22px}.qc-history-list{display:grid;gap:8px}.qc-history-item{display:flex;justify-content:space-between;gap:12px;padding:11px;border:1px solid var(--qc-border);border-radius:11px}.qc-shortcuts{font-size:.82rem;color:var(--qc-muted)} .skeleton{position:relative;overflow:hidden;background:var(--qc-border);border-radius:10px;min-height:18px}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:qc-shimmer 1.3s infinite}@keyframes qc-shimmer{to{transform:translateX(100%)}} :focus-visible{outline:3px solid var(--qc-primary);outline-offset:3px}.button,.button-secondary,.button-danger{min-height:44px}.skip-link:focus{z-index:9999} @media(max-width:1000px){.enterprise-search{display:none}.mega-menu{grid-template-columns:repeat(2,1fr)}.main-nav{max-height:calc(100vh - 72px);overflow:auto}.qc-file-row{grid-template-columns:44px minmax(0,1fr) auto}.qc-file-status{grid-column:2/4}} @media(max-width:620px){.mega-menu{grid-template-columns:1fr;position:static;transform:none;width:100%;box-shadow:none}.qc-file-row{grid-template-columns:42px minmax(0,1fr)}.qc-row-actions,.qc-file-status{grid-column:1/-1}.qc-engine-toolbar{align-items:stretch}.qc-engine-toolbar>*{flex:1}.saas-hero h1{font-size:2.65rem}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} .language-switcher{position:relative}.language-button{display:flex;align-items:center;gap:.35rem;width:auto;padding:0 .7rem}.language-menu{position:absolute;right:0;top:calc(100% + .75rem);width:260px;max-height:420px;overflow:auto;background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.18);padding:.5rem;display:none;grid-template-columns:1fr 1fr;z-index:80}.language-menu.open{display:grid}.language-menu a{padding:.65rem .75rem;border-radius:10px;color:inherit;text-decoration:none}.language-menu a:hover,.language-menu a.active{background:var(--surface-2,#f1f5f9)}[dir="rtl"] .language-menu{left:0;right:auto}[dir="rtl"] .main-nav,[dir="rtl"] .footer-grid{text-align:right}@media(max-width:760px){.language-menu{position:fixed;left:1rem!important;right:1rem!important;top:76px;width:auto;grid-template-columns:1fr 1fr;max-height:70vh}} /* Enterprise 2.2 file workspace compatibility fix */ .qc-original-upload-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; } .qc-engine { width: 100%; min-width: 0; box-sizing: border-box; } .qc-file-row { min-width: 0; grid-template-columns: 56px minmax(0,1fr) minmax(110px,160px) auto; } .qc-file-row > div { min-width: 0; } .qc-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .qc-file-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qc-file-thumb img { display:block; width:100%; height:100%; object-fit:cover; } .preview[src=""], .preview:not([src]) { display:none !important; } @media (max-width: 700px) { .qc-file-row { grid-template-columns: 48px minmax(0,1fr) auto; } .qc-file-status { grid-column: 2 / -1; width:100%; } .qc-shortcuts { display:none; } .qc-engine-toolbar { gap:8px; } } /* Phase 11 Professional Tool Engine */ .qc-professional-engine .qc-drop-icon{font-size:2rem}.qc-engine-summary{display:flex;justify-content:space-between;gap:12px;padding:0 16px 10px;color:var(--qc-muted);font-size:.9rem}.qc-file-row.status-ready{border-color:color-mix(in srgb,#16a34a 45%,var(--qc-border))}.qc-file-row.status-error{border-color:color-mix(in srgb,#dc2626 50%,var(--qc-border))}.qc-file-row.status-cancelled{opacity:.72}.qc-file-row.status-ready .qc-progress>span{background:#16a34a}.qc-file-row.status-error .qc-progress>span{background:#dc2626}.qc-engine-dialog{width:min(900px,calc(100vw - 28px));max-height:88vh;padding:0;border:1px solid var(--qc-border);border-radius:18px;background:var(--qc-surface);color:var(--qc-text);box-shadow:0 24px 80px rgba(0,0,0,.3)}.qc-engine-dialog::backdrop{background:rgba(8,15,30,.72);backdrop-filter:blur(3px)}.qc-dialog-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--qc-border)}.qc-dialog-head button{border:0;background:transparent;color:inherit;font-size:1.6rem;cursor:pointer}.qc-preview-body{display:grid;place-items:center;min-height:260px;max-height:70vh;padding:18px;overflow:auto}.qc-preview-body img,.qc-preview-body video{max-width:100%;max-height:64vh;border-radius:12px}.qc-preview-body audio{width:min(620px,100%)}.qc-preview-body iframe{width:100%;height:65vh;border:0;border-radius:10px;background:#fff}.qc-generic-preview{display:grid;gap:8px;text-align:center;padding:28px}.qc-history-body{display:grid;gap:8px;padding:16px;max-height:62vh;overflow:auto}.qc-history-item span{display:grid}.qc-history-item small{color:var(--qc-muted)}.qc-history-item time{font-size:.8rem;color:var(--qc-muted);white-space:nowrap}.qc-dialog-actions{padding:14px 18px;border-top:1px solid var(--qc-border);display:flex;justify-content:flex-end} @media(max-width:720px){.qc-engine-summary{align-items:flex-start;flex-direction:column}.qc-professional-engine .qc-engine-toolbar .spacer,.qc-shortcuts{display:none}.qc-professional-engine .qc-engine-toolbar button{flex:1 1 calc(50% - 8px)}.qc-file-row{grid-template-columns:44px minmax(0,1fr)!important}.qc-file-status,.qc-row-actions{grid-column:1/-1}.qc-row-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.qc-row-actions .qc-icon-btn{width:100%}.qc-history-item{align-items:flex-start;flex-direction:column}.qc-preview-body iframe{height:58vh}} /* assets/css/ui-3.css */ /* Get Tools Lab Enterprise UI/UX 3.0 */ :root{ --ui-bg:#f7f8fc;--ui-surface:#fff;--ui-surface-2:#f1f3f9;--ui-text:#121528;--ui-muted:#68708a; --ui-line:#e2e6f0;--ui-primary:#6957f3;--ui-primary-2:#8b5cf6;--ui-accent:#18b6a4;--ui-danger:#dc3f55; --ui-shadow:0 18px 48px rgba(26,31,60,.10);--ui-shadow-sm:0 8px 24px rgba(26,31,60,.08); --ui-radius:22px;--ui-radius-sm:14px;--ui-max:1220px;--ui-header:76px; } :root[data-theme="dark"]{--ui-bg:#0c1020;--ui-surface:#14192b;--ui-surface-2:#1b2135;--ui-text:#f5f7ff;--ui-muted:#aeb5ca;--ui-line:#293149;--ui-shadow:0 20px 60px rgba(0,0,0,.30);--ui-shadow-sm:0 8px 24px rgba(0,0,0,.24)} *{box-sizing:border-box}.container{width:min(var(--ui-max),calc(100% - 40px));margin-inline:auto}body{background:var(--ui-bg);color:var(--ui-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit}.skip-link{z-index:10000} .site-header{height:var(--ui-header);position:sticky;top:0;z-index:1000;background:color-mix(in srgb,var(--ui-bg) 82%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--ui-line) 76%,transparent)} .nav-wrap{height:100%;display:grid;grid-template-columns:auto minmax(240px,1fr) auto auto auto;gap:18px;align-items:center}.brand{font-weight:850;letter-spacing:-.03em;font-size:1.08rem;text-decoration:none;white-space:nowrap}.brand-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-2));box-shadow:0 8px 22px rgba(105,87,243,.28);color:#fff}.enterprise-search{position:relative;width:min(100%,460px);justify-self:center}.enterprise-search input{width:100%;height:46px;border:1px solid var(--ui-line);border-radius:15px;background:var(--ui-surface);color:var(--ui-text);padding:0 44px 0 42px;box-shadow:0 1px 0 rgba(255,255,255,.2);transition:.2s}.enterprise-search input:focus{outline:none;border-color:var(--ui-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary) 18%,transparent)}.enterprise-search .search-icon{position:absolute;left:15px;top:11px;color:var(--ui-muted)}.enterprise-search kbd{position:absolute;right:12px;top:10px;border:1px solid var(--ui-line);background:var(--ui-surface-2);border-radius:8px;padding:2px 8px;color:var(--ui-muted)} .main-nav{display:flex;align-items:center;gap:6px}.main-nav>a,.mega-trigger>a{padding:10px 12px;border-radius:11px;text-decoration:none;font-weight:700;color:var(--ui-muted)}.main-nav>a:hover,.mega-trigger>a:hover{background:var(--ui-surface-2);color:var(--ui-text)}.mega-menu{top:58px;left:50%;transform:translateX(-50%) translateY(8px);width:min(820px,calc(100vw - 40px));border:1px solid var(--ui-line);border-radius:22px;background:var(--ui-surface);box-shadow:var(--ui-shadow);padding:22px;grid-template-columns:repeat(4,1fr);gap:16px}.mega-trigger:hover .mega-menu,.mega-trigger:focus-within .mega-menu{transform:translateX(-50%) translateY(0)}.mega-menu>div{padding:8px}.mega-menu strong{display:block;margin-bottom:10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ui-primary)}.mega-menu a{display:block;padding:9px 10px;border-radius:10px;text-decoration:none}.mega-menu a:hover{background:var(--ui-surface-2)}.mega-menu small{display:block;color:var(--ui-muted);font-weight:400}.icon-button,.language-button{border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-text);border-radius:13px;min-width:42px;height:42px;display:inline-grid;place-items:center}.language-menu{border:1px solid var(--ui-line);background:var(--ui-surface);box-shadow:var(--ui-shadow);border-radius:16px;padding:8px;max-height:420px;overflow:auto}.language-menu a{border-radius:9px}.language-menu a:hover,.language-menu a.active{background:var(--ui-surface-2);color:var(--ui-primary)} .saas-hero{position:relative;padding:84px 0 68px;overflow:hidden;background:radial-gradient(circle at 14% 10%,rgba(105,87,243,.16),transparent 34%),radial-gradient(circle at 86% 18%,rgba(24,182,164,.12),transparent 32%)}.saas-hero:after{content:"";position:absolute;inset:auto -10% -180px 40%;height:330px;background:linear-gradient(90deg,rgba(105,87,243,.10),rgba(24,182,164,.08));filter:blur(60px);border-radius:50%}.saas-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:64px;align-items:center}.saas-hero h1{font-size:clamp(3rem,6vw,5.65rem);line-height:.96;letter-spacing:-.065em;max-width:780px;margin:20px 0 24px}.saas-hero p{font-size:clamp(1.08rem,1.8vw,1.28rem);color:var(--ui-muted);max-width:700px}.badge,.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:850;text-transform:uppercase;letter-spacing:.10em;color:var(--ui-primary)}.badge{padding:8px 12px;border:1px solid color-mix(in srgb,var(--ui-primary) 28%,var(--ui-line));background:color-mix(in srgb,var(--ui-primary) 8%,var(--ui-surface));border-radius:999px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.button,.button-secondary,.button.ghost,.button.secondary{border-radius:14px;min-height:48px;padding:12px 20px;font-weight:800;transition:transform .2s,box-shadow .2s,background .2s;text-decoration:none;display:inline-flex;justify-content:center;align-items:center}.button{background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-2));color:#fff;border:0;box-shadow:0 10px 26px rgba(105,87,243,.25)}.button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(105,87,243,.32)}.button.ghost,.button-secondary,.button.secondary{background:var(--ui-surface);border:1px solid var(--ui-line);color:var(--ui-text);box-shadow:none}.trust-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;color:var(--ui-muted);font-size:.88rem}.hero-search-panel{position:relative;padding:28px;border:1px solid color-mix(in srgb,var(--ui-primary) 20%,var(--ui-line));background:color-mix(in srgb,var(--ui-surface) 92%,transparent);box-shadow:var(--ui-shadow);border-radius:28px;backdrop-filter:blur(14px)}.hero-search-panel:before{content:"";position:absolute;inset:-1px;border-radius:28px;padding:1px;background:linear-gradient(135deg,rgba(105,87,243,.65),rgba(24,182,164,.2),transparent);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}.hero-search-panel h2{font-size:1.8rem;letter-spacing:-.035em;margin:8px 0 18px}.search-box.large{height:58px;border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:16px;padding:0 16px;display:flex;align-items:center;gap:12px}.search-box.large input{flex:1;border:0;background:transparent;color:var(--ui-text);font-size:1rem;outline:none}.hero-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:.85rem}.hero-shortcuts a{padding:6px 10px;border-radius:999px;background:var(--ui-surface-2);text-decoration:none}.logo-strip{border-block:1px solid var(--ui-line);background:var(--ui-surface)}.logo-strip .container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(18px,4vw,48px);padding-block:22px;color:var(--ui-muted)}.logo-strip b{color:var(--ui-text)} .section{padding:82px 0}.section.alt{background:var(--ui-surface-2)}.section-head,.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}.section h2{font-size:clamp(2rem,4vw,3.35rem);letter-spacing:-.045em;line-height:1.05;margin:7px 0}.open-link{color:var(--ui-primary);font-weight:800;text-decoration:none}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tool-card{position:relative;min-height:235px;padding:24px;border:1px solid var(--ui-line);border-radius:20px;background:var(--ui-surface);box-shadow:0 1px 0 rgba(255,255,255,.2);transition:transform .22s,border-color .22s,box-shadow .22s;text-decoration:none;overflow:hidden}.tool-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--ui-primary) 7%,transparent),transparent 42%);opacity:0;transition:.22s}.tool-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ui-primary) 42%,var(--ui-line));box-shadow:var(--ui-shadow-sm)}.tool-card:hover:before{opacity:1}.tool-card>*{position:relative}.tool-card h3{font-size:1.14rem;letter-spacing:-.02em;margin:18px 0 8px}.tool-card p{color:var(--ui-muted)}.favorite-button{right:17px;top:17px;width:38px;height:38px;border-radius:11px;background:var(--ui-surface-2);border:1px solid var(--ui-line)}.category-cloud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.category-cloud a{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center;padding:20px;border:1px solid var(--ui-line);border-radius:18px;background:var(--ui-surface);text-decoration:none;transition:.2s}.category-cloud a:hover{transform:translateY(-3px);box-shadow:var(--ui-shadow-sm)}.category-cloud a>span{grid-row:1/3;width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--ui-primary) 12%,var(--ui-surface));color:var(--ui-primary);font-weight:900}.category-cloud small{color:var(--ui-muted)} .dashboard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.dashboard-panel{padding:24px;border:1px solid var(--ui-line);border-radius:22px;background:var(--ui-surface);box-shadow:var(--ui-shadow-sm)}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.mini-tool{border:1px solid var(--ui-line);background:var(--ui-surface-2);border-radius:14px;padding:13px 15px}.empty-state,.empty-message{border:1px dashed var(--ui-line);border-radius:16px;padding:28px;text-align:center;color:var(--ui-muted);background:var(--ui-surface-2)}.stats-strip{padding:36px 0;background:linear-gradient(135deg,var(--ui-primary),#4f46d8);color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stats-grid div{text-align:center}.stats-grid strong{display:block;font-size:2.35rem;line-height:1}.stats-grid span{opacity:.78}.value-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.benefit-grid article{padding:24px;border:1px solid var(--ui-line);border-radius:18px;background:var(--ui-surface)}.benefit-grid b{color:var(--ui-primary)}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.testimonial-grid blockquote{margin:0;padding:28px;border:1px solid var(--ui-line);border-radius:20px;background:var(--ui-surface);font-size:1.05rem}.testimonial-grid cite{display:block;margin-top:18px;color:var(--ui-muted);font-size:.85rem}.filter-row{display:flex;gap:8px;overflow:auto;padding-bottom:8px}.filter{border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-muted);border-radius:999px;padding:9px 15px;font-weight:750;white-space:nowrap}.filter.active,.filter:hover{background:var(--ui-primary);color:#fff;border-color:var(--ui-primary)}.inline-search{border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:14px;padding:0 15px}.inline-search input{height:44px;border:0;background:transparent;color:var(--ui-text);outline:none}.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.article-card{padding:24px;border:1px solid var(--ui-line);border-radius:20px;background:var(--ui-surface)}.cta-band{padding:54px 0;background:linear-gradient(120deg,#151834,#29225c);color:#fff}.cta-band .container{display:flex;justify-content:space-between;align-items:center;gap:26px}.cta-band h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em;margin:8px 0}.button.light{background:#fff;color:#17192e} /* Tool workspaces */ main.container,.tool-page,.tool-container,.account-dashboard{padding-top:38px;padding-bottom:72px}.tool-shell,.tool-workspace,.converter-container,.tool-content,.tool-panel,main>section{scroll-margin-top:100px}.tool-shell,.tool-workspace,.converter-container,.tool-panel{border-radius:24px!important;border-color:var(--ui-line)!important;background:var(--ui-surface)!important;box-shadow:var(--ui-shadow-sm)}.drop-zone,.upload-zone,[data-drop-zone],.file-drop-area{border-radius:20px!important;border:1.5px dashed color-mix(in srgb,var(--ui-primary) 55%,var(--ui-line))!important;background:linear-gradient(135deg,color-mix(in srgb,var(--ui-primary) 7%,var(--ui-surface)),var(--ui-surface))!important;min-height:210px;transition:.2s}.drop-zone:hover,.upload-zone:hover,[data-drop-zone]:hover,.file-drop-area:hover{border-color:var(--ui-primary)!important;transform:translateY(-2px)}input,select,textarea{border-color:var(--ui-line)!important;background:var(--ui-surface)!important;color:var(--ui-text)!important;border-radius:13px!important}input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--ui-primary)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary) 16%,transparent)!important}.tool-actions button,.tool-actions .button,button.primary{border-radius:13px!important}.result-box,.output-box,.preview-panel{border-radius:18px!important;border:1px solid var(--ui-line)!important;background:var(--ui-surface-2)!important}.pro-file-workspace{border-radius:22px!important;background:var(--ui-surface)!important;border-color:var(--ui-line)!important}.pro-file-item{border-radius:15px!important;background:var(--ui-surface-2)!important}.form-status.is-error{color:var(--ui-danger)} /* Account/dashboard */ .account-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:30px;border:1px solid var(--ui-line);border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--ui-primary) 10%,var(--ui-surface)),var(--ui-surface));margin-bottom:24px}.account-heading h1{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.05em;margin:5px 0}.account-actions{display:flex;flex-wrap:wrap;gap:9px}.account-dashboard section{padding:26px;border:1px solid var(--ui-line);border-radius:22px;background:var(--ui-surface);margin-top:20px}.account-dashboard .tool-grid{grid-template-columns:repeat(3,1fr)} /* Footer and mobile app nav */ .site-footer{background:#101326;color:#d7dbeb;padding-top:64px}.footer-grid{grid-template-columns:1.4fr repeat(2,1fr);gap:48px}.site-footer a{color:#b9c0d5}.site-footer a:hover{color:#fff}.footer-newsletter{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:20px;padding:24px;margin-top:40px}.footer-bottom,.footer-seo-links{border-color:rgba(255,255,255,.1)}.mobile-app-nav{display:none;position:fixed;z-index:950;left:12px;right:12px;bottom:12px;height:64px;border:1px solid var(--ui-line);background:color-mix(in srgb,var(--ui-surface) 92%,transparent);backdrop-filter:blur(18px);border-radius:20px;box-shadow:var(--ui-shadow);padding:7px}.mobile-app-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--ui-muted);font-size:.66rem;font-weight:750}.mobile-app-nav b{font-size:1.1rem;color:var(--ui-text)} /* Skeletons and entrance motion */ .ui3-js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}.ui3-js [data-reveal].is-visible{opacity:1;transform:none}.ui3-no-reveal [data-reveal]{opacity:1!important;transform:none!important}.skeleton{position:relative;overflow:hidden;background:var(--ui-surface-2);color:transparent!important}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:qc-shimmer 1.3s infinite}@keyframes qc-shimmer{to{transform:translateX(100%)}} :focus-visible{outline:3px solid color-mix(in srgb,var(--ui-primary) 65%,#fff);outline-offset:3px} @media(max-width:1050px){.nav-wrap{grid-template-columns:auto 1fr auto auto}.main-nav{position:fixed;top:calc(var(--ui-header) + 10px);left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;padding:16px;border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:20px;box-shadow:var(--ui-shadow)}.main-nav.open{display:flex}.nav-toggle{display:inline-grid}.enterprise-search{justify-self:stretch}.mega-menu{position:static!important;display:none!important;transform:none!important;width:100%;box-shadow:none;margin-top:8px;grid-template-columns:repeat(2,1fr)}.mega-trigger:hover .mega-menu,.mega-trigger:focus-within .mega-menu{display:grid!important}.saas-hero-grid{grid-template-columns:1fr;gap:36px}.tool-grid{grid-template-columns:repeat(2,1fr)}.category-cloud{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){:root{--ui-header:68px}.container{width:min(100% - 28px,var(--ui-max))}.site-header{height:var(--ui-header)}.nav-wrap{grid-template-columns:auto 1fr auto;gap:10px}.brand span:last-child{display:none}.enterprise-search{grid-column:2}.enterprise-search input{height:42px;font-size:.88rem}.enterprise-search kbd,.language-switcher{display:none}.saas-hero{padding:56px 0 44px}.saas-hero h1{font-size:clamp(2.55rem,13vw,4rem)}.hero-search-panel{padding:20px;border-radius:22px}.section{padding:56px 0}.section-head,.section-heading,.cta-band .container,.account-heading{align-items:flex-start;flex-direction:column}.tool-grid,.article-grid,.testimonial-grid,.dashboard-grid,.value-grid,.benefit-grid,.stats-grid,.account-dashboard .tool-grid{grid-template-columns:1fr}.category-cloud{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr);row-gap:24px}.tool-card{min-height:0}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.mobile-app-nav{display:flex}.site-footer{padding-bottom:96px}.hero-actions .button{flex:1}.tools-head{align-items:stretch}.inline-search{width:100%}.inline-search input{width:calc(100% - 28px)}body{padding-bottom:76px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}} /* PDF Professional Suite */ .pdf-suite-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.form-stack{display:grid;gap:14px;margin:18px 0}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.feature-grid>div{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)} /* assets/css/ui-polish.css */ /* Get Tools Lab public UI/UX polish and defensive layout layer. */ :root{--qc-radius-sm:10px;--qc-radius-md:14px;--qc-radius-lg:20px;--qc-focus:0 0 0 3px rgba(103,88,232,.26)} html{scroll-behavior:smooth;text-size-adjust:100%}body{overflow-x:hidden}img,svg,video,canvas,iframe{max-width:100%}img,video{height:auto}button,input,select,textarea{font:inherit}button,a,input,select,textarea{min-width:0}a,button{-webkit-tap-highlight-color:transparent} .container{width:min(1180px,calc(100% - 32px));margin-inline:auto}.site-header{isolation:isolate}.nav-wrap{min-height:72px;gap:16px}.brand{flex:0 0 auto}.main-nav{min-width:0}.enterprise-search{min-width:180px;max-width:470px}.enterprise-search input{min-width:0} main,.site-main,#main-content{min-width:0}.section,.tool-section,.guide-section{overflow:clip}.page-header,.hero,.tool-hero{overflow-wrap:anywhere}.page-header h1,.hero h1,.tool-hero h1{line-height:1.08;text-wrap:balance}.page-header p,.hero p,.tool-hero p{max-width:72ch} .card,.tool-card,.guide-card,.category-card,.feature-card,.pricing-card{min-width:0;overflow:hidden}.tool-grid,.guide-grid,.category-grid,.feature-grid,.pricing-grid{align-items:stretch}.tool-card,.guide-card,.category-card{height:100%}.tool-card h2,.tool-card h3,.guide-card h2,.guide-card h3{overflow-wrap:anywhere;text-wrap:balance} form{min-width:0}input,textarea,select{max-width:100%}textarea{resize:vertical}.button,.btn,button[type="submit"]{min-height:42px}.button:focus-visible,.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--qc-focus)} .table-wrap,.responsive-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{max-width:100%}pre{max-width:100%;overflow:auto}code{overflow-wrap:anywhere} .breadcrumbs{overflow-x:auto;white-space:nowrap;scrollbar-width:none}.breadcrumbs::-webkit-scrollbar{display:none}.badge,.pill,.chip{max-width:100%;overflow:hidden;text-overflow:ellipsis} .site-footer{overflow:hidden}.footer-grid>*{min-width:0}.footer-grid a{overflow-wrap:anywhere} .notice,.alert,.message{overflow-wrap:anywhere}.modal,.dialog{max-width:calc(100vw - 24px)} [hidden]{display:none!important} @media(max-width:900px){.nav-wrap{flex-wrap:wrap}.enterprise-search{order:3;flex:1 0 100%;max-width:none}.mega-menu{max-width:calc(100vw - 32px)}.tool-grid,.guide-grid,.category-grid,.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.container{width:min(100% - 24px,1180px)}.tool-grid,.guide-grid,.category-grid,.feature-grid,.pricing-grid{grid-template-columns:1fr}.hero,.page-header,.tool-hero{padding-inline:0}.button-row,.hero-actions,.page-actions{align-items:stretch}.button-row>*,.hero-actions>*,.page-actions>*{flex:1 1 100%}.site-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* Category cards: full names with scalable icons. */ .category-cloud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .category-cloud .category-tile{display:grid;grid-template-columns:48px minmax(0,1fr) 22px;align-items:center;gap:14px;min-width:0;min-height:96px;padding:18px 20px;border:1px solid var(--border,rgba(148,163,184,.22));border-radius:16px;background:var(--card,rgba(15,23,42,.52));color:inherit;text-decoration:none;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .category-cloud .category-tile:hover{transform:translateY(-2px);border-color:var(--primary,#7657ff);box-shadow:0 14px 30px rgba(0,0,0,.12)} .category-cloud .category-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--primary,#7657ff) 18%,transparent);color:var(--primary,#7657ff);overflow:hidden} .category-cloud .category-svg{width:25px;height:25px;display:block;flex:none} .category-cloud .category-copy{display:block;min-width:0} .category-cloud .category-copy strong{display:block;min-width:0;font-size:17px;line-height:1.25;white-space:normal;overflow-wrap:anywhere} .category-cloud .category-copy small{display:block;margin-top:5px;color:var(--muted,#94a3b8);font-size:13px;line-height:1.25} .category-cloud .category-arrow{display:block;justify-self:end;font-size:22px;line-height:1;transition:transform .18s ease} .category-cloud .category-tile:hover .category-arrow{transform:translateX(3px)} @media(max-width:1050px){.category-cloud{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:780px){.category-cloud{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.category-cloud{grid-template-columns:1fr}.category-cloud .category-tile{min-height:86px;padding:15px 16px}} /* 2026-07 card-system correction: keep labels readable and replace code badges with icons. */ .category-cloud{ display:grid!important; grid-template-columns:repeat(4,minmax(230px,1fr))!important; gap:16px!important; align-items:stretch!important; } .category-cloud .category-tile{ grid-template-columns:52px minmax(0,1fr) 38px!important; gap:14px!important; min-height:102px!important; padding:18px 18px!important; } .category-cloud .category-tile>span{ grid-row:auto!important; width:auto!important; height:auto!important; min-width:0!important; border-radius:0!important; background:transparent!important; } .category-cloud .category-icon{ width:52px!important; height:52px!important; min-width:52px!important; display:grid!important; place-items:center!important; border-radius:15px!important; background:color-mix(in srgb,var(--primary,#7657ff) 16%,var(--surface-2,#1d2638))!important; color:var(--primary,#7657ff)!important; } .category-cloud .category-icon .category-svg, .tool-icon-svg .category-svg{ width:25px!important; height:25px!important; display:block!important; } .category-cloud .category-copy{ display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; min-width:0!important; padding:0!important; } .category-cloud .category-copy strong{ width:100%!important; font-size:16px!important; line-height:1.22!important; white-space:normal!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; } .category-cloud .category-copy small{ width:100%!important; margin-top:5px!important; white-space:nowrap!important; } .category-cloud .category-arrow{ width:38px!important; height:38px!important; display:grid!important; place-items:center!important; justify-self:end!important; border-radius:12px!important; background:color-mix(in srgb,var(--primary,#7657ff) 12%,transparent)!important; color:var(--primary,#7657ff)!important; } .tool-card-top{ display:grid!important; grid-template-columns:54px minmax(0,1fr)!important; gap:14px!important; align-items:center!important; } .tool-icon.tool-icon-svg{ width:54px!important; height:54px!important; min-width:54px!important; display:grid!important; place-items:center!important; border-radius:15px!important; overflow:hidden!important; font-size:0!important; } .tool-category{ justify-self:end!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; max-width:100%!important; min-height:30px!important; padding:6px 11px!important; border-radius:999px!important; font-size:12px!important; line-height:1.1!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; } .tool-card h3{ overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; } .tool-card p{ overflow-wrap:break-word!important; } @media(max-width:1100px){ .category-cloud{grid-template-columns:repeat(3,minmax(220px,1fr))!important} } @media(max-width:820px){ .category-cloud{grid-template-columns:repeat(2,minmax(210px,1fr))!important} } @media(max-width:560px){ .category-cloud{grid-template-columns:1fr!important} .category-cloud .category-tile{min-height:90px!important;padding:15px!important} .tool-card-top{grid-template-columns:50px minmax(0,1fr)!important} .tool-icon.tool-icon-svg{width:50px!important;height:50px!important;min-width:50px!important} .tool-category{font-size:11px!important;padding:6px 9px!important} } /* 2026-07 Tool category filter pill alignment fix */ #all-tools .filter-row.scrollable{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:10px!important; width:100%!important; margin:0 0 28px!important; padding:2px 0 6px!important; overflow:visible!important; scrollbar-width:none; } #all-tools .filter-row.scrollable::-webkit-scrollbar{display:none} #all-tools .filter-row .filter{ appearance:none!important; -webkit-appearance:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; min-height:42px!important; height:42px!important; margin:0!important; padding:0 16px!important; border:1px solid var(--ui-line,var(--border,#293348))!important; border-radius:999px!important; background:var(--ui-surface,var(--surface,#141b2b))!important; color:var(--ui-muted,var(--muted,#aeb6c8))!important; font-size:14px!important; font-weight:750!important; line-height:1!important; letter-spacing:0!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; word-break:normal!important; cursor:pointer!important; transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important; } #all-tools .filter-row .filter:hover{ color:var(--ui-text,var(--text,#f6f7fb))!important; border-color:color-mix(in srgb,var(--ui-primary,var(--primary,#6758e8)) 62%,var(--ui-line,var(--border,#293348)))!important; background:color-mix(in srgb,var(--ui-primary,var(--primary,#6758e8)) 10%,var(--ui-surface,var(--surface,#141b2b)))!important; transform:translateY(-1px)!important; } #all-tools .filter-row .filter.active, #all-tools .filter-row .filter[aria-pressed="true"]{ color:#fff!important; border-color:var(--ui-primary,var(--primary,#6758e8))!important; background:var(--ui-primary,var(--primary,#6758e8))!important; box-shadow:0 8px 22px color-mix(in srgb,var(--ui-primary,var(--primary,#6758e8)) 28%,transparent)!important; } #all-tools .filter-row .filter:focus-visible{ outline:3px solid color-mix(in srgb,var(--ui-primary,var(--primary,#6758e8)) 35%,transparent)!important; outline-offset:3px!important; } @media(max-width:720px){ #all-tools .filter-row.scrollable{ flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-inline:contain!important; scroll-snap-type:x proximity!important; margin-inline:-18px!important; width:calc(100% + 36px)!important; padding:2px 18px 10px!important; } #all-tools .filter-row .filter{ min-height:40px!important; height:40px!important; padding-inline:15px!important; scroll-snap-align:start!important; } } /* Monetization placements */ .qc-ad-placement{width:min(1180px,calc(100% - 32px));margin:20px auto;min-height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden;clear:both} .qc-ad-placement .adsbygoogle{width:100%;min-height:90px} .qc-ad-placeholder{border:1px dashed color-mix(in srgb,var(--border,#33415c) 82%,transparent);border-radius:14px;background:color-mix(in srgb,var(--surface,#121a2c) 92%,transparent);color:var(--muted,#9aa7bd);flex-direction:column;gap:4px;text-align:center;padding:18px} .qc-ad-placeholder span{font-weight:700;color:var(--text,#eef2ff)} .qc-ad-placeholder small{font-size:.78rem} .monetization-top{margin-top:14px;margin-bottom:22px} .monetization-content{margin-top:28px;margin-bottom:28px} .monetization-footer{margin-top:0;margin-bottom:24px} .monetization-mobile-sticky{display:none} @media(max-width:767px){ .qc-ad-placement{width:calc(100% - 20px);margin:14px auto;min-height:64px} .monetization-mobile-sticky{display:flex;position:fixed;left:50%;bottom:calc(68px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:42;width:min(100% - 16px,480px);min-height:50px;margin:0;background:var(--surface,#121a2c);border:1px solid var(--border,#33415c);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.35)} body:has(.monetization-mobile-sticky) .mobile-app-nav{z-index:43} } @media print{.qc-ad-placement{display:none!important}} /* Compact, aligned language control in the public header */ .site-header .language-switcher{ position:relative; display:flex; align-items:center; align-self:center; height:42px; } .site-header .language-button{ appearance:none; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; width:auto!important; min-width:72px!important; height:42px!important; padding:0 11px!important; margin:0!important; line-height:1!important; white-space:nowrap!important; vertical-align:middle!important; border-radius:13px!important; cursor:pointer; } .site-header .language-button .language-icon{ width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--ui-primary,var(--primary,#6758e8)); } .site-header .language-button .language-code{ display:inline-block!important; margin:0!important; padding:0!important; font-size:12px!important; font-weight:850!important; line-height:1!important; letter-spacing:.05em; color:var(--ui-text,var(--text,#f6f7fb)); } .site-header .language-button .language-chevron{ width:12px; height:12px; flex:0 0 12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--ui-muted,var(--muted,#aeb6c8)); transition:transform .18s ease; } .site-header .language-button[aria-expanded="true"] .language-chevron{transform:rotate(180deg)} .site-header .language-button:hover, .site-header .language-button:focus-visible{ background:var(--ui-surface-2,var(--surface-2,#1d2638))!important; border-color:color-mix(in srgb,var(--ui-primary,var(--primary,#6758e8)) 55%,var(--ui-line,var(--border,#293348)))!important; } .site-header .language-button:focus-visible{ outline:3px solid color-mix(in srgb,var(--ui-primary,var(--primary,#6758e8)) 24%,transparent); outline-offset:2px; } @media(max-width:1100px) and (min-width:721px){ .site-header .language-button{min-width:44px!important;width:44px!important;padding:0!important;gap:0!important} .site-header .language-code,.site-header .language-chevron{display:none!important} } /* ========================================================== Get Tools Lab V9 — responsive text + card overflow hardening Keeps long labels inside cards/buttons across the site. ========================================================== */ /* Universal flex/grid child protection. */ :is(.gtl-category-card,.tool-card,.guide-card,.category-card,.feature-card,.pricing-card, .btn,.button,button,a[class*="btn"],a[class*="button"], .filter-pill,.category-pill,.tool-category,.guide-category) > *{ min-width:0; } /* Buttons/chips: never allow labels to paint outside their control. */ :is(.btn,.button,button,a[class*="btn"],a[class*="button"], .filter-pill,.category-pill,.tool-category,.guide-category){ max-width:100%; box-sizing:border-box; } :is(.btn,.button,a[class*="btn"],a[class*="button"]){ white-space:normal; overflow-wrap:break-word; word-break:normal; text-align:center; } /* Homepage category cards: reserve enough text room and adapt typography. */ .gtl-category-grid{ grid-template-columns:repeat(8,minmax(0,1fr)); } .gtl-category-card{ grid-template-columns:40px minmax(0,1fr) 16px !important; gap:9px !important; padding:12px 11px !important; min-width:0; overflow:hidden; } .gtl-category-icon{ width:40px !important; height:40px !important; min-width:40px; border-radius:11px !important; } .gtl-category-icon svg{ width:22px !important; height:22px !important; } .gtl-category-copy{ min-width:0 !important; overflow:hidden; } .gtl-category-copy strong{ display:block; width:100%; font-size:clamp(.72rem,.72vw,.9rem) !important; line-height:1.15 !important; white-space:normal !important; overflow-wrap:anywhere; word-break:normal; hyphens:none; } .gtl-category-copy small{ display:block; margin-top:4px; font-size:clamp(.62rem,.58vw,.72rem) !important; line-height:1.2; white-space:normal !important; overflow-wrap:break-word; } .gtl-category-arrow{ justify-self:end; width:16px; min-width:16px; overflow:hidden; } /* Keep compact 8-column look only when the viewport has enough room. Below that, reduce columns rather than crushing labels. */ @media (max-width:1260px){ .gtl-category-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important} .gtl-category-copy strong{font-size:.88rem !important} } @media (max-width:760px){ .gtl-category-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } @media (max-width:440px){ .gtl-category-grid{grid-template-columns:1fr !important} } /* Internal tool/guide/category cards. */ body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card,.gtl-category-card){ min-width:0 !important; overflow:hidden !important; } body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card) :is(h2,h3,h4,strong,.card-title,.tool-title,.guide-title){ max-width:100%; overflow-wrap:anywhere; word-break:normal; hyphens:none; } body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card) p{ overflow-wrap:break-word; } /* Tool/category badges remain readable without escaping a card. */ .tool-category,.guide-category{ max-width:min(100%,12rem) !important; white-space:normal !important; overflow-wrap:anywhere; text-align:center; } /* Search/filter pills: long topic names fit instead of clipping. */ :is(.guide-filters,.filter-row,.category-filters) :is(button,a,.filter-pill,.category-pill){ width:auto !important; min-width:max-content; max-width:100%; white-space:normal !important; line-height:1.15 !important; overflow-wrap:anywhere; } /* General card-grid responsiveness: do not keep four columns once card text would be forced into unusably narrow boxes. */ @media (max-width:1180px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:860px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:560px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:1fr !important; } } /* Forms and table content: prevent long strings/URLs from widening layouts. */ :is(.card,.panel,.content-card,.form-card,.table-wrap,td,th,label,.help-text){ min-width:0; overflow-wrap:anywhere; } /* Navigation CTAs: preserve layout on narrower desktops. */ .site-header :is(.btn,.nav-cta,.header-cta){ flex-shrink:0; } /* ========================================================== Get Tools Lab V10 — responsive buttons / no word splitting Long labels expand horizontally instead of breaking words. ========================================================== */ /* Primary buttons and CTA controls should grow with their labels. */ :is(.btn,.button,button,a[class*="btn"],a[class*="button"], .nav-cta,.header-cta,.gtl-cta,.gtl-btn){ width:auto !important; min-width:max-content; max-width:100%; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; flex-shrink:0; padding-left:clamp(13px,1.2vw,20px) !important; padding-right:clamp(13px,1.2vw,20px) !important; } /* Pills/tabs should also expand instead of splitting labels. */ :is(.filter-pill,.category-pill,.tool-category,.guide-category, .guide-filters button,.filter-row button,.category-filters button, .guide-filters a,.filter-row a,.category-filters a){ width:auto !important; min-width:max-content !important; max-width:none !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; flex:0 0 auto !important; } /* When there are many pills, scroll horizontally rather than breaking words. */ :is(.guide-filters,.filter-row.scrollable,.category-filters){ overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:thin; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; padding-bottom:6px; } /* Homepage category cards: give long labels more horizontal room. Use fluid columns instead of forcing eight cramped cards into one row. */ .gtl-category-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)) !important; gap:12px !important; } .gtl-category-card{ grid-template-columns:40px minmax(max-content,1fr) 16px !important; min-width:176px !important; padding:12px 13px !important; overflow:visible !important; } .gtl-category-copy{ overflow:visible !important; } .gtl-category-copy strong{ width:auto !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; font-size:clamp(.78rem,.78vw,.9rem) !important; } .gtl-category-copy small{ white-space:nowrap !important; overflow-wrap:normal !important; } /* Internal tool/category tiles should not break a single category name. */ .category-cloud .category-copy strong, .category-cloud a strong{ white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; } /* On narrower layouts, keep buttons usable without splitting words. Wide CTAs may become full-width but the label stays intact. */ @media (max-width:560px){ :is(.btn,.button,a[class*="btn"],a[class*="button"],.gtl-cta,.gtl-btn){ max-width:100% !important; justify-content:center; } .gtl-category-grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important; } .gtl-category-card{ min-width:160px !important; } } /* Very narrow screens get one card per row instead of broken labels. */ @media (max-width:360px){ .gtl-category-grid{ grid-template-columns:1fr !important; } } /* ========================================================== Get Tools Lab V11 — complete public light theme Explicit overrides for the newer neon/reference UI layers. ========================================================== */ :root[data-theme="light"]{ color-scheme:light; --bg:#f5f8ff;--surface:#ffffff;--surface-2:#edf3ff;--text:#10172a;--muted:#5f6d89; --border:#d8e2f3;--shadow:0 18px 48px rgba(36,61,110,.10); --ui-bg:#f5f8ff;--ui-surface:#ffffff;--ui-surface-2:#edf3ff;--ui-text:#10172a; --ui-muted:#5f6d89;--ui-line:#d8e2f3;--ui-shadow:0 18px 48px rgba(36,61,110,.10); --ui-shadow-sm:0 8px 24px rgba(36,61,110,.08); } :root[data-theme="light"] body{ background:#f5f8ff !important;color:#10172a !important; } :root[data-theme="light"] .site-header{ background:rgba(255,255,255,.92) !important; border-bottom-color:#dbe5f4 !important; box-shadow:0 8px 28px rgba(35,55,95,.06) !important; } :root[data-theme="light"] :is(.main-nav a,.mega-trigger>a,.brand,.brand-name){ color:#172039 !important; } :root[data-theme="light"] :is(.enterprise-search input,.search-box input,input,select,textarea){ background:#fff !important;color:#172039 !important;border-color:#cfdcf0 !important; } :root[data-theme="light"] :is(.enterprise-search input,.search-box input,input,textarea)::placeholder{ color:#7d8aa5 !important; } :root[data-theme="light"] :is(.hero,.page-hero,.gtl-reference-hero,.gtl-home-hero,.gtl-inner-hero){ color:#10172a !important; } :root[data-theme="light"] :is(.gtl-reference-hero,.gtl-home-hero,.gtl-inner-hero,.page-hero){ background: radial-gradient(circle at 78% 20%,rgba(37,99,235,.13),transparent 34%), radial-gradient(circle at 18% 12%,rgba(168,85,247,.10),transparent 31%), linear-gradient(135deg,#f8fbff 0%,#eef5ff 54%,#f7f1ff 100%) !important; } :root[data-theme="light"] :is(.gtl-stat-strip,.gtl-category-card,.tool-card,.guide-card,.category-card, .feature-card,.pricing-card,.content-card,.panel,.card,.search-panel,.filter-panel, .gtl-reference-tool-card,.gtl-reference-guide-card){ background:linear-gradient(145deg,#fff,#f5f8ff) !important; color:#121a2e !important; border-color:#cfdcf0 !important; box-shadow:0 12px 34px rgba(35,58,105,.08) !important; } :root[data-theme="light"] :is(.gtl-category-card,.tool-card,.guide-card,.category-card, .gtl-reference-tool-card,.gtl-reference-guide-card) :is(h2,h3,h4,strong,.card-title,.tool-title,.guide-title){ color:#111a30 !important; } :root[data-theme="light"] :is(.gtl-category-card,.tool-card,.guide-card,.category-card, .gtl-reference-tool-card,.gtl-reference-guide-card) :is(p,small,.muted,.meta){ color:#60708e !important; } :root[data-theme="light"] :is(.filter-pill,.category-pill,.tool-category,.guide-category,kbd){ background:#eef4ff !important;color:#33415f !important;border-color:#cbd9ef !important; } :root[data-theme="light"] :is(.filter-pill,.category-pill).active{ background:linear-gradient(135deg,#5b5cf0,#a53cf1) !important;color:#fff !important; } :root[data-theme="light"] .site-footer{ background:#eaf1fb !important;color:#24324f !important;border-top-color:#d3deef !important; } :root[data-theme="light"] .site-footer :is(a,p,small){color:#52627f !important} :root[data-theme="light"] .site-footer :is(h2,h3,h4,strong,.brand-name){color:#172039 !important} :root[data-theme="light"] :is(.icon-button,#themeToggle,.language-button,.lang-button){ background:#fff !important;color:#172039 !important;border-color:#cbd8eb !important; } :root[data-theme="light"] .mega-menu{ background:#fff !important;color:#172039 !important;border-color:#d4dfef !important; box-shadow:0 20px 50px rgba(30,50,90,.15) !important; } :root[data-theme="light"] .mega-menu a{color:#263652 !important} :root[data-theme="light"] .mega-menu a:hover{background:#edf4ff !important} :root[data-theme="light"] a{ text-decoration-color:currentColor; } /* assets/css/aurora-3d.css */ /* Get Tools Lab Aurora 3D Theme — visual test layer */ :root{ --qc3-indigo:#6c5cff; --qc3-violet:#9b5cff; --qc3-cyan:#18d5ff; --qc3-mint:#27e3bd; --qc3-pink:#f064c7; --ui-primary:#6c5cff; --ui-primary-2:#9b5cff; --ui-accent:#18d5ff; --primary:#6c5cff; --primary-2:#9b5cff; --radius:22px; --ui-radius:24px; --ui-radius-sm:15px; --ui-bg:#eef3ff; --ui-surface:rgba(255,255,255,.82); --ui-surface-2:#e8eeff; --ui-text:#11182f; --ui-muted:#65708b; --ui-line:rgba(74,92,139,.18); --ui-shadow:0 24px 70px rgba(50,63,124,.17),0 3px 10px rgba(88,74,190,.08); --ui-shadow-sm:0 14px 36px rgba(47,61,118,.13),0 2px 5px rgba(47,61,118,.07); } :root[data-theme="dark"]{ --ui-bg:#070b16; --ui-surface:rgba(16,23,43,.84); --ui-surface-2:#141d35; --ui-text:#f5f8ff; --ui-muted:#aeb9d3; --ui-line:rgba(140,159,211,.18); --ui-shadow:0 28px 80px rgba(0,0,0,.45),0 0 0 1px rgba(113,105,255,.05); --ui-shadow-sm:0 16px 42px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.04) inset; } html{background:var(--ui-bg)} body{ background: radial-gradient(900px 560px at 4% -6%,color-mix(in srgb,var(--qc3-violet) 18%,transparent),transparent 65%), radial-gradient(820px 520px at 96% 2%,color-mix(in srgb,var(--qc3-cyan) 13%,transparent),transparent 65%), var(--ui-bg)!important; background-attachment:fixed!important; } body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 85%)} .site-header{background:color-mix(in srgb,var(--ui-bg) 70%,transparent)!important;border-bottom:1px solid color-mix(in srgb,var(--ui-primary) 20%,var(--ui-line))!important;box-shadow:0 8px 30px rgba(3,8,25,.12);backdrop-filter:blur(24px) saturate(150%)!important} .brand{gap:11px!important;perspective:600px} .brand-mark{width:42px!important;height:42px!important;background:none!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important} .brand-logo-mark{display:block;width:42px;height:42px;filter:drop-shadow(0 9px 12px rgba(88,78,255,.25));transition:transform .25s ease,filter .25s ease} .brand:hover .brand-logo-mark{transform:translateY(-2px) rotate(-3deg) scale(1.04);filter:drop-shadow(0 14px 15px rgba(88,78,255,.34))} .brand-name{font-weight:900;letter-spacing:-.045em;background:linear-gradient(105deg,var(--ui-text) 15%,color-mix(in srgb,var(--ui-text) 80%,var(--qc3-cyan)) 78%);-webkit-background-clip:text;background-clip:text;color:transparent} .enterprise-search input,.icon-button,.language-button{box-shadow:0 8px 24px rgba(36,48,96,.08),inset 0 1px 0 rgba(255,255,255,.09)!important} .enterprise-search input:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary) 18%,transparent),0 14px 30px color-mix(in srgb,var(--ui-primary) 10%,transparent)!important} .main-nav>a,.mega-trigger>a{transition:transform .18s ease,background .18s ease,color .18s ease}.main-nav>a:hover,.mega-trigger>a:hover{transform:translateY(-1px)} .saas-hero{padding-top:94px!important;background:radial-gradient(650px 430px at 10% 12%,rgba(108,92,255,.22),transparent 70%),radial-gradient(700px 480px at 91% 10%,rgba(24,213,255,.12),transparent 70%),transparent!important;perspective:1200px} .saas-hero:before{content:"";position:absolute;width:310px;height:310px;right:8%;top:40px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.34),rgba(108,92,255,.18) 22%,rgba(24,213,255,.12) 50%,transparent 72%);filter:blur(.2px);opacity:.55;pointer-events:none} .saas-hero h1{background:linear-gradient(110deg,var(--ui-text) 0%,var(--ui-text) 50%,color-mix(in srgb,var(--qc3-cyan) 66%,var(--ui-text)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 14px 38px rgba(63,68,151,.08)} .badge,.eyebrow{color:color-mix(in srgb,var(--ui-primary) 78%,var(--qc3-cyan))!important} .badge{border-color:color-mix(in srgb,var(--ui-primary) 38%,var(--ui-line))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 24px rgba(93,79,221,.08)} .hero-search-panel{transform:perspective(1000px) rotateY(-1.2deg) rotateX(.8deg);background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 92%,rgba(108,92,255,.12)),color-mix(in srgb,var(--ui-surface) 94%,rgba(24,213,255,.08)))!important;border:1px solid color-mix(in srgb,var(--ui-primary) 38%,var(--ui-line))!important;box-shadow:0 30px 70px rgba(15,20,55,.22),0 1px 0 rgba(255,255,255,.12) inset!important;transition:transform .3s ease,box-shadow .3s ease} .hero-search-panel:hover{transform:perspective(1000px) rotateY(0) rotateX(0) translateY(-4px);box-shadow:0 38px 90px rgba(25,25,75,.30),0 1px 0 rgba(255,255,255,.15) inset!important} .button{background:linear-gradient(135deg,#705dff 0%,#925cff 46%,#20cfff 120%)!important;box-shadow:0 13px 28px rgba(100,84,255,.28),inset 0 1px 0 rgba(255,255,255,.26)!important;border:1px solid rgba(255,255,255,.10)!important} .button:hover{transform:translateY(-3px)!important;box-shadow:0 19px 38px rgba(100,84,255,.36),inset 0 1px 0 rgba(255,255,255,.30)!important} .button.ghost,.button-secondary,.button.secondary{background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 96%,#fff 4%),color-mix(in srgb,var(--ui-surface) 92%,var(--ui-primary) 8%))!important;box-shadow:0 9px 24px rgba(35,47,95,.08),inset 0 1px 0 rgba(255,255,255,.10)!important} .tool-card,.article-card,.dashboard-panel,.benefit-grid article,.testimonial-grid blockquote,.category-cloud .category-tile,.account-dashboard section,.tool-panel,.prose-card{ background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 97%,white 3%),color-mix(in srgb,var(--ui-surface) 93%,var(--ui-primary) 7%))!important; border:1px solid color-mix(in srgb,var(--ui-primary) 19%,var(--ui-line))!important; box-shadow:var(--ui-shadow-sm)!important; } .tool-card,.category-cloud .category-tile,.article-card{transform-style:preserve-3d;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease!important} .tool-card:hover,.category-cloud .category-tile:hover,.article-card:hover{transform:translateY(-7px) perspective(800px) rotateX(1deg)!important;border-color:color-mix(in srgb,var(--ui-primary) 55%,var(--ui-line))!important;box-shadow:0 25px 55px rgba(18,25,65,.20),0 0 0 1px rgba(113,95,255,.08)!important} .tool-icon.tool-icon-svg,.category-cloud .category-icon,.related-card>span{background:linear-gradient(145deg,color-mix(in srgb,var(--ui-primary) 24%,var(--ui-surface-2)),color-mix(in srgb,var(--qc3-cyan) 12%,var(--ui-surface-2)))!important;border:1px solid color-mix(in srgb,var(--ui-primary) 22%,var(--ui-line));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 9px 19px rgba(76,66,190,.12)} .tool-category,.filter,.category-pill,.hero-shortcuts a{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px rgba(26,33,74,.06)} .filter.active,.filter:hover{background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-2))!important;box-shadow:0 9px 20px rgba(99,83,238,.24)!important} .section.alt,.logo-strip{background:color-mix(in srgb,var(--ui-surface-2) 58%,transparent)!important;backdrop-filter:blur(12px)} .stats-strip{background:linear-gradient(115deg,#5c4df5 0%,#8458ff 45%,#16bfe8 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 44px rgba(81,67,217,.22)} .stats-grid strong{text-shadow:0 9px 24px rgba(20,24,78,.20)} .cta-band{background:radial-gradient(600px 260px at 88% 20%,rgba(24,213,255,.18),transparent 65%),linear-gradient(120deg,#101631,#27225b 58%,#12324d)!important} .site-footer{background:linear-gradient(180deg,#0a1020 0%,#080c17 100%)!important;border-top:1px solid rgba(118,103,255,.22)} .qc-footer-trust .trust-card,.footer-newsletter{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(102,92,255,.045))!important;border-color:rgba(150,155,214,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 28px rgba(0,0,0,.13)} .language-menu,.mega-menu{background:color-mix(in srgb,var(--ui-surface) 96%,transparent)!important;backdrop-filter:blur(24px) saturate(150%);box-shadow:0 28px 70px rgba(4,8,25,.32)!important} @media(max-width:720px){.brand-logo-mark{width:40px;height:40px}.hero-search-panel{transform:none}.saas-hero:before{width:210px;height:210px;right:-80px;top:45px;opacity:.38}.tool-card:hover,.category-cloud .category-tile:hover,.article-card:hover{transform:translateY(-3px)!important}} @media(prefers-reduced-motion:reduce){.brand-logo-mark,.hero-search-panel,.tool-card,.category-cloud .category-tile,.article-card{transition:none!important;transform:none!important}} /* Get Tools Lab brand layer — Smart tools. Better results. */ :root{ --qc3-indigo:#7657ff; --qc3-violet:#b04dff; --qc3-cyan:#00d8ff; --qc3-mint:#1ee6b7; --qc3-pink:#ff4fd8; --qc3-orange:#ff8a3d; --ui-primary:#7657ff; --ui-primary-2:#b04dff; --ui-accent:#00d8ff; --primary:#7657ff; --primary-2:#b04dff; } :root[data-theme="dark"]{ --ui-bg:#050817; --ui-surface:rgba(12,19,41,.88); --ui-surface-2:#111a37; --ui-line:rgba(123,145,214,.20); } .brand-name{font-size:1.1rem!important;letter-spacing:-.04em!important;background:linear-gradient(90deg,var(--ui-text) 0 67%,#3bdcff 67% 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .site-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#7b5cff 28%,#00d8ff 68%,transparent);opacity:.7;pointer-events:none} .saas-hero{overflow:hidden!important;background:radial-gradient(700px 520px at 8% 12%,rgba(118,87,255,.27),transparent 70%),radial-gradient(650px 460px at 90% 12%,rgba(0,216,255,.18),transparent 72%),radial-gradient(460px 330px at 62% 75%,rgba(255,79,216,.10),transparent 70%),transparent!important} .saas-hero h1{max-width:760px;letter-spacing:-.06em;background:linear-gradient(112deg,#fff 0 47%,#67e8ff 70%,#d75cff 105%);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-search-panel{position:relative;overflow:hidden}.hero-search-panel:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-64px;top:-72px;background:radial-gradient(circle,rgba(0,216,255,.28),rgba(118,87,255,.12) 48%,transparent 70%);pointer-events:none} .tool-card:before,.category-cloud .category-tile:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 30%,transparent 70%,rgba(0,216,255,.04));opacity:.65} .tool-card,.category-cloud .category-tile{position:relative;overflow:hidden} .tool-card:hover .tool-icon,.category-cloud .category-tile:hover .category-icon{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 10px 18px rgba(118,87,255,.22))} .tool-icon,.category-icon{transition:transform .2s ease,filter .2s ease} .stats-strip{background:linear-gradient(110deg,#5b45e8 0%,#8a4cff 44%,#00a9df 100%)!important} .cta-band{background:radial-gradient(720px 300px at 85% 10%,rgba(0,216,255,.22),transparent 65%),radial-gradient(520px 240px at 15% 100%,rgba(255,79,216,.16),transparent 70%),linear-gradient(120deg,#0a1028,#1a1b4a 58%,#0a3047)!important} .site-footer{background:radial-gradient(700px 260px at 10% 0%,rgba(118,87,255,.12),transparent 65%),linear-gradient(180deg,#080d20 0%,#050812 100%)!important} @media(max-width:900px){.brand-name{font-size:1rem!important}.saas-hero h1{letter-spacing:-.045em}} /* Get Tools Lab Neon Studio 3D theme — reference-matched visual layer */ :root[data-theme="dark"],:root{ --gtl-bg:#040817;--gtl-panel:#0b1430;--gtl-panel2:#101b3e;--gtl-blue:#09b8ff;--gtl-violet:#704cff;--gtl-magenta:#d93cff;--gtl-green:#12d89a;--gtl-orange:#ff8b32;--gtl-text:#f7f8ff;--gtl-muted:#aab7d8; } body{background:radial-gradient(900px 520px at 12% 10%,rgba(22,74,190,.19),transparent 70%),radial-gradient(820px 520px at 87% 8%,rgba(95,37,255,.19),transparent 72%),var(--gtl-bg)!important} .site-header{background:rgba(3,8,25,.88)!important;border-bottom:1px solid rgba(67,104,213,.26)!important} .saas-hero{min-height:520px;padding:58px 0 30px!important;background:radial-gradient(640px 410px at 14% 24%,rgba(0,181,255,.18),transparent 70%),radial-gradient(620px 440px at 76% 28%,rgba(106,48,255,.32),transparent 70%),radial-gradient(400px 300px at 93% 42%,rgba(0,221,255,.15),transparent 70%)!important} .saas-hero-grid{grid-template-columns:1.02fr .98fr!important;align-items:center!important;gap:54px!important} .saas-hero h1{font-size:clamp(3.25rem,5.6vw,6rem)!important;line-height:.96!important;max-width:780px!important;margin:.28em 0 .2em!important;background:linear-gradient(105deg,#fff 0 35%,#19c8ff 55%,#775cff 73%,#e33cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important} .saas-hero p{max-width:660px;font-size:1.08rem!important;color:#c6d1ec!important} .hero-actions{margin-top:24px!important}.trust-row{margin-top:18px!important;color:#b8c6e7!important}.trust-row span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#14d99b;box-shadow:0 0 14px #14d99b;margin-right:7px} .hero-search-panel{min-height:330px;padding:32px!important;background:linear-gradient(145deg,rgba(14,25,62,.94),rgba(12,19,49,.86))!important;border:1px solid rgba(114,92,255,.65)!important;box-shadow:0 35px 90px rgba(0,0,0,.38),0 0 70px rgba(78,61,255,.18),inset 0 1px 0 rgba(255,255,255,.09)!important} .hero-search-panel:after{content:"⌘ ✦ ◫";position:absolute;right:26px;bottom:24px;font-size:42px;letter-spacing:15px;color:#48cfff;opacity:.18;transform:rotate(-8deg)} .logo-strip{background:rgba(8,16,43,.78)!important;border-block:1px solid rgba(76,104,193,.22)!important}.logo-strip .container{padding-block:13px!important} .stats-strip{margin:0!important;padding:0!important;background:transparent!important}.stats-strip .stats-grid{border:1px solid rgba(81,112,220,.55);border-radius:18px;background:linear-gradient(90deg,rgba(10,27,70,.92),rgba(27,30,92,.92),rgba(8,45,80,.9));box-shadow:0 15px 45px rgba(0,0,0,.24);padding:18px 24px!important}.stats-grid strong{color:#fff!important}.stats-grid span{color:#b8c7e8!important} .section{padding-block:52px!important}.section.alt{background:linear-gradient(180deg,rgba(8,15,38,.5),rgba(8,13,31,.72))!important}.section h2{letter-spacing:-.035em}.eyebrow{color:#8a73ff!important;letter-spacing:.12em!important} .category-cloud{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}.category-cloud .category-tile{min-height:105px!important;background:linear-gradient(145deg,rgba(15,29,68,.96),rgba(9,19,49,.96))!important;border-color:rgba(73,113,221,.42)!important}.category-cloud .category-tile:nth-child(4n+1) .category-icon{color:#ff486d!important;background:linear-gradient(145deg,#ff385d,#b51955)!important}.category-cloud .category-tile:nth-child(4n+2) .category-icon{color:#fff!important;background:linear-gradient(145deg,#1bbdff,#235cff)!important}.category-cloud .category-tile:nth-child(4n+3) .category-icon{color:#fff!important;background:linear-gradient(145deg,#9b4dff,#5b36e9)!important}.category-cloud .category-tile:nth-child(4n) .category-icon{color:#fff!important;background:linear-gradient(145deg,#18d9a1,#078d7d)!important}.category-cloud .category-icon{box-shadow:0 12px 28px rgba(65,72,255,.25)!important} .tool-grid{gap:16px!important}.tool-card{background:linear-gradient(150deg,rgba(14,27,65,.97),rgba(8,17,43,.98))!important;border-color:rgba(69,103,200,.36)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 15px 35px rgba(0,0,0,.16)!important}.tool-card:hover{border-color:#6959ff!important;box-shadow:0 22px 52px rgba(0,0,0,.28),0 0 32px rgba(100,73,255,.17)!important}.tool-card h3{color:#fff!important}.tool-card p{color:#aebddd!important}.tool-action{color:#7c67ff!important} .value-grid>div:first-child,.dashboard-panel,.benefit-grid article,.article-card,.testimonial-grid blockquote{background:linear-gradient(145deg,rgba(14,27,64,.92),rgba(8,17,42,.95))!important;border-color:rgba(73,105,198,.32)!important}.benefit-grid article:nth-child(1){box-shadow:inset 3px 0 #ff9a38!important}.benefit-grid article:nth-child(2){box-shadow:inset 3px 0 #18d7a0!important}.benefit-grid article:nth-child(3){box-shadow:inset 3px 0 #22bfff!important}.benefit-grid article:nth-child(4){box-shadow:inset 3px 0 #d84cff!important} .cta-band{border-block:1px solid rgba(77,108,215,.3)!important;box-shadow:0 -20px 70px rgba(91,50,255,.08)} .site-footer{background:radial-gradient(620px 240px at 12% 0%,rgba(75,56,255,.14),transparent 70%),#040817!important;border-top:1px solid rgba(70,105,215,.34)!important}.footer-grid{grid-template-columns:1.25fr .75fr 1.3fr!important}.footer-grid a{color:#aebddd!important}.footer-grid a:hover{color:#fff!important}.footer-newsletter{border:1px solid rgba(77,110,210,.3)!important;background:rgba(10,22,53,.76)!important}.qc-footer-trust .trust-card{background:rgba(9,22,52,.75)!important} @media(max-width:1000px){.saas-hero-grid{grid-template-columns:1fr!important}.hero-search-panel{max-width:760px}.category-cloud{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:620px){.saas-hero{padding-top:38px!important}.saas-hero h1{font-size:clamp(2.8rem,14vw,4.2rem)!important}.category-cloud{grid-template-columns:1fr!important}.section{padding-block:38px!important}} /* assets/css/gettoolslab-home-reference.css */ /* Get Tools Lab reference homepage — designed from the approved visual reference. */ .gtl-home{background:#030714;color:#f7f9ff} .gtl-home .site-header{position:relative;z-index:40;background:rgba(2,7,24,.96)!important;border-bottom:1px solid rgba(51,95,195,.30)!important;box-shadow:0 10px 35px rgba(0,0,0,.22)} .gtl-home .nav-wrap{min-height:64px} .gtl-home .enterprise-search{max-width:460px;background:rgba(10,22,55,.76)!important;border-color:rgba(61,99,197,.46)!important} .gtl-home .main-nav{gap:23px}.gtl-home .main-nav>a,.gtl-home .mega-trigger>a{font-size:.92rem;color:#e8edff!important} .gtl-home .icon-button{background:rgba(13,25,58,.78)!important;border-color:rgba(69,105,204,.36)!important} .gtl-reference-home{overflow:hidden;background:radial-gradient(900px 540px at 7% 16%,rgba(0,141,255,.16),transparent 72%),radial-gradient(950px 630px at 86% 8%,rgba(70,42,255,.22),transparent 74%),#030714} .gtl-reference-home .container{max-width:1400px} .gtl-hero{position:relative;padding:30px 0 18px;min-height:330px;background:radial-gradient(620px 380px at 65% 35%,rgba(106,39,255,.20),transparent 72%)} .gtl-hero:before,.gtl-hero:after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(3px)} .gtl-hero:before{width:480px;height:480px;right:0;top:-260px;background:rgba(0,108,255,.13);box-shadow:0 0 120px rgba(0,165,255,.2)} .gtl-hero:after{width:500px;height:260px;left:38%;bottom:-100px;background:rgba(190,36,255,.08)} .gtl-hero-grid{display:grid;grid-template-columns:.96fr 1.04fr;align-items:center;gap:36px;position:relative;z-index:2} .gtl-hero-copy{padding:10px 0 4px}.gtl-hero-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:1px solid rgba(91,99,221,.58);background:rgba(13,25,72,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.18);font-size:.78rem;font-weight:800;color:#d8e3ff;letter-spacing:.015em}.gtl-hero-badge span{color:#8e77ff} .gtl-hero h1{font-size:clamp(3rem,4.65vw,5.25rem);line-height:.96;margin:12px 0 12px;letter-spacing:-.065em;color:#fff!important;background:none!important;-webkit-text-fill-color:initial!important}.gtl-hero h1 span{display:inline-block;background:linear-gradient(90deg,#1fc9ff 0%,#3e8cff 25%,#7659ff 55%,#ef43e5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .gtl-hero-kicker{margin:0 0 8px!important;font-size:1.15rem!important;line-height:1.35;color:#72e8ff!important;font-weight:800;max-width:680px!important}.gtl-hero-description{margin:0!important;max-width:650px!important;color:#c0cae7!important;font-size:1rem!important;line-height:1.52} .gtl-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}.gtl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 23px;border-radius:14px;text-decoration:none!important;font-weight:850;border:1px solid transparent;transition:.2s ease}.gtl-btn-primary{color:#fff!important;background:linear-gradient(90deg,#02bfff,#8257ff 60%,#db39f1);box-shadow:0 15px 38px rgba(82,72,255,.35),0 0 28px rgba(0,188,255,.15)}.gtl-btn-primary:hover{transform:translateY(-2px);filter:saturate(1.12)}.gtl-btn-ghost{color:#eef3ff!important;background:rgba(6,14,39,.6);border-color:rgba(91,109,188,.48)} .gtl-trust-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:15px;color:#aebbd8;font-size:.78rem}.gtl-trust-row span::first-letter{color:#10d58f} .gtl-hero-art{position:relative;border-radius:34px;min-height:300px;display:flex;align-items:center;justify-content:center;isolation:isolate}.gtl-hero-art:before{content:"";position:absolute;inset:14% 5% 5%;border-radius:50%;background:radial-gradient(circle,rgba(0,196,255,.31),rgba(93,45,255,.26) 48%,transparent 74%);filter:blur(25px);z-index:-1}.gtl-hero-art img{display:block;width:100%;height:auto;max-height:330px;object-fit:cover;object-position:center;border-radius:26px;mix-blend-mode:screen;filter:saturate(1.18) contrast(1.05);box-shadow:0 28px 70px rgba(0,0,0,.28)} .gtl-stats-band{position:relative;z-index:4;padding:0 0 8px}.gtl-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid rgba(61,101,215,.58);border-radius:18px;background:linear-gradient(90deg,rgba(5,32,82,.92),rgba(25,28,91,.94),rgba(9,40,84,.92));box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}.gtl-stats-grid>div{min-height:64px;padding:10px 18px;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-content:center;justify-content:center;column-gap:10px}.gtl-stat-icon{grid-row:1/3;align-self:center;color:#08c8ff;font-size:1.35rem}.gtl-stats-grid strong{font-size:1.2rem;color:#fff;line-height:1}.gtl-stats-grid small{color:#c3cee8;font-size:.72rem;margin-top:3px} .gtl-section{padding:11px 0 8px}.gtl-section-title-row,.gtl-mini-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:10px}.gtl-section-title-row h2,.gtl-mini-heading h2{font-size:1.2rem;margin:0;color:#fff;letter-spacing:-.025em}.gtl-section-title-row p,.gtl-mini-heading p{margin:2px 0 0;color:#8998bb;font-size:.76rem}.gtl-section-title-row>a,.gtl-mini-heading>a{font-size:.76rem;color:#23baff;text-decoration:none} .gtl-category-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.gtl-category-card{min-height:99px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px 13px;border:1px solid rgba(61,100,210,.48);border-radius:14px;background:linear-gradient(145deg,rgba(12,36,82,.92),rgba(6,18,50,.96));text-decoration:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.2s ease}.gtl-category-card:hover{transform:translateY(-4px);border-color:#3d8dff;box-shadow:0 16px 35px rgba(0,0,0,.25),0 0 28px rgba(50,104,255,.12)}.gtl-category-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#ff365f,#bd164d);box-shadow:0 10px 24px rgba(255,39,95,.24)}.gtl-category-card:nth-child(2) .gtl-category-icon{background:linear-gradient(145deg,#21bfff,#1f5eff)}.gtl-category-card:nth-child(3) .gtl-category-icon{background:linear-gradient(145deg,#9c4cff,#5a32e7)}.gtl-category-card:nth-child(4) .gtl-category-icon{background:linear-gradient(145deg,#19dca1,#07917b)}.gtl-category-card:nth-child(5) .gtl-category-icon{background:linear-gradient(145deg,#ff9a37,#ff642d)}.gtl-category-card:nth-child(6) .gtl-category-icon{background:linear-gradient(145deg,#f452f0,#9c32eb)}.gtl-category-card:nth-child(7) .gtl-category-icon{background:linear-gradient(145deg,#22c7e6,#0b77d5)}.gtl-category-card:nth-child(8) .gtl-category-icon{background:linear-gradient(145deg,#746cff,#3e5dd8)}.gtl-category-icon svg{width:24px;height:24px}.gtl-category-copy{min-width:0;display:flex;flex-direction:column}.gtl-category-copy strong{color:#fff;font-size:.9rem;white-space:nowrap}.gtl-category-copy small{font-size:.72rem;color:#aab8d8;margin-top:2px}.gtl-category-arrow{color:#eaf0ff;font-size:1.05rem} .gtl-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gtl-feature-card{position:relative;min-height:120px;border-radius:16px;overflow:hidden;border:1px solid rgba(101,105,255,.42);display:flex;align-items:center;padding:19px 160px 19px 20px}.gtl-feature-copy{position:relative;z-index:3}.gtl-feature-copy h3{margin:0 0 5px;color:#fff;font-size:1rem}.gtl-feature-copy p{margin:0 0 12px;color:#d3dcf3;font-size:.78rem;line-height:1.45;max-width:290px}.gtl-feature-copy a{display:inline-flex;padding:8px 15px;border-radius:999px;color:#fff;text-decoration:none;font-size:.72rem;font-weight:800;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.14)}.gtl-feature-symbol{display:inline-block;margin-bottom:8px;color:#fff;font-weight:900}.gtl-feature-art{position:absolute;right:20px;bottom:-9px;width:130px;height:115px;display:grid;place-items:center;font-size:3.2rem;font-weight:900;color:#fff;filter:drop-shadow(0 15px 26px rgba(0,0,0,.28))}.gtl-feature-ai{background:radial-gradient(circle at 84% 66%,rgba(255,255,255,.13),transparent 33%),linear-gradient(120deg,#6b2ce9,#ce2be5 72%,#ef3fc4)}.gtl-feature-privacy{background:radial-gradient(circle at 82% 70%,rgba(255,255,255,.12),transparent 34%),linear-gradient(120deg,#084fbd,#0876e2 54%,#00b6ff)}.gtl-feature-api{background:radial-gradient(circle at 84% 70%,rgba(255,255,255,.12),transparent 34%),linear-gradient(120deg,#076f49,#04996b 54%,#06c87a)}.gtl-robot-art{border-radius:46% 46% 38% 38%;background:linear-gradient(145deg,#e7f9ff,#8dd9ff 46%,#7666ff 48%,#c64fff);border:5px solid rgba(255,255,255,.44);font-size:1.7rem}.gtl-robot-art b{position:absolute;bottom:12px;font-size:.9rem}.gtl-shield-art{clip-path:polygon(50% 0,92% 16%,83% 77%,50% 100%,17% 77%,8% 16%);background:linear-gradient(145deg,#67e9ff,#1687f7 52%,#594cff);font-size:2.5rem}.gtl-code-art{border-radius:20px;background:linear-gradient(145deg,#152c70,#07143d);border:3px solid #29e6ae;color:#4affbf;font-size:2rem} .gtl-bottom-grid{display:grid;grid-template-columns:1.45fr .95fr;gap:18px}.gtl-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.gtl-guide-card{min-height:86px;display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px;border-radius:13px;border:1px solid rgba(60,97,192,.38);background:linear-gradient(145deg,rgba(11,28,66,.94),rgba(6,17,44,.96));text-decoration:none!important}.gtl-guide-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#ff385c,#bd174f)}.gtl-guide-card:nth-child(2) .gtl-guide-icon{background:linear-gradient(145deg,#21bfff,#225cff)}.gtl-guide-card:nth-child(3) .gtl-guide-icon{background:linear-gradient(145deg,#a24aff,#6135e9)}.gtl-guide-card strong{display:block;color:#fff;font-size:.76rem;line-height:1.25}.gtl-guide-card small{display:block;color:#aebad6;font-size:.65rem;line-height:1.35;margin-top:3px}.gtl-guide-card em{display:block;color:#7f91b9;font-style:normal;font-size:.6rem;margin-top:7px}.gtl-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.gtl-why-grid>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;padding:10px 8px}.gtl-why-grid span{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#547cff,#5f44f5);color:#fff}.gtl-why-grid>div:nth-child(2) span{background:linear-gradient(145deg,#1bd99e,#08a376)}.gtl-why-grid>div:nth-child(3) span{background:linear-gradient(145deg,#d94bff,#8c3fff)}.gtl-why-grid>div:nth-child(4) span{background:linear-gradient(145deg,#ff9b39,#ff6431)}.gtl-why-grid b{font-size:.74rem;color:#fff}.gtl-why-grid small{font-size:.64rem;color:#aeb8d4;line-height:1.35} /* Reference-matched footer on the homepage */ .gtl-home .site-footer{padding:18px 0 10px!important;background:#020713!important;border-top:1px solid rgba(44,86,188,.42)!important}.gtl-home .footer-grid{grid-template-columns:1.3fr .65fr .95fr!important;gap:34px!important}.gtl-home .footer-newsletter{margin-top:12px!important;padding:12px 15px!important}.gtl-home .qc-footer-trust{margin:10px auto!important}.gtl-home .footer-bottom{padding:10px 0!important}.gtl-home .footer-seo-links{font-size:.72rem!important} @media(max-width:1150px){.gtl-category-grid{grid-template-columns:repeat(4,1fr)}.gtl-feature-card{padding-right:120px}.gtl-feature-art{width:100px}.gtl-bottom-grid{grid-template-columns:1fr}.gtl-home .main-nav{gap:13px}} @media(max-width:900px){.gtl-hero-grid{grid-template-columns:1fr}.gtl-hero-art{order:-1;min-height:0;max-width:720px;margin-inline:auto}.gtl-stats-grid{grid-template-columns:repeat(3,1fr)}.gtl-stats-grid>div:nth-child(4),.gtl-stats-grid>div:nth-child(5){display:none}.gtl-guide-grid{grid-template-columns:1fr}.gtl-feature-grid{grid-template-columns:1fr}.gtl-feature-card{min-height:130px}.gtl-home .enterprise-search{display:none}} @media(max-width:640px){.gtl-hero{padding-top:22px}.gtl-hero h1{font-size:clamp(2.75rem,14vw,4.3rem)}.gtl-hero-actions{display:grid;grid-template-columns:1fr}.gtl-trust-row{gap:11px 16px}.gtl-category-grid{grid-template-columns:repeat(2,1fr)}.gtl-stats-grid{grid-template-columns:1fr 1fr}.gtl-stats-grid>div:nth-child(3){display:none}.gtl-category-card{min-height:88px}.gtl-why-grid{grid-template-columns:1fr}.gtl-home .footer-grid{grid-template-columns:1fr!important}} .gtl-home .gtl-get-started{display:inline-flex!important;align-items:center;justify-content:center;min-height:38px;padding:0 16px!important;border-radius:13px;background:linear-gradient(90deg,#04bfff,#7857ff 58%,#d83dea);color:#fff!important;box-shadow:0 10px 26px rgba(89,70,255,.28)} .gtl-home .nav-premium{color:#ffd66b!important}.gtl-home .main-nav .gtl-nav-api,.gtl-home .main-nav .gtl-nav-pricing,.gtl-home .main-nav .gtl-nav-blog{display:inline-flex} @media(max-width:1250px){.gtl-home .main-nav .gtl-nav-blog{display:none}.gtl-home .main-nav{gap:11px}.gtl-home .gtl-get-started{padding-inline:12px!important}} @media(max-width:1100px){.gtl-home .main-nav .gtl-nav-api,.gtl-home .main-nav .gtl-nav-pricing,.gtl-home .nav-premium{display:none}} /* ========================================================== Get Tools Lab V9 — responsive text + card overflow hardening Keeps long labels inside cards/buttons across the site. ========================================================== */ /* Universal flex/grid child protection. */ :is(.gtl-category-card,.tool-card,.guide-card,.category-card,.feature-card,.pricing-card, .btn,.button,button,a[class*="btn"],a[class*="button"], .filter-pill,.category-pill,.tool-category,.guide-category) > *{ min-width:0; } /* Buttons/chips: never allow labels to paint outside their control. */ :is(.btn,.button,button,a[class*="btn"],a[class*="button"], .filter-pill,.category-pill,.tool-category,.guide-category){ max-width:100%; box-sizing:border-box; } :is(.btn,.button,a[class*="btn"],a[class*="button"]){ white-space:normal; overflow-wrap:break-word; word-break:normal; text-align:center; } /* Homepage category cards: reserve enough text room and adapt typography. */ .gtl-category-grid{ grid-template-columns:repeat(8,minmax(0,1fr)); } .gtl-category-card{ grid-template-columns:40px minmax(0,1fr) 16px !important; gap:9px !important; padding:12px 11px !important; min-width:0; overflow:hidden; } .gtl-category-icon{ width:40px !important; height:40px !important; min-width:40px; border-radius:11px !important; } .gtl-category-icon svg{ width:22px !important; height:22px !important; } .gtl-category-copy{ min-width:0 !important; overflow:hidden; } .gtl-category-copy strong{ display:block; width:100%; font-size:clamp(.72rem,.72vw,.9rem) !important; line-height:1.15 !important; white-space:normal !important; overflow-wrap:anywhere; word-break:normal; hyphens:none; } .gtl-category-copy small{ display:block; margin-top:4px; font-size:clamp(.62rem,.58vw,.72rem) !important; line-height:1.2; white-space:normal !important; overflow-wrap:break-word; } .gtl-category-arrow{ justify-self:end; width:16px; min-width:16px; overflow:hidden; } /* Keep compact 8-column look only when the viewport has enough room. Below that, reduce columns rather than crushing labels. */ @media (max-width:1260px){ .gtl-category-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important} .gtl-category-copy strong{font-size:.88rem !important} } @media (max-width:760px){ .gtl-category-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } @media (max-width:440px){ .gtl-category-grid{grid-template-columns:1fr !important} } /* Internal tool/guide/category cards. */ body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card,.gtl-category-card){ min-width:0 !important; overflow:hidden !important; } body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card) :is(h2,h3,h4,strong,.card-title,.tool-title,.guide-title){ max-width:100%; overflow-wrap:anywhere; word-break:normal; hyphens:none; } body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card) p{ overflow-wrap:break-word; } /* Tool/category badges remain readable without escaping a card. */ .tool-category,.guide-category{ max-width:min(100%,12rem) !important; white-space:normal !important; overflow-wrap:anywhere; text-align:center; } /* Search/filter pills: long topic names fit instead of clipping. */ :is(.guide-filters,.filter-row,.category-filters) :is(button,a,.filter-pill,.category-pill){ width:auto !important; min-width:max-content; max-width:100%; white-space:normal !important; line-height:1.15 !important; overflow-wrap:anywhere; } /* General card-grid responsiveness: do not keep four columns once card text would be forced into unusably narrow boxes. */ @media (max-width:1180px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:860px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:560px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:1fr !important; } } /* Forms and table content: prevent long strings/URLs from widening layouts. */ :is(.card,.panel,.content-card,.form-card,.table-wrap,td,th,label,.help-text){ min-width:0; overflow-wrap:anywhere; } /* Navigation CTAs: preserve layout on narrower desktops. */ .site-header :is(.btn,.nav-cta,.header-cta){ flex-shrink:0; } /* ========================================================== Get Tools Lab V10 — responsive buttons / no word splitting Long labels expand horizontally instead of breaking words. ========================================================== */ /* Primary buttons and CTA controls should grow with their labels. */ :is(.btn,.button,button,a[class*="btn"],a[class*="button"], .nav-cta,.header-cta,.gtl-cta,.gtl-btn){ width:auto !important; min-width:max-content; max-width:100%; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; flex-shrink:0; padding-left:clamp(13px,1.2vw,20px) !important; padding-right:clamp(13px,1.2vw,20px) !important; } /* Pills/tabs should also expand instead of splitting labels. */ :is(.filter-pill,.category-pill,.tool-category,.guide-category, .guide-filters button,.filter-row button,.category-filters button, .guide-filters a,.filter-row a,.category-filters a){ width:auto !important; min-width:max-content !important; max-width:none !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; flex:0 0 auto !important; } /* When there are many pills, scroll horizontally rather than breaking words. */ :is(.guide-filters,.filter-row.scrollable,.category-filters){ overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:thin; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; padding-bottom:6px; } /* Homepage category cards: give long labels more horizontal room. Use fluid columns instead of forcing eight cramped cards into one row. */ .gtl-category-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)) !important; gap:12px !important; } .gtl-category-card{ grid-template-columns:40px minmax(max-content,1fr) 16px !important; min-width:176px !important; padding:12px 13px !important; overflow:visible !important; } .gtl-category-copy{ overflow:visible !important; } .gtl-category-copy strong{ width:auto !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; font-size:clamp(.78rem,.78vw,.9rem) !important; } .gtl-category-copy small{ white-space:nowrap !important; overflow-wrap:normal !important; } /* Internal tool/category tiles should not break a single category name. */ .category-cloud .category-copy strong, .category-cloud a strong{ white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; } /* On narrower layouts, keep buttons usable without splitting words. Wide CTAs may become full-width but the label stays intact. */ @media (max-width:560px){ :is(.btn,.button,a[class*="btn"],a[class*="button"],.gtl-cta,.gtl-btn){ max-width:100% !important; justify-content:center; } .gtl-category-grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important; } .gtl-category-card{ min-width:160px !important; } } /* Very narrow screens get one card per row instead of broken labels. */ @media (max-width:360px){ .gtl-category-grid{ grid-template-columns:1fr !important; } } /* ========================================================== Get Tools Lab V29 — extended homepage + readability polish Homepage only. Internal-page layouts remain unchanged. ========================================================== */ .gtl-home .gtl-reference-home{font-size:1.045rem} .gtl-home .gtl-section{padding:20px 0 16px} .gtl-home .gtl-section-title-row{margin-bottom:16px} .gtl-home .gtl-section-title-row h2, .gtl-home .gtl-mini-heading h2{font-size:clamp(1.35rem,1.7vw,1.7rem);line-height:1.2} .gtl-home .gtl-section-title-row p, .gtl-home .gtl-mini-heading p{font-size:.86rem;line-height:1.5} .gtl-home .gtl-section-title-row>a, .gtl-home .gtl-mini-heading>a{font-size:.84rem;font-weight:750} .gtl-home .gtl-category-copy strong{font-size:.94rem!important} .gtl-home .gtl-category-copy small{font-size:.76rem!important} .gtl-home .gtl-feature-copy h3{font-size:1.12rem} .gtl-home .gtl-feature-copy p{font-size:.84rem;line-height:1.55} .gtl-home .gtl-guide-card strong{font-size:.82rem;line-height:1.35} .gtl-home .gtl-guide-card small{font-size:.71rem;line-height:1.45} .gtl-home .gtl-why-grid b{font-size:.85rem} .gtl-home .gtl-why-grid small{font-size:.72rem;line-height:1.4} .gtl-section-title-roomy{align-items:flex-end} .gtl-section-kicker{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;margin-bottom:8px;border:1px solid rgba(89,101,225,.55);border-radius:999px;background:rgba(14,28,72,.72);color:#73deff;font-size:.67rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .gtl-popular-tools-section{position:relative} .gtl-popular-tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .gtl-popular-tool-card{min-height:168px;padding:18px;border-radius:16px;border:1px solid rgba(61,100,210,.45);background:linear-gradient(145deg,rgba(10,31,72,.96),rgba(6,17,45,.98));text-decoration:none!important;display:flex;flex-direction:column;align-items:flex-start;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.2s ease} .gtl-popular-tool-card:hover{transform:translateY(-4px);border-color:#418cff;box-shadow:0 18px 40px rgba(0,0,0,.25),0 0 30px rgba(50,104,255,.12)} .gtl-popular-tool-icon{display:grid;place-items:center;min-width:44px;height:34px;padding:0 10px;margin-bottom:13px;border-radius:10px;background:linear-gradient(135deg,#16bfff,#765bff 58%,#d13fea);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.07em} .gtl-popular-tool-card strong{color:#fff;font-size:1.02rem;line-height:1.25;margin-bottom:7px} .gtl-popular-tool-card p{color:#aebbd7;font-size:.82rem;line-height:1.5;margin:0 0 14px} .gtl-popular-tool-card>span:last-child{margin-top:auto;color:#43d1ff;font-size:.8rem;font-weight:800} .gtl-workflow-section{position:relative} .gtl-workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .gtl-workflow-card{min-height:150px;padding:18px;border:1px solid rgba(76,105,198,.4);border-radius:16px;background:linear-gradient(145deg,rgba(13,30,67,.88),rgba(7,17,43,.94));display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start} .gtl-workflow-number{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#1bc6ff,#765cff 58%,#c341ec);color:#fff;font-size:.76rem;font-weight:900;box-shadow:0 10px 24px rgba(82,72,255,.2)} .gtl-workflow-card h3{margin:1px 0 7px;color:#fff;font-size:1rem;line-height:1.25} .gtl-workflow-card p{margin:0;color:#aebbd7;font-size:.82rem;line-height:1.52} .gtl-use-cases-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:24px;align-items:stretch;padding:24px;border:1px solid rgba(72,104,208,.46);border-radius:20px;background:radial-gradient(520px 280px at 80% 20%,rgba(31,169,255,.15),transparent 70%),radial-gradient(420px 260px at 18% 86%,rgba(186,59,241,.11),transparent 70%),linear-gradient(145deg,rgba(9,27,65,.96),rgba(7,16,43,.98))} .gtl-use-cases-copy{align-self:center;padding:8px 6px} .gtl-use-cases-copy h2{margin:0 0 10px;color:#fff;font-size:clamp(1.7rem,2.4vw,2.55rem);line-height:1.08;letter-spacing:-.04em;max-width:620px} .gtl-use-cases-copy p{margin:0 0 18px;color:#b9c5e0;font-size:.92rem;line-height:1.6;max-width:620px} .gtl-use-cases-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px} .gtl-use-cases-grid article{padding:17px;border-radius:15px;border:1px solid rgba(78,109,202,.38);background:rgba(9,24,57,.74)} .gtl-use-cases-grid article>span{font-size:1.35rem} .gtl-use-cases-grid h3{margin:8px 0 5px;color:#fff;font-size:.98rem} .gtl-use-cases-grid p{margin:0;color:#aebbd7;font-size:.8rem;line-height:1.48} .gtl-home-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px} .gtl-home-faq-grid details{border:1px solid rgba(64,99,192,.44);border-radius:15px;background:linear-gradient(145deg,rgba(10,30,70,.95),rgba(6,17,44,.98));overflow:hidden} .gtl-home-faq-grid summary{cursor:pointer;list-style:none;padding:17px 18px;color:#fff;font-size:.92rem;font-weight:820;line-height:1.35} .gtl-home-faq-grid summary::-webkit-details-marker{display:none} .gtl-home-faq-grid summary:after{content:'+';float:right;color:#5dd8ff;font-size:1.1rem} .gtl-home-faq-grid details[open] summary:after{content:'–'} .gtl-home-faq-grid details p{margin:0;padding:0 18px 18px;color:#aebbd7;font-size:.82rem;line-height:1.55} /* Light-mode companions for the new homepage sections. */ html[data-theme="light"] .gtl-home .gtl-section-kicker{background:#eef4ff;border-color:#c9d6ed;color:#277f9e} html[data-theme="light"] .gtl-home .gtl-popular-tool-card, html[data-theme="light"] .gtl-home .gtl-workflow-card, html[data-theme="light"] .gtl-home .gtl-home-faq-grid details{background:linear-gradient(145deg,#fff,#f7f9fd)!important;border-color:#d5dfef!important;box-shadow:0 12px 30px rgba(42,62,102,.07)!important} html[data-theme="light"] .gtl-home .gtl-popular-tool-card strong, html[data-theme="light"] .gtl-home .gtl-workflow-card h3, html[data-theme="light"] .gtl-home .gtl-home-faq-grid summary{color:#17233d!important} html[data-theme="light"] .gtl-home .gtl-popular-tool-card p, html[data-theme="light"] .gtl-home .gtl-workflow-card p, html[data-theme="light"] .gtl-home .gtl-home-faq-grid details p{color:#63728d!important} html[data-theme="light"] .gtl-home .gtl-use-cases-wrap{background:radial-gradient(520px 280px at 80% 20%,rgba(31,169,255,.10),transparent 70%),radial-gradient(420px 260px at 18% 86%,rgba(186,59,241,.07),transparent 70%),linear-gradient(145deg,#fff,#f4f8ff)!important;border-color:#d5dfef!important;box-shadow:0 14px 34px rgba(42,62,102,.08)!important} html[data-theme="light"] .gtl-home .gtl-use-cases-copy h2, html[data-theme="light"] .gtl-home .gtl-use-cases-grid h3{color:#17233d!important} html[data-theme="light"] .gtl-home .gtl-use-cases-copy p, html[data-theme="light"] .gtl-home .gtl-use-cases-grid p{color:#63728d!important} html[data-theme="light"] .gtl-home .gtl-use-cases-grid article{background:#f8faff!important;border-color:#d5dfef!important} @media(max-width:1120px){ .gtl-popular-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .gtl-workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .gtl-use-cases-wrap{grid-template-columns:1fr} } @media(max-width:700px){ .gtl-home .gtl-reference-home{font-size:1rem} .gtl-popular-tools-grid,.gtl-workflow-grid,.gtl-home-faq-grid{grid-template-columns:1fr} .gtl-use-cases-grid{grid-template-columns:1fr} .gtl-use-cases-wrap{padding:18px} .gtl-popular-tool-card{min-height:150px} } /* ========================================================== Get Tools Lab V40 — homepage hero visual alignment Align the hero artwork with the top of the hero copy/badge instead of vertically centering it against the taller copy. ========================================================== */ @media (min-width:901px){ .gtl-home .gtl-hero-art{ align-self:start; margin-top:10px; } } @media (max-width:900px){ .gtl-home .gtl-hero-art{ margin-top:0; } } /* assets/css/gettoolslab-internal-reference.css */ /* Get Tools Lab internal reference theme v3 - mirrors the approved neon/glass homepage. */ body:not(.gtl-home){ --gtl-bg:#020713;--gtl-panel:#071631;--gtl-panel2:#0a1e43;--gtl-line:rgba(67,111,220,.42); --gtl-cyan:#10c7ff;--gtl-blue:#2687ff;--gtl-violet:#7858ff;--gtl-magenta:#dc3eea;--gtl-text:#f6f8ff;--gtl-muted:#aebce0; background: radial-gradient(950px 520px at 0 0,rgba(0,143,255,.13),transparent 68%), radial-gradient(900px 620px at 100% 2%,rgba(102,41,255,.18),transparent 72%), linear-gradient(180deg,#030819 0,#020713 52%,#030918 100%)!important; color:var(--gtl-text); } body:not(.gtl-home) .container{width:min(1280px,calc(100% - 44px))} /* Header: use the same proportion, density and neon treatment as the homepage. */ body:not(.gtl-home) .site-header{position:sticky;top:0;z-index:70;background:rgba(1,6,22,.94)!important;border-bottom:1px solid rgba(55,96,203,.36)!important;box-shadow:0 12px 38px rgba(0,0,0,.25);backdrop-filter:blur(20px)} body:not(.gtl-home) .nav-wrap{min-height:64px;height:64px;gap:18px} body:not(.gtl-home) .brand{flex:0 0 auto;gap:9px}.brand-logo-mark{filter:drop-shadow(0 6px 14px rgba(83,76,255,.28))} body:not(.gtl-home) .brand-name{font-size:1.06rem;white-space:nowrap} body:not(.gtl-home) .enterprise-search{width:min(430px,32vw);min-width:250px;height:40px;background:rgba(8,21,54,.84)!important;border:1px solid rgba(63,101,204,.48)!important;border-radius:13px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)} body:not(.gtl-home) .enterprise-search input{font-size:.91rem} body:not(.gtl-home) .main-nav{gap:19px;align-items:center;white-space:nowrap} body:not(.gtl-home) .main-nav>a,body:not(.gtl-home) .mega-trigger>a{color:#e9eeff!important;font-size:.88rem;font-weight:780} body:not(.gtl-home) .main-nav>a:hover,body:not(.gtl-home) .mega-trigger>a:hover{color:#67d7ff!important} body:not(.gtl-home) .nav-premium{color:#ffd45c!important} body:not(.gtl-home) .gtl-get-started{display:inline-flex!important;align-items:center;justify-content:center;min-height:38px;padding:0 15px!important;border-radius:13px;background:linear-gradient(90deg,#05bfff,#7559ff 58%,#dd3be9);color:#fff!important;box-shadow:0 10px 26px rgba(86,70,255,.28)} body:not(.gtl-home) .icon-button{background:rgba(10,22,55,.82)!important;border:1px solid rgba(67,103,201,.42)!important;color:#eef3ff!important} body:not(.gtl-home) .language-button{min-width:88px!important;width:auto!important;padding-inline:12px!important} /* Global internal page canvas. */ body:not(.gtl-home) main{position:relative;isolation:isolate} body:not(.gtl-home) main:before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:560px;pointer-events:none;background:radial-gradient(680px 360px at 72% 7%,rgba(111,48,255,.18),transparent 72%),radial-gradient(540px 340px at 7% 10%,rgba(0,184,255,.10),transparent 72%)} /* Hero/card language shared by categories, pages, tools and guides. */ body:not(.gtl-home) .page-hero,body:not(.gtl-home) .guides-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(7,28,67,.94),rgba(9,14,43,.94) 55%,rgba(21,10,66,.86))!important;border:1px solid rgba(67,105,219,.48)!important;border-radius:24px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 70px rgba(0,0,0,.25),0 0 42px rgba(90,52,255,.08);padding:clamp(34px,5vw,64px)!important;margin:30px auto 28px!important} body:not(.gtl-home) .page-hero:before,body:not(.gtl-home) .guides-hero:before{content:"";position:absolute;width:360px;height:360px;right:-100px;top:-145px;border-radius:50%;background:radial-gradient(circle,rgba(0,199,255,.21),rgba(118,72,255,.10) 42%,transparent 70%);pointer-events:none} body:not(.gtl-home) .page-hero:after,body:not(.gtl-home) .guides-hero:after{content:"";position:absolute;width:220px;height:220px;right:15%;bottom:-140px;border-radius:50%;background:radial-gradient(circle,rgba(220,62,234,.18),transparent 68%);pointer-events:none} body:not(.gtl-home) .page-hero h1,body:not(.gtl-home) .guides-hero h1,body:not(.gtl-home) .page-shell>h1,body:not(.gtl-home) .prose>h1{color:#fff!important;letter-spacing:-.05em;line-height:1.02;text-wrap:balance} body:not(.gtl-home) .page-hero h1,body:not(.gtl-home) .guides-hero h1{font-size:clamp(2.65rem,5.2vw,5rem);max-width:920px;margin:12px 0 20px!important} body:not(.gtl-home) .page-hero p,body:not(.gtl-home) .guides-hero p{color:#b7c4e5!important;font-size:1.04rem;max-width:780px;line-height:1.7} body:not(.gtl-home) .eyebrow,body:not(.gtl-home) .badge,body:not(.gtl-home) .guide-eyebrow{display:inline-flex!important;align-items:center;min-height:30px;padding:5px 11px!important;border:1px solid rgba(109,91,241,.58)!important;border-radius:999px!important;background:rgba(18,27,79,.70)!important;color:#75d9ff!important;font-weight:850;letter-spacing:.09em;text-transform:uppercase;font-size:.74rem} /* Glass panels and cards */ body:not(.gtl-home) .panel,body:not(.gtl-home) .card,body:not(.gtl-home) .prose-card,body:not(.gtl-home) .tool-workspace,body:not(.gtl-home) .tool-side,body:not(.gtl-home) .guide-card,body:not(.gtl-home) .article-shell,body:not(.gtl-home) .guide-article,body:not(.gtl-home) .page-shell .prose,body:not(.gtl-home) .pricing-card,body:not(.gtl-home) .account-card,body:not(.gtl-home) .tool-panel,body:not(.gtl-home) .content-section{background:linear-gradient(145deg,rgba(10,31,73,.91),rgba(5,15,43,.97))!important;border:1px solid rgba(60,99,207,.43)!important;border-radius:20px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 48px rgba(0,0,0,.19)} body:not(.gtl-home) .tool-card,body:not(.gtl-home) .guide-card,body:not(.gtl-home) .related-card,body:not(.gtl-home) .article-card,body:not(.gtl-home) .category-card{background:linear-gradient(145deg,rgba(11,36,82,.94),rgba(5,18,50,.98))!important;border:1px solid rgba(62,101,214,.45)!important;border-radius:17px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease} body:not(.gtl-home) .tool-card:hover,body:not(.gtl-home) .guide-card:hover,body:not(.gtl-home) .related-card:hover,body:not(.gtl-home) .article-card:hover,body:not(.gtl-home) .category-card:hover{transform:translateY(-5px);border-color:#3f99ff!important;box-shadow:0 19px 44px rgba(0,0,0,.28),0 0 32px rgba(59,112,255,.13)!important} body:not(.gtl-home) .tool-icon,body:not(.gtl-home) .related-card>span,body:not(.gtl-home) .category-card>span{background:linear-gradient(145deg,rgba(50,94,255,.23),rgba(105,49,255,.32))!important;border:1px solid rgba(86,117,232,.27);color:#72dbff!important;box-shadow:0 10px 22px rgba(43,58,181,.16)} /* Buttons / forms */ body:not(.gtl-home) .button,body:not(.gtl-home) button.button,body:not(.gtl-home) input[type=submit],body:not(.gtl-home) .guide-button{border-radius:13px!important;background:linear-gradient(90deg,#06bfff,#7658ff 58%,#dc3dea)!important;border:0!important;color:#fff!important;box-shadow:0 12px 28px rgba(83,69,255,.24)} body:not(.gtl-home) .button.secondary,body:not(.gtl-home) .button.ghost{background:rgba(8,20,54,.8)!important;border:1px solid rgba(73,107,202,.49)!important;box-shadow:none!important} body:not(.gtl-home) input:not([type=checkbox]):not([type=radio]),body:not(.gtl-home) textarea,body:not(.gtl-home) select,body:not(.gtl-home) .inline-search{background:rgba(5,17,48,.88)!important;border:1px solid rgba(66,101,195,.49)!important;color:#eef4ff!important;border-radius:13px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)} body:not(.gtl-home) input::placeholder,body:not(.gtl-home) textarea::placeholder{color:#8191b8} /* Guide hub now behaves like the reference homepage: hero + stats + glowing tabs + cards. */ body:not(.gtl-home) .guides-main{padding:26px 0 70px!important;background:transparent!important} body:not(.gtl-home) .guides-wrap{width:min(1240px,calc(100% - 44px));max-width:none!important} body:not(.gtl-home) .guide-breadcrumbs{margin:2px 0 18px;color:#7f92bd}.guide-breadcrumbs a{color:#5fd6ff!important} body:not(.gtl-home) .guides-hero{max-width:none!important;margin:0 0 18px!important} body:not(.gtl-home) .gtl-guide-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:28px;align-items:end;position:relative;z-index:2} body:not(.gtl-home) .gtl-guide-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px} body:not(.gtl-home) .gtl-guide-hero-stats>div{padding:16px;border-radius:15px;background:linear-gradient(145deg,rgba(8,31,75,.86),rgba(16,16,61,.80));border:1px solid rgba(67,105,220,.40);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} body:not(.gtl-home) .gtl-guide-hero-stats strong{display:block;font-size:1.55rem;color:#fff;line-height:1.1}body:not(.gtl-home) .gtl-guide-hero-stats small{display:block;margin-top:5px;color:#8fa2ca} body:not(.gtl-home) .guide-controls{position:relative;display:grid!important;grid-template-columns:minmax(260px,360px) 1fr;gap:16px!important;align-items:start!important;margin:0 0 24px!important;padding:16px;border-radius:19px;background:linear-gradient(145deg,rgba(7,26,64,.86),rgba(8,14,39,.92));border:1px solid rgba(62,98,205,.42);box-shadow:0 15px 38px rgba(0,0,0,.18)} body:not(.gtl-home) .guide-controls:before{content:"⌕";position:absolute;left:31px;top:29px;color:#71d9ff;z-index:2} body:not(.gtl-home) .guide-controls input{width:100%!important;height:44px;padding-left:42px!important;background:rgba(5,16,45,.86)!important} body:not(.gtl-home) .guide-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center} body:not(.gtl-home) .guide-filters button{min-height:38px;padding:7px 14px!important;border:1px solid rgba(68,102,196,.48)!important;border-radius:999px!important;background:rgba(10,24,58,.86)!important;color:#cdd7f1!important;font-weight:780;white-space:nowrap} body:not(.gtl-home) .guide-filters button:hover{border-color:#4a9cff!important;color:#fff!important} body:not(.gtl-home) .guide-filters button.active{background:linear-gradient(90deg,#347cff,#7958ff 65%,#c945e7)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 9px 23px rgba(94,72,255,.25)} body:not(.gtl-home) .guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px!important} body:not(.gtl-home) .guide-card{position:relative;overflow:hidden;padding:20px!important;min-height:235px;display:flex;flex-direction:column} body:not(.gtl-home) .guide-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;background:linear-gradient(90deg,#0cc8ff,#7557ff,#dd3de9);opacity:.72} body:not(.gtl-home) .gtl-guide-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} body:not(.gtl-home) .gtl-guide-card-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,rgba(0,194,255,.18),rgba(115,73,255,.33));border:1px solid rgba(78,113,223,.34);color:#73ddff} body:not(.gtl-home) .guide-category{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(23,37,83,.84)!important;border:1px solid rgba(79,105,191,.29);color:#8be2ff!important;font-size:.72rem;font-weight:850} body:not(.gtl-home) .guide-card h2,body:not(.gtl-home) .guide-card h3{margin:7px 0 9px!important;font-size:1.08rem;color:#fff;line-height:1.32} body:not(.gtl-home) .guide-card p{color:#aebce0!important;font-size:.91rem;line-height:1.55;margin:0 0 12px} body:not(.gtl-home) .guide-meta{margin-top:auto!important;color:#8295bf!important}.guide-read{color:#59d5ff!important;font-weight:850} /* Guide articles */ body:not(.gtl-home) .article-wrap{max-width:1040px!important} body:not(.gtl-home) .guide-article{padding:clamp(26px,5vw,58px)!important;overflow:hidden;position:relative} body:not(.gtl-home) .guide-article:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#06c9ff,#7357ff,#df3cec)} body:not(.gtl-home) .article-heading h1{font-size:clamp(2.7rem,6vw,4.8rem)!important;color:#fff!important}.article-intro{color:#bac6e4!important} body:not(.gtl-home) .article-toc{background:linear-gradient(145deg,rgba(8,31,72,.85),rgba(7,17,48,.94))!important;border-color:rgba(66,101,202,.42)!important}.article-toc a{color:#69d8ff!important} body:not(.gtl-home) .article-content{color:#c4cee7}.article-content h2,.article-content h3{color:#fff!important}.article-content a{color:#5cd5ff!important} body:not(.gtl-home) .article-cta{background:linear-gradient(110deg,rgba(42,28,119,.82),rgba(6,69,116,.72))!important;border:1px solid rgba(92,91,229,.46);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} body:not(.gtl-home) .article-pagination>a{background:rgba(8,25,60,.84)!important;border-color:rgba(61,99,196,.42)!important}.article-pagination>a:hover{border-color:#4a9cff!important} /* Category and tool listing pages */ body:not(.gtl-home) .section{padding:48px 0!important}.section.alt{background:rgba(4,13,35,.58)!important;border-block:1px solid rgba(54,92,190,.18)} body:not(.gtl-home) .inline-search.wide{max-width:520px;margin-bottom:22px;padding:12px 15px!important;box-shadow:0 12px 28px rgba(0,0,0,.15)} body:not(.gtl-home) .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px!important} body:not(.gtl-home) .tool-card{min-height:225px!important;padding:20px!important;overflow:hidden} body:not(.gtl-home) .tool-card:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#08c9ff,#7358ff,#dd3ee9);opacity:.56} body:not(.gtl-home) .tool-category{background:rgba(21,37,79,.84)!important;color:#97a9d0!important} body:not(.gtl-home) .tool-action,body:not(.gtl-home) .open-link{color:#5bd6ff!important} /* Tool workspace pages */ body:not(.gtl-home).tool-view .tool-container{max-width:1120px;padding-top:28px!important;padding-bottom:52px!important} body:not(.gtl-home) .tool-panel{position:relative;overflow:hidden;padding:28px!important}.tool-panel:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#08caff,#7358ff,#dc3eeb)} body:not(.gtl-home) .tool-panel h1{color:#fff!important;letter-spacing:-.04em}.tool-panel .notice{color:#aebce0!important} body:not(.gtl-home) .content-section{padding:24px!important;margin-top:18px} body:not(.gtl-home) .steps-grid li{background:rgba(8,24,58,.78)!important;border-color:rgba(60,96,190,.34)!important} body:not(.gtl-home) details{background:rgba(8,22,56,.78)!important;border:1px solid rgba(61,99,195,.38)!important;border-radius:14px!important}body:not(.gtl-home) details[open]{border-color:rgba(112,85,255,.7)!important;box-shadow:0 14px 35px rgba(0,0,0,.16)} /* Static content pages */ body:not(.gtl-home) .page-shell{padding-top:36px;padding-bottom:54px}body:not(.gtl-home) .page-shell>.prose{padding:clamp(25px,4vw,46px)!important;max-width:1080px;margin-inline:auto;color:#c3cee8} body:not(.gtl-home) .prose h2,body:not(.gtl-home) .prose h3,body:not(.gtl-home) .content-rich h2,body:not(.gtl-home) .content-rich h3{color:#fff!important}.prose a,.content-rich a{color:#57d4ff!important} body:not(.gtl-home) table{background:rgba(7,18,49,.72);border-radius:14px;overflow:hidden}body:not(.gtl-home) th{background:rgba(20,37,82,.88)!important;color:#fff}body:not(.gtl-home) td{border-color:rgba(70,96,165,.25)!important} body:not(.gtl-home) .breadcrumbs{color:#8293bb}body:not(.gtl-home) .breadcrumbs a{color:#57cfff} /* Footer mirrors homepage density. */ body:not(.gtl-home) .site-footer{background:#020713!important;border-top:1px solid rgba(44,86,188,.42)!important;padding:20px 0 10px!important}.footer-grid{gap:30px!important}.footer-newsletter{background:linear-gradient(90deg,rgba(7,27,67,.88),rgba(28,19,72,.78))!important;border:1px solid rgba(62,99,207,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.qc-footer-trust .trust-card{background:rgba(7,23,58,.72)!important;border-color:rgba(58,94,190,.34)!important}.footer-bottom{border-color:rgba(49,85,176,.32)!important} @media(max-width:1250px){body:not(.gtl-home) .main-nav{gap:12px}body:not(.gtl-home) .main-nav .gtl-nav-blog{display:none}body:not(.gtl-home) .gtl-get-started{padding-inline:11px!important}.enterprise-search{width:min(390px,30vw)!important}} @media(max-width:1120px){body:not(.gtl-home) .main-nav .gtl-nav-api,body:not(.gtl-home) .main-nav .gtl-nav-pricing,body:not(.gtl-home) .nav-premium{display:none}.enterprise-search{width:min(430px,38vw)!important}.gtl-guide-hero-grid{grid-template-columns:1fr!important}.gtl-guide-hero-stats{grid-template-columns:repeat(4,1fr)!important}} @media(max-width:920px){body:not(.gtl-home) .container,body:not(.gtl-home) .guides-wrap{width:min(100% - 30px,1240px)}body:not(.gtl-home) .guide-grid,body:not(.gtl-home) .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}body:not(.gtl-home) .guide-controls{grid-template-columns:1fr!important}.enterprise-search{width:auto!important;flex:1}.main-nav{background:rgba(4,12,35,.98)!important;border-color:rgba(63,99,197,.46)!important}} @media(max-width:640px){body:not(.gtl-home) .page-hero,body:not(.gtl-home) .guides-hero{padding:28px 22px!important;border-radius:20px!important;margin-top:20px!important}body:not(.gtl-home) .guide-grid,body:not(.gtl-home) .tool-grid{grid-template-columns:1fr!important}.gtl-guide-hero-stats{grid-template-columns:1fr 1fr!important}.guide-controls{padding:12px!important}.guide-filters{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:4px}.guide-filters button{flex:0 0 auto}.tool-layout{grid-template-columns:1fr!important}} @media(prefers-reduced-motion:reduce){body:not(.gtl-home) .tool-card:hover,body:not(.gtl-home) .guide-card:hover,body:not(.gtl-home) .related-card:hover{transform:none}} /* V4 parity pass: bring public internal pages much closer to the approved homepage shell. */ body:not(.gtl-home):not(.admin-shell){ background: radial-gradient(820px 480px at 4% 2%,rgba(0,174,255,.18),transparent 70%), radial-gradient(980px 560px at 88% 4%,rgba(94,45,255,.24),transparent 72%), radial-gradient(720px 460px at 48% 44%,rgba(217,42,236,.055),transparent 75%), #030714!important; } body:not(.gtl-home):not(.admin-shell) .container{max-width:1400px;width:min(1400px,calc(100% - 64px))} body:not(.gtl-home):not(.admin-shell) .site-header{background:rgba(2,7,24,.96)!important;border-bottom:1px solid rgba(51,95,195,.30)!important;box-shadow:0 10px 35px rgba(0,0,0,.22)} body:not(.gtl-home):not(.admin-shell) .nav-wrap{height:64px;min-height:64px;gap:14px;overflow:visible} body:not(.gtl-home):not(.admin-shell) .brand{flex:0 0 176px;min-width:176px;overflow:visible} body:not(.gtl-home):not(.admin-shell) .brand-mark{width:42px;height:42px;background:transparent!important;box-shadow:none!important;overflow:visible} body:not(.gtl-home):not(.admin-shell) .brand-logo-mark{width:42px;height:42px} body:not(.gtl-home):not(.admin-shell) .brand-name{font-size:1.18rem;font-weight:900;overflow:visible} body:not(.gtl-home):not(.admin-shell) .enterprise-search{flex:1 1 360px;width:auto;max-width:460px;min-width:230px;height:40px;margin:0} body:not(.gtl-home):not(.admin-shell) .main-nav{flex:0 0 auto;margin-left:auto;gap:18px} body:not(.gtl-home):not(.admin-shell) .main-nav>a,body:not(.gtl-home):not(.admin-shell) .mega-trigger>a{font-size:.86rem} body:not(.gtl-home):not(.admin-shell) .gtl-get-started{min-height:38px!important;padding-inline:16px!important} /* Internal hero = the same luminous stage language as the homepage, not a flat content banner. */ body:not(.gtl-home):not(.admin-shell) .page-hero, body:not(.gtl-home):not(.admin-shell) .guides-hero{ background: radial-gradient(460px 260px at 82% 24%,rgba(0,199,255,.20),transparent 72%), radial-gradient(520px 310px at 66% 70%,rgba(120,57,255,.24),transparent 72%), linear-gradient(120deg,rgba(5,25,67,.97),rgba(7,13,43,.97) 50%,rgba(27,11,79,.92))!important; border-color:rgba(65,103,219,.58)!important; box-shadow:0 26px 80px rgba(0,0,0,.30),0 0 60px rgba(74,66,255,.09),inset 0 1px 0 rgba(255,255,255,.06)!important; } body:not(.gtl-home):not(.admin-shell) .page-hero h1, body:not(.gtl-home):not(.admin-shell) .guides-hero h1{ background:linear-gradient(90deg,#fff 0%,#f6f8ff 45%,#8ee8ff 72%,#b88aff 100%)!important; -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important; } body:not(.gtl-home):not(.admin-shell) .guides-hero:after, body:not(.gtl-home):not(.admin-shell) .page-hero:after{box-shadow:0 0 80px rgba(219,55,238,.30)} /* Reference-style control rail. */ body:not(.gtl-home):not(.admin-shell) .guide-controls, body:not(.gtl-home):not(.admin-shell) .filter-row{ background:linear-gradient(90deg,rgba(5,31,78,.88),rgba(23,24,84,.90),rgba(7,35,74,.88)); border:1px solid rgba(61,101,215,.54);box-shadow:0 18px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04) } body:not(.gtl-home):not(.admin-shell) .guide-filters button, body:not(.gtl-home):not(.admin-shell) .filter{background:linear-gradient(145deg,rgba(12,36,82,.94),rgba(6,18,50,.97))!important} /* Cards gain the same category colour energy and 3-D glow used on the homepage. */ body:not(.gtl-home):not(.admin-shell) .guide-card, body:not(.gtl-home):not(.admin-shell) .tool-card, body:not(.gtl-home):not(.admin-shell) .category-card{ background:radial-gradient(240px 140px at 100% 0,rgba(56,100,255,.10),transparent 72%),linear-gradient(145deg,rgba(10,35,82,.96),rgba(5,17,49,.99))!important; border-color:rgba(61,101,214,.55)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 32px rgba(0,0,0,.16)!important } body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+1):before,body:not(.gtl-home):not(.admin-shell) .tool-card:nth-child(6n+1):before{background:linear-gradient(90deg,#ff365f,#a93cff)!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+2):before,body:not(.gtl-home):not(.admin-shell) .tool-card:nth-child(6n+2):before{background:linear-gradient(90deg,#16c8ff,#2966ff)!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+3):before,body:not(.gtl-home):not(.admin-shell) .tool-card:nth-child(6n+3):before{background:linear-gradient(90deg,#9c4cff,#ed42e8)!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+4):before,body:not(.gtl-home):not(.admin-shell) .tool-card:nth-child(6n+4):before{background:linear-gradient(90deg,#18dca0,#00a8ff)!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+5):before,body:not(.gtl-home):not(.admin-shell) .tool-card:nth-child(6n+5):before{background:linear-gradient(90deg,#ff9a37,#ff3d8d)!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n):before,body:not(.gtl-home):not(.admin-shell) .tool-card:nth-child(6n):before{background:linear-gradient(90deg,#22c7e6,#7358ff)!important} body:not(.gtl-home):not(.admin-shell) .gtl-guide-card-icon{width:46px;height:46px;box-shadow:0 10px 26px rgba(0,146,255,.18),inset 0 1px 0 rgba(255,255,255,.10)} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+1) .gtl-guide-card-icon{background:linear-gradient(145deg,#ff365f,#9f1ad9)!important;color:#fff!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+2) .gtl-guide-card-icon{background:linear-gradient(145deg,#20c5ff,#285eff)!important;color:#fff!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+3) .gtl-guide-card-icon{background:linear-gradient(145deg,#a34cff,#6733eb)!important;color:#fff!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+4) .gtl-guide-card-icon{background:linear-gradient(145deg,#1ddca2,#078e7c)!important;color:#fff!important} body:not(.gtl-home):not(.admin-shell) .guide-card:nth-child(6n+5) .gtl-guide-card-icon{background:linear-gradient(145deg,#ff9b38,#ff5d2e)!important;color:#fff!important} body:not(.gtl-home):not(.admin-shell) .guide-card:hover,body:not(.gtl-home):not(.admin-shell) .tool-card:hover{transform:translateY(-5px) scale(1.008);box-shadow:0 22px 52px rgba(0,0,0,.30),0 0 34px rgba(45,126,255,.15)!important} /* Footer/header density follows the approved homepage at every public route. */ body:not(.gtl-home):not(.admin-shell) .site-footer{background:#020713!important;border-top:1px solid rgba(44,86,188,.42)!important} @media(max-width:1360px){body:not(.gtl-home):not(.admin-shell) .main-nav .gtl-nav-blog{display:none}.main-nav{gap:13px!important}} @media(max-width:1220px){body:not(.gtl-home):not(.admin-shell) .main-nav .gtl-nav-api,body:not(.gtl-home):not(.admin-shell) .main-nav .gtl-nav-pricing,body:not(.gtl-home):not(.admin-shell) .nav-premium{display:none}.enterprise-search{max-width:420px!important}} @media(max-width:980px){body:not(.gtl-home):not(.admin-shell) .container{width:min(100% - 30px,1400px)}body:not(.gtl-home):not(.admin-shell) .brand{flex-basis:auto;min-width:auto}body:not(.gtl-home):not(.admin-shell) .enterprise-search{display:none}} /* V5 internal tool/category parity: compact, colorful cards like the approved homepage. */ body:not(.gtl-home):not(.admin-shell) .page-hero{ margin:24px auto 18px!important;padding:30px 34px!important;min-height:0!important; border-radius:24px!important;position:relative;overflow:hidden; } body:not(.gtl-home):not(.admin-shell) .page-hero .container{width:100%!important;max-width:none!important;margin:0!important} body:not(.gtl-home):not(.admin-shell) .page-hero h1{font-size:clamp(2.25rem,4.5vw,4.6rem)!important;line-height:.98!important;max-width:820px;margin:.3rem 0 .8rem!important} body:not(.gtl-home):not(.admin-shell) .page-hero p{max-width:760px;color:#b9c7e9!important;font-size:1.02rem!important} body:not(.gtl-home):not(.admin-shell) .page-hero .eyebrow{color:#67ddff!important;letter-spacing:.14em!important} body:not(.gtl-home):not(.admin-shell) .section{padding:18px 0 34px!important} body:not(.gtl-home):not(.admin-shell) .inline-search.wide{max-width:none!important;margin:0 0 18px!important;padding:5px 7px 5px 14px!important;min-height:50px;background:linear-gradient(90deg,rgba(5,31,78,.94),rgba(21,22,82,.94))!important;border:1px solid rgba(64,113,230,.58)!important;border-radius:15px!important;box-shadow:0 14px 34px rgba(0,0,0,.2)} body:not(.gtl-home):not(.admin-shell) .inline-search input{background:transparent!important;border:0!important;box-shadow:none!important} body:not(.gtl-home):not(.admin-shell) .tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important} body:not(.gtl-home):not(.admin-shell) .tool-card{min-height:174px!important;padding:16px!important;border-radius:16px!important;display:flex!important;flex-direction:column!important;gap:8px!important;isolation:isolate} body:not(.gtl-home):not(.admin-shell) .tool-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-55px;bottom:-60px;background:var(--card-glow,rgba(36,128,255,.22));filter:blur(24px);z-index:-1;pointer-events:none} body:not(.gtl-home):not(.admin-shell) .tool-card-top{display:flex!important;align-items:center!important;gap:8px!important;margin:0 0 3px!important} body:not(.gtl-home):not(.admin-shell) .tool-icon{width:44px!important;height:44px!important;min-width:44px!important;border-radius:12px!important;display:grid!important;place-items:center!important;color:#fff!important;background:linear-gradient(145deg,var(--card-a,#16c8ff),var(--card-b,#2f5eff))!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:0 10px 25px var(--card-shadow,rgba(20,125,255,.25)),inset 0 1px 0 rgba(255,255,255,.18)!important} body:not(.gtl-home):not(.admin-shell) .tool-icon svg{width:23px!important;height:23px!important} body:not(.gtl-home):not(.admin-shell) .tool-category{margin-left:auto!important;padding:5px 9px!important;border-radius:999px!important;background:rgba(28,59,126,.48)!important;border:1px solid rgba(91,129,220,.25)!important;color:#a9c9ff!important;font-size:.68rem!important;font-weight:800!important} body:not(.gtl-home):not(.admin-shell) .tool-card h3{font-size:1rem!important;line-height:1.25!important;margin:4px 0 0!important;color:#fff!important} body:not(.gtl-home):not(.admin-shell) .tool-card p{font-size:.84rem!important;line-height:1.48!important;margin:0!important;color:#aebce0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body:not(.gtl-home):not(.admin-shell) .tool-action{margin-top:auto!important;font-size:.82rem!important;color:#55d9ff!important;font-weight:850!important} body:not(.gtl-home):not(.admin-shell) .tool-card:hover .tool-icon{transform:translateY(-2px) scale(1.04)} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-pdf{--card-a:#ff365f;--card-b:#d81f63;--card-glow:rgba(255,54,95,.24);--card-shadow:rgba(255,54,95,.20)} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-image{--card-a:#20c8ff;--card-b:#2862ff;--card-glow:rgba(32,173,255,.24);--card-shadow:rgba(32,173,255,.20)} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-developer,body:not(.gtl-home):not(.admin-shell) .tool-card-cat-json,body:not(.gtl-home):not(.admin-shell) .tool-card-cat-html,body:not(.gtl-home):not(.admin-shell) .tool-card-cat-css,body:not(.gtl-home):not(.admin-shell) .tool-card-cat-javascript{--card-a:#a54cff;--card-b:#6233ee;--card-glow:rgba(153,68,255,.24);--card-shadow:rgba(153,68,255,.20)} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-text{--card-a:#21dca2;--card-b:#079b82;--card-glow:rgba(24,220,160,.22);--card-shadow:rgba(24,220,160,.18)} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-numbers,body:not(.gtl-home):not(.admin-shell) .tool-card-cat-finance{--card-a:#ff9b38;--card-b:#ff5d2e;--card-glow:rgba(255,139,55,.22);--card-shadow:rgba(255,139,55,.18)} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-ai{--card-a:#ed43e8;--card-b:#8c3dff;--card-glow:rgba(222,61,234,.24);--card-shadow:rgba(222,61,234,.20)} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-seo,body:not(.gtl-home):not(.admin-shell) .tool-card-cat-security{--card-a:#21d9e6;--card-b:#087edc;--card-glow:rgba(31,211,226,.22);--card-shadow:rgba(31,211,226,.18)} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-utility{--card-a:#6e6dff;--card-b:#3b55e8;--card-glow:rgba(101,99,255,.22);--card-shadow:rgba(101,99,255,.18)} /* Homepage-like top rail continuity */ body:not(.gtl-home):not(.admin-shell) .site-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#14c8ff 28%,#7658ff 58%,#e33de7 78%,transparent);opacity:.55} @media(max-width:1180px){body:not(.gtl-home):not(.admin-shell) .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(max-width:820px){body:not(.gtl-home):not(.admin-shell) .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:560px){body:not(.gtl-home):not(.admin-shell) .tool-grid{grid-template-columns:1fr!important}body:not(.gtl-home):not(.admin-shell) .page-hero{padding:24px 20px!important}} /* V6 — homepage visual parity + stable Tools mega-menu */ @media (min-width:1051px){ body:not(.admin-shell) .mega-trigger{position:relative;padding-bottom:18px;margin-bottom:-18px} body:not(.admin-shell) .mega-trigger:after{content:"";position:absolute;left:-18px;right:-18px;top:100%;height:26px;background:transparent} body:not(.admin-shell) .mega-menu{top:calc(100% + 14px)!important;display:grid!important;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px)!important;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;background:linear-gradient(145deg,rgba(7,22,58,.98),rgba(5,12,38,.99))!important;border:1px solid rgba(56,116,230,.55)!important;box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 36px rgba(71,72,255,.14)!important} body:not(.admin-shell) .mega-trigger:hover .mega-menu,body:not(.admin-shell) .mega-trigger:focus-within .mega-menu,body:not(.admin-shell) .mega-menu:hover,body:not(.admin-shell) .mega-menu.open{visibility:visible;opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)!important} } body:not(.gtl-home):not(.admin-shell){background:radial-gradient(900px 520px at 8% 8%,rgba(0,145,255,.12),transparent 70%),radial-gradient(850px 520px at 92% 12%,rgba(99,41,255,.15),transparent 72%),#030714!important} body:not(.gtl-home):not(.admin-shell) .site-header{background:rgba(2,7,24,.97)!important;border-bottom:1px solid rgba(40,117,235,.38)!important;box-shadow:0 10px 34px rgba(0,0,0,.22)!important} body:not(.gtl-home):not(.admin-shell) .container,body:not(.gtl-home):not(.admin-shell) .guides-wrap{max-width:1400px!important} /* Match the homepage's compact category-card language on internal tool libraries. */ body:not(.gtl-home):not(.admin-shell) .tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important} body:not(.gtl-home):not(.admin-shell) .tool-card{min-height:156px!important;padding:15px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(12,36,82,.94),rgba(6,18,50,.97))!important;border:1px solid rgba(61,100,210,.48)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;overflow:hidden} body:not(.gtl-home):not(.admin-shell) .tool-card:before{height:2px!important;background:linear-gradient(90deg,#16c8ff,#6a59ff,#e63ce9)!important;opacity:.9!important} body:not(.gtl-home):not(.admin-shell) .tool-card:hover{transform:translateY(-4px)!important;border-color:#3d8dff!important;box-shadow:0 16px 35px rgba(0,0,0,.25),0 0 28px rgba(50,104,255,.14)!important} body:not(.gtl-home):not(.admin-shell) .tool-card .tool-icon{width:44px!important;height:44px!important;border-radius:12px!important;background:linear-gradient(145deg,#ff365f,#bd164d)!important;box-shadow:0 10px 24px rgba(255,39,95,.20)!important} body:not(.gtl-home):not(.admin-shell) .tool-card-cat-image .tool-icon{background:linear-gradient(145deg,#21bfff,#1f5eff)!important}body:not(.gtl-home):not(.admin-shell) .tool-card-cat-developer .tool-icon{background:linear-gradient(145deg,#9c4cff,#5a32e7)!important}body:not(.gtl-home):not(.admin-shell) .tool-card-cat-text .tool-icon{background:linear-gradient(145deg,#19dca1,#07917b)!important}body:not(.gtl-home):not(.admin-shell) .tool-card-cat-ai .tool-icon{background:linear-gradient(145deg,#f452f0,#9c32eb)!important}body:not(.gtl-home):not(.admin-shell) .tool-card-cat-seo .tool-icon{background:linear-gradient(145deg,#22c7e6,#0b77d5)!important}body:not(.gtl-home):not(.admin-shell) .tool-card-cat-utility .tool-icon{background:linear-gradient(145deg,#746cff,#3e5dd8)!important} body:not(.gtl-home):not(.admin-shell) .tool-card h3{font-size:.98rem!important;margin:13px 0 7px!important}body:not(.gtl-home):not(.admin-shell) .tool-card p{font-size:.78rem!important;line-height:1.45!important;margin:0 0 11px!important;color:#aebbd8!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}body:not(.gtl-home):not(.admin-shell) .tool-action{font-size:.78rem!important;color:#32caff!important} /* Guide cards now use the same compact homepage card geometry. */ body.gtl-guides-index .guide-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}body.gtl-guides-index .guide-card{min-height:190px!important;padding:15px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(12,36,82,.94),rgba(6,18,50,.97))!important;border:1px solid rgba(61,100,210,.48)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important}body.gtl-guides-index .guide-card:hover{transform:translateY(-4px)!important;border-color:#3d8dff!important;box-shadow:0 16px 35px rgba(0,0,0,.25),0 0 28px rgba(50,104,255,.14)!important}body.gtl-guides-index .gtl-guide-card-icon{width:42px!important;height:42px!important;border-radius:12px!important;background:linear-gradient(145deg,#ff365f,#bd164d)!important}body.gtl-guides-index .guide-card:nth-child(4n+2) .gtl-guide-card-icon{background:linear-gradient(145deg,#21bfff,#1f5eff)!important}body.gtl-guides-index .guide-card:nth-child(4n+3) .gtl-guide-card-icon{background:linear-gradient(145deg,#9c4cff,#5a32e7)!important}body.gtl-guides-index .guide-card:nth-child(4n) .gtl-guide-card-icon{background:linear-gradient(145deg,#19dca1,#07917b)!important}body.gtl-guides-index .guide-card h2{font-size:.96rem!important;line-height:1.28!important}body.gtl-guides-index .guide-card p{font-size:.76rem!important;line-height:1.45!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Internal category/filter controls echo the eight colorful homepage category tiles. */ body:not(.gtl-home):not(.admin-shell) .guide-controls,body:not(.gtl-home):not(.admin-shell) .filter-bar,body:not(.gtl-home):not(.admin-shell) .category-filters{background:linear-gradient(145deg,rgba(9,33,78,.94),rgba(6,18,50,.96))!important;border:1px solid rgba(54,111,221,.5)!important;border-radius:16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important} body:not(.gtl-home):not(.admin-shell) .guide-filters button,body:not(.gtl-home):not(.admin-shell) .filter-pill,body:not(.gtl-home):not(.admin-shell) .category-pill{min-height:38px!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(17,43,91,.96),rgba(9,25,61,.98))!important;border:1px solid rgba(65,112,213,.48)!important;color:#dbe5ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important} body:not(.gtl-home):not(.admin-shell) .guide-filters button:hover,body:not(.gtl-home):not(.admin-shell) .filter-pill:hover,body:not(.gtl-home):not(.admin-shell) .category-pill:hover{border-color:#29c8ff!important;transform:translateY(-2px)}body:not(.gtl-home):not(.admin-shell) .guide-filters button.active,body:not(.gtl-home):not(.admin-shell) .filter-pill.active,body:not(.gtl-home):not(.admin-shell) .category-pill.active{background:linear-gradient(90deg,#05bfff,#7358ff 58%,#d83dea)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 9px 24px rgba(88,71,255,.26)!important} @media(max-width:1150px){body:not(.gtl-home):not(.admin-shell) .tool-grid,body.gtl-guides-index .guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(max-width:850px){body:not(.gtl-home):not(.admin-shell) .tool-grid,body.gtl-guides-index .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:560px){body:not(.gtl-home):not(.admin-shell) .tool-grid,body.gtl-guides-index .guide-grid{grid-template-columns:1fr!important}} /* assets/css/gettoolslab-parity-v7.css */ /* Get Tools Lab V7 — structural visual parity with the approved homepage. */ body:not(.gtl-home):not(.admin-shell){background:#030714!important} body:not(.gtl-home):not(.admin-shell) .site-header{position:sticky!important;top:0!important;z-index:1000!important} body:not(.gtl-home):not(.admin-shell) .gtl-internal-main{overflow:hidden;background:radial-gradient(820px 440px at 7% 8%,rgba(0,144,255,.13),transparent 72%),radial-gradient(900px 520px at 90% 4%,rgba(91,42,255,.18),transparent 72%),#030714;min-height:65vh;padding:24px 0 58px} body:not(.gtl-home):not(.admin-shell) .gtl-internal-main>.container{max-width:1400px!important} /* Internal hero borrows the actual homepage hero proportions instead of generic page-card styling. */ .gtl-internal-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:center;gap:36px;padding:34px 38px;margin:0 0 18px;border:1px solid rgba(61,101,215,.58);border-radius:22px;background:radial-gradient(520px 280px at 75% 25%,rgba(106,39,255,.22),transparent 72%),linear-gradient(135deg,rgba(5,31,82,.95),rgba(20,18,79,.94) 62%,rgba(21,8,69,.92));box-shadow:0 20px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden} .gtl-internal-hero:before{content:"";position:absolute;width:430px;height:430px;right:-150px;top:-230px;border-radius:50%;background:rgba(0,163,255,.12);box-shadow:0 0 100px rgba(0,190,255,.14);pointer-events:none} .gtl-internal-hero-copy,.gtl-internal-stat-grid{position:relative;z-index:2} .gtl-internal-hero h1{font-size:clamp(2.7rem,4.7vw,5.15rem);line-height:.97;letter-spacing:-.06em;margin:12px 0 12px;color:#fff} .gtl-internal-hero h1 span{background:linear-gradient(90deg,#1fc9ff 0%,#3e8cff 25%,#7659ff 55%,#ef43e5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .gtl-internal-hero p{max-width:760px;margin:0;color:#bdc8e5;font-size:1rem;line-height:1.58} .gtl-internal-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .gtl-internal-stat-grid>div{min-height:82px;padding:14px 16px;border-radius:15px;border:1px solid rgba(65,105,215,.48);background:linear-gradient(145deg,rgba(13,40,91,.9),rgba(7,20,55,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .gtl-internal-stat-grid strong{display:block;color:#fff;font-size:1.45rem;line-height:1.08}.gtl-internal-stat-grid small{display:block;margin-top:6px;color:#9fb0d4;font-size:.74rem} /* Use the exact homepage category component on internal pages. */ .gtl-internal-category-section{margin:14px 0 22px}.gtl-internal-category-section .gtl-section-title-row{margin-bottom:10px} .gtl-internal-category-grid .gtl-category-card.active{border-color:#38c6ff!important;box-shadow:0 15px 38px rgba(0,0,0,.25),0 0 28px rgba(47,118,255,.18);transform:translateY(-2px)} .gtl-internal-category-grid .gtl-category-card.active:after{content:"✓";position:absolute;right:8px;top:7px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#18cf9b;color:#fff;font-size:.64rem;font-weight:900} .gtl-internal-category-grid .gtl-category-card{position:relative} .gtl-editorial-panel,.gtl-discovery-panel,.gtl-tool-library-section,.gtl-guide-library-section{margin:16px 0 22px;padding:20px;border:1px solid rgba(61,101,215,.45);border-radius:18px;background:linear-gradient(145deg,rgba(8,29,68,.88),rgba(5,16,46,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)} .gtl-editorial-panel{color:#bec9e5;line-height:1.72}.gtl-editorial-panel h2,.gtl-editorial-panel h3{color:#fff} .gtl-tool-library-heading,.gtl-guide-library-section>.gtl-section-title-row{margin-bottom:12px}.gtl-library-count{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:999px;border:1px solid rgba(74,112,212,.48);background:rgba(13,34,80,.82);color:#8cdfff;font-size:.76rem;font-weight:800} .gtl-library-toolbar{margin-bottom:12px}.gtl-library-toolbar .inline-search{min-height:46px!important;margin:0!important} /* Tool cards: same compact horizontal geometry as homepage category cards. */ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important} body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid .tool-card{min-height:132px!important;padding:14px!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) 28px!important;grid-template-rows:auto auto 1fr!important;column-gap:12px!important;row-gap:3px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(12,36,82,.93),rgba(6,18,50,.97))!important;border:1px solid rgba(61,100,210,.48)!important;overflow:hidden} .gtl-reference-tool-grid .tool-card:before{content:"";position:absolute!important;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--card-a,#17c8ff),var(--card-b,#6c58ff),#e13fea)!important;opacity:.95} .gtl-reference-tool-grid .tool-card-top{grid-column:1;grid-row:1/4;display:block!important;margin:0!important}.gtl-reference-tool-grid .tool-icon{width:46px!important;height:46px!important;border-radius:12px!important}.gtl-reference-tool-grid .tool-category{position:absolute;right:12px;top:12px;margin:0!important;font-size:.64rem!important;padding:4px 8px!important}.gtl-reference-tool-grid .tool-status-badge{position:absolute;right:12px;bottom:12px;font-size:.61rem} .gtl-reference-tool-grid .tool-card h3{grid-column:2;grid-row:1;margin:0!important;padding-right:45px;font-size:.92rem!important;line-height:1.2!important;align-self:end}.gtl-reference-tool-grid .tool-card p{grid-column:2;grid-row:2;margin:3px 0 0!important;font-size:.72rem!important;line-height:1.38!important;-webkit-line-clamp:2!important}.gtl-reference-tool-grid .tool-action{grid-column:2;grid-row:3;align-self:end;margin-top:7px!important;font-size:.72rem!important}.gtl-reference-tool-grid .tool-action b{display:none}.gtl-reference-tool-grid .tool-card:after{content:"→"!important;position:static!important;grid-column:3;grid-row:1/4;place-self:center!important;width:30px!important;height:30px!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:rgba(80,71,211,.20)!important;color:#74ddff!important;filter:none!important;font-size:1rem!important;z-index:2!important} /* Guide library: compact cards with homepage latest-guide language. */ .gtl-guide-library-section{padding:18px}.gtl-guide-controls{display:grid!important;grid-template-columns:minmax(260px,420px) auto!important;gap:12px!important;align-items:start!important;padding:0!important;margin:0 0 14px!important;border:0!important;background:transparent!important;box-shadow:none!important}.gtl-guide-controls>input{min-height:46px!important}.gtl-more-filters{position:relative}.gtl-more-filters>summary{list-style:none;display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:13px;border:1px solid rgba(65,108,214,.48);background:linear-gradient(145deg,rgba(13,39,89,.94),rgba(7,21,55,.96));color:#dce7ff;font-size:.82rem;font-weight:800;cursor:pointer}.gtl-more-filters>summary::-webkit-details-marker{display:none}.gtl-more-filters>summary:after{content:"⌄";margin-left:8px;color:#55d8ff}.gtl-more-filters[open] .guide-filters{display:flex!important}.gtl-more-filters .guide-filters{display:none!important;position:absolute;z-index:25;right:0;top:52px;width:min(700px,80vw);padding:12px;border:1px solid rgba(62,105,213,.55);border-radius:15px;background:rgba(4,15,43,.98);box-shadow:0 20px 55px rgba(0,0,0,.38);flex-wrap:wrap;gap:7px} body.gtl-guides-index .gtl-reference-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:11px!important} body.gtl-guides-index .gtl-reference-guide-grid .guide-card{min-height:154px!important;padding:13px!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr auto!important;column-gap:11px!important;row-gap:3px!important;border-radius:13px!important;background:linear-gradient(145deg,rgba(11,28,66,.94),rgba(6,17,44,.97))!important;border:1px solid rgba(60,97,192,.42)!important} .gtl-reference-guide-grid .gtl-guide-card-head{grid-column:1;grid-row:1/5;display:block!important}.gtl-reference-guide-grid .gtl-guide-card-icon{width:42px!important;height:42px!important;border-radius:11px!important}.gtl-reference-guide-grid .guide-category{position:absolute;right:11px;top:11px;font-size:.62rem!important;padding:3px 7px!important}.gtl-reference-guide-grid .guide-card h2{grid-column:2;grid-row:1;margin:0 42px 0 0!important;font-size:.78rem!important;line-height:1.25!important}.gtl-reference-guide-grid .guide-card p{grid-column:2;grid-row:2;margin:4px 0!important;font-size:.67rem!important;line-height:1.35!important;-webkit-line-clamp:2!important}.gtl-reference-guide-grid .guide-meta{grid-column:2;grid-row:3;align-self:end;margin-top:5px!important;font-size:.61rem!important}.gtl-reference-guide-grid .guide-read{grid-column:2;grid-row:4;font-size:.67rem!important;margin-top:4px;color:#45ccff!important} /* Discovery now looks like a real homepage-level destination. */ .gtl-discovery-panel{padding:20px}.gtl-discovery-panel .discovery-search{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;max-width:none;padding:7px;border-radius:15px;border:1px solid rgba(64,112,224,.54);background:linear-gradient(90deg,rgba(6,31,76,.92),rgba(22,22,82,.90));box-shadow:0 14px 34px rgba(0,0,0,.18)}.gtl-discovery-panel .discovery-search>span{padding-left:9px;color:#62dcff}.gtl-discovery-panel .discovery-search input{min-height:45px!important;border:0!important;background:transparent!important;box-shadow:none!important}.gtl-discovery-panel .discovery-search .gtl-btn{min-height:43px!important;border-radius:12px!important}.gtl-discovery-panel .discovery-filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:14px 0 4px}.gtl-discovery-panel .discovery-filters select,.gtl-discovery-panel .discovery-filters>input{min-height:38px;padding:0 11px;border-radius:10px}.gtl-discovery-panel .discovery-filters label{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 11px;border-radius:10px;border:1px solid rgba(64,105,207,.38);background:rgba(10,30,71,.70);color:#b9c7e6;font-size:.75rem} .discovery-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.discovery-item{min-height:94px;display:grid;grid-template-columns:42px minmax(0,1fr) 28px;gap:11px;align-items:center;padding:12px;border-radius:13px;border:1px solid rgba(60,99,202,.48);background:linear-gradient(145deg,rgba(11,35,81,.94),rgba(5,17,49,.98));text-decoration:none}.discovery-item:hover{transform:translateY(-3px);border-color:#37bffc;box-shadow:0 14px 32px rgba(0,0,0,.23),0 0 24px rgba(53,119,255,.12)}.discovery-item-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#16c7ff,#6d50ff);color:#fff}.discovery-item-copy{min-width:0;display:flex;flex-direction:column}.discovery-item-copy small{font-size:.61rem;color:#79d9ff;text-transform:uppercase;letter-spacing:.06em}.discovery-item-copy strong{color:#fff;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.discovery-item-copy em{font-style:normal;color:#aab7d5;font-size:.68rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.discovery-item>b{color:#59d7ff} @media(max-width:1180px){body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.gtl-internal-category-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}} @media(max-width:900px){.gtl-internal-hero{grid-template-columns:1fr}.gtl-internal-stat-grid{grid-template-columns:repeat(4,1fr)}body.gtl-guides-index .gtl-reference-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.gtl-guide-controls{grid-template-columns:1fr!important}.gtl-more-filters .guide-filters{left:0;right:auto;width:min(700px,90vw)}} @media(max-width:720px){.gtl-internal-main{padding-top:16px}.gtl-internal-hero{padding:24px 20px}.gtl-internal-stat-grid{grid-template-columns:1fr 1fr}.gtl-internal-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.discovery-results{grid-template-columns:1fr}} @media(max-width:520px){.gtl-internal-category-grid,body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid,body.gtl-guides-index .gtl-reference-guide-grid{grid-template-columns:1fr!important}.gtl-internal-hero h1{font-size:2.55rem}.gtl-discovery-panel .discovery-search{grid-template-columns:auto 1fr}.gtl-discovery-panel .discovery-search .gtl-btn{grid-column:1/-1;width:100%}} /* Get Tools Lab V8 — clear global-search result hierarchy */ .enterprise-search-results{ padding:8px !important; border-radius:18px !important; background:rgba(7,12,31,.98) !important; border:1px solid rgba(91,140,255,.32) !important; box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 0 1px rgba(111,61,255,.08) inset !important; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); } .enterprise-search-results .gtl-search-result{ display:grid !important; grid-template-columns:34px minmax(0,1fr) auto 20px; align-items:center; gap:10px; min-height:62px; padding:9px 10px !important; margin:3px 0; border:1px solid transparent; border-radius:13px !important; color:#f7f9ff !important; background:transparent; } .enterprise-search-results .gtl-search-result:hover, .enterprise-search-results .gtl-search-result.active, .enterprise-search-results .gtl-search-result:focus{ background:linear-gradient(90deg,rgba(18,119,255,.13),rgba(131,64,255,.12)) !important; border-color:rgba(87,169,255,.33) !important; transform:none !important; } .gtl-search-result__icon{ width:34px;height:34px;border-radius:10px; display:grid;place-items:center; font-size:16px;font-weight:900; background:linear-gradient(145deg,rgba(24,194,255,.2),rgba(119,62,255,.25)); border:1px solid rgba(83,160,255,.34); color:#64e5ff; } .gtl-search-result--guide .gtl-search-result__icon{ color:#c9a3ff; background:linear-gradient(145deg,rgba(177,55,255,.2),rgba(83,71,255,.24)); border-color:rgba(183,91,255,.34); } .gtl-search-result--category .gtl-search-result__icon{ color:#7fffd1; background:linear-gradient(145deg,rgba(0,215,154,.16),rgba(0,154,255,.2)); } .gtl-search-result__body{min-width:0;display:flex;flex-direction:column;gap:3px} .gtl-search-result__title{ display:block; font-size:14px; line-height:1.28; font-weight:800; color:#f8fbff; white-space:normal; } .gtl-search-result__category{ display:block; font-size:11px; line-height:1.2; color:#8fa2c9; } .gtl-search-result__type{ display:inline-flex; align-items:center; justify-content:center; min-width:58px; height:27px; padding:0 10px; border-radius:999px; border:1px solid rgba(61,204,255,.42); background:rgba(15,173,255,.12); color:#5ee6ff; font-size:10px; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.08em; box-shadow:0 0 18px rgba(18,180,255,.09); } .gtl-search-result__type--guide{ border-color:rgba(203,91,255,.48); background:rgba(176,55,255,.13); color:#dfa3ff; box-shadow:0 0 18px rgba(181,58,255,.09); } .gtl-search-result__type--category{ border-color:rgba(34,230,170,.42); background:rgba(14,198,148,.12); color:#71f4c9; } .gtl-search-result__arrow{color:#7290c7;font-weight:900;font-size:15px} .enterprise-search-results .search-empty{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:14px 12px;color:#9badd0; } .enterprise-search-results .search-empty strong{color:#eaf0ff;font-size:13px} .enterprise-search-results .search-empty a{display:inline-flex !important;padding:7px 10px !important; border-radius:999px !important;background:rgba(78,89,255,.13);color:#8ee8ff !important;font-size:11px;font-weight:800} @media (max-width:700px){ .enterprise-search-results .gtl-search-result{ grid-template-columns:30px minmax(0,1fr) auto; } .gtl-search-result__arrow{display:none} .gtl-search-result__type{min-width:52px;padding:0 8px} } /* ========================================================== Get Tools Lab V9 — responsive text + card overflow hardening Keeps long labels inside cards/buttons across the site. ========================================================== */ /* Universal flex/grid child protection. */ :is(.gtl-category-card,.tool-card,.guide-card,.category-card,.feature-card,.pricing-card, .btn,.button,button,a[class*="btn"],a[class*="button"], .filter-pill,.category-pill,.tool-category,.guide-category) > *{ min-width:0; } /* Buttons/chips: never allow labels to paint outside their control. */ :is(.btn,.button,button,a[class*="btn"],a[class*="button"], .filter-pill,.category-pill,.tool-category,.guide-category){ max-width:100%; box-sizing:border-box; } :is(.btn,.button,a[class*="btn"],a[class*="button"]){ white-space:normal; overflow-wrap:break-word; word-break:normal; text-align:center; } /* Homepage category cards: reserve enough text room and adapt typography. */ .gtl-category-grid{ grid-template-columns:repeat(8,minmax(0,1fr)); } .gtl-category-card{ grid-template-columns:40px minmax(0,1fr) 16px !important; gap:9px !important; padding:12px 11px !important; min-width:0; overflow:hidden; } .gtl-category-icon{ width:40px !important; height:40px !important; min-width:40px; border-radius:11px !important; } .gtl-category-icon svg{ width:22px !important; height:22px !important; } .gtl-category-copy{ min-width:0 !important; overflow:hidden; } .gtl-category-copy strong{ display:block; width:100%; font-size:clamp(.72rem,.72vw,.9rem) !important; line-height:1.15 !important; white-space:normal !important; overflow-wrap:anywhere; word-break:normal; hyphens:none; } .gtl-category-copy small{ display:block; margin-top:4px; font-size:clamp(.62rem,.58vw,.72rem) !important; line-height:1.2; white-space:normal !important; overflow-wrap:break-word; } .gtl-category-arrow{ justify-self:end; width:16px; min-width:16px; overflow:hidden; } /* Keep compact 8-column look only when the viewport has enough room. Below that, reduce columns rather than crushing labels. */ @media (max-width:1260px){ .gtl-category-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important} .gtl-category-copy strong{font-size:.88rem !important} } @media (max-width:760px){ .gtl-category-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } @media (max-width:440px){ .gtl-category-grid{grid-template-columns:1fr !important} } /* Internal tool/guide/category cards. */ body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card,.gtl-category-card){ min-width:0 !important; overflow:hidden !important; } body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card) :is(h2,h3,h4,strong,.card-title,.tool-title,.guide-title){ max-width:100%; overflow-wrap:anywhere; word-break:normal; hyphens:none; } body:not(.gtl-home):not(.admin-shell) :is(.tool-card,.guide-card,.category-card) p{ overflow-wrap:break-word; } /* Tool/category badges remain readable without escaping a card. */ .tool-category,.guide-category{ max-width:min(100%,12rem) !important; white-space:normal !important; overflow-wrap:anywhere; text-align:center; } /* Search/filter pills: long topic names fit instead of clipping. */ :is(.guide-filters,.filter-row,.category-filters) :is(button,a,.filter-pill,.category-pill){ width:auto !important; min-width:max-content; max-width:100%; white-space:normal !important; line-height:1.15 !important; overflow-wrap:anywhere; } /* General card-grid responsiveness: do not keep four columns once card text would be forced into unusably narrow boxes. */ @media (max-width:1180px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:860px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:560px){ body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid, body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid{ grid-template-columns:1fr !important; } } /* Forms and table content: prevent long strings/URLs from widening layouts. */ :is(.card,.panel,.content-card,.form-card,.table-wrap,td,th,label,.help-text){ min-width:0; overflow-wrap:anywhere; } /* Navigation CTAs: preserve layout on narrower desktops. */ .site-header :is(.btn,.nav-cta,.header-cta){ flex-shrink:0; } /* ========================================================== Get Tools Lab V10 — responsive buttons / no word splitting Long labels expand horizontally instead of breaking words. ========================================================== */ /* Primary buttons and CTA controls should grow with their labels. */ :is(.btn,.button,button,a[class*="btn"],a[class*="button"], .nav-cta,.header-cta,.gtl-cta,.gtl-btn){ width:auto !important; min-width:max-content; max-width:100%; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; flex-shrink:0; padding-left:clamp(13px,1.2vw,20px) !important; padding-right:clamp(13px,1.2vw,20px) !important; } /* Pills/tabs should also expand instead of splitting labels. */ :is(.filter-pill,.category-pill,.tool-category,.guide-category, .guide-filters button,.filter-row button,.category-filters button, .guide-filters a,.filter-row a,.category-filters a){ width:auto !important; min-width:max-content !important; max-width:none !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; flex:0 0 auto !important; } /* When there are many pills, scroll horizontally rather than breaking words. */ :is(.guide-filters,.filter-row.scrollable,.category-filters){ overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:thin; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; padding-bottom:6px; } /* Homepage category cards: give long labels more horizontal room. Use fluid columns instead of forcing eight cramped cards into one row. */ .gtl-category-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)) !important; gap:12px !important; } .gtl-category-card{ grid-template-columns:40px minmax(max-content,1fr) 16px !important; min-width:176px !important; padding:12px 13px !important; overflow:visible !important; } .gtl-category-copy{ overflow:visible !important; } .gtl-category-copy strong{ width:auto !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; font-size:clamp(.78rem,.78vw,.9rem) !important; } .gtl-category-copy small{ white-space:nowrap !important; overflow-wrap:normal !important; } /* Internal tool/category tiles should not break a single category name. */ .category-cloud .category-copy strong, .category-cloud a strong{ white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; } /* On narrower layouts, keep buttons usable without splitting words. Wide CTAs may become full-width but the label stays intact. */ @media (max-width:560px){ :is(.btn,.button,a[class*="btn"],a[class*="button"],.gtl-cta,.gtl-btn){ max-width:100% !important; justify-content:center; } .gtl-category-grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important; } .gtl-category-card{ min-width:160px !important; } } /* Very narrow screens get one card per row instead of broken labels. */ @media (max-width:360px){ .gtl-category-grid{ grid-template-columns:1fr !important; } } /* assets/css/gettoolslab-light-v15.css */ /* Get Tools Lab V15 — FINAL light-mode override loaded last. Only applies when is active. */ html[data-theme="light"], html[data-theme="light"] body{ background: radial-gradient(900px 520px at 82% 5%,rgba(55,140,255,.10),transparent 68%), radial-gradient(700px 460px at 18% 16%,rgba(170,80,255,.08),transparent 70%), linear-gradient(180deg,#fbfdff 0%,#f5f8ff 48%,#edf3fb 100%) !important; color:#14203a !important; } html[data-theme="light"] body *{ text-shadow:none !important; } /* Header/navigation */ html[data-theme="light"] .site-header{ background:rgba(255,255,255,.96) !important; border-bottom:1px solid #d6e0ef !important; box-shadow:0 8px 28px rgba(40,58,96,.07) !important; } html[data-theme="light"] .brand, html[data-theme="light"] .brand-name, html[data-theme="light"] .main-nav a, html[data-theme="light"] .mega-trigger>a{ color:#14203a !important; } html[data-theme="light"] .main-nav a:hover, html[data-theme="light"] .mega-trigger>a:hover{ color:#4e53df !important; background:#eef3ff !important; } html[data-theme="light"] .enterprise-search input, html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select{ background:#ffffff !important; color:#18243e !important; border-color:#cfd9ea !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder{ color:#7a88a4 !important; } /* Main/public canvases */ html[data-theme="light"] body:not(.admin-shell) main, html[data-theme="light"] body:not(.admin-shell) .site-main, html[data-theme="light"] body:not(.admin-shell) .page-shell, html[data-theme="light"] body:not(.admin-shell) .content-shell, html[data-theme="light"] body:not(.admin-shell) .section, html[data-theme="light"] body:not(.admin-shell) .gtl-section, html[data-theme="light"] body:not(.admin-shell) .gtl-categories, html[data-theme="light"] body:not(.admin-shell) .gtl-guides, html[data-theme="light"] body:not(.admin-shell) .gtl-features, html[data-theme="light"] body:not(.admin-shell) .gtl-why{ background:transparent !important; color:#14203a !important; } /* Homepage/internal heroes */ html[data-theme="light"] .gtl-hero, html[data-theme="light"] .page-hero, html[data-theme="light"] .gtl-reference-hero, html[data-theme="light"] .gtl-inner-hero, html[data-theme="light"] .guide-hero, html[data-theme="light"] .category-hero{ background: radial-gradient(560px 330px at 76% 28%,rgba(44,151,255,.14),transparent 72%), radial-gradient(520px 320px at 35% 22%,rgba(166,76,255,.10),transparent 72%), linear-gradient(135deg,#ffffff 0%,#f1f6ff 58%,#faf5ff 100%) !important; border-color:#d5dff0 !important; color:#14203a !important; } html[data-theme="light"] .gtl-hero h1, html[data-theme="light"] .page-hero h1, html[data-theme="light"] .gtl-reference-hero h1, html[data-theme="light"] .gtl-inner-hero h1{ color:#14203a !important; } html[data-theme="light"] .gtl-hero-description, html[data-theme="light"] .page-hero p, html[data-theme="light"] .gtl-section-subtitle{ color:#5f6e89 !important; } /* Cards: homepage + internal */ html[data-theme="light"] .gtl-category-card, html[data-theme="light"] .tool-card, html[data-theme="light"] .guide-card, html[data-theme="light"] .category-card, html[data-theme="light"] .feature-card, html[data-theme="light"] .pricing-card, html[data-theme="light"] .content-card, html[data-theme="light"] .related-card, html[data-theme="light"] .article-card, html[data-theme="light"] .panel, html[data-theme="light"] .card, html[data-theme="light"] .gtl-reference-tool-card, html[data-theme="light"] .gtl-reference-guide-card{ background:linear-gradient(145deg,#ffffff 0%,#f6f9ff 100%) !important; color:#14203a !important; border-color:#d5e0f0 !important; box-shadow:0 12px 32px rgba(40,61,105,.08) !important; } html[data-theme="light"] .gtl-category-card:hover, html[data-theme="light"] .tool-card:hover, html[data-theme="light"] .guide-card:hover, html[data-theme="light"] .category-card:hover{ background:#ffffff !important; border-color:#9eb8eb !important; box-shadow:0 18px 44px rgba(44,69,124,.12) !important; } html[data-theme="light"] .gtl-category-card *, html[data-theme="light"] .tool-card *, html[data-theme="light"] .guide-card *, html[data-theme="light"] .category-card *, html[data-theme="light"] .content-card *{ color:inherit; } html[data-theme="light"] .gtl-category-card h3, html[data-theme="light"] .tool-card h3, html[data-theme="light"] .guide-card h3, html[data-theme="light"] .category-card h3, html[data-theme="light"] .tool-card strong, html[data-theme="light"] .guide-card strong{ color:#13203a !important; } html[data-theme="light"] .gtl-category-card p, html[data-theme="light"] .tool-card p, html[data-theme="light"] .guide-card p, html[data-theme="light"] .category-card p, html[data-theme="light"] .tool-card small, html[data-theme="light"] .guide-card small{ color:#667590 !important; } /* Feature cards specifically: remove washed-out text */ html[data-theme="light"] .gtl-feature-card{ background:linear-gradient(145deg,#ffffff,#f4f8ff) !important; color:#14203a !important; border:1px solid #d4deef !important; } html[data-theme="light"] .gtl-feature-card h3, html[data-theme="light"] .gtl-feature-card strong{ color:#14203a !important; } html[data-theme="light"] .gtl-feature-card p, html[data-theme="light"] .gtl-feature-card small{ color:#5f6f89 !important; opacity:1 !important; } /* Stats and control bars */ html[data-theme="light"] .gtl-stats-grid, html[data-theme="light"] .guide-controls, html[data-theme="light"] .filter-bar, html[data-theme="light"] .category-filters, html[data-theme="light"] .search-panel{ background:linear-gradient(145deg,#ffffff,#f4f7ff) !important; color:#14203a !important; border-color:#d2deef !important; box-shadow:0 12px 30px rgba(40,61,103,.07) !important; } html[data-theme="light"] .gtl-stats-grid strong{color:#14203a !important} html[data-theme="light"] .gtl-stats-grid small{color:#63728d !important} /* Pills and badges */ html[data-theme="light"] .filter-pill, html[data-theme="light"] .category-pill, html[data-theme="light"] .tool-category, html[data-theme="light"] .guide-category, html[data-theme="light"] .guide-filters button, html[data-theme="light"] .filter-row button, html[data-theme="light"] .category-filters button{ background:#eef4ff !important; color:#33425f !important; border-color:#cbd8ed !important; } html[data-theme="light"] .filter-pill.active, html[data-theme="light"] .category-pill.active, html[data-theme="light"] .guide-filters button.active, html[data-theme="light"] .filter-row button.active, html[data-theme="light"] .category-filters button.active{ background:linear-gradient(90deg,#13bfff,#725aff 58%,#d13fea) !important; color:#fff !important; border-color:transparent !important; } /* Search dropdown */ html[data-theme="light"] .enterprise-search-results{ background:#ffffff !important; color:#14203a !important; border-color:#d0dbea !important; box-shadow:0 22px 56px rgba(37,55,92,.16) !important; } html[data-theme="light"] .enterprise-search-results .gtl-search-result{ color:#14203a !important; } html[data-theme="light"] .enterprise-search-results .gtl-search-result:hover{ background:#f0f5ff !important; } /* Mega menu */ html[data-theme="light"] .mega-menu{ background:#ffffff !important; color:#14203a !important; border-color:#d3ddec !important; } html[data-theme="light"] .mega-menu a{color:#2c3955 !important} html[data-theme="light"] .mega-menu a:hover{background:#eef4ff !important} /* FOOTER — cover every real footer wrapper used in the package */ html[data-theme="light"] footer, html[data-theme="light"] .site-footer, html[data-theme="light"] .enterprise-footer, html[data-theme="light"] .footer-shell, html[data-theme="light"] .footer-wrap{ background: radial-gradient(circle at 12% 0%,rgba(65,143,255,.07),transparent 28%), linear-gradient(180deg,#edf3fb 0%,#e6eef8 100%) !important; color:#24334e !important; border-top:1px solid #d2ddeb !important; } html[data-theme="light"] footer h2, html[data-theme="light"] footer h3, html[data-theme="light"] footer h4, html[data-theme="light"] footer strong, html[data-theme="light"] footer .brand-name{ color:#14203a !important; } html[data-theme="light"] footer p, html[data-theme="light"] footer a, html[data-theme="light"] footer small, html[data-theme="light"] footer li{ color:#596a84 !important; opacity:1 !important; } html[data-theme="light"] footer a:hover{color:#555ce8 !important} /* Newsletter/trust blocks inside footer */ html[data-theme="light"] footer .newsletter, html[data-theme="light"] footer .newsletter-card, html[data-theme="light"] footer .footer-newsletter, html[data-theme="light"] footer .trust-row, html[data-theme="light"] footer .footer-trust, html[data-theme="light"] footer .trust-card{ background:linear-gradient(135deg,#ffffff,#f2f6ff) !important; color:#14203a !important; border-color:#d2ddee !important; box-shadow:0 10px 26px rgba(40,59,100,.06) !important; } html[data-theme="light"] footer .newsletter *, html[data-theme="light"] footer .newsletter-card *, html[data-theme="light"] footer .footer-newsletter *, html[data-theme="light"] footer .trust-row *, html[data-theme="light"] footer .footer-trust *, html[data-theme="light"] footer .trust-card *{ color:inherit; opacity:1 !important; } /* Generic footer-ish dark blocks with known project class names */ html[data-theme="light"] .footer-newsletter-strip, html[data-theme="light"] .footer-trust-grid, html[data-theme="light"] .footer-bottom, html[data-theme="light"] .footer-meta{ background:transparent !important; color:#4f607d !important; } html[data-theme="light"] .footer-trust-grid>*{ background:#f5f8ff !important; color:#25344f !important; border-color:#d4deed !important; } /* Light controls */ html[data-theme="light"] #themeToggle, html[data-theme="light"] .icon-button, html[data-theme="light"] .language-button, html[data-theme="light"] .lang-button{ background:#ffffff !important; color:#14203a !important; border-color:#cdd8e9 !important; } /* Keep brand CTAs colorful */ html[data-theme="light"] .button.primary, html[data-theme="light"] .btn-primary, html[data-theme="light"] .nav-cta, html[data-theme="light"] .header-cta, html[data-theme="light"] .gtl-btn-primary{ background:linear-gradient(90deg,#12bfff,#755bff 58%,#d13dea) !important; color:#fff !important; border-color:transparent !important; } /* assets/css/gettoolslab-internal-light-v18.css */ /* =============================================================== Get Tools Lab V18 — INTERNAL LIGHT THEME, built from scratch. Homepage light mode remains the known-good V15 implementation. This file ONLY styles non-home public pages in light mode. Existing dark CSS is not edited. =============================================================== */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell){ --lt-bg:#f4f7fc; --lt-surface:#ffffff; --lt-soft:#f7f9fd; --lt-soft-2:#eef4ff; --lt-text:#15213a; --lt-muted:#63728d; --lt-border:#d5dfef; --lt-border-strong:#c7d5e9; --lt-shadow:0 14px 34px rgba(42,62,102,.09); --lt-shadow-hover:0 18px 44px rgba(47,69,118,.13); --bg:var(--lt-bg); --surface:var(--lt-surface); --surface-2:var(--lt-soft-2); --text:var(--lt-text); --muted:var(--lt-muted); --border:var(--lt-border); --ui-bg:var(--lt-bg); --ui-surface:var(--lt-surface); --ui-surface-2:var(--lt-soft-2); --ui-text:var(--lt-text); --ui-muted:var(--lt-muted); --ui-line:var(--lt-border); background: radial-gradient(850px 460px at 88% 3%,rgba(54,143,255,.09),transparent 68%), radial-gradient(700px 440px at 10% 12%,rgba(168,78,255,.06),transparent 70%), linear-gradient(180deg,#fbfdff 0%,#f5f8ff 48%,#edf3fb 100%) !important; color:var(--lt-text)!important; } /* Main canvas — neutralize legacy dark backgrounds without changing geometry */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( main,.site-main,.gtl-internal-main,.page-shell,.content-shell,.section,.section.alt, .gtl-section,.gtl-categories,.gtl-guides,.gtl-features,.gtl-why ){ background:transparent!important; color:var(--lt-text)!important; } /* Header: match the homepage light header */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .site-header{ background:rgba(255,255,255,.96)!important; border-bottom:1px solid var(--lt-border)!important; box-shadow:0 8px 26px rgba(34,54,94,.07)!important; backdrop-filter:blur(18px) saturate(1.12)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .site-header :is( .brand,.brand-name,.main-nav>a,.mega-trigger>a ){ color:#17223a!important; opacity:1!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .site-header :is( .main-nav>a,.mega-trigger>a ):hover{ color:#4f55df!important; background:#eef3ff!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .enterprise-search{ background:#fff!important; border-color:#ccd8ea!important; box-shadow:0 7px 20px rgba(37,58,101,.05)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .enterprise-search input{ background:#fff!important; color:#18243e!important; border-color:transparent!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .enterprise-search input::placeholder{ color:#7c89a4!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .icon-button,.language-button,.lang-button,#themeToggle ){ background:#fff!important; color:#18243e!important; border-color:#cbd7e8!important; } /* Mega menu + search dropdown */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .mega-menu{ background:#fff!important; color:var(--lt-text)!important; border-color:var(--lt-border)!important; box-shadow:0 22px 56px rgba(37,55,92,.15)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .mega-menu a{ color:#2c3955!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .mega-menu a:hover{ background:#eef4ff!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .enterprise-search-results{ background:#fff!important; color:var(--lt-text)!important; border-color:var(--lt-border)!important; box-shadow:0 22px 56px rgba(37,55,92,.16)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .enterprise-search-results .gtl-search-result{ color:var(--lt-text)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .enterprise-search-results .gtl-search-result:hover{ background:#f0f5ff!important; } /* Internal hero */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .page-hero,.gtl-internal-hero,.gtl-reference-hero,.gtl-inner-hero, .guide-hero,.category-hero,.gtl-discover-hero,.tool-hero,.suite-hero ){ background: radial-gradient(520px 300px at 80% 22%,rgba(45,153,255,.13),transparent 72%), radial-gradient(500px 300px at 24% 16%,rgba(157,79,255,.08),transparent 72%), linear-gradient(135deg,#fff 0%,#f1f6ff 60%,#faf5ff 100%)!important; color:var(--lt-text)!important; border:1px solid var(--lt-border)!important; box-shadow:var(--lt-shadow)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .page-hero,.gtl-internal-hero,.gtl-reference-hero,.gtl-inner-hero, .guide-hero,.category-hero,.gtl-discover-hero,.tool-hero,.suite-hero ) :is(h1,h2,h3,strong){ color:#14203a!important; opacity:1!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .page-hero,.gtl-internal-hero,.gtl-reference-hero,.gtl-inner-hero, .guide-hero,.category-hero,.gtl-discover-hero,.tool-hero,.suite-hero ) :is(p,small,.muted,.meta,.ai-provider-state){ color:var(--lt-muted)!important; opacity:1!important; } /* Internal stat cards */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-internal-stat-grid>div{ background:linear-gradient(145deg,#fff,#f5f8ff)!important; color:var(--lt-text)!important; border-color:var(--lt-border)!important; box-shadow:0 9px 24px rgba(42,62,102,.06)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-internal-stat-grid strong{ color:#14203a!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-internal-stat-grid small{ color:var(--lt-muted)!important; } /* Tool / guide / category library panels */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .gtl-editorial-panel,.gtl-discovery-panel,.gtl-tool-library-section,.gtl-guide-library-section, .guide-controls,.filter-bar,.category-filters,.search-panel,.filter-panel ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--lt-text)!important; border-color:var(--lt-border)!important; box-shadow:var(--lt-shadow)!important; } /* Exact card selectors that were hard-coded dark in the legacy internal theme */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid .tool-card, html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid .guide-card, html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .tool-card,.guide-card,.category-card,.related-card,.article-card ){ background:linear-gradient(145deg,#fff 0%,#f7f9fd 100%)!important; color:var(--lt-text)!important; border-color:var(--lt-border)!important; box-shadow:var(--lt-shadow)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-reference-tool-grid .tool-card:hover, html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-reference-guide-grid .guide-card:hover, html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .tool-card,.guide-card,.category-card,.related-card,.article-card ):hover{ background:#fff!important; border-color:#9eb7e8!important; box-shadow:var(--lt-shadow-hover)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .tool-card,.guide-card,.category-card,.related-card,.article-card, .gtl-reference-tool-grid .tool-card,.gtl-reference-guide-grid .guide-card ) :is(h2,h3,h4,strong,a){ color:#15213a!important; opacity:1!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .tool-card,.guide-card,.category-card,.related-card,.article-card, .gtl-reference-tool-grid .tool-card,.gtl-reference-guide-grid .guide-card ) :is(p,small,.meta,.guide-meta){ color:var(--lt-muted)!important; opacity:1!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is(.guide-read,.tool-card a[href*="tools/"]){ color:#0a91c8!important; } /* Internal category strip: same light cards as homepage */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-internal-category-grid .gtl-category-card{ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--lt-text)!important; border-color:var(--lt-border)!important; box-shadow:var(--lt-shadow)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-internal-category-grid .gtl-category-card strong{ color:#15213a!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .gtl-internal-category-grid .gtl-category-card small{ color:var(--lt-muted)!important; } /* Tool workspaces and content areas */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .panel,.card,.prose-card,.tool-workspace,.tool-side,.guide-article,.article-shell, .page-shell .prose,.pricing-card,.account-card,.tool-panel,.content-section, .tool-content,.converter-container ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--lt-text)!important; border-color:var(--lt-border)!important; box-shadow:var(--lt-shadow)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .panel,.card,.prose-card,.tool-workspace,.tool-side,.guide-article,.article-shell, .pricing-card,.account-card,.tool-panel,.content-section,.tool-content ) :is(h1,h2,h3,h4,strong,label,legend){ color:#15213a!important; opacity:1!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .panel,.card,.prose-card,.tool-workspace,.tool-side,.guide-article,.article-shell, .pricing-card,.account-card,.tool-panel,.content-section,.tool-content ) :is(p,small,li,.muted,.meta,.form-help,.notice){ color:var(--lt-muted)!important; opacity:1!important; } /* AI Content Studio exact classes */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .ai-studio-shell,.ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel ){ color:var(--lt-text)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; border-color:var(--lt-border)!important; box-shadow:var(--lt-shadow)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel ) :is(h2,h3,strong,label){ color:#15213a!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel ) :is(p,small,.form-help){ color:var(--lt-muted)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .ai-mode-card{ background:#fff!important; color:#23314b!important; border-color:#cad7e9!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .ai-mode-card.active, html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .ai-mode-card[aria-pressed="true"]{ background:linear-gradient(90deg,#13bfff,#735aff 58%,#d13fea)!important; color:#fff!important; border-color:transparent!important; } /* "How to use" / supporting content blocks generated by tool engine */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .how-to-use,.about-tool,.tool-about,.tool-instructions,.workflow-grid,.workflow-card, .suite-feature-grid>*,.feature-grid>* ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--lt-text)!important; border-color:var(--lt-border)!important; box-shadow:0 9px 24px rgba(42,62,102,.06)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .how-to-use,.about-tool,.tool-about,.tool-instructions,.workflow-grid,.workflow-card, .suite-feature-grid>*,.feature-grid>* ) :is(h2,h3,h4,strong){ color:#15213a!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .how-to-use,.about-tool,.tool-about,.tool-instructions,.workflow-grid,.workflow-card, .suite-feature-grid>*,.feature-grid>* ) :is(p,small){ color:var(--lt-muted)!important; } /* Forms: white inputs on light surfaces */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is(input,textarea,select){ background:#fff!important; color:#18243e!important; border-color:#cbd7e8!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is(input,textarea,select)::placeholder{ color:#7c89a4!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is(input,textarea,select):focus{ border-color:#7b73ef!important; box-shadow:0 0 0 4px rgba(112,92,255,.12)!important; } /* Pills/tabs retain brand accent without dark fills */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .filter-pill,.category-pill,.tool-category,.guide-category, .guide-filters button,.filter-row button,.category-filters button,.tab,.tool-tab ){ background:#eef4ff!important; color:#34425f!important; border-color:#cbd8eb!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .filter-pill.active,.category-pill.active,.guide-filters button.active, .filter-row button.active,.category-filters button.active,.tab.active,.tool-tab.active ){ background:linear-gradient(90deg,#13bfff,#735aff 58%,#d13fea)!important; color:#fff!important; border-color:transparent!important; } /* Favorite buttons */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .favorite-button{ background:#f7f9ff!important; color:#5c6c87!important; border-color:#d1dbea!important; } /* Guide article body */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .article-content,.guide-article,.prose-card ){ color:#3f4d67!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .article-content,.guide-article,.prose-card ) :is(h1,h2,h3,h4,strong){ color:#14203a!important; } /* Footer: use homepage light palette on every internal page */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) footer.site-footer, html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .site-footer{ background: radial-gradient(circle at 10% 0%,rgba(68,143,255,.07),transparent 28%), linear-gradient(180deg,#edf3fb 0%,#e5edf8 100%)!important; color:#24334e!important; border-top:1px solid #d2ddea!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) footer.site-footer :is( h2,h3,h4,strong,.brand-name ){ color:#14203a!important; opacity:1!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) footer.site-footer :is( p,a,small,li ){ color:#596984!important; opacity:1!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .footer-newsletter{ background:linear-gradient(135deg,#fff,#f4f7ff)!important; color:#24334e!important; border-color:var(--lt-border)!important; box-shadow:0 10px 26px rgba(42,61,100,.06)!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .footer-newsletter :is( h3,p,strong,label ){ color:#28364f!important; opacity:1!important; } html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .qc-footer-trust .trust-card{ background:#f5f8ff!important; color:#26344e!important; border-color:var(--lt-border)!important; } /* Primary CTAs stay colorful */ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) :is( .button.primary,.btn-primary,.nav-cta,.header-cta,.gtl-btn-primary,.gtl-get-started ){ background:linear-gradient(90deg,#13bfff,#735aff 58%,#d13fea)!important; color:#fff!important; border-color:transparent!important; } /* Mobile navigation */ @media(max-width:760px){ html[data-theme="light"] body:not(.gtl-home):not(.admin-shell) .main-nav{ background:#fff!important; border-color:var(--lt-border)!important; box-shadow:0 20px 50px rgba(36,55,95,.15)!important; } } /* assets/css/gettoolslab-light-contrast-v19.css */ /* ========================================================== Get Tools Lab V19 — Light Mode Contrast & Readability Patch This file ONLY affects light mode. It preserves layout/geometry from V18 and corrects low-contrast text and residual dark component colors. ========================================================== */ html[data-theme="light"] body:not(.admin-shell){ --v19-text:#17233d; --v19-text-2:#33415f; --v19-muted:#667590; --v19-faint:#7a88a3; --v19-surface:#ffffff; --v19-soft:#f6f9ff; --v19-soft-2:#eef4ff; --v19-border:#d5dfef; } /* Global text safety net for public light pages */ html[data-theme="light"] body:not(.admin-shell) :is( h1,h2,h3,h4,h5,h6,strong,b,label,legend,summary ){ color:var(--v19-text)!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) :is( p,li,dd,dt,small,.muted,.meta,.form-help,.help-text,.hint,.description,.subtitle ){ color:var(--v19-muted)!important; opacity:1!important; } /* Breadcrumbs and small meta links */ html[data-theme="light"] body:not(.admin-shell) :is(.breadcrumbs,.breadcrumb,.breadcrumbs a,.breadcrumb a){ color:#6a7a97!important; } html[data-theme="light"] body:not(.admin-shell) :is(.breadcrumbs a,.breadcrumb a):hover{ color:#1d9ed2!important; } /* Hero gradient headings were too close to white */ html[data-theme="light"] body:not(.admin-shell) :is( .gtl-internal-hero,.page-hero,.suite-hero,.guide-hero,.category-hero,.gtl-discover-hero ) h1{ color:#17233d!important; -webkit-text-fill-color:initial!important; background:none!important; } html[data-theme="light"] body:not(.admin-shell) :is( .gtl-internal-hero,.page-hero,.suite-hero,.guide-hero,.category-hero,.gtl-discover-hero ) h1 span{ background:linear-gradient(90deg,#159edb 0%,#4f6ee8 45%,#a545dc 100%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; -webkit-text-fill-color:transparent!important; } /* Pills / eyebrow labels */ html[data-theme="light"] body:not(.admin-shell) :is(.eyebrow,.badge,.gtl-hero-badge){ color:#277f9e!important; } html[data-theme="light"] body:not(.admin-shell) .gtl-hero-badge{ background:#eef4ff!important; border-color:#c9d6ed!important; } /* Pricing/API content blocks */ html[data-theme="light"] body:not(.admin-shell) :is( .pricing-card,.api-card,.developer-card,.content-card,.prose-card,.panel,.card ){ color:var(--v19-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .pricing-card,.api-card,.developer-card,.content-card,.prose-card,.panel,.card ) :is(h1,h2,h3,h4,strong){ color:var(--v19-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .pricing-card,.api-card,.developer-card,.content-card,.prose-card,.panel,.card ) :is(p,li,small,.muted,.meta){ color:var(--v19-muted)!important; } /* Guide page stats were inheriting dark text on dark-ish legacy tiles */ html[data-theme="light"] body:not(.admin-shell) .gtl-internal-stat-grid>div{ background:linear-gradient(145deg,#fff,#f6f9ff)!important; border-color:var(--v19-border)!important; } html[data-theme="light"] body:not(.admin-shell) .gtl-internal-stat-grid strong{ color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) .gtl-internal-stat-grid small{ color:#667590!important; } /* Guide cards and latest guides */ html[data-theme="light"] body:not(.admin-shell) :is(.guide-card,.gtl-reference-guide-card,.gtl-guide-card){ background:linear-gradient(145deg,#fff,#f7f9ff)!important; color:var(--v19-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is(.guide-card,.gtl-reference-guide-card,.gtl-guide-card) :is(h2,h3,h4,strong,a){ color:#17233d!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) :is(.guide-card,.gtl-reference-guide-card,.gtl-guide-card) :is(p,small,.guide-meta,.meta){ color:#667590!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) .guide-read{ color:#078fc4!important; } /* Tool cards */ html[data-theme="light"] body:not(.admin-shell) :is(.tool-card,.gtl-reference-tool-card){ background:linear-gradient(145deg,#fff,#f7f9ff)!important; color:var(--v19-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is(.tool-card,.gtl-reference-tool-card) :is(h2,h3,h4,strong,a){ color:#17233d!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) :is(.tool-card,.gtl-reference-tool-card) :is(p,small,.meta){ color:#667590!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) :is(.tool-card,.gtl-reference-tool-card) .tool-category{ color:#526381!important; background:#eef4ff!important; } /* How-to-use step cards in screenshots */ html[data-theme="light"] body:not(.admin-shell) :is( .how-to-use,.workflow-grid,.workflow-card,.tool-instructions,.suite-feature-grid ){ color:var(--v19-text)!important; } html[data-theme="light"] body:not(.admin-shell) .workflow-grid>*, html[data-theme="light"] body:not(.admin-shell) .suite-feature-grid>*, html[data-theme="light"] body:not(.admin-shell) .how-to-use .step, html[data-theme="light"] body:not(.admin-shell) .tool-instructions .step{ background:linear-gradient(145deg,#fff,#f7f9ff)!important; color:var(--v19-text)!important; border-color:var(--v19-border)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .workflow-grid>*,.suite-feature-grid>*,.how-to-use .step,.tool-instructions .step ) :is(p,small,span:not(.step-number)){ color:#5f6f8a!important; opacity:1!important; } /* Keep numbered step badges vibrant */ html[data-theme="light"] body:not(.admin-shell) :is( .workflow-grid>*,.suite-feature-grid>*,.how-to-use .step,.tool-instructions .step ) :is(.step-number,.number,.index){ color:#fff!important; } /* AI Content Studio exact sections */ html[data-theme="light"] body:not(.admin-shell) :is( .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel,.tool-panel ){ background:linear-gradient(145deg,#fff,#f7f9ff)!important; color:var(--v19-text)!important; border-color:var(--v19-border)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel,.tool-panel ) :is(h1,h2,h3,h4,strong,label){ color:#17233d!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) :is( .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel,.tool-panel ) :is(p,small,.form-help,.ai-provider-state){ color:#667590!important; opacity:1!important; } /* Form controls */ html[data-theme="light"] body:not(.admin-shell) :is(input,textarea,select){ color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) :is(input,textarea)::placeholder{ color:#7b88a3!important; opacity:1!important; } /* Buttons: preserve readable contrast */ html[data-theme="light"] body:not(.admin-shell) :is(.button,.btn,button){ color:#26324c; } html[data-theme="light"] body:not(.admin-shell) :is(.button.primary,.btn-primary,.gtl-btn-primary,.gtl-get-started){ color:#fff!important; } html[data-theme="light"] body:not(.admin-shell) :is(.button-secondary,.btn-secondary){ background:#fff!important; color:#33415f!important; border-color:#ccd8ea!important; } /* Footer content */ html[data-theme="light"] body:not(.admin-shell) footer.site-footer :is( h2,h3,h4,strong,.brand-name ){ color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) footer.site-footer :is( p,a,small,li ){ color:#596984!important; } /* Links in readable brand cyan/blue */ html[data-theme="light"] body:not(.admin-shell) main a:not(.button):not(.btn):not(.gtl-category-card){ text-decoration-color:currentColor; } /* Fix any residual opacity inherited from dark theme */ html[data-theme="light"] body:not(.admin-shell) :is( .tool-card,.guide-card,.pricing-card,.content-card,.prose-card,.panel,.card, .workflow-card,.suite-feature-grid>*,.gtl-internal-stat-grid>div ) *{ opacity:1; } /* assets/css/gettoolslab-light-v20.css */ /* ========================================================== Get Tools Lab V20 — residual dark areas + contrast cleanup LIGHT MODE ONLY. Dark mode untouched. ========================================================== */ html[data-theme="light"] body:not(.admin-shell){ --v20-bg:#f5f8ff; --v20-surface:#ffffff; --v20-soft:#f7f9fd; --v20-soft2:#eef4ff; --v20-text:#17233d; --v20-muted:#62718d; --v20-border:#d5dfef; --v20-shadow:0 12px 30px rgba(42,62,102,.08); } /* Residual dark blocks on tool pages */ html[data-theme="light"] body:not(.admin-shell) :is( .tool-workspace,.tool-panel,.tool-content,.tool-side,.converter-container, .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel, .about-tool,.tool-about,.how-to-use,.tool-instructions,.workflow-grid, .workflow-card,.suite-feature-grid,.feature-grid,.options-panel,.result-panel ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--v20-text)!important; border-color:var(--v20-border)!important; box-shadow:var(--v20-shadow)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .tool-workspace,.tool-panel,.tool-content,.tool-side,.converter-container, .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel, .about-tool,.tool-about,.how-to-use,.tool-instructions,.workflow-grid, .workflow-card,.suite-feature-grid,.feature-grid,.options-panel,.result-panel ) :is(h1,h2,h3,h4,strong,label,legend){ color:var(--v20-text)!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) :is( .tool-workspace,.tool-panel,.tool-content,.tool-side,.converter-container, .ai-workspace,.ai-editor-panel,.ai-options-panel,.ai-output-panel, .about-tool,.tool-about,.how-to-use,.tool-instructions,.workflow-grid, .workflow-card,.suite-feature-grid,.feature-grid,.options-panel,.result-panel ) :is(p,small,span,.muted,.meta,.form-help,.hint){ color:var(--v20-muted)!important; opacity:1!important; } /* Exact "How it works" step cards shown in screenshots */ html[data-theme="light"] body:not(.admin-shell) :is( .workflow-grid,.suite-feature-grid,.feature-grid ) > *{ background:linear-gradient(145deg,#fff,#f4f7ff)!important; color:var(--v20-text)!important; border:1px solid var(--v20-border)!important; box-shadow:0 8px 20px rgba(42,62,102,.05)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .workflow-grid,.suite-feature-grid,.feature-grid ) > * :is(p,small,span:not(.step-number):not(.number):not(.index)){ color:#5f6f8a!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) :is( .workflow-grid,.suite-feature-grid,.feature-grid ) > * :is(.step-number,.number,.index){ color:#fff!important; } /* FAQ accordions/details were still using dark fills */ html[data-theme="light"] body:not(.admin-shell) :is( .faq,.faq-list,.faq-grid,.faq-section,.faq-card ){ color:var(--v20-text)!important; } html[data-theme="light"] body:not(.admin-shell) details{ background:#fff!important; color:var(--v20-text)!important; border:1px solid var(--v20-border)!important; box-shadow:0 8px 20px rgba(42,62,102,.05)!important; } html[data-theme="light"] body:not(.admin-shell) details summary{ background:#f6f9ff!important; color:#24314b!important; border-color:var(--v20-border)!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) details[open] summary{ background:#eef4ff!important; color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) details :is(p,li,small){ color:var(--v20-muted)!important; opacity:1!important; } /* FAQ implementations that use custom classes instead of
*/ html[data-theme="light"] body:not(.admin-shell) :is( .faq-item,.faq-question,.faq-answer,.accordion-item,.accordion-header,.accordion-body ){ background:#fff!important; color:var(--v20-text)!important; border-color:var(--v20-border)!important; } html[data-theme="light"] body:not(.admin-shell) :is(.faq-question,.accordion-header){ background:#f6f9ff!important; color:#24314b!important; } /* Guide hero stat tiles: remove remaining dark cards */ html[data-theme="light"] body:not(.admin-shell) .gtl-internal-stat-grid>div{ background:linear-gradient(145deg,#fff,#f5f8ff)!important; color:var(--v20-text)!important; border:1px solid var(--v20-border)!important; box-shadow:0 8px 20px rgba(42,62,102,.05)!important; } html[data-theme="light"] body:not(.admin-shell) .gtl-internal-stat-grid strong{ color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) .gtl-internal-stat-grid small{ color:#667590!important; } /* Pricing/API sections occasionally retained dark translucent blocks */ html[data-theme="light"] body:not(.admin-shell) :is( .pricing-grid,.pricing-section,.plans-grid,.api-grid,.api-options,.developer-grid, .pricing-card,.api-card,.developer-card ){ color:var(--v20-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .pricing-card,.api-card,.developer-card,.pricing-section,.api-options ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; border-color:var(--v20-border)!important; box-shadow:var(--v20-shadow)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .pricing-card,.api-card,.developer-card,.pricing-section,.api-options ) :is(h2,h3,h4,strong){ color:var(--v20-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .pricing-card,.api-card,.developer-card,.pricing-section,.api-options ) :is(p,li,small,.muted,.meta){ color:var(--v20-muted)!important; } /* AI Studio mode tabs/buttons: readable inactive state */ html[data-theme="light"] body:not(.admin-shell) .ai-mode-card{ background:#fff!important; color:#24314b!important; border-color:#cbd7e8!important; } html[data-theme="light"] body:not(.admin-shell) .ai-mode-card.active, html[data-theme="light"] body:not(.admin-shell) .ai-mode-card[aria-pressed="true"]{ background:linear-gradient(90deg,#13bfff,#735aff 58%,#d13fea)!important; color:#fff!important; border-color:transparent!important; } /* Any residual dark background class on public light pages */ html[data-theme="light"] body:not(.admin-shell) :is( .dark-card,.dark-panel,.surface-dark,.panel-dark,.bg-dark,.dark-surface ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--v20-text)!important; border-color:var(--v20-border)!important; } /* Final readable text safety net inside content areas */ html[data-theme="light"] body:not(.admin-shell) :is( main,.site-main,.gtl-internal-main,.page-shell,.content-shell ) :is(h1,h2,h3,h4,h5,h6,strong,b,label,legend,summary){ color:var(--v20-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( main,.site-main,.gtl-internal-main,.page-shell,.content-shell ) :is(p,li,dd,dt,small,.muted,.meta,.help-text,.form-help,.hint){ color:var(--v20-muted)!important; } /* Keep primary/brand actions readable */ html[data-theme="light"] body:not(.admin-shell) :is( .button.primary,.btn-primary,.gtl-btn-primary,.gtl-get-started,.header-cta,.nav-cta ){ color:#fff!important; } /* assets/css/gettoolslab-light-v21.css */ /* ============================================================ Get Tools Lab V21 — targeted light-mode cleanup Fixes ONLY the remaining dark blocks on: - tool pages (How to use / FAQ / feedback / related) - guide pages (hero stat tiles / guide cards) - pricing page content blocks Dark mode remains untouched. ============================================================ */ html[data-theme="light"] body:not(.admin-shell){ --v21-bg:#f5f8ff; --v21-card:#ffffff; --v21-soft:#f7f9fd; --v21-soft2:#eef4ff; --v21-text:#17233d; --v21-muted:#63728d; --v21-border:#d5dfef; --v21-shadow:0 10px 28px rgba(43,62,102,.07); } /* ---------- Tool page: How to use / step cards ---------- */ html[data-theme="light"] body:not(.admin-shell) :is( .how-to-use,.tool-howto,.tool-instructions,.workflow-section,.workflow-grid,.workflow-card, .tool-steps,.steps-grid,.step-card,.suite-feature-grid ){ background:transparent!important; color:var(--v21-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .workflow-grid,.tool-steps,.steps-grid,.suite-feature-grid ) > * , html[data-theme="light"] body:not(.admin-shell) :is( .workflow-card,.step-card ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--v21-text)!important; border:1px solid var(--v21-border)!important; box-shadow:var(--v21-shadow)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .workflow-grid,.tool-steps,.steps-grid,.suite-feature-grid ) > * :is(p,span,small), html[data-theme="light"] body:not(.admin-shell) :is(.workflow-card,.step-card) :is(p,span,small){ color:var(--v21-muted)!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) :is( .workflow-grid,.tool-steps,.steps-grid,.suite-feature-grid,.workflow-card,.step-card ) :is(.step-number,.number,.index){ color:#fff!important; } /* Some tool pages render steps as generic cards inside a how-to wrapper */ html[data-theme="light"] body:not(.admin-shell) :is(.how-to-use,.tool-howto,.tool-instructions) > div > div, html[data-theme="light"] body:not(.admin-shell) :is(.how-to-use,.tool-howto,.tool-instructions) .card{ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--v21-text)!important; border-color:var(--v21-border)!important; } /* ---------- Tool page: FAQ ---------- */ html[data-theme="light"] body:not(.admin-shell) :is( .faq-section,.faq-list,.faq-grid,.faq-card,.tool-faq ){ background:transparent!important; color:var(--v21-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .faq-item,.accordion-item ){ background:#fff!important; color:var(--v21-text)!important; border:1px solid var(--v21-border)!important; box-shadow:0 7px 18px rgba(43,62,102,.05)!important; } html[data-theme="light"] body:not(.admin-shell) details{ background:#fff!important; color:var(--v21-text)!important; border:1px solid var(--v21-border)!important; box-shadow:0 7px 18px rgba(43,62,102,.05)!important; } html[data-theme="light"] body:not(.admin-shell) details > summary, html[data-theme="light"] body:not(.admin-shell) :is(.faq-question,.accordion-header){ background:#f4f7fd!important; color:#23314b!important; border-color:var(--v21-border)!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) details[open] > summary{ background:#eef4ff!important; } html[data-theme="light"] body:not(.admin-shell) details :is(p,li,small), html[data-theme="light"] body:not(.admin-shell) :is(.faq-answer,.accordion-body){ color:var(--v21-muted)!important; opacity:1!important; } /* ---------- Tool page: feedback / related tools ---------- */ html[data-theme="light"] body:not(.admin-shell) :is( .feedback-card,.tool-feedback,.rating-card,.related-tools,.related-section,.related-card ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--v21-text)!important; border-color:var(--v21-border)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .feedback-card,.tool-feedback,.rating-card,.related-tools,.related-section,.related-card ) :is(h2,h3,h4,strong){ color:var(--v21-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .feedback-card,.tool-feedback,.rating-card,.related-tools,.related-section,.related-card ) :is(p,small,.muted,.meta){ color:var(--v21-muted)!important; } /* ---------- Guide page: hero stat tiles ---------- */ html[data-theme="light"] body.gtl-guides-index .gtl-internal-stat-grid>div, html[data-theme="light"] body.gtl-guide-article .gtl-internal-stat-grid>div{ background:linear-gradient(145deg,#fff,#f5f8ff)!important; color:var(--v21-text)!important; border:1px solid var(--v21-border)!important; box-shadow:0 8px 20px rgba(42,62,102,.05)!important; } html[data-theme="light"] body.gtl-guides-index .gtl-internal-stat-grid strong, html[data-theme="light"] body.gtl-guide-article .gtl-internal-stat-grid strong{ color:#17233d!important; } html[data-theme="light"] body.gtl-guides-index .gtl-internal-stat-grid small, html[data-theme="light"] body.gtl-guide-article .gtl-internal-stat-grid small{ color:#667590!important; } /* Guide cards */ html[data-theme="light"] body.gtl-guides-index .guide-card, html[data-theme="light"] body.gtl-guide-article .guide-card{ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--v21-text)!important; border-color:var(--v21-border)!important; } html[data-theme="light"] body.gtl-guides-index .guide-card :is(h2,h3,strong,a), html[data-theme="light"] body.gtl-guide-article .guide-card :is(h2,h3,strong,a){ color:#17233d!important; } html[data-theme="light"] body.gtl-guides-index .guide-card :is(p,small,.guide-meta), html[data-theme="light"] body.gtl-guide-article .guide-card :is(p,small,.guide-meta){ color:#667590!important; } /* ---------- Pricing page ---------- */ html[data-theme="light"] body:not(.admin-shell) :is( .pricing-hero,.pricing-section,.pricing-grid,.plans-grid,.plan-grid,.pricing-card,.plan-card ){ color:var(--v21-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .pricing-section,.pricing-card,.plan-card ){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; border-color:var(--v21-border)!important; box-shadow:var(--v21-shadow)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .pricing-section,.pricing-card,.plan-card ) :is(h2,h3,h4,strong){ color:var(--v21-text)!important; } html[data-theme="light"] body:not(.admin-shell) :is( .pricing-section,.pricing-card,.plan-card ) :is(p,li,small,.muted,.meta){ color:var(--v21-muted)!important; } /* ---------- Final safety: no dark navy rectangles in these page-specific areas ---------- */ html[data-theme="light"] body:not(.admin-shell) :is( .faq-section,.tool-faq,.how-to-use,.tool-howto,.tool-instructions, .pricing-section,.related-tools,.related-section ) :is(.card,.panel){ background:linear-gradient(145deg,#fff,#f7f9fd)!important; color:var(--v21-text)!important; border-color:var(--v21-border)!important; } /* assets/css/gettoolslab-light-v22-api-badges.css */ /* ========================================================== Get Tools Lab V22 — API-matched light-mode eyebrow/badge pills Matches the "DEVELOPER ACCESS" chip shown on the API page. Dark mode is untouched. ========================================================== */ html[data-theme="light"] body:not(.admin-shell) :is( .eyebrow,.badge,.guide-eyebrow, .tool-eyebrow,.section-eyebrow,.page-eyebrow, .feedback-eyebrow,.related-eyebrow ){ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; max-width:100%!important; min-height:32px!important; padding:6px 13px!important; border:1px solid rgba(109,91,241,.64)!important; border-radius:999px!important; background:linear-gradient(135deg,#505a9a 0%,#515298 48%,#4d478f 100%)!important; color:#62ddff!important; -webkit-text-fill-color:#62ddff!important; font-size:.73rem!important; line-height:1!important; font-weight:900!important; letter-spacing:.11em!important; text-transform:uppercase!important; white-space:nowrap!important; opacity:1!important; text-shadow:none!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 13px rgba(70,70,130,.10)!important; } /* Explicit page variants visible in the screenshots */ html[data-theme="light"] body:not(.admin-shell) :is( .page-hero .eyebrow, .suite-hero .eyebrow, .tool-panel .eyebrow, .content-section .eyebrow, .feedback-card .eyebrow, .tool-feedback .eyebrow, .related-tools .eyebrow, .related-section .eyebrow ){ background:linear-gradient(135deg,#505a9a 0%,#515298 48%,#4d478f 100%)!important; color:#62ddff!important; -webkit-text-fill-color:#62ddff!important; border-color:rgba(109,91,241,.64)!important; } /* Prevent global light text rules from overriding the pill text. */ html[data-theme="light"] body:not(.admin-shell) :is( .eyebrow,.badge,.guide-eyebrow, .tool-eyebrow,.section-eyebrow,.page-eyebrow, .feedback-eyebrow,.related-eyebrow ) *{ color:#62ddff!important; -webkit-text-fill-color:#62ddff!important; opacity:1!important; } /* assets/css/gettoolslab-light-v23-guide-stats.css */ /* V23: guide hero stat squares - light mode only */ html[data-theme="light"] body .guides-hero .gtl-guide-hero-stats > div, html[data-theme="light"] body .gtl-internal-hero .gtl-guide-hero-stats > div { background:#fff !important; background-image:none !important; border:1px solid #d5e0f2 !important; box-shadow:0 8px 24px rgba(36,55,95,.08) !important; } html[data-theme="light"] body .guides-hero .gtl-guide-hero-stats strong, html[data-theme="light"] body .gtl-internal-hero .gtl-guide-hero-stats strong { color:#14213d !important; -webkit-text-fill-color:#14213d !important; opacity:1 !important; } html[data-theme="light"] body .guides-hero .gtl-guide-hero-stats small, html[data-theme="light"] body .gtl-internal-hero .gtl-guide-hero-stats small { color:#607392 !important; -webkit-text-fill-color:#607392 !important; opacity:1 !important; } /* assets/css/gettoolslab-layout-v24.css */ /* ============================================================== Get Tools Lab V24 — Full-site layout/alignment hardening Structural only: spacing, wrapping, sizing, alignment. It intentionally does NOT redefine the dark/light color schemes. ============================================================== */ /* Prevent grid/flex children from forcing overflow. */ body:not(.admin-shell) :is( .nav-wrap,.main-nav,.enterprise-search,.tool-card,.guide-card,.category-card, .related-card,.content-section,.tool-panel,.panel,.card,.page-hero, .gtl-reference-tool-grid,.gtl-reference-guide-grid,.gtl-internal-category-grid, .iai-layout,.iai-controls,.iai-workspace,.aps-layout,.aps-controls,.aps-workspace, .field-pair,.feature-grid,.workflow-grid,.guide-controls,.guide-filters ) > *{ min-width:0; } /* Text should wrap by words, not split through the middle of normal words. */ body:not(.admin-shell) :is( h1,h2,h3,h4,h5,h6,p,small,strong,label,legend, .tool-card,.guide-card,.category-card,.related-card, .button,.button-secondary,.btn,button ){ word-break:normal; overflow-wrap:break-word; hyphens:none; } /* ---------- Header: stable spacing without collisions ---------- */ body:not(.admin-shell) .nav-wrap{ display:flex; align-items:center; gap:clamp(10px,1.25vw,20px); overflow:visible; } body:not(.admin-shell) .brand{ flex:0 0 auto; } body:not(.admin-shell) .enterprise-search{ flex:1 1 320px; min-width:220px; max-width:440px; } body:not(.admin-shell) .main-nav{ display:flex; align-items:center; justify-content:flex-end; gap:clamp(12px,1.35vw,21px); flex:0 0 auto; } body:not(.admin-shell) .main-nav > a, body:not(.admin-shell) .mega-trigger > a{ display:inline-flex; align-items:center; min-height:38px; white-space:nowrap; } body:not(.admin-shell) .gtl-get-started, body:not(.admin-shell) .language-switcher, body:not(.admin-shell) #themeToggle{ flex:0 0 auto; } /* ---------- Global button hygiene ---------- */ body:not(.admin-shell) :is(.button,.button-secondary,.btn,button){ box-sizing:border-box; max-width:100%; line-height:1.2; } body:not(.admin-shell) :is(.button,.button-secondary,.btn){ width:auto; white-space:nowrap; } /* Button/action groups: use gaps instead of touching borders. */ body:not(.admin-shell) :is( .iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row, .toolbar-actions,.editor-actions,.upload-actions,.download-actions ){ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } body:not(.admin-shell) :is( .iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row, .toolbar-actions,.editor-actions,.upload-actions,.download-actions ) > :is(button,.button,.button-secondary,.btn){ flex:0 1 auto; min-width:112px; width:auto!important; margin:0!important; } /* ---------- Tab / segmented control hygiene ---------- */ /* Image AI Studio: the four tabs in the screenshot were visually merging. */ body:not(.admin-shell) .iai-tabs{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; align-items:stretch; } body:not(.admin-shell) .iai-tabs > button{ width:100%!important; min-width:0!important; margin:0!important; padding:10px 9px!important; border-radius:10px!important; white-space:nowrap!important; overflow:hidden; text-overflow:ellipsis; } /* Other tab/filter rows across tools/guides. */ body:not(.admin-shell) :is( .tabs,.tool-tabs,.ai-mode-grid,.filter-row,.category-filters,.guide-filters ){ gap:8px!important; } body:not(.admin-shell) :is( .tabs,.tool-tabs,.ai-mode-grid,.filter-row,.category-filters,.guide-filters ) > :is(button,a,.tab,.tool-tab,.filter-pill,.category-pill){ margin:0!important; white-space:nowrap!important; } /* ---------- Image AI Studio fixes visible in screenshot ---------- */ body:not(.admin-shell) .iai-hero{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; } body:not(.admin-shell) .iai-privacy{ display:flex!important; flex-direction:column; align-items:flex-start; gap:3px!important; min-width:190px; } body:not(.admin-shell) .iai-privacy strong, body:not(.admin-shell) .iai-privacy span{ display:block; margin:0!important; } body:not(.admin-shell) .iai-controls > .iai-tab.active{ display:block; } body:not(.admin-shell) .iai-tab > label, body:not(.admin-shell) .aps-controls > label, body:not(.admin-shell) .aps-options > label{ margin-bottom:12px; } body:not(.admin-shell) .iai-tab > label:not(.check-row), body:not(.admin-shell) .aps-controls > label, body:not(.admin-shell) .aps-options > label{ display:grid; gap:6px; } body:not(.admin-shell) .iai-tab output, body:not(.admin-shell) .aps-options output{ margin-inline:4px; } body:not(.admin-shell) .check-row{ display:flex!important; align-items:center; gap:8px!important; } body:not(.admin-shell) .check-row input{ flex:0 0 auto; margin:0!important; } body:not(.admin-shell) .iai-tab hr{ margin:16px 0!important; } /* Range controls: keep label/output/input from running into each other. */ body:not(.admin-shell) .iai-tab input[type="range"], body:not(.admin-shell) .aps-options input[type="range"]{ width:100%; min-width:120px; } /* Two-column field pairs should remain separated. */ body:not(.admin-shell) .field-pair{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; } body:not(.admin-shell) .field-pair > label{ display:grid; gap:6px; min-width:0; } /* ---------- Audio Studio / tool suites ---------- */ body:not(.admin-shell) .aps-layout, body:not(.admin-shell) .iai-layout{ gap:18px!important; } body:not(.admin-shell) .aps-options{ margin-bottom:12px; } body:not(.admin-shell) :is(.aps-controls,.iai-controls) select, body:not(.admin-shell) :is(.aps-controls,.iai-controls) input:not([type="checkbox"]):not([type="range"]):not([type="color"]), body:not(.admin-shell) :is(.aps-controls,.iai-controls) textarea{ max-width:100%; } /* ---------- Cards / categories / related sections ---------- */ body:not(.admin-shell) :is( .gtl-reference-tool-grid,.gtl-reference-guide-grid,.gtl-internal-category-grid, .related-grid,.related-tools-grid,.related-guides-grid ){ align-items:stretch; } body:not(.admin-shell) :is(.tool-card,.guide-card,.category-card,.related-card){ min-width:0; } body:not(.admin-shell) :is(.tool-card,.guide-card,.category-card,.related-card) :is(h2,h3,h4,strong,p,small){ min-width:0; max-width:100%; } /* Ensure icon/title/action columns never overlap in compact tool cards. */ body:not(.admin-shell) .gtl-reference-tool-grid .tool-card{ grid-template-columns:48px minmax(0,1fr) 30px!important; column-gap:12px!important; } body:not(.admin-shell) .gtl-reference-tool-grid .tool-card > *{ min-width:0; } body:not(.admin-shell) .gtl-reference-tool-grid .tool-card h3{ line-height:1.2!important; } /* ---------- Related tools/cards ---------- */ body:not(.admin-shell) :is(.related-tools,.related-section) .related-card{ padding:16px!important; } body:not(.admin-shell) :is(.related-tools,.related-section) .related-card > a{ min-width:0; } /* ---------- API / code blocks ---------- */ body:not(.admin-shell) .prose pre, body:not(.admin-shell) pre{ max-width:100%; overflow-x:auto!important; white-space:pre!important; } body:not(.admin-shell) .prose code, body:not(.admin-shell) pre code{ word-break:normal!important; overflow-wrap:normal!important; } /* ---------- Guide controls / pills ---------- */ body:not(.admin-shell) .gtl-guide-controls{ align-items:center!important; } body:not(.admin-shell) .guide-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px!important; } body:not(.admin-shell) .guide-filters > button{ flex:0 0 auto; min-width:max-content; } /* ---------- Generic spacing between adjacent inline controls ---------- */ body:not(.admin-shell) :is(label,.control-row,.inline-controls,.status-row){ min-width:0; } body:not(.admin-shell) :is(.control-row,.inline-controls,.status-row){ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* ---------- Responsive breakpoints ---------- */ @media (max-width:1180px){ body:not(.admin-shell) .enterprise-search{ flex-basis:260px; min-width:190px; } body:not(.admin-shell) .main-nav{ gap:11px; } body:not(.admin-shell) .main-nav > a, body:not(.admin-shell) .mega-trigger > a{ font-size:.84rem!important; } } @media (max-width:900px){ body:not(.admin-shell) .field-pair{ grid-template-columns:1fr!important; } body:not(.admin-shell) .iai-tabs{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } body:not(.admin-shell) :is( .iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row ) > :is(button,.button,.button-secondary,.btn){ flex:1 1 160px; } } @media (max-width:760px){ body:not(.admin-shell) .nav-wrap{ gap:10px; } body:not(.admin-shell) .enterprise-search{ min-width:0; } body:not(.admin-shell) .iai-tabs{ grid-template-columns:1fr 1fr!important; } body:not(.admin-shell) :is( .tabs,.tool-tabs,.filter-row,.category-filters,.guide-filters ){ overflow-x:auto; flex-wrap:nowrap!important; padding-bottom:5px; -webkit-overflow-scrolling:touch; } } @media (max-width:480px){ body:not(.admin-shell) .iai-tabs{ grid-template-columns:1fr!important; } body:not(.admin-shell) :is( .iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row ) > :is(button,.button,.button-secondary,.btn){ flex:1 1 100%; width:100%!important; } } /* assets/css/gettoolslab-layout-v25.css */ /* ============================================================== Get Tools Lab V25 — full-site alignment + collision audit layer Structural only. No theme recoloring. ============================================================== */ /* Global box sizing and overflow safety */ body:not(.admin-shell) *, body:not(.admin-shell) *::before, body:not(.admin-shell) *::after{ box-sizing:border-box; } body:not(.admin-shell) img, body:not(.admin-shell) svg, body:not(.admin-shell) video, body:not(.admin-shell) canvas{ max-width:100%; } /* Prevent flex/grid children from overflowing parents */ body:not(.admin-shell) :is( .container,.nav-wrap,.main-nav,.enterprise-search, .grid,.tool-grid,.guide-grid,.category-grid,.related-grid, .gtl-reference-tool-grid,.gtl-reference-guide-grid,.gtl-internal-category-grid, .feature-grid,.value-grid,.workflow-grid,.steps-grid, .field-pair,.form-row,.control-row,.inline-controls, .toolbar,.iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row, .guide-controls,.gtl-guide-controls,.guide-filters,.category-filters,.filter-row, .content-section,.tool-panel,.panel,.card,.page-hero,.prose,.article-shell ) > *{ min-width:0; } /* Normal words stay intact */ body:not(.admin-shell) :is( h1,h2,h3,h4,h5,h6,p,li,small,strong,label,legend,summary, .tool-card,.guide-card,.category-card,.related-card,.button,.button-secondary,.btn,button ){ word-break:normal!important; overflow-wrap:break-word!important; hyphens:none!important; } /* Headings and paragraphs should not collide with adjacent controls */ body:not(.admin-shell) :is(h1,h2,h3,h4,h5,h6,p){ max-width:100%; } /* ---------- Header ---------- */ body:not(.admin-shell) .nav-wrap{ display:grid!important; grid-template-columns:auto minmax(220px,440px) minmax(0,1fr) auto auto auto; align-items:center!important; gap:clamp(10px,1.2vw,18px)!important; overflow:visible!important; } body:not(.admin-shell) .brand{ min-width:max-content; } body:not(.admin-shell) .enterprise-search{ width:100%!important; min-width:0!important; max-width:440px!important; } body:not(.admin-shell) .main-nav{ display:flex!important; align-items:center!important; justify-content:flex-end!important; flex-wrap:nowrap!important; min-width:0!important; gap:clamp(10px,1.15vw,18px)!important; margin-left:0!important; } body:not(.admin-shell) .main-nav > a, body:not(.admin-shell) .mega-trigger > a{ display:inline-flex!important; align-items:center!important; white-space:nowrap!important; min-height:36px; } body:not(.admin-shell) :is(.gtl-get-started,.language-switcher,#themeToggle){ justify-self:end; min-width:max-content; } /* ---------- Generic button/action rows ---------- */ body:not(.admin-shell) :is( .toolbar,.iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row, .toolbar-actions,.editor-actions,.upload-actions,.download-actions,.qc-actions ){ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:10px!important; } body:not(.admin-shell) :is( .toolbar,.iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row, .toolbar-actions,.editor-actions,.upload-actions,.download-actions,.qc-actions ) > *{ margin:0!important; } body:not(.admin-shell) :is( .toolbar,.iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row, .toolbar-actions,.editor-actions,.upload-actions,.download-actions,.qc-actions ) > :is(button,.button,.button-secondary,.btn,a){ flex:0 1 auto!important; width:auto!important; min-width:112px; max-width:100%; } /* ---------- Segmented controls and tabs ---------- */ body:not(.admin-shell) :is( .iai-tabs,.tabs,.tool-tabs,.ai-mode-grid,.guide-filters,.category-filters,.filter-row ){ gap:8px!important; } body:not(.admin-shell) .iai-tabs{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; } body:not(.admin-shell) .iai-tabs > button{ width:100%!important; min-width:0!important; margin:0!important; padding:10px 10px!important; border-radius:10px!important; white-space:nowrap!important; } body:not(.admin-shell) :is(.tabs,.tool-tabs,.ai-mode-grid,.guide-filters,.category-filters,.filter-row){ display:flex; flex-wrap:wrap; align-items:center; } body:not(.admin-shell) :is(.tabs,.tool-tabs,.ai-mode-grid,.guide-filters,.category-filters,.filter-row) > *{ margin:0!important; flex:0 0 auto; } /* ---------- Forms ---------- */ body:not(.admin-shell) .field-pair{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; } body:not(.admin-shell) :is(.field-pair,.form-row) > label{ min-width:0; } body:not(.admin-shell) :is(label,.field,.control){ min-width:0; } body:not(.admin-shell) :is(input,select,textarea){ max-width:100%; } body:not(.admin-shell) .check-row{ display:flex!important; align-items:center!important; gap:8px!important; flex-wrap:wrap; } body:not(.admin-shell) .check-row input{ flex:0 0 auto; margin:0!important; } /* ---------- Tool page panels ---------- */ body:not(.admin-shell) :is(.iai-layout,.aps-layout){ display:grid; gap:18px!important; align-items:start; } body:not(.admin-shell) .iai-hero{ display:grid!important; grid-template-columns:minmax(0,1fr) auto; gap:18px!important; align-items:start!important; } body:not(.admin-shell) .iai-privacy{ display:grid!important; gap:3px!important; justify-items:start; align-items:start; min-width:190px; } body:not(.admin-shell) .iai-privacy > *{ margin:0!important; } body:not(.admin-shell) .iai-tab > label:not(.check-row), body:not(.admin-shell) .aps-controls > label, body:not(.admin-shell) .aps-options > label{ display:grid; gap:6px; margin-bottom:12px; } /* ---------- Card grids ---------- */ body:not(.admin-shell) :is( .gtl-reference-tool-grid,.gtl-reference-guide-grid,.tool-grid,.guide-grid, .related-grid,.related-tools-grid,.related-guides-grid,.gtl-internal-category-grid ){ align-items:stretch!important; } body:not(.admin-shell) :is(.tool-card,.guide-card,.category-card,.related-card){ min-width:0!important; } body:not(.admin-shell) :is(.tool-card,.guide-card,.category-card,.related-card) > *{ min-width:0!important; } /* Tool cards: icon + content + action must never overlap */ body:not(.admin-shell) .gtl-reference-tool-grid .tool-card{ grid-template-columns:48px minmax(0,1fr) 30px!important; column-gap:12px!important; } body:not(.admin-shell) .gtl-reference-tool-grid .tool-card h3{ line-height:1.2!important; margin:0!important; } /* ---------- Related tools / related guides ---------- */ body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides){ overflow:visible!important; } body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) :is( .related-grid,.related-tools-grid,.related-guides-grid ){ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:16px!important; } body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) .related-card{ height:100%; padding:16px!important; } /* ---------- Guide page ---------- */ body:not(.admin-shell) .gtl-guide-controls{ display:grid!important; grid-template-columns:minmax(240px,420px) minmax(0,1fr)!important; gap:12px!important; align-items:center!important; } body:not(.admin-shell) .guide-filters{ display:flex!important; gap:8px!important; flex-wrap:wrap!important; align-items:center!important; } /* ---------- Code blocks ---------- */ body:not(.admin-shell) pre{ max-width:100%!important; overflow-x:auto!important; } body:not(.admin-shell) pre code{ white-space:pre!important; word-break:normal!important; overflow-wrap:normal!important; } /* ---------- Section spacing / accidental overlap ---------- */ body:not(.admin-shell) :is( .content-section,.related-tools,.related-section,.related-guides,.feedback-card,.tool-feedback ){ clear:both; position:relative; } body:not(.admin-shell) :is( .content-section,.related-tools,.related-section,.related-guides,.feedback-card,.tool-feedback ) + :is( .content-section,.related-tools,.related-section,.related-guides,.feedback-card,.tool-feedback ){ margin-top:20px!important; } /* ---------- Responsive ---------- */ @media (max-width:1180px){ body:not(.admin-shell) .nav-wrap{ grid-template-columns:auto minmax(190px,360px) minmax(0,1fr) auto auto; } body:not(.admin-shell) .gtl-get-started{ display:none; } body:not(.admin-shell) .main-nav{ gap:10px!important; } body:not(.admin-shell) .main-nav > a, body:not(.admin-shell) .mega-trigger > a{ font-size:.84rem!important; } } @media (max-width:960px){ body:not(.admin-shell) .nav-wrap{ grid-template-columns:auto minmax(180px,1fr) auto auto; } body:not(.admin-shell) .main-nav{ display:none!important; } body:not(.admin-shell) .iai-tabs{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } body:not(.admin-shell) .field-pair{ grid-template-columns:1fr!important; } body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) :is( .related-grid,.related-tools-grid,.related-guides-grid ){ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media (max-width:700px){ body:not(.admin-shell) .nav-wrap{ grid-template-columns:auto minmax(0,1fr) auto; } body:not(.admin-shell) .language-switcher{ display:none; } body:not(.admin-shell) .iai-hero{ grid-template-columns:1fr!important; } body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) :is( .related-grid,.related-tools-grid,.related-guides-grid ){ grid-template-columns:1fr!important; } body:not(.admin-shell) .gtl-guide-controls{ grid-template-columns:1fr!important; } } @media (max-width:520px){ body:not(.admin-shell) .iai-tabs{ grid-template-columns:1fr!important; } body:not(.admin-shell) :is( .toolbar,.iai-toolbar,.aps-toolbar,.tool-actions,.form-actions,.button-row,.action-row, .toolbar-actions,.editor-actions,.upload-actions,.download-actions ) > :is(button,.button,.button-secondary,.btn,a){ flex:1 1 100%!important; width:100%!important; } } /* V30 footer PWA install alignment fix */ .site-footer .footer-grid .footer-install{ justify-self:start !important; align-self:start !important; width:max-content !important; max-width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; text-align:left !important; line-height:1.35 !important; font:inherit !important; } /* assets/css/gettoolslab-layout-v26.css */ /* ============================================================== Get Tools Lab V26 — header menu + related-section alignment fix Structural only. Theme colors are left unchanged. ============================================================== */ /* ---------- HEADER: stop menu items from merging ---------- */ body:not(.admin-shell) .nav-wrap{ display:flex!important; align-items:center!important; gap:14px!important; width:100%; overflow:visible!important; } body:not(.admin-shell) .brand{ flex:0 0 auto!important; margin-right:18px!important; } body:not(.admin-shell) .enterprise-search{ flex:1 1 340px!important; min-width:260px!important; max-width:470px!important; margin-right:14px!important; } body:not(.admin-shell) .main-nav{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex:0 0 auto!important; gap:20px!important; margin:0!important; padding:0!important; } body:not(.admin-shell) .main-nav > a, body:not(.admin-shell) .main-nav > .mega-trigger, body:not(.admin-shell) .main-nav > .mega-trigger > a{ flex:0 0 auto!important; margin:0!important; padding:0!important; min-width:max-content!important; width:auto!important; white-space:nowrap!important; letter-spacing:0!important; line-height:1.2!important; } body:not(.admin-shell) .main-nav > .mega-trigger{ display:flex!important; align-items:center!important; } body:not(.admin-shell) .main-nav > a, body:not(.admin-shell) .main-nav > .mega-trigger > a{ display:inline-flex!important; align-items:center!important; min-height:38px!important; } body:not(.admin-shell) .gtl-get-started{ flex:0 0 auto!important; margin-left:2px!important; } body:not(.admin-shell) .language-switcher, body:not(.admin-shell) #themeToggle{ flex:0 0 auto!important; margin-left:0!important; } /* Keep spacing readable on smaller desktop widths. */ @media (max-width:1240px){ body:not(.admin-shell) .nav-wrap{gap:10px!important} body:not(.admin-shell) .brand{margin-right:8px!important} body:not(.admin-shell) .enterprise-search{ flex-basis:280px!important; min-width:220px!important; margin-right:8px!important; } body:not(.admin-shell) .main-nav{gap:13px!important} } @media (max-width:1060px){ body:not(.admin-shell) .gtl-get-started{display:none!important} body:not(.admin-shell) .main-nav{gap:11px!important} } @media (max-width:960px){ body:not(.admin-shell) .main-nav{display:none!important} body:not(.admin-shell) .enterprise-search{ max-width:none!important; flex:1 1 auto!important; } } /* ---------- RELATED TOOLS / GUIDES SECTION ---------- */ /* Normalize section padding and title-row alignment. */ body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides){ width:100%!important; margin-inline:auto!important; padding:24px!important; border-radius:20px!important; } body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) :is(.gtl-section-title-row,.section-title-row,.related-header,.section-header){ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:18px!important; margin-bottom:18px!important; } body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) :is(.gtl-section-title-row,.section-title-row,.related-header,.section-header) > *{ margin:0!important; } /* Eyebrow/badge buttons align to same left edge as heading and cards. */ body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) :is(.eyebrow,.badge,.section-eyebrow,.related-eyebrow){ margin:0 0 10px 0!important; align-self:flex-start!important; } /* Heading should sit directly below the eyebrow without drifting. */ body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) :is(h2,h3,.gtl-section-title){ margin:0!important; } /* Related tool cards: consistent height and internal alignment. */ body:not(.admin-shell) :is(.related-tools,.related-section) :is( .related-grid,.related-tools-grid ){ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:16px!important; align-items:stretch!important; } body:not(.admin-shell) :is(.related-tools,.related-section) .related-card{ display:grid!important; grid-template-columns:46px minmax(0,1fr) 22px!important; column-gap:14px!important; align-items:center!important; min-height:98px!important; height:100%!important; padding:16px!important; margin:0!important; } body:not(.admin-shell) :is(.related-tools,.related-section) .related-card > *{ min-width:0!important; margin:0!important; } body:not(.admin-shell) :is(.related-tools,.related-section) .related-card :is(h3,h4,strong){ margin:0 0 6px 0!important; line-height:1.2!important; } body:not(.admin-shell) :is(.related-tools,.related-section) .related-card p{ margin:0!important; line-height:1.45!important; } /* If related cards are anchors themselves, preserve same 3-column interior. */ body:not(.admin-shell) :is(.related-tools,.related-section) .related-card > a{ min-width:0!important; } /* Related guides: keep CTA on same baseline as heading row. */ body:not(.admin-shell) .related-guides :is(.view-all,.view-all-guides,.section-link){ flex:0 0 auto!important; align-self:flex-end!important; margin:0 0 4px 0!important; white-space:nowrap!important; } /* When title/link are direct children, align them too. */ body:not(.admin-shell) .related-guides{ position:relative; } body:not(.admin-shell) .related-guides > :is(.view-all,.view-all-guides,.section-link){ position:absolute; top:34px; right:24px; } /* ---------- Generic section stacking ---------- */ body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides) + :is(.related-tools,.related-section,.related-guides){ margin-top:20px!important; } /* ---------- Responsive related cards ---------- */ @media (max-width:920px){ body:not(.admin-shell) :is(.related-tools,.related-section) :is( .related-grid,.related-tools-grid ){ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media (max-width:640px){ body:not(.admin-shell) :is(.related-tools,.related-section,.related-guides){ padding:18px!important; } body:not(.admin-shell) :is(.related-tools,.related-section) :is( .related-grid,.related-tools-grid ){ grid-template-columns:1fr!important; } body:not(.admin-shell) .related-guides > :is(.view-all,.view-all-guides,.section-link){ position:static!important; display:inline-block; margin-top:10px!important; } } /* assets/css/gettoolslab-light-v31-guide-article.css */ /* Get Tools Lab V31 — guide article light-mode readability fix */ html[data-theme="light"] body:not(.admin-shell) .article-toc{ background:linear-gradient(145deg,#ffffff,#f7f9fd)!important; border:1px solid #d5dfef!important; color:#17233d!important; box-shadow:0 10px 28px rgba(43,62,102,.07)!important; } html[data-theme="light"] body:not(.admin-shell) .article-toc strong{ color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) .article-toc li{ color:#63728d!important; } html[data-theme="light"] body:not(.admin-shell) .article-toc a{ color:#168fc6!important; } html[data-theme="light"] body:not(.admin-shell) .article-toc a:hover{ color:#5b55df!important; } html[data-theme="light"] body:not(.admin-shell) .article-cta{ background:linear-gradient(135deg,#ffffff 0%,#f1f6ff 55%,#f8f3ff 100%)!important; border:1px solid #d5dfef!important; color:#17233d!important; box-shadow:0 10px 28px rgba(43,62,102,.07)!important; } html[data-theme="light"] body:not(.admin-shell) .article-cta h2{ color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) .article-cta p{ color:#63728d!important; } html[data-theme="light"] body:not(.admin-shell) .article-cta .guide-button{ color:#fff!important; } html[data-theme="light"] body:not(.admin-shell) .article-pagination>a{ background:linear-gradient(145deg,#ffffff,#f7f9fd)!important; border:1px solid #d5dfef!important; color:#17233d!important; box-shadow:0 8px 22px rgba(43,62,102,.06)!important; } html[data-theme="light"] body:not(.admin-shell) .article-pagination>a:hover{ background:#ffffff!important; border-color:#9eb7e8!important; box-shadow:0 12px 28px rgba(43,62,102,.10)!important; } html[data-theme="light"] body:not(.admin-shell) .article-pagination>a span{ color:#667590!important; opacity:1!important; } html[data-theme="light"] body:not(.admin-shell) .article-pagination>a strong{ color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) .related-guides{ background:transparent!important; color:#17233d!important; } html[data-theme="light"] body:not(.admin-shell) .related-guides h2{ color:#17233d!important; } /* assets/css/accessibility-v48.css */ /* Get Tools Lab V48 accessibility hardening */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--ui-primary,#6758e8) 72%,#19cfff);outline-offset:3px} :where(button,.button,.btn,input[type=button],input[type=submit],select){min-height:42px} :where(input,select,textarea){font-size:16px} .status[role="status"],.form-status[role="status"]{min-height:1.4em} .status.error,[role="alert"].error{border-color:#c93652!important} .status.success{border-color:#1f9d62!important} .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .qc-answer-grid,.qc-test-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .qc-answer-grid>div,.qc-test-grid>article,.qc-processing-card,.qc-methodology{border:1px solid var(--border);border-radius:16px;background:var(--surface-2);padding:18px} .qc-answer-grid h3,.qc-test-grid strong{margin-top:0}.qc-test-grid p{margin-bottom:0} .qc-processing-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr);gap:22px} .qc-trust-meta{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 12px;align-content:start} .qc-troubleshooting{display:grid;gap:8px} .qc-method-links{display:flex;gap:10px;flex-wrap:wrap}.qc-method-links a{font-weight:800;text-decoration:underline;text-underline-offset:3px} .qc-json-meta{margin:10px 0;padding:10px 12px;border:1px solid var(--border);border-radius:12px;color:var(--muted);background:var(--surface-2)} .qc-qr-output{display:grid;place-items:center;min-height:40px;margin-top:18px}.qc-qr-output img,.qc-qr-output canvas{background:#fff;padding:10px;border-radius:12px} @media(max-width:720px){.qc-answer-grid,.qc-test-grid,.qc-processing-card{grid-template-columns:1fr}.qc-trust-meta{grid-template-columns:1fr}.qc-trust-meta strong{margin-top:8px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} /* assets/css/tool-runtime-v49.css */ .qc-file-zone{position:relative;outline:none}.qc-file-zone.is-dragover{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary,#6758e8) 42%,transparent)!important;transform:translateY(-1px)} .qc-file-meta{display:flex;flex-wrap:wrap;gap:7px 12px;justify-content:center;margin:10px 0;color:var(--muted);font-size:.84rem}.qc-file-meta span{max-width:100%;overflow-wrap:anywhere} .qc-file-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px} .status[data-state="processing"],.form-status[data-state="processing"]{border-left:4px solid #6c5cff}.status[data-state="success"],.form-status[data-state="success"]{border-left:4px solid #1b9b61}.status[data-state="warning"],.form-status[data-state="warning"]{border-left:4px solid #c58b16}.status[data-state="error"],.form-status[data-state="error"]{border-left:4px solid #c43d57} body[data-tool-state="processing"] .tool-panel button[disabled]{cursor:wait} .qc-priority-answer{margin:14px 0 20px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}.qc-priority-answer strong{display:block;margin-bottom:5px} .qc-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.qc-purpose-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.qc-purpose-card{border:1px solid var(--border);border-radius:15px;background:var(--surface-2);padding:15px} @media(max-width:680px){.qc-purpose-grid{grid-template-columns:1fr}.qc-file-actions>.button{flex:1 1 140px}} .qc-tool-statebar{display:flex;align-items:center;gap:9px;margin:10px 0 16px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:.84rem} .qc-tool-statebar strong{color:var(--text)}.qc-state-dot{width:9px;height:9px;border-radius:50%;background:#6b7280;box-shadow:0 0 0 4px color-mix(in srgb,#6b7280 16%,transparent)} .qc-tool-statebar[data-state="processing"] .qc-state-dot{background:#6c5cff}.qc-tool-statebar[data-state="success"] .qc-state-dot{background:#1b9b61}.qc-tool-statebar[data-state="warning"] .qc-state-dot{background:#c58b16}.qc-tool-statebar[data-state="error"] .qc-state-dot{background:#c43d57} @media(max-width:600px){.qc-tool-statebar{align-items:flex-start;flex-wrap:wrap}.qc-tool-statebar>span:last-child{flex-basis:100%;padding-left:18px}} /* V50 production hardening */ .tool-panel input,.tool-panel textarea,.tool-panel select{max-width:100%}.tool-actions,.controls,.row{flex-wrap:wrap;gap:10px}.qc-verification-record li{margin:.5rem 0}.tool-status-badge{white-space:nowrap}.qc-form-grid>*{min-width:0}.markdown-grid>*{min-width:0} @media(max-width:520px){.tool-actions>.button,.tool-actions>button,.controls>.button,.controls>button{min-height:44px}.qc-test-grid{grid-template-columns:1fr}.markdown-grid{grid-template-columns:1fr!important}.tool-panel textarea{min-height:150px}} /* V55.2 targeted header CTA alignment patch — keep Get Started label centered and intact. */ body:not(.admin-shell) .gtl-get-started{ box-sizing:border-box!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; white-space:nowrap!important; line-height:1!important; min-width:104px!important; padding-inline:14px!important; } /* V55.3 targeted header CTA parity patch — identical Get Started control on home and inner pages. */ body:not(.admin-shell) .gtl-get-started{ box-sizing:border-box!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:118px!important; min-width:118px!important; height:42px!important; min-height:42px!important; padding:0 12px!important; margin-left:2px!important; border-radius:13px!important; font-size:.88rem!important; font-weight:800!important; line-height:1!important; letter-spacing:0!important; text-align:center!important; white-space:nowrap!important; } /* V56 canonical header CTA sizing; replaces the former inline emergency style without visual change. */ body:not(.admin-shell) .gtl-get-started{flex:0 0 128px!important;width:128px!important;min-width:128px!important;max-width:128px!important;height:42px!important;min-height:42px!important;padding:0 12px!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:nowrap!important;line-height:1!important;box-sizing:border-box!important} /* V57.1 targeted patch: force exact Get Started CTA parity on home and inner headers. */ body:not(.admin-shell).gtl-home .main-nav > a.gtl-get-started, body:not(.admin-shell):not(.gtl-home) .main-nav > a.gtl-get-started{ display:inline-flex!important; flex:0 0 128px!important; width:128px!important; min-width:128px!important; max-width:128px!important; height:42px!important; min-height:42px!important; max-height:42px!important; margin-left:2px!important; padding:0 12px!important; box-sizing:border-box!important; align-items:center!important; justify-content:center!important; text-align:center!important; white-space:nowrap!important; overflow:visible!important; font-size:.88rem!important; font-weight:800!important; line-height:1!important; letter-spacing:0!important; border-radius:13px!important; color:#fff!important; background:linear-gradient(90deg,#05bfff,#7559ff 58%,#dd3be9)!important; box-shadow:0 10px 26px rgba(86,70,255,.28)!important; } /* ========================================================== V57.2 targeted visual patch — homepage hero + header parity - Hide only the source artwork's built-in right-edge padding without cropping visible artwork. - Keep the hero image aspect ratio responsive. - Match homepage header/logo horizontal alignment to inner pages. ========================================================== */ /* Match the homepage header container to the inner-page header geometry. */ body.gtl-home:not(.admin-shell) .site-header > .container.nav-wrap{ width:min(1400px,calc(100% - 64px))!important; max-width:1400px!important; margin-inline:auto!important; } /* The source WEBP contains ~4.7% dark padding on its right edge. Scale that padding just outside the clipping box while keeping the actual artwork fully visible and proportional. */ body.gtl-home:not(.admin-shell) .gtl-hero-art{ overflow:hidden!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art img{ display:block!important; width:105%!important; max-width:none!important; height:auto!important; max-height:none!important; object-fit:contain!important; object-position:left center!important; flex:0 0 auto!important; } @media(max-width:980px){ body.gtl-home:not(.admin-shell) .site-header > .container.nav-wrap{ width:min(100% - 30px,1400px)!important; } } @media(max-width:640px){ body.gtl-home:not(.admin-shell) .site-header > .container.nav-wrap{ width:min(100% - 24px,1400px)!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art img{ width:105%!important; } } /* ========================================================== V57.3 targeted hero-image source repair - The source WEBP contained 36px of baked-in pure-black right padding. - The asset is now cropped to the actual 724x330 artwork bounds. - Render proportionally at every viewport; no cover/zoom/crop tricks. ========================================================== */ body.gtl-home:not(.admin-shell) .gtl-hero-art{ overflow:hidden!important; min-width:0!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art img{ display:block!important; width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; aspect-ratio:724 / 330!important; object-fit:contain!important; object-position:center center!important; flex:0 1 auto!important; margin:0!important; } @media(max-width:900px){ body.gtl-home:not(.admin-shell) .gtl-hero-art{ width:100%!important; max-width:724px!important; margin-inline:auto!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art img{ width:100%!important; } } /* ========================================================== V57.7 exact-reference hero patch - Use the hero artwork extracted directly from the approved reference. - Desktop: free-standing top-right visual, not constrained to the old image box. - Preserve the full laptop/base/icons without crop/cover behavior. - Mobile/tablet: return to normal document flow for safe responsiveness. ========================================================== */ body.gtl-home:not(.admin-shell) .gtl-hero{ position:relative!important; min-height:565px!important; overflow:visible!important; padding-top:30px!important; padding-bottom:26px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-grid{ position:relative!important; min-height:505px!important; grid-template-columns:minmax(0,48%) minmax(0,52%)!important; align-items:start!important; overflow:visible!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ position:relative!important; z-index:3!important; max-width:660px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art{ position:absolute!important; z-index:2!important; top:-10px!important; right:-18px!important; width:min(64vw,890px)!important; max-width:none!important; min-height:0!important; height:auto!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; overflow:visible!important; display:block!important; isolation:auto!important; pointer-events:none!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art:before, body.gtl-home:not(.admin-shell) .gtl-hero-art:after{ content:none!important; display:none!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art img{ display:block!important; width:100%!important; height:auto!important; max-width:none!important; max-height:none!important; aspect-ratio:auto!important; object-fit:contain!important; object-position:center!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; mix-blend-mode:normal!important; } @media(max-width:1180px){ body.gtl-home:not(.admin-shell) .gtl-hero{min-height:520px!important} body.gtl-home:not(.admin-shell) .gtl-hero-grid{min-height:460px!important} body.gtl-home:not(.admin-shell) .gtl-hero-art{ width:min(61vw,760px)!important; top:18px!important; right:-10px!important; } } @media(max-width:900px){ body.gtl-home:not(.admin-shell) .gtl-hero{ min-height:0!important; overflow:hidden!important; } body.gtl-home:not(.admin-shell) .gtl-hero-grid{ display:grid!important; grid-template-columns:1fr!important; min-height:0!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art{ position:relative!important; inset:auto!important; order:-1!important; width:min(100%,760px)!important; max-width:760px!important; margin:0 auto 10px!important; pointer-events:auto!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ max-width:none!important; } } @media(max-width:640px){ body.gtl-home:not(.admin-shell) .gtl-hero-art{ width:108%!important; max-width:none!important; margin-left:-4%!important; margin-right:-4%!important; } } /* ========================================================== V57.8 targeted hero scale/position patch - Keep the approved reference artwork free-standing at top-right. - Reduce desktop scale so it cannot overlap hero copy/actions. - Preserve full artwork with contain rendering and responsive stacking. ========================================================== */ body.gtl-home:not(.admin-shell) .gtl-hero-grid{ grid-template-columns:minmax(0,50%) minmax(0,50%)!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ max-width:650px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art{ top:12px!important; right:4px!important; width:min(52vw,700px)!important; max-width:700px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art img{ width:100%!important; max-width:100%!important; height:auto!important; object-fit:contain!important; } @media(max-width:1180px){ body.gtl-home:not(.admin-shell) .gtl-hero-art{ top:24px!important; right:0!important; width:min(50vw,620px)!important; max-width:620px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ max-width:600px!important; } } @media(max-width:980px){ body.gtl-home:not(.admin-shell) .gtl-hero-grid{ grid-template-columns:minmax(0,52%) minmax(0,48%)!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art{ width:min(47vw,520px)!important; max-width:520px!important; top:38px!important; } } @media(max-width:900px){ body.gtl-home:not(.admin-shell) .gtl-hero-grid{ grid-template-columns:1fr!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art{ position:relative!important; inset:auto!important; width:min(100%,720px)!important; max-width:720px!important; margin:0 auto 14px!important; } } @media(max-width:640px){ body.gtl-home:not(.admin-shell) .gtl-hero-art{ width:100%!important; max-width:100%!important; margin:0 auto 12px!important; } } /* ========================================================== V57.9 targeted hero containment patch - Remove absolute positioning that allowed artwork to overlap copy. - Desktop: true two-column layout, art contained entirely in right column. - Tablet/mobile: stack safely with proportional artwork. ========================================================== */ body.gtl-home:not(.admin-shell) .gtl-hero{ min-height:0!important; overflow:hidden!important; } body.gtl-home:not(.admin-shell) .gtl-hero-grid{ display:grid!important; grid-template-columns:minmax(0,46%) minmax(0,54%)!important; gap:clamp(28px,4vw,58px)!important; align-items:start!important; min-height:0!important; overflow:visible!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ grid-column:1!important; position:relative!important; z-index:2!important; width:100%!important; max-width:620px!important; min-width:0!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art{ grid-column:2!important; position:relative!important; inset:auto!important; z-index:1!important; justify-self:end!important; align-self:start!important; width:100%!important; max-width:650px!important; min-width:0!important; height:auto!important; margin:2px 0 0!important; padding:0!important; overflow:visible!important; pointer-events:none!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art img{ display:block!important; width:100%!important; max-width:100%!important; height:auto!important; object-fit:contain!important; object-position:center top!important; margin:0!important; } @media(max-width:1180px){ body.gtl-home:not(.admin-shell) .gtl-hero-grid{ grid-template-columns:minmax(0,48%) minmax(0,52%)!important; gap:26px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{max-width:570px!important} body.gtl-home:not(.admin-shell) .gtl-hero-art{max-width:570px!important;margin-top:10px!important} } @media(max-width:1020px){ body.gtl-home:not(.admin-shell) .gtl-hero-grid{ grid-template-columns:1fr!important; gap:18px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ grid-column:1!important; max-width:none!important; order:1!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art{ grid-column:1!important; order:2!important; justify-self:center!important; width:min(100%,720px)!important; max-width:720px!important; margin:0 auto!important; pointer-events:auto!important; } } @media(max-width:640px){ body.gtl-home:not(.admin-shell) .gtl-hero-grid{gap:14px!important} body.gtl-home:not(.admin-shell) .gtl-hero-art{ width:100%!important; max-width:100%!important; margin:0 auto!important; } } /* V57.10 targeted visual patch: dimensional 3D site background. Decorative layers only; no layout, content, tool or interaction changes. */ html{ background:#020716; } body:not(.admin-shell){ position:relative; isolation:isolate; background: radial-gradient(ellipse 70% 48% at 78% 8%,rgba(31,92,255,.18),transparent 68%), radial-gradient(ellipse 52% 42% at 17% 34%,rgba(0,205,255,.10),transparent 70%), radial-gradient(ellipse 58% 46% at 69% 72%,rgba(132,48,255,.13),transparent 72%), linear-gradient(155deg,#020716 0%,#03091a 38%,#07112b 68%,#020713 100%)!important; background-attachment:fixed!important; } body:not(.admin-shell)::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: linear-gradient(rgba(66,137,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(66,137,255,.035) 1px,transparent 1px); background-size:64px 64px; transform:perspective(720px) rotateX(62deg) scale(1.8) translateY(19%); transform-origin:center bottom; -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.78),transparent 70%); mask-image:linear-gradient(to top,rgba(0,0,0,.78),transparent 70%); opacity:.62; } body:not(.admin-shell)::after{ content:""; position:fixed; inset:-12%; z-index:-1; pointer-events:none; background: radial-gradient(circle at 12% 24%,rgba(0,216,255,.17) 0 1px,transparent 2px), radial-gradient(circle at 84% 18%,rgba(124,82,255,.20) 0 1.5px,transparent 2.5px), radial-gradient(circle at 74% 76%,rgba(235,50,255,.13) 0 1px,transparent 2px), radial-gradient(ellipse 18% 12% at 84% 36%,rgba(0,181,255,.13),transparent 72%), radial-gradient(ellipse 22% 15% at 22% 68%,rgba(126,60,255,.11),transparent 74%); filter:blur(.15px); opacity:.9; } body:not(.admin-shell) .site-header{ background:linear-gradient(180deg,rgba(2,7,22,.94),rgba(2,7,22,.80))!important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } body:not(.admin-shell) main, body:not(.admin-shell) .site-main{ position:relative; z-index:1; } /* Light mode keeps the same dimensional language without sacrificing contrast. */ html[data-theme="light"] body:not(.admin-shell), body[data-theme="light"]:not(.admin-shell){ background: radial-gradient(ellipse 66% 44% at 82% 7%,rgba(68,102,255,.14),transparent 68%), radial-gradient(ellipse 52% 40% at 14% 35%,rgba(0,184,230,.10),transparent 70%), radial-gradient(ellipse 56% 44% at 68% 76%,rgba(145,76,255,.10),transparent 72%), linear-gradient(155deg,#f8fbff 0%,#eef5ff 42%,#f5f0ff 72%,#fbfdff 100%)!important; } html[data-theme="light"] body:not(.admin-shell)::before, body[data-theme="light"]:not(.admin-shell)::before{ background: linear-gradient(rgba(48,89,170,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(48,89,170,.055) 1px,transparent 1px); background-size:64px 64px; opacity:.48; } html[data-theme="light"] body:not(.admin-shell)::after, body[data-theme="light"]:not(.admin-shell)::after{ opacity:.48; } @media (max-width:767px){ body:not(.admin-shell){ background-attachment:scroll!important; } body:not(.admin-shell)::before{ background-size:46px 46px; transform:perspective(620px) rotateX(65deg) scale(2.1) translateY(22%); opacity:.42; } body:not(.admin-shell)::after{ opacity:.62; } } @media (prefers-reduced-motion:reduce){ body:not(.admin-shell)::before, body:not(.admin-shell)::after{transform:none;} } /* V57.11 — 3D Digital Grid Lab (selected visual direction) Theme/background patch only. Keeps all existing page structure and components intact. */ body:not(.admin-shell){ --gtl-grid-line:rgba(70,119,255,.14); --gtl-grid-line-strong:rgba(26,207,255,.20); --gtl-glow-cyan:rgba(0,210,255,.18); --gtl-glow-violet:rgba(122,70,255,.18); --gtl-glow-pink:rgba(239,45,255,.12); background: radial-gradient(ellipse 55% 32% at 82% 7%,rgba(39,92,255,.22),transparent 70%), radial-gradient(ellipse 42% 30% at 13% 32%,rgba(0,200,255,.12),transparent 72%), radial-gradient(ellipse 54% 34% at 62% 72%,rgba(139,60,255,.15),transparent 72%), linear-gradient(155deg,#020615 0%,#03091c 42%,#071431 72%,#020612 100%)!important; } /* Atmospheric star field + volumetric light. */ body:not(.admin-shell)::after{ inset:0!important; opacity:1!important; background: radial-gradient(circle at 9% 14%,rgba(89,203,255,.75) 0 1px,transparent 1.8px), radial-gradient(circle at 17% 54%,rgba(144,89,255,.68) 0 1.2px,transparent 2px), radial-gradient(circle at 36% 18%,rgba(255,77,239,.62) 0 1px,transparent 1.8px), radial-gradient(circle at 68% 12%,rgba(75,185,255,.78) 0 1.2px,transparent 2px), radial-gradient(circle at 87% 33%,rgba(139,82,255,.72) 0 1px,transparent 1.8px), radial-gradient(circle at 92% 78%,rgba(0,225,255,.62) 0 1px,transparent 1.8px), radial-gradient(ellipse 26% 18% at 86% 14%,rgba(38,94,255,.18),transparent 72%), radial-gradient(ellipse 22% 15% at 20% 68%,rgba(137,56,255,.13),transparent 74%)!important; background-size:auto!important; filter:none!important; } /* Perspective digital floor. The grid starts below the content horizon, so it adds depth without hurting readability. */ body:not(.admin-shell)::before{ inset:auto -18vw -28vh -18vw!important; height:76vh!important; opacity:.86!important; background: linear-gradient(to right,var(--gtl-grid-line) 1px,transparent 1px), linear-gradient(to bottom,var(--gtl-grid-line-strong) 1px,transparent 1px)!important; background-size:64px 64px!important; transform:perspective(760px) rotateX(62deg) scale(1.35)!important; transform-origin:center bottom!important; -webkit-mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.92) 58%,transparent 100%)!important; mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.92) 58%,transparent 100%)!important; box-shadow:inset 0 22px 90px rgba(0,182,255,.08)!important; } /* Homepage gets a stronger sci‑fi horizon while preserving the exact hero layout. */ body.gtl-home:not(.admin-shell) .gtl-hero{ position:relative; isolation:isolate; overflow:hidden; background: radial-gradient(ellipse 62% 38% at 78% 32%,rgba(27,97,255,.18),transparent 68%), radial-gradient(ellipse 46% 30% at 46% 72%,rgba(218,41,255,.11),transparent 70%), transparent!important; } body.gtl-home:not(.admin-shell) .gtl-hero::before{ content:""; position:absolute; z-index:-2; left:-12%;right:-12%;bottom:-48%;height:72%; pointer-events:none; background: linear-gradient(to right,rgba(35,115,255,.18) 1px,transparent 1px), linear-gradient(to bottom,rgba(0,220,255,.24) 1px,transparent 1px); background-size:56px 56px; transform:perspective(720px) rotateX(64deg) scale(1.2); transform-origin:center bottom; -webkit-mask-image:linear-gradient(to top,#000 26%,rgba(0,0,0,.85) 64%,transparent 100%); mask-image:linear-gradient(to top,#000 26%,rgba(0,0,0,.85) 64%,transparent 100%); } body.gtl-home:not(.admin-shell) .gtl-hero::after{ content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background: radial-gradient(circle at 76% 38%,rgba(0,221,255,.24),transparent 1.8%), radial-gradient(circle at 84% 27%,rgba(132,74,255,.26),transparent 1.6%), radial-gradient(circle at 62% 17%,rgba(255,53,226,.22),transparent 1.4%), linear-gradient(90deg,transparent 0 48%,rgba(0,208,255,.06) 50%,transparent 52%); filter:drop-shadow(0 0 20px rgba(0,201,255,.12)); } /* Give foreground surfaces a subtle floating/glass depth without changing layout geometry. */ body:not(.admin-shell) :is(.tool-card,.category-card,.gtl-feature-card,.gtl-guide-card,.tool-panel,.dashboard-panel){ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 18px 44px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035); } body:not(.admin-shell) :is(.tool-card,.category-card,.gtl-feature-card,.gtl-guide-card):hover{ box-shadow:0 24px 56px rgba(0,0,0,.28),0 0 26px rgba(67,111,255,.08),inset 0 1px 0 rgba(255,255,255,.05); } /* Light mode: same 3D grid language with restrained contrast. */ html[data-theme="light"] body:not(.admin-shell), body[data-theme="light"]:not(.admin-shell){ --gtl-grid-line:rgba(66,101,177,.075); --gtl-grid-line-strong:rgba(25,151,213,.105); background: radial-gradient(ellipse 56% 34% at 82% 7%,rgba(81,105,255,.13),transparent 70%), radial-gradient(ellipse 44% 30% at 12% 32%,rgba(0,188,222,.09),transparent 72%), radial-gradient(ellipse 52% 34% at 62% 72%,rgba(145,80,255,.08),transparent 72%), linear-gradient(155deg,#fbfdff 0%,#f2f7ff 44%,#f7f3ff 74%,#fbfdff 100%)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background: radial-gradient(ellipse 62% 38% at 78% 32%,rgba(72,105,255,.10),transparent 68%), radial-gradient(ellipse 46% 30% at 46% 72%,rgba(198,73,255,.06),transparent 70%), transparent!important; } html[data-theme="light"] body:not(.admin-shell)::after, body[data-theme="light"]:not(.admin-shell)::after{opacity:.48!important} @media(max-width:900px){ body:not(.admin-shell)::before{height:56vh!important;bottom:-22vh!important;opacity:.58!important;background-size:52px 52px!important} body.gtl-home:not(.admin-shell) .gtl-hero::before{bottom:-34%;height:54%;background-size:46px 46px;opacity:.55} } @media(max-width:600px){ body:not(.admin-shell)::before{opacity:.36!important;background-size:42px 42px!important} body.gtl-home:not(.admin-shell) .gtl-hero::before{opacity:.34;background-size:40px 40px} } /* ========================================================== V57.12 — Visible 3D Digital Grid Lab background Uses a rendered environment asset directly on the hero so the 3D scene cannot be hidden by earlier page/background layers. ========================================================== */ body.gtl-home:not(.admin-shell) .gtl-hero{ position:relative!important; isolation:isolate!important; overflow:hidden!important; background-color:#020716!important; background-image: linear-gradient(90deg,rgba(1,5,18,.64) 0%,rgba(1,5,18,.46) 31%,rgba(1,5,18,.10) 58%,rgba(1,5,18,.02) 100%), url('/assets/brand/home/3d-grid-lab-bg-v5712.webp')!important; background-repeat:no-repeat!important; background-position:center center!important; background-size:cover!important; } body.gtl-home:not(.admin-shell) .gtl-hero::before, body.gtl-home:not(.admin-shell) .gtl-hero::after{ content:none!important; display:none!important; } body.gtl-home:not(.admin-shell) .gtl-hero-grid{ position:relative!important; z-index:2!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ text-shadow:0 2px 18px rgba(0,0,0,.35)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image: linear-gradient(90deg,rgba(248,251,255,.92) 0%,rgba(248,251,255,.78) 35%,rgba(248,251,255,.22) 68%,rgba(248,251,255,.08) 100%), url('/assets/brand/home/3d-grid-lab-bg-v5712.webp')!important; background-blend-mode:screen,normal!important; } @media(max-width:1020px){ body.gtl-home:not(.admin-shell) .gtl-hero{ background-position:62% center!important; } } @media(max-width:720px){ body.gtl-home:not(.admin-shell) .gtl-hero{ background-image: linear-gradient(180deg,rgba(1,5,18,.72) 0%,rgba(1,5,18,.58) 56%,rgba(1,5,18,.34) 100%), url('/assets/brand/home/3d-grid-lab-bg-v5712.webp')!important; background-position:center center!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image: linear-gradient(180deg,rgba(248,251,255,.92),rgba(248,251,255,.68)), url('/assets/brand/home/3d-grid-lab-bg-v5712.webp')!important; } } /* ========================================================== V57.13 — Unified 3D hero composition The laptop/tool artwork is baked into the 3D grid environment. This removes the separate rectangular hero picture entirely. ========================================================== */ body.gtl-home:not(.admin-shell) .gtl-hero{ background-color:#020716!important; background-image: linear-gradient(90deg,rgba(1,5,18,.30) 0%,rgba(1,5,18,.16) 34%,rgba(1,5,18,.015) 57%,rgba(1,5,18,0) 100%), url('/assets/brand/home/3d-grid-lab-unified-hero-v5713.webp')!important; background-repeat:no-repeat!important; background-position:center center!important; background-size:cover!important; } body.gtl-home:not(.admin-shell) .gtl-hero-art{ display:none!important; } body.gtl-home:not(.admin-shell) .gtl-hero-grid{ grid-template-columns:minmax(0, 47rem) 1fr!important; min-height:510px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ position:relative!important; z-index:3!important; max-width:47rem!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image: linear-gradient(90deg,rgba(248,251,255,.90) 0%,rgba(248,251,255,.72) 36%,rgba(248,251,255,.10) 65%,rgba(248,251,255,.03) 100%), url('/assets/brand/home/3d-grid-lab-unified-hero-v5713.webp')!important; background-blend-mode:screen,normal!important; } @media(max-width:1100px){ body.gtl-home:not(.admin-shell) .gtl-hero{ background-position:58% center!important; } body.gtl-home:not(.admin-shell) .gtl-hero-grid{ grid-template-columns:minmax(0, 42rem) 1fr!important; } } @media(max-width:820px){ body.gtl-home:not(.admin-shell) .gtl-hero{ background-position:66% center!important; } body.gtl-home:not(.admin-shell) .gtl-hero-grid{ grid-template-columns:1fr!important; min-height:560px!important; } body.gtl-home:not(.admin-shell) .gtl-hero-copy{ max-width:39rem!important; } } @media(max-width:600px){ body.gtl-home:not(.admin-shell) .gtl-hero{ background-position:62% center!important; background-image: linear-gradient(180deg,rgba(1,5,18,.72) 0%,rgba(1,5,18,.58) 58%,rgba(1,5,18,.20) 100%), url('/assets/brand/home/3d-grid-lab-unified-hero-v5713.webp')!important; } body.gtl-home:not(.admin-shell) .gtl-hero-grid{ min-height:520px!important; } } /* ========================================================== V57.14 — Light-mode unified 3D hero correction Dedicated light artwork + explicit contrast. Dark mode unchanged. ========================================================== */ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-color:#f5f9ff!important; background-image: linear-gradient(90deg,rgba(248,251,255,.96) 0%,rgba(248,251,255,.88) 30%,rgba(248,251,255,.52) 48%,rgba(248,251,255,.18) 66%,rgba(248,251,255,.06) 100%), url('/assets/brand/home/3d-grid-lab-unified-hero-light-v5714.webp')!important; background-blend-mode:normal!important; background-repeat:no-repeat!important; background-position:center center!important; background-size:100% auto!important; border-color:#d7e2f3!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy{ text-shadow:none!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero h1, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero h1{ color:#0d1930!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-kicker, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-kicker{ color:#075b78!important; text-shadow:none!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-description, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-description{ color:#42516a!important; text-shadow:none!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-badge, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-badge{ color:#173052!important; background:rgba(255,255,255,.88)!important; border-color:#becce3!important; box-shadow:0 10px 28px rgba(39,75,135,.10),inset 0 1px 0 rgba(255,255,255,.96)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-trust-row, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-trust-row{ color:#44536b!important; text-shadow:none!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-btn-ghost, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-btn-ghost{ color:#14203a!important; background:rgba(255,255,255,.78)!important; border-color:#b8c8e2!important; box-shadow:0 10px 26px rgba(39,75,135,.08)!important; } @media(max-width:820px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-size:cover!important; background-position:61% center!important; background-image: linear-gradient(180deg,rgba(248,251,255,.97) 0%,rgba(248,251,255,.90) 49%,rgba(248,251,255,.58) 72%,rgba(248,251,255,.22) 100%), url('/assets/brand/home/3d-grid-lab-unified-hero-light-v5714.webp')!important; } } @media(max-width:600px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-position:64% center!important; } } /* ========================================================== V57.15 — Light hero full-background + local text shade Show the complete 1920x760 3D composition in light mode and restrict readability shading to the left content block only. ========================================================== */ @media (min-width:821px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ min-height:clamp(510px,39.583vw,760px)!important; background-color:#eef5ff!important; background-image:url('/assets/brand/home/3d-grid-lab-unified-hero-light-v5714.webp')!important; background-repeat:no-repeat!important; background-position:center top!important; background-size:100% auto!important; background-blend-mode:normal!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-grid, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-grid{ min-height:clamp(510px,39.583vw,760px)!important; align-items:center!important; } } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy{ position:relative!important; z-index:3!important; padding:24px 28px 22px!important; border-radius:26px!important; background:linear-gradient(105deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.82) 68%,rgba(255,255,255,.46) 88%,rgba(255,255,255,.10) 100%)!important; border:1px solid rgba(255,255,255,.58)!important; box-shadow:0 18px 48px rgba(43,73,126,.10),inset 0 1px 0 rgba(255,255,255,.92)!important; backdrop-filter:blur(8px) saturate(1.03)!important; -webkit-backdrop-filter:blur(8px) saturate(1.03)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy::before, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy::before{ content:none!important; } @media(max-width:820px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image:url('/assets/brand/home/3d-grid-lab-unified-hero-light-v5714.webp')!important; background-repeat:no-repeat!important; background-position:68% center!important; background-size:cover!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy{ padding:20px 20px 18px!important; border-radius:22px!important; background:rgba(255,255,255,.86)!important; } } /* ========================================================== V57.18 — Exact light hero visibility + feathered text shade Full 3D light artwork remains visible; only the left copy gets a soft edge-free readability glow. Dark mode is untouched. ========================================================== */ @media (min-width:821px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ min-height:clamp(520px,39.583vw,760px)!important; background-color:#eaf5ff!important; background-image:url('/assets/brand/home/3d-grid-lab-unified-hero-light-v5718.webp')!important; background-repeat:no-repeat!important; background-position:center top!important; background-size:100% auto!important; background-blend-mode:normal!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-grid, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-grid{ min-height:clamp(520px,39.583vw,760px)!important; align-items:center!important; } } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy{ position:relative!important; z-index:3!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; isolation:isolate!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy::before, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy::before{ content:""!important; display:block!important; position:absolute!important; z-index:-1!important; pointer-events:none!important; left:-72px!important; top:-72px!important; width:calc(100% + 210px)!important; height:calc(100% + 144px)!important; border:0!important; border-radius:0!important; background: radial-gradient(ellipse 88% 82% at 34% 50%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.89) 37%, rgba(246,251,255,.72) 56%, rgba(241,248,255,.42) 70%, rgba(241,248,255,.16) 82%, rgba(241,248,255,0) 100%)!important; filter:blur(5px)!important; opacity:1!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero h1, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero h1{ color:#07172f!important; text-shadow:0 1px 1px rgba(255,255,255,.28)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-kicker, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-kicker{ color:#08688c!important; text-shadow:none!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-description, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-description{ color:#263b59!important; text-shadow:none!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-badge, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-badge{ color:#15365f!important; background:rgba(255,255,255,.88)!important; border-color:rgba(159,185,220,.78)!important; box-shadow:0 8px 24px rgba(48,84,140,.09),inset 0 1px 0 rgba(255,255,255,.96)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-trust-row, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-trust-row{ color:#283f5e!important; text-shadow:none!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-btn-ghost, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-btn-ghost{ color:#10213b!important; background:rgba(255,255,255,.88)!important; border-color:#b8cbe5!important; box-shadow:0 10px 26px rgba(50,82,132,.08)!important; } @media(max-width:820px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image:url('/assets/brand/home/3d-grid-lab-unified-hero-light-v5718.webp')!important; background-repeat:no-repeat!important; background-position:68% center!important; background-size:cover!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy::before, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy::before{ left:-36px!important; top:-42px!important; width:calc(100% + 90px)!important; height:calc(100% + 84px)!important; background:radial-gradient(ellipse 92% 86% at 38% 50%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 48%,rgba(247,251,255,.52) 72%,rgba(247,251,255,0) 100%)!important; } } /* ========================================================== V57.19 — Light blue hero parity patch Keeps dark mode untouched. Uses a brighter cyan/blue 3D hero with only a soft feather behind the left copy. ========================================================== */ @media (min-width:821px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ min-height:clamp(520px,39.583vw,760px)!important; background-color:#eaf7ff!important; background-image:url('/assets/brand/home/3d-grid-lab-unified-hero-light-v5719.webp')!important; background-repeat:no-repeat!important; background-position:center top!important; background-size:100% auto!important; background-blend-mode:normal!important; } } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy{ background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy::before, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy::before{ content:""!important; display:block!important; position:absolute!important; z-index:-1!important; pointer-events:none!important; left:-78px!important; top:-74px!important; width:calc(100% + 205px)!important; height:calc(100% + 148px)!important; border:0!important; border-radius:0!important; background:radial-gradient( ellipse 90% 82% at 32% 50%, rgba(255,255,255,.91) 0%, rgba(249,253,255,.78) 39%, rgba(241,249,255,.53) 58%, rgba(233,246,255,.27) 74%, rgba(233,246,255,0) 100% )!important; filter:blur(4px)!important; opacity:1!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero h1, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero h1{ color:#071a36!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-kicker, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-kicker{ color:#0876a4!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-description, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-description{ color:#263c59!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-trust-row, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-trust-row{ color:#24415f!important; } @media(max-width:820px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image:url('/assets/brand/home/3d-grid-lab-unified-hero-light-v5719.webp')!important; background-position:64% center!important; background-size:cover!important; } } /* ========================================================== V57.20 — Approved light header + hero reference parity Light mode only. Dark mode and application behavior remain unchanged. ========================================================== */ @media (min-width:821px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .site-header, body[data-theme="light"].gtl-home:not(.admin-shell) .site-header{ height:100px!important; min-height:100px!important; background:rgba(255,255,255,.985)!important; border-bottom:1px solid rgba(188,211,239,.72)!important; box-shadow:0 8px 30px rgba(34,71,126,.055)!important; backdrop-filter:blur(16px) saturate(1.08)!important; -webkit-backdrop-filter:blur(16px) saturate(1.08)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .site-header > .container.nav-wrap, body[data-theme="light"].gtl-home:not(.admin-shell) .site-header > .container.nav-wrap{ width:100%!important; max-width:none!important; height:100px!important; min-height:100px!important; margin:0!important; padding:0 30px!important; gap:28px!important; align-items:center!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .brand, body[data-theme="light"].gtl-home:not(.admin-shell) .brand{ flex:0 0 228px!important; color:#071a36!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .brand-name, body[data-theme="light"].gtl-home:not(.admin-shell) .brand-name{ color:#071a36!important; font-weight:800!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .enterprise-search, body[data-theme="light"].gtl-home:not(.admin-shell) .enterprise-search{ flex:1 1 590px!important; max-width:590px!important; height:58px!important; background:#fff!important; border:1px solid #cbdcf1!important; border-radius:14px!important; box-shadow:0 4px 18px rgba(46,83,139,.045),inset 0 1px 0 rgba(255,255,255,.9)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .enterprise-search input, body[data-theme="light"].gtl-home:not(.admin-shell) .enterprise-search input{ color:#1d3555!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .enterprise-search input::placeholder, body[data-theme="light"].gtl-home:not(.admin-shell) .enterprise-search input::placeholder{ color:#607695!important; opacity:1!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .main-nav, body[data-theme="light"].gtl-home:not(.admin-shell) .main-nav{ gap:22px!important; align-items:center!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .main-nav > a, html[data-theme="light"] body.gtl-home:not(.admin-shell) .mega-trigger > a, body[data-theme="light"].gtl-home:not(.admin-shell) .main-nav > a, body[data-theme="light"].gtl-home:not(.admin-shell) .mega-trigger > a{ color:#07172f!important; font-weight:700!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .language-button, html[data-theme="light"] body.gtl-home:not(.admin-shell) #themeToggle, body[data-theme="light"].gtl-home:not(.admin-shell) .language-button, body[data-theme="light"].gtl-home:not(.admin-shell) #themeToggle{ background:#fff!important; color:#07172f!important; border:1px solid #cbdcf1!important; box-shadow:0 4px 16px rgba(51,87,142,.04)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ min-height:clamp(540px,39.583vw,760px)!important; background-color:#eaf7ff!important; background-image:url('/assets/brand/home/hero-light-reference-v5720.webp')!important; background-repeat:no-repeat!important; background-position:center top!important; background-size:100% auto!important; background-blend-mode:normal!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-grid, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-grid{ min-height:clamp(540px,39.583vw,760px)!important; align-items:center!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy{ position:relative!important; z-index:3!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; isolation:isolate!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy::before, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy::before{ content:""!important; display:block!important; position:absolute!important; z-index:-1!important; pointer-events:none!important; left:-92px!important; top:-86px!important; width:calc(100% + 260px)!important; height:calc(100% + 172px)!important; border:0!important; border-radius:0!important; background:radial-gradient(ellipse 94% 86% at 29% 50%, rgba(255,255,255,.94) 0%, rgba(252,254,255,.89) 33%, rgba(246,251,255,.72) 52%, rgba(237,248,255,.48) 66%, rgba(231,246,255,.22) 79%, rgba(231,246,255,0) 100%)!important; filter:blur(6px)!important; opacity:1!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero h1, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero h1{ color:#07172f!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-kicker, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-kicker{ color:#0873a2!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-description, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-description{ color:#243b59!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-badge, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-badge{ color:#145b8d!important; background:rgba(255,255,255,.91)!important; border-color:#c8dcef!important; box-shadow:0 7px 24px rgba(53,91,145,.06)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-trust-row, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-trust-row{ color:#1d3c5b!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-btn-ghost, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-btn-ghost{ color:#0d1c34!important; background:rgba(255,255,255,.94)!important; border-color:#bfd2e7!important; box-shadow:0 9px 24px rgba(53,91,145,.07)!important; } } @media(max-width:820px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .site-header, body[data-theme="light"].gtl-home:not(.admin-shell) .site-header{ background:rgba(255,255,255,.985)!important; border-bottom:1px solid #d1e1f3!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image:url('/assets/brand/home/hero-light-reference-v5720.webp')!important; background-position:62% center!important; background-size:cover!important; } } /* ========================================================== V57.21 — Light hero visibility refinement Patch only: reveal more of the approved V57.20 hero artwork while retaining a localized readability veil behind the left copy. ========================================================== */ @media (min-width:821px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero-copy::before, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero-copy::before{ left:-64px!important; top:-58px!important; width:calc(100% + 150px)!important; height:calc(100% + 116px)!important; background:radial-gradient(ellipse 88% 82% at 25% 50%, rgba(255,255,255,.86) 0%, rgba(252,254,255,.78) 31%, rgba(246,251,255,.56) 50%, rgba(237,248,255,.31) 66%, rgba(231,246,255,.12) 79%, rgba(231,246,255,0) 100%)!important; filter:blur(4px)!important; } } /* V57.22 — clean light hero asset, removes baked-in ghost text from V57.20/21 reference image. */ @media (min-width:821px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image:url('/assets/brand/home/hero-light-clean-v5722.webp')!important; background-position:center top!important; background-size:100% auto!important; background-repeat:no-repeat!important; } } @media(max-width:820px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image:url('/assets/brand/home/hero-light-clean-v5722.webp')!important; background-position:64% center!important; background-size:cover!important; } } /* ========================================================== V57.23 — Light hero ghost-text cleanup + header search parity Only light hero asset and header search geometry are affected. ========================================================== */ @media (min-width:821px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image:url('/assets/brand/home/hero-light-clean-v5723.webp')!important; background-position:center top!important; background-size:100% auto!important; background-repeat:no-repeat!important; background-blend-mode:normal!important; } } @media (max-width:820px){ html[data-theme="light"] body.gtl-home:not(.admin-shell) .gtl-hero, body[data-theme="light"].gtl-home:not(.admin-shell) .gtl-hero{ background-image:url('/assets/brand/home/hero-light-clean-v5723.webp')!important; background-position:64% center!important; background-size:cover!important; } } /* Homepage header search now uses the exact same geometry as inner pages. */ body.gtl-home:not(.admin-shell) .enterprise-search{ flex:1 1 360px!important; width:auto!important; max-width:460px!important; min-width:230px!important; height:40px!important; margin:0!important; border-radius:13px!important; } body.gtl-home:not(.admin-shell) .enterprise-search input{ font-size:.91rem!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .enterprise-search, body[data-theme="light"].gtl-home:not(.admin-shell) .enterprise-search{ background:#fff!important; border:1px solid #ccd8ea!important; border-radius:13px!important; box-shadow:0 7px 20px rgba(37,58,101,.05)!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .enterprise-search input, body[data-theme="light"].gtl-home:not(.admin-shell) .enterprise-search input{ background:#fff!important; color:#18243e!important; border-color:transparent!important; } html[data-theme="light"] body.gtl-home:not(.admin-shell) .enterprise-search input::placeholder, body[data-theme="light"].gtl-home:not(.admin-shell) .enterprise-search input::placeholder{ color:#7c89a4!important; } @media(max-width:980px){ body.gtl-home:not(.admin-shell) .enterprise-search{display:none!important;} } /* V58 SEO category hubs and contextual workflow content */ .qc-seo-category-hub{margin:24px 0;display:grid;gap:18px}.qc-seo-category-hub>p{max-width:900px}.qc-hub-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.qc-hub-columns>div{padding:18px;border:1px solid var(--border-color,rgba(127,127,160,.25));border-radius:16px;background:var(--card-bg,rgba(255,255,255,.03))}.qc-hub-links{display:flex;flex-wrap:wrap;gap:10px}.qc-hub-links a{display:inline-flex;padding:9px 12px;border:1px solid var(--border-color,rgba(127,127,160,.25));border-radius:999px;text-decoration:none}.qc-hub-footer{font-size:.95rem}.qc-structured-tool-content ul{display:grid;gap:8px;padding-left:22px}@media(max-width:720px){.qc-hub-columns{grid-template-columns:1fr}.qc-hub-links{display:grid}.qc-hub-links a{border-radius:12px}} /* V58.3 interaction reliability — stable Tools mega-menu */ .main-nav .mega-toggle{ appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit; padding:10px 12px;border-radius:11px;text-decoration:none;font-weight:700;color:var(--ui-muted); cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap } .main-nav .mega-toggle:hover,.main-nav .mega-toggle:focus-visible,.mega-trigger.is-open .mega-toggle{ background:var(--ui-surface-2);color:var(--ui-text);outline:none } .mega-chevron{font-size:.8em;transition:transform .16s ease} .mega-trigger.is-open .mega-chevron{transform:rotate(180deg)} @media (min-width:1051px){ body:not(.admin-shell) .mega-trigger{padding-bottom:14px;margin-bottom:-14px} body:not(.admin-shell) .mega-trigger:after{left:-20px;right:-20px;top:100%;height:20px} body:not(.admin-shell) .mega-menu{top:100%!important;margin-top:0!important} body:not(.admin-shell) .mega-trigger.is-open .mega-menu{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:translateX(-50%) translateY(0)!important} } @media (max-width:1050px){ .mega-trigger{width:100%} .main-nav .mega-toggle{width:100%;justify-content:space-between;text-align:left} .mega-trigger.is-open .mega-menu{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important} .mega-menu{max-height:min(62vh,520px);overflow:auto} } /* Mobile navigation reliability patch: explicit touch-open states override legacy hover-only mega-menu rules. */ @media(max-width:1050px){ .site-header .nav-toggle{position:relative;z-index:1002;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .site-header .main-nav{z-index:1001;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .site-header .main-nav.open{display:flex!important} .site-header .mega-menu.open{display:grid!important} } @media(max-width:620px){ .site-header .mega-menu.open{grid-template-columns:1fr!important} }