@charset "UTF-8"; /* =========================================================================== Transinterior — sadulsepatööd Palette measured off the client's own assets: --ink #1E073A wordmark violet-black (logo-purple-web.png) --hide #9B5F30 the debossed leather stamp (image-3.jpg) --thread#C2702C the orange contrast topstitch (Corvette C3, Risto's spool) --char #16171B Corvette dash / Mercedes trim No bordered boxes anywhere (RULES.md W30): panels separate by ground tone, lists by alignment and space, tables by column rhythm — never by an outline. =========================================================================== */ /* --- font ---------------------------------------------------------------- */ /* Archivo variable: one file carries wdth 62–125 and wght 300–700, latin-ext. */ /* Kirjatüüp on ise majutatud ja @font-face on -s — vt partials/fonts.php. Siin oli @import Google Fontsile, mis blokeeris selle faili enda parsimise kolmanda osapoole vastuse taga. */ /* --- tokens -------------------------------------------------------------- */ :root { --ink: #1E073A; --ink-soft: #2C1350; --hide: #9B5F30; --hide-lit: #B87740; --thread: #C2702C; --char: #16171B; --char-2: #1E2026; --char-3: #2A2D34; --bone: #F2EDE6; --bone-2: #E6DED2; --paper: #FBF9F6; --on-dark: #EFEAE3; --on-dark-mu: #A49C92; --on-light: #211C17; --on-light-mu:#6B6259; --font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif; --gut: clamp(1.15rem, 4vw, 3.5rem); --beat: clamp(3.75rem, 8vw, 7.5rem); /* Raised panels do the work borders used to: a card or a field reads as one because its ground differs, not because a hairline encloses it. */ --tosta-tume: #1E2026; --tosta-luu: #EAE3D9; --ease: cubic-bezier(.22, .61, .36, 1); } /* --- reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--on-light); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; font-variation-settings: 'wdth' 100; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; } /* --- type ---------------------------------------------------------------- */ /* Headings echo the wordmark: wide, light, letterspaced capitals. */ h1, h2, h3, .ekspand { font-variation-settings: 'wdth' 118; font-weight: 400; line-height: 1.05; letter-spacing: .01em; } h1 { font-size: clamp(2.3rem, 6.2vw, 4.6rem); font-weight: 300; letter-spacing: -.005em; text-transform: uppercase; } h2 { font-size: clamp(1.65rem, 3.6vw, 2.8rem); font-weight: 300; text-transform: uppercase; } h3 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 500; font-variation-settings: 'wdth' 108; } .silt { font-size: .7rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; font-variation-settings: 'wdth' 96; } .num { font-variant-numeric: tabular-nums; } /* --- layout -------------------------------------------------------------- The content column is 75% of the viewport on desktop, centred. Below that it goes edge-to-edge with gutters, because 75% of a phone is a trench. */ .riba { width: 75%; margin-inline: auto; padding-inline: 0; } @media (max-width: 68rem) { .riba { width: auto; padding-inline: var(--gut); } } .taust-tume { background: var(--char); color: var(--on-dark); } .taust-luu { background: var(--bone); color: var(--on-light); } /* Anything an in-page link jumps to clears the sticky header, or the heading lands underneath it and the visitor sees the section already begun. */ [id] { scroll-margin-top: 6.25rem; } main { flex: 1 0 auto; } /* Reveal transforms translate and scale outwards; clip contains them so they never create horizontal page scroll. `clip` rather than `hidden`: it makes no scroll container, so sticky positioning inside still works. */ main, main > section { overflow-x: clip; } .vahelejata { position: absolute; left: -9999px; top: 0; } .vahelejata:focus { left: .6rem; top: .6rem; z-index: 100; padding: .7rem 1.1rem; background: var(--thread); color: #fff; } /* --- buttons ------------------------------------------------------------- */ .nupp { display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.6rem; background: var(--hide); color: #fff; text-decoration: none; font-size: .93rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-variation-settings: 'wdth' 98; border: 0; cursor: pointer; position: relative; max-width: 100%; transition: background .25s var(--ease), transform .25s var(--ease); } .nupp:hover { background: var(--hide-lit); transform: translateY(-2px); } .nupp .ikoon { width: 1.05em; height: 1.05em; } /* The quiet action carries itself on colour, not on a rule beneath it. */ .nupp--vaikne { background: none; color: var(--hide-lit); padding-inline: 0; } .nupp--vaikne:hover { background: none; transform: none; color: var(--thread); } /* --- header -------------------------------------------------------------- */ /* No backdrop-filter: on a sticky header it creates a containing block that traps the mobile drawer (RULES.md W23, known-issues). Solid ground instead. */ .pais { position: sticky; top: 0; z-index: 60; background: var(--char); color: var(--on-dark); transition: padding .3s var(--ease); } .pais__sisu { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; transition: padding-block .3s var(--ease); } .pais.on-kokku .pais__sisu { padding-block: .8rem; } .margis { display: block; flex-shrink: 0; } .margis img { width: clamp(9.5rem, 17vw, 13.5rem); /* The wordmark ships as violet-black artwork; invert it onto the dark bar. */ filter: invert(1) brightness(1.85); transition: width .3s var(--ease); } .pais.on-kokku .margis img { width: clamp(8.5rem, 13vw, 11rem); } .pais__nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.3vw, 2.3rem); } .pais__nav a { position: relative; padding-block: .45rem; font-size: .95rem; text-decoration: none; white-space: nowrap; } /* Hover is a colour shift, not a line. */ .pais__nav a { transition: color .25s var(--ease); } .pais__nav a:hover, .pais__nav a:focus-visible, .pais__nav a[aria-current="page"] { color: var(--hide-lit); } .pais__parem { display: flex; align-items: center; gap: 1.15rem; } /* A button never wraps: between 993px and ~1150px the label broke onto two lines and pushed the header to 109px. */ .pais .nupp { padding: .7rem 1.25rem; font-size: .82rem; white-space: nowrap; } /* Facebook / Instagram beside the Kontakt button — a compact vertical pair. Bare glyphs with a colour-shift hover, matching the nav's restraint. The mobile drawer carries the same links below 62rem, where this is hidden. */ .pais__sots { display: flex; flex-direction: column; gap: .45rem; } .pais__sots a { display: inline-flex; color: inherit; transition: color .25s var(--ease); } .pais__sots a:hover, .pais__sots a:focus-visible { color: var(--hide-lit); } .pais__sots .ikoon { width: 1rem; height: 1rem; } /* Drawer toggle — an anchor so :target opens the drawer with JS off. */ .lyliti { display: none; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; margin-right: -.6rem; background: var(--tosta-tume); color: inherit; text-decoration: none; } .lyliti .ikoon { width: 1.4rem; height: 1.4rem; } /* --- mobile drawer ------------------------------------------------------- */ .sahtel { position: fixed; inset: 0; z-index: 70; display: none; flex-direction: column; gap: .35rem; padding: clamp(1.15rem, 4vw, 2rem); background: var(--char); color: var(--on-dark); overflow-y: auto; } /* No-JS path: :target opens it. JS path: .on-lahti opens it. */ .sahtel:target, .sahtel.on-lahti { display: flex; } .sahtel__yla { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.4rem; } .sahtel__yla img { width: 11rem; filter: invert(1) brightness(1.85); } /* display:block is load-bearing: as inline elements the links ran together on one line and padding-block/border-bottom silently did nothing. */ .sahtel nav { display: flex; flex-direction: column; } .sahtel a.sahtel__link { display: block; padding-block: .95rem; font-size: 1.45rem; font-variation-settings: 'wdth' 114; font-weight: 300; text-transform: uppercase; text-decoration: none; } .sahtel a.sahtel__link:hover { color: var(--hide-lit); } .sahtel__jalus { margin-top: auto; padding-top: 1.9rem; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; } .sahtel__jalus a { text-decoration: none; } @media (max-width: 62rem) { .pais__nav { display: none; } .lyliti { display: inline-flex; } .pais__sots { display: none; } /* The primary action stays on mobile (W13) — it just gets compact. Without nowrap it broke onto two lines and crowded the toggle. */ .pais .nupp { padding: .62rem .9rem; font-size: .72rem; letter-spacing: .03em; white-space: nowrap; } .pais__parem { gap: .6rem; } .margis img { width: clamp(7.5rem, 34vw, 10rem); } } /* ========================================================================= HERO — a photographic plate over the job docket. ========================================================================= */ .plaat { position: relative; /* Generous viewport-relative height so landscape craftsmanship is shown in full context without aggressive vertical cropping */ min-height: clamp(25rem, 65vh, 44rem); background: var(--char-2); overflow: hidden; } .plaat__slaidid { position: absolute; inset: 0; } .plaat__slaid { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s cubic-bezier(.4, 0, .2, 1), visibility .8s ease; z-index: 1; } .plaat__slaid.on-aktiivne { opacity: 1; visibility: visible; z-index: 2; } .plaat__slaid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .plaat::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(22, 23, 27, .28) 0%, rgba(22, 23, 27, 0) 22%, rgba(22, 23, 27, 0) 65%, rgba(22, 23, 27, .68) 100% ); pointer-events: none; z-index: 3; } .plaat__silt { position: absolute; left: 0; bottom: 0; z-index: 4; width: 100%; pointer-events: none; } .plaat__silt .riba { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; padding-block: 1rem 1.15rem; padding-right: clamp(4.5rem, 8vw, 6.5rem); color: var(--on-dark); } .plaat__silt strong { font-weight: 600; } .plaat__silt span { color: var(--on-dark-mu); font-size: .88rem; } /* --- hero carousel dots with active progress bar ------------------------ */ .plaat__juhtimine { position: absolute; right: clamp(1.2rem, 3vw, 2.5rem); bottom: clamp(1rem, 2.5vw, 1.6rem); z-index: 10; display: flex; align-items: center; justify-content: center; padding: .25rem; } /* Flex column of minimalistic dots */ .plaat__nupud { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 2; } .plaat__nupp { display: flex; align-items: center; justify-content: center; width: 24px; min-height: 20px; padding: 2px 0; background: transparent; border: none; cursor: pointer; outline: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* The dot shell: 5px circle when inactive, 28px pill when active */ .plaat__nupp-kest { position: relative; display: block; width: 5px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .38); box-shadow: 0 0 0 1.5px rgba(22, 23, 27, .65); overflow: hidden; transition: height .32s cubic-bezier(.4, 0, .2, 1), background-color .25s ease, transform .25s ease; will-change: height; } .plaat__nupp:hover:not(.on-aktiivne) .plaat__nupp-kest { background: rgba(255, 255, 255, .85); transform: scale(1.25); } .plaat__nupp.on-aktiivne .plaat__nupp-kest { height: 28px; background: rgba(255, 255, 255, .25); transform: none; } /* The progressive timing bar running top-to-bottom inside the active dot */ .plaat__nupp-taide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; border-radius: 3px; transform-origin: top center; transform: scaleY(0); will-change: transform; } .plaat__nupp:focus-visible .plaat__nupp-kest { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px; } html:not(.js) .plaat__juhtimine { display: none; } /* --- the docket ---------------------------------------------------------- */ .tookaart { background: var(--char); color: var(--on-dark); } .tookaart__ruut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: start; padding-block: clamp(2.4rem, 5vw, 4rem) clamp(2.6rem, 5vw, 4.2rem); } /* Monochrome, always: a second hue inside a heading is the banned two-tone headline (RULES.md W29). Emphasis comes from size, weight and space. */ .tookaart h1 { font-size: clamp(2rem, 4.1vw, 3.35rem); max-width: 18ch; } .tookaart h1 span { display: block; } .tookaart__lugu { margin-top: 1.5rem; max-width: 46ch; color: var(--on-dark-mu); font-size: 1.02rem; } .tookaart__teod { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; } .vali { padding-top: .2rem; } .vali .silt { color: var(--on-dark-mu); display: block; margin-bottom: .7rem; } .vali address { font-style: normal; line-height: 1.75; } .vali ul { list-style: none; line-height: 1.85; } .vali a { text-decoration: none; } .vali a:hover { color: var(--hide-lit); } /* ========================================================================= BENCH ROWS — the four material worlds. Rows, not a card grid. ========================================================================= */ .pingid { padding-block: var(--beat); } .pingid__pea { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; margin-bottom: 2.6rem; } .pingid__pea p { max-width: 42ch; color: var(--on-light-mu); } .pink { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; padding-block: clamp(2.1rem, 4vw, 3.4rem); } /* nth-of-type, not nth-child: the section heading is also a child, so nth-child would silently flip the alternation if the header ever moves. */ .pink:nth-of-type(even) .pink__pilt { order: 2; } .pink__pilt { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bone-2); } .pink__pilt img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .pink:hover .pink__pilt img { transform: scale(1.035); } .pink__tekst p { margin-top: .85rem; max-width: 44ch; color: var(--on-light-mu); } /* The trades page runs several paragraphs per row, so it needs a wider measure and its own rhythm than the one-line rows on the front page. */ .pink--pikk { align-items: start; } .pink--pikk .pink__tekst p { max-width: 58ch; } .pink--pikk .pink__tekst h2 { margin-bottom: .3rem; } .pink--pikk .pink__pilt { position: sticky; top: 7rem; } @media (max-width: 48rem) { .pink--pikk .pink__pilt { position: static; } } .pink__jalg { margin-top: 1.5rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; } .pink__hind { font-size: 1.02rem; color: var(--on-light); } .pink__hind b { font-weight: 600; } .pink__link { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 600; font-size: .93rem; letter-spacing: .04em; text-transform: uppercase; color: var(--hide); } .pink__link .ikoon { width: 1em; height: 1em; transition: transform .3s var(--ease); } .pink__link:hover { color: var(--hide); } .pink__link:hover .ikoon { transform: translateX(4px); } /* ========================================================================= THE LEDGER — packages and the price list. ========================================================================= */ .hinnad { padding-block: var(--beat); } .hinnad__pea { margin-bottom: 2.8rem; max-width: 56ch; } .hinnad__pea p { margin-top: 1rem; color: var(--on-dark-mu); } /* -- the price ledger -- */ .hinnad__mark { margin-top: 1.5rem; font-size: .89rem; color: var(--on-dark-mu); max-width: 62ch; } /* Front page: full-size lead-in and a real button through to the price list, sitting under the package matrix. */ .hinnad__jatk { margin-top: clamp(2.2rem, 4vw, 3.2rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; max-width: 58ch; } /* ========================================================================= THE WORKSHOP ========================================================================= */ .tookoda { padding-block: var(--beat); } .tookoda__ruut { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: start; } .tookoda__suur img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .tookoda__pealkiri { margin-bottom: 1.4rem; } .tookoda__jutt { max-width: 54ch; color: var(--on-light-mu); } .tookoda__jutt + .tookoda__jutt { margin-top: 1rem; } .meister { margin-top: 2.2rem; display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem; align-items: start; } .meister img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 52% 28%; } .meister__nimi { margin-bottom: .15rem; } .meister__amet { color: var(--on-light-mu); font-size: .92rem; margin-bottom: .9rem; } .meister blockquote { font-size: 1.02rem; line-height: 1.62; padding-left: 0; color: var(--on-light); } .faktid { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1.6rem clamp(2rem, 5vw, 4.5rem); } .fakt { flex: 0 1 auto; max-width: 14rem; } .fakt b { display: block; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 400; font-variation-settings: 'wdth' 112; color: var(--hide); line-height: 1.15; } .fakt span { display: block; margin-top: .3rem; font-size: .87rem; color: var(--on-light-mu); } /* ========================================================================= PROJECTS ========================================================================= */ .tood { padding-block: var(--beat); } .tood__pea { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; margin-bottom: 2.4rem; } .too-ruut { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 2vw, 1.6rem); } .too { display: flex; flex-direction: column; } .too__pilt { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--char-2); margin-bottom: 1rem; } .too__pilt img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: transform .8s var(--ease), filter .5s var(--ease); } .too:hover .too__pilt img { transform: scale(1.04); filter: saturate(1); } .too h3 { margin-bottom: .4rem; } .too p { font-size: .95rem; color: var(--on-dark-mu); line-height: 1.55; } /* ========================================================================= TÖÖKÄSK — the contact beat, built as the job card itself. ========================================================================= */ .kask { padding-block: var(--beat); } .kask__ruut { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .kask__pea { margin-bottom: 1.9rem; } .kask__pea p { margin-top: .9rem; max-width: 46ch; color: var(--on-light-mu); } .vorm { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.35rem; } .vorm .laius-2 { grid-column: 1 / -1; } .vorm label { display: block; margin-bottom: .45rem; font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--on-light-mu); } .vorm input[type="text"], .vorm input[type="email"], .vorm input[type="tel"], .vorm select, .vorm textarea { width: 100%; padding: .8rem .95rem; background: #fff; border: 0; border-radius: 0; font-size: 1rem; transition: box-shadow .25s var(--ease); } .vorm input:focus, .vorm select:focus, .vorm textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--hide); } .vorm textarea { min-height: 7rem; resize: vertical; } .vorm .noustumine { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--on-light-mu); } .vorm .noustumine input { margin-top: .28rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--hide); } .vorm .noustumine label { margin: 0; font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; cursor: pointer; } /* Its own target, away from the label — see the note in kontakt.php. */ .noustumine__link { margin-left: auto; flex-shrink: 0; font-size: .88rem; color: var(--hide); white-space: nowrap; } .noustumine__link:hover { color: var(--thread); } /* Honeypot — hidden from people, visible to bots. */ .aas { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .teade { grid-column: 1 / -1; padding: 1rem 1.2rem; background: var(--tosta-luu); font-size: .95rem; } .teade--viga { background: #F3DED8; color: #6E2114; } .teade ul { margin: .4rem 0 0 1.1rem; } .kask__kaart { padding: clamp(1.5rem, 3vw, 2.2rem); background: var(--char); color: var(--on-dark); } .kask__kaart .vali + .vali { margin-top: 1.5rem; } .kask__kaart .nupp { margin-top: 1.6rem; } .kask__tempel { margin-top: 1.8rem; aspect-ratio: 16 / 10; overflow: hidden; } .kask__tempel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; } /* ========================================================================= FOOTER — the ledger, adapted. ========================================================================= */ .jalus { flex-shrink: 0; background: var(--char); color: var(--on-dark); } .jalus__ruut { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: clamp(1.8rem, 4vw, 3.6rem); padding-block: clamp(2.6rem, 5vw, 4rem); } .jalus__margis img { width: 12.5rem; filter: invert(1) brightness(1.85); margin-bottom: 1.1rem; } .jalus__rida { max-width: 32ch; color: var(--on-dark-mu); font-size: .95rem; } .jalus h2 { font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; font-variation-settings: 'wdth' 96; color: var(--on-dark-mu); margin-bottom: 1.05rem; } .jalus ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; } .jalus a { text-decoration: none; } .jalus a:hover { color: var(--hide-lit); } .jalus address { font-style: normal; line-height: 1.8; margin-bottom: .9rem; } .jalus__tel { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-variation-settings: 'wdth' 110; text-decoration: none; } .jalus__tel .ikoon { width: 1.05rem; height: 1.05rem; color: var(--hide-lit); } .jalus__epost { display: inline-flex; align-items: center; gap: .5rem; margin-top: .55rem; font-size: .97rem; } .jalus__epost .ikoon { width: 1.05rem; height: 1.05rem; color: var(--hide-lit); } .jalus__seadus { background: #121317; } .jalus__seadus .riba { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; align-items: center; padding-block: 1.15rem; font-size: .84rem; color: var(--on-dark-mu); } /* ========================================================================= HERO PANEL — the shop's coordinates and the full index of the trade. A raised ground, not an outlined box (RULES.md W30). ========================================================================= */ .tookaart__paneel { background: var(--tosta-tume); padding: clamp(1.5rem, 2.6vw, 2.3rem) clamp(1.5rem, 2.6vw, 2.5rem); display: grid; gap: clamp(1.6rem, 2.6vw, 2.2rem); } .tookaart__paneel .silt { color: var(--hide-lit); display: block; margin-bottom: .9rem; } .vali--tookoda address { font-style: normal; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; margin-bottom: 1.1rem; } .suur-tel, .suur-epost { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; transition: color .25s var(--ease); } .suur-tel { font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-variation-settings: 'wdth' 112; font-weight: 400; } .suur-epost { font-size: 1rem; margin-top: .5rem; color: var(--on-dark-mu); } .suur-tel .ikoon { width: 1.15rem; height: 1.15rem; color: var(--hide-lit); } .suur-epost .ikoon { width: 1rem; height: 1rem; color: var(--hide-lit); } .suur-tel:hover, .suur-epost:hover { color: var(--hide-lit); } /* The full trade index — real services, not four category words. */ .katame { list-style: none; columns: 2; column-gap: clamp(1.2rem, 2.4vw, 2.4rem); } .katame li { break-inside: avoid; margin-bottom: .62rem; } .katame a { display: block; font-size: 1.02rem; line-height: 1.35; text-decoration: none; transition: color .2s var(--ease), transform .2s var(--ease); } .katame a:hover { color: var(--hide-lit); transform: translateX(3px); } @media (max-width: 30rem) { .katame { columns: 1; } } /* ========================================================================= PRICE MATRIX — the package ladder as a coverage table. Each package contains the one before it, so the marks accumulate to the right and the reader sees exactly what the step up buys. ========================================================================= */ .maatriks-kate { overflow-x: auto; margin-bottom: clamp(3rem, 6vw, 4.5rem); -webkit-overflow-scrolling: touch; } .maatriks { width: 100%; min-width: 34rem; border-collapse: collapse; text-align: left; } .maatriks th, .maatriks td { padding: .95rem 1rem; vertical-align: middle; } .maatriks thead th { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: 'wdth' 96; color: var(--on-dark-mu); padding-bottom: 1.1rem; } .maatriks thead th:first-child { width: 42%; } .maatriks thead th:not(:first-child) { text-align: center; width: 19.3%; } .maatriks tbody th { font-weight: 400; font-size: 1rem; font-variation-settings: 'wdth' 100; text-transform: none; letter-spacing: 0; } .maatriks tbody tr:nth-of-type(odd) { background: var(--tosta-tume); } .maatriks tbody tr:hover { background: #262931; } .maatriks td { text-align: center; } /* A filled mark is "included"; a short dash is not. No outlines involved. */ .mark { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; background: var(--hide); color: #fff; } .mark .ikoon { width: .95rem; height: .95rem; stroke-width: 2.4; } .mark--tyhi { background: none; } .mark--tyhi::before { content: ''; width: .5rem; height: 2px; background: var(--char-3); } .maatriks tfoot th, .maatriks tfoot td { padding-top: 1.3rem; } .maatriks tfoot .hind-rida td { text-align: center; } .maatriks tfoot .hind-rida b { display: block; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 400; font-variation-settings: 'wdth' 112; color: var(--hide-lit); line-height: 1.15; } .maatriks tfoot .hind-rida s { display: block; margin-top: .3rem; font-size: .82rem; color: var(--on-dark-mu); } .maatriks tfoot th { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: 'wdth' 96; color: var(--on-dark-mu); font-weight: 600; } /* ========================================================================= PRICE TABLES — individual jobs, grouped. Column rhythm carries it. ========================================================================= */ .hinnaruhm + .hinnaruhm { margin-top: clamp(2.2rem, 4vw, 3.2rem); } .hinnaruhm h3 { margin-bottom: 1rem; } .hinnatabel { width: 100%; border-collapse: collapse; text-align: left; } .hinnatabel th, .hinnatabel td { padding: .95rem 1rem; } .hinnatabel tbody tr { transition: background .2s var(--ease); } .hinnatabel tbody tr:nth-of-type(odd) { background: var(--tosta-tume); } .hinnatabel tbody tr:hover { background: #262931; } .hinnatabel .too-nimi { font-weight: 400; font-size: 1.02rem; font-variation-settings: 'wdth' 100; text-transform: none; letter-spacing: 0; } .hinnatabel .hind-alates { text-align: right; white-space: nowrap; font-size: 1.1rem; font-variation-settings: 'wdth' 108; color: var(--hide-lit); } .hinnatabel .hind-netto { text-align: right; white-space: nowrap; font-size: .84rem; color: var(--on-dark-mu); width: 9rem; } /* Light-ground variant, used on the service pages. */ .taust-luu .maatriks tbody tr:nth-of-type(odd), .taust-luu .hinnatabel tbody tr:nth-of-type(odd) { background: var(--tosta-luu); } .taust-luu .maatriks tbody tr:hover, .taust-luu .hinnatabel tbody tr:hover { background: #E0D7C9; } .taust-luu .hinnatabel .hind-alates { color: var(--hide); } .taust-luu .hinnatabel .hind-netto, .taust-luu .maatriks thead th { color: var(--on-light-mu); } @media (max-width: 40rem) { .hinnatabel .hind-netto { display: none; } .hinnatabel th, .hinnatabel td { padding: .85rem .8rem; } } /* ========================================================================= SUB-PAGE HEADER ========================================================================= */ .lehepais { background: var(--char); color: var(--on-dark); } /* One header height on every page, whatever the photo's native ratio is — and whether or not the page has one at all. The image box is pinned to a set height rather than an aspect ratio, and the row carries the same value as a min-height so an image-less page (hinnakiri, privaatsus) matches the rest. */ :root { --pais-korgus: clamp(15rem, 24vw, 21.5rem); } .lehepais__ruut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; padding-block: clamp(2.6rem, 5vw, 4.4rem); min-height: calc(var(--pais-korgus) + 2 * clamp(2.6rem, 5vw, 4.4rem)); } /* No photo on this page: the text takes the full width rather than leaving a hole where the image would be. The height stays the same. The class is set in page.php rather than relying on :has(), so it does not depend on selector support. */ .lehepais__ruut--pildita { grid-template-columns: minmax(0, 1fr); } .lehepais h1 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); max-width: 16ch; } .lehepais__lead { margin-top: 1.2rem; max-width: 46ch; font-size: 1.06rem; color: var(--on-dark-mu); } .lehepais__pilt { height: var(--pais-korgus); overflow: hidden; } .lehepais__pilt img { width: 100%; height: 100%; object-fit: cover; } .tee { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.4rem; font-size: .84rem; color: var(--on-dark-mu); } .tee a { text-decoration: none; } .tee a:hover { color: var(--hide-lit); } .tee .ikoon { width: .85rem; height: .85rem; opacity: .55; } /* --- article body -------------------------------------------------------- */ .sisu { padding-block: var(--beat); } .sisu__ruut { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .jutt p { max-width: 62ch; font-size: 1.06rem; } .jutt p + p { margin-top: 1.1rem; } .jutt h2 { margin-bottom: 1.2rem; } .jutt h3 { margin: 2.2rem 0 .9rem; } .korval { background: var(--tosta-luu); padding: clamp(1.4rem, 2.4vw, 2rem); } .korval .silt { display: block; color: var(--hide); margin-bottom: 1rem; } .korval ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; } /* An email address is one unbreakable token; without this it pushes the sidebar past the viewport on a narrow phone. */ .korval li, .korval a { overflow-wrap: anywhere; } .korval a { text-decoration: none; } .korval a:hover { color: var(--hide); } .korval .nupp { margin-top: 1.3rem; } .taust-tume .korval { background: var(--tosta-tume); } .taust-tume .korval .silt { color: var(--hide-lit); } /* ========================================================================= PAGE TRANSITIONS Cross-document view transitions: no JavaScript, and a browser without support simply navigates normally. The header and footer are named, so they hold still while the page body crossfades and lifts under them. ========================================================================= */ @view-transition { navigation: auto; } @keyframes ti-lahku { to { opacity: 0; transform: translateY(-8px); } } @keyframes ti-saabu { from { opacity: 0; transform: translateY(14px); } } ::view-transition-old(root) { animation: ti-lahku .22s var(--ease) both; } ::view-transition-new(root) { animation: ti-saabu .38s var(--ease) both; } /* Chrome/Edge give these a default cross-fade; naming them keeps the chrome visually anchored instead of dissolving with everything else. */ .pais { view-transition-name: ti-pais; } .jalus { view-transition-name: ti-jalus; } ::view-transition-group(ti-pais), ::view-transition-group(ti-jalus) { animation-duration: .22s; } /* Where cross-document transitions are not supported, the arriving page still settles in. `backwards`, never `forwards` — the resting style is visible, so a browser that skips the animation shows the content, not a blank page. */ @supports not (view-transition-name: none) { @media (prefers-reduced-motion: no-preference) { main { animation: ti-saabu .42s var(--ease) backwards; } } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(ti-pais), ::view-transition-group(ti-jalus) { animation: none; } main { animation: none; } } /* ========================================================================= REVEALS — varied by role, never one fade for everything. ========================================================================= */ html.js .ilmu:not(.on-nahtav) { opacity: 0; transform: translateY(26px); } html.js .ilmu--vasak:not(.on-nahtav) { opacity: 0; transform: translateX(-34px); } html.js .ilmu--parem:not(.on-nahtav) { opacity: 0; transform: translateX(34px); } html.js .ilmu--suum:not(.on-nahtav) { opacity: 0; transform: scale(1.05); } html.js .ilmu--tosta:not(.on-nahtav) { opacity: 0; transform: translateY(46px) scale(.985); } .ilmu { transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; } .on-nahtav { will-change: auto; } /* Rows arrive in sequence; the per-row delay is set inline. */ html.js .ilmu--rida:not(.on-nahtav) { opacity: 0; transform: translateY(14px); } .ilmu--rida { transition-duration: .55s; } /* ========================================================================= E-POOD — catalogue, product, cart, checkout. No outlines anywhere (W30): cards sit on a raised ground, tables carry their own column rhythm, the cart summary is a filled panel. ========================================================================= */ .pood, .toode, .korv, .kassa { padding-block: var(--beat); } /* Placeholder notice — honest about what this catalogue is. */ .naidis { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.2rem; margin-bottom: 2rem; background: var(--tosta-luu); font-size: .95rem; line-height: 1.55; max-width: 68ch; } .naidis .ikoon { width: 1.2rem; height: 1.2rem; color: var(--hide); flex-shrink: 0; margin-top: .15rem; } .taust-tume .naidis { background: var(--tosta-tume); } /* --- shop layout: filters left, products right --- */ .pood__paigutus { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: clamp(1.6rem, 3.2vw, 3rem); align-items: start; } /* --- left sidebar --- */ .pood__kylg { position: sticky; top: 7rem; display: grid; gap: 1.7rem; } .kylg__plokk .silt { display: block; color: var(--hide); margin-bottom: .9rem; } .kylg__kat { list-style: none; display: flex; flex-direction: column; gap: .15rem; } .kylg__kat a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .62rem .8rem; text-decoration: none; font-size: .98rem; transition: background .2s var(--ease), color .2s var(--ease); } .kylg__kat a:hover { background: var(--tosta-luu); } .kylg__kat a[aria-current="true"] { background: var(--hide); color: #fff; } .kylg__arv { font-size: .84rem; opacity: .75; } .kylg__hind { display: flex; gap: .7rem; margin-bottom: 1rem; } .kylg__hind span { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 0; min-width: 0; } .kylg__hind label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-light-mu); } .kylg__hind input { width: 100%; padding: .6rem .7rem; background: #fff; border: 0; font-size: .98rem; } .kylg__lipp { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.2rem; font-size: .96rem; cursor: pointer; } .kylg__lipp input { width: 1.15rem; height: 1.15rem; accent-color: var(--hide); flex-shrink: 0; } .kylg__lahtesta { font-size: .92rem; } .kylg__abi { background: var(--tosta-luu); padding: 1.15rem 1.25rem; font-size: .92rem; } .kylg__abi p + p { margin-top: .55rem; } /* --- toolbar above the products --- */ .pood__riist { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; margin-bottom: 1.6rem; } .pood__loend { font-size: .92rem; color: var(--on-light-mu); } .pood__seaded { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; } .vaade { display: inline-flex; gap: .3rem; } .vaade a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--tosta-luu); color: var(--on-light-mu); transition: background .2s var(--ease), color .2s var(--ease); } .vaade a:hover { background: #DED4C5; color: var(--on-light); } .vaade a[aria-current="true"] { background: var(--hide); color: #fff; } .vaade .ikoon { width: 1.05rem; height: 1.05rem; } .pood__sort { display: flex; align-items: center; gap: .5rem; } .pood__sort label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-light-mu); } .pood__sort select { padding: .58rem .75rem; background: #fff; border: 0; font-size: .94rem; } .pood__tyhi { padding-block: 2rem; } /* --- list view --- */ .pood__nimekiri { display: flex; flex-direction: column; gap: 1rem; } /* .kaup.kaup--rida, not .kaup--rida: the base `.kaup { display: flex }` is defined later in this file and would otherwise win on source order (W27). */ .kaup.kaup--rida { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: center; background: var(--tosta-luu); padding: 1rem; } .kaup.kaup--rida .kaup__pilt { margin-bottom: 0; aspect-ratio: 4 / 3; } .kaup.kaup--rida .kaup__lyhi { max-width: 62ch; } .kaup.kaup--rida .kaup__hind { margin-top: 0; } .kaup.kaup--rida .nupp--taies { width: auto; } /* --- pagination --- */ .lehed { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; margin-top: clamp(2.2rem, 4vw, 3.2rem); } .lehed__nrid { display: inline-flex; flex-wrap: wrap; gap: .35rem; } .lehed__nr, .lehed__nool { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; padding-inline: .8rem; background: var(--tosta-luu); color: var(--on-light); text-decoration: none; font-size: .95rem; transition: background .2s var(--ease), color .2s var(--ease); } .lehed__nr:hover, a.lehed__nool:hover { background: #DED4C5; } .lehed__nr[aria-current="page"] { background: var(--hide); color: #fff; } .lehed__nool--kinni { opacity: .4; } /* --- product grid --- */ .pood__ruut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.1rem, 2.2vw, 2rem); } .kaup { display: flex; flex-direction: column; } .kaup__pilt { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tosta-luu); margin-bottom: .95rem; } .kaup__pilt img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .kaup:hover .kaup__pilt img { transform: scale(1.045); } .kaup__soodus { position: absolute; top: .7rem; left: .7rem; padding: .3rem .65rem; background: var(--hide); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .kaup__nimi { font-size: 1.05rem; font-weight: 500; font-variation-settings: 'wdth' 104; text-transform: none; letter-spacing: 0; line-height: 1.3; margin-bottom: .35rem; } .kaup__nimi a { text-decoration: none; } .kaup__nimi a:hover { color: var(--hide); } .kaup__lyhi { font-size: .92rem; line-height: 1.5; color: var(--on-light-mu); margin-bottom: .8rem; } .kaup__hind { display: flex; align-items: baseline; gap: .55rem; margin-bottom: 1rem; margin-top: auto; } .kaup__hind b { font-size: 1.2rem; font-weight: 500; font-variation-settings: 'wdth' 108; color: var(--hide); } .kaup__hind s { font-size: .9rem; color: var(--on-light-mu); } .nupp--taies { width: 100%; justify-content: center; } /* --- single product --- */ .toode__ruut { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start; margin-bottom: clamp(2.4rem, 5vw, 4rem); } .toode__pilt { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tosta-luu); } .toode__pilt img { width: 100%; height: 100%; object-fit: cover; } .toode__info h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: .9rem; } .toode__hind { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.1rem; } .toode__hind b { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 400; font-variation-settings: 'wdth' 112; color: var(--hide); } .toode__hind s { font-size: 1.05rem; color: var(--on-light-mu); } .toode__lyhi { max-width: 46ch; margin-bottom: 1.6rem; } .toode__vorm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 2rem; } .toode__valik { display: flex; flex-direction: column; gap: .4rem; } .toode__valik label { font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--on-light-mu); } .toode__valik select, .toode__valik input { padding: .8rem .95rem; background: #fff; border: 0; font-size: 1rem; min-width: 7rem; } .toode__valik input { width: 6rem; } .toode__vorm .nupp { flex: 1 1 12rem; justify-content: center; } .toode__meta { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.4rem; font-size: .95rem; } .toode__meta dt { color: var(--on-light-mu); } .toode__kirjeldus { max-width: 68ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); } .toode__kirjeldus h2 { margin-bottom: 1rem; } .toode__kirjeldus p + p { margin-top: 1rem; } .toode__seotud h2 { margin-bottom: 1.4rem; } .toode__seotud .pood__ruut { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* --- cart --- */ .korv h1, .kassa h1 { margin-bottom: 1.6rem; } .korv__tyhi { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; padding-block: 1.5rem; } .korv__ruut { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .68fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; } .korvtabel { width: 100%; border-collapse: collapse; text-align: left; } .korvtabel th, .korvtabel td { padding: 1rem .8rem; vertical-align: middle; } .korvtabel thead th { font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--on-light-mu); } .korvtabel tbody tr:nth-of-type(odd) { background: var(--tosta-luu); } .korv__toode { display: flex; align-items: center; gap: 1rem; font-weight: 400; } .korv__pilt { flex-shrink: 0; width: 4.5rem; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bone-2); } .korv__pilt img { width: 100%; height: 100%; object-fit: cover; } .korv__toode a { text-decoration: none; } .korv__toode a:hover { color: var(--hide); } .korv__toode small { display: block; margin-top: .2rem; font-size: .85rem; color: var(--on-light-mu); } .korv__kogus { width: 4.5rem; padding: .55rem .6rem; background: #fff; border: 0; font-size: 1rem; text-align: center; } .korv__summa { font-weight: 500; } .korv__eemalda { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: none; border: 0; color: var(--on-light-mu); cursor: pointer; transition: color .2s var(--ease); } .korv__eemalda:hover { color: #A6321F; } .korv__eemalda .ikoon { width: 1.1rem; height: 1.1rem; } .korv__teod { display: flex; flex-wrap: wrap; gap: 1.4rem 1.8rem; margin-top: 1.6rem; } .korv__kokku { background: var(--tosta-luu); padding: clamp(1.3rem, 2.4vw, 1.9rem); } .korv__kokku h2 { font-size: 1.1rem; margin-bottom: 1.1rem; } .korv__kokku dl { display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; font-size: .98rem; } .korv__kokku dt { color: var(--on-light-mu); } .korv__kokku dd { text-align: right; } .korv__summa-suur { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.1rem 0 1.4rem; } .korv__summa-suur b { font-size: 1.45rem; font-weight: 500; font-variation-settings: 'wdth' 110; color: var(--hide); } .korv__vihje { margin-top: .9rem; font-size: .88rem; color: var(--on-light-mu); } /* --- checkout --- */ .kassa__ruut { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr); gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; } .kassa__vorm h2 { font-size: 1.25rem; margin-bottom: 1.2rem; } .makse { display: flex; flex-direction: column; gap: .6rem; } .makse__valik { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.2rem; background: var(--tosta-luu); cursor: pointer; transition: background .2s var(--ease); } .makse__valik:hover { background: #DED4C5; } .makse__valik input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--hide); flex-shrink: 0; } .makse__valik b { display: block; font-weight: 600; } .makse__valik small { display: block; margin-top: .25rem; font-size: .88rem; color: var(--on-light-mu); line-height: 1.5; } .kassa__kokku { background: var(--tosta-luu); padding: clamp(1.3rem, 2.4vw, 1.9rem); } .kassa__kokku h2 { font-size: 1.1rem; margin-bottom: 1.1rem; } .kassa__read { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.2rem; } .kassa__read li { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; } .kassa__read small { display: block; font-size: .85rem; color: var(--on-light-mu); } .kassa__kokku dl { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; font-size: .96rem; } .kassa__kokku dt { color: var(--on-light-mu); } .kassa__kokku dd { text-align: right; } /* --- order received --- */ .tellimus__lead { max-width: 54ch; margin: 1rem 0 1.8rem; font-size: 1.06rem; } .tellimus__kaart { background: var(--tosta-luu); padding: clamp(1.3rem, 2.6vw, 2rem); max-width: 46rem; } .tellimus__pea { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.6rem; margin-bottom: 1.6rem; font-size: .98rem; } .tellimus__pea dt { color: var(--on-light-mu); } .tellimus__kaart .hinnatabel tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.5); } .tellimus__kaart .hinnatabel .hind-alates { color: var(--hide); } /* --- header cart link --- */ .korvlink { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; color: inherit; text-decoration: none; transition: color .2s var(--ease); } .korvlink:hover { color: var(--hide-lit); } .korvlink .ikoon { width: 1.35rem; height: 1.35rem; } .korvlink__arv { position: absolute; top: .1rem; right: 0; min-width: 1.15rem; height: 1.15rem; padding-inline: .25rem; display: inline-flex; align-items: center; justify-content: center; background: var(--hide); color: #fff; font-size: .7rem; font-weight: 600; border-radius: 999px; } /* --- social links --- */ .sotsiaal { display: inline-flex; gap: .5rem; margin-top: 1.4rem; } .sotsiaal a { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; background: var(--tosta-tume); color: inherit; transition: background .2s var(--ease), color .2s var(--ease); } .sotsiaal a:hover { background: var(--hide); color: #fff; } .sotsiaal .ikoon { width: 1.15rem; height: 1.15rem; } .jalus__seadus-lingid { display: inline-flex; flex-wrap: wrap; gap: .6rem 1.4rem; } /* ========================================================================= LIISI JÄRELMAKS — compact info ribbon (rebuilt). Ground-tone ribbon: sleek horizontal layout on desktop, no giant dead space. ========================================================================= */ .liisi-riba { background: var(--char); color: var(--on-dark); padding-block: 1.15rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, .07); } .liisi-riba.taust-luu { background: var(--tosta-luu); color: var(--on-light); border-top: 1px solid rgba(0, 0, 0, .07); } .liisi-riba__sisu { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2.2rem; flex-wrap: wrap; } .liisi-riba__margid { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; } .liisi-riba__logo { width: auto; height: 1.55rem; object-fit: contain; } .liisi-riba__eraldi { width: 1px; height: 1.15rem; background: rgba(255, 255, 255, .2); } .liisi-riba.taust-luu .liisi-riba__eraldi { background: rgba(0, 0, 0, .15); } .liisi-riba__holm { display: inline-flex; align-items: center; opacity: .9; transition: opacity .2s var(--ease); } .liisi-riba__holm:hover { opacity: 1; } .liisi-riba__holm img { width: 4.2rem; height: auto; } .liisi-riba__tekst { flex: 1 1 20rem; font-size: .92rem; line-height: 1.45; } .liisi-riba__tekst strong { display: block; font-size: .95rem; font-weight: 600; color: var(--on-dark); margin-bottom: .15rem; } .liisi-riba.taust-luu .liisi-riba__tekst strong { color: var(--on-light); } .liisi-riba__tekst p { color: var(--on-dark-mu); margin: 0; } .liisi-riba.taust-luu .liisi-riba__tekst p { color: var(--on-light-mu); } .liisi-riba__tekst b { color: var(--hide-lit); font-weight: 500; } .liisi-riba.taust-luu .liisi-riba__tekst b { color: var(--hide); } .liisi-riba__tegu { flex-shrink: 0; } .nupp--vaike { padding: .48rem .95rem; font-size: .78rem; letter-spacing: .04em; min-height: 38px; } @media (max-width: 48rem) { .liisi-riba { padding-block: 1.25rem 1.4rem; } .liisi-riba__sisu { flex-direction: column; align-items: flex-start; gap: .85rem; } .liisi-riba__tegu { margin-top: .2rem; width: 100%; } .liisi-riba__tegu .nupp { width: 100%; justify-content: center; } } /* ========================================================================= SHOP RESPONSIVE ========================================================================= */ @media (max-width: 68rem) { .pood__paigutus { grid-template-columns: 1fr; } .pood__kylg { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kylg__abi { grid-column: 1 / -1; } .pood__ruut { grid-template-columns: repeat(3, minmax(0, 1fr)); } .toode__ruut, .korv__ruut, .kassa__ruut { grid-template-columns: 1fr; } .toode__seotud .pood__ruut{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 48rem) { .pood__ruut, .toode__seotud .pood__ruut { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pood__riist { flex-direction: column; align-items: stretch; } .pood__kylg { grid-template-columns: 1fr; } .kaup.kaup--rida { grid-template-columns: 1fr; } /* The cart becomes a stack of cards; the header row would be meaningless. */ .korvtabel thead { position: absolute; left: -9999px; } .korvtabel, .korvtabel tbody, .korvtabel tr, .korvtabel th, .korvtabel td { display: block; width: 100%; } .korvtabel tr { padding: 1rem; margin-bottom: .8rem; background: var(--tosta-luu); } .korvtabel tbody tr:nth-of-type(odd) { background: var(--tosta-luu); } .korvtabel td { padding: .35rem 0; } .korv__toode { padding: 0 0 .6rem; } .korvtabel td::before { content: attr(data-silt); display: inline-block; min-width: 5.5rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-light-mu); } } @media (max-width: 34rem) { .pood__ruut, .toode__seotud .pood__ruut { grid-template-columns: 1fr; } } /* ========================================================================= TOUCH ERGONOMICS — coarse pointers only, so desktop density is untouched. Every standalone control gets a 44px hit area; small-caps labels come up to 12px. Inline links inside prose are exempt (WCAG 2.5.8) and stay as they are. ========================================================================= */ @media (pointer: coarse), (max-width: 62rem) { /* The logo is a real link home — its box was 13px tall, the image's height. */ .margis { display: inline-flex; align-items: center; min-height: 44px; } /* Header action: 38px → 44px, and the label back over 12px. */ .pais .nupp { min-height: 44px; padding-block: .7rem; font-size: .78rem; } .lyliti { width: 44px; height: 44px; } /* Icon-only controls were 2.6rem (42px) — two pixels short of the floor. */ .korvlink, .sotsiaal a, .vaade a, .korv__eemalda { width: 44px; height: 44px; } /* Shop controls. 16px is the floor on the text-entry ones: below it iOS zooms the page in on focus. */ .pood__sort select, .kylg__hind input, .toode__valik select, .toode__valik input, .korv__kogus { min-height: 44px; font-size: 1rem; } /* Toolbar and sale-badge labels sat at ~11.3px. */ .pood__sort label, .kylg__hind label, .kaup__soodus { font-size: .78rem; } .lehed__nr, .lehed__nool { min-width: 44px; height: 44px; } .kylg__lipp { min-height: 44px; } .kylg__lipp input { width: 1.5rem; height: 1.5rem; } .kaup__nimi a, .kylg__lahtesta a, .kylg__abi a { display: inline-flex; align-items: center; min-height: 46px; /* 44 + rounding headroom inside the heading's line box */ } /* The phone number is the most-tapped thing on this site. */ .suur-tel, .suur-epost, .jalus__tel, .jalus__epost { min-height: 44px; align-items: center; } /* Standalone link lists: nav, trade index, sidebar, footer, breadcrumb. */ .katame a, .korval li a, .jalus ul a, .jalus__seadus a, .tee a, .pink__link { display: inline-flex; align-items: center; min-height: 44px; } /* Column headings in the footer and the price tables sat at ~11.5px. */ .jalus h2, .maatriks thead th, .maatriks tfoot th { font-size: .78rem; } .sahtel a.sahtel__link { padding-block: 1.05rem; } /* Small-caps labels were 11.2px; 12px is the floor. */ .silt { font-size: .76rem; } /* Form labels were 11.8px, and the checkbox was a 17px square. */ .vorm label { font-size: .82rem; } .vorm .noustumine { gap: .85rem; align-items: center; min-height: 44px; } /* The box itself is 26px; the linked label extends the real target across the whole 44px row, which is what a thumb actually hits. */ .vorm .noustumine input { width: 1.6rem; height: 1.6rem; margin-top: 0; } .vorm .noustumine label { display: flex; align-items: center; min-height: 44px; } .noustumine__link { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; } /* On a phone the row wraps: consent first, the link on its own line. */ .vorm .noustumine { flex-wrap: wrap; } .vorm .noustumine label { font-size: .95rem; } /* Buttons and fields comfortable under a thumb. */ .nupp { min-height: 48px; } .vorm input[type="text"], .vorm input[type="email"], .vorm input[type="tel"], .vorm select { min-height: 48px; } } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 68rem) { .tookaart__ruut { grid-template-columns: 1fr; } .sisu__ruut { grid-template-columns: 1fr; } .lehepais__ruut { grid-template-columns: 1fr; min-height: 0; } /* Stacked, the photo goes full width — bound its height or it eats the whole viewport on a tablet. Cover crops rather than letterboxes. */ .lehepais__pilt { height: clamp(10rem, 26vw, 16rem); } .too-ruut { grid-template-columns: repeat(2, 1fr); } .tookoda__ruut, .kask__ruut { grid-template-columns: 1fr; } .jalus__ruut { grid-template-columns: 1fr 1fr; } .jalus__margis { grid-column: 1 / -1; } } @media (max-width: 48rem) { .pink { grid-template-columns: 1fr; gap: 1.15rem; } /* Reset the source order swap: on one column the photo always leads. */ .pink:nth-of-type(even) .pink__pilt { order: 0; } .pink__pilt { aspect-ratio: 3 / 2; } .tookaart__ruut { grid-template-columns: 1fr; } .meister { grid-template-columns: 1fr; } .meister img { width: 9rem; } .vorm { grid-template-columns: 1fr; } .vorm .laius-2 { grid-column: auto; } } @media (max-width: 34rem) { .too-ruut { grid-template-columns: 1fr; } .jalus__ruut { grid-template-columns: 1fr; } } /* ========================================================================= REDUCED MOTION — the seed never depends on movement. ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html.js .ilmu:not(.on-nahtav) { opacity: 1; transform: none; } .pink:hover .pink__pilt img, .too:hover .too__pilt img { transform: none; } } @media print { .pais, .sahtel, .plaat::after { display: none; } body { background: #fff; color: #000; } } /* ========================================================================= SHOP, CART AND CHECKOUT — layout and controls ========================================================================= Added after the port. The demo shipped a server-rendered cart and a sidebar whose search input had no rules at all, so the field fell back to the browser default: a white box with a 1px border, in a design whose whole premise is that nothing is enclosed by a line. Everything below obeys the same three rules as the rest of the file: - No borders and no dashed rules. A panel reads as one because its GROUND differs, not because a hairline encloses it. - Form fields are filled, never outlined. Focus is an inset ring in cognac. - Figures are tabular, so columns of prices line up. Touch targets are 44px minimum wherever a finger has to hit them — the quantity stepper, the remove button, the payment rows. ========================================================================= */ :root { /* Height of the sticky header, so anything else that sticks can clear it. Measured from .pais__sisu: 1.35rem padding top and bottom around a 1.5rem brand row. Declared once here rather than guessed at each use site. */ --pais-h: 5.2rem; } /* --- search field --------------------------------------------------------- */ /* The icon sits inside the field rather than beside it, so the control reads as one object; the input carries the left padding that makes room for it. */ .kylg__otsi { position: relative; display: block; } .kylg__otsi .ikoon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; color: var(--on-light-mu); pointer-events: none; } .kylg__plokk input[type="text"], .kylg__plokk input[type="search"] { width: 100%; min-height: 2.9rem; padding: .7rem .9rem .7rem 2.5rem; border: 0; border-radius: 0; background: var(--tosta-luu); color: var(--on-light); font-family: var(--font); font-size: .95rem; appearance: none; transition: background .2s var(--ease), box-shadow .2s var(--ease); } .kylg__plokk input::placeholder { color: var(--on-light-mu); } .kylg__plokk input:hover { background: #DED4C5; } .kylg__plokk input:focus { outline: none; background: var(--paper); box-shadow: inset 0 0 0 2px var(--hide); } /* Chrome's own clear button is a grey cross that fights the palette. */ .kylg__plokk input[type="search"]::-webkit-search-cancel-button { display: none; } /* --- category list ------------------------------------------------------- */ /* The count is pushed to the right edge and set tabular, so a column of counts is readable as a column. The active row is marked by ground and colour. */ .kylg__kat a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 2.6rem; padding: .5rem .9rem; text-decoration: none; color: var(--on-light); transition: background .2s var(--ease), color .2s var(--ease); } .kylg__kat a:hover { background: var(--tosta-luu); } .kylg__kat a[aria-current="page"] { background: var(--tosta-luu); color: var(--hide); font-weight: 600; } .kylg__kat .kylg__arv { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--on-light-mu); flex-shrink: 0; } .kylg__kat a[aria-current="page"] .kylg__arv { color: var(--hide); } /* --- filters as a disclosure on small screens ---------------------------- */ /* On a phone a 16.5rem filter column becomes a full-height wall the buyer has to scroll past before seeing a single product. Collapsing it into a
puts the products first and costs one tap — and it works with JS off, which a scripted accordion would not. */ .pood__kylg > summary { display: none; /* desktop: no disclosure, filters are simply there */ } @media (max-width: 62rem) { details.pood__kylg > summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 3rem; padding: .75rem 1rem; background: var(--tosta-luu); cursor: pointer; font-weight: 600; list-style: none; } details.pood__kylg > summary::-webkit-details-marker { display: none; } details.pood__kylg > summary .ikoon { /* Size stated explicitly. ti_icon() emits no width/height attributes, so an .ikoon in a context that does not size it falls back to the replaced- element default and renders enormous — which is exactly what happened here. The base rule further down now catches that class of mistake; this is the deliberate size for this spot, matching the search icon. */ width: 1.05rem; height: 1.05rem; transition: transform .25s var(--ease); flex-shrink: 0; } details.pood__kylg[open] > summary .ikoon { transform: rotate(90deg); } details.pood__kylg > summary + * { margin-top: 1.1rem; } } /* --- cart: rows become cards on small screens ---------------------------- */ /* A five-column table at 360px either overflows or squeezes the product name to two characters. Below 48rem each row becomes its own block and every cell carries its column name from data-silt, so no header row is needed. */ @media (max-width: 48rem) { .korvtabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .korvtabel, .korvtabel tbody, .korvtabel tr, .korvtabel td { display: block; width: 100%; } .korvtabel tr { position: relative; padding: 1rem 1rem 1rem 6.5rem; /* room for the thumbnail, left */ min-height: 6.5rem; } .korvtabel tbody tr:nth-of-type(odd) { background: var(--tosta-luu); } .korvtabel td { padding: .2rem 0; } .korvtabel td.korv__toode { padding-bottom: .5rem; font-weight: 600; } /* The thumbnail is lifted out of the flow into the padding reserved above. */ .korvtabel .korv__pilt { position: absolute; left: 1rem; top: 1rem; width: 4.75rem; } /* Every non-name cell is labelled by its column. */ .korvtabel td[data-silt]::before { content: attr(data-silt) " "; display: inline-block; min-width: 5.2rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-light-mu); } /* The remove button moves to the row's top-right corner. */ .korvtabel td:last-child { position: absolute; top: .6rem; right: .6rem; padding: 0; } } /* --- quantity stepper ---------------------------------------------------- */ .korv__kogus input, .toode__valik input[type="number"] { width: 4.5rem; min-height: 2.75rem; /* 44px */ padding: .5rem .6rem; border: 0; border-radius: 0; background: var(--paper); color: var(--on-light); font-family: var(--font); font-variant-numeric: tabular-nums; text-align: center; transition: box-shadow .2s var(--ease); } .korv__kogus input:focus, .toode__valik input[type="number"]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--hide); } .korv__eemalda { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; /* 44px square — a finger target, not an icon */ height: 2.75rem; border: 0; background: transparent; color: var(--on-light-mu); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); } .korv__eemalda:hover { color: var(--hide); background: var(--tosta-luu); } .korv__eemalda:focus-visible { outline: 2px solid var(--hide); outline-offset: 2px; } /* --- cart totals and checkout summary ----------------------------------- */ /* Both are raised panels. On a wide screen the summary follows the buyer down the form, which is the whole point of a summary; below the breakpoint it returns to the flow, because a sticky panel on a phone eats the viewport. */ .korv__kokku, .kassa__kokku { background: var(--tosta-luu); padding: clamp(1.3rem, 2.4vw, 1.9rem); } @media (min-width: 62.01rem) { .kassa__kokku { position: sticky; top: calc(var(--pais-h) + 1rem); } } .korv__summa, .kassa__kokku .korv__summa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .9rem; } .korv__summa-suur { font-size: clamp(1.35rem, 3vw, 1.75rem); font-variant-numeric: tabular-nums; color: var(--ink); } .korv__vihje { margin-top: .5rem; font-size: .84rem; color: var(--on-light-mu); } .korv__teod { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; } .korv__teod .nupp { flex: 1 1 auto; justify-content: center; } /* Order lines in the checkout summary. */ .kassa__read { list-style: none; margin: 0; padding: 0; } .kassa__read li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem 0; } .kassa__read li + li { margin-top: 0; } .kassa__read small { display: block; font-size: .78rem; color: var(--on-light-mu); } .kassa__read .num { font-variant-numeric: tabular-nums; flex-shrink: 0; } /* --- checkout form rhythm ----------------------------------------------- */ .kassa__vorm fieldset { border: 0; padding: 0; margin: 0 0 1.9rem; } .kassa__vorm legend { font-family: var(--font); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-light-mu); margin-bottom: .9rem; padding: 0; } /* Two columns of fields on a wide screen, one on a phone. .laius-2 spans both. */ .kassa__vorm fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .kassa__vorm fieldset > legend { grid-column: 1 / -1; } .kassa__vorm .laius-2 { grid-column: 1 / -1; } @media (max-width: 40rem) { .kassa__vorm fieldset { grid-template-columns: 1fr; } } /* --- payment and shipping options --------------------------------------- */ /* Each option is a filled row, not a bordered card. The whole row is the label, so the tap area is the row rather than the 16px radio. */ .makse { display: flex; flex-direction: column; gap: .6rem; grid-column: 1 / -1; } .makse__valik { min-height: 3.25rem; } .makse__valik:has(input:checked) { background: var(--paper); box-shadow: inset 0 0 0 2px var(--hide); } .makse__valik:focus-within { box-shadow: inset 0 0 0 2px var(--hide); } .makse__valik .num { font-variant-numeric: tabular-nums; color: var(--on-light-mu); } /* --- product list toolbar ----------------------------------------------- */ .pood__riist { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .pood__seaded { font-variant-numeric: tabular-nums; color: var(--on-light-mu); font-size: .88rem; } /* --- empty states ------------------------------------------------------- */ /* An empty cart or a fruitless search is a normal outcome, not an error: it gets the same raised panel as any other block, and a way onward. */ .korv__tyhi, .pood__tyhi { background: var(--tosta-luu); padding: clamp(1.6rem, 4vw, 2.6rem); color: var(--on-light-mu); } .korv__tyhi a, .pood__tyhi a { color: var(--hide); font-weight: 600; } /* --- icon fallback size --------------------------------------------------- */ /* ti_icon() deliberately emits no width/height attributes, so sizing stays a CSS decision per use site. The cost is that a site which forgets to size it gets the SVG replaced-element default, which is vastly bigger than any icon here. This is the floor that stops that: a single-class selector, so every existing per-context rule (.nupp .ikoon, .lyliti .ikoon, …) still wins on specificity and nothing that is already sized changes. */ .ikoon { width: 1em; height: 1em; flex-shrink: 0; }