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; letter-spacing: -0.008em; } .huge-title, .huge-text { font-size: clamp(3.125rem, calc(2.125rem + 2.5vw), 4.125rem); line-height: 1.227; } h1, .large-title, .headline, .large-text { font-size: clamp(2.25rem, calc(1.6875rem + 1.4063vw), 2.8125rem); line-height: 1.2; } h2, .main-title, .main-text { font-size: clamp(1.875rem, calc(1.625rem + 0.625vw), 2.125rem); line-height: 1.235; } h3, .med-title, .med-text { font-size: clamp(1.5625rem, calc(1.3125rem + 0.625vw), 1.8125rem); line-height: 1.31; } h4, .mid-title, .mid-text { font-size: clamp(1.3125rem, calc(1.125rem + 0.4688vw), 1.5rem); line-height: 1.458; } h5, .small-title, .small-text { font-size: clamp(1.125rem, calc(1rem + 0.3125vw), 1.25rem); line-height: 1.4; } h6, .micro-title, .micro-text { font-size: 1.25rem; line-height: 1.5; } .huge-title, h1, .large-title, .headline, h2, .main-title { font-family: GTReallySans, system-ui, sans-serif; } h3, .med-title, h4, .mid-title, h5, .small-title, h6, .micro-title { font-family: "FinlandikaPro", system-ui, sans-serif; } .huge-title, h1, .large-title, .headline, h2, .main-title { font-weight: 900; } h3, .med-title, h4, .mid-title { font-weight: 700; } h5, .small-title, h6, .micro-title { font-weight: 600; } h3, .med-title, h4, .mid-title { letter-spacing: -0.012em; } blockquote, q, .wp-block-quote, .wp-block-pullquote { font-size: clamp(1.1875rem, calc(1.125rem + 0.1563vw), 1.25rem); line-height: 1.6; } button, input[type="submit"], input[type="button"], input[type="reset"], .button, .wp-element-button, .wp-block-button__link { font-size: clamp(1.0625rem, calc(1rem + 0.1563vw), 1.125rem); line-height: 1.111; } :where(h1, h2, h3, h4, h5, h6, .headline) { text-wrap: balance; } .format :where(table, .data, .stat, .price, .number) { font-variant-numeric: tabular-nums; } .format { word-wrap: break-word; overflow-wrap: break-word; } .format :where(.headline, h1, h2, h3, h4, h5, h6) { margin-block-end: 0.9375rem; position: relative; transition: color var(--motion); } .format :where(.headline, h1, h2, h3, h4, h5, h6) a { color: var(--color-headline-links); transition: color var(--motion), border-color var(--motion); position: relative; } .format :where(ul, ol, dl, p, hr, blockquote, pre, table, fieldset) { margin-block-end: 1.8125rem; } .format :where(.wp-caption, .gfield, .wp-block-image, .email-form-wrap) { margin-block-end: 1.8125rem; } .format :where(ul, ol) { margin-inline-start: 1.8125rem; } .format li :where(ul, ol) { margin-block-start: 0.625rem; } .format :where(li, dd) { margin-block-end: 0.625rem; position: relative; } .format .list { margin-inline: 0; } .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; } .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; } :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); } :where(.content-inner) > table, :where(.content-inner) > figure{ margin-block-end: 1.8125rem; } .alignleft, .alignright, .aligncenter, .alignnone { display: block; position: relative; margin-block-end: 1.8125rem; } .alignleft { float: left; margin-inline-end: 1.8125rem; } .alignright { float: right; margin-inline-start: 1.8125rem; } .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 var(--motion-emphasis), background-color var(--motion-slow); 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 var(--motion), padding-inline-start var(--motion); } .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 var(--motion); } .list > li:hover:not(:last-child) { border-bottom-color: var(--color-primary); } .list.list-large > li:not(:last-child) { margin-block-end: 1.8125rem; padding-block-end: 1.8125rem; } .list .children { border-inline-start: 1px solid color-mix(in srgb, var(--color-border), transparent 30%); margin-inline-start: 0; margin-block-start: 1.8125rem; padding-inline-start: 1.8125rem; } .list .children li:not(:last-child) { margin-block-end: 1.8125rem; } .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.8125rem; inset-block-start: 3px; } .image-overlay { background-position: center top; background-size: cover; display: block; position: relative; z-index: 0; overflow: hidden; transition: transform var(--motion-slow); } .image-overlay:hover { transform: scale(1.02); } .image-overlay::after { z-index: -1; transition: opacity var(--motion-slow); } .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 var(--motion-slow), box-shadow var(--motion-slow); } .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 var(--motion-slow), transform var(--motion-slow); } .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 var(--motion-slow), transform var(--motion-slow); } .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 var(--motion-slow), transform var(--motion-slow); } .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 var(--motion-slow), transform var(--motion); } .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 var(--motion-slow), box-shadow var(--motion-slow); } .avatar:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .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.8125rem; 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: 600; list-style: none; padding: 0.9375rem 1.8125rem; 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.8125rem; 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.8125rem; } details > :not(summary):last-child { padding-block-end: 1.8125rem; } details[open] summary { border-bottom: 1px solid var(--color-border); margin-block-end: 0.9375rem; } @media (max-width: 640px) { .close-on-mobile { display: none; } }