/* ========================================================================== NANBAN MUSHROOM FARM — brand stylesheet (dual theme: dark default / light) Toggle via [data-theme="light"] on ; default (no attribute, or data-theme="dark") renders the original black/lime theme. ========================================================================== */ :root { /* ---- DARK THEME (default) ---- */ --paper: #0B140D; --panel: #142218; --card: #142218; --ink: #F4F1E4; --ink-dim: #C9C6B8; --leaf: #9FD13A; --leaf-deep: #6FA224; --bark: #5B3A24; --bark-deep: #3E2717; --spot: #E4572E; --navbar-bg: rgba(11, 20, 13, 0.92); --footer-bg: #08100A; --footer-text: rgba(255, 255, 255, 0.65); --border-soft: rgba(159, 209, 58, 0.15); --shadow: rgba(0, 0, 0, 0.4); --shadow-soft: rgba(0, 0, 0, 0.25); --input-bg: #0B140D; --input-border: rgba(244, 241, 228, 0.2); --toggle-icon: "\f4a2"; /* moon (bootstrap-icons) shown in dark mode */ --font-display: 'Anton', sans-serif; --font-script: 'Caveat', cursive; --font-body: 'Poppins', sans-serif; } [data-theme="light"] { --paper: #FAF8F1; --panel: #F3F1E8; --card: #FFFFFF; --ink: #1B4332; --ink-dim: #5C6B60; --leaf: #6FA226; --leaf-deep: #4F7A1B; --bark: #B8792F; --bark-deep: #8F5A1E; --spot: #E4572E; --navbar-bg: rgba(250, 248, 241, 0.92); --footer-bg: #1B4332; --footer-text: rgba(255, 255, 255, 0.65); --border-soft: rgba(27, 67, 50, 0.08); --shadow: rgba(27, 67, 50, 0.12); --shadow-soft: rgba(27, 67, 50, 0.06); --input-bg: #F3F1E8; --input-border: rgba(27, 67, 50, 0.12); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 300; line-height: 1.7; transition: background-color 0.25s ease, color 0.25s ease; } ::selection { background: var(--leaf); color: var(--paper); } a { text-decoration: none; } img { max-width: 100%; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } .eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.72rem; color: var(--leaf); } h1, h2, h3, .display-font { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); line-height: 1.05; } h2 { font-size: clamp(2rem, 4vw, 3rem); } .script { font-family: var(--font-script); color: var(--leaf); font-size: 1.6rem; font-weight: 500; } .text-leaf { color: var(--leaf) !important; } .bg-forest { background-color: var(--paper) !important; } .bg-forest-2 { background-color: var(--panel) !important; } .text-white-50 { color: var(--ink-dim) !important; } /* ---------- Theme toggle switch ---------- */ .theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--leaf); background: transparent; color: var(--leaf); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer; transition: all 0.2s ease; } .theme-toggle:hover { background: var(--leaf); color: var(--paper); } .theme-toggle .bi-sun-fill { display: none; } [data-theme="light"] .theme-toggle .bi-moon-stars-fill { display: none; } [data-theme="light"] .theme-toggle .bi-sun-fill { display: inline-block; } /* ---------- Navbar ---------- */ .navbar-nanban { background: var(--navbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border-soft); } .navbar-nanban .navbar-brand { font-family: var(--font-display); color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.35rem; } .img-fluid{ width: 100px; } .navbar-nanban .navbar-brand span { color: var(--leaf); } .navbar-nanban .nav-link { color: var(--ink-dim); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0.5rem; transition: color 0.2s ease; } .navbar-nanban .nav-link:hover, .navbar-nanban .nav-link.active { color: var(--leaf); } .navbar-toggler-icon { filter: invert(0.5); } [data-theme="dark"] .navbar-toggler-icon, :root:not([data-theme="light"]) .navbar-toggler-icon { filter: invert(1); } .btn-call { background: var(--leaf); color: var(--paper); font-weight: 600; border-radius: 999px; padding: 0.5rem 1.3rem; font-size: 0.88rem; letter-spacing: 0.02em; border: none; transition: transform 0.2s ease, background 0.2s ease; } .btn-call:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); } .btn-outline-leaf { border: 1.5px solid var(--leaf); color: var(--leaf); border-radius: 999px; padding: 0.5rem 1.3rem; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.02em; transition: all 0.2s ease; background: transparent; } .btn-outline-leaf:hover { background: var(--leaf); color: var(--paper); } /* ---------- The Seal (signature element) ---------- */ .seal { width: 132px; height: 132px; border-radius: 50%; border: 2px dashed var(--leaf); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; position: relative; flex-shrink: 0; background: var(--card); box-shadow: 0 10px 24px var(--shadow-soft); } .seal::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px solid var(--border-soft); } .seal-text { font-family: var(--font-display); color: var(--leaf); font-size: 0.95rem; line-height: 1.15; text-transform: uppercase; } .seal-text small { display: block; font-family: var(--font-body); color: var(--ink); font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 400; text-transform: uppercase; margin-top: 3px; } /* ========================================================================== 3D CARTOON MUSHROOM — signature hero visual ========================================================================== */ .mushroom-3d-stage { perspective: 900px; display: flex; align-items: center; justify-content: center; } .mushroom-3d { transform-style: preserve-3d; animation: mushroomFloat 5s ease-in-out infinite, mushroomTilt 9s ease-in-out infinite; filter: drop-shadow(0 25px 20px var(--shadow)); width: 100%; max-width: 420px; } .mushroom-3d:hover { animation-play-state: paused; } @keyframes mushroomFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-22px); } } @keyframes mushroomTilt { 0%, 100% { transform: rotateY(-8deg) rotateZ(-2deg); } 50% { transform: rotateY(10deg) rotateZ(2deg); } } .mushroom-sticker { position: absolute; filter: drop-shadow(0 10px 12px var(--shadow-soft)); animation: mushroomFloat 4s ease-in-out infinite; } .mushroom-sticker.delay1 { animation-delay: 0.6s; } .mushroom-sticker.delay2 { animation-delay: 1.3s; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--leaf) 12%, transparent) 0, transparent 45%), radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--bark) 15%, transparent) 0, transparent 45%), var(--paper); overflow: hidden; } .hero-badge-float { position: absolute; top: 55%; left: 45%; } .hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); letter-spacing: 0.01em; } .hero-divider { width: 90px; height: 3px; background: var(--leaf); margin: 1.1rem 0; } /* ---------- Sections ---------- */ section { padding: 5.5rem 0; } .divider-wood { height: 4px; width: 64px; background: var(--bark); border-radius: 2px; } .card-nanban { background: var(--card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 2rem 1.6rem; height: 100%; box-shadow: 0 14px 30px var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } .card-nanban:hover { transform: translateY(-8px) rotate(-0.5deg); box-shadow: 0 20px 34px var(--shadow); } .icon-wrap { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--leaf) 12%, transparent); border: 1.5px solid var(--leaf); display: flex; align-items: center; justify-content: center; color: var(--leaf); font-size: 1.4rem; margin-bottom: 1.1rem; } .wood-strip { background: linear-gradient(180deg, var(--bark) 0%, var(--bark-deep) 100%); color: #fff; padding: 0.9rem 0; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; font-weight: 600; text-align: center; } .step { display: flex; gap: 1.4rem; position: relative; padding-bottom: 3rem; } .step:last-child { padding-bottom: 0; } .step::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: 0; width: 1px; background: repeating-linear-gradient(180deg, var(--leaf) 0 6px, transparent 6px 12px); opacity: 0.55; } .step:last-child::before { display: none; } .step-num { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 2px solid var(--leaf); color: var(--leaf); font-family: var(--font-display); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 8px 18px var(--shadow-soft); } .product-card { background: var(--card); border-radius: 18px; overflow: hidden; border: 1px solid var(--border-soft); box-shadow: 0 14px 30px var(--shadow-soft); height: 100%; transition: transform 0.25s ease; } .product-card:hover { transform: translateY(-6px); } .product-card .tag { background: var(--leaf); color: var(--paper); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 999px; display: inline-block; } .gallery-item { border-radius: 14px; overflow: hidden; position: relative; border: 1px solid var(--border-soft); box-shadow: 0 10px 20px var(--shadow-soft); } .gallery-item img { transition: transform 0.4s ease; display: block; width: 100%; height: 100%; object-fit: cover; } .gallery-item:hover img { transform: scale(1.06); } .contact-strip { background: var(--card); border-radius: 20px; border: 1px solid var(--border-soft); box-shadow: 0 20px 40px var(--shadow-soft); } .form-control-nanban { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--ink); border-radius: 8px; padding: 0.75rem 1rem; } .form-control-nanban:focus { background: var(--input-bg); color: var(--ink); border-color: var(--leaf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 20%, transparent); } .form-control-nanban::placeholder { color: var(--ink-dim); } .social-pill { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--leaf); color: var(--leaf); display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .social-pill:hover { background: var(--leaf); color: var(--paper); } /* ---------- Footer ---------- */ footer { background: var(--footer-bg); border-top: 1px solid var(--border-soft); padding: 3rem 0 1.5rem; } footer .brand { font-family: var(--font-display); text-transform: uppercase; color: #fff; } footer .brand span { color: var(--leaf); } footer p, footer li, footer .text-white-50 { color: var(--footer-text) !important; } footer a { color: var(--footer-text); } footer a:hover { color: var(--leaf); } footer .icon-wrap, footer .text-leaf { color: var(--leaf) !important; } .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3); z-index: 999; transition: transform 0.2s ease; } .whatsapp-float:hover { transform: scale(1.08); color: #fff; } @media (max-width: 767px) { section { padding: 3.5rem 0; } .step-num { width: 46px; height: 46px; font-size: 1.05rem; } .step::before { left: 22px; } .mushroom-3d { max-width: 260px; } .navbar-nanban .navbar-brand { font-size: 12px; } }