:root { --color-white: #fff; --color-lighter-gray: rgb(0 0 0 / 0.05); --color-light-gray: #e6e6e6; --color-mid-gray: #ccc; --color-dark-gray: #444; --color-darker-gray: #15171a; --color-black: #000; --link-blue: #0B57D0; --link-hover: #ff5e52; --color-primary-text: var(--color-darker-gray); --color-secondary-text: rgb(0 0 0 / 0.55); --color-border: rgb(0 0 0 / 0.08); --color-dark-border: rgb(0 0 0 / 0.55); --font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', Inter, 'Microsoft YaHei', sans-serif; --font-serif: "EB Garamond", Georgia, Times, serif; --font-serif-alt: Georgia, Times, serif; --font-mono: "JetBrains Mono", Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace; --container-width: 1320px; --container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px); --grid-gap: 42px; --rt-code-bg: #f2f2f2; --rt-code-border: #dedede; --rt-code-text: #1a1a1a; --rt-code-inline-bg: #f7f7f7; --rt-code-inline-border: #e3e3e3; --rt-code-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); --rt-code-copy-bg: rgba(255, 255, 255, 0.9); --rt-code-copy-border: #d6d6d6; --rt-code-copy-text: #333333; --rt-image-shadow: 0 50px 100px -20px rgba(50, 50, 93, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.1), 0 10px 20px -10px rgba(0, 0, 0, 0.06); --rt-theme-toggle-bg: #f2f2f2; --rt-theme-toggle-border: #e0e0e0; --rt-theme-toggle-active-bg: #ffffff; --rt-theme-toggle-active-border: rgba(0, 0, 0, 0.2); --rt-theme-toggle-active-shadow: none; --rt-theme-toggle-focus: rgba(0, 0, 0, 0.35); --rt-theme-toggle-text: #1e2024; --rt-theme-toggle-muted: #666666; --rt-page-bg: #fcfcf9; --rt-home-canvas: var(--rt-page-bg); --rt-post-divider: #e4e7e6; --rt-post-hover-bg: rgba(0, 0, 0, 0.035); } :root.has-light-text, :is(.gh-navigation, .gh-footer).has-accent-color { --color-lighter-gray: rgb(255 255 255 / 0.1); --color-darker-gray: #fff; --color-secondary-text: rgb(255 255 255 / 0.64); --color-border: rgb(255 255 255 / 0.15); --color-dark-border: rgb(255 255 255 / 0.5); } html.darking { --color-border: rgb(255 255 255 / 0.15); --rt-code-bg: #1f2127; --rt-code-border: #2c313a; --rt-code-text: #e5e5e5; --rt-code-inline-bg: #272b33; --rt-code-inline-border: #343a45; --rt-code-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); --rt-code-copy-bg: rgba(27, 27, 31, 0.9); --rt-code-copy-border: #3a404b; --rt-code-copy-text: #e5e5e5; --rt-image-shadow: none; --rt-theme-toggle-bg: #1f1f1f; --rt-theme-toggle-border: #2a2a2a; --rt-theme-toggle-active-bg: #2b2b2b; --rt-theme-toggle-active-border: rgba(255, 255, 255, 0.28); --rt-theme-toggle-active-shadow: none; --rt-theme-toggle-focus: rgba(255, 255, 255, 0.45); --rt-theme-toggle-text: #ffffff; --rt-theme-toggle-muted: #bdbdbd; --rt-page-bg: #191a1a; --rt-home-canvas: var(--rt-page-bg); --rt-post-divider: #242524; --rt-post-hover-bg: rgba(255, 255, 255, 0.05); background-color: var(--rt-page-bg); } html.darking body { background: var(--rt-page-bg); } html.darking ::selection { background-color: #3d5a78; color: #fff; } html.darking ::-moz-selection { background-color: #3d5a78; color: #fff; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; -webkit-tap-highlight-color: transparent; } html { font-size: 62.5%; background-color: var(--rt-page-bg); transition: background-color 0.3s ease; } body { line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } iframe { display: block; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { } h1, h2, h3, h4, h5, h6 { line-height: 1.2; } body { font-family: var(--gh-font-body, var(--font-sans)); font-size: 1.6rem; background-color: var(--rt-page-bg); color: var(--color-primary-text); transition: background-color 0.3s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--gh-font-heading, var(--font-sans)); } a { color: var(--color-darker-gray); text-decoration: none; } a:hover { opacity: 0.8; } ::selection { background-color: #b8ddff; color: #000; } ::-moz-selection { background-color: #b8ddff; color: #000; } .gh-navigation-logo:hover { opacity: 1; } .gh-button { display: inline-flex; gap: 0.4em; align-items: center; justify-content: center; padding: 0.8em 1.4em; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.004em; line-height: 1; color: var(--color-white); cursor: pointer; background-color: var(--rt-accent-color); border: 0; border-radius: 100px; } .gh-button:hover { opacity: 0.95; } .gh-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--color-darker-gray); cursor: pointer; background-color: transparent; border: 0; outline: none; } .gh-icon-button:hover :is(svg, span) { opacity: 0.8; } .gh-icon-button svg { width: 20px; height: 20px; } .gh-form { display: flex; align-items: center; position: relative; max-width: 560px; width: 100%; height: 56px; font-size: 1.7rem; font-weight: 450; letter-spacing: -0.008em; border-radius: 40px; background-color: var(--color-lighter-gray); transition: background-color 0.2s ease; } .gh-form.success { pointer-events: none; } .gh-form.error { box-shadow: 0 0 0 1px red; } .gh-form:hover { background-color: rgb(0 0 0 / 0.065); } .has-light-text .gh-form:hover, .gh-footer.has-accent-color .gh-form:hover { background-color: rgb(255 255 255 / 0.15); } .gh-form-input { position: absolute; inset: 0; padding-inline: 26px; width: 100%; height: 100%; font-size: inherit; letter-spacing: inherit; line-height: 1.1; border: 0; border-radius: 40px; background-color: transparent; outline: none; transition: 0.3s ease-in-out; } .gh-form-input::placeholder, button.gh-form-input { color: rgb(0 0 0 / 0.3); } :is(.has-serif-title, .has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-form-input, body[class*=" gh-font-heading"]:not(.gh-font-heading-fira-sans):not(.gh-font-heading-inter):not(.gh-font-heading-manrope):not(.gh-font-heading-noto-sans):not(.gh-font-heading-nunito):not(.gh-font-heading-poppins):not(.gh-font-heading-roboto):not(.gh-font-heading-space-grotesk) .gh-form-input { padding-inline: 20px; } .gh-form.gh-form.success .gh-form-input { opacity: 0.5; } .has-light-text .gh-form-input, .gh-footer.has-accent-color .gh-form-input { color: #fff; } .has-light-text .gh-form-input::placeholder, .has-light-text button.gh-form-input, .gh-footer.has-accent-color .gh-form-input::placeholder { color: rgb(255 255 255 / 0.55); } .gh-header.is-classic.has-image .gh-form-input { color: #15171a; } .gh-header.is-classic.has-image .gh-form-input::placeholder, .gh-header.is-classic.has-image button.gh-form-input, .gh-header.is-classic.has-image .gh-form > svg { color: rgb(0 0 0 / 0.5); } button.gh-form-input { padding-inline-start: 56px; text-align: left; color: var(--color-secondary-text); cursor: pointer; } :is(.has-serif-title,.has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) button.gh-form-input, body[class*=" gh-font-heading"]:not(.gh-font-heading-fira-sans):not(.gh-font-heading-inter):not(.gh-font-heading-manrope):not(.gh-font-heading-noto-sans):not(.gh-font-heading-nunito):not(.gh-font-heading-poppins):not(.gh-font-heading-roboto):not(.gh-font-heading-space-grotesk) button.gh-form-input { padding-inline-start: 50px; } .gh-form .gh-button { position: absolute; right: 6px; padding-inline: 32px; height: 44px; font-size: inherit; } .gh-form > svg { position: relative; left: 22px; width: 20px; height: 20px; color: var(--color-secondary-text); } :is(.has-serif-title,.has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-form > svg { left: 16px; } .gh-form .gh-button svg { display: none; position: absolute; margin-top: 1px; } .gh-form:is(.loading, .success) .gh-button span { visibility: hidden; } .gh-form.loading .gh-button svg:first-of-type { display: block; } .gh-form.success .gh-button svg:last-of-type { display: block; } .gh-form [data-members-error] { position: absolute; top: 100%; margin-top: 10px; width: 100%; font-size: 1.4rem; line-height: 1.4; } @media (max-width: 576px) { .gh-form { font-size: 1.6rem; } .gh-form .gh-button { padding-inline: 12px; } .gh-form .gh-button span span { display: none; } .gh-form .gh-button span svg { display: inline; position: static; margin-top: 2px; width: 20px; height: 20px; } } .gh-viewport { position: relative; display: flex; flex-direction: column; min-height: 100vh; } .gh-outer { padding: 0 max(4vmin, 20px); } .gh-outer .gh-outer { padding: 0; } .gh-inner { margin: 0 auto; max-width: var(--container-width); width: 100%; } .gh-main { flex-grow: 1; } .gh-canvas, .kg-width-full.kg-content-wide { --main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2); --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2)); --full: minmax(var(--container-gap), 1fr); display: grid; grid-template-columns: [full-start] var(--full) [wide-start] var(--wide) [main-start] var(--main) [main-end] var(--wide) [wide-end] var(--full) [full-end]; } .gh-canvas > * { grid-column: main; } .kg-width-wide, .kg-content-wide > div { grid-column: wide; } .kg-width-full { grid-column: full; } .gh-navigation { height: 72px; font-size: 1.5rem; font-weight: 550; background-color: var(--background-color); color: var(--color-darker-gray); } .gh-navigation :is(.gh-navigation-logo, a:not(.gh-button), .gh-icon-button) { color: inherit; } .gh-navigation-inner { display: grid; grid-auto-flow: row dense; column-gap: 24px; align-items: center; height: 100%; } .gh-navigation-brand { line-height: 1; } .gh-navigation-logo { position: relative; font-family: var(--gh-font-heading, var(--font-sans)); font-size: calc(2.4rem * var(--factor, 1)); font-weight: 725; letter-spacing: -0.015em; white-space: nowrap; } .gh-navigation-logo img { max-height: 32px; } .gh-navigation-logo svg { max-height: 32px; width: auto; height: auto; } .gh-navigation-menu { display: flex; gap: 24px; align-items: center; } .gh-navigation .nav { display: inline-flex; gap: 28px; align-items: center; padding: 0; margin: 0; white-space: nowrap; list-style: none; } .gh-navigation .gh-more-toggle { position: relative; margin: 0 -6px; font-size: inherit; text-transform: inherit; } .gh-navigation .gh-more-toggle svg { width: 24px; height: 24px; } .gh-navigation-actions { display: flex; gap: 24px; align-items: center; justify-content: flex-end; background-color: transparent; } .gh-navigation.has-accent-color .gh-navigation-actions { background-color: transparent; } .gh-navigation-members { display: flex; gap: 20px; align-items: center; white-space: nowrap; } .gh-navigation-members .gh-button { font-size: inherit; font-weight: 600; } .gh-search { margin-right: -2px; margin-left: -2px; } @media (max-width: 767px) { .gh-navigation-logo { white-space: normal; } .gh-navigation-members { flex-direction: column-reverse; gap: 16px; width: 100%; } .gh-navigation-actions .gh-search { display: none; } } @media (min-width: 768px) { .gh-navigation-brand .gh-search { display: none; } .gh-navigation:not(.is-dropdown-loaded) .gh-navigation-menu .nav > li { opacity: 0; } } .gh-navigation.has-accent-color { background-color: var(--rt-accent-color); } .gh-navigation.has-accent-color .gh-button { background-color: #fff; color: #15171a; } .gh-navigation.is-left-logo .gh-navigation-inner { grid-template-columns: auto 1fr auto; } @media (min-width: 768px) { .gh-navigation.is-left-logo .gh-navigation-logo:not(:has(img)) { top: -2px; } } @media (min-width: 992px) { .gh-navigation.is-left-logo .gh-navigation-menu { margin-right: 100px; margin-left: 16px; } } .gh-navigation.is-middle-logo .gh-navigation-inner { grid-template-columns: 1fr auto 1fr; } .gh-navigation.is-middle-logo .gh-navigation-brand { grid-column-start: 2; } .gh-navigation.is-middle-logo .gh-navigation-actions { gap: 28px; } @media (min-width: 992px) { .gh-navigation.is-middle-logo .gh-navigation-menu { margin-right: 64px; } } .gh-navigation.is-stacked { position: relative; height: auto; } .gh-navigation.is-stacked .gh-navigation-inner { grid-template-columns: 1fr auto 1fr; } .gh-navigation.is-stacked .gh-navigation-brand { display: flex; align-items: center; grid-row-start: 1; grid-column-start: 2; min-height: 80px; } @media (max-width: 767px) { .gh-navigation.is-stacked .gh-navigation-brand { min-height: unset; } } @media (min-width: 992px) { .gh-navigation.is-stacked .gh-navigation-inner { padding: 0; } .gh-navigation.is-stacked .gh-navigation-brand { display: flex; align-items: center; height: 80px; } .gh-navigation.is-stacked .gh-navigation-menu { grid-row-start: 2; grid-column: 1 / 4; justify-content: center; height: 60px; margin: 0 48px; } .gh-navigation.is-stacked .gh-navigation-menu::before, .gh-navigation.is-stacked .gh-navigation-menu::after { position: absolute; top: 80px; left: 0; width: 100%; height: 1px; content: ""; background-color: var(--color-border); } .gh-navigation.is-stacked .gh-navigation-menu::after { top: 140px; } .gh-navigation.is-stacked .gh-navigation-actions { grid-row-start: 1; grid-column: 1 / 4; justify-content: space-between; } .gh-navigation.is-stacked .gh-navigation-actions .gh-search { display: flex; gap: 10px; width: auto; } } .gh-dropdown { position: absolute; top: 100%; right: -16px; z-index: 90; width: 200px; padding: 12px 0; margin-top: 24px; text-align: left; visibility: hidden; background-color: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 7px 20px -5px rgb(0 0 0 / 0.15); opacity: 0; transition: opacity 0.3s, transform 0.2s; transform: translate3d(0, 6px, 0); } .gh-dropdown.is-left { right: auto; left: -16px; } .is-dropdown-mega .gh-dropdown { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: 40px; width: auto; padding: 20px 32px; } .is-dropdown-open .gh-dropdown { visibility: visible; opacity: 1; transform: translateY(0); } .gh-dropdown li a { display: block; padding: 7px 20px; line-height: 1.5; white-space: normal; color: #15171a !important; } .is-dropdown-mega .gh-dropdown li a { padding: 8px 0; } .gh-burger { display: flex; justify-content: center; align-items: center; position: relative; display: none; margin-right: -7px; margin-left: 4px; } .gh-burger svg { width: 24px; height: 24px; } .gh-burger svg:last-child { display: none; } .is-open .gh-burger svg:first-child { display: none; } .is-open .gh-burger svg:last-child { display: block; } @media (max-width: 767px) { .gh-burger { display: flex; } #gh-navigation { height: 64px; } #gh-navigation .gh-navigation-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; } #gh-navigation .gh-navigation-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 64px; } #gh-navigation .gh-navigation-logo { font-size: 2.2rem; } #gh-navigation .gh-navigation-menu, #gh-navigation .gh-navigation-actions { display: none; } #gh-navigation.is-open { position: fixed; inset: 0; z-index: 3999999; height: 100%; background: rgba(0, 0, 0, 0.45); } #gh-navigation.is-open .gh-navigation-inner { position: absolute; top: 0; left: 0; width: min(320px, 85vw); height: 100%; padding: 24px 20px; background: #fdfdfc; box-shadow: 12px 0 30px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start !important; gap: 24px; overflow-y: auto; animation: rt-nav-drawer-in 0.25s ease; will-change: transform; } #gh-navigation.is-open .gh-navigation-brand { height: auto; order: 0; width: 100%; justify-content: space-between; } #gh-navigation.is-open .gh-navigation-menu, #gh-navigation.is-open .gh-navigation-actions { display: flex; position: static; visibility: visible; opacity: 1; } #gh-navigation.is-open .gh-navigation-menu { margin-top: 4px; order: 2; } #gh-navigation.is-open .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; line-height: 1.4; } #gh-navigation.is-open .nav a { font-size: 1.6rem; font-weight: 600; text-transform: none; } #gh-navigation.is-open .gh-navigation-actions { margin-top: 4px; order: 1; flex-direction: column; align-items: flex-start; width: 100%; gap: 12px; background: transparent; justify-content: flex-start; } #gh-navigation.is-open .gh-navigation-members { flex-direction: column; align-items: center; } #gh-navigation.is-open .gh-navigation-actions .rt-theme-toggle { align-self: flex-start !important; margin-right: auto; } #gh-navigation.is-open .gh-burger { color: #1a1a1a; } #gh-navigation.is-open .gh-burger svg:first-child { display: none; } #gh-navigation.is-open .gh-burger svg:last-child { display: block; } } @keyframes rt-nav-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } html.darking .gh-navigation { background: #151515; color: #e0e0e0; } html.darking .gh-navigation-actions { background: transparent; } html.darking .gh-navigation .rt-theme-toggle { background: transparent; border-color: var(--rt-theme-toggle-border); box-shadow: none; } .gh-card { position: relative; } .gh-card-link { display: flex; flex-direction: column; gap: 20px; } .gh-card-link:hover { opacity: 1; } .gh-card-image { position: relative; flex-shrink: 0; aspect-ratio: 16 / 9; } .gh-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gh-card-wrapper { flex-grow: 1; } .gh-card-tag { display: none; margin-bottom: 4px; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; } .gh-card-title { font-size: calc(1.9rem * var(--factor, 1)); font-weight: 725; letter-spacing: -0.014em; line-height: 1.3; } .gh-card-link:hover .gh-card-title { opacity: 0.8; } .gh-card-excerpt { display: -webkit-box; overflow-y: hidden; margin-top: 8px; font-size: 1.45rem; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gh-card-meta { align-items: center; padding-bottom: 1px; font-size: 1.25rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.004em; color: var(--color-secondary-text); } .gh-card-meta svg { position: relative; top: 1px; display: inline-block; width: 12px; height: 12px; margin-right: 2px; } .gh-card-meta:not(:empty) { margin-top: 8px; } .gh-card-author + .gh-card-date::before { content: "—"; margin-right: 4px; } .gh-header { position: relative; margin-top: 40px; } .gh-header-inner { position: relative; overflow: hidden; } .gh-header.is-magazine .gh-header-inner { display: grid; grid-template-columns: repeat(16, 1fr); gap: var(--grid-gap); } .gh-header.is-magazine .gh-header-inner > div { display: flex; flex-direction: column; gap: var(--grid-gap); grid-row: 1; } .gh-header.is-magazine .gh-header-left { grid-column: 1 / span 4; } .gh-header.is-magazine .gh-header-inner > .gh-card { position: relative; grid-column: 5 / span 8; } .gh-header.is-magazine .gh-header-right { grid-column: 13 / -1; } .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-link { gap: 28px; } .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-image { aspect-ratio: 1.618033; } .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-tag { display: block; margin-bottom: 12px; } .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title { font-size: clamp(2.8rem, 1.36vw + 2.25rem, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; } .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt { margin-top: clamp(12px, 0.45vw + 10.18px, 16px); font-size: 1.8rem; letter-spacing: -0.02em; max-width: 90%; } .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta:not(:empty) { margin-top: 14px; } .gh-header.is-magazine :is(.gh-header-left, .gh-header-right) .gh-card:last-child .gh-card-image { display: none; } .gh-header.is-magazine .gh-header-inner > div .gh-card-excerpt { display: none; } .gh-header.is-magazine .gh-header-inner > .gh-card::before, .gh-header.is-magazine .gh-header-inner > .gh-card::after { position: absolute; top: 0; left: calc(var(--grid-gap) / -2); content: ""; width: 1px; height: 100%; background-color: var(--color-border); } .gh-header.is-magazine .gh-header-inner > .gh-card::after { right: calc(var(--grid-gap) / -2); left: auto; } .gh-header.is-magazine .gh-header-inner > div .gh-card + .gh-card::before { position: absolute; top: calc(var(--grid-gap) / -2); left: 0; content: ""; width: 100%; height: 1px; background-color: var(--color-border); } @media (max-width: 1199px) { .gh-header.is-magazine .gh-header-inner { grid-template-columns: repeat(12, 1fr); } .gh-header.is-magazine .gh-header-inner > .gh-card { grid-column: 1 / span 8; } .gh-header.is-magazine .gh-header-left { grid-column: 9 / -1; } .gh-header.is-magazine .gh-header-inner > div.gh-header-right { grid-column: 1 / -1; grid-row: 2; flex-direction: row; } .gh-header.is-magazine .gh-header-right .gh-card { flex: 1; } .gh-header.is-magazine .gh-header-right .gh-card:last-child .gh-card-image { display: block; } .gh-header.is-magazine .gh-header-right { position: relative; } .gh-header.is-magazine .gh-header-right::before { position: absolute; top: calc(var(--grid-gap) / -2); left: 0; content: ""; width: 100%; height: 1px; background-color: var(--color-border); } .gh-header.is-magazine .gh-header-right .gh-card::before { display: none; } .gh-header.is-magazine .gh-header-right .gh-card::after { position: absolute; top: 0; right: calc(var(--grid-gap) / -2); content: ""; width: 1px; height: 100%; background-color: var(--color-border); } } @media (max-width: 991px) { .gh-header.is-magazine .gh-header-left .gh-card:nth-child(2) .gh-card-image { display: none; } } @media (max-width: 767px) { .gh-header.is-magazine .gh-header-inner { display: flex; flex-direction: column; gap: var(--grid-gap); } .gh-header.is-magazine .gh-header-inner > div.gh-header-right { flex-direction: column; } .gh-header.is-magazine .gh-card-image { display: block !important; } .gh-header.is-magazine .gh-card::before { display: block !important; position: absolute; top: calc(var(--grid-gap) / -2); left: 0; content: ""; width: 100%; height: 1px; background-color: var(--color-border); } } .gh-header.is-highlight .gh-header-inner { display: grid; grid-template-columns: repeat(16, 1fr); gap: var(--grid-gap); } .gh-header.is-highlight .gh-header-left { position: relative; grid-column: span 8; } .gh-header.is-highlight .gh-header-left .gh-card { grid-column: span 8; grid-row: span 3; } .gh-header.is-highlight .gh-header-left .gh-card .gh-card-link { gap: 28px; } .gh-header.is-highlight .gh-header-left .gh-card .gh-card-image { aspect-ratio: 3 / 2; } .gh-header.is-highlight .gh-header-left .gh-card .gh-card-tag { display: block; margin-bottom: 12px; } .gh-header.is-highlight .gh-header-left .gh-card .gh-card-title { font-size: clamp(2.8rem, 1.36vw + 2.25rem, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; } .gh-header.is-highlight .gh-header-left .gh-card .gh-card-excerpt { margin-top: clamp(12px, 0.45vw + 10.18px, 16px); font-size: 1.8rem; } .gh-header.is-highlight .gh-header-left .gh-card .gh-card-meta:not(:empty) { margin-top: 12px; } .gh-header.is-highlight .gh-header-middle { position: relative; display: flex; flex-direction: column; gap: var(--grid-gap); grid-column: 9 / span 4; } .gh-header.is-highlight .gh-header-middle .gh-card:last-child .gh-card-image { display: none; } .gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt { display: none; } .gh-header.is-highlight .gh-header-right { grid-column: 13 / -1; } .gh-header.is-highlight .gh-featured { margin-top: 0; padding: 0; } .gh-header.is-highlight .gh-featured-feed { display: flex; flex-direction: column; } .gh-header.is-highlight .gh-featured-feed .gh-card-title { font-size: clamp(1.4rem, 0.23vw + 1.31rem, 1.6rem); } .gh-header.is-highlight .gh-header-left::after, .gh-header.is-highlight .gh-header-middle::after { position: absolute; top: 0; right: calc(var(--grid-gap) / -2); content: ""; width: 1px; height: 100%; background-color: var(--color-border); } .gh-header.is-highlight .gh-card::before { position: absolute; top: calc(var(--grid-gap) / -2); left: 0; content: ""; width: 100%; height: 1px; background-color: var(--color-border); } .gh-header.is-highlight .gh-featured .gh-card:first-child::before { display: none; } @media (max-width: 1199px) { .gh-header.is-highlight .gh-header-inner { grid-template-columns: repeat(9, 1fr); } .gh-header.is-highlight .gh-header-left { grid-column: span 6; } .gh-header.is-highlight .gh-header-middle { grid-column: 7 / -1; } .gh-header.is-highlight .gh-header-right { grid-column: 1 / -1; } .gh-header.is-highlight .gh-featured-feed { display: grid; grid-template-columns: repeat(3, 1fr); } .gh-header.is-highlight .gh-featured-feed .gh-card:before { width: calc(100% + var(--grid-gap)); } .gh-header.is-highlight .gh-featured-feed .gh-card::after { position: absolute; top: 0; left: calc(var(--grid-gap) / -2); content: ""; width: 1px; height: 100%; background-color: var(--color-border); } } @media (max-width: 991px) { .gh-header.is-highlight .gh-header-middle .gh-card:nth-child(2) .gh-card-image { display: none; } } @media (max-width: 767px) { .gh-header.is-highlight .gh-header-inner { display: flex; flex-direction: column; } .gh-header.is-highlight .gh-featured-feed { display: flex; } .gh-header.is-highlight .gh-card-image { display: block !important; } .gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt { display: -webkit-box; } } .gh-header.is-classic { display: flex; margin-top: 0; padding-block: 160px; } .gh-header.is-classic .gh-header-inner { display: flex; flex-direction: column; align-items: center; gap: 48px; overflow: unset; margin: auto; max-width: 1020px; text-align: center; } .gh-header.is-classic .gh-header-title { font-size: calc(clamp(3rem, 1.82vw + 2.27rem, 4.6rem) * var(--factor, 1)); line-height: 1.1; letter-spacing: -0.028em; } .gh-header.is-classic.has-image { margin-top: 0; } .gh-header.is-classic.has-image::before { position: absolute; inset: 0; content: ""; opacity: 0.3; background-color: var(--color-black); transition: opacity 1.5s ease; } .gh-header.is-classic.has-image .gh-header-inner { color: #fff; } .gh-header.is-classic.has-image .gh-header-image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; } .gh-header.is-classic.has-image .gh-form { background-color: #fff; } .gh-cta { display: none; margin-top: max(4vw, 40px); } .gh-header:is(.is-highlight, .is-magazine) + .gh-cta { display: block; } .gh-cta-inner { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 36px; padding: clamp(48px, 3.64vw + 33.45px, 80px) clamp(40px, 2.73vw + 29.09px, 64px); text-align: center; background-color: var(--color-lighter-gray); } .gh-cta-content { max-width: 640px; } .gh-cta-title { font-size: clamp(2.8rem,1.36vw + 2.25rem,4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.021em; } .gh-cta-description { margin-top: 12px; font-size: 1.8rem; line-height: 1.4; letter-spacing: -0.015em; } .gh-featured { margin-top: 100px; } .gh-navigation + .gh-featured { margin-top: 64px; } .gh-header.is-classic:not(.has-image) + .gh-featured { margin-top: 0; } .gh-featured-inner { overflow: hidden; } .gh-featured-title { margin-bottom: 20px; padding-bottom: 12px; font-size: 1.2rem; font-weight: 550; letter-spacing: 0.025em; text-transform: uppercase; border-bottom: 1px solid var(--color-border); } .gh-featured-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } .gh-featured-feed .gh-card { container-type: inline-size; container-name: featured-card; } .gh-featured-feed .gh-card-link { display: flex; flex-direction: row-reverse; align-items: flex-start; } .gh-featured-feed .gh-card-image { width: 72px; aspect-ratio: 1; } @container featured-card (width < 240px) { .gh-featured-feed .gh-card-image { display: none; } } @container featured-card (240px <= width <= 270px) { .gh-featured-feed .gh-card-image { width: 64px; } } .gh-featured-feed .gh-card-wrapper { container-type: inline-size; container-name: featured-card-wrapper; } .gh-featured-feed .gh-card-title { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.011em; } @container featured-card-wrapper (width < 170px) { .gh-featured-feed .gh-card-title { font-size: 1.6rem; } } .gh-featured-feed .gh-card-excerpt { display: none; } .gh-featured-feed .gh-card-meta:not(:empty) { margin-top: 8px; } .gh-featured-feed .gh-card::before { position: absolute; top: 0; left: calc(var(--grid-gap) / -2); content: ""; width: 1px; height: 100%; background-color: var(--color-border); } @media (max-width: 1199px) { .gh-viewport > .gh-featured .gh-featured-feed { grid-template-columns: repeat(3, 1fr); } .gh-viewport > .gh-featured .gh-featured-feed .gh-card:nth-child(4) { display: none; } } @media (max-width: 767px) { .gh-viewport > .gh-featured .gh-featured-feed { display: flex; flex-direction: column; } } .gh-container { flex-grow: 1; margin-top: 64px; } .gh-container-inner { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--grid-gap); } :is(.gh-featured, .gh-cta) + .gh-container { margin-top: max(4vw, 40px); } .gh-header.is-classic:not(.has-image) + .gh-container { margin-top: 0; } .gh-navigation + .gh-container .gh-container-title, :is(.paged, .tag-template, .author-template) .gh-container:not(.has-sidebar) .gh-container-title { display: none; } .gh-more { display: none; grid-column: 1 / -1; margin-top: 48px; font-size: calc(1.9rem * var(--factor, 1)); font-weight: 725; letter-spacing: -0.014em; } .gh-container.has-sidebar .gh-more { grid-column: span 12; } .home-template .gh-feed:has(> :nth-child(12):last-child) ~ .gh-more { display: block; } .gh-more a { display: flex; align-items: center; gap: 4px; } .gh-more svg { margin-top: -1px; width: 18px; height: 18px; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-more svg { margin-top: 0; } .gh-container.has-sidebar .gh-main { grid-column: 1 / span 12; position: relative; } .gh-container.has-sidebar .gh-sidebar { grid-column: 13 / -1; } .gh-container.has-sidebar .gh-main::after { position: absolute; top: 0; right: calc(var(--grid-gap) / -2); content: ""; width: 1px; height: 100%; background-color: var(--color-border); } .gh-container:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) { grid-column: 3 / span 12; } .gh-container.is-list.no-image:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) { grid-column: 4 / span 10; } .gh-header:is(.is-highlight, .is-magazine) ~ .gh-container.is-grid:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) { grid-column: 1 / -1; } @media (max-width: 1199px) { .gh-container-inner { display: block; overflow: hidden; } .gh-container.has-sidebar .gh-sidebar { display: none; } } .gh-container-title { grid-column: 1 / -1; margin-bottom: calc(var(--grid-gap) / 2); padding-bottom: 12px; font-size: 1.2rem; font-weight: 550; letter-spacing: 0.025em; text-transform: uppercase; border-bottom: 1px solid var(--color-border); } .gh-container:not(:has(.gh-card)) .gh-container-title { display: none; } .gh-container .gh-feed { gap: var(--grid-gap); } .gh-container .gh-card-meta:not(:empty) { margin-top: 12px; } .gh-container.is-list .gh-feed { display: flex; flex-direction: column; container-type: inline-size; container-name: list-feed; } .gh-container.is-list .gh-card-link { flex-direction: row; align-items: center; gap: 24px; } .gh-container.is-list .no-image .gh-card-link { padding-block: 20px; } .gh-container.is-list .gh-card-image { flex-shrink: 0; width: 220px; aspect-ratio: 1.618033; } @container list-feed (width < 600px) { .gh-container.is-list .gh-card-image { width: 160px; } } .gh-container.is-list .gh-card:not(.no-image) .gh-card-wrapper { max-width: 600px; } .gh-container.is-list .gh-card-title { --factor: 1.05; } .gh-container.is-list .no-image .gh-card-title { --factor: 1.2; } .gh-container.is-list .gh-card-excerpt { margin-top: 6px; } .gh-container.is-list .gh-card + .gh-card::before { position: absolute; top: calc(var(--grid-gap) / -2); left: 0; content: ""; width: 100%; height: 1px; background-color: var(--color-border); } .home-template .gh-container.is-list .gh-card:first-child:before { display: none; } @media (max-width: 767px) { .gh-container.is-list .gh-card-link { flex-direction: column; align-items: flex-start; } .gh-container.is-list .gh-card-image { width: 100%; } .home-template .gh-container .gh-feed { gap: 16px; } .home-template .gh-container.is-list .gh-card-link { gap: 12px; } .home-template .gh-container .gh-card-meta:not(:empty) { margin-top: 6px; } .home-template .gh-card-title { font-size: 1.6rem; font-weight: 650; line-height: 1.35; } .home-template .gh-card-meta { font-size: 1.1rem; font-weight: 500; } .home-template .gh-card-date { font-weight: 500; } } .gh-container.is-grid .gh-feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); row-gap: calc(var(--grid-gap) * 1.5); overflow: hidden; } .gh-container.is-grid .gh-card::before { position: absolute; top: calc(var(--grid-gap) / -2); right: calc(var(--grid-gap) / -2); left: calc(var(--grid-gap) / -2); content: ""; height: 1px; background-color: var(--color-border); } .gh-container.is-grid .gh-card::after { position: absolute; top: 0; left: calc(var(--grid-gap) / -2); content: ""; width: 1px; height: 100%; background-color: var(--color-border); } @media (max-width: 767px) { .gh-container.is-grid .gh-feed { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .gh-container.is-grid .gh-feed { display: flex; flex-direction: column; } } .gh-container.is-list.no-image .gh-card-image { display: none; } .gh-sidebar-inner { position: sticky; top: calc(var(--grid-gap) / 2); } .gh-sidebar-title { grid-column: 1 / -1; margin-bottom: calc(var(--grid-gap) / 2); padding-bottom: 12px; font-size: 1.2rem; font-weight: 550; letter-spacing: 0.025em; text-transform: uppercase; border-bottom: 1px solid var(--color-border); } .gh-about { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 24px; min-height: 380px; text-align: center; background-color: var(--color-lighter-gray); } .gh-about-icon { margin-bottom: 24px; width: 60px; height: 60px; border-radius: 50%; } .gh-about-title { font-size: calc(2.4rem * var(--factor, 1)); font-weight: 700; letter-spacing: -0.019em; } .gh-about-description { margin-top: 12px; font-size: 1.45rem; line-height: 1.4; } .gh-about .gh-button { margin-top: 32px; } .gh-recommendations { margin-top: 48px; } .gh-recommendations .recommendations { display: flex; flex-direction: column; gap: 26px; margin: 0; padding: 0; list-style-type: none; } .gh-recommendations .recommendation:first-child { margin-top: 4px; } .gh-recommendations .recommendation a { display: grid; grid-template-columns: 24px auto; gap: 4px 12px; } .gh-recommendations .recommendation a:hover { opacity: 1; } .gh-recommendations .recommendation-favicon { grid-row: span 2; width: 100%; border-radius: 4px; } .gh-recommendations .recommendation-title { margin-top: -2px; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.009em; } .gh-recommendations .recommendation a:hover .recommendation-title { opacity: 0.8; } .gh-recommendations .recommendation-url { order: 1; overflow: hidden; font-size: 1.4rem; line-height: 1.25; color: var(--color-secondary-text); text-overflow: ellipsis; } .gh-recommendations .recommendation-description { display: -webkit-box; display: none; overflow-y: hidden; grid-column: 2; font-size: 1.4rem; line-height: 1.4; color: var(--color-secondary-text); -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gh-recommendations button { display: inline-flex; align-items: center; gap: 2px; margin-top: 24px; padding: 0; cursor: pointer; font-size: 1.2rem; font-weight: 550; letter-spacing: 0.025em; text-transform: uppercase; background-color: transparent; border: 0; color: var(--color-darker-gray); } .gh-recommendations button svg { margin-top: -1px; width: 12px; } .gh-recommendations button:hover { opacity: 0.8; } .gh-article { --container-width: 1120px; } .gh-article-header { margin: clamp(40px, 3.64vw + 25.45px, 72px) 0 40px; } .gh-article-tag { margin-bottom: 12px; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; color: var(--rt-accent-color); } .gh-article-title { font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1)); line-height: 1.1; letter-spacing: -0.022em; } .gh-article-excerpt { margin-top: clamp(12px, 0.45vw + 10.18px, 16px); max-width: 720px; font-size: clamp(1.7rem, 0.23vw + 1.61rem, 1.9rem); line-height: 1.45; letter-spacing: -0.018em; } .gh-article-meta { display: flex; align-items: center; gap: 8px; margin-top: 20px; margin-left: 6px; } .gh-article-author-image { display: flex; margin-right: 8px; } .gh-article-author-image a { position: relative; margin: 0 -8px; width: 56px; height: 56px; overflow: hidden; background-color: var(--color-light-gray); border-radius: 50%; border: 3px solid var(--background-color); } .gh-article-author-image a:first-child { z-index: 10; } .gh-article-author-image a:nth-child(2) { z-index: 9; } .gh-article-author-image a:nth-child(3) { z-index: 8; } .gh-article-author-image :is(img, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gh-article-meta-wrapper { display: flex; flex-direction: column; gap: 4px; } .gh-article-author-name { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.013em; } .gh-article-meta-content { font-size: 1.35rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.006em; color: var(--color-secondary-text); } .gh-article-image { grid-column: wide; margin-top: 40px; } .gh-article-image img { width: 100%; } .page-template .gh-article-header { margin-block: 72px 32px; } .page-template .gh-content:only-child > *:first-child:not(.kg-width-full) { margin-top: 64px; } .page-template .gh-content > *:last-child:not(.kg-width-full) { margin-bottom: 6vw; } .page-template .gh-footer { margin-top: 0; } .gh-content { font-size: var(--content-font-size, 1.7rem); } .gh-content > * + * { margin-top: calc(28px * var(--content-spacing-factor, 1)); margin-bottom: 0; } .gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) { margin-top: 0; } .gh-content > [id]:not(:first-child) { margin-top: calc(56px * var(--content-spacing-factor, 1)); } .post-template .gh-content.drop-cap > p:first-of-type:first-letter { margin :0 0.2em 0em 0; font-size: 3.1em; float:left; line-height: 1; margin-left: -1px; font-weight: 700; } .has-serif-body.post-template:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content.drop-cap > p:first-of-type:first-letter { font-size: 3.2em; } .gh-content > [id] + p { margin-top: 6px; } .gh-content p { margin: 6px 0 16px; } .gh-content > :is(hr, blockquote, iframe) { position: relative; margin-top: calc(48px * var(--content-spacing-factor, 1)) !important; } .gh-content > :is(hr, blockquote, iframe) + * { margin-top: calc(48px * var(--content-spacing-factor, 1)) !important; } .gh-content h1 { font-size: calc(2.2em * var(--factor, 1)); } .gh-content h2 { font-size: calc(1.6em * var(--factor, 1)); margin: 24px 0 10px; } .gh-content h3 { font-size: calc(1.3em * var(--factor, 1)); } .gh-content a { color: var(--rt-accent-color); text-decoration: underline; } .gh-content .kg-callout-card .kg-callout-text, .gh-content .kg-toggle-card .kg-toggle-content > :is(ul, ol, p) { font-size: 0.95em; } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > blockquote, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ol, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ul, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > dl, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > p, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-callout-text, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ol, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ul, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > p { font-family: var(--font-serif-alt); } .gh-content :is(ul, ol) { padding-left: 28px; } .gh-content :is(li + li, li :is(ul, ol)) { margin-top: 8px; } .gh-content ol ol li { list-style-type: lower-alpha; } .gh-content ol ol ol li { list-style-type: lower-roman; } .gh-content hr { width: 100%; height: 1px; background-color: var(--color-border); border: 0; } .gh-content .gh-table { overflow-x: scroll; -webkit-overflow-scrolling: touch; } .gh-content .gh-table table { width: 100%; font-family: var(--font-sans); font-size: 1.5rem; white-space: nowrap; vertical-align: top; border-spacing: 0; border-collapse: collapse; } .gh-content .gh-table table th { font-size: 1.2rem; font-weight: 700; color: var(--color-darkgrey); text-align: left; text-transform: uppercase; letter-spacing: 0.2px; } .gh-content .gh-table table :is(th, td), .gh-content .gh-table table td { padding: 6px 12px; border-bottom: 1px solid var(--color-border); } .gh-content .gh-table table :is(th, td):first-child { padding-left: 0; } .gh-content .gh-table table :is(th, td):last-child { padding-right: 0; } .gh-content pre { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; font-family: var(--font-mono); } .gh-content .rt-code-block, .gh-content p.has-background { position: relative; padding: 18px 52px 18px 18px; background: var(--rt-code-bg); border: 0; border-radius: 2px; box-shadow: none; } .gh-content .rt-code-block pre, .gh-content p.has-background > code, .gh-content p.rt-code-block > code { font-size: 1.5rem; line-height: 1.6em; color: var(--rt-code-text); } .gh-content .rt-code-block pre { overflow: auto; } .gh-content :not(pre) > code { vertical-align: baseline; padding: 0.2em 0.45em; font-weight: 400; font-size: 0.95em; line-height: 1em; background: var(--rt-code-inline-bg); color: var(--rt-code-text); border: 1px solid var(--rt-code-inline-border); border-radius: 0.35em; font-family: var(--font-mono); } .gh-content p.has-background > code, .gh-content p.rt-code-block > code { display: block; padding: 0; background: transparent; color: var(--rt-code-text); border: 0; font-size: 1.5rem; line-height: 1.6em; white-space: pre-wrap; word-break: break-word; } .gh-content .rt-code-block .rt-code-copy { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--rt-code-copy-border); background: var(--rt-code-copy-bg); color: var(--rt-code-copy-text); cursor: pointer; opacity: 1; transition: opacity 0.2s ease; } .gh-content .rt-code-block .rt-code-copy:hover { opacity: 1; } html.darking .gh-content .rt-code-block .rt-code-copy:hover { box-shadow: none; } .gh-content .rt-code-block .rt-code-copy svg { width: 16px; height: 16px; transition: opacity 0.15s ease, transform 0.15s ease; } .gh-content .rt-code-block .rt-code-copy.is-success svg { animation: rt-copy-success 0.2s ease; } @keyframes rt-copy-success { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } .gh-content .rt-code-block .rt-code-copy.is-success { color: #111111; } html.darking .gh-content .rt-code-block .rt-code-copy.is-success { color: #ffffff; } .gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) { margin-top: calc(48px * var(--content-spacing-factor, 1)); } .gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) { margin-top: calc(48px * var(--content-spacing-factor, 1)); } .gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full { margin-top: calc(68px * var(--content-spacing-factor, 1)); } .gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) { margin-top: calc(68px * var(--content-spacing-factor, 1)); } .kg-image { margin-right: auto; margin-left: auto; } .gh-content img, .gh-article-image img, .kg-image, .kg-gallery-image img { box-shadow: none; transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); border-radius: 4px; } .gh-content img:hover, .gh-article-image img:hover, .kg-image:hover, .kg-gallery-image img:hover { box-shadow: var(--rt-image-shadow); } .kg-embed-card { display: flex; flex-direction: column; align-items: center; width: 100%; } .kg-image[width][height], .kg-gallery-image { cursor: pointer; } .kg-image-card a:hover, .kg-gallery-image a:hover { opacity: 1 !important; } .kg-card.kg-toggle-card .kg-toggle-heading-text { font-size: 2rem; font-weight: 700; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-toggle-card .kg-toggle-heading-text { font-family: var(--font-serif); } .has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-toggle-card .kg-toggle-heading-text { font-family: var(--font-mono); } .kg-callout-card.kg-card { border-radius: 0.25em; } .kg-callout-card-accent a { text-decoration: underline; } blockquote:not([class]) { padding-left: 2rem; border-left: 4px solid var(--rt-accent-color); } blockquote.kg-blockquote-alt { font-style: normal; font-weight: 400; color: var(--color-secondary-text); } .kg-card.kg-button-card .kg-btn { height: unset; padding: .6em 1.2em; text-align: center; font-size: 1em; line-height: 1.2em; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-card.kg-header-card h2.kg-header-card-header { font-family: var(--font-serif); } .has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-card.kg-header-card h2.kg-header-card-header { font-family: var(--font-mono); } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-header-card h3.kg-header-card-subheader { font-family: var(--font-serif); } .kg-bookmark-card .kg-bookmark-container { border-radius: 0.25em !important; } .kg-bookmark-card .kg-bookmark-container:hover { opacity: 1; } .kg-bookmark-card a.kg-bookmark-container, .kg-bookmark-card a.kg-bookmark-container:hover { background: var(--background-color) !important; color: var(--color-darker-gray) !important; } .kg-bookmark-card .kg-bookmark-content { padding: 1.15em; } .kg-bookmark-card .kg-bookmark-title { font-size: 0.9em; } .kg-bookmark-card .kg-bookmark-description { max-height: none; margin-top: 0.3em; font-size: 0.8em; } .kg-bookmark-card .kg-bookmark-metadata { font-size: 0.8em; } .kg-bookmark-card .kg-bookmark-thumbnail img { border-radius: 0 0.2em 0.2em 0; } .kg-product-card.kg-card .kg-product-card-image { margin-bottom: 12px; } .kg-product-card.kg-card a.kg-product-card-button { height: 2.8em; margin-top: 12px; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-product-card.kg-card .kg-product-card-title { font-family: var(--font-serif); } .has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-product-card.kg-card .kg-product-card-title { font-family: var(--font-mono); } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-product-card-description :is(p, ul, ol) { font-family: var(--font-serif-alt); } .kg-file-card.kg-card .kg-file-card-container { padding: 0.6em; } .kg-file-card.kg-card .kg-file-card-contents { margin: 4px 8px 6px; } .kg-file-card.kg-card .kg-file-card-metadata { font-size: 0.9em; } .kg-file-card.kg-card .kg-file-card-filesize::before { margin-right: 6px; margin-left: 6px; } figcaption { margin-top: 12px; font-size: 1.4rem; text-align: center; } .kg-card.kg-width-full figcaption { padding: 0 16px; } figcaption a { color: var(--rt-accent-color); text-decoration: underline; } .gh-comments { margin-top: 48px; } .post-template .gh-container { margin-top: 120px; } .post-template .gh-container-inner { display: block; } .post-template .gh-container.is-grid .gh-feed { grid-template-columns: repeat(4, 1fr); } .post-template .gh-container .gh-container-title { display: block; } .gh-archive { display: grid; grid-template-columns: repeat(16, 1fr); gap: var(--grid-gap); margin-block: 80px 24px; } .gh-archive.has-image { margin-top: 48px; } .gh-archive-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); grid-column: 1 / -1; padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px); border-bottom: 1px solid var(--color-border); } .gh-archive.has-image .gh-archive-inner { align-items: center; grid-column: 1 / -1; } .gh-archive:not(.has-sidebar):not(.has-image) .gh-archive-inner { grid-column: 3 / span 12; } .gh-archive .gh-article-image { grid-column: auto; margin-top: 0; } :is(.tag-template, .author-template) .gh-container { margin-top: 0; } .author-template .gh-archive-inner { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 24px; } .author-template .gh-article-image { margin-top: 0; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; } .author-template .gh-article-title { font-size: 3.6rem; } .gh-author-meta { display: flex; gap: 10px; margin-top: 14px; font-size: 1.5rem; font-weight: 550; color: var(--color-secondary-text); } .gh-author-meta a { color: inherit; } .gh-author-social { display: flex; gap: 16px; align-items: center; padding-left: 3px; } .gh-author-social svg { width: 20px; height: 20px; } @media (max-width: 1199px) { .gh-archive { display: block; } } @media (max-width: 767px) { .gh-archive-inner { display: flex; flex-direction: column-reverse; align-items: flex-start; } .author-template .gh-archive-inner { flex-direction: column-reverse; } } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) { --factor: 1.15; } .has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) { --factor: 1.1; } .has-sans-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.is-title, .gh-content :is(h2, h3)) { font-family: var(--gh-font-heading, var(--font-sans)); } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.is-title, .gh-content :is(h2, h3)) { font-family: var(--gh-font-heading, var(--font-serif)); font-weight: 550; } .has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.is-title, .gh-content :is(h2, h3)) { font-family: var(--gh-font-heading, var(--font-mono)); } .has-sans-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .is-body { font-family: var(--gh-font-body, var(--font-sans)); } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .is-body { font-family: var(--gh-font-body, var(--font-serif-alt)); } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-classic .gh-header-title { font-weight: 550; letter-spacing: -0.015em; } .has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-classic .gh-header-title { letter-spacing: -0.01em; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-form { border-radius: 0; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-card-title { line-height: 1.15; letter-spacing: -0.006em; font-size: calc(2.0rem*var(--factor, 1)) } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-featured-feed .gh-card-title { font-size: calc(1.6rem*var(--factor, 1)) } .has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-featured-feed .gh-card-title { font-size: calc(1.5rem*var(--factor, 1)); letter-spacing: 0; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-highlight .gh-featured-feed .gh-card-title { font-size: clamp(1.6rem, 0.23vw + 1.51rem, 1.8rem); } .has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-card-title { font-size: calc(1.8rem*var(--factor, 1)); line-height: 1.2; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-about-title { letter-spacing: -0.009em; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-footer-signup-header { letter-spacing: -0.019em; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-article-title { letter-spacing: -0.019em; } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) { --content-font-size: 1.9rem; } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-card-excerpt { font-size: 1.65rem; line-height: 1.4; letter-spacing: 0.0005em; } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt, .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-header.is-highlight .gh-card:first-child .gh-card-excerpt { font-size: 1.8rem; letter-spacing: -0.001em; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-magazine .gh-header-inner>.gh-card .gh-card-title, .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-highlight .gh-header-left .gh-card-title { font-weight: 550; font-size: clamp(3.2rem,1.82vw + 2.47rem,4.9rem) } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-about-description { font-size: 1.6rem; } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-article-excerpt { letter-spacing: 0; } .has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-footer-signup-subhead { letter-spacing: 0; } :is(.has-serif-title,.has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.gh-button, .gh-form, .gh-form-input), body[class*=" gh-font-heading"]:not(.gh-font-heading-fira-sans):not(.gh-font-heading-inter):not(.gh-font-heading-manrope):not(.gh-font-heading-noto-sans):not(.gh-font-heading-nunito):not(.gh-font-heading-poppins):not(.gh-font-heading-roboto):not(.gh-font-heading-space-grotesk) :is(.gh-button, .gh-form, .gh-form-input) { border-radius: 0; } .has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-cta-title { font-size: 4.8rem; } .gh-footer { margin-top: 12vw; font-size: 1.5rem; color: var(--color-darker-gray); } .gh-footer a:not(.gh-button) { color: inherit; } .gh-footer.has-accent-color { background-color: var(--rt-accent-color); } .gh-footer.has-accent-color .gh-footer-bar { border-top: 0; } .gh-footer.has-accent-color .gh-button { background-color: #fff; color: #15171a; } .gh-footer-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 32px; margin-bottom: 100px; padding-block: 28px; font-weight: 550; border-block: 1px solid var(--color-border); } .gh-footer-logo { position: relative; font-family: var(--gh-font-heading, var(--font-sans)); font-size: calc(2.4rem * var(--factor, 1)); font-weight: 725; letter-spacing: -0.015em; white-space: nowrap; } .gh-footer-logo img { max-height: 40px; } .gh-footer-menu .nav { display: flex; justify-content: center; gap: 8px 28px; flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; } .gh-footer-copyright { text-align: right; white-space: nowrap; } .gh-footer-copyright a { text-decoration: underline; } .gh-footer-signup { display: flex; flex-direction: column; align-items: center; padding-bottom: 160px; text-align: center; } .gh-footer-signup-header { font-size: calc(clamp(2.8rem,1.36vw + 2.25rem,4rem) * var(--factor, 1)); font-weight: 700; letter-spacing: -0.03em; } .gh-footer-signup-subhead { margin-top: 12px; max-width: 640px; font-size: 1.8rem; font-weight: 450; line-height: 1.4; letter-spacing: -0.014em; opacity: 0.75; } .gh-footer-signup .gh-form { margin-top: 40px; } @media (max-width: 991px) { .gh-footer-bar { display: flex; flex-direction: column; gap: 20px; } } .rt-home-drawer, .rt-site-drawer { position: fixed; inset: 0; z-index: 4000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .rt-home-drawer__overlay, .rt-site-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); } .rt-home-drawer__panel, .rt-site-drawer__panel { position: absolute; top: 0; left: 0; width: min(320px, 85vw); height: 100%; padding: 28px 22px; background: #fdfdfc; box-shadow: 12px 0 30px rgba(0, 0, 0, 0.18); transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; display: flex; flex-direction: column; gap: 28px; justify-content: flex-start; } .rt-home-drawer__toggle, .rt-site-drawer__toggle { display: flex; justify-content: flex-start; width: 100%; } .rt-home-drawer__nav .nav, .rt-site-drawer__nav .nav { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; font-size: 16px; text-align: left; } .rt-home-drawer__nav .nav a, .rt-site-drawer__nav .nav a { color: #1a1a1a; font-weight: 600; text-decoration: none; } .rt-home-drawer.is-open, .rt-site-drawer.is-open { opacity: 1; pointer-events: auto; } .rt-home-drawer.is-open .rt-home-drawer__panel, .rt-site-drawer.is-open .rt-site-drawer__panel { transform: translateX(0); } .rt-home-drawer-open .rt-home-menu-toggle__icon--open { display: none; } .rt-home-drawer-open .rt-home-menu-toggle__icon--close { display: block; } body.rt-home-drawer-open, body.rt-site-drawer-open { overflow: hidden; } body.rt-site-drawer-open .gh-burger svg:first-child { display: none; } body.rt-site-drawer-open .gh-burger svg:last-child { display: block; } .rt-home-brand { display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px; margin-left: 20px; order: 1; } .rt-home-brand__link { display: flex; align-items: center; text-decoration: none; color: inherit; } .rt-home-brand__svg { width: 200px; height: auto; } .rt-home-tagline { margin: 0; font-family: "Courier New", monospace; font-size: 12px; color: #999999; letter-spacing: 1px; transition: color 0.3s ease; } .rt-home-brand__link:hover { opacity: 1; } .rt-home-brand__link { cursor: default; pointer-events: none; } .rt-theme-toggle { --rt-theme-toggle-pad: 4px; position: relative; display: inline-flex; gap: 0; padding: var(--rt-theme-toggle-pad); border-radius: 999px; background: transparent; border: 1px solid var(--rt-theme-toggle-border); box-shadow: none; isolation: isolate; } .rt-theme-toggle__indicator { position: absolute; top: var(--rt-theme-toggle-pad); bottom: var(--rt-theme-toggle-pad); left: 0; width: var(--rt-theme-toggle-indicator-width, 0px); transform: translateX(var(--rt-theme-toggle-indicator-left, 0px)); border-radius: 999px; background: var(--rt-theme-toggle-active-bg); border: 1px solid var(--rt-theme-toggle-active-border); box-shadow: var(--rt-theme-toggle-active-shadow); opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.2s ease; will-change: transform, width; z-index: 0; } .rt-theme-toggle.is-initial .rt-theme-toggle__indicator { transition: none; } .rt-theme-toggle.is-ready .rt-theme-toggle__indicator { opacity: 1; } .rt-theme-toggle__item { position: relative; z-index: 1; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--rt-theme-toggle-muted); text-align: left; white-space: nowrap; outline: none; transition: color 0.25s ease; } .rt-theme-toggle__item.is-active { color: var(--rt-theme-toggle-text); } .rt-theme-toggle__item:focus-visible { box-shadow: 0 0 0 2px var(--rt-theme-toggle-focus); } .rt-theme-toggle__icon { width: 16px; height: 16px; } .rt-theme-toggle__item.is-active .rt-theme-toggle__icon circle, .rt-theme-toggle__item.is-active .rt-theme-toggle__icon rect { fill: currentColor; } .rt-theme-toggle__item.is-active[data-theme-toggle="dark"] .rt-theme-toggle__icon path { fill: currentColor; } .rt-theme-toggle__label { line-height: 1; } .rt-home-header .rt-theme-toggle { margin-right: 0; order: 2; transform: translateX(30px); } .rt-home-header .rt-theme-toggle__item, .rt-home-drawer__toggle .rt-theme-toggle__item, .rt-site-drawer__toggle .rt-theme-toggle__item, .gh-navigation .rt-theme-toggle__item { padding: 4px 10px; font-size: 11px; } @media (min-width: 768px) { body.post-template .gh-navigation .rt-theme-toggle__item { color: var(--rt-theme-toggle-muted); } body.post-template .gh-navigation .rt-theme-toggle__item.is-active { color: var(--rt-theme-toggle-text); } } .rt-home-main { background: var(--rt-home-canvas); padding: 10px 0 80px; transition: background-color 0.3s ease; } .rt-home-main__inner { max-width: 1120px; margin: 0 auto; padding: 0 12px; display: flex; align-items: flex-start; justify-content: space-between; column-gap: 10px; position: relative; left: 38px; } .rt-home-content { width: 850px; max-width: 1020px; min-width: 0; } .rt-post-list { display: flex; flex-direction: column; gap: 0; } .rt-post-card { --rt-post-card-radius: 0; position: relative; padding: 12px 0; background: transparent; border-top: 1px solid var(--rt-post-divider); } .rt-post-card a:hover { opacity: 1; } .rt-post-card:first-child { border-top: 0; padding-top: 4px; } .rt-post-card__row { display: flex; gap: 0; align-items: stretch; border-radius: 0; transition: box-shadow 0.3s ease; } .rt-post-card__row:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); } .rt-post-card__media-link { flex: 0 0 auto; display: flex; color: inherit; text-decoration: none; } .rt-post-card__media { flex: 0 0 auto; width: 320px; height: 180px; overflow: hidden; background: #f1f3f5; border-radius: 0; } .rt-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .rt-post-card__body { padding: 10px 12px 12px 16px; display: flex; flex-direction: column; min-width: 0; flex: 1; } .rt-post-card__body:first-child { padding-left: 0; } .rt-post-card__title { margin: 0 0 3px; } .rt-post-card__title-link { font-size: 19px; font-weight: 700; line-height: 1.4; color: #1a1a1a; text-align: left; position: relative; padding-bottom: 0.5px; display: inline-block; text-decoration: none; transition: color 0.3s ease, transform 0.2s ease; } .rt-post-card__title-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #232323; transition: width 0.6s ease; } .rt-post-card__title-link:hover { color: #232323; } .rt-post-card__title-link:hover::after { width: calc(100% + 1px); } .rt-post-card__title-link:active { transform: translateY(1px); } .rt-post-card__excerpt { margin: 0; color: #666666; font-size: 14px; line-height: 1.2; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s ease; } .rt-post-card__date { margin-top: 5px; font-size: 12px; color: #999999; text-align: left; transition: color 0.3s ease; } .rt-pagination { margin-top: 20px; display: flex; justify-content: center; } .rt-pagination .pagination { display: flex; align-items: center; gap: 12px; } .rt-pagination .pagination a { color: #666666; font-size: 14px; text-decoration: none; } .rt-pagination .page-number { color: #999999; } .rt-home-sidebar { width: 260px; margin-top: 1px; } .rt-home-sidebar__inner { display: flex; flex-direction: column; gap: 16px; } .rt-home-sidebar__card { background: #ffffff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .rt-home-sidebar__icon { width: 48px; height: 48px; border-radius: 12px; } .rt-home-sidebar__title { margin: 0; font-size: 18px; font-weight: 700; color: #1a1a1a; transition: color 0.3s ease; } .rt-home-sidebar__desc { margin: 0; color: #666666; font-size: 14px; line-height: 1.6; transition: color 0.3s ease; } .rt-home-sidebar__button { border: none; border-radius: 6px; padding: 10px 12px; background: #0078d4; color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; } .rt-home-contact { background: var(--rt-home-canvas); padding: 10px 0 15px; transition: background-color 0.3s ease; } .rt-home-contact__inner { max-width: 1120px; margin: 0 auto; padding: 0 12px; color: #858585; font-size: 14px; text-align: center; transition: color 0.3s ease; } @media (max-width: 1024px) { .rt-home-main__inner { flex-direction: column; row-gap: 30px; left: 0; } .rt-home-content { width: 100%; } .rt-home-sidebar { display: none; } .rt-home-contact__inner { text-align: center; } } @media (max-width: 767px) { .rt-home-header__inner { min-height: 60px; padding: 10px 15px; justify-content: space-between; } .rt-home-menu-toggle { display: flex; } .rt-home-header .rt-theme-toggle { display: none; } .rt-home-brand { margin-left: 0; align-items: center; flex: 0 0 auto; margin-right: auto; } .rt-home-brand__svg { width: 150px; height: auto; } .rt-home-tagline { display: none; } .rt-theme-toggle { margin-right: 0; --rt-theme-toggle-pad: 3px; padding: var(--rt-theme-toggle-pad); } .rt-theme-toggle__item { padding: 4px 6px; font-size: 10px; } .rt-theme-toggle__icon { width: 14px; height: 14px; } .rt-home-main { padding: 6px 0 32px; } .rt-home-main__inner { padding: 0 8px; } .rt-post-list { gap: 0; } .rt-post-card { padding: 10px 0; border-top: 1px solid var(--rt-post-divider); --rt-post-card-radius: 0; } .rt-post-card:first-child { border-top: 0; padding-top: 4px; } .rt-post-card__row { gap: 0; } .rt-post-card__media { width: 160px; height: 90px; border-radius: 0; background: #f1f3f5; } .rt-post-card__body { padding: 0 0 0 10px; gap: 4px; } .rt-post-card__body:first-child { padding-left: 0; } .rt-post-card__title { margin: 0; } .rt-post-card__excerpt { display: none; } .rt-post-card__title-link { font-size: 15px; font-weight: 600; line-height: 1.4; text-align: left; letter-spacing: 0.1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rt-post-card__title-link::after { display: none; } .rt-post-card__date { margin-top: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.2px; color: #8a8a8a; text-align: left; } html.darking .rt-post-card { border-top-color: var(--rt-post-divider); } html.darking .rt-post-card__media { background: #1f2226; } .rt-home-contact__inner { font-size: 12px; text-align: center; } } @media (max-width: 640px) { .rt-post-card { padding: 8px 0; } } html.darking .rt-home-header { background: #191a1a; border-bottom-color: #2a2a2a; } html.darking .rt-home-menu-toggle { color: #e0e0e0; } html.darking .rt-home-menu-toggle:hover { background: rgba(255, 255, 255, 0.08); } html.darking .rt-home-drawer__panel, html.darking .rt-site-drawer__panel { background: #151515; } html.darking .rt-home-drawer__nav .nav a, html.darking .rt-site-drawer__nav .nav a { color: #e0e0e0; } html.darking .rt-home-drawer__overlay, html.darking .rt-site-drawer__overlay { background: rgba(0, 0, 0, 0.6); } html.darking #gh-navigation.is-open { background: rgba(0, 0, 0, 0.6); } html.darking #gh-navigation.is-open .gh-navigation-inner { background: #151515; color: #e0e0e0; } html.darking #gh-navigation.is-open .nav a { color: #e0e0e0; } html.darking #gh-navigation.is-open .gh-burger { color: #e0e0e0; } html.darking .rt-home-brand__svg path[fill="#1A1A1A"] { fill: #ffffff; } html.darking .rt-home-tagline { color: #aaaaaa; } html.darking .rt-home-main { background: var(--rt-home-canvas); } html.darking .rt-post-card__media { background: #1f2226; } html.darking .rt-post-card__title-link { color: oklch(0.9296 0.007 106.53); } html.darking .rt-post-card__title-link::after { background-color: oklch(0.9296 0.007 106.53); } html.darking .rt-post-card__title-link:hover { color: #f5f5f5; } html.darking .rt-post-card__title-link:hover::after { background-color: #f5f5f5; } html.darking .rt-post-card__excerpt { color: #bfbfbb; } html.darking .rt-post-card__date { color: #bfbfbb; } html.darking .rt-post-card__row:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45); } html.darking .rt-home-sidebar__card { background: #1f2121; } html.darking .rt-home-sidebar__title, html.darking .rt-home-sidebar__desc { color: oklch(0.9296 0.007 106.53); } html.darking .rt-home-sidebar__button { background: #5c9eff; } html.darking .rt-home-contact { background: var(--rt-home-canvas); } body.post-template { transition: background-color 0.3s ease, color 0.3s ease; } body.post-template:not(.darking) { --rt-theme-toggle-text: #ffffff; --rt-theme-toggle-muted: #ffffff; --rt-theme-toggle-active-bg: rgba(0, 0, 0, 0.35); --rt-theme-toggle-active-border: rgba(255, 255, 255, 0.35); } body.post-template:not(.darking) .rt-site-drawer__toggle { --rt-theme-toggle-text: #1a1a1a; --rt-theme-toggle-muted: #666666; --rt-theme-toggle-active-bg: #ffffff; --rt-theme-toggle-active-border: rgba(0, 0, 0, 0.2); } .rt-post { background: var(--rt-page-bg); padding: 10px 0 150px; transition: background-color 0.3s ease; --rt-toc-hover-bg: #1d5080; --rt-toc-active-indicator: rgb(71, 105, 144); --rt-toc-active-bg: #f8f5ef; --rt-toc-indicator-width: 3px; --rt-hr-color: #d0d0d0; } .rt-post__inner { max-width: 1070px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 290px); column-gap: 30px; align-items: start; justify-content: center; position: relative; left: 160px; } .rt-post__inner.is-no-toc { grid-template-columns: minmax(0, 700px); left: 160px; } .rt-post__inner.is-no-toc .rt-post__toc { display: none; } .rt-post__card { background: transparent; padding-bottom: 25px; min-width: 0; width: 100%; max-width: 700px; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .rt-post__header { padding-bottom: 6px; } .rt-post__title { margin: 0; font-size: 28px; line-height: 1.5; font-weight: 700; color: #141413; letter-spacing: 0.544px; max-width: 100%; text-rendering: optimizeLegibility; transition: color 0.3s ease; } .rt-post__meta { display: flex; align-items: center; gap: 8px; margin-left: 2px; flex-wrap: wrap; } .rt-post__date { font-size: 14px; color: #737373; transition: color 0.3s ease; } .rt-post__updated { font-size: 14px; color: #737373; transition: color 0.3s ease; } .rt-post__meta-label { font-size: 14px; color: #999999; transition: color 0.3s ease; } .rt-post__meta-sep { font-size: 14px; color: #cccccc; margin: 0 2px; } .rt-post__tag { display: inline-flex; align-items: center; padding: 5px 12px; font-size: 12px; color: #0066cc; background: #e8f4ff; border-radius: 4px; transition: background-color 0.3s ease, color 0.3s ease; } .rt-post__content { margin-top: 12px; font-size: 16px; line-height: 1.4; color: #1a1a1a; text-align: left; font-weight: 400; letter-spacing: 0; transition: color 0.3s ease; } .rt-post__content a, .brxe-post-content a, .bricks-post-content a { color: var(--link-blue); text-decoration: underline; transition: color 0.25s ease-in-out; } .rt-post__content a:hover, .brxe-post-content a:hover, .bricks-post-content a:hover { color: var(--link-hover); } .rt-post__content p { margin: 0 0 16px; } .rt-post__content > * { margin-top: 0; margin-bottom: 16px; } .rt-post__content > p:last-child { margin-bottom: 0; } .rt-post .gh-content hr { background-color: var(--rt-hr-color); } .rt-post__content :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 80px; } .rt-post__content h1 { font-size: 36px; line-height: 1.6; margin-top: 0; margin-bottom: 16px; color: #141413; font-weight: 700; } .rt-post__content h2 { font-size: 28px; line-height: 1.5; margin-top: 32px; margin-bottom: 12px; color: #141413; font-weight: 700; } .rt-post__content h3 { font-size: 22px; line-height: 1.5; margin-top: 24px; margin-bottom: 10px; color: #141413; font-weight: 600; } .rt-post__content h4 { font-size: 18px; line-height: 1.4; margin-top: 20px; margin-bottom: 8px; color: #141413; font-weight: 600; } .rt-post__content > [id]:not(:first-child):is(h1) { margin-top: 0; } .rt-post__content > [id]:not(:first-child):is(h2) { margin-top: 32px; } .rt-post__content > [id]:not(:first-child):is(h3) { margin-top: 24px; } .rt-post__content > [id]:not(:first-child):is(h4) { margin-top: 20px; } .rt-post__content :is(.kg-card, .kg-image-card, .kg-gallery-card, figure) { margin-top: 0; margin-bottom: 20px; } .rt-post__content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) { margin-top: 0; margin-bottom: 20px; } .rt-post__content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) { margin-top: 0; } .rt-post__content :not(.kg-card):not([id]) + .kg-card.kg-width-full { margin-top: 0; margin-bottom: 20px; } .rt-post__content .kg-card.kg-width-full + :not(.kg-card):not([id]) { margin-top: 0; } .rt-post__content > [id] + p { margin-top: 0; } .rt-post__content :is(ul, ol) { margin: 0 0 16px; } .rt-post__toc { position: sticky; top: 50px; width: 290px; margin-top: 94px; align-self: start; background: var(--rt-page-bg); transition: background-color 0.3s ease; } .rt-post__toc-title { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #1a1a1a; transition: color 0.3s ease; } .rt-post__toc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; position: relative; z-index: 0; --rt-toc-indicator-top: 0px; --rt-toc-indicator-height: 0px; --rt-toc-indicator-opacity: 0; } .rt-post__toc-item { position: relative; } .rt-post__toc-list::before { content: ""; position: absolute; left: 0; top: 0; width: var(--rt-toc-indicator-width, 3px); height: var(--rt-toc-indicator-height, 0px); background-color: var(--rt-toc-active-indicator, rgb(71, 105, 144)); border-radius: 0 2px 2px 0; transform: translateY(var(--rt-toc-indicator-top, 0px)); opacity: var(--rt-toc-indicator-opacity, 0); transition: none; z-index: 2; pointer-events: none; } .rt-post__toc-list.is-animated::before { transition: transform 0.6s ease, height 0.6s ease, opacity 0.2s ease; } .rt-post__toc-link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: 6px 10px; padding-left: calc(10px + var(--rt-toc-indicator-width, 3px)); border-left: var(--rt-toc-indicator-width, 3px) solid transparent; background-clip: padding-box; font-size: 14px; line-height: 1.5; color: #1a1a1a; text-decoration: none; overflow: hidden; position: relative; z-index: 1; transition: color 0.2s ease, background-color 0.15s ease; } .rt-post__toc-link:hover { background-color: var(--rt-toc-hover-bg, #1d5080); color: #ffffff; opacity: 1; } .rt-post__toc-link.is-active-link { background-color: var(--rt-toc-active-bg, #f8f5ef); font-weight: 500; } .is-animated .rt-post__toc-link.is-active-link { transition: color 0.2s ease, background-color 0.25s ease 0.45s; } .rt-post__toc-link.is-active-link:hover { background-color: var(--rt-toc-active-bg, #f8f5ef); color: #1d5080; } .rt-post__toc-item--h3 { padding-left: 0; } .rt-post__toc-item--h4 { padding-left: 0; } .rt-post__toc.is-empty { display: none; } .rt-post-comments { background: var(--rt-page-bg); padding: 30px 0 60px; transition: background-color 0.3s ease; } .rt-post-comments__inner { max-width: 800px; margin: 0 auto; padding: 30px 40px; background: #ffffff; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .rt-back-to-top { position: fixed; right: 24px; bottom: 20px; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: #fcfcf9; border: 1px solid #dedede; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); cursor: pointer; opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; will-change: transform; } .rt-back-to-top svg { width: 20px; height: 20px; color: #212121; transition: color 0.3s ease; } .rt-back-to-top:hover { background-color: #fcfcf9; box-shadow: inset 0 0 0 999px #edede8, 0 8px 18px rgba(0, 0, 0, 0.08); opacity: 1; } .rt-back-to-top:active { transform: translateY(2px) scale(0.98); box-shadow: inset 0 0 0 999px #edede8, 0 4px 10px rgba(0, 0, 0, 0.12); } .rt-back-to-top.is-pressed { animation: rt-back-to-top-press 0.26s ease; } @keyframes rt-back-to-top-press { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(3px) scale(0.97); } 100% { transform: translateY(0) scale(1); } } .rt-back-to-top.is-visible { opacity: 1; visibility: visible; } @media (max-width: 1024px) { .rt-post__inner { grid-template-columns: 1fr; row-gap: 30px; left: 0; } .rt-post__toc { display: none; position: static; width: 100%; margin-top: 0; } } @media (max-width: 1200px) { .rt-post__inner { left: 0; } } @media (max-width: 767px) { .rt-post { padding: 12px 0 150px; } .rt-post__inner { padding: 0 15px; } .rt-post__card { padding-top: 6px; } .rt-post__title { font-size: 24px; line-height: 1.5; font-weight: 750; } .rt-post__content { font-size: 14px; line-height: 1.6; } .rt-post__content h1 { font-size: 28px; line-height: 1.5; } .rt-post__content h2 { margin-top: 28px; margin-bottom: 12px; font-size: 24px; line-height: 1.5; } .rt-post__content h3 { margin-top: 20px; margin-bottom: 10px; font-size: 20px; line-height: 1.4; } .rt-post__content h4 { margin-top: 16px; margin-bottom: 8px; font-size: 16px; line-height: 1.4; } .rt-post-comments__inner { padding: 24px 18px; } .rt-back-to-top { display: none; } } html.darking .rt-post { background: var(--rt-page-bg); --rt-hr-color: #2a2a2a; } html.darking .rt-post__card { background: transparent; } html.darking .rt-post__title, html.darking .rt-post__content, html.darking .rt-post__toc-title { color: oklch(0.9296 0.007 106.53); } html.darking .rt-post__content :is(h1, h2, h3, h4, h5, h6) { color: oklch(0.9296 0.007 106.53); } html.darking .rt-post__date { color: #bfbfbb; } html.darking .rt-post__updated { color: #bfbfbb; } html.darking .rt-post__meta-label { color: #888888; } html.darking .rt-post__meta-sep { color: #555555; } html.darking .rt-post__tag { background: #1a2b44; color: #5c9eff; } html.darking .rt-post__toc { background: var(--rt-page-bg); } html.darking .rt-post__toc-link { color: oklch(0.9296 0.007 106.53); } html.darking .rt-post__toc-link:hover { background-color: #1d5080; color: oklch(0.9296 0.007 106.53); } html.darking .rt-post__toc-link.is-active-link { background-color: rgba(248, 245, 239, 0.08); color: oklch(0.9296 0.007 106.53); } html.darking .rt-post__toc-link.is-active-link:hover { background-color: rgba(248, 245, 239, 0.08); color: #8ab4ff; } html.darking .rt-post__toc-list::before { background-color: #5c9eff; } html.darking .rt-post-comments { background: #191a1a; } html.darking .rt-post-comments__inner { background: #191a1a; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); color: #e0e0e0; } html.darking .rt-back-to-top { background: #191a1a; border-color: #2a2a2a; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } html.darking .rt-back-to-top svg { color: #e0e0e0; } html.darking .rt-back-to-top:hover { background: #202020; box-shadow: inset 0 0 0 999px #2f2f2f, 0 8px 18px rgba(0, 0, 0, 0.55); } html.darking .rt-back-to-top:active { box-shadow: inset 0 0 0 999px #2f2f2f, 0 4px 10px rgba(0, 0, 0, 0.7); } html.darking body.post-template { background: #191a1a; } .rt-image-compare { position: relative; overflow: hidden; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; --rt-compare-position: 50%; } .rt-image-compare img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; } .rt-image-compare__before { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; clip-path: inset(0 calc(100% - var(--rt-compare-position)) 0 0); will-change: clip-path; object-fit: cover; } .rt-image-compare__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rt-image-compare__handle { position: absolute; top: 0; left: var(--rt-compare-position); width: 4px; height: 100%; background: #fff; transform: translateX(-50%); box-shadow: 0 0 8px rgba(0,0,0,0.3); z-index: 10; } .rt-image-compare__handle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .rt-image-compare__handle::after { content: '◀ ▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: #333; letter-spacing: 4px; white-space: nowrap; } .rt-image-compare__label { position: absolute; bottom: 16px; padding: 6px 12px; background: rgba(0,0,0,0.6); color: #fff; font-size: 13px; border-radius: 4px; pointer-events: none; z-index: 5; } .rt-image-compare__label--before { left: 16px; } .rt-image-compare__label--after { right: 16px; } html.darking .rt-image-compare__handle { background: #e0e0e0; } html.darking .rt-image-compare__handle::before { background: #e0e0e0; } html.darking .rt-image-compare__handle::after { color: #222; } .pswp { position: absolute; top: 0; left: 0; z-index: 3999999; display: none; width: 100%; height: 100%; overflow: hidden; -ms-touch-action: none; touch-action: none; outline: none; backface-visibility: hidden; -webkit-text-size-adjust: 100%; } .pswp img { max-width: none; } .pswp--animate_opacity { opacity: 0.001; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); will-change: opacity; } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { cursor: zoom-in; } .pswp--zoomed-in .pswp__img { cursor: grab; } .pswp--dragging .pswp__img { cursor: grabbing; } .pswp__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); opacity: 0; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transform: translateZ(0); backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: none; backface-visibility: hidden; } .pswp__container, .pswp__img { user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transform-origin: left top; } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { transition: none; } .pswp__item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .pswp__img { position: absolute; top: 0; left: 0; width: auto; height: auto; } .pswp__img--placeholder { backface-visibility: hidden; } .pswp__img--placeholder--blank { background: var(--color-black); } .pswp--ie .pswp__img { top: 0; left: 0; width: 100% !important; height: auto !important; } .pswp__error-msg { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -8px; font-size: 14px; line-height: 16px; color: var(--color-secondary-text); text-align: center; } .pswp__error-msg a { color: var(--color-secondary-text); text-decoration: underline; } .pswp__button { position: relative; display: block; float: right; width: 44px; height: 44px; padding: 0; margin: 0; overflow: visible; appearance: none; cursor: pointer; background: none; border: 0; box-shadow: none; transition: opacity 0.2s; } .pswp__button:focus, .pswp__button:hover { opacity: 1; } .pswp__button:active { outline: none; opacity: 0.9; } .pswp__button::-moz-focus-inner { padding: 0; border: 0; } .pswp__ui--over-close .pswp__button--close { opacity: 1; } .pswp__button, .pswp__button--arrow--left::before, .pswp__button--arrow--right::before { width: 44px; height: 44px; background: url("../images/default-skin.png") 0 0 no-repeat; background-size: 264px 88px; } @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left::before, .pswp--svg .pswp__button--arrow--right::before { background-image: url("../images/default-skin.svg"); } .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } } .pswp__button--close { background-position: 0 -44px; } .pswp__button--share { background-position: -44px -44px; } .pswp__button--fs { display: none; } .pswp--supports-fs .pswp__button--fs { display: block; } .pswp--fs .pswp__button--fs { background-position: -44px 0; } .pswp__button--zoom { display: none; background-position: -88px 0; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; } .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; } .pswp__button--arrow--left, .pswp__button--arrow--right { position: absolute; top: 50%; width: 70px; height: 100px; margin-top: -50px; background: none; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left::before, .pswp__button--arrow--right::before { position: absolute; top: 35px; width: 32px; height: 30px; content: ""; } .pswp__button--arrow--left::before { left: 6px; background-position: -138px -44px; } .pswp__button--arrow--right::before { right: 6px; background-position: -94px -44px; } .pswp__counter { position: absolute; top: 0; left: 0; height: 44px; padding: 0 15px; font-size: 11px; font-weight: 700; line-height: 44px; color: var(--color-white); user-select: none; } .pswp__caption { position: absolute; bottom: 0; left: 0; width: 100%; min-height: 44px; } .pswp__caption__center { max-width: 420px; padding: 25px 15px 30px; margin: 0 auto; font-size: 11px; line-height: 1.6; color: var(--color-white); text-align: center; } .pswp__caption__center .post-caption-title { margin-bottom: 7px; font-size: 15px; font-weight: 500; text-transform: uppercase; } .pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before { padding: 0 4px; content: "\02022"; } .pswp__caption--empty { display: none; } .pswp__caption--fake { visibility: hidden; } .pswp__preloader { position: absolute; top: 0; left: 50%; width: 44px; height: 44px; margin-left: -22px; opacity: 0; transition: opacity 0.25s ease-out; direction: ltr; will-change: opacity; } .pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; } .pswp__preloader--active { opacity: 1; } .pswp__preloader--active .pswp__preloader__icn { background: url("../images/preloader.gif") 0 0 no-repeat; } .pswp--css_animation .pswp__preloader--active { opacity: 1; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { animation: clockwise 500ms linear infinite; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; } .pswp--css_animation .pswp__preloader__icn { position: absolute; top: 15px; left: 15px; width: 14px; height: 14px; margin: 0; background: none; opacity: 0.75; } .pswp--css_animation .pswp__preloader__cut { position: relative; width: 7px; height: 14px; overflow: hidden; } .pswp--css_animation .pswp__preloader__donut { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 14px; height: 14px; margin: 0; background: none; border: 2px solid var(--color-white); border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; } @media screen and (max-width: 1024px) { .pswp__preloader { position: relative; top: auto; left: auto; float: right; margin: 0; } } @keyframes clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes donut-rotate { 0% { transform: rotate(0); } 50% { transform: rotate(-140deg); } 100% { transform: rotate(0); } } .pswp__ui { z-index: 1550; visibility: visible; opacity: 1; -webkit-font-smoothing: auto; } .pswp__top-bar { position: absolute; top: 0; left: 0; width: 100%; height: 44px; } .pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { backface-visibility: hidden; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); will-change: opacity; } .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; } .pswp__ui--idle .pswp__top-bar { opacity: 0; } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; } .pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { opacity: 0.001; } .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; } .pswp__element--disabled { display: none !important; } .pswp--minimal--dark .pswp__top-bar { background: none; } body.home-template .gh-navigation, body.home-template .gh-footer { display: none !important; } body.home-template { background-color: var(--rt-home-canvas); transition: background-color 0.3s ease, color 0.3s ease; } .rt-home-header { background: var(--rt-home-canvas); border-bottom: 1px solid #e5e5e5; transition: background-color 0.3s ease, border-color 0.3s ease; } .rt-home-header__inner { max-width: 1090px; margin: 0 auto; padding: 0 20px; min-height: 80px; display: flex; align-items: center; justify-content: space-between; } .rt-home-menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 10px; background: transparent; color: #1a1a1a; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; order: 3; margin-left: auto; } .rt-home-menu-toggle__icon { width: 22px; height: 22px; } .rt-home-menu-toggle__icon--close { display: none; }