Update style for landing page title

.editorconfig

@@ -0,0 +1,25 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/best-practices/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.css]
+indent_style = tab
+indent_size = 4
+
+[*.scss]
+indent_style = tab
+indent_size = 4
+
+[*.txt]
+end_of_line = crlf

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+**/.DS_Store
+node_modules/
+vendor/
+.vscode/
+~/
+.idea/
+*.sublime-project
+*.sublime-workspace
+*.map
+*.log

functions.php

@@ -5,12 +5,13 @@
 function wptd_enqueue_styles() {
     $parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
     $theme = wp_get_theme();
-    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
+	wp_enqueue_style( 'add_google_fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;0,800;1,400&display=swap', false );
+    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
         array(),  // if the parent theme code has a dependency, copy it to here
         $theme->parent()->get('Version')
     );
     wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
         array( $parenthandle ),
         $theme->get('Version') // this only works if you have Version in the style header
     );
-}
+}

scss/_buttons.scss

@@ -1,12 +1,26 @@
-.wptd-fill-button-gradient .wp-block-button__link {  
-  @include gradient-fill;
-  border-radius: var(--child-button--border-radius);
-  border: none !important;
+.wptd-fill-button-gradient .wp-block-button__link {
+	@include gradient-fill;
+	border-radius: var(--child-button--border-radius);
+	border: none !important;
 }
 
-.wptd-fill-button-gradient.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
-  &:hover {
-    color: var(--button--color-text) !important;
-    @include gradient-fill-hover;  
-  }      
-}
+.wptd-fill-button-gradient.wp-block-button:not(.is-style-outline) .wp-block-button__link {
+	&:hover {
+		color: var(--button--color-text) !important;
+		@include gradient-fill-hover;
+	}
+}
+
+.wptd-border-gradient {
+	@include gradient-text;
+	display: inline-block;
+	padding: 15px 30px;
+	border: 2px solid;
+	border-radius: 30px;
+	border-image-slice: 1;
+	border-width: 2px;
+	border-image-source: linear-gradient(115deg, var(--global-child-color-blue-50) 0%, var(--global-child-color-pink-50) 100%);
+	margin-bottom: 20px;
+	font-weight: 800;
+	font-size: var(--global--font-size-md);
+}

scss/_gradient-text.scss

@@ -2,5 +2,10 @@
 .primary-navigation li a:hover,
 .primary-navigation .current-menu-item > a,
 .primary-navigation .current-menu-ancestor > a {
-  @include gradient-text;
-}
+	@include gradient-text;
+}
+
+.hero-title {
+	@include gradient-text-dark;
+	font-size: var(--global--font-size-xxl);
+}

scss/_mixins.scss

