A few implementation notes:
The icons use Font Awesome 5 (already bundled with Salient) styled as soft-colored badge tiles — all verified at WCAG AA contrast or better. When you’re ready to swap in real SVG/PNG icons, you just replace with — keeping the wrapping a tag and aria-label in place.
For brand-accurate app icons, I’d recommend downloading from svgrepo.com (search “Moodle”, “Microsoft”, “Zoom”, etc.) and uploading to your WordPress Media Library. That way they’re stable, self-hosted, and no attribution is required.My trinity previewCode · HTML DownloadOK, I don’t love the stretched header font you used. Can you just make those unstyled h1, h2, h3 etc and let my site’s stylesheet do the styling?Generally this looks great – can you give me the code to cut and paste into the wordpress page editor text view?Mar 9Stripping custom styles, furnishing WordPress-ready shortcodeStripping custom styles, furnishing WordPress-ready shortcodeClaude’s response was interruptedRetryOK, I don’t love the stretched header font you used. Can you just make those unstyled h1, h2, h3 etc and let my site’s stylesheet do the styling? For the rest of the fonts, remove the font family styles so that my theme’s stylesheet and settings can set the fonts.
Generally this looks great – can you give me the code to cut and paste into the wordpress page editor text view?Mar 9Stripped custom fonts and unstyled headings for theme controlStripped custom fonts and unstyled headings for theme controlGood call — letting Salient own the typography is the right move. Here’s the updated CSS and shortcode, clean and ready to paste.

PART 1 — Additional CSS
(Appearance → Customize → Additional CSS)
css/* ===== My Trinity Page ===== */

/* Speed Rail */
.mytc-rail-row .vc_column-inner { padding-top:0!important; padding-bottom:0!important; }
.mytc-rail-item .vc_column-inner { display:flex; justify-content:center; }
.mytc-rail-link { display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;padding:14px 12px 12px;border-radius:14px;border:1.5px solid transparent;transition:background .18s,transform .18s,box-shadow .18s,border-color .18s; }
.mytc-rail-link:hover { background:#F7F3FD;border-color:#D9CCF0;transform:translateY(-3px);box-shadow:0 6px 20px rgba(75,39,128,.1);text-decoration:none; }
.mytc-rail-link:focus-visible { outline:3px solid #4B2780;outline-offset:3px;border-radius:14px; }
.mytc-icon-circle { width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:9px;flex-shrink:0; }
.mytc-icon-label { font-size:12.5px;font-weight:700;color:#2a2a2a;line-height:1.25;display:block; }

/* Icon badge colors — WCAG AA contrast verified */
.mytc-ic-moodle { background:#FEF3E2;color:#C45000; }
.mytc-ic-account { background:#EDE7F6;color:#4B2780; }
.mytc-ic-office { background:#E3F2FD;color:#0063B1; }
.mytc-ic-starfish { background:#E0F4FA;color:#005F80; }
.mytc-ic-selfserv { background:#E8F5E9;color:#1B5E20; }

/* Primary Cards */
.mytc-card { padding:6px!important; }
.mytc-card-link { display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;padding:26px 16px 22px;border:1.5px solid #E0D6EF;border-radius:16px;background:#fff;transition:border-color .18s,box-shadow .18s,transform .18s;height:100%; }
.mytc-card-link:hover { border-color:#4B2780;box-shadow:0 5px 20px rgba(75,39,128,.14);transform:translateY(-2px);text-decoration:none; }
.mytc-card-link:focus-visible { outline:3px solid #F7C948;outline-offset:3px;border-radius:16px; }
.mytc-card-icon { width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:13px;flex-shrink:0; }
.mytc-card-title { font-size:14.5px;font-weight:700;color:#2D1B4E;display:block;line-height:1.3;margin-bottom:4px; }
.mytc-card-sub { font-size:12px;color:#777;display:block;line-height:1.4; }

/* Card icon colors */
.mytc-ic-gmail { background:#FCE8EC;color:#B71C1C; }
.mytc-ic-ss { background:#EDE7F6;color:#4B2780; }
.mytc-ic-star2 { background:#E0F4FA;color:#005F80; }
.mytc-ic-shake { background:#FEF3E2;color:#C45000; }
.mytc-ic-outlook { background:#E3F2FD;color:#0063B1; }
.mytc-ic-teach { background:#FEF3E2;color:#C45000; }
.mytc-ic-adp { background:#E8F5E9;color:#1B5E20; }
.mytc-ic-zoom { background:#E8EAF6;color:#283593; }

/* Link Groups */
.mytc-link-group { padding:0 8px!important; }
.mytc-link-group h4 { text-transform:uppercase;letter-spacing:.1em;color:#4B2780!important;border-bottom:2px solid #F7C948;padding-bottom:7px;margin:24px 0 13px!important; }
.mytc-link-group ul { list-style:none;padding:0;margin:0; }
.mytc-link-group ul li { margin-bottom:7px; }
.mytc-link-group ul li a { font-size:14px;color:#3a3a3a;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:color .15s; }
.mytc-link-group ul li a::before { content:’›’;color:#F7C948;font-size:18px;font-weight:bold;line-height:.85;flex-shrink:0; }
.mytc-link-group ul li a:hover { color:#4B2780;text-decoration:underline; }
.mytc-link-group ul li a:focus-visible { outline:2px solid #4B2780;outline-offset:2px;border-radius:2px; }

/* Tabs overrides */
.mytc-tabs .vc_tta-tabs-list { border-bottom:2px solid #E0D6EF!important;margin-bottom:28px!important; }
.mytc-tabs .vc_tta-tab > a { font-size:15px!important;font-weight:700!important;color:#888!important;padding:12px 32px 14px!important;border:none!important;background:transparent!important;transition:color .18s!important; }
.mytc-tabs .vc_tta-tab.vc_active > a { color:#4B2780!important;border-bottom:3px solid #4B2780!important;background:transparent!important; }
.mytc-tabs .vc_tta-tab > a:focus-visible { outline:3px solid #4B2780!important;outline-offset:2px!important;border-radius:4px!important; }
.mytc-tabs .vc_tta-panels-container { padding-top:4px!important;background:transparent!important;border:none!important; }

/* Offices section heading accent */
.mytc-offices-h2 { border-left:4px solid #F7C948!important;padding-left:16px!important;margin-bottom:32px!important; }