/* ========================================================================== Scoped CSS: All styles apply only within .fuji-landing-page-wrapper to prevent global pollution ========================================================================== */ .fuji-landing-page-wrapper { --fuji-green: #03643C; --fuji-green-light: #F0F8F1; --fuji-red: #CE0024; --fuji-red-dark: #9E000F; --text-main: #2C332F; --text-muted: #4F5552; --bg-white: #FFFFFF; --border-color: #DEE2E6; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-main); background-color: var(--bg-white); box-sizing: border-box; } .fuji-landing-page-wrapper * { box-sizing: inherit; } .fuji-landing-page-wrapper h1, .fuji-landing-page-wrapper h2, .fuji-landing-page-wrapper h3, .fuji-landing-page-wrapper h4 { font-family: 'Roboto Condensed', sans-serif; color: var(--fuji-green); line-height: 1.25; margin-top: 0; margin-bottom: 0.8rem; } .fuji-landing-page-wrapper h1 { font-size: 2.5rem; text-transform: uppercase; border-bottom: 4px solid var(--fuji-red); display: inline-block; padding-bottom: 8px; margin-bottom: 1.2rem; } .fuji-landing-page-wrapper h2 { font-size: 2rem; margin-top: 2rem; padding-left: 15px; border-left: 5px solid var(--fuji-red); background-color: var(--fuji-green-light); padding: 8px 15px; } .fuji-landing-page-wrapper h3 { font-size: 1.5rem; margin-top: 1.5rem; color: #111; margin-bottom: 0.6rem;} .fuji-landing-page-wrapper p { margin-top: 0; margin-bottom: 0.8rem; } .fuji-landing-page-wrapper ul, .fuji-landing-page-wrapper ol { margin-top: 0; margin-bottom: 1rem; margin-left: 1.5rem; } .fuji-landing-page-wrapper li { margin-bottom: 0.3rem; } .fuji-landing-page-wrapper a { color: var(--fuji-red); text-decoration: none; font-weight: 600; } .fuji-landing-page-wrapper a:hover { text-decoration: underline; } .fuji-landing-page-wrapper .highlight { background-color: var(--fuji-green-light); padding: 1px 5px; border-radius: 3px; font-weight: 600; color: var(--fuji-green); } .fuji-landing-page-wrapper .engineer-quote { font-style: italic; border-left: 4px solid var(--fuji-green); padding: 1rem; background-color: var(--fuji-green-light); margin: 1.5rem 0; font-size: 1.1rem; color: var(--text-muted); } .fuji-landing-page-wrapper .safety-warning { border: 2px solid var(--fuji-red); background-color: #FFF0F0; padding: 1rem; border-radius: 8px; margin: 1.5rem 0; } .fuji-landing-page-wrapper .safety-warning h4 { color: var(--fuji-red); margin-top: 0; display: flex; align-items: center; gap: 10px; margin-bottom: 0.4rem; } .fuji-landing-page-wrapper .safety-warning p { margin-bottom: 0.4rem; font-size: 0.95rem; line-height: 1.5; } .fuji-landing-page-wrapper .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .fuji-landing-page-wrapper header { padding: 2.5rem 0 1.5rem 0; background-color: var(--bg-white); } .fuji-landing-page-wrapper section { padding: 1.8rem 0; border-bottom: 1px solid var(--border-color); } .fuji-landing-page-wrapper section:last-child { border-bottom: none; } .fuji-landing-page-wrapper .toc-box { background: var(--fuji-green-light); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0 2.5rem 0; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .fuji-landing-page-wrapper .toc-box h3 { margin-top: 0; color: var(--fuji-green); margin-bottom: 0.6rem; } .fuji-landing-page-wrapper .toc-box ul { list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 0; } .fuji-landing-page-wrapper .toc-box li { margin-bottom: 0.6rem; } .fuji-landing-page-wrapper .toc-box a { color: var(--text-main); font-weight: 400; border-bottom: 1px dashed #ccc; padding-bottom: 1px; } .fuji-landing-page-wrapper .toc-box a:hover { color: var(--fuji-red); text-decoration: none; border-bottom-color: var(--fuji-red); } .fuji-landing-page-wrapper .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } .fuji-landing-page-wrapper .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .fuji-landing-page-wrapper .card { background: var(--bg-white); border: 1px solid var(--border-color); border-top: 4px solid var(--fuji-green); border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .fuji-landing-page-wrapper .card h4 { color: var(--fuji-green); font-size: 1.25rem; margin-bottom: 0.6rem;} .fuji-landing-page-wrapper .card p { font-size: 0.95rem; margin-bottom: 0.6rem; line-height: 1.5; } .fuji-landing-page-wrapper .table-wrapper { overflow-x: auto; margin: 1.5rem 0; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .fuji-landing-page-wrapper table { width: 100%; min-width: 600px; border-collapse: collapse; text-align: left; background: var(--bg-white); font-size: 0.95rem; } .fuji-landing-page-wrapper th, .fuji-landing-page-wrapper td { padding: 0.8rem; border: 1px solid var(--border-color); } .fuji-landing-page-wrapper th { background-color: var(--fuji-green); color: var(--bg-white); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; } .fuji-landing-page-wrapper tr:nth-child(even) { background-color: var(--fuji-green-light); } .fuji-landing-page-wrapper .winner-cell { background-color: rgba(3, 100, 60, 0.1); font-weight: bold; color: var(--fuji-green); border-left: 3px solid var(--fuji-green); } .fuji-landing-page-wrapper .img-responsive { display: block; margin: 0 auto 0.8rem auto; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .fuji-landing-page-wrapper .img-caption { font-size: 0.9rem; color: var(--text-muted); text-align: center; margin-bottom: 1.5rem; font-style: italic; } .fuji-landing-page-wrapper .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 900px; margin: 2rem auto; border-radius: 8px; background: #000; box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .fuji-landing-page-wrapper .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .fuji-landing-page-wrapper .btn { display: inline-block; background-color: var(--fuji-red); color: var(--bg-white); padding: 0.8rem 1.8rem; border-radius: 4px; font-weight: 700; text-transform: uppercase; transition: background 0.3s; border: none; cursor: pointer; text-align: center; font-size: 0.95rem; letter-spacing: 1px;} .fuji-landing-page-wrapper .btn:hover { background-color: var(--fuji-red-dark); text-decoration: none; } .fuji-landing-page-wrapper .btn-green { background-color: var(--fuji-green); } .fuji-landing-page-wrapper .btn-green:hover { background-color: #024D2E; } .fuji-landing-page-wrapper .cta-container { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; } .fuji-landing-page-wrapper .footer-cta { background-color: var(--fuji-green); color: var(--bg-white); padding: 2.5rem 20px; text-align: center; margin-top: 2rem; border-top: 4px solid var(--fuji-red); } .fuji-landing-page-wrapper .footer-cta h2 { color: var(--bg-white); background: transparent; border: none; padding: 0; justify-content: center; text-align: center; margin-top: 0; margin-bottom: 0.8rem; } .fuji-landing-page-wrapper .footer-cta p { color: #DAEAE2; font-size: 1.1rem; max-width: 800px; margin: 0 auto 1.5rem auto; line-height: 1.5; } @media (max-width: 900px) { .fuji-landing-page-wrapper .grid-2, .fuji-landing-page-wrapper .grid-3 { grid-template-columns: 1fr; gap: 1.5rem; } .fuji-landing-page-wrapper h1 { font-size: 2rem; } .fuji-landing-page-wrapper .toc-box { padding: 1rem; margin-top: 1rem; } .fuji-landing-page-wrapper .toc-box li { margin-bottom: 0.5rem; } .fuji-landing-page-wrapper .cta-container { flex-direction: column; gap: 0.8rem; } .fuji-landing-page-wrapper .btn { width: 100%; padding: 0.8rem; } .fuji-landing-page-wrapper table td, .fuji-landing-page-wrapper table th { width: auto !important; } }