body.content-page { background: radial-gradient(circle at 10% 0%, #f3f9ff 0%, var(--bg) 52%); } .page-content { padding: clamp(24px, 4vw, 44px) 0 clamp(54px, 7vw, 82px); } .content-shell { max-width: 920px; margin-left: auto; margin-right: auto; color: var(--ink); line-height: 1.72; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .content-shell h2, .content-shell h3 { scroll-margin-top: 96px; } /* Default layout pages (manual and manual chapters) render markdown directly, so the shell itself becomes the reading surface. */ .layout-default .content-shell { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: clamp(18px, 3.1vw, 36px); } /* Manual/default markdown pages can have long SEO-focused H1 titles. Keep them prominent without overpowering surrounding body copy. */ .layout-default .content-shell > h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.14; margin-bottom: 0.95rem; } /* Page layouts already wrap content in .home/.post cards. (.layout-post gets its own narrower measure in the blog post section.) */ .layout-page .content-shell { max-width: 980px; } .post, .home { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: clamp(18px, 3.1vw, 36px); } .post-meta { color: var(--ink-soft); font-size: 0.94rem; } .post-content, .home { color: inherit; line-height: inherit; } .content-shell p, .post-content p, .home p { margin: 0 0 1rem; } .last-updated { margin-top: 32px; text-align: right; } .content-shell h2, .post-content h2, .home h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; margin-top: 1.6rem; margin-bottom: 0.55rem; } .content-shell h3, .post-content h3, .home h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin-top: 1.15rem; margin-bottom: 0.4rem; } .content-shell ul, .content-shell ol, .post-content ul, .post-content ol, .home ul, .home ol { padding-left: 1.35rem; } .content-shell li, .post-content li, .home li { margin: 0.32rem 0; } .content-shell blockquote, .post-content blockquote, .home blockquote { margin: 1.2rem 0; padding: 0.8rem 1rem; border-left: 4px solid var(--accent); background: var(--surface-alt); border-radius: 0 10px 10px 0; } /* Semantic note/warning panels in the manual. Keyed off the kramdown-emitted class, not text sniffing. The amber/red accents are hardcoded (they have no theme variable); everything else leans on the design tokens so the panels track light/dark mode with the rest of the page. */ .content-shell blockquote.note, .content-shell blockquote.warning { border-left-width: 4px; border-radius: 0 10px 10px 0; } .content-shell blockquote.note { border-left-color: #d9920a; background: color-mix(in srgb, #d9920a 8%, var(--surface-alt)); } .content-shell blockquote.warning { border-left-color: #d23b3b; background: color-mix(in srgb, #d23b3b 8%, var(--surface-alt)); } .content-shell blockquote.note::before, .content-shell blockquote.warning::before { display: block; margin-bottom: 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .content-shell blockquote.note::before { content: "Note"; color: #b97800; } .content-shell blockquote.warning::before { content: "Warning"; color: #c22d2d; } /* Localised labels for pt-BR manual pages (the tag carries lang="pt-BR"). */ :lang(pt-BR) .content-shell blockquote.note::before { content: "Nota"; } :lang(pt-BR) .content-shell blockquote.warning::before { content: "Atenção"; } .content-shell hr, .post-content hr, .home hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; } .content-shell code, .post-content code, .home code { background: rgba(10, 78, 163, 0.08); border: 1px solid rgba(10, 78, 163, 0.14); border-radius: 6px; padding: 0.08rem 0.35rem; font-size: 0.92em; } .content-shell pre, .post-content pre, .home pre { background: #111725; color: #ecf2ff; border-radius: 10px; padding: 12px; overflow: auto; } .content-shell pre code, .post-content pre code, .home pre code { background: none; border: 0; padding: 0; color: inherit; } .content-shell table, .post-content table, .home table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; } .content-shell img, .post-content img, .home img, .content-shell picture, .post-content picture, .home picture { max-width: 100%; height: auto; } /* Inline toolbar icons in manual text should track text size, not full image dimensions. */ .content-shell picture.manual-inline-icon, .post-content picture.manual-inline-icon, .home picture.manual-inline-icon, .content-shell img.manual-inline-icon, .post-content img.manual-inline-icon, .home img.manual-inline-icon { height: 1.15em; width: auto; max-height: 1.15em; display: inline-block; filter: var(--manual-inline-icon-filter); vertical-align: -0.2em; margin: 0 0.12em; } .responsive-video { position: relative; width: 100%; margin: 1rem 0; } .responsive-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; } .videoContainer { margin: 1rem 0; } .videoContainer video { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; } .video-caption { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--ink-soft); text-align: center; } .content-shell th, .content-shell td, .post-content th, .post-content td, .home th, .home td { border: 1px solid var(--line); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; } .post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } .post-link { color: var(--brand-strong); } .rss-subscribe { margin-top: 18px; color: var(--ink-soft); } .content-hero { margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .content-hero h1 { margin: 0; font-size: clamp(2.2rem, 4.8vw, 4rem); } .content-hero p { margin: 0.5rem 0 0; color: var(--ink-soft); } .content-hero .manual-version { display: inline-flex; align-items: center; margin-top: 0.9rem; padding: 0.18rem 0.48rem; border: 1px solid rgba(10, 78, 163, 0.14); border-radius: 999px; background: rgba(10, 78, 163, 0.045); color: var(--ink-soft); font-size: clamp(0.92rem, 1.25vw, 1rem); font-weight: 650; } /* Centered download button in the hero. Reuses .cta.secondary for the look; here we only handle layout, spacing, and icon sizing. */ .content-hero .manual-download { display: inline-flex; align-items: center; gap: 8px; margin-top: 1rem; margin-bottom: 0.35rem; text-decoration: none; } .content-hero .manual-download svg { width: 18px; height: 18px; flex-shrink: 0; } .content-hero .manual-toc-title { margin: 1.35rem 0 0; color: var(--ink); font-family: var(--font-sans); font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: 0; } /* ===== Manual TOC page ===== */ /* The TOC page drops the single reading card so chapter cards sit on the page. body-prefixed to outrank .layout-default .content-shell in both color schemes. */ body.manual-toc-page .content-shell { max-width: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; } /* From iPad sizes up, the version pill sits beside the page title. */ @media (min-width: 768px) { .manual-toc-page .content-hero { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; } .manual-toc-page .content-hero .manual-version { margin-top: 0; } /* Push the download button to the right edge of the content area, leaving the title and version pill on the left. */ .manual-toc-page .content-hero .manual-download { margin-top: 0; margin-bottom: 0; margin-left: auto; } .manual-toc-page .content-hero .manual-toc-title { flex-basis: 100%; } } /* Two explicit column stacks (not CSS multicol — Safari paints fragment artifacts at column boundaries) so card placement is deterministic. */ .manual-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; } .manual-toc-col { display: grid; gap: 18px; } .toc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 1px 2px rgba(13, 26, 50, 0.04); } .toc-card-header { display: flex; align-items: center; gap: 12px; } .toc-card-header .card-icon { margin-bottom: 0; } .toc-card h2 { margin: 0; font-family: var(--font-sans); font-size: 1.2rem; line-height: 1.3; } .toc-card h2 a { color: var(--ink); } .toc-card h2 a:hover { color: var(--brand); } .toc-card-links { list-style: none; margin: 12px 0 0; padding: 0; } .toc-card-links li { margin: 0; } .toc-card-links a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.4; } .toc-card-links a:hover { background: rgba(10, 78, 163, 0.06); color: var(--brand-strong); } .toc-plain { list-style: none; margin: 12px 0 0; padding: 0; } .toc-plain li { margin: 0; padding: 7px 10px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.45; } .manual-reference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .toc-years { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0 10px; } .toc-years a { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-alt); color: var(--brand); font-size: 0.9rem; font-weight: 600; white-space: nowrap; transition: border-color 0.16s ease, color 0.16s ease; } .toc-years a:hover { border-color: var(--brand); color: var(--brand-strong); } @media (max-width: 860px) { .manual-toc, .manual-reference { grid-template-columns: 1fr; } } /* ===== Manual chapter pages ===== */ /* "On this page" sidebar: only on wide displays, sitting in the margin beside the reading card; the card + sidebar re-center as one unit. */ .manual-sidebar { display: none; } @media (min-width: 1280px) { .manual-layout.has-sidebar { width: min(1240px, 94vw); display: grid; grid-template-columns: 240px minmax(0, 920px); gap: 44px; justify-content: center; align-items: start; } .manual-layout.has-sidebar .manual-sidebar:not([hidden]) { display: block; position: sticky; top: 96px; max-height: calc(100vh - 128px); overflow-y: auto; padding: 6px 2px 12px 0; } } .manual-sidebar-title { margin: 0 0 10px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); } .manual-sidebar-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); } .manual-sidebar-list li { margin: 0; } .manual-sidebar-list a { display: block; padding: 5px 8px 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.4; } .manual-sidebar-list .manual-sidebar-sub a { padding-left: 26px; } .manual-sidebar-list a:hover { color: var(--brand); } .manual-sidebar-list a.is-active { color: var(--brand-strong); border-left-color: var(--brand); font-weight: 600; } /* Shared "back to parent page" link, used by manual chapters and blog posts. */ .manual-backlink, .post-backlink { margin: 0 0 1.1rem; font-size: 0.95rem; } .manual-backlink a, .post-backlink a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--brand); } .manual-backlink a::before, .post-backlink a::before { content: "\2039"; font-size: 1.2em; line-height: 1; } .manual-backlink a:hover, .post-backlink a:hover { color: var(--brand-strong); } /* Sequential prev/next pagination cards at the end of each chapter. */ .page-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 2.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); } .pager-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; transition: border-color 0.16s ease, background-color 0.16s ease; } .pager-prev { grid-column: 1; } .pager-next { grid-column: 2; text-align: right; } .pager-card:hover { border-color: rgba(10, 78, 163, 0.4); background: rgba(10, 78, 163, 0.04); } .pager-dir { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); } .pager-prev .pager-dir::before { content: "\2039\00a0"; } .pager-next .pager-dir::after { content: "\00a0\203A"; } .pager-title { font-weight: 600; color: var(--brand); line-height: 1.35; } .pager-card:hover .pager-title { color: var(--brand-strong); } /* Manual screenshots: centered with a soft shadow (frames have transparent corners, so drop-shadow follows the artwork instead of the bounding box). */ .userManualLargeImage { margin: 1.5rem auto; text-align: center; } .userManualLargeImage img { max-width: 100%; height: auto; filter: drop-shadow(0 12px 26px rgba(13, 26, 50, 0.16)); } /* ===== Auto-framed screenshots ===== Wrap a RAW (unframed) screenshot and paint a device bezel over it via CSS, following the ReverseChord overlay pattern. The figure's box matches the bezel PNG; percentage padding positions the screenshot inside the bezel's transparent screen window; ::before paints the bezel on top. Geometry measured from the 1880x2640 bezel PNG (transparent screen window 1668x2420, aspect 0.69): padding left/right 5.638%, top/bottom 4.167%; screen-corner radius ~64px -> ~3.84% of window width. */ .device-frame { margin: 1.5rem auto; width: 100%; max-width: 420px; /* Box matches the bezel PNG's outer aspect (1880x2640) so the contained bezel fills it exactly and the percentage padding below lands on the transparent screen window. */ aspect-ratio: 1880 / 2640; /* Screen window insets. CSS resolves percentage padding (all sides) against the box WIDTH, so the vertical inset is the bezel's true top/bottom fraction of HEIGHT (110/2640 = 4.167%) re-expressed over width: 4.167% x (2640/1880) = 5.851%. Horizontal is 106/1880 = 5.638%. */ padding: 5.851% 5.638%; position: relative; box-sizing: border-box; filter: drop-shadow(0 12px 26px rgba(13, 26, 50, 0.16)); } .device-frame picture { display: block; width: 100%; height: 100%; margin: 0; } .device-frame img { display: block; width: 100%; height: 100%; margin: 0; /* Fill the screen window exactly; the source is authored at the window aspect (0.689) so cover never crops. */ object-fit: cover; position: relative; z-index: 1; /* Round the screenshot to match the bezel's screen corners. Horizontal radius % is of the screenshot width, vertical % of its height; ~64px on a 1668x2420 window -> 3.8% / 2.6%. */ border-radius: 3.8% / 2.6%; /* The overlay supplies the shadow for the whole device. */ filter: none; } .device-frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: center / contain no-repeat; } .device-frame--ipad-portrait::before { background-image: url("/assets/img/bezels/iPad%20Pro%20%28M5%29%2011%22%20-%20Silver%20-%20Portrait.png"); background-image: image-set(url("/assets/img/bezels/iPad%20Pro%20%28M5%29%2011%22%20-%20Silver%20-%20Portrait.webp") type("image/webp"), url("/assets/img/bezels/iPad%20Pro%20%28M5%29%2011%22%20-%20Silver%20-%20Portrait.png") type("image/png")); } .layout-default .content-shell > picture:not(.manual-inline-icon):not(.notfound-icon) img:not(.manual-inline-icon):not(.notfound-icon), .layout-default .content-shell p > picture:not(.manual-inline-icon):not(.notfound-icon) img:not(.manual-inline-icon):not(.notfound-icon) { display: block; margin: 0.4rem auto; filter: drop-shadow(0 12px 26px rgba(13, 26, 50, 0.16)); } /* Section headings inside long manual chapters need room to breathe, while staying clearly subordinate to the h2 section titles above them. */ .layout-default .content-shell h3 { margin-top: 1.4rem; font-size: 1.1rem; } /* ===== Blog index ===== */ /* Like the manual TOC, the blog index drops the single reading card so each post renders as its own card on the page background. */ body.blog-index-page .content-shell { max-width: 860px; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; } .blog-hero { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; } .blog-hero .rss-subscribe { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.95rem; color: var(--ink-soft); } .rss-icon { align-self: center; flex: none; color: #e8830c; } .blog-index-page .post-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(13, 26, 50, 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .blog-index-page .post-list li:hover, .blog-index-page .post-list li:focus-within { transform: translateY(-2px); border-color: rgba(10, 78, 163, 0.35); box-shadow: 0 18px 36px -16px rgba(13, 26, 50, 0.28); } .blog-index-page .post-list .post-meta { display: inline-block; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; font-weight: 700; } .blog-index-page .post-list h2 { margin: 0.4rem 0 0.5rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.2; } .blog-index-page .post-link { color: var(--ink); } .blog-index-page .post-link:hover { color: var(--brand); } .blog-index-page .post-excerpt, .blog-index-page .post-excerpt p { margin: 0; color: var(--ink-soft); } /* ===== Blog post ===== */ .layout-post .content-shell { max-width: 880px; } .post-header { margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .post-title { margin-bottom: 8px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.15; } .post-header .post-meta { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.8rem; font-weight: 600; } .post-content img { border-radius: 10px; } .post-content th { background: var(--surface-alt); } .post-footer { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-alt); color: var(--ink-soft); line-height: 1.6; } .post-footer a { font-weight: 700; } .read-more-link { display: inline-flex; align-items: baseline; gap: 0.16rem; margin-left: 0.15rem; font-weight: 700; white-space: nowrap; } .read-more-link::after { content: "\203A"; } .notfound { padding: clamp(16px, 3vw, 24px) 0 clamp(16px, 3vw, 30px); } .notfound-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3.4vw, 32px); align-items: center; padding: clamp(8px, 1.5vw, 14px); } .notfound-icon { width: clamp(118px, 18vw, 180px); height: auto; border-radius: 26%; box-shadow: 0 12px 26px rgba(10, 78, 163, 0.18); } picture.notfound-icon { position: relative; display: inline-block; box-shadow: none; } picture.notfound-icon::before { content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 78, 163, 0.16), transparent 72%); } .notfound-code { margin: 0 0 0.2rem; display: inline-block; background: linear-gradient(105deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: 0.08em; font-size: 1rem; text-transform: uppercase; } .notfound-copy h1 { margin: 0 0 0.6rem; font-size: clamp(2rem, 3.7vw, 3rem); } .notfound-copy p { margin: 0 0 0.55rem; color: var(--ink-soft); max-width: 52ch; } .notfound-sub { font-weight: 600; } .notfound .hero-cta { margin-top: 14px; } @media (max-width: 760px) { .notfound-card { grid-template-columns: 1fr; text-align: center; } .notfound-icon { justify-self: center; } .notfound-copy p { margin-left: auto; margin-right: auto; } .notfound .hero-cta { justify-content: center; } } @media (max-width: 720px) { .content-shell, .layout-page .content-shell, .layout-post .content-shell { max-width: none; } } @media (max-width: 620px) { .page-content { padding-top: 22px; } .page-nav { grid-template-columns: 1fr; } .pager-prev, .pager-next { grid-column: 1; } .content-shell table, .post-content table, .home table { display: block; overflow-x: auto; } } @media (prefers-color-scheme: dark) { body.content-page { background: radial-gradient(circle at 10% 0%, #18233a 0%, var(--bg) 56%); } .layout-default .content-shell, .post, .home, .post-list li { background: var(--surface); border-color: var(--line); } .content-shell blockquote, .post-content blockquote, .home blockquote { background: #101a2b; } /* Darker translucent tints so the panels stay legible on the dark page, with brighter accents for the left border and the uppercase label. */ .content-shell blockquote.note { background: color-mix(in srgb, #d9920a 16%, #101a2b); border-left-color: #f0ab3a; } .content-shell blockquote.warning { background: color-mix(in srgb, #d23b3b 16%, #101a2b); border-left-color: #f06464; } .content-shell blockquote.note::before { color: #f0ab3a; } .content-shell blockquote.warning::before { color: #f06464; } .content-shell code, .post-content code, .home code { background: rgba(106, 167, 255, 0.14); border-color: rgba(106, 167, 255, 0.26); } .content-shell pre, .post-content pre, .home pre { background: #0b101a; } .pager-card:hover { border-color: rgba(106, 167, 255, 0.45); background: rgba(106, 167, 255, 0.08); } .userManualLargeImage img, .layout-default .content-shell > picture:not(.manual-inline-icon):not(.notfound-icon) img:not(.manual-inline-icon):not(.notfound-icon), .layout-default .content-shell p > picture:not(.manual-inline-icon):not(.notfound-icon) img:not(.manual-inline-icon):not(.notfound-icon) { filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.5)); } .blog-index-page .post-list li { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .blog-index-page .post-list li:hover, .blog-index-page .post-list li:focus-within { border-color: rgba(106, 167, 255, 0.45); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.6); } .content-hero .manual-version { background: rgba(106, 167, 255, 0.07); border-color: rgba(106, 167, 255, 0.18); } /* .cta.secondary uses a near-white background — override it on the dark hero so the download button blends with the dark surface. */ .content-hero .manual-download { background: var(--surface); color: var(--ink); border-color: var(--line); } .toc-card { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .toc-card-links a:hover { background: rgba(106, 167, 255, 0.1); } .toc-years a { background: #101a2b; } picture.notfound-icon::before { background: radial-gradient(closest-side, rgba(106, 167, 255, 0.18), transparent 72%); } }