/* ========================================================= FUJI CUTTING LANDING PAGE Scoped CSS - designed not to affect surrounding website ========================================================= */ .fuji-cutting-page, .fuji-cutting-page * { box-sizing: border-box; } .fuji-cutting-page { --fuji-green: #006b45; --fuji-green-dark: #004c32; --fuji-green-light: #eaf5f0; --fuji-red: #8b1e23; --fuji-red-dark: #68151a; --fuji-red-light: #faeeee; --fuji-black: #171a19; --fuji-gray: #59615e; --fuji-border: #dce4e0; --fuji-bg: #f6f8f7; --fuji-white: #ffffff; width: 100%; color: var(--fuji-black); background: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.75; } .fuji-cutting-page img { display: block; max-width: 100%; width: auto; height: auto; margin-left: auto; margin-right: auto; object-fit: contain; } .fuji-cutting-page figure { margin: 28px 0; } .fuji-cutting-page iframe { max-width: 100%; } .fuji-cutting-page a { color: var(--fuji-green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .fuji-cutting-page a:hover { color: var(--fuji-red); } .fuji-cutting-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .fuji-cutting-section { padding: 72px 0; } .fuji-cutting-section--light { background: var(--fuji-bg); } .fuji-cutting-section--green { background: var(--fuji-green); color: #ffffff; } .fuji-cutting-section--red { background: var(--fuji-red); color: #ffffff; } .fuji-cutting-eyebrow { display: inline-block; margin-bottom: 12px; color: var(--fuji-red); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; font-size: 16px; } .fuji-cutting-section--green .fuji-cutting-eyebrow, .fuji-cutting-section--red .fuji-cutting-eyebrow { color: #ffffff; } .fuji-cutting-page h1 { margin: 0 0 20px; font-size: clamp(34px, 5vw, 62px); line-height: 1.08; letter-spacing: -1.2px; font-weight: 800; } .fuji-cutting-page h2 { margin: 0 0 22px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.18; font-weight: 800; } .fuji-cutting-page h3 { margin: 28px 0 12px; font-size: clamp(21px, 2.2vw, 29px); line-height: 1.3; font-weight: 750; } .fuji-cutting-page p { margin: 0 0 20px; font-size: 17px; } .fuji-cutting-page li { font-size: 17px; } .fuji-cutting-page strong { font-weight: 800; } /* ========================================================= HERO ========================================================= */ .fuji-cutting-hero { position: relative; overflow: hidden; background: linear-gradient( 115deg, rgba(0, 75, 50, 0.97), rgba(0, 107, 69, 0.91) ); color: #ffffff; padding: 86px 0 70px; border-bottom: 6px solid var(--fuji-red); } .fuji-cutting-hero:after { content: ""; position: absolute; right: -100px; bottom: -140px; width: 420px; height: 420px; border: 80px solid rgba(255,255,255,0.06); border-radius: 50%; } .fuji-cutting-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); gap: 50px; align-items: center; position: relative; z-index: 2; } .fuji-cutting-hero h1 { max-width: 850px; } .fuji-cutting-hero-subtitle { max-width: 850px; font-size: 20px !important; line-height: 1.65; opacity: 0.96; } .fuji-cutting-japanese { display: inline-block; margin-top: 12px; padding: 7px 12px; background: rgba(255,255,255,0.12); border-left: 4px solid #ffffff; font-size: 17px; font-weight: 700; letter-spacing: .3px; } .fuji-cutting-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .fuji-cutting-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 22px; border-radius: 5px; font-size: 16px; font-weight: 800; text-decoration: none !important; transition: .2s ease; } .fuji-cutting-btn--primary { background: #ffffff; color: var(--fuji-green-dark) !important; } .fuji-cutting-btn--secondary { border: 2px solid #ffffff; color: #ffffff !important; } .fuji-cutting-btn:hover { transform: translateY(-2px); } .fuji-cutting-trust-card { background: #ffffff; color: var(--fuji-black); padding: 28px; border-radius: 8px; border-top: 6px solid var(--fuji-red); box-shadow: 0 18px 50px rgba(0,0,0,.16); } .fuji-cutting-trust-card h2 { font-size: 25px; color: var(--fuji-green-dark); margin-bottom: 16px; } .fuji-cutting-trust-card ul { margin: 0; padding-left: 22px; } /* ========================================================= TRUST BAR ========================================================= */ .fuji-cutting-trust-bar { border-bottom: 1px solid var(--fuji-border); background: #ffffff; } .fuji-cutting-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .fuji-cutting-trust-item { padding: 22px 18px; border-right: 1px solid var(--fuji-border); text-align: center; } .fuji-cutting-trust-item:last-child { border-right: 0; } .fuji-cutting-trust-number { display: block; color: var(--fuji-green); font-size: 25px; font-weight: 900; } .fuji-cutting-trust-label { font-size: 16px; font-weight: 700; } /* ========================================================= TOC ========================================================= */ .fuji-cutting-toc { margin: 0 auto 65px; padding: 28px 30px; background: var(--fuji-green-light); border-left: 6px solid var(--fuji-green); border-radius: 4px; } .fuji-cutting-toc-title { color: var(--fuji-green-dark); font-size: 22px; font-weight: 800; margin-bottom: 14px; } .fuji-cutting-toc ol { margin: 0; padding-left: 25px; columns: 2; column-gap: 50px; } .fuji-cutting-toc li { margin-bottom: 8px; break-inside: avoid; } /* ========================================================= CONTENT CARDS ========================================================= */ .fuji-cutting-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 45px; align-items: start; } .fuji-cutting-three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; } .fuji-cutting-card { background: #ffffff; border: 1px solid var(--fuji-border); border-top: 5px solid var(--fuji-green); border-radius: 5px; padding: 27px; height: 100%; box-shadow: 0 7px 25px rgba(0,0,0,.045); } .fuji-cutting-card--red { border-top-color: var(--fuji-red); } .fuji-cutting-card h3 { margin-top: 0; color: var(--fuji-green-dark); } .fuji-cutting-number { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; margin-bottom: 12px; background: var(--fuji-green); color: #ffffff; border-radius: 50%; font-weight: 900; } /* ========================================================= PRODUCT TABLE ========================================================= */ .fuji-cutting-table-wrap { width: 100%; overflow-x: auto; margin: 30px 0; border: 1px solid var(--fuji-border); border-radius: 5px; } .fuji-cutting-table { width: 100%; min-width: 900px; border-collapse: collapse; background: #ffffff; } .fuji-cutting-table th { padding: 16px; background: var(--fuji-green); color: #ffffff; text-align: left; font-size: 16px; } .fuji-cutting-table td { padding: 17px 16px; border-bottom: 1px solid var(--fuji-border); vertical-align: top; font-size: 16px; } .fuji-cutting-table tr:last-child td { border-bottom: 0; } .fuji-cutting-table tr:nth-child(even) td { background: #f8faf9; } .fuji-cutting-jp { color: var(--fuji-red); font-weight: 800; } /* ========================================================= TECHNICAL CALLOUT ========================================================= */ .fuji-cutting-highlight { margin: 30px 0; padding: 27px 30px; background: var(--fuji-green-light); border-left: 6px solid var(--fuji-green); border-radius: 3px; } .fuji-cutting-warning { margin: 30px 0; padding: 27px 30px; background: var(--fuji-red-light); border-left: 6px solid var(--fuji-red); border-radius: 3px; } .fuji-cutting-highlight strong, .fuji-cutting-warning strong { color: var(--fuji-green-dark); } /* ========================================================= VIDEO ========================================================= */ .fuji-cutting-video { margin: 32px 0; background: #111; padding: 10px; border-radius: 5px; } .fuji-cutting-video-inner { position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; } .fuji-cutting-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .fuji-cutting-video-caption { margin-top: 10px; color: var(--fuji-gray); font-size: 16px; text-align: center; } /* ========================================================= PROCESS ========================================================= */ .fuji-cutting-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; } .fuji-cutting-process-item { position: relative; padding: 25px 20px; background: #ffffff; border: 1px solid var(--fuji-border); border-radius: 5px; } .fuji-cutting-process-item:after { content: "→"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: var(--fuji-red); font-size: 25px; font-weight: 900; } .fuji-cutting-process-item:last-child:after { display: none; } /* ========================================================= RPM GUIDE ========================================================= */ .fuji-cutting-rpm-box { background: var(--fuji-black); color: #ffffff; padding: 32px; border-radius: 6px; margin-top: 30px; } .fuji-cutting-rpm-box h3 { color: #ffffff; margin-top: 0; } .fuji-cutting-rpm-box table { width: 100%; border-collapse: collapse; } .fuji-cutting-rpm-box th, .fuji-cutting-rpm-box td { padding: 13px; border-bottom: 1px solid rgba(255,255,255,.18); text-align: left; } /* ========================================================= FAQ ========================================================= */ .fuji-cutting-faq { border-top: 1px solid var(--fuji-border); } .fuji-cutting-faq details { padding: 21px 0; border-bottom: 1px solid var(--fuji-border); } .fuji-cutting-faq summary { cursor: pointer; list-style: none; font-size: 18px; font-weight: 800; color: var(--fuji-green-dark); } .fuji-cutting-faq summary::-webkit-details-marker { display: none; } .fuji-cutting-faq summary:after { content: "+"; float: right; color: var(--fuji-red); font-size: 24px; } .fuji-cutting-faq details[open] summary:after { content: "−"; } .fuji-cutting-faq-answer { padding: 15px 35px 0 0; } /* ========================================================= CTA ========================================================= */ .fuji-cutting-cta { padding: 70px 0; background: linear-gradient( 125deg, var(--fuji-green-dark), var(--fuji-green) ); color: #ffffff; text-align: center; } .fuji-cutting-cta h2 { color: #ffffff; max-width: 850px; margin-left: auto; margin-right: auto; } .fuji-cutting-cta p { max-width: 780px; margin: 0 auto 25px; } .fuji-cutting-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; } /* ========================================================= SMALL TRUST NOTES ========================================================= */ .fuji-cutting-note { font-size: 16px !important; color: var(--fuji-gray); } .fuji-cutting-disclaimer { margin-top: 35px; padding: 20px; background: #f4f4f4; border-left: 4px solid #777; color: #444; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 900px) { .fuji-cutting-hero-grid, .fuji-cutting-two-col { grid-template-columns: 1fr; } .fuji-cutting-three-col { grid-template-columns: 1fr; } .fuji-cutting-trust-grid { grid-template-columns: repeat(2, 1fr); } .fuji-cutting-trust-item:nth-child(2) { border-right: 0; } .fuji-cutting-process { grid-template-columns: repeat(2, 1fr); } .fuji-cutting-process-item:after { display: none; } .fuji-cutting-toc ol { columns: 1; } } @media (max-width: 600px) { .fuji-cutting-container { width: min(100% - 28px, 1180px); } .fuji-cutting-section { padding: 48px 0; } .fuji-cutting-hero { padding: 55px 0 45px; } .fuji-cutting-hero-subtitle { font-size: 18px !important; } .fuji-cutting-trust-grid { grid-template-columns: 1fr 1fr; } .fuji-cutting-trust-item { padding: 18px 10px; } .fuji-cutting-trust-number { font-size: 21px; } .fuji-cutting-trust-label { font-size: 16px; } .fuji-cutting-process { grid-template-columns: 1fr; } .fuji-cutting-highlight, .fuji-cutting-warning { padding: 22px; } .fuji-cutting-hero-actions, .fuji-cutting-cta-actions { flex-direction: column; } .fuji-cutting-btn { width: 100%; } .fuji-cutting-page p, .fuji-cutting-page li { font-size: 17px; } }