diff --git a/public/assets/extension-detection.png b/public/assets/extension-detection.png
new file mode 100644
index 000000000..cfe3c9b89
Binary files /dev/null and b/public/assets/extension-detection.png differ
diff --git a/public/css/main.css b/public/css/main.css
index 9b173f253..2709df9a9 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1343,32 +1343,36 @@ code {
background: white;
}
-/* Details sidebar */
+/* Details sidebar — editorial blocks, no cards.
+ The live detection overlay (left iframe) is the visual anchor for the
+ whole section; the right column should be quiet text + a single image
+ for the Chrome extension CTA. Hierarchy via typography + space, not
+ bordered containers. */
.visual-mode-details {
display: flex;
flex-direction: column;
- gap: var(--spacing-md);
+ gap: var(--spacing-xl);
+ padding: var(--spacing-md) 0;
}
.visual-mode-feature {
- padding: var(--spacing-md);
- background: white;
- border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
}
.visual-mode-feature-label {
display: block;
font-family: var(--font-mono);
- font-size: 0.625rem;
+ font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
- margin-bottom: var(--spacing-xs);
}
.visual-mode-feature p {
- font-size: 0.8125rem;
+ font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-charcoal);
margin: 0;
@@ -1376,7 +1380,7 @@ code {
.visual-mode-feature code {
font-family: var(--font-mono);
- font-size: 0.8125rem;
+ font-size: 0.875rem;
color: var(--color-ink);
}
@@ -2619,40 +2623,41 @@ code {
}
-/* Detection callout — image hero with NEW badge + CTA below.
- The whole callout is a single anchor so the entire card is clickable. */
+/* Detection callout — flat editorial CTA, no card chrome.
+ Image thumbnail on the left, NEW eyebrow + CTA stacked on the right.
+ The whole element is a clickable anchor. Hover shifts color, no
+ transform or shadow theatrics. */
.detection-callout {
- display: block;
- margin-bottom: var(--spacing-xl);
- border: 1px solid var(--color-mist);
- border-radius: 12px;
- overflow: hidden;
- background: var(--color-paper);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
text-decoration: none;
color: inherit;
- transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.detection-callout:hover {
- border-color: var(--color-accent);
- transform: translateY(-2px);
- box-shadow: 0 12px 32px -8px var(--color-accent-dim);
}
.detection-callout-image {
display: block;
- width: 100%;
- height: auto;
- background: var(--color-cream);
- border-bottom: 1px solid var(--color-mist);
+ width: 88px;
+ height: 88px;
+ flex-shrink: 0;
+ object-fit: cover;
+ object-position: top left;
+ border: 1px solid var(--color-mist);
+ border-radius: 6px;
+ transition: border-color 0.2s ease;
+}
+
+.detection-callout:hover .detection-callout-image {
+ border-color: var(--color-accent);
}
.detection-callout-inner {
+ flex: 1;
display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--spacing-md);
- padding: var(--spacing-sm) var(--spacing-md);
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ gap: 8px;
}
.detection-badge {
diff --git a/public/css/styles.css b/public/css/styles.css
index fcb3d0bb2..885af675b 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -3676,32 +3676,32 @@ code {
.visual-mode-details {
display: flex;
flex-direction: column;
- gap: var(--spacing-md);
+ gap: var(--spacing-xl);
+ padding: var(--spacing-md) 0;
}
.visual-mode-feature {
- padding: var(--spacing-md);
- background: white;
- border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
}
.visual-mode-feature-label {
display: block;
font-family: var(--font-mono);
- font-size: 0.625rem;
+ font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
- margin-bottom: var(--spacing-xs);
}
.visual-mode-feature p {
- font-size: 0.8125rem;
+ font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-charcoal);
margin: 0;
}
.visual-mode-feature code {
font-family: var(--font-mono);
- font-size: 0.8125rem;
+ font-size: 0.875rem;
color: var(--color-ink);
}
.solution-section {
@@ -4710,34 +4710,33 @@ code {
font-weight: 600;
}
.detection-callout {
- display: block;
- margin-bottom: var(--spacing-xl);
- border: 1px solid var(--color-mist);
- border-radius: 12px;
- overflow: hidden;
- background: var(--color-paper);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
text-decoration: none;
color: inherit;
- transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-}
-.detection-callout:hover {
- border-color: var(--color-accent);
- transform: translateY(-2px);
- box-shadow: 0 12px 32px -8px var(--color-accent-dim);
}
.detection-callout-image {
display: block;
- width: 100%;
- height: auto;
- background: var(--color-cream);
- border-bottom: 1px solid var(--color-mist);
+ width: 88px;
+ height: 88px;
+ flex-shrink: 0;
+ object-fit: cover;
+ object-position: top left;
+ border: 1px solid var(--color-mist);
+ border-radius: 6px;
+ transition: border-color 0.2s ease;
+}
+.detection-callout:hover .detection-callout-image {
+ border-color: var(--color-accent);
}
.detection-callout-inner {
+ flex: 1;
display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--spacing-md);
- padding: var(--spacing-sm) var(--spacing-md);
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ gap: 8px;
}
.detection-badge {
font-family: var(--font-mono);
diff --git a/public/index.html b/public/index.html
index 5419cb611..956996f5f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -290,7 +290,7 @@
The Chrome extension on any site, embedded in /critique during an AI design review, or standalone via npx impeccable live.
- 
+
New!
Get the Chrome extension →