File size: 3,774 Bytes
557ab38 | 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 | @tailwind base;
@tailwind components;
@tailwind utilities;
@import "./theme.css";
/* ---- Base ---------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body,
#root {
height: 100%;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Geist", system-ui, sans-serif;
font-weight: 400;
font-feature-settings: "ss01", "ss02", "cv11";
transition: background 500ms cubic-bezier(0.16, 1, 0.3, 1),
color 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
::selection {
background: var(--accent);
color: var(--surface);
}
/* Editorial paper grain — the whole point of the aesthetic. Overlaid on the
entire document at low opacity. Uses SVG feTurbulence for zero-request grain. */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
opacity: var(--grain);
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.12 0 0 0 0 0.23 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
background-size: 240px 240px;
}
[data-theme="dark"] body::before {
mix-blend-mode: screen;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* ---- Type utilities ----------------------------------------------------- */
.font-display {
font-family: "Instrument Serif", serif;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 0.92;
}
.font-display-italic {
font-family: "Instrument Serif", serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 0.92;
}
.font-mono {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-feature-settings: "calt", "liga", "ss01";
}
/* Small caps + tracking for section labels — the "chapter marker" of the site */
.eyebrow {
font-family: "Geist", system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
/* ---- Focus rings — replaced with editorial underline ------------------- */
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: 2px;
}
/* Hide the default focus on decorative elements */
button:focus,
a:focus {
outline: none;
}
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
/* ---- Custom cursor — soft ink dot on interactive elements -------------- */
.cursor-ink {
cursor: none;
}
/* ---- Scrollbar --------------------------------------------------------- */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--rule);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ink-mute);
}
/* ---- Motion — respect user preference ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
|