/* Gotool.xyz — stylesheet extracted from index.php */ :root{ --bg:#09090b; --bg-elev:#151318; --bg-elev-2:#1e1c22; --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.18); --text:#f4f1ec; --text-dim:#a8a3a8; --text-faint:#6c6771; --ember:#ff5a1f; --ember-hot:#ffb020; --ember-dim:rgba(255,90,31,.13); /* Cool cyan/blue pair for the nav "3D Print" link -- same shimmer mechanism as the ember/gold "AI" link (see .nav-print3d-* below), just a distinct color family so the two nav items read as separate features rather than variations of the same one. */ --print3d:#2dd4ee; --print3d-hot:#3b82f6; --print3d-dim:rgba(45,212,238,.13); --ok:#55d68a; --err:#ff6b6b; --radius:14px; --font-display:'Space Grotesk',sans-serif; --font-hero:'Archivo Black','Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased; } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} } a{color:inherit;text-decoration:none;} .mono{font-family:var(--font-mono);} img,svg{display:block;} :focus-visible{outline:2px solid var(--ember-hot); outline-offset:2px;} /* ---------- layout shells ---------- */ .wrap{max-width:1120px; margin:0 auto; padding:0 24px;} /* Photo Editor specifically gets more room to work with -- an editing tool benefits from screen width the way a simple one-shot converter doesn't, so this is scoped to just this tool (via the data-tool-slug already on , see tool-page.php) rather than raising every tool's shared .wrap width, which would just add empty space around a small dropzone on the other 39 tools instead of helping anything. */ body[data-tool-slug="photo-editor"] #tool .wrap{max-width:none;} /* Video Editor gets the same full-width treatment for the same reason -- a multi-lane timeline needs the screen's actual width, not a centered 1120px column. */ body[data-tool-slug="video-editor"] #tool .wrap{max-width:none;} /* The remaining photo-editor-specific button classes (no site-wide equivalent exists for these -- .btn and .mode-btn were moved to their base definitions further down instead, since those ARE used site-wide and are meant to be smaller everywhere now, not just here). */ body[data-tool-slug="photo-editor"] .pe-tool-btn{width:40px; padding:6px 3px;} /* The editor's own menubar sticks above even the site nav (z-index 50) once scrolled -- covers it rather than sitting below it, closer to how a real desktop app's own menu bar takes over the top of the screen. Border-radius removed here specifically: rounded corners pinned to the literal top edge of the viewport read as a rendering glitch, not a floating panel, once nothing is visible above them. */ body[data-tool-slug="photo-editor"] .pe-menubar{ position:sticky; top:0; z-index:60; border-radius:0; box-shadow:0 6px 20px rgba(0,0,0,.35); } body[data-tool-slug="photo-editor"] .pe-tool-btn svg{width:15px; height:15px;} body[data-tool-slug="photo-editor"] .pe-icon-btn{width:28px; height:28px; font-size:14px;} body[data-tool-slug="photo-editor"] .pe-icon-btn svg{width:14px; height:14px;} body[data-tool-slug="photo-editor"] .pe-icon-btn-text{padding:0 9px; font-size:11px;} /* The guide buttons' labels ("+H guide" etc.) are longer than this toolbar's usual short text-buttons ("Fit", "Apply"), which get away with the shared .pe-icon-btn 28px fixed width above because they're only 3-5 characters. .pe-icon-btn.pe-guide-btn (two classes) is needed, not just .pe-guide-btn alone, to out-specificity that same body-scoped .pe-icon-btn width rule rather than losing to it. */ body[data-tool-slug="photo-editor"] .pe-icon-btn.pe-guide-btn{width:auto; padding:0 8px;} body[data-tool-slug="photo-editor"] .pe-preset-btn{padding:6px 10px; font-size:11px;} /* Gaps between button-related elements, tightened as far as reasonably legible -- the vertical tool rail, mode-toggle groups (aspect ratio, background choice), the preset row, and the crop/marquee/wand action rows. Each value here is roughly half its site-wide default. */ body[data-tool-slug="photo-editor"] .pe-toolbar{gap:2px;} body[data-tool-slug="photo-editor"] .mode-toggle{gap:4px; margin:8px 0;} body[data-tool-slug="photo-editor"] .pe-preset-row{gap:4px; margin-bottom:8px;} body[data-tool-slug="photo-editor"] .pe-crop-actions{gap:5px;} body[data-tool-slug="photo-editor"] .pe-tool-options{gap:10px;} body[data-tool-slug="photo-editor"] .pe-bar{gap:10px; margin-top:6px; padding:6px 10px;} body[data-tool-slug="photo-editor"] .pe-bar-group{gap:3px;} body[data-tool-slug="photo-editor"] .pe-selected-actions{gap:3px;} section{padding:88px 0;} /* Tighter than the site-wide default specifically for this section -- it sits right after the FAQ list above it and right before the footer below, so it doesn't need the full 88px breathing room a section normally gets on both sides. */ #tool-faqs{padding-top:22px; padding-bottom:22px;} @media (max-width:640px){ section{padding:56px 0;} } /* ---------- nav ---------- */ .nav{ position:sticky; top:0; z-index:50; background:rgba(9,9,11,.78); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .nav-inner{ max-width:1120px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .logo{display:flex; align-items:center; gap:3px; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.02em; white-space:nowrap;} .logo-text{color:var(--text); text-transform:uppercase;} .logo-text .accent{color:var(--ember);} .logo-text .logo-suffix{color:var(--text-faint); text-transform:lowercase; font-weight:600;} .logo svg, .logo img{width:26px; height:26px; flex-shrink:0; border-radius:50%; display:block;} /* Footer's copy of the logo (bottom-left, in the "free tools, forever" line) -- deliberately not the .logo class above, which is sized for the 18px nav bar; this stays inline at the footer paragraph's own 13px so a logo-only or text-only choice from admin/branding.php doesn't change the surrounding sentence's size or rhythm. */ .footer-logo{display:inline-flex; align-items:center; gap:6px; vertical-align:middle;} .footer-logo img{width:20px; height:20px; flex-shrink:0; border-radius:50%; display:block;} .nav-links{display:flex; gap:28px; font-size:14px; color:var(--text-dim);} .nav-links a:hover{color:var(--text);} .nav-links a.active{color:var(--ember-hot);} /* ---- nav "AI" link: always-on structural styling (sizing, color, gradient-text clip). Split out from the animation itself (see nav-ai-shimmer/nav-ai-twinkle in the prefers-reduced-motion: no-preference block further down) specifically so a visitor with that preference still gets a correctly-sized sparkle icon and a correctly -colored gradient link -- just without the motion -- rather than an unsized/invisible icon, which is what happens if sizing only exists inside a conditionally-loaded animation block. */ .nav-ai-link{display:inline-flex; align-items:center; gap:4px;} .nav-ai-sparkle{ width:12px; height:12px; color:var(--ember-hot); flex-shrink:0; filter:drop-shadow(0 0 3px rgba(255,176,32,.7)); } .nav-ai-text{ background:linear-gradient(90deg, var(--ember), var(--ember-hot), #ffd27a, var(--ember-hot), var(--ember)); background-size:300% auto; background-position:0% center; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; } /* ---- nav "3D Print" link: same shimmer-text + twinkle-sparkle mechanism as the "AI" link above (see nav-print3d-shimmer/ nav-print3d-twinkle in the prefers-reduced-motion:no-preference block further down for the animation itself), recolored to a cyan/blue family so the two links read as distinct rather than duplicates. Same always-on/animation split for the same reduced-motion reason. */ .nav-print3d-link{display:inline-flex; align-items:center; gap:4px;} .nav-print3d-sparkle{ width:12px; height:12px; color:var(--print3d-hot); flex-shrink:0; filter:drop-shadow(0 0 3px rgba(59,130,246,.7)); } .nav-print3d-text{ background:linear-gradient(90deg, var(--print3d), var(--print3d-hot), #bae6fd, var(--print3d-hot), var(--print3d)); background-size:300% auto; background-position:0% center; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; } .nav-dropdown{position:relative;} .nav-dropdown-trigger{ display:flex; align-items:center; gap:5px; cursor:pointer; list-style:none; color:inherit; user-select:none; } .nav-dropdown-trigger::-webkit-details-marker{display:none;} .nav-dropdown-caret{width:13px; height:13px; transition:transform .15s ease;} .nav-dropdown[open] .nav-dropdown-caret{transform:rotate(180deg);} .nav-dropdown:hover .nav-dropdown-trigger, .nav-dropdown.active .nav-dropdown-trigger{color:var(--text);} .nav-dropdown.active .nav-dropdown-trigger{color:var(--ember-hot);} .nav-dropdown-menu{ position:absolute; top:100%; left:0; margin-top:10px; z-index:50; display:flex; flex-direction:column; gap:2px; min-width:170px; background:var(--bg-elev); border:1px solid var(--border); border-radius:11px; padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.45); } .nav-dropdown-menu a{ padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text-dim); white-space:nowrap; } .nav-dropdown-menu a:hover{background:var(--bg-elev-2); color:var(--text);} .nav-dropdown-menu a.active{color:var(--ember-hot); background:var(--ember-dim);} .nav-dropdown-menu form{margin:0;} .nav-dropdown-menu-btn{ width:100%; text-align:left; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text-dim); white-space:nowrap; background:none; border:none; cursor:pointer; font-family:inherit; transition:background .15s ease, color .15s ease; } .nav-dropdown-menu-btn:hover{background:var(--bg-elev-2); color:var(--text);} /* Nested "Conversion" flyout inside the Tools dropdown menu (Data/PDF/Office). */ .nav-subdropdown{position:relative;} .nav-subdropdown-trigger{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text-dim); white-space:nowrap; } .nav-subdropdown-trigger:hover{background:var(--bg-elev-2); color:var(--text);} .nav-subdropdown.active .nav-subdropdown-trigger{color:var(--ember-hot);} .nav-submenu{top:0; left:100%; margin-top:0; margin-left:6px;} @media (max-width:1080px){ .nav-submenu{left:auto; right:100%; margin-left:0; margin-right:6px;} } /* Language selector. Reuses the dropdown machinery; two differences: it's the rightmost nav item so its menu is right-aligned (a left-aligned one would overflow the viewport edge), and the list of 16 languages is capped in height and scrolls rather than running off the screen. */ .nav-lang-trigger{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text-dim);} .nav-lang-trigger svg:first-child{width:17px; height:17px; flex-shrink:0;} .nav-lang-label{display:none;} .nav-lang:hover .nav-lang-trigger, .nav-lang[open] .nav-lang-trigger{color:var(--ember-hot);} .nav-lang-menu{ left:auto; right:0; max-height:320px; overflow-y:auto; min-width:190px; } .nav-lang-option.active{color:var(--ember-hot); background:var(--ember-dim);} /* Translate hint: a small dismissible bar pinned bottom-right, shown only after the visitor picks a non-English language. Deliberately unobtrusive -- it's guidance, not a blocking modal. */ .lang-hint{ position:fixed; right:18px; bottom:18px; z-index:200; max-width:340px; display:flex; align-items:flex-start; gap:12px; background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:12px; padding:14px 16px; box-shadow:0 16px 44px rgba(0,0,0,.5); font-size:13px; line-height:1.5; color:var(--text-dim); animation:lang-hint-in .2s ease; } @keyframes lang-hint-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}} .lang-hint-close{ flex-shrink:0; background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:20px; line-height:1; padding:0 2px; transition:color .15s ease; } .lang-hint-close:hover{color:var(--text);} @media (max-width:520px){ .lang-hint{left:12px; right:12px; max-width:none; bottom:12px;} } .nav-login-link{ font-size:13.5px; font-weight:600; color:var(--text); border:1px solid var(--border-strong); border-radius:8px; padding:8px 16px; white-space:nowrap; transition:border-color .15s ease, background .15s ease; } .nav-login-link:hover{border-color:var(--ember); background:var(--bg-elev);} .nav-account-link{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--text-dim); white-space:nowrap; transition:color .15s ease; } .nav-account-link svg{width:16px; height:16px; flex-shrink:0;} .nav-account-link:hover, .nav-account-link.active{color:var(--ember-hot);} .nav-badge{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); display:flex; align-items:center; gap:7px; white-space:nowrap; } .nav-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(85,214,138,.15);} /* Search: icon-only trigger (reuses the .nav-dropdown-trigger look) that opens a panel with the real input, rather than the input sitting inline in the header at all times. Right-aligned under the icon like .nav-lang-menu, since it sits left of the login/account link and a left-aligned panel could run past the icon awkwardly. */ .nav-search-trigger{padding:8px; border-radius:8px; color:var(--text-dim);} .nav-search-trigger:hover{background:var(--bg-elev-2); color:var(--text);} .nav-search-toggle[open] .nav-search-trigger{background:var(--bg-elev-2); color:var(--text);} .nav-search-trigger svg{width:18px; height:18px;} .nav-search-menu{left:auto; right:0; min-width:300px; padding:10px;} .nav-search-form{position:relative; display:flex; align-items:center;} .nav-search-form-icon{position:absolute; left:12px; width:14px; height:14px; color:var(--text-faint); pointer-events:none;} .nav-search-form input{ width:100%; min-width:0; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:999px; padding:8px 14px 8px 34px; color:var(--text); font-family:var(--font-body); font-size:13.5px; transition:border-color .15s ease, background .15s ease; } .nav-search-form input::placeholder{color:var(--text-faint);} .nav-search-form input:focus{border-color:var(--ember); background:var(--bg-elev);} .nav-mobile-toggle{display:none;} @media (max-width:760px){ .nav-links{display:none;} .nav-mobile-toggle{display:block;} .nav-mobile-trigger{padding:8px; border-radius:8px;} .nav-mobile-trigger:hover{background:var(--bg-elev-2);} .nav-mobile-trigger svg{width:22px; height:22px;} /* Full-width panel anchored to the sticky header's own height (64px, see .nav-inner above) rather than the dropdown's usual position: absolute/top:100% -- that positioning is relative to the trigger itself, which would misalign or risk overflowing off-screen depending on where the hamburger lands in the header on a narrow viewport. Fixed positioning below the header works the same way regardless of screen width or scroll position. */ .nav-mobile-menu{ position:fixed; top:64px; left:0; right:0; width:100%; max-width:none; margin-top:0; border-radius:0; border-left:none; border-right:none; max-height:calc(100vh - 64px); overflow-y:auto; padding:10px; } .nav-mobile-menu a{font-size:15px; padding:13px 14px;} .nav-login-link{display:none;} /* Same fixed-below-header treatment as .nav-mobile-menu, so the search panel spans the full screen width for easier tapping instead of the narrow icon-anchored box used on desktop. */ .nav-search-menu{ position:fixed; top:64px; left:0; right:0; width:100%; min-width:0; max-width:none; margin-top:0; border-radius:0; border-left:none; border-right:none; padding:14px; } } /* ---------- hero ---------- */ /* The divider is on .hero itself rather than an
in each page's markup: 17 files use this layout, so a rule here applies to all of them and to any page added later, with no chance of one drifting out of step. Uses var(--ember) -- the same token as the logo and the accented word in each hero heading -- rather than the neutral var(--border) used by the footer and store-cta dividers. That's deliberate: this one marks the end of the hero and is meant to read as a brand rule, not as a quiet structural separator. */ .hero{position:relative; padding-top:28px; padding-bottom:64px; overflow:hidden; border-bottom:1px solid var(--ember);} .hero > *{position:relative; z-index:1;} .hero-glow{ position:absolute; top:-60px; left:64%; transform:translateX(-50%); width:860px; height:480px; pointer-events:none; z-index:0; background:radial-gradient(closest-side, rgba(255,90,31,.30), rgba(255,90,31,.08) 55%, transparent 75%); filter:blur(10px); animation:pulse 7s ease-in-out infinite; } @keyframes pulse{ 0%,100%{opacity:.75; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.06);} } @media (max-width:640px){ .hero{padding-top:20px; padding-bottom:48px;} } .eyebrow{ font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.14em; margin-bottom:18px; } .eyebrow a{color:var(--ember-hot); text-decoration:underline; text-underline-offset:3px;} .eyebrow a:hover{color:var(--ember);} .hero h1{ font-family:var(--font-hero); font-weight:400; font-size:clamp(36px, 6vw, 64px); line-height:1.04; letter-spacing:-.01em; max-width:800px; } .hero h1 .accent{color:var(--ember);} .hero-sub{ margin-top:22px; max-width:560px; font-size:17px; color:var(--text-dim); } .guide-dateline{ margin-top:12px; font-size:12.5px; color:var(--text-faint); font-family:var(--font-mono); } .hero-actions{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;} .btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; font-weight:600; font-size:13px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease; font-family:var(--font-body); } .btn:hover{transform:translateY(-1px);} .btn-primary{background:linear-gradient(135deg, var(--ember), var(--ember-hot)); color:#160c05;} .btn-ghost{background:transparent; border-color:var(--border-strong); color:var(--text);} .btn-ghost:hover{border-color:var(--ember);} .btn:disabled{opacity:.45; cursor:not-allowed; transform:none;} /* Referenced by csv-to-json's Copy/Download buttons and flowchart-maker's sample Copy button, but this rule didn't exist until now -- both were silently rendering at full .btn size with no visual effect from the class. A compact variant for actions that sit beside content (a code block, a canvas) rather than standing alone as a primary action. */ .btn-small{padding:7px 14px; font-size:13px; border-radius:8px; gap:6px;} .hero-stat{margin-top:40px; font-size:13px; color:var(--text-faint);} /* ---------- hero two-column layout + highlight card ---------- */ .hero-grid{display:grid; grid-template-columns:1fr 360px; gap:52px; align-items:stretch;} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px;} } .hero-card{ border:1px solid rgba(255,90,31,.4); border-radius:14px; background:rgba(255,90,31,.05); padding:22px 24px; } .hero-card-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border); } .hero-card-eyebrow a{color:var(--text-dim); text-decoration:underline; text-underline-offset:3px;} .hero-card-eyebrow a:hover{color:var(--ember-hot);} /* Every item is a literal fixed height (not just a min-height floor), sized to the worst case a 2-line clamped headline + 1-line clamped subtext can ever reach (~66.5px measured, rounded up to 68px for font-rendering headroom) -- otherwise the card's total height depends on the random mix of headline lengths/subtext/thumbnail on any given rotation, and on pages where the hero-card isn't sitting next to a taller neighboring column (index.php's left column happens to be tall enough to mask this), the whole hero section visibly grows and shrinks every 10 seconds as assets/hero-card.js rotates in a new set of 3. A min-height alone doesn't achieve this: content taller than the floor still grows the box past it, and the 2nd/3rd item's own divider (18px padding-top + 1px border-top, added below) sits inside that same border-box, so those two items need 19px more reserved height than the 1st item to land on the same fixed number once the divider is accounted for -- 87px vs 68px. overflow:hidden is the backstop in case any future content combination (e.g. a much longer subtext font) ever exceeds the ceiling the clamps below assume. */ .hero-card-item{display:flex; align-items:center; height:68px; overflow:hidden;} .hero-card-item-qr{justify-content:space-between; gap:16px;} .hero-card-item + .hero-card-item{margin-top:18px; padding-top:18px; border-top:1px solid var(--border); height:87px;} .hero-card-item-text{min-width:0; flex:1;} .hero-card-item-thumb{ flex-shrink:0; width:56px; height:56px; border-radius:8px; overflow:hidden; background:#fff; padding:4px; display:block; line-height:0; border:1px solid var(--border-strong); transition:border-color .15s ease; } .hero-card-item-thumb:hover{border-color:var(--ember);} .hero-card-item-thumb img{width:100%; height:100%; display:block; object-fit:contain;} .hero-card-items{transition:opacity .25s ease;} .hero-card-items-fading{opacity:0;} /* Clamped to 2 lines (with an ellipsis if a headline runs longer) so an unusually long headline can't push a single item past the 64px reserved above -- the min-height guarantees the floor, this guarantees the ceiling. */ .hero-card-headline{ font-size:14.5px; font-weight:600; line-height:1.45; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hero-card-headline a{color:inherit; text-decoration:none;} .hero-card-headline a:hover{color:var(--ember-hot); text-decoration:underline; text-underline-offset:3px;} .hero-card-source{ margin-top:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hero-stat .mono{color:var(--text-dim);} /* ---------- Qira (photo editor) spotlight, index.php only ---------- */ #view-home .spotlight{padding-top:44px; padding-bottom:44px; background:var(--bg);} .spotlight-grid{display:grid; grid-template-columns:1fr 460px; gap:52px; align-items:center;} @media (max-width:900px){ .spotlight-grid{grid-template-columns:1fr; gap:36px;} } .spotlight-preview{ border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.35); } .spotlight-preview svg{display:block; width:100%; height:auto;} .spotlight-eyebrow{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px; } .spotlight-copy h2{font-family:var(--font-display); font-size:32px; font-weight:700; line-height:1.2; margin-bottom:16px;} .spotlight-sub{font-size:15.5px; color:var(--text-dim); line-height:1.65; margin-bottom:24px; max-width:520px;} .spotlight-features{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:30px;} .spotlight-features li{display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--text-dim); line-height:1.5;} .spotlight-features svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; color:var(--ember-hot); background:var(--ember-dim); border-radius:50%; padding:3px; box-sizing:content-box; } .spotlight-actions{display:flex; flex-wrap:wrap; gap:14px;} /* ---------- section heads ---------- */ .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px;} .section-head h2{font-family:var(--font-display); font-size:28px; font-weight:700;} .section-head p{color:var(--text-faint); font-size:14px; font-family:var(--font-mono);} /* ---------- filter tabs ---------- */ .filter-tabs{display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap;} .tab{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); background:var(--bg-elev); border:1px solid var(--border); border-radius:999px; padding:7px 16px; cursor:pointer; transition:all .15s ease; } .tab:hover{border-color:var(--border-strong); color:var(--text);} .tab.active{background:var(--ember-dim); border-color:var(--ember); color:var(--ember-hot);} /* ---------- tool grid ---------- */ .tool-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px;} .search-empty{margin-top:24px; text-align:center; font-size:14px; color:var(--text-dim);} .search-empty a, .search-empty .link-btn{background:none; border:none; color:var(--ember-hot); text-decoration:underline; text-underline-offset:2px; cursor:pointer; font:inherit; padding:0;} .search-empty a:hover, .search-empty .link-btn:hover{color:var(--ember);} .related-pages{display:flex; flex-direction:column; gap:10px; margin-bottom:36px;} .related-page-link{ display:flex; flex-direction:column; gap:4px; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:16px 20px; transition:border-color .15s ease, background .15s ease; } .related-page-link:hover{border-color:var(--ember); background:var(--bg-elev-2);} .related-page-link strong{font-family:var(--font-display); font-size:15px; color:var(--text);} .related-page-link span{font-size:13.5px; color:var(--text-dim);} .tool-card-wrap{position:relative; display:flex; height:100%;} .tool-card{ text-align:left; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:22px; cursor:pointer; transition:border-color .15s ease, transform .15s ease, background .15s ease; font-family:var(--font-body); color:var(--text); display:flex; flex-direction:column; gap:10px; width:100%; } .tool-card:hover{border-color:var(--ember); transform:translateY(-2px); background:var(--bg-elev-2);} .tool-card-actions{position:absolute; top:14px; right:14px; z-index:2; display:flex; gap:4px;} .tool-card-action-form{display:contents;} .tool-card-action-btn{ width:30px; height:30px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease, transform .1s ease; } .tool-card-action-btn svg{width:16px; height:16px;} .tool-card-action-btn:hover{background:var(--bg-elev-2); border-color:var(--border);} .tool-card-action-btn:active{transform:scale(.9);} .tool-card-bookmark-btn:hover{color:var(--ember-hot);} .tool-card-bookmark-btn.is-bookmarked{color:var(--ember-hot);} .tool-card-love-btn:hover{color:#ff5a6b;} .tool-card-love-btn.is-loved{color:#ff3049;} .hero-actions .tool-card-love-btn svg, .hero-actions .tool-card-bookmark-btn svg, .hero-actions .tool-card-share-btn svg{width:16px; height:16px;} .hero-action-form{display:inline-flex; margin:0;} .tool-icon{ width:38px; height:38px; border-radius:9px; background:var(--ember-dim); display:flex; align-items:center; justify-content:center; color:var(--ember-hot); } .tool-icon svg{width:19px; height:19px;} .tool-icon-letter{font-family:var(--font-display); font-weight:700; font-size:16px;} .tool-card-icon-row{display:flex; align-items:center; gap:10px;} .beta-tag{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--err); } .beta-tag-lg{font-size:14px; vertical-align:middle; margin-left:8px;} .verified-badge{ display:inline-flex; align-items:center; gap:6px; margin:10px 0 0; font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ok); } .verified-badge svg{width:16px; height:16px; flex-shrink:0;} .tool-card h3{font-family:var(--font-display); font-size:17px; font-weight:600;} .tool-card p{font-size:14px; color:var(--text-dim); flex-grow:1;} .tool-meta{font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); letter-spacing:.02em;} .tool-card.is-soon{cursor:default; opacity:.55;} .tool-card.is-soon:hover{transform:none; border-color:var(--border); background:var(--bg-elev);} .tool-card.is-soon .tool-icon{background:var(--bg-elev-2); color:var(--text-faint);} /* ---------- search-box card (new-tools.php, 12th grid slot) ---------- */ .tool-card-search{justify-content:center; cursor:default;} .tool-card-search p{font-size:13.5px; color:var(--text-dim);} .tool-card-search-field{position:relative; margin-top:2px;} .tool-card-search-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-faint); pointer-events:none;} .tool-card-search-field input{ width:100%; background:var(--bg-elev-2); border:1px solid var(--border-strong); border-radius:999px; padding:10px 14px 10px 34px; color:var(--text); font-family:var(--font-body); font-size:13.5px; transition:border-color .15s ease; } .tool-card-search-field input::placeholder{color:var(--text-faint);} .tool-card-search-field input:focus{border-color:var(--ember);} .tool-card[hidden]{display:none;} .tool-card-wrap[hidden]{display:none;} .tool-card-search{cursor:default;} .tool-card-search:hover{transform:none; border-color:var(--border);} .tool-card-search-row{display:flex; gap:8px;} .tool-card-search-row input{ flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-family:var(--font-body); font-size:13px; cursor:text; } .tool-card-search-row input:focus{border-color:var(--ember);} .tool-card-search-btn{ flex-shrink:0; width:38px; height:38px; border-radius:8px; border:1px solid var(--border-strong); background:var(--bg-elev-2); color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; } .tool-card-search-btn:hover{border-color:var(--ember); color:var(--ember-hot);} .tool-card-search-btn svg{width:16px; height:16px;} /* ---------- how it works ---------- */ .how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} @media (max-width:760px){ .how-grid{grid-template-columns:1fr;} } .how-step{border-top:1px solid var(--border-strong); padding-top:16px;} .how-step .num{font-family:var(--font-mono); color:var(--ember); font-size:13px; display:block; margin-bottom:10px;} .how-step h3{font-family:var(--font-display); font-size:16px; font-weight:600; margin-bottom:8px;} .how-step p{font-size:14px; color:var(--text-dim);} /* ---------- faq ---------- */ .faq-list{display:flex; flex-direction:column; gap:10px; max-width:760px;} .faq-item{ background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:4px 20px; } .faq-item summary{ cursor:pointer; list-style:none; padding:16px 0; font-family:var(--font-display); font-weight:600; font-size:15.5px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{ content:"+"; font-family:var(--font-mono); font-size:20px; color:var(--ember-hot); flex-shrink:0; transition:transform .15s ease; } .faq-item[open] summary::after{transform:rotate(45deg);} .faq-item p{font-size:14px; color:var(--text-dim); padding-bottom:18px; max-width:640px;} /* aboutus.php, plus every category/listing page (.cat-page -- pdf-tools, office-tools, video-tools, image-tools, audio-tools, all-tools, new-tools, security-tools, conversion-tools, data-tools) -- two columns instead of the single-column list used elsewhere (.faq-list is shared, so this is scoped through .about-page/.cat-page rather than changed globally). align-items:start keeps each item's own height independent, so opening one item doesn't stretch the box next to it in the same row. */ .about-page .faq-list, .cat-page .faq-list{ display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:row; gap:10px 20px; max-width:none; align-items:start; } @media (max-width:760px){ .about-page .faq-list, .cat-page .faq-list{grid-template-columns:1fr;} } /* ---------- per-tool details: how-it-works + faq side by side ---------- */ .tool-details-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;} @media (max-width:760px){ .tool-details-grid{grid-template-columns:1fr; gap:32px;} } .tool-how-steps{display:flex; flex-direction:column; gap:0; list-style:none;} .tool-how-step{ display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-top:1px solid var(--border); font-size:15px; color:var(--text-dim); } .tool-how-step:first-child{border-top:none;} .tool-how-num{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--bg-elev); border:1px solid var(--border-strong); color:var(--ember-hot); font-family:var(--font-mono); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; } .tool-how-text{padding-top:3px;} .privacy-block{ margin-top:56px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-elev); padding:26px 28px; display:flex; flex-direction:row; flex-wrap:nowrap; gap:20px; align-items:center; } .privacy-block svg{width:22px; height:22px; color:var(--ember-hot); flex-shrink:0;} .privacy-block p{font-size:14px; color:var(--text-dim);} /* partials/privacy.php wraps this in its own
, which already gets the standard 88px section padding -- the 56px margin-top above only makes sense when this sits directly under a "how it works" grid within the SAME section (partials/how-privacy.php's combined layout). Without this override, tool pages stacked 88+88+56px of empty space between "You might also need" and this box. */ #how-privacy-wrap{padding-top:21px; padding-bottom:21px;} #how-privacy-wrap .privacy-block{margin-top:0;} #related{padding-bottom:44px; padding-top:0;} /* Tool pages only (see the hero-tool class added in tool-page.php). Two separate 44px gaps around the hero/panel boundary: 44px after the hero text (this rule) and 44px before the panel content (#tool, below) -- kept as two rules on two different selectors rather than one combined value so each side can be adjusted independently. */ .hero-tool{padding-bottom:44px !important;} #tool{padding-top:44px; padding-bottom:44px;} #tool-details{padding-top:44px; padding-bottom:44px; border-top:1px solid var(--border);} /* index.php only (#tools, #how, and .hero are shared ids/classes reused across many other pages, so these are scoped through the page's unique #view-home wrapper rather than touching them directly -- otherwise this would also change spacing on every category page, which wasn't asked for). Three ad-slot gaps that render empty when no ad is configured, each reduced to a plain 44px instead of two stacked 88px section paddings. */ #view-home .hero{padding-bottom:44px;} #view-home #tools{padding-top:0; padding-bottom:44px; background:var(--bg);} #view-home #how{padding-top:0; padding-bottom:44px; background:var(--bg);} /* Same treatment as index.php/tool pages, applied to the category listing pages (pdf-tools.php, office-tools.php, video-tools.php, image-tools.php, audio-tools.php, all-tools.php, new-tools.php, conversion-tools.php, data-tools.php, security-tools.php) via the shared .cat-page class added to each page's
-- scoped so mytools.php and search.php (which also use .hero/#tools but weren't asked for this) stay untouched. */ .cat-page .hero{padding-bottom:44px !important;} .cat-page #tools{padding-top:44px; padding-bottom:44px;} .cat-page #faq{padding-top:0; padding-bottom:44px;} .cat-page #how{padding-top:0; padding-bottom:44px;} .privacy-block strong{color:var(--text); font-weight:600;} /* login.php only (#auth and #how are shared with forgot-password.php / reset-password.php, so this is scoped through the .auth-page class added to login.php's
rather than touching those other two pages, which weren't asked for). */ .auth-page .hero{padding-bottom:44px !important;} .auth-page #auth{padding-top:44px; padding-bottom:44px;} .auth-page #how{padding-top:0; padding-bottom:44px;} /* aboutus.php only (#faq is shared with the category listing pages, so it's scoped through .about-page; the other section ids on this page -- #origin, #values, #numbers, #whats-next, #who, #terms, #privacy -- are unique to aboutus.php and don't need scoping). Same shape as the .cat-page treatment: the first section after the hero keeps the standard 88px hero gap (44+44), then every later section sits 44px from the one before it, all the way down to #privacy just before the footer. */ .about-page .hero{padding-bottom:44px !important;} #origin{padding-top:44px; padding-bottom:44px;} #values{padding-top:0; padding-bottom:44px;} #numbers{padding-top:0; padding-bottom:44px;} #whats-next{padding-top:0; padding-bottom:44px;} #who{padding-top:0; padding-bottom:44px;} #terms{padding-top:0; padding-bottom:44px;} .about-page #faq{padding-top:0; padding-bottom:44px;} .about-page #privacy{padding-top:0; padding-bottom:44px;} /* contactus.php only -- #contact-form is unique to this page, but the shared .hero needs the .contact-page scope. Same shape as login.php's #auth: standard 88px hero gap, then 44px before the footer. */ .contact-page .hero{padding-bottom:44px !important;} .contact-page #contact-form{padding-top:44px; padding-bottom:44px;} /* ---------- tool view ---------- */ #view-tool{padding-top:44px;} .back-link{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin-bottom:28px; padding:6px 0; } .back-link:hover{color:var(--ember-hot);} .tool-header{margin-bottom:32px;} .tool-header h2{font-family:var(--font-display); font-size:30px; font-weight:700; margin-bottom:8px;} .tool-header p{color:var(--text-dim); font-size:15px;} .dropzone{ border:1.5px dashed var(--border-strong); border-radius:var(--radius); background:var(--bg-elev); padding:40px 24px; text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease; } .dropzone:hover, .dropzone.dragover{border-color:var(--ember); background:var(--ember-dim);} .dropzone svg{width:30px; height:30px; margin:0 auto 14px; color:var(--ember-hot);} .dropzone p{font-size:14px; color:var(--text-dim);} .dropzone .dz-strong{color:var(--text); font-weight:600;} .dropzone .dz-hint{margin-top:6px; font-size:12px; color:var(--text-faint); font-family:var(--font-mono);} .dropzone input{display:none;} .file-list{margin-top:20px; display:flex; flex-direction:column; gap:8px;} .file-row{ display:flex; align-items:center; gap:12px; background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:10px 14px; } .file-row .f-index{font-family:var(--font-mono); font-size:12px; color:var(--text-faint); width:20px;} .file-row .f-name{flex-grow:1; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .file-row .f-size{font-family:var(--font-mono); font-size:12px; color:var(--text-faint); white-space:nowrap;} .file-row .f-actions{display:flex; gap:4px;} .f-actions button{ width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:var(--bg-elev-2); color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; } .f-actions button:hover{border-color:var(--ember); color:var(--ember-hot);} .f-actions button:disabled{opacity:.3; cursor:not-allowed;} .f-actions button svg{width:13px; height:13px;} .tool-actions{margin-top:24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;} .mode-toggle{display:flex; gap:8px; margin:20px 0; flex-wrap:wrap;} .effect-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin:14px 0 4px; } .effect-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; border:1px solid var(--border); border-radius:10px; background:var(--bg-elev); padding:12px 13px; cursor:pointer; transition:border-color .15s ease, background .15s ease; } .effect-card:hover{border-color:var(--border-strong); background:var(--bg-elev-2);} .effect-card.active{border-color:var(--ember); background:var(--ember-dim);} .effect-emoji{font-size:20px; line-height:1;} .effect-name{font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--text);} .effect-desc{font-size:11.5px; color:var(--text-faint); line-height:1.35;} @media (max-width:560px){ .effect-grid{grid-template-columns:repeat(auto-fill, minmax(130px,1fr));} } /* Collage layout picker: small cards, each showing an SVG preview of the template's cell arrangement above its name. The preview uses currentColor, so the card's text colour drives it -- which makes the active card's preview turn ember automatically, no separate rule. */ .tmpl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:10px; margin:12px 0 4px; } .tmpl-card{ display:flex; flex-direction:column; align-items:center; gap:8px; border:1px solid var(--border); border-radius:10px; background:var(--bg-elev); padding:12px 8px; cursor:pointer; color:var(--text-faint); transition:border-color .15s ease, background .15s ease, color .15s ease; } .tmpl-card:hover{border-color:var(--border-strong); background:var(--bg-elev-2); color:var(--text-dim);} .tmpl-card.active{border-color:var(--ember); background:var(--ember-dim); color:var(--ember);} .tmpl-preview{display:flex; align-items:center; justify-content:center; line-height:0;} .tmpl-preview svg{width:44px; height:44px; display:block;} .tmpl-label{font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--text);} @media (max-width:560px){ .tmpl-grid{grid-template-columns:repeat(auto-fill, minmax(74px,1fr));} } .mode-btn{ font-family:var(--font-body); font-size:12px; font-weight:500; color:var(--text-dim); background:var(--bg-elev); border:1px solid var(--border); border-radius:7px; padding:6px 11px; cursor:pointer; } .mode-btn.active{background:var(--ember-dim); border-color:var(--ember); color:var(--ember-hot);} .mode-btn:disabled{opacity:.4; cursor:not-allowed;} .range-field{margin-top:14px;} .range-field label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:8px;} .range-field input{ width:100%; max-width:420px; background:var(--bg-elev); border:1px solid var(--border); border-radius:9px; padding:11px 14px; color:var(--text); font-family:var(--font-mono); font-size:14px; } .range-field input:focus{border-color:var(--ember);} .range-hint{font-size:12px; color:var(--text-faint); margin-top:8px;} /* A small "?" badge for putting a plain-language explanation next to a label without permanently taking up page space -- uses the browser's own native title-attribute tooltip (same mechanism already used for the QR tool's disabled "Engraved" button's "Coming soon" hint) rather than a custom JS popover, so it needs no extra markup, script, or positioning logic to show correctly near a page edge. `cursor:help` and `tabindex="0"` (paired with a `title` attribute on the element itself) mean it's discoverable by mouse hover and, since native titles also surface on keyboard focus in most browsers, reasonably usable without a mouse too. */ .info-hint{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--bg-elev); border:1px solid var(--border); color:var(--text-dim); font-size:10px; font-weight:700; line-height:1; cursor:help; flex-shrink:0; user-select:none; } .info-hint:hover, .info-hint:focus-visible{color:var(--text); border-color:var(--text-dim);} .page-count{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); margin-top:16px; } .page-count strong{color:var(--ember-hot);} .tool-note{ margin-top:18px; font-size:13px; line-height:1.5; color:var(--text-dim); background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:13px 15px; display:flex; gap:10px; align-items:flex-start; } .tool-note svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--text-faint);} .status{ margin-top:24px; border-radius:10px; padding:14px 16px; font-size:13.5px; display:none; gap:10px; align-items:flex-start; } .status.show{display:flex;} .status.status-ok{background:rgba(85,214,138,.09); border:1px solid rgba(85,214,138,.3); color:#bdf3d3;} .status.status-err{background:rgba(255,107,107,.09); border:1px solid rgba(255,107,107,.3); color:#ffc4c4;} .status.status-busy{background:var(--ember-dim); border:1px solid rgba(255,90,31,.3); color:#ffd7bd;} .status .job-id{display:block; margin-top:4px; font-family:var(--font-mono); font-size:12px; opacity:.8;} .status svg{width:16px; height:16px; flex-shrink:0; margin-top:1px;} /* ---------- edit pdf ---------- */ .pdf-edit-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:18px 0;} .pdf-edit-toolbar-left{display:flex; align-items:center; gap:10px;} .pdf-edit-toolbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .pdf-edit-nav-btn{padding:7px 14px; font-size:15px; line-height:1;} .pdf-edit-page-indicator{font-size:12.5px; color:var(--text-dim);} .pdf-edit-size-label{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim);} .pdf-edit-size-select{ font-family:var(--font-mono); font-size:12px; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:7px; color:var(--text-dim); padding:5px 8px; cursor:pointer; } .pdf-edit-hint{font-size:13px; color:var(--text-faint); margin-bottom:10px; text-align:center;} .pdf-edit-stage{ position:relative; width:fit-content; max-width:100%; margin:0 auto; box-shadow:0 20px 50px rgba(0,0,0,.4); border-radius:4px; overflow:hidden; line-height:0; } .pdf-edit-stage canvas{display:block; max-width:100%; height:auto;} .pdf-edit-overlay{position:absolute; top:0; left:0; right:0; bottom:0; cursor:text;} .pdf-edit-input{ position:absolute; min-width:120px; min-height:1.4em; background:rgba(255,255,255,.97); border:1.5px dashed var(--ember); border-radius:3px; padding:2px 4px; font-family:var(--font-body); color:#141414; resize:both; overflow:auto; line-height:1.3; } .pdf-edit-label{ position:absolute; font-family:var(--font-body); color:#141414; white-space:pre-wrap; padding:2px 20px 2px 4px; border-radius:3px; cursor:default; line-height:1.3; max-width:80%; } .pdf-edit-label:hover{outline:1px dashed rgba(255,90,31,.6);} .pdf-edit-label-del{ position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%; background:var(--err); color:#fff; border:none; font-size:11px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; } /* ---------- document viewer ---------- */ .doc-viewer-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:760px; margin:24px auto 0; flex-wrap:wrap;} .doc-viewer-toolbar .doc-filename{font-size:12.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .doc-viewer-actions{display:flex; gap:10px;} .doc-viewer-save, .doc-viewer-clear{padding:8px 16px; font-size:13px;} .doc-viewer{ background:#fdfcfa; color:#201f1c; border-radius:12px; padding:48px 56px; max-width:760px; margin:14px auto 0; box-shadow:0 24px 60px rgba(0,0,0,.4); line-height:1.65; font-size:15.5px; font-family:var(--font-body); outline:none; transition:box-shadow .15s ease; } .doc-viewer[contenteditable="true"]:focus{box-shadow:0 24px 60px rgba(0,0,0,.4), 0 0 0 3px var(--ember);} @media (max-width:640px){ .doc-viewer{padding:30px 22px;} } .doc-viewer h1{font-family:var(--font-display); font-size:26px; font-weight:700; margin:0 0 16px; color:#111; line-height:1.2;} .doc-viewer h1:not(:first-child){margin-top:30px;} .doc-viewer h2{font-family:var(--font-display); font-size:19px; font-weight:700; margin:28px 0 10px; color:#181818;} .doc-viewer h3{font-family:var(--font-display); font-size:15.5px; font-weight:700; margin:20px 0 8px; color:#181818;} .doc-viewer p{margin:0 0 14px;} .doc-viewer ul, .doc-viewer ol{margin:0 0 16px; padding-left:24px;} .doc-viewer li{margin-bottom:7px;} /* A sub-list rendered inside an
  • (see the stack-based nesting logic in renderDocx) sits directly under that item's own text -- reset its top margin so it doesn't inherit the standalone list spacing above, and drop its own bottom margin since the parent
  • already provides spacing before the NEXT top-level item. */ .doc-viewer li > ul, .doc-viewer li > ol{margin-top:6px; margin-bottom:0;} /* A real Word "Columns" section () -- native CSS multi-column layout does correct newspaper-style flow (fills the first column top to bottom, then continues in the next) with no manual line-splitting needed, unlike the PDF export path. */ .doc-viewer-columns{column-count:2; column-gap:28px; margin:0 0 16px;} .doc-viewer-columns p:first-child{margin-top:0;} /* The site-wide reset (a{color:inherit;text-decoration:none;}) would otherwise make a real render completely invisibly -- same color as surrounding text, no underline -- which defeats the point of having parsed it as a real link at all. */ .doc-viewer a{color:#1a5fb4; text-decoration:underline;} .doc-viewer img{max-width:100%; height:auto; display:block; margin:18px 0; border-radius:4px;} /* A floating (anchored, wrapSquare/wrapTight) image gets a real CSS float instead of always breaking the text flow -- the specificity here (img.class, matching .doc-viewer img's own specificity) is needed to actually override that rule's non-floating margin, not just add to it. clear:both on headings/tables is the DOM-side twin of the PDF path's "always clear the float before a heading" rule -- content that shouldn't visually squeeze in beside a floated image never does, regardless of exactly how many lines the float spans. */ .doc-viewer img.doc-viewer-float-img{float:left; margin:4px 18px 12px 0; max-width:45%;} .doc-viewer h1, .doc-viewer h2, .doc-viewer h3, .doc-viewer table{clear:both;} .doc-viewer table{border-collapse:collapse; width:100%; margin:16px 0; font-size:14px;} .doc-viewer td{padding:8px 11px; vertical-align:top;} .pdf-preview-pagebreak{border:none; border-top:1px dashed var(--border-strong); margin:26px 0; opacity:.6;} /* PDF to Word preview pagination. The preview used to be one continuous column of text with only a faint dashed rule between source pages -- on a multi-page document that read as an undifferentiated wall of text with no way to tell where one page ended and the next began. Each source page now gets an explicit "Page N of M" label above its own sheet, and the sheet carries the SOURCE page's real aspect ratio (set inline from the PDF's own pgSz) so a portrait original previews as a portrait page. Scoped to .pdf-preview-* rather than .doc-viewer, which is shared with the View & Edit Word and Word to PDF tools. */ .pdf-preview-pagelabel{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin:26px 0 7px; display:flex; align-items:center; gap:11px; } .pdf-preview-pagelabel::after{content:''; flex:1; border-top:1px dashed var(--border-strong); opacity:.55;} .pdf-preview-pagelabel:first-child{margin-top:0;} .pdf-preview-page{ background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,.16); padding:7% 8%; height:auto; box-sizing:border-box; } /* The source page's shape is applied as a MINIMUM height, via the zero-width floated pseudo-element trick, with the ratio passed in as --page-ar (a percentage of the sheet's width). `aspect-ratio` was tried first and is wrong here: with height:auto it FIXES the box height to the ratio, and `min-height:min-content` does not override it -- so a page whose extracted content is taller than the ratio (very common: a dense statement page) simply overflowed its sheet and ran straight over the next page's sheet. Measured on a real 42-page document: sheets 914px tall holding up to 1110px of content, colliding with the following page on 38 of 42 sheets. The float trick sets a floor instead of a ceiling, so a sheet always grows to fit. */ /* Shared page-sheet shape. Used by PDF to Word's per-page preview sheets and by the View & Edit Word viewer, so both tools present a document on a real page rather than an arbitrary text column. --page-ar is the page's height as a percentage of its width, set inline from the document's own page setup. */ .doc-page-sheet::before{ content:''; display:block; float:left; width:0; padding-top:var(--page-ar, 129.4%); } .doc-page-sheet::after{content:''; display:block; clear:both;} .pdf-preview-page::before{ content:''; display:block; float:left; width:0; padding-top:var(--page-ar, 129%); } .pdf-preview-page::after{content:''; display:block; clear:both;} /* The shared .doc-viewer table rules add 8px/11px cell padding and a 16px table margin, which is right for the View & Edit Word viewer but wrong here: the .docx this preview mirrors zeroes its cell margins and takes row height straight from the source's line advance, so the padded preview rows stood visibly taller than both the source PDF and the downloaded file. Reset inside preview sheets only. */ .pdf-preview-page table{margin:0 !important; width:100%; table-layout:auto;} /* Vertical padding zeroed (row height must come from the source's line advance, as in the .docx); a little horizontal padding is kept so adjacent columns don't run together -- removing it entirely jammed "33,200" and "38,633" into "33,20038,633". */ .pdf-preview-page td{padding:0 10px 0 0 !important; vertical-align:top;} .pdf-preview-page td:last-child{padding-right:0 !important;} @media (max-width:640px){ .pdf-preview-page{padding:20px 16px;} } /* The previous rule here unconditionally shaded and bolded every table's first row, regardless of what the source document actually specified -- confirmed against a real document with genuinely bold (via real , already correctly rendered as ) but completely unshaded header cells, which this rule was still coloring anyway. Real per-cell shading, when a document actually has it, is now applied as an inline background-color at render time instead; bold is already handled correctly by the existing run-formatting path with no CSS assumption needed at all. */ @media (max-width:640px){ .doc-viewer{padding:30px 22px;} } /* ---------- ad slots ---------- */ /* Only ever rendered when a slot actually has code (see partials/ad-slot.php), so this never leaves an empty gap on the page. */ .ad-slot{padding:26px 0; text-align:center;} /* No border/background "card" around the ad anymore (removed per user request — it used to be a bordered box hugging just the ad creative). Still an inline-block wrapper, not just for legacy reasons: the .ad-slot-badge above the ad is absolutely positioned against this element, so it still needs position:relative + some top padding to give the badge clearance above the creative, and inline-block still shrink-wraps to the ad's own size so the badge sits at the ad's actual top-right corner rather than the full 1120px .wrap row's. */ .ad-slot-frame{ position:relative; display:inline-block; max-width:100%; padding-top:18px; } .ad-slot-frame > *{max-width:100%;} .ad-slot img, .ad-slot iframe{max-width:100%; height:auto; border:0;} /* Disclosure badge ("Sponsor" / "Advertisement" / "Partner", picked per slot in admin/ads.php — see gotool_ad_label() in data/ads.php). Only rendered when the admin chose one, so a slot with "No label" gets no extra markup at all. pointer-events:none keeps it from ever stealing a click meant for the ad underneath. */ .ad-slot-badge{ position:absolute; top:8px; right:12px; z-index:1; pointer-events:none; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ember-hot); text-shadow:0 0 6px rgba(255,176,32,.8), 0 0 16px rgba(255,176,32,.45); } /* Ad rotation display group (slot 3) -- up to two ads side by side (600x600 when there's room), cycled by assets/app.js (see the "AD ROTATION DISPLAY" block there). Renders at the top of store-cta-main (see partials/footer.php), in line with the top of cta-cards-col on the right -- so .ad-rotation-row is just a plain flex row filling that column's own width, not a separately centred/padded container of its own (store-cta-main and .wrap already handle that). Squeezed next to cta-cards-col's 320px sidebar, this column tops out well under 600px on most screens, so the pair renders proportionally smaller there rather than at literal 600x600 -- accepted tradeoff for sitting in line with "About Us" rather than spanning the full section width. */ .ad-rotation-row{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:20px; } /* Half the base .ad-slot rule's 26px top/bottom padding -- scoped to just this slot (not the shared .ad-slot rule above, which slots 1/2 also use) so the banners sit closer to the surrounding content without changing spacing anywhere else. */ .ad-rotation-slot{padding:13px 0;} /* flex:1 1 260px (not a fixed 600px) so the pair shrinks together to fit the column instead of overflowing it and wrapping to two stacked rows -- the 600px cap only ever applies once there's actually room for it. 260px keeps each column from squeezing so far down that a 600x600 creative pasted in verbatim (no responsive sizing of its own) starts clipping against `overflow:hidden` on an ordinary phone width; below that this itself wraps to one column per row. */ .ad-rotation-col{ flex:1 1 260px; max-width:600px; aspect-ratio:1/1; overflow:hidden; transition:opacity .26s ease; } /* Each ad's own .ad-rotation-frame fills its column completely (rather than just shrink-wrapping the ad code) so its per-entry .ad-slot-badge -- see partials/ad-rotation.php -- has a full-size, position:relative box to sit in the corner of, no matter how the pasted ad code itself is sized. This is also the element assets/app.js moves between the pool and the visible columns, so the badge (rendered inside it) travels with its own ad automatically when the rotation swaps it in or out -- nothing has to re-match a badge to an ad on each tick. */ .ad-rotation-frame{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; } .ad-rotation-frame > *{max-width:100%; max-height:100%;} .ad-rotation-frame img, .ad-rotation-frame iframe{max-width:100%; height:auto; border:0;} /* ---------- store badges (coming soon) + privacy card ---------- */ .store-cta{border-top:1px solid var(--border); padding:44px 0 40px;} /* Two columns on wide screens: text + badges on the left, the two grouped link cards stacked on the right (About/Terms/Privacy taller, FAQ/Contact shorter below it) -- collapses to one stacked column on narrower screens where there's no room for a side-by-side layout. */ .store-cta-layout{display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start;} .store-cta-main{min-width:0; text-align:center;} .cta-cards-col{display:flex; flex-direction:column; gap:16px;} @media (max-width:900px){ .store-cta-layout{grid-template-columns:1fr;} } .store-cta-eyebrow{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-hot); margin-bottom:10px; } .store-cta-heading{font-family:var(--font-display); font-size:23px; font-weight:700; margin-bottom:8px;} .store-cta-sub{font-size:14px; color:var(--text-dim); max-width:560px; margin:0 auto 26px;} .store-badges{ display:flex; justify-content:center; align-items:stretch; gap:12px; flex-wrap:wrap; list-style:none; padding:0; margin:0; } .store-badge{ display:flex; align-items:center; gap:11px; text-align:left; border:1px solid var(--border-strong); border-radius:11px; padding:9px 16px 9px 13px; background:var(--bg-elev); flex:0 1 auto; min-width:0; cursor:default; } .store-badge-icon{ flex-shrink:0; width:26px; height:26px; color:var(--text-dim); display:flex; align-items:center; justify-content:center; } .store-badge-icon svg{width:100%; height:100%;} .store-badge-text{display:flex; flex-direction:column; line-height:1.25; min-width:0;} .store-badge-text small{font-size:10px; color:var(--text-faint); letter-spacing:.02em; white-space:nowrap;} .store-badge-text strong{ font-family:var(--font-display); font-size:14.5px; font-weight:600; color:var(--text-dim); white-space:nowrap; } /* One bordered "card" holding several stacked link rows (About Us/Terms/ Privacy in one group, FAQ/Contact Us in another) rather than each link being its own separate card. */ .cta-card-group{ display:flex; flex-direction:column; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--bg-elev); overflow:hidden; } .cta-card-row{ display:flex; align-items:center; gap:14px; text-align:left; padding:16px 18px; transition:background .15s ease; } .cta-card-row:hover{background:var(--bg-elev-2);} .cta-card-row + .cta-card-row{border-top:1px solid var(--border);} .cta-card-row svg{width:22px; height:22px; color:var(--ember-hot); flex-shrink:0;} .cta-card-row-text{display:flex; flex-direction:column; gap:3px; min-width:0;} .privacy-cta-card-title{font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--text);} .privacy-cta-card-sub{font-size:12.5px; color:var(--text-faint); line-height:1.4;} @media (max-width:560px){ .store-badges{gap:10px;} .store-badge{flex:1 1 calc(50% - 5px); padding:9px 12px;} .store-badge-text strong{font-size:13px;} } /* Link directory (For Business / For Developer & Creator) sitting below the store badges -- fills the leftover vertical space in store-cta-main caused by the taller cta-cards-col next to it. Explicit 2-column grid (not flex-wrap) so the two groups always sit side by side on wide screens -- flex-wrap would drop to a stacked single column whenever the combined content width nudged past the available space, which happened right at the site's default desktop width. */ .footer-link-dirs{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:28px; padding-top:28px; border-top:1px solid var(--border); text-align:left; } @media (max-width:640px){ .footer-link-dirs{grid-template-columns:1fr;} } .footer-link-col{min-width:0;} /* Each group's own link list splits into 2 columns. column-count (not grid) deliberately: with 5 links that gives 3-then-2 filled top-to- bottom in reading order (col 1: items 1-3, col 2: items 4-5) -- the way a person actually reads a short list split into columns. A grid with 2 explicit columns would instead fill left-to-right, pairing unrelated items row-by-row (1&2, 3&4, 5¬hing), which reads oddly for a simple link list. break-inside:avoid on each link stops a browser from ever splitting one link's box across the column gap. */ .footer-link-col-links{ column-count:2; column-gap:20px; margin-top:4px; } .footer-link-col-links a{ break-inside:avoid; } @media (max-width:420px){ .footer-link-col-links{column-count:1;} } .footer-link-col-title{ font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text); margin-bottom:12px; } .footer-link-col a{ display:block; font-size:13.5px; color:var(--text-dim); padding:6px 0; transition:color .15s ease; } .footer-link-col a:hover{color:var(--ember-hot);} /* ---------- member accounts ---------- */ .member-notice{ margin-top:24px; font-size:13.5px; line-height:1.5; color:var(--text-dim); background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:var(--radius); padding:16px 18px; } .member-notice strong{color:var(--text); display:block; margin-bottom:4px;} .auth-wrap{padding:8px 0 60px;} .auth-pending{max-width:420px; margin:0 auto;} .auth-grid{display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; max-width:840px; margin:0 auto;} @media (max-width:860px){ .auth-grid{grid-template-columns:1fr; gap:32px; max-width:420px;} } .auth-form-col{max-width:420px; width:100%;} .auth-benefits{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:26px 24px; order:2; } @media (max-width:860px){ .auth-form-col{margin:0 auto;} } .auth-benefits-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ember-hot); margin-bottom:18px; } .auth-benefits-list{list-style:none; display:flex; flex-direction:column; gap:18px;} .auth-benefits-list li{display:flex; gap:14px; align-items:flex-start;} .auth-benefits-list li + li{padding-top:18px; border-top:1px solid var(--border);} .auth-benefits-list .tool-icon{flex-shrink:0;} .auth-benefits-list h3{font-size:14px; font-weight:600; color:var(--text); margin-bottom:4px;} .auth-benefits-list p{font-size:13px; color:var(--text-dim); line-height:1.5;} .auth-tabs{display:flex; gap:8px; margin-bottom:18px;} .auth-tab{ flex:1; text-align:center; padding:11px; border-radius:9px; border:1px solid var(--border); font-size:14px; font-weight:600; color:var(--text-dim); background:var(--bg-elev); transition:border-color .15s ease, color .15s ease, background .15s ease; } .auth-tab.active{border-color:var(--ember); color:var(--ember-hot); background:var(--ember-dim);} .auth-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-elev); padding:28px 26px; } .auth-form{display:flex; flex-direction:column; gap:16px;} .auth-field{display:flex; flex-direction:column; gap:7px; font-size:13.5px; color:var(--text-dim);} .auth-field-hint{color:var(--text-faint); font-weight:400;} .auth-field input{ background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:11px 14px; color:var(--text); font-family:var(--font-body); font-size:14.5px; transition:border-color .15s ease; } .auth-field input:focus{border-color:var(--ember); outline:none;} .auth-submit{width:100%; justify-content:center;} .auth-error{ font-size:13px; color:#ffb4b4; background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.3); border-radius:8px; padding:10px 13px; } .auth-fineprint{font-size:12px; color:var(--text-faint); line-height:1.5; text-align:center;} /* ---------- footer ---------- */ footer{border-top:1px solid var(--border); padding:28px 0;} .footer-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;} footer p{font-size:13px; color:var(--text-faint); margin:0;} .footer-badge{flex-shrink:0;} [hidden]{display:none !important;} /* ---------- photo editor ---------- */ .pe-root{margin-top:20px;} /* Menu bar: File/Edit/Image/Layer/Filter/View/Window, built with the same zero-JS
    / dropdown pattern used in partials/nav.php. */ .pe-menubar{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px 12px 0 0; padding:5px 8px; } .pe-menu{position:relative;} .pe-menu summary{ list-style:none; padding:8px 12px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text-dim); cursor:pointer; font-family:var(--font-body); user-select:none; } .pe-menu summary::-webkit-details-marker{display:none;} .pe-menu summary:hover{background:var(--bg-elev-2); color:var(--text);} /* The menu now opens on mouseover, not just a click -- handled in app.js by setting the underlying
    's real `open` property on mouseenter/mouseleave, rather than trying to fake it with a plain CSS :hover override on `display` (a closed
    's content is hidden by the browser in a way that override can't reach). So [open] alone is still the right signal for this "active" summary look -- it's true both when hovered open and when opened by a click/tap on touch. */ .pe-menu[open] > summary{background:var(--ember-dim); color:var(--ember-hot);} .pe-menu-dropdown{ /* margin-top is deliberately 0, not a gap like nav.php's equivalent dropdown uses. app.js closes the menu on mouseleave, which (like :hover) stops holding as soon as the pointer isn't over the .pe-menu element or one of its rendered descendant boxes -- and this dropdown is position:absolute, so it doesn't contribute to its own parent's box size the way normal-flow content would. Moving the mouse straight down from the summary into any gap below it would momentarily leave every one of those boxes and close the menu before the pointer ever reaches it. Flush placement removes that dead zone entirely. */ position:absolute; top:100%; left:0; margin-top:0; min-width:200px; z-index:60; display:flex; flex-direction:column; gap:2px; background:var(--bg-elev-2); border:1px solid var(--border-strong); border-radius:10px; padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.5); } .pe-menu-dropdown button{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; text-align:left; background:none; border:none; border-radius:7px; color:var(--text-dim); font-family:var(--font-body); font-size:13px; padding:8px 10px; cursor:pointer; } .pe-menu-dropdown button:hover{background:var(--bg-elev); color:var(--text);} /* Shortcut hint shown beside a menu item's label, e.g. "Undo Ctrl+Z" -- only present on items that actually have a working keyboard shortcut, so its presence/absence is itself informative. Pushed to the far right of its button via the button's own flex+space-between above. */ .pe-menu-shortcut{ font-family:var(--font-mono, monospace); font-size:11px; color:var(--text-faint); flex-shrink:0; letter-spacing:.02em; } .pe-menu-dropdown button:hover .pe-menu-shortcut{color:var(--text-dim);} /* "Open in app" pill -- pops the editor out into its own chromeless window (see the onclick in the panel markup). Pushed to the far right of the menu bar via margin-left:auto since .pe-menubar is a flex row; sized/shaped as a pill rather than reusing .btn as-is so it reads as distinct from the File/Edit/... menu buttons next to it. */ .pe-open-in-app-btn{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:7px 14px 7px 12px; border-radius:999px; border:none; cursor:pointer; background:linear-gradient(135deg, var(--ember), var(--ember-hot)); color:#160c05; font-family:var(--font-body); font-size:12.5px; font-weight:700; transition:transform .15s ease; } .pe-open-in-app-btn:hover{transform:translateY(-1px);} .pe-open-in-app-btn svg{width:15px; height:15px; flex-shrink:0;} /* A submenu (currently just "Save As") looks like a regular dropdown item, not a bold top-level menu trigger -- these rules share the same specificity as the .pe-menu ones above and rely on coming AFTER them in the file to correctly override, rather than a stronger selector, so this needs to stay below that block if it's ever moved. */ .pe-submenu summary{ padding:8px 10px; font-weight:400; display:flex; align-items:center; justify-content:space-between; gap:10px; } .pe-submenu summary::after{content:'\203a'; color:var(--text-faint); font-size:15px; line-height:1;} .pe-submenu[open] summary{background:var(--bg-elev); color:var(--text);} /* Same flush-placement reasoning as the top-level .pe-menu-dropdown above, just horizontal here: margin-left:0 keeps no dead zone between "Save As..." and its own nested dropdown to its right. */ .pe-submenu-dropdown{top:0; left:100%; margin-top:0; margin-left:0;} /* Workspace: left icon rail + center canvas column + right side panel, a classic three-column editor layout. */ .pe-workspace{ display:flex; align-items:flex-start; gap:14px; border:1px solid var(--border); border-top:none; border-radius:0 0 12px 12px; background:var(--bg-elev); padding:14px; } .pe-toolbar{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:10px; padding:6px; } .pe-fgbg{position:relative; width:34px; height:34px; margin:10px auto 6px;} .pe-fgbg-swatches{position:relative; width:100%; height:100%;} .pe-fgbg-swatches input[type="color"]{ position:absolute; width:22px; height:22px; padding:0; border:2px solid var(--border-strong); border-radius:5px; cursor:pointer; background:none; appearance:none; -webkit-appearance:none; } .pe-fgbg-swatches input[type="color"]::-webkit-color-swatch-wrapper{padding:0;} .pe-fgbg-swatches input[type="color"]::-webkit-color-swatch{border:none; border-radius:3px;} .pe-fgbg-swatches input[type="color"]::-moz-color-swatch{border:none; border-radius:3px;} .pe-fgbg-fg{top:0; left:0; z-index:2;} .pe-fgbg-bg{bottom:0; right:0; z-index:1;} .pe-fgbg-swap, .pe-fgbg-reset{ position:absolute; width:15px; height:15px; padding:2px; border-radius:4px; background:var(--bg-elev); border:1px solid var(--border); color:var(--text-faint); cursor:pointer; display:flex; align-items:center; justify-content:center; } .pe-fgbg-swap{top:-7px; right:-2px; z-index:3;} .pe-fgbg-swap svg{width:11px; height:11px;} .pe-fgbg-reset{bottom:-2px; left:-7px; z-index:0;} .pe-fgbg-reset svg{width:12px; height:12px;} .pe-fgbg-swap:hover, .pe-fgbg-reset:hover{border-color:var(--ember); color:var(--ember-hot);} .pe-tool-btn{ display:flex; flex-direction:column; align-items:center; gap:4px; width:52px; background:transparent; border:1px solid transparent; border-radius:9px; padding:9px 4px; color:var(--text-dim); cursor:pointer; font-family:var(--font-body); font-size:11px; transition:background .15s ease, border-color .15s ease, color .15s ease; } .pe-tool-btn svg{width:18px; height:18px;} .pe-tool-btn span{display:none;} /* icon-only rail; title attr covers the tooltip */ .pe-tool-btn:hover{background:var(--bg-elev); color:var(--text);} .pe-tool-btn.active{background:var(--ember-dim); border-color:var(--ember); color:var(--ember-hot);} .pe-center{flex:1; min-width:0; display:flex; flex-direction:column; position:relative;} .pe-side{ width:300px; flex-shrink:0; max-height:78vh; overflow-y:auto; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:10px; padding:14px; } @media (max-width:900px){ .pe-workspace{flex-direction:column;} .pe-toolbar{flex-direction:row; flex-wrap:wrap; width:100%;} .pe-side{width:100%; max-height:none;} } /* App-mode fill chain: in the "Open in app" popup (includes/tool-page.php's ?app=1 branch, body.app-mode) the page's own
    is already stretched to the full popup height (see that file's inline style block). Here we continue that flex chain down through the editor's own markup so the canvas/side panel actually use the extra room instead of stopping at their normal in-page vh-relative caps (70vh/78vh), which were sized for sitting inside a scrolling page, not filling a purpose-sized window. Only active in app mode -- the normal in-page layout is unaffected. */ body.app-mode[data-tool-slug="photo-editor"] #tool, body.app-mode[data-tool-slug="photo-editor"] #tool .wrap{ display:flex; flex-direction:column; flex:1; min-height:0; } body.app-mode[data-tool-slug="photo-editor"] .pe-root{ margin-top:0; flex:1; min-height:0; display:flex; flex-direction:column; } body.app-mode[data-tool-slug="photo-editor"] .pe-workspace{ flex:1; min-height:0; align-items:stretch; } body.app-mode[data-tool-slug="photo-editor"] .pe-center{ min-height:0; } body.app-mode[data-tool-slug="photo-editor"] .pe-stage{ flex:1; min-height:0; max-height:none; } body.app-mode[data-tool-slug="photo-editor"] .pe-side{ max-height:none; } .pe-tool-options{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:12px; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:12px 14px; } .pe-inline-field{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); white-space:nowrap;} .pe-inline-field select{ background:var(--bg-elev-2); border:1px solid var(--border); border-radius:7px; color:var(--text); padding:6px 8px; font-family:var(--font-body); font-size:13px; } .pe-slider-field select{ background:var(--bg-elev-2); border:1px solid var(--border); border-radius:7px; color:var(--text); padding:6px 8px; font-family:var(--font-body); font-size:13px; } .pe-inline-field input[type="color"]{ width:32px; height:28px; border:1px solid var(--border); border-radius:7px; background:none; cursor:pointer; padding:0; } .pe-inline-field input[type="range"]{width:110px;} .pe-checkbox-field{gap:6px;} .pe-checkbox-field input{width:16px; height:16px; accent-color:var(--ember);} .pe-inline-label{font-size:12.5px; color:var(--text-faint); font-family:var(--font-mono);} .pe-crop-actions{display:flex; gap:10px; margin-left:auto;} /* Recent/saved color palette (Brush, Shape, Eyedropper panels) -- see photo-editor-color-palette.php and refreshColorPalettes() in assets/app.js. A full-width flex row so it wraps onto its own line within the already-wrapping .pe-tool-options bar rather than squeezing into whatever horizontal space the sliders left. */ .pe-color-palette{display:flex; align-items:center; flex-wrap:wrap; gap:8px; width:100%;} .pe-palette-swatches{display:flex; flex-wrap:wrap; gap:5px;} .pe-palette-empty{font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono);} .pe-palette-swatch-wrap{position:relative; display:inline-flex;} .pe-palette-swatch{ width:18px; height:18px; border-radius:5px; border:1px solid var(--border-strong); cursor:pointer; padding:0; } .pe-palette-swatch:hover{border-color:var(--ember-hot); transform:scale(1.12);} .pe-palette-swatch-remove{ position:absolute; top:-6px; right:-6px; width:13px; height:13px; border-radius:50%; background:var(--bg-elev-2); border:1px solid var(--border-strong); color:var(--text-faint); font-size:10px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; } .pe-palette-swatch-remove:hover{border-color:var(--err); color:var(--err);} .pe-palette-save-btn{ width:16px; height:16px; border-radius:4px; border:1px solid var(--border-strong); background:var(--bg-elev-2); color:var(--text-dim); font-size:11px; line-height:1; cursor:pointer; padding:0; margin-left:4px; } .pe-palette-save-btn:hover{border-color:var(--ember-hot); color:var(--ember-hot);} .pe-stage{ margin-top:14px; border:1px solid var(--border); border-radius:14px; background: repeating-conic-gradient(#2a2830 0% 25%, #201e24 0% 50%) 0 0/22px 22px; overflow:auto; max-height:70vh; display:flex; align-items:flex-start; justify-content:center; padding:18px; transition:border-color .15s ease, background .15s ease; } .pe-stage.dragover{border-color:var(--ember); background:var(--ember-dim);} .pe-empty-state{ width:100%; min-height:320px; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; cursor:pointer; } .pe-empty-state svg{width:30px; height:30px; margin-bottom:14px; color:var(--ember-hot);} .pe-empty-state p{font-size:14px; color:var(--text-dim);} .pe-empty-state .dz-strong{color:var(--text); font-weight:600;} .pe-empty-state .dz-hint{margin-top:6px; font-size:12px; color:var(--text-faint); font-family:var(--font-mono);} /* Live frame/border preview wrapper -- see the markup comment in includes/tool-panels/photo-editor.php and syncFramePreview() in app.js. All the actual sizing (padding/background/box-shadow, the two strip elements' height/background) is set inline by JS since it depends on the current frame style, its fields, and zoom; this just establishes the layout (a centered column so the two strips can sit directly above/below the canvas) and sensible transitions so changing a frame field animates instead of snapping. */ /* Deliberately no transition here: this updates live while a color/ width/radius/padding slider is being dragged, so it needs to track the pointer 1:1 every step -- animating each intermediate value would make it visibly lag behind the input instead of tracking it. */ .pe-frame-preview{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; } .pe-frame-preview-strip{ width:100%; box-sizing:border-box; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:"Inter", sans-serif; text-align:center; } .pe-canvas-wrap{position:relative; flex-shrink:0; touch-action:none;} .pe-canvas-wrap canvas{display:block; border-radius:4px; box-shadow:0 10px 40px rgba(0,0,0,.5);} /* Space-bar-drag panning: pe-pan-ready while Space is held (cursor hints that dragging will pan), pe-panning while an actual pan drag is in progress -- see the spacePanning/panActive state in app.js. */ .pe-canvas-wrap.pe-pan-ready, .pe-canvas-wrap.pe-pan-ready canvas{cursor:grab;} .pe-canvas-wrap.pe-panning, .pe-canvas-wrap.pe-panning canvas{cursor:grabbing;} /* Mini navigator/minimap overlay -- see updateNavigator() in app.js. Positioned absolutely within .pe-center (not inside the scrollable #pe-stage) so it stays fixed in the viewport corner instead of scrolling away with the canvas underneath it. */ .pe-navigator{ position:absolute; right:24px; bottom:24px; width:130px; height:130px; border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; background:rgba(20,19,24,.88); box-shadow:0 6px 20px rgba(0,0,0,.45); cursor:pointer; touch-action:none; z-index:3; } .pe-navigator canvas{display:block; width:100%; height:100%;} .pe-navigator-rect{ position:absolute; border:1.5px solid var(--ember-hot); background:rgba(255,90,31,.15); pointer-events:none; box-sizing:border-box; } @media (max-width: 900px){ .pe-navigator{display:none;} } .pe-crop-box{ position:absolute; border:2px dashed var(--ember-hot); background:rgba(255,90,31,.08); cursor:move; box-sizing:border-box; } .pe-crop-handle{ position:absolute; width:16px; height:16px; background:var(--ember-hot); border:2px solid var(--bg); border-radius:50%; transform:translate(-50%,-50%); } .pe-crop-handle[data-handle="nw"]{top:0; left:0; cursor:nwse-resize;} .pe-crop-handle[data-handle="ne"]{top:0; left:100%; cursor:nesw-resize;} .pe-crop-handle[data-handle="sw"]{top:100%; left:0; cursor:nesw-resize;} .pe-crop-handle[data-handle="se"]{top:100%; left:100%; cursor:nwse-resize;} /* Guide lines: screen-only alignment aids, same "never baked into the export" spirit as the grid overlay -- rendered as plain DOM (not drawn on the canvas), so they can never end up in a downloaded photo. Each is a full-width/height strip with a thin cyan line centered in it -- the strip is the actual drag/click target, wider than the visible line itself so it's easy to grab. */ .pe-guides-layer{position:absolute; inset:0; pointer-events:none;} .pe-guide{position:absolute; pointer-events:auto;} .pe-guide-h{left:0; right:0; height:9px; margin-top:-4px; cursor:ns-resize;} .pe-guide-v{top:0; bottom:0; width:9px; margin-left:-4px; cursor:ew-resize;} .pe-guide-h::after{content:""; position:absolute; left:0; right:0; top:4px; height:1px; background:#4fd8e8; box-shadow:0 0 0 1px rgba(0,0,0,.35);} .pe-guide-v::after{content:""; position:absolute; top:0; bottom:0; left:4px; width:1px; background:#4fd8e8; box-shadow:0 0 0 1px rgba(0,0,0,.35);} .pe-size-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:14px; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:8px 12px; } .pe-size-info{font-size:12.5px; color:var(--text-faint);} .pe-size-info strong{color:var(--text); font-family:var(--font-mono); font-weight:600;} .pe-size-divider{color:var(--text-faint);} .pe-size-field input[type="number"]{ width:72px; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:7px; color:var(--text); padding:6px 8px; font-family:var(--font-mono); font-size:13px; } .pe-size-field input[type="number"]:focus{border-color:var(--ember);} .pe-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:10px; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:8px 12px; } /* flex-shrink:0 so a group that doesn't fit on the current row wraps whole onto the next one (the .pe-bar flex-wrap above already supports this) instead of every button inside it individually compressing below its own text width -- which is what was happening to the guide buttons' labels before this was added. */ .pe-bar-group{display:flex; align-items:center; gap:6px; flex-shrink:0;} .pe-icon-btn{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--border); background:var(--bg-elev-2); color:var(--text-dim); cursor:pointer; font-size:16px; font-weight:600; } .pe-icon-btn svg{width:16px; height:16px;} .pe-icon-btn:hover{border-color:var(--ember); color:var(--ember-hot);} .pe-icon-btn.active{background:var(--ember-dim); border-color:var(--ember); color:var(--ember-hot);} .pe-icon-btn:disabled{opacity:.35; cursor:not-allowed;} .pe-icon-btn-text{width:auto; padding:0 12px; font-size:12.5px; font-family:var(--font-mono); white-space:nowrap;} .pe-icon-btn-danger:hover{border-color:var(--err); color:var(--err);} .pe-zoom-label{font-size:12.5px; color:var(--text-faint); min-width:42px; text-align:center;} .pe-panel-tabs{display:flex; gap:8px; margin-top:0; border-bottom:1px solid var(--border);} .pe-panel-tab{ background:none; border:none; color:var(--text-faint); font-family:var(--font-body); font-weight:600; font-size:13.5px; padding:10px 4px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; } .pe-panel-tab.active{color:var(--ember-hot); border-color:var(--ember);} .pe-panel{padding-top:16px;} /* Document tabs -- browser-tab-style, one per open photo. Hidden by default (see the panel markup) so the editor looks unchanged for the common single-photo case, and only appears once a second photo is opened. */ .pe-doctabs{display:flex; align-items:center; gap:2px; padding:10px 20px 0; overflow-x:auto; border-bottom:1px solid var(--border);} .pe-doctab{ display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-radius:8px 8px 0 0; background:var(--bg-elev); border:1px solid var(--border); border-bottom:none; color:var(--text-dim); font-family:var(--font-body); font-size:13px; cursor:pointer; white-space:nowrap; flex-shrink:0; max-width:180px; } .pe-doctab.active{background:var(--bg); color:var(--text); border-color:var(--border-strong);} .pe-doctab-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .pe-doctab-close{ flex-shrink:0; width:18px; height:18px; border-radius:5px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); background:none; border:none; cursor:pointer; font-size:14px; line-height:1; } .pe-doctab-close:hover{background:var(--bg-elev-2); color:var(--text);} .pe-doctab-add{ flex-shrink:0; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); background:none; border:1px dashed var(--border-strong); cursor:pointer; margin-left:6px; font-size:16px; } .pe-doctab-add:hover{color:var(--ember-hot); border-color:var(--ember);} .pe-preset-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;} .pe-preset-btn{ background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; color:var(--text-dim); font-family:var(--font-body); font-size:12.5px; padding:8px 13px; cursor:pointer; } .pe-preset-btn:hover{border-color:var(--border-strong); color:var(--text);} .pe-preset-btn.active{border-color:var(--ember); color:var(--ember-hot); background:var(--ember-dim);} .pe-sliders{display:flex; flex-wrap:wrap; gap:16px 22px;} .pe-slider-field{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-dim);} .pe-slider-field input[type="range"]{width:130px; accent-color:var(--ember);} .pe-slider-field .mono{min-width:40px; color:var(--text-faint); font-size:12px;} .pe-histogram-canvas{ display:block; width:100%; height:70px; background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; margin-bottom:16px; } .pe-curve-canvas{ display:block; width:100%; max-width:256px; height:180px; background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; cursor:crosshair; touch-action:none; } /* History panel: a plain clickable list, most-recent state at the bottom (append order), matching the order edits actually happened in -- same top-to-bottom-is-oldest-to-newest convention as the Layers panel's bottom-to-top-is-back-to-front doesn't try to match, since these are unrelated orderings with no reason to agree. */ .pe-history-list{list-style:none; display:flex; flex-direction:column; gap:4px; max-height:360px; overflow-y:auto;} .pe-history-item{ padding:8px 11px; border-radius:8px; border:1px solid transparent; cursor:pointer; font-size:13px; color:var(--text-dim); background:var(--bg-elev); } .pe-history-item:hover{border-color:var(--border-strong);} .pe-history-item.active{border-color:var(--ember); background:var(--ember-dim); color:var(--text); font-weight:600;} .pe-layers-hint{font-size:12px; color:var(--text-faint); margin-bottom:10px;} /* Only shown once 2+ layers are checked -- see refreshLayersList's checkedIds handling -- rather than a permanently-visible button that's disabled/no-op most of the time. */ .pe-layers-toolbar{margin-bottom:10px;} .pe-layers-list{list-style:none; display:flex; flex-direction:column; gap:6px;} .pe-layer-row{ display:flex; align-items:center; gap:8px; background:var(--bg-elev); border:1px solid var(--border); border-radius:9px; padding:9px 11px; cursor:pointer; font-size:13px; color:var(--text-dim); } .pe-layer-row:hover{border-color:var(--border-strong);} .pe-layer-row.selected{border-color:var(--ember); background:var(--ember-dim); color:var(--text);} .pe-layer-row svg{width:15px; height:15px; flex-shrink:0; color:var(--text-faint);} .pe-layer-name{flex-grow:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .pe-layer-row .f-actions{display:flex; gap:4px;} .pe-layer-check{flex-shrink:0; accent-color:var(--ember); cursor:pointer;} /* Shared look for the small eye/lock/caret toggle buttons prepended to every row -- same footprint as the up/down/delete f-actions buttons so the row stays visually consistent whichever ones are present. */ .pe-layer-icon-btn{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border-radius:6px; border:1px solid transparent; background:none; color:var(--text-faint); cursor:pointer; } .pe-layer-icon-btn:hover{border-color:var(--border-strong); color:var(--text);} .pe-layer-icon-btn svg{width:14px; height:14px; margin:0;} .pe-layer-icon-btn.active{color:var(--ember-hot);} /* Hidden/locked layers stay in the list (never removed) but read as visually de-emphasized so their state is obvious at a glance without needing to check each icon individually. */ .pe-layer-row.pe-layer-hidden{opacity:.5;} .pe-layer-row.pe-layer-locked .pe-layer-name{color:var(--text-faint);} .pe-layer-name-input{ flex-grow:1; min-width:0; background:var(--bg-elev-2); border:1px solid var(--ember); border-radius:5px; padding:2px 6px; font-size:13px; font-family:inherit; color:var(--text); } /* Group folder row reads slightly bolder/brighter than a plain layer row so it's immediately clear it's a container, not a leaf layer; its children render as normal .pe-layer-row items directly below it with extra left padding for the nested indent. */ .pe-layer-group-row{font-weight:600; color:var(--text);} .pe-layer-group-row svg{color:var(--ember-hot);} .pe-layer-row-nested{padding-left:30px;} .pe-layer-caret{transition:transform .15s ease;} .pe-layer-caret.collapsed{transform:rotate(-90deg);} .pe-selected-panel{ margin-top:16px; background:var(--bg-elev); border:1px solid var(--ember); border-radius:12px; padding:14px 16px; } .pe-selected-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;} .pe-selected-head span{font-size:13px; font-weight:600; color:var(--text);} .pe-selected-actions{display:flex; gap:6px;} .pe-sel-fields{margin-top:12px;} .pe-textarea{ width:100%; background:var(--bg); border:1px solid var(--border); border-radius:9px; color:var(--text); padding:10px 12px; font-family:var(--font-body); font-size:14px; resize:vertical; margin-bottom:12px; } .pe-textarea:focus{border-color:var(--ember); outline:none;} .pe-export-row{margin-top:20px;} @media (max-width:640px){ .pe-stage{padding:10px; max-height:60vh;} .pe-sliders{gap:12px 16px;} .pe-slider-field input[type="range"]{width:100px;} } /* ================= FEATURED TOOLS SPOTLIGHT (featured-tools.php) ================= */ /* One reusable two-column layout, reused five times: a fake app-window illustration on the left, marketing copy on the right. .eyebrow, .btn, .btn-primary, .btn-ghost are all reused as-is from elsewhere in this file rather than redefined here. NOTE: named .ft-spotlight / .ft-spotlight-grid (not .spotlight / .spotlight-grid) on purpose -- those names are already taken by the Qira/Collage Maker sections on index.php, which use a different padding rhythm (44px, no border) and different column proportions. They used to collide here (same class, second definition silently winning by source order for .spotlight-grid, and leaking an unwanted border-bottom into index.php's sections for .spotlight) until this was namespaced. This page still reuses the *inner* shared classes on purpose -- .spotlight-preview, .spotlight-copy, .spotlight-actions, .spotlight-features -- only the two outer wrapper classes needed their own name. */ .ft-spotlight{padding:72px 0; border-bottom:1px solid var(--border);} .ft-spotlight:last-of-type{border-bottom:none;} .ft-spotlight-grid{ display:grid; grid-template-columns:minmax(280px, 460px) 1fr; gap:56px; align-items:center; } @media (max-width:900px){ .ft-spotlight-grid{grid-template-columns:1fr; gap:36px;} } /* ---- the fake app window ---- */ .mock-window{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45); } .mock-titlebar{ display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--border); } .mock-dot{width:9px; height:9px; border-radius:50%; background:var(--border-strong);} .mock-dot-active{background:var(--ember);} .mock-body{display:flex; min-height:340px;} .mock-sidebar{ display:flex; flex-direction:column; gap:8px; padding:12px 9px; border-right:1px solid var(--border); flex-shrink:0; } .mock-tool-btn{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--bg); color:var(--text-faint); } .mock-tool-btn svg{width:16px; height:16px;} .mock-tool-btn.active{border-color:var(--ember); background:var(--ember-dim); color:var(--ember-hot);} .mock-canvas{flex:1; padding:18px; position:relative; display:flex; flex-direction:column; gap:14px;} /* ---- photo-editor mock: image area with crop handles + floating adjust panel ---- */ .mock-photo{ position:relative; border-radius:10px; overflow:hidden; flex:1; background:linear-gradient(135deg, #ff8a3d 0%, #d3452f 55%, #7d1f3a 100%); } .mock-photo-sun{position:absolute; top:22px; right:26px; width:34px; height:34px; border-radius:50%; background:var(--ember-hot); opacity:.92;} .mock-photo-mtn{position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.38) 100%); clip-path:polygon(0% 100%, 18% 30%, 34% 62%, 52% 18%, 70% 58%, 100% 40%, 100% 100%); } .mock-crop-box{ position:absolute; top:16%; left:12%; width:56%; height:52%; border:2px dashed var(--ember-hot); border-radius:2px; } .mock-crop-handle{position:absolute; width:9px; height:9px; border-radius:50%; background:var(--ember-hot); border:2px solid #1c0f06;} .mock-crop-handle.tl{top:-5px; left:-5px;} .mock-crop-handle.tr{top:-5px; right:-5px;} .mock-crop-handle.bl{bottom:-5px; left:-5px;} .mock-crop-handle.br{bottom:-5px; right:-5px;} .mock-adjust-panel{ position:absolute; right:10px; bottom:10px; width:44%; background:rgba(21,19,24,.94); border:1px solid var(--border-strong); border-radius:9px; padding:10px 12px; backdrop-filter:blur(2px); } .mock-adjust-title{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:9px;} .mock-slider-track{position:relative; height:2px; background:var(--border-strong); border-radius:2px; margin-bottom:11px;} .mock-slider-track:last-child{margin-bottom:0;} .mock-slider-dot{position:absolute; top:50%; width:9px; height:9px; border-radius:50%; background:var(--ember-hot); transform:translate(-50%,-50%);} .mock-text-row{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:9px;} .mock-text-aa{font-family:Georgia,serif; font-style:italic; font-size:17px; color:var(--text-dim); flex-shrink:0;} .mock-text-bars{display:flex; flex-direction:column; gap:6px; flex:1;} .mock-text-bar{height:5px; border-radius:3px; background:var(--border-strong);} /* ---- Qira home-spotlight demo: the photo-editor mock above, but wired up live (assets/app.js, the "QIRA HOME SPOTLIGHT" block) -- the crop handles and adjust sliders actually drag, the sidebar buttons actually switch mode, and the adjust sliders actually change the mock photo's CSS filter in real time. Everything here is index.php-only (gated in JS on #qira-mock existing) and layered on top of the shared .mock-* rules above, which every other page's inert copy of this markup keeps using unmodified. Structural (mode show/hide, cursor affordances, button reset) lives here, unconditionally, so a reduced-motion visitor still sees the right end state -- only the hover/drag *transitions* and the ambient idle animation are gated behind prefers-reduced-motion further down. */ .qira-mock .mock-tool-btn{font:inherit; cursor:pointer; appearance:none;} .qira-mock .mock-slider-dot{cursor:grab;} .qira-mock .mock-slider-dot.is-dragging{cursor:grabbing;} .qira-mock .mock-crop-handle{cursor:nwse-resize;} .qira-mock .mock-crop-handle.tr, .qira-mock .mock-crop-handle.bl{cursor:nesw-resize;} /* The crop box's bottom-right corner sits right where the adjust panel overlaps it (both are position:absolute inside .mock-photo) -- without an explicit stacking order the panel, being later in the DOM, wins and the "br" handle becomes ungrabbable underneath it. Handles need to win over both the box's own dashed outline and the panel. */ .qira-mock .mock-crop-box{z-index:2;} .qira-mock .mock-crop-handle{z-index:3;} .qira-mock .mock-adjust-panel{z-index:1;} .qira-mock #qira-photo{filter:var(--qira-photo-filter, none);} /* tool-mode variants, toggled by app.js setting data-qira-mode on .qira-mock */ .qira-mock[data-qira-mode="shape"] .mock-crop-box{border-style:solid; border-radius:8px;} .qira-mock[data-qira-mode="shape"] .mock-crop-box .mock-crop-handle{display:none;} .qira-mock[data-qira-mode="shape"] .mock-adjust-panel{opacity:0; pointer-events:none;} .qira-mock[data-qira-mode="move"] .mock-crop-box{opacity:0; pointer-events:none;} .qira-mock[data-qira-mode="move"] .mock-adjust-panel{opacity:0; pointer-events:none;} .qira-mock[data-qira-mode="move"] #qira-photo{cursor:grab;} .qira-mock[data-qira-mode="text"] #qira-text-row{border-color:var(--ember); box-shadow:0 0 0 1px var(--ember), 0 0 20px rgba(255,90,31,.25);} /* ---- collage-maker mock: 2x2 grid + preset pills ---- */ .mock-collage-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; flex:1; } .mock-collage-cell{border-radius:8px; position:relative; overflow:hidden;} .mock-collage-cell.c1{background:linear-gradient(135deg, #ffb347, #ff8a3d);} .mock-collage-cell.c2{background:linear-gradient(135deg, #e14b4b, #7d1f3a);} .mock-collage-cell.c3{background:linear-gradient(135deg, #6b2545, #3a1730);} .mock-collage-cell.c4{background:linear-gradient(135deg, #ffcf6b, #ff8a3d);} .mock-collage-cell.c1::after{content:''; position:absolute; top:10px; right:12px; width:16px; height:16px; border-radius:50%; background:var(--ember-hot); opacity:.9;} .mock-collage-cell.c3::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:60%; background:rgba(0,0,0,.34); clip-path:polygon(0% 100%, 20% 35%, 40% 68%, 58% 20%, 100% 55%, 100% 100%); } .mock-pill-row{display:flex; gap:8px; flex-wrap:wrap;} .mock-pill{ padding:6px 13px; border-radius:999px; border:1px solid var(--border); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); } .mock-pill.active{border-color:var(--ember); color:var(--ember-hot); background:var(--ember-dim);} /* ---- Collage Maker home-spotlight demo: the mock above, wired up live (assets/app.js, the "COLLAGE HOME SPOTLIGHT" block) -- the three sidebar layout buttons actually reflow the grid (and auto-cycle on their own), and clicking any cell shuffles which photo sits where (a stand-in for the real tool's reorder). The size/format pills below the grid stay plain, static s -- same markup as every other page's inert copy of this mock, not a click target here. index.php- only, same unconditional-structure / motion-gated-flourish split as the Qira demo above. .mock-tool-btn is a