happyDomain/website
2
0
Fork 0
Code Issues Pull requests Releases Activity

Redesign discover section and add personas grid

Browse source 
Rework "How it works" into a flat three-step grid with health-check
messaging and a row of reassurance promises. Add a new personas section
on the home page and back it with a screenshot background on the CTA band.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
nemunaire 2026-06-12 13:24:10 +09:00
commit b3830ab7c4
6 changed files with 332 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

218
static/css/custom.css
View file

@ -314,70 +314,190 @@ img {
max-width: 100%;
}
#discover .steps {
/* ── How it works (#discover) ──
Same flat language as the big-idea section: one bordered surface,
columns split by hairlines, mono step tags. */
#discover .steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--hd-border-1);
border-radius: 12px;
overflow: hidden;
background: var(--hd-bg-canvas);
}
#discover .step-col {
padding: 28px 28px 24px;
}
#discover .step-col + .step-col {
border-left: 1px solid var(--hd-border-1);
}
#discover .step-col h3 {
font-weight: 700;
font-size: 1.125rem;
color: var(--hd-fg-1);
letter-spacing: -0.015em;
margin: 0 0 10px;
}
#discover .step-col p {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--hd-fg-3);
margin: 0;
}
#discover .assurances {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px 28px;
margin: 40px 0 0;
padding-top: 32px;
border-top: 1px solid var(--hd-border-1);
}
#discover .assurance {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 60px;
position: relative;
align-items: flex-start;
gap: 10px;
}
#discover .steps::before {
content: "";
position: absolute;
top: 25px;
left: 10%;
width: 80%;
height: 2px;
background: linear-gradient(
to right,
var(--hd-accent) 0%,
var(--hd-brand-dark) 100%
);
z-index: 1;
}
#discover .step {
flex-basis: 30%;
text-align: center;
position: relative;
z-index: 2;
}
#discover .step-number {
background: linear-gradient(
135deg,
var(--hd-accent) 0%,
var(--hd-brand-dark) 100%
);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
#discover .assurance-check {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 6px;
background: var(--hd-accent-subtle);
border: 1px solid var(--hd-accent-border);
color: var(--hd-accent);
font-size: 11px;
font-weight: 700;
}
#discover .step h3 {
margin-bottom: 15px;
font-size: 22px;
[data-bs-theme="dark"] #discover .assurance-check {
background: var(--hd-accent-muted);
}
#discover .step p {
#discover .assurance strong {
display: block;
font-size: 0.875rem;
color: var(--hd-fg-1);
margin-bottom: 3px;
}
#discover .assurance p {
color: var(--hd-fg-3);
font-size: 0.8125rem;
line-height: 1.55;
}
@media (max-width: 991px) {
#discover .assurances {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
#discover .steps-grid {
grid-template-columns: 1fr;
}
#discover .step-col + .step-col {
border-left: none;
border-top: 1px solid var(--hd-border-1);
}
#discover .assurances {
grid-template-columns: 1fr;
}
}
/* ── Personas (#personas) ── */
.personas-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.persona-card {
display: flex;
flex-direction: column;
text-decoration: none;
background: var(--hd-bg-canvas);
border: 1px solid var(--hd-border-1);
border-radius: 12px;
overflow: hidden;
transition:
border-color 0.15s,
transform 0.15s,
box-shadow 0.15s;
}
.persona-card:hover {
border-color: var(--hd-accent-border);
transform: translateY(-3px);
box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35);
}
.persona-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.persona-card .persona-name {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 14px;
font-size: 0.875rem;
font-weight: 600;
color: var(--hd-fg-1);
border-top: 1px solid var(--hd-border-1);
}
.persona-card .persona-name::after {
content: "\2192";
color: var(--hd-fg-4);
transition:
color 0.15s,
transform 0.15s;
}
.persona-card:hover .persona-name::after {
color: var(--hd-accent);
transform: translateX(3px);
}
@media (max-width: 991px) {
.personas-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 575px) {
.personas-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#cta {
padding: 100px 0;
background: linear-gradient(
135deg,
var(--hd-brand-dark) 0%,
var(--hd-accent) 100%
);
background:
linear-gradient(
135deg,
rgba(54, 11, 72, 0.65) 0%,
rgba(28, 180, 135, 0.55) 100%
),
url("/img/screenshots/home.webp");
background-size: cover;
background-position: center;
color: white;
text-align: center;
position: relative;