/* src/styles/blank-4781df30.css */ :root { --ink: #242222; --ink-soft: #35353a; --gray: #515153; --gray-mid: #696969; --gray-light: #939393; --blue: #0071e3; --surface: #f5f5f7; --surface-alt: #f6f5f7; /* SF Pro first so all Latin text renders in Apple's system face; PingFang TC picks up the Chinese glyphs it doesn't cover. No webfont, nothing to load. */ --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang TC", "Noto Sans TC", sans-serif; --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang TC", "Noto Sans TC", sans-serif; /* Apple's standard ease + duration */ --ease: cubic-bezier(.28, .11, .32, 1); --dur: .5s; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* anchors clear the sticky nav */ scroll-padding-top: 70px; } /* Apple-style reveal: content eases up as it enters the viewport. ponytail: the hidden state is scoped to .js-reveal, which reveal.js sets on . If the script never runs (CMS strips it, JS disabled), nothing hides. */ .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .js-reveal .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-reveal .reveal, .js-reveal .reveal.in { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--sans); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } /* ponytail: one container width for every section, per the design's 1111px column */ .wrap { width: min(1111px, calc(100% - 80px)); margin-inline: auto; position: relative; } /* ---------- language ---------- */ /* Instatic allows exactly one site-wide layout, so it carries BOTH navs and BOTH footers; the page's own
decides which shows. Locally each page only has its own, and these rules simply match nothing. */ body:has(main.lang-en) [data-lang="zh"] { display: none !important; } body:not(:has(main.lang-en)) [data-lang="en"] { display: none !important; } .nav-end { display: flex; align-items: center; gap: 22px; } .lang-switch { font-size: 14px; font-weight: 500; color: var(--gray); padding: 4px 2px; transition: color .3s var(--ease); } .lang-switch:hover { color: var(--ink); } /* Apple-style crossfade between pages. Cross-document view transitions are opt-in per document; browsers without support just navigate normally. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: page-out .22s var(--ease) both; } ::view-transition-new(root) { animation: page-in .34s var(--ease) both; } @keyframes page-out { to { opacity: 0; transform: scale(.994); } } @keyframes page-in { from { opacity: 0; transform: scale(1.006); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Headlines break where the eye expects, not wherever the line runs out — the English copy is long enough that "Security built / in" happens without it. Unsupported browsers just wrap as before. */ h1, h2, .lead, .sub, .plan-title, .card-title, /* short standfirst copy balances like a headline */ .hero-text > p, .page-head .lede, .plan-audience, .plan-price, .form-intro p, .form-done p { text-wrap: balance; } /* Body copy is too long to balance (browsers cap it at a handful of lines anyway) — pretty only fixes the last line, so no orphan word is left alone. */ .manifesto-copy p, .feature-copy p, .project p, .detail-section p, .card-note, .hint, .plan-cards .card-note, .contact-hint { text-wrap: pretty; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 10; height: 70px; background: #fff; display: flex; align-items: center; } .nav-inner { width: min(1000px, calc(100% - 80px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; } /* ponytail: checkbox toggle, no JS. NOT
— a closed
hides its own content, so the desktop navlinks disappeared (Safari always, Chromium once display:contents was dropped). The checkbox stays focusable for keyboard users. */ .menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .menu-btn { display: none; } .nav-links { display: flex; gap: 30px; font-size: 14px; font-weight: 500; color: var(--gray); } .nav-links a { min-width: 80px; text-align: center; } .nav-links a, .nav-contact, .footer-links a, .project .more, .back { transition: color .3s var(--ease), opacity .3s var(--ease); } .nav-links a:hover, .nav-contact:hover, .footer-links a:hover { color: var(--ink); } .nav-contact { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--gray); } .nav-contact img { width: 20px; height: 20px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 21px; border-radius: 100px; font-size: 16px; line-height: 22px; font-weight: 600; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: #0062c4; } .btn { transition: background-color var(--dur) var(--ease), transform .25s var(--ease); } .btn:active { transform: scale(.97); } .btn-ghost { color: var(--ink-soft); font-weight: 500; } .btn-ghost:hover { background: rgba(0, 0, 0, .05); } .btn-arrow { padding-left: 18px; } .arrow { width: 22px; height: 22px; transform: rotate(90deg); } /* ponytail: the exported arrow is a black glyph — invert it on the blue button instead of shipping a second asset. */ .btn-primary .arrow { filter: brightness(0) invert(1); } .menu-cta { display: none; } /* ---------- hero ---------- */ .hero { position: relative; background: var(--surface); padding: 80px 0 0; text-align: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .puzzle { position: absolute; bottom: -177px; width: 503px; height: 426px; opacity: .1; object-fit: cover; } .puzzle-left { left: 200px; transform: rotate(-114.55deg); } .puzzle-right { right: 200px; width: 484px; height: 410px; transform: rotate(160.57deg); } .hero-text { position: relative; width: min(561px, calc(100% - 40px)); margin-inline: auto; } .hero-text h1 { margin: 0; font-family: var(--display); font-size: 50px; font-weight: 600; line-height: 1.2; } .hero-text > p { margin: 20px 0 0; font-size: 20px; line-height: 26px; font-weight: 500; color: var(--gray-light); } .ctas { margin-top: 30px; display: flex; gap: 4px; justify-content: center; align-items: center; /* on a narrow phone the second button drops to its own line — without flex: none they would instead shrink and break their own label */ flex-wrap: wrap; } .ctas .btn { flex: none; white-space: nowrap; } /* ponytail: the design crops a 3456x2176 render into a 761x654 window — keep the crop as authored rather than letterboxing the full image. */ .hero-img { position: relative; width: 761px; max-width: 100%; aspect-ratio: 761 / 654; margin: 41px auto 0; overflow: hidden; } .hero-img img { position: absolute; left: -35.84%; top: -26.6%; width: 172.77%; height: 126.61%; max-width: none; } /* ---------- manifesto ---------- */ .manifesto { background: var(--surface-alt); padding: 150px 0; } .manifesto-inner { display: flex; align-items: flex-end; gap: 100px; } .manifesto-copy { flex: 1; } .manifesto-copy h2 { margin: 0 0 26px; font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1.2; } .manifesto-copy p { margin: 0; font-size: 18px; line-height: 25px; } .signature { width: 156px; height: auto; flex: none; transform: rotate(-19.19deg); } /* ---------- feature sections ---------- */ /* Per Figma: sections 2 and 4 are flat #f6f5f7; sections 1 and 3 carry a gradient. */ .feature { background: var(--surface-alt); padding: 166px 0; } .feature-grad-gray { background: linear-gradient(180deg, #ededed 0%, #f2f7f8 100%); } .feature-grad-blue { background: linear-gradient(180deg, #d0ecf6 0%, #f2f7f8 100%); } .eyebrow { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 0 0 100px; font-size: 20px; font-weight: 500; } .eyebrow::before, .eyebrow::after { content: ""; width: 1px; height: 29.5px; background: rgba(36, 34, 34, .35); } .feature-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; } .feature-copy { width: 392px; flex: none; } .feature-copy h2 { margin: 0 0 26px; font-family: var(--display); font-weight: 600; line-height: 1.2; } .feature-copy h2 .lead { display: block; font-size: 68px; } .feature-copy h2 .sub { display: block; font-size: 48px; } .feature-copy p { margin: 0; font-size: 16px; line-height: 25px; } .feature-list { width: 450px; flex: none; } .list-title { margin: 0 0 20px; font-size: 16px; } .feature-list ul { display: flex; flex-direction: column; gap: 10px; } .feature-list li { min-height: 82px; padding: 22px 23px 22px 20px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .card-title { font-family: var(--display); font-size: 20px; font-weight: 600; } .card-note { font-size: 16px; color: var(--gray-mid); } /* fixed note column: every note starts at the same x and ends on the card's right padding, instead of drifting with the title's width */ .feature-list .card-note { width: 220px; flex: none; text-align: left; } .puzzle-red { position: absolute; right: -67px; top: 76px; width: 134px; height: auto; transform: rotate(12deg); pointer-events: none; } /* ---------- plan sections ---------- */ .plan { padding: 166px 0; } /* One black field for both tiers; the only thing dividing them is a hairline pinned to the same column the content sits in. */ .plan-pro, .plan-prox { background: #000; } .plan-prox { position: relative; } .plan-prox::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); width: min(1111px, calc(100% - 80px)); /* matches .wrap exactly */ height: 2px; background: rgba(255, 255, 255, .14); } .plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; } .plan-title { flex: 1; margin: 0; font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1.2; /* Champagne silver. The metallic read comes from the mid stop's lightness (~93%), not its hue — drop it to ~81% and it reads as a coloured word instead of a reflection. Warm here, iridescent cool on ProX: on one black field the temperature is what tells the two tiers apart. */ background-image: linear-gradient(90deg, #e8cbaa 14%, #f1e8de 31.25%, #fff 49%); -webkit-background-clip: text; background-clip: text; color: transparent; } .plan-prox .plan-title { background-image: linear-gradient(90deg, #fa8fb0 14.4%, #b8dbff 31.25%, #fff 49%); } .plan-title span { display: block; } .plan-intro { width: 460px; flex: none; color: #fff; } .plan-intro p { margin: 0; font-size: 16px; line-height: 25px; } .plan-audience, .plan-price { margin-bottom: 26px !important; font-family: var(--display); font-size: 20px !important; font-weight: 600; line-height: 1.4 !important; } /* pill above a plan title — deliberately not blue, the CTA owns the blue */ .plan-badge { margin: 0 0 22px; padding: 7px 16px; border-radius: 100px; background: rgba(255, 255, 255, .12); display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #fff; } .plan .btn-primary { margin-top: 25px; } .plan-cards { margin-top: 100px; display: flex; gap: 20px; } .plan-cards li { flex: 1; min-height: 158px; padding: 22px 23px 22px 20px; border: 1px solid #4f4f4f; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; } .plan-cards .card-title { color: #e0e0e0; } .plan-cards .card-note { color: #c2c2c2; } /* The industries a plan suits — reference material, not a second pitch. Deliberately a different object from the cards above: one filled panel instead of three outlined cards, rows instead of columns. Same type sizes would still read as equal weight, so the shape has to differ, not just the colour. */ /* No panel fill: at any alpha subtle enough to stay subordinate it measured 1.06x against these backgrounds — invisible. The silhouette does the work instead: full-width open rows against three enclosed cards. */ .plan-fit { margin-top: 56px; } .plan-fit-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: #8b8b93; } .plan-fit dl { margin: 0; } .plan-fit dl > div { display: grid; grid-template-columns: 200px 1fr; gap: 30px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .1); } .plan-fit dl > div:last-child { padding-bottom: 0; } .plan-fit dt { font-family: var(--display); font-size: 15px; font-weight: 600; color: #fff; } .plan-fit dd { margin: 0; font-size: 14px; line-height: 1.7; color: #9a9aa2; } @media (max-width: 860px) { .plan-fit { padding: 24px 22px; } .plan-fit dl > div { grid-template-columns: 1fr; gap: 7px; } } /* ---------- sub pages: one flat --surface canvas, no extra layers ---------- */ .page-surface { background: var(--surface); } /* nav keeps its #fff fill everywhere */ .page-surface .footer, .page-surface .closing { background: transparent; } .page-surface .closing h2 { background-image: none; color: var(--ink); } .page-head { padding: 120px 0 70px; text-align: center; } .page-head h1 { margin: 0; font-family: var(--display); font-size: 50px; font-weight: 600; line-height: 1.2; } .page-head .lede { margin: 20px auto 0; max-width: 561px; font-size: 20px; line-height: 26px; font-weight: 500; color: var(--gray-light); } /* ---------- project cards ---------- */ /* ponytail: no card layer at all — image and text sit straight on --surface, the way the 留白 section does. Nothing to style but spacing and type. */ .projects { padding: 100px 0 140px; } .project-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 90px 50px; } .project-shot { aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; margin-bottom: 26px; } .project-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .project-shot img { transition: transform .7s var(--ease); } .project:hover .project-shot img { transform: scale(1.03); } .project h2 { margin: 0 0 14px; font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.4; } .project .client { margin: 0 0 10px; font-size: 14px; color: var(--gray-light); } .project-metrics { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 14px; } .project-metrics li { font-family: var(--display); font-size: 16px; font-weight: 600; } .project p { margin: 0 0 22px; font-size: 16px; line-height: 25px; color: var(--gray-mid); } .project .more { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--blue); } .project .more .arrow { width: 18px; height: 18px; filter: none; } .project .more:hover { text-decoration: underline; } /* ---------- project detail ---------- */ .detail-head { padding: 70px 0 36px; } .back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; font-size: 16px; color: var(--gray); } .back:hover { color: var(--ink); } .back .arrow { width: 18px; height: 18px; transform: rotate(-90deg); } .detail-head .client { margin: 0 0 14px; font-size: 16px; color: var(--gray-light); } .detail-head h1 { margin: 0; max-width: 900px; font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1.25; } .detail-hero { border-radius: 10px; overflow: hidden; margin-bottom: 56px; } .detail-hero img { width: 100%; height: auto; } .detail-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 32px 0 0; padding: 24px 0; border-top: 1px solid #e1e1e4; border-bottom: 1px solid #e1e1e4; } .detail-meta dt { margin-bottom: 8px; font-size: 14px; color: var(--gray-light); } .detail-meta dd { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.5; } .detail-body { padding: 8px 0 40px; } .detail-section { margin-bottom: 48px; } .detail-section h2 { margin: 0 0 20px; font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1.3; } .detail-section h3 { margin: 24px 0 8px; font-family: var(--display); font-size: 20px; font-weight: 600; } .detail-section p { margin: 0 0 14px; max-width: 760px; font-size: 18px; line-height: 30px; } .detail-section ul { max-width: 760px; } .detail-section ul li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 18px; line-height: 30px; } .detail-section ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-light); } .quote { max-width: 760px; margin: 0; padding-left: 26px; border-left: 2px solid var(--ink); } .quote p { margin: 0 0 12px; font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.5; } .quote footer { font-size: 16px; color: var(--gray-light); } /* ---------- closing CTA ---------- */ .closing { background: #1d1d1f; padding: 120px 0; text-align: center; } .closing h2 { margin: 0 0 30px; font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1.2; /* Champagne silver. The metallic read comes from the mid stop's lightness (~93%), not its hue — drop it to ~81% and it reads as a coloured word instead of a reflection. Warm here, iridescent cool on ProX: on one black field the temperature is what tells the two tiers apart. */ background-image: linear-gradient(90deg, #e8cbaa 14%, #f1e8de 31.25%, #fff 49%); -webkit-background-clip: text; background-clip: text; color: transparent; } .closing p { max-width: 640px; margin: 0 auto 30px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .65); } /* case-study screenshots, interleaved between sections */ .case-shot { margin: 0 0 48px; border-radius: 10px; overflow: hidden; background: var(--surface-alt); } .case-shot img { width: 100%; height: auto; } /* ---------- 404 ---------- */ .notfound { min-height: calc(100vh - 70px - 240px); display: flex; align-items: center; text-align: center; padding: 120px 0; } .notfound .wrap { max-width: 620px; } .nf-code { margin: 0 0 16px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: .08em; color: var(--gray-light); } .notfound h1 { margin: 0; font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1.2; } .notfound .lede { margin: 20px 0 0; font-size: 20px; line-height: 26px; color: var(--gray-light); } .notfound .ctas { margin-top: 34px; } /* ---------- footer ---------- */ .footer { background: #fff; padding: 142px 0 142px; } /* ponytail: wrap instead of shrink — nothing in the footer may break a line or squash, so rows stack once they stop fitting. */ .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 40px; } /* the logo is a fixed-ratio asset: never let flex compress it */ .logo { flex: none; } .logo img { width: 116px; height: 27px; } .footer-links { display: flex; flex-wrap: wrap; gap: 20px 60px; font-size: 16px; } .footer-links a, .copyright { white-space: nowrap; } .footer-meta { display: flex; align-items: center; gap: 20px; } .ig { display: flex; color: #939393; transition: color .2s ease; } .ig:hover { color: var(--ink); } .copyright { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; letter-spacing: -.56px; } /* footer email — same monospace/size as the copyright it sits beside, so the two read as one meta line rather than a link bolted on */ .footer-mail { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; letter-spacing: -.56px; color: var(--gray); white-space: nowrap; transition: color .3s var(--ease); } .footer-mail:hover { color: var(--ink); } /* ---------- industrial landing (B2B) ---------- */ /* .hero without a hero-img: same --surface band, just needs its own bottom padding since the image normally supplies that weight */ .hero-no-image { padding-bottom: 100px; } .hero-no-image .hero-text { width: min(700px, calc(100% - 40px)); } .section-title { max-width: 720px; margin: 0 auto 20px; font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1.2; text-align: center; } .pain-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pain-grid li { padding: 28px 26px; border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 14px; } .pain-grid .card-note { width: auto; line-height: 25px; } .solution-list { margin-top: 80px; display: flex; flex-direction: column; gap: 60px; } .solution-item { display: flex; align-items: center; gap: 50px; } /* placeholder fill until a real photo lands in solution-media img */ .solution-media { width: 280px; aspect-ratio: 4 / 3; flex: none; border-radius: 10px; overflow: hidden; background: var(--surface-alt); } .solution-media img { width: 100%; height: 100%; object-fit: cover; } .solution-copy { flex: 1; min-width: 0; } .solution-copy h3 { margin: 0 0 16px; font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1.3; } .solution-copy p { margin: 0; font-size: 18px; line-height: 30px; color: var(--gray-mid); } /* ---------- responsive ---------- */ @media (max-width: 1100px) { /* nav collapses into a two-bar menu button */ .menu-btn { display: block; order: 3; cursor: pointer; padding: 6px 0; } .menu-toggle:focus-visible + .menu-btn { outline: 2px solid var(--blue); outline-offset: 4px; } /* two 3px black bars, 4px apart */ .bars { display: block; position: relative; width: 24px; height: 10px; } .bars::before, .bars::after { content: ""; position: absolute; left: 0; width: 24px; height: 3px; background: #000; transition: transform .2s ease; } .bars::before { top: 0; } .bars::after { bottom: 0; } /* closing state: the same button becomes an X while the menu is open */ .menu-toggle:checked + .menu-btn .bars::before { transform: translateY(3.5px) rotate(45deg); } .menu-toggle:checked + .menu-btn .bars::after { transform: translateY(-3.5px) rotate(-45deg); } .nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: center; gap: 0; padding: 16px 0 40px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); } .menu-toggle:checked ~ .nav-links { display: flex; } .nav-links a { min-width: 0; padding: 14px 20px; font-size: 16px; } /* the navbar's 聯絡我們 gives way to the hero CTA inside the menu */ .nav-contact { display: none; } .nav-end { gap: 0; } /* only the language button is left */ /* space-between would spread the free space between the language and menu buttons; the auto margin absorbs it so the gap is exactly 20px */ .nav-inner { gap: 20px; } .nav-end { margin-left: auto; } .menu-cta { display: inline-flex; margin-top: 60px; padding: 11px 21px; } /* no hover state on touch breakpoints — it sticks after tapping */ .menu-cta:hover { background: var(--blue); } /* eyebrow aligns with the start of the heading below it */ .eyebrow { justify-content: flex-start; } .eyebrow::before, .eyebrow::after { display: none; } .feature-grid, .plan-head, .manifesto-inner { flex-direction: column; align-items: flex-start; gap: 40px; } .feature-copy, .feature-list, .plan-intro { width: 100%; } /* tablet keeps the 2-column grid, just scaled down */ .project-list { gap: 60px 30px; } .project h2 { font-size: 20px; } .project-metrics li { font-size: 15px; } .project p { font-size: 15px; line-height: 24px; } .plan-cards { flex-wrap: wrap; } .plan-cards li { flex-basis: 280px; } .puzzle-red { right: 0; top: -40px; } .pain-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .hero { padding-top: 50px; } .hero-text h1 { font-size: 36px; } .hero-text > p { font-size: 17px; line-height: 24px; } .feature, .plan, .manifesto { padding: 90px 0; } .eyebrow { margin-bottom: 60px; } .feature-copy h2 .lead { font-size: 44px; } .feature-copy h2 .sub, .manifesto-copy h2, .plan-title { font-size: 32px; } .feature-list li { flex-direction: column; align-items: flex-start; gap: 8px; } .feature-list .card-note { width: auto; } .page-head { padding: 60px 0 50px; } .page-head h1 { font-size: 32px; } .page-head .lede { font-size: 17px; line-height: 24px; } .detail-head { padding: 50px 0 30px; } .detail-head h1 { font-size: 28px; } .detail-hero { margin-bottom: 50px; } .detail-meta { grid-template-columns: 1fr 1fr; gap: 24px; margin: 30px 0 50px; } .detail-section { margin-bottom: 50px; } .case-shot { margin-bottom: 32px; } .detail-section h2 { font-size: 24px; } .detail-section p, .detail-section ul li { font-size: 16px; line-height: 27px; } .quote p { font-size: 20px; } .projects { padding: 50px 0 80px; } /* still 2 columns here — same proportions, just smaller */ .project-list { gap: 40px 20px; } .project h2 { font-size: 17px; line-height: 1.45; margin-bottom: 10px; } .project .client { font-size: 13px; margin-bottom: 8px; } .project-metrics { gap: 4px 14px; margin-bottom: 10px; } .project-metrics li { font-size: 13px; } .project p { font-size: 14px; line-height: 22px; margin-bottom: 16px; } .project .more { font-size: 14px; } .project-shot { margin-bottom: 16px; } .closing { padding: 90px 0; } .closing h2 { font-size: 32px; } .closing p { font-size: 16px; line-height: 25px; } .hero-no-image { padding-bottom: 60px; } .section-title { font-size: 32px; } .pain-grid { gap: 16px; } .pain-grid li { padding: 22px 20px; } .solution-list { gap: 40px; } .solution-item { flex-direction: column; align-items: stretch; gap: 20px; } .solution-media { width: 100%; aspect-ratio: 3 / 2; } .solution-copy h3 { font-size: 24px; } .solution-copy p { font-size: 16px; line-height: 26px; } .notfound { padding: 80px 0; min-height: 60vh; } .notfound h1 { font-size: 32px; } .notfound .lede { font-size: 17px; line-height: 24px; } .footer { padding: 70px 0; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 28px; } .footer-links { flex-direction: column; gap: 18px; } /* three items now (IG + email + copyright): at 375px they need 471px in a single row, so let the row wrap instead of overflowing */ .footer-meta { flex-direction: row; flex-wrap: wrap; gap: 14px 18px; } } /* narrow phones: the 2-column案例 grid finally becomes one column */ @media (max-width: 360px) { .puzzle-red { width: 96px; } } /* The English eyebrows run two to three times wider than the Chinese ones — on a phone they reach the corner decoration and end up underneath it. Below this width there is no position left for the puzzle to occupy. */ @media (max-width: 500px) { main.lang-en .puzzle-red { display: none; } } @media (max-width: 560px) { .project-list { grid-template-columns: 1fr; gap: 50px; } .project h2 { font-size: 20px; } .project .client { font-size: 14px; } .project-metrics li { font-size: 15px; } .project p { font-size: 15px; line-height: 24px; } .project .more { font-size: 16px; } } /* ---------- onboarding form ---------- */ /* ponytail: one
with real fields; steps are just hidden fieldsets, so it still submits natively (Instatic turns it into a CMS form) with JS off. */ .form-page { padding: 90px 0 120px; overflow-x: clip; } .form-layout { display: flex; align-items: flex-start; gap: 80px; } .form-main { flex: 1; min-width: 0; } /* just the artwork, no frame — fixed to the right edge at 2x, bleeding off-screen */ /* absolute, not fixed: it belongs to the page and scrolls away with it. .wrap is the positioned ancestor. */ .form-aside { position: absolute; top: 0; right: -9vw; /* portrait cut-out: size it by height so it never outgrows the viewport */ height: 76vh; /* held at a fixed tilt — no animation, it should not drift back upright */ transform: rotate(-4deg); pointer-events: none; } .form-aside img { width: auto; height: 100%; max-width: none; display: block; } .form-intro { max-width: 620px; margin-bottom: 48px; } .form-intro h1 { margin: 0 0 18px; font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; } .form-intro p { margin: 0; font-size: 19px; line-height: 30px; color: var(--gray-mid); } .form-meta { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 7px 16px; border-radius: 100px; background: rgba(0, 113, 227, .1); color: var(--blue); font-size: 15px; font-weight: 600; } .form-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .progress { max-width: 620px; margin-bottom: 40px; } .progress-bar { height: 3px; border-radius: 3px; background: rgba(36, 34, 34, .1); overflow: hidden; } .progress-bar span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .45s var(--ease); } .progress-label { margin: 12px 0 0; font-size: 14px; color: var(--gray-light); } .step { max-width: 620px; /* fieldset ships with a border and padding by default */ border: 0; margin: 0; padding: 0; min-width: 0; scroll-margin-top: 110px; /* clear the sticky nav */ } /* .btn and .field set display, which beats the browser's [hidden] rule */ [hidden] { display: none !important; } .step .q-num { display: block; margin-bottom: 12px; font-size: 14px; letter-spacing: .1em; color: var(--gray-light); } .step h2 { margin: 0 0 8px; font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1.3; } .step .hint { margin: 0 0 28px; font-size: 16px; line-height: 25px; color: var(--gray-mid); } .choices { display: flex; flex-direction: column; gap: 10px; } .choice { position: relative; display: block; } .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .choice span { display: block; padding: 18px 22px; border: 1px solid #dcdcdf; border-radius: 12px; background: #fff; font-size: 17px; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); } .choice input:checked + span { border-color: var(--blue); background: rgba(0, 113, 227, .06); } .choice input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; } .choice span:hover { border-color: var(--gray-light); } .choice span:active { transform: scale(.995); } .field { margin-top: 14px; } .field label { display: block; margin-bottom: 8px; font-size: 15px; color: var(--gray-mid); } .field input, .field textarea { width: 100%; padding: 15px 18px; border: 1px solid #dcdcdf; border-radius: 12px; background: #fff; font: inherit; font-size: 17px; color: var(--ink); transition: border-color .2s var(--ease); } .field textarea { min-height: 150px; resize: vertical; line-height: 26px; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); } .field input::placeholder, .field textarea::placeholder { color: #b6b6ba; } .step-nav { display: flex; align-items: center; gap: 12px; margin-top: 34px; max-width: 620px; } .btn-back { background: none; border: 0; padding: 11px 4px; font: inherit; font-size: 16px; color: var(--gray-mid); cursor: pointer; } .btn-back:hover { color: var(--ink); } .btn-next { border: 0; cursor: pointer; font: inherit; } .step-nav .spacer { flex: 1; } .contact-group { max-width: 620px; margin-top: 30px; padding: 22px; border-radius: 16px; background: rgba(36, 34, 34, .03); } .contact-hint { margin: 0; font-size: 15px; color: var(--gray-mid); } .field-error { margin: 14px 0 0; font-size: 15px; color: #d02b20; } /* ---------- form success ---------- */ .done-page { padding: 150px 0 170px; text-align: center; } .form-done { max-width: 560px; margin-inline: auto; } .done-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 34px; border-radius: 50%; background: rgba(0, 113, 227, .1); color: var(--blue); } .form-done h1 { margin: 0 0 18px; font-family: var(--display); font-size: 42px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } .form-done h2 { font-family: var(--display); font-size: 36px; font-weight: 600; margin: 0 0 16px; } .form-done p { font-size: 18px; line-height: 29px; color: var(--gray-mid); margin: 0; } .form-done .done-note { margin-top: 10px; font-size: 16px; line-height: 26px; color: var(--gray-light); } .form-done .ctas { margin-top: 36px; } @media (max-width: 1400px) { .form-aside { height: 64vh; right: -5vw; } } /* tablet: still on the right, but the column has to give up room for it */ @media (max-width: 1180px) and (min-width: 861px) { .form-main { max-width: 58%; } .form-aside { width: 34vw; height: auto; right: -4vw; } .form-aside img { width: 100%; height: auto; } } /* mobile: out of the corner, into the flow below the form */ @media (max-width: 860px) { .form-layout { display: block; } /* same size as desktop — it is meant to bleed past both edges here */ .form-aside { /* wider than the column on purpose — auto margins can't centre an over-wide box, so shift it by half its own width instead */ position: relative; left: 50%; width: max-content; height: 76vh; margin: 40px 0 0; transform: translateX(-50%) rotate(-4deg); } .form-aside img { width: auto; height: 100%; } .form-page { padding: 50px 0 80px; } .form-intro h1 { font-size: 32px; } .form-intro p { font-size: 17px; line-height: 27px; } .step h2 { font-size: 24px; } .choice span { padding: 16px 18px; font-size: 16px; } } /* ---------- about page ---------- */ /* A numbers strip and a paired card row — the two content shapes the About page needed that the system had no component for. Everything else on that page reuses .manifesto / .feature-grid / .pain-grid / .quote as-is. */ .about-stats { margin-top: 66px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; } .about-stat b { display: block; font-family: var(--display); font-size: 46px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; } .about-stat span { display: block; margin-top: 10px; font-size: 15px; line-height: 23px; color: var(--gray-mid); } /* two cards read better as halves than as two-thirds of a three-column grid */ .pain-grid.pair { grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px) { .about-stats { grid-template-columns: repeat(2, 1fr); margin-top: 46px; } .about-stat b { font-size: 34px; } .pain-grid.pair { grid-template-columns: 1fr; } }