/* ============================================ Lenpak — dark modern theme Flips the site's existing color-token system dark (the theme already has ti-bg / ti-fg / ti-accent tokens wired through every section — we just give them new values) and adds a bold, tracked-uppercase, pill-button treatment inspired by amshop.lt, tuned to Lenpak's own brand blue. ============================================ */ /* ============================================ Lenpak — theme tokens (dark default, light alternate) Controlled by [data-theme] on , set as early as possible by assets/js/theme-toggle.js to avoid a flash of the wrong theme on load. ============================================ */ :root, html[data-theme="dark"] { --nv-site-bg: #0B0D12; /* main page background */ --nv-light-bg: #14171E; /* "alt" section panels (Packaging variety) */ --nv-dark-bg: #050608; /* deepest "inverse" band (Collaboration, CEO) */ --nv-text-color: #E7E9F0; /* main body text */ --nv-text-muted: #A8ADBB; /* secondary/muted text (address, phone, etc.) */ --nv-text-dark-bg: #F5F6FA; /* text already on dark "inverse" sections */ --nv-primary-accent: #4C74FF; /* brand blue, brightened for glow on dark bg */ --nv-secondary-accent: #8AA6FF; --surface-tint: rgba(255, 255, 255, 0.04); --surface-border: rgba(255, 255, 255, 0.14); --surface-placeholder: rgba(231, 233, 240, 0.45); --card-rim: rgba(255, 255, 255, 0.07); --header-scrolled-bg: rgba(11, 13, 18, 0.72); } html[data-theme="light"] { --nv-site-bg: #FFFFFF; --nv-light-bg: #F3F5FA; --nv-dark-bg: #11141C; /* one section stays dark even in light mode, for contrast */ --nv-text-color: #1A1D24; --nv-text-muted: #5A6272; --nv-text-dark-bg: #F5F6FA; --nv-primary-accent: #325CE8; --nv-secondary-accent: #1B47DA; --surface-tint: rgba(20, 23, 30, 0.03); --surface-border: rgba(20, 23, 30, 0.14); --surface-placeholder: rgba(26, 29, 36, 0.45); --card-rim: rgba(20, 23, 30, 0.08); --header-scrolled-bg: rgba(255, 255, 255, 0.72); } /* ---- Bold, tracked, uppercase section headings ---- */ h1.wp-block-post-title, h2.wp-block-heading { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; } /* ---- Eyebrow label: small tracked tag with a dot, used above headings ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--ti-accent); margin-bottom: 12px; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex-shrink: 0; } /* ---- Pill buttons with a soft glow (replaces default block button look) ---- */ .wp-block-button__link { background: linear-gradient(135deg, var(--nv-primary-accent), var(--nv-secondary-accent)); color: #fff; border: none; border-radius: 999px; padding: 16px 36px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; } .wp-block-button__link:hover { box-shadow: 0 7px 0 rgba(0, 0, 0, 0.25), 0 16px 32px rgba(76, 116, 255, 0.35); } /* ---- Contact form layout (previously unstyled — old theme's CSS was never part of this export) ---- */ .contact-wrapper { width: 100%; } #lenpak-contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; } .form-group { width: 100%; } #lenpak-contact-form input[type="text"], #lenpak-contact-form input[type="email"], #lenpak-contact-form textarea { width: 100%; box-sizing: border-box; font-size: 16px; /* 16px prevents iOS Safari auto-zoom on focus */ } #lenpak-contact-form textarea { resize: vertical; font-family: inherit; } /* ---- Contact form fields: glassy inputs that adapt to light/dark ---- */ #lenpak-contact-form input[type="text"], #lenpak-contact-form input[type="email"], #lenpak-contact-form textarea { background: var(--surface-tint); border: 1px solid var(--surface-border); border-radius: 10px; color: var(--nv-text-color); padding: 12px 16px; transition: border-color 0.25s ease, background 0.25s ease; } #lenpak-contact-form input[type="text"]::placeholder, #lenpak-contact-form input[type="email"]::placeholder, #lenpak-contact-form textarea::placeholder { color: var(--surface-placeholder); } #lenpak-contact-form input[type="text"]:focus, #lenpak-contact-form input[type="email"]:focus, #lenpak-contact-form textarea:focus { outline: none; border-color: var(--nv-primary-accent); background: var(--surface-tint); box-shadow: 0 0 0 3px rgba(76, 116, 255, 0.15); } #lenpak-contact-form button[type="submit"] { background: linear-gradient(135deg, var(--nv-primary-accent), var(--nv-secondary-accent)); color: #fff; border: none; border-radius: 999px; padding: 16px 36px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; } /* ---- Hero: top scrim (keeps transparent header's text legible over the photo) + bottom fade (smooth blend into the theme below), combined as two layered gradients on one pseudo-element — ::after on this same block is already used by .particle-field for the dot texture. ---- */ .hero-fade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 160px), linear-gradient(to top, var(--nv-site-bg), transparent 220px); z-index: 1; pointer-events: none; } /* ---- Light/dark theme toggle button ---- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.14)); background: var(--surface-tint, rgba(255, 255, 255, 0.04)); color: var(--nv-text-color); cursor: pointer; padding: 0; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; } .theme-toggle-btn:hover { border-color: var(--nv-primary-accent); transform: translateY(-1px); } .theme-toggle-btn svg { width: 18px; height: 18px; display: none; } html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: block; } html[data-theme="light"] .theme-toggle-btn .icon-sun { display: block; } /* ---- Subtle scattered particle-dot texture for the hero section ---- */ .particle-field { position: relative; } .particle-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 25% 65%, rgba(255,255,255,0.35), transparent), radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,255,255,0.45), transparent), radial-gradient(1.5px 1.5px at 55% 80%, rgba(255,255,255,0.3), transparent), radial-gradient(1.5px 1.5px at 70% 35%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,0.35), transparent), radial-gradient(1.5px 1.5px at 95% 10%, rgba(255,255,255,0.4), transparent), radial-gradient(1.5px 1.5px at 15% 90%, rgba(255,255,255,0.3), transparent), radial-gradient(1.5px 1.5px at 60% 5%, rgba(255,255,255,0.4), transparent), radial-gradient(1.5px 1.5px at 80% 85%, rgba(255,255,255,0.3), transparent); background-size: 100% 100%; z-index: 1; } /* ============================================ Mobile responsiveness ============================================ */ @media (max-width: 600px) { /* Hero: 600px min-height is too tall on small phones — let it breathe rather than push all content off-screen. */ .wp-block-cover.alignfull.is-light { min-height: 420px !important; } /* Mobile nav modal: stack items cleanly with comfortable tap targets, regardless of what the (untested-here) inherited layout variables do. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { flex-direction: column !important; align-items: flex-start !important; gap: 20px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { margin-left: 0 !important; margin-right: 0 !important; width: 100%; } .wp-block-navigation__responsive-container.is-menu-open a, .wp-block-navigation__responsive-container.is-menu-open button { font-size: 18px; padding-top: 6px; padding-bottom: 6px; } .wp-block-navigation__responsive-container.is-menu-open .theme-toggle-btn { width: 44px; height: 44px; } /* Buttons: full-width on small screens, comfortable tap height */ .wp-block-buttons.is-content-justification-center .wp-block-button { width: 100%; } .wp-block-button__link, #lenpak-contact-form button[type="submit"] { width: 100%; box-sizing: border-box; padding-top: 16px; padding-bottom: 16px; min-height: 48px; /* comfortable tap target */ } /* Eyebrow labels: slightly smaller tracking so short viewports don't wrap oddly */ .eyebrow { font-size: 12px; letter-spacing: 0.12em; } /* Contact form: no fixed max-width constraint on mobile */ #lenpak-contact-form { max-width: 100%; } /* Product image cards: tilt is mouse-only (disabled on touch in JS), so just make sure the rim/shadow still reads clearly at this size */ .tilt-card-inner { border-radius: 10px; } } /* ---- Contact form status messages (success/error) ---- */ .form-status-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; } .form-status-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; } /* ---- Intro paragraph: more inviting, easier to read ---- */ .intro-text { line-height: 1.75; margin-bottom: 28px; } .intro-text:last-child { margin-bottom: 0; }