/**
* ON1 Reviews, Testimonials, and Use Cases landing page
*
* @copyright 2026, ON1
*
* base.css already owns .eyebrow, .section-divider, .section-intro, the .faqs
* accordion and the whole #resources band, so what lives here is the hero, the
* three proof bands and the closing CTA.
*
* The page is built out of two card shells that look alike but cannot share a
* background token: .expert-card sits in a pinned LIGHT band and .tool-quote
* sits on --bg-800, so each one names its own surface a step off the band it
* is in. They are kept as separate rules for that reason rather than grouped
* and overridden.
*
* Band order, on the 70/20/10 dark / light / one-step-lighter split:
*
* #hero pinned dark, --bg-950, blue burst
* #expert-reviews pinned LIGHT
* #community-showcase follows the theme
* #real-world-results follows the theme, --bg-800 (the one step-lighter band)
* #faqs follows the theme, base.css owns the band
* #choose-on1 pinned dark, --bg-950, blue burst
* #resources follows the theme, base.css owns the band
* ON1 Guarantee pinned light, injected by partials/footer.php
*/
/* !- Buttons
House sizing, same as the blog index. The closing CTA steps up from it
below. */
#on1-reviews-testimonials-and-use-cases #site-main .btn {
font-size: var(--text-sm);
padding: 0.75rem 1.25rem;
}
/* !- Section rhythm */
#on1-reviews-testimonials-and-use-cases #site-main > section {
padding: 5rem 0;
}
/* !- Hero
Pinned dark, so it states its own colors: pinning the attribute redefines
the tokens, but body's `color` is already computed by the time it inherits
in, and the hero copy is a plain . */
#on1-reviews-testimonials-and-use-cases #hero {
background: var(--bg-950);
color: var(--text-300);
padding: 6.25rem 0;
}
#on1-reviews-testimonials-and-use-cases #hero h1 {
font-size: var(--text-4xl);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.14;
margin-bottom: 1.25rem;
text-wrap: balance;
}
/* --text-5xl rather than the --text-6xl a full-width hero would take: the copy
sits in half the row from lg up, with the photograph beside it. */
@media (min-width: 992px) {
#on1-reviews-testimonials-and-use-cases #hero h1 {
font-size: var(--text-5xl);
}
}
/* The lede is an
for the outline, not for its size - it reads as the
sentence under the headline. */
#on1-reviews-testimonials-and-use-cases #hero .hero-lede {
color: var(--text-100);
font-size: var(--text-xl);
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
margin-bottom: 1.25rem;
}
#on1-reviews-testimonials-and-use-cases #hero .hero-sub {
font-size: var(--text-base);
line-height: 1.7;
margin-bottom: 0;
}
/* !- Expert reviews
The page's light band. Pinned, so it stays light under either theme, and it
restates background and color for the reason the hero does. Under
data-theme="light" the tokens resolve to #fafafb for the band, #f6f6f7 for
the card and #eaeaea for its border. */
#on1-reviews-testimonials-and-use-cases #expert-reviews {
background: var(--bg-950);
color: var(--text-300);
}
#on1-reviews-testimonials-and-use-cases .expert-card {
background: var(--bg-900);
border: 1px solid var(--bg-700);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2 / 1 off a 840 x 600 source keeps the middle 420px of the plate. That is
the ratio the tallest mark needs - Sam Davis's roundel runs y 95 to 495 and
a shallower band clips its top and bottom. */
#on1-reviews-testimonials-and-use-cases .expert-logo img {
aspect-ratio: 2 / 1;
display: block;
object-fit: cover;
width: 100%;
}
#on1-reviews-testimonials-and-use-cases .expert-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1.75rem 1.625rem;
}
#on1-reviews-testimonials-and-use-cases .expert-source {
color: var(--link-alt);
font-size: var(--text-mini);
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 0.875rem;
text-transform: uppercase;
}
#on1-reviews-testimonials-and-use-cases .expert-quote {
color: var(--text-50);
font-size: var(--text-lg);
font-style: italic;
font-weight: 700;
line-height: 1.5;
margin-bottom: 1rem;
}
#on1-reviews-testimonials-and-use-cases .expert-desc {
flex-grow: 1;
font-size: var(--text-sm);
line-height: 1.7;
margin-bottom: 1.25rem;
}
/* !- Featured expert card
The fifth review has no partner in a two-up grid, so it spans the row and
turns side-on. Below md the inner row stacks and the logo goes back to the
banner crop the two-up cards use. */
@media (min-width: 768px) {
#on1-reviews-testimonials-and-use-cases .expert-card.is-featured .expert-logo,
#on1-reviews-testimonials-and-use-cases .expert-card.is-featured .expert-logo img {
height: 100%;
}
#on1-reviews-testimonials-and-use-cases .expert-card.is-featured .expert-logo img {
aspect-ratio: auto;
}
}
/* !- Proof links
The text link that closes every proof card. --link-alt flips per theme, so
it carries into the light band and the --bg-800 band without a second rule. */
#on1-reviews-testimonials-and-use-cases .proof-link {
color: var(--link-alt);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
}
#on1-reviews-testimonials-and-use-cases .proof-link:hover {
text-decoration: underline;
}
#on1-reviews-testimonials-and-use-cases .proof-link-wrap {
margin-bottom: 0;
}
/* !- Community showcase */
#on1-reviews-testimonials-and-use-cases .showcase-block + .showcase-block {
margin-top: 4rem;
}
#on1-reviews-testimonials-and-use-cases .showcase-label {
font-size: var(--text-xl);
margin-bottom: 0.5rem;
}
#on1-reviews-testimonials-and-use-cases .showcase-desc {
font-size: var(--text-sm);
line-height: 1.7;
margin-bottom: 1.75rem;
}
#on1-reviews-testimonials-and-use-cases .showcase-quote {
background: var(--bg-800);
border-left: 3px solid var(--blue-500);
border-radius: var(--border-radius);
font-size: var(--text-base);
font-style: italic;
line-height: 1.7;
margin-bottom: 1.75rem;
padding: 1.25rem 1.5rem;
}
#on1-reviews-testimonials-and-use-cases .showcase-card {
background: var(--bg-800);
border-radius: var(--border-radius);
overflow: hidden;
}
/* The submissions are not all one shape - Mike Hardisty's is square, the rest
are 3:2 - so the thumbnail crops to a single ratio and the lightbox shows
the full frame. */
#on1-reviews-testimonials-and-use-cases .showcase-thumb {
display: block;
}
#on1-reviews-testimonials-and-use-cases .showcase-thumb img {
aspect-ratio: 3 / 2;
display: block;
object-fit: cover;
width: 100%;
}
#on1-reviews-testimonials-and-use-cases .showcase-caption {
padding: 0.875rem 1.125rem;
}
#on1-reviews-testimonials-and-use-cases .showcase-name {
color: var(--text-100);
font-size: var(--text-xs);
font-weight: 700;
margin-bottom: 0.125rem;
}
#on1-reviews-testimonials-and-use-cases .showcase-title {
color: var(--text-500);
font-size: var(--text-mini);
font-style: italic;
margin-bottom: 0;
}
/* !- Real-world results
The one step up from the page's own tone, which puts the quote cards on
--bg-700. */
#on1-reviews-testimonials-and-use-cases #real-world-results {
background: var(--bg-800);
border-bottom: 1px solid var(--bg-700);
border-top: 1px solid var(--bg-700);
}
#on1-reviews-testimonials-and-use-cases .tool-block + .tool-block {
margin-top: 3.5rem;
}
#on1-reviews-testimonials-and-use-cases .tool-header {
align-items: center;
display: flex;
gap: 0.875rem;
margin-bottom: 1.75rem;
}
#on1-reviews-testimonials-and-use-cases .tool-name {
font-size: var(--text-2xl);
margin-bottom: 0.125rem;
}
#on1-reviews-testimonials-and-use-cases .tool-tag {
color: var(--text-500);
font-size: var(--text-sm);
font-style: italic;
margin-bottom: 0;
}
#on1-reviews-testimonials-and-use-cases .tool-quote-card {
background: var(--bg-700);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
overflow: hidden;
}
#on1-reviews-testimonials-and-use-cases .tool-quote-logo img {
aspect-ratio: 2 / 1;
display: block;
object-fit: cover;
width: 100%;
}
#on1-reviews-testimonials-and-use-cases .tool-quote-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1.625rem 1.5rem;
}
#on1-reviews-testimonials-and-use-cases .tool-quote-source {
color: var(--link-alt);
font-size: var(--text-mini);
font-weight: 700;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
text-transform: uppercase;
}
#on1-reviews-testimonials-and-use-cases .tool-quote-text {
color: var(--text-50);
font-size: var(--text-base);
font-style: italic;
font-weight: 700;
line-height: 1.5;
margin-bottom: 0.75rem;
}
#on1-reviews-testimonials-and-use-cases .tool-quote-desc {
flex-grow: 1;
font-size: var(--text-sm);
line-height: 1.65;
margin-bottom: 1.125rem;
}
/* !- See What Real Photographers Already Know
Pinned dark, and restating its own colors for the reason the hero does. The
secondary button is .btn-outline-light, which is only legible on a dark
surface - letting this band follow the theme would erase it on light. */
#on1-reviews-testimonials-and-use-cases #choose-on1 {
background: var(--bg-950);
color: var(--text-300);
padding: 6.25rem 0;
}
#on1-reviews-testimonials-and-use-cases #choose-on1 h2 {
font-size: var(--text-4xl);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 1rem;
text-wrap: balance;
}
#on1-reviews-testimonials-and-use-cases #choose-on1 .cta-copy {
font-size: var(--text-lg);
line-height: 1.65;
margin-bottom: 2.25rem;
}
#on1-reviews-testimonials-and-use-cases #choose-on1 .btn {
font-size: var(--text-base);
padding: 0.9375rem 1.875rem;
}