sat flush, a tight display heading's descenders
touching the line under it, and the buttons glued to the text. So a
heading, its text and its actions keep a floor of space between them by
default. Zero specificity: any rule a site writes wins. */
:where(h1, h2, h3, h4) + :where(p, ul, ol, blockquote, figure) {
margin-block-start: max(var(--fb-space-3, 12px), 0.4em);
}
:where(p, ul, ol, blockquote) + :where(p, ul, ol, blockquote) {
margin-block-start: var(--fb-space-3, 12px);
}
:where(h1, h2, h3, h4, p, ul, ol, blockquote, figure) + :where(h2, h3, h4) {
margin-block-start: var(--fb-space-5, 24px);
}
:where(h1, h2, h3, h4, p, ul, ol, blockquote, figure)
+ :where(.btn-row, .btn, .btn-quiet, form) {
margin-block-start: var(--fb-space-5, 24px);
}
/* These already space their children with gap; a margin on top would
double it. A container a site makes with its own gap gets both — more
air than intended, never less. */
:where(
.section-head,
.hero-grid,
.hero-copy,
.split,
.card,
.card-grid,
.panel,
.stats,
.stat,
.steps,
.steps > li,
.timeline > li,
.quote,
.callout,
.cta,
.media-split,
.story,
.story-steps,
.bento
)
> * {
margin-block-start: 0;
}
.container {
width: min(var(--page-width), 100% - 2 * var(--gutter));
margin-inline: auto;
}
/* Header and footer */
.site-header {
position: sticky;
top: 0;
z-index: 30;
}
.site-header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 28px;
min-height: 68px;
padding-block: 10px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.brand-mark {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
flex: none;
}
/* A generated or uploaded logo mark replaces the initials: the picture fills
the mark, which drops its own fill so the logo's ground shows. */
.brand-mark:has(> img) {
overflow: hidden;
background: none;
}
.brand-mark > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.site-header .sc-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 22px;
}
.site-header .sc-nav a,
.footer-links a {
text-decoration: none;
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* The palette picker the platform fills from the site's listed palettes
(
in a header or footer). Without this the buttons are the
browser's own. */
button[data-fb-theme] {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
border-radius: 999px;
background: transparent;
color: inherit;
font: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
/* The two theme buttons sit together as one small control. */
button[data-fb-theme] + button[data-fb-theme] {
margin-left: -6px;
}
button[data-fb-theme]:hover,
button[data-fb-theme][aria-pressed="true"] {
background: color-mix(in srgb, currentColor 14%, transparent);
}
.site-footer {
padding-block: 40px;
}
.site-footer-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
/* Sections */
.section {
padding-block: var(--section-space);
}
.section-head {
display: grid;
justify-items: start;
gap: 14px;
max-width: 46rem;
margin-bottom: clamp(28px, 4vw, 48px);
}
.section-head.center {
margin-inline: auto;
justify-items: center;
text-align: center;
}
.hero {
padding-block: clamp(48px, 8vw, 112px);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: center;
gap: clamp(32px, 5vw, 64px);
}
.hero-copy {
display: grid;
justify-items: start;
gap: 22px;
}
.split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: clamp(28px, 5vw, 64px);
}
.band {
background: var(--fb-surface);
}
.band-dark {
background: var(--fb-band, var(--fb-ink));
color: var(--fb-band-ink, var(--fb-paper));
}
.band-dark .muted,
.band-dark .lead,
.band-dark .eyebrow {
color: var(--fb-band-muted, currentColor);
}
.band-dark :focus-visible {
outline-color: var(--fb-band-ink, currentColor);
}
/* Type */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
}
.lead {
max-width: 38rem;
}
.muted {
color: var(--fb-muted);
}
/* Actions */
.btn-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.btn,
.btn-quiet {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 20px;
border: 1px solid transparent;
font: inherit;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
transform 0.15s ease;
}
.btn {
background: var(--fb-accent);
color: var(--fb-accent-contrast);
}
.btn-quiet {
border-color: var(--fb-line);
background: transparent;
color: inherit;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
text-decoration: none;
}
.link-arrow::after {
content: "→";
transition: transform 0.15s ease;
}
.link-arrow:hover::after {
transform: translateX(3px);
}
/* Cards, panels, badges */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 16px;
}
.card {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 24px;
}
.card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 8px;
}
.panel {
display: grid;
gap: 18px;
min-width: 0;
padding: 22px;
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.task-list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.task-list > li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-block: 11px;
border-top: 1px solid var(--fb-line);
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
white-space: nowrap;
}
.progress {
height: 8px;
overflow: hidden;
background: var(--fb-line);
}
.progress > span {
display: block;
height: 100%;
background: var(--fb-accent);
}
.avatars {
display: flex;
}
.avatars > .avatar + .avatar {
margin-left: -8px;
}
.avatar {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
flex: none;
border-radius: 50%;
font-size: 13px;
font-weight: 600;
}
/* Figures, lists, quotes */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 24px;
}
.stat {
display: grid;
align-content: start;
gap: 8px;
}
.stat-value {
font-family: var(--fb-font-heading);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.stat-label {
font-size: var(--fb-text-sm);
}
.steps {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: step;
}
.steps > li {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 6px 18px;
padding: 20px;
counter-increment: step;
}
.steps > li::before {
content: counter(step);
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
grid-row: span 2;
font-variant-numeric: tabular-nums;
}
.steps > li > :not(.badge) {
grid-column: 2;
}
.steps > li > .badge {
grid-column: 3;
grid-row: 1;
}
.timeline {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.timeline > li {
position: relative;
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
gap: 4px 20px;
padding: 0 0 30px 30px;
}
.timeline > li::before {
content: "";
position: absolute;
top: 6px;
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--fb-paper);
box-shadow: 0 0 0 2px var(--fb-line);
}
.timeline > li::after {
content: "";
position: absolute;
top: 24px;
bottom: 4px;
left: 5px;
width: 2px;
background: var(--fb-line);
}
.timeline > li:last-child {
padding-bottom: 0;
}
.timeline > li:last-child::after {
display: none;
}
.timeline > li.is-done::before {
background: var(--fb-ink);
box-shadow: 0 0 0 2px var(--fb-ink);
}
.timeline > li.is-current::before {
background: var(--fb-accent);
box-shadow:
0 0 0 2px var(--fb-ink),
0 0 0 6px var(--fb-paper),
0 0 0 7px var(--fb-line);
}
.timeline time {
font-variant-numeric: tabular-nums;
}
.quote {
display: grid;
gap: 22px;
max-width: 52rem;
}
.quote figcaption {
font-style: normal;
}
.callout {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 24px;
}
.callout:not(:last-child) {
margin-bottom: clamp(32px, 5vw, 56px);
}
.cta {
display: grid;
justify-items: start;
gap: 20px;
padding: clamp(32px, 5vw, 64px);
}
.cta.center {
justify-items: center;
text-align: center;
}
/* Media and motion. Pictures are real
![]()
elements with alt text; the
overlay and tint come from the style (--fb-overlay, --fb-media-tint), so
one photograph takes each look's cast. Motion is CSS scroll-driven
animation: where a browser lacks it, or the visitor asks for reduced
motion, the page is simply still. */
.hero-media,
.band-media,
.media-frame,
.story-media,
.bento-tile {
position: relative;
isolation: isolate;
overflow: hidden;
}
.hero-media > img,
.band-media > img,
.media-frame > img,
.story-media > img,
.bento-tile > img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-media::after,
.band-media::after,
.media-frame::after,
.story-media::after,
.bento-tile::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(
--fb-media-tint,
color-mix(in srgb, var(--fb-accent) 28%, transparent)
);
mix-blend-mode: soft-light;
pointer-events: none;
}
.hero-media {
display: grid;
align-items: end;
min-height: min(92vh, 860px);
padding-block: clamp(120px, 16vw, 200px) clamp(48px, 8vw, 104px);
color: var(--fb-band-ink, var(--fb-paper));
}
.hero-media::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(
--fb-overlay,
linear-gradient(
to top,
color-mix(in srgb, var(--fb-band, var(--fb-ink)) 82%, transparent),
color-mix(in srgb, var(--fb-band, var(--fb-ink)) 20%, transparent) 72%
)
);
}
.hero-media .lead,
.hero-media .muted {
color: var(--fb-band-muted, currentColor);
}
.hero-media :focus-visible {
outline-color: var(--fb-band-ink, currentColor);
}
.band-media {
height: clamp(260px, 44vw, 560px);
}
/* Room above and below the picture for it to drift into. */
.band-media > img {
inset: -14% 0;
height: 128%;
}
.media-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: clamp(28px, 5vw, 72px);
}
.media-split > .media-frame {
aspect-ratio: 4 / 3;
}
.media-split.reverse > .media-frame {
order: 2;
}
.media-frame {
border-radius: var(--fb-radius);
}
.story {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: clamp(32px, 5vw, 72px);
}
.story-media {
position: sticky;
top: calc(var(--header-height, 68px) + 24px);
aspect-ratio: 4 / 5;
border-radius: var(--fb-radius);
}
.story-steps {
display: grid;
gap: clamp(56px, 16vh, 160px);
padding-block: clamp(24px, 12vh, 120px);
}
.bento {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: clamp(160px, 18vw, 240px);
gap: 16px;
}
.bento-tile {
display: flex;
align-items: flex-end;
padding: 20px;
border-radius: var(--fb-radius);
color: var(--fb-band-ink, var(--fb-paper));
text-decoration: none;
}
/* A shade under the caption, so it reads on a light photograph too. */
.bento-tile::before {
content: "";
position: absolute;
inset: 45% 0 0;
z-index: -1;
background: linear-gradient(
to top,
color-mix(in srgb, var(--fb-band, var(--fb-ink)) 72%, transparent),
transparent
);
pointer-events: none;
}
.bento-wide {
grid-column: span 2;
}
.bento-tall {
grid-row: span 2;
}
.bento-caption {
position: relative;
font-weight: 600;
text-shadow: 0 1px 12px
color-mix(in srgb, var(--fb-band, var(--fb-ink)) 60%, transparent);
}
.marquee {
overflow: hidden;
padding-block: 18px;
mask-image: linear-gradient(
to right,
transparent,
currentColor 10%,
currentColor 90%,
transparent
);
}
.marquee-track {
display: flex;
gap: clamp(32px, 5vw, 72px);
width: max-content;
white-space: nowrap;
}
.marquee-track > * {
font-family: var(--fb-font-heading);
font-size: clamp(24px, 3.2vw, 40px);
font-weight: 600;
line-height: 1;
opacity: 0.72;
}
@media (prefers-reduced-motion: no-preference) {
.marquee-track {
animation: fb-marquee 38s linear infinite;
}
@supports (animation-timeline: view()) {
.reveal {
animation: fb-reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
.band-media > img {
animation: fb-drift linear both;
animation-timeline: view();
}
.hero-media > img {
animation: fb-settle linear both;
animation-timeline: scroll();
animation-range: 0 100vh;
}
}
}
@keyframes fb-marquee {
to {
transform: translateX(-50%);
}
}
/* A rise, not a fade: text that stayed half-transparent until it was well
up the screen read as washed out, and worst on a white page. */
@keyframes fb-reveal {
from {
transform: translateY(28px);
}
}
@keyframes fb-drift {
from {
transform: translateY(-9%);
}
to {
transform: translateY(9%);
}
}
@keyframes fb-settle {
to {
transform: scale(1.08) translateY(4%);
}
}
@media (max-width: 880px) {
.media-split,
.story {
grid-template-columns: minmax(0, 1fr);
}
.media-split.reverse > .media-frame {
order: 0;
}
.story-media {
position: relative;
top: auto;
aspect-ratio: 16 / 10;
}
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Glass. A look can let its sticky header lie over the page's opening:
it sets --header-overlap: 1 and its header's height in --header-height,
and gives the header (or its inner bar) a translucent, blurred background.
Only a page that opens with a .hero is overlapped — any other page keeps
the header in the flow — and never on a phone, where the header is not
pinned. */
@media (min-width: 641px) {
body:has(main > :is(.hero, .hero-media):first-child) .site-header {
margin-bottom: calc(var(--header-overlap, 0) * var(--header-height, 68px) * -1);
}
body:has(main > .hero:first-child) main > .hero:first-child {
padding-top: calc(
clamp(48px, 8vw, 112px) + var(--header-overlap, 0) * var(--header-height, 68px)
);
}
}
@media (max-width: 880px) {
.hero-grid,
.split {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
/* A header that wraps onto two rows would take a third of a phone screen
if it stayed pinned. */
.site-header {
position: static;
}
.steps > li {
grid-template-columns: auto minmax(0, 1fr);
}
.steps > li > .badge {
grid-column: 2;
grid-row: auto;
}
.timeline > li {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ── Indigo Studio ────────────────────────────────────────────────────────
The look: one indigo accent on white, geometric headlines with tight
tracking, hairline cards lifted by a whisper of shadow, and one dark
"stage" panel where the product lives. */
h1,
h2,
h3 {
color: var(--fb-heading);
}
h1 {
font-size: clamp(40px, 6.2vw, 72px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.045em;
}
h2 {
font-size: clamp(30px, 4vw, 48px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.035em;
}
h3 {
font-size: var(--fb-text-lg);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.012em;
}
.site-header {
border-bottom: 1px solid var(--fb-line);
background: color-mix(in srgb, var(--fb-paper) 78%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(1.6);
backdrop-filter: blur(16px) saturate(1.6);
}
.brand {
color: var(--fb-heading);
font-family: var(--fb-font-heading);
font-size: var(--fb-text-lg);
font-weight: 700;
letter-spacing: -0.03em;
}
.brand-mark {
border-radius: 10px;
background: var(--fb-accent);
color: var(--fb-accent-contrast);
font-size: 15px;
}
.site-header .sc-nav a {
color: var(--fb-muted);
font-size: 15px;
}
.site-header .sc-nav a:hover {
color: var(--fb-heading);
}
.eyebrow {
padding: 4px 12px;
border-radius: 999px;
background: var(--fb-accent-wash);
color: var(--fb-accent-ink);
font-size: var(--fb-text-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lead {
color: var(--fb-muted);
font-size: var(--fb-text-lg);
line-height: 1.5;
}
.highlight {
background: linear-gradient(90deg, var(--fb-accent), var(--fb-accent-deep));
-webkit-background-clip: text;
background-clip: text;
color: var(--fb-accent);
-webkit-text-fill-color: transparent;
}
.btn,
.btn-quiet {
border-radius: 12px;
font-weight: 500;
box-shadow: 0 2px 10px color-mix(in srgb, var(--fb-heading) 8%, transparent);
}
.btn::after {
content: "→";
}
.btn:hover {
background: var(--fb-accent-deep);
}
.btn-quiet {
border-color: var(--fb-line-strong);
background: var(--fb-paper);
color: var(--fb-heading);
}
.btn-quiet:hover {
border-color: var(--fb-heading);
}
.link-arrow {
color: var(--fb-accent);
font-weight: 500;
}
.card {
border: 1px solid var(--fb-line);
border-radius: var(--fb-radius);
background: var(--fb-paper);
box-shadow: 0 2px 16px color-mix(in srgb, var(--fb-heading) 8%, transparent);
}
/* The stage: the product panel is a dark screen set into the white page. */
.panel {
border-radius: calc(var(--fb-radius) + 8px);
background: var(--fb-band);
color: var(--fb-band-ink);
}
.panel .eyebrow {
padding: 0;
background: none;
color: var(--fb-band-accent);
}
.panel .muted {
color: var(--fb-band-muted);
}
.panel-title {
color: var(--fb-band-ink);
font-size: var(--fb-text-xl);
font-weight: 600;
letter-spacing: -0.025em;
}
.panel .task-list > li {
border-top-color: color-mix(in srgb, var(--fb-band-ink) 12%, transparent);
}
.panel .progress {
background: color-mix(in srgb, var(--fb-band-ink) 14%, transparent);
}
.panel .progress > span {
background: var(--fb-band-accent);
}
.panel .badge {
background: color-mix(in srgb, var(--fb-band-ink) 12%, transparent);
color: var(--fb-band-ink);
}
.panel .badge-accent {
background: var(--fb-band-accent);
color: var(--fb-band);
}
.panel .avatar {
box-shadow: 0 0 0 2px var(--fb-band);
}
.badge {
padding: 4px 12px;
border-radius: 999px;
background: var(--fb-surface);
color: var(--fb-heading);
font-size: var(--fb-text-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.badge-accent {
background: var(--fb-accent-wash);
color: var(--fb-accent-ink);
}
.progress,
.progress > span {
border-radius: 999px;
}
.avatar {
background: var(--fb-accent-wash);
color: var(--fb-accent-ink);
box-shadow: 0 0 0 2px var(--fb-paper);
}
.stat-value {
color: var(--fb-heading);
font-size: clamp(40px, 5vw, 56px);
font-weight: 600;
letter-spacing: -0.045em;
}
.stat-label {
font-size: 15px;
}
.steps > li {
border: 1px solid var(--fb-line);
border-radius: var(--fb-radius);
background: var(--fb-paper);
box-shadow: 0 2px 16px color-mix(in srgb, var(--fb-heading) 6%, transparent);
}
.steps > li::before {
border-radius: 50%;
background: var(--fb-accent-wash);
color: var(--fb-accent-ink);
font-family: var(--fb-font-heading);
font-weight: 700;
}
.timeline time {
color: var(--fb-muted);
font-size: var(--fb-text-sm);
font-weight: 500;
}
.timeline > li.is-done::before {
background: var(--fb-heading);
box-shadow: 0 0 0 2px var(--fb-heading);
}
.band {
background: var(--fb-surface);
}
.band-dark {
background: var(--fb-band);
color: var(--fb-band-ink);
}
.band-dark h2,
.band-dark h3 {
color: var(--fb-band-ink);
}
.quote p {
font-family: var(--fb-font-heading);
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.035em;
}
.quote figcaption strong {
color: var(--fb-band-accent);
}
.callout {
border: 1px solid var(--fb-line);
border-radius: var(--fb-radius);
background: var(--fb-surface);
}
.cta {
border-radius: calc(var(--fb-radius) + 8px);
background:
radial-gradient(120% 140% at 50% 0%, var(--fb-accent-wash), transparent 70%),
var(--fb-surface);
}
.site-footer {
border-top: 1px solid var(--fb-line);
color: var(--fb-muted);
font-size: var(--fb-text-sm);
}
.site-footer .brand {
font-size: var(--fb-text-md);
}
/* Snipebridge: editorial AEC report portal, extending Indigo Studio. */
.skip-link {
position: absolute;
top: 8px;
left: 20px;
transform: translateY(-180%);
padding: 12px 18px;
background: var(--fb-paper);
color: var(--fb-accent);
border: 2px solid var(--fb-focus);
z-index: 100;
}
.skip-link:focus {
transform: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
outline: 3px solid var(--fb-focus);
outline-offset: 4px;
}
a,
p,
li,
h1,
h2,
h3 {
overflow-wrap: anywhere;
}
.brand-name {
display: grid;
gap: 2px;
line-height: 1.15;
}
.brand-subtitle {
font-family: var(--fb-font-body);
font-size: 11px;
color: var(--fb-muted);
font-weight: 500;
letter-spacing: 0.02em;
}
.brand-mark {
width: 36px;
height: 36px;
}
.site-header .sc-nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 8px;
}
.site-header .sc-nav {
gap: 8px;
}
.header-actions button[data-fb-theme] {
min-height: 44px;
min-width: 44px;
}
.header-actions button[data-fb-theme] + button[data-fb-theme] {
margin-left: 4px;
}
.footer-stack {
display: grid;
gap: 20px;
}
.footer-note {
max-width: 52rem;
font-size: 13px;
}
.site-footer .link-arrow {
min-height: 44px;
}
.briefing-hero {
padding-block: clamp(36px, 5vw, 68px);
}
.briefing-hero h1 {
font-size: clamp(38px, 4.5vw, 60px);
}
.briefing-hero .media-split {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 52px);
}
.briefing-hero .hero-copy {
gap: var(--fb-space-5, 24px);
}
.briefing-hero .lead {
font-size: 18px;
max-width: 31rem;
}
.hero-copy .btn-row {
margin-block-start: var(--fb-space-3, 12px);
}
.media-frame {
background: var(--fb-surface);
border: 1px solid var(--fb-line);
box-shadow: 0 2px 16px color-mix(in srgb, var(--fb-heading) 8%, transparent);
}
.media-frame::after {
background: color-mix(in srgb, var(--fb-accent) 8%, transparent);
}
.signal-strip {
padding-block: 28px;
border-block: 1px solid var(--fb-line);
}
.signal-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.signal {
display: grid;
gap: 8px;
min-width: 0;
}
.signal strong {
color: var(--fb-heading);
font-family: var(--fb-font-heading);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.025em;
}
.signal span {
color: var(--fb-muted);
font-size: 14px;
}
.editorial-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--fb-space-4, 20px);
min-width: 0;
}
.editorial-copy > * {
margin-block: 0;
}
.editorial-copy h2 {
font-size: clamp(30px, 3.5vw, 44px);
}
.editorial-copy .link-arrow {
margin-top: var(--fb-space-3, 12px);
}
.report-type {
color: var(--fb-muted);
font-size: 13px;
font-weight: 500;
}
.insight-list {
padding-left: 20px;
display: grid;
gap: 10px;
}
.insight-list li::marker {
color: var(--fb-accent);
}
.link-arrow {
min-height: 44px;
}
.leadership-section {
padding-top: 0;
}
.leadership-grid {
align-items: center;
}
.perspective-panel {
padding: clamp(28px, 4vw, 44px);
gap: 28px;
}
.perspective-panel .quote {
gap: 20px;
}
.perspective-panel .quote p {
font-size: clamp(26px, 3vw, 38px);
color: var(--fb-band-ink);
}
.perspective-panel figcaption {
font-size: 14px;
}
.report-preview-section {
background: var(--fb-surface);
}
.report-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.report-card {
padding: clamp(24px, 3vw, 36px);
gap: 18px;
}
.report-card h3 {
font-size: 26px;
letter-spacing: -0.035em;
}
.report-card .card-foot {
flex-wrap: wrap;
margin-top: auto;
padding-top: 16px;
}
.report-card .card-foot > span {
font-size: 13px;
}
.data-note {
margin-top: 28px;
font-size: 13px;
color: var(--fb-muted);
max-width: 56rem;
}
.closing-section {
padding-block: 56px;
}
.cta {
background: var(--fb-surface);
}
.library-hero,
.report-heading {
padding-block: clamp(40px, 6vw, 72px);
}
.library-hero h1,
.report-heading h1 {
font-size: clamp(36px, 5vw, 58px);
}
.library-hero .hero-copy {
max-width: 48rem;
}
.library-section {
padding-top: 0;
}
.library-intro {
display: grid;
gap: 16px;
margin-bottom: 28px;
}
.library-intro h2 {
font-size: 28px;
}
.methodology {
display: grid;
gap: 20px;
border-top: 1px solid var(--fb-line);
padding-top: 40px;
margin-top: 48px;
max-width: 52rem;
}
.methodology h2 {
font-size: 30px;
}
.report-heading .hero-copy {
max-width: 53rem;
}
.breadcrumb {
color: var(--fb-accent);
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 44px;
}
.report-layout {
display: grid;
grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 72px);
align-items: start;
padding-bottom: var(--section-space);
}
.report-body {
display: grid;
gap: 40px;
min-width: 0;
}
.report-section {
display: grid;
gap: 18px;
scroll-margin-top: 110px;
}
.report-section > * {
margin-block: 0;
}
.report-section h2 {
font-size: clamp(28px, 3vw, 36px);
}
.report-section h3 {
font-size: 21px;
}
.report-section ul {
padding-left: 22px;
display: grid;
gap: 10px;
}
.report-section li::marker {
color: var(--fb-accent);
}
.report-aside {
position: sticky;
top: 100px;
display: grid;
gap: 24px;
min-width: 0;
}
.report-aside .card {
gap: 16px;
}
.contents-links {
display: grid;
gap: 8px;
}
.contents-links a {
min-height: 44px;
display: flex;
align-items: center;
color: var(--fb-accent);
text-decoration: none;
}
.report-note {
font-size: 14px;
color: var(--fb-muted);
}
.takeaway {
background: var(--fb-surface);
border: 1px solid var(--fb-line);
border-radius: var(--fb-radius);
padding: 24px;
display: grid;
gap: 14px;
}
.report-aside .aside-title {
font-size: 22px;
letter-spacing: -0.035em;
}
.takeaway > * {
margin-block: 0;
}
.panel:focus-within {
outline-color: var(--fb-band-accent);
}
#report-library {
scroll-margin-top: 100px;
}
@media (max-width: 880px) {
.briefing-hero .media-split,
.report-layout,
.report-card-grid {
grid-template-columns: minmax(0, 1fr);
}
.briefing-hero .hero-copy {
order: -1;
}
.report-aside {
position: static;
order: -1;
}
.report-aside .contents-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.report-aside > .card + .card {
display: none;
}
.signal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.site-header-inner {
gap: 8px 16px;
padding-block: 12px;
}
.site-header .sc-nav {
order: 3;
width: 100%;
justify-content: flex-start;
}
.site-header .sc-nav a {
padding-inline: 0;
}
.site-header .sc-nav {
gap: 24px;
}
.header-actions {
gap: 4px;
}
.header-actions button[data-fb-theme] {
padding-inline: 9px;
}
.brand {
font-size: 18px;
}
.brand-mark {
width: 32px;
height: 32px;
}
.briefing-hero {
padding-top: 28px;
}
.briefing-hero h1 {
font-size: clamp(36px, 8.5vw, 48px);
}
.briefing-hero .media-split {
gap: 32px;
}
.hero-copy .btn-row {
width: 100%;
}
.btn,
.btn-quiet {
white-space: normal;
text-align: center;
padding-block: 12px;
}
.hero-copy .btn-row > a {
width: 100%;
}
.signal-grid {
gap: 24px 16px;
}
.signal strong {
font-size: 16px;
}
.report-aside .contents-links {
grid-template-columns: minmax(0, 1fr);
}
.report-heading .hero-copy {
gap: 18px;
}
.report-heading h1,
.library-hero h1 {
font-size: 36px;
}
.site-footer-inner {
align-items: flex-start;
flex-direction: column;
}
.cta h2 {
font-size: 30px;
}
}
/* Review fixes: readable indigo links in both palettes and full tap areas. */
.link-arrow,
.breadcrumb,
.contents-links a {
color: color-mix(in srgb, var(--fb-accent) 65%, var(--fb-ink));
}
.brand {
min-height: 44px;
}
.site-header .sc-nav a {
min-width: 44px;
}
.skip-link {
min-height: 44px;
}
/* Named market reports and AEC firm profile. */
.report-status {
text-transform: none;
letter-spacing: 0;
font-size: 14px;
}
.finding-preview,
.finding-list {
display: grid;
gap: var(--fb-space-3, 12px);
width: 100%;
min-width: 0;
}
.finding-preview {
padding: 20px;
border: 1px solid var(--fb-line);
border-radius: var(--fb-radius);
background: var(--fb-surface);
}
.finding-preview > *,
.service-row > * {
margin-block: 0;
}
.finding-list {
gap: 20px;
}
.download-placeholder {
width: fit-content;
white-space: normal;
padding-block: 14px;
text-align: center;
color: var(--fb-muted);
cursor: default;
box-shadow: none;
}
.download-placeholder:hover {
border-color: var(--fb-line-strong);
}
.perspective-panel .link-arrow {
color: var(--fb-band-accent);
}
.service-list {
display: grid;
gap: 0;
}
.service-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: 24px;
border-top: 1px solid var(--fb-line);
padding-block: 28px;
}
.service-row > * {
min-width: 0;
}
.service-row h3 {
font-size: 24px;
letter-spacing: -0.035em;
}
.footer-note a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: color-mix(in srgb, var(--fb-accent) 65%, var(--fb-ink));
}
.report-card .card-foot a {
white-space: normal;
}
.report-section .btn {
white-space: normal;
width: fit-content;
padding-block: 14px;
text-align: center;
}
@media (max-width: 880px) {
.service-row {
grid-template-columns: minmax(0, 1fr);
gap: var(--fb-space-3, 12px);
}
}
@media (min-width: 881px) {
.briefing-hero .lead {
font-size: 17px;
}
}
/* Orange and neutral retheme. Palette values are manifest-owned. */
.highlight {
background: none;
background-clip: border-box;
-webkit-background-clip: border-box;
color: var(--fb-accent);
-webkit-text-fill-color: currentColor;
}
.cta,
.panel,
.band-dark {
background: var(--fb-surface);
}
.panel,
.band-dark,
.panel-title,
.band-dark h2,
.band-dark h3 {
color: var(--fb-heading);
}
.panel .muted,
.band-dark .muted,
.band-dark .lead {
color: var(--fb-muted);
}
.card,
.media-frame,
.steps > li {
box-shadow: 0 2px 12px var(--fb-shadow);
}
.btn,
.btn-quiet {
box-shadow: 0 1px 5px var(--fb-shadow);
}
.btn {
color: var(--fb-accent-contrast);
background: var(--fb-accent);
font-size: 19px;
font-weight: 700;
}
.btn:hover {
background: var(--fb-accent);
text-decoration: underline;
text-underline-offset: 4px;
}
.btn-quiet {
color: var(--fb-heading);
background: var(--fb-paper);
border-color: var(--fb-line-strong);
}
.link-arrow,
.breadcrumb,
.contents-links a,
.footer-note a,
.perspective-panel .link-arrow {
color: var(--fb-accent);
font-size: 19px;
font-weight: 700;
}
.link-arrow:hover,
.breadcrumb:hover,
.contents-links a:hover,
.footer-note a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.site-header .sc-nav a:hover,
.site-header .sc-nav a[aria-current],
.site-header .sc-nav a.is-active {
color: var(--fb-accent);
font-size: 19px;
font-weight: 700;
}
.site-header .sc-nav a {
font-size: 19px;
font-weight: 700;
}
.badge,
.panel .badge {
background: var(--fb-surface);
color: var(--fb-heading);
}
.badge-accent,
.panel .badge-accent {
background: var(--fb-accent-wash);
color: var(--fb-accent);
}
.badge-accent.report-status {
font-size: 19px;
font-weight: 700;
line-height: 1.4;
}
.eyebrow {
background: var(--fb-surface);
color: var(--fb-muted);
}
.media-frame::after,
.hero-media::after,
.band-media::after,
.story-media::after,
.bento-tile::after {
background: none;
}
.hero-media::before,
.bento-tile::before {
background: var(--fb-surface);
}
.marquee {
mask-image: none;
}
.media-frame > img {
filter: grayscale(1);
}
.brand-mark,
.brand-mark:has(> svg) {
background: none;
color: var(--fb-accent);
border-radius: 0;
}
.brand-mark svg {
width: 100%;
height: 100%;
}
.site-header {
background: var(--fb-paper);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.panel .task-list > li {
border-top-color: var(--fb-line);
}
.panel .eyebrow {
color: var(--fb-muted);
}
button[data-fb-theme]:hover,
button[data-fb-theme][aria-pressed="true"] {
background: var(--fb-surface);
color: var(--fb-heading);
border-color: var(--fb-line-strong);
}
@media (max-width: 640px) {
.site-header .sc-nav {
gap: 16px;
}
}
/* Keep exact orange readable inside neutral conversation panels. */
.perspective-panel .link-arrow {
background: var(--fb-paper);
border-radius: 12px;
padding: 10px 14px;
width: fit-content;
}
/* Project Architect intelligence and expert conversations. */
.briefing-hero h1 {
font-size: clamp(30px, 3.3vw, 46px);
}
.experts-section {
scroll-margin-top: 120px;
}
.expert-topics {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 0;
margin: 0 0 32px;
list-style: none;
}
.expert-topics li {
padding: 10px 16px;
border: 1px solid var(--fb-line);
border-radius: 999px;
background: var(--fb-surface);
color: var(--fb-heading);
font-size: 14px;
}
.expert-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.expert-card {
gap: 20px;
}
.expert-heading {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
.expert-heading > div:last-child {
display: grid;
gap: 12px;
min-width: 0;
}
.expert-heading h3 {
font-size: 26px;
}
.expert-heading p {
margin: 0;
color: var(--fb-muted);
}
.expert-headshot {
width: 80px;
aspect-ratio: 1;
flex: none;
border-radius: 50%;
background: var(--fb-line);
}
.expert-card .btn {
margin-top: auto;
align-self: flex-start;
white-space: normal;
padding-block: 14px;
}
.architect-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.architect-stats .stat {
gap: 16px;
}
.architect-stats .stat > * {
margin: 0;
}
.architect-stats .stat-value {
font-size: clamp(26px, 2.7vw, 36px);
line-height: 1.15;
}
.architect-report-layout {
padding-top: 56px;
}
.architect-insight-list {
margin: 0;
padding-left: 26px;
display: grid;
gap: 28px;
}
.architect-insight-list li {
padding: 0 0 28px 8px;
border-bottom: 1px solid var(--fb-line);
}
.architect-insight-list li > p {
margin-top: 16px;
}
.report-heading .btn-row,
.report-section .btn-row {
gap: 16px;
}
.report-heading .btn,
.report-heading .btn-quiet,
.report-section .btn-quiet {
white-space: normal;
padding-block: 14px;
}
@media (max-width: 880px) {
.expert-grid {
grid-template-columns: minmax(0, 1fr);
}
.architect-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.briefing-hero h1 {
font-size: clamp(28px, 7.3vw, 40px);
}
.expert-heading {
flex-direction: column;
align-items: flex-start;
}
.expert-card .btn {
width: 100%;
}
.site-header .sc-nav {
gap: 8px 16px;
}
.architect-stats {
grid-template-columns: minmax(0, 1fr);
}
}
/* Author-supplied Snipebridge wordmark, shared header and footer. */
.brand-wordmark {
min-width: 0;
min-height: 44px;
flex-shrink: 0;
}
.brand-wordmark img {
display: block;
height: 32px;
width: auto;
max-width: 100%;
aspect-ratio: 1136 / 300;
object-fit: contain;
}
/* Quello wordmark + footer tagline */
.quello-wordmark {
font-family: var(--fb-font-heading);
font-size: 1.7rem;
font-weight: 400;
font-style: italic;
letter-spacing: -0.02em;
line-height: 1;
color: var(--fb-heading, var(--fb-ink));
}
.powered-by {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--fb-text-xs);
color: var(--fb-muted);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.powered-by-logo {
height: 18px;
width: auto;
}
/* Monthly report subscribe form (Airtable embed) */
.subscribe-cta {
align-items: stretch;
}
.subscribe-frame {
display: block;
width: 100%;
max-width: 680px;
margin: 24px auto 0;
border-radius: var(--fb-radius, 16px);
overflow: hidden;
background: #fff;
}
.subscribe-frame > fb-embed,
.subscribe-frame fb-embed > *,
.subscribe-frame iframe {
display: block;
width: 100% !important;
max-width: 100% !important;
}
/* Final Quello brand. All palette values are owned by the manifest. */
h1,
h2,
h3,
h4,
.panel-title,
.signal strong,
.report-card h3,
.service-row h3 {
font-weight: 400;
}
h1,
h2 {
letter-spacing: -0.03em;
}
h3,
h4 {
letter-spacing: -0.01em;
}
.eyebrow,
.badge,
.report-type,
.stat-label,
.signal span,
.site-header .sc-nav a {
font-family: var(--fb-font-heading);
}
.eyebrow {
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.report-type {
letter-spacing: 0.04em;
}
.badge {
letter-spacing: 0.08em;
}
.report-status {
letter-spacing: 0.04em;
}
.lead,
.stat-label,
.signal span {
color: var(--fb-secondary);
}
.stat-value,
.signal strong,
.timeline time,
.architect-insight-list > li::marker {
font-family: var(--fb-font-mono, "JetBrains Mono", ui-monospace, monospace);
font-variant-numeric: tabular-nums;
font-weight: 400;
letter-spacing: -0.04em;
}
.card,
.takeaway,
.finding-preview,
.steps > li {
background: var(--fb-surface);
}
.btn,
.btn:hover {
background: var(--fb-button);
color: var(--fb-button-ink);
font-weight: 600;
}
.btn-quiet {
border-color: var(--fb-line);
}
.link-arrow,
.breadcrumb,
.contents-links a,
.footer-note a,
.perspective-panel .link-arrow {
color: var(--fb-accent);
font-weight: 600;
}
.site-header .sc-nav a,
.site-header .sc-nav a:hover,
.site-header .sc-nav a[aria-current],
.site-header .sc-nav a.is-active {
font-weight: 500;
}
.signal-strip {
border-block-color: var(--fb-decorative);
}
.methodology {
border-top-color: var(--fb-decorative);
}
.brand-wordmark img.quello-logo {
height: 30px;
width: auto;
max-width: 100%;
aspect-ratio: auto 4 / 1;
object-fit: contain;
filter: none;
}
.brand-wordmark img.quello-logo-light {
display: var(--fb-logo-light-display, block);
}
.brand-wordmark img.quello-logo-dark {
display: var(--fb-logo-dark-display, none);
}
.powered-by {
display: grid;
grid-template-columns: auto auto;
justify-content: start;
align-items: center;
gap: 10px 8px;
min-height: 44px;
}
.footer-tagline {
grid-column: 1 / -1;
color: var(--fb-secondary);
font-family: var(--fb-font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.6;
}
.subscribe-frame {
background: var(--fb-surface);
}
/* ===== Quello Insights: homepage and tools (theme-aware) ===== */
.qhome,
.qjd,
.qrep {
--paper: var(--fb-paper);
--sheet: var(--fb-surface);
--field: color-mix(in srgb, var(--fb-surface) 70%, var(--fb-paper));
--ink: var(--fb-heading);
--ink-2: var(--fb-secondary);
--ink-3: var(--fb-muted);
--rule: var(--fb-line);
--rule-2: color-mix(in srgb, var(--fb-line) 60%, transparent);
--track: color-mix(in srgb, var(--fb-line) 80%, var(--fb-paper));
--accent: var(--fb-button);
--accent-ink: var(--fb-button-ink);
--brand: var(--fb-accent);
--brass: var(--fb-decorative);
--good: var(--fb-good);
--warn: var(--fb-warn);
--bad: var(--fb-bad);
--m-red: var(--fb-bad);
--m-red-bg: color-mix(in srgb, var(--fb-bad) 18%, transparent);
--m-masc: var(--fb-caramel);
--m-masc-bg: color-mix(in srgb, var(--fb-caramel) 16%, transparent);
--m-fem: var(--fb-sage);
--m-fem-bg: color-mix(in srgb, var(--fb-sage) 16%, transparent);
--m-corp: var(--fb-warn);
--m-corp-bg: color-mix(in srgb, var(--fb-warn) 20%, transparent);
--m-req: var(--fb-secondary);
--m-req-bg: color-mix(in srgb, var(--fb-secondary) 16%, transparent);
--font-display: var(--fb-font-heading);
--font-body: var(--fb-font-body);
--font-mono: var(--fb-font-mono);
--logo-l: none;
--logo-d: none;
display: block;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
}
.qhome a:not([style*="color"]) {
color: var(--brand);
}
/* ===== JD Scorer ===== */
.qjd .logo {
height: 28px;
width: auto;
align-self: center;
}
.qjd .logo.l {
display: var(--logo-l);
}
.qjd .logo.d {
display: var(--logo-d);
}
.qjd .tagline {
font-family: var(--font-display);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-3);
}
.qjd * {
box-sizing: border-box;
}
.qjd {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
padding-block: 0 40px;
}
.qjd button,
.qjd select,
.qjd input,
.qjd textarea {
font: inherit;
color: inherit;
}
.qjd :focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.qjd .wrap {
max-width: 1320px;
margin: 0 auto;
}
.qjd header.top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-block: 20px 16px;
border-bottom: 1px solid var(--rule);
}
.qjd .brand {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.qjd .brand .tool {
padding-left: 14px;
border-left: 1px solid var(--rule);
}
.qjd .brand .word {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.02em;
}
.qjd .brand .word span {
color: var(--accent);
}
.qjd .brand .tool {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
color: var(--ink-2);
}
.qjd .brand .by {
font-size: 12px;
color: var(--ink-3);
}
.qjd .titleblock {
display: grid;
grid-template-columns: auto auto auto;
border: 1px solid var(--rule);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.qjd .titleblock div {
padding: 4px 9px;
border-left: 1px solid var(--rule);
}
.qjd .titleblock div:first-child {
border-left: 0;
}
.qjd .titleblock b {
color: var(--ink);
font-weight: 500;
}
.qjd .controls {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
align-items: end;
padding-block: 16px;
}
.qjd .field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.qjd .field label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 500;
}
.qjd select {
appearance: none;
background: var(--sheet)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237E8F8A' stroke-width='1.5'/%3E%3C/svg%3E")
no-repeat right 10px center;
border: 1px solid var(--rule);
border-radius: 6px;
padding: 7px 30px 7px 10px;
min-width: 190px;
max-width: 100%;
}
.qjd .samples {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-left: auto;
align-items: center;
}
.qjd .samples .lbl {
font-size: 12px;
color: var(--ink-3);
}
.qjd .btn {
border: 1px solid var(--rule);
background: var(--sheet);
border-radius: 6px;
padding: 7px 12px;
cursor: pointer;
font-size: 13.5px;
}
.qjd .btn:hover {
border-color: var(--ink-3);
}
.qjd .btn.primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
font-weight: 600;
}
.qjd .btn.primary:hover {
filter: brightness(1.05);
}
.qjd .btn[disabled] {
opacity: 0.55;
cursor: default;
}
.qjd .grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 20px;
align-items: start;
}
@media (max-width: 900px) {
.qjd .grid {
grid-template-columns: minmax(0, 1fr);
}
.qjd .samples {
margin-left: 0;
}
}
.qjd .sheet {
background: var(--sheet);
border: 1px solid var(--rule);
border-radius: 10px;
min-width: 0;
overflow: hidden;
}
.qjd .sheet-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 14px;
border-bottom: 1px solid var(--rule-2);
}
.qjd .legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: 12px;
color: var(--ink-2);
}
.qjd .legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.qjd .legend i {
width: 14px;
height: 10px;
border-radius: 2px;
display: inline-block;
border-bottom: 2px solid;
}
.qjd .lg-red {
background: var(--m-red-bg);
border-color: var(--m-red) !important;
}
.qjd .lg-masc {
background: var(--m-masc-bg);
border-color: var(--m-masc) !important;
}
.qjd .lg-fem {
background: var(--m-fem-bg);
border-color: var(--m-fem) !important;
}
.qjd .lg-corp {
background: var(--m-corp-bg);
border-color: var(--m-corp) !important;
}
.qjd .lg-req {
background: var(--m-req-bg);
border-color: var(--m-req) !important;
}
.qjd .counts {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.qjd .editor {
position: relative;
height: min(68vh, 680px);
min-height: 420px;
}
.qjd .editor .backdrop,
.qjd .editor textarea {
position: absolute;
inset: 0;
margin: 0;
padding: 22px 24px 40px;
border: 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
letter-spacing: 0;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: normal;
tab-size: 4;
scrollbar-gutter: stable;
}
.qjd .editor .backdrop {
overflow: hidden;
color: transparent;
pointer-events: none;
}
.qjd .editor textarea {
overflow-y: auto;
background: transparent;
resize: none;
color: var(--ink);
caret-color: var(--accent);
outline: none;
}
.qjd .editor textarea::placeholder {
color: var(--ink-3);
}
.qjd mark {
color: transparent;
border-radius: 2px;
border-bottom: 2px solid;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: box-shadow 0.2s;
}
.qjd mark.red {
background: var(--m-red-bg);
border-color: var(--m-red);
}
.qjd mark.masc {
background: var(--m-masc-bg);
border-color: var(--m-masc);
}
.qjd mark.fem {
background: var(--m-fem-bg);
border-color: var(--m-fem);
}
.qjd mark.corp {
background: var(--m-corp-bg);
border-color: var(--m-corp);
}
.qjd mark.req {
background: var(--m-req-bg);
border-color: var(--m-req);
}
.qjd mark.cult {
background: var(--m-corp-bg);
border-color: var(--m-corp);
border-bottom-style: dashed;
}
.qjd mark.cultok {
background: transparent;
border-color: var(--good);
border-bottom-style: dotted;
}
.qjd .lg-cultok {
background: transparent;
border-color: var(--good) !important;
border-bottom-style: dotted !important;
}
.qjd mark.flash {
box-shadow: 0 0 0 3px var(--accent);
}
.qjd aside {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
position: sticky;
top: 12px;
}
@media (max-width: 900px) {
.qjd aside {
position: static;
}
}
.qjd .card {
background: var(--sheet);
border: 1px solid var(--rule);
border-radius: 10px;
padding: 16px;
min-width: 0;
}
.qjd .card h3 {
margin: 0 0 10px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
}
.qjd .score {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 16px;
align-items: center;
}
.qjd .gauge {
position: relative;
width: 120px;
height: 120px;
}
.qjd .gauge svg {
width: 120px;
height: 120px;
transform: rotate(-90deg);
}
.qjd .gauge .num {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.qjd .gauge .num b {
font-family: var(--font-display);
font-size: 38px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.qjd .gauge .num small {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.08em;
margin-top: 4px;
}
.qjd .grade {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
margin: 0 0 4px;
text-wrap: balance;
}
.qjd .attract {
font-size: 13.5px;
color: var(--ink-2);
margin: 0;
}
.qjd .attract b {
color: var(--ink);
font-weight: 600;
}
.qjd .pill {
display: inline-block;
font-size: 11.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
margin-top: 8px;
}
.qjd .pill.ok {
background: color-mix(in srgb, var(--good) 16%, transparent);
color: var(--good);
}
.qjd .pill.no {
background: color-mix(in srgb, var(--bad) 14%, transparent);
color: var(--bad);
}
.qjd .dims {
display: flex;
flex-direction: column;
gap: 9px;
}
.qjd .dim {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
gap: 4px 10px;
align-items: center;
font-size: 13.5px;
}
.qjd .dim .bar {
grid-column: 1 / -1;
height: 6px;
background: var(--track);
border-radius: 3px;
overflow: hidden;
}
.qjd .dim .bar i {
display: block;
height: 100%;
border-radius: 3px;
transition: width 0.4s ease;
}
.qjd .dim .v {
font-family: var(--font-mono);
font-size: 12.5px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.qjd .dim .w {
color: var(--ink-3);
font-size: 11.5px;
margin-left: 4px;
}
.qjd .meter {
position: relative;
height: 10px;
border-radius: 5px;
background: linear-gradient(
90deg,
var(--m-masc-bg),
var(--track) 40%,
var(--track) 60%,
var(--m-fem-bg)
);
border: 1px solid var(--rule);
margin: 8px 0 6px;
}
.qjd .meter .center {
position: absolute;
left: 50%;
top: -4px;
bottom: -4px;
width: 1px;
background: var(--ink-3);
}
.qjd .meter .dot {
position: absolute;
top: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ink);
border: 3px solid var(--sheet);
transform: translate(-50%, -50%);
transition: left 0.4s ease;
box-shadow: 0 0 0 1px var(--rule);
}
.qjd .meter-labels {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--ink-2);
}
.qjd .meter-labels b {
font-family: var(--font-mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.qjd .meter-note {
font-size: 12.5px;
color: var(--ink-2);
margin: 8px 0 0;
}
.qjd .issues {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 420px;
overflow-y: auto;
margin: 0 -6px;
padding: 0 6px;
}
.qjd .issue {
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: 10px;
padding: 9px 6px;
border-radius: 6px;
border: 0;
background: none;
text-align: left;
width: 100%;
}
.qjd .issue.jump {
cursor: pointer;
}
.qjd .issue.jump:hover {
background: var(--rule-2);
}
.qjd .issue .sev {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 6px;
}
.qjd .sev.high {
background: var(--bad);
}
.qjd .sev.med {
background: var(--warn);
}
.qjd .sev.low {
background: var(--ink-3);
}
.qjd .sev.good {
background: var(--good);
}
.qjd .issue .t {
font-weight: 600;
font-size: 13.5px;
display: block;
}
.qjd .issue .d {
font-size: 12.5px;
color: var(--ink-2);
display: block;
margin-top: 1px;
}
.qjd .issue .q {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-3);
display: block;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qjd .empty {
font-size: 13px;
color: var(--ink-3);
padding: 6px 0;
}
.qjd .tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.qjd .tab {
border: 1px solid var(--rule);
background: none;
border-radius: 999px;
font-size: 12px;
padding: 3px 10px;
cursor: pointer;
color: var(--ink-2);
}
.qjd .tab[aria-pressed="true"] {
background: var(--ink);
color: var(--sheet);
border-color: var(--ink);
}
.qjd .ai p {
font-size: 13.5px;
margin: 0 0 10px;
}
.qjd .ai .muted {
color: var(--ink-3);
font-size: 12.5px;
}
.qjd .ai-out {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
.qjd .ai-out h4 {
margin: 0 0 6px;
font-size: 12px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
}
.qjd .rw {
border: 1px solid var(--rule-2);
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.qjd .rw .from {
font-size: 12.5px;
color: var(--ink-3);
text-decoration: line-through;
text-decoration-color: var(--accent);
}
.qjd .rw .to {
font-size: 13.5px;
}
.qjd .rw .why {
font-size: 12px;
color: var(--ink-2);
}
.qjd .rw .btn {
align-self: flex-start;
padding: 4px 10px;
font-size: 12.5px;
}
.qjd .ai ul {
margin: 0;
padding-left: 18px;
font-size: 13px;
display: flex;
flex-direction: column;
gap: 4px;
}
.qjd .ai ul span {
color: var(--ink-2);
}
.qjd .thinking {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--ink-2);
margin-top: 10px;
}
.qjd .thinking i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
50% {
opacity: 0.25;
}
}
@media (prefers-reduced-motion: reduce) {
.qjd * {
transition: none !important;
animation: none !important;
}
}
.qjd footer {
margin-top: 22px;
font-size: 12px;
color: var(--ink-3);
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
/* ===== Reputation Check ===== */
.qrep .logo {
height: 28px;
width: auto;
align-self: center;
}
.qrep .logo.l {
display: var(--logo-l);
}
.qrep .logo.d {
display: var(--logo-d);
}
.qrep .tagline {
font-family: var(--font-display);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-3);
}
.qrep * {
box-sizing: border-box;
}
.qrep {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
padding-block: 0 48px;
}
.qrep button,
.qrep input,
.qrep textarea {
font: inherit;
color: inherit;
}
.qrep :focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.qrep .wrap {
max-width: 1240px;
margin: 0 auto;
}
.qrep header.top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-block: 20px 16px;
border-bottom: 1px solid var(--rule);
}
.qrep .brand {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.qrep .brand .crumbs {
padding-left: 14px;
border-left: 1px solid var(--rule);
}
.qrep .brand .word {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.02em;
}
.qrep .brand .word span {
color: var(--accent);
}
.qrep .crumbs {
font-size: 13.5px;
color: var(--ink-2);
}
.qrep .crumbs b {
color: var(--ink);
font-weight: 600;
}
.qrep .by {
font-size: 12px;
color: var(--ink-3);
}
.qrep .intro {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: end;
gap: 16px;
padding-block: 28px 20px;
}
.qrep .intro h1 {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(30px, 4vw, 42px);
letter-spacing: -0.025em;
line-height: 1.05;
text-wrap: balance;
}
.qrep .intro p {
margin: 8px 0 0;
color: var(--ink-2);
max-width: 620px;
}
.qrep .actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.qrep .btn {
border: 1px solid var(--rule);
background: var(--sheet);
border-radius: 6px;
padding: 8px 13px;
cursor: pointer;
font-size: 13.5px;
}
.qrep .btn:hover {
border-color: var(--ink-3);
}
.qrep .btn.primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
font-weight: 600;
}
.qrep .btn[disabled] {
opacity: 0.55;
cursor: default;
}
.qrep .grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 20px;
align-items: start;
}
@media (max-width: 920px) {
.qrep .grid {
grid-template-columns: minmax(0, 1fr);
}
}
.qrep .col {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.qrep .card {
background: var(--sheet);
border: 1px solid var(--rule);
border-radius: 10px;
padding: 18px;
min-width: 0;
}
.qrep .card h2 {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.qrep .card h2 a {
font-family: var(--font-body);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
font-size: 12.5px;
color: var(--brand);
}
.qrep .ex {
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
.qrep label.f {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 500;
min-width: 0;
}
.qrep input,
.qrep textarea {
width: 100%;
min-width: 0;
border: 1px solid var(--rule);
background: var(--field);
border-radius: 6px;
padding: 7px 9px;
font-size: 14px;
text-transform: none;
letter-spacing: 0;
}
.qrep input:focus,
.qrep textarea:focus {
border-color: var(--brand);
outline: none;
}
.qrep input[type="number"] {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.qrep textarea {
resize: vertical;
min-height: 120px;
line-height: 1.55;
}
.qrep .row {
display: grid;
gap: 10px;
}
.qrep .r2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qrep .r3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 460px) {
.qrep .r3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.qrep .parse {
font-size: 12.5px;
min-height: 18px;
margin-top: 4px;
}
.qrep .parse.ok {
color: var(--good);
}
.qrep .parse.bad {
color: var(--bad);
}
.qrep .sub {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--rule);
}
.qrep .sub summary {
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
list-style: none;
}
.qrep .sub summary::-webkit-details-marker {
display: none;
}
.qrep .sub summary::before {
content: "+ ";
color: var(--brand);
}
.qrep .sub[open] summary::before {
content: "– ";
}
.qrep .sub .row {
margin-top: 10px;
}
.qrep .hint {
font-size: 12.5px;
color: var(--ink-3);
margin: 0 0 10px;
}
.qrep .verdict {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 18px;
align-items: center;
}
.qrep .big {
font-family: var(--font-display);
font-weight: 500;
font-size: 56px;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.qrep .big small {
font-size: 18px;
color: var(--ink-3);
font-weight: 500;
margin-left: 2px;
}
.qrep .tier {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
margin: 0;
}
.qrep .meta {
font-size: 13.5px;
color: var(--ink-2);
margin: 2px 0 0;
}
.qrep .chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.qrep .chip {
font-size: 12px;
font-weight: 600;
padding: 2px 9px;
border-radius: 999px;
}
.qrep .chip.good {
background: color-mix(in srgb, var(--good) 15%, transparent);
color: var(--good);
}
.qrep .chip.warn {
background: color-mix(in srgb, var(--warn) 17%, transparent);
color: var(--warn);
}
.qrep .chip.bad {
background: color-mix(in srgb, var(--bad) 14%, transparent);
color: var(--bad);
}
.qrep .chip.mute {
background: var(--rule-2);
color: var(--ink-2);
}
.qrep .tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.qrep .tile {
border: 1px solid var(--rule-2);
border-radius: 8px;
padding: 10px 12px;
}
.qrep .tile small {
display: block;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.qrep .tile b {
font-family: var(--font-display);
font-size: 26px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.qrep .tile span {
display: block;
font-size: 12.5px;
color: var(--ink-2);
}
.qrep .themes {
display: flex;
flex-direction: column;
gap: 12px;
}
.qrep .theme {
display: grid;
grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 40px;
gap: 12px;
align-items: center;
font-size: 14px;
}
.qrep .theme .bar {
position: relative;
height: 10px;
background: var(--track);
border-radius: 5px;
}
.qrep .theme .bar i {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: 5px;
transition: width 0.4s ease;
}
.qrep .theme .bar .tick {
position: absolute;
top: -3px;
bottom: -3px;
width: 1px;
background: var(--ink-3);
opacity: 0.6;
}
.qrep .theme .v {
font-family: var(--font-mono);
font-size: 13px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.qrep .theme.na {
color: var(--ink-3);
}
.qrep .scale {
display: grid;
grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 40px;
gap: 12px;
font-size: 11px;
color: var(--ink-3);
font-family: var(--font-mono);
}
.qrep .scale div {
display: flex;
justify-content: space-between;
}
@media (max-width: 460px) {
.qrep .theme,
.qrep .scale {
grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 36px;
}
}
.qrep .items {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 -6px;
}
.qrep .item {
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: 10px;
padding: 9px 6px;
border-radius: 6px;
}
.qrep .item .sev {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 7px;
}
.qrep .sev.high {
background: var(--bad);
}
.qrep .sev.med {
background: var(--warn);
}
.qrep .sev.low {
background: var(--ink-3);
}
.qrep .sev.good {
background: var(--good);
}
.qrep .item .t {
font-weight: 600;
font-size: 14px;
display: block;
}
.qrep .item .d {
font-size: 13px;
color: var(--ink-2);
display: block;
margin-top: 1px;
}
.qrep .item ul {
margin: 6px 0 0;
padding-left: 18px;
font-size: 13px;
color: var(--ink-2);
display: flex;
flex-direction: column;
gap: 3px;
}
.qrep .empty {
font-size: 13.5px;
color: var(--ink-3);
margin: 0;
}
.qrep .ai p {
font-size: 14px;
margin: 0 0 10px;
}
.qrep .ai .muted {
color: var(--ink-3);
font-size: 12.5px;
}
.qrep .draft {
border: 1px solid var(--rule-2);
border-radius: 8px;
padding: 12px;
font-size: 14.5px;
line-height: 1.6;
margin-top: 12px;
white-space: pre-wrap;
}
.qrep .thinking {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--ink-2);
margin-top: 10px;
}
.qrep .thinking i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
50% {
opacity: 0.25;
}
}
@media (prefers-reduced-motion: reduce) {
.qrep * {
transition: none !important;
animation: none !important;
}
}
.qrep .cta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.qrep .cta b {
font-family: var(--font-display);
font-size: 17px;
}
.qrep .cta span {
display: block;
font-size: 13.5px;
color: var(--ink-2);
}
.qrep footer {
margin-top: 22px;
font-size: 12px;
color: var(--ink-3);
}
/* Tools: no site arrow on tool buttons */
.qjd .btn::after,
.qrep .btn::after,
.qjd .btn::before,
.qrep .btn::before {
content: none !important;
display: none !important;
}
.qjd .btn,
.qrep .btn {
gap: 0;
}
/* ===== Quello brand fonts (self-hosted, OFL) ===== */
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/ee5203b4-6302-461b-917e-95e839407063/jost-latin-300-normal.woff2")
format("woff2");
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/8853f193-b3fe-4c5a-9d31-c9539285bbae/jost-latin-400-normal.woff2")
format("woff2");
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/1198d045-9eea-468f-bac6-cdec7eeb8602/jost-latin-500-normal.woff2")
format("woff2");
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/fd2df052-6d8e-4ca3-bfd0-28a3c7e5f3fe/figtree-latin-400-normal.woff2")
format("woff2");
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/d935cb70-8312-4603-960f-f8efe4b388db/figtree-latin-500-normal.woff2")
format("woff2");
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/4261d6ff-7d15-46e2-b4ac-e78270ad6837/figtree-latin-600-normal.woff2")
format("woff2");
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/c7042feb-90d8-47ea-818f-bfec5988d4d3/figtree-latin-700-normal.woff2")
format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/0d9f009c-8935-4c6a-8ffb-46d5498934ae/ibm-plex-mono-latin-400-normal.woff2")
format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://app.thefusebase.com/box/file/df85fc57-f95f-4cd6-85a0-a87edd14f81a/ibm-plex-mono-latin-500-normal.woff2")
format("woff2");
}
html:root:root {
--fb-font-heading: "Jost", "Futura", "Century Gothic", Arial, sans-serif;
--fb-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
--fb-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
.qhome h1,
.qhome h2 {
font-weight: 400 !important;
letter-spacing: -0.02em;
}
.qhome h3,
.qhome article b {
font-weight: 500;
}
/* ===== Quello dropdown menu ===== */
.site-header-inner {
flex-wrap: wrap;
}
.q-menu {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 4px;
font-family: var(--fb-font-body);
font-size: 15px;
}
.q-menu-link,
.q-dd-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: none;
color: var(--fb-heading);
font: inherit;
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.q-dd-btn::after {
content: "";
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: 0.6;
}
.q-menu-link:hover,
.q-dd-btn:hover,
.q-dd:focus-within .q-dd-btn {
background: color-mix(in srgb, var(--fb-heading) 7%, transparent);
}
.q-menu-link:focus-visible,
.q-dd-btn:focus-visible,
.q-dd-panel a:focus-visible {
outline: 2px solid var(--fb-accent);
outline-offset: 2px;
}
.q-dd {
position: relative;
}
.q-dd-panel {
position: absolute;
top: 100%;
left: 0;
z-index: 50;
min-width: 220px;
margin-top: 6px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
background: var(--fb-surface);
border: 1px solid var(--fb-line);
border-radius: 12px;
box-shadow: 0 14px 36px rgba(20, 14, 8, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition:
opacity 0.15s ease,
transform 0.15s ease,
visibility 0.15s;
}
.q-dd-panel::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
}
.q-dd:last-child .q-dd-panel {
left: auto;
right: 0;
}
.q-dd:hover .q-dd-panel,
.q-dd:focus-within .q-dd-panel {
opacity: 1;
visibility: visible;
transform: none;
}
.q-dd-panel a {
display: block;
padding: 10px 12px;
border-radius: 8px;
color: var(--fb-heading);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.q-dd-panel a:hover {
background: color-mix(in srgb, var(--fb-accent) 10%, transparent);
color: var(--fb-accent);
}
@media (max-width: 820px) {
.q-menu {
order: 3;
width: 100%;
justify-content: flex-start;
font-size: 14px;
}
.q-menu-link,
.q-dd-btn {
padding: 0 9px;
}
.q-dd:last-child .q-dd-panel {
left: 0;
right: auto;
}
}
@media (max-width: 480px) {
.q-dd-panel {
position: fixed;
left: 16px;
right: 16px;
top: auto;
min-width: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.q-dd-panel {
transition: none;
}
}
/* Homepage status tags stay on one line */
.qhome a > span[style*="999px"] {
white-space: nowrap;
flex-shrink: 0;
}
/* Transparent Quello identity and single-row responsive header. */
.site-header-inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: clamp(8px, 1.4vw, 20px);
min-height: 72px;
padding-block: 12px;
}
.site-header .brand-wordmark,
.site-footer .brand-wordmark {
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
width: auto;
}
.site-header .brand-wordmark {
flex: 0 0 auto;
}
.brand-wordmark img.quello-logo {
height: 30px;
width: auto;
max-width: 100%;
aspect-ratio: auto 4 / 1;
object-fit: contain;
background: transparent;
border: 0;
box-shadow: none;
--fb-image-placeholder: transparent;
}
.quello-navigation {
min-width: 0;
margin-left: auto;
}
.site-header .q-menu {
flex-wrap: nowrap;
gap: 2px;
}
.site-header .q-menu > .sc-nav {
width: auto;
order: initial;
flex-wrap: nowrap;
gap: 0;
}
.site-header .q-menu > .sc-nav a,
.site-header .q-dd-btn {
font-family: var(--fb-font-body);
font-size: clamp(12px, 1.1vw, 15px);
font-weight: 500;
white-space: nowrap;
color: var(--fb-heading);
min-height: 44px;
padding-inline: clamp(6px, 0.7vw, 10px);
}
.site-header .q-dd-panel .sc-nav {
display: flex;
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: 4px;
width: auto;
order: initial;
}
.site-header .q-dd-panel .sc-nav a {
font-size: 15px;
font-weight: 500;
min-height: 44px;
width: 100%;
white-space: normal;
padding: 10px 12px;
color: var(--fb-heading);
}
.site-header .q-dd-panel .sc-nav a:hover,
.site-header .q-menu > .sc-nav a:hover {
color: var(--fb-accent);
}
.site-header .header-actions {
flex: 0 0 auto;
gap: 4px;
}
.quello-menu-toggle {
display: none;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 8px 10px;
border: 1px solid var(--fb-line-strong);
border-radius: 8px;
background: var(--fb-paper);
color: var(--fb-heading);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.btn:hover {
background: var(--fb-button-hover);
color: var(--fb-button-ink);
}
.badge-accent,
.panel .badge-accent {
background: var(--fb-status-fill);
color: var(--fb-status-ink);
}
.quello-small-mark-dark {
height: 24px;
width: auto;
object-fit: contain;
}
@media (max-width: 899px) {
.site-header-inner {
position: relative;
min-height: 68px;
gap: 8px;
}
.site-header .brand-wordmark img.quello-logo {
height: 24px;
}
.site-header .quello-menu-toggle {
display: inline-flex;
}
.site-header .q-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
width: 100%;
max-width: 100%;
max-height: 75vh;
overflow-y: auto;
padding: 16px;
border: 1px solid var(--fb-line);
border-radius: 12px;
background: var(--fb-paper);
flex-direction: column;
align-items: stretch;
gap: 12px;
box-shadow: 0 8px 24px var(--fb-shadow);
}
html[data-fb-menu="true"] .site-header .q-menu,
html[data-fb-menu="on"] .site-header .q-menu,
html[data-fb-menu="open"] .site-header .q-menu {
display: flex;
}
.site-header .q-menu > .sc-nav {
display: flex;
flex-direction: column;
align-items: stretch;
}
.site-header .q-menu > .sc-nav a,
.site-header .q-dd-btn {
font-size: 15px;
padding-inline: 10px;
}
.site-header .q-dd-panel,
.site-header .q-dd:last-child .q-dd-panel {
position: static;
inset: auto;
min-width: 0;
margin-top: 4px;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
}
.site-header .q-dd-panel::before {
display: none;
}
.site-header .header-actions button[data-fb-theme] {
padding-inline: 8px;
}
}
/* Theme-safe tool button text and status surfaces. */
.qjd .btn:not(.primary),
.qrep .btn:not(.primary) {
color: var(--ink);
}
.qjd .btn.primary:hover,
.qrep .btn.primary:hover {
background: var(--fb-button-hover);
color: var(--accent-ink);
}
.qjd .pill.ok,
.qjd .pill.no,
.qrep .chip.good,
.qrep .chip.warn,
.qrep .chip.bad {
background: var(--fb-status-fill);
color: var(--fb-status-ink);
}
.qhome [style*="background: var(--rule)"][style*="999px"] {
color: var(--fb-heading) !important;
}
/* Browser review: accessible input focus and touch targets, scoped to tools. */
.qjd select,
.qrep input {
min-height: 44px;
}
.qjd .editor textarea:focus-visible,
.qrep input:focus-visible,
.qrep textarea:focus-visible {
outline: 3px solid var(--fb-focus);
outline-offset: -3px;
box-shadow: inset 0 0 0 1px var(--fb-focus);
}
.qrep .sub summary {
display: flex;
align-items: center;
min-height: 44px;
}
.qhome #talent article > a,
.qhome #reports > div > a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
@media (max-width: 640px) {
.qhome #top h1 {
font-size: clamp(32px, 9vw, 42px) !important;
}
}
/* JD example phrase highlights: palette-owned ink, unchanged in Light. */
:is(.qhome, .qjd, .qrep)
span[style*="background: var(--fb-accent-wash)"][style*="border-bottom:"] {
color: var(--fb-jd-highlight-ink, inherit);
}
/* Homepage subscription: compact report sign-up band. */
.qhome #subscribe .q-subscribe-band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--fb-space-5, 24px);
padding: 32px;
background: var(--sheet);
border: 1px solid var(--rule);
border-radius: 14px;
}
.qhome #subscribe .q-subscribe-copy {
display: flex;
flex-direction: column;
gap: var(--fb-space-3, 12px);
min-width: 0;
}
.qhome #subscribe .q-subscribe-copy > * {
margin: 0;
}
.qhome #subscribe .q-subscribe-copy h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 1.3;
}
.qhome #subscribe .q-subscribe-copy p {
color: var(--ink-2);
}
.qhome #subscribe a.q-subscribe-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 14px 22px;
border-radius: 8px;
background: var(--accent);
color: var(--accent-ink);
font-weight: 600;
text-decoration: none;
}
.qhome #subscribe a.q-subscribe-button:hover {
background: var(--fb-button-hover);
}
@media (max-width: 640px) {
.qhome #subscribe .q-subscribe-band {
padding: 20px;
}
.qhome #subscribe a.q-subscribe-button {
width: 100%;
}
}
/* Dedicated report subscription page. */
.q-get-reports {
padding: clamp(40px, 6vw, 72px) var(--gutter);
}
.q-get-reports .q-reports-signup {
width: 100%;
max-width: 760px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 32px;
min-width: 0;
}
.q-get-reports .q-reports-signup-intro {
display: flex;
flex-direction: column;
gap: var(--fb-space-3, 12px);
min-width: 0;
}
.q-get-reports .q-reports-signup-intro > * {
margin: 0;
}
.q-get-reports .q-reports-signup-eyebrow {
font-family: var(--fb-font-mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--fb-accent);
}
.q-get-reports h1 {
font-size: clamp(36px, 5vw, 52px);
line-height: 1.1;
}
.q-get-reports .q-reports-signup-intro p {
color: var(--fb-secondary);
}
.q-get-reports .q-reports-signup-card {
width: 100%;
max-width: min(760px, 100%);
margin-inline: auto;
min-width: 0;
background: #faf7f1;
border: 1px solid #ddd4c6;
border-radius: 12px;
}
.q-get-reports .q-reports-signup-card fb-embed,
.q-get-reports .q-reports-signup-card iframe {
display: block;
width: 100%;
max-width: 100%;
border: 0;
border-radius: 12px;
background: transparent;
}
/* Report subscription fallback: preferences and external sign-up action. */
.q-get-reports .q-reports-signup-options {
display: flex;
flex-direction: column;
gap: var(--fb-space-5, 24px);
min-width: 0;
}
.q-get-reports .q-reports-signup-options ul {
display: grid;
gap: var(--fb-space-3, 12px);
margin: 0;
padding-left: 22px;
}
.q-get-reports .q-reports-signup-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--fb-space-3, 12px);
min-width: 0;
}
.q-get-reports .q-reports-signup-actions > * {
margin: 0;
}
.q-get-reports .q-reports-signup-actions .btn {
max-width: 100%;
white-space: normal;
padding-block: 14px;
text-align: center;
}
.q-get-reports .q-reports-signup-actions p {
font-size: 13px;
}
/* NYC BIM report: theme-matched data tables with labeled mobile rows. */
.nyc-bim-report .nyc-bim-subline {
max-width: 46rem;
color: var(--fb-secondary);
}
.nyc-bim-report .nyc-bim-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 14px;
}
.nyc-bim-report .nyc-bim-table th,
.nyc-bim-report .nyc-bim-table td {
padding: 14px 10px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--fb-line);
overflow-wrap: anywhere;
}
.nyc-bim-report .nyc-bim-table thead th {
background: var(--fb-surface);
color: var(--fb-heading);
font-weight: 600;
}
.nyc-bim-report .nyc-bim-table th:first-child {
width: 34%;
}
.nyc-bim-report .nyc-bim-table tbody th {
font-weight: 500;
}
.nyc-bim-report .nyc-bim-table td {
font-family: var(--fb-font-mono);
font-variant-numeric: tabular-nums;
}
.nyc-bim-report .callout {
margin-bottom: 0;
}
@media (max-width: 640px) {
.nyc-bim-report .nyc-bim-table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
}
.nyc-bim-report .nyc-bim-table,
.nyc-bim-report .nyc-bim-table tbody {
display: block;
}
.nyc-bim-report .nyc-bim-table tbody tr {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
padding-block: 18px;
border-bottom: 1px solid var(--fb-line);
}
.nyc-bim-report .nyc-bim-table tbody th {
grid-column: 1 / -1;
width: auto;
}
.nyc-bim-report .nyc-bim-table tbody th,
.nyc-bim-report .nyc-bim-table tbody td {
display: block;
min-width: 0;
padding: 0;
border: 0;
}
.nyc-bim-report .nyc-bim-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 6px;
font-family: var(--fb-font-body);
color: var(--fb-secondary);
font-size: 12px;
}
}
/* Review fixes limited to the NYC report and its library card. */
.nyc-bim-report .report-status,
[data-fb-id="library-nyc-bim"] .report-status {
background: var(--fb-surface);
color: var(--fb-heading);
}
@media (max-width: 640px) {
.nyc-bim-report .nyc-bim-table thead {
display: none;
}
}
/* Distinct product availability, shared by both visitor palettes. */
.badge.report-status,
.nyc-bim-report .report-status,
[data-fb-id="library-nyc-bim"] .report-status,
.q-status-live {
background: var(--fb-status-live-fill);
color: var(--fb-status-live-ink);
}
.badge.q-status-next,
.qhome .q-status-next {
background: var(--fb-status-next-fill);
color: var(--fb-status-next-ink);
}
.badge.q-status-beta,
.qhome .q-status-beta {
background: var(--fb-status-beta-fill);
color: var(--fb-status-beta-ink);
}
.badge.q-status-planned,
.qhome .q-status-planned {
background: transparent;
color: var(--fb-status-planned-ink);
border: 1px solid var(--fb-status-planned-ink);
}
.qhome .q-neon-yellow {
background: #fff01f;
color: #1a1a1a;
}
.qhome .q-neon-pink {
background: #ff4fd8;
color: #1a1a1a;
}
.qhome .q-neon-green {
background: #39ff14;
color: #1a1a1a;
}
.qhome #firms .q-launch-button,
.qhome #talent .q-launch-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
max-width: 100%;
padding: 10px 14px;
border-radius: 8px;
background: var(--accent);
color: var(--accent-ink);
font-size: 13.5px;
font-weight: 600;
text-align: center;
text-decoration: none;
white-space: normal;
margin-top: 12px;
}
.qhome #firms .q-launch-button:hover,
.qhome #talent .q-launch-button:hover {
background: var(--fb-button-hover);
}
.qhome #talent .q-talent-title-link {
color: inherit;
text-decoration: none;
}
.qhome #talent .q-talent-title-link:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.qhome #talent article > .q-launch-button {
margin-top: auto;
}
.qhome #firms .q-tool-title-link {
color: inherit;
text-decoration: none;
}
.qhome #firms .q-tool-title-link:hover {
text-decoration: underline;
}
.qjd .q-launch-notification,
.qrep .q-launch-notification {
padding-block: 24px;
}
.q-talent-launch .hero-copy {
max-width: 52rem;
}
.q-talent-launch .btn {
white-space: normal;
padding-block: 14px;
}
@media (max-width: 640px) {
.q-talent-launch h1 {
font-size: clamp(32px, 8vw, 44px);
}
}
/* Existing employer tool rows, with separate notification actions. */
.qhome #firms .q-employer-tool-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--rule);
color: var(--ink);
}
.qhome #firms .q-employer-tool-row.q-last-row {
border-bottom: 0;
}
.qhome #firms .q-tool-row-copy {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.qhome #firms .q-tool-row-description {
font-size: 13.5px;
color: var(--ink-2);
}
.qhome #firms .q-tool-row-status {
align-self: flex-start;
flex-shrink: 0;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.qhome #firms .q-tool-row-copy .q-launch-button {
margin-top: 12px;
}
/* Review corrections for sand-surface badges, title targets and talent menu width. */
.qhome .q-status-planned {
color: var(--fb-status-planned-text);
}
.qhome #firms .q-tool-title-link {
display: inline-flex;
align-items: center;
min-height: 44px;
min-width: 44px;
}
.site-header [data-fb-id="header-for-talent-menu"] .q-dd-panel {
min-width: 280px;
}
.site-header [data-fb-id="header-for-talent-menu"] .sc-nav,
.site-header [data-fb-id="header-for-talent-menu"] .sc-nav-item {
width: 100%;
min-width: 0;
}
@media (max-width: 899px) {
.site-header [data-fb-id="header-for-talent-menu"] {
width: 100%;
min-width: 0;
}
.site-header [data-fb-id="header-for-talent-menu"] .q-dd-panel {
width: 100%;
min-width: 0;
max-width: 100%;
}
.site-header [data-fb-id="header-for-talent-menu"] .sc-nav a {
flex: none;
max-width: 100%;
}
}
/* US BIM report: existing report styling and responsive six-column tables. */
.us-bim-report .us-bim-subline {
max-width: 46rem;
color: var(--fb-secondary);
}
.us-bim-report .us-bim-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 14px;
}
.us-bim-report .us-bim-table th,
.us-bim-report .us-bim-table td {
padding: 14px 8px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--fb-line);
overflow-wrap: anywhere;
}
.us-bim-report .us-bim-table thead th {
background: var(--fb-surface);
color: var(--fb-heading);
font-weight: 600;
}
.us-bim-report .us-bim-table th:first-child {
width: 25%;
}
.us-bim-report .us-bim-table tbody th {
font-weight: 500;
}
.us-bim-report .us-bim-table td {
font-family: var(--fb-font-mono);
font-variant-numeric: tabular-nums;
}
.us-bim-report .us-bim-table td[data-label="Hiring demand"] {
font-family: var(--fb-font-body);
}
.us-bim-report .callout {
margin-bottom: 0;
}
@media (max-width: 640px) {
.us-bim-report .us-bim-table thead {
display: none;
}
.us-bim-report .us-bim-table,
.us-bim-report .us-bim-table tbody {
display: block;
}
.us-bim-report .us-bim-table tbody tr {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
padding-block: 18px;
border-bottom: 1px solid var(--fb-line);
}
.us-bim-report .us-bim-table tbody th {
grid-column: 1 / -1;
width: auto;
}
.us-bim-report .us-bim-table tbody th,
.us-bim-report .us-bim-table tbody td {
display: block;
min-width: 0;
padding: 0;
border: 0;
}
.us-bim-report .us-bim-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 6px;
font-family: var(--fb-font-body);
color: var(--fb-secondary);
font-size: 12px;
}
}
/* Keep US BIM row headings full-width in the labeled phone layout. */
@media (max-width: 640px) {
.us-bim-report .us-bim-table tbody th:first-child {
width: auto;
}
}
/* JD Scorer only: lighter panels, paired columns and neon phrase categories. */
.qjd .sheet,
.qjd .card {
background: var(--fb-jd-box-fill, #ffffff);
border: 1px solid var(--fb-jd-box-border, #ddd4c6);
}
.qjd .jd-input-column {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.qjd .q-launch-notification {
padding-block: 24px 8px;
}
.qjd .q-launch-notification .btn {
min-height: 48px;
padding: 12px 22px;
font-size: 16px;
max-width: 100%;
white-space: normal;
}
.qjd {
--m-red-bg: #ff4fd8;
--m-masc-bg: #ff4fd8;
--m-fem-bg: #39ff14;
--m-corp-bg: #fff01f;
--m-req-bg: #fff01f;
--m-red: #1a1a1a;
--m-masc: #1a1a1a;
--m-fem: #1a1a1a;
--m-corp: #1a1a1a;
--m-req: #1a1a1a;
}
.qjd mark {
color: #1a1a1a;
-webkit-text-fill-color: #1a1a1a;
}
.qjd mark.cultok,
.qjd .lg-cultok {
background: #39ff14;
border-color: #1a1a1a !important;
}
.qjd .editor .backdrop {
color: var(--ink);
}
/* The backdrop renders all text; the transparent textarea retains editing,
selection, scrolling and caret without ivory glyphs over neon in Dark. */
.qjd .editor textarea {
color: transparent;
-webkit-text-fill-color: transparent;
caret-color: var(--ink);
}
.qjd .editor textarea::placeholder {
color: var(--ink-3);
-webkit-text-fill-color: var(--ink-3);
}
.qjd .editor textarea::selection {
color: transparent;
-webkit-text-fill-color: transparent;
background: color-mix(in srgb, var(--fb-focus) 25%, transparent);
}
.qjd .issue .q {
width: fit-content;
max-width: 100%;
background: #fff01f;
color: #1a1a1a;
padding-inline: 3px;
border-radius: 2px;
}
.qjd .issue.red .q,
.qjd .issue.masc .q {
background: #ff4fd8;
}
.qjd .issue.fem .q,
.qjd .issue.cultok .q {
background: #39ff14;
}
@media (max-width: 900px) {
.qjd .grid {
grid-template-columns: minmax(0, 1fr);
}
.qjd aside {
position: static;
}
}
/* Reputation Check: static launch teaser only. */
.qrep.qrep-teaser {
padding-block: clamp(32px, 5vw, 64px) 56px;
}
.qrep.qrep-teaser .qrep-teaser-content {
max-width: 760px;
display: flex;
flex-direction: column;
gap: 36px;
min-width: 0;
}
.qrep.qrep-teaser .qrep-teaser-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--fb-space-3, 12px);
min-width: 0;
}
.qrep.qrep-teaser .qrep-teaser-intro > * {
margin: 0;
}
.qrep.qrep-teaser .qrep-teaser-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--ink-2);
}
.qrep.qrep-teaser h1 {
font-size: clamp(36px, 5vw, 52px);
line-height: 1.1;
}
.qrep.qrep-teaser .qrep-teaser-description {
max-width: 40rem;
color: var(--ink-2);
font-size: 17px;
line-height: 1.6;
}
.qrep.qrep-teaser .qrep-teaser-intro .btn {
margin-top: var(--fb-space-5, 24px);
min-height: 48px;
padding: 12px 22px;
font-size: 16px;
white-space: normal;
text-align: center;
max-width: 100%;
}
.qrep.qrep-teaser .q-status-next {
background: var(--fb-status-next-fill);
color: var(--fb-status-next-ink);
text-transform: none;
letter-spacing: 0;
}
.qrep.qrep-teaser .qrep-static-preview {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: clamp(20px, 4vw, 32px);
}
.qrep.qrep-teaser .qrep-static-preview > * {
margin: 0;
}
.qrep.qrep-teaser .qrep-static-preview h2 {
font-size: 18px;
line-height: 1.4;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
}
.qrep.qrep-teaser .qrep-static-preview h3 {
font-size: 26px;
line-height: 1.3;
}
.qrep.qrep-teaser .qrep-preview-label {
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
border: 1px solid var(--rule);
border-radius: 999px;
padding: 4px 10px;
}
.qrep.qrep-teaser .qrep-fiction-note {
font-size: 13px;
color: var(--ink-2);
}
.qrep.qrep-teaser .qrep-preview-snippet {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 32px;
color: var(--ink-2);
min-width: 0;
}
.qrep.qrep-teaser .qrep-preview-snippet > * {
margin: 0;
}
.qrep.qrep-teaser .qrep-preview-snippet::after {
content: "";
position: absolute;
inset: 35% 0 0;
background: linear-gradient(to bottom, transparent, var(--sheet));
pointer-events: none;
}
@media (max-width: 640px) {
.qrep.qrep-teaser .qrep-teaser-intro .btn {
width: 100%;
}
}
/* JD Scorer only: beta notice and unavailable AI presentation. */
.qjd .q-launch-notification.jd-beta-banner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px 16px;
margin-top: 16px;
padding: 14px 16px;
border: 1px solid color-mix(in srgb, var(--fb-status-beta-fill) 55%, var(--rule));
border-radius: 10px;
background: color-mix(in srgb, var(--fb-status-beta-fill) 12%, var(--paper));
color: var(--ink);
}
.qjd .jd-beta-banner > * {
margin: 0;
min-width: 0;
}
.qjd .jd-beta-banner p {
font-size: 14px;
line-height: 1.5;
}
.qjd .jd-beta-banner .badge {
background: var(--fb-status-beta-fill);
color: var(--fb-status-beta-ink);
}
.qjd .jd-beta-banner .btn {
min-height: 44px;
padding: 10px 16px;
font-size: 14px;
white-space: nowrap;
}
.qjd .jd-coming-soon-pill {
align-self: flex-start;
display: inline-flex;
padding: 6px 12px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--field);
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
cursor: default;
}
.qjd #aiBtn,
.qjd #aiNote,
.qjd #aiOut {
display: none !important;
}
.qjd .jd-score-disclaimer {
margin: 0;
padding-inline: 4px;
font-size: 12px;
line-height: 1.5;
color: var(--ink-2);
}
@media (max-width: 720px) {
.qjd .q-launch-notification.jd-beta-banner {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
}
.qjd .jd-beta-banner .btn {
grid-column: 2;
justify-self: end;
}
}
/* Four talent tools: balanced desktop pairs, stacked phone cards. */
.qhome #talent .q-talent-four-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qhome #talent .q-talent-four-cards > article,
.qhome #talent .q-talent-four-cards h3 {
min-width: 0;
}
.qhome #talent .q-talent-four-cards .q-talent-title-link {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.q-salary-launch .q-salary-benefits {
display: grid;
gap: var(--fb-space-3, 12px);
margin: 0;
padding-left: 22px;
color: var(--fb-secondary);
max-width: 38rem;
}
.q-salary-launch .q-salary-benefits > li {
margin: 0;
}
@media (max-width: 720px) {
.qhome #talent .q-talent-four-cards {
grid-template-columns: minmax(0, 1fr);
}
}
/* Shared footer: primary report subscription and outlined feedback action. */
.site-footer .footer-feedback-actions {
display: flex;
flex-direction: column;
gap: var(--fb-space-3, 12px);
min-width: 0;
max-width: 100%;
}
.site-footer .footer-feedback-prompt {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--fb-secondary);
}
.site-footer .footer-button-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
min-width: 0;
}
.site-footer .footer-button-row > a {
margin: 0;
min-width: 0;
max-width: 100%;
font-size: var(--fb-text-sm);
padding: 12px 20px;
}
.site-footer .footer-reports-button::after {
content: none;
}
.site-footer .footer-feedback-button {
background: transparent;
}
@media (max-width: 640px) {
.site-footer .footer-feedback-actions {
width: 100%;
}
.site-footer .footer-button-row {
flex-direction: column;
}
.site-footer .footer-button-row > a {
width: 100%;
}
}
/* JD Scorer: compact beta guidance banner only. */
.qjd .q-launch-notification.jd-beta-banner {
padding: 7px 8px;
gap: 8px;
}
.qjd .jd-beta-banner p {
font-size: 13px;
line-height: 1.4;
}
.qjd .jd-beta-banner .badge {
padding: 2px 7px;
font-size: 10px;
line-height: 1.4;
}
.qjd .jd-beta-banner .btn {
min-height: 44px;
padding: 7px 12px;
font-size: 13px;
align-self: center;
justify-self: end;
}
@media (min-width: 901px) {
.qjd .jd-beta-banner p {
white-space: nowrap;
}
}
@media (max-width: 900px) {
.qjd .q-launch-notification.jd-beta-banner {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
}
.qjd .jd-beta-banner .badge {
grid-column: 1;
grid-row: 1;
}
.qjd .jd-beta-banner .btn {
grid-column: 2;
grid-row: 1;
}
.qjd .jd-beta-banner p {
grid-column: 1 / -1;
grid-row: 2;
}
}
/* Shared footer only: vertically ordered, compact feedback action. */
.site-footer .footer-feedback-actions {
align-items: flex-end;
margin-left: auto;
text-align: right;
}
.site-footer .footer-button-row {
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.site-footer .footer-button-row > .footer-feedback-button {
font-size: 13px;
padding: 8px 12px;
min-height: 44px;
width: auto;
}
@media (max-width: 640px) {
.site-footer .footer-feedback-actions {
align-items: flex-start;
margin-left: 0;
text-align: left;
}
.site-footer .footer-button-row {
align-items: flex-start;
width: 100%;
}
.site-footer .footer-button-row > .footer-reports-button {
width: auto;
}
}
/* Shared header: one visible native palette action, 36px face / 44px target. */
.site-header .quello-theme-toggle button[data-fb-theme] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--fb-heading);
flex: none;
}
.site-header .quello-theme-toggle button[data-fb-theme]::before {
content: "";
position: absolute;
inset: 4px;
border: 1px solid var(--fb-line-strong);
border-radius: 50%;
background: var(--fb-paper);
z-index: -1;
}
.site-header .quello-theme-toggle button[data-fb-theme] {
isolation: isolate;
}
.site-header .quello-theme-toggle button[data-fb-theme]:hover::before {
background: var(--fb-surface);
}
.site-header .quello-theme-toggle button[data-fb-theme]:focus-visible {
outline: 3px solid var(--fb-focus);
outline-offset: 2px;
}
.site-header .quello-theme-toggle svg {
width: 20px;
height: 20px;
}
.site-header .quello-theme-toggle button[data-fb-theme="default"] {
display: none;
}
html[data-fb-theme="dark"]
.site-header
.quello-theme-toggle
button[data-fb-theme="dark"] {
display: none;
}
html[data-fb-theme="dark"]
.site-header
.quello-theme-toggle
button[data-fb-theme="default"] {
display: inline-flex;
}
@media (prefers-color-scheme: dark) {
html:not([data-fb-theme])
.site-header
.quello-theme-toggle
button[data-fb-theme="dark"] {
display: none;
}
html:not([data-fb-theme])
.site-header
.quello-theme-toggle
button[data-fb-theme="default"] {
display: inline-flex;
}
}
/* Subscribe only: full-column Airtable form with responsive height. */
.q-get-reports .q-reports-airtable {
width: 100%;
max-width: 100%;
min-width: 0;
margin-inline: auto;
border-radius: var(--fb-radius, 16px);
background: transparent;
}
.q-get-reports .q-reports-airtable fb-embed,
.q-get-reports .q-reports-airtable iframe {
display: block;
width: 100% !important;
max-width: 100%;
height: 900px !important;
border: 0;
border-radius: var(--fb-radius, 16px);
background: transparent;
}
@media (max-width: 640px) {
.q-get-reports .q-reports-airtable fb-embed,
.q-get-reports .q-reports-airtable iframe {
height: 1100px !important;
}
}