/*!
* NSI Directory Skin — skin.css
* Net Solutions Interactive · NSI Masterpiece Standard v2.0 · v1.1.5
*
* Loaded only on single "listing" pages by nsi-directory-skin.php, AFTER the
* ListingPro theme sheets, so normally-specific rules win on cascade order.
* Every rule is prefixed body.single-listing. Design sources: the canonical
* v2.0 blocks in ~/clients/netsolutionscorp/design-system/ (design-system.md
* MASTERPIECE STANDARD, tokens.css v2.0, components.css v2.0) and the approved
* masterpiece homepage reference implementation.
*
* Section map:
* 1. Web fonts 2. Design tokens 3. Base ground and type
* 4. Header 5. Mobile menu colors 6. Cover / slider
* 7. Title row 8. Content sheet 9. Reviews
* 10. Sidebar cards 11. Modals (surface) 12. Footer
* 13. Focus visibility 14. Entrance reveals 15. Interaction states
* 16. Responsive 17. Reduced motion 18. !important annex
* 19. Claim modal (#modal-2) — elevated claim-and-verify surface
*
* Ported into the ListingPro Child (NSI) theme. Sections 1-18 are byte-for-byte
* the shipped nsi-directory-skin skin.css, so nothing the live site already
* depends on regresses. Section 19 is new: it lifts the claim modal (#modal-2,
* the claim modal id verified in the live DOM — NOT #modal-6) toward the
* approved claim-page mock, using only the real ListingPro claim-form classes.
* Section 11 still governs the shared modal surface for the event (#modal-3)
* and map (#modal-4) modals; section 19 layers the stronger, claim-specific
* treatment on top of it and only inside #modal-2.
*
* @font-face note: every src URL is written WITHOUT a query string. The preload
* links printed by nsi_child_head_preloads() carry bare URLs, and a preload
* href must byte-match the @font-face src — any mismatch makes browsers
* download every font twice.
*/
/* 1. Web fonts — self-hosted variable WOFF2, swap so text never blocks. */
@font-face {
font-family: 'Inter';
src: url('../fonts/inter-variable-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Serif 4';
src: url('../fonts/source-serif-4-variable-latin.woff2') format('woff2');
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
/* 2. Design tokens — documented HEX equivalents of the v2.0 OKLCH tokens
(public site, pre-OKLCH browsers). Names mirror tokens.css. */
:root {
--global-space-900: #06111D;
--global-space-800: #111F2E;
--global-space-700: #1E2F41;
--global-navy: #2B3A4A;
--global-navy-deep: #1A2532;
--global-navy-soft: #4A5868;
--global-teal: #10797C;
--global-teal-deep: #0A565A;
--global-teal-electric: #5DDADE;
--global-teal-vivid: #09C2C7;
--global-orange: #F7921E;
--global-orange-deep: #D97706;
--global-cream: #F5F1EC;
--global-cream-deep: #E8E1D6;
--global-cream-bright: #FAF6EE;
--global-mist: #A9B4C2;
--global-white: #FFFFFF;
--global-text-muted: #5A6577;
--global-border: #DDD9D2;
--radius-frame: 28px 0 28px 0;
--motion-fast: 200ms;
--motion-base: 300ms;
--motion-ease: cubic-bezier(0.2, 0, 0, 1);
--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--shadow-lifted: 0 12px 32px rgba(43, 58, 74, .25);
--shadow-cta: 0 10px 15px -3px rgba(247, 146, 30, .30),
0 4px 6px -4px rgba(247, 146, 30, .30);
--shadow-teal-glow: 0 12px 40px -8px rgba(9, 194, 199, .35);
--nsi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Arial, sans-serif;
--nsi-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
/* 3. Base ground and type — calm cream page, Inter body at full ink,
Source Serif 4 headlines. This body rule also retires the theme's
Quicksand/Montserrat/Rock Salt families by cascade order (verified:
no theme font-family carries a live !important). */
body.single-listing {
background-color: var(--global-cream-bright);
color: var(--global-navy);
font-family: var(--nsi-font-body);
font-size: 1.0625rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
body.single-listing h1,
body.single-listing h2,
body.single-listing h3,
body.single-listing h4 {
font-family: var(--nsi-font-display);
font-weight: 600;
color: var(--global-navy);
}
body.single-listing h5,
body.single-listing h6 {
font-family: var(--nsi-font-body);
font-weight: 700;
color: var(--global-navy);
}
/* Form elements do not inherit fonts by default — reset them onto the stack
(this also covers input.lp-review-btn, a direct Quicksand consumer). */
body.single-listing button,
body.single-listing input,
body.single-listing select,
body.single-listing textarea {
font-family: var(--nsi-font-body);
}
/* Numerals in data contexts: counts, phone numbers, prices, hours. */
body.single-listing .post-stat,
body.single-listing .reviews-quantity,
body.single-listing .listing-detail-infos,
body.single-listing .listing-price,
body.single-listing .claim-area {
font-variant-numeric: tabular-nums;
}
/* Layout safety: media never overflows its column. */
body.single-listing .post-detail-content img {
max-width: 100%;
height: auto;
}
/* 4. Header — space-900 band, hairline base, glowing teal lockup, cream nav,
one orange CTA. Colors and lockup composition only; menu mechanics and the
theme's float layout are untouched. */
body.single-listing .lp-header-bg-black {
background-color: var(--global-space-900);
border-bottom: 1px solid var(--global-space-700);
}
body.single-listing .lp-menu-bar,
body.single-listing .lp-menu-bar.lp-menu-bar-color {
background-color: var(--global-space-900);
}
body.single-listing .lp-logo.nsi-lockup {
display: flex;
align-items: center;
min-height: 72px;
}
body.single-listing .nsi-lockup > a {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
body.single-listing .nsi-lockup img {
width: 44px;
height: auto;
display: block;
flex: 0 0 auto;
}
body.single-listing .nsi-lockup-text {
display: inline-flex;
flex-direction: column;
line-height: 1.2;
text-align: left;
white-space: nowrap;
}
body.single-listing .nsi-lockup-name {
font-family: var(--nsi-font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: .01em;
color: var(--global-cream);
}
body.single-listing .nsi-lockup-tag {
font-family: var(--nsi-font-body);
font-weight: 600;
font-size: .625rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--global-teal-electric);
margin-top: 3px;
}
body.single-listing .lp-menu-bar .menu-item a {
font-family: var(--nsi-font-body);
font-weight: 600;
font-size: .9375rem;
color: var(--global-cream);
transition: color var(--motion-fast) var(--motion-ease);
}
body.single-listing .lp-menu-bar .menu-item a:hover,
body.single-listing .lp-menu-bar .menu-item a:focus {
color: var(--global-teal-electric);
}
/* Dropdown panels (if a menu ever ships them) stay on the dark stack so the
cream links above remain readable. */
body.single-listing .lp-menu-bar .menu-item ul {
background-color: var(--global-space-800);
border: 1px solid var(--global-space-700);
}
body.single-listing .navbar-toggle .icon-bar {
background-color: var(--global-cream);
}
/* The single orange CTA note in the header. Theme float/margin (!important
in the theme) are left in place — shape and color only. */
body.single-listing .lpl-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 48px;
padding: .65rem 1.5rem;
background-color: var(--global-orange);
color: var(--global-navy-deep);
font-family: var(--nsi-font-body);
font-weight: 700;
font-size: .9375rem;
text-align: center;
text-decoration: none;
border: 2px solid transparent;
border-radius: 9999px;
box-shadow: var(--shadow-cta);
transition: background-color var(--motion-fast) var(--motion-ease),
color var(--motion-fast) var(--motion-ease);
}
body.single-listing .lpl-button:hover,
body.single-listing .lpl-button:focus {
background-color: var(--global-orange-deep);
color: var(--global-white);
}
/* 5. Mobile menu — colors only; mmenu mechanics untouched. */
body.single-listing .mm-menu {
background: var(--global-space-900);
color: var(--global-cream);
}
body.single-listing .mm-menu .mm-listview > li > a {
color: var(--global-cream);
font-family: var(--nsi-font-body);
}
/* 6. Cover / slider — cream ground (retires the aliceblue wash), framed
slide imagery on desktop, Total Sharpness guard on all page imagery. */
body.single-listing .listing-second-view {
background-color: var(--global-cream-bright);
}
body.single-listing .listing-second-view img,
body.single-listing .post-detail-content img {
filter: none;
}
@media (min-width: 992px) {
body.single-listing .single-page-slider-container .listing-slide .slide img {
border-radius: var(--radius-frame);
border: 1px solid var(--global-space-700);
box-shadow: var(--shadow-lifted);
}
}
/* Low-res cover guard (v1.1.4). skin.js tags a cover slide
nsi-lowres-cover when the image's effective source width (naturalWidth,
or the smaller Google Places w###-h### filename token when the server
already baked the upscale into the crop file) is under 0.8x the slot,
and caps the img inline to that width. The image renders SHARP at its
true size, centered on a cream band — never blown up, never blurred, no
background-image echo (Total Sharpness Protocol). The radius-frame rule
above still matches the guarded img at >= 992px.
v1.1.4 centering fix. The second-view slider is a half-initialized slick
instance under jQuery 4: its track and slide keep stale pixel widths, a
left float, and a leftover reveal transform on the img. The earlier v1.1.3
guard deliberately left that geometry untouched, which left the capped
image shoved to one side and clipped, with a lopsided band. Because these
listing covers are a single hero image (not a real carousel), we stop
deferring to slick's broken geometry inside a guarded scope: neutralize the
track and slide transform, width, and float, let the one guarded slide fill
the container, and center the capped img. This is CSS-only, so it re-centers
on window resize with no JavaScript re-run.
ponytail: single-cover assumption — this hides sibling slides (slick's
duplicate clones) inside a guarded scope. If a listing ever needs a true
multi-image cover carousel, scope the hide to .slick-cloned instead. */
body.single-listing .nsi-lowres-scope,
body.single-listing .nsi-lowres-scope .slick-list,
body.single-listing .nsi-lowres-scope .slick-track {
background-color: var(--global-cream-bright);
}
body.single-listing .listing-second-view .nsi-lowres-cover {
background-color: var(--global-cream-bright);
min-height: 240px;
}
/* Neutralize the half-initialized slick geometry inside a guarded scope so
the single capped cover centers instead of floating clipped to one side.
slick sets these as inline styles, so each override needs !important. */
body.single-listing .nsi-lowres-scope .slick-list,
body.single-listing .nsi-lowres-scope .slick-track {
transform: none !important;
width: auto !important;
}
body.single-listing .nsi-lowres-scope .slick-track {
display: block !important;
text-align: center !important;
}
body.single-listing .nsi-lowres-scope .slide.nsi-lowres-cover {
width: 100% !important;
float: none !important;
display: block !important;
text-align: center !important;
}
body.single-listing .nsi-lowres-scope .slick-slide:not(.nsi-lowres-cover) {
display: none !important;
}
/* The anchor (prettyPhoto's element) also flex-centers the capped image. */
body.single-listing .listing-second-view .nsi-lowres-cover > a {
display: flex;
align-items: center;
justify-content: center;
min-height: 240px;
}
body.single-listing .listing-second-view .nsi-lowres-cover img {
width: auto;
height: auto;
max-width: 100%;
max-height: 320px;
margin: 0 auto !important;
display: inline-block !important;
float: none !important;
transform: none !important;
}
/* 7. Title row — serif headline, uppercase teal breadcrumb trail, white
chip stat strip with orange stars. */
/* The theme paints a pale blue band (#F7FBFE) behind the title row; the
cream ground shows through instead. */
body.single-listing .listing-second-view .post-meta-info {
background-color: transparent;
}
body.single-listing .listing-second-view .post-meta-left-box h1 {
font-family: var(--nsi-font-display);
font-weight: 700;
font-size: clamp(2.125rem, 1.45rem + 1.9vw, 3.5rem);
line-height: 1.12;
letter-spacing: -.01em;
color: var(--global-navy);
margin: 14px 0 10px;
}
/* The keyword line the theme prints under the title becomes a deliberate
uppercase deck instead of a stray lowercase slug. */
body.single-listing .listing-second-view .post-meta-left-box > p {
font-family: var(--nsi-font-body);
font-weight: 700;
font-size: .75rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--global-teal-deep);
margin: 0 0 4px;
}
body.single-listing .breadcrumbs li {
font-family: var(--nsi-font-body);
font-weight: 700;
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--global-text-muted);
}
body.single-listing .breadcrumbs li a {
color: var(--global-teal-deep);
text-decoration: none;
transition: color var(--motion-fast) var(--motion-ease);
}
body.single-listing .breadcrumbs li a:hover {
color: var(--global-teal);
text-decoration: underline;
}
/* Replace the theme's absolutely-positioned triangle separator with an
in-flow slash; the theme's forced `top` is inert once this is static. */
body.single-listing .breadcrumbs li:before,
body.single-listing .post-meta-left-box .breadcrumbs li:before {
content: "/";
position: static;
display: inline-block;
width: auto;
height: auto;
border: 0;
transform: none;
margin-right: .5rem;
color: var(--global-text-muted);
}
/* Stat strip: quiet white chips on the cream ground. Link font-size is in
the annex (the theme forces 12px with !important). */
body.single-listing .listing-second-view .post-meta-right-box .post-stat > li {
background-color: var(--global-white);
border: 1px solid var(--global-border);
border-radius: 9999px;
}
body.single-listing .listing-second-view .post-meta-right-box .post-stat > li > a {
font-family: var(--nsi-font-body);
font-weight: 600;
color: var(--global-navy);
padding: 12px 18px;
transition: color var(--motion-fast) var(--motion-ease);
}
body.single-listing .listing-second-view .post-meta-right-box .post-stat > li > a:hover {
color: var(--global-teal-deep);
}
body.single-listing .reviews-stars i {
color: var(--global-orange);
}
/* "Submit Review" action in the title row joins the ghost-pill family.
No display override: the theme controls its visibility. */
body.single-listing .listing-second-view a.secondary-btn {
min-height: 44px;
padding: .55rem 1.25rem;
font-family: var(--nsi-font-body);
font-weight: 700;
font-size: .875rem;
line-height: 1.3;
color: var(--global-navy);
background-color: transparent;
border: 2px solid var(--global-navy);
border-radius: 9999px;
text-align: center;
text-decoration: none;
transition: color var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) var(--motion-ease);
}
body.single-listing .listing-second-view a.secondary-btn:hover {
color: var(--global-teal-deep);
border-color: var(--global-teal-deep);
}
/* 8. Content sheet — the white editorial card the rewrite fragment renders
in. The theme's full-width white band goes transparent so the sheet sits
on cream; body copy is full ink, never muted. AdSense and JSON-LD inside
are untouched. */
body.single-listing .listing-second-view .content-white-area {
background-color: transparent;
}
body.single-listing .post-detail-content {
background-color: var(--global-white);
border: 1px solid var(--global-border);
border-top: 3px solid var(--global-teal);
border-radius: 16px;
padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
color: var(--global-navy);
font-size: 17px;
line-height: 1.65;
}
body.single-listing .post-detail-content h2 {
font-family: var(--nsi-font-display);
font-weight: 600;
font-size: clamp(22px, 3.2vw, 28px);
line-height: 1.25;
color: var(--global-navy);
margin: 2.4rem 0 .9rem;
}
body.single-listing .post-detail-content h2:first-child {
margin-top: 0;
}
body.single-listing .post-detail-content h3 {
font-family: var(--nsi-font-display);
font-weight: 600;
font-size: 20px;
line-height: 1.3;
color: var(--global-navy);
margin: 1.6rem 0 .6rem;
}
body.single-listing .post-detail-content p {
color: var(--global-navy);
font-size: 17px;
line-height: 1.65;
margin: 0 0 1.05rem;
}
body.single-listing .post-detail-content ul {
list-style: disc;
margin: 0 0 1.25rem;
padding-left: 1.35rem;
}
body.single-listing .post-detail-content ul li {
margin-bottom: .45rem;
}
body.single-listing .post-detail-content ul li::marker {
color: var(--global-teal);
}
/* v1.1.5: the ListingPro theme sets the html root to 62.5% (1rem = 10px), so
the content type above is declared in px rather than rem — rem values render
at ~62% of their intended size and read as tiny. */
/* v1.1.5: move the "Rate us and Write a Review" widget below the listing
content. The review-form, the content post-row, and the FAQ post-row are all
direct children of .col-md-8; making that column a flex column and giving the
review-form a high order drops it to the bottom without touching the theme. */
body.single-listing .col-md-8 {
display: flex;
flex-direction: column;
}
body.single-listing .col-md-8 > .review-form {
order: 90;
}
body.single-listing .post-detail-content a {
color: var(--global-teal-deep);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--motion-fast) var(--motion-ease);
}
body.single-listing .post-detail-content a:hover {
color: var(--global-teal);
}
/* 9. Reviews — white card, calm Inter fields, teal-vivid focus, one orange
submit. The submit is an , so the pill centers with padding and
line-height, never flex children. */
body.single-listing .review-form {
background-color: var(--global-white);
border: 1px solid var(--global-border);
border-top: 3px solid var(--global-teal);
border-radius: 16px;
padding: 1.75rem;
}
body.single-listing #reply-title {
font-family: var(--nsi-font-display);
font-weight: 600;
font-size: 1.5rem;
color: var(--global-navy);
margin: 0 0 1rem;
}
body.single-listing .review-form input[type="text"],
body.single-listing .review-form input[type="email"],
body.single-listing .review-form input[type="url"],
body.single-listing .review-form select,
body.single-listing .review-form textarea,
body.single-listing .md-content input[type="text"],
body.single-listing .md-content input[type="email"],
body.single-listing .md-content input[type="tel"],
body.single-listing .md-content input[type="url"],
body.single-listing .md-content input[type="password"],
body.single-listing .md-content select,
body.single-listing .md-content textarea {
font-family: var(--nsi-font-body);
font-size: 1rem;
color: var(--global-navy);
background-color: var(--global-white);
border: 1px solid var(--global-border);
border-radius: 10px;
padding: 12px 14px;
transition: border-color var(--motion-fast) var(--motion-ease);
}
body.single-listing .review-form input:focus,
body.single-listing .review-form select:focus,
body.single-listing .review-form textarea:focus,
body.single-listing .md-content input:focus,
body.single-listing .md-content select:focus,
body.single-listing .md-content textarea:focus {
border-color: var(--global-teal-vivid);
}
body.single-listing .review-form ::placeholder,
body.single-listing .md-content ::placeholder {
color: var(--global-text-muted);
opacity: 1;
}
body.single-listing input.lp-review-btn {
min-height: 48px;
padding: 12px 28px;
background-color: var(--global-orange);
color: var(--global-navy-deep);
font-family: var(--nsi-font-body);
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
border: 0;
border-radius: 9999px;
box-shadow: var(--shadow-cta);
cursor: pointer;
transition: background-color var(--motion-fast) var(--motion-ease),
color var(--motion-fast) var(--motion-ease);
}
body.single-listing input.lp-review-btn:hover,
body.single-listing input.lp-review-btn:focus {
background-color: var(--global-orange-deep);
color: var(--global-white);
}
/* 10. Sidebar — every widget box is an nsi-card: white, hairline border,
3px teal top. Hover states live in section 15. Contact rows are 48px
touch targets; claim and directions are ghost pills. Claim anchors keep
the theme's display values — the theme swaps their visibility per
breakpoint, and overriding display here would double the button. */
body.single-listing .widget-box {
background-color: var(--global-white);
border: 1px solid var(--global-border);
border-top: 3px solid var(--global-teal);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: transform var(--motion-fast) var(--motion-ease),
box-shadow var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) var(--motion-ease);
}
/* Widget headings become quiet panel labels; on white cards the label tone
is teal-deep (mist is reserved for dark surfaces, labels only). */
body.single-listing .widget-box h3,
body.single-listing .claim-area .phone-icon strong {
font-family: var(--nsi-font-body);
font-size: .625rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--global-teal-deep);
}
body.single-listing .widget-box h3 {
display: block;
margin: 0 0 .75rem;
}
body.single-listing .widget-box h3:empty {
display: none;
}
/* The theme paints the author box grey; the card is already white. */
body.single-listing .widget-box .widget-bg-color {
background-color: transparent;
}
body.single-listing .listing-second-view .map-area .listing-detail-infos ul li a {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 4px 0;
font-family: var(--nsi-font-body);
font-weight: 600;
color: var(--global-navy);
transition: color var(--motion-fast) var(--motion-ease);
}
body.single-listing .listing-second-view .map-area .listing-detail-infos ul li a:hover {
color: var(--global-teal-deep);
}
body.single-listing .get-directions {
margin-top: .75rem;
}
body.single-listing .get-directions a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
}
body.single-listing .get-directions a,
body.single-listing .listing-second-view .claim-area a.phone-number.md-trigger {
min-height: 48px;
padding: .6rem 1.4rem;
font-family: var(--nsi-font-body);
font-weight: 700;
font-size: .9375rem;
line-height: 1.3;
color: var(--global-navy);
background-color: transparent;
border: 2px solid var(--global-navy);
border-radius: 9999px;
text-align: center;
text-decoration: none;
transition: color var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) var(--motion-ease);
}
body.single-listing .get-directions a:hover,
body.single-listing .listing-second-view .claim-area a.phone-number.md-trigger:hover {
color: var(--global-teal-deep);
border-color: var(--global-teal-deep);
}
body.single-listing .claim-area {
padding: .25rem 0;
}
body.single-listing .claim-area .phone-icon {
display: block;
margin-bottom: .6rem;
}
/* Business-hours status links: remap the theme's stock green/red to the palette. */
body.single-listing .open-hours ul li a.Opened {
color: var(--global-teal-deep);
}
body.single-listing .open-hours ul li a.closed {
color: var(--global-orange-deep);
}
/* 11. Modals — surface treatment only: type, ink, and buttons. ZERO
positioning, z-index, or animation overrides. */
body.single-listing .md-content {
background-color: var(--global-white);
color: var(--global-navy);
}
body.single-listing .md-content h1,
body.single-listing .md-content h2,
body.single-listing .md-content h3,
body.single-listing .md-content h4 {
font-family: var(--nsi-font-display);
color: var(--global-navy);
}
body.single-listing .md-content p,
body.single-listing .md-content label,
body.single-listing .md-content li,
body.single-listing .claim-details {
font-family: var(--nsi-font-body);
color: var(--global-navy);
}
body.single-listing .md-content input[type="submit"] {
min-height: 48px;
padding: 12px 28px;
background-color: var(--global-orange);
color: var(--global-navy-deep);
font-family: var(--nsi-font-body);
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
border: 0;
border-radius: 9999px;
box-shadow: var(--shadow-cta);
cursor: pointer;
transition: background-color var(--motion-fast) var(--motion-ease),
color var(--motion-fast) var(--motion-ease);
}
body.single-listing .md-content input[type="submit"]:hover,
body.single-listing .md-content input[type="submit"]:focus {
background-color: var(--global-orange-deep);
color: var(--global-white);
}
body.single-listing .lp-secondary-btn {
color: var(--global-navy);
background-color: transparent;
border: 2px solid var(--global-navy);
border-radius: 9999px;
padding: .55rem 1.25rem;
min-height: 44px;
line-height: 1.3;
font-family: var(--nsi-font-body);
font-weight: 700;
text-align: center;
transition: color var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) var(--motion-ease);
}
body.single-listing .lp-secondary-btn:hover {
color: var(--global-teal-deep);
border-color: var(--global-teal-deep);
}
/* Comfortable close target; excludes the full-screen .md-overlay which
shares the class for its dismiss behavior. */
body.single-listing .md-close:not(.md-overlay) {
min-width: 48px;
min-height: 48px;
}
/* 12. Footer — navy-deep band, cream copy, teal-electric links, the same
lockup as the header. The inline-styled disclaimer fix lives in the
annex (inline styles outrank any selector without !important). */
body.single-listing footer.footer-style1,
body.single-listing .footer-bottom-bar {
background-color: var(--global-navy-deep);
}
body.single-listing .footer-bottom-bar {
border-top: 1px solid var(--global-space-700);
padding: 40px 0 32px;
}
body.single-listing .nsi-lockup--footer {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 18px 0 10px;
}
body.single-listing .footer-about-company li {
font-family: var(--nsi-font-body);
font-size: .875rem;
color: var(--global-cream);
}
body.single-listing .footer-about-company li:before {
background-color: var(--global-teal-electric);
}
body.single-listing .footer-about-company li a {
color: var(--global-teal-electric);
text-decoration: none;
}
body.single-listing .footer-about-company li a:hover {
color: var(--global-cream);
text-decoration: underline;
}
body.single-listing .credit-links {
font-family: var(--nsi-font-body);
font-size: .8125rem;
color: var(--global-cream);
margin-top: 14px;
}
body.single-listing .credit-links a {
color: var(--global-teal-electric);
}
body.single-listing .credit-links a:hover {
color: var(--global-cream);
}
/* 13. Focus visibility — every interactive element shows a teal-vivid ring
on keyboard focus. The bare :focus block is the fallback for engines
without :focus-visible; engines that have it suppress the ring for
pointer focus via :focus:not(:focus-visible). */
body.single-listing a:focus,
body.single-listing button:focus,
body.single-listing input:focus,
body.single-listing select:focus,
body.single-listing textarea:focus,
body.single-listing iframe:focus,
body.single-listing [tabindex]:focus,
body.single-listing .navbar-toggle:focus,
body.single-listing .md-close:focus,
body.single-listing .leaflet-control-zoom-in:focus,
body.single-listing .leaflet-control-zoom-out:focus {
outline: 2px solid var(--global-teal-vivid);
outline-offset: 2px;
}
body.single-listing :focus:not(:focus-visible) {
outline: none;
}
body.single-listing :focus-visible {
outline: 2px solid var(--global-teal-vivid);
outline-offset: 2px;
}
/* 14. Entrance reveals — hidden state exists ONLY under html.js (the PHP
head hook adds the class), tagged below-fold only by skin.js, force-shown
by its 3-second failsafe. Pattern per components.css v2.0. */
html.js body.single-listing .nsi-reveal {
opacity: 0;
transform: translateY(16px);
}
html.js body.single-listing .nsi-reveal.in {
opacity: 1;
transform: none;
transition: opacity 600ms var(--motion-ease-out),
transform 600ms var(--motion-ease-out);
}
/* 15. Interaction states — declared AFTER every base rule they modify
(state-before-base is a known shipped-bug class). The .nsi-reveal.in
variants keep card hover alive after a reveal, whose `transform: none`
would otherwise outrank the plain hover selector. */
body.single-listing .widget-box:hover,
html.js body.single-listing .widget-box.nsi-reveal.in:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lifted);
border-top-color: var(--global-teal-vivid);
transition: transform var(--motion-fast) var(--motion-ease),
box-shadow var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) var(--motion-ease);
}
/* The map card opens a modal on click; a lift under the cursor reads as a
draggable map, so it keeps the glow without the movement. */
body.single-listing .widget-box.map-area:hover,
html.js body.single-listing .widget-box.map-area.nsi-reveal.in:hover {
transform: none;
}
body.single-listing .lpl-button:active,
body.single-listing input.lp-review-btn:active,
body.single-listing .md-content input[type="submit"]:active {
transform: scale(.98);
}
/* 16. Responsive — the theme's breakpoints stay authoritative for layout;
these adjust skin spacing and the lockup at narrow widths. */
@media (max-width: 991px) {
body.single-listing .post-detail-content {
padding: 1.5rem;
}
body.single-listing .widget-box {
padding: 1.25rem;
}
/* The theme's mobile header floats the logo right in a ~165px box; the
full lockup cannot fit it on one line. The tag yields, the name wraps
beside the mark, and nothing crosses the viewport edge. */
body.single-listing .nsi-lockup-tag {
display: none;
}
body.single-listing .nsi-lockup-text {
white-space: normal;
}
body.single-listing .nsi-lockup-name {
font-size: .9375rem;
line-height: 1.15;
}
body.single-listing .nsi-lockup img {
width: 40px;
}
}
@media (max-width: 767px) {
body.single-listing .lp-logo.nsi-lockup {
min-height: 60px;
}
body.single-listing .footer-about-company li {
display: block;
margin: 0 0 8px;
}
body.single-listing .footer-about-company li:before {
display: none;
}
}
@media (max-width: 375px) {
body.single-listing {
font-size: 1rem;
}
body.single-listing .nsi-lockup img {
width: 36px;
}
body.single-listing .nsi-lockup-name {
font-size: .875rem;
}
body.single-listing .post-detail-content {
padding: 1.25rem;
}
}
/* 17. Reduced motion — finished states shown statically; reveals visible,
transforms off. */
@media (prefers-reduced-motion: reduce) {
html.js body.single-listing .nsi-reveal {
opacity: 1;
transform: none;
}
body.single-listing .widget-box:hover,
html.js body.single-listing .widget-box.nsi-reveal.in:hover,
body.single-listing .lpl-button:active,
body.single-listing input.lp-review-btn:active,
body.single-listing .md-content input[type="submit"]:active {
transform: none;
}
}
/* 18. !important annex — the complete, justified list. Every declaration
below counters a theme !important (or an inline style) documented in the
Task 1 recon; nothing else in this file uses !important. */
body.single-listing .breadcrumbs li {
margin-right: .5rem !important; /* theme forces 13px for its absolute triangle separator */
padding-left: 0 !important; /* theme forces 16px of separator room the inline slash no longer needs */
}
body.single-listing .breadcrumbs li:first-child {
margin-right: .5rem !important; /* theme forces 0, collapsing the gap after "Home" */
padding-right: 0 !important; /* theme forces 4px against the old separator geometry */
}
@media (max-width: 480px) {
body.single-listing .listing-second-view .post-meta-info .post-meta-left-box .breadcrumbs li:last-child {
margin-right: .5rem !important; /* theme forces 0 at this width; keep crumb spacing uniform when the trail wraps */
}
}
body.single-listing .listing-second-view .post-meta-right-box .post-stat > li > a {
font-size: .8125rem !important; /* theme forces 12px on the stat-chip links */
}
/* The theme swaps the two claim anchors per breakpoint; only the two mobile
show states are re-forced (to center the ghost pill), and the desktop
display:none stays untouched so the button never doubles. */
@media (max-width: 768px) {
body.single-listing .listing-second-view .claim-area a:last-child {
display: inline-flex !important; /* theme forces inline-block at this width */
align-items: center;
justify-content: center;
}
}
@media (max-width: 980px) and (min-width: 768px) {
body.single-listing .listing-second-view .claim-area a:last-child {
display: inline-flex !important; /* theme forces block at this width */
align-items: center;
justify-content: center;
}
}
body.single-listing button[disabled],
body.single-listing input[disabled] {
background-color: var(--global-cream-deep) !important; /* theme forces #bbc2d2 */
color: var(--global-navy-soft) !important; /* theme forces #fff (about 2:1 on its grey) */
border-color: var(--global-border) !important; /* theme forces #bbc2d2 */
cursor: not-allowed;
}
body.single-listing .listing-second-view .sidebar-post .list-style-none.list-st-img li:hover {
border-bottom: 1px solid var(--global-border) !important; /* theme forces #dedede */
background: var(--global-cream-bright) !important; /* theme forces transparent; a quiet row tint reads as interactive */
}
body.single-listing .footer-bottom-bar div[style] {
color: var(--global-cream) !important; /* inline style pins #c2c2c2 (unreadable on navy-deep) */
font-size: .75rem !important; /* inline style pins 9px */
text-align: left !important; /* inline style pins justify */
line-height: 1.7;
max-width: 72ch;
margin: 0 auto 8px;
}
/* Focus-ring counters: theme main.css ships `a:focus, input:focus
{ outline: none !important }`, erasing the WCAG 2.4.7 indicator on every
link and field (found live in the kbd walk; the recon's color/font scan
did not catalog outline). Keyboard focus always matches :focus-visible,
so the higher-specificity suppressor below keeps pointer clicks quiet
while the ring survives for keyboard users. */
body.single-listing a:focus,
body.single-listing input:focus {
outline: 2px solid var(--global-teal-vivid) !important; /* theme forces outline none!important on a/input */
}
body.single-listing :focus:not(:focus-visible) {
outline: none !important; /* suppress the ring for pointer focus; must out-shout the counter above */
}
/* 19. Claim modal (#modal-2) — elevated claim-and-verify surface.
Section 11 gives every modal a calm white surface; this section lifts the
CLAIM modal specifically toward the approved claim-page mock (a framed
claim-then-verify card with a teal-accented header, clearly labeled fields,
a verification-document dropzone, and one orange primary action). Everything
here targets real ListingPro claim-form classes and ids only:
#modal-2 the claim modal (verified live; not #modal-6)
.md-content.claimform-box the modal card
.lp-form-planclaim-st the claim