/**
* Styling for every selectable ad layout (admin/advertisements.php's Style
* dropdown) rendered by render_country_ad_slot()/render_country_ad_popup()
* in includes/marketplace.php. Loaded on every page (both the fh-header.php
* and old includes/header.php chrome chains) so an ad renders correctly
* regardless of which page/chrome it appears on. Brand tokens are inlined
* here (not the fh-* CSS variables) since this file must work standalone on
* pages that only load style.css.
*/
:root {
--ads-navy: #1a2730;
--ads-gold: #c78f18;
--ads-yellow: #ffc531;
--ads-cream: #fff3e1;
--ads-muted: #6b7280;
--ads-border: rgba(26, 39, 48, .1);
/* An individual ad's accent_color (admin/advertisements.php) overrides
this on that ad's own wrapper element only -- every rule below reads
--ads-accent (not --ads-gold directly) so the override cascades to
every descendant, and ads with no custom color keep the site default. */
--ads-accent: var(--ads-gold);
}
/* The original simple "card"/"modal" styles' base rules live in
figma-home-demo.css and style.css (predate this file); this stylesheet
loads after both in every page's , so overriding the same
selectors here lets an ad's accent_color reach them too without touching
either of those two files. */
.country-ad-slot { border-left-color: var(--ads-accent); }
.country-ad-slot-cta { color: var(--ads-accent); }
.country-ad-slot-cta:hover { background: var(--ads-accent); }
.ad-popup-modal-cta { background: var(--ads-accent); }
/* An image-uploaded "card" style ad is now a proper card -- image on top,
title/tagline/CTA in a body underneath -- instead of a bare, text-less
image (style.css's base .country-ad-banner rules predate the body and
don't clip/frame it, so it needs its own card chrome here). The image is
height-capped and cropped so this card stays the same rough size as
whatever real content list it sits inside (e.g. a task card) no matter
what aspect ratio the admin uploads -- consistent, "uniform" sizing was
the whole point, not a full-bleed image the length of its own file. */
.country-ad-banner {
border: 1px solid var(--ads-border);
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 26px rgba(26, 39, 48, .06);
}
.country-ad-banner a { border-radius: 0; }
.country-ad-banner img { max-height: 220px; object-fit: cover; }
/* find-jobs-top is the one placement meant to carry a plain, fixed-size
leaderboard-style banner (e.g. a 728x90 creative) rather than a
full-bleed card photo -- the base .country-ad-banner img rule above
stretches/crops to fill the card's width, which would distort a banner
sized like that. Capping the card's own width and centering it (instead
of it stretching to the results list's full width) keeps the image at
its real size and centered, matching how this ad type is normally shown
elsewhere on the web. */
.country-ad-banner[data-slot="find-jobs-top"] {
max-width: 728px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.country-ad-banner[data-slot="find-jobs-top"] img { max-height: none; object-fit: contain; width: 100%; }
/* This placement is image-only by design (the creative already carries its
own copy/branding, like a standard leaderboard banner) -- the title/
tagline/CTA row the "stacked" style normally shows underneath a card photo
would otherwise display unfilled placeholder-looking text ("Your Business
Name") that the admin form still requires but never intends to show here. */
.country-ad-banner[data-slot="find-jobs-top"] .country-ad-banner-body { display: none; }
.country-ad-banner-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 16px 20px;
border-top: 1px solid var(--ads-border);
}
.country-ad-banner-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* figma-home-demo.css's ".country-ad-banner a" rule (class+type selector,
higher specificity than ".country-ad-slot-cta" alone) forces every
inside a .country-ad-banner -- including this CTA link -- to
display:block/border-radius:12px/line-height:0/overflow:hidden, meant for
the image-wrapping only. That silently turned the CTA into a
full-width, square-cornered block instead of the intended pill button
(most visible on mobile, where the CTA also gets width:100%). This
selector matches classes twice (higher specificity than class+type) so it
wins and restores the real button styling. */
.country-ad-banner .country-ad-slot-cta {
flex-shrink: 0;
display: inline-flex;
border-radius: 999px;
overflow: visible;
line-height: normal;
}
/* "Side" image layout -- a compact single row (thumbnail + details) instead
of the default full-width image on top with a body underneath. */
.country-ad-banner.is-side {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px 14px 14px;
}
.country-ad-banner.is-side a:first-of-type { flex-shrink: 0; }
.country-ad-banner.is-side img {
width: 84px;
height: 84px;
max-height: none;
border-radius: 12px;
}
.country-ad-banner.is-side .country-ad-banner-body {
flex: 1;
min-width: 0;
padding: 0;
border-top: 0;
}
.country-ad-banner.is-side .country-ad-slot-company,
.country-ad-banner.is-side .country-ad-slot-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 380px) {
.country-ad-banner.is-side { flex-direction: column; align-items: stretch; text-align: center; }
.country-ad-banner.is-side img { width: 100%; height: 120px; }
}
/* find-jobs-sidebar's 3 concepts (Compact / Feature / Minimal) -- a sticky,
narrow (~320px) column, so all 3 favor a full-width block CTA over an
inline pill and keep everything readable at that width. */
.ads-sidebar-card {
border: 1px solid var(--ads-border);
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 26px rgba(26, 39, 48, .06);
position: relative;
}
.ads-sidebar-title { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--ads-navy); }
.ads-sidebar-tagline { margin: 6px 0 14px; color: var(--ads-muted); font-size: .86rem; line-height: 1.5; }
.ads-sidebar-cta-block {
display: block;
background: var(--ads-navy);
color: var(--ads-yellow);
font-weight: 800;
padding: 11px;
border-radius: 12px;
text-align: center;
text-decoration: none;
}
.ads-sidebar-cta-block:hover { background: var(--ads-accent); color: #fff; }
.ads-sidebar-compact { padding: 20px; }
.ads-sidebar-compact .adsec-tag { position: static; display: inline-block; margin-bottom: 12px; }
.ads-sidebar-logo {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--ads-navy);
color: var(--ads-yellow);
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
margin-bottom: 12px;
overflow: hidden;
}
.ads-sidebar-logo img { width: 100%; height: 100%; object-fit: cover; }
.ads-sidebar-feature { overflow: hidden; }
.ads-sidebar-feature .adsec-tag { top: 10px; right: 10px; }
.ads-sidebar-feature-img { display: block; width: 100%; height: 150px; object-fit: cover; }
.ads-sidebar-feature .ads-sidebar-logo { margin: 18px 18px 0; }
.ads-sidebar-feature-body { padding: 18px; }
.ads-sidebar-minimal {
border-style: dashed;
border-color: var(--ads-accent);
background: linear-gradient(180deg, var(--ads-cream), #fff);
padding: 20px;
}
.ads-sidebar-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ads-cream);
color: var(--ads-gold);
border-radius: 999px;
padding: 5px 11px;
font-size: .7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .03em;
margin-bottom: 10px;
}
.ads-sidebar-link { color: var(--ads-gold); font-weight: 800; font-size: .88rem; text-decoration: none; }
.ads-sidebar-link:hover { text-decoration: underline; }
/* find-jobs-sticky-bar's 2 concepts (Slim / Image) -- full-width bars; the
shared [data-slot$="-sticky-bar"] rule (above) handles fixed positioning,
these only style the bar's own content. */
.ads-bar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; }
.ads-bar-text { min-width: 0; }
.ads-bar-text strong { display: block; }
.ads-bar-cta { margin-left: auto; font-weight: 800; padding: 9px 20px; border-radius: 999px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.ads-bar-slim { background: var(--ads-navy); color: #fff; }
.ads-bar-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--ads-yellow); color: var(--ads-navy); display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; }
.ads-bar-slim .ads-bar-text strong { font-size: .92rem; }
.ads-bar-sep { color: rgba(255, 255, 255, .4); margin: 0 4px; }
.ads-bar-slim .ads-bar-tagline { color: rgba(255, 255, 255, .65); font-size: .86rem; }
.ads-bar-slim .ads-bar-cta { background: var(--ads-yellow); color: var(--ads-navy); }
.ads-bar-image { background: #fff; border-top: 1px solid var(--ads-border); }
.ads-bar-thumb { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.ads-bar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ads-bar-image .ads-bar-text strong { color: var(--ads-navy); font-size: .92rem; }
.ads-bar-image .ads-bar-tagline { color: var(--ads-muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-bar-image .ads-bar-cta { background: var(--ads-navy); color: var(--ads-yellow); }
@media (max-width: 480px) {
.ads-bar { padding: 12px 16px; gap: 10px; }
.ads-bar-tagline, .ads-bar-sep { display: none; }
.ads-bar-cta { padding: 8px 14px; font-size: .82rem; }
.ads-bar-thumb { width: 40px; height: 40px; }
}
/* find-providers-map-adjacent's 3 concepts (Wide / Spotlight / Strip) --
sits between the real map card and the results grid, so Wide deliberately
mirrors that map card's own rounded/bordered/shadowed treatment. */
.ads-map-wide {
border: 1px solid var(--ads-border);
border-radius: 24px;
overflow: hidden;
background: #fff;
box-shadow: 0 18px 46px rgba(26, 39, 48, .08);
display: flex;
align-items: stretch;
}
.ads-map-wide-media { width: 220px; flex-shrink: 0; }
.ads-map-wide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ads-map-wide-media.adsec-icon-lg { display: flex; align-items: center; justify-content: center; background: var(--ads-cream); font-size: 2rem; }
.ads-map-wide-body { padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ads-map-wide-body h4 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ads-navy); }
.ads-map-wide-body p { margin: 0; color: var(--ads-muted); font-size: .9rem; }
.ads-map-wide-cta { align-self: flex-start; background: var(--ads-navy); color: var(--ads-yellow); font-weight: 800; padding: 10px 22px; border-radius: 999px; text-decoration: none; margin-top: 6px; }
@media (max-width: 700px) { .ads-map-wide { flex-direction: column; } .ads-map-wide-media { width: 100%; height: 160px; } }
.ads-map-spotlight {
border-radius: 24px;
background: linear-gradient(135deg, var(--ads-navy), #1f2937);
color: #fff;
padding: 30px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.ads-map-spotlight-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ads-yellow); color: var(--ads-navy); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; overflow: hidden; }
.ads-map-spotlight-icon img { width: 100%; height: 100%; object-fit: cover; }
.ads-map-spotlight-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ads-yellow); display: block; margin-bottom: 4px; }
.ads-map-spotlight h4 { margin: 0 0 4px; font-weight: 900; color: #fff; }
.ads-map-spotlight p { margin: 0; color: rgba(255, 255, 255, .7); flex: 1; min-width: 200px; }
.ads-map-spotlight-cta { background: var(--ads-yellow); color: var(--ads-navy); font-weight: 800; padding: 10px 22px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.ads-map-strip {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--ads-border);
border-radius: 16px;
padding: 14px 18px;
box-shadow: 0 10px 26px rgba(26, 39, 48, .05);
}
.ads-map-strip-logo { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; overflow: hidden; }
.ads-map-strip-logo img { width: 100%; height: 100%; object-fit: cover; }
.ads-map-strip strong { font-size: .92rem; color: var(--ads-navy); }
.ads-map-strip-sep { color: #d1d5db; margin: 0 4px; }
.ads-map-strip-tagline { color: var(--ads-muted); font-size: .86rem; }
.ads-map-strip-cta { margin-left: auto; color: var(--ads-gold); font-weight: 800; font-size: .88rem; text-decoration: none; white-space: nowrap; }
@media (max-width: 480px) {
.ads-map-strip { flex-wrap: wrap; }
.ads-map-strip-tagline, .ads-map-strip-sep { display: none; }
.ads-map-strip-cta { margin-left: 0; }
}
/* find-freelancers-grid-card's 2 concepts (Feature / Minimal) -- both are
real .provider-card-clean cards (so they inherit that class's border/
radius/shadow/hover from find-freelancers.php's own stylesheet) with just
a modifier for the tint/image/badge. */
.ads-grid-feature {
border: 2px solid rgba(245, 158, 11, .4) !important;
background: linear-gradient(180deg, #fffbeb 0%, #fff 55%);
box-shadow: 0 18px 45px rgba(245, 158, 11, .14) !important;
}
.ads-grid-feature-tag { align-self: flex-start; display: inline-flex; align-items: center; background: #fff3cd; color: #946200; font-weight: 800; border-radius: 999px; padding: 6px 11px; font-size: .72rem; margin-bottom: 10px; }
.ads-grid-feature-img { width: 100%; height: 190px; border-radius: 16px; object-fit: cover; margin: -6px -6px 14px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); }
/* .provider-body is flex:1 (pages/find-freelancers.php) so it grows to fill
whatever height the image doesn't use -- now that the image takes up
much more of the card, shrink the body's own gap/line-height so its
shorter ad copy doesn't stretch out with awkward extra whitespace between
the title, tagline, and CTA. */
.ads-grid-feature .provider-body { gap: 4px; flex: 0 1 auto; margin-top: auto; }
.ads-grid-feature .provider-name { line-height: 1.2; }
.ads-grid-feature .provider-cta { margin-top: 10px; }
.ads-grid-minimal {
align-items: center;
text-align: center;
justify-content: center;
border-style: dashed !important;
border-color: var(--ads-accent) !important;
background: linear-gradient(180deg, var(--ads-cream), #fff);
}
.ads-grid-minimal-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--ads-cream); color: var(--ads-gold); border-radius: 999px; padding: 5px 11px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; align-self: center; }
.ads-grid-minimal-logo { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 12px; overflow: hidden; }
.ads-grid-minimal-logo img { width: 100%; height: 100%; object-fit: cover; }
.ads-grid-minimal p { color: var(--ads-muted); font-size: .86rem; margin: 0 0 16px; }
.ads-grid-minimal-link { color: var(--ads-gold); font-weight: 800; font-size: .88rem; text-decoration: none; }
.ads-grid-minimal-link:hover { text-decoration: underline; }
/* find-freelancers-floating's chat-bubble content -- the fixed corner
position/dismiss button comes from .adsec-floating-wrap (below), this is
just the card inside it. */
.ads-float-chat { background: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(15, 23, 42, .14); padding: 16px; position: relative; }
.ads-float-chat:after { content: ''; position: absolute; bottom: -8px; left: 28px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); box-shadow: 3px 3px 6px rgba(15, 23, 42, .06); }
.ads-float-chat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ads-float-chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ads-cream); color: var(--ads-gold); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .82rem; flex-shrink: 0; overflow: hidden; }
.ads-float-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ads-float-chat-top strong { font-size: .88rem; color: var(--ads-navy); }
.ads-float-chat-top span { display: block; font-size: .7rem; color: #16a34a; font-weight: 700; }
.ads-float-chat-top span i { font-size: .5rem; margin-right: 3px; }
.ads-float-chat p { margin: 0 0 12px; color: #374151; font-size: .85rem; background: #f8fafc; border-radius: 12px; padding: 10px 12px; }
.ads-float-chat-cta { display: block; text-align: center; background: var(--ads-navy); color: var(--ads-yellow); font-weight: 800; padding: 9px; border-radius: 10px; text-decoration: none; font-size: .86rem; }
/* about-below-hero's 3 concepts (Wide / Stat-card / Minimal). */
.ads-about-wide {
border: 1px solid var(--ads-border);
border-radius: 22px;
overflow: hidden;
background: #fff;
box-shadow: 0 18px 46px rgba(26, 39, 48, .06);
display: flex;
align-items: stretch;
margin: 24px 0;
}
.ads-about-wide-media { width: 240px; flex-shrink: 0; }
.ads-about-wide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ads-about-wide-media.adsec-icon-lg { display: flex; align-items: center; justify-content: center; background: var(--ads-cream); font-size: 2rem; }
.ads-about-wide-body { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ads-about-wide-body h3 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--ads-navy); }
.ads-about-wide-body p { margin: 0; color: var(--ads-muted); }
.ads-about-wide-cta { align-self: flex-start; background: var(--ads-navy); color: var(--ads-yellow); font-weight: 800; padding: 11px 24px; border-radius: 999px; text-decoration: none; margin-top: 8px; }
@media (max-width: 700px) { .ads-about-wide { flex-direction: column; } .ads-about-wide-media { width: 100%; height: 160px; } }
/* Mirrors the About hero's own "soft-card, red-glow" stat panel, but in the
site's gold accent instead of brand red (an ad shouldn't borrow the same
red used for real primary actions). */
.ads-about-stat {
border: 1px solid rgba(199, 143, 24, .18);
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 46px rgba(199, 143, 24, .1);
padding: 36px;
margin: 24px 0;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.ads-about-stat-icon { width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; overflow: hidden; }
.ads-about-stat-icon.adsec-icon-lg { display: flex; align-items: center; justify-content: center; background: var(--ads-cream); color: var(--ads-gold); font-size: 1.6rem; }
.ads-about-stat-icon img { width: 100%; height: 100%; object-fit: cover; }
.ads-about-stat-body { flex: 1; min-width: 200px; }
.ads-about-stat-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; display: block; margin-bottom: 4px; }
.ads-about-stat-body h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; color: var(--ads-navy); }
.ads-about-stat-body p { margin: 0; color: var(--ads-muted); }
.ads-about-stat-cta { background: var(--ads-gold); color: #fff; font-weight: 800; padding: 11px 24px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
@media (max-width: 560px) {
.ads-about-stat { padding: 22px; text-align: center; justify-content: center; }
.ads-about-stat-cta { width: 100%; text-align: center; }
}
.ads-about-minimal {
display: flex;
align-items: center;
gap: 14px;
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, .06);
border-radius: 16px;
padding: 14px 20px;
margin: 24px 0;
}
.ads-about-minimal-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; overflow: hidden; }
.ads-about-minimal-icon.adsec-icon-md { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(15, 23, 42, .08); color: var(--ads-gold); }
.ads-about-minimal-icon img { width: 100%; height: 100%; object-fit: cover; }
.ads-about-minimal strong { font-size: .9rem; color: var(--ads-navy); }
.ads-about-minimal-sep { color: #d1d5db; margin: 0 4px; }
.ads-about-minimal-tagline { color: var(--ads-muted); font-size: .86rem; }
.ads-about-minimal-cta { margin-left: auto; color: var(--ads-gold); font-weight: 800; font-size: .86rem; text-decoration: none; white-space: nowrap; }
@media (max-width: 480px) {
.ads-about-minimal-sep, .ads-about-minimal-tagline { display: none; }
}
/* home-grid-tile's 2 approved concepts (Native / Minimal) -- both render as
a real .fh-service-card so they inherit the "Panda's Picks" grid's own
200px fixed height/tint/watermark from figma-home-demo.css. */
.ads-hometile-native { --card-tint: radial-gradient(circle at 80% 20%, rgba(255, 197, 49, .30), transparent 65%); }
.ads-hometile-badge { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .85); color: var(--ads-gold); border-radius: 999px; padding: 4px 10px; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; align-self: flex-start; }
.ads-hometile-native .fh-service-link { background: var(--ads-yellow, #ffc531); color: var(--ads-navy, #111827); }
.ads-hometile-native:hover .fh-service-link { background: var(--ads-navy, #111827); color: var(--ads-yellow, #ffc531); }
.ads-hometile-minimal { background: #fff; border: 1.5px dashed rgba(15, 23, 42, .18); }
.ads-hometile-minimal .ads-hometile-badge { position: absolute; top: 16px; right: 16px; background: #f1f5f9; color: #6b7280; align-self: auto; }
.ads-hometile-minimal-logo { width: 36px; height: 36px; border-radius: 9px; background: #f1f5f9; color: var(--ads-navy, #111827); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .76rem; margin-bottom: 10px; overflow: hidden; }
.ads-hometile-minimal-logo-img { padding: 0; }
.ads-hometile-minimal-logo-img img { width: 100%; height: 100%; object-fit: cover; }
.ads-hometile-minimal-cta { font-weight: 800; font-size: .82rem; color: var(--ads-navy, #111827); text-decoration: none; }
.ads-hometile-minimal-cta:hover { text-decoration: underline; }
/* home-sticky-bar's only approved concept -- a small toast anchored
bottom-LEFT (not full-bleed, not centered like about's pill) -- overrides
the generic [data-slot$="-sticky-bar"] full-bleed rule for this variant. */
.ads-home-toast-wrap {
display: block !important;
left: 20px !important;
right: auto !important;
bottom: 20px !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
pointer-events: none;
}
.ads-home-toast { pointer-events: auto; background: #fff; border: 1px solid var(--ads-border); border-radius: 16px; box-shadow: 0 14px 34px rgba(26, 39, 48, .16); display: flex; align-items: center; gap: 12px; padding: 12px 14px; max-width: 340px; }
.ads-home-toast-media { width: 40px; height: 40px; border-radius: 10px; background: var(--ads-cream); color: var(--ads-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-weight: 800; }
.ads-home-toast-media img { width: 100%; height: 100%; object-fit: cover; }
.ads-home-toast-text { flex: 1; min-width: 0; }
.ads-home-toast-text strong { font-size: .86rem; color: var(--ads-navy); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-home-toast-text span { color: var(--ads-muted); font-size: .76rem; }
.ads-home-toast-cta { background: var(--ads-navy); color: var(--ads-yellow); font-weight: 800; padding: 7px 14px; border-radius: 999px; text-decoration: none; font-size: .76rem; white-space: nowrap; flex-shrink: 0; }
/* On a narrow phone (e.g. 320-375px wide), the 340px max-width plus 16px of
left offset would otherwise push the toast's right edge off-screen --
cap it to the real available viewport width instead of a fixed pixel. */
@media (max-width: 767.98px) {
.ads-home-toast-wrap { left: 16px !important; right: 16px !important; }
.ads-home-toast { max-width: 100%; }
}
@media (max-width: 400px) {
.ads-home-toast-text span { display: none; }
}
/* home-experts-spotlight's 3 concepts (Feature / Dark / Strip) -- the
full-width standalone banner right after the "Elite local Taskers" grid,
so these use fh-container-wide's own outer gutters, not a grid slot. */
.ads-spotlight-feature { display: flex; align-items: stretch; gap: 0; margin: 0 auto 60px; max-width: 1200px; padding: 0 20px; border-radius: var(--ads-radius, 20px); overflow: hidden; }
.ads-spotlight-feature-media { width: 220px; flex-shrink: 0; background: #f5f5f5; display: flex; align-items: center; justify-content: center; }
.ads-spotlight-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.ads-spotlight-feature-icon { font-size: 44px; color: var(--ads-navy); opacity: .4; }
.ads-spotlight-feature-body { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: #fff; border: 1px solid var(--ads-border); border-left: none; flex: 1; }
.ads-spotlight-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--ads-cream); color: var(--ads-gold); border-radius: 999px; padding: 4px 10px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; width: fit-content; }
.ads-spotlight-feature-body h3 { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--ads-navy); }
.ads-spotlight-feature-body p { margin: 0; color: var(--ads-muted); }
.ads-spotlight-feature-cta { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; background: var(--ads-navy); color: var(--ads-yellow); font-weight: 800; padding: 10px 20px; border-radius: 999px; text-decoration: none; font-size: .86rem; }
.ads-spotlight-dark { display: flex; align-items: center; gap: 32px; margin: 0 auto 60px; max-width: 1200px; border-radius: var(--ads-radius, 20px); background: var(--ads-navy); color: #fff; padding: 32px 40px; overflow: hidden; position: relative; }
.ads-spotlight-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 197, 49, .18), transparent 60%); pointer-events: none; }
.ads-spotlight-dark-media { width: 96px; height: 96px; border-radius: 18px; flex-shrink: 0; overflow: hidden; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.ads-spotlight-dark-media img { width: 100%; height: 100%; object-fit: cover; }
.ads-spotlight-dark-icon { font-size: 36px; color: var(--ads-yellow); }
.ads-spotlight-dark-body { position: relative; z-index: 1; flex: 1; }
.ads-spotlight-dark-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--ads-yellow); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.ads-spotlight-dark-body h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }
.ads-spotlight-dark-body p { margin: 0; color: rgba(255, 255, 255, .7); }
.ads-spotlight-dark-cta { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--ads-yellow); color: var(--ads-navy); font-weight: 800; padding: 12px 24px; border-radius: 999px; text-decoration: none; font-size: .88rem; white-space: nowrap; }
.ads-spotlight-strip { display: flex; align-items: center; gap: 14px; margin: 0 auto 60px; max-width: 1200px; padding: 14px 22px; border-radius: 14px; background: #f5f5f5; border: 1px solid var(--ads-border); }
.ads-spotlight-strip-logo { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; overflow: hidden; background: #fff; border: 1px solid var(--ads-border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .78rem; color: var(--ads-navy); }
.ads-spotlight-strip-logo img { width: 100%; height: 100%; object-fit: cover; }
.ads-spotlight-strip-text { flex: 1; min-width: 0; font-size: .88rem; color: var(--ads-navy); }
.ads-spotlight-strip-text span { color: var(--ads-muted); }
.ads-spotlight-strip-cta { flex-shrink: 0; font-weight: 800; font-size: .82rem; color: var(--ads-navy); text-decoration: none; white-space: nowrap; }
.ads-spotlight-strip-cta:hover { text-decoration: underline; }
.ads-spotlight-strip-badge { flex-shrink: 0; background: #fff; border: 1px solid var(--ads-border); color: var(--ads-muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 3px 8px; }
@media (max-width: 640px) {
.ads-spotlight-feature { flex-direction: column; }
.ads-spotlight-feature-media { width: 100%; height: 140px; }
.ads-spotlight-feature-body { border-left: 1px solid var(--ads-border); border-top: none; }
.ads-spotlight-dark { flex-direction: column; text-align: center; padding: 28px 24px; }
.ads-spotlight-dark-cta { width: 100%; justify-content: center; }
.ads-spotlight-strip { flex-wrap: wrap; }
}
/* about-grid-card's 3 concepts (Native / Icon / Gold) -- real .soft-card
items dropped straight into the mission grid, so they inherit that
class's border/radius/shadow from about.php's own site-wide styles. */
.ads-about-grid-native-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--ads-cream); color: var(--ads-gold); border-radius: 999px; padding: 4px 9px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.ads-about-grid-icon-tile { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.ads-about-grid-icon-tile.adsec-icon-md { display: flex; align-items: center; justify-content: center; background: var(--ads-navy); color: var(--ads-yellow); font-weight: 900; }
.ads-about-grid-icon-tile img { width: 100%; height: 100%; object-fit: cover; }
.ads-about-grid-icon-cta { display: inline-block; margin-top: 10px; background: var(--ads-navy); color: var(--ads-yellow); font-weight: 800; padding: 9px 18px; border-radius: 999px; text-decoration: none; font-size: .84rem; }
.ads-about-grid-gold { border-color: rgba(199, 143, 24, .35) !important; background: linear-gradient(180deg, var(--ads-cream), #fff); }
.ads-about-grid-gold-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--ads-cream); color: var(--ads-gold); border: 1px solid rgba(199, 143, 24, .3); border-radius: 999px; padding: 4px 9px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.ads-about-grid-gold-cta { color: var(--ads-gold); font-weight: 800; font-size: .84rem; text-decoration: none; display: inline-block; margin-top: 8px; }
/* about-sticky-bar's 3 concepts (Trust / Split / Pill). */
.ads-about-bar-trust { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--ads-navy); color: #fff; }
.ads-about-bar-trust-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--ads-yellow); color: var(--ads-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ads-about-bar-trust strong { font-size: .92rem; }
.ads-about-bar-trust-tagline { color: rgba(255, 255, 255, .65); font-size: .85rem; }
.ads-about-bar-trust-cta { margin-left: auto; background: var(--ads-yellow); color: var(--ads-navy); font-weight: 800; padding: 9px 20px; border-radius: 999px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 480px) {
.ads-about-bar-trust { padding: 12px 16px; gap: 10px; }
.ads-about-bar-trust-tagline { display: none; }
.ads-about-bar-trust-cta { padding: 8px 14px; font-size: .82rem; }
}
.ads-about-bar-split { display: flex; align-items: stretch; }
.ads-about-bar-split-text { flex: 1; background: linear-gradient(135deg, var(--ads-gold), #e0a930); color: #fff; display: flex; align-items: center; gap: 14px; padding: 14px 24px; min-width: 0; }
.ads-about-bar-split-text strong { font-size: .94rem; }
.ads-about-bar-split-text span { color: rgba(255, 255, 255, .85); font-size: .84rem; }
.ads-about-bar-split-cta { background: var(--ads-navy); color: var(--ads-yellow); font-weight: 800; display: flex; align-items: center; padding: 14px 28px; text-decoration: none; white-space: nowrap; }
@media (max-width: 480px) {
.ads-about-bar-split-text { padding: 12px 16px; }
.ads-about-bar-split-text span { display: none; }
.ads-about-bar-split-cta { padding: 12px 18px; font-size: .86rem; }
}
/* The "pill" concept floats centered, not flush -- overrides the generic
[data-slot$="-sticky-bar"] full-bleed rule for just this one variant. */
.ads-about-bar-pill-wrap {
display: flex !important;
justify-content: center;
background: transparent !important;
bottom: 20px !important;
padding: 0 20px !important;
box-shadow: none !important;
pointer-events: none;
}
.ads-about-bar-pill {
pointer-events: auto;
background: #fff;
border: 1px solid var(--ads-border);
border-radius: 999px;
box-shadow: 0 14px 34px rgba(26, 39, 48, .16);
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px 9px 9px;
max-width: 520px;
min-width: 0;
}
.ads-about-bar-pill > div { min-width: 0; overflow: hidden; }
.ads-about-bar-pill strong, .ads-about-bar-pill span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
.ads-about-bar-pill span { display: none; }
}
.ads-about-bar-pill-icon { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.ads-about-bar-pill-icon.adsec-icon-md { display: flex; align-items: center; justify-content: center; background: var(--ads-cream); color: var(--ads-gold); }
.ads-about-bar-pill-icon img { width: 100%; height: 100%; object-fit: cover; }
.ads-about-bar-pill strong { font-size: .86rem; color: var(--ads-navy); }
.ads-about-bar-pill span { color: var(--ads-muted); font-size: .78rem; }
.ads-about-bar-pill-cta { background: var(--ads-navy); color: var(--ads-yellow); font-weight: 800; padding: 8px 16px; border-radius: 999px; text-decoration: none; font-size: .8rem; white-space: nowrap; }
/* "Sticky bar" placements (e.g. find-jobs-sticky-bar) pin whatever style the
ad is rendered in to the bottom of the viewport, regardless of where in
the page's HTML render_country_ad_slot() is actually echoed -- position
is a property of the placement, not of the chosen visual style. */
[data-slot$="-sticky-bar"] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
margin: 0 !important;
max-width: none !important;
border-radius: 0 !important;
}
/* The default "card" style's image-uploaded variant (.country-ad-banner) is
a plain full-width ![]()
with height:auto -- fine inline on a page, but at
full viewport width inside a fixed sticky bar it can stretch to hundreds
of pixels tall depending on the uploaded image's own aspect ratio, turning
a "slim bar" into most of the screen. Cap it to a real bar height and crop
to fill instead, regardless of what the admin uploads. */
[data-slot$="-sticky-bar"].country-ad-banner,
[data-slot$="-sticky-bar"] .country-ad-banner {
max-width: none !important;
}
[data-slot$="-sticky-bar"].country-ad-banner img,
[data-slot$="-sticky-bar"] .country-ad-banner img {
width: 100%;
height: 84px;
object-fit: cover;
display: block;
}
/* A sticky bar sits on top of the corner "chat with us" / messenger widgets
(both are fixed bottom-right with a higher z-index so they stay clickable
above the bar) -- render_country_ad_slot() sets --ads-sticky-bar-h from the
bar's real rendered height once it's on the page, so the widget always
clears it vertically by that exact amount instead of a guessed fixed
offset. Defaults to 0 so pages with no active sticky-bar ad are
unaffected. Belt-and-suspenders: the bar itself also reserves a
right-hand gutter the same width as the widget's own footprint, so its
own content (e.g. a right-aligned CTA) never sits under the widget's
fixed corner regardless of whether the JS height sync has run yet. */
:root { --ads-sticky-bar-h: 0px; }
.fh-support-widget { bottom: calc(24px + var(--ads-sticky-bar-h)) !important; }
.tl-messenger { bottom: calc(28px + var(--ads-sticky-bar-h)) !important; }
[data-slot$="-sticky-bar"] { padding-right: 84px !important; box-sizing: border-box; }
@media (max-width: 767.98px) { [data-slot$="-sticky-bar"] { padding-right: 16px !important; } }
/* A "-divider" placement (e.g. find-providers-divider) sits inside a CSS
grid of result cards and is meant to break the grid rhythm on purpose --
spans every column instead of occupying a single grid cell. */
[data-slot$="-divider"] {
grid-column: 1 / -1;
}
/* A "-floating" placement's wrapper (render_country_ad_slot() in
marketplace.php adds this whenever the placement key ends in "-floating")
-- pins the ad to a screen corner with a dismiss button, independent of
whichever visual style was chosen for its content. */
.adsec-floating-wrap {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 900;
width: 280px;
max-width: calc(100vw - 48px);
}
.adsec-floating-close {
position: absolute;
top: 8px;
right: 10px;
z-index: 1;
background: none;
border: 0;
color: var(--ads-muted);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
/* Minimize control -- mobile only, since a floating widget is far more
likely to overlap real content (provider cards, the site's own chat
widget) on a small screen than on desktop. Sits left of the close button
so both remain reachable without overlapping each other. */
.adsec-floating-minimize { display: none; }
@media (max-width: 767.98px) {
.adsec-floating-minimize {
display: block;
position: absolute;
top: 8px;
right: 34px;
z-index: 1;
background: none;
border: 0;
color: var(--ads-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
}
/* The collapsed bubble -- hidden by default, shown only once
.adsec-floating-wrap has .is-minimized (mobile-only, toggled by the
minimize button above). Tapping it re-expands the widget. */
.adsec-floating-bubble {
display: none;
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--ads-border);
box-shadow: 0 10px 26px rgba(26, 39, 48, .18);
padding: 0;
cursor: pointer;
overflow: hidden;
}
.adsec-floating-bubble-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.adsec-floating-bubble-media.adsec-icon-md { background: var(--ads-navy); color: var(--ads-yellow); font-weight: 900; }
.adsec-floating-bubble-media img { width: 100%; height: 100%; object-fit: cover; }
.adsec-floating-wrap.is-minimized { width: 52px; }
.adsec-floating-wrap.is-minimized .adsec-floating-minimize,
.adsec-floating-wrap.is-minimized .adsec-floating-close,
.adsec-floating-wrap.is-minimized > *:not(.adsec-floating-bubble) { display: none; }
.adsec-floating-wrap.is-minimized .adsec-floating-bubble { display: block; }
/* S-grid: a "card" style shaped to match a real find-providers.php result
card exactly (reuses that page's own .provider-card* classes). */
.adsec-grid-card { border: 2px dashed var(--ads-accent); background: linear-gradient(180deg, var(--ads-cream) 0%, #fff 55%); }
.adsec-grid-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: var(--ads-cream); color: var(--ads-gold); border-radius: 999px; padding: 5px 11px; font-size: .72rem; font-weight: 800; margin-bottom: 10px; }
.adsec-grid-avatar { background: var(--ads-navy); color: var(--ads-yellow); }
.adsec-grid-tagline { color: var(--ads-muted); font-size: .85rem; margin: 0 0 14px; }
.adsec-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ads-accent); background: var(--ads-cream); border-radius: 999px; padding: 5px 14px; margin-bottom: 14px; }
.adsec-eyebrow-dark { background: rgba(255, 255, 255, .12); color: var(--ads-yellow); }
.adsec-eyebrow-onimage { background: rgba(255, 255, 255, .2); color: #fff; }
.adsec-tag { position: absolute; top: 10px; right: 12px; }
.adsec-cta-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--ads-yellow); color: var(--ads-navy); font-weight: 800; padding: 12px 26px; border-radius: 999px; text-decoration: none; }
.adsec-cta-dark { display: inline-flex; align-items: center; gap: 8px; background: var(--ads-navy); color: var(--ads-yellow); font-weight: 700; padding: 11px 24px; border-radius: 999px; text-decoration: none; }
.adsec-icon-lg, .adsec-icon-md { color: var(--ads-accent); }
.adsec-icon-lg span, .adsec-icon-md span { font-weight: 800; }
/* S1: hero takeover */
.adsec-s1 { position: relative; background: linear-gradient(120deg, var(--ads-navy), #2c3e4a); }
.adsec-s1-inner { max-width: 1200px; margin: 0 auto; padding: 60px 20px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .adsec-s1-inner { grid-template-columns: 1fr; } }
.adsec-s1-inner h1 { color: #fff; font-size: 2.1rem; font-weight: 800; margin: 0 0 14px; }
.adsec-s1-inner p { color: rgba(255, 255, 255, .7); margin: 0 0 22px; max-width: 460px; }
.adsec-s1-media { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 20px; height: 240px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.adsec-s1-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.adsec-s1-media span { color: var(--ads-yellow); font-size: 1.6rem; }
/* S2: featured partner section */
.adsec-s2 { padding: 60px 20px; background: #fff; }
.adsec-s2-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
@media (max-width: 900px) { .adsec-s2-inner { grid-template-columns: 1fr; } }
.adsec-s2-media { background: var(--ads-cream); border-radius: 24px; height: 260px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.adsec-s2-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.adsec-s2-inner h2 { font-size: 1.8rem; font-weight: 800; color: var(--ads-navy); margin: 0 0 14px; }
.adsec-s2-inner p { color: var(--ads-muted); margin: 0 0 20px; line-height: 1.6; }
/* S3: partner logo band */
.adsec-s3 { padding: 44px 20px; background: #fafafa; border-top: 1px solid var(--ads-border); border-bottom: 1px solid var(--ads-border); }
.adsec-s3-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.adsec-s3-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; margin-bottom: 24px; }
.adsec-s3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.adsec-s3-item { background: #fff; border: 1px solid var(--ads-border); border-radius: 14px; padding: 18px 8px; font-weight: 800; color: var(--ads-navy); font-size: .9rem; }
/* S4: full-bleed banner */
.adsec-s4 { position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ads-accent), var(--ads-yellow)); text-align: center; }
.adsec-s4::after { content: ""; position: absolute; inset: 0; background: rgba(26, 39, 48, .35); }
.adsec-s4-content { position: relative; z-index: 1; color: #fff; max-width: 540px; padding: 20px; }
.adsec-s4-content h2 { font-size: 1.8rem; font-weight: 800; margin: 0 0 10px; }
.adsec-s4-content p { margin: 0 0 18px; opacity: .9; }
/* S5: native/editorial card */
.adsec-s5 { padding: 50px 20px; background: #fff; }
.adsec-s5-card { max-width: 780px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; border: 1px solid var(--ads-border); border-radius: 20px; overflow: hidden; box-shadow: 0 14px 32px rgba(26, 39, 48, .08); }
@media (max-width: 640px) { .adsec-s5-card { grid-template-columns: 1fr; } }
.adsec-s5-media { background: var(--ads-navy); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; min-height: 180px; }
.adsec-s5-media img { width: 100%; height: 100%; object-fit: cover; }
.adsec-s5-media span { color: var(--ads-yellow); }
.adsec-s5-body { padding: 22px 24px; }
.adsec-s5-body h3 { font-size: 1.15rem; font-weight: 800; color: var(--ads-navy); margin: 8px 0; }
.adsec-s5-body p { color: var(--ads-muted); font-size: .9rem; margin: 0 0 14px; line-height: 1.6; }
/* S6: 50/50 split */
.adsec-s6-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; }
@media (max-width: 900px) { .adsec-s6-inner { grid-template-columns: 1fr; } }
.adsec-s6-real { background: var(--ads-cream); padding: 44px 36px; display: flex; flex-direction: column; justify-content: center; }
.adsec-s6-real h2 { font-size: 1.4rem; font-weight: 800; color: var(--ads-navy); margin: 0 0 10px; }
.adsec-s6-real p { color: var(--ads-muted); margin: 0; }
.adsec-s6-ad { background: var(--ads-navy); padding: 44px 36px; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.adsec-s6-ad h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 10px; }
.adsec-s6-ad p { color: rgba(255, 255, 255, .7); margin: 0 0 18px; }
/* S7: stats + sponsor */
.adsec-s7 { padding: 46px 20px; background: var(--ads-navy); color: #fff; }
.adsec-s7-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 26px; align-items: center; }
@media (max-width: 900px) { .adsec-s7-inner { grid-template-columns: 1fr 1fr; } }
.adsec-stat strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--ads-yellow); }
.adsec-stat span { font-size: .8rem; color: rgba(255, 255, 255, .6); }
.adsec-s7-sponsor { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 16px; padding: 16px 20px; text-align: left; }
.adsec-s7-sponsor strong { display: block; font-size: 1rem; }
.adsec-s7-sponsor span { font-size: .8rem; color: rgba(255, 255, 255, .65); }
/* S8: testimonial-style spotlight */
.adsec-s8 { padding: 50px 20px; background: var(--ads-cream); }
.adsec-s8-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.adsec-s8-quote-icon { font-size: 1.8rem; color: var(--ads-accent); margin-bottom: 12px; }
.adsec-s8-quote { font-size: 1.2rem; font-weight: 600; color: var(--ads-navy); line-height: 1.5; margin: 0 0 18px; }
.adsec-s8-who { display: flex; align-items: center; justify-content: center; gap: 12px; }
.adsec-s8-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ads-navy); color: var(--ads-yellow); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.adsec-s8-who strong { display: block; color: var(--ads-navy); font-size: .9rem; }
.adsec-s8-who span { font-size: .78rem; color: var(--ads-muted); }
/* S9: rotating sponsor carousel */
.adsec-s9 { padding: 50px 20px; background: #fff; }
.adsec-s9-inner { max-width: 600px; margin: 0 auto; text-align: center; position: relative; }
.adsec-s9-slide { display: none; }
.adsec-s9-slide.is-current { display: block; }
.adsec-s9-media { background: var(--ads-cream); border-radius: 20px; height: 170px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; margin-bottom: 16px; }
.adsec-s9-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.adsec-s9-media span { color: var(--ads-accent); }
.adsec-s9-slide h3 { margin: 0 0 6px; font-weight: 800; color: var(--ads-navy); }
.adsec-s9-slide p { color: var(--ads-muted); margin: 0; }
.adsec-s9-dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.adsec-s9-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(26, 39, 48, .15); cursor: pointer; }
.adsec-s9-dots span.is-current { background: var(--ads-accent); }
/* S10: category-integrated recommendation */
.adsec-s10 { padding: 20px; }
.adsec-s10-card { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--ads-cream), #fff); border: 2px dashed var(--ads-accent); border-radius: 18px; padding: 22px; }
.adsec-s10-icon { width: 60px; height: 60px; border-radius: 16px; background: var(--ads-navy); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.adsec-s10-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.adsec-s10-icon span { color: var(--ads-yellow); }
.adsec-s10-card h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; color: var(--ads-navy); }
.adsec-s10-card p { margin: 0; color: var(--ads-muted); font-size: .88rem; }
.adsec-s10-card > a { margin-left: auto; white-space: nowrap; }
/* ================= Popups ================= */
.ad-popup-modal, .adpop-p2, .adpop-p3, .adpop-p4, .adpop-p5, .adpop-p6, .adpop-p7, .adpop-p8, .adpop-p9, .adpop-p10 { position: fixed; z-index: 1000; }
.ad-popup-modal[hidden], .adpop-p2[hidden], .adpop-p3[hidden], .adpop-p4[hidden], .adpop-p5[hidden], .adpop-p6[hidden], .adpop-p7[hidden], .adpop-p8[hidden], .adpop-p9[hidden], .adpop-p10[hidden] { display: none; }
.adpop-close { position: fixed; top: 16px; right: 16px; z-index: 1002; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--ads-navy); font-size: 20px; line-height: 1; cursor: pointer; }
.adpop-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ads-muted); background: #f3f4f6; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.adpop-cta { display: block; width: 100%; box-sizing: border-box; text-align: center; background: var(--ads-yellow); color: var(--ads-navy); font-weight: 700; padding: 12px; border-radius: 8px; text-decoration: none; margin-top: 4px; }
.adpop-icon, .adpop-icon-sm, .adpop-icon-onDark { width: 56px; height: 56px; border-radius: 50%; background: var(--ads-cream); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; overflow: hidden; }
.adpop-icon img, .adpop-icon-sm img, .adpop-icon-onDark img { width: 100%; height: 100%; object-fit: cover; }
.adpop-icon span, .adpop-icon-sm span, .adpop-icon-onDark span { color: var(--ads-accent); font-weight: 800; }
.adpop-icon-sm { width: 44px; height: 44px; margin: 0; flex-shrink: 0; }
.adpop-icon-onDark { background: rgba(255, 255, 255, .15); }
.adpop-icon-onDark span { color: var(--ads-yellow); }
/* P1 uses .ad-popup-modal (already styled below, unified with the simple/default look) */
.ad-popup-modal { inset: 0; background: rgba(26, 39, 48, .55); align-items: center; justify-content: center; padding: 20px; }
.ad-popup-modal:not([hidden]) { display: flex; }
.ad-popup-modal-dialog { position: relative; background: #fff; border-radius: 20px; max-width: 380px; width: 100%; padding: 30px 26px; text-align: center; box-shadow: 0 30px 70px rgba(26, 39, 48, .35); }
.ad-popup-modal-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--ads-cream); overflow: hidden; }
.ad-popup-modal-body h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--ads-navy); }
.ad-popup-modal-body p { color: var(--ads-muted); font-size: 14px; margin: 0 0 18px; }
.ad-popup-modal-cta { display: block; background: var(--ads-yellow); color: var(--ads-navy); font-weight: 700; padding: 12px; border-radius: 8px; text-decoration: none; }
/* P2: full-screen takeover */
.adpop-p2 { inset: 0; background: linear-gradient(120deg, var(--ads-navy), #2c3e4a); }
.adpop-p2:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.adpop-p2-card { text-align: center; color: #fff; max-width: 480px; padding: 20px; }
.adpop-p2-card h2 { font-size: 2rem; font-weight: 800; margin: 0 0 14px; }
.adpop-p2-card p { color: rgba(255, 255, 255, .7); margin: 0 0 20px; }
/* P3: bottom sheet */
.adpop-p3 { left: 0; right: 0; bottom: 0; }
.adpop-p3:not([hidden]) { display: block; }
.adpop-p3-card { background: #fff; border-radius: 24px 24px 0 0; padding: 26px 24px; max-width: 600px; margin: 0 auto; box-shadow: 0 -20px 50px rgba(26, 39, 48, .25); text-align: center; }
.adpop-handle { width: 40px; height: 5px; background: #e5e7eb; border-radius: 99px; margin: 0 auto 16px; }
/* P4: side drawer */
.adpop-p4 { top: 0; right: 0; bottom: 0; width: 320px; max-width: 90vw; }
.adpop-p4:not([hidden]) { display: flex; align-items: center; }
.adpop-p4-card { background: #fff; padding: 32px 26px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; box-shadow: -20px 0 50px rgba(26, 39, 48, .25); width: 100%; }
/* P5: top drop-down */
.adpop-p5 { top: 0; left: 0; right: 0; }
.adpop-p5:not([hidden]) { display: block; }
.adpop-p5-card { background: var(--ads-navy); color: #fff; padding: 16px 60px 16px 24px; text-align: center; }
.adpop-p5-card a { color: var(--ads-yellow); font-weight: 700; text-decoration: underline; margin-left: 8px; }
/* P6: corner toast */
.adpop-p6 { bottom: 20px; right: 20px; width: 300px; }
.adpop-p6:not([hidden]) { display: block; }
.adpop-p6-card { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 20px 45px rgba(26, 39, 48, .25); display: flex; gap: 12px; align-items: flex-start; }
.adpop-p6-card strong { display: block; color: var(--ads-navy); font-size: .92rem; }
.adpop-p6-card span { color: var(--ads-muted); font-size: .8rem; display: block; margin-bottom: 8px; }
.adpop-p6-card a { color: var(--ads-accent); font-weight: 700; font-size: .82rem; text-decoration: none; }
/* P7: urgency/countdown */
.adpop-p7 { inset: 0; background: rgba(26, 39, 48, .55); }
.adpop-p7:not([hidden]) { display: flex; align-items: center; justify-content: center; padding: 20px; }
.adpop-p7-card { background: #fff; border-radius: 18px; max-width: 380px; width: 100%; overflow: hidden; text-align: center; }
.adpop-p7-head { background: #c0392b; color: #fff; padding: 10px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.adpop-p7-body { padding: 26px; }
/* P8: minimal bottom toast bar */
.adpop-p8 { left: 0; right: 0; bottom: 0; }
.adpop-p8:not([hidden]) { display: block; }
.adpop-p8-card { background: var(--ads-navy); color: #fff; padding: 14px 60px 14px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: .9rem; }
.adpop-p8-card a { color: var(--ads-yellow); font-weight: 700; text-decoration: underline; }
/* P9: big image modal */
.adpop-p9 { inset: 0; background: rgba(26, 39, 48, .6); }
.adpop-p9:not([hidden]) { display: flex; align-items: center; justify-content: center; padding: 20px; }
.adpop-p9-card { background: #fff; border-radius: 20px; max-width: 460px; width: 100%; overflow: hidden; box-shadow: 0 30px 70px rgba(26, 39, 48, .35); }
.adpop-p9-media { background: linear-gradient(135deg, var(--ads-accent), var(--ads-yellow)); height: 220px; margin: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.adpop-p9-media img { width: 100%; height: 100%; object-fit: cover; }
.adpop-p9-media span { color: #fff; }
.adpop-p9-body { padding: 22px 26px; text-align: center; }
/* P10: coupon/ticket style */
.adpop-p10 { inset: 0; background: rgba(26, 39, 48, .55); }
.adpop-p10:not([hidden]) { display: flex; align-items: center; justify-content: center; padding: 20px; }
.adpop-p10-card { background: #fff; border-radius: 16px; max-width: 380px; width: 100%; padding: 26px; text-align: center; border: 2px dashed var(--ads-accent); }
.adpop-coupon { background: var(--ads-cream); border-radius: 10px; padding: 10px; font-weight: 800; color: var(--ads-navy); margin: 14px 0; }
/* Header notification bell (includes/notification-bell.php), shared across
app-navbar.php, fh-header.php and navbar.php -- see that file's own
docblock for why it lives here rather than style.css/figma-home-demo.css. */
.tl-notif-bell { position: relative; display: inline-flex; }
.tl-notif-bell-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: .2s;
}
.tl-notif-bell-toggle:hover { background: rgba(255, 255, 255, .16); }
.glass-nav .tl-notif-bell-toggle,
.fh-nav .tl-notif-bell-toggle {
border-color: rgba(26, 39, 48, .18);
background: rgba(26, 39, 48, .05);
color: var(--ads-navy);
}
.glass-nav .tl-notif-bell-toggle:hover,
.fh-nav .tl-notif-bell-toggle:hover { background: rgba(26, 39, 48, .1); }
.tl-notif-bell-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: var(--ads-gold);
color: var(--ads-navy);
font-size: .68rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.tl-notif-bell-badge.is-hidden { display: none; }
.tl-notif-bell-panel {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 340px;
max-width: 90vw;
max-height: 420px;
background: #fff;
color: #1a2730;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(17, 17, 17, .18);
overflow: hidden;
flex-direction: column;
z-index: 1050;
}
.tl-notif-bell.is-open .tl-notif-bell-panel { display: flex; }
.tl-notif-bell-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(17, 17, 17, .08);
flex-shrink: 0;
}
.tl-notif-bell-mark-all {
border: 0;
background: none;
color: var(--ads-gold);
font-size: .78rem;
font-weight: 700;
cursor: pointer;
}
.tl-notif-bell-mark-all.is-hidden { display: none; }
.tl-notif-bell-header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.tl-notif-bell-sound {
border: 0;
background: none;
padding: 0;
line-height: 1;
color: var(--ads-muted);
font-size: .9rem;
cursor: pointer;
}
.tl-notif-bell-sound.is-hidden { display: none; }
.tl-notif-bell-sound.is-on { color: var(--ads-gold); }
.tl-notif-bell-list { overflow-y: auto; flex: 1; }
.tl-notif-bell-empty { padding: 28px 16px; text-align: center; color: var(--ads-muted); }
.tl-notif-item {
display: block;
width: 100%;
text-align: left;
border: 0;
border-bottom: 1px solid rgba(17, 17, 17, .06);
background: none;
padding: 12px 16px;
cursor: pointer;
transition: .15s;
}
.tl-notif-item:hover { background: rgba(199, 143, 24, .06); }
.tl-notif-item.is-unread { background: rgba(199, 143, 24, .08); }
.tl-notif-item-title { font-weight: 700; font-size: .88rem; margin: 0 0 3px; color: #1a2730; }
.tl-notif-item-body { font-size: .8rem; color: var(--ads-muted); margin: 0 0 4px; line-height: 1.4; }
.tl-notif-item-time { font-size: .72rem; color: var(--ads-muted); }
.tl-notif-bell-footer { padding: 10px 16px; text-align: center; border-top: 1px solid rgba(17, 17, 17, .08); flex-shrink: 0; }
.tl-notif-bell-footer a { color: var(--ads-gold); font-weight: 700; font-size: .82rem; text-decoration: none; }
/* Icon-only logout button for the public site headers (navbar.php,
fh-header.php) -- same circular icon-button shape/size as the
notification bell toggle right next to it, kept as a link (not shown
in a dropdown here since neither of these two headers has one, unlike
the dashboard's app-navbar.php). Red-tinted hover to read clearly as a
sign-out action, distinct from the bell's neutral hover. */
.tl-icon-btn-logout {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(26, 39, 48, .18);
background: rgba(26, 39, 48, .05);
color: var(--ads-navy);
font-size: 1rem;
transition: .2s;
flex-shrink: 0;
}
.tl-icon-btn-logout:hover {
background: rgba(220, 53, 69, .12);
border-color: rgba(220, 53, 69, .3);
color: #dc3545;
}
/* Role-context pill on a notification, shown only for dual-role accounts
whose client and freelancer notifications otherwise mix in one list
(see tasklinko_notification_role_context() for how this is determined). */
.tl-notif-item-role {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
background: rgba(26, 39, 48, .08);
color: var(--ads-navy);
font-size: .62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .03em;
vertical-align: middle;
}