97 lines
2.5 KiB
CSS
97 lines
2.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--bg-main: #f5f9fc;
|
|
--bg-alt: #eef5fb;
|
|
--text-main: #143047;
|
|
--text-soft: #30526b;
|
|
--line: #d8e5f0;
|
|
--surface: #ffffff;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
background:
|
|
radial-gradient(circle at 8% 0%, rgba(94, 156, 197, 0.2), transparent 34%),
|
|
radial-gradient(circle at 92% 12%, rgba(209, 126, 58, 0.14), transparent 30%),
|
|
linear-gradient(180deg, var(--bg-main), var(--bg-alt));
|
|
color: var(--text-main);
|
|
font-family: "Source Sans 3", "Avenir Next", "Segoe UI", sans-serif;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
.font-heading,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: "Space Grotesk", "Trebuchet MS", "Avenir Next", sans-serif;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(205, 114, 45, 0.24);
|
|
}
|
|
|
|
@layer components {
|
|
.container-shell {
|
|
@apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.section-block {
|
|
@apply py-14 md:py-20;
|
|
}
|
|
|
|
.eyebrow {
|
|
@apply font-heading text-xs font-semibold uppercase tracking-[0.24em] text-copper-600;
|
|
}
|
|
|
|
.surface-card {
|
|
@apply rounded-2xl border border-alpine-100 bg-white p-6 shadow-card;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center rounded-full border border-copper-600 bg-copper-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-copper-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-copper-500;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center rounded-full border border-alpine-300 bg-white px-5 py-2.5 text-sm font-semibold text-alpine-700 transition hover:border-alpine-500 hover:text-alpine-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-alpine-500;
|
|
}
|
|
|
|
.nav-chip {
|
|
@apply inline-flex rounded-full border border-transparent px-3 py-1.5 transition hover:border-alpine-200 hover:bg-alpine-50 hover:text-alpine-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-alpine-500;
|
|
}
|
|
|
|
.table-shell {
|
|
@apply w-full overflow-hidden rounded-2xl border border-alpine-200 bg-white;
|
|
}
|
|
|
|
.data-table {
|
|
@apply w-full border-collapse text-left text-sm;
|
|
}
|
|
|
|
.data-table thead th {
|
|
@apply bg-alpine-50 px-4 py-3 font-semibold text-alpine-800;
|
|
}
|
|
|
|
.data-table tbody td {
|
|
@apply border-t border-alpine-100 px-4 py-3 text-alpine-700;
|
|
}
|
|
}
|