Update Plan-B branding and email design
This commit is contained in:
Dorian
@@ -1,5 +1,5 @@
|
||||
services:
|
||||
kammergut:
|
||||
plan-b:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
@@ -7,7 +7,7 @@ services:
|
||||
# step would otherwise try to fetch this name from a registry and
|
||||
# fail with "pull access denied" since the image is built locally.
|
||||
# Compose builds from `build:` during `up`.
|
||||
container_name: kammergut
|
||||
container_name: plan-b
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "4422:80"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
||||
<title>Deepstock — Survival Preparedness Advisor</title>
|
||||
<title>Plan-B — Survival Preparedness Advisor</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Serif+Display&family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
||||
<title data-i18n="page_title">Deepstock — Survival Preparedness Advisor</title>
|
||||
<title data-i18n="page_title">Plan-B — Survival Preparedness Advisor</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Serif+Display&family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
@@ -119,10 +119,10 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
/* Mobile (default): fill viewport minus 16px gutters each side.
|
||||
Divisor 5 ≈ measured ratio of "Deepstock" rendered width to font-size
|
||||
Divisor 5 ≈ measured ratio of "Plan-B" rendered width to font-size
|
||||
in DM Serif Display at 0.05em tracking. Tweak if the text overflows
|
||||
or under-fills its container. */
|
||||
/* Divisor 7 leaves enough horizontal room for the wider "Kammergut"
|
||||
/* Divisor 7 leaves enough horizontal room for the wider "Plan-B"
|
||||
wordmark without overflow at the mobile/tablet breakpoint
|
||||
transition (~704px was clipping at /6). */
|
||||
font-size: calc((100vw - 48px) / 7);
|
||||
@@ -1413,7 +1413,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
</svg>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="logo" data-i18n="brand">Deepstock</div>
|
||||
<div class="logo" data-i18n="brand">Plan-B</div>
|
||||
<div class="header-right">
|
||||
<button class="mod-open-btn" id="modOpenBtn" type="button" title="Open style modifier" aria-label="Open style modifier">⚙</button>
|
||||
<div id="region-indicator" style="font-family:var(--font-mono);font-size:10px;color:var(--text-dim);padding:4px 8px;background:var(--panel);border:1px solid var(--border);border-radius:4px;white-space:nowrap;cursor:pointer;" onclick="showRegionPicker()" title="Click to change region"></div>
|
||||
@@ -1477,7 +1477,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero" id="hero-section">
|
||||
<h1 class="paint-3d" data-i18n="brand">Deepstock</h1>
|
||||
<h1 class="paint-3d" data-i18n="brand">Plan-B</h1>
|
||||
<p class="hero-sub">Preparedness, refined.</p>
|
||||
<button class="cta-btn" onclick="startQuiz()">
|
||||
<span>Begin</span>
|
||||
@@ -1512,7 +1512,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
<!-- QUESTIONNAIRE -->
|
||||
<section class="quiz-section hidden" id="quiz-section">
|
||||
<div class="quiz-progress-bar">
|
||||
<a class="qpb-logo logo" data-i18n="brand" href="#" aria-label="Back to landing page" onclick="event.preventDefault(); restartQuiz();">Deepstock</a>
|
||||
<a class="qpb-logo logo" data-i18n="brand" href="#" aria-label="Back to landing page" onclick="event.preventDefault(); restartQuiz();">Plan-B</a>
|
||||
<div class="progress-wrap">
|
||||
<div class="progress-header">
|
||||
<span class="progress-label" data-i18n="progress_label">Assessment Progress</span>
|
||||
@@ -1539,7 +1539,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
<div class="protein-offer" id="protein-offer-section">
|
||||
<div class="protein-offer-badge">🔒 <span data-i18n="protein_offer_badge">Exclusive — DACH Region Priority Access</span></div>
|
||||
<div class="protein-offer-title" data-i18n="protein_offer_title">Secure your high-grade animal protein source</div>
|
||||
<div class="protein-offer-body" data-i18n="protein_offer_body">You indicated that your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Deepstock members in Germany, Austria, and Switzerland.</div>
|
||||
<div class="protein-offer-body" data-i18n="protein_offer_body">You indicated that your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Plan-B members in Germany, Austria, and Switzerland.</div>
|
||||
<a class="protein-offer-btn" href="PROTEIN_OFFER_URL" target="_blank" rel="noopener noreferrer" data-i18n="protein_offer_btn">→ Secure My Protein Source Now</a>
|
||||
</div>
|
||||
|
||||
@@ -1658,7 +1658,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
<label class="newsletter-check">
|
||||
<input type="checkbox" id="f_newsletter" name="newsletter" value="yes" checked/>
|
||||
<span class="check-box"></span>
|
||||
<span class="check-label" data-i18n="newsletter_label">Yes, send me weekly preparedness updates from Deepstock</span>
|
||||
<span class="check-label" data-i18n="newsletter_label">Yes, send me weekly preparedness updates from Plan-B</span>
|
||||
</label>
|
||||
<button class="capture-submit" type="submit" id="capture-submit-btn">
|
||||
<span data-i18n="capture_btn">Send Me My Plan →</span>
|
||||
@@ -1700,7 +1700,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="about-section" id="about-section">
|
||||
<h2 data-i18n="about_title">Why Deepstock?</h2>
|
||||
<h2 data-i18n="about_title">Why Plan-B?</h2>
|
||||
<p data-i18n="about_text">Built by preparedness researchers and city-dwelling practitioners. Every recommendation is sourced, tested, and city-apartment-compatible.</p>
|
||||
<p class="affiliate-note" data-i18n="affiliate_note">* This site uses affiliate links. When you purchase through our links, we may earn a commission at no extra cost to you. This helps keep the platform free.</p>
|
||||
</section>
|
||||
@@ -1713,10 +1713,10 @@ body.mod-open .mod-panel { display: block; }
|
||||
// ══════════════════════════════════════
|
||||
const T = {
|
||||
en: {
|
||||
brand: "Deepstock",
|
||||
page_title: "Deepstock — Survival Preparedness Advisor",
|
||||
brand: "Plan-B",
|
||||
page_title: "Plan-B — Survival Preparedness Advisor",
|
||||
hero_eyebrow: "Crisis Preparedness Advisor",
|
||||
hero_sub: "Preparedness, refined.",
|
||||
hero_sub: "AI-Assisted Preparedness for Urban Households",
|
||||
hero_cta: "Start Assessment",
|
||||
stat_scenarios: "Scenarios",
|
||||
stat_questions: "Questions",
|
||||
@@ -1745,7 +1745,7 @@ const T = {
|
||||
tab_s4: "🌿 Food\nShortage",
|
||||
timeline_title: "⏱ Your Action Timeline",
|
||||
restart_btn: "↩ Retake Assessment",
|
||||
about_title: "Why Deepstock?",
|
||||
about_title: "Why Plan-B?",
|
||||
about_text: "Built by preparedness researchers and city-dwelling practitioners. Every recommendation is sourced, tested, and city-apartment-compatible.",
|
||||
affiliate_note: "* This site uses affiliate links. When you purchase through our links, we may earn a commission at no extra cost to you. This helps keep the platform free.",
|
||||
budget_title: "📊 Budget Allocation",
|
||||
@@ -1771,7 +1771,7 @@ const T = {
|
||||
field_lastname: "Last Name",
|
||||
scroll_hint:"↓ COMPLETE YOUR PROFILE BELOW TO RECEIVE YOUR PLAN",
|
||||
capture_required:"",
|
||||
newsletter_label:"Yes, send me weekly preparedness updates from Deepstock",
|
||||
newsletter_label:"Yes, send me weekly preparedness updates from Plan-B",
|
||||
capture_label:"📋 Get Your Full Report",
|
||||
capture_title:"Personal Details",
|
||||
capture_sub:"We send your complete survival plan to your inbox plus weekly updates.",
|
||||
@@ -1785,7 +1785,7 @@ const T = {
|
||||
privacy_note:"Your data is never sold. Unsubscribe anytime. GDPR compliant.",
|
||||
protein_offer_badge:"Exclusive — DACH Region Priority Access",
|
||||
protein_offer_title:"Secure your high-grade animal protein source",
|
||||
protein_offer_body:"You indicated your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Deepstock members in Germany, Austria, and Switzerland.",
|
||||
protein_offer_body:"You indicated your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Plan-B members in Germany, Austria, and Switzerland.",
|
||||
protein_offer_btn:"→ Secure My Protein Source Now",
|
||||
capture_header:"Personal Details",
|
||||
cta_scroll:"↓ Fill in your details below to receive your personalised plan by email",
|
||||
@@ -1810,10 +1810,10 @@ const T = {
|
||||
tl_a5: "Solar generator (500Wh) + sleeping bags + Baofeng radios + cash reserve.",
|
||||
},
|
||||
de: {
|
||||
brand: "Kammergut",
|
||||
page_title: "Kammergut — Krisenvorsorge-Berater",
|
||||
brand: "Plan-B",
|
||||
page_title: "Plan-B — Krisenvorsorge-Berater",
|
||||
hero_eyebrow: "⚡ Krisenvorsorge-Berater",
|
||||
hero_sub: "Beantworte 8 Fragen. Erhalte einen personalisierten Notfallplan für deinen Haushalt — mit konkreten Produkten, Kosten und Maßnahmen.",
|
||||
hero_sub: "KI-gestützte Vorsorge für urbane Haushalte",
|
||||
hero_cta: "Jetzt starten",
|
||||
stat_scenarios: "Szenarien",
|
||||
stat_questions: "Fragen",
|
||||
@@ -1842,7 +1842,7 @@ const T = {
|
||||
tab_s4: "🌿 Lebens-\nmittelkrise",
|
||||
timeline_title: "⏱ Dein Aktionsplan",
|
||||
restart_btn: "↩ Neu starten",
|
||||
about_title: "Warum Kammergut?",
|
||||
about_title: "Warum Plan-B?",
|
||||
about_text: "Entwickelt von Vorsorge-Forschern und Stadtbewohnern. Jede Empfehlung ist recherchiert, getestet und für Stadtwohnungen geeignet.",
|
||||
affiliate_note: "* Diese Website nutzt Affiliate-Links. Beim Kauf über unsere Links erhalten wir eine Provision ohne Mehrkosten für dich. So bleibt die Plattform kostenlos.",
|
||||
budget_title: "📊 Budgetverteilung",
|
||||
@@ -1868,7 +1868,7 @@ const T = {
|
||||
field_lastname: "Nachname",
|
||||
scroll_hint:"↓ PROFIL AUSFÜLLEN UM DEINEN PLAN ZU ERHALTEN",
|
||||
capture_required:"",
|
||||
newsletter_label:"Ja, ich möchte wöchentliche Vorsorge-Updates von Kammergut erhalten",
|
||||
newsletter_label:"Ja, ich möchte wöchentliche Vorsorge-Updates von Plan-B erhalten",
|
||||
capture_label:"",
|
||||
capture_title:"Persönliche Angaben",
|
||||
capture_sub:"Gib deine Daten ein — wir senden dir deinen vollständigen Plan sofort per E-Mail.",
|
||||
@@ -1882,7 +1882,7 @@ const T = {
|
||||
privacy_note:"Deine Daten werden nie verkauft. Jederzeit abmeldbar. DSGVO-konform.",
|
||||
protein_offer_badge:"Exklusiv — DACH Region Prioritätszugang",
|
||||
protein_offer_title:"Sichere deine hochwertige tierische Proteinquelle",
|
||||
protein_offer_body:"Du hast angegeben, dass deine Proteinversorgung in einer Krise möglicherweise nicht gesichert ist. Wir haben eine exklusive, geprüfte Quelle für hochwertiges tierisches Protein identifiziert — mit Prioritätszugang für Kammergut Mitglieder in Deutschland, Österreich und der Schweiz.",
|
||||
protein_offer_body:"Du hast angegeben, dass deine Proteinversorgung in einer Krise möglicherweise nicht gesichert ist. Wir haben eine exklusive, geprüfte Quelle für hochwertiges tierisches Protein identifiziert — mit Prioritätszugang für Plan-B Mitglieder in Deutschland, Österreich und der Schweiz.",
|
||||
protein_offer_btn:"→ Jetzt Proteinquelle sichern",
|
||||
capture_header:"Persönliche Daten",
|
||||
cta_scroll:"↓ Fülle deine Daten aus um deinen personalisierten Plan per E-Mail zu erhalten",
|
||||
@@ -2540,7 +2540,7 @@ function submitCapture(e) {
|
||||
language_used: currentLang,
|
||||
submitted_at: new Date().toISOString(),
|
||||
send_email: 'yes',
|
||||
_subject: (T[currentLang].brand || 'Deepstock') + ' — ' + lvl + ' — ' + firstName + ' ' + lastName + ' — ' + city + ', ' + country
|
||||
_subject: (T[currentLang].brand || 'Plan-B') + ' — ' + lvl + ' — ' + firstName + ' ' + lastName + ' — ' + city + ', ' + country
|
||||
};
|
||||
|
||||
const showSuccess = () => {
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "kammergut",
|
||||
"name": "plan-b",
|
||||
"version": "0.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "kammergut",
|
||||
"name": "plan-b",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"vue": "3.5.13"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "kammergut",
|
||||
"name": "plan-b",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
|
||||
114
public/email-template.html
Normal file
114
public/email-template.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{brand}} Preparedness Plan</title>
|
||||
<style>
|
||||
body, table, td, p, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; }
|
||||
img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; }
|
||||
body { margin: 0; padding: 0; width: 100% !important; background: #FAFAFA; }
|
||||
.body { background: #FAFAFA; color: #5A5A54; font-family: Arial, Helvetica, sans-serif; }
|
||||
.wrap { width: 100%; max-width: 640px; margin: 0 auto; }
|
||||
.panel { background: #FAFAFA; border: 1px solid #E4E4E0; border-radius: 16px; box-shadow: 0 7px 11px rgba(0,0,0,0.12); overflow: hidden; }
|
||||
.header { background: #F0F0F0; border-bottom: 1px solid #E4E4E0; padding: 24px; }
|
||||
.brand { font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height: 1; color: #1A1A18; }
|
||||
.kicker { margin-top: 14px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #4A8A68; font-weight: 700; }
|
||||
.title { margin: 8px 0 0; font-size: 30px; line-height: 1.08; letter-spacing: 1px; text-transform: uppercase; color: #3A3A34; font-weight: 800; }
|
||||
.copy { font-size: 15px; line-height: 1.7; color: #5A5A54; }
|
||||
.sage { background: #E5F0E0; border: 1px solid #C7DDCE; border-radius: 10px; padding: 16px; }
|
||||
.metric { background: #F0F0F0; border: 1px solid #E4E4E0; border-radius: 10px; padding: 14px; }
|
||||
.label { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #8A8A84; font-weight: 700; }
|
||||
.value { margin-top: 5px; font-size: 18px; line-height: 1.25; color: #1A1A18; font-weight: 700; }
|
||||
.button { display: inline-block; background: #2A3010; color: #F4ECD8 !important; text-decoration: none; padding: 15px 22px; border-radius: 2px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
|
||||
.section-title { font-size: 16px; color: #1A1A18; font-weight: 800; letter-spacing: .3px; }
|
||||
.item { border-top: 1px solid #E4E4E0; padding-top: 14px; margin-top: 14px; }
|
||||
.footer { color: #8A8A84; font-size: 12px; line-height: 1.7; }
|
||||
@media screen and (max-width: 680px) {
|
||||
.pad { padding-left: 16px !important; padding-right: 16px !important; }
|
||||
.title { font-size: 24px !important; }
|
||||
.stack { display: block !important; width: 100% !important; }
|
||||
.stack + .stack { margin-top: 10px !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table role="presentation" width="100%" class="body" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td align="center" style="padding: 28px 12px;">
|
||||
<table role="presentation" class="wrap" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="panel">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="header pad">
|
||||
<div class="brand">{{brand}}</div>
|
||||
<div class="kicker">Personal Preparedness Plan</div>
|
||||
<h1 class="title">{{risk_level}} Readiness Report</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pad" style="padding: 24px;">
|
||||
<p class="copy" style="margin: 0 0 18px;">Hi {{first_name}}, your assessment is complete. Below is the compact version of your plan, built from your household details, location, priorities, and current supply buffer.</p>
|
||||
|
||||
<div class="sage">
|
||||
<div class="label">Assessment Summary</div>
|
||||
<p class="copy" style="margin: 8px 0 0;">{{narrative_summary}}</p>
|
||||
</div>
|
||||
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-top: 16px;">
|
||||
<tr>
|
||||
<td class="stack" width="50%" style="padding-right: 6px;">
|
||||
<div class="metric">
|
||||
<div class="label">Risk Score</div>
|
||||
<div class="value">{{risk_score}}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="stack" width="50%" style="padding-left: 6px;">
|
||||
<div class="metric">
|
||||
<div class="label">Priority Scenario</div>
|
||||
<div class="value">{{primary_scenario}}</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="margin-top: 24px;">
|
||||
<div class="section-title">Immediate Actions</div>
|
||||
<div class="item">
|
||||
<div class="label">First 7 Days</div>
|
||||
<p class="copy" style="margin: 6px 0 0;">{{action_week_1}}</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">First 30 Days</div>
|
||||
<p class="copy" style="margin: 6px 0 0;">{{action_month_1}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 24px;">
|
||||
<div class="section-title">Recommended Supplies</div>
|
||||
<div class="item">
|
||||
<p class="copy" style="margin: 0;">{{recommendations}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 26px; text-align: center;">
|
||||
<a class="button" href="{{plan_url}}">Open Full Plan</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pad" style="padding: 18px 24px 24px; background: #F0F0F0; border-top: 1px solid #E4E4E0;">
|
||||
<p class="footer" style="margin: 0;">You are receiving this because you requested your {{brand}} preparedness plan. Your data is never sold. <a href="{{unsubscribe_url}}" style="color: #4A8A68;">Unsubscribe</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
62
src/App.vue
62
src/App.vue
@@ -263,7 +263,7 @@
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<a class="logo" data-i18n="brand" href="#" aria-label="Back to landing page" @click.prevent="restartQuiz">Deepstock</a>
|
||||
<a class="logo" data-i18n="brand" href="#" aria-label="Back to landing page" @click.prevent="restartQuiz">Plan-B</a>
|
||||
<div class="header-right">
|
||||
<button class="mod-open-btn" id="modOpenBtn" type="button" title="Open style modifier" aria-label="Open style modifier">⚙</button>
|
||||
<div id="region-indicator" style="font-family:var(--font-mono);font-size:10px;color:var(--text-dim);padding:4px 8px;background:var(--panel);border:1px solid var(--border);border-radius:4px;white-space:nowrap;cursor:pointer;" @click="showRegionPicker" title="Click to change region"></div>
|
||||
@@ -345,8 +345,8 @@
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero" id="hero-section">
|
||||
<h1 class="paint-3d" data-i18n="brand">Deepstock</h1>
|
||||
<p class="hero-sub" data-i18n="hero_sub">Crisis Preparedness</p>
|
||||
<h1 class="paint-3d" data-i18n="brand">Plan-B</h1>
|
||||
<p class="hero-sub" data-i18n="hero_sub">AI-Assisted Preparedness for Urban Households</p>
|
||||
<button class="cta-btn" @click="startQuiz">
|
||||
<span data-i18n="hero_cta">Begin</span>
|
||||
</button>
|
||||
@@ -379,7 +379,7 @@
|
||||
<!-- QUESTIONNAIRE -->
|
||||
<section class="quiz-section hidden" id="quiz-section">
|
||||
<div class="quiz-progress-bar">
|
||||
<a class="qpb-logo logo" data-i18n="brand" href="#" aria-label="Back to landing page" @click.prevent="restartQuiz">Deepstock</a>
|
||||
<a class="qpb-logo logo" data-i18n="brand" href="#" aria-label="Back to landing page" @click.prevent="restartQuiz">Plan-B</a>
|
||||
<div class="progress-wrap">
|
||||
<div class="progress-header">
|
||||
<span class="progress-label" data-i18n="progress_label">Assessment Progress</span>
|
||||
@@ -406,7 +406,7 @@
|
||||
<div class="protein-offer assessment-reveal" id="protein-offer-section">
|
||||
<div class="protein-offer-badge"><span class="badge-icon" v-html="icon('lock', 12)"></span><span data-i18n="protein_offer_badge">Exclusive — DACH Region Priority Access</span></div>
|
||||
<div class="protein-offer-title" data-i18n="protein_offer_title">Secure your high-grade animal protein source</div>
|
||||
<div class="protein-offer-body" data-i18n="protein_offer_body">You indicated that your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Deepstock members in Germany, Austria, and Switzerland.</div>
|
||||
<div class="protein-offer-body" data-i18n="protein_offer_body">You indicated that your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Plan-B members in Germany, Austria, and Switzerland.</div>
|
||||
<a class="protein-offer-btn" href="PROTEIN_OFFER_URL" target="_blank" rel="noopener noreferrer">
|
||||
<span class="po-label-mobile" data-i18n="protein_offer_btn_short">Secure Source Now</span>
|
||||
<span class="po-label-desktop" data-i18n="protein_offer_btn">Secure protein source now</span>
|
||||
@@ -438,9 +438,15 @@
|
||||
|
||||
<!-- CAPTURE FORM (modal) -->
|
||||
<div class="form-modal" id="capture-modal" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="capture-modal-title" @click="onModalBackdropClick">
|
||||
<div class="form-modal-panel" @click.stop>
|
||||
<div class="form-modal-header">
|
||||
<div class="modal-title" id="capture-modal-title" data-i18n="capture_title">Personal Details</div>
|
||||
<div class="form-modal-panel" @click.stop>
|
||||
<div class="form-modal-header">
|
||||
<div class="modal-title-group">
|
||||
<span class="modal-kicker" data-i18n="capture_kicker">Plan-B Dispatch</span>
|
||||
<div class="modal-title" id="capture-modal-title">
|
||||
<span class="modal-title-icon" v-html="icon('mail', 18)"></span>
|
||||
<span data-i18n="capture_title">Receive your plan</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="form-modal-close" @click="closeCaptureModal" aria-label="Close">×</button>
|
||||
</div>
|
||||
|
||||
@@ -554,7 +560,7 @@
|
||||
<label class="newsletter-check">
|
||||
<input type="checkbox" id="f_newsletter" name="newsletter" value="yes" checked/>
|
||||
<span class="check-box"></span>
|
||||
<span class="check-label" data-i18n="newsletter_label">Yes, send me weekly preparedness updates from Deepstock</span>
|
||||
<span class="check-label" data-i18n="newsletter_label">Yes, send me weekly preparedness updates from Plan-B</span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
@@ -615,7 +621,7 @@
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="about-section" id="about-section">
|
||||
<h2 data-i18n="about_title">Why Deepstock?</h2>
|
||||
<h2 data-i18n="about_title">Why Plan-B?</h2>
|
||||
<p data-i18n="about_text">Built by preparedness researchers and city-dwelling practitioners. Every recommendation is sourced, tested, and city-apartment-compatible.</p>
|
||||
<p class="affiliate-note" data-i18n="affiliate_note">* This site uses affiliate links. When you purchase through our links, we may earn a commission at no extra cost to you. This helps keep the platform free.</p>
|
||||
</section>
|
||||
@@ -631,10 +637,10 @@ import { onMounted } from 'vue'
|
||||
// ══════════════════════════════════════
|
||||
const T = {
|
||||
en: {
|
||||
brand: "Deepstock",
|
||||
page_title: "Deepstock — Survival Preparedness Advisor",
|
||||
brand: "Plan-B",
|
||||
page_title: "Plan-B — Survival Preparedness Advisor",
|
||||
hero_eyebrow: "Crisis Preparedness Advisor",
|
||||
hero_sub: "Crisis Preparedness",
|
||||
hero_sub: "AI-Assisted Preparedness for Urban Households",
|
||||
hero_cta: "Begin",
|
||||
intro_l1: "For crisis bows to him who plans with care",
|
||||
intro_l2: "And fortune favors those who well prepare",
|
||||
@@ -650,6 +656,7 @@ const T = {
|
||||
email_note: "No spam. Unsubscribe anytime. Your data is never sold.",
|
||||
results_email_title: "Save your plan & get updates",
|
||||
results_email_sub: "We'll email you your personalised plan plus weekly preparedness updates.",
|
||||
capture_kicker: "Plan-B Dispatch",
|
||||
pill_s1:"📦 Supply Shock", pill_s2:"🌾 Food Crisis",
|
||||
pill_s3:"📈 Hyperinflation", pill_s4:"🏦 Bank Crisis",
|
||||
pill_s5:"⚡ Power Outage", pill_s6:"💧 Water Failure",
|
||||
@@ -670,7 +677,7 @@ const T = {
|
||||
panel_budget: "Budget Plan",
|
||||
panel_timeline: "Action Timeline",
|
||||
restart_btn: "Retake Assessment",
|
||||
about_title: "Why Deepstock?",
|
||||
about_title: "Why Plan-B?",
|
||||
about_text: "Built by preparedness researchers and city-dwelling practitioners. Every recommendation is sourced, tested, and city-apartment-compatible.",
|
||||
affiliate_note: "* This site uses affiliate links. When you purchase through our links, we may earn a commission at no extra cost to you. This helps keep the platform free.",
|
||||
budget_title: "Budget Allocation",
|
||||
@@ -694,9 +701,9 @@ const T = {
|
||||
field_lastname: "Last Name",
|
||||
scroll_hint:"↓ COMPLETE YOUR PROFILE BELOW TO RECEIVE YOUR PLAN",
|
||||
capture_required:"",
|
||||
newsletter_label:"Yes, send me weekly preparedness updates from Deepstock",
|
||||
newsletter_label:"Yes, send me weekly preparedness updates from Plan-B",
|
||||
capture_label:"📋 Get Your Full Report",
|
||||
capture_title:"Personal Details",
|
||||
capture_title:"Receive your plan",
|
||||
capture_sub:"We send your complete survival plan to your inbox plus weekly updates.",
|
||||
field_email:"Email",field_name:"First Name",field_city:"City",field_country:"Country",
|
||||
field_pref_lang:"Preferred language",field_phone:"Phone (optional)",
|
||||
@@ -708,7 +715,7 @@ const T = {
|
||||
privacy_note:"Your data is never sold. Unsubscribe anytime. GDPR compliant.",
|
||||
protein_offer_badge:"Exclusive — DACH Region Priority Access",
|
||||
protein_offer_title:"Secure your high-grade animal protein source",
|
||||
protein_offer_body:"You indicated your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Deepstock members in Germany, Austria, and Switzerland.",
|
||||
protein_offer_body:"You indicated your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Plan-B members in Germany, Austria, and Switzerland.",
|
||||
protein_offer_btn:"Secure protein source now",
|
||||
protein_offer_btn_short:"Secure Source Now",
|
||||
capture_header:"Personal Details",
|
||||
@@ -751,10 +758,10 @@ const T = {
|
||||
country_other: "Other",
|
||||
},
|
||||
de: {
|
||||
brand: "Kammergut",
|
||||
page_title: "Kammergut — Krisenvorsorge-Berater",
|
||||
brand: "Plan-B",
|
||||
page_title: "Plan-B — Krisenvorsorge-Berater",
|
||||
hero_eyebrow: "⚡ Krisenvorsorge-Berater",
|
||||
hero_sub: "Krisenvorsorge",
|
||||
hero_sub: "KI-gestützte Vorsorge für urbane Haushalte",
|
||||
hero_cta: "Beginnen",
|
||||
intro_l1: "Die Krise beugt sich dem, der wohl bedacht",
|
||||
intro_l2: "Und Glück gehört dem, der sich stark gemacht",
|
||||
@@ -770,6 +777,7 @@ const T = {
|
||||
email_note: "Kein Spam. Jederzeit abmeldbar. Deine Daten werden nie verkauft.",
|
||||
results_email_title: "Plan speichern & Updates erhalten",
|
||||
results_email_sub: "Wir senden dir deinen personalisierten Plan sowie wöchentliche Vorsorge-Updates per E-Mail.",
|
||||
capture_kicker: "Plan-B Depesche",
|
||||
pill_s1:"📦 Versorgungsengpass", pill_s2:"🌾 Lebensmittelkrise",
|
||||
pill_s3:"📈 Hyperinflation", pill_s4:"🏦 Bankenkrise",
|
||||
pill_s5:"⚡ Stromausfall", pill_s6:"💧 Wasserversorgung",
|
||||
@@ -790,7 +798,7 @@ const T = {
|
||||
panel_budget: "Budgetplan",
|
||||
panel_timeline: "Aktionsplan",
|
||||
restart_btn: "Neu starten",
|
||||
about_title: "Warum Kammergut?",
|
||||
about_title: "Warum Plan-B?",
|
||||
about_text: "Entwickelt von Vorsorge-Forschern und Stadtbewohnern. Jede Empfehlung ist recherchiert, getestet und für Stadtwohnungen geeignet.",
|
||||
affiliate_note: "* Diese Website nutzt Affiliate-Links. Beim Kauf über unsere Links erhalten wir eine Provision ohne Mehrkosten für dich. So bleibt die Plattform kostenlos.",
|
||||
budget_title: "Budgetverteilung",
|
||||
@@ -814,9 +822,9 @@ const T = {
|
||||
field_lastname: "Nachname",
|
||||
scroll_hint:"↓ PROFIL AUSFÜLLEN UM DEINEN PLAN ZU ERHALTEN",
|
||||
capture_required:"",
|
||||
newsletter_label:"Ja, ich möchte wöchentliche Vorsorge-Updates von Kammergut erhalten",
|
||||
newsletter_label:"Ja, ich möchte wöchentliche Vorsorge-Updates von Plan-B erhalten",
|
||||
capture_label:"",
|
||||
capture_title:"Persönliche Angaben",
|
||||
capture_title:"Plan per E-Mail erhalten",
|
||||
capture_sub:"Gib deine Daten ein — wir senden dir deinen vollständigen Plan sofort per E-Mail.",
|
||||
field_email:"E-Mail",field_name:"Vorname",field_city:"Stadt",field_country:"Land",
|
||||
field_pref_lang:"Bevorzugte Sprache",field_phone:"Telefon (optional)",
|
||||
@@ -828,7 +836,7 @@ const T = {
|
||||
privacy_note:"Deine Daten werden nie verkauft. Jederzeit abmeldbar. DSGVO-konform.",
|
||||
protein_offer_badge:"Exklusiv — DACH Region Prioritätszugang",
|
||||
protein_offer_title:"Sichere deine hochwertige tierische Proteinquelle",
|
||||
protein_offer_body:"Du hast angegeben, dass deine Proteinversorgung in einer Krise möglicherweise nicht gesichert ist. Wir haben eine exklusive, geprüfte Quelle für hochwertiges tierisches Protein identifiziert — mit Prioritätszugang für Kammergut Mitglieder in Deutschland, Österreich und der Schweiz.",
|
||||
protein_offer_body:"Du hast angegeben, dass deine Proteinversorgung in einer Krise möglicherweise nicht gesichert ist. Wir haben eine exklusive, geprüfte Quelle für hochwertiges tierisches Protein identifiziert — mit Prioritätszugang für Plan-B Mitglieder in Deutschland, Österreich und der Schweiz.",
|
||||
protein_offer_btn:"Proteinquelle sichern",
|
||||
protein_offer_btn_short:"Quelle sichern",
|
||||
capture_header:"Persönliche Daten",
|
||||
@@ -1080,7 +1088,7 @@ let riskLevelStr = ''
|
||||
// dies when the tab closes (privacy-friendly default for a lead form),
|
||||
// but reload / nav-away-and-back restores. Bump the key suffix when the
|
||||
// QUESTIONS shape changes incompatibly.
|
||||
const STATE_KEY = 'kammergut.state.v1'
|
||||
const STATE_KEY = 'plan-b.state.v1'
|
||||
function getStage() {
|
||||
const results = document.getElementById('results-section')
|
||||
const quiz = document.getElementById('quiz-section')
|
||||
@@ -1651,7 +1659,7 @@ function submitCapture(e) {
|
||||
language_used: currentLang,
|
||||
submitted_at: new Date().toISOString(),
|
||||
send_email: 'yes',
|
||||
_subject: (T[currentLang].brand || 'Deepstock') + ' — ' + lvl + ' — ' + firstName + ' ' + lastName + ' — ' + city + ', ' + country
|
||||
_subject: (T[currentLang].brand || 'Plan-B') + ' — ' + lvl + ' — ' + firstName + ' ' + lastName + ' — ' + city + ', ' + country
|
||||
}
|
||||
|
||||
const showSuccess = () => {
|
||||
@@ -1871,7 +1879,7 @@ function revealResultsSequence() {
|
||||
// also skipped when restoring a saved quiz/results stage so a refresh
|
||||
// mid-flow doesn't replay the intro. Each stage shows for `enter +
|
||||
// hold` ms, then fades out before the next enters.
|
||||
const INTRO_KEY = 'kammergut.intro.shown.v1'
|
||||
const INTRO_KEY = 'plan-b.intro.shown.v1'
|
||||
const sleep = ms => new Promise(r => setTimeout(r, ms))
|
||||
async function playIntro() {
|
||||
const overlay = document.getElementById('intro-overlay')
|
||||
|
||||
112
src/styles.css
112
src/styles.css
@@ -263,11 +263,8 @@ body:not(.intro-done) .page-bg-pattern .bg-row {
|
||||
position: relative; z-index: 1;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
/* Default (DE / "Kammergut") — divisor ≈ rendered-text-to-font-size
|
||||
ratio of the wider wordmark in DM Serif Display at 0.05em tracking.
|
||||
EN ("Deepstock") gets a smaller divisor below to fill at its own
|
||||
ratio. -32px matches the hero's 16px padding each side. */
|
||||
font-size: calc((100vw - 32px) / 6);
|
||||
/* Plan-B wordmark sizing. -32px matches the hero's 16px padding each side. */
|
||||
font-size: calc((100vw - 32px) / 3.8);
|
||||
line-height: 1;
|
||||
letter-spacing: 0.05em;
|
||||
color: #1A1A18;
|
||||
@@ -279,21 +276,10 @@ body:not(.intro-done) .page-bg-pattern .bg-row {
|
||||
/* Tablet — same fill behaviour as mobile (hero padding stays 16px
|
||||
each side). */
|
||||
@media (min-width: 768px) {
|
||||
.hero h1 { font-size: calc((100vw - 32px) / 6); }
|
||||
.hero h1 { font-size: calc((100vw - 32px) / 3.8); }
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.hero h1 { font-size: clamp(120px, 14vw, 176px); }
|
||||
}
|
||||
|
||||
/* English brand ("Deepstock") — narrower wordmark needs a smaller
|
||||
divisor (≈ ratio measured at 0.05em tracking) to fill the same
|
||||
16px-padded width as the wider Kammergut. */
|
||||
html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
|
||||
@media (min-width: 768px) {
|
||||
html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
html[lang="en"] .hero h1 { font-size: clamp(120px, 17vw, 220px); }
|
||||
.hero h1 { font-size: clamp(120px, 18vw, 240px); }
|
||||
}
|
||||
|
||||
.hero h1 .b { color: #5A9A78; }
|
||||
@@ -301,12 +287,6 @@ html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
|
||||
/* Trademark mark — only auto-attached to the small header logo. The
|
||||
hero H1 uses an explicit sibling .brand-tm span instead, since CSS
|
||||
filters on the H1 (paint-3d) would otherwise pull ™ into the gloss. */
|
||||
.logo[data-i18n="brand"]::after {
|
||||
content: "™";
|
||||
font-size: 0.4em;
|
||||
vertical-align: super;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Hero brand line — flex wrapper so ™ can sit next to the painted H1
|
||||
without being inside the H1's filter scope. The wrapper takes over
|
||||
@@ -1767,11 +1747,11 @@ body.mod-open .mod-panel { display: block; }
|
||||
.form-row{display:flex;gap:10px;flex-wrap:wrap;}
|
||||
.form-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:140px;}
|
||||
.field-label{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:0.06em;text-transform:uppercase;}
|
||||
.form-input,.form-select{width:100%;padding:12px 14px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--white);font-family:var(--font-body);font-size:14px;outline:none;transition:var(--trans);}
|
||||
.form-input:focus,.form-select:focus{border-color:rgba(90,154,120,0.4);}
|
||||
.form-input::placeholder{color:var(--muted);}
|
||||
.form-input,.form-select{width:100%;padding:12px 14px;background:#F0F0F0;border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius);color:var(--text);font-family:var(--font-body);font-size:14px;outline:none;transition:var(--trans);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);}
|
||||
.form-input:focus,.form-select:focus{border-color:rgba(90,154,120,0.55);background:#FAFAFA;box-shadow:0 0 0 3px rgba(90,154,120,0.10), inset 0 1px 0 rgba(255,255,255,0.7);}
|
||||
.form-input::placeholder{color:var(--text-dim);}
|
||||
.form-select{cursor:pointer;-webkit-appearance:none;appearance:none;}
|
||||
.form-select option{background:var(--card);color:var(--white);}
|
||||
.form-select option{background:#FAFAFA;color:var(--text);}
|
||||
.form-input[rows]{resize:vertical;min-height:80px;line-height:1.5;}
|
||||
.capture-submit{width:100%;padding:16px;background:var(--red);border:none;border-radius:0;color:#0C0C0E;font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:var(--trans);margin-top:4px;box-shadow:0 4px 24px rgba(90,154,120,0.2);}
|
||||
.capture-submit:hover{background:#7AB498;transform:translateY(-1px);}
|
||||
@@ -1903,13 +1883,14 @@ body.mod-open .mod-panel { display: block; }
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
padding: 12px 14px;
|
||||
background: var(--panel);
|
||||
border: 1.5px solid var(--border);
|
||||
background: #F0F0F0;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
border-radius: var(--radius);
|
||||
transition: var(--trans);
|
||||
margin-top: 4px;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
|
||||
}
|
||||
.newsletter-check:hover { border-color: var(--muted); }
|
||||
.newsletter-check:hover { border-color: rgba(0,0,0,0.16); background: #F4F4F4; }
|
||||
.newsletter-check input[type=checkbox] { display: none; }
|
||||
.check-box {
|
||||
width: 20px; height: 20px;
|
||||
@@ -1922,8 +1903,8 @@ body.mod-open .mod-panel { display: block; }
|
||||
background: transparent;
|
||||
}
|
||||
.newsletter-check input:checked ~ .check-box {
|
||||
background: rgba(90,154,120,0.9);
|
||||
border-color: var(--red);
|
||||
background: #2a3010;
|
||||
border-color: #2a3010;
|
||||
}
|
||||
.newsletter-check input:checked ~ .check-box::after {
|
||||
content: '✓';
|
||||
@@ -2244,7 +2225,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
.form-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
z-index: 5000;
|
||||
display: none;
|
||||
padding: 16px;
|
||||
background: rgba(20, 20, 20, 0.55);
|
||||
@@ -2289,32 +2270,76 @@ body.mod-open .mod-panel { display: block; }
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 18px;
|
||||
padding: 16px 18px;
|
||||
background: #F0F0F0;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.modal-title-group {
|
||||
min-width: 0;
|
||||
}
|
||||
.modal-kicker {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--green-bright);
|
||||
}
|
||||
.form-modal-header .modal-title {
|
||||
font-family: var(--font-display);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.01em;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.modal-title-icon {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #f4ecd8;
|
||||
}
|
||||
.modal-title-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
background: #2a3010;
|
||||
filter: url(#paintGlossBtn);
|
||||
-webkit-filter: url(#paintGlossBtn);
|
||||
}
|
||||
.form-modal-body {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 18px;
|
||||
padding: 20px 18px;
|
||||
}
|
||||
.form-modal-body .capture-sub {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 18px;
|
||||
padding: 12px 14px;
|
||||
background: #E5F0E0;
|
||||
border: 1px solid rgba(90,154,120,0.30);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7);
|
||||
}
|
||||
.form-modal-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 14px 18px max(14px, env(safe-area-inset-bottom));
|
||||
border-top: 1px solid rgba(0,0,0,0.06);
|
||||
background: #FAFAFA;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
.form-modal-footer .capture-submit {
|
||||
width: 100%;
|
||||
@@ -2362,7 +2387,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
checkbox (above the fixed footer submit). */
|
||||
.form-privacy {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
line-height: 1.7;
|
||||
margin: 4px 0 0;
|
||||
@@ -2379,6 +2404,9 @@ body.modal-open {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
body.modal-open .app {
|
||||
z-index: 500;
|
||||
}
|
||||
.btn-next:disabled,
|
||||
.btn-next:disabled:hover {
|
||||
opacity: 0.4;
|
||||
|
||||
Reference in New Issue
Block a user