Improve SEO nav and map loading placeholder
This commit is contained in:
SocioWire
parent
4f2894987d
commit
eedebaea46
14
index.html
14
index.html
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="description" content="SocioWire maps local news, events, deals, and social posts in real time. Explore what’s happening around you." />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<link rel="canonical" href="https://sociowire.com/" />
|
||||
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
|
@ -45,6 +46,19 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{ "@type": "SiteNavigationElement", "name": "Live Map", "url": "https://sociowire.com/#map" },
|
||||
{ "@type": "SiteNavigationElement", "name": "SocioWall", "url": "https://sociowire.com/#wall" },
|
||||
{ "@type": "SiteNavigationElement", "name": "Islands", "url": "https://sociowire.com/#islands" },
|
||||
{ "@type": "SiteNavigationElement", "name": "About", "url": "https://sociowire.com/about.html" },
|
||||
{ "@type": "SiteNavigationElement", "name": "Contact", "url": "https://sociowire.com/contact.html" },
|
||||
{ "@type": "SiteNavigationElement", "name": "Privacy", "url": "https://sociowire.com/privacy.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QT0P53R99H"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Learn how SocioWire maps local news, events, and community stories in real time."
|
||||
/>
|
||||
<link rel="canonical" href="https://sociowire.com/about.html" />
|
||||
<title>About SocioWire</title>
|
||||
<style>
|
||||
:root { color-scheme: light; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Georgia", "Times New Roman", serif;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
main {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px 72px;
|
||||
}
|
||||
h1 { font-size: 34px; margin: 0 0 8px; }
|
||||
h2 { font-size: 18px; margin: 28px 0 8px; }
|
||||
p { line-height: 1.6; font-size: 16px; }
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
padding: 20px 22px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.logo-link {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-decoration: none;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
.page-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-nav a {
|
||||
text-decoration: none;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cta {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
background: #1d4ed8;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<div class="page-header">
|
||||
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||
<nav class="page-nav" aria-label="Site">
|
||||
<a href="https://sociowire.com/islands.html">Islands</a>
|
||||
<a href="https://sociowire.com/sociowall.html">SocioWall</a>
|
||||
<a href="https://sociowire.com/contact.html">Contact</a>
|
||||
<a href="https://sociowire.com/privacy.html">Privacy</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h1>About SocioWire</h1>
|
||||
<p>
|
||||
SocioWire is a live map for what is happening around you. We surface local news, events,
|
||||
market deals, and community posts so you can discover what matters in real time.
|
||||
</p>
|
||||
<h2>What makes it different</h2>
|
||||
<p>
|
||||
Explore a location-first feed, jump into Island communities, and filter the map to focus
|
||||
on the stories that matter most to you.
|
||||
</p>
|
||||
<a class="cta" href="https://sociowire.com/#map">Open the live map</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Contact SocioWire support for help, partnerships, and community feedback."
|
||||
/>
|
||||
<link rel="canonical" href="https://sociowire.com/contact.html" />
|
||||
<title>Contact SocioWire</title>
|
||||
<style>
|
||||
:root { color-scheme: light; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Georgia", "Times New Roman", serif;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
main {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px 72px;
|
||||
}
|
||||
h1 { font-size: 34px; margin: 0 0 8px; }
|
||||
p { line-height: 1.6; font-size: 16px; }
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
padding: 20px 22px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.logo-link {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-decoration: none;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
.page-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-nav a {
|
||||
text-decoration: none;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cta {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
background: #1d4ed8;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<div class="page-header">
|
||||
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||
<nav class="page-nav" aria-label="Site">
|
||||
<a href="https://sociowire.com/about.html">About</a>
|
||||
<a href="https://sociowire.com/islands.html">Islands</a>
|
||||
<a href="https://sociowire.com/sociowall.html">SocioWall</a>
|
||||
<a href="https://sociowire.com/privacy.html">Privacy</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h1>Contact</h1>
|
||||
<p>
|
||||
Reach the SocioWire team for support, partnerships, or community feedback.
|
||||
</p>
|
||||
<p>
|
||||
Email us at <a href="mailto:support@sociowire.com">support@sociowire.com</a>.
|
||||
</p>
|
||||
<a class="cta" href="https://sociowire.com/">Return to SocioWire</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="SocioWire Islands are community hubs for local updates, deals, and stories."
|
||||
/>
|
||||
<link rel="canonical" href="https://sociowire.com/islands.html" />
|
||||
<title>SocioWire Islands</title>
|
||||
<style>
|
||||
:root { color-scheme: light; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Georgia", "Times New Roman", serif;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
main {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px 72px;
|
||||
}
|
||||
h1 { font-size: 34px; margin: 0 0 8px; }
|
||||
p { line-height: 1.6; font-size: 16px; }
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
padding: 20px 22px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.logo-link {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-decoration: none;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
.page-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-nav a {
|
||||
text-decoration: none;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cta {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
background: #1d4ed8;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<div class="page-header">
|
||||
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||
<nav class="page-nav" aria-label="Site">
|
||||
<a href="https://sociowire.com/about.html">About</a>
|
||||
<a href="https://sociowire.com/sociowall.html">SocioWall</a>
|
||||
<a href="https://sociowire.com/contact.html">Contact</a>
|
||||
<a href="https://sociowire.com/privacy.html">Privacy</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h1>Islands</h1>
|
||||
<p>
|
||||
Islands are community spaces that gather local updates, neighborhood stories, and deals
|
||||
into a single feed. Pick an Island to see what people are sharing right now.
|
||||
</p>
|
||||
<p>
|
||||
Use Islands to follow creators, save a local hub, or discover new areas when you travel.
|
||||
</p>
|
||||
<a class="cta" href="https://sociowire.com/#islands">Explore Islands on SocioWire</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,6 +3,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="SocioWire privacy policy covering data collection, usage, and your choices."
|
||||
/>
|
||||
<link rel="canonical" href="https://sociowire.com/privacy.html" />
|
||||
<title>SocioWire Privacy Policy</title>
|
||||
<style>
|
||||
:root {
|
||||
|
|
@ -46,6 +51,32 @@
|
|||
padding: 20px 22px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.logo-link {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-decoration: none;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
.page-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-nav a {
|
||||
text-decoration: none;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
}
|
||||
a {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
|
@ -54,6 +85,15 @@
|
|||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<div class="page-header">
|
||||
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||
<nav class="page-nav" aria-label="Site">
|
||||
<a href="https://sociowire.com/about.html">About</a>
|
||||
<a href="https://sociowire.com/islands.html">Islands</a>
|
||||
<a href="https://sociowire.com/sociowall.html">SocioWall</a>
|
||||
<a href="https://sociowire.com/contact.html">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h1>Privacy Policy</h1>
|
||||
<div class="meta">Last updated: 2025-12-27</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,27 @@
|
|||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://sociowire.com/privacy</loc>
|
||||
<loc>https://sociowire.com/about.html</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://sociowire.com/islands.html</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://sociowire.com/sociowall.html</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://sociowire.com/contact.html</loc>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.4</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://sociowire.com/privacy.html</loc>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.3</priority>
|
||||
</url>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="SocioWall is the live feed of posts and local moments on SocioWire."
|
||||
/>
|
||||
<link rel="canonical" href="https://sociowire.com/sociowall.html" />
|
||||
<title>SocioWall Feed</title>
|
||||
<style>
|
||||
:root { color-scheme: light; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Georgia", "Times New Roman", serif;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
main {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px 72px;
|
||||
}
|
||||
h1 { font-size: 34px; margin: 0 0 8px; }
|
||||
p { line-height: 1.6; font-size: 16px; }
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
padding: 20px 22px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.logo-link {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-decoration: none;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
.page-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-nav a {
|
||||
text-decoration: none;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cta {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
background: #1d4ed8;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<div class="page-header">
|
||||
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||
<nav class="page-nav" aria-label="Site">
|
||||
<a href="https://sociowire.com/about.html">About</a>
|
||||
<a href="https://sociowire.com/islands.html">Islands</a>
|
||||
<a href="https://sociowire.com/contact.html">Contact</a>
|
||||
<a href="https://sociowire.com/privacy.html">Privacy</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h1>SocioWall</h1>
|
||||
<p>
|
||||
SocioWall is the live stream of posts, deals, and news from across SocioWire. It keeps
|
||||
you up to date without losing the local context.
|
||||
</p>
|
||||
<p>
|
||||
Use SocioWall to scan recent activity, then jump to the map for a location view.
|
||||
</p>
|
||||
<a class="cta" href="https://sociowire.com/#wall">Open SocioWall</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
63
src/App.jsx
63
src/App.jsx
|
|
@ -133,8 +133,36 @@ export default function App() {
|
|||
/>
|
||||
|
||||
<div className="main-shell">
|
||||
<div className="map-shell">
|
||||
<Suspense fallback={<div style={{ padding: 16 }}>Loading map…</div>}>
|
||||
<div className="map-shell" id="map">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="map-page">
|
||||
<div className="map-stage map-stage--placeholder">
|
||||
<div className="map-placeholder-content">
|
||||
<div className="map-placeholder-title">Loading map</div>
|
||||
<div className="map-placeholder-subtitle">Warming up tiles and live data.</div>
|
||||
</div>
|
||||
<div className="map-placeholder-overlay map-placeholder-top">
|
||||
<div className="map-placeholder-pill map-placeholder-pill--wide" />
|
||||
</div>
|
||||
<div className="map-placeholder-overlay map-placeholder-left">
|
||||
<div className="map-placeholder-pill" />
|
||||
<div className="map-placeholder-pill" />
|
||||
<div className="map-placeholder-pill" />
|
||||
</div>
|
||||
<div className="map-placeholder-overlay map-placeholder-right">
|
||||
<div className="map-placeholder-pill" />
|
||||
<div className="map-placeholder-pill" />
|
||||
</div>
|
||||
<div className="map-placeholder-overlay map-placeholder-bottom">
|
||||
<div className="map-placeholder-chip" />
|
||||
<div className="map-placeholder-chip" />
|
||||
<div className="map-placeholder-chip" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<MapView
|
||||
theme={theme}
|
||||
onPostsState={handlePostsState}
|
||||
|
|
@ -150,7 +178,7 @@ export default function App() {
|
|||
{/* BELOW THE MAP (page scroll like Facebook) */}
|
||||
<div className="below-stage">
|
||||
<div className="below-row">
|
||||
<div className="sociowall-panel">
|
||||
<div className="sociowall-panel" id="wall">
|
||||
<div className="sociowall-header">SOCIOWALL</div>
|
||||
<PostList
|
||||
posts={wallPosts}
|
||||
|
|
@ -166,6 +194,20 @@ export default function App() {
|
|||
|
||||
<div style={{ height: 18 }} />
|
||||
|
||||
<section className="seo-section" id="islands">
|
||||
<div className="seo-card">
|
||||
<div className="seo-kicker">Communities</div>
|
||||
<h2>Explore Islands</h2>
|
||||
<p>
|
||||
Islands are local hubs where people share updates, deals, and stories in one place.
|
||||
Browse nearby islands or jump into a new community to see what is trending.
|
||||
</p>
|
||||
<button className="seo-cta" type="button" onClick={handleOpenUniverse}>
|
||||
Open Islands
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bouton Contacts flottant en bas à droite */}
|
||||
<button className="contacts-float-btn" onClick={() => setShowContactsList(!showContactsList)}>
|
||||
<span className="contact-icon">👥</span>
|
||||
|
|
@ -196,6 +238,21 @@ export default function App() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<footer className="sw-footer">
|
||||
<div className="sw-footer-inner">
|
||||
<div className="sw-footer-brand">SOCIOWIRE</div>
|
||||
<nav className="sw-footer-nav" aria-label="Site">
|
||||
<a href="/">Home</a>
|
||||
<a href="/#map">Live Map</a>
|
||||
<a href="/#wall">SocioWall</a>
|
||||
<a href="/#islands">Islands</a>
|
||||
<a href="/about.html">About</a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
<a href="/privacy.html">Privacy</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Island Universe Modal */}
|
||||
{showUniverse && (
|
||||
<IslandUniverse
|
||||
|
|
|
|||
|
|
@ -1,6 +1,88 @@
|
|||
.app-root{ min-height:100vh; display:flex; flex-direction:column; }
|
||||
.main-shell{ flex: 1 0 auto; display:block; padding:0; }
|
||||
.map-shell{ position:relative; width:100%; height:auto; overflow:visible; border:none; background:transparent; }
|
||||
.seo-section {
|
||||
padding: 0 20px 36px;
|
||||
}
|
||||
|
||||
.seo-card {
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
padding: 26px 28px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
background: rgba(4, 12, 32, 0.7);
|
||||
box-shadow: 0 18px 38px rgba(2, 6, 23, 0.35);
|
||||
}
|
||||
|
||||
.seo-kicker {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.22em;
|
||||
color: rgba(148, 163, 184, 0.9);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.seo-card h2 {
|
||||
margin: 10px 0 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.seo-card p {
|
||||
margin: 0 0 16px;
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.seo-cta {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 10px 18px;
|
||||
font-weight: 600;
|
||||
background: #38bdf8;
|
||||
color: #0f172a;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sw-footer {
|
||||
border-top: 1px solid rgba(59, 130, 246, 0.25);
|
||||
background: rgba(2, 8, 23, 0.9);
|
||||
padding: 24px 16px 36px;
|
||||
}
|
||||
|
||||
.sw-footer-inner {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sw-footer-brand {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
font-size: 13px;
|
||||
color: rgba(226, 232, 240, 0.85);
|
||||
}
|
||||
|
||||
.sw-footer-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sw-footer-nav a {
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sw-footer-nav a:hover {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
/* Bouton Contacts flottant en bas à droite */
|
||||
.contacts-float-btn {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,104 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-stage--placeholder{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(56,189,248,0.2), transparent 45%),
|
||||
radial-gradient(circle at 80% 30%, rgba(14,116,144,0.25), transparent 40%),
|
||||
linear-gradient(135deg, rgba(2,6,23,0.9), rgba(6,14,36,0.95));
|
||||
border: 1px solid rgba(56,189,248,0.25);
|
||||
}
|
||||
|
||||
.map-placeholder-content{
|
||||
text-align:center;
|
||||
padding: 16px 20px;
|
||||
border-radius: 16px;
|
||||
background: rgba(2, 6, 23, 0.5);
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
color: #e2e8f0;
|
||||
box-shadow: 0 14px 30px rgba(2,6,23,0.4);
|
||||
}
|
||||
|
||||
.map-placeholder-title{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.map-placeholder-subtitle{
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
color: rgba(226, 232, 240, 0.75);
|
||||
}
|
||||
|
||||
.map-placeholder-overlay{
|
||||
position:absolute;
|
||||
display:flex;
|
||||
gap: 10px;
|
||||
z-index: 2;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.map-placeholder-top{
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.map-placeholder-left{
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-placeholder-right{
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-placeholder-bottom{
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.map-placeholder-pill{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, rgba(148,163,184,0.15), rgba(56,189,248,0.25));
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.4);
|
||||
animation: map-skel-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.map-placeholder-pill--wide{
|
||||
width: min(520px, calc(100vw - 72px));
|
||||
height: 48px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.map-placeholder-chip{
|
||||
width: 84px;
|
||||
height: 30px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, rgba(148,163,184,0.18), rgba(14,116,144,0.25));
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
animation: map-skel-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes map-skel-pulse{
|
||||
0%{ opacity: 0.5; }
|
||||
50%{ opacity: 1; }
|
||||
100%{ opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* Landscape: vh is small, reduce min height */
|
||||
@media (orientation: landscape){
|
||||
:root{ --sw-below-overlap: 22px; }
|
||||
|
|
|
|||
|
|
@ -19,3 +19,23 @@ body[data-theme="light"] .post-pin--expanded .post-card {
|
|||
border-color: rgba(148, 163, 184, 0.9);
|
||||
color:#111827;
|
||||
}
|
||||
|
||||
body[data-theme="light"] .seo-card {
|
||||
background: rgba(248, 250, 252, 0.98);
|
||||
border-color: rgba(148, 163, 184, 0.7);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
body[data-theme="light"] .seo-card p {
|
||||
color: rgba(30, 41, 59, 0.85);
|
||||
}
|
||||
|
||||
body[data-theme="light"] .sw-footer {
|
||||
background: rgba(226, 232, 240, 0.95);
|
||||
border-top-color: rgba(148, 163, 184, 0.6);
|
||||
}
|
||||
|
||||
body[data-theme="light"] .sw-footer-nav a,
|
||||
body[data-theme="light"] .sw-footer-brand {
|
||||
color: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue