continue re-design
This commit is contained in:
Developers Digest
@@ -0,0 +1,58 @@
|
||||
.form-input:focus,
|
||||
.form-textarea:focus,
|
||||
.form-multiselect:focus,
|
||||
.form-select:focus,
|
||||
.form-checkbox:focus,
|
||||
.form-radio:focus {
|
||||
@apply ring-0;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* Typography */
|
||||
.h1 {
|
||||
@apply text-5xl font-bold;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
@apply text-4xl font-bold;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
@apply text-3xl font-bold;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
@apply text-2xl font-bold;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.h1 {
|
||||
@apply text-6xl;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
@apply text-5xl;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn,
|
||||
.btn-sm {
|
||||
@apply text-sm font-medium inline-flex items-center justify-center border border-transparent rounded-md tracking-normal transition;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply px-4 py-2;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply px-2 py-1;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
@apply bg-white border border-zinc-200 focus:border-zinc-400 shadow shadow-black/5;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-textarea,
|
||||
.form-multiselect,
|
||||
.form-select,
|
||||
.form-checkbox {
|
||||
@apply rounded;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-textarea,
|
||||
.form-multiselect,
|
||||
.form-select {
|
||||
@apply text-zinc-600 text-sm px-4 py-2;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-textarea {
|
||||
@apply placeholder-zinc-400;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@apply pr-10;
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio {
|
||||
@apply text-zinc-800;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
@apply rounded-sm;
|
||||
}
|
||||
|
||||
/* Fix input cursor visibility on Windows Chrome */
|
||||
input,
|
||||
textarea {
|
||||
caret-color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
/* Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Chrome has a bug with transitions on load since 2012!
|
||||
*
|
||||
* To prevent a "pop" of content, you have to disable all transitions until
|
||||
* the page is done loading.
|
||||
*
|
||||
* https://lab.laukstein.com/bug/input
|
||||
* https://twitter.com/timer150/status/1345217126680899584
|
||||
*/
|
||||
body.loading * {
|
||||
transition: none !important;
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
{
|
||||
"heat-4": {
|
||||
"hex": "fa5d190a",
|
||||
"p3": "0.980392 0.364706 0.098039 / 0.039216"
|
||||
},
|
||||
"heat-8": {
|
||||
"hex": "fa5d1914",
|
||||
"p3": "0.980392 0.364706 0.098039 / 0.078431"
|
||||
},
|
||||
"heat-12": {
|
||||
"hex": "fa5d191f",
|
||||
"p3": "0.980392 0.364706 0.098039 / 0.121569"
|
||||
},
|
||||
"heat-16": {
|
||||
"hex": "fa5d1929",
|
||||
"p3": "0.980392 0.364706 0.098039 / 0.160784"
|
||||
},
|
||||
"heat-20": {
|
||||
"hex": "fa5d1933",
|
||||
"p3": "0.980392 0.364706 0.098039 / 0.200000"
|
||||
},
|
||||
"heat-40": {
|
||||
"hex": "fa5d1966",
|
||||
"p3": "0.980392 0.364706 0.098039 / 0.400000"
|
||||
},
|
||||
"heat-90": {
|
||||
"hex": "fa5d19e6",
|
||||
"p3": "0.980392 0.364706 0.098039 / 0.900000"
|
||||
},
|
||||
"heat-100": {
|
||||
"hex": "fa5d19ff",
|
||||
"p3": "0.980392 0.364706 0.098039 / 1.000000"
|
||||
},
|
||||
"accent-black": {
|
||||
"hex": "262626ff",
|
||||
"p3": "0.149020 0.149020 0.149020 / 1.000000"
|
||||
},
|
||||
"accent-white": {
|
||||
"hex": "ffffffff",
|
||||
"p3": "1.000000 1.000000 1.000000 / 1.000000"
|
||||
},
|
||||
"accent-amethyst": {
|
||||
"hex": "9061ffff",
|
||||
"p3": "0.564706 0.380392 1.000000 / 1.000000"
|
||||
},
|
||||
"accent-bluetron": {
|
||||
"hex": "2a6dfbff",
|
||||
"p3": "0.164706 0.427451 0.984314 / 1.000000"
|
||||
},
|
||||
"accent-crimson": {
|
||||
"hex": "eb3424ff",
|
||||
"p3": "0.921569 0.203922 0.141176 / 1.000000"
|
||||
},
|
||||
"accent-forest": {
|
||||
"hex": "42c366ff",
|
||||
"p3": "0.258824 0.764706 0.400000 / 1.000000"
|
||||
},
|
||||
"accent-honey": {
|
||||
"hex": "ecb730ff",
|
||||
"p3": "0.925490 0.717647 0.188235 / 1.000000"
|
||||
},
|
||||
"black-alpha-1": {
|
||||
"hex": "00000003",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.011765"
|
||||
},
|
||||
"black-alpha-2": {
|
||||
"hex": "00000005",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.019608"
|
||||
},
|
||||
"black-alpha-3": {
|
||||
"hex": "00000008",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.031373"
|
||||
},
|
||||
"black-alpha-4": {
|
||||
"hex": "0000000a",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.039216"
|
||||
},
|
||||
"black-alpha-5": {
|
||||
"hex": "0000000d",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.050980"
|
||||
},
|
||||
"black-alpha-6": {
|
||||
"hex": "0000000f",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.058824"
|
||||
},
|
||||
"black-alpha-7": {
|
||||
"hex": "00000012",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.070588"
|
||||
},
|
||||
"black-alpha-8": {
|
||||
"hex": "00000014",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.078431"
|
||||
},
|
||||
"black-alpha-10": {
|
||||
"hex": "0000001a",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.101961"
|
||||
},
|
||||
"black-alpha-12": {
|
||||
"hex": "0000001f",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.121569"
|
||||
},
|
||||
"black-alpha-16": {
|
||||
"hex": "00000029",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.160784"
|
||||
},
|
||||
"black-alpha-20": {
|
||||
"hex": "00000033",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.200000"
|
||||
},
|
||||
"black-alpha-24": {
|
||||
"hex": "0000003d",
|
||||
"p3": "0.000000 0.000000 0.000000 / 0.239216"
|
||||
},
|
||||
"black-alpha-32": {
|
||||
"hex": "26262652",
|
||||
"p3": "0.149020 0.149020 0.149020 / 0.321569"
|
||||
},
|
||||
"black-alpha-40": {
|
||||
"hex": "26262666",
|
||||
"p3": "0.149020 0.149020 0.149020 / 0.400000"
|
||||
},
|
||||
"black-alpha-48": {
|
||||
"hex": "2626267a",
|
||||
"p3": "0.149020 0.149020 0.149020 / 0.478431"
|
||||
},
|
||||
"black-alpha-56": {
|
||||
"hex": "2626268f",
|
||||
"p3": "0.149020 0.149020 0.149020 / 0.560784"
|
||||
},
|
||||
"black-alpha-64": {
|
||||
"hex": "262626a3",
|
||||
"p3": "0.149020 0.149020 0.149020 / 0.639216"
|
||||
},
|
||||
"black-alpha-72": {
|
||||
"hex": "262626b8",
|
||||
"p3": "0.149020 0.149020 0.149020 / 0.721569"
|
||||
},
|
||||
"black-alpha-88": {
|
||||
"hex": "262626e0",
|
||||
"p3": "0.149020 0.149020 0.149020 / 0.878431"
|
||||
},
|
||||
"white-alpha-56": {
|
||||
"hex": "ffffff8f",
|
||||
"p3": "1.000000 1.000000 1.000000 / 0.560784"
|
||||
},
|
||||
"white-alpha-72": {
|
||||
"hex": "ffffffb8",
|
||||
"p3": "1.000000 1.000000 1.000000 / 0.721569"
|
||||
},
|
||||
"border-faint": {
|
||||
"hex": "edededff",
|
||||
"p3": "0.929412 0.929412 0.929412 / 1.000000"
|
||||
},
|
||||
"border-muted": {
|
||||
"hex": "e8e8e8ff",
|
||||
"p3": "0.909804 0.909804 0.909804 / 1.000000"
|
||||
},
|
||||
"border-loud": {
|
||||
"hex": "e6e6e6ff",
|
||||
"p3": "0.901961 0.901961 0.901961 / 1.000000"
|
||||
},
|
||||
"illustrations-faint": {
|
||||
"hex": "edededff",
|
||||
"p3": "0.929412 0.929412 0.929412 / 1.000000"
|
||||
},
|
||||
"illustrations-muted": {
|
||||
"hex": "e6e6e6ff",
|
||||
"p3": "0.901961 0.901961 0.901961 / 1.000000"
|
||||
},
|
||||
"illustrations-default": {
|
||||
"hex": "dbdbdbff",
|
||||
"p3": "0.858824 0.858824 0.858824 / 1.000000"
|
||||
},
|
||||
"background-lighter": {
|
||||
"hex": "fbfbfbff",
|
||||
"p3": "0.984314 0.984314 0.984314 / 1.000000"
|
||||
},
|
||||
"background-base": {
|
||||
"hex": "f9f9f9ff",
|
||||
"p3": "0.976471 0.976471 0.976471 / 1.000000"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
# Component Styles Rules
|
||||
|
||||
When working with component-specific CSS in styles/components:
|
||||
|
||||
## Architecture
|
||||
Each component that requires custom CSS has a corresponding file:
|
||||
- `button.css` - Fire-inspired button shadows and effects
|
||||
- `modal.css` - Modal animations and backdrop effects
|
||||
- `spinner.css` - Custom loading animations
|
||||
|
||||
## Import Strategy
|
||||
All component CSS files are imported in `styles/main.css`:
|
||||
```css
|
||||
/* Component styles */
|
||||
@import "./components/button.css";
|
||||
@import "./components/modal.css";
|
||||
@import "./components/spinner.css";
|
||||
```
|
||||
|
||||
## Guidelines
|
||||
1. **Only create CSS files for components that need them** - If Tailwind utilities suffice, don't create a CSS file
|
||||
2. **Use P3 colors with sRGB fallbacks** - Ensure wide gamut displays get enhanced colors
|
||||
3. **Keep animations performant** - Use transform and opacity for animations
|
||||
4. **Component classes should be prefixed** - e.g., `.button-primary`, `.modal-backdrop`
|
||||
|
||||
## P3 Color Example
|
||||
```css
|
||||
.button-primary {
|
||||
background: #fa5d19; /* sRGB fallback */
|
||||
background: color(display-p3 0.9816 0.3634 0.0984); /* P3 color */
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,72 @@
|
||||
.button {
|
||||
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
scale 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
box-shadow 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
scale 0.05s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
box-shadow 0.05s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: #ff4c00;
|
||||
background: color(display-p3 0.9816 0.3634 0.0984);
|
||||
|
||||
box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
|
||||
0px 2px 4px 0px rgba(255, 77, 0, 0.12),
|
||||
0px 1px 1px 0px rgba(255, 77, 0, 0.12),
|
||||
0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
|
||||
0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
|
||||
|
||||
box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
|
||||
0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
|
||||
0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
|
||||
0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
|
||||
0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
|
||||
0px 4px 8px 0px rgba(255, 77, 0, 0.16),
|
||||
0px 1px 1px 0px rgba(255, 77, 0, 0.12),
|
||||
0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
|
||||
0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
|
||||
box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
|
||||
0px 4px 8px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
|
||||
0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
|
||||
0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
|
||||
0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
|
||||
}
|
||||
|
||||
.button-primary:active {
|
||||
box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
|
||||
0px 2px 4px 0px rgba(255, 77, 0, 0.12),
|
||||
0px 1px 1px 0px rgba(255, 77, 0, 0.12),
|
||||
0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
|
||||
0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
|
||||
box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
|
||||
0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
|
||||
0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
|
||||
0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
|
||||
0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
|
||||
}
|
||||
|
||||
.button-background {
|
||||
background: linear-gradient(to bottom, white, transparent);
|
||||
|
||||
opacity: 0.06;
|
||||
|
||||
transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.button:hover .button-background {
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.button:active .button-background {
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 0.05s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.string,
|
||||
.language-html .tag:not(.punctuation, .attr-name, .attr-value, .special-attr) {
|
||||
color: var(--heat-100) !important;
|
||||
}
|
||||
|
||||
.punctuation,
|
||||
.operator {
|
||||
color: #c2c2c2 !important;
|
||||
}
|
||||
|
||||
.language-html .attr-name {
|
||||
color: var(--black-alpha-64);
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #999999 !important;
|
||||
}
|
||||
|
||||
code:not(.language-html) .property:not(.literal-property),
|
||||
.class-name,
|
||||
code:not(.language-html) .function,
|
||||
.language-json .boolean {
|
||||
color: #9061ff;
|
||||
color: color(display-p3 0.566 0.38 1);
|
||||
}
|
||||
|
||||
.language-json .property {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.prismjs {
|
||||
padding-top: 20px;
|
||||
@apply text-mono-medium font-mono;
|
||||
}
|
||||
|
||||
.prismjs code {
|
||||
color: var(--accent-black) !important;
|
||||
}
|
||||
|
||||
.linenumber {
|
||||
width: 48px;
|
||||
padding: 0;
|
||||
font-style: normal;
|
||||
@apply !text-black-alpha-12 !pl-20 !pr-0 !text-left;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/* Component-specific styles from firecrawl-marketing */
|
||||
|
||||
/* UI Components (for Dashboard v2) */
|
||||
@import "./button.css";
|
||||
@import "./code.css";
|
||||
|
||||
/* Additional component CSS will be added as we migrate more components */
|
||||
/* @import "./modal.css"; */
|
||||
/* @import "./spinner.css"; */
|
||||
/* @import "./input.css"; */
|
||||
@@ -0,0 +1,81 @@
|
||||
# Firecrawl Design System Rules
|
||||
|
||||
When working with the fire-inspired design system:
|
||||
|
||||
## Important Note
|
||||
- For existing pages: Continue using `styles/main.css`
|
||||
- For Dashboard v2 pages: Import `styles/dashboard.css` in the layout
|
||||
|
||||
## Color System
|
||||
Use CSS custom properties with P3 color space for richer colors:
|
||||
- **Heat colors**: `--heat-4` through `--heat-100` (fire orange shades)
|
||||
- **Accent colors**: `--accent-black`, `--accent-amethyst`, `--accent-bluetron`, `--accent-crimson`
|
||||
- **Alpha variants**: Black and white with various opacity levels
|
||||
- **UI colors**: Borders, backgrounds, illustrations
|
||||
- All colors have sRGB fallbacks for browser compatibility
|
||||
|
||||
## Typography
|
||||
**Font Families:**
|
||||
- Display: SuisseIntl (weights: 400, 450, 500, 600, 700)
|
||||
- Mono: System monospace stack (SF Mono, Monaco, Inconsolata, etc.)
|
||||
|
||||
**Type Scale Classes:**
|
||||
- Headings: `.title-h1` through `.title-h5`
|
||||
- Body: `.body-small`, `.body-medium`, `.body-large`, `.body-x-large`
|
||||
- Labels: `.label-small`, `.label-medium`, `.label-large`, `.label-x-large`
|
||||
- Mono: `.mono-small`, `.mono-medium`, `.mono-large`
|
||||
|
||||
## Utilities
|
||||
**Gradients:**
|
||||
- `.gradient-fire` - Heat gradient
|
||||
- `.gradient-heat` - Subtle heat gradient
|
||||
- `.gradient-sunset` - Heat to amethyst
|
||||
- `.gradient-ocean` - Blue gradient
|
||||
|
||||
**Layout:**
|
||||
- `.container-prose` - Max 65ch width
|
||||
- `.center-absolute` - Absolute centering
|
||||
- `.stack-*` - Vertical spacing
|
||||
- `.layout-sidebar` - Sidebar layout pattern
|
||||
|
||||
**Effects:**
|
||||
- `.blur-backdrop` - Backdrop blur
|
||||
- `.border-gradient` - Gradient border
|
||||
- `.mask-fade-*` - Fade masks
|
||||
- `.focus-ring` - Accessible focus states
|
||||
- `.dotted-underline` - SVG dotted underline
|
||||
|
||||
## Animation Classes
|
||||
- `.cursor` - Blinking cursor
|
||||
- `.animate-spin-reverse` - Reverse rotation
|
||||
- `.animate-flicker` - Fire flicker effect
|
||||
- `.animate-glow` - Glowing effect
|
||||
- `.transition-*` - Smooth transitions
|
||||
|
||||
## Usage Example
|
||||
```css
|
||||
.fire-button {
|
||||
background: var(--heat-100);
|
||||
color: var(--white);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fire-button:hover {
|
||||
background: var(--accent-crimson);
|
||||
box-shadow: 0 0 40px rgba(250, 93, 25, 0.8);
|
||||
}
|
||||
```
|
||||
|
||||
## Component CSS Architecture
|
||||
Component-specific styles go in `styles/components/`:
|
||||
- Button.css - Fire-inspired button styles
|
||||
- Input.css - Input with heat focus states
|
||||
- Modal.css - Modal with fire animations
|
||||
|
||||
## Build Optimization
|
||||
- PostCSS handles optimization
|
||||
- Tailwind v3 purging via content paths in tailwind.config.js
|
||||
- P3 color space with automatic sRGB fallbacks
|
||||
- Font preloading for performance
|
||||
@@ -0,0 +1,92 @@
|
||||
/* Animation Utilities */
|
||||
|
||||
/* Cursor blink animation */
|
||||
.cursor {
|
||||
animation: cursor-blink 0.7s infinite;
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reverse spin */
|
||||
.animate-spin-reverse {
|
||||
animation: spin-reverse 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin-reverse {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fire-inspired animations */
|
||||
.animate-flicker {
|
||||
animation: flicker 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-glow {
|
||||
animation: glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(250, 93, 25, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(250, 93, 25, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
.transition-all {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* Animation delays */
|
||||
.delay-100 {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
.delay-200 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
.delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.delay-400 {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
|
||||
.delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/* Body and Global Styles */
|
||||
|
||||
/* Hide scrollbars but keep functionality */
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover,
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: var(--black-alpha-12);
|
||||
}
|
||||
|
||||
/* Global text rendering */
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Body defaults */
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--accent-black);
|
||||
background-color: var(--background-base);
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
/* Prevent image dragging */
|
||||
img,
|
||||
video {
|
||||
max-width: unset;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
input,
|
||||
input:focus,
|
||||
textarea,
|
||||
textarea:focus,
|
||||
select,
|
||||
select:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Focus states handled by utilities */
|
||||
*:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section defaults */
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Text selection */
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/* Button defaults */
|
||||
button {
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Selection color using design system colors */
|
||||
*::selection {
|
||||
background-color: var(--heat-20);
|
||||
color: var(--accent-black);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--heat-100);
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875em;
|
||||
background-color: var(--black-alpha-4);
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Prevent FOUC */
|
||||
html {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Responsive text sizing */
|
||||
@media (max-width: 768px) {
|
||||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
html {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
/* Layout Utilities and Helpers */
|
||||
|
||||
/* Container system */
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-padding, 1rem);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
max-width: 640px;
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout patterns */
|
||||
.layout-grid {
|
||||
display: grid;
|
||||
gap: var(--gap, 1rem);
|
||||
}
|
||||
|
||||
.layout-flex {
|
||||
display: flex;
|
||||
gap: var(--gap, 1rem);
|
||||
}
|
||||
|
||||
/* Common grid patterns */
|
||||
.grid-cols-auto-fit {
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 250px), 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-auto-fill {
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--min-width, 250px), 1fr));
|
||||
}
|
||||
|
||||
/* Sidebar layouts */
|
||||
.layout-sidebar {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width, 260px) 1fr;
|
||||
gap: var(--gap, 2rem);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.layout-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stack layouts */
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap, 1rem);
|
||||
}
|
||||
|
||||
.stack-horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--gap, 1rem);
|
||||
}
|
||||
|
||||
/* Cluster layout */
|
||||
.cluster {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap, 1rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Center layout */
|
||||
.center {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: var(--min-height, 100vh);
|
||||
}
|
||||
|
||||
/* Cover layout */
|
||||
.cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: var(--min-height, 100vh);
|
||||
}
|
||||
|
||||
.cover > * {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
.cover > :first-child:not(.centered) {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.cover > :last-child:not(.centered) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.cover > .centered {
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
/* Switcher layout (switches from horizontal to vertical) */
|
||||
.switcher {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap, 1rem);
|
||||
}
|
||||
|
||||
.switcher > * {
|
||||
flex-grow: 1;
|
||||
flex-basis: calc((var(--threshold, 30rem) - 100%) * 999);
|
||||
}
|
||||
|
||||
/* Frame layout (for aspect ratios) */
|
||||
.frame {
|
||||
aspect-ratio: var(--ratio, 16 / 9);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.frame > img,
|
||||
.frame > video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Reel layout (horizontal scroll) */
|
||||
.reel {
|
||||
display: flex;
|
||||
gap: var(--gap, 1rem);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.reel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reel > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Full bleed */
|
||||
.full-bleed {
|
||||
width: 100vw;
|
||||
margin-inline: calc(50% - 50vw);
|
||||
}
|
||||
|
||||
/* Visually hidden but accessible */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* Skip to content link */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 999;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--accent-black);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
border-radius: 0.25rem;
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/* Modern CSS Reset */
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Set core root defaults */
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reset button styles */
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-align: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Text area */
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Remove default focus styles and add custom ones */
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--heat-100);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Prevent iOS zoom on form focus */
|
||||
@media (hover: none) {
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
textarea,
|
||||
select {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
/* Fire Design System Colors */
|
||||
/* Define sRGB values first for maximum compatibility */
|
||||
:root {
|
||||
/* Base colors */
|
||||
--white: #ffffff;
|
||||
--black: #000000;
|
||||
|
||||
/* Fire-inspired heat colors */
|
||||
--heat-4: rgba(250, 93, 25, 0.039);
|
||||
--heat-8: rgba(250, 93, 25, 0.078);
|
||||
--heat-12: rgba(250, 93, 25, 0.122);
|
||||
--heat-16: rgba(250, 93, 25, 0.161);
|
||||
--heat-20: rgba(250, 93, 25, 0.200);
|
||||
--heat-40: rgba(250, 93, 25, 0.400);
|
||||
--heat-100: #fa5d19;
|
||||
--heat-200: #ff6600;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-black: #262626;
|
||||
--accent-white: #ffffff;
|
||||
--accent-amethyst: #9061ff;
|
||||
--accent-bluetron: #2a6dfb;
|
||||
--accent-crimson: #eb3424;
|
||||
|
||||
/* Black alpha variants */
|
||||
--black-alpha-1: rgba(0, 0, 0, 0.012);
|
||||
--black-alpha-2: rgba(0, 0, 0, 0.020);
|
||||
--black-alpha-3: rgba(0, 0, 0, 0.031);
|
||||
--black-alpha-4: rgba(0, 0, 0, 0.039);
|
||||
--black-alpha-5: rgba(0, 0, 0, 0.051);
|
||||
--black-alpha-6: rgba(0, 0, 0, 0.059);
|
||||
--black-alpha-7: rgba(0, 0, 0, 0.071);
|
||||
--black-alpha-8: rgba(0, 0, 0, 0.078);
|
||||
--black-alpha-10: rgba(0, 0, 0, 0.102);
|
||||
--black-alpha-12: rgba(0, 0, 0, 0.122);
|
||||
--black-alpha-16: rgba(0, 0, 0, 0.161);
|
||||
--black-alpha-20: rgba(0, 0, 0, 0.200);
|
||||
--black-alpha-24: rgba(0, 0, 0, 0.239);
|
||||
--black-alpha-32: rgba(38, 38, 38, 0.322);
|
||||
--black-alpha-40: rgba(38, 38, 38, 0.400);
|
||||
--black-alpha-48: rgba(38, 38, 38, 0.478);
|
||||
--black-alpha-56: rgba(38, 38, 38, 0.561);
|
||||
--black-alpha-64: rgba(38, 38, 38, 0.639);
|
||||
--black-alpha-72: rgba(38, 38, 38, 0.722);
|
||||
--black-alpha-88: rgba(38, 38, 38, 0.878);
|
||||
|
||||
/* White alpha variants */
|
||||
--white-alpha-56: rgba(255, 255, 255, 0.561);
|
||||
--white-alpha-72: rgba(255, 255, 255, 0.722);
|
||||
|
||||
/* Border colors */
|
||||
--border-faint: #ededed;
|
||||
--border-muted: #e8e8e8;
|
||||
--border-loud: #e6e6e6;
|
||||
|
||||
/* Illustration colors */
|
||||
--illustrations-faint: #ededed;
|
||||
--illustrations-muted: #e6e6e6;
|
||||
--illustrations-default: #dbdbdb;
|
||||
|
||||
/* Background colors */
|
||||
--background-lighter: #fbfbfb;
|
||||
--background-base: #f9f9f9;
|
||||
|
||||
/* Foreground colors */
|
||||
--foreground: #262626;
|
||||
--foreground-dimmer: rgba(38, 38, 38, 0.722);
|
||||
}
|
||||
|
||||
/* P3 color space enhancement for supported browsers */
|
||||
@supports (color: color(display-p3 1 1 1)) {
|
||||
:root {
|
||||
/* Base colors */
|
||||
--white: color(display-p3 1 1 1);
|
||||
--black: color(display-p3 0 0 0);
|
||||
|
||||
/* Fire-inspired heat colors */
|
||||
--heat-4: color(display-p3 0.980392 0.364706 0.098039 / 0.039216);
|
||||
--heat-8: color(display-p3 0.980392 0.364706 0.098039 / 0.078431);
|
||||
--heat-12: color(display-p3 0.980392 0.364706 0.098039 / 0.121569);
|
||||
--heat-16: color(display-p3 0.980392 0.364706 0.098039 / 0.160784);
|
||||
--heat-20: color(display-p3 0.980392 0.364706 0.098039 / 0.200000);
|
||||
--heat-40: color(display-p3 0.980392 0.364706 0.098039 / 0.400000);
|
||||
--heat-100: color(display-p3 0.980392 0.364706 0.098039 / 1.000000);
|
||||
--heat-200: color(display-p3 1.000000 0.400000 0.000000 / 1.000000);
|
||||
|
||||
/* Accent colors */
|
||||
--accent-black: color(display-p3 0.149020 0.149020 0.149020 / 1.000000);
|
||||
--accent-white: color(display-p3 1.000000 1.000000 1.000000 / 1.000000);
|
||||
--accent-amethyst: color(display-p3 0.564706 0.380392 1.000000 / 1.000000);
|
||||
--accent-bluetron: color(display-p3 0.164706 0.427451 0.984314 / 1.000000);
|
||||
--accent-crimson: color(display-p3 0.921569 0.203922 0.141176 / 1.000000);
|
||||
|
||||
/* Black alpha variants */
|
||||
--black-alpha-1: color(display-p3 0.000000 0.000000 0.000000 / 0.011765);
|
||||
--black-alpha-2: color(display-p3 0.000000 0.000000 0.000000 / 0.019608);
|
||||
--black-alpha-3: color(display-p3 0.000000 0.000000 0.000000 / 0.031373);
|
||||
--black-alpha-4: color(display-p3 0.000000 0.000000 0.000000 / 0.039216);
|
||||
--black-alpha-5: color(display-p3 0.000000 0.000000 0.000000 / 0.050980);
|
||||
--black-alpha-6: color(display-p3 0.000000 0.000000 0.000000 / 0.058824);
|
||||
--black-alpha-7: color(display-p3 0.000000 0.000000 0.000000 / 0.070588);
|
||||
--black-alpha-8: color(display-p3 0.000000 0.000000 0.000000 / 0.078431);
|
||||
--black-alpha-10: color(display-p3 0.000000 0.000000 0.000000 / 0.101961);
|
||||
--black-alpha-12: color(display-p3 0.000000 0.000000 0.000000 / 0.121569);
|
||||
--black-alpha-16: color(display-p3 0.000000 0.000000 0.000000 / 0.160784);
|
||||
--black-alpha-20: color(display-p3 0.000000 0.000000 0.000000 / 0.200000);
|
||||
--black-alpha-24: color(display-p3 0.000000 0.000000 0.000000 / 0.239216);
|
||||
--black-alpha-32: color(display-p3 0.149020 0.149020 0.149020 / 0.321569);
|
||||
--black-alpha-40: color(display-p3 0.149020 0.149020 0.149020 / 0.400000);
|
||||
--black-alpha-48: color(display-p3 0.149020 0.149020 0.149020 / 0.478431);
|
||||
--black-alpha-56: color(display-p3 0.149020 0.149020 0.149020 / 0.560784);
|
||||
--black-alpha-64: color(display-p3 0.149020 0.149020 0.149020 / 0.639216);
|
||||
--black-alpha-72: color(display-p3 0.149020 0.149020 0.149020 / 0.721569);
|
||||
--black-alpha-88: color(display-p3 0.149020 0.149020 0.149020 / 0.878431);
|
||||
|
||||
/* White alpha variants */
|
||||
--white-alpha-56: color(display-p3 1.000000 1.000000 1.000000 / 0.560784);
|
||||
--white-alpha-72: color(display-p3 1.000000 1.000000 1.000000 / 0.721569);
|
||||
|
||||
/* Border colors */
|
||||
--border-faint: color(display-p3 0.929412 0.929412 0.929412 / 1.000000);
|
||||
--border-muted: color(display-p3 0.909804 0.909804 0.909804 / 1.000000);
|
||||
--border-loud: color(display-p3 0.901961 0.901961 0.901961 / 1.000000);
|
||||
|
||||
/* Illustration colors */
|
||||
--illustrations-faint: color(display-p3 0.929412 0.929412 0.929412 / 1.000000);
|
||||
--illustrations-muted: color(display-p3 0.901961 0.901961 0.901961 / 1.000000);
|
||||
--illustrations-default: color(display-p3 0.858824 0.858824 0.858824 / 1.000000);
|
||||
|
||||
/* Background colors */
|
||||
--background-lighter: color(display-p3 0.984314 0.984314 0.984314 / 1.000000);
|
||||
--background-base: color(display-p3 0.976471 0.976471 0.976471 / 1.000000);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/* Custom Font Faces */
|
||||
/* Using Geist fonts via CSS variables from Next.js font loading */
|
||||
/* Fonts are loaded in app/layout.tsx and available as:
|
||||
- var(--font-geist-sans)
|
||||
- var(--font-geist-mono)
|
||||
- var(--font-inter)
|
||||
- var(--font-roboto-mono)
|
||||
*/
|
||||
@@ -0,0 +1,243 @@
|
||||
/* Typography System */
|
||||
|
||||
/* Font Face Declarations - matching firecrawl-marketing exactly */
|
||||
@font-face {
|
||||
font-family: 'SuisseIntl';
|
||||
src: url('/fonts/SuisseIntl/400.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SuisseIntl';
|
||||
src: url('/fonts/SuisseIntl/450.woff2') format('woff2');
|
||||
font-weight: 450;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SuisseIntl';
|
||||
src: url('/fonts/SuisseIntl/500.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SuisseIntl';
|
||||
src: url('/fonts/SuisseIntl/600.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SuisseIntl';
|
||||
src: url('/fonts/SuisseIntl/700.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Font Stack Variables */
|
||||
:root {
|
||||
--font-sans: 'SuisseIntl', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Roboto Mono', Consolas, monospace;
|
||||
}
|
||||
|
||||
/* Typography Classes - both semantic and utility variants */
|
||||
|
||||
/* Text Utilities */
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.text-pretty {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
/* Utility text classes matching firecrawl-marketing - extending base classes */
|
||||
.title-h1,
|
||||
.text-title-h1 {
|
||||
font-size: 4rem; /* 64px */
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title-h2,
|
||||
.text-title-h2 {
|
||||
font-size: 2.25rem; /* 36px */
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title-h3,
|
||||
.text-title-h3 {
|
||||
font-size: 1.875rem; /* 30px */
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title-h4,
|
||||
.text-title-h4 {
|
||||
font-size: 1.375rem; /* 22px */
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title-h5,
|
||||
.text-title-h5 {
|
||||
font-size: 1.125rem; /* 18px */
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.body-small,
|
||||
.text-body-small {
|
||||
font-size: 0.875rem; /* 14px */
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.body-medium,
|
||||
.text-body-medium {
|
||||
font-size: 1rem; /* 16px */
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.body-large,
|
||||
.text-body-large {
|
||||
font-size: 1.125rem; /* 18px */
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.body-x-large,
|
||||
.text-body-x-large {
|
||||
font-size: 1.375rem; /* 22px */
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.label-small,
|
||||
.text-label-small {
|
||||
font-size: 0.9375rem; /* 15px */
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.label-medium,
|
||||
.text-label-medium {
|
||||
font-size: 1rem; /* 16px */
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.01em;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.label-large,
|
||||
.text-label-large {
|
||||
font-size: 1.125rem; /* 18px */
|
||||
line-height: 1.4;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.label-x-large,
|
||||
.text-label-x-large {
|
||||
font-size: 1.375rem; /* 22px */
|
||||
line-height: 1.4;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.mono-small,
|
||||
.text-mono-small {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem; /* 12px */
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.mono-medium,
|
||||
.text-mono-medium {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem; /* 14px */
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.mono-large,
|
||||
.text-mono-large {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem; /* 16px */
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Responsive Typography - matching firecrawl-marketing */
|
||||
@media (max-width: 1024px) {
|
||||
.text-body-large {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.09px;
|
||||
}
|
||||
|
||||
.text-body-medium {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.16px;
|
||||
}
|
||||
|
||||
.text-title-h4 {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.22px;
|
||||
}
|
||||
|
||||
.text-body-x-large {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.11px;
|
||||
}
|
||||
|
||||
.text-label-small {
|
||||
font-size: 15px;
|
||||
font-weight: 450;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.text-label-large {
|
||||
font-size: 18px;
|
||||
font-weight: 450;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.09px;
|
||||
}
|
||||
|
||||
.text-label-x-large {
|
||||
font-size: 22px;
|
||||
font-weight: 450;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.11px;
|
||||
}
|
||||
|
||||
.text-label-medium {
|
||||
font-size: 16px;
|
||||
font-weight: 450;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.text-title-h2 {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
letter-spacing: -0.36px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
/* Custom Utility Classes */
|
||||
|
||||
/* Gradient utilities */
|
||||
.gradient-fire {
|
||||
background: linear-gradient(135deg, var(--heat-100) 0%, var(--accent-crimson) 100%);
|
||||
}
|
||||
|
||||
.gradient-heat {
|
||||
background: linear-gradient(135deg, var(--heat-20) 0%, var(--heat-100) 100%);
|
||||
}
|
||||
|
||||
.gradient-sunset {
|
||||
background: linear-gradient(135deg, var(--heat-100) 0%, var(--accent-amethyst) 100%);
|
||||
}
|
||||
|
||||
.gradient-ocean {
|
||||
background: linear-gradient(135deg, var(--accent-bluetron) 0%, var(--accent-amethyst) 100%);
|
||||
}
|
||||
|
||||
/* Text gradient */
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-color: var(--heat-100); /* Fallback */
|
||||
}
|
||||
|
||||
/* Mask utilities */
|
||||
.mask-fade-bottom {
|
||||
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
|
||||
}
|
||||
|
||||
.mask-fade-edges {
|
||||
mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
|
||||
}
|
||||
|
||||
.mask-intersect {
|
||||
-webkit-mask-composite: source-in; /* For Chrome */
|
||||
mask-composite: intersect; /* For Firefox */
|
||||
}
|
||||
|
||||
/* Blur utilities */
|
||||
.blur-backdrop {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Border utilities */
|
||||
.border-gradient {
|
||||
position: relative;
|
||||
background: var(--white);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.border-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg, var(--heat-100), var(--accent-crimson));
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask-composite: xor;
|
||||
-webkit-mask-composite: xor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Dotted underline - updated from marketing */
|
||||
.dotted-underline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.dotted-underline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1.7px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='4' height='2' viewBox='0 0 4 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1.7' height='1.7' rx='0.85' fill='%23D1D1D1' style='fill:%23D1D1D1;fill:color(display-p3 0.8196 0.8196 0.8196);fill-opacity:1;'/%3E%3C/svg%3E%0A");
|
||||
background-size: 3.4px 1.7px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
/* Container utilities */
|
||||
.container-prose {
|
||||
max-width: 65ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.container-narrow {
|
||||
max-width: 48rem; /* 768px */
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
max-width: 80rem; /* 1280px */
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* Centering helpers */
|
||||
.center-absolute {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.center-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Spacing utilities */
|
||||
.stack-sm > * + * {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.stack-md > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.stack-lg > * + * {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.stack-xl > * + * {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
/* Aspect ratio utilities */
|
||||
.aspect-video {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.aspect-portrait {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
/* Selection color */
|
||||
::selection {
|
||||
background-color: var(--heat-20);
|
||||
color: var(--accent-black);
|
||||
}
|
||||
|
||||
/* Focus visible utilities */
|
||||
.focus-ring {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.focus-ring:focus-visible {
|
||||
outline-color: var(--heat-100);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-muted) var(--background-lighter);
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
background: var(--background-lighter);
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: var(--border-muted);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--border-loud);
|
||||
}
|
||||
|
||||
/* Animation delay utilities */
|
||||
.animation-delay-150 {
|
||||
animation-delay: 150ms;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.animation-delay-450 {
|
||||
animation-delay: 450ms;
|
||||
}
|
||||
|
||||
.animation-delay-600 {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
|
||||
/* Loading animation helpers */
|
||||
.animate-shimmer {
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Heat glow effect */
|
||||
.heat-glow {
|
||||
box-shadow: 0 0 40px rgba(250, 93, 25, 0.3);
|
||||
animation: heat-glow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes heat-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(250, 93, 25, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(250, 93, 25, 0.4);
|
||||
}
|
||||
}
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
/* Fire Design System - New Firecrawl Design System */
|
||||
/* This is the new fire-inspired design system used in app and brand pages */
|
||||
|
||||
/* ALL @import statements must come FIRST before any other CSS */
|
||||
|
||||
/* Fire Design System Base */
|
||||
@import "./design-system/base/reset.css";
|
||||
@import "./design-system/base/body.css";
|
||||
@import "./design-system/base/layout.css";
|
||||
|
||||
/* Fire Design System Core */
|
||||
@import "./design-system/fonts.css";
|
||||
@import "./design-system/colors.css";
|
||||
@import "./design-system/typography.css";
|
||||
@import "./design-system/animations.css";
|
||||
@import "./design-system/utilities.css";
|
||||
|
||||
/* Tailwind CSS - After all imports */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Container configuration from firecrawl-marketing */
|
||||
:root {
|
||||
--container-width: 1112px;
|
||||
--container-width-padding: 1144px;
|
||||
}
|
||||
|
||||
/* Container implementation matching firecrawl-marketing */
|
||||
.container {
|
||||
max-width: min(calc(100% - 32px), var(--container-width));
|
||||
--padding: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Custom container width utilities */
|
||||
.cmw-container {
|
||||
max-width: var(--container-width);
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
:root {
|
||||
--container-width: 356px;
|
||||
--container-width-padding: var(--container-width);
|
||||
}
|
||||
|
||||
.container {
|
||||
--padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Marketing pattern utilities */
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.curvy-rect {
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
/* Fire-specific utilities layer */
|
||||
@layer utilities {
|
||||
/* Mask utilities */
|
||||
.mask-intersect {
|
||||
-webkit-mask-composite: source-in; /* For Chrome */
|
||||
mask-composite: intersect; /* Standard */
|
||||
}
|
||||
|
||||
.mask-subtract {
|
||||
-webkit-mask-composite: source-out; /* For Chrome */
|
||||
mask-composite: subtract; /* Standard */
|
||||
}
|
||||
|
||||
.mask-union {
|
||||
-webkit-mask-composite: source-over; /* For Chrome */
|
||||
mask-composite: add; /* Standard */
|
||||
}
|
||||
|
||||
/* Fire design pattern utilities */
|
||||
.dotted-underline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1.7px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='4' height='2' viewBox='0 0 4 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1.7' height='1.7' rx='0.85' fill='%23D1D1D1' style='fill:%23D1D1D1;fill:color(display-p3 0.8196 0.8196 0.8196);fill-opacity:1;'/%3E%3C/svg%3E%0A");
|
||||
background-size: 3.4px 1.7px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
/* inside-border styles moved to inside-border-fix.css to avoid conflicts */
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/* Fix for inside-border utility */
|
||||
.inside-border {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inside-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
border: 1px solid;
|
||||
border-color: inherit;
|
||||
transition: all 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.inside-border-x {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inside-border-x::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
border-left: 1px solid;
|
||||
border-right: 1px solid;
|
||||
border-color: inherit;
|
||||
transition: all 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.inside-border-y {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inside-border-y::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
border-color: inherit;
|
||||
transition: all 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
+229
@@ -0,0 +1,229 @@
|
||||
/* Fire Design System - Must be imported first for color definitions */
|
||||
@import "./fire.css";
|
||||
@import "./components/index.css";
|
||||
@import "./inside-border-fix.css";
|
||||
|
||||
/* Additional styles */
|
||||
@import "additional-styles/utility-patterns.css";
|
||||
@import "additional-styles/theme.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.height-screen-helper {
|
||||
min-height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 10% 3.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Temporarily disable dark mode until we migrate to semantic colors */
|
||||
/* .dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
} */
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease-in-out;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--after-open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--before-close {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.DialogOverlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.DialogContent {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
|
||||
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90vw;
|
||||
max-width: 650px;
|
||||
max-height: 85vh;
|
||||
animation: contentShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
z-index: 101;
|
||||
}
|
||||
.DialogContent:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.DialogTitle {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.DialogDescription {
|
||||
margin: 10px 0 20px;
|
||||
color: #000;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.FireButton {
|
||||
color: #f8fafc;
|
||||
background-color: #111827;
|
||||
width: 100%;
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.FireButton:hover {
|
||||
box-shadow: 0 0 8px 2px #ff5d22af;
|
||||
}
|
||||
|
||||
@keyframes overlayShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes contentShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -48%) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.blog-heading:target {
|
||||
padding-bottom: 120px !important;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.extra-space {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
--target-size: 20px;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--target-size);
|
||||
}
|
||||
}
|
||||
|
||||
.marquee-animation {
|
||||
animation: marquee var(--speed, 10s) linear infinite
|
||||
var(--direction, forwards);
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grecaptcha-badge { visibility: hidden; }
|
||||
|
||||
/* Remove all focus styles from hero input */
|
||||
input[type="text"]:focus,
|
||||
input[type="text"]:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border-color: inherit !important;
|
||||
}
|
||||
Reference in New Issue
Block a user