/* ============================================================ ValoHosting design system v2 — "friendly professional" Light-first, warm neutrals, one accent. Dark mode supported. Theme set as by a boot script. ============================================================ */ :root{ --bg:#F7F7FB; --bg-alt:#EFEFF7; --surface:#FFFFFF; --surface-2:#F3F2F9; --line:#E6E5F0; --line-strong:#D3D1E5; --text:#23222E; --muted:#5C5B6E; --muted-2:#8D8C9E; --accent:#5A45D8; --accent-hover:#4936C4; --accent-soft:#EEEBFB; --accent-line:#D0C9F1; --on-accent:#FFFFFF; --ok:#17834D; --ok-soft:#E3F4EA; --warn:#96660A; --warn-soft:#F9F1DA; --header-bg:rgba(247,247,251,0.88); --shadow-sm:0 1px 2px rgba(35,34,52,0.06); --shadow-md:0 2px 4px rgba(35,34,52,0.04), 0 12px 32px -12px rgba(35,34,52,0.16); --shadow-lg:0 4px 8px rgba(35,34,52,0.04), 0 24px 60px -20px rgba(35,34,52,0.22); --r-sm:12px; --r-md:20px; --r-lg:26px; } [data-theme="dark"]{ --bg:#12131F; --bg-alt:#171827; --surface:#1C1D2E; --surface-2:#232438; --line:#2C2D44; --line-strong:#3B3D5C; --text:#EDEDF5; --muted:#A7A9BD; --muted-2:#7B7D93; --accent:#8B7BFF; --accent-hover:#A092FF; --accent-soft:rgba(139,123,255,0.13); --accent-line:rgba(139,123,255,0.38); --on-accent:#14142A; --ok:#4ADE80; --ok-soft:rgba(74,222,128,0.14); --warn:#FBBF24; --warn-soft:rgba(251,191,36,0.13); --header-bg:rgba(18,19,31,0.85); --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow-md:0 12px 32px -12px rgba(0,0,0,0.55); --shadow-lg:0 24px 60px -20px rgba(0,0,0,0.7); } /* ---------- base ---------- */ *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--text); font-family:'Inter', system-ui, sans-serif; font-size:16.5px; line-height:1.65; overflow-x:hidden; transition:background .3s ease, color .3s ease; } h1,h2,h3,h4{ font-family:'Sora', 'Inter', sans-serif; letter-spacing:-0.02em; line-height:1.18; font-weight:600; } a{ color:inherit; text-decoration:none; } img,svg{ max-width:100%; } .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; } section{ position:relative; } section[id]{ scroll-margin-top:84px; } :focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px; } ::selection{ background:var(--accent-soft); } .skip-link{ position:absolute; left:12px; top:-60px; z-index:300; background:var(--accent); color:var(--on-accent); font-weight:700; padding:10px 18px; border-radius:10px; font-size:14px; transition:top .15s ease; } .skip-link:focus{ top:12px; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 26px; border-radius:999px; font-size:15.5px; font-weight:600; font-family:'Inter', sans-serif; cursor:pointer; border:none; position:relative; transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; -webkit-tap-highlight-color:transparent; } .btn:active{ transform:scale(0.97); } .btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm), 0 8px 20px -8px var(--accent); } .btn-primary:hover{ background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm), 0 12px 26px -8px var(--accent); } .btn-primary:active{ transform:scale(0.97); } .btn-ghost{ background:var(--surface); color:var(--text); border:1.5px solid var(--line-strong); box-shadow:var(--shadow-sm); } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); } .btn-lg{ padding:15px 32px; font-size:16.5px; } .btn-sm{ padding:9px 20px; font-size:14px; } /* loading state (chat button etc.) */ .btn .spinner, .live-chat .spinner{ width:16px; height:16px; border-radius:50%; flex-shrink:0; border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite; display:none; } .is-loading .spinner{ display:inline-block; } .is-loading{ pointer-events:none; opacity:.85; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ---------- header ---------- */ header.site-header{ position:sticky; top:0; z-index:100; background:var(--header-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease; } header.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; max-width:1080px; margin:0 auto; } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; font-family:'Sora', sans-serif; color:var(--text); } .brand svg{ width:30px; height:30px; flex-shrink:0; } .nav-links{ display:flex; gap:4px; font-size:15px; color:var(--muted); } .nav-links a{ padding:9px 14px; border-radius:10px; transition:color .15s ease, background .15s ease; } .nav-links a:hover{ color:var(--text); background:var(--accent-soft); } .nav-links a.active, .nav-links a[aria-current="page"]{ color:var(--accent); font-weight:600; } .nav-actions{ display:flex; align-items:center; gap:10px; } .log-link{ font-size:15px; color:var(--muted); padding:9px 12px; border-radius:10px; } .log-link:hover{ color:var(--text); background:var(--accent-soft); } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; cursor:pointer; background:transparent; border:1.5px solid var(--line-strong); color:var(--muted); transition:border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease; -webkit-tap-highlight-color:transparent; } .icon-btn:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .icon-btn:active{ transform:scale(0.92); } .icon-btn svg{ width:19px; height:19px; } [data-theme="dark"] .theme-icon-moon{ display:none; } [data-theme="light"] .theme-icon-sun{ display:none; } :root:not([data-theme]) .theme-icon-sun{ display:none; } .menu-btn{ display:none; } /* language switcher */ .lang-menu{ position:relative; } .lang-menu summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1.5px solid var(--line-strong); font-size:13.5px; font-weight:600; color:var(--muted); transition:border-color .15s ease, color .15s ease, background .15s ease; -webkit-tap-highlight-color:transparent; } .lang-menu summary::-webkit-details-marker{ display:none; } .lang-menu summary:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .lang-menu summary svg{ width:16px; height:16px; } .lang-list{ position:absolute; right:0; top:calc(100% + 8px); z-index:120; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); padding:6px; min-width:150px; } .lang-list a{ display:block; padding:9px 14px; border-radius:9px; font-size:14.5px; color:var(--text); } .lang-list a:hover{ background:var(--accent-soft); color:var(--accent); } .lang-list a[aria-current="true"]{ color:var(--accent); font-weight:700; } /* mobile menu sheet */ .mobile-nav{ display:grid; grid-template-rows:0fr; overflow:hidden; background:var(--bg); border-top:1px solid transparent; transition:grid-template-rows .3s ease, border-color .3s ease; } .mobile-nav > div{ min-height:0; } .mobile-nav.open{ grid-template-rows:1fr; border-top-color:var(--line); } .mobile-nav a{ display:block; padding:15px 24px; font-size:16.5px; font-weight:500; color:var(--text); border-bottom:1px solid var(--line); } .mobile-nav a:active{ background:var(--accent-soft); } .mobile-nav .mobile-cta{ padding:16px 24px 22px; border-bottom:none; } .mobile-nav .mobile-cta .btn{ width:100%; } @media(max-width:920px){ .nav-links, .nav-actions .log-link, .nav-actions .btn-cta{ display:none; } .menu-btn{ display:inline-flex; } } /* ---------- hero ---------- */ .hero{ padding:76px 0 92px; overflow:hidden; } .hero-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .hero-bg::before{ content:""; position:absolute; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, var(--accent-soft) 0%, transparent 65%); top:-260px; right:-160px; } .hero-bg::after{ content:""; position:absolute; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, var(--ok-soft) 0%, transparent 65%); bottom:-260px; left:-160px; opacity:.8; } .hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; } @media(max-width:900px){ .hero{ padding:48px 0 72px; } .hero-inner{ grid-template-columns:1fr; gap:44px; } } .eyebrow{ display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 18px; font-size:14.5px; font-weight:600; color:var(--muted); box-shadow:var(--shadow-sm); margin-bottom:22px; } .hero h1{ font-size:clamp(34px, 4.8vw, 54px); font-weight:700; margin-bottom:20px; } .hero h1 .accent{ color:var(--accent); } .hero .lead{ font-size:19px; color:var(--muted); max-width:520px; margin-bottom:32px; } .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; } .trust-row{ display:flex; gap:14px 26px; flex-wrap:wrap; font-size:14.5px; color:var(--muted); } .trust-row span{ display:inline-flex; align-items:center; gap:8px; } .trust-row svg{ width:17px; height:17px; color:var(--ok); flex-shrink:0; } /* hero visual: "your website" browser card */ .site-mock-stage{ position:relative; } .site-mock{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; animation:mock-float 7s ease-in-out infinite; } @keyframes mock-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} } .mock-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); } .mock-dots{ display:flex; gap:6px; } .mock-dots span{ width:10px; height:10px; border-radius:50%; background:var(--line-strong); } .mock-url{ flex:1; display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 12px; font-size:13px; color:var(--muted); } .mock-url .lock{ color:var(--ok); display:inline-flex; } .mock-url .lock svg{ width:13px; height:13px; } .pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:100px; } .pill-ok{ background:var(--ok-soft); color:var(--ok); } .pill-ok .p-dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .mock-body{ padding:22px; } .mock-hero{ background:linear-gradient(135deg, var(--accent-soft), var(--surface-2)); border-radius:12px; padding:22px; margin-bottom:14px; } .sk{ border-radius:6px; background:var(--line); } .sk-title{ width:62%; height:14px; margin-bottom:10px; background:var(--line-strong); } .sk-line{ width:84%; height:9px; margin-bottom:8px; } .sk-line.short{ width:48%; margin-bottom:14px; } .sk-btn{ width:110px; height:30px; border-radius:8px; background:var(--accent); opacity:.9; } .mock-cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; } .mock-cols .sk-card{ height:56px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); } /* floating reassurance chips */ .mock-chip{ position:absolute; display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:100px; box-shadow:var(--shadow-md); padding:9px 16px; font-size:13.5px; font-weight:600; animation:mock-float 7s ease-in-out infinite; } .mock-chip svg{ width:16px; height:16px; color:var(--ok); flex-shrink:0; } .mock-chip.chip-1{ top:-16px; left:-22px; animation-delay:-2s; } .mock-chip.chip-2{ bottom:34px; right:-20px; animation-delay:-4s; } @media(max-width:900px){ .mock-chip.chip-1{ left:-6px; } .mock-chip.chip-2{ right:-6px; } } /* ---------- sections ---------- */ .section{ padding:92px 0; } .section.alt{ background:var(--bg-alt); } .section-head{ max-width:640px; margin-bottom:52px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .kicker{ display:inline-flex; align-items:center; font-size:13.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:100px; padding:6px 14px; margin-bottom:16px; letter-spacing:0.01em; } .section-head h2{ font-size:clamp(27px,3.4vw,38px); margin-bottom:14px; } .section-head p{ color:var(--muted); font-size:17px; } /* ---------- how it works (steps) ---------- */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step; } @media(max-width:820px){ .steps{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } } .step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:30px 26px; box-shadow:var(--shadow-sm); position:relative; } .step-num{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--on-accent); font-family:'Sora', sans-serif; font-weight:700; font-size:17px; margin-bottom:18px; box-shadow:0 6px 14px -6px var(--accent); } .step h3{ font-size:18.5px; margin-bottom:9px; } .step p{ font-size:15px; color:var(--muted); } .step .step-note{ margin-top:12px; font-size:13.5px; color:var(--ok); font-weight:600; display:inline-flex; align-items:center; gap:7px; } .step .step-note svg{ width:15px; height:15px; } /* ---------- feature cards ---------- */ .card-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; } @media(max-width:720px){ .card-grid{ grid-template-columns:1fr; } } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:30px 28px; box-shadow:var(--shadow-sm); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .card:hover{ border-color:var(--accent-line); transform:translateY(-3px); box-shadow:var(--shadow-md); } .card-icon{ width:48px; height:48px; border-radius:13px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .card-icon svg{ width:23px; height:23px; } .card h3{ font-size:18.5px; margin-bottom:9px; } .card p{ font-size:15px; color:var(--muted); } /* ---------- reassurance list ("looked after") ---------- */ .assure-panel{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } @media(max-width:720px){ .assure-panel{ grid-template-columns:1fr; } } .assure-item{ display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; box-shadow:var(--shadow-sm); } .assure-item .a-icon{ width:40px; height:40px; border-radius:11px; flex-shrink:0; background:var(--ok-soft); color:var(--ok); display:flex; align-items:center; justify-content:center; } .assure-item .a-icon svg{ width:20px; height:20px; } .assure-item h4{ font-size:16px; margin-bottom:5px; } .assure-item p{ font-size:14px; color:var(--muted); } /* ---------- pricing ---------- */ .price-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch; } @media(max-width:880px){ .price-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } } .price-card{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:34px 28px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; } .price-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .price-card.featured{ border-color:var(--accent); box-shadow:var(--shadow-md); position:relative; } @media(min-width:881px){ .price-card.featured{ transform:scale(1.03); } .price-card.featured:hover{ transform:scale(1.03) translateY(-3px); } } .price-card.featured::before{ content:attr(data-popular); position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--on-accent); font-size:12.5px; font-weight:700; padding:5px 16px; border-radius:100px; white-space:nowrap; } .plan-name{ font-family:'Sora', sans-serif; font-size:17px; font-weight:600; margin-bottom:8px; } .plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:12px; } .plan-price .amt{ font-family:'Sora', sans-serif; font-size:42px; font-weight:700; letter-spacing:-0.03em; } .plan-price .per{ font-size:15px; color:var(--muted-2); } .plan-for{ font-size:14px; color:var(--muted); margin:0 0 20px; min-height:63px; } @media(max-width:880px){ .plan-for{ min-height:0; } } .plan-features{ display:flex; flex-direction:column; gap:13px; margin-bottom:28px; flex:1; border-top:1px solid var(--line); padding-top:20px; } .plan-features .feat{ display:flex; gap:11px; font-size:14.5px; align-items:flex-start; } .plan-features svg{ width:17px; height:17px; flex-shrink:0; margin-top:3px; color:var(--ok); } .price-card .btn{ width:100%; } .includes-strip{ margin-top:36px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 26px; display:flex; align-items:center; justify-content:center; gap:14px 34px; flex-wrap:wrap; font-size:14.5px; color:var(--muted); box-shadow:var(--shadow-sm); } .includes-strip strong{ color:var(--text); font-weight:600; } .includes-strip span{ display:inline-flex; align-items:center; gap:8px; } .includes-strip svg{ width:16px; height:16px; color:var(--ok); flex-shrink:0; } .pricing-note{ text-align:center; color:var(--muted-2); font-size:14px; margin-top:22px; } .pricing-note .link-btn{ background:none; border:none; padding:0; font:inherit; cursor:pointer; color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; } /* ---------- FAQ ---------- */ .faq-list{ max-width:720px; margin:0 auto; } .faq-list details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .2s ease; } .faq-list details[open]{ border-color:var(--accent-line); } .faq-list summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:19px 24px; font-weight:600; font-size:16px; font-family:'Sora', sans-serif; -webkit-tap-highlight-color:transparent; } .faq-list summary::-webkit-details-marker{ display:none; } .faq-list summary:hover{ color:var(--accent); } .faq-list .faq-chevron{ width:26px; height:26px; border-radius:50%; flex-shrink:0; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; transition:transform .25s ease; } .faq-list .faq-chevron svg{ width:14px; height:14px; } .faq-list details[open] .faq-chevron{ transform:rotate(180deg); } .faq-list .faq-a{ padding:0 24px; color:var(--muted); font-size:15px; line-height:1.7; overflow:hidden; } .faq-list .faq-a > *:last-child{ padding-bottom:20px; } .faq-list .faq-a a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; } /* ---------- guides ---------- */ .articles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media(max-width:860px){ .articles-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } } .article-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:28px 26px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .article-card:hover{ border-color:var(--accent-line); transform:translateY(-3px); box-shadow:var(--shadow-md); } .article-card .cat{ font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:0.02em; margin-bottom:12px; text-transform:uppercase; } .article-card h3{ font-size:18px; margin-bottom:9px; } .article-card p{ font-size:14.5px; color:var(--muted); flex:1; } .article-card .read-more{ margin-top:16px; font-size:14px; color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:6px; } .article-card:hover .read-more{ gap:10px; } .article-card .read-more{ transition:gap .2s ease; } /* ---------- CTA band ---------- */ .cta-band{ padding:92px 0; } .cta-box{ background:var(--accent); color:var(--on-accent); border-radius:var(--r-lg); padding:60px 44px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); } .cta-box::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%); top:-200px; left:50%; transform:translateX(-50%); pointer-events:none; } .cta-box h2{ font-size:clamp(25px,3.4vw,35px); margin-bottom:14px; position:relative; } .cta-box p{ opacity:.88; margin:0 auto 30px; max-width:520px; position:relative; font-size:16.5px; } .cta-box .hero-ctas{ justify-content:center; margin-bottom:0; position:relative; } .cta-box .btn-primary{ background:#FFFFFF; color:var(--accent); box-shadow:0 8px 24px -8px rgba(0,0,0,0.4); } .cta-box .btn-primary:hover{ background:#F4F2FF; } .cta-box .btn-ghost{ background:transparent; color:var(--on-accent); border-color:rgba(255,255,255,0.5); } .cta-box .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.1); color:var(--on-accent); } [data-theme="dark"] .cta-box .btn-primary{ background:#14142A; color:#EDEDF5; } [data-theme="dark"] .cta-box .btn-primary:hover{ background:#1D1D38; } @media(max-width:560px){ .cta-box{ padding:44px 24px; } } /* ---------- content pages ---------- */ .page-hero{ padding:60px 0 34px; } .page-hero .wrap{ max-width:760px; } .page-hero h1{ font-size:clamp(29px,4vw,42px); margin-bottom:12px; font-weight:700; } .page-hero .meta{ font-size:14px; color:var(--muted-2); } .back-link{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--muted); margin-bottom:24px; padding:4px 0; transition:color .15s ease, gap .2s ease; } .back-link:hover{ color:var(--accent); gap:10px; } .content-body{ padding:16px 0 90px; } .content-body .wrap{ max-width:760px; } .content-body p, .content-body li{ font-size:16.5px; line-height:1.75; margin-bottom:18px; color:var(--text); } .content-body h2{ font-size:23px; margin:42px 0 14px; } .content-body h3{ font-size:18.5px; margin:30px 0 12px; } .content-body ul, .content-body ol{ margin:0 0 20px 24px; } .content-body li{ margin-bottom:9px; } .content-body a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; } .content-body code{ font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace; background:var(--surface-2); border:1px solid var(--line); padding:2px 8px; border-radius:6px; font-size:14.5px; color:var(--accent); } .content-body .callout{ background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--r-sm); padding:18px 22px; margin:28px 0; font-size:15px; color:var(--text); } .content-body table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:15px; background:var(--surface); border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--shadow-sm); } .content-body th{ text-align:left; font-weight:700; color:var(--muted); font-size:13.5px; background:var(--surface-2); border-bottom:1.5px solid var(--line-strong); padding:11px 14px; } .content-body td{ padding:11px 14px; border-bottom:1px solid var(--line); } .content-body tr:last-child td{ border-bottom:none; } .draft-note{ background:var(--warn-soft); border:1px solid var(--warn); border-radius:var(--r-sm); padding:14px 18px; font-size:14.5px; color:var(--text); margin-bottom:30px; } /* status page */ .status-row{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:17px 22px; margin-bottom:12px; box-shadow:var(--shadow-sm); font-size:15.5px; } .status-dot{ width:11px; height:11px; border-radius:50%; background:var(--ok); flex-shrink:0; animation:pulse-dot 2s ease-in-out infinite; } .status-row .name{ flex:1; font-weight:500; } .status-row .state{ font-size:13.5px; color:var(--ok); font-weight:700; } /* contact page */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; } @media(max-width:720px){ .contact-grid{ grid-template-columns:1fr; } } .contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:28px 26px; box-shadow:var(--shadow-sm); transition:border-color .2s ease, transform .2s ease; } .contact-card:hover{ border-color:var(--accent-line); transform:translateY(-2px); } .contact-card .label{ font-size:12.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:10px; display:block; } .contact-card h3{ font-size:18px; margin-bottom:8px; } .contact-card p{ font-size:14.5px; color:var(--muted); margin-bottom:14px; } .contact-card a.email{ color:var(--accent); font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:3px; } .live-card{ background:var(--accent); color:var(--on-accent); border-radius:var(--r-md); padding:30px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; box-shadow:var(--shadow-md); } .live-card h3{ font-size:19px; margin-bottom:5px; color:var(--on-accent); } .live-card p, .content-body .live-card p{ font-size:15px; margin:0; color:var(--on-accent); opacity:.9; } .live-card .btn-primary{ background:#fff; color:var(--accent); } .live-card .btn-primary:hover{ background:#F4F2FF; } [data-theme="dark"] .live-card .btn-primary{ background:#14142A; color:#EDEDF5; } /* article CTA */ .article-cta{ max-width:760px; margin:0 auto 84px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:36px 30px; text-align:center; box-shadow:var(--shadow-md); } .article-cta h3{ font-size:21px; margin-bottom:9px; } .article-cta p{ color:var(--muted); font-size:15px; margin-bottom:22px; } .article-cta .cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* ---------- footer ---------- */ footer.site-footer{ border-top:1px solid var(--line); padding:56px 0 36px; background:var(--bg-alt); } .footer-top{ display:flex; justify-content:space-between; gap:44px; margin-bottom:44px; flex-wrap:wrap; } .footer-brand p{ color:var(--muted); font-size:14.5px; margin-top:14px; max-width:280px; } .footer-cols{ display:flex; gap:60px; flex-wrap:wrap; } .footer-heading{ font-size:13.5px; color:var(--text); margin-bottom:14px; font-weight:700; } .footer-col a{ display:block; padding:7px 0; font-size:14.5px; color:var(--muted); transition:color .15s ease; } .footer-col a:hover{ color:var(--accent); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted-2); } .footer-bottom .socials a{ color:var(--muted-2); display:inline-flex; padding:8px; border-radius:8px; transition:color .15s ease; } .footer-bottom .socials a:hover{ color:var(--accent); } /* ---------- live chat FAB ---------- */ .live-chat{ position:fixed; bottom:24px; right:24px; z-index:90; display:flex; align-items:center; gap:10px; background:var(--accent); color:var(--on-accent); font-size:15px; font-weight:600; font-family:'Inter', sans-serif; padding:14px 22px; border-radius:100px; border:none; cursor:pointer; box-shadow:var(--shadow-md), 0 8px 24px -6px var(--accent); transition:transform .15s ease, background .2s ease; -webkit-tap-highlight-color:transparent; } .live-chat:hover{ transform:translateY(-2px) scale(1.03); background:var(--accent-hover); } .live-chat:active{ transform:scale(0.95); } .live-chat svg{ flex-shrink:0; } .live-chat.nudge{ animation:chat-nudge .9s ease 1; } @keyframes chat-nudge{ 0%,100%{ transform:translateY(0); } 20%{ transform:translateY(-7px); } 40%{ transform:translateY(0); } 60%{ transform:translateY(-4px); } 80%{ transform:translateY(0); } } .live-chat.is-loading .chat-icon{ display:none; } .live-chat.chat-open{ opacity:0; pointer-events:none; transform:translateY(12px); } @media(max-width:560px){ .live-chat span.chat-label{ display:none; } .live-chat{ padding:15px; } } /* ---------- toast ---------- */ .toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); z-index:200; background:var(--text); color:var(--bg); font-size:14.5px; font-weight:500; padding:13px 22px; border-radius:12px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; max-width:min(92vw, 480px); text-align:center; } .toast.show{ opacity:1; transform:translate(-50%, 0); } /* ---------- scroll reveal ---------- */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } /* ============================================================ Blog v2 — covers, TOC, progress, featured post, filters ============================================================ */ /* per-category tint (r,g,b) — lighter variants in dark mode for contrast */ .theme-basics{ --th:90,69,216; } .theme-start{ --th:16,137,88; } .theme-security{ --th:2,122,199; } .theme-costs{ --th:194,104,14; } .theme-switch{ --th:203,55,122; } [data-theme="dark"] .theme-basics{ --th:139,123,255; } [data-theme="dark"] .theme-start{ --th:74,222,128; } [data-theme="dark"] .theme-security{ --th:96,183,255; } [data-theme="dark"] .theme-costs{ --th:248,180,88; } [data-theme="dark"] .theme-switch{ --th:244,132,183; } /* reading progress bar */ .read-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:150; background:transparent; pointer-events:none; } .read-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius:0 3px 3px 0; } /* article cover */ .article-cover{ padding:52px 0 56px; overflow:hidden; position:relative; background: radial-gradient(560px 300px at 85% 20%, rgba(var(--th),0.16), transparent 70%), linear-gradient(135deg, rgba(var(--th),0.10), transparent 55%); border-bottom:1px solid var(--line); } .article-cover .wrap{ max-width:960px; } .cover-grid{ display:flex; align-items:center; justify-content:space-between; gap:32px; } .article-cover .kicker{ background:rgba(var(--th),0.13); color:rgb(var(--th)); } [data-theme="dark"] .article-cover .kicker{ color:var(--text); } .article-cover h1{ font-size:clamp(30px,4.4vw,46px); font-weight:700; margin-bottom:14px; max-width:640px; } .article-cover .meta{ font-size:14.5px; color:var(--muted); } .cover-icon{ width:120px; height:120px; border-radius:32px; flex-shrink:0; background:rgba(var(--th),0.12); border:1px solid rgba(var(--th),0.22); display:flex; align-items:center; justify-content:center; color:rgb(var(--th)); animation:mock-float 7s ease-in-out infinite; } .cover-icon svg{ width:52px; height:52px; } @media(max-width:680px){ .cover-icon{ display:none; } } /* article layout: sticky TOC + roomy prose */ .article-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:48px; align-items:start; padding-top:44px; max-width:1010px; } .article-layout.no-toc{ grid-template-columns:minmax(0,1fr); max-width:810px; } @media(max-width:960px){ .article-layout{ grid-template-columns:minmax(0,1fr); gap:0; } } .toc-box{ position:sticky; top:90px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; box-shadow:var(--shadow-sm); } @media(max-width:960px){ .toc-box{ position:static; margin-bottom:28px; } } .toc-title{ font-family:'Sora', sans-serif; font-weight:700; font-size:14px; margin-bottom:10px; } .toc-box nav a{ display:block; padding:7px 0 7px 14px; font-size:13.5px; color:var(--muted); border-left:2px solid var(--line); transition:color .15s ease, border-color .15s ease; } .toc-box nav a:hover{ color:var(--accent); border-left-color:var(--accent); } .article-content{ padding:0 0 64px; } .article-content .wrap{ max-width:none; padding:0; } .article-layout .content-body{ padding:0 0 64px; } .article-layout .content-body .wrap{ max-width:none; padding:0; } .article-content p, .article-content li{ font-size:17px; line-height:1.8; } .article-content h2{ font-size:24px; margin:46px 0 16px; padding-top:8px; position:relative; } .article-content h2::before{ content:""; position:absolute; top:0; left:0; width:44px; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--accent), transparent); } .article-content > h2:first-child{ margin-top:0; } /* related articles band */ .related-band{ padding:56px 0 8px; border-top:1px solid var(--line); background:var(--bg-alt); } .related-band .wrap{ padding-bottom:56px; } .related-title{ font-size:22px; margin-bottom:24px; } /* article cards: icon chip */ .article-card{ position:relative; } .article-card .a-icon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; background:rgba(var(--th,90,69,216),0.11); border:1px solid rgba(var(--th,90,69,216),0.2); color:rgb(var(--th,90,69,216)); margin-bottom:14px; } .article-card .a-icon svg{ width:22px; height:22px; } .article-card.featured-hidden{ display:none; } /* blog index */ .blog-index{ padding:36px 0 90px; } .featured-post{ display:flex; align-items:center; justify-content:space-between; gap:36px; background: radial-gradient(500px 280px at 90% 10%, rgba(var(--th),0.16), transparent 70%), var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px 44px; box-shadow:var(--shadow-md); margin-bottom:36px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .featured-post:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:rgba(var(--th),0.4); } .fp-label{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:rgb(var(--th)); margin-bottom:12px; } [data-theme="dark"] .fp-label{ color:var(--accent-hover); } .featured-post .cat{ display:block; font-size:12.5px; font-weight:700; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:10px; } .featured-post h2{ font-size:clamp(22px,2.8vw,30px); margin-bottom:12px; max-width:560px; } .featured-post p{ font-size:15.5px; color:var(--muted); max-width:540px; margin-bottom:16px; } .featured-post .read-more{ font-size:15px; color:var(--accent); font-weight:600; } .fp-icon{ width:150px; height:150px; border-radius:40px; flex-shrink:0; background:rgba(var(--th),0.11); border:1px solid rgba(var(--th),0.22); display:flex; align-items:center; justify-content:center; color:rgb(var(--th)); animation:mock-float 7s ease-in-out infinite; } .fp-icon svg{ width:64px; height:64px; } @media(max-width:760px){ .featured-post{ flex-direction:column-reverse; align-items:flex-start; padding:28px 24px; } .fp-icon{ width:88px; height:88px; border-radius:24px; } .fp-icon svg{ width:40px; height:40px; } } /* filter chips */ .filter-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; } .chip{ padding:9px 18px; border-radius:999px; font-size:14px; font-weight:600; background:var(--surface); color:var(--muted); border:1.5px solid var(--line-strong); cursor:pointer; transition:all .15s ease; -webkit-tap-highlight-color:transparent; } .chip:hover{ border-color:var(--accent); color:var(--accent); } .chip.active{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .chip:active{ transform:scale(0.95); } .article-card.filtered-out{ display:none; } .blog-callout{ max-width:760px; margin:40px auto 0; } /* ============================================================ Plan comparison page ============================================================ */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .compare-link{ color:var(--accent); font-weight:600; } .compare-link:hover{ text-decoration:underline; text-underline-offset:3px; } .compare-section{ padding:8px 0 90px; } .compare-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-md); -webkit-overflow-scrolling:touch; } table.compare{ width:100%; min-width:760px; border-collapse:separate; border-spacing:0; } .compare th, .compare td{ padding:14px 20px; text-align:center; font-size:14.5px; border-bottom:1px solid var(--line); } .compare thead th, .compare .cmp-corner{ border-bottom:1.5px solid var(--line-strong); } .compare thead th{ padding:26px 20px 22px; vertical-align:bottom; position:relative; } .compare tbody th[scope="row"]{ text-align:left; font-weight:600; color:var(--text); width:34%; font-family:'Inter', sans-serif; font-size:14.5px; } .cmp-hint{ display:block; font-weight:400; font-size:12.5px; color:var(--muted-2); margin-top:2px; } .cmp-plan{ display:block; font-family:'Sora', sans-serif; font-size:17px; font-weight:700; margin-bottom:6px; } .cmp-price{ display:block; font-family:'Sora', sans-serif; font-size:27px; font-weight:700; letter-spacing:-0.02em; margin-bottom:14px; } .cmp-price small{ font-size:13px; font-weight:500; color:var(--muted-2); margin-left:2px; } .cmp-pop{ display:inline-block; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; padding:3px 12px; border-radius:100px; margin-bottom:10px; } .compare .is-feat{ background:var(--accent-soft); } .compare tr.cmp-group th{ text-align:left; background:var(--bg-alt); color:var(--muted); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:12px 20px; } .compare tr.cmp-group th{ border-bottom:1px solid var(--line); } .cmp-yes{ width:20px; height:20px; color:var(--ok); vertical-align:middle; } .cmp-no{ color:var(--muted-2); font-size:16px; } .compare tr.cmp-foot td{ padding:20px; border-bottom:none; } .compare tbody tr:not(.cmp-group):not(.cmp-foot):hover th[scope="row"], .compare tbody tr:not(.cmp-group):not(.cmp-foot):hover td:not(.is-feat){ background:var(--surface-2); } .compare-cta{ margin-top:48px; } /* ---------- motion safety ---------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } }