Update app/globals.css
This commit is contained in:
parent
f35ebd8f85
commit
96468328dd
|
|
@ -0,0 +1,366 @@
|
|||
/* CSS Custom Properties for design system */
|
||||
:root {
|
||||
/* Aceternity custom properties */
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif;
|
||||
--radius: 0.625rem;
|
||||
|
||||
/* Primary brand colors - Golden theme */
|
||||
--color-primary: #f59e0b;
|
||||
|
||||
/* Neutral colors for Aceternity components */
|
||||
--color-neutral-50: rgb(250 250 250);
|
||||
--color-neutral-100: rgb(245 245 245);
|
||||
--color-neutral-200: rgb(229 229 229);
|
||||
--color-neutral-300: rgb(212 212 212);
|
||||
--color-neutral-400: rgb(163 163 163);
|
||||
--color-neutral-500: rgb(115 115 115);
|
||||
--color-neutral-600: rgb(82 82 82);
|
||||
--color-neutral-700: rgb(64 64 64);
|
||||
--color-neutral-800: rgb(38 38 38);
|
||||
--color-neutral-900: rgb(23 23 23);
|
||||
|
||||
/* Muted colors using CSS variables */
|
||||
--color-muted: var(--color-neutral-600);
|
||||
--color-muted-dark: var(--color-neutral-300);
|
||||
|
||||
/* shadcn/ui design system colors - Golden theme */
|
||||
--color-background: hsl(0 0% 100%);
|
||||
--color-foreground: hsl(240 10% 3.9%);
|
||||
--color-card: hsl(0 0% 100%);
|
||||
--color-card-foreground: hsl(240 10% 3.9%);
|
||||
--color-popover: hsl(0 0% 100%);
|
||||
--color-popover-foreground: hsl(240 10% 3.9%);
|
||||
--color-primary-foreground: hsl(0 0% 98%);
|
||||
--color-secondary: hsl(45 93% 47%);
|
||||
--color-secondary-foreground: hsl(0 0% 0%);
|
||||
--color-accent: hsl(43 96% 56%);
|
||||
--color-accent-foreground: hsl(0 0% 0%);
|
||||
--color-destructive: hsl(0 84.2% 60.2%);
|
||||
--color-destructive-foreground: hsl(0 0% 98%);
|
||||
--color-border: hsl(240 5.9% 90%);
|
||||
--color-input: hsl(240 5.9% 90%);
|
||||
--color-ring: hsl(43 96% 56%);
|
||||
|
||||
/* Custom animations for Aceternity */
|
||||
--animation-duration: 40s;
|
||||
--marquee-duration: 20s;
|
||||
|
||||
/* Next.js gradient variables */
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 255, 251, 235;
|
||||
--background-end-rgb: 254, 243, 199;
|
||||
}
|
||||
|
||||
/* Base styles for elements - Light mode by default */
|
||||
* {
|
||||
border-color: hsl(240 5.9% 90%);
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fed7aa 100%);
|
||||
color: hsl(240 10% 3.9%);
|
||||
direction: rtl;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
/* Custom utility classes compatible with Tailwind CDN */
|
||||
.container {
|
||||
margin-inline: auto;
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
|
||||
.bg-gradient-radial {
|
||||
background-image: radial-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-conic {
|
||||
background-image: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
var(--tw-gradient-stops)
|
||||
);
|
||||
}
|
||||
|
||||
.shadow-derek {
|
||||
box-shadow:
|
||||
0px 0px 0px 1px rgb(0 0 0 / 0.06),
|
||||
0px 1px 1px -0.5px rgb(0 0 0 / 0.06),
|
||||
0px 3px 3px -1.5px rgb(0 0 0 / 0.06),
|
||||
0px 6px 6px -3px rgb(0 0 0 / 0.06),
|
||||
0px 12px 12px -6px rgb(0 0 0 / 0.06),
|
||||
0px 24px 24px -12px rgb(0 0 0 / 0.06);
|
||||
}
|
||||
|
||||
.shadow-aceternity {
|
||||
box-shadow:
|
||||
0px 2px 3px -1px rgba(0, 0, 0, 0.1),
|
||||
0px 1px 0px 0px rgba(25, 28, 33, 0.02),
|
||||
0px 0px 0px 1px rgba(25, 28, 33, 0.08);
|
||||
}
|
||||
|
||||
.animate-scroll {
|
||||
animation: scroll var(--animation-duration, 40s)
|
||||
var(--animation-direction, forwards) linear infinite;
|
||||
}
|
||||
|
||||
.animate-marquee {
|
||||
animation: marquee var(--marquee-duration) linear infinite;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.5s linear forwards;
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
to {
|
||||
transform: translate(calc(-50% - 0.5rem));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-padding-top: 80px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* Prose styles for blog content (replaces @tailwindcss/typography) */
|
||||
.prose {
|
||||
color: hsl(240 10% 3.9%);
|
||||
max-width: 65ch;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.prose :where(p):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.prose :where(h1):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(240 10% 3.9%);
|
||||
font-weight: 800;
|
||||
font-size: 2.25em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8888889em;
|
||||
line-height: 1.1111111;
|
||||
}
|
||||
|
||||
.prose :where(h2):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(240 10% 3.9%);
|
||||
font-weight: 700;
|
||||
font-size: 1.5em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.3333333;
|
||||
}
|
||||
|
||||
.prose :where(h3):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(240 10% 3.9%);
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.prose :where(h4):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(240 10% 3.9%);
|
||||
font-weight: 600;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prose :where(a):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(221 83% 53%);
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prose :where(a):hover:not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(221 83% 45%);
|
||||
}
|
||||
|
||||
.prose :where(strong):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(240 10% 3.9%);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose :where(ul):not(:where([class~="not-prose"] *)) {
|
||||
list-style-type: disc;
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
padding-left: 1.625em;
|
||||
}
|
||||
|
||||
.prose :where(ol):not(:where([class~="not-prose"] *)) {
|
||||
list-style-type: decimal;
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
padding-left: 1.625em;
|
||||
}
|
||||
|
||||
.prose :where(li):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
|
||||
padding-left: 0.375em;
|
||||
}
|
||||
|
||||
.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
|
||||
padding-left: 0.375em;
|
||||
}
|
||||
|
||||
.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: hsl(240 6% 10%);
|
||||
border-left-width: 0.25rem;
|
||||
border-left-color: hsl(240 5.9% 90%);
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 1.6em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.prose :where(img):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.prose :where(figure):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.prose :where(table):not(:where([class~="not-prose"] *)) {
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
text-align: left;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.7142857;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.prose :where(thead):not(:where([class~="not-prose"] *)) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: hsl(240 5.9% 90%);
|
||||
}
|
||||
|
||||
.prose :where(thead th):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(240 10% 3.9%);
|
||||
font-weight: 600;
|
||||
vertical-align: bottom;
|
||||
padding-right: 0.5714286em;
|
||||
padding-bottom: 0.5714286em;
|
||||
padding-left: 0.5714286em;
|
||||
}
|
||||
|
||||
.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: hsl(240 5.9% 90%);
|
||||
}
|
||||
|
||||
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
|
||||
vertical-align: baseline;
|
||||
padding: 0.5714286em;
|
||||
}
|
||||
|
||||
.prose :where(code):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(240 10% 3.9%);
|
||||
font-weight: 600;
|
||||
font-size: 0.875em;
|
||||
background-color: hsl(240 4.8% 95.9%);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.prose :where(pre):not(:where([class~="not-prose"] *)) {
|
||||
color: hsl(0 0% 98%);
|
||||
background-color: hsl(240 10% 3.9%);
|
||||
overflow-x: auto;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.7142857;
|
||||
margin-top: 1.7142857em;
|
||||
margin-bottom: 1.7142857em;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.8571429em 1.1428571em;
|
||||
}
|
||||
|
||||
.prose :where(pre code):not(:where([class~="not-prose"] *)) {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* Prose size variants */
|
||||
.prose-lg {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.prose-xl {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Golden theme custom classes */
|
||||
.golden-gradient {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
|
||||
}
|
||||
|
||||
.golden-text {
|
||||
background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.golden-border {
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(135deg, #f59e0b, #d97706, #b45309) 1;
|
||||
}
|
||||
|
||||
.golden-shadow {
|
||||
box-shadow: 0 10px 40px rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
.golden-glow {
|
||||
box-shadow: 0 0 30px rgba(245, 158, 11, 0.5), 0 0 60px rgba(217, 119, 6, 0.3);
|
||||
}
|
||||
Loading…
Reference in New Issue