/* * CodexFit brand: The Children's Physio * * Copied from the 2026 rebuild (themes/childrensphysio/assets/css/codexfit.css) * for the Little Movers Club page on the current site. Only change: fonts use * Montserrat, the current site's typeface, instead of the rebuild's Figtree. * * Palette inputs only, per docs/BRANDING_GUIDE.md: every component follows * from these. The Style Studio profile is codexfit/childrens-physio.json in * the rebuild repo. * * Contrast (WCAG AA, 4.5:1 for normal text): * white on #0C6871 6.49 white on #0B767E 5.38 #12333A on white 13.46 * #0C6871 on #E8F5F5 5.82 #12333A on #E8F5F5 12.06 */ :root { /* Brand colours, each with the colour that stays legible on it */ --c-primary: #0C6871; /* deep teal: primary buttons, tags, links, selected slots */ --c-primary-content: #ffffff; --c-secondary: #ffffff; /* outlined button, as on the website */ --c-secondary-content: #0C6871; --c-secondary-border: #0C6871; --c-accent: #0B767E; /* brand teal, darkened to pass AA; also colours prices */ --c-accent-content: #ffffff; --c-neutral: #0B4A4F; /* footer teal: tooltips, toasts, payment cards */ --c-neutral-content: #ffffff; /* The page, and sheets over it (cart, modals, filter panel) */ --c-base: #ffffff; --c-base-content: #12333A; /* ink */ --c-base-muted: #E8F5F5; /* the website's tint */ --c-base-muted-content: #12333A; /* Layers: white cards with a hairline, tint for nested cards */ --c-surface: #ffffff; --c-surface-content: #12333A; --c-surface-border: #E3EEEE; --c-surface-muted: #E8F5F5; --c-surface-muted-content: #12333A; --c-border-width-layer: 1px; /* Text roles: headings in deep teal, body copy in the softer text colour */ --c-heading-text: #0C6871; --c-section-title-text: #0C6871; --c-card-title-text: #0C6871; --c-body-text: #3F5C61; /* Shape */ --c-radius-box: 24px; /* cards, modals, sections */ --c-radius-field: 14px; /* buttons, inputs, selects (the website's input radius) */ --c-radius-selector: 999px; /* tags, badges, slots: pills, like the website's chips */ --c-radius-media: 20px; /* images */ /* Type */ --c-heading-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --c-body-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --c-text-ratio-heading: 1.26; /* headings pull away from titles, as on the website */ --c-weight-bold: 700; --c-btn-font-weight: var(--c-weight-bold); /* Optional: let the host page's background show through when embedded on the website, instead of painting the widget white. */ /* --c-page-bg: transparent; */ } /* * CodexFit 4.x (what production serves today) uses older, per-component * variable names. These are the same brand, translated with codex-frontend's * own conversion map (scripts/token-map.js): each value is what the palette * above produces in the new system. Remove this block once the site runs a * CodexFit release with the palette system. */ :root { /* colours */ --c-display-color: #0C6871; /* component headings (new: --c-heading-text) */ --c-title-color: #0C6871; /* section and card titles */ --c-subtitle-color: #0C6871; --c-accent-border-color: rgba(18, 51, 58, 0.2); --c-accordion-border-color: #12333A; --c-accordion-header-background: transparent; --c-accordion-header-color: #12333A; --c-badge-background-color: #0C6871; --c-badge-border-color: #0C6871; --c-badge-text-color: #ffffff; --c-bar-bg-color: #E8F5F5; --c-bar-color: #0C6871; --c-bookmark-background-color: transparent; --c-bookmark-border-color: #0C6871; --c-bookmark-color: #0C6871; --c-border-color: rgba(18, 51, 58, 0.2); --c-btn-2-background-color: #ffffff; --c-btn-2-border-color: #0C6871; --c-btn-2-text-color: #0C6871; --c-btn-3-background-color: #0B767E; --c-btn-3-border-color: #0B767E; --c-btn-3-text-color: #ffffff; --c-btn-background-color: #0C6871; --c-btn-border-color: #0C6871; --c-btn-text-color: #ffffff; --c-card-background-color: #ffffff; --c-card-border-color: #E3EEEE; --c-card-footer-background-color: transparent; --c-card-footer-text-color: #12333A; --c-card-nested-background-color: #E8F5F5; --c-card-nested-border-color: rgba(18, 51, 58, 0.2); --c-card-selected-background-color: #0C6871; --c-card-selected-text-color: #ffffff; --c-card-text-color: #12333A; --c-cart-background-color: #ffffff; /* all white, so the white header panel inside it blends in */ --c-cart-border-color: #12333A; --c-cart-text-color: #12333A; --c-checkbox-color: #0C6871; --c-checkout-card-background-color: #E8F5F5; --c-checkout-card-text-color: #12333A; --c-close-color: #12333A; --c-color: #12333A; --c-component-background-color: transparent; --c-component-border-color: rgba(18, 51, 58, 0.2); --c-component-text-color: #12333A; --c-current-video-outline-color: #0C6871; --c-danger-color: #C72121; --c-danger-colour: #C72121; --c-danger-text-color: #ffffff; --c-day-high-color: #78C012; --c-day-high-text-color: #ffffff; --c-day-low-color: #C72121; --c-day-low-text-color: #ffffff; --c-day-medium-color: #F59F0A; --c-day-medium-text-color: #ffffff; --c-day-selected-color: #0C6871; --c-day-selected-text-color: #ffffff; --c-day-unavailable-color: rgba(18, 51, 58, 0.2); --c-day-unavailable-text-color: rgba(18, 51, 58, 0.2); --c-dropdown-background-color: #ffffff; --c-dropdown-border-color: #E3EEEE; --c-dropdown-text-color: #12333A; --c-filter-active-background-color: #0C6871; --c-filter-active-border-color: #0C6871; --c-filter-active-text-color: #ffffff; --c-filter-background-color: #ffffff; --c-filter-border-color: #12333A; --c-filter-text-color: #12333A; --c-flag-background-color: #0C6871; --c-flag-border-color: #0C6871; --c-flag-text-color: #ffffff; --c-friends-muted-button-bg: #E8F5F5; --c-friends-muted-button-fg: rgba(18, 51, 58, 0.6); --c-friends-tab-button-background-color-active: transparent; --c-friends-tab-button-background-color-inactive: transparent; --c-friends-tab-button-border-bottom-inactive: transparent; --c-friends-tab-button-text-color-inactive: rgba(18, 51, 58, 0.6); --c-helper-text-color: #12333A; --c-hint-text-color: #12333A; --c-icon-color: #12333A; --c-input-background-color: transparent; --c-input-border-color: #12333A; --c-input-focus-background-color: transparent; --c-input-focus-text-color: #12333A; --c-input-text-color: #12333A; --c-label-text-color: #12333A; --c-link-color: #0C6871; --c-low-color: #78C012; --c-low-text-color: #ffffff; --c-milestone-active-border-color: #0C6871; --c-milestone-earned-background-color: #ffffff; --c-milestone-earned-text-color: #12333A; --c-modal-background-color: rgba(18, 51, 58, 0.4); --c-modal-footer-background-color: transparent; --c-modal-footer-text-color: #12333A; --c-muted-color: #6B7280; --c-muted-text-color: #ffffff; --c-notification-summary-background-color: #E8F5F5; --c-notification-summary-text-color: #12333A; --c-option-selected-background-color: #0B767E; --c-option-selected-text-color: #ffffff; --c-paginate-background: transparent; --c-paginate-background-active: #0C6871; --c-paginate-border-color: #12333A; --c-paginate-text-color: #12333A; --c-paginate-text-color-active: #ffffff; --c-payment-card-background-color: #ffffff; --c-payment-card-text-color: #12333A; --c-pie-color: #0B767E; --c-pie-text-bg-color: rgba(18, 51, 58, 0.1); --c-pie-text-color: #12333A; --c-pill-2-background-color: #ffffff; --c-pill-2-border-color: #0C6871; --c-pill-2-text-color: #0C6871; --c-pill-background-color: #0C6871; --c-pill-border-color: #0C6871; --c-pill-text-color: #ffffff; --c-play-overlay-background: rgba(18, 51, 58, 0.5); --c-play-overlay-icon-color: #ffffff; --c-points-pots-accent-color: #12333A; --c-points-pots-completion-background: #78C012; --c-points-pots-completion-color: #ffffff; --c-points-pots-dot-border-color: transparent; --c-points-pots-dot-color: rgba(18, 51, 58, 0.1); --c-points-pots-dot-filled-color: #12333A; --c-points-pots-score-max-color: rgba(18, 51, 58, 0.6); --c-popup-background-color: #ffffff; --c-popup-text-color: #12333A; --c-processing-color: #123bc0; --c-processing-text-color: #ffffff; --c-profile-pic-bg: #0B4A4F; --c-profile-pic-color: #ffffff; --c-profile-pic-stack-border: #ffffff; --c-range-button-background-color: transparent; --c-range-button-border-color: #12333A; --c-range-button-selected-background-color: #0C6871; --c-range-button-selected-border-color: transparent; --c-range-button-selected-text-color: #ffffff; --c-range-button-text-color: #12333A; --c-range-star-selected-color: #0C6871; --c-range-star-unselected-color: rgba(18, 51, 58, 0.2); --c-range-thumb-background-color: #0C6871; --c-range-thumb-border-color: #ffffff; --c-range-track-background-color: rgba(18, 51, 58, 0.2); --c-recommended-bundle-selected-border-color: #0C6871; --c-scrollbar-background-color: transparent; --c-scrollbar-color: rgba(18, 51, 58, 0.2); --c-scrollbar-drag-color: #0C6871; --c-share-background-color: transparent; --c-share-border-color: #12333A; --c-share-color: #12333A; --c-slot-available-color: transparent; --c-slot-available-text-color: #12333A; --c-slot-booked-border-color: #0B767E; --c-slot-booked-color: #0B767E; --c-slot-booked-text-color: #ffffff; --c-slot-border-color: #12333A; --c-slot-friend-border-color: #12333A; --c-slot-friend-color: #aacacd; --c-slot-friend-text-color: #12333A; --c-slot-instructor-border-color: #0B4A4F; --c-slot-instructor-color: #0B4A4F; --c-slot-instructor-text-color: #ffffff; --c-slot-reserved-border-color: transparent; --c-slot-reserved-color: rgba(18, 51, 58, 0.2); --c-slot-reserved-text-color: rgba(18, 51, 58, 0.6); --c-slot-selected-border-color: #0C6871; --c-slot-selected-color: #0C6871; --c-slot-selected-text-color: #ffffff; --c-slot-unavailable-border-color: #12333A; --c-slot-unavailable-color: transparent; --c-slot-unavailable-text-color: #12333A; --c-status-border-color: transparent; --c-success-color: #78C012; --c-success-text-color: #ffffff; --c-switch-background-active-color: #0C6871; --c-switch-background-color: #ffffff; --c-switch-border-color: #12333A; --c-switch-thumb-active-color: #ffffff; --c-switch-thumb-color: #0C6871; --c-tab-button-color: #12333A; --c-tab-button-color-active: #ffffff; --c-tab-nav-background-color: #E8F5F5; --c-tab-system-background-color: #ffffff; --c-tab-system-color: #12333A; --c-tag-background-color: #0C6871; --c-tag-border-color: #0C6871; --c-tag-text-color: #ffffff; --c-text-primary-color: #0C6871; --c-text-secondary-color: #ffffff; --c-text-tertiary-color: #0B767E; --c-theme-base-color: #12333A; --c-theme-contrast-color: #ffffff; --c-toast-background-color: #12333A; --c-toast-border-color: #12333A; --c-toast-text-color: #ffffff; --c-tooltip-background-color: #12333A; --c-tooltip-color: #ffffff; --c-tooltip-text-color: #ffffff; --c-video-overlay-background: rgba(18, 51, 58, 0.5); --c-warning-color: #F59F0A; --c-warning-colour: #F59F0A; --c-warning-text-color: #ffffff; /* shape */ --c-badge-border-radius: 999px; --c-bookmark-border-radius: 14px; --c-btn-border-radius: 14px; --c-card-border-radius: 24px; --c-card-nested-border-radius: 24px; --c-cart-border-radius: 24px; --c-component-border-radius: 24px; --c-dropdown-border-radius: 14px; --c-filter-border-radius: 14px; --c-flag-border-radius: 999px; --c-giftcard-border-radius: 24px; --c-image-border-radius: 20px; --c-input-border-radius: 14px; --c-paginate-border-radius: 14px; --c-payment-card-border-radius: 24px; --c-popup-border-radius: 24px; --c-product-image-border-radius: 20px; --c-qty-selector-border-radius: 14px; --c-range-button-border-radius: 14px; --c-share-border-radius: 14px; --c-slot-border-radius: 999px; --c-status-border-radius: 999px; --c-tag-border-radius: 999px; --c-toast-border-radius: 24px; --c-tooltip-border-radius: 999px; /* type */ --c-font-weight-bold: 700; --c-text-bold: 700; }