/* ============================================================ CODEWISHED HOMEPAGE ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); /* ============================================================ OVERRIDE TWENTY TWENTY-FIVE (and most themes) CONTENT WIDTH The .cwh-page class is added to via PHP body_class filter. We target every common theme content wrapper and blow it wide open. ============================================================ */ /* Twenty Twenty-Five specific overrides */ body.cwh-page .wp-site-blocks > * { padding: 0 !important; } body.cwh-page .entry-content, body.cwh-page .post-content, body.cwh-page .page-content, body.cwh-page article.page, body.cwh-page .wp-block-post-content, body.cwh-page .is-layout-constrained, body.cwh-page .wp-block-group.is-layout-constrained, body.cwh-page .is-layout-flow, body.cwh-page main, body.cwh-page #content, body.cwh-page #primary, body.cwh-page .content-area { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Kill Gutenberg's built-in content width constraint */ body.cwh-page .entry-content > *, body.cwh-page .post-content > *, body.cwh-page .wp-block-post-content > * { max-width: none !important; } /* Kill any padding on the shortcode's paragraph wrapper */ body.cwh-page .entry-content p:has(> .cwh-root), body.cwh-page .entry-content > p:first-child { margin: 0 !important; padding: 0 !important; } /* ---- Root ---- */ .cwh-root { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 !important; padding: 0 !important; display: block; --white: #ffffff; --off: #f7f6fd; --border: #e5e2f5; --text: #12102a; --muted: #6b6490; --accent: #7c3aed; --accent2: #f43f8e; --accent3: #f97316; --grad: linear-gradient(135deg, #f43f8e 0%, #f97316 45%, #7c3aed 100%); --shadow: 0 2px 8px rgba(18,16,42,.06), 0 8px 32px rgba(18,16,42,.08); --shadowhov:0 4px 16px rgba(18,16,42,.1), 0 20px 56px rgba(18,16,42,.14); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; } /* Gradient text utility */ .cwh-gradient-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---- Layout helpers ---- */ .cwh-container { max-width: 1200px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; } .cwh-section { padding: 96px 0; } .cwh-center { text-align: center; } .cwh-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.18); border-radius: 100px; padding: 5px 16px; margin-bottom: 18px; } .cwh-title { font-family: 'Syne', sans-serif; font-weight: 800; line-height: 1.12; color: var(--text); margin: 0 0 16px; } .cwh-title--xl { font-size: clamp(38px, 5.5vw, 68px); } .cwh-title--lg { font-size: clamp(28px, 3.8vw, 48px); text-align: center; } .cwh-title--md { font-size: clamp(24px, 3vw, 38px); } .cwh-body { font-size: 17px; color: var(--muted); line-height: 1.8; margin: 0 0 32px; } .cwh-body--center { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; } /* ---- Buttons ---- */ .cwh-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 100px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease; cursor: pointer; border: none; line-height: 1; white-space: nowrap; } .cwh-btn--grad { background: var(--grad); color: #fff !important; box-shadow: 0 4px 20px rgba(244,63,142,.3); } .cwh-btn--grad:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(244,63,142,.45); } .cwh-btn--outline { background: transparent; color: var(--muted) !important; border: 2px solid var(--border); } .cwh-btn--outline:hover { border-color: var(--accent); color: var(--accent) !important; } .cwh-btn--outline-white { background: rgba(255,255,255,.12); color: #fff !important; border: 1.5px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); } .cwh-btn--outline-white:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); } .cwh-btn--xl { font-size: 18px; padding: 18px 44px; } /* ---- Entry animations ---- */ .cwh-fade { opacity: 0; transform: translateY(22px); animation: cwh-in .65s cubic-bezier(.22,.68,0,1.15) forwards var(--d,0s); } @keyframes cwh-in { to { opacity:1; transform:translateY(0); } } /* ================================================================ HERO — dark, full-bleed, vibrant ================================================================ */ .cwh-hero { background: #0d0920; position: relative; padding: 140px 48px 100px; text-align: center; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 88vh; } /* Blobs */ .cwh-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: cwh-float 14s ease-in-out infinite alternate; } .cwh-blob--a { width:700px; height:700px; background:rgba(244,63,142,.28); top:-20%; left:-15%; animation-duration:16s; } .cwh-blob--b { width:550px; height:550px; background:rgba(124,58,237,.3); top:5%; right:-12%; animation-duration:12s; animation-delay:3s; } .cwh-blob--c { width:450px; height:450px; background:rgba(249,115,22,.2); bottom:-15%; left:30%; animation-duration:18s; animation-delay:6s; } @keyframes cwh-float { to { transform: translate(40px,-30px) scale(1.12); } } .cwh-hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: 80px 80px; pointer-events:none; } .cwh-hero__inner { position:relative; z-index:1; max-width:860px; margin:0 auto; } .cwh-hero-pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 100px; padding: 7px 20px; font-size: 13px; color: rgba(255,255,255,.55); letter-spacing: .3px; margin-bottom: 32px; backdrop-filter: blur(10px); } .cwh-hero-pill__dot { width:7px; height:7px; background: #f97316; border-radius:50%; animation: cwh-pulse 2s ease-in-out infinite; flex-shrink:0; } @keyframes cwh-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.75)} } .cwh-hero__h1 { font-family: 'Syne', sans-serif; font-size: clamp(48px, 8vw, 96px); font-weight: 800; color: #fff; line-height: 1.04; letter-spacing: -1.5px; margin: 0 0 26px; } .cwh-hero__sub { font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,.52); line-height: 1.75; max-width: 640px; margin: 0 auto 44px; } .cwh-hero__btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .cwh-hero__stats { display: flex; align-items: center; justify-content: center; gap: 44px; margin-top: 68px; padding-top: 44px; border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; } .cwh-stat strong { display: block; font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 5px; } .cwh-stat span { font-size:13px; color:rgba(255,255,255,.4); } .cwh-stat-div { width:1px; height:36px; background:rgba(255,255,255,.1); } /* ================================================================ HOW IT WORKS — off-white ================================================================ */ .cwh-how { background: var(--off); } .cwh-steps { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; gap: 0; align-items: start; margin-top: 12px; } .cwh-step-arrow { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--border); padding-top: 88px; } .cwh-step { background: var(--white); border: 1.5px solid var(--border); border-radius: 20px; padding: 40px 32px; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s, border-color .25s; } .cwh-step:hover { box-shadow:var(--shadowhov); transform:translateY(-5px); } .cwh-step--1:hover { border-color: var(--accent2); } .cwh-step--2:hover { border-color: var(--accent3); } .cwh-step--3:hover { border-color: var(--accent); } .cwh-step__num { font-family:'Syne',sans-serif; font-size:11px; font-weight:800; letter-spacing:2.5px; color:var(--muted); margin-bottom:18px; } .cwh-step__icon { font-size:40px; margin-bottom:18px; display:block; } .cwh-step h3 { font-family:'Syne',sans-serif; font-size:21px; font-weight:800; color:var(--text); margin:0 0 12px; } .cwh-step p { font-size:15px; color:var(--muted); line-height:1.7; margin:0; } /* ================================================================ WHY CODEWISHED — white ================================================================ */ .cwh-why { background: var(--white); } .cwh-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .cwh-checklist { list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:14px; } .cwh-checklist li { display:flex; align-items:center; gap:14px; font-size:15px; color:var(--text); font-weight:500; } .cwh-check { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex-shrink:0; background: var(--grad); border-radius:50%; font-size:11px; color:#fff; font-weight:900; box-shadow:0 2px 8px rgba(244,63,142,.3); } /* Terminal widget */ .cwh-term { background: #f5f3ff; border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadowhov); font-family: 'Courier New', monospace; font-size: 14px; } .cwh-term__bar { background: #ede9fe; padding: 14px 18px; display: flex; align-items: center; gap: 7px; border-bottom: 1.5px solid var(--border); } .cwh-term__bar span { width:12px; height:12px; border-radius:50%; } .cwh-term__bar span:nth-child(1){background:#ff5f57;} .cwh-term__bar span:nth-child(2){background:#febc2e;} .cwh-term__bar span:nth-child(3){background:#28c840;} .cwh-term__label { margin-left:10px; font-size:12px; color:var(--muted); font-family:'Plus Jakarta Sans',sans-serif; } .cwh-term__body { padding:28px 24px; line-height:2.2; } .cwh-term__line { display:block; } .cwh-tc { color:#9ca3af; } .cwh-tv { color:#7c3aed; } .cwh-ts { color:#d97706; } .cwh-tn { color:#0891b2; } .cwh-tf { color:#e11d48; } .cwh-cur { animation: cwh-blink 1s step-end infinite; color:var(--muted); } @keyframes cwh-blink { 50%{opacity:0} } /* ================================================================ WHAT I BUILD — off-white ================================================================ */ .cwh-build { background: var(--off); } .cwh-build-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .cwh-build-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 18px; padding: 30px 24px; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s, border-color .25s; } .cwh-build-card:hover { box-shadow:var(--shadowhov); transform:translateY(-4px); border-color:var(--accent); } .cwh-build-card__icon { font-size:30px; margin-bottom:14px; display:block; } .cwh-build-card h3 { font-size:15px; font-weight:700; color:var(--text); margin:0 0 8px; } .cwh-build-card p { font-size:13px; color:var(--muted); line-height:1.65; margin:0; } /* ================================================================ RECENT WISHES — white ================================================================ */ .cwh-recent { background: var(--white); } .cwh-recent-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .cwh-recent-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s, border-color .25s; } .cwh-recent-card:hover { box-shadow:var(--shadowhov); transform:translateY(-4px); border-color:var(--accent); } .cwh-recent-card__top { margin-bottom:14px; } .cwh-recent-card h3 { font-size:16px; font-weight:700; color:var(--text); margin:0 0 10px; } .cwh-recent-card p { font-size:14px; color:var(--muted); line-height:1.65; margin:0 0 18px; } .cwh-recent-card__foot { font-size:12px; color:var(--muted); } .cwh-badge { display:inline-block; padding:4px 12px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.3px; background:rgba(124,58,237,.08); color:var(--accent); border:1px solid rgba(124,58,237,.18); } /* ================================================================ FAQ — off-white ================================================================ */ .cwh-faq { background: var(--off); } .cwh-faq .cwh-container { max-width: 780px; } .cwh-accordions { display:flex; flex-direction:column; gap:10px; margin-top:8px; } .cwh-accordion { background:var(--white); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s; } .cwh-accordion.open { border-color:var(--accent); box-shadow:0 4px 20px rgba(124,58,237,.1); } .cwh-accordion__q { width:100%; background:none; border:none; padding:22px 26px; text-align:left; font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:600; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; } .cwh-accordion__q:hover { color:var(--accent); } .cwh-accordion__icon { width:28px; height:28px; border-radius:50%; background:var(--off); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--muted); flex-shrink:0; transition:transform .25s, background .2s, border-color .2s, color .2s; } .cwh-accordion.open .cwh-accordion__icon { transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:#fff; } .cwh-accordion__body { max-height:0; overflow:hidden; transition:max-height .32s ease; } .cwh-accordion.open .cwh-accordion__body { max-height:300px; } .cwh-accordion__body p { padding:0 26px 24px; color:var(--muted); line-height:1.8; font-size:15px; margin:0; } /* ================================================================ FINAL CTA — dark, full-bleed ================================================================ */ .cwh-cta { background: #0d0920; position: relative; padding: 130px 48px; text-align: center; overflow: hidden; } .cwh-cta__blob-a { width:600px; height:600px; background:rgba(244,63,142,.28); top:-30%; left:-10%; animation-duration:15s; } .cwh-cta__blob-b { width:500px; height:500px; background:rgba(124,58,237,.3); bottom:-30%; right:-10%; animation-duration:13s; animation-delay:4s; } .cwh-cta-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:80px 80px; pointer-events:none; } .cwh-cta__inner { position:relative; z-index:1; } .cwh-cta__h2 { font-family:'Syne',sans-serif; font-size:clamp(34px,5.5vw,66px); font-weight:800; color:#ffffff !important; text-shadow: 0 2px 20px rgba(0,0,0,.4); line-height:1.12; letter-spacing:-1px; margin:0 0 18px; } .cwh-cta__sub { font-size:19px; color:#ffffff !important; opacity: 0.9; text-shadow: 0 1px 8px rgba(0,0,0,.3); margin:0 0 48px; } /* ================================================================ RESPONSIVE ================================================================ */ @media(max-width:1024px){ .cwh-container { padding:0 32px; } .cwh-build-grid { grid-template-columns:repeat(2,1fr); } .cwh-why-grid { grid-template-columns:1fr; gap:48px; } } @media(max-width:860px){ .cwh-section { padding:72px 0; } .cwh-container { padding:0 24px; } .cwh-steps { grid-template-columns:1fr; } .cwh-step-arrow { display:none; } .cwh-recent-grid { grid-template-columns:repeat(2,1fr); } .cwh-hero { padding:110px 24px 72px; min-height:auto; } .cwh-cta { padding:80px 24px; } } @media(max-width:600px){ .cwh-section { padding:56px 0; } .cwh-build-grid { grid-template-columns:1fr; } .cwh-recent-grid { grid-template-columns:1fr; } .cwh-hero__stats { gap:24px; } .cwh-stat-div { display:none; } .cwh-hero__h1 { letter-spacing:-.5px; } }