diff --git a/images/projectImg.png b/images/projectImg.png new file mode 100644 index 0000000..8098343 Binary files /dev/null and b/images/projectImg.png differ diff --git a/images/projectsBG.png b/images/projectsBG.png new file mode 100644 index 0000000..ce5d3bb Binary files /dev/null and b/images/projectsBG.png differ diff --git a/images/roadmapBG.png b/images/roadmapBG.png new file mode 100644 index 0000000..49d15db Binary files /dev/null and b/images/roadmapBG.png differ diff --git a/index.html b/index.html index 5324f70..4adf4e6 100644 --- a/index.html +++ b/index.html @@ -1,89 +1,344 @@ - + - - - + + + Creative Web & Solftware - - - + + + - - + + - - - - + + - + +
+
+
+
+

Web Projects will be here

+

+ Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu + est at non suscipit. Felis posuere maecenas interdum sit cras. + Egestas sed nunc sodales arcu mi ut volutpat lobortis. +

+
+
+
+
+ projectImg + Relevant project Image Will Be Here +
+

Expert Consulting Website

+
+ + + +
+
+
+
+ projectImg + Relevant project Image Will Be Here +
+

Service Marketplace

+
+ + + +
+
+
+
+ projectImg + Relevant project Image Will Be Here +
+

Woo-commerce platform

+
+ + + +
+
+
+
+ projectImg + Relevant project Image Will Be Here +
+

Travel Solutions platform

+
+ + + +
+
+
+
+ projectImg + Relevant project Image Will Be Here +
+

Service Marketplace

+
+ + + +
+
+
+
+ projectImg + Relevant project Image Will Be Here +
+

Expert Consulting Website

+
+ + + +
+
+
+
+ projectImg + Relevant project Image Will Be Here +
+

Travel Solutions platform

+
+ + + +
+
+
+
+ projectImg + Relevant project Image Will Be Here +
+

Woo-commerce platform

+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+

An exciting journey roadmap

+

+ Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu + est at non suscipit. Felis posuere maecenas interdum sit cras. + Egestas sed nunc sodales arcu mi ut volutpat lobortis. +

+
+
+
+
+
+
+ 1 +
+
+
+

Journey Title will be here

+

+ Lorem ipsum dolor sit amet consectetur. Lectus et lobortis + ultricies eget amet faucibus diam. Dictum pharetra nisi donec + neque ut mauris nulla eros. +

+
+
+
+
+ 2 +
+
+
+

Journey Title will be here

+

+ Lorem ipsum dolor sit amet consectetur. Lectus et lobortis + ultricies eget amet faucibus diam. Dictum pharetra nisi donec + neque ut mauris nulla eros. +

+
+
+
+
+ 3 +
+
+
+

Journey Title will be here

+

+ Lorem ipsum dolor sit amet consectetur. Lectus et lobortis + ultricies eget amet faucibus diam. Dictum pharetra nisi donec + neque ut mauris nulla eros. +

+
+ + +
+
+
+ 4 +
+
+
+

Journey Title will be here

+

+ Lorem ipsum dolor sit amet consectetur. Lectus et lobortis + ultricies eget amet faucibus diam. Dictum pharetra nisi donec + neque ut mauris nulla eros. +

+
+
+
+
+ 5 +
+
+
+

Journey Title will be here

+

+ Lorem ipsum dolor sit amet consectetur. Lectus et lobortis + ultricies eget amet faucibus diam. Dictum pharetra nisi donec + neque ut mauris nulla eros. +

