body { font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--font-weight); line-height: var(--lh-base); font-variant-ligatures: common-ligatures; font-kerning: normal; } .huge-title, .huge-text { font-size: 4.625rem; line-height: 5.6875rem; } h1, .large-title, .large-text { font-size: 2.9375rem; line-height: 3.5rem; } h2, .main-title, .main-text { font-size: 2.4375rem; line-height: 3.0625rem; } h3, .med-title, .med-text { font-size: 2.0625rem; line-height: 2.6875rem; } h4, .mid-title, .mid-text { font-size: 1.6875rem; line-height: 2.25rem; } h5, .small-title, .small-text { font-size: 1.4375rem; line-height: 2rem; } h6, .micro-title, .micro-text { font-size: 1.3125rem; line-height: 1.875rem; } .huge-title, h1, .large-title, h2, .main-title, h3, .med-title, h4, .mid-title, h6, .micro-title { font-weight: 700; } h5, .small-title { font-weight: 600; } @media (max-width: 992px) { .huge-title, .huge-text { font-size: 4.625rem; line-height: 5.6875rem; } h1, .large-title, .large-text { font-size: 2.625rem; line-height: 3.1875rem; } h2, .main-title, .main-text { font-size: 2.1875rem; line-height: 2.75rem; } h3, .med-title, .med-text { font-size: 1.875rem; line-height: 2.5rem; } h4, .mid-title, .mid-text { font-size: 1.5rem; line-height: 2.0625rem; } h5, .small-title, .small-text { font-size: 1.3125rem; line-height: 1.875rem; } h6, .micro-title, .micro-text { font-size: 1.1875rem; line-height: 1.75rem; } } @media (max-width: 640px) { .huge-title, .huge-text { font-size: 3.5rem; line-height: 4.25rem; } h1, .large-title, .large-text { font-size: 2.375rem; line-height: 3rem; } h2, .main-title, .main-text { font-size: 1.9375rem; line-height: 2.5rem; } h3, .med-title, .med-text { font-size: 1.625rem; line-height: 2.1875rem; } h4, .mid-title, .mid-text { font-size: 1.375rem; line-height: 1.9375rem; } h5, .small-title, .small-text { font-size: 1.125rem; line-height: 1.625rem; } h6, .micro-title, .micro-text { font-size: 1.0625rem; line-height: 1.625rem; } } blockquote, q, .wp-block-quote, .wp-block-pullquote { font-size: 1.375rem; line-height: 2.1875rem; } @media (max-width: 992px) { blockquote, q, .wp-block-quote, .wp-block-pullquote { font-size: 1.3125rem; line-height: 2.0625rem; } } @media (max-width: 640px) { blockquote, q, .wp-block-quote, .wp-block-pullquote { font-size: 1.1875rem; line-height: 1.875rem; } } button, input[type="submit"], input[type="button"], input[type="reset"], .button, .wp-element-button, .wp-block-button__link { font-size: 1.1875rem; line-height: 1.9375rem; } @media (max-width: 992px) { button, input[type="submit"], input[type="button"], input[type="reset"], .button, .wp-element-button, .wp-block-button__link { font-size: 1.125rem; line-height: 1.8125rem; } } @media (max-width: 640px) { button, input[type="submit"], input[type="button"], input[type="reset"], .button, .wp-element-button, .wp-block-button__link { font-size: 1.0625rem; line-height: 1.75rem; } } .format :where(table, .data, .stat, .price, .number) { font-variant-numeric: tabular-nums; } :where(h1, h2, h3, h4, h5, h6, .headline) { text-wrap: balance; } .format { word-wrap: break-word; overflow-wrap: break-word; } .format :where(.headline, h1, h2, h3, h4, h5, h6) { margin-block-end: 1rem; position: relative; transition: color 0.2s ease; } .format :where(.headline, h1, h2, h3, h4, h5, h6) a { color: var(--color-headline-links); transition: color 0.2s ease, border-color 0.2s ease; position: relative; } .format :where(.headline, h1, h2, h3) a:hover { color: var(--color-primary); } .format :where(.headline, h1, h2, h3) a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .format :where(ul, ol, dl, p, hr, blockquote, pre, table, fieldset) { margin-block-end: 1.9375rem; } .format :where(.wp-caption, .gfield, .wp-block-image, .email-form-wrap) { margin-block-end: 1.9375rem; } .format :where(ul, ol) { margin-inline-start: 1.9375rem; } .format li :where(ul, ol) { margin-block-start: 0.625rem; } .format :where(li, dd) { margin-block-end: 0.625rem; position: relative; } .format :where(figure.wp-block-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .format :where(table) { width: 100%; border-collapse: collapse; border-spacing: 0; text-align: left; font-size: var(--fs-s); line-height: 1.6; } .format :where(caption) { text-align: left; font-size: var(--fs-xs); color: var(--color-text-sec); margin-block-end: 0.625rem; } .format :where(th, td) { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: top; } .format :where(th) { font-weight: 600; color: var(--color-headline); } .format :where(thead th) { border-bottom: 2px solid var(--color-border); } .format :where(tbody tr:hover) { background-color: color-mix(in srgb, var(--color-content-bg), var(--color-border) 25%); } .format > :last-child { margin-block-end: 0; } :where(.content .headline, .content .headline a, .content-text h1, .content-text h2, .content-text h3, .content-text h4, .content-text h5, .content-text h6) { color: var(--color-headline); } .format .list{ margin-inline:0 } :where(.content-inner) > table, :where(.content-inner) > figure{ margin-block-end: 1.9375rem; } .alignleft, .alignright, .aligncenter, .alignnone { display: block; position: relative; margin-block-end: 1.9375rem; } .alignleft { float: left; margin-inline-end: 1.9375rem; } .alignright { float: right; margin-inline-start: 1.9375rem; } .alignwide, .alignfull { max-width: initial; } .alignwide img, .alignfull img {border-radius: 0.3rem; width:stretch; height:auto; } .aligncenter { clear: both; float: none; margin-inline: auto; text-align: center; } .alignnone { clear: both; float: none; } .width-full { clear: both; display: block; width: 100%; } .display-block { display: block; } .auto { margin-inline-start: auto; margin-inline-end: auto; } @media (max-width: 768px) { .alignright, .alignleft, .wp-block-image .alignleft, .wp-block-image .alignright { clear: both; display: block; float: none; margin-inline-start: auto; margin-inline-end: auto; text-align: center; } .wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption { display: block; } } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .caps { text-transform: uppercase; } .text-dark { color: var(--color-headline); } :where(.text-sec, .entry-subtitle) { color: var(--color-text-sec); } .text-white .text-sec { color: color-mix(in srgb, var(--color-text-light), transparent 25%); } .text-white { color: var(--color-text-light); } .text-intro::first-letter, .has-drop-cap::first-letter, .drop { color: var(--color-links); float: left; font-size: 4.5rem; line-height: 1; margin-block-end: 0.1rem; margin-inline-end: 0.1rem; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .text-sep { position: relative; } .text-sep::after { background-color: var(--color-primary); content: ''; display: block; height: 0.25rem; margin-block-start: 1.25rem; width: 9.125rem; transition: width 0.4s ease, background-color 0.3s ease; border-radius: 2px; } .text-sep:hover::after { width: 12rem; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); } .text-center.text-sep::after, .text-center .text-sep::after { margin-inline: auto; } .badge { background-color: color-mix(in srgb, var(--color-content-bg), var(--color-border) 40%); border-radius: var(--radius-s); color: var(--color-text); display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; text-transform: uppercase; } a.badge { border-bottom: 0; } .badge-dark { background-color: var(--color-text); color: var(--color-text-light); } .badge-primary { background-color: var(--color-primary); color: var(--color-text-light); } [data-theme="dark"] .badge-dark { background-color: color-mix(in srgb, var(--color-bg), var(--color-text) 15%); color: var(--color-text); } .middot:not(:last-child)::after { content: '\00b7'; margin-inline-start: 0.375rem; margin-inline-end: 0.1875rem; } @media (min-width: 992px) { .text-intro, .intro, .subtitle { font-size: 1.35rem; line-height: 1.5; } } .list, .list > ul, ul.list-check { list-style: none; } .list li, ul.list-check li { position: relative; transition: transform 0.2s ease, padding-inline-start 0.2s ease; } .list > li:hover { transform: translateX(4px); } .list > li:not(:last-child), .box-style-list ul > li:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 35%); margin-block-end: 0.625rem; padding-block-end: 0.625rem; transition: border-color 0.2s ease; } .list > li:hover:not(:last-child) { border-bottom-color: var(--color-primary); } .list.list-large > li:not(:last-child) { margin-block-end: 1.9375rem; padding-block-end: 1.9375rem; } .list .children { border-inline-start: 1px solid color-mix(in srgb, var(--color-border), transparent 30%); margin-inline-start: 0; margin-block-start: 1.9375rem; padding-inline-start: 1.9375rem; } .list .children li:not(:last-child) { margin-block-end: 1.9375rem; } .list li.small a { border-bottom-color: var(--color-text-sec); color: var(--color-text-sec); } ul.list-check li:not(:last-child) { margin-block-end: 0.625rem; } ul.list-check li::before { color: green; position: absolute; inset-inline-start: -1.9375rem; inset-block-start: 3px; } .image-overlay { background-position: center top; background-size: cover; display: block; position: relative; z-index: 0; overflow: hidden; transition: transform 0.3s ease; } .image-overlay:hover { transform: scale(1.02); } .image-overlay::after { z-index: -1; transition: opacity 0.3s ease; } .image-overlay:hover::after { opacity: 0.8; } .overlay, .image-overlay::after { background-color: ; content: ''; display: block; height: 100%; position: absolute; inset: 0; width: 100%; } .circle { border-radius: 50%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .circle:hover { transform: rotate(5deg) scale(1.05); } .shadow, .wp-block-image.shadow img { box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease, transform 0.3s ease; } .shadow:hover, .wp-block-image.shadow img:hover { box-shadow: 0 8px 35px rgba(0, 0, 0, 0.25); transform: translateY(-2px); } .shadow-large, .wp-block-image.shadow-large img { box-shadow: 0 5px 55px rgba(0, 0, 0, 0.15); transition: box-shadow 0.3s ease, transform 0.3s ease; } .shadow-large:hover, .wp-block-image.shadow-large img:hover { box-shadow: 0 10px 65px rgba(0, 0, 0, 0.2); transform: translateY(-3px); } .shadow-small, .wp-block-image.shadow-small img { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); transition: box-shadow 0.3s ease, transform 0.3s ease; } .shadow-small:hover, .wp-block-image.shadow-small img:hover { box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2); transform: translateY(-1px); } .wp-block-image.shadow, .wp-block-image.shadow-large, .wp-block-image.shadow-small { box-shadow: none; } .box { background-color: var(--color-content-bg); transition: box-shadow 0.3s ease, transform 0.2s ease; } .box:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } .avatar { border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .avatar:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .circle-icon, a.circle-icon { background-color: rgba(0, 0, 0, 0.15); border-bottom: 0; border-radius: 50%; color: var(--color-text); display: inline-block; line-height: 1; position: relative; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; } .circle-icon:hover, a.circle-icon:hover { background-color: var(--color-primary); color: var(--color-text-light); transform: scale(1.15) rotate(10deg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .circle-icon.micro { bottom: -2px; font-size: 15px; height: 25px; padding-block-start: 5px; width: 25px; } .video-wrap { height: 0; position: relative; padding-block-end: 56.25%; padding-block-start: 0; border-radius: 10px; margin-block-end: 1.9375rem; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: box-shadow 0.3s ease, transform 0.3s ease; } .video-wrap:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transform: scale(1.01); } .video-wrap iframe { height: 100%; position: absolute; left: 0; top: 0; width: 100%; } .play-button { border: 4px solid var(--color-text-light); border-radius: 50%; cursor: pointer; display: inline-block; height: 75px; padding: 20px 26px 26px; position: relative; text-align: center; width: 75px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .play-button:hover { transform: scale(1.15); border-color: var(--color-primary); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .play-button::after { content: ''; display: block; border-style: solid; border-width: 15px 0 15px 22px; border-color: transparent transparent transparent var(--color-text-light); transition: border-color 0.3s ease; } .play-button:hover::after { border-color: transparent transparent transparent var(--color-primary); } .play-button-text { font-size: 13px; font-weight: bold; text-transform: uppercase; transition: color 0.3s ease; } .play-button:hover .play-button-text { color: var(--color-primary); } .twitter-tweet { margin-inline-start: auto; margin-inline-end: auto; } .highlight { background: color-mix(in srgb, var(--color-accent) 30%, transparent); padding: 2px 8px; border-radius: 6px; font-size: 0.95em; } .highlight-code { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; background: color-mix(in srgb, var(--color-text), transparent 92%); } .highlight-code-red { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: color-mix(in srgb, var(--color-primary), var(--color-text) 40%); } .highlight-code-blue { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; background: color-mix(in srgb, var(--color-links) 15%, transparent); color: color-mix(in srgb, var(--color-links), var(--color-text) 35%); } .highlight-code-dark { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; background: color-mix(in srgb, var(--color-text), var(--color-bg) 55%); color: var(--color-text-light); } .highlight-gradient { background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary), var(--color-secondary) 35%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; } .highlight-underline { text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; } .highlight-caps { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 0.9em; color: var(--color-primary); } .highlight-strike { text-decoration: line-through; color: var(--color-text-sec); } .highlight-green { background: color-mix(in srgb, var(--color-accent) 20%, transparent); padding: 2px 6px; border-radius: 4px; } details { border: 1px solid var(--color-border); border-radius: var(--radius-m); margin-block-end: 1.9375rem; transition: border-color var(--transition); } details[open] { border-color: color-mix(in srgb, var(--color-border), var(--color-text) 15%); } details summary { cursor: pointer; font-weight: 700; list-style: none; padding: 1rem 1.9375rem; position: relative; transition: color var(--transition); } details summary::-webkit-details-marker, details summary::marker { display: none; content: ''; } details summary::after { content: '\e80f'; font-family: md-icon; font-size: 0.8em; font-weight: 400; position: absolute; right: 1.9375rem; top: 50%; transform: translateY(-50%) rotate(90deg); transition: transform var(--transition); } details[open] summary::after { transform: translateY(-50%) rotate(270deg); } details summary:hover { color: var(--color-primary); } details > :not(summary) { padding: 0 1.9375rem; } details > :not(summary):last-child { padding-block-end: 1.9375rem; } details[open] summary { border-bottom: 1px solid var(--color-border); margin-block-end: 1rem; } .wp-block-code { position: relative; border-radius: var(--radius-m); margin: 1.5em 0; overflow: hidden; border: 1px solid var(--color-border); } .wp-block-code code { display: block; font-family: 'SF Mono', 'SFMono-Regular', 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.9em; line-height: 1.6; overflow-x: auto; white-space: pre; tab-size: 4; } .wp-block-code-wrapper { position: relative; margin-block-start: 1rem; margin-block-end: 1rem; } .wp-block-code-wrapper .wp-block-code { margin: 0; transition: max-height var(--transition-slow); } .wp-block-code-wrapper--collapsed .wp-block-code { overflow: hidden; } .wp-block-code-wrapper__expand { display: flex; align-items: center; justify-content: center; gap: var(--space-half); width: 100%; padding: 1.9375rem; border: none; font-size: var(--fs-s); font-weight: 500; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); font-family: inherit; background: linear-gradient(to bottom, transparent, var(--color-content-bg) 30%); color: var(--color-text-sec); } .wp-block-code-wrapper__expand:hover { color: var(--color-text); } .wp-block-code-wrapper__expand svg { flex-shrink: 0; transition: transform var(--transition-slow); } .wp-block-code-wrapper--collapsed .wp-block-code-wrapper__expand { position: absolute; bottom: 0; left: 0; right: 0; padding-block-start: 3rem; } .wp-block-code-wrapper--expanded .wp-block-code-wrapper__expand { position: relative; padding-block-start: 1.9375rem; background: var(--color-content-bg); } @media (max-width: 768px) { .wp-block-code code { font-size: 0.85em; } .wp-block-code-wrapper__expand { font-size: calc(var(--fs-s) * 0.95); padding: 1rem 1.9375rem; } } @media (max-width: 640px) { .close-on-mobile { display: none; } }