/* ============================================================ HINTAREMONTILLE.FI — design-järjestelmä (natiivit widgetit) Tyylittää Elementorin OMAT widgetit CSS-luokkien kautta. Lisätään KERRAN: Elementor > Custom Code > > Entire Site Luokat lisätään widgetin Advanced > CSS Classes -kenttään. Templaateissa ne ovat valmiina. ============================================================ */ :root{ --hr-ink:#0058BD; --hr-live:#0370EB; --hr-soft:#D8E2FF; --hr-tint:#FAF8FF; --hr-white:#FFFFFF; --hr-text:#14243D; --hr-muted:#56688A; --hr-display:'Manrope',system-ui,-apple-system,sans-serif; --hr-body:'Inter',system-ui,-apple-system,sans-serif; --hr-strip:74px; } /* ---------- 1. TYPOGRAFIA (heading + text-editor) ---------- */ /* Yksikkötunniste. Kertoo missä yksikössä osion sisältö mitataan. */ .hr-eyebrow.hr-eyebrow .elementor-heading-title{ font-family:var(--hr-body); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--hr-muted); font-variant-numeric:tabular-nums; line-height:1.4; } .hr-h1.hr-h1 .elementor-heading-title{ font-family:var(--hr-display); font-size:clamp(2rem,1.1rem + 3.4vw,3.7rem); font-weight:800; line-height:1.07; letter-spacing:-.022em; color:var(--hr-ink); } .hr-h1.hr-h1 em{ font-style:normal; color:var(--hr-live); } .hr-h2.hr-h2 .elementor-heading-title{ font-family:var(--hr-display); font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem); font-weight:800; line-height:1.17; letter-spacing:-.022em; color:var(--hr-ink); } .hr-h3.hr-h3 .elementor-heading-title{ font-family:var(--hr-display); font-size:1.06rem; font-weight:700; line-height:1.35; letter-spacing:-.01em; color:var(--hr-text); } .hr-lede.hr-lede, .hr-body.hr-body, .hr-note-w.hr-note-w{ font-family:var(--hr-body); color:var(--hr-text); } .hr-lede.hr-lede{ font-size:clamp(1rem,.96rem + .25vw,1.14rem); line-height:1.62; color:var(--hr-muted); max-width:58ch; } .hr-body.hr-body{ font-size:17px; line-height:1.62; max-width:64ch; } .hr-body.hr-body strong{ color:var(--hr-ink); font-weight:600; } .hr-note-w.hr-note-w{ font-size:.89rem; line-height:1.6; color:var(--hr-muted); max-width:64ch; } .hr-lede.hr-lede p:last-child, .hr-body.hr-body p:last-child, .hr-note-w.hr-note-w p:last-child{ margin-bottom:0; } .hr-lede.hr-lede a, .hr-body.hr-body a, .hr-note-w.hr-note-w a{ color:var(--hr-live); } .hr-cap.hr-cap{ font-family:var(--hr-body); font-size:.8rem; line-height:1.5; color:var(--hr-muted); } .hr-cap.hr-cap p{ margin:0; } /* ---------- 2. NAPPI (button-widget) ---------- */ .hr-btnw.hr-btnw .elementor-button{ font-family:var(--hr-display); font-weight:700; font-size:1rem; letter-spacing:-.005em; background:var(--hr-ink); color:var(--hr-white); padding:15px 30px; border-radius:999px; border:0; fill:var(--hr-white); transition:background-color .18s ease, transform .18s ease; } .hr-btnw.hr-btnw .elementor-button:hover, .hr-btnw.hr-btnw .elementor-button:focus-visible{ background:var(--hr-live); color:var(--hr-white); transform:translateY(-1px); } .hr-btnw.hr-btnw .elementor-button:focus-visible{ outline:3px solid var(--hr-live); outline-offset:3px; } .hr-btnw.hr-btnw .elementor-button-icon{ transition:transform .18s ease; } .hr-btnw.hr-btnw .elementor-button:hover .elementor-button-icon{ transform:translateX(3px); } .hr-btnw--ghost.hr-btnw--ghost .elementor-button{ background:transparent; color:var(--hr-ink); box-shadow:inset 0 0 0 2px var(--hr-ink); } .hr-btnw--ghost.hr-btnw--ghost .elementor-button:hover{ background:var(--hr-ink); color:var(--hr-white); } /* ---------- 3. TAULUKOT (text-editor-widgetin sisällä) ---------- */ .hr-tblw.hr-tblw table, .hr-cmpw.hr-cmpw table, .hr-sheetw.hr-sheetw table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-family:var(--hr-body); margin:0; border:0; } .hr-tblw.hr-tblw td, .hr-tblw.hr-tblw th, .hr-cmpw.hr-cmpw td, .hr-cmpw.hr-cmpw th{ border:0; } .hr-tblw.hr-tblw thead th{ font-family:var(--hr-display); font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--hr-muted); text-align:left; padding:0 16px 12px 0; border-bottom:2px solid var(--hr-ink); white-space:nowrap; background:none; } .hr-tblw.hr-tblw tbody th, .hr-tblw.hr-tblw tbody td{ padding:14px 16px 14px 0; border-bottom:1px solid var(--hr-soft); text-align:left; font-size:1rem; vertical-align:baseline; background:none; } .hr-tblw.hr-tblw tbody th{ font-family:var(--hr-display); font-weight:700; color:var(--hr-ink); } .hr-tblw.hr-tblw tbody th a{ color:inherit; text-decoration:none; border-bottom:2px solid var(--hr-soft); } .hr-tblw.hr-tblw tbody th a:hover{ color:var(--hr-live); border-bottom-color:var(--hr-live); } .hr-tblw.hr-tblw .n{ font-weight:600; white-space:nowrap; } .hr-tblw.hr-tblw .m{ color:var(--hr-muted); } .hr-cmpw.hr-cmpw thead th{ font-family:var(--hr-display); font-weight:800; color:var(--hr-ink); font-size:1rem; text-align:left; padding:0 16px 12px 0; border-bottom:2px solid var(--hr-ink); } .hr-cmpw.hr-cmpw tbody th{ font-family:var(--hr-body); font-weight:500; color:var(--hr-muted); text-align:left; padding:13px 16px 13px 0; border-bottom:1px solid var(--hr-soft); font-size:.97rem; } .hr-cmpw.hr-cmpw tbody td{ font-weight:600; padding:13px 16px 13px 0; border-bottom:1px solid var(--hr-soft); font-size:.97rem; text-align:left; } /* Erittely */ .hr-sheetw.hr-sheetw table{ border:1px solid var(--hr-soft); max-width:620px; } .hr-sheetw.hr-sheetw td{ padding:14px 22px; border:0; border-bottom:1px solid var(--hr-soft); font-size:1rem; background:var(--hr-white); } .hr-sheetw.hr-sheetw td:first-child{ color:var(--hr-muted); } .hr-sheetw.hr-sheetw td:last-child{ text-align:right; font-weight:600; white-space:nowrap; } .hr-sheetw.hr-sheetw tr:last-child td{ border-bottom:0; background:var(--hr-ink); color:var(--hr-white); } .hr-sheetw.hr-sheetw tr:last-child td:first-child{ color:var(--hr-soft); } .hr-sheetw.hr-sheetw tr:last-child td:last-child{ font-family:var(--hr-display); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; } .hr-sheetw.hr-sheetw .minus{ color:var(--hr-live); } @media (max-width:760px){ .hr-tblw.hr-tblw thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .hr-tblw.hr-tblw tbody tr{ display:block; padding:16px 0; border-bottom:1px solid var(--hr-soft); } .hr-tblw.hr-tblw tbody th, .hr-tblw.hr-tblw tbody td{ display:flex; justify-content:space-between; gap:16px; border:0; padding:4px 0; } .hr-tblw.hr-tblw tbody th{ font-size:1.08rem; margin-bottom:6px; } .hr-tblw.hr-tblw tbody td::before{ content:attr(data-l); color:var(--hr-muted); font-size:.86rem; flex:none; } .hr-cmpw.hr-cmpw table{ font-size:.88rem; } .hr-cmpw.hr-cmpw th, .hr-cmpw.hr-cmpw td{ padding:11px 10px 11px 0; } } /* ---------- 4. VAIHEET (container per vaihe) ---------- */ .hr-steps.hr-steps{ counter-reset:hrs; } .hr-stepc.hr-stepc{ --display:grid; display:grid; grid-template-columns:52px 1fr; align-items:start; counter-increment:hrs; border-bottom:1px solid var(--hr-soft); } .hr-steps.hr-steps > .hr-stepc:first-of-type{ border-top:2px solid var(--hr-ink); } .hr-stepc.hr-stepc::before{ content:counter(hrs); font-family:var(--hr-display); font-weight:800; font-size:1.5rem; color:var(--hr-soft); line-height:1.25; letter-spacing:-.02em; grid-column:1; grid-row:1 / span 2; } .hr-stepc.hr-stepc > *{ grid-column:2; width:100%; } /* ---------- 5. KYSYMYS JA VASTAUS ---------- */ .hr-qa.hr-qa{ border-top:2px solid var(--hr-ink); } .hr-qa-item.hr-qa-item{ border-bottom:1px solid var(--hr-soft); } .hr-q.hr-q .elementor-heading-title{ font-family:var(--hr-display); font-weight:700; font-size:1.02rem; color:var(--hr-ink); line-height:1.4; } .hr-a.hr-a{ font-size:.96rem; line-height:1.6; color:var(--hr-muted); max-width:68ch; } .hr-a.hr-a p:last-child{ margin-bottom:0; } /* Jos vaihdat FAQ:n Elementorin accordion-widgetiin */ .hr-acc.hr-acc .elementor-accordion-item{ border:0; border-bottom:1px solid var(--hr-soft); } .hr-acc.hr-acc .elementor-tab-title{ font-family:var(--hr-display); font-weight:700; font-size:1.02rem; color:var(--hr-ink); background:none; padding:18px 0; border:0; } .hr-acc.hr-acc .elementor-tab-content{ border:0; padding:0 0 20px; color:var(--hr-muted); font-size:.96rem; } /* ---------- 6. LINKKILISTA ---------- */ .hr-linksw.hr-linksw ul{ list-style:none; margin:0; padding:0; border-top:2px solid var(--hr-ink); } .hr-linksw.hr-linksw li{ border-bottom:1px solid var(--hr-soft); margin:0; } .hr-linksw.hr-linksw a{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:17px 0; text-decoration:none; color:var(--hr-ink); font-family:var(--hr-display); font-weight:700; font-size:1.05rem; } .hr-linksw.hr-linksw a:hover{ color:var(--hr-live); } .hr-linksw.hr-linksw a .m{ font-family:var(--hr-body); font-weight:500; color:var(--hr-muted); font-size:.92rem; white-space:nowrap; } /* ---------- 7. KAUSIJANA ---------- */ .hr-yearw.hr-yearw .yr{ display:grid; grid-template-columns:repeat(12,1fr); gap:3px; } .hr-yearw.hr-yearw .mo{ text-align:center; } .hr-yearw.hr-yearw .bar{ height:46px; background:var(--hr-soft); } .hr-yearw.hr-yearw .on .bar{ background:var(--hr-ink); } .hr-yearw.hr-yearw .peak .bar{ background:var(--hr-live); } .hr-yearw.hr-yearw .lb{ font-size:.66rem; color:var(--hr-muted); margin-top:7px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; } .hr-yearw.hr-yearw .lg{ display:flex; gap:22px; flex-wrap:wrap; margin-top:20px; font-size:.86rem; color:var(--hr-muted); } .hr-yearw.hr-yearw .lg span{ display:inline-flex; align-items:center; gap:8px; } .hr-yearw.hr-yearw .lg i{ width:13px; height:13px; display:inline-block; } /* ---------- 8. KUVAT (image-widget) ---------- */ .hr-img.hr-img img{ width:100%; height:auto; display:block; } .hr-img--crop.hr-img--crop img{ aspect-ratio:3/2; object-fit:cover; } .hr-img--wide.hr-img--wide img{ aspect-ratio:16/9; object-fit:cover; } .hr-img--sq.hr-img--sq img{ aspect-ratio:1/1; object-fit:cover; } /* ---------- 9. LASKURI (kaksi HTML-widgetiä) ---------- */ .hr-calc.hr-calc, .hr-signblock.hr-signblock{ font-family:var(--hr-body); color:var(--hr-text); } .hr-calc.hr-calc *, .hr-signblock.hr-signblock *{ box-sizing:border-box; } .hr-ask.hr-ask{ border-top:2px solid var(--hr-ink); padding-top:18px; } .hr-ask__label.hr-ask__label{ display:block; font-size:.95rem; font-weight:500; margin-bottom:12px; } .hr-ask__row.hr-ask__row{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; } .hr-ask.hr-ask input[type=number]{ font-family:var(--hr-display); font-weight:800; font-size:clamp(2.1rem,1.4rem + 2.4vw,3rem); letter-spacing:-.03em; width:4.6ch; padding:2px 0 6px; margin:0; border:0; border-bottom:3px solid var(--hr-live); border-radius:0; background:transparent; color:var(--hr-ink); font-variant-numeric:tabular-nums; text-align:left; -moz-appearance:textfield; appearance:textfield; } .hr-ask input[type=number]::-webkit-outer-spin-button, .hr-ask.hr-ask input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .hr-ask.hr-ask input[type=number]:focus{ outline:none; background:var(--hr-soft); } .hr-ask.hr-ask input[type=number]:focus-visible{ outline:3px solid var(--hr-live); outline-offset:4px; } .hr-ask__suffix.hr-ask__suffix{ font-family:var(--hr-display); font-weight:700; font-size:1.45rem; color:var(--hr-muted); padding-bottom:12px; } .hr-hint.hr-hint{ font-size:.86rem; color:var(--hr-muted); margin:12px 0 0; } .hr-hint.hr-hint button{ font:inherit; color:var(--hr-live); background:none; border:0; padding:0; border-bottom:1px solid currentColor; cursor:pointer; } .hr-seg.hr-seg{ display:flex; flex-wrap:wrap; margin-bottom:24px; border:1px solid var(--hr-soft); width:fit-content; max-width:100%; } .hr-seg.hr-seg button{ font-family:var(--hr-body); font-size:.89rem; font-weight:500; padding:11px 18px; margin:0; border:0; border-right:1px solid var(--hr-soft); background:var(--hr-white); color:var(--hr-muted); cursor:pointer; border-radius:0; } .hr-seg.hr-seg button:last-child{ border-right:0; } .hr-seg.hr-seg button[aria-pressed="true"]{ background:var(--hr-ink); color:var(--hr-white); font-weight:600; } .hr-seg.hr-seg button:focus-visible{ outline:3px solid var(--hr-live); outline-offset:-3px; } .hr-draw.hr-draw{ width:100%; height:auto; display:block; } .hr-draw.hr-draw .e{ fill:none; stroke:var(--hr-ink); stroke-width:2.2; } .hr-draw.hr-draw .c{ stroke:var(--hr-ink); stroke-width:1; opacity:.3; } .hr-draw.hr-draw .b{ stroke:var(--hr-ink); stroke-width:1; opacity:.13; } .hr-draw.hr-draw .d{ stroke:var(--hr-muted); stroke-width:1; } .hr-draw.hr-draw .pl{ fill:var(--hr-soft); opacity:.5; } .hr-draw.hr-draw .n{ font-family:var(--hr-display); font-weight:800; fill:var(--hr-ink); letter-spacing:-.02em; } .hr-draw.hr-draw .cap{ font-family:var(--hr-body); font-weight:600; fill:var(--hr-muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .hr-signs.hr-signs{ display:grid; border-top:1px solid var(--hr-soft); } .hr-sign.hr-sign{ display:grid; grid-template-columns:26px 1fr; gap:16px; align-items:start; padding:17px 4px; border-bottom:1px solid var(--hr-soft); cursor:pointer; margin:0; } .hr-sign.hr-sign:hover{ background:var(--hr-white); } .hr-sign.hr-sign input{ appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:2px 0 0; border:2px solid var(--hr-muted); background:var(--hr-white); cursor:pointer; border-radius:0; } .hr-sign.hr-sign input:checked{ background:var(--hr-live); border-color:var(--hr-live); } .hr-sign.hr-sign input:checked::after{ content:""; display:block; width:6px; height:11px; border:solid var(--hr-white); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); margin:1px 0 0 6px; } .hr-sign.hr-sign input:focus-visible{ outline:3px solid var(--hr-live); outline-offset:3px; } .hr-sign__t.hr-sign__t{ font-family:var(--hr-display); font-weight:700; font-size:1rem; display:block; margin-bottom:3px; } .hr-sign__d.hr-sign__d{ font-size:.92rem; color:var(--hr-muted); line-height:1.5; display:block; } .hr-range.hr-range{ margin-top:28px; } .hr-range__bar.hr-range__bar{ position:relative; height:8px; background:var(--hr-soft); overflow:hidden; } .hr-range__fill.hr-range__fill{ position:absolute; top:0; bottom:0; background:var(--hr-live); transition:left .45s cubic-bezier(.4,0,.2,1), right .45s cubic-bezier(.4,0,.2,1); } .hr-range__scale.hr-range__scale{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--hr-muted); margin-top:8px; font-variant-numeric:tabular-nums; } .hr-range__note.hr-range__note{ font-size:.89rem; color:var(--hr-muted); margin:14px 0 0; } /* ---------- 10. KIINTEÄ ARVIORIVI (footer) ---------- */ .hr-strip.hr-strip{ position:fixed; left:0; right:0; bottom:0; z-index:9998; background:var(--hr-ink); color:var(--hr-white); font-family:var(--hr-body); transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); border-top:1px solid rgba(255,255,255,.16); } .hr-strip.hr-strip.is-on{ transform:translateY(0); } .hr-strip__in.hr-strip__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--hr-strip); padding:12px clamp(20px,5vw,64px); max-width:1240px; margin-inline:auto; } .hr-strip__l.hr-strip__l{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; min-width:0; } .hr-strip__k.hr-strip__k{ font-size:.73rem; letter-spacing:.1em; text-transform:uppercase; color:var(--hr-soft); font-weight:600; } .hr-strip__v.hr-strip__v{ font-family:var(--hr-display); font-weight:800; font-size:clamp(1.05rem,.85rem + .9vw,1.55rem); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; } .hr-strip__sub.hr-strip__sub{ font-size:.81rem; color:var(--hr-soft); font-variant-numeric:tabular-nums; } .hr-strip.hr-strip a{ font-family:var(--hr-display); font-weight:700; font-size:.93rem; background:var(--hr-white); color:var(--hr-ink); text-decoration:none; padding:12px 24px; border-radius:999px; flex:none; } .hr-strip.hr-strip a:hover{ background:var(--hr-soft); } body.hr-has-strip.hr-has-strip{ padding-bottom:var(--hr-strip); } @media (max-width:640px){ .hr-strip__sub{ display:none; } .hr-strip a{ padding:12px 18px; } } @media (prefers-reduced-motion:reduce){ .hr-strip.hr-strip, .hr-range__fill.hr-range__fill, .hr-btnw.hr-btnw .elementor-button{ transition-duration:.01ms !important; } .hr-btnw.hr-btnw .elementor-button:hover{ transform:none; } }