/* ============================================================================ * PolyScan Studio - AI Texture Tools (shared styles) * ---------------------------------------------------------------------------- * Used by every single-purpose AI tool page (image-to-normal, * normal-to-height, height-to-normal, height-to-ao). Keeps the look * consistent with the main PBR Texture Generator (#0b1220 background, * #60a5fa blue accent, slate text). * * Desktop layout: * [ topbar (sticky) ] * [ top banner ad (sticky, when present) ] * [ left ad | main tool (only this scrolls) | right ad ] * [ (sticky) | | (sticky) ] * * The shell is position: fixed and uses flex-direction: column, so every row * with flex-shrink:0 stays glued in place while only `.tt-main` scrolls. * That's how we get "sticky" top banner + left/right vertical ads without any * position:sticky gymnastics. Mobile collapses to a single column and hides * the ad rails (user said mobile is a separate plan). * ============================================================================ */ /* The studio pages already neutralise the global header padding via JS, but the tool pages run fullscreen below the 64px header so we lock body scrolling. Both html and body must be locked: in Chrome/Firefox the element is the actual scroll container, so body overflow:hidden alone does not stop the page from scrolling when the document is taller than the viewport (which happens here because the global footer lives in normal flow after the page content). Without this html lock, scrolling exposes the footer over the fixed .tt-shell on short laptop screens. Each tool's inline JS adds `tt-page` to BOTH documentElement and body, so we can target html.tt-page directly (no `:has()` needed, works on every browser that supports classList). */ html.tt-page, body.tt-page { overflow: hidden !important; height: 100vh !important; max-height: 100vh !important; } body.tt-page main { padding: 0 !important; } /* The global footer is irrelevant on a full-viewport tool page (the fixed .tt-shell already covers all space below the 64px nav). Hiding it removes any chance of it being scrolled into view. */ body.tt-page > footer, body.tt-page > .standard-footer, body.tt-page footer.standard-footer { display: none !important; } /* ----------------------------------------------------------------------- * Shell * --------------------------------------------------------------------- */ .tt-shell { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #0b1220; display: flex; flex-direction: column; z-index: 10; color: #e2e8f0; font-family: inherit; } .tt-topbar { background: #111c2f; padding: 0.7rem 1.25rem; border-bottom: 1px solid #1e293b; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 1rem; flex-wrap: wrap; } .tt-topbar-title { display: flex; flex-direction: column; min-width: 0; } .tt-topbar h1 { font-size: 1rem; font-weight: 700; color: #60a5fa; margin: 0; line-height: 1.2; } .tt-topbar .breadcrumb { font-size: 0.7rem; color: #64748b; margin-top: 0.15rem; display: flex; align-items: center; gap: 0.35rem; } .tt-topbar .breadcrumb a { color: #94a3b8; text-decoration: none; } .tt-topbar .breadcrumb a:hover { color: #cbd5e1; text-decoration: underline; } .tt-topbar-actions { display: flex; align-items: center; gap: 0.6rem; } /* Status pill (model state, etc.) */ .tt-status { font-size: 0.7rem; background: #1e293b; color: #cbd5e1; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid #334155; white-space: nowrap; } .tt-status.ok { background: #064e3b; color: #6ee7b7; border-color: #047857; } .tt-status.warn { background: #422006; color: #fcd34d; border-color: #92400e; } .tt-status.err { background: #450a0a; color: #fca5a5; border-color: #991b1b; } .tt-back { display: inline-flex; align-items: center; gap: 0.35rem; color: #cbd5e1; background: #1e293b; border: 1px solid #334155; padding: 0.4rem 0.75rem; border-radius: 0.4rem; text-decoration: none; font-size: 0.78rem; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; } .tt-back:hover { background: #334155; color: #fff; } /* ----------------------------------------------------------------------- * Sticky top banner ad row (between topbar and content grid). * The wrapper is always in the DOM so empty/unfilled AdSense responses * collapse it cleanly instead of leaving an empty band. The ad code itself * sets is-ready / is-unfilled (see adsense_functions.php). * --------------------------------------------------------------------- */ .tt-ad-top { flex-shrink: 0; background: #0a1322; border-bottom: 1px solid #1e293b; display: flex; align-items: center; justify-content: center; padding: 0.6rem 1rem; min-height: 100px; overflow: hidden; } .tt-ad-top:empty { display: none; } .tt-ad-top .manual-ad-wrapper { margin: 0; width: 100%; display: flex; justify-content: center; } .tt-ad-top .manual-ad-wrapper.is-unfilled, .tt-ad-top.is-unfilled { display: none; } /* ----------------------------------------------------------------------- * Three-column content layout: left ad rail | main tool | right ad rail. * Each column is its own scroll/overflow context. Only `.tt-main` allows * y-scroll, so left/right ads are effectively "sticky" without * position:sticky. Ad rails auto-collapse when empty/unfilled. * --------------------------------------------------------------------- */ .tt-content { flex: 1; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); gap: 1.1rem; padding: 1.1rem; overflow: hidden; min-height: 0; } .tt-main { background: #0f1729; border: 1px solid #1e293b; border-radius: 0.6rem; padding: 1.1rem 1.25rem; overflow-y: auto; min-width: 0; position: relative; } /* Left / right vertical ad columns. Width is intrinsic to the ad inside; common AdSense vertical sizes are 160x600 and 300x600. */ .tt-ad-rail { width: 180px; background: #0f1729; border: 1px solid #1e293b; border-radius: 0.6rem; padding: 0.6rem; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; min-height: 0; } .tt-ad-rail.is-wide { width: 320px; } .tt-ad-rail:empty { display: none; } .tt-ad-rail .manual-ad-wrapper { margin: 0; width: 100%; display: flex; justify-content: center; } .tt-ad-rail .manual-ad-wrapper.is-unfilled, .tt-ad-rail.is-unfilled { display: none; } /* If a rail has no ad, we hide it via JS by toggling `.is-empty` from the tool page (rendered when the PHP helper returns an empty string). This keeps the grid template column from reserving dead space. */ .tt-content.no-left { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } .tt-content.no-right { grid-template-columns: minmax(0, auto) minmax(0, 1fr); } .tt-content.no-left.no-right { grid-template-columns: minmax(0, 1fr); } /* Tablet / mobile: stack vertically, hide ads (separate mobile plan per user). */ @media (max-width: 1024px) { .tt-content { grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 1fr); max-height: 100%; } .tt-ad-rail, .tt-ad-top { display: none; } } /* ----------------------------------------------------------------------- * Headings, subtitle, copy * --------------------------------------------------------------------- */ .tt-h1 { font-size: 1.45rem; font-weight: 700; color: #f1f5f9; margin: 0 0 0.35rem 0; letter-spacing: -0.01em; } .tt-sub { color: #94a3b8; font-size: 0.85rem; line-height: 1.5; margin: 0 0 1.2rem 0; } .tt-section-title { font-size: 0.7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.4rem 0 0.55rem 0; } .tt-section-title:first-child { margin-top: 0; } /* ----------------------------------------------------------------------- * Dropzone * --------------------------------------------------------------------- */ .tt-dropzone { border: 1.5px dashed #334155; border-radius: 0.6rem; padding: 2.4rem 1.5rem; text-align: center; cursor: pointer; background: #0b1426; transition: border-color 0.15s ease, background 0.15s ease; display: block; } .tt-dropzone:hover, .tt-dropzone.is-drag { border-color: #60a5fa; background: #112340; } .tt-dropzone svg { width: 2.4rem; height: 2.4rem; color: #60a5fa; margin: 0 auto 0.7rem auto; display: block; } .tt-dropzone p { margin: 0; color: #cbd5e1; font-size: 0.92rem; } .tt-dropzone p strong { color: #f1f5f9; } .tt-dropzone .small { color: #64748b; font-size: 0.74rem; margin-top: 0.35rem; } .tt-dropzone.has-file { border-style: solid; border-color: #16a34a; background: #0f2a1a; } /* Inline source preview thumbnail shown after a file is picked. */ .tt-source-row { display: flex; align-items: center; gap: 0.85rem; background: #0b1426; border: 1px solid #1e293b; border-radius: 0.55rem; padding: 0.7rem 0.9rem; margin-top: 0.85rem; } .tt-source-thumb { width: 52px; height: 52px; border-radius: 0.35rem; background: #1e293b; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .tt-source-thumb img, .tt-source-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; } .tt-source-meta { flex: 1; min-width: 0; font-size: 0.78rem; } .tt-source-meta .name { color: #f1f5f9; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-source-meta .sub { color: #64748b; font-size: 0.7rem; margin-top: 0.1rem; } .tt-source-clear { background: transparent; border: 1px solid #334155; color: #94a3b8; border-radius: 0.35rem; padding: 0.35rem 0.65rem; font-size: 0.72rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .tt-source-clear:hover { color: #f87171; border-color: #b91c1c; } /* ----------------------------------------------------------------------- * Notice strip (beta / info banner) * --------------------------------------------------------------------- */ .tt-notice { background: rgba(96, 165, 250, 0.07); border: 1px solid rgba(96, 165, 250, 0.25); color: #cbd5e1; border-radius: 0.55rem; padding: 0.75rem 0.9rem; font-size: 0.78rem; line-height: 1.5; display: flex; gap: 0.6rem; margin-top: 0.95rem; } .tt-notice svg { width: 1.05rem; height: 1.05rem; color: #60a5fa; flex-shrink: 0; margin-top: 0.05rem; } .tt-notice a { color: #93c5fd; text-decoration: underline; } /* ----------------------------------------------------------------------- * Settings (collapsible) * --------------------------------------------------------------------- */ .tt-settings { margin-top: 1rem; background: #0b1426; border: 1px solid #1e293b; border-radius: 0.55rem; overflow: hidden; } .tt-settings summary { list-style: none; cursor: pointer; padding: 0.7rem 0.9rem; font-weight: 600; font-size: 0.82rem; color: #cbd5e1; display: flex; justify-content: space-between; align-items: center; user-select: none; } .tt-settings summary::-webkit-details-marker { display: none; } .tt-settings summary::after { content: ''; border: solid #94a3b8; border-width: 0 1.5px 1.5px 0; padding: 3px; transform: rotate(45deg); margin-left: 0.5rem; transition: transform 0.2s ease; } .tt-settings[open] summary::after { transform: rotate(-135deg); } .tt-settings-body { padding: 0.55rem 0.9rem 0.95rem; border-top: 1px solid #1e293b; display: grid; gap: 0.85rem; } /* Flat settings card - same dark panel look as .tt-settings, but no toggle header. Used when we want the controls directly visible without the "Settings" summary row. Hidden by default; revealed only after the first successful generation so users get a focused, dropzone-first first impression. When shown it sits below the result so the user can tweak sliders live (intensity-style sliders apply immediately; resolution / radius / contrast take effect on the next Generate click). */ .tt-settings-flat { margin-top: 1.4rem; background: #0b1426; border: 1px solid #1e293b; border-radius: 0.55rem; padding: 0.95rem 0.9rem; display: none; gap: 0.85rem; } .tt-settings-flat.is-visible { display: grid; } .tt-settings-flat .tt-settings-hint { font-size: 0.72rem; color: #64748b; margin: 0 0 0.15rem 0; line-height: 1.45; } .tt-settings-flat .tt-settings-hint strong { color: #94a3b8; } /* Pre-generation settings strip - only the Output resolution picker lives here. Sits between the source thumb and the Generate button so users pick target resolution before kicking off the compute. Visually lighter than `.tt-settings-flat` (which is a heavier "edit" card below the result). */ .tt-presettings { margin-top: 1rem; display: grid; gap: 0.85rem; } .tt-presettings .tt-field-note { margin: 0.4rem 0 0 0; font-size: 0.72rem; color: #64748b; line-height: 1.4; } .tt-field { display: flex; flex-direction: column; gap: 0.3rem; } .tt-field-row { display: flex; justify-content: space-between; align-items: baseline; } .tt-field label { color: #cbd5e1; font-size: 0.78rem; font-weight: 600; } .tt-field .val { color: #64748b; font-size: 0.72rem; font-variant-numeric: tabular-nums; } .tt-select, .tt-range { width: 100%; background: #0b1220; color: #e2e8f0; border: 1px solid #334155; border-radius: 0.35rem; padding: 0.4rem 0.55rem; font-size: 0.8rem; outline: none; } .tt-select:focus, .tt-range:focus { border-color: #60a5fa; } .tt-range { padding: 0; height: 1.4rem; appearance: none; background: transparent; } .tt-range::-webkit-slider-runnable-track { height: 4px; background: #1e293b; border-radius: 999px; } .tt-range::-moz-range-track { height: 4px; background: #1e293b; border-radius: 999px; } .tt-range::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: #60a5fa; border-radius: 50%; margin-top: -5px; cursor: pointer; border: 2px solid #0f1729; } .tt-range::-moz-range-thumb { width: 14px; height: 14px; background: #60a5fa; border-radius: 50%; cursor: pointer; border: 2px solid #0f1729; } /* ----------------------------------------------------------------------- * Action buttons * --------------------------------------------------------------------- */ .tt-actions { display: flex; gap: 0.55rem; margin-top: 1.15rem; } .tt-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; background: #2563eb; color: #fff; border: 1px solid #2563eb; border-radius: 0.45rem; padding: 0.65rem 1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .tt-btn:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; } .tt-btn:disabled { opacity: 0.5; cursor: not-allowed; background: #334155; border-color: #334155; } .tt-btn svg { width: 1rem; height: 1rem; } .tt-btn.ghost { background: transparent; color: #cbd5e1; border-color: #334155; } .tt-btn.ghost:hover:not(:disabled) { background: #1e293b; color: #f1f5f9; border-color: #475569; } .tt-btn.cancel { background: #b91c1c; border-color: #b91c1c; flex: 0 0 auto; padding: 0.65rem 0.85rem; } .tt-btn.cancel:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; } .tt-btn.success { background: #16a34a; border-color: #16a34a; } .tt-btn.success:hover:not(:disabled) { background: #15803d; border-color: #15803d; } /* ----------------------------------------------------------------------- * Progress bar * --------------------------------------------------------------------- */ .tt-progress { margin-top: 0.95rem; background: #0b1426; border: 1px solid #1e293b; border-radius: 0.55rem; padding: 0.65rem 0.85rem; display: none; } .tt-progress.active { display: block; } .tt-progress .lbl { color: #cbd5e1; font-size: 0.78rem; margin-bottom: 0.45rem; display: flex; justify-content: space-between; } .tt-progress .lbl .pct { color: #60a5fa; font-variant-numeric: tabular-nums; font-weight: 600; } .tt-progress .bar { height: 6px; background: #1e293b; border-radius: 999px; overflow: hidden; } .tt-progress .bar .fill { height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); width: 0%; transition: width 0.2s ease; } /* ----------------------------------------------------------------------- * Result area * --------------------------------------------------------------------- */ .tt-result { margin-top: 1.4rem; display: none; } .tt-result.active { display: block; } .tt-result-card { background: #0b1426; border: 1px solid #1e293b; border-radius: 0.6rem; overflow: hidden; } .tt-result-canvas-wrap { background: linear-gradient(45deg, #1e293b 25%, transparent 25%), linear-gradient(-45deg, #1e293b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1e293b 75%), linear-gradient(-45deg, transparent 75%, #1e293b 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-color: #0f172a; display: flex; align-items: center; justify-content: center; padding: 0.9rem; min-height: 220px; } .tt-result-canvas-wrap canvas, .tt-result-canvas-wrap img { max-width: 100%; max-height: 480px; object-fit: contain; image-rendering: pixelated; border-radius: 0.35rem; box-shadow: 0 4px 14px rgba(0,0,0,0.4); } .tt-result-footer { padding: 0.85rem 1rem; border-top: 1px solid #1e293b; display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; } .tt-result-meta { flex: 1; min-width: 200px; font-size: 0.76rem; color: #94a3b8; } .tt-result-meta strong { color: #cbd5e1; } .tt-result-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .tt-result-actions .tt-btn { flex: 0 0 auto; padding: 0.5rem 0.85rem; font-size: 0.78rem; } /* ----------------------------------------------------------------------- * AdSense slot polish. * Force ins.adsbygoogle inside our rails to fill the column nicely and * avoid overflowing horizontally on narrow viewports. * --------------------------------------------------------------------- */ .tt-ad-rail ins.adsbygoogle, .tt-ad-top ins.adsbygoogle { display: block !important; max-width: 100%; margin: 0 auto; } .tt-ad-rail ins.adsbygoogle { min-height: 600px; } .tt-ad-top ins.adsbygoogle { min-height: 90px; } /* ----------------------------------------------------------------------- * Full-screen overlay (model loading, model error) * --------------------------------------------------------------------- */ .tt-overlay { position: absolute; inset: 0; background: rgba(11, 18, 32, 0.92); backdrop-filter: blur(4px); z-index: 50; display: none; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; } .tt-overlay.active { display: flex; flex-direction: column; } .tt-spinner { width: 2.5rem; height: 2.5rem; border: 3px solid #1e293b; border-top-color: #60a5fa; border-radius: 50%; animation: tt-spin 1s linear infinite; margin-bottom: 1rem; } @keyframes tt-spin { to { transform: rotate(360deg); } } .tt-overlay h3 { color: #f1f5f9; font-size: 1.05rem; font-weight: 700; margin: 0 0 0.35rem 0; } .tt-overlay p { color: #94a3b8; font-size: 0.85rem; margin: 0; max-width: 28rem; } /* ----------------------------------------------------------------------- * Tool-card grid (used by /studio/ai-tools hub, optional) * --------------------------------------------------------------------- */ .tt-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.25rem; }