/* Soulful Nepal: site overrides.
Moved here from Appearance, Customize, Additional CSS in 0.10.8 so the whole
design lives in the theme and ships with it. Loaded after theme.css and
home.css, so the cascade matches what Additional CSS did before. */
/* ---- Hand-written rules that sat in the Customizer ---- */
.home .page .entry-header { display: none; }
.stb-band {
width: var(--stb-vw, 100vw);
margin-inline: calc(50% - var(--stb-vw, 100vw) / 2);
}
/* Hero badges. The grid gap and the badge padding stay equal so each divider
sits centred between two badges. More air before the buttons, and one size
for all three figures so a longer one never reads as a smaller claim. */
.sn-hero-stats { gap: 30px; max-width: 720px; }
.sn-hero-stat { padding-right: 30px; }
.sn-hero-stat:last-child { padding-right: 0; }
.sn-hero-actions { margin-top: 46px; }
.sn-hero-stat .num,
.sn-hero-stat--years .num,
.sn-hero-stat--iso .num,
.sn-hero-stat--licence .num { font-size: clamp(20.9px, 2.28vw, 28.5px); }
/* Hero balance. The verify card only holds four short rows, so it does not
need 40% of the hero. Giving the width back lets the headline set in three
lines instead of four. Above the stacking breakpoint only. */
@media (min-width: 1061px) {
.sn-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.58fr); }
.sn-hero-copy { max-width: 820px; }
.sn-home .sn-hero h1 { max-width: 13ch; }
}
/* Home hero heading, 20% down from the theme scale. */
.sn-home .sn-hero h1 { font-size: clamp(36px, 5.76vw, 78px); }
@media (max-width: 700px) {
.sn-home .sn-hero h1 { font-size: clamp(34px, 10.4vw, 54px); }
}
/* Plan my trip button. Caps, so the size comes down and the tracking opens up.
The selector is deliberately heavy. The button is a link inside the
navigation, so GeneratePress's own ".main-navigation a" typography rules
outrank a plain ".sn-header-cta" and quietly win on text-transform and
font-size. Matching on the element and the container settles it. */
.sn-theme .main-navigation a.sn-header-cta,
.sn-theme a.sn-header-cta,
a.sn-header-cta {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 1.15rem;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
border-radius: 6px;
line-height: 1;
}
/* Mobile header on one row.
GeneratePress prints ".has-inline-mobile-toggle .inside-header { flex-flow:
wrap }" inline, so the row is flex but allowed to wrap, and a wide logo
beside the button and toggle does not fit. Refusing the wrap and shrinking
the logo puts it back on one line.
The logo must not be a shrinkable flex item. The theme sets min-width 0 on
it, which is right when wrapping is allowed and fatal once it is not: with
nowrap the logo collapses to zero width and disappears. It is sized by the
image height instead. */
@media (max-width: 768px) {
.sn-theme .site-header .inside-header {
flex-wrap: nowrap;
padding-inline: 16px;
gap: 0.5rem;
}
.sn-theme .site-header .site-logo {
flex: 0 0 auto;
min-width: auto;
margin-right: auto;
}
.sn-theme .site-header .site-logo img { max-height: 34px; width: auto; }
.sn-theme .site-header .mobile-menu-control-wrapper { flex: none; gap: 0.7rem; }
.sn-theme .mobile-menu-control-wrapper .menu-toggle,
.sn-theme .mobile-menu-control-wrapper .menu-toggle:hover,
.sn-theme .mobile-menu-control-wrapper .menu-toggle:focus {
background-color: transparent;
min-height: 42px;
padding-inline: 0.5rem;
}
/* A bigger tap target for the bars themselves. */
.sn-theme .menu-toggle .gp-icon svg,
.sn-theme .menu-toggle .gp-icon {
width: 24px;
height: 24px;
}
.sn-header-utils { gap: 0.55rem; }
/* The opened menu is its own full-width panel.
There are two elements with the class .main-navigation on a phone: the
little wrapper holding the button and the toggle, and the real dropdown.
Laying out ".main-navigation .inside-navigation" as a right-aligned flex
row hits both, which shrink-wraps the dropdown and pushes it off the
right edge of the screen. Only the wrapper gets flex treatment; the
dropdown stays a plain full-width block. */
.sn-theme .main-navigation.has-menu-bar-items .inside-navigation,
.sn-theme .main-navigation.toggled .inside-navigation {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
.sn-theme .main-navigation .main-nav,
.sn-theme .main-navigation .main-nav > ul { width: 100%; }
.sn-theme .main-navigation .main-nav > ul > li > a { padding-inline: 16px; }
.sn-theme .main-navigation a.sn-header-cta,
.sn-theme a.sn-header-cta,
a.sn-header-cta {
min-height: 42px;
padding: 0 0.85rem;
font-size: 0.72rem;
letter-spacing: 0.06em;
}
}
@media (max-width: 380px) {
.sn-theme .site-header .site-logo img { max-height: 30px; }
.sn-theme .main-navigation a.sn-header-cta,
.sn-theme a.sn-header-cta,
a.sn-header-cta { padding: 0 0.7rem; font-size: 0.7rem; letter-spacing: 0.04em; }
}
/* The dropdown nav itself is still only half the screen, because the body
carries "nav-float-right" and GeneratePress floats #site-navigation right
with an auto width. Making the panel full width has to happen on the nav,
not just on its inner container. */
@media (max-width: 768px) {
.sn-theme #site-navigation,
.sn-theme .main-navigation.has-menu-bar-items {
float: none;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.sn-theme .main-navigation.has-menu-bar-items:not(.toggled) { display: none; }
.sn-theme .main-navigation.has-menu-bar-items.toggled { display: block; }
}
/* The dropdown is a flex child of the header row, so "width: 100%" is just a
basis the flex line shrinks back down. It has to leave the flex flow and
become a panel underneath the header instead. */
@media (max-width: 768px) {
.sn-theme .site-header .inside-header { position: relative; }
.sn-theme .site-header .main-navigation.has-menu-bar-items {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: auto;
max-width: none;
z-index: 200;
background: var(--sn-header-bg, #f6f7f7);
box-shadow: 0 14px 28px rgba(12, 30, 34, 0.16);
border-top: 1px solid var(--sn-line-soft, #e4eaea);
}
.sn-theme .site-header .main-navigation.has-menu-bar-items .main-nav > ul > li > a {
padding: 0.9rem 16px;
min-height: 48px;
display: flex;
align-items: center;
}
.sn-theme .site-header .main-navigation.has-menu-bar-items .main-nav > ul > li + li {
border-top: 1px solid var(--sn-line-soft, #e4eaea);
}
}
/* The panel was see-through because GeneratePress sets
".has-inline-mobile-toggle #site-navigation.toggled { background-color:
rgba(0,0,0,0.02) }". That selector carries an id, so it outranks any number
of classes. Matching the id is the only honest way to win. */
@media (max-width: 768px) {
.sn-theme #site-navigation,
.sn-theme #site-navigation.toggled,
.sn-theme .has-inline-mobile-toggle #site-navigation.toggled {
background-color: var(--sn-header-bg, #f6f7f7);
}
.sn-theme #site-navigation .main-nav > ul > li > a { color: var(--sn-brand-ink, #00434f); }
.sn-theme #site-navigation .main-nav > ul > li > a:hover { background: var(--sn-mist, #f2f5f5); }
}
/* Anchor the panel to the header itself rather than to its inner container,
otherwise the header's own bottom padding shows as a strip of the page
behind, between the header and the menu. */
@media (max-width: 768px) {
.sn-theme .site-header { position: relative; }
.sn-theme .site-header .inside-header { position: static; }
}
@media (max-width: 768px) {
/* GeneratePress carries a top margin on the navigation; on an absolutely
positioned panel that shows up as a 25px band of the page behind. */
.sn-theme .site-header .main-navigation.has-menu-bar-items { margin: 0; }
}
@media (max-width: 768px) {
/* The 25.5px band was a top margin set at id level, which no number of
classes can outrank. */
.sn-theme #site-navigation { margin: 0; }
}
@media (max-width: 768px) {
/* Traced it: ".has-inline-mobile-toggle #site-navigation.toggled" sets
margin-top 1.5em. One id plus two classes, so it needs one more class to
beat, not another guess. */
.sn-theme .has-inline-mobile-toggle #site-navigation.toggled,
.sn-theme .has-inline-mobile-toggle #site-navigation.has-active-search {
margin-top: 0;
}
}
/* Hero lead paragraph, 12% down across the whole clamp so the reduction
holds at every width rather than only at the top end. It sits under a
headline that already came down 20%, so this keeps the step between them
from closing up. */
.sn-hero__sell { font-size: clamp(15px, 1.51vw, 18.5px); }
/* The group pricing band promises a slider. The slider only renders once a
real price ladder exists, so with no prices the band shows a heading and a
sentence telling people to move something that is not there.
Hide the whole band until the slider is present. It reappears on its own
the moment prices are entered, so this needs no undoing later. */
.sn-price-band:not(:has(.sn-pricecard)) { display: none; }
/* ---- Booking panel: keep the price reachable on scroll ----
The plugin only counted a sticky header pinned at the very top (top <= 2px),
but the WordPress admin bar pushes the header down to 32px for a logged-in
editor, so nothing matched and the offset stayed 0. GeneratePress also only
turns its header sticky AFTER the first scroll, and the measurement never
ran again, so it read 0 for everyone.
Rather than depend on that value being right, take whichever is larger: the
measured one, or a floor that clears this header on its own. max() means a
good measurement still wins and a zero can no longer hurt. */
:root { --sn-hdr-floor: 100px; }
body.admin-bar { --sn-adminbar: 32px; }
@media (min-width: 1000px) {
.stb-panel {
position: sticky;
top: calc(max(var(--stb-header-offset, 0px), var(--sn-hdr-floor)) + var(--sn-adminbar, 0px) + 1rem);
}
}
/* ---- Group-size ladder, compact ----
A reference table, not reading matter: tight rows so the whole ladder is
takeable in one glance instead of one scroll. */
.stb-pricetable { margin-top: 0.75rem; font-size: 0.88rem; }
.stb-pricetable th,
.stb-pricetable td { padding: 0.42rem 0.5rem; }
.stb-pricetable__note { margin-top: 0.55rem; margin-bottom: 0; font-size: 0.8rem; }
/* Element+class, because ".stb-pricetable td" (0,1,1) outranks a lone class
(0,1,0) and was silently winning: the saving column never went green. */
.stb-pricetable td.stb-pricetable__diff { color: var(--sn-green, #2e9e5b); }
.stb-panel__body > * + * { margin-top: 9px; }
.stb-panel__head { padding-block: 0.6rem; }
/* The selected tier's full description already has its own section further
down the page ("Choose your level of comfort"). In the panel the pill and
its price are the decision; the paragraph is a second copy of text the
visitor will scroll past anyway. */
.stb-tiers__note { display: none; }
/* Supporting lines are small print, not reading matter. */
.stb-date__note,
.stb-pay__note,
.stb-group__why,
.stb-panel__group { font-size: 0.72rem; line-height: 1.3; margin-top: 0.25rem; }
.stb-tierpill { padding-block: 0.35rem; }
.stb-date__input { min-height: 40px; }
.stb-paybtn { min-height: 38px; padding-block: 0.3rem; }
/* Reassurance, not reading: three tight rows instead of a stacked list that
wrapped two of its three lines. */
.stb-panel__badges { gap: 0.2rem; font-size: 0.72rem; }
.stb-panel__badges li {
font-size: 0.72rem;
line-height: 1.25;
padding: 0;
margin: 0;
align-items: center;
}
/* "Permits & taxes included. No hidden fees." belongs with the price, not
floating in the body below it. The note is the body's first child, so it is
pulled up out of the body's padding and given the head's dark background,
putting it inside the price block right after "per person". */
.stb-panel__head { padding-bottom: 0.5rem; }
.stb-panel__body { padding-top: 0; }
.stb-panel__note {
background: var(--sn-night, #0c1e22);
color: rgba(255, 255, 255, 0.78);
margin: 0 -1.25rem 0;
padding: 0 1.25rem 0.95rem;
font-size: 0.74rem;
line-height: 1.35;
}
.stb-panel__body > .stb-panel__note + * { margin-top: 1.05rem; }
/* The lead-time line: the date field already says "any date you like", and
lead time is covered when we confirm the booking. */
.stb-date__note { display: none; }
/* Book this trip in caps, matching the header CTA. Woo's own button rules are
scoped ".woocommerce div.product ...", so the selector has to match that
weight or the transform is silently ignored. */
.woocommerce div.product .stb-panel__cart .single_add_to_cart_button,
.stb-panel__cart .single_add_to_cart_button {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.9rem;
}
/* Payment buttons: centre the text in the box.
The column was top-aligned, and the amount span sits empty until the script
fills it, so the label was parked at the top of the box with a gap below
where the figure will go. Centring the column fixes it either way, and an
empty amount no longer contributes a gap of its own. */
.stb-paybtn { justify-content: center; }
.stb-paybtn__amount:empty { display: none; }
/* ---- Hero width: stopgap for theme 0.9.0 ----
Theme 0.9.0 clamps every direct child of .entry-content that is not
.sn-sec, .alignfull or .alignwide to a 74ch reading measure. That was meant
for plain prose, but it also catches .sn-hero, the trip finder and the page
heroes, squeezing them to about 750px. The hero photograph is painted as a
background on .sn-hero itself, so the image gets cropped to that width with
the block.
Theme 0.9.1 fixes the cause properly, by naming the prose elements to clamp
instead of listing the sections to spare. These rules are only needed until
that theme is installed, and are harmless afterwards: the rule they fight
stops matching, and this whole block can be deleted.
!important is deliberate. The theme selector carries six classes, and
Additional CSS has to outrank it without rewriting the theme. */
.sn-full-width .entry-content > .sn-hero,
.sn-full-width .entry-content > .sn-pagehero,
.sn-full-width .entry-content > .sn-sec,
.sn-full-width .entry-content > .sn-price-band,
.sn-full-width .entry-content > .stb-band,
.sn-home.sn-full-width .entry-content > .wp-block-group {
max-width: none !important;
margin-inline: 0 !important;
}
/* The trip finder is .sn-searchwrap, not .sn-search, so it is not caught by
the blanket rule above, and unlike the other homepage sections it is not a
.wp-block-group either (it is plain markup from the [sn_search] shortcode).
It keeps its own width, centring margin and side padding rather than the
hero's full-bleed treatment or no limit at all. */
.sn-full-width .entry-content > .sn-searchwrap,
.sn-home.sn-full-width .entry-content > .sn-searchwrap {
max-width: var(--h-wrap, 1280px) !important;
margin-inline: auto !important;
padding-inline: var(--h-pad, clamp(20px, 5vw, 68px)) !important;
}
/* The plugin's full-bleed band centres itself with a negative inline margin
calculated from the viewport width. The blanket margin-inline: 0 above would
flatten that calc and push the band sideways, so it is given back here.
The genuinely full-bleed homepage blocks (.sn-hero, .sn-sec, .sn-price-band)
sit at margin 0 anyway, so they are left alone. */
.sn-full-width .entry-content > .stb-band {
margin-inline: calc(50% - var(--stb-vw, 100vw) / 2) !important;
}
/* ---- Archives had no content wrapper ----
Separate cause from the hero stopgap above, and not fixed by theme 0.9.1.
The 74ch prose clamp only ever matched .page and .single-post, so archives
were never clamped. They were never bounded either: the homepage sections
carry .sn-wrap and a trip page carries .stb-wrap, but the shop, the product
categories, the region and difficulty taxonomies, the blog index and search
results render straight into .site-main with nothing holding them. Once the
full-width layout removed GeneratePress's container cap and its padding,
the product grid ran to both edges of the screen.
Measured at a 1600px viewport: grid 1600px wide, zero gutter. With this,
1216px centred with 192px either side. On a 390px phone, a 16px gutter and
no sideways scroll.
This one belongs in the theme and is in 0.9.2. It is here so the shop works
before that upload, and it is safe to leave afterwards because it sets the
same values. */
.sn-full-width.archive .site-main,
.sn-full-width.blog .site-main,
.sn-full-width.search .site-main,
.sn-full-width.woocommerce-shop .site-main,
.sn-full-width.woocommerce-cart .site-main,
.sn-full-width.woocommerce-checkout .site-main,
.sn-full-width.woocommerce-account .site-main {
max-width: var(--sn-wrap, 1280px) !important;
margin-inline: auto !important;
padding-inline: var(--sn-gutter, clamp(1rem, 4vw, 2rem)) !important;
}
/* A block with its own full-bleed background opts back out, so the colour
still reaches the edge while its contents stay on the measure. */
.sn-full-width.archive .site-main > .sn-sec,
.sn-full-width.archive .site-main > .sn-pagehero,
.sn-full-width.woocommerce-shop .site-main > .sn-sec,
.sn-full-width.woocommerce-shop .site-main > .sn-pagehero {
margin-inline: calc(-1 * var(--sn-gutter, clamp(1rem, 4vw, 2rem))) !important;
max-width: none !important;
}
/* ---- The closing CTA had the footer's exact colour ----
Three dark blocks ran together at the foot of the page: .sn-ask at #0b2024,
.sn-footer-cta at #06171a, and .sn-site-footer at the same #06171a. The last
two were identical, so a 1px hairline at 10% white was the only thing
separating a call to action from a copyright line.
#12333a lifts the CTA clear of both neighbours. Contrast measured rather
than eyeballed: white headline 13.5:1, body copy 8.4:1 for the gold eyebrow
and 6.3:1 for the grey paragraph, and the teal button 3.9:1 against the new
background, which clears the 3:1 that non-text needs.
In the theme from 0.9.2 onward. Here so it shows before that upload. */
.sn-footer-cta {
background: #12333a !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
}
/* ---- Product price: Archivo instead of the mono ----
The headline price is IBM Plex Mono by default, set by
".stb-panel__head .stb-panel__amount" at two classes.
Archivo is the heading face, already loaded at 700/800/900. At display size
it gives the price the same voice as the h1 above it instead of a receipt.
tabular-nums is kept so the figure does not shift sideways as the group
slider changes it. */
.stb-panel__head .stb-panel__amount {
font-family: var(--sn-font-head, "Archivo", "Helvetica Neue", Arial, sans-serif);
font-weight: 800;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* The listing price on shop and archive cards, kept in step with the panel. */
.stb-listing-price,
.stb-listing-price .amount {
font-family: var(--sn-font-head, "Archivo", "Helvetica Neue", Arial, sans-serif);
font-weight: 800;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ---- Every price figure in Archivo, not just the headline ----
Checked by computed style rather than by reading the stylesheet: the
headline was Archivo, the tier pills, pay buttons, rate table and add-ons
were IBM Plex Mono, and "Due now", "Balance" and the sticky bar price were
plain Barlow. This lists every element that actually holds a number.
Weights are left alone so the hierarchy inside the panel is unchanged: only
the face and the figure style are set.
The rate table is included: tabular-nums gives equal-width digits in
Archivo too, so column alignment survives the change.
Caps micro-labels are deliberately excluded and stay on the body font: the
panel summary line, the DUE NOW / TRIP TOTAL labels and the rate table
headings. Those are lettering, not figures. */
.stb-panel__head .stb-panel__amount,
.stb-tierpill__price,
.stb-tierpill__price .amount,
.stb-paybtn__amount,
.stb-total__value,
.stb-total__row--trip .stb-total__value,
.stb-total__row--trip b,
.stb-total__row--balance .stb-total__value,
.stb-addon__price,
.stb-xcard__price,
.stb-bar__price,
.stb-bar__price .woocommerce-Price-amount,
.stb-group__why,
.stb-pricetable td,
.stb-pricetable tbody th,
.stb-listing-price,
.stb-listing-price .amount {
font-family: var(--sn-font-head, "Archivo", "Helvetica Neue", Arial, sans-serif);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ---- IBM Plex Mono retired site-wide ----
Changes the two tokens that every usage reads: --sn-font-mono in theme.css
and --h-mono in home.css. Between them they feed about 106 rules across the
theme and the plugin, so one change reaches all of them.
Headings and prices stay Archivo. Everything else, including every eyebrow,
badge, stamp, day number and micro-label, is Barlow. Two families, not
three.
The tokens are kept rather than deleted so the rules referencing them keep
working. In theme 0.9.4, which also stops downloading the IBM Plex Mono
family altogether. */
:root {
--sn-font-mono: var(--sn-font-body, "Barlow", "Helvetica Neue", Arial, sans-serif);
}
.sn-home,
.sn-site-footer,
.sn-footer-cta {
--h-mono: "Barlow", "Helvetica Neue", Arial, sans-serif;
}
/* ---- Footer badge row was indented 48px ----
GeneratePress's typography reset indents every list with
"ul { margin: 0 0 1.5em 3em }". .sn-footer-trust reset its padding and its
list-style but set only margin-top, so that 3em left margin survived and the
credential badges sat 48px right of the brand name and the paragraph above
them.
It is the only list in the theme with that gap, so this is one rule rather
than a pattern. In theme 0.9.5. */
.sn-footer-trust {
margin: 20px 0 0 !important;
}
/* Tripadvisor band stacked under the hero proof card. In the hero it sits in a
narrow column, so it drops the page-wide wrap and gutter and fills the
column instead. Also in theme 0.9.8 assets/css/home.css. */
.sn-hero-side { display: grid; gap: 14px; align-content: center; }
.sn-hero-side .sn-tabar {
max-width: none;
margin: 0;
padding-inline: 0;
}
.sn-hero-side .sn-tabar__box {
width: 100%;
justify-content: center;
gap: 6px 12px;
padding: 12px 16px;
}
@media (max-width: 1100px) {
.sn-hero-side { max-width: 620px; }
}
/* ---- Hero right side: one component, and a calmer badge row ----
All of this is in theme 0.10.0 as well. It is here so it shows before that
upload, and it is safe to leave afterwards because it sets the same values.
1. The three badges had three colours: gold years, cream ISO, cyan licence.
Same kind of thing, three categories. Every figure is white now and every
caption the same muted teal. The years figure keeps the accent, because
it is the one claim in the row that is ours rather than a register's. */
.sn-hero-stat--iso .num { color: #fff; }
.sn-hero-stat--licence .num { color: #fff; }
.sn-hero-stat--years .cap,
.sn-hero-stat--iso .cap,
.sn-hero-stat--licence .cap { color: #9ddae3; }
/* 2. The card and the rating were two white boxes with two shadows, reading as
two widgets. The rounding, the border and the shadow move to the wrapper;
the card and the rating become two sections inside it. */
.sn-hero-side {
gap: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 34px rgba(4, 26, 30, 0.18);
}
.sn-hero-side .sn-hero-card {
border: 0;
border-radius: 0;
box-shadow: none;
}
.sn-hero-side .sn-tabar__box {
border: 0;
border-top: 1px solid var(--h-line-soft);
border-radius: 0;
box-shadow: none;
background: #f4f7f7;
padding: 11px 18px;
justify-content: center;
}
/* 3. Quieter card. It supports the headline, so: narrower column, less
padding, smaller type. */
@media (min-width: 1061px) {
.sn-hero-grid { grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.5fr); }
}
.sn-hero-side .sn-hero-card { padding: clamp(18px, 2vw, 24px); }
.sn-hero-side .sn-hero-card__top { font-size: 8.8px; margin-bottom: 14px; }
.sn-hero-side .sn-proofline { padding: 10px 0; font-size: 13px; }
.sn-hero-side .sn-proofline b { font-size: 12px; }
.sn-hero-side .sn-hero-card__check {
margin-top: 14px;
padding-top: 14px;
font-size: 12.5px;
line-height: 1.5;
}
.sn-hero-side .sn-hero-card__check i { width: 16px; height: 16px; font-size: 10px; }
.sn-hero-side .sn-tabar__score { font-size: 15px; }
.sn-hero-side .sn-tabar__src { font-size: 14px; }
.sn-hero-side .sn-tabar__star { font-size: 15px; }
.sn-hero-side .sn-tabar__count,
.sn-hero-side .sn-tabar__link { font-size: 12px; }
/* ---- Proof card: numbers instead of statements ----
The .is-num and .is-fact rules style the registration/membership numbers
and the two operating facts; the row padding applies either way and
tightens the card, which is what six rows need. */
.sn-proofline b.is-num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: 0;
white-space: nowrap;
}
/* The two facts sit a shade back from the numbers, because they are our word
where the numbers above are checkable. */
.sn-proofline.is-fact b { color: var(--h-ink2); font-weight: 500; }
.sn-hero-side .sn-proofline { padding: 8px 0; }
.sn-hero-side .sn-proofline:first-of-type { padding-top: 0; }
.sn-hero-side .sn-proofline:last-of-type { border-bottom: 0; }
.sn-hero-side .sn-hero-card__check { margin-top: 10px; padding-top: 12px; }
/* ---- Proof card type, one step up ----
The card had been taken down twice, once for "quieter" and once to fit six
rows, and ended up reading smaller than everything around it: 13px labels
and a 12.5px note against an 18.5px hero paragraph. Everything in the card
goes up roughly 1.5px. Row padding goes to 9px so the card only grows about
15px in height rather than 40.
In theme 0.10.2. Same values, so this block can go after that upload. */
.sn-hero-side .sn-hero-card__top {
font-size: 9.6px;
/* At 0.19em tracking the bigger caps label wrapped to two lines once the
column hit its 280px floor, which happens from 1061px to about 1150px.
0.10em holds one line across the whole range: measured at 1600, 1440,
1280, 1200, 1140, 1100, 1070 and 1061. */
letter-spacing: 0.10em;
}
.sn-hero-side .sn-proofline { padding: 9px 0; font-size: 14.5px; }
.sn-hero-side .sn-proofline b { font-size: 13.5px; }
.sn-hero-side .sn-hero-card__check { font-size: 13.5px; line-height: 1.5; }
.sn-hero-side .sn-hero-card__check i { width: 17px; height: 17px; font-size: 10.5px; }
.sn-hero-side .sn-tabar__score { font-size: 16px; }
.sn-hero-side .sn-tabar__src { font-size: 15px; }
.sn-hero-side .sn-tabar__star { font-size: 16px; }
.sn-hero-side .sn-tabar__count,
.sn-hero-side .sn-tabar__link { font-size: 13px; }
/* ---- Hero trust stats on mobile: 3-across, not stacked ----
3 columns with a thin vertical divider between them instead of 3 full-width
horizontal ones. Long captions wrap to two lines inside their own column
rather than forcing the row itself to grow.
Same 700px breakpoint the theme uses for this component, so equal
specificity plus later source order wins outright, no !important needed. */
@media (max-width: 700px) {
.sn-hero-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 24px;
padding-top: 18px;
}
.sn-hero-stat {
padding: 0 12px 0 0;
border-right: 1px solid rgba(255, 255, 255, 0.14);
border-bottom: 0;
}
.sn-hero-stat:last-child { border-right: 0; padding-right: 0; }
.sn-hero-stat .num {
font-size: 15.5px;
letter-spacing: -0.02em;
}
.sn-hero-stat .cap {
font-size: 8.4px;
letter-spacing: 0.07em;
margin-top: 5px;
line-height: 1.35;
}
}
/* ---- Hero gradient and "topo" overlay ----
Gradient (.sn-hero::after): four brand tones (night, deep, teal2) plus a
fifth stop at low-opacity gold so the fade lands on the same accent used
for the years figure and the eyebrows, instead of just dissolving into
nothing.
Topo overlay (.sn-hero__topo): three repeating-radial-gradients, at
different positions, sizes and ring spacing (two teal, one gold), so it
reads as separate contour clusters the way an actual elevation map does. */
.sn-hero::after {
background: linear-gradient(
108deg,
rgba(11, 32, 36, 0.95) 0%,
rgba(11, 32, 36, 0.88) 22%,
rgba(6, 63, 74, 0.68) 50%,
rgba(0, 105, 124, 0.34) 76%,
rgba(198, 154, 72, 0.14) 100%
);
}
.sn-hero__topo {
opacity: 0.14;
background-image:
repeating-radial-gradient(ellipse 58% 42% at 14% 22%,
transparent 0 24px, rgba(110, 218, 234, 0.30) 25px, transparent 26px 38px),
repeating-radial-gradient(ellipse 72% 50% at 80% 68%,
transparent 0 32px, rgba(110, 218, 234, 0.24) 33px, transparent 34px 48px),
repeating-radial-gradient(ellipse 46% 34% at 48% 92%,
transparent 0 20px, rgba(198, 154, 72, 0.22) 21px, transparent 22px 32px);
}
/* Blog post width fix: the default single-post template was edge-to-edge
with no side padding, while the text column stayed capped at ~750px,
leaving a huge empty margin on wide screens. */
body.single-post .site-main {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
padding-right: 40px;
}
body.single-post .entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 820px !important;
}
body.single-post .entry-header,
body.single-post .entry-content,
body.single-post .entry-footer,
body.single-post .site-content > nav {
max-width: 1160px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 782px) {
body.single-post .site-main {
padding-left: 18px;
padding-right: 18px;
}
}
/* Single post: images had zero gap before the next heading, making the
heading look glued to the bottom of the photo. */
.single-post .entry-content figure.wp-block-image,
.single-post .entry-content .wp-block-image {
margin-bottom: 32px !important;
}
/* Archive / category / blog listing (Trail Notes index): each excerpt was
printing its own "Home / Category" breadcrumb inline, so the page read as
a stack of repeated breadcrumbs rather than one list of posts. Hide the
per-excerpt breadcrumb and give each excerpt real separation instead of
the cramped 20px default. */
.archive article.type-post .sn-breadcrumbs,
.category article.type-post .sn-breadcrumbs,
.blog article.type-post .sn-breadcrumbs,
.search article.type-post .sn-breadcrumbs,
.tag article.type-post .sn-breadcrumbs {
display: none !important;
}
.archive article.type-post,
.category article.type-post,
.blog article.type-post,
.search article.type-post,
.tag article.type-post {
margin-bottom: 48px !important;
padding-bottom: 40px !important;
border-bottom: 1px solid rgba(15, 42, 45, 0.08);
}
.archive article.type-post:last-of-type,
.category article.type-post:last-of-type,
.blog article.type-post:last-of-type,
.search article.type-post:last-of-type,
.tag article.type-post:last-of-type {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* ---- Site-wide form-control font fix ----
Browsers apply their own UI font to ,