/* ============================================================ Puuvedur — küttepuude müük ja vedu Mets-roheline · tuhk-liiv · söe-oranž. Fraunces (pealkirjad) + Inter (tekst). ============================================================ */ /* Ideearendus CMS wraps every block in
on the public site — neutralise its own spacing so our sections control it. */ .cms-block { padding: 0; } body:not(.cms-edit-mode) .cms-block--navbar { display: contents; } body:not(.cms-edit-mode) .cms-block--footer { display: contents; } :root { --forest: #1E3A2B; --forest-deep: #142A1F; --forest-light: #2C5440; --bark: #5C3D21; --bark-light: #7A5230; --sand: #F5EEE1; --sand-soft: #FBF7EF; --ember: #C2410C; --ember-dark: #9A3412; --white: #ffffff; --font-display: 'Fraunces', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --wrap: 72rem; --r-lg: 1.25rem; --r-md: 0.9rem; --r-sm: 0.6rem; --ease: cubic-bezier(.22,.61,.36,1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--sand-soft); color: var(--forest-deep); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-family: var(--font-display); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; border: none; background: none; cursor: pointer; } input, select, textarea { font: inherit; } .pv-wrap { width: min(var(--wrap), 92vw); margin-inline: auto; } .pv-ic { flex: none; } .pv-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--white); color: var(--forest); padding: .7rem 1.2rem; border-radius: var(--r-sm); font-weight: 600; } .pv-skip:focus { left: 1rem; top: 1rem; } .pv-editor-ph { border: 2px dashed rgba(30,58,43,.25); border-radius: var(--r-md); padding: 2.4rem 1.4rem; text-align: center; color: rgba(30,58,43,.55); background: rgba(30,58,43,.04); cursor: pointer; } /* ---------- Section head / shared type ---------- */ .pv-eyebrow { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ember); margin: 0 0 .5rem; } .pv-eyebrow--light { color: #f2a688; } .pv-h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 700; color: var(--forest-deep); } .pv-h2--light { color: var(--white); } .pv-lead { margin-top: .7rem; font-size: 1.1rem; color: rgba(30,58,43,.72); max-width: 42rem; } .pv-section-head { max-width: 42rem; margin-bottom: 2.5rem; } /* ---------- Buttons ---------- */ .pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.6rem; border-radius: .8rem; font-weight: 700; font-size: 1rem; transition: transform .2s var(--ease), background .2s, box-shadow .2s; } .pv-btn--block { width: 100%; } .pv-btn--ember { background: var(--ember); color: var(--white); box-shadow: 0 10px 24px -8px rgba(194,65,12,.45); } .pv-btn--ember:hover { background: var(--ember-dark); transform: translateY(-2px); } .pv-btn--white { background: var(--white); color: var(--forest-deep); box-shadow: 0 10px 24px -10px rgba(20,42,31,.35); } .pv-btn--white:hover { background: var(--sand); transform: translateY(-2px); } .pv-btn--forest { background: var(--forest); color: var(--white); } .pv-btn--forest:hover { background: var(--forest-deep); } .pv-btn--outline { border: 1.5px solid rgba(30,58,43,.25); color: var(--forest); background: transparent; } .pv-btn--outline:hover { background: var(--forest); color: var(--white); } .pv-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; } /* ---------- Reveal ---------- Gated behind html.js (set by a sync inline script in ) so a no-JS visitor — who will never get .pv-in from main.js — sees this content immediately instead of it staying invisible forever. */ html.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); } html.js [data-reveal].pv-in { opacity: 1; transform: none; } /* ============ NAVBAR ============ */ .pv-nav { position: sticky; top: 0; z-index: 40; background: rgba(20,42,31,.95); border-bottom: 1px solid rgba(255,255,255,.1); } @supports (backdrop-filter: blur(6px)) { .pv-nav { background: rgba(20,42,31,.85); backdrop-filter: blur(10px); } } .pv-nav__in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: 4rem; } .pv-nav__logo img { height: 2.75rem; width: auto; border-radius: .6rem; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .pv-nav__call { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: var(--ember); color: var(--white); padding: .55rem 1.1rem; font-size: .9rem; font-weight: 600; transition: background .2s; } .pv-nav__call:hover { background: var(--ember-dark); } .pv-nav__call:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .pv-nav__call-short { display: none; } /* ============ HERO ============ */ .pv-hero { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--forest-deep); color: var(--white); } .pv-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,42,31,.90) 0%, rgba(20,42,31,.74) 45%, rgba(20,42,31,.92) 100%), radial-gradient(120% 80% at 80% 0%, rgba(194,65,12,.22) 0%, rgba(194,65,12,0) 55%); } .pv-hero__in { position: relative; z-index: 1; padding: 3.5rem 0 clamp(3rem,7vw,5.5rem); } .pv-hero__col { max-width: 40rem; } .pv-badge { display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); padding: .4rem .9rem; font-size: .85rem; font-weight: 500; color: var(--sand); } .pv-badge__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--ember); flex: none; } .pv-hero__h { margin-top: 1.25rem; font-size: clamp(2.3rem, 5.4vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; } .pv-hero__lead { margin-top: 1rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(245,238,225,.9); line-height: 1.6; } .pv-hero__lead strong { color: var(--white); font-weight: 600; } .pv-hero__chips { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem; font-size: .9rem; } .pv-hero__chips li { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.1); border-radius: .6rem; padding: .4rem .75rem; } .pv-hero__chips .pv-ic { color: var(--ember); } .pv-hero__cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .8rem; } .pv-hero__quick { margin-top: 1.4rem; font-size: .9rem; color: rgba(245,238,225,.8); } .pv-hero__quick a { font-weight: 600; color: var(--white); text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 2px; text-underline-offset: 2px; } /* ============ TRUST STRIP ============ */ .pv-trust { background: var(--forest); color: rgba(245,238,225,.9); border-block: 1px solid rgba(255,255,255,.1); } .pv-trust__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: 1rem 0; font-size: .9rem; font-weight: 500; } .pv-trust__item { display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; } .pv-trust__item .pv-ic { color: var(--ember); flex: none; } /* ============ SECTION SPACING ============ */ .pv-pricing, .pv-steps, .pv-why, .pv-contact { padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .pv-steps { background: var(--sand); } .pv-order { background: var(--forest-deep); padding: clamp(3.5rem, 7vw, 5.5rem) 0; scroll-margin-top: 4rem; } .pv-pricing { scroll-margin-top: 4rem; } /* ============ PRICING ============ */ .pv-plans { display: grid; gap: 1.5rem; } .pv-plan { background: var(--white); border: 1px solid rgba(92,61,33,.15); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem); } .pv-plan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .pv-plan__title { font-size: 1.4rem; font-weight: 700; color: var(--forest-deep); } .pv-plan__sub { margin-top: .3rem; font-size: .88rem; color: rgba(30,58,43,.6); } .pv-plan__badge { flex: none; border-radius: 999px; padding: .3rem .8rem; font-size: .75rem; font-weight: 600; } .pv-plan__badge--forest { background: rgba(30,58,43,.1); color: var(--forest); } .pv-plan__badge--ember { background: rgba(194,65,12,.1); color: var(--ember-dark); } .pv-plan__rows { margin-top: 1.4rem; } .pv-plan__rows li { display: flex; align-items: baseline; justify-content: space-between; padding: .85rem 0; border-top: 1px solid rgba(92,61,33,.1); } .pv-plan__rows li:first-child { border-top: none; } .pv-plan__size { font-size: 1.05rem; font-weight: 500; color: var(--forest-deep); } .pv-plan__price { text-align: right; } .pv-plan__price em { font-style: normal; font-size: .85rem; color: rgba(30,58,43,.55); } .pv-plan__price b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--forest-deep); font-variant-numeric: tabular-nums; margin: 0 .15rem; } .pv-plan .pv-btn { margin-top: 1.4rem; } .pv-price-notes { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .9rem; color: rgba(30,58,43,.7); } .pv-price-notes p { display: inline-flex; align-items: center; gap: .45rem; } .pv-price-notes .pv-ic { color: var(--bark); flex: none; } /* ============ HOW IT WORKS ============ */ .pv-steps__list { display: grid; gap: 1.5rem; } .pv-step { position: relative; background: var(--white); border: 1px solid rgba(92,61,33,.15); border-radius: var(--r-lg); padding: 1.75rem; } .pv-step__ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: radial-gradient(100% 100% at 30% 20%, var(--forest-light) 0%, var(--forest) 100%); color: var(--white); } .pv-step__n { position: absolute; right: 1.5rem; top: 1.5rem; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: rgba(30,58,43,.08); line-height: 1; } .pv-step__t { margin-top: 1.2rem; font-size: 1.15rem; font-weight: 700; color: var(--forest-deep); } .pv-step__d { margin-top: .5rem; color: rgba(30,58,43,.68); } /* ============ WHY US ============ */ .pv-why__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); } .pv-why__card { background: var(--forest); color: var(--white); border-radius: var(--r-lg); padding: 1.6rem; } .pv-why__card .pv-ic { color: var(--ember); } .pv-why__card h3 { margin-top: 1rem; font-size: 1.05rem; font-weight: 700; } .pv-why__card p { margin-top: .4rem; font-size: .9rem; color: rgba(245,238,225,.8); } /* ============ ORDER FORM ============ */ .pv-order__in { display: grid; gap: 2.5rem; } .pv-order__lead { margin-top: 1rem; font-size: 1.1rem; color: rgba(245,238,225,.85); line-height: 1.6; } .pv-order__callbox { margin-top: 1.5rem; border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 1rem 1.2rem; } .pv-order__callbox p { font-size: .9rem; color: rgba(245,238,225,.9); } .pv-order__callbox a { margin-top: .5rem; display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--white); } .pv-order__callbox .pv-ic { color: var(--ember); } .pv-form { background: var(--white); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 1.25rem; } .pv-form[hidden] { display: none; } .pv-form__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; } .pv-fld { display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--forest-deep); } .pv-fld span em { color: var(--ember); font-style: normal; } .pv-fld input, .pv-fld select, .pv-fld textarea { border: 1px solid rgba(92,61,33,.25); border-radius: .7rem; padding: .8rem .9rem; color: var(--forest-deep); background: var(--white); transition: border-color .2s, box-shadow .2s; } .pv-fld input::placeholder, .pv-fld textarea::placeholder { color: rgba(30,58,43,.4); } .pv-fld input:focus, .pv-fld select:focus, .pv-fld textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(30,58,43,.15); } .pv-fld input.is-invalid, .pv-fld select.is-invalid, .pv-fld textarea.is-invalid { border-color: #DC2626; } .pv-fld__hint { font-size: .78rem; font-weight: 400; color: rgba(30,58,43,.55); } .pv-fld__err { display: none; font-size: .82rem; font-weight: 500; color: #DC2626; } .pv-fld__err.is-shown { display: block; } .pv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pv-form__msg { border-radius: .7rem; padding: .9rem 1.1rem; text-align: center; font-size: .9rem; font-weight: 600; } .pv-form__msg--ok { background: rgba(30,58,43,.08); color: var(--forest); } .pv-form__msg--err { background: rgba(220,38,38,.08); color: #B91C1C; } .pv-form__fine { text-align: center; font-size: .78rem; color: rgba(30,58,43,.55); } /* ============ CONTACT ============ */ .pv-contact__card { background: var(--white); border: 1px solid rgba(92,61,33,.15); border-radius: 1.75rem; padding: clamp(1.75rem, 4vw, 2.75rem); display: grid; gap: 2.5rem; } .pv-contact__list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; } .pv-contact__list li { display: flex; align-items: center; gap: .8rem; } .pv-contact__ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: rgba(30,58,43,.1); color: var(--forest); flex: none; } .pv-contact__list small { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(30,58,43,.5); } .pv-contact__list a { font-size: 1.05rem; font-weight: 600; color: var(--forest-deep); } .pv-contact__list a:hover { color: var(--ember-dark); } .pv-contact__left .pv-btn { margin-top: 1.5rem; } .pv-break { word-break: break-all; } .pv-contact__callcard { background: var(--forest); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.25rem); text-align: center; color: var(--white); } .pv-contact__kicker { color: rgba(245,238,225,.85); } .pv-contact__calltitle { margin-top: .3rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; } .pv-contact__callbtn { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .75rem; border-radius: var(--r-lg); background: var(--ember); color: var(--white); padding: 1.4rem 1rem; font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; box-shadow: 0 20px 40px -10px rgba(0,0,0,.35); transition: transform .2s var(--ease), background .2s; } .pv-contact__callbtn:hover { background: var(--ember-dark); transform: translateY(-2px); } .pv-contact__callnote { margin-top: 1rem; font-size: .9rem; color: rgba(245,238,225,.7); } .pv-contact__callnote a { font-weight: 600; color: var(--white); text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: 2px; } /* ============ FOOTER ============ */ .pv-foot { background: var(--forest-deep); color: rgba(245,238,225,.8); } .pv-foot__in { padding: 2.75rem 0 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .pv-foot__logo img { height: 2.5rem; width: auto; border-radius: .6rem; } .pv-foot__links { display: flex; align-items: center; gap: 1.3rem; font-size: .9rem; flex-wrap: wrap; justify-content: center; } .pv-foot__links a:hover { color: var(--white); } .pv-foot__legal { border-top: 1px solid rgba(255,255,255,.1); padding: 1.5rem 0; text-align: center; font-size: .85rem; color: rgba(245,238,225,.6); width: min(var(--wrap), 92vw); margin-inline: auto; } /* ============ STICKY MOBILE CALL BAR ============ */ .pv-mobilebar { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 40; gap: .6rem; padding: .75rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); background: rgba(20,42,31,.95); border-top: 1px solid rgba(255,255,255,.1); } @supports (backdrop-filter: blur(6px)) { .pv-mobilebar { background: rgba(20,42,31,.85); backdrop-filter: blur(10px); } } .pv-mobilebar__btn { flex: 1; padding: .85rem 1rem; } .pv-mobilebar-spacer { display: none; height: 4.75rem; } /* ============================================================ Responsive ============================================================ */ @media (min-width: 640px) { .pv-hero__cta { flex-wrap: nowrap; } .pv-hero__cta .pv-btn { width: auto; } .pv-trust__in { grid-template-columns: repeat(4, 1fr); } .pv-plans { grid-template-columns: repeat(2, 1fr); } .pv-price-notes { flex-direction: row; } } @media (min-width: 768px) { .pv-steps__list { grid-template-columns: repeat(3, 1fr); } .pv-contact__list li { gap: .9rem; } } @media (min-width: 1024px) { .pv-order__in { grid-template-columns: 2fr 3fr; align-items: start; } .pv-contact__card { grid-template-columns: 1fr 1fr; align-items: center; } } @media (max-width: 639px) { .pv-hero__cta { flex-direction: column; } .pv-hero__cta .pv-btn { width: 100%; } .pv-form__grid { grid-template-columns: 1fr; } .pv-why__grid { grid-template-columns: 1fr; } .pv-mobilebar { display: flex; } .pv-mobilebar-spacer { display: block; } } @media (max-width: 419px) { .pv-nav__call-full { display: none; } .pv-nav__call-short { display: inline; } } @media (min-width: 420px) { .pv-nav__call-short { display: none; } } /* ============================================================ Motion & accessibility ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } }