/* ========================================================================== HKG — Visual Effects Studio Design system · Cinematic / Dark / Minimal Typography: Fraunces (serif, headings/display) + Inter (sans, UI/body) — both Google Fonts, loaded in base.html . Both cover Vietnamese. Brand LOCKED: #ED1651 red · #15325C navy — logo is never recolored ========================================================================== */ /* --- Tokens -------------------------------------------------------------- */ :root { /* Surface */ --bg: #06070a; --bg-2: #090b10; --surface: #0c0e14; --surface-2: #10131a; /* Text */ --text: #eceef1; --text-2: #9aa0aa; --text-3: #666d78; /* Line */ --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.28); /* Brand — logo colours, used only as interface accents */ --red: #ed1651; --red-dim: #b21140; --navy: #15325c; --focus: #ff2f66; /* Type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-text: "Inter", "Helvetica Neue", Arial, sans-serif; --fs-display: clamp(2.05rem, 5.4vw, 5.5rem); --fs-h1: clamp(1.8rem, 4.6vw, 4.4rem); --fs-h2: clamp(1.45rem, 2.9vw, 2.7rem); --fs-h3: clamp(1.1rem, 1.5vw, 1.35rem); --fs-body: clamp(1rem, 1.05vw, 1.0625rem); --fs-small: .8125rem; --fs-label: .6875rem; --lh-display: 1.1; --lh-heading: 1.1; --lh-body: 1.6; --ls-display: .012em; --ls-heading: -.02em; --ls-label: .2em; /* Space */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(4.5rem, 9vw, 8.5rem); /* Layout */ --container: 1440px; --gutter: clamp(1.25rem, 4.2vw, 4.5rem); --nav-h: 84px; /* Motion */ --dur-1: 220ms; --dur-2: 480ms; --dur-3: 900ms; --ease: cubic-bezier(.22,.61,.36,1); --ease-2: cubic-bezier(.16,1,.3,1); --radius: 2px; } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* .project etc. set display:grid, which would otherwise beat the UA rule for [hidden] */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: var(--lh-heading); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, video { display: block; max-width: 100%; } picture > img { width: 100%; } .hero__media picture, .page-hero__media picture, .project__frame picture, .ai-feature__media picture, .leader__media picture, .portal-teaser__media picture, .figure picture { display: block; width: 100%; height: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); } ::selection { background: var(--red); color: #fff; } .skip-link { position: fixed; top: -100px; left: var(--sp-4); z-index: 999; padding: var(--sp-3) var(--sp-5); background: var(--red); color: #fff; font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; transition: top var(--dur-1) var(--ease); } .skip-link:focus { top: var(--sp-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Film grain ---------------------------------------------------------- */ .grain { position: fixed; inset: -50%; z-index: 200; pointer-events: none; opacity: .028; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); animation: grain 6s steps(6) infinite; } @keyframes grain { 0%,100% { transform: translate(0,0) } 16% { transform: translate(-4%,-3%) } 33% { transform: translate(3%,-5%) } 50% { transform: translate(-3%,4%) } 66% { transform: translate(4%,3%) } 83% { transform: translate(-5%,-2%) } } @media (prefers-reduced-motion: reduce) { .grain { animation: none; } } .split > *, .ai-feature > *, .leader > *, .cap-row > *, .caps > *, .work-grid > *, .contact-grid > *, .cols > *, .approach > *, .ai-grid > *, .page-hero__inner > *, .hero__inner > *, .site-footer__top > *, .spec > *, .figures > * { min-width: 0; } /* --- Layout primitives --------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--tight { padding-block: calc(var(--section-y) * .62); } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* --- Type utilities ------------------------------------------------------ */ .eyebrow { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: var(--sp-3); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--red); flex: none; } .eyebrow--plain::before { display: none; } .display, .h1, .h2, .h3 { overflow-wrap: break-word; } /* On very narrow screens allow a break inside a word: `anywhere` (unlike `break-word`) also shrinks the intrinsic minimum, so a single long word can no longer push the page wider than the viewport. */ @media (max-width: 400px) { .display, .h1, .h2, .h3 { overflow-wrap: anywhere; } } .display { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-heading); font-weight: 600; } .h1 { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: 600; } .h2 { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: 500; } .h3 { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: 500; } .lede { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--text-2); line-height: 1.62; max-width: 46ch; } .body-2 { color: var(--text-2); } .small { font-size: var(--fs-small); color: var(--text-2); } .meta { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); } /* --- Links & buttons ----------------------------------------------------- */ .link { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; color: var(--text); padding-bottom: 3px; border-bottom: 1px solid var(--line-2); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .link .arw { transition: transform var(--dur-1) var(--ease); color: var(--red); } .link:hover { border-color: var(--red); } .link:hover .arw { transform: translateX(4px); } .btn { display: inline-flex; align-items: center; gap: .7em; padding: .95em 1.7em; border: 1px solid var(--line-2); font-size: var(--fs-small); letter-spacing: .16em; text-transform: uppercase; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .btn:hover { border-color: var(--line-strong); background: rgba(255,255,255,.03); } .btn .arw { color: var(--red); transition: transform var(--dur-1) var(--ease); } .btn:hover .arw { transform: translateX(4px); } .btn--accent { border-color: rgba(237,22,81,.5); } .btn--accent:hover { border-color: var(--red); background: rgba(237,22,81,.08); } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 120; border-bottom: 1px solid transparent; background: linear-gradient(180deg, rgba(6,7,10,.82), rgba(6,7,10,0)); transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .site-header.is-stuck { background: rgba(6,7,10,.9); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--line); } .site-header__inner { min-height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-6); } .brand { flex: none; display: block; padding-block: var(--sp-4); } .brand img { width: clamp(126px, 12vw, 178px); height: auto; } .nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.85rem, 1.5vw, 2.1rem); } .nav a { font-size: var(--fs-label); letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; color: var(--text-2); padding-block: var(--sp-2); position: relative; transition: color var(--dur-1) var(--ease); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); } .nav a:hover { color: var(--text); } .nav a:hover::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--text); } .nav a[aria-current="page"]::after { transform: scaleX(1); } .nav-utils { display: flex; align-items: center; gap: clamp(.85rem, 1.4vw, 1.75rem); } .lang { display: flex; align-items: center; gap: .55em; font-size: var(--fs-label); letter-spacing: .12em; } .lang a { color: var(--text-3); transition: color var(--dur-1) var(--ease); } .lang a:hover { color: var(--text); } .lang a.is-active { color: var(--red); } .lang span { color: var(--line-strong); } .portal-link { display: inline-flex; align-items: center; gap: .55em; white-space: nowrap; font-size: var(--fs-label); letter-spacing: .17em; text-transform: uppercase; color: var(--text); padding: .68em 1.15em; border: 1px solid var(--red); background: rgba(237,22,81,.14); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .portal-link svg { width: 10px; height: 12px; fill: var(--red); flex: none; } .portal-link:hover { color: var(--text); border-color: var(--red); background: rgba(237,22,81,.28); } /* Mobile nav toggle */ .nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; place-items: center; } .nav-toggle span { display: block; width: 22px; height: 1px; background: var(--text); position: relative; transition: background var(--dur-1) var(--ease); } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: var(--text); transition: transform var(--dur-2) var(--ease), top var(--dur-2) var(--ease); } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } body.nav-open .nav-toggle span { background: transparent; } body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); } body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 1200px) { .nav-toggle { display: grid; } .site-header__inner { gap: var(--sp-4); } .nav, .nav-utils { position: fixed; left: 0; right: 0; z-index: 110; flex-direction: column; align-items: flex-start; background: var(--bg-2); padding: var(--sp-6) var(--gutter); transform: translateY(-14px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2); } .nav { top: var(--nav-h); border-top: 1px solid var(--line); gap: var(--sp-4); padding-bottom: var(--sp-3); } .nav a { font-size: .875rem; letter-spacing: .1em; } .nav-utils { top: auto; margin-top: 0; transform: translateY(-14px); padding-top: 0; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; gap: var(--sp-5); } body.nav-open .nav, body.nav-open .nav-utils { opacity: 1; transform: none; pointer-events: auto; visibility: visible; } .nav-utils { position: static; display: none; } body.nav-open .nav-utils { display: flex; position: fixed; top: auto; } } @media (max-width: 1200px) { /* mobile panel: nav + utils share one flow */ .nav-panel { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 110; overflow-y: auto; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--sp-6) var(--gutter) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-6); transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2); } body.nav-open .nav-panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .nav { position: static; margin-left: 0; align-items: flex-start; flex-direction: column; gap: var(--sp-4); opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: none; padding: 0; border: 0; } .nav a { font-size: .9rem; letter-spacing: .1em; } .nav-utils { position: static !important; display: flex !important; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: none; padding: 0; border: 0; } } @media (min-width: 1201px) { .nav-panel { display: contents; } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; isolation: isolate; margin-top: calc(var(--nav-h) * -1); } .hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,10,.86) 0%, rgba(6,7,10,.32) 34%, rgba(6,7,10,.72) 78%, var(--bg) 100%), linear-gradient(90deg, rgba(6,7,10,.8) 0%, rgba(6,7,10,.22) 52%, rgba(6,7,10,.5) 100%); } .hero__inner { min-height: min(100svh, 940px); padding-top: calc(var(--nav-h) + var(--sp-8)); padding-bottom: var(--sp-8); display: grid; align-content: center; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-8); } .hero__copy { max-width: min(58rem, 100%); display: grid; gap: var(--sp-5); } @media (min-width: 901px) { .hero__copy .display { white-space: nowrap; } } .hero__copy .display { margin-block: var(--sp-2) var(--sp-1); } .hero__copy .lede { max-width: 34rem; } .hero__actions { margin-top: var(--sp-3); } .hero__index { align-self: center; display: grid; gap: var(--sp-4); text-align: right; } .hero__index li { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--sp-4); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .hero__index li b { font-weight: 400; color: var(--line-strong); font-variant-numeric: tabular-nums; } .hero__index li.is-active { color: var(--text); } .hero__index li.is-active b { color: var(--red); } .hero__scroll { position: absolute; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); display: grid; justify-items: center; gap: var(--sp-3); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); } .hero__scroll i { display: block; width: 1px; height: 40px; background: linear-gradient(180deg, var(--line-strong), transparent); } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; min-height: min(92svh, 760px); } .hero__index { display: none; } .hero__scroll { display: none; } } /* Interior page hero */ .page-hero { position: relative; isolation: isolate; margin-top: calc(var(--nav-h) * -1); } .page-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,10,.88) 0%, rgba(6,7,10,.44) 45%, var(--bg) 100%); } .page-hero__inner { min-height: min(72svh, 620px); padding-top: calc(var(--nav-h) + var(--sp-8)); padding-bottom: var(--sp-8); display: grid; align-content: end; gap: var(--sp-5); } .page-hero__inner .h1 { max-width: 20ch; } .page-hero__inner .lede { max-width: 52ch; } .crumb { display: flex; flex-wrap: wrap; gap: .6em; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); } .crumb a:hover { color: var(--text); } .crumb span { color: var(--line-strong); } .crumb b { font-weight: 400; color: var(--text-2); } /* ========================================================================== Section header ========================================================================== */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-7); } .section-head__title { display: grid; gap: var(--sp-3); } @media (max-width: 680px) { .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } } /* ========================================================================== Work ========================================================================== */ .work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.75rem); } .work-grid--index { grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.4vw, 2.75rem); } .project { display: grid; gap: var(--sp-4); } .project__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--line); } .project__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform var(--dur-3) var(--ease-2), filter var(--dur-3) var(--ease-2); filter: saturate(.86) brightness(.94); } .project__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgba(6,7,10,.72) 100%); opacity: .9; transition: opacity var(--dur-2) var(--ease); } .project:hover .project__frame img { transform: scale(1.035); filter: saturate(1) brightness(1); } .project:hover .project__frame::after { opacity: .65; } .project__body { display: grid; gap: var(--sp-2); } .project__title { font-family: var(--font-text); font-size: clamp(1rem, 1.25vw, 1.2rem); letter-spacing: .05em; text-transform: uppercase; } .project--lg .project__title { font-size: clamp(1.35rem, 2vw, 1.9rem); } .project__tags { display: flex; flex-wrap: wrap; gap: .5em 1.1em; } .project__tags li { font-size: var(--fs-label); letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); } .project:hover .project__title { color: #fff; } .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-7); } .filters button { padding: .62em 1.15em; border: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .filters button:hover { color: var(--text); border-color: var(--line-2); } .filters button[aria-pressed="true"] { color: var(--text); border-color: var(--red); } @media (max-width: 1080px) { .work-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .work-grid, .work-grid--index { grid-template-columns: 1fr; } } /* ========================================================================== Capabilities ========================================================================== */ .caps { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto); border-top: 1px solid var(--line); } .cap { /* Subgrid: icon / title / description / services each get their own shared row, so the divider above the service list lines up across all tiles however long the description runs. */ display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5) var(--sp-7); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background var(--dur-2) var(--ease); } .cap:first-child { border-left: 1px solid var(--line); } .cap:hover { background: rgba(255,255,255,.018); } .cap__icon { width: 26px; height: 26px; stroke: var(--red); fill: none; stroke-width: 1.15; } .cap__title { font-family: var(--font-text); font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; line-height: 1.25; } .cap__desc { font-size: var(--fs-small); color: var(--text-2); line-height: 1.6; } /* The seven official HKG services, listed under the capability they belong to. */ .cap__services { display: grid; gap: .5rem; align-content: start; padding-top: var(--sp-4); border-top: 1px solid var(--line); } .cap__services li { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: baseline; gap: .6em; } .cap__services li::before { content: ""; width: 4px; height: 1px; background: var(--red); flex: none; } @supports not (grid-template-rows: subgrid) { .cap { display: flex; flex-direction: column; } .cap__services { margin-top: auto; } } @media (max-width: 1080px) { .caps { grid-template-columns: repeat(2, 1fr); } .cap:nth-child(odd) { border-left: 1px solid var(--line); } } @media (max-width: 560px) { .caps { grid-template-columns: 1fr; } .cap { border-left: 1px solid var(--line); } } /* Capability detail rows (capabilities page) */ .cap-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,5vw,5rem); padding-block: var(--sp-8); border-bottom: 1px solid var(--line); align-items: start; } .cap-row:first-of-type { border-top: 1px solid var(--line); } .cap-row__n { font-family: var(--font-text); font-size: var(--fs-label); letter-spacing: .2em; color: var(--red); } .cap-row__head { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--nav-h) + var(--sp-5)); } .cap-row__body { display: grid; gap: var(--sp-5); } .tag-list { display: flex; flex-wrap: wrap; gap: .55rem; } .tag-list li { padding: .5em 1em; border: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); } @media (max-width: 860px) { .cap-row { grid-template-columns: 1fr; gap: var(--sp-5); } .cap-row__head { position: static; } } /* ========================================================================== AI & Technology feature ========================================================================== */ .ai-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; } .ai-feature__copy { display: grid; gap: var(--sp-5); align-content: center; } .ai-feature__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); } .ai-feature__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.95); } .ai-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(6,7,10,0) 40%, rgba(6,7,10,.6) 100%); } .ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: var(--sp-8); } .ai-grid > li { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6) var(--sp-5); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } .ai-grid > li:nth-child(3n+1) { border-left: 1px solid var(--line); } .ai-grid__n { font-size: var(--fs-label); letter-spacing: .2em; color: var(--red); } .ai-grid h3 { font-family: var(--font-text); font-size: .95rem; letter-spacing: .09em; text-transform: uppercase; } .ai-grid p { font-size: var(--fs-small); color: var(--text-2); line-height: 1.6; } @media (max-width: 960px) { .ai-feature { grid-template-columns: 1fr; } .ai-grid { grid-template-columns: repeat(2, 1fr); } .ai-grid > li:nth-child(3n+1) { border-left: 0; } .ai-grid > li:nth-child(odd) { border-left: 1px solid var(--line); } } @media (max-width: 560px) { .ai-grid { grid-template-columns: 1fr; } .ai-grid > li { border-left: 1px solid var(--line) !important; } } /* ========================================================================== Approach timeline ========================================================================== */ .approach { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); } .approach::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent); } .step { display: grid; gap: var(--sp-4); align-content: start; position: relative; padding-right: var(--sp-4); } .step__node { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); display: grid; place-items: center; position: relative; z-index: 1; transition: border-color var(--dur-2) var(--ease); } .step__node i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); transition: background var(--dur-2) var(--ease); } .step:hover .step__node { border-color: var(--red); } .step:hover .step__node i { background: var(--red); } .step__n { font-size: var(--fs-label); letter-spacing: .2em; color: var(--red); } .step__title { font-family: var(--font-text); font-size: 1rem; letter-spacing: .09em; text-transform: uppercase; } .step__desc { font-size: var(--fs-small); color: var(--text-2); line-height: 1.6; max-width: 22ch; } @media (max-width: 900px) { .approach { grid-template-columns: 1fr; gap: var(--sp-6); } .approach::before { top: 0; bottom: 0; left: 17px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--line-2) 6%, var(--line-2) 94%, transparent); } .step { grid-template-columns: 34px 1fr; column-gap: var(--sp-5); align-items: start; } .step__node { grid-row: span 3; } .step__desc { max-width: 46ch; } } /* Approach page — stage blocks */ .stage { display: grid; grid-template-columns: 96px 1fr; gap: clamp(1.5rem,4vw,4rem); padding-block: var(--sp-8); border-bottom: 1px solid var(--line); } .stage:first-of-type { border-top: 1px solid var(--line); } .stage__n { font-family: var(--font-display); font-size: clamp(2rem,4vw,3.4rem); color: var(--line-2); line-height: 1; } .stage__body { display: grid; gap: var(--sp-4); max-width: 62ch; } @media (max-width: 640px) { .stage { grid-template-columns: 1fr; gap: var(--sp-4); } } /* ========================================================================== Leadership / BachNN ========================================================================== */ .leader { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .leader__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); } .leader__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.9); } .leader__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,10,.15), rgba(6,7,10,.62)); } .leader__body { display: grid; gap: var(--sp-4); } .leader__name { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: .015em; } .leader__role { font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; color: var(--red); } .leader__actions { margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; } /* Studio trust facts strip */ .trust-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem,3vw,3rem); border-top: 1px solid var(--line); padding-top: var(--sp-6); } .trust-facts p { font-size: var(--fs-body); color: var(--text); line-height: 1.5; max-width: 24ch; } .trust-credits { margin-top: var(--sp-6); color: var(--text-3); max-width: 62ch; } .trust-credits .link { margin-left: .5em; } .cert-badge { display: inline-block; max-width: 100%; margin-top: var(--sp-4); padding: .6em 1.1em; border: 1px solid rgba(237,22,81,.4); background: rgba(237,22,81,.07); font-size: var(--fs-small); letter-spacing: .02em; color: var(--text); } @media (max-width: 1000px) { .trust-facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .trust-facts { grid-template-columns: 1fr; } } @media (max-width: 860px) { .leader { grid-template-columns: 1fr; } } /* Expertise columns */ .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,3rem); border-top: 1px solid var(--line); padding-top: var(--sp-6); } .cols > div { display: grid; gap: var(--sp-4); align-content: start; } .cols h3 { font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); } .cols ul { display: grid; gap: var(--sp-3); } .cols li { font-size: var(--fs-small); color: var(--text-2); } @media (max-width: 760px) { .cols { grid-template-columns: 1fr; gap: var(--sp-6); } } /* Filmography / credit rows */ .credits { border-top: 1px solid var(--line); } .credit-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); padding-block: var(--sp-5); border-bottom: 1px solid var(--line); align-items: baseline; } .credit-row__title { font-family: var(--font-text); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; } .credit-row span { font-size: var(--fs-small); color: var(--text-2); } @media (max-width: 720px) { .credit-row { grid-template-columns: 1fr; gap: var(--sp-2); } } /* ========================================================================== Case study ========================================================================== */ .spec { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .spec > div { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; display: grid; gap: var(--sp-2); align-content: start; } .spec dt { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .spec dd { margin: 0; font-size: var(--fs-small); } @media (max-width: 760px) { .spec { grid-template-columns: repeat(2, 1fr); } } .prose { display: grid; gap: var(--sp-4); max-width: 64ch; } .prose p { color: var(--text-2); } .figure { display: grid; gap: var(--sp-3); } .figure img { width: 100%; border: 1px solid var(--line); } .figure figcaption { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .figures { display: grid; gap: var(--sp-6); } .figures--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 760px) { .figures--2 { grid-template-columns: 1fr; } } .breakdown { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); } .breakdown li { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); } .breakdown li:not(:last-child)::after { content: ""; width: 26px; height: 1px; background: var(--line-2); } .pager { display: flex; justify-content: space-between; gap: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-6); } .pager a { display: grid; gap: var(--sp-2); } .pager a:last-child { text-align: right; } .pager .meta { color: var(--text-3); } .pager strong { font-family: var(--font-text); font-weight: 400; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; } .pager a:hover strong { color: #fff; } /* ========================================================================== Client Portal — Coming Soon ========================================================================== */ .portal-panel { border: 1px solid var(--line); background: var(--surface); padding: clamp(2rem, 5vw, 4.5rem); display: grid; gap: var(--sp-5); justify-items: start; max-width: 62rem; } .status { display: inline-flex; align-items: center; gap: .7em; padding: .55em 1.05em; border: 1px solid rgba(237,22,81,.4); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--text); } .status i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; box-shadow: 0 0 0 0 rgba(237,22,81,.55); animation: pulse 2.6s var(--ease) infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(237,22,81,0); } 100% { box-shadow: 0 0 0 0 rgba(237,22,81,0); } } @media (prefers-reduced-motion: reduce) { .status i { animation: none; } } .portal-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); } .portal-list li { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-4); align-items: start; } .portal-list svg { width: 16px; height: 16px; stroke: var(--red); fill: none; stroke-width: 1.2; margin-top: 3px; } .portal-list p { font-size: var(--fs-small); color: var(--text-2); } .portal-list strong { display: block; font-weight: 400; color: var(--text); font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3em; } /* Homepage portal teaser */ .portal-teaser { border: 1px solid var(--line); background: var(--surface); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; overflow: hidden; } .portal-teaser__copy { padding: clamp(1.75rem, 4vw, 3.5rem); display: grid; gap: var(--sp-4); justify-items: start; } .portal-teaser__media { position: relative; height: 100%; min-height: 260px; } .portal-teaser__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.72); } .portal-teaser__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface), rgba(12,14,20,0) 55%); } @media (max-width: 800px) { .portal-teaser { grid-template-columns: 1fr; } .portal-teaser__media { min-height: 180px; order: -1; } } /* ========================================================================== Contact ========================================================================== */ .contact-cta { display: grid; gap: var(--sp-5); justify-items: start; } .contact-mail { max-width: 100%; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(1.5rem, 3.6vw, 2.9rem); letter-spacing: .01em; display: inline-flex; align-items: center; gap: .4em; border-bottom: 1px solid var(--line-2); padding-bottom: .1em; transition: border-color var(--dur-2) var(--ease); } .contact-mail .arw { color: var(--red); font-size: .6em; transition: transform var(--dur-2) var(--ease); } .contact-mail:hover { border-color: var(--red); } .contact-mail:hover .arw { transform: translateX(6px); } .form { display: grid; gap: var(--sp-5); max-width: 40rem; } .field { display: grid; gap: var(--sp-2); } .field label { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .field input, .field textarea { width: 100%; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--line-2); padding: .75em 0; font: inherit; font-size: var(--fs-body); transition: border-color var(--dur-1) var(--ease); } .field textarea { resize: vertical; min-height: 7rem; } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--red); } .field input:focus-visible, .field textarea:focus-visible { outline: none; } .form-note { font-size: var(--fs-small); color: var(--text-3); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-2); } .site-footer__top { display: grid; grid-template-columns: 1.25fr repeat(3, .8fr); gap: clamp(2rem,4vw,3.5rem); padding-block: var(--sp-8); } .site-footer__brand { display: grid; gap: var(--sp-4); align-content: start; } .site-footer__brand img { width: 128px; height: auto; } .site-footer h3 { font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-4); } .site-footer ul { display: grid; gap: var(--sp-3); } .site-footer li a { font-size: var(--fs-small); color: var(--text-2); transition: color var(--dur-1) var(--ease); } .site-footer li a:hover { color: var(--text); } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: .1em; color: var(--text-3); } @media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .site-footer__top { grid-template-columns: 1fr; } } /* ========================================================================== Reveal-on-scroll ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(18px); } .js [data-reveal] { transition: opacity var(--dur-3) var(--ease-2), transform var(--dur-3) var(--ease-2); } [data-reveal].is-in { opacity: 1; transform: none; } html:not(.js) [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --- Print --------------------------------------------------------------- */ @media print { .site-header, .site-footer, .grain, .hero__scroll { display: none; } body { background: #fff; color: #000; } } /* ========================================================================== Responsive grid utilities (used instead of inline grid-template-columns, which would beat the breakpoint media queries and force horizontal overflow on phones) ========================================================================== */ .split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split--copy { grid-template-columns: 1fr 1.15fr; } .split--wide { grid-template-columns: 1fr 1.2fr; align-items: start; } .split--top { grid-template-columns: 1fr 1fr; align-items: start; } @media (max-width: 900px) { .split--copy, .split--wide, .split--top { grid-template-columns: 1fr; } } .cols--3 { grid-template-columns: repeat(3, 1fr); } .cols--4 { grid-template-columns: repeat(4, 1fr); } .cols--1 { grid-template-columns: 1fr; border: 0; padding-top: 0; gap: var(--sp-7); } @media (max-width: 1000px) { .cols--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .cols--3, .cols--4 { grid-template-columns: 1fr; gap: var(--sp-6); } } .h2--sub { font-size: clamp(1.3rem, 2.1vw, 1.9rem); } .measure-lg { max-width: 58ch; } .measure-md { max-width: 52ch; } .measure-sm { max-width: 44ch; } .stack-start { align-self: center; } .plain-link { border: 0; padding: 0; } /* Laptop widths: the desktop navigation is still on, so tighten it to fit. */ @media (max-width: 1440px) { .site-header__inner { gap: var(--sp-4); } .brand img { width: clamp(112px, 9.4vw, 140px); } .nav { gap: clamp(.7rem, 1.15vw, 1.45rem); } .nav a { letter-spacing: .12em; } .portal-link { padding: .62em .85em; letter-spacing: .12em; } .nav-utils { gap: clamp(.7rem, 1.1vw, 1.2rem); } }