first commit?

src/assets/js/DrawSVGPlugin.min.js

@@ -0,0 +1,11 @@
+/*!
+ * DrawSVGPlugin 3.9.1
+ * https://greensock.com
+ * 
+ * @license Copyright 2021, GreenSock. All rights reserved.
+ * This plugin is a membership benefit of Club GreenSock and is only authorized for use in sites/apps/products developed by individuals/companies with an active Club GreenSock membership. See https://greensock.com/club
+ * @author: Jack Doyle, jack@greensock.com
+ */
+
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function i(){return"undefined"!=typeof window}function j(){return a||i()&&(a=window.gsap)&&a.registerPlugin&&a}function m(e){return Math.round(1e4*e)/1e4}function n(e){return parseFloat(e)||0}function o(e,t){var r=n(e);return~e.indexOf("%")?r/100*t:r}function p(e,t){return n(e.getAttribute(t))}function r(e,t,r,i,s,o){return P(Math.pow((n(r)-n(e))*s,2)+Math.pow((n(i)-n(t))*o,2))}function s(e){return console.warn(e)}function t(e){return"non-scaling-stroke"===e.getAttribute("vector-effect")}function w(e){if(!(e=v(e)[0]))return 0;var n,i,o,a,f,h,d,l=e.tagName.toLowerCase(),u=e.style,c=1,g=1;t(e)&&(g=e.getScreenCTM(),c=P(g.a*g.a+g.b*g.b),g=P(g.d*g.d+g.c*g.c));try{i=e.getBBox()}catch(e){s("Some browsers won't measure invisible elements (like display:none or masks inside defs).")}var _=i||{x:0,y:0,width:0,height:0},y=_.x,w=_.y,x=_.width,m=_.height;if(i&&(x||m)||!k[l]||(x=p(e,k[l][0]),m=p(e,k[l][1]),"rect"!==l&&"line"!==l&&(x*=2,m*=2),"line"===l&&(y=p(e,"x1"),w=p(e,"y1"),x=Math.abs(x-y),m=Math.abs(m-w))),"path"===l)a=u.strokeDasharray,u.strokeDasharray="none",n=e.getTotalLength()||0,c!==g&&s("Warning: <path> length cannot be measured when vector-effect is non-scaling-stroke and the element isn't proportionally scaled."),n*=(c+g)/2,u.strokeDasharray=a;else if("rect"===l)n=2*x*c+2*m*g;else if("line"===l)n=r(y,w,y+x,w+m,c,g);else if("polyline"===l||"polygon"===l)for(o=e.getAttribute("points").match(b)||[],"polygon"===l&&o.push(o[0],o[1]),n=0,f=2;f<o.length;f+=2)n+=r(o[f-2],o[f-1],o[f],o[f+1],c,g)||0;else"circle"!==l&&"ellipse"!==l||(h=x/2*c,d=m/2*g,n=Math.PI*(3*(h+d)-P((3*h+d)*(h+3*d))));return n||0}function x(e,t){if(!(e=v(e)[0]))return[0,0];t=t||w(e)+1;var r=h.getComputedStyle(e),i=r.strokeDasharray||"",s=n(r.strokeDashoffset),o=i.indexOf(",");return o<0&&(o=i.indexOf(" ")),t<(i=o<0?t:n(i.substr(0,o)))&&(i=t),[-s||0,i-s||0]}function y(){i()&&(h=window,l=a=j(),v=a.utils.toArray,d=-1!==((h.navigator||{}).userAgent||"").indexOf("Edge"))}var a,v,h,d,l,b=/[-+=\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/gi,k={rect:["width","height"],circle:["r","r"],ellipse:["rx","ry"],line:["x2","y2"]},P=Math.sqrt,f={version:"3.9.1",name:"drawSVG",register:function register(e){a=e,y()},init:function init(e,r){if(!e.getBBox)return!1;l||y();var i,s,a,f=w(e);return this._style=e.style,this._target=e,r+""=="true"?r="0 100%":r?-1===(r+"").indexOf(" ")&&(r="0 "+r):r="0 0",s=function _parse(e,t,n){var r,i,s=e.indexOf(" ");return i=s<0?(r=void 0!==n?n+"":e,e):(r=e.substr(0,s),e.substr(s+1)),r=o(r,t),(i=o(i,t))<r?[i,r]:[r,i]}(r,f,(i=x(e,f))[0]),this._length=m(f),this._dash=m(i[1]-i[0]),this._offset=m(-i[0]),this._dashPT=this.add(this,"_dash",this._dash,m(s[1]-s[0])),this._offsetPT=this.add(this,"_offset",this._offset,m(-s[0])),d&&(a=h.getComputedStyle(e)).strokeLinecap!==a.strokeLinejoin&&(s=n(a.strokeMiterlimit),this.add(e.style,"strokeMiterlimit",s,s+.01)),this._live=t(e)||~(r+"").indexOf("live"),this._nowrap=~(r+"").indexOf("nowrap"),this._props.push("drawSVG"),1},render:function render(e,t){var n,r,i,s,o=t._pt,a=t._style;if(o){for(t._live&&(n=w(t._target))!==t._length&&(r=n/t._length,t._length=n,t._offsetPT&&(t._offsetPT.s*=r,t._offsetPT.c*=r),t._dashPT?(t._dashPT.s*=r,t._dashPT.c*=r):t._dash*=r);o;)o.r(e,o.d),o=o._next;i=t._dash||e&&1!==e&&1e-4||0,n=t._length-i+.1,s=t._offset,i&&s&&i+Math.abs(s%t._length)>t._length-.2&&(s+=s<0?.1:-.1)&&(n+=.1),a.strokeDashoffset=i?s:s+.001,a.strokeDasharray=n<.2?"none":i?i+"px,"+(t._nowrap?999999:n)+"px":"0px, 999999px"}},getLength:w,getPosition:x};j()&&a.registerPlugin(f),e.DrawSVGPlugin=f,e.default=f;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});
+

