stacked, each containing one
image. They scroll INDEPENDENTLY but can be sync'd via JS so flipping
modes preserves scroll position. (See JS at the bottom of this file.)
=========================================================================== */
.phone--dual { position: relative; }
.phone--dual .phone__viewport {
/* Both viewports stack on top of each other in the same position */
transition: opacity .55s ease;
}
.phone--dual .phone__viewport--light { opacity: 0; pointer-events: none; }
.household-section.is-light .phone--dual .phone__viewport--dark { opacity: 0; pointer-events: none; }
.household-section.is-light .phone--dual .phone__viewport--light { opacity: 1; pointer-events: auto; }
/* Card-variant scrolling phone — used inside the 3 household triptych cards. */
.phone--card { max-width: 100%; }
/* ===========================================================================
9b. TRIPTYCH HEADER — segmented dark/light toggle that controls all four
phones in the section at once. Sits between the featured Hart Household
card and the 3 profile cards.
=========================================================================== */
.triptych-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 32px 0 28px;
margin-top: 8px;
border-top: 1px solid var(--slate-line);
flex-wrap: wrap;
}
.triptych-copy h3 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 6px;
color: var(--text);
}
.triptych-copy p {
font-size: 14px;
color: var(--text-soft);
max-width: 460px;
line-height: 1.55;
}
/* Segmented toggle — two pill buttons with a sliding amber pill behind them.
Pure CSS, JS only adds .is-active to the chosen button. */
.theme-seg {
position: relative;
display: inline-flex;
background: var(--off-white);
border: 1px solid var(--light-line);
border-radius: 999px;
padding: 4px;
flex-shrink: 0;
}
.theme-seg__btn {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
background: transparent;
border: 0;
border-radius: 999px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--muted-l);
cursor: pointer;
transition: color .35s ease;
}
.theme-seg__btn svg { width: 14px; height: 14px; }
.theme-seg__btn.is-active { color: var(--ink); }
/* The pill that slides behind the active button. Position is set inline by JS
(left + width) but defaults to the dark side. Smooth ease for delight. */
.theme-seg__pill {
position: absolute;
top: 4px; bottom: 4px;
left: 4px;
width: 86px; /* will be set by JS */
background: var(--white);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
transition: left .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1);
z-index: 1;
}
/* ===========================================================================
9c. HOUSEHOLD-SECTION LIGHT/DARK FLIP — when .is-light is on the section,
the surrounding card surfaces and text colors shift too. Subtle but
makes the section feel like it actually changes mode, not just the phones.
=========================================================================== */
.household-section {
transition: background-color .55s ease, color .55s ease;
}
.household-section.is-light {
background: #1b1f2b; /* slate-dark — section flips dark when "light" mode is shown */
color: var(--text);
}
.household-section.is-light .home-feature {
background: var(--slate-card);
border-color: var(--slate-line);
color: var(--text);
}
.household-section.is-light .home-feature__name { color: var(--text); }
.household-section.is-light .home-feature__lead { color: var(--text-soft); }
.household-section.is-light .home-feature__tag {
background: var(--text);
color: var(--ink);
}
.household-section.is-light .home-chip {
background: var(--slate);
border-color: var(--slate-line-2);
color: var(--text);
}
.household-section.is-light .home-chip svg { color: var(--text-soft); }
.household-section.is-light .triptych-head { border-top-color: var(--slate-line); }
.household-section.is-light .triptych-copy h3 { color: var(--text); }
.household-section.is-light .triptych-copy p { color: var(--text-soft); }
.household-section.is-light .theme-seg {
background: var(--slate);
border-color: var(--slate-line);
}
.household-section.is-light .theme-seg__btn { color: var(--text-soft); }
.household-section.is-light .theme-seg__btn.is-active { color: var(--ink); }
.household-section.is-light .theme-seg__pill { background: var(--text); }
.household-section.is-light .household-card {
background: var(--slate-card);
border-color: var(--slate-line);
}
.household-section.is-light .household-card__name { color: var(--text); }
.household-section.is-light .household-card__desc { color: var(--text-soft); }
.household-section.is-light .household-card__tag {
background: var(--text);
color: var(--ink);
}
/* The section header text also flips with the toggle */
.household-section.is-light .section__head .eyebrow { color: var(--amber); }
.household-section.is-light .section__head h2 { color: var(--text); }
.household-section.is-light .section__head .section__lead { color: var(--text-soft); }
/* ===========================================================================
9d. HOUSEHOLD CARD — updated to host a scrolling phone instead of a static
image. The phone sits in a fixed-aspect container so the cards align cleanly.
=========================================================================== */
.household-card__phone {
aspect-ratio: 1 / 1.15;
padding: 30px 30px 0;
background: var(--off-white);
display: flex;
align-items: flex-start;
justify-content: center;
overflow: hidden;
transition: background .55s ease;
}
.household-section.is-light .household-card__phone {
background: var(--slate);
}
.household-card__phone .phone {
width: 80%;
max-width: 220px;
}
/* ===========================================================================
9e. AUDIENCES — "Who LifeVault is for"
5 cards in an asymmetric grid: featured card spans 2 rows on desktop,
the other 4 sit in a 2x2 grid beside it. Stacks vertically on mobile.
The featured card has a subtle amber accent border + slightly different
background to make it visually weighted without being garish.
=========================================================================== */
.audiences {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 22px;
margin-top: 64px;
}
@media (max-width: 900px) {
.audiences {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
}
@media (max-width: 600px) {
.audiences { grid-template-columns: 1fr; }
}
.audiences__card {
position: relative;
background: var(--white);
border: 1px solid var(--light-line);
border-radius: var(--radius);
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
gap: 12px;
transition: all .3s ease;
}
.audiences__card:hover {
transform: translateY(-3px);
border-color: var(--light-line-2);
box-shadow: 0 30px 60px -25px rgba(26,29,36,0.12);
}
/* Featured card spans 2 rows on desktop — gets visual emphasis */
.audiences__card--featured {
grid-row: span 2;
border-color: var(--amber);
border-width: 1.5px;
background: linear-gradient(180deg, rgba(244, 197, 66, 0.04) 0%, var(--white) 70%);
padding: 36px 32px 40px;
}
@media (max-width: 900px) {
.audiences__card--featured { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 600px) {
.audiences__card--featured { grid-column: auto; }
}
.audiences__featured-tag {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
background: var(--amber);
color: var(--ink);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 4px;
}
.audiences__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--off-white);
border: 1px solid var(--light-line);
color: var(--ink);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-bottom: 4px;
}
.audiences__icon svg { width: 22px; height: 22px; }
.audiences__card--featured .audiences__icon {
background: var(--amber);
border-color: var(--amber);
color: var(--slate);
}
.audiences__card h3 {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0;
}
.audiences__card--featured h3 {
font-size: 26px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.audiences__card p {
font-size: 14px;
color: var(--muted-l);
line-height: 1.6;
margin: 0;
}
.audiences__card--featured p {
font-size: 15px;
line-height: 1.65;
}
/* ===========================================================================
9b. THEME-TOGGLE MOMENT — small interactive wink between household and
customize sections. Two stacked phone screenshots cross-fade when the
user clicks the iOS-style mode toggle. The whole section's background
also flips light <-> dark for emphasis.
Implementation note:
- Wrapper has data-theme="dark" by default (matching the slate page bg)
- Click .theme-toggle to add/remove .is-light on the wrapper
- .is-light flips wrapper colors AND swaps which
![]()
is opacity:1
============================================================================ */
.theme-moment {
padding: 100px var(--gutter);
transition: background .6s ease, color .6s ease;
background: var(--slate);
color: var(--text);
position: relative;
overflow: hidden;
}
.theme-moment.is-light {
background: var(--off-white);
color: var(--ink);
}
.theme-moment__inner {
max-width: 920px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 760px) {
.theme-moment { padding: 70px var(--gutter); }
.theme-moment__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
}
.theme-moment__copy h3 {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
margin-bottom: 14px;
}
.theme-moment__copy h3 em {
font-style: normal;
color: var(--amber);
}
.theme-moment__copy p {
font-size: 16px;
color: var(--text-soft);
margin-bottom: 28px;
max-width: 380px;
transition: color .6s ease;
}
.theme-moment.is-light .theme-moment__copy p { color: var(--muted-l); }
@media (max-width: 760px) { .theme-moment__copy p { margin-left: auto; margin-right: auto; } }
/* iOS-style theme toggle button — bigger than the row switches above */
.theme-toggle {
position: relative;
width: 64px; height: 34px;
background: var(--slate-card-2);
border: 1px solid var(--slate-line-2);
border-radius: 999px;
cursor: pointer;
transition: background .4s ease, border-color .4s ease;
padding: 0;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.theme-toggle::after {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 26px; height: 26px;
background: var(--slate);
border-radius: 50%;
transition: transform .4s cubic-bezier(.4,0,.2,1), background .4s ease;
display: flex;
align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
/* Sun & moon icons inside the knob, swap based on state */
.theme-toggle__icon {
position: absolute;
top: 50%; left: 16px;
transform: translate(-50%, -50%);
width: 14px; height: 14px;
color: var(--amber);
transition: transform .4s cubic-bezier(.4,0,.2,1), color .4s ease;
pointer-events: none;
z-index: 1;
}
.theme-moment.is-light .theme-toggle {
background: var(--amber);
border-color: var(--amber-warm);
}
.theme-moment.is-light .theme-toggle::after { transform: translateX(30px); background: var(--white); }
.theme-moment.is-light .theme-toggle__icon { transform: translate(30px, -50%); color: var(--amber-warm); }
.theme-toggle-row {
display: inline-flex; align-items: center; gap: 14px;
font-size: 13px;
font-weight: 500;
color: var(--muted-d);
transition: color .4s ease;
}
.theme-moment.is-light .theme-toggle-row { color: var(--muted-l); }
.theme-toggle-row__hint { letter-spacing: 0.02em; }
@media (max-width: 760px) { .theme-toggle-row { justify-content: center; } }
/* The two stacked phones that cross-fade */
.theme-phones {
position: relative;
width: 100%;
max-width: 280px;
margin: 0 auto;
aspect-ratio: 9 / 19.5;
}
.theme-phones .phone {
position: absolute;
inset: 0;
width: 100%;
transition: opacity .6s ease, transform .6s ease;
}
.theme-phones .phone--dark { opacity: 1; }
.theme-phones .phone--light {
opacity: 0;
transform: scale(0.97);
/* light-mode phone needs a brighter shadow ring */
box-shadow:
0 0 0 2px var(--light-line-2),
0 60px 120px -40px rgba(244, 197, 66, 0.18),
0 30px 80px -20px rgba(26, 29, 36, 0.18);
}
.theme-moment.is-light .phone--dark { opacity: 0; transform: scale(0.97); }
.theme-moment.is-light .phone--light { opacity: 1; transform: scale(1); }
/* ===========================================================================
10. CUSTOMIZE — interactive toggle demo + phone screenshot
=========================================================================== */
.customize-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 900px) { .customize-grid { grid-template-columns: 1fr; gap: 50px; } }
.toggle-list {
margin-top: 36px;
background: var(--slate-card);
border: 1px solid var(--slate-line);
border-radius: var(--radius);
padding: 8px;
box-shadow: 0 20px 50px -25px rgba(0,0,0,0.4);
}
.toggle-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background .2s ease;
user-select: none;
}
.toggle-row:hover { background: var(--slate-card-2); }
.toggle-row__left { display: flex; align-items: center; gap: 14px; }
.toggle-row__icon {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--slate);
color: var(--text-soft);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
border: 1px solid var(--slate-line);
}
.toggle-row.is-on .toggle-row__icon {
background: var(--amber-soft);
color: var(--amber);
border-color: var(--amber-bord);
}
.toggle-row__label { font-size: 15px; font-weight: 600; color: var(--text); }
.toggle-row__sub { font-size: 12px; color: var(--muted-d); margin-top: 2px; }
/* iOS-style switch */
.switch {
position: relative;
width: 44px; height: 26px;
background: #4a4d5a;
border-radius: 999px;
transition: background .25s ease;
flex-shrink: 0;
border: none;
cursor: pointer;
padding: 0;
}
.switch::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 22px; height: 22px;
background: white;
border-radius: 50%;
transition: transform .25s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.toggle-row.is-on .switch { background: var(--amber); }
.toggle-row.is-on .switch::after { transform: translateX(18px); }
.customize__phone-wrap {
background: var(--slate-card);
border-radius: var(--radius-lg);
padding: 50px 30px 0;
display: flex; align-items: end; justify-content: center;
aspect-ratio: 4/5;
border: 1px solid var(--slate-line);
overflow: hidden;
position: relative;
}
.customize__phone-wrap::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(244,197,66,0.06) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
.customize__phone-wrap .phone {
max-width: 280px;
position: relative;
z-index: 1;
}
/* ===========================================================================
11. SUPPORT — features + phone (DARK feature section, slightly lifted)
=========================================================================== */
.support-section {
background: var(--off-white);
border-top: 1px solid var(--light-line);
border-bottom: 1px solid var(--light-line);
}
/* ===========================================================================
SUPPORT GUIDE — two phones side-by-side: builder on the left, summary
on the right. The summary phone uses the scrolling-phone trick to
demonstrate the killer artifact (a tall, plain-language summary that
caregivers actually hand off).
Mobile: stacks vertically with arrow rotated 90deg.
=========================================================================== */
.support-pair {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: center;
margin: 60px 0 80px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 760px) {
.support-pair { grid-template-columns: 1fr; gap: 30px; }
.support-pair__arrow svg { transform: rotate(90deg); }
}
.support-pair__col {
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
}
.support-pair__col .phone {
max-width: 280px;
width: 100%;
}
.support-pair__caption {
width: 100%;
max-width: 280px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.support-pair__step {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 999px;
background: var(--amber);
color: #1b1f2b !important;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
font-family: var(--font);
}
.support-pair__caption strong {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--ink);
margin-bottom: 2px;
}
.support-pair__caption span {
font-size: 13px;
color: var(--muted-l);
line-height: 1.5;
}
.support-pair__arrow {
color: var(--muted-l);
display: flex; align-items: center; justify-content: center;
}
.support-pair__arrow svg {
width: 36px; height: 36px;
transition: transform .3s ease;
}
/* ===========================================================================
CUSTOMIZE before/after pair — same shape as support-pair: cause | arrow | effect.
Toggle modal on the left, the resulting customized profile on the right.
Uses its own classnames so we can tweak independently in the future.
=========================================================================== */
.customize-pair {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: center;
margin: 60px 0 50px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 760px) {
.customize-pair { grid-template-columns: 1fr; gap: 30px; }
.customize-pair__arrow svg { transform: rotate(90deg); }
}
.customize-pair__col {
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
}
.customize-pair__col .phone {
max-width: 280px;
width: 100%;
}
.customize-pair__caption {
width: 100%;
max-width: 280px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.customize-pair__step {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 999px;
background: var(--amber);
color: #1b1f2b !important;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
font-family: var(--font);
}
.customize-pair__caption strong {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.customize-pair__caption span {
font-size: 13px;
color: var(--text-soft);
line-height: 1.5;
}
.customize-pair__arrow {
color: var(--text-soft);
display: flex; align-items: center; justify-content: center;
}
.customize-pair__arrow svg {
width: 36px; height: 36px;
}
/* Reassuring-but-quiet note beneath the pair, generalizing the pattern */
.customize-note {
max-width: 720px;
margin: 0 auto;
text-align: center;
padding: 28px 24px;
border-top: 1px solid var(--slate-line);
}
.customize-note p {
font-size: 14px;
color: var(--text-soft);
line-height: 1.65;
}
.customize-note strong {
color: var(--text);
font-weight: 600;
}
/* Summary phone — slightly different from the household scroll: faster,
no top-pause, just a smooth continuous scroll through the artifact */
.phone--summary {
max-width: 280px;
margin: 0 auto;
}
/* Three callouts beneath the phones — what makes this section different */
.support-callouts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 30px;
padding-top: 50px;
border-top: 1px solid var(--light-line);
}
@media (max-width: 760px) { .support-callouts { grid-template-columns: 1fr; gap: 22px; } }
.support-callout {
display: flex; align-items: flex-start; gap: 12px;
}
.support-callout > svg {
width: 20px; height: 20px;
color: var(--amber);
flex-shrink: 0;
margin-top: 2px;
padding: 4px;
background: rgba(244, 197, 66, 0.12);
border-radius: 999px;
box-sizing: content-box;
width: 14px; height: 14px;
}
.support-callout strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.support-callout span {
font-size: 13px;
color: var(--muted-l);
line-height: 1.55;
}
/* ===========================================================================
FOUNDER LINE — quiet italic moment between Support Guide and Privacy.
Centered, light, no card, no box. Just text on the page background.
The amber color on the cite anchors it to the brand.
=========================================================================== */
.founder-line {
padding: 90px var(--gutter) 90px;
background: var(--slate);
text-align: center;
}
.founder-line__inner {
max-width: 680px;
margin: 0 auto;
}
.founder-line blockquote {
margin: 0;
}
.founder-line blockquote p {
font-size: 18px;
line-height: 1.55;
font-style: italic;
color: var(--text-soft);
letter-spacing: -0.005em;
margin: 0 0 18px;
}
.founder-line blockquote cite {
font-style: normal;
font-size: 13px;
font-weight: 600;
color: var(--amber);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.founder-line__story-link {
display: inline-block;
margin-top: 16px;
padding: 10px 4px;
font-size: 9px;
font-weight: 600;
color: var(--text-soft);
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color .2s ease;
}
.founder-line__story-link:hover { color: var(--text); }
@media (max-width: 600px) {
.founder-line { padding: 60px var(--gutter); }
.founder-line blockquote p { font-size: 19px; }
}
/* Legacy support-grid + support__visual + support__features kept commented
out so we have a record, but they're no longer used. The page is leaner now. */
/* ===========================================================================
12. PRIVACY — light section, simple grid
=========================================================================== */
.privacy-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 60px;
}
@media (max-width: 900px) { .privacy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .privacy-grid { grid-template-columns: 1fr; } }
.privacy-tile {
padding: 28px 24px;
background: var(--white);
border-radius: var(--radius);
border: 1px solid var(--light-line);
transition: all .25s ease;
}
.privacy-tile:hover {
border-color: var(--ink);
transform: translateY(-3px);
}
.privacy-tile__icon {
width: 36px; height: 36px;
color: var(--ink);
background: var(--off-white);
border: 1px solid var(--light-line);
border-radius: 10px;
padding: 6px;
margin-bottom: 16px;
}
.privacy-tile h4 { font-size: 17px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.privacy-tile p { font-size: 14px; color: var(--muted-l); line-height: 1.55; }
/* ===========================================================================
12b. FAQ — accessible
/ pattern.
Uses the browser's native disclosure widget for accessibility wins
(screen reader support, keyboard nav, no JS needed).
We just style it to fit the rest of the page.
=========================================================================== */
.faq-section { padding: 100px var(--gutter); background: #e8e9ec; }
.faq {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 56px;
}
.faq__item {
background: var(--slate-card);
border: 1px solid var(--slate-line);
border-radius: var(--radius);
overflow: hidden;
transition: border-color .2s ease, background-color .2s ease;
}
.faq__item:hover { border-color: var(--slate-line-2); }
.faq__item[open] {
background: linear-gradient(180deg, rgba(244, 197, 66, 0.03) 0%, var(--slate-card) 60%);
border-color: var(--slate-line-2);
}
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 26px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.005em;
list-style: none; /* hide default disclosure marker */
user-select: none;
}
/* Hide the default disclosure triangle in all browsers */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { display: none; }
.faq__chevron {
flex-shrink: 0;
color: var(--text-soft);
transition: transform .25s ease, color .2s ease;
}
.faq__item[open] .faq__chevron {
transform: rotate(180deg);
color: var(--amber);
}
.faq__item p {
padding: 0 26px 24px;
margin: 0;
font-size: 15px;
line-height: 1.65;
color: var(--text-soft);
}
.faq__item p em {
color: var(--text);
font-style: italic;
}
@media (max-width: 600px) {
.faq__item summary { padding: 18px 20px; font-size: 15px; }
.faq__item p { padding: 0 20px 20px; font-size: 14px; }
}
/* ===========================================================================
13. FINAL CTA
=========================================================================== */
.cta {
text-align: center;
padding: 140px var(--gutter);
background:
radial-gradient(ellipse at center, rgba(244,197,66,0.06) 0%, transparent 60%),
var(--slate);
}
.cta h2 { font-size: clamp(36px, 5.5vw, 64px); max-width: 800px; margin: 0 auto 20px; }
.cta__lead { color: var(--text-soft); font-size: 18px; max-width: 540px; margin: 0 auto 40px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) { .cta__actions { flex-direction: column; align-items: stretch; } .cta__actions .btn { justify-content: center; } }
/* Footer */
footer {
border-top: 1px solid var(--slate-line);
padding: 48px var(--gutter) 36px;
font-size: 13px;
color: var(--muted-d);
}
footer .inner {
max-width: var(--max); margin: 0 auto;
display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
footer .footer__links {
display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
}
footer .footer__email {
color: var(--muted-l); font-weight: 500;
}
footer .footer__legal {
padding-top: 16px;
border-top: 1px solid var(--slate-line);
width: 100%; max-width: 480px;
font-size: 12px;
color: var(--muted-d);
}
footer a:hover { color: var(--text); }
/* ===========================================================================
14. SCROLL REVEAL
=========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* ===========================================================================
15. CONTACT FORM
=========================================================================== */
.contact-section {
padding: 100px var(--gutter) 80px;
}
.contact-section .section__inner {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.contact-form {
max-width: 480px;
margin: 40px auto 0;
background: var(--slate-card);
border: 1px solid var(--slate-line);
border-radius: var(--radius);
padding: 32px 28px;
text-align: left;
}
.contact-form__group {
margin-bottom: 16px;
}
.contact-form__label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-soft);
margin-bottom: 6px;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
width: 100%;
padding: 12px 14px;
background-color: var(--slate);
border: 1px solid var(--slate-line);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font);
font-size: 15px;
transition: border-color 0.2s;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
color: var(--muted-d);
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
outline: none;
border-color: var(--amber);
}
.contact-form__select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23898d99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 12px;
padding-right: 36px;
cursor: pointer;
}
.contact-form__textarea {
resize: vertical;
min-height: 80px;
}
.contact-form__upload {
position: relative;
overflow: hidden;
border: 1px dashed var(--slate-line);
border-radius: var(--radius-sm);
background: var(--slate);
transition: border-color 0.2s, background-color 0.2s;
cursor: pointer;
}
.contact-form__upload:hover {
border-color: var(--amber);
}
.contact-form__upload.is-dragover {
border-color: var(--amber);
background: rgba(245, 158, 11, 0.06);
}
.contact-form__file-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 1;
font-size: 0;
-webkit-appearance: none;
appearance: none;
}
.contact-form__upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 14px;
color: var(--muted-d);
font-size: 14px;
pointer-events: none;
text-align: center;
}
.contact-form__upload-placeholder svg {
flex-shrink: 0;
opacity: 0.5;
}
.contact-form__upload-placeholder span {
font-size: 13px;
}
.contact-form__upload-file {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px;
font-size: 14px;
color: var(--text);
pointer-events: none;
}
.contact-form__upload-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-weight: 500;
}
.contact-form__upload-remove {
flex-shrink: 0;
background: none;
border: none;
color: var(--muted-d);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
pointer-events: auto;
position: relative;
z-index: 2;
transition: color 0.15s, background-color 0.15s;
}
.contact-form__upload-remove:hover {
color: #f87171;
background: rgba(220, 38, 38, 0.08);
}
.contact-form__hint {
font-size: 12px;
color: var(--muted-d);
margin-top: 8px;
line-height: 1.5;
}
.contact-form__file-error {
display: none;
margin-top: 8px;
padding: 8px 12px;
background: rgba(220, 38, 38, 0.1);
border: 1px solid rgba(220, 38, 38, 0.25);
border-radius: var(--radius-sm);
color: #f87171;
font-size: 13px;
line-height: 1.5;
}
.contact-form__file-error.is-visible {
display: block;
}
.contact-form__hp {
display: none;
}
.contact-form__submit {
display: flex;
width: 100%;
margin-top: 8px;
justify-content: center;
}
.contact-form__note {
text-align: center;
font-size: 12px;
color: var(--muted-d);
margin-top: 14px;
}
.contact-form__error {
display: none;
margin-top: 12px;
padding: 10px 14px;
background: rgba(220, 38, 38, 0.1);
border: 1px solid rgba(220, 38, 38, 0.25);
border-radius: var(--radius-sm);
color: #f87171;
font-size: 13px;
line-height: 1.5;
}
.contact-form__error.is-visible {
display: block;
}
.contact-form__success {
display: none;
text-align: center;
padding: 48px 24px;
}
.contact-form__success.is-visible {
display: block;
}
.contact-form__success i,
.contact-form__success svg {
color: var(--amber);
margin-bottom: 12px;
}
.contact-form__success p {
font-size: 17px;
font-weight: 600;
color: var(--text);
}
.contact-form__success span {
display: block;
font-size: 14px;
color: var(--text-soft);
margin-top: 6px;
}
.contact-form.is-sending .contact-form__input,
.contact-form.is-sending .contact-form__select,
.contact-form.is-sending .contact-form__textarea,
.contact-form.is-sending .contact-form__upload,
.contact-form.is-sending .contact-form__submit {
opacity: 0.6;
pointer-events: none;
}
/* Light-theme overrides */
.section--light .contact-form {
background: var(--white);
border-color: var(--light-line);
}
.section--light .contact-form__label {
color: var(--muted-l);
}
.section--light .contact-form__input,
.section--light .contact-form__select,
.section--light .contact-form__textarea {
background-color: var(--off-white);
border-color: var(--light-line);
color: var(--ink);
}
.section--light .contact-form__input::placeholder,
.section--light .contact-form__textarea::placeholder {
color: var(--muted-l);
}
.section--light .contact-form__select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b6f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
}
.section--light .contact-form__upload {
background-color: var(--off-white);
border-color: var(--light-line);
}
.section--light .contact-form__upload:hover {
border-color: var(--amber-warm);
}
.section--light .contact-form__upload.is-dragover {
border-color: var(--amber-warm);
background-color: rgba(245, 158, 11, 0.04);
}
.section--light .contact-form__upload-placeholder {
color: var(--muted-l);
}
.section--light .contact-form__upload-file {
color: var(--ink);
}
.section--light .contact-form__hint {
color: var(--muted-l);
}
.section--light .contact-form__note {
color: var(--muted-l);
}
.section--light .contact-form__success p {
color: var(--ink);
}
.section--light .contact-form__success span {
color: var(--muted-l);
}
.section--light .contact-form__success i,
.section--light .contact-form__success svg {
color: var(--amber-warm);
}
/* ===========================================================================
16. EMAIL SIGNUP FORM
=========================================================================== */
.signup-section {
text-align: center;
padding: 100px var(--gutter) 80px;
}
.signup-form {
max-width: 480px;
margin: 32px auto 0;
}
.signup-form__row {
display: flex;
gap: 10px;
}
.signup-form__input {
flex: 1;
min-width: 0;
}
.signup-form__btn {
white-space: nowrap;
flex-shrink: 0;
}
.signup-form .contact-form__note {
text-align: center;
}
.signup-form .contact-form__success {
padding: 32px 24px;
}
.signup-form.is-sending .signup-form__input,
.signup-form.is-sending .signup-form__btn {
opacity: 0.6;
pointer-events: none;
}
@media (max-width: 480px) {
.signup-form__row {
flex-direction: column;
}
.signup-form__btn {
width: 100%;
justify-content: center;
}
}