diff --git a/.gitignore b/.gitignore index 77a37edf4..912ee974f 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,8 @@ aof* dist **/.haptic +static +pkg/webapp/dist # Test binary *.test diff --git a/Makefile b/Makefile index e678ef498..37d9ab10d 100644 --- a/Makefile +++ b/Makefile @@ -262,6 +262,9 @@ ictest-tokenfactory: ### testnet ### ############################################################################### +setup-ipfs: + ./scripts/ipfs_config.sh + setup-testnet: mod-tidy is-localic-installed install local-image set-testnet-configs setup-testnet-keys # Run this before testnet keys are added @@ -291,25 +294,19 @@ sh-testnet: mod-tidy ############################################################################### ### generation ### ############################################################################### -.PHONY: buf-deploy pkl-gen tailwind-gen templ-gen - -buf-deploy: - cd ./proto && bunx buf dep update && bunx buf build && bunx buf push - -pkl-deploy: - sh ./scripts/upload_pkl.sh +.PHONY: pkl-gen styles-gen templ-gen pkl-gen: + go install github.com/apple/pkl-go/cmd/pkl-gen-go@latest pkl-gen-go pkl/base.types/Ctx.pkl pkl-gen-go pkl/base.types/DWN.pkl pkl-gen-go pkl/base.types/ORM.pkl -tailwind-gen: - cd ./pkg/webapp && bun install && bun run build - cp ./pkg/webapp/components/styles/styles.css ./cmd/hway/styles.css - rm -rf ./pkg/webapp/node_modules +styles-gen: + sh ./scripts/tailwindgen.sh templ-gen: + @go install github.com/a-h/templ/cmd/templ@latest templ generate @@ -318,15 +315,23 @@ templ-gen: ############################################################################### .PHONY: motr-build hway-build hway-serve -buf-deploy: +motr-build: + GOOS=js GOARCH=wasm go build -o static/wasm/app.wasm ./cmd/motr/main.go + +hway-build: styles-gen templ-gen + go build -o build/hway ./cmd/hway/main.go + + +############################################################################### +### help ### +############################################################################### +.PHONY: deploy-buf deploy-cdn + +deploy-buf: cd ./proto && bunx buf dep update && bunx buf build && bunx buf push - -motr-build: - GOOS=js GOARCH=wasm go build -o build/app.wasm ./cmd/motr/main.go - -hway-build: tailwind-gen templ-gen - go build -o build/hway ./cmd/hway/main.go +deploy-cdn: + sh ./scripts/upload_cdn.sh ############################################################################### diff --git a/deploy/local/devbox.json b/deploy/local/devbox.json index 7161a4296..00e5ad434 100644 --- a/deploy/local/devbox.json +++ b/deploy/local/devbox.json @@ -26,9 +26,9 @@ "init_hook": ["export ROOT=$(git rev-parse --show-toplevel)"], "scripts": { "devnet": ["cd $ROOT", "make sh-testnet"], - "ipfs": ["ipfs daemon"], + "ipfs": ["cd $ROOT", "make setup-ipfs", "ipfs daemon"], "air": ["cd $ROOT", "air"], - "gex": ["gex"] + "gex": ["go install github.com/cosmos/gex@latest", "gex"] } } } diff --git a/devbox.json b/devbox.json index fcc628a9c..e5649f070 100644 --- a/devbox.json +++ b/devbox.json @@ -1,32 +1,23 @@ { "$schema": "https://raw.githubusercontent.com/jetify-com/devbox/0.12.0/.schema/devbox.schema.json", - "packages": [ - "go@1.22", - "bun@latest", - "ipfs@latest", - "templ@latest", - "gum@latest" - ], + "packages": ["go@1.22", "bun@latest", "gum@latest"], "env": { "GOPATH": "$HOME/go", "PATH": "./build:$HOME/go/bin:$PATH", "TEMPL_EXPERIMENT": "rawgo" }, "shell": { - "init_hook": [ - "./scripts/init_env.sh" - ], "scripts": { - "start-local": [ - "cd deploy/local && devbox services up" + "deploy-buf": ["gum spin --title='Deploying buf' -- make deploy-buf"], + "deploy-cdn": [ + "gum spin --title='Generating PKL' -- make pkl-gen", + "gum spin --title='Generating Styles' -- make styles-gen", + "gum spin --title='Building Motr WASM' -- make motr-build", + "gum spin --title='Uploading to Bucket' -- make deploy-cdn" ], - "start-testnet": [ - "cd deploy/testnet && devbox services up" - ], - "start-gex": [ - "go install github.com/cosmos/gex@latest", - "gex" - ] + "start-local": ["cd deploy/local && devbox services up"], + "start-testnet": ["cd deploy/testnet && devbox services up"], + "start-gex": ["go install github.com/cosmos/gex@latest", "gex"] } } } diff --git a/devbox.lock b/devbox.lock index d498be17a..86b5293ce 100644 --- a/devbox.lock +++ b/devbox.lock @@ -97,6 +97,54 @@ } } }, + "gum@latest": { + "last_modified": "2024-11-16T04:25:12Z", + "resolved": "github:NixOS/nixpkgs/34a626458d686f1b58139620a8b2793e9e123bba#gum", + "source": "devbox-search", + "version": "0.14.5", + "systems": { + "aarch64-darwin": { + "outputs": [ + { + "name": "out", + "path": "/nix/store/rzqm62ixipbzbhfagqlic5xxag9a2v82-gum-0.14.5", + "default": true + } + ], + "store_path": "/nix/store/rzqm62ixipbzbhfagqlic5xxag9a2v82-gum-0.14.5" + }, + "aarch64-linux": { + "outputs": [ + { + "name": "out", + "path": "/nix/store/3ick2j8z9jgkk3cyc1ik4zkbs3m4583n-gum-0.14.5", + "default": true + } + ], + "store_path": "/nix/store/3ick2j8z9jgkk3cyc1ik4zkbs3m4583n-gum-0.14.5" + }, + "x86_64-darwin": { + "outputs": [ + { + "name": "out", + "path": "/nix/store/9rh8qxbxgb07v3a62mx9404ynk2yhxrj-gum-0.14.5", + "default": true + } + ], + "store_path": "/nix/store/9rh8qxbxgb07v3a62mx9404ynk2yhxrj-gum-0.14.5" + }, + "x86_64-linux": { + "outputs": [ + { + "name": "out", + "path": "/nix/store/1bnivwijzrnzx5h0hd5rywwy8rlhxmw5-gum-0.14.5", + "default": true + } + ], + "store_path": "/nix/store/1bnivwijzrnzx5h0hd5rywwy8rlhxmw5-gum-0.14.5" + } + } + }, "ipfs@latest": { "last_modified": "2023-02-24T09:01:09Z", "resolved": "github:NixOS/nixpkgs/7d0ed7f2e5aea07ab22ccb338d27fbe347ed2f11#ipfs", diff --git a/pkg/webapp/components/styles/styles.css b/pkg/webapp/components/styles/styles.css deleted file mode 100644 index 2e3888049..000000000 --- a/pkg/webapp/components/styles/styles.css +++ /dev/null @@ -1,3503 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Inter+Tight:ital,wght@0,500;0,600;0,700;1,700&display=fallback"); - -/* src/css/styles.css */ - -*, ::before, ::after{ - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; - --motion-origin-scale-x: 1; - --motion-origin-scale-y: 1; - --motion-origin-translate-x: 0; - --motion-origin-translate-y: 0; - --motion-origin-rotate: 0; - --motion-origin-blur: 0; - --motion-origin-grayscale: 0; - --motion-origin-opacity: 1; - --motion-origin-background-color: ; - --motion-origin-text-color: ; - --motion-end-scale-x: 1; - --motion-end-scale-y: 1; - --motion-end-translate-x: 0; - --motion-end-translate-y: 0; - --motion-end-rotate: 0; - --motion-end-blur: 0; - --motion-end-grayscale: 0; - --motion-end-opacity: 1; - --motion-end-background-color: ; - --motion-end-text-color: ; - --motion-duration: 750ms; - --motion-timing: var(--motion-default-timing); - --motion-perceptual-duration-multiplier: 1; - --motion-delay: 0ms; - --motion-scale-duration: var(--motion-duration); - --motion-scale-timing: var(--motion-timing); - --motion-scale-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-scale-delay: var(--motion-delay); - --motion-translate-duration: var(--motion-duration); - --motion-translate-timing: var(--motion-timing); - --motion-translate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-translate-delay: var(--motion-delay); - --motion-rotate-duration: var(--motion-duration); - --motion-rotate-timing: var(--motion-timing); - --motion-rotate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-rotate-delay: var(--motion-delay); - --motion-filter-duration: var(--motion-duration); - --motion-filter-timing: var(--motion-timing); - --motion-filter-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-filter-delay: var(--motion-delay); - --motion-opacity-duration: var(--motion-duration); - --motion-opacity-timing: var(--motion-timing); - --motion-opacity-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-opacity-delay: var(--motion-delay); - --motion-background-color-duration: var(--motion-duration); - --motion-background-color-timing: var(--motion-timing); - --motion-background-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-background-color-delay: var(--motion-delay); - --motion-text-color-duration: var(--motion-duration); - --motion-text-color-timing: var(--motion-timing); - --motion-text-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-text-color-delay: var(--motion-delay); - --motion-scale-in-animation: none; - --motion-translate-in-animation: none; - --motion-rotate-in-animation: none; - --motion-filter-in-animation: none; - --motion-opacity-in-animation: none; - --motion-background-color-in-animation: none; - --motion-text-color-in-animation: none; - --motion-scale-out-animation: none; - --motion-translate-out-animation: none; - --motion-rotate-out-animation: none; - --motion-filter-out-animation: none; - --motion-opacity-out-animation: none; - --motion-background-color-out-animation: none; - --motion-text-color-out-animation: none; - --motion-all-enter-animations: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation); - --motion-all-exit-animations: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation); -} - -::backdrop{ - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; - --motion-origin-scale-x: 1; - --motion-origin-scale-y: 1; - --motion-origin-translate-x: 0; - --motion-origin-translate-y: 0; - --motion-origin-rotate: 0; - --motion-origin-blur: 0; - --motion-origin-grayscale: 0; - --motion-origin-opacity: 1; - --motion-origin-background-color: ; - --motion-origin-text-color: ; - --motion-end-scale-x: 1; - --motion-end-scale-y: 1; - --motion-end-translate-x: 0; - --motion-end-translate-y: 0; - --motion-end-rotate: 0; - --motion-end-blur: 0; - --motion-end-grayscale: 0; - --motion-end-opacity: 1; - --motion-end-background-color: ; - --motion-end-text-color: ; - --motion-duration: 750ms; - --motion-timing: var(--motion-default-timing); - --motion-perceptual-duration-multiplier: 1; - --motion-delay: 0ms; - --motion-scale-duration: var(--motion-duration); - --motion-scale-timing: var(--motion-timing); - --motion-scale-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-scale-delay: var(--motion-delay); - --motion-translate-duration: var(--motion-duration); - --motion-translate-timing: var(--motion-timing); - --motion-translate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-translate-delay: var(--motion-delay); - --motion-rotate-duration: var(--motion-duration); - --motion-rotate-timing: var(--motion-timing); - --motion-rotate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-rotate-delay: var(--motion-delay); - --motion-filter-duration: var(--motion-duration); - --motion-filter-timing: var(--motion-timing); - --motion-filter-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-filter-delay: var(--motion-delay); - --motion-opacity-duration: var(--motion-duration); - --motion-opacity-timing: var(--motion-timing); - --motion-opacity-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-opacity-delay: var(--motion-delay); - --motion-background-color-duration: var(--motion-duration); - --motion-background-color-timing: var(--motion-timing); - --motion-background-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-background-color-delay: var(--motion-delay); - --motion-text-color-duration: var(--motion-duration); - --motion-text-color-timing: var(--motion-timing); - --motion-text-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier); - --motion-text-color-delay: var(--motion-delay); - --motion-scale-in-animation: none; - --motion-translate-in-animation: none; - --motion-rotate-in-animation: none; - --motion-filter-in-animation: none; - --motion-opacity-in-animation: none; - --motion-background-color-in-animation: none; - --motion-text-color-in-animation: none; - --motion-scale-out-animation: none; - --motion-translate-out-animation: none; - --motion-rotate-out-animation: none; - --motion-filter-out-animation: none; - --motion-opacity-out-animation: none; - --motion-background-color-out-animation: none; - --motion-text-color-out-animation: none; - --motion-all-enter-animations: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation); - --motion-all-exit-animations: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation); -} - -/* ! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com */ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -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; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-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. -*/ - -::-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 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden]:where(:not([hidden="until-found"])) { - display: none; -} - -[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - border-radius: 0px; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-shadow: 0 0 #0000; -} - -[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{ - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - border-color: #2563eb; -} - -input::-moz-placeholder, textarea::-moz-placeholder{ - color: #6b7280; - opacity: 1; -} - -input::placeholder,textarea::placeholder{ - color: #6b7280; - opacity: 1; -} - -::-webkit-datetime-edit-fields-wrapper{ - padding: 0; -} - -::-webkit-date-and-time-value{ - min-height: 1.5em; - text-align: inherit; -} - -::-webkit-datetime-edit{ - display: inline-flex; -} - -::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{ - padding-top: 0; - padding-bottom: 0; -} - -select{ - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - padding-right: 2.5rem; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; -} - -[multiple],[size]:where(select:not([size="1"])){ - background-image: initial; - background-position: initial; - background-repeat: unset; - background-size: initial; - padding-right: 0.75rem; - -webkit-print-color-adjust: unset; - print-color-adjust: unset; -} - -[type='checkbox'],[type='radio']{ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - padding: 0; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - display: inline-block; - vertical-align: middle; - background-origin: border-box; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - flex-shrink: 0; - height: 1rem; - width: 1rem; - color: #2563eb; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - --tw-shadow: 0 0 #0000; -} - -[type='checkbox']{ - border-radius: 0px; -} - -[type='radio']{ - border-radius: 100%; -} - -[type='checkbox']:focus,[type='radio']:focus{ - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 2px; - --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); -} - -[type='checkbox']:checked,[type='radio']:checked{ - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} - -[type='checkbox']:checked{ - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); -} - -@media (forced-colors: active) { - [type='checkbox']:checked{ - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; - } -} - -[type='radio']:checked{ - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); -} - -@media (forced-colors: active) { - [type='radio']:checked{ - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; - } -} - -[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{ - border-color: transparent; - background-color: currentColor; -} - -[type='checkbox']:indeterminate{ - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} - -@media (forced-colors: active) { - [type='checkbox']:indeterminate{ - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; - } -} - -[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{ - border-color: transparent; - background-color: currentColor; -} - -[type='file']{ - background: unset; - border-color: inherit; - border-width: 0; - border-radius: 0; - padding: 0; - font-size: unset; - line-height: inherit; -} - -[type='file']:focus{ - outline: 1px solid ButtonText; - outline: 1px auto -webkit-focus-ring-color; -} - -:root{ - --motion-default-timing: cubic-bezier(.165, .84, .44, 1); - --motion-bounce: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1); - --motion-spring-smooth: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%); - --motion-spring-snappy: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%); - --motion-spring-bouncy: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%); - --motion-spring-bouncier: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%); - --motion-spring-bounciest: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%); -} - -.container{ - width: 100%; -} - -@media (min-width: 640px){ - .container{ - max-width: 640px; - } -} - -@media (min-width: 768px){ - .container{ - max-width: 768px; - } -} - -@media (min-width: 1024px){ - .container{ - max-width: 1024px; - } -} - -@media (min-width: 1280px){ - .container{ - max-width: 1280px; - } -} - -@media (min-width: 1536px){ - .container{ - max-width: 1536px; - } -} - -.motion-preset-slide-up{ - --motion-origin-translate-y: 25%; - --motion-origin-opacity: 0; - --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both; - --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both; - animation: var(--motion-all-enter-animations); -} - -@keyframes RomboConfettiPop{ - 0%{ - opacity: 0; - transform: scale(1); - } - - 33%{ - opacity: 1; - transform: scale(1.15); - } - - 50%{ - transform: scale(0.975); - } - - 65%{ - transform: scale(1.025); - } - - 80%{ - transform: scale(0.99); - } - - 87%{ - transform: scale(1.01); - } - - 100%{ - opacity: 1; - transform: scale(1); - } -} - -@keyframes topfetti{ - 0%{ - background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; - } - - 50%{ - background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; - } - - 100%{ - background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; - background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; - } -} - -@keyframes bottomfetti{ - 0%{ - background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,70% -10%, 70% 0%; - } - - 50%{ - background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; - } - - 100%{ - background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; - background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; - } -} - -.fixed{ - position: fixed; -} - -.absolute{ - position: absolute; -} - -.relative{ - position: relative; -} - -.inset-0{ - inset: 0px; -} - -.bottom-0{ - bottom: 0px; -} - -.left-0{ - left: 0px; -} - -.left-1\/2{ - left: 50%; -} - -.right-0{ - right: 0px; -} - -.top-0{ - top: 0px; -} - -.top-2{ - top: 0.5rem; -} - -.-z-10{ - z-index: -10; -} - -.z-10{ - z-index: 10; -} - -.z-20{ - z-index: 20; -} - -.z-30{ - z-index: 30; -} - -.z-40{ - z-index: 40; -} - -.z-50{ - z-index: 50; -} - -.z-\[99\]{ - z-index: 99; -} - -.order-first{ - order: -9999; -} - -.-m-2{ - margin: -0.5rem; -} - -.m-2{ - margin: 0.5rem; -} - -.mx-auto{ - margin-left: auto; - margin-right: auto; -} - -.mb-1{ - margin-bottom: 0.25rem; -} - -.mb-2{ - margin-bottom: 0.5rem; -} - -.mb-3{ - margin-bottom: 0.75rem; -} - -.mb-4{ - margin-bottom: 1rem; -} - -.mb-6{ - margin-bottom: 1.5rem; -} - -.mb-8{ - margin-bottom: 2rem; -} - -.ml-1{ - margin-left: 0.25rem; -} - -.ml-2{ - margin-left: 0.5rem; -} - -.ml-3{ - margin-left: 0.75rem; -} - -.mr-1{ - margin-right: 0.25rem; -} - -.mr-2{ - margin-right: 0.5rem; -} - -.mr-3{ - margin-right: 0.75rem; -} - -.mr-4{ - margin-right: 1rem; -} - -.mr-5{ - margin-right: 1.25rem; -} - -.mr-7{ - margin-right: 1.75rem; -} - -.mt-1{ - margin-top: 0.25rem; -} - -.mt-12{ - margin-top: 3rem; -} - -.mt-2{ - margin-top: 0.5rem; -} - -.mt-24{ - margin-top: 6rem; -} - -.mt-4{ - margin-top: 1rem; -} - -.mt-5{ - margin-top: 1.25rem; -} - -.mt-6{ - margin-top: 1.5rem; -} - -.box-content{ - box-sizing: content-box; -} - -.block{ - display: block; -} - -.flex{ - display: flex; -} - -.inline-flex{ - display: inline-flex; -} - -.grid{ - display: grid; -} - -.hidden{ - display: none; -} - -.h-0\.5{ - height: 0.125rem; -} - -.h-10{ - height: 2.5rem; -} - -.h-14{ - height: 3.5rem; -} - -.h-20{ - height: 5rem; -} - -.h-3{ - height: 0.75rem; -} - -.h-32{ - height: 8rem; -} - -.h-4{ - height: 1rem; -} - -.h-5{ - height: 1.25rem; -} - -.h-8{ - height: 2rem; -} - -.h-9{ - height: 2.25rem; -} - -.h-\[280px\]{ - height: 280px; -} - -.h-auto{ - height: auto; -} - -.h-full{ - height: 100%; -} - -.h-screen{ - height: 100vh; -} - -.min-h-screen{ - min-height: 100vh; -} - -.w-0{ - width: 0px; -} - -.w-1\/3{ - width: 33.333333%; -} - -.w-14{ - width: 3.5rem; -} - -.w-16{ - width: 4rem; -} - -.w-20{ - width: 5rem; -} - -.w-3{ - width: 0.75rem; -} - -.w-4{ - width: 1rem; -} - -.w-5{ - width: 1.25rem; -} - -.w-8{ - width: 2rem; -} - -.w-\[22rem\]{ - width: 22rem; -} - -.w-\[365px\]{ - width: 365px; -} - -.w-\[calc\(100\%\+1rem\)\]{ - width: calc(100% + 1rem); -} - -.w-\[full\]{ - width: full; -} - -.w-auto{ - width: auto; -} - -.w-fit{ - width: -moz-fit-content; - width: fit-content; -} - -.w-full{ - width: 100%; -} - -.w-screen{ - width: 100vw; -} - -.max-w-2xl{ - max-width: 42rem; -} - -.max-w-3xl{ - max-width: 48rem; -} - -.max-w-4xl{ - max-width: 56rem; -} - -.max-w-5xl{ - max-width: 64rem; -} - -.max-w-6xl{ - max-width: 72rem; -} - -.max-w-\[94rem\]{ - max-width: 94rem; -} - -.max-w-lg{ - max-width: 32rem; -} - -.max-w-md{ - max-width: 28rem; -} - -.max-w-screen-sm{ - max-width: 640px; -} - -.max-w-sm{ - max-width: 24rem; -} - -.max-w-xl{ - max-width: 36rem; -} - -.max-w-xs{ - max-width: 20rem; -} - -.flex-shrink-0{ - flex-shrink: 0; -} - -.shrink-0{ - flex-shrink: 0; -} - -.grow{ - flex-grow: 1; -} - -.-translate-x-0{ - --tw-translate-x: -0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-x-1\/2{ - --tw-translate-x: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-x-4{ - --tw-translate-x: -1rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-x-7{ - --tw-translate-x: -1.75rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-x-8{ - --tw-translate-x: -2rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-x-px{ - --tw-translate-x: -1px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-y-4{ - --tw-translate-y: -1rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-y-px{ - --tw-translate-y: -1px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-x-0{ - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-x-8{ - --tw-translate-x: 2rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-0{ - --tw-translate-y: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-1\/3{ - --tw-translate-y: 33.333333%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-24{ - --tw-translate-y: 6rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-3{ - --tw-translate-y: 0.75rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-4{ - --tw-translate-y: 1rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.rotate-1{ - --tw-rotate: 1deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.scale-100{ - --tw-scale-x: 1; - --tw-scale-y: 1; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.scale-90{ - --tw-scale-x: .9; - --tw-scale-y: .9; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.transform{ - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -@keyframes infinite-scroll{ - from{ - transform: translateX(0); - } - - to{ - transform: translateX(-100%); - } -} - -.animate-infinite-scroll{ - animation: infinite-scroll 60s linear infinite; -} - -@keyframes infinite-scroll-inverse{ - from{ - transform: translateX(-100%); - } - - to{ - transform: translateX(0); - } -} - -.animate-infinite-scroll-inverse{ - animation: infinite-scroll-inverse 60s linear infinite; -} - -.cursor-default{ - cursor: default; -} - -.cursor-pointer{ - cursor: pointer; -} - -.grid-cols-2{ - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.flex-row{ - flex-direction: row; -} - -.flex-col{ - flex-direction: column; -} - -.flex-col-reverse{ - flex-direction: column-reverse; -} - -.flex-wrap{ - flex-wrap: wrap; -} - -.flex-nowrap{ - flex-wrap: nowrap; -} - -.items-start{ - align-items: flex-start; -} - -.items-end{ - align-items: flex-end; -} - -.items-center{ - align-items: center; -} - -.justify-end{ - justify-content: flex-end; -} - -.justify-center{ - justify-content: center; -} - -.justify-between{ - justify-content: space-between; -} - -.gap-12{ - gap: 3rem; -} - -.gap-2{ - gap: 0.5rem; -} - -.gap-3{ - gap: 0.75rem; -} - -.gap-4{ - gap: 1rem; -} - -.gap-8{ - gap: 2rem; -} - -.gap-x-3{ - -moz-column-gap: 0.75rem; - column-gap: 0.75rem; -} - -.gap-y-3{ - row-gap: 0.75rem; -} - -.space-x-1 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(0.25rem * var(--tw-space-x-reverse)); - margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-x-3 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-x-4 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-y-1 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} - -.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); -} - -.space-y-12 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(3rem * var(--tw-space-y-reverse)); -} - -.space-y-2 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - -.space-y-4 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.space-y-6 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); -} - -.overflow-hidden{ - overflow: hidden; -} - -.rounded{ - border-radius: 0.25rem; -} - -.rounded-full{ - border-radius: 9999px; -} - -.rounded-lg{ - border-radius: 0.5rem; -} - -.rounded-md{ - border-radius: 0.375rem; -} - -.rounded-xl{ - border-radius: 0.75rem; -} - -.rounded-t-lg{ - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.border{ - border-width: 1px; -} - -.border-2{ - border-width: 2px; -} - -.border-\[2px\]{ - border-width: 2px; -} - -.border-t{ - border-top-width: 1px; -} - -.border-neutral-200\/60{ - border-color: rgb(229 229 229 / 0.6); -} - -.border-neutral-200\/70{ - border-color: rgb(229 229 229 / 0.7); -} - -.border-neutral-300{ - --tw-border-opacity: 1; - border-color: rgb(212 212 212 / var(--tw-border-opacity, 1)); -} - -.border-transparent{ - border-color: transparent; -} - -.border-white{ - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); -} - -.border-zinc-200{ - --tw-border-opacity: 1; - border-color: rgb(228 228 231 / var(--tw-border-opacity, 1)); -} - -.border-zinc-300{ - --tw-border-opacity: 1; - border-color: rgb(212 212 216 / var(--tw-border-opacity, 1)); -} - -.border-zinc-600{ - --tw-border-opacity: 1; - border-color: rgb(82 82 91 / var(--tw-border-opacity, 1)); -} - -.bg-blue-600{ - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); -} - -.bg-neutral-50{ - --tw-bg-opacity: 1; - background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1)); -} - -.bg-neutral-900{ - --tw-bg-opacity: 1; - background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1)); -} - -.bg-neutral-950{ - --tw-bg-opacity: 1; - background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1)); -} - -.bg-transparent{ - background-color: transparent; -} - -.bg-white{ - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); -} - -.bg-zinc-100{ - --tw-bg-opacity: 1; - background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1)); -} - -.bg-zinc-50{ - --tw-bg-opacity: 1; - background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1)); -} - -.bg-zinc-800{ - --tw-bg-opacity: 1; - background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1)); -} - -.bg-zinc-900{ - --tw-bg-opacity: 1; - background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1)); -} - -.bg-opacity-90{ - --tw-bg-opacity: 0.9; -} - -.bg-gradient-to-r{ - background-image: linear-gradient(to right, var(--tw-gradient-stops)); -} - -.bg-gradient-to-t{ - background-image: linear-gradient(to top, var(--tw-gradient-stops)); -} - -.from-black{ - --tw-gradient-from: #000 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-zinc-100{ - --tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-zinc-500{ - --tw-gradient-from: #71717a var(--tw-gradient-from-position); - --tw-gradient-to: rgb(113 113 122 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.via-zinc-900{ - --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to); -} - -.to-white{ - --tw-gradient-to: #fff var(--tw-gradient-to-position); -} - -.to-zinc-900{ - --tw-gradient-to: #18181b var(--tw-gradient-to-position); -} - -.bg-cover{ - background-size: cover; -} - -.bg-clip-text{ - -webkit-background-clip: text; - background-clip: text; -} - -.fill-current{ - fill: currentColor; -} - -.fill-zinc-300{ - fill: #d4d4d8; -} - -.fill-zinc-400{ - fill: #a1a1aa; -} - -.object-cover{ - -o-object-fit: cover; - object-fit: cover; -} - -.object-left{ - -o-object-position: left; - object-position: left; -} - -.p-1{ - padding: 0.25rem; -} - -.p-4{ - padding: 1rem; -} - -.p-5{ - padding: 1.25rem; -} - -.p-6{ - padding: 1.5rem; -} - -.p-7{ - padding: 1.75rem; -} - -.px-0\.5{ - padding-left: 0.125rem; - padding-right: 0.125rem; -} - -.px-2{ - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-2\.5{ - padding-left: 0.625rem; - padding-right: 0.625rem; -} - -.px-3{ - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.px-3\.5{ - padding-left: 0.875rem; - padding-right: 0.875rem; -} - -.px-4{ - padding-left: 1rem; - padding-right: 1rem; -} - -.px-5{ - padding-left: 1.25rem; - padding-right: 1.25rem; -} - -.px-6{ - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.px-7{ - padding-left: 1.75rem; - padding-right: 1.75rem; -} - -.px-8{ - padding-left: 2rem; - padding-right: 2rem; -} - -.py-0\.5{ - padding-top: 0.125rem; - padding-bottom: 0.125rem; -} - -.py-1{ - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.py-12{ - padding-top: 3rem; - padding-bottom: 3rem; -} - -.py-2{ - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.py-3{ - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.py-4{ - padding-top: 1rem; - padding-bottom: 1rem; -} - -.py-5{ - padding-top: 1.25rem; - padding-bottom: 1.25rem; -} - -.py-6{ - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - -.py-8{ - padding-top: 2rem; - padding-bottom: 2rem; -} - -.py-px{ - padding-top: 1px; - padding-bottom: 1px; -} - -.pb-1{ - padding-bottom: 0.25rem; -} - -.pb-12{ - padding-bottom: 3rem; -} - -.pb-2{ - padding-bottom: 0.5rem; -} - -.pb-3{ - padding-bottom: 0.75rem; -} - -.pb-4{ - padding-bottom: 1rem; -} - -.pb-6{ - padding-bottom: 1.5rem; -} - -.pb-8{ - padding-bottom: 2rem; -} - -.pl-4{ - padding-left: 1rem; -} - -.pr-2{ - padding-right: 0.5rem; -} - -.pr-4{ - padding-right: 1rem; -} - -.pt-0{ - padding-top: 0px; -} - -.pt-2{ - padding-top: 0.5rem; -} - -.pt-32{ - padding-top: 8rem; -} - -.pt-6{ - padding-top: 1.5rem; -} - -.pt-8{ - padding-top: 2rem; -} - -.text-left{ - text-align: left; -} - -.text-center{ - text-align: center; -} - -.align-top{ - vertical-align: top; -} - -.font-inter{ - font-family: Inter, sans-serif; -} - -.font-inter-tight{ - font-family: Inter Tight, sans-serif; -} - -.font-sans{ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} - -.text-2xl{ - font-size: 1.5rem; - line-height: 1.415; - letter-spacing: -0.017em; -} - -.text-3xl{ - font-size: 2rem; - line-height: 1.3125; - letter-spacing: -0.017em; -} - -.text-4xl{ - font-size: 2.5rem; - line-height: 1.25; - letter-spacing: -0.017em; -} - -.text-\[0\.6rem\]{ - font-size: 0.6rem; -} - -.text-base{ - font-size: 1rem; - line-height: 1.5; - letter-spacing: -0.017em; -} - -.text-lg{ - font-size: 1.125rem; - line-height: 1.5; - letter-spacing: -0.017em; -} - -.text-sm{ - font-size: 0.875rem; - line-height: 1.5715; -} - -.text-xl{ - font-size: 1.25rem; - line-height: 1.5; - letter-spacing: -0.017em; -} - -.text-xs{ - font-size: 0.75rem; - line-height: 1.5; -} - -.font-bold{ - font-weight: 700; -} - -.font-extrabold{ - font-weight: 800; -} - -.font-medium{ - font-weight: 500; -} - -.font-normal{ - font-weight: 400; -} - -.font-semibold{ - font-weight: 600; -} - -.uppercase{ - text-transform: uppercase; -} - -.italic{ - font-style: italic; -} - -.not-italic{ - font-style: normal; -} - -.tabular-nums{ - --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} - -.leading-none{ - line-height: 1; -} - -.tracking-tight{ - letter-spacing: -0.025em; -} - -.tracking-wide{ - letter-spacing: 0.025em; -} - -.text-blue-600{ - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity, 1)); -} - -.text-gray-400{ - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity, 1)); -} - -.text-gray-400\/70{ - color: rgb(156 163 175 / 0.7); -} - -.text-gray-500{ - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity, 1)); -} - -.text-gray-600{ - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity, 1)); -} - -.text-neutral-100{ - --tw-text-opacity: 1; - color: rgb(245 245 245 / var(--tw-text-opacity, 1)); -} - -.text-neutral-500{ - --tw-text-opacity: 1; - color: rgb(115 115 115 / var(--tw-text-opacity, 1)); -} - -.text-neutral-800{ - --tw-text-opacity: 1; - color: rgb(38 38 38 / var(--tw-text-opacity, 1)); -} - -.text-neutral-900{ - --tw-text-opacity: 1; - color: rgb(23 23 23 / var(--tw-text-opacity, 1)); -} - -.text-transparent{ - color: transparent; -} - -.text-white{ - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.text-zinc-100{ - --tw-text-opacity: 1; - color: rgb(244 244 245 / var(--tw-text-opacity, 1)); -} - -.text-zinc-200{ - --tw-text-opacity: 1; - color: rgb(228 228 231 / var(--tw-text-opacity, 1)); -} - -.text-zinc-400{ - --tw-text-opacity: 1; - color: rgb(161 161 170 / var(--tw-text-opacity, 1)); -} - -.text-zinc-500{ - --tw-text-opacity: 1; - color: rgb(113 113 122 / var(--tw-text-opacity, 1)); -} - -.text-zinc-600{ - --tw-text-opacity: 1; - color: rgb(82 82 91 / var(--tw-text-opacity, 1)); -} - -.text-zinc-700{ - --tw-text-opacity: 1; - color: rgb(63 63 70 / var(--tw-text-opacity, 1)); -} - -.text-zinc-800{ - --tw-text-opacity: 1; - color: rgb(39 39 42 / var(--tw-text-opacity, 1)); -} - -.text-zinc-900{ - --tw-text-opacity: 1; - color: rgb(24 24 27 / var(--tw-text-opacity, 1)); -} - -.underline{ - text-decoration-line: underline; -} - -.no-underline{ - text-decoration-line: none; -} - -.underline-offset-4{ - text-underline-offset: 4px; -} - -.antialiased{ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.opacity-0{ - opacity: 0; -} - -.opacity-100{ - opacity: 1; -} - -.opacity-60{ - opacity: 0.6; -} - -.opacity-70{ - opacity: 0.7; -} - -.opacity-90{ - opacity: 0.9; -} - -.mix-blend-exclusion{ - mix-blend-mode: exclusion; -} - -.shadow{ - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-2xl{ - --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-md{ - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-sm{ - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-zinc-950\/20{ - --tw-shadow-color: rgb(9 9 11 / 0.2); - --tw-shadow: var(--tw-shadow-colored); -} - -.drop-shadow-md{ - --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.backdrop-blur-sm{ - --tw-backdrop-blur: blur(4px); - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -} - -.transition{ - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-colors{ - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-100{ - transition-duration: 100ms; -} - -.duration-150{ - transition-duration: 150ms; -} - -.duration-200{ - transition-duration: 200ms; -} - -.duration-300{ - transition-duration: 300ms; -} - -.duration-500{ - transition-duration: 500ms; -} - -.duration-700{ - transition-duration: 700ms; -} - -.ease-in{ - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); -} - -.ease-in-out{ - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.ease-out{ - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); -} - -@media screen and (prefers-reduced-motion: no-preference){ - @keyframes motion-scale-in{ - 0%{ - scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y); - } - - 100%{ - scale: 1 1; - } - } - - @keyframes motion-scale-out{ - 0%{ - scale: 1 1; - } - - 100%{ - scale: var(--motion-end-scale-x) var(--motion-end-scale-y); - } - } - - @keyframes motion-translate-in{ - 0%{ - translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y); - } - - 100%{ - translate: 0 0; - } - } - - @keyframes motion-translate-out{ - 0%{ - translate: 0 0; - } - - 100%{ - translate: var(--motion-end-translate-x) var(--motion-end-translate-y); - } - } - - @keyframes motion-rotate-in{ - 0%{ - rotate: var(--motion-origin-rotate); - } - - 100%{ - rotate: 0; - } - } - - @keyframes motion-rotate-out{ - 0%{ - rotate: 0; - } - - 100%{ - rotate: var(--motion-end-rotate); - } - } -} - -@keyframes motion-filter-in{ - 0%{ - filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale)); - } - - 100%{ - filter: blur(0) grayscale(0); - } -} - -@keyframes motion-filter-out{ - 0%{ - filter: blur(0) grayscale(0); - } - - 100%{ - filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale)); - } -} - -@keyframes motion-opacity-in{ - 0%{ - opacity: var(--motion-origin-opacity); - } -} - -@keyframes motion-opacity-out{ - 100%{ - opacity: var(--motion-end-opacity); - } -} - -@keyframes motion-background-color-in{ - 0%{ - background-color: var(--motion-origin-background-color); - } -} - -@keyframes motion-background-color-out{ - 100%{ - background-color: var(--motion-end-background-color); - } -} - -@keyframes motion-text-color-in{ - 0%{ - color: var(--motion-origin-text-color); - } -} - -@keyframes motion-text-color-out{ - 100%{ - color: var(--motion-end-text-color); - } -} - -.motion-scale-in-50{ - --motion-origin-scale-x: .5; - --motion-origin-scale-y: .5; - --motion-scale-in-animation: motion-scale-in calc(var(--motion-scale-duration) * var(--motion-scale-perceptual-duration-multiplier)) var(--motion-scale-timing) var(--motion-scale-delay) both; - animation: var(--motion-all-enter-animations); -} - -.motion-opacity-in-0{ - --motion-origin-opacity: 0.001; - --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both; - animation: var(--motion-all-enter-animations); -} - -.\[animation-delay\:-7\.5s\]{ - animation-delay: -7.5s; -} - -.\[background\:linear-gradient\(\#2E2E32\2c \#2E2E32\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.700\)\2c theme\(colors\.zinc\.700\/0\)\2c theme\(colors\.zinc\.700\)\)_border-box\]{ - background: linear-gradient(#2E2E32,#2E2E32) padding-box,linear-gradient(120deg,#3f3f46,rgb(63 63 70 / 0),#3f3f46) border-box; -} - -.\[background\:linear-gradient\(\#323237\2c \#323237\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.700\)\2c theme\(colors\.zinc\.700\/0\)\2c theme\(colors\.zinc\.700\)\)_border-box\]{ - background: linear-gradient(#323237,#323237) padding-box,linear-gradient(120deg,#3f3f46,rgb(63 63 70 / 0),#3f3f46) border-box; -} - -.\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.white\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{ - background: linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box; -} - -.\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.zinc\.50\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{ - background: linear-gradient(#fff,#fafafa) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box; -} - -.\[background\:linear-gradient\(theme\(colors\.zinc\.50\)\2c theme\(colors\.zinc\.50\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{ - background: linear-gradient(#fafafa,#fafafa) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box; -} - -.\[background\:linear-gradient\(theme\(colors\.zinc\.800\)\2c theme\(colors\.zinc\.800\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.700\)\2c theme\(colors\.zinc\.700\/0\)\2c theme\(colors\.zinc\.700\)\)_border-box\]{ - background: linear-gradient(#27272a,#27272a) padding-box,linear-gradient(120deg,#3f3f46,rgb(63 63 70 / 0),#3f3f46) border-box; -} - -.\[mask-image\:_linear-gradient\(to_right\2c transparent_0\2c _black_28\%\2c _black_calc\(100\%-28\%\)\2c transparent_100\%\)\]{ - -webkit-mask-image: linear-gradient(to right,transparent 0, black 28%, black calc(100% - 28%),transparent 100%); - mask-image: linear-gradient(to right,transparent 0, black 28%, black calc(100% - 28%),transparent 100%); -} - -.\[mask-image\:linear-gradient\(to_right\2c transparent_8px\2c _theme\(colors\.white\/\.7\)_64px\2c _theme\(colors\.white\)_50\%\2c _theme\(colors\.white\/\.7\)_calc\(100\%-64px\)\2c _transparent_calc\(100\%-8px\)\)\]{ - -webkit-mask-image: linear-gradient(to right,transparent 8px, rgb(255 255 255 / .7) 64px, #fff 50%, rgb(255 255 255 / .7) calc(100% - 64px), transparent calc(100% - 8px)); - mask-image: linear-gradient(to right,transparent 8px, rgb(255 255 255 / .7) 64px, #fff 50%, rgb(255 255 255 / .7) calc(100% - 64px), transparent calc(100% - 8px)); -} - -/* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */ - -[x-cloak=""] { - display: none; -} - -/* Custom styles */ - -.form-input:focus, -.form-textarea:focus, -.form-multiselect:focus, -.form-select:focus, -.form-checkbox:focus, -.form-radio:focus{ - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -/* Hamburger button */ - -.hamburger svg > *:nth-child(1), -.hamburger svg > *:nth-child(2), -.hamburger svg > *:nth-child(3) { - transform-origin: center; - transform: rotate(0deg); -} - -.hamburger svg > *:nth-child(1) { - transition: - y 0.1s 0.25s ease-in, - transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), - opacity 0.1s ease-in; -} - -.hamburger svg > *:nth-child(2) { - transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); -} - -.hamburger svg > *:nth-child(3) { - transition: - y 0.1s 0.25s ease-in, - transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), - width 0.1s 0.25s ease-in; -} - -.hamburger.active svg > *:nth-child(1) { - opacity: 0; - y: 11; - transform: rotate(225deg); - transition: - y 0.1s ease-out, - transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), - opacity 0.1s 0.12s ease-out; -} - -.hamburger.active svg > *:nth-child(2) { - transform: rotate(225deg); - transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); -} - -.hamburger.active svg > *:nth-child(3) { - y: 11; - transform: rotate(135deg); - transition: - y 0.1s ease-out, - transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), - width 0.1s ease-out; -} - -/* Typography */ - -.h1{ - font-size: 3.25rem; - line-height: 1.2; - letter-spacing: -0.017em; - font-weight: 700; -} - -.h2{ - font-size: 2.5rem; - line-height: 1.25; - letter-spacing: -0.017em; - font-weight: 700; -} - -.h3{ - font-size: 2rem; - line-height: 1.3125; - letter-spacing: -0.017em; - font-weight: 700; -} - -.h4{ - font-size: 1.5rem; - line-height: 1.415; - letter-spacing: -0.017em; - font-weight: 700; -} - -@media (min-width: 768px) { - .h1{ - font-size: 3.75rem; - line-height: 1.1666; - letter-spacing: -0.017em; - } - - .h2{ - font-size: 3.25rem; - line-height: 1.2; - letter-spacing: -0.017em; - } - - .h3{ - font-size: 2.5rem; - line-height: 1.25; - letter-spacing: -0.017em; - } -} - -/* Buttons */ - -.btn, -.btn-sm{ - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 0.375rem; - border-width: 1px; - border-color: transparent; - font-size: 0.875rem; - line-height: 1.5715; - font-weight: 500; - letter-spacing: 0em; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.btn{ - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.btn-sm{ - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -/* Forms */ - -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { - -webkit-appearance: none; -} - -.form-input, -.form-textarea, -.form-multiselect, -.form-select, -.form-checkbox, -.form-radio{ - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(228 228 231 / var(--tw-border-opacity, 1)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - --tw-shadow-color: rgb(0 0 0 / 0.05); - --tw-shadow: var(--tw-shadow-colored); -} - -.form-input:focus, -.form-textarea:focus, -.form-multiselect:focus, -.form-select:focus, -.form-checkbox:focus, -.form-radio:focus{ - --tw-border-opacity: 1; - border-color: rgb(161 161 170 / var(--tw-border-opacity, 1)); -} - -.form-input, -.form-textarea, -.form-multiselect, -.form-select, -.form-checkbox{ - border-radius: 0.25rem; -} - -.form-input, -.form-textarea, -.form-multiselect, -.form-select{ - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-size: 0.875rem; - line-height: 1.5715; - --tw-text-opacity: 1; - color: rgb(82 82 91 / var(--tw-text-opacity, 1)); -} - -.form-input::-moz-placeholder, .form-textarea::-moz-placeholder{ - --tw-placeholder-opacity: 1; - color: rgb(161 161 170 / var(--tw-placeholder-opacity, 1)); -} - -.form-input::placeholder, -.form-textarea::placeholder{ - --tw-placeholder-opacity: 1; - color: rgb(161 161 170 / var(--tw-placeholder-opacity, 1)); -} - -.form-select{ - padding-right: 2.5rem; -} - -.form-checkbox, -.form-radio{ - --tw-text-opacity: 1; - color: rgb(39 39 42 / var(--tw-text-opacity, 1)); -} - -.form-checkbox{ - border-radius: 0.125rem; -} - -/* Chrome, Safari and Opera */ - -.no-scrollbar::-webkit-scrollbar { - display: none; -} - -.no-scrollbar { - -ms-overflow-style: none; - /* IE and Edge */ - scrollbar-width: none; - /* Firefox */ -} - -.placeholder\:text-neutral-500::-moz-placeholder{ - --tw-text-opacity: 1; - color: rgb(115 115 115 / var(--tw-text-opacity, 1)); -} - -.placeholder\:text-neutral-500::placeholder{ - --tw-text-opacity: 1; - color: rgb(115 115 115 / var(--tw-text-opacity, 1)); -} - -.placeholder\:text-zinc-400::-moz-placeholder{ - --tw-text-opacity: 1; - color: rgb(161 161 170 / var(--tw-text-opacity, 1)); -} - -.placeholder\:text-zinc-400::placeholder{ - --tw-text-opacity: 1; - color: rgb(161 161 170 / var(--tw-text-opacity, 1)); -} - -.before\:pointer-events-none::before{ - content: var(--tw-content); - pointer-events: none; -} - -.before\:absolute::before{ - content: var(--tw-content); - position: absolute; -} - -.before\:inset-0::before{ - content: var(--tw-content); - inset: 0px; -} - -.before\:-top-12::before{ - content: var(--tw-content); - top: -3rem; -} - -.before\:-z-10::before{ - content: var(--tw-content); - z-index: -10; -} - -.before\:h-52::before{ - content: var(--tw-content); - height: 13rem; -} - -.before\:h-80::before{ - content: var(--tw-content); - height: 20rem; -} - -.before\:h-96::before{ - content: var(--tw-content); - height: 24rem; -} - -.before\:w-52::before{ - content: var(--tw-content); - width: 13rem; -} - -.before\:w-96::before{ - content: var(--tw-content); - width: 24rem; -} - -.before\:rounded-full::before{ - content: var(--tw-content); - border-radius: 9999px; -} - -.before\:bg-zinc-900::before{ - content: var(--tw-content); - --tw-bg-opacity: 1; - background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1)); -} - -.before\:bg-gradient-to-b::before{ - content: var(--tw-content); - background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); -} - -.before\:from-zinc-100::before{ - content: var(--tw-content); - --tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.before\:opacity-\[\.08\]::before{ - content: var(--tw-content); - opacity: .08; -} - -.before\:opacity-\[\.15\]::before{ - content: var(--tw-content); - opacity: .15; -} - -.before\:blur-3xl::before{ - content: var(--tw-content); - --tw-blur: blur(64px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.before\:content-\[\'\\0022\'\]::before{ - --tw-content: '\0022'; - content: var(--tw-content); -} - -.after\:pointer-events-none::after{ - content: var(--tw-content); - pointer-events: none; -} - -.after\:absolute::after{ - content: var(--tw-content); - position: absolute; -} - -.after\:right-0::after{ - content: var(--tw-content); - right: 0px; -} - -.after\:top-0::after{ - content: var(--tw-content); - top: 0px; -} - -.after\:top-1\/2::after{ - content: var(--tw-content); - top: 50%; -} - -.after\:hidden::after{ - content: var(--tw-content); - display: none; -} - -.after\:h-8::after{ - content: var(--tw-content); - height: 2rem; -} - -.after\:h-full::after{ - content: var(--tw-content); - height: 100%; -} - -.after\:w-96::after{ - content: var(--tw-content); - width: 24rem; -} - -.after\:w-px::after{ - content: var(--tw-content); - width: 1px; -} - -.after\:-translate-y-1\/2::after{ - content: var(--tw-content); - --tw-translate-y: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.after\:border-l::after{ - content: var(--tw-content); - border-left-width: 1px; -} - -.after\:border-dashed::after{ - content: var(--tw-content); - border-style: dashed; -} - -.after\:border-zinc-300::after{ - content: var(--tw-content); - --tw-border-opacity: 1; - border-color: rgb(212 212 216 / var(--tw-border-opacity, 1)); -} - -.after\:bg-gradient-to-l::after{ - content: var(--tw-content); - background-image: linear-gradient(to left, var(--tw-gradient-stops)); -} - -.after\:from-zinc-800::after{ - content: var(--tw-content); - --tw-gradient-from: #27272a var(--tw-gradient-from-position); - --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.after\:content-\[\'\\0022\'\]::after{ - --tw-content: '\0022'; - content: var(--tw-content); -} - -.last\:after\:hidden:last-child::after{ - content: var(--tw-content); - display: none; -} - -.hover\:bg-neutral-100:hover{ - --tw-bg-opacity: 1; - background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)); -} - -.hover\:bg-neutral-800:hover{ - --tw-bg-opacity: 1; - background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)); -} - -.hover\:bg-neutral-900:hover{ - --tw-bg-opacity: 1; - background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1)); -} - -.hover\:bg-zinc-200:hover{ - --tw-bg-opacity: 1; - background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1)); -} - -.hover\:bg-zinc-50:hover{ - --tw-bg-opacity: 1; - background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1)); -} - -.hover\:bg-zinc-800:hover{ - --tw-bg-opacity: 1; - background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1)); -} - -.hover\:text-neutral-900:hover{ - --tw-text-opacity: 1; - color: rgb(23 23 23 / var(--tw-text-opacity, 1)); -} - -.hover\:text-white:hover{ - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.hover\:text-zinc-300:hover{ - --tw-text-opacity: 1; - color: rgb(212 212 216 / var(--tw-text-opacity, 1)); -} - -.hover\:text-zinc-800:hover{ - --tw-text-opacity: 1; - color: rgb(39 39 42 / var(--tw-text-opacity, 1)); -} - -.hover\:text-zinc-900:hover{ - --tw-text-opacity: 1; - color: rgb(24 24 27 / var(--tw-text-opacity, 1)); -} - -.hover\:underline:hover{ - text-decoration-line: underline; -} - -.hover\:opacity-100:hover{ - opacity: 1; -} - -.focus\:border-neutral-300:focus{ - --tw-border-opacity: 1; - border-color: rgb(212 212 212 / var(--tw-border-opacity, 1)); -} - -.focus\:border-zinc-300:focus{ - --tw-border-opacity: 1; - border-color: rgb(212 212 216 / var(--tw-border-opacity, 1)); -} - -.focus\:no-underline:focus{ - text-decoration-line: none; -} - -.focus\:outline-none:focus{ - outline: 2px solid transparent; - outline-offset: 2px; -} - -.focus\:ring-2:focus{ - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-neutral-100:focus{ - --tw-ring-opacity: 1; - --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity, 1)); -} - -.focus\:ring-neutral-400:focus{ - --tw-ring-opacity: 1; - --tw-ring-color: rgb(163 163 163 / var(--tw-ring-opacity, 1)); -} - -.focus\:ring-neutral-900:focus{ - --tw-ring-opacity: 1; - --tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity, 1)); -} - -.focus\:ring-offset-2:focus{ - --tw-ring-offset-width: 2px; -} - -.focus-visible\:outline-none:focus-visible{ - outline: 2px solid transparent; - outline-offset: 2px; -} - -.focus-visible\:ring-2:focus-visible{ - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.focus-visible\:ring-offset-2:focus-visible{ - --tw-ring-offset-width: 2px; -} - -.disabled\:pointer-events-none:disabled{ - pointer-events: none; -} - -.disabled\:cursor-not-allowed:disabled{ - cursor: not-allowed; -} - -.disabled\:opacity-50:disabled{ - opacity: 0.5; -} - -.group:hover .group-hover\:w-full{ - width: 100%; -} - -.group:hover .group-hover\:-rotate-6{ - --tw-rotate: -6deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:scale-150{ - --tw-scale-x: 1.5; - --tw-scale-y: 1.5; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:opacity-100{ - opacity: 1; -} - -.group:hover .group-hover\:\[animation-play-state\:paused\]{ - animation-play-state: paused; -} - -.peer:disabled ~ .peer-disabled\:cursor-not-allowed{ - cursor: not-allowed; -} - -.peer:disabled ~ .peer-disabled\:opacity-70{ - opacity: 0.7; -} - -@supports (overflow:clip){ - .supports-\[overflow\:clip\]\:overflow-clip{ - overflow: clip; - } -} - -@media not all and (min-width: 1024px){ - .max-lg\:w-32{ - width: 8rem; - } - - .max-lg\:after\:hidden::after{ - content: var(--tw-content); - display: none; - } -} - -@media not all and (min-width: 640px){ - .max-sm\:order-1{ - order: 1; - } -} - -@media (min-width: 640px){ - .sm\:col-span-2{ - grid-column: span 2 / span 2; - } - - .sm\:col-span-6{ - grid-column: span 6 / span 6; - } - - .sm\:mb-0{ - margin-bottom: 0px; - } - - .sm\:inline-flex{ - display: inline-flex; - } - - .sm\:h-auto{ - height: auto; - } - - .sm\:max-w-lg{ - max-width: 32rem; - } - - .sm\:max-w-none{ - max-width: none; - } - - .sm\:grid-cols-12{ - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .sm\:grid-cols-2{ - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .sm\:flex-row{ - flex-direction: row; - } - - .sm\:justify-center{ - justify-content: center; - } - - .sm\:justify-between{ - justify-content: space-between; - } - - .sm\:gap-4{ - gap: 1rem; - } - - .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); - } - - .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); - } - - .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0px * var(--tw-space-y-reverse)); - } - - .sm\:rounded-lg{ - border-radius: 0.5rem; - } - - .sm\:object-contain{ - -o-object-fit: contain; - object-fit: contain; - } - - .sm\:px-6{ - padding-left: 1.5rem; - padding-right: 1.5rem; - } -} - -@media (min-width: 768px){ - .md\:top-6{ - top: 1.5rem; - } - - .md\:col-span-3{ - grid-column: span 3 / span 3; - } - - .md\:-mx-5{ - margin-left: -1.25rem; - margin-right: -1.25rem; - } - - .md\:mb-0{ - margin-bottom: 0px; - } - - .md\:max-w-none{ - max-width: none; - } - - .md\:grid-cols-3{ - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .md\:grid-cols-4{ - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .md\:flex-row{ - flex-direction: row; - } - - .md\:justify-start{ - justify-content: flex-start; - } - - .md\:gap-0{ - gap: 0px; - } - - .md\:gap-4{ - gap: 1rem; - } - - .md\:gap-6{ - gap: 1.5rem; - } - - .md\:px-5{ - padding-left: 1.25rem; - padding-right: 1.25rem; - } - - .md\:py-12{ - padding-top: 3rem; - padding-bottom: 3rem; - } - - .md\:py-20{ - padding-top: 5rem; - padding-bottom: 5rem; - } - - .md\:pb-16{ - padding-bottom: 4rem; - } - - .md\:pb-20{ - padding-bottom: 5rem; - } - - .md\:pt-40{ - padding-top: 10rem; - } - - .md\:text-3xl{ - font-size: 2rem; - line-height: 1.3125; - letter-spacing: -0.017em; - } - - .md\:text-4xl{ - font-size: 2.5rem; - line-height: 1.25; - letter-spacing: -0.017em; - } - - .md\:text-5xl{ - font-size: 3.25rem; - line-height: 1.2; - letter-spacing: -0.017em; - } - - .md\:after\:block::after{ - content: var(--tw-content); - display: block; - } -} - -@media (min-width: 1024px){ - .lg\:col-span-2{ - grid-column: span 2 / span 2; - } - - .lg\:col-span-6{ - grid-column: span 6 / span 6; - } - - .lg\:mb-0{ - margin-bottom: 0px; - } - - .lg\:mt-32{ - margin-top: 8rem; - } - - .lg\:block{ - display: block; - } - - .lg\:flex{ - display: flex; - } - - .lg\:h-5{ - height: 1.25rem; - } - - .lg\:min-w-\[524px\]{ - min-width: 524px; - } - - .lg\:max-w-6xl{ - max-width: 72rem; - } - - .lg\:max-w-none{ - max-width: none; - } - - .lg\:grid-cols-3{ - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .lg\:gap-16{ - gap: 4rem; - } - - .lg\:gap-8{ - gap: 2rem; - } - - .lg\:space-x-12 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(3rem * var(--tw-space-x-reverse)); - margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse))); - } - - .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0px * var(--tw-space-y-reverse)); - } - - .lg\:p-24{ - padding: 6rem; - } - - .lg\:px-5{ - padding-left: 1.25rem; - padding-right: 1.25rem; - } - - .lg\:text-2xl{ - font-size: 1.5rem; - line-height: 1.415; - letter-spacing: -0.017em; - } - - .lg\:text-3xl{ - font-size: 2rem; - line-height: 1.3125; - letter-spacing: -0.017em; - } - - .lg\:text-xl{ - font-size: 1.25rem; - line-height: 1.5; - letter-spacing: -0.017em; - } -} - -@media (min-width: 1280px){ - .xl\:space-x-24 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(6rem * var(--tw-space-x-reverse)); - margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse))); - } -} - -.\[\&\>div\]\:mx-3>div{ - margin-left: 0.75rem; - margin-right: 0.75rem; -} - -.\[\&_\.active-breadcrumb\]\:font-medium .active-breadcrumb{ - font-weight: 500; -} - -.\[\&_\.active-breadcrumb\]\:text-neutral-600 .active-breadcrumb{ - --tw-text-opacity: 1; - color: rgb(82 82 82 / var(--tw-text-opacity, 1)); -} diff --git a/pkg/webapp/components/globals.css b/pkg/webapp/globals.css similarity index 100% rename from pkg/webapp/components/globals.css rename to pkg/webapp/globals.css diff --git a/pkg/webapp/package.json b/pkg/webapp/package.json index 88e2d0810..0d5f50433 100644 --- a/pkg/webapp/package.json +++ b/pkg/webapp/package.json @@ -2,7 +2,7 @@ "name": "@onsonr/nebula", "version": "0.0.2", "scripts": { - "build": "bunx tailwindcss -i ./components/globals.css -o ./components/styles/styles.css" + "build": "bunx tailwindcss -i ./globals.css -o ./dist/styles.css" }, "dependencies": { "@tailwindcss/forms": "^0.5.7", diff --git a/scripts/init_env.sh b/scripts/ipfs_config.sh similarity index 94% rename from scripts/init_env.sh rename to scripts/ipfs_config.sh index 1617e9d15..c490b5b5f 100755 --- a/scripts/init_env.sh +++ b/scripts/ipfs_config.sh @@ -1,7 +1,5 @@ #!/bin/bash -go install github.com/cosmos/gex@latest -go install github.com/apple/pkl-go/cmd/pkl-gen-go@latest rm -rf ~/.ipfs diff --git a/scripts/tailwindgen.sh b/scripts/tailwindgen.sh new file mode 100755 index 000000000..f3fecc0d7 --- /dev/null +++ b/scripts/tailwindgen.sh @@ -0,0 +1,17 @@ +#!/usr/bin/env bash + +set -e + +ROOT_DIR=$(git rev-parse --show-toplevel) +STYLES_DIR=$ROOT_DIR/pkg/webapp +DIST_DIR=$STYLES_DIR/dist +OUT_DIR=$ROOT_DIR/static/css + +cd $STYLES_DIR +bun install +bun run build +mkdir -p $OUT_DIR +mv $DIST_DIR/styles.css $OUT_DIR/styles.css +rm -rf $DIST_DIR +rm -rf $STYLES_DIR/node_modules + diff --git a/scripts/upload_pkl.sh b/scripts/upload_cdn.sh similarity index 77% rename from scripts/upload_pkl.sh rename to scripts/upload_cdn.sh index 425a8fd05..c807933b2 100755 --- a/scripts/upload_pkl.sh +++ b/scripts/upload_cdn.sh @@ -12,3 +12,6 @@ for dir in .out/*/; do done rm -rf .out + +rclone copy $ROOT_DIR/static "r2:nebula" +rm -rf $ROOT_DIR/static