/* ServerDale — public site. Keeps the original identity (orange #fc9400 on neutral greys) and rebuilds the layout on a modern, responsive, accessible base. */ /* ------------------------------------------------------------- tokens --- */ :root { color-scheme: light dark; /* Brand — carried over from the legacy theme. */ --brand: #fc9400; --brand-strong: #ed8406; --brand-soft: #fca63f; --brand-tint: #fff6e9; --bg: #ffffff; --bg-alt: #f7f7f8; --bg-raised: #ffffff; --bg-inset: #f1f1f3; --text: #1c1d21; --text-muted: #62646c; --text-faint: #8b8d96; --border: #e3e4e8; --border-strong: #cfd1d7; --ok: #1a8a4a; --warn: #b26a00; --err: #c0392b; --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgb(16 18 24 / 6%), 0 1px 3px rgb(16 18 24 / 4%); --shadow: 0 4px 12px rgb(16 18 24 / 8%), 0 1px 3px rgb(16 18 24 / 5%); --shadow-lg: 0 18px 40px rgb(16 18 24 / 12%), 0 3px 10px rgb(16 18 24 / 6%); --wrap: 1180px; --gap: clamp(1rem, 2.5vw, 2rem); --font: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The wordmark's two inks. The dark one has to flip on a dark background or half the logo disappears. */ --logo-dark: #17181d; --logo-brand: #fc9400; } /* Dark theme: follows the OS by default, overridden by the header toggle which stamps data-theme on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #101116; --bg-alt: #16171d; --bg-raised: #1b1c23; --bg-inset: #22242c; --text: #ecedf1; --text-muted: #a3a6b2; --text-faint: #767a88; --border: #2a2c35; --border-strong: #3a3d48; --brand-tint: #2a1f10; --logo-dark: #ecedf1; --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --shadow: 0 4px 14px rgb(0 0 0 / 45%); --shadow-lg: 0 20px 44px rgb(0 0 0 / 55%); } } :root[data-theme="dark"] { --bg: #101116; --bg-alt: #16171d; --bg-raised: #1b1c23; --bg-inset: #22242c; --text: #ecedf1; --text-muted: #a3a6b2; --text-faint: #767a88; --border: #2a2c35; --border-strong: #3a3d48; --brand-tint: #2a1f10; --logo-dark: #ecedf1; --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --shadow: 0 4px 14px rgb(0 0 0 / 45%); --shadow-lg: 0 20px 44px rgb(0 0 0 / 55%); } /* -------------------------------------------------------------- reset --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--brand-strong); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: 2px; } a:hover { text-decoration-color: var(--brand); } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); } h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); } p { margin: 0 0 1em; } code, pre, kbd, samp { font-family: var(--mono); font-size: .9em; } pre { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; overflow-x: auto; } code:not(pre code) { background: var(--bg-inset); padding: .15em .4em; border-radius: 4px; } mark { background: color-mix(in srgb, var(--brand) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 .15em; } /* ------------------------------------------------------------ layout --- */ .wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; } .skip { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff; padding: .75rem 1.25rem; z-index: 200; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip:focus { left: 0; } section { padding-block: clamp(2.5rem, 5vw, 4.5rem); } section.tight { padding-block: clamp(1.75rem, 3vw, 2.5rem); } .section-alt { background: var(--bg-alt); } .section-head { max-width: 46rem; margin-bottom: 2.5rem; } .section-head.center { margin-inline: auto; text-align: center; } .section-head p { color: var(--text-muted); font-size: 1.05rem; margin: 0; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: .6rem; } /* ------------------------------------------------------------ header --- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 1rem; min-height: 84px; } .logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; } /* The wordmark is a compact two-line lockup, so it needs real height to hold its own against the rest of the header. */ .logo svg { height: clamp(40px, 3.9vw, 56px); width: auto; } .main-nav { margin-inline-start: auto; } .main-nav ul { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .main-nav a { display: block; /* Tight horizontal padding: the content column is capped at 1180px, so the header has a fixed budget no matter how wide the screen gets. */ padding: .5rem .62rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; } .main-nav a:hover { background: var(--bg-inset); } .main-nav a[aria-current="page"] { color: var(--brand-strong); font-weight: 600; } .header-tools { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .phone-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .95rem; color: var(--text); text-decoration: none; white-space: nowrap; } .phone-link:hover { color: var(--brand-strong); } .phone-link svg { width: 16px; height: 16px; flex-shrink: 0; } .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; padding: 0; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } .icon-btn svg { width: 18px; height: 18px; } .lang-switch { font-weight: 600; font-size: .82rem; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; background: var(--bg-raised); } .lang-switch:hover { color: var(--text); border-color: var(--border-strong); } /* Sign in — points at the billing panel, in the visitor's language. */ .btn-login { padding: .5rem .95rem; font-size: .88rem; background: var(--brand-tint); color: var(--brand-strong); border-color: color-mix(in srgb, var(--brand) 40%, transparent); white-space: nowrap; } .btn-login:hover { background: var(--brand); border-color: var(--brand); color: #1c1d21; } .btn-login svg { width: 16px; height: 16px; flex-shrink: 0; } .nav-toggle { display: none; } /* ------------------------------------------------------------ buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.35rem; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .06s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #1c1d21; border-color: var(--brand); } .btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--bg-inset); } .btn-block { width: 100%; } .btn[aria-disabled="true"], .btn:disabled { background: var(--bg-inset); color: var(--text-faint); border-color: var(--border); cursor: not-allowed; pointer-events: none; } /* --------------------------------------------------------------- hero --- */ .hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem); background: radial-gradient(60rem 30rem at 78% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 65%), var(--bg); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero h1 { margin-bottom: .35em; } .hero .lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--text-muted); max-width: 34rem; margin-bottom: 1.75rem; } .badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); color: var(--brand-strong); font-size: .82rem; font-weight: 600; margin-bottom: 1.1rem; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; } /* Decorative mock of a Remote Desktop session. Shows the customer what they actually get — a familiar Windows desktop in a window — instead of a resource graph they would never look at. All CSS: no image to load, and it themes itself. */ .hero-art { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border); } .rdp { display: flex; flex-direction: column; } /* --- the RDP connection bar across the top --- */ .rdp-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: var(--bg-inset); border-bottom: 1px solid var(--border); font-size: .72rem; color: var(--text-muted); } .rdp-pin { width: 13px; height: 13px; flex-shrink: 0; opacity: .6; } .rdp-host { font-family: var(--mono); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdp-ctl { display: flex; gap: .35rem; margin-inline-start: auto; flex-shrink: 0; } .rdp-ctl i { width: 9px; height: 9px; border-radius: 2px; background: var(--border-strong); } .rdp-ctl i.close { background: color-mix(in srgb, var(--err) 65%, transparent); } /* --- the remote desktop itself --- */ .rdp-screen { position: relative; aspect-ratio: 16 / 10; padding: 1rem; background: radial-gradient(24rem 14rem at 78% 18%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%), linear-gradient(150deg, color-mix(in srgb, var(--brand) 8%, var(--bg-raised)), var(--bg-raised) 55%); } .rdp-desktop-icons { display: grid; gap: .7rem; width: 34px; } .rdp-shortcut { width: 26px; height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--text) 12%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } /* An application window sitting on the desktop. */ .rdp-window { position: absolute; inset-inline-start: 22%; inset-block-start: 16%; width: 62%; border-radius: var(--radius-sm); background: var(--bg-raised); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } .rdp-window-bar { display: flex; gap: 4px; padding: .45rem .55rem; background: var(--bg-inset); border-bottom: 1px solid var(--border); } .rdp-window-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); } .rdp-window-bar i:first-child { background: var(--brand); } .rdp-window-body { padding: .7rem .6rem; display: grid; gap: .4rem; } .rdp-line { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 13%, transparent); } .rdp-line.w80 { width: 80%; } .rdp-line.w70 { width: 70%; } .rdp-line.w55 { width: 55%; } .rdp-line.w40 { width: 40%; background: color-mix(in srgb, var(--brand) 55%, transparent); } /* --- taskbar --- */ .rdp-taskbar { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; gap: .4rem; padding: .4rem .6rem; background: color-mix(in srgb, var(--bg-inset) 88%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--border); } .rdp-start { width: 14px; height: 14px; border-radius: 3px; background: var(--brand); flex-shrink: 0; } .rdp-task { width: 14px; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--text) 16%, transparent); flex-shrink: 0; } .rdp-clock { margin-inline-start: auto; font-size: .62rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ features --- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; } .feature { padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-raised); } .feature .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--brand-tint); color: var(--brand-strong); margin-bottom: .9rem; } .feature .ico svg { width: 21px; height: 21px; } .feature h3 { font-size: 1.05rem; margin-bottom: .35em; } .feature p { color: var(--text-muted); font-size: .93rem; margin: 0; } /* --------------------------------------------------------------- plans --- */ .currency-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px; } .currency-switch button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: .85rem; color: var(--text-muted); padding: .4rem .85rem; border-radius: 7px; cursor: pointer; } .currency-switch button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-sm); } .plans-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; } /* Five tiers need to sit on one row at desktop width; the min track is sized so 5 cards + gaps still fit inside --wrap. */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 1rem; /* Stretch so every card ends level and the order buttons form one row, even when a longer price or OS name wraps. */ align-items: stretch; } .plan { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; } .plan:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); } .plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); } .plan-head { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--border); } /* The "most popular" flag is a full-width bar above the card body so it can never collide with a long plan name. */ .plan-flag { margin: 0; padding: .35rem .5rem; background: var(--brand); color: #1c1d21; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; text-align: center; } .plan-name { font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.01em; } .plan-price { display: flex; align-items: baseline; gap: .2rem; font-weight: 700; letter-spacing: -.03em; } .plan-price .amount { font-size: clamp(1.55rem, 1.1rem + 1.1vw, 2rem); } .plan-price .sign { font-size: 1.15rem; color: var(--text-muted); } .plan-price .per { font-size: .85rem; font-weight: 500; color: var(--text-faint); letter-spacing: 0; margin-inline-start: .15rem; } .plan-price[hidden] { display: none; } /* Cards without the flag get a matching spacer so every card's spec rows line up across the row. */ .plan:not(.featured)::before { content: ""; display: block; height: calc(.7rem + .68rem * 1.55); } .plan-specs { list-style: none; margin: 0; padding: 1rem 1.25rem; display: grid; gap: .55rem; flex: 1; font-size: .85rem; } .plan-specs li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; } .plan-specs .label { color: var(--text-muted); min-width: 0; } .plan-specs .value { font-weight: 600; text-align: end; /* Numbers never wrap; a long OS name is allowed to run onto a second line rather than overflow the card. */ overflow-wrap: break-word; min-width: 0; } .plan-specs .value.infinity { color: var(--brand-strong); font-size: 1.1rem; line-height: 1; } .plan-specs .value.yes { color: var(--ok); } .plan-foot { padding: 0 1.25rem 1.25rem; } .plans-note { margin-top: 1.5rem; font-size: .9rem; color: var(--text-muted); } /* ---------------------------------------------------------------- prose --- */ .prose { max-width: 46rem; } .prose h2 { margin-top: 2em; } .prose h3 { margin-top: 1.6em; } .prose ul, .prose ol { padding-inline-start: 1.4em; margin: 0 0 1em; } .prose li { margin-bottom: .4em; } .prose img { border-radius: var(--radius-sm); border: 1px solid var(--border); margin-block: 1.5em; } .prose table { width: 100%; border-collapse: collapse; margin-block: 1.5em; font-size: .93rem; } .prose th, .prose td { border: 1px solid var(--border); padding: .6rem .8rem; text-align: start; } .prose th { background: var(--bg-inset); font-weight: 600; } .prose blockquote { margin: 1.5em 0; padding: .25em 0 .25em 1.25em; border-inline-start: 3px solid var(--brand); color: var(--text-muted); } .table-scroll { overflow-x: auto; } /* ---------------------------------------------------------- breadcrumbs --- */ .breadcrumbs { font-size: .85rem; color: var(--text-faint); padding-block: 1rem 0; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; } .breadcrumbs li::after { content: "/"; margin-inline-start: .4rem; color: var(--border-strong); } .breadcrumbs li:last-child::after { content: none; } .breadcrumbs a { color: var(--text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--brand-strong); } /* ------------------------------------------------------------------ kb --- */ .kb-search { display: flex; gap: .5rem; max-width: 34rem; margin-bottom: 2.5rem; } .kb-search input { flex: 1; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-raised); color: var(--text); font: inherit; font-size: .95rem; } .kb-search input::placeholder { color: var(--text-faint); } .kb-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; } .kb-cat { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); padding: 1.4rem; } .kb-cat h2 { font-size: 1.05rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem; } .kb-cat .count { font-size: .75rem; font-weight: 600; color: var(--text-faint); background: var(--bg-inset); border-radius: 999px; padding: .1rem .5rem; } .kb-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .kb-cat li a { display: block; padding: .45rem .6rem; margin-inline: -.6rem; border-radius: 6px; color: var(--text); text-decoration: none; font-size: .93rem; } .kb-cat li a:hover { background: var(--bg-inset); color: var(--brand-strong); } .kb-results { display: grid; gap: 1rem; margin-bottom: 2.5rem; } .kb-result { padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-raised); } .kb-result h3 { font-size: 1rem; margin-bottom: .3em; } .kb-result h3 a { text-decoration: none; } .kb-result p { margin: 0; font-size: .9rem; color: var(--text-muted); } .kb-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; } .kb-aside { position: sticky; top: 88px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); padding: 1.25rem; font-size: .9rem; } .kb-aside h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin-bottom: .8rem; } .kb-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .kb-aside a { color: var(--text); text-decoration: none; } .kb-aside a:hover { color: var(--brand-strong); } .article-meta { font-size: .85rem; color: var(--text-faint); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } /* ----------------------------------------------------------------- cta --- */ .cta { border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.25rem); background: radial-gradient(40rem 20rem at 100% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%), var(--bg-alt); border: 1px solid var(--border); text-align: center; } .cta h2 { margin-bottom: .3em; } .cta p { color: var(--text-muted); margin-bottom: 1.5rem; } .cta .hero-actions { justify-content: center; } /* -------------------------------------------------------------- footer --- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); padding-block: 3rem 2rem; margin-top: 4rem; font-size: .92rem; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem; margin-bottom: 2.5rem; } .footer-brand svg { height: 34px; width: auto; margin-bottom: .9rem; } .footer-brand p { color: var(--text-muted); font-size: .88rem; max-width: 22rem; } .footer-col h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin-bottom: .8rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .footer-col a { color: var(--text-muted); text-decoration: none; } .footer-col a:hover { color: var(--brand-strong); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text-faint); font-size: .85rem; } /* --------------------------------------------------------------- error --- */ .error-page { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); } .error-code { font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; line-height: 1; color: var(--brand); letter-spacing: -.04em; margin-bottom: .1em; } .error-page p { color: var(--text-muted); max-width: 32rem; margin-inline: auto; } /* ---------------------------------------------------------- responsive --- */ @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; } .kb-article-layout { grid-template-columns: 1fr; } .kb-aside { position: static; } } /* The header carries a lot now — logo, five nav items, phone, sign-in, language and theme. Shed the least important pieces before anything wraps. */ @media (max-width: 1280px) { .phone-link .text { display: none; } .main-nav a { padding: .5rem .5rem; font-size: .9rem; } } @media (max-width: 1080px) { /* The number is still in the footer and on the contacts page. */ .phone-link { display: none; } } /* Below this the five nav items plus the tools no longer fit on one line — measured, not guessed: at 905px the row overflowed by 40px and pushed the whole page into horizontal scroll. Collapse to the hamburger instead. */ @media (max-width: 1020px) { .nav-toggle { display: inline-grid; } .main-nav { position: fixed; inset: 84px 0 auto; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 1rem var(--gap) 1.5rem; display: none; margin: 0; } .main-nav[data-open="true"] { display: block; } .main-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; } .main-nav a { padding: .7rem .8rem; font-size: 1rem; } .header-inner { justify-content: space-between; gap: .6rem; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; } .plans-toolbar { flex-direction: column; align-items: stretch; } /* On the narrowest phones the icon alone keeps the row on one line. */ .btn-login .text { display: none; } .btn-login { padding: .5rem .65rem; } .header-tools { gap: .35rem; } } @media print { .site-header, .site-footer, .kb-search, .hero-actions, .cta { display: none; } body { background: #fff; color: #000; } } /* ------------------------------------------------------------ utilities --- */ /* The CSP forbids inline styles, so the handful of one-off adjustments the templates need live here as named classes. */ .section-head.flush { margin-bottom: 0; } .section-head.spaced { margin-top: 3.5rem; } .mt-md { margin-top: 1.25rem; } .mt-lg { margin-top: 2rem; } .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------------------------------------------------------------- promo --- */ /* Homepage card pointing at a landing page that is not in the header nav. */ .promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(32rem 16rem at 92% 10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%), var(--bg-raised); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; } .promo:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: var(--shadow); transform: translateY(-2px); } .promo h2 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); margin-bottom: .4rem; } .promo p { color: var(--text-muted); margin: 0 0 1rem; max-width: 42rem; } .promo .eyebrow { margin-bottom: .35rem; } .promo-cta { font-weight: 600; color: var(--brand-strong); } .promo-art { display: grid; place-items: center; width: clamp(4.5rem, 9vw, 7rem); aspect-ratio: 1; border-radius: var(--radius); background: var(--brand-tint); color: var(--brand-strong); flex-shrink: 0; } .promo-art svg { width: 55%; height: 55%; } @media (max-width: 640px) { .promo { grid-template-columns: 1fr; } .promo-art { display: none; } } /* Small print inside page content. */ .prose .hint { font-size: .88rem; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 2rem; } /* ------------------------------------------------------------- usecases --- */ .usecase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; } .usecase { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; } .usecase:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: var(--shadow); transform: translateY(-2px); } .usecase h3 { font-size: 1.05rem; margin-bottom: .5rem; } .usecase p { color: var(--text-muted); font-size: .92rem; flex: 1; margin-bottom: 1rem; } .usecase-cta { font-weight: 600; font-size: .9rem; color: var(--brand-strong); }