/* 1) Base responsive media */ img, video { max-width: 100%; height: auto; display: block; } /* 2) Hero full-width and width-based scaling */ .hero { width: 100%; border-radius: 12px; overflow: hidden; } .hero img { width: 100% !important; height: auto !important; /* use cover only if you want cropping */ display: block; /* If you DO want a cropped banner, swap the two lines below */ /* height: clamp(220px, 45vw, 560px); object-fit: cover; */ } /* 3) Neutralize TinyMCE inline/attribute sizing */ .hero img[width], .hero img[height], .hero img[style*="width"], .hero img[style*="height"] { width: 100% !important; height: auto !important; } /* 4) If the hero is inside a .row flex container, force full row */ .row .hero { flex: 0 0 100%; } /* MENU BEHAVIOUR */ :root{ --bg: #0b0d12; --bg-header: #0f1219cc; /* translucent on scroll */ --bg-panel: #0f1219; --text: #e6ebf5; --muted: #98a2b3; --accent: #6ea8ff; --border: rgba(255,255,255,.08); --shadow: 0 10px 30px rgba(0,0,0,.35); } /* Base */ body{ background: var(--bg); color: var(--text); } .container{ width:min(1200px,92%); margin:0 auto; } /* Top bar */ .nav-topbar{ border-bottom:1px solid var(--border); color:var(--muted); font-size:13px; } .nav-topbar .nav .menu-root{ display:flex; gap:18px; list-style:none; padding:0; margin:0; } /* Sticky header with blur */ .site-header{ position: sticky; top:0; z-index:40; backdrop-filter: saturate(140%) blur(8px); background: var(--bg-header); border-bottom: 1px solid var(--border); } /* Core nav layout (used by #primary-nav and others) */ .nav .menu-root{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; white-space:nowrap; overflow-x:auto; scrollbar-width:thin; } .nav[data-align="right"] .menu-root{ margin-left:auto; } .nav[data-align="left"] .menu-root{ margin-right:auto; } .nav .menu-root > li > a{ display:inline-flex; align-items:center; gap:6px; padding:14px 6px; text-decoration:none; color:var(--text); position:relative; transition:opacity .15s ease; } .nav .menu-root > li > a::after{ content:""; position:absolute; left:0; bottom:8px; height:2px; width:0; background: var(--accent); transition: width .18s ease; } .nav .menu-root > li:hover > a::after, .nav .menu-root > li > a.active::after{ width:100%; } /* Dropdowns (desktop) */ .nav li{ position:relative; } .nav li > ul{ position:absolute; left:0; top:100%; min-width:220px; background:#0f1219; border:1px solid var(--border); border-radius:12px; padding:8px; display:none; box-shadow: var(--shadow); } .nav li:hover > ul{ display:block; } .nav li > ul > li > a{ display:block; padding:10px 12px; border-radius:8px; color:var(--text); } .nav li > ul > li > a:hover{ background: rgba(255,255,255,.06); } /* Mobile toggle button (you already have .menu-toggle) */ .menu-toggle{ display:none; position:relative; height:36px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text); } /* Mobile panel */ .mobile-panel{ position: fixed; inset: 56px 0 0 0; /* sits below the sticky header */ background: var(--bg-panel); border-top: 1px solid var(--border); box-shadow: var(--shadow); overflow:auto; z-index:39; } .mobile-panel .nav .menu-root{ flex-direction:column; align-items:flex-start; gap:8px; padding:14px 0; } .mobile-panel .nav .menu-root > li > a{ width:100%; padding:12px 2px; } /* Mobile submenus */ .mobile-panel .nav li > ul{ position: static; display:none; padding:6px 0 6px 10px; border:none; box-shadow:none; } .mobile-panel .nav li.open > ul{ display:block; } /* Responsive rules */ @media (max-width: 1024px){ #primary-nav{ display:none; } /* hide desktop nav on mobile */ .menu-toggle{ display:inline-block; margin-left:auto; } } @media (min-width: 1025px){ #mobile-panel{ display:none !important; } } /* Optional: bottom nav tightening */ .nav-bottom .menu-root{ gap:18px; } /* Table formating */ /* ===== Alternatives table: dark theme friendly ===== */ .table-scroll{overflow:auto} .alt-table{ width:100%; border-collapse:separate; border-spacing:0; min-width: 920px; /* prevents squashing on laptops */ background: var(--surface, #0f1219); color: var(--text, #eaf0ff); border:2px solid rgba(255,255,255,.10); border-radius:14px; } .alt-table th,.alt-table td{ padding:14px 14px; vertical-align:top; border-bottom:2px solid rgba(255,255,255,.10); } .alt-table thead th{ position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); backdrop-filter: blur(4px); font-weight:700; text-align:left; } .alt-table .sticky{ /* first column helpful on wide screens */ position: sticky; left: 0; z-index: 1; background: var(--surface, #0f1219); } .alt-table tbody tr:hover td{ background: rgba(255,255,255,.03); } .alt-table .brand td{ background: rgba(122,162,255,.08); /* subtle brand row */ border-bottom-color: rgba(122,162,255,.25); font-weight:600; } .alt-table .meta{ color: var(--text, #eaf0ff); opacity: .95; line-height: 1.45; } .alt-table .caption{ color: var(--muted, #a9b2cc); font-size: .9em; } /* compact bullet chips for inclusions */ .pill-list{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; } .pill-list li{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius: 999px; padding: 6px 10px; line-height: 1.25; white-space: nowrap; } @media (max-width: 1000px){ .pill-list{ grid-template-columns: 1fr; } /* stack on narrow screens */ } /* better spacing for long cells on dark */ .alt-table td > ul, .alt-table td > div{ max-width: 46ch; } /* improve contrast if your page background is even darker */ @media (prefers-color-scheme: dark){ .alt-table{ border-color: rgba(255,255,255,.14); } .alt-table th,.alt-table td{ border-bottom-color: rgba(255,255,255,.12); } } /* column sizing to prevent squish */ .alt-table .col-platform { width: 14rem; } .alt-table .col-price { width: 15rem; } .alt-table .col-basis { width: 13rem; } .alt-table .col-inclusions { width: 24rem; } .alt-table .col-voice { width: 14rem; } .alt-table .col-notes { width: 22rem; } /* improve readability on dark + wrapping */ .alt-table { table-layout: fixed; } /* respect colgroup widths */ .alt-table th, .alt-table td{ word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.45; } .alt-table .meta{ white-space: normal; } /* make sticky first column behave nicely on small screens */ @media (max-width: 1024px){ .alt-table { table-layout: auto; } /* let it flow on narrow */ .alt-table .sticky { position: static; } /* disable sticky on small */ } /* pill list spacing in cramped columns */ .pill-list{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; } .pill-list li{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: 999px; padding:6px 10px; white-space: nowrap; } @media (max-width: 1200px){ .pill-list{ grid-template-columns:1fr; } } /* ===== Global CTA Button System (place in site.css or injected by base.php) ===== */ /* Base: normalize all legacy button classes to 1 style system */ .btn, .home-btn, .sol-btn, .tpl-btn, .addons-btn, .compare-btn { display: inline-block; padding: .65rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); text-decoration: none; font-weight: 700; text-align: center; transition: filter .15s ease, transform .05s ease; } .btn:hover, .home-btn:hover, .sol-btn:hover, .tpl-btn:hover, .addons-btn:hover, .compare-btn:hover { filter: brightness(.92); } .btn:active, .home-btn:active, .sol-btn:active, .tpl-btn:active, .addons-btn:active, .compare-btn:active { transform: translateY(1px); } .btn:focus-visible, .home-btn:focus-visible, .sol-btn:focus-visible, .tpl-btn:focus-visible, .addons-btn:focus-visible, .compare-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Variants */ .btn--primary { background:#00c86d; color:#000; border-color:transparent; } /* Convert */ .btn--secondary { background:#00bfff; color:#000; border-color:transparent; } /* Navigation */ .btn--ghost { background:transparent; color:#fff; } /* Light emphasis */ .btn--accent { background:#6e32ff; color:#fff; border-color:transparent; } /* Waitlist/Promos */ /* Optional sizes */ .btn--sm { padding:.45rem .8rem; border-radius:8px; font-weight:600; } .btn--lg { padding:.8rem 1.2rem; border-radius:12px; } /* Optional full-width helper (for narrow cards) */ .btn--block { display:block; width:100%; } /* Keep CTAs centered & bottom-aligned inside card footers */ .hcard-cta, .tpl-cta-row, .sol-cta, .addons-cta, .compare-cta-row { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; } /* Home/Prices policy chips (dark friendly) */ .policy-chips{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:.6rem 0 .2rem; } .policy-chip{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#fff; text-decoration:none; border-radius:999px; padding:.35rem .75rem; line-height:1; } .policy-chip:hover{ filter:brightness(.95); } .policy-chip .chip-note{ opacity:.8; font-size:.85em; } .policy-micro{ text-align:center; opacity:.85; font-size:.95em; margin:.15rem 0 0; } .policy-micro a{ color:#fff; text-decoration:underline; }