/* ========================================================================= /tools/ai-crawler-impact-report/ · Salience house style ------------------------------------------------------------------------- Shipped from this repo and linked LAST in by deploy/refresh_static_chrome.py, after the framework sheet, carl-extras.css and the product build's page-overrides block. Selectors match the live generated markup (plus the blocks in deploy/inject/ and the rewrites in deploy/rewrites/), so every id, class and handler the page JS binds to is untouched. Anatomy, matching the solution pages: · hero on the full-bleed green field, breadcrumb, h1, sub, mono note, the upload zone as the paper card on the right · dark band of the recognised AI crawlers (injected) · explainer tiles in the open grid (injected), results, FAQ (injected) · results as the app renders them: the grey field, white cards with an 8px radius and a hairline frame, table heads as the pale green band, tinted category chips, the robots.txt block as the app's black pre; the closing CTA as the black FinalCta band The page markup sits inside one centred container, so the full-bleed fields are painted by pseudo-elements 100vw wide, centred on the container. carl-extras forces border-radius:0 on everything in .cp-main; the CTA pills, the accent tiles and the hero card take their radius back with !important, nothing else does. Every var() carries a hard fallback. ========================================================================= */ .cp-main { --tool-ink: var(--color-ink, #000000); --tool-paper: var(--color-paper, #ffffff); --tool-accent: var(--color-accent, #8cf37a); --tool-accent-deep: var(--color-accent-deep, #5fdc55); --tool-accent-2: var(--color-accent-2, #8ff6ff); --tool-accent-ink: var(--color-accent-ink, #2c7a2c); --tool-alert: var(--color-alert, #ff7a5c); --tool-alert-ink: var(--color-alert-ink, #c2452a); --tool-warn: var(--color-warn, #8a5a0a); --tool-muted: var(--color-muted, #6b6b6b); --tool-hairline: var(--color-hairline, #e6e6e6); --tool-soft: var(--color-accent-soft, #f9f8f9); --tool-invert: var(--color-ink-invert, #f9f8f9); /* the app's grey field and the hairline frame its cards sit in */ --tool-field: #f9f8f9; --tool-frame: rgba(0, 0, 0, 0.1); --tool-display: var(--font-display, "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); --tool-mono: var(--font-mono, "IBM Plex Mono","SFMono-Regular",Consolas,monospace); --tool-sans: var(--font-sans, "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); --tool-ease: var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)); /* the 100vw fields below overhang the scrollbar on some platforms */ overflow-x: clip; } .cp-main *, .cp-main *::before, .cp-main *::after { box-sizing: border-box; margin: 0; padding: 0; } .cp-main a { color: var(--tool-accent-ink); text-decoration: none; } .cp-main a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } /* microlabel register, used throughout */ .cp-main .tool-band-label, .cp-main th, .cp-main .robots-header span, .cp-main .upload-zone::before, .cp-main .upload-zone::after { font-family: var(--tool-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tool-muted); } /* ------------------------------------------------------------------------- Container: a two-column grid. Row 1 the breadcrumb, row 2 the hero copy and the upload card side by side, everything after spans both columns. The ::before is the green field: it fills rows 1-2, is 100vw wide, and runs up behind the transparent header as on the solution pages. ------------------------------------------------------------------------- */ .cp-main .tool-container { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 3rem; align-items: center; padding-top: 0; padding-bottom: 0; } .cp-main .tool-container > * { grid-column: 1 / -1; min-width: 0; } .cp-main .tool-container::before { content: ""; grid-column: 1 / -1; grid-row: 1 / 3; align-self: stretch; justify-self: stretch; width: 100vw; margin-left: calc(50% - 50vw); margin-top: -12rem; background: var(--tool-accent); z-index: -1; } /* Breadcrumb: Home / Tools / page. carl-extras hides it; shown here. */ .cp-main .breadcrumb { grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 2.75rem; padding-bottom: 2rem; font-family: var(--tool-sans); font-size: 0.72rem; line-height: 1.4; color: rgba(0, 0, 0, 0.6); } .cp-main .breadcrumb > svg { display: none; } .cp-main .breadcrumb > svg + a::before, .cp-main .breadcrumb > svg + span::before { content: "/"; margin-right: 0.5rem; } .cp-main .breadcrumb > a { color: inherit; transition: color 0.2s; } .cp-main .breadcrumb > a:hover { color: var(--tool-ink); text-decoration: none; } .cp-main .breadcrumb > span:last-child { color: var(--tool-ink); } /* Hero copy */ .cp-main .tool-hero { grid-column: 1; grid-row: 2; padding: 0; margin: 0 0 2.5rem; } .cp-main .tool-hero h1 { font-family: var(--tool-display); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.16; max-width: 24ch; margin: 0; text-transform: none; text-wrap: balance; color: var(--tool-ink); } .cp-main .tool-hero h1 span { color: inherit !important; background: none !important; } .cp-main .tool-hero p { margin: 1.25rem 0 0; max-width: 38rem; font-family: var(--tool-sans); font-size: 0.9375rem; line-height: 1.75; color: rgba(0, 0, 0, 0.75); } .cp-main .tool-hero p.tool-note { margin-top: 1.5rem; max-width: 34rem; font-size: 0.7rem; line-height: 1.6; color: rgba(0, 0, 0, 0.7); } /* ------------------------------------------------------------------------- Upload zone: the hero's paper card. Head row (green dot, label, the log formats on the right) is drawn by the pseudo-elements so the generated markup stays as it is; the drop area sits under it. ------------------------------------------------------------------------- */ .cp-main .upload-zone { grid-column: 2; grid-row: 2; justify-self: end; width: 100%; max-width: 30rem; margin: 0 0 2.5rem; position: relative; background: var(--tool-paper); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 8px !important; overflow: hidden; padding: 5.5rem 2rem 2.25rem; text-align: center; cursor: pointer; transition: border-color 0.25s, background 0.25s; } .cp-main .upload-zone::before { content: "Log file"; position: absolute; top: 0; left: 0; right: 0; height: 2.75rem; display: flex; align-items: center; padding-left: 2.1rem; border-bottom: 1px solid var(--tool-hairline); font-size: 0.625rem; letter-spacing: 0.08em; color: var(--tool-ink); background: radial-gradient(circle, var(--tool-accent-deep) 0 3px, transparent 3.5px) 1rem 50% / 7px 7px no-repeat; } .cp-main .upload-zone::after { content: "Apache · Nginx · CloudFront"; position: absolute; top: 0; right: 1rem; height: 2.75rem; display: flex; align-items: center; font-size: 0.5625rem; letter-spacing: 0.06em; } .cp-main .upload-zone:hover, .cp-main .upload-zone.dragover { border-color: var(--tool-accent-deep); background: rgba(140, 243, 122, 0.08); } .cp-main .upload-zone.dragover { border-style: dashed; } .cp-main .upload-zone > svg { display: block; width: 30px; height: 30px; color: var(--tool-ink); stroke-width: 1.5; margin: 0 auto 1rem; } .cp-main .upload-zone h3 { font-family: var(--tool-display); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; color: var(--tool-ink); margin: 0 0 0.45rem; } .cp-main .upload-zone p { font-family: var(--tool-sans); font-size: 0.72rem; line-height: 1.6; color: var(--tool-muted); margin: 0 auto 1.4rem; max-width: 26rem; } .cp-main .file-info { font-family: var(--tool-mono); font-size: 0.72rem; line-height: 1.5; color: var(--tool-accent-ink); margin-top: 1rem; word-break: break-all; } .cp-main .file-info:empty { display: none; } .cp-main #file-input { display: none; } /* The CtaSolid pill: solid label cell, arrow cell on the opposite field. The arrow cell is the ::after, with negative margins cancelling the label padding, so the single element keeps its own accessible name. */ .cp-main .upload-btn, .cp-main .cta-btn { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--tool-ink); border-radius: 8px !important; background: var(--tool-ink); color: var(--tool-paper); padding: 0.875rem 1.5rem; font-family: var(--tool-sans); font-size: 0.9rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform 0.18s; } .cp-main .upload-btn::after, .cp-main .cta-btn::after { content: "\2192"; position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; width: 3.5rem; margin: -0.875rem -1.5rem -0.875rem 1.5rem; background: var(--tool-paper); color: var(--tool-ink); border-left: 1px solid var(--tool-ink); transition: background 0.3s var(--tool-ease), color 0.3s; } .cp-main .upload-btn:hover, .cp-main .cta-btn:hover { text-decoration: none; color: var(--tool-paper); } .cp-main .upload-btn:hover::after, .cp-main .cta-btn:hover::after { background: var(--tool-accent); color: var(--tool-ink); } .cp-main .upload-btn:active, .cp-main .cta-btn:active { transform: scale(0.98); } .cp-main .upload-btn:focus-visible, .cp-main .cta-btn:focus-visible { outline: 2px solid var(--tool-accent-deep); outline-offset: 2px; } /* ------------------------------------------------------------------------- Progress: green fill on a hairline track, mono label. ------------------------------------------------------------------------- */ .cp-main .progress-container { display: none; padding: 2rem 0 0.5rem; } .cp-main .progress-container.active { display: block; } .cp-main .progress-label { font-family: var(--tool-sans); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--tool-muted); margin-bottom: 0.6rem; } .cp-main .progress-bar { width: 100%; height: 4px; overflow: hidden; background: var(--tool-hairline); } .cp-main .progress-fill { height: 100%; width: 0; background: var(--tool-accent-deep); transition: width 0.3s var(--tool-ease); } /* ------------------------------------------------------------------------- Full-bleed fields painted from inside the container: the dark crawler band and the closing CTA. Same 100vw technique as the hero. ------------------------------------------------------------------------- */ .cp-main .tool-band, .cp-main .cta-box { position: relative; } .cp-main .tool-band::before, .cp-main .cta-box::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--color-surface-dark, #000000); z-index: -1; } /* Dark band: one microlabel and a row of white marks with display labels */ .cp-main .tool-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem 3rem; padding: 1.25rem 0 1.4rem; color: var(--tool-invert); } .cp-main .tool-band-label { width: 100%; text-align: center; line-height: 1.6; color: rgba(244, 244, 243, 0.55); } .cp-main .tool-band-marks { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.25rem; } .cp-main .tool-band-marks li { display: flex; align-items: center; gap: 0.5rem; } .cp-main .tool-band-marks img { width: auto; object-fit: contain; display: block; filter: invert(1); } .cp-main .tool-band-marks img.tool-band-remote { filter: brightness(0) invert(1); } .cp-main .tool-band-marks span { font-family: var(--tool-display); font-size: 0.82rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--tool-invert); } /* Eight marks fill the row at 1180, so the label stays a centred line above them at every width (the house band's own below-xl layout). */ /* ------------------------------------------------------------------------- Section headings (results and injected blocks). carl-extras rules the result h2s with a hairline; the tables carry their own rules here. ------------------------------------------------------------------------- */ .cp-main .tool-explainer h2, .cp-main .tool-faq h2 { font-family: var(--tool-display); font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; color: var(--tool-ink); margin: 0 0 1.5rem; padding: 0; border: 0; max-width: 24ch; } /* ------------------------------------------------------------------------- Explainer: the open grid. One rule above, whitespace between columns, green accent tile with a pixel glyph on each title row. ------------------------------------------------------------------------- */ .cp-main .tool-explainer { margin-top: 5rem; } .cp-main .tool-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; border-top: 1px solid var(--tool-hairline); padding-top: 1.75rem; } .cp-main .tool-tile { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 1.75rem; } .cp-main .tool-tile-head { display: flex; align-items: center; gap: 0.75rem; } .cp-main .tool-tile h3 { font-family: var(--tool-display); font-size: 1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; color: var(--tool-ink); } .cp-main .tool-tile p { font-family: var(--tool-sans); font-size: 0.85rem; line-height: 1.7; color: rgba(0, 0, 0, 0.75); } .cp-main .tool-glyph { display: grid; grid-template-columns: repeat(3, 4px); gap: 2px; place-content: center; width: 28px; height: 28px; flex-shrink: 0; background: var(--tool-accent); border-radius: 6px !important; } .cp-main .tool-glyph i { display: block; width: 4px; height: 4px; } .cp-main .tool-glyph i.on { background: var(--tool-ink); } /* ------------------------------------------------------------------------- FAQ (injected after #results inside the container) ------------------------------------------------------------------------- */ .cp-main .tool-faq { margin-top: 5rem; padding-bottom: 5rem; } .cp-main .tool-faq-list { border-top: 1px solid var(--tool-hairline); } .cp-main .tool-faq details { border-bottom: 1px solid var(--tool-hairline); } .cp-main .tool-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-family: var(--tool-display); font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; color: var(--tool-ink); } .cp-main .tool-faq summary::-webkit-details-marker { display: none; } .cp-main .tool-faq-mark { flex-shrink: 0; font-family: var(--tool-sans); font-size: 1.25rem; line-height: 1; color: var(--tool-accent-ink); } .cp-main .tool-faq-mark::before { content: "+"; } .cp-main .tool-faq details[open] .tool-faq-mark::before { content: "\2013"; } .cp-main .tool-faq details p { max-width: 80ch; padding-bottom: 1.5rem; font-family: var(--tool-sans); font-size: 0.8rem; line-height: 1.8; color: var(--tool-muted); } /* ------------------------------------------------------------------------- Results: the app's screen. The grey field is painted full-bleed behind the results (same 100vw technique as the hero), every section is a white card with the 8px radius and hairline frame the app uses, the card title is the h2, and tables carry the pale green head band. ------------------------------------------------------------------------- */ .cp-main .results { display: none; position: relative; margin-top: 5rem; padding-top: 2.5rem; } .cp-main .results.active { display: block; } .cp-main .results::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--tool-field); border-top: 1px solid var(--tool-hairline); z-index: -1; } /* Cards */ .cp-main .result-section { margin-bottom: 1.25rem; scroll-margin-top: 7rem; background: var(--tool-paper); border: 1px solid var(--tool-frame); border-radius: 8px !important; overflow: hidden; } .cp-main .result-section h2 { font-family: var(--tool-sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--tool-ink); margin: 0; padding: 1rem 1.25rem; border: 0; max-width: none; } /* Summary: the app's KPI cards */ .cp-main .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; border: 0; padding: 0; margin-bottom: 1.25rem; } .cp-main .summary-card { background: var(--tool-paper); border: 1px solid var(--tool-frame); border-radius: 8px !important; padding: 1.1rem 1.25rem 1.2rem; } .cp-main .summary-card .label { font-family: var(--tool-sans); font-size: 0.78rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.4; color: rgba(0, 0, 0, 0.6); margin-bottom: 0.55rem; } .cp-main .summary-card .value { font-family: var(--tool-sans); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--tool-ink); } .cp-main .summary-card .sub { font-family: var(--tool-sans); font-size: 0.75rem; line-height: 1.5; color: var(--tool-muted); margin-top: 0.35rem; } .cp-main .val-cyan, .cp-main .val-rose, .cp-main .val-emerald { color: var(--tool-ink); } .cp-main .val-amber { color: var(--tool-accent-ink); } /* the AI share */ /* "Other bots detected": the card title with the toggle beside it */ .cp-main #other-bots-section h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; cursor: pointer; } .cp-main #other-bots-toggle { font-family: var(--tool-sans) !important; font-size: 0.75rem !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tool-accent-ink) !important; margin-left: 0 !important; text-decoration: none; text-underline-offset: 3px; } .cp-main #other-bots-section h2:hover #other-bots-toggle { text-decoration: underline; } /* Tables: the app's head band, hairline rows, Inter figures, mono paths */ .cp-main .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cp-main table { width: 100%; min-width: 640px; border-collapse: collapse; border: 0; background: transparent; font-family: var(--tool-sans); font-size: 0.8rem; line-height: 1.5; text-align: left; } .cp-main th { padding: 0.6rem 1rem; background: rgba(140, 243, 122, 0.15); border-bottom: 1px solid var(--tool-hairline); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(0, 0, 0, 0.6); cursor: pointer; white-space: nowrap; user-select: none; transition: color 0.2s; } .cp-main th:first-child, .cp-main td:first-child { padding-left: 1.25rem; } .cp-main th:last-child, .cp-main td:last-child { padding-right: 1.25rem; } .cp-main th:not([data-sort]) { cursor: default; } .cp-main th:hover, .cp-main th.sort-asc, .cp-main th.sort-desc { color: var(--tool-ink); } .cp-main th .sort-arrow { font-size: 0.5rem; } .cp-main td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--tool-hairline); color: rgba(0, 0, 0, 0.75); vertical-align: middle; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; transition: color 0.2s, background 0.2s; } .cp-main tbody tr:last-child td { border-bottom: 0; } .cp-main tbody tr:hover td { background: rgba(140, 243, 122, 0.06); color: var(--tool-ink); } .cp-main td strong { font-family: var(--tool-sans); font-size: 0.85rem; font-weight: 500; letter-spacing: -0.01em; color: var(--tool-ink); } /* the figure columns */ .cp-main th:nth-child(n + 3):not(:nth-child(7)), .cp-main td:nth-child(n + 3):not(:nth-child(7)) { text-align: right; } /* the top-paths cell carries inline monospace/11px styling from the product */ .cp-main #breakdown-table td:nth-child(7) { font-family: var(--tool-mono) !important; font-size: 0.72rem !important; color: var(--tool-muted); max-width: 240px !important; } /* Category chips, the app's tints: AI crawlers amber, search blue, social purple, monitoring green, scrapers coral, the rest neutral */ .cp-main .cat-badge { display: inline-flex; align-items: center; font-family: var(--tool-sans); font-size: 0.6rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border: 0; border-radius: 4px !important; white-space: nowrap; font-variant-numeric: tabular-nums; } .cp-main .cat-ai { background: #f6ecd6; color: var(--tool-warn); } .cp-main .cat-search { background: #e8f1fd; color: #1d5fb8; } .cp-main .cat-social { background: #f1e9fb; color: #6b3fa0; } .cp-main .cat-monitor { background: rgba(140, 243, 122, 0.25); color: var(--tool-accent-ink); } .cp-main .cat-scraper { background: rgba(255, 122, 92, 0.15); color: var(--tool-alert-ink); } .cp-main .cat-other { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.6); } /* ------------------------------------------------------------------------- Crawl timeline, inside its card. The bars and legend dots take their colour from inline styles the page JS writes (Tailwind hexes, one per crawler). They are re-mapped here onto the app's own series palette, the one the AI Crawlers screen draws its stacked bars with, one colour per crawler in the order the demo lists them. Three rare crawlers reuse a colour because the palette has ten slots for thirteen signatures. ------------------------------------------------------------------------- */ .cp-main .chart-container { background: transparent; border: 0; padding: 0.25rem 1.25rem 1.25rem; } .cp-main .chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 180px; } .cp-main .chart-bar-group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; height: 100%; justify-content: flex-end; } .cp-main .chart-bar { min-width: 3px; border-bottom: 1px solid var(--tool-paper); background-clip: padding-box; transition: opacity 0.2s; } .cp-main .chart-bar:first-of-type { border-radius: 2px 2px 0 0 !important; } .cp-main .chart-bar:last-of-type { border-bottom: 0; } .cp-main .chart-bar:hover { opacity: 0.7; } .cp-main .chart-label { font-family: var(--tool-sans); font-size: 0.62rem; letter-spacing: 0; color: var(--tool-muted); margin-top: 0.6rem; white-space: nowrap; text-align: center; height: 14px; line-height: 14px; flex-shrink: 0; width: 0; overflow: visible; } .cp-main .chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--tool-hairline); font-family: var(--tool-sans); font-size: 0.72rem; color: rgba(0, 0, 0, 0.75); } .cp-main .chart-legend-item { display: flex; align-items: center; gap: 0.4rem; } .cp-main .chart-legend-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50% !important; } .cp-main .chart-bar[style*="#a855f7"], .cp-main .chart-legend-dot[style*="#a855f7"] { background: #0b0b0b !important; } /* GPTBot */ .cp-main .chart-bar[style*="#f97316"], .cp-main .chart-legend-dot[style*="#f97316"] { background: #5fdc55 !important; } /* ClaudeBot */ .cp-main .chart-bar[style*="#3b82f6"], .cp-main .chart-legend-dot[style*="#3b82f6"] { background: #2c7a2c !important; } /* PerplexityBot */ .cp-main .chart-bar[style*="#9333ea"], .cp-main .chart-legend-dot[style*="#9333ea"] { background: #ff7a5c !important; } /* ChatGPT User */ .cp-main .chart-bar[style*="#64748b"], .cp-main .chart-legend-dot[style*="#64748b"] { background: #6b6b6b !important; } /* CCBot */ .cp-main .chart-bar[style*="#ef4444"], .cp-main .chart-legend-dot[style*="#ef4444"] { background: #16757d !important; } /* ByteSpider */ .cp-main .chart-bar[style*="#f59e0b"], .cp-main .chart-legend-dot[style*="#f59e0b"] { background: #f0b357 !important; } /* Amazonbot */ .cp-main .chart-bar[style*="#c084fc"], .cp-main .chart-legend-dot[style*="#c084fc"] { background: #b35c8a !important; } /* OpenAI SearchBot */ .cp-main .chart-bar[style*="#6366f1"], .cp-main .chart-legend-dot[style*="#6366f1"] { background: #3d3d3d !important; } /* Meta AI */ .cp-main .chart-bar[style*="#94a3b8"], .cp-main .chart-legend-dot[style*="#94a3b8"] { background: #2f9e7a !important; } /* Applebot */ .cp-main .chart-bar[style*="#ea580c"], .cp-main .chart-legend-dot[style*="#ea580c"] { background: #2c7a2c !important; } /* Claude Web (shares) */ .cp-main .chart-bar[style*="#d97706"], .cp-main .chart-legend-dot[style*="#d97706"] { background: #f0b357 !important; } /* Anthropic (shares) */ .cp-main .chart-bar[style*="#10b981"], .cp-main .chart-legend-dot[style*="#10b981"] { background: #2f9e7a !important; } /* Cohere AI (shares) */ /* ------------------------------------------------------------------------- Most requested paths: the app's top-paths list, mono path, count right ------------------------------------------------------------------------- */ .cp-main .path-list { list-style: none; border: 0; background: transparent; } .cp-main .path-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 1.25rem; border-top: 1px solid var(--tool-hairline); font-family: var(--tool-mono); font-size: 0.78rem; transition: background 0.2s; } .cp-main .path-item:hover { background: rgba(140, 243, 122, 0.06); } .cp-main .path-name { color: var(--tool-ink); word-break: break-all; } .cp-main .path-count { font-family: var(--tool-sans); font-size: 0.75rem; color: var(--tool-muted); white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ------------------------------------------------------------------------- Generated robots.txt: the app's code block, black with an 8px radius, inside the card ------------------------------------------------------------------------- */ .cp-main .robots-block { margin: 0 1.25rem; background: #000000; border: 0; overflow: hidden; border-radius: 8px !important; } .cp-main .robots-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid rgba(249, 248, 249, 0.15); } .cp-main .robots-header span { font-family: var(--tool-mono); font-size: 0.68rem; letter-spacing: 0; text-transform: none; color: rgba(249, 248, 249, 0.6); } .cp-main .copy-btn { background: transparent; color: rgba(249, 248, 249, 0.9); border: 1px solid rgba(249, 248, 249, 0.25); border-radius: 6px !important; padding: 0.3rem 0.7rem; font-family: var(--tool-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .cp-main .copy-btn:hover { background: var(--tool-accent); color: var(--tool-ink); border-color: var(--tool-accent); } .cp-main .robots-code { padding: 1.1rem; font-family: var(--tool-mono); font-size: 0.78rem; line-height: 1.7; color: rgba(249, 248, 249, 0.9); white-space: pre-wrap; max-height: 400px; overflow-y: auto; } .cp-main .robots-note { font-family: var(--tool-sans); font-size: 0.75rem; line-height: 1.6; color: var(--tool-muted); padding: 1rem 1.25rem 1.25rem; max-width: none; } /* ------------------------------------------------------------------------- Closing CTA: the FinalCta black band. Heading, note and the check list on the left, the inverted pill on the right. ------------------------------------------------------------------------- */ .cp-main .cta-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; row-gap: 0; align-items: center; margin-top: 5rem; padding: 5rem 0; background: transparent; border: 0; color: var(--tool-invert); text-align: left; } .cp-main .cta-box h2 { grid-column: 1; font-family: var(--tool-display); font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; max-width: 620px; margin: 0; color: var(--tool-invert); } .cp-main .cta-box p { grid-column: 1; font-family: var(--tool-sans); font-size: 0.875rem; line-height: 1.75; color: rgba(249, 248, 249, 0.7); margin: 0.75rem 0 0; max-width: 52ch; } .cp-main .cta-features { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 1.5rem 0 0; font-family: var(--tool-sans); font-size: 0.75rem; letter-spacing: -0.01em; } .cp-main .cta-feature { display: flex; align-items: center; gap: 0.5rem; color: rgba(249, 248, 249, 0.8); } .cp-main .cta-feature svg { width: 12px; height: 12px; color: var(--tool-accent); stroke-width: 2.5; flex-shrink: 0; } /* the inverted pill: paper label cell, dark arrow cell */ .cp-main .cta-btn { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; border-color: var(--tool-paper); background: var(--tool-paper); color: var(--tool-ink); } .cp-main .cta-btn::after { background: var(--color-surface-dark, #000000); color: var(--tool-paper); border-left-color: var(--tool-paper); } .cp-main .cta-btn:hover { color: var(--tool-ink); } .cp-main .cta-btn:hover::after { background: var(--tool-accent); color: var(--tool-ink); } /* ------------------------------------------------------------------------- Pre-results closing CTA (injected after the FAQ): the FinalCta black band with real two-cell markup. The product's own .cta-box closes the results, so this one leaves once results render and there is never a second band. ------------------------------------------------------------------------- */ .cp-main .results.active ~ .tool-final-cta { display: none; } .cp-main .tool-final-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3rem; padding: 5rem 0; color: var(--tool-invert); } .cp-main .tool-final-cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--color-surface-dark, #000000); z-index: -1; } .cp-main .tool-final-cta h2 { font-family: var(--tool-display); font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; max-width: 620px; margin: 0; color: var(--tool-invert); } .cp-main .tool-final-cta p { font-family: var(--tool-sans); font-size: 0.875rem; line-height: 1.75; color: rgba(249, 248, 249, 0.7); margin: 0.75rem 0 0; max-width: 52ch; } .cp-main .tool-final-cta-copy { flex: 1 1 24rem; min-width: 0; } .cp-main .tool-final-cta-actions { flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .cp-main .tool-cta-solid { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--tool-paper); border-radius: 8px !important; font-family: var(--tool-sans); font-size: 0.9rem; letter-spacing: -0.02em; line-height: 1.25; color: var(--tool-ink); text-decoration: none; transition: transform 0.18s; } .cp-main .tool-cta-solid:hover { text-decoration: none; } .cp-main .tool-cta-solid:active { transform: scale(0.98); } .cp-main .tool-cta-solid > span:first-child { display: flex; align-items: center; white-space: nowrap; padding: 0.875rem 1.5rem; background: var(--tool-paper); color: var(--tool-ink); } .cp-main .tool-cta-solid > span:last-child { display: flex; align-items: center; justify-content: center; width: 3.5rem; border-left: 1px solid var(--tool-paper); background: var(--color-surface-dark, #000000); color: var(--tool-paper); transition: background 0.3s var(--tool-ease), color 0.3s; } .cp-main .tool-cta-solid:hover > span:last-child { background: var(--tool-accent); color: var(--tool-ink); } .cp-main .tool-cta-stroke { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border: 1px solid rgba(249, 248, 249, 0.55); border-radius: 8px !important; padding: 0.875rem 1.5rem; font-family: var(--tool-sans); font-size: 0.9rem; letter-spacing: -0.02em; line-height: 1.25; color: var(--tool-invert); text-decoration: none; transition: background 0.2s, color 0.2s; } .cp-main .tool-cta-stroke:hover { background: var(--tool-invert); color: var(--tool-ink); text-decoration: none; } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (min-width: 1024px) { .cp-main .tool-hero h1 { font-size: clamp(1.9rem, 2.65vw, 2.5rem); } .cp-main .breadcrumb { padding-top: 3rem; } } @media (max-width: 1023px) { /* single column: breadcrumb, copy, then the card */ .cp-main .tool-container { grid-template-columns: minmax(0, 1fr); } .cp-main .tool-container::before { grid-row: 1 / 4; } .cp-main .tool-hero { grid-column: 1; grid-row: 2; margin-bottom: 2rem; } .cp-main .upload-zone { grid-column: 1; grid-row: 3; justify-self: start; margin-bottom: 2.5rem; } .cp-main .tool-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-main .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .cp-main .cta-box { grid-template-columns: minmax(0, 1fr); } .cp-main .cta-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 2rem; } } @media (max-width: 639px) { .cp-main .tool-tiles { grid-template-columns: minmax(0, 1fr); } .cp-main .upload-zone { padding: 5.25rem 1.25rem 2rem; } .cp-main .upload-zone::after { content: "Apache · Nginx · CloudFront"; font-size: 0.5rem; right: 0.75rem; } .cp-main .chart-bars { height: 120px; } .cp-main .results { margin-top: 3.5rem; padding-top: 1.5rem; } .cp-main .result-section h2 { font-size: 0.95rem; padding: 0.85rem 1rem; } .cp-main .summary-card { padding: 0.9rem 1rem 1rem; } .cp-main .summary-card .value { font-size: 1.5rem; } .cp-main th:first-child, .cp-main td:first-child { padding-left: 1rem; } .cp-main th:last-child, .cp-main td:last-child { padding-right: 1rem; } .cp-main .chart-container { padding: 0.25rem 1rem 1rem; } .cp-main .path-item, .cp-main .robots-note { padding-left: 1rem; padding-right: 1rem; } .cp-main .robots-block { margin: 0 1rem; } .cp-main .cta-box, .cp-main .tool-final-cta { padding: 3.5rem 0; } .cp-main .cta-features { flex-direction: column; gap: 0.6rem; } .cp-main .tool-band { gap: 0.75rem 2rem; padding: 1.25rem 0 1.5rem; } .cp-main .tool-band-marks { gap: 0.9rem 1.5rem; } /* Half the time labels at this width, whichever spacing the script chose (every 4th bucket for hourly data, every 6th for daily). */ .cp-main .chart-label { font-size: 0.55rem; } .cp-main .chart-bar-group:nth-child(8n + 5) .chart-label, .cp-main .chart-bar-group:nth-child(12n + 7) .chart-label { visibility: hidden; } /* The closing band's buttons fill the width, one under the other. */ .cp-main .tool-final-cta-actions { flex-direction: column; align-items: stretch; width: 100%; } .cp-main .tool-cta-solid, .cp-main .tool-cta-stroke { display: flex; width: 100%; } .cp-main .tool-cta-solid > span:first-child { flex: 1; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .cp-main * { transition-duration: 0.01ms !important; } } /* ========================================================================= Lead-magnet modal ("The complete guide to log analysis") ------------------------------------------------------------------------- Emitted inline by the product build with every declaration as a style attribute, then re-coloured by its