7ba9080f57
Se implementa tema WordPress personalizado para Análisis de Precios Unitarios con funcionalidades avanzadas: - Sistema de templates (front-page, single, archive, page, 404, search) - Integración de Bootstrap 5.3.8 con estructura modular de assets - Panel de opciones del tema con Customizer API - Optimizaciones de rendimiento (Critical CSS, Image Optimization, Performance) - Funcionalidades SEO y compatibilidad con Rank Math - Sistema de posts relacionados y tabla de contenidos - Badge de categorías y manejo de AdSense diferido - Tipografías Google Fonts configurables - Documentación completa del tema y guías de uso 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
185 lines
5.8 KiB
CSS
185 lines
5.8 KiB
CSS
/**
|
|
* Typography System - Self-hosted Fonts
|
|
*
|
|
* This file defines custom font faces and system font stacks.
|
|
* Can be toggled via theme customizer to switch between custom and system fonts.
|
|
*
|
|
* @package Apus_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
System Font Stacks
|
|
========================================================================== */
|
|
|
|
/**
|
|
* System Font Stacks for maximum performance and native rendering
|
|
* These provide excellent typography without any network requests
|
|
*/
|
|
|
|
:root {
|
|
/* System UI Font Stack - Best for general content */
|
|
--font-system-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
|
|
/* Sans-serif Stack - Clean and modern */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
|
|
/* Serif Stack - For elegant, traditional content */
|
|
--font-serif: Georgia, "Times New Roman", Times, serif;
|
|
|
|
/* Monospace Stack - For code blocks and technical content */
|
|
--font-mono: "Consolas", "Monaco", "Courier New", Courier, monospace;
|
|
|
|
/* Humanist Stack - Friendly and approachable */
|
|
--font-humanist: "Seravek", "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
|
|
|
|
/* Geometric Stack - Modern and geometric */
|
|
--font-geometric: Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
|
|
|
|
/* Default Font Stack */
|
|
--font-primary: var(--font-system-ui);
|
|
--font-secondary: var(--font-sans);
|
|
--font-headings: var(--font-geometric);
|
|
--font-code: var(--font-mono);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Custom Font Faces (Example - Replace with actual custom fonts)
|
|
========================================================================== */
|
|
|
|
/**
|
|
* To use custom fonts:
|
|
* 1. Add font files to assets/fonts/
|
|
* 2. Uncomment and configure @font-face declarations below
|
|
* 3. Update CSS custom properties to use custom font families
|
|
*/
|
|
|
|
/*
|
|
@font-face {
|
|
font-family: 'Custom Sans';
|
|
src: url('../fonts/CustomSans-Regular.woff2') format('woff2'),
|
|
url('../fonts/CustomSans-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Custom Sans';
|
|
src: url('../fonts/CustomSans-Bold.woff2') format('woff2'),
|
|
url('../fonts/CustomSans-Bold.woff') format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Custom Serif';
|
|
src: url('../fonts/CustomSerif-Regular.woff2') format('woff2'),
|
|
url('../fonts/CustomSerif-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
Font Loading Strategy
|
|
========================================================================== */
|
|
|
|
/**
|
|
* font-display: swap ensures text remains visible during font load
|
|
* This prevents FOIT (Flash of Invisible Text) and improves LCP
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
Optional: Custom Font Configuration
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Uncomment to use custom fonts instead of system fonts
|
|
* Make sure to define @font-face declarations above first
|
|
*/
|
|
|
|
/*
|
|
body.use-custom-fonts {
|
|
--font-primary: 'Custom Sans', var(--font-system-ui);
|
|
--font-headings: 'Custom Sans', var(--font-geometric);
|
|
--font-secondary: 'Custom Serif', var(--font-serif);
|
|
}
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
Typography Utilities
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Font weight utilities
|
|
*/
|
|
.font-light { font-weight: 300; }
|
|
.font-regular { font-weight: 400; }
|
|
.font-medium { font-weight: 500; }
|
|
.font-semibold { font-weight: 600; }
|
|
.font-bold { font-weight: 700; }
|
|
|
|
/**
|
|
* Font family utilities
|
|
*/
|
|
.font-primary { font-family: var(--font-primary); }
|
|
.font-secondary { font-family: var(--font-secondary); }
|
|
.font-headings { font-family: var(--font-headings); }
|
|
.font-mono { font-family: var(--font-code); }
|
|
.font-serif { font-family: var(--font-serif); }
|
|
|
|
/**
|
|
* Font size utilities based on spacing scale
|
|
*/
|
|
.text-xs { font-size: 0.75rem; } /* 12px */
|
|
.text-sm { font-size: 0.875rem; } /* 14px */
|
|
.text-base { font-size: 1rem; } /* 16px */
|
|
.text-lg { font-size: 1.125rem; } /* 18px */
|
|
.text-xl { font-size: 1.25rem; } /* 20px */
|
|
.text-2xl { font-size: 1.5rem; } /* 24px */
|
|
.text-3xl { font-size: 1.875rem; } /* 30px */
|
|
.text-4xl { font-size: 2.25rem; } /* 36px */
|
|
|
|
/**
|
|
* Line height utilities
|
|
*/
|
|
.leading-none { line-height: 1; }
|
|
.leading-tight { line-height: 1.25; }
|
|
.leading-snug { line-height: 1.375; }
|
|
.leading-normal { line-height: 1.5; }
|
|
.leading-relaxed { line-height: 1.625; }
|
|
.leading-loose { line-height: 2; }
|
|
|
|
/**
|
|
* Text transformation
|
|
*/
|
|
.uppercase { text-transform: uppercase; }
|
|
.lowercase { text-transform: lowercase; }
|
|
.capitalize { text-transform: capitalize; }
|
|
|
|
/**
|
|
* Font smoothing for better rendering
|
|
*/
|
|
.antialiased {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.subpixel-antialiased {
|
|
-webkit-font-smoothing: auto;
|
|
-moz-osx-font-smoothing: auto;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Performance Optimizations
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Preload hints for custom fonts (add to <head> if using custom fonts)
|
|
* <link rel="preload" href="/assets/fonts/CustomSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
* <link rel="preload" href="/assets/fonts/CustomSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
|
*/
|