Enhance application structure: Add runtime configuration for environment variables, integrate new dependencies for Cloudinary and UI components, and refactor member management features including improved forms and member dashboard. Update styles and layout for better user experience.
This commit is contained in:
parent
6e7e27ac4e
commit
e4a0a9ab0f
61 changed files with 7902 additions and 950 deletions
2
app/assets/css/fonts.css
Normal file
2
app/assets/css/fonts.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/* Font declarations are now handled by @nuxt/fonts module */
|
||||
/* See nuxt.config.ts for font configuration */
|
||||
|
|
@ -1,810 +1,14 @@
|
|||
|
||||
@import "./fonts.css";
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@theme {
|
||||
/* Font families */
|
||||
--font-sans: "Inter", "Neue Montreal", sans-serif;
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-body: "Inter", sans-serif;
|
||||
--font-mono: "Ubuntu Mono", monospace;
|
||||
--font-display: "NB Television Pro", monospace;
|
||||
|
||||
/* Custom colors */
|
||||
--color-lavender-50: #fcf6fd;
|
||||
--color-lavender-100: #f7ebfc;
|
||||
--color-lavender-200: #f0d7f7;
|
||||
--color-lavender-300: #e5b7f0;
|
||||
--color-lavender-400: #d689e5;
|
||||
--color-lavender-500: #c25fd6;
|
||||
--color-lavender-600: #a840b9;
|
||||
--color-lavender-700: #8d3299;
|
||||
--color-lavender-800: #752b7d;
|
||||
--color-lavender-900: #622867;
|
||||
--color-lavender-950: #3e0f43;
|
||||
|
||||
/* Named colors for glow effects */
|
||||
--color-peachFuzz: #ffcc99;
|
||||
--color-lemonChiffon: #ffff99;
|
||||
--color-mintSpray: #ccff99;
|
||||
--color-jadeMist: #99ff99;
|
||||
--color-aquaFresh: #99ffcc;
|
||||
--color-skyKiss: #99ccff;
|
||||
--color-lavenderHush: #9999ff;
|
||||
--color-purpleHaze: #cc99ff;
|
||||
--color-pinkBliss: #ff99cc;
|
||||
--color-body: #cccccc;
|
||||
|
||||
/* Animations */
|
||||
--animate-float-1: ghostie1 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
|
||||
--animate-float-2: ghostie2 2.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
|
||||
--animate-float-3: ghostie3 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
|
||||
}
|
||||
|
||||
|
||||
/* Keyframes for animations */
|
||||
@keyframes ghostie1 {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes ghostie2 {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-15px); }
|
||||
}
|
||||
|
||||
@keyframes ghostie3 {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.what-we-do ul {
|
||||
@apply list-disc list-inside space-y-2;
|
||||
}
|
||||
|
||||
.what-we-do a {
|
||||
@apply text-lavender-400 hover:text-lavender-300 transition-colors;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
@apply text-zinc-50 text-2xl md:text-4xl;
|
||||
|
||||
a& {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.glow-bg {
|
||||
position: relative;
|
||||
}
|
||||
/* Force dark mode by default - ensures no flash of light content */
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased text-zinc-300 bg-zinc-800;
|
||||
/* background-image: url(/img/background_top_edge.png); */
|
||||
background-repeat: repeat-x;
|
||||
background-size: 20%;
|
||||
|
||||
a:not(.glow-link), a:not(.cta-button) {
|
||||
@apply hover:brightness-125;
|
||||
}
|
||||
}
|
||||
main {
|
||||
/* @apply pb-0; */
|
||||
}
|
||||
body,
|
||||
.rainbow-border {
|
||||
/* border-top: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
to right,
|
||||
#ff9999,
|
||||
#ffcc99,
|
||||
#ffff99,
|
||||
#ccff99,
|
||||
#99ff99,
|
||||
#99ffcc,
|
||||
#99ccff,
|
||||
#9999ff,
|
||||
#cc99ff,
|
||||
#ff99cc
|
||||
);
|
||||
border-image-slice: 1; */
|
||||
}
|
||||
|
||||
|
||||
.gradient-header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#ff9999,
|
||||
#ffcc99,
|
||||
#ffff99,
|
||||
#ccff99,
|
||||
#99ff99,
|
||||
#99ffcc,
|
||||
#99ccff,
|
||||
#9999ff,
|
||||
#cc99ff,
|
||||
#ff99cc
|
||||
);
|
||||
}
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gradient-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
margin: -2px; /* Adjust to your desired border width */
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#ff9999,
|
||||
#ffcc99,
|
||||
#ffff99,
|
||||
#ccff99,
|
||||
#99ff99,
|
||||
#99ffcc,
|
||||
#99ccff,
|
||||
#9999ff,
|
||||
#cc99ff,
|
||||
#ff99cc
|
||||
);
|
||||
}
|
||||
@define-mixin text-crt $size {
|
||||
/* background-image: url("~/assets/img/CRT_screen_pattern_11x16.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 50%;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text; */
|
||||
/* mix-blend-mode: exclusion; */
|
||||
/* color: transparent; color: rgba(245, 235, 237, 0.7); */
|
||||
/* letter-spacing: -1px; */
|
||||
/* Adjusting the opacity and spread of the white shadow based on size */
|
||||
text-shadow: 2px 0 4px rgba(220, 148, 232, 1),
|
||||
-2px 0 4px rgba(92, 201, 245, 1),
|
||||
0 0 10px rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
h1 {
|
||||
.text-bg {
|
||||
@apply text-purple-400;
|
||||
}
|
||||
font-family: "NB Television Pro", monospace;
|
||||
letter-spacing: -1px;
|
||||
font-smooth: auto;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "NB Television Pro", monospace;
|
||||
@apply text-3xl;
|
||||
font-smooth: auto;
|
||||
-webkit-font-smoothing: auto;
|
||||
/* @mixin text-crt 0.5; */
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply uppercase text-2xl font-bold text-lavender-300 mb-0 tracking-wide;
|
||||
font-family: "NB Television Pro", monospace;
|
||||
@apply text-3xl mt-8;
|
||||
font-smooth: auto;
|
||||
-webkit-font-smoothing: auto;
|
||||
@mixin text-crt 0.3;
|
||||
/* letter-spacing: -1px; */
|
||||
}
|
||||
|
||||
|
||||
.font-display {
|
||||
font-family: "NB Television Pro", monospace;
|
||||
font-smooth: auto;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
nav {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
font-family: "NB Television Pro", monospace;
|
||||
@apply text-2xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
p,
|
||||
li {
|
||||
@apply font-normal;
|
||||
strong,
|
||||
b {
|
||||
@apply font-bold brightness-125;
|
||||
}
|
||||
}
|
||||
|
||||
.text-prose {
|
||||
@screen md {
|
||||
@apply mt-5 text-xl;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply mt-3 mx-auto max-w-4xl;
|
||||
|
||||
@screen sm {
|
||||
@apply text-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-zinc-300 {
|
||||
@apply text-zinc-900;
|
||||
}
|
||||
|
||||
section {
|
||||
@apply mb-16 px-6 max-w-7xl;
|
||||
p a,
|
||||
li a {
|
||||
@apply hover:brightness-125 underline;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
/* @apply mb-0; */
|
||||
}
|
||||
section {
|
||||
@apply px-0 mb-0;
|
||||
}
|
||||
|
||||
&.wide {
|
||||
@apply mb-0;
|
||||
}
|
||||
@screen md {
|
||||
/* @apply mb-24 px-12; */
|
||||
}
|
||||
/* todo fix this situation */
|
||||
|
||||
@screen lg {
|
||||
&:last-child {
|
||||
/* @apply mb-0; */
|
||||
}
|
||||
}
|
||||
p {
|
||||
@apply mt-3;
|
||||
}
|
||||
p,
|
||||
li {
|
||||
@apply text-base;
|
||||
|
||||
@screen sm {
|
||||
@apply text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply flex-1 mb-2;
|
||||
}
|
||||
}
|
||||
.text-arrow {
|
||||
@mixin text-crt 0.3;
|
||||
}
|
||||
.page--news {
|
||||
.article-title--excerpt {
|
||||
@apply text-xl md:text-2xl font-bold text-zinc-200;
|
||||
}
|
||||
}
|
||||
.page--about {
|
||||
#staff-cards {
|
||||
/* these are here because we need access to the mixin */
|
||||
h2 {
|
||||
@mixin text-crt 0.4;
|
||||
@apply text-3xl font-bold text-zinc-300 my-0;
|
||||
}
|
||||
h3 {
|
||||
@apply uppercase font-body text-xs text-zinc-300 mt-0 mb-2 tracking-normal;
|
||||
}
|
||||
/* @screen md {
|
||||
h2 {
|
||||
@apply text-xl my-0;
|
||||
}
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
.page--baby-ghosts {
|
||||
main {
|
||||
ul {
|
||||
@apply list-none m-0 mt-4 p-0;
|
||||
|
||||
li {
|
||||
@apply relative pl-6 mb-3;
|
||||
|
||||
&:before {
|
||||
content: "–";
|
||||
@apply absolute left-0 top-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
li > ul {
|
||||
@apply mt-0;
|
||||
li {
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
li,
|
||||
p {
|
||||
a {
|
||||
@apply text-zinc-200 hover:text-zinc-50;
|
||||
}
|
||||
}
|
||||
div + div h3:first-child {
|
||||
@apply mt-0;
|
||||
}
|
||||
h3 {
|
||||
@apply mt-8 leading-10 mb-0;
|
||||
|
||||
&#coordinators {
|
||||
@apply lg:mt-0 mt-12;
|
||||
}
|
||||
}
|
||||
section {
|
||||
@apply px-6;
|
||||
|
||||
&:not(.header):not(.wide) {
|
||||
@apply text-zinc-300;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
h4 {
|
||||
@apply text-2xl leading-10 mt-12 font-bold text-zinc-100 uppercase text-primary;
|
||||
}
|
||||
h5 {
|
||||
@apply text-base mb-6;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
@apply font-bold text-zinc-200;
|
||||
}
|
||||
}
|
||||
|
||||
.right-aligner {
|
||||
h3 {
|
||||
@apply mb-4 lg:mb-0 lg:text-right text-4xl;
|
||||
}
|
||||
ul {
|
||||
@apply mt-0;
|
||||
}
|
||||
}
|
||||
.cta {
|
||||
@apply mx-auto w-full text-center pb-12;
|
||||
@screen md {
|
||||
@apply pb-0;
|
||||
}
|
||||
}
|
||||
.action-buttons {
|
||||
@apply flex flex-wrap justify-around my-12;
|
||||
@screen lg {
|
||||
@apply my-0;
|
||||
}
|
||||
.cta {
|
||||
@apply inline w-full md:w-1/2 mb-6 md:mb-0;
|
||||
&:last-child {
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3:not(:first-child),
|
||||
h4:not(:first-child) {
|
||||
@apply mt-10;
|
||||
}
|
||||
}
|
||||
.bg-ghostie {
|
||||
|
||||
&.ghostie-double-take {
|
||||
background-image: url(/img/ghosts/Ghost-Double-Take.svg);
|
||||
}
|
||||
&.ghostie-sweet {
|
||||
background-image: url(/img/ghosts/Ghost-Sweet.svg);
|
||||
}
|
||||
&.ghostie-happy {
|
||||
background-image: url(/img/ghosts/Ghost-Happy.svg);
|
||||
}
|
||||
background-repeat: no-repeat;
|
||||
background-position: right -10px bottom -50px;
|
||||
background-size: 200px;
|
||||
background-image: none;
|
||||
overflow: hidden;
|
||||
&.flip {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
/* p,
|
||||
li {
|
||||
@apply bg-zinc-300;
|
||||
} */
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin glow $color {
|
||||
text-shadow: 0 0 10px $color, 0 0 20px $color, 0 0 30px $color,
|
||||
0 0 40px $color;
|
||||
}
|
||||
.router-link-active {
|
||||
@apply text-white;
|
||||
}
|
||||
.glow-link {
|
||||
@apply no-underline inline-block transition-all duration-300 ease-in-out mr-4;
|
||||
&.router-link-exact-active {
|
||||
@apply text-zinc-50;
|
||||
}
|
||||
&.peachFuzz {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #ffcc99;
|
||||
}
|
||||
}
|
||||
|
||||
&.lemonChiffon {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #ffff99;
|
||||
}
|
||||
}
|
||||
|
||||
&.mintSpray {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #ccff99;
|
||||
}
|
||||
}
|
||||
|
||||
&.jadeMist {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #99ff99;
|
||||
}
|
||||
}
|
||||
|
||||
&.aquaFresh {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #99ffcc;
|
||||
}
|
||||
}
|
||||
|
||||
&.skyKiss {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #99ccff;
|
||||
}
|
||||
}
|
||||
|
||||
&.lavenderHush {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #9999ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.purpleHaze {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #cc99ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.pinkBliss {
|
||||
&:hover,
|
||||
&.router-link-exact-active {
|
||||
@mixin glow #ff99cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-title--excerpt {
|
||||
@apply text-xl font-bold font-body;
|
||||
}
|
||||
.article-title {
|
||||
@mixin text-crt 0.3;
|
||||
}
|
||||
article {
|
||||
h2 {
|
||||
@apply text-3xl font-bold mt-8;
|
||||
}
|
||||
h3 {
|
||||
@apply text-2xl font-bold mt-8 uppercase;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
@apply list-none m-0 mt-4 p-0;
|
||||
|
||||
li {
|
||||
@apply relative pl-6;
|
||||
|
||||
&:before {
|
||||
content: "–";
|
||||
@apply absolute left-0 top-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.formkit-messages {
|
||||
@apply list-none mt-2 ml-0 p-0 m-0;
|
||||
li {
|
||||
@apply relative p-0 m-0;
|
||||
|
||||
&:before {
|
||||
content: "" !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.formkit-message {
|
||||
@apply text-sm inline-block bg-red-300 text-zinc-800 p-2 leading-tight font-bold;
|
||||
}
|
||||
}
|
||||
.glow-bg {
|
||||
@apply bg-zinc-800;
|
||||
box-shadow: calc(4px) 0 calc(4px) rgba(220, 148, 232, 1),
|
||||
calc(-2px) 0 calc(4px) rgba(92, 201, 245, 1),
|
||||
0 0 calc(10px) rgba(255, 255, 255, calc(0.1));
|
||||
}
|
||||
.float-section {
|
||||
h2 {
|
||||
@apply text-2xl md:text-6xl font-bold text-zinc-300;
|
||||
}
|
||||
p {
|
||||
@apply text-lg md:text-2xl lg:text-3xl text-zinc-300;
|
||||
}
|
||||
}
|
||||
.page--home {
|
||||
.what-we-do {
|
||||
ul {
|
||||
@apply list-none m-0 mt-4 p-0;
|
||||
|
||||
li {
|
||||
@apply relative pl-6;
|
||||
|
||||
&:before {
|
||||
content: "–";
|
||||
@apply absolute left-0 top-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
li,
|
||||
p {
|
||||
@apply md:text-2xl;
|
||||
a {
|
||||
@apply text-zinc-200 hover:text-zinc-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grain-wrapper {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grain {
|
||||
mix-blend-mode: hard-light;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-image: url(~/assets/img/noise-256w.png);
|
||||
opacity: 0.1;
|
||||
|
||||
animation: grain 0.4s steps(1) infinite;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
.grain {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@keyframes grain {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
20% {
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
40% {
|
||||
background-position: 25% 25%;
|
||||
}
|
||||
60% {
|
||||
background-position: 75% 75%;
|
||||
}
|
||||
80% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
}
|
||||
.activities-table {
|
||||
table {
|
||||
@apply w-full;
|
||||
}
|
||||
tbody {
|
||||
@apply space-y-4;
|
||||
}
|
||||
thead {
|
||||
@apply text-left;
|
||||
}
|
||||
th {
|
||||
@apply text-xl font-bold;
|
||||
}
|
||||
td {
|
||||
@apply text-lg;
|
||||
}
|
||||
.activity {
|
||||
@apply text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
/* Time Commitment List Styles */
|
||||
.page--peer-support .time-commitment ul,
|
||||
.page--application ul.eligibility {
|
||||
@apply space-y-1 text-lg text-zinc-300 mt-2;
|
||||
li {
|
||||
@apply pl-6 relative;
|
||||
&:before {
|
||||
content: "•";
|
||||
@apply absolute left-0 text-lavender-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* CTA Button Dithered Shadow Effect */
|
||||
.cta-button {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.cta-button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 9999px;
|
||||
z-index: -2;
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(0, 0, 0, 0.3) 1px,
|
||||
rgba(0, 0, 0, 0.3) 2px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(0, 0, 0, 0.2) 1px,
|
||||
rgba(0, 0, 0, 0.2) 2px
|
||||
);
|
||||
transform: translate(4px, 4px);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 9999px;
|
||||
z-index: -1;
|
||||
background-image: url('~/assets/img/noise-256w.png');
|
||||
background-size: 100px 100px;
|
||||
opacity: 0.15;
|
||||
mix-blend-mode: multiply;
|
||||
transform: translate(6px, 6px);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover::before {
|
||||
transform: translate(6px, 6px);
|
||||
}
|
||||
|
||||
.cta-button:hover::after {
|
||||
transform: translate(8px, 8px);
|
||||
}
|
||||
|
||||
/* Color variations for dithered shadows */
|
||||
.cta-peach::before {
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(255, 153, 102, 0.3) 1px,
|
||||
rgba(255, 153, 102, 0.3) 2px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(255, 204, 153, 0.2) 1px,
|
||||
rgba(255, 204, 153, 0.2) 2px
|
||||
);
|
||||
}
|
||||
|
||||
.cta-blue::before {
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(37, 99, 235, 0.3) 1px,
|
||||
rgba(37, 99, 235, 0.3) 2px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(6, 182, 212, 0.2) 1px,
|
||||
rgba(6, 182, 212, 0.2) 2px
|
||||
);
|
||||
}
|
||||
|
||||
.cta-green::before {
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(34, 197, 94, 0.3) 1px,
|
||||
rgba(34, 197, 94, 0.3) 2px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(52, 211, 153, 0.2) 1px,
|
||||
rgba(52, 211, 153, 0.2) 2px
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
.quotes {
|
||||
@apply p-6 xl:p-0 justify-around text-zinc-300;
|
||||
p {
|
||||
@apply block w-full text-xl;
|
||||
@screen lg {
|
||||
@apply w-1/3;
|
||||
}
|
||||
&:first-child {
|
||||
@apply block text-2xl w-full;
|
||||
@screen lg {
|
||||
@apply w-3/5;
|
||||
}
|
||||
}
|
||||
.attribution {
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
@apply mt-0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue