/* ========================================================================== 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. 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; } /* 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. 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; } }