Fisherman's Guild | 閽撹€呭叕浼?/title> <meta name="description" content="鍏ㄧ悆绮捐嫳鍨傞挀鍦堝眰锛岄挀鑰呯簿绁炲鍥笌琛屼笟璧嬭兘骞冲彴銆? /> <meta property="og:title" content="Fisherman's Guild | 閽撹€呭叕浼? /> <meta property="og:description" content="璁╃儹鐖辨湁褰掑睘锛岃涓撲笟鏈夋爣鍑嗐€? /> <meta property="og:image" content="/og.png" /> <link rel="icon" href="/favicon.svg" /> <style> :root { --yellow:#f5a623; --yellow2:#ffc107; --ink:#11110f; --paper:#f4f3ef; --line:#d7d5ce; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; } button,a { font:inherit; } button { cursor:pointer; } .shell { width:min(1240px,calc(100% - 64px)); margin:auto; } .nav { position:fixed; z-index:50; top:0; left:0; right:0; height:72px; display:flex; align-items:center; gap:36px; padding:0 36px; color:#fff; background:rgba(245,166,35,.90); backdrop-filter:blur(18px); border:0; box-shadow:none; } .brand { display:flex; align-items:center; gap:11px; border:0; background:none; color:inherit; padding:0; } .brand-logo { width:58px; height:48px; object-fit:contain; filter:drop-shadow(0 2px 5px #000); } .brand-name { text-align:left; font-size:11px; letter-spacing:.12em; font-weight:800; white-space:nowrap; } .brand-name small { display:block; color:#aaa; margin-top:3px; letter-spacing:.3em; } .nav nav { display:flex; gap:25px; margin-left:auto; background:transparent !important; } .nav nav button,.nav nav a,.lang,.edit-btn { color:inherit; border:0; background:none; font-size:12px; opacity:.78; padding:10px 0; white-space:nowrap; text-decoration:none; } .nav nav button:hover,.nav nav a:hover { color:var(--yellow); opacity:1; } .nav-actions { display:flex; align-items:center; gap:13px; } .lang { width:auto; min-width:92px; border:1px solid rgba(255,255,255,.35); border-radius:20px; color:inherit; background:transparent; padding:6px 10px; outline:0; } .lang option { color:#111; background:#fff; } .menu-btn { display:none; color:#fff; background:none; border:1px solid rgba(255,255,255,.35); border-radius:20px; height:34px; padding:0 12px; font-size:11px; letter-spacing:.08em; opacity:.88; } .edit-btn { display:none; color:#111; background:var(--yellow); padding:8px 15px; border-radius:20px; opacity:1; } .edit-hint { display:none; position:fixed; z-index:60; left:50%; top:82px; transform:translateX(-50%); background:#fff; border:1px solid var(--yellow); box-shadow:0 8px 30px #0002; padding:10px 18px; font-size:12px; border-radius:30px; } .is-editing .edit-hint { display:block; } .hero { min-height:100svh; height:900px; max-height:1000px; background-image:url("/images/hero.jpg"); background-size:cover; background-position:center; position:relative; display:flex; align-items:flex-end; color:#fff; } .hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.38) 48%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.62),transparent 55%); } .hero-copy { position:relative; z-index:2; width:min(1240px,calc(100% - 64px)); margin:0 auto 12vh; } .eyebrow,.section-tag { color:var(--yellow); font-size:12px; letter-spacing:.22em; font-weight:800; } h1 { margin:20px 0 26px; white-space:pre-line; font-size:clamp(50px,6.8vw,100px); line-height:.98; max-width:920px; font-weight:760; } .lead { max-width:620px; color:#ddd; font-size:17px; line-height:1.75; margin:0 0 34px; } .hero-buttons { display:flex; gap:12px; } .button { min-height:48px; padding:0 25px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:0; font-weight:700; font-size:14px; } .primary { color:#111; background:var(--yellow); } .glass { color:#fff; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(10px); } .scroll-cue { position:absolute; z-index:2; color:#fff; right:38px; bottom:32px; text-decoration:none; font-size:9px; letter-spacing:.2em; writing-mode:vertical-rl; display:flex; align-items:center; gap:8px; } .scroll-cue span { display:block; height:45px; border-left:1px solid var(--yellow); } .replace-image { display:none; position:absolute; z-index:5; top:100px; right:28px; border:1px solid #fff; color:#fff; background:#1119; border-radius:30px; padding:10px 16px; } .is-editing .replace-image { display:block; } .is-editing [contenteditable="true"] { outline:1px dashed var(--yellow); outline-offset:5px; } .belief { padding:145px 0 130px; } .statement { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; align-items:start; margin-bottom:105px; } .statement h2,.display { margin:0; font-size:clamp(45px,5.5vw,78px); line-height:1.02; } .statement p { font-size:clamp(22px,2.5vw,34px); line-height:1.45; margin:0; color:#555; } .pillars { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .pillars article { padding:28px 24px 0 24px; min-height:180px; border-right:1px solid var(--line); } .pillars article:not(:first-child) { padding-left:24px; } .pillars article:last-child { border:0; } .pillars span,.card-number { color:var(--yellow); font-size:11px; font-weight:800; } .pillars h3 { font-size:20px; margin:45px 0 10px; } .pillars p { color:#777; font-size:13px; line-height:1.65; margin:0; } .action-section { background:#11110f; color:#fff; padding:130px 0; } .action-section .display { max-width:850px; margin:18px 0 70px; } .action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .action-card { min-height:510px; padding:26px; background:#1d1d1a; position:relative; overflow:hidden; display:flex; flex-direction:column; } .card-art { height:230px; margin:22px -26px 30px; display:grid; place-items:center; overflow:hidden; } .card-art span { font-size:130px; font-weight:200; } .art-1 { background:radial-gradient(circle,#ffc107 0 13%,transparent 14%),repeating-radial-gradient(circle,#f5a623 0 2px,#111 3px 14px); } .art-2 { background:linear-gradient(135deg,#2a2a26 50%,var(--yellow) 50%); } .art-3 { color:#111; background:linear-gradient(160deg,#f5a623,#ffda6b); } .action-card h3 { font-size:30px; margin:0 0 15px; } .action-card p { color:#aaa; line-height:1.75; margin:0; font-size:14px; } .action-card button { position:absolute; right:22px; bottom:18px; background:none; border:0; color:var(--yellow); font-size:25px; } .numbers { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #353532; margin-top:90px; padding-top:40px; } .numbers div { display:flex; align-items:end; gap:16px; } .numbers strong { color:var(--yellow); font-size:50px; line-height:1; } .numbers span { color:#999; font-size:12px; max-width:150px; padding-bottom:5px; } .licensing { padding:140px 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; align-items:center; } .licensing-copy .display { margin:20px 0 28px; } .licensing-copy > p:not(.section-tag) { color:#666; line-height:1.8; font-size:16px; } .text-link { border:0; background:none; padding:18px 0 8px; border-bottom:1px solid #aaa; font-weight:700; } .text-link span { color:var(--yellow); margin-left:16px; } .product-mosaic { height:650px; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); gap:8px; } .product-mosaic img { width:100%; height:100%; object-fit:cover; filter:saturate(.7); } .product-mosaic img:first-child { grid-row:1/3; grid-column:1/3; } .product-mosaic img:nth-child(2) { grid-row:1/2; grid-column:3; } .product-mosaic img:nth-child(3) { grid-row:2/4; grid-column:3; } .yellow-tile { background:var(--yellow); color:#111; display:flex; flex-direction:column; align-items:center; justify-content:center; } .yellow-tile span { font-size:50px; font-weight:900; } .yellow-tile small { font-size:8px; letter-spacing:.14em; } .values-band { overflow:hidden; white-space:nowrap; padding:20px 0; background:var(--yellow); font-weight:900; font-size:14px; letter-spacing:.12em; } .values-band span { display:inline-block; padding-right:80px; animation:marquee 24s linear infinite; } @keyframes marquee { to { transform:translateX(-100%); } } .join-section { min-height:760px; padding:120px 40px; background:#0b0b0a; color:#fff; display:grid; place-items:center; position:relative; overflow:hidden; text-align:center; } .join-orbit { display:none !important; position:absolute; width:680px; height:680px; border:1px solid #f5a62344; border-radius:50%; box-shadow:0 0 120px #f5a62318,inset 0 0 120px #f5a62312; } .join-orbit:before,.join-orbit:after { content:""; position:absolute; border:1px solid #fff1; border-radius:50%; inset:90px; } .join-orbit:after { inset:210px; background:var(--yellow); box-shadow:0 0 90px var(--yellow); opacity:.75; } .join-copy { position:relative; z-index:2; max-width:850px; } .join-copy > p:first-child { color:var(--yellow); font-size:11px; letter-spacing:.2em; } .join-copy h2 { font-size:clamp(48px,6.5vw,88px); line-height:1; margin:32px 0; } .join-copy > p { color:#aaa; line-height:1.8; max-width:650px; margin:0 auto 35px; } .join-copy > div { display:flex; justify-content:center; gap:12px; } .outline { background:transparent; color:#fff; border:1px solid #777; } footer { background:#0b0b0a; color:#777; border-top:1px solid #252522; padding:70px 4vw 34px; font-size:11px; line-height:1.6; } .footer-grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.25fr repeat(5,1fr); gap:32px; align-items:start; } .footer-brand { display:flex; align-items:center; gap:15px; color:#fff; } .footer-logo { width:82px; height:66px; object-fit:contain; } .footer-brand small { color:#888; } .footer-grid h4 { color:#fff; margin:0 0 14px; font-size:12px; letter-spacing:.12em; } .footer-grid a,.footer-grid button { display:block; color:#8d8d87; text-decoration:none; background:none; border:0; padding:6px 0; font-size:12px; text-align:left; } .footer-grid a:hover,.footer-grid button:hover { color:var(--yellow); } .footer-note { max-width:260px; margin:14px 0 0; } .footer-bottom { max-width:1240px; margin:46px auto 0; padding-top:22px; border-top:1px solid #252522; display:flex; justify-content:space-between; gap:24px; color:#666; } .modal-backdrop { display:none; position:fixed; z-index:100; inset:0; background:#000b; backdrop-filter:blur(12px); place-items:center; padding:20px; } .modal-backdrop.open { display:grid; } .modal { background:#f4f3ef; width:min(590px,100%); padding:55px; text-align:center; box-shadow:0 30px 100px #0008; } .modal-kicker { color:#b77800; font-size:11px; letter-spacing:.18em; font-weight:800; } .modal h2 { font-size:40px; margin:20px 0; } .modal p { color:#666; line-height:1.7; margin:0 0 30px; } @media(max-width:960px) { .nav { padding:0 20px; height:64px; } .nav nav { display:none; position:absolute; top:64px; left:0; right:0; margin:0; padding:16px 24px 20px; background:transparent !important; backdrop-filter:blur(18px); flex-direction:column; gap:2px; } .nav.open nav { display:flex; } .nav nav a,.nav nav button { padding:13px 0; border-top:1px solid rgba(255,255,255,.10); font-size:14px; } .menu-btn { display:inline-flex; align-items:center; justify-content:center; } .nav-actions { margin-left:auto; } .shell,.hero-copy { width:min(100% - 36px,1240px); } .hero { height:820px; background-position:57% center; } .hero-copy { margin-bottom:90px; } .statement,.licensing { grid-template-columns:1fr; } .statement { gap:35px; margin-bottom:70px; } .pillars { grid-template-columns:1fr 1fr; } .pillars article:nth-child(2) { border-right:0; } .action-grid { grid-template-columns:1fr; } .action-card { min-height:470px; } .product-mosaic { height:560px; } .footer-grid { grid-template-columns:1fr 1fr; } .footer-bottom { flex-direction:column; } } @media(max-width:560px) { .brand-name { display:none; } h1 { font-size:52px; } .lead { font-size:15px; } .hero-buttons { flex-direction:column; align-items:stretch; max-width:280px; } .belief,.licensing { padding:90px 0; } .pillars { grid-template-columns:1fr; } .pillars article { border-right:0; border-bottom:1px solid var(--line); padding:28px 0; } .pillars article:not(:first-child) { padding-left:0; } .pillars h3 { margin-top:25px; } .numbers { grid-template-columns:1fr; gap:30px; } .product-mosaic { height:430px; } .join-section { min-height:650px; } .join-orbit { width:480px; height:480px; } .footer-grid { grid-template-columns:1fr; } .modal { padding:40px 25px; } } </style> </head> <body> <main> <header class="nav"> <button class="brand" data-home aria-label="Fisherman's Guild home"> <img class="brand-logo" src="/logo.png" alt="" /> <span class="brand-name">FISHERMAN'S GUILD<small>閽撹€呭叕浼?/small></span> </button> <nav aria-label="Main navigation"></nav> <div class="nav-actions"> <select class="lang" aria-label="Language"> <option value="en">English</option> <option value="zh">涓枃</option> <option value="ja">鏃ユ湰瑾?/option> <option value="fr">Fran莽ais</option> </select> <button class="edit-btn" type="button">缂栬緫</button> </div> </header> <div class="edit-hint"></div> <section class="hero"> <button class="replace-image" type="button">鏇挎崲棣栧浘</button> <input id="hero-file" hidden type="file" accept="image/*" /> <div class="hero-shade"></div> <div class="hero-copy"> <p class="eyebrow" data-key="eyebrow"></p> <h1 data-key="title"></h1> <p class="lead" data-key="intro"></p> <div class="hero-buttons"> <a href="#belief" class="button primary" data-key="explore"></a> <button class="button glass" type="button" data-modal="member" data-key="join"></button> </div> </div> <a class="scroll-cue" href="#belief"><span></span>SCROLL</a> </section> <section id="belief" class="belief shell"> <div class="statement"> <h2 data-key="belief"></h2> <p data-key="beliefBody"></p> </div> <div class="pillars"></div> </section> <section class="action-section"> <div class="shell"> <p class="section-tag" data-key="sectionTag"></p> <h2 class="display" data-key="sectionTitle"></h2> <div class="action-grid"></div> <div class="numbers"></div> </div> </section> <section class="licensing shell"> <div class="licensing-copy"> <p class="section-tag" data-key="productTag"></p> <h2 class="display" data-key="productTitle"></h2> <p data-key="productBody"></p> <button class="text-link" type="button" data-modal="partner"><span data-key="partner"></span> <span>鈫?/span></button> </div> <div class="product-mosaic"> <img src="/images/product-1.jpg" alt="" /> <img src="/images/product-2.jpg" alt="" /> <img src="/images/product-4.jpg" alt="" /> <img src="/images/product-6.jpg" alt="" /> <div class="yellow-tile"><span>FG</span><small>TRUSTED BY STANDARD</small></div> </div> </section> <div class="values-band"><span data-key="values"></span><span data-key="values"></span></div> <section class="join-section"> <div class="join-orbit"></div> <div class="join-copy"> <p>FISHERMAN'S GUILD 路 GLOBAL COMMUNITY</p> <h2 data-key="cta"></h2> <p data-key="ctaBody"></p> <div> <button class="button primary" type="button" data-modal="member" data-key="member"></button> <button class="button outline" type="button" data-modal="partner" data-key="partner"></button> </div> </div> </section> <footer> <div class="footer-grid"> <div> <div class="footer-brand"><img class="footer-logo" src="/logo.png" alt="" /><strong>FISHERMAN'S GUILD<br /><small>閽撹€呭叕浼?/small></strong></div> <p class="footer-note" data-key="footerIntro"></p> </div> <div><h4 data-key="footerGuild"></h4><a href="/">棣栭〉</a><a href="/about.html">鍏充簬鍏細</a><a href="/global.html">鍏ㄧ悆甯冨眬</a></div> <div><h4 data-key="footerWork"></h4><a href="/work.html">鏍稿績涓氬姟</a><a href="/licensing.html">鎺堟潈鍚堜綔</a></div> <div><h4 data-key="footerMember"></h4><a href="/membership.html">浼氬憳浣撶郴</a><button type="button" data-modal="member">鐢宠浼氬憳</button></div> <div><h4 data-key="footerAction"></h4><button type="button" data-modal="partner">鎺堟潈鍚堜綔</button></div> <div><h4 data-key="footerContact"></h4><p>contact@fishermansguild.com<br />fishermansguild.com</p></div> </div> <div class="footer-bottom"> <span>漏 2026 Fisherman's Guild 路 A Direct Brand of GFIA</span> <span data-key="values"></span> </div> </footer> <div class="modal-backdrop"> <div class="modal"> <span class="modal-kicker"></span> <h2></h2> <p></p> <button class="button primary" type="button"></button> </div> </div> </main> <script> const copy = { en: { nav: ["Home", "About", "What We Do", "Membership", "Global Presence", "Licensing"], eyebrow: "GLOBAL ELITE ANGLING CIRCLE", title: "Where passion belongs.\nWhere expertise sets the standard.", intro: "Founded directly by the Global Fishing Industry Association, Fisherman's Guild connects anglers, professional standards and a trusted industry ecosystem.", explore: "Explore the Guild", join: "Become a Member", belief: "More than fishing.", beliefBody: "A spiritual home for anglers worldwide, and a driving force for a more professional, responsible angling industry.", pillars: [["Mission", "Protect the future of every waterway"], ["Profession", "Build one global standard"], ["Community", "Connect, support and grow together"], ["Commerce", "Bring trusted products to more anglers"]], sectionTag: "WHAT WE DO", sectionTitle: "From one standard to a global community.", cards: [["Standards", "A complete professional system spanning membership, officiating, training, eco-angling and product certification."], ["Tournaments", "Fair competition and lasting talent development through global rankings, regional challenges and youth events."], ["Conservation", "Catch-and-release, waterway cleanups and youth education help angling culture and nature thrive together."]], numbers: [["6", "Regional service centers"], ["50%+", "Licensing returns to public good"], ["5", "Core GFIA standards"]], productTag: "LICENSING ECOSYSTEM", productTitle: "Standards first. Quality always.", productBody: "From professional tackle and outdoor gear to apparel and lifestyle, FG connects trusted brands with anglers worldwide.", values: "Authenticity · Professionalism · Purity · Assistance · Reverence · Symbiosis", cta: "Join the global angling community.", ctaBody: "Whether you are an angler, brand partner or public-interest organization, let us make angling more professional, welcoming and sustainable.", member: "Become a Member", partner: "Licensing Partnership", updating: "This page is being updated", updatingBody: "The content architecture is ready and this section is being refined. Please explore the homepage for now.", back: "Back to Home", edit: "Edit", done: "Done", editHint: "Edit mode: click text to revise it, or click an image to replace it.", footerIntro: "Connecting anglers, professional standards, events and a trusted licensing ecosystem worldwide.", footerGuild: "Guild", footerWork: "Work", footerMember: "Members", footerAction: "Action", footerContact: "Contact", footerLinks: ["Home", "About", "Global Presence", "What We Do", "Licensing", "Membership", "Apply for Membership", "Licensing Partnership"] }, zh: { nav: ["首页", "关于公会", "核心业务", "会员体系", "全球布局", "商业合作"], eyebrow: "全球精英垂钓圈层", title: "让热爱有归属，\n让专业有标准。", intro: "钓者公会由全球钓鱼产业协会直属创立，连接全球钓者、专业标准与可信赖的产业生态。", explore: "探索公会", join: "成为会员", belief: "不止于垂钓。", beliefBody: "一个属于全球钓者的精神家园，也是推动垂钓产业规范化的重要力量。", pillars: [["使命", "守护每一片水域的未来"], ["专业", "建立全球统一标准"], ["社群", "连接彼此，彼此成就"], ["商业", "让优质产品服务更多钓者"]], sectionTag: "我们的行动", sectionTitle: "从一条标准，到一个全球社区。", cards: [["标准", "建立会员、赛事、培训、生态垂钓与产品认证的专业标准体系。"], ["赛事", "以全球排名、区域挑战和青少年赛事连接钓者。"], ["生态", "坚持钓获放流、水域清洁与青少年启蒙。"]], numbers: [["6", "全球区域服务中心"], ["50%+", "授权收益反哺公益"], ["5", "GFIA 核心标准体系"]], productTag: "授权生态", productTitle: "标准先行，品质为本。", productBody: "从专业渔具到户外装备、服饰与生活方式，FG 以统一标准连接优质品牌与全球钓者。", values: "正品公信 · 专业 · 纯粹 · 互助 · 敬畏 · 共生", cta: "加入全球钓者的共同体。", ctaBody: "无论你是钓者、品牌伙伴还是公益组织，我们都期待与你一起，让垂钓更专业、更友善、更可持续。", member: "申请会员", partner: "授权合作", updating: "页面正在更新中", updatingBody: "内容架构已经搭建，我们正在完善这一部分。请先浏览首页。", back: "返回首页", edit: "编辑", done: "完成", editHint: "编辑模式：点击文字直接修改，点击图片可替换。", footerIntro: "连接全球钓者、专业标准、赛事活动与可信赖的授权生态。", footerGuild: "公会", footerWork: "业务", footerMember: "会员", footerAction: "行动", footerContact: "联系", footerLinks: ["首页", "关于公会", "全球布局", "核心业务", "商业合作", "会员体系", "申请会员", "授权合作"] } }; copy.ja = { ...copy.en, nav:["ホーム","ギルドについて","主な活動","メンバーシップ","グローバル展開","ライセンス"], eyebrow:"グローバル・エリート・アングリング・サークル", title:"情熱に居場所を。\n専門性に基準を。", explore:"ギルドを見る", join:"メンバーになる", belief:"釣りを超えて。", beliefBody:"世界中の釣り人の精神的なホームであり、より専門的で責任ある釣り産業を推進する力です。", pillars:[["使命","すべての水域の未来を守る"],["専門性","世界共通の基準を築く"],["コミュニティ","つながり、支え合い、共に成長する"],["ビジネス","信頼できる製品をより多くの釣り人へ"]], sectionTag:"私たちの活動", sectionTitle:"ひとつの基準から、世界のコミュニティへ。", cta:"世界のアングリング・コミュニティへ。", member:"メンバー申請", partner:"ライセンス提携", footerLinks:["ホーム","ギルドについて","グローバル展開","主な活動","ライセンス","メンバーシップ","メンバー申請","ライセンス提携"] }; copy.fr = { ...copy.en, nav:["Accueil","À propos","Activités","Adhésion","Présence mondiale","Licences"], eyebrow:"CERCLE MONDIAL D'ANGLERS D'ÉLITE", title:"Une place pour la passion.\nUne norme pour l'expertise.", explore:"Découvrir le Guild", join:"Devenir membre", belief:"Bien plus que la pêche.", beliefBody:"Un foyer spirituel pour les pêcheurs du monde entier, et une force pour une industrie plus professionnelle et responsable.", pillars:[["Mission","Protéger l'avenir de chaque milieu aquatique"],["Profession","Construire un standard mondial"],["Communauté","Se connecter, s'entraider et progresser"],["Commerce","Porter des produits fiables vers plus de pêcheurs"]], sectionTag:"NOS ACTIONS", sectionTitle:"D'un standard commun à une communauté mondiale.", cta:"Rejoignez la communauté mondiale des pêcheurs.", member:"Devenir membre", partner:"Partenariat licence", footerLinks:["Accueil","À propos","Présence mondiale","Activités","Licences","Adhésion","Devenir membre","Partenariat licence"] }; const languages = ["en","zh","ja","fr"]; const htmlLang = { en:"en", zh:"zh-CN", ja:"ja", fr:"fr" }; const brandSmall = { en:"Global Angling Guild", zh:"钓者公会", ja:"Global Angling Guild", fr:"Global Angling Guild" }; let lang = localStorage.getItem("fg-lang") || "en"; if (!languages.includes(lang)) lang = "en"; let editing = false; const main = document.querySelector("main"), hero = document.querySelector(".hero"), modal = document.querySelector(".modal-backdrop"), file = document.querySelector("#hero-file"); const savedHero = localStorage.getItem("fg-hero"); if (savedHero) hero.style.backgroundImage = `url("${savedHero}")`; function render() { const t = copy[lang] || copy.en; document.documentElement.lang = htmlLang[lang] || "en"; document.querySelector(".lang").value = lang; document.querySelector(".edit-btn").textContent = editing ? t.done : t.edit; document.querySelector(".edit-hint").textContent = t.editHint; document.querySelectorAll("[data-key]").forEach((el) => { el.textContent = t[el.dataset.key] || ""; el.contentEditable = editing && !el.closest("button") && !el.closest("a"); }); const navLinks = ["/", "/about.html", "/work.html", "/membership.html", "/global.html", "/licensing.html"]; document.querySelector("nav").innerHTML = t.nav.map((item, i) => `<a href="${navLinks[i]}">${item}</a>`).join(""); document.querySelector(".pillars").innerHTML = t.pillars.map((p, i) => `<article><span>0${i + 1}</span><h3 contenteditable="${editing}">${p[0]}</h3><p contenteditable="${editing}">${p[1]}</p></article>`).join(""); document.querySelector(".action-grid").innerHTML = t.cards.map((c, i) => `<article class="action-card"><span class="card-number">0${i + 1}</span><div class="card-art art-${i + 1}"><span>${i === 0 ? "◎" : i === 1 ? "↗" : "≋"}</span></div><h3 contenteditable="${editing}">${c[0]}</h3><p contenteditable="${editing}">${c[1]}</p><button type="button" data-modal="${c[0]}">→</button></article>`).join(""); document.querySelector(".numbers").innerHTML = t.numbers.map((n) => `<div><strong>${n[0]}</strong><span>${n[1]}</span></div>`).join(""); document.querySelectorAll("footer a, footer button").forEach((el, i) => { if (t.footerLinks[i]) el.textContent = t.footerLinks[i]; }); document.querySelectorAll(".brand-name small,.footer-brand small").forEach((el) => { el.textContent = brandSmall[lang] || brandSmall.en; }); main.classList.toggle("is-editing", editing); window.FGApplyOverrides && window.FGApplyOverrides(); } function openModal(label) { const t = copy[lang] || copy.en; modal.querySelector(".modal-kicker").textContent = label || ""; modal.querySelector("h2").textContent = t.updating; modal.querySelector("p").textContent = t.updatingBody; modal.querySelector("button").textContent = t.back; modal.classList.add("open"); } document.addEventListener("click", (event) => { const modalTarget = event.target.closest("[data-modal]"); if (modalTarget) openModal(modalTarget.textContent || modalTarget.dataset.modal); if (event.target.closest("[data-home]")) window.scrollTo({ top: 0, behavior: "smooth" }); if (event.target.closest(".edit-btn")) { editing = !editing; render(); } if (event.target.closest(".replace-image")) file.click(); if (event.target === modal || event.target.closest(".modal .button")) modal.classList.remove("open"); }); document.querySelector(".lang").addEventListener("change", (event) => { lang = event.target.value; if (!languages.includes(lang)) lang = "en"; localStorage.setItem("fg-lang", lang); render(); }); file.addEventListener("change", () => { const picked = file.files && file.files[0]; if (!picked) return; const reader = new FileReader(); reader.onload = () => { const url = String(reader.result); hero.style.backgroundImage = `url("${url}")`; localStorage.setItem("fg-hero", url); }; reader.readAsDataURL(picked); }); render(); </script> <script src="/site-overrides.js?v=20260729fiximg"></script> </body> </html>