Developers Digest
103 lines
2.6 KiB
CSS
103 lines
2.6 KiB
CSS
/* 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 */
|
|
} |