tags */ p a { color: #CA4E00 !important; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } p a:hover { color: #526CFE !important; border-bottom-color: currentColor; } /* Hero sections — warm peach tones on dark backgrounds */ .hero-links a { color: #FFB88F !important; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .hero-links a:hover { color: #FFEDE2 !important; border-bottom-color: currentColor; } /* Midnight/dark sections — orange default, blue-purple on hover */ .dark-links a { color: #ff6a13 !important; } .dark-links a:hover { color: #6F85FF !important; } /* Anchor/body links — deeper orange default, blue on hover */ .anchor-links a { color: #CA4E00 !important; } .anchor-links a:hover { color: #526CFE !important; } /* Text selection colour — Rose. Author: Mike | Added: 3 Dec 2024 */ ::selection { background-color: #ca2d51; color: #ffffff; } /* ========================================================================== 3. TAGS SYSTEM Author: MikeM | Added: 18 Mar 2026 A reusable tag/badge component using CSS custom properties. How it works: - The base `.tag` class defines structure (border, padding, radius). - It reads two CSS variables: --tag-bg (fill) and --tag-accent (left border). - Modifier classes (e.g. .tag-supported) set those variables for each type. - To add a new tag type, just create a new modifier class with two variables. Usage: Supported ========================================================================== */ .tag { border-radius: 0; padding: 5px 10px 3px 10px; border-left: 5px solid var(--tag-accent); background-color: var(--tag-bg); } /* Orange — used for the current/active release */ .tag-latest-release { --tag-bg: #ff6a13; --tag-accent: #FFA36C; } /* Teal — actively supported versions */ .tag-supported { --tag-bg: #1A927D; --tag-accent: #5AB7A7; } /* Red — versions that are no longer supported */ .tag-unsupported { --tag-bg: #ca2d51; --tag-accent: #EE7D97; } /* Lavender — older versions still functional but not actively maintained */ .tag-legacy { --tag-bg: #8986CA; --tag-accent: #B4B2E3; } /* ========================================================================== 4. CODE & KEYBOARD STYLING Covers three contexts: a)
blocks — multi-line code samples with a white card treatment
b) tags — inline code within body text
c) .language-apl — APL-specific font override (APL385 Unicode)
d) tags — keyboard key references (e.g. Ctrl+C)
========================================================================== */
/* --- 4a. Code blocks () --- */
pre {
background: #ffffff;
overflow-x: auto !important; /* horizontal scroll if code is wide */
border: 1px solid #ddd;
border-radius: 6px;
padding: 1em 1.25em !important;
margin: 1.0em 0 !important;
font-size: 0.95em;
line-height: 1.20 !important;
font-family: "Courier New", "Consolas", monospace !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
/* inside : inherits pre's font; resets its own padding/bg
to avoid double-padding when a highlighter (e.g. Prism) wraps code in both */
pre code {
font-family: "Courier New", "Consolas", monospace !important;
line-height: 1.20 !important;
font-size: inherit;
padding: 0;
background: none !important;
border-radius: 0;
}
/* --- 4b. Inline code --- */
/* Inline not inside a : subtle monospace treatment.
Background is transparent so it sits cleanly on any page background. */
code {
font-family: "Courier New", "Consolas", monospace;
padding: 0.15em 0.35em;
border-radius: 4px;
font-size: 0.95em;
color: #333;
background: transparent;
}
/* --- 4c. APL-specific font --- */
/* Switches any code block to the APL385 Unicode font.
font-variant-ligatures: none prevents the browser from merging APL
glyphs into ligatures, which would change their meaning. */
.language-apl {
font-family: APL385, monospace !important;
font-variant-ligatures: none;
}
/* Inline APL code: inherit surrounding text colour so it doesn't look
like a link or error, and suppress any Prism syntax colouring. */
:not(pre) > code.language-apl {
color: inherit !important;
}
:not(pre) > code.language-apl .token {
color: inherit !important;
background: transparent !important;
}
/* --- 4d. Keyboard keys () --- */
/* Renders keyboard shortcut references to look like physical keys.
The asymmetric border-width (1px 3px 3px 1px) and box-shadow
together create the raised/3D key appearance. */
kbd {
background: white;
color: #000000;
padding: 3px;
border: 1px solid #e6e6e6;
border-radius: 0.25rem;
margin: 0 3px;
border-width: 1px 3px 3px 1px;
box-shadow: 0 2px 0 1px #a4a4a4;
font-weight: bold;
}
/* Standalone APL font class — for use outside of code blocks,
e.g. inline APL glyphs within body copy */
.APLFont {
font-family: APL385, monospace !important;
}
/* ==========================================================================
5. ICON COLOURS (Font Awesome)
Colours specific Font Awesome icons to visually match their file/service type.
========================================================================== */
.fa-file-pdf { color: #f30f01; } /* PDF — red */
.fa-file-archive { color: #F3CF39; } /* ZIP/archive — yellow */
.fa-globe { color: #EB7223; } /* Website/external — orange */
.fa-twitter { color: #1DA1F2; } /* Twitter/X — brand blue */
.fa-book { color: #5ed1ff; } /* Documentation — light blue */
/* .fa-file-chm: no built-in Font Awesome icon for CHM files, so a standard
icon is recoloured using a CSS filter. The filter values were generated at
https://codepen.io/sosuke/pen/Pjoqqp to convert black to #ef6d7f. */
.fa-file-chm {
width: 25px;
filter: invert(30%) sepia(14%) saturate(4809%) hue-rotate(237deg) brightness(91%) contrast(88%);
}
/* ==========================================================================
6. NAVIGATION & MENUS
========================================================================== */
/* Changes the cursor to a pointer on the hamburger/close button in Elementor's
mobile nav, since Elementor renders it as a non-interactive icon by default */
.eicon-close {
cursor: pointer;
}
/* Make / elements obviously clickable.
Browsers show a default triangle but don't always show pointer cursor. */
details {
cursor: pointer;
}
/* Removes the default left margin Elementor adds to the TOC ordered list,
which otherwise indents the first level unnecessarily */
ol.elementor-toc__list-wrapper {
margin-left: 0;
}
/* Forces the off-canvas TOC panel to span the full viewport width on mobile */
#offCanvas-toc div.uael-custom-offcanvas {
width: 100vw;
}
/* ==========================================================================
7. OFF-CANVAS MENU
Author: MikeM | Added: 29 Jan 2026
A tab-style trigger button that peeks out from the left edge of the screen
on mobile, sliding fully into view on hover. Hidden entirely on desktop.
The button uses position: fixed so it stays visible while the user scrolls.
It starts at left: -10px (partially off-screen) and slides to left: 0 on hover.
!important is needed throughout to override Elementor widget positioning.
========================================================================== */
/* Mobile: show the tab peeking from the left edge */
@media (max-width: 767px) {
.dy_off-canvas-open {
position: fixed !important;
left: -10px !important; /* partially hidden off left edge */
top: 50% !important;
transform: translateY(-50%) !important; /* true vertical centre */
z-index: 9999 !important; /* above all other content */
cursor: pointer !important;
transition: left 0.3s ease !important;
}
/* Slide fully into view on hover */
.dy_off-canvas-open:hover {
left: 0 !important;
}
}
/* Desktop: hide the tab entirely */
@media (min-width: 768px) {
.dy_off-canvas-open {
display: none !important;
}
}
/* ==========================================================================
8. STICKY TABLE OF CONTENTS
Author: MikeM | Added: 23 Jan 2026 | Updated: 30 Apr 2026
Makes the TOC widget stick to the top of the viewport as the user scrolls,
within a two-column layout. On desktop, the TOC scrolls independently if
the content is taller than the screen.
Setup required in Elementor:
- Add class 'toc-sticky' to the TOC widget
- Do NOT use Elementor's own sticky feature on the column (conflicts)
========================================================================== */
/* Stick the TOC to the top of the viewport inside its column */
.elementor .toc-sticky {
position: sticky;
top: 0px; /* increase this value if you have a fixed header (e.g. top: 80px) */
}
/* On desktop only: allow the TOC to scroll independently if it's taller
than the viewport. Excluded on mobile to prevent nested scroll issues
when the TOC is inside an off-canvas panel. */
@media (min-width: 1025px) {
.elementor .toc-sticky {
max-height: 100vh;
overflow-y: auto;
}
}
/* ==========================================================================
9. TEAM LOZENGES ANIMATION
Author: Mike | Updated: 29 Jan 2025
A slow background colour cycle on team member cards, fading between
Dyalog lavender (#8986CA) and Dyalog orange (#FF6A13) over 100 seconds.
Respects the user's OS/browser reduced-motion preference — if set,
the animation is disabled and the lavender fallback colour is shown instead.
Note: there is also companion JS on the page and within the card loops.
========================================================================== */
@keyframes team-ani-bg-animation {
0% { background-color: #8986CA; }
50% { background-color: #FF6A13; }
100% { background-color: #8986CA; }
}
.team-ani-bg {
background-color: #8986CA; /* fallback / reduced-motion colour */
animation: team-ani-bg-animation 100s linear infinite;
}
/* Stop the animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.team-ani-bg {
animation: none !important;
background-color: #8986CA !important;
}
}
/* ==========================================================================
10. VISUAL DECORATIONS
10a. Faded Dots Background
10b. Dyalog Gradient
10c. Grid Dividers
========================================================================== */
/* --- 10a. Faded Dots Background ---
Overlays a subtle white dot grid on a container using a ::after pseudo-element.
The radial gradient mask fades the dots out toward the centre, leaving them
most visible near the edges. Works on containers and image wrappers.
The dot pattern is an inline SVG data URI — no external image required.
The pattern tile is 8x8px, rendered at 16x16px (via background-size) for spacing.
The tile defines four dots: top-left, and three at the tile edges (y=8, x=8, x=8 y=8)
which when tiled create the staggered grid pattern.
z-index layering:
- ::after (the dots) sits at z-index: 1
- Direct children are pushed to z-index: 2 so they render above the dots
- position: relative on the parent is required for this to work
========================================================================== */
.faded-dots-bg {
position: relative; /* required for z-index stacking of ::after and children */
}
.faded-dots-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none; /* clicks pass through to content below */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-size: 16px 16px; /* scales the 8px tile up for looser dot spacing */
/* Fade effect: transparent at centre, fully visible dots at edges.
The mask only affects this ::after layer — not the content above it. */
-webkit-mask-image: radial-gradient(circle at center, transparent 0%, black 95%);
mask-image: radial-gradient(circle at center, transparent 0%, black 95%);
}
/* Push all direct children above the dot overlay */
.faded-dots-bg > * {
position: relative;
z-index: 2;
}
/* --- 10b. Dyalog Gradient ---
A two-colour soft radial gradient: blue-purple on the left, orange on the right.
Uses hsla colours at low opacity (0.2) so it works as a tint over any background.
The three background-image declarations are: Safari prefix, then standard syntax.
(The old Firefox 3.6 -moz- prefix has been removed — no longer needed.) */
.dy-gradient {
background-color: transparent !important;
/* Safari */
background-image:
-webkit-radial-gradient(59% 49%, hsla(240, 96%, 66%, 0.2) 0px, transparent 50%),
-webkit-radial-gradient(69% 51%, hsla(22, 100%, 54%, 0.2) 0px, transparent 50%) !important;
/* Standard */
background-image:
radial-gradient(at 59% 49%, hsla(240, 96%, 66%, 0.2) 0px, transparent 50%),
radial-gradient(at 69% 51%, hsla(22, 100%, 54%, 0.2) 0px, transparent 50%) !important;
}
/* --- 10c. Grid Dividers — centre-weighted fade ---
Draws a cross (+) of fading lines over a container to visually divide
a two-up card grid. The lines are solid in the centre and fade to transparent
at the edges, so they look natural rather than hard-ruled.
Apply class "grid-dividers" to the parent container of the grid.
Tuning variables (set on .grid-dividers or override inline):
--divider : line colour (default light grey)
--grid-width : total width the horizontal line spans
--solid-span : length of the solid (non-faded) centre section
Implementation notes:
- If Elementor has added a .elementor-background-overlay child, the lines are
drawn on that element (which is already absolutely positioned to fill the parent).
- If no overlay exists, the lines fall back to the parent's own background-image.
- The :has() fallback selector is supported in all modern browsers.
- Hidden on mobile — a vertical divider makes no sense in a stacked layout.
========================================================================== */
.grid-dividers {
position: relative;
--divider: #E6E6E6;
--grid-width: 1100px;
--solid-span: 120px; /* width of the non-faded centre — increase for a longer solid line */
}
/* Draw dividers on the Elementor background overlay if present */
.grid-dividers > .elementor-background-overlay {
background-image:
/* Horizontal line */
linear-gradient(
to right,
transparent,
var(--divider) calc(50% - var(--solid-span) / 2),
var(--divider) calc(50% + var(--solid-span) / 2),
transparent
),
/* Vertical line */
linear-gradient(
to bottom,
transparent,
var(--divider) calc(50% - var(--solid-span) / 2),
var(--divider) calc(50% + var(--solid-span) / 2),
transparent
);
background-size:
var(--grid-width) 1px,
1px 100%;
background-position:
center center,
center center;
background-repeat: no-repeat;
}
/* Fallback when no Elementor overlay element exists */
.grid-dividers:not(:has(> .elementor-background-overlay)) {
background-image:
linear-gradient(
to right,
transparent,
var(--divider) calc(50% - var(--solid-span) / 2),
var(--divider) calc(50% + var(--solid-span) / 2),
transparent
),
linear-gradient(
to bottom,
transparent,
var(--divider) calc(50% - var(--solid-span) / 2),
var(--divider) calc(50% + var(--solid-span) / 2),
transparent
);
background-size:
var(--grid-width) 1px,
1px 100%;
background-position:
center center,
center center;
background-repeat: no-repeat;
}
/* Hide dividers on mobile — not meaningful in a single-column stacked layout */
@media (max-width: 767px) {
.grid-dividers,
.grid-dividers > .elementor-background-overlay {
background-image: none !important;
}
}
/* ==========================================================================
11. INLINE IMAGES
A card-like wrapper for images used inline within body content.
Adds padding, rounded corners, a soft shadow, and a white background
so images don't bleed into surrounding text or coloured sections.
========================================================================== */
.dy-content-image {
padding: 20px !important;
margin: 20px !important;
border-radius: 15px !important;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
background-color: #fff;
}
/* ==========================================================================
12. EXTERNAL LINK ICONS
Author: MikeM | Added: February 2026
Appends a small external-link arrow icon after any tag inside an
.ex-link container, or after an tag with .ex-link directly on it.
The icon is injected via ::after using a CSS mask over a background-color.
This means it inherits the link's current text colour automatically,
including hover states — no separate hover rule needed.
Usage:
Visit site
Visit site
========================================================================== */
.ex-link a::after,
a.ex-link::after {
content: '' !important;
display: inline-block !important;
width: 0.75em !important;
height: 0.75em !important;
margin-left: 0.2em !important;
background-color: currentColor !important; /* inherits link/hover colour */
-webkit-mask-image: url('https://dyalogprod.gos.dyalog.com/wp-content/uploads/icon_general_external-link_04.svg') !important;
mask-image: url('https://dyalogprod.gos.dyalog.com/wp-content/uploads/icon_general_external-link_04.svg') !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
vertical-align: baseline !important;
}
/* ==========================================================================
13. DOWNLOAD DYALOG APL UI
Styles for the download page OS selection grid and registration modal.
========================================================================== */
/* Hide elements before JS reveals them (e.g. platform-specific content) */
.hidden {
display: none;
}
/* Ensure consistent font family across the download grid and register form */
.download-dyalog,
#register {
font-family: var(--e-global-typography-text-font-family);
}
/* Two-column OS selection grid */
.download-dyalog {
text-align: center;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
/* Individual OS option card */
.download-dyalog > div {
border: 1px solid #ccc;
background-color: var(--e-global-color-1a33761);
border-radius: 5px;
padding: 5px;
margin: 10px;
text-align: center;
width: 220px;
}
/* Large OS icon sizing */
.os-icon {
font-size: 6em;
}
/* Registration form input padding */
form#register input {
padding: 0.5em;
}
/* Standard text input field */
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0px 5px;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* Modal overlay — full-screen semi-transparent backdrop */
.modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black; /* fallback for browsers without rgba */
background-color: rgba(0, 0, 0, 0.4);
}
/* Modal content panel */
.modal-content {
margin: 15% auto;
width: 80%;
background-color: var(--e-global-color-1a33761);
}
/* ==========================================================================
14. WORDPRESS / GUTENBERG OVERRIDES
========================================================================== */
/* Custom horizontal rule for Gutenberg blocks.
The default
is often too heavy; this is a 1px hairline with generous spacing. */
hr.dy-hr {
border: none;
border-top: 1px solid #e6e6e6;
margin: 2em 0 !important;
}
/* Fix for bold body text. Author: Mike | Added: 3 Dec 2024 */
strong {
font-weight: bold !important;
}
/* ==========================================================================
15. ELEMENTOR OVERRIDES
========================================================================== */
/* Removes the unwanted bottom margin on the last paragraph inside an
Elementor text editor widget, which otherwise creates extra white space
between the text and the widget's bottom edge */
.elementor-widget-text-editor p:last-child {
margin-bottom: 0;
}
/* Adds consistent bottom spacing around lists inside Elementor containers,
covering both HTML widgets and text editor widgets */
.e-con-inner .elementor-widget.elementor-widget-html ul,
.e-con-inner .elementor-widget.elementor-widget-html ol,
.e-con-inner .elementor-widget.elementor-widget-text-editor ul,
.e-con-inner .elementor-widget.elementor-widget-text-editor ol {
margin-bottom: 10px;
}
/* ==========================================================================
16. UTILITY CLASSES
========================================================================== */
/* .hidden is defined in section 13 but applies globally */
/* ==========================================================================
17. TABLE OF CONTENTS
Styles for the UAEL (Ultimate Addons for Elementor) TOC widget on docs pages.
The TOC shows H2s with collapsible H3 children, controlled by JS on the page.
See the wiki for full implementation details.
========================================================================== */
/* Hide H3 children by default — JS adds .toc-open to reveal them */
.uael-toc-list > li > ul {
display: none;
padding-left: 12px;
}
/* H2 links: flex layout so the arrow and text sit on the same baseline */
.uael-toc-list > li > a {
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
/* Right-pointing arrow before every H2 that has children */
.uael-toc-list > li > a::before {
content: '▶';
font-size: 9px;
display: inline-block;
transition: transform 0.2s ease;
flex-shrink: 0;
}
/* Suppress the arrow on H2s that have no H3 children */
.uael-toc-list > li:not(:has(> ul)) > a::before {
content: none;
}
/* Rotate arrow 90° when the H3 list is expanded */
.uael-toc-list > li.toc-open > a::before {
transform: rotate(90deg);
}
/* Indent childless H2 items so their text aligns with arrowed items */
.uael-toc-list > li.no-children > a {
padding-left: 15px;
cursor: pointer;
}
/* Active state — UAEL's scroll spy adds .toc-active as the user scrolls.
Also highlights the parent H2 when a child H3 is active (.toc-active-parent). */
.uael-toc-list a.toc-active,
.uael-toc-list > li > a.toc-active-parent {
color: #526CFE !important;
font-weight: normal;
}