8a22ee60bc
* fix(website): restore radial hero backgrounds on page headers
PageHeader lost its decorative background when hero-bg was replaced by
DotField. Add a bottom-centered radial glow via a CSS class so it renders
reliably without Tailwind arbitrary-value parsing issues.
Also move the signup CTA gradient from an inline arbitrary Tailwind class
to the same CSS-class pattern for consistency.
Co-authored-by: Rotimi Best <[email protected]>
* fix(website): restore dotted DotPattern hero background on PageHeader
Revert the radial glow added to page headers and bring back the static
DotPattern grid that was replaced by DotField in c31ad6395.
Co-authored-by: Rotimi Best <[email protected]>
---------
Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>
159 lines
2.4 KiB
CSS
159 lines
2.4 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@import '@cio/ui/output.css';
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
font-family: 'Geist', sans-serif;
|
|
}
|
|
|
|
.floating {
|
|
-webkit-animation: floating 2.5s linear infinite;
|
|
animation: floating 2.5s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes floating {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateY(0rem);
|
|
transform: translateY(0rem);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateY(1rem);
|
|
transform: translateY(1rem);
|
|
}
|
|
}
|
|
|
|
@keyframes floating {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateY(0rem);
|
|
transform: translateY(0rem);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateY(1rem);
|
|
transform: translateY(1rem);
|
|
}
|
|
}
|
|
|
|
.prose {
|
|
font-family: 'Geist', sans-serif;
|
|
}
|
|
|
|
.prose :is(h1, h2, h3, h4, h5, h6) {
|
|
font-weight: 700;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.prose :is(h1) {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.prose :is(h2) {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.prose :is(h3) {
|
|
font-size: 1.17em;
|
|
}
|
|
|
|
.prose :is(h4) {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.prose :is(h5) {
|
|
font-size: 0.83em;
|
|
}
|
|
|
|
.prose :is(h6) {
|
|
font-size: 0.67em;
|
|
}
|
|
|
|
.prose :is(p, li) {
|
|
margin-top: 0.7em;
|
|
margin-bottom: 0em;
|
|
color: #374151;
|
|
}
|
|
|
|
.prose :is(ul, ol) {
|
|
list-style-type: disc;
|
|
padding-left: 3rem;
|
|
}
|
|
|
|
.prose pre {
|
|
max-inline-size: 100%;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
tab-size: 2;
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left: 4px solid gray;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
padding-left: 16px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.prose figure + em {
|
|
display: block;
|
|
font-size: 14px;
|
|
margin-bottom: 40px;
|
|
border: none;
|
|
padding: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-bg {
|
|
background-image: url('https://assets.cdn.clsrio.com/www/hero-bg.svg');
|
|
}
|
|
|
|
.tools-hero-bg {
|
|
background-image: url('https://assets.cdn.clsrio.com/www/tools-hero-bg.svg');
|
|
}
|
|
|
|
@media (min-width: 760px) {
|
|
.tools-hero-bg {
|
|
min-height: 350px;
|
|
}
|
|
}
|
|
|
|
.cio-bg-blue {
|
|
background: rgb(2, 51, 189);
|
|
background-size: cover;
|
|
background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
|
|
}
|
|
|
|
.cio-cta-radial-bg {
|
|
background: radial-gradient(
|
|
circle at 50% 100%,
|
|
rgba(2, 51, 189, 0.92) 0%,
|
|
rgba(4, 15, 45, 0.98) 58%,
|
|
rgb(3, 7, 18) 100%
|
|
);
|
|
}
|
|
|
|
.embed {
|
|
width: 100%;
|
|
height: 315px;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
svg.lucide-icon:not(.custom) {
|
|
color: inherit;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.embed {
|
|
width: 560px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
--primary: var(--color-blue-700);
|
|
}
|