/* ════════════════════════════════════════════════════════════════ Flintnova — ASO localization service site Shared stylesheet for en / ja / zh-Hant / zh-Hans Visual system carried over from the original brand site: night sky + flint strike. Metaphor transposed: one strike of flint → your app lights up across East Asia. ════════════════════════════════════════════════════════════════ */ :root{ --night:#0a0c12; --obsidian:#10131c; --panel:#141826; --line:rgba(245,241,232,.08); --line-warm:rgba(255,122,61,.22); --ember:#ff7a3d; --flame:#ffb259; --star:#f5f1e8; --mist:rgba(245,241,232,.62); --faint:rgba(245,241,232,.38); /* Type. Display = Fraunces (en) / locale CJK serif. */ --display-en:'Fraunces',Georgia,serif; --cjk-serif:'Noto Serif TC',serif; /* overridden per locale */ --cjk-sans:'Noto Sans TC',sans-serif; /* overridden per locale */ --sans-en:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',monospace; /* Display = Fraunces serif for headings; body/UI = clean sans (en). */ --display:var(--sans-en); --body:var(--sans-en); } /* CJK pages opt in: */ .cjk{ --display:var(--cjk-serif); --body:var(--cjk-sans); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--night); color:var(--star); font-family:var(--body); font-weight:300; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; } .cjk body{line-height:1.8} /* Hanken Grotesk reads better at 400 for body; CJK Noto Sans stays 300. */ html:not(.cjk) body{font-weight:400} ::selection{background:var(--ember);color:var(--night)} a{color:inherit} /* ── Night sky ──────────────────────────────────────────────── */ .sky{position:fixed;inset:0;pointer-events:none;z-index:0} .stars{position:absolute;inset:0;background-image: radial-gradient(1px 1px at 12% 24%,rgba(245,241,232,.8) 50%,transparent 51%), radial-gradient(1px 1px at 78% 14%,rgba(245,241,232,.6) 50%,transparent 51%), radial-gradient(1.5px 1.5px at 33% 64%,rgba(245,241,232,.5) 50%,transparent 51%), radial-gradient(1px 1px at 88% 56%,rgba(245,241,232,.7) 50%,transparent 51%), radial-gradient(1px 1px at 55% 35%,rgba(245,241,232,.45) 50%,transparent 51%), radial-gradient(1.5px 1.5px at 8% 80%,rgba(245,241,232,.5) 50%,transparent 51%), radial-gradient(1px 1px at 67% 84%,rgba(245,241,232,.6) 50%,transparent 51%), radial-gradient(1px 1px at 42% 8%,rgba(245,241,232,.55) 50%,transparent 51%), radial-gradient(1px 1px at 95% 33%,rgba(245,241,232,.4) 50%,transparent 51%), radial-gradient(1.5px 1.5px at 22% 45%,rgba(255,178,89,.55) 50%,transparent 51%); animation:twinkle 6s ease-in-out infinite alternate; } .stars.far{transform:scale(1.6);opacity:.5;animation-duration:9s;animation-delay:-3s} @keyframes twinkle{from{opacity:.55}to{opacity:1}} .glow-horizon{position:absolute;left:50%;bottom:-30vh;width:140vw;height:60vh;transform:translateX(-50%); background:radial-gradient(ellipse at center,rgba(255,122,61,.10),transparent 65%);} .grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");} /* ── Nav ────────────────────────────────────────────────────── */ nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center; padding:20px clamp(20px,5vw,64px);gap:18px; background:linear-gradient(to bottom,rgba(10,12,18,.92),rgba(10,12,18,0));} .brand{display:flex;align-items:baseline;gap:11px;text-decoration:none;flex-shrink:0} .brand .mark{font-family:var(--display-en);font-weight:600;font-style:italic;font-size:21px;color:var(--star);letter-spacing:.01em} .brand .zh{font-family:'Noto Serif TC',serif;font-weight:700;font-size:13px;color:var(--mist);letter-spacing:.16em} nav .links{display:flex;gap:clamp(14px,2.4vw,30px);align-items:center} nav .links a{color:var(--mist);text-decoration:none;font-size:12.5px;letter-spacing:.1em;transition:color .25s;font-family:var(--body)} .cjk nav .links a{font-family:var(--cjk-sans)} nav .links a:hover{color:var(--flame)} /* Language switcher */ .lang{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;flex-shrink:0} .lang a{color:var(--faint);text-decoration:none;padding:5px 8px;border-radius:2px;transition:color .25s,background .25s} .lang a:hover{color:var(--flame)} .lang a[aria-current]{color:var(--night);background:linear-gradient(120deg,var(--ember),var(--flame))} .lang .sep{color:var(--line);} /* ── Hero ───────────────────────────────────────────────────── */ .hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding:96px clamp(20px,7vw,96px) 64px} .strike{position:absolute;inset:0;overflow:hidden;pointer-events:none} .streak{position:absolute;top:16%;left:-15%;width:34vw;height:1.5px; background:linear-gradient(90deg,transparent,var(--flame) 60%,#fff); transform:rotate(16deg);filter:drop-shadow(0 0 6px var(--ember)); animation:streak 1.15s cubic-bezier(.7,0,.4,1) .35s both} @keyframes streak{ 0%{transform:translate(0,0) rotate(16deg);opacity:0} 12%{opacity:1} 82%{opacity:1} 100%{transform:translate(120vw,34vw) rotate(16deg);opacity:0}} .spark{position:absolute;top:calc(16% + 27vw * .29);left:68%;width:6px;height:6px;border-radius:50%; background:#fff;box-shadow:0 0 18px 6px var(--flame),0 0 60px 24px rgba(255,122,61,.5); animation:burst 2.1s ease-out 1.35s both} @keyframes burst{ 0%{transform:scale(0);opacity:0} 10%{transform:scale(2.4);opacity:1} 35%{transform:scale(1);opacity:.95} 100%{transform:scale(.8);opacity:.85}} .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--ember);text-transform:uppercase; margin-bottom:28px;opacity:0;animation:rise .9s ease 1.5s forwards} h1.hero-h{font-family:var(--display);font-weight:600;font-size:clamp(40px,7.4vw,104px);line-height:1.04;letter-spacing:-.01em;max-width:14ch} .cjk h1.hero-h{font-weight:900;letter-spacing:.04em;max-width:18ch} h1.hero-h em{font-style:italic;color:var(--flame);font-weight:600} .cjk h1.hero-h em{font-style:normal;color:var(--flame)} h1.hero-h .word{display:inline-block;opacity:0;transform:translateY(.34em); animation:ignite 1.05s cubic-bezier(.2,.7,.2,1) forwards} @keyframes ignite{ 0%{opacity:0;transform:translateY(.34em);text-shadow:none} 45%{opacity:1;text-shadow:0 0 40px rgba(255,122,61,.7),0 0 90px rgba(255,122,61,.35)} 100%{opacity:1;transform:translateY(0);text-shadow:0 0 22px rgba(255,122,61,.14)}} .hero .sub{max-width:42ch;color:var(--mist);font-size:clamp(15px,1.6vw,18.5px);margin-top:26px; font-family:var(--body);font-weight:300;opacity:0;animation:rise .9s ease 2.5s forwards} .hero .cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;opacity:0;animation:rise .9s ease 2.7s forwards} /* Markets lit by the strike */ .markets{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:40px;align-items:center; font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase} .markets .lbl{color:var(--ember);opacity:0;animation:rise .9s ease 2.9s forwards} .markets b{font-weight:400;color:var(--mist);position:relative;opacity:0; animation:lightup 1s cubic-bezier(.2,.7,.2,1) forwards} .markets b::before{content:'';position:absolute;left:-13px;top:50%;width:4px;height:4px;border-radius:50%; transform:translateY(-50%);background:var(--flame);box-shadow:0 0 10px 2px rgba(255,178,89,.6)} .markets b:nth-of-type(1){animation-delay:2.95s} .markets b:nth-of-type(2){animation-delay:3.1s} .markets b:nth-of-type(3){animation-delay:3.25s} .markets b:nth-of-type(4){animation-delay:3.4s} .markets b:nth-of-type(5){animation-delay:3.55s} .markets b:nth-of-type(6){animation-delay:3.7s} @keyframes lightup{from{opacity:0;color:var(--faint)}to{opacity:1;color:var(--mist)}} /* Buttons */ .btn{font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:.06em;text-decoration:none; padding:14px 30px;border-radius:2px;transition:all .3s;display:inline-block} .cjk .btn{letter-spacing:.1em} .btn.fire{background:linear-gradient(120deg,var(--ember),var(--flame));color:#1a0e06;font-weight:600} .btn.fire:hover{box-shadow:0 0 34px rgba(255,122,61,.45);transform:translateY(-2px)} .btn.ghost{border:1px solid var(--line);color:var(--mist)} .btn.ghost:hover{border-color:var(--ember);color:var(--flame)} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} .scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-family:var(--mono); font-size:10px;letter-spacing:.3em;color:var(--faint);animation:bob 2.4s ease-in-out infinite;opacity:0;animation-delay:3.6s;animation-fill-mode:forwards} @keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.7}50%{transform:translate(-50%,8px);opacity:.4}} /* ── Beacon relay divider (烽燧 → signal across markets) ─────── */ .beacons{position:relative;z-index:1;display:flex;justify-content:center;gap:clamp(26px,6vw,72px);padding:26px 0} .beacons i{width:5px;height:5px;border-radius:50%;background:rgba(255,122,61,.25);animation:relay 4.5s ease-in-out infinite} .beacons i:nth-child(2){animation-delay:.5s}.beacons i:nth-child(3){animation-delay:1s} .beacons i:nth-child(4){animation-delay:1.5s}.beacons i:nth-child(5){animation-delay:2s} .beacons i:nth-child(6){animation-delay:2.5s}.beacons i:nth-child(7){animation-delay:3s} @keyframes relay{0%,100%{background:rgba(255,122,61,.22);box-shadow:none} 12%{background:var(--flame);box-shadow:0 0 14px 4px rgba(255,178,89,.55)} 30%{background:rgba(255,122,61,.22);box-shadow:none}} /* ── Sections ───────────────────────────────────────────────── */ section{position:relative;z-index:1;padding:clamp(72px,11vh,128px) clamp(20px,7vw,96px);max-width:1240px;margin:0 auto} .sec-label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--ember);text-transform:uppercase;margin-bottom:18px} .sec-title{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.4vw,50px);letter-spacing:-.005em;margin-bottom:16px;line-height:1.1;max-width:20ch} .cjk .sec-title{font-weight:700;letter-spacing:.04em} .sec-title em{font-style:italic;color:var(--flame)} .cjk .sec-title em{font-style:normal;color:var(--flame)} .sec-lead{color:var(--mist);max-width:46ch;font-size:clamp(15px,1.5vw,17.5px);font-weight:300} /* Problem — stat trio + reasoning */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line); border:1px solid var(--line);margin-top:54px} .stat{background:var(--obsidian);padding:40px 34px;transition:background .4s} .stat:hover{background:#171b2a} .stat .fig{font-family:var(--display-en);font-style:italic;font-weight:340;font-size:clamp(40px,5vw,60px); color:var(--flame);line-height:1;letter-spacing:-.02em} .stat .cap{color:var(--mist);font-size:14.5px;margin-top:16px;font-weight:300} .problem-points{margin-top:48px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .pp{background:var(--obsidian);padding:30px 34px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;transition:background .35s} .pp:hover{background:#171b2a} .pp .n{font-family:var(--mono);font-size:12px;color:var(--ember);letter-spacing:.14em;padding-top:5px} .pp p{color:var(--mist);font-size:15.5px;font-weight:300} .pp p strong{color:var(--star);font-weight:500} /* What we do — language cards */ .lang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:54px} .lcard{position:relative;border:1px solid var(--line);background:linear-gradient(160deg,var(--panel),var(--obsidian)); padding:34px 30px;border-radius:3px;transition:transform .35s,border-color .35s,box-shadow .35s;overflow:hidden} .lcard:hover{transform:translateY(-6px);border-color:rgba(255,122,61,.4);box-shadow:0 24px 60px -28px rgba(255,122,61,.25)} .lcard .glyph{font-family:'Noto Serif TC',serif;font-size:30px;color:var(--flame);line-height:1} .lcard h3{font-family:var(--display);font-weight:600;font-size:21px;margin:18px 0 4px;color:var(--star);letter-spacing:0} .cjk .lcard h3{font-weight:700} .lcard .native{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ember);text-transform:uppercase} .lcard p{color:var(--mist);font-size:14px;margin-top:16px;font-weight:300} .do-list{margin-top:46px;display:flex;flex-wrap:wrap;gap:10px} .chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--mist); border:1px solid var(--line);border-radius:99px;padding:9px 16px;transition:border-color .3s,color .3s} .chip:hover{border-color:var(--ember);color:var(--flame)} .native-note{margin-top:40px;font-family:var(--display);font-style:italic;color:var(--flame);font-size:clamp(18px,2.2vw,26px);letter-spacing:0} .cjk .native-note{font-style:normal;font-weight:600} /* Why us */ .why-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;margin-top:54px;align-items:start} .cred{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)} .cred .row{background:var(--obsidian);padding:24px 30px;display:flex;gap:18px;align-items:baseline} .cred .row .k{font-family:var(--mono);font-size:11px;color:var(--ember);letter-spacing:.14em;text-transform:uppercase;flex:0 0 96px} .cred .row .v{color:var(--mist);font-size:15px;font-weight:300} .cred .row .v strong{color:var(--star);font-weight:500} .team{display:flex;flex-direction:column;gap:20px} .member{border:1px solid var(--line);border-radius:3px;padding:26px 28px;background:linear-gradient(160deg,var(--panel),var(--obsidian))} .member .nm{font-family:var(--display);font-weight:400;font-size:20px;color:var(--star)} .cjk .member .nm{font-weight:700} .member .ro{font-family:var(--mono);font-size:11px;color:var(--ember);letter-spacing:.12em;text-transform:uppercase;margin-top:4px} .member p{color:var(--mist);font-size:14px;margin-top:14px;font-weight:300} .disclaimer{margin-top:30px;font-size:12.5px;color:var(--faint);font-weight:300;max-width:60ch} /* How it works — steps */ .steps{margin-top:54px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .step{background:var(--obsidian);padding:34px 30px;position:relative;transition:background .35s} .step:hover{background:#171b2a} .step .s-n{font-family:var(--display-en);font-style:italic;font-size:14px;color:var(--faint)} .step h3{font-family:var(--display);font-weight:600;font-size:19px;margin:12px 0 0;letter-spacing:0;color:var(--star)} .cjk .step h3{font-weight:700} .step p{color:var(--mist);font-size:14px;margin-top:14px;font-weight:300} .step .tag{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em; color:var(--flame);border:1px solid rgba(255,178,89,.35);border-radius:99px;padding:5px 11px;text-transform:uppercase} /* Proof — before / after */ .ba{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:54px} .ba .col{border:1px solid var(--line);border-radius:3px;overflow:hidden} .ba .col.after{border-color:rgba(255,122,61,.4);box-shadow:0 24px 60px -34px rgba(255,122,61,.3)} .ba .head{padding:16px 24px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--line)} .ba .col.before .head{color:var(--faint)} .ba .col.after .head{color:var(--flame)} .ba .body{padding:26px 24px;background:var(--obsidian)} .ba .field{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ember);text-transform:uppercase;margin-bottom:6px} .ba .val{font-size:15px;color:var(--star);margin-bottom:22px;font-weight:300;line-height:1.5} .ba .col.before .val{color:var(--mist)} .ba .val:last-child{margin-bottom:0} .proof-note{margin-top:24px;font-size:12.5px;color:var(--faint);font-weight:300} .proof-self{margin-top:40px;padding:28px 32px;border:1px solid var(--line-warm);border-radius:3px; background:linear-gradient(160deg,rgba(255,122,61,.05),transparent);font-size:clamp(15px,1.7vw,18px); color:var(--star);font-weight:300} .proof-self strong{color:var(--flame);font-weight:500} /* Audit form */ .form-wrap{max-width:680px;margin:54px auto 0} .audit{display:grid;gap:22px;border:1px solid var(--line);border-radius:4px;padding:clamp(28px,4vw,46px); background:linear-gradient(160deg,var(--panel),var(--obsidian))} .frow{display:flex;flex-direction:column;gap:9px} .audit label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ember);text-transform:uppercase} .audit input,.audit textarea{background:var(--night);border:1px solid var(--line);border-radius:2px; color:var(--star);font-family:var(--body);font-size:15px;padding:13px 15px;transition:border-color .25s;font-weight:300} .audit input:focus,.audit textarea:focus{outline:none;border-color:var(--ember)} .audit input::placeholder,.audit textarea::placeholder{color:var(--faint)} .audit textarea{resize:vertical;min-height:88px} .checks{display:flex;flex-wrap:wrap;gap:8px} .checks label{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em; color:var(--mist);text-transform:none;border:1px solid var(--line);border-radius:99px;padding:8px 14px;cursor:pointer;transition:border-color .25s,color .25s} .checks label:hover{border-color:var(--ember);color:var(--flame)} .checks input{accent-color:var(--ember);width:14px;height:14px} .audit .btn.fire{justify-self:start;border:none;cursor:pointer} .form-fine{font-size:12.5px;color:var(--faint);font-weight:300;text-align:center;margin-top:18px} /* Contact / footer */ footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:42px clamp(20px,7vw,96px); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px} footer .f-brand{display:flex;align-items:baseline;gap:10px} footer .f-brand .mark{font-family:var(--display-en);font-style:italic;font-weight:600;font-size:16px;color:var(--star)} footer .f-brand .zh{font-family:'Noto Serif TC',serif;font-weight:700;font-size:11px;color:var(--mist);letter-spacing:.16em} footer .f-contact{display:flex;flex-direction:column;gap:6px;text-align:right} footer .f-mail{font-family:var(--display-en);font-style:italic;font-size:17px;color:var(--mist);text-decoration:none;transition:color .3s} footer .f-mail:hover{color:var(--flame)} footer .f-line{font-family:var(--mono);color:var(--faint);font-size:10.5px;letter-spacing:.1em} /* Reveal on scroll */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease} .reveal.in{opacity:1;transform:translateY(0)} /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width:880px){ .why-grid{grid-template-columns:1fr;gap:36px} .ba{grid-template-columns:1fr} } @media (max-width:760px){ nav .links{display:none} .lang a{padding:5px 6px} footer{flex-direction:column;align-items:flex-start} footer .f-contact{text-align:left} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .kicker,.hero .sub,.hero .cta,.markets .lbl,.markets b,h1.hero-h .word,.scroll-hint{opacity:1;transform:none} }