/* ========================================================================== SCALE — PUBLIC WEBSITE HEADER · Liquid Glass The ONE header for every public page: Homepage (EN/AR), Login, Signup, Reset Password, Contact Sales, Pricing, Checkout, Docs and 404. The Dashboard does NOT use it — the app has its own shell (.scui-* / .s-header), which this file must never reach. Markup comes from Scale_AI_Landing::site_header_html(); this file is the only copy of the styles. Change it here and every public page moves together — that is the whole point. ---- The material (1.22.0) ------------------------------------------------- The header used to be a solid white bar with a bottom border that turned frosted on scroll. It is now a floating capsule of translucent material: .sh-header is an invisible sticky frame that only reserves space, and .sh-header__in is the surface. Three layers make it read as liquid glass rather than a frosted card: surface a gradient whose alpha VARIES down the face, so the page shows through the lower half more than the upper (a lens has depth); ::before the internal light — an off-centre specular bloom, one narrow sweep across the body, and a warm brand kiss where the light leaves the far side. Painted above the surface, below the logo and nav (z-index:-1 inside the isolated stacking context); ::after the rim — a 1px hairline drawn with a gradient and a mask so it is bright where light enters, all but gone along the sides. A flat white border is exactly the thing this is not. Restraint is the brief: blur stays low (the backdrop should be recognisable through the glass, not erased), saturation carries the optical work, and the shadows are wide and shallow. ========================================================================== */ /* ---- Tokens --------------------------------------------------------------- Declared on the two header roots and NOT on :root, because this stylesheet is also enqueued on pages that render the app shell — the header owns every name it introduces and leaks nothing. --sh-h is the box the header occupies in the page (gap + capsule + gap). It is deliberately IDENTICAL to the old solid bar's height, 77px dropping to 59px on mobile, so every offset pinned to it elsewhere still lands: the docs bar (.sd-bar, sticky at 77px / 59px) and its rails (132px) in scale-docs.css. Change --sh-h and you must change those with it. The side gaps are split the same way for the same reason: --sh-inset (frame) + --sh-pad (capsule) sums to the content inset the design has always used — 64px, 40px at 1100, 20px at 768 — so the logo does not move a pixel. */ .sh-header, .sh-mobilenav{ --sh-h:77px; /* occupied height = gap + pill + gap */ --sh-gap:11px; /* the float: page edge → capsule */ --sh-pill:55px; /* capsule height (11 + 55 + 11 = 77) */ --sh-inset:24px; /* frame side padding */ --sh-pad:40px; /* capsule side padding (24 + 40 = 64) */ --sh-r:999px; /* fully round ends — the bubble read */ } /* ---- Header frame --------------------------------------------------------- */ /* Sticky, not fixed: the frame keeps reserving its own height, so no public page needs a compensating offset and content scrolls BEHIND the capsule — which is what gives the material something to refract in the first place. */ .sh-header{ position:sticky; top:0; z-index:60; background:transparent; border:0; padding:var(--sh-gap) var(--sh-inset); } /* The gaps above and below the capsule are open page now, so content travels through them. A near-invisible veil across the frame dissolves whatever passes instead of letting it slide out from under a hard edge. It paints behind the capsule (see the z-index on .sh-header__in) and only once the page has scrolled — at the top there is nothing to dissolve. */ .sh-header::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease; background:linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.15) 46%, rgba(255,255,255,0) 68%); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .sh-header.is-scrolled::before{opacity:1} /* ---- The capsule (the material) ------------------------------------------ */ .sh-header__in{ position:relative; z-index:1; /* above the frame's veil */ isolation:isolate; /* keeps ::before's z-index:-1 inside the capsule */ max-width:calc(1440px - var(--sh-inset) * 2); margin:0 auto; min-height:var(--sh-pill); display:flex; align-items:center; gap:32px; padding:0 var(--sh-pad); border-radius:var(--sh-r); /* Variable transparency: thicker where the light lands, thinning toward the lower edge, then a faint lift at the very bottom — the light that collects along the far rim of a bubble. The crown is white and the body cools to a pale steel, which is what lets the capsule read on a white page: piling more WHITE onto white cannot, no matter how the alpha is tuned, so the material is tinted instead. Over colour the same tint just reads as the faint coolness real glass has. This is the resting surface — it is only ever seen over the top of a page, which on every public page is white or near it, so it can afford to be the thinnest state. */ background:linear-gradient(177deg, rgba(255,255,255,.66) 0%, rgba(248,251,255,.50) 40%, rgba(231,238,248,.44) 74%, rgba(241,246,253,.52) 100%); /* Low blur so the backdrop stays legible through the glass; saturation does the optical work and the hair of darkening gives the lens its weight. */ -webkit-backdrop-filter:blur(8px) saturate(185%) brightness(.975); backdrop-filter:blur(8px) saturate(185%) brightness(.975); box-shadow: /* A half-pixel outer edge. On a white page the surface is white on white, so without this the capsule has nothing to draw its own outline with — and it is half a pixel of navy at 6%, which is an edge, not a border. */ 0 0 0 .5px rgba(14,20,36,.06), /* ambient depth: wide, shallow, low-contrast — never one hard shadow */ 0 1px 2px rgba(14,20,36,.035), 0 10px 22px -12px rgba(14,20,36,.11), 0 26px 50px -30px rgba(14,20,36,.16), /* the lens: bright along the top inner edge, thinner underneath */ inset 0 1px 1px rgba(255,255,255,.62), inset 0 -1px 1px rgba(255,255,255,.28), /* optical thickness — the material shades itself toward its base */ inset 0 -10px 24px -16px rgba(14,20,36,.07); transition:background .3s ease,box-shadow .35s ease, -webkit-backdrop-filter .3s ease,backdrop-filter .3s ease; } /* Internal light. Above the surface, below the content. */ .sh-header__in::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background: /* specular bloom, off-centre so the material looks poured, not printed */ radial-gradient(140% 190% at 14% -55%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 60%), /* the warm brand kiss where the light exits the far side */ radial-gradient(90% 160% at 92% 150%,rgba(196,42,99,.055) 0%,rgba(196,42,99,0) 65%), /* one narrow sweep across the body: the highlight that makes glass look curved instead of flat */ linear-gradient(100deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.20) 44%, rgba(255,255,255,0) 58%); } /* The rim. A gradient clipped to a 1px ring by the two-layer mask, so the hairline varies around the capsule the way light does on a curved edge. It carries BOTH a white and a navy component on purpose: the white draws the edge when the backdrop is dark, the navy draws it when the backdrop is the white page, and neither is ever strong enough to read as a border. */ .sh-header__in::after{ content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(152deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.34) 20%, rgba(14,20,36,.11) 44%, rgba(196,42,99,.11) 60%, rgba(14,20,36,.09) 74%, rgba(255,255,255,.42) 86%, rgba(255,255,255,.88) 100%); -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; } /* Scrolled: the material thickens because there is real content behind it now, and some of it is dark — the alpha floor here is what keeps the steel nav labels legible when a navy section passes under the capsule. Geometry never changes: the reserved height is load-bearing for the docs bar, so only the surface responds. */ .sh-header.is-scrolled .sh-header__in{ background:linear-gradient(177deg, rgba(255,255,255,.82) 0%, rgba(250,252,255,.68) 42%, rgba(235,241,250,.62) 76%, rgba(244,248,254,.70) 100%); -webkit-backdrop-filter:blur(12px) saturate(195%) brightness(.975); backdrop-filter:blur(12px) saturate(195%) brightness(.975); box-shadow: 0 0 0 .5px rgba(14,20,36,.07), 0 1px 2px rgba(14,20,36,.045), 0 12px 26px -12px rgba(14,20,36,.14), 0 30px 60px -32px rgba(14,20,36,.21), inset 0 1px 1px rgba(255,255,255,.70), inset 0 -1px 1px rgba(255,255,255,.32), inset 0 -10px 24px -16px rgba(14,20,36,.08); } /* No backdrop-filter (older Firefox, blur disabled): the surface has to carry itself, so it goes nearly opaque. The rim, the internal light and the shadows are untouched — it still reads as a floating capsule, just a solid one. */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .sh-header__in{ background:linear-gradient(177deg,rgba(255,255,255,.97),rgba(247,249,252,.95)); } .sh-header.is-scrolled .sh-header__in{ background:linear-gradient(177deg,#fff,#F6F8FB); } } /* ---- Contents ------------------------------------------------------------ */ .sh-logo{display:flex;align-items:center;gap:10px} /* The brand PNG is a 1000×1000 canvas whose wordmark occupies x 98–902, y 396–604 (verified against the file). The wrapper crops to that box, which only works while the image renders at the exact height set below — the negative offsets are calculated from that scale. !important is load-bearing: BOTH Elementor's reset.css and the page's own reset ship a plain `img{max-width:100%;height:auto}`. They collapsed the image to the wrapper's width (100px instead of 125px), so the crop window landed on the wrong part of the artwork and the logo came out mangled. */ .sh-logoimg{position:relative;overflow:hidden;flex:none;display:block} .sh-logoimg img{ position:absolute !important; max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; } .sh-logoimg--h{width:116px;height:30px} .sh-logoimg--h img{height:144px !important;top:-57px !important;left:-14px !important} .sh-logoimg--f{width:132px;height:34px} .sh-logoimg--f img{height:164px !important;top:-65px !important;left:-16px !important} .sh-nav{display:flex;gap:26px;font-size:14px;font-weight:500;color:#5A6478} .sh-nav a{color:inherit;transition:color .2s ease} .sh-nav a:hover{color:#0E1424} .sh-header__spacer{flex:1} .sh-header__lang{font-size:13px;font-weight:500;color:#5A6478;cursor:pointer;transition:color .2s ease} .sh-header__lang:hover{color:#0E1424} .sh-header__signin{font-size:14px;font-weight:500;color:#5A6478;cursor:pointer;transition:color .2s ease} .sh-header__signin:hover{color:#0E1424} /* PHP-generated header CTA (.header-cta) → the design's dark button, now capsule-shaped to sit inside the material, with the same shallow top highlight the surface uses so it belongs to it. */ .header-cta{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 17px; border-radius:999px; background:linear-gradient(180deg,#1A2236 0%,#0E1424 62%); color:#fff; font-size:13px; font-weight:600; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px -6px rgba(14,20,36,.45); transition:background .2s ease,box-shadow .2s ease; } .header-cta:hover{ background:linear-gradient(180deg,#243046 0%,#161E30 62%); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -6px rgba(14,20,36,.5); } .header-cta svg{width:14px;height:14px;display:block} [dir="rtl"] .header-cta svg{transform:scaleX(-1)} .sh-burger{ display:none; width:20px;height:20px; border:none;background:none; color:#0E1424;cursor:pointer; padding:0; } .sh-burger .li{width:20px;height:20px} .sh-burger .li svg{width:100%;height:100%;display:block} /* ---- Responsive ---------------------------------------------------------- */ @media (max-width:1100px){ .sh-header, .sh-mobilenav{--sh-inset:16px;--sh-pad:24px} .sh-header__in{gap:24px} .sh-nav{gap:18px} } @media (max-width:900px){ .sh-nav{display:none} .sh-burger{display:inline-flex} } @media (max-width:768px){ /* 8 + 43 + 8 = 59, the mobile bar's height since 1.20.0, and 8 + 12 = the 20px content inset. Nothing below the header shifts. */ .sh-header, .sh-mobilenav{--sh-h:59px;--sh-gap:8px;--sh-pill:43px;--sh-inset:8px;--sh-pad:12px} .sh-header__in{gap:10px} .sh-logo{gap:10px} .sh-logoimg--h{width:100px;height:26px} .sh-logoimg--h img{height:125px !important;top:-49.5px !important;left:-12px !important} .sh-header__lang{display:none} .sh-header__signin{font-size:13px} .header-cta{display:none} } /* ---- Mobile nav overlay -------------------------------------------------- */ /* Behaviour is untouched: still a full-bleed fixed panel that .open toggles, so it still catches every tap while the body is locked. Only the material changed — it now hangs off the capsule as a sheet of the same glass, with the curved top edge and the same rim highlight. top is the reserved header height rather than a hard 59px, so between 769 and 900 — where the burger exists but the header is still 77px tall — the sheet starts BELOW the capsule instead of sliding its white backing behind the glass and washing the material out. */ .sh-mobilenav{ position:fixed; top:var(--sh-h); left:0; right:0; bottom:0; z-index:55; padding:14px 20px 32px; display:none; flex-direction:column; overflow-y:auto; border-radius:26px 26px 0 0; /* Glassiest along the top edge, where it meets the capsule and the material has to look continuous with it, then closing up quickly: below the links the sheet is mostly empty, and page content ghosting through empty space is noise, not depth. */ background:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.96) 22%, rgba(255,255,255,.99) 60%); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 -1px 0 rgba(14,20,36,.04), 0 22px 50px -24px rgba(14,20,36,.18); } .sh-mobilenav.open{display:flex} .sh-mobilenav__list{list-style:none} .sh-mobilenav__list a{ display:block; padding:15px 2px; border-bottom:1px solid rgba(14,20,36,.07); font-size:15px; font-weight:600; color:#0E1424; } .sh-mobilenav__foot{margin-top:24px;display:flex;flex-direction:column;gap:14px;align-items:center} .sh-mobilenav .mobile-nav__cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; border-radius:13px; background:#C42A63; color:#fff; font-size:15px; font-weight:600; box-shadow:0 10px 24px -12px rgba(196,42,99,.45); } .sh-mobilenav .mobile-nav__cta:hover{background:#A82253;color:#fff} .sh-mobilenav__lang{font-size:13px;font-weight:600;color:#5A6478} @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .sh-mobilenav{background:#fff} }