feat(aura): add Carbon Blue atmospheric background partial
This commit is contained in:
@@ -83,3 +83,44 @@ main#maincontent {
|
|||||||
/* Responsive embeds */
|
/* Responsive embeds */
|
||||||
.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
|
.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
|
||||||
.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
||||||
|
|
||||||
|
/* Carbon Blue atmospheric field (decorative — content must sit in z-index: 1) */
|
||||||
|
.aura-bg {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aura-layer-1 {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(138deg, #05070c 0%, #0f172a 40%, #172554 70%, #1e3a8a 100%);
|
||||||
|
mix-blend-mode: normal;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aura-layer-2 {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse 45% 50% at 72% 40%, rgba(96, 165, 250, 0.20) 0%, transparent 68%);
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aura-layer-2--mobile { filter: blur(105px); }
|
||||||
|
.aura-layer-2--desktop { filter: blur(151px); }
|
||||||
|
|
||||||
|
.aura-grain {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
opacity: 0.85;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aura-grain svg { display: block; width: 100%; height: 100%; }
|
||||||
|
|||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Aura Background Partial — Carbon Blue
|
||||||
|
*
|
||||||
|
* Renders three decorative layers (linear gradient, radial backlight, SVG
|
||||||
|
* grain) over a transparent container. The body carries `background-color:
|
||||||
|
* #100e0b`; do NOT set a background on this container or the blend modes
|
||||||
|
* will composite against the container instead of the page.
|
||||||
|
*
|
||||||
|
* All layers are aria-hidden and ignore pointer events. Content must sit
|
||||||
|
* inside a wrapper with `position: relative; z-index: 1`.
|
||||||
|
*
|
||||||
|
* @package KsPortfolio
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace KsPortfolio;
|
||||||
|
|
||||||
|
$blur = isset( $blur ) && 'desktop' === $blur ? 'aura-layer-2--desktop' : 'aura-layer-2--mobile';
|
||||||
|
?>
|
||||||
|
<div class="aura-bg" aria-hidden="true">
|
||||||
|
<div class="aura-layer-1"></div>
|
||||||
|
<div class="aura-layer-2 <?php echo esc_attr( $blur ); ?>"></div>
|
||||||
|
<div class="aura-grain">
|
||||||
|
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
|
<filter id="aura-grain-filter">
|
||||||
|
<feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="4" stitchTiles="stitch" />
|
||||||
|
<feColorMatrix type="matrix"
|
||||||
|
values="0.181 0.608 0.061 0 0.075
|
||||||
|
0.181 0.608 0.061 0 0.075
|
||||||
|
0.181 0.608 0.061 0 0.075
|
||||||
|
0 0 0 1 0" />
|
||||||
|
</filter>
|
||||||
|
<rect width="100%" height="100%" filter="url(#aura-grain-filter)" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user