/** * by osmy / Con Método — design system v1 * * Cargar después de Divi. Añadir `os-site` al desde el tema hijo. * Usar `os-section` en cada Section de Divi; las clases `os-*` también * funcionan en el HTML de módulos de Código y en módulos de Divi. * El checkout y los componentes Woo tendrán sus propios archivos CSS, * que consumirán estas variables sin modificar los formularios nativos. */ :root { /* Paleta original, con nombres exclusivos del proyecto. */ --os-paper: #f7f3ed; --os-paper-2: #efe9df; --os-ink: #1d1a18; --os-wine: #5a2d2a; --os-wine-deep: #40201e; --os-clay: #b47068; --os-rose: #dfc3b8; --os-cream: #eee2c8; --os-sky: #cad7dc; /* Roles semánticos: usarlos en los CSS de las secciones. */ --os-color-background: var(--os-paper); --os-color-surface: var(--os-paper); --os-color-surface-alt: var(--os-paper-2); --os-color-text: var(--os-ink); --os-color-text-secondary: #3c3532; --os-color-text-muted: #5b524d; --os-color-text-inverse: var(--os-paper); --os-color-accent: var(--os-wine); --os-color-accent-hover: var(--os-wine-deep); --os-color-border: rgb(29 26 24 / 14%); --os-color-border-inverse: rgb(247 243 237 / 25%); --os-color-success: #3d5c46; --os-color-error: #8a3b32; /* Instrument Serif: títulos y acentos; DM Sans: lectura e interfaz. */ --os-font-display: "Instrument Serif", Georgia, serif; --os-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --os-weight-regular: 400; --os-weight-medium: 500; --os-weight-semibold: 600; --os-weight-bold: 700; /* Jerarquía fluida: una escala compartida en todas las páginas. */ --os-type-display: clamp(3.5rem, 2.5rem + 4vw, 6rem); --os-type-h1: clamp(2.75rem, 1.95rem + 3.1vw, 4.5rem); --os-type-h2: clamp(2.125rem, 1.6rem + 2.1vw, 3.25rem); --os-type-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem); --os-type-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); --os-type-h5: 1.125rem; --os-type-h6: 1rem; --os-type-lead: clamp(1.125rem, 1.025rem + 0.45vw, 1.375rem); --os-type-body: 1rem; --os-type-article: clamp(1.0625rem, 1.025rem + 0.2vw, 1.125rem); --os-type-article-h2: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem); --os-type-article-h3: clamp(1.375rem, 1.25rem + 0.45vw, 1.625rem); --os-type-small: 0.875rem; --os-type-eyebrow: 0.75rem; --os-type-button: 0.8125rem; --os-leading-display: 0.98; --os-leading-h1: 1.04; --os-leading-h2: 1.1; --os-leading-h3: 1.18; --os-leading-body: 1.6; --os-leading-article: 1.75; /* Retícula de 4/8 px. Evitar márgenes arbitrarios por sección. */ --os-space-1: 0.25rem; --os-space-2: 0.5rem; --os-space-3: 0.75rem; --os-space-4: 1rem; --os-space-5: 1.5rem; --os-space-6: 2rem; --os-space-7: 3rem; --os-space-8: 4rem; --os-space-9: 5rem; --os-space-10: 6rem; --os-space-11: 7.5rem; --os-container-max: 77.5rem; /* 1240 px */ --os-reading-max: 45rem; /* 720 px */ --os-intro-max: 48rem; --os-gutter: clamp(1.25rem, 3vw, 2rem); --os-section-space: clamp(4rem, 7vw, 7.5rem); --os-section-space-compact: clamp(3rem, 5vw, 5rem); --os-anchor-offset: 6.25rem; --os-radius-sm: 0.5rem; --os-radius-md: 0.875rem; --os-radius-lg: 1rem; --os-shadow-card: 0 1.25rem 3rem -1.75rem rgb(29 26 24 / 18%); --os-focus-ring: 0 0 0 3px rgb(90 45 42 / 25%); --os-motion-fast: 160ms; --os-motion-base: 280ms; --os-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* Base pública. `os-site` evita aplicar esta tipografía al editor de WP. */ body.os-site { background: var(--os-color-background); color: var(--os-color-text); font-family: var(--os-font-body); font-size: var(--os-type-body); line-height: var(--os-leading-body); -webkit-font-smoothing: antialiased; } body.os-site :is(h1, h2, h3, h4, h5, h6) { color: inherit; font-family: var(--os-font-display); font-weight: var(--os-weight-regular); letter-spacing: -0.025em; text-wrap: balance; margin-top: 0; padding: 0; } body.os-site h1 { font-size: var(--os-type-h1); line-height: var(--os-leading-h1); margin-bottom: var(--os-space-5); } body.os-site h2 { font-size: var(--os-type-h2); line-height: var(--os-leading-h2); margin-bottom: var(--os-space-5); } body.os-site h3 { font-size: var(--os-type-h3); line-height: var(--os-leading-h3); margin-bottom: var(--os-space-4); } body.os-site h4 { font-size: var(--os-type-h4); line-height: var(--os-leading-h3); margin-bottom: var(--os-space-3); } body.os-site h5 { font-size: var(--os-type-h5); } body.os-site h6 { font-size: var(--os-type-h6); } body.os-site p { font-family: var(--os-font-body); font-size: var(--os-type-body); line-height: var(--os-leading-body); } body.os-site a { text-underline-offset: 0.18em; transition: color var(--os-motion-fast) var(--os-ease); } body.os-site :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--os-color-accent); outline-offset: 3px; } /* Construcción: Section de Divi con etiqueta HTML `section` y clase os-section. */ body.os-site .os-section { padding-block: var(--os-section-space); scroll-margin-top: var(--os-anchor-offset); } body.os-site .os-section--compact { padding-block: var(--os-section-space-compact); } body.os-site .os-section--flush { padding-block: 0; } body.os-site .os-section--muted { background: var(--os-color-surface-alt); } body.os-site .os-section--cream { background: var(--os-cream); } body.os-site .os-section--dark { background: var(--os-wine); color: var(--os-color-text-inverse); } body.os-site .os-container { width: calc(100% - var(--os-gutter) - var(--os-gutter)); max-width: var(--os-container-max); margin-inline: auto; } body.os-site .os-container--reading { max-width: var(--os-reading-max); } body.os-site .os-section__intro { max-width: var(--os-intro-max); margin-bottom: var(--os-space-7); } /* Clases compartidas para HTML y módulos de Divi. */ body.os-site .os-display, body.os-site .os-display :is(h1, h2, h3, p) { font-family: var(--os-font-display); font-size: var(--os-type-display); line-height: var(--os-leading-display); } body.os-site .os-eyebrow, body.os-site .os-eyebrow :is(p, span) { display: block; margin-bottom: var(--os-space-4); color: var(--os-color-accent); font-family: var(--os-font-body); font-size: var(--os-type-eyebrow); font-weight: var(--os-weight-bold); line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; } body.os-site .os-section--dark .os-eyebrow { color: var(--os-rose); } body.os-site .os-section--dark .os-eyebrow :is(p, span) { color: var(--os-rose); } body.os-site .os-text-accent { color: var(--os-color-accent); } body.os-site .os-section--dark .os-text-accent { color: var(--os-rose); } body.os-site .os-text-italic { font-style: italic; } body.os-site .os-lead, body.os-site p.os-lead, body.os-site .os-lead p { max-width: 56ch; color: var(--os-color-text-secondary); font-size: var(--os-type-lead); line-height: 1.5; } body.os-site .os-small, body.os-site .os-small p { font-size: var(--os-type-small); } body.os-site .os-muted { color: var(--os-color-text-muted); } body.os-site .os-section--dark :is(.os-lead, .os-muted), body.os-site .os-section--dark p.os-lead, body.os-site .os-section--dark .os-lead p { color: var(--os-color-text-inverse); } body.os-site .os-prose { max-width: var(--os-reading-max); font-size: var(--os-type-article); line-height: var(--os-leading-article); } body.os-site .os-prose p, body.os-site .os-prose li { font-size: inherit; line-height: inherit; } body.os-site .os-prose h2 { font-size: var(--os-type-article-h2); margin-top: var(--os-space-8); } body.os-site .os-prose h3 { font-size: var(--os-type-article-h3); margin-top: var(--os-space-7); } body.os-site .os-prose :is(p, ul, ol) { margin-bottom: var(--os-space-5); } body.os-site .os-link, body.os-site .os-link a { color: var(--os-color-accent); font-size: var(--os-type-small); font-weight: var(--os-weight-bold); text-decoration-thickness: 1px; } body.os-site .os-link:hover, body.os-site .os-link a:hover { color: var(--os-color-accent-hover); } /* La segunda forma cubre un Button Module de Divi con clase os-button. */ body.os-site :is(a, button).os-button, body.os-site .os-button .et_pb_button { display: inline-flex; align-items: center; justify-content: center; gap: var(--os-space-2); min-height: 3rem; padding: 0.875rem 1.75rem; border: 1.5px solid transparent; border-radius: var(--os-radius-sm); background: transparent; color: inherit; font-family: var(--os-font-body); font-size: var(--os-type-button); font-weight: var(--os-weight-bold); line-height: 1.25; letter-spacing: 0.06em; text-align: center; text-decoration: none; text-transform: uppercase; white-space: normal; cursor: pointer; transition: background var(--os-motion-base) var(--os-ease), color var(--os-motion-base) var(--os-ease), border-color var(--os-motion-base) var(--os-ease), transform var(--os-motion-fast) var(--os-ease); } body.os-site :is(a, button).os-button--primary, body.os-site .os-button--primary .et_pb_button { background: var(--os-color-accent); color: var(--os-color-text-inverse); } body.os-site :is(a, button).os-button--primary:hover, body.os-site .os-button--primary .et_pb_button:hover { background: var(--os-color-accent-hover); color: var(--os-color-text-inverse); transform: translateY(-1px); } body.os-site :is(a, button).os-button--outline, body.os-site .os-button--outline .et_pb_button { border-color: var(--os-ink); color: var(--os-ink); } body.os-site :is(a, button).os-button--outline:hover, body.os-site .os-button--outline .et_pb_button:hover { background: var(--os-ink); color: var(--os-paper); } body.os-site :is(a, button).os-button--inverse, body.os-site .os-button--inverse .et_pb_button { border-color: var(--os-color-border-inverse); color: var(--os-paper); } body.os-site :is(a, button).os-button--inverse:hover, body.os-site .os-button--inverse .et_pb_button:hover { background: var(--os-paper); color: var(--os-wine); } body.os-site :is(a, button).os-button[disabled], body.os-site :is(a, button).os-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } body.os-site .os-card { border: 1px solid var(--os-color-border); border-radius: var(--os-radius-lg); background: var(--os-color-surface); box-shadow: var(--os-shadow-card); } @media (max-width: 640px) { body.os-site .os-section__intro { margin-bottom: var(--os-space-6); } body.os-site :is(a, button).os-button--mobile-full { width: 100%; } body.os-site .os-button--mobile-full .et_pb_button { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.os-site a, body.os-site :is(a, button).os-button, body.os-site .os-button .et_pb_button { transition: none; } body.os-site :is(a, button).os-button--primary:hover, body.os-site .os-button--primary .et_pb_button:hover { transform: none; } }