:root{ --bg:#f7f4f0; --bg-elevated:#ffffff; --bg-sunken:#efe9e2; --text:#18181a; --text-dim:#5c5750; --border:rgba(24,24,26,0.12); --accent:#680b0c; --accent-deep:#680b0c; --accent-soft:#f0e7e7; --mild:#e2a03f; --medium:#ff5a1f; --hell:#a4180a; --cold:#1c3f66; --shadow:0 20px 50px -25px rgba(24,18,14,0.35); --radius:14px; } @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg:#0b0c0e; --bg-elevated:#16181b; --bg-sunken:#0f1012; --text:#f1efec; --text-dim:#a3a09b; --border:rgba(255,255,255,0.12); --accent:#a3282a; --accent-deep:#680b0c; --accent-soft:rgba(104,11,12,0.18); --cold:#3d6ea1; --shadow:0 20px 60px -20px rgba(0,0,0,0.6); } } :root[data-theme="dark"]{ --bg:#0b0c0e; --bg-elevated:#16181b; --bg-sunken:#0f1012; --text:#f1efec; --text-dim:#a3a09b; --border:rgba(255,255,255,0.12); --accent:#a3282a; --accent-deep:#680b0c; --accent-soft:rgba(104,11,12,0.18); --cold:#3d6ea1; --shadow:0 20px 60px -20px rgba(0,0,0,0.6); } :root[data-theme="light"]{ --bg:#f7f4f0; --bg-elevated:#ffffff; --bg-sunken:#efe9e2; --text:#18181a; --text-dim:#5c5750; --border:rgba(24,24,26,0.12); --accent:#680b0c; --accent-deep:#680b0c; --accent-soft:#f0e7e7; --cold:#1c3f66; --shadow:0 20px 50px -25px rgba(24,18,14,0.35); } /* header + footer stay a "light island" in dark mode, matching the exact light-theme bar color — the logo art is dark ink on transparent and needs a light backdrop */ :root[data-theme="dark"] .hothost-home header.site, :root[data-theme="dark"] .hothost-home footer{ --bg:#f7f4f0; --bg-elevated:#ffffff; --bg-sunken:#efe9e2; --text:#18181a; --text-dim:#5c5750; --border:rgba(24,24,26,0.12); --accent:#680b0c; --accent-deep:#680b0c; --accent-soft:#f0e7e7; --cold:#1c3f66; --shadow:0 20px 50px -25px rgba(24,18,14,0.35); } :root[data-theme="dark"] .hothost-home footer{background:var(--bg);} @media (prefers-color-scheme: dark){ :root:not([data-theme]) .hothost-home header.site, :root:not([data-theme]) .hothost-home footer{ --bg:#f7f4f0; --bg-elevated:#ffffff; --bg-sunken:#efe9e2; --text:#18181a; --text-dim:#5c5750; --border:rgba(24,24,26,0.12); --accent:#680b0c; --accent-deep:#680b0c; --accent-soft:#f0e7e7; --cold:#1c3f66; --shadow:0 20px 50px -25px rgba(24,18,14,0.35); } :root:not([data-theme]) .hothost-home footer{background:var(--bg);} } body.hothost-home{ background:var(--bg); color:var(--text); font-family:Georgia,'Iowan Old Style','Times New Roman',serif; line-height:1.55; -webkit-font-smoothing:antialiased; overscroll-behavior-x:none; margin:0; } .hothost-home *{box-sizing:border-box;} /* overflow-x:hidden on was tried here to stop iOS rubber-band side-scroll, but WebKit breaks position:sticky on descendants whenever html/body establishes a non-visible overflow-x — that's what made the sticky header vanish. overscroll-behavior-x blocks the bounce/rubber-band gesture without touching the overflow/containing-block computation, so it can't interfere with sticky positioning. body keeps its pre-existing overflow-x:hidden (that one was never the problem). */ html{scroll-padding-top:92px;overscroll-behavior-x:none;} .hothost-home section[id],.hothost-home .hero[id]{scroll-margin-top:92px;} .hothost-home .mono{ font-family:'Cascadia Code','JetBrains Mono',Consolas,'SF Mono',ui-monospace,Menlo,monospace; } .hothost-home h1,.hothost-home h2,.hothost-home h3,.hothost-home .display{ font-family:'Cascadia Code','JetBrains Mono',Consolas,'SF Mono',ui-monospace,Menlo,monospace; font-weight:700; letter-spacing:-0.01em; text-wrap:balance; margin:0; } .hothost-home a{color:inherit;} .hothost-home .wrap{max-width:1160px;margin:0 auto;padding:0 28px;} .hothost-home img,.hothost-home svg{max-width:100%;display:block;} .hothost-home button{font:inherit;} .hothost-home ::selection{background:var(--accent);color:#fff;} .hothost-home :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} /* ---------- header ---------- */ .hothost-home header.site{ position:sticky;top:0;z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .hothost-home .nav{ display:flex;align-items:center;justify-content:space-between; padding:16px 28px;max-width:1160px;margin:0 auto; position:relative; } .hothost-home .logo{ display:flex;align-items:center;gap:9px; text-decoration:none; } .hothost-home .logo-pepper{width:27px;height:27px;flex:none;display:block;} .hothost-home .logo-pepper .pepper-body{fill:var(--accent);} .hothost-home .logo-pepper .pepper-leaf{fill:#4c8f45;} .hothost-home .logo-text{ font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-weight:700;font-size:18px;letter-spacing:-0.02em;color:var(--text); } .hothost-home .logo-crop{display:block;height:80px;} .hothost-home .logo-crop .logo-img{ display:block;height:80px;width:auto;max-width:none; } .hothost-home .nav-collapsible{display:flex;align-items:center;gap:28px;margin:0 20px 0 auto;} .hothost-home nav.links{display:flex;gap:28px;align-items:center;} .hothost-home nav.links a{ font-size:14.5px;text-decoration:none;color:var(--text-dim); font-family:system-ui,-apple-system,sans-serif; white-space:nowrap; } .hothost-home nav.links a:hover{color:var(--text);} .hothost-home .nav-actions{display:flex;align-items:center;gap:12px;} .hothost-home .nav-controls{display:flex;align-items:center;gap:10px;flex:none;} .hothost-home .btn{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:8px; font-family:system-ui,-apple-system,sans-serif; font-size:14.5px;font-weight:600;text-decoration:none; border:1px solid transparent;cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .hothost-home .btn:hover{transform:translateY(-1px);} .hothost-home .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent);} .hothost-home .btn-primary:hover{background:var(--accent-deep);} .hothost-home .btn-ghost{border-color:var(--border);color:var(--text);background:transparent;} .hothost-home .btn-ghost:hover{border-color:var(--accent);} .hothost-home .menu-toggle{ display:none;position:relative;cursor:pointer;border:none;padding:0; width:42px;height:42px;flex:none; background:var(--accent); clip-path:polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%); transition:background .15s ease, transform .15s ease; } .hothost-home .menu-toggle:hover{background:var(--accent-deep);transform:translateY(-1px);} .hothost-home .menu-toggle svg{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:19px;height:19px;stroke:#fff; } /* jasny / ciemny suwak */ .hothost-home .theme-toggle{background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;flex:none;} .hothost-home .theme-toggle-track{ position:relative;width:52px;height:26px;border-radius:999px; background:var(--bg-sunken);border:1px solid var(--border); display:inline-flex;align-items:center;justify-content:space-between; padding:0 6px;box-sizing:border-box; } .hothost-home .theme-icon{width:13px;height:13px;stroke:var(--text-dim);position:relative;z-index:1;flex:none;} .hothost-home .theme-toggle-thumb{ position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:var(--bg-elevated);box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease, background .2s ease; } :root[data-theme="dark"] .hothost-home .theme-toggle-thumb{transform:translateX(26px);} @media (prefers-color-scheme: dark){ :root:not([data-theme]) .hothost-home .theme-toggle-thumb{transform:translateX(26px);} } /* mobile nav drawer */ .hothost-home .nav-collapsible{display:none;} .hothost-home .nav.mobile-open .nav-collapsible{ display:flex !important; position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:18px; background:var(--bg-elevated);border-bottom:1px solid var(--border); padding:20px 28px;box-shadow:var(--shadow); margin:0;z-index:40; } .hothost-home .nav.mobile-open .nav-collapsible nav.links{ flex-direction:column;align-items:flex-start;gap:14px; } .hothost-home .nav.mobile-open .nav-collapsible .nav-actions{ flex-direction:column;align-items:stretch;gap:10px; padding-top:14px;border-top:1px solid var(--border); } .hothost-home .nav.mobile-open .nav-collapsible .nav-actions .btn{justify-content:center;} @media (min-width:861px){ .hothost-home .nav-collapsible{display:flex;} } /* ---------- hero ---------- */ .hothost-home .hero{padding:112px 0 40px;position:relative;overflow:hidden;} .hothost-home .hero .wrap, .hothost-home .hero .strip{position:relative;z-index:1;} .hothost-home .hero-grid{ display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center; } .hothost-home .eyebrow{ font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-deep);display:flex;align-items:center;gap:10px;margin-bottom:18px; } .hothost-home .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-deep);display:block;} .hothost-home .hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.05;} .hothost-home .hero h1 em{font-style:normal;color:var(--accent);} .hothost-home .hero .lede{ font-size:18px;color:var(--text-dim);max-width:52ch;margin:22px 0 30px; } .hothost-home .hero .cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:30px;} .hothost-home .hero .cta-row .btn{padding:13px 24px;font-size:15.5px;} .hothost-home .chips{display:flex;flex-wrap:wrap;gap:10px;} .hothost-home .chip{ font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-size:12px;padding:6px 11px;border-radius:100px; border:1px solid var(--border);color:var(--text-dim); background:var(--bg-elevated); } /* thermal gauge card */ .hothost-home .gauge-card{ background:var(--bg-elevated);border:1px solid var(--border); border-radius:var(--radius);padding:26px;box-shadow:var(--shadow); position:relative;overflow:hidden; } .hothost-home .gauge-card .gc-head{ display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px; } .hothost-home .gauge-card .gc-head .label{ font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim); } .hothost-home .gauge-card .gc-head .live{ font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-size:15px;color:var(--medium);display:flex;align-items:center;gap:8px; font-weight:700;letter-spacing:.04em; animation:hothost-live-text-pulse 1.4s ease-in-out infinite; } .hothost-home .live .dot{ width:10px;height:10px;border-radius:50%;background:currentColor;flex:none; animation:hothost-pulse 1.4s ease-in-out infinite; } @keyframes hothost-pulse{ 0%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);} 70%{transform:scale(1.25);box-shadow:0 0 0 7px transparent;} 100%{transform:scale(1);box-shadow:0 0 0 0 transparent;} } @keyframes hothost-live-text-pulse{ 0%,100%{opacity:1;} 50%{opacity:.6;} } .hothost-home .heatbar{ height:34px;border-radius:8px;display:flex;overflow:hidden; border:1px solid var(--border);margin-bottom:10px; } .hothost-home .heatbar span{flex:1;position:relative;} .hothost-home .heatbar .seg-mild{background:linear-gradient(90deg,#f0c988,var(--mild));} .hothost-home .heatbar .seg-medium{background:linear-gradient(90deg,var(--mild),var(--medium));} .hothost-home .heatbar .seg-hell{background:linear-gradient(90deg,var(--medium),var(--hell));} .hothost-home .heat-labels{ display:flex;align-items:flex-start;font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-size:11.5px;color:var(--text-dim);margin-bottom:22px; } .hothost-home .heat-labels span{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;} .hothost-home .heat-callout{ font-size:9.5px;color:var(--medium);font-weight:700;letter-spacing:0; white-space:normal;line-height:1.3;max-width:11ch; } .hothost-home .readouts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:26px;} .hothost-home .readout{background:var(--bg-elevated);padding:16px;} .hothost-home .readout .rv{ font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-size:22px;font-weight:700;font-variant-numeric:tabular-nums; } .hothost-home .readout .rl{font-size:11.5px;color:var(--text-dim);font-family:system-ui,sans-serif;margin-top:2px;} /* ---------- section shell ---------- */ .hothost-home section{padding:80px 0;} .hothost-home .section-head{max-width:640px;margin-bottom:48px;} .hothost-home .section-head .eyebrow{margin-bottom:14px;} .hothost-home .section-head h2{font-size:clamp(26px,3vw,36px);} .hothost-home .section-head p{color:var(--text-dim);font-size:16.5px;margin-top:14px;} .hothost-home .alt{background:var(--bg-sunken);} /* feature strip */ .hothost-home .strip{display:flex;flex-wrap:wrap;gap:12px;padding:36px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .hothost-home .strip .item{ display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dim); font-family:system-ui,-apple-system,sans-serif; } .hothost-home .strip .item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;} /* domain search */ .hothost-home .domain-module{ background:var(--bg-sunken);border:1px solid var(--border);border-top:2px solid var(--accent); border-radius:var(--radius);padding:48px 44px; } .hothost-home .domain-module .section-head{margin-bottom:32px;} .hothost-home .domain-search-box{ background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);display:flex;gap:12px;padding:14px; } .hothost-home .domain-search-input{ flex:1;min-width:0;border:1px solid var(--border);border-radius:8px; padding:14px 16px;font-size:16px; font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; background:var(--bg);color:var(--text); } .hothost-home .domain-search-input::placeholder{color:var(--text-dim);} .hothost-home .domain-search-input:focus{outline:none;border-color:var(--accent);} .hothost-home .domain-search-box .btn{white-space:nowrap;} .hothost-home .domain-strip{margin-top:32px;justify-content:center;} @media (max-width:600px){ .hothost-home .domain-module{padding:32px 20px;} .hothost-home .domain-search-box{flex-direction:column;} .hothost-home .domain-search-box .btn{width:100%;justify-content:center;} } /* feature grid */ .hothost-home .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;} .hothost-home .feat{background:var(--bg-elevated);padding:30px 26px;} .hothost-home .feat .fi{ width:38px;height:38px;border-radius:9px;background:var(--accent-soft); display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .hothost-home .feat .fi svg{width:18px;height:18px;stroke:var(--accent-deep);} .hothost-home .feat h3{font-size:16px;font-family:system-ui,-apple-system,sans-serif;font-weight:700;margin-bottom:8px;} .hothost-home .feat p{font-size:14.5px;color:var(--text-dim);margin:0;} /* pricing */ .hothost-home .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .hothost-home .plan{ background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius); padding:30px 26px;display:flex;flex-direction:column;position:relative; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .hothost-home .plan:hover{transform:translateY(-4px);box-shadow:var(--shadow);} .hothost-home .plan.popular{border-color:var(--accent);} .hothost-home .badge{ position:absolute;top:-13px;left:26px;background:var(--accent);color:#fff; font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-size:11px;padding:4px 10px;border-radius:100px;letter-spacing:.04em; } .hothost-home .plan .heat-dot{width:11px;height:11px;border-radius:50%;margin-bottom:14px;} .hothost-home .plan .p-mild{background:var(--mild);} .hothost-home .plan .p-medium{background:var(--medium);} .hothost-home .plan .p-hell{background:var(--hell);} .hothost-home .plan h3{font-family:system-ui,-apple-system,sans-serif;font-size:20px;margin-bottom:4px;} .hothost-home .plan .tagline{font-size:13.5px;color:var(--text-dim);margin-bottom:20px;font-family:system-ui,sans-serif;} .hothost-home .plan .price{display:flex;align-items:baseline;gap:6px;margin-bottom:2px;} .hothost-home .plan .price .amt{font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace;font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;} .hothost-home .plan .price .per{font-size:13.5px;color:var(--text-dim);font-family:system-ui,sans-serif;} .hothost-home .plan .first-year{font-size:12px;color:var(--text-dim);margin-bottom:22px;font-family:system-ui,sans-serif;} .hothost-home .plan ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;} .hothost-home .plan li{ font-size:14px;color:var(--text);display:flex;gap:9px;font-family:system-ui,-apple-system,sans-serif; } .hothost-home .plan li::before{content:"✓";color:var(--accent-deep);font-weight:700;flex:none;} .hothost-home .plan .btn{width:100%;justify-content:center;margin-top:auto;} .hothost-home .plan .btn-ghost{border:2px solid var(--accent);color:var(--accent-deep);} .hothost-home .plan .btn-ghost:hover{background:var(--accent-soft);} :root[data-theme="dark"] .hothost-home .plan .btn-ghost{border-color:#fff;color:#fff;} :root[data-theme="dark"] .hothost-home .plan .btn-ghost:hover{background:rgba(255,255,255,.1);} @media (prefers-color-scheme: dark){ :root:not([data-theme]) .hothost-home .plan .btn-ghost{border-color:#fff;color:#fff;} :root:not([data-theme]) .hothost-home .plan .btn-ghost:hover{background:rgba(255,255,255,.1);} } .hothost-home .plan .note{font-size:11.5px;color:var(--text-dim);text-align:center;margin-top:9px;font-family:system-ui,sans-serif;} /* migration steps */ .hothost-home .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;} .hothost-home .steps::before{ content:"";position:absolute;top:19px;left:0;right:0;height:1px;background:var(--border); } .hothost-home .step{position:relative;padding-right:20px;} .hothost-home .step .num{ width:38px;height:38px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border); display:flex;align-items:center;justify-content:center;position:relative;z-index:1; font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace;font-size:14px;margin-bottom:18px; } .hothost-home .step.active .num{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft);} .hothost-home .step h3{font-size:15.5px;font-family:system-ui,-apple-system,sans-serif;margin-bottom:8px;} .hothost-home .step p{font-size:13.5px;color:var(--text-dim);margin:0;} /* comparison table */ .hothost-home .tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);} .hothost-home table{width:100%;border-collapse:collapse;min-width:620px;} .hothost-home th,.hothost-home td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--border);font-size:14px;} .hothost-home th{font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);background:var(--bg-sunken);} .hothost-home td.spec{color:var(--text-dim);font-family:system-ui,sans-serif;} .hothost-home td.yes{color:var(--accent-deep);font-family:'Cascadia Code',monospace;text-align:center;} .hothost-home tr:last-child td{border-bottom:none;} /* comparison table on narrow screens: stacked cards instead of a horizontally-scrolling table — one parameter per card, plan values listed underneath with inline labels via data-label */ @media (max-width:700px){ .hothost-home .tbl-wrap{overflow-x:visible;border:none;border-radius:0;} .hothost-home .tbl-wrap table{min-width:0;} .hothost-home .tbl-wrap thead{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } .hothost-home .tbl-wrap table, .hothost-home .tbl-wrap tbody, .hothost-home .tbl-wrap tr, .hothost-home .tbl-wrap td{display:block;width:100%;} .hothost-home .tbl-wrap tr{ background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);padding:4px 18px;margin-bottom:14px; } .hothost-home .tbl-wrap tr:last-child{margin-bottom:0;} .hothost-home .tbl-wrap td{padding:12px 0;border-bottom:1px solid var(--border);} .hothost-home .tbl-wrap td:last-child{border-bottom:none;} .hothost-home .tbl-wrap td.spec{ font-family:system-ui,-apple-system,sans-serif;font-weight:700;font-size:15px;color:var(--text); } .hothost-home .tbl-wrap td.yes{ display:flex;align-items:center;justify-content:space-between; text-align:left;font-size:15px; } .hothost-home .tbl-wrap td.yes::before{ content:attr(data-label);font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace; font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim); } } /* faq */ .hothost-home details{border-bottom:1px solid var(--border);padding:20px 0;} .hothost-home details summary{ cursor:pointer;font-family:system-ui,-apple-system,sans-serif;font-weight:600;font-size:16px; list-style:none;display:flex;justify-content:space-between;align-items:center; } .hothost-home details summary::-webkit-details-marker{display:none;} .hothost-home details summary::after{content:"+";font-family:monospace;font-size:20px;color:var(--text-dim);} .hothost-home details[open] summary::after{content:"\2013";} .hothost-home details p{color:var(--text-dim);margin:14px 0 0;max-width:70ch;font-size:15px;} /* cta band */ .hothost-home .cta-band{ background:linear-gradient(120deg,var(--bg-elevated),var(--bg-sunken)); border:1px solid var(--border);border-radius:var(--radius); padding:56px;display:flex;justify-content:space-between;align-items:center;gap:30px; } .hothost-home .cta-band h2{font-size:26px;max-width:22ch;} /* footer */ .hothost-home footer{border-top:1px solid var(--border);padding:56px 0 34px;} .hothost-home .foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:40px;} .hothost-home .foot-grid h4{font-size:13px;font-family:'Cascadia Code',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:16px;} .hothost-home .foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .hothost-home .foot-grid a{text-decoration:none;font-size:14.5px;color:var(--text-dim);font-family:system-ui,sans-serif;} .hothost-home .foot-grid a:hover{color:var(--accent);} .hothost-home .foot-bottom{ display:flex;justify-content:space-between;align-items:center;padding-top:24px; border-top:1px solid var(--border);font-size:13px;color:var(--text-dim);font-family:system-ui,sans-serif;flex-wrap:wrap;gap:12px; } @media (max-width:860px){ .hothost-home .hero-grid{grid-template-columns:1fr;} .hothost-home .menu-toggle{display:inline-flex;} .hothost-home .feat-grid,.hothost-home .price-grid{grid-template-columns:1fr;} .hothost-home .steps{grid-template-columns:1fr;gap:24px;} .hothost-home .steps::before{display:none;} .hothost-home .foot-grid{grid-template-columns:1fr 1fr;} } @media (max-width:600px){ .hothost-home .foot-grid{grid-template-columns:1fr;} .hothost-home .cta-band{flex-direction:column;text-align:center;padding:40px 26px;} .hothost-home .nav{padding:14px 20px;} .hothost-home .logo-text{font-size:16px;} /* the 80px-tall logo left no room for the theme/menu buttons at narrow widths — they were being pushed a couple px past the viewport edge */ .hothost-home .logo-crop{height:44px;} .hothost-home .logo-crop .logo-img{height:44px;} } @media (prefers-reduced-motion:reduce){ .hothost-home .live .dot,.hothost-home .live{animation:none;} .hothost-home .plan,.hothost-home .btn{transition:none;} } /* ---------- inner page hero (Hosting/Poczta/SSL/etc.) ---------- */ .hothost-home .page-hero{padding:64px 0 24px;} .hothost-home .page-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.08;max-width:22ch;} .hothost-home .page-hero .lede{font-size:17px;color:var(--text-dim);max-width:62ch;margin:20px 0 0;} /* ---------- content card (used for form pages) ---------- */ .hothost-home .form-card{ background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius); padding:32px;box-shadow:var(--shadow);max-width:680px; } .hothost-home .form-card h2{font-size:20px;margin-bottom:6px;} .hothost-home .form-card .lede{font-size:14.5px;color:var(--text-dim);margin:0 0 22px;font-family:system-ui,sans-serif;} .hothost-home .contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;} .hothost-home .contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:26px;} .hothost-home .contact-cards .feat{padding:24px;} /* light-touch Forminator form styling to match brand */ .hothost-home .form-card .forminator-row{margin-bottom:16px;} .hothost-home .form-card input[type="text"], .hothost-home .form-card input[type="email"], .hothost-home .form-card input[type="tel"], .hothost-home .form-card input[type="number"], .hothost-home .form-card textarea, .hothost-home .form-card select{ width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:8px; font-family:system-ui,-apple-system,sans-serif;font-size:14.5px;color:var(--text); background:var(--bg); } .hothost-home .form-card input:focus, .hothost-home .form-card textarea:focus, .hothost-home .form-card select:focus{ outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent); } .hothost-home .form-card label{font-size:13.5px;font-family:system-ui,-apple-system,sans-serif;color:var(--text-dim);} .hothost-home .form-card .forminator-button-submit, .hothost-home .form-card button[type="submit"]{ background-color:var(--accent-deep) !important; background-image:linear-gradient(to top, var(--accent-deep), var(--accent)) !important; color:#fff !important;border:none !important;border-radius:8px !important; padding:12px 26px !important;font-weight:600 !important;font-family:system-ui,-apple-system,sans-serif !important; cursor:pointer; } /* ---------- legal / prose pages (Regulamin, Polityka prywatności) ---------- */ .hothost-home .legal-content{max-width:760px;margin:0 auto;padding:56px 0 70px;} .hothost-home .legal-content h1{font-size:30px;margin-bottom:28px;} .hothost-home .legal-content h2{font-size:19px;margin:34px 0 12px;font-family:system-ui,-apple-system,sans-serif;font-weight:700;color:var(--text);} .hothost-home .legal-content p{font-size:15px;color:var(--text-dim);line-height:1.75;margin:0 0 14px;} .hothost-home .legal-content ol,.hothost-home .legal-content ul{padding-left:22px;margin:0 0 16px;color:var(--text-dim);font-size:15px;line-height:1.75;} .hothost-home .legal-content li{margin-bottom:6px;} .hothost-home .legal-content strong{color:var(--text);} @media (max-width:860px){ .hothost-home .contact-grid{grid-template-columns:1fr;gap:28px;} .hothost-home .contact-cards{grid-template-columns:1fr;} } /* Complianz cookie banner ships a fixed 447px width regardless of viewport */ @media (max-width:480px){ .hothost-home .cmplz-cookiebanner{ width:auto !important; max-width:calc(100vw - 24px) !important; left:12px !important; right:12px !important; } } /* ---------- breadcrumbs (Yoast SEO) ---------- */ .hothost-home .hh-breadcrumbs{font-size:13px;color:var(--text-dim);margin-bottom:14px;font-family:system-ui,-apple-system,sans-serif;} .hothost-home .hh-breadcrumbs a{color:var(--text-dim);text-decoration:none;} .hothost-home .hh-breadcrumbs a:hover{color:var(--accent);text-decoration:underline;} /* ---------- privacy policy generator ---------- */ .hothost-home .pg-tool{display:grid;grid-template-columns:0.95fr 1.15fr;gap:32px;align-items:start;} .hothost-home .pg-form{ background:var(--bg-sunken);border:1px solid var(--border);border-top:2px solid var(--accent); border-radius:var(--radius);padding:36px 32px; } .hothost-home .pg-form h2{font-size:19px;margin-bottom:22px;font-family:system-ui,-apple-system,sans-serif;} .hothost-home .pg-field{margin-bottom:18px;} .hothost-home .pg-field label{ display:block;font-size:13px;font-weight:600;margin-bottom:7px; font-family:system-ui,-apple-system,sans-serif;color:var(--text); } .hothost-home .pg-field .hint{display:block;font-weight:400;color:var(--text-dim);font-size:12px;margin-top:4px;} .hothost-home .pg-input{ width:100%;border:1px solid var(--border);border-radius:8px; padding:12px 14px;font-size:14.5px;font-family:system-ui,-apple-system,sans-serif; background:var(--bg-elevated);color:var(--text);box-sizing:border-box; } .hothost-home .pg-input:focus{outline:none;border-color:var(--accent);} .hothost-home .pg-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:22px;} .hothost-home .pg-check{ display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text); font-family:system-ui,-apple-system,sans-serif;cursor:pointer; } .hothost-home .pg-check input{margin-top:3px;accent-color:var(--accent);flex:none;} .hothost-home .pg-form .btn{width:100%;justify-content:center;margin-top:6px;} .hothost-home .pg-preview{ background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden;position:sticky;top:108px; } .hothost-home .pg-preview-head{ background:var(--accent);color:#fff;padding:16px 24px; } .hothost-home .pg-preview-head span{ font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace;font-size:12.5px; letter-spacing:.06em;text-transform:uppercase; } .hothost-home .pg-preview-body{padding:26px 28px;position:relative;} .hothost-home .pg-output{ font-family:Georgia,'Iowan Old Style',serif;font-size:14.5px;line-height:1.7; color:var(--text);white-space:pre-wrap;margin:0;max-height:2000px;overflow:hidden; } .hothost-home .pg-placeholder{color:var(--text-dim);font-style:italic;font-family:system-ui,sans-serif;} .hothost-home .pg-preview-body.is-locked .pg-output{max-height:280px;} .hothost-home .pg-preview-body.is-locked::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:120px; background:linear-gradient(to bottom, transparent, var(--bg-elevated)); pointer-events:none; } .hothost-home .pg-gate{ display:none;margin-top:22px;padding-top:22px;border-top:1px dashed var(--border);position:relative;z-index:1; } .hothost-home .pg-preview-body.is-locked .pg-gate{display:block;} .hothost-home .pg-gate h3{font-size:16px;margin-bottom:6px;} .hothost-home .pg-gate p{font-size:13.5px;color:var(--text-dim);margin:0 0 16px;} .hothost-home .pg-gate-row{display:flex;gap:10px;margin-bottom:12px;} .hothost-home .pg-gate-row .pg-input{flex:1;} .hothost-home .pg-gate-row .btn{white-space:nowrap;} .hothost-home .pg-consent{ display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-dim); font-family:system-ui,-apple-system,sans-serif;margin-bottom:14px; } .hothost-home .pg-consent input{margin-top:2px;accent-color:var(--accent);flex:none;} .hothost-home .pg-msg{font-size:13px;margin-top:6px;font-family:system-ui,sans-serif;} .hothost-home .pg-msg.error{color:var(--hell);} .hothost-home .pg-msg.success{color:#2f8a4b;} .hothost-home .pg-actions{display:none;gap:12px;margin-top:20px;flex-wrap:wrap;} .hothost-home .pg-actions.is-visible{display:flex;} .hothost-home .pg-actions .btn{flex:1;min-width:150px;} .hothost-home .pg-disclaimer{ font-size:11.5px;color:var(--text-dim);margin-top:18px;padding-top:16px; border-top:1px solid var(--border);font-family:system-ui,sans-serif; } @media (max-width:900px){ .hothost-home .pg-tool{grid-template-columns:1fr;} .hothost-home .pg-preview{position:static;} } @media (max-width:600px){ .hothost-home .pg-form{padding:26px 20px;} .hothost-home .pg-check-grid{grid-template-columns:1fr;} .hothost-home .pg-gate-row{flex-direction:column;} .hothost-home .pg-actions{flex-direction:column;} } /* konfiguracja poczty — settings table + step accordions */ .hothost-home .mail-settings-table{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);} .hothost-home .mail-settings-table table{width:100%;border-collapse:collapse;font-size:14.5px;} .hothost-home .mail-settings-table th{text-align:left;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);border-bottom:2px solid var(--border);} .hothost-home .mail-settings-table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;} .hothost-home .mail-settings-table tr:last-child td{border-bottom:none;} .hothost-home .mail-settings-table code{background:var(--bg-sunken);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-size:13px;} .hothost-home .mail-tag{display:inline-block;margin-left:8px;background:var(--accent-soft);color:var(--accent-deep);font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;vertical-align:middle;} .hothost-home .mail-settings-note{margin-top:16px;font-size:13.5px;color:var(--text-dim);} .hothost-home .mail-settings-table + p{margin-top:0;} @media (max-width:640px){ .hothost-home .mail-settings-table{padding:14px;overflow-x:auto;} .hothost-home .mail-settings-table table{font-size:13px;} } .hothost-home .mail-guide details{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:14px;box-shadow:var(--shadow);} .hothost-home .mail-guide details summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;} .hothost-home .mail-guide details summary::-webkit-details-marker{display:none;} .hothost-home .mail-guide details summary::after{content:"+";font-size:22px;font-weight:400;color:var(--accent);flex-shrink:0;transition:transform .2s ease;} .hothost-home .mail-guide details[open] summary::after{content:"−";} .hothost-home .mail-guide details[open] summary{margin-bottom:14px;} .hothost-home .mail-guide details p{margin:0 0 10px;color:var(--text-dim);line-height:1.6;} .hothost-home .mail-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;} .hothost-home .mail-steps li{line-height:1.6;font-size:14.5px;} .hothost-home .mail-steps code{background:var(--bg-sunken);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:13px;} .hothost-home .mail-substep-label{font-weight:600;margin:18px 0 8px;color:var(--text);} .hothost-home .mail-substep-label:first-of-type{margin-top:0;} /* hot_Bocik — floating assistant widget */ #hotbocik{position:fixed;right:20px;bottom:20px;z-index:99999;font-family:system-ui,-apple-system,sans-serif;} #hotbocik-toggle{width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;border:none;box-shadow:var(--shadow);cursor:pointer;font-size:26px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;padding:0;} #hotbocik-toggle:hover{transform:scale(1.06);} #hotbocik-panel{position:absolute;right:0;bottom:76px;width:340px;max-width:calc(100vw - 40px);max-height:min(70vh,560px);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;} #hotbocik-panel[hidden]{display:none;} .hotbocik-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--accent);color:#fff;flex:none;} .hotbocik-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;} .hotbocik-head strong{display:block;font-size:14px;} .hotbocik-sub{font-size:12px;opacity:.85;} #hotbocik-close{margin-left:auto;background:none;border:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;} #hotbocik-messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;} .hotbocik-msg{display:flex;} .hotbocik-msg p{margin:0;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;max-width:88%;} .hotbocik-msg.bot p{background:var(--bg-sunken);color:var(--text);border-bottom-left-radius:4px;} .hotbocik-msg.user{justify-content:flex-end;} .hotbocik-msg.user p{background:var(--accent);color:#fff;border-bottom-right-radius:4px;} .hotbocik-msg p a{color:inherit;text-decoration:underline;} .hotbocik-tiles{display:flex;flex-direction:column;gap:8px;margin-top:2px;} .hotbocik-tile{text-align:left;background:var(--bg-sunken);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13px;color:var(--text);cursor:pointer;transition:border-color .15s ease;font-family:inherit;} .hotbocik-tile:hover{border-color:var(--accent);} .hotbocik-tiles-extra{margin-top:8px;} .hotbocik-tiles-extra[hidden]{display:none;} #hotbocik-more{align-self:flex-start;margin-top:8px;background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 2px;font-family:inherit;} #hotbocik-more:hover{text-decoration:underline;} .hotbocik-typing p{display:flex;align-items:center;gap:3px;padding:12px 14px;} .hotbocik-typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:hotbocik-blink 1.2s infinite;} .hotbocik-typing span:nth-child(2){animation-delay:.2s;} .hotbocik-typing span:nth-child(3){animation-delay:.4s;} @keyframes hotbocik-blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}} #hotbocik-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);flex:none;} #hotbocik-input{flex:1;border:1px solid var(--border);border-radius:20px;padding:9px 14px;font-size:13.5px;background:var(--bg);color:var(--text);outline:none;min-width:0;} #hotbocik-input:focus{border-color:var(--accent);} #hotbocik-form button[type="submit"]{width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;flex-shrink:0;font-size:15px;} @media (max-width:480px){ /* moved to the bottom-LEFT on phones — Complianz's own floating "Zarządzaj zgodą" consent button docks bottom-right at this size and would otherwise overlap the toggle button */ #hotbocik{left:10px;right:auto;bottom:10px;} #hotbocik-toggle{width:48px;height:48px;font-size:20px;} /* position:fixed with BOTH left and right set (no width, no vw units) — 100vw can be wider than the true visible viewport on mobile whenever anything on the page causes horizontal overflow, which blew the panel up off-screen. left+right insets on a fixed box are computed against the real visual viewport instead, so this can't happen again. */ #hotbocik-panel{ position:fixed; left:10px; bottom:66px; /* fixed compact width instead of stretching to (viewport - 20px) — on wider phones (iPhone 12 Pro and up) that made the panel look oversized. max-width still guards the narrowest phones so it can only shrink, never overflow. */ width:320px; max-width:calc(100vw - 20px); max-height:48vh; max-height:48dvh; border-radius:16px; } .hotbocik-head{padding:10px 12px;} .hotbocik-avatar{width:28px;height:28px;font-size:14px;} .hotbocik-head strong{font-size:13px;} .hotbocik-sub{font-size:11px;} #hotbocik-messages{padding:10px 12px;gap:8px;} .hotbocik-msg p{font-size:12.5px;padding:8px 10px;max-width:92%;} .hotbocik-tile{padding:7px 10px;font-size:12px;} #hotbocik-form{padding:8px 10px;} /* font-size must stay >=16px on mobile — anything smaller makes iOS Safari auto-zoom the whole page in on focus, which looks exactly like the page "floating"/panning sideways. */ #hotbocik-input{padding:7px 12px;font-size:16px;} #hotbocik-form button[type="submit"]{width:32px;height:32px;} }