/* NOTE Designframe 0.99.53 Release */ /* -------------------------------------------------------------------------------------------- */ /* NOTE Getting Started */ /* -------------------------------------------------------------------------------------------- */ /* Designframe can be configured using the calculator then implementing output values in the */ /* "SECTION CONFIG" sections below. */ /* * You can edit your Theme, change specific values, and add custom classes in this file. */ /* * Keeping the default Designframe Preferred Values is strongly recommended. */ /* * Icon Fonts (e.g. Font Awesome) are implemented independently of Designframe. */ /* * Official Tailwind Forms Plug-In REQUIRED */ /* -------------------------------------------------------------------------------------------- */ /* VS CODE USERS: Table of Contents and Sections Anchors are implemented using */ /* https://marketplace.visualstudio.com/items?itemName=ExodiusStudios.comment-anchors */ /* with LAYER as a custom anchor tag. */ /* -------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* PROJECT CUSTOMIZATION GUIDELINES */ /* Any customizations specific to your project should use a unique prefix to avoid conflicts with future Designframe updates. */ /* For example, if your project is called "Example", you could use the prefix "ex-" for all customizations. */ /* e.g. ".ex-" for classes, "#ex-" for IDs, and "--ex-" for variables. */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* All custom CSS variables should be placed in the CONFIG Custom Variables section at the top part of this file. */ /* All custom CSS classes and IDs should be placed in the CONFIG Custom CSS Classes section at the bottom of this file. */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* CUSTOMIZATION NOTES */ /* This file can be customized for your project with custom utilities. */ /* If you do so, use a prefix for any custom utilities you create, such as "xx". */ /* e.g. ".xx-" for classes, "#xx-" for IDs, and "--xx-" for variables. */ /* Do not use "qs" or "cx" prefixes to avoid conflicts with future Designframe updates. */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* -------------------------------------------------------------------------------------------- */ /* SECTION Required Tailwind Directives - DO NOT EDIT */ /* -------------------------------------------------------------------------------------------- */ *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: var(--font-mono), var(--font-mono-alt1), var(--font-mono-alt2); /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border-color: #6b7280; border-width: 1px; border-radius: 0px; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; --tw-shadow: 0 0 #0000; } input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-color: #2563eb; } input::-moz-placeholder, textarea::-moz-placeholder { color: #6b7280; opacity: 1; } input::placeholder,textarea::placeholder { color: #6b7280; opacity: 1; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-date-and-time-value { min-height: 1.5em; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; } select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } select:where([multiple]),select:where([size]:not([size="1"])) { background-image: initial; background-position: initial; background-repeat: unset; background-size: initial; padding-right: 0.75rem; -webkit-print-color-adjust: unset; print-color-adjust: unset; } input:where([type='checkbox']),input:where([type='radio']) { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: #2563eb; background-color: #fff; border-color: #6b7280; border-width: 1px; --tw-shadow: 0 0 #0000; } input:where([type='checkbox']) { border-radius: 0px; } input:where([type='radio']) { border-radius: 100%; } input:where([type='checkbox']):focus,input:where([type='radio']):focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } input:where([type='checkbox']):checked,input:where([type='radio']):checked { border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } input:where([type='checkbox']):checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } @media (forced-colors: active) { input:where([type='checkbox']):checked { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } input:where([type='radio']):checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } @media (forced-colors: active) { input:where([type='radio']):checked { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus { border-color: transparent; background-color: currentColor; } input:where([type='checkbox']):indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } @media (forced-colors: active) { input:where([type='checkbox']):indeterminate { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus { border-color: transparent; background-color: currentColor; } input:where([type='file']) { background: unset; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: unset; line-height: inherit; } input:where([type='file']):focus { outline: 1px solid ButtonText; outline: 1px auto -webkit-focus-ring-color; } /* Do not edit */ /* ---------------------------- */ /* SECTION - FONT IMPORT START */ /* ---------------------------- */ /* ANCHOR Font Setup */ /* ---------------------------- */ /* Add and name your fonts. */ /* Pattern: ONE role-token family name per typography role (display, heading, body, mono), * aliased to one or more @font-face entries. The browser's font-matching algorithm * selects the entry whose font-weight + font-style match the requested style — so * , , and weight modifiers render with REAL glyphs from the matching file, * never as algorithmically distorted pseudo-variants. The role-token name is the stable * contract; consumers swap src URLs without touching :root vars, Tailwind utilities, or * any downstream rule that references the role. * * Works identically with variable fonts (axis-range entries + optional axis pinning via * `font-variation-settings` descriptor) and non-variable fonts (one entry per weight/style * combo). See the non-variable example block at the end of this section. */ /* Explicit weight & style targeting — how DF curates which physical rendering each * HTML/Tailwind weight request maps to. * * Browser default: Tailwind Preflight applies `b, strong { font-weight: bolder }`. With * default body weight 400 inherited, `bolder` resolves to 700 per CSS Fonts §5.3.2 step * table. So , , and `.font-bold` all request font-weight: 700. * * DF body (General Sans) chooses to render bold at axis weight 600 — visually appropriate * for body emphasis, less heavy than 700. Achieved by splitting the @font-face range: * - One entry: font-weight: 200 500 → matches light/normal/medium, renders at requested weight * - One entry: font-weight: 600 900 → matches semibold+heavier; pins axis to 600 via * `font-variation-settings: 'wght' 600` * Result: every bold-or-heavier Tailwind utility (.font-semibold, .font-bold, .font-extrabold, * .font-black) collapses to the design-curated 600 rendering. Non-variable forks achieve the * same effect by declaring a discrete `font-weight: 700` entry pointing at a SemiBold file — * see CS's NotoSans pattern as the canonical non-variable example at the end of this section. * * DF heading + display (Satoshi) intentionally use the natural axis (no remap) — headings * benefit from the full weight range. DF mono (Commit Mono) ships normal-only axis pinning * for italic via the file's `ital` axis (this single-file variable handles both styles). * * Inline emphasis HTML convention: * italic emphasis — semantically correct, cascade dispatches to italic @font-face * + bold emphasis — Preflight makes both request bolder; same rendering * RESERVED for Font Awesome icons in DF (e.g. ). * Do NOT use for italic text — DF's `i { ... }` rule treats it as an icon * container. For italic text in DF, always use . * See df-rules.md §1.5 for the normative version of this convention. */ /* ANCHOR Theme Base Variables - Fonts */ /* Designframe ships with — but is not tied to: * Satoshi Indian Type Foundry, SIL OFL via Fontshare. Variable wght 300-900, * upright + italic (separate file). Display + heading (geometric grotesque). * General Sans Indian Type Foundry, SIL OFL via Fontshare. Variable wght 200-700, * upright + italic (separate file). Body (grid-derived neutral grotesque). * Bold pinned to axis 600 — see explicit-targeting block above. * Commit Mono Eigil Nikolajsen, SIL OFL via commitmono.com. Variable wght 200-700 + * ital 0-1 (italic IS an axis on the same file — no separate italic file). * Mono (code surfaces, ligature-free). * * Forking projects: replace the src URLs with your own font files. Keep the role-token * family names (displayFontFamily / headingFontFamily / bodyFontFamily / monoFontFamily) * unchanged so :root assignments, Tailwind utilities, and every consumer stylesheet keep * resolving correctly. body's `font-synthesis: none` rule (in the base layer below) * catches any missing weight/style variant by falling back to the closest declared file * rather than letting the browser synthesize a distorted glyph. */ /* Display — Satoshi (variable, normal + italic) */ @font-face { font-family: 'displayFontFamily'; /* Do not change — must match --font-display variable */ src: url('../src/fonts/Satoshi-Variable.woff2') format('woff2-variations'); font-weight: 300 900; /* Variable axis range — use a discrete weight (e.g. 400) for non-variable fonts */ font-style: normal; font-display: swap; } @font-face { font-family: 'displayFontFamily'; src: url('../src/fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'); font-weight: 300 900; font-style: italic; font-display: swap; } /* Heading — Satoshi (variable, normal + italic) — same files as display under a separate role token */ @font-face { font-family: 'headingFontFamily'; /* Do not change — must match --font-heading variable */ src: url('../src/fonts/Satoshi-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'headingFontFamily'; src: url('../src/fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'); font-weight: 300 900; font-style: italic; font-display: swap; } /* Body — General Sans (variable, normal + italic). * Four entries: light-to-medium ranges render at requested weight; bold-or-heavier ranges * pin the wght axis to 600 (DF's design-curated bold target). See explicit-targeting comment * block above for the full rationale + cross-reference to df-rules.md §1.5. */ @font-face { font-family: 'bodyFontFamily'; /* Do not change — must match --font-body variable */ src: url('../src/fonts/GeneralSans-Variable.woff2') format('woff2-variations'); font-weight: 200 500; /* Light/normal/medium — variable axis renders at requested weight */ font-style: normal; font-display: swap; } @font-face { font-family: 'bodyFontFamily'; /* Bold target: any request 600-900 (semibold, bold, extrabold, black) pins axis to 600 */ src: url('../src/fonts/GeneralSans-Variable.woff2') format('woff2-variations'); font-weight: 600 900; font-style: normal; font-variation-settings: 'wght' 600; font-display: swap; } @font-face { font-family: 'bodyFontFamily'; src: url('../src/fonts/GeneralSans-VariableItalic.woff2') format('woff2-variations'); font-weight: 200 500; font-style: italic; font-display: swap; } @font-face { font-family: 'bodyFontFamily'; /* Bold italic target: any italic request 600-900 pins axis to 600 */ src: url('../src/fonts/GeneralSans-VariableItalic.woff2') format('woff2-variations'); font-weight: 600 900; font-style: italic; font-variation-settings: 'wght' 600; font-display: swap; } /* Mono — Commit Mono (dual-axis variable: wght 200-700 + ital 0-1). * Italic lives on the same physical file via the `ital` axis — both entries point at the * same woff2; the `font-variation-settings` descriptor dials ital to 0 (upright) or 1 * (italic). This is cleaner than the Satoshi/General Sans pattern (which uses two separate * physical files) because Commit Mono's italic is a virtual axis, not a separate design. */ @font-face { font-family: 'monoFontFamily'; /* Do not change — must match --font-mono variable */ src: url('../src/fonts/CommitMono-Variable.woff2') format('woff2-variations'); font-weight: 200 700; font-style: normal; font-variation-settings: 'ital' 0; /* explicit upright (defensive — browser default is 0 but spelling it out survives weird font-style-to-axis dispatch) */ font-display: swap; } @font-face { font-family: 'monoFontFamily'; src: url('../src/fonts/CommitMono-Variable.woff2') format('woff2-variations'); font-weight: 200 700; font-style: italic; font-variation-settings: 'ital' 1; /* dial the ital axis to 1 — true italic glyphs from the variable file */ font-display: swap; } /* ---------------------------- */ /* Non-variable font pattern (reference — the CS sibling uses this with NotoSans). * Replace any variable entry above with discrete weight/style entries under the same * role-token name. Each entry maps ONE physical font file to ONE specific weight + style * combination, and the browser cascade dispatches to the matching file natively. The * role-token contract is identical regardless of which mechanism you use: * * @font-face { font-family: 'bodyFontFamily'; src: url('NotoSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } * @font-face { font-family: 'bodyFontFamily'; src: url('NotoSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } * @font-face { font-family: 'bodyFontFamily'; src: url('NotoSans-SemiBold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } * @font-face { font-family: 'bodyFontFamily'; src: url('NotoSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } * * Whichever pattern you choose, keep the role-token family name unchanged. */ /* ---------------------------- */ /* ANCHOR Font Setup - Icon Font */ /* ---------------------------- */ /* Icon Font slot. Designframe reserves for icons (see df-rules.md §1.5). * This slot is designed for two delivery shapes: * * 1) LIGATURE-API libraries (Material Symbols, IcoMoon ligature builds). * The glyph map is encoded inside the woff2 itself, so declaring * @font-face here is sufficient. Consumers write favorite * (no library class) and DF's bare rule paints via the * --font-icon token (see :root below). * * 2) PROJECT BRAND GLYPH SETS (e.g. custom-icons.woff2 from FontAwesome * Kit Builder or IcoMoon). When delivered as a ligature font, this * slot alone is enough. When delivered with sidecar class CSS, * also load that CSS via in your HTML . * * For CLASS-API libraries (Font Awesome, Phosphor, Tabler), do NOT use * this slot — their ~1,500-rule glyph-lookup tables (.fa-heart:before * { content }, etc.) live in the library's own stylesheets and MUST * be loaded via tags in your HTML . Their class selectors * hard-code font-family at higher specificity and win over this token's * bare rule by CSS cascade — both can coexist without conflict. * * Uncomment below to wire up a ligature-API library. Example uses * Google's Material Symbols Outlined variable font, self-hosted at * src/fonts/. font-display: block (NOT swap) is deliberate — a fallback * to a Latin letter mid-load would render literal text where a glyph * should appear. */ /* @font-face { font-family: 'iconFontFamily'; src: url('../src/fonts/material-symbols-outlined.woff2') format('woff2-variations'); font-weight: 100 700; font-style: normal; font-display: block; } */ /* !SECTION - FONT IMPORT END */ /* -------------------------------- */ /* Do not edit */ /* ---------------------------- */ /* ---------------------------- */ /* ANCHOR Backgrounds */ /* ---------------------------- */ /* Sets the default colors for base sections. */ body, header, main, footer, .card, .card-base { --tw-bg-opacity: 1; background-color: rgb(var(--color-background) / var(--tw-bg-opacity, 1)); } /* ---------------------------- */ /* ANCHOR Typography */ /* ---------------------------- */ /* Applies the default styles for basic type elements. */ body { font-family: var(--font-body), var(--font-body-alt1), var(--font-body-alt2); font-size: var(--text-p3-size); line-height: var(--text-p3-lh); --tw-text-opacity: 1; color: rgb(var(--color-primary) / var(--tw-text-opacity, 1)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; /* Reject browser pseudo-variants — any missing weight/style combo falls back to the closest declared @font-face entry instead of being algorithmically distorted. Honors the framework's original design intent: real font glyphs only, never synthesized ones. Mitigates the unshipped Commit Mono italic by falling back to upright mono on rather than rendering a sheared pseudo-italic. */ } .card, .card-base { --tw-text-opacity: 1; color: rgb(var(--color-primary) / var(--tw-text-opacity, 1)); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading), var(--font-heading-alt1), var(--font-heading-alt2); --tw-text-opacity: 1; color: rgb(var(--color-key) / var(--tw-text-opacity, 1)); } h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); } h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); } h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); } h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-lh); } h5 { font-size: var(--text-h5-size); line-height: var(--text-h5-lh); } h6 { font-size: var(--text-h6-size); line-height: var(--text-h6-lh); } /* nav-tap-target row-height applies only inside opt-in header/topbar contexts. * Bare