src/assets/js/main.js

@@ -0,0 +1,482 @@
+gsap.registerPlugin(DrawSVGPlugin);
+gsap.registerPlugin(CustomEase);
+
+//////////////////////////////////////////
+// MENU
+
+let menuOpen = document.getElementById('menu-open'),
+    menuClose = document.getElementById('menu-close'),
+    openedMenuArray = gsap.utils.toArray(".opened-menu"),
+    closedMenuArray = gsap.utils.toArray(".closed-menu");
+
+menuOpen.addEventListener("click", () => openMenu());
+menuClose.addEventListener("click", () => closeMenu());
+
+
+
+function openMenu() {
+    gsap.to('#menu', { y: "0vh" });
+    gsap.to('main', { y: "0vh" });
+    gsap.to(openedMenuArray, { x: '0', opacity: 1, width: 'auto'});
+    gsap.to(closedMenuArray, { x: '3rem', opacity: 0, width: 0});
+}
+function closeMenu() {
+    gsap.to('#menu', { y: "-100vh" });
+    gsap.to('main', { y: "-100vh" });
+    gsap.to(closedMenuArray, { x: '0', opacity: 1, width: 'auto'});
+    gsap.to(openedMenuArray, { x: '3rem', opacity: 0, width: 0});
+}
+
+
+
+
+
+//////////////////////////////////////////
+// HERO
+
+gsap.from("#hero-image", {
+  duration: 0.5,
+  y: "-10rem",
+  opacity: 0,
+  delay: 0.5,
+});
+gsap.from("#logo", { duration: 0.5, y: "-5rem", opacity: 0, delay: 0.75 });
+//gsap.config({trialWarn: false});
+
+// create the smooth scroller FIRST!
+// ScrollSmoother.create({
+//     smooth: 2,   // seconds it takes to "catch up" to native scroll position
+//     effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
+//     wrapper: '.scroll_track',
+// 	content: '.scroll_track_content'
+//   });
+
+
+//////////////////////////////////////////
+// PITCH
+
+gsap.from("#pitch h1", {
+  duration: 0.5,
+  y: "5rem",
+  scale: 0.8,
+  opacity: 0,
+  delay: 0.75,
+  scrollTrigger: "#pitch h1",
+});
+
+// gsap.from("#xyz", {
+//     duration: 1, drawSVG: "false",
+//     scrollTrigger: '#xyz'
+// })
+
+gsap.from("#xyz", {
+  drawSVG: 0,
+  ease: "none",
+  scrollTrigger: {
+    trigger: "#hero-to-pitch_1",
+    scrub: true,
+    start: "top center",
+    end: "bottom center",
+  },
+});
+
+let imgs = gsap.utils.toArray(".pseudoservice"),
+    next = 1.5, // time to change
+    itemHeight = document.querySelector(".pseudoservice").getBoundingClientRect().height,
+    listHeight = document.querySelector(".pseudoservices").getBoundingClientRect().height,
+    windowHeight = document.getElementById("ticker__window").clientHeight,
+    kerplunk = CustomEase.create("custom", "M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 "),
+    kerplunk2 = CustomEase.create("custom", "M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 ");
+
+function crossfade() {
+  var action = gsap
+    .timeline()
+    .to(imgs, { y: "-=" + itemHeight, duration: 1, ease: kerplunk2 })
+    .to(imgs[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
+
+  imgs.push(imgs.shift()); // the first (shift) to the end (push) from the array
+  //console.log(imgs);
+  //console.log(itemHeight);
+
+  // start endless run
+  gsap.delayedCall(next, crossfade);
+}
+
+// start the crossfade after next = 3 sec
+gsap.delayedCall(next, crossfade);
+
+//Librarys
+
+/*
+var imagesLoaded = require('imagesloaded');
+import barba from '@barba/core';
+import LocomotiveScroll from 'locomotive-scroll';
+import { gsap } from "gsap";
+import { Draggable } from "gsap/Draggable";
+import { ScrollToPlugin } from "gsap/ScrollToPlugin";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { InertiaPlugin } from "gsap/InertiaPlugin";
+import { SplitText } from "gsap/SplitText";
+
+gsap.registerPlugin(Draggable, ScrollToPlugin, ScrollTrigger, InertiaPlugin, SplitText);
+
+
+
+
+// Locomotive Scroll
+const scroll = new LocomotiveScroll({
+    el: document.querySelector('[data-scroll-container]'),
+    smooth: true,
+    tablet: {
+        breakpoint: 961
+    }
+});
+
+
+
+
+// Use Locomotive Scroll with ScrollTrigger
+scroll.on("scroll", ScrollTrigger.update);
+
+ScrollTrigger.scrollerProxy(".locomotive", {
+  scrollTop(value) {
+    return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;
+  }, 
+  getBoundingClientRect() {
+    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
+  },
+  pinType: document.querySelector(".locomotive").style.transform ? "transform" : "fixed"
+});
+
+
+
+
+// Mobile Menu Toggle
+const menuIcon = document.querySelector('.navBtnContainer');
+const mobileNav = document.querySelector('.mobileNav');
+
+const menuToggle = function () {
+    menuIcon.addEventListener(`click`, function() {
+        if(this.classList.contains(`active`)) {
+            this.classList.remove(`active`);
+            mobileNav.classList.remove(`active`);
+        } else {
+            this.classList.add(`active`);
+            mobileNav.classList.add(`active`);
+        }
+    });
+}
+
+menuToggle();
+
+
+
+
+// Custom cursor
+const cursorAnimate = function () {
+    const cursors = document.querySelector('.cursors')
+    const cursor = cursors.querySelector('.cursor')
+    const cursorLinks = document.querySelectorAll('a, video, .resumeItem')
+    let cursorX = 0
+    let cursorY = 0
+    let aimX = 0
+    let aimY = 0
+    let speed = 0.2
+
+    const cursorEase = function () {
+        cursorX += (aimX - cursorX) * speed
+        cursorY += (aimY - cursorY) * speed
+
+        cursor.style.left = cursorX + "px"
+        cursor.style.top = cursorY + "px"
+
+        requestAnimationFrame(cursorEase)
+    }
+
+    cursorEase()
+
+    document.addEventListener('mousemove', function (event) {
+        aimX = event.pageX
+        aimY = event.pageY
+    })
+
+    cursorLinks.forEach(cursorLink => {
+        cursorLink.addEventListener('mouseover', function () {
+            cursor.classList.add(`hover`)
+        })
+        cursorLink.addEventListener('mouseout', function () {
+            cursor.classList.remove(`hover`)
+        })
+    })
+}
+
+
+
+
+// Scroll Trigger Hero Image
+const heroImgInnerAnimate = function () {
+    const heroImgInner = document.querySelectorAll('.heroImgInner');
+    heroImgInner.forEach(function (heroImgInner){
+        gsap.to(heroImgInner, {
+            scrollTrigger: {
+                trigger: heroImgInner,
+                scroller: ".locomotive",
+                start: "top bottom",
+                end: "bottom top",
+                scrub: 1,
+            },
+            y: "-43.75%",
+            ease: "none"
+        })
+    })
+}
+
+
+
+
+// Footer Marquee
+const footerMarqueeAnimate = function () {
+    const footerMarquee = document.querySelector('.footerMarqueeItem');
+    const footerMarqueeTrack = document.querySelector('.footerMarqueeTrack');
+    const footerMarqueeItemWidth = footerMarquee.offsetWidth;
+    //console.log(footerMarqueeItemWidth);
+    const footerMarqueeTL = gsap.timeline({repeat:-1, defaults:{ease:"none"}});
+    footerMarqueeTL.to(footerMarqueeTrack,{x:-footerMarqueeItemWidth, duration:20});  
+}
+
+
+
+
+// Scroll Trigger Marquee
+const marqueeAnimate = function () {
+    const marquee = document.querySelectorAll('.marqueeTrack');
+    marquee.forEach(function (marquee){
+        gsap.to(marquee, {
+            scrollTrigger: {
+                trigger: marquee,
+                scroller: ".locomotive",
+                start: "top bottom",
+                end: "bottom top",
+                scrub: 1,
+            },
+            x: "-33.33%",
+            ease: "none"
+        })
+    })
+}
+
+
+
+
+// Scroll Trigger Spin
+const spinTextAnimate = function () {
+    const spinText = document.querySelectorAll('.spinText');
+    spinText.forEach(function (spinText){
+        gsap.to(spinText, {
+            scrollTrigger: {
+                trigger: spinText,
+                scroller: ".locomotive",
+                start: "top bottom",
+                end: "bottom top",
+                scrub: 1,
+            },
+            rotation:360,
+            ease: "none"
+        })
+    })
+}
+
+
+
+
+// Work Experience Dropdown
+const experienceToggle = function () {
+    const resumeItems = document.querySelectorAll('.resumeItem');
+    resumeItems.forEach(function (item) {
+        let jobTitleHeight = item.offsetHeight;
+        item.addEventListener('click', function () {
+            let jobDescHeight = this.children[4].offsetHeight;
+            if(this.classList.contains('active')) {
+                this.classList.remove('active')
+                this.style.height = jobTitleHeight + "px"
+            } else {
+                this.classList.add('active')
+                this.style.height = jobTitleHeight + jobDescHeight + "px"
+            }
+            setTimeout(function () { scroll.update(); }, 1000)
+        })
+    });
+}
+experienceToggle();
+
+
+
+
+// Update scroll height after Images Load
+imagesLoaded( 'body', function() {
+    scroll.update();
+    cursorAnimate();
+    footerMarqueeAnimate();
+    marqueeAnimate();
+    spinTextAnimate();
+    ScrollTrigger.matchMedia({
+        "(min-width: 960px)": function() {
+            heroImgInnerAnimate();
+        }
+    })
+});
+
+
+
+
+
+
+
+
+// Barba
+
+const transitionPanel1 = document.querySelector('#transitionPanel1');
+const loadPanel = document.querySelector('.loadPanel');
+
+barba.hooks.after(() => {
+    marqueeAnimate();
+    spinTextAnimate();
+    experienceToggle();
+    cursorAnimate();
+    ScrollTrigger.matchMedia({
+        "(min-width: 960px)": function() {
+            heroImgInnerAnimate();
+        }
+    })
+    scroll.update();
+});
+
+
+barba.init({
+
+    transitions: [{
+        name: 'default',
+
+
+
+        once({ next }) {
+
+            return new Promise(resolve => {
+
+                const timeline = gsap.timeline({
+                    onComplete() {
+                        deleteSplit();
+                        scroll.update();
+                        resolve();
+                    }
+                });
+
+                const splitHeadline = new SplitText('h1', {type:'words'})
+                function deleteSplit() {
+                    splitHeadline.revert()
+                }
+
+
+                timeline
+                    .set('.load-content', {opacity: 0})
+                    .set('main', {y: 200, opacity: 0})
+                    .set('header', {y: -100, opacity: 0})
+                    .set(splitHeadline.words, {opacity: 0, y: 48})
+                    .to('.load-content', {duration: 1, opacity: 1}, 0.5)
+                    .to('.loadPanel', {duration: 1, height: 0, ease: "power4.inOut"}, '+=1')
+                    .to('.load-content', {duration: 1, opacity: 0}, '-=1')
+                    .to('header', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=0.5')
+                    .to('main', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=1')
+                    .to(splitHeadline.words, {duration: 1, y: 0, opacity: 1, ease: "power3.out", stagger: 0.04}, '-=1')
+                    .set('.loadPanel', {opacity: 0, display:'none'})
+
+            });
+            
+        },
+
+
+
+        leave({ current, next, trigger }) {
+
+            return new Promise(resolve => {
+
+                const timeline = gsap.timeline({
+                    onComplete() {
+                        resolve();
+                    }
+                });
+
+                transitionPanel1.classList.add(`active`);
+                mobileNav.classList.remove(`active`);
+                menuIcon.classList.remove(`active`);
+
+                timeline
+                    .to('footer', {duration: 0.5, opacity: 0}, 0)
+                    .to(current.container, {duration: 0.5, opacity: 0}, 0)
+                    .to(current.container, {display: 'none'})
+
+            });
+
+        },
+
+
+
+        beforeEnter({ current, next, trigger }) {
+
+            scroll.scrollTo(0, 0);
+
+        },
+
+
+
+        enter({ current, next, trigger }) {
+
+            imagesLoaded( 'body', function() {
+                scroll.update();
+            });
+
+            return new Promise(resolve => {
+                
+                const timeline = gsap.timeline({
+                    onComplete() {
+                        transitionPanel1.classList.remove(`active`);
+                        resolve();
+                    }
+                });
+
+                timeline
+                    .set(current.container, {opacity: 0})
+                    .set(next.container, {opacity: 0})
+
+            });
+        },
+
+
+
+        afterEnter({ current, next, trigger }) {
+
+            return new Promise(resolve => {
+                
+                const timeline = gsap.timeline({
+                    onComplete() {
+                        resolve();
+                    }
+                });
+
+                timeline
+                    .to(next.container, {duration: 1, opacity: 1}, 0.5)
+                    .to('footer', {duration: 1, opacity: 1}, 0.5)
+
+            });
+        },
+
+
+        
+    }],
+
+    views: [{}],
+
+    //debug: true
+});
+
+*/

src/assets/styles/community.scss

@@ -0,0 +1,5 @@
+#community {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/assets/styles/dev.scss

@@ -0,0 +1,55 @@
+#dev {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  h2{
+    margin: 0;
+    text-align: center;
+  }
+  .cols{
+    margin-top: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap:2rem;
+  }
+  .wrapper{
+    border: var(--b-primary);
+    max-width: 35ch;
+    .content {
+      padding: 1rem;
+      h3{
+        margin: 0;
+        font-family: 'Tusker Grotesk 5500';
+        font-weight: 100;
+        font-size: 3.5rem;
+        line-height: 1.1em;
+        text-transform: uppercase;
+      }
+    }
+    .footer{
+      padding: 1rem;
+      background: var(--c-spacer);
+      display: flex;
+      justify-content: center;
+      border-top: var(--b-primary);
+
+      a{
+        padding: 0.4rem 2rem;
+        background-color: var(--c-text-accent);
+        color: var(--c-text-bright);
+        border-color: var(--c-3d-shadow);
+        border-width: 1px 1px 15px 1px;
+        border-style: solid;
+        font-family: 'Tusker Grotesk 5500';
+        font-weight: 100;
+        text-transform: uppercase;
+        font-size: 2rem;
+        text-decoration: none;
+      }
+    }
+  }
+  img {
+    width: 20rem;
+  }
+}

