/* Theme Name: ChimeBuddy Site Theme URI: https://chimebuddy.com Author: Kane Development Description: Lightweight marketing theme for ChimeBuddy (landing + policy/support pages). Version: 1.1.0 Text Domain: chimebuddy-site */ :root{ --bg:#FFFDF7; --card:#FFFFFF; --text:#243B53; --muted:#627D98; --border:#E6E8EC; --accent:#D6B25E; --accent2:#B8943B; --mint:#DFF7F0; --lav:#EEF0FF; --peach:#FFF1E7; --shadow: 0 12px 36px rgba(20, 33, 51, .12); --shadow2: 0 8px 22px rgba(20, 33, 51, .10); --shadow3: 0 18px 44px rgba(20, 33, 51, .14); --radius: 18px; --radius2: 26px; --max: 1120px; --pad: 22px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; /* ✅ Band “base” colors (used for waves + subtle borders) */ --band-hero: #FFFDF7; --band-cream: #FBF7EF; --band-mint: #F3FBF7; --band-lav: #F6F6FF; --band-sky: #F3F7FF; /* ✅ Prose page background */ --band-prose: #FFFDF7; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; /* ✅ IMPORTANT: no more repeating “global” background bands on Each section now owns its own background, so transitions align to content. */ background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; } img{ max-width:100%; height:auto; display:block; } a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: underline; } .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } /* ---------------- Header / Nav ---------------- */ .cb-topbar{ position: sticky; top:0; z-index:50; backdrop-filter: blur(14px); background: rgba(255, 253, 247, .76); border-bottom: 1px solid rgba(230,232,236,.92); } .cb-topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 14px 0; } .cb-brand{ display:flex; align-items:center; gap: 12px; text-decoration:none !important; } .cb-brand img{ height: 36px; width:auto; } .cb-brand .title{ font-weight: 950; letter-spacing: .2px; } .cb-brand .tag{ color: var(--muted); font-size: 13px; margin-top: -2px; } .cb-nav ul{ list-style:none; display:flex; gap: 6px; padding:0; margin:0; } .cb-nav li{ margin:0; } .cb-nav a{ display:inline-flex; padding: 10px 12px; border-radius: 12px; text-decoration:none !important; font-weight: 800; color: #1f3146; } .cb-nav a:hover{ background: rgba(214,178,94,.14); } .cb-nav .current-menu-item > a{ background: rgba(214,178,94,.20); border: 1px solid rgba(214,178,94,.35); } /* ---------------- Mobile nav (hamburger support) ---------------- */ .cb-nav-toggle{ display:none; border: 1px solid rgba(230,232,236,.95); background: rgba(255,255,255,.65); border-radius: 14px; width: 46px; height: 42px; align-items:center; justify-content:center; box-shadow: 0 1px 0 rgba(0,0,0,.03); cursor:pointer; } .cb-burger{ width: 20px; height: 2px; background: #1f3146; position: relative; display:block; border-radius: 2px; } .cb-burger::before, .cb-burger::after{ content:""; position:absolute; left:0; width: 20px; height: 2px; background: #1f3146; border-radius: 2px; } .cb-burger::before{ top: -6px; } .cb-burger::after { top: 6px; } @media (max-width: 720px){ .cb-nav-toggle{ display:inline-flex; } .cb-brand img{ height: 42px; width:auto; } .cb-topbar{ overflow: visible; } .cb-topbar-inner{ position: relative; } .cb-nav{ position:absolute; left: 0; right: 0; top: calc(100% + 10px); display:none; padding: 10px; border-radius: 18px; background: rgba(255, 253, 247, .92); border: 1px solid rgba(230,232,236,.92); backdrop-filter: blur(14px); box-shadow: var(--shadow3); z-index: 100; } .cb-nav ul{ flex-direction: column; gap: 6px; } .cb-nav a{ width: 100%; justify-content: flex-start; } body.cb-nav-open .cb-nav{ display:block; } body.cb-nav-open .cb-burger{ background: transparent; } body.cb-nav-open .cb-burger::before{ top: 0; transform: rotate(45deg); } body.cb-nav-open .cb-burger::after { top: 0; transform: rotate(-45deg); } } /* Buttons */ .cb-buttons{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .btn{ display:inline-flex; align-items:center; justify-content:center; border-radius: 14px; padding: 12px 16px; font-weight: 900; border: 1px solid rgba(230,232,236,.95); box-shadow: 0 1px 0 rgba(0,0,0,.03); } .btn-primary{ background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%); color:#182635; border: 1px solid rgba(184,148,59,.75); text-decoration:none !important; } .btn-primary:hover{ filter: brightness(1.02); } .btn-ghost{ background: rgba(255,255,255,.65); } .btn-ghost:hover{ background: rgba(214,178,94,.14); text-decoration:none; } .pill{ display:inline-flex; gap: 8px; align-items:center; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid rgba(230,232,236,.95); box-shadow: 0 6px 14px rgba(20,33,51,.06); font-size: 13px; font-weight: 800; color: #1f3146; } /* Cards */ .cb-card{ background: rgba(255,255,255,.88); border: 1px solid rgba(230,232,236,.95); box-shadow: var(--shadow); border-radius: var(--radius2); padding: 18px; } .cb-card.soft{ box-shadow: var(--shadow2); border-radius: var(--radius); } .muted{ color: var(--muted); } /* ---------------- Section Bands ---------------- */ .cb-band{ position: relative; width: 100%; } /* HERO band (own background) */ .cb-band--hero{ background: radial-gradient(1200px 650px at 15% 0%, rgba(255,243,214,.95) 0%, rgba(255,243,214,0) 60%), radial-gradient(900px 560px at 88% 8%, rgba(238,240,255,.95) 0%, rgba(238,240,255,0) 62%), radial-gradient(900px 620px at 80% 88%, rgba(223,247,240,.95) 0%, rgba(223,247,240,0) 58%), linear-gradient(180deg, var(--band-hero) 0%, #FBF7EF 100%); } /* “What ChimeBuddy includes” band */ .cb-band--cream{ background: radial-gradient(900px 620px at 85% 15%, rgba(255,243,214,.55) 0%, rgba(255,243,214,0) 62%), linear-gradient(180deg, var(--band-cream) 0%, #FFFDF7 100%); } /* Residents/Staff band */ .cb-band--mint{ background: radial-gradient(950px 650px at 82% 22%, rgba(223,247,240,.95) 0%, rgba(223,247,240,0) 58%), radial-gradient(900px 620px at 18% 80%, rgba(255,243,214,.45) 0%, rgba(255,243,214,0) 62%), linear-gradient(180deg, var(--band-mint) 0%, #FFFFFF 100%); } /* How it works band */ .cb-band--lav{ background: radial-gradient(900px 560px at 15% 18%, rgba(238,240,255,.95) 0%, rgba(238,240,255,0) 62%), radial-gradient(900px 620px at 80% 82%, rgba(223,247,240,.45) 0%, rgba(223,247,240,0) 58%), linear-gradient(180deg, var(--band-lav) 0%, #FFFFFF 100%); } /* Testimonial band */ .cb-band--sky{ background: radial-gradient(1000px 650px at 70% 10%, rgba(238,240,255,.85) 0%, rgba(238,240,255,0) 62%), radial-gradient(900px 620px at 20% 85%, rgba(255,243,214,.45) 0%, rgba(255,243,214,0) 62%), linear-gradient(180deg, var(--band-sky) 0%, #FFFFFF 100%); } /* Optional: add a subtle “separator” so the band edges feel intentional */ .cb-band--cream, .cb-band--mint, .cb-band--lav, .cb-band--sky{ border-top: 1px solid rgba(230,232,236,.55); } /* ---------------- Home ---------------- */ .cb-hero{ position: relative; padding: 74px 0 30px; overflow: hidden; } /* Keep the hero sparkle overlay, but now it sits on the hero band background */ .cb-hero:before{ content:""; position:absolute; inset:-160px -60px auto -60px; height: 420px; background: radial-gradient(260px 220px at 18% 45%, rgba(214,178,94,.28) 0%, rgba(214,178,94,0) 70%), radial-gradient(320px 260px at 70% 30%, rgba(153, 179, 255, .28) 0%, rgba(153,179,255,0) 70%), radial-gradient(260px 220px at 85% 68%, rgba(170, 233, 214, .30) 0%, rgba(170,233,214,0) 70%); pointer-events:none; } .cb-hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; position: relative; z-index: 1; } @media (max-width: 920px){ .cb-hero-grid{ grid-template-columns: 1fr; } } .h1{ font-size: 50px; line-height: 1.03; letter-spacing: -0.9px; margin: 0 0 14px; padding-top: 15px; } @media (max-width: 520px){ .h1{ font-size: 38px; } } .lede{ font-size: 18px; color: var(--muted); margin: 0 0 18px; } .hero-media{ position: relative; padding: 14px; } .hero-media .frame{ border-radius: 28px; overflow:hidden; border: 1px solid rgba(230,232,236,.95); box-shadow: var(--shadow); background: rgba(255,255,255,.70); } .hero-media .float{ position:absolute; width: 130px; max-width: 42%; border-radius: 18px; border: 1px solid rgba(230,232,236,.95); box-shadow: 0 12px 24px rgba(20,33,51,.12); background: rgba(255,255,255,.78); padding: 10px; } .hero-media .float.one{ top: -6px; right: -2px; transform: rotate(3deg); } .hero-media .float.two{ bottom: -8px; left: -4px; transform: rotate(-4deg); } .hero-media .float .k{ font-size: 12px; color: var(--muted); font-weight: 900; } .hero-media .float .v{ font-size: 16px; font-weight: 950; margin-top: 2px; } .badges{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } /* Give each content section a little more vertical breathing room so the band reads clearly */ .section{ padding: 42px 0; } .section h2{ margin: 0 0 10px; font-size: 26px; letter-spacing: -0.2px; } .section p{ margin: 0 0 10px; color: var(--muted); } .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } } .feature{ display:flex; gap: 12px; align-items:flex-start; } .icon{ width: 44px; height: 44px; flex: 0 0 44px; border-radius: 16px; background: rgba(214,178,94,.18); border: 1px solid rgba(214,178,94,.35); display:flex; align-items:center; justify-content:center; } .icon svg{ width: 22px; height: 22px; opacity: .9; } .feature h3{ margin: 0 0 6px; font-size: 16px; } .feature p{ margin: 0; color: var(--muted); font-size: 14px; } /* ---------------- Residents/Staff 2x2 block ---------------- */ .rs-grid{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 18px; align-items: start; grid-template-areas: "res staff" "shot1 shot2"; } .rs-res { grid-area: res; } .rs-staff { grid-area: staff; } .rs-shot1 { grid-area: shot1; } .rs-shot2 { grid-area: shot2; } .rs-shot{ padding: 0; overflow: hidden; } /* PHONE ONLY stacking */ @media (max-width: 720px){ .rs-grid{ grid-template-columns: 1fr; row-gap: 14px; grid-template-areas: "res" "shot1" "staff" "shot2"; } } .split{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 980px){ .split{ grid-template-columns: 1fr; } } .panel{ border-radius: var(--radius2); border: 1px solid rgba(230,232,236,.95); box-shadow: var(--shadow2); padding: 18px; } .panel.mint{ background: rgba(223,247,240,.55); } .panel.lav{ background: rgba(238,240,255,.55); } .panel h3{ margin:0 0 6px; } .panel ul{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); } .panel li{ margin: 6px 0; } /* ---------------- Steps ---------------- */ .steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 980px){ .steps{ grid-template-columns: 1fr; } } .step{ padding: 16px; border-radius: var(--radius2); background: rgba(255,255,255,.80); border: 1px solid rgba(230,232,236,.95); box-shadow: 0 10px 26px rgba(20,33,51,.08); } .step .n{ width: 36px; height: 36px; border-radius: 14px; background: rgba(214,178,94,.18); border: 1px solid rgba(214,178,94,.35); display:flex; align-items:center; justify-content:center; font-weight: 950; } .step h4{ margin: 10px 0 6px; font-size: 15px; } .step p{ margin: 0; color: var(--muted); font-size: 14px; } /* ---------------- Testimonial ---------------- */ .quote{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 14px; align-items:center; } @media (max-width: 980px){ .quote{ grid-template-columns: 1fr; } } .quote .photo{ border-radius: var(--radius2); overflow:hidden; border: 1px solid rgba(230,232,236,.95); box-shadow: var(--shadow2); } blockquote{ margin:0; padding: 18px; border-radius: var(--radius2); background: rgba(255,255,255,.80); border: 1px solid rgba(230,232,236,.95); box-shadow: 0 10px 26px rgba(20,33,51,.08); } blockquote p{ margin:0; font-size: 16px; color: #1f3146; } blockquote .who{ margin-top: 10px; color: var(--muted); font-weight: 900; font-size: 13px; } /* ---------------- Waves ---------------- */ .wave{ display:block; width:100%; height: 70px; margin:0; } .wave path{ fill: var(--band-cream); } /* ===================================================================================== ✅ INTERNAL PAGES (Support / Privacy / Terms / etc.) These pages are likely outputting WordPress "the_content()" without your home sections, so we style the default content area, headings, lists, links, and add padding/cards. ===================================================================================== */ /* Give non-home pages a pleasant background band + spacing under sticky header */ body:not(.home) #cb-main{ background: radial-gradient(1200px 650px at 15% 0%, rgba(255,243,214,.70) 0%, rgba(255,243,214,0) 60%), radial-gradient(900px 560px at 88% 8%, rgba(238,240,255,.70) 0%, rgba(238,240,255,0) 62%), radial-gradient(900px 620px at 80% 88%, rgba(223,247,240,.70) 0%, rgba(223,247,240,0) 58%), linear-gradient(180deg, var(--band-prose) 0%, #FFFFFF 100%); } /* Main content wrapper (works if your page template uses .content) */ .content{ padding: 44px 0 46px; } /* If a page template doesn't include .content, ensure main still has breathing room */ body:not(.home) main#cb-main{ padding: 26px 0 46px; } /* The "prose" container becomes a centered card for readability */ .prose{ max-width: 900px; margin: 0 auto; padding: 22px 22px; background: rgba(255,255,255,.88); border: 1px solid rgba(230,232,236,.95); border-radius: var(--radius2); box-shadow: var(--shadow); } /* Better mobile padding */ @media (max-width: 720px){ .content{ padding: 26px 0 34px; } .prose{ padding: 18px 16px; } } /* Headings */ .prose h1{ font-size: 42px; line-height: 1.06; margin: 6px 0 18px; letter-spacing: -0.7px; color: #1f3146; } @media (max-width: 720px){ .prose h1{ font-size: 38px; } } .prose h2{ font-size: 22px; margin: 22px 0 10px; letter-spacing: -0.2px; color: #1f3146; } .prose h3{ font-size: 18px; margin: 18px 0 8px; color: #1f3146; } .prose p{ margin: 0 0 14px; color: var(--muted); font-size: 16px; } /* Lists (your screenshot shows big bullets close to edge; fix spacing + readability) */ .prose ul, .prose ol{ margin: 10px 0 18px; padding-left: 22px; color: var(--muted); } .prose li{ margin: 8px 0; } .prose li strong{ color: #1f3146; } /* Links inside prose should look like links */ .prose a{ color: #1f3146; text-decoration: underline; text-decoration-color: rgba(214,178,94,.55); text-underline-offset: 3px; } .prose a:hover{ text-decoration-color: rgba(184,148,59,.85); } /* Horizontal rules */ .prose hr{ border:0; height:1px; background: rgba(230,232,236,.95); margin: 18px 0; } /* Emphasis blocks (nice for “For App Review / Demos” etc.) */ .prose blockquote{ margin: 16px 0; padding: 14px 16px; border-radius: 18px; background: rgba(214,178,94,.10); border: 1px solid rgba(214,178,94,.25); box-shadow: 0 10px 26px rgba(20,33,51,.06); } .prose blockquote p{ margin:0; color: #1f3146; } /* Code */ .prose code{ background: rgba(214,178,94,.16); padding: 2px 6px; border-radius: 8px; } .prose pre{ background: rgba(31,49,70,.06); border: 1px solid rgba(230,232,236,.95); padding: 14px; border-radius: 18px; overflow:auto; } /* Tables (if any policy pages include tables) */ .prose table{ width: 100%; border-collapse: collapse; margin: 14px 0 18px; overflow:hidden; border-radius: 18px; border: 1px solid rgba(230,232,236,.95); } .prose th, .prose td{ text-align:left; padding: 10px 12px; border-bottom: 1px solid rgba(230,232,236,.95); color: var(--muted); } .prose th{ color: #1f3146; font-weight: 900; background: rgba(255,255,255,.85); } .prose tr:last-child td{ border-bottom: 0; } /* If your WP editor outputs a .wp-block-group or .wp-block-columns, keep it tidy */ .prose .wp-block-columns{ gap: 14px; } .prose .wp-block-column{ background: rgba(255,255,255,.72); border: 1px solid rgba(230,232,236,.95); border-radius: 18px; padding: 14px; } /* Make sure long emails don't overflow on mobile */ .prose a[href^="mailto:"], .prose a[href^="tel:"]{ word-break: break-word; } /* ---------------- Footer ---------------- */ .cb-footer{ margin-top: 24px; padding: 26px 0 38px; border-top: 1px solid rgba(230,232,236,.95); color: var(--muted); background: linear-gradient(180deg, var(--band-cream) 0%, #FFFDF7 100%); } .cb-footer a{ color: var(--muted); } .cb-footer .cols{ display:flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items:center; } .cb-footer ul{ list-style:none; display:flex; gap: 12px; padding:0; margin:0; } .cb-footer li{ margin:0; } .small{ font-size: 13px; }