/* ========================================================================== Weblytic — Open Graph / Meta Tag Previewer Shared stylesheet for every page of the site. Contents -------- 01. Design tokens (light + dark themes) 02. Base / reset / typography 03. Layout helpers 04. Buttons, pills, form controls 05. Site header + navigation 06. Hero section + animations 07. The previewer tool 08. Social share card mockups (Google, Facebook, X, LinkedIn) 09. Raw meta table + warnings 10. Content sections (SEO copy, FAQ, steps, tables) 11. Contact form 12. Site footer + social icons 13. Responsive breakpoints 14. Membership — paywall, pricing, access key 15. The pro image tools — shared UI 16. Motion / print preferences ========================================================================== */ /* ========================================================================== 01. DESIGN TOKENS Every colour used on the site comes from these variables, so switching between light and dark mode is a single attribute change on . ========================================================================== */ :root { /* Brand ramp — emerald to teal */ --brand-50: #ecfdf5; --brand-100: #d1fae5; --brand-300: #6ee7b7; --brand-400: #34d399; --brand-500: #10b981; /* primary emerald */ --brand-600: #059669; --brand-700: #047857; --teal-400: #2dd4bf; --teal-500: #14b8a6; /* secondary teal */ --teal-600: #0d9488; /* Semantic colours */ --ok: #16a34a; --warn: #d97706; --danger: #dc2626; --info: #0284c7; /* Surfaces + text (light theme defaults) */ --bg: #ffffff; --bg-alt: #f6faf8; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e3e8ef; --border-strong:#cbd5e1; --text: #0f172a; --text-muted: #5b6b7f; --text-faint: #8a99ab; /* Effects */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 6px 20px -8px rgba(15, 23, 42, .18); --shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, .28); --ring: 0 0 0 3px rgba(16, 185, 129, .28); /* Shape + rhythm */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --maxw: 1140px; --gutter: 20px; /* Type */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* Dark theme — applied by main.js via */ [data-theme="dark"] { --bg: #0a1119; --bg-alt: #0d1620; --surface: #111c27; --surface-2: #16232f; --border: #1f2f3d; --border-strong:#2c4152; --text: #e8f1f6; --text-muted: #9db0c0; --text-faint: #708495; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); --shadow-lg: 0 28px 70px -28px rgba(0, 0, 0, .75); } /* ========================================================================== 02. BASE / RESET / TYPOGRAPHY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; /* keeps anchor targets clear of the sticky nav */ -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .25s ease, color .25s ease; } h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .6em; font-weight: 750; letter-spacing: -.02em; } h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); } h3 { font-size: clamp(1.18rem, 2.2vw, 1.4rem); font-weight: 700; } h4 { font-size: 1.05rem; font-weight: 700; } p { margin: 0 0 1.15em; } ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; } li { margin-bottom: .5em; } a { color: var(--brand-600); text-decoration-color: color-mix(in srgb, var(--brand-600) 40%, transparent); text-underline-offset: 3px; } a:hover { color: var(--teal-600); } [data-theme="dark"] a { color: var(--brand-400); } [data-theme="dark"] a:hover { color: var(--teal-400); } img { max-width: 100%; display: block; } code, kbd, pre { font-family: var(--font-mono); font-size: .9em; } code { background: var(--surface-2); border: 1px solid var(--border); padding: .12em .42em; border-radius: 6px; word-break: break-word; } pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; line-height: 1.55; } pre code { background: none; border: 0; padding: 0; } hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; } ::selection { background: var(--brand-200, #b9f2dc); color: #06281d; } /* Visible keyboard focus everywhere */ :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; } /* Screen-reader-only text, used for labels and the skip link */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--brand-600); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; transition: top .2s ease; } .skip-link:focus { top: 0; color: #fff; } /* ========================================================================== 03. LAYOUT HELPERS ========================================================================== */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 820px; } .section { padding: 76px 0; } .section--tight { padding: 52px 0; } .section--alt { background: var(--bg-alt); } .section-head { max-width: 720px; margin: 0 auto 46px; text-align: center; } .section-head p { color: var(--text-muted); margin-bottom: 0; } .eyebrow { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-500) 26%, transparent); padding: 5px 13px; border-radius: var(--radius-pill); margin-bottom: 16px; } [data-theme="dark"] .eyebrow { color: var(--brand-300); } .lead { font-size: 1.14rem; color: var(--text-muted); } .grid { display: grid; gap: 22px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); } .card--feature h3 { margin-bottom: .35em; } .card--feature p:last-child { margin-bottom: 0; } .icon-badge { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 14px; background: linear-gradient(135deg, var(--brand-500), var(--teal-500)); color: #fff; font-size: 1.15rem; font-weight: 700; } /* ========================================================================== 04. BUTTONS, PILLS, FORM CONTROLS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 650; font-size: .97rem; line-height: 1; padding: 14px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: linear-gradient(135deg, var(--brand-500), var(--teal-500)); color: #fff; box-shadow: 0 8px 20px -10px rgba(16, 185, 129, .9); } .btn--primary:hover { color: #fff; box-shadow: 0 12px 26px -10px rgba(16, 185, 129, 1); filter: saturate(1.08); } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { color: var(--text); border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 8%, var(--surface)); } .btn--sm { padding: 9px 14px; font-size: .85rem; } .btn--block { width: 100%; } .btn[disabled] { opacity: .55; cursor: not-allowed; } /* A button that happens to be an is still a button. Without these, the dark-theme link colour in section 02 wins on specificity — [data-theme="dark"] a is (0,1,1), .btn--primary is only (0,1,0) — and every primary button turns washed-out green in dark mode. Same reason the brand wordmark and the example chips are listed here. */ [data-theme="dark"] a.btn--primary, [data-theme="dark"] a.btn--primary:hover { color: #fff; } [data-theme="dark"] a.btn--ghost, [data-theme="dark"] a.btn--ghost:hover { color: var(--text); } [data-theme="dark"] .cta-band a.btn--ghost, [data-theme="dark"] .cta-band a.btn--ghost:hover { color: #fff; } [data-theme="dark"] a.brand, [data-theme="dark"] a.brand:hover { color: var(--text); } [data-theme="dark"] a.chip, [data-theme="dark"] a.pill { color: var(--text-muted); } [data-theme="dark"] a.pill--ok { color: var(--ok); } /* Small status/label pills */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); } .pill--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .pill--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 32%, transparent); } .pill--danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } /* Inputs */ .field { margin-bottom: 18px; } .field label { display: block; font-size: .88rem; font-weight: 650; margin-bottom: 7px; } .field .hint { font-size: .8rem; color: var(--text-faint); margin-top: 6px; } input[type="text"], input[type="url"], input[type="email"], select, textarea { width: 100%; font: inherit; font-size: .97rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 13px 15px; transition: border-color .18s ease, box-shadow .18s ease; } textarea { min-height: 150px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); } /* ========================================================================== 05. SITE HEADER + NAVIGATION Markup is injected by main.js so it stays identical on every page. ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 70px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; letter-spacing: -.025em; color: var(--text); text-decoration: none; } .brand:hover { color: var(--text); } .brand__mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-500), var(--teal-500)); color: #fff; font-size: .95rem; font-weight: 800; box-shadow: 0 4px 12px -4px rgba(16, 185, 129, .8); } .brand__mark svg { width: 18px; height: 18px; } .nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav__links a { display: block; padding: 8px 13px; border-radius: var(--radius-sm); font-size: .93rem; font-weight: 550; color: var(--text-muted); text-decoration: none; transition: color .16s ease, background-color .16s ease; } .nav__links a:hover { color: var(--text); background: var(--surface-2); } .nav__links a.is-active { color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 11%, transparent); } [data-theme="dark"] .nav__links a.is-active { color: var(--brand-300); } .nav__actions { display: flex; align-items: center; gap: 8px; } /* Theme toggle */ .theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .18s ease, background-color .18s ease; } .theme-toggle:hover { border-color: var(--brand-500); transform: rotate(-12deg); } .theme-toggle svg { width: 19px; height: 19px; } /* Only one of the two icons shows, depending on the active theme */ .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* Hamburger (mobile only) */ .nav__burger { display: none; width: 40px; height: 40px; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .nav__burger svg { width: 20px; height: 20px; } /* ========================================================================== 06. HERO SECTION + ANIMATIONS ========================================================================== */ .hero { position: relative; overflow: hidden; padding: 92px 0 74px; text-align: center; isolation: isolate; } /* Animated multi-stop gradient wash that slowly drifts across the hero */ .hero__bg { position: absolute; inset: -30% -20%; z-index: -2; background: radial-gradient(42% 46% at 18% 28%, rgba(16, 185, 129, .40), transparent 62%), radial-gradient(40% 44% at 82% 22%, rgba(20, 184, 166, .36), transparent 62%), radial-gradient(48% 50% at 50% 88%, rgba(45, 212, 191, .28), transparent 64%); filter: blur(22px); animation: heroDrift 22s ease-in-out infinite alternate; } [data-theme="dark"] .hero__bg { opacity: .55; } @keyframes heroDrift { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 50% { transform: translate3d(2%, 2%, 0) scale(1.08); } 100% { transform: translate3d(-1%, 1%, 0) scale(1.03); } } /* Soft floating shapes layered above the gradient */ .hero__shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero__shape { position: absolute; border-radius: 30%; background: linear-gradient(135deg, rgba(16,185,129,.30), rgba(20,184,166,.12)); border: 1px solid rgba(16, 185, 129, .22); animation: floaty 14s ease-in-out infinite; } .hero__shape:nth-child(1) { width: 110px; height: 110px; left: 6%; top: 18%; animation-delay: 0s; } .hero__shape:nth-child(2) { width: 62px; height: 62px; left: 88%; top: 26%; animation-delay: -3s; } .hero__shape:nth-child(3) { width: 84px; height: 84px; left: 78%; top: 72%; animation-delay: -6s; } .hero__shape:nth-child(4) { width: 46px; height: 46px; left: 14%; top: 74%; animation-delay: -9s; } .hero__shape:nth-child(5) { width: 140px; height: 140px; left: 44%; top: 6%; animation-delay: -12s; opacity: .5; } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-26px) rotate(18deg); } } .hero h1 { margin-bottom: .35em; } /* Typed-text effect: the word after "…preview your links for" cycles */ .typed { background: linear-gradient(120deg, var(--brand-500), var(--teal-500)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; } .typed__caret { display: inline-block; width: 3px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: var(--teal-500); animation: caretBlink 1s steps(1) infinite; } @keyframes caretBlink { 50% { opacity: 0; } } .hero__sub { max-width: 640px; margin: 0 auto 30px; font-size: 1.14rem; color: var(--text-muted); } .hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; } .hero__stats { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; font-size: .87rem; color: var(--text-muted); } .hero__stats span { display: inline-flex; align-items: center; gap: 7px; } .hero__stats strong { color: var(--text); font-weight: 700; } /* Compact page header used on About / Contact / Privacy / Disclaimer */ .page-hero { position: relative; overflow: hidden; padding: 62px 0 46px; text-align: center; border-bottom: 1px solid var(--border); background: radial-gradient(60% 120% at 50% -20%, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent 70%); } .page-hero h1 { margin-bottom: .3em; } .page-hero p { color: var(--text-muted); max-width: 640px; margin: 0 auto; } .page-hero .updated { font-size: .85rem; color: var(--text-faint); margin-top: 14px; } /* ========================================================================== 07. THE PREVIEWER TOOL ========================================================================== */ .tool { position: relative; margin-top: -46px; /* pulls the tool card up to overlap the hero */ z-index: 3; } .tool__panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; } .tool__form { display: flex; gap: 10px; flex-wrap: wrap; } .tool__form .input-wrap { position: relative; flex: 1 1 320px; min-width: 0; } .tool__form input[type="url"] { padding-left: 44px; height: 52px; } .tool__form .input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; } .tool__form .btn { height: 52px; } .tool__examples { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: .84rem; color: var(--text-faint); } .chip { font: inherit; font-size: .82rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); padding: 5px 11px; border-radius: var(--radius-pill); cursor: pointer; transition: border-color .16s ease, color .16s ease; } .chip:hover { border-color: var(--brand-500); color: var(--brand-600); } /* Status line under the form: loading spinner / error message */ .tool__status { margin-top: 16px; font-size: .92rem; display: none; } .tool__status.is-visible { display: block; } .tool__status.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); border-radius: var(--radius-sm); padding: 12px 15px; } .tool__status.is-loading { color: var(--text-muted); display: flex; align-items: center; gap: 10px; } .spinner { width: 17px; height: 17px; border: 2px solid var(--border-strong); border-top-color: var(--brand-500); border-radius: 50%; animation: spin .7s linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } /* Results wrapper — hidden until a URL has been analysed */ .results { display: none; margin-top: 30px; } .results.is-visible { display: block; animation: fadeUp .35s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .results__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--text-muted); } .results__meta .url { font-family: var(--font-mono); font-size: .82rem; word-break: break-all; color: var(--text); } .score { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 800; font-size: 1.05rem; padding: 6px 14px; border-radius: var(--radius-pill); color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--teal-500)); } .score small { font-weight: 600; font-size: .72rem; opacity: .9; } .score[data-grade="warn"] { background: linear-gradient(135deg, #f59e0b, #d97706); } .score[data-grade="bad"] { background: linear-gradient(135deg, #ef4444, #dc2626); } /* Tabs that switch between the four platform previews */ .tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 24px; } .tabs button { flex: 1 1 auto; font: inherit; font-size: .88rem; font-weight: 620; color: var(--text-muted); background: transparent; border: 0; border-radius: 7px; padding: 9px 12px; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; } .tabs button:hover { color: var(--text); } .tabs button[aria-selected="true"] { background: var(--surface); color: var(--brand-600); box-shadow: var(--shadow-sm); } [data-theme="dark"] .tabs button[aria-selected="true"] { color: var(--brand-300); } .tabpanel { display: none; } .tabpanel.is-active { display: block; animation: fadeUp .25s ease both; } .preview-stage { display: grid; place-items: center; padding: 30px 18px; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, repeating-linear-gradient(45deg, var(--border) 0 1px, transparent 1px 9px); border: 1px solid var(--border); border-radius: var(--radius); } .preview-stage__note { margin: 16px 0 0; font-size: .82rem; color: var(--text-faint); text-align: center; max-width: 460px; } /* ========================================================================== 08. SOCIAL SHARE CARD MOCKUPS Each mock deliberately hard-codes the host platform's own colours and type sizes so the preview looks like the real thing in both themes. ========================================================================== */ .mock { width: 100%; max-width: 524px; } .mock img { width: 100%; display: block; } .mock__img-wrap { position: relative; width: 100%; aspect-ratio: 1.91 / 1; background: #dfe3e8; overflow: hidden; } .mock__img-wrap img { width: 100%; height: 100%; object-fit: cover; } /* Fallback shown when og:image is missing or fails to load */ .mock__img-wrap.is-empty::after { content: "No og:image found"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: #6b7785; background: repeating-linear-gradient(45deg, #e6eaee 0 10px, #dde2e7 10px 20px); } .mock__img-wrap.is-empty img { display: none; } /* ---- Google search snippet ---- */ .g-snippet { width: 100%; max-width: 600px; font-family: Arial, sans-serif; background: #fff; border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow-sm); } [data-theme="dark"] .g-snippet { background: #1f1f1f; } .g-site { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; } .g-favicon { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; padding: 4px; object-fit: contain; border: 1px solid #ecedef; } [data-theme="dark"] .g-favicon { background: #303134; border-color: #3c4043; } .g-name { font-size: 14px; line-height: 1.2; color: #202124; } .g-url { font-size: 12px; line-height: 1.3; color: #4d5156; word-break: break-all; } [data-theme="dark"] .g-name { color: #e8eaed; } [data-theme="dark"] .g-url { color: #bdc1c6; } .g-title { font-family: Arial, sans-serif; font-size: 20px; line-height: 1.3; font-weight: 400; color: #1a0dab; margin: 0 0 4px; letter-spacing: 0; } .g-title:hover { text-decoration: underline; } [data-theme="dark"] .g-title { color: #8ab4f8; } .g-desc { font-size: 14px; line-height: 1.58; color: #4d5156; margin: 0; } [data-theme="dark"] .g-desc { color: #bdc1c6; } /* ---- Facebook card ---- */ .fb-card { border: 1px solid #dadde1; border-radius: 8px; overflow: hidden; font-family: Helvetica, Arial, sans-serif; background: #fff; box-shadow: var(--shadow-sm); } [data-theme="dark"] .fb-card { border-color: #3e4042; background: #242526; } .fb-body { background: #f2f3f5; padding: 10px 12px; border-top: 1px solid #dadde1; } [data-theme="dark"] .fb-body { background: #3a3b3c; border-top-color: #3e4042; } .fb-domain { font-size: 12px; line-height: 1.34; text-transform: uppercase; color: #606770; margin-bottom: 3px; letter-spacing: .02em; } .fb-title { font-size: 17px; line-height: 1.28; font-weight: 600; color: #050505; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fb-desc { font-size: 14px; line-height: 1.34; color: #606770; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } [data-theme="dark"] .fb-domain, [data-theme="dark"] .fb-desc { color: #b0b3b8; } [data-theme="dark"] .fb-title { color: #e4e6eb; } /* ---- X / Twitter card ---- */ .tw-card { border: 1px solid #cfd9de; border-radius: 16px; overflow: hidden; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #fff; box-shadow: var(--shadow-sm); } [data-theme="dark"] .tw-card { border-color: #2f3336; background: #000; } .tw-card .mock__img-wrap { border-bottom: 1px solid #cfd9de; } [data-theme="dark"] .tw-card .mock__img-wrap { border-bottom-color: #2f3336; } .tw-body { padding: 12px 14px; } .tw-domain { font-size: 14px; line-height: 1.3; color: #536471; margin-bottom: 2px; } .tw-title { font-size: 15px; line-height: 1.3; color: #0f1419; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .tw-desc { font-size: 15px; line-height: 1.3; color: #536471; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme="dark"] .tw-title { color: #e7e9ea; } [data-theme="dark"] .tw-domain, [data-theme="dark"] .tw-desc { color: #71767b; } /* "summary" (small) card variant — thumbnail on the left */ .tw-card.is-summary { display: flex; align-items: stretch; } .tw-card.is-summary .mock__img-wrap { width: 130px; flex: none; aspect-ratio: 1 / 1; border-bottom: 0; border-right: 1px solid #cfd9de; } [data-theme="dark"] .tw-card.is-summary .mock__img-wrap { border-right-color: #2f3336; } .tw-card.is-summary .tw-body { display: flex; flex-direction: column; justify-content: center; } /* ---- LinkedIn card ---- */ .li-card { border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.07); } [data-theme="dark"] .li-card { border-color: #38434f; background: #1b1f23; box-shadow: none; } .li-body { padding: 12px 14px; background: #fff; } [data-theme="dark"] .li-body { background: #1b1f23; } .li-title { font-size: 16px; line-height: 1.4; font-weight: 600; color: rgba(0,0,0,.9); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .li-domain { font-size: 12px; line-height: 1.33; color: rgba(0,0,0,.6); } [data-theme="dark"] .li-title { color: rgba(255,255,255,.9); } [data-theme="dark"] .li-domain { color: rgba(255,255,255,.6); } /* ========================================================================== 09. RAW META TABLE + WARNINGS ========================================================================== */ .subhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 34px 0 14px; } .subhead h3 { margin: 0; font-size: 1.12rem; } .checks { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; } .check { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); font-size: .92rem; margin: 0; } .check__icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; margin-top: 2px; } .check__body strong { display: block; margin-bottom: 2px; } .check__body span { color: var(--text-muted); font-size: .88rem; } .check--pass { border-color: color-mix(in srgb, var(--ok) 32%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); } .check--pass .check__icon { background: var(--ok); } .check--warn { border-color: color-mix(in srgb, var(--warn) 34%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); } .check--warn .check__icon { background: var(--warn); } .check--fail { border-color: color-mix(in srgb, var(--danger) 32%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); } .check--fail .check__icon { background: var(--danger); } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: .89rem; } table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } table.data thead th { background: var(--surface-2); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:hover { background: color-mix(in srgb, var(--brand-500) 5%, transparent); } table.data td.key { font-family: var(--font-mono); font-size: .82rem; color: var(--brand-600); white-space: nowrap; } [data-theme="dark"] table.data td.key { color: var(--brand-300); } table.data td.val { word-break: break-word; color: var(--text-muted); } table.data td.len { white-space: nowrap; color: var(--text-faint); font-variant-numeric: tabular-nums; } .empty-note { padding: 22px; text-align: center; color: var(--text-faint); font-size: .9rem; } /* ========================================================================== 10. CONTENT SECTIONS ========================================================================== */ .prose { max-width: 780px; } .prose h2 { margin-top: 1.9em; } .prose h3 { margin-top: 1.5em; } .prose > :first-child { margin-top: 0; } .prose ul li::marker { color: var(--brand-500); } .callout { border-left: 3px solid var(--brand-500); background: color-mix(in srgb, var(--brand-500) 7%, transparent); padding: 16px 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 26px 0; } .callout p:last-child { margin-bottom: 0; } .callout strong { color: var(--brand-700); } [data-theme="dark"] .callout strong { color: var(--brand-300); } /* Numbered "how to use" steps */ .steps { counter-reset: step; display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; } .steps li { counter-increment: step; position: relative; padding: 22px 24px 22px 68px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 0; } .steps li::before { content: counter(step); position: absolute; left: 22px; top: 21px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--brand-500), var(--teal-500)); color: #fff; font-weight: 800; font-size: .92rem; } .steps h3 { margin-bottom: .3em; font-size: 1.06rem; } .steps p:last-child { margin-bottom: 0; color: var(--text-muted); font-size: .95rem; } /* FAQ accordion */ .faq { display: grid; gap: 12px; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .18s ease; } .faq details[open] { border-color: color-mix(in srgb, var(--brand-500) 45%, transparent); } .faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; font-weight: 650; font-size: 1rem; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--brand-500); border-bottom: 2px solid var(--brand-500); transform: rotate(45deg); transition: transform .22s ease; } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq .faq__answer { padding: 0 22px 20px; color: var(--text-muted); } .faq .faq__answer > :last-child { margin-bottom: 0; } /* Call-to-action band */ .cta-band { background: linear-gradient(135deg, var(--brand-600), var(--teal-600)); color: #fff; border-radius: var(--radius-lg); padding: 46px 34px; text-align: center; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto 24px; } .cta-band .btn--ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; } .cta-band .btn--ghost:hover { background: rgba(255,255,255,.24); color: #fff; } /* ========================================================================== 11. CONTACT FORM ========================================================================== */ .contact-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 34px; align-items: start; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-note { margin-top: 14px; font-size: .84rem; color: var(--text-faint); } .form-alert { display: none; margin-bottom: 18px; padding: 13px 16px; border-radius: var(--radius-sm); font-size: .92rem; } .form-alert.is-visible { display: block; } .form-alert.is-success { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); } .form-alert.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } .info-list li { display: flex; gap: 14px; margin: 0; } .info-list .icon-badge { margin-bottom: 0; width: 40px; height: 40px; flex: none; } .info-list strong { display: block; font-size: .95rem; } .info-list span { color: var(--text-muted); font-size: .9rem; } /* ========================================================================== 12. SITE FOOTER + SOCIAL ICONS ========================================================================== */ .site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 58px 0 26px; margin-top: 70px; } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 36px; } .footer__grid h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } .footer__about p { color: var(--text-muted); font-size: .92rem; margin: 14px 0 0; max-width: 320px; } .footer__links { list-style: none; padding: 0; margin: 0; } .footer__links li { margin-bottom: 9px; } .footer__links a { color: var(--text-muted); text-decoration: none; font-size: .93rem; transition: color .16s ease, padding-left .16s ease; } .footer__links a:hover { color: var(--brand-600); padding-left: 3px; } /* Social icons — each animates to its official brand colour on hover */ .social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: transform .22s cubic-bezier(.2,.8,.3,1.2), background .28s ease, color .22s ease, border-color .22s ease, box-shadow .28s ease; } .social a svg { width: 19px; height: 19px; fill: currentColor; } .social a:hover { transform: translateY(-4px) scale(1.06); color: #fff; border-color: transparent; } .social a.s-facebook:hover { background: #1877F2; box-shadow: 0 8px 18px -8px #1877F2; } .social a.s-twitter:hover { background: #000000; box-shadow: 0 8px 18px -8px #000000; } [data-theme="dark"] .social a.s-twitter:hover { background: #ffffff; color: #000; box-shadow: 0 8px 18px -8px rgba(255,255,255,.6); } .social a.s-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 8px 18px -8px #d6249f; } .social a.s-youtube:hover { background: #FF0000; box-shadow: 0 8px 18px -8px #FF0000; } .social a.s-linkedin:hover { background: #0A66C2; box-shadow: 0 8px 18px -8px #0A66C2; } .footer__bottom { border-top: 1px solid var(--border); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .87rem; color: var(--text-faint); } .footer__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; } .footer__bottom a { color: var(--text-faint); text-decoration: none; } .footer__bottom a:hover { color: var(--brand-600); } /* ========================================================================== 13. RESPONSIVE ========================================================================== */ @media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; } .contact-grid { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .nav__burger { display: grid; } /* Mobile drop-down navigation */ .nav__links { position: absolute; left: 0; right: 0; top: 70px; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--gutter) 18px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); display: none; } .nav__links.is-open { display: flex; animation: fadeUp .2s ease both; } .nav__links a { padding: 12px 14px; font-size: 1rem; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .section { padding: 56px 0; } .hero { padding: 68px 0 64px; } .tool__panel { padding: 20px; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 620px) { body { font-size: 16px; } .grid-4 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .hero__stats { gap: 16px; font-size: .82rem; } /* Fewer, fainter floating shapes on small screens so they never compete with the headline or the buttons. */ .hero__shape { opacity: .45; } .hero__shape:nth-child(2), .hero__shape:nth-child(5) { display: none; } .tool__form .btn { width: 100%; } .tabs button { flex: 1 1 44%; } .preview-stage { padding: 18px 10px; } .tw-card.is-summary { display: block; } .tw-card.is-summary .mock__img-wrap { width: 100%; aspect-ratio: 1.91/1; border-right: 0; } .cta-band { padding: 34px 20px; } .steps li { padding: 20px 18px 20px 18px; } .steps li::before { position: static; margin-bottom: 12px; } } /* ========================================================================== 14. MEMBERSHIP — paywall, pricing, access key ========================================================================== */ /* The "locked" panel a non-member sees on a paid tool page */ .lock-panel { max-width: 620px; margin: 0 auto; text-align: center; padding: 44px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .lock-panel__icon { width: 68px; height: 68px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, var(--brand-500), var(--teal-500)); color: #fff; } .lock-panel__icon svg { width: 32px; height: 32px; } .lock-panel h2 { margin-bottom: .4em; } .lock-panel__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 26px 0 18px; } .lock-panel__note { font-size: .88rem; color: var(--text-faint); margin: 0; } /* Pricing card */ .price-card { max-width: 480px; margin: 0 auto; background: var(--surface); border: 2px solid color-mix(in srgb, var(--brand-500) 45%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .price-card__head { padding: 30px 30px 24px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 12%, transparent), color-mix(in srgb, var(--teal-500) 10%, transparent)); border-bottom: 1px solid var(--border); } .price-card__body { padding: 26px 30px 30px; } .price-tag { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 10px 0 6px; } .price-tag__amount { font-size: clamp(2.8rem, 8vw, 3.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg, var(--brand-500), var(--teal-500)); -webkit-background-clip: text; background-clip: text; color: transparent; } .price-tag__period { font-size: 1rem; color: var(--text-muted); font-weight: 600; } .price-card__sub { color: var(--text-muted); font-size: .95rem; margin: 0; } .price-features { list-style: none; padding: 0; margin: 0 0 24px; } .price-features li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; margin-bottom: 11px; } .price-features li::before { content: "✓"; flex: none; width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); font-size: .72rem; font-weight: 800; } .pay-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; font-size: .78rem; color: var(--text-faint); } .pay-badges span { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 11px; } /* The access key reveal */ .success-panel { display: none; } .success-panel.is-visible { display: block; animation: fadeUp .4s ease both; } .key-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 20px 0 14px; padding: 18px 20px; border-radius: var(--radius); border: 2px dashed color-mix(in srgb, var(--brand-500) 55%, transparent); background: color-mix(in srgb, var(--brand-500) 8%, transparent); } .key-box__value { font-family: var(--font-mono); font-size: clamp(1.05rem, 3.4vw, 1.5rem); font-weight: 700; letter-spacing: .06em; color: var(--brand-700); word-break: break-all; } [data-theme="dark"] .key-box__value { color: var(--brand-300); } .already-member { display: none; } .already-member.is-visible { display: block; } /* Small "locked / included" badge on tool cards */ .tool-card { position: relative; display: flex; flex-direction: column; } .tool-card .icon-badge { font-size: 1.3rem; } .tool-card h3 { margin-bottom: .4em; } .tool-card p { color: var(--text-muted); font-size: .95rem; flex: 1; } .tool-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; } /* ========================================================================== 15. THE PRO IMAGE TOOLS — shared UI ========================================================================== */ .tool-shell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 26px; } .tool-shell + .tool-shell { margin-top: 24px; } /* Drag-and-drop zone */ .dropzone { position: relative; border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 44px 24px; text-align: center; cursor: pointer; background: var(--surface-2); transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } .dropzone:hover, .dropzone.is-over { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 7%, var(--surface-2)); } .dropzone.is-over { transform: scale(1.01); } .dropzone input[type="file"] { display: none; } .dropzone__icon { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg, var(--brand-500), var(--teal-500)); color: #fff; } .dropzone__icon svg { width: 24px; height: 24px; } .dropzone strong { display: block; font-size: 1.05rem; margin-bottom: 5px; } .dropzone span { color: var(--text-muted); font-size: .9rem; } /* Control rows: sliders, selects, number boxes */ .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: 24px 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .control label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .85rem; font-weight: 650; margin-bottom: 8px; } .control label output { font-family: var(--font-mono); font-size: .82rem; font-weight: 700; color: var(--brand-600); } [data-theme="dark"] .control label output { color: var(--brand-300); } .control select, .control input[type="number"], .control input[type="text"] { padding: 10px 12px; font-size: .92rem; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--border-strong); outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; background: var(--brand-500); box-shadow: 0 2px 8px -2px rgba(16,185,129,.9); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; background: var(--brand-500); cursor: pointer; } /* Preset chip rows (aspect ratios, formats) */ .preset-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .preset { font: inherit; font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all .16s ease; } .preset:hover { border-color: var(--brand-500); color: var(--text); } .preset.is-active { background: linear-gradient(135deg, var(--brand-500), var(--teal-500)); border-color: transparent; color: #fff; } .tool-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); } .tool-actions .spacer { flex: 1; } /* Summary strip: files, total saved, etc. */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 20px 0; } .stat { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); text-align: center; } .stat b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .stat span { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } .stat.is-good b { color: var(--ok); } /* Result list for the batch compressor */ .file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .file-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); margin: 0; } .file-row__thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--border); border: 1px solid var(--border); } .file-row__name { font-weight: 600; font-size: .92rem; word-break: break-all; line-height: 1.35; } .file-row__meta { font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .file-row__meta .saved { color: var(--ok); font-weight: 700; } .file-row__meta .grew { color: var(--warn); font-weight: 700; } .file-row__actions { display: flex; gap: 8px; align-items: center; } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all .16s ease; } .icon-btn:hover { border-color: var(--brand-500); color: var(--brand-600); } .icon-btn svg { width: 16px; height: 16px; } /* Favicon size preview grid */ .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; } .icon-tile { text-align: center; padding: 16px 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .icon-tile__canvas { display: grid; place-items: center; height: 72px; margin-bottom: 10px; } .icon-tile img { image-rendering: -webkit-optimize-contrast; border-radius: 4px; box-shadow: var(--shadow-sm); } .icon-tile b { display: block; font-size: .8rem; font-variant-numeric: tabular-nums; } .icon-tile span { font-size: .72rem; color: var(--text-faint); } /* Cropper stage */ .crop-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; margin: 0 auto; touch-action: none; user-select: none; /* The crop box dims everything around itself with a 9999px box-shadow spread. Without this, that shadow escapes and greys out the whole page. Clipping it here is what confines the dimming to the image. */ overflow: hidden; background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 20px 20px; } .crop-stage img { max-width: 100%; display: block; pointer-events: none; } .crop-shade { position: absolute; inset: 0; background: rgba(4, 12, 18, .6); pointer-events: none; } .crop-box { position: absolute; box-shadow: 0 0 0 9999px rgba(4, 12, 18, .58); outline: 2px solid #fff; cursor: move; } /* Rule-of-thirds guides */ .crop-box::before, .crop-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; } .crop-box::before { background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px); background-size: 100% 33.333%, 100% 66.666%; } .crop-box::after { background-image: linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 33.333% 100%, 66.666% 100%; } /* Handles sit just INSIDE the crop box. They used to overhang it by 9px, which looked neater but got sliced in half by the stage's overflow clip whenever the box was flush against the edge of the image — which is most of the time, since that is where the box starts. */ .crop-handle { position: absolute; width: 16px; height: 16px; background: #fff; border: 2px solid var(--brand-600); border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); z-index: 2; } .crop-handle[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; } .crop-handle[data-h="ne"] { right: 0; top: 0; cursor: nesw-resize; } .crop-handle[data-h="sw"] { left: 0; bottom: 0; cursor: nesw-resize; } .crop-handle[data-h="se"] { right: 0; bottom: 0; cursor: nwse-resize; } .crop-handle[data-h="n"] { left: 50%; top: 0; margin-left: -8px; cursor: ns-resize; } .crop-handle[data-h="s"] { left: 50%; bottom: 0; margin-left: -8px; cursor: ns-resize; } .crop-handle[data-h="w"] { top: 50%; left: 0; margin-top: -8px; cursor: ew-resize; } .crop-handle[data-h="e"] { top: 50%; right: 0; margin-top: -8px; cursor: ew-resize; } .crop-readout { font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted); text-align: center; margin-top: 14px; } /* Generic tool status line */ .tool-note { display: none; margin-top: 16px; padding: 12px 15px; border-radius: var(--radius-sm); font-size: .9rem; } .tool-note.is-visible { display: block; } .tool-note.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); } .tool-note.is-info { color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); } .hidden { display: none !important; } @media (max-width: 620px) { .tool-shell { padding: 18px; } .dropzone { padding: 32px 16px; } .controls { padding: 16px; } .file-row { grid-template-columns: 44px 1fr; } .file-row__thumb { width: 44px; height: 44px; } .file-row__actions { grid-column: 1 / -1; justify-content: flex-end; } .nav__buy { display: none; } /* the mobile menu already has Pricing */ } /* ========================================================================== 16. MOTION + PRINT PREFERENCES ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { .site-header, .site-footer, .tool__form, .tabs, .hero__bg, .hero__shapes { display: none !important; } body { background: #fff; color: #000; } .card, .table-wrap { box-shadow: none; border-color: #ccc; } }