/* Copyright 2026 i8i.io | Foundation.css */ /* The palette, the frame and the shell every page stands on, and the text every page shares */ /* System: CSS | Part: Foundation */ /* Version: 1.0.C6J10 */ /* =============================================================== */ /* TOKENS */ /* =============================================================== */ /* What every part styles from, held on the document root - the palette, the shared type, and every website-wide part */ .i8i { /* ....... Shared ....... */ /* ... Color ... */ --i8i-Color-Red: oklch(0.68 0.200 25 ); --i8i-Color-Orange: oklch(0.72 0.180 50 ); --i8i-Color-Yellow: oklch(0.84 0.170 95 ); --i8i-Color-Lime: oklch(0.78 0.200 130); --i8i-Color-Green: oklch(0.72 0.175 155); --i8i-Color-Cyan: oklch(0.74 0.130 215); --i8i-Color-Blue: oklch(0.66 0.180 255); --i8i-Color-Purple: oklch(0.64 0.200 300); --i8i-Color-Magenta: oklch(0.68 0.200 345); --i8i-Color-Base: oklch(0.21 0 0 ); --i8i-Color-Panel: oklch(0.26 0 0 ); --i8i-Color-Raised: oklch(0.33 0 0 ); --i8i-Color-Line: oklch(0.45 0 0 ); --i8i-Color-Quiet: oklch(0.80 0 0 ); --i8i-Color-Text: oklch(0.95 0 0 ); /* ... Text ... */ --i8i-Text-TitleFont: var(--i8i-Font-Title); --i8i-Text-TitleWeight: var(--i8i-FontWeight-700); --i8i-Text-TitleLineHeight: var(--i8i-LineHeight-120); /* ....... Root ....... */ /* ... Color ... */ --i8i-Root-Color-ScrollThumb: var(--i8i-Color-Line); --i8i-Root-Color-ScrollTrack: transparent; /* ....... Frame ....... */ /* ... Color ... */ --i8i-Frame-Color-Surface: var(--i8i-Color-Base); /* ....... Shell ....... */ /* ... Space ... */ --i8i-Shell-Space-Edge: clamp(var(--i8i-Padding-016), 0.6667rem + 1.6667svi, var(--i8i-Padding-032)); --i8i-Shell-Space-Gap: clamp(var(--i8i-Gap-16 ), 0.8333rem + 0.8333svi, var(--i8i-Gap-24 )); --i8i-Shell-Space-Padding: max(var(--i8i-Shell-Space-Edge), env(safe-area-inset-top)) max(var(--i8i-Shell-Space-Edge), env(safe-area-inset-right)) max(var(--i8i-Shell-Space-Edge), env(safe-area-inset-bottom)) max(var(--i8i-Shell-Space-Edge), env(safe-area-inset-left)); /* ... Depth ... */ --i8i-Shell-Depth-Order: var(--i8i-zIndex-0000); /* ....... MainTextHeading ....... */ /* ... Color ... */ --i8i-MainTextHeading-Color-Ink: var(--i8i-Color-Text); /* ... Text ... */ --i8i-MainTextHeading-Font: var(--i8i-Text-TitleFont); --i8i-MainTextHeading-Size: clamp(var(--i8i-FontSize-032), 1.6667rem + 1.6667cqi, var(--i8i-FontSize-048)); --i8i-MainTextHeading-Weight: var(--i8i-Text-TitleWeight); --i8i-MainTextHeading-LineHeight: var(--i8i-Text-TitleLineHeight); /* ....... MainTextLine ....... */ /* ... Color ... */ --i8i-MainTextLine-Color-Ink: var(--i8i-Color-Quiet); /* ... Text ... */ --i8i-MainTextLine-Size: clamp(var(--i8i-FontSize-016), 0.9583rem + 0.2083cqi, var(--i8i-FontSize-018)); --i8i-MainTextLine-Weight: var(--i8i-FontWeight-400); --i8i-MainTextLine-LineHeight: var(--i8i-LineHeight-160); /* ....... MainTextLink ....... */ /* ... Color ... */ --i8i-MainTextLink-Color-Ink: var(--i8i-Color-Cyan); --i8i-MainTextLink-Color-Hover: oklch(from var(--i8i-MainTextLink-Color-Ink) calc(l + 0.08) c h); --i8i-MainTextLink-Color-Active: oklch(from var(--i8i-MainTextLink-Color-Ink) calc(l - 0.08) c h); --i8i-MainTextLink-Color-Focus: var(--i8i-Color-Yellow); /* ... Shape ... */ --i8i-MainTextLink-Shape-OutlineWidth: var(--i8i-OutlineWidth-02); --i8i-MainTextLink-Shape-FocusOffset: var(--i8i-OutlineOffset-04); } /* =============================================================== */ /* STRUCTURE */ /* =============================================================== */ /* The document root - its dark scheme, the scrollbar colors, and the font every part inherits */ .i8i { color-scheme: dark; scrollbar-color: var(--i8i-Root-Color-ScrollThumb) var(--i8i-Root-Color-ScrollTrack); font-family: var(--i8i-Font-Body); } /* The frame - the outermost in-flow layer, covering the viewport in the dark surface */ .i8iFrame { box-sizing: border-box; min-block-size: var(--i8i-svb-100); container-type: inline-size; background-color: var(--i8i-Frame-Color-Surface); margin: 0; } /* The shell - the fixed layer over the viewport, holding every container that stands outside the flow */ .i8iShell { box-sizing: border-box; position: fixed; inset: 0; z-index: var(--i8i-Shell-Depth-Order); container-type: inline-size; display: grid; gap: var(--i8i-Shell-Space-Gap); padding: var(--i8i-Shell-Space-Padding); pointer-events: none; } /* A page's heading - the one title every page opens with */ .i8iMainTextHeading { box-sizing: border-box; margin-block: 0; color: var(--i8i-MainTextHeading-Color-Ink); font-family: var(--i8i-MainTextHeading-Font); font-size: var(--i8i-MainTextHeading-Size); font-weight: var(--i8i-MainTextHeading-Weight); line-height: var(--i8i-MainTextHeading-LineHeight); } /* A line of text - the body copy every page and every part shares */ .i8iMainTextLine { box-sizing: border-box; margin-block: 0; color: var(--i8i-MainTextLine-Color-Ink); font-size: var(--i8i-MainTextLine-Size); font-weight: var(--i8i-MainTextLine-Weight); line-height: var(--i8i-MainTextLine-LineHeight); } /* A link - text that leads to another address, underlined so it reads as a link beyond its color */ .i8iMainTextLink { box-sizing: border-box; color: var(--i8i-MainTextLink-Color-Ink); text-decoration-line: underline; } /* A visited link keeps its resting ink, the website marking no history */ .i8iMainTextLink:visited { color: var(--i8i-MainTextLink-Color-Ink); } /* A hovered link lightens its ink and drops its underline, its state read beyond its color */ .i8iMainTextLink:hover { color: var(--i8i-MainTextLink-Color-Hover); text-decoration-line: none; } /* A link the keyboard reached carries the focus ring */ .i8iMainTextLink:focus-visible { outline: var(--i8i-MainTextLink-Shape-OutlineWidth) solid var(--i8i-MainTextLink-Color-Focus); outline-offset: var(--i8i-MainTextLink-Shape-FocusOffset); } /* A pressed link darkens its ink and drops its underline, its state read beyond its color */ .i8iMainTextLink:active { color: var(--i8i-MainTextLink-Color-Active); text-decoration-line: none; }