+
+ +
+
+
+
+
+ - - - \ No newline at end of file + + diff --git a/src/input.css b/src/input.css index d94326a..3b10b56 100644 --- a/src/input.css +++ b/src/input.css @@ -15,4 +15,159 @@ color: transparent; } +/* Ashfak Maumud */ +/* ============= */ +/* Common Start */ +.container { + @apply max-w-285 mx-auto px-3 lg:px-0; +} +.heading { + @apply text-center border-b border-b-[#7451FD]; +} +.heading h3 { + @apply text-white lg:text-[56px] text-[40px] font-inter font-extrabold leading-tight w-70 mx-auto md:w-208.75 lg:w-208.75 capitalize; +} +.heading h3 span { + @apply italic bg-linear-to-r from-[#4E95FF] to-[#7F5CFF] bg-clip-text text-transparent; +} +.heading p { + @apply lg:w-202.5 mx-auto text-[#A9B0B8] text-lg font-roboto pt-4 px-2 lg:px-0; +} +/* Common End */ + +/* Projects Part Start */ +#projectsPart { + @apply bg-[#050111] lg:pb-30 pb-10; +} +.projects { + @apply bg-[url(/images/projectsBG.png)] bg-no-repeat bg-cover bg-center lg:py-28.5 md:py-12 py-10; +} +.projectsHead { + @apply pb-8 mb-8; +} +.allProjects { + @apply grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 gap-6; +} +.projectDetails { + @apply bg-[#050111] rounded-2xl border border-[#1A2130] p-4; +} +.projectDetailsImg { + @apply relative; +} +.projectDetailsImg img { + @apply w-full; +} +.projectDetailsImg span { + @apply absolute top-1/2 left-1/2 -translate-1/2 w-52.5 text-white text-[12px] font-roboto bg-[#120B50CC] p-2.5; +} +.projectDetails h4 { + @apply text-white text-base font-roboto font-semibold pt-4 pb-10; +} +.projectDetailsBtn { + @apply flex items-center gap-x-2; +} +.projectDetailsBtn button { + @apply text-[12px] font-roboto rounded-sm cursor-pointer px-2 py-1; +} +.btnOne { + @apply text-[#F0C0FF] bg-[#6A3A7D]; +} +.btnTwo { + @apply text-[#4891FF] bg-[#233981]; +} +.btnThree { + @apply text-[#FF9697] bg-[#683D3E]; +} +.btnFour { + @apply text-[#9387FF] bg-[#453576]; +} +.btnFive { + @apply text-[#96FFA2] bg-[#3D6849]; +} +.btnSix { + @apply text-[#FFC081] bg-[#7C523D]; +} +.btnSeven { + @apply text-[#B8C1D4] bg-[#51555B]; +} +.btnEight { + @apply text-[#FFF396] bg-[#68653D]; +} +.btnNine { + @apply text-[#42C6FF] bg-[#265479]; +} +.btnTen { + @apply text-[#96FFA2] bg-[#3D6849]; +} +.btnEleven { + @apply text-[#FFFFFF] bg-[#68653D]; +} +.btnTwelve { + @apply text-[#BEB3FF] bg-[#3A4683]; +} +/* Projects Part End */ +/* Roadmap Part Start */ +#roadmapPart { + @apply bg-[#050111]; +} +.roadmap { + @apply bg-[url(/images/roadmapBG.png)] bg-no-repeat bg-cover bg-center pb-16.5; +} +.roadmapHead { + @apply border-none pb-8; +} +.allRoadmapsFlex { + @apply flex flex-wrap md:justify-center gap-6; +} +/* .allRoadmapsGridOne { + @apply grid lg:grid-cols-3 md:grid-cols-2 md:justify-center gap-6; +} */ +.allRoadmapsGridTwo { + @apply grid lg:grid-cols-2 gap-6 pt-6; +} +.roadmapContent { + @apply bg-[#050111] rounded-[20px] shadow-[0px_4px_40px_0px_rgba(175,194,212,0.2)] p-6; +} +.serial { + @apply flex items-center; +} +.serialNum { + @apply h-14 w-14 bg-[#38435C] rounded-[10px] flex items-center justify-center; +} +.serialNum span { + @apply text-white text-[32px] font-inter font-semibold; +} +.line { + @apply h-0.75 rounded-full bg-linear-to-r via-26% to-[#FFFFFF00] w-[90%]; +} +.lineOne { + @apply from-[#CCA3FF] via-[#CCA3FF]; +} +.lineTwo { + @apply from-[#36FF6C] via-[#36FF6C]; +} +.lineThree { + @apply from-[#FFB265] via-[#FFB265] w-65; +} +.lineFour { + @apply from-[#FF6767] via-[#FF6767] w-65 md:w-65 lg:w-103.5; +} +.lineFive { + @apply from-[#5BA7FF] via-[#5BA7FF] w-65 md:w-160 lg:w-103.5; +} +.roadmapContent{ + @apply md:w-[48%] grow +} +.roadmapContentFirst{ + @apply lg:w-[30%] +} +.roadmapContent h4 { + @apply text-white text-xl font-roboto font-semibold pt-4 pb-2; +} +.roadmapContent p { + @apply text-[#6F7B88] text-sm font-roboto leading-[150%]; +} +/* Roadmap Part End */ +/* ============= */ +/* Ashfak Maumud */ \ No newline at end of file diff --git a/src/output.css b/src/output.css index cb047a1..e539b6b 100644 --- a/src/output.css +++ b/src/output.css @@ -10,8 +10,20 @@ --color-white: #fff; --spacing: 0.25rem; --container-xl: 36rem; + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); --font-weight-medium: 500; + --font-weight-semibold: 600; --font-weight-extrabold: 800; + --leading-tight: 1.25; + --radius-sm: 0.25rem; + --radius-2xl: 1rem; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); @@ -189,6 +201,24 @@ .z-10 { z-index: 10; } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } .mx-auto { margin-inline: auto; } @@ -207,6 +237,9 @@ .max-w-container { max-width: var(--spacing-container); } + .flex-grow { + flex-grow: 1; + } .border-collapse { border-collapse: collapse; } @@ -216,6 +249,9 @@ .resize { resize: both; } + .flex-wrap { + flex-wrap: wrap; + } .items-center { align-items: center; } @@ -228,9 +264,6 @@ .gap-x-4 { column-gap: calc(var(--spacing) * 4); } - .gap-x-5 { - column-gap: calc(var(--spacing) * 5); - } .overflow-hidden { overflow: hidden; } @@ -295,9 +328,27 @@ .px-3 { padding-inline: calc(var(--spacing) * 3); } + .py-0 { + padding-block: calc(var(--spacing) * 0); + } .py-2 { padding-block: calc(var(--spacing) * 2); } + .py-10 { + padding-block: calc(var(--spacing) * 10); + } + .py-20 { + padding-block: calc(var(--spacing) * 20); + } + .py-30 { + padding-block: calc(var(--spacing) * 30); + } + .py-60 { + padding-block: calc(var(--spacing) * 60); + } + .py-200 { + padding-block: calc(var(--spacing) * 200); + } .pt-2 { padding-top: calc(var(--spacing) * 2); } @@ -404,11 +455,6 @@ width: calc(var(--spacing) * 79); } } - .lg\:w-141\.75 { - @media (width >= 64rem) { - width: calc(var(--spacing) * 141.75); - } - } .lg\:w-151\.75 { @media (width >= 64rem) { width: calc(var(--spacing) * 151.75); @@ -420,6 +466,355 @@ } } } +.container { + margin-inline: auto; + max-width: calc(var(--spacing) * 285); + padding-inline: calc(var(--spacing) * 3); + @media (width >= 64rem) { + padding-inline: calc(var(--spacing) * 0); + } +} +.heading { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + border-bottom-color: #7451FD; + text-align: center; +} +.heading h3 { + margin-inline: auto; + width: calc(var(--spacing) * 70); + font-family: var(--font-inter); + font-size: 40px; + --tw-leading: var(--leading-tight); + line-height: var(--leading-tight); + --tw-font-weight: var(--font-weight-extrabold); + font-weight: var(--font-weight-extrabold); + color: var(--color-white); + text-transform: capitalize; + @media (width >= 48rem) { + width: calc(var(--spacing) * 208.75); + } + @media (width >= 64rem) { + width: calc(var(--spacing) * 208.75); + } + @media (width >= 64rem) { + font-size: 56px; + } +} +.heading h3 span { + --tw-gradient-position: to right; + @supports (background-image: linear-gradient(in lab, red, red)) { + --tw-gradient-position: to right in oklab; + } + background-image: linear-gradient(var(--tw-gradient-stops)); + --tw-gradient-from: #4E95FF; + --tw-gradient-to: #7F5CFF; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + background-clip: text; + color: transparent; + font-style: italic; +} +.heading p { + margin-inline: auto; + padding-inline: calc(var(--spacing) * 2); + padding-top: calc(var(--spacing) * 4); + font-family: var(--font-roboto); + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + color: #A9B0B8; + @media (width >= 64rem) { + width: calc(var(--spacing) * 202.5); + } + @media (width >= 64rem) { + padding-inline: calc(var(--spacing) * 0); + } +} +#projectsPart { + background-color: #050111; + padding-bottom: calc(var(--spacing) * 10); + @media (width >= 64rem) { + padding-bottom: calc(var(--spacing) * 30); + } +} +.projects { + background-image: url(/images/projectsBG.png); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + padding-block: calc(var(--spacing) * 10); + @media (width >= 48rem) { + padding-block: calc(var(--spacing) * 12); + } + @media (width >= 64rem) { + padding-block: calc(var(--spacing) * 28.5); + } +} +.projectsHead { + margin-bottom: calc(var(--spacing) * 8); + padding-bottom: calc(var(--spacing) * 8); +} +.allProjects { + display: grid; + gap: calc(var(--spacing) * 6); + @media (width >= 40rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + @media (width >= 64rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} +.projectDetails { + border-radius: var(--radius-2xl); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: #1A2130; + background-color: #050111; + padding: calc(var(--spacing) * 4); +} +.projectDetailsImg { + position: relative; +} +.projectDetailsImg img { + width: 100%; +} +.projectDetailsImg span { + position: absolute; + top: calc(1 / 2 * 100%); + left: calc(1 / 2 * 100%); + width: calc(var(--spacing) * 52.5); + --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); + --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + background-color: #120B50CC; + padding: calc(var(--spacing) * 2.5); + font-family: var(--font-roboto); + font-size: 12px; + color: var(--color-white); +} +.projectDetails h4 { + padding-top: calc(var(--spacing) * 4); + padding-bottom: calc(var(--spacing) * 10); + font-family: var(--font-roboto); + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: var(--color-white); +} +.projectDetailsBtn { + display: flex; + align-items: center; + column-gap: calc(var(--spacing) * 2); +} +.projectDetailsBtn button { + cursor: pointer; + border-radius: var(--radius-sm); + padding-inline: calc(var(--spacing) * 2); + padding-block: calc(var(--spacing) * 1); + font-family: var(--font-roboto); + font-size: 12px; +} +.btnOne { + background-color: #6A3A7D; + color: #F0C0FF; +} +.btnTwo { + background-color: #233981; + color: #4891FF; +} +.btnThree { + background-color: #683D3E; + color: #FF9697; +} +.btnFour { + background-color: #453576; + color: #9387FF; +} +.btnFive { + background-color: #3D6849; + color: #96FFA2; +} +.btnSix { + background-color: #7C523D; + color: #FFC081; +} +.btnSeven { + background-color: #51555B; + color: #B8C1D4; +} +.btnEight { + background-color: #68653D; + color: #FFF396; +} +.btnNine { + background-color: #265479; + color: #42C6FF; +} +.btnTen { + background-color: #3D6849; + color: #96FFA2; +} +.btnEleven { + background-color: #68653D; + color: #FFFFFF; +} +.btnTwelve { + background-color: #3A4683; + color: #BEB3FF; +} +#roadmapPart { + background-color: #050111; +} +.roadmap { + background-image: url(/images/roadmapBG.png); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + padding-bottom: calc(var(--spacing) * 16.5); +} +.roadmapHead { + --tw-border-style: none; + border-style: none; + padding-bottom: calc(var(--spacing) * 8); +} +.allRoadmapsFlex { + display: flex; + flex-wrap: wrap; + gap: calc(var(--spacing) * 6); + @media (width >= 48rem) { + justify-content: center; + } +} +.allRoadmapsGridTwo { + display: grid; + gap: calc(var(--spacing) * 6); + padding-top: calc(var(--spacing) * 6); + @media (width >= 64rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +.roadmapContent { + border-radius: 20px; + background-color: #050111; + padding: calc(var(--spacing) * 6); + --tw-shadow: 0px 4px 40px 0px var(--tw-shadow-color, rgba(175,194,212,0.2)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} +.serial { + display: flex; + align-items: center; +} +.serialNum { + display: flex; + height: calc(var(--spacing) * 14); + width: calc(var(--spacing) * 14); + align-items: center; + justify-content: center; + border-radius: 10px; + background-color: #38435C; +} +.serialNum span { + font-family: var(--font-inter); + font-size: 32px; + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: var(--color-white); +} +.line { + height: calc(var(--spacing) * 0.75); + width: 90%; + border-radius: calc(infinity * 1px); + --tw-gradient-position: to right; + @supports (background-image: linear-gradient(in lab, red, red)) { + --tw-gradient-position: to right in oklab; + } + background-image: linear-gradient(var(--tw-gradient-stops)); + --tw-gradient-via-position: 26%; + --tw-gradient-to: #FFFFFF00; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); +} +.lineOne { + --tw-gradient-from: #CCA3FF; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-via: #CCA3FF; + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} +.lineTwo { + --tw-gradient-from: #36FF6C; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-via: #36FF6C; + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} +.lineThree { + width: calc(var(--spacing) * 65); + --tw-gradient-from: #FFB265; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-via: #FFB265; + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); +} +.lineFour { + width: calc(var(--spacing) * 65); + --tw-gradient-from: #FF6767; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-via: #FF6767; + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + @media (width >= 48rem) { + width: calc(var(--spacing) * 65); + } + @media (width >= 64rem) { + width: calc(var(--spacing) * 103.5); + } +} +.lineFive { + width: calc(var(--spacing) * 65); + --tw-gradient-from: #5BA7FF; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-via: #5BA7FF; + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + @media (width >= 48rem) { + width: calc(var(--spacing) * 160); + } + @media (width >= 64rem) { + width: calc(var(--spacing) * 103.5); + } +} +.roadmapContent { + flex-grow: 1; + @media (width >= 48rem) { + width: 48%; + } +} +.roadmapContentFirst { + @media (width >= 64rem) { + width: 30%; + } +} +.roadmapContent h4 { + padding-top: calc(var(--spacing) * 4); + padding-bottom: calc(var(--spacing) * 2); + font-family: var(--font-roboto); + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: var(--color-white); +} +.roadmapContent p { + font-family: var(--font-roboto); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-leading: 150%; + line-height: 150%; + color: #6F7B88; +} @property --tw-border-style { syntax: "*"; inherits: false; @@ -442,6 +837,128 @@ syntax: "*"; inherits: false; } +@property --tw-gradient-position { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-via-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from-position { + syntax: ""; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { @@ -450,6 +967,32 @@ --tw-font-weight: initial; --tw-outline-style: solid; --tw-duration: initial; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; } } }