/* Free Online Tools for Images and PDFs — shared styles */ /* Golden Wattle Modern: --brand is the Deep Eucalyptus Teal (#004D40), matching the Southern Cross mark; --accent is the vibrant wattle gold (#FFD700), reserved for badges, gradients and text on dark backgrounds (it fails contrast as body text on the light --bg, so it's never used for that here). */ :root { --bg: #f9f9f7; --bg-alt: #f4f4f2; --text: #1c1b1b; --text-muted: #5a6b64; --border: #dde5e2; --brand: #004D40; --brand-dark: #00332B; --brand-contrast: #ffffff; --accent: #FFD700; --success: #16a34a; --danger: #ba1a1a; --card-shadow: 0 1px 2px rgba(0, 77, 64, 0.05), 0 8px 24px rgba(0, 77, 64, 0.08); --radius: 10px; --max-width: 1080px; --font-heading: "Roboto Condensed", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --footer-gradient: linear-gradient(90deg, #FFD700 0%, #004D40 100%); } /* Dark mode: opt-in only, via the toggle in the header (adds data-theme="dark" to and remembers the choice in localStorage). The site does not follow the OS/browser preference automatically. */ :root[data-theme="dark"] { --bg: #1B1C1C; --bg-alt: #262727; --text: #f2f2f2; --text-muted: #b9bdbc; --border: #3a3b3b; --brand: #4ECDC4; --brand-dark: #7EE8DA; --brand-contrast: #052e26; --accent: #FFD700; --success: #4ade80; --danger: #ffb4a6; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { position: relative; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Display font (Pliant) for headings; body/UI text stays Manrope. */ h1, h2, .section-title { font-family: var(--font-heading); } /* Subtle grain texture, pure CSS/SVG — no image request, no third party. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .site-header, main, .site-footer { position: relative; z-index: 1; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: inherit; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; vertical-align: middle; -webkit-font-smoothing: antialiased; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } /* Wider cap for the homepage's tool-grid sections only, so cards fill more of very wide screens instead of sitting in a narrow (--max-width) column with large empty gutters either side. Everything else (tool pages, blog prose, the footer) keeps the standard width. */ .container-wide { max-width: 1440px; } /* Header */ .site-header { border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 10; } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { display: flex; align-items: center; gap: 8px; color: var(--text); } .logo:hover { text-decoration: none; } .logo-mark { height: 28px; width: 28px; display: block; flex-shrink: 0; } /* Wordmark as live text so it uses the site's heading font and themes via CSS variables (no separate light/dark image assets needed). */ .logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1; } .logo-text > span { color: var(--brand); } .logo .mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: var(--brand-contrast); font-size: 1rem; } .nav-links { display: flex; gap: 20px; align-items: center; font-size: 0.95rem; } .nav-links a { color: var(--text-muted); } .nav-links a:hover { color: var(--text); text-decoration: none; } /* Hover/focus fly-out menus (built by site.js from SEARCH_INDEX) */ .nav-item.has-flyout { position: relative; align-self: center; /* Match .site-header .container height so the panel's top:100% anchors to the header's bottom edge, not just the nav link's text height. */ height: 64px; display: flex; align-items: center; } .nav-flyout { position: absolute; top: 100%; left: 0; z-index: 20; /* Detached from the header by a gap so it reads as its own separate layer (like iLovePDF), not something bleeding into the page. */ margin-top: 10px; display: grid; grid-template-columns: repeat(var(--cols, 2), 186px); gap: 2px 6px; max-width: calc(100vw - 24px); max-height: calc(100vh - 80px); overflow: hidden auto; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.35), 0 8px 16px -8px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.18s; } /* Flipped to right-aligned by site.js when left-anchoring would overflow the viewport (e.g. the rightmost nav item). */ .nav-flyout.nav-flyout--end { left: auto; right: 0; } /* .open is toggled by site.js with a short close delay (hover intent), which is what actually bridges the gap to the detached panel; :hover / :focus-within keep it working without JS and for keyboard. */ .nav-item.has-flyout:hover .nav-flyout, .nav-item.has-flyout:focus-within .nav-flyout, .nav-item.has-flyout.open .nav-flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* "Warm" state: a menu is already open, so moving to an adjacent item swaps the panel with a quick cross-fade and no slide-in, rather than animating a fresh open. site.js clears it once the pointer leaves. */ .nav-links.flyouts-warm .nav-flyout { transform: none; transition: opacity 0.09s ease; } @media (prefers-reduced-motion: reduce) { .nav-flyout { transition: opacity 0.12s ease, visibility 0.12s; transform: none; } } .nav-flyout a { display: flex; align-items: flex-start; gap: 7px; padding: 7px 10px; border-radius: 6px; font-size: 0.88rem; line-height: 1.3; color: var(--text-muted); } .nav-flyout-icon { flex-shrink: 0; font-size: 1rem; margin-top: 1px; color: var(--text-muted); } .nav-flyout a:hover .nav-flyout-icon, .nav-flyout a:focus-visible .nav-flyout-icon { color: inherit; } .nav-flyout a:hover, .nav-flyout a:focus-visible { /* Brand-tinted highlight, mixed onto the panel's own background so it reads cleanly in both themes (dark teal on pale teal in light, mint on deep teal in dark). Fallback for browsers without color-mix. */ background: var(--bg-alt); background: color-mix(in srgb, var(--brand) 18%, var(--bg)); color: var(--brand); text-decoration: none; } .nav-flyout-all { grid-column: 1 / -1; margin-top: 4px; padding-top: 10px !important; border-top: 1px solid var(--border); font-weight: 700; color: var(--brand) !important; } @media (prefers-reduced-motion: reduce) { .nav-flyout { transition: none; } } .header-right { display: flex; align-items: center; gap: 16px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .icon-btn:hover { border-color: var(--brand); } .icon-btn .material-symbols-outlined { font-size: 1.2rem; } .header-support-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--brand); color: var(--brand-contrast); font-weight: 700; font-size: 0.85rem; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease; } .header-support-btn:hover { background: var(--brand-dark); text-decoration: none; transform: translateY(-1px); } .header-support-btn .material-symbols-outlined { font-size: 1.1rem; } .nav-toggle { display: none; } /* Below 600px, collapse the header CTA to an icon-only button to match the theme-toggle/hamburger buttons and avoid header overflow. */ @media (max-width: 600px) { .header-support-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 8px; } .header-support-btn-label { display: none; } } /* Mobile nav: collapsed behind a hamburger below 760px */ @media (max-width: 760px) { .nav-toggle { display: inline-flex; } .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 20px 20px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15); } .nav-links.open { display: flex; } /* Fly-outs are a desktop hover affordance; on mobile the category links behave as plain links in the hamburger list. */ .nav-item.has-flyout { display: contents; } .nav-flyout { display: none; } .nav-links a { width: 100%; padding: 10px 0; border-bottom: 1px solid var(--border); } .nav-links a:last-child { border-bottom: none; } } /* Skip link: hidden until keyboard-focused */ .skip-link { position: absolute; top: -48px; left: 12px; z-index: 100; padding: 10px 18px; background: var(--brand); color: var(--brand-contrast); border-radius: 0 0 8px 8px; font-weight: 700; font-size: 0.9rem; transition: top 0.15s ease; } .skip-link:focus { top: 0; text-decoration: none; } /* Back to top */ .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--brand); color: var(--brand-contrast); cursor: pointer; box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: var(--brand-dark); } /* Cookie consent banner */ body:has(#fgpConsentBar) .back-to-top { bottom: 96px; } .fgp-consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #004D40; color: #fff9f2; border-top: 1px solid rgba(255, 249, 242, 0.2); box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.25); } .fgp-consent-bar-inner { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 16px 20px; } .fgp-consent-bar p { margin: 0; font-size: 0.85rem; line-height: 1.5; opacity: 0.9; } .fgp-consent-bar a { color: #fff9f2; text-decoration: underline; } .fgp-consent-bar-actions { display: flex; gap: 10px; flex-shrink: 0; } .fgp-consent-bar .btn.secondary { background: transparent; border: 1px solid rgba(255, 249, 242, 0.4); color: #fff9f2; } .fgp-consent-bar .btn.secondary:hover { background: rgba(255, 249, 242, 0.12); } .fgp-consent-bar .btn:not(.secondary) { background: #fff9f2; color: #004D40; } .fgp-consent-bar .btn:not(.secondary):hover { background: #ffffff; } @media (max-width: 640px) { .fgp-consent-bar-inner { flex-direction: column; align-items: stretch; gap: 12px; } .fgp-consent-bar-actions { justify-content: flex-end; } } /* Scroll progress bar (blog articles) */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--brand); z-index: 60; transition: width 0.1s linear; } /* Copy-link button */ .copy-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt); color: var(--text-muted); font-size: 0.82rem; cursor: pointer; } .copy-link-btn:hover { border-color: var(--brand); color: var(--text); } .copy-link-btn .material-symbols-outlined { font-size: 1rem; } @media (prefers-reduced-motion: reduce) { .back-to-top, .skip-link, .scroll-progress { transition: none; } } /* Hero */ .hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 480px; padding: 72px 0; text-align: center; color: #fff; } .hero-bg-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 20, 17, 0.7) 0%, rgba(0, 20, 17, 0.6) 100%); } .hero .container { position: relative; z-index: 2; } @keyframes fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hero .container > * { animation: fade-in-up 0.7s ease-out both; } .hero .container > *:nth-child(1) { animation-delay: 0.05s; } .hero .container > *:nth-child(2) { animation-delay: 0.15s; } .hero .container > *:nth-child(3) { animation-delay: 0.25s; } @media (min-width: 700px) { .hero { min-height: 600px; } } @media (prefers-reduced-motion: reduce) { .hero .container > * { animation: none; } } .hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 800; margin: 0 0 16px; letter-spacing: -0.03em; line-height: 1.05; color: #fff; } .hero .gradient-text { background: linear-gradient(90deg, #4ECDC4 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #4ECDC4; } .hero p { color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; max-width: 640px; margin: 0 auto; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); } .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; } .pillar-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .pillar-card .glyph { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--bg-alt); color: var(--brand); font-size: 1.6rem; margin-bottom: 14px; } .pillar-card h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--text); } .pillar-card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; } /* Trust signals */ .trust-signals { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 8px 0 40px; } .trust-signals .signal { display: flex; align-items: center; gap: 12px; } .trust-signals .signal .glyph { font-size: 1.5rem; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-alt); } /* Source badge is a 512x512 square (a circular "Made in Australia" stamp painted on a black square canvas) -- a round mask crops exactly to its own circle and hides the black corners. */ .glyph-flag { width: 32px; height: 32px; border-radius: 50%; display: block; } .trust-signals .signal .label { display: flex; flex-direction: column; font-size: 0.85rem; } .trust-signals .signal .label strong { color: var(--text); } .trust-signals .signal .label span { color: var(--text-muted); } /* Tool grid */ .section-title { font-size: 1.1rem; font-weight: 700; margin: 40px 0 16px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; } .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 32px; } .tool-card { display: block; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .tool-card:hover { box-shadow: 0 16px 32px -8px rgba(0, 77, 64, 0.22), 0 4px 12px rgba(0, 77, 64, 0.12); border-color: var(--brand); text-decoration: none; transform: translateY(-4px) scale(1.015); } /* Scroll-reveal: cards fade in as they enter the viewport. Scoped under a JS-added class so cards stay fully visible if JS never runs. */ .reveal-ready .tool-grid .tool-card { opacity: 0; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, opacity 0.5s ease; } .reveal-ready .tool-grid .tool-card.in-view { opacity: 1; } @media (prefers-reduced-motion: reduce) { .reveal-ready .tool-grid .tool-card { transition: none; } } /* Blog index: featured hero */ .blog-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 55%, #7a1d0f 100%); color: #fff9f2; padding: 56px 40px; margin: 8px 0 56px; } .blog-hero::after { content: ""; position: absolute; z-index: -1; right: -70px; bottom: -90px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 70%); } .blog-hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 249, 242, 0.4); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 22px; } .blog-hero h2 { font-size: clamp(1.7rem, 4.2vw, 2.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 16px; max-width: 18ch; text-wrap: balance; } .blog-hero h2 a { color: inherit; } .blog-hero h2 a:hover { text-decoration: none; opacity: 0.9; } .blog-hero p { color: rgba(255, 249, 242, 0.88); font-size: 1.02rem; max-width: 48ch; margin: 0 0 28px; } .blog-hero .actions-row { align-items: center; } .blog-hero .btn { background: #fff9f2; color: var(--brand-dark); box-shadow: none; } .blog-hero .btn:hover { background: #ffffff; } .blog-hero .meta-readtime { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: rgba(255, 249, 242, 0.75); } /* Blog index: section header */ .blog-section-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 16px; margin: 0 0 32px; } .blog-section-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; } /* Blog index: card grid */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; } .blog-card { display: block; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: var(--bg); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -8px rgba(0, 77, 64, 0.18), 0 4px 12px rgba(0, 77, 64, 0.1); border-color: var(--brand); text-decoration: none; } .blog-card .visual { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; font-size: 2.75rem; color: rgba(255, 255, 255, 0.95); } .blog-card .visual .material-symbols-outlined { transition: transform 0.35s ease; } .blog-card:hover .visual .material-symbols-outlined { transform: scale(1.15) rotate(-3deg); } .blog-card .body { padding: 20px; } .blog-card .blog-meta { margin-bottom: 10px; } .blog-card h3 { margin: 0 0 8px; font-size: 1.06rem; line-height: 1.35; color: var(--text); text-wrap: balance; } .blog-card:hover h3 { color: var(--brand); } .blog-card p { margin: 0; color: var(--text-muted); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-grid .blog-card:nth-child(6n+1) .visual { background: linear-gradient(135deg, #004D40, #00332B); } .blog-grid .blog-card:nth-child(6n+2) .visual { background: linear-gradient(135deg, #FFD700, #FFCC00); color: #1B1C1C; } .blog-grid .blog-card:nth-child(6n+3) .visual { background: linear-gradient(135deg, #337066, #004D40); } .blog-grid .blog-card:nth-child(6n+4) .visual { background: linear-gradient(135deg, #3A3B3B, #1B1C1C); } .blog-grid .blog-card:nth-child(6n+5) .visual { background: linear-gradient(135deg, #FFCC00, #C9A200); color: #1B1C1C; } .blog-grid .blog-card:nth-child(6n+6) .visual { background: linear-gradient(135deg, #00332B, #1B1C1C); } .blog-meta { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; } .blog-meta .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--bg-alt); color: var(--brand); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } .tool-card .icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--bg-alt); color: var(--brand); font-size: 1.35rem; margin-bottom: 12px; transition: transform 0.2s ease; } .tool-card:hover .icon { transform: scale(1.12) rotate(-4deg); } /* Cycle a warm accent per card so the grid doesn't read as monochrome. */ .tool-grid .tool-card:nth-child(6n+1) .icon { background: rgba(0, 77, 64, 0.12); color: #004D40; } .tool-grid .tool-card:nth-child(6n+2) .icon { background: rgba(255, 215, 0, 0.28); color: #8a6d00; } .tool-grid .tool-card:nth-child(6n+3) .icon { background: rgba(51, 112, 102, 0.18); color: #337066; } .tool-grid .tool-card:nth-child(6n+4) .icon { background: rgba(27, 28, 28, 0.1); color: #1B1C1C; } .tool-grid .tool-card:nth-child(6n+5) .icon { background: rgba(255, 204, 0, 0.22); color: #7a5f00; } .tool-grid .tool-card:nth-child(6n+6) .icon { background: rgba(0, 51, 43, 0.14); color: #00332B; } .tool-card h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--text); } .tool-card p { margin: 0; font-size: 0.88rem; color: var(--text-muted); } /* Compact "Related tools" cards: same box/hover/icon-cycling as .tool-card, smaller footprint. */ .related-tools-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 0; } .related-tool-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .related-tool-card:hover { transform: translateY(-2px); } .related-tool-card .icon { width: 32px; height: 32px; font-size: 1.05rem; margin-bottom: 0; flex-shrink: 0; } .related-tool-card h3 { margin: 0; font-size: 0.88rem; } /* Breadcrumbs */ .breadcrumbs { padding: 16px 0 0; font-size: 0.85rem; color: var(--text-muted); } .breadcrumbs a { color: var(--text-muted); } .breadcrumbs a:hover { color: var(--brand); } .breadcrumbs .sep { margin: 0 6px; color: var(--border); } .breadcrumbs .current { color: var(--text); } /* Tool page layout */ .tool-page-header { padding: 40px 0 8px; text-align: center; } .tool-page-header h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 800; margin: 0 0 10px; letter-spacing: -0.03em; line-height: 1.1; } .tool-page-header p { color: var(--text-muted); max-width: 600px; margin: 0 auto; } .tool-workspace { max-width: 720px; margin: 28px auto 64px; } /* Tool page layout: the workspace card is the main event, full width at the top. Below it, "how it works" takes the wider left column and related tools sits as a narrower right-hand sidebar list. Scoped to `.tool-workspace` immediately followed by `.related-tools-section` (true on every tool page) so this never touches the handful of unrelated pages that reuse `.tool-workspace`/`.info-section` for a plain single-column wrapper (privacy policy, support). Below the breakpoint everything reflows back to a single-column stack in DOM order: workspace card, related tools, then how it works. */ @media (min-width: 900px) { /* Named areas (not auto-placement) so "how it works" and "related tools" land side by side even though related-tools-section comes first in the DOM (it used to be the left column's second item; now it's the right column's only item). */ .container:has(> .tool-workspace + .related-tools-section) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "crumbs crumbs" "header header" "workspace workspace" "howitworks related"; align-items: start; gap: 32px; } .container:has(> .tool-workspace + .related-tools-section) > .breadcrumbs { grid-area: crumbs; } .container:has(> .tool-workspace + .related-tools-section) > .tool-page-header { grid-area: header; } .container:has(> .tool-workspace + .related-tools-section) > .tool-workspace { grid-area: workspace; max-width: none; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 20px -10px rgba(0, 0, 0, 0.12); padding: 32px; } .container:has(> .tool-workspace + .related-tools-section) > .related-tools-section { grid-area: related; align-self: start; margin: 0 0 64px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 20px -10px rgba(0, 0, 0, 0.12); padding: 28px; } .container:has(> .tool-workspace + .related-tools-section) > .info-section { grid-area: howitworks; align-self: start; margin-top: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 20px -10px rgba(0, 0, 0, 0.12); padding: 28px; } } .dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 48px 24px; text-align: center; cursor: pointer; background: var(--bg-alt); transition: border-color 0.15s ease, background 0.15s ease; } .dropzone.dragover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg-alt)); } .dropzone .dz-icon { font-size: 2.2rem; margin-bottom: 8px; } .dropzone .dz-title { font-weight: 600; margin-bottom: 4px; } .dropzone .dz-sub { color: var(--text-muted); font-size: 0.88rem; } .dropzone input[type="file"] { display: none; } /* A slimmer drop target for tools where, once there's real content on screen, a full-size dropzone would just push that content down for no reason. */ .dropzone.compact { padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; } .dropzone.compact .dz-icon { font-size: 1.2rem; margin-bottom: 0; } .dropzone.compact .dz-title { margin-bottom: 0; font-size: 0.92rem; } .dropzone.compact .dz-sub { display: none; } .file-list { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .file-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 0.9rem; } .file-list li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-list li .meta { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; } .file-list li button.remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 4px; } .file-list li button.remove:hover { color: var(--danger); } .page-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin: 20px 0; } .page-thumb { border: 2px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); cursor: pointer; position: relative; user-select: none; } .page-thumb.selected { border-color: var(--brand); } .page-thumb.marked-delete { opacity: 0.35; border-color: var(--danger); } .page-thumb img { display: block; width: 100%; } .thumb-img-wrap { height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-alt); } .thumb-img-wrap canvas, .thumb-img-wrap img { max-width: 100%; max-height: 100%; width: auto; transition: transform 0.15s ease; } .page-thumb.dragging { opacity: 0.4; } .page-thumb[draggable="true"] { cursor: grab; } .page-thumb .page-num { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.72rem; padding: 1px 6px; border-radius: 4px; } .page-thumb .thumb-actions { display: flex; justify-content: center; gap: 6px; padding: 6px; background: var(--bg-alt); border-top: 1px solid var(--border); } .page-thumb .thumb-actions button { border: none; background: none; cursor: pointer; font-size: 0.95rem; color: var(--text-muted); padding: 2px 4px; } .page-thumb .thumb-actions button:hover { color: var(--text); } .controls-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin: 20px 0; } .rotate-preview-wrap { display: flex; align-items: center; justify-content: center; min-height: 340px; padding: 40px; margin: 16px 0; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .rotate-preview-wrap canvas { max-width: 220px; max-height: 260px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: transform 0.1s ease; } .field { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; } .field label { color: var(--text-muted); font-weight: 600; } .field input[type="number"], .field input[type="text"], .field select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 0.92rem; min-width: 100px; } .field input[type="range"] { width: 180px; } .field-error { color: var(--danger); font-size: 0.8rem; margin: 4px 0 0; } .field.has-error input, .field.has-error textarea { border-color: var(--danger); } .radio-group { display: flex; gap: 14px; flex-wrap: wrap; } .radio-group label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: none; background: var(--brand); color: var(--brand-contrast); font-size: 0.95rem; font-weight: 700; box-shadow: 0 20px 25px -5px rgba(0, 77, 64, 0.18), 0 8px 10px -6px rgba(0, 77, 64, 0.16); cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { background: var(--brand-dark); transform: translateY(-2px) scale(1.03); box-shadow: 0 24px 32px -8px rgba(0, 77, 64, 0.32), 0 10px 14px -6px rgba(0, 77, 64, 0.22); } .btn:active { transform: translateY(0) scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn.secondary { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); } .btn.secondary:hover { background: var(--border); } .btn.small { padding: 7px 14px; font-size: 0.85rem; } .actions-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .status-box { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; background: var(--bg-alt); border: 1px solid var(--border); display: none; } .status-box.visible { display: block; } .status-box.error { border-color: var(--danger); color: var(--danger); } .status-box.success { border-color: var(--success); } .progress-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 10px; } .progress-bar .fill { height: 100%; width: 0%; background: var(--brand); transition: width 0.15s ease; } .results { margin-top: 24px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-alt); display: none; } .results.visible { display: block; } .results .result-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); } .results .result-item:last-child { border-bottom: none; } .results .result-item img.preview { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); } .results .result-item .info { flex: 1; font-size: 0.9rem; } .results .result-item .savings { color: var(--success); font-size: 0.82rem; } .help-text { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; } [contenteditable][data-placeholder]:empty:before { content: attr(data-placeholder); color: var(--text-muted); } .ai-flag { background: rgba(255, 215, 0, 0.35); border-radius: 3px; padding: 0 2px; cursor: help; } .finding-group { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .finding-group h4 { margin: 0 0 4px; font-size: 0.95rem; } .finding-group .hint { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 10px; } .finding-chip { display: inline-block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; margin: 0 6px 6px 0; } .note-box { margin: 20px 0; padding: 14px 16px; border-radius: 8px; background: var(--bg-alt); border: 1px solid var(--border); font-size: 0.86rem; color: var(--text-muted); } /* How it works / related tools */ .info-section, .related-tools-section { margin-top: 56px; border-top: 1px solid var(--border); padding-top: 32px; } .info-section h2, .related-tools-section h2 { font-size: 1.2rem; margin-bottom: 12px; } .info-section p { text-align: justify; text-align-last: left; hyphens: auto; } .faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; } .faq-item summary { cursor: pointer; padding: 16px 18px; font-weight: 600; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; float: right; color: var(--text-muted); } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { margin: 0; padding: 0 18px 16px; color: var(--text-muted); text-align: left; } /* Compare PDFs: diff view */ .diff-view { font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: 0.85rem; line-height: 1.6; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-alt); white-space: pre-wrap; word-break: break-word; max-height: 500px; overflow-y: auto; } .diff-line { display: block; padding: 1px 6px; border-radius: 3px; } .diff-line.added { background: rgba(22, 163, 74, 0.16); color: var(--success); } .diff-line.removed { background: rgba(186, 26, 26, 0.14); color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; } .diff-line.same { color: var(--text-muted); } .diff-summary { display: flex; gap: 20px; margin: 16px 0; font-size: 0.88rem; } .diff-summary .added-count { color: var(--success); font-weight: 700; } .diff-summary .removed-count { color: var(--danger); font-weight: 700; } .cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0; padding: 20px 24px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--border); } .cta-box p { margin: 0; text-align: left; font-weight: 600; } .byline { color: var(--text-muted); font-size: 0.88rem; margin: -8px 0 20px; } .info-section ol, .info-section ul { color: var(--text-muted); font-size: 0.92rem; padding-left: 20px; } .info-section li { margin-bottom: 6px; } .cursor { display: inline-block; animation: cursor-blink 1s step-end infinite; } @keyframes cursor-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } } /* Footer: a green "isolated box" sitting on the page's own background. */ .site-footer { background: var(--bg); padding: 48px 0; margin-top: 40px; } .footer-box { background: #004D40; border-radius: 28px; padding: 48px; color: #fff9f2; font-size: 0.85rem; } .footer-box a { color: #fff9f2; opacity: 0.9; } .footer-box a:hover { opacity: 1; } /* minmax(0, 1fr), not plain 1fr: a bare 1fr track still won't shrink past its content's min-content width, which would size .footer-grid's tracks differently from .footer-bottom-row's (different content, same column count) even though both say "repeat(5, 1fr)" — breaking the alignment between the two. Forcing a 0 floor makes both purely proportional. */ .footer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; } .footer-col h3 { margin: 0 0 14px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); } .footer-col a { display: block; margin-bottom: 10px; font-size: 0.88rem; } .footer-col a.footer-view-all { font-weight: 700; opacity: 0.95; } .footer-connect { display: flex; align-items: center; gap: 10px; } .footer-au-badge { width: 40px; height: 40px; border-radius: 50%; display: block; flex-shrink: 0; } .footer-social { display: flex; align-items: center; gap: 10px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 249, 242, 0.12); color: #fff9f2; opacity: 0.9; transition: background 0.15s ease, opacity 0.15s ease; } .footer-social a:hover { background: rgba(255, 249, 242, 0.22); opacity: 1; } .footer-social a svg { width: 18px; height: 18px; display: block; } .footer-support-cta { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .footer-support-cta p { margin: 0; font-size: 0.85rem; opacity: 0.85; } .footer-support-cta .btn { background: #fff9f2; color: #004D40; } .footer-support-cta .btn:hover { background: #ffffff; } /* Shares .footer-grid's own column tracks (redeclared alongside it at each breakpoint below) so the logo lines up under column 1 and the text lines up under column 2 ("Image Tools"), instead of the two just flowing one after another at whatever width they happen to add up to. */ .footer-bottom-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; align-items: end; margin-top: 40px; } .footer-mark-big { grid-column: 1; justify-self: start; height: 112px; width: auto; max-width: none; /* The source mark is solid brand green; invert it to white so it reads against the footer's own green background. */ filter: brightness(0) invert(1); opacity: 0.95; } .footer-brand-text { grid-column: 2 / -1; } .footer-brand-text p { margin: 0 0 6px; font-size: 0.85rem; opacity: 0.85; white-space: nowrap; } .footer-bottom { font-size: 0.8rem; line-height: 1.6; opacity: 0.85; } .footer-bottom .attribution { font-weight: 600; white-space: nowrap; } @media (max-width: 900px) { .footer-box { padding: 36px 28px; } .footer-grid, .footer-bottom-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .footer-grid, .footer-bottom-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-bottom-row { gap: 16px; } .footer-mark-big { height: 84px; } .footer-brand-text p { white-space: normal; } } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* Crop & rotate tool */ .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } .crop-stage { position: relative; max-width: 100%; margin: 20px 0; touch-action: none; background: linear-gradient(45deg, #80808022 25%, transparent 25%, transparent 75%, #80808022 75%), linear-gradient(45deg, #80808022 25%, transparent 25%, transparent 75%, #80808022 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; border-radius: 8px; overflow: hidden; line-height: 0; } .crop-stage canvas { display: block; width: 100%; height: auto; } .preview-stage { position: relative; max-width: 100%; margin: 20px 0; background: linear-gradient(45deg, #80808022 25%, transparent 25%, transparent 75%, #80808022 75%), linear-gradient(45deg, #80808022 25%, transparent 25%, transparent 75%, #80808022 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; border-radius: 8px; overflow: hidden; line-height: 0; } .preview-stage canvas { display: block; width: 100%; height: auto; } .crop-box { position: absolute; border: 2px solid var(--brand); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4); cursor: move; } .crop-handle { position: absolute; width: 16px; height: 16px; background: var(--brand); border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); touch-action: none; } .crop-handle.nw { top: 0; left: 0; cursor: nwse-resize; } .crop-handle.ne { top: 0; left: 100%; cursor: nesw-resize; } .crop-handle.sw { top: 100%; left: 0; cursor: nesw-resize; } .crop-handle.se { top: 100%; left: 100%; cursor: nwse-resize; } /* PDF Editor: multi-page WYSIWYG canvas + draggable/resizable text & image objects */ .pdf-editor-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .pdf-obj-toolbar { display: none; flex-wrap: wrap; gap: 10px; align-items: center; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--border); } .pdf-obj-toolbar.visible { display: flex; } .pdf-obj-toolbar .field { gap: 4px; } .pdf-obj-toolbar label { font-size: 0.78rem; } .pdf-obj-toolbar select, .pdf-obj-toolbar input[type="number"] { padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 0.85rem; } .pdf-obj-toolbar input[type="number"] { width: 56px; } .pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; } .pdf-page-wrap { position: relative; width: 100%; max-width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); cursor: default; } .pdf-page-wrap.selected-page { border-color: var(--brand); } .pdf-page-wrap canvas { display: block; } .pdf-page-overlay { position: absolute; top: 0; left: 0; transform-origin: top left; } .pdf-obj { position: absolute; cursor: move; border: 1px dashed transparent; touch-action: none; box-sizing: border-box; } .pdf-obj.selected { border-color: var(--brand); } .pdf-obj-body { width: 100%; height: 100%; overflow: hidden; white-space: pre-wrap; word-break: break-word; outline: none; font-family: Helvetica, Arial, sans-serif; line-height: 1.2; cursor: move; } .pdf-obj-body[contenteditable="true"] { cursor: text; background: rgba(255, 255, 255, 0.6); } .pdf-obj img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } .pdf-obj-delete { display: none; position: absolute; top: -12px; right: -12px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: var(--danger); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; } .pdf-obj.selected .pdf-obj-delete { display: flex; } .pdf-obj.selected .crop-handle { display: block; } .pdf-obj .crop-handle { display: none; } @media (max-width: 600px) { .hero { padding: 36px 0 24px; } .dropzone { padding: 32px 16px; } /* Stack the trust signals as a left-aligned list centred as a block, so every icon lines up on the same edge instead of each row centring by its own width. */ .trust-signals { flex-direction: column; align-items: center; gap: 20px; } .trust-signals .signal { width: 100%; max-width: 300px; } } /* Print */ @media print { .site-header, .site-footer, .back-to-top, .skip-link, .scroll-progress, .dropzone, .actions-row, .btn, .copy-link-btn, .status-box, .hero-ctas, .fgp-consent-bar { display: none !important; } body { background: #fff; color: #000; } a { color: #000; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; } .container { max-width: 100%; } .search-overlay { display: none !important; } } /* Site search modal */ body.search-open { overflow: hidden; } .search-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(0, 0, 0, 0.5); } .search-overlay.open { display: flex; } .search-panel { width: 100%; max-width: 560px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; } .search-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .search-input-row .material-symbols-outlined { color: var(--text-muted); font-size: 1.3rem; } .search-input-row input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-size: 1.05rem; font-family: inherit; outline: none; } .search-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; } .search-close-btn:hover { background: var(--bg-alt); color: var(--text); } .search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; } .search-result { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 8px; color: var(--text); } .search-result:hover, .search-result.active { background: color-mix(in srgb, var(--brand) 10%, var(--bg-alt)); text-decoration: none; } .search-result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .search-result-title { font-weight: 600; font-size: 0.95rem; } .search-result-desc { font-size: 0.82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-tag { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 999px; background: var(--bg-alt); color: var(--text-muted); white-space: nowrap; } .search-tag-pdf-tool { background: color-mix(in srgb, var(--brand) 15%, var(--bg-alt)); color: var(--brand); } .search-tag-blog { background: color-mix(in srgb, #8a5cf6 15%, var(--bg-alt)); color: #8a5cf6; } .search-empty { padding: 24px 16px 28px; text-align: center; color: var(--text-muted); font-size: 0.9rem; } /* 404 page: photo hero with a CSS-only RGB-split glitch effect on the numeral. Fixed dark-photo styling on purpose, not theme-adaptive (same idea as .blog-hero). */ .glitch-hero { position: relative; min-height: min(72vh, 640px); display: flex; align-items: center; justify-content: center; background-color: #04211b; background-size: cover; background-position: center; overflow: hidden; isolation: isolate; } .glitch-hero-overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(2, 20, 16, 0.55) 0%, rgba(2, 20, 16, 0.8) 100%); } .glitch-hero-content { position: relative; z-index: 1; text-align: center; color: #fff9f2; padding: 40px 20px; } .glitch-hero-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.85rem; color: #FFD700; margin: 0 0 12px; } .glitch-text { position: relative; display: inline-block; font-size: clamp(4.5rem, 16vw, 9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0 0 18px; color: #fff9f2; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .glitch-text::before { color: #FFD700; animation: glitch-1 3.4s infinite steps(1, end); } .glitch-text::after { color: #4ECDC4; animation: glitch-2 2.7s infinite steps(1, end); } @keyframes glitch-1 { 0%, 87%, 100% { transform: translate(0, 0); clip-path: inset(0 0 100% 0); opacity: 0; } 88% { transform: translate(-3.5%, 2px); clip-path: inset(8% 0 55% 0); opacity: 0.85; } 90.5% { transform: translate(3%, -2px); clip-path: inset(55% 0 10% 0); opacity: 0.85; } 93% { transform: translate(-2%, 1px); clip-path: inset(28% 0 40% 0); opacity: 0.85; } 95% { transform: translate(0, 0); clip-path: inset(0 0 100% 0); opacity: 0; } } @keyframes glitch-2 { 0%, 82%, 100% { transform: translate(0, 0); clip-path: inset(100% 0 0 0); opacity: 0; } 83% { transform: translate(3.5%, -1px); clip-path: inset(65% 0 5% 0); opacity: 0.85; } 85.5% { transform: translate(-3%, 2px); clip-path: inset(5% 0 70% 0); opacity: 0.85; } 88% { transform: translate(2.5%, -1px); clip-path: inset(35% 0 30% 0); opacity: 0.85; } 90% { transform: translate(0, 0); clip-path: inset(100% 0 0 0); opacity: 0; } } .glitch-hero-sub { color: rgba(255, 249, 242, 0.88); max-width: 480px; margin: 0 auto 28px; } @media (prefers-reduced-motion: reduce) { .glitch-text::before, .glitch-text::after { animation: none; opacity: 0; } } /* Collage Studio: preset grid-layout collage editor (customize panel, canvas of cells, filter panel). Full-width 3-column editor, so this page opts out of the site-wide two-column tool-page grid (see the .container override in its own