Initial commit files
This commit is contained in:
313
app/globals.css
313
app/globals.css
@@ -1,26 +1,311 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* ── Aiero color tokens (extracted from source) ── */
|
||||
--aiero-bg-dark: #1F1F1F;
|
||||
--aiero-bg-card-dark: #282828;
|
||||
--aiero-bg-card-border: #3F3F3F;
|
||||
--aiero-accent-teal: #45D0BD;
|
||||
--aiero-accent-blue: #44B6E9;
|
||||
--aiero-accent-red: #EF6464;
|
||||
--aiero-accent-red-hover: #F57E7E;
|
||||
--aiero-purple-start: #8258C8;
|
||||
--aiero-purple-mid: #6766C8;
|
||||
--aiero-purple-end: #2C84C8;
|
||||
--aiero-card-purple: #343F78;
|
||||
--aiero-card-purple-2: #56619E;
|
||||
--aiero-card-lavender: #AC8DE0;
|
||||
--aiero-text-muted: #87899B;
|
||||
|
||||
/* button gradient angles */
|
||||
--button-border-gradient-angle: 92deg;
|
||||
--button-gradient-colorstop-1: 0%;
|
||||
--button-gradient-colorstop-2: 100%;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-background: #ffffff;
|
||||
--color-foreground: #1F1F1F;
|
||||
--color-aiero-dark: #1F1F1F;
|
||||
--color-aiero-card-dark: #282828;
|
||||
--color-aiero-card-border: #3F3F3F;
|
||||
--color-aiero-teal: #45D0BD;
|
||||
--color-aiero-blue: #44B6E9;
|
||||
--color-aiero-red: #EF6464;
|
||||
--color-aiero-red-hover: #F57E7E;
|
||||
--color-aiero-purple-start: #8258C8;
|
||||
--color-aiero-purple-mid: #6766C8;
|
||||
--color-aiero-purple-end: #2C84C8;
|
||||
--color-aiero-card-purple: #343F78;
|
||||
--color-aiero-card-purple-2: #56619E;
|
||||
--color-aiero-card-lavender: #AC8DE0;
|
||||
--color-aiero-text-muted: #87899B;
|
||||
|
||||
--font-sans: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-sora: var(--font-sora), sans-serif;
|
||||
--font-dm-sans: var(--font-dm-sans), sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
/* ── Base resets ── */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: #ffffff;
|
||||
color: #1F1F1F;
|
||||
font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* ── Aiero button base ── */
|
||||
.aiero-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: var(--font-sora), sans-serif;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aiero-button .button-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Solid variant */
|
||||
.aiero-button-solid {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
/* Gradient border variant */
|
||||
.aiero-button-gradient-border {
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1.5px;
|
||||
background: linear-gradient(
|
||||
var(--button-border-gradient-angle),
|
||||
var(--aiero-accent-teal) var(--button-gradient-colorstop-1),
|
||||
var(--aiero-accent-blue) var(--button-gradient-colorstop-2)
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border .button-inner::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border .button-inner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
var(--button-border-gradient-angle),
|
||||
var(--aiero-accent-teal) var(--button-gradient-colorstop-1),
|
||||
var(--aiero-accent-blue) var(--button-gradient-colorstop-2)
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border:hover .button-inner::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border:hover {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* Gradient fill variant */
|
||||
.aiero-button-gradient-fill {
|
||||
background: linear-gradient(
|
||||
var(--button-border-gradient-angle),
|
||||
var(--aiero-accent-teal) var(--button-gradient-colorstop-1),
|
||||
var(--aiero-accent-blue) var(--button-gradient-colorstop-2)
|
||||
);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-fill::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1.5px;
|
||||
background: linear-gradient(
|
||||
var(--button-border-gradient-angle),
|
||||
var(--aiero-accent-teal) var(--button-gradient-colorstop-1),
|
||||
var(--aiero-accent-blue) var(--button-gradient-colorstop-2)
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* ── Gradient text ── */
|
||||
.gradient-text-purple {
|
||||
background: linear-gradient(103deg, #8258C8 0%, #2C84C8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.gradient-text-counter {
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ── Icon decoration (curved corners) ── */
|
||||
.icon-decoration {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-decoration .icon-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.icon-decoration::before,
|
||||
.icon-decoration::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ── Marquee animation ── */
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-marquee {
|
||||
animation: marquee 15s linear infinite;
|
||||
}
|
||||
|
||||
/* ── Counter animation ── */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Aiero heading animation ── */
|
||||
@keyframes headingReveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-heading-reveal {
|
||||
animation: headingReveal 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* ── Scroll down button decoration ── */
|
||||
.scroll-btn-decoration {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll-btn-decoration::before,
|
||||
.scroll-btn-decoration::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.scroll-btn-decoration::before {
|
||||
top: -20px;
|
||||
left: 0;
|
||||
border-bottom-left-radius: 20px;
|
||||
box-shadow: 0 20px 0 0 #ffffff;
|
||||
}
|
||||
|
||||
.scroll-btn-decoration::after {
|
||||
bottom: -20px;
|
||||
left: 0;
|
||||
border-top-left-radius: 20px;
|
||||
box-shadow: 0 -20px 0 0 #ffffff;
|
||||
}
|
||||
|
||||
/* ── Subheading tag ── */
|
||||
.aiero-subheading {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: var(--font-sora), sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aiero-subheading::before {
|
||||
content: "";
|
||||
width: 30px;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user