/* Theme Name: Hello Elementor Cuzgow Template: hello-elementor Theme URI: https://github.com/cuzgow/hello-elementor-cuzgow Author: Cuzgow Author URI: https://cuzgow.com/ Description: Child theme of Hello Elementor, optimised for WPO and scalability. Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 8.1 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: hello-elementor-cuzgow Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* ────────────────────────────────── 1. VARIABLES :root ────────────────────────────────── */ :root { /* brand color https://hslpicker.com/#d10023 ---------------------------------------------------------------------- */ --brand-hue: 21; --brand-saturation: 97%; --brand-lightness: 61.4%; --brand-alpha: 1; --brand-color: hsla(var(--brand-hue), var(--brand-saturation), var(--brand-lightness), var(--brand-alpha)); /* Brand color 2 (if needed) ---------------------------------------------------------------------- */ --brand-hue-2: 20; --brand-saturarion-2: 100%; --brand-lightness-2: 70%; --brand-alfa-2: 1; --brand-color-2: hsla(var(--brand-hue-2), var(--brand-saturarion-2), var(--brand-lightness-2), var(--brand-alfa-2)); /* Palette luminosity ---------------------------------------------------------------------- */ --color-light-1: hsla(var(--brand-hue), var(--brand-saturation), 98%, 1); /* ultra-light, backgrounds */ --color-light-2: hsla(var(--brand-hue), var(--brand-saturation), 85%, 1); /* light tint, panels/cards */ --color-light-3: hsla(var(--brand-hue), var(--brand-saturation), 55%, 1); /* mid tone, buttons/highlights */ --color-light-4: hsla(var(--brand-hue), var(--brand-saturation), 35%, 1); /* dark tint, text accents */ --color-light-5: hsla(var(--brand-hue), var(--brand-saturation), 5%, 1); /* near black, headers/borders */ /* Palette saturation https://hslpicker.com/#d10023 ---------------------------------------------------------------------- */ --color-sat-1: hsla(var(--brand-hue), 100%, var(--brand-lightness), 1); /* vivid, strongest accent (CTAs) */ --color-sat-2: hsla(var(--brand-hue), 70%, var(--brand-lightness), 1); /* strong, default brand use */ --color-sat-3: hsla(var(--brand-hue), 40%, var(--brand-lightness), 1); /* balanced, secondary accents */ --color-sat-4: hsla(var(--brand-hue), 20%, var(--brand-lightness), 1); /* muted, disabled/subtle states */ --color-sat-5: hsla(var(--brand-hue), 0%, var(--brand-lightness), 1); /* neutral, grayscale fallback */ /* Palette hue https://colordesigner.io/color-wheel ---------------------------------------------------------------------- */ /* override by Obymed*/ --color-hue-1: #2D2E48; --color-hue-2: #313F52; --color-hue-3: #A0B0BF; --color-hue-4: #FF9966; --color-hue-5: #1F2838; /*--color-hue-1: hsla(calc((var(--brand-hue) + 30)), var(--brand-saturation), var(--brand-lightness), 1); --color-hue-2: hsla(calc((var(--brand-hue) + 120)), var(--brand-saturation), var(--brand-lightness), 1); --color-hue-3: hsla(calc((var(--brand-hue) + 180)), var(--brand-saturation), var(--brand-lightness), 1); --color-hue-4: hsla(calc((var(--brand-hue) + 240)), var(--brand-saturation), var(--brand-lightness), 1); --color-hue-5: hsla(calc((var(--brand-hue) + 330)), var(--brand-saturation), var(--brand-lightness), 1);*/ /* Text colours ---------------------------------------------------------------------- */ --text-dark: hsla(0, 0%, 7%, 1); /* #111111 – primary body text */ --text-dark-2: hsla(0, 0%, 40%, 1); /* #666666 – secondary/disabled */ --text-light: hsla(0, 0%, 100%, 1); /* #ffffff – text on dark bg */ --text-light-2: hsla(0, 0%, 96%, 1); /* #f5f5f5 – softer white */ --text-brand-dark: hsla(var(--brand-hue), 15%, 15%, 1); --text-brand-light: hsla(var(--brand-hue), 20%, 95%, 1); /* Typography tokens ---------------------------------------------------------------------- */ --font-family: "Questrial","Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-family-headings: "Work Sans","Questrial",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-weight-normal: 400; --font-weight-bold: 700; /* Line heights ---------------------------------------------------------------------- */ --line-height-normal: 1.7; --line-height-condensed: 1.2; --line-height-extra-condensed: 0.8; --line-height-large: 2; /* Font Spacing ---------------------------------------------------------------------- */ --letter-spacing-normal: 0em; /* default for body copy */ --letter-spacing-wide: 0.05em; /* for all-caps, buttons, UI */ --letter-spacing-xwide: 0.1em; /* for hero banners, decorative text */ --letter-spacing-tight: -0.01em; /* good for large headings */ --word-spacing-normal: 0em; /* default */ --word-spacing-wide: 0.25em; /* use sparingly, taglines / quotes */ /* OpenType ---------------------------------------------------------------------- */ --text-align: center; --text-wrap: pretty; --writing-mode: horizontal-tb; --font-optical-size: auto; --font-variant-caps-small: small-caps; --font-variant-caps-normal: normal; --font-stretch-normal: 100%; --font-stretch-condensed: 85%; /* slightly narrower, fits headings/UI just for variables fonts*/ --font-stretch-expanded: 115%; /* slightly wider, for display/hero text just for variables fonts */ --font-kerning: auto; --font-variant-ligatures-normal: normal; /* default: body text, paragraphs */ --font-variant-ligatures-out: no-common-ligatures; /* special: headings, logos */ /* Additional styling tokens ---------------------------------------------------------------------- */ --stroke-width: 1px; /* -webkit-text-stroke It’s vendor-specific and only applies in certain browsers (mostly WebKit/Blink behavior). As a global token, it can lead to “why doesn’t this work in Firefox?” confusion. */ --stroke-color: var(--color-light-5); /* -webkit-text-fill-color */ --text-fill-color: var(--color-light-1); /* -webkit-text-fill-color */ --text-shadow-dark: 0 0 1px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.4); --text-shadow-light: 0 1px 2px rgba(255, 255, 255, 0.25), /* soft highlight */ 0 0 4px rgba(255, 255, 255, 0.15); /* subtle glow */ /* Layout helpers ---------------------------------------------------------------------- */ --p-width: clamp(45ch, 50vw, 75ch); --heading-width: clamp(45ch, 50vw, 75ch); --li-with: clamp(45ch, 50vw, 75ch); /* Font Sizes ---------------------------------------------------------------------- Sources: - https://www.fluid-type-scale.com/ - https://clamp.font-size.app/ Assumptions / Notes: - Root font-size is 10px (html { font-size: 10px; }) This means: 1.6rem = 16px, 2.0rem = 20px, etc. - Viewport range used to generate clamps: 400px → 2560px - Type scale ratio: 1.2 (modular scale) Scale structure: - The core scale (--font-size-sub → --font-size-h1) follows a strict 1.2 ratio at min and max values. - One additional smaller step is included below the core scale, also respecting the same 1.2 ratio, to provide a mathematically consistent entry point into the system. - This smaller step starts below 13px by design and is intended for controlled use (dense UI, legal text, auxiliary content). Design intent: - Tokens are non-semantic primitives. - Clients/design decide meaning and usage. - Scale is generous by default (marketing / landing friendly). - The extra smaller step avoids ad-hoc downsizing (e.g. 0.8em hacks) while keeping the full scale mathematically coherent. ---------------------------------------------------------------------- */ --font-size-xs: clamp(1.083rem, 0.19vw + 1.008rem, 1.5rem); --font-size-sub: clamp(1.3rem, 0.23vw + 1.21rem, 1.8rem); --font-size-p: clamp(1.56rem, 0.28vw + 1.45rem, 2.16rem); --font-size-h6: clamp(1.87rem, 0.33vw + 1.74rem, 2.59rem); --font-size-h5: clamp(2.25rem, 0.40vw + 2.09rem, 3.11rem); --font-size-h4: clamp(2.70rem, 0.48vw + 2.50rem, 3.73rem); --font-size-h3: clamp(3.23rem, 0.58vw + 3.00rem, 4.48rem); --font-size-h2: clamp(3.88rem, 0.69vw + 3.61rem, 5.37rem); --font-size-h1: clamp(4.66rem, 0.83vw + 4.33rem, 6.45rem); } /* ────────────────────────────────── 2. CLEARINGS / FLOAT CONTAINMENT ────────────────────────────────── */ /* Modern clearfix utility - Establishes a new block formatting context - Safely contains legacy floated children - Preferred over pseudo-element hacks in modern layouts */ .clearfix { display: flow-root; } /* Legacy clearfix (fallback / reference only) Use only if supporting very old browsers or known edge cases */ /* .clearfix::after { content: ""; display: block; clear: both; } */ /* ────────────────────────────────── 3. FONT FACE ────────────────────────────────── */ /* Questrial 400 */ @font-face { font-family: "Questrial"; src: url("/wp-content/themes/hello-elementor-cuzgow/fonts/Questrial-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Work Sans 700 (Bold) */ @font-face { font-family: "Work Sans"; src: url("/wp-content/themes/hello-elementor-cuzgow/fonts/WorkSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ───────────────────────────────────────────── 4. ELEMENTS  (html, body, universal box‑sizing) ───────────────────────────────────────────── */ /* ------------ HTML ------------ */ /* Styling the scrollbar !! not standard ----------------------------------------- */ /* Firefox only */ html { scrollbar-width: thin; scrollbar-color: var(--color-light-3) var(--color-light-1); } /* (Blink/WebKit only) */ html::-webkit-scrollbar { width:16px; height:16px; } html::-webkit-scrollbar-track { background: linear-gradient(135deg,var(--color-light-1),var(--color-light-2)); } html::-webkit-scrollbar-thumb { border-radius: 10px; background: var(--color-light-3); box-shadow: inset 1px 1px 1px var(--color-light-1), inset -1px -1px 1px var(--color-light-4); } /* If you don’t need custom scrollbars, comment out the three blocks above */ html{ box-sizing: border-box; /* 10‑px baseline: 16px × 62.5 % */ font-size: 62.5%; scroll-behavior: smooth; scrollbar-gutter: stable; /* Prevents content from shifting when scrollbar is hidden */ overflow-x: hidden; /* ‑‑‑ lock horizontal scroll ‑‑‑ */ overflow-x: clip; writing-mode: var(--writing-mode, horizontal-tb); /* OpenType prefs pulled from tokens (optional) */ font-stretch: var(--font-stretch-normal, normal); font-kerning: var(--font-kerning, auto); font-weight: var(--font-weight-normal, 400); font-variant-ligatures: var(--font-variant-ligatures-normal, normal); font-variant-caps: var(--font-variant-caps-normal, normal); margin: 0; padding: 0; } /* inherit box‑sizing to everything */ *, *::before, *::after{ box-sizing: inherit; } /* ------------ BODY ------------ */ body{ /* Use the fluid paragraph size token */ font-size: var(--font-size-p, 1.6rem); line-height: var(--line-height-normal, 1.7); font-family: var(--font-family, system-ui,sans-serif); color: var(--text-dark, hsla(0, 0%, 7%, 1)); background: var(--color-light-1, #ffffff); /* Optional smoothing (WebKit / macOS) */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; word-spacing: var(--word-spacing-normal, 0em); /* text-align: var(--text-align, center);*/ text-wrap: var(--text-wrap, pretty); margin: 0; padding: 0; overscroll-behavior-x: none; /* ― block sideways “bounce” on touch devices ― */ } /* Paragraphs ------------------------------------------------------------------------ */ p { margin: 0 0 1.5em; } /* Links ------------------------------------------------------------------------ */ a { /* Convert to inline for transform */ display: inline-block; vertical-align: baseline; color: var(--brand-color); font-weight: var(--font-weight-bold); text-decoration: none; overflow-wrap: break-word; -webkit-transition: transform .2s ease-in; transition: transform .2s ease-in; transform-origin: center left; cursor: pointer; /* text-decoration-skip-ink: auto; Probar antes */ } /* Hover feedback — mouse & trackpad only */ @media (hover: hover) and (pointer: fine) { a:hover { transform: scale(1.06); -webkit-transition: transform .2s ease-in-out; transition: transform .2s ease-in-out; } } /* Press feedback — touch & no-hover environments */ @media (hover: none) and (pointer: coarse) { a:active { transform: scale(1.06); -webkit-transition: transform .2s ease-in-out; transition: transform .2s ease-in-out; } } /* Keyboard accessibility — always */ a:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 2px; } /* for svg */ a svg{ vertical-align: -webkit-baseline-middle; vertical-align: middle; } /* Probar qué hace #wpadminbar a.ab-item::after { content: ""; } */