/* marinaMoji visual language: warm paper, mist blue, and maritime indigo. */ :root { --paper:#f5f2eb; --paper-deep:#eeece4; --mist:#dceaf0; --mist-light:#edf4f5; --indigo:#152d4d; --indigo-soft:#31516f; --ink:#253345; --muted:#68798b; } html, body { background:var(--paper); color:var(--ink); } /* OS-conditional content: html.os-mac / .os-ios / .os-apple / .os-windows / .os-linux are set by the inline script at the top of (before first paint) via best-effort UA/platform sniffing — not a security boundary, just a hint for which instructions to show. Mark an element data-os-hide="mac" (space-separated for more than one) to hide it for that platform; an ancestor with .os-show-all overrides it back on so a "show all platforms" control can un-hide everything. */ html.os-mac:not(.os-show-all) [data-os-hide~="mac"], html.os-windows:not(.os-show-all) [data-os-hide~="windows"], html.os-linux:not(.os-show-all) [data-os-hide~="linux"], html.os-apple:not(.os-show-all) [data-os-hide~="apple"] { display:none !important; } html { scroll-behavior:smooth; } body { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Interior pages end in the indigo footer. Keep any residual viewport/body height in that same color rather than exposing the paper background below the footer; the page wrapper itself remains the paper-colored content field. */ body:not(.page-home) { background:var(--indigo); } body:not(.page-home) #page-wrapper { background:var(--paper); } ::selection { background:var(--paper); color:var(--indigo); } ::-moz-selection { background:var(--paper); color:var(--indigo); } h1,h2,h3,h4,h5,h6,.home-intro__statement { font-family:"Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif; color:var(--indigo); font-weight:500; letter-spacing:-.015em; } a { color:var(--indigo-soft); } a:hover { color:var(--indigo); } #header { position:relative; z-index:50; background:var(--paper); border-bottom:1px solid rgba(21,45,77,.1); } /* Quark's own ".header-fixed #header{position:fixed;z-index:2}" is more specific than the plain "#header" selector above, so it was winning and the header's real z-index has been 2 all along — not 50. That only became visible once page content also reached z-index:2 (the apparatus section) and, being later in the DOM, painted over the header on scroll. Match Quark's selector so this actually wins. */ .header-fixed #header { z-index:50; } /* The mobile hamburger overlay has no z-index of its own, so #header's z-index:50 (needed to sit above page content) also sat above the full- screen overlay, leaving the header's own logo visible through/behind it. Only became obvious once the wordmark graphic grew past icon-sized. */ body.mobile-nav-open #header { z-index:1; } #header .logo img { filter:saturate(.35) sepia(.08); } /* Site wordmark — the actual header_logo.svg (icon + marinaMoji + eyebrow), used as-is. Sized by width; Quark's blanket "#header .logo img{height:42px}" is overridden since this is one wide graphic, not a square mark. */ .site-logo { display:inline-flex; align-items:center; text-decoration:none; } #header .site-logo__mark { height:auto !important; width:11rem; } body.header-fixed.header-animated #header.scrolled .site-logo__mark { width:8.25rem; } /* Mobile overlay is dark-on-navy; invert the same artwork to read light rather than hand-making a second file. */ .overlay .mobile-logo .site-logo__mark { height:auto; width:12.5rem; filter:brightness(0) invert(1); } .dropmenu li a { color:var(--indigo); position:relative; } /* Absolutely positioned so the underline never adds to the 's content height — .dropmenu ul is a flex row with the default align-items:stretch, so an in-flow underline made the *active* link's
  • taller, which stretched every sibling
  • to match on whichever page had an active item (i.e. every interior page) but not on the home page (no active nav item there) — nav text landed at a different vertical position on home vs. everywhere else, throwing off anything (like the language switcher) calibrated to just one of those. */ .dropmenu li a.active { /* Native text-decoration instead of a hand-measured ::after bar — it always matches the exact text width regardless of word length, and (unlike an in-flow ::after) never affects the link's box height. */ text-decoration: underline; text-decoration-color: var(--indigo-soft); text-decoration-thickness: 2px; text-underline-offset: 5px; } #body-wrapper { position:relative; } #body-wrapper::before { display:none; } body.page-home #body-wrapper { padding-bottom:0 !important; } body.page-home #body-wrapper > .container { padding-bottom:0 !important; } /* Justified body text */ #body-wrapper .container p, #body-wrapper .container li { text-align: justify; } /* Markdown tables: left-aligned headers, wider column gap, space before following text */ #body-wrapper .container table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; } #body-wrapper .container .table { margin-bottom: 2rem; } #body-wrapper .container table th, #body-wrapper .container table td, #body-wrapper .container .table th, #body-wrapper .container .table td { text-align: left !important; vertical-align: top; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } #body-wrapper .container table th, #body-wrapper .container .table th { font-weight: 600; border-bottom-width: 2px; } #body-wrapper .container table th:first-child, #body-wrapper .container table td:first-child, #body-wrapper .container .table th:first-child, #body-wrapper .container .table td:first-child { padding-right: 2.75rem; } /* Inline images in paragraphs and lists: match text size (guide page only) */ .page-guide #body-wrapper .container p img, .page-guide #body-wrapper .container li img { display: inline; height: 1.1em; width: auto; vertical-align: middle; } /* Standalone figure image (e.g. toolbar screenshot): size via wrapper class */ .toolbar-figure { margin-bottom: 1.5rem; } .toolbar-figure img { max-width: 100%; width: auto; height: auto; display: block; } /* Split layout: text next to images (from Quark custom) */ .split { display: grid; grid-template-columns: 1fr auto; gap: 1.25rem; align-items: center; margin: 2.75rem 0; padding: 2rem; background: rgba(237,244,245,.72); border: 1px solid rgba(49,81,111,.1); border-radius: 2px; box-shadow: 0 12px 30px rgba(21,45,77,.045); } .split .media { width: min(42%, 520px); max-width: 520px; } .split .media img { width: 100%; height: auto; display: block; border-radius: 2px; box-shadow: 0 8px 20px rgba(21,45,77,.12); } .home-caption { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin:1.35rem 0 4.25rem; padding-bottom:1.35rem; border-bottom:1px solid rgba(21,45,77,.14); } body.page-home #body-wrapper .container > p:first-of-type { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } body.page-home #body-wrapper .container > p:first-of-type img { display:block; width:100%; height:auto; max-width:none; } .home-caption p { margin:0; text-align:left !important; } .home-caption > p:first-child { max-width:44rem; } .home-caption__actions { flex:0 0 auto; white-space:nowrap; } .home-caption__actions .btn { margin-right:.8rem; } #home-features { scroll-margin-top: 1rem; } .living-specimen { margin:0 0 5.5rem; padding:1.5rem 0 1.25rem; border-top:1px solid rgba(21,45,77,.14); border-bottom:1px solid rgba(21,45,77,.14); } .living-specimen__label { margin:0 0 .45rem; color:var(--muted); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; text-align:left !important; } .living-specimen__line { color:var(--indigo); caret-color:var(--paper); font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-size:clamp(3.5rem,10vw,8rem); line-height:1; letter-spacing:.08em; transition:opacity .22s ease, transform .22s ease; } .living-specimen__line.is-changing { opacity:0; transform:translateY(.15em); } .living-specimen__toggle { display:block; margin:.8rem 0 0 auto; padding:0; border:0; background:none; color:var(--indigo-soft); font:inherit; cursor:pointer; } .living-specimen__toggle:hover { color:var(--indigo); } .living-specimen__toggle:focus-visible { outline:2px solid var(--paper); outline-offset:4px; box-shadow:0 0 0 4px var(--indigo-soft); } .home-download-band { margin:5rem calc(50% - 50vw) 0; padding:4.25rem 16.3vw 3.75rem; width:100vw; height:auto; aspect-ratio:1916 / 821; min-height:0; max-height:none; box-sizing:border-box; text-align:left; color:#fff; background-color:var(--indigo); background-image:image-set(url('../images/night-harbour.avif') type('image/avif'), url('../images/night-harbour.webp') type('image/webp'), url('../images/night-harbour.png') type('image/png')); background-position:center top; background-size:cover; background-repeat:no-repeat; position:relative; overflow:hidden; z-index:1; } .home-download-band::before, .home-download-band::after { display:none; } .home-download-band h2 { position:relative; z-index:1; max-width:50rem; margin:.75rem auto 1.15rem; color:#fff; font-size:clamp(1.75rem,2.6vw,3rem); line-height:1.05; letter-spacing:-.025em; text-align:center; } .home-download-band .eyebrow { margin:0; color:var(--mist); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; text-align:center; } .home-download-band__platforms { position:relative; z-index:1; margin:0 0 1.1rem; color:rgba(255,255,255,.8); letter-spacing:.12em; text-align:center !important; } .home-download-band__action { position:relative; z-index:1; display:table; margin:0 auto; color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:.2rem; } .home-download-band__action:hover { color:var(--mist); border-color:var(--mist); } body.page-home #footer { position:relative; z-index:1; margin-top:-9rem; padding:0 !important; background:transparent !important; color:rgba(255,255,255,.62); } body.page-home #footer .container { border-top:0; padding-top:1.5rem; padding-bottom:.75rem; } body.page-home #footer a { color:rgba(255,255,255,.72); } body.page-home #footer a:hover { color:#fff; } body.page-home .partner-logos { margin-bottom:.45rem; } body.page-home .partner-logos__title { display:none; } body.page-home .partner-logos__img { filter:brightness(1.1) saturate(.45); opacity:.68; } body.page-home .partner-logos__link:hover .partner-logos__img { opacity:.84; filter:brightness(1.1) saturate(.45); } body.page-home #footer .footer-meta { color:rgba(255,255,255,.5); font-size:.72rem; } body.page-home #footer .footer-meta { white-space:nowrap; } body.page-home #footer .footer-meta__legal::before { content:"\00b7"; margin:0 .5em; } .btn.btn-primary { background:var(--indigo); border-color:var(--indigo); } .btn.btn-primary:hover { background:var(--indigo-soft); border-color:var(--indigo-soft); } .btn-light { background:var(--mist); color:var(--indigo); border:0; } .split { position:relative; background:transparent; border:0; box-shadow:none; margin:1rem 0; padding:1rem 0; overflow:hidden; grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .split .media, .split .text { position:relative; z-index:1; min-width:0; } .split .media-video { width:min(100%, 520px); aspect-ratio:874 / 338; position:relative; background:transparent; } .split .media-video img, .split .media-video video { box-shadow:none; border:0; border-radius:0; outline:0; background:transparent; } .split .media-video__poster, .split .marinamoji-demo { position:absolute; inset:0; width:100%; height:100%; margin:0; display:block; object-fit:cover; } .media-video__poster { z-index:2; transition:opacity .2s linear; } .media-video.is-playing .media-video__poster { opacity:0; } .marinamoji-demo { z-index:1; } .type-demo .media-video { cursor:pointer; } .type-demo .text h3 { margin:.2rem 0 .65rem; } .type-demo .text p:last-child, .type-sync .text p:last-child { margin-bottom:0; text-align:left !important; } .type-sync .media { width:min(100%, 520px); max-width:520px; } .feature-kicker { margin:0 0 .65rem !important; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-align:left !important; } /* Functions opens as an editorial argument rather than a documentation banner: scrutiny on the left, the scholar's evidence on the right. */ .functions-hero { position:relative; min-height:clamp(27rem, 39vw, 34rem); margin:-3.5rem 0 1.1rem; padding:2.25rem 0 2.5rem; border-bottom:1px solid rgba(21,45,77,.14); overflow:hidden; } .functions-hero + h2 { margin-top:1rem; } .functions-hero__copy { position:relative; z-index:1; width:100%; padding:1rem 0 3rem; } .functions-hero__copy h1#functions-hero-title { display:block; width:75%; max-width:75%; margin:clamp(4.5rem, 7vw, 6rem) 0 0; font-size:clamp(1.4rem, 1.75vw, 1.8rem) !important; line-height:1.08 !important; letter-spacing:-.025em !important; white-space:nowrap; } .functions-hero__copy > p:last-child { width:min(40%, 28rem); max-width:none; margin:2rem 0 0; line-height:1.55; text-align:left !important; } .functions-hero__figure { position:absolute; z-index:0; inset:0; margin:0; background-image:image-set(url('../images/jane.avif%3Fv=20260911-2205') type('image/avif'), url('../images/jane.webp%3Fv=20260911-2205') type('image/webp'), url('../images/jane.png%3Fv=20260911-2205') type('image/png')); background-position:right center; background-size:100% auto; background-repeat:no-repeat; /* Reveal the cream page through the image's left and bottom edges. These are alpha masks, so the treatment follows the actual page background instead of painting a second cream gradient over the artwork. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 18%, #000 44%), linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%); -webkit-mask-repeat:no-repeat; -webkit-mask-composite:source-in; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 18%, #000 44%), linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%); mask-repeat:no-repeat; mask-composite:intersect; pointer-events:none; } /* Guide hero: reuse the Jane composition's editorial treatment, while the supplied image provides two researchers and its own pale typographic field. */ .guide-hero { position:relative; min-height:clamp(27rem,39vw,34rem); margin:-3.5rem 0 1.1rem; padding:2.25rem 0 2.5rem; border-bottom:1px solid rgba(21,45,77,.14); overflow:hidden; } /* Guide flows directly from its hero into the accordion sequence. */ body.page-guide .guide-hero { margin-bottom: 0; border-bottom: 0; } body.page-guide .guide-hero + details { margin-top: .75rem; } .guide-hero__copy { position:relative; z-index:1; width:100%; padding:1rem 0 3rem; } .guide-hero__copy h1 { display:block; width:min(50%,27rem); max-width:27rem; margin:clamp(4.5rem,7vw,6rem) 0 0; color:var(--indigo); font-size:clamp(2.2rem,4.8vw,4.5rem); line-height:1.02; letter-spacing:-.035em; } .guide-hero__copy > p:last-child { width:min(40%,28rem); max-width:none; margin:2rem 0 0; line-height:1.55; text-align:left !important; } .guide-hero__figure { position:absolute; z-index:0; inset:0; margin:0; background-image:image-set(url('../images/guide_hero.avif%3Fv=20260912') type('image/avif'), url('../images/guide_hero.webp%3Fv=20260912') type('image/webp'), url('../images/guide_hero.png%3Fv=20260912') type('image/png')); background-position:right center; background-size:100% auto; background-repeat:no-repeat; -webkit-mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 18%,#000 44%), linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%); -webkit-mask-repeat:no-repeat; -webkit-mask-composite:source-in; mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 18%,#000 44%), linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%); mask-repeat:no-repeat; mask-composite:intersect; pointer-events:none; } .page-functions #body-wrapper .container > ol:first-of-type { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(1rem, 3vw, 3rem); margin:1.25rem 0 4.5rem; padding:1.25rem 0 0; border-top:1px solid rgba(21,45,77,.14); list-style:none; counter-reset:function-goal; } .page-functions #body-wrapper .container > ol:first-of-type li { margin:0; padding-top:2rem; border-top:2px solid var(--indigo-soft); counter-increment:function-goal; text-align:left !important; } .page-functions #body-wrapper .container > ol:first-of-type li::before { content:"0" counter(function-goal); display:block; margin-bottom:.65rem; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.16em; } /* Critical apparatus: scholarly notes glossing specific verdicts in the comparison table above, not more prose piled after it. Deliberately narrower than the table (broad synoptic evidence -> close reading), two columns, no cards/boxes/backgrounds — rules, numbers, indentation and whitespace carry the structure. */ .apparatus { position:relative; z-index:2; width:90%; margin:4.5rem auto 3.5rem; } .apparatus > .feature-kicker { margin-bottom:.35rem !important; } .apparatus > h2 { margin:0 0 1.75rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(21,45,77,.14); } .apparatus__grid { display:grid; grid-template-columns:1fr 1fr; column-gap:3.5rem; row-gap:3rem; } .apparatus__entry { position:relative; } .apparatus__entry > * { position:relative; z-index:1; margin:0; } .apparatus__ghost { position:absolute; z-index:0; top:-.6rem; left:-.2rem; font-family:Didot,"Bodoni MT","Hoefler Text",Georgia,serif; font-size:4.5rem; line-height:1; color:var(--indigo); opacity:.05; pointer-events:none; user-select:none; } .apparatus__label { margin-bottom:.4rem !important; } .apparatus__verdict { margin-bottom:.6rem !important; color:var(--indigo); font-weight:700; text-align:left !important; } .apparatus__entry > p:last-child { font-size:.8rem; line-height:1.6; } .apparatus__close { width:90%; margin:0 auto 1.5rem; font-size:.8rem; color:var(--muted); } /* Superscript back-references from table rows to their apparatus entry. */ .apparatus-ref { font-size:.6em; margin-left:.2em; } .apparatus-ref a { color:var(--muted); text-decoration:none; border-bottom:1px dotted currentColor; } .apparatus-ref a:hover { color:var(--indigo); } @media (max-width:900px) { .apparatus, .apparatus__close { width:100%; } .apparatus__grid { grid-template-columns:1fr; row-gap:2.25rem; } .apparatus__ghost { font-size:3.5rem; } } /* The roadmap's construction-field background (below) is 54rem tall and absolutely positioned, so with nothing clipping it, it overflowed past the actual page content — and past the footer — adding ~226px of blank, scrollable space below the footer on this page only. Clip it to the container that actually holds it (:has() keeps this off every other page instead of adding overflow:hidden to the shared container rule). */ #body-wrapper .container:has(h3#planned) { overflow:hidden; } /* The roadmap is intentionally unfinished: let its construction field enter the text from the right, without changing the document's reading order. */ #body-wrapper .container h3#planned { position:relative; z-index:1; } #body-wrapper .container h3#planned::after { content:""; position:absolute; z-index:-1; top:4rem; right:-1rem; width:min(43%, 31rem); height:54rem; background:url('../images/plan.png') right top / contain no-repeat; opacity:.25; pointer-events:none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .marinamoji-demo { display:none; } } @media (max-width:768px) { .functions-hero { display:flex; flex-direction:column; min-height:0; margin:-1.5rem 0 1rem; padding-top:1.25rem; } .functions-hero__copy { display:contents; } .functions-hero__copy .feature-kicker { order:1; margin-bottom:.25rem !important; } .functions-hero__copy h1#functions-hero-title { position:absolute; z-index:2; top:4.5rem; left:0; order:2; width:50%; max-width:50%; margin:0; font-size:clamp(1.35rem, 6vw, 1.8rem) !important; line-height:1.05 !important; white-space:normal; } .functions-hero__copy > p:last-child { order:4; width:100%; margin:1.5rem 0 0; line-height:1.5; } .functions-hero + h2 { margin-top:.75rem; } .functions-hero__figure { position:relative; order:3; inset:auto; width:calc(100% + 2rem); height:clamp(15rem, 60vw, 20rem); margin:1.5rem -1rem 0; background-size:auto 100%; background-position:78% bottom; } .guide-hero { display:flex; flex-direction:column; min-height:0; margin:-1.5rem 0 1rem; padding-top:1.25rem; } .guide-hero__copy { display:contents; } .guide-hero__copy .feature-kicker { order:1; margin-bottom:.25rem !important; } .guide-hero__copy h1 { position:absolute; z-index:2; top:4.5rem; left:0; order:2; width:58%; max-width:58%; margin:0; font-size:clamp(1.8rem,7vw,2.6rem); line-height:1.05; } .guide-hero__copy > p:last-child { order:4; width:100%; margin:1.5rem 0 0; line-height:1.5; } .guide-hero__figure { position:relative; order:3; inset:auto; width:calc(100% + 2rem); height:clamp(15rem,60vw,20rem); margin:1.5rem -1rem 0; background-size:auto 100%; background-position:78% bottom; } .page-functions #body-wrapper .container > ol:first-of-type { grid-template-columns:1fr; gap:1.5rem; margin-bottom:3rem; } #body-wrapper .container h3#planned::after { position:relative; top:auto; right:auto; display:block; width:100%; height:11rem; margin:1.25rem 0 1.5rem; background-position:center center; background-size:auto 100%; opacity:.22; } .home-caption { display:block; margin-bottom:3rem; } .home-caption__actions { margin-top:1rem !important; white-space:normal; } .home-download-band { height:auto; min-height:26rem; padding:3.25rem 2rem 2.5rem; } .home-download-band h2 { max-width:24rem; font-size:clamp(1.7rem,7vw,2.5rem); } .home-download-band__platforms { margin-left:0; } body.page-home .partner-logos__row { flex-wrap:nowrap; gap:.35rem; } body.page-home .partner-logos__link { height:28px; min-width:0; flex:1 1 0; } body.page-home .partner-logos__img { width:auto; max-width:100%; height:25px; } .living-specimen__toggle { margin-left:0; } .split { padding:1rem 0; } } @media (max-width: 768px) { .split { grid-template-columns: 1fr; } /* !important beats inline width/max-width from [split] shortcode */ .split .media { width: 100% !important; max-width: 100% !important; order: -1; } .split .media img { width: 100%; max-width: 100%; height: auto; } .split .text { order: 0; } } /* Mobile overlay menu: light text on dark panel (Quark left links unstyled) */ .overlay-menu a, .overlay-menu .treemenu li a, .overlay-menu .tree li a { color: #fff !important; } .overlay-menu .treemenu li a:hover, .overlay-menu .treemenu li a:focus, .overlay-menu .treemenu li a.active, .overlay-menu .tree li a:hover, .overlay-menu .tree li a:focus, .overlay-menu .tree li a.active { color: #8ec5ff !important; } .overlay-menu .treemenu li, .overlay-menu .tree li { background: rgba(255, 255, 255, 0.08); } .overlay .mobile-logo img { height: 42px; width: auto; max-width: 70vw; } .desktop-menu { display: flex; align-items: center; flex-wrap: nowrap; } .desktop-menu .lang-switcher { /* Match the .dropmenu tags' own box model (padding + inherited line-height) instead of flex-centering within the full header height — the two methods land text at different vertical positions and that's what was reading as misaligned. */ flex-shrink: 0; } /* Language switcher — desktop (matches Quark dropmenu weight) */ .lang-switcher { position: relative; display: inline-block; margin-left: 0.35rem; vertical-align: middle; } .lang-switcher__toggle { display: inline-block; padding: 7px 10px; font-size: inherit; line-height: inherit; font-weight: 700; font-family: inherit; letter-spacing: 0.02em; color: inherit; background: transparent; border: 0; cursor: pointer; text-transform: uppercase; } .desktop-menu .lang-switcher__toggle { display: inline-block; padding: 7px 10px; line-height: 1.5; } .lang-switcher__toggle:hover, .lang-switcher__toggle:focus { color: var(--primary-color, #3085EE); outline: none; } .lang-switcher__menu { display: none; position: absolute; right: 0; top: 100%; min-width: 4.5rem; margin: 0; padding: 0.35rem 0; list-style: none; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); z-index: 20; } .lang-switcher.is-open .lang-switcher__menu { display: block; } .lang-switcher__menu a { display: block; padding: 0.4rem 0.85rem; font-weight: 700; text-transform: uppercase; color: #454d5d !important; text-decoration: none; } .lang-switcher__menu a:hover, .lang-switcher__menu a.is-active { color: #3085EE !important; } /* Language switcher — mobile overlay */ .overlay-menu .lang-switcher { display: block; margin: 1.25rem 1rem 0; text-align: left; } .overlay-menu .lang-switcher__toggle { color: #fff; padding: 0.5rem 0; } .overlay-menu .lang-switcher__menu { position: static; display: none; background: transparent; border: 0; box-shadow: none; padding: 0.25rem 0 0.5rem; } .overlay-menu .lang-switcher.is-open .lang-switcher__menu { display: block; } .overlay-menu .lang-switcher__menu a { color: rgba(255, 255, 255, 0.85) !important; padding: 0.45rem 0.25rem; } .overlay-menu .lang-switcher__menu a:hover, .overlay-menu .lang-switcher__menu a.is-active { color: #8ec5ff !important; } /* Partner logos row in footer — one row, small, like Sanmiao */ #footer .footer-meta { margin: 0.25rem 0; } .partner-logos { margin-bottom: 1rem; } .partner-logos__title { font-size: 0.9rem; color: var(--gray-color, #727e96); margin-bottom: 0.75rem; text-align: center; } .partner-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2rem; margin-bottom: 0.5rem; } .partner-logos__link { display: inline-flex; align-items: center; justify-content: center; height: 40px; text-decoration: none; color: inherit; } .partner-logos__img { height: 40px; width: auto; max-width: 220px; object-fit: contain; object-position: center; filter: grayscale(1) brightness(.72) sepia(.12) hue-rotate(165deg) saturate(.6); opacity: 0.72; transition: opacity 0.2s ease, filter 0.2s ease; } .partner-logos__link:hover .partner-logos__img { opacity: 1; filter: grayscale(0%); } details { border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; padding: 0.75rem 1rem; margin: 1.5rem 0; } summary { cursor: pointer; font-weight: 600; list-style: none; } summary::-webkit-details-marker { display: none; } details[open] summary { margin-bottom: 0.75rem; } /* —— Download page —— */ .page-download .dl-hero { margin: 0 0 1.75rem; } .page-download .dl-hero__lede, .page-download .dl-platform__note, .page-download .dl-foot-links, .page-download .dl-help, .page-download .dl-arch-hint, .page-download .dl-details, .page-download .dl-details p, .page-download .dl-details li { font-size: inherit; line-height: inherit; } .page-download .dl-hero__lede { text-align: left !important; max-width: 42rem; margin-bottom: 0.75rem; } .page-download .dl-hero__meta { text-align: left !important; font-size: 0.9em; color: #727e96; margin: 0; } .page-download .dl-version { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #222; background: rgba(48, 133, 238, 0.1); padding: 0.15rem 0.55rem; border-radius: 4px; } .page-download .dl-meta-sep { margin: 0 0.35rem; opacity: 0.55; } .page-download .dl-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .page-download .dl-jump a { font-weight: 700; font-size: 0.9em; text-decoration: none; color: #454d5d; } .page-download .dl-jump a:hover, .page-download .dl-jump a.is-active { color: #3085EE; } .page-download .dl-platform { margin: 0 0 1.25rem; padding: 1.5rem; background: rgba(237,244,245,.58); border: 1px solid rgba(49,81,111,.12); border-radius: 2px; transition: background 0.2s ease, box-shadow 0.2s ease; } .page-download .dl-platform.is-suggested { margin-left: -0.75rem; margin-right: -0.75rem; padding: 1.25rem 0.75rem 1rem; background: var(--mist); border-color: rgba(21,45,77,.28); box-shadow: 0 10px 25px rgba(21,45,77,.08); } .page-download .dl-platform h3 { margin-top: 0; margin-bottom: 0.35rem; } .page-download .dl-platform__note { text-align: left !important; color: #727e96; margin: 0 0 1rem; max-width: 42rem; } .page-download .dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin: 0 0 1rem; text-align: left !important; } .page-download .dl-actions .btn { margin: 0; text-decoration: none; font-size: inherit; } .page-download .dl-actions .btn-outline { background: transparent; border: 1px solid #3085EE; color: #3085EE; } .page-download .dl-actions .btn-outline:hover { background: rgba(48, 133, 238, 0.08); } .page-download .dl-actions .btn-link { background: transparent; border: 0; color: #3085EE; box-shadow: none; padding-left: 0.35rem; padding-right: 0.35rem; } .page-download .dl-details { margin: 0.75rem 0 0; } .page-download .dl-platform--secondary { opacity: 0.98; } .page-download .dl-foot-links, .page-download .dl-help { text-align: left !important; } .page-download .dl-coming { margin-top: 2rem; } .page-download .dl-suggested-label { display: inline-block; font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3085EE; margin-bottom: 0.35rem; } .page-download .dl-arch-hint { text-align: left !important; color: #3085EE; margin: 0 0 0.75rem; } .page-download .dl-actions a.is-arch-preferred { box-shadow: 0 0 0 2px rgba(48, 133, 238, 0.25); } .page-download .dl-copy-row { text-align: left !important; margin: 0.5rem 0 0.75rem; } .page-download .dl-copy-row .btn { font-size: 0.9em; font-weight: 700; } .page-download .dl-copy-row .btn.is-copied { color: #2ecc71; border-color: #2ecc71; } .page-download #apt-install-commands { margin: 0 0 1rem; padding: 1.15rem 1.25rem; background: var(--paper-deep); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 6px; overflow-x: auto; max-width: 100%; font-size: 0.9em; line-height: 1.45; } .page-download #apt-install-commands code { background: transparent; padding: 0; white-space: pre; } /* Shared interior-page footer: footer2.png IS the whole footer — the dark navy sky drawn into its own top ~55% is the canvas identity/logos/legal line sit on, not a separate CSS-coloured band. The fills #footer completely (height:100% of it), object-fit:cover + a bottom-anchored object-position, so the harbour stays pinned to the bottom edge and any extra height (from #footer's min-height floor, or from content needing more room) simply reveals more of the image's own dark sky above it — never a scaled-up harbour, never a plain-colour filler band. Cropping is horizontal only, chosen per breakpoint below (wide: near-full panorama; narrow: tighter central slice, shifted toward the boat cluster). */ body:not(.page-home) #footer { position:relative; isolation:isolate; overflow:hidden; min-height:420px; /* body.sticky-footer lays #footer out as a flex item; overflow:hidden disables the automatic content-based minimum size, so without flex-shrink:0 the flexbox can crush this to 0 height on tall pages / narrow viewports. Never shrink it. */ flex-shrink:0; padding:0 !important; background:var(--indigo) !important; color:rgba(255,255,255,.72); } body:not(.page-home) #footer .footer-harbour { position:absolute; z-index:0; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:50% bottom; pointer-events:none; } body:not(.page-home) #footer > .container { position:relative; z-index:1; display:flex; flex-direction:column; gap:1.35rem; min-height:420px; box-sizing:border-box; padding:2.5rem clamp(1.25rem, 4vw, 3.5rem) 2rem; } /* Two-zone composition: identity (left) / partner logos (right). */ body:not(.page-home) #footer .footer-main { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); align-items:center; gap:clamp(1rem, 2.5vw, 2.5rem); width:100%; margin:0; } body:not(.page-home) #footer .footer-identity { display:flex; align-items:flex-start; text-align:left; } /* The actual designed slogan_dark.svg (Inkscape, text converted to paths) — rendered as-is, not recreated in CSS. */ body:not(.page-home) #footer .footer-identity img { display:block; width:min(13rem, 70vw); height:auto; } body:not(.page-home) #footer .partner-logos { position:relative; z-index:3; margin:0; } body:not(.page-home) #footer .partner-logos__title { display:none; } body:not(.page-home) #footer .partner-logos__row { display:grid; grid-template-columns:repeat(6, max-content); justify-content:space-between; align-items:center; gap:1rem clamp(.8rem, 1.5vw, 1.5rem); margin:0; } body:not(.page-home) #footer .partner-logos__link { height:38px; justify-self:center; } body:not(.page-home) #footer .partner-logos__img { height:31px; filter:brightness(1.1) saturate(.45); opacity:.7; } body:not(.page-home) #footer .partner-logos__link:hover .partner-logos__img { opacity:.92; } /* Legal line: two-ended (copyright left, legal notice far right). */ body:not(.page-home) #footer .footer-meta { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; width:100%; color:rgba(255,255,255,.55); font-size:.72rem; } body:not(.page-home) #footer .footer-meta a { color:rgba(255,255,255,.7); } body:not(.page-home) #footer .footer-meta a:hover { color:#fff; } body.page-home #footer .footer-identity { display:none; } body.page-home #footer .footer-harbour { display:none; } /* Breakpoint art direction: taller canvas + closer-to-centre framing as the viewport widens (more of the panorama fits, and there's more dark sky to show); shorter + shifted left as it narrows (keeps the boat cluster in frame as the village/right pier crop away). min-height is a floor only — .container is in normal flow, so if wrapped logo rows ever need more room than the floor gives, the footer (and the image behind it, height:100%) both simply grow taller, exposing more sky rather than scaling the art. */ @media (min-width:1400px) { body:not(.page-home) #footer .partner-logos__row { grid-template-columns:repeat(6, auto); } body:not(.page-home) #footer .footer-harbour { object-position:50% bottom; } body:not(.page-home) #footer, body:not(.page-home) #footer > .container { min-height:460px; } } /* Normal desktop/laptop: modest crop from both sides. */ @media (min-width:1000px) and (max-width:1399px) { body:not(.page-home) #footer .footer-harbour { object-position:49% bottom; } body:not(.page-home) #footer, body:not(.page-home) #footer > .container { min-height:400px; } } /* Tablet: still two columns, but the logo grid tightens to 3x2 and the harbour crops substantially — boats, breakwater, mountains remain. */ @media (max-width:999px) { body:not(.page-home) #footer .footer-main { grid-template-columns:minmax(0,12rem) minmax(0,1fr); gap:1.25rem; } body:not(.page-home) #footer .partner-logos__row { grid-template-columns:repeat(3, max-content); justify-content:end; gap:1.1rem 1.5rem; } body:not(.page-home) #footer .footer-harbour { object-position:46% bottom; } body:not(.page-home) #footer, body:not(.page-home) #footer > .container { min-height:340px; } } /* Mobile: stack — identity first, logos second, legal row left-aligned and stacked. A narrow central slice: boats, masonry, water, mountains. */ @media (max-width:699px) { body:not(.page-home) #footer, body:not(.page-home) #footer > .container { min-height:300px; } body:not(.page-home) #footer > .container { padding:1.5rem 1rem 1.35rem; gap:1rem; } body:not(.page-home) #footer .footer-main { grid-template-columns:1fr; gap:1rem; justify-items:center; } body:not(.page-home) #footer .footer-identity { align-items:center; justify-content:center; width:100%; text-align:center; } body:not(.page-home) #footer .footer-identity img { width:min(13rem, 72vw); } body:not(.page-home) #footer .partner-logos { width:100%; } body:not(.page-home) #footer .partner-logos__row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.9rem 1.4rem; width:100%; } body:not(.page-home) #footer .partner-logos__link { height:28px; } body:not(.page-home) #footer .partner-logos__img { width:auto; max-width:100%; height:23px; } body:not(.page-home) #footer .footer-meta { flex-direction:column; align-items:center; text-align:center; gap:.35rem; } body:not(.page-home) #footer .footer-harbour { object-position:43% bottom; } } /* Legal notice: a quiet colophon rather than another illustrated hero. The marks are deliberately small and typographic: traces of provenance, not invented historical artefacts. */ body.page-legal #body-wrapper > .container { max-width:58rem; } body.page-legal .legal-colophon { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(17rem,.9fr); align-items:end; gap:clamp(2rem,7vw,6rem); min-height:0; margin:clamp(.5rem,2vw,1.5rem) 0 clamp(2rem,4vw,3rem); padding:0 0 2.2rem; border-bottom:1px solid rgba(21,45,77,.14); } body.page-legal .legal-colophon__heading { max-width:34rem; } body.page-legal .legal-colophon__heading .feature-kicker { margin-bottom:1rem !important; } body.page-legal .legal-colophon h1 { margin:0 0 1rem; max-width:15ch; font-size:clamp(2.25rem,5vw,4.25rem); line-height:.98; letter-spacing:-.035em; } body.page-legal .legal-colophon__lede { max-width:31rem; margin:0; color:var(--muted); font-size:.95rem; line-height:1.55; } body.page-legal .legal-colophon__marks { display:flex; align-items:center; justify-content:flex-end; gap:clamp(.7rem,2vw,1.5rem); min-height:8rem; color:var(--indigo); } body.page-legal .legal-mark { display:inline-flex; flex-direction:column; justify-content:center; align-items:center; flex:0 0 auto; color:var(--indigo); } body.page-legal .legal-mark small, body.page-legal .legal-mark b { font-family:inherit; font-size:.54rem; font-weight:700; letter-spacing:.14em; line-height:1.45; text-transform:uppercase; } body.page-legal .legal-mark--accession { width:6.25rem; height:6.25rem; gap:.16rem; border:1px solid rgba(21,45,77,.58); outline:1px solid rgba(21,45,77,.25); outline-offset:3px; transform:rotate(-3deg); } body.page-legal .legal-mark--accession b { font-size:.62rem; } body.page-legal .legal-mark--printer { width:2.8rem; height:2.8rem; border:1px solid rgba(21,45,77,.58); border-radius:50%; font-family:Georgia,serif; font-size:1.8rem; line-height:1; transform:rotate(7deg); } body.page-legal .legal-mark--correction { align-items:flex-start; gap:.05rem; padding:.3rem .45rem; border-left:1px solid rgba(21,45,77,.45); transform:rotate(-5deg); } body.page-legal .legal-mark--correction i { align-self:flex-end; font-family:Georgia,serif; font-size:1.4rem; font-style:normal; line-height:.8; } body.page-legal .legal-mark--correction s { font-size:.62rem; opacity:.62; } body.page-legal .legal-mark--correction b { font-size:.72rem; } body.page-legal .legal-mark--imprint { align-items:flex-start; gap:.2rem; max-width:8rem; padding-top:.55rem; border-top:1px solid rgba(21,45,77,.55); transform:rotate(2deg); } body.page-legal .legal-mark--imprint b { font-size:.58rem; } body.page-legal #body-wrapper h3 { margin-top:2.2rem; margin-bottom:.65rem; font-size:1.05rem; letter-spacing:-.01em; } body.page-legal #body-wrapper h3:first-of-type { margin-top:0; } body.page-legal #body-wrapper h3 + p { max-width:47rem; } body.page-legal #body-wrapper p { line-height:1.62; } /* About hero: the harbour materialises from the paper rather than appearing as a rectangular banner. The documentary plate below remains separate. */ body.page-about .about-hero { position:relative; width:100%; aspect-ratio:1942 / 809; min-height:0; margin:1.5rem 0 1.1rem; overflow:hidden; } body.page-about .about-hero__content { position:relative; z-index:1; width:min(42%,24rem); padding:1.25rem 0 2.5rem; } body.page-about .about-hero__content h1 { display:block; width:75%; max-width:75%; margin:.9rem 0 0; font-size:clamp(2.35rem,4.5vw,4rem); line-height:1.02; letter-spacing:-.035em; } body.page-about .about-hero__figure { position:absolute; z-index:0; inset:0; margin:0; background-image:image-set(url('../images/about_hero.avif%3Fv=20260912') type('image/avif'), url('../images/about_hero.webp%3Fv=20260912') type('image/webp'), url('../images/about_hero.png%3Fv=20260912') type('image/png')); background-position:right bottom; background-size:100% auto; background-repeat:no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.16) 18%, #000 43%), linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%); -webkit-mask-repeat:no-repeat; -webkit-mask-composite:source-in; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.16) 18%, #000 43%), linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%); mask-repeat:no-repeat; mask-composite:intersect; pointer-events:none; } /* About: the supplied documentary image is evidence, not a second hero. Keep it at a modest plate scale beside the Who? copy, without a decorative frame. */ body.page-about .about-plate { float:right; width:min(41%, 22rem); margin:.25rem 0 1.75rem clamp(1.5rem,4vw,3.5rem); padding:0; border:0; background:var(--paper); box-shadow:none; } body.page-about .about-plate img { display:block; width:100%; height:auto; } body.page-about #body-wrapper h3 { clear:both; } @media (max-width:699px) { body.page-legal .legal-colophon { display:block; min-height:0; margin:1rem 0 2.5rem; padding-bottom:1.7rem; } body.page-legal .legal-colophon h1 { max-width:12ch; font-size:clamp(2.35rem,11vw,3.5rem); } body.page-legal .legal-colophon__marks { justify-content:flex-start; margin-top:2.25rem; min-height:0; gap:1rem; transform:scale(.86); transform-origin:left center; } body.page-legal #body-wrapper h3 { margin-top:1.75rem; } body.page-about .about-plate { float:none; width:auto; margin:1.25rem 0 1.5rem; } body.page-about .about-hero { display:flex; flex-direction:column; min-height:0; margin:-1.5rem 0 1rem; padding-top:1.25rem; aspect-ratio:auto; } body.page-about .about-hero__content { display:contents; } body.page-about .about-hero__content .feature-kicker { order:1; margin-bottom:.25rem !important; } body.page-about .about-hero__content h1 { position:absolute; z-index:2; top:4.5rem; left:0; order:2; width:58%; max-width:58%; margin:0; font-size:clamp(1.8rem,7vw,2.6rem); line-height:1.05; } body.page-about .about-hero__figure { position:relative; order:3; inset:auto; width:calc(100% + 2rem); height:clamp(15rem,60vw,20rem); margin:1.5rem -1rem 0; background-size:auto 100%; background-position:78% bottom; } } /* Guide screenshots: keep this separate from the home-page split demos. The guide shortcode's width= values are useful hints in Markdown, but they should not make documentation screenshots unreadably small. */ body.page-guide .split { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(1.75rem,4vw,3.5rem); align-items:start; margin:2rem 0; padding:1rem 0; } body.page-guide .split .media { width:100% !important; max-width:none !important; } body.page-guide .split .media img { width:100% !important; max-width:100% !important; height:auto !important; cursor:zoom-in; } body.page-guide .split .media img:hover { box-shadow:0 10px 24px rgba(21,45,77,.18); } /* Full-size screenshot viewer. It is enabled only by the Guide page's JavaScript, so no other page receives this interaction. */ .guide-lightbox { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem); background:rgba(15,28,46,.78); cursor:zoom-out; } .guide-lightbox[hidden] { display:none; } .guide-lightbox img { display:block; max-width:min(96vw,1400px); max-height:92vh; width:auto; height:auto; object-fit:contain; background:var(--paper); box-shadow:0 18px 50px rgba(0,0,0,.28); cursor:default; } @media (max-width:768px) { body.page-guide .split { grid-template-columns:1fr; gap:1rem; margin:1.25rem 0; padding:.75rem 0; } body.page-guide .split .media { order:-1; } } /* Downloads: three objects, one architectural composition. The existing release links remain intact; these rules change only their presentation. */ .page-download .dl-hero { margin:0 0 2.25rem; padding-top:.5rem; } .page-download .dl-hero h1 { margin:.45rem 0 .75rem; font-size:clamp(2.2rem, 4.5vw, 4.2rem); line-height:1; letter-spacing:-.035em; } .page-download .dl-hero__meta { margin:0; color:var(--muted); font-size:.82rem; text-align:left !important; } .page-download .dl-version { padding:0; color:var(--indigo); background:none; border-radius:0; font-weight:700; } .page-download .dl-jump { display:none; } .page-download .dl-platforms { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border:1px solid rgba(21,45,77,.35); background:var(--paper); } .page-download .dl-platform { display:flex; flex-direction:column; min-height:35rem; margin:0; padding:1.35rem clamp(1.1rem, 2.3vw, 2.35rem) 1.5rem; border:0; border-right:1px solid rgba(21,45,77,.3); border-radius:0; background:var(--paper); transition:background .2s ease, color .2s ease; } .page-download .dl-platform:last-child { border-right:0; } /* When Windows/Linux are hidden for a detected Mac visitor, the remaining card would otherwise sit alone in a 3-column grid, off-centre with two empty columns beside it — collapse to one centred column instead. */ html.os-mac:not(.os-show-all) .page-download .dl-platforms { grid-template-columns:minmax(0, 1fr); max-width:26rem; margin:0 auto; } html.os-mac:not(.os-show-all) .page-download [data-dl-platform="mac"] { border-right:0; } /* "Show all platforms" toggle: only meaningful (and only shown) once something has actually been hidden by the OS check above. */ .page-download .dl-show-all-toggle { display:none; } html.os-mac .page-download .dl-show-all-toggle { display:block; margin:1.1rem auto 0; max-width:26rem; text-align:center; } .page-download .dl-show-all-toggle button { padding:0; border:0; background:none; color:var(--muted); font-size:.78rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; } .page-download .dl-show-all-toggle button:hover { color:var(--indigo-soft); } .page-download .dl-platform.is-suggested { margin:0; padding:1.35rem clamp(1.1rem, 2.3vw, 2.35rem) 1.5rem; border-color:rgba(21,45,77,.3); background:var(--indigo); color:rgba(255,255,255,.88); box-shadow:none; } .page-download .dl-platform__top { display:flex; justify-content:space-between; color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; } .page-download .dl-platform.is-suggested .dl-platform__top { color:rgba(255,255,255,.7); } .page-download .dl-platform__mark { display:flex; align-items:center; justify-content:center; height:10rem; margin:1.25rem 0 .8rem; color:var(--indigo); font-family:Arial, sans-serif; font-size:8rem; font-weight:400; line-height:1; } .page-download .dl-platform__mark--windows { font-size:9rem; font-weight:300; } .page-download .dl-platform__mark--linux { font-size:5.3rem; } .page-download .dl-platform.is-suggested .dl-platform__mark { color:var(--paper); } .page-download .dl-platform h2 { margin:0 0 .9rem; color:var(--ink); font-size:clamp(1.4rem, 2.1vw, 2rem); line-height:1.12; letter-spacing:-.02em; } .page-download .dl-platform.is-suggested h2 { color:var(--paper); } .page-download .dl-platform__note { max-width:20rem; margin:0; color:var(--ink); font-size:.95rem; line-height:1.45; text-align:left !important; } .page-download .dl-platform.is-suggested .dl-platform__note { color:rgba(255,255,255,.8); } .page-download .dl-actions { display:flex; flex-direction:column; align-items:stretch; gap:.9rem; margin:auto 0 0; padding-top:2rem; text-align:left !important; } .page-download .dl-actions .btn { display:flex; align-items:center; justify-content:space-between; min-height:3.9rem; margin:0; padding:.8rem 1rem; border:1px solid var(--indigo); border-radius:0; background:var(--indigo); color:var(--paper); font-size:.78rem; font-weight:700; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; box-shadow:none; } .page-download .dl-actions .btn span { font-size:1.25rem; line-height:1; } .page-download .dl-platform.is-suggested .dl-actions .btn { background:var(--paper); color:var(--indigo); border-color:var(--paper); } .page-download .dl-secondary-action { align-self:flex-start; color:var(--indigo); font-size:.76rem; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; } .page-download .dl-platform.is-suggested .dl-secondary-action { color:rgba(255,255,255,.82); } .page-download .dl-support, .page-download .dl-technical { margin-top:4rem; padding-top:1.75rem; border-top:1px solid rgba(21,45,77,.2); } .page-download .dl-support h2 { margin:.4rem 0 .75rem; font-size:clamp(1.7rem, 3vw, 2.7rem); line-height:1.05; } .page-download .dl-support .dl-platform__note { max-width:42rem; text-align:left !important; } .page-download .dl-support .dl-actions { flex-direction:row; flex-wrap:wrap; align-items:center; margin:1.5rem 0 1rem; padding:0; } .page-download .dl-support .dl-actions .btn { display:inline-flex; min-height:auto; width:auto; font-size:.72rem; } .page-download .dl-support .dl-actions .btn-outline { background:transparent; color:var(--indigo); } .page-download .dl-support .dl-actions .btn-link { background:transparent; border:0; color:var(--indigo-soft); } .page-download .dl-foot-links, .page-download .dl-help { text-align:left !important; font-size:.8rem; color:var(--muted); } .page-download .dl-technical { margin-top:2.5rem; } .page-download .dl-technical .dl-details { margin:0 0 1rem; } .page-download .dl-technical .dl-details summary { color:var(--indigo); font-weight:700; } @media (max-width:999px) and (min-width:700px) { .page-download .dl-platform { min-height:32rem; padding-left:1rem; padding-right:1rem; } .page-download .dl-platform__mark { height:8rem; font-size:6.5rem; } .page-download .dl-platform__mark--windows { font-size:7.5rem; } .page-download .dl-platform h2 { font-size:1.45rem; } } @media (max-width:699px) { .page-download .dl-hero { margin-bottom:1.5rem; } .page-download .dl-hero h1 { font-size:2.6rem; } .page-download .dl-hero__meta { line-height:1.7; } .page-download .dl-platforms { display:block; border-width:1px 0; } .page-download .dl-platform, .page-download .dl-platform.is-suggested { min-height:0; padding:1.2rem 1rem 1.4rem; border-right:0; border-bottom:1px solid rgba(21,45,77,.3); } .page-download .dl-platform:last-child { border-bottom:0; } .page-download .dl-platform__mark { justify-content:flex-start; height:5rem; margin:.5rem 0 .35rem; font-size:4.5rem; } .page-download .dl-platform__mark--windows { font-size:5rem; } .page-download .dl-platform__mark--linux { font-size:3rem; } .page-download .dl-platform h2 { font-size:1.55rem; } .page-download .dl-platform__note { max-width:30rem; } .page-download .dl-actions { padding-top:1.4rem; } .page-download .dl-actions .btn { min-height:3.3rem; } .page-download .dl-support, .page-download .dl-technical { margin-top:2.5rem; } .page-download .dl-support .dl-actions { display:flex; } .page-download .dl-support .dl-actions .btn { width:100%; } } /* Compact the first viewport: the installers should read as a choice, not as three tall release notes. */ .page-download .dl-hero h1 { font-size:clamp(1.8rem, 3.2vw, 2.65rem); } .page-download .dl-platform { min-height:16rem; padding:1rem clamp(.85rem, 1.7vw, 1.5rem) 1.1rem; } .page-download .dl-platform.is-suggested { padding:1rem clamp(.85rem, 1.7vw, 1.5rem) 1.1rem; } .page-download .dl-platform__mark { height:5.5rem; margin:.8rem 0 .6rem; } .page-download .dl-platform__mark img { display:none; width:auto; height:5.5rem; max-width:5.5rem; object-fit:contain; } .page-download .dl-platform__mark img { width:auto; max-width:5.5rem; } .page-download .dl-platform__mark-light { display:block !important; } .page-download .dl-platform.is-suggested .dl-platform__mark-light { display:none !important; } .page-download .dl-platform.is-suggested .dl-platform__mark-dark { display:block !important; } .page-download .dl-platform h2 { margin-bottom:.55rem; font-size:clamp(1.15rem, 1.65vw, 1.5rem); } .page-download .dl-platform__note { font-size:.83rem; line-height:1.35; } .page-download .dl-actions { gap:.55rem; padding-top:1.1rem; } .page-download .dl-actions .btn { min-height:2.7rem; margin-left:.5rem; margin-right:.5rem; padding:.55rem .7rem; font-size:.66rem; } .page-download .dl-actions .btn { width:100%; min-width:0; max-width:100%; align-self:stretch; margin-left:0; margin-right:0; box-sizing:border-box; } .page-download .dl-actions .btn .dl-button-label { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; white-space:normal; } .page-download .dl-actions .btn > span:last-child { flex:0 0 auto; margin-left:.5rem; } .page-download .dl-platforms .dl-actions .btn { font-size:.58rem !important; line-height:1.15; letter-spacing:.055em; } .page-download .dl-platforms .dl-actions .btn .dl-button-label { font-size:inherit !important; line-height:inherit; white-space:nowrap; overflow:visible; } .page-download .dl-secondary-action { font-size:.66rem; } .page-download .dl-suggested-label, .page-download .dl-arch-hint { display:none !important; } .page-download .dl-platform#linux .dl-actions { margin-top:auto; } .page-download .dl-platform#linux .dl-secondary-action { text-transform:none; letter-spacing:.03em; } @media (max-width:699px) { .page-download .dl-platform, .page-download .dl-platform.is-suggested { padding:.9rem 1rem 1rem; } .page-download .dl-platform__mark { height:4rem; margin:.35rem 0 .25rem; } .page-download .dl-platform__mark img { width:4rem; height:4rem; } .page-download .dl-platform__mark img { width:auto; max-width:4rem; } .page-download .dl-platform h2 { font-size:1.3rem; } .page-download .dl-platform__note { font-size:.84rem; } } /* Compact visual status markers for the feature comparison table. */ #body-wrapper .container table .table-status { display:inline-flex; align-items:center; justify-content:center; width:1.15rem; height:1.15rem; color:var(--indigo); font-family:Arial, sans-serif; font-size:1.15rem; font-weight:700; line-height:1; vertical-align:middle; } #body-wrapper .container table .table-status--loading { display:inline-block; width:1.35rem; height:.9rem; object-fit:contain; font-size:inherit; } .page-functions #body-wrapper .container table .table-status--yes { font-family:"Helvetica Neue", Arial, sans-serif; font-size:1.05rem; font-weight:600; } .page-functions #body-wrapper .container table .table-status-partial { color:rgba(21,45,77,.88); font-weight:500; } /* Narrow, shaded status columns — scoped to the feature-comparison table specifically (identified by its ✓/×/Partial .table-status marks) rather than every table on the site. It was unscoped before, which is why other pages' plain two-column tables (e.g. Source code) inherited the same forced 12%-wide second column and wrapped their prose into a tall, narrow strip. */ #body-wrapper .container table:has(.table-status) th:nth-child(n+2), #body-wrapper .container table:has(.table-status) td:nth-child(n+2) { width:12%; min-width:6.2rem; } #body-wrapper .container table:has(.table-status) th:nth-child(2), #body-wrapper .container table:has(.table-status) td:nth-child(2) { background:rgba(21,45,77,.025); border-left:1px solid rgba(21,45,77,.12); padding-left:1rem; } .page-functions #body-wrapper .container table .table-platforms { flex-wrap:nowrap; white-space:nowrap; } /* Source Code hero: keep the machine and its loose parts fully opaque. The page-colour overlays belong only to genuinely empty background regions. */ .page-source .source-hero { position:relative; width:100%; aspect-ratio:1942 / 809; min-height:0; margin:1.5rem 0 0; } .page-source .source-hero__copy { position:relative; z-index:1; width:min(42%, 24rem); padding:1.25rem 0 2.5rem; } .page-source .source-hero__copy h1 { margin:.9rem 0 1.4rem; color:var(--indigo); font-size:clamp(2.35rem, 4.5vw, 4rem); line-height:1.02; letter-spacing:-.035em; } .page-source .source-intro { max-width:36rem; margin:2rem 0 0; line-height:1.5; text-align:left !important; } .page-source .source-hero__art { position:absolute; z-index:0; inset:0; margin:0; overflow:hidden; pointer-events:none; } .page-source .source-hero__art img { display:block; width:100%; height:auto; } .page-source .source-hero__art::before, .page-source .source-hero__art::after { content:""; position:absolute; left:0; pointer-events:none; } .page-source .source-hero__art::before { top:0; width:38%; height:48%; background:linear-gradient(to right, var(--paper) 0%, color-mix(in srgb, var(--paper) 90%, transparent) 35%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%); } .page-source .source-hero__art::after { bottom:0; width:28%; height:30%; background:linear-gradient(to right, var(--paper) 0%, color-mix(in srgb, var(--paper) 85%, transparent) 45%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 32%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 32%,#000 100%); } .page-source .source-origin { max-width:42rem; margin:1rem 0 4.5rem; line-height:1.5; } .page-source h3 { margin-top:2rem; } @media (max-width:699px) { .page-source .source-hero { height:22rem; min-height:22rem; aspect-ratio:auto; margin-top:.75rem; } .page-source .source-hero__copy { width:58%; padding-top:.75rem; } .page-source .source-hero__copy h1 { margin:.65rem 0 1rem; font-size:clamp(2rem, 9vw, 2.7rem); } .page-source .source-intro { font-size:.95rem; } .page-source .source-hero__art img { width:auto; height:100%; max-width:none; margin-left:auto; } .page-source .source-origin { margin:1rem 0 2.25rem; } } .table-platforms { display:inline-flex; align-items:center; gap:.35em; flex-wrap:wrap; vertical-align:middle; } .table-platform-icon { display:block; width:auto; height:1.25em; max-width:1.35em; object-fit:contain; }