/* CloudBilling.One static site stylesheet with light + dark themes. Use [data-theme="dark"] on to swap palettes. */ :root{ --bg:#ffffff; --surface:#ffffff; --surface-2:#f6f7fb; --text:#0f172a; --muted:#475569; --border:#e5e7eb; --shadow:0 18px 50px rgba(2,6,23,.10); --shadow-soft:0 10px 30px rgba(2,6,23,.08); --accent:#ff6a00; --accent2:#ff9a3d; --max:1120px; --radius:16px; --body-bg: radial-gradient(900px 480px at 15% -10%, rgba(255,106,0,.10), transparent 60%), radial-gradient(900px 480px at 90% 0%, rgba(255,154,61,.08), transparent 55%), var(--bg); --nav-bg:rgba(255,255,255,.88); --nav-border:var(--border); --nav-link:var(--muted); --nav-link-hover:var(--text); --nav-hover-bg:rgba(15,23,42,.05); --pill-bg:rgba(15,23,42,.04); --pill-border:var(--border); --pill-text:rgba(15,23,42,.82); --card-bg:var(--surface); --feature-bg:var(--surface-2); --input-bg:#ffffff; --input-border:rgba(15,23,42,.18); --cta-text:#ffffff; --btn-text:#0b1220; --btn-outline-text:var(--muted); --toggler-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230f172a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --slide-overlay:linear-gradient(180deg, transparent, rgba(2,6,23,.62)); --slide-dot:rgba(255,255,255,.35); --slide-dot-active:rgba(255,255,255,.96); --small-text:rgba(71,85,105,.95); --footer-text:var(--muted); --section-heading:var(--text); --toggle-bg:rgba(15,23,42,.08); --toggle-border:rgba(15,23,42,.12); --toggle-track:rgba(15,23,42,.12); --toggle-thumb:#ffffff; --toggle-glow:rgba(255,106,0,.18); } [data-theme="dark"]{ --bg:#0b1220; --surface:#0f1b33; --surface-2:rgba(15,27,51,.55); --text:#e8eefc; --muted:#b5c2e3; --border:rgba(255,255,255,.10); --shadow:0 20px 60px rgba(0,0,0,.35); --shadow-soft:0 20px 60px rgba(0,0,0,.35); --body-bg: radial-gradient(1200px 600px at 20% -10%, rgba(255,106,0,.22), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(255,154,61,.14), transparent 55%), var(--bg); --nav-bg:rgba(11,18,32,.65); --nav-border:rgba(255,255,255,.08); --nav-link:var(--text); --nav-link-hover:var(--text); --nav-hover-bg:rgba(255,255,255,.06); --pill-bg:rgba(255,255,255,.06); --pill-border:rgba(255,255,255,.10); --pill-text:rgba(255,255,255,.86); --card-bg:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); --feature-bg:rgba(15,27,51,.55); --input-bg:rgba(15,27,51,.55); --input-border:rgba(255,255,255,.12); --cta-text:#0b1220; --btn-outline-text:var(--cta-text); --toggler-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8eefc' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --slide-overlay:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); --slide-dot:rgba(255,255,255,.35); --slide-dot-active:rgba(255,255,255,.95); --small-text:rgba(255,255,255,.82); --footer-text:rgba(255,255,255,.72); --section-heading:var(--muted); --toggle-bg:rgba(255,255,255,.12); --toggle-border:rgba(255,255,255,.18); --toggle-track:rgba(255,255,255,.18); --toggle-thumb:#ffffff; --toggle-glow:rgba(255,106,0,.22); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--body-bg); line-height:1.55; } a{color:inherit} .container{max-width:var(--max); margin:0 auto; padding:0 20px} /* Top navigation */ .nav{ position:sticky; top:0; z-index:10; background:var(--nav-bg); backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--nav-border); --bs-navbar-toggler-icon-bg:var(--toggler-icon); --bs-navbar-toggler-border-color:var(--nav-border); } .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px} .brand{display:flex; align-items:center; gap:12px; text-decoration:none} .brand img{height:30px; width:auto} .menu{gap:18px} @media (min-width: 992px){ .menu{align-items:center; flex-wrap:wrap} } .menu a{ text-decoration:none; color:var(--nav-link); padding:8px 10px; border-radius:12px; } .menu a.cta{ color:var(--cta-text); } .menu a:hover{color:var(--nav-link-hover); background:var(--nav-hover-bg)} .navbar-toggler{border-color:var(--nav-border)} .navbar-toggler:focus{box-shadow:0 0 0 .2rem var(--toggle-glow)} /* Buttons */ .cta{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:14px; background:linear-gradient(90deg, var(--accent), var(--accent2)); color:var(--cta-text); font-weight:500; text-decoration:none; box-shadow:0 10px 26px rgba(255,106,0,.18); } .cta:hover{filter:brightness(1.03)} .btn-outline{ display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.75); text-decoration:none; color:var(--btn-outline-text); } .btn-outline:hover{color:var(--text); border-color:rgba(255,106,0,.35); box-shadow:0 0 0 4px rgba(255,106,0,.08)} /* Hero */ .hero{padding:48px 0 24px} .hero-grid{row-gap:22px} .kicker{letter-spacing:.12em; text-transform:uppercase; color:var(--small-text); font-size:.78rem} .h1{font-size: clamp(2.0rem, 3.4vw, 3.2rem); line-height:1.05; margin:10px 0 12px} .sub{color:var(--muted); font-size:1.06rem; margin:0 0 18px} .pills{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0} .pill{ padding:8px 12px; border-radius:999px; background:var(--pill-bg); border:1px solid var(--pill-border); color:var(--pill-text); font-size:.9rem; } /* Cards / sections */ .card{ background: var(--card-bg); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); } .card-pad{padding:18px} .section{padding:28px 0} .section h2{margin:0 0 10px; font-size:1.6rem; color:var(--section-heading)} .section p{margin:0 0 10px; color:var(--muted)} .hero .h1{color:var(--section-heading)} .card strong{color:var(--section-heading)} .card a{color:var(--section-heading)} .card h2{color:var(--section-heading)} .grid-4{row-gap:14px} .feature{ padding:16px; border-radius:14px; background:var(--feature-bg); border:1px solid var(--border); } .feature h3{margin:0 0 6px; font-size:1.05rem} .feature p{margin:0; color:var(--muted); font-size:.95rem} /* Slider */ .slider{position:relative; overflow:hidden; border-radius:var(--radius)} .slide-img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio: 16/10; filter:saturate(1.02) contrast(1.02); } .slide-overlay{ position:absolute; inset:auto 0 0 0; padding:14px 14px 12px; background: var(--slide-overlay); display:flex; align-items:flex-end; justify-content:space-between; gap:10px; } .dots{display:flex; gap:8px} .dot{width:8px; height:8px; border-radius:99px; background:var(--slide-dot)} .dot.active{background:var(--slide-dot-active)} .small{font-size:.86rem; color:var(--small-text)} .slide-overlay .small{color:rgba(255,255,255,.88)} .two-col{row-gap:16px} .list{margin:10px 0 0; padding-left:18px; color:var(--muted)} .list li{margin:6px 0} /* Forms */ .form{display:grid; gap:12px} input, textarea{ width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); outline:none; } textarea{min-height:110px; resize:vertical} input:focus, textarea:focus{ border-color: rgba(255,106,0,.55); box-shadow:0 0 0 4px rgba(255,106,0,.12) } .btn{ cursor:pointer; border:0; padding:12px 14px; border-radius:14px; font-weight:900; background:linear-gradient(90deg, var(--accent), var(--accent2)); color:var(--btn-text); box-shadow:0 10px 26px rgba(255,106,0,.18); } /* Theme switch */ .theme-switch{ display:inline-flex; align-items:center; justify-content:center; padding:4px; border-radius:999px; border:1px solid var(--toggle-border); background:var(--toggle-bg); position:relative; } .theme-switch-input{ position:absolute; opacity:0; width:1px; height:1px; } .theme-switch-track{ width:38px; height:22px; border-radius:999px; background:var(--toggle-track); display:flex; align-items:center; padding:2px; transition:background .2s ease, border .2s ease, box-shadow .2s ease; } .theme-switch-thumb{ width:16px; height:16px; border-radius:999px; background:var(--toggle-thumb); box-shadow:0 6px 14px rgba(15,23,42,.18); transform:translateX(0); transition:transform .2s ease, background .2s ease; } .theme-switch-input:checked + .theme-switch-track{ background:linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow:0 0 0 4px var(--toggle-glow); } .theme-switch-input:checked + .theme-switch-track .theme-switch-thumb{ transform:translateX(16px); } .theme-switch-input:focus-visible + .theme-switch-track{ box-shadow:0 0 0 4px var(--toggle-glow); } /* Footer */ .footer{ padding:34px 0; border-top:1px solid var(--border); margin-top:24px; color:var(--footer-text); } .footer-inner{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center} .footer img{height:26px; width:auto; opacity:.95}