:root, body.light { --primary: #293a8a; --on-primary: #ffffff; --primary-container: #dde1ff; --on-primary-container: #001159; --secondary: #5a5d72; --on-secondary: #ffffff; --secondary-container: #dfe1f9; --on-secondary-container: #171b2c; --tertiary: #76536d; --on-tertiary: #ffffff; --tertiary-container: #ffd7f1; --on-tertiary-container: #2d1228; --error: #ba1a1a; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #410002; --background: #faf8ff; --on-background: #1a1b21; --surface: #faf8ff; --on-surface: #1a1b21; --surface-variant: #e2e1ec; --on-surface-variant: #45464f; --outline: #757680; --outline-variant: #c5c6d0; --shadow: #000000; --scrim: #000000; --inverse-surface: #2f3036; --inverse-on-surface: #f1f0f7; --inverse-primary: #b8c3ff; --surface-dim: #dad9e0; --surface-bright: #faf8ff; --surface-container-lowest: #ffffff; --surface-container-low: #f4f3fa; --surface-container: #efedf4; --surface-container-high: #e9e7ef; --surface-container-highest: #e3e1e9; } body.dark { --primary: #b8c3ff; --on-primary: #0e2478; --primary-container: #293a8a; --on-primary-container: #dde1ff; --secondary: #c3c5dd; --on-secondary: #2c2f42; --secondary-container: #434659; --on-secondary-container: #dfe1f9; --tertiary: #e4bad6; --on-tertiary: #44263e; --tertiary-container: #5c3c55; --on-tertiary-container: #ffd7f1; --error: #ffb4ab; --on-error: #690005; --error-container: #93000a; --on-error-container: #ffb4ab; --background: #121318; --on-background: #e3e1e9; --surface: #121318; --on-surface: #e3e1e9; --surface-variant: #45464f; --on-surface-variant: #c5c6d0; --outline: #8f909a; --outline-variant: #45464f; --shadow: #000000; --scrim: #000000; --inverse-surface: #e3e1e9; --inverse-on-surface: #2f3036; --inverse-primary: #293a8a; --surface-dim: #121318; --surface-bright: #38393f; --surface-container-lowest: #0d0e13; --surface-container-low: #1a1b21; --surface-container: #1e1f25; --surface-container-high: #282a2f; --surface-container-highest: #33353a; } :root { --font-icon: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ol-max: 1120px; --ol-radius: 0.5rem; --ol-ease: cubic-bezier(.2,.7,.2,1); --ol-spring: cubic-bezier(.34, 1.56, .64, 1); --ol-dur: 200ms; --ol-sh-1: 0 1px 2px rgba(15,23,42,.05), 0 3px 10px rgba(15,23,42,.05); --ol-sh-2: 0 2px 5px rgba(15,23,42,.07), 0 12px 32px rgba(15,23,42,.10); --ol-glow: 0 10px 30px color-mix(in srgb, var(--primary) 22%, transparent); } body { --ol-muted: var(--on-surface-variant); --ol-line: var(--outline-variant); --ol-line-strong: var(--outline); } body.dark { --ol-sh-1: 0 1px 2px rgba(0,0,0,.4); --ol-sh-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5); } html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { background: var(--surface, #fff); } h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; } h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; } h3 { font-size: 1.18rem; line-height: 1.3; } h4 { font-size: 1.05rem; line-height: 1.35; } h5 { font-size: 1rem; line-height: 1.4; } h6 { font-size: 0.95rem; line-height: 1.4; } .ol-main { max-width: var(--ol-max); margin-inline: auto; padding: 1rem 1rem 6rem; } @media (min-width: 993px) { .ol-main { padding: 1.5rem 1.75rem 2.5rem; } } .ol-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; text-decoration: none; } .ol-brand span { font-size: 1.75rem; letter-spacing: -0.01em; } .ol-brand img.ol-logo:not(.responsive) { border-radius: 0; block-size: 2.25rem; inline-size: auto; min-block-size: 2.25rem; max-block-size: 2.25rem; min-inline-size: auto; max-inline-size: none; } .ol-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .ol-i { position: static; padding: 0; block-size: 1.4rem; inline-size: 1.4rem; min-inline-size: 1.4rem; fill: currentColor; flex: none; } .ol-breadcrumb .ol-i { block-size: 0.95rem; inline-size: 0.95rem; min-inline-size: 0.95rem; } .ol-hero h1 .ol-i { block-size: 1.55rem; inline-size: 1.55rem; min-inline-size: 1.55rem; } .ol-related__grid a .ol-i, .ol-tile .ol-i { block-size: 1.5rem; inline-size: 1.5rem; min-inline-size: 1.5rem; } .ol-mico { display: inline-block; flex: none; inline-size: 1.5rem; block-size: 1.5rem; background: currentColor; -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-repeat: no-repeat; } .ol-search-row__icon .ol-mico { inline-size: 1.2rem; block-size: 1.2rem; } nav.top.ol-top { border-block-end: 1px solid var(--outline-variant); box-shadow: var(--ol-sh-1); } nav.top.ol-top { transition: transform 250ms var(--ol-ease); will-change: transform; } nav.top.ol-top.ol-hidden { transform: translateY(calc(-100% - 1rem)); } @media (prefers-reduced-motion: reduce) { nav.top.ol-top { transition: none; } } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { nav.top.ol-top, nav.bottom.ol-bottom { background-color: color-mix(in srgb, var(--surface-container) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } } .ol-breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.45rem 0.35rem; margin: 0; padding: 0; font-size: 0.8rem; line-height: 1; color: var(--ol-muted); } .ol-breadcrumb__seg { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .ol-breadcrumb a { text-decoration: none; color: inherit; } .ol-breadcrumb a:hover { color: var(--primary); } .ol-breadcrumb [aria-current="page"] { color: var(--on-surface); } .ol-breadcrumb .ol-i { opacity: 0.4; } .ol-hero { margin-bottom: 1.25rem; } .ol-hero h1 { display: flex; align-items: center; gap: 0.65rem; margin: 0.1rem 0; } .ol-hero h1 i { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; font-size: 1.6rem; border-radius: var(--ol-radius); color: var(--on-primary-container); background: var(--primary-container); } .ol-hero--center h1 { justify-content: center; text-align: center; } .ol-hero--center .ol-lead { margin-inline: auto; text-align: center; } .ol-hero--center .ol-landing-count { text-align: center; } .ol-landing-main :is(.ol-related, .ol-features, .ol-usecases, .ol-faq) h2 { text-align: center; } .ol-lead { color: var(--ol-muted); margin-top: 0.35rem;} .ol-card { padding: 1.25rem; border-radius: var(--ol-radius); margin-bottom: 1rem; background: var(--surface-container-low, var(--surface)); border: 1px solid var(--ol-line); box-shadow: var(--ol-sh-1); transition: box-shadow var(--ol-dur) var(--ol-ease), transform 250ms var(--ol-spring); } .ol-calc { margin-top: 0.5rem; } .ol-field-group { margin-bottom: 1.3rem; } .ol-calc article.ol-card:not(.ol-results) :is(h2, h3), .ol-field-group > :is(h2, h3) { font-size: 0.95rem; margin: 0.2rem 0 0.7rem; color: var(--on-surface); } .ol-card .field { transition: box-shadow var(--ol-dur) var(--ol-ease); } .ol-card .field:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); } .ol-field-help { color: var(--ol-muted); font-size: 0.9rem; margin: 0 0 0.9rem; } .ol-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 1rem; } .ol-presets__label { color: var(--ol-muted); font-size: 0.85rem; margin-right: 0.15rem; } .ol-presets .chip { cursor: pointer; } .ol-form-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; } .ol-form-actions .ol-i { inline-size: 1.1rem; block-size: 1.1rem; } .ol-results { min-height: 180px; background: linear-gradient(180deg, var(--primary-container), color-mix(in srgb, var(--primary-container) 35%, var(--surface))); border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); box-shadow: var(--ol-glow); } @media (min-width: 993px) { .ol-results { position: sticky; top: 5.25rem; } } .ol-results__title { font-size: 0.72rem; margin: 0 0 0.9rem; color: var(--on-primary-container); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .ol-result-hero { text-align: center; padding: 0.4rem 0 1rem; } .ol-result-hero__value { font-size: clamp(2.4rem, 1.8rem + 3vw, 3.2rem); font-weight: 800; line-height: 1.08; color: var(--on-primary-container); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ol-result-hero__label { margin-top: 0.5rem; font-size: 0.9rem; color: color-mix(in srgb, var(--on-primary-container) 78%, transparent); } .ol-result-rows { border-top: 1px solid color-mix(in srgb, var(--on-primary-container) 16%, transparent); } .ol-result { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; } .ol-result + .ol-result { border-top: 1px solid color-mix(in srgb, var(--on-primary-container) 12%, transparent); } .ol-result__label { font-size: 0.9rem; color: color-mix(in srgb, var(--on-primary-container) 75%, transparent); } .ol-result__value { font-size: 1.15rem; font-weight: 700; color: var(--on-primary-container); font-variant-numeric: tabular-nums; text-align: end; min-inline-size: 0; overflow-wrap: anywhere; } .ol-article { max-width: 46rem; margin: 2.5rem auto 0; font-size: 1.05rem; line-height: 1.75; color: var(--on-surface); } .ol-article h2 { margin: 2.5rem 0 0.6rem; } .ol-article h3 { margin: 1.75rem 0 0.4rem; } .ol-article p, .ol-article ul { margin: 0.85rem 0; } .ol-article strong { color: var(--on-surface); } .ol-article > :first-child { margin-top: 0; } .ol-article > p:first-of-type { font-size: 1.15rem; line-height: 1.7; color: var(--ol-muted); } .ol-article .ol-formula { margin: 1rem 0; background: var(--surface-container, color-mix(in srgb, var(--primary) 7%, var(--surface))); border: 1px solid var(--ol-line); border-left: 3px solid var(--primary); padding: 0.75rem 1rem; border-radius: var(--ol-radius); text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } .ol-faq { max-width: 46rem; margin: 2.25rem auto 0; } .ol-faq h2 { font-size: 1.4rem; margin-bottom: 0.9rem; } .ol-faq details { border: 1px solid var(--ol-line); border-radius: var(--ol-radius); margin-bottom: 0.6rem; background: var(--surface-container-low, var(--surface)); transition: box-shadow var(--ol-dur) var(--ol-ease); } .ol-faq details[open] { box-shadow: var(--ol-sh-1); } .ol-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1rem; font-weight: 600; line-height: 1.4; } .ol-faq summary::-webkit-details-marker { display: none; } .ol-faq__q { flex: 1; } .ol-faq__chevron { flex: none; color: var(--primary); transition: transform var(--ol-dur) var(--ol-ease); } .ol-faq details[open] .ol-faq__chevron { transform: rotate(90deg); } .ol-faq__a { padding: 0 1rem 1rem; color: var(--ol-muted); line-height: 1.6; } .ol-home-hero { max-width: 46rem; margin: 1.5rem auto 2rem; text-align: center; } .ol-home-hero h1 { margin: 0; } .ol-home-hero .ol-lead { margin: 0.6rem auto 1.4rem;} .ol-home-search { display: flex; align-items: center; gap: 0.6rem; width: 100%; max-width: 32rem; margin-inline: auto; padding: 0.85rem 1.1rem; border-radius: 2rem; cursor: text; border: 1px solid var(--outline-variant); background: var(--surface-container); color: var(--ol-muted); font-size: 1.05rem; box-shadow: var(--ol-sh-1); transition: border-color var(--ol-dur) var(--ol-ease), box-shadow var(--ol-dur) var(--ol-ease); } .ol-home-search:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: var(--ol-sh-2); } .ol-home-search > span { flex: 1; text-align: start; } .ol-home-all { max-width: var(--ol-max); margin: 2rem auto 0; text-align: center; } .ol-home-all a:not(.button) { color: var(--primary); text-decoration: none; font-weight: 600; } .ol-azjump { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; max-width: var(--ol-max); margin: 0 auto 1.5rem; } .ol-azjump a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2rem; block-size: 2rem; padding: 0 0.4rem; border-radius: var(--ol-radius); border: 1px solid var(--outline-variant); text-decoration: none; color: var(--on-surface); font-weight: 700; } .ol-azjump a:hover { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; } .ol-azlist { max-width: var(--ol-max); margin: 0 auto; } .ol-azgroup { margin-bottom: 1.5rem; scroll-margin-top: 5rem; } .ol-azgroup__letter { font-size: 1.3rem; color: var(--primary); padding-bottom: 0.3rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--outline-variant); } .ol-azgroup ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.15rem; } @media (min-width: 600px) { .ol-azgroup ul { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 993px) { .ol-azgroup ul { grid-template-columns: repeat(3, 1fr); } } .ol-azgroup li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--ol-radius); text-decoration: none; color: var(--on-surface); } .ol-azgroup li a:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); color: var(--primary); } .ol-azgroup li .ol-i { color: var(--ol-muted); } .ol-drawer__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding-block-end: 0.6rem; border-block-end: 1px solid var(--outline-variant); } .ol-browse { position: relative; overflow-y: auto; } .ol-browse__panel { display: none; flex-direction: column; } .ol-browse__panel.is-active { display: flex; } .ol-browse__row, .ol-browse__back { box-sizing: border-box; margin: 0; block-size: auto; justify-content: flex-start; display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.6rem; border: 0; background: transparent; cursor: pointer; text-align: start; text-decoration: none; color: var(--on-surface); font: inherit; border-radius: var(--ol-radius); transition: transform 200ms var(--ol-spring), background-color var(--ol-dur) var(--ol-ease); } .ol-browse__row:hover, .ol-browse__back:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); } .ol-browse__label { flex: 1; min-inline-size: 0; font-weight: 600; } .ol-browse__chev { flex: none; color: var(--ol-muted); } .ol-browse__back { font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; } .ol-browse__chev-back { transform: rotate(180deg); color: var(--primary); } .ol-browse__all { color: var(--primary); font-weight: 700; } .ol-landing { max-width: var(--ol-max); margin: 0 auto; } .ol-landing__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } @media (min-width: 600px) { .ol-landing__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 993px) { .ol-landing__grid { grid-template-columns: repeat(4, 1fr); } } .ol-landing__tile { justify-content: flex-start; } .ol-tile__title { line-height: 1.3; } .ol-tile__count { font-size: 0.78rem; font-weight: 500; color: var(--ol-muted); } .ol-landing-count { margin-top: 0.85rem; } .ol-landing-count .chip { color: var(--ol-muted); } .ol-related { max-width: var(--ol-max); margin: 2.25rem auto 0; } .ol-related h2 {font-size: 1.25rem;margin-bottom: 0.9rem;text-align: center;line-height: 2.15rem;} .ol-section-lead { max-width: 40rem; margin: -0.5rem auto 1.1rem; text-align: center; color: var(--ol-muted); } .ol-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } @media (min-width: 600px) { .ol-related__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 993px) { .ol-related__grid { grid-template-columns: repeat(4, 1fr); } } .ol-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .ol-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.95rem; border: 1px solid var(--ol-line); border-radius: var(--ol-radius); background: var(--surface-container-low, var(--surface)); color: var(--on-surface); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: transform 250ms var(--ol-spring), color var(--ol-dur) var(--ol-ease); } .ol-pills .ol-pill .ol-i { block-size: 1.15rem; inline-size: 1.15rem; min-inline-size: 1.15rem; color: var(--primary); } .ol-pill:hover { color: var(--primary); } .ol-pill__count { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.5rem; block-size: 1.5rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--secondary-container); color: var(--on-secondary-container); } #ol-calc-root .ol-related { max-width: 46rem; } #ol-calc-root .ol-related__grid { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { #ol-calc-root .ol-related__grid { grid-template-columns: repeat(4, 1fr); } } .ol-related__grid a, .ol-tile { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; padding: 1.15rem 0.6rem; border-radius: var(--ol-radius); border: 1px solid var(--ol-line); background: var(--surface-container-low, var(--surface)); box-shadow: var(--ol-sh-1); text-decoration: none; font-weight: 600; color: var(--on-surface); transition: transform 250ms var(--ol-spring), box-shadow var(--ol-dur) var(--ol-ease), border-color var(--ol-dur) var(--ol-ease); } .ol-related__grid a i, .ol-tile i { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; font-size: 1.5rem; border-radius: var(--ol-radius); background: var(--primary-container); color: var(--on-primary-container); } .ol-tile--all { border-style: dashed; } .ol-tile--all .ol-tile__title { color: var(--primary); } .ol-cluster { max-width: var(--ol-max); margin: 2.5rem auto 0; } .ol-cluster__head { text-align: center; margin-bottom: 1.1rem; } .ol-cluster__head h2 { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.4rem; margin: 0 0 0.3rem; } .ol-cluster__head h2 a { color: var(--on-surface); text-decoration: none; } .ol-cluster__head h2 a:hover { color: var(--primary); } .ol-cluster__head .ol-lead { margin: 0 auto;} .ol-features { max-width: 46rem; margin: 2.5rem auto 0; } .ol-features > h2 { font-size: 1.4rem; text-align: center; margin-bottom: 1.1rem; } .ol-features__list { display: grid; gap: 1.1rem; padding: 1.5rem; border-radius: var(--ol-radius); border: 1px solid var(--ol-line); background: var(--surface-container-low, var(--surface)); } .ol-features__row { display: flex; gap: 0.9rem; align-items: flex-start; line-height: 1.55; } .ol-features__row > .ol-i { flex: none; margin-top: 0.05rem; color: var(--primary); } .ol-features__row strong { color: var(--on-surface); } .ol-usecases { max-width: var(--ol-max); margin: 2.5rem auto 0; } .ol-usecases > h2 { font-size: 1.4rem; text-align: center; margin-bottom: 1.1rem; } .ol-usecases__grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; } @media (min-width: 700px) { .ol-usecases__grid { grid-template-columns: repeat(2, 1fr); } } .ol-usecase { padding: 1.25rem; border-radius: var(--ol-radius); border: 1px solid var(--ol-line); background: var(--surface-container-low, var(--surface)); } .ol-usecase h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.08rem; margin: 0 0 0.4rem; } .ol-usecase h3 > .ol-i { flex: none; color: var(--primary); } .ol-usecase p { margin: 0; color: var(--ol-muted); line-height: 1.6; } .ol-answer { max-width: 46rem; margin: 1.75rem auto 0; padding: 1.1rem 1.25rem; border-radius: var(--ol-radius); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); background: var(--primary-container); color: var(--on-primary-container); font-size: 1.05rem; line-height: 1.6; } .ol-answer strong { color: var(--on-primary-container); font-weight: 700; } .ol-partners { --pbox-bg: #e6f3e7; --pbox-on: #173b22; --pbox-accent: #2e7d32; --pbox-on-accent: #ffffff; max-width: 46rem; margin: 1.75rem auto 0; padding: 1.1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--pbox-accent) 35%, transparent); border-radius: var(--ol-radius); background: var(--pbox-bg); color: var(--pbox-on); } body.dark .ol-partners { --pbox-bg: #1e2b21; --pbox-on: #c4e5c8; --pbox-accent: #84ce8c; --pbox-on-accent: #0c2912; } .ol-partners__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; } .ol-partners__head h2 { font-size: 1.1rem; margin: 0; flex: 1; color: var(--pbox-on); } .ol-partners__ad { flex: none; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pbox-on); opacity: 0.75; border: 1px solid color-mix(in srgb, var(--pbox-on) 35%, transparent); border-radius: 999px; padding: 0.1rem 0.55rem; } .ol-partners__list { list-style: none; margin: 0; padding: 0; } .ol-partners__list > li + li { border-top: 1px solid color-mix(in srgb, var(--pbox-on) 14%, transparent); } .ol-partners__list a { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0.15rem; text-decoration: none; color: var(--pbox-on); border-radius: var(--ol-radius); transition: background var(--ol-dur) var(--ol-ease); } .ol-partners__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .ol-partners__name { font-weight: 700; } .ol-partners__desc { font-size: 0.9rem; line-height: 1.45; opacity: 0.85; } .ol-partners__cta { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; background: var(--pbox-accent); color: var(--pbox-on-accent); font-size: 0.86rem; font-weight: 600; white-space: nowrap; padding: 0.45rem 0.9rem; border-radius: 999px; box-shadow: var(--ol-sh-1); transition: transform var(--ol-dur) var(--ol-ease), box-shadow var(--ol-dur) var(--ol-ease); } .ol-partners__cta .ol-i { block-size: 1rem; inline-size: 1rem; min-inline-size: 1rem; } .ol-partners__note { margin: 0 0.15rem 0.5rem; font-size: 0.78rem; color: var(--pbox-on); opacity: 0.75; } @media (hover: hover) { .ol-partners__list a:hover { background: color-mix(in srgb, var(--pbox-on) 8%, transparent); } .ol-partners__list a:hover .ol-partners__cta { transform: translateY(-1px); box-shadow: var(--ol-sh-2); } } @media (max-width: 600px) { .ol-partners__list a { flex-wrap: wrap; gap: 0.4rem 0.75rem; } .ol-partners__cta { margin-left: auto; } } .ol-actions { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; } .ol-action { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; padding: 0; border-radius: 50%; border: 1px solid var(--ol-line); background: transparent; cursor: pointer; color: var(--ol-muted); transition: background var(--ol-dur) var(--ol-ease), color var(--ol-dur) var(--ol-ease), border-color var(--ol-dur) var(--ol-ease); } .ol-action .ol-i { inline-size: 1.25rem; block-size: 1.25rem; } .ol-action:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary); } .ol-action.is-on { border-color: var(--primary); color: var(--primary); } .ol-actions__more { position: relative; display: inline-flex; } #ol-more-menu { inset: auto 0 calc(100% + 0.35rem) auto; transform-origin: bottom right; min-inline-size: 11rem; inline-size: max-content; } .ol-actions__more:focus-within > #ol-more-menu { opacity: 1; visibility: visible; transform: scale(1); } #ol-more-menu li { display: flex; align-items: center; gap: 0.6rem; padding: 0.05rem 0.50rem; cursor: pointer; white-space: nowrap; } #ol-more-menu li:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); } #ol-more-menu .ol-i { inline-size: 1.15rem; block-size: 1.15rem; } .ol-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; max-width: 46rem; margin: 2rem auto 0; padding: 0.9rem 1.1rem; border: 1px solid var(--ol-line); border-radius: var(--ol-radius); background: var(--surface-container-low, var(--surface)); } .ol-helpful__q { font-weight: 600; margin-right: 0.25rem; } .ol-helpful__btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border-radius: var(--ol-radius); border: 1px solid var(--ol-line); background: var(--surface); color: var(--on-surface); cursor: pointer; font-weight: 600; transition: background var(--ol-dur) var(--ol-ease), color var(--ol-dur) var(--ol-ease), border-color var(--ol-dur) var(--ol-ease); } .ol-helpful__btn .ol-i { width: 1.05rem; height: 1.05rem; } .ol-helpful__btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary); } .ol-helpful__btn.is-on { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; } .ol-helpful__btn:disabled { cursor: default; opacity: 0.85; } .ol-helpful__msg { color: var(--ol-muted); font-size: 0.9rem; } #ol-more { position: relative; } .ol-more-menu { min-inline-size: 13.5rem; border-radius: var(--ol-radius); padding-block: 0.4rem; } .ol-more-menu > li > a { gap: 0.65rem; padding: 0.65rem 1rem; font-size: 0.9rem; cursor: pointer; } .ol-more-menu .ol-i { inline-size: 1.15rem; block-size: 1.15rem; min-inline-size: 1.15rem; } .ol-empty { color: var(--ol-muted); margin: 0; } .ol-topsearch { display: inline-flex; align-items: center; gap: 0.5rem; min-inline-size: 15rem; block-size: 2.5rem; padding: 0 0.5rem 0 0.9rem; margin: 0; border: 1px solid var(--outline-variant); border-radius: 9999px !important; background: color-mix(in srgb, var(--on-surface) 4%, transparent); color: var(--ol-muted); font-size: 0.9rem; font-weight: 400; box-shadow: none; cursor: pointer; transition: border-color var(--ol-dur) var(--ol-ease), box-shadow var(--ol-dur) var(--ol-ease); } .ol-topsearch:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: var(--ol-sh-1); } .ol-topsearch > span { flex: 1; text-align: start; } .ol-topsearch .ol-i { inline-size: 1.1rem; block-size: 1.1rem; min-inline-size: 1.1rem; } .ol-topsearch kbd { font-family: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1; padding: 0.25rem 0.5rem; border: 1px solid var(--outline-variant); border-radius: 0.4rem; background: var(--surface); color: var(--ol-muted); } .ol-search-dialog { position: fixed; inset: 0 auto auto 50%; transform: translateX(-50%); inline-size: min(680px, calc(100vw - 1.5rem)); max-inline-size: none; margin-block-start: 3.5rem; padding: 0; max-block-size: min(34rem, 85vh); border: 1px solid var(--outline-variant); border-radius: 1rem !important; background: var(--surface-container); color: var(--on-surface); box-shadow: var(--ol-sh-2), 0 0 0 100vmax rgba(0, 0, 0, 0.4); overflow: hidden; } .ol-search-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-block-end: 1px solid var(--outline-variant); } .ol-search-bar > .ol-ico { color: var(--ol-muted); flex: none; margin-inline-start: 0.35rem; } .ol-search-bar input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--on-surface); font-size: 1.05rem; padding: 0.4rem 0; } .ol-search-results, .ol-search-home { overflow-y: auto; max-block-size: calc(min(34rem, 85vh) - 4.5rem); padding-block-end: 0.5rem; } .ol-search-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ol-muted); opacity: 0.75; margin: 0; padding: 0.9rem 1.1rem 0.3rem; } .ol-search-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; margin-inline: 0.5rem; padding: 0.5rem 0.6rem; border-radius: calc(var(--ol-radius) + 2px); text-decoration: none; color: var(--on-surface); text-align: start; } .ol-search-row:hover, .ol-search-row:focus, .ol-search-row.is-sel { background: color-mix(in srgb, var(--on-surface) 8%, transparent); } .ol-search-row__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 0.65rem; background: var(--primary-container); color: var(--on-primary-container); } .ol-search-row__icon .ol-i { inline-size: 1.2rem; block-size: 1.2rem; min-inline-size: 1.2rem; } .ol-search-row__text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-inline-size: 0; } .ol-search-row__title { max-inline-size: 100%; } .ol-search-row__title { font-weight: 600; font-size: 0.95rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ol-search-row__sub { font-size: 0.8rem; color: var(--ol-muted); line-height: 1.3; } .ol-search-hit { color: var(--primary); } .ol-search-empty { padding: 1.25rem; text-align: center; color: var(--ol-muted); } .ol-embed-dialog { max-width: 32rem; } .ol-embed-dialog__title { margin: 0 0 0.5rem; } .ol-embed-dialog textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; } #ol-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%) translateY(1rem); z-index: 1000; padding: 0.7rem 1.1rem; border-radius: var(--ol-radius); background: var(--inverse-surface, #2b2b2b); color: var(--inverse-on-surface, #fff); box-shadow: var(--ol-sh-2); font-size: 0.9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity var(--ol-dur) var(--ol-ease), transform var(--ol-dur) var(--ol-ease); } #ol-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 600px) { #ol-toast { bottom: 5rem; } } .ol-footer { max-width: var(--ol-max); margin: 3.5rem auto 0; padding: 2rem 1rem 1.5rem; background: linear-gradient(90deg, transparent, var(--ol-line) 15%, var(--ol-line) 85%, transparent) top / 100% 1px no-repeat; } .ol-footer__brand { display: inline-flex; align-items: center; gap: 0.5rem; margin:0.75rem; justify-self: center; font-weight: 700; font-size: 1.75rem; color: var(--on-surface); text-decoration: none; } .ol-footer__desc { color: var(--ol-muted); margin: 0.75rem auto 0; text-align: center; text-wrap: balance; } .ol-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; margin: 1.75rem 0 0; padding:0.90rem; background: linear-gradient(90deg, transparent, var(--ol-line) 15%, var(--ol-line) 85%, transparent) top / 100% 1px no-repeat; } .ol-footer__links { display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; justify-content: center; } @media (max-width: 600px) { .ol-footer__bottom { flex-direction: column; justify-content: center; gap: 0.75rem; } } .ol-footer__links a { text-decoration: none; color: var(--ol-muted); font-size: 0.85rem; } .ol-footer__links a:hover { color: var(--primary); } .ol-footer__meta { font-size: 0.85rem; color: var(--ol-muted); margin: 0; } .ol-muted { color: var(--ol-muted); font-size: 0.85rem; } :where(button, .button, .chip, article, .surface, .surface-container, dialog, fieldset, table, .field, input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select) { border-radius: var(--ol-radius) !important; } .circle { border-radius: 50% !important; } nav:is(.top, .bottom) > a > i { border-radius: var(--ol-radius) !important; } @media (prefers-reduced-motion: no-preference) { .ol-card:hover { transform: translateY(-2px); box-shadow: var(--ol-sh-2); } .ol-related__grid a:hover, .ol-tile:hover { transform: translateY(-3px); box-shadow: var(--ol-sh-2); border-color: color-mix(in srgb, var(--primary) 40%, transparent); } button:active, .button:active, .chip:active, .ol-tile:active, .ol-related__grid a:active, .ol-pill:active, .ol-browse__row:active, .ol-browse__back:active { transform: scale(0.97); } .ol-main > * { animation: ol-rise 0.45s var(--ol-ease) both; } .ol-result-hero__value.is-pulse { animation: ol-pulse 0.5s var(--ol-ease); } } @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } @media (min-width: 993px) { @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { dialog::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } } @keyframes ol-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes ol-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } } @media print { nav.top, nav.bottom, .ol-footer, .ol-actions, .ol-helpful, .ol-related, .ol-faq, .no-print, #ol-toast, .ol-embed-dialog { display: none !important; } body { background: #fff !important; color: #000 !important; } body:has(> main) { display: block !important; } .ol-main { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .ol-main > * { animation: none !important; } .ol-card, .ol-results, .ol-answer, .ol-article .ol-formula { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; break-inside: avoid; } .ol-results { background: #f4f4f4 !important; } .ol-result-hero__value, .ol-result__value, .ol-result__label, .ol-result-hero__label, .ol-results__title { color: #000 !important; } .ol-hero h1 i { background: none !important; color: #000 !important; } .ol-calc { display: block !important; } .ol-calc > * { width: 100% !important; max-width: 100% !important; } .ol-meta { color: #333 !important; } a { color: #000 !important; text-decoration: none; } .ol-main::after { content: "Lähde: Omalaskuri.fi — " attr(data-calc-id); display: block; margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid #ccc; font-size: 0.75rem; color: #555; } }