/* * s3.css — the s3eidat design system. * * Replaces nebula.css/liquid.css for the public site. Those carried a WebGL * scene, a custom cursor and an entry loader; all three are gone. What is left * is flat, fast and green. * * The palette is lifted verbatim from the s3eidatGPT iOS app (Theme.swift), so * the website and the phone are literally the same colours. It is deliberately * low-chroma: five shades of near-black green stacked on each other, with ONE * accent (the mint glow) doing all the pointing. That is why it reads as calm — * nothing competes. * * Mobile first. Every media query is min-width; the narrow layout is the * default, not an afterthought. */ :root { /* surfaces — darkest to lightest, each one step up from the last */ --bg: #07120E; --surface: #0A1712; --surface-2: #0E1D17; --surface-3: #12271F; /* ink */ --ink: #E8E8E8; --dim: #8A9691; /* green-tinted grey; plain #777 reads cold here */ --faint: #5C6763; /* the one accent */ --green: #1F9D63; --green-deep: #137A4A; --glow: #22D3A6; --line: rgba(255, 255, 255, .09); --line-soft: rgba(255, 255, 255, .055); --line-hi: rgba(255, 255, 255, .16); --danger: #E5484D; --r-sm: 10px; --r: 14px; --r-lg: 22px; --r-pill: 999px; /* one gravity for everything that moves */ --ease: cubic-bezier(.32, .72, 0, 1); --dur: .34s; --gutter: 20px; --maxw: 1120px; } @media (min-width: 720px) { :root { --gutter: 32px; } } *, *::before, *::after { box-sizing: border-box; } /* The hidden attribute has to beat every display rule below, or a display:flex element with hidden still shows. It did. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* the sticky header must not cover whatever you jumped to */ scroll-padding-top: 88px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `clip`, NOT `hidden`: overflow-x:hidden forces overflow-y to compute to `auto`, which makes its own scroll container — and a sticky header inside a second scroll container detaches from the viewport. `clip` prevents the sideways overflow without creating a scroller. */ overflow-x: clip; } /* The one soft wash that gives the page depth. A gradient, not a canvas — it costs nothing, never drops a frame, and works with JS off. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 520px at 50% -8%, rgba(34, 211, 166, .10), transparent 70%), radial-gradient(700px 460px at 88% 12%, rgba(31, 157, 99, .07), transparent 72%); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } /* ── layout ───────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; } .section { padding: 64px 0; } @media (min-width: 720px) { .section { padding: 96px 0; } } .stack { display: flex; flex-direction: column; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .center { text-align: center; } .muted { color: var(--dim); } /* ── skip link (keyboard + screen readers) ────────────────────────────── */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--green); color: #04140C; padding: 10px 18px; border-radius: 0 0 var(--r) 0; font-weight: 600; } .skip:focus { left: 0; } /* ── header ───────────────────────────────────────────────────────────── */ .hdr { position: sticky; top: 0; z-index: 90; background: rgba(7, 18, 14, .82); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } /* isolate + a blurred layer BEHIND the bar: backdrop-filter on the element that holds the content composites its children through the filter and washes them out. Learned the hard way on the locked-feature dialog. */ .hdr { isolation: isolate; } .hdr::before { content: ''; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); } .hdr.is-stuck { border-bottom-color: var(--line); background: rgba(7, 18, 14, .93); } .hdr-in { display: flex; align-items: center; gap: 12px; height: 62px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; } .brand img { width: 28px; height: 28px; border-radius: 8px; } .brand span { font-size: 16px; } .nav-links { display: none; margin-left: 8px; } @media (min-width: 900px) { .nav-links { display: flex; align-items: center; gap: 2px; } } .nav-links a { padding: 8px 13px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--dim); transition: color .16s, background .16s; } .nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.05); } .nav-links a[aria-current="page"] { color: var(--ink); background: rgba(34,211,166,.12); } .hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* the burger, phones only */ .burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer; } @media (min-width: 900px) { .burger { display: none; } } .burger svg { width: 18px; height: 18px; } /* ── the phone menu ───────────────────────────────────────────────────── */ .sheet { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); } .sheet::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sheet.open { opacity: 1; pointer-events: auto; } .sheet-card { position: relative; z-index: 1; background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 10px 12px calc(18px + env(safe-area-inset-bottom)); transform: translateY(16px); transition: transform .3s var(--ease); max-height: 84vh; overflow-y: auto; } .sheet.open .sheet-card { transform: none; } .sheet-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--line-hi); margin: 6px auto 12px; } .sheet-card a { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: var(--r); font-size: 16px; font-weight: 500; } .sheet-card a:active { background: rgba(255,255,255,.06); } /* ── buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-pill); font: inherit; font-size: 15px; font-weight: 600; border: 1px solid transparent; cursor: pointer; background: var(--green); color: #04140C; transition: transform .16s var(--ease), filter .16s, background .16s, border-color .16s; /* a comfortable tap target on a phone, always */ min-height: 44px; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(.975); } .btn.ghost { background: transparent; border-color: var(--line-hi); color: var(--ink); } .btn.ghost:hover { background: rgba(255,255,255,.05); } .btn.quiet { background: rgba(255,255,255,.06); color: var(--ink); } .btn.sm { padding: 8px 16px; font-size: 14px; min-height: 38px; } /* ── cards ────────────────────────────────────────────────────────────── */ .card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; position: relative; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .card:hover { border-color: var(--line-hi); } .grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 620px) { .grid.two { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid.three { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 620px) { .grid.apps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid.apps { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px){ .grid.apps { grid-template-columns: repeat(4, 1fr); } } /* ── type scale ───────────────────────────────────────────────────────── */ .h1 { font-size: clamp(34px, 8vw, 62px); font-weight: 800; letter-spacing: -.035em; } .h2 { font-size: clamp(26px, 5vw, 40px); font-weight: 750; letter-spacing: -.028em; } .h3 { font-size: clamp(19px, 3vw, 23px); font-weight: 650; letter-spacing: -.02em; } .lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--dim); line-height: 1.65; } .small { font-size: 14px; } .eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--glow); background: rgba(34, 211, 166, .10); border: 1px solid rgba(34, 211, 166, .26); } .grad { background: linear-gradient(105deg, var(--ink) 0%, var(--glow) 55%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── breadcrumbs ──────────────────────────────────────────────────────── */ .crumbs { font-size: 13px; color: var(--faint); padding: 18px 0 0; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .crumbs a { color: var(--dim); } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--faint); } .crumbs [aria-current="page"] { color: var(--ink); } /* ── the floating marks (the BAU hero idea, on the web) ───────────────── */ /* * Two marks drifting slightly out of phase over a soft wash. Out of phase is * the whole trick: identical timing reads as one rigid object being moved, * not as two things floating near each other. */ .floatwrap { position: relative; display: grid; place-items: center; padding: 8px 0; } .floatwash { position: absolute; width: min(320px, 78vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(34,211,166,.26), transparent 68%); filter: blur(26px); animation: s3wash 3.2s var(--ease) infinite alternate; } @keyframes s3wash { from { opacity: .55; } to { opacity: .95; } } .floatrow { position: relative; display: flex; align-items: center; gap: 22px; } .mark { width: 66px; height: 66px; border-radius: 18px; box-shadow: 0 14px 34px -8px rgba(34, 211, 166, .45); animation: s3float 2.9s ease-in-out infinite alternate; } .mark.b { width: 72px; height: 72px; border-radius: 0; animation-duration: 3.6s; box-shadow: none; } @keyframes s3float { from { transform: translateY(7px) rotate(-4deg); } to { transform: translateY(-7px) rotate(4deg); } } .mark.b { animation-name: s3float-b; } @keyframes s3float-b { from { transform: translateY(-6px) rotate(5deg); } to { transform: translateY(6px) rotate(-5deg); } } .mark-plus { color: var(--faint); font-size: 16px; font-weight: 700; } /* sparks — a hint of depth, not a particle system */ .spark { position: absolute; border-radius: 50%; background: var(--glow); filter: blur(.5px); animation: s3spark 2.4s ease-in-out infinite alternate; } @keyframes s3spark { from { opacity: .15; } to { opacity: .6; } } /* ── reveal on scroll ─────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(14px); } .reveal.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); } /* ── footer ───────────────────────────────────────────────────────────── */ .ftr { border-top: 1px solid var(--line); margin-top: 40px; padding: 40px 0 32px; } .ftr-grid { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 720px) { .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .ftr h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; font-weight: 700; } .ftr ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .ftr a { color: var(--dim); font-size: 14.5px; } .ftr a:hover { color: var(--ink); } .ftr-base { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-size: 13.5px; color: var(--faint); } /* ── the account chip ─────────────────────────────────────────────────── */ .who { display: flex; align-items: center; gap: 9px; padding: 5px 13px 5px 5px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); } .who .av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, var(--green), var(--glow)); color: #04140C; object-fit: cover; } .who .nm { font-size: 14px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 480px) { .who .nm { display: none; } .who { padding: 5px; } } /* ── forms ────────────────────────────────────────────────────────────── */ .field { width: 100%; padding: 13px 16px; min-height: 46px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */ transition: border-color .16s, background .16s; } .field::placeholder { color: var(--faint); } .field:focus { border-color: rgba(34,211,166,.5); background: var(--surface-3); outline: none; } label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; } /* ── motion off ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } }