sovrn

global.css

  1@import '@fontsource-variable/schibsted-grotesk';
  2@import '@fontsource-variable/jetbrains-mono';
  3
  4:root {
  5	/* Pinned sovrn ramps (colors.txt) */
  6	--gold: #e9b816; /* light-gold-500 */
  7	--gold-deep: #8c6e0d; /* light-gold-700 */
  8	--gold-ink: #5d4a09; /* light-gold-800, text on gold wash */
  9	--gold-wash: #fbf1d0; /* light-gold-100 */
 10	--ptt: #2e3d6b; /* french-blue-700 */
 11	--ptt-deep: #1f2947; /* french-blue-800 */
 12	--ptt-soft: #b8c2e0; /* french-blue-200 */
 13	--signal: #f1560e; /* tangerine-dream-500 */
 14	--paper: #eef0f6; /* smart-blue-50 */
 15	--paper-rule: #bdc4db; /* smart-blue-200 */
 16	--ink: #121621; /* smart-blue-900 */
 17	--ink-soft: #475785; /* smart-blue-600 */
 18	--error: #921207; /* vibrant-coral-700 */
 19
 20	--sans: 'Schibsted Grotesk Variable', 'Helvetica Neue', Arial, sans-serif;
 21	--mono: 'JetBrains Mono Variable', ui-monospace, 'SFMono-Regular', Menlo, monospace;
 22
 23	--gutter: clamp(1rem, 3.3vw, 3.25rem);
 24	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 25
 26	color-scheme: light;
 27}
 28
 29*,
 30*::before,
 31*::after {
 32	box-sizing: border-box;
 33}
 34
 35html {
 36	-webkit-text-size-adjust: 100%;
 37	scroll-behavior: smooth;
 38	scrollbar-color: var(--ptt) var(--paper);
 39}
 40
 41@media (prefers-reduced-motion: reduce) {
 42	html {
 43		scroll-behavior: auto;
 44	}
 45}
 46
 47body {
 48	margin: 0;
 49	background: var(--paper);
 50	color: var(--ink);
 51	font-family: var(--sans);
 52	font-size: 1.0625rem;
 53	line-height: 1.5;
 54	font-feature-settings: 'ss01';
 55	text-rendering: optimizeLegibility;
 56	-webkit-font-smoothing: antialiased;
 57	caret-color: var(--signal);
 58}
 59
 60::selection {
 61	background: var(--signal);
 62	color: #fff;
 63}
 64
 65h1,
 66h2,
 67h3,
 68p,
 69ol,
 70ul,
 71dl,
 72dd,
 73figure {
 74	margin: 0;
 75}
 76
 77ol,
 78ul {
 79	padding: 0;
 80	list-style: none;
 81}
 82
 83a {
 84	color: inherit;
 85	text-underline-offset: 0.2em;
 86	text-decoration-thickness: 0.08em;
 87}
 88
 89:focus-visible {
 90	outline: 3px solid var(--ptt);
 91	outline-offset: 3px;
 92}
 93
 94.on-dark :focus-visible {
 95	outline-color: var(--gold);
 96}
 97
 98code,
 99.mono {
100	font-family: var(--mono);
101	font-feature-settings: 'zero' 1;
102}
103
104.visually-hidden {
105	position: absolute;
106	width: 1px;
107	height: 1px;
108	padding: 0;
109	margin: -1px;
110	overflow: hidden;
111	clip: rect(0 0 0 0);
112	white-space: nowrap;
113	border: 0;
114}
115
116.skip-link {
117	position: absolute;
118	left: var(--gutter);
119	top: -4rem;
120	z-index: 10;
121	padding: 0.75rem 1rem;
122	background: var(--ptt);
123	color: var(--paper);
124	font-weight: 700;
125	text-decoration: none;
126}
127
128.skip-link:focus-visible {
129	top: 0.75rem;
130}