Skip to content

Commit d679a89

Browse files
coreydaleyclaude
coreydaley
and
claude
committed
redesign(homepage): overhaul integrations section visual treatment
Replace centered heading + card grid with an asymmetric two-column header (eyebrow + big heading left, description right) and a landscape "plug card" format. Cards use a thick left accent border in the integration's color, icon in a tinted square, and a slide-right hover. Section background switches to a purple radial gradient from the right edge, clearly distinguishing it from the blue-tinted downloads CTA. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent e66e0fe commit d679a89

2 files changed

Lines changed: 165 additions & 72 deletions

File tree

‎themes/polyphon/assets/css/main.css‎

Lines changed: 143 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3454,104 +3454,198 @@ a:hover {
34543454

34553455
/* ── Integrations section ── */
34563456
.integrations {
3457-
padding: 4rem 0;
3458-
background: var(--color-surface);
3457+
padding: 5rem 0;
3458+
background:
3459+
radial-gradient(ellipse 60% 130% at 105% 50%, var(--integration-obsidian-subtle) 0%, transparent 60%),
3460+
var(--color-surface);
34593461
border-bottom: 1px solid var(--color-border);
3462+
overflow: hidden;
34603463
}
34613464

3462-
.integrations-heading {
3463-
text-align: center;
3464-
margin-bottom: 2.5rem;
3465+
.dark .integrations {
3466+
background:
3467+
radial-gradient(ellipse 60% 130% at 105% 50%, oklch(22% 0.07 290 / 0.6) 0%, transparent 60%),
3468+
var(--color-surface);
3469+
}
3470+
3471+
/* Two-column header */
3472+
.integrations-header {
3473+
display: grid;
3474+
grid-template-columns: 1fr 1fr;
3475+
gap: 3rem;
3476+
align-items: end;
3477+
margin-bottom: 3rem;
34653478
}
34663479

3467-
.integrations-heading h2 {
3468-
font-size: clamp(1.375rem, 3vw, 1.875rem);
3480+
.integrations-eyebrow {
3481+
font-size: 0.6875rem;
34693482
font-weight: 700;
3470-
letter-spacing: -0.02em;
3471-
margin-bottom: 0.5rem;
3472-
color: var(--color-text-primary);
3483+
text-transform: uppercase;
3484+
letter-spacing: 0.1em;
3485+
color: var(--integration-obsidian);
3486+
margin-bottom: 0.75rem;
34733487
}
34743488

3475-
.integrations-heading p {
3476-
color: var(--color-text-secondary);
3477-
font-size: 1.0625rem;
3489+
.integrations-heading {
3490+
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
3491+
font-weight: 800;
3492+
letter-spacing: -0.04em;
3493+
line-height: 1.1;
3494+
color: var(--color-text-primary);
3495+
margin: 0;
34783496
}
34793497

3480-
.integrations-grid {
3481-
display: grid;
3482-
grid-template-columns: repeat(auto-fill, minmax(300px, 480px));
3483-
justify-content: center;
3484-
gap: 1.25rem;
3498+
.integrations-header-right {
3499+
font-size: 1rem;
3500+
color: var(--color-text-secondary);
3501+
line-height: 1.65;
3502+
padding-bottom: 0.25rem;
34853503
}
34863504

3487-
.integration-card {
3505+
/* Connector rail */
3506+
.integrations-rail {
3507+
position: relative;
34883508
display: flex;
34893509
flex-direction: column;
3490-
gap: 1.25rem;
3491-
padding: 1.75rem;
3492-
transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
3510+
gap: 0.875rem;
34933511
}
34943512

3495-
.integration-card:hover {
3496-
border-color: var(--integration-obsidian);
3497-
box-shadow: var(--shadow-md), 0 0 0 1px var(--integration-obsidian);
3498-
transform: translateY(-2px);
3513+
.integrations-rail::before {
3514+
content: '';
3515+
position: absolute;
3516+
top: -1.5rem;
3517+
left: 0;
3518+
right: 0;
3519+
height: 1px;
3520+
background: linear-gradient(90deg,
3521+
var(--integration-obsidian) 0%,
3522+
var(--color-border) 40%,
3523+
transparent 100%);
3524+
opacity: 0.4;
34993525
}
35003526

3501-
.integration-card-identity {
3527+
/* Plug card — full-width landscape */
3528+
.integration-plug {
35023529
display: flex;
3503-
align-items: flex-start;
3504-
gap: 1rem;
3530+
align-items: center;
3531+
gap: 1.5rem;
3532+
padding: 1.5rem 1.75rem;
3533+
background: var(--color-surface-raised);
3534+
border: 1px solid var(--color-border);
3535+
border-left: 3px solid var(--plug-color, var(--integration-obsidian));
3536+
border-radius: var(--radius-lg);
3537+
text-decoration: none;
3538+
color: inherit;
3539+
transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s, background 0.15s;
3540+
position: relative;
35053541
}
35063542

3507-
.integration-icon {
3508-
width: 48px;
3509-
height: 48px;
3543+
.integration-plug:hover {
3544+
background: var(--plug-subtle, var(--integration-obsidian-subtle));
3545+
border-color: var(--plug-color, var(--integration-obsidian));
3546+
box-shadow: var(--shadow-md), 0 0 0 1px var(--plug-color, var(--integration-obsidian));
3547+
transform: translateX(3px);
3548+
text-decoration: none;
3549+
}
3550+
3551+
.integration-plug-icon {
35103552
flex-shrink: 0;
3553+
width: 52px;
3554+
height: 52px;
35113555
display: flex;
35123556
align-items: center;
35133557
justify-content: center;
3514-
background: var(--integration-obsidian-subtle);
3515-
color: var(--integration-obsidian);
3558+
background: var(--plug-subtle, var(--integration-obsidian-subtle));
3559+
color: var(--plug-color, var(--integration-obsidian));
35163560
border-radius: var(--radius-md);
3561+
border: 1px solid color-mix(in oklch, var(--plug-color, var(--integration-obsidian)) 20%, transparent);
3562+
transition: background 0.15s;
35173563
}
35183564

3519-
.integration-card-title-row {
3565+
.integration-plug:hover .integration-plug-icon {
3566+
background: color-mix(in oklch, var(--plug-color, var(--integration-obsidian)) 15%, transparent);
3567+
}
3568+
3569+
.integration-plug-body {
3570+
flex: 1;
3571+
min-width: 0;
3572+
}
3573+
3574+
.integration-plug-meta {
35203575
display: flex;
35213576
align-items: center;
35223577
gap: 0.5rem;
35233578
flex-wrap: wrap;
3524-
margin-bottom: 0.1875rem;
3579+
margin-bottom: 0.375rem;
35253580
}
35263581

3527-
.integration-name {
3528-
font-size: 1.125rem;
3582+
.integration-plug-name {
3583+
font-size: 1.0625rem;
35293584
font-weight: 700;
35303585
letter-spacing: -0.01em;
3586+
color: var(--color-text-primary);
35313587
}
35323588

3533-
.integration-card-sub {
3534-
font-size: 0.8125rem;
3535-
color: var(--color-text-muted);
3536-
}
3537-
3538-
.integration-install-badge {
3539-
font-size: 0.625rem;
3589+
.integration-plug-type {
3590+
font-size: 0.6875rem;
35403591
font-weight: 600;
35413592
text-transform: uppercase;
3542-
letter-spacing: 0.06em;
3593+
letter-spacing: 0.08em;
3594+
color: var(--plug-color, var(--integration-obsidian));
3595+
background: var(--plug-subtle, var(--integration-obsidian-subtle));
3596+
border: 1px solid color-mix(in oklch, var(--plug-color, var(--integration-obsidian)) 25%, transparent);
3597+
border-radius: var(--radius-full);
3598+
padding: 0.125rem 0.5rem;
3599+
}
3600+
3601+
.integration-plug-badge {
3602+
font-size: 0.6875rem;
3603+
font-weight: 500;
35433604
color: var(--color-text-muted);
35443605
background: var(--color-surface-overlay);
35453606
border: 1px solid var(--color-border);
35463607
border-radius: var(--radius-full);
35473608
padding: 0.125rem 0.5rem;
3548-
white-space: nowrap;
35493609
}
35503610

3551-
.integration-desc {
3611+
.integration-plug-desc {
35523612
font-size: 0.9375rem;
35533613
color: var(--color-text-secondary);
3554-
line-height: 1.6;
3614+
line-height: 1.55;
3615+
margin: 0;
3616+
}
3617+
3618+
.integration-plug-cta {
3619+
flex-shrink: 0;
3620+
display: flex;
3621+
align-items: center;
3622+
gap: 0.375rem;
3623+
font-size: 0.875rem;
3624+
font-weight: 600;
3625+
color: var(--plug-color, var(--integration-obsidian));
3626+
opacity: 0.7;
3627+
transition: opacity 0.15s, gap 0.15s;
3628+
}
3629+
3630+
.integration-plug:hover .integration-plug-cta {
3631+
opacity: 1;
3632+
gap: 0.5rem;
3633+
}
3634+
3635+
@media (max-width: 700px) {
3636+
.integrations-header {
3637+
grid-template-columns: 1fr;
3638+
gap: 1rem;
3639+
}
3640+
.integration-plug {
3641+
flex-wrap: wrap;
3642+
}
3643+
.integration-plug-cta {
3644+
width: 100%;
3645+
justify-content: flex-end;
3646+
padding-top: 0.75rem;
3647+
border-top: 1px solid var(--color-border);
3648+
}
35553649
}
35563650

35573651
/* ── Pricing page ── */

‎themes/polyphon/layouts/index.html‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -681,33 +681,32 @@ <h3 class="download-platform-name">poly CLI</h3>
681681
<!-- Integrations -->
682682
<section class="integrations" aria-label="Integrations">
683683
<div class="container">
684-
<div class="integrations-heading">
685-
<h2>Polyphon, wherever you work</h2>
686-
<p>Bring multi-voice AI into the tools you already use.</p>
684+
<div class="integrations-header">
685+
<div class="integrations-header-left">
686+
<p class="integrations-eyebrow">Integrations</p>
687+
<h2 class="integrations-heading">Polyphon,<br>wherever you work</h2>
688+
</div>
689+
<p class="integrations-header-right">Bring multi-voice AI into the tools you already use. Polyphon exposes a full TCP API — any tool that can open a socket can connect.</p>
687690
</div>
688-
<div class="integrations-grid">
689691

690-
<div class="integration-card card-base">
691-
<div class="integration-card-identity">
692-
<div class="integration-icon" aria-hidden="true">
693-
{{- partial "provider-logo.html" (dict "name" "obsidian" "size" 24) -}}
694-
</div>
695-
<div>
696-
<div class="integration-card-title-row">
697-
<h3 class="integration-name">Obsidian</h3>
698-
<span class="integration-install-badge">Manual install</span>
699-
</div>
700-
<p class="integration-card-sub">Obsidian plugin</p>
692+
<div class="integrations-rail">
693+
<a class="integration-plug" href="/docs/integrations/obsidian-polyphon/" style="--plug-color: var(--integration-obsidian); --plug-subtle: var(--integration-obsidian-subtle)">
694+
<div class="integration-plug-icon" aria-hidden="true">
695+
{{- partial "provider-logo.html" (dict "name" "obsidian" "size" 28) -}}
696+
</div>
697+
<div class="integration-plug-body">
698+
<div class="integration-plug-meta">
699+
<span class="integration-plug-name">Obsidian</span>
700+
<span class="integration-plug-type">Plugin</span>
701+
<span class="integration-plug-badge">Manual install</span>
701702
</div>
703+
<p class="integration-plug-desc">Multi-voice AI conversations from within your vault. Connect to a running Polyphon instance and chat with any composition — no browser, no switching apps.</p>
702704
</div>
703-
<p class="integration-desc">Connect to a running Polyphon instance and have multi-voice AI conversations from within your vault. Install via GitHub releases or BRAT — not yet listed in the Obsidian community plugin directory.</p>
704-
<a href="/docs/integrations/obsidian-polyphon/" class="download-docs-link">
705-
{{ partial "icon.html" (dict "name" "book-open" "size" 14) }}
706-
<span>Get started with the Obsidian plugin</span>
707-
{{ partial "icon.html" (dict "name" "chevron-right" "size" 14) }}
708-
</a>
709-
</div>
710-
705+
<div class="integration-plug-cta" aria-hidden="true">
706+
<span>Docs</span>
707+
{{ partial "icon.html" (dict "name" "arrow-right" "size" 15) }}
708+
</div>
709+
</a>
711710
</div>
712711
</div>
713712
</section>

0 commit comments

Comments
 (0)