/* Theme Name: Johnny's Websites Theme URI: https://johnnyswebsites.com Author: Cybercom Author URI: https://getcybercom.com Description: A colorful, modern, responsive WordPress theme for web hosting, WordPress design, domains, SSL and maintenance services. Includes Bootstrap 5, a multi-mode theme switcher (Light / Dark / Gradient), a super-admin settings panel, a contact form backed by a MySQL table, and ready-made Privacy, Terms and Sitemap pages. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: johnnyswebsites Tags: bootstrap, responsive, dark-mode, custom-colors, hosting, business */ /* ============================================================ THEME COLOR MODES — controlled by data-theme on Light (default), Dark, and Gradient. Switcher lives top-right. ============================================================ */ :root, [data-theme="light"] { --jw-bg: #ffffff; --jw-surface: #f6f8fc; --jw-surface-2: #eef2fb; --jw-text: #1c2230; --jw-muted: #5a6478; --jw-border: #e2e8f4; --jw-primary: #6d28d9; /* purple */ --jw-primary-2: #06b6d4; /* cyan */ --jw-accent: #ec4899; /* magenta/pink */ --jw-accent-2: #f59e0b; /* amber */ --jw-success: #10b981; --jw-gradient: linear-gradient(135deg, #6d28d9 0%, #ec4899 50%, #06b6d4 100%); --jw-hero-bg: linear-gradient(135deg, #f5f0ff 0%, #eafcff 100%); --jw-card-shadow: 0 10px 30px rgba(40, 30, 80, .08); --jw-navbar-bg: rgba(255,255,255,.85); --jw-footer-bg: #0f1222; --jw-footer-text: #c7cde0; } [data-theme="dark"] { --jw-bg: #0c0f1a; --jw-surface: #141a2b; --jw-surface-2: #1b2236; --jw-text: #e7ecf7; --jw-muted: #9aa6c0; --jw-border: #28304a; --jw-primary: #a78bfa; --jw-primary-2: #22d3ee; --jw-accent: #f472b6; --jw-accent-2: #fbbf24; --jw-success: #34d399; --jw-gradient: linear-gradient(135deg, #7c3aed 0%, #db2777 50%, #0891b2 100%); --jw-hero-bg: radial-gradient(1200px 500px at 80% -10%, rgba(124,58,237,.35), transparent), radial-gradient(1000px 500px at 0% 10%, rgba(6,182,212,.25), transparent), #0c0f1a; --jw-card-shadow: 0 10px 30px rgba(0,0,0,.45); --jw-navbar-bg: rgba(12,15,26,.8); --jw-footer-bg: #070912; --jw-footer-text: #aeb6cf; } [data-theme="gradient"] { --jw-bg: #120b2e; --jw-surface: rgba(255,255,255,.06); --jw-surface-2: rgba(255,255,255,.1); --jw-text: #f5f3ff; --jw-muted: #cabffb; --jw-border: rgba(255,255,255,.16); --jw-primary: #c4b5fd; --jw-primary-2: #67e8f9; --jw-accent: #f9a8d4; --jw-accent-2: #fcd34d; --jw-success: #6ee7b7; --jw-gradient: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%); --jw-hero-bg: linear-gradient(135deg, #2b1055 0%, #7e2a8e 45%, #0e5a78 100%); --jw-card-shadow: 0 12px 40px rgba(0,0,0,.4); --jw-navbar-bg: rgba(18,11,46,.6); --jw-footer-bg: rgba(0,0,0,.4); --jw-footer-text: #e9e3ff; } [data-theme="gradient"] body { background: linear-gradient(135deg, #1a0b3d 0%, #3b1063 40%, #0b3a52 100%) fixed; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--jw-text); background: var(--jw-bg); line-height: 1.6; transition: background-color .3s ease, color .3s ease; } a { color: var(--jw-primary); text-decoration: none; } a:hover { color: var(--jw-accent); } h1,h2,h3,h4,h5 { font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } .jw-section { padding: 84px 0; } .jw-eyebrow { display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color: var(--jw-primary-2); margin-bottom:.6rem; } .jw-gradient-text { background: var(--jw-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .jw-lead { color: var(--jw-muted); font-size:1.12rem; } /* ============================================================ NAVBAR ============================================================ */ .jw-navbar { background: var(--jw-navbar-bg); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--jw-border); position: sticky; top: 0; z-index: 1030; } .jw-brand { font-weight: 900; font-size: 1.35rem; letter-spacing:-.03em; } .jw-brand .dot { color: var(--jw-accent); } .jw-navbar .nav-link { color: var(--jw-text) !important; font-weight: 600; } .jw-navbar .nav-link:hover { color: var(--jw-primary) !important; } /* Theme switcher (top-right) */ .jw-theme-switch { display:flex; gap:6px; align-items:center; } .jw-theme-switch button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--jw-border); background: var(--jw-surface); color: var(--jw-text); cursor: pointer; display:grid; place-items:center; font-size: 15px; transition: transform .15s, box-shadow .15s; } .jw-theme-switch button:hover { transform: translateY(-2px); } .jw-theme-switch button.active { border-color: transparent; color:#fff; background: var(--jw-gradient); box-shadow: 0 6px 18px rgba(109,40,217,.35); } /* ============================================================ BUTTONS ============================================================ */ .jw-btn { display:inline-block; font-weight:700; border:none; cursor:pointer; padding: .8rem 1.6rem; border-radius: 999px; transition: transform .15s, box-shadow .15s, filter .15s; } .jw-btn-primary { color:#fff; background: var(--jw-gradient); box-shadow: 0 10px 24px rgba(109,40,217,.35); } .jw-btn-primary:hover { transform: translateY(-2px); filter:brightness(1.05); color:#fff; } .jw-btn-ghost { color: var(--jw-text); background: var(--jw-surface); border:1px solid var(--jw-border); } .jw-btn-ghost:hover { transform: translateY(-2px); color: var(--jw-primary); } /* ============================================================ HERO ============================================================ */ .jw-hero { background: var(--jw-hero-bg); padding: 96px 0 84px; position:relative; overflow:hidden; } .jw-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } .jw-hero .jw-blob { position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; z-index:0; } .jw-hero .blob-1 { width:340px;height:340px; background:#8b5cf6; top:-80px; right:-60px; } .jw-hero .blob-2 { width:280px;height:280px; background:#06b6d4; bottom:-100px; left:-40px; } .jw-hero .container { position:relative; z-index:1; } .jw-hero-badges span { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem; background: var(--jw-surface); border:1px solid var(--jw-border); border-radius:999px; padding:.4rem .9rem; margin:.25rem; } /* ============================================================ CARDS / SERVICES ============================================================ */ .jw-card { background: var(--jw-surface); border:1px solid var(--jw-border); border-radius: 18px; padding: 28px; height:100%; box-shadow: var(--jw-card-shadow); transition: transform .2s ease, box-shadow .2s ease; } .jw-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(40,30,80,.16); } .jw-icon { width:56px;height:56px;border-radius:14px;display:grid;place-items:center; font-size:24px;color:#fff;background:var(--jw-gradient); margin-bottom:16px; } .jw-feature-list { list-style:none; padding:0; margin:0; } .jw-feature-list li { padding:6px 0 6px 28px; position:relative; color:var(--jw-muted); } .jw-feature-list li::before { content:"✓"; position:absolute; left:0; color:var(--jw-success); font-weight:900; } /* ============================================================ PRICING ============================================================ */ .jw-price { background: var(--jw-surface); border:1px solid var(--jw-border); border-radius:20px; padding:32px; height:100%; box-shadow: var(--jw-card-shadow); position:relative; transition:transform .2s; } .jw-price:hover { transform: translateY(-6px); } .jw-price.featured { border:2px solid transparent; background: linear-gradient(var(--jw-surface),var(--jw-surface)) padding-box, var(--jw-gradient) border-box; } .jw-price .tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--jw-gradient); color:#fff; font-weight:700; font-size:.75rem; padding:.3rem .9rem; border-radius:999px; } .jw-price .amount { font-size:2.6rem; font-weight:900; } .jw-price .amount small { font-size:1rem; font-weight:600; color:var(--jw-muted); } /* ============================================================ FORMS ============================================================ */ .jw-form .form-control, .jw-form .form-select { background: var(--jw-bg); color: var(--jw-text); border:1px solid var(--jw-border); border-radius:12px; padding:.8rem 1rem; } .jw-form .form-control:focus { border-color: var(--jw-primary); box-shadow: 0 0 0 .2rem rgba(109,40,217,.18); background: var(--jw-bg); color: var(--jw-text); } .jw-alert { border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem; } .jw-alert-success { background: rgba(16,185,129,.12); color: var(--jw-success); border:1px solid rgba(16,185,129,.3); } .jw-alert-error { background: rgba(236,72,153,.12); color: var(--jw-accent); border:1px solid rgba(236,72,153,.3); } /* ============================================================ CONTENT / PAGES ============================================================ */ .jw-page { padding: 64px 0; } .jw-page-header { background: var(--jw-hero-bg); padding: 64px 0; border-bottom:1px solid var(--jw-border); } .jw-prose { max-width: 820px; } .jw-prose h2 { margin-top: 2rem; } .jw-prose img { max-width:100%; border-radius:12px; } .jw-cta-band { background: var(--jw-gradient); border-radius: 24px; padding: 48px; color:#fff; } .jw-cta-band h2 { color:#fff; } /* ============================================================ FOOTER ============================================================ */ .jw-footer { background: var(--jw-footer-bg); color: var(--jw-footer-text); padding: 64px 0 28px; } .jw-footer h5 { color:#fff; font-size:1rem; margin-bottom:1rem; } .jw-footer a { color: var(--jw-footer-text); } .jw-footer a:hover { color:#fff; } .jw-footer .jw-social a { display:inline-grid; place-items:center; width:38px;height:38px;border-radius:10px; background: rgba(255,255,255,.08); margin-right:8px; } .jw-footer .jw-social a:hover { background: var(--jw-gradient); } .jw-footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:32px; padding-top:20px; font-size:.9rem; } /* ============================================================ MISC / RESPONSIVE ============================================================ */ .jw-sitemap-cols { columns: 2; } @media (max-width: 768px){ .jw-section { padding: 56px 0; } .jw-sitemap-cols { columns: 1; } .jw-cta-band { padding: 32px 24px; } } .screen-reader-text { position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px); }