/* Theme Name: BTI — Hello Elementor Child Theme URI: https://blackwoodtech.org Description: Child theme for Blackwood Tech (blackwoodtech.org). Holds all custom CSS and functions for the Kingsley Finance template kit and MasterStudy LMS. Built so that Hello Elementor updates can never overwrite site customisations. Author: Fernando Quesada Blackwood Author URI: https://blackwoodtech.org Template: hello-elementor Version: 1.0.0 Text Domain: bti-hello-child License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: elementor, lms, spanish */ /* ========================================================================= 1. DESIGN TOKENS — mirrored from the Kingsley kit's Global Kit Styles ------------------------------------------------------------------------- These are the exact values read out of templates/global.json. They are declared here so custom CSS can reference them by name instead of hard-coding hex values in a dozen places. Changing a colour here does NOT change Elementor's Global Colors — that must be done in Site Settings. These exist for the CSS in this file only. ========================================================================= */ :root { /* Kit system colours */ --bti-heading: #111D29; /* Kingsley "Heading" / Dark Background */ --bti-text: #727272; /* Kingsley "Text Color" */ --bti-white: #FFFFFF; --bti-black: #000000; /* Kit accents */ --bti-accent: #00ADAA; /* Kingsley "Button" / "Accent 1" (teal) */ --bti-accent-hover: #111D29; --bti-accent-soft: #00ADAAC4; /* Kit backgrounds and rules */ --bti-bg-light: #EDF1FC; --bti-bg-xlight: #F6F8FE; --bti-line: #E4E4E4; /* BTI brand — refined logo palette (navy + gold) */ --bti-navy: #14396E; --bti-gold: #D8A22A; --bti-gold-deep: #B8871F; /* Kit typography */ --bti-font-heading: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --bti-font-body: "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; /* Layout */ --bti-radius: 6px; --bti-focus: var(--bti-accent); } /* ========================================================================= 2. SPANISH TYPOGRAPHY CORRECTIONS ------------------------------------------------------------------------- WHY THIS SECTION EXISTS — read before changing anything here. The Kingsley kit was designed and set in English. Two things break when the same settings are used for Spanish: (a) LENGTH. Spanish runs roughly 15-25% longer than English for the same meaning ("Get started" = 11 characters; "Comienza ahora" = 14). The kit's hero is set at 72px with a hard line-height of 1.0. Spanish headlines at that size wrap to an extra line and collide with the element below. (b) ACCENTS. The kit applies -2px letter-spacing to H1 and the hero. Negative tracking pulls glyphs together, which crowds the accent marks that English never has to carry — á é í ó ú ñ ü — and at display sizes the tilde on ñ visually merges with the neighbouring letter. It reads as a rendering fault rather than a design choice. The fix below reduces the hero a step and relaxes tracking. It does not change the kit's proportions or its character, only its tolerances. ========================================================================= */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; /* avoids orphan words on Spanish headings */ } /* Relax the kit's aggressive negative tracking so accents keep their air. */ h1, .elementor-widget-heading h1.elementor-heading-title { letter-spacing: -0.5px; } h2, .elementor-widget-heading h2.elementor-heading-title { letter-spacing: -0.25px; } /* Hero: step down from 72px and give the line some room to breathe. */ .bti-hero h1, .bti-hero .elementor-heading-title { font-size: clamp(2rem, 5.4vw, 4rem); /* ~64px ceiling, was 72px */ line-height: 1.08; /* was 1.0 */ letter-spacing: -0.5px; } /* Long Spanish compounds ("responsabilidades", "implementación") need to be allowed to break inside narrow columns and on mobile, or they force a horizontal scrollbar. */ body, .elementor-widget-text-editor, .elementor-widget-heading { overflow-wrap: break-word; } @media (max-width: 767px) { p, li { hyphens: auto; } } /* Spanish opens questions and exclamations with ¿ and ¡. When one of those starts a line in a large heading the punctuation hangs oddly; pull it back into the optical margin. */ .bti-hang-punct { hanging-punctuation: first; } /* ========================================================================= 3. BRAND — logo and header ========================================================================= */ /* The BTI mark is a shield: it is taller than it is wide relative to the wordmark, so a fixed height reads better than a fixed width. */ .bti-logo img, .site-header .site-logo img { height: auto; max-height: 52px; width: auto; } @media (max-width: 767px) { .bti-logo img, .site-header .site-logo img { max-height: 40px; } } /* Reversed lockup for the dark footer. Add the class to the image widget. */ .bti-logo--reversed img { max-height: 46px; } /* ========================================================================= 4. ACCESSIBILITY ------------------------------------------------------------------------- Elementor removes default focus rings on several widget types. Anyone navigating by keyboard — and anyone using a screen reader — then has no idea where they are on the page. This puts a visible ring back. ========================================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .elementor-button:focus-visible { outline: 2px solid var(--bti-focus); outline-offset: 3px; border-radius: 3px; } /* Respect the reader's motion preference. Several kit sections animate on scroll; this stops them for anyone who has asked the OS for less motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Skip link — lets keyboard users jump past the navigation. */ .bti-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999999; padding: 0.75rem 1.25rem; background: var(--bti-heading); color: var(--bti-white); text-decoration: none; } .bti-skip-link:focus { left: 0; } /* ========================================================================= 5. UTILITIES used by the build ========================================================================= */ /* Tabular figures — for any block showing prices, percentages or dates, so digits line up in a column instead of jittering. */ .bti-figures, .bti-figures * { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* A quiet gold rule, used as a section divider where the kit uses teal. */ .bti-rule-gold::after { content: ""; display: block; width: 56px; height: 3px; background: var(--bti-gold); margin-top: 1rem; border-radius: 2px; } /* Print: strip navigation and backgrounds so a course syllabus or an article prints cleanly. */ @media print { header, footer, nav, .elementor-widget-button, .bti-no-print { display: none !important; } body { background: #fff !important; color: #000 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; } } /* ========================================================================= 6. MASTERSTUDY LMS — INTENTIONALLY EMPTY FOR NOW ------------------------------------------------------------------------- MasterStudy is not installed yet. Writing selectors for it now would mean guessing its class names, and guessed CSS that silently does nothing is worse than no CSS at all: it looks like the styling is handled when it is not, and it survives in the file for years. Once the plugin is installed on staging, we inspect the real markup of the course card, the course archive and the enrollment button, and the overrides get written here against selectors that actually exist. ========================================================================= */