207 lines
7.3 KiB
CSS
207 lines
7.3 KiB
CSS
/* ============================================================
|
||
FONT FACES
|
||
Font files live in /public/fonts/ — run the download step
|
||
from the README before using this in production.
|
||
============================================================ */
|
||
|
||
@font-face {
|
||
font-family: 'Roboto';
|
||
font-weight: 100 900;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
src: url('/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2') format('woff2');
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Roboto';
|
||
font-weight: 100 900;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
src: url('/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2') format('woff2');
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Roboto Slab';
|
||
font-weight: 100 900;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
src: url('/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2') format('woff2');
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Material Icons Round';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: block;
|
||
src: url('/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2') format('woff2');
|
||
}
|
||
|
||
/* ============================================================
|
||
TAILWIND v4
|
||
============================================================ */
|
||
|
||
@import "tailwindcss";
|
||
|
||
/* ============================================================
|
||
SAFELIST
|
||
Utilities built from dynamic class strings (template literals)
|
||
are invisible to content scanning. @source inline() forces
|
||
Tailwind to generate them regardless.
|
||
============================================================ */
|
||
|
||
@source inline("bg-gradient-primary bg-gradient-secondary bg-gradient-success bg-gradient-warning bg-gradient-danger bg-gradient-info bg-gradient-dark bg-gradient-light shadow-primary shadow-secondary shadow-success shadow-warning shadow-danger shadow-info shadow-dark");
|
||
|
||
/* ============================================================
|
||
DESIGN TOKENS
|
||
All values exposed as CSS custom properties AND Tailwind
|
||
utility classes automatically via the @theme directive.
|
||
============================================================ */
|
||
|
||
@theme {
|
||
/* ----------------------------------------------------------
|
||
Colors
|
||
Generates: bg-*, text-*, border-*, ring-*, etc.
|
||
---------------------------------------------------------- */
|
||
--color-primary: #e91e63;
|
||
--color-secondary: #7b809a;
|
||
--color-success: #4caf50;
|
||
--color-warning: #fb8c00;
|
||
--color-danger: #f44335;
|
||
--color-info: #1a73e8;
|
||
--color-light: #f0f2f5;
|
||
--color-dark: #344767;
|
||
|
||
--color-gray-100: #f8f9fa;
|
||
--color-gray-200: #f0f2f5;
|
||
--color-gray-300: #dee2e6;
|
||
--color-gray-500: #adb5bd;
|
||
--color-gray-600: #6c757d;
|
||
--color-gray-900: #212529;
|
||
|
||
/* ----------------------------------------------------------
|
||
Typography
|
||
--font-* → font-* utilities
|
||
---------------------------------------------------------- */
|
||
--font-sans: Roboto, Helvetica, Arial, sans-serif;
|
||
--font-serif: 'Roboto Slab', serif;
|
||
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||
|
||
/* ----------------------------------------------------------
|
||
Shadows
|
||
--shadow-* → shadow-* utilities
|
||
|
||
soft-* palette: neutral depth shadows
|
||
colored palette: signature glow for gradient cards/buttons
|
||
---------------------------------------------------------- */
|
||
--shadow-soft-xs: 0 2px 9px -5px rgba(0, 0, 0, 0.15);
|
||
--shadow-soft-sm: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12);
|
||
--shadow-soft-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
--shadow-soft-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
--shadow-blur: 0 20px 27px rgba(0, 0, 0, 0.05);
|
||
|
||
--shadow-primary: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
|
||
--shadow-secondary: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(210, 210, 210, 0.4);
|
||
--shadow-success: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
|
||
--shadow-warning: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(251, 140, 0, 0.4);
|
||
--shadow-danger: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
|
||
--shadow-info: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(26, 115, 232, 0.4);
|
||
--shadow-dark: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(64, 64, 64, 0.4);
|
||
|
||
/* ----------------------------------------------------------
|
||
Border Radius
|
||
--radius-* → rounded-* utilities
|
||
xs is the only addition; sm–2xl match Tailwind defaults.
|
||
---------------------------------------------------------- */
|
||
--radius-xs: 0.1rem;
|
||
|
||
/* ----------------------------------------------------------
|
||
Gradients
|
||
195deg is the kit's signature angle — do not change.
|
||
--background-image-* → bg-* utilities
|
||
---------------------------------------------------------- */
|
||
--background-image-gradient-primary: linear-gradient(195deg, #ec407a, #d81b60);
|
||
--background-image-gradient-secondary: linear-gradient(195deg, #747b8a, #495361);
|
||
--background-image-gradient-success: linear-gradient(195deg, #66bb6a, #43a047);
|
||
--background-image-gradient-warning: linear-gradient(195deg, #ffa726, #fb8c00);
|
||
--background-image-gradient-danger: linear-gradient(195deg, #ef5350, #e53935);
|
||
--background-image-gradient-info: linear-gradient(195deg, #49a3f1, #1a73e8);
|
||
--background-image-gradient-dark: linear-gradient(195deg, #42424a, #191919);
|
||
--background-image-gradient-light: linear-gradient(195deg, #ebeff4, #ced4da);
|
||
}
|
||
|
||
/* ============================================================
|
||
BASE LAYER
|
||
============================================================ */
|
||
|
||
@layer base {
|
||
/* Maps the .material-icons class to the self-hosted font */
|
||
.material-icons {
|
||
font-family: 'Material Icons Round';
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-size: 24px;
|
||
line-height: 1;
|
||
letter-spacing: normal;
|
||
text-transform: none;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
word-wrap: normal;
|
||
direction: ltr;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
font-feature-settings: 'liga';
|
||
}
|
||
}
|
||
|
||
/* ============================================================
|
||
UTILITIES LAYER
|
||
Custom utilities that can't be expressed as a single
|
||
@theme token.
|
||
============================================================ */
|
||
|
||
@layer utilities {
|
||
/* Gradient text — combine with a bg-gradient-* class */
|
||
.text-gradient {
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* Rotating card — CSS 3D flip container */
|
||
.rotating-card-container {
|
||
perspective: 800px;
|
||
}
|
||
|
||
.rotating-card-container:hover .card-rotate {
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
.card-rotate {
|
||
transform-style: preserve-3d;
|
||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
}
|
||
|
||
.card-rotate .front,
|
||
.card-rotate .back {
|
||
backface-visibility: hidden;
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
|
||
.card-rotate .back {
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
/* Move on hover — interactive card lift */
|
||
.move-on-hover {
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.move-on-hover:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
}
|