/* DocuClean brand.css — shared design tokens + components, linked from every page. */ /* Cross-document view transitions: this is a traditional multi-page site (real links, full navigations), so by default the browser hard-cuts through a blank white frame between pages — the header disappears and reappears, reading as "the header is jumping". Chrome/Edge 126+ support crossfading full navigations instead when this is declared; unsupported browsers just ignore it and keep the old (still correct, just abrupt) behavior. Zero-risk progressive enhancement, no HTML/JS changes needed since navigation already uses real links. */ @view-transition { navigation: auto; } :root { /* Brand anchor — forest green + cream, from the "DocuClean Home Redesign" mockup (Claude Design project d738e15f-7f0d-44db-9f69-3e3b4842008e). This DOES touch manifest.json theme_color, meta theme-color tags (all pages), and the Razorpay checkout color — all updated to match, see those files. */ --brand-50: #EDF3EE; --brand-100: #DCE8DE; --brand-200: #B9D1BD; --brand-300: #8FB697; --brand-400: #6B9974; --brand-500: #4B7A54; --brand-600: #3A6642; --brand-700: #2A4F32; --brand-800: #1F3D2B; --brand-900: #14291D; --accent-500: #4B7A54; --accent-600: #2A4F32; /* Per-tool accent pairs — kept distinct for tool color-coding, shifted into the green/tan family so they read as one cohesive palette rather than a rainbow against the cream background. */ --tool-watermark-from: #4B7A54; --tool-watermark-to: #1F3D2B; --tool-merge-from: #6B9974; --tool-merge-to: #3A6642; --tool-split-from: #8FB697; --tool-split-to: #4B7A54; --tool-compress-from: #3A6642; --tool-compress-to: #14291D; --tool-rotate-from: #7C9A7F; --tool-rotate-to: #4B7A54; --tool-organize-from: #A08858; --tool-organize-to: #7A6A44; --tool-pdf2jpg-from: #B08968; --tool-pdf2jpg-to: #8B6A4F; --tool-addwatermark-from: #2A4F32; --tool-addwatermark-to: #14291D; --tool-pagenumbers-from: #6B9974; --tool-pagenumbers-to: #2A4F32; /* Text/neutral scale — warm tan/cream neutrals instead of cool slate, matching the mockup's #14171A / #4A4A42 / #7A7566 / #C9BFA8 / #E3DCCE / #F5F1EA. */ --ink-900: #14171A; --ink-800: #24261F; --ink-700: #3A3D35; --ink-600: #4A4A42; --ink-500: #63605A; --ink-400: #7A7566; --ink-300: #C9BFA8; --ink-200: #E3DCCE; --ink-100: #EFEAE0; --ink-50: #F9F6EF; --page-bg: #FFFFFF; --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.125rem; --radius-full: 9999px; --tracking-tight: -0.02em; --shadow-card: 0 1px 2px rgba(20, 23, 26, 0.05), 0 1px 3px rgba(20, 23, 26, 0.07); --shadow-elevated: 0 8px 24px rgba(20, 23, 26, 0.10), 0 2px 8px rgba(20, 23, 26, 0.05); --shadow-brand-glow: 0 8px 24px rgba(75, 122, 84, 0.22); --shadow-brand-glow-lg: 0 14px 32px rgba(75, 122, 84, 0.32); } body { font-family: 'Inter', sans-serif; background-color: var(--page-bg); /* Google's AdSense script (adsbygoogle.js) intermittently sets body.style.display = "none" directly - some internal ad-measurement/ reflow step that doesn't always get reversed - which blanks the entire page with no console error to explain it. Confirmed by bisection: reproduces with only the AdSense script tag present (no other scripts needed), roughly every other load, on both mobile and desktop, on this site's real domain and on localhost. Nothing in this codebase sets this. !important here beats that inline style (which carries no !important of its own) and keeps the real flex layout (Tailwind's `flex flex-col` utility classes on ) in force no matter what AdSense does. */ display: flex !important; } /* NOTE: deliberately no `overflow-x: hidden` on html/body here — it papers over horizontal-overflow symptoms but also implicitly turns overflow-y into 'auto' on that ancestor (per spec, when one axis is non-visible the other becomes auto), which breaks position:sticky for #toolTabs further down the tree. The min-width:0 fix below is the real fix for the overflow and doesn't have that side effect. */ /* #mainScrollArea is a flex-1 item in the header row's flex container. Flex items default to min-width:auto, so a fixed-width child (an AdSense slot sizing itself in px before it knows the real available width, in particular) can force this whole column wider than the viewport instead of shrinking to fit — the classic flexbox min-width trap. */ #mainScrollArea { min-width: 0; } /* Third-party embeds (AdSense slots especially) sometimes size themselves to the viewport instead of their padded container and force page-wide horizontal scroll on phones. Hard-cap them so that can't happen. */ iframe, ins.adsbygoogle, img, video { max-width: 100%; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--ink-100); } ::-webkit-scrollbar-thumb { background: var(--ink-400); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-500); } * { scrollbar-width: thin; scrollbar-color: var(--ink-400) var(--ink-100); } /* Consistent keyboard-focus ring in brand color, mouse clicks stay clean */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; } /* Touch-friendly targets on mobile */ @media (max-width: 640px) { button, input[type="file"], .feature-card { min-height: 44px; } /* header-auth.js removes the Tailwind "hidden" class on these to show/hide them by auth state, which also strips their "hidden below sm" intent — leaving them visible as inline/block on phones and overflowing the header next to the hamburger button. Force them off below sm regardless of what JS does to their class list. */ #signInBtn, #navUpgradeBtn { display: none !important; } } @media (max-height: 700px) { #heroSection h2 { font-size: 1.5rem; } #dropzone { padding: 1rem; } } /* Range sliders (header/footer margin trim) */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: linear-gradient(to right, var(--brand-500) 0%, var(--brand-500) 0%, var(--ink-200) 0%, var(--ink-200) 100%); border-radius: 5px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--brand-600); cursor: pointer; border: 3px solid white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } input[type="range"]::-moz-range-thumb { height: 18px; width: 18px; border-radius: 50%; background: var(--brand-600); cursor: pointer; border: 3px solid white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Shared components */ .dc-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink-100); box-shadow: 0 1px 2px rgba(20, 23, 26, 0.03), 0 6px 20px -12px rgba(20, 23, 26, 0.12); } .dc-logo-badge { background: var(--brand-600); box-shadow: var(--shadow-brand-glow); } .dc-logo-text { color: var(--ink-900); } .dc-nav-link { position: relative; color: var(--ink-600); font-weight: 500; font-size: 0.9375rem; padding-bottom: 4px; transition: color 0.15s ease; } .dc-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--brand-600); transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } .dc-nav-link:hover { color: var(--brand-600); } .dc-nav-link:hover::after { transform: scaleX(0.6); } .dc-nav-link.active { color: var(--brand-600); font-weight: 600; } .dc-nav-link.active::after { transform: scaleX(1); } .dc-footer-links a { color: var(--brand-200); transition: color 0.15s ease; } .dc-footer-links a:hover { color: #ffffff; } /* Footer band — dark, branded surface consistent across every page (unlike the plain white bg-white footer this replaced, which had zero visual separation from the page body once the page background became white). */ .dc-footer { background: var(--brand-900); } .dc-footer * { border-color: var(--brand-800); } .dc-gradient-text { background: linear-gradient(135deg, var(--brand-600) 0%, var(--accent-600) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .dc-heading-tight { letter-spacing: var(--tracking-tight); } /* Kept the class name (avoids touching every page that references it) even though it no longer sets a serif font - the mixed serif+sans-italic look read as inconsistent rather than intentional, so both this and .dc-emphasis below now stay on the site's one font (Inter) and lean on weight/color for emphasis instead of switching typeface. */ .dc-serif-heading { /* Tailwind's text-5xl/6xl utilities bundle their own line-height:1, which ties in specificity with a leading-[] utility and wins on source order. !important here is a deliberate, narrow override of that default so the heading gets real breathing room instead of looking cramped. */ line-height: 1.2 !important; } .dc-emphasis { font-weight: 700; color: var(--brand-600); } .dc-card { background: #ffffff; border: 1px solid var(--ink-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .dc-card--interactive:hover { box-shadow: var(--shadow-elevated); transform: translateY(-3px); } .dc-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight: 600; color: #ffffff; background: var(--brand-600); box-shadow: var(--shadow-brand-glow); border: none; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .dc-btn-primary:hover { background: var(--brand-700); box-shadow: var(--shadow-brand-glow-lg); transform: translateY(-1px); } .dc-btn-primary:active { transform: translateY(0); } .dc-badge-trust { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--radius-full); background: var(--brand-50); color: var(--brand-700); font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--brand-100); } /* Feature cards */ .feature-card { transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } /* Upload dropzone */ .dropzone-card { transition: all 0.3s ease; box-shadow: var(--shadow-card); } .dropzone-card:hover { box-shadow: var(--shadow-brand-glow); border-color: var(--brand-500); } /* Hero layout — three independent grid areas (tools / hero / rest) so each piece can reflow on its own per breakpoint. This replaced a flex order-1/order-2 split between just two siblings (tools, everything-else) that looked right on desktop but on mobile dumped the ENTIRE page — hero, panels, how-it-works, FAQ, all of it — before the tool list, since "everything else" was one giant flex item that had to render in full before the other one could start. Naming the hero its own area fixes that: mobile order is hero, tools, rest; desktop puts tools in a sidebar beside hero+rest. */ .dc-hero-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "hero" "tools" "rest"; gap: 1.5rem; } .dc-hero-grid-tools { grid-area: tools; } .dc-hero-grid-hero { grid-area: hero; } .dc-hero-grid-rest { grid-area: rest; min-width: 0; } @media (min-width: 1024px) { .dc-hero-grid { grid-template-columns: 16rem 1fr; grid-template-areas: "tools hero" "tools rest"; gap: 2rem; align-items: start; } .dc-hero-grid-tools { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; } } /* Tool selector — sticky vertical sidebar on desktop (lg+), so switching tools never requires scrolling; compact wrapped pills on mobile/tablet where a fixed sidebar isn't practical. Same .tool-tab/data-tool/.active contract as before, only the layout and row markup changed. */ #toolTabs .tool-tab { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: #ffffff; border: 1px solid var(--ink-200); cursor: pointer; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } #toolTabs .tool-tab:hover { border-color: var(--brand-400); box-shadow: var(--shadow-card); } #toolTabs .tool-tab-icon { display: none; } #toolTabs .tool-tab-index { flex-shrink: 0; width: 1.375rem; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-400); } #toolTabs .tool-tab-text { display: flex; flex-direction: column; min-width: 0; } #toolTabs .tool-tab-label { display: block; font-size: 0.875rem; font-weight: 700; color: var(--ink-900); line-height: 1.3; } #toolTabs .tool-tab-desc { display: none; font-size: 0.75rem; color: var(--ink-500); line-height: 1.3; } #toolTabs .tool-tab.active { background: var(--brand-600); border-color: var(--brand-600); box-shadow: var(--shadow-brand-glow); } #toolTabs .tool-tab.active .tool-tab-index { color: var(--page-bg); } #toolTabs .tool-tab.active .tool-tab-label { color: var(--page-bg); } #toolTabs .tool-tab.active .tool-tab-desc { color: color-mix(in srgb, var(--page-bg) 70%, transparent); } #toolTabs .tool-tab { width: 100%; } @media (min-width: 1024px) { #toolTabs .tool-tab-desc { display: block; } } .tool-category-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 0.375rem; padding-left: 0.125rem; } /* Generic choice buttons (Rotate angle, PDF-to-JPG quality, Page Numbers position) */ .choice-btn { display: flex; flex-direction: column; align-items: center; padding: 0.75rem; border-radius: var(--radius-md); background: var(--ink-50); border: 2px solid var(--ink-200); cursor: pointer; transition: all 0.2s ease; } .choice-btn:hover { background: var(--brand-50); border-color: var(--brand-300); } .choice-btn.active { background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%); border-color: var(--brand-500); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); } /* Compress quality buttons */ .compress-quality { display: flex; flex-direction: column; align-items: center; padding: 1rem; border-radius: var(--radius-md); background: var(--ink-50); border: 2px solid var(--ink-200); cursor: pointer; transition: all 0.2s ease; } .compress-quality:hover { background: #d1fae5; border-color: #34d399; } .compress-quality.active { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border-color: #10b981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } /* Merge file list item (markup generated by app.js) */ .merge-file-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--ink-100); border-radius: var(--radius-md); transition: all 0.2s ease; } .merge-file-item:hover { background: var(--ink-200); } .merge-file-item .file-icon { width: 2rem; height: 2rem; background: linear-gradient(135deg, var(--tool-merge-from) 0%, var(--tool-merge-to) 100%); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .merge-file-item .file-info { flex: 1; min-width: 0; } .merge-file-item .file-name { font-weight: 600; color: var(--ink-800); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .merge-file-item .file-size { font-size: 0.75rem; color: var(--ink-500); } .merge-file-item .remove-btn { padding: 0.25rem; color: var(--ink-400); cursor: pointer; transition: color 0.2s; } .merge-file-item .remove-btn:hover { color: #ef4444; }