body{margin:0} html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%} :root{--px:max(24px,calc(50vw - 720px))} html,body{margin:0;padding:0;background:#0E0F12;color:#EDEAE3} body{font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} *{box-sizing:border-box} a{color:inherit;text-decoration:none} a:hover{color:inherit} ::selection{background:#1C3667;color:#EDEAE3} input,textarea,button{font:inherit} @keyframes om-blink{0%,55%{opacity:1}56%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation:none !important}} [data-kthv="10"]:hover{color:#EDEAE3} [data-kthv="11"]:hover{color:#EDEAE3} [data-kthv="12"]:hover{color:#EDEAE3} [data-kthv="13"]:hover{color:#EDEAE3} [data-kthv="14"]:hover{color:#EDEAE3} [data-kthv="15"]:hover{border-color:#0E0F12;outline:1px solid #0E0F12} [data-kthv="16"]:hover{background-size:100% 100%;color:#EDEAE3} [data-kthv="17"]:hover{background:#16171C} [data-kthv="18"]:hover{background:#16171C} [data-kthv="19"]:hover{background:#16171C} [data-kthv="20"]:hover{background:#16171C} [data-kthv="21"]:hover{background:#16171C} [data-kthv="22"]:hover{background:#16171C} [data-kthv="23"]:hover{color:#EDEAE3} [data-kthv="24"]:hover{color:#EDEAE3} [data-kthv="25"]:hover{color:#EDEAE3} [data-kthv="26"]:hover{color:#EDEAE3} [data-kthv="27"]:hover{color:#EDEAE3} [data-kthv="28"]:hover{color:#EDEAE3} [data-kthv="29"]:hover{color:#EDEAE3} [data-kthv="0"]:hover{color:#EDEAE3} [data-kthv="1"]:hover{color:#EDEAE3} [data-kthv="2"]:hover{color:#EDEAE3} [data-kthv="3"]:hover{color:#EDEAE3} [data-kthv="4"]:hover{color:#EDEAE3} [data-kthv="5"]:hover{color:#EDEAE3} [data-kthv="6"]:hover{color:#EDEAE3} [data-kthv="7"]:hover{color:#EDEAE3} [data-kthv="8"]:hover{color:#EDEAE3} [data-kthv="9"]:hover{color:#EDEAE3} [data-kthv="70"]:hover{color:#EDEAE3} [data-kthv="71"]:hover{color:#EDEAE3} [data-kthv="72"]:hover{color:#EDEAE3} [data-kthv="73"]:hover{color:#EDEAE3} [data-kthv="74"]:hover{color:#EDEAE3} [data-kthv="75"]:hover{color:#EDEAE3} [data-kthv="76"]:hover{color:#EDEAE3} [data-kthv="77"]:hover{color:#EDEAE3} [data-kthv="78"]:hover{color:#EDEAE3} [data-kthv="79"]:hover{color:#EDEAE3} [data-kthv="80"]:hover{color:#EDEAE3} [data-kthv="81"]:hover{color:#EDEAE3} [data-kthv="82"]:hover{color:#EDEAE3} [data-kthv="83"]:hover{border-bottom-color:#1C3667} [data-kthv="84"]:hover{border-bottom-color:#6C8FCB} [data-kthv="85"]:hover{border-bottom-color:#1C3667} [data-kthv="86"]:hover{border-bottom-color:#6C8FCB} [data-kthv="87"]:hover{border-bottom-color:#1C3667} [data-kthv="88"]:hover{border-bottom-color:#6C8FCB} [data-kthv="89"]:hover{border-bottom-color:#1C3667} [data-kthv="90"]:hover{border-bottom-color:#6C8FCB} [data-kthv="91"]:hover{color:#EDEAE3} [data-kthv="92"]:hover{color:#EDEAE3} [data-kthv="93"]:hover{color:#EDEAE3} [data-kthv="94"]:hover{color:#EDEAE3} [data-kthv="95"]:hover{color:#EDEAE3} [data-kthv="51"]:hover{color:#EDEAE3} [data-kthv="52"]:hover{color:#EDEAE3} [data-kthv="53"]:hover{color:#EDEAE3} [data-kthv="54"]:hover{color:#EDEAE3} [data-kthv="55"]:hover{color:#EDEAE3} [data-kthv="56"]:hover{color:#0E0F12} [data-kthv="57"]:hover{color:#0E0F12} [data-kthv="58"]:hover{color:#0E0F12} [data-kthv="59"]:hover{color:#0E0F12} [data-kthv="60"]:hover{color:#0E0F12} [data-kthv="61"]:hover{color:#0E0F12} [data-kthv="62"]:hover{color:#0E0F12} [data-kthv="63"]:hover{color:#0E0F12} [data-kthv="64"]:hover{border-bottom-color:#6C8FCB} [data-kthv="65"]:hover{color:#EDEAE3} [data-kthv="66"]:hover{color:#EDEAE3} [data-kthv="67"]:hover{color:#EDEAE3} [data-kthv="68"]:hover{color:#EDEAE3} [data-kthv="69"]:hover{color:#EDEAE3} [data-kthv="30"]:hover{color:#EDEAE3} [data-kthv="31"]:hover{color:#EDEAE3} [data-kthv="32"]:hover{color:#EDEAE3} [data-kthv="33"]:hover{color:#EDEAE3} [data-kthv="34"]:hover{color:#EDEAE3} [data-kthv="35"]:hover{color:#EDEAE3} [data-kthv="36"]:hover{color:#EDEAE3} [data-kthv="37"]:hover{color:#EDEAE3} [data-kthv="38"]:hover{color:#EDEAE3} [data-kthv="39"]:hover{color:#EDEAE3} [data-kthv="40"]:hover{color:#EDEAE3} [data-kthv="41"]:hover{color:#EDEAE3} [data-kthv="42"]:hover{color:#EDEAE3} [data-kthv="43"]:hover{color:#EDEAE3} [data-kthv="44"]:hover{color:#EDEAE3} [data-kthv="45"]:hover{background:#1C3667;color:#EDEAE3} [data-kthv="46"]:hover{color:#EDEAE3} [data-kthv="47"]:hover{color:#EDEAE3} [data-kthv="48"]:hover{color:#EDEAE3} [data-kthv="49"]:hover{color:#EDEAE3} [data-kthv="50"]:hover{color:#EDEAE3} /* ============================================================ CONFIRMO FIXES (appended) - responsive squeeze + hero visual ============================================================ */ /* 1) TEXT SQUEEZE FIX The design's flex sections shrink text blocks down to min-content at narrower widths, breaking copy to one word per line. Let rows wrap and stop text blocks collapsing. */ section { flex-wrap: wrap; } section > * { min-width: 0; } p, h1, h2, h3, h4, li, blockquote { overflow-wrap: break-word; } /* a paragraph must never be squeezed below a readable measure */ p { flex-shrink: 0; min-width: min(100%, 34ch); } h1, h2, h3 { flex-shrink: 0; } @media (max-width: 1100px) { section { flex-wrap: wrap; } section > * { flex-basis: auto !important; max-width: 100% !important; } p { max-width: 100% !important; width: auto !important; } } @media (max-width: 780px) { p, h1, h2, h3 { max-width: 100% !important; width: auto !important; } } /* 2) HERO VISUAL - moderately larger than the design's 380px, but the hero must still fit one viewport (design intent: hero section = 900px tall). */ .ct-hero-visual { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; } .ct-hero-visual img.ct-slot { position: absolute; inset: 0; width: 100%; height: 100%; /* top-anchored: the hero box is height-clamped and therefore wider than the images' 16:10, so cover must crop from the BOTTOM only - never cut the top edge of a site screenshot (Ingmar 2026-08-05). NB: this selector covers ONLY the hero rotation; .ct-slot is also used by the work cards and meist-foto, which carry their own inline object-position. The rule is sitewide, this declaration is not - check any new cover-cropped image separately. */ object-fit: cover; object-position: top center; opacity: 0; transition: opacity 900ms ease; } .ct-hero-visual img.ct-slot.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ct-hero-visual img.ct-slot { transition: none; } } /* The design pins the hero visual to aspect-ratio 16/10. ⛔ 2026-08-06: the previous fix drove the HEIGHT from the viewport (`height: clamp(150px, 100vh - 641px, 340px)`) and let the box keep full column width. On a short window that letterboxed the screenshot: measured 598x150 = 3.99:1 at 1800x730, only 40% of the image visible, while the caption still claimed "16:10" — and at exactly those sizes (1920x800, 1800x730, 1366x768, 1280x720) the hero OVERFLOWED the fold anyway. The clamp paid the image and did not buy the fit. The replacement — capping the frame's WIDTH from `100vh` — was wrong in the mirror direction and Ingmar caught it ("avalehe pilt on ikka pekkis … see ei ole selles suuruses mis oli localis"): driving the image's width off the viewport's HEIGHT rendered the frame at 480px instead of the design's 598px on any ~900px-tall window, i.e. on the most common laptop there is. And it still did not buy the fold — measured 1920x1080 = hero bottom 1104 (+24) and 1680x1050 = 1098 (+48). ⛔ THE ACTUAL BUG WAS NEITHER, and both "fixes" were paying the image to hide it. The hero's top row carries INLINE `flex-wrap: wrap`, and that wrap opened a phantom second flex line — empty, 209px tall (the row measured 602px while its tallest child ended at 433px; `document.elementFromPoint` found nothing at all in the band, and 407 + 36 gap + 132.5 = the text column's own height = 601.6 exactly). That dead band, not the picture, was what pushed the H1 and the CTAs past the fold. Every flex/height/align property I tried left it at 601.6 because the wrap is INLINE — a stylesheet rule cannot beat it without `!important`, which is why the first attempts silently did nothing and looked like the image was to blame. With the row set to nowrap on desktop the row is 393px and the hero FITS at 1920x1080 and 1680x1050 with the image at full design size — the fit the clamp never actually delivered. Scoped to >=901px: below that the wrap is what stacks the hero into one column. */ @media (min-width: 901px) { .ct-hero > div:has(.ct-hero-visual) { flex-wrap: nowrap !important; } } div:has(> .ct-hero-visual) { aspect-ratio: 16 / 10; height: auto; width: 100%; } .ct-hero-visual { height: 100%; max-height: none; } /* ------------------------------------------------------------------ HERO ARRANGEMENT - reverted 2026-08-07 on Ingmar's instruction (he marked the columns in green on a screenshot). A two-column CSS grid shipped 2026-08-06 and came back down the next day. Why it went: the grid gave a bigger picture (596 -> 689/798px) AND a shorter hero - both measured, both true - but it moved the eyebrow and intro out to the LEFT MARGIN, in line with the H1, which is the arrangement every OTHER page uses. Ingmar: "see paigutus on natuke teistmoodi kui kõigil teistel lehtedel - eristuv". The indented text column IS the front page's distinction and the grid flattened it. A measurement can say "bigger and shorter" and still describe the wrong design. So the exported flex row stays: eyebrow + intro indented in their own column, picture beside them, H1 running wide underneath. The nowrap rule above is NOT part of the revert - it kills the phantom 209px flex line, which was a real bug. ⛔ Do not re-add the grid without asking him. The CSS and the measurements are parked in seo/clients/active/confirmo.ee/hero-otsus-2026-08-06/ if the question ever reopens. ------------------------------------------------------------------ */ } /* Mobile navigation (the design exported no mobile header). NB: hide only the DESKTOP nav - the burger panel's own nav lives in .ct-mobnav and must stay visible (regression F1, clean-loop round 1). */ @media (max-width: 900px) { header nav:not(.ct-mobnav nav) { display: none !important; } .ct-burger { display: flex !important; } } .ct-mobnav[hidden] { display: none !important; } body.ct-navopen { overflow: hidden; } /* Background grid/ruler lines must sit BEHIND content everywhere (light and dark sections). Absolutely-positioned overlays otherwise paint above in-flow text. */ [data-grid], [data-line], .ct-gridlines { z-index: -1 !important; } section { position: relative; isolation: isolate; } /* Work-card image frame hover (front-page section #too) */ .ct-frame{transition:outline-color .2s;outline:1px solid transparent} .ct-frame:hover{outline-color:#0E0F12} /* ============================================================ QA WAVE-1 (a11y + structure) - 2026-08-05 ============================================================ */ /* Skip link (A006): visually hidden until keyboard focus, then top-left dark-on-paper */ .skip-link{position:absolute;left:-9999px;top:0;z-index:10000;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:500;letter-spacing:.12em;background:#EDEAE3;color:#0E0F12;padding:12px 18px;border:1px solid #0E0F12} .skip-link:focus,.skip-link:focus-visible{left:0;outline:2px solid #1C3667;outline-offset:2px} /* Structural split (A006): the site header is its own landmark; the hero section fills the REST of the first viewport. 71.4px / 85px = measured header heights (desktop / <=900px burger bar) so header + hero still sum to exactly 100svh. */ .ct-hero{min-height:calc(100svh - 71.4px)} @media (max-width:900px){.ct-hero{min-height:calc(100svh - 85px)}} /* Focus indicators (A002+A003). !important is REQUIRED: the form fields carry inline `outline: none` and the buttons inline `all:unset`. */ .scp1:focus-visible{outline:2px solid #1C3667!important;outline-offset:2px} .ct-filter:focus-visible,.ct-cat:focus-visible,.ct-burger:focus-visible,.ct-mobclose:focus-visible{outline:2px solid currentColor!important;outline-offset:2px} /* Screen-reader-only utility (A011) */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Mobile tap-height for standalone mono links (A010) */ @media (max-width:900px){.scp0{display:inline-block;padding:6px 0}} /* Hinnakiri price rows: stack the nowrap price under the service name on narrow phones. Pre-existing 14px overflow at 360px ("280 €/h või projektihind"), previously masked by the old never-closed hero wrapper's overflow:hidden. */ @media (max-width:480px){div[style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr!important}} /* ============================================================ /teenused/ - alternating two-column service rows - 2026-08-05 Every service frame was written `aspect-ratio: 21 / 7` but RENDERED 16:10: the frame is a flex item in a `flex-direction: column` container, so its automatic min-height wins over the ratio (same trap already fixed on the front-page work grid). min-height:0 restores it. The media column is pinned to the front-page featured-tile width so the site keeps three image sizes. ============================================================ */ /* top-aligned, not centred: the copy column runs 589-1065px while the media is a fixed 481px, so centring left up to ~290px of dead space ABOVE and BELOW the figure. Top alignment puts the figure level with the H2 and collects the slack in one place. */ .svc-row{display:flex;gap:48px;align-items:flex-start} .svc-media{flex:0 1 718px;min-width:0;display:flex;flex-direction:column;gap:8px} .svc-copy{flex:1 1 380px;min-width:0} /* desktop zig-zag: media stays FIRST in the DOM, the row flips instead */ #kodulehed .svc-row,#seo .svc-row,#hooldus .svc-row{flex-direction:row-reverse} .svc-frame{position:relative;aspect-ratio:16/10;min-height:0;overflow:hidden} /* top-anchored: never crop the top edge of a client screenshot (Ingmar 2026-08-05) */ .svc-frame img.ct-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .svc-fig:hover,.svc-fig:focus-visible{text-decoration:underline} .svc-fig:focus-visible{outline:2px solid currentColor!important;outline-offset:2px} /* min(...) keeps the track from forcing a 340px column inside a 312px gutterless phone viewport (360px overflowed by 4px without it) */ .svc-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:26px 48px} @media (max-width:900px){ .svc-row,#kodulehed .svc-row,#seo .svc-row,#hooldus .svc-row{flex-direction:column;align-items:stretch;gap:26px} .svc-media{flex:1 1 auto} .svc-fig{display:inline-block;padding:6px 0} } /* Caption links must be visibly links at rest, not only on hover - they are the ONLY route to 5 of the 6 portfolio filters, and at rest they were pixel-identical to the "16:10" span next to them (round-F finding F3). Same standard the blog body links adopted in round r1. */ .svc-fig{text-decoration:underline;text-underline-offset:2px}