@nobak/design-system 1.0.0

package/styles/main.css

@@ -0,0 +1,610 @@
+@import "tailwindcss";
+
+/* ============================================================================
+   TAILWIND V4 THEME CONFIGURATION
+   Migrated from tailwind.config.js to CSS-based configuration
+   ============================================================================ */
+
+@theme {
+  /* Font Families */
+  --font-sans: arboria, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-arboria: arboria, sans-serif;
+
+  /* Custom Colors - Using CSS Variables */
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-primary-1000: var(--color-primary-1000);
+  --color-primary-1100: var(--color-primary-1100);
+  --color-primary-1200: var(--color-primary-1200);
+  --color-primary-1300: var(--color-primary-1300);
+  --color-primary-1400: var(--color-primary-1400);
+  --color-primary-1500: var(--color-primary-1500);
+  --color-primary-1600: var(--color-primary-1600);
+  --color-primary-1700: var(--color-primary-1700);
+  --color-primary-1800: var(--color-primary-1800);
+  --color-primary-1900: var(--color-primary-1900);
+  --color-primary-2000: var(--color-primary-2000);
+  --color-primary-2100: var(--color-primary-2100);
+  --color-primary-2200: var(--color-primary-2200);
+  --color-primary-2300: var(--color-primary-2300);
+  --color-primary-2400: var(--color-primary-2400);
+  --color-primary-2500: var(--color-primary-2500);
+  --color-primary-2600: var(--color-primary-2600);
+  --color-primary-2700: var(--color-primary-2700);
+
+  --color-neutral-100: var(--color-neutral-100);
+  --color-neutral-200: var(--color-neutral-200);
+  --color-neutral-300: var(--color-neutral-300);
+  --color-neutral-400: var(--color-neutral-400);
+  --color-neutral-500: var(--color-neutral-500);
+  --color-neutral-600: var(--color-neutral-600);
+  --color-neutral-700: var(--color-neutral-700);
+  --color-neutral-800: var(--color-neutral-800);
+  --color-neutral-900: var(--color-neutral-900);
+  --color-neutral-1000: var(--color-neutral-1000);
+  --color-neutral-1100: var(--color-neutral-1100);
+  --color-neutral-1200: var(--color-neutral-1200);
+  --color-neutral-1300: var(--color-neutral-1300);
+  --color-neutral-1400: var(--color-neutral-1400);
+  --color-neutral-1500: var(--color-neutral-1500);
+  --color-neutral-1600: var(--color-neutral-1600);
+  --color-neutral-1700: var(--color-neutral-1700);
+  --color-neutral-1800: var(--color-neutral-1800);
+  --color-neutral-1900: var(--color-neutral-1900);
+  --color-neutral-2000: var(--color-neutral-2000);
+  --color-neutral-2100: var(--color-neutral-2100);
+  --color-neutral-2200: var(--color-neutral-2200);
+  --color-neutral-2300: var(--color-neutral-2300);
+  --color-neutral-2400: var(--color-neutral-2400);
+  --color-neutral-2500: var(--color-neutral-2500);
+  --color-neutral-2600: var(--color-neutral-2600);
+  --color-neutral-2700: var(--color-neutral-2700);
+
+  --color-background: var(--color-background);
+  --color-silver: var(--color-silver);
+
+  /* Background Colors */
+  --color-glass: rgba(234, 236, 242, 0.30);
+
+  /* Box Shadows */
+  --shadow-glass: 0px 20px 80px 0px rgba(0, 0, 0, 0.20), 4px 4px 26px 0px rgba(255, 255, 255, 0.12) inset, 0px 4px 2px 0px rgba(255, 255, 255, 0.12) inset, 0px -4px 2px 0px rgba(0, 0, 0, 0.20) inset;
+  --shadow-soft-bevel: 0px 1px 1px 0px rgba(255, 255, 255, 0.25) inset, 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
+  --shadow-hover: 2px 2px 4px 0px rgba(76, 0, 175, 0.25), 2px -2px 4px 0px rgba(201, 0, 59, 0.25), -2px -2px 4px 0px rgba(169, 115, 238, 0.25), -2px 2px 4px 0px rgba(166, 0, 49, 0.25);
+  --drop-shadow-short: 0 1px 1px rgba(0, 0, 0, 0.75);
+
+  /* Border Widths */
+  --border-width-05: 0.5px;
+
+  /* Border Radius */
+  --radius-48: 48px;
+
+  /* Font Sizes */
+  --font-size-button-tiny: 11.7px;
+  --font-size-button-small: 14px;
+  --font-size-button-medium: 16.8px;
+  --font-size-button-large: 20.2px;
+
+  /* Heights (Viewport) */
+  --height-golden: 61.8vh;
+  --height-v8: 8vh;
+  --height-v16: 16vh;
+  --height-v24: 24vh;
+  --height-v32: 32vh;
+  --height-v40: 40vh;
+  --height-v48: 48vh;
+  --height-v56: 56vh;
+  --height-v68: 68vh;
+  --height-v76: 76vh;
+  --height-v84: 84vh;
+  --height-v92: 92vh;
+  --height-safe: calc(100vh - env(safe-area-inset-bottom));
+
+  /* Animations */
+  --animate-marquee: marquee 60s linear infinite;
+  --animate-marquee-mirror: marquee-mirror 60s linear infinite;
+  --animate-show-hide: showHide 2s ease infinite;
+  --animate-endless-grid: endlessGrid 15s infinite linear;
+  --animate-endless: endless 10s infinite linear;
+}
+
+/* Keyframes for animations */
+@keyframes marquee {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-100%); }
+}
+
+@keyframes marquee-mirror {
+  0% { transform: translateX(100%); }
+  100% { transform: translateX(0%); }
+}
+
+@keyframes showHide {
+  0% { opacity: 0; }
+  5% { opacity: 1; }
+  95% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes endlessGrid {
+  0% { background-position: 0px -200px, 0px 0px; }
+  100% { background-position: 0px 0px, 0px 0px; }
+}
+
+@keyframes endless {
+  0% { transform: rotateX(45deg) translateY(-50%); }
+  100% { transform: rotateX(45deg) translateY(0); }
+}
+
+/* ============================================================================
+   CUSTOM UTILITIES - FRACTIONAL WIDTHS
+   Required for Layout component's dynamic column spans
+   ============================================================================ */
+
+.w-1\/12 { width: 8.333333%; }
+.w-2\/12 { width: 16.666667%; }
+.w-3\/12 { width: 25%; }
+.w-4\/12 { width: 33.333333%; }
+.w-5\/12 { width: 41.666667%; }
+.w-6\/12 { width: 50%; }
+.w-7\/12 { width: 58.333333%; }
+.w-8\/12 { width: 66.666667%; }
+.w-9\/12 { width: 75%; }
+.w-10\/12 { width: 83.333333%; }
+.w-11\/12 { width: 91.666667%; }
+
+/* ============================================================================
+   TYPEKIT FONTS
+   ============================================================================ */
+
+/*
+ * The Typekit service used to deliver this font or fonts for use on websites
+ * is provided by Adobe and is subject to these Terms of Use
+ * http://www.adobe.com/products/eulas/tou_typekit. For font license
+ * information, see the list below.
+ *
+ * arboria:
+ *   - http://typekit.com/eulas/00000000000000003b9b011a
+ *   - http://typekit.com/eulas/00000000000000003b9b011c
+ *   - http://typekit.com/eulas/00000000000000003b9b011d
+ *   - http://typekit.com/eulas/00000000000000003b9b011e
+ *   - http://typekit.com/eulas/00000000000000003b9b011f
+ *   - http://typekit.com/eulas/00000000000000003b9b0120
+ *   - http://typekit.com/eulas/00000000000000003b9b0121
+ *   - http://typekit.com/eulas/00000000000000003b9b0122
+ *   - http://typekit.com/eulas/00000000000000003b9b0123
+ *
+ * © 2009-2023 Adobe Systems Incorporated. All Rights Reserved.
+ */
+/*{"last_published":"2023-08-01 02:18:15 UTC"}*/
+
+@import url("https://p.typekit.net/p.css?s=1&k=vmt3skp&ht=tk&f=34860.34862.34863.34864.34865.34866.34867.34868.34869&a=46063616&app=typekit&e=css");
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/8ad5fe/00000000000000003b9b011a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/8ad5fe/00000000000000003b9b011a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/8ad5fe/00000000000000003b9b011a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
+font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
+}
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/2ed003/00000000000000003b9b011c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/2ed003/00000000000000003b9b011c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/2ed003/00000000000000003b9b011c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
+font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
+}
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/f350ae/00000000000000003b9b011d/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/f350ae/00000000000000003b9b011d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/f350ae/00000000000000003b9b011d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
+font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
+}
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/69ac60/00000000000000003b9b011e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/69ac60/00000000000000003b9b011e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/69ac60/00000000000000003b9b011e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
+font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
+}
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/f89c37/00000000000000003b9b011f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/f89c37/00000000000000003b9b011f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/f89c37/00000000000000003b9b011f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype");
+font-display:auto;font-style:italic;font-weight:500;font-stretch:normal;
+}
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/7c0289/00000000000000003b9b0120/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/7c0289/00000000000000003b9b0120/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/7c0289/00000000000000003b9b0120/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
+font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
+}
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/1f8fa9/00000000000000003b9b0121/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/1f8fa9/00000000000000003b9b0121/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/1f8fa9/00000000000000003b9b0121/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
+font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
+}
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/1ad443/00000000000000003b9b0122/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/1ad443/00000000000000003b9b0122/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/1ad443/00000000000000003b9b0122/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
+font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;
+}
+
+@font-face {
+font-family:"arboria";
+src:url("https://use.typekit.net/af/fce9bd/00000000000000003b9b0123/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/fce9bd/00000000000000003b9b0123/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/fce9bd/00000000000000003b9b0123/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype");
+font-display:auto;font-style:italic;font-weight:900;font-stretch:normal;
+}
+
+.tk-arboria { font-family: "arboria",sans-serif; }
+
+
+
+
+/* Custom Typography Classes */
+.text-display-bold {
+  font-size: 72.2px;
+  font-weight: 700;
+}
+.text-display-semi-bold {
+  font-size: 72.2px;
+  font-weight: 600;
+}
+.text-display-extra-bold {
+  font-size: 72.2px;
+  font-weight: 800;
+}
+
+.text-h1-bold {
+  font-size: 60.2px;
+  font-weight: 700;
+}
+.text-h1-semi-bold {
+  font-size: 60.2px;
+  font-weight: 600;
+}
+.text-h1-extra-bold {
+  font-size: 60.2px;
+  font-weight: 800;
+}
+
+.text-h2-bold {
+  font-size: 41.8px;
+  font-weight: 700;
+}
+.text-h2-semi-bold {
+  font-size: 41.8px;
+  font-weight: 600;
+}
+.text-h2-extra-bold {
+  font-size: 41.8px;
+  font-weight: 800;
+}
+
+.text-h3-bold {
+  font-size: 34.8px;
+  font-weight: 700;
+}
+.text-h3-semi-bold {
+  font-size: 34.8px;
+  font-weight: 600;
+}
+.text-h3-extra-bold {
+  font-size: 34.8px;
+  font-weight: 800;
+}
+
+.text-h4-bold {
+  font-size: 29px;
+  font-weight: 700;
+}
+.text-h4-semi-bold {
+  font-size: 29px;
+  font-weight: 600;
+}
+.text-h4-extra-bold {
+  font-size: 29px;
+  font-weight: 800;
+}
+
+.text-subheading-medium {
+  font-size: 24.2px;
+  font-weight: 500;
+}
+.text-subheading-bold {
+  font-size: 24.2px;
+  font-weight: 700;
+}
+.text-subheading-underlined {
+  font-size: 24.2px;
+  text-decoration: underline;
+}
+.text-subheading-light {
+  font-size: 24.2px;
+  font-weight: 300;
+}
+
+.text-p1-medium {
+  font-size: 20.2px;
+  font-weight: 500;
+}
+.text-p1-bold {
+  font-size: 20.2px;
+  font-weight: 700;
+}
+.text-p1-underlined {
+  font-size: 20.2px;
+  text-decoration: underline;
+}
+.text-p1-light {
+  font-size: 20.2px;
+  font-weight: 300;
+}
+
+.text-p2-medium {
+  font-size: 16.8px;
+  font-weight: 500;
+}
+.text-p2-bold {
+  font-size: 16.8px;
+  font-weight: 700;
+}
+.text-p2-underlined {
+  font-size: 16.8px;
+  text-decoration: underline;
+}
+.text-p2-light {
+  font-size: 16.8px;
+  font-weight: 300;
+}
+
+.text-p3-medium {
+  font-size: 14px;
+  font-weight: 500;
+}
+.text-p3-bold {
+  font-size: 14px;
+  font-weight: 700;
+}
+.text-p3-underlined {
+  font-size: 14px;
+  text-decoration: underline;
+}
+.text-p3-light {
+  font-size: 14px;
+  font-weight: 300;
+}
+
+.text-caption-medium {
+  font-size: 11.7px;
+  font-weight: 500;
+}
+.text-caption-bold {
+  font-size: 11.7px;
+  font-weight: 700;
+}
+.text-caption-underlined {
+  font-size: 11.7px;
+  text-decoration: underline;
+}
+.text-caption-light {
+  font-size: 11.7px;
+  font-weight: 300;
+}
+.text-caption-bold-underlined {
+  font-size: 11.7px;
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.text-footer-medium {
+  font-size: 9.7px;
+  font-weight: 500;
+}
+.text-footer-bold {
+  font-size: 9.7px;
+  font-weight: 700;
+}
+.text-footer-underlined {
+  font-size: 9.7px;
+  text-decoration: underline;
+}
+.text-footer-light {
+  font-size: 9.7px;
+  font-weight: 300;
+}
+.text-footer-bold-underlined {
+  font-size: 9.7px;
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "arboria";
+}
+
+@keyframes play-hero {
+	0% {
+		transform: rotateX(45deg) translateY(-50%);
+	}
+	100% {
+		transform: rotateX(45deg) translateY(0);
+	}
+}
+
+a[disabled] {
+  pointer-events: none;
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+.scrollbar-none {
+  scrollbar-width: none;
+}
+
+.bt-primary-default {
+  background-image: linear-gradient(90deg, #DADEF3 0%, #CBD4DC 99.7%)
+}
+
+.bt-secondary-default {
+  background-image: linear-gradient(270deg, #717E8B 0.49%, #626D79 98.93%);
+}
+
+.bt-neutral-default {
+  background-image: linear-gradient(270deg, #E0E3E6 0.3%, #DADEF3 100%)
+}
+
+.light {
+  --color-primary-100: #E6E6E7;
+  --color-primary-200: #E0E3E6;
+  --color-primary-300: #DADFE3;
+  --color-primary-400: #D3DAE1;
+  --color-primary-500: #CBD4DC;
+  --color-primary-600: #C6CFDA;
+  --color-primary-700: #BAC5D1;
+  --color-primary-800: #B1BDCA;
+  --color-primary-900: #A1AEBD;
+  --color-primary-1000: #93A0AF;
+  --color-primary-1100: #8390A0;
+  --color-primary-1200: #717E8B;
+  --color-primary-1300: #626D79;
+  --color-primary-1400: #505A64;
+  --color-primary-1500: #424A52;
+  --color-primary-1600: #343B41;
+  --color-primary-1700: #2A2F35;
+  --color-primary-1800: #212428;
+  --color-primary-1900: #1A1D1F;
+  --color-primary-2000: #121416;
+  --color-primary-2100: #101012;
+  --color-primary-2200: #0C0C0D;
+  --color-primary-2300: #0A0A0B;
+  --color-primary-2400: #080909;
+  --color-primary-2500: #080809;
+  --color-primary-2600: #070707;
+  --color-primary-2700: #060607;
+
+  --color-neutral-100: #E6E6E7;
+  --color-neutral-200: #E0E3E6;
+  --color-neutral-300: #DADFE3;
+  --color-neutral-400: #D3DAE1;
+  --color-neutral-500: #CBD4DC;
+  --color-neutral-600: #C6CFDA;
+  --color-neutral-700: #BAC5D1;
+  --color-neutral-800: #B1BDCA;
+  --color-neutral-900: #A1AEBD;
+  --color-neutral-1000: #93A0AF;
+  --color-neutral-1100: #8390A0;
+  --color-neutral-1200: #717E8B;
+  --color-neutral-1300: #626D79;
+  --color-neutral-1400: #505A64;
+  --color-neutral-1500: #424A52;
+  --color-neutral-1600: #343B41;
+  --color-neutral-1700: #2A2F35;
+  --color-neutral-1800: #212428;
+  --color-neutral-1900: #1A1D1F;
+  --color-neutral-2000: #121416;
+  --color-neutral-2100: #101012;
+  --color-neutral-2200: #0C0C0D;
+  --color-neutral-2300: #0A0A0B;
+  --color-neutral-2400: #080909;
+  --color-neutral-2500: #080809;
+  --color-neutral-2600: #070707;
+  --color-neutral-2700: #060607;
+}
+
+
+.midnight {
+  --color-primary-100: #E6E6E7;
+  --color-primary-200: #E0E3E6;
+  --color-primary-300: #DADFE3;
+  --color-primary-400: #D3DAE1;
+  --color-primary-500: #CBD4DC;
+  --color-primary-600: #C6CFDA;
+  --color-primary-700: #BAC5D1;
+  --color-primary-800: #B1BDCA;
+  --color-primary-900: #A1AEBD;
+  --color-primary-1000: #93A0AF;
+  --color-primary-1100: #8390A0;
+  --color-primary-1200: #717E8B;
+  --color-primary-1300: #626D79;
+  --color-primary-1400: #505A64;
+  --color-primary-1500: #424A52;
+  --color-primary-1600: #343B41;
+  --color-primary-1700: #2A2F35;
+  --color-primary-1800: #212428;
+  --color-primary-1900: #1A1D1F;
+  --color-primary-2000: #121416;
+  --color-primary-2100: #101012;
+  --color-primary-2200: #0C0C0D;
+  --color-primary-2300: #0A0A0B;
+  --color-primary-2400: #080909;
+  --color-primary-2500: #080809;
+  --color-primary-2600: #070707;
+  --color-primary-2700: #060607;
+
+  --color-neutral-100: #E6E6E7;
+  --color-neutral-200: #E0E3E6;
+  --color-neutral-300: #DADEF3;
+  --color-neutral-400: #D3DAE1;
+  --color-neutral-500: #CBD4DC;
+  --color-neutral-600: #C2CCD5;
+  --color-neutral-700: #BAC5D1;
+  --color-neutral-800: #ADBBC8;
+  --color-neutral-900: #A1AEBD;
+  --color-neutral-1000: #93A0AF;
+  --color-neutral-1100: #8390A0;
+  --color-neutral-1200: #717E8B;
+  --color-neutral-1300: #626D79;
+  --color-neutral-1400: #505A64;
+  --color-neutral-1500: #424A52;
+  --color-neutral-1600: #343B41;
+  --color-neutral-1700: #2A2F35;
+  --color-neutral-1800: #212428;
+  --color-neutral-1900: #1A1D1F;
+  --color-neutral-2000: #121416;
+  --color-neutral-2100: #101012;
+  --color-neutral-2200: #0C0C0D;
+  --color-neutral-2300: #0A0A0B;
+  --color-neutral-2400: #080909;
+  --color-neutral-2500: #080809;
+  --color-neutral-2600: #070707;
+  --color-neutral-2700: #070707;
+}
+
+.rising-sun-container {
+  position: relative;
+}
+
+
+.hero-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 80%; /* Adjust width as needed */
+  max-width: 600px; /* Optional: for better control on larger screens */
+  margin: 0 auto;
+  padding: 20px;
+  box-sizing: border-box;
+  z-index: 1000; /* Ensure it's above other elements */
+}
+
+.rising-sun-canvas {
+  display: block;
+  background-color: '#080909'
+}

package/tailwind.config.js

@@ -0,0 +1,64 @@
+// Tailwind CSS v4 Configuration
+// Minimal config for content detection and safelist
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Dark mode configuration
+  darkMode: 'class',
+
+  // Content paths for class detection
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './lib/**/*.{js,jsx,ts,tsx}',
+    './.storybook/**/*.{js,jsx,ts,tsx,mdx}',
+  ],
+
+  // Safelist classes that are dynamically generated or required
+  safelist: [
+    // Layout component fractional widths
+    'w-1/12', 'w-2/12', 'w-3/12', 'w-4/12', 'w-5/12', 'w-6/12',
+    'w-7/12', 'w-8/12', 'w-9/12', 'w-10/12', 'w-11/12', 'w-full',
+
+    // Flex utilities
+    'flex', 'flex-row', 'flex-col', 'flex-wrap', 'flex-nowrap',
+
+    // Alignment utilities
+    'items-start', 'items-center', 'items-end', 'items-stretch',
+    'justify-start', 'justify-center', 'justify-end',
+    'justify-between', 'justify-around', 'justify-evenly',
+
+    // Common utilities used across components
+    'w-auto', 'mx-auto', 'w-full',
+    'max-w-sm', 'max-w-screen-sm', 'max-w-screen-md',
+    'max-w-screen-lg', 'max-w-screen-xl', 'max-w-screen-2xl',
+    'sm:max-w-sm', 'sm:max-w-screen-sm', 'sm:max-w-screen-lg', 'sm:max-w-screen-2xl',
+
+    // Padding and margin
+    'p-0', 'p-4', 'p-6', 'p-8',
+
+    // Grid classes
+    'grid', 'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4',
+    'grid-cols-5', 'grid-cols-6', 'grid-cols-7', 'grid-cols-8',
+    'grid-cols-9', 'grid-cols-10', 'grid-cols-11', 'grid-cols-12',
+    'gap-4', 'gap-8',
+
+    // Typography classes (custom)
+    'text-display-bold', 'text-display-semi-bold', 'text-display-extra-bold',
+    'text-h1-bold', 'text-h1-semi-bold', 'text-h1-extra-bold',
+    'text-h2-bold', 'text-h2-semi-bold', 'text-h2-extra-bold',
+    'text-h3-bold', 'text-h3-semi-bold', 'text-h3-extra-bold',
+    'text-h4-bold', 'text-h4-semi-bold', 'text-h4-extra-bold',
+    'text-subheading-medium', 'text-subheading-bold', 'text-subheading-underlined',
+    'text-p1-medium', 'text-p1-bold', 'text-p2-medium', 'text-p2-bold',
+    'text-p3-medium', 'text-p3-bold', 'text-caption-medium', 'text-caption-bold',
+    'text-footer-medium', 'text-footer-bold',
+
+    // Border utilities
+    'border', 'border-b', 'border-none', 'border-solid',
+    'rounded', 'rounded-lg',
+
+    // Height utilities
+    'h-auto', 'h-screen', 'h-full', 'h-64',
+    'h-golden', 'h-v56',
+  ],
+};