/* ========================================================================== base.css Fonts, design tokens (the look), reset and basic typography. Loaded on every page, before layout.css. The whole look (colours, shapes, the footer, the logo) is set by the tokens in section 3: change it there, once, for every page. (Look chosen by Mehul, Oct 2026: "Aalto" — warm birch paper, pine green, lake blue, rounded forms; the logo "Confluence" and its four discs.) Contents 1. Font (Finlandica, served from this site) 2. Tokens for sizes and spacing 3. Tokens of the look (colours, shapes) 4. Reset and typography 5. Icons ========================================================================== */ /* -------------------------------------------------------------------------- 1. Font: Finlandica (Helsinki Type Studio, the typeface of Finland's national brand), assets/fonts/, licence OFL.txt there. One variable file per style covers weights 400–700; latin-ext loads only when needed. -------------------------------------------------------------------------- */ @font-face { font-family: Finlandica; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/finlandica-latin.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: Finlandica; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/finlandica-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Finlandica; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/finlandica-latin-italic.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: Finlandica; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/finlandica-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. Tokens for sizes and spacing -------------------------------------------------------------------------- */ :root { --font: Finlandica, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* widths */ --content-max: 68rem; /* content width on every page */ --measure: 46rem; /* longest line of running text */ --gutter: clamp(1rem, 4vw, 2.5rem); /* left / right page margin */ --space: clamp(2.5rem, 6vw, 4rem); /* between blocks */ --tap: 44px; /* minimum touch target */ /* type scale */ --fs-display: clamp(3.4rem, 10vw, 7.5rem); /* page title */ --fs-title: clamp(1.45rem, 2.6vw, 2rem); /* item titles */ --fs-sub: clamp(1.2rem, 2vw, 1.45rem); /* subtitle under the page title */ --fs-body: 1.0625rem; /* 17px reading text */ --fs-small: .9375rem; /* 15px notes, menu */ --fs-label: .875rem; /* 14px tags, buttons */ --leading: 1.6; } /* -------------------------------------------------------------------------- 3. Tokens of the look: "Aalto" — warm and calm. Birch-white paper, black type, pine green for details, lake blue for links, rounded images, one wave line under each page title; the footer is a pine-green field with the logo as a faint watermark. Contrast (WCAG AA): ink 15.3:1, ink-soft 7.4:1, pine green 7.1:1, lake blue 7.0:1 on the paper; white on pine green 7.9:1 (5.8:1 on the watermark). -------------------------------------------------------------------------- */ :root { --paper: #f6f3ec; /* page background: birch white */ --ink: #1c1d1a; /* main text */ --ink-soft: #4d5048; /* secondary text, quotes */ --line: rgba(28, 29, 26, .16); /* thin lines */ --accent: #2e5a43; /* pine green: details, icons, buttons */ --accent-ink: #ffffff; /* text on the pine green */ --link: #22577a; /* links: lake blue */ --link-mark: #22577a; /* their underline */ --icon: var(--accent); /* the bullhorn and other icons */ --logo: var(--accent); /* the logo in the header (favicon.svg: the same pine, written out) */ --bar-bg: var(--paper); /* top bar with the menu (solid: it stays at the top) */ --bar-ink: var(--ink); --bar-current: var(--accent); /* current page in the menu */ --progress: var(--accent); /* reading-progress line under the menu */ --wave: var(--accent); /* the wave line under each page title */ --rule-item: 1px solid var(--line); /* above each item */ --pill: 999px; /* buttons, tags */ --img-radius: 18px; /* images and videos */ --img-mute: .4; /* images' colour strength until pointed at (1 = full) */ --portrait-tint: var(--accent); /* People: the pine tint over the black-and-white portraits … */ --portrait-tint-strength: .45; /* … and its strength (0 = plain black and white) */ --pop-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent); /* a figure lifting when pointed at: a soft pine shadow */ --tray-bg: #ede8dc; /* a soft tray holding a group of figures (Profile) */ --timeline-year: var(--accent); /* Initiatives: the years … */ --timeline-dot: var(--accent); /* … and the dot beside each */ --footer-bg: var(--accent); /* footer: pine-green field … */ --footer-ink: #ffffff; --footer-line: rgba(255, 255, 255, .2); /* … the thin line above the copyright … */ --footer-watermark: .1; /* … and the logo as a watermark (its strength) */ --footer-button-bg: #ffffff; --footer-button-ink: var(--accent); } /* -------------------------------------------------------------------------- 4. Reset and typography -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--leading); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, iframe { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; } p, li, blockquote { text-wrap: pretty; } p { margin: 0 0 1em; } a { color: var(--link); text-decoration-thickness: 2px; text-decoration-color: var(--link-mark); text-underline-offset: .2em; } a:hover { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .6rem 1rem; color: var(--paper); background: var(--ink); } .skip-link:focus { top: 1rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- 5. Icons (assets/js/icons.js, made by tools/make_icons.py) -------------------------------------------------------------------------- */ .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; flex: none; }