/* Styles for the server-rendered content sections and the standalone SEO pages (/models, /compare/-vs-). These sections exist because every page on the site used to ship an empty and let JavaScript fill it in. That left ~50 words of crawlable text per URL, and the AI crawlers that do not run JS saw nothing at all. The content is rendered server-side now — and rendered for everyone, not just crawlers, because serving Googlebot a different page than a person is cloaking. Tokens mirror the ones each site/*.html page declares inline, so a page that links this file alone still looks like comfyarts. Duplicated deliberately: the React shell at /studio/ does not load those inline blocks, and a --bg that resolves to nothing there would render black text on black. */ .seo-copy, .seo-page { --seo-bg: #070A14; --seo-surf: #0F121C; --seo-line: #262D3E; --seo-line2: #1B2130; --seo-text: #EDEFF8; --seo-t2: #9CA3BB; --seo-faint: #636A82; --seo-indigo: #818CF8; --seo-violet: #C084FC; --seo-teal: #2DD4BF; --seo-fd: "Fraunces", Georgia, serif; --seo-fs: "Inter", system-ui, -apple-system, sans-serif; --seo-fu: "Space Grotesk", var(--seo-fs); --seo-fm: "JetBrains Mono", ui-monospace, monospace; } /* ── the block injected below the studio app ─────────────────────────────────── */ .seo-copy { max-width: 800px; margin: 0 auto; padding: 56px 24px 88px; font-family: var(--seo-fs); color: var(--seo-t2); font-size: 16px; line-height: 1.72; border-top: 1px solid var(--seo-line2); } .seo-copy h1, .seo-page h1 { font-family: var(--seo-fd); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(1.9rem, 4.4vw, 2.7rem); color: var(--seo-text); margin: 0 0 10px; } .seo-copy h2, .seo-page h2 { font-family: var(--seo-fu); font-weight: 700; font-size: 1.14rem; letter-spacing: -0.01em; color: var(--seo-text); margin: 38px 0 12px; } .seo-tagline { font-family: var(--seo-fu); font-size: 1.02rem; font-weight: 600; color: var(--seo-violet); margin: 0 0 22px; line-height: 1.5; } .seo-copy p, .seo-page p { margin: 0 0 16px; } .seo-copy ul, .seo-page ul { margin: 0 0 16px; padding-left: 20px; } .seo-copy li, .seo-page li { margin-bottom: 7px; } .seo-copy a, .seo-page a { color: var(--seo-indigo); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .seo-copy a:hover, .seo-page a:hover { color: var(--seo-teal); } /* ── spec tables ─────────────────────────────────────────────────────────────── */ /* Wide tables scroll inside their own box rather than pushing the page sideways — the ratio row can carry fourteen values and phones are 375px. */ .seo-tablewrap { overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; } .seo-specs { width: 100%; border-collapse: collapse; font-size: 14.5px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--seo-line2); border-radius: 12px; } .seo-specs th, .seo-specs td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--seo-line2); vertical-align: top; } .seo-specs tr:last-child th, .seo-specs tr:last-child td { border-bottom: 0; } .seo-specs th { font-family: var(--seo-fu); font-weight: 600; color: var(--seo-faint); white-space: nowrap; width: 1%; } .seo-specs td { color: var(--seo-text); } .seo-specs thead th { color: var(--seo-text); font-size: 15px; width: auto; border-bottom: 1px solid var(--seo-line); } /* The rows where two models actually differ — the reason a comparison page exists. */ .seo-specs tr.differs td { color: var(--seo-teal); } .seo-note { font-size: 13px; color: var(--seo-faint); line-height: 1.6; } /* ── FAQ ─────────────────────────────────────────────────────────────────────── */ .seo-faq { margin: 0 0 8px; } .seo-faq dt { font-family: var(--seo-fu); font-weight: 600; color: var(--seo-text); margin: 18px 0 6px; } .seo-faq dd { margin: 0; } .seo-links { list-style: none; padding: 0; } .seo-links li { margin-bottom: 8px; } /* ── standalone pages (/models, /compare/...) ────────────────────────────────── */ .seo-page { max-width: 860px; margin: 0 auto; padding: 52px 24px 88px; font-family: var(--seo-fs); color: var(--seo-t2); font-size: 16px; line-height: 1.72; } .seo-kicker { font-family: var(--seo-fu); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--seo-violet); margin: 0 0 14px; } .seo-crumb { font-size: 13px; color: var(--seo-faint); margin: 0 0 18px; } /* Two-up "choose this one if" panels on a comparison page. */ .seo-verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0 8px; } @media (max-width: 660px) { .seo-verdict { grid-template-columns: 1fr; } } .seo-verdict > div { border: 1px solid var(--seo-line2); background: rgba(255, 255, 255, 0.03); border-radius: 14px; padding: 18px; } .seo-verdict h3 { font-family: var(--seo-fu); font-size: 14px; font-weight: 700; color: var(--seo-teal); margin: 0 0 10px; } .seo-verdict ul { margin: 0; padding-left: 18px; font-size: 14.5px; } /* Model index grid. */ .seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; } .seo-grid li { margin: 0; } .seo-grid a { display: block; height: 100%; border: 1px solid var(--seo-line2); background: rgba(255, 255, 255, 0.03); border-radius: 14px; padding: 15px 16px; text-decoration: none; color: inherit; transition: border-color 0.18s, transform 0.18s; } .seo-grid a:hover { border-color: var(--seo-indigo); transform: translateY(-2px); } .seo-grid strong { display: block; font-family: var(--seo-fu); font-size: 15px; color: var(--seo-text); margin-bottom: 4px; } .seo-grid span { font-size: 13.5px; color: var(--seo-t2); display: block; } .seo-grid em { display: block; font-family: var(--seo-fm); font-style: normal; font-size: 12px; color: var(--seo-teal); margin-top: 8px; } .seo-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--seo-fu); font-weight: 600; font-size: 14.5px; background: #F4F5FF; color: #070A14; padding: 11px 20px; border-radius: 11px; text-decoration: none; margin: 6px 10px 6px 0; } .seo-cta:hover { color: #070A14; text-decoration: none; } .seo-cta.ghost { background: transparent; color: var(--seo-text); border: 1px solid var(--seo-line); } @media (prefers-reduced-motion: reduce) { .seo-grid a { transition: none; } } /* ── restoring page scroll where a content section was injected ────────────────── The studio's own stylesheet pins the app to the viewport: html, body, #root { height: 100% } body { overflow: hidden } which is right for an app and wrong for a page with an article under it. Without this the injected section sits below a viewport that cannot scroll — in the HTML, invisible to a person. Serving a crawler content a user cannot reach is cloaking, so the section and this override ship together or not at all. `has-seo-copy` is set by services/seo.py only on the pages that carry a section, so the plain studio routes keep their fixed-viewport layout. The id selector gives these rules higher specificity than the app's, so load order does not matter. */ html.has-seo-copy, html.has-seo-copy body { height: auto; overflow: visible; } html.has-seo-copy #root { height: auto; min-height: 100dvh; } /* The prompt on an artwork page, when the prompt is public. Monospace because it is a literal string somebody may want to copy, not prose. */ .seo-prompt { font-family: var(--seo-fm); font-size: 14px; line-height: 1.65; color: var(--seo-text); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--seo-line2); border-left: 2px solid var(--seo-violet); border-radius: 10px; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; }