101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
ocean: {
|
|
// Derived from Logo Blue (#075985)
|
|
950: "#021526", // Deep midnight base
|
|
900: "#032d45", // Darker navy
|
|
800: "#054161", // Deep ocean
|
|
700: "#064e75", // Slightly darker than logo
|
|
600: "#075985", // [LOGO MATCH: Ocean Blue]
|
|
500: "#0ea5e9", // Bright accent
|
|
},
|
|
slate: {
|
|
ink: "#0f172a", // Darker, cooler slate to match the new Ocean 950
|
|
mist: "#94a3b8", // Lightened for better contrast on dark blues
|
|
},
|
|
coast: {
|
|
teal: "#2dd4bf", // Keep for pop
|
|
deep: "#0d9488",
|
|
sky: "#38bdf8",
|
|
foam: "#E0F2FE", // [LOGO MATCH: Seafoam/Sky]
|
|
},
|
|
sand: {
|
|
DEFAULT: "#D2B48C", // [LOGO MATCH: Sand]
|
|
warm: "#f3e1c7", // Lighter tint for backgrounds/cards
|
|
},
|
|
sunset: {
|
|
gold: "#FB8524", // [LOGO MATCH: Sunset Gold]
|
|
amber: "#f59e0b",
|
|
},
|
|
},
|
|
// colors: {
|
|
// ocean: {
|
|
// 950: "#0a1628",
|
|
// 900: "#0f2137",
|
|
// 800: "#152a45",
|
|
// 700: "#1c3554",
|
|
// 600: "#244468",
|
|
// },
|
|
// slate: {
|
|
// ink: "#1e293b",
|
|
// mist: "#64748b",
|
|
// },
|
|
// coast: {
|
|
// teal: "#2dd4bf",
|
|
// deep: "#0d9488",
|
|
// sky: "#38bdf8",
|
|
// foam: "#7dd3fc",
|
|
// },
|
|
// sand: {
|
|
// DEFAULT: "#e8d5b7",
|
|
// warm: "#f4e4c1",
|
|
// },
|
|
// sunset: {
|
|
// gold: "#d4a574",
|
|
// amber: "#f59e0b",
|
|
// },
|
|
// },
|
|
fontFamily: {
|
|
sans: [
|
|
"DM Sans",
|
|
"system-ui",
|
|
"-apple-system",
|
|
"Segoe UI",
|
|
"Roboto",
|
|
"sans-serif",
|
|
],
|
|
display: ["Outfit", "DM Sans", "system-ui", "sans-serif"],
|
|
mono: ["JetBrains Mono", "ui-monospace", "monospace"],
|
|
},
|
|
backgroundImage: {
|
|
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
|
},
|
|
boxShadow: {
|
|
glass: "0 8px 32px rgba(15, 33, 55, 0.12)",
|
|
"glass-dark": "0 8px 32px rgba(0, 0, 0, 0.35)",
|
|
},
|
|
animation: {
|
|
wave: "wave 18s ease-in-out infinite",
|
|
float: "float 6s ease-in-out infinite",
|
|
},
|
|
keyframes: {
|
|
wave: {
|
|
"0%, 100%": { transform: "translateX(0) scaleY(1)" },
|
|
"50%": { transform: "translateX(-4%) scaleY(1.02)" },
|
|
},
|
|
float: {
|
|
"0%, 100%": { transform: "translateY(0)" },
|
|
"50%": { transform: "translateY(-6px)" },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config;
|