src/assets/styles/fonts.scss

@@ -0,0 +1,557 @@
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-1700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-1700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-1500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-1500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-1600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-1600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 1500';
+    src: url('../fonts/TuskerGrotesk-1500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-1500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 1600';
+    src: url('../fonts/TuskerGrotesk-1600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-1600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 1800 Super';
+    src: url('../fonts/TuskerGrotesk-1800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-1800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-1800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-1800Super.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-2600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-2600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 1700';
+    src: url('../fonts/TuskerGrotesk-1700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-1700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-2500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-2500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-3500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-3500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-3600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-3600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-2800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-2800Super.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 2800 Super';
+    src: url('../fonts/TuskerGrotesk-2800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-2800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 2600';
+    src: url('../fonts/TuskerGrotesk-2600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-2600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 2700';
+    src: url('../fonts/TuskerGrotesk-2700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-2700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 2500';
+    src: url('../fonts/TuskerGrotesk-2500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-2500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-2700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-2700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 3600';
+    src: url('../fonts/TuskerGrotesk-3600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-3600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-3800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-3800Super.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 3500';
+    src: url('../fonts/TuskerGrotesk-3500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-3500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-3700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-3700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 3700';
+    src: url('../fonts/TuskerGrotesk-3700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-3700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-4700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-4700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 4600';
+    src: url('../fonts/TuskerGrotesk-4600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-4600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-4500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-4500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 4500';
+    src: url('../fonts/TuskerGrotesk-4500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-4500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-4600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-4600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 3800 Super';
+    src: url('../fonts/TuskerGrotesk-3800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-3800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 4700';
+    src: url('../fonts/TuskerGrotesk-4700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-4700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-4800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-4800Super.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-5500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-5500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-5800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-5800Super.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 5600';
+    src: url('../fonts/TuskerGrotesk-5600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-5600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-5700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-5700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 5500';
+    src: url('../fonts/TuskerGrotesk-5500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-5500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 4800 Super';
+    src: url('../fonts/TuskerGrotesk-4800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-4800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-5600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-5600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-6600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-6600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-6700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-6700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-6800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-6800Super.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 5700';
+    src: url('../fonts/TuskerGrotesk-5700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-5700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 6600';
+    src: url('../fonts/TuskerGrotesk-6600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-6600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 5800 Super';
+    src: url('../fonts/TuskerGrotesk-5800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-5800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 6500';
+    src: url('../fonts/TuskerGrotesk-6500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-6500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-6500Medium.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-6500Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 6700';
+    src: url('../fonts/TuskerGrotesk-6700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-6700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 7600';
+    src: url('../fonts/TuskerGrotesk-7600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-7600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 6800 Super';
+    src: url('../fonts/TuskerGrotesk-6800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-6800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-7700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-7700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-7600Semibold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-7600Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-7800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-7800Super.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-8800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-8800Super.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 8700';
+    src: url('../fonts/TuskerGrotesk-8700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-8700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-8700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-8700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 7700';
+    src: url('../fonts/TuskerGrotesk-7700Bold.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-7700Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 7800 Super';
+    src: url('../fonts/TuskerGrotesk-7800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-7800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 9800 Super';
+    src: url('../fonts/TuskerGrotesk-9800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-9800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk';
+    src: url('../fonts/TuskerGrotesk-9800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-9800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tusker Grotesk 8800 Super';
+    src: url('../fonts/TuskerGrotesk-8800Super.woff2') format('woff2'),
+        url('../fonts/TuskerGrotesk-8800Super.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'chonk';
+    src: url('3602ChonkWeb-Regular.woff2') format('woff2'),
+        url('3602ChonkWeb-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'chonk';
+    src: url('3602ChonkWeb-Regular.woff2') format('woff2'),
+        url('3602ChonkWeb-Regular.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}

src/assets/styles/highlights.scss

@@ -0,0 +1,59 @@
+#highlights {
+  padding-top: 4rem;
+  border-top: var(--b-primary);
+  border-bottom: var(--b-primary);
+  h1 {
+    font-size: min(6rem, 100px);
+    width: 16ch;
+  }
+  .content{
+    display: flex;
+    gap: 4rem;
+    .spacer{
+      width: 35rem;
+      background-color: var(--c-spacer);
+      backdrop-filter: blur(5px);
+    }
+    .blurb p{
+      max-width: 25ch;
+    }
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+      width: 33.33%;
+      display: flex;
+      flex-direction: column;
+      padding: 3%;
+      list-style: none;
+      border-right: 1px dashed var(--c-1);
+      border-bottom: 1px dashed var(--c-1);
+      box-sizing: border-box;
+
+      &:nth-child(3n){
+        border-right: none;
+      }
+      &:nth-child(n+4){
+        border-bottom: none;
+      }
+
+      .highlight-icon {
+        align-self: flex-end;
+      }
+      h3 {
+        font-family: var(--f-accent);
+        font-weight: 400;
+        color: var(--c-text-primary);
+        text-transform: uppercase;
+        em {
+          font-style: normal;
+          font-weight: 900;
+        }
+      }
+    }
+  }
+}

src/assets/styles/how.scss

@@ -0,0 +1,32 @@
+#how{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rem;
+    margin-bottom: 6rem;
+    h3{
+        font-size: 4rem;
+        font-weight: 100;
+    }
+    h4{
+        font-size: 3rem;
+        font-weight: 700;
+    }
+    .cols{
+        display: flex;
+        align-items:flex-start;
+        justify-content: center;
+        gap: 6rem;
+        .col{
+            max-width: 37vw;
+        }
+    }
+    .path-node{
+        padding:1rem;
+        height: auto;
+    }
+    p{
+        font-family: var(--f-bold);
+        font-size: 3rem;
+    }
+}

src/assets/styles/landing.scss

@@ -0,0 +1,169 @@
+/* 
+    scroll bar width from vizion;
+    add shadows - maybe with animation
+    more responsive scaling from vizion
+
+*/
+
+@use 'pitch';
+@use 'highlights';
+@use 'why';
+@use 'how';
+@use 'products';
+@use 'community';
+@use 'dev';
+
+
+body, .ScrollSmoother-wrapper {
+  margin: 0;
+  background: linear-gradient(0deg, #333333, #333333),
+    url("../../assets/images/bkg.jpg");
+  background-blend-mode: color, normal;
+  background-size: cover;
+  background-attachment: fixed;
+  width: 100vw;
+}
+
+section {
+  --section-padding: 2vh;
+  min-height: calc(100vh - 2 * var(--section-padding));
+  padding: var(--section-padding);
+}
+
+#hero-image img {
+  width: 50rem;
+  max-width: 90vw;
+  margin-top: 4rem;
+}
+
+nav {
+  color: var(--c-text-primary);
+}
+
+#logo {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  img {
+    width: 15rem;
+  }
+}
+
+#hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+h1 {
+  font-family: var(--f-hero);
+  font-size: min(9rem,171px);
+  text-transform: uppercase;
+  line-height: 1;
+  color: var(--c-text-primary);
+
+  em {
+    font-style: normal;
+    color: var(--c-text-accent);
+  }
+
+  .img-inline {
+    height: 1.4em;
+    margin: -0.3em -0.1em -0.2em -0.1em;
+    position: relative;
+  }
+}
+
+aside > h1 {
+  font-family: var(--f-bold);
+  font-size: 7rem;
+  text-transform: uppercase;
+  line-height: 1.1;
+  color: var(--c-text-primary);
+
+  em {
+    font-style: normal;
+    color: var(--c-text-accent);
+  }
+}
+
+h2 {
+  font-family: var(--f-hero);
+  font-size: 7rem;
+  text-transform: uppercase;
+  line-height: 1;
+  color: var(--c-text-primary);
+
+  em {
+    font-style: normal;
+    color: var(--c-text-accent);
+  }
+
+  .img-inline {
+    height: 1.4em;
+    margin: -0.3em -0.1em -0.2em -0.1em;
+    position: relative;
+  }
+}
+
+p {
+  font-family: var(--f-accent);
+  font-weight: 200;
+  font-size: 2rem;
+  color: var(--c-text-primary);
+
+  em {
+    font-style: normal;
+    color: var(--c-text-accent);
+  }
+}
+
+
+
+
+
+.nodes {
+  display: flex;
+  flex-direction: column;
+  gap: 5rem;
+}
+
+.row {
+  display: flex;
+  gap: 5rem;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.path-node {
+  border: var(--b-primary);
+  display: inline-block;
+  height: 20rem;
+
+  &.path-node-text {
+    width: 30rem;
+    display: flex;
+    align-items: center;
+    p {
+      margin: 0;
+      padding: 1.5rem;
+    }
+  }
+
+  &.path-node-img img {
+    height: 20rem;
+    width: 20rem;
+    aspect-ratio: 1;
+    object-fit: cover;
+  }
+}
+
+.pseudoservices {
+  margin: 0;
+  padding: 0;
+  li {
+    text-transform: uppercase;
+  }
+}
+

src/assets/styles/main.scss

@@ -0,0 +1,119 @@
+@use 'normalize';
+@use 'fonts';
+@use 'menu';
+/* @use 'post'; */
+
+:root { 
+    background-attachment: fixed; 
+    --viewportWidth: calc(100vw - var(--scrollbarWidth));
+
+    --c-1: rgba(255,255,255,.7);
+    --c-text-primary: var(--c-1);
+    --c-line-primary: var(--c-1);
+
+    --c-2: #EF4B63;
+    --c-text-accent: var(--c-2);
+    --c-line-accent: var(--c-2);
+
+    --c-3: #333;
+    --c-bkg: var(--c-3);
+
+    --c-4: #BA1930;
+    --c-3d-shadow: var(--c-4);
+
+    --c-5: rgba(255,255,255,1);
+    --c-text-bright: var(--c-5);
+
+    --c-spacer: rgba(255,255,255,.05);
+    --s-primary: 0.5;
+    --b-primary: 1px solid var(--c-line-primary);
+    --b-secondary: 1px dashed var(--c-line-primary);
+
+    --f-hero: "Tusker Grotesk 3600";
+    --f-bold: "Tusker Grotesk 5500";
+    --f-accent: 'Arkibal Mono';
+    --f-accent-bold: 'Arkibal Mono Rg';
+    --f-copy: 'Liberation Mono';
+}
+
+html {
+    background-color: lime;
+    font-size: 2vmin;
+    scroll-behavior: smooth;
+    color: var(--c-text-primary);
+    font-family: var(--f-accent);
+    font-weight: 200;
+}
+
+main{
+    transform: translateY(-100vh);
+}
+
+a {
+    text-decoration: none;
+}
+
+h1, h2, h3, h4, h5 {
+    margin: 0;
+    text-transform: uppercase;
+    em {
+        color: var(--c-text-accent);
+        font-style: normal;
+    }
+}
+
+ul {
+    margin:0;
+    padding:0;
+    li{
+        list-style: none;
+    }
+}
+
+header{
+    position: fixed;
+    width: 100vw;
+    z-index: 1;
+}
+nav{
+    --padding: 1rem;
+    width: calc(100% - 2 * var(--padding) - 15px);
+    font-family: var(--f-accent-bold);
+    font-weight: 400;
+    line-height: 1;
+    text-transform: uppercase;
+    padding: var(--padding);
+    display: flex;
+    justify-content: end;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        gap: 1rem;
+        li {
+            list-style: none;
+            a {
+                color: var(--c-text-bright);
+                font-size: 1.5rem;
+                padding: 0.3em 0.5em 0em 0.5em;
+                &.em{
+                    background-color: var(--c-text-accent);
+                    
+                }
+            }
+        }
+    }
+}
+
+.opened-menu {
+    opacity: 0;
+    width: 0;
+    transform: translateX(3rem);
+    //overflow: hidden;
+    white-space: nowrap;
+}
+.closed-menu {
+    //overflow: hidden;
+    white-space: nowrap;
+}

src/assets/styles/menu.scss

@@ -0,0 +1,97 @@
+#menu{
+    //position: absolute;
+    padding: 0;
+    width: 100vw;
+    height:100vh;
+    transform: translateY(-100vw);
+    .menu-content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .header{
+            align-self: flex-start;
+            margin: 5rem 0 0 5rem;
+            img{
+                width: 12rem;
+            }
+        }
+    }
+    background-color: var(--c-bkg);
+    .groups{
+        max-width: 70vw;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        .half {
+            grid-row: span 1;
+        }
+        .full {
+            grid-row: span 2;
+        }
+        & > li {
+            //margin-top: 5rem;
+            padding: 2.5rem 2.5rem;
+            &:nth-child(-n+2){
+                border-right: var(--b-secondary);
+            }
+        }
+        // & > *{
+        //     outline: 1px solid orange;
+        // }
+    }
+    h1{
+        font-family: var(--f-accent-bold);
+        font-size: 1rem;
+        color: var(--c-text-primary);
+        margin-bottom: 1.7rem;
+    }
+    .groups li > a {
+        font-family: var(--f-accent);
+        font-size: 1.9rem;
+        line-height: 1.5;
+        font-weight: 100;
+        text-transform: uppercase;
+        letter-spacing: .1em;
+        color: var(--c-text-primary);
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        display: inline-block;
+        &::after{
+            content: '';
+            position: absolute;
+            transition: all .2s ease-in-out;
+            display: inline-block;   
+            width:0;
+            height: 85%;
+            left: 50%;
+            opacity: 0;
+        }
+        &:hover {
+
+            &::after{
+                border: var(--b-primary);
+                width: 110%;
+                left: -5%;
+                opacity: 1;
+            }
+        }
+        &.highlight{
+            color: var(--c-text-bright);
+            font-weight: 300;
+            &::before{
+                content: '';
+                z-index: -1;
+                //border: var(--b-primary);
+                background-color: var(--c-text-accent);
+                width: 110%;
+                left: -5%;
+                display: inline-block; 
+                height: 85%; 
+                position: absolute;
+            }
+        }
+
+    }
+}

src/assets/styles/normalize.scss

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

src/assets/styles/pitch.scss

@@ -0,0 +1,11 @@
+#pitch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  
+    h1 {
+      margin: 0;
+      display: inline-block;
+      max-width: 73vw;
+    }
+  }

src/assets/styles/products.scss

@@ -0,0 +1,118 @@
+#products {
+  .product-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7rem;
+    .product {
+      perspective: 630px;
+      perspective-origin: 50% 50%;
+      .product__box {
+        position: relative;
+        transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(-45deg)
+          rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px)
+          skewX(0deg) skewY(0deg);
+        margin: auto;
+        position: relative;
+        --height: 400px;
+        --width: calc(var(--height) / 2);
+        height: var(--height);
+        width: var(--width);
+        --halfwidth: calc(var(--width) / 2);
+        --neghalfwidth: calc(var(--halfwidth) * -1);
+        -webkit-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        transition: all .5s ease-in-out .3s;
+  
+        &:hover{
+          transform: rotate3d(0, 0, 0, 45deg) !important;
+        }
+      }
+  
+      &.product--pro {
+        z-index: 2;
+        perspective: 830px;
+        .product__box{
+          // --height: 500px;
+          --scale: 1.3;
+          transform: scaleX(var(--scale)) scaleY(var(--scale)) scaleZ(var(--scale)) rotateX(0deg) rotateY(-45deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
+          &:hover{
+            transform: scale3d(var(--scale),var(--scale),var(--scale)) rotate3d(0, 0, 0, 45deg) !important;
+          }
+          .front {
+            background-color: #EF4B63;
+          }
+          .right {
+            background-color: #BA1930;
+          }
+        }
+      }
+  
+      .product__box > div {
+        position: absolute;
+        box-sizing: border-box;
+        padding: 10px;
+        line-height: 1;
+        text-align: left;
+        height: 100%;
+        width: 100%;
+        opacity: 1;
+        // border: 1px solid #000;
+        font-weight: bold;
+  
+        h1{
+          font-size: 3.8rem;
+        }
+      }
+  
+      .front {
+        background-color: #575757;
+        transform: translateZ(var(--halfwidth));
+      }
+      .back {
+        background-color: #313131;
+        transform: translateZ(var(--neghalfwidth)) rotateY(180deg);
+      }
+      .top {
+        transform: rotateX(-270deg) translateY(var(--neghalfwidth));
+        transform-origin: top center;
+        background-color: #666;
+        height: 50% !important;
+      }
+      .bottom {
+        -webkit-transform: rotateX(270deg) translateY(var(--halfwidth));
+        transform: rotateX(270deg) translateY(var(--halfwidth));
+        transform-origin: bottom center;
+        background-color: #666;
+        height: 50% !important;
+      }
+      .left {
+        -webkit-transform: rotateY(270deg) translateX(var(--neghalfwidth));
+        transform: rotateY(270deg) translateX(var(--neghalfwidth));
+        transform-origin: center left;
+        background-color: #575757;
+      }
+      .right {
+        -webkit-transform: rotateY(-270deg) translateX(var(--halfwidth));
+        transform: rotateY(-270deg) translateX(var(--halfwidth));
+        transform-origin: top right;
+        background-color: #313131;
+      }
+    }
+  
+    .product-box {
+      .front,
+      .back {
+        width: 10rem;
+        height: 20rem;
+      }
+    }
+  }
+  aside {
+    margin: 20rem 5rem;
+    display: flex;
+    justify-content: center;
+    font-size: 3rem;
+    text-align: center;
+  }
+}

src/assets/styles/why.scss

@@ -0,0 +1,73 @@
+#why {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6rem;
+  margin: 6rem 0;
+
+  --size: 2rem;
+  --p-t: calc(0.2 * var(--size));
+  --p-b: calc(0 * var(--size));
+  --p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size));
+  --line: calc(var(--p-t) + var(--p-b) + var(--size));
+
+  h2 {
+    text-align: center;
+  }
+
+  .cols {
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--size);
+    gap: 12.5ch;
+    h3 {
+      font-family: var(--f-bold);
+      text-transform: uppercase;
+      font-size: max(4rem, 16pt);
+      font-weight: 100;
+    }
+    #ticker {
+      height: 50vh;
+      position: relative;
+
+      #ticker__selected-frame {
+        outline: 1px solid white;
+        outline-offset: calc(0.1 * var(--size));
+        font-size: var(--size);
+        text-transform: uppercase;
+        line-height: var(--size);
+        position: absolute;
+        top: calc(5 * var(--line));
+        left: -11.5ch;
+        right: 0;
+        display: flex;
+        align-items: center;
+        height: var(--size);
+        padding: var(--p);
+      }
+      #ticker__window {
+        height: 50vh;
+        width: 30vw;
+        overflow: hidden;
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+        li {
+          list-style: none;
+          font-size: var(--size);
+          line-height: 1;
+          display: flex;
+          align-items: center;
+          height: var(--size);
+          padding: var(--p);
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}