File size: 4,600 Bytes
611bfd9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | @tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
color: #1A2B62;
background: #FFFFFF;
}
body {
margin: 0;
min-height: 100vh;
background: #FFFFFF;
color: #1A2B62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
::selection {
background: rgba(160, 198, 219, 0.42);
}
@layer components {
.app-shell {
@apply min-h-screen text-slate-800;
}
.shell-width {
@apply mx-auto max-w-[1440px] px-6 md:px-10;
}
.page-kicker {
@apply text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500;
}
.page-title {
@apply text-2xl font-semibold tracking-[-0.04em] text-ink md:text-3xl;
}
.page-intro {
@apply max-w-3xl text-sm leading-6 text-slate-600 md:text-[15px];
}
.app-nav-link {
@apply border-b-2 border-transparent pb-2 text-sm font-medium text-brand-grey transition-colors hover:text-brand-navy focus-visible:outline-none focus-visible:text-brand-navy;
}
.app-nav-link-active {
@apply border-brand-adriatic text-brand-navy;
}
.action-link {
@apply rounded-sm text-sm font-semibold text-brand-adriatic underline decoration-brand-adriatic/30 underline-offset-4 transition hover:text-brand-navy hover:decoration-brand-navy/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-adriatic/20;
}
.surface-card {
@apply rounded-xl border border-slate-300/80 bg-white;
}
.surface-subtle {
@apply rounded-xl border border-slate-300/70 bg-[#fbfaf7];
}
.surface-open {
@apply border-y border-slate-300/70 bg-transparent;
}
.section-heading {
@apply flex flex-wrap items-end justify-between gap-3 border-b border-slate-300/70 pb-3;
}
.section-heading-title {
@apply text-lg font-semibold tracking-[-0.03em] text-ink;
}
.section-heading-copy {
@apply text-sm leading-6 text-slate-600;
}
.briefing-strip {
@apply surface-card grid gap-4 overflow-hidden md:grid-cols-4;
}
.briefing-metric {
@apply px-5 py-4;
}
.briefing-metric + .briefing-metric {
@apply border-t border-slate-200/80 md:border-l md:border-t-0;
}
.briefing-label {
@apply text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500;
}
.briefing-value {
@apply mt-3 text-xl font-semibold tracking-[-0.03em] text-ink;
}
.briefing-meta {
@apply mt-2 text-xs leading-5 text-slate-500;
}
.ledger-shell {
@apply surface-card overflow-x-auto;
}
.ledger-table {
@apply min-w-full border-collapse text-sm;
}
.ledger-table thead th {
@apply border-b border-slate-300/80 bg-transparent px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500;
}
.ledger-table tbody td {
@apply px-5 py-4 align-top text-sm text-slate-700;
}
.ledger-table tbody tr {
@apply border-b border-slate-200/80;
}
.ledger-table tbody tr:last-child {
@apply border-b-0;
}
.rail-list {
@apply divide-y divide-slate-200/80;
}
.rail-row {
@apply flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0;
}
.advisory-note {
@apply rounded-xl border-l-4 border-amber-700 bg-amber-50/70 px-4 py-3;
}
.dossier-list {
@apply surface-card divide-y divide-slate-200/80 overflow-hidden;
}
.dossier-row {
@apply grid gap-5 px-5 py-5 md:grid-cols-[minmax(0,1fr)_220px];
}
.dossier-meta {
@apply text-xs font-medium uppercase tracking-[0.16em] text-slate-500;
}
.dossier-title {
@apply mt-2 text-lg font-semibold tracking-[-0.03em] text-ink;
}
.dossier-copy {
@apply text-sm leading-6 text-slate-700;
}
.field-input {
@apply rounded-xl border border-brand-grey/40 bg-white px-4 py-3 text-sm text-ink outline-none transition placeholder:text-slate-400 focus:border-brand-adriatic focus:ring-2 focus:ring-brand-adriatic/15;
}
.primary-button {
@apply rounded-xl bg-brand-navy px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-adriatic focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-adriatic/25 disabled:cursor-not-allowed disabled:bg-slate-300;
}
.secondary-button {
@apply rounded-xl border border-brand-grey/40 bg-white px-5 py-3 text-sm font-semibold text-brand-navy transition hover:border-brand-adriatic hover:bg-brand-light-blue/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-adriatic/20;
}
}
|