/* The Field Leader — brand tokens and base styles Dark (Forest & Ochre) is the default. Light kicks in when the visitor's device prefers light, or when you set . Force dark with data-theme="dark". */ /* Fonts are self-hosted (SIL OFL) — no third-party requests */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 800; font-display: swap; src: url("fonts/Fraunces-italic-300-800.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/Fraunces-normal-300-800.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-normal-400.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-normal-500.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("fonts/InstrumentSans-normal-400-700.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Type */ --tfl-font-display: "Fraunces", Georgia, serif; --tfl-font-body: "Instrument Sans", system-ui, sans-serif; --tfl-font-label: "IBM Plex Mono", ui-monospace, monospace; /* Layout */ --tfl-frame: 1200px; /* framed centre column */ --tfl-measure: 680px; /* article text width */ --tfl-gutter: 32px; /* Dark — Forest & Ochre */ --tfl-ground: #121510; /* page */ --tfl-surface: #1A1F17; /* cards, bars, bands */ --tfl-line: #2C3327; /* hairlines */ --tfl-text: #EEE5CF; /* headlines, body */ --tfl-text-body: #D9D0BA; /* long-form paragraphs */ --tfl-muted: #A39C88; /* meta, captions */ --tfl-accent: #D29A3A; /* links, Trailhead */ --tfl-accent-hover: #E8B866; --tfl-calm: #8FA487; /* Deep field */ --tfl-button-bg: #D29A3A; --tfl-button-text: #121510; --tfl-contour: url("textures/contour-cream.svg"); --tfl-contour-band: url("textures/contour-ochre.svg"); --tfl-logo: url("logo/lockup-on-dark.svg"); color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --tfl-ground: #F3ECDD; --tfl-surface: #EAE1CD; --tfl-line: #D6CAB1; --tfl-text: #1B1E17; --tfl-text-body: #2E2F28; --tfl-muted: #635C4F; --tfl-accent: #7D5415; --tfl-accent-hover: #5E3F0F; --tfl-calm: #4F6348; --tfl-button-bg: #D29A3A; --tfl-button-text: #1B1E17; --tfl-contour: url("textures/contour-ink.svg"); --tfl-logo: url("logo/lockup-on-light.svg"); color-scheme: light; } } :root[data-theme="light"] { --tfl-ground: #F3ECDD; --tfl-surface: #EAE1CD; --tfl-line: #D6CAB1; --tfl-text: #1B1E17; --tfl-text-body: #2E2F28; --tfl-muted: #635C4F; --tfl-accent: #7D5415; --tfl-accent-hover: #5E3F0F; --tfl-calm: #4F6348; --tfl-button-bg: #D29A3A; --tfl-button-text: #1B1E17; --tfl-contour: url("textures/contour-ink.svg"); --tfl-logo: url("logo/lockup-on-light.svg"); color-scheme: light; } /* Base */ body { margin: 0; background: var(--tfl-ground); color: var(--tfl-text); font-family: var(--tfl-font-body); font-size: 18px; line-height: 1.65; } h1, h2, h3 { font-family: var(--tfl-font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; } h1 { font-size: clamp(40px, 6vw, 80px); } h2 { font-size: clamp(28px, 3vw, 36px); } a { color: var(--tfl-accent); text-decoration: none; } a:hover { color: var(--tfl-accent-hover); } /* The italic "The" in the wordmark, and decks */ .tfl-italic { font-family: var(--tfl-font-display); font-style: italic; font-weight: 400; } /* Field-note labels: categories, dates, read time */ .tfl-label { font-family: var(--tfl-font-label); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tfl-muted); } /* Category chips */ .tfl-chip { display: inline-block; padding: 5px 11px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--tfl-font-label); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .tfl-chip--trailhead { color: var(--tfl-accent); } .tfl-chip--deepfield { color: var(--tfl-calm); } /* Buttons */ .tfl-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 0; background: var(--tfl-button-bg); color: var(--tfl-button-text); font: 600 16px/1 var(--tfl-font-body); cursor: pointer; } .tfl-button:hover { filter: brightness(1.08); color: var(--tfl-button-text); } /* Framed centre column with thin side lines */ .tfl-frame { max-width: var(--tfl-frame); margin: 0 auto; border-left: 1px solid var(--tfl-line); border-right: 1px solid var(--tfl-line); } .tfl-divider { border: 0; border-top: 1px solid var(--tfl-line); margin: 0; } /* Contour texture behind the hero and newsletter band */ .tfl-contour { background-image: var(--tfl-contour); background-size: cover; background-position: center; } .tfl-band { background-color: var(--tfl-surface); background-image: var(--tfl-contour-band); background-size: cover; border-top: 1px solid var(--tfl-line); border-bottom: 1px solid var(--tfl-line); } /* Photo hero with the headline on a bottom gradient */ .tfl-hero { position: relative; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; } .tfl-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tfl-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 75%; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--tfl-ground) 85%, transparent) 50%, var(--tfl-ground) 100%); } .tfl-hero > .tfl-hero__content { position: relative; z-index: 1; width: 100%; max-width: var(--tfl-frame); margin: 0 auto; padding: 0 var(--tfl-gutter) 64px; box-sizing: border-box; } /* Field Note callout */ .tfl-fieldnote { background-color: var(--tfl-surface); background-image: var(--tfl-contour-band); background-size: cover; border: 1px solid var(--tfl-line); padding: 28px 32px; } /* Route-style list: open circles for steps, ochre diamond for the current item or the end point */ .tfl-route { position: relative; list-style: none; margin: 0; padding: 0 0 0 36px; } .tfl-route::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 2px; background: var(--tfl-line); } .tfl-route li { position: relative; margin: 0 0 20px; } .tfl-route li::before { content: ""; position: absolute; left: -36px; top: 5px; width: 18px; height: 18px; box-sizing: border-box; border: 2.5px solid var(--tfl-text); border-radius: 50%; background: var(--tfl-ground); } .tfl-route li.is-current::before, .tfl-route li.is-end::before { left: -33px; top: 7px; width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--tfl-accent); transform: rotate(45deg); }