--- --- /* * TyagiHub Tools — CSS (Rebuilt) * Tyagi MultiTech * ============================================================ * Cards bade hain, SVG icons center mein, mobile-first * ============================================================ */ /* ============================================================ 1. PAGE ============================================================ */ .tools-page{padding-top:var(--nav-height);min-height:100vh;background:var(--clr-bg)}.tools-hero{background:var(--clr-bg-2);border-bottom:1px solid var(--clr-border);padding:var(--space-10) 0 var(--space-7);text-align:center}.tools-hero__title{font-size:clamp(1.75rem, 5vw, 3rem);font-weight:var(--fw-black);letter-spacing:-.03em;color:var(--clr-heading);margin-bottom:var(--space-2)}.tools-hero__sub{font-size:var(--fs-sm);color:var(--clr-text-2);margin-bottom:var(--space-6)}.tools-search{position:relative;max-width:560px;margin:0 auto var(--space-6)}.tools-search__input{width:100%;background:var(--clr-surface);border:1.5px solid var(--clr-border-2);border-radius:var(--radius-full);padding:var(--space-3) var(--space-5) var(--space-3) 48px;font-family:var(--font-body);font-size:var(--fs-base);color:var(--clr-text);outline:0;transition:border-color var(--ease-fast),box-shadow var(--ease-fast)}.tools-search__input::placeholder{color:var(--clr-text-3)}.tools-search__input:focus{border-color:var(--clr-accent);box-shadow:0 0 0 3px var(--clr-accent-glow)}.tools-search__icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--clr-text-3);pointer-events:none;display:flex;align-items:center}.tools-search__icon svg{width:18px;height:18px;stroke:currentColor;fill:none}[data-theme=light] .tools-hero{background:#f5f7fa}[data-theme=light] .tools-search__input{background:#fff;border-color:#bdc6e0;color:#1a2030}.tools-catstrip{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;padding:0 var(--container-pad)}.tools-catstrip__btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1.5px solid var(--clr-border-2);background:var(--clr-surface);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--clr-text-2);cursor:pointer;transition:all var(--ease-fast);white-space:nowrap}.tools-catstrip__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;flex-shrink:0}.tools-catstrip__btn:hover{border-color:var(--clr-accent);color:var(--clr-accent);background:var(--clr-accent-glow)}.tools-catstrip__btn.active{background:var(--clr-accent);border-color:var(--clr-accent);color:#fff;font-weight:var(--fw-semi)}.tools-catstrip__btn.active svg{stroke:#FFFFFF}[data-theme=light] .tools-catstrip__btn{background:#fff;border-color:#d8deed;color:#3d4d6a}[data-theme=light] .tools-catstrip__btn.active{background:var(--clr-accent);border-color:var(--clr-accent);color:#fff}.tools-content{max-width:var(--container-max);margin:0 auto;padding:var(--space-8) var(--container-pad) var(--space-16)}.tools-section{margin-bottom:var(--space-12)}.tools-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);padding-bottom:var(--space-3);border-bottom:2px solid var(--clr-border)}.tools-section-title{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--clr-heading)}.tools-section-title svg{width:22px;height:22px;stroke:var(--clr-accent);fill:none;flex-shrink:0}.tools-section-count{font-size:var(--fs-xs);color:var(--clr-text-3);font-weight:var(--fw-regular);background:var(--clr-surface-2);padding:2px 8px;border-radius:var(--radius-full);border:1px solid var(--clr-border)}.tools-section-viewall{font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--clr-accent);text-decoration:none;white-space:nowrap;transition:opacity var(--ease-fast)}.tools-section-viewall:hover{opacity:.7}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5)}.tool-item{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:var(--space-6);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-xl);gap:var(--space-4);cursor:pointer;text-decoration:none;transition:all var(--ease-normal);position:relative;overflow:hidden}.tool-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--tool-color,var(--clr-accent));transform:scaleX(0);transition:transform var(--ease-normal);transform-origin:left}.tool-item:hover::after{transform:scaleX(1)}.tool-item:hover{border-color:var(--tool-color,var(--clr-accent));box-shadow:0 14px 40px rgba(0,0,0,.3);background:var(--clr-surface-2)}.tool-item__icon{width:54px;height:54px;border-radius:var(--radius-md);background:var(--tool-icon-bg,rgba(245,166,35,.1));display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--ease-spring)}.tool-item:hover .tool-item__icon{transform:scale(1.1) rotate(-3deg)}.tool-item__icon svg{width:26px;height:26px;stroke:var(--tool-color,var(--clr-accent));stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;fill:none}.tool-item__content{display:flex;flex-direction:column;gap:var(--space-2);flex-grow:1;width:100%}.tool-item__name{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--clr-heading);line-height:1.3}.tool-item__desc{font-size:var(--fs-sm);color:var(--clr-text-2);line-height:1.5;margin-bottom:var(--space-4);flex-grow:1}.tool-item__btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;background:var(--tool-icon-bg,rgba(0,0,0,.05));color:var(--tool-color,var(--clr-accent));font-weight:var(--fw-semi);border-radius:var(--radius-md);font-size:13px;transition:all .2s;width:max-content}.tool-item:hover .tool-item__btn{background:var(--tool-color,var(--clr-accent));color:#fff}.tool-item__new{position:absolute;top:var(--space-2);left:var(--space-2);padding:2px 7px;background:var(--clr-stock);color:#fff;font-size:9px;font-weight:var(--fw-bold);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em}.tool-item__star{position:absolute;top:0;right:0;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:50;transition:opacity var(--ease-fast);cursor:pointer;background:0 0;border:none;color:var(--clr-text-3);padding:12px;line-height:1}.tool-item:hover .tool-item__star{opacity:1}.tool-item__star.starred{opacity:1;color:var(--clr-accent)}[data-theme=light] .tool-item{background:#fff;border-color:#d8deed;box-shadow:0 2px 8px rgba(0,0,0,.04)}[data-theme=light] .tool-item:hover{background:#f5f7fa;box-shadow:0 12px 32px rgba(0,0,0,.1)}.tools-empty{text-align:center;padding:var(--space-16) 0;display:none}.tools-empty.visible{display:block}.tools-empty__icon{font-size:3rem;margin-bottom:var(--space-4);opacity:.4}.tools-empty__title{font-size:var(--fs-xl);color:var(--clr-text-2);margin-bottom:var(--space-2);font-weight:var(--fw-semi)}.tools-empty__sub{font-size:var(--fs-sm);color:var(--clr-text-3)}.tool-page{padding-top:var(--nav-height);min-height:100vh}.tool-page-header{background:var(--clr-bg-2);border-bottom:1px solid var(--clr-border);padding:var(--space-8) 0}.tool-page-header .container{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}.tool-page-header__icon{width:68px;height:68px;border-radius:var(--radius-lg);background:rgba(245,166,35,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}.tool-page-header__icon svg{width:34px;height:34px;stroke:var(--clr-accent);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;fill:none}.tool-page-header__text{flex:1;min-width:0}.tool-page-header__breadcrumb{font-size:var(--fs-xs);color:var(--clr-text-3);margin-bottom:var(--space-2)}.tool-page-header__breadcrumb a{color:var(--clr-text-3);transition:color var(--ease-fast)}.tool-page-header__breadcrumb a:hover{color:var(--clr-accent)}.tool-page-header__title{font-size:clamp(1.5rem, 4vw, 2.25rem);font-weight:var(--fw-black);letter-spacing:-.02em;color:var(--clr-heading);margin-bottom:var(--space-2)}.tool-page-header__desc{font-size:var(--fs-sm);color:var(--clr-text-2);line-height:var(--lh-loose)}.tool-workspace{max-width:860px;margin:var(--space-8) auto;padding:0 var(--container-pad) var(--space-16)}.tool-dropzone{border:2px dashed var(--clr-border-2);border-radius:var(--radius-xl);padding:var(--space-16) var(--space-8);text-align:center;background:var(--clr-surface);transition:all var(--ease-normal);cursor:pointer}.tool-dropzone.dragover,.tool-dropzone:hover{border-color:var(--clr-accent);background:var(--clr-accent-glow)}.tool-dropzone__icon{width:56px;height:56px;margin:0 auto var(--space-4)}.tool-dropzone__icon svg{width:100%;height:100%;stroke:var(--clr-text-3);stroke-width:1.5;fill:none}.tool-dropzone__title{font-size:var(--fs-xl);font-weight:var(--fw-semi);color:var(--clr-heading);margin-bottom:var(--space-2)}.tool-dropzone__sub{font-size:var(--fs-sm);color:var(--clr-text-3);margin-bottom:var(--space-6)}.tool-dropzone__input{display:none}.tool-dropzone__formats{display:flex;justify-content:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}.format-tag{padding:2px var(--space-3);background:var(--clr-surface-2);border:1px solid var(--clr-border);border-radius:var(--radius-full);font-size:var(--fs-xs);color:var(--clr-text-3)}.tool-settings{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-top:var(--space-5);display:none}.tool-settings.visible{display:block}.tool-settings__title{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--clr-heading);margin-bottom:var(--space-5)}.tool-setting-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) 0;border-bottom:1px solid var(--clr-border);gap:var(--space-4);flex-wrap:wrap}.tool-setting-row:last-child{border-bottom:none}.tool-setting-label{font-size:var(--fs-sm);color:var(--clr-text-2);flex:1}.tool-setting-label small{display:block;font-size:var(--fs-xs);color:var(--clr-text-3);margin-top:2px}.tool-slider{width:160px;height:4px;border-radius:2px;background:var(--clr-border-2);outline:0;appearance:none;-webkit-appearance:none;cursor:pointer}.tool-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--clr-accent);cursor:pointer;border:2px solid var(--clr-bg);box-shadow:0 0 0 2px var(--clr-accent)}.tool-select{background:var(--clr-surface-2);border:1px solid var(--clr-border-2);border-radius:var(--radius-sm);color:var(--clr-text);font-family:var(--font-body);font-size:var(--fs-sm);padding:var(--space-2) var(--space-3);outline:0;cursor:pointer}.tool-select:focus{border-color:var(--clr-accent)}.tool-filelist{margin-top:var(--space-5);display:none;flex-direction:column;gap:var(--space-2)}.tool-filelist.visible{display:flex}.tool-fileitem{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md)}.tool-fileitem__icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tool-fileitem__icon svg{width:20px;height:20px;stroke:var(--clr-accent);fill:none}.tool-fileitem__name{flex:1;font-size:var(--fs-sm);color:var(--clr-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-fileitem__size{font-size:var(--fs-xs);color:var(--clr-text-3);flex-shrink:0}.tool-fileitem__remove{font-size:14px;color:var(--clr-text-3);cursor:pointer;padding:var(--space-1);border:none;background:0 0;border-radius:50%;transition:all var(--ease-fast);line-height:1}.tool-fileitem__remove:hover{color:var(--clr-shield);background:rgba(248,113,113,.1)}.tool-action-bar{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-6);gap:var(--space-4);flex-wrap:wrap}.tool-progress{margin-top:var(--space-5);display:none}.tool-progress.visible{display:block}.tool-progress__bar{height:6px;background:var(--clr-border);border-radius:3px;overflow:hidden}.tool-progress__fill{height:100%;background:linear-gradient(90deg,var(--clr-accent),var(--clr-accent-2));border-radius:3px;width:0%;transition:width .3s ease}.tool-progress__label{font-size:var(--fs-xs);color:var(--clr-text-3);margin-top:var(--space-2);text-align:center}.tool-result{margin-top:var(--space-6);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:var(--space-8);text-align:center;display:none}.tool-result.visible{display:block}.tool-result__icon{font-size:3rem;margin-bottom:var(--space-3)}.tool-result__title{font-size:var(--fs-lg);font-weight:var(--fw-semi);color:var(--clr-heading);margin-bottom:var(--space-2)}.tool-result__sub{font-size:var(--fs-sm);color:var(--clr-text-3);margin-bottom:var(--space-5)}.related-tools{max-width:860px;margin:0 auto var(--space-12);padding:0 var(--container-pad)}.related-tools__title{font-size:var(--fs-lg);font-weight:var(--fw-semi);color:var(--clr-heading);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--clr-border)}.related-tools__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3)}[data-theme=light] .tool-dropzone{background:#fff;border-color:#bdc6e0}[data-theme=light] .tool-dropzone:hover{background:rgba(224,152,32,.04)}[data-theme=light] .tool-result,[data-theme=light] .tool-settings{background:#fff;border-color:#d8deed}[data-theme=light] .tool-fileitem{background:#fff;border-color:#d8deed}[data-theme=light] .tool-select{background:#f0f3fb;border-color:#bdc6e0;color:#1a2030}[data-theme=light] .tool-page-header{background:#f5f7fa}@media (max-width:768px){.tools-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}.tool-item{padding:var(--space-5);min-height:auto}.tool-item__icon{width:44px;height:44px}.tool-item__icon svg{width:22px;height:22px}.tool-item__name{font-size:var(--fs-sm)}.tools-catstrip{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--space-2);scrollbar-width:none}.tools-catstrip::-webkit-scrollbar{display:none}.tools-catstrip__btn{flex-shrink:0}.tool-action-bar{flex-direction:column;align-items:stretch}.tool-action-bar .btn{width:100%;justify-content:center}.tool-setting-row{flex-direction:column;align-items:flex-start}.tool-slider{width:100%}.related-tools__grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:480px){.tools-grid{grid-template-columns:1fr;gap:var(--space-4)}.tool-item{padding:var(--space-5);min-height:auto;gap:var(--space-3);border-radius:var(--radius-lg)}.tool-item__icon{width:38px;height:38px}.tool-item__icon svg{width:18px;height:18px}.tool-item__name{font-size:var(--fs-sm)}.tool-dropzone{padding:var(--space-10) var(--space-4)}}.th-category-block{margin-bottom:var(--space-16);padding-bottom:var(--space-8);border-bottom:1px dashed var(--clr-border-2)}.th-category-block:last-child{border-bottom:none}.th-category-hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center;margin-bottom:var(--space-10)}.th-category-hero--reverse{grid-template-columns:1fr 1fr}.th-category-text{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}.th-category-title{font-size:clamp(2rem, 4vw, 2.75rem);font-weight:var(--fw-black);letter-spacing:-.03em;line-height:1.1}.th-category-desc{font-size:1.1rem;color:var(--clr-text-2);line-height:1.7;max-width:90%}.th-category-btn{display:inline-flex;align-items:center;padding:10px 24px;border-radius:var(--radius-full);font-weight:var(--fw-semi);font-size:var(--fs-sm);text-decoration:none;transition:all var(--ease-normal);margin-top:var(--space-2)}.th-category-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.05)}.th-category-illustration{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:250px}.th-category-illustration-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;z-index:0;pointer-events:none}.th-category-illustration svg{position:relative;z-index:1;width:140px;height:140px;stroke:currentColor}@media (max-width:768px){.th-category-hero{grid-template-columns:1fr;gap:var(--space-6);text-align:center}.th-category-hero--reverse{grid-template-columns:1fr}.th-category-hero>div:first-child{order:2}.th-category-hero>div:last-child{order:1}.th-category-text{align-items:center}.th-category-desc{max-width:100%}.th-category-illustration{min-height:200px}}