diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index a21ecbb6..34881747 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -1,71 +1,139 @@ .site-header { - position: sticky; + position: fixed; top: 0; + left: 0; + width: 100%; z-index: 1000; - background: $dark; - padding: 0.75rem 2rem; + background: transparent; + padding: 0.75rem 0; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background 0.3s ease, backdrop-filter 0.3s ease; &.scrolled { - background: rgba(0, 0, 0, 0.05); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .container { - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; - max-width: 1200px; - margin: 0 auto; + width: 100%; + max-width: none; + padding: 0 40px; + box-sizing: border-box; + } + + .action-button { + display: flex; + gap: 20px; + justify-content: flex-start; } .logo { display: flex; - align-items: center; + justify-content: center; + grid-column: 2; .logo-img { height: 40px; width: auto; } } +} - .main-nav ul { - display: flex; - list-style: none; - gap: 2rem; - margin: 0; - padding: 0; - - a { - color: $white; - text-decoration: none; - font-size: 0.95rem; - transition: color 0.3s ease; - - &:hover { - color: #00b399; - } - } - } +.nav-button-wrapper { + display: flex; + justify-content: flex-end; // Keeps this on the far right + grid-column: 3; +} - .btn-secondary { - color: $white; - font-size: 1.6rem; - margin: 0 15px; - display: inline-block; - vertical-align: middle; - transition: color 0.3s ease; +.button { + color:$white; + text-transform: capitalize; + background-color: #0000; + background-image: radial-gradient(circle, #033e36, $black); + border-radius: .75rem; + flex-flow: row; + flex: none; + justify-content: center; + align-items: center; + height: 20px; + margin-bottom: 0; + padding: .875rem 1.5rem; + font-weight: 500; + text-decoration: none; + display: flex; + position: relative; + overflow: hidden; + box-shadow: inset 0 1px 1px $primary, inset 0 -1px 1px $primary; + transition: box-shadow 0.3s ease; - &:hover { - color: #00b399; - transform: translateY(-2px); - } + &::after { + content: ""; + position: absolute; + bottom: -25px; + left: 50%; + transform: translateX(-50%); + width: 120%; + height: 40px; + background: radial-gradient( + ellipse at center, + $white 0%, + #3AB09E 35%, + rgba(58, 176, 158, 0) 70% + ); + filter: blur(8px); + opacity: 0; + transition: opacity 0.4s ease, bottom 0.4s ease; + pointer-events: none; } - .btn-primary { - color: #050505; - transition: background-color 0.3s ease, box-shadow 0.3s ease; + &:hover::after { + opacity: 1; + bottom: -28px; } } +.secondary-button { + color: $white; + text-transform: capitalize; + font-size: 0.8rem; + border-radius: .75rem; + flex-flow: row; + flex: none; + justify-content: center; + align-items: center; + height: 10px; + margin-bottom: 0; + padding: .75rem 0.75rem; + text-decoration: none; + display: flex; + position: relative; + overflow: hidden; + box-shadow: inset 0 1px 1px $primary, inset 0 -1px 1px $white; + transition: box-shadow 0.3s ease; + + &::after { + content: ""; + position: absolute; + bottom: -25px; /* Start below the secondary-button */ + left: 50%; + transform: translateX(-50%); + width: 120%; /* Wide flare */ + height: 40px; + background: radial-gradient( + ellipse at center, + $white 0%, + #3AB09E 35%, + rgba(58, 176, 158, 0) 70% + ); + filter: blur(8px); + opacity: 0; + transition: opacity 0.4s ease, bottom 0.4s ease; + pointer-events: none; + } + &:hover::after { + opacity: 1; + bottom: -28px; /* Moves the light up into view */ + } +} \ No newline at end of file diff --git a/assets/scss/_hero-glass.scss b/assets/scss/_hero-glass.scss index 3fe6b238..1abe7dee 100644 --- a/assets/scss/_hero-glass.scss +++ b/assets/scss/_hero-glass.scss @@ -16,7 +16,7 @@ } * { - box-sizing: border-box; + // box-sizing: border-box; margin: 0; padding: 0; } @@ -112,18 +112,18 @@ ul { opacity: 0.15; } -.site-header { - max-width: 1200px; - margin: 26px auto 0; - padding: 16px 28px; - display: flex; - align-items: center; - gap: 24px; - border-radius: 999px; - position: sticky; - top: 24px; - z-index: 5; -} +// .site-header { +// max-width: 1200px; +// margin: 26px auto 0; +// padding: 16px 28px; +// display: flex; +// align-items: center; +// gap: 24px; +// border-radius: 999px; +// position: sticky; +// top: 24px; +// z-index: 5; +// } .brand { display: flex; @@ -166,7 +166,7 @@ ul { main { max-width: 1200px; margin: 0 auto; - padding: 0 24px; + padding: 50px 24px 0; } .hero { @@ -573,55 +573,55 @@ main { transform-style: preserve-3d; } -.button { - position: relative; - display: inline-flex; - align-items: center; - gap: 8px; - padding: 12px 20px; - border-radius: 999px; - font-weight: 600; - font-size: 0.95rem; - transition: transform 0.1s ease, box-shadow 0.15s ease; - border: 1px solid transparent; - overflow: hidden; -} - -.button span { - position: relative; - z-index: 1; -} - -.button::before { - content: ""; - position: absolute; - inset: -80% -40%; - background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent 60%); - opacity: 0.35; - animation: shimmer 8s linear infinite; -} - -.button.primary { - background: linear-gradient(120deg, var(--accent), var(--accent-2)); - color: #041018; - box-shadow: 0 18px 40px rgba(7, 18, 38, 0.45); -} - -.button.ghost { - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.2); - color: var(--text); -} - -.button.ghost.subtle { - background: rgba(255, 255, 255, 0.03); - color: var(--muted); -} - -.button:hover { - transform: translateY(-2px); - box-shadow: 0 12px 30px rgba(5, 14, 30, 0.4); -} +// .button { +// position: relative; +// display: inline-flex; +// align-items: center; +// gap: 8px; +// padding: 12px 20px; +// border-radius: 999px; +// font-weight: 600; +// font-size: 0.95rem; +// transition: transform 0.1s ease, box-shadow 0.15s ease; +// border: 1px solid transparent; +// overflow: hidden; +// } + +// .button span { +// position: relative; +// z-index: 1; +// } + +// .button::before { +// content: ""; +// position: absolute; +// inset: -80% -40%; +// background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent 60%); +// opacity: 0.35; +// animation: shimmer 8s linear infinite; +// } + +// .button.primary { +// background: linear-gradient(120deg, var(--accent), var(--accent-2)); +// color: #041018; +// box-shadow: 0 18px 40px rgba(7, 18, 38, 0.45); +// } + +// .button.ghost { +// background: rgba(255, 255, 255, 0.05); +// border: 1px solid rgba(255, 255, 255, 0.2); +// color: var(--text); +// } + +// .button.ghost.subtle { +// background: rgba(255, 255, 255, 0.03); +// color: var(--muted); +// } + +// .button:hover { +// transform: translateY(-2px); +// box-shadow: 0 12px 30px rgba(5, 14, 30, 0.4); +// } [data-float] { animation: float 12s ease-in-out infinite; @@ -755,10 +755,10 @@ main { @media (max-width: 960px) { - .site-header { - flex-wrap: wrap; - border-radius: 28px; - } + // .site-header { + // flex-wrap: wrap; + // border-radius: 28px; + // } .nav-links { display: none; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 36e7ca3f..1ded2dbb 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,7 +4,7 @@ {{ partial "head.html" . }} - {{ partial "navbar.html" . }} + {{ partial "header.html" . }}
{{ block "main" . }}{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index b20ae10c..5a5c2ca5 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,26 +1,22 @@
+
+ +
Read the Docs
+ + +
Watch Videos
+ +
- - - -
- - +
+ +
Try Kanvas
 - Launch Kanvas
\ No newline at end of file diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html deleted file mode 100644 index 3b8e50b7..00000000 --- a/layouts/partials/navbar.html +++ /dev/null @@ -1,26 +0,0 @@ -
-
- - - - - -
-
\ No newline at end of file