710 lines
66 KiB
HTML
710 lines
66 KiB
HTML
|
<!DOCTYPE html><html data-wf-page="669ac798eea89addcd56e444" data-wf-site="669696d6af77a83985da8ffd" lang="en" data-wf-collection="669ac798eea89addcd56e416" data-wf-item-slug="laconic-and-consensys-metamask-launch-mobymask-light-client"><head><meta charset="utf-8"/><title>Laconic and ConsenSys’s MetaMask Launch MobyMask Light Client | Laconic Network</title><meta content="Laconic Network Blog" name="description"/><meta content="Laconic and ConsenSys’s MetaMask Launch MobyMask Light Client | Laconic Network" property="og:title"/><meta content="Laconic Network Blog" property="og:description"/><meta content="../images/laconic-and-consensys-metamask-launch-mobymask-light-client.png" property="og:image"/><meta content="Laconic and ConsenSys’s MetaMask Launch MobyMask Light Client | Laconic Network" property="twitter:title"/><meta content="Laconic Network Blog" property="twitter:description"/><meta content="../images/laconic-and-consensys-metamask-launch-mobymask-light-client.png" property="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="../css/laconic-staging.webflow.ac960b332.min.css" rel="stylesheet" type="text/css"/><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="../images/favicon.png" rel="shortcut icon" type="image/x-icon"/><link href="../images/app-icon.png" rel="apple-touch-icon"/><script>
|
|||
|
|
(function() {
|
|||
|
|
const storedTheme = localStorage.getItem('theme');
|
|||
|
|
const root = document.documentElement;
|
|||
|
|
if (storedTheme) {
|
|||
|
|
root.setAttribute('data-theme', storedTheme);
|
|||
|
|
} else {
|
|||
|
|
root.setAttribute('data-theme', 'dark');
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
</script></head><body><div aria-hidden="true" class="page-wrapper"><div class="global-styles w-embed"><style>
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
color-scheme: dark;
|
|||
|
|
--duration-normal: 0.525s;
|
|||
|
|
--duration-fast: 0.262s;
|
|||
|
|
--ease: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|||
|
|
--ease-button: cubic-bezier(0.3, 1, 0.8, 1);
|
|||
|
|
--normal-transition: var(--duration-fast) var(--ease);
|
|||
|
|
--main-padding-top: max(13px, 0.6770833333vw);
|
|||
|
|
--main-padding-side: max(16px, 2.96875vw);
|
|||
|
|
--header-height: max(70px, 3.6979166667vw);
|
|||
|
|
--header-height-mobile: 79px;
|
|||
|
|
--logo: url("path-to-dark-theme-image.jpg");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:root[data-theme="light"] {
|
|||
|
|
color-scheme: light;
|
|||
|
|
--theme--color-accent: #0000f4;
|
|||
|
|
--theme--color-accent-boke: #0000f4;
|
|||
|
|
--theme--color-black: #fbfbfb;
|
|||
|
|
--theme--color-white: #040404;
|
|||
|
|
--theme--color-grey: #565656;
|
|||
|
|
--theme--color-grey-light: #8e8e8e;
|
|||
|
|
--theme--color-grey-lightness: #dedede;
|
|||
|
|
--logo: url("path-to-dark-theme-image.jpg");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::selection {
|
|||
|
|
background-color: #0000f4;
|
|||
|
|
color: #040404;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
transition: all var(--normal-transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
*** Light Mode Styles
|
|||
|
|
**/
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .button.benefits,
|
|||
|
|
html[data-theme="light"] .button.primary,
|
|||
|
|
html[data-theme="light"] .button.community{
|
|||
|
|
color: var(--theme--color-black);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .noise-component {
|
|||
|
|
opacity: 0.35;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .benefits_ball {
|
|||
|
|
mix-blend-mode: darken;
|
|||
|
|
background-color: var(--theme--color-black);
|
|||
|
|
box-shadow: 0 4px 115px 15px #0000f4, 0 0 70px 20px var(--theme--color-black),
|
|||
|
|
inset -39px -20px 100px rgba(0, 0, 244, 0.73);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .hero_gradient,
|
|||
|
|
html[data-theme="light"] .section_blog-hero,
|
|||
|
|
html[data-theme="light"] .section_blog-post-hero {
|
|||
|
|
background-image: linear-gradient( 180deg, var(--theme--color-black) 1%, var(--theme--color-black) 65%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] ._404_background-gradient,
|
|||
|
|
html[data-theme="light"] .product-hero_gradient,
|
|||
|
|
html[data-theme="light"] .partner-hero_gradient {
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .footer_toggle {
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .network_feature-image {
|
|||
|
|
-webkit-filter: invert(100%);
|
|||
|
|
filter: invert(100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] {
|
|||
|
|
.network_desktop-image,
|
|||
|
|
.network_mobile-image,
|
|||
|
|
.community-hero_mobile-image,
|
|||
|
|
.app_desktop-image,
|
|||
|
|
.app_mobile-image,
|
|||
|
|
.product-hero_video-container,
|
|||
|
|
.partner-hero_video-container,
|
|||
|
|
.partner-hero_mobile-image-container,
|
|||
|
|
.opportunities_image,
|
|||
|
|
.opportunities_mobile-image {
|
|||
|
|
mix-blend-mode: darken;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .product-hero_mobile-image-container {
|
|||
|
|
mix-blend-mode: darken;
|
|||
|
|
-webkit-filter: brightness(110%);
|
|||
|
|
filter: brightness(110%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.product-hero_gradient,
|
|||
|
|
.partner-hero_gradient {
|
|||
|
|
background: linear-gradient(
|
|||
|
|
180deg,
|
|||
|
|
rgba(0, 0, 244, 0.9) 1.63%,
|
|||
|
|
rgba(0, 0, 244, 0) 99.89%
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.community-hero_gradient{
|
|||
|
|
|
|||
|
|
background: linear-gradient(180deg, rgba(0, 0, 244, .9) 1.63%, rgba(0, 0, 244, 0) 99.89%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.events_gradient{
|
|||
|
|
background: linear-gradient(180deg, hsla(0, 0%, 90%, 0), hsla(0, 0%, 100%, .39) 51%, hsla(0, 0%, 95%, 0) 89.23%);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stack_gradient {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: max(300px, 30.7291666667vw);
|
|||
|
|
left: 0;
|
|||
|
|
opacity: 0.4;
|
|||
|
|
z-index: -1;
|
|||
|
|
margin-left: 0;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
180deg,
|
|||
|
|
hsla(0, 0%, 90%, 0),
|
|||
|
|
hsla(0, 0%, 95%, 0.5) 48.91%,
|
|||
|
|
hsla(0, 0%, 95%, 0) 89.23%
|
|||
|
|
);
|
|||
|
|
width: 100%;
|
|||
|
|
height: max(180px, 18.2291666667vw);
|
|||
|
|
content: "";
|
|||
|
|
pointer-events: none;
|
|||
|
|
-webkit-user-select: none;
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.partner-hero_video {
|
|||
|
|
-webkit-mask-size: 250% 100%;
|
|||
|
|
mask-size: 250% 100%;
|
|||
|
|
-webkit-mask-position: center center;
|
|||
|
|
mask-position: center center;
|
|||
|
|
-webkit-mask-repeat: no-repeat;
|
|||
|
|
mask-repeat: no-repeat;
|
|||
|
|
-webkit-mask-image: radial-gradient(
|
|||
|
|
ellipse,
|
|||
|
|
#030303 40%,
|
|||
|
|
rgba(3, 3, 3, 0) 85%,
|
|||
|
|
rgba(3, 3, 3, 0) 100%
|
|||
|
|
);
|
|||
|
|
mask-image: radial-gradient(
|
|||
|
|
ellipse,
|
|||
|
|
#030303 40%,
|
|||
|
|
rgba(3, 3, 3, 0) 85%,
|
|||
|
|
rgba(3, 3, 3, 0) 100%
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes noise_grain {
|
|||
|
|
0% {
|
|||
|
|
-webkit-transform: translate(20%, -15%);
|
|||
|
|
transform: translate(20%, -15%);
|
|||
|
|
}
|
|||
|
|
10% {
|
|||
|
|
-webkit-transform: translate(-20%, -15%);
|
|||
|
|
transform: translate(-20%, -15%);
|
|||
|
|
}
|
|||
|
|
20% {
|
|||
|
|
-webkit-transform: translate(20%, -5%);
|
|||
|
|
transform: translate(20%, -5%);
|
|||
|
|
}
|
|||
|
|
30% {
|
|||
|
|
-webkit-transform: translate(-20%, -5%);
|
|||
|
|
transform: translate(-20%, -5%);
|
|||
|
|
}
|
|||
|
|
40% {
|
|||
|
|
-webkit-transform: translate(20%, 5%);
|
|||
|
|
transform: translate(20%, 5%);
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
-webkit-transform: translate(-20%, 5%);
|
|||
|
|
transform: translate(-20%, 5%);
|
|||
|
|
}
|
|||
|
|
60% {
|
|||
|
|
-webkit-transform: translate(20%, 15%);
|
|||
|
|
transform: translate(20%, 15%);
|
|||
|
|
}
|
|||
|
|
70% {
|
|||
|
|
-webkit-transform: translate(-20%, 15%);
|
|||
|
|
transform: translate(-20%, 15%);
|
|||
|
|
}
|
|||
|
|
80% {
|
|||
|
|
-webkit-transform: translate(20%, 5%);
|
|||
|
|
transform: translate(20%, 5%);
|
|||
|
|
}
|
|||
|
|
90% {
|
|||
|
|
-webkit-transform: translate(-20%, 5%);
|
|||
|
|
transform: translate(-20%, 5%);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
-webkit-transform: translate(20%, -5%);
|
|||
|
|
transform: translate(20%, -5%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.social_subheader:before{
|
|||
|
|
display: block;
|
|||
|
|
position: absolute;
|
|||
|
|
-webkit-transform: translate(-220%, -50%);
|
|||
|
|
transform: translate(-220%, -50%);
|
|||
|
|
border-bottom: max(2px, .1041666667vw) solid blue;
|
|||
|
|
width: max(15px, 1.25vw);
|
|||
|
|
height: max(15px, .9375vw);
|
|||
|
|
content: "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opportunities_block:nth-child(2n) {
|
|||
|
|
grid-template-columns: auto max(50px, 15.625vw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opportunities_block:nth-child(2n) .opportunities_image {
|
|||
|
|
grid-area: 1 / 2 / 2 / 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opportunities_block:last-child {
|
|||
|
|
padding-bottom: max(60px, 6.25vw);
|
|||
|
|
border-bottom: max(1px, 0.0520833333vw) solid var(--theme--color-grey-light);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opportunities_block:not(:first-child) {
|
|||
|
|
margin-top: max(30px, 4.4791666667vw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stack_item:before {
|
|||
|
|
padding-top: 0.4166666667vw;
|
|||
|
|
font-size: max(10px, 0.625vw);
|
|||
|
|
content: "0" counter(custom) " ";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section_app div:first-child {
|
|||
|
|
position: relative;
|
|||
|
|
width: 67.7083333333vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section_app .app_container {
|
|||
|
|
display: flex;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.legal_rich-text li::marker {
|
|||
|
|
color: var(--theme--color-accent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefits_benefit-icon:before {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
opacity: 0.5;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
134.38deg,
|
|||
|
|
var(--theme--color-white) 4.91%,
|
|||
|
|
var(--theme--color-black) 108.92%
|
|||
|
|
);
|
|||
|
|
content: "";
|
|||
|
|
z-index: -1;
|
|||
|
|
width: max(38px, 1.9791666667vw);
|
|||
|
|
height: max(27px, 1.40625vw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-post_rich-text li::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
height: 8px !important;
|
|||
|
|
width: 8px !important;
|
|||
|
|
margin-top: max(8px, 0.78125vw) !important;
|
|||
|
|
background: var(--theme--color-accent) !important;
|
|||
|
|
left: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-post_rich-text li::marker {
|
|||
|
|
content: "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section_hero:before {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
-webkit-transform: translate(-50%, -50%);
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
z-index: -1;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
0deg,
|
|||
|
|
var(--theme--color-black) 15%,
|
|||
|
|
rgba(9, 9, 121, 0) 50%,
|
|||
|
|
var(--theme--color-black) 100%
|
|||
|
|
),
|
|||
|
|
linear-gradient(
|
|||
|
|
90deg,
|
|||
|
|
var(--theme--color-black) 0,
|
|||
|
|
hsla(0, 0%, 100%, 0) 10%,
|
|||
|
|
hsla(0, 0%, 100%, 0) 50%,
|
|||
|
|
hsla(0, 0%, 100%, 0) 90%,
|
|||
|
|
var(--theme--color-black) 100%
|
|||
|
|
);
|
|||
|
|
width: 101%;
|
|||
|
|
height: 101%;
|
|||
|
|
aspect-ratio: 16/9;
|
|||
|
|
content: "";
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section_hero:after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
-webkit-transform: translate(-50%, -50%);
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
z-index: -1;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
0deg,
|
|||
|
|
var(--theme--color-black) 15%,
|
|||
|
|
rgba(9, 9, 121, 0) 50%,
|
|||
|
|
var(--theme--color-black) 100%
|
|||
|
|
),
|
|||
|
|
linear-gradient(
|
|||
|
|
90deg,
|
|||
|
|
var(--theme--color-black) 0,
|
|||
|
|
hsla(0, 0%, 100%, 0) 10%,
|
|||
|
|
hsla(0, 0%, 100%, 0) 50%,
|
|||
|
|
hsla(0, 0%, 100%, 0) 90%,
|
|||
|
|
var(--theme--color-black) 100%
|
|||
|
|
);
|
|||
|
|
width: 101%;
|
|||
|
|
height: 101%;
|
|||
|
|
content: "";
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section_404:before {
|
|||
|
|
background: radial-gradient(
|
|||
|
|
ellipse farthest-corner at center center,
|
|||
|
|
rgba(4, 4, 4, 0.25) 55%,
|
|||
|
|
var(--theme--color-black) 0
|
|||
|
|
);
|
|||
|
|
width: 120%;
|
|||
|
|
height: 115%;
|
|||
|
|
filter: blur(max(40px, 4.1666666667vw));
|
|||
|
|
will-change: filter, transform;
|
|||
|
|
aspect-ratio: 16 / 9;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
z-index: -1;
|
|||
|
|
content: "";
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .section_404:before {
|
|||
|
|
width: 120%;
|
|||
|
|
height: 115%;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
0deg,
|
|||
|
|
var(--theme--color-black) 15%,
|
|||
|
|
rgba(9, 9, 121, 0) 50%,
|
|||
|
|
var(--theme--color-black) 100%
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Get rid of top margin on first element in any rich text element */
|
|||
|
|
.w-richtext > :not(div):first-child,
|
|||
|
|
.w-richtext > div:first-child > :first-child {
|
|||
|
|
margin-top: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Get rid of bottom margin on last element in any rich text element */
|
|||
|
|
.w-richtext > :last-child,
|
|||
|
|
.w-richtext ol li:last-child,
|
|||
|
|
.w-richtext ul li:last-child {
|
|||
|
|
margin-bottom: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog_card-title {
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog_preview,
|
|||
|
|
.blog_summary,
|
|||
|
|
.latest-news_summary {
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 4;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog_link-text:before,
|
|||
|
|
.nav_link:before,
|
|||
|
|
.footer_link:before {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
opacity: 0;
|
|||
|
|
width: 0;
|
|||
|
|
background-image: repeating-linear-gradient(
|
|||
|
|
0deg,
|
|||
|
|
currentcolor,
|
|||
|
|
currentcolor 100%,
|
|||
|
|
transparent 0,
|
|||
|
|
transparent 0,
|
|||
|
|
currentcolor 0
|
|||
|
|
),
|
|||
|
|
repeating-linear-gradient(
|
|||
|
|
90deg,
|
|||
|
|
currentcolor,
|
|||
|
|
currentcolor 100%,
|
|||
|
|
transparent 0,
|
|||
|
|
transparent 0,
|
|||
|
|
currentcolor 0
|
|||
|
|
),
|
|||
|
|
repeating-linear-gradient(
|
|||
|
|
currentcolor,
|
|||
|
|
currentcolor 100%,
|
|||
|
|
transparent 0,
|
|||
|
|
transparent 0,
|
|||
|
|
currentcolor 0
|
|||
|
|
),
|
|||
|
|
repeating-linear-gradient(
|
|||
|
|
270deg,
|
|||
|
|
currentcolor,
|
|||
|
|
currentcolor 100%,
|
|||
|
|
transparent 0,
|
|||
|
|
transparent 0,
|
|||
|
|
currentcolor 0
|
|||
|
|
);
|
|||
|
|
background-position: 0 0, 0 0, 100% 0, 0 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 0 100%, 100% 0, 0 100%, 100% 2px;
|
|||
|
|
height: max(1px, 0.0520833333vw);
|
|||
|
|
-webkit-animation: link_border__mvlME var(--duration-normal) linear infinite;
|
|||
|
|
animation: link_border__mvlME var(--duration-normal) linear infinite;
|
|||
|
|
content: "";
|
|||
|
|
pointer-events: none;
|
|||
|
|
transition: all var(--duration-normal) var(--ease);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav_link:hover::before,
|
|||
|
|
.blog_link-text:hover::before,
|
|||
|
|
.footer_link:hover::before {
|
|||
|
|
width: 100%;
|
|||
|
|
opacity: 1;
|
|||
|
|
transition: all var(--duration-normal) var(--ease);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-hero_card:hover .blog_hero-card-image-container {
|
|||
|
|
-webkit-filter: brightness(125%);
|
|||
|
|
filter: brightness(125%);
|
|||
|
|
transition: -webkit-filter var(--duration-normal);
|
|||
|
|
transition: filter var(--duration-normal);
|
|||
|
|
transition: filter var(--duration-normal),
|
|||
|
|
-webkit-filter var(--duration-normal);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog_card:hover .blog_card-image-container {
|
|||
|
|
-webkit-filter: brightness(125%);
|
|||
|
|
filter: brightness(125%);
|
|||
|
|
transition: -webkit-filter var(--duration-normal);
|
|||
|
|
transition: filter var(--duration-normal);
|
|||
|
|
transition: filter var(--duration-normal),
|
|||
|
|
-webkit-filter var(--duration-normal);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog_link:hover .blog_link-icon {
|
|||
|
|
-webkit-transform: rotate(45deg) scale(1.15);
|
|||
|
|
transform: rotate(45deg) scale(1.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog_link-icon {
|
|||
|
|
transition: transform var(--normal-transition),
|
|||
|
|
-webkit-transform var(--normal-transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 1600px) {
|
|||
|
|
.blog_grid {
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 990px) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
.social_subheader:before{
|
|||
|
|
visibility:hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.opportunities_block:last-child {
|
|||
|
|
border-bottom: unset;
|
|||
|
|
padding-bottom: 5.3333333333vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opportunities_block:not(:first-child) {
|
|||
|
|
margin-top: max(60px, 5.859375vw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog_link-text:before,
|
|||
|
|
.nav_link:before {
|
|||
|
|
top: 105%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html[data-theme="light"] .nav_menu {
|
|||
|
|
background-image: linear-gradient(
|
|||
|
|
180deg,
|
|||
|
|
var(--theme--color-black) 1%,
|
|||
|
|
var(--theme--color-black) 65%
|
|||
|
|
); /* Use decimal value for opacity with higher specificity */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section_hero:before,
|
|||
|
|
.section_hero:after {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section_app div:first-child {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: max(340px, 50.6666666667vw);
|
|||
|
|
order: 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style></div><div class="noise-component"></div><header class="nav_component"><nav class="nav_container"><a aria-label="Go to Homepage" href="/" class="nav_logo-wrapper w-inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="601" height="106" viewBox="0 0 601 106" fill="none" class="nav_logo"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2894 55.7848C30.5189 43.5558 38.0888 26.6671 38.0854 8.02048C38.09 5.48949 37.9502 2.98667 37.6724 0.514839L0.560059 0.518218L0.561185 71.8255C0.557804 80.4687 3.85339 89.1148 10.4451 95.7065C17.0374 102.298 25.6897 105.598 34.3346 105.593L34.3323 105.596L105.642 105.597L105.64 68.4797C103.173 68.2076 100.671 68.0673 98.134 68.0667C79.4918 68.069 62.6026 75.6383 50.373 87.8673C41.474 96.5432 27.2059 96.5449 18.4167 87.7557C9.6332 78.9722 9.62925 64.6996 18.2894 55.7848ZM97.9446 8.23121C87.6956 -2.01727 71.0447 -2.02122 60.7923 8.23121C50.5398 18.4831 50.5438 35.134 60.7923 45.3819C71.0464 55.636 87.6922 55.6343 97.9446 45.3819C108.197 35.13 108.199 18.4848 97.9446 8.23121Z" fill="var(--theme--color-white)"></path><path d="M165.931 98.1547H206.814V86.3139H179.596V7.9399H165.931V98.1547Z" fill="var(--theme--color-white)"></path><path d="M262.275 7.9399H239.613L215.925 98.1547H230.046L235.968 75.6011H265.236L271.158 98.1547H285.962L262.275 7.9399ZM238.815 64.3243L250.659 17.6379H251.114L262.502 64.3243H238.815Z" fill="var(--theme--color-white)"></path><path d="M331.202 42.9061H347.145C347.145 17.195 338.832 6.14364 319.472 6.14364C299.087 6.14364 290.319 20.1272 290.319 52.9428C290.319 85.871 299.087 99.9673 319.472 99.9673C338.832 99.9673 347.145 89.2539 347.259 64.3322H331.316C331.202 83.8415 328.81 88.6905 319.472 88.6905C308.767 88.6905 306.148 81.586 306.262 52.9428C306.262 24.4122 308.881 17.3077 319.472 17.4204C328.81 17.4204 331.202 22.4954 331.202 42.9061Z" fill="var(--theme--color-white)"></path><path d="M388.201 6.14421C408.927 6.25746 417.81 20.3532 417.81 53.056C417.81 85.7589 408.927 99.8551 388.201 99.9678C367.361 100.081 358.478 85.9843 358.478 53.056C358.478 20.1278 367.361 6.03152 388.201 6.14421ZM374.421 53.056C374.421 81.5866 377.154 88.6911 388.201 88.6911C399.133 88.6911 401.867 81.5866 401.867 53.056C401.867 24.4128 399.133 17.3083 388.201 17.4215C377.154 17.5342 374.421 24.6387 374.421 53.056Z" fill="var(--theme--color-white)"></path><path d="M447.595 98.042L433.929 98.1547V7.9399H457.958L480.393 81.4649H480.62V7.9399H494.283V98.1547H471.738L447.823 18.9913H447.595V98.042Z" fill="var(--theme--color-white)"></path><path d="M528.434 7.9399H514.77V98.1547H528.434V7.9399Z" fill="var(--theme--color-white)"></path><path d="M584.502 42.9061H600.447C600.447 17.195 592.131 6.14364 572.771 6.14364C552.391 6.14364 543.618 20.1272 543.618 52.9428C543.618 85.871 552.391 99.9673 572.771 99.9673C592.131 99.9673 600.447 89.2539 600.56 64.3322H584.615C584.502 83.8415 582.113 88.6905 572.771 88.6905C562.066 88.6905 559.451 81.586 559.564 52.9428C559.564 24.4122 562.184 17.3077 572.771 17.4204C582.113 17.4204 584.502 22.4954 584.502 42.9061Z" fill="var(--theme--color-white)"></path></svg></a><div class="nav_menu"><div class="nav_links"><a data-w-id="fbd3c3c8-569b-7ba4-52f1-12d65e5c9f1e" href="/products" class="nav_link">Products</a><a data-w-id="fbd3c3c8-569b-7ba4-52f1-12d65e5c9f20" href="/partners" class="nav_link">Partners</a><a data-w-id="fbd3c3c8-569b-7ba4-52f1-12d65e5c9f22" href="/community" class="nav_link">Community</a><a data-w-id="fbd3c3c8-569b-7ba4-52f1-12d65e5c9f24" href="/blog" class="nav_link">Blog</a></div><a href="https://github.com/cerc-io/stack-orchestrator" target="_blank" class="button mobile-nav w-button">GET STARTED</a><div class="hide-on-desktop"><div class="nav_secondary-menu"><div class="theme-toggle_wrapper"><div id="toggle-label" class="footer_toggle-label">Dark Mode</div><a id="theme-toggle" href="#" class="footer_toggle w-inline-block"><div class="footer_toggle-circle"></div></a></div><div class="nav_social"><a aria-label="Visit our Twitter" href="https://twitter.com/laconicnetwork" target="_blank" class="social-link w-inline-block"><svg fil
|
|||
|
|
|
|||
|
|
|
|||
|
|
<svg class="share_button-icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.55016 21.3548c9.05434 0 14.00814-7.4471 14.00814-13.9033 0-.20936-.0047-.42337-.0141-.63273.9637-.69168 1.7953-1.54843 2.4558-2.52999-.8975.39631-1.8504.65515-2.8261.76765 1.0274-.61122 1.7966-1.57142 2.1652-2.7026-.9665.56851-2.0235.96954-3.1257 1.18591-.7426-.78315-1.7244-1.30169-2.7937-1.47544-1.0693-.17376-2.1665.00695-3.122.51417-.9554.50722-1.7159 1.31271-2.1639 2.29194-.4479.97922-.5584 2.07764-.3143 3.12543-1.95701-.09747-3.87156-.60206-5.61952-1.48104-1.74795-.87898-3.29029-2.11274-4.52701-3.62129-.62857 1.07562-.820913 2.34843-.53794 3.55975C1.418 7.66457 2.15506 8.7235 3.19641 9.41483c-.78178-.02463-1.54643-.23354-2.230785-.60947v.06048c-.0007 1.12879.392475 2.22296 1.112685 3.09656.72021.8736 1.72301 1.4727 2.83794 1.6955-.72419.1966-1.48427.2253-2.22141.0837.31461.9708.92673 1.8198 1.75093 2.4287.8242.6088 1.81935.9471 2.84657.9676-1.74392 1.3596-3.89817 2.0971-6.11578 2.0936C.783287 19.2309.390399 19.2069 0 19.1598c2.25286 1.4345 4.87353 2.1964 7.55016 2.195Z" fill="url(#:r2c:)"></path><defs><linearGradient id=":r2c:" x1="12" y1="2" x2="12" y2="21.3548" gradientUnits="userSpaceOnUse"><stop stop-color="var(--theme--color-white)"></stop><stop offset="1" stop-color="var(--theme--color-white)"></stop></linearGradient></defs></svg>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</a></div><div class="w-embed"><a class="share_button" target="_blank" href="https://reddit.com/submit?url=https://www.laconic.com/laconic-and-consensys-metamask-launch-mobymask-light-client">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<svg class="share_button-icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 12c0 6.6274-5.3726 12-12 12-6.62742 0-12-5.3726-12-12C0 5.37258 5.37258 0 12 0c6.6274 0 12 5.37258 12 12Zm-5.7544-1.7544C19.214 10.2456 20 11.0316 20 12c0 .7158-.4351 1.3333-1.0105 1.614.0281.1684.0421.3369.0421.5193 0 2.6947-3.1298 4.8702-7.0035 4.8702-3.87371 0-7.00353-2.1755-7.00353-4.8702 0-.1824.01403-.3649.0421-.5333-.61754-.2807-1.03859-.8842-1.03859-1.6 0-.9684.78596-1.7544 1.75438-1.7544.46316 0 .89825.1965 1.20702.4912 1.20702-.88419 2.87719-1.43156 4.74382-1.4877l.8843-4.18246c.028-.08421.0701-.15438.1403-.19649.0702-.0421.1544-.05614.2386-.0421l2.9053.61754c.1965-.42105.6175-.70175 1.1087-.70175.6878 0 1.2492.5614 1.2492 1.24912s-.5614 1.24912-1.2492 1.24912c-.6736 0-1.221-.53333-1.2491-1.19298l-2.5965-.54737-.8 3.74737c1.8246.07018 3.4807.63158 4.6737 1.4877.3088-.3088.7298-.4912 1.207-.4912ZM9.24913 12c-.68772 0-1.24912.5614-1.24912 1.2491 0 .6877.5614 1.2491 1.24912 1.2491s1.24917-.5614 1.24917-1.2491c0-.6877-.56145-1.2491-1.24917-1.2491Zm2.76487 5.4596c.4772 0 2.1053-.0561 2.9614-.9123.1264-.1263.1264-.3228.0281-.4631-.1263-.1263-.3368-.1263-.4631 0-.5474.5333-1.6843.7298-2.5123.7298-.8281 0-1.979-.1965-2.5123-.7298-.12632-.1263-.33685-.1263-.46316 0-.12632.1263-.12632.3368 0 .4631.8421.8422 2.48416.9123 2.96136.9123Zm1.4878-4.2105c0 .6877.5614 1.2491 1.2491 1.2491.6877 0 1.2491-.5614 1.2491-1.2491C16 12.5614 15.4386 12 14.7509 12c-.6877 0-1.2491.5614-1.2491 1.2491Z" fill="url(#:r2d:)"></path><defs><linearGradient id=":r2d:" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse"><stop stop-color="var(--theme--color-white)"></stop><stop offset="1" stop-color="var(--theme--color-white)"></stop></linearGradient></defs></svg>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</a></div><div class="w-embed"><a class="share_button" target="_blank" href="https://discord.com/invite/ukhbBemyxY">
|
|||
|
|
|
|||
|
|
<svg class="share_button-icon" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.936 2.155A26.571 26.571 0 0 0 21.219.002a.1.1 0 0 0-.108.053c-.29.533-.611 1.229-.837 1.775a24.314 24.314 0 0 0-7.544 0 18.232 18.232 0 0 0-.85-1.775.105.105 0 0 0-.107-.053 26.497 26.497 0 0 0-6.717 2.153.097.097 0 0 0-.044.04C.733 8.8-.438 15.245.136 21.61c.003.03.02.06.043.08 2.823 2.142 5.557 3.443 8.24 4.305a.105.105 0 0 0 .116-.039c.635-.896 1.2-1.84 1.686-2.834a.11.11 0 0 0-.057-.15 17.773 17.773 0 0 1-2.574-1.269.111.111 0 0 1-.01-.181c.172-.134.345-.274.51-.414a.1.1 0 0 1 .107-.015c5.4 2.549 11.248 2.549 16.585 0a.099.099 0 0 1 .108.013c.165.141.338.282.512.416a.111.111 0 0 1-.01.181c-.821.497-1.676.916-2.575 1.267a.11.11 0 0 0-.055.152 22.854 22.854 0 0 0 1.684 2.833.103.103 0 0 0 .116.04c2.696-.862 5.43-2.163 8.253-4.305a.11.11 0 0 0 .043-.079c.688-7.358-1.153-13.75-4.88-19.415a.085.085 0 0 0-.042-.04Zm-16.909 15.58c-1.625 0-2.965-1.543-2.965-3.438 0-1.895 1.314-3.438 2.966-3.438 1.665 0 2.991 1.556 2.965 3.438 0 1.895-1.314 3.438-2.966 3.438Zm10.966 0c-1.626 0-2.966-1.543-2.966-3.438 0-1.895 1.314-3.438 2.966-3.438 1.665 0 2.992 1.556 2.966 3.438 0 1.895-1.301 3.438-2.966 3.438Z" fill="var(--theme--color-white)"></path></svg>
|
|||
|
|
|
|||
|
|
</a></div><div class="w-embed"><a class="share_button" target="_blank" href="https://t.me/share/url?url=https://www.laconic.com/blog/laconic-and-consensys-metamask-launch-mobymask-light-client">
|
|||
|
|
|
|||
|
|
<svg class="share_button-icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M24 12c0 6.6274-5.3726 12-12 12-6.62742 0-12-5.3726-12-12C0 5.37258 5.37258 0 12 0c6.6274 0 12 5.37258 12 12ZM12.43 8.85893c-1.1672.48547-3.49986 1.49027-6.99811 3.01437-.56806.2259-.86563.4469-.89272.663-.04578.3652.41154.509 1.0343.7048.08471.0267.17248.0543.26247.0835.6127.1992 1.43689.4322 1.86535.4414.38865.0084.82244-.1518 1.30135-.4807 3.26856-2.2063 4.95576-3.32149 5.06166-3.34553.0747-.01696.1783-.03829.2485.02408.0701.06235.0632.18045.0558.21215-.0453.1931-1.8405 1.8621-2.7695 2.7258-.2896.2692-.495.4602-.537.5038-.0941.0977-.19.1902-.2821.279-.5692.5487-.99609.9602.0236 1.6322.49.3229.8822.5899 1.2733.8563.4273.291.8534.5812 1.4047.9426.1405.092.2746.1877.4053.2808.4972.3545.9438.6729 1.4957.6221.3206-.0295.6519-.331.8201-1.2302.3975-2.1253 1.1789-6.7299 1.3595-8.62743.0158-.16624-.0041-.379-.02-.4724-.016-.09339-.0494-.22646-.1708-.32497-.1438-.11666-.3658-.14126-.465-.13952-.4514.00795-1.1438.24874-4.4764 1.63485Z" fill="url(#:r2e:)" fill-rule="evenodd"></path><defs><linearGradient id=":r2e:" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse"><stop stop-color="var(--theme--color-white)"></stop><stop offset="1" stop-color="var(--theme--color-white)"></stop></linearGradient></defs></svg>
|
|||
|
|
|
|||
|
|
</a></div><div class="w-embed"><a class="share_button" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.laconic.com/blog/laconic-and-consensys-metamask-launch-mobymask-light-client">
|
|||
|
|
|
|||
|
|
<svg class="share_button-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 12c0-6.62742-5.3726-12-12-12C5.37258 0 0 5.37258 0 12c0 5.9895 4.3882 10.954 10.125 11.8542v-8.3855H7.07812V12H10.125V9.35625c0-3.0075 1.7916-4.66875 4.5326-4.66875 1.3125 0 2.6862.23437 2.6862.23437V7.875h-1.5132c-1.4906 0-1.9556.92508-1.9556 1.875V12h3.3281l-.532 3.4687H13.875v8.3855C19.6118 22.954 24 17.9895 24 12Z" fill="url(#:r2f:)"></path><defs><linearGradient id=":r2f:" x1="12" y1="0" x2="12" y2="23.8542" gradientUnits="userSpaceOnUse"><stop stop-color="var(--theme--color-white)"></stop><stop offset="1" stop-color="var(--theme--color-white)"></stop></linearGradient></defs></svg>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</a></div></div><div class="share_button-icon"></div></div></div></div></section><section class="section_related-posts"><div class="padding-global"><div class="container-large"><div class="related-posts_component"><h2 class="hazy">Recent Articles</h2><div class="blog_collection-list-wrapper w-dyn-list"><div role="list" class="blog_grid w-dyn-items"><div role="listitem" class="blog_card w-dyn-item"><div class="blog_card-container"><div class="blog_card-header"><div class="blog_categories"><div class="blog_category-chip"><div>Developers</div></div><div class="blog_category-chip w-condition-invisible"><div>Insights</div></div><div class="blog_category-chip w-condition-invisible"><div>Product</div></div><div class="blog_category-chip w-condition-invisible"><div>News</div></div><div class="blog_category-chip w-condition-invisible"><div>Partners</div></div></div><div class="blog_publish-date">8.20.2024</div></div><div class="blog_card-image-container"><img src="../images/og.webp" loading="lazy" alt="" sizes="(max-width: 479px) 100vw, (max-width: 991px) 94vw, 67vw" srcset="../images/og-p-500.webp 500w, ../images/og-p-800.webp 800w, ../images/og-p-1080.webp 1080w, ../images/og.webp 1200w" class="blog_card-image"/></div><div class="blog_card-content"><h2 class="blog_card-title">LORO Testnet Stage 1 is Live</h2><a href="/blog/stage1-live" class="blog_link w-inline-block"><div class="blog_link-text">Read Article</div><svg fill="none" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg" class="blog_link-icon"><path d="M1.455 10.557.427 9.53l7.648-7.662H2.167L2.181.443h8.347v8.36H9.091l.013-5.907-7.649 7.661Z" fill="var(--theme--color-white)"></path></svg></a></div></div></div><div role="listitem" class="blog_card w-dyn-item"><div class="blog_card-container"><div class="blog_card-header"><div class="blog_categories"><div class="blog_category-chip"><div>Developers</div></div><div class="blog_category-chip w-condition-invisible"><div>Insights</div></div><div class="blog_category-chip w-condition-invisible"><div>Product</div></div><div class="blog_category-chip w-condition-invisible"><div>News</div></div><div class="blog_category-chip w-condition-invisible"><div>Partners</div></div></div><div class="blog_publish-date">8.12.2024</div></div><div class="blog_card-image-container"><img src="../images/deep-dive-testnet.webp" loading="lazy" alt="" sizes="(max-width: 479px) 100vw, (max-width: 991px) 94vw, 67vw" srcset="../images/deep-dive-testnet-p-500.webp 500w, ../images/deep-dive-testnet-p-800.webp 800w, ../images/deep-dive-testnet-p-1080.webp 1080w, ../images/deep-dive-testnet.webp 1440w" class="blog_card-image"/></div><div class="blog_card-content"><h2 class="blog_card-title">How to Register for the Laconic Incentivized Testnet</h2><a href="/blog/testnet-update" class="blog_link w-inline-block"><div class="blog_link-text">Read Article</div><svg fill="none" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg" class="blog_link-icon"><path d="M1.455 10.557.427 9.53l7.648-7.662H2.167L2.181.443h8.347v8.36H9.091l.013-5.907-7.649 7.661Z" fill="var(--theme--color-white)"></path></svg></a></div></div></div><div role="listitem" class="blog_card w-dyn-item"><div class="blog_card-container"><div class="blog_card-header"><div class="blog_categories"><div class="blog_category-chip"><div>Developers</div></div><div class="blog_category-chip w-condition-invisible"><div>Insights</div></div><div class="blog_category-chip w-condition-invisible"><div>Product</div></div><div class="blog_category-chip w-condition-invisible"><div>News</div></div><div class="blog_category-chip w-condition-invisible"><div>Partners</div></div></div><div class="blog_publish-date">7.24.2024</div></div><div class="blog_card-image-container"><img src="../images/chain-minimalism.webp" loading="lazy" alt="" sizes="(max-width: 479px) 100vw, (max-width: 991px) 94vw, 67vw" srcset="../images/chain-minimalism-p-500.webp 500w, ../images/chain-minimalism-p-800.webp 800w, ../images/chain-minimalism.webp 966w" class="blog_card-image"/></div><div class="blog_card-content"><h2 class="blog_card
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const root = document.documentElement;
|
|||
|
|
|
|||
|
|
// Setup object to store all class and ID selectors
|
|||
|
|
const setup = {
|
|||
|
|
themeToggleButtons: document.querySelectorAll('#theme-toggle'),
|
|||
|
|
lottiePaths: () => document.querySelectorAll('#nav-button svg path'),
|
|||
|
|
toggleLabels: document.querySelectorAll('#toggle-label'),
|
|||
|
|
themeColorVariable: '--theme--color-white'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Update theme-dependant images
|
|||
|
|
function updateImageSources() {
|
|||
|
|
const images = document.querySelectorAll('img[data-src-dark]');
|
|||
|
|
images.forEach(img => {
|
|||
|
|
const currentTheme = root.getAttribute('data-theme');
|
|||
|
|
const newSrc = currentTheme === 'dark' ? img.getAttribute('data-src-dark') : img.getAttribute('data-src-light');
|
|||
|
|
img.setAttribute('src', newSrc);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// update theme dependant background images
|
|||
|
|
function updateBackgroundImages() {
|
|||
|
|
const elements = document.querySelectorAll('[data-bg-dark]');
|
|||
|
|
elements.forEach(element => {
|
|||
|
|
const currentTheme = root.getAttribute('data-theme');
|
|||
|
|
const newBg = currentTheme === 'dark' ? element.getAttribute('data-bg-dark') : element.getAttribute('data-bg-light');
|
|||
|
|
element.style.backgroundImage = `url(${newBg})`;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update lottie assets to match theme
|
|||
|
|
function updateLottiePathColors() {
|
|||
|
|
const paths = setup.lottiePaths();
|
|||
|
|
if (paths.length > 0) {
|
|||
|
|
paths.forEach(path => {
|
|||
|
|
path.style.fill = `var(${setup.themeColorVariable})`;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateVideoVisibility() {
|
|||
|
|
const darkVideo = document.querySelector('#background-video-dark');
|
|||
|
|
const lightVideo = document.querySelector('#background-video-light');
|
|||
|
|
|
|||
|
|
if (darkVideo && lightVideo) {
|
|||
|
|
const currentTheme = root.getAttribute('data-theme');
|
|||
|
|
|
|||
|
|
if (currentTheme === 'dark') {
|
|||
|
|
darkVideo.style.display = 'block';
|
|||
|
|
lightVideo.style.display = 'none';
|
|||
|
|
} else {
|
|||
|
|
darkVideo.style.display = 'none';
|
|||
|
|
lightVideo.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('No background video elements found on this page.');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Theme toggle
|
|||
|
|
function toggleTheme() {
|
|||
|
|
const currentTheme = root.getAttribute('data-theme');
|
|||
|
|
|
|||
|
|
if (currentTheme === 'dark') {
|
|||
|
|
root.setAttribute('data-theme', 'light');
|
|||
|
|
localStorage.setItem('theme', 'light');
|
|||
|
|
setup.toggleLabels.forEach(label => label.textContent = 'Light Mode');
|
|||
|
|
} else {
|
|||
|
|
root.setAttribute('data-theme', 'dark');
|
|||
|
|
localStorage.setItem('theme', 'dark');
|
|||
|
|
setup.toggleLabels.forEach(label => label.textContent = 'Dark Mode');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateImageSources(); // Update images when the theme is toggled
|
|||
|
|
updateLottiePathColors(); // Update Lottie colors when the theme is toggled
|
|||
|
|
updateVideoVisibility() // Update background videos when theme is toggled
|
|||
|
|
updateBackgroundImages(); // For background image swap
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Initialize the theme
|
|||
|
|
function initializeTheme() {
|
|||
|
|
const storedTheme = localStorage.getItem('theme');
|
|||
|
|
|
|||
|
|
// Set the initial theme
|
|||
|
|
if (storedTheme) {
|
|||
|
|
root.setAttribute('data-theme', storedTheme);
|
|||
|
|
setup.toggleLabels.forEach(label => {
|
|||
|
|
label.textContent = storedTheme === 'dark' ? 'Dark Mode' : 'Light Mode';
|
|||
|
|
});
|
|||
|
|
console.log(`Theme set to: ${storedTheme}`);
|
|||
|
|
} else {
|
|||
|
|
root.setAttribute('data-theme', 'dark');
|
|||
|
|
setup.toggleLabels.forEach(label => label.textContent = 'Dark Mode');
|
|||
|
|
console.log('Theme set to: dark');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateImageSources();
|
|||
|
|
updateLottiePathColors();
|
|||
|
|
updateVideoVisibility()
|
|||
|
|
updateBackgroundImages(); // For background image swap
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// When page content is loaded
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
|
|||
|
|
// Initialize the theme
|
|||
|
|
initializeTheme();
|
|||
|
|
|
|||
|
|
// Add event listener to all theme toggle buttons
|
|||
|
|
setup.themeToggleButtons.forEach(button => {
|
|||
|
|
button.addEventListener('click', toggleTheme);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Ensure Lottie path colors and image sources are updated on page load
|
|||
|
|
window.addEventListener('load', () => {
|
|||
|
|
updateLottiePathColors();
|
|||
|
|
updateImageSources();
|
|||
|
|
updateVideoVisibility()
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script></body></html>
|