/* ===================================================================== Lumo Lasi — global styles Ported from the Claude Design prototype (Lumo Lasi.dc.html / Hintalaskuri.dc.html). No framework, no build step. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* The `hidden` attribute must always win, even over an inline `display`. Without !important an inline `display:flex` on a modal overrides [hidden] and the element shows on page load. */ [hidden] { display: none !important; } body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; background: #FAF8F2; color: #1a1a1a; -webkit-font-smoothing: antialiased; } .inter { font-family: 'Inter', sans-serif; } input, textarea, button, select { font-family: 'Inter', sans-serif; font-weight: 500; border-radius: 50px; } p, li, label, span.body, a.nav-link { font-family: 'Inter', sans-serif; } /* ---- Calculator page uses Inter everywhere + a different canvas colour ---- */ body.page-calc { font-family: 'Inter', sans-serif; background: #F5F3EE; min-height: 100%; } html.page-calc, body.page-calc { height: 100%; } /* ---- Animations ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes glint { 0%, 80%, 100% { transform: translateX(-200%) skewX(-20deg); opacity: 0; } 3% { opacity: 1; } 35% { opacity: 1; } 50% { transform: translateX(300%) skewX(-20deg); opacity: 0; } } .shine { position: relative; overflow: hidden; } .shine::after { content: ''; position: absolute; top: -50%; left: 0; width: 60px; height: 200%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%); animation: glint 3s ease-in-out infinite; pointer-events: none; } /* Entrance animation lives on a wrapper, NOT on . A retained transform on (from animation-fill-mode) would make position:fixed modals anchor to the body instead of the viewport. The wrapper uses `backwards` fill so no transform lingers after the animation, keeping sticky/fixed clean. */ .page-enter { animation: pageIn 0.2s cubic-bezier(0.22,1,0.36,1) backwards; } body.fade-out { animation: none !important; opacity: 0; transform: translateY(-6px); transition: opacity 0.12s ease, transform 0.12s ease; } /* ---- Calculator extras ---- */ .page-calc ::-webkit-scrollbar { width: 5px; } .page-calc ::-webkit-scrollbar-thumb { background: #D9D3C7; border-radius: 99px; } .page-calc input:focus, .page-calc textarea:focus, .page-calc select:focus { border-color: #C5A028 !important; outline: none; } /* ---- Logo ticker (landing) ---- */ @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .logo-track { display: flex; align-items: center; width: max-content; animation: ticker 40s linear infinite; } .logo-track:hover { animation-play-state: paused; } .logo-item { flex-shrink: 0; height: 40px; margin-right: 96px; display: flex; align-items: center; justify-content: center; opacity: 0.55; filter: grayscale(1); transition: opacity 0.2s, filter 0.2s; } .logo-item:hover { opacity: 1; filter: grayscale(0); } /* ---- Nav link hover/active transition (landing) ---- */ a[data-nav] { transition: border-color 0.3s ease, color 0.3s ease, font-weight 0.2s ease; } /* ===================================================================== Responsive — the prototype is desktop-first; these rules keep both pages usable down to phone widths without changing the desktop design. ===================================================================== */ /* Hamburger button is hidden on desktop */ .nav-toggle { display: none; } @media (max-width: 900px) { nav { padding: 14px 20px !important; } /* Collapse the inline nav links into a dropdown panel */ .nav-links { position: absolute; top: 78px; left: 20px; right: 20px; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; height: auto !important; max-width: none !important; padding: 14px !important; border-radius: 22px !important; display: none !important; } .nav-links.open { display: flex !important; } .nav-links a[data-nav], .nav-links a.nav-link { padding: 12px 14px !important; border-bottom: none !important; border-radius: 12px !important; } .nav-links a[data-nav]:hover { background: rgba(197,160,40,0.08); } .nav-cta { margin-left: 0 !important; width: 100%; justify-content: center; margin-top: 4px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50px; border: none; cursor: pointer; background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,0.09); flex-shrink: 0; } .nav-toggle span { width: 22px; height: 2px; background: #1a1a1a; position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: #1a1a1a; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } /* Hero stacks */ .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 64px 20px !important; } /* Generic section padding shrink */ section { padding-left: 20px !important; padding-right: 20px !important; } footer { padding-left: 20px !important; padding-right: 20px !important; } /* Footer columns stack */ .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 720px) { /* Stats bar stacks */ .stats-row { flex-direction: column; gap: 28px; } .stats-row > div { border-left: none !important; padding: 0 !important; } /* Calculator: sidebar above the grid */ .calc-layout { flex-direction: column !important; } .calc-sidebar { width: 100% !important; position: static !important; } }