/* * CyberPoint Texas Typography System * Font: Figtree - Modern, geometric sans-serif * Inspired by: usepastel.com * Author: CyberPoint Texas Design System */ /* ============================================ FONT LOADING ============================================ */ /* Figtree Font Face Declarations */ /* Option 1: Google Fonts (recommended for quick setup) - loaded in HTML */ /* Option 2: Self-hosted fonts (uncomment below for performance optimization) */ /* @font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-Regular.woff2') format('woff2'), url('../fonts/Figtree-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-Medium.woff2') format('woff2'), url('../fonts/Figtree-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-SemiBold.woff2') format('woff2'), url('../fonts/Figtree-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-Bold.woff2') format('woff2'), url('../fonts/Figtree-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } */ /* ============================================ CSS CUSTOM PROPERTIES ============================================ */ :root { /* Font Families */ --font-family-primary: 'Figtree', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif; --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Courier New', monospace; /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Font Sizes - Type Scale (Minor Third: 1.200) */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --font-size-7xl: 4.5rem; /* 72px */ /* Line Heights */ --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --line-height-loose: 2; /* Letter Spacing */ --letter-spacing-tighter: -0.05em; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* Text Colors - Light Theme */ --text-color-primary-light: #0a0a0a; --text-color-secondary-light: #525252; --text-color-tertiary-light: #737373; --text-color-muted-light: #a3a3a3; --text-color-inverse-light: #ffffff; /* Text Colors - Dark Theme */ --text-color-primary-dark: #ffffff; --text-color-secondary-dark: #b0b0b0; --text-color-tertiary-dark: #808080; --text-color-muted-dark: #525252; --text-color-inverse-dark: #0a0a0a; /* Default to dark theme (CyberPoint Texas primary theme) */ --text-color-primary: var(--text-color-primary-dark); --text-color-secondary: var(--text-color-secondary-dark); --text-color-tertiary: var(--text-color-tertiary-dark); --text-color-muted: var(--text-color-muted-dark); --text-color-inverse: var(--text-color-inverse-dark); /* Heading Sizes (Responsive) */ --heading-h1-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); --heading-h2-size: clamp(2rem, 4vw + 1rem, 3.75rem); --heading-h3-size: clamp(1.75rem, 3vw + 1rem, 3rem); --heading-h4-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem); --heading-h5-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem); --heading-h6-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem); /* Body Text Sizes */ --body-text-base: 1rem; --body-text-lg: 1.125rem; --body-text-xl: 1.25rem; } /* Light Theme Overrides */ @media (prefers-color-scheme: light) { :root { --text-color-primary: var(--text-color-primary-light); --text-color-secondary: var(--text-color-secondary-light); --text-color-tertiary: var(--text-color-tertiary-light); --text-color-muted: var(--text-color-muted-light); --text-color-inverse: var(--text-color-inverse-light); } } /* Theme Toggle Class (for manual switching) */ .theme-light { --text-color-primary: var(--text-color-primary-light); --text-color-secondary: var(--text-color-secondary-light); --text-color-tertiary: var(--text-color-tertiary-light); --text-color-muted: var(--text-color-muted-light); --text-color-inverse: var(--text-color-inverse-light); } .theme-dark { --text-color-primary: var(--text-color-primary-dark); --text-color-secondary: var(--text-color-secondary-dark); --text-color-tertiary: var(--text-color-tertiary-dark); --text-color-muted: var(--text-color-muted-dark); --text-color-inverse: var(--text-color-inverse-dark); } /* ============================================ BASE TYPOGRAPHY ============================================ */ /* Responsive Font Sizing */ html { font-size: 16px; } @media (max-width: 768px) { html { font-size: 15px; } } @media (max-width: 480px) { html { font-size: 14px; } } /* Body Text */ body { font-family: var(--font-family-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-relaxed); color: var(--text-color-primary); letter-spacing: var(--letter-spacing-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================ HEADINGS ============================================ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--text-color-primary); margin: 0 0 1rem 0; } h1, .h1 { font-size: var(--heading-h1-size); font-weight: var(--font-weight-bold); line-height: var(--line-height-none); letter-spacing: var(--letter-spacing-tighter); margin-bottom: 1.5rem; } h2, .h2 { font-size: var(--heading-h2-size); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); margin-bottom: 1.25rem; } h3, .h3 { font-size: var(--heading-h3-size); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); margin-bottom: 1rem; } h4, .h4 { font-size: var(--heading-h4-size); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); margin-bottom: 1rem; } h5, .h5 { font-size: var(--heading-h5-size); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); margin-bottom: 0.75rem; } h6, .h6 { font-size: var(--heading-h6-size); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-wide); margin-bottom: 0.75rem; } /* ============================================ PARAGRAPHS & TEXT BLOCKS ============================================ */ p { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--text-color-secondary); margin: 0 0 1rem 0; } p.lead { font-size: var(--font-size-xl); line-height: var(--line-height-normal); font-weight: var(--font-weight-normal); color: var(--text-color-primary); } p.small { font-size: var(--font-size-sm); line-height: var(--line-height-normal); } /* ============================================ INLINE TEXT ELEMENTS ============================================ */ strong, b { font-weight: var(--font-weight-semibold); color: var(--text-color-primary); } em, i { font-style: italic; } mark { background-color: rgba(0, 153, 255, 0.2); color: var(--text-color-primary); padding: 0.125rem 0.25rem; border-radius: 0.25rem; } small { font-size: var(--font-size-sm); color: var(--text-color-tertiary); } code { font-family: var(--font-family-mono); font-size: 0.875em; padding: 0.125rem 0.375rem; background-color: rgba(0, 153, 255, 0.1); border-radius: 0.25rem; color: var(--text-color-primary); } pre { font-family: var(--font-family-mono); font-size: var(--font-size-sm); line-height: var(--line-height-normal); padding: 1rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; } pre code { padding: 0; background-color: transparent; } /* ============================================ LINKS ============================================ */ a { color: var(--color-primary-blue, #0099FF); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-primary-blue-light, #33AAFF); } a:focus { outline: 2px solid var(--color-primary-blue, #0099FF); outline-offset: 2px; } /* ============================================ LISTS ============================================ */ ul, ol { margin: 0 0 1rem 0; padding-left: 1.5rem; line-height: var(--line-height-relaxed); } ul li, ol li { margin-bottom: 0.5rem; color: var(--text-color-secondary); } ul ul, ol ul, ul ol, ol ol { margin-top: 0.5rem; margin-bottom: 0.5rem; } /* Unstyled Lists */ .list-unstyled { list-style: none; padding-left: 0; } .list-unstyled li { margin-bottom: 0.5rem; } /* ============================================ BLOCKQUOTES ============================================ */ blockquote { margin: 2rem 0; padding: 1.5rem 2rem; border-left: 4px solid var(--color-primary-blue, #0099FF); background-color: rgba(0, 153, 255, 0.05); font-size: var(--font-size-lg); line-height: var(--line-height-normal); font-style: italic; color: var(--text-color-secondary); } blockquote p:last-child { margin-bottom: 0; } blockquote cite { display: block; font-size: var(--font-size-sm); font-style: normal; color: var(--text-color-tertiary); margin-top: 1rem; } /* ============================================ UTILITY CLASSES - FONT SIZES ============================================ */ .text-xs { font-size: var(--font-size-xs) !important; } .text-sm { font-size: var(--font-size-sm) !important; } .text-base { font-size: var(--font-size-base) !important; } .text-lg { font-size: var(--font-size-lg) !important; } .text-xl { font-size: var(--font-size-xl) !important; } .text-2xl { font-size: var(--font-size-2xl) !important; } .text-3xl { font-size: var(--font-size-3xl) !important; } .text-4xl { font-size: var(--font-size-4xl) !important; } .text-5xl { font-size: var(--font-size-5xl) !important; } .text-6xl { font-size: var(--font-size-6xl) !important; } .text-7xl { font-size: var(--font-size-7xl) !important; } /* ============================================ UTILITY CLASSES - FONT WEIGHTS ============================================ */ .font-normal { font-weight: var(--font-weight-normal) !important; } .font-medium { font-weight: var(--font-weight-medium) !important; } .font-semibold { font-weight: var(--font-weight-semibold) !important; } .font-bold { font-weight: var(--font-weight-bold) !important; } /* ============================================ UTILITY CLASSES - LINE HEIGHTS ============================================ */ .leading-none { line-height: var(--line-height-none) !important; } .leading-tight { line-height: var(--line-height-tight) !important; } .leading-snug { line-height: var(--line-height-snug) !important; } .leading-normal { line-height: var(--line-height-normal) !important; } .leading-relaxed { line-height: var(--line-height-relaxed) !important; } .leading-loose { line-height: var(--line-height-loose) !important; } /* ============================================ UTILITY CLASSES - LETTER SPACING ============================================ */ .tracking-tighter { letter-spacing: var(--letter-spacing-tighter) !important; } .tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; } .tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; } .tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; } .tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; } .tracking-widest { letter-spacing: var(--letter-spacing-widest) !important; } /* ============================================ UTILITY CLASSES - TEXT COLORS ============================================ */ .text-primary { color: var(--text-color-primary) !important; } .text-secondary { color: var(--text-color-secondary) !important; } .text-tertiary { color: var(--text-color-tertiary) !important; } .text-muted { color: var(--text-color-muted) !important; } .text-inverse { color: var(--text-color-inverse) !important; } /* Brand Colors */ .text-blue { color: var(--color-primary-blue, #0099FF) !important; } .text-green { color: var(--color-accent-green, #00CC66) !important; } /* ============================================ UTILITY CLASSES - TEXT ALIGNMENT ============================================ */ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-justify { text-align: justify !important; } /* ============================================ UTILITY CLASSES - TEXT TRANSFORM ============================================ */ .uppercase { text-transform: uppercase !important; } .lowercase { text-transform: lowercase !important; } .capitalize { text-transform: capitalize !important; } .normal-case { text-transform: none !important; } /* ============================================ UTILITY CLASSES - TEXT DECORATION ============================================ */ .underline { text-decoration: underline !important; } .line-through { text-decoration: line-through !important; } .no-underline { text-decoration: none !important; } /* ============================================ UTILITY CLASSES - TEXT TRUNCATION ============================================ */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================ UTILITY CLASSES - WHITE SPACE ============================================ */ .whitespace-normal { white-space: normal !important; } .whitespace-nowrap { white-space: nowrap !important; } .whitespace-pre { white-space: pre !important; } .whitespace-pre-line { white-space: pre-line !important; } .whitespace-pre-wrap { white-space: pre-wrap !important; } /* ============================================ ACCESSIBILITY ============================================ */ /* Screen Reader Only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Focus Visible Enhancement */ :focus-visible { outline: 2px solid var(--color-primary-blue, #0099FF); outline-offset: 2px; } /* ============================================ RESPONSIVE TYPOGRAPHY UTILITIES ============================================ */ @media (min-width: 768px) { .md\:text-xs { font-size: var(--font-size-xs) !important; } .md\:text-sm { font-size: var(--font-size-sm) !important; } .md\:text-base { font-size: var(--font-size-base) !important; } .md\:text-lg { font-size: var(--font-size-lg) !important; } .md\:text-xl { font-size: var(--font-size-xl) !important; } .md\:text-2xl { font-size: var(--font-size-2xl) !important; } .md\:text-3xl { font-size: var(--font-size-3xl) !important; } .md\:text-4xl { font-size: var(--font-size-4xl) !important; } .md\:text-5xl { font-size: var(--font-size-5xl) !important; } } @media (min-width: 1024px) { .lg\:text-xs { font-size: var(--font-size-xs) !important; } .lg\:text-sm { font-size: var(--font-size-sm) !important; } .lg\:text-base { font-size: var(--font-size-base) !important; } .lg\:text-lg { font-size: var(--font-size-lg) !important; } .lg\:text-xl { font-size: var(--font-size-xl) !important; } .lg\:text-2xl { font-size: var(--font-size-2xl) !important; } .lg\:text-3xl { font-size: var(--font-size-3xl) !important; } .lg\:text-4xl { font-size: var(--font-size-4xl) !important; } .lg\:text-5xl { font-size: var(--font-size-5xl) !important; } } /* ============================================ PRINT STYLES ============================================ */ @media print { body { font-size: 12pt; line-height: 1.5; color: #000; } h1 { font-size: 24pt; } h2 { font-size: 20pt; } h3 { font-size: 18pt; } h4 { font-size: 16pt; } h5 { font-size: 14pt; } h6 { font-size: 12pt; } a { color: #000; text-decoration: underline; } code, pre { border: 1px solid #000; } }