/* Dermatouch SEO Analyzer — Notion design language: warm paper canvas, near-black Inter, one confident blue, hairline surfaces, a decorative-only multi-colour accent. */ :root { --primary: #0075de; --primary-active: #005bab; --primary-tint: #eaf4fe; --primary-tint-border: #cfe6fb; --secondary: #213183; --on-primary: #ffffff; --canvas: #ffffff; --canvas-soft: #f6f5f4; --surface: #ffffff; --ink: #1a1a1a; --ink-secondary: #31302e; --ink-muted: #615d59; --ink-faint: #a39e98; --hairline: #e6e6e6; --accent-purple: #d6b6f6; --accent-pink: #ff64c8; --accent-orange: #dd5b00; --accent-teal: #2a9d99; --accent-green: #1aae39; --accent-sky: #62aef0; --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 9999px; --shadow-1: 0 .175px 1.041px rgba(0,0,0,.01), 0 .8px 2.925px rgba(0,0,0,.02), 0 2.025px 7.847px rgba(0,0,0,.027), 0 4px 18px rgba(0,0,0,.04); --shadow-2: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06), 0 24px 56px rgba(0,0,0,.06); } /* ---------- Dark theme (toggled via [data-theme="dark"] on ) ---------- */ html[data-theme="dark"] { --primary: #4ea3f5; --primary-active: #74b8f8; --primary-tint: #16314a; --primary-tint-border: #28547d; --secondary: #9db8ff; --on-primary: #06121d; --canvas: #212429; --canvas-soft: #16171a; --surface: #212429; --ink: #ededed; --ink-secondary: #cbc9c6; --ink-muted: #a6a29c; --ink-faint: #6f6b66; --hairline: #34373c; --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.4); --shadow-2: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.5); } /* Overrides for the few hardcoded (non-token) colors */ html[data-theme="dark"] .nav { background: rgba(22,23,26,.85); } html[data-theme="dark"] .nav .logo { filter: brightness(0) invert(1); } /* dark logo → white */ html[data-theme="dark"] textarea#links { border-color: #3a3d42; } html[data-theme="dark"] .banner-error { background: var(--surface); } html[data-theme="dark"] .badge-post { background: #2a2342; color: #cbabf2; } html[data-theme="dark"] .badge-post .dot { background: #cbabf2; } html[data-theme="dark"] .badge-error { background: #3a1f1e; color: #f0a8a3; } html[data-theme="dark"] .badge-error .dot { background: #f0a8a3; } html[data-theme="dark"] .score-high { background: #173524; color: #7ed79b; } html[data-theme="dark"] .score-high .dot { background: #7ed79b; } html[data-theme="dark"] .score-mid { background: #3a2f15; color: #f0c073; } html[data-theme="dark"] .score-mid .dot { background: #f0c073; } html[data-theme="dark"] .score-low { background: #3a1f1e; color: #f0a8a3; } html[data-theme="dark"] .score-low .dot { background: #f0a8a3; } * { box-sizing: border-box; } /* Smooth the swap between themes */ body, .nav, .input-card, textarea#links, .result-card, .rc-head, .rc-tabs, .chip, .pill, .kv, .script, .s-text, .source-text, .cta, footer.foot, .theme-toggle { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--canvas-soft); color: var(--ink); font-family: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* decorative multi-colour top strip (sticker palette — decoration only) */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50; background: linear-gradient(90deg, var(--accent-sky), var(--accent-purple), var(--accent-pink), var(--accent-orange), var(--accent-teal), var(--accent-green)); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 3px; z-index: 20; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.85); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--hairline); padding: 16px 32px; } .nav .logo { height: 38px; width: auto; display: block; } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-tag { font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-muted); background: var(--canvas-soft); border: 1px solid var(--hairline); padding: 6px 12px; border-radius: var(--r-full); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; cursor: pointer; color: var(--ink-secondary); background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-full); transition: background .15s ease, color .15s ease, transform .08s ease; } .theme-toggle:hover { color: var(--ink); background: var(--surface); } .theme-toggle:active { transform: scale(.94); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* ---------- Layout ---------- */ .wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; } .hero { padding: 64px 0 8px; } .eyebrow-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--primary); background: var(--primary-tint); border: 1px solid var(--primary-tint-border); padding: 5px 12px; border-radius: var(--r-full); margin-bottom: 18px; } .eyebrow-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .hero h1 { font-size: 50px; font-weight: 700; line-height: 1.04; letter-spacing: -1.8px; margin: 0 0 14px; max-width: 18ch; } .hero .sub { color: var(--ink-muted); font-size: 18px; margin: 0; max-width: 60ch; line-height: 1.5; } /* ---------- Input card ---------- */ .input-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2xl); box-shadow: var(--shadow-1); padding: 28px; margin-top: 32px; } .input-card label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; } .input-card label strong { color: var(--primary); font-weight: 700; } textarea#links { width: 100%; min-height: 120px; resize: vertical; border: 1px solid #dcdcdc; border-radius: var(--r-md); padding: 14px 16px; font: inherit; font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--canvas); transition: border-color .15s ease, box-shadow .15s ease; } textarea#links::placeholder { color: var(--ink-faint); } textarea#links:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); } .actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-full); padding: 11px 24px; transition: transform .08s ease, background .15s ease, box-shadow .15s ease; } .btn:active { transform: scale(.96); } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(0,117,222,.35); } .btn-primary:hover { background: var(--primary-active); } .btn-primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--hairline); box-shadow: var(--shadow-1); } .btn-secondary:hover { background: var(--canvas-soft); } .hint { color: var(--ink-faint); font-size: 14px; } /* More specific than `.input-card label` so it isn't forced to block/uppercase. */ .input-card label.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-muted); font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; margin-bottom: 0; user-select: none; } .input-card label.check input { accent-color: var(--primary); width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer; } /* ---------- Status / errors ---------- */ .status { margin: 22px 0 0; color: var(--ink-muted); font-size: 15px; display: none; } .status.show { display: flex; align-items: center; gap: 10px; } .spinner { width: 17px; height: 17px; border: 2px solid var(--hairline); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .banner-error { background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--accent-orange); border-radius: var(--r-md); padding: 12px 16px; color: var(--ink-secondary); margin: 16px 0; font-size: 15px; } /* ---------- Results ---------- */ .results-bar { display: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 36px 0 4px; } .results-bar.show { display: flex; } .results-bar h2 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin: 0; } .results-bar .summary { color: var(--ink-muted); font-size: 14px; margin-top: 2px; } .results { padding: 16px 0 72px; display: flex; flex-direction: column; gap: 24px; } .result-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden; animation: rise .35s cubic-bezier(.2,.7,.3,1) both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .rc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 26px; border-bottom: 1px solid var(--hairline); background: var(--canvas); } /* Tabbed cards: the tab strip provides the divider, so drop the head's line. */ .result-card.tabbed .rc-head { border-bottom: none; padding-bottom: 12px; } /* ---------- Per-card tabs (sectioned content, less scrolling) ---------- */ .rc-tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 0 26px; background: var(--canvas); border-bottom: 1px solid var(--hairline); } .tab { appearance: none; background: none; border: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-muted); cursor: pointer; padding: 12px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; transition: color .15s ease, border-color .15s ease; } .tab:hover { color: var(--ink); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); } .tab-count { font-size: 11px; font-weight: 700; line-height: 1; background: var(--primary-tint); color: var(--primary); border-radius: var(--r-full); padding: 3px 7px; } .rc-panel { display: none; } .rc-panel.active { display: flex; flex-direction: column; gap: 22px; } .source-text { white-space: pre-wrap; font-size: 15px; line-height: 1.6; color: var(--ink-secondary); background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px 16px; max-height: 380px; overflow: auto; } .rc-head .url { font-size: 14px; font-weight: 500; word-break: break-all; flex: 1; min-width: 200px; color: var(--ink-secondary); } .rc-metrics { display: flex; gap: 8px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-full); padding: 5px 12px; font-size: 13px; color: var(--ink-secondary); } .chip b { color: var(--ink); font-weight: 600; } .chip svg { width: 14px; height: 14px; opacity: .7; } .rc-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 22px; } .badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; border-radius: var(--r-full); padding: 5px 12px; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; } .badge-reel { background: var(--primary-tint); color: var(--primary); } .badge-reel .dot { background: var(--primary); } .badge-post { background: #f3eefb; color: #6b3fa0; } .badge-post .dot { background: #9a6fd0; } .badge-error { background: #fdecec; color: #b3261e; } .badge-error .dot { background: #b3261e; } /* sections */ .section .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 9px; } .section p.body { margin: 0; color: var(--ink-secondary); font-size: 15px; } .pills { display: flex; flex-wrap: wrap; gap: 7px; } .pill { font-size: 13px; border-radius: var(--r-full); padding: 5px 11px; background: var(--canvas-soft); color: var(--ink-secondary); border: 1px solid var(--hairline); } .pill-tag { color: var(--ink-secondary); } .pill-suggest { background: var(--primary-tint); color: var(--primary); border-color: var(--primary-tint-border); font-weight: 500; } .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; } .kv .section .eyebrow { color: var(--ink-muted); } /* scripts */ .scripts { display: flex; flex-direction: column; gap: 16px; } .script { border: 1px solid var(--hairline); border-left: 3px solid var(--primary); border-radius: var(--r-md); background: var(--canvas); padding: 18px 20px; box-shadow: var(--shadow-1); } .script .s-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .s-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; flex: none; } .script .s-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; } .script .s-angle { font-size: 12px; color: var(--ink-muted); background: var(--canvas-soft); border: 1px solid var(--hairline); padding: 3px 9px; border-radius: var(--r-full); } .script .s-text { font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; margin: 10px 0 14px; padding: 12px 14px; background: var(--canvas-soft); border-radius: var(--r-sm); } .script .s-sub { display: flex; flex-direction: column; gap: 12px; } .script .s-why { font-size: 14px; color: var(--ink-muted); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hairline); } .script .s-why b { color: var(--ink-secondary); } details.collapse { border-top: 1px solid var(--hairline); padding-top: 16px; } details.collapse > summary { cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-muted); list-style: none; user-select: none; } details.collapse > summary::-webkit-details-marker { display: none; } details.collapse > summary::before { content: "▸"; color: var(--ink-faint); margin-right: 6px; display: inline-block; } details.collapse[open] > summary::before { content: "▾"; } details.collapse .collapse-body { margin-top: 12px; color: var(--ink-secondary); font-size: 15px; line-height: 1.6; white-space: pre-wrap; } .empty { color: var(--ink-faint); font-size: 14px; } /* ---------- Engagement score badge ---------- */ .score-badge { letter-spacing: 0; } .score-badge .score-of { font-weight: 500; opacity: .6; margin-left: 1px; } .score-high { background: #e7f7ec; color: #137a32; } .score-high .dot { background: var(--accent-green); } .score-mid { background: #fff4e0; color: #9a5b00; } .score-mid .dot { background: var(--accent-orange); } .score-low { background: #fdecec; color: #b3261e; } .score-low .dot { background: #b3261e; } /* ---------- Pending (streaming) card ---------- */ .result-card.pending .rc-head { background: var(--canvas-soft); } .badge-pending { background: var(--canvas-soft); color: var(--ink-muted); border: 1px solid var(--hairline); text-transform: none; letter-spacing: .3px; } .badge-pending .spinner { width: 12px; height: 12px; border-width: 2px; } .pending-note { margin: 0; color: var(--ink-faint); font-size: 14px; } /* ---------- Hashtag reach tiers ---------- */ .tiers { display: flex; flex-direction: column; gap: 12px; } .tier { display: flex; flex-direction: column; gap: 6px; } .tier-label { font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--ink-muted); text-transform: uppercase; } /* ---------- Call-to-action block ---------- */ .cta { background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .cta-row { display: flex; gap: 10px; align-items: baseline; } .cta-label { flex: none; width: 64px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); padding-top: 1px; } .cta-label-strong { color: var(--primary); } .cta-text { font-size: 15px; color: var(--ink-secondary); } .cta-text.muted { color: var(--ink-faint); font-style: italic; } .cta-text.strong { color: var(--ink); font-weight: 600; } /* per-script CTA line + score alignment */ .script .s-cta { font-size: 14px; color: var(--ink-secondary); margin: 0 0 14px; padding: 8px 12px; background: var(--primary-tint); border: 1px solid var(--primary-tint-border); border-radius: var(--r-sm); } .script .s-cta b { color: var(--primary); } .script .s-head .score-badge { margin-left: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .result-card { animation: none; } } footer.foot { background: var(--canvas-soft); border-top: 1px solid var(--hairline); color: var(--ink-secondary); font-size: 14px; padding: 32px; text-align: center; } @media (max-width: 640px) { .hero { padding: 40px 0 4px; } .hero h1 { font-size: 34px; letter-spacing: -1px; } .hero .sub { font-size: 16px; } .wrap, .nav { padding-left: 18px; padding-right: 18px; } .input-card { padding: 20px; } .rc-head, .rc-body, .rc-tabs { padding-left: 18px; padding-right: 18px; } .tab { padding: 11px 10px; font-size: 13px; } }