/* =========================================================================== BOARD FOXES — one stylesheet for the whole site. The identity comes from the original one-page summary: Anybody 900 for display, Karla for reading, Spline Sans Mono for anything that is a label or a number. Sand, terracotta, fox orange, teal, deep. The field guide and the allotment had their own palettes; both are folded in here as ACCENTS rather than as separate schemes, so every page is recognisably the same site and a page still gets to have a colour. HOW A PAGE PICKS AN ACCENT and --accent / --accent-soft / --accent-ink follow. The accent values for both themes live in the three theme blocks below; the [data-accent] rules only map them, which is why they are written once instead of three times. TEXT-SAFE COLOURS are --ink, --dim, --faint, --link and --accent-ink. --terra, --fox, --teal and --accent are display colours: big numbers, rules, borders, 18px+ bold. Do not set 13px body text in --terra. ======================================================================== */ /* ---------------------------------------------------------------- tokens */ :root { color-scheme: light dark; /* surfaces */ --sand: #F4EFE6; --panel: #FFFFFF; --panel-2: #EFE9DD; --panel-3: #E7E0D1; --deep: #2A2536; --line: #E0D7C9; --line-2: #CFC3AF; --shade: rgba(33,30,43,.07); --shade-2: rgba(33,30,43,.14); --hover: rgba(196,98,60,.055); /* text */ --ink: #211E2B; --dim: #5E5670; --faint: #6E6778; --on-deep: #EDE4D5; --link: #0C7773; --link-hov: #C4623C; /* brand */ --terra: #C4623C; --terra-ink: #9E4724; --fox: #E8761F; --fox-ink: #A24F09; --teal: #159C9C; --teal-ink: #0B6E6A; /* the seven foxes, used on cards and tags */ --fx-paolo: #E8761F; --fx-dash: #2E8BD8; --fx-boulder: #8A7A5E; --fx-skye: #48B6C4; --fx-spring: #63B24A; --fx-umbra: #7B5EA8; --fx-rollo: #D2A03C; /* the accent palettes — every page's colour, both themes, in one place */ --ac-home: #C4623C; --ac-home-soft: #F7E8E0; --ac-home-ink: #9E4724; --ac-foxes: #E8761F; --ac-foxes-soft: #FCEBDA; --ac-foxes-ink: #A24F09; --ac-venues: #159C9C; --ac-venues-soft: #DDF1F0; --ac-venues-ink: #0B6E6A; --ac-park: #2E5E42; --ac-park-soft: #E6EEE8; --ac-park-ink: #27523A; --ac-fish: #2C74B8; --ac-fish-soft: #E3EEF8; --ac-fish-ink: #205E9A; --ac-farm: #5E7F2E; --ac-farm-soft: #EDF1E3; --ac-farm-ink: #4A6821; --ac-world: #3F6F8F; --ac-world-soft: #E4EDF3; --ac-world-ink: #2F5872; --ac-story: #7B5EA8; --ac-story-soft: #EFE9F6; --ac-story-ink: #63478F; --ac-sys: #B8781A; --ac-sys-soft: #F8EDD9; --ac-sys-ink: #8A570D; /* the type matrix and anything else that grades good / bad / none */ --strong: #0B7A70; --strong-fill: #D3EDE9; --strong-ink: #075049; --weak: #B4661A; --weak-fill: #F7E3CB; --weak-ink: #7C420C; --void: #4A443E; --void-fill: #E2DED4; --void-ink: #4A443E; --chip-ink: #FFFFFF; /* rarity, shared by the dex and the fish journal */ --rar-common: #6E6778; --rar-uncommon: #4A6821; --rar-rare: #205E9A; --rar-legend: #9E4724; /* mapped by [data-accent], defaults to the house terracotta */ --accent: var(--ac-home); --accent-soft: var(--ac-home-soft); --accent-ink: var(--ac-home-ink); --radius: 12px; --radius-s: 6px; --gutter: 24px; --maxw: 1120px; --sans: Karla, ui-sans-serif, system-ui, -apple-system, sans-serif; --disp: Anybody, "Arial Black", Impact, system-ui, sans-serif; --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sand: #16141D; --panel: #1E1B28; --panel-2: #242030; --panel-3: #2B2637; --deep: #0F0D15; --line: #2E2A3B; --line-2: #413B52; --shade: rgba(0,0,0,.32); --shade-2: rgba(0,0,0,.5); --hover: rgba(224,128,85,.07); --ink: #EDE7DC; --dim: #A79EB4; --faint: #8D8599; --on-deep: #E8DFD0; --link: #45D0CB; --link-hov: #FF9440; --terra: #E08055; --terra-ink: #EDA383; --fox: #FF9440; --fox-ink: #FFB477; --teal: #35C7C7; --teal-ink: #6FE0E0; --fx-paolo: #FF9440; --fx-dash: #62AEEC; --fx-boulder: #BCAB8B; --fx-skye: #6FD3DF; --fx-spring: #8AD170; --fx-umbra: #AE8CDE; --fx-rollo: #EBBE64; --ac-home: #E08055; --ac-home-soft: #33231C; --ac-home-ink: #F0A483; --ac-foxes: #FF9440; --ac-foxes-soft: #372416; --ac-foxes-ink: #FFB477; --ac-venues: #35C7C7; --ac-venues-soft: #123232; --ac-venues-ink: #6FE0E0; --ac-park: #7FB894; --ac-park-soft: #1A2A20; --ac-park-ink: #A2D2B3; --ac-fish: #7FB2E6; --ac-fish-soft: #17263A; --ac-fish-ink: #A6CBF0; --ac-farm: #A3C46B; --ac-farm-soft: #1F2A17; --ac-farm-ink: #BFD892; --ac-world: #8CB9D6; --ac-world-soft: #182734; --ac-world-ink: #AFD1E6; --ac-story: #B99AE0; --ac-story-soft: #251D33; --ac-story-ink: #CFB8EC; --ac-sys: #E0A44A; --ac-sys-soft: #33260F; --ac-sys-ink: #EFC381; --strong: #5FC9BC; --strong-fill: #123F3B; --strong-ink: #8FE0D5; --weak: #E39A44; --weak-fill: #43301A; --weak-ink: #F0BE7E; --void: #8A837B; --void-fill: #262420; --void-ink: #9A938A; --chip-ink: #0E120D; --rar-common: #8D8599; --rar-uncommon: #A3C46B; --rar-rare: #7FB2E6; --rar-legend: #EDA383; } } :root[data-theme="dark"] { --sand: #16141D; --panel: #1E1B28; --panel-2: #242030; --panel-3: #2B2637; --deep: #0F0D15; --line: #2E2A3B; --line-2: #413B52; --shade: rgba(0,0,0,.32); --shade-2: rgba(0,0,0,.5); --hover: rgba(224,128,85,.07); --ink: #EDE7DC; --dim: #A79EB4; --faint: #8D8599; --on-deep: #E8DFD0; --link: #45D0CB; --link-hov: #FF9440; --terra: #E08055; --terra-ink: #EDA383; --fox: #FF9440; --fox-ink: #FFB477; --teal: #35C7C7; --teal-ink: #6FE0E0; --fx-paolo: #FF9440; --fx-dash: #62AEEC; --fx-boulder: #BCAB8B; --fx-skye: #6FD3DF; --fx-spring: #8AD170; --fx-umbra: #AE8CDE; --fx-rollo: #EBBE64; --ac-home: #E08055; --ac-home-soft: #33231C; --ac-home-ink: #F0A483; --ac-foxes: #FF9440; --ac-foxes-soft: #372416; --ac-foxes-ink: #FFB477; --ac-venues: #35C7C7; --ac-venues-soft: #123232; --ac-venues-ink: #6FE0E0; --ac-park: #7FB894; --ac-park-soft: #1A2A20; --ac-park-ink: #A2D2B3; --ac-fish: #7FB2E6; --ac-fish-soft: #17263A; --ac-fish-ink: #A6CBF0; --ac-farm: #A3C46B; --ac-farm-soft: #1F2A17; --ac-farm-ink: #BFD892; --ac-world: #8CB9D6; --ac-world-soft: #182734; --ac-world-ink: #AFD1E6; --ac-story: #B99AE0; --ac-story-soft: #251D33; --ac-story-ink: #CFB8EC; --ac-sys: #E0A44A; --ac-sys-soft: #33260F; --ac-sys-ink: #EFC381; --strong: #5FC9BC; --strong-fill: #123F3B; --strong-ink: #8FE0D5; --weak: #E39A44; --weak-fill: #43301A; --weak-ink: #F0BE7E; --void: #8A837B; --void-fill: #262420; --void-ink: #9A938A; --chip-ink: #0E120D; --rar-common: #8D8599; --rar-uncommon: #A3C46B; --rar-rare: #7FB2E6; --rar-legend: #EDA383; } /* the accent map — written once, resolves in whichever theme is live */ [data-accent="foxes"] { --accent:var(--ac-foxes); --accent-soft:var(--ac-foxes-soft); --accent-ink:var(--ac-foxes-ink); } [data-accent="venues"] { --accent:var(--ac-venues); --accent-soft:var(--ac-venues-soft); --accent-ink:var(--ac-venues-ink); } [data-accent="park"] { --accent:var(--ac-park); --accent-soft:var(--ac-park-soft); --accent-ink:var(--ac-park-ink); } [data-accent="fishing"]{ --accent:var(--ac-fish); --accent-soft:var(--ac-fish-soft); --accent-ink:var(--ac-fish-ink); } [data-accent="farm"] { --accent:var(--ac-farm); --accent-soft:var(--ac-farm-soft); --accent-ink:var(--ac-farm-ink); } [data-accent="world"] { --accent:var(--ac-world); --accent-soft:var(--ac-world-soft); --accent-ink:var(--ac-world-ink); } [data-accent="story"] { --accent:var(--ac-story); --accent-soft:var(--ac-story-soft); --accent-ink:var(--ac-story-ink); } [data-accent="systems"]{ --accent:var(--ac-sys); --accent-soft:var(--ac-sys-soft); --accent-ink:var(--ac-sys-ink); } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--sand); color: var(--ink); font: 400 16.5px/1.62 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video, canvas { max-width: 100%; } img { height: auto; display: block; } a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--link-hov); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--accent-soft); color: var(--ink); } h1, h2, h3, h4 { font-family: var(--disp); font-weight: 900; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; margin: 0; } h1 { font-size: clamp(34px, 5.6vw, 62px); } h2 { font-size: clamp(27px, 3.8vw, 44px); } h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; } h4 { font-size: 16px; font-weight: 800; letter-spacing: -.005em; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; } li { margin: 0 0 .35em; } ul.bare { list-style: none; padding-left: 0; } hr, .rule { height: 1px; background: var(--line); border: 0; margin: 0; } code, kbd, samp { font-family: var(--mono); font-size: .92em; } code { background: var(--panel-2); padding: .1em .38em; border-radius: 3px; } kbd { display: inline-block; background: var(--panel); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-size: 12px; line-height: 1.5; color: var(--ink); white-space: nowrap; } /* ---------------------------------------------------------------- layout */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: 68ch; } .measure { max-width: 60ch; } section { padding: 72px 0; } section.tight { padding: 46px 0; } section > .wrap > * + h2 { margin-top: 4px; } .stack > * + * { margin-top: 18px; } .stack-s > * + * { margin-top: 10px; } .cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 10px 14px; font: 500 13px/1 var(--mono); text-decoration: none; transition: top .12s ease; } .skip:focus { top: 12px; } /* ------------------------------------------------------------ site header */ .site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sand) 90%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); } @supports not (backdrop-filter: blur(1px)) { .site { background: var(--sand); } } .siteIn { display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px; } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; } .brandMark { width: 38px; height: 38px; flex: none; } .brandName { font: 900 15px/0.98 var(--disp); letter-spacing: -.02em; text-transform: lowercase; } .brand:hover { color: var(--ink); } .brand:hover .brandMark { transform: rotate(-4deg); } .brandMark { transition: transform .16s ease; } .nav { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; margin-right: auto; font: 500 13px/1 var(--mono); } .navGroup { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; } .navGroup + .navGroup { padding-left: 22px; border-left: 1px solid var(--line); } .navLabel { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding-right: 2px; } .nav a { color: var(--dim); text-decoration: none; padding: 5px 0 4px; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--ink); border-bottom-color: var(--line-2); } .nav a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); } .themeBtn { flex: none; width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; background: var(--panel); color: var(--dim); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; } .themeBtn:hover { color: var(--ink); border-color: var(--line-2); } .themeBtn svg { width: 16px; height: 16px; fill: currentColor; } @media (max-width: 720px) { /* Two rows of links plus the brand is a 128px bar. Pinning that to the top of a phone costs more than it gives, and the footer repeats the nav. */ .site { position: static; } .navGroup + .navGroup { padding-left: 0; border-left: 0; } .nav { gap: 4px 16px; font-size: 12.5px; width: 100%; order: 3; } .themeBtn { margin-left: auto; } } /* ------------------------------------------------------------------ hero */ .hero { position: relative; min-height: min(88vh, 820px); display: flex; align-items: flex-end; overflow: hidden; background: var(--deep); } .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* a 16:9 plate in a tall box crops hard — hold the island, not the sky */ object-position: 50% 58%; filter: saturate(1.06); } .hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,13,21,.36) 0%, rgba(15,13,21,.06) 34%, rgba(15,13,21,.74) 82%, rgba(15,13,21,.94) 100%); } .heroIn { position: relative; width: 100%; padding: 0 var(--gutter) 54px; } .heroGrid { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap; } .heroMark { width: 124px; height: 124px; flex: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.42)); } .heroText { flex: 1; min-width: 280px; } .hero h1 { color: #FBF6EC; font-size: clamp(44px, 8.2vw, 94px); text-shadow: 0 3px 24px rgba(0,0,0,.5); } .hero .sub { color: #EFE6D9; font-size: clamp(17px, 2.1vw, 21px); max-width: 58ch; margin: 16px 0 0; text-shadow: 0 2px 14px rgba(0,0,0,.62); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .tag-pill { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; background: rgba(251,246,236,.14); border: 1px solid rgba(251,246,236,.32); color: #FBF6EC; border-radius: 999px; padding: 7px 12px; } /* page head — every interior page opens with this instead of the hero */ .pagehead { padding: 58px 0 34px; border-bottom: 2px solid var(--ink); } .pagehead h1 { margin: 12px 0 0; } .pagehead .sub { max-width: 64ch; color: var(--dim); margin: 16px 0 0; font-size: 18px; } .pagehead .meta { margin-top: 18px; font: 500 12px/1.6 var(--mono); color: var(--faint); } .toc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 0; padding: 0; list-style: none; font: 500 12.5px/1.5 var(--mono); } .toc a { color: var(--dim); text-decoration: none; border-bottom: 1px dotted var(--line-2); } .toc a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); } /* ------------------------------------------------------------ typography */ .eyebrow { font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 14px; } .eyebrow.plain { color: var(--faint); } .lede { font-size: 19.5px; color: var(--ink); } .lede strong { color: var(--terra-ink); font-weight: 700; } .dim { color: var(--dim); } .faint { color: var(--faint); } .mono { font-family: var(--mono); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .hint { font: 500 12px/1.5 var(--mono); color: var(--faint); margin: 10px 0 0; letter-spacing: .02em; } .kicker { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); } .callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 14px 18px; margin: 26px 0 0; color: var(--ink); font-size: 15px; border-radius: 0 var(--radius-s) var(--radius-s) 0; } .callout > :first-child { margin-top: 0; } .callout p { margin-bottom: .6em; } .pull { font: 800 clamp(20px, 2.6vw, 28px)/1.26 var(--disp); letter-spacing: -.015em; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 20px; margin-top: 34px; margin-bottom: 34px; max-width: 40ch; text-wrap: balance; } /* ------------------------------------------------------- numbers / stats */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .stat { background: var(--panel); padding: 18px 16px; } .stat b { display: block; font: 900 28px/1 var(--disp); color: var(--terra); font-variant-numeric: tabular-nums; } .stat span { display: block; margin-top: 7px; font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } /* --------------------------------------------------------------- surfaces */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .card h3 { font-size: 18px; margin-bottom: 8px; } .card p { font-size: 14.5px; color: var(--dim); } .card.lift { box-shadow: 0 10px 26px -18px var(--shade-2); } /* a card that opens with a picture: the image bleeds to the card's edges */ .card.thumb { padding: 0; overflow: hidden; } .card.thumb > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .card.thumb > .cardBody { padding: 15px 18px 17px; } .card.thumb h3 { margin-bottom: 7px; } a.card { text-decoration: none; color: var(--ink); display: block; } a.card:hover { border-color: var(--accent); color: var(--ink); } a.card .more { display: inline-block; margin-top: 10px; font: 500 12px/1 var(--mono); color: var(--accent-ink); } a.card:hover .more { text-decoration: underline; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px; } /* fox cards — --fx is the fox's own colour */ .fox { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--fx, var(--accent)); border-radius: var(--radius); padding: 17px 18px; } .fox .nm { font: 800 19px/1.1 var(--disp); letter-spacing: -.01em; } .fox .vn { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--fx, var(--accent)); margin: 9px 0 10px; } .fox p { font-size: 14.5px; margin: 0 0 9px; color: var(--dim); } .fox .pw { font-size: 13.5px; color: var(--ink); border-top: 1px dashed var(--line); padding-top: 9px; margin: 0; } .fox .pw b { color: var(--fx, var(--accent)); } /* alternating image / text rows */ .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center; margin-bottom: 54px; } .split:last-child { margin-bottom: 0; } .split:nth-of-type(even) .splitText { order: 2; } .split img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 12px 32px -14px var(--shade-2); } .split h3 { font-size: 27px; margin-bottom: 5px; } .split .hom { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 13px; } .split p { color: var(--dim); } @media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 20px; margin-bottom: 42px; } .split:nth-of-type(even) .splitText { order: 0; } } /* gallery */ .gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 13px; } .gal figure { margin: 0; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); } .gal img { width: 100%; } .gal figcaption { font-size: 13px; color: var(--dim); padding: 10px 13px 12px; } /* numbered steps / run-throughs */ .run { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .step { background: var(--panel); display: grid; grid-template-columns: 62px 1fr; gap: 18px; padding: 16px 18px; align-items: baseline; } .step .n { font: 600 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--accent-ink); } .step h3 { font-size: 17px; } .step p { margin: 4px 0 0; color: var(--dim); font-size: 14.5px; } @media (max-width: 560px) { .step { grid-template-columns: 1fr; gap: 4px; } } /* the five-tier timeline */ .tiers { margin: 30px 0 0; } .tier { position: relative; padding: 0 0 30px 28px; border-left: 2px solid var(--line); margin-left: 0; } .tier:last-child { border-left-color: transparent; padding-bottom: 0; } .tier::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--tc, var(--accent)); border: 2px solid var(--sand); } .tier .tn { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tc, var(--accent-ink)); } .tier h3 { margin: 8px 0 7px; font-size: 19px; } .tier p { font-size: 15.5px; color: var(--dim); margin: 0; } .tier p em { color: var(--ink); font-style: normal; font-weight: 500; } /* ---------------------------------------------------------------- tables */ .scroll { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .scroll.tall { max-height: 74vh; overflow-y: auto; } .scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } table { border-collapse: collapse; width: 100%; font-size: 14px; } caption { text-align: left; font: 500 12px/1.5 var(--mono); color: var(--faint); padding: 12px 14px 0; } th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line); vertical-align: top; } thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); color: var(--dim); font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--hover); } table.zebra tbody tr:nth-child(even) td { background: var(--panel-2); } table.zebra tbody tr:nth-child(even):hover td { background: var(--hover); } td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } td.nowrap, th.nowrap { white-space: nowrap; } /* a name column that stays put while the rest of a wide row scrolls */ .stickcol { position: sticky; left: 0; z-index: 1; background: var(--panel); } thead .stickcol { z-index: 3; background: var(--panel-2); } table.zebra tbody tr:nth-child(even) .stickcol { background: var(--panel-2); } tbody tr:hover .stickcol { background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); } /* a row you can open for detail */ .namebtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; border-bottom: 1px dotted var(--line-2); } .namebtn:hover { color: var(--accent-ink); border-bottom-color: var(--accent); } tr.detail > td { background: var(--panel-2); padding: 16px 18px 18px; } tr.detail[hidden] { display: none; } /* A detail cell spans the whole table, so on a narrow screen its contents sit mostly off to the right where nobody will scroll to find them. The inner .detailBody sticks to the left edge of the scroll box and is capped at the width of the page column, so the detail reads without scrolling sideways. */ tr.detail > td { padding: 0; } tr.detail > td > .detailBody { position: sticky; left: 0; padding: 16px 18px 18px; max-width: min(100vw - 2 * var(--gutter), var(--maxw) - 2 * var(--gutter)); box-sizing: border-box; } .mvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 8px; } .mv { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; } .mv .lv { font: 400 10.5px/1.4 var(--mono); color: var(--faint); text-align: center; border-right: 1px solid var(--line); padding-right: 8px; } .mv .nmw { font-size: 13px; font-weight: 500; } .mv .pw { font: 400 11.5px/1 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .mvhead { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; } .dts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 13px; color: var(--dim); } .dts b { font: 600 13px/1 var(--mono); color: var(--ink); } /* chips, dots and tags used in the dex, the fish journal and the crop table */ .chip { display: inline-block; padding: 2px 8px; border-radius: 3px; font: 600 11px/1.5 var(--mono); letter-spacing: .03em; color: var(--chip-ink); background: var(--c, var(--accent)); white-space: nowrap; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); margin-right: 8px; vertical-align: baseline; } .tag { display: inline-block; font: 500 10.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--dim); } .tag.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); } .rar { font: 500 10.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .rar.common { color: var(--rar-common); } .rar.uncommon { color: var(--rar-uncommon); } .rar.rare { color: var(--rar-rare); } .rar.legendary { color: var(--rar-legend); } /* the type matrix */ /* width:auto so the matrix is as wide as its cells need, not stretched to fill — it scrolls inside .scroll once there are enough types. */ .matrix { border-collapse: separate; border-spacing: 2px; font: 500 12px/1 var(--mono); width: auto; } .matrix th, .matrix td { border: 0; padding: 0; } .matrix .rh { position: sticky; left: 0; z-index: 3; background: var(--panel); padding: 0 14px 0 4px; font-size: 12px; font-weight: 500; white-space: nowrap; text-align: left; color: var(--ink); } .matrix .ch { height: 96px; vertical-align: bottom; padding: 0 0 8px; background: transparent; position: static; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--dim); } .matrix .ch span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); } .matrix td { width: 30px; height: 30px; text-align: center; vertical-align: middle; border-radius: 3px; font-weight: 600; font-variant-numeric: tabular-nums; } .matrix td.n { background: var(--panel-2); } .matrix td.s { background: var(--strong-fill); color: var(--strong-ink); } .matrix td.w { background: var(--weak-fill); color: var(--weak-ink); } .matrix td.z { background: var(--void-fill); color: var(--void-ink); background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(128,128,128,.28) 3px 5px); } .matrix td:not(.n):hover { outline: 2px solid var(--ink); cursor: default; } .matrix tbody tr:hover td { background-color: unset; } .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 12.5px; color: var(--dim); align-items: center; } .legend i { display: inline-block; width: 22px; height: 22px; border-radius: 3px; margin-right: 8px; vertical-align: middle; font-style: normal; text-align: center; line-height: 22px; font: 600 11px/22px var(--mono); } .readout { margin-top: 12px; font: 400 12.5px/1.5 var(--mono); color: var(--dim); min-height: 1.5em; } /* --------------------------------------------------------- form controls */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; align-items: center; } input[type="search"], input[type="email"], input[type="text"], select { font: 400 14px/1.4 var(--sans); padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel); color: var(--ink); } input[type="search"] { min-width: 220px; } select { cursor: pointer; } input::placeholder { color: var(--faint); } .count { font: 400 12px/1 var(--mono); color: var(--faint); margin-left: auto; } .btn { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); background: var(--accent); color: #FFF7EC; border: 1px solid transparent; border-radius: var(--radius-s); padding: 11px 18px; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--accent-ink); color: #FFF7EC; } .btn:disabled { opacity: .55; cursor: default; } .btn.ghost { background: transparent; color: var(--accent-ink); border-color: var(--line-2); } .btn.ghost:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); } :root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn:hover { color: #14121A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn, :root:not([data-theme="light"]) .btn:hover { color: #14121A; } :root:not([data-theme="light"]) .btn.ghost { color: var(--accent-ink); } } :root[data-theme="dark"] .btn.ghost { color: var(--accent-ink); } /* ------------------------------------------------------- the email capture */ .ship { background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .shipBox { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; } @media (max-width: 760px) { .shipBox { grid-template-columns: 1fr; gap: 22px; } } .shipCopy p { color: var(--dim); margin: 14px 0 0; max-width: 46ch; } .shipCopy h2 { font-size: clamp(25px, 3.2vw, 36px); } .shipForm { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; } .shipForm input[type="email"] { flex: 1 1 220px; min-width: 0; } .formMsg { flex-basis: 100%; margin: 2px 0 0; min-height: 1.4em; font: 500 13px/1.5 var(--mono); color: var(--dim); } .formMsg.ok { color: var(--accent-ink); } .formMsg.bad { color: var(--terra-ink); } .shipForm noscript { flex-basis: 100%; font: 500 13px/1.5 var(--mono); color: var(--faint); } /* ---------------------------------------------------------- clip player */ .clip { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--deep); border: 1px solid var(--line); box-shadow: 0 14px 40px -18px var(--shade-2); aspect-ratio: 16 / 9; } .clip img, .clip canvas { display: block; width: 100%; height: 100%; object-fit: cover; } .clip canvas { position: absolute; inset: 0; } .clip canvas[hidden] { display: none; } .clipBar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 11px; padding: 11px 14px 12px; background: linear-gradient(180deg, transparent, rgba(15,13,21,.86)); color: #F6EFE2; font: 500 12px/1.3 var(--mono); } .clipBar button { font: inherit; color: inherit; background: rgba(246,239,226,.16); border: 1px solid rgba(246,239,226,.34); border-radius: var(--radius-s); padding: 6px 12px; cursor: pointer; flex: none; } .clipBar button:hover { background: rgba(246,239,226,.28); } .clipBar button:focus-visible { outline: 2px solid #F6EFE2; outline-offset: 2px; } .clipBar .lbl { opacity: .84; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clipBar .stat { margin-left: auto; opacity: .62; flex: none; font-size: 11px; } .clips2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 820px) { .clips2 { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- footer */ .site-foot { background: var(--deep); color: var(--on-deep); padding: 54px 0 44px; margin-top: 0; } .footTop { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; } .footMark { width: 58px; height: 58px; flex: none; } .site-foot p { margin: 0 0 10px; font-size: 14.5px; opacity: .8; max-width: 58ch; } .site-foot a { color: #9FE6E2; } .site-foot a:hover { color: #FFB477; } .footNav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(237,228,213,.16); font: 500 12.5px/1 var(--mono); } .footNav a { color: var(--on-deep); opacity: .78; text-decoration: none; } .footNav a:hover { opacity: 1; color: #FFB477; } .footNote { font: 500 11.5px/1.7 var(--mono); opacity: .5; margin: 18px 0 0; max-width: 64ch; } /* -------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------- narrow up */ @media (max-width: 600px) { :root { --gutter: 16px; } body { font-size: 16px; } section { padding: 52px 0; } .hero { min-height: min(68vh, 560px); } .heroIn { padding-bottom: 38px; } .heroMark { width: 76px; height: 76px; } .hero .sub { font-size: 17px; } .pagehead { padding: 40px 0 28px; } .stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } .stat b { font-size: 24px; } th, td { padding: 9px 11px; } table { font-size: 13.5px; } } /* ------------------------------------------------- spacing, utilities last These sit at the end on purpose: a component that sets `margin` as a shorthand would otherwise silently zero a .mt-* put on the same element. */ .mt-l { margin-top: 38px; } .mt-m { margin-top: 26px; } .mt-s { margin-top: 14px; } /* ======================================================= contrast repairs Four things on this site set text on a colour the stylesheet does not choose: .chip takes an arbitrary --c per row, .fox .vn and .fox .pw b take --fx, .tier .tn takes --tc, and .btn fills with --accent. A single ink colour cannot serve all of them, and measuring said so: white on the pale type chips (Gleam, Spark, Frost) came out at 1.4:1, and the same chips in the dark theme put near-black on Shade at 3.5:1 — the same bug pointing both ways. The 11px fox and tier labels were 2.1–3.0:1 for the same reason, and the solid button was 2.8:1 on the lighter accents. So the ink is derived from the colour it sits on instead of being declared. oklch(from …) reads the background's own lightness: under 0.58 the chip takes white, over it black, which clears 4.5:1 for every colour either page uses. The small labels have their lightness capped rather than flipped, so a fox keeps its hue and only loses the brightness that made it unreadable on paper — the dark theme's fox tokens are already text-safe and are left alone. The button's solid fill moves to --accent-ink, which is the token that already exists for exactly this and is dark enough that the warm white on it passes on all nine accents. Each rule sits behind @supports, so a browser without relative colour keeps what it renders today and nothing regresses. ====================================================================== */ @supports (color: oklch(from red l c h)) { .chip { color: oklch(from var(--c, var(--accent)) clamp(0, (0.58 - l) * 1000, 1) 0 0); } .fox .vn, .fox .pw b { color: oklch(from var(--fx, var(--accent)) min(l, 0.52) c h); } .tier .tn { color: oklch(from var(--tc, var(--accent-ink)) min(l, 0.52) c h); } /* the dark theme's fox and tier colours are already the text-safe ones */ :root[data-theme="dark"] .fox .vn, :root[data-theme="dark"] .fox .pw b { color: var(--fx, var(--accent)); } :root[data-theme="dark"] .tier .tn { color: var(--tc, var(--accent-ink)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fox .vn, :root:not([data-theme="light"]) .fox .pw b { color: var(--fx, var(--accent)); } :root:not([data-theme="light"]) .tier .tn { color: var(--tc, var(--accent-ink)); } } } /* The solid button: a dark fill on paper, a bright one on the dark ground. :not(.ghost) on every one of these — the theme-scoped selectors outweigh .btn.ghost, so without it the outline button gets filled in and its own light text lands on the accent at about 1.3:1. */ .btn:not(.ghost) { background: var(--accent-ink); } .btn:not(.ghost):hover { background: color-mix(in oklab, var(--accent-ink) 82%, #000); } :root[data-theme="dark"] .btn:not(.ghost) { background: var(--accent); } :root[data-theme="dark"] .btn:not(.ghost):hover { background: var(--accent-ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.ghost) { background: var(--accent); } :root:not([data-theme="light"]) .btn:not(.ghost):hover { background: var(--accent-ink); } }