/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* ============================================================ ClearCourse | Swan - responsive design-token overrides Generated from the "CC Foundation" Figma variable collection. DESKTOP values are NOT here - they live in Bricks > Style Manager > Variables. These two blocks only re-point the 38 tokens that change at a breakpoint, so global classes can stay completely free of responsive rules and one edit here updates every consumer. Why this works: custom properties all share the same specificity, so source order decides. This stylesheet is enqueued with 'bricks-frontend' as a dependency, which guarantees it loads AFTER Bricks' own :root block. Breakpoints are Bricks' defaults, which contain the Figma frames cleanly: Figma 834 tablet falls inside <=991, Figma 393 mobile inside <=767. DO NOT hand-edit. Regenerate from the Figma export if tokens change. ============================================================ */ /* ---- TABLET (Figma 834px mode) ---- */ @media (max-width: 991px) { :root { --cc-accordion-padding: var(--cc-unit-28); --cc-accordion-stack-spacing-y: var(--cc-unit-0); --cc-atom-buttons-br: var(--cc-unit-10); --cc-cta-padding-y: var(--cc-unit-60); --cc-fs-display-l: var(--cc-unit-48); --cc-fs-display-m: var(--cc-unit-40); --cc-fs-display-s: var(--cc-unit-32); --cc-fs-display-xl: var(--cc-unit-64); --cc-fs-display-xs: var(--cc-unit-24); --cc-hero-image-padding: var(--cc-unit-40); --cc-hero-padding-x: var(--cc-unit-40); --cc-hero-padding-y: var(--cc-unit-40); --cc-hero-spacing: var(--cc-unit-24); --cc-lh-display-l: 48px; --cc-lh-display-m: 40px; --cc-lh-display-s: 32px; --cc-lh-display-xl: 64px; --cc-lh-display-xs: 24px; --cc-lh-h6: 19.2px; --cc-logos-spacing-x: var(--cc-unit-64); --cc-resource-padding: var(--cc-unit-24); --cc-section-padding-l: var(--cc-unit-40); --cc-section-padding-r: var(--cc-unit-40); --cc-section-spacing-y: var(--cc-unit-36); --cc-textmedia-text-padding-x: var(--cc-unit-36); --cc-textmedia-text-padding-y: var(--cc-unit-36); --cc-textmedia-text-spacing-y: var(--cc-unit-16); --cc-tiles-spacing-y: var(--cc-unit-10); } } /* ---- MOBILE (Figma 393px mode) ---- */ @media (max-width: 767px) { :root { --cc-accordion-btn-size: var(--cc-unit-48); --cc-accordion-padding: var(--cc-unit-20); --cc-accordion-stack-spacing-y: var(--cc-unit-0); --cc-atom-buttons-br: var(--cc-unit-10); --cc-awards-padding: var(--cc-unit-24); --cc-cta-padding-y: var(--cc-unit-48); --cc-form-spacing-y: var(--cc-unit-18); --cc-fs-display-l: var(--cc-unit-44); --cc-fs-display-m: var(--cc-unit-32); --cc-fs-display-s: var(--cc-unit-24); --cc-fs-display-xl: var(--cc-unit-56); --cc-fs-display-xs: var(--cc-unit-20); --cc-hero-image-padding: var(--cc-unit-40); --cc-hero-padding-x: var(--cc-unit-40); --cc-hero-padding-y: var(--cc-unit-40); --cc-hero-spacing: var(--cc-unit-16); --cc-lh-display-l: 44px; --cc-lh-display-m: 32px; --cc-lh-display-s: 24px; --cc-lh-display-xl: 56px; --cc-lh-display-xs: 20px; --cc-lh-h6: 19.2px; --cc-logos-spacing-x: var(--cc-unit-64); --cc-nav-container-padding-l: var(--cc-unit-20); --cc-nav-container-padding-r: var(--cc-unit-20); --cc-nav-padding-b: var(--cc-unit-16); --cc-nav-padding-l: var(--cc-unit-16); --cc-nav-padding-r: var(--cc-unit-16); --cc-nav-padding-t: var(--cc-unit-16); --cc-resource-padding: var(--cc-unit-24); --cc-section-padding-l: var(--cc-unit-40); --cc-section-padding-r: var(--cc-unit-40); --cc-section-spacing-y: var(--cc-unit-36); --cc-tabbed-loz-spacing-x: var(--cc-unit-4); --cc-textmedia-text-padding-x: var(--cc-unit-28); --cc-textmedia-text-padding-y: var(--cc-unit-28); --cc-textmedia-text-spacing-y: var(--cc-unit-16); --cc-tiles-spacing-y: var(--cc-unit-8); } } /* ============================================================ ClearCourse | Swan — site header NOT part of the generated token blocks above — do not regenerate away. Full reasoning: header-build-spec.md §7 and §8. ============================================================ */ /* [1] Rule-2 exception, 2026-08-19. Bricks 2.3.11 has no backdrop-filter control: _cssFilters writes `filter` (elements/base.php:1599), and the string "backdrop" appears nowhere else in the Bricks codebase except the offcanvas and popup overlay divs. Figma 117:3836 is backdrop-blur-[20px]. Every other property on this element is a native Bricks control, and nothing here is declared twice. */ .cc-nav__bar { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* [2] Header ink. One header template serves the whole site. Every Bricks control reads var(--cc-nav-ink), so this re-points an ingredient rather than overriding a control — the same mechanism as the token blocks above. Default is the Light variant (Figma 117:3835): logo and nav text #222423. Sampled from Figma's own render, these are the ONLY two things that change between the variants; the hamburger (#121b41 border and bars) and the button are identical in both. As of 2026-08-25 every page, the front page included, uses this one value — see [3]. */ :root { --cc-nav-ink: var(--cc-brand-primary); } /* [3] Homepage only — POSITION, not colour. The header overlays the hero so the photo runs to the top of the page (Figma 5117:15154: Hero 833 + body 8454 = 9287, the full frame height, so the header contributes none of it). The ink override that used to sit here was REMOVED on 2026-08-25, on the user's instruction to use the same header the other pages use while keeping it floating over the hero photo. It set --cc-nav-ink to white on the reasoning that the hero was a mid-tone photograph; the client's replacement photo is bright, which inverted that premise. Measured against the real rendered backdrop — photo + the hero's gradient overlay + the frosted pill, sampled with the nav text hidden — white ink scored 1.38-1.94:1 across the desktop nav labels, 1.74:1 on the tablet logo and 1.24:1 on the mobile logo, all far below WCAG AA's 4.5:1. The inherited dark default scores 8.04-11.34 / 8.96 / 12.58:1 at those same three points. Dark is also what the Figma Homepage instance 5117:15212 specified (Colour=Light) before the 2026-08-19 build overrode it. Do not re-add a white override without re-measuring against the live photo. The two #brx-header declarations are exactly what Bricks' own "Absolute header" control emits (settings-template.php:101-116). They are written out here only because that control is a TEMPLATE setting, so it would make every page overlay; Bricks offers no per-page scope for it, and 'headerPos' — which its deprecation note points to — does not exist anywhere in the codebase. */ body.home #brx-header { position: absolute; width: 100%; /* Bricks' own control omits z-index, but #brx-content and the first section are both position:relative and come later in the DOM, so without this the absolute header paints BEHIND the hero. Measured 2026-08-19. */ z-index: 10; }