Add drone silhouette background to all page heroes
Mirrors the index.html hero treatment across devkits, consultancy, videos (dark strokes) and opensource (white strokes on dark bg). .page-hero gets position:relative/overflow:hidden to contain them. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jon
@@ -37,6 +37,47 @@
|
|||||||
|
|
||||||
<!-- PAGE HERO -->
|
<!-- PAGE HERO -->
|
||||||
<section class="page-hero">
|
<section class="page-hero">
|
||||||
|
<div class="hero-bg" aria-hidden="true">
|
||||||
|
<div style="position:absolute;top:40px;left:-30px;width:210px;opacity:0.055;transform:rotate(14deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;top:30px;right:-40px;width:320px;opacity:0.045;transform:rotate(-9deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;top:30px;left:46%;width:120px;opacity:0.05;transform:rotate(26deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="eyebrow">Consultancy · Use cases</div>
|
<div class="eyebrow">Consultancy · Use cases</div>
|
||||||
<h1>Drone Integration<br>Consultancy.</h1>
|
<h1>Drone Integration<br>Consultancy.</h1>
|
||||||
|
|||||||
41
devkits.html
41
devkits.html
@@ -37,6 +37,47 @@
|
|||||||
|
|
||||||
<!-- PAGE HERO -->
|
<!-- PAGE HERO -->
|
||||||
<section class="page-hero">
|
<section class="page-hero">
|
||||||
|
<div class="hero-bg" aria-hidden="true">
|
||||||
|
<div style="position:absolute;top:40px;left:-30px;width:210px;opacity:0.055;transform:rotate(14deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;top:30px;right:-40px;width:320px;opacity:0.045;transform:rotate(-9deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;top:30px;left:46%;width:120px;opacity:0.05;transform:rotate(26deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="eyebrow">Hardware</div>
|
<div class="eyebrow">Hardware</div>
|
||||||
<h1>Drone Hardware<br>Devkits.</h1>
|
<h1>Drone Hardware<br>Devkits.</h1>
|
||||||
|
|||||||
@@ -36,7 +36,48 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- PAGE HERO (dark) -->
|
<!-- PAGE HERO (dark) -->
|
||||||
<section class="section-dark" style="padding:clamp(64px,8vw,100px) 0 clamp(56px,7vw,88px);border-bottom:1px solid rgba(255,255,255,0.1);">
|
<section class="section-dark" style="position:relative;overflow:hidden;padding:clamp(64px,8vw,100px) 0 clamp(56px,7vw,88px);border-bottom:1px solid rgba(255,255,255,0.1);">
|
||||||
|
<div class="hero-bg" aria-hidden="true">
|
||||||
|
<div style="position:absolute;top:40px;left:-30px;width:210px;opacity:0.12;transform:rotate(14deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;top:30px;right:-40px;width:320px;opacity:0.09;transform:rotate(-9deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;top:30px;left:46%;width:120px;opacity:0.1;transform:rotate(26deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="eyebrow">Open stack · Free forever</div>
|
<div class="eyebrow">Open stack · Free forever</div>
|
||||||
<h1 style="font-size:clamp(44px,7vw,88px);font-weight:800;letter-spacing:-0.04em;line-height:0.95;margin-top:14px;max-width:820px;">Open Source<br>Stack.</h1>
|
<h1 style="font-size:clamp(44px,7vw,88px);font-weight:800;letter-spacing:-0.04em;line-height:0.95;margin-top:14px;max-width:820px;">Open Source<br>Stack.</h1>
|
||||||
|
|||||||
@@ -300,6 +300,8 @@ img { display: block; max-width: 100%; }
|
|||||||
|
|
||||||
/* ── Page hero (inner pages) ─────────────────── */
|
/* ── Page hero (inner pages) ─────────────────── */
|
||||||
.page-hero {
|
.page-hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
padding: clamp(64px, 8vw, 100px) 0 clamp(56px, 7vw, 88px);
|
padding: clamp(64px, 8vw, 100px) 0 clamp(56px, 7vw, 88px);
|
||||||
border-bottom: 1px solid var(--rule);
|
border-bottom: 1px solid var(--rule);
|
||||||
}
|
}
|
||||||
|
|||||||
41
videos.html
41
videos.html
@@ -37,6 +37,47 @@
|
|||||||
|
|
||||||
<!-- PAGE HERO -->
|
<!-- PAGE HERO -->
|
||||||
<section class="page-hero">
|
<section class="page-hero">
|
||||||
|
<div class="hero-bg" aria-hidden="true">
|
||||||
|
<div style="position:absolute;top:40px;left:-30px;width:210px;opacity:0.055;transform:rotate(14deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;top:30px;right:-40px;width:320px;opacity:0.045;transform:rotate(-9deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute;top:30px;left:46%;width:120px;opacity:0.05;transform:rotate(26deg);">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
||||||
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
||||||
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
||||||
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
||||||
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
||||||
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
||||||
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
||||||
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
||||||
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
||||||
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="eyebrow">Demos & Deployments</div>
|
<div class="eyebrow">Demos & Deployments</div>
|
||||||
<h1>Video Gallery.</h1>
|
<h1>Video Gallery.</h1>
|
||||||
|
|||||||
Reference in New Issue
Block a user