/* ========================================================================== HostingStall design system (theme.css) — light glass edition Layout concept: light cool-grey ground with soft drifting colour orbs, white glass panels (blur + white edge + gloss highlight), orange glow accents, glossy gradient buttons, tight 1320px grid. Navy is reserved for the brand bands: fixed header, hero / page headers, table title bars, CTA band and footer — as on the original site. Motion is part of the design: page-open veil, blur-in reveals, floating hero, shimmering headings, cursor glow and tilt on cards. Header: dark top bar (hides on scroll) over a brighter navy masthead with a centred, icon-led main nav. ========================================================================== */ :root { /* ground & glass */ --bg: #f3f6fb; --bg-2: #e9eef7; --ink: #0b1b2b; --ink-2: #13304d; --ink-3: #1b3f66; --glass: rgba(255,255,255,.62); --glass-2: rgba(255,255,255,.88); --glass-line: rgba(255,255,255,.95); --glass-edge: rgba(11,27,43,.08); --gloss: rgba(255,255,255,1); /* text */ --text: #142238; --heading: #0f1c2e; --muted: #56677d; --faint: #8694a8; --on-ink: #ffffff; --on-ink-muted: #b9c6d6; /* accents */ --accent: #ff8a1f; --accent-2: #ffb15c; --accent-deep: #e0730a; --accent-ink: #bf5f06; --glow: rgba(255,138,31,.5); --glow-soft: rgba(255,138,31,.18); --cyan: #19b8e8; --cyan-ink: #0a86ad; --cyan-glow: rgba(25,184,232,.4); --cyan-soft: rgba(25,184,232,.14); --ok: #1f9d61; --danger: #c62828; /* type */ --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-0: .875rem; --fs-1: 1rem; --fs-2: 1.1rem; --fs-3: 1.3rem; --fs-4: 1.65rem; --fs-5: clamp(1.7rem, 1.2rem + 1.7vw, 2.4rem); --fs-6: clamp(2.2rem, 1.3rem + 3.1vw, 3.6rem); /* rhythm (tight) */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.75rem; --s-7: 2.25rem; --s-8: 3rem; --s-9: 3.5rem; --sec-y: clamp(2rem, 4vw, 3rem); --gap: 1rem; --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-pill: 999px; --shadow-1: 0 10px 30px -16px rgba(11,27,43,.28), 0 1px 2px rgba(11,27,43,.06); --shadow-2: 0 22px 50px -22px rgba(11,27,43,.38); --shadow-glow: 0 0 0 1px rgba(255,138,31,.45), 0 22px 50px -20px var(--glow); --wrap: 1320px; --gutter: max(16px, 3vw); --topbar-h: 36px; --header-h: 72px; --header-h-compact: 60px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); color-scheme: light; } /* -------------------------------------------------------------------------- Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + var(--header-h) + 1rem); background: var(--bg); } body { margin: 0; color: var(--text); background: var(--bg); font: 400 var(--fs-1)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; padding-top: calc(var(--topbar-h) + var(--header-h)); overflow-x: hidden; position: relative; } /* one fixed background layer (header.html inserts
): soft colour washes + two drifting orbs drawn as radial gradients and moved with transform only, so the GPU does no blurring */ .bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(1100px 600px at 10% -10%, rgba(255,138,31,.16), transparent 60%), radial-gradient(900px 600px at 100% 15%, rgba(25,184,232,.14), transparent 60%), radial-gradient(900px 500px at 50% 110%, rgba(255,138,31,.10), transparent 60%); } .bg::before, .bg::after { content: ""; position: absolute; border-radius: 50%; will-change: transform; } .bg::before { width: 60vw; height: 60vw; max-width: 980px; max-height: 980px; left: -20vw; top: 2vh; background: radial-gradient(closest-side, rgba(255,138,31,.22), rgba(255,138,31,.08) 45%, transparent 72%); animation: drift-a 22s ease-in-out infinite alternate; } .bg::after { width: 52vw; height: 52vw; max-width: 880px; max-height: 880px; right: -18vw; bottom: -16vh; background: radial-gradient(closest-side, rgba(25,184,232,.2), rgba(25,184,232,.07) 45%, transparent 72%); animation: drift-b 26s ease-in-out infinite alternate; } @keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(12vw, 14vh) scale(1.15); } } @keyframes drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-10vw, -16vh) scale(.95); } } img, svg, video { max-width: 100%; height: auto; } img { border: 0; } a { color: var(--accent-ink); text-decoration: none; transition: color .2s, text-shadow .2s; } a:hover { color: var(--accent-deep); text-shadow: 0 0 14px rgba(255,138,31,.35); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.018em; color: var(--heading); text-wrap: balance; margin: 0 0 .45em; } h1 { font-size: var(--fs-5); } h2 { font-size: var(--fs-4); } h3 { font-size: var(--fs-3); } h4 { font-size: var(--fs-2); } p { margin: 0 0 .9em; } p:last-child { margin-bottom: 0; } p:empty { display: none; } strong, b { font-weight: 600; color: var(--heading); } hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(11,27,43,.18), transparent); margin: var(--s-6) 0; } table { border-spacing: 0; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 6px var(--glow-soft); } ::selection { background: rgba(255,138,31,.3); color: var(--heading); } font { font-size: inherit !important; font-family: inherit !important; color: inherit; } [align="justify"] { text-align: left; } br.clear { clear: both; } /* -------------------------------------------------------------------------- Glass primitive (shared by cards, tables, panels) -------------------------------------------------------------------------- */ .plan, .feature, .feature-row, .card, .quote-card, .form-card, .pay-card, .table-wrap, .stat, .policy, .sitemap-grid a, .domain-form, .login-pop, .info-card { position: relative; isolation: isolate; background: linear-gradient(160deg, var(--glass-2), var(--glass) 60%, rgba(255,255,255,.55)); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--gloss), 0 0 0 1px var(--glass-edge), var(--shadow-1); border-radius: var(--r-3); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s, background .3s; } /* real backdrop blur only where something scrolls behind the panel */ .login-pop { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } /* gloss sheen + cursor glow layers */ .plan::before, .feature::before, .feature-row::before, .card::before, .quote-card::before, .form-card::before, .pay-card::before, .table-wrap::before, .stat::before, .policy::before, .domain-form::before, .info-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(118deg, rgba(255,255,255,.95), rgba(255,255,255,0) 42%); } .plan::after, .feature::after, .feature-row::after, .card::after, .quote-card::after, .pay-card::after, .stat::after, .sitemap-grid a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,138,31,.2), transparent 62%); } .plan:hover::after, .feature:hover::after, .feature-row:hover::after, .card:hover::after, .quote-card:hover::after, .pay-card:hover::after, .stat:hover::after, .sitemap-grid a:hover::after { opacity: 1; } .plan > *, .feature > *, .feature-row > *, .card > *, .quote-card > *, .form-card > *, .pay-card > *, .stat > *, .policy > *, .info-card > *, .sitemap-grid a > * { position: relative; z-index: 1; } .plan:hover, .feature:hover, .feature-row:hover, .card:hover, .quote-card:hover, .pay-card:hover, .sitemap-grid a:hover { transform: translateY(-5px); border-color: #fff; box-shadow: inset 0 1px 0 var(--gloss), var(--shadow-glow); } /* subtle 3D tilt driven by site.js (--rx/--ry) */ .tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); will-change: transform; } .tilt:hover { --lift: -5px; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px), var(--gutter)); padding-right: max(16px, env(safe-area-inset-right, 0px), var(--gutter)); } .wrap-narrow { max-width: 920px; } .section { padding-block: var(--sec-y); } .section-tight { padding-block: calc(var(--sec-y) * .75); } .band-surface { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); border-top: 1px solid rgba(255,255,255,.9); border-bottom: 1px solid rgba(11,27,43,.06); } .band-paper { background: transparent; } .band-ink { background: linear-gradient(180deg, var(--ink-2), var(--ink)); color: var(--on-ink); } .band-ink h1, .band-ink h2, .band-ink h3, .band-ink strong { color: #fff; } .band-ink p { color: var(--on-ink-muted); } .band-soft { background: linear-gradient(180deg, rgba(255,138,31,.1), transparent); } .section-head { max-width: 72ch; margin-bottom: var(--s-6); } .section-head.center { margin-inline: auto; text-align: center; } .section-head .title { font-size: var(--fs-5); margin-bottom: .35em; } .section-head p { color: var(--muted); font-size: var(--fs-2); } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font: 600 .72rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .8rem; } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px 3px var(--glow); animation: pulse 2.4s ease-in-out infinite; will-change: transform; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .75; } } /* shimmering gradient accent words */ .title strong, .section-head h2 strong, .prose h1 strong, .prose h2 strong, .hero h1 em, .page-hero h1 strong, .feature-row h3 strong { font-style: normal; font-weight: inherit; color: transparent; background: linear-gradient(100deg, #e0730a 0%, #ff8a1f 30%, #ffc98a 50%, #ff8a1f 70%, #e0730a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; } /* the live shimmer runs on the hero accent only (one element per page keeps repaints cheap) */ .hero h1 em, .page-hero h1 strong { background-image: linear-gradient(100deg, #ffb15c 0%, #ff8a1f 30%, #ffe0b0 50%, #ff8a1f 70%, #ffb15c 100%); animation: shimmer 4.5s linear infinite; } @keyframes shimmer { from { background-position: 0% 0; } to { background-position: 220% 0; } } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--s-7); align-items: start; } .split .sticky { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 1rem); } /* data center photo under the sticky "Why choose us" heading (4:3 crop keeps the building centred) */ .why-media.why-side { min-height: 0; aspect-ratio: 4 / 3; margin-top: var(--s-5); } .why-media.why-side img { object-position: center 55%; } /* home "Why HostingStall": heading on top, image + copy side by side at equal height */ .why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--s-7); align-items: stretch; } .why-copy { align-self: center; } .why-copy p:last-child { margin-bottom: 0; } .why-media { position: relative; isolation: isolate; margin: 0; min-height: 300px; overflow: hidden; border-radius: var(--r-3); background: #0b1b2b; border: 1px solid #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 28px 60px -26px rgba(11,27,43,.6), 0 0 48px -14px var(--glow); } .why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; transition: transform 1.2s var(--ease-out); } .why-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(165deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.06) 30%, transparent 46%); } .why-media::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 35%; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-20deg) translateX(-200%); will-change: transform; animation: gleam 6s ease-in-out infinite; } .why-media:hover img { transform: scale(1.06); } .stack > * + * { margin-top: var(--gap); } .center { text-align: center; } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .layout-aside { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; } .layout-aside aside { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 1rem); } .prose ul.checklist { padding-left: 0; } .muted { color: var(--muted); } .mono { font-family: var(--font-mono); font-size: .9em; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 200; background: var(--accent); color: #1a0c00; padding: .6rem 1rem; border-radius: var(--r-2); font-weight: 600; } .skip-link:focus { top: 1rem; } /* -------------------------------------------------------------------------- Multi-colour icon palette (nav, top bar, footer headings, plan specs) -------------------------------------------------------------------------- */ .c-orange { --ic: #ff9a3c; --ic-soft: rgba(255,154,60,.22); --ic-deep: #ea580c; } .c-cyan { --ic: #22c7f5; --ic-soft: rgba(34,199,245,.22); --ic-deep: #0891b2; } .c-violet { --ic: #a78bfa; --ic-soft: rgba(167,139,250,.24); --ic-deep: #7c3aed; } .c-green { --ic: #34d399; --ic-soft: rgba(52,211,153,.22); --ic-deep: #059669; } .c-pink { --ic: #f472b6; --ic-soft: rgba(244,114,182,.22); --ic-deep: #db2777; } .c-amber { --ic: #fbbf24; --ic-soft: rgba(251,191,36,.22); --ic-deep: #d97706; } .c-teal { --ic: #2dd4bf; --ic-soft: rgba(45,212,191,.22); --ic-deep: #0d9488; } .c-blue { --ic: #60a5fa; --ic-soft: rgba(96,165,250,.22); --ic-deep: #2563eb; } /* -------------------------------------------------------------------------- Buttons (glossy) -------------------------------------------------------------------------- */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.45rem; border-radius: var(--r-2); border: 1px solid transparent; font: 600 .95rem/1.2 var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease-out), box-shadow .3s, background .3s, color .2s, border-color .2s; text-shadow: none; } .btn::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg) translateX(-220%); transition: transform .7s var(--ease-out); pointer-events: none; } .btn:hover::after { transform: skewX(-20deg) translateX(520%); } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: linear-gradient(180deg, #ffbe6a 0%, #ff932a 48%, #ef7a0e 100%); color: #1d0d00; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.15), 0 10px 26px -10px var(--glow), 0 0 0 1px rgba(224,115,10,.35); } .btn-primary:hover { color: #1d0d00; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 16px 38px -12px var(--glow), 0 0 26px -4px var(--glow), 0 0 0 1px rgba(224,115,10,.5); text-shadow: 0 1px 0 rgba(255,255,255,.35); } .btn-ghost { background: rgba(255,255,255,.55); color: var(--heading); border-color: rgba(11,27,43,.14); box-shadow: inset 0 1px 0 #fff, 0 6px 18px -12px rgba(11,27,43,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-ghost:hover { background: #fff; border-color: var(--cyan); color: var(--heading); box-shadow: inset 0 1px 0 #fff, 0 0 26px -6px var(--cyan-glow); transform: translateY(-2px); text-shadow: none; } /* ghost button inside navy bands */ .hero .btn-ghost, .page-hero .btn-ghost, .cta-band .btn-ghost, .band-ink .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .hero .btn-ghost:hover, .page-hero .btn-ghost:hover, .cta-band .btn-ghost:hover, .band-ink .btn-ghost:hover { background: rgba(25,184,232,.16); border-color: rgba(25,184,232,.7); color: #fff; } .btn-outline { background: rgba(255,255,255,.7); color: var(--heading); border-color: rgba(11,27,43,.16); } .btn-outline:hover { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 20px -6px var(--glow); text-shadow: none; } .btn-sm { padding: .55rem 1rem; font-size: .85rem; } .btn-block { width: 100%; } .btn svg { width: 1.05em; height: 1.05em; } .hero .btn-primary, .cta-band .btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 34px -10px var(--glow), 0 0 26px -4px var(--glow), 0 0 0 1px rgba(255,190,110,.6); } /* -------------------------------------------------------------------------- Fixed header: a dark top bar (utility links + phone) over a brighter navy masthead (logo, centred main nav, member login, contact button). The top bar slides away as soon as the page is scrolled; the masthead stays. -------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; color: #fff; will-change: transform; transition: transform .45s var(--ease), box-shadow .3s; } .is-scrolled .site-header { transform: translateY(calc(-1 * var(--topbar-h))); box-shadow: 0 14px 40px -16px rgba(11,27,43,.6); } /* top bar: near-black navy */ .topbar { position: relative; z-index: 2; height: var(--topbar-h); font-size: .78rem; background: linear-gradient(180deg, #040b13, #091625); border-bottom: 1px solid rgba(255,255,255,.06); } .topbar-right { display: flex; align-items: center; gap: .9rem; min-width: 0; } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; } .topbar-links { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; } .topbar-links a { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem; border-radius: var(--r-pill); color: #d3deea; font-weight: 500; text-shadow: none; transition: color .2s, background .2s, box-shadow .2s; } .topbar-links svg { width: 13px; height: 13px; color: var(--ic, var(--accent)); filter: drop-shadow(0 0 5px var(--ic, var(--accent))); } .topbar-links a:hover { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .topbar-phone { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 600; letter-spacing: .01em; text-shadow: none; } .topbar-phone span { color: #9fb2c8; font-weight: 500; } .topbar-phone svg { width: 14px; height: 14px; color: var(--accent); filter: drop-shadow(0 0 6px var(--glow)); } .topbar-phone:hover { color: var(--accent-2); } /* masthead: brighter blue navy glass */ .masthead { position: relative; height: var(--header-h); background: linear-gradient(180deg, rgba(28,66,108,.96), rgba(17,44,74,.94)); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); border-top: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: height .3s var(--ease); } .masthead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, #fff 50%, var(--cyan) 75%, transparent 100%); opacity: .9; } .is-scrolled .masthead { height: var(--header-h-compact); } .masthead .wrap { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 1rem; height: 100%; } /* explicit columns: on small screens the nav leaves the flow (absolute panel) and the actions must stay in column 3 */ .brand { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; } /* logo: vector mark (cloud, server stack, orbit) + live wordmark */ .brand-mark { flex: none; width: 46px; height: 46px; overflow: visible; filter: drop-shadow(0 0 10px rgba(34,199,245,.35)); transition: width .3s var(--ease), height .3s var(--ease), filter .3s, transform .45s var(--ease-out); } .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.07); filter: drop-shadow(0 0 14px rgba(255,138,31,.6)); } .brand-mark .bm-ring { stroke-dasharray: 46 14; animation: orbit 3.2s linear infinite; } @keyframes orbit { to { stroke-dashoffset: -120; } } .brand-mark .bm-led { animation: led 2.2s ease-in-out infinite; } .brand-mark .bm-led-2 { animation-delay: .35s; } .brand-mark .bm-led-3 { animation-delay: .7s; } .brand-mark .bm-led-4 { animation-delay: 1.05s; } .brand-mark .bm-led-5 { animation-delay: 1.4s; } .brand-mark .bm-led-6 { animation-delay: 1.75s; } @keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .brand-text { display: grid; justify-items: start; line-height: 1; } .brand-name { font: 700 1.42rem/1 var(--font-display); letter-spacing: -.025em; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.35); transition: font-size .3s var(--ease); } .brand-name b { font-weight: 700; color: transparent; background: linear-gradient(180deg, #ffd08a, #ff962e 50%, #f06a00); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 8px rgba(255,138,31,.4)); } .brand-tag { margin-top: .34rem; font: 600 .55rem/1 var(--font-body); letter-spacing: .075em; text-transform: uppercase; color: #9fc0e0; white-space: nowrap; transition: opacity .3s, margin .3s, max-height .3s; max-height: 1em; } .nav { grid-column: 2; } .head-actions { grid-column: 3; } .is-scrolled .masthead .brand-mark { width: 40px; height: 40px; } .is-scrolled .masthead .brand-name { font-size: 1.28rem; } /* main nav: centred, white text, one coloured icon per item, bright white hover pill */ .nav { justify-self: center; min-width: 0; } .nav > ul { display: flex; align-items: center; justify-content: center; gap: .1rem; list-style: none; margin: 0; padding: 0; } .nav a, .nav-parent { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .68rem; border-radius: var(--r-pill); color: #fff; font-weight: 600; font-size: .9rem; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.35); transition: color .2s, background .25s, box-shadow .25s, transform .25s var(--ease-out), text-shadow .2s; } .ic { display: inline-grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; color: var(--ic, var(--accent)); transition: transform .3s var(--ease-out), color .25s; } .ic svg { width: 100%; height: 100%; filter: drop-shadow(0 0 5px var(--ic, var(--accent))); } .nav a:hover, .nav-parent:hover, .has-sub:hover > .nav-parent, .has-sub.is-open > .nav-parent { color: var(--ink); background: linear-gradient(180deg, #ffffff, #e9eff8); text-shadow: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.7), 0 10px 26px -10px rgba(255,255,255,.8), 0 0 28px -6px var(--ic, var(--accent)); } .nav a:hover .ic, .nav-parent:hover .ic, .has-sub:hover > .nav-parent .ic, .has-sub.is-open > .nav-parent .ic { color: var(--ic-deep, var(--accent-deep)); transform: scale(1.2) rotate(-8deg); } .nav a:hover .ic svg { filter: none; } /* selected item: frosted glass pill, lightly tinted with the item colour, gloss line on top */ .nav a[aria-current="page"], .nav-parent.is-current { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10) 55%, rgba(255,255,255,.16)); background: linear-gradient(180deg, color-mix(in srgb, var(--ic, var(--accent)) 30%, rgba(255,255,255,.34)), color-mix(in srgb, var(--ic, var(--accent)) 14%, rgba(255,255,255,.08)) 55%, color-mix(in srgb, var(--ic, var(--accent)) 22%, rgba(255,255,255,.14))); -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -8px 14px -10px rgba(255,255,255,.35), 0 0 22px -6px var(--ic, var(--accent)), 0 8px 20px -12px rgba(0,0,0,.6); } .nav a[aria-current="page"]::before, .nav-parent.is-current::before { content: ""; position: absolute; left: 14%; right: 14%; top: 1px; height: 45%; border-radius: var(--r-pill) var(--r-pill) 50% 50%; background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)); pointer-events: none; } .nav a[aria-current="page"]::after, .nav-parent.is-current::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ic, var(--accent)); box-shadow: 0 0 10px 1px var(--ic, var(--accent)); pointer-events: none; } .nav a[aria-current="page"] .ic, .nav-parent.is-current .ic { color: var(--ic, var(--accent)); } .nav a[aria-current="page"] .ic svg, .nav-parent.is-current .ic svg { filter: drop-shadow(0 0 6px var(--ic, var(--accent))); } .nav a[aria-current="page"]:hover { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.16) 55%, rgba(255,255,255,.22)); background: linear-gradient(180deg, color-mix(in srgb, var(--ic, var(--accent)) 36%, rgba(255,255,255,.42)), color-mix(in srgb, var(--ic, var(--accent)) 18%, rgba(255,255,255,.14)) 55%, color-mix(in srgb, var(--ic, var(--accent)) 26%, rgba(255,255,255,.2))); text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 30px -6px var(--ic, var(--accent)), 0 10px 24px -12px rgba(0,0,0,.6); } .nav a[aria-current="page"]:hover .ic { color: var(--ic, var(--accent)); } .nav .mobile-only { display: none; } /* "Dedicated Servers" dropdown */ .nav-parent { margin: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; } .nav-parent .caret { width: .85rem; height: .85rem; margin-left: -.1rem; transition: transform .3s var(--ease-out); } .has-sub:hover > .nav-parent .caret, .has-sub.is-open > .nav-parent .caret { transform: rotate(180deg); } .nav .has-sub { position: relative; } .nav .has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .8rem; } .nav .sub { position: absolute; top: calc(100% + .65rem); left: 50%; z-index: 5; display: grid; gap: .2rem; min-width: 19rem; margin: 0; padding: .5rem; list-style: none; border-radius: var(--r-3); background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 26px 50px -22px rgba(4,12,22,.75), 0 0 0 1px rgba(11,27,43,.06); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .2s var(--ease), transform .3s var(--ease-out), visibility .2s; } .nav .sub::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; } .has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.is-open > .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav .sub a { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: 12px; color: var(--ink); text-shadow: none; white-space: nowrap; } .nav .sub a .ic { width: 1.5rem; height: 1.5rem; color: var(--ic-deep, var(--accent-deep)); } .nav .sub a .ic svg { filter: none; } .nav .sub a:hover { color: var(--ink); background: var(--ic-soft, rgba(255,138,31,.12)); transform: none; box-shadow: none; } .nav .sub a:hover .ic { transform: scale(1.15) rotate(-6deg); } .nav .sub a[aria-current="page"] { color: var(--ink); background: rgba(255,138,31,.12); box-shadow: inset 3px 0 0 var(--accent); text-shadow: none; } .nav .sub a[aria-current="page"] .ic { color: var(--ic-deep, var(--accent-deep)); } .nav .sub.sub-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 37rem; } .nav .sub-text b { display: block; font-size: .92rem; font-weight: 700; color: var(--heading); } .nav .sub-text small { display: block; margin-top: .1rem; font-size: .76rem; font-weight: 500; color: var(--muted); } /* right side: member login, contact button, burger */ .head-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; } .nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: var(--r-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); } .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* member login popover */ .login { position: relative; } .login-btn { display: inline-flex; align-items: center; gap: .4rem; height: 26px; padding: 0 .8rem; border-radius: var(--r-pill); border: 1px solid rgba(127,227,255,.45); background: linear-gradient(180deg, rgba(34,199,245,.28), rgba(34,199,245,.1)); color: #fff; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 14px -4px rgba(34,199,245,.8); transition: background .2s, color .2s, box-shadow .2s, transform .2s; } .login-btn svg { width: 13px; height: 13px; color: #7fe3ff; filter: drop-shadow(0 0 5px rgba(34,199,245,.8)); } .login-btn:hover, .login.is-open .login-btn { background: linear-gradient(180deg, #ffffff, #e9eff8); border-color: #fff; color: var(--ink); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 0 24px -6px rgba(255,255,255,.9); } .login-btn:hover svg, .login.is-open .login-btn svg { color: var(--cyan-ink); filter: none; } .login-pop { position: absolute; right: 0; top: calc(100% + .75rem); width: min(300px, calc(100vw - 2rem)); padding: 1.2rem; display: none; font-size: .9rem; color: var(--text); background: rgba(255,255,255,.97); } .login-pop::before { content: ""; position: absolute; right: 22px; top: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); } .login.is-open .login-pop { display: block; animation: pop .3s var(--ease-out) both; } .login-pop h4 { margin: 0 0 .9rem; font-size: 1rem; } .login-pop .check { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; color: var(--muted); font-size: .85rem; } .login-forgot { display: block; margin-top: .8rem; text-align: center; font-size: .82rem; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field { display: grid; gap: .35rem; margin-bottom: .95rem; } .field label { font-weight: 600; font-size: .83rem; color: var(--heading); } .field input, .field textarea, .field select, .domain-form input[type="text"], .domain-form select { width: 100%; padding: .78rem 1rem; border: 1px solid rgba(11,27,43,.16); border-radius: var(--r-2); background: rgba(255,255,255,.9); color: var(--text); box-shadow: inset 0 1px 2px rgba(11,27,43,.06), inset 0 1px 0 #fff; transition: border-color .2s, box-shadow .2s, background .2s; } .field input::placeholder, .field textarea::placeholder, .domain-form input::placeholder { color: var(--faint); } .field input:focus, .field textarea:focus, .domain-form input:focus, .domain-form select:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--glow-soft), 0 0 22px -6px var(--glow); outline: none; } .field textarea { min-height: 150px; resize: vertical; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } .notice { padding: .85rem 1.05rem; border-radius: var(--r-2); font-size: .92rem; margin-bottom: 1rem; border: 1px solid transparent; } .notice-error { background: #fdecec; color: #8d1f1f; border-color: #f5c6c6; } .notice-ok { background: #e6f6ee; color: #14603b; border-color: #bfe6d0; } .form-card { padding: clamp(1.1rem, 2.5vw, 1.75rem); } .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; } /* -------------------------------------------------------------------------- Home hero (navy band) -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 500px at 85% 0%, rgba(255,138,31,.28), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(25,184,232,.22), transparent 60%), linear-gradient(180deg, var(--ink-2), var(--ink)); padding-block: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.4vw, 2.25rem); } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0/24px 24px; -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent 100%); mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent 100%); } .hero::after { content: ""; position: absolute; width: 52vw; height: 52vw; max-width: 820px; max-height: 820px; right: -18vw; top: -34vw; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,138,31,.38), rgba(255,138,31,.12) 45%, transparent 72%); will-change: transform, opacity; animation: pulse-orb 7s ease-in-out infinite; } .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3.5vw, 3rem); align-items: center; } .hero .eyebrow { color: var(--accent-2); letter-spacing: .1em; } .hero h1 { font-size: clamp(2.2rem, 1.2rem + 2.7vw, 3.4rem); line-height: 1.04; color: #fff; margin: 0 0 .9rem; letter-spacing: -.028em; text-shadow: 0 2px 30px rgba(0,0,0,.45); } .hero .lead { color: var(--on-ink-muted); font-size: var(--fs-2); max-width: 54ch; margin-bottom: 1.4rem; } .hero .lead strong { color: #fff; } .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; } .hero-actions .btn { flex: 1 1 auto; padding: .8rem 1rem; font-size: .9rem; white-space: nowrap; } .hero-media { position: relative; isolation: isolate; aspect-ratio: 946 / 407; overflow: hidden; border-radius: var(--r-3); background: #04090f; border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 30px 70px -28px rgba(0,0,0,.85), 0 0 60px -18px var(--glow); animation: float 7s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-.4deg); } } .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1.05); transition: opacity 1.1s var(--ease), transform 7s linear; z-index: 0; } .hero-media img.is-active { opacity: 1; transform: scale(1); } .hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(165deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 28%, transparent 45%), linear-gradient(0deg, rgba(4,9,15,.5), transparent 40%); } .hero-media::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 35%; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg) translateX(-200%); will-change: transform; animation: gleam 5s ease-in-out infinite; } @keyframes gleam { 0% { transform: skewX(-20deg) translateX(-200%); } 55%, 100% { transform: skewX(-20deg) translateX(420%); } } .hero-dots { position: absolute; left: 50%; bottom: .7rem; z-index: 3; transform: translateX(-50%); display: flex; gap: .4rem; margin: 0; padding: .35rem .5rem; list-style: none; background: rgba(4,9,15,.6); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-pill); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s var(--ease), background .3s, box-shadow .3s; } .hero-dots button.is-active { width: 22px; background: var(--accent); box-shadow: 0 0 10px var(--glow); } .hero .hero-stats { grid-column: 1 / -1; } .hero-stats { margin-top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } /* stats live inside the navy hero: dark glass variant */ .hero .stat { padding: .7rem 1.1rem; border-radius: var(--r-2); background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -18px rgba(0,0,0,.6); } .hero .stat::before { background: linear-gradient(118deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%); } .hero .stat:hover { transform: translateY(-4px); border-color: rgba(255,138,31,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(255,138,31,.35), 0 20px 40px -18px var(--glow); } .stat b { display: block; font: 700 1.5rem/1.1 var(--font-display); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(255,138,31,.4); } .stat b em { font-style: normal; color: var(--accent); } .stat span { display: block; margin-top: .15rem; color: var(--on-ink-muted); font-size: .84rem; } /* -------------------------------------------------------------------------- Inner page hero (navy band) -------------------------------------------------------------------------- */ .page-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(700px 400px at 90% 0%, rgba(255,138,31,.25), transparent 60%), linear-gradient(180deg, var(--ink-2), var(--ink)); padding-block: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.5rem, 3.5vw, 2.4rem); } .page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0/24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); } .page-hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -300px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,138,31,.4), rgba(255,138,31,.12) 45%, transparent 72%); will-change: transform, opacity; animation: pulse-orb 6s ease-in-out infinite; } @keyframes pulse-orb { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } .page-hero .wrap { position: relative; z-index: 1; } .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 .7rem; padding: 0; font-size: .78rem; color: var(--on-ink-muted); } .crumbs a { color: var(--on-ink-muted); } .crumbs a:hover { color: #fff; } .crumbs li + li::before { content: "/"; margin-right: .5rem; color: rgba(255,255,255,.3); } .page-hero .eyebrow { color: var(--accent-2); margin-bottom: .5rem; } .page-hero h1 { font-size: var(--fs-5); color: #fff; margin: 0 0 .35rem; text-shadow: 0 2px 24px rgba(0,0,0,.45); } .page-hero p { margin: 0; color: var(--on-ink-muted); font-size: var(--fs-2); max-width: 72ch; } /* -------------------------------------------------------------------------- Content / prose -------------------------------------------------------------------------- */ .prose { max-width: 76ch; } .prose-wide { max-width: none; } .prose p, .prose ul, .prose ol { margin: 0 0 .95em; } .prose li { margin: .25em 0; } .prose ul { padding-left: 1.25rem; } .prose h1 { font-size: var(--fs-4); margin: 1.3em 0 .5em; } .prose h2 { font-size: var(--fs-3); margin: 1.3em 0 .5em; } .prose h3 { font-size: var(--fs-2); margin: 1.1em 0 .4em; } .prose > :first-child { margin-top: 0; } .prose img { border-radius: var(--r-2); } .prose .content_hline { height: 1px; background: linear-gradient(90deg, transparent, rgba(11,27,43,.18), transparent); margin: var(--s-6) 0; } .lead { font-size: var(--fs-2); line-height: 1.6; color: var(--muted); } .lead strong { color: var(--heading); } .two-col { columns: 2; column-gap: var(--s-7); } .two-col p { break-inside: avoid; } .card { padding: clamp(1.1rem, 2.2vw, 1.5rem); } .card h3 { margin-top: 0; } .media-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; } .media-text .img-fx { margin: 0; border-radius: var(--r-3); border: 1px solid #fff; box-shadow: var(--shadow-2), 0 0 50px -20px var(--cyan-glow); } .media-text .img-fx img { display: block; width: 100%; height: auto; } .policy { font-size: .9rem; color: var(--muted); padding: 1rem 1.25rem; border-left: 3px solid var(--accent); border-radius: 0 var(--r-2) var(--r-2) 0; } .policy strong { color: var(--heading); } /* check lists */ .checklist, .plan ul, .spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .checklist li, .plan li, .spec-list li { position: relative; padding-left: 1.7rem; } .checklist li::before, .plan li::before, .spec-list li::before { content: ""; position: absolute; left: 0; top: .22em; width: 1.1em; height: 1.1em; border-radius: 50%; background: linear-gradient(145deg, rgba(255,138,31,.4), rgba(255,138,31,.12)) padding-box, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23bf5f06' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6.5-7'/%3E%3C/svg%3E") center/62% no-repeat; box-shadow: 0 0 10px -2px var(--glow), inset 0 1px 0 rgba(255,255,255,.7); } /* -------------------------------------------------------------------------- Plan cards -------------------------------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); } .plan { display: flex; flex-direction: column; gap: .9rem; padding: 1.35rem; } .plan .kind { font: 600 .7rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); } .plan h3 { margin: 0; font-size: var(--fs-3); padding-bottom: .7rem; border-bottom: 1px solid rgba(11,27,43,.1); } .plan h3 a { color: var(--heading); } .plan h3 a:hover { color: var(--accent-ink); text-shadow: 0 0 14px rgba(255,138,31,.35); } .plan ul { color: var(--muted); font-size: .93rem; } .plan .price { margin: auto 0 0; padding-top: .9rem; border-top: 1px dashed rgba(11,27,43,.18); font: 700 2.3rem/1 var(--font-display); letter-spacing: -.03em; display: flex; align-items: baseline; gap: .3rem; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(180deg, #0f1c2e 25%, #1b3f66 60%, #e0730a 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 14px rgba(255,138,31,.25)); } .plan .price i { font: 500 .9rem var(--font-body); color: var(--muted); -webkit-text-fill-color: var(--muted); } .plan .readmore { margin: 0; } .plan .readmore a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; } .plan .readmore a::after { content: "\2192"; transition: transform .2s; } .plan .readmore a:hover::after { transform: translateX(4px); } /* featured plan: rotating glow border */ @property --ang { syntax: ""; initial-value: 0deg; inherits: false; } .plan.featured { border-color: transparent; background-clip: padding-box; box-shadow: inset 0 1px 0 var(--gloss), 0 0 0 1px var(--glass-edge), 0 0 50px -16px var(--glow), var(--shadow-2); } .plan.featured::before { background: linear-gradient(118deg, rgba(255,255,255,.95), rgba(255,255,255,0) 42%), conic-gradient(from var(--ang), rgba(255,138,31,0) 0 55%, var(--accent) 72%, var(--cyan) 82%, rgba(255,138,31,0) 100%); padding: 1.5px; inset: -1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: spin-border 5s linear infinite; } @keyframes spin-border { to { --ang: 360deg; } } .plan.featured .kind { color: var(--accent-deep); } /* popular tag (home page) */ .plans { padding-top: .7rem; } .plan > .plan-badge { position: absolute; top: -.85rem; right: 1.1rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .85rem; border-radius: var(--r-pill); background: linear-gradient(180deg, #ffbe6a, #ff932a 55%, #ef7a0e); color: #1d0d00; font: 700 .68rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -8px var(--glow), 0 0 0 3px #fff; } .plan-badge::before { content: "\2605"; font-size: .95em; line-height: 1; } .plan-badge::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(255,138,31,.75); pointer-events: none; will-change: transform, opacity; animation: ring 2.2s ease-out infinite; } @keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } /* order button + more-info link */ .plan .order { margin: .15rem 0 0; } .plan .order .btn { padding: .72rem 1rem; font-size: .9rem; } .plan .readmore { margin: -.25rem 0 0; text-align: center; font-size: .88rem; } .plan .readmore a { justify-content: center; } /* spec rows: a coloured icon tile per line (cpu, ram, hdd, ip, traffic, setup, os) */ .plan li.sp { display: flex; align-items: center; min-height: 1.6rem; padding-left: 1.8rem; color: var(--text); } .plan li.sp::before { display: none; } .plan li.sp::after { content: ""; position: absolute; left: 0; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); background: var(--ic); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; filter: drop-shadow(0 0 4px var(--ic-soft)); transition: transform .3s var(--ease-out); } .plan:hover li.sp::after { transform: translateY(-50%) scale(1.15); } .sp-cpu { --ic: #ff7a00; --ic-soft: rgba(255,138,31,.3); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E"); } .sp-ram { --ic: #7c3aed; --ic-soft: rgba(139,92,246,.26); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='10' rx='1.5'/%3E%3Cpath d='M7 9v4M12 9v4M17 9v4M4 16v3M8 16v3M12 16v3M16 16v3M20 16v3'/%3E%3C/svg%3E"); } .sp-hdd { --ic: #0ea5e9; --ic-soft: rgba(25,184,232,.26); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='10' cy='12' r='3'/%3E%3Cpath d='m10 12 2.5-2.5M17 9h.01M17 15h.01'/%3E%3C/svg%3E"); } .sp-ip { --ic: #16a34a; --ic-soft: rgba(34,197,94,.26); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); } .sp-net { --ic: #2563eb; --ic-soft: rgba(59,130,246,.26); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21V7M3 11l4-4 4 4M17 3v14M13 13l4 4 4-4'/%3E%3C/svg%3E"); } .sp-setup { --ic: #db2777; --ic-soft: rgba(236,72,153,.24); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v8h14v-8M12 8v12M12 8c-1.5-2.5-5-3-5-1s3 1 5 1zm0 0c1.5-2.5 5-3 5-1s-3 1-5 1z'/%3E%3C/svg%3E"); } .sp-os { --ic: #d97706; --ic-soft: rgba(245,158,11,.26); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M7 6.5h.01M10 6.5h.01M9 21h6'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Feature grid -------------------------------------------------------------------------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-rows: 1fr; gap: var(--gap); } .feature { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.2rem; } .feature img, .feature-row img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(11,27,43,.2)); transition: transform .8s var(--ease-out), filter .3s; } .feature:hover img, .feature-row:hover img { transform: rotateY(360deg) scale(1.1); filter: drop-shadow(0 10px 18px rgba(255,138,31,.45)); } .feature h2, .feature h3 { margin: .1rem 0 .35rem; font-size: var(--fs-2); } .feature p { margin: 0; color: var(--muted); font-size: .93rem; } /* service pages: plain coloured line icons in feature cards, numbered steps */ .svc-ic { position: relative; isolation: isolate; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--ic-deep, var(--accent-deep)); transition: transform .4s var(--ease-out), color .3s; } .svc-ic::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; opacity: 0; transform: scale(0); background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.65), rgba(255,255,255,0) 45%), linear-gradient(140deg, var(--ic, var(--accent)), var(--ic-deep, var(--accent-deep))); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 5px var(--ic-soft, var(--glow-soft)), 0 12px 24px -8px var(--ic, var(--accent)); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; } .svc-ic svg { width: 44px; height: 44px; filter: drop-shadow(0 6px 10px var(--ic-soft, var(--glow-soft))); transition: transform .8s var(--ease-out), filter .3s; } .feature:hover .svc-ic, .instant-point:hover .svc-ic { color: #fff; transform: translateY(-3px); } .feature:hover .svc-ic::before, .instant-point:hover .svc-ic::before { opacity: 1; transform: scale(1); } .feature:hover .svc-ic svg, .instant-point:hover .svc-ic svg { transform: rotateY(360deg) scale(.66); filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); } /* instant servers page */ /* Mac mini page: two centred stock cards */ .mac-plans { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; grid-auto-rows: 1fr; } @media (max-width: 1080px) { .mac-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .plan > .instant-badge.mac-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; } /* blinking notification pill (Mac mini "Limited stock") */ .section-head p.stock-alert { display: inline-flex; align-items: center; gap: .5rem; margin: .4rem auto 0; padding: .55rem 1.1rem .55rem .9rem; border-radius: var(--r-pill); font-size: .95rem; font-weight: 500; color: #7f1d1d; background: linear-gradient(180deg, rgba(254,226,226,.95), rgba(254,202,202,.85)); border: 1px solid rgba(239,68,68,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 0 rgba(239,68,68,.45); animation: alert-pulse 1.6s ease-in-out infinite; } .stock-alert b { color: #dc2626; font-weight: 800; letter-spacing: .01em; } .stock-alert svg { width: 17px; height: 17px; color: #dc2626; transform-origin: 50% 10%; animation: alert-ring 1.6s ease-in-out infinite; } .stock-alert-dot { position: relative; width: .6rem; height: .6rem; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: alert-blink 1s steps(2, start) infinite; } @keyframes alert-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 0 rgba(239,68,68,.45); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 7px rgba(239,68,68,0), 0 0 24px 2px rgba(239,68,68,.35); } } @keyframes alert-blink { to { visibility: hidden; } } @keyframes alert-ring { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(9deg); } 40% { transform: rotate(-6deg); } } .setup-time { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: -.2rem 0 0; font-size: .84rem; color: var(--muted); } .setup-time svg { width: 15px; height: 15px; color: var(--accent-deep); } .setup-time b { color: var(--heading); font-weight: 700; } .price-request { font-size: 1.35rem !important; } @media (max-width: 760px) { .mac-plans { grid-template-columns: minmax(0, 1fr); } } /* shared hosting pages: plans, comparison table, included list */ .hosting-plans { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; grid-auto-rows: 1fr; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .compare-table > table { min-width: 560px; } .compare-table thead th { padding: 1rem; font: 700 1rem/1.2 var(--font-display); letter-spacing: 0; text-transform: none; color: #fff; background: linear-gradient(90deg, var(--ink-2), var(--ink)) !important; } .compare-table thead th small { display: block; margin-top: .25rem; font: 700 .9rem/1 var(--font-body); color: var(--accent-2); } .compare-table thead th:first-child { text-align: left; } .compare-table tbody th { text-align: left; padding: .7rem 1rem; font: 600 .9rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--heading); background: transparent !important; } .compare-table tbody td { padding: .7rem 1rem; font-size: .92rem; } .compare-table tbody tr:nth-child(even) th, .compare-table tbody tr:nth-child(even) td { background: rgba(11,27,43,.03) !important; } .compare-table tbody tr:hover th, .compare-table tbody tr:hover td { background: rgba(255,138,31,.07) !important; } .compare-table .yes { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; color: #16a34a; } .compare-table .yes svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(34,197,94,.35)); } .included-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2.2rem; max-width: 960px; margin: 0 auto; padding: clamp(1.2rem, 2.5vw, 1.8rem) !important; } .included-item { display: flex; gap: .75rem; align-items: flex-start; } .included-item .ic { width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--ic-deep, var(--accent-deep)); } .included-item b { display: block; color: var(--heading); font-weight: 700; } .included-item span:not(.ic) { display: block; color: var(--muted); font-size: .9rem; } @media (max-width: 1080px) { .hosting-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .hosting-plans, .included-list { grid-template-columns: minmax(0, 1fr); } } .instant-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .instant-point { display: flex; gap: .9rem; align-items: flex-start; } .instant-point .svc-ic { flex: none; width: 52px; height: 52px; } .instant-point .svc-ic svg { width: 40px; height: 40px; } .instant-point h3 { margin: .15rem 0 .25rem; font-size: 1.05rem; } .instant-point p { margin: 0; color: var(--muted); font-size: .92rem; } /* hosting plans: green "Fully Managed" strip at the top of each card */ .managed-top { position: relative; display: flex; align-items: center; min-height: 2.1rem; margin: 0; padding: .45rem .7rem .45rem 2.35rem; border-radius: 10px; font-size: .92rem; font-weight: 700; letter-spacing: .01em; color: #047857; background: linear-gradient(90deg, rgba(16,185,129,.16), rgba(16,185,129,.04)); border: 1px solid rgba(16,185,129,.32); animation: managed-glow 2.6s ease-in-out infinite; } .managed-top::before { content: ""; position: absolute; left: .6rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); background: #059669; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.5 5.8v5.7c0 4.8 3.2 8 7.5 9.7 4.3-1.7 7.5-4.9 7.5-9.7V5.8L12 2.8z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.5 5.8v5.7c0 4.8 3.2 8 7.5 9.7 4.3-1.7 7.5-4.9 7.5-9.7V5.8L12 2.8z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E") center / contain no-repeat; } @keyframes managed-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } 50% { box-shadow: 0 0 18px -2px rgba(16,185,129,.45); } } .plan > .instant-badge { background: linear-gradient(180deg, #4ade80, #16a34a); color: #fff; box-shadow: 0 0 18px -4px rgba(34,197,94,.8); } .plan > .instant-badge::before { content: "\26A1"; } .plan > .instant-badge::after { border-color: rgba(34,197,94,.75); } .instant-stock { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: -.2rem 0 0; font-size: .82rem; color: #047857; } .instant-stock span { width: .55rem; height: .55rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: stock-pulse 1.8s ease-out infinite; } @keyframes stock-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 100% { box-shadow: 0 0 0 .6rem rgba(34,197,94,0); } } .price-table.instant-table td.col-cpu { min-width: 12rem; } .price-table.instant-table td.col-hdd { min-width: 9.5rem; } .price-table.instant-table td.col-ram, .price-table.instant-table td.col-ip { min-width: 0; } .instant-table td.col-id .instant-stock { justify-content: flex-start; margin: .5rem 0 0; font-family: var(--font-body); font-size: .76rem; font-weight: 600; } .price-table td.col-net { min-width: 8.5rem; } .price-table td.col-net::first-line { font-size: .96rem; font-weight: 600; color: var(--heading); } @media (max-width: 760px) { .instant-table td.col-id .instant-stock { display: inline-flex; margin: 0 0 0 .7rem; vertical-align: middle; } } .instant-empty { max-width: 640px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2rem); text-align: center; border-radius: var(--r-3); background: rgba(255,255,255,.85); border: 1px solid #fff; box-shadow: var(--shadow-2); } .instant-empty h3 { margin-top: 0; } .instant-empty p { color: var(--muted); } @media (max-width: 860px) { .instant-points { grid-template-columns: 1fr; } } .steps { list-style: none; counter-reset: step; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; } .steps li { counter-increment: step; position: relative; min-height: 2.4rem; padding-left: 3.3rem; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font: 700 1rem/1 var(--font-display); color: #1d0d00; background: linear-gradient(180deg, #ffbe6a, #ff932a 55%, #ef7a0e); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 18px -4px var(--glow); } .steps b { display: block; color: var(--heading); font-weight: 700; } .steps span { display: block; color: var(--muted); font-size: .93rem; } .feature-rows { display: grid; gap: var(--gap); } .feature-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.25rem; } .feature-row img { width: 84px; height: 84px; } .feature-row h3 { margin: 0 0 .35rem; } .feature-row p { margin: 0; color: var(--muted); } /* testimonial */ .quote-card { padding: 1.4rem; } .quote-card h3 { margin-top: 0; } .quote-card .quote-text { position: relative; margin: 0 0 .9rem; font-size: 1rem; color: var(--text); } .quote-card .quote-text::before { content: "\201C"; position: absolute; top: -1.2rem; right: 0; font: 700 5rem/1 var(--font-display); color: rgba(255,138,31,.18); pointer-events: none; } .quote-card .avatar { float: left; width: 50px; height: 50px; border-radius: 50%; margin: 0 .9rem .4rem 0; border: 2px solid #fff; box-shadow: 0 0 18px -4px var(--glow); } .quote-card .quote-from { margin: 0; color: var(--muted); font-size: .9rem; clear: both; } /* home testimonials: one sliding row (3 / 2 / 1 visible), arrow buttons, glowing quote marks, initials avatars */ .testi-slider { position: relative; } .testi-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: .6rem .3rem 1.6rem; margin: -.6rem -.3rem -1.6rem; } .testi-track::-webkit-scrollbar { display: none; } .testi-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-3); } .testi-nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; padding: 0; border-radius: 50%; border: 1px solid rgba(11,27,43,.1); background: linear-gradient(180deg, #fff, #eef3f9); color: var(--ink); cursor: pointer; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(11,27,43,.55); transition: transform .25s var(--ease-out), background .25s, color .2s, box-shadow .25s; } .testi-nav svg { width: 20px; height: 20px; } .testi-nav:hover { color: #1d0d00; background: linear-gradient(180deg, #ffbe6a, #ff932a 55%, #ef7a0e); border-color: transparent; transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 26px -4px var(--glow), 0 12px 26px -12px var(--glow); } .testi-prev { left: -23px; } .testi-next { right: -23px; } @media (max-width: 1080px) { .testi-track { grid-auto-columns: calc((100% - var(--gap)) / 2); } } @media (max-width: 640px) { .testi-track { grid-auto-columns: 100%; } .testi-slider { padding-bottom: 3.6rem; } .testi-nav { top: auto; bottom: 0; margin-top: 0; } .testi-prev { left: calc(50% - 54px); } .testi-next { right: calc(50% - 54px); } } .testi-card { scroll-snap-align: start; display: flex; flex-direction: column; margin: 0; padding: 1.4rem 1.5rem 1.25rem; } .testi-card blockquote { flex: 1; margin: 0 0 1.1rem; font-size: .97rem; line-height: 1.65; color: var(--text); } .testi-card blockquote::before { content: "\201C"; display: block; height: 2.1rem; margin-bottom: .2rem; font: 700 4.2rem/1 var(--font-display); color: var(--ic, var(--accent)); text-shadow: 0 0 18px var(--ic, var(--glow)); } .testi-card figcaption { display: flex; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px solid rgba(11,27,43,.08); } .testi-avatar { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font: 700 .95rem/1 var(--font-display); letter-spacing: .02em; color: #fff; background: linear-gradient(140deg, var(--ic, #ff9a3c), var(--ic-deep, #ea580c)); box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px var(--ic, var(--glow)); } img.testi-avatar { object-fit: cover; } .testi-card figcaption strong { display: block; color: var(--heading); font-weight: 700; line-height: 1.25; } .testi-card figcaption small { display: block; margin-top: .15rem; color: var(--muted); font-size: .84rem; } /* logo strips */ .logos { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 0; padding: 0; } .logos li { flex: 1 1 140px; max-width: 200px; } .logos a, .logos span { position: relative; display: flex; align-items: center; justify-content: center; height: 78px; padding: .75rem 1rem; background: linear-gradient(180deg, #ffffff, #f0f3f8); border: 1px solid #fff; border-radius: var(--r-2); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--glass-edge), 0 10px 24px -16px rgba(11,27,43,.4); transition: transform .35s var(--ease-out), box-shadow .35s; overflow: hidden; } .logos a::after, .logos span::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent); transform: skewX(-20deg) translateX(-250%); transition: transform .7s var(--ease-out); } .logos a:hover, .logos span:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255,138,31,.5), 0 18px 40px -16px var(--glow); } .logos a:hover::after, .logos span:hover::after { transform: skewX(-20deg) translateX(600%); } .logos img { max-height: 46px; width: auto; } /* -------------------------------------------------------------------------- Pricing / spec tables (legacy markup, restyled as glass) -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; margin: var(--s-5) 0; -webkit-overflow-scrolling: touch; } .table-wrap::before { z-index: 1; background: linear-gradient(118deg, rgba(255,255,255,.8), rgba(255,255,255,0) 30%); } .table-wrap > table, table.table_planes { position: relative; z-index: 2; width: 100% !important; min-width: 640px; border-collapse: collapse; background: transparent !important; font-size: .92rem; } .table-wrap th, table.table_planes th { background: rgba(11,27,43,.045) !important; color: var(--muted); font: 600 .72rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: .8rem 1rem; text-align: center; border-bottom: 1px solid rgba(11,27,43,.08); } .table-wrap th[colspan], table.table_planes th[colspan] { background: linear-gradient(90deg, var(--ink-2), var(--ink)) !important; color: #fff; text-align: left; font: 600 1.02rem/1.3 var(--font-display); letter-spacing: 0; text-transform: none; padding: .95rem 1.2rem; border-left: 3px solid var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } .table-wrap th[colspan] a, table.table_planes th[colspan] a { color: var(--accent-2); } .table-wrap th[colspan] b, .table-wrap th[colspan] strong { font-weight: 600; margin-right: .4rem; color: #fff; } .table-wrap td, table.table_planes td { padding: .85rem 1rem; border-bottom: 1px solid rgba(11,27,43,.07); vertical-align: middle; background: transparent !important; color: var(--text); text-align: center; transition: background .2s; } .table-wrap tr:last-child td { border-bottom: 0; } .table-wrap tbody tr:hover td { background: rgba(255,138,31,.07) !important; } .table-wrap td.left, table.table_planes td.left { text-align: left; font-weight: 500; } .table-wrap td.left:first-child { font-weight: 600; color: var(--heading); } .table-wrap td img[src*="icon_planyes"] { width: 18px; height: 18px; vertical-align: middle; border-radius: 50%; box-shadow: 0 0 10px -2px var(--glow); } .table-wrap td img:not([src*="icon_planyes"]) { max-height: 46px; width: auto; background: #fff; padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--glass-edge); box-shadow: 0 6px 16px -10px rgba(11,27,43,.4); } .table-wrap .big_text { font: 600 .72rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .table-wrap td.id, .table-wrap .mono { font-family: var(--font-mono); font-size: .84rem; color: var(--cyan-ink); } .orange_text { display: flex; flex-direction: column; align-items: center; gap: .3rem; font: 700 1.15rem/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--heading); text-shadow: 0 0 16px rgba(255,138,31,.3); } .orange_text i { font: 500 .76rem/1 var(--font-body); color: var(--muted); text-shadow: none; } .orange_text a, .orange_text a:link, .orange_text a:visited { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; margin-top: .25rem; padding: .45rem .95rem; border-radius: var(--r-pill); background: linear-gradient(180deg, #ffbe6a, #ef7a0e); color: #1d0d00; font: 600 .76rem/1.2 var(--font-body); white-space: nowrap; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px -6px var(--glow); transition: transform .25s var(--ease-out), box-shadow .3s; } .orange_text a:hover { color: #1d0d00; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -6px var(--glow), 0 0 22px -4px var(--glow); } .orange_text + .orange_text { margin-top: .2rem; } .table_planes_shadow { display: none; } /* ---- server plan tables (.price-table): icon headers, bold first spec line, badge IDs, big price ---- */ .price-table > table { min-width: 780px; table-layout: auto; } .price-table th[colspan] { padding: 1.05rem 1.4rem; font-size: 1.06rem; } .price-table th[colspan] b { display: inline-flex; align-items: center; gap: .55rem; } .price-table th[colspan] b::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow); } .price-table th:not([colspan]) { width: auto; padding: .8rem 1rem; color: var(--heading); white-space: nowrap; background: linear-gradient(180deg, rgba(11,27,43,.055), rgba(11,27,43,.02)) !important; } .price-table th[class*="sp-"]::before { content: ""; display: inline-block; width: 1.05rem; height: 1.05rem; margin-right: .45rem; vertical-align: -.22rem; background: var(--ic); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .price-table table.table_planes td { padding: 1rem; font-size: .84rem; line-height: 1.55; color: var(--muted); } .price-table td.col-cpu::first-line, .price-table td.col-ram::first-line, .price-table td.col-hdd::first-line, .price-table td.col-ip::first-line { font-size: .96rem; font-weight: 600; color: var(--heading); } .price-table th.col-id, .price-table td.col-id, .price-table th.col-cpu, .price-table td.col-cpu { text-align: left; } .price-table td.col-cpu { min-width: 14rem; } .price-table td.col-ram { min-width: 9.5rem; } .price-table td.col-hdd { min-width: 13.5rem; } .price-table td.col-ip { min-width: 9rem; } .price-table td.col-order { min-width: 9.5rem; } .price-table .pid { display: inline-block; padding: .35rem .6rem; border-radius: 8px; background: rgba(25,184,232,.1); border: 1px solid rgba(25,184,232,.32); font: 600 .8rem/1 var(--font-mono); color: var(--cyan-ink); white-space: nowrap; } .price-table .orange_text:first-child { font-size: 1.5rem; color: transparent; text-shadow: none; background: linear-gradient(180deg, #ff9a3c, #e8620a); -webkit-background-clip: text; background-clip: text; } .price-table .orange_text a { min-width: 8rem; } .price-table tbody tr:nth-child(even) td { background: rgba(11,27,43,.025) !important; } .price-table tbody tr:hover td { background: rgba(255,138,31,.07) !important; } .price-table tbody td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .25s, background .2s; } .price-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* ---- Additional Services (.addon-table): same look as the plan table, prices as chips ---- */ .addon-table > table { min-width: 0; } .addon-table th[colspan] { padding: 1.05rem 1.4rem; font-size: 1.06rem; } .addon-table th[colspan] b { display: inline-flex; align-items: center; gap: .55rem; } .addon-table th[colspan] b::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow); } .addon-table table.table_planes td { padding: 1rem 1.2rem; text-align: left; } .addon-table table.table_planes td.col-svc { width: 16rem; font-size: .96rem; font-weight: 600; color: var(--heading); white-space: nowrap; } .addon-table td.col-svc::before { content: ""; display: inline-block; width: 1.15rem; height: 1.15rem; margin-right: .6rem; vertical-align: -.24rem; background: var(--ic); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .addon-table .opts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .addon-table .opt { display: inline-flex; align-items: center; gap: .6rem; padding: .32rem .35rem .32rem .8rem; border-radius: var(--r-pill); background: #fff; border: 1px solid rgba(11,27,43,.1); box-shadow: inset 0 1px 0 #fff, 0 4px 12px -8px rgba(11,27,43,.35); font-size: .86rem; color: var(--text); white-space: nowrap; transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s; } .addon-table .opt b { padding: .28rem .6rem; border-radius: var(--r-pill); font: 700 .8rem/1 var(--font-display); letter-spacing: -.01em; color: #fff; background: linear-gradient(180deg, #ffa24a, #e8620a); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px -4px var(--glow); } .addon-table .opt:hover { transform: translateY(-2px); border-color: rgba(255,138,31,.55); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -12px var(--glow); } .addon-table .opt-note { flex-basis: 100%; font-size: .8rem; color: var(--muted); } .addon-table tbody tr:nth-child(even) td { background: rgba(11,27,43,.025) !important; } .addon-table tbody tr:hover td { background: rgba(255,138,31,.07) !important; } .addon-table tbody td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .25s, background .2s; } .addon-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); } @media (max-width: 760px) { .addon-table table, .addon-table tbody, .addon-table tr, .addon-table th[colspan] { display: block; width: 100%; } .addon-table table.table_planes td { display: block; width: 100%; padding: .55rem 1.1rem; border: 0; } .addon-table table.table_planes td.col-svc { width: 100%; padding-top: .9rem; white-space: normal; } .addon-table table.table_planes td.col-opts { padding-bottom: 1rem; border-bottom: 1px solid rgba(11,27,43,.08); } .addon-table tbody tr:last-child td.col-opts { border-bottom: 0; } .addon-table tbody tr:hover td:first-child { box-shadow: none; } } /* ---- OS / control panel tables (.logo-table): logo tile + name + Free/Paid tag, versions as chips ---- */ .logo-table table.table_planes td.col-svc { width: 19rem; } .logo-table td.col-svc.has-logo::before { content: none; } .logo-table td.col-svc { white-space: normal; } .logo-table .brand-ico { float: left; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: .8rem; border-radius: 12px; background: #fff; border: 1px solid rgba(11,27,43,.1); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(11,27,43,.5); transition: transform .3s var(--ease-out), box-shadow .3s; } .logo-table td .brand-ico img { display: block; width: 1.75rem; height: 1.75rem; background: none; border: 0; padding: 0; box-shadow: none; max-height: none; border-radius: 0; } .logo-table tbody tr:hover .brand-ico { transform: translateY(-2px) rotate(-4deg); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -10px var(--glow); } .logo-table .svc-name { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; min-height: 2.75rem; } .tag { display: inline-block; padding: .22rem .55rem; border-radius: var(--r-pill); font: 700 .64rem/1 var(--font-body); font-style: normal; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .tag-free { color: #047857; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.38); } .tag-paid { color: #b45309; background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.45); } .tag-both { color: #1d4ed8; background: rgba(59,130,246,.11); border: 1px solid rgba(59,130,246,.38); } .logo-table .opt { padding: .38rem .85rem; } .logo-table .opt b { margin-right: -.5rem; } /* phones: every plan becomes a stacked card with labels */ @media (max-width: 760px) { .price-table > table { min-width: 0; } .price-table table, .price-table tbody, .price-table tr, .price-table td, .price-table th[colspan] { display: block; width: 100%; } .price-table th:not([colspan]) { display: none; } .price-table tbody tr { padding: .5rem 0; border-bottom: 1px solid rgba(11,27,43,.08); } .price-table tbody tr:first-child { padding: 0; border: 0; } .price-table tbody tr:has(> th:not([colspan])) { display: none; } .price-table tbody tr:last-child { border-bottom: 0; } .price-table table.table_planes td { position: relative; min-width: 0 !important; padding: .45rem 1.1rem .45rem 8.2rem; text-align: left !important; border: 0; } .price-table td::before { content: attr(data-label); position: absolute; left: 1.1rem; top: .72rem; width: 7rem; font: 600 .66rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .price-table table.table_planes td.col-order { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1.1rem .4rem; } .price-table td.col-order::before { content: none; } .price-table .orange_text + .orange_text { margin-top: 0; } .price-table tbody tr:hover td:first-child { box-shadow: none; } } /* -------------------------------------------------------------------------- Contact & payment -------------------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; } .info-card dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.1rem; margin: 0; } .info-card dt { font-weight: 600; color: var(--heading); } .info-card dd { margin: 0; color: var(--muted); } .info-card dd p { margin: 0; } .social-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .social-links a { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: var(--r-2); background: rgba(255,255,255,.7); border: 1px solid var(--glass-edge); color: var(--text); font-weight: 500; font-size: .92rem; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .25s var(--ease-out); text-shadow: none; } .social-links a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow); flex: none; } .social-links a:hover { background: #fff; border-color: rgba(255,138,31,.5); color: var(--accent-ink); transform: translateX(3px); box-shadow: 0 0 20px -8px var(--glow); } .pay-methods { display: grid; gap: var(--gap); } .pay-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.2rem; } .pay-card .pay-logo { display: flex; align-items: center; justify-content: center; min-height: 86px; padding: .9rem; background: linear-gradient(180deg, #fff, #f0f3f8); border: 1px solid var(--glass-edge); border-radius: var(--r-2); box-shadow: inset 0 1px 0 #fff; } .pay-card .pay-logo img { max-height: 66px; width: auto; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.1rem; margin: 0; font-size: .94rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; } .kv dd.mono { font-family: var(--font-mono); font-weight: 500; color: var(--cyan-ink); } /* domain search */ .domain-form { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding: 1rem 1.1rem; } .domain-form .www { font-weight: 600; color: var(--muted); } .domain-form input[type="text"] { flex: 1 1 220px; min-width: 0; width: auto; } .domain-form select { width: auto; padding-right: 2rem; } .seo-terms { font-size: .76rem; line-height: 1.6; color: var(--faint); overflow-wrap: anywhere; } /* sitemap */ /* sitemap page: grouped cards that mirror the menu */ .sitemap-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; } .sitemap-group h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(11,27,43,.08); font-size: 1.15rem; } .sitemap-group h2 .ic { width: 1.4rem; height: 1.4rem; color: var(--ic-deep, var(--accent-deep)); } .sitemap-group h2 small { margin-left: auto; min-width: 1.6rem; padding: .2rem .5rem; border-radius: var(--r-pill); text-align: center; font: 700 .72rem/1.2 var(--font-body); color: var(--ic-deep, var(--accent-deep)); background: var(--ic-soft, var(--glow-soft)); } .sitemap-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; } .sitemap-group a { position: relative; display: block; padding: .55rem 2rem .55rem .75rem; border-radius: 10px; transition: background .2s, transform .25s var(--ease-out); } .sitemap-group a::after { content: "\2192"; position: absolute; right: .75rem; top: 50%; transform: translate(-4px, -50%); opacity: 0; color: var(--ic-deep, var(--accent-deep)); font-weight: 700; transition: opacity .2s, transform .25s var(--ease-out); } .sitemap-group a b { display: block; color: var(--heading); font-weight: 650; } .sitemap-group a span { display: block; font-size: .84rem; color: var(--muted); } .sitemap-group a:hover { background: var(--ic-soft, var(--glow-soft)); transform: translateX(3px); } .sitemap-group a:hover b { color: var(--ic-deep, var(--accent-deep)); } .sitemap-group a:hover::after { opacity: 1; transform: translate(0, -50%); } @media (max-width: 1080px) { .sitemap-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .sitemap-groups { grid-template-columns: minmax(0, 1fr); } } .sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); } .sitemap-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .sitemap-grid a { display: block; padding: .7rem 1rem; border-radius: var(--r-2); color: var(--heading); font-weight: 500; text-shadow: none; } .sitemap-grid a:hover { transform: translateX(4px); color: var(--accent-ink); } /* CTA band (navy) */ .cta-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.4rem, 3.5vw, 2.4rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; color: #fff; border-radius: var(--r-3); border: 1px solid rgba(255,255,255,.14); background: radial-gradient(600px 300px at 90% 0%, rgba(255,138,31,.35), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(25,184,232,.25), transparent 60%), linear-gradient(135deg, var(--ink-3), var(--ink)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 50px -24px rgba(11,27,43,.6), 0 0 50px -20px var(--glow); } .cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,138,31,.25), transparent 62%); } .cta-band:hover::after { opacity: 1; } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: #fff; margin: 0 0 .25rem; font-size: var(--fs-4); } .cta-band p { margin: 0; color: var(--on-ink-muted); } .cta-band .actions { display: flex; gap: .7rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Footer (navy, glossy): brand + contact column, three link columns with coloured heading icons, other-brand cards, payment strip, back-to-top. -------------------------------------------------------------------------- */ .site-footer { position: relative; overflow: hidden; color: #b9c6d6; margin-top: var(--s-8); font-size: .92rem; background: radial-gradient(900px 400px at 100% 0%, rgba(255,138,31,.18), transparent 60%), radial-gradient(700px 420px at 0% 100%, rgba(25,184,232,.16), transparent 60%), linear-gradient(180deg, #17395f, var(--ink) 45%, #061018); } .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; background: linear-gradient(90deg, transparent, var(--accent) 30%, #fff 50%, var(--cyan) 70%, transparent); } .site-footer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px) 0 0/24px 24px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); } .site-footer .wrap { position: relative; z-index: 1; } .site-footer a { color: #b9c6d6; text-shadow: none; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: 2rem 1.75rem; padding-block: var(--s-8) var(--s-7); } /* brand + contact */ .footer-brand .brand-mark { width: 54px; height: 54px; } .footer-brand .brand-name { font-size: 1.65rem; } .footer-brand .brand-tag { font-size: .62rem; } .footer-brand p { margin: 1rem 0 1.1rem; max-width: 42ch; color: #b9c6d6; } .footer-contact { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; } .footer-contact li { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; line-height: 1.45; } .footer-contact li > span:last-child { min-width: 0; overflow-wrap: anywhere; } .footer-contact b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; } .footer-contact .ic { margin-top: .05rem; } .footer-social { display: flex; gap: .5rem; } .footer-social a { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--ic, #fff); transition: transform .3s var(--ease-out), color .2s; } .footer-social svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px var(--ic, var(--glow))); } .footer-social a:hover { color: #fff; transform: translateY(-3px) scale(1.12); } /* link columns */ .footer-col h3 { display: flex; align-items: center; gap: .6rem; color: #fff; font: 600 .76rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .footer-col ul a { position: relative; display: inline-flex; align-items: center; padding: .2rem 0 .2rem 1rem; color: #b9c6d6; transition: color .2s, transform .25s var(--ease-out); } .footer-col ul a::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--ic, var(--accent)); opacity: .55; box-shadow: 0 0 8px var(--ic, var(--accent)); transition: opacity .2s, transform .25s var(--ease-out); } .footer-col ul a:hover { color: #fff; transform: translateX(4px); } .footer-col ul a:hover::before { opacity: 1; transform: scale(1.5); } /* other brands */ .footer-brands-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.08); } .footer-brands-row h3 { margin: 0; } .footer-brands-row .brands { flex: 1 1 520px; grid-template-columns: repeat(2, minmax(0, 300px)); } .brands { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; align-content: start; } .brands a { position: relative; display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .7rem .9rem; border-radius: var(--r-2); background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition: transform .3s var(--ease-out), border-color .2s, box-shadow .3s; } .brands a:hover { transform: translateY(-3px); border-color: rgba(255,138,31,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 26px -8px var(--glow); } .brands span { min-width: 0; overflow-wrap: anywhere; } .brands img { flex: none; width: 40px; height: 40px; object-fit: contain; } .brands img.wide { width: 92px; height: auto; padding: 4px 6px; background: #fff; border-radius: 6px; box-shadow: 0 4px 12px -6px rgba(0,0,0,.6); } .brands strong { display: block; color: #fff; font-weight: 600; } .brands small { display: block; color: #b9c6d6; font-size: .78rem; } /* bottom bar */ .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding-block: 1.1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; } .footer-bottom p { margin: 0; } .footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; } .footer-pay .pay-label { font: 600 .7rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #8fa3ba; margin-right: .3rem; } .footer-pay img { display: block; height: 26px; width: auto; padding: 3px 6px; background: #fff; border-radius: 6px; box-shadow: 0 4px 12px -6px rgba(0,0,0,.6); transition: transform .3s var(--ease-out), box-shadow .3s; } .footer-pay li:hover img { transform: translateY(-2px); box-shadow: 0 0 16px -4px var(--glow); } /* back-to-top button (site.js toggles .is-visible) */ .to-top { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #1d0d00; background: linear-gradient(180deg, #ffbe6a, #ff932a 55%, #ef7a0e); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px -10px var(--glow), 0 0 0 1px rgba(224,115,10,.35); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .3s, transform .35s var(--ease-out), visibility .3s, box-shadow .3s; text-shadow: none; } .to-top svg { width: 20px; height: 20px; } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover { color: #1d0d00; transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 16px 34px -10px var(--glow), 0 0 26px -4px var(--glow); } /* -------------------------------------------------------------------------- Motion: page veil, entrance, scroll reveal, view transitions -------------------------------------------------------------------------- */ @keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes veil { to { opacity: 0; visibility: hidden; } } /* page-open veil: a quick wash of light that clears as the content rises */ .js .veil { position: fixed; inset: 0; z-index: 998; pointer-events: none; background: linear-gradient(135deg, #ffffff, var(--bg) 60%); animation: veil .55s .05s var(--ease) forwards; } .js .hero-copy > * { animation: rise .85s var(--ease-out) both; } .js .hero-copy > :nth-child(2) { animation-delay: .1s; } .js .hero-copy > :nth-child(3) { animation-delay: .2s; } .js .hero-copy > :nth-child(4) { animation-delay: .3s; } .js .hero-media { animation: rise 1s .25s var(--ease-out) both, float 7s 1.3s ease-in-out infinite; } .js .hero-stats { animation: rise .9s .5s var(--ease-out) both; } .js .page-hero .wrap > * { animation: rise .7s var(--ease-out) both; } .js .page-hero .wrap > :nth-child(2) { animation-delay: .1s; } .js .page-hero .wrap > :nth-child(3) { animation-delay: .2s; } .js .page-hero .wrap > :nth-child(4) { animation-delay: .3s; } .js .reveal { opacity: 0; transform: translateY(70px) scale(.97); filter: blur(4px); transition: opacity .9s var(--ease-out), transform 1.05s var(--ease-out), filter .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); } .js .reveal.is-in { opacity: 1; transform: none; filter: blur(0); } /* large panels slide in without the blur (blurring a big table is expensive) */ .js .table-wrap.reveal, .js .form-card.reveal, .js .prose.reveal { filter: none; transition: opacity .9s var(--ease-out), transform 1.05s var(--ease-out); } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: 160ms ease-out both fade reverse; } ::view-transition-new(root) { animation: 320ms ease-in both fade; } /* The site owner wants the motion; only endless ambient loops stop under reduced-motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bg::before, .bg::after, .hero-media, .hero-media::after, .hero::after, .page-hero::after, .eyebrow::before, .plan.featured::before, .hero h1 em, .page-hero h1 strong { animation-iteration-count: 1 !important; } } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ /* logo shrinks before the nav does, so the two never touch */ @media (max-width: 1300px) { .nav a, .nav .nav-parent { padding: .45rem .56rem; font-size: .84rem; gap: .35rem; } .nav .ic { width: 1.05rem; height: 1.05rem; } .masthead .brand { gap: .45rem; } .masthead .brand-mark, .is-scrolled .masthead .brand-mark { width: 36px; height: 36px; } .masthead .brand-name, .is-scrolled .masthead .brand-name { font-size: 1.12rem; } .masthead .brand-tag { font-size: .44rem; letter-spacing: .06em; margin-top: .26rem; } } @media (max-width: 1180px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } } /* menu button + panel (seven nav items + logo need ~1140px) */ @media (max-width: 1200px) { .nav-toggle { display: inline-flex; } /* the top-bar links move into the menu panel, so they are not shown twice */ .topbar-links { display: none; } .topbar .wrap { justify-content: flex-end; } .nav { position: absolute; top: 100%; left: 0; right: 0; justify-self: auto; height: calc(100vh - var(--topbar-h) - var(--header-h)); height: calc(100dvh - var(--topbar-h) - var(--header-h)); margin: 0; padding: 1rem var(--gutter) 2rem; background: linear-gradient(180deg, rgba(17,44,74,.98), rgba(8,19,31,.98)); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .is-scrolled .nav { height: calc(100vh - var(--header-h-compact)); height: calc(100dvh - var(--header-h-compact)); } .nav-open .nav { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .nav-open { overflow: hidden; } .nav > ul { flex-direction: column; align-items: stretch; gap: .3rem; } .nav a { font-size: 1.02rem; padding: .8rem 1rem; border-radius: var(--r-2); white-space: normal; } .nav .ic { width: 1.35rem; height: 1.35rem; } .nav .mobile-only { display: block; } .nav .nav-parent { display: flex; width: 100%; font-size: 1.02rem; padding: .8rem 1rem; border-radius: var(--r-2); cursor: default; } .nav-parent .caret, .nav .has-sub::after, .nav .sub::before { display: none; } .nav .sub.sub-wide { grid-template-columns: minmax(0, 1fr); min-width: 0; } .nav .sub { position: static; min-width: 0; padding: .1rem 0 .3rem 1.4rem; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .nav .sub a { color: #fff; white-space: normal; padding: .6rem .9rem; } .nav .sub a .ic { color: var(--ic); } .nav .sub-text b { color: #fff; } .nav .sub-text small { color: rgba(255,255,255,.65); } .nav .sub a:hover, .nav .sub a[aria-current="page"] { background: rgba(255,255,255,.1); } .split { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; gap: var(--s-5); } .why-media { min-height: 0; aspect-ratio: 4 / 3; } .split .sticky { position: static; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero-media { max-width: none; } .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-2, .grid-3 { grid-template-columns: 1fr; } .contact-grid, .media-text, .layout-aside { grid-template-columns: 1fr; } .layout-aside aside { position: static; } .two-col { columns: 1; } .pay-card { grid-template-columns: 1fr; } .pay-card .pay-logo { max-width: 260px; } .field-row { grid-template-columns: 1fr; } .bg::before, .bg::after { opacity: .6; } } @media (max-width: 600px) { :root { --header-h: 62px; --header-h-compact: 56px; } .masthead .brand-mark, .is-scrolled .masthead .brand-mark { width: 34px; height: 34px; } .masthead .brand-name, .is-scrolled .masthead .brand-name { font-size: 1.1rem; } .topbar-phone span { display: none; } .grid-4, .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } .footer-bottom { justify-content: center; text-align: center; } .feature { grid-template-columns: 50px minmax(0, 1fr); gap: .85rem; padding: 1rem; } .feature img { width: 50px; height: 50px; } .svc-ic { width: 50px; height: 50px; } .svc-ic svg { width: 38px; height: 38px; } .feature-row { grid-template-columns: 1fr; } .plan { padding: 1.15rem; } .to-top { right: .8rem; bottom: .8rem; width: 42px; height: 42px; } } /* moved out of inline style attributes */ .hp-field { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; } h2.title.title-sm { font-size: var(--fs-4); } /* about page */ .about-hero .hero-stats { margin-top: 1.4rem; max-width: 900px; } .about-hero .stat { padding: .7rem 1.1rem; border-radius: var(--r-2); background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -18px rgba(0,0,0,.6); } .about-hero .stat::before { background: linear-gradient(118deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%); } .about-hero .stat:hover { transform: translateY(-4px); border-color: rgba(255,138,31,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(255,138,31,.35), 0 20px 40px -18px var(--glow); } .about-hero .stat span { margin-top: .2rem; } .why-copy .title { margin-bottom: .6rem; } .about-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.4rem; margin-top: 1.2rem; font-weight: 500; color: var(--heading); } .offer { color: inherit; text-decoration: none; } .offer > div { display: flex; flex-direction: column; height: 100%; } .offer-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .85rem; font-size: .85rem; } .offer p { margin-bottom: .85rem; } .offer-meta b { padding: .25rem .65rem; border-radius: var(--r-pill); font-weight: 700; color: var(--ic-deep, var(--accent-deep)); background: var(--ic-soft, var(--glow-soft)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } .offer-meta i { font-style: normal; font-weight: 650; color: var(--ic-deep, var(--accent-deep)); transition: transform .3s var(--ease-out); } .offer:hover .offer-meta i { transform: translateX(5px); } .offer:hover h3 { color: var(--ic-deep, var(--accent-deep)); } .sister-brand { display: flex; align-items: center; gap: 1.1rem; color: inherit; text-decoration: none; } .sister-logo { flex: none; display: grid; place-items: center; width: 136px; height: 72px; border-radius: var(--r-2); background: linear-gradient(180deg, #ffffff, #eef2f8); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--glass-edge), 0 12px 26px -14px rgba(11,27,43,.45), 0 0 26px -8px var(--ic, var(--accent)); transition: transform .4s var(--ease-out); } .sister-logo img { max-width: 110px; max-height: 48px; width: auto; height: auto; } .sister-brand strong { display: block; font: 700 var(--fs-2)/1.2 var(--font-display); color: var(--heading); } .sister-brand small { display: block; margin-top: .25rem; color: var(--muted); font-size: .92rem; } .sister-brand:hover .sister-logo { transform: rotate(-3deg) scale(1.05); } .about-reach a { font-weight: 600; color: var(--ic-deep, var(--accent-deep)); } @media (max-width: 760px) { .about-hero .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-points { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .sister-brand { flex-direction: column; align-items: flex-start; } } /* legal pages: summary card, numbered sections, sticky index */ .legal-updated { margin-top: .9rem !important; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: var(--r-pill); font-size: .84rem !important; color: #dbe7f3 !important; background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .legal-updated::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow); } .legal-main { display: grid; gap: var(--gap); min-width: 0; } .legal-summary h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; font-size: var(--fs-3); } .legal-summary .svc-ic { width: 40px; height: 40px; } .legal-summary .svc-ic svg { width: 32px; height: 32px; } .legal-summary .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.4rem; color: var(--heading); font-weight: 500; } .legal-summary { border-top: 3px solid var(--ic, var(--accent)); } .legal-doc section { scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 1.2rem); padding-block: .2rem 1rem; } .legal-doc section + section { border-top: 1px solid rgba(11,27,43,.07); padding-top: .4rem; } .legal-doc h2 { display: flex; align-items: center; gap: .65rem; font-size: var(--fs-3); margin: .9em 0 .55em; } .legal-num { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font: 700 .85rem/1 var(--font-display); color: #fff; background: linear-gradient(160deg, #ffb35c, var(--accent) 55%, var(--accent-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 14px -3px var(--glow); } .legal-doc a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,138,31,.4); text-underline-offset: 3px; } .legal-doc a:hover { text-decoration-color: var(--accent); } .legal-doc ol { padding-left: 1.3rem; } .legal-table { margin: .6rem 0 1rem; } .legal-table > table { min-width: 420px; } .legal-table td:first-child, .legal-table th:first-child { text-align: left; } .legal-table td:last-child { font-weight: 700; color: var(--accent-ink); } .legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; max-height: calc(100vh - var(--topbar-h) - var(--header-h) - 7rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; scrollbar-width: thin; } .legal-help .actions { display: flex; flex-wrap: wrap; gap: .5rem; } .legal-toc a { display: flex; align-items: center; gap: .6rem; padding: .42rem .6rem; border-radius: 10px; color: var(--text); font-size: .9rem; transition: background .2s, color .2s, transform .25s var(--ease-out); } .legal-toc a span { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font: 700 .72rem/1 var(--font-display); color: var(--accent-ink); background: rgba(255,138,31,.12); transition: background .2s, color .2s, box-shadow .2s; } .legal-toc a:hover, .legal-toc a.is-active { background: rgba(255,138,31,.1); color: var(--heading); transform: translateX(3px); } .legal-toc a.is-active { box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; } .legal-toc a:hover span, .legal-toc a.is-active span { color: #fff; background: var(--accent); box-shadow: 0 0 12px -2px var(--glow); } .legal-others a[aria-current="page"] { background: #fff; border-color: rgba(255,138,31,.55); color: var(--accent-ink); font-weight: 600; box-shadow: 0 0 20px -8px var(--glow); } .legal-help p { margin: 0 0 .9rem; color: var(--muted); font-size: .92rem; } .footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; list-style: none; margin: 0; padding: 0; } .footer-legal a { color: #b9c9da; transition: color .2s, text-shadow .2s; } .footer-legal a:hover { color: #fff; text-shadow: 0 0 12px var(--glow); } .form-privacy { margin: 0 0 .9rem; font-size: .84rem; color: var(--muted); } .form-privacy a { color: var(--accent-ink); font-weight: 600; } .notfound-hero { padding-block: clamp(2.4rem, 6vw, 4rem); } .page-hero .notfound-code { margin: 0 0 .2rem !important; font: 800 clamp(5rem, 16vw, 9rem)/.9 var(--font-display); letter-spacing: -.04em; color: transparent !important; background: linear-gradient(180deg, #ffd08a, #ff962e 50%, #f06a00); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 28px rgba(255,138,31,.45)); animation: float 6s ease-in-out infinite; } .notfound-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; } @media (max-width: 860px) { .legal-layout .legal-aside { position: static; order: -1; } .legal-toc ol { max-height: none; } } @media (max-width: 700px) { .legal-summary .checklist { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Scroll motion: section headings type in letter by letter (site.js splits them and puts the plain markup back afterwards); photos wipe in, then zoom + glass shine on hover -------------------------------------------------------------------------- */ .split-text .sw { display: inline-block; white-space: nowrap; } .split-text .sc { display: inline-block; opacity: 0; transform: translateX(.85em); transition: opacity .8s var(--ease-out), transform 1s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--c) * var(--step, 22ms)); will-change: transform, opacity; } .split-text.is-play .sc { opacity: 1; transform: none; } .split-text .sc.grad { color: transparent; -webkit-background-clip: text; background-clip: text; } .img-fx { position: relative; overflow: hidden; isolation: isolate; } .img-fx img { transition: transform 1.2s var(--ease-out), clip-path 1.5s var(--ease-out); } .js .img-fx.wipe img { clip-path: inset(0 100% 0 0); } .js .img-fx.wipe.is-shown img { clip-path: inset(0 0 0 0); } .img-fx:hover img { transform: scale(1.1); } .img-shine { position: absolute; left: 50%; top: 50%; z-index: 3; width: 200%; height: 0; pointer-events: none; background-color: rgba(255,255,255,.35); transform: translate(-50%, -50%) rotate(-45deg); } .img-fx:hover .img-shine { height: 250%; background-color: rgba(255,255,255,0); transition: height .6s linear, background-color .6s linear; }