{"id":8,"date":"2026-07-06T23:24:24","date_gmt":"2026-07-06T23:24:24","guid":{"rendered":"https:\/\/truenorthcdev.wpenginepowered.com\/?page_id=8"},"modified":"2026-07-22T15:11:18","modified_gmt":"2026-07-22T15:11:18","slug":"true-north-cables","status":"publish","type":"page","link":"https:\/\/truenorthcables.com\/","title":{"rendered":"True North Cables"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ============================================================\n   True North Cables \u2014 PAGE CSS   (the page's own custom CSS block)\n   Units: theme root is 62.5% \u2192 1rem = 10px (1.6rem = 16px, 3.2rem = 32px).\n   Brand tokens (--tn-*) live in global.css.\n============================================================ *\/\n\n\/* == OVERRIDES == *\/\n.wp-site-blocks,\n.wp-site-blocks > main,\n.wp-block-post-content,\n.entry-content {\n  overflow: visible;\n}\n\n.site-header,\n.site-footer { display: none; }\n\n\/* Kill the theme's default list indentation (nav list, quality grid, etc.) *\/\n.entry-content ul,\n.entry-content ol {\n    padding-left: unset !important;\n}\n\nhtml { scroll-behavior: smooth; }\n#intro,\n#quality,\n#features,\n#mission,\n#purchase { scroll-margin-top: 7rem; }        \/* clear the fixed desktop bar + buffer *\/\n\n@media (max-width: 768px) {\n    #intro,\n    #quality,\n    #features,\n    #mission,\n    #purchase { scroll-margin-top: 6rem; }     \/* slimmer mobile bar + buffer *\/\n}\n\n\/* == SKIP LINK ==\n   First focusable element; parked off-screen, drops in on focus and sends focus\n   to the hero (#tn-content). `a.` qualifier beats the theme's `.entry-content a`. *\/\na.tn-skip-link {\n    position: fixed;\n    top: 0;\n    left: 1.6rem;\n    z-index: 1000;                    \/* above the fixed header (z-index: 100) *\/\n    transform: translateY(-120%);     \/* parked just above the viewport *\/\n    padding: 0.8rem 1.6rem;\n    background: var(--tn-dark);\n    color: var(--tn-white);\n    font-family: \"Saira\", sans-serif;\n    font-weight: 600;\n    text-decoration: none;\n    border-radius: 0 0 0.6rem 0.6rem;\n    transition: transform 200ms ease;\n}\na.tn-skip-link:focus {\n    transform: translateY(0);         \/* slide into view *\/\n    outline: 2px solid var(--tn-white);\n    outline-offset: 2px;\n}\n\/* Skip target lands on the hero \u2014 don't ring the whole banner *\/\n.tn-hero:focus { outline: none; }\n\n\/* == SECTION 1 \u2014 NAV BAR == *\/\n.tn-header {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 100;\n    background: var(--tn-dark);\n    padding: 1.2rem 2.4rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.tn-header__logo { display: inline-flex; }\n.tn-header__logo img { display: block; height: 4rem; width: auto; }\n\n\/* Anchor nav \u2014 inline on desktop; collapses into the hamburger drawer \u2264768px *\/\n.tn-header__nav-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    gap: 3.2rem;\n}\n.tn-header__nav-list a {\n    position: relative;\n    color: var(--tn-white);\n    text-decoration: none;\n    font-family: \"Saira\", sans-serif;\n    font-weight: 600;\n    text-transform: uppercase;\n    font-size: 1.5rem;\n    letter-spacing: .04em;\n    transition: color 250ms ease-in-out;\n}\n.tn-header__nav-list a:hover { color: var(--tn-cyan); }\n\/* Keyboard focus \u2014 white ring, kept separate from the magenta active marker so\n   \"focused\" and \"current section\" never read as the same thing. *\/\n.tn-header__nav-list a:focus-visible {\n    outline: 2px solid var(--tn-white);\n    outline-offset: 4px;\n    border-radius: 4px;\n}\n\n\/* Active indicator \u2014 magenta bar + centered notch (JS toggles .is-active).\n   Pure CSS: bar fits the label, notch stays centered. *\/\n.tn-header__nav-list a::after {                 \/* the bar *\/\n    content: \"\";\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -0.8rem;\n    height: 0.4rem;\n    background: var(--tn-magenta);\n    opacity: 0;\n    transform: scaleX(0.4);\n    transform-origin: center;\n    transition: opacity 200ms ease, transform 200ms ease;\n}\n.tn-header__nav-list a::before {                \/* the upward notch *\/\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    bottom: -0.4rem;\n    transform: translateX(-50%);\n    border-left: 0.45rem solid transparent;\n    border-right: 0.45rem solid transparent;\n    border-bottom: 0.4rem solid var(--tn-magenta);\n    opacity: 0;\n    transition: opacity 200ms ease;\n}\n.tn-header__nav-list a.is-active::after  { opacity: 1; transform: scaleX(1); }\n.tn-header__nav-list a.is-active::before { opacity: 1; }\n\n\/* Hamburger toggle \u2014 hidden on desktop, shown \u2264768 *\/\n.tn-header__toggle {\n    display: none;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    width: 4rem;\n    height: 4rem;\n    padding: 0;\n    background: none;\n    border: 0;\n    border-radius: 8px;   \/* no visible effect at rest; shapes the focus ring *\/\n    cursor: pointer;\n}\n.tn-header__toggle:focus-visible {\n    outline: 2px solid var(--tn-white);\n    outline-offset: 3px;\n}\n.tn-header__toggle-bar {\n    display: block;\n    width: 2.6rem;\n    height: 2px;\n    background: var(--tn-white);\n    border-radius: 999px;\n    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms ease;\n}\n\n\/* \u2264768 \u2014 hamburger + slim right-edge drawer, revealed via clip-path (nothing\n   overflows or peeks). \u2264475 switches to a full-width top drawer. *\/\n@media (max-width: 768px) {\n    .tn-header { padding: 1rem 2rem; }                 \/* slimmer bar on mobile *\/\n    .tn-header__logo img { height: 3rem; }\n\n    .tn-header__toggle { display: inline-flex; width: 3rem; height: 3rem; }\n\n    .tn-header__nav {\n        position: fixed;\n        top: 5rem;                       \/* matches the slimmer bar (3rem + 1rem\u00d72 padding) *\/\n        right: 0;\n        left: auto;\n        width: 22rem;                    \/* slim drawer width *\/\n        max-width: 80vw;\n        background: rgba(0, 37, 51, 0.94);      \/* --tn-dark, reduced opacity *\/\n        -webkit-backdrop-filter: blur(6px);\n        backdrop-filter: blur(6px);\n        border-radius: 0 0 0 0.8rem;\n        box-shadow: -0.6rem 0.6rem 2rem rgba(0, 0, 0, 0.26);\n        opacity: 0;\n        clip-path: inset(0 0 0 100%);           \/* closed: zero width at the right edge *\/\n        visibility: hidden;                     \/* drop links from tab order + AT tree while closed *\/\n        transition: clip-path 480ms cubic-bezier(0.22, 1, 0.36, 1),\n                    opacity 360ms ease,\n                    visibility 0s linear 480ms;  \/* hide only AFTER the slide-out finishes *\/\n    }\n    .tn-header.is-open .tn-header__nav {\n        opacity: 1;\n        clip-path: inset(0 0 0 0);              \/* open: reveals leftward from the right *\/\n        visibility: visible;\n        transition: clip-path 480ms cubic-bezier(0.22, 1, 0.36, 1),\n                    opacity 360ms ease,\n                    visibility 0s;               \/* show immediately so the reveal animates *\/\n    }\n\n    .tn-header__nav-list { flex-direction: column; gap: 0; }\n    .tn-header__nav-list li { width: 100%; text-align: center; padding: 1.2rem 0; }\n    .tn-header__nav-list li:not(:last-child) {\n        border-bottom: 1px solid rgba(255, 255, 255, 0.1);   \/* separators between items *\/\n    }\n    \/* inline-block + centered so the magenta bar\/notch indicator fits each label *\/\n    .tn-header__nav-list a {\n        display: inline-block;\n        font-size: 1.6rem;\n        line-height: 1;\n        padding-bottom: 0.4rem;\n    }\n\n    \/* hamburger \u2192 X *\/\n    .tn-header.is-open .tn-header__toggle-bar:nth-child(1) { transform: translateY(0.7rem) rotate(45deg); }\n    .tn-header.is-open .tn-header__toggle-bar:nth-child(2) { opacity: 0; }\n    .tn-header.is-open .tn-header__toggle-bar:nth-child(3) { transform: translateY(-0.7rem) rotate(-45deg); }\n}\n\n\/* \u2264475 \u2014 small phones: full-width top drawer that reveals DOWN from the bar. *\/\n@media (max-width: 475px) {\n    .tn-header__nav {\n        left: 0;\n        right: 0;\n        width: auto;\n        max-width: none;\n        border-radius: 0 0 0.8rem 0.8rem;\n        box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.25);\n        clip-path: inset(0 0 100% 0);           \/* closed: zero height at the top *\/\n    }\n    .tn-header.is-open .tn-header__nav { clip-path: inset(0 0 0 0); }  \/* reveals downward *\/\n}\n\n\/* == SECTION 2 \u2014 HERO == *\/\n\/* margin-top \u2248 the fixed header's height (6.5rem desktop \/ 5rem mobile, below) so the\n   hero clears the bar. Heads up: while LOGGED IN, the WP admin bar offsets the page\n   (and jumps 32px\u219246px at 782px), so the spacing looks off in the editor\/preview.\n   To judge the real layout, view the base URL (not the WP preview URL) logged out in\n   a private\/incognito window. *\/\n.tn-hero {\n    min-height: 420px;\n    padding: 3.2rem 2.4rem;\n    margin-top: 6.5rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    background:\n        linear-gradient(0deg, rgba(0, 37, 51, .65), rgba(0, 37, 51, .55)),\n        url('\/wp-content\/uploads\/2026\/07\/tn-hero-scaled.jpg') center \/ cover no-repeat;\n    background-position: 50% 60%;\n}\n\n.tn-hero__logo {\n    display: block;\n    width: 100%;\n    max-width: 620px;\n    height: auto;\n    margin: 0 auto 2.8rem;\n}\n\n.tn-hero__tagline {\n    color: var(--tn-white);\n    font-size: clamp(2rem, 2.2vw, 2.8rem);\n    letter-spacing: .02em;\n    margin-inline: auto;\n}\n\n@media (max-width: 768px) {\n    .tn-hero { margin-top: 5rem; }\n}\n\n\/* == SECTION 3 \u2014 INTRO STORY (two-column text) == *\/\n.tn-intro {\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8rem;\n    max-width: 1568px;\n    margin-inline: auto;\n    padding: 4.25rem 8rem;\n}\n\n.tn-intro__col { flex: 1; }\n\n.tn-intro__col p { font-size: 1.8rem; margin: 0 0 2.4rem; }\n.tn-intro__col p:last-child { margin-bottom: 0; }\n\n@media (max-width: 768px) {\n    .tn-intro { flex-direction: column; gap: 4rem; padding: 4.25rem 3.2rem; }\n}\n\n\/* == SECTION 4 \u2014 QUALITY WHERE IT COUNTS ==\n   Black panel over a gray band; magenta \u25b2 top + cyan \u25bc bottom; 3\u00d73 grid. *\/\n.tn-quality {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    padding: 6rem 2.4rem;\n}\n\n\/* Gray band behind the panel (shows left\/right of it) *\/\n.tn-quality::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 62%;                     \/* band height *\/\n    background: var(--tn-gray-band);\n    z-index: 0;\n}\n\n.tn-quality__panel {\n    --tn-tri-gap: 0.8rem;            \/* gap between panel and triangles *\/\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    max-width: 1040px;\n    padding: 6rem;\n    background: var(--tn-black);\n    border-radius: 1.2rem;\n    color: var(--tn-white);\n    text-align: center;\n}\n\n\/* Brand triangles \u2014 80 wide, 30 tall, a small gap off the panel *\/\n.tn-quality__panel::before,\n.tn-quality__panel::after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    border-left: 4rem solid transparent;   \/* 40 + 40 = 80px wide *\/\n    border-right: 4rem solid transparent;\n}\n.tn-quality__panel::before {         \/* magenta \u25b2 above (compass N points up) *\/\n    top: 0;\n    transform: translate(-50%, calc(-100% - var(--tn-tri-gap))) rotate(180deg);\n    border-top: 3rem solid var(--tn-magenta);   \/* 30px tall *\/\n}\n.tn-quality__panel::after {          \/* cyan \u25bc below *\/\n    bottom: 0;\n    transform: translate(-50%, calc(100% + var(--tn-tri-gap)));\n    border-top: 3rem solid var(--tn-cyan);      \/* 30px tall *\/\n}\n\n.tn-quality__title { font-size: 3.2rem; margin: 0 0 2rem; }\n.tn-quality__intro {\n    font-size: 1.6rem;\n    line-height: 1.6;\n    max-width: 760px;\n    margin: 0 auto 5rem;\n}\n\n.tn-quality__grid {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 4rem;\n    text-align: center;\n}\n\n.tn-quality__item h3 { font-size: 1.8rem; margin: 0 0 1rem; text-decoration: underline; }\n.tn-quality__item p  { font-size: 1.4rem; line-height: 1.6; margin: 0; }\n\n.tn-quality__footnote {\n    font-size: 1.4rem;\n    text-align: center;\n    margin: 4rem 0 0;\n    font-weight: 600;\n    opacity: 0.8;\n    font-family: \"Saira\", sans-serif;\n    text-transform: uppercase;\n}\n\n@media (max-width: 1024px) {\n    .tn-quality__grid { grid-template-columns: repeat(2, 1fr); }\n}\n\n@media (max-width: 768px) {\n    .tn-quality { padding: 6rem 1.6rem; }\n    .tn-quality__panel { padding: 4rem 2.4rem; }\n    .tn-quality__grid { grid-template-columns: 1fr; gap: 3rem; }\n}\n\n\/* == SECTIONS 5\u20137 \u2014 FEATURE ROWS (alternating image\/text) ==\n   Reusable pattern; .tn-feature--reverse flips the image to the right. *\/\n.tn-feature {\n    display: flex;\n    align-items: flex-start;                                  \/* top-align \u2014 no floating image \/ gaps *\/\n    gap: clamp(3rem, 4vw, 6rem);                              \/* fluid \u2014 shrinks with the viewport *\/\n    max-width: 1568px;\n    margin-inline: auto;\n    padding: 4rem clamp(2.4rem, 6vw, 8rem);   \/* vertical = half the 8rem rhythm (see --first\/--last) *\/\n}\n\n.tn-feature--reverse { flex-direction: row-reverse; }\n\n\/* 3 stacked rows read as one group: 4rem top\/bottom \u2192 each inner gap is 4+4 = 8rem,\n   and the group's outer edges get the full 8rem. *\/\n.tn-feature--first { padding-top: 8rem; }\n.tn-feature--last  { padding-bottom: 8rem; }\n\n\/* Feature image \u2014 crop-to-fill, no distortion. *\/\n.tn-feature__media {\n    flex: 2;                         \/* image column \u224840% (narrower than the text) *\/\n    aspect-ratio: 4 \/ 3;\n    background: var(--tn-gray-image);\n    border-radius: 1.2rem;\n    max-width: 520px;                \/* cap image size on wide screens *\/\n    object-fit: cover;\n    object-position: 50% 60%;\n    display: block;\n}\n\n.tn-feature__body { flex: 3; }       \/* text gets the larger share (\u224860%) *\/\n.tn-feature__body h2 { font-size: 2.8rem; margin: 0 0 2rem; }\n.tn-feature__body p  { font-size: 1.8rem; margin: 0 0 2rem; }\n.tn-feature__body p:last-child { margin-bottom: 0; }\n\n@media (max-width: 1024px) {\n    .tn-feature,\n    .tn-feature--reverse { flex-direction: column; align-items: stretch; gap: 3rem; }\n    .tn-feature__media { max-width: none; max-height: 40rem; }   \/* full width, capped height once stacked *\/\n}\n@media (max-width: 640px) {\n    .tn-feature,\n    .tn-feature--reverse { padding-left: 0; padding-right: 0; }  \/* let the image bleed edge-to-edge *\/\n    .tn-feature__media { border-radius: 0; max-height: none; }   \/* full-width photo, square corners *\/\n    .tn-feature__body { padding-inline: 3.2rem; }                \/* keep text off the edges *\/\n}\n\n\/* == SECTION 8 \u2014 MISSION-SPECIFIC DESIGNS (full-width black band) == *\/\n.tn-mission {\n    background: var(--tn-black);\n    color: var(--tn-white);\n    padding: 8rem 2.4rem;\n}\n.tn-mission__inner { max-width: 1000px; margin-inline: auto; }   \/* content width *\/\n.tn-mission h2 { font-size: 3.2rem; text-align: center; margin: 0 0 3rem; }\n.tn-mission p  { font-size: 1.8rem; margin: 0 0 2.4rem; text-align: center; }\n.tn-mission p:last-child { margin-bottom: 0; }\n\n\/* Cable-configuration cards \u2014 2\u00d72 grid, mirrors the Quality item type (white on the black band) *\/\n.tn-mission__configs {\n    list-style: none;\n    margin: 7rem 0 0;\n    padding: 0;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 4rem;\n    text-align: center;\n}\n.tn-mission__config h3 { font-size: 1.8rem; margin: 0 0 1rem; text-decoration: underline; }\n.tn-mission__config p  { font-size: 1.4rem; line-height: 1.6; margin: 0 0 0.8rem; }\n\n@media (max-width: 768px) {\n    .tn-mission { padding-inline: 3.2rem; }\n    .tn-mission__configs { grid-template-columns: 1fr; gap: 3rem; }\n}\n\n\/* == SECTION 9 \u2014 SOLD EXCLUSIVELY AT SWEETWATER (CTA) ==\n   Full-bleed image on the LEFT (edge-to-edge, full height); text panel on the right. *\/\n.tn-cta {\n    display: flex;\n    align-items: stretch;            \/* columns share height so the image fills its side *\/\n}\n.tn-cta__media {\n    flex: 1;\n    min-width: 0;\n    align-self: stretch;             \/* image stretches to the panel's full height *\/\n    background: var(--tn-gray-image);\n    object-fit: cover;\n    object-position: 50% 50%;\n    display: block;\n}\n.tn-cta__body {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;                  \/* vertically center against the taller image *\/\n    align-items: center;                      \/* center copy + pill (pill keeps its natural width) *\/\n    text-align: center;\n    padding: 6rem clamp(2.4rem, 6vw, 8rem);\n}\n.tn-cta__heading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 1rem;\n    margin: 0 0 2rem;\n    font-size: 2.8rem;\n}\n.tn-cta__logo { width: 280px; max-width: 100%; height: auto; }   \/* logo size *\/\n.tn-cta__body p { font-size: 1.8rem; margin: 0 0 3rem; }\n\n\/* Outlined pill button; inverts on hover. *\/\n.tn-cta__button {\n    display: inline-flex;            \/* aligns the icon with the text *\/\n    align-items: center;\n    gap: 0.8rem;\n    font-size: 1.6rem;\n    font-weight: 600;\n    text-decoration: none;\n    padding: 1rem 2rem;\n    background-color: var(--tn-white);\n    color: var(--tn-dark);\n    border: 2px solid var(--tn-dark);\n    border-radius: 999px;\n    transition: background-color 250ms ease-in-out, color 250ms ease-in-out;\n}\n.tn-cta__button:hover {\n    background: var(--tn-dark);\n    color: var(--tn-white);\n}\n\/* Keyboard focus \u2014 mirror the hover invert AND add a dark ring (strong cue on a\n   page with few controls). Separate from :hover so a mouse hover shows no ring. *\/\n.tn-cta__button:focus-visible {\n    background: var(--tn-dark);\n    color: var(--tn-white);\n    outline: 2px solid var(--tn-dark);\n    outline-offset: 3px;\n}\n.tn-cta__button-icon { width: 1.6rem; height: 1.6rem; flex-shrink: 0; stroke-width: 2.5; }\n\n@media (max-width: 1024px) {\n    .tn-cta { flex-direction: column; }\n    .tn-cta__media { flex: none; width: 100%; aspect-ratio: 16 \/ 10; }   \/* controlled height when stacked *\/\n}\n\n\/* == FOOTER \u2014 dark band: logo, tagline, contact == *\/\n.tn-footer {\n    background: var(--tn-dark);\n    color: var(--tn-white);\n    padding: 5rem 2.4rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 2rem;\n}\n.tn-footer__logo {\n    display: block;\n    width: 100%;\n    max-width: 350px;                \/* logo size *\/\n    height: auto;\n}\n\/* Tagline \u2014 same treatment as the hero tagline (Saira caps), sized down for the footer *\/\n.tn-footer__tagline {\n    margin: 0 auto;\n    max-width: 60rem;\n    font-family: \"Saira\", sans-serif;\n    font-weight: 600;\n    text-transform: uppercase;\n    font-size: 1.6rem;\n    letter-spacing: .02em;\n    line-height: 1.3;\n    text-align: center;\n}\n\n.tn-footer__contact {\n    margin: 0;\n    font-size: 1.4rem;\n    text-align: center;\n}\n.tn-footer__contact a {\n    color: var(--tn-cyan);\n    text-decoration: underline;\n}\n.tn-footer__contact a:hover { color: var(--tn-white); }\n.tn-footer__contact a:focus-visible {\n    outline: 2px solid var(--tn-white);\n    outline-offset: 2px;\n    border-radius: 2px;\n}\n\n\/* == REDUCED MOTION ==\n   Kill smooth scroll + all transitions. Targeted (not a universal *) so nothing\n   unexpected changes; drawer open\/close becomes instant. *\/\n@media (prefers-reduced-motion: reduce) {\n    html { scroll-behavior: auto; }\n\n    a.tn-skip-link,\n    .tn-header__nav-list a,\n    .tn-header__nav-list a::before,\n    .tn-header__nav-list a::after,\n    .tn-header__toggle-bar,\n    .tn-header__nav,\n    .tn-header.is-open .tn-header__nav,\n    .tn-cta__button {\n        transition: none;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* Nav scroll-spy + mobile hamburger menu. Lives in the JS tab (raw JS, no\n   <script> wrapper). Requires section ids #intro #quality #features #mission\n   #purchase and the .is-active styles in the CSS tab. *\/\n(function () {\n  function init() {\n    var nav = document.querySelector('.tn-header__nav-list');\n    if (!nav) return;\n\n    var links = Array.prototype.slice.call(nav.querySelectorAll('a[href^=\"#\"]'));\n    var header = document.querySelector('.tn-header');\n    var sections = links\n      .map(function (l) { return document.querySelector(l.getAttribute('href')); })\n      .filter(Boolean);\n    if (!sections.length) return;\n\n    function setActive(id) {\n      links.forEach(function (l) {\n        var active = l.getAttribute('href') === '#' + id;\n        l.classList.toggle('is-active', active);\n        \/\/ Expose the current section to assistive tech (mirrors the visual .is-active marker)\n        if (active) {\n          l.setAttribute('aria-current', 'true');\n        } else {\n          l.removeAttribute('aria-current');\n        }\n      });\n    }\n\n    function onScroll() {\n      \/\/ Activation line ~30% down the viewport, so a section lights up once it's\n      \/\/ meaningfully in view (not only when its top reaches the very top).\n      var line = (header ? header.offsetHeight : 0) + window.innerHeight * 0.3;\n      var current = null;\n      \/\/ Bottom of page: the last section's top may never reach the line \u2014 force it active.\n      if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2) {\n        current = sections[sections.length - 1];\n      } else {\n        sections.forEach(function (sec) {\n          if (sec.getBoundingClientRect().top <= line) current = sec;\n        });\n      }\n      setActive(current ? current.id : '');\n    }\n\n    \/\/ Hamburger toggle (mobile \u2264768)\n    var toggle = document.querySelector('.tn-header__toggle');\n    var navPanel = document.querySelector('.tn-header__nav');\n    function closeMenu(returnFocus) {\n      if (!header) return;\n      if (!header.classList.contains('is-open')) return;   \/\/ cheap no-op when already closed\n      header.classList.remove('is-open');\n      if (toggle) {\n        toggle.setAttribute('aria-expanded', 'false');\n        \/\/ Restore focus to the toggle only on an explicit keyboard dismiss (Escape);\n        \/\/ NOT on scroll\/outside-click, where forcing focus would yank the page.\n        if (returnFocus) { toggle.focus(); }\n      }\n    }\n\n    \/\/ Scroll: dismiss any open menu, then run the spy (rAF-throttled)\n    var ticking = false;\n    window.addEventListener('scroll', function () {\n      closeMenu();   \/\/ any scroll dismisses an open mobile menu\n      if (!ticking) {\n        window.requestAnimationFrame(function () { onScroll(); ticking = false; });\n        ticking = true;\n      }\n    }, { passive: true });\n\n    if (toggle) {\n      toggle.addEventListener('click', function () {\n        var open = header.classList.toggle('is-open');\n        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');\n        \/\/ Move focus into the drawer so keyboard users land inside the menu\n        if (open) {\n          if (links[0]) { links[0].focus(); }\n        }\n      });\n    }\n    document.addEventListener('keydown', function (e) {\n      if (e.key === 'Escape') { closeMenu(true); }\n    });\n    \/\/ Tap\/click outside the drawer closes it (nested ifs \u2014 the JS tab encodes \"&#038;&#038;\")\n    document.addEventListener('click', function (e) {\n      if (toggle) { if (toggle.contains(e.target)) return; }       \/\/ the toggle manages its own open\/close\n      if (navPanel) { if (navPanel.contains(e.target)) return; }   \/\/ clicks inside the drawer stay open (links close themselves)\n      closeMenu();\n    });\n\n    \/\/ Clicking a nav link: mark it active right away + close the mobile menu\n    links.forEach(function (l) {\n      l.addEventListener('click', function () {\n        setActive(l.getAttribute('href').slice(1));\n        closeMenu();\n      });\n    });\n\n    onScroll();   \/\/ set initial state on load\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n})();\n<\/script>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* NOTE: All styles are located in the tip top custom HTML block. *\/\n<\/style>\n\n<!-- Nav \/ header. Markup here \u00b7 styles in the CSS tab \u00b7 menu JS in the JS tab. Full build map: repo README.md. -->\n\n<a class=\"tn-skip-link\" href=\"#tn-content\">Skip to content<\/a>\n\n<header class=\"tn-header\">\n  <span class=\"tn-header__logo\">\n    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/TrueNorth-Compass-reverse-TM.png\" alt=\"\">\n  <\/span>\n\n  <button class=\"tn-header__toggle\" type=\"button\" aria-label=\"Toggle section navigation\" aria-expanded=\"false\" aria-controls=\"tn-nav\">\n    <span class=\"tn-header__toggle-bar\"><\/span>\n    <span class=\"tn-header__toggle-bar\"><\/span>\n    <span class=\"tn-header__toggle-bar\"><\/span>\n  <\/button>\n\n  <nav class=\"tn-header__nav\" id=\"tn-nav\" aria-label=\"Section navigation\">\n    <ul class=\"tn-header__nav-list\">\n      <li><a href=\"#intro\">Intro<\/a><\/li>\n      <li><a href=\"#quality\">Quality<\/a><\/li>\n      <li><a href=\"#features\">Features<\/a><\/li>\n      <li><a href=\"#mission\">Mission<\/a><\/li>\n      <li><a href=\"#purchase\">Purchase<\/a><\/li>\n    <\/ul>\n  <\/nav>\n<\/header>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* NOTE: All styles are located in the tip top custom HTML block. *\/\n<\/style>\n\n<!-- Hero \u2014 .tn-hero \u00b7 static. Background photo + overlay set in the CSS tab. -->\n\n<section class=\"tn-hero\" id=\"tn-content\" tabindex=\"-1\">\n  <img decoding=\"async\"\n    class=\"tn-hero__logo\"\n    src=\"\/wp-content\/uploads\/2026\/07\/TrueNorthCableCompany-reverse-full_tm.png\"\n    alt=\"True North Cable Company\"\n  \/>\n  <h1 class=\"tn-hero__tagline\">\n    Engineered for ultimate performance and reliability\n  <\/h1>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* NOTE: All styles are located in the tip top custom HTML block. *\/\n<\/style>\n\n<!-- Intro \u2014 .tn-intro \u00b7 static two-column text. Styles in the CSS tab. -->\n\n<section class=\"tn-intro\" id=\"intro\">\n  <div class=\"tn-intro__col\">\n    <p>True North&trade; makes professional-grade, thoughtfully designed audio cables built to perform in real-world, high-stakes applications.<\/p>\n    <p>Before the first True North cable saw the light of day, we assembled a team of product designers and industry experts with hundreds of years of combined experience and a shared passion for quality gear. Our team spent countless hours debating the core ingredients of a premium cable and conducted extensive interviews with FOH and studio engineers, touring musicians, content creators, session players, and seasoned music gear sales professionals.<\/p>\n  <\/div>\n  <div class=\"tn-intro__col\">\n    <p>By understanding the pain points and focusing on features and specs that help people sound their best, we created the industry's most comprehensive, highest-performing line of premium-quality cables and snakes.<\/p>\n    <p>Offering an ever-growing catalog of hundreds of SKUs \u2014 with hundreds more in development \u2014 our goal is to meet all your cable needs. From the stage to the studio, you can trust a True North cable to faithfully preserve signal integrity, deliver uncompromising reliability, and offer user-friendly features that make it easy to integrate into a modern recording setup, touring guitar rig, PA system, and beyond.<\/p>\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* NOTE: All styles are located in the tip top custom HTML block. *\/\n<\/style>\n\n<!-- Quality \u2014 .tn-quality \u00b7 static 3x3 feature grid on a black panel. Styles in the CSS tab. -->\n\n<section class=\"tn-quality\" id=\"quality\">\n  <div class=\"tn-quality__panel\">\n    <h2 class=\"tn-quality__title\">Quality Where It Counts<\/h2>\n    <p class=\"tn-quality__intro\">We never want you to pay for things that don't measurably enhance audio quality, EMI and RFI reduction, or reliability. Made with the strictest quality standards and a proud commitment to doing things right, True North cables give you the construction, materials, and components that make meaningful improvements to performance.<\/p>\n\n    <ul class=\"tn-quality__grid\">\n      <li class=\"tn-quality__item\">\n        <h3>Application-Specific EMI\/RFI Shielding<\/h3>\n        <p>Carefully selected not only for noise mitigation but for optimal performance based on cable type.<\/p>\n      <\/li>\n      <li class=\"tn-quality__item\">\n        <h3>Premium Jackets and Insulation<\/h3>\n        <p>Protects from damage while enhancing dielectric properties for reduced signal loss, lower noise floor, and accurate transient response.<\/p>\n      <\/li>\n      <li class=\"tn-quality__item\">\n        <h3>High-Strand-Count Construction<\/h3>\n        <p>Improves flexibility for easier coiling and routing around equipment; helps reduce metal fatigue from repeated flexing.<\/p>\n      <\/li>\n      <li class=\"tn-quality__item\">\n        <h3 aria-describedby=\"tn-quality-footnote\">Machine-Terminated Pins *<\/h3>\n        <p>Precise mechanical force creates consistent, uniform, and reliable electrical connections that preserve signal integrity and optimize durability.<\/p>\n      <\/li>\n      <li class=\"tn-quality__item\">\n        <h3 aria-describedby=\"tn-quality-footnote\">TechFlex Fan Ends *<\/h3>\n        <p>Ultra-tough braided sleeves prevent cables from sticking together in hot and humid environments, enhance insulation, and protect fan out channels from damage.<\/p>\n      <\/li>\n      <li class=\"tn-quality__item\">\n        <h3 aria-describedby=\"tn-quality-footnote\">Silver Solder *<\/h3>\n        <p>Reduces resistance at the solder joints for enhanced audio clarity; creates stronger connections to withstand repeated flexing, pulling, and vibration.<\/p>\n      <\/li>\n      <li class=\"tn-quality__item\">\n        <h3>Engineered in the USA Using US-Made Wire<\/h3>\n        <p>Designed and built in-house with only top-quality materials and components.<\/p>\n      <\/li>\n      <li class=\"tn-quality__item\">\n        <h3>Eco-Friendly Packaging<\/h3>\n        <p>Zero packaging when possible and minimalist, frustration-free, 99% curb recyclable materials when packaging is needed.<\/p>\n      <\/li>\n      <li class=\"tn-quality__item\">\n        <h3>Lifetime Warranty<\/h3>\n        <p>Peace of mind knowing your cables are built to last.<\/p>\n      <\/li>\n    <\/ul>\n\n    <p class=\"tn-quality__footnote\" id=\"tn-quality-footnote\">* Available on select cables<\/p>\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* NOTE: All styles are located in the tip top custom HTML block. *\/\n<\/style>\n\n<!-- Features (3 rows) \u2014 .tn-feature (+ --reverse, --first, --last) \u00b7 static alternating image\/text. Styles in the CSS tab. -->\n\n<!-- Section 5 \u2014 Pure Bare Copper Wire (image left \/ text right) -->\n<section class=\"tn-feature tn-feature--first\" id=\"features\">\n  <img decoding=\"async\" class=\"tn-feature__media\" src=\"\/wp-content\/uploads\/2026\/07\/tn-copper-wire-scaled.jpg\" alt=\"Coiled True North cables with XLR and 1\/4-inch instrument connectors on a dark surface\">\n  <div class=\"tn-feature__body\">\n    <h2>Pure Bare Copper Wire (PBC)<\/h2>\n    <p>All True North cables feature pure bare copper wire. Compared to the copper-clad aluminum (CCA) often used in audio cables, PBC offers 40% greater conductivity. This translates to a noticeably stronger, more transparent, and purer-sounding signal.<\/p>\n  <\/div>\n<\/section>\n\n<!-- Section 6 \u2014 Neutrik & G&H Connectors (text left \/ image right) -->\n<section class=\"tn-feature tn-feature--reverse\">\n  <img decoding=\"async\" class=\"tn-feature__media\" src=\"\/wp-content\/uploads\/2026\/07\/tn-neutrik-gh.jpg\" alt=\"A True North cable's connectors \u2014 a straight instrument plug and an XLR connector\">\n  <div class=\"tn-feature__body\">\n    <h2>Neutrik and G&amp;H Connectors<\/h2>\n    <p>To ensure our cables perform in demanding stage and studio environments, we selected the finest connectors the market has to offer.<\/p>\n    <p>Most True North cables come with Neutrik connectors. Widely considered the industry-standard for professional audio applications, they're trusted for robust construction, secure fit, and solid audio connections.<\/p>\n    <p>Select instrument and speaker cables, meanwhile, feature G&amp;H connectors \u2014 renowned among the most discerning players for superior sound. To the uninitiated, they're most easily identified by a distinctive copper tip. That tip isn't just for looks: it helps provide maximum conductivity, preserved frequency response, reduced signal loss, and a lower noise floor. In other words, your meticulously curated tone stays intact.<\/p>\n  <\/div>\n<\/section>\n\n<!-- Section 7 \u2014 Kink- and Tangle-Resistant Construction (image left \/ text right) -->\n<section class=\"tn-feature tn-feature--last\">\n  <img decoding=\"async\" class=\"tn-feature__media\" src=\"\/wp-content\/uploads\/2026\/07\/tn-kink-tangle-scaled.jpg\" alt=\"A True North instrument cable with a right-angle plug in front of a blue electric guitar\">\n  <div class=\"tn-feature__body\">\n    <h2>Kink- and Tangle-Resistant Construction<\/h2>\n    <p>Common complaints among recording and live sound professionals are cables that easily tangle when unwinding or retain \"memory\" of a bent, twisted position.<\/p>\n    <p>To address these concerns, we chose high-strand-count construction and top-shelf PVC-alloy jackets to provide the best-possible tactile qualities.<\/p>\n    <p>When you experience the pleasing, flexible feel of a True North cable in your hand, the way it effortlessly unwinds \u2014 completely free of kinks and knots \u2014 you won't want to use anything else.<\/p>\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* NOTE: All styles are located in the tip top custom HTML block. *\/\n<\/style>\n\n<!-- Mission \u2014 .tn-mission \u00b7 static full-width black band. Styles in the CSS tab. -->\n\n<section class=\"tn-mission\" id=\"mission\">\n  <div class=\"tn-mission__inner\">\n    <h2>Mission-Specific Designs<\/h2>\n    <p>Whether it's an XLR cable, an instrument cable, or a speaker cable, True North designs each product with a unique feature set tailored to its intended use. For example, we spec our pedalboard patch cables with G&amp;H's VLP (very low-profile) right-angle plugs for effortless connection in tight spaces. Microphone cables intended for touring applications are spec'd with ultra-durable nickel pins to withstand thousands of connection and disconnection cycles.<\/p>\n    <p>For customers with highly specific requirements, True North can create custom and bulk orders. The important thing is, whether you order custom or off the shelf \u2014 for live sound, for recording, or for a roadworthy instrument rig \u2014 you get the specs that top touring and recording professionals demand.<\/p>\n    <ul class=\"tn-mission__configs\">\n      <li class=\"tn-mission__config\">\n        <h3>XLR Cable Configurations<\/h3>\n        <p><strong>Lengths:<\/strong> 1.5 feet to 100 feet<\/p>\n        <p><strong>Connectors:<\/strong> Straight and right-angle XLR<\/p>\n        <p><strong>Applications:<\/strong> Microphones, studio recording, live sound, PA systems, cable snakes, and balanced patchbays<\/p>\n      <\/li>\n      <li class=\"tn-mission__config\">\n        <h3>Guitar Cable Configurations<\/h3>\n        <p><strong>Lengths:<\/strong> 1.5 feet to 30 feet<\/p>\n        <p><strong>Connectors:<\/strong> Straight and right-angle 1\/4-inch \u2014 silent-switching options available<\/p>\n        <p><strong>Applications:<\/strong> Electric guitar, bass, acoustic-electric guitars, synthesizers, drum machines, and other hi-Z instruments<\/p>\n      <\/li>\n      <li class=\"tn-mission__config\">\n        <h3>Speaker Cables<\/h3>\n        <p><strong>Lengths:<\/strong> 1.5 feet to 100 feet<\/p>\n        <p><strong>Connectors:<\/strong> 1\/4-inch locking, speakON, and binding post \u2014 12-, 14-, and 16-gauge<\/p>\n        <p><strong>Applications:<\/strong> PA speakers, stage monitors, guitar and bass cabinets, power amplifiers, A\/V receivers, and passive speaker systems<\/p>\n      <\/li>\n      <li class=\"tn-mission__config\">\n        <h3>Guitar Patch Cables<\/h3>\n        <p><strong>Lengths:<\/strong> 4 inches to 2 feet<\/p>\n        <p><strong>Connectors:<\/strong> Straight and right-angle 1\/4-inch \u2014 straight\/straight, straight\/angle, and angle\/angle<\/p>\n        <p><strong>Applications:<\/strong> Pedalboards, effects chains, guitar rigs, rack gear, modular synthesizers, and unbalanced patchbays<\/p>\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* NOTE: All styles are located in the tip top custom HTML block. *\/\n<\/style>\n\n<!-- CTA \u2014 .tn-cta \u00b7 static. Full-bleed image + pill button. Styles in the CSS tab. -->\n\n<section class=\"tn-cta\" id=\"purchase\">\n  <img decoding=\"async\" class=\"tn-cta__media\" src=\"\/wp-content\/uploads\/2026\/07\/tn-sold-at-sw__opt-scaled.jpg\" alt=\"True North cables available at Sweetwater\">\n  <div class=\"tn-cta__body\">\n    <h2 class=\"tn-cta__heading\">\n      <span>Sold Exclusively At<\/span>\n      <img decoding=\"async\" class=\"tn-cta__logo\" src=\"\/wp-content\/uploads\/2026\/07\/sweetwater_logo.svg\" alt=\"Sweetwater\">\n    <\/h2>\n    <p>As the trusted source of quality gear, Sweetwater understands that well-made cables are critical to performance. That is why we collaborated with them through every step, from concept to development to manufacturing. It's also why they are the exclusive retailer of True North cables.<\/p>\n    <!-- Shop button hidden until the product is available for purchase.\n         RESTORE AT LAUNCH: uncomment the <a> below. -->\n    <!--\n    <a class=\"tn-cta__button\" href=\"https:\/\/www.sweetwater.com\/store\/manufacturer\/true_north\" target=\"_blank\" rel=\"noopener noreferrer\">\n      Shop True North Cables\n      <svg class=\"tn-cta__button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"><\/path><polyline points=\"15 3 21 3 21 9\"><\/polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"><\/line><\/svg>\n      <span class=\"sr-only\">(opens in a new tab)<\/span>\n    <\/a>\n    -->\n\n  <\/div>\n<\/section>\n\n\n\n<!-- Footer \u2014 .tn-footer \u00b7 logo, tagline, contact. Styles in the CSS tab. -->\n\n<footer class=\"tn-footer\">\n  <img decoding=\"async\" class=\"tn-footer__logo\" src=\"\/wp-content\/uploads\/2026\/07\/TrueNorthCableCompany-reverse-full_tm.png\" alt=\"True North Cable Company\">\n  <p class=\"tn-footer__tagline\">Engineered for ultimate performance and reliability<\/p>\n  <p class=\"tn-footer__contact\">Looking for more information? Reach out to us at <a href=\"mailto:info@truenorthcables.com\">info@truenorthcables.com<\/a><\/p>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>Skip to content Intro Quality Features Mission Purchase Engineered for ultimate performance and reliability True North&trade; makes professional-grade, thoughtfully designed audio cables built to perform in real-world, high-stakes applications. Before the first True North cable saw the light of day, we assembled a team of product designers and industry experts with hundreds of years of &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/full-width.php","meta":{"_genesis_block_theme_hide_title":true,"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry","post","without-featured-image"],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/truenorthcables.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truenorthcables.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/truenorthcables.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/truenorthcables.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/truenorthcables.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":191,"href":"https:\/\/truenorthcables.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":308,"href":"https:\/\/truenorthcables.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/308"}],"wp:attachment":[{"href":"https:\/\/truenorthcables.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}