/* ============================================================ Tab Tab Studio — Global Stylesheet Shared across all pages: homepage, showcase, about, contact ============================================================ */ /* ── Image protection ── */ img { pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { margin: 0; padding: 0; } /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* Brand colours */ --red: #d5403a; --blue: #499fb6; --yellow: #f7e34c; --black: #1a1a1a; --white: #ffffff; --off: #F2F2F2; --grey1: #eeede9; --grey2: #d6d4ce; --grey3: #9e9b94; --grey4: #6b6864; --grey5: #3a3835; /* Borders */ --frame: 1px solid rgba(0,0,0,0.12); /* Layout */ --mg: 72px; /* fixed side margin strip width */ --cp: 72px; /* inner content padding */ --section-py: 80px; /* standard section vertical padding */ --sec-head-mb: 48px; /* section header margin-bottom */ /* Dot grid (applied to white-bg sections) */ --grid-img: linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px); --grid-size: 40px 40px; } /* ============================================================ TYPE SCALE All text on the site should use one of these tokens. ───────────────────────────────────────────────────────── --t-display Hero H1 --t-h2 Section titles --t-h3 Card / service titles --t-body-lg Hero description --t-body General body copy --t-body-sm Nav links, buttons, sub-labels, card brand --t-label DM Mono uppercase labels (form, stats, footer, tags) --t-micro DM Mono fine metadata (card year, scroll hint) ============================================================ */ :root { --t-display: clamp(42px, 5vw, 72px); --t-h2: clamp(24px, 2.6vw, 36px); --t-h3: 22px; --t-body-lg: 17px; --t-body: 16px; --t-body-sm: 14px; --t-label: 12px; --t-micro: 11px; /* Line heights */ --lh-heading: 1.1; --lh-body: 1.75; --lh-label: 1.4; } /* ============================================================ BASE ============================================================ */ html { scroll-behavior: smooth; } body { background: var(--white); color: var(--black); font-family: 'Poppins', sans-serif; font-size: var(--t-body); font-weight: 300; line-height: var(--lh-body); overflow-x: hidden; cursor: none; } a, button, [role="button"], input, textarea, select { cursor: none; } /* ── Language toggle ── EN is the default. ZH content is hidden unless .zh is active. Selectors are unprefixed (.en / .zh) rather than body.en / body.zh so they match the class on EITHER or . The inline script can only reach (there is no yet), so body-scoped rules did nothing until lang.js ran on defer — which is what caused the page to paint in EN and then jump to TC about a second later. setLang() keeps both elements in step. All rules use explicit display values — no revert, no surprises. ── */ /* ZH content: always hidden by default */ [data-lang="zh"] { display: none; } /* EN mode (default): show EN, keep ZH hidden */ .en [data-lang="en"] { display: revert; } .en [data-lang="zh"] { display: none; } /* ZH mode: hide EN, show ZH */ .zh [data-lang="en"] { display: none; } .zh [data-lang="zh"] { display: revert; } /* Hard stop — the inactive language is never visible. The rules above are bare attribute selectors (specificity 0,1,0), so ANY component rule that sets its own display beats them and renders both languages at once. Astro-scoped styles are the usual culprit: .wd-results-item { display: flex } in WorkDetail.astro compiles to .wd-results-item[data-astro-cid-…] (0,2,0) and wins, which is why the 6PM results list showed EN and TC stacked together. There is no case where the inactive language should be on screen, so this settles it for every component, present and future. */ .en [data-lang="zh"], .zh [data-lang="en"] { display: none !important; } /* Override revert for sc-disc-list items so flex layout always wins for visible items */ .en .sc-disc-list li[data-lang="en"], .zh .sc-disc-list li[data-lang="zh"] { display: flex !important; } /* ============================================================ LAYOUT SHELL Nav, footer, margin strips, page-wrap — shared on every page. ============================================================ */ /* ── Custom cursor ── */ /* Single element: square filled dot at rest, expands into square ring on hover */ #cursor-dot { position: fixed; top: 0; left: 0; width: 12px; height: 12px; background: var(--black); border: 0px solid var(--black); pointer-events: none; z-index: 9999; transform: translate(-50%,-50%) scale(1); transform-origin: center center; transition: transform .22s cubic-bezier(0.22,1,0.36,1), background .22s cubic-bezier(0.22,1,0.36,1), border-width .22s cubic-bezier(0.22,1,0.36,1), width .22s cubic-bezier(0.22,1,0.36,1), height .22s cubic-bezier(0.22,1,0.36,1); } /* Hover: same element scales up, fill disappears, border appears — dot becomes ring */ body.cursor-hover #cursor-dot { width: 62px; height: 62px; background: transparent; border-width: 2px; } /* cursor-ring element is now unused but kept in HTML — hide it */ #cursor-ring { display: none; } /* ── Cursor trail ── */ .cursor-trail { position: fixed; top: 0; left: 0; width: 10px; height: 10px; background: var(--black); pointer-events: none; z-index: 9997; transform: translate(-50%,-50%); will-change: opacity; } /* ── Margin strips (fixed dot-grid side columns) ── */ .mg-left, .mg-right { position: fixed; top: 0; bottom: 0; width: var(--mg); z-index: 10; pointer-events: none; background-color: var(--white); background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px); background-size: 16px 16px; } .mg-left { left: 0; border-right: var(--frame); } .mg-right { right: 0; border-left: var(--frame); } /* ── Page wrap ── */ .page-wrap { margin-left: var(--mg); margin-right: var(--mg); position: relative; z-index: 1; overflow: clip; /* overflow:clip prevents horizontal scroll bleed like overflow:hidden, but does NOT create a scroll container — so position:sticky and box-shadow corner squares on sec-title-wrap::after remain visible. */ } .inner { padding-left: var(--cp); padding-right: var(--cp); } /* ── Section divider ── */ .sec-divider { width: 100%; height: 1px; background: var(--grey2); position: relative; z-index: 2; } /* ── NAV ── */ nav { position: fixed; top: 0; left: var(--mg); right: var(--mg); z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--cp); background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: var(--frame); transition: transform .32s cubic-bezier(.4,0,.2,1); } nav.nav-hidden { transform: translateY(-100%); } .nav-logo { display: block; height: 56px; } .nav-logo picture { display: block; height: 56px; } .nav-logo img { height: 56px; width: auto; display: block; } .nav-right { display: flex; align-items: center; gap: 36px; } .nav-links { display: flex; gap: 44px; list-style: none; } .nav-links a { font-size: var(--t-body-sm); font-weight: 400; color: var(--grey4); text-decoration: none; transition: color .2s; position: relative; display: flex; align-items: center; gap: 7px; } .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; transition: transform .55s cubic-bezier(.4,0,.2,1); } .nav-icon svg { width: 12px; height: 12px; } .nav-links a:hover .nav-icon { transform: rotate(360deg); } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--black); transition: width .25s; } .nav-links a:hover { color: var(--black); } .nav-links a:hover::after { width: 100%; } .lang-toggle { display: flex; border: var(--frame); border-radius: 2px; overflow: hidden; } .lang-btn { padding: 5px 11px; background: transparent; border: none; cursor: none; font-family: 'DM Mono', monospace; font-size: var(--t-label); letter-spacing: .08em; color: var(--grey3); transition: background .2s, color .2s; } .lang-btn.active { background: var(--grey3); color: var(--white); } .lang-btn:not(.active):hover { background: var(--grey1); color: var(--black); } /* ── Footer ── */ footer { background: var(--white); border-top: var(--frame); padding: 28px var(--cp); display: flex; justify-content: space-between; align-items: center; overflow: visible; } .footer-copy { font-family: 'DM Mono', monospace; font-size: var(--t-label); letter-spacing: .06em; color: var(--grey3); line-height: var(--lh-label); } .footer-links { display: flex; gap: 28px; list-style: none; align-items: center; } .footer-links li { overflow: visible; } .footer-links a { font-size: var(--t-body-sm); font-weight: 300; color: var(--grey4); text-decoration: none; transition: color .2s; line-height: var(--lh-label); display: flex; align-items: center; gap: 6px; position: relative; padding-bottom: 4px; } .footer-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--black); transition: width .25s; } .footer-links a:hover { color: var(--black); } .footer-links a:hover::after { width: 100%; } .footer-email-text { min-width: 10.5ch; display: inline-block; } /* ============================================================ SHARED COMPONENTS Buttons, section headers — reused across all pages. ============================================================ */ /* ── Buttons ── */ .btn-frame { display: inline-flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-size: var(--t-body-sm); font-weight: 400; letter-spacing: .03em; color: var(--black); text-decoration: none; border: 1px solid var(--black); padding: 10px 20px; background: transparent; cursor: none; transition: background .2s, color .2s, gap .2s; } .btn-frame:hover { background: var(--black); color: var(--white); gap: 16px; } .btn-frame.sm { font-size: var(--t-label); padding: 7px 14px; } .btn-frame.white { border-color: var(--white); color: var(--white); } .btn-frame.white:hover { background: var(--white); color: var(--black); } .sec-foot { margin-top: var(--sec-head-mb); display: flex; justify-content: flex-start; } /* ── Section title frame ── */ .sec-head { padding-top: 20px; margin-bottom: var(--sec-head-mb); } .service-section .sec-head { text-align: center; } .sec-head.work-sec-head { display: flex; align-items: center; justify-content: space-between; text-align: left; width: 100%; } .sec-title-wrap { display: inline-block; position: relative; padding: 8px 16px; --sec-title-bg: var(--white); /* overridden per section below */ background: var(--sec-title-bg); } .sec-title-wrap::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.18); pointer-events: none; } .sec-title-wrap::after { content: ''; position: absolute; width: 7px; height: 7px; top: -3px; left: -3px; background: var(--sec-title-bg); border: 1px solid rgba(0,0,0,.22); box-shadow: calc(100% + 2px - 7px + 6px) 0px 0 0 var(--sec-title-bg), calc(100% + 2px - 7px + 6px) 0px 0 1px rgba(0,0,0,.22), 0px calc(100% + 2px - 7px + 6px) 0 0 var(--sec-title-bg), 0px calc(100% + 2px - 7px + 6px) 0 1px rgba(0,0,0,.22), calc(100% + 2px - 7px + 6px) calc(100% + 2px - 7px + 6px) 0 0 var(--sec-title-bg), calc(100% + 2px - 7px + 6px) calc(100% + 2px - 7px + 6px) 0 1px rgba(0,0,0,.22); } .sec-title { font-size: var(--t-h2); font-weight: 400; line-height: var(--lh-heading); letter-spacing: -.02em; position: relative; z-index: 1; } /* Section title background overrides (must match section bg) */ .work-section .sec-title-wrap, .service-section .sec-title-wrap { --sec-title-bg: var(--off); } .contact-section .sec-title-wrap { --sec-title-bg: var(--contact-ground); } .clients-section .sec-title-wrap { --sec-title-bg: var(--white); } /* ============================================================ SECTION BACKGROUNDS & SPACING ============================================================ */ .hero, .about-section, .clients-section { background-color: var(--white); background-image: var(--grid-img); background-size: var(--grid-size); } .service-section { background-color: var(--off); position: relative; overflow: hidden; } .work-section { background-color: var(--off); position: relative; overflow: hidden; } /* Contact is back on the shared --off grey. The colour stays behind --contact-ground rather than being inlined, because the "Get in Touch" section-title chip is keyed to the same variable — one line changes both, and they can never drift apart again. */ .contact-section { --contact-ground: var(--off); background-color: var(--contact-ground); position: relative; overflow: hidden; } .work-section, .service-section, .clients-section, .about-section, .contact-section { padding-top: var(--section-py); padding-bottom: var(--section-py); } /* ============================================================ HERO ============================================================ */ .hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; padding-top: 110px; padding-bottom: var(--section-py); position: relative; } .hero-title { font-size: var(--t-display); font-weight: 400; line-height: var(--lh-heading); letter-spacing: -.025em; margin-bottom: 28px; } .cursor-blink { display: inline-block; font-weight: 300; color: var(--black); animation: blink 1s step-end infinite; margin-left: 2px; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } .hero-desc { font-size: var(--t-body-lg); font-weight: 300; line-height: var(--lh-body); color: var(--grey4); max-width: 420px; margin-bottom: 40px; } .hero-right { display: flex; align-items: center; justify-content: center; } .hero-right img { width: 80%; height: auto; display: block; } /* Bracket frame */ .bracket-frame { position: relative; width: 100%; } .bracket-frame .frame-border { position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.2); pointer-events: none; z-index: 2; } .bracket-frame .sq { position: absolute; width: 9px; height: 9px; background: var(--white); border: 1px solid rgba(0,0,0,.25); z-index: 3; } .sq-tl{top:-4px;left:-4px} .sq-tr{top:-4px;right:-4px} .sq-br{bottom:-4px;right:-4px} .sq-bl{bottom:-4px;left:-4px} .bracket-frame .frame-inner { position: relative; overflow: visible; background: transparent; } .frame-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'DM Mono',monospace; font-size: var(--t-label); letter-spacing:.1em; color:var(--grey3); } /* Scroll hint */ .scroll-hint { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--black); } .scroll-hint:hover .scroll-line { opacity: .6; } .scroll-label { font-family: 'DM Mono', monospace; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--grey4); line-height: var(--lh-label); } .scroll-arrow { display: flex; flex-direction: column; align-items: center; animation: bounce-arrow 1.8s ease-in-out infinite; } .scroll-arrow svg { width: 16px; height: 16px; } .scroll-line { width: 1px; height: 20px; background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent); } @keyframes bounce-arrow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} } /* ============================================================ STATS STRIP ============================================================ */ .stats-strip { background: var(--white); padding: 0 var(--cp); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--grey2); border-bottom: 1px solid var(--grey2); } .stat-item { padding: 40px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-left: 1px solid var(--grey2); border-right: 1px solid var(--grey2); cursor: default; } .stat-item + .stat-item { border-left: none; } .stat-num { font-family: 'Poppins', sans-serif; font-size: clamp(40px, 4.5vw, 64px); font-weight: 400; letter-spacing: -.04em; line-height: 1; color: var(--black); } .stat-num .plus { font-size: .55em; vertical-align: super; font-weight: 300; margin-left: 2px; } .stat-label { font-family: 'DM Mono', monospace; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--grey4); line-height: var(--lh-label); } /* ZH stat labels: use Poppins, no uppercase */ .stat-label [data-lang="zh"] { font-family: 'Poppins', sans-serif; font-size: var(--t-body-sm); letter-spacing: .04em; text-transform: none; } /* ============================================================ WORK CARDS ============================================================ */ .work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 80px 40px; align-items: stretch; } .work-card { text-decoration: none; color: inherit; display: block; position: relative; /* Reserve 9px on right + bottom so the shadow is never clipped when revealed */ padding-right: 9px; padding-bottom: 9px; height: 100%; } /* Shadow: same size/position as the frame, sits underneath, never moves */ .card-shadow { position: absolute; top: 0; left: 0; right: 9px; bottom: 9px; background: var(--black); z-index: 0; } /* Frame: covers the shadow completely by default, lifts on hover to reveal it */ .card-img-wrap { position: relative; z-index: 1; background: #fff; border: 1px solid var(--black); display: flex; flex-direction: column; height: 100%; transform: translate(0, 0); transition: transform .32s cubic-bezier(.25,.46,.45,.94); } .work-card:hover .card-img-wrap { transform: translate(-9px, -9px); } .card-img { position: relative; width: 100%; overflow: hidden; flex-shrink: 0; } /* Cover image crossfade — stacked, natural ratio */ .card-img img { display: block; width: 100%; height: auto; transition: opacity .38s ease; } .card-img img.ph-default { opacity: 1; position: relative; z-index: 1; } .card-img img.ph-hover { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; } .work-card:hover .card-img img.ph-hover { opacity: 1; } .work-card:hover .card-img img.ph-default { opacity: 0; } /* Card text — inside the frame */ .card-meta { padding: 14px 12px; background: #fff; border-top: 1px solid var(--black); display: flex; flex-direction: column; flex: 1; } .card-title { font-size: var(--t-h3); font-weight: 400; line-height: 1.45; margin-top: 8px; margin-bottom: 8px; color: var(--black); } .card-brand { font-size: var(--t-body-sm); font-weight: 400; color: var(--grey4); line-height: var(--lh-label); margin-bottom: 10px; font-family: 'Poppins', sans-serif; letter-spacing: 0; } .card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; } .card-tags { display: flex; gap: 6px; flex-wrap: wrap; } .tag { font-family: 'DM Mono', monospace; font-size: var(--t-label); letter-spacing: .06em; color: var(--grey3); border: 1px solid var(--grey2); padding: 3px 7px; border-radius: 2px; line-height: var(--lh-label); } .card-year { font-family: 'DM Mono', monospace; font-size: var(--t-label); color: var(--grey3); letter-spacing: .08em; flex-shrink: 0; line-height: var(--lh-label); } /* ============================================================ CLIENT LOGO MARQUEE ============================================================ */ .logo-marquee-wrap { overflow: hidden; border-top: 1px solid var(--grey2); border-bottom: 1px solid var(--grey2); padding: 32px 0; margin-top: 44px; display: flex; flex-direction: column; gap: 24px; } .marquee-row { display: flex; gap: 72px; width: max-content; align-items: center; } .marquee-row:nth-child(1) { animation: marquee 50s linear infinite; } .marquee-row:nth-child(2) { animation: marquee 60s linear infinite reverse; } .marquee-row:nth-child(3) { animation: marquee 45s linear infinite; } .logo-marquee-wrap:hover .marquee-row { animation-play-state: paused; } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* Logos sit in full colour by default. Hovering one dims every other logo (both rows) while the hovered one stays in colour. :has() scopes the dim to an actual logo hover, so moving the cursor through the gaps between logos does not dim the row. Browsers without :has() simply keep all logos in colour. */ .client-logo-item { display: flex; align-items: center; justify-content: center; height: 84px; flex-shrink: 0; opacity: 1; filter: grayscale(0); transition: opacity .25s, filter .25s; } a.client-logo-item { text-decoration: none; } .logo-marquee-wrap:has(.client-logo-item:hover) .client-logo-item { opacity: 0.4; filter: grayscale(1); } .logo-marquee-wrap:has(.client-logo-item:hover) .client-logo-item:hover { opacity: 1; filter: grayscale(0); } .client-logo-item img { height: 100%; width: auto; max-width: 240px; object-fit: contain; display: block; } /* ============================================================ SERVICE SECTION — BACKGROUND FLOATERS ============================================================ */ .svc-floater { position: absolute; font-family: 'DM Mono', monospace; font-size: clamp(20px, 4vw, 56px); font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--grey2); opacity: 0; pointer-events: none; user-select: none; z-index: 0; white-space: nowrap; } .svc-graphic { position: absolute; opacity: 0; pointer-events: none; z-index: 0; } /* The inner grid/content sits above floaters */ .service-section .inner, .work-section .inner { position: relative; z-index: 1; } .wk-graphic { position: absolute; opacity: 0; pointer-events: none; z-index: 0; } @media (max-width: 768px) { .svc-floater, .svc-graphic, .wk-graphic { display: none; } } /* ============================================================ SERVICE CARDS ============================================================ */ /* ── SERVICE CARDS ── */ .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; gap: 40px; width: 80%; margin-left: auto; margin-right: auto; } /* Inverted work-card lift pattern: – Wrapper has padding-top/left: 9px to make room for the lifted face – Shadow block sits at top:9px left:9px (bottom-right of the face) — revealed when face lifts – Face covers the shadow at rest (translate 0,0) and lifts to translate(-9px,-9px) by default – On hover: face drops back to (0,0), shadow hidden, bg colour switches */ .service-card { text-decoration: none; color: inherit; cursor: pointer; display: block; position: relative; /* Make room for the face to lift up-left without being clipped */ padding-top: 9px; padding-left: 9px; height: 420px; /* total cell height including the 9px pad */ background: transparent; } /* Shadow: inset from top-left by 9px, fills to right/bottom edges */ .sc-shadow { position: absolute; top: 9px; left: 9px; right: 0; bottom: 0; background: var(--black); z-index: 0; transition: opacity .32s cubic-bezier(.25,.46,.45,.94); } /* Both faces fill the FULL cell (inset: 0). Lifted by default via translate(-9px,-9px) — the wrapper padding-top/left:9px means the face visually starts at the cell's top-left corner, but can slide further up-left to reveal the shadow. On hover drop to (0,0) and face covers the entire cell including the shadow area. */ .sc-default, .sc-hover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; border: 1px solid var(--black); /* Default = lifted: face sits 9px up-left of rest position */ transform: translate(-9px, -9px); transition: transform .32s cubic-bezier(.25,.46,.45,.94); } /* sc-default always on top by default; sc-hover always underneath */ .sc-default { background: var(--white); z-index: 2; } .sc-red .sc-default { background: #FAE9E8; } .sc-blue .sc-default { background: #E8F5F8; } .sc-yellow .sc-default { background: #FEFBE9; } .sc-hover { background: #F2F2F2; z-index: 1; /* Hover face is already in position — no opacity trick needed */ } /* Shadow hides instantly on hover so it's never seen mid-transition */ .service-card:hover .sc-shadow { opacity: 0; } /* On hover: both faces drop flat together (same transform, same timing) */ .service-card:hover .sc-default, .service-card:hover .sc-hover { transform: translate(0, 0); } /* sc-default slides out of the way by fading — but delayed so grey is ready underneath */ .service-card:hover .sc-default { opacity: 0; transition: transform .32s cubic-bezier(.25,.46,.45,.94), opacity .2s ease .16s; /* fade starts after most of the drop is done */ } /* ── Default face ── */ .sc-top { display: flex; justify-content: space-between; align-items: flex-start; align-self: stretch; } .sc-pillar { font-family: 'DM Mono', monospace; font-size: var(--t-label); font-weight: 400; letter-spacing: .08em; color: var(--grey3); } .sc-name { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.01em; line-height: 1.4; align-self: flex-start; margin-top: 16px; /* One word per line in EN */ word-spacing: 100vw; } .sc-num { font-family: 'DM Mono', monospace; font-size: var(--t-label); font-weight: 400; letter-spacing: .08em; color: var(--grey3); flex-shrink: 0; } .sc-red .sc-num { color: #9E2E29; } .sc-blue .sc-num { color: #2F7085; } .sc-yellow .sc-num { color: #B8A61E; } .sc-red .sc-pillar { color: #9E2E29; } .sc-blue .sc-pillar { color: #2F7085; } .sc-yellow .sc-pillar { color: #B8A61E; } .sc-icon { align-self: flex-end; margin-top: auto; width: 144px; height: 144px; display: flex; align-items: center; justify-content: center; } .sc-icon img { width: 144px; height: 144px; object-fit: contain; } /* ── Hover face ── */ .sc-label { font-family: 'DM Mono', monospace; font-size: var(--t-label); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: #D5413A; /* default — overridden per colour group below */ align-self: flex-start; } .sc-red .sc-label { color: #D5413A; } .sc-blue .sc-label { color: #489FB6; } .sc-yellow .sc-label { color: #B8A61E; } .sc-disc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-self: flex-start; margin-top: auto; overflow: hidden; } .sc-disc-list li { font-family: 'DM Mono', monospace; font-size: var(--t-body-sm); font-weight: 300; letter-spacing: .01em; line-height: 1.5; color: var(--black); display: flex !important; align-items: center; gap: 10px; } .sc-disc-list li[data-lang="en"], .sc-disc-list li[data-lang="zh"] { /* both start hidden; lang rules below reveal the right set */ display: none !important; } .en .sc-disc-list li[data-lang="en"], .zh .sc-disc-list li[data-lang="zh"] { display: flex !important; } .sc-disc-list li::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--black); flex-shrink: 0; } /* ============================================================ ABOUT SECTION ============================================================ */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } /* About section: left column (title/text/button) 40%, right column (image) 60%. Items are flat children of .two-col — grid-template-areas stacks header/text/button in the left area and the image fills the right area. */ .about-section .two-col { grid-template-columns: 4fr 6fr; grid-template-areas: "head image" "text image" "btn image"; align-items: center; } .about-item-head { grid-area: head; } .about-item-text { grid-area: text; } .about-item-btn { grid-area: btn; } .about-item-image { grid-area: image; } .about-body { font-size: var(--t-body); font-weight: 300; line-height: var(--lh-body); color: var(--grey5); } .about-body strong { color: var(--black); font-weight: 500; } .about-body p + p { margin-top: 18px; } /* Values hashtags */ .about-values-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .about-value-tag { font-size: var(--t-label); font-family: 'DM Mono', monospace; letter-spacing: .06em; color: var(--grey4); border: 1px solid var(--grey2); padding: 5px 12px; transition: color .2s, border-color .2s; } .about-value-tag:hover { color: var(--black); border-color: var(--grey4); } /* Right-column mascot */ .about-mascot-col { display: flex; align-items: center; justify-content: center; height: 100%; } .about-mascot-col img { width: 100%; height: auto; display: block; } /* ============================================================ CONTACT SECTION ============================================================ */ .contact-tagline { font-size: var(--t-h2); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; margin: 24px 0 18px; } .contact-tagline span { color: #0B0C0D; } .contact-sub { font-size: var(--t-body); font-weight: 300; color: var(--grey4); line-height: var(--lh-body); } .contact-reply { display: block; margin-top: 8px; font-size: var(--t-body); font-weight: 300; color: var(--grey4); line-height: var(--lh-body); } .contact-form { display: flex; flex-direction: column; } .form-row { display: grid; grid-template-columns: 1fr 1fr; } .form-field { border-bottom: 1px solid var(--grey2); padding: 16px 0; transition: border-color .2s; } .form-row .form-field:first-child { border-right: 1px solid var(--grey2); padding-right: 20px; } .form-row .form-field:last-child { padding-left: 20px; } .form-field:focus-within { border-bottom-color: var(--black); } .form-field label { display: block; font-family: 'DM Mono', monospace; font-size: var(--t-micro); letter-spacing: .15em; color: var(--grey3); text-transform: uppercase; margin-bottom: 6px; line-height: var(--lh-label); } .form-field input, .form-field textarea { background: transparent; border: none; outline: none; width: 100%; color: var(--black); font-family: 'Poppins', sans-serif; font-size: var(--t-body); font-weight: 300; resize: none; line-height: var(--lh-body); } .form-field textarea { min-height: 88px; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--grey2); } .form-field-checkbox { border-bottom: 1px solid var(--grey2); padding: 16px 0; } .form-field-checkbox > label { display: block; font-family: 'DM Mono', monospace; font-size: var(--t-micro); letter-spacing: .15em; color: var(--grey3); text-transform: uppercase; margin-bottom: 10px; line-height: var(--lh-label); } .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; } .checkbox-option { display: flex; align-items: center; gap: 7px; font-family: 'Poppins', sans-serif; font-size: var(--t-body); font-weight: 300; color: var(--black); cursor: pointer; user-select: none; border: 1px solid var(--grey2); border-radius: 2px; padding: 6px 14px; transition: border-color .18s, background .18s; } .checkbox-option:hover { border-color: var(--grey3); } .checkbox-option input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1px solid var(--grey3); border-radius: 3px; margin: 0; cursor: pointer; position: relative; flex-shrink: 0; transition: background .15s, border-color .15s; } .checkbox-option input[type="checkbox"]:checked { background: var(--black); border-color: var(--black); } .checkbox-option input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .checkbox-option:has(input:checked) { border-color: var(--black); } /* ============================================================ MOBILE RESPONSIVE Breakpoint: 768px and below ============================================================ */ @media (max-width: 768px) { /* ── Section headers — match about page's mobile spacing ── */ .sec-head { padding-top: 0; margin-bottom: 24px; } /* ── Hide margin strips on mobile ── */ .mg-left, .mg-right { display: none; } /* ── Page wrap: no side margin offset ── */ .page-wrap { margin-left: 0; margin-right: 0; } /* ── Inner content padding ── */ .inner { padding-left: 20px; padding-right: 20px; } /* ── Disable custom cursor on touch devices ── */ body { cursor: auto; } a, button, [role="button"], input, textarea, select { cursor: auto; } #cursor-dot, #cursor-ring, .cursor-trail { display: none; } /* ── NAV ── */ nav { left: 0; right: 0; padding: 12px 20px; } /* Hide desktop nav links & lang toggle by default */ .nav-right { display: none; } /* Hamburger button (injected by nav.js) */ .nav-hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: transparent; border: none; cursor: auto; padding: 4px; flex-shrink: 0; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--black); transition: transform 0.25s ease, opacity 0.2s ease; transform-origin: center; } /* Open state */ .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu drawer */ .nav-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 100px 40px 60px; } .nav-mobile-menu.open { display: flex; } .nav-mobile-menu ul { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .nav-mobile-menu ul li a { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: 400; color: var(--black); text-decoration: none; padding: 18px 0; width: 100%; border-bottom: 1px solid var(--grey1); transition: color 0.2s; } .nav-mobile-menu ul li:first-child a { border-top: 1px solid var(--grey1); } .nav-mobile-menu ul li a:hover { color: var(--red); } .nav-mobile-menu ul li a .nav-icon { width: 18px; height: 18px; } .nav-mobile-menu ul li a .nav-icon svg { width: 16px; height: 16px; } /* Lang toggle inside mobile menu */ .nav-mobile-lang { margin-top: 36px; display: flex; border: var(--frame); border-radius: 2px; overflow: hidden; } .nav-mobile-lang .lang-btn { padding: 8px 20px; font-size: var(--t-body-sm); } /* ── Section spacing ── */ .work-section, .service-section, .clients-section, .about-section, .contact-section { padding-top: 56px; padding-bottom: 56px; } .sec-head { margin-bottom: 32px; } /* ── HERO ── */ .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 100px; padding-bottom: 56px; gap: 40px; } .hero-right { order: -1; } .hero-right img { width: 80%; } .hero-desc { max-width: 100%; font-size: var(--t-body); } .scroll-hint { display: none; } /* ── STATS STRIP ── */ .stats-strip { grid-template-columns: 1fr; padding: 0 20px; } .stat-item { padding: 28px 0; border-left: none; border-right: none; border-bottom: 1px solid var(--grey2); } .stat-item:last-child { border-bottom: none; } .stat-item + .stat-item { border-left: none; } /* ── WORK CARDS ── */ .work-grid { grid-template-columns: 1fr; gap: 32px; } /* Disable the shadow lift effect on touch — it doesn't translate well */ .work-card { padding-right: 0; padding-bottom: 0; } .card-shadow { display: none; } .work-card:hover .card-img-wrap { transform: none; } /* ── SERVICE GRID ── */ .service-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 20px; width: 100%; } /* On mobile: no lift, no hover — show default face only, flat. Icon centred on top, title underneath, both scaled up to fill ~80% of the card. */ .service-card { padding-top: 0; padding-left: 0; height: 190px; } .sc-shadow { display: none; } .sc-default, .sc-hover { top: 0; left: 0; right: 0; bottom: 0; /* fill full cell */ transform: translate(0, 0) !important; transition: none; padding: 16px; border: 1px solid var(--grey2); } .sc-default { flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .sc-hover { opacity: 0 !important; pointer-events: none; } .sc-default { opacity: 1 !important; } .sc-top { display: none; } .sc-name { font-size: 16px; word-spacing: normal; margin-top: 0; text-align: center; align-self: center; order: 2; } .sc-num { display: none; } .sc-pillar { display: none; } .sc-icon { position: static; align-self: center; margin-top: 0; order: 1; width: 96px; height: 96px; opacity: 1; } .sc-icon img { width: 96px; height: 96px; } /* ── ABOUT ── */ .two-col { grid-template-columns: 1fr; gap: 36px; } /* About section mobile layout: single column, left-aligned, full width. Order: header, image, content, button. Specificity must match/exceed the desktop ".about-section .two-col" rule (0,0,2,0) or it gets overridden even inside this media query — hence the repeated selector. */ .about-section .two-col, .about-two-col { grid-template-columns: 1fr; grid-template-areas: none; gap: 24px; } /* Children still carry desktop grid-area assignments (head/text/btn/image) — must explicitly reset to auto or they keep stacking into named cells that no longer exist on the single-column mobile grid. */ .about-item-head, .about-item-image, .about-item-text, .about-item-btn { grid-area: auto; } .about-item-head { order: 1; margin-bottom: 0; } .about-item-image { order: 2; display: block; height: auto; } .about-item-image img { width: 100%; margin: 0; } .about-item-text { order: 3; } .about-item-btn { order: 4; margin-top: 0 !important; } /* ── CLIENT MARQUEE ── */ .logo-marquee-wrap { margin-top: 32px; } .client-logo-item { height: 66px; } .client-logo-item img { max-width: 180px; } /* ── CONTACT ── */ .contact-tagline { font-size: clamp(22px, 6vw, 28px); } .form-row { grid-template-columns: 1fr; } .form-row .form-field:first-child { border-right: none; padding-right: 0; } .form-row .form-field:last-child { padding-left: 0; } .contact-bg { font-size: clamp(60px, 20vw, 100px); } /* ── Footer ── */ footer { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 20px; } .footer-copy { line-height: 1.7; white-space: normal; } .footer-links { flex-wrap: wrap; gap: 16px 24px; } } /* ── Single-column below 480px ── */ @media (max-width: 480px) { .service-grid { grid-template-columns: 1fr; gap: 16px; } .service-card { height: 220px; } }