/* Theme Name: AllCloudHost Theme URI: https://allcloudhost.net Author: AllCloudHost Description: Custom, standalone theme for AllCloudHost — a clean, verifiable-reliability hosting design built for speed. Ships its own shortcode handlers, order-form scripting, and plugin-widget interactivity so it works fully standalone with the ResellersPanel plugin. Version: 1.3.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: allcloudhost */ :root{ --paper:#F6F7F9; --paper-raised:#FFFFFF; --ink:#14171B; --ink-soft:#5B6472; --ink-faint:#8A93A3; --console-bg:#12151C; --console-line:#262B36; --console-text:#D8DDE5; --line:#E4E7EB; --line-strong:#D3D8DE; --signal:#00A4A6; --signal-ink:#067A7C; --signal-dim:rgba(0,164,166,0.09); --amber:#B8791C; --amber-dim:rgba(184,121,28,0.10); --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-display:var(--font-body); --font-mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace; --radius:10px; --radius-sm:8px; --radius-pill:999px; --shadow-card:0 1px 2px rgba(20,23,27,0.04), 0 8px 24px -12px rgba(20,23,27,0.10); --shadow-raised:0 4px 12px -4px rgba(20,23,27,0.14), 0 16px 40px -16px rgba(20,23,27,0.18); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} /* * Reported live via real iPhone screenshots as a broken/cut-off * feeling across mobile pages generally, not just one component. * Root cause, confirmed via getBoundingClientRect(): nav.primary (the * mobile off-canvas menu) sits at `position:fixed; right:0; * transform:translateX(100%)` — correct for a slide-in panel — but * with nothing clipping it, that permanently off-screen 320px-wide * panel still counts toward the document's scrollable width on every * single page, all the time, whether the menu is open or not. Result: * every mobile page had ~320px of extra horizontal scroll room before * this was even touched, which is exactly the kind of "content here * and there" feeling that's hard to pin on any one element. Standard, * safe fix for this exact off-canvas-nav pattern: clip it at the * document level. Doesn't affect the panel's own slide-in animation — * overflow:hidden on an ancestor only clips normal document-flow * scrolling, not a `position:fixed` element's ability to render when * transformed into view, since body/html don't establish a containing * block for it (no transform/filter/perspective of their own). */ html, body{overflow-x:hidden;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{max-width:100%; height:auto;} a{color:inherit;} :focus-visible{outline:2px solid var(--signal); outline-offset:2px;} .wrap{max-width:1152px; margin:0 auto; padding:0 24px;} h1,h2,h3{font-family:var(--font-display); margin:0; letter-spacing:-0.02em; font-weight:700;} .mono{font-family:var(--font-mono);} .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal!important; } /* ---- status strip ---- */ .status-strip{background:var(--console-bg); color:var(--console-text); font-family:var(--font-mono); font-size:12px;} .status-strip .wrap{display:flex; align-items:center; gap:20px; padding:8px 24px; flex-wrap:wrap;} .dot{width:6px; height:6px; border-radius:50%; background:var(--signal); display:inline-block; margin-right:7px;} .status-strip .sep{color:var(--console-line);} /* ---- header ---- */ header.site{background:rgba(246,247,249,0.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;} header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px;} .logo{font-family:var(--font-display); font-weight:800; font-size:19px; text-decoration:none; display:flex; align-items:center; gap:8px; color:var(--ink);} /* Only the plain-text fallback (no custom logo image set) gets the accent tick — the actual logo image already has its own mark, so this would just look like a redundant second icon next to it. */ a.logo::before{content:""; width:8px; height:20px; border-radius:2px; background:var(--signal); display:inline-block;} .logo img{max-height:38px; width:auto;} /* * `nav.primary ul` (not scoped to the top-level list only) used to also * match the nested .sub-menu WordPress outputs for a parent item with * children, turning the dropdown into a flex ROW instead of a panel — * confirmed live once the Hosting dropdown was created. Scoped to the * direct child `