/* WeConvertFiles motion layer Pure CSS, ~1KB, animates only transform/opacity (compositor-only = no layout cost). Progressive enhancement: reveal elements only start hidden once motion.js has confirmed IntersectionObserver support AND that reduced-motion is not requested, by adding .wcf-anim to . If anything is off, content stays fully visible. */ /* --- Scroll reveal (below-the-fold sections fade + rise into view) --- */ html.wcf-anim .reveal{ opacity:0; transform:translateY(16px); will-change:opacity, transform; transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } html.wcf-anim .reveal.in{opacity:1;transform:none;} html.wcf-anim .reveal.d1{transition-delay:.07s;} html.wcf-anim .reveal.d2{transition-delay:.14s;} /* --- Upload zone: a little lift on hover (transform is free) --- */ #dropZone{transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;} #dropZone:hover{transform:translateY(-2px);} #dropZone.wcf-dragover{border-color:#1a73e8;background:#f5f9ff;transform:scale(1.01);box-shadow:0 14px 34px -18px rgba(26,115,232,.55);} /* --- Universal press micro-interaction on buttons --- */ button:active:not(:disabled){transform:scale(.97);} /* --- Clearer keyboard focus (accessibility + polish) --- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2.5px solid #1a73e8; outline-offset:2px; border-radius:8px; } /* --- Respect users who ask for less motion: neutralize everything above --- */ @media (prefers-reduced-motion: reduce){ html.wcf-anim .reveal{opacity:1 !important;transform:none !important;transition:none !important;} #dropZone:hover, #dropZone.wcf-dragover, button:active:not(:disabled){transform:none !important;} } /* --- Extra polish (all compositor-only / zero-layout) --- */ /* Brand-coloured text selection */ ::selection{background:rgba(26,115,232,.92);color:#fff;} /* No global scroll-behavior: normal navigation, history restoration and hash jumps stay instantaneous. The few intentional in-page scrolls request smooth explicitly in JS (and fall back to instant under prefers-reduced-motion). */ /* Guide category accordions: gently reveal contents on open */ details.wcf-acc[open] > div{animation:wcf-acc-in .24s cubic-bezier(.22,.61,.36,1);} @keyframes wcf-acc-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}} /* --- Colourful guide categories: one accent colour per tab --- Hardcoded here (not Tailwind classes) so nothing can be purged away. */ .wcf-acc{--c:#2563eb;} /* Create & Convert to PDF */ .wcf-acc[data-cat="1"]{--c:#7c3aed;} /* Edit & Manage PDF */ .wcf-acc[data-cat="2"]{--c:#0d9488;} /* Convert PDF to formats */ .wcf-acc[data-cat="3"]{--c:#ea580c;} /* Image Conversion */ .wcf-acc[data-cat="4"]{--c:#db2777;} /* Data & Document */ .wcf-acc[data-cat="5"]{--c:#0891b2;} /* Text & Developer */ /* Colored left accent bar + count badge + chevron */ .wcf-acc{border-left-width:4px !important; border-left-color:var(--c) !important;} .wcf-acc summary .wcf-badge{background:color-mix(in srgb, var(--c) 16%, transparent) !important; color:var(--c) !important;} .wcf-acc summary svg{color:var(--c); opacity:.75;} .wcf-acc[open] > summary{color:var(--c); background:color-mix(in srgb, var(--c) 8%, transparent);} .wcf-acc:hover{border-color:color-mix(in srgb, var(--c) 35%, transparent);} /* Two-per-row desktop grid: keep collapsed tabs their natural height, and let an OPEN tab span the full width so its guides spread horizontally (less vertical space, no blank half-tab beside it). dense backfills the freed grid cell. */ [data-guide-view="desktop"]{align-items:start;grid-auto-flow:row dense;} [data-guide-view="desktop"] .wcf-acc[open]{grid-column:1 / -1;} /* Guide links flow into as many columns as the tab width allows (2 when a tab is half-width, ~5-6 when it is open full-width). */ .wcf-acc > div{grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)) !important;} /* Guide links inside a category: faint category-coloured border at rest, and a stronger border + tint + gentle lift on hover (uses the tab's own --c). */ .wcf-acc .wcf-guide-link{ border-color:color-mix(in srgb, var(--c) 22%, transparent) !important; transition:border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease; } .wcf-acc .wcf-guide-link:hover{ border-color:var(--c) !important; background:color-mix(in srgb, var(--c) 10%, transparent) !important; transform:translateY(-1px); box-shadow:0 6px 16px -12px color-mix(in srgb, var(--c) 70%, transparent); } @media (prefers-reduced-motion: reduce){ .wcf-acc .wcf-guide-link:hover{transform:none;} } /* Dark mode: lighten the accent so text stays legible on dark grounds. Scoped to the site's .dark class (set by the theme toggle / init script) rather than the OS colour-scheme, so the chosen site theme always wins — matching every Tailwind dark: utility. */ .dark .wcf-acc summary .wcf-badge{color:color-mix(in srgb, var(--c) 62%, white) !important; background:color-mix(in srgb, var(--c) 26%, transparent) !important;} .dark .wcf-acc[open] > summary{color:color-mix(in srgb, var(--c) 60%, white);} @media (prefers-reduced-motion: reduce){ details.wcf-acc[open] > div{animation:none !important;} }