/* OceanofTools — common template CSS for template-rendered image_tools tools. */ /* ===== Migrated from style/tool-suite.css ===== */ /* OceanofTools shared premium tool interface */ :root{--oot-primary:#0e9379;--oot-primary-dark:#087461;--oot-secondary:#14b8a6;--oot-accent:#06b6d4;--oot-bg:#f3f7fc;--oot-card:#ffffff;--oot-text:#132238;--oot-muted:#61758f;--oot-border:#dbe3f0;--oot-success:#15803d;--oot-danger:#b91c1c;--oot-warning:#a16207;--oot-radius:24px;--oot-shadow:0 22px 56px rgba(17,31,61,.1);--oot-shadow-strong:0 28px 70px rgba(9,19,37,.16)} html{scroll-behavior:smooth}body.oot-modern{margin:0;background:radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 18%),radial-gradient(circle at top right,rgba(6,182,212,.08),transparent 18%),linear-gradient(180deg,#f7f9fc 0%,#eef3f9 100%);color:var(--oot-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body.oot-modern *{box-sizing:border-box}body.oot-modern [hidden]{display:none!important}body.oot-modern img,body.oot-modern canvas,body.oot-modern svg,body.oot-modern video{max-width:100%}body.oot-modern button,body.oot-modern input,body.oot-modern select,body.oot-modern textarea{font:inherit}body.oot-modern button{touch-action:manipulation}body.oot-modern a,body.oot-modern button,body.oot-modern input,body.oot-modern select,body.oot-modern textarea{outline-offset:3px}body.oot-modern :focus-visible{outline:3px solid rgba(37,99,235,.30)} body.oot-modern>.hero,body.oot-modern main>.hero,body.oot-modern .container1>.hero{position:relative;width:min(1240px,calc(100% - 28px));margin:28px auto 24px!important;padding:36px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:30px!important;background:radial-gradient(circle at top right,rgba(6,182,212,.18),transparent 22%),linear-gradient(135deg,#0f1c34,#142749 58%, #1b2f57 100%)!important;color:#fff!important;box-shadow:var(--oot-shadow-strong)!important;text-align:left!important;overflow:hidden}body.oot-modern .container1>.hero{width:100%;margin:0 0 24px!important}body.oot-modern .hero h1,body.oot-modern .hero h1 *{margin-top:0!important;color:#fff!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#fff!important;line-height:1.04!important;font-size:clamp(2rem,5vw,3.55rem)!important;letter-spacing:-.04em}body.oot-modern .hero p{max-width:860px!important;margin:14px 0 0!important;color:rgba(255,255,255,.82)!important;font-size:1.05rem!important;line-height:1.72!important}body.oot-modern .hero-icon{display:inline-grid!important;place-items:center;width:66px;height:66px;margin:0 0 15px!important;border-radius:20px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:1.7rem!important;border:1px solid rgba(255,255,255,.08)} body.oot-modern .container1,body.oot-modern .container2,body.oot-modern .tool-container,body.oot-modern .calculator-container,body.oot-modern .main-container,body.oot-modern .content-container{width:min(1240px,calc(100% - 28px))!important;max-width:1240px!important;margin:24px auto!important;border:1px solid var(--oot-border)!important;border-radius:var(--oot-radius)!important;background:linear-gradient(180deg,#fff,#fbfcff)!important;box-shadow:var(--oot-shadow)!important;padding:28px!important;overflow:visible!important}body.oot-modern .container1 .container1,body.oot-modern .container1 .container2,body.oot-modern .container2 .container1,body.oot-modern .tool-container .container1{width:100%!important;margin:18px 0!important;box-shadow:none!important} body.oot-modern .content-section,body.oot-modern .faq-section,body.oot-modern .how-to-use,body.oot-modern .features-section,body.oot-modern .about-section,body.oot-modern .stats-card,body.oot-modern .feature-card,body.oot-modern .result-card,body.oot-modern .doc-step,body.oot-modern .doc-section{border:1px solid var(--oot-border)!important;border-radius:20px!important;background:#fff!important;color:var(--oot-text)!important;box-shadow:0 14px 28px rgba(17,31,61,.06)!important}body.oot-modern h1,body.oot-modern h2,body.oot-modern h3{color:var(--oot-text);overflow-wrap:anywhere}body.oot-modern h2{line-height:1.18;letter-spacing:-.03em}body.oot-modern p,body.oot-modern li{line-height:1.7}body.oot-modern .section-description,body.oot-modern .description,body.oot-modern .subtitle,body.oot-modern .help-text{color:var(--oot-muted)!important} body.oot-modern input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),body.oot-modern select,body.oot-modern textarea{max-width:100%;min-height:48px;padding:12px 14px;border:1px solid #d2dcec!important;border-radius:16px!important;background:#fff!important;color:var(--oot-text)!important;box-shadow:none!important}body.oot-modern textarea{resize:vertical;line-height:1.6}body.oot-modern input:focus,body.oot-modern select:focus,body.oot-modern textarea:focus{border-color:var(--oot-primary)!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important}body.oot-modern input[type=file]{max-width:100%}body.oot-modern input[type=checkbox],body.oot-modern input[type=radio]{accent-color:var(--oot-primary)} body.oot-modern .btn,body.oot-modern .primary-btn,body.oot-modern .action-btn,body.oot-modern .convert-btn,body.oot-modern .calculate-btn,body.oot-modern .process-btn,body.oot-modern .download-btn,body.oot-modern .upload-btn,body.oot-modern button[class*=primary],body.oot-modern button[class*=convert],body.oot-modern button[class*=calculate],body.oot-modern button[class*=generate]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:16px!important;font-weight:800!important;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,border-color .18s ease;background:#fff;color:var(--oot-text);border:1px solid #d7e0ef!important;box-shadow:0 10px 24px rgba(17,31,61,.06)!important}body.oot-modern .primary-btn,body.oot-modern .convert-btn,body.oot-modern .calculate-btn,body.oot-modern .process-btn,body.oot-modern button[class*=primary],body.oot-modern button[class*=convert],body.oot-modern button[class*=calculate],body.oot-modern button[class*=generate]{border:1px solid transparent!important;background:linear-gradient(135deg,var(--oot-primary),var(--oot-secondary))!important;color:#fff!important;box-shadow:0 16px 34px rgba(37,99,235,.26)!important}body.oot-modern button:hover:not(:disabled),body.oot-modern .btn:hover{transform:translateY(-1px)}body.oot-modern button:disabled{cursor:not-allowed;opacity:.55;transform:none!important;box-shadow:none!important} body.oot-modern .drop-zone,body.oot-modern .upload-area,body.oot-modern .file-upload,body.oot-modern [class*=dropzone]{border:2px dashed #b8c8e4!important;border-radius:20px!important;background:linear-gradient(180deg,#fbfcff,#f4f8ff)!important;transition:.2s ease;padding:18px!important}body.oot-modern .is-dragging{border-color:var(--oot-primary)!important;background:#eef1ff!important} body.oot-modern .result,body.oot-modern .result-section,body.oot-modern .output-section,body.oot-modern .output-container,body.oot-modern .preview-section,body.oot-modern .preview-area{min-width:0;border:1px solid var(--oot-border)!important;border-radius:20px!important;background:#fff!important;box-shadow:0 14px 28px rgba(17,31,61,.05)!important}body.oot-modern .success,body.oot-modern .success-message{border:1px solid #bde5c7!important;background:#f0fff4!important;color:var(--oot-success)!important}body.oot-modern .error,body.oot-modern .error-message{border:1px solid #f2c6c6!important;background:#fff4f4!important;color:var(--oot-danger)!important} body.oot-modern table{width:100%;border-collapse:collapse}body.oot-modern th,body.oot-modern td{padding:12px 13px;border:1px solid var(--oot-border);text-align:left}body.oot-modern th{background:#f4f7fd}.oot-table-wrap{max-width:100%;overflow:auto;border-radius:16px;border:1px solid var(--oot-border)}.oot-table-wrap table{min-width:520px} body.oot-modern .tool-interface,body.oot-modern .input-output-container,body.oot-modern .editor-container,body.oot-modern .controls-container,body.oot-modern .main-content{min-width:0}body.oot-modern canvas{height:auto!important}body.oot-modern iframe{max-width:100%;border-radius:16px} body.oot-modern .faq-item,body.oot-modern details{border-radius:18px;border:1px solid var(--oot-border)!important;background:#fff!important}body.oot-modern details summary{cursor:pointer;padding:14px 16px;font-weight:800}.oot-toast{position:fixed;right:18px;bottom:18px;z-index:99999;width:min(390px,calc(100% - 36px));padding:14px 16px;border:1px solid #f2c6c6;border-radius:18px;background:#fff4f4;color:var(--oot-danger);box-shadow:0 16px 50px rgba(15,23,42,.18);font-weight:650}.oot-toast.is-success{border-color:#bde5c7;background:#f0fff4;color:var(--oot-success)}.oot-toast button{float:right;border:0;background:transparent;color:inherit;font-size:1.1rem}.oot-sr-only{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} body.oot-modern .stat-card,body.oot-modern .metric-card,body.oot-modern .feature-card,body.oot-modern .color-card,body.oot-modern .palette-card,body.oot-modern .faq-card{padding:18px!important} body.oot-modern .progress-bar{background:#e7eef9!important;border-radius:999px!important;overflow:hidden}body.oot-modern .progress-fill{background:linear-gradient(90deg,var(--oot-primary),var(--oot-secondary))!important;border-radius:999px!important} @media(max-width:900px){body.oot-modern .tool-interface,body.oot-modern .input-output-container,body.oot-modern .editor-container,body.oot-modern .controls-container,body.oot-modern .main-content{grid-template-columns:1fr!important;flex-direction:column!important}body.oot-modern [style*="grid-template-columns"]{max-width:100%}body.oot-modern .sidebar,body.oot-modern [class*=sidebar]{position:static!important;width:100%!important;max-width:none!important}} @media(max-width:720px){body.oot-modern>.hero,body.oot-modern main>.hero,body.oot-modern .container1>.hero{width:min(100% - 18px,1240px);padding:24px 19px!important;border-radius:24px!important;margin-top:14px!important}body.oot-modern .container1>.hero{width:100%}body.oot-modern .container1,body.oot-modern .container2,body.oot-modern .tool-container,body.oot-modern .calculator-container,body.oot-modern .main-container,body.oot-modern .content-container{width:min(100% - 18px,1240px)!important;margin:14px auto!important;padding:18px!important;border-radius:20px!important}body.oot-modern .container1 .container1,body.oot-modern .container1 .container2{width:100%!important}body.oot-modern .tool-interface>*,body.oot-modern .input-section,body.oot-modern .output-section{min-width:0!important;width:100%!important}body.oot-modern .button-group,body.oot-modern .actions,body.oot-modern .action-buttons,body.oot-modern .controls{flex-wrap:wrap!important}body.oot-modern .button-group>button,body.oot-modern .actions>button,body.oot-modern .action-buttons>button{flex:1 1 145px;min-height:46px}body.oot-modern input,body.oot-modern select,body.oot-modern textarea{font-size:16px!important}body.oot-modern .search-container{width:min(100% - 18px,1240px)!important;margin-left:auto!important;margin-right:auto!important}body.oot-modern pre,body.oot-modern code{white-space:pre-wrap;overflow-wrap:anywhere}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.oot-modern *,body.oot-modern *:before,body.oot-modern *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} body.oot-modern .doc-container,body.oot-modern .docs-container,body.oot-modern .documentation,body.oot-modern .doc-section,body.oot-modern .doc-steps,body.oot-modern .doc-step,body.oot-modern .doc-step-content,body.oot-modern .feature-card,body.oot-modern .section-content {min-width: 0;max-width: 100%;overflow-wrap: anywhere} body.oot-modern .doc-code-block,body.oot-modern .code-block,body.oot-modern pre {max-width: 100%;overflow-x: auto;border-radius:16px;border:1px solid var(--oot-border);background:#0f1c34;color:#e7efff;padding:16px} @media(max-width:720px){body.oot-modern .doc-step{gap:12px!important;padding-left:14px!important;padding-right:14px!important}body.oot-modern .doc-step-content{width:auto!important;flex:1 1 auto!important}body.oot-modern .doc-step-number{flex:0 0 auto!important}} @media(max-width:720px){body.oot-modern table:not(.oot-no-scroll){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}body.oot-modern table:not(.oot-no-scroll) caption{display:block;width:100%}} /* ===== Migrated from image_tools/assets/image-suite.css ===== */ :root { --is-bg: #f8fafc; --is-card: #ffffff; --is-text: #172033; --is-muted: #667085; --is-border: #e4e7ec; --is-primary: #d5a45d; --is-primary-dark: #5b21b6; --is-success: #047857; --is-soft: #f5f3ff; --is-warning: #fff7ed; --is-shadow: 0 18px 45px rgba(30, 41, 59, .10); } * { box-sizing: border-box; } .image-suite-page { background: var(--is-bg); color: var(--is-text); } .image-suite-page main { min-height: 60vh; } .is-hero { padding: 58px 20px 42px; text-align: center; background: radial-gradient(circle at top left, rgba(124,58,237,.18), transparent 36%), linear-gradient(135deg,#f5f3ff,#fff 52%,#eef2ff); border-bottom: 1px solid var(--is-border); } .is-hero-icon { font-size: 3.4rem; line-height: 1; margin-bottom: 12px; } .is-eyebrow,.is-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; color: var(--is-primary); margin: 0 0 10px; } .is-hero h1 { margin: 0 auto 14px; max-width: 900px; font-size: clamp(2rem, 5vw, 3.55rem); line-height: 1.06; color: #111827; } .is-hero > p:not(.is-eyebrow) { max-width: 800px; margin: 0 auto; color: var(--is-muted); font-size: 1.08rem; line-height: 1.75; } .is-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .is-badges span { border: 1px solid #ddd6fe; color: #5b21b6; background: rgba(255,255,255,.78); border-radius: 999px; padding: 7px 11px; font-size: .83rem; font-weight: 700; } .is-breadcrumb { max-width: 1320px; margin: 18px auto 0; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--is-muted); font-size: .9rem; } .is-breadcrumb a { color: var(--is-primary-dark); text-decoration: none; } .is-app-shell,.is-content { max-width: 1320px; margin: 24px auto; padding: 0 20px; } .is-app-shell { background: var(--is-card); border: 1px solid var(--is-border); border-radius: 24px; box-shadow: var(--is-shadow); overflow: hidden; } .is-app-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-bottom: 1px solid var(--is-border); background: linear-gradient(180deg,#fff,#fcfcff); } .is-app-heading h2 { margin: 0; font-size: 1.45rem; } .is-privacy-note { max-width: 460px; color: var(--is-muted); font-size: .86rem; line-height: 1.5; text-align: right; } .is-tool-app { padding: 24px; } .is-upload-panel { margin-bottom: 22px; } .is-upload-zone { min-height: 148px; padding: 22px; border: 2px dashed #c4b5fd; border-radius: 18px; background: #faf8ff; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: .2s; text-align: center; } .is-upload-zone:hover,.is-upload-zone.is-dragover { border-color: var(--is-primary); background: #f5f3ff; transform: translateY(-1px); } .is-upload-zone input { display: none; } .is-upload-icon { font-size: 2rem; margin-bottom: 7px; } .is-upload-zone strong { font-size: 1.05rem; } .is-upload-zone span:last-of-type { color: var(--is-muted); margin-top: 5px; font-size: .88rem; } .is-file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .is-file-pill { display: inline-flex; align-items: center; gap: 7px; background: #f2f4f7; border: 1px solid var(--is-border); border-radius: 999px; padding: 7px 10px; font-size: .82rem; max-width: 100%; } .is-file-pill button { border: 0; background: transparent; cursor: pointer; color: #b42318; font-weight: 800; } .is-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .is-secondary-grid label { min-height: 100px; } .is-workspace { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0,1fr); gap: 22px; align-items: start; } .is-controls { border: 1px solid var(--is-border); border-radius: 18px; padding: 18px; background: #fcfcfd; position: sticky; top: 18px; } .is-control-group { margin-bottom: 16px; } .is-control-group label,.is-control-group .is-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; margin-bottom: 7px; color: #344054; } .is-control-group small { color: var(--is-muted); font-weight: 500; } .is-control-group input[type="range"] { width: 100%; accent-color: var(--is-primary); } .is-control-group input[type="number"],.is-control-group input[type="text"],.is-control-group select,.is-control-group textarea { width: 100%; min-height: 42px; border: 1px solid #d0d5dd; border-radius: 10px; padding: 9px 11px; background: #fff; color: var(--is-text); } .is-control-group input[type="color"] { width: 54px; height: 38px; padding: 2px; border: 1px solid #d0d5dd; border-radius: 9px; background: #fff; } .is-inline-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .is-check { display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 9px !important; font-weight: 600 !important; } .is-check input { width: 17px; height: 17px; accent-color: var(--is-primary); } .is-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; } .is-actions .is-btn-primary { grid-column: 1 / -1; } .is-btn { min-height: 42px; padding: 10px 14px; border-radius: 11px; border: 1px solid #d0d5dd; background: #fff; color: #344054; font-weight: 800; cursor: pointer; transition: .18s; } .is-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,23,42,.10); } .is-btn:disabled { opacity: .5; cursor: not-allowed; } .is-btn-primary { background: linear-gradient(135deg,var(--is-primary),#0f9f84); border-color: transparent; color: #fff; } .is-btn-success { color: #fff; background: var(--is-success); border-color: transparent; } .is-status { min-height: 42px; padding: 10px 12px; margin: 13px 0 0; border-radius: 10px; background: #f2f4f7; color: #475467; font-size: .84rem; line-height: 1.45; } .is-status.is-error { background: #fef3f2; color: #b42318; } .is-status.is-success { background: #ecfdf3; color: #027a48; } .is-preview-panel { min-width: 0; border: 1px solid var(--is-border); border-radius: 18px; overflow: hidden; background: #fff; } .is-preview-toolbar { padding: 12px 15px; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--is-border); color: #344054; font-size: .87rem; } .is-preview-toolbar span { color: var(--is-muted); } .is-preview-stage { min-height: 420px; padding: 18px; display: flex; align-items: center; justify-content: center; position: relative; overflow: auto; background-color: #eef2f6; background-image: linear-gradient(45deg,#dfe4ea 25%,transparent 25%),linear-gradient(-45deg,#dfe4ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe4ea 75%),linear-gradient(-45deg,transparent 75%,#dfe4ea 75%); background-size: 22px 22px; background-position: 0 0,0 11px,11px -11px,-11px 0; } #isCanvas { display: block; max-width: 100%; max-height: 680px; width: auto; height: auto; background: transparent; box-shadow: 0 10px 30px rgba(15,23,42,.18); touch-action: none; } #isOverlayLayer { position: absolute; inset: 18px; pointer-events: none; } .is-result-panel { padding: 0 15px 15px; } .is-result-panel:empty { display: none; } .is-palette { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 10px; margin-top: 14px; } .is-swatch { min-height: 112px; border-radius: 12px; overflow: hidden; border: 1px solid var(--is-border); background: #fff; } .is-swatch-color { height: 65px; } .is-swatch button { border: 0; width: 100%; padding: 8px; background: #fff; font-weight: 800; cursor: pointer; } .is-data-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .87rem; } .is-data-table th,.is-data-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--is-border); vertical-align: top; word-break: break-word; } .is-data-table th { width: 36%; color: #344054; background: #f9fafb; } .is-thumb-grid,.is-variation-grid,.is-tile-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin-top: 14px; } .is-thumb-card { border: 1px solid var(--is-border); border-radius: 12px; padding: 9px; background: #fff; } .is-thumb-card img,.is-thumb-card canvas { width: 100%; height: auto; display: block; border-radius: 8px; } .is-thumb-card button { width: 100%; margin-top: 8px; } .is-before-after { width: min(100%,900px); aspect-ratio: 16/10; position: relative; overflow: hidden; background: #111; box-shadow: 0 10px 30px rgba(15,23,42,.2); } .is-before-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .is-before-after .after-wrap { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; border-right: 3px solid white; } .is-before-after .after-wrap img { width: 200%; max-width: none; } .is-before-after input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; } .is-compare-label { position: absolute; top: 12px; padding: 6px 9px; border-radius: 7px; background: rgba(0,0,0,.62); color: #fff; font-size: .78rem; font-weight: 800; } .is-compare-label.before { right: 12px; }.is-compare-label.after { left: 12px; } .is-mask-box { position: absolute; border: 2px solid #ef4444; background: rgba(239,68,68,.13); pointer-events: none; } .is-content { display: grid; gap: 20px; margin-top: 30px; margin-bottom: 50px; } .is-content-card { background: var(--is-card); border: 1px solid var(--is-border); border-radius: 20px; padding: clamp(22px,4vw,34px); box-shadow: 0 8px 24px rgba(15,23,42,.05); } .is-content-card h2 { margin: 0 0 14px; font-size: clamp(1.35rem,2.5vw,1.8rem); color: #101828; } .is-content-card p,.is-content-card li { color: #475467; line-height: 1.78; font-size: 1rem; } .is-intro-card { background: linear-gradient(135deg,#fff,#faf8ff); } .is-feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 22px; } .is-feature { display: flex; align-items: flex-start; gap: 9px; padding: 14px; background: #fff; border: 1px solid #ede9fe; border-radius: 12px; } .is-feature span { color: var(--is-success); font-weight: 900; }.is-feature p { margin: 0; font-size: .9rem; line-height: 1.45; } .is-steps { list-style: none; counter-reset: is-step; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .is-steps li { counter-increment: is-step; padding: 18px; background: #f9fafb; border: 1px solid var(--is-border); border-radius: 14px; } .is-steps li::before { content: counter(is-step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; margin-bottom: 11px; color: #fff; background: var(--is-primary); font-weight: 900; } .is-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .is-check-list { margin: 0; padding-left: 20px; } .is-warning-card { background: var(--is-warning); border-color: #fed7aa; } .is-faq-list { display: grid; gap: 10px; } .is-faq-list details { border: 1px solid var(--is-border); border-radius: 12px; background: #fff; overflow: hidden; } .is-faq-list summary { cursor: pointer; padding: 15px 17px; font-weight: 800; color: #344054; } .is-faq-list details p { margin: 0; padding: 0 17px 17px; } .is-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; } .is-related-grid a { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: start; padding: 16px; color: inherit; text-decoration: none; border: 1px solid var(--is-border); border-radius: 14px; transition: .18s; } .is-related-grid a:hover { border-color: #a78bfa; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(124,58,237,.10); } .is-related-grid a > span { grid-row: span 2; font-size: 1.6rem; }.is-related-grid strong { color: #101828; }.is-related-grid small { color: var(--is-muted); line-height: 1.45; } .is-code-box { width: 100%; min-height: 150px; resize: vertical; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .82rem; } .is-hidden { display: none !important; } @media (max-width: 980px) { .is-workspace { grid-template-columns: 1fr; } .is-controls { position: static; } .is-feature-grid,.is-steps,.is-related-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .is-hero { padding: 42px 16px 30px; } .is-app-shell,.is-content,.is-breadcrumb { padding-left: 10px; padding-right: 10px; } .is-app-heading { align-items: flex-start; flex-direction: column; padding: 18px; } .is-privacy-note { text-align: left; } .is-tool-app { padding: 12px; } .is-preview-stage { min-height: 300px; padding: 8px; } .is-feature-grid,.is-steps,.is-related-grid,.is-two-column,.is-secondary-grid { grid-template-columns: 1fr; } .is-inline-controls { grid-template-columns: 1fr; } } /* Compact viewport workspace — 2026-08-09 Keep preview and controls visible together on desktop image tools. */ @media (min-width: 901px) { .is-app-shell { max-width: 1440px; } .is-tool-app { padding: 18px; } .is-upload-panel { margin-bottom: 14px; } .is-upload-zone { min-height: 112px; padding: 16px; } .is-tool-app.has-image .is-upload-panel { margin-bottom: 12px; } .is-tool-app.has-image .is-upload-zone { min-height: 64px; padding: 9px 14px; flex-direction: row; gap: 10px; justify-content: flex-start; text-align: left; } .is-tool-app.has-image .is-upload-icon { font-size: 1.25rem; margin: 0; } .is-tool-app.has-image .is-upload-zone span:last-of-type { margin: 0 0 0 auto; } .is-tool-app.has-image .is-file-list { margin-top: 7px; } .is-workspace { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 380px); gap: 16px; align-items: start; } .is-preview-panel { grid-column: 1; grid-row: 1; } .is-controls { grid-column: 2; grid-row: 1; top: 84px; max-height: calc(100vh - 108px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .is-preview-stage { min-height: 0; height: clamp(360px, 57vh, 620px); max-height: calc(100vh - 178px); padding: 12px; overflow: auto; } #isCanvas { max-height: calc(100vh - 220px); max-width: 100%; object-fit: contain; } #isOverlayLayer { inset: 12px; } } @media (min-width: 901px) and (max-height: 760px) { .is-app-heading { padding: 16px 22px; } .is-preview-stage { height: 50vh; min-height: 320px; } .is-controls { max-height: calc(100vh - 94px); } } /* ===== Migrated from image_tools/assets/image-ui-fixes.css ===== */ /* OceanofTools image UI final overrides — 2026-08-09 */ .image-suite-page main > .is-hero.oot-image-hero-card{ width:min(1120px,calc(100% - 32px))!important; max-width:1120px!important; margin:28px auto 22px!important; padding:46px 42px 38px!important; position:relative!important; overflow:hidden!important; border:1px solid rgba(148,163,184,.16)!important; border-radius:30px!important; background: radial-gradient(circle at 90% 16%,rgba(59,130,246,.24),transparent 34%), linear-gradient(105deg,#10203f 0%,#142a50 52%,#183b68 100%)!important; box-shadow:0 24px 58px rgba(7,20,38,.17)!important; text-align:left!important; color:#fff!important; } .image-suite-page main > .is-hero.oot-image-hero-card:before{ content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important; background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 46%)!important; } .image-suite-page .oot-image-hero-card > *{position:relative;z-index:1} .image-suite-page .oot-image-hero-card .is-hero-icon{ width:auto!important;height:auto!important;display:block!important;margin:0 0 18px!important;padding:0!important; border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important; color:inherit!important;font-size:3rem!important;line-height:1!important;text-align:left!important; } /* Match the simpler hero shown on the legacy photo filter page. */ .image-suite-page .oot-image-hero-card .is-eyebrow,.image-suite-page .oot-image-hero-card .is-badges{display:none!important} .image-suite-page .oot-image-hero-card h1{ max-width:900px!important;margin:0 0 16px!important;text-align:left!important; color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important; font-size:clamp(2.35rem,4.6vw,4rem)!important;line-height:1.02!important;letter-spacing:-.05em!important;font-weight:900!important; } .image-suite-page .oot-image-hero-card > p:not(.is-eyebrow){ max-width:880px!important;margin:0!important;text-align:left!important;color:#d4deed!important; font-size:clamp(.98rem,1.7vw,1.1rem)!important;line-height:1.7!important; } /* Legacy image pages use .hero: keep the same rounded-card language. */ body.oot-modern.oot-legacy-image-tool > .hero,body.oot-modern.oot-legacy-image-tool main > .hero{ width:min(1120px,calc(100% - 32px))!important;max-width:1120px!important;margin:28px auto 22px!important; border-radius:30px!important;overflow:hidden!important; } @media(max-width:780px){ .image-suite-page main > .is-hero.oot-image-hero-card{width:calc(100% - 20px)!important;margin:18px auto 16px!important;padding:30px 22px 27px!important;border-radius:23px!important} .image-suite-page .oot-image-hero-card .is-hero-icon{font-size:2.5rem!important;margin-bottom:14px!important} .image-suite-page .oot-image-hero-card h1{font-size:clamp(2rem,9vw,3rem)!important} body.oot-modern.oot-legacy-image-tool > .hero,body.oot-modern.oot-legacy-image-tool main > .hero{width:calc(100% - 20px)!important;margin:18px auto 16px!important;border-radius:23px!important} } /* ===== Migrated from image_tools/includes/image-tool-template.php inline