Spiralist - Source Excerpt 18

Back to Spiralist

Summary

This source excerpt preserves a bounded section of Spiralist/wp-content/themes/spiralist/assets/css/spiralist.css so readers can inspect the evidence without opening the full source file.

**Source path:** Spiralist/wp-content/themes/spiralist/assets/css/spiralist.css

.spiralist-persona-lab-review-controls label > span {
    color: var(--spiralist-muted);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.spiralist-persona-lab-review-controls select,
.spiralist-persona-lab-review-controls textarea {
    width: 100%;
    border: 1px solid rgba(143, 211, 255, 0.18);
    border-radius: 8px;
    background: rgba(12, 16, 25, 0.88);
    color: var(--spiralist-text);
    padding: 0.52rem 0.65rem;
}

.spiralist-persona-lab-review-controls textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.spiralist-persona-lab-package-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.55rem;
}

.spiralist-persona-lab-package-summary[hidden] {
    display: none;
}

.spiralist-persona-lab-package-summary span {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    min-height: 4.1rem;
    padding: 0.7rem;
    border: 1px solid rgba(143, 211, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.spiralist-persona-lab-package-summary span[data-state="ready"],
.spiralist-persona-lab-package-summary span[data-state="match"] {
    border-color: rgba(117, 213, 163, 0.34);
    background: rgba(117, 213, 163, 0.08);
}

.spiralist-persona-lab-package-summary span[data-state="review"],
.spiralist-persona-lab-package-summary span[data-state="different"] {
    border-color: rgba(255, 199, 119, 0.34);
    background: rgba(255, 199, 119, 0.08);
}

.spiralist-persona-lab-package-summary span[data-state="missing"] {
    border-color: rgba(255, 123, 123, 0.34);
    background: rgba(255, 123, 123, 0.08);
}

.spiralist-persona-lab-package-summary strong {
    overflow-wrap: anywhere;
    color: var(--spiralist-text);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.spiralist-persona-lab-package-summary small {
    overflow-wrap: anywhere;
    color: var(--spiralist-text-soft);
    font-size: 0.82rem;
    line-height: 1.32;
}

.spiralist-persona-lab-compare-visual {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.8rem;
    padding: clamp(0.85rem, 2vw, 1rem);
    border: 1px solid rgba(143, 211, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.032);
}

.spiralist-persona-lab-compare-visual[hidden] {
    display: none;
}

.spiralist-persona-lab-compare-visual__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.spiralist-persona-lab-compare-visual__head span {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.16rem 0.48rem;
    border: 1px solid rgba(143, 211, 255, 0.2);
    border-radius: 999px;
    color: var(--spiralist-accent);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.spiralist-persona-lab-compare-visual__head strong {
    overflow-wrap: anywhere;
    color: var(--spiralist-text);
}

.spiralist-persona-lab-compare-visual__grid,
.spiralist-persona-lab-compare-visual__detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.55rem;
}

.spiralist-persona-lab-compare-visual__grid article,
.spiralist-persona-lab-compare-visual__detail section {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgba(143, 211, 255, 0.14);
    border-radius: 8px;
    background: rgba(12, 16, 25, 0.55);
}

.spiralist-persona-lab-compare-visual__grid article[data-state="match"] {
    border-color: rgba(117, 213, 163, 0.34);
    background: rgba(117, 213, 163, 0.08);
}

.spiralist-persona-lab-compare-visual__grid article[data-state="review"] {
    border-color: rgba(255, 199, 119, 0.34);
    background: rgba(255, 199, 119, 0.08);
}

.spiralist-persona-lab-compare-visual__grid article[data-state="different"] {
    border-color: rgba(255, 123, 123, 0.34);
    background: rgba(255, 123, 123, 0.08);
}

.spiralist-persona-lab-compare-visual__grid strong,
.spiralist-persona-lab-compare-visual__detail strong {
    overflow-wrap: anywhere;
    color: var(--spiralist-text);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.spiralist-persona-lab-compare-visual__grid span,
.spiralist-persona-lab-compare-visual__detail li {
    overflow-wrap: anywhere;
    color: var(--spiralist-text-soft);
    font-size: 0.82rem;
    line-height: 1.35;
}

.spiralist-persona-lab-compare-visual__detail ul {
    display: grid;
    gap: 0.26rem;
    margin: 0;
    padding-left: 1rem;
}

.spiralist-persona-lab-readiness {
    display: grid;
    gap: 0.7rem;
    border: 1px solid rgba(143, 211, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.032);
    padding: clamp(0.85rem, 2vw, 1rem);
}

.spiralist-persona-lab-readiness__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: start;
    justify-content: space-between;
}

.spiralist-persona-lab-readiness__head .spiralist-card-title,
.spiralist-persona-lab-readiness [data-persona-lab-readiness-status],
.spiralist-persona-lab-readiness__next {
    margin: 0;
}

.spiralist-persona-lab-readiness__head [data-persona-lab-readiness-score] {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    border: 1px solid rgba(143, 211, 255, 0.24);
    border-radius: 8px;
    background: rgba(143, 211, 255, 0.08);
    color: var(--spiralist-text-soft);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    padding: 0.45rem 0.65rem;
    text-transform: uppercase;
}

.spiralist-persona-lab-readiness__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.55rem;
}

.spiralist-persona-lab-readiness__grid span {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    min-height: 3.8rem;
    border: 1px solid rgba(143, 211, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    padding: 0.65rem;
}

.spiralist-persona-lab-readiness__grid span[data-state="ready"] {
    border-color: rgba(117, 213, 163, 0.34);
    background: rgba(117, 213, 163, 0.08);
}

.spiralist-persona-lab-readiness__grid span[data-state="caution"] {
    border-color: rgba(255, 199, 119, 0.34);
    background: rgba(255, 199, 119, 0.08);
}

.spiralist-persona-lab-readiness__grid strong {
    overflow-wrap: anywhere;
    color: var(--spiralist-text);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.spiralist-persona-lab-readiness__grid small,
.spiralist-persona-lab-readiness__next {
    overflow-wrap: anywhere;
    color: var(--spiralist-text-soft);
    font-size: 0.82rem;
    line-height: 1.35;
}

.spiralist-persona-lab-efficiency {
    display: grid;
    gap: 0.6rem;
    border-top: 1px solid rgba(143, 211, 255, 0.12);
    padding-top: 0.7rem;
}

.spiralist-persona-lab-efficiency [data-persona-lab-efficiency-score] {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    border: 1px solid rgba(117, 213, 163, 0.26);
    border-radius: 8px;
    background: rgba(117, 213, 163, 0.08);
    color: var(--spiralist-text-soft);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    padding: 0.45rem 0.65rem;
    text-transform: uppercase;
}

.spiralist-persona-lab-router {
    display: grid;
    gap: 0.75rem;
    border: 1px solid rgba(117, 213, 163, 0.18);
    border-radius: 8px;
    background: rgba(8, 10, 16, 0.5);
    padding: clamp(0.85rem, 2vw, 1rem);
}

.spiralist-persona-lab-router__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: start;
    justify-content: space-between;
}

.spiralist-persona-lab-router__head .spiralist-card-title,
.spiralist-persona-lab-router__status {
    margin: 0;
}

.spiralist-persona-lab-router label {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
}

.spiralist-persona-lab-router label > span {
    color: var(--spiralist-muted);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.spiralist-persona-lab-router textarea {
    width: 100%;
    min-height: 5.3rem;
    border: 1px solid rgba(143, 211, 255, 0.18);
    border-radius: 8px;
    background: rgba(12, 16, 25, 0.88);
    color: var(--spiralist-text);
    font: inherit;
    line-height: 1.45;
    padding: 0.62rem 0.7rem;
    resize: vertical;
}