my website at ewancroft.uk
1@import 'tailwindcss';
2@import './lib/styles/themes.css';
3
4/* Self-hosted Inter variable font */
5@font-face {
6 font-family: 'Inter';
7 src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
8 url('/fonts/InterVariable.woff2') format('woff2');
9 font-weight: 100 900;
10 font-display: swap;
11 font-style: normal;
12}
13
14@font-face {
15 font-family: 'Inter';
16 src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
17 url('/fonts/InterVariable-Italic.woff2') format('woff2');
18 font-weight: 100 900;
19 font-display: swap;
20 font-style: italic;
21}
22
23@theme {
24 /* Font Family */
25 --font-family-sans:
26 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
27 'Segoe UI Symbol', 'Noto Color Emoji';
28
29 /* Ink - Slate-tinted text (230°) */
30 --color-ink-50: light-dark(oklch(17.5% 0.012 230), oklch(97.6% 0.008 230));
31 --color-ink-100: light-dark(oklch(25% 0.022 230), oklch(93.2% 0.017 230));
32 --color-ink-200: light-dark(oklch(38.5% 0.037 230), oklch(85.2% 0.032 230));
33 --color-ink-300: light-dark(oklch(50.5% 0.052 230), oklch(75.2% 0.048 230));
34 --color-ink-400: light-dark(oklch(62% 0.065 230), oklch(65.2% 0.062 230));
35 --color-ink-500: light-dark(oklch(73% 0.078 230), oklch(55.2% 0.078 230));
36 --color-ink-600: light-dark(oklch(78% 0.062 230), oklch(45.2% 0.065 230));
37 --color-ink-700: light-dark(oklch(83.5% 0.048 230), oklch(35.2% 0.052 230));
38 --color-ink-800: light-dark(oklch(89% 0.032 230), oklch(25.2% 0.037 230));
39 --color-ink-900: light-dark(oklch(94.5% 0.017 230), oklch(18.2% 0.022 230));
40 --color-ink-950: light-dark(oklch(97.6% 0.008 230), oklch(12.5% 0.012 230));
41
42 /* Canvas - Slate-tinted backgrounds (230°) */
43 --color-canvas-50: light-dark(oklch(17.8% 0.014 230), oklch(98.6% 0.005 230));
44 --color-canvas-100: light-dark(oklch(25.8% 0.025 230), oklch(96.6% 0.011 230));
45 --color-canvas-200: light-dark(oklch(39.5% 0.042 230), oklch(92.5% 0.024 230));
46 --color-canvas-300: light-dark(oklch(52% 0.058 230), oklch(86.5% 0.038 230));
47 --color-canvas-400: light-dark(oklch(64% 0.072 230), oklch(80.5% 0.055 230));
48 --color-canvas-500: light-dark(oklch(75.5% 0.085 230), oklch(75.5% 0.068 230));
49 --color-canvas-600: light-dark(oklch(80.5% 0.055 230), oklch(64% 0.072 230));
50 --color-canvas-700: light-dark(oklch(86.5% 0.038 230), oklch(52% 0.058 230));
51 --color-canvas-800: light-dark(oklch(92.5% 0.024 230), oklch(39.5% 0.042 230));
52 --color-canvas-900: light-dark(oklch(96.6% 0.011 230), oklch(25.8% 0.025 230));
53 --color-canvas-950: light-dark(oklch(98.6% 0.005 230), oklch(17.8% 0.014 230));
54
55 /* Slate - Primary colors (230°) */
56 --color-primary-50: light-dark(oklch(18.2% 0.018 230), oklch(97.8% 0.012 230));
57 --color-primary-100: light-dark(oklch(26.5% 0.03 230), oklch(94.8% 0.022 230));
58 --color-primary-200: light-dark(oklch(40.5% 0.048 230), oklch(89.5% 0.042 230));
59 --color-primary-300: light-dark(oklch(54% 0.065 230), oklch(79.5% 0.062 230));
60 --color-primary-400: light-dark(oklch(66.5% 0.08 230), oklch(69.5% 0.078 230));
61 --color-primary-500: light-dark(oklch(78.5% 0.095 230), oklch(59.5% 0.095 230));
62 --color-primary-600: light-dark(oklch(82.2% 0.078 230), oklch(49.5% 0.08 230));
63 --color-primary-700: light-dark(oklch(86.5% 0.062 230), oklch(39.5% 0.065 230));
64 --color-primary-800: light-dark(oklch(91% 0.042 230), oklch(29.5% 0.048 230));
65 --color-primary-900: light-dark(oklch(95.8% 0.022 230), oklch(21.5% 0.03 230));
66 --color-primary-950: light-dark(oklch(98% 0.012 230), oklch(15.2% 0.018 230));
67
68 /* Steel Grey - Secondary colors (215°) */
69 --color-secondary-50: light-dark(oklch(18.5% 0.02 215), oklch(97.9% 0.013 215));
70 --color-secondary-100: light-dark(oklch(26.8% 0.033 215), oklch(95% 0.024 215));
71 --color-secondary-200: light-dark(oklch(41% 0.052 215), oklch(89.8% 0.045 215));
72 --color-secondary-300: light-dark(oklch(54.5% 0.07 215), oklch(80.2% 0.065 215));
73 --color-secondary-400: light-dark(oklch(67% 0.087 215), oklch(70.2% 0.082 215));
74 --color-secondary-500: light-dark(oklch(79% 0.103 215), oklch(60.2% 0.103 215));
75 --color-secondary-600: light-dark(oklch(82.8% 0.082 215), oklch(50.2% 0.087 215));
76 --color-secondary-700: light-dark(oklch(87% 0.065 215), oklch(40.2% 0.07 215));
77 --color-secondary-800: light-dark(oklch(91.5% 0.045 215), oklch(30.5% 0.052 215));
78 --color-secondary-900: light-dark(oklch(96% 0.024 215), oklch(22.2% 0.033 215));
79 --color-secondary-950: light-dark(oklch(98.2% 0.013 215), oklch(15.8% 0.02 215));
80
81 /* Charcoal - Accent colors (240°) */
82 --color-accent-50: light-dark(oklch(18.5% 0.022 240), oklch(98% 0.014 240));
83 --color-accent-100: light-dark(oklch(26.8% 0.036 240), oklch(95.2% 0.026 240));
84 --color-accent-200: light-dark(oklch(41% 0.058 240), oklch(90% 0.048 240));
85 --color-accent-300: light-dark(oklch(54.5% 0.078 240), oklch(80.8% 0.072 240));
86 --color-accent-400: light-dark(oklch(67% 0.097 240), oklch(71% 0.092 240));
87 --color-accent-500: light-dark(oklch(79% 0.115 240), oklch(61% 0.115 240));
88 --color-accent-600: light-dark(oklch(82.8% 0.092 240), oklch(51% 0.097 240));
89 --color-accent-700: light-dark(oklch(87% 0.072 240), oklch(41% 0.078 240));
90 --color-accent-800: light-dark(oklch(91.5% 0.048 240), oklch(31% 0.058 240));
91 --color-accent-900: light-dark(oklch(96% 0.026 240), oklch(22.5% 0.036 240));
92 --color-accent-950: light-dark(oklch(98.2% 0.014 240), oklch(16.2% 0.022 240));
93}
94
95@layer base {
96 /* Base styles for consistent typography and accessibility */
97 html {
98 scroll-behavior: smooth;
99 overflow-x: hidden;
100 width: 100%;
101 }
102
103 @media (prefers-reduced-motion: reduce) {
104 html {
105 scroll-behavior: auto;
106 }
107
108 *,
109 *::before,
110 *::after {
111 animation-duration: 0.01ms !important;
112 animation-iteration-count: 1 !important;
113 transition-duration: 0.01ms !important;
114 }
115 }
116
117 body {
118 font-family: var(--font-family-sans);
119 text-rendering: optimizeLegibility;
120 -webkit-font-smoothing: antialiased;
121 -moz-osx-font-smoothing: grayscale;
122 overflow-x: hidden;
123 width: 100%;
124 max-width: 100vw;
125 }
126
127 /* Skip to content link for keyboard navigation */
128 .skip-to-content {
129 position: absolute;
130 left: -9999px;
131 z-index: 999;
132 padding: 1rem 1.5rem;
133 background-color: var(--color-primary-600);
134 color: white;
135 font-weight: 600;
136 text-decoration: none;
137 border-radius: 0.5rem;
138 }
139
140 .skip-to-content:focus {
141 left: 1rem;
142 top: 1rem;
143 outline: 2px solid var(--color-primary-800);
144 outline-offset: 2px;
145 }
146
147 /* Focus visible styles for accessibility - Enhanced for better visibility */
148 *:focus-visible {
149 outline: 3px solid var(--color-primary-600);
150 outline-offset: 2px;
151 border-radius: 0.25rem;
152 }
153
154 /* High contrast mode support */
155 @media (prefers-contrast: high) {
156 *:focus-visible {
157 outline-width: 4px;
158 }
159 }
160
161 /* Ensure all elements stay within viewport */
162 * {
163 min-width: 0;
164 }
165
166 img,
167 video,
168 iframe,
169 embed,
170 object {
171 max-width: 100%;
172 height: auto;
173 }
174
175 /* Improve link accessibility */
176 a {
177 text-decoration-skip-ink: auto;
178 }
179
180 /* Better button accessibility */
181 button:disabled {
182 cursor: not-allowed;
183 }
184
185 /* Screen reader only utility */
186 .sr-only {
187 position: absolute;
188 width: 1px;
189 height: 1px;
190 padding: 0;
191 margin: -1px;
192 overflow: hidden;
193 clip: rect(0, 0, 0, 0);
194 white-space: nowrap;
195 border-width: 0;
196 }
197}
198
199@plugin '@tailwindcss/typography';