continue re-design
This commit is contained in:
Developers Digest
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user