@@ -1,25 +1,35 @@
 @mixin gradient-fill {
-  background-image: linear-gradient(
-    160deg,
-    var(--global-child-color-deep-blue) 0%,
-    var(--global-child-color-deep-red) 100%,
-  ) !important;  
+	background-image: linear-gradient(
+		115deg,
+		var(--global-child-color-blue-50) 0%,
+		var(--global-child-color-pink-50) 100%,
+	) !important;
 }
 
 @mixin gradient-fill-hover {
-  background-image: linear-gradient(
-    160deg,
-    var(--global-child-color-deep-red) 0%,
-    var(--global-child-color-deep-blue) 100%,
-  ) !important;  
+	background-image: linear-gradient(
+		115deg,
+		var(--global-child-color-pink-50) 0%,
+		var(--global-child-color-blue-50) 100%,
+	) !important;
 }
 
 @mixin gradient-text {
-  background-image: linear-gradient(
-  45deg,
-  var(--global-child-color-deep-blue) 0%,
-  var(--global-child-color-deep-red) 100%,
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;  
-}
+	background-image: linear-gradient(
+		115deg,
+		var(--global-child-color-blue-50) 0%,
+		var(--global-child-color-pink-50) 100%,
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+@mixin gradient-text-dark {
+	background-image: linear-gradient(
+		115deg,
+		var(--global-child-color-blue-60) 0%,
+		var(--global-child-color-pink-60) 100%,
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}

scss/_primary-site-navigation.scss

@@ -1,4 +1,47 @@
+.primary-navigation a {
+	letter-spacing: -0.02em;
+}
+
 .primary-navigation .current-menu-item > a,
 .primary-navigation .current-menu-ancestor > a {
-  font-weight: bold
-}
+	font-weight: 700;
+}
+
+.wptd-gradient-text:focus,
+.primary-navigation li a:focus,
+.primary-navigation .current-menu-item>a:focus,
+.primary-navigation .current-menu-ancestor>a:focus,
+.wptd-gradient-text:hover,
+.primary-navigation li a:hover,
+.primary-navigation .current-menu-item>a:hover,
+.primary-navigation .current-menu-ancestor>a:hover {
+	background: linear-gradient(115deg, var(--global-child-color-blue-50) 0%, var(--global-child-color-pink-50) 100%) !important;
+ 	-webkit-text-fill-color: white;
+	text-decoration: unset;
+}
+
+.primary-navigation > div > .menu-wrapper > li > .sub-menu {
+	padding-top: 0;
+}
+
+.primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle {
+    margin-top: -1px;
+    margin-left: -40px;
+}
+
+.primary-navigation .sub-menu .menu-item > a {
+	padding: 18px 50px;
+}
+
+.primary-navigation .menu-wrapper .menu-item-has-children > a:hover + .sub-menu-toggle,
+.primary-navigation .menu-wrapper .menu-item-has-children > a:focus + .sub-menu-toggle {
+	color: white;
+}
+
+.primary-navigation .primary-menu-container > ul > .menu-item-has-children > a {
+	padding-right: 35px;
+}
+
+.primary-navigation .icon-plus:before, .primary-navigation .icon-minus:before {
+	content: "";
+}

scss/_style-header.scss

@@ -10,4 +10,4 @@
  License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 */
 
-@import url("../twentytwentyone/style.css");
+@import url("../twentytwentyone/style.css");

scss/_utilities.scss

@@ -0,0 +1,7 @@
+.mt-0 {
+	margin-top: 0;
+}
+
+.mb-0 {
+	margin-bottom: 0;
+}

scss/_variables.scss

@@ -1,11 +1,36 @@
 /* Variables */
+
 :root {
-
-  /* Colors */
-  --global-child-color-deep-blue: #2271B1;
-  --global-child-color-deep-red: #C9356E;
-
-  /* Buttons */
-  --child-button--border-radius: 5px;
-
-}
+	/* Font Family */
+	--font-headings: "Open Sans";
+	--font-base: "Open Sans";
+
+	/* Headings */
+	--heading--letter-spacing-h6: -0.02em;
+	--heading--letter-spacing-h5: -0.02em;
+	--heading--letter-spacing-h4: -0.02em;
+	--heading--letter-spacing-h3: -0.02em;
+	--heading--letter-spacing-h2: -0.04em;
+	--heading--letter-spacing-h1: -0.04em;
+
+	--heading--font-weight-strong: 800;
+
+	/* Colors */
+	--global--color-background: #F6F7F7;
+	--global-child-color-blue-50: #2271B1;
+	--global-child-color-pink-50: #C9356E;
+	--global-child-color-blue-60: #135E96;
+	--global-child-color-pink-60: #AB235A;
+
+	/* Buttons */
+	--child-button--border-radius: 5px;
+
+}
+
+@media only screen and (min-width: 652px) { // Not using the mixin because it's compiled after this file
+	:root {
+		--global--font-size-xl: 2.5rem; // 40px / 16px
+		--global--font-size-xxl: 4rem; // 96px / 16px
+		--global--font-size-xxxl: 6rem; // 144px / 16px
+	}
+}

scss/style.scss

@@ -3,4 +3,5 @@
 @import 'mixins';
 @import 'buttons';
 @import 'gradient-text';
-@import 'primary-site-navigation';
+@import 'primary-site-navigation';
+@import 'utilities';