/* ============================================================================
* SSHSUPER theme -- "GRID" design system
*
* An override layer on top of Bootstrap 3, which is what the 75 page
* templates are built against. Restyling here is deliberate: it reaches every
* page at once without touching markup or business logic, so the backend and
* the account-creation flow stay exactly as they are.
*
* Single-theme by design (light). The panel displays long copyable config
* strings (vmess:// links, PSKs, ports) that people read on cheap phones in
* daylight -- a dark surface measurably hurts that, and shipping a second
* theme across 75 templates would be a contrast-bug surface with no user
* asking for it.
*
* Sections:
* 1 Tokens
* 2 Base + typography
* 3 Navbar / mega menu / language switch
* 4 Buttons
* 5 Page headers + hero
* 6 Cards (service / server / stat / feature)
* 7 Tables
* 8 Forms
* 9 Alerts + labels
* 10 Footer
* 11 Responsive
* ========================================================================= */
/* ---------------------------------------------------------------- 1 Tokens */
:root {
/* Ink */
--ss-ink: #131b3a;
--ss-ink-soft: #3d4770;
--ss-muted: #6f7899;
--ss-muted-soft: #98a0bd;
/* Ground */
--ss-bg: #f5f7fd;
--ss-bg-sunk: #eef1fa;
--ss-surface: #ffffff;
--ss-border: #e4e8f5;
--ss-border-soft:#eef1f9;
/* Brand ramp.
*
* Deliberately a narrow hue range -- indigo into navy, no violet. The first
* pass ran blue -> violet -> purple, which is the gradient every generated
* template reaches for and reads as decoration rather than as a decision.
* Keeping the ramp inside one family makes the surfaces look engineered:
* the colour carries hierarchy, not personality. */
--ss-brand: #2f56d9;
--ss-brand-deep: #22409f;
--ss-brand-far: #182f74;
--ss-brand-tint: #eaf0fe;
/* The bar and the footer used to be two different blues -- a bright
* #22409f at the top of the page and a near-black navy at the bottom, with
* a bright gradient between them. Read on a phone that looks like two
* different sites stitched together. One navy is now shared by the navbar
* and the footer, and the gradient starts from that exact value so the hero
* grows out of the bar instead of butting against it. */
--ss-nav: #101733;
--ss-gradient: linear-gradient(168deg, #101733 0%, #17265a 30%, #1e3585 62%, #2848b4 100%);
/* Amber is the single highlight -- used for emphasis, never for state */
--ss-accent: #ffd84d;
--ss-accent-ink: #4a3400;
/* Semantic state, kept separate from the brand ramp */
--ss-ok: #15a34a;
--ss-ok-tint: #e7f8ee;
--ss-warn: #d97706;
--ss-warn-tint: #fdf3e3;
--ss-bad: #e02424;
--ss-bad-tint: #fdeaea;
--ss-info: #1d4ed8;
--ss-info-tint: #e8eeff;
/* Radii */
--ss-r-xs: 6px;
--ss-r-sm: 9px;
--ss-r: 13px;
--ss-r-lg: 18px;
--ss-r-xl: 24px;
/* Elevation -- two layers so cards read as paper, not as drop-shadow blobs */
--ss-lift-1: 0 1px 2px rgba(19, 27, 58, .05), 0 2px 8px rgba(19, 27, 58, .04);
--ss-lift-2: 0 2px 4px rgba(19, 27, 58, .05), 0 12px 30px rgba(19, 27, 58, .09);
--ss-lift-3: 0 4px 8px rgba(19, 27, 58, .06), 0 24px 56px rgba(19, 27, 58, .14);
/* Type */
--ss-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ss-font-dis: 'Sora', var(--ss-font);
--ss-font-num: 'Plus Jakarta Sans', ui-monospace, monospace;
}
/* ------------------------------------------------- 2 Base + typography */
body {
font-family: var(--ss-font);
background: var(--ss-bg);
color: var(--ss-ink);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--ss-brand); text-decoration: none; }
a:hover, a:focus { color: var(--ss-brand-deep); text-decoration: none; }
/* Keyboard focus has to stay visible -- Bootstrap 3 strips it in places. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
select:focus-visible {
outline: 2px solid var(--ss-brand);
outline-offset: 2px;
}
h1, h2, h3, h4, h5 {
font-family: var(--ss-font-dis);
color: var(--ss-ink);
font-weight: 700;
letter-spacing: -.015em;
text-wrap: balance;
}
hr { border-top-color: var(--ss-border); }
/* Digits that sit in columns (ports, limits, counters) must not jitter. */
.ss-num, .ss-stat-number, .custab td, .table td, .table th { font-variant-numeric: tabular-nums; }
/* Long config strings / hosts: break anywhere rather than blow out the page. */
.ss-breakable { word-break: break-all; overflow-wrap: anywhere; }
/* Any wide block scrolls inside itself, never the page body. */
.table-responsive { -webkit-overflow-scrolling: touch; }
/* --------------------------------------------- 3 Navbar / mega / lang */
/* Bootstrap 3 lays this bar out with floats, and the first pass styled it as
* if it were flex. Measured at 1440px the result was a 271px-tall navbar: the
* right-hand list had dropped below the left one, the call to action rendered
* 71px tall because BOTH `.navbar-nav > li > a` and the CTA rule applied their
* padding, its label was dark navy on a blue button (the generic rule won on
* specificity), and the language switch stacked EN above ID because a floated
* element's display computes to block, throwing away its inline-flex.
*
* So the bar is laid out with flex here and the floats are turned off, rather
* than layering more overrides on top of them. */
.navbar-default {
background: var(--ss-nav);
border: 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
margin-bottom: 0;
min-height: 66px;
}
/* The bar carries a brand, five menus, a call to action, a reset notice and a
* language switch. Measured, that needs about 1200px -- at Bootstrap's own
* 768px collapse point the row overflowed its container by 285px. So the
* collapsed (hamburger) presentation is kept all the way up to 1200px, which
* means undoing the desktop rules Bootstrap applies from 768px up. */
@media (max-width: 1199px) {
/* The hamburger presentation runs all the way to 1200px, so the compact
bar height belongs to that whole range, not only to phones. */
.navbar-default { min-height: 54px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.navbar-default .navbar-header { float: none; }
.navbar-default .navbar-toggle { display: block; }
.navbar-default .navbar-collapse { border-top: 1px solid rgba(255,255,255,.12); box-shadow: none; }
.navbar-default .navbar-collapse.collapse { display: none !important; }
.navbar-default .navbar-collapse.collapse.in { display: block !important; overflow-y: auto; }
.navbar-default .navbar-nav { float: none !important; margin: 6px -15px; display: block; }
.navbar-default .navbar-nav > li { float: none; }
.navbar-default .navbar-nav > li > a { height: auto; padding: 11px 15px; }
.navbar-default .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; }
}
@media (min-width: 1200px) {
.navbar-default > .container { display: flex; align-items: center; gap: 8px; }
.navbar-default .navbar-header { float: none; display: flex; align-items: center; }
.navbar-default .navbar-collapse {
display: flex !important;
align-items: center;
flex: 1 1 auto;
gap: 6px;
padding: 0;
float: none;
}
.navbar-default .navbar-nav { float: none; margin: 0; display: flex; align-items: center; }
.navbar-default .navbar-nav > li { float: none; }
/* Bootstrap declares .navbar-right with float:right !important, which has to
be answered in kind before margin-left:auto can do the alignment. */
.navbar-default .navbar-nav.navbar-right { float: none !important; margin-left: auto; }
}
.navbar-default .navbar-brand {
height: auto;
padding: 12px 15px 12px 0;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--ss-font-dis);
font-weight: 800;
font-size: 20px;
color: #fff;
letter-spacing: -.02em;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { color: #fff; }
.navbar-default .navbar-brand p { display: none; }
/* Relay ring mark -- sits directly on the navy bar with no tile/chip behind
* it (the ring is a self-contained shape already, unlike the old satellite
* icon which needed a light backing tile to read against the gradient). */
.ss-brand-mark {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-brand-mark svg { display: block; }
/* Two-tone wordmark: "SSH" in the brand's white/ink, "SUPER" in the accent
* gold -- reads as one word (the actual name has no space) but the color
* split still gives the logotype some structure instead of being one flat
* block of text. */
.ss-wordmark-accent { color: var(--ss-accent); }
/* Links get a fixed row height and centre their own label, instead of being
* sized by vertical padding. Padding made the tallest item define the bar
* (67px links -> a 90px bar), and it also leaked onto the EN/ID links and the
* call to action, which match this same selector -- that is what stretched
* them to 58-73px each. */
.navbar-default .navbar-nav > li > a {
color: rgba(255, 255, 255, .84);
font-weight: 600;
font-size: 14.5px;
padding: 0 12px;
height: 66px;
display: flex;
align-items: center;
transition: color .15s;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.open > a,
.navbar-default .navbar-nav > li.open > a:hover,
.navbar-default .navbar-nav > li.open > a:focus,
.navbar-default .navbar-nav > li.active > a:focus { color: #fff; background: transparent; }
.navbar-default .navbar-nav .dropdown-menu {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r);
box-shadow: var(--ss-lift-2);
padding: 8px;
margin-top: 2px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: var(--ss-ink-soft);
font-weight: 500;
font-size: 14px;
padding: 9px 12px;
border-radius: var(--ss-r-sm);
white-space: normal;
}
.navbar-default .navbar-nav .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background: var(--ss-brand-tint);
color: var(--ss-brand);
}
.dropdown-menu .divider { background: var(--ss-border-soft); margin: 6px 4px; }
/* Bootstrap 3's default toggle lands at 34px tall, under the 44px minimum
* touch target -- and this is the control every phone visitor has to hit
* before they can reach anything else. Measured at 375px, then sized up. */
.navbar-toggle {
border-color: rgba(255, 255, 255, .3);
border-radius: var(--ss-r-xs);
margin: 5px 0;
min-width: 44px;
min-height: 44px;
padding: 12px 10px;
}
.navbar-toggle .icon-bar { background: #fff; }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: rgba(255, 255, 255, .12); }
/* The call to action. The selector carries the same weight as the generic
* nav-link rule plus one class, so its colour and padding actually win. */
.navbar-default .navbar-nav > li.ss-nav-cta > a,
.navbar-default .navbar-nav > li.ss-nav-cta > a:hover,
.navbar-default .navbar-nav > li.ss-nav-cta > a:focus {
background: var(--ss-accent);
color: var(--ss-accent-ink);
border-radius: var(--ss-r-sm);
padding: 0 18px;
height: 38px;
margin: 0 6px;
font-weight: 700;
white-space: nowrap;
}
.navbar-default .navbar-nav > li.ss-nav-cta > a:hover { filter: brightness(1.06); }
/* Reset notice: plain text, so it needs its own vertical rhythm rather than
inheriting the link padding it does not have. */
@media (max-width: 1399px) { .ss-nav-reset { display: none; } }
.ss-nav-reset > span {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, .7);
font-size: 12.5px;
font-weight: 500;
padding: 0 10px;
white-space: nowrap;
}
/* Menu entries that carry a badge (Tembak Paket). */
.ss-menu-hot {
display: inline-block;
background: linear-gradient(135deg, #ff8a3d, #ff4d6d);
color: #fff;
font-size: 9.5px;
font-weight: 800;
letter-spacing: .06em;
padding: 2px 7px;
border-radius: 20px;
margin-left: 7px;
vertical-align: 2px;
text-transform: uppercase;
}
.mega-menu-heading {
font-family: var(--ss-font-dis);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ss-muted-soft);
margin: 6px 0 10px;
padding: 0 12px;
}
.mega-menu-col a {
display: block;
padding: 8px 12px;
border-radius: var(--ss-r-sm);
color: var(--ss-ink-soft);
font-weight: 500;
font-size: 14px;
}
.mega-menu-col a:hover { background: var(--ss-brand-tint); color: var(--ss-brand); }
/* Language switch. `float` computes display to block, which is what stacked
EN above ID before -- the float is cleared for this item specifically. */
.navbar-default .navbar-nav > li.ss-lang-switch {
float: none;
display: inline-flex;
align-items: center;
gap: 2px;
background: rgba(255, 255, 255, .14);
border-radius: 20px;
padding: 3px;
margin-left: 8px;
}
/* Same specificity as the generic nav-link rule plus a class, so these do not
inherit its 66px row height. */
.navbar-default .navbar-nav > li.ss-lang-switch > a {
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, .78);
padding: 0 11px;
height: 26px;
display: flex;
align-items: center;
border-radius: 20px;
}
.navbar-default .navbar-nav > li.ss-lang-switch > a:hover { color: #fff; }
.navbar-default .navbar-nav > li.ss-lang-switch > a.ss-lang-active { background: #fff; color: var(--ss-brand-deep); }
.ss-lang-sep { display: none; }
/* --------------------------------------------------------- 4 Buttons */
.btn {
font-family: var(--ss-font);
font-weight: 700;
border-radius: var(--ss-r-sm);
border: 1px solid transparent;
padding: 10px 20px;
font-size: 14.5px;
transition: filter .15s, box-shadow .15s, background .15s, color .15s;
}
.btn-lg { padding: 14px 28px; font-size: 15.5px; border-radius: var(--ss-r); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-primary {
background: var(--ss-gradient);
border-color: transparent;
color: #fff;
box-shadow: 0 6px 18px rgba(47, 86, 217, .28);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background: var(--ss-gradient);
filter: brightness(1.08);
color: #fff;
box-shadow: 0 8px 22px rgba(47, 86, 217, .34);
}
.btn-success {
background: var(--ss-ok);
border-color: transparent;
color: #fff;
box-shadow: 0 6px 16px rgba(21, 163, 74, .24);
}
.btn-success:hover, .btn-success:focus { background: #128a3f; color: #fff; }
.btn-danger { background: var(--ss-bad); border-color: transparent; color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #c01d1d; color: #fff; }
.btn-default {
background: var(--ss-surface);
border-color: var(--ss-border);
color: var(--ss-ink-soft);
}
.btn-default:hover, .btn-default:focus { background: var(--ss-bg-sunk); border-color: var(--ss-border); color: var(--ss-ink); }
/* Light outline button for use on the gradient hero. */
.btn-outline-light {
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .34);
color: #fff;
backdrop-filter: blur(2px);
}
.btn-outline-light:hover, .btn-outline-light:focus { background: rgba(255, 255, 255, .22); color: #fff; }
/* --------------------------------------------- 5 Page headers + hero */
.page-header {
border-bottom: 0;
margin: 0;
padding: 0;
}
.page-header p.lead { margin: 0; }
/* Legacy subtitle pattern used under a section heading on 23 templates:
* `...
`. carries its own
* bold weight and ~18px size, and Bootstrap's only shrinks
* RELATIVE to that (85%) rather than to body text -- so the subtitle
* rendered bold and heading-sized instead of as a quiet caption. Harmless
* while the copy here was one short line; once it became a full sentence
* or two, the same text wrapped across several bold, oversized lines and
* visually shouted over the rest of the page. Reset in place rather than
* touching 23 files' markup.
*
* The size/weight fix above still left the CSS keyword "grey" (#808080,
* from that same inline `style="color:grey;"`) as the actual text colour --
* an inline style beats a plain external rule regardless of what this
* stylesheet says, so the paragraph kept reading as flat mid-grey rather
* than the theme's own muted tone, still visually loud against the page
* for a full sentence rather than a short caption. `!important` is the
* only way to reach past an inline style without editing all 23 files.
*
* Targets every h4 > small site-wide rather than only the ones directly
* after an h2 -- checked first: every h4 > small in this codebase (public
* and admin) is this same subtitle/caption role, none are something else
* this would wrongly restyle. */
h4 > small {
display: block;
font-weight: 400;
font-size: 15px;
line-height: 1.65;
max-width: 640px;
margin: 0 auto;
color: var(--ss-muted) !important;
}
.text-center h4 > small { margin-top: 4px; }
.ss-page-header {
background: var(--ss-gradient);
color: #fff;
padding: 52px 0 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.ss-page-header::after {
/* soft radial lift so the flat gradient does not read as a plain band */
content: "";
position: absolute;
inset: 0;
background: radial-gradient(60% 120% at 50% -20%, rgba(255, 255, 255, .22), transparent 70%);
pointer-events: none;
}
.ss-page-header h2 {
color: #fff;
font-size: 34px;
font-weight: 800;
margin: 0 0 10px;
position: relative;
}
.ss-page-header p {
color: rgba(255, 255, 255, .82);
font-size: 16px;
max-width: 620px;
margin: 0 auto;
position: relative;
}
.ss-hero {
background: var(--ss-gradient);
color: #fff;
position: relative;
overflow: hidden;
padding: 64px 0 0;
}
.ss-hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 2;
}
.ss-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(255, 255, 255, .15);
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 30px;
padding: 7px 15px;
font-size: 13px;
font-weight: 600;
margin-bottom: 22px;
}
.ss-hero-content h1 {
color: #fff;
font-size: 52px;
line-height: 1.08;
font-weight: 800;
margin: 0 0 18px;
letter-spacing: -.025em;
}
.ss-hero-highlight { color: var(--ss-accent); }
.ss-hero-sub {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, .84);
max-width: 480px;
margin: 0 0 28px;
}
.ss-hero-cta { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.ss-hero-cta .btn-accent {
background: var(--ss-accent);
color: var(--ss-accent-ink);
border: 0;
box-shadow: 0 10px 26px rgba(255, 190, 40, .34);
}
.ss-hero-cta .btn-accent:hover, .ss-hero-cta .btn-accent:focus { filter: brightness(1.06); color: var(--ss-accent-ink); }
.ss-hero-trust {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 26px;
font-size: 13.5px;
color: rgba(255, 255, 255, .78);
}
.ss-hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.ss-hero-trust i { color: var(--ss-accent); }
.ss-dot-online {
width: 8px;
height: 8px;
border-radius: 50%;
background: #5af5a8;
box-shadow: 0 0 9px #5af5a8;
display: inline-block;
}
.ss-hero-visual { position: relative; }
.ss-hero-visual svg { width: 100%; height: auto; display: block; }
/* Wave that hands the hero off to the page ground. */
.ss-wave { display: block; width: 100%; height: auto; margin-bottom: -1px; position: relative; z-index: 3; }
/* ---------------------------------------------------------- 6 Cards */
/* Equal-height cards without percentage heights.
*
* This carried `height: 100%`, which needs an ancestor with a definite
* height to resolve against. The Bootstrap 3 markup here is a plain block
* .row > .col-sm-3, so there was none, and the percentage chained up to
* html{min-height:100%} instead -- every card rendered a full viewport tall
* with ~650px of empty white below the button. Reported from a real phone,
* then measured: 146px of content in an 800px card.
*
* The row is made a flex container instead, so the columns become flex items
* that stretch to the tallest of the row and the card finally has a real
* height to fill. :has() is the hook because the markup has no class on that
* row; where it is unsupported the cards simply size to their content, which
* is the correct fallback rather than the bug. */
/* Only from 768px up. Below that a col-sm-* carries no width of its own, so
* as flex items the columns shrank to fit their content -- measured at 375px
* the cards came out anywhere between 232px and 330px wide instead of all
* being full width. That is the uneven mobile grid that was reported. Under
* 768px the row stays a normal block and Bootstrap stacks the columns itself. */
/* The service grid is declared col-sm-3, i.e. four across from 768px up.
* Measured at 768px that gives 158px-wide cards -- too narrow for a heading
* plus a description, and the text wrapping made their heights range from
* 347px to 412px. Two across on tablet, four only once there is room. */
@media (min-width: 768px) and (max-width: 991px) {
.row:has(> [class*="col-"] > .ss-service-card) > [class*="col-"] { width: 50%; }
}
@media (min-width: 768px) {
.row:has(> [class*="col-"] > .ss-service-card) { display: flex; flex-wrap: wrap; }
/* That row also holds the section heading and a
, which are not
* columns. As flex items they got pulled onto the first line beside the
* first two cards -- caught by measuring child positions, not by reading
* the markup. Anything that is not a column takes a full line of its own. */
.row:has(> [class*="col-"] > .ss-service-card) > :not([class*="col-"]) { flex: 0 0 100%; }
}
.ss-service-card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: 26px 24px;
height: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform .18s, box-shadow .18s, border-color .18s;
}
/* height:100% only where an ancestor actually has a definite height -- i.e.
* inside the flex row above. This class is reused outside that row (the
* create-account form is one), and there the percentage chained up to the
* viewport again: an 800px card holding 417px of form. Measured, not
* guessed. */
@media (min-width: 768px) {
.row:has(> [class*="col-"] > .ss-service-card) .ss-service-card { height: 100%; }
}
/* Selection cards -- the ones whose whole job is "pick this one" -- centre
* their contents. Left-aligned, the icon, the title, the tag and the button
* each started at a different optical point and the column read as ragged.
* Opt-in rather than a default, because this same class also wraps the
* create-account form and prose blocks, and centring a form is a real
* usability regression: labels and inputs need one shared left edge. */
.ss-service-card.is-centered {
align-items: center;
text-align: center;
}
.ss-service-card.is-centered .ss-service-icon { margin-left: auto; margin-right: auto; }
/* The call to action sits on the card's baseline so buttons line up across a
row even when one card carries an extra line of text. */
.ss-service-card > .btn { margin-top: auto; width: 100%; }
.ss-service-card:hover {
transform: translateY(-3px);
box-shadow: var(--ss-lift-2);
border-color: #d7def4;
}
.ss-service-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
background: var(--ss-gradient);
/* The glyphs inside are either inline SVG using fill="currentColor" or a
* Font Awesome , and both take their colour from here. Without this they
* inherited the card's ink (#131b3a) and rendered dark navy on a dark navy
* box -- effectively invisible, which is what was reported. */
color: #fff;
flex: 0 0 52px;
}
.ss-service-icon svg { width: 25px; height: 25px; display: block; }
/* Font Awesome glyphs are text, so they were rendering at the card's 15px
* body size while the inline SVGs next to them were 25px -- the icons looked
* inconsistent from card to card. Measured widths ranged 8px to 25px. Pinning
* the font-size and line-height puts every glyph on the same optical size and
* removes the line-height offset that pushed them off centre. */
.ss-service-icon i {
font-size: 23px;
line-height: 1;
width: auto;
color: inherit;
}
/* Country flags carry their own colours and fight a brand-gradient tile, so
* they get a neutral one and fill it as a rounded square instead of a circle
* floating inside a square. */
.ss-service-icon.is-flag {
background: var(--ss-bg-sunk);
border: 1px solid var(--ss-border);
padding: 0;
overflow: hidden;
}
.ss-service-icon.is-flag img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
display: block;
}
.ss-service-card h3 {
font-size: 17px;
font-weight: 700;
margin: 0 0 8px;
}
.ss-service-card p { color: var(--ss-muted); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.ss-service-spec {
color: var(--ss-muted);
font-size: 13.5px;
line-height: 1.5;
margin: 0 0 12px;
}
.ss-service-tag {
display: inline-block;
background: var(--ss-brand-tint);
color: var(--ss-brand);
font-size: 11.5px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
margin: 0 5px 5px 0;
}
.ss-service-card .ss-service-extra { color: var(--ss-muted-soft); font-size: 13px; }
/* Server cards -- the densest surface on the site: an 8-row spec table
* inside a card, repeated per server. Spacing here is tuned for scanning,
* not for looking roomy. */
.ss-server-card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: 22px;
margin-bottom: 26px;
box-shadow: var(--ss-lift-1);
transition: transform .18s, box-shadow .18s;
}
.ss-server-card:hover { transform: translateY(-3px); box-shadow: var(--ss-lift-2); }
/* Server Status page -- one card per physical VPS, checked live on page
load (see app/pages/server-status.php). Grid rather than the old table
because a table cell has nowhere to put a traffic breakdown without
either truncating it or blowing out the row height. */
.ss-status-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.ss-status-card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: 20px;
box-shadow: var(--ss-lift-1);
}
.ss-status-card-top { display: flex; align-items: center; gap: 12px; }
.ss-status-card-top > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.ss-status-card-top h3 { overflow-wrap: anywhere; }
.ss-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
flex: 0 0 auto;
}
.ss-status-pill.is-online { background: var(--ss-ok-tint); color: var(--ss-ok); }
.ss-status-pill.is-offline { background: var(--ss-bad-tint); color: var(--ss-bad); }
.ss-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
display: inline-block;
}
.ss-status-pill.is-online .ss-status-dot { box-shadow: 0 0 6px currentColor; }
/* Two of these per card -- "Today" and "All Time" -- each with its own
small caption so the two numbers are never mistaken for one another. */
.ss-status-traffic-group {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--ss-border-soft);
}
.ss-status-traffic-group-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ss-muted-soft);
margin-bottom: 8px;
}
.ss-status-traffic {
display: flex;
gap: 20px;
}
.ss-status-traffic-item { display: flex; align-items: center; gap: 10px; }
.ss-status-traffic-item i {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--ss-brand-tint);
color: var(--ss-brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex: 0 0 30px;
}
.ss-status-traffic-num { font-family: var(--ss-font-num); font-weight: 800; font-size: 15px; color: var(--ss-ink); }
.ss-status-traffic-label { font-size: 12px; color: var(--ss-muted); }
.ss-status-note {
margin-top: 12px;
font-size: 12.5px;
line-height: 1.6;
color: var(--ss-muted);
}
.ss-server-card h2 {
font-size: 19px;
font-weight: 800;
margin: 0 0 6px;
color: var(--ss-ink);
}
.ss-server-card .custab,
.ss-server-card .table { margin-bottom: 14px; }
.ss-server-card .custab td,
.ss-server-card .table > tbody > tr > td {
padding: 7px 4px;
font-size: 13.5px;
border-top: 1px solid var(--ss-border-soft);
vertical-align: middle;
}
.ss-server-card .custab tr:first-child td,
.ss-server-card .table > tbody > tr:first-child > td { border-top: 0; }
.ss-server-card .custab td:first-child,
.ss-server-card .table > tbody > tr > td:first-child { color: var(--ss-muted); width: 46%; }
.ss-server-card .custab td b,
.ss-server-card .table b { font-weight: 600; color: var(--ss-muted); }
.ss-server-card .table > tbody > tr:nth-of-type(odd) { background: transparent; }
.ss-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ss-stat-card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: 22px;
box-shadow: var(--ss-lift-1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ss-stat-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 13px;
}
.ss-stat-icon svg { width: 21px; height: 21px; }
/* The statistics page reuses the service tiles so each protocol keeps its own
colour there too -- but a stat card is a smaller surface than a service
card, so the 52px tile is stepped down rather than reused at full size. */
.ss-stat-card .ss-service-icon {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 13px;
margin-bottom: 12px;
}
.ss-stat-card .ss-service-icon svg { width: 22px; height: 22px; }
.ss-stat-card .ss-service-icon i { font-size: 20px; }
.ss-stat-number {
font-family: var(--ss-font-dis);
font-size: 23px;
font-weight: 800;
color: var(--ss-ink);
line-height: 1.2;
}
.ss-stat-label { font-size: 13.5px; color: var(--ss-muted); font-weight: 500; }
/* Bootstrap 3's float-based .row/.col-lg-4 grid doesn't equalize row
* height -- when one card's copy runs longer than its row-mates (Indonesian
* text is consistently longer than the English here), that card grows
* taller and the next row's floats no longer line up under the right
* columns, producing the "acak-acakan" misaligned layout reported live
* only in the Indonesian language. Flexbox keeps every card in a row the
* same height regardless of how much its own text wraps. */
.features-list .row {
display: flex;
flex-wrap: wrap;
}
.features-list .row > [class*="col-"] {
display: flex;
}
.feature-block.bootdey {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: 24px;
width: 100%;
transition: transform .18s, box-shadow .18s;
}
.feature-block.bootdey:hover { transform: translateY(-3px); box-shadow: var(--ss-lift-2); }
.feature-block .ico { color: var(--ss-brand); font-size: 26px; margin-bottom: 12px; }
.feature-block .name { font-family: var(--ss-font-dis); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.feature-block .text { color: var(--ss-muted); font-size: 14px; line-height: 1.6; }
.panel.panel-primary {
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
box-shadow: var(--ss-lift-1);
overflow: hidden;
}
.panel.panel-primary:hover { box-shadow: var(--ss-lift-2); }
.panel.panel-primary > .panel-heading {
background: var(--ss-gradient);
border: 0;
padding: 16px 20px;
}
.panel.panel-primary > .panel-heading .panel-title {
font-family: var(--ss-font-dis);
font-weight: 700;
font-size: 16px;
color: #fff;
}
.panel.panel-primary .well {
background: var(--ss-bg-sunk);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r);
box-shadow: none;
}
.panel.panel-primary .well img { max-width: 100%; height: auto; }
/* Numbered "how it works" steps -- numbering is real sequence here. */
.ss-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ss-step { text-align: center; padding: 0 10px; }
.ss-step-num {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--ss-brand-tint);
color: var(--ss-brand);
font-family: var(--ss-font-dis);
font-weight: 800;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
.ss-step h4 { font-size: 16px; font-weight: 700; margin: 0 0 7px; }
.ss-step p { color: var(--ss-muted); font-size: 14px; line-height: 1.6; margin: 0; }
/* ---------------------------------------------------------- 7 Tables */
.table > thead > tr > th {
background: var(--ss-bg-sunk);
border-bottom: 1px solid var(--ss-border);
color: var(--ss-ink-soft);
font-family: var(--ss-font-dis);
font-weight: 700;
font-size: 12.5px;
letter-spacing: .04em;
text-transform: uppercase;
padding: 12px;
}
.table > tbody > tr > td { border-top: 1px solid var(--ss-border-soft); padding: 11px 12px; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--ss-bg-sunk); }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--ss-border); }
/* ----------------------------------------------------------- 8 Forms */
.form-control {
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-sm);
box-shadow: none;
height: auto;
padding: 11px 14px;
font-size: 14.5px;
color: var(--ss-ink);
background: var(--ss-surface);
transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
border-color: var(--ss-brand);
box-shadow: 0 0 0 3px rgba(47, 86, 217, .14);
}
.form-control::placeholder { color: var(--ss-muted-soft); }
select.form-control { height: auto; padding-right: 34px; }
label { font-weight: 600; font-size: 14px; color: var(--ss-ink-soft); margin-bottom: 6px; }
.input-group-addon {
background: var(--ss-bg-sunk);
border-color: var(--ss-border);
color: var(--ss-muted);
font-weight: 600;
border-radius: var(--ss-r-sm) 0 0 var(--ss-r-sm);
}
/* ------------------------------------------------- 9 Alerts + labels */
.alert {
border: 1px solid transparent;
border-radius: var(--ss-r);
padding: 15px 18px;
font-size: 14.5px;
/* Account results land in an alert, and they contain single unbroken
* tokens hundreds of characters long -- a vmess:// link is one base64
* blob with no spaces in it. The templates set word-wrap:break-word,
* which browsers do not apply consistently to a token that long, so the
* link ran off the side and gave the whole page a horizontal scrollbar.
* overflow-wrap:anywhere is the property that actually breaks it. */
overflow-wrap: anywhere;
word-break: break-word;
}
.alert strong, .alert a, .alert p { overflow-wrap: anywhere; }
.alert-success { background: var(--ss-ok-tint); border-color: #bfe9d0; color: #0d5c2c; }
.alert-danger { background: var(--ss-bad-tint); border-color: #f6c9c9; color: #8f1616; }
.alert-info { background: var(--ss-info-tint); border-color: #c9d8fb; color: #17368f; }
.alert-warning { background: var(--ss-warn-tint); border-color: #f5dcae; color: #7c4708; }
/* Bootstrap-material sets near-white link colours here on the assumption of a
* saturated alert background; these tints are pale, so links must be re-inked
* or they vanish. This was a real reported bug (an invisible download link). */
.alert.alert-success a, .alert.alert-success .alert-link { color: #0a4a23; text-decoration: underline; }
.alert.alert-danger a, .alert.alert-danger .alert-link { color: #7a1212; text-decoration: underline; }
.alert.alert-info a, .alert.alert-info .alert-link { color: #142c78; text-decoration: underline; }
.alert.alert-warning a, .alert.alert-warning .alert-link { color: #653a06; text-decoration: underline; }
/* Bootstrap ships .label as display:inline, so its padding does not push the
* line box apart -- once a row of them wraps, the pills sit on top of each
* other. That is what the badge strip on the server pages was doing. Making
* them inline-block gives each pill its own box, and the strip that holds
* them is laid out as a wrapping centred row with real gaps rather than
* whitespace between inline elements. */
.label {
display: inline-block;
font-family: var(--ss-font);
font-weight: 700;
font-size: 11.5px;
padding: 5px 11px;
border-radius: 20px;
letter-spacing: .01em;
line-height: 1.5;
}
p.lead:has(> .label) {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
font-size: 15px !important; /* the template sets 1.3em inline */
margin-top: 0 !important;
margin-bottom: 14px;
}
.label-primary { background: var(--ss-brand-tint); color: var(--ss-brand); }
.label-success { background: var(--ss-ok-tint); color: #0d5c2c; }
.label-warning { background: var(--ss-warn-tint); color: #7c4708; }
.label-danger { background: var(--ss-bad-tint); color: #8f1616; }
.label-info { background: var(--ss-info-tint); color: #17368f; }
/* ---------------------------------------------------------- 10 Footer */
.ss-footer {
background: #101733;
color: #b9c2e0;
padding: 54px 0 0;
margin-top: 70px;
}
.ss-footer-grid {
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap: 32px;
padding-bottom: 42px;
}
.ss-footer-brand h3 {
font-family: var(--ss-font-dis);
color: #fff;
font-size: 20px;
font-weight: 800;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 10px;
}
.ss-footer-brand p { font-size: 14px; line-height: 1.7; color: #8f9ac0; max-width: 300px; margin: 0 0 16px; }
.ss-footer-col h5 {
font-family: var(--ss-font-dis);
color: var(--ss-accent);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin: 0 0 15px;
}
.ss-footer-col a { display: block; color: #c3cbe6; font-size: 14px; padding: 5px 0; }
.ss-footer-col a:hover { color: #fff; }
.ss-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .09);
padding: 20px 0;
font-size: 13.5px;
color: #8f9ac0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.ss-footer-bottom a { color: #c3cbe6; }
.ss-footer-bottom a:hover { color: #fff; }
.ss-social { display: flex; gap: 9px; }
.ss-social a {
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(255, 255, 255, .07);
display: flex;
align-items: center;
justify-content: center;
color: #c3cbe6;
}
.ss-social a:hover { background: var(--ss-brand); color: #fff; }
/* -------------------------------------------------- 11 Section utility */
.ss-section { padding: 66px 0; }
.ss-section-sunk { background: var(--ss-bg-sunk); }
.ss-section-head { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.ss-eyebrow {
font-family: var(--ss-font-dis);
font-size: 12px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ss-brand-deep);
margin-bottom: 11px;
}
.ss-section-head h2 { font-size: 32px; font-weight: 800; margin: 0 0 12px; }
.ss-section-head p { color: var(--ss-muted); font-size: 16px; margin: 0; }
.ss-prose { color: var(--ss-ink-soft); font-size: 15.5px; line-height: 1.75; }
.ss-prose h3 { font-size: 20px; margin: 30px 0 10px; }
.ss-prose h4 { font-size: 16.5px; margin: 24px 0 8px; }
.ss-prose p { margin: 0 0 14px; max-width: 68ch; }
.ss-prose ul { padding-left: 20px; margin: 0 0 16px; }
.ss-prose li { margin-bottom: 7px; max-width: 66ch; }
.ss-note {
background: var(--ss-brand-tint);
border: 1px solid #d5deff;
border-radius: var(--ss-r);
padding: 16px 18px;
font-size: 14.5px;
color: var(--ss-ink-soft);
}
/* ------------------------------------------- 11b Service information */
/* Every selection and create page used to end at its own control -- a grid of
* countries, a table of ports, a form -- and nothing on the page said what the
* protocol actually is or what to open the account with. This block is
* rendered once by the router (ssPageInfo in app/function.php) rather than
* pasted into 60 templates, so the copy stays in one place and cannot drift
* between the -negara, -servers and create- pages of the same service. */
.ss-info {
background: var(--ss-bg-sunk);
border-top: 1px solid var(--ss-border);
padding: 48px 0;
margin-top: 54px;
}
.ss-info-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 34px;
align-items: start;
}
.ss-info-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.ss-info-head .ss-service-icon { margin-bottom: 0; }
/* The band already carries its own top margin; the footer's would stack on
top of it and leave ~124px of empty ground between the two. */
.ss-info ~ .ss-footer { margin-top: 0; }
.ss-info-head h2 { font-size: 22px; margin: 0; }
.ss-info-lead { color: var(--ss-ink-soft); font-size: 15px; line-height: 1.75; margin: 0; max-width: 62ch; }
.ss-info-points {
list-style: none;
margin: 0;
padding: 0;
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
box-shadow: var(--ss-lift-1);
overflow: hidden;
}
.ss-info-points li {
display: flex;
gap: 12px;
padding: 14px 18px;
font-size: 14px;
line-height: 1.6;
color: var(--ss-ink-soft);
border-top: 1px solid var(--ss-border-soft);
}
.ss-info-points li:first-child { border-top: 0; }
.ss-info-points li i { color: var(--ss-brand); margin-top: 4px; flex: 0 0 14px; }
.ss-info-points b { color: var(--ss-ink); font-weight: 700; }
/* The account panel that appears after a successful create. The reply used to
* be the credentials and nothing else -- no indication of which app opens
* them or that they are shown exactly once. */
.ss-acct-guide {
margin-top: 18px;
border-top: 1px dashed rgba(19, 27, 58, .18);
padding-top: 14px;
text-align: left;
}
.ss-acct-guide h4 {
font-size: 14px;
font-weight: 800;
margin: 0 0 8px;
letter-spacing: .01em;
}
.ss-acct-guide ul { list-style: none; margin: 0; padding: 0; }
.ss-acct-guide li {
position: relative;
padding: 0 0 0 19px;
margin-bottom: 7px;
font-size: 13.5px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.ss-acct-guide li::before {
content: "";
position: absolute;
left: 3px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: .45;
}
.ss-acct-warn {
margin-top: 12px;
font-size: 13px;
line-height: 1.6;
font-weight: 600;
}
/* --------------------------------------------------------- 12 Responsive */
@media (max-width: 991px) {
.ss-hero-grid { grid-template-columns: 1fr; gap: 30px; }
.ss-hero-visual { max-width: 460px; margin: 0 auto; }
.ss-hero-content h1 { font-size: 42px; }
.ss-stats-row { grid-template-columns: repeat(2, 1fr); }
.ss-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
.ss-info-grid { grid-template-columns: 1fr; gap: 24px; }
.ss-steps { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 767px) {
body { font-size: 14.5px; }
/* The bar was reported as taking too much of a phone screen. Measured at
* 375px it stood 66px tall closed -- the toggle alone was 46px plus 20px of
* margin, so the button, not the brand, was setting the height -- and the
* open drawer ran 415px, past the fold. Every dimension below is trimmed to
* the smallest that keeps the toggle at the 44px minimum touch target. */
.navbar-default { min-height: 54px; }
.navbar-default .navbar-brand { font-size: 16.5px; padding: 9px 0; gap: 8px; }
.navbar-default .navbar-nav { margin: 4px -15px; }
.navbar-default .navbar-nav > li > a { padding: 9px 15px; font-size: 14px; height: auto; }
/* The drawer scrolls inside itself rather than pushing the page down. */
.navbar-default .navbar-collapse { max-height: calc(100vh - 118px); overflow-y: auto; }
.navbar-default .navbar-nav .open .dropdown-menu {
box-shadow: none;
border: 0;
background: var(--ss-bg-sunk);
border-radius: var(--ss-r-sm);
margin: 4px 10px 8px;
padding: 6px;
}
.navbar-default .navbar-nav > li.ss-nav-cta > a { margin: 8px 15px; height: 40px; justify-content: center; }
.mega-menu-panel > li { padding: 0; }
.mega-menu-col + .mega-menu-col { margin-top: 10px; }
.mega-menu-heading { padding: 0 12px; margin-top: 10px; }
.ss-lang-switch { margin: 8px 15px 10px; }
.ss-hero { padding-top: 40px; }
.ss-hero-content h1 { font-size: 33px; }
.ss-hero-sub { font-size: 15.5px; }
.ss-hero-cta { flex-direction: column; align-items: stretch; }
.ss-hero-cta .btn { width: 100%; text-align: center; }
.ss-hero-trust { gap: 12px; font-size: 12.5px; }
.ss-page-header { padding: 36px 0 42px; }
.ss-page-header h2 { font-size: 25px; }
.ss-page-header p { font-size: 14.5px; }
.ss-section { padding: 44px 0; }
.ss-section-head { margin-bottom: 30px; }
.ss-section-head h2 { font-size: 25px; }
.ss-section-head p { font-size: 15px; }
.ss-stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ss-stat-card { padding: 16px; }
.ss-stat-number { font-size: 19px; }
.ss-stat-label { font-size: 12.5px; }
/* Stacked cards read as a list, so an even height matters more than it does
in a grid -- a one-line description next to a two-line one otherwise looks
like a mistake. */
.ss-service-card { min-height: 300px; }
.ss-server-card { padding: 18px; }
.ss-server-card .custab td,
.ss-server-card .table > tbody > tr > td { font-size: 13px; padding: 6px 2px; }
.ss-info { padding: 34px 0; margin-top: 38px; }
.ss-info-head h2 { font-size: 19px; }
.ss-footer { padding-top: 40px; margin-top: 48px; }
.ss-footer-grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 30px; }
.ss-footer-bottom { justify-content: center; text-align: center; }
.btn-lg { padding: 13px 22px; font-size: 15px; }
}
@media (max-width: 420px) {
.ss-stats-row { grid-template-columns: 1fr; }
.ss-hero-content h1 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
.ss-service-card:hover, .ss-server-card:hover,
.feature-block.bootdey:hover { transform: none; }
}
/* ---------------------------------------------------------------------
* Top-of-page loading bar. Present on every page (markup lives once in
* index.php, right after ) -- animates on load, and again briefly
* on every same-origin link click (see app.min.js) so a visitor gets
* instant feedback the moment they click, even before the next page has
* started arriving from the server.
* --------------------------------------------------------------------- */
.ss-topbar {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: var(--ss-brand);
box-shadow: 0 0 8px rgba(47, 86, 217, .5);
border-radius: 0 2px 2px 0;
z-index: 10001;
opacity: 1;
pointer-events: none;
}
.ss-topbar.is-loading { animation: ssTopbarGrow 2.2s cubic-bezier(.4, 0, .2, 1) forwards; }
.ss-topbar.is-done { width: 100% !important; animation: none; opacity: 0; transition: opacity .3s ease; }
@keyframes ssTopbarGrow {
0% { width: 0%; }
70% { width: 78%; }
100% { width: 92%; }
}
/* ---------------------------------------------------------------------
* "Preparing your connection" overlay -- shown only while a create-account
* request is actually in flight (real network wait: opening an SSH
* session and running the provisioning command on the target server), not
* as decoration. Covers all 15 create-*.php templates via one shared
* element (see index.php) and app.min.js's existing createnow handler.
* --------------------------------------------------------------------- */
.ss-tunnel-overlay {
position: fixed;
inset: 0;
z-index: 10002;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 22px;
background: var(--ss-gradient);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.ss-tunnel-overlay.is-visible {
opacity: 1;
visibility: visible;
transition: opacity .2s ease;
}
.ss-tunnel-badge {
position: relative;
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.ss-tunnel-ripple {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--ss-accent);
opacity: 0;
}
.ss-tunnel-overlay.is-visible .ss-tunnel-ripple { animation: ssTunnelRipple 2.1s cubic-bezier(.2, .6, .35, 1) infinite; }
.ss-tunnel-overlay.is-visible .ss-tunnel-ripple.d2 { animation-delay: .7s; }
.ss-tunnel-overlay.is-visible .ss-tunnel-ripple.d3 { animation-delay: 1.4s; }
@keyframes ssTunnelRipple {
0% { transform: scale(.4); opacity: 0; }
30% { opacity: .55; }
100% { transform: scale(1.15); opacity: 0; }
}
.ss-tunnel-core {
position: relative;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .25);
display: flex;
align-items: center;
justify-content: center;
}
.ss-tunnel-core svg { width: 22px; height: 22px; }
.ss-tunnel-dash {
stroke: var(--ss-accent);
stroke-dasharray: 42;
stroke-dashoffset: 42;
}
.ss-tunnel-overlay.is-visible .ss-tunnel-dash {
animation: ssTunnelDraw 1.4s ease forwards, ssTunnelHold 2.4s 1.4s ease-in-out infinite;
}
@keyframes ssTunnelDraw { to { stroke-dashoffset: 0; } }
@keyframes ssTunnelHold { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ss-tunnel-label {
font-family: var(--ss-font-dis);
font-weight: 600;
font-size: 14px;
letter-spacing: .02em;
color: rgba(255, 255, 255, .82);
}