/* img2ppt navbar — the MacBook-notch bar, shared by every public page. Lived inline in index.html until the legal and pricing pages needed it too; one copy here is the only way the notch geometry (which is a stack of three surfaces that have to line up to the pixel) stays identical across five files. Pair with nav.js, which owns the behaviour. Structure, top to bottom: body::before the 4px gradient strip the bar hangs from header.bar the notch itself, fixed and centred, width: fit-content .bar::before/ the two concave flares that make the notch's shoulders .bar::after tangent to the strip instead of butting into it All three paint the same viewport-fixed gradient, so the seams between them are invisible -- and so overlapping them is free, which is how the shoulders absorb device-pixel snapping. Motion tokens come from theme.css. The notch geometry is scaled by --ui-scale as one piece: the flare arcs are cut to the bar's own bottom radius, so if that grows and these do not, the shoulders stop being tangent and the seam shows. Change one, change all. */ /* Strip extends 120px above the viewport so browsers that still bounce show a brand-gradient roof the notch stays attached to, not a white gap. */ body::before { content: ""; position: fixed; top: -120px; left: 0; right: 0; height: calc(120px + 4px * var(--ui-scale)); background: var(--grad); z-index: 50; } /* No rubber-band at the top: the notch is fixed and would visibly detach from the viewport edge during elastic overscroll. */ html { overscroll-behavior-y: none; } header.bar { position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; z-index: 60; display: flex; align-items: center; gap: var(--bar-gap); --bar-gap: calc(20px * var(--ui-scale)); padding: calc(5px * var(--ui-scale)) calc(24px * var(--ui-scale)) calc(7px * var(--ui-scale)); border-radius: 0 0 var(--r-md) var(--r-md); background-image: var(--grad); background-attachment: fixed; top: 0; /* WARNING for anyone adding motion here later: never put a transform on this element or any ancestor of it. The notch only works because the strip, the bar and the two flares all sample one viewport-fixed gradient, and a transform in that chain makes background-attachment: fixed resolve against the transformed box instead of the viewport -- which drags a full light-to-deep gradient across the notch's own ~400px and destroys the seam the whole design rests on. Chrome happens to keep it viewport-anchored (measured); Safari and Firefox are not reliably on that side of the spec. Move it on `top` if it ever has to move. */ /* fit-content with left:0/right:0/margin:auto overflows rather than wraps, and a signed-in visitor on a 320px phone carries an email address in here: unbounded, the bar ran ~640px wide and pushed the burger clean off the screen, which is the one control that cannot go missing -- it is the only navigation at this width. Capped here, shrunk at the email below. */ max-width: calc(100% - 16px * var(--ui-scale)); } /* ---- the shoulders ---- Two concave fillets that carry the strip's bottom edge round into the bar's side, so the notch reads as one surface rather than a block stuck under a line. Each is a box painting the same viewport-fixed gradient with a circle masked out of its inner corner. The mask is an SVG path, not a radial-gradient. A gradient cannot draw an edge: a hard stop rasterises as a staircase, so the arc carried a 0.75px feather to hide it -- and a feather is a fixed CSS length, so on a 2x or 3x screen it becomes a 1.5-2.5 device-pixel smear sitting next to the bar's crisp border-radius. Both ends of the arc went pale exactly where they had to meet the strip and the bar, and the shoulder read as chipped. An SVG shape is rasterised at device resolution with real antialiasing, so the arc is as sharp as the corner it joins. Geometry in the path's own units (1 unit = 1px * --ui-scale), left shoulder; the right one is its mirror: viewBox 13 x 14, its top 1 unit above the strip's bottom edge circle centre (0, 13), r 12, cut out whole rather than as a quarter wedge -- below the tangent point the disc still has to keep the fillet clear of the bar's side tangents y = 1, the strip's bottom edge; x = 12, the bar's side The two spare units are deliberate overlap, not slack: one above, painted over the strip, and one to the side, tucked under the bar. Every length in here is fractional at --ui-scale 1.1 (4.4, 13.2, 15.4) and each of the three surfaces snaps to device pixels on its own, so without the overlap a seam opens on a fraction of a pixel -- which is the other thing the feather was really hiding. All three paint one fixed gradient, so overlap costs nothing. r 12 is --r-md unscaled, written out by hand: see design-system.md 2.4. If that radius moves, both paths move with it. */ /* Held in custom properties only because the data URIs are unreadable inline. preserveAspectRatio="none" makes the shape fill the box exactly instead of letterboxing inside it; the box keeps the viewBox's 13:14 ratio, so nothing is stretched by it. #000 here is an alpha value, not a colour. */ header.bar { --flare-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0H13V14H12V13A12 12 0 0 0 0 1Z'/%3E%3C/svg%3E"); --flare-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M13 0H0V14H1V13A12 12 0 0 1 13 1Z'/%3E%3C/svg%3E"); } header.bar::before, header.bar::after { content: ""; position: absolute; top: calc(3px * var(--ui-scale)); width: calc(13px * var(--ui-scale)); height: calc(14px * var(--ui-scale)); background-image: var(--grad); background-attachment: fixed; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } header.bar::before { left: calc(-12px * var(--ui-scale)); -webkit-mask-image: var(--flare-l); mask-image: var(--flare-l); } header.bar::after { right: calc(-12px * var(--ui-scale)); -webkit-mask-image: var(--flare-r); mask-image: var(--flare-r); } /* The bar itself is inert: no entrance animation, it does not hide itself on scroll, and it takes on no shadow when the page scrolls under it. It is the only navigation on five pages, and a saturated brand block on white already separates itself from the content without help. The motion that is left all answers something the reader just did. */ /* Which items give way when the cap bites. Everything that carries meaning at a glance, or that has to stay tappable, refuses to shrink; the email is the one thing in the bar that still reads with characters missing. */ .logo, .beta-badge, .bar-nav, .bar-burger, .auth-area .quota, .acct-btn .chev { flex: 0 0 auto; } .auth-area, .acct, .acct-btn { min-width: 0; } .auth-area .who, .acct-email { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- brand ---- */ /* Baseline (not centre) so the beta badge can sit on the wordmark's baseline; a baseline group needs both items in it, otherwise the lone baseline item falls back to flex-start. The logo is the tallest item in the bar, so opting it into the group doesn't move it. */ .logo { font-size: calc(15px * var(--ui-scale)); font-weight: 700; letter-spacing: calc(-.3px * var(--ui-scale)); white-space: nowrap; color: var(--on-accent); align-self: baseline; text-decoration: none; } .logo em { font-style: normal; color: inherit; } /* A status note next to the logo rather than a second brand element. The trailing letter-space is trimmed off the right so the gap to the hairline stays even. The negative margin cancels the flex gap and re-spends 6px of it, so the badge stays tucked against the wordmark at any --bar-gap -- a hardcoded -14px silently butted the two together the moment the narrow layout tightened the gap to 14px. */ /* Was 9px at a .6-alpha tint -- 2.08:1, and below the 11px type floor. --fs-micro at full --on-accent puts it at 4.51:1 on the strip's #917306 core, the same as every other label in the bar -- AA, since 2.1.5 closed on 2026-09-12 when the core deepened. FULL means full: an opacity here quietly re-dims it -- the .75 this carried composited to ~2.84:1 while the comment beside it claimed parity with the bar. */ .beta-badge { font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1; letter-spacing: .16em; margin-right: -.16em; color: var(--on-accent); align-self: baseline; margin-left: calc(6px * var(--ui-scale) - var(--bar-gap)); } /* Both a