/* Flit — page styles only. * * The page is built from the shared components in /styles.css: .hero, .mac, * .grid, .card, .icon-sq, .badge, .limit, .specs, .note, .faq, .closer. What is * left below is only what genuinely does not exist there — the taskbar strip * inside the Mac mock, the two in-card mocks, and the comparison table. * * Nothing here may restate a shared rule. Restating .shell once put the logo * 2.5rem further left on this page than on every other one, and nothing looked * obviously wrong until two screenshots were laid side by side. build.sh checks. */ :root{ /* Only what the shared sheet does not define. */ --ok:#1B7F4B; --no:#C2405A; } /* The ribbon already draws a bottom border, and the shared section rule draws a top one, so the first section arrives with two hairlines a pixel apart. An id selector, so no shared class is being restated. */ #top{border-top:0} /* ---------- the real screenshot inside the shared .mac mock ---------- */ .bar-strip{position:absolute;left:0;right:0;bottom:0;width:100%;display:block} /* ---------- in-card mocks ---------- */ .inset{margin-top:.875rem;border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;background:#F7F8FB} .inset-screen{position:relative;height:104px; background:linear-gradient(150deg,#1B3FAA 0%,#33509b 40%,#6F8FE0 75%,#C9A63C 140%)} .inset-menubar{position:absolute;top:0;left:0;right:0;height:16px;padding:0 .5rem; display:flex;align-items:center;background:rgba(13,27,62,.92); color:rgba(255,255,255,.85);font-size:8px;font-weight:600} .inset-screen img{position:absolute;left:0;right:0;bottom:0;width:100%;display:block} .minibar{display:flex;align-items:center;gap:9px;padding:12px 12px 16px; background:rgba(13,27,62,.94)} .tile{width:28px;height:28px;border-radius:7px;position:relative;flex:none} .tile.on:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-5px; width:14px;height:2px;border-radius:2px;background:var(--blue-soft)} .tile.front:after{background:var(--accent);width:20px} .pip{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:9999px; background:#E2445C;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:700} .legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;padding:.5rem .75rem;font-size:.75rem; color:var(--muted-fg);background:var(--card);border-top:1px solid var(--border)} .legend span{display:inline-flex;align-items:center;gap:.35rem} .key{width:14px;height:2px;border-radius:2px;display:inline-block} /* ---------- comparison table ---------- */ .cmp-wrap{margin-top:1.75rem;border:1px solid var(--border);border-radius:var(--radius-xl); background:var(--card);overflow:hidden; box-shadow:0 10px 15px -3px rgba(27,63,170,.05),0 4px 6px -4px rgba(27,63,170,.05)} table.cmp{width:100%;border-collapse:collapse;font-size:.875rem} table.cmp th,table.cmp td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)} table.cmp thead th{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600; text-transform:uppercase;letter-spacing:.08em;color:var(--muted-fg);background:var(--secondary)} table.cmp thead th.us{color:var(--primary);background:rgba(27,63,170,.09)} table.cmp td.c,table.cmp th.c{text-align:center;width:8rem} table.cmp td.us{background:rgba(27,63,170,.045)} table.cmp tbody tr:last-child td{border-bottom:0} table.cmp td strong{display:block;font-weight:600} table.cmp td span{color:var(--muted-fg);font-size:.8125rem} .mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:9999px; font-weight:700;font-size:.8125rem} .mark.y{background:rgba(27,127,75,.12);color:var(--ok)} .mark.n{background:rgba(194,64,90,.10);color:var(--no)} .mark.p{background:var(--secondary);color:var(--muted-fg);font-size:.6875rem} @media(max-width:640px){ table.cmp th,table.cmp td{padding:.6rem .4rem;font-size:.8125rem} table.cmp td.c,table.cmp th.c{width:auto} table.cmp td span{display:none} } /* ---------- bar style and size swatches ---------- */ .swatches{padding:.875rem;display:flex;flex-direction:column;gap:.625rem; background:linear-gradient(150deg,#1B3FAA 0%,#33509b 40%,#6F8FE0 75%,#C9A63C 140%)} .sw-row{display:flex;align-items:center;gap:.625rem} .sw-bar{flex:1;height:22px;border-radius:2px;display:block} .sw-bar.solid{background:#1A1C22} .sw-bar.translucent{background:rgba(26,28,34,.55);backdrop-filter:blur(6px)} .sw-bar.gradient{background:linear-gradient(180deg,#1A1C22,#3A4054)} .sw-bar.sm{height:15px} .sw-bar.md{height:22px} .sw-bar.lg{height:28px} .sw-bar.float{border-radius:7px;margin:0 .5rem} .sw-label{width:7.5rem;flex:none;font-size:.72rem;font-weight:600;color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35)} /* ---------- what used to be inline styles ---------- * The site sends Content-Security-Policy with style-src 'self' and no * 'unsafe-inline', so every style="" attribute on the site is silently * ignored — not overridden, never applied. The hero's window mocks collapsed * to 47px wide because width:62% never reached them. Anything visual has to * be a class. */ .mac-win.win-a{left:7%;top:8%;width:62%;height:52%} .mac-win.win-b{right:6%;top:26%;width:36%;height:44%} .line.w54{width:54%} .line.w60{width:60%} .line.w70{width:70%} .line.w88{width:88%} .line.w92{width:92%} .tile.t-blue{background:#3B7DD8} .tile.t-red{background:#E2564A} .tile.t-green{background:#4CAF7D} .tile.t-purple{background:#8A63C9} .tile.t-amber{background:#E8A33D} .tile.t-slate{background:#5A6B8C} .key.k-run{background:#6F8FE0} .key.k-front{background:#C9A63C;width:20px} .key.k-unread{background:#E2445C;width:9px;height:9px;border-radius:9999px} .specs.flush,.steps.flush{margin-top:0} .steps.one-col{grid-template-columns:1fr} /* The standfirst under the Flit headline. It was drawn as a second h1 at 20px in the design; two h1s on one page is a heading structure, not a type size. */ .hero-sub{ margin-top:.875rem;max-width:34rem; font-size:1.25rem;line-height:1.35;font-weight:600;letter-spacing:-.015em; color:var(--foreground); } /* The hero glow is inset:-2rem, which on a phone pushes the document 8px wider than the viewport and gives the whole page a horizontal scroll. Nothing else overflows — the blobs sit inside a fixed, clipped backdrop. */ @media(max-width:640px){ .mock-glow{inset:0} } /* Flit page: hero split + taskbar mock. Append to assets/flit.css. */ .hero-split{display:grid;gap:2.5rem;align-items:start;margin-top:1.5rem} @media(min-width:1024px){.hero-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}} /* Flit taskbar. The launcher / Spotlight / display / Finder group and the Trash button are crops of the real screenshot; the app buttons between them are markup. Every size below is a ratio of the bar height (--fh), taken by measuring the screenshot at native 128px: tile 56, tile top 33, indicator centre 104, so the markup tiles line up with the cropped ones at any width. Glyphs are Simple Icons (CC0) masked white over a brand-coloured tile. */ .fbar{ /* Every part of the bar scales with --fh, and the whole thing measures 14.24× its own height. The column it sits in is a fixed 1024px on any screen wider than 1152 (72rem shell, 4rem padding each side), so anything above 1024/14.24 = 71.9px overflows and clips the Trash button off the right end. 74px did exactly that on a 1710px window. Capped at 70px for slack; the vw term still shrinks it on narrower screens, where the column is narrower too. */ --fh:clamp(52px,5.4vw,70px);--tile:calc(var(--fh)*0.4375); margin-top:2.5rem;width:100%;background:#1a1b23;border-radius:12px;height:var(--fh); display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none} .fbar::-webkit-scrollbar{display:none} .fbar-end{height:var(--fh);width:auto;display:block;flex:0 0 auto} .fbar-apps{display:flex;align-items:stretch;gap:var(--tile); padding-left:calc(var(--tile)*0.55);flex:0 0 auto} .fbar-app{position:relative;width:var(--tile);flex:0 0 auto} .fbar-tile{position:absolute;top:25.8%;left:0;width:var(--tile);height:var(--tile); border-radius:calc(var(--tile)*0.24);display:flex;align-items:center;justify-content:center} .fbar-glyph{width:62%;height:62%;background:#fff; -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .fbar-app.front::before{content:"";position:absolute;top:9.4%;bottom:8.6%; left:calc(var(--tile)*-0.41);right:calc(var(--tile)*-0.41); background:#33343c;border-radius:calc(var(--tile)*0.26)} .fbar-ind{position:absolute;top:78.9%;left:50%;transform:translateX(-50%); display:flex;gap:calc(var(--fh)*0.055);height:calc(var(--fh)*0.045)} .fbar-ind span{display:block;width:calc(var(--fh)*0.24);height:100%;border-radius:2px;background:#c8c8ce} .fbar-ind span.two{width:calc(var(--fh)*0.175)} .fbar-app.front .fbar-ind span{background:#5b9bf5;width:calc(var(--fh)*0.175)} .fbar-badge{position:absolute;top:calc(var(--tile)*-0.2);right:calc(var(--tile)*-0.24); min-width:calc(var(--fh)*0.3);height:calc(var(--fh)*0.26);padding:0 calc(var(--fh)*0.07); border-radius:calc(var(--fh)*0.15);background:#e2445c;color:#fff; font-size:calc(var(--fh)*0.155);font-weight:700;letter-spacing:-.01em; display:flex;align-items:center;justify-content:center} .fbar-trail{margin-left:calc(var(--tile)*0.6)} .flit-mark{display:inline-block;vertical-align:-.1em;width:.86em;height:.86em; border-radius:.2em;box-shadow:0 1px 3px rgb(15 23 42 / .18)} /* ── No inline styles ─────────────────────────────────────────────────────── The site's CSP is `style-src 'self' https://fonts.googleapis.com` with no 'unsafe-inline', and that blocks style ATTRIBUTES as well as