`.
* On a glass page `.card` is a PANEL, with its own padding, fill and the
* 14/14/14/3 signature corner, and the block already sits inside a panel. So
* an empty list rendered a panel inside a panel and read as two stacked
* buttons rather than as a sentence.
*
* The markup no longer claims to be a card or a list item. It is a message,
* and it now says what to do next rather than dead-ending on a bare "yet",
* which is the house rule for empty states. The add field is already on the
* page directly above, so it points there rather than repeating a button. */
.blocked-list-empty {
margin: 0;
padding: 4px 0 8px;
color: var(--paragraph, #6b6880);
font-size: 15px;
}
.bef-datepicker.form-control {
background-repeat: no-repeat;
background-position: center right 15px;
}
.desc-action-button-wrapper {
position: absolute;
background: #fff;
cursor: pointer;
border: 1px solid #ddd;
display: inline-block;
border-radius: 5px;
padding: 9px 21px;
margin-bottom: 15px;
top: 25px;
}
.card.card-social-bio .desc-action-button-wrapper .form-actions.js-form-wrapper.form-wrapper {
position: absolute;
flex-direction: column;
background: #fff;
padding: 10px;
min-width: 182px;
border: 0;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
margin-top: 11px !important;
z-index: 1;
gap: 8px;
left: 0;
opacity: 0;
pointer-events: none;
}
.card.card-social-bio .desc-action-button-wrapper:hover .form-actions.js-form-wrapper.form-wrapper { opacity: 1; pointer-events: auto; }
.view-smart-description.view-id-smart_description header {
padding-left: 100px;
margin-bottom: 10px;
}
.node-descriptions-edit-form .image-widget.js-form-managed-file.form-managed-file .btn {
margin: 0;
margin-top: 5px;
}
.checkout-pane.checkout-pane-payment-information.card fieldset.fieldgroup.form-composite .fieldset-wrapper>div {
display: flex;
gap: 10px;
}
.checkout-pane.checkout-pane-payment-information.card fieldset.fieldgroup.form-composite .js-form-item {
position: relative;
border-radius: 10px;
padding: 15px;
padding-left: 49px;
background-color: var(--primary-light);
flex: 1;
width: 50%;
}
.checkout-pane.checkout-pane-payment-information.card fieldset.fieldgroup.form-composite .js-form-item .form-control.form-radio {
top: 14px;
left: 10px;
}
.checkout-pane.checkout-pane-payment-information.card .address {border: 1px solid #ddd;padding: 10px;border-radius: 10px;}
.ui-dialog .ui-dialog-content .form-create-audience-avatar .js-form-item.form-item {
margin-bottom: 0;
}
.node-descriptions-form .form-checkboxes,
.node-descriptions-edit-form .form-checkboxes {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 20px;
}
.sec-my-recent-project .col-auto.recent-imgbox {
margin-bottom: 0;
}
.node-descriptions-form .form-checkboxes .js-form-item img,
.node-descriptions-edit-form .form-checkboxes .js-form-item img {width: 30px;margin-right: 10px;}
.node-descriptions-form .form-checkboxes .js-form-item,
.node-descriptions-edit-form .form-checkboxes .js-form-item {
align-items: center;
border: 1px solid #ddd;
padding: 5px;
border-radius: 4px;
}
.node-descriptions-form .form-checkboxes .js-form-item label,
.node-descriptions-edit-form .form-checkboxes .js-form-item label {display: flex;align-items: center;}
.card-title-filters .description {font-style: italic; margin-bottom: 10px;margin-top: 5px;}
.card-title-filters .js-form-item.form-item.js-form-type-checkbox {align-items: center;}
.card-title-filters .js-form-item.form-item.js-form-type-checkbox input {margin-top: 0px;}
.card-title-filters .control-field .form-control, .card-title-filters .control-field .form-select {
font-size: 12px;
font-weight: 500;
color: #313234;
height: 32px;
border-radius: 6px;
box-shadow: none;
/* Was #F2EEF8, the same value as the fill below it, so this override
re-created the invisible border that the shared .control-field rule
had just been fixed for. Same house quiet-control value, 3.04:1. */
border-color: var(--ts-border-control, #6f6786);
background-color: #F2EEF8;
}
.card-title-filters .control-field .form-control::placeholder {color:#B1B7C5;opacity: 1;}
.card-title-filters .control-field .form-control::-ms-input-placeholder {color:#B1B7C5;}
.card-title-filters div.data-list-input .form-control,
.card-title-filters div.data-list-input .control-field .form-select {
margin-top: -4px !important;
}
.path-contact-pages .text-box, .contact-pages-my-contact-pages .text-box{
padding-bottom: 0;
}
@media screen and (max-width: 1199px) {
div#add-descriptions .project-custom-tag.containerOuter.xyz .select-box, .node-descriptions-edit-form.node-form.form-custom-token-enabled.form_group_tokens .project-custom-tag.containerOuter.xyz .select-box {
flex: 1 1 auto;
margin-top: 5px;
width: auto;
}
}
@media screen and (max-width: 991px) {
.view-id-notes.contextual-region.view-notes {display: block !important;}
.path-notes .column-col-3 {margin-bottom: 14px;}
.view-id-notes.view-notes.d-flex { display: block !important;}
.card-shuffle-results .form-actions.js-form-wrapper.form-wrapper {margin-top: 0px !important;}
.subscribe-img {margin-bottom: 10px;}
.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary{ margin-top: 10px;}
.path-scheduled-posts .social-post-form .form-actions.js-form-wrapper.form-wrapper .btn.btn-primary {
padding-left: 32px;
font-size: 0;
}
.path-scheduled-posts .block-header .btn.btn-primary span.ms-2 {
font-size: 0;
}
.path-scheduled-posts .block-header .btn.btn-primary.toggle-btn {
font-size: 14px !important;
}
.path-scheduled-posts .block-header .btn.btn-primary .ms-2 {
margin-left: 0 !important;
}
.path-scheduled-posts .social-post-form .form-actions.js-form-wrapper.form-wrapper {
top: -43px;
right: 140px;
}
}
@media screen and (max-width: 767px) {
.path-scheduled-posts .social-post-form .form-actions.js-form-wrapper.form-wrapper {
top: -51px;
right: 137px;
}
.block-header .title {
width: 63%;
}
.path-video-planner .fc-toolbar.fc-header-toolbar { flex-direction: column-reverse; gap: 15px;}
.path-video-planner .whitebox_outerwrapper.card {padding: 12px;}
.path-video-planner .fc-view>table .fc-head tr th{ font-size: 12px;}
.path-video-planner .fc-view>table .fc-body tr td {font-size: 12px;}
.path-video-planner .block-header .flex-grow-1.d-flex.align-items-center.justify-content-between {
flex-direction: column;
}
.path-video-planner .block-header .d-flex.flex-wrap.gap-3 {flex-direction: column;}
.path-video-planner .block-header .flex-grow-1.d-flex.align-items-center.justify-content-between .title {
margin-bottom: 10px;
}
.auth-button.sign-up-btn .btn,
.auth-button.log-in-btn .btn,
.auth-button.sign-in-btn .btn {padding: 5px 10px;}
#add-event .field--type-datetime fieldset .fieldset-wrapper>div:not(.description){ display: block;}
#add-event .field--type-datetime fieldset .fieldset-wrapper>div:not(.description) .js-form-item:not(:last-child) { margin-bottom: 15px;
}
#add-event .field--type-link .fieldset-wrapper {display: block;}
#add-event .field--type-link .fieldset-wrapper .js-form-item:not(:last-child) {
margin-bottom: 15px;
}
.page-node-type-notes .dashaboard-inner h2.notes-title {line-height: normal;font-size: 20px;}
.thumbnails-btn-group {text-align: center;}
.thumbnails-btn-group .btn{ margin-top: 5px;}
.views-infinite-scroll-content-wrapper [class*=col-] {
flex: 0 0 auto;
width: 100%;
}
.creator-wrapper {display: block;}
.creator-wrapper .creator-img {flex: 0 0 100%;max-width: 100%;margin-bottom: 20px;}
.creator-wrapper .creator-blog-content {padding-left: 0;font-size: 14px;}
.view-creator-quotes .custom-table td:first-child {width: 170px;max-width: 170px;min-width: 170px; padding-right: 10px;}
.path-scheduled-posts .block-header {padding-right: 0; margin-bottom: 10px;}
.path-scheduled-posts .form-actions.js-form-wrapper.form-wrapper {top: 0; margin-bottom: 20px !important;}
.path-scheduled-posts .js-form-wrapper.form-wrapper {margin-bottom: 0px !important;}
.path-scheduled-posts form .form-actions.js-form-wrapper.form-wrapper {top: 0;}
.page-forbidden{ padding: 20px 0px;}
.dashboard-video-suggestions .column-col-9 {padding-left: 10px;}
.text-notes-list p {margin-bottom: 10px;}
body .custom-cnt-layout-6 .group-right.newlayout-group-right {padding-top: 20px;}
.custom-cnt-layout-3.custom-cnt-layout .user-contact-form-wrapper{ padding: 0px;}
.breakoutalertform.card .js-form-item.form-item.js-form-type-checkbox {padding-top: 0;}
.ui-dialog.smart-token-modal .sub-cate-wrapper.accordion-item .ac-save-button img {width: 13px;}
.ui-dialog.smart-token-modal .sub-cate-wrapper.accordion-item .ac-save-button {padding: 4px 5px;font-size: 12px;}
.ac-btn-title {max-width: 150px;}
div#add-descriptions .project-custom-tag.containerOuter.xyz .select-box, .node-descriptions-edit-form.node-form.form-custom-token-enabled.form_group_tokens .project-custom-tag.containerOuter.xyz .select-box {
flex: 0 0 100%;
width: 100%;
}
.page-node-type-video-script-template .ai-speech-modal-image{ max-width: 100% !important;}
form.text-to-speech-form .ts-middle-section, form.text-to-speech-form .ts-top-section {
display: block;
}
form.text-to-speech-form .ts-middle-section .form-item, form.text-to-speech-form .ts-top-section .form-item {
width: 100%;
}
.ai-speech-modal-image .manage-profile-sec { display: block;}
.path-scheduled-posts .block-header { margin-bottom: 10px;}
.desc-action-button-wrapper{ top: 10px;}
.checkout-pane.checkout-pane-payment-information.card fieldset.fieldgroup.form-composite .fieldset-wrapper>div {
flex-direction: column;
}
.checkout-pane.checkout-pane-payment-information.card fieldset.fieldgroup.form-composite .js-form-item{ width: 100%;}
}
@media screen and (max-width: 1366px) {
.path-video-planner .views-exposed-form.bef-exposed-form .form--inline{ position: static; padding-right: 0px;}
h2#fc-dom-1 {
font-size: 14px;
text-align: center;
}
}
@media screen and (min-width: 1199px) {
.checkout-pane [data-drupal-selector="edit-payment-information-billing-information-address-0-address"] {
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
display: grid;
gap: 10px;
align-items: end;
}
.checkout-pane [data-drupal-selector="edit-payment-information-billing-information-address-0-address-country-code"]{
grid-column: span 4;
}
.checkout-pane [data-drupal-selector="edit-payment-information-billing-information-address-0-address-container0"]{
grid-column: span 3;
}
.checkout-pane .form-item-payment-information-billing-information-address-0-address-address-line1 {
grid-column: span 2;
}
.checkout-pane .js-form-item.form-item.js-form-type-select.form-item-payment-information-billing-information-address-0-address-administrative-area.js-form-item-payment-information-billing-information-address-0-address-administrative-area.form-group.control-field {
grid-column: span 3;
}
}
@media screen and (max-width: 767px) {
.path-video-planner .views-exposed-form.bef-exposed-form .form--inline{ display: flex; align-items: center; justify-content: center;}
}
#block-tubespanner-purple-subscriptionblocks2 > div {
display: flex;
}
.card.pd-16.card-generate-ai-script {margin-bottom: 15px;}
/* Modal animation css start*/
.ui-widget-overlay { background: #000; opacity: .5;}
div.ui-widget.ui-widget-content { margin: 0 auto;}
div.ui-widget.ui-widget-content.ui-autocomplete{ width: max-content !important;}*/
div.ui-widget.ui-widget-content, .modal .modal-dialog{animation: gb-popup-bounce-to-left 0.3s both;}
@keyframes gb-popup-bounce-to-left {
0% {transform: translateX(600px);animation-timing-function: ease-in;opacity: 0;}
30% {transform: translateX(600px);animation-timing-function: ease-out;opacity: 1;}
}
/* Modal animation css end*/
.dashboard-add-fb-stream .strem-wrapper card {
display: block;
position: unset;
}
.dashboard-add-fb-stream table#stream-table {
margin: 20px auto;
}
.dashboard-add-fb-stream .add-facebook-stream #stream-table_wrapper {
margin-bottom: 80px;
}
.dashboard-add-fb-stream .strem-wrapper .dataTables_length {
position: unset;
}
.dashboard-add-fb-stream .strem-wrapper .dataTables_filter {
top: 12px;
}
@media screen and (max-width: 767px) {
.dashboard-add-fb-stream .strem-wrapper .dataTables_length {
text-align: unset;
}
.dashboard-add-fb-stream .strem-wrapper .dataTables_filter {
text-align: unset;
}
}
@media screen and (max-width: 500px){
.flex-grow-1.d-flex.align-items-center.justify-content-between.scheduled-posts-button-wrapper {
flex-direction: column;
}
.block-header .title {
width: 100%;
}
.scheduled-posts-link-sections {
width: 100%;
justify-content: flex-end;
}
}
.placeholder-blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
width: 100%;
height: 100%;
background-color: #ccc;
}
.dashboard-seo-tool-title-workshop .progress {
background: #f0e7e7;
}
.pl-5 {
padding-left: 5px;
}
.progressiconic-wrapper svg {
// width: 14%;
}
.text-black-100 {
color: black;
}
.progressiconic-wrapper .marker-wrapper {
top: 0px;
width: calc(100% - 5px);
left: 10px;
}
.grammer-words button {
width: 100%;
}
.marker-wrapper svg {
position: absolute;
}
.grammer-words p {
margin-bottom: 0rem;
}
.col-12.lextronics-item {
width: 100%;
}
.page-node-type-video-script-template .field--item .script-wrapper {
display: flex;
flex-direction: row-reverse
}
.script-top-right-wrapper a, .script-top-right-wrapper .clock-icons.global-ai-btn-box.ai-speech-btn-box.show-speech-btn-box a.brain-btn-icon, .script-top-right-wrapper .script-timeline-save-wrapper .btn.btn-primary {
font-weight: 500;
}
.audience-avatar-wrapper .field--name-field-saved-audience {
position: absolute;
right: 0;
}
.page-node-type-video-script-template .script-modal .control-field .form-label {
font-weight: normal;
}
.script-modal .control-field .form-control::placeholder {
color: #B1B7C5;
}
p.script-form-help-text {
font-size: 12px;
}
.page-node-type-video-script-template .script-modal .ui-widget-header span.ui-dialog-title {
text-align: center;
}
@media screen and (max-width: 768px){
.page-node-type-video-script-template.page-node-type-video-script-template div.ai-btn-box button {
padding-left: 15px !important;
}
}
/**
* Kim panel, compact Do Next list and channel audit preview (dashboard).
*
* Colours come from the theme tokens, never from literals. The first pass of
* this file used an indigo (#6c5ce7) that was not the brand purple at all, and
* green for Send, which the house palette reserves for the Go / full-auto
* action rather than for any primary button.
*
* Two contrast thresholds are checked, not one: a label against its fill (>=
* 4.5:1) and the fill against the page (>= 3:1). Checking only the first is how
* a control ends up readable but edgeless. Brand orange #F26419 is 3.0:1 on
* white, so it is used for graphics such as the score bars but never for text;
* score numbers use the deeper #C2410C instead.
*/
/* Match the house card exactly, which is `.card` in style.css: 12px radius,
12px padding, and no border. These three panels had a 1px border and 20px
padding, so they sat on the same page as My Recent Projects looking like a
different family of card. The theme's card carries its own separation
through the page background rather than through an outline. */
.ts-kim-panel,
.ts-donext-compact,
.ts-audit-preview {
background: var(--bs-white, #fff);
border: 0;
border-radius: 12px;
height: 100%;
display: flex;
flex-direction: column;
}
/* Tall enough to look like a conversation, short enough not to look empty.
At 420px an unstarted chat left a large void between the openers and the
input, and an empty box is exactly what a first-time creator sees. The panel
still grows with the row, so a real conversation is unaffected. */
.ts-kim-panel { min-height: 340px; }
/* Kim and the next-steps list sit in one row and both stretch to whichever is
taller, so the row height was whatever the checklist happened to be that
day, and a long conversation could push the whole row down the page.
Kim's log already had overflow-y: auto; it never engaged, because a panel
with no definite height simply grew to fit the log instead of scrolling it.
A fixed height is what makes the scrollbar real.
530px is the old content height plus about a third: enough that a
conversation reads as a conversation rather than a slot, without the pair
pushing Channel health below the fold. Desktop only, since on a narrow
screen the two stack and there is nothing to keep level. */
@media (min-width: 992px) {
.ts-kim-panel,
.ts-donext-compact {
height: 530px;
}
}
.ts-kim-panel__head {
display: flex;
align-items: center;
gap: .75rem;
padding: 12px;
border-bottom: 1px solid rgba(62, 33, 85, .1);
}
/* The avatar is an SVG that reacts to what Kim is doing, so it carries no
colour of its own here; it reads the same tokens internally. */
.ts-kim-panel__head .ts-kim-face { flex: 0 0 auto; border-radius: 50%; }
.ts-kim-panel__title { margin: 0; font-size: 14px; font-weight: bold; line-height: 1.2; color: var(--title); }
.ts-kim-panel__sub { margin: 0; font-size: .8rem; color: var(--paragraph); }
.ts-kim-panel__log {
flex: 1;
/* Without this the log's automatic minimum is its content height, so a long
conversation wins against the panel and the scrollbar never appears. */
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(62, 33, 85, .25) transparent;
padding: 12px;
display: flex;
flex-direction: column;
gap: .6rem;
}
.ts-kim-panel__msg {
max-width: 82%;
padding: .6rem .85rem;
border-radius: 12px;
line-height: 1.45;
white-space: pre-wrap;
word-wrap: break-word;
}
/* The creator's own words in brand purple, Kim's on the pale tint. Purple
carries white at 8.7:1 on this page, so the label ships with the fill. */
.ts-kim-panel__msg--you {
align-self: flex-end;
background: var(--primary-color);
color: var(--bs-white, #fff);
border-bottom-right-radius: 4px;
}
.ts-kim-panel__msg--kim {
align-self: flex-start;
background: var(--primary-light);
color: var(--title);
border-bottom-left-radius: 4px;
}
.ts-kim-panel__msg.is-pending { color: var(--paragraph); font-style: italic; }
.ts-kim-panel__starters {
display: flex;
flex-wrap: wrap;
gap: .4rem;
/* Even 12px all round: the chips now have the divider beneath them, so they
need clearance from it rather than sitting flush. */
padding: 12px;
}
.ts-kim-panel__starter {
border: 1px solid rgba(103, 44, 114, .35);
background: var(--bs-white, #fff);
color: var(--primary-color);
border-radius: 8px;
padding: .4rem .8rem;
font: inherit;
font-size: .85rem;
cursor: pointer;
}
.ts-kim-panel__starter:hover,
.ts-kim-panel__starter:focus-visible {
background: var(--primary-light);
border-color: var(--primary-color);
}
/* The divider sits BELOW the starters, not above them.
*
* The chips stay pinned out of the scrolling log, but they belong with the
* conversation rather than with the input: the line separates the footer -
* input and Send - from everything above it. Putting the border on the footer
* wrapper drew it above the chips instead, which grouped them with the input
* and read as one heavy block. */
.ts-kim-panel__form {
display: flex;
gap: .5rem;
padding: 12px;
border-top: 1px solid rgba(62, 33, 85, .1);
}
.ts-kim-panel__input {
flex: 1;
resize: none;
border: 1px solid rgba(62, 33, 85, .2);
border-radius: 10px;
padding: .6rem .75rem;
font: inherit;
max-height: 140px;
color: var(--title);
}
.ts-kim-panel__input:focus {
outline: 2px solid var(--primary-color);
outline-offset: 1px;
}
/* Send is a primary action, not the Go / full-auto action, so it is purple.
Green is reserved for the green-square case and would misread here. */
.ts-kim-panel__send {
align-self: flex-end;
border: 0;
border-radius: 10px;
padding: .6rem 1.1rem;
background: var(--primary-color);
color: var(--bs-white, #fff);
font-weight: 600;
cursor: pointer;
}
.ts-kim-panel__send:disabled { opacity: .6; cursor: default; }
/* Kim's face. The states are drawn in KimAvatar.jsx; only the motion is here,
and all of it is suppressed for anyone who asked for reduced motion. */
.ts-kim-face__halo { transform-origin: 60px 60px; }
.ts-kim-face.is-thinking .ts-kim-face__halo,
.ts-kim-face.is-reading .ts-kim-face__halo {
animation: ts-kim-halo 6s linear infinite;
}
.ts-kim-face.is-thinking .ts-kim-face__dots circle { animation: ts-kim-dots 1.4s infinite; }
.ts-kim-face.is-thinking .ts-kim-face__dots circle:nth-child(2) { animation-delay: .2s; }
.ts-kim-face.is-thinking .ts-kim-face__dots circle:nth-child(3) { animation-delay: .4s; }
.ts-kim-face.is-writing .ts-kim-face__caret { animation: ts-kim-caret 1s steps(1) infinite; }
@keyframes ts-kim-halo { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ts-kim-dots { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
@keyframes ts-kim-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.ts-kim-face__halo,
.ts-kim-face__dots circle,
.ts-kim-face__caret { animation: none !important; }
}
.ts-donext-compact,
.ts-audit-preview { padding: 12px; }
.ts-donext-compact__title,
.ts-audit-preview__title {
font-size: 14px;
font-weight: bold;
margin: 0 0 8px;
color: var(--title);
}
/* Takes the space the fixed panel height leaves, and scrolls rather than
overflowing it, so the "why this first?" note underneath stays reachable
however many steps the engine returns. */
.ts-donext-compact__list {
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(62, 33, 85, .25) transparent;
}
.ts-donext-compact__item {
display: flex;
align-items: center;
gap: .35rem;
padding: .35rem 0;
border-bottom: 1px solid rgba(62, 33, 85, .08);
font-size: .9rem;
line-height: 1.35;
}
.ts-donext-compact__item:last-child { border-bottom: 0; }
/* The label is a button, not text: it opens the same detail modal the large
cards use, which is where the reason for a suggestion lives. Stripped back to
look like the text it replaced, since the row is the click target. */
.ts-donext-compact__open {
display: flex;
align-items: flex-start;
gap: .55rem;
flex: 1 1 auto;
min-width: 0;
background: none;
border: 0;
padding: .2rem 0;
text-align: left;
font: inherit;
color: var(--title);
cursor: pointer;
}
.ts-donext-compact__open:hover .ts-donext-compact__label,
.ts-donext-compact__open:focus-visible .ts-donext-compact__label {
text-decoration: underline;
}
/* Label plus the subject it is about, stacked. min-width: 0 is what lets the
context line ellipsise inside the flex row instead of stretching it. */
.ts-donext-compact__text {
display: flex;
flex-direction: column;
min-width: 0;
}
/* The actual name of the thing a task refers to (a video title). Muted so the
action stays the loudest line; one line with ellipsis because titles run
long and the row must keep its height. */
.ts-donext-compact__context {
color: var(--paragraph);
font-size: .78rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Same subject line on the full audit cards. */
.do-next-context {
color: var(--paragraph);
font-size: .8rem;
margin: 0 0 .35rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Actions stay visible rather than appearing on hover: they must be reachable
by touch and by keyboard, and a hidden control is not an available one. */
.ts-donext-compact__actions {
display: flex;
align-items: center;
gap: .15rem;
flex: 0 0 auto;
}
.ts-donext-compact__go,
.ts-donext-compact__skip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border: 0;
border-radius: 6px;
background: transparent;
cursor: pointer;
line-height: 1;
}
.ts-donext-compact__go { color: var(--primary-color); }
.ts-donext-compact__skip { color: var(--paragraph); }
.ts-donext-compact__go:hover,
.ts-donext-compact__go:focus-visible { background: var(--primary-light); }
.ts-donext-compact__skip:hover,
.ts-donext-compact__skip:focus-visible {
background: rgba(62, 33, 85, .06);
color: var(--title);
}
.ts-donext-compact__icon { color: var(--primary-color); margin-top: .15rem; }
.ts-donext-compact__empty,
.ts-audit-preview__note {
font-size: .9rem;
color: var(--paragraph);
margin: 0 0 .75rem;
}
.ts-audit-preview__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
}
.ts-audit-preview__more { font-size: .8125rem; white-space: nowrap; color: var(--primary-color); }
.ts-audit-preview__list { list-style: none; margin: 0; padding: 0; }
.ts-audit-preview__row {
display: grid;
grid-template-columns: minmax(0, 1fr) 88px 2.25rem;
align-items: center;
gap: .625rem;
padding: .45rem 0;
}
.ts-audit-preview__label {
font-size: .875rem;
color: var(--title);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ts-audit-preview__bar {
background: rgba(62, 33, 85, .08);
border-radius: 999px;
height: 6px;
overflow: hidden;
}
.ts-audit-preview__fill { display: block; height: 100%; border-radius: 999px; }
.ts-audit-preview__score { font-size: .8125rem; font-weight: 600; text-align: right; }
/* Bars are graphics, so brand orange is fine on them. The numbers are text, and
brand orange is only 3.0:1 on white, so they take the deeper orange. */
.ts-audit-preview__fill.is-good { background: #178055; }
.ts-audit-preview__fill.is-fair { background: var(--secondary-color); }
.ts-audit-preview__fill.is-poor { background: #B42318; }
.ts-audit-preview__score.is-good { color: #178055; }
.ts-audit-preview__score.is-fair { color: #C2410C; }
.ts-audit-preview__score.is-poor { color: #B42318; }
.ts-audit-preview__note--quiet { font-size: .8125rem; margin: .75rem 0 0; }
.ts-audit-preview__cta {
/* TS-5237: the card is a flex column (.ts-audit-preview), so align-items
defaults to stretch and every child is stretched across the cross axis -
which in a column is the width. display: inline-block has no say once the
element is a flex item, so this button spanned the whole card and read as a
banner rather than a button.
align-self on the button rather than align-items on the container: the
container's other children - the title row, the note paragraph, the loading
skeleton and the meter rows - are meant to fill the width, and changing the
container would un-stretch all of them. */
align-self: flex-start;
display: inline-block;
background: var(--primary-color);
border-radius: 8px;
color: var(--bs-white, #fff);
font-size: .875rem;
padding: .45rem .875rem;
text-decoration: none;
}
.ts-audit-preview__cta:hover,
.ts-audit-preview__cta:focus-visible {
color: var(--bs-white, #fff);
filter: brightness(1.15);
}
/* Rank badge, overall roundel and the connecting aside.
Added when the panels moved from integers to letter grades, matching the
audit page and the extension: a grade answers "am I doing well", a
percentage mostly reads as a distance from perfect. */
.ts-donext-compact__rank {
flex: 0 0 1.15rem;
height: 1.15rem;
margin-top: .1rem;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary-color);
font-size: .68rem;
font-weight: 700;
display: grid;
place-items: center;
}
.ts-donext-compact__aside {
margin: .9rem 0 0;
padding-top: .75rem;
border-top: 1px solid rgba(62, 33, 85, .08);
font-size: .8125rem;
color: var(--paragraph);
}
.ts-donext-compact__aside strong { color: var(--title); font-weight: 600; }
/* The ring, the headline and the measured note. On a wide monitor the three
sit across the card comfortably; at 1280 they share 467px and the headline
is squeezed to 186px while running 278px tall beside an 84px ring, which is
what made this card read as broken rather than merely tight.
Wrapping is the whole fix. The ring and the headline keep the first line and
the note drops underneath at full width, rather than being a third column
holding one sentence. */
.ts-audit-preview__overall {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
margin-bottom: .9rem;
}
.ts-audit-preview .ts-audit-headline { flex: 1 1 240px; }
.ts-audit-preview__measured { flex: 1 1 100%; }
/* The grade was on screen three times in one line: in the ring, as the
headline's own letter, and as the meter's current band. The ring keeps it,
because the ring is the one that does something - it toggles to the
percentage - and the headline's letter carried a second, identical flip
control for the same number.
Only the letter goes. Its parent also holds the delta ("+22"), which is the
one thing in that block the ring does NOT say, so hiding the figure would
have taken the movement with it.
Scoped to the dashboard preview: the audit page and the states review page
render this headline with no ring beside it, and there the letter is the
only grade on screen. */
.ts-audit-preview .ts-audit-headline__score {
display: none;
}
.ts-audit-preview__ring {
width: 84px;
height: 84px;
flex: 0 0 auto;
}
.ts-audit-preview__ring[onclick],
.ts-audit-preview__ring:hover { cursor: pointer; }
.ts-audit-preview__ring-track {
fill: none;
stroke: rgba(62, 33, 85, .1);
stroke-width: 8;
}
.ts-audit-preview__ring-arc {
fill: none;
stroke-width: 8;
stroke-linecap: round;
transition: stroke-dasharray .4s ease;
}
.ts-audit-preview__ring-text {
text-anchor: middle;
dominant-baseline: central;
font-size: 24px;
font-weight: 700;
fill: var(--title);
}
/* The ring follows the same bands as the bars below it. The shared roundel
paints one fixed green regardless of score, which is how a C came out
looking like a pass. */
.ts-audit-preview__ring.is-good .ts-audit-preview__ring-arc { stroke: #178055; }
.ts-audit-preview__ring.is-fair .ts-audit-preview__ring-arc { stroke: var(--secondary-color); }
.ts-audit-preview__ring.is-poor .ts-audit-preview__ring-arc { stroke: #B42318; }
.ts-audit-preview__measured {
margin: 0;
font-size: .8125rem;
color: var(--paragraph);
}
/* Letter grades are short, so the column that held a two digit number is
widened slightly and the mark is allowed to carry more weight. */
.ts-audit-preview__score {
font-size: .95rem;
font-weight: 700;
cursor: default;
}
/* Action offered inside a Kim message, currently only the quota gate. Purple
because it is a primary action rather than the Go / full-auto case. */
.ts-kim-panel__action {
display: inline-block;
margin-top: .5rem;
background: var(--primary-color);
color: var(--bs-white, #fff);
border-radius: 8px;
font-size: .8125rem;
font-weight: 600;
padding: .35rem .75rem;
text-decoration: none;
}
.ts-kim-panel__action:hover,
.ts-kim-panel__action:focus-visible { color: var(--bs-white, #fff); filter: brightness(1.15); }
/* Links Kim offers inside a reply. Underlined rather than colour-only, so they
are identifiable without relying on colour perception. */
.ts-kim-panel__link {
color: var(--primary-color);
text-decoration: underline;
font-weight: 600;
}
.ts-kim-panel__link:hover,
.ts-kim-panel__link:focus-visible { color: var(--title); }
/* -------------------------------------------------------------------------
* Dashboard sparkle (TS-5174).
*
* The dashboard read flat because everything on it carried equal weight:
* seven identical tool tiles, monoline icons in a single off-palette
* magenta, and eleven near-identical score rows. None of this is new
* layout, only hierarchy and colour.
* ---------------------------------------------------------------------- */
/* Greeting and account status in the top strip.
*
* The strip is a fixed-height bar, so this is one line and stays one line.
* The three-line eyebrow, headline and sub-line that used to sit above the
* shortcuts are gone: they cost the dashboard its best space to say something
* the page did not need repeating. */
/* The dashboard's first content row sits on the same line as the first menu
* row.
*
* Both columns already start at y=56. What pushed the heading down to 88 was
* .dashaboard-inner's 16px padding plus Bootstrap's g-3 column gutter, so
* "Shortcuts" landed 21px below "Dashboard" and the top of the page read as
* two things that nearly line up, which is worse than an obvious offset.
*
* Cancelling those two puts the block back at 56, and giving its header the
* same 40px row height as a sidebar item means both centre their text at 76.
* They share a centre line rather than merely starting near each other.
*
* Scoped to the width where the sidebar is actually beside the content. Below
* that it is off-canvas and there is nothing to line up with, so the normal
* spacing stands. */
@media (min-width: 992px) {
.sec-toolbar-main {
margin-top: -32px;
}
/* The heading had 9px above it and 19px below, so it read as stuck to the
ceiling of the panel rather than sitting in a band of its own. The 40px
here was chosen to match a sidebar item's height and share its centre
line; that was the thing forcing the asymmetry, because the 10px gap to
the cards is added on top of it. A taller band with no gap underneath
gives equal air on both sides, which is what the eye actually reads. */
.sec-toolbar-main .block-header > .d-flex {
min-height: 48px;
}
.sec-toolbar-main .block-header {
margin-bottom: 0;
}
/* Both sets of controls were positioned against the top of the section
rather than against the heading, so the gear sat 2px ABOVE the panel and
the arrows 22px above the word they belong to. Centre both on the same
48px band as the heading: 12px down for a 24px control. */
.sec-toolbar-main .gear-setting {
top: 12px;
/* The arrows used to be absolutely positioned 10px further right; now
that they flow in their wrapper the gear has to move with them, or it
ends up 2px from the first arrow while they sit 10px apart. */
right: 88px;
}
.sec-toolbar-main > .position-absolute {
top: 12px;
right: 0;
height: 24px;
gap: 10px;
}
/* Swiper positions its own nav buttons absolutely against the slider, which
is why their flex wrapper measured zero high and could not centre
anything. In the header they are a normal pair of buttons. */
.sec-toolbar-main > .position-absolute .swiper-button-prev,
.sec-toolbar-main > .position-absolute .swiper-button-next {
position: static;
margin: 0;
}
}
.ts-header-status {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
/* Sits directly above the page content rather than 2px off it.
.header-logo is flex: 0 0 250px, the sidebar's exact width, so the strip's
menu column belongs to the logo and the greeting cannot line up with the
menu labels. The edge it CAN hold is the content column: the strip's nav
pads 18px against .dashaboard-inner's 16px, so it was landing 2px right of
everything below it. Close enough to look like a mistake rather than a
choice, which is worse than being obviously offset. */
margin-left: -2px;
}
.ts-header-status__greeting {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--ts-color-ink, #3e2155);
white-space: nowrap;
}
.ts-header-status__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
/* A chip beside a pill needs this or the flex row stretches it to the
greeting's height. Same trap the pill rows hit. */
align-self: center;
max-width: 42ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ts-header-status__dot {
width: 7px;
height: 7px;
border-radius: 999px;
flex: 0 0 auto;
background: currentColor;
}
/* Three tones, and none of them rely on colour alone: each carries its own
wording, and the hint is read out for anyone who cannot see the dot. */
.ts-header-status__chip--ok {
color: #1b5e3f;
background: #eef6f1;
border-color: #cfe6da;
}
.ts-header-status__chip--warn {
color: #8a4b06;
background: #fdf3e7;
border-color: #f0dcc2;
}
.ts-header-status__chip--action {
color: #5b2c6f;
background: var(--ts-tint-component, #efedf7);
border-color: #ddd5ec;
}
a.ts-header-status__chip:hover,
a.ts-header-status__chip:focus-visible {
text-decoration: underline;
}
/* Below the strip's breakpoint the bar is crowded and the greeting is the
first thing that can go: the status is the part that is actionable. */
@media (max-width: 767px) {
.ts-header-status__greeting {
display: none;
}
}
/* Tool rows.
*
* Tall centred tiles put three tools on screen and gave a sixth of the page
* to them. The row form fits nine in less height, and the name reads at full
* size on one line instead of wrapping inside a narrow tile.
*
* The stage colour moved from the icon to a rail on the card's leading edge.
* That matters because 14 of the 34 tools have no icon: with the colour in
* the icon, 41% of cards carried no colour at all and the row read grey no
* matter how the tint was tuned. Every card has a leading edge. The rail is
* also the device the next-steps list already uses, so the dashboard repeats
* an idiom rather than inventing one.
*/
.sec-toolbar-main .toolbox-main--row {
flex-direction: row;
text-align: left;
gap: 11px;
padding: 10px 12px;
border-radius: 10px;
/* No left rail. The stage colour is already carried by the icon disc, and by
the solid dot for tools with no icon yet, so an accent edge was a second
copy of one signal. It was also justified in review as repeating the
next-steps idiom, which was simply untrue: those rows separate with a
bottom divider and there is no rail anywhere else in the product. */
min-height: 46px;
}
.sec-toolbar-main .toolbox-main--row p {
margin: 0;
font-size: 13.5px;
line-height: 1.25;
text-align: left;
}
.sec-toolbar-main .icon-size {
position: relative;
display: grid;
place-items: center;
/* Sized to the row rather than the old tile: the icon is a recognition aid
beside the name, not a headline above it. */
width: 26px;
height: 26px;
flex: 0 0 auto;
border-radius: 999px;
/* The disc takes the workflow stage's colour, mixed here rather than stored
as a second value, so recolouring a stage means editing one hex in the
CMS. Falls back to the neutral for stages nobody has coloured. */
background: var(--ts-tint-page, #f2eef8);
background: color-mix(in srgb, var(--tool-hue, #4c4670) 14%, #fff);
}
.sec-toolbar-main .icon-size svg {
width: 14px;
height: 14px;
}
/* override.css sets `.dashboard .view-toolbox-dashboard .swiper svg` to 35px
with a filter chain that repaints every icon a single flat colour. At
(0,3,1) it beat the 14px rule above, so icons rendered at 35px inside a
26px disc and spilled out of it, and the filter flattened the stage colour
back out of the stroke. Both are undone here at (0,4,1), scoped to the tool
icon so the navigation arrows keep their own treatment. */
.dashboard .view-toolbox-dashboard .toolbox-main--row .icon-size svg {
width: 14px;
height: 14px;
filter: none;
}
/* An icon-less tool keeps the 26px slot so its name lines up with every other
row, but drops the tinted disc for a small solid dot in the stage colour.
The empty tinted disc read as a tile still loading; a dot reads as a
deliberate marker, and it is quieter than a real icon rather than louder,
which is the right way round. No invented glyph either way. The 25 terms
with no icon are TS-5178. */
.sec-toolbar-main .toolbox-main--row .toolbar-tool-icon-placeholder {
background: none;
}
.sec-toolbar-main .toolbox-main--row .toolbar-tool-icon-placeholder::before {
content: "";
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--tool-hue, #4c4670);
/* Never the sole carrier of anything: the name says what the tool is, and
the rail already states the stage. */
opacity: 0.55;
}
.sec-toolbar-main .swiper-grid > .swiper-wrapper {
/* Swiper Grid lays slides out in columns; without this the wrapper keeps the
single-row flex direction and the three rows collapse onto one line. */
flex-wrap: wrap;
}
.sec-toolbar-main .icon-size svg [stroke] {
/* Icons are CMS content, all authored in one off-palette magenta, so the
stroke is set here. It follows the stage colour, which is what makes the
row scannable by where you are in the workflow. */
stroke: var(--tool-hue, #4c4670);
}
/* The same retint for the fill-based icons, which the stroke rule could not
reach. The set is mixed: some are outline SVGs with stroked paths, and some
(the Font Awesome and Bootstrap ones) are solid shapes carrying
fill="#E832FF" on the SVG ELEMENT itself rather than on any child. Those
kept their magenta while the stroked ones took the stage colour, so the row
showed two different icon palettes at once.
fill="none" is left alone: outline icons rely on it, and forcing a colour
there would fill shapes that are meant to be hollow. A presentation
attribute loses to any CSS rule, so this reaches the root as well. */
.sec-toolbar-main .icon-size svg:not([fill="none"]) {
fill: var(--tool-hue, #4c4670);
}
.sec-toolbar-main .icon-size svg [fill]:not([fill="none"]) {
fill: var(--tool-hue, #4c4670);
}
/* Entrance: the tiles arrive in sequence rather than appearing at once, which
also covers the moment the row currently pops in empty while the tools load.
Runs once, forwards, so nothing moves again while the page is in use: this
is a dashboard people pass through daily and repeated motion becomes
friction. Six steps only, after which tiles simply appear, because a long
stagger makes the last tile feel broken rather than considered. */
@keyframes ts-tool-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* backwards, not both. A filled animation keeps applying its end value for
good, and animation values outrank normal declarations, so `both` ending on
`transform: none` silently kills any transform later declared on these
cards. That cost an afternoon: a card idiom rendered as a plain rectangle
and looked like the stylesheet had not deployed. backwards still covers the
delay, which is the only reason fill was needed. */
.sec-toolbar-main .swiper-slide > * {
animation: ts-tool-in 320ms ease-out backwards;
}
.sec-toolbar-main .swiper-slide:nth-child(1) > * { animation-delay: 0ms; }
.sec-toolbar-main .swiper-slide:nth-child(2) > * { animation-delay: 30ms; }
.sec-toolbar-main .swiper-slide:nth-child(3) > * { animation-delay: 60ms; }
.sec-toolbar-main .swiper-slide:nth-child(4) > * { animation-delay: 90ms; }
.sec-toolbar-main .swiper-slide:nth-child(5) > * { animation-delay: 120ms; }
.sec-toolbar-main .swiper-slide:nth-child(6) > * { animation-delay: 150ms; }
.sec-toolbar-main .swiper-slide:nth-child(7) > * { animation-delay: 180ms; }
.sec-toolbar-main .swiper-slide:nth-child(8) > * { animation-delay: 210ms; }
/* Nine cards, so the ramp ends at the ninth rather than running on for the
full page of tools behind it. */
.sec-toolbar-main .swiper-slide:nth-child(n+9) > * { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
.sec-toolbar-main .swiper-slide > * { animation: none; }
}
/* An orange dot appearing on hover read as a notification badge arriving
from nowhere, which is worse than the flatness it was meant to fix. The
disc deepening its tint is enough to say the tile is live. */
.sec-toolbar-main .icon-size {
transition: background-color 140ms ease;
}
.sec-toolbar-main .swiper-slide:hover .icon-size,
.sec-toolbar-main a:focus-visible .icon-size {
background: var(--ts-tint-component, #efedf7);
background: color-mix(in srgb, var(--tool-hue, #4c4670) 24%, #fff);
}
/* Hover keeps two signals without the rail: the disc deepens and the card lifts
on its border and shadow, so the affordance still survives greyscale. */
.sec-toolbar-main .toolbox-main--row {
transition: background-color 140ms ease;
}
.sec-toolbar-main .swiper-slide > * {
transition: transform 140ms ease, box-shadow 140ms ease;
}
.sec-toolbar-main .swiper-slide:hover > * {
border-color: rgba(62, 33, 85, 0.22);
box-shadow: 0 2px 8px rgba(62, 33, 85, 0.08);
}
/* Channel health: verdict line, then the six-band meters.
*
* The meter classes are named for what they are rather than for the one card
* that used to own them. They were ts-audit-preview__meter, which read as
* dashboard-only and is part of why the audit page grew its own progress bars
* instead of reusing this. The component is commonComponent/seoTools/GradeMeter. */
.ts-audit-preview__verdict {
font-weight: 700;
color: var(--ts-color-ink, #3e2155);
margin: 0 0 4px;
}
.ts-grade-meter {
display: flex;
gap: 2px;
align-items: stretch;
/* Fills its column rather than sitting at a fixed width in a card three
times as wide, which is what made these read as stranded widgets. The
floor keeps six bands and their letters legible in the narrow five-across
rows; the ceiling stops a meter spanning a whole card and reading as a
progress bar again. */
width: 100%;
min-width: 104px;
max-width: 280px;
/* Sized in both axes, and explicitly not a growing flex item.
`flex: 1 1 auto` grows along whatever the PARENT's main axis happens to
be, and some of these parents are flex columns, so the meter stretched
vertically and rendered 66px tall instead of 20. A component dropped into
containers it does not control cannot assume the axis: fix the height and
refuse to grow. Same family as the RowWrapper stretch trap. */
height: 20px;
flex: 0 0 auto;
/* Centre, not flex-start. In a flex column parent the cross axis is
horizontal, so flex-start left-aligned the meter inside columns whose
label, grade and text are all centred, and the row read as ragged. Centre
is correct in both axes: in a row parent it only affects the vertical,
where the meter has a fixed height anyway. */
align-self: center;
}
.ts-grade-meter__seg {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
}
.ts-grade-meter__seg:first-child { border-radius: 5px 0 0 5px; }
.ts-grade-meter__seg:last-child { border-radius: 0 5px 5px 0; }
/* Unreached bands stay visible so the scale can be read, but recede. At this
opacity they are decorative, so no contrast threshold applies. */
.ts-grade-meter__seg { opacity: 0.16; }
.ts-grade-meter__seg.is-current {
opacity: 1;
/* A hard ink outline read as a black box stamped on the track, which at
these sizes fought the colour it was meant to point at. A ring in the ink
at low alpha plus a soft lift marks the band as raised out of the scale
instead, and it still works in greyscale because the band is also the only
one at full opacity. */
box-shadow:
0 0 0 2px rgba(62, 33, 85, 0.55),
0 1px 3px rgba(62, 33, 85, 0.25);
border-radius: 3px;
position: relative;
z-index: 1;
}
.ts-grade-meter__seg.is-f { background: var(--ts-score-f-bg, #b42318); }
.ts-grade-meter__seg.is-d { background: var(--ts-score-d-bg, #c2410c); }
.ts-grade-meter__seg.is-c { background: var(--ts-score-c-bg, #9a6207); }
.ts-grade-meter__seg.is-b { background: var(--ts-score-b-bg, #4f7a12); }
.ts-grade-meter__seg.is-a { background: var(--ts-score-a-bg, #1b7a3e); }
.ts-grade-meter__seg.is-a-plus { background: var(--ts-score-a-plus-bg, #12703f); }
/* Next steps: the first one is the recommendation, the rest are the queue. */
.ts-donext-compact__item--hero {
background: linear-gradient(135deg, #672c72 0%, #7d3fa8 100%);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
}
.ts-donext-compact__item--hero .ts-donext-compact__label { color: #fff; font-weight: 700; }
.ts-donext-compact__item--hero .ts-donext-compact__rank {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.ts-donext-compact__item--hero .ts-donext-compact__go,
.ts-donext-compact__item--hero .ts-donext-compact__skip { color: #fff; }
/* The hero's controls need their own hover.
*
* The shared rule sets background: var(--primary-light) on hover, which is
* #F2EEF8 - a near-white lilac chosen to sit behind a PURPLE arrow on the white
* rows. On the hero the arrow is #fff, so hovering put a white arrow on a
* near-white chip and the control vanished under the cursor.
*
* rgba(255,255,255,.22) is the value the hero's own rank badge already uses,
* and it reads as a lighter purple over the 135deg #672c72 -> #7d3fa8 gradient,
* so the white arrow keeps its contrast and the hover is still visible
* feedback. Both controls, so the pair behaves the same way. */
.ts-donext-compact__item--hero .ts-donext-compact__go:hover,
.ts-donext-compact__item--hero .ts-donext-compact__go:focus-visible,
.ts-donext-compact__item--hero .ts-donext-compact__skip:hover,
.ts-donext-compact__item--hero .ts-donext-compact__skip:focus-visible {
background: rgba(255, 255, 255, 0.22);
}
.ts-donext-compact__hero-eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 10px;
font-weight: 800;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 2px;
}
@media (prefers-reduced-motion: reduce) {
.sec-toolbar-main .swiper-slide > * {
transition: none;
/* No entrance at all rather than a faster one: the point of the setting is
that motion is unwelcome, not that it should be brief. */
animation: none;
}
.sec-toolbar-main .icon-size { transition: none; }
}
/* Card alignment in the tool row (TS-5174 follow-up).
*
* Labels wrap to one or two lines depending on the tool name, so the cards
* were ending up different heights with their icons at different vertical
* positions. Stretch the slides to a common height and let the label block
* absorb the difference, so icons sit on one line across the row whatever
* the names are. */
.sec-toolbar-main .swiper-slide {
height: auto;
display: flex;
align-items: stretch;
}
/* Tile metrics retired with the tile. These sat later in the file than the
row rules and won on equal specificity, which is what kept the cards at
76px, so they are corrected here rather than out-specified. */
.sec-toolbar-main .toolbox-main {
width: 100%;
height: 100%;
justify-content: flex-start;
gap: 11px;
padding: 10px 12px;
}
.sec-toolbar-main .toolbox-main p {
margin: 0;
/* No reserved second line. The tile needed it so a one-word name did not
ride up against a centred icon; in a row the name is vertically centred
beside the disc and a second line only ever adds dead height. */
display: flex;
align-items: center;
text-align: left;
}
.sec-toolbar-main .icon-size {
flex: 0 0 auto;
}
/* The hero eyebrow is a span inside a span, so it needs to be a block or it
runs straight into the label ("DO THIS FIRSTSupercharge YouTube Studio"). */
.ts-donext-compact__hero-eyebrow {
display: block;
}
/* Why-you-are-here note on the connected accounts page (TS-5174).
Uses the component tint with a brand edge, so it reads as context rather
than as a warning. */
.ts-accounts__arrival {
background: var(--ts-tint-component, #efedf7);
border-left: 4px solid var(--ts-btn-primary-bg, #672c72);
border-radius: 8px;
padding: 12px 16px;
margin: 0 0 18px;
font-weight: 600;
color: var(--ts-color-ink, #3e2155);
}
/* The score ring is interactive: clicking swaps the grade for the percentage.
Nothing advertised that, so it needs to look pressable and to keep a
visible focus ring for keyboard users. */
.ts-audit-preview__ring-btn {
background: none;
border: 0;
padding: 0;
cursor: pointer;
border-radius: 999px;
line-height: 0;
transition: transform 120ms ease;
}
.ts-audit-preview__ring-btn:hover {
transform: scale(1.03);
}
.ts-audit-preview__ring-btn:focus-visible {
outline: 3px solid var(--ts-color-eyebrow, #6d648f);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.ts-audit-preview__ring-btn { transition: none; }
}
/* Score ring and row marks: fallback-band corrections (TS-5174 follow-up).
*
* The ring is sized for a letter. A percentage is three or four characters
* in the same space, which overflowed the arc and read as the loudest thing
* on the dashboard. Shrink only when the label is long, so the grade keeps
* its presence. */
.ts-audit-preview__ring-text.is-long {
font-size: 17px;
letter-spacing: -0.01em;
}
/* The letter beside a meter must match the segment the meter highlights.
* These previously used the good/fair/poor band classes, so a B rendered
* orange beside a green B segment: one grade, two colours, on one row. */
.ts-audit-preview__score.is-grade-f { color: var(--ts-score-f-bg, #b42318); }
.ts-audit-preview__score.is-grade-d { color: var(--ts-score-d-bg, #c2410c); }
.ts-audit-preview__score.is-grade-c { color: var(--ts-score-c-bg, #9a6207); }
.ts-audit-preview__score.is-grade-b { color: var(--ts-score-b-bg, #4f7a12); }
.ts-audit-preview__score.is-grade-a { color: var(--ts-score-a-bg, #1b7a3e); }
.ts-audit-preview__score.is-grade-a-plus { color: var(--ts-score-a-plus-bg, #12703f); }
/* The context label on the promoted step.
*
* It inherits the muted grey meant for a white row, which lands at 1.80:1 on
* the purple fill: unreadable, and introduced by promoting the first row
* without restyling what sits inside it. A light lavender reads at 7.83
* against the darker end of the gradient while still sitting behind the
* label, which is what the muted treatment was for. */
.ts-donext-compact__item--hero .ts-donext-compact__context {
color: #efe4f3;
}
/* Shared button METRICS for the house roles.
*
* The colour rules below fixed half the problem and left the other half in
* place, which is why "Schedule a post" and "Add event" sat side by side on
* the content calendar at visibly different sizes.
*
* Only `.btn.btn-primary` was ever given a shape (style.css:485). Every other
* role got a colour here and nothing else, so its padding, font size, weight
* and radius all fell through to Bootstrap's `.btn` default:
*
* .btn.btn-primary 10px 18px 14px / 500 radius 8px border 0
* bootstrap .btn 6px 12px 16px / 400 radius 4px border 1px
*
* A role class should decide what a button MEANS, never how big it is. Two
* buttons in the same action row must be the same object in two colours.
*
* Kept at two classes so it matches .btn.btn-primary's specificity exactly
* and any existing page-scoped override still wins, the same restraint
* core-buttons.css uses for the Drupal vocabulary. */
.btn.btn-secondary,
.btn.btn-light,
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-success {
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
/* 1.5, matching .btn.btn-primary. This was 1.2, which left every non-primary
role 4.2px shorter than the primary beside it: measured live on the
content calendar, "Schedule a post" at 41px against "Add event" at 36.8px,
with identical padding, font-size and radius. The padding fix was correct
and incomplete. */
line-height: 1.5;
text-align: center;
border-width: 0;
border-style: solid;
}
/* The outline role is the exception: its edge IS the control, so it keeps a
border where the filled roles drop theirs. Width is set here rather than
left to Bootstrap so the two roles still measure the same overall. */
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-light {
border-width: 1px;
padding: 9px 17px;
}
/* btn-secondary means orange, on its own.
*
* It never did. The theme's orange only existed on selectors that required
* BOTH classes, `.btn.btn-primary.btn-secondary`, and only inside particular
* page scopes. A bare `.btn-secondary` fell through to Bootstrap's grey.
*
* That is why removing the redundant btn-primary turned six audit buttons
* grey: they were not styled as secondary buttons, they were styled as
* primary-buttons-that-also-had-secondary, and the pair was doing the work.
*
* One class, one role. #c2410c carries white at 5.18:1 and separates from the
* page at 5.18:1, so it clears both thresholds. */
.btn.btn-secondary,
.btn-secondary {
background: var(--secondary-color, #c2410c);
border-color: var(--secondary-color, #c2410c);
color: #fff;
}
/* An icon inside an orange button is white, regardless of how the button was
classed. This moved here from style.css with the pair rule it belonged to;
it was never about the pair, only about the fill it sat on. */
.btn.btn-secondary path,
.btn-secondary path {
fill: #fff;
}
/* TRANSITIONAL. Delete this block when the markup is cleaned up.
*
* 53 places still emit `class="btn btn-primary btn-secondary"`. Both role
* rules are two classes, so they are the SAME specificity, which means the
* winner is decided purely by this file loading after style.css. That gives
* the right answer today and it is an accident of libraries.yml ordering
* rather than anything the selectors say.
*
* Removing the old pair rule without this would have left the estate's most
* common button depending on a line number. So the pair keeps ONE explicit
* definition, here, next to the role it resolves to, instead of the six
* scattered copies it had before.
*
* This is the only place in the theme that mentions both classes. When the
* markup drops the redundant btn-primary, this block goes with it and
* nothing else has to change. */
.btn.btn-primary.btn-secondary {
background: var(--secondary-color, #c2410c);
border-color: var(--secondary-color, #c2410c);
color: #fff;
}
.btn.btn-secondary:hover,
.btn-secondary:hover {
background: #a8380a;
border-color: #a8380a;
color: #fff;
}
/* The three role classes that had no house definition.
*
* Found by walking four pages. Each of these is a Bootstrap class the product
* uses constantly and the theme never styled, so every instance fell through
* to a Bootstrap default that does not belong to us. Fixed once here rather
* than patched per page, because that is the shape of the problem: one gap,
* appearing wherever anyone looked.
*
* btn-secondary is defined above. These are the other two.
*/
/* Outline primary. Was raw Bootstrap blue, rgb(13,110,253), on the project
hub error state and anywhere else an outline button appears. Brand purple
holds 8.81:1 as a label on white and 7.09:1 on glass, and the same value
carries the border, which is what gives the control an edge. */
.btn.btn-outline-primary,
.btn-outline-primary {
color: var(--primary-color, #672c72);
border-color: var(--primary-color, #672c72);
background: transparent;
}
.btn.btn-outline-primary:hover,
.btn-outline-primary:hover {
background: var(--primary-color, #672c72);
border-color: var(--primary-color, #672c72);
color: #fff;
}
/* Outline secondary and outline success: the two roles this file still had
* not defined, found live rather than by reading.
*
* The QA session measured "View your plan" on /onboarding and got
* colour #6c757d with a 4px radius. Both are Bootstrap's own values, so that
* control had received NEITHER the theme's colour nor its metrics. Not a near
* miss: entirely unstyled by us. 21 markup sites use btn-outline-secondary
* and 1 uses btn-outline-success.
*
* Worth recording how it was found, because the technique generalises. Hue is
* unreliable through a video encode but RADIUS is not, and ours is 8px against
* Bootstrap's 4px. A 4px corner is therefore a reliable tell that a role class
* fell through, and it survives any compression. The same page turned up three
* distinct sub-cases with it: unstyled entirely, coloured but not sized, and
* hand-sized off-system at 10px.
*
* Colours follow the roles signed off 2026-07-23 rather than Bootstrap's
* palette. Orange is the alternative or lower-emphasis flow; green is Go.
* #c2410c measures 5.18:1 on white and #178055 measures 4.94:1, so each
* clears 4.5 as a label and 3 as a border in one value. */
.btn.btn-outline-secondary,
.btn-outline-secondary {
color: var(--secondary-color, #c2410c);
border-color: var(--secondary-color, #c2410c);
background: transparent;
}
.btn.btn-outline-secondary:hover,
.btn-outline-secondary:hover {
background: var(--secondary-color, #c2410c);
border-color: var(--secondary-color, #c2410c);
color: #fff;
}
.btn.btn-outline-success,
.btn-outline-success {
color: var(--ts-btn-go-bg, #178055);
border-color: var(--ts-btn-go-bg, #178055);
background: transparent;
}
.btn.btn-outline-success:hover,
.btn-outline-success:hover {
background: var(--ts-btn-go-bg, #178055);
border-color: var(--ts-btn-go-bg, #178055);
color: #fff;
}
/* Light. This is the one that kept failing: Suggestions, SKIP, Add Outline,
Who's watching and Remove all sat between 1 and 1.14 against the surface
behind them, so the button had no perceivable edge at all. Five instances
across four pages, one cause.
*
* The fill stays pale, because these are low-weight repeated actions and
* should not shout. The edge does the work instead. #6f6786 measures 5.30:1
* against a white card and 4.27:1 against a frosted panel, so it clears the
* 3:1 boundary threshold on both surfaces, which the pale greys did not.
* The label is #5b5872 at 6.46:1 on the fill. */
.btn.btn-light,
.btn-light {
background: #f8f9fa;
border: 1px solid var(--ts-border-control, #6f6786);
color: #5b5872;
}
.btn.btn-light:hover,
.btn-light:hover {
background: #efecf7;
border-color: var(--primary-color, #672c72);
color: var(--primary-color, #672c72);
}
/* Empty-state card.
*
* The layout now lives with .card-audience in style.css, because the two are
* the same layout and were duplicated: empty states across the estate were
* built by copying the audience card. Keeping one definition for both is the
* point of this class, not a second copy of the rules.
*
* What .ts-empty-state exists for is the ONE declaration it does not inherit:
* .card-audience paints its primary button with --secondary-color, so every
* borrowed empty state rendered its call to action orange regardless of what
* the action did. Under the roles signed off 2026-07-23 orange means an
* alternative or lower-emphasis flow, which an empty state's only action
* never is.
*
* The audience rule is correct for its own feature and stays there. */
/* An exposed filter's reset is never the page's primary action.
*
* Drupal gives the exposed form's reset button btn btn-primary, so on the
* notes page the loudest control was "Clear", a filter reset, rendered in
* full brand purple and centred, while nothing on the page carried the
* action a visitor actually came for. Fifteen views expose a reset button,
* so this was fifteen pages leading with their least important control.
*
* Scoped to the exposed form and to name="reset" so it cannot reach a real
* submit. This is the quiet-control treatment: a control that is available
* without competing, same values as .btn-light.
*/
.views-exposed-form .btn.btn-primary[name="reset"],
.views-exposed-form .btn.btn-primary[id^="edit-reset"] {
background: #f8f9fa;
border: 1px solid var(--ts-border-control, #6f6786);
color: #5b5872;
font-weight: 500;
}
.views-exposed-form .btn.btn-primary[name="reset"]:hover,
.views-exposed-form .btn.btn-primary[name="reset"]:focus-visible,
.views-exposed-form .btn.btn-primary[id^="edit-reset"]:hover,
.views-exposed-form .btn.btn-primary[id^="edit-reset"]:focus-visible {
background: #eceaf1;
border-color: #5b5872;
color: #3d3a4d;
}