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