/* Adviseo AI — kujundussüsteem Hele pind ja tume kiri, klaas ainult ribal, aknal ja kontaktikaardil. Must, valge ja hall nagu lhv.ai-l: aktsentvärvi pole, värv on ainult tähendusega (inimese täpp, tööriistade tulemused). */ /* FONDID */ /* Kogu sait: Inter (OFL), optilise suurusega: suured pealkirjad saavad Display-lõike. Ladina põhiosa laeb alati, laiendatud osa (š, ž jm) ainult siis, kui lehel on neid märke. */ @font-face { font-family: "Inter"; src: url("fonts/Inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("fonts/Inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Logo sõnamärk ja AI-silt jäävad Geistiks: sama muutuvkiri, ainult ladina tähed (12 kB). */ @font-face { font-family: "Adviseo Logo"; src: url("fonts/Geist-Logo.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; } /* /FONDID */ :root { --bg: #F5F5F7; --bg-2: #ECECEF; --ink: #1D1D1F; --ink-2: #424245; --ink-3: #6E6E73; --line: rgba(0, 0, 0, 0.08); --line-2: rgba(0, 0, 0, 0.14); --on: #1D1D1F; --on-ink: #1D1D1F; --on-soft: rgba(0, 0, 0, 0.06); --on-contrast: #FFFFFF; --on-glow: rgba(0, 0, 0, 0.14); --on-hi: #2A2A2D; --on-lo: #000000; --warn: #A96B00; --warn-soft: rgba(169, 107, 0, 0.12); --pos: #1D7D3E; --pos-soft: rgba(29, 125, 62, 0.10); /* aktsenti pole: ikoonid, jooned ja ribad on grafiidist, pealkirja teine rida hall */ --acc: #1D1D1F; --acc-ink: #1D1D1F; --acc-soft: rgba(0, 0, 0, 0.055); --acc-text: #86868B; --on-acc: #FFFFFF; /* punane: inimese otsuse täpp ning vead tööriistades */ --sig: #DB2C2B; --sig-soft: rgba(219, 44, 43, 0.12); /* etapid ja kategooriad: sama aktsent, vahet teevad number, ikoon ja nimi */ --h1: var(--acc); --h2: var(--acc); --h3: var(--acc); --h4: var(--acc); --h1-soft: var(--acc-soft); --h2-soft: var(--acc-soft); --h3-soft: var(--acc-soft); --h4-soft: var(--acc-soft); --spec: var(--acc); --mark-grad: var(--acc); /* valgus klaasi taga: ainult valge ja hall */ --tint-a: oklch(0.995 0 0); --tint-b: oklch(0.99 0 0); --tint-c: oklch(0.92 0.002 260); --tint-d: oklch(0.98 0 0); --glass-a: rgba(255, 255, 255, 0.68); --glass-b: rgba(255, 255, 255, 0.36); --glass-brd: rgba(255, 255, 255, 0.85); --glass-hi: rgba(255, 255, 255, 0.98); --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); --rim: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5) 40%, rgba(0, 0, 0, 0.06) 62%, rgba(255, 255, 255, 0.9)); --solid: #FFFFFF; --solid-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05); --pill: rgba(0, 0, 0, 0.05); --btn-bg: #1D1D1F; --btn-fg: #FFFFFF; --sw-off: #D2D2D7; --sw-off-2: #C2C2C7; --knob: #FFFFFF; --knob-2: #EFEFF1; --knob-on: #FFFFFF; --chip-bg: rgba(255, 255, 255, 0.66); --viz-bg: #F2F2F5; --dot: rgba(0, 0, 0, 0.12); --aurora-o: 0.95; --sheen: rgba(255, 255, 255, 0.30); --light: rgba(255, 255, 255, 0.62); --cursor-fill: #1D1D1F; --cursor-line: #FFFFFF; --font: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --logo: "Adviseo Logo", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --r-card: 28px; --r-sm: 18px; --wrap: 1120px; --gutter: clamp(16px, 4vw, 40px); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --spring: cubic-bezier(0.34, 1.4, 0.64, 1); } @supports (transition-timing-function: linear(0, 1)) { :root { --spring: linear(0, 0.061 2.9%, 0.202 5.9%, 0.373 8.8%, 0.544 11.8%, 0.695 14.7%, 0.817 17.6%, 0.909 20.6%, 0.974 23.5%, 1.014 26.5%, 1.036 29.4%, 1.045 32.4%, 1.045 35.3%, 1.04 38.2%, 1.025 44.1%, 1.011 50%, 1 58.8%, 0.998 67.6%, 0.999 79.4%, 1); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --bg-2: #0B0B0D; --ink: #F5F5F7; --ink-2: #C7C7CC; --ink-3: #8E8E93; --line: rgba(255, 255, 255, 0.11); --line-2: rgba(255, 255, 255, 0.19); --on: #F5F5F7; --on-ink: #F5F5F7; --on-soft: rgba(255, 255, 255, 0.10); --on-contrast: #000000; --on-glow: rgba(255, 255, 255, 0.18); --on-hi: #FFFFFF; --on-lo: #D8D8DA; --warn: #F2B95A; --warn-soft: rgba(242, 185, 90, 0.16); --pos: #60DB89; --pos-soft: rgba(96, 219, 137, 0.15); --acc: #F5F5F7; --acc-ink: #F5F5F7; --acc-soft: rgba(255, 255, 255, 0.10); --acc-text: #86868B; --on-acc: #000000; --sig: #FF645F; --sig-soft: rgba(255, 100, 95, 0.18); --tint-a: oklch(0.25 0 0); --tint-b: oklch(0.21 0 0); --tint-c: oklch(0.24 0.003 260); --tint-d: oklch(0.22 0 0); --glass-a: rgba(255, 255, 255, 0.10); --glass-b: rgba(255, 255, 255, 0.04); --glass-brd: rgba(255, 255, 255, 0.16); --glass-hi: rgba(255, 255, 255, 0.26); --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4); --rim: linear-gradient(135deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.14) 40%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0.30)); --solid: #1C1C1E; --solid-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.5); --pill: rgba(255, 255, 255, 0.09); --btn-bg: #F5F5F7; --btn-fg: #0B0B0C; --sw-off: #3A3A3C; --sw-off-2: #2C2C2E; --knob: #FFFFFF; --knob-2: #E6E6E8; --knob-on: #FFFFFF; --chip-bg: rgba(255, 255, 255, 0.06); --viz-bg: #111113; --dot: rgba(255, 255, 255, 0.14); --aurora-o: 0.66; --sheen: rgba(255, 255, 255, 0.26); --light: rgba(255, 255, 255, 0.10); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #000000; --bg-2: #0B0B0D; --ink: #F5F5F7; --ink-2: #C7C7CC; --ink-3: #8E8E93; --line: rgba(255, 255, 255, 0.11); --line-2: rgba(255, 255, 255, 0.19); --on: #F5F5F7; --on-ink: #F5F5F7; --on-soft: rgba(255, 255, 255, 0.10); --on-contrast: #000000; --on-glow: rgba(255, 255, 255, 0.18); --on-hi: #FFFFFF; --on-lo: #D8D8DA; --warn: #F2B95A; --warn-soft: rgba(242, 185, 90, 0.16); --pos: #60DB89; --pos-soft: rgba(96, 219, 137, 0.15); --acc: #F5F5F7; --acc-ink: #F5F5F7; --acc-soft: rgba(255, 255, 255, 0.10); --acc-text: #86868B; --on-acc: #000000; --sig: #FF645F; --sig-soft: rgba(255, 100, 95, 0.18); --tint-a: oklch(0.25 0 0); --tint-b: oklch(0.21 0 0); --tint-c: oklch(0.24 0.003 260); --tint-d: oklch(0.22 0 0); --glass-a: rgba(255, 255, 255, 0.10); --glass-b: rgba(255, 255, 255, 0.04); --glass-brd: rgba(255, 255, 255, 0.16); --glass-hi: rgba(255, 255, 255, 0.26); --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4); --rim: linear-gradient(135deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.14) 40%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0.30)); --solid: #1C1C1E; --solid-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.5); --pill: rgba(255, 255, 255, 0.09); --btn-bg: #F5F5F7; --btn-fg: #0B0B0C; --sw-off: #3A3A3C; --sw-off-2: #2C2C2E; --knob: #FFFFFF; --knob-2: #E6E6E8; --knob-on: #FFFFFF; --chip-bg: rgba(255, 255, 255, 0.06); --viz-bg: #111113; --dot: rgba(255, 255, 255, 0.14); --aurora-o: 0.66; --sheen: rgba(255, 255, 255, 0.26); --light: rgba(255, 255, 255, 0.10); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg { max-width: 100%; } a { color: inherit; } p { margin: 0; } h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--on-ink); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); } .skip:focus { left: 16px; } /* Taust: valgus, mis klaasist läbi paistab */ .aurora { position: absolute; inset: 0 0 auto 0; height: 980px; z-index: -1; pointer-events: none; overflow: hidden; } .aurora::before { content: ""; position: absolute; inset: -10% -10% 0 -10%; background: radial-gradient(44% 58% at 86% 6%, var(--tint-c), transparent 72%), radial-gradient(40% 56% at 66% 52%, var(--tint-a), transparent 72%), radial-gradient(34% 46% at 6% 86%, var(--tint-b), transparent 72%); opacity: 0.95; } .aurora::after { content: ""; position: absolute; inset: auto 0 0 0; height: 260px; background: linear-gradient(to bottom, transparent, var(--bg)); } /* Klaas */ .glass { background: linear-gradient(180deg, var(--glass-a), var(--glass-b)); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow); } /* Tüpograafia */ .eyebrow { font-family: var(--font); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .h1 { font-size: clamp(2.5rem, 6.6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.028em; } .h1--sm { font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height: 1.02; letter-spacing: -0.024em; } .h2 { font-size: clamp(1.85rem, 3.9vw, 3.1rem); line-height: 1.04; letter-spacing: -0.022em; } .h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.012em; } .dim { color: var(--ink-3); } .lead { font-size: clamp(1.06rem, 1.55vw, 1.2rem); line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; } .body { color: var(--ink-2); max-width: 38em; text-wrap: pretty; } .small { font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); } .accent { color: var(--on-ink); } /* Nupud */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 14px; border: 0; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 10px 24px rgba(14, 17, 15, 0.16); } .btn:hover { transform: translateY(-1px); } .btn--sm { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 0.94rem; box-shadow: none; } .btn--glass { background: linear-gradient(180deg, var(--glass-a), var(--glass-b)); color: var(--ink); border: 1px solid var(--glass-brd); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 22px rgba(14, 17, 15, 0.08); } .btn svg { flex: none; } /* Menüü ühes ribas */ .nav-wrap { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 50; padding-inline: var(--gutter); } .nav { max-width: 1040px; margin-inline: auto; min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 7px 8px 7px 16px; border-radius: 30px; } .brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; color: var(--ink); } .brand__mark { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--mark-grad); color: var(--on-acc); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 6px 16px -6px rgba(0, 0, 0, 0.55); } .brand__mark::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 55%); } .brand__mark svg { position: relative; display: block; width: 100%; height: 100%; fill: currentColor; } .brand__mark--xl { width: 64px; height: 64px; border-radius: 18px; } .brand__word { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.045em; } .brand__ai { display: inline-flex; align-items: center; height: 20px; margin-left: -1px; padding: 0 6px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; } .nav__links { position: relative; display: flex; align-items: center; gap: 2px; } .nav__links a { position: relative; z-index: 1; display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 0.94rem; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; } .nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--ink); } .nav__pill { position: absolute; top: 0; left: 0; z-index: 0; height: 44px; width: 0; border-radius: 999px; background: var(--pill); opacity: 0; transition: transform 0.35s cubic-bezier(0.3, 0.9, 0.3, 1), width 0.35s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.2s; } .nav__side { display: flex; align-items: center; gap: 6px; } .nav__menu { display: none; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--pill); color: var(--ink); font: inherit; font-size: 0.94rem; font-weight: 500; cursor: pointer; } @media (max-width: 960px) { .nav__menu { display: inline-flex; } .nav__links { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 4px; } .nav:not(.is-open) .nav__links { display: none; } .nav__links a { padding: 0 12px; } .nav__pill { display: none; } .brand__word { font-size: 1.2rem; } } /* Jaotised */ .section { padding-block: clamp(48px, 7vw, 92px); } .section--band { background: var(--bg-2); } .section__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); } /* Avaekraan */ .hero { position: relative; padding-block: clamp(36px, 7vw, 88px) clamp(48px, 8vw, 104px); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; } .hero__cta { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; } @media (max-width: 860px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav__pill { transition: none; } } /* Kaardid ja võrgud */ .grid { display: grid; gap: 16px; } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); } .card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 26px; border-radius: var(--r-card); background: var(--solid); box-shadow: var(--solid-shadow); } .card p { color: var(--ink-2); text-wrap: pretty; } .card__num { font-family: var(--font); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-3); } .card__out { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.94rem; font-weight: 500; color: var(--ink); } .card__out span { display: block; font-family: var(--font); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; } /* Kahe veeru plokk: tekst + sisu */ .split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 64px); align-items: start; } .split__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } } /* Stack: kihid */ .stack { border-radius: var(--r-card); background: var(--solid); box-shadow: var(--solid-shadow); overflow: hidden; min-width: 0; } .stack__row { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 4px 20px; padding: 18px 24px; border-top: 1px solid var(--line); } .stack__row:first-child { border-top: 0; } .stack__label { font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; } .stack__what { color: var(--ink); text-wrap: pretty; } .stack__row--human { background: var(--on-soft); } @media (max-width: 560px) { .stack__row { grid-template-columns: minmax(0, 1fr); padding: 16px 20px; } } /* Loendid */ .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0; border-radius: var(--r-card); background: var(--solid); box-shadow: var(--solid-shadow); overflow: hidden; } .fact { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; border-left: 1px solid var(--line); min-width: 0; } .fact:first-child { border-left: 0; } .fact__big { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.1; } .fact__txt { font-size: 0.94rem; color: var(--ink-2); } @media (max-width: 700px) { .fact { border-left: 0; border-top: 1px solid var(--line); } .fact:first-child { border-top: 0; } } .ticks { display: flex; flex-direction: column; gap: 10px; } .ticks li { position: relative; padding-left: 30px; color: var(--ink-2); text-wrap: pretty; } .ticks li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 14px; height: 8px; border-left: 2px solid var(--on-ink); border-bottom: 2px solid var(--on-ink); transform: rotate(-45deg); } .kv { display: flex; flex-direction: column; } .kv__row { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 4px 20px; padding: 16px 0; border-top: 1px solid var(--line); } .kv__row:first-child { border-top: 0; padding-top: 0; } .kv__k { font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; } .kv__v { color: var(--ink); text-wrap: pretty; } @media (max-width: 560px) { .kv__row { grid-template-columns: minmax(0, 1fr); } } /* Projektikaart avaekraanil */ .proj { border-radius: 30px; padding: 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .proj__title { font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; text-wrap: balance; } .proj__list { display: flex; flex-direction: column; } .proj__list li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 500; } .proj__list li span { flex: none; font-family: var(--font); font-size: 0.75rem; color: var(--ink-3); } /* Kontakt */ .contact { border-radius: 34px; padding: clamp(26px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: center; } .contact__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .contact__box { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--solid); box-shadow: 0 1px 2px rgba(14, 17, 15, 0.06); } .mailrow__addr { flex: 1 1 auto; min-width: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.006em; overflow-wrap: anywhere; user-select: all; } .copy { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--pill); color: var(--ink); font: inherit; font-size: 0.94rem; font-weight: 500; cursor: pointer; } @media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } } .section--glow { position: relative; } .section--glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46% 70% at 78% 50%, var(--tint-a), transparent 72%), radial-gradient(36% 60% at 18% 60%, var(--tint-c), transparent 72%); opacity: 0.85; } /* Märkus */ .note { padding: 18px 22px; border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink-2); font-size: 0.94rem; text-wrap: pretty; } .section--band .note { background: var(--solid); } /* Jalus */ .foot { padding-block: 40px 56px; border-top: 1px solid var(--line); } .foot__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; } .foot__col { display: flex; flex-direction: column; gap: 6px; max-width: 34em; } .foot a { color: var(--ink-2); } /* Siseleht: tabel */ .tablewrap { overflow-x: auto; border-radius: var(--r-card); background: var(--solid); box-shadow: var(--solid-shadow); } table { width: 100%; border-collapse: collapse; font-size: 0.94rem; } th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); } thead th { border-top: 0; font-family: var(--font); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } td a { color: var(--on-ink); font-weight: 500; } .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; } .swatch { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .swatch__chip { height: 76px; border-radius: 18px; border: 1px solid var(--line); } .swatch__name { font-weight: 500; font-size: 0.94rem; } .swatch__val { font-family: var(--font); font-size: 0.75rem; color: var(--ink-3); } /* ============================================================ v2 — ikoonid, liikumine, vähem teksti ============================================================ */ /* Ikoonid */ .ico { flex: none; width: 1.25em; height: 1.25em; stroke-width: 1.75; } .ico-badge { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--on-soft); color: var(--on-ink); } .ico-badge .ico { width: 22px; height: 22px; } .ico-badge--sm { width: 34px; height: 34px; border-radius: 11px; } .ico-badge--sm .ico { width: 17px; height: 17px; } .btn .ico { width: 18px; height: 18px; } /* Väikesed sildid ikooniga */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .tagchip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px 6px 10px; border-radius: 17px; background: var(--chip-bg); border: 1px solid var(--line); font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: var(--ink-2); } .tagchip .ico { width: 16px; height: 16px; color: var(--on-ink); } .tagchip--mono { font-family: var(--font); font-size: 0.8125rem; letter-spacing: 0.02em; padding: 6px 13px; } .tagchip--out { background: var(--on-soft); border-color: transparent; color: var(--ink); min-height: 32px; } /* Taust elab aeglaselt */ .aurora { height: 1100px; } @media (prefers-reduced-motion: no-preference) { .aurora::before { animation: aurora 26s ease-in-out infinite alternate; } @keyframes aurora { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } } } /* Ilmumine kerimisel (ainult kui skript töötab) */ .js [data-reveal] { opacity: 0; translate: 0 34px; transition: opacity 1s var(--ease-out), translate 1.2s var(--ease-out), transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), 0s, 0s; } .js [data-reveal].is-in { opacity: 1; translate: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; translate: none; transition: none; } } @media print { .js [data-reveal] { opacity: 1; translate: none; } } /* Avaekraan: tekst vasakul, näidistöövoog paremal */ @media (min-width: 1041px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 1040px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } } .hero__text .chips { padding-top: 4px; } /* ---------- Liikuv riba ---------- */ .mq { padding-block: 6px clamp(28px, 5vw, 56px); } .mq__in { display: flex; align-items: center; gap: 18px; } .mq__label { flex: none; } .mq__mask { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .mq__track { display: flex; gap: 10px; width: max-content; padding-block: 4px; } .mq__chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 14px rgba(14, 17, 15, 0.05); font-size: 0.94rem; font-weight: 500; color: var(--ink); white-space: nowrap; } .mq__chip .ico { width: 18px; height: 18px; color: var(--on-ink); } .mq__track { will-change: transform; } @media (prefers-reduced-motion: reduce) { .mq__mask { -webkit-mask-image: none; mask-image: none; } .mq__track { flex-wrap: wrap; width: auto; } .mq__chip[aria-hidden="true"] { display: none; } } @media (max-width: 700px) { .mq__in { flex-direction: column; align-items: flex-start; gap: 10px; } .mq__mask { width: 100%; } } /* ---------- Jaotiste pead ja valgus ---------- */ .section__head--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; } .section__head--row > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .glow-l, .glow-r { position: relative; isolation: isolate; } .glow-l::before, .glow-r::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7; } .glow-l::before { background: radial-gradient(38% 60% at 4% 30%, var(--tint-a), transparent 72%); } .glow-r::before { background: radial-gradient(40% 64% at 98% 40%, var(--tint-c), transparent 72%); } /* ---------- Kaardid: ikoon + väike liikuv pilt ---------- */ .card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card--lift:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(14, 17, 15, 0.05), 0 22px 44px rgba(14, 17, 15, 0.10); } .card__head { display: flex; align-items: center; gap: 12px; } .card__head .card__num { margin-left: auto; } .card p { font-size: 1rem; line-height: 1.5; } .card .tagchip { align-self: flex-start; margin-top: auto; } .viz { position: relative; height: 92px; border-radius: 18px; background: var(--viz-bg); overflow: hidden; display: grid; place-items: center; } .viz__row { position: relative; display: flex; align-items: center; width: 74%; } .viz__node { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--solid); box-shadow: 0 1px 2px rgba(14, 17, 15, 0.10); color: var(--ink-2); } .viz__node .ico { width: 17px; height: 17px; } .viz__link { flex: 1 1 auto; height: 2px; background: var(--line-2); } .viz__packet { position: absolute; z-index: 2; top: 50%; left: 17px; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--on); box-shadow: 0 0 0 4px var(--on-soft); } .viz__bar { display: grid; grid-template-columns: 2fr 6fr 6fr 2fr; gap: 6px; width: 74%; } .viz__bar span { position: relative; height: 12px; border-radius: 99px; background: var(--line-2); overflow: hidden; } .viz__bar span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--on); transform-origin: left center; } .viz__people { display: flex; gap: 14px; } .viz__person { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--solid); box-shadow: 0 1px 2px rgba(14, 17, 15, 0.10); color: var(--ink-2); } .viz__person .ico { width: 18px; height: 18px; } .viz__person::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--on) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306210F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center / 12px 12px no-repeat; box-shadow: 0 0 0 2px var(--viz-bg); } @media (prefers-reduced-motion: no-preference) { .viz__packet { animation: viz-packet 3.4s cubic-bezier(0.6, 0, 0.4, 1) infinite; } @keyframes viz-packet { 0% { left: 17px; opacity: 0; } 8% { opacity: 1; } 42%, 54% { left: 50%; } 90% { left: calc(100% - 17px); opacity: 1; } 100% { left: calc(100% - 17px); opacity: 0; } } .viz__bar span::after { animation: viz-seg 6.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.75s); } @keyframes viz-seg { 0% { transform: scaleX(0); } 11%, 72% { transform: scaleX(1); } 80%, 100% { transform: scaleX(0); } } .viz__person::after { animation: viz-check 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.7s); } @keyframes viz-check { 0%, 6% { transform: scale(0); } 14%, 78% { transform: scale(1); } 86%, 100% { transform: scale(0); } } } /* ---------- Ajajoon: neli sammu ---------- */ .track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .track__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding-right: 8px; } .track__step:not(:last-child)::before, .track__step:not(:last-child)::after { content: ""; position: absolute; left: 48px; right: -16px; top: 23px; height: 2px; } .track__step::before { background: var(--line-2); } .track__step::after { background: var(--on); transform-origin: left center; transform: scaleX(0); transition: transform 0.55s ease; transition-delay: calc(var(--i) * 0.45s + 0.35s); } .track.is-in .track__step::after { transform: scaleX(1); } .track__node { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--solid); border: 2px solid var(--line-2); color: var(--ink-3); transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; transition-delay: calc(var(--i) * 0.45s + 0.1s); } .track__node .ico { width: 21px; height: 21px; } .track.is-in .track__node { background: var(--on); border-color: var(--on); color: var(--on-contrast); box-shadow: 0 0 0 6px var(--on-soft); } .track__weeks { margin-top: 6px; font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .track__step p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; } .track__step .tagchip { margin-top: 4px; font-size: 0.8125rem; } html:not(.js) .track__step::after { transform: scaleX(1); } html:not(.js) .track__node { background: var(--on); border-color: var(--on); color: var(--on-contrast); } @media (max-width: 820px) { .track { grid-template-columns: minmax(0, 1fr); gap: 26px; } .track__step { padding: 0 0 0 66px; min-height: 48px; } .track__node { position: absolute; left: 0; top: 0; } .track__weeks { margin-top: 0; } .track__step:not(:last-child)::before, .track__step:not(:last-child)::after { left: 23px; right: auto; top: 48px; bottom: -26px; width: 2px; height: auto; } .track__step::after { transform-origin: center top; transform: scaleY(0); } .track.is-in .track__step::after { transform: scaleY(1); } html:not(.js) .track__step::after { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .track__step::after, .track__node { transition: none; } } /* ---------- Voog: viis sõlme ---------- */ .flow { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: var(--r-card); background: var(--solid); box-shadow: var(--solid-shadow); } .flow__node { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 16px 12px 10px; border-radius: 20px; } .flow__node:not(:last-child)::before, .flow__node:not(:last-child)::after { content: ""; position: absolute; left: 33px; top: 60px; bottom: -12px; width: 2px; border-radius: 2px; } .flow__node::before { background: var(--line-2); } .flow__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--viz-bg); color: var(--ink-2); } .flow__ico .ico { width: 22px; height: 22px; } .flow__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 3px; } .flow__label { font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .flow__text { color: var(--ink); line-height: 1.45; text-wrap: pretty; } .flow__node--human { background: var(--on-soft); } .flow__node--human .flow__ico { background: var(--on); color: var(--on-contrast); } /* ---------- Plaadid: suur sõna + ikoon ---------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; } .tile { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px; border-radius: 24px; background: var(--solid); box-shadow: var(--solid-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } .tile:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(14, 17, 15, 0.05), 0 22px 44px rgba(14, 17, 15, 0.10); } .tile__big { font-size: clamp(1.55rem, 2.7vw, 2.05rem); font-weight: 600; letter-spacing: -0.021em; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .tile__label { font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .tile__txt { font-size: 0.97rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; } .tile--wide { grid-column: 1 / -1; } .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tiles--3 .tile { padding: 18px; gap: 10px; border-radius: 22px; } .tiles--3 .tile__txt { font-size: 0.9rem; } @media (max-width: 620px) { .tiles--3 { grid-template-columns: minmax(0, 1fr); } } .split--stretch { align-items: stretch; } /* ---------- Nimekaart ---------- */ .namecard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-width: 0; min-height: 300px; padding: clamp(28px, 5vw, 52px) clamp(18px, 4vw, 40px); border-radius: 34px; overflow: hidden; } .wm { display: inline-flex; align-items: baseline; font-size: clamp(3.6rem, 11vw, 6.6rem); font-weight: 600; letter-spacing: -0.055em; line-height: 1; color: var(--ink); } .wm__i { position: relative; display: inline-block; } .wm__dot { position: absolute; left: calc(50% + 0.034em); top: -0.025em; width: 0.2em; height: 0.2em; margin-left: -0.1em; border-radius: 50%; background: var(--on); box-shadow: 0 0 0 0.06em var(--on-soft), 0 0 0.35em var(--on-glow); } .io { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .io__item { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--line); font-family: var(--font); font-size: 0.8125rem; color: var(--ink-2); } .io__sw { position: relative; width: 30px; height: 18px; border-radius: 99px; background: var(--sw-off); } .io__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 3px rgba(14, 17, 15, 0.3); } .io__sw--on { background: var(--on); } .io__sw--on::after { transform: translateX(12px); } /* ---------- Projektikaart avaekraanil ---------- */ .proj__list li { align-items: center; overflow-wrap: anywhere; } .proj__title { overflow-wrap: anywhere; } .tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--on); color: var(--on-contrast); } .tick .ico { width: 14px; height: 14px; stroke-width: 2.5; } .weeks { display: flex; flex-direction: column; gap: 8px; } .weeks__bar { display: grid; grid-template-columns: 2fr 6fr 6fr 2fr; gap: 5px; } .weeks__bar span { position: relative; height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; } .weeks__bar span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--on); transform-origin: left center; } .weeks__lbl { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } @media (prefers-reduced-motion: no-preference) { .tick { animation: tick-in 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--i) * 0.28s + 0.7s); } @keyframes tick-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .weeks__bar span::after { animation: seg-in 0.6s ease both; animation-delay: calc(var(--i) * 0.4s + 1.5s); } @keyframes seg-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* ---------- Väikesed sammud reas ---------- */ .ministeps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; counter-reset: ms; } .ministeps li { counter-increment: ms; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--chip-bg); border: 1px solid var(--line); font-size: 0.94rem; font-weight: 500; color: var(--ink); } .ministeps li::before { content: counter(ms); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--on-soft); color: var(--on-ink); font-family: var(--font); font-size: 0.8125rem; } /* ---------- Esimene samm ---------- */ .first { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(22px, 4vw, 48px); align-items: start; padding: clamp(24px, 4vw, 44px); border-radius: 34px; } .first__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 860px) { .first { grid-template-columns: minmax(0, 1fr); } } .note { display: flex; gap: 12px; align-items: flex-start; } .note .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-3); } /* Kontakt: ikoonid */ .contact .chips { padding-top: 2px; } .copy { display: inline-flex; align-items: center; gap: 7px; } .copy .ico { width: 16px; height: 16px; } /* Abiklassid: järjekorranumbrid animatsioonide jaoks ja vahed (lehel pole ühtegi reasisest stiili) */ .i0 { --i: 0; } .i1 { --i: 1; } .i2 { --i: 2; } .i3 { --i: 3; } .i4 { --i: 4; } .i5 { --i: 5; } .d0 { --d: 0; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-l { margin-top: clamp(32px, 5vw, 56px); } .mb-8 { margin-bottom: 8px; } .sel-all { user-select: all; } .tile__txt--ink { color: var(--ink); font-size: 1.1rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.007em; } /* ---------- Tõenduse rollijaotus ajajoone all ---------- */ .note--track { margin-top: 26px; max-width: 760px; } .note--track .ico { color: var(--on-ink); } /* ---------- Meist: nimeloo allkiri, kaks plaati, platvormid ---------- */ .namecard__cap { max-width: 34ch; margin: 0; text-align: center; font-size: 0.86rem; line-height: 1.45; color: var(--ink-3); text-wrap: balance; } .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tiles--2 .tile { padding: 18px; gap: 10px; border-radius: 22px; } .tiles--2 .tile__txt { font-size: 0.9rem; } .platforms { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .platforms .eyebrow { margin: 0; } .mq { padding-block: clamp(28px, 5vw, 56px); } /* Pikk projektipealkiri mahub kolmele reale */ .h1--long { font-size: clamp(1.9rem, 3.9vw, 3.05rem); line-height: 1.05; } /* ============================================================ v3 — Nothing × liquid glass Alus on must-valge ja vaikne. Värv elab ainult valguses, klaasi servas ja neljas toonis (tehnoloogia, projekt, inimesed, tõendus). Punane täpp = sees. ============================================================ */ /* Valgus klaasi taga: neli pehmet tooni */ .aurora::before { background: radial-gradient(40% 54% at 88% 6%, var(--tint-a), transparent 72%), radial-gradient(34% 48% at 64% 46%, var(--tint-b), transparent 72%), radial-gradient(34% 46% at 6% 84%, var(--tint-c), transparent 72%), radial-gradient(30% 40% at 100% 72%, var(--tint-d), transparent 70%); opacity: var(--aurora-o); } .glow-l::before { background: radial-gradient(38% 60% at 4% 30%, var(--tint-a), transparent 72%), radial-gradient(30% 50% at 18% 80%, var(--tint-b), transparent 72%); opacity: 0.6; } .glow-r::before { background: radial-gradient(40% 64% at 98% 40%, var(--tint-c), transparent 72%), radial-gradient(30% 46% at 82% 90%, var(--tint-d), transparent 72%); opacity: 0.6; } /* Punktmaatriks avaekraani taga */ .hero { isolation: isolate; } /* Klaasi serv murrab valgust */ .glass, .btn--glass { position: relative; } .glass::before, .btn--glass::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--rim); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* Logo ja sõnamärk: punane täpp */ .wm__dot { background: var(--acc); box-shadow: 0 0 0 0.06em var(--acc-soft), 0 0 0.35em var(--acc-soft); } .io__sw--on::after { background: var(--knob-on); } /* Pealkirja rõhk punktmaatriksis */ /* Toonid: d0–d3 kaartidel ja plaatidel, i0–i3 ajajoonel */ .d0 { --hu: var(--h1); --hu-soft: var(--h1-soft); } .d1 { --hu: var(--h2); --hu-soft: var(--h2-soft); } .d2 { --hu: var(--h3); --hu-soft: var(--h3-soft); } .d3 { --hu: var(--h4); --hu-soft: var(--h4-soft); } .ico-badge { background: var(--hu-soft, var(--pill)); color: var(--hu, var(--ink)); } .tagchip .ico { color: var(--ink-3); } .tagchip--out { background: var(--chip-bg); border-color: var(--line); } .tagchip--out .ico { color: var(--hu, var(--ink-3)); } /* Liikuv riba: väikesed värvilised ikoonid */ .mq__chip .ico { color: var(--h1); } .mq__chip:nth-child(4n+2) .ico { color: var(--h2); } .mq__chip:nth-child(4n+3) .ico { color: var(--h3); } .mq__chip:nth-child(4n+4) .ico { color: var(--h4); } /* Ajajoon: iga etapp oma tooniga, joon kannab tooni edasi */ .track__step.i0 { --hu: var(--h1); --hu-soft: var(--h1-soft); --hu-next: var(--h2); } .track__step.i1 { --hu: var(--h2); --hu-soft: var(--h2-soft); --hu-next: var(--h3); } .track__step.i2 { --hu: var(--h3); --hu-soft: var(--h3-soft); --hu-next: var(--h4); } .track__step.i3 { --hu: var(--h4); --hu-soft: var(--h4-soft); --hu-next: var(--h4); } .track__step::after { background: var(--line-2); } .track.is-in .track__node, html:not(.js) .track__node, .track__step.is-lit .track__node { background: var(--solid); border-color: var(--hu); color: var(--hu); box-shadow: 0 0 0 6px var(--hu-soft); } .note--track .ico { color: var(--h4); } /* Projektikaart: nädalariba neljas toonis */ .weeks__bar span.i0::after { background: var(--h1); } .weeks__bar span.i1::after { background: var(--h2); } .weeks__bar span.i2::after { background: var(--h3); } .weeks__bar span.i3::after { background: var(--h4); } /* Teenusekaartide väikesed pildid */ .viz__packet { background: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); } .viz__bar span.i0::after { background: var(--h1); } .viz__bar span.i1::after { background: var(--h2); } .viz__bar span.i2::after { background: var(--h3); } .viz__bar span.i3::after { background: var(--h4); } .viz__person::after { background: var(--ink); } .viz__person::before { content: ""; position: absolute; z-index: 1; right: -3px; bottom: -3px; width: 16px; height: 16px; background: var(--bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } @media (prefers-reduced-motion: no-preference) { .viz__person::before { animation: viz-check 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.7s); } } /* Tööriistade voog: spektriga tilk, sõlmed süttivad oma tooniga, inimene on must + punane täpp */ .flow__node.i0 { --hu: var(--h1); --hu-soft: var(--h1-soft); } .flow__node.i1 { --hu: var(--h2); --hu-soft: var(--h2-soft); } .flow__node.i2 { --hu: var(--h3); --hu-soft: var(--h3-soft); } .flow__node.i3 { --hu: var(--h4); --hu-soft: var(--h4-soft); } .flow__node--human { background: var(--pill); } .flow__node--human .flow__ico { background: var(--ink); color: var(--bg); } .flow__node--human .flow__label::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 3px var(--sig-soft); vertical-align: 1px; } /* Numbrid punktmaatriksis nagu Nothingu ekraanil */ .tile__big { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.021em; line-height: 1.1; overflow-wrap: normal; font-variant-numeric: tabular-nums; } .tile__big--word { font-family: var(--font); font-size: clamp(1.3rem, 2.1vw, 1.6rem); font-weight: 600; font-variation-settings: normal; letter-spacing: -0.018em; line-height: 1.15; } /* ============================================================ v4 — liikumine ja näidistöövoog Üks pehme kõver kogu lehel. Liiguvad ainult transform ja opacity. Lõputult kordub vaid avaekraani näide ja selle saab välja lülitada. ============================================================ */ .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Pealkirjad: sõnad tõusevad maski tagant */ .w { display: inline-block; clip-path: inset(-0.4em -0.3em -0.2em -0.3em); } .w__i { display: inline-block; transform-origin: 0 100%; } .wi0 { --wi: 0; } .wi1 { --wi: 1; } .wi2 { --wi: 2; } .wi3 { --wi: 3; } .wi4 { --wi: 4; } .wi5 { --wi: 5; } .wi6 { --wi: 6; } .wi7 { --wi: 7; } .wi8 { --wi: 8; } .wi9 { --wi: 9; } .wi10 { --wi: 10; } .wi11 { --wi: 11; } .wi12 { --wi: 12; } .wi13 { --wi: 13; } .wi14 { --wi: 14; } .wi15 { --wi: 15; } .js [data-reveal] .w__i { transform: translateY(130%) rotate(2.5deg); transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms + var(--wi, 0) * 45ms + 60ms); } .js [data-reveal].is-in .w__i { transform: none; } /* Avaekraani sisenemine */ @media (prefers-reduced-motion: no-preference) { .nav { animation: nav-in 0.9s var(--ease-out) both; } .hero .eyebrow { animation: in-blur 0.9s var(--ease-out) 0.05s both; } .hero h1 .w__i { animation: w-rise 1.15s var(--ease-out) both; animation-delay: calc(var(--wi, 0) * 70ms + 0.12s); } .hero .accent { animation: acc-rise 1.15s var(--ease-out) 0.3s both; } .hero .lead { animation: in-blur 1s var(--ease-out) 0.45s both; } .hero .hero__text > .note { animation: in-blur 1s var(--ease-out) 0.52s both; } .hero__cta { animation: in-up 1s var(--ease-out) 0.58s both; } .hero__text .chips { animation: in-up 1s var(--ease-out) 0.68s both; } .hero .wf__win, .hero .proj { animation: win-in 1.4s var(--ease-out) 0.28s both; } .aurora::before { animation: aurora-in 1.8s ease both, aurora 26s ease-in-out 1.8s infinite alternate; } } @keyframes nav-in { from { opacity: 0; transform: translateY(-16px) scale(0.98); } } @keyframes in-up { from { opacity: 0; transform: translateY(16px); } } @keyframes in-blur { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } @keyframes w-rise { from { transform: translateY(130%) rotate(2.5deg); } } @keyframes win-in { from { opacity: 0; transform: translateY(40px) scale(0.95); } } @keyframes aurora-in { from { opacity: 0; } } @keyframes acc-rise { from { transform: translateY(115%) rotate(2deg); } } /* ---------- Näidistöövoog ---------- */ .wf { position: relative; width: 100%; max-width: 520px; margin: 0; justify-self: end; perspective: 1600px; } .wf__tilt { transform-style: preserve-3d; } .wf__win { display: flex; flex-direction: column; padding: 7px; border-radius: 30px; } .wf__bar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 2px 4px 2px 14px; } .wf__title { flex: none; font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .wf__case { display: inline-flex; align-items: center; min-width: 0; height: 26px; padding: 0 11px; border-radius: 99px; background: var(--pill); font-size: 0.8125rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; } .wf__case > span { display: block; overflow: hidden; text-overflow: ellipsis; } .wf__pager { display: inline-flex; gap: 4px; margin-left: auto; padding-inline: 4px; } .wf__pager i { display: block; width: 5px; height: 5px; border-radius: 99px; background: var(--line-2); transition: width 0.6s var(--ease-out), background-color 0.3s ease; } .wf__pager i.is-on { width: 15px; background: var(--acc); } .wf__power { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 6px; border: 0; border-radius: 99px; background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; transition: background-color 0.25s ease; } .wf__power:hover { background: var(--pill); } .wf__power[hidden] { display: none; } .wf__sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 99px; background: var(--acc); transition: background-color 0.3s ease; } .wf__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transform: translateX(12px); transition: transform 0.5s var(--spring); } .wf__power[aria-checked="false"] .wf__sw { background: var(--sw-off); } .wf__power[aria-checked="false"] .wf__sw::after { transform: none; } .wf__pwr { min-width: 6ch; font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; } .wf__panel { position: relative; overflow: hidden; padding: 6px; border-radius: 23px; background: var(--solid); box-shadow: 0 1px 2px rgba(11, 11, 12, 0.06); } .wf__steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; } .wf__line { position: absolute; z-index: 0; left: 35px; top: 44px; bottom: 44px; width: 2px; border-radius: 2px; background: var(--line); } .wf__line::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--line-2); transform-origin: 50% 0; transform: scaleY(var(--prog, 1)); transition: transform 0.7s var(--ease-out); } .wf__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 66px; padding: 11px 12px 11px 10px; border-radius: 17px; transition: background-color 0.5s var(--ease-out), opacity 0.5s var(--ease-out); } .wf__step--in { --hu: var(--h1); --hu-soft: var(--h1-soft); } .wf__step--ai { --hu: var(--h2); --hu-soft: var(--h2-soft); } .wf__step--rules { --hu: var(--h3); --hu-soft: var(--h3-soft); } .wf__step--human { --hu: var(--ink); --hu-soft: var(--pill); } .wf__step--out { --hu: var(--h4); --hu-soft: var(--h4-soft); } .wf__ico { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(var(--hu-soft), var(--hu-soft)), var(--solid); color: var(--hu); transition: background 0.45s ease, color 0.45s ease, transform 0.6s var(--spring); } .wf__ico .ico { width: 20px; height: 20px; } .wf__step--human .wf__ico { background: var(--ink); color: var(--bg); } .wf__body { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wf__lbl { font-family: var(--font); font-size: 0.65625rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .wf__step--human .wf__lbl::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--sig); vertical-align: 1px; } .wf__txt { display: block; font-size: 1rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.006em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out), filter 0.45s ease; } .wf__body::after { content: ""; position: absolute; left: 0; bottom: 5px; width: 58%; height: 9px; border-radius: 99px; background: linear-gradient(90deg, var(--line) 20%, var(--line-2) 50%, var(--line) 80%); background-size: 220% 100%; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .wf__step.i1 .wf__body::after { width: 48%; } .wf__step.i2 .wf__body::after { width: 66%; } .wf__step.i3 .wf__body::after { width: 52%; } .wf__step.i4 .wf__body::after { width: 44%; } .wf__side { display: grid; align-items: center; justify-items: end; min-width: 26px; height: 28px; } .wf__side > * { grid-area: 1 / 1; } .wf__chk { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); transition: transform 0.55s var(--spring), opacity 0.2s ease; } .wf__chk .ico { width: 13px; height: 13px; stroke-width: 2.6; } .wf__pct { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.006em; color: var(--hu); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.25s ease; } .wf__meter { position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; border-radius: 99px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity 0.3s ease; } .wf__fill { display: block; height: 100%; border-radius: inherit; background: var(--spec); transform-origin: 0 50%; } .wf__dots { display: inline-flex; gap: 4px; opacity: 0; transition: opacity 0.25s ease; } .wf__dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); } .wf__ok { position: relative; display: grid; place-items: center; min-height: 32px; padding: 0 14px; border-radius: 99px; background: var(--pill); color: var(--ink); font-size: 0.8125rem; font-weight: 600; overflow: hidden; isolation: isolate; transition: background-color 0.35s ease, color 0.35s ease; } .wf__ok > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: opacity 0.3s ease, transform 0.5s var(--ease-out); } .wf__ok-a { opacity: 0; transform: translateY(-9px); } .wf__ok-b .ico { width: 13px; height: 13px; stroke-width: 2.6; } .wf__ok::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--sig-soft); opacity: 0; transform: scale(0); } .wf__ok.is-hit::after { animation: wf-ripple 0.7s var(--ease-out); } @keyframes wf-ripple { from { opacity: 1; transform: scale(0); } to { opacity: 0; transform: scale(7); } } .wf__cursor { position: absolute; z-index: 4; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; pointer-events: none; } .wf__cy { display: block; } .wf__arrow { display: block; width: 22px; height: 22px; fill: var(--cursor-fill); stroke: var(--cursor-line); stroke-width: 1.5; stroke-linejoin: round; transform-origin: 25% 15%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28)); } .wf__sheen { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 32%, var(--light) 50%, transparent 68%); opacity: 0; } /* Töös: ootel read on tuhmid ja näitavad laadimisriba, aktiivne rida on toonitud */ .wf[data-run] .wf__step { opacity: 0.55; } .wf[data-run] .wf__step.is-on, .wf[data-run] .wf__step.is-done { opacity: 1; } .wf[data-run] .wf__step.is-on { background-color: var(--hu-soft); } .wf[data-run] .wf__step:not(.is-on):not(.is-done) .wf__ico { background: var(--viz-bg); color: var(--ink-3); transform: scale(0.92); } .wf[data-run] .wf__step:not(.is-on):not(.is-done) .wf__txt { opacity: 0; transform: translateY(7px); filter: blur(3px); } .wf[data-run] .wf__step:not(.is-on):not(.is-done) .wf__body::after { opacity: 1; } .wf[data-run] .wf__step:not(.is-done) .wf__chk { opacity: 0; transform: scale(0.2); } .wf[data-run] .wf__step.is-on .wf__pct, .wf[data-run] .wf__step.is-on .wf__meter, .wf[data-run] .wf__step.is-on .wf__dots { opacity: 1; } .wf[data-run] .wf__step:not(.is-done) .wf__ok { background: var(--ink); color: var(--bg); } .wf[data-run] .wf__step:not(.is-done) .wf__ok-a { opacity: 1; transform: none; } .wf[data-run] .wf__step:not(.is-done) .wf__ok-b { opacity: 0; transform: translateY(9px); } .wf[data-run] .wf__step.is-on .wf__ico { transform: scale(1.06); } @media (prefers-reduced-motion: no-preference) { .wf[data-run] .wf__step:not(.is-on):not(.is-done) .wf__body::after { animation: wf-shimmer 1.5s linear infinite; } .wf[data-run] .wf__step.is-on .wf__ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--hu); animation: wf-ping 1.3s var(--ease-out) infinite; } .wf[data-run] .wf__step.is-on .wf__dots i { animation: wf-dot 0.35s var(--ease-out) both; } .wf[data-run] .wf__step.is-on .wf__dots i:nth-child(2) { animation-delay: 0.2s; } .wf[data-run] .wf__step.is-on .wf__dots i:nth-child(3) { animation-delay: 0.4s; } .wf[data-run] .wf__step--human.is-on .wf__lbl::after { animation: wf-sig 1.1s ease-in-out infinite; } } @keyframes wf-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } } @keyframes wf-ping { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } } @keyframes wf-dot { from { background: var(--line-2); transform: scale(0.5); } to { background: var(--hu); transform: scale(1); } } @keyframes wf-sig { 0%, 100% { box-shadow: 0 0 0 0 var(--sig-soft); } 50% { box-shadow: 0 0 0 5px var(--sig-soft); } } @media (max-width: 1040px) { .wf { justify-self: start; max-width: 560px; } } @media (max-width: 400px) { .wf__txt { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .wf__step { min-height: 74px; } } @media (max-width: 560px) { .wf__win { padding: 6px; border-radius: 26px; } .wf__bar { min-height: 44px; padding-left: 8px; gap: 8px; } .wf__title { display: none; } .wf__panel { padding: 5px; border-radius: 21px; } .wf__step { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; min-height: 56px; padding: 8px 10px 8px 8px; border-radius: 15px; } .wf__ico { width: 34px; height: 34px; border-radius: 11px; } .wf__ico .ico { width: 17px; height: 17px; } .wf__line { left: 29px; top: 36px; bottom: 36px; } .wf__txt { font-size: 0.875rem; } .wf__ok { min-height: 30px; padding: 0 12px; font-size: 0.78rem; } } /* ---------- Klaas: valgus järgib kursorit ---------- */ @media (hover: hover) and (pointer: fine) { .glass::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), var(--light), transparent 62%); opacity: 0; transition: opacity 0.5s var(--ease-out); } .glass.is-lit::after { opacity: 1; } } /* ---------- Menüüriba: kerides tihedam klaas ---------- */ .nav { transition: box-shadow 0.5s var(--ease-out), background-color 0.5s ease; } .nav-wrap.is-stuck .nav { box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 50px rgba(11, 11, 12, 0.13), 0 2px 8px rgba(11, 11, 12, 0.06); } /* ---------- Nupud: vajutus vetrub, peanupul libiseb valgus ---------- */ .btn { transition: transform 0.5s var(--spring), box-shadow 0.35s var(--ease-out), background-color 0.3s ease; } .btn:active { transform: scale(0.965); transition-duration: 0.12s; } .btn svg { transition: transform 0.5s var(--spring); } .btn:hover svg:last-child { transform: translateX(3px); } .btn:not(.btn--glass) { position: relative; isolation: isolate; overflow: hidden; } .btn:not(.btn--glass)::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 28%, var(--sheen) 50%, transparent 72%); transform: translateX(-130%); pointer-events: none; } .btn:not(.btn--glass):hover::after { transform: translateX(130%); transition: transform 0.95s var(--ease-out); } .copy { transition: background-color 0.3s ease, color 0.3s ease, transform 0.5s var(--spring); } .copy:active { transform: scale(0.96); } .copy.is-done { background: var(--ink); color: var(--bg); } /* ---------- Kaardid: ikoon nügib hõljudes ---------- */ .ico-badge .ico { transition: transform 0.6s var(--spring); } .card:hover .ico-badge .ico, .tile:hover .ico-badge .ico { transform: translateY(-1px) rotate(-8deg) scale(1.08); } /* ---------- Väikesed pildid liiguvad ainult siis, kui on nähtaval ---------- */ .js .viz[data-live]:not(.is-live) *, .js .viz[data-live]:not(.is-live) *::before, .js .viz[data-live]:not(.is-live) *::after { animation-play-state: paused !important; } /* ---------- Ajajoon ja voog joonistuvad kerimise järgi ---------- */ .js .track[data-scrub] .track__step::after { transform: scaleX(clamp(0, calc(var(--p, 1) * 3 - var(--i, 0)), 1)); transition: none; } .js .track[data-scrub] .track__node { transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.6s var(--ease-out), transform 0.6s var(--spring); transition-delay: 0s; } .js .track[data-scrub] .track__step:not(.is-lit) .track__node { background: var(--solid); border-color: var(--line-2); color: var(--ink-3); box-shadow: none; transform: scale(0.9); } @media (max-width: 820px) { .js .track[data-scrub] .track__step::after { transform: scaleY(clamp(0, calc(var(--p, 1) * 3 - var(--i, 0)), 1)); } } .flow__node:not(:last-child)::after { background: var(--line-2); transform-origin: 50% 0; transform: scaleY(1); } .flow__node:not(.flow__node--human) .flow__ico { background: linear-gradient(var(--hu-soft), var(--hu-soft)), var(--solid); color: var(--hu); transition: background 0.45s ease, color 0.45s ease, transform 0.6s var(--spring); } .js .flow[data-scrub] .flow__node:not(:last-child)::after { transform: scaleY(clamp(0, calc(var(--p, 1) * 4 - var(--i, 0)), 1)); } .js .flow[data-scrub] .flow__node:not(.is-lit) .flow__ico { background: var(--viz-bg); color: var(--ink-3); transform: scale(0.9); } .js .flow[data-scrub] .flow__node:not(.is-lit) .flow__text { color: var(--ink-3); } .flow__text { transition: color 0.45s ease; } .flow__node--human .flow__ico { transition: transform 0.6s var(--spring), background-color 0.45s ease; } @media (prefers-reduced-motion: no-preference) { .flow__node--human.is-hit .flow__ico { animation: hit 0.9s var(--ease-out); } .flow__node--human.is-hit .flow__label::after { animation: wf-sig 1.1s ease-in-out 2; } } @keyframes hit { 0% { box-shadow: 0 0 0 0 var(--sig-soft); } 40% { box-shadow: 0 0 0 9px var(--sig-soft); } 100% { box-shadow: 0 0 0 0 transparent; } } /* ---------- Sõnamärk: punane täpp kukub kohale, lüliti läheb sisse ---------- */ @media (prefers-reduced-motion: no-preference) { .js .namecard:not(.is-in) .wm__dot { opacity: 0; } .js .namecard.is-in .wm__dot { animation: dot-drop 1.1s var(--ease-out) 0.45s both; } .js .namecard .io__sw { transition: background-color 0.4s ease 1.1s; } .js .namecard .io__sw::after { transition: transform 0.6s var(--spring) 1.1s; } .js .namecard:not(.is-in) .io__sw--on { background: var(--sw-off); } .js .namecard:not(.is-in) .io__sw--on::after { transform: none; background: var(--knob); } } @keyframes dot-drop { 0% { opacity: 0; transform: translateY(-340%) scale(0.6); } 38% { opacity: 1; transform: translateY(0) scale(1.15, 0.82); } 54% { transform: translateY(-48%) scale(0.95, 1.06); } 70% { transform: translateY(0) scale(1.05, 0.95); } 82% { transform: translateY(-12%) scale(1); } 100% { opacity: 1; transform: none; } } /* ---------- Lehelt lehele: pehme üleminek ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 0.22s var(--ease-io) both; } ::view-transition-new(root) { animation: vt-in 0.5s var(--ease-out) both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .btn, .btn svg, .copy, .ico-badge .ico, .wf__step, .wf__txt, .wf__ico, .wf__line::after { transition: none !important; } } /* ============================================================ v5 — Adviseo AI Apple'i rahu, klaasist pinnad, sinine aktsent. Spekter ainult märgis, pealkirja rõhus ja klaasi taga. Teenused kolmes etapis: kaardista, ehita, juuruta ja hoia. ============================================================ */ a:not(.btn):not(.brand):not(.nav__links a) { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; } .small a, .note a, td a { color: var(--acc-ink); } :focus-visible { outline-color: var(--acc); } .center { text-align: center; } .wrap--narrow { max-width: calc(840px + 2 * var(--gutter)); } /* Nupud: sinine pill, klaasist teine nupp */ .btn:not(.btn--glass) { box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn--sm:not(.btn--glass) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn:not(.btn--glass):hover { background: color-mix(in srgb, var(--btn-bg) 84%, var(--bg)); } /* Jaotiste pead keskel */ .section__head--center { align-items: center; text-align: center; } .section__head--center .lead { margin-inline: auto; text-wrap: balance; } .section__head--center .h2 { max-width: 24ch; } /* ---------- Avaekraan keskel ---------- */ .hero--center { padding-block: clamp(24px, 4.5vw, 60px) clamp(40px, 5vw, 64px); text-align: center; } .hero__center { display: flex; flex-direction: column; align-items: center; gap: 22px; } .pill-eye { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px 0 11px; border-radius: 99px; background: var(--chip-bg); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 14px rgba(0, 0, 0, 0.05); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); font-size: 0.875rem; font-weight: 500; color: var(--ink-2); } .pill-eye .ico { width: 16px; height: 16px; color: var(--h2); } .h1--hero { font-size: clamp(2.2rem, 5.8vw, 4.7rem); line-height: 1; letter-spacing: -0.03em; } .hero--center .lead { max-width: 34em; margin-inline: auto; text-wrap: balance; } .hero--center .hero__cta { justify-content: center; } .proof { display: inline-flex; align-items: center; gap: 8px; font-size: 0.97rem; font-weight: 500; color: var(--ink); } .proof .ico { width: 18px; height: 18px; color: var(--acc); } .hero__stage { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: clamp(28px, 4vw, 44px); } .hero__stage .wf { justify-self: auto; max-width: 600px; text-align: left; } .chips--center { justify-content: center; } /* Rõhk: pealkirja teine rida on hall ja tõuseb maski tagant */ .accent-w { display: block; clip-path: inset(-0.35em -0.4em -0.22em -0.4em); } .accent { display: inline-block; padding-bottom: 0.06em; color: var(--acc-text); } /* ---------- Teenused: etapid ja bento ---------- */ .ph1 { --hu: var(--h1); --hu-soft: var(--h1-soft); } .ph2 { --hu: var(--h2); --hu-soft: var(--h2-soft); } .ph3 { --hu: var(--h3); --hu-soft: var(--h3-soft); } .phases { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; } .phases li { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 99px; background: var(--hu-soft); color: var(--hu); font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .phases li b { font-weight: 600; opacity: 0.7; } .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .bento__tile { position: relative; isolation: isolate; overflow: hidden; grid-column: span 6; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px; border-radius: 28px; background: var(--solid); box-shadow: var(--solid-shadow); } .bento__tile.s5 { grid-column: span 5; } .bento__tile.s6 { grid-column: span 6; } .bento__tile.s7 { grid-column: span 7; } .bento__tile::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 0% 0%, var(--hu-soft), transparent 62%); } .bento__tile:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 24px 48px rgba(0, 0, 0, 0.10); } .bento__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bento__tile .ico-badge { background: var(--hu-soft); color: var(--hu); } .phase { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--hu-soft); color: var(--hu); font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .phase b { font-weight: 600; opacity: 0.7; } .bento__tile .h3 { font-size: 1.32rem; } .bento__txt { color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; } .bento__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--line); } .bento__out { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.94rem; font-weight: 500; line-height: 1.35; color: var(--ink); } .bento__out span { font-family: var(--font); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .tagchip--time { flex: none; min-height: 30px; padding: 4px 11px 4px 9px; font-size: 0.8125rem; } .bento .viz { background: color-mix(in srgb, var(--viz-bg) 82%, var(--hu-soft)); } @media (max-width: 960px) { .bento__tile.s5, .bento__tile.s6, .bento__tile.s7 { grid-column: span 6; } } @media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento__tile.s5, .bento__tile.s6, .bento__tile.s7 { grid-column: auto; } .bento__tile { padding: 20px; border-radius: 24px; } } /* Väikesed pildid: pingerida, vestlus, süsteemid, kasvavad tulbad */ .viz__rank { display: flex; flex-direction: column; gap: 8px; width: 78%; } .viz__rank span { display: flex; align-items: center; gap: 9px; } .viz__rank b { width: 10px; font-family: var(--font); font-size: 0.6875rem; font-weight: 500; color: var(--ink-3); } .viz__rank i { display: block; height: 8px; border-radius: 99px; background: var(--hu); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.15s + 0.35s); } .viz__rank .i0 i { width: 92%; } .viz__rank .i1 i { width: 66%; opacity: 0.6; } .viz__rank .i2 i { width: 42%; opacity: 0.35; } .viz__chat { display: flex; flex-direction: column; gap: 6px; width: 86%; } .bub { max-width: 82%; padding: 6px 11px; border-radius: 14px; font-size: 0.75rem; line-height: 1.3; } .bub--q { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--acc); color: var(--on-acc); } .bub--a { display: grid; align-self: flex-start; border-bottom-left-radius: 5px; background: var(--solid); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .bub--a > span { grid-area: 1 / 1; } .bub__dots { display: inline-flex; align-items: center; gap: 3px; opacity: 0; } .bub__dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); } .viz__hub { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; gap: 6px 10px; } .viz__core { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--hu); color: var(--on-acc); box-shadow: 0 6px 16px -6px var(--hu); } .viz__core .ico { width: 19px; height: 19px; } .viz__sys { padding: 4px 9px; border-radius: 99px; background: var(--solid); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); font-family: var(--font); font-size: 0.6875rem; color: var(--ink-2); text-align: center; transition: opacity 0.6s var(--ease-out), transform 0.7s var(--spring); transition-delay: calc(var(--i, 0) * 0.1s + 0.35s); } .viz__sys.i0 { grid-column: 1; grid-row: 1; } .viz__sys.i1 { grid-column: 1; grid-row: 2; } .viz__sys.i2 { grid-column: 3; grid-row: 1; } .viz__sys.i3 { grid-column: 3; grid-row: 2; } .viz__spark { display: flex; align-items: flex-end; gap: 5px; height: 54px; } .viz__spark i { display: block; width: 9px; border-radius: 3px 3px 2px 2px; background: var(--hu); transform-origin: 50% 100%; transition: transform 0.9s var(--ease-out); } .viz__spark i:nth-child(1) { height: 26%; opacity: 0.35; } .viz__spark i:nth-child(2) { height: 34%; opacity: 0.4; } .viz__spark i:nth-child(3) { height: 30%; opacity: 0.45; } .viz__spark i:nth-child(4) { height: 42%; opacity: 0.5; } .viz__spark i:nth-child(5) { height: 48%; opacity: 0.55; } .viz__spark i:nth-child(6) { height: 45%; opacity: 0.6; } .viz__spark i:nth-child(7) { height: 58%; opacity: 0.65; } .viz__spark i:nth-child(8) { height: 64%; opacity: 0.7; } .viz__spark i:nth-child(9) { height: 61%; opacity: 0.78; } .viz__spark i:nth-child(10) { height: 76%; opacity: 0.85; } .viz__spark i:nth-child(11) { height: 84%; opacity: 0.92; } .viz__spark i:nth-child(12) { height: 100%; opacity: 1; } .viz__spark i:nth-child(n) { transition-delay: calc(var(--i, 0) * 45ms + 0.3s); } .viz__spark i:nth-child(n+7) { transition-delay: calc((var(--i, 0) + 6) * 45ms + 0.3s); } @media (prefers-reduced-motion: no-preference) { .js .bento__tile:not(.is-in) .viz__rank i { transform: scaleX(0); } .js .bento__tile:not(.is-in) .viz__spark i { transform: scaleY(0.05); } .js .bento__tile:not(.is-in) .viz__sys { opacity: 0; transform: scale(0.8); } .js .bento__tile:not(.is-in) .bub, .js .bento__tile:not(.is-in) .bub__txt { opacity: 0; } .js .bento__tile.is-in .bub--q { animation: bub-in 0.55s var(--spring) 0.35s both; } .js .bento__tile.is-in .bub--a { animation: bub-in 0.55s var(--spring) 0.9s both; } .js .bento__tile.is-in .bub__dots { animation: dots-show 1.15s steps(1, end) 0.95s both; } .js .bento__tile.is-in .bub__dots i { animation: dot-b 0.9s ease-in-out 1s 2; } .js .bento__tile.is-in .bub__dots i:nth-child(2) { animation-delay: 1.15s; } .js .bento__tile.is-in .bub__dots i:nth-child(3) { animation-delay: 1.3s; } .js .bento__tile.is-in .bub__txt { animation: fade-txt 0.45s var(--ease-out) 2.1s both; } .viz__person::after, .viz__person::before { animation: none !important; } .js .bento__tile:not(.is-in) .viz__person::after, .js .bento__tile:not(.is-in) .viz__person::before { transform: scale(0); } .viz__person::after, .viz__person::before { transition: transform 0.6s var(--spring); transition-delay: calc(var(--i, 0) * 0.25s + 0.5s); } } @keyframes bub-in { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } } @keyframes dots-show { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes dot-b { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } } @keyframes fade-txt { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* ---------- Lahendused: segmenteeritud sakid ---------- */ .uc__bar { display: flex; margin-bottom: 22px; } .uc__tabs { position: relative; display: inline-flex; gap: 2px; max-width: 100%; margin-inline: auto; padding: 5px; border-radius: 99px; overflow-x: auto; scrollbar-width: none; } .uc__tabs::-webkit-scrollbar { display: none; } .uc__tab { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.94rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color 0.3s ease; } .uc__tab .ico { width: 17px; height: 17px; } .uc__tab:hover, .uc__tab[aria-selected="true"] { color: var(--ink); } .uc__ind { position: absolute; z-index: 0; top: 5px; left: 0; height: 40px; width: 0; border-radius: 99px; background: var(--solid); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06); opacity: 0; transition: transform 0.55s var(--spring), width 0.55s var(--spring), opacity 0.3s ease; } html:not(.js) .uc__bar { display: none; } .uc__panel + .uc__panel { margin-top: 30px; } .js .uc__panel + .uc__panel { margin-top: 0; } .uc__panel[hidden] { display: none; } .uc__h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; color: var(--ink); } .uc__h .ico { width: 18px; height: 18px; } .js .uc__h { display: none; } .uc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .uc__card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border-radius: 24px; background: var(--solid); box-shadow: var(--solid-shadow); } .uc__t { font-size: 1.1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.009em; } .uc__card p { color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; text-wrap: pretty; } @media (prefers-reduced-motion: no-preference) { .uc__panel.is-enter .uc__card { animation: in-up 0.6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); } } @media (max-width: 860px) { .uc__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .uc__card { padding: 20px; } } /* ---------- Kuidas töötame ---------- */ .note--center { justify-content: center; max-width: 640px; margin: 30px auto 0; } .note--center .ico { color: var(--acc); } /* ---------- Miks Adviseo ---------- */ .why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .why__tile { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; border-radius: 24px; background: var(--solid); box-shadow: var(--solid-shadow); } .why__tile p { color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; text-wrap: pretty; } .stackrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 56px; margin-top: 36px; text-align: center; } .stackrow > div { display: flex; flex-direction: column; align-items: center; gap: 10px; } .stackrow .chips { justify-content: center; } @media (max-width: 1000px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .why { grid-template-columns: minmax(0, 1fr); } } /* ---------- EISi toetus ---------- */ #toetus .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { #toetus .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { #toetus .tiles { grid-template-columns: minmax(0, 1fr); } } /* ---------- KKK ---------- */ .faq { display: flex; flex-direction: column; gap: 10px; } .faq__item { border-radius: 20px; background: var(--solid); box-shadow: var(--solid-shadow); overflow: hidden; } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px 16px 24px; cursor: pointer; list-style: none; font-size: 1.06rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.007em; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover .faq__chev { background: var(--pill); } .faq__chev { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50%; color: var(--ink-3); transition: transform 0.5s var(--spring), background-color 0.25s ease; } .faq__item[open] .faq__chev { transform: rotate(180deg); } .faq__item p { max-width: 64ch; padding: 0 24px 22px; color: var(--ink-2); text-wrap: pretty; } .faq__item summary:focus-visible { outline-offset: -3px; border-radius: 20px; } @media (prefers-reduced-motion: no-preference) { .faq__item[open] p { animation: in-up 0.45s var(--ease-out); } } /* ---------- Töövoog Apple'i toonides ---------- */ .wf__step--human .wf__ico { background: var(--ink); color: var(--bg); } .wf__ok { font-weight: 600; } .wf[data-run] .wf__step:not(.is-done) .wf__ok { background: var(--acc); color: var(--on-acc); } @media (prefers-reduced-motion: reduce) { .viz__rank i, .viz__spark i, .viz__sys { transition: none !important; } } /* Telefonis: riba mahub ühele reale, tõenduse rida murdub ikooniga koos */ .proof { display: inline-block; max-width: 34em; text-align: center; text-wrap: balance; } .proof .ico { display: inline-block; margin-right: 6px; vertical-align: -3px; } @media (max-width: 440px) { .nav__side .btn { display: none; } .brand__word { font-size: 1.2rem; } } @media (max-width: 600px) { .uc__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 24px; overflow: visible; } .uc__tab { justify-content: flex-start; padding: 0 12px; border-radius: 18px; } .uc__ind { display: none; } .uc__tab[aria-selected="true"] { background: var(--solid); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06); } } /* ============================================================ v6 — tasuta tööriistad Klaasist tööriistakast, sees valged kaardid. Kategooria toon: e-post sinine, andmed violetne, tehisaru roosa. ============================================================ */ :root { --ok: #248A3D; --ok-soft: rgba(52, 199, 89, 0.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok: #30D158; --ok-soft: rgba(48, 209, 88, 0.22); } } :root[data-theme="dark"] { --ok: #30D158; --ok-soft: rgba(48, 209, 88, 0.22); } .cat-email { --hu: var(--h1); --hu-soft: var(--h1-soft); } .cat-data { --hu: var(--h2); --hu-soft: var(--h2-soft); } .cat-ai { --hu: var(--h3); --hu-soft: var(--h3-soft); } .h2--sm { font-size: clamp(1.5rem, 3vw, 2.2rem); } .section--tight { padding-block: clamp(40px, 6vw, 76px); } /* ---------- Kaardid: avaleht, kogumik ja seotud tööriistad ---------- */ .tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; } .tgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 960px) { .tgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .tgrid--3 { grid-template-columns: minmax(0, 1fr); } } .tcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 24px; background: var(--solid); box-shadow: var(--solid-shadow); color: var(--ink); text-decoration: none; transition: transform 0.45s var(--spring), box-shadow 0.3s ease; } .tcard::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 0% 0%, var(--hu-soft), transparent 64%); } .tcard:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 22px 44px rgba(0, 0, 0, 0.10); } .tcard[hidden] { display: none; } .tcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tcard .ico-badge { background: var(--hu-soft); color: var(--hu); } .tcard__cat { font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: right; } .tcard__name { margin-top: 4px; font-size: 1.12rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.009em; } .tcard__txt { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; text-wrap: pretty; } .tcard__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--acc-ink); font-size: 0.94rem; font-weight: 500; } .tcard__go svg { width: 16px; height: 16px; transition: transform 0.35s var(--spring); } .tcard:hover .tcard__go svg { transform: translateX(4px); } @media (prefers-reduced-motion: no-preference) { .tcard.is-enter { animation: in-up 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); } } /* Kogumiku avaekraan ja filter */ .hero--tools { padding-block: clamp(36px, 6vw, 80px) clamp(24px, 4vw, 44px); } .h1--hub { max-width: 17ch; font-size: clamp(2.3rem, 5.8vw, 4.5rem); line-height: 1; letter-spacing: -0.029em; } .section--hub { padding-top: 4px; } .tfilter-bar { display: flex; justify-content: center; margin-bottom: 26px; } .tfilter { display: inline-flex; gap: 2px; max-width: 100%; padding: 5px; border-radius: 99px; overflow-x: auto; scrollbar-width: none; } .tfilter::-webkit-scrollbar { display: none; } .tfilter__b { position: relative; z-index: 1; flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.94rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } .tfilter__b:hover { color: var(--ink); } .tfilter__b[aria-pressed="true"] { background: var(--solid); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06); } html:not(.js) .tfilter-bar { display: none; } @media (max-width: 600px) { .tfilter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 24px; overflow: visible; } .tfilter__b { border-radius: 18px; padding: 0 10px; white-space: normal; line-height: 1.2; } } /* ---------- Tööriista leht ---------- */ .hero--tool { padding-block: clamp(26px, 4vw, 52px) clamp(22px, 3vw, 34px); } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 0.875rem; color: var(--ink-3); } .crumbs a { color: var(--ink-2); text-decoration: none; } .crumbs a:hover { color: var(--ink); } .tool-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; } .tool-hero__txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .h1--tool { font-size: clamp(2.1rem, 4.8vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em; } .tool-hero .chips { justify-content: flex-end; max-width: 380px; } @media (max-width: 900px) { .tool-hero { grid-template-columns: minmax(0, 1fr); } .tool-hero .chips { justify-content: flex-start; max-width: none; } } .section--tool { padding-block: 0 clamp(40px, 6vw, 72px); } .tool { display: flex; flex-direction: column; gap: 22px; padding: clamp(14px, 2.6vw, 30px); border-radius: 32px; } .tool__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 30px); align-items: start; } .tool__in, .tool__out { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .tool__out { padding: 20px; border-radius: 24px; background: var(--solid); box-shadow: var(--solid-shadow); } .tool__cap { font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .tool__btns { display: flex; flex-wrap: wrap; gap: 8px; } .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px) { .tool__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .row2 { grid-template-columns: minmax(0, 1fr); } .tool { border-radius: 26px; } .tool__out { padding: 16px; border-radius: 20px; } } /* Väljad */ .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fld__l { font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--ink); } .fld__l em { font-style: normal; font-weight: 400; color: var(--ink-3); } .fld__l code, .tnote code, .ck code, .dres__b code { font-family: var(--font); font-size: 0.8em; padding: 1px 6px; border-radius: 6px; background: var(--pill); color: var(--ink-2); overflow-wrap: anywhere; } .fld__h { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-3); } .inp { display: block; width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--solid); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .inp:not(.inp--color) { -webkit-appearance: none; appearance: none; } .inp:hover { border-color: color-mix(in srgb, var(--ink) 26%, transparent); } .inp:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); } .inp::placeholder { color: var(--ink-3); opacity: 0.85; } .inp--area { min-height: 0; resize: vertical; line-height: 1.55; } .inp--num { font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .inp--num::-webkit-inner-spin-button, .inp--num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .inp-wrap, .sel-wrap { position: relative; display: block; } .inp-wrap .inp:not(:only-child) { padding-right: 42px; } .inp-suf { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--ink-3); font-size: 0.94rem; pointer-events: none; } .inp--sel { padding-right: 42px; cursor: pointer; } .sel-chev { position: absolute; top: 50%; right: 13px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .inp--color { width: 72px; padding: 5px; cursor: pointer; } .inp--color::-webkit-color-swatch-wrapper { padding: 0; } .inp--color::-webkit-color-swatch { border: 0; border-radius: 9px; } .inp--color::-moz-color-swatch { border: 0; border-radius: 9px; } /* Segmenteeritud valik */ .seg { min-width: 0; margin: 0; padding: 0; border: 0; } .seg legend { padding: 0; margin-bottom: 6px; } .seg__row { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 4px; border-radius: 14px; background: var(--pill); } .seg__o { position: relative; display: block; cursor: pointer; } .seg__o input { position: absolute; width: 1px; height: 1px; opacity: 0; } .seg__o span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 0.9rem; font-weight: 500; color: var(--ink-2); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .seg__o:hover span { color: var(--ink); } .seg__o input:checked + span { background: var(--solid); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.06); } .seg__o input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; } /* Märkeruut */ .chk { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; line-height: 1.4; color: var(--ink-2); cursor: pointer; } .chk input { position: absolute; width: 1px; height: 1px; opacity: 0; } .chk__box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border: 1.5px solid var(--line-2); border-radius: 7px; background: var(--solid); color: transparent; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .chk__box .ico { width: 15px; height: 15px; stroke-width: 2.6; } .chk:hover .chk__box { border-color: color-mix(in srgb, var(--ink) 35%, transparent); } .chk input:checked + .chk__box { border-color: var(--acc); background: var(--acc); color: var(--on-acc); } .chk input:focus-visible + .chk__box { outline: 2px solid var(--acc); outline-offset: 2px; } .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px 22px; } .opts--tight { grid-template-columns: minmax(0, 1fr); gap: 9px; } /* Nupud tööriistas */ .tbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--solid); color: var(--ink); font: inherit; font-size: 0.94rem; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.2s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .tbtn .ico { width: 17px; height: 17px; } .tbtn:hover { border-color: color-mix(in srgb, var(--ink) 32%, transparent); } .tbtn:active { transform: scale(0.97); } .tbtn--pri { border-color: transparent; background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .tbtn--pri:hover { border-color: transparent; background: color-mix(in srgb, var(--btn-bg) 84%, var(--bg)); } .tbtn.is-done { border-color: transparent; background: var(--ink); color: var(--bg); box-shadow: none; } .tbtn:disabled { opacity: 0.45; cursor: default; transform: none; } /* Numbrid */ .tstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); gap: 8px; } .tstat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 16px; background: var(--bg); } .tstat__l { font-size: 0.75rem; line-height: 1.3; color: var(--ink-3); } .tstat__v { font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: break-word; } .tstat__v--sm { font-size: 1rem; } .tstat__v.is-neg, .tstat--bad .tstat__v { color: var(--sig); } .tstat--ok .tstat__v { color: var(--pos); } .tstats--big .tstat__v { font-size: clamp(1.25rem, 2.1vw, 1.6rem); } .tstats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tstats--list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tstats--list .tstat { padding: 10px 12px; } .tstats--list .tstat__v { font-size: 0.98rem; letter-spacing: -0.006em; } @media (max-width: 480px) { .tstats, .tstats.tstats--4, .tstats.tstats--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tstats > .tstat:last-child:nth-child(odd) { grid-column: 1 / -1; } } .tnote { font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; } .tnote:empty { display: none; } .tnote b { font-weight: 600; color: var(--ink); } .tnote--warn { padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--ink); } /* Hinde ring */ .score { display: flex; align-items: center; gap: 16px; min-width: 0; } .score__ring { position: relative; flex: none; width: 112px; height: 112px; } .ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .ring__bg { fill: none; stroke: var(--pill); stroke-width: 10; } .ring__fg { fill: none; stroke: var(--sc, var(--acc)); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--ease-out), stroke 0.3s ease; } .score__n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .score__n b { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.027em; font-variant-numeric: tabular-nums; line-height: 1; } .score__n span { font-family: var(--font); font-size: 0.6875rem; line-height: 1; color: var(--ink-3); } .score__l { font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.006em; text-wrap: balance; } .score__l:empty { display: none; } .score[data-level="good"] { --sc: var(--pos); } .score[data-level="ok"] { --sc: var(--pos); } .score[data-level="mid"] { --sc: var(--warn); } .score[data-level="low"] { --sc: var(--sig); } /* Kontrollnimekiri */ .checks, .finds { display: flex; flex-direction: column; gap: 8px; } .ck, .find { position: relative; padding: 10px 12px 10px 36px; border-radius: 14px; background: var(--bg); font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; } .ck::before, .find::before { content: ""; position: absolute; top: 16px; left: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ink-3)); box-shadow: 0 0 0 4px var(--cs, var(--pill)); } .ck--ok, .find--ok { --c: var(--ok); --cs: var(--ok-soft); } .ck--warn, .find--warn { --c: var(--warn); --cs: var(--warn-soft); } .ck--bad, .find--bad { --c: var(--sig); --cs: var(--sig-soft); } .ck--info, .find--info { --c: var(--ink-2); --cs: var(--pill); } .ck b { color: var(--ink); } /* Teemarida: postkasti eelvaated */ .mocks { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; } .mock { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .mock__cap { display: flex; align-items: center; gap: 7px; font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .mock__cap .ico { width: 15px; height: 15px; } .inbox { overflow: hidden; border-radius: 18px; background: var(--solid); box-shadow: var(--solid-shadow); } .mock:not(.mock--phone) .inbox::after { content: ""; display: block; height: 88px; border-top: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 43px, var(--line) 43px 44px); } .ib { display: grid; grid-template-columns: auto minmax(0, 132px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; font-size: 0.9rem; } .ib__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mark-grad); color: var(--on-acc); font-size: 0.8rem; font-weight: 600; } .ib__from { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; } .ib__line { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-3); } .ib__line .ib__subj { font-weight: 600; color: var(--ink); } .ib__time { font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .ib--mob { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); } .ib__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ib__top { display: flex; justify-content: space-between; gap: 8px; } .ib--mob .ib__from { font-size: 0.86rem; } .ib--mob .ib__subj { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.86rem; font-weight: 600; color: var(--ink); } .ib--mob .ib__pre { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.8rem; line-height: 1.35; color: var(--ink-3); } .ib--ghost .ib__av { background: var(--pill); } .ib__ghost { width: 72%; height: 9px; margin: 5px 0 3px; border-radius: 5px; background: var(--pill); } .ib__ghost--s { width: 46%; } @media (max-width: 760px) { .mocks { grid-template-columns: minmax(0, 1fr); } .ib { grid-template-columns: auto minmax(0, 1fr) auto; } .ib__line { grid-column: 2 / -1; grid-row: 2; } } /* Telefon */ .phone { width: 100%; max-width: 300px; margin-inline: auto; padding: 9px; border-radius: 44px; background: linear-gradient(160deg, #3A3A3E, #121214 55%); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .phone__screen { display: flex; flex-direction: column; min-height: 220px; overflow: hidden; border-radius: 36px; background: var(--solid); } .phone__bar { position: relative; display: flex; align-items: center; min-height: 40px; padding: 4px 24px 0; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .phone__bar::after { content: ""; position: absolute; top: 10px; left: 50%; width: 76px; height: 21px; border-radius: 99px; background: #000000; transform: translateX(-50%); } .inbox--mob { flex: 1; border-radius: 0; box-shadow: none; } .sms-thread { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px 18px; } .sms { max-width: 90%; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--pill); color: var(--ink); font-size: 0.875rem; line-height: 1.42; overflow-wrap: anywhere; } .sms mark { padding: 0 1px; border-radius: 3px; background: var(--warn-soft); color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--warn); } .sms__ph { color: var(--ink-3); } .sms__meta { padding-left: 4px; font-family: var(--font); font-size: 0.6875rem; color: var(--ink-3); } .tool__out .phone { margin-top: 4px; } /* Teemarea generaator */ .gen { display: flex; flex-direction: column; gap: 6px; } .gen__i { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 9px 9px 12px; border-radius: 14px; background: var(--bg); } .gen__n { font-family: var(--font); font-size: 0.75rem; color: var(--ink-3); } .gen__t { font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; } .gen__m { display: flex; align-items: center; gap: 6px; } .gen__s { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; } .gen__s--good { background: var(--pos-soft); color: var(--pos); } .gen__s--ok { background: var(--pos-soft); color: var(--pos); } .gen__s--mid { background: var(--warn-soft); color: var(--warn); } .gen__len { font-family: var(--font); font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; } .gen__c { min-height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--pill); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .gen__c:hover { background: var(--on-soft); } .gen__c.is-done { background: var(--ink); color: var(--bg); } @media (max-width: 520px) { .gen__i { grid-template-columns: 20px minmax(0, 1fr) auto; } .gen__m { grid-column: 2; grid-row: 2; } .gen__c { grid-column: 3; grid-row: 1 / span 2; } } /* A/B-test */ .ab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; } .ab__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border-radius: 22px; background: var(--solid); box-shadow: var(--solid-shadow); } .ab__h { display: flex; align-items: center; gap: 10px; font-weight: 600; } .ab__tag { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--pill); color: var(--ink); font-family: var(--font); font-size: 0.8rem; font-weight: 600; } .ab__col + .ab__col .ab__tag { background: var(--acc-soft); color: var(--acc-ink); } .ab__opts { padding-bottom: 4px; } .ab__res { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 24px; background: var(--solid); box-shadow: var(--solid-shadow); } .ab__res:empty { display: none; } .ab__verdict { padding-left: 14px; border-left: 3px solid var(--c, var(--acc)); font-size: 1.04rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .ab__verdict b { color: var(--ink); } .ab__verdict--win { --c: var(--acc); } .ab__verdict--wait { --c: var(--warn); } .ab__bars { display: flex; flex-direction: column; gap: 10px; } .ab__bar { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; } .ab__bl { font-family: var(--font); font-weight: 600; color: var(--ink-3); } .ab__track { height: 14px; overflow: hidden; border-radius: 99px; background: var(--bg); } .ab__track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink-3); opacity: 0.55; } .ab__bar.is-win .ab__track i { background: var(--acc); opacity: 1; } .ab__bar b { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .ab { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab__opts { grid-column: 1 / -1; } } @media (max-width: 520px) { .ab { grid-template-columns: minmax(0, 1fr); } } /* Domeeni kontroll */ .dom__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 12px; align-items: start; } .dom__go { padding-top: 25px; } .dom__res { display: flex; flex-direction: column; gap: 10px; } .dom__res:empty { display: none; } .dsum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 18px 20px; border-radius: 20px; background: var(--solid); box-shadow: var(--solid-shadow), inset 4px 0 0 var(--c, var(--acc)); } .dsum b { font-size: 1.15rem; letter-spacing: -0.009em; } .dsum span { font-family: var(--font); font-size: 0.8125rem; color: var(--ink-3); } .dsum--ok { --c: var(--ok); } .dsum--warn { --c: var(--warn); } .dsum--bad { --c: var(--sig); } .dres { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border-radius: 18px; background: var(--solid); box-shadow: var(--solid-shadow); } .dres__h { display: flex; align-items: center; gap: 10px; } .dres__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--cs); } .dres--ok { --c: var(--ok); --cs: var(--ok-soft); } .dres--warn { --c: var(--warn); --cs: var(--warn-soft); } .dres--bad { --c: var(--sig); --cs: var(--sig-soft); } .dres__b { color: var(--ink-2); font-size: 0.94rem; line-height: 1.5; text-wrap: pretty; } .dres__raw { display: block; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-family: var(--font); font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 760px) { .dom__row { grid-template-columns: minmax(0, 1fr); } .dom__go { padding-top: 0; } } @media (min-width: 861px) { .dom__res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .dom__res > .dsum, .dom__res > .tnote, .dom__res > .dres:only-child { grid-column: 1 / -1; } } /* UTM */ .pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; } .pchip { min-height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--chip-bg); color: var(--ink-2); font-family: var(--font); font-size: 0.75rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .pchip:hover { border-color: var(--line-2); color: var(--ink); } .urlbox { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); } .urlbox code { font-family: var(--font); font-size: 0.84rem; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; word-break: break-all; } /* Kontaktide puhastaja */ .drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 180px; padding: 28px 20px; border: 1.5px dashed var(--line-2); border-radius: 24px; background: color-mix(in srgb, var(--solid) 72%, transparent); text-align: center; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.3s var(--spring); } .drop > .ico { width: 34px; height: 34px; color: var(--acc); } .drop.is-over { border-color: var(--acc); background: var(--acc-soft); transform: scale(1.01); } .drop__t { font-size: 1rem; color: var(--ink-2); } .drop__t b { color: var(--ink); } .drop__pick { color: var(--acc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .drop__pick:focus-within { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; } .drop__h { font-size: 0.8125rem; color: var(--ink-3); } .lc-paste { padding: 2px 16px; border-radius: 18px; background: var(--solid); box-shadow: var(--solid-shadow); } .lc-paste summary { display: flex; align-items: center; min-height: 48px; color: var(--ink-2); font-weight: 500; list-style: none; cursor: pointer; } .lc-paste summary::-webkit-details-marker { display: none; } .lc-paste[open] { padding-bottom: 16px; } .lc-paste .inp { margin-bottom: 10px; } .lc__res { display: flex; flex-direction: column; gap: 14px; } .lc__res:empty { display: none; } .ttable { max-height: 420px; overflow: auto; border-radius: 18px; background: var(--solid); box-shadow: var(--solid-shadow); } .ttable table { font-size: 0.875rem; } .ttable th { position: sticky; top: 0; background: var(--solid); } .ttable td { overflow-wrap: anywhere; } /* Allkiri: eelvaade valgel nagu e-posti programmis */ .sigprev { min-height: 120px; padding: 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; color: #111111; font-size: 13px; line-height: normal; } .sigprev table { width: auto; font-size: inherit; } .sigprev td { padding: 0; border-top: 0; text-align: left; vertical-align: top; } /* Tulpad */ .bars { display: flex; flex-direction: column; gap: 10px; } .bar { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.9rem; } .bar__l { color: var(--ink-3); } .bar__t { height: 12px; overflow: hidden; border-radius: 99px; background: var(--bg); } .bar__f { display: block; width: 0; height: 100%; border-radius: inherit; } .bar__f--rev { background: var(--acc); } .bar__f--cost { background: var(--ink-3); } .bar b { font-variant-numeric: tabular-nums; } /* Inimlikustaja */ .hz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 30px); align-items: start; } .hz__in, .hz__ctl { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hz__out { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border-radius: 24px; background: var(--solid); box-shadow: var(--solid-shadow); } .hz__finds, .hz__fixhead { display: flex; flex-direction: column; gap: 10px; } .finds--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; } .finds--grid .find { background: var(--solid); box-shadow: var(--solid-shadow); } .hz__fix { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 24px; background: var(--solid); box-shadow: var(--solid-shadow); } .hz__fixhead { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; } .marked { max-height: 300px; overflow-y: auto; padding: 14px 16px; border-radius: 16px; background: var(--bg); font-size: 0.95rem; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; } .marked__ph { color: var(--ink-3); } .mk { padding: 1px 3px; border-radius: 5px; background: var(--warn-soft); color: var(--ink); box-shadow: inset 0 -2px 0 var(--warn); cursor: help; } .mk--fix { background: var(--acc-soft); box-shadow: inset 0 -2px 0 var(--acc); } .mk-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.8125rem; color: var(--ink-3); } .mk-legend .mk { cursor: default; } .find { display: flex; flex-direction: column; gap: 4px; } .find__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .find__h b { font-size: 0.94rem; color: var(--ink); } .find__n { font-family: var(--font); font-size: 0.75rem; color: var(--ink-3); } .find__fix { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; background: var(--acc-soft); color: var(--acc-ink); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; } .find__ex { font-size: 0.84rem; color: var(--ink-2); overflow-wrap: anywhere; } .find__tip { font-size: 0.84rem; line-height: 1.45; color: var(--ink-3); } @media (max-width: 960px) { .hz { grid-template-columns: minmax(0, 1fr); } } /* Prompti koostaja */ .promptbox { max-height: 540px; margin: 0; padding: 16px 18px; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); font-family: var(--font); font-size: 0.8125rem; line-height: 1.62; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; } .pb-h { font-weight: 600; color: var(--acc-ink); } .pb-ph { padding: 0 3px; border-radius: 4px; background: var(--acc-soft); color: var(--acc-ink); } /* Liugur ja graafik */ .range { display: flex; align-items: center; gap: 12px; min-height: 46px; } .range input { flex: 1; min-width: 0; height: 6px; margin: 0; border-radius: 99px; background: linear-gradient(90deg, var(--acc) var(--v, 80%), var(--pill) var(--v, 80%)); -webkit-appearance: none; appearance: none; cursor: pointer; } .range input::-webkit-slider-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.08); -webkit-appearance: none; appearance: none; } .range input::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.08); } .range input:focus-visible { outline: 2px solid var(--acc); outline-offset: 8px; } .range output { min-width: 48px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .chart { width: 100%; min-height: 200px; } .chart svg { display: block; width: 100%; height: auto; overflow: visible; } .chart text { font-family: var(--font); font-size: 11px; fill: var(--ink-3); } .ch__b--pos { fill: var(--acc); } .ch__b--neg { fill: var(--ink-3); opacity: 0.4; } .ch__zero { stroke: var(--line-2); stroke-width: 1; } .ch__pay { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; } .chart .ch__pl { fill: var(--ink-2); } .chart .ch__v { font-size: 12px; font-weight: 600; fill: var(--ink); } /* AI-valmiduse test */ .rt { display: flex; flex-direction: column; gap: 16px; } .rt__prog { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); z-index: 2; height: 6px; overflow: hidden; border-radius: 99px; background: var(--pill); } .rt__prog span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--spec); transition: width 0.5s var(--ease-out); } .rt__qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rq { min-width: 0; margin: 0; padding: 18px; border: 0; border-radius: 22px; background: var(--solid); box-shadow: var(--solid-shadow); transition: box-shadow 0.3s ease; } .rq[data-dim="andmed"] { --hu: var(--h1); --hu-soft: var(--h1-soft); } .rq[data-dim="protsessid"] { --hu: var(--h2); --hu-soft: var(--h2-soft); } .rq[data-dim="inimesed"] { --hu: var(--h3); --hu-soft: var(--h3-soft); } .rq[data-dim="juhtimine"] { --hu: var(--h4); --hu-soft: var(--h4-soft); } .rq legend { float: left; display: flex; align-items: baseline; gap: 10px; width: 100%; margin-bottom: 12px; padding: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.006em; } .rq__n { flex: none; font-family: var(--font); font-size: 0.75rem; font-weight: 500; color: var(--hu); } .rq__opts { clear: both; display: grid; gap: 6px; } .rq__o { position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 12px; background: var(--bg); color: var(--ink-2); font-size: 0.92rem; line-height: 1.35; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .rq__o input { position: absolute; width: 1px; height: 1px; opacity: 0; } .rq__o span { display: flex; align-items: center; gap: 10px; } .rq__o span::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--solid); transition: border-color 0.2s ease, box-shadow 0.25s var(--spring); } .rq__o:hover { color: var(--ink); } .rq__o:has(input:checked) { background: var(--hu-soft); } .rq__o input:checked + span { color: var(--ink); font-weight: 500; } .rq__o input:checked + span::before { border-color: var(--hu); box-shadow: inset 0 0 0 4px var(--solid), inset 0 0 0 9px var(--hu); } .rq__o input:focus-visible + span::before { outline: 2px solid var(--acc); outline-offset: 2px; } .rq.is-done { box-shadow: var(--solid-shadow), inset 0 0 0 1.5px var(--hu-soft); } .rt__res { display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 3vw, 28px); border-radius: 26px; background: var(--solid); box-shadow: var(--solid-shadow); } .rt__res:empty { display: none; } .rt-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; } .rt-sum__t { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .rt-lvl { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.018em; } .rt-txt { max-width: 48ch; color: var(--ink-2); text-wrap: pretty; } .rdims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; } .rdim { display: grid; grid-template-columns: 92px minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: 0.92rem; } .rdim--andmed { --hu: var(--h1); } .rdim--protsessid { --hu: var(--h2); } .rdim--inimesed { --hu: var(--h3); } .rdim--juhtimine { --hu: var(--h4); } .rdim__l { color: var(--ink-2); } .rdim__t { height: 10px; overflow: hidden; border-radius: 99px; background: var(--bg); } .rdim__t i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--hu); transition: width 0.9s var(--ease-out); } .rdim b { text-align: right; font-variant-numeric: tabular-nums; } .recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; } .rec { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border-radius: 18px; background: var(--bg); } .rec__h { font-size: 1rem; } .rec p { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; text-wrap: pretty; } .rec__a { margin-top: auto; color: var(--acc-ink); font-size: 0.9rem; font-weight: 500; } @media (max-width: 860px) { .rt__qs { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .rdims { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .rt-sum { grid-template-columns: minmax(0, 1fr); justify-items: start; } .rq { padding: 16px; } } /* Juhend ja nõuanded tööriista all */ .tinfo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); } .tinfo__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .tsteps { display: flex; flex-direction: column; gap: 14px; counter-reset: ts; } .tsteps li { position: relative; min-height: 30px; padding-left: 44px; color: var(--ink-2); text-wrap: pretty; counter-increment: ts; } .tsteps li::before { content: counter(ts); position: absolute; top: -2px; left: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acc-soft); color: var(--acc-ink); font-family: var(--font); font-size: 0.8125rem; font-weight: 500; } .tinfo .note { margin-top: 4px; } @media (max-width: 860px) { .tinfo { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .tcard, .tcard__go svg, .ring__fg, .rt__prog span, .rdim__t i, .drop, .rq__o span::before { transition: none !important; } } /* Kleepuv tulemuste paneel pikkade vormide kõrval */ @media (min-width: 901px) and (min-height: 700px) { .tool__out--sticky { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); } } /* Kogumik: esiletõstetud test täislaiuses, filtreeritud 4 kaarti kahes reas */ .tcard--feat { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px 44px; align-items: center; padding: clamp(22px, 3vw, 34px); } .tcard--feat::before { background: radial-gradient(70% 90% at 0% 0%, var(--acc-soft), transparent 66%); } .tfeat__txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .tfeat__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--hu-soft); color: var(--hu); font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; } .tcard--feat .tcard__name { font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.12; letter-spacing: -0.019em; } .tcard--feat .tcard__txt { max-width: 46ch; font-size: 1.02rem; } .tfeat__viz { display: flex; flex-direction: column; gap: 13px; min-width: 0; padding: 20px 22px; border-radius: 20px; background: var(--bg); } .tfeat__cap { font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .tfeat__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 0.9rem; } .tfeat__row b { font-weight: 500; color: var(--ink-2); } .tfeat__row i { position: relative; display: block; height: 10px; overflow: hidden; border-radius: 99px; background: var(--pill); } .tfeat__row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--hu); transform-origin: 0 50%; } .tfeat__row.i0 { --hu: var(--h1); } .tfeat__row.i1 { --hu: var(--h2); } .tfeat__row.i2 { --hu: var(--h3); } .tfeat__row.i3 { --hu: var(--h4); } .tfeat__row.w72 { --w: 72%; } .tfeat__row.w48 { --w: 48%; } .tfeat__row.w61 { --w: 61%; } .tfeat__row.w35 { --w: 35%; } @media (prefers-reduced-motion: no-preference) { .tfeat__row i::after { animation: bar-grow 1.1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 0.35s); } .tcard--feat:hover .tfeat__row i::after { animation: bar-grow 0.9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); } } @keyframes bar-grow { from { transform: scaleX(0); } } @media (max-width: 760px) { .tcard--feat { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 700px) { .tgrid[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Liikumist vältides on pealkirjad kohe paigas */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] .w__i { transform: none; transition: none; } } @media print { .js [data-reveal] .w__i { transform: none; } } /* ============================================================ v7 — põhimõte, tellimisvormid ja uus logo Logo on ainult sõnamärk ja tume AI-silt. Eelpealkirju ei ole. ============================================================ */ /* Logo: AI-silt on sõnamärgist veidi kõrgem ja keskel, nagu Karli kavandis */ .brand { gap: 0.44em; font-size: 1.32rem; line-height: 1; } .brand__word { font-size: 1em; line-height: 1; } .brand__word, .brand__ai, .wm { font-family: var(--logo); } .brand__ai { display: inline-grid; place-items: center; height: 1.93em; min-width: 2.28em; margin-left: 0; padding: 0 0.42em; border-radius: 0.47em; background: var(--ink); color: var(--bg); font-size: 0.58em; font-weight: 600; letter-spacing: 0.02em; line-height: 1; } @media (max-width: 960px) { .brand { font-size: 1.2rem; } } /* Tööriistade pealdised tavalise kirjaga, mitte suurtähtedes */ .tool__cap, .mock__cap, .tfeat__cap { font-family: var(--font); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.003em; text-transform: none; color: var(--ink); } .mock__cap { color: var(--ink-2); } /* Töövahendid ühel real */ .stackrow { align-items: center; gap: 12px 16px; margin-top: 32px; } .stack__lbl { font-size: 0.94rem; font-weight: 500; color: var(--ink-2); } .stackrow > .chips { flex-direction: row; flex-wrap: wrap; justify-content: center; } .foot .brand { color: var(--ink); } /* ---------- Põhimõte: tume riba, mis tumedas režiimis on hele ---------- */ .thesis { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--bg); } .thesis::before { content: ""; position: absolute; z-index: -1; inset: -30% -10% auto -10%; height: 90%; pointer-events: none; background: radial-gradient(40% 56% at 16% 24%, rgba(255, 255, 255, 0.07), transparent 70%), radial-gradient(34% 46% at 84% 16%, rgba(255, 255, 255, 0.05), transparent 70%); } .thesis .h2 { color: var(--bg); } .thesis .lead { color: color-mix(in srgb, var(--bg) 74%, var(--ink)); } .thesis__head { margin-bottom: clamp(26px, 4vw, 40px); } .roles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 34px; margin: 0 auto; } .roles__i { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 20px 8px 9px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 9%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 16%, transparent); } .roles__i > .ico { width: 20px; height: 20px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: var(--bg); color: var(--ink); } .roles__i--ai > .ico { background: var(--mark-grad); color: var(--on-acc); } .roles__i > span { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; line-height: 1.25; color: color-mix(in srgb, var(--bg) 66%, var(--ink)); } .roles__i b { font-size: 0.97rem; font-weight: 600; color: var(--bg); } .roles__i + .roles__i::before { content: ""; position: absolute; top: 50%; left: -24px; width: 14px; height: 14px; transform: translateY(-50%); background: color-mix(in srgb, var(--bg) 50%, var(--ink)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 14px no-repeat; } .thesis__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); } .thesis__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 28px 28px 4px 0; } .thesis__item + .thesis__item { padding-left: 28px; border-left: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); } .thesis__n { font-family: var(--font); font-size: 0.8125rem; color: color-mix(in srgb, var(--bg) 55%, var(--ink)); } .thesis__item .h3 { font-size: 1.3rem; color: var(--bg); } .thesis__item p { color: color-mix(in srgb, var(--bg) 72%, var(--ink)); text-wrap: pretty; } @media (max-width: 860px) { .thesis__list { grid-template-columns: minmax(0, 1fr); } .thesis__item, .thesis__item + .thesis__item { padding: 22px 0 18px; border-left: 0; } .thesis__item + .thesis__item { border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); } } @media (max-width: 720px) { .roles { flex-direction: column; gap: 30px; } .roles__i { width: min(100%, 340px); } .roles__i + .roles__i::before { top: -22px; left: 50%; transform: translateX(-50%) rotate(90deg); } } /* ---------- EISi toetusvoorude teavitused ---------- */ .alerts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 34px; } .alerts__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } .alerts .ico-badge { background: var(--h4-soft); color: var(--h4); } @media (max-width: 860px) { .alerts { grid-template-columns: minmax(0, 1fr); } } /* ---------- Tellimisvorm ---------- */ .sub { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .sub__row { display: flex; gap: 8px; } .sub__inp { flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border-radius: 14px; } .sub__btn { flex: none; min-height: 52px; } .sub__chk { font-size: 0.875rem; color: var(--ink-2); } .sub__chk a { color: var(--acc-ink); } .sub__hp { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; } .sub__msg { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); } .sub__msg:empty { display: none; } .sub__msg[data-s="ok"] { color: var(--ink); font-weight: 600; } .sub__msg[data-s="ok"]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); vertical-align: 1px; } .sub__msg[data-s="err"] { color: var(--sig); } .sub.is-busy .sub__btn { opacity: 0.6; } .sub.is-done .sub__row, .sub.is-done .sub__chk { display: none; } @media (max-width: 480px) { .sub__row { flex-direction: column; } .sub__btn { width: 100%; } } /* ---------- Jalus: uudiskiri ---------- */ .foot__news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px 44px; align-items: center; margin-bottom: 40px; padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: var(--solid); box-shadow: var(--solid-shadow); } .foot__newstxt { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .foot__newstxt .small { max-width: 44ch; color: var(--ink-2); } @media (max-width: 860px) { .foot__news { grid-template-columns: minmax(0, 1fr); } } /* ---------- Avaekraan: neli rolli (laial ekraanil akna kõrval, kitsal 2 × 2 akna all) ---------- */ .hero--center .proof { max-width: 46em; } .pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 720px); margin: 0 auto; padding: 0; list-style: none; } .pillars__i { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 4px clamp(12px, 2vw, 26px); text-align: center; } .pillars__i + .pillars__i { border-left: 1px solid var(--line); } .pillars__i .ico-badge { margin-bottom: 4px; } .pillars__name { font-size: 1.06rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.007em; color: var(--ink); text-wrap: balance; } .pillars__txt { max-width: 27ch; font-size: 0.94rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; } /* Nimed ja kirjeldused samale joonele ka siis, kui mõni nimi läheb kahele reale */ @supports (grid-template-rows: subgrid) { .pillars { grid-template-rows: auto auto auto; } .pillars__i { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; justify-items: center; align-items: start; align-content: start; } } @media (max-width: 420px) { .pillars__i { padding-inline: 10px; } .pillars__name { font-size: 0.98rem; } .pillars__txt { font-size: 0.88rem; } } @media (min-width: 1100px) { .hero__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 3vw, 48px); } .hero__stage .wf { grid-column: 2; grid-row: 1; } .pillars { display: flex; flex-direction: column; gap: 40px; width: auto; margin: 0; } .pillars--l { grid-column: 1; grid-row: 1; } .pillars--r { grid-column: 3; grid-row: 1; margin-top: 0; } .pillars__i, .pillars__i + .pillars__i { display: flex; padding: 0; border-left: 0; } .pillars--l .pillars__i { align-items: flex-end; text-align: right; } .pillars--r .pillars__i { align-items: flex-start; text-align: left; } } @media (prefers-reduced-motion: no-preference) { .hero .pillars__i { animation: in-up 1s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 0.8s); } } /* Pakkumine missiooni ribal (tumedal taustal hele kaart, tumedas režiimis vastupidi) */ .thesis__offer { max-width: 1040px; margin: 0 auto; } .thesis__offer .offer { margin: 0; text-align: left; color: var(--ink); background: var(--solid); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); } .thesis__offer .offer::before { display: none; } /* Miks meie: kolm kaarti ühes reas, kitsal ekraanil üksteise all */ .why[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 760px) { .why[data-n="3"] { grid-template-columns: minmax(0, 1fr); } } /* Kahetooniline pealkiri: esimene lause tume, teine hall (Miks meie) */ .section__head--center .h2--duo { max-width: 30ch; font-size: clamp(1.7rem, 3.3vw, 2.7rem); line-height: 1.1; text-wrap: balance; } .h2__muted { color: var(--ink-3); } /* ---------- Pakkumine teenuste all ---------- */ .offer { display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; margin-bottom: clamp(16px, 2.4vw, 24px); padding: clamp(22px, 3vw, 30px) clamp(22px, 3.4vw, 40px); border-radius: 28px; } .offer__txt { display: flex; align-items: center; gap: 18px; min-width: 0; } .offer__txt .ico-badge { background: var(--h1-soft); color: var(--h1); } .offer__copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .offer__p { max-width: 52ch; color: var(--ink-2); text-wrap: pretty; } .offer__deal { display: flex; align-items: center; gap: 22px; flex: none; } .offer__price { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; } .offer__was { font-size: 1rem; color: var(--ink-3); text-decoration-thickness: 1.5px; } .offer__now { display: inline-flex; align-items: baseline; gap: 7px; } .offer__lbl { font-size: 0.95rem; color: var(--ink-2); } .offer__now b { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.021em; color: var(--ink); font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .offer { flex-direction: column; align-items: flex-start; } .offer__deal { width: 100%; justify-content: space-between; flex-wrap: wrap; } } @media (max-width: 480px) { .offer__txt { align-items: flex-start; } .offer__deal .btn { width: 100%; } } /* ---------- Kontaktivorm: „Jätke oma andmed“ ja viimase sammuna uudiskiri ---------- */ .leadf { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .leadf__step { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .leadf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .leadf__grid .fld--full { grid-column: 1 / -1; } .leadf__btn { align-self: flex-start; min-height: 52px; } .leadf__note { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); } .leadf__note a, .lead__alt a { color: var(--acc-ink); } .leadf__msg, .leadf__msg2 { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); } .leadf__msg:empty, .leadf__msg2:empty { display: none; } .leadf__msg[data-s="err"], .leadf__msg2[data-s="err"] { color: var(--sig); } .leadf__msg2[data-s="ok"] { color: var(--ink); font-weight: 600; } .leadf.is-busy .leadf__btn, .leadf__news.is-busy [data-news-yes] { opacity: 0.6; } .leadf__done { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .leadf__done[hidden], .leadf__step[hidden], .leadf__news[hidden] { display: none; } .leadf__ok { display: flex; align-items: center; gap: 14px; font-size: 1.06rem; line-height: 1.4; color: var(--ink-2); } .leadf__ok b { color: var(--ink); } .leadf__ok .ico-badge { background: var(--ok-soft); color: var(--ok); } .leadf__news { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.4vw, 24px); border-radius: 22px; background: var(--solid); box-shadow: var(--solid-shadow); } .leadf__news .small { color: var(--ink-2); } .leadf__actions { display: flex; flex-wrap: wrap; gap: 10px; } .leadf__news.is-done .chk, .leadf__news.is-done .leadf__actions { display: none; } @media (prefers-reduced-motion: no-preference) { .leadf__done:not([hidden]) { animation: in-up 0.6s var(--ease-out) both; } } @media (max-width: 560px) { .leadf__grid { grid-template-columns: minmax(0, 1fr); } .leadf__btn, .leadf__actions .btn { width: 100%; } } /* ============================================================ v17 — üks kiri kogu saidil (nüüd Inter), logo jääb Geistiks ============================================================ */ /* Pikad liitsõnad poolitatakse ainult kitsal telefonil. Pehmed sidekriipsud lisab build.py (pyphen, eesti keel). */ h1, h2 { -webkit-hyphens: none; hyphens: none; } @media (max-width: 380px) { h1, h2 { -webkit-hyphens: manual; hyphens: manual; } .uc__tab { gap: 6px; padding: 0 10px; font-size: 0.875rem; } .leadf__btn { padding-inline: 14px; font-size: 0.94rem; white-space: normal; text-wrap: balance; } } @media (max-width: 340px) { .uc__tab .ico, .leadf__btn svg { display: none; } } /* ============================================================ v21 — adviseo.ee tööriistade avaleht: teavituste tellimine üleval ============================================================ */ .hubsub { width: 100%; max-width: 640px; margin: clamp(22px, 3vw, 30px) auto 0; padding: clamp(18px, 2.6vw, 26px); border-radius: 26px; text-align: left; } .hubsub__t { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 1.06rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; } .hubsub__t .ico-badge { flex: none; } .hubsub .sub__chk { font-size: 0.8125rem; } /* Ilma menüüta riba: kontaktinupp jääb ka telefonis nähtavaks, sest menüünuppu pole */ @media (max-width: 440px) { .nav--bare .nav__side .btn { display: inline-flex; } }