fix solutions page
This commit is contained in:
@@ -642,51 +642,66 @@ function Sol01() {
|
||||
BEAT 02 — ELIMINATING DAILY FRICTION (Before vs DoorMile Control)
|
||||
LIGHT SECTION (sol-bg--white) — Visual Rhythm Break
|
||||
============================================================ */
|
||||
/* Both card sets share one skeleton so the two tab views line up pixel-for-pixel
|
||||
and nothing jumps when you toggle: fixed-height icon/stat header, then title,
|
||||
body, then a bottom-pinned outcome line. */
|
||||
const S02_OLD = [
|
||||
{
|
||||
badge: "Friction 01",
|
||||
chip: "2.5x time on coordination",
|
||||
icon: IcPhone,
|
||||
statV: "2.5x",
|
||||
statL: "Time on coordination",
|
||||
title: "20 Phone Calls for One Truck",
|
||||
body: "Operations managers waste hours calling drivers, hub managers and clients just to find out where a shipment is.",
|
||||
foot: "Cost: your most experienced dispatcher spends the morning relaying, not deciding.",
|
||||
footLbl: "Cost",
|
||||
footTxt: "your most experienced dispatcher spends the morning relaying, not deciding.",
|
||||
},
|
||||
{
|
||||
badge: "Friction 02",
|
||||
chip: "73% of delays start here",
|
||||
icon: IcSheet,
|
||||
statV: "73%",
|
||||
statL: "Of delays start here",
|
||||
title: "Outdated Excel Spreadsheets",
|
||||
body: "Orders in one file, driver lists in another. When delays happen, nobody has the true status until clients complain.",
|
||||
foot: "Cost: the handoff between two files is where the day quietly goes wrong.",
|
||||
footLbl: "Cost",
|
||||
footTxt: "the handoff between two files is where the day quietly goes wrong.",
|
||||
},
|
||||
{
|
||||
badge: "Friction 03",
|
||||
chip: "28% higher cost to operate",
|
||||
icon: IcArchive,
|
||||
statV: "28%",
|
||||
statL: "Higher cost to operate",
|
||||
title: "Paper Receipts & Invoicing Delays",
|
||||
body: "Waiting days for physical paper delivery receipts to return to the office before invoices can be processed.",
|
||||
foot: "Cost: completed revenue sits in a glovebox instead of on an invoice.",
|
||||
footLbl: "Cost",
|
||||
footTxt: "completed revenue sits in a glovebox instead of on an invoice.",
|
||||
},
|
||||
];
|
||||
|
||||
const S02_DM = [
|
||||
{
|
||||
badge: "✓ DoorMile Control",
|
||||
chip: "99.2% on-time",
|
||||
icon: IcTracking,
|
||||
statV: "99.2%",
|
||||
statL: "On-time",
|
||||
title: "Live Real-Time GPS Tracking",
|
||||
body: "Every vehicle and shipment visible on one live map. ETAs update automatically without making a single phone call.",
|
||||
foot: "Gain: status is answered in a glance, not a call chain.",
|
||||
footLbl: "Gain",
|
||||
footTxt: "status is answered in a glance, not a call chain.",
|
||||
},
|
||||
{
|
||||
badge: "✓ DoorMile Control",
|
||||
chip: "40% fewer manual tasks",
|
||||
icon: IcLayers,
|
||||
statV: "40%",
|
||||
statL: "Fewer manual tasks",
|
||||
title: "Single Connected Workspace",
|
||||
body: "Orders, vehicle capacity, driver dispatch and tracking sync live in one place for your entire team.",
|
||||
foot: "Gain: one screen replaces the entire morning ritual.",
|
||||
footLbl: "Gain",
|
||||
footTxt: "one screen replaces the entire morning ritual.",
|
||||
},
|
||||
{
|
||||
badge: "✓ DoorMile Control",
|
||||
chip: "3x faster response",
|
||||
icon: IcBilling,
|
||||
statV: "3x",
|
||||
statL: "Faster response",
|
||||
title: "Instant Digital Proof of Receipt",
|
||||
body: "Digital signatures and OTP receipts captured at the doorstep — ready for instant billing reconciliation.",
|
||||
foot: "Gain: the invoice is raised the moment the door closes.",
|
||||
footLbl: "Gain",
|
||||
footTxt: "the invoice is raised the moment the door closes.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -748,15 +763,21 @@ function Sol02() {
|
||||
{!isDm ? (
|
||||
<div className="sol-s02-view sol-s02-view--old" key="old">
|
||||
<div className="sol-s02-grid-3">
|
||||
{S02_OLD.map((c) => (
|
||||
<div className="sol-s02-card-old" key={c.badge}>
|
||||
{S02_OLD.map((c, i) => (
|
||||
<div className="sol-s02-card sol-s02-card--old" key={c.title} style={{ "--i": i } as React.CSSProperties}>
|
||||
<div className="sol-s02-card-top">
|
||||
<span className="sol-s02-badge-old">{c.badge}</span>
|
||||
<span className="sol-s02-chip-old">{c.chip}</span>
|
||||
<span className="sol-s02-ic">{c.icon}</span>
|
||||
<span className="sol-s02-stat">
|
||||
<b>{c.statV}</b>
|
||||
<i>{c.statL}</i>
|
||||
</span>
|
||||
</div>
|
||||
<h3>{c.title}</h3>
|
||||
<p>{c.body}</p>
|
||||
<span className="sol-s02-foot sol-s02-foot--old">{c.foot}</span>
|
||||
<span className="sol-s02-foot">
|
||||
<b>{c.footLbl}</b>
|
||||
{c.footTxt}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -778,23 +799,33 @@ function Sol02() {
|
||||
) : (
|
||||
<div className="sol-s02-view sol-s02-view--dm" key="dm">
|
||||
<div className="sol-s02-grid-3">
|
||||
{S02_DM.map((c) => (
|
||||
<div className="sol-s02-card-dm" key={c.title}>
|
||||
{S02_DM.map((c, i) => (
|
||||
<div className="sol-s02-card sol-s02-card--dm" key={c.title} style={{ "--i": i } as React.CSSProperties}>
|
||||
<div className="sol-s02-card-top">
|
||||
<span className="sol-s02-badge-dm">{c.badge}</span>
|
||||
<span className="sol-s02-chip-dm">{c.chip}</span>
|
||||
<span className="sol-s02-ic">{c.icon}</span>
|
||||
<span className="sol-s02-stat">
|
||||
<b>{c.statV}</b>
|
||||
<i>{c.statL}</i>
|
||||
</span>
|
||||
</div>
|
||||
<h3>{c.title}</h3>
|
||||
<p>{c.body}</p>
|
||||
<span className="sol-s02-foot sol-s02-foot--dm">{c.foot}</span>
|
||||
<span className="sol-s02-foot">
|
||||
<b>{c.footLbl}</b>
|
||||
{c.footTxt}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Secondary layer: supporting illustration + what changes */}
|
||||
{/* Secondary layer: supporting illustration + what changes.
|
||||
One bordered panel with the photo bled to the edge, so the
|
||||
image and the copy read as a single object rather than two
|
||||
loose halves floating on the white. */}
|
||||
<div className="sol-s02-media-row">
|
||||
<MediaPanel
|
||||
tone="light"
|
||||
className="sol-s02-media-panel"
|
||||
src="/images/tab-pic-1-solution.webp"
|
||||
alt="DoorMile connected operations"
|
||||
badges={[
|
||||
@@ -803,7 +834,10 @@ function Sol02() {
|
||||
]}
|
||||
/>
|
||||
<div className="sol-s02-media-copy">
|
||||
<span className="sol-s02-eyeb">/ What actually changes /</span>
|
||||
<span className="sol-s02-eyeb">
|
||||
<i aria-hidden="true" />
|
||||
What actually changes
|
||||
</span>
|
||||
<h4>The same day, minus the chasing</h4>
|
||||
<MiniList
|
||||
tone="light"
|
||||
@@ -830,11 +864,17 @@ function Sol02() {
|
||||
<span className="sol-s02-cmp-lbl">{r.label}</span>
|
||||
<div className="sol-s02-cmp-bars">
|
||||
<div className="sol-s02-cmp-line">
|
||||
<i className="sol-s02-cmp-bar sol-s02-cmp-bar--old" style={{ width: `${r.oldW}%` }} />
|
||||
<span className="sol-s02-cmp-tag">Traditional</span>
|
||||
<span className="sol-s02-cmp-track">
|
||||
<i className="sol-s02-cmp-bar sol-s02-cmp-bar--old" style={{ width: `${r.oldW}%` }} />
|
||||
</span>
|
||||
<em>{r.old}</em>
|
||||
</div>
|
||||
<div className="sol-s02-cmp-line">
|
||||
<i className="sol-s02-cmp-bar sol-s02-cmp-bar--dm" style={{ width: `${r.dmW}%` }} />
|
||||
<span className="sol-s02-cmp-tag sol-s02-cmp-tag--dm">DoorMile</span>
|
||||
<span className="sol-s02-cmp-track">
|
||||
<i className="sol-s02-cmp-bar sol-s02-cmp-bar--dm" style={{ width: `${r.dmW}%` }} />
|
||||
</span>
|
||||
<em>{r.dm}</em>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2319,10 +2359,10 @@ const CSS = `
|
||||
#sol-root .sol-map canvas { display: block; width: 100%; height: 100%; }
|
||||
|
||||
/* WHITE CARD BACKGROUND (sol-bg--white & sol-bg--white-red) */
|
||||
#sol-root .sol-bg--white { background: #ffffff; box-shadow: 0 30px 90px -30px rgba(0,0,0,0.12); }
|
||||
#sol-root .sol-bg--white { background: #ffffff; box-shadow: 0 12px 36px -20px rgba(0,0,0,0.07); }
|
||||
#sol-root .sol-bg--white-red {
|
||||
background: radial-gradient(75% 60% at 50% 0%, rgba(226, 53, 74, 0.08) 0%, rgba(255, 255, 255, 0.98) 70%), linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
|
||||
box-shadow: 0 30px 90px -30px rgba(192, 18, 39, 0.12);
|
||||
box-shadow: 0 12px 36px -20px rgba(192, 18, 39, 0.07);
|
||||
border: 1px solid rgba(226, 53, 74, 0.14);
|
||||
}
|
||||
#sol-root .sol-sec--white .sol-eyebrow { color: var(--sol-red) !important; }
|
||||
@@ -2619,21 +2659,55 @@ const CSS = `
|
||||
#sol-root .sol-s02-stage-box { width: 100%; max-width: 1040px; }
|
||||
#sol-root .sol-s02-view { animation: solFadeUp 0.5s ease-out both; }
|
||||
@keyframes solFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
|
||||
#sol-root .sol-s02-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||||
#sol-root .sol-s02-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||
#sol-root .sol-s02-card-old { padding: 24px; border-radius: 20px; background: #fef2f2; border: 1px solid #fecaca; display: flex; flex-direction: column; }
|
||||
#sol-root .sol-s02-badge-old { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fee2e2; color: #dc2626; font-size: 11px; font-weight: 800; }
|
||||
#sol-root .sol-s02-chip-old { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #b91c1c; }
|
||||
#sol-root .sol-s02-card-old h3 { color: #991b1b; font-size: 17px; font-weight: 800; margin: 0 0 8px; }
|
||||
#sol-root .sol-s02-card-old p { color: #7f1d1d; font-size: 13.5px; line-height: 1.55; margin: 0; }
|
||||
#sol-root .sol-s02-card-dm { padding: 24px; border-radius: 20px; background: #111827; border: 1px solid #1f2937; color: #fff; display: flex; flex-direction: column; }
|
||||
#sol-root .sol-s02-badge-dm { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(34,197,94,0.2); color: #4ade80; font-size: 11px; font-weight: 800; }
|
||||
#sol-root .sol-s02-chip-dm { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #f87171; }
|
||||
#sol-root .sol-s02-card-dm h3 { color: #fff; font-size: 17px; font-weight: 800; margin: 0 0 8px; }
|
||||
#sol-root .sol-s02-card-dm p { color: #9ca3af; font-size: 13.5px; line-height: 1.55; margin: 0; }
|
||||
#sol-root .sol-s02-foot { display: block; margin-top: auto; padding-top: 14px; font-size: 12px; line-height: 1.5; font-weight: 600; }
|
||||
#sol-root .sol-s02-foot--old { color: #b91c1c; border-top: 1px solid #fecaca; margin-top: 14px; }
|
||||
#sol-root .sol-s02-foot--dm { color: #6ee7b7; border-top: 1px solid #1f2937; margin-top: 14px; }
|
||||
#sol-root .sol-s02-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
|
||||
|
||||
/* Shared card skeleton. Every row is a fixed-height band so the three titles,
|
||||
the three body blocks and the three outcome lines sit on the same baselines
|
||||
across the row — and across both tabs. */
|
||||
#sol-root .sol-s02-card { position: relative; isolation: isolate; overflow: hidden; padding: 26px 24px 22px; border-radius: 22px; display: flex; flex-direction: column; animation: solFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--i, 0) * 90ms); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.45s, box-shadow 0.45s; }
|
||||
#sol-root .sol-s02-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 2; opacity: 0.75; transition: opacity 0.45s; }
|
||||
#sol-root .sol-s02-card::after { content: ""; position: absolute; z-index: -1; top: -55%; right: -30%; width: 74%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
|
||||
#sol-root .sol-s02-card:hover { transform: translateY(-5px); }
|
||||
#sol-root .sol-s02-card:hover::after { opacity: 1; }
|
||||
#sol-root .sol-s02-card:hover::before { opacity: 1; }
|
||||
|
||||
#sol-root .sol-s02-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin-bottom: 18px; }
|
||||
#sol-root .sol-s02-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.45s, color 0.45s, border-color 0.45s; }
|
||||
#sol-root .sol-s02-ic svg { width: 20px; height: 20px; }
|
||||
#sol-root .sol-s02-stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; min-width: 0; }
|
||||
#sol-root .sol-s02-stat b { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
|
||||
#sol-root .sol-s02-stat i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
|
||||
#sol-root .sol-s02-card h3 { font-size: 16.5px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; text-transform: none; margin: 0 0 10px; }
|
||||
#sol-root .sol-s02-card p { font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
|
||||
#sol-root .sol-s02-foot { display: block; margin-top: auto; padding-top: 15px; font-size: 12px; line-height: 1.55; font-weight: 600; }
|
||||
#sol-root .sol-s02-foot b { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; opacity: 0.75; }
|
||||
|
||||
/* Traditional — paper-red, deliberately flatter and heavier than the DoorMile card. */
|
||||
#sol-root .sol-s02-card--old { background: linear-gradient(168deg, #fff5f5 0%, #fef2f2 55%, #fee9e9 100%); border: 1px solid #f6cfd0; box-shadow: 0 1px 2px rgba(153,27,27,0.04); }
|
||||
#sol-root .sol-s02-card--old::before { background: linear-gradient(90deg, #dc2626, rgba(220,38,38,0)); }
|
||||
#sol-root .sol-s02-card--old::after { background: radial-gradient(circle, rgba(220,38,38,0.1), transparent 68%); }
|
||||
#sol-root .sol-s02-card--old:hover { border-color: #eeb4b6; box-shadow: 0 8px 20px -8px rgba(153,27,27,0.25); }
|
||||
#sol-root .sol-s02-card--old .sol-s02-ic { background: #fee2e2; border: 1px solid #f8c9ca; color: #dc2626; }
|
||||
#sol-root .sol-s02-card--old .sol-s02-stat b { color: #b91c1c; }
|
||||
#sol-root .sol-s02-card--old .sol-s02-stat i { color: rgba(153,27,27,0.6); }
|
||||
#sol-root .sol-s02-card--old h3 { color: #7f1d1d; }
|
||||
#sol-root .sol-s02-card--old p { color: #8b3a3a; }
|
||||
#sol-root .sol-s02-card--old .sol-s02-foot { color: #a03436; border-top: 1px solid #f6cfd0; }
|
||||
#sol-root .sol-s02-card--old .sol-s02-foot b { color: #b91c1c; }
|
||||
|
||||
/* DoorMile — deep navy with a green control accent. */
|
||||
#sol-root .sol-s02-card--dm { background: linear-gradient(168deg, #18233a 0%, #111a2b 52%, #0d1421 100%); border: 1px solid #253148; color: #fff; box-shadow: 0 1px 2px rgba(8,12,20,0.4); }
|
||||
#sol-root .sol-s02-card--dm::before { background: linear-gradient(90deg, #34d399, rgba(52,211,153,0)); }
|
||||
#sol-root .sol-s02-card--dm::after { background: radial-gradient(circle, rgba(52,211,153,0.16), transparent 68%); }
|
||||
#sol-root .sol-s02-card--dm:hover { border-color: rgba(52,211,153,0.4); box-shadow: 0 8px 22px -8px rgba(8,14,26,0.5), 0 0 16px rgba(52,211,153,0.15); }
|
||||
#sol-root .sol-s02-card--dm .sol-s02-ic { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.26); color: #34d399; }
|
||||
#sol-root .sol-s02-card--dm:hover .sol-s02-ic { background: rgba(52,211,153,0.2); border-color: rgba(52,211,153,0.5); }
|
||||
#sol-root .sol-s02-card--dm .sol-s02-stat b { color: #fff; }
|
||||
#sol-root .sol-s02-card--dm .sol-s02-stat i { color: rgba(255,255,255,0.42); }
|
||||
#sol-root .sol-s02-card--dm h3 { color: #fff; }
|
||||
#sol-root .sol-s02-card--dm p { color: #97a3b6; }
|
||||
#sol-root .sol-s02-card--dm .sol-s02-foot { color: #a7f3d0; border-top: 1px solid rgba(255,255,255,0.09); }
|
||||
#sol-root .sol-s02-card--dm .sol-s02-foot b { color: #34d399; }
|
||||
|
||||
#sol-root .sol-s02-ledger { margin-top: 20px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #fecaca; }
|
||||
#sol-root .sol-s02-ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
|
||||
@@ -2645,22 +2719,53 @@ const CSS = `
|
||||
#sol-root .sol-s02-ledger-list li i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #e5e7eb 0 4px, transparent 4px 8px); }
|
||||
#sol-root .sol-s02-ledger-list li b { color: #991b1b; font-weight: 800; white-space: nowrap; }
|
||||
|
||||
#sol-root .sol-s02-media-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 24px; }
|
||||
#sol-root .sol-s02-eyeb { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sol-red); margin-bottom: 10px; }
|
||||
#sol-root .sol-s02-media-copy h4 { color: #111827; font-size: clamp(20px, 2vw, 26px); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
|
||||
/* One panel, photo bled to the edge of its half — no gap, no double frame. */
|
||||
#sol-root .sol-s02-media-row { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 0; align-items: stretch; margin-top: 28px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #e6e9ee; box-shadow: 0 16px 40px -20px rgba(17,24,39,0.18); }
|
||||
#sol-root .sol-s02-media-panel { height: 100%; }
|
||||
#sol-root .sol-s02-media-panel .sol-media-glow { display: none; }
|
||||
/* !important here answers the .sol-sec--white .sol-media-frame override
|
||||
above — inside this panel the frame is a flush cell, not a floating card. */
|
||||
#sol-root .sol-s02-media-panel .sol-media-frame { height: 100%; min-height: 420px; border: 0; border-right: 1px solid #e6e9ee !important; border-radius: 0; box-shadow: none !important; }
|
||||
/* Absolute so the photo contributes no intrinsic height — the panel is sized by
|
||||
the copy column and the image crops to fill whatever that comes out to. */
|
||||
#sol-root .sol-s02-media-panel .sol-media-frame img { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
|
||||
#sol-root .sol-s02-media-panel .sol-media-badge { border-radius: 12px; padding: 9px 13px; background: rgba(11,16,26,0.72); border-color: rgba(255,255,255,0.16); }
|
||||
#sol-root .sol-s02-media-panel .sol-media-badge--tl { left: 16px; top: 16px; }
|
||||
#sol-root .sol-s02-media-panel .sol-media-badge--br { right: 16px; bottom: 16px; }
|
||||
|
||||
#sol-root .sol-s02-media-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3.2vw, 40px); }
|
||||
#sol-root .sol-s02-eyeb { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 13px; border-radius: 999px; background: rgba(192,18,39,0.07); border: 1px solid rgba(192,18,39,0.16); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sol-red); margin-bottom: 14px; }
|
||||
#sol-root .sol-s02-eyeb i { width: 5px; height: 5px; border-radius: 50%; background: var(--sol-red); flex: none; }
|
||||
#sol-root .sol-s02-media-copy h4 { color: #111827; font-size: clamp(20px, 2vw, 27px); font-weight: 800; margin: 0; letter-spacing: -0.015em; line-height: 1.22; max-width: 16ch; }
|
||||
/* Numbered steps read as a sequence; the old hairline rules read as leftovers. */
|
||||
#sol-root .sol-s02-media-copy .sol-minilist { margin-top: 22px; gap: 0; counter-reset: s02step; }
|
||||
#sol-root .sol-s02-media-copy .sol-mini { align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid #eef0f4; }
|
||||
#sol-root .sol-s02-media-copy .sol-mini:first-child { border-top: 0; padding-top: 4px; }
|
||||
#sol-root .sol-s02-media-copy .sol-mini:last-child { padding-bottom: 0; }
|
||||
#sol-root .sol-s02-media-copy .sol-mini-rule { counter-increment: s02step; width: 26px; height: 26px; min-height: 0; align-self: flex-start; margin-top: 1px; border-radius: 9px; background: rgba(192,18,39,0.08); border: 1px solid rgba(192,18,39,0.16); display: flex; align-items: center; justify-content: center; }
|
||||
#sol-root .sol-s02-media-copy .sol-mini-rule::before { content: counter(s02step, decimal-leading-zero); color: var(--sol-red); font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
|
||||
#sol-root .sol-s02-media-copy .sol-mini b { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
|
||||
|
||||
#sol-root .sol-s02-compare { width: 100%; max-width: 1040px; padding: 24px 26px; border-radius: 20px; background: #f9fafb; border: 1px solid #e5e7eb; }
|
||||
#sol-root .sol-s02-compare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
|
||||
#sol-root .sol-s02-compare-head b { color: #111827; font-size: 15px; font-weight: 800; }
|
||||
#sol-root .sol-s02-compare-head span { color: #9ca3af; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
#sol-root .sol-s02-cmp-row { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr); gap: 20px; align-items: center; padding: 12px 0; border-top: 1px solid #eceef1; }
|
||||
#sol-root .sol-s02-cmp-lbl { color: #374151; font-size: 13px; font-weight: 700; }
|
||||
#sol-root .sol-s02-cmp-bars { display: flex; flex-direction: column; gap: 8px; }
|
||||
#sol-root .sol-s02-cmp-line { display: flex; align-items: center; gap: 12px; }
|
||||
#sol-root .sol-s02-cmp-bar { height: 8px; border-radius: 6px; display: block; transform-origin: left center; animation: solGrow 0.9s cubic-bezier(0.16,1,0.3,1) both; }
|
||||
#sol-root .sol-s02-cmp-bar--old { background: #fca5a5; }
|
||||
#sol-root .sol-s02-cmp-bar--dm { background: var(--sol-red); }
|
||||
#sol-root .sol-s02-cmp-line em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #6b7280; white-space: nowrap; }
|
||||
/* The label column used to be 0.7fr — ~500px for a 200px label — and the bars
|
||||
were flex, so a short bar left the rest of the row blank. Now the label
|
||||
column is only as wide as it needs, each bar sits in a full-width rail, and
|
||||
the readouts line up in their own right-hand column. Nothing is loose. */
|
||||
#sol-root .sol-s02-cmp-row { display: grid; grid-template-columns: minmax(140px, 0.33fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid #eceef1; }
|
||||
#sol-root .sol-s02-cmp-lbl { color: #374151; font-size: 13px; font-weight: 700; line-height: 1.4; }
|
||||
#sol-root .sol-s02-cmp-bars { display: flex; flex-direction: column; gap: 10px; }
|
||||
#sol-root .sol-s02-cmp-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) 132px; align-items: center; gap: 14px; }
|
||||
#sol-root .sol-s02-cmp-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: #9ca3af; white-space: nowrap; }
|
||||
#sol-root .sol-s02-cmp-tag--dm { color: var(--sol-red); }
|
||||
#sol-root .sol-s02-cmp-track { position: relative; display: block; height: 9px; border-radius: 6px; background: #ebeef2; overflow: hidden; }
|
||||
#sol-root .sol-s02-cmp-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; display: block; transform-origin: left center; animation: solGrow 0.9s cubic-bezier(0.16,1,0.3,1) both; }
|
||||
#sol-root .sol-s02-cmp-bar--old { background: #f7a9a9; }
|
||||
#sol-root .sol-s02-cmp-bar--dm { background: linear-gradient(90deg, var(--sol-red), var(--sol-red-bright)); }
|
||||
#sol-root .sol-s02-cmp-line em { font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #6b7280; white-space: nowrap; text-align: right; }
|
||||
#sol-root .sol-s02-cmp-line:last-child em { color: #111827; font-weight: 800; }
|
||||
@keyframes solGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
|
||||
|
||||
/* ============================================================
|
||||
@@ -3176,7 +3281,7 @@ const CSS = `
|
||||
============================================================ */
|
||||
#sol-root .sol-mt-hero {
|
||||
position: relative; z-index: 1;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
|
||||
display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
|
||||
align-items: center; gap: clamp(32px, 5vw, 80px);
|
||||
}
|
||||
#sol-root .sol-mt-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
|
||||
@@ -3196,9 +3301,9 @@ const CSS = `
|
||||
#sol-root .sol-sec--mt .sol-mt-h {
|
||||
color: var(--mt-ink) !important;
|
||||
text-transform: none !important;
|
||||
max-width: 18ch;
|
||||
max-width: 22ch;
|
||||
margin: 26px 0 0 !important;
|
||||
font-size: clamp(30px, 3.35vw, 46px) !important;
|
||||
font-size: clamp(32px, 3.5vw, 50px) !important;
|
||||
line-height: 1.16 !important;
|
||||
letter-spacing: -0.028em !important;
|
||||
font-weight: 800 !important;
|
||||
@@ -3232,8 +3337,8 @@ const CSS = `
|
||||
/* ============================================================
|
||||
2. DECISION GRAPH — the section's only red glow sits behind this
|
||||
============================================================ */
|
||||
#sol-root .sol-mt-viz { position: relative; display: flex; justify-content: center; align-items: center; }
|
||||
#sol-root .sol-mt-graph { position: relative; width: 100%; max-width: 680px; aspect-ratio: 680 / 400; }
|
||||
#sol-root .sol-mt-viz { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }
|
||||
#sol-root .sol-mt-graph { position: relative; width: 100%; max-width: 840px; aspect-ratio: 680 / 400; }
|
||||
/* Wide and soft, so the nucleus sits IN light rather than becoming a hot blob
|
||||
that outshines the graph it is supposed to anchor. */
|
||||
#sol-root .sol-mt-graph-glow {
|
||||
@@ -3395,8 +3500,14 @@ const CSS = `
|
||||
#sol-root .sol-in { width: calc(100% - 20px); }
|
||||
#sol-root .sol-bg { left: 10px; right: 10px; }
|
||||
#sol-root .sol-s01-pain-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
#sol-root .sol-s01-split, #sol-root .sol-s03-canvas, #sol-root .sol-s04-split, #sol-root .sol-s05-scenario-grid, #sol-root .sol-s06-card, #sol-root .sol-s02-media-row, #sol-root .sol-wings-row { grid-template-columns: 1fr; gap: 32px; }
|
||||
#sol-root .sol-s02-grid-3 { grid-template-columns: 1fr; }
|
||||
#sol-root .sol-s01-split, #sol-root .sol-s03-canvas, #sol-root .sol-s04-split, #sol-root .sol-s05-scenario-grid, #sol-root .sol-s06-card, #sol-root .sol-wings-row { grid-template-columns: 1fr; gap: 32px; }
|
||||
/* Stacks, but stays one seamless panel — gap 0, and the photo's divider
|
||||
moves from the right edge to the bottom edge. */
|
||||
#sol-root .sol-s02-media-row { grid-template-columns: 1fr; gap: 0; }
|
||||
#sol-root .sol-s02-media-panel .sol-media-frame { min-height: 0; aspect-ratio: 2 / 1; border-right: 0 !important; border-bottom: 1px solid #e6e9ee !important; }
|
||||
/* Two up before one up — three full-width cards is a lot of scrolling. */
|
||||
#sol-root .sol-s02-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
#sol-root .sol-s02-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
|
||||
#sol-root .sol-off-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
#sol-root .sol-sec--mt { padding: 84px 0; }
|
||||
/* Graph first: the AI centrepiece should still be the first thing seen. */
|
||||
@@ -3410,7 +3521,7 @@ const CSS = `
|
||||
/* The console is a wide readout with real type in it, not the symmetric
|
||||
emblem this used to cap at 380px — starve it of width and the footer
|
||||
figures stop being legible. Let it take the column. */
|
||||
#sol-root .sol-mt-graph { max-width: 560px; }
|
||||
#sol-root .sol-mt-graph { max-width: 760px; }
|
||||
/* Full-width cards go horizontal: icon left, copy right. */
|
||||
#sol-root .sol-mt-cards { grid-template-columns: 1fr; gap: 18px; }
|
||||
#sol-root .sol-mt-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic title" "ic body"; column-gap: 24px; }
|
||||
@@ -3444,7 +3555,14 @@ const CSS = `
|
||||
#sol-root .sol-h { font-size: clamp(26px, 8vw, 34px) !important; }
|
||||
#sol-root .sol-s01-pain-grid { grid-template-columns: 1fr; }
|
||||
#sol-root .sol-s01-floats { grid-template-columns: 1fr; }
|
||||
#sol-root .sol-s02-cmp-row { grid-template-columns: 1fr; gap: 8px; }
|
||||
#sol-root .sol-s02-cmp-row { grid-template-columns: 1fr; gap: 10px; }
|
||||
#sol-root .sol-s02-cmp-line { grid-template-columns: 74px minmax(0, 1fr) 78px; gap: 8px; }
|
||||
#sol-root .sol-s02-cmp-line em { font-size: 10.5px; white-space: normal; }
|
||||
#sol-root .sol-s02-grid-3 { grid-template-columns: 1fr; gap: 14px; }
|
||||
#sol-root .sol-s02-card { padding: 22px 20px 20px; }
|
||||
#sol-root .sol-s02-media-row { border-radius: 20px; }
|
||||
#sol-root .sol-s02-media-panel .sol-media-frame { aspect-ratio: 4 / 3; }
|
||||
#sol-root .sol-s02-media-copy h4 { max-width: none; }
|
||||
#sol-root .sol-s02-toggle-bar { width: 100%; }
|
||||
#sol-root .sol-s02-tgl-btn { flex: 1 1 100%; padding: 10px 14px; font-size: 12px; }
|
||||
#sol-root .sol-s03-canvas, #sol-root .sol-s06-card { padding: 22px; }
|
||||
@@ -3477,6 +3595,7 @@ const CSS = `
|
||||
#sol-root .sol-ticker-track,
|
||||
#sol-root .sol-s02-cmp-bar,
|
||||
#sol-root .sol-s02-view,
|
||||
#sol-root .sol-s02-card,
|
||||
#sol-root .sol-s03-art,
|
||||
#sol-root .sol-s03-art-svg .sa-radar,
|
||||
#sol-root .sol-s03-art-svg .sa-road-dash,
|
||||
|
||||
Reference in New Issue
Block a user