/* Adviseo AI — kujundussüsteem (v23) Must, valge ja hall nagu lhv.ai-l. Klaas ainult menüüribal. Allkiri: inimese kinnitusrida (tume rida + punane täpp) näidistöövoos, kasutusjuhtudes ja projekti voos. Punane tähendab turunduslehtedel ainult inimese otsust. */ /* 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 { /* v23: kuus nimega tooni (paber, leht, tint, hall, signaal, riba) + tööriistade olekuvärvid. Kontrastid on arvutatud, vt design/review.md. Punane tähendab turunduslehtedel ainult inimese otsust. */ --bg: #F5F5F7; /* paber: lehe pind */ --bg-2: #ECECEF; /* märkuste taust */ --solid: #FFFFFF; /* leht: kaardid, näidistöövoog, vormid */ --ink: #1D1D1F; /* 15,46:1 paberil, 16,83:1 valgel */ --ink-2: #424245; /* 9,20:1 / 10,01:1 */ --ink-3: #6E6E73; /* 4,66:1 / 5,07:1: sildid ja kohatäitjad */ --acc-text: #86868B; /* pealkirja hall teine rida, ainult >= 24 px: 3,33:1 */ --sig: #D12C2B; /* inimese otsus ja vead: 4,70:1 paberil, 5,11:1 valgel */ --sig-soft: rgba(209, 44, 43, 0.12); --line: rgba(0, 0, 0, 0.08); --line-2: rgba(0, 0, 0, 0.14); /* ainus tume riba ja ümberpööratud inimese rida (kujunduse allkiri) */ --band: #1D1D1F; --on-band: #F5F5F7; /* 15,46:1 */ --on-band-2: #C7C7CC; /* 9,99:1 */ --on-band-3: #A1A1A6; /* 6,54:1 */ --band-line: rgba(255, 255, 255, 0.14); --inv-bg: #1D1D1F; --inv-fg: #F5F5F7; --inv-fg-3: #A1A1A6; /* 6,54:1 */ --inv-sig: #FF645F; /* täpp tumedal real: 5,80:1 */ --on: #1D1D1F; --on-ink: #1D1D1F; --on-soft: rgba(0, 0, 0, 0.06); --on-contrast: #FFFFFF; /* tööriistade tulemused */ --warn: #8F5B00; /* 5,73:1 valgel, 4,84:1 oma taustal */ --warn-soft: rgba(143, 91, 0, 0.12); --pos: #1D7D3E; /* 5,18:1 valgel, 4,52:1 oma taustal */ --pos-soft: rgba(29, 125, 62, 0.10); --acc: #1D1D1F; --acc-ink: #1D1D1F; --acc-soft: rgba(0, 0, 0, 0.055); --on-acc: #FFFFFF; --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); /* klaas: ainult menüüriba */ --glass-a: rgba(255, 255, 255, 0.72); --glass-b: rgba(255, 255, 255, 0.52); --glass-brd: rgba(255, 255, 255, 0.85); --glass-hi: rgba(255, 255, 255, 0.98); --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.07), 0 1px 3px 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-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05); --lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 28px 60px -36px rgba(0, 0, 0, 0.32); --pill: rgba(0, 0, 0, 0.05); --btn-bg: #1D1D1F; --btn-fg: #FFFFFF; --sw-off: #D2D2D7; --chip-bg: rgba(255, 255, 255, 0.66); --viz-bg: #F2F2F5; --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; /* raadiused: kaardid 20, juhtelemendid 12 */ --r-card: 20px; --r-sm: 14px; --r-ctl: 12px; /* kirjaskaala (390 px -> 1440 px): H1 40 -> 60, siselehe H1 34 -> 52, H2 28 -> 40, põhimõte 32 -> 48, juhtlõik 17 -> 19 */ --fs-h1: clamp(2.5rem, 2.036rem + 1.905vw, 3.75rem); --fs-h1-sm: clamp(2.125rem, 1.707rem + 1.714vw, 3.25rem); --fs-h2: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem); --fs-thesis: clamp(2rem, 1.629rem + 1.524vw, 3rem); --fs-lead: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); --section-y: clamp(56px, 5.6vw, 80px); --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; --solid: #1C1C1E; --ink: #F5F5F7; /* 19,29:1 paberil, 15,63:1 lehel */ --ink-2: #C7C7CC; /* 12,47:1 / 10,10:1 */ --ink-3: #8E8E93; /* 6,44:1 / 5,22:1 */ --acc-text: #86868B; /* 5,80:1 */ --sig: #FF645F; /* 7,24:1 / 5,87:1 */ --sig-soft: rgba(255, 100, 95, 0.18); --line: rgba(255, 255, 255, 0.11); --line-2: rgba(255, 255, 255, 0.19); --band: #1C1C1E; /* riba jääb tumedaks, ei vilgu valgena */ --on-band: #F5F5F7; --on-band-2: #C7C7CC; /* 10,10:1 */ --on-band-3: #A1A1A6; /* 6,61:1 */ --band-line: rgba(255, 255, 255, 0.12); --inv-bg: #F5F5F7; /* inimese rida on tumedas režiimis hele */ --inv-fg: #1D1D1F; --inv-fg-3: #6E6E73; /* 4,66:1 */ --inv-sig: #D12C2B; /* 4,70:1 */ --on: #F5F5F7; --on-ink: #F5F5F7; --on-soft: rgba(255, 255, 255, 0.10); --on-contrast: #000000; --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); --on-acc: #000000; --glass-a: rgba(28, 28, 30, 0.72); --glass-b: rgba(28, 28, 30, 0.56); --glass-brd: rgba(255, 255, 255, 0.14); --glass-hi: rgba(255, 255, 255, 0.16); --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4); --rim: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.10) 40%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.22)); --solid-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.5); --lift: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 28px 60px -30px rgba(0, 0, 0, 0.8); --pill: rgba(255, 255, 255, 0.09); --btn-bg: #F5F5F7; --btn-fg: #0B0B0C; --sw-off: #3A3A3C; --chip-bg: rgba(255, 255, 255, 0.06); --viz-bg: #111113; --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; --solid: #1C1C1E; --ink: #F5F5F7; /* 19,29:1 paberil, 15,63:1 lehel */ --ink-2: #C7C7CC; /* 12,47:1 / 10,10:1 */ --ink-3: #8E8E93; /* 6,44:1 / 5,22:1 */ --acc-text: #86868B; /* 5,80:1 */ --sig: #FF645F; /* 7,24:1 / 5,87:1 */ --sig-soft: rgba(255, 100, 95, 0.18); --line: rgba(255, 255, 255, 0.11); --line-2: rgba(255, 255, 255, 0.19); --band: #1C1C1E; /* riba jääb tumedaks, ei vilgu valgena */ --on-band: #F5F5F7; --on-band-2: #C7C7CC; /* 10,10:1 */ --on-band-3: #A1A1A6; /* 6,61:1 */ --band-line: rgba(255, 255, 255, 0.12); --inv-bg: #F5F5F7; /* inimese rida on tumedas režiimis hele */ --inv-fg: #1D1D1F; --inv-fg-3: #6E6E73; /* 4,66:1 */ --inv-sig: #D12C2B; /* 4,70:1 */ --on: #F5F5F7; --on-ink: #F5F5F7; --on-soft: rgba(255, 255, 255, 0.10); --on-contrast: #000000; --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); --on-acc: #000000; --glass-a: rgba(28, 28, 30, 0.72); --glass-b: rgba(28, 28, 30, 0.56); --glass-brd: rgba(255, 255, 255, 0.14); --glass-hi: rgba(255, 255, 255, 0.16); --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4); --rim: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.10) 40%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.22)); --solid-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.5); --lift: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 28px 60px -30px rgba(0, 0, 0, 0.8); --pill: rgba(255, 255, 255, 0.09); --btn-bg: #F5F5F7; --btn-fg: #0B0B0C; --sw-off: #3A3A3C; --chip-bg: rgba(255, 255, 255, 0.06); --viz-bg: #111113; --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 */ /* 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; } .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__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)); } .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; } /* 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 */ /* Loendid */ .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; } .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); } } /* 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 */ /* Taust elab aeglaselt */ /* 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); } } /* ---------- Liikuv riba ---------- */ /* ---------- 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; } /* ---------- Kaardid: ikoon + väike liikuv pilt ---------- */ .card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card p { font-size: 1rem; line-height: 1.5; } /* ---------- Ajajoon: neli sammu ---------- */ /* ---------- 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 ---------- */ /* ---------- Nimekaart ---------- */ /* ---------- 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 ---------- */ /* ---------- 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 */ .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); } .sel-all { user-select: all; } /* ---------- 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 ---------- */ /* 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 */ /* 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 */ /* 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)); } /* Liikuv riba: väikesed värvilised ikoonid */ /* Ajajoon: iga etapp oma tooniga, joon kannab tooni edasi */ .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 */ /* 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 */ /* ============================================================ 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 */ /* 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 .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 .wf__win, .hero .proj { animation: win-in 1.4s var(--ease-out) 0.28s both; } } @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 win-in { from { opacity: 0; transform: translateY(40px) scale(0.95); } } @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 { transform: translateY(-1px) rotate(-8deg) scale(1.08); } /* ---------- Väikesed pildid liiguvad ainult siis, kui on nähtaval ---------- */ /* ---------- Ajajoon ja voog joonistuvad kerimise järgi ---------- */ .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 ---------- */ /* ---------- 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 */ /* ---------- Avaekraan keskel ---------- */ .h1--hero { font-size: clamp(2.2rem, 5.8vw, 4.7rem); line-height: 1; letter-spacing: -0.03em; } .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); } /* 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 ---------- */ /* Väikesed pildid: pingerida, vestlus, süsteemid, kasvavad tulbad */ /* ---------- 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 ---------- */ /* ---------- Miks Adviseo ---------- */ /* ---------- EISi toetus ---------- */ /* ---------- 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); } /* 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__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 */ .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); } @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; } @media (max-width: 900px) { .tool-hero { grid-template-columns: minmax(0, 1fr); } } .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 */ /* ============================================================ 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 { 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 */ .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); } /* ---------- 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 ---------- */ /* ---------- Avaekraan: neli rolli (laial ekraanil akna kõrval, kitsal 2 × 2 akna all) ---------- */ /* Nimed ja kirjeldused samale joonele ka siis, kui mõni nimi läheb kahele reale */ /* Pakkumine missiooni ribal (tumedal taustal hele kaart, tumedas režiimis vastupidi) */ /* Miks meie: kolm kaarti ühes reas, kitsal ekraanil üksteise all */ /* Kahetooniline pealkiri: esimene lause tume, teine hall (Miks meie) */ /* ---------- 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 { 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 ============================================================ */ /* 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; } } /* ============================================================ v23: kinnitusrida ja vaikne süsteem Üks allkiri: koht, kus töö läheb inimese kätte, on tume rida punase täpiga (näidistöövoog, kasutusjuhud, projekti voog). Kõik muu on vaikne: klaas ainult menüüribal, ühtlased pinnad juuksejoonega, jaotiste pead vasakul, ikoonikaste ega pille pole, liigub ainult avaekraani näide. ============================================================ */ /* ---------- Alus ja kirjaskaala ---------- */ .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(32px, 4.5vw, 64px); } .section.section--tool { padding-top: 0; } .sheet { background: var(--solid); border: 1px solid var(--line); } .h1--hero { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.032em; } .h1--sm, .h1--tool { font-size: var(--fs-h1-sm); line-height: 1.04; letter-spacing: -0.028em; } .h1--long { font-size: clamp(1.875rem, 1.45rem + 1.7vw, 2.875rem); line-height: 1.06; } .h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.024em; } .h2--sm { font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem); line-height: 1.15; letter-spacing: -0.018em; } .h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; } .lead { font-size: var(--fs-lead); line-height: 1.5; } .inp::placeholder { color: var(--ink-3); opacity: 1; } .inp:focus { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent); } /* Väga suure kirja korral (200 %) murduvad pikad liitsõnad, mitte leht */ body { overflow-wrap: break-word; } /* Jaotise pea: pealkiri vasakul, juhtlõik laial ekraanil kõrval */ .shead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: clamp(28px, 3.6vw, 44px); } .shead .h2 { max-width: 20ch; text-wrap: balance; } .shead .lead { max-width: 36em; text-wrap: pretty; } @media (min-width: 900px) { .shead--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: baseline; } } .shead--long .h2 { max-width: 30ch; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); line-height: 1.12; letter-spacing: -0.02em; } /* ---------- Nupud: tint, joonega ja ümberpööratud; ilma läike ja hüppeta ---------- */ .btn { border-radius: var(--r-ctl); padding: 0 22px; } .btn:not(.btn--glass) { box-shadow: none; } .btn:not(.btn--glass)::after { content: none; } .btn:hover { transform: none; } .btn:active { transform: scale(0.98); } .btn--sm { border-radius: 10px; padding: 0 16px; } .btn.btn--line, .btn.btn--glass { background: var(--solid); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: none; backdrop-filter: none; } .btn.btn--line:hover, .btn.btn--glass:hover { background: var(--solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent); } .btn--glass::before { content: none; } .btn.btn--inv { background: var(--on-band); color: var(--band); } .btn.btn--inv:hover { background: color-mix(in srgb, var(--on-band) 86%, var(--band)); } /* ---------- Klaas ainult menüüribal ---------- */ .nav { max-width: var(--wrap); } .glass::after { content: none; } /* ---------- Avaekraan: lubadus vasakul, terve näide paremal, neli rolli all ---------- */ .hero--home { padding-block: clamp(20px, 3.2vw, 44px) clamp(40px, 5vw, 64px); } .hero--home .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; } @media (min-width: 1100px) { .hero--home .hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 56px; } } .hero--home .hero__text { gap: 20px; } .hero--home .lead { max-width: 31em; text-wrap: pretty; } .accent-w { display: block; clip-path: none; } .accent { display: inline; padding: 0; color: var(--acc-text); } .hero__cta { gap: 10px; padding-top: 4px; } .proof { display: flex; align-items: flex-start; gap: 9px; max-width: 34em; margin: 0; text-align: left; font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; } .proof .ico { display: block; flex: none; width: 18px; height: 18px; margin: 1px 0 0; color: var(--ink); vertical-align: 0; } .hero__demo { display: flex; justify-content: flex-end; min-width: 0; } .hero__demo .wf { width: 100%; max-width: 540px; justify-self: auto; } @media (max-width: 1099px) { .hero__demo { justify-content: flex-start; } .hero__demo .wf { max-width: 600px; } } @media (max-width: 480px) { .hero__cta { width: 100%; } .hero__cta .btn { flex: 1 1 100%; } } .roles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(36px, 4.5vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); } .roles4__i { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 24px 0 0; } .roles4__i + .roles4__i { padding-left: 24px; border-left: 1px solid var(--line); } .roles4__name { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.006em; color: var(--ink); text-wrap: balance; } .roles4__txt { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; } @media (max-width: 900px) { .roles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roles4__i:nth-child(odd) { padding-left: 0; border-left: 0; } .roles4__i:nth-child(n+3) { margin-top: 18px; border-top: 1px solid var(--line); } } @media (max-width: 400px) { .roles4__i { padding-right: 14px; } .roles4__i + .roles4__i { padding-left: 14px; } .roles4__i:nth-child(odd) { padding-left: 0; } } /* Avaekraan ilmub kohe: sisenemisanimatsioonid maha (ainus liikumine on näide ise) */ .nav, .hero .accent, .hero .lead, .hero__cta, .hero .wf__win, .hero .proj, .hero .hero__text > .note { animation: none; } /* ---------- Näidistöövoog: ühtlane leht, mitte klaas ---------- */ .wf__win { padding: 6px; border-radius: 24px; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--lift); } .wf__tilt { transform: none !important; } .wf__bar { padding: 2px 6px 2px 14px; } .wf__case { height: auto; padding: 0; background: none; font-size: 0.875rem; font-weight: 600; color: var(--ink); } .wf__panel { padding: 4px; border-radius: 19px; background: var(--solid); box-shadow: none; } .wf__sheen { display: none; } .wf__lbl { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.07em; } /* ---------- ALLKIRI: inimese kinnitusrida ---------- Seal, kus töö läheb inimese kätte, pöördub rida ümber: hele leht muutub tumedaks (tumedas režiimis heledaks). Ilma skriptita ja vähendatud liikumisega on rida kohe tume; näite ajal muutub ta tumedaks hetkel, kui töö jõuab inimeseni. */ .wf__step--human { --rf: var(--ink); --rf3: var(--ink-3); --rs: var(--sig); --rtb: var(--ink); --rtf: var(--bg); } .wf:not([data-run]) .wf__step--human, .wf[data-run] .wf__step--human.is-on, .wf[data-run] .wf__step--human.is-done { background-color: var(--inv-bg); --rf: var(--inv-fg); --rf3: var(--inv-fg-3); --rs: var(--inv-sig); --rtb: var(--inv-fg); --rtf: var(--inv-bg); } .wf__step--human .wf__txt { color: var(--rf); } .wf__step--human .wf__lbl { color: var(--rf3); transition: color 0.45s ease; } .wf__step--human .wf__lbl::after { background: var(--rs); } .wf__step--human .wf__ico { background: var(--rtb); color: var(--rtf); } .wf:not([data-run]) .wf__ok, .wf[data-run] .wf__step.is-done .wf__ok { background: color-mix(in srgb, var(--inv-fg) 16%, transparent); color: var(--inv-fg); } .wf[data-run] .wf__step.is-on:not(.is-done) .wf__ok { background: var(--inv-fg); color: var(--inv-bg); } /* Sama rida projekti voos */ .flow { padding: 8px; border: 1px solid var(--line); box-shadow: none; border-radius: var(--r-card); } .flow__node--human { background: var(--inv-bg); } .flow__node--human .flow__text { color: var(--inv-fg); } .flow__node--human .flow__label { color: var(--inv-fg-3); } .flow__node--human .flow__ico { background: var(--inv-fg); color: var(--inv-bg); } .flow__node--human .flow__label::after { background: var(--inv-sig); box-shadow: none; } /* Ja kasutusjuhtudes: tühi ring = tehisaru mustand, kriipsjoon = üleandmine, punane täpp = inimene kinnitab */ .handoff { display: flex; flex-direction: column; margin: 0; } .handoff__ai, .handoff__human { position: relative; display: block; padding-left: 22px; font-size: 0.96875rem; text-wrap: pretty; } .handoff__ai { padding-bottom: 12px; line-height: 1.5; color: var(--ink-2); } .handoff__human { line-height: 1.45; font-weight: 600; letter-spacing: -0.003em; color: var(--ink); } .handoff__ai::before, .handoff__human::before { content: ""; position: absolute; left: 0; top: calc(0.74em - 5px); width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; } .handoff__ai::before { border: 1.5px solid var(--ink-3); } .handoff__ai::after { content: ""; position: absolute; left: 4.25px; top: calc(0.74em + 8px); bottom: -2px; border-left: 1.5px dashed color-mix(in srgb, var(--ink-3) 70%, transparent); } .handoff__human::before { background: var(--sig); box-shadow: 0 0 0 3px var(--sig-soft); } /* ---------- Põhimõte: ainus tume riba, pakkumine selle sees ---------- */ .thesis { background: var(--band); color: var(--on-band); } .thesis::before { content: none; } .thesis__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); } @media (min-width: 900px) { .thesis__head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 56px; align-items: baseline; } } .thesis .h2.thesis__title { max-width: 13ch; font-size: var(--fs-thesis); line-height: 1.04; letter-spacing: -0.03em; color: var(--on-band); text-wrap: balance; } .thesis .lead { max-width: 32em; color: var(--on-band-2); text-wrap: pretty; } .thesis :focus-visible { outline-color: var(--on-band); } .offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; margin: 0; padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px); border-radius: var(--r-card); border: 1px solid var(--band-line); background: color-mix(in srgb, var(--on-band) 5%, transparent); color: var(--on-band); text-align: left; box-shadow: none; } .offer__txt { gap: 0; } .offer__t { font-size: 1.25rem; color: var(--on-band); } .offer__p { max-width: 54ch; color: var(--on-band-2); } .offer__deal { gap: 24px; } .offer__price { flex-wrap: wrap; row-gap: 2px; white-space: normal; } .offer__was, .offer__now { white-space: nowrap; } .offer__was { color: var(--on-band-3); } .offer__lbl { color: var(--on-band-2); } .offer__now b { color: var(--on-band); } @media (max-width: 900px) { .offer { grid-template-columns: minmax(0, 1fr); } .offer__deal { justify-content: space-between; flex-wrap: wrap; } } /* ---------- Teenused: kuus vaikset kaarti, lõpus tulemus ---------- */ .svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1000px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .svcs { grid-template-columns: minmax(0, 1fr); gap: 12px; } } .svc, .dlv { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px; border-radius: var(--r-card); background: var(--solid); border: 1px solid var(--line); } .svc__txt, .dlv p { font-size: 1rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .dlvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } @media (max-width: 640px) { .svc, .dlv { padding: 20px; } } /* Kaardid ühes reas: pealkiri, tekst ja tulemus algavad samalt kõrguselt (subgrid) */ @supports (grid-template-rows: subgrid) { .svc, .dlv { display: grid; grid-row: span 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 10px; } .svc .result, .dlv .result { margin-top: 6px; } .uc__card { display: grid; grid-row: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 14px; align-content: start; } } /* Tulemuse rida: mida klient kätte saab (teenused, väljundid, sammud) */ .result { display: flex; flex-direction: column; gap: 5px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); } .result__l { font-size: 0.75rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .result__v { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: pretty; } .result__v .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; stroke-width: 2.1; } /* ---------- Lahendused: segmenteeritud valik ja kaardid ---------- */ .uc__bar { margin-bottom: 20px; } .uc__tabs { margin-inline: 0; padding: 4px; border: 0; border-radius: 14px; background: var(--pill); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .uc__tab { min-height: 44px; border-radius: 10px; } .uc__ind { top: 4px; height: 44px; border-radius: 10px; background: var(--solid); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05); } @media (max-width: 600px) { .uc__tabs { border-radius: 16px; } .uc__tab { min-width: 0; border-radius: 12px; white-space: normal; line-height: 1.2; text-align: left; } .uc__tab span { min-width: 0; overflow-wrap: anywhere; } } .uc__grid { gap: 16px; } .uc__card { gap: 14px; padding: 24px; border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: none; } .uc__t { font-size: 1.125rem; } @media (max-width: 860px) { .uc__grid { gap: 12px; } .uc__card { padding: 20px; } } /* ---------- Ajajoon: neli sammu ühel joonel (staatiline) ---------- */ .track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; } .track__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 26px 28px 0 0; border-top: 1.5px solid var(--line-2); } .track__node { position: absolute; z-index: 1; left: 0; top: -6.75px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg); } .track__weeks { font-size: 0.75rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .track__step p { font-size: 1rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .track .result { border-top: 0; padding-top: 6px; } @media (max-width: 820px) { .track { grid-template-columns: minmax(0, 1fr); } .track__step { padding: 0 0 28px 30px; border-top: 0; border-left: 1.5px solid var(--line-2); } .track__step:last-child { padding-bottom: 0; border-left-color: transparent; } .track__node { left: -6.75px; top: 0.2em; } } /* ---------- Kolm veergu (miks meie, muutus inimeste töös) ja neli sammu ---------- */ .cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; } .cols3__i { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 18px; border-top: 1.5px solid var(--line-2); } .cols3__i p { font-size: 1rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .cols3__l { font-size: 0.75rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .cols3 .cols3__v { font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--ink); } @media (max-width: 760px) { .cols3 { grid-template-columns: minmax(0, 1fr); gap: 20px; } } .steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: clamp(28px, 3.5vw, 40px) 0 0; padding: 0; list-style: none; counter-reset: s4; } .steps4 li { counter-increment: s4; display: flex; align-items: baseline; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--ink); text-wrap: pretty; } .steps4 li::before { content: counter(s4); flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); } @media (max-width: 900px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .steps4 { grid-template-columns: minmax(0, 1fr); } } /* ---------- Loendid ilma pillideta ---------- */ .plist { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .plist li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); } .plist .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); } .plist--inline { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; } .plist--inline li { color: var(--ink-2); } .inline-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); } .inline-list li + li::before { content: "·"; margin: 0 10px; color: var(--ink-3); } .tagline { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); } .tagline .ico { width: 16px; height: 16px; color: var(--ink-3); } /* ---------- Projektileht ---------- */ .hero--proj { padding-block: clamp(24px, 4vw, 56px) clamp(40px, 5vw, 72px); } .hero--proj .hero__grid { gap: 32px 56px; } .proj { padding: 24px; border-radius: 24px; box-shadow: var(--lift); } .tick, .weeks__bar span::after { animation: none; } .first { border-radius: 24px; box-shadow: none; } .note--track { margin-top: 28px; } /* ---------- KKK: pealkiri vasakul, küsimused ühel lehel ---------- */ .faqwrap { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { .faqwrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 56px; align-items: start; } .faqwrap .shead { position: sticky; top: 112px; } } .faq { gap: 0; overflow: hidden; border-radius: var(--r-card); background: var(--solid); border: 1px solid var(--line); } .faq__item { border-radius: 0; background: transparent; box-shadow: none; } .faq__item + .faq__item { border-top: 1px solid var(--line); } .faq__item summary { min-height: 60px; padding: 16px 16px 16px 22px; font-size: 1.03125rem; } .faq__item p { padding: 0 22px 20px; } .faq__item summary:focus-visible { outline-offset: -4px; border-radius: 14px; } /* ---------- Teavitused ja kontakt: ühtlased lehed ---------- */ .alerts { border-radius: 24px; padding: clamp(22px, 3.4vw, 40px); box-shadow: none; } .contact { border-radius: 24px; box-shadow: none; } .fld--float { position: relative; } .fld--float > .inp { min-height: 56px; padding: 25px 14px 8px; } .fld--float > .inp--area { min-height: 112px; padding-top: 27px; } .fld--float > .inp::placeholder { color: transparent; } .fld__float { position: absolute; left: 15px; right: 15px; top: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; line-height: 1.5; color: var(--ink-3); pointer-events: none; transform-origin: 0 0; transition: transform 0.16s var(--ease-out), color 0.16s ease; } .fld--float > .inp:focus + .fld__float, .fld--float > .inp:not(:placeholder-shown) + .fld__float { transform: translateY(-10px) scale(0.75); } .fld--float > .inp:focus + .fld__float { color: var(--ink-2); } /* ---------- Tööriistad: kogumik ja tööriista leht ---------- */ .section.section--hub { padding-top: clamp(28px, 3vw, 40px); } /* kogumik avaneb otse võrguga menüüriba all */ .tcard { border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: none; transition: transform 0.3s var(--ease-out), border-color 0.2s ease, box-shadow 0.3s ease; } .tcard::before, .tcard--feat::before { content: none; } .tcard:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 18px 36px -26px rgba(0, 0, 0, 0.4); } .tfeat__tag { height: auto; padding: 0; border-radius: 0; background: none; color: var(--ink-3); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; } .tool-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; } .tool { border-radius: 24px; box-shadow: none; } .section--related { border-top: 1px solid var(--line); } .section__head--row { align-items: center; } /* ---------- Liikumine: ainult näide; ülejäänu on kohe paigas ---------- */ .js [data-reveal] { opacity: 1; translate: none; transition: none; } .ico-badge .ico { transition: none; } .card:hover .ico-badge .ico { transform: none; } ::view-transition-new(root) { animation-duration: 0.25s; } @media (prefers-reduced-motion: reduce) { .fld__float, .wf__step--human .wf__lbl { transition: none; } } @media (pointer: coarse), (max-width: 600px) { .pchip { min-height: 36px; padding: 0 13px; } } .crumbs a { padding-block: 11px; margin-block: -11px; } /* 44 px puutepind ilma paigutust muutmata */ /* ---------- Ligipääs: vähem läbipaistvust, rohkem kontrasti, sunnitud värvid ---------- */ @media (prefers-reduced-transparency: reduce) { .glass, .nav { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { :root { --line: rgba(0, 0, 0, 0.24); --line-2: rgba(0, 0, 0, 0.42); --ink-3: #424245; --acc-text: #424245; --pill: rgba(0, 0, 0, 0.1); } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --line: rgba(255, 255, 255, 0.3); --line-2: rgba(255, 255, 255, 0.5); --ink-3: #C7C7CC; --acc-text: #C7C7CC; } } @media (forced-colors: active) { .btn { border: 1px solid ButtonText; } .wf__step--human, .flow__node--human { border: 2px solid CanvasText; } .handoff__human::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; } }