/* ============================================================ tokens.css Badger Fund of Funds EVERY color, type and spacing value for the site lives in this file. Nothing else in the site contains a color value. When the visual identity arrives from the design studio, this file is replaced. No other file needs to change. ============================================================ */ :root { /* --- Color ------------------------------------------------- Placeholder identity: near-black on white, no red. Contrast ratios against --color-canvas (#FFFFFF): --color-ink 17.40:1 --color-ink-muted 7.57:1 --color-rule 5.10:1 Contrast ratios against --color-surface (#F0F0F0): --color-ink 15.27:1 --color-ink-muted 6.65:1 --color-rule 4.47:1 (border only, 3:1 threshold) --------------------------------------------------------- */ --color-canvas: #FFFFFF; /* page background */ --color-surface: #F0F0F0; /* table header row fill */ --color-ink: #1A1A1A; /* all body and heading text */ --color-ink-muted: #545454; /* footer text */ --color-ink-inverse: #FFFFFF; /* text on a dark fill */ --color-rule: #6E6E6E; /* borders and dividers */ /* Two lighter hairlines, used only inside the Portfolio composition. The client approved that page on a board that drew its rules at these values and asked on October 7 for the page to match it. Contrast on --color-canvas: --color-rule-soft 1.45:1 the five segment headings --color-rule-faint 1.19:1 the four Fund Focus items Both sit below the 3:1 this build holds elsewhere, and that is a deliberate exception, not an oversight. These are decorative separators. They identify no control and carry no information: the headings above them are --color-ink at 17.40:1 and the page reads the same with the rules removed. No text pair changes. Portfolio carries nine of these hairlines against one or two on every other page, which is why --color-rule reads heavy there and nowhere else. Anywhere outside that composition, use --color-rule. On paper both are restored to --color-print-rule. See print.css. --------------------------------------------------------- */ --color-rule-soft: #D9D6CE; /* Portfolio segment headings */ --color-rule-faint: #EDEBE6; /* Portfolio Fund Focus */ --color-focus: #1A1A1A; /* keyboard focus outline */ /* Print. Kept separate so the screen identity can change without changing what comes out of the printer. */ --color-print-canvas: #FFFFFF; --color-print-ink: #000000; /* 21.00:1 */ --color-print-rule: #000000; /* Print measurements. Letter paper, portrait. Still one type size for body and headings, set in points because that is the unit a printer works in. */ --print-page-size: letter portrait; --print-page-margin: 0.75in; --print-font-size: 11pt; /* retunes every role above */ --print-line-height: 1.45; /* --- Type -------------------------------------------------- One typeface. One size. Weight and spacing carry hierarchy. Every name below is a system font. Nothing loads from a CDN. --------------------------------------------------------- */ /* Aptos is the theme font of the text document the board approved on October 21, 2026. Word resolves 216 of that file's runs through minorHAnsi, which points at the theme, and names Aptos in 101 more. Corbel sits in its docDefaults and is used by nothing, so the document Ken reads on the Lenovo is set in Aptos, not Corbel. Aptos ships with Windows 11 and with Microsoft 365. The Lenovo and the DOA staff see Aptos itself. macOS, iOS and Android do not have it and fall to the names after it. Corbel leads those fallbacks. It is the typeface this build used through October 21 and it ships with Office for Mac. Trebuchet MS covers a Mac with no Office installed. Optima sat in this list and was removed: its flared stems and stroke contrast read as a serif, so a machine without Corbel rendered a different page. WHAT THIS COSTS: the site renders in two typefaces. Ken asked on October 21 to see the alpha on an Apple laptop, a large Apple screen and an iPhone. Those three show Corbel. Serving Aptos as a webfont is the only way to close that gap, and this file loads nothing from a CDN today. */ --font-family-base: Aptos, Corbel, "Segoe UI", Candara, "Trebuchet MS", "Lucida Grande", "DejaVu Sans", sans-serif; /* THE TYPE SCALE ------------------------------------------------------------ Right now the site has one type size. Every role below points at --font-size-base, so the whole page renders at 17px and hierarchy is carried by weight, letter spacing and whitespace. That is the client's direction until the identity arrives. TO INTRODUCE A SCALE WHEN THE IDENTITY ARRIVES Change the value to the right of a role below. Change nothing in site.css or print.css. Each role is already wired to the part of the page it names, so setting --font-size-h1: 1.75rem; makes every page's h1 larger and touches no other file. Do not put a size directly on an element in site.css. If a new part of the page needs its own size, add a role here first. */ --font-size-base: 1.0625rem; /* 17px. The anchor value. */ /* Roles. One per place the identity is allowed to differ. */ --font-size-body: var(--font-size-base); --font-size-h1: var(--font-size-base); --font-size-h2: var(--font-size-base); --font-size-h3: var(--font-size-base); --font-size-site-name: var(--font-size-base); --font-size-nav: var(--font-size-base); --font-size-term: var(--font-size-base); /* dt labels */ /* The table is set slightly smaller than the rest of the page, at the client's request. The table and the footer are the two places that use this second size. It is written as a ratio of the base rather than a fixed value, so it follows the base into print and into whatever the identity sets. To put the table back on one size with the rest of the page, change both values to var(--font-size-base). */ --font-size-table: calc(var(--font-size-base) * 0.88); /* td */ --font-size-table-head:calc(var(--font-size-base) * 0.88); /* th */ /* The footer runs on one line, which needs the same reduction the table uses. Deliberately the SAME ratio as the table so the page still has only two type sizes on it, not three. */ --font-size-footer: calc(var(--font-size-base) * 0.88); /* The tagline in the footer's right column. Set larger than the rest of the footer at the client's request on October 22. It is the brand line, not a notice, so it is the one part of the footer that does not take the reduction above. 1.18 of the base is 20px, against 15px on the notice beside it and 17px in the body. It does not make the footer taller: the notice column runs three lines at 15px, which is 65px, and two lines of 20px with tight spacing is 48px. Past about 1.6 the tagline becomes the taller column and the footer grows. */ --font-size-footer-tagline: calc(var(--font-size-base) * 1.18); /* The Portfolio page. It carries 29 marks, headshots and fund names in one composition the client approved at a fixed size, so it is the one page where the base size does not fit the content. Three roles, written as ratios of the base like the table and the footer above, so they follow the base into print and into whatever the identity sets. --portfolio-body matches the table and footer ratio on purpose. It is the same second size the page already has, not a third. The other two are new and the client approved them on the board dated October 2026. At 1440 the four Fund Focus columns need 1213px of text at the base size and the content column holds 1104, so the row wraps. --portfolio-fine is what keeps it on one line, which the client asked for by name. */ --font-size-portfolio-body: calc(var(--font-size-base) * 0.88); --font-size-portfolio-label: calc(var(--font-size-base) * 0.71); --font-size-portfolio-fine: calc(var(--font-size-base) * 0.65); --font-size-caption: var(--font-size-base); /* figcaption */ /* Line spacing. Tightened to help the page fit one screen. 1.4 on body copy is the floor this build will go to. At 17px that leaves 7px of clear space between lines. Going to 1.08, which was asked about, leaves 1px: descenders and ascenders on neighbouring lines collide and dense paragraphs become hard to read. 1.08 is a headline value, not a body value. --line-height-tight applies only to single-line items, the page headings and the fund name, where tight spacing costs nothing because there is no second line. */ /* The document sets w:line="259" w:lineRule="auto" on every paragraph. "auto" multiplies the font's own single line height, which is 1.21 for Aptos, so 259/240 x 1.21 = 1.30. An earlier note in this project read 259/240 as 1.08 and called it unreadable. That was wrong: 1.08 is the multiplier, not the line height. */ --line-height-base: 1.3; --line-height-tight: 1.2; --font-weight-regular: 400; --font-weight-bold: 700; --letter-spacing-h1: 0.02em; --letter-spacing-h2: 0.06em; --letter-spacing-base: 0; /* --- Word document geometry --------------------------------- Every measurement below is read out of 26.10.21 text compltd rev 3 kj final.docx and written as a percentage of the part of the page it sits in, so the layout holds at any window width. THE SHEET 11.00in wide, landscape, 1.00in margins Body text block 1.00in to 10.00in = 9.000in Header and footer bar 0.56in to 9.99in = 9.434in The bar hangs 0.44in left of the body text. Both end at the same place on the right. That offset is --main-inset below. To change a value, read the new one out of the document and divide: a measurement inside the body text divides by 9.000, one inside the header or footer bar divides by 9.434. --------------------------------------------------------- */ /* 0.44in of the 9.434in bar, which is 4.66%. A percentage here measures the window, not the text column, because .main is a flex child of body. At and above the 72rem page width that over-states it, so 3.2rem caps it: 4.66% of a 1440 window is 67px and the cap holds it at the correct 51. Below 72rem the wrapper is the window and the percentage is right on its own. It was a bare 3.2rem until October 24. Fixed, it was 3.5% of a 1440 window and 14.2% of a 360 one, so a phone spent a seventh of its screen on a relationship that only exists on a printed landscape sheet. */ --main-inset: min(3.2rem, 4.66%); /* --page-gutter is the breathing room at the edge of the screen. On a phone it is the whole margin, because the inset above goes to zero there. See the rule under the tokens. */ /* Navigation bar. header2.xml is a seven cell table: a logo cell of 2364 twips and six page cells of 1851 to 1949, which is one sixth of the rest to within 2 percent. Row height is exact at 720 twips, which is 0.50in. */ --nav-logo-column: 17.40%; --bar-height: 48px; /* The document puts each page name in its own cell of equal width, which spreads them across the bar. The client asked on October 23 for them packed against the right edge with one space between each instead, so the cell grid is not used and this is the space. One number changes all five gaps. */ --nav-gap: var(--space-lg); /* Footer. footer2.xml is a two cell table, 10255 and 3330 twips. */ /* 80% and not 75.49%. The DOA link text went back to "DOA reporting" on 28 October and at 75.49% the word "reporting" dropped to a second line on a 1432px window, which is Ken's. 80% holds it on one line from 1432 up and still leaves the tagline its two lines at every width down to 1024. The footer stays 68px either way. */ --footer-notice-column: 80%; /* Objectives on Home. ind left=3600 hanging=2880, so the label sits at 0.50in and the statement at 2.50in. */ --objective-indent: 5.56%; /* 0.50in of 9.00in */ --objective-label-width: 22.22%; /* 2.00in of 9.00in */ /* Objectives on Strategy. ind left=2160 hanging=2160, so the label sits at the margin and the statement at 1.50in. Ken set this page differently from Home, where the block is indented 0.50in and the statement sits 2.00in after the label. The three rows do not line up in the document. Rows 1 and 2 carry a tab stop at 1.50in and one tab character. "Investment Focus" lands on that stop. "Geographic Diversity" is wider than 1.50in, so its tab skips to Word's default grid at 2.00in. Row 3 carries no indent and two tab characters, so it lands at 2.00in as well. Measured off the rendered page: 1.50in, 2.00in, 2.00in. The site puts all three at 1.50in. Pending Ken's answer on whether Strategy should match Home instead. */ --objective-indent-strategy: 0%; --objective-label-width-strategy: 16.67%; /* 1.50in of 9.00in */ /* The numbered list of segments. numbering.xml numId 2 is decimal, "%1.", ind left=720 hanging=360. The paragraph overrides left to 1080. Number at 0.50in, text at 0.75in. */ --list-number-indent: max(1rem, 5.56%); /* 0.50in of 9.00in */ --list-text-indent: 8.33%; /* 0.75in of 9.00in */ /* Space after a paragraph. Every paragraph in the document carries after=120 twips, which is 6pt against 11pt type. Written in em so it follows the type size. */ --space-paragraph: 0.545em; /* --- Spacing ----------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.25rem; --space-xl: 3rem; --space-2xl: 4rem; /* Vertical rhythm between sections. The client requires the page to fit one 1440x900 screen without scrolling, so this is deliberately tight. Raise it if that rule is relaxed. */ --space-section: var(--space-md); /* --- Measure ----------------------------------------------- Prose is held to a readable line length. The table is allowed the wider column. --------------------------------------------------------- */ /* The document runs body copy the full 9.00in of the text block, about 134 characters to a line. A 34rem cap sat here until October 22 and wrapped every paragraph at half the column, which is the largest single difference the client saw between the page and the document. Prose now fills its column. The column is 1104px at the 72rem page width. At 17px type that is about 124 characters, 7 percent short of the document. Raising --font-size-base to 18px closes it exactly and changes every other size on the site, so it is left at 17. */ --measure-text: none; /* Copy that runs the width of the table rather than the reading measure. 100% fills the content column, so the right edge lines up with the table above it. For copy that stops about three quarters of the way across instead, set this to 75%. Set to 75%: at the current page width 100% would put roughly 140 characters on a line, which is too long to read. 75% comes to about 105 characters, the same line length this copy had before the page was widened. */ /* Kept for the classes that name it. Equal to the measure above now that prose is not capped. */ --measure-wide: 100%; /* Widened from 58rem so the table's rows fit two lines instead of three, which is what the client's reference table shows. Below about 72rem the Governance and Description cells wrap to a third line and the table grows by roughly 95px. */ --measure-page: 72rem; --page-gutter: var(--space-md); /* --- Artwork ----------------------------------------------- NO ARTWORK IS ON THE SITE YET. Nothing below renders today, because no page contains an image. These values exist so the identity mark and any later photography can be added by editing this file and dropping in a file, without anyone touching site.css or print.css. Two kinds are planned for: 1. The identity mark, in the site header and on paper. 2. Photographs or illustrations inside a page. No new colors are introduced. Captions reuse --color-ink-muted, already verified at 7.57:1. --------------------------------------------------------- */ --logo-max-width: 14rem; /* mark in the screen header */ --logo-print-width: 2.25in; /* mark on letter paper */ --figure-max-width: var(--measure-page); --space-figure: var(--space-lg); /* People photos on the Team page. Square, so a portrait and a landscape photo both fill the same box. The name sits beside the photo, first name above last. 5rem keeps Team inside one screen once the board review notice is removed. */ /* 4.5rem, reduced from 7rem on October 23. Team was the one page whose footer moved on the client's screen: it ran 866px while no other page passed 802. Two rows of photographs at 112px are 224px of the page, so taking them to 72px returns 80px and puts Team at 786, under every other page. The photographs are 426x640, so 72px is a crop and not an enlargement. */ --photo-size: 4.5rem; /* the square each person sits in */ --photo-focus: 8%; /* which part of the portrait it keeps */ --photo-zoom: 1.35; /* enlarges so the crop ends at the shoulders */ /* Moves a portrait sideways inside its frame. It has to be a nudge rather than a second object-position value: the photographs are 426x640 in a square frame, so object-fit: cover matches the width exactly and leaves nothing to slide horizontally. The horizontal half of object-position does nothing on this page. Vertically there is half a frame of overflow, which is what --photo-focus moves. Negative moves the subject left. Belongs to one photograph; a replacement photograph needs its own. */ --photo-nudge-x: 0%; /* --- Lines ------------------------------------------------- */ --border-width-hairline: 1px; --border-width-heavy: 2px; --focus-ring-width: 3px; --focus-ring-offset: 2px; } /* --- The document inset does not apply to a phone -------------- Ken's 0.44in exists because his header and footer tables hang that far left of his body text on a printed landscape sheet. Below the width where the navigation stacks, the bars and the text are all one width and there is no such relationship to reproduce. Left in, it made the copy sit 42px from the left edge against 24 on the right, which reads as a mistake rather than as a margin. The deployed site is worse still at 75px, 19 percent of a 393pt phone. 48rem is the same width the navigation collapses at. --------------------------------------------------------------- */ @media screen and (max-width: 47.9375rem) { :root { --main-inset: 0px; } }