/** * Puuseppmeister — Premium Homepage Foundation * Off-Elementor design system: tokens, editorial typography, spacing rhythm, * grid, buttons, motion. Scope: pages with . * * Design language: warm Scandinavian minimalism, editorial scale, photography- * led. Accent used sparingly as a precious detail — never as a default fill. */ /* ------------------------------------------------------------------ */ /* Fonts — loaded via in HTML for Lighthouse (no @import). */ /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* Tokens */ /* ------------------------------------------------------------------ */ :root { /* Colour — warm, natural, restrained */ --pm2-ink: #1a1917; /* near-black, warm */ --pm2-ink-soft: #33302b; --pm2-muted: #6b6559; /* secondary text */ --pm2-line: rgba(26, 25, 23, 0.12); --pm2-line-soft: rgba(26, 25, 23, 0.07); --pm2-paper: #f4f1ea; /* warm off-white page */ --pm2-surface: #fbfaf6; /* card / raised */ --pm2-surface-2: #ece7dd; /* soft warm block */ --pm2-white: #ffffff; --pm2-accent: #b8823a; /* warm gold — brand orange */ --pm2-accent-deep: #a06f2f; --pm2-on-dark: rgba(255, 255, 255, 0.94); --pm2-on-dark-soft: rgba(255, 255, 255, 0.7); /* Typography */ --pm2-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --pm2-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Reduce layout shift while webfonts load */ font-synthesis: none; /* Fluid type scale (min → max) */ --pm2-fs-eyebrow: 0.78rem; --pm2-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --pm2-fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); --pm2-fs-h5: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); --pm2-fs-h4: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); --pm2-fs-h3: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); --pm2-fs-h2: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); --pm2-fs-display: clamp(2.9rem, 1.9rem + 4.9vw, 6rem); /* Spacing rhythm */ --pm2-space-1: 0.5rem; --pm2-space-2: 0.75rem; --pm2-space-3: 1rem; --pm2-space-4: 1.5rem; --pm2-space-5: 2rem; --pm2-space-6: 3rem; --pm2-space-7: 4rem; --pm2-space-8: 6rem; --pm2-section-y: clamp(4.5rem, 3rem + 6vw, 9rem); /* Layout */ --pm2-container: 1360px; --pm2-container-narrow: 820px; --pm2-gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem); /* Radius — minimal, editorial */ --pm2-radius: 3px; --pm2-radius-lg: 6px; /* Elevation */ --pm2-shadow: 0 20px 60px -30px rgba(26, 25, 23, 0.35); /* Motion */ --pm2-ease: cubic-bezier(0.22, 1, 0.36, 1); --pm2-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); --pm2-dur: 0.7s; --pm2-dur-fast: 0.35s; } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ body.pm-premium { margin: 0; background: var(--pm2-paper); color: var(--pm2-ink); font-family: var(--pm2-font-sans); font-size: var(--pm2-fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.pm-premium *, body.pm-premium *::before, body.pm-premium *::after { box-sizing: border-box; } .pm-premium h1, .pm-premium h2, .pm-premium h3, .pm-premium h4 { font-family: var(--pm2-font-display); font-weight: 400; line-height: 1.06; letter-spacing: -0.015em; margin: 0; color: var(--pm2-ink); } .pm-premium p { margin: 0; } /* Ära tühistada site-bundle päise/jaluse linke */ .pm-premium .site-header a, .pm-premium .site-footer a { color: unset; text-decoration: unset; } .pm-premium main a, .pm-premium .pm-tr-section a, .pm-premium .pm-tr-wrap a, .pm-premium .pm-tr-elementor a { color: inherit; text-decoration: none; } .pm-premium img { display: block; max-width: 100%; } /* ------------------------------------------------------------------ */ /* Layout primitives */ /* ------------------------------------------------------------------ */ .pm2-container { width: 100%; max-width: var(--pm2-container); margin-inline: auto; padding-inline: var(--pm2-gutter); } .pm2-container--narrow { max-width: var(--pm2-container-narrow); } .pm2-section { padding-block: var(--pm2-section-y); } /* ------------------------------------------------------------------ */ /* Typographic helpers */ /* ------------------------------------------------------------------ */ .pm2-eyebrow { font-family: var(--pm2-font-sans); font-size: var(--pm2-fs-eyebrow); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pm2-accent); margin: 0; } .pm2-display { font-size: var(--pm2-fs-display); } .pm2-h2 { font-size: var(--pm2-fs-h2); } .pm2-h3 { font-size: var(--pm2-fs-h3); } .pm2-lead { font-size: var(--pm2-fs-lead); line-height: 1.5; color: var(--pm2-ink-soft); font-family: var(--pm2-font-sans); font-weight: 400; } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ .pm2-btn { --btn-bg: var(--pm2-ink); --btn-fg: var(--pm2-white); --btn-bd: var(--pm2-ink); display: inline-flex; align-items: center; gap: 0.6em; padding: 1.1em 1.9em; font-family: var(--pm2-font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--pm2-radius); cursor: pointer; transition: transform var(--pm2-dur-fast) var(--pm2-ease), background-color var(--pm2-dur-fast) var(--pm2-ease), color var(--pm2-dur-fast) var(--pm2-ease), border-color var(--pm2-dur-fast) var(--pm2-ease); } .pm2-btn:hover { transform: translateY(-2px); } .pm2-btn__arrow { transition: transform var(--pm2-dur-fast) var(--pm2-ease); } .pm2-btn:hover .pm2-btn__arrow { transform: translateX(4px); } .pm2-btn--accent { --btn-bg: var(--pm2-accent); --btn-fg: #fff; --btn-bd: var(--pm2-accent); } .pm2-btn--accent:hover { --btn-bg: var(--pm2-accent-deep); --btn-bd: var(--pm2-accent-deep); } .pm2-btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.5); } .pm2-btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, 0.1); --btn-bd: #fff; } /* Underline text link with animated rule */ .pm2-textlink { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.95rem; color: var(--pm2-ink); padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--pm2-dur) var(--pm2-ease); } .pm2-textlink:hover { background-size: 0% 1px; } /* ------------------------------------------------------------------ */ /* Motion — reveal on scroll */ /* ------------------------------------------------------------------ */ .pm2-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--pm2-ease), transform 0.9s var(--pm2-ease); transition-delay: var(--pm2-reveal-delay, 0s); } .pm2-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pm-premium *, .pm-premium *::before, .pm-premium *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .pm2-reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ */ /* Footer — premium refinement (spacing, type, alignment) */ /* ------------------------------------------------------------------ */ .pm-premium .site-footer, body.home .site-footer, footer.site-footer { background: #1a1917 !important; background-color: #1a1917 !important; color: rgba(255, 255, 255, 0.92); } .pm-premium .site-footer__inner { max-width: var(--pm2-container); padding: clamp(4rem, 3rem + 3vw, 6.5rem) var(--pm2-gutter) 2.5rem; gap: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); } .pm-premium .site-footer__row { gap: 40px 72px; } .pm-premium .site-footer__block h4 { font-size: 0.72rem; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.15rem; } .pm-premium .site-footer__block li { margin-bottom: 0.7rem; } .pm-premium .site-footer__block a, .pm-premium .site-footer__block span { font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); transition: color 0.25s var(--pm2-ease); } .pm-premium .site-footer__block a:hover { color: var(--pm2-accent); } .pm-premium .site-footer__bottom { padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .pm-premium .site-footer__bottom p { font-size: 0.8rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.5); } /* Mobile drawer: force readable light text on dark panel (prevents pm-premium / inherit overrides from dark-on-dark) */ .site-header__mobile { background: #1a1917 !important; color: #fff !important; z-index: 1100; } .site-header__mobile-nav a, .site-header__mobile-nav a:link, .site-header__mobile-nav a:visited { color: rgba(255, 255, 255, 0.95) !important; } .site-header__mobile-nav a:hover, .site-header__mobile-nav a:focus, .site-header__mobile-nav a:focus-visible { color: #fff !important; background: rgba(255, 255, 255, 0.08) !important; } .site-header__mobile-nav a.is-active { color: #fff !important; font-weight: 600; box-shadow: inset 3px 0 0 #b8823a; } .site-header__mobile-nav .site-header__nav-group { color: rgba(255, 255, 255, 0.45) !important; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 1rem 32px 0.35rem; margin: 0; list-style: none; } .site-header__mobile-close, .site-header__toggle.icon-close, .site-header__mobile-head { color: #fff !important; } body.site-header-menu-open { overflow: hidden; } .site-header__contact-icons { display: none !important; } .site-header__icon-only svg, .site-header__phone svg, .site-header__contact-icons svg, .site-header__mobile-contact svg { width: 1.25rem !important; height: 1.25rem !important; max-width: 1.25rem; max-height: 1.25rem; flex: none; fill: currentColor; } /* Sticky mobile CTA — in foundation so pages without terrace.css (blogi, kontakt, etc.) do not render an unsized full-viewport SVG */ .pm-tr-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; gap: 0.6rem; padding: 0.7rem 0.85rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(140%) blur(10px); border-top: 1px solid var(--pm2-line); transform: translateY(120%); transition: transform 0.4s var(--pm2-ease); } .pm-tr-sticky.is-visible { transform: none; } .pm-tr-sticky__call, .pm-tr-sticky__quote { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--pm2-font-sans); font-weight: 600; font-size: 0.95rem; border-radius: var(--pm2-radius); padding: 0.85rem 1rem; text-decoration: none; } .pm-tr-sticky__call { flex: 0 0 auto; color: var(--pm2-ink); border: 1px solid var(--pm2-line); background: #fff; } .pm-tr-sticky__call svg { width: 1.1rem; height: 1.1rem; flex: none; fill: currentColor; } .pm-tr-sticky__quote { flex: 1 1 auto; color: #fff; background: var(--pm2-accent); border: 1px solid var(--pm2-accent); } .pm-tr-sticky__quote:active { background: var(--pm2-accent-deep); } @media (max-width: 760px) { .pm-tr-sticky { display: flex; } }