/* SEO Pages — scoped brand tokens + mockup styles Loaded only when is present (SEO landing pages and the /ai-tools hub). Layout, typography, sections, buttons, grids, FAQ accordion, related grid, hero text column, CTA band and footer are all Tailwind utilities in the ERB; this file is *only* mockup specifics + a handful of layout classes that don't translate cleanly to utilities. */ .seo-pages-scope { --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-300:#93c5fd; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-900:#111827; --amber-100:#fef3c7; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --green-500:#22c55e; --green-600:#16a34a; --indigo-600:#4f46e5; --font-mono:"JetBrains Mono",ui-monospace,monospace; --shadow-doc:0 1px 2px rgba(17,24,39,.05), 0 40px 80px -40px rgba(17,24,39,.3), 0 16px 32px -16px rgba(17,24,39,.15); --shadow-hero:0 1px 2px rgba(17,24,39,.04), 0 30px 60px -30px rgba(17,24,39,.18); --shadow-sm:0 1px 3px rgba(0,0,0,0.04); --shadow-md:0 4px 6px -1px rgba(0,0,0,0.05); } /* Hero stage frame */ .seo-pages-scope .stage{ border-radius:24px; padding:16px; background:linear-gradient(180deg,#fbfcfe 0%,#f6f8fb 100%); border:1px solid var(--gray-200); box-shadow:var(--shadow-hero); position:relative; } .seo-pages-scope .stage-bar{ display:flex; align-items:center; gap:12px; padding:2px 6px 12px; border-bottom:1px dashed var(--gray-200); margin-bottom:16px; font-family:ui-monospace,monospace; font-size:11.5px; color:var(--gray-500); } .seo-pages-scope .stage-bar .ct{ color:var(--gray-700); font-weight:500; } .seo-pages-scope .stage-bar .rt{ margin-left:auto; } .seo-pages-scope .stage-pane{ position:relative; min-height:330px; border-radius:16px; background:radial-gradient(ellipse 70% 70% at 50% 25%, rgba(37,99,235,.06), transparent 60%), linear-gradient(180deg,#fff,#f9fafb); border:1px solid var(--gray-200); overflow:hidden; display:grid; place-items:center; padding:26px; } .seo-pages-scope .mk-stamp{ position:absolute; top:16px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--gray-700); background:#fff; border:1px solid var(--gray-200); border-radius:9999px; padding:6px 13px; box-shadow:var(--shadow-sm); z-index:6; } .seo-pages-scope .mk-stamp .pulse{ width:8px; height:8px; border-radius:50%; background:var(--green-500); animation:seo-stamp-pulse 1.8s ease-in-out infinite; } @keyframes seo-stamp-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,.45); } 50%{ box-shadow:0 0 0 6px rgba(34,197,94,0); } } /* Generic mockup sheet */ .seo-pages-scope .sheet{ background:#fff; border:1px solid var(--gray-200); border-radius:10px; box-shadow:var(--shadow-doc); padding:22px; width:300px; } .seo-pages-scope .mk{ width:300px; } .seo-pages-scope .mk-lines{ display:flex; flex-direction:column; gap:7px; } .seo-pages-scope .mk-line{ height:6px; border-radius:3px; background:var(--gray-100); } .seo-pages-scope .mk-line.s{ width:60%; } .seo-pages-scope .mk-line.m{ width:80%; } .seo-pages-scope .mk-line.b{ background:var(--blue-100); } .seo-pages-scope .mk-eyebrow{ font-size:8px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue-600); } /* invoice */ .seo-pages-scope .mk-invoice{ padding:22px; } .seo-pages-scope .mk-invoice .top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; } .seo-pages-scope .mk-invoice .biz{ font-size:15px; font-weight:700; letter-spacing:-0.01em; } .seo-pages-scope .mk-invoice .meta{ font-size:9px; color:var(--gray-500); margin-top:3px; } .seo-pages-scope .mk-invoice .tag{ font-family:var(--font-mono); font-size:9px; color:var(--gray-400); text-align:right; } .seo-pages-scope .mk-invoice .row{ display:flex; justify-content:space-between; font-size:10px; color:var(--gray-600); border-bottom:1px dashed var(--gray-200); padding:7px 0; } .seo-pages-scope .mk-invoice .row b{ color:var(--gray-900); font-weight:600; font-family:var(--font-mono); } .seo-pages-scope .mk-invoice .total{ margin-top:12px; font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--gray-900); display:flex; justify-content:space-between; padding-top:10px; border-top:2px solid var(--gray-900); } /* resume */ .seo-pages-scope .mk-resume{ padding:22px; } .seo-pages-scope .mk-resume .name{ font-size:17px; font-weight:700; letter-spacing:-0.01em; } .seo-pages-scope .mk-resume .role{ font-size:10px; color:var(--blue-600); font-weight:500; margin:2px 0 14px; } .seo-pages-scope .mk-resume .h6{ font-size:8px; font-weight:700; color:var(--gray-900); letter-spacing:0.08em; text-transform:uppercase; margin:12px 0 7px; padding-bottom:5px; border-bottom:1px solid var(--gray-200); } /* certificate */ .seo-pages-scope .mk-cert{ padding:24px; border:2px solid var(--amber-500); position:relative; text-align:center; } .seo-pages-scope .mk-cert::after{ content:''; position:absolute; inset:7px; border:1px solid var(--amber-400); border-radius:6px; pointer-events:none; } .seo-pages-scope .mk-cert .ribbon{ width:34px; height:34px; border-radius:50%; background:var(--amber-100); color:var(--amber-600); display:grid; place-items:center; margin:0 auto 12px; } .seo-pages-scope .mk-cert .ttl{ font-size:9px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-600); } .seo-pages-scope .mk-cert .nm{ font-size:20px; font-weight:700; letter-spacing:-0.01em; margin:10px 0 8px; font-family:Georgia,serif; } .seo-pages-scope .mk-cert .desc{ font-size:9.5px; color:var(--gray-500); line-height:1.5; max-width:200px; margin:0 auto; } .seo-pages-scope .mk-cert .sig{ display:flex; justify-content:space-between; margin-top:18px; gap:20px; } .seo-pages-scope .mk-cert .sig .col{ flex:1; } .seo-pages-scope .mk-cert .sig .ln{ height:1px; background:var(--gray-300); margin-bottom:4px; } .seo-pages-scope .mk-cert .sig .lb{ font-size:7px; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.06em; } /* brochure / poster */ .seo-pages-scope .mk-poster{ padding:0; overflow:hidden; } .seo-pages-scope .mk-poster .band{ padding:24px 22px; color:#fff; background:linear-gradient(140deg,var(--blue-600),var(--indigo-600)); } .seo-pages-scope .mk-poster.warm .band{ background:linear-gradient(140deg,var(--amber-500),var(--amber-600)); } .seo-pages-scope .mk-poster .kick{ font-size:8px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:.85; } .seo-pages-scope .mk-poster .big{ font-size:25px; font-weight:800; line-height:1.04; letter-spacing:-0.02em; margin:9px 0; } .seo-pages-scope .mk-poster .sub{ font-size:10px; opacity:.9; } .seo-pages-scope .mk-poster .body{ padding:18px 22px; } .seo-pages-scope .mk-poster .meta-row{ display:flex; gap:8px; font-size:9px; color:var(--gray-500); margin-top:12px; } .seo-pages-scope .mk-poster .chip{ background:var(--gray-100); border-radius:5px; padding:4px 8px; font-weight:500; color:var(--gray-700); } /* pitch deck (slide) */ .seo-pages-scope .mk-slide{ padding:0; overflow:hidden; aspect-ratio:4/3; display:flex; flex-direction:column; } .seo-pages-scope .mk-slide .scr{ background:var(--gray-900); color:#fff; flex:1; padding:22px; display:flex; flex-direction:column; } .seo-pages-scope .mk-slide .pg{ font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,.45); } .seo-pages-scope .mk-slide .stat{ font-size:40px; font-weight:800; letter-spacing:-0.03em; margin:auto 0 6px; background:linear-gradient(90deg,#fff,var(--blue-300)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .seo-pages-scope .mk-slide .cap{ font-size:11px; color:rgba(255,255,255,.7); } .seo-pages-scope .mk-slide .bars{ display:flex; gap:6px; align-items:flex-end; height:50px; margin-top:14px; } .seo-pages-scope .mk-slide .bars i{ flex:1; background:var(--blue-500); border-radius:2px 2px 0 0; opacity:.9; } /* proposal / contract / cover letter */ .seo-pages-scope .mk-doc{ padding:24px; } .seo-pages-scope .mk-doc .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--gray-200); } .seo-pages-scope .mk-doc .head .ti{ font-size:14px; font-weight:700; letter-spacing:-0.01em; } .seo-pages-scope .mk-doc .head .badge{ font-size:8px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--blue-600); background:var(--blue-50); padding:3px 8px; border-radius:5px; } .seo-pages-scope .mk-doc .sign{ display:flex; gap:24px; margin-top:18px; } .seo-pages-scope .mk-doc .sign .col{ flex:1; } .seo-pages-scope .mk-doc .sign .ln{ height:1px; background:var(--gray-300); margin-bottom:4px; } .seo-pages-scope .mk-doc .sign .lb{ font-size:7.5px; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.06em; } /* batch / csv → pdf */ .seo-pages-scope .mk-batch{ width:320px; padding:22px; } .seo-pages-scope .mk-batch .csv{ border:1px solid var(--gray-200); border-radius:8px; overflow:hidden; margin-bottom:16px; } .seo-pages-scope .mk-batch .csv .hd{ display:flex; background:var(--gray-50); border-bottom:1px solid var(--gray-200); } .seo-pages-scope .mk-batch .csv .hd span{ flex:1; font-family:var(--font-mono); font-size:8px; font-weight:600; color:var(--gray-500); padding:6px 8px; text-transform:uppercase; letter-spacing:.04em; } .seo-pages-scope .mk-batch .csv .tr{ display:flex; border-bottom:1px solid var(--gray-100); } .seo-pages-scope .mk-batch .csv .tr:last-child{ border-bottom:0; } .seo-pages-scope .mk-batch .csv .tr span{ flex:1; font-size:9px; color:var(--gray-600); padding:5px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .seo-pages-scope .mk-batch .flow{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--gray-400); margin-bottom:14px; } .seo-pages-scope .mk-batch .flow svg{ color:var(--blue-600); } .seo-pages-scope .mk-batch .stack{ position:relative; height:74px; } .seo-pages-scope .mk-batch .pdf{ position:absolute; left:50%; top:0; width:84px; height:66px; background:#fff; border:1px solid var(--gray-200); border-radius:6px; box-shadow:var(--shadow-md); padding:8px; } .seo-pages-scope .mk-batch .pdf .pl{ height:3px; background:var(--gray-100); border-radius:2px; margin-bottom:4px; } .seo-pages-scope .mk-batch .pdf .pl.b{ background:var(--blue-100); width:60%; } .seo-pages-scope .mk-batch .pdf:nth-child(1){ transform:translateX(-66px) rotate(-7deg); } .seo-pages-scope .mk-batch .pdf:nth-child(2){ transform:translateX(-42px) rotate(0deg); z-index:2; } .seo-pages-scope .mk-batch .pdf:nth-child(3){ transform:translateX(-18px) rotate(7deg); } .seo-pages-scope .mk-batch .badge-n{ position:absolute; right:6px; top:-6px; background:var(--blue-600); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:600; padding:4px 9px; border-radius:9999px; z-index:5; box-shadow:var(--shadow-sm); } /* webpage mockup */ .seo-pages-scope .mk-web{ padding:0; overflow:hidden; } .seo-pages-scope .mk-web .bar{ display:flex; align-items:center; gap:5px; padding:9px 12px; border-bottom:1px solid var(--gray-200); background:var(--gray-50); } .seo-pages-scope .mk-web .bar i{ width:8px; height:8px; border-radius:50%; background:var(--gray-300); } .seo-pages-scope .mk-web .bar .url{ margin-left:8px; font-family:var(--font-mono); font-size:8px; color:var(--gray-400); background:#fff; border:1px solid var(--gray-200); border-radius:5px; padding:3px 8px; flex:1; } .seo-pages-scope .mk-web .hero{ padding:24px 22px; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,.08), transparent); } .seo-pages-scope .mk-web .hero .h{ font-size:18px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; } .seo-pages-scope .mk-web .hero .p{ font-size:10px; color:var(--gray-500); margin-top:8px; line-height:1.5; } .seo-pages-scope .mk-web .hero .b{ display:inline-block; margin-top:12px; background:var(--blue-600); color:#fff; font-size:9px; font-weight:600; padding:7px 14px; border-radius:7px; } /* Anatomy figure */ .seo-pages-scope .anatomy{ margin:42px 0 0; display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:48px; align-items:center; } .seo-pages-scope .anatomy-doc{ display:flex; justify-content:center; align-items:center; padding:32px; background:linear-gradient(160deg,#fbfcfe,#f6f8fb); border:1px solid var(--gray-200); border-radius:24px; box-shadow:var(--shadow-hero); } .seo-pages-scope .anatomy-doc .mk{ transform:scale(1.04); } .seo-pages-scope .anatomy-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; } .seo-pages-scope .anatomy-legend li{ display:flex; gap:16px; align-items:flex-start; } .seo-pages-scope .an-n{ flex-shrink:0; width:30px; height:30px; border-radius:9999px; background:var(--blue-600); color:#fff; font-family:ui-monospace,monospace; font-size:13px; font-weight:600; display:grid; place-items:center; box-shadow:0 0 0 4px rgba(37,99,235,0.10); } .seo-pages-scope .anatomy-legend h4{ font-size:16px; font-weight:600; letter-spacing:-0.01em; margin:3px 0 5px; color:var(--gray-900); } .seo-pages-scope .anatomy-legend p{ font-size:14.5px; line-height:1.55; color:var(--gray-600); margin:0; } .seo-pages-scope .anatomy figcaption{ grid-column:1 / -1; margin-top:34px; padding-top:18px; border-top:1px solid var(--gray-200); font-size:13.5px; color:var(--gray-500); text-align:center; } @media (max-width:820px){ .seo-pages-scope .anatomy{ grid-template-columns:1fr; gap:30px; } .seo-pages-scope .anatomy figcaption{ margin-top:8px; } } /* In-practice example */ .seo-pages-scope .example-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:42px; align-items:start; } .seo-pages-scope .ex-prompt{ background:var(--gray-900); color:#fff; border-radius:16px; padding:22px 24px; box-shadow:var(--shadow-md); } .seo-pages-scope .ex-prompt .lab{ font-family:ui-monospace,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--blue-300); display:flex; align-items:center; gap:8px; margin-bottom:14px; } .seo-pages-scope .ex-prompt p{ font-size:15.5px; line-height:1.62; margin:0; color:rgba(255,255,255,.94); } .seo-pages-scope .ex-out-h{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-500); margin-bottom:16px; } .seo-pages-scope .ex-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; } .seo-pages-scope .ex-list li{ display:flex; gap:12px; font-size:15px; color:var(--gray-700); line-height:1.5; } .seo-pages-scope .ex-list li svg{ color:var(--green-600); flex-shrink:0; margin-top:3px; } @media (max-width:760px){ .seo-pages-scope .example-wrap{ grid-template-columns:1fr; gap:22px; } } /* Comparison table */ .seo-pages-scope .cmp{ margin-top:48px; border:1px solid var(--gray-200); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); } .seo-pages-scope .cmp table{ width:100%; border-collapse:collapse; font-size:14.5px; } .seo-pages-scope .cmp th, .seo-pages-scope .cmp td{ text-align:left; padding:16px 22px; border-bottom:1px solid var(--gray-200); vertical-align:top; } .seo-pages-scope .cmp thead th{ background:var(--gray-50); font-weight:600; font-size:13px; color:var(--gray-700); } .seo-pages-scope .cmp thead th.us{ color:var(--blue-700); } .seo-pages-scope .cmp tbody tr:last-child td{ border-bottom:0; } .seo-pages-scope .cmp td .yes{ color:var(--green-600); font-weight:600; display:inline-flex; align-items:center; gap:7px; } .seo-pages-scope .cmp td .no{ color:var(--gray-400); display:inline-flex; align-items:center; gap:7px; } .seo-pages-scope .cmp .col-us{ background:rgba(37,99,235,.035); } /* Breadcrumb */ .seo-pages-scope .crumb{ font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.02em; color:var(--gray-500); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .seo-pages-scope .crumb a:hover{ color:var(--gray-700); } .seo-pages-scope .crumb .sep{ color:var(--gray-300); } .seo-pages-scope .crumb .here{ color:var(--gray-700); } @media (prefers-reduced-motion: reduce){ .seo-pages-scope *{ animation:none !important; } }