/* ================================================================================
uikit-compat.css — Loaded only on Zion (USE_DEVELOPMENT_TEMPLATES="zion").
Purpose: stored HTML in tables like cvp_product_list_headers,
cvp_newsroom, etc. contains UIKit 2 class names that we cannot
easily migrate per-language. This file gives those classes a visual
resolution under Zion so editorial content keeps rendering correctly
while the dual-run continues.
Source order: loaded BEFORE the inline tailwindcss/custom.css block,
so any element wearing both Tailwind and a uk-* class lets Tailwind
win on conflicts (Tailwind file loads later, equal specificity).
When dual-run is over: delete this file and remove the in
templates/core/metaheader.php. Nothing else references it.
Frequency of usage (counted across templates/default at time of writing)
noted in brackets so future-you can prioritise which classes to keep
in shape vs. let drift.
================================================================================ */
/* --------------------------------------------------------------------------------
Text colour — references design system tokens from css/zion/custom.css
-------------------------------------------------------------------------------- */
.uk-text-primary { color: var(--primary); } /* [97] */
.uk-text-danger { color: var(--destructive); } /* [481] */
.uk-text-muted { color: var(--muted-foreground); } /* [398] */
.uk-text-success { color: var(--success); }
.uk-text-warning { color: var(--warning); }
.uk-text-contrast { color: var(--foreground); }
/* --------------------------------------------------------------------------------
Text style
-------------------------------------------------------------------------------- */
.uk-text-bold { font-weight: 600; } /* [2506] */
.uk-text-small { font-size: 0.875rem; line-height: 1.25rem; } /* [488] */
.uk-text-large { font-size: 1.125rem; line-height: 1.75rem; } /* [187] */
.uk-text-center { text-align: center; } /* [788] */
.uk-text-left { text-align: left; } /* [184] */
.uk-text-right { text-align: right; } /* [141] */
.uk-text-uppercase { text-transform: uppercase; } /* [99] */
.uk-text-capitalize { text-transform: capitalize; } /* [96] */
.uk-text-strikethrough { text-decoration: line-through; }
.uk-text-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* [74] */
.uk-font-small { font-size: 0.875rem; } /* [130] */
/* --------------------------------------------------------------------------------
Links
-------------------------------------------------------------------------------- */
.uk-link { /* [527] */
color: var(--primary);
text-decoration: none;
cursor: pointer;
}
.uk-link:hover {
text-decoration: underline;
}
.uk-link-muted { /* [502] */
color: var(--muted-foreground);
}
.uk-link-muted:hover {
color: var(--foreground);
}
/* --------------------------------------------------------------------------------
Width fractions (replace UIKit grid widths when they appear in stored HTML)
-------------------------------------------------------------------------------- */
.uk-width-1-1 { width: 100%; } /* [2259] */
.uk-width-1-2 { width: 50%; } /* [512] */
.uk-width-1-3 { width: 33.3333%; } /* [231] */
.uk-width-2-3 { width: 66.6667%; } /* [148] */
.uk-width-1-4 { width: 25%; } /* [250] */
.uk-width-3-4 { width: 75%; } /* [103] */
.uk-width-1-5 { width: 20%; }
.uk-width-2-5 { width: 40%; }
.uk-width-3-5 { width: 60%; }
.uk-width-4-5 { width: 80%; }
.uk-width-1-6 { width: 16.6667%; }
.uk-width-5-6 { width: 83.3333%; }
/* Responsive width variants (small/medium/large) — UIKit 2 breakpoints
match Tailwind's sm/md/lg closely enough that we collapse to plain
media queries here. */
@media (max-width: 639px) { .uk-width-small-1-1 { width: 100%; } .uk-width-small-1-2 { width: 50%; } }
@media (min-width: 640px) { .uk-width-medium-1-1 { width: 100%; } .uk-width-medium-1-2 { width: 50%; } .uk-width-medium-1-3 { width: 33.3333%; } .uk-width-medium-2-3 { width: 66.6667%; } .uk-width-medium-1-4 { width: 25%; } .uk-width-medium-1-5 { width: 20%; } .uk-width-medium-4-5 { width: 80%; } }
@media (min-width: 1024px) { .uk-width-large-1-2 { width: 50%; } .uk-width-large-1-3 { width: 33.3333%; } .uk-width-large-2-3 { width: 66.6667%; } .uk-width-large-1-4 { width: 25%; } }
.uk-height-1-1 { height: 100%; } /* [148] */
/* --------------------------------------------------------------------------------
Display & visibility
-------------------------------------------------------------------------------- */
.uk-display-block { display: block; } /* [468] */
.uk-display-inline { display: inline; }
.uk-display-inline-block{display: inline-block; }
.uk-hidden { display: none !important; } /* [558] */
.uk-invisible { visibility: hidden; }
/* UIKit responsive visibility — re-implemented with media queries */
@media (max-width: 767px) { .uk-hidden-small { display: none !important; } } /* [181] */
@media (min-width: 768px) { .uk-visible-small { display: none !important; } } /* [116] */
@media (max-width: 959px) { .uk-hidden-medium { display: none !important; } }
@media (min-width: 960px) { .uk-visible-medium { display: none !important; } }
@media (max-width: 1199px) { .uk-hidden-large { display: none !important; } }
@media (min-width: 1200px) { .uk-visible-large { display: none !important; } }
.uk-active { /* UIKit's active is contextual — most stored HTML uses
it on links/buttons. Keep this no-op so nothing breaks;
template-level styling lives in the new components. */ }
/* --------------------------------------------------------------------------------
Positioning & alignment
-------------------------------------------------------------------------------- */
.uk-position-relative { position: relative; } /* [404] */
.uk-position-absolute { position: absolute; } /* [106] */
.uk-float-left { float: left; } /* [84] */
.uk-float-right { float: right; } /* [88] */
.uk-clearfix::after { content: ""; display: table; clear: both; } /* [98] */
.uk-align-center { display: block; margin-left: auto; margin-right: auto; } /* [130] */
.uk-align-right { float: right; margin: 0 0 1rem 1rem; } /* [102] */
.uk-align-left { float: left; margin: 0 1rem 1rem 0; }
/* --------------------------------------------------------------------------------
Margin — UIKit 2 default was 15px; we round to 1rem to match Zion's scale
-------------------------------------------------------------------------------- */
.uk-margin { margin-bottom: 1rem; }
.uk-margin-top { margin-top: 1rem; } /* [1395] */
.uk-margin-bottom { margin-bottom: 1rem; } /* [2081] */
.uk-margin-left { margin-left: 1rem; } /* [213] */
.uk-margin-right { margin-right: 1rem; } /* [330] */
.uk-margin-small-top { margin-top: 0.5rem; } /* [292] */
.uk-margin-small-bottom{ margin-bottom: 0.5rem; } /* [448] */
.uk-margin-small-left { margin-left: 0.5rem; } /* [106] */
.uk-margin-small-right { margin-right: 0.5rem; } /* [185] */
.uk-margin-large-top { margin-top: 2.5rem; } /* [650] */
.uk-margin-large-bottom{ margin-bottom: 2.5rem; } /* [468] */
.uk-margin-large-left { margin-left: 2.5rem; }
.uk-margin-large-right { margin-right: 2.5rem; }
.uk-margin-remove { margin: 0 !important; } /* [718] */
.uk-margin-top-remove { margin-top: 0 !important; } /* [276] */
.uk-margin-bottom-remove { margin-bottom: 0 !important; } /* [450] */
.uk-margin-left-remove { margin-left: 0 !important; }
.uk-margin-right-remove { margin-right: 0 !important; }
/* --------------------------------------------------------------------------------
Padding
-------------------------------------------------------------------------------- */
.uk-padding { padding: 1rem; } /* [185] */
.uk-padding-small { padding: 0.5rem; }
.uk-padding-large { padding: 2.5rem; } /* [83] */
.uk-padding-bottom { padding-bottom: 1rem; } /* [73] */
.uk-padding-top { padding-top: 1rem; }
.uk-padding-left { padding-left: 1rem; }
.uk-padding-right { padding-right: 1rem; }
.uk-padding-remove { padding: 0 !important; } /* [92] */
/* --------------------------------------------------------------------------------
Containers — match Zion's container width
-------------------------------------------------------------------------------- */
.uk-container { /* [567] */
box-sizing: border-box;
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.uk-container-center { /* [568] */
margin-left: auto;
margin-right: auto;
}
.uk-container-narrow {
max-width: 56rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
/* Paragraph spacing — Tailwind's preflight zeros out margins, but stored
editorial HTML inside containers expects UIKit 2's default vertical rhythm.
UIKit used 14px bottom-margin; using 1rem for Zion-consistent spacing. */
.uk-container p,
.uk-container-narrow p {
margin: 0 0 1rem 0;
}
.uk-container p:last-child,
.uk-container-narrow p:last-child {
margin-bottom: 0;
}
/* List styling — Tailwind preflight strips list-style and padding-left from
/, so bare editorial lists in stored HTML render as flat text. Scope
to .static_page so we don't accidentally re-bullet navigation menus that
use for structure. .uk-list (which deliberately strips list styling)
is excluded so its behaviour is preserved inside static pages too. */
.static_page ul:not(.uk-list),
.static_page ol:not(.uk-list) {
margin: 0 0 1rem 0;
padding-left: 2rem;
}
.static_page ul:not(.uk-list) { list-style: disc outside; }
.static_page ol:not(.uk-list) { list-style: decimal outside; }
.static_page ul:not(.uk-list) > li,
.static_page ol:not(.uk-list) > li {
margin-bottom: 0.25rem;
}
/* Nested lists collapse their own margins so indentation rhythm stays even */
.static_page li > ul:not(.uk-list),
.static_page li > ol:not(.uk-list) {
margin-top: 0.25rem;
margin-bottom: 0;
}
/* --------------------------------------------------------------------------------
Lists
-------------------------------------------------------------------------------- */
.uk-list {
list-style: none;
padding: 0;
margin: 0;
}
.uk-list > li {
margin: 0;
}
/* --------------------------------------------------------------------------------
Panels — content containers used heavily in editorial copy
-------------------------------------------------------------------------------- */
.uk-panel {
display: block;
position: relative;
}
.uk-panel-box {
background: var(--card);
color: var(--card-foreground);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1rem;
}
.uk-panel-box-secondary {
background: var(--muted);
color: var(--foreground);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1rem;
}
/* --------------------------------------------------------------------------------
Grid — UIKit 2's grid was a flex row with gutters between children.
Stored HTML uses it to lay out sidebars, multi-column content, etc.
-------------------------------------------------------------------------------- */
.uk-grid {
display: flex;
flex-wrap: wrap;
margin-left: -25px;
}
.uk-grid > * {
padding-left: 25px;
box-sizing: border-box;
}
.uk-grid-large {
margin-left: -50px;
}
.uk-grid-large > * {
padding-left: 50px;
}
.uk-grid-small {
margin-left: -10px;
}
.uk-grid-small > * {
padding-left: 10px;
}
/* --------------------------------------------------------------------------------
Accordion — UIKit's accordion is JS-driven (uikit.js toggles a `uk-open`
class). With UIKit JS unloaded under Zion, we degrade gracefully: every
panel renders fully expanded so users can still read all content.
The hidden chevron is intentional — without working toggle behaviour
the indicator would be misleading.
-------------------------------------------------------------------------------- */
.uk-accordion {
display: block;
}
.uk-accordion-title {
cursor: default;
margin: 0 0 0.5rem 0;
}
.uk-accordion-content {
display: block !important;
margin-bottom: 1rem;
}
.uk-icon-chevron-down {
display: none;
}
/* --------------------------------------------------------------------------------
Alerts (uses Zion theme tokens)
-------------------------------------------------------------------------------- */
.uk-alert { /* [117] */
padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.uk-alert-danger {
background: color-mix(in oklab, var(--destructive) 10%, transparent);
color: var(--destructive);
border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
}
.uk-alert-success {
background: color-mix(in oklab, var(--success) 10%, transparent);
color: var(--success);
border-color: color-mix(in oklab, var(--success) 30%, transparent);
}
.uk-alert-warning {
background: color-mix(in oklab, var(--warning) 12%, transparent);
color: color-mix(in oklab, var(--warning) 80%, var(--foreground));
border-color: color-mix(in oklab, var(--warning) 35%, transparent);
}
/* --------------------------------------------------------------------------------
Buttons — minimal shim so legacy CTAs in DB content still look like buttons.
For new template work, use the `btn` aliases in custom.css instead.
-------------------------------------------------------------------------------- */
.uk-button { /* [753] */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: 1px solid var(--border);
background: var(--background);
color: var(--foreground);
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
text-decoration: none;
transition: background-color 120ms, color 120ms, border-color 120ms;
}
.uk-button:hover {
background: var(--accent);
color: var(--accent-foreground);
text-decoration: none;
}
.uk-button-primary { /* [313] */
background: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
.uk-button-primary:hover {
background: color-mix(in oklab, var(--primary) 90%, black);
color: var(--primary-foreground);
}
.uk-button-danger {
background: var(--destructive);
color: var(--primary-foreground);
border-color: var(--destructive);
}
.uk-button-mini { /* [86] */
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
}
.uk-button-large { /* [80] */
padding: 0.75rem 1.25rem;
font-size: 1rem;
}
/* CVP-custom button variants (not standard UIKit) */
.uk-button-yellow {
background: #facc15; /* tailwind yellow-400 */
color: #1f2937; /* zinc-800 */
border-color: #facc15;
}
.uk-button-yellow:hover {
background: #eab308; /* yellow-500 */
color: #111827;
}
.uk-button-text-only {
background: transparent;
border-color: transparent;
color: var(--primary);
padding-left: 0;
padding-right: 0;
}
.uk-button-text-only:hover {
background: transparent;
color: var(--foreground);
text-decoration: underline;
}
/* --------------------------------------------------------------------------------
Forms — minimal shim for editorial pages that occasionally embed forms.
Templated form work uses the .form / .input-row / .input aliases instead.
-------------------------------------------------------------------------------- */
.uk-form { display: block; }
.uk-form-row { margin-bottom: 1rem; }
.uk-form-label {
display: block;
margin-bottom: 0.375rem;
font-weight: 500;
font-size: 0.875rem;
color: var(--foreground);
}
.uk-form-controls { display: block; }
.uk-form-horizontal .uk-form-label { display: inline-block; width: 12rem; vertical-align: middle; }
.uk-form-horizontal .uk-form-controls { display: inline-block; vertical-align: middle; }
/* --------------------------------------------------------------------------------
Tables
-------------------------------------------------------------------------------- */
.uk-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
.uk-table th,
.uk-table td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.uk-table th {
font-weight: 600;
color: var(--foreground);
}
/* --------------------------------------------------------------------------------
Width tenths — UIKit 2 supplied 1/10..9/10 widths; stored grid layouts
use these for fine column control (e.g., 3-col layouts at 3/4/3 tenths).
-------------------------------------------------------------------------------- */
.uk-width-1-10 { width: 10%; }
.uk-width-2-10 { width: 20%; }
.uk-width-3-10 { width: 30%; }
.uk-width-4-10 { width: 40%; }
.uk-width-5-10 { width: 50%; }
.uk-width-6-10 { width: 60%; }
.uk-width-7-10 { width: 70%; }
.uk-width-8-10 { width: 80%; }
.uk-width-9-10 { width: 90%; }
/* --------------------------------------------------------------------------------
Slidesets — UIKit's JS-driven carousel. Without uikit.js loaded under Zion,
we degrade by showing only the first slide. Better than stacking every
banner on top of each other.
-------------------------------------------------------------------------------- */
.uk-slideset {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.uk-slideset > li { display: none; }
.uk-slideset > li:first-child {
display: block;
/* Slideset items frequently set background-image inline. UIKit's CSS
used to cover the box with the image; replicate that here so the
banner doesn't tile when the box is wider than the source. */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.uk-slidenav-position { position: relative; }
/* --------------------------------------------------------------------------------
CVP banner layout — these classes are NOT UIKit; they're CVP custom and
live in css/default/custom.css (which Zion doesn't load). Stored HTML
relies on them to size and center the banner title, so we mirror just
the layout-critical rules here. Source: css/default/custom.css ~L1235.
-------------------------------------------------------------------------------- */
ul.banner {
margin: 0;
padding: 0;
list-style: none;
}
ul.banner .banner_small {
min-height: 150px;
max-height: 150px;
}
@media (min-width: 768px) {
ul.banner .banner_small {
min-height: 200px;
max-height: 200px;
}
}
@media (min-width: 768px) and (max-width: 1200px) {
ul.banner .banner_small {
min-height: 240px;
max-height: 240px;
}
}
ul.banner .template_static.banner_item {
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
ul.banner .template_static.banner_item .banner_content_container {
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 1440px;
}
ul.banner .template_static.banner_item .banner_content_container .banner_content {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
}
@media (min-width: 768px) {
ul.banner .template_static.banner_item .banner_content_container .banner_content {
left: 20%;
right: 20%;
width: 60%;
}
}
ul.banner .template_static.banner_item .banner_content_container .banner_content .title_container {
padding: 14px !important;
/* No background-color here on purpose — stored HTML supplies its own
inline background-color (which wins). Old default was rgba(29,155,139,.83). */
}
ul.banner .template_static.banner_item .banner_content_container .banner_content .title_container > span.title_2 {
font-weight: 700;
color: #fff;
font-size: 24px;
line-height: 24px;
}
@media (min-width: 500px) and (max-width: 768px) {
ul.banner .template_static.banner_item .banner_content_container .banner_content .title_container > span.title_2 {
font-size: 30px;
line-height: 30px;
}
}
@media (min-width: 768px) and (max-width: 1200px) {
ul.banner .template_static.banner_item .banner_content_container .banner_content .title_container > span.title_2 {
font-size: 50px;
line-height: 56px;
}
}
@media (min-width: 1200px) {
ul.banner .template_static.banner_item .banner_content_container .banner_content .title_container > span.title_2 {
font-size: 60px;
line-height: 62px;
}
}
.banner_container {
text-align: center;
}
/* --------------------------------------------------------------------------------
Typos commonly found in stored HTML — alias to the intended class.
These exist because content editors mistyped over the years; cheaper to
alias here than to chase the typos through every translation column.
-------------------------------------------------------------------------------- */
.uk-text-rights { text-align: right; } /* should have been uk-text-right */
/* NOTE: do NOT shim `uk-hidde`. Despite looking like a `uk-hidden` typo,
it appears intentionally in stored HTML (e.g. on banner title overlays
that need to stay visible). Legacy UIKit had no rule for it, so it was
a deliberate no-op — content editors shaved the trailing `n` to disable
a hide rule. If we shim it to display:none we hide content. */
/* --------------------------------------------------------------------------------
Additional text sizes found in the wild
-------------------------------------------------------------------------------- */
.uk-text-very-small { font-size: 0.75rem; line-height: 1rem; }