/** * ════════════════════════════════════════════════════════════════════════ * tr-cta-system.css — CANONICAL button & control system (single source) * testroute-core · Clear Drive * ════════════════════════════════════════════════════════════════════════ * * ⚠ READ THIS BEFORE BUILDING ANY NEW PAGE OR ANY NEW BUTTON. * * Every clickable control on the site uses ONE of the classes below. * Do NOT invent a new button style. Do NOT copy a per-module `.xxx-btn` * class onto a new page. New pages MUST reuse these classes so the whole * site keeps the same shape, size and hover behaviour. * * Full guide + copy-paste examples: CTA-SYSTEM.md (plugin root). * Loaded globally by the header module → present on every front-end page. * * ── 1 · PRIMARY ACTION (solid green — only ONE per view) ────────────── * Watch routes {arrow} hero * Find routes {arrow} default 44px * View route {arrow} compact 36px * Icon = a RIGHT-POINTING ARROW, never a play icon. * (The play icon only ever lives on .tr-ib--play, see §6.) * * ── 2 · SECONDARY (ghost — lower priority next to a primary) ────────── * green outline * white outline * Never put two solid-green buttons side by side. * * ── 3 · TEXT LINK (lowest priority: Log in, breadcrumb, FAQ) ────────── * Log in * Back to all centres * * ── 4 · CHIP / PILL (jump-nav + filters) ───────────────────────────── * add is-active when selected * * ── 5 · SEGMENTED CONTROL (one choice from a small set) ────────────── *
* * … *
* * ── 6 · ICON BUTTON (play / nav / close / locked) ──────────────────── * * * * sizes: default 48 · tr-ib--40 · tr-ib--32 * * Tokens: green #03c988 · green-hover #02a873 · ink #0c1927 · radius 8px * Hover, everywhere & nothing heavier: darken + arrow slides 3px + lift 1px. * No green glow, no backdrop-blur, no big jumps. Keep it calm. * ════════════════════════════════════════════════════════════════════════ */ /* ── 1 · PRIMARY ─────────────────────────────────────────────────────── */ .tr-cta{box-sizing:border-box !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;height:44px !important;padding:0 22px !important;font-family:inherit !important;font-size:14.5px !important;font-weight:700 !important;line-height:1 !important;color:#0c1927 !important;background:#03c988 !important;border:none !important;border-radius:8px !important;cursor:pointer !important;text-decoration:none !important;white-space:nowrap !important;transition:background .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1) !important} .tr-cta:hover{background:#02a873 !important;transform:translateY(-1px) !important} .tr-cta:active{transform:translateY(0) !important} .tr-cta:focus-visible{outline:2px solid #03c988 !important;outline-offset:2px !important} .tr-cta svg{flex:none !important;width:1em !important;height:1em !important;transition:transform .18s cubic-bezier(.22,1,.36,1) !important} .tr-cta:hover svg{transform:translateX(3px) !important} /* hardening: a solid primary must keep its ink colour even when a page has a broad ancestor reset like `.scope a{color:inherit !important}` (road-signs had one). Specificity 0,3,0 beats those; excludes the ghost/neutral variants (own colours). */ .tr-cta:not(.tr-cta--ghost):not(.tr-cta--neutral){color:#0c1927 !important} .tr-cta--lg{height:48px !important;padding:0 26px !important;font-size:15px !important} .tr-cta--sm{height:36px !important;padding:0 16px !important;font-size:13.5px !important;gap:7px !important} .tr-cta--block{display:flex !important;width:100% !important} /* ── 2 · SECONDARY (ghost / neutral) ─────────────────────────────────── */ .tr-cta--ghost{background:rgba(3,201,136,.08) !important;border:1.5px solid rgba(3,201,136,.45) !important;color:#03c988 !important} .tr-cta--ghost:hover{background:rgba(3,201,136,.14) !important;border-color:rgba(3,201,136,.7) !important;transform:translateY(-1px) !important} .tr-cta--neutral{background:rgba(255,255,255,.05) !important;border:1.5px solid rgba(255,255,255,.16) !important;color:#f8f9fa !important} .tr-cta--neutral:hover{background:rgba(255,255,255,.09) !important;border-color:rgba(255,255,255,.28) !important;transform:translateY(-1px) !important} /* disabled (any primary) */ .tr-cta:disabled,.tr-cta[aria-disabled="true"],.tr-cta.is-disabled{opacity:.4 !important;cursor:not-allowed !important;transform:none !important} .tr-cta.is-disabled:hover,.tr-cta:disabled:hover{background:#03c988 !important;transform:none !important} /* ── 3 · TEXT LINK ───────────────────────────────────────────────────── */ .tr-link{display:inline-flex !important;align-items:center !important;gap:6px !important;font-family:inherit !important;font-weight:600 !important;font-size:14px !important;color:#fff !important;background:none !important;border:none !important;border-bottom:1px solid rgba(255,255,255,.28) !important;padding:0 0 2px !important;cursor:pointer !important;text-decoration:none !important;transition:color .15s,border-color .15s !important} .tr-link:hover{color:#03c988 !important;border-bottom-color:#03c988 !important} .tr-link--quiet{color:rgba(255,255,255,.62) !important;border-bottom-color:rgba(255,255,255,.16) !important;font-weight:500 !important} .tr-link--quiet:hover{color:#fff !important;border-bottom-color:rgba(255,255,255,.4) !important} /* ═══════════════════════════════════════ * HARDENING, PART TWO — the chip and the text link * * The same problem as the button above, from a different direction. Every * page in this plugin carries a root reset: * * .trh-root *{margin:0 !important;padding:0 !important} * * That computes at 0,1,0 and so does .tr-chip. Equal specificity, so source * order decides, and a module stylesheet is enqueued by its shortcode and * therefore lands AFTER this file. The reset wins and the chip loses its * padding: 34px tall, text against both edges, no pill. * * It has already happened once and it was fixed the wrong way, by copying * the whole .tr-chip rule into a module stylesheet. That is what the first * line of CTA-SYSTEM.md tells you not to do, and it means the next page to * use a chip breaks again. * * :not(#_trcta) lifts these to 1,1,0 for the same reason it does for the * button: it matches everything, because nothing carries that id, but it * computes with an id. Only the properties a reset actually takes are * repeated, not the whole rule. * ═══════════════════════════════════════ */ .tr-chip:not(#_trcta){padding:0 15px !important;height:34px !important; display:inline-flex !important;align-items:center !important;gap:6px !important; border-radius:999px !important;line-height:1 !important} .tr-chip:not(#_trcta) svg{flex:none !important} .tr-link:not(#_trcta){padding:0 0 2px !important;line-height:1.3 !important; display:inline-flex !important;align-items:center !important;gap:6px !important} .tr-link:not(#_trcta) svg{flex:none !important} /* ── 4 · CHIP / PILL ─────────────────────────────────────────────────── */ .tr-chip{display:inline-flex !important;align-items:center !important;gap:6px !important;height:34px !important;padding:0 15px !important;border-radius:999px !important;font-family:inherit !important;font-size:13px !important;font-weight:600 !important;cursor:pointer !important;color:rgba(255,255,255,.8) !important;background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.1) !important;text-decoration:none !important;transition:background .15s,border-color .15s,color .15s !important} .tr-chip:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important} .tr-chip.is-active{background:rgba(3,201,136,.14) !important;border-color:rgba(3,201,136,.5) !important;color:#03c988 !important} /* ── 5 · SEGMENTED CONTROL ───────────────────────────────────────────── */ .tr-seg{display:inline-flex !important;gap:4px !important;background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:10px !important;padding:5px !important} .tr-seg__btn{height:34px !important;padding:0 16px !important;border:none !important;border-radius:7px !important;background:transparent !important;color:rgba(255,255,255,.6) !important;font-family:inherit !important;font-weight:600 !important;font-size:13.5px !important;cursor:pointer !important;transition:background .15s,color .15s !important} .tr-seg__btn:hover{color:#fff !important} .tr-seg__btn.is-active{background:rgba(255,255,255,.1) !important;color:#fff !important} /* ── 6 · ICON BUTTON ─────────────────────────────────────────────────── */ .tr-ib{display:grid !important;place-items:center !important;width:48px !important;height:48px !important;border-radius:50% !important;cursor:pointer !important;color:rgba(255,255,255,.72) !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.12) !important;transition:background .15s,border-color .15s,color .15s !important} .tr-ib:hover{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.22) !important;color:#fff !important} .tr-ib--40{width:40px !important;height:40px !important} .tr-ib--32{width:32px !important;height:32px !important} .tr-ib--play{background:#03c988 !important;border-color:transparent !important;color:#0c1927 !important} .tr-ib--play:hover{background:#02a873 !important} .tr-ib--lock{background:rgba(12,25,39,.55) !important;border-color:rgba(255,255,255,.14) !important;color:rgba(255,255,255,.62) !important} /* shared focus ring */ .tr-ib:focus-visible,.tr-seg__btn:focus-visible,.tr-chip:focus-visible,.tr-link:focus-visible{outline:2px solid #03c988 !important;outline-offset:2px !important} /* ════════════════════════════════════════════════════════════════════════ * HARDENING — wins over the page theme (Cornerstone/X) * ──────────────────────────────────────────────────────────────────────── * The theme ships its own link/content typography. A single-class rule * (.tr-cta) can be outranked by a theme rule like `.x-content a{…}`, which * is why a button can render with the wrong size/line-height on a live page * even though it looks correct in isolation. The `:not(#_trcta)` below adds * ID-level specificity (it matches everything — nothing has that id), so the * button keeps its OWN box on every page, whatever the theme declares. * Reset typography that themes commonly inject (line-height, letter-spacing, * text-transform) so the label can never grow past its button. * ════════════════════════════════════════════════════════════════════════ */ .tr-cta:not(#_trcta){box-sizing:border-box !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;height:44px !important;min-height:0 !important;max-height:none !important;padding:0 22px !important;font-family:inherit !important;font-size:14.5px !important;font-weight:700 !important;line-height:1 !important;letter-spacing:normal !important;text-transform:none !important;white-space:nowrap !important;width:auto !important;vertical-align:middle !important} .tr-cta--lg:not(#_trcta){height:48px !important;padding:0 26px !important;font-size:15px !important} .tr-cta--sm:not(#_trcta){height:36px !important;padding:0 16px !important;font-size:13.5px !important} .tr-cta:not(#_trcta) svg{width:1em !important;height:1em !important;flex:none !important} /* --block was declared at 0,1,0 among the modifiers above and lost to the hardened base rule at 1,1,0, which carries width:auto. So the documented full-width modifier did nothing, anywhere, and every page that wanted one wrote its own width:100% that lost for the same reason. --lg and --sm were hardened; this one was missed. */ .tr-cta--block:not(#_trcta){display:flex !important;width:100% !important}