/* ========================================================= CASH.LAND — Sell Land (Landing) FULL GLASS THEME (scoped to #cl-sell-land) - Works over bright “sunny” photographic backgrounds - Strong contrast + focus rings for accessibility - Each element has its own glass style (not shared) ========================================================= */ /* ------------ Global scope & tokens ------------ */ #cl-sell-land { /* Color tokens tuned for glass on bright photos */ --ink: #0b3d1a; /* main text on glass */ --ink-weak: #1b3a24; /* muted text */ --brand-500: #38b000; /* green */ --brand-700: #0e7f23; --accent-grad: linear-gradient(180deg,var(--brand-500),var(--brand-700)); --focus: #ffd24a; /* visible focus ring */ --ring: rgba(255,255,255,.75); /* inner hairline */ /* Glass system */ --glass-bg: rgba(255,255,255,.14); /* panel fill */ --glass-bg-strong: rgba(255,255,255,.22); --glass-stroke: rgba(255,255,255,.45); --glass-stroke-soft: rgba(255,255,255,.35); --glass-shadow: 0 10px 40px rgba(0,0,0,.18); --glass-blur: 12px; --glass-sat: 120%; /* Corners / spacing */ --r-lg: 20px; --r-md: 14px; --r-sm: 10px; margin: 150px auto; } /* Page container & background helper (optional soft veil for legibility) */ .cl-sell-land-main { max-width: 1200px; margin: 0 auto; padding: 0 10px; } @media (min-width: 1221px){ .cl-sell-land-main { padding: 0; } } /* (Optional) If your site puts the SUNNY photo on , add a subtle veil here to help glass stand out, without killing the vibe. */ #cl-sell-land::before{ content:""; position: fixed; inset: 0; z-index: -1; /* Very light gradient tint (tweak/disable as desired) */ background: radial-gradient(1200px 800px at 80% 10%, rgba(255,255,255,.10), transparent 60%), radial-gradient(1200px 800px at 20% 90%, rgba(255,255,255,.06), transparent 60%); pointer-events: none; } /* Base typography & utilities (Elementor-proof) */ #cl-sell-land :where(*){ box-sizing: border-box; } #cl-sell-land img{ max-width:100%; height:auto; display:block; } #cl-sell-land h1,h2,h3{ color: var(--ink); text-wrap: balance; text-shadow: 0 1px 0 rgba(255,255,255,.35); } #cl-sell-land h1{ font-weight: 900; line-height: 1.12; font-size: clamp(32px,6vw,56px); letter-spacing: -.02em; } #cl-sell-land h2{ font-weight: 900; line-height: 1.18; font-size: clamp(26px,3.4vw,38px); } #cl-sell-land h3{ font-weight: 900; line-height: 1.22; font-size: clamp(18px,2.2vw,24px); } #cl-sell-land p, #cl-sell-land li{ color: var(--ink-weak); margin-top:5px; font-weight:600; font-size: 1rem; line-height: 1.55; } #cl-sell-land a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; } #cl-sell-land .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } #cl-sell-land :focus-visible{ outline:4px solid var(--focus); outline-offset: 3px; border-radius: 12px; } #cl-sell-land .section{ margin: 0 auto clamp(2rem, 6vw, 5rem); } /* Reveal on scroll */ #cl-sell-land .section-animate{ opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; } #cl-sell-land .section-animate.visible{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ #cl-sell-land .section-animate{ transition: none; transform: none; } } /* ========================================================= HERO (Glass) ========================================================= */ #cl-sell-land .hero{ position: relative; display: grid; place-items: center; border-radius: var(--r-lg); /* The hero image should be placed via HTML behind this panel */ } #cl-sell-land .hero .hero-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--r-lg); z-index: -2; } #cl-sell-land .hero::after{ /* light inner aurora halo to boost legibility over bright skies */ content:""; position:absolute; inset:0; border-radius: var(--r-lg); background: radial-gradient(500px 300px at 50% 10%, rgba(255,255,255,.22), transparent 60%), radial-gradient(900px 600px at 50% 100%, rgba(255,255,255,.14), transparent 60%); z-index:-1; pointer-events:none; } #cl-sell-land .hero .hero-content{ width: min(100%, 1040px); padding: clamp(16px, 2.6vw, 28px); border-radius: var(--r-lg); background: var(--glass-bg-strong); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow); } #cl-sell-land .hero .intro{ color: var(--ink); font-size: clamp(1.05rem, 2.2vw, 1.25rem); margin: .5rem 0 1.25rem; } /* ========================================================= PRIMARY FORM (Glass) ========================================================= */ #cl-sell-land .offer-form{ margin: 0 auto; padding: clamp(14px, 2.2vw, 22px); border-radius: var(--r-lg); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow); } #cl-sell-land .offer-form .bottom-form-trust{ color: var(--ink-weak); font-weight: 800; } /* Fieldset & legend */ #cl-sell-land .of-fieldset{ border:0; padding:0; margin: 0 0 clamp(14px,2.2vw,20px); } #cl-sell-land .of-legend{ font-weight: 900; color: var(--ink); margin: 0 0 .5rem; letter-spacing: -.01em; } /* Form grid */ #cl-sell-land .of-grid{ display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } #cl-sell-land .of-col{ display: flex; flex-direction: column; } #cl-sell-land .of-col-2{ grid-column: span 2; } @media (max-width: 820px){ #cl-sell-land .of-grid{ grid-template-columns: 1fr; } #cl-sell-land .of-col-2{ grid-column: auto; } } /* Labels & controls (individual glass controls) */ #cl-sell-land .offer-form label{ font-weight: 800; font-size: .95rem; color: var(--ink); margin: 0 0 .35rem; } #cl-sell-land .offer-form input[type="text"], #cl-sell-land .offer-form input[type="email"], #cl-sell-land .offer-form input[type="tel"], #cl-sell-land .offer-form input[type="number"], #cl-sell-land .offer-form input[type="file"], #cl-sell-land .offer-form select, #cl-sell-land .offer-form textarea{ width: 100%; min-height: 46px; padding: .7rem .85rem; border-radius: var(--r-sm); background: rgba(255,255,255,.55); /* lighter fill for control readability */ border: 1px solid var(--ring); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 1px rgba(0,0,0,.03); } #cl-sell-land .offer-form textarea{ min-height: 112px; resize: vertical; } #cl-sell-land .offer-form input[type="file"]{ padding: .45rem .6rem; } #cl-sell-land .offer-form :focus-visible{ outline: 4px solid var(--focus); outline-offset: 2px; } /* Checkbox rows */ #cl-sell-land .of-label{ font-weight: 800; color: var(--ink); display:block; margin: 0 0 .25rem; } #cl-sell-land .of-check{ display:inline-flex; align-items:center; gap:.5rem; font-weight: 750; color: var(--ink-weak); margin: 0 .75rem .35rem 0; } #cl-sell-land .of-check input{ width: 1.15rem; height: 1.15rem; } /* Submit button (own glass style) */ #cl-sell-land .offer-form .cta-button{ display:inline-flex; align-items:center; justify-content:center; min-height: 50px; padding: 0 1.35rem; margin-top: .35rem; font-weight: 900; font-size: 1.05rem; color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: var(--accent-grad); box-shadow: 0 14px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.35); cursor: pointer; } #cl-sell-land .offer-form .cta-button:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0,0,0,.24); } /* ========================================================= TRUST BAR (Glass) ========================================================= */ #cl-sell-land .trust-bar{ border-radius: var(--r-lg); padding: clamp(14px,2.2vw,18px); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow); } #cl-sell-land .trust-items{ display:flex; flex-wrap:wrap; gap: 12px; align-items:center; justify-content:center; padding:0; margin:0; } #cl-sell-land .trust-item{ display:inline-flex; align-items:center; gap:.6rem; padding: 10px 12px; color: var(--ink); border-radius: 999px; background: rgba(255,255,255,.28); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border: 1px solid var(--glass-stroke-soft); box-shadow: 0 6px 18px rgba(0,0,0,.12); text-decoration: none; font-weight: 850; } #cl-sell-land .trust-icon{ width:28px; height:28px; min-width:28px; display:grid; place-items:center; border-radius: 999px; color:#0e7f23; background: rgba(255,255,255,.55); border: 1px solid var(--ring); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } #cl-sell-land .trust-clarity{ margin:.35rem auto 0; text-align:center; color: var(--ink-weak); font-weight: 700; } /* ========================================================= PROOF STRIP (Review thumbs) — Glass wrapper (Shortcode content inside remains; we frame it with glass) ========================================================= */ #cl-sell-land .proof-strip{ border-radius: var(--r-lg); padding: clamp(14px,2.2vw,18px); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow); max-width: 1200px; margin: 0 auto; } #cl-sell-land .proof-strip h2{ text-align:center; } #cl-sell-land .proof-strip .proof-sub{ text-align:center; color: var(--ink-weak); margin-top: -.25rem; } /* If thumbs output a UL, ensure sensible spacing; their cards will sit over the page BG. If your shortcode emits figure/figcaption, we add just a gentle card edge here. */ #cl-sell-land .proof-strip :where(ul,ol){ list-style:none; padding:0; margin: 8px 0 0; } #cl-sell-land .proof-strip :where(li a, .thumb){ border-radius: var(--r-md); overflow: hidden; display:block; text-decoration:none; box-shadow: 0 8px 22px rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.5); } #cl-sell-land .proof-strip :where(figure){ margin:0; } /* ========================================================= TESTIMONIALS (Glass) ========================================================= */ #cl-sell-land .testimonial-carousel{ border-radius: var(--r-lg); padding: clamp(16px,2.4vw,22px); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow); margin-top:80px; } #cl-sell-land #testimonials-title{ text-align:center; color: var(--ink);} #cl-sell-land .testimonial-carousel .clq-wrap{ position:relative; isolation:isolate; } /* If the slider prints “cards”, give each its own micro-glass */ #cl-sell-land .testimonial-carousel :where(blockquote, .clq-card, .testimonial){ background: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.55); border-radius: var(--r-md); padding: 18px 14px; color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.10); } /* ========================================================= FAQ (Glass) ========================================================= */ #cl-sell-land .faq-card{ border-radius: var(--r-lg); padding: clamp(16px,2.4vw,22px); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow); } #cl-sell-land .faq-subhead{ margin: 2.25rem 0 0; font-size: 1.6em;} #cl-sell-land .faq-list{ display:grid; gap: 10px; margin-top: 10px; } #cl-sell-land .faq-item{ border-radius: var(--r-md); overflow:hidden; background: rgba(255,255,255,.26); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 6px 14px rgba(0,0,0,.08); } #cl-sell-land .faq-summary{ padding: 12px 14px; cursor: pointer; list-style: none; } #cl-sell-land .faq-summary::-webkit-details-marker{ display:none; } #cl-sell-land .faq-item[open] .faq-summary{ background: rgba(255,255,255,.34); } #cl-sell-land .faq-a{ padding: 0 14px 14px; } #cl-sell-land .faq-more a{ font-weight: 850; text-decoration: none; border-bottom: 1px dashed currentColor; } #cl-sell-land .faq-cta .micro-cta{ display:inline-flex; align-items:center; gap:.5ch; padding:10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: var(--accent-grad); color:#fff; font-weight: 900; box-shadow: 0 8px 18px rgba(0,0,0,.16); } /* ========================================================= BUTTONS (generic glass badge if used elsewhere) ========================================================= */ #cl-sell-land .cta-button{ display:inline-flex; align-items:center; justify-content:center; min-height: 48px; padding: 0 1.25rem; font-weight: 900; font-size: 1.05rem; color:#fff; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: var(--accent-grad); box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); cursor: pointer; } /* ========================================================= VISUAL MARGINS (since every panel has glass) ========================================================= */ #cl-sell-land .hero { margin-top: clamp(90px, 12vh, 180px); } #cl-sell-land .trust-bar, #cl-sell-land .proof-strip, #cl-sell-land .testimonial-carousel, #cl-sell-land .faq-card{ max-width: 1200px; margin-inline: auto; } /* ========================================================= SAFETY & PERFORMANCE ========================================================= */ /* If the user prefers less transparency, harden the glass fills for contrast */ @media (prefers-reduced-transparency: reduce){ #cl-sell-land .hero .hero-content, #cl-sell-land .offer-form, #cl-sell-land .trust-bar, #cl-sell-land .proof-strip, #cl-sell-land .testimonial-carousel, #cl-sell-land .faq-card, #cl-sell-land .faq-item{ background: rgba(255,255,255,.88); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Safari fallback: if backdrop-filter unsupported, increase fill for contrast */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ #cl-sell-land .hero .hero-content, #cl-sell-land .offer-form, #cl-sell-land .trust-bar, #cl-sell-land .proof-strip, #cl-sell-land .testimonial-carousel, #cl-sell-land .faq-card, #cl-sell-land .faq-item{ background: rgba(255,255,255,.90); } } /* ========================================================= CASH.LAND — Sell Land (Landing) GLOBAL FULL-PAGE BACKGROUND + SMOOTH SCROLL (scoped to pages that contain #cl-sell-land) ========================================================= */ /* Smooth scroll only on this page; keep header offset safe */ html:has(#cl-sell-land) { scroll-behavior: smooth; scroll-padding-top: 80px; /* adjust to your sticky header height */ } /* Fixed, full-bleed background layer behind everything on the page */ .cl-page-bg{ position: fixed; inset: 0; z-index: -3; /* sit behind all site chrome + content */ background-image: var(--page-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; /* Parallax feel without jank */ will-change: transform; transform: translateZ(0); /* Subtle veil to help glass contrast; tune as desired */ /* overlay handled by section/containers already; keep this clean */ } /* iOS Safari fallback: avoid background-attachment: fixed issues */ @supports not (background-attachment: fixed) { .cl-page-bg { background-attachment: scroll; } } /* Optional: add a barely-there gradient veil for readability */ #cl-sell-land::before{ content:""; position: fixed; inset: 0; z-index: -2; pointer-events:none; background: radial-gradient(1200px 800px at 80% 10%, rgba(255,255,255,.08), transparent 60%), radial-gradient(1200px 800px at 20% 90%, rgba(255,255,255,.05), transparent 60%); } /* Hero no longer needs a background ; keep the glass card */ #cl-sell-land .hero{ position: relative; display: grid; place-items: center; border-radius: var(--r-lg); /* remove old inner image layer if any linger */ } #cl-sell-land .hero .hero-bg{ display:none !important; } /* Keep your existing glass styles … (from your previous CSS) */ /* Full-page background layer */ .cl-page-bg{ position: fixed; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; /* don’t block clicks/scroll */ } /* (Optional) If an old hero exists, hide it */ #cl-sell-land .hero .hero-bg{ display:none !important; } /* (Nice-to-have) Smooth scroll with header offset */ html:has(#cl-sell-land){ scroll-behavior: smooth; scroll-padding-top: 80px; /* adjust to your sticky header height */ } /* ===== 3-STEP CARDS — same layout, GLASS look ===== */ #cl-sell-land{ /* fallbacks so accents work even if not defined above */ --accent: var(--brand-500, #38b000); --accent-rgba: 56 176 0; /* for soft inset stroke */ } /* Wrapper keeps your flex layout + spacing, but is now glass */ #cl-sell-land .cards-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; padding:28px; border-radius:18px; background: rgba(255,255,255,.28); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow); /* remove any old background like var(--bg-light) */ } /* Keep your heading sizing/placement, nudge color to brand */ #cl-sell-land .section-heading{ width:100%; text-align:center; font-size: clamp(28px,3.2vw,40px); font-weight:700; padding:.5rem 1rem 1.25rem; margin:0 0 .25rem; } /* Cards: same dimensions & motion, but glass + soft accent inset */ #cl-sell-land .card{ position: relative; isolation:isolate; background: rgba(255,255,255,.32); border-radius:18px; padding:44px 36px; text-align:center; min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; /* glass edges + subtle accent “frame” */ border: 1px solid var(--glass-stroke-soft); box-shadow: 0 12px 28px rgba(0,0,0,.10), inset 0 0 0 2px rgba(var(--accent-rgba), .35); /* same animation you had */ opacity:0; transform:translateY(24px); transition:opacity .6s, transform .6s, box-shadow .25s, translate .25s; will-change:opacity, transform; /* same flex sizing */ flex:1 1 200px; max-width:380px; color: var(--ink); } #cl-sell-land .card.in-view{ opacity:1; transform:none; } #cl-sell-land .card:hover{ transform:translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.16), inset 0 0 0 2px rgba(var(--accent-rgba), .45); } /* Step badge, icon, text — keep your spacing/scale */ #cl-sell-land .step-number{ font-weight:800; color:var(--accent); margin-bottom:8px; letter-spacing:.06em; font-size:.95rem; display:inline-block; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.55); border: 1px solid var(--ring); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } #cl-sell-land .step-icon[aria-hidden="true"] svg{ display:block; width:64px; height:64px; margin:6px auto 12px; } #cl-sell-land .card h3{ margin:10px 0 8px; font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.25; } #cl-sell-land .card p{ max-width:32ch; margin-top:10px; line-height:1.5; color: var(--ink-weak); text-align: left; } #cl-sell-land .resources{margin: 40px 0 0;} #cl-sell-land .trust-item a{ background: none; border: 0; box-shadow: none; padding: 0; margin: 0; backdrop-filter: none; } /* ===== TRUST BAR (fixed for wrapping on small screens) ===== */ /* Container: a flexible row that wraps */ #cl-sell-land .trust-items{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; padding: 0; margin: 0; list-style: none; } /* Each pill (li) — glass badge */ #cl-sell-land .trust-item{ display: inline-flex; align-items: center; gap: .6rem; padding: 10px 12px; color: var(--ink); border-radius: 999px; background: rgba(255,255,255,.28); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border: 1px solid var(--glass-stroke-soft); box-shadow: 0 6px 18px rgba(0,0,0,.12); text-decoration: none; font-weight: 850; min-width: 0; /* allow children to wrap */ max-width: 100%; /* prevent overflow on tiny screens */ } /* Anchor variant (the reviews link) should look identical */ #cl-sell-land .trust-item.trust-item--link{ display: inline-flex; } /* Icon stays fixed, text can wrap */ #cl-sell-land .trust-icon{ flex: 0 0 auto; width: 28px; height: 28px; min-width: 28px; display: grid; place-items: center; border-radius: 999px; color:#0e7f23; background: rgba(255,255,255,.55); border: 1px solid var(--ring); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } /* Make the text wrap instead of overflowing */ #cl-sell-land .trust-item strong, #cl-sell-land .trust-item .trust-badge-text{ display: block; white-space: normal; /* no nowrap */ overflow-wrap: anywhere; /* wrap long tokens */ word-break: normal; text-wrap: balance; /* modern browsers; safe if ignored */ -webkit-hyphens: auto; hyphens: auto; max-width: 40ch; /* keeps pills from getting too wide */ } /* Tiny screens: stack text under icon for extra room */ @media (max-width: 420px){ #cl-sell-land .trust-item{ align-items: flex-start; padding: 10px 12px; } #cl-sell-land .trust-item { gap: .5rem; } #cl-sell-land .trust-item strong, #cl-sell-land .trust-item .trust-badge-text{ max-width: 100%; } }