/* Rigstore site styles. Source: src/site.css (built to public/css/site..css by scripts/build_site.py) */ @font-face { font-family: "Inter"; src: url("/fonts/inter-var-latin-3100e775.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/fonts/archivo-var-latin-f46512b2.woff2") format("woff2"); font-weight: 500 900; font-stretch: 68% 110%; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-500-latin-cb182fee.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { --ink: #0e0f11; --ink-2: #2b2e33; --muted: #5f636b; --line: #e4e4e0; --paper: #ffffff; --wash: #f5f5f2; --accent: #00687f; /* from the old site's teal #007b9a, darkened for AA contrast */ --accent-wash: #e5f1f3; --radius: 14px; --radius-sm: 8px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1120px; --gutter: clamp(16px, 4vw, 40px); --todo: #b45309; } /* ---------- Document ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); font-family: var(--font); color: var(--ink); } /* ---------- Base ---------- */ body { font-size: 17px; line-height: 1.6; color: var(--ink-2); -webkit-font-smoothing: antialiased; } :where(body) :is(h1, h2, h3, h4) { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.02em; } :where(body) p { margin: 0 0 1em; } a { color: var(--ink); text-underline-offset: 3px; } img { display: block; max-width: 100%; height: auto; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: 820px; } .center { text-align: center; } .small { font-size: 14px; } .muted { color: var(--muted); } .h3 { font-size: 20px; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .eyebrow-light { color: #7fd0e0; } .lede { font-size: clamp(18px, 1.4vw + 12px, 21px); color: var(--ink-2); max-width: 62ch; } .todo { display: inline-block; vertical-align: middle; margin: 0 4px; padding: 2px 8px; border: 1px dashed var(--todo); border-radius: 999px; font: 600 11px/1.6 var(--mono); color: var(--todo); background: #fff7ed; letter-spacing: 0; white-space: nowrap; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none; line-height: 1.2; cursor: pointer; font-family: inherit; transition: transform .15s ease, background .15s ease; } .btn:hover { transform: translateY(-1px); } .btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .btn-sm { padding: 8px 14px; font-size: 14px; } .btn-lg { padding: 14px 22px; font-size: 16px; } .btn-ghost { background: transparent; color: var(--ink) !important; } .btn-light { background: #fff; color: var(--ink) !important; border-color: #fff; } .link-arrow { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .actions-center { justify-content: center; } /* ---------- Header ---------- */ .site-header { position: relative; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); } .header-inner { display: flex; align-items: center; height: 72px; } .header-inner .brand { margin-right: auto; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .logo-img img { width: 36px; height: 36px; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-name { font-weight: 700; color: var(--ink); font-size: 16px; letter-spacing: -0.01em; } .brand-sub { font-size: 12px; color: var(--muted); } .nav { display: flex; align-items: center; gap: 28px; } .nav a:not(.btn) { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); } .nav a:not(.btn) { padding: 6px 0; } .nav a.is-active { color: var(--ink); position: relative; } .nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; } .header-cta { margin-left: 28px; } .menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; } .menu-btn span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } /* ---------- Sections ---------- */ .section { padding: clamp(56px, 8vw, 104px) 0; } .section-tight { padding-top: 24px; } .section-wash { background: var(--wash); } .section-dark { background: var(--ink); color: #c9ccd1; } .section-dark h2 { color: #fff; } .section-dark .lede { color: #c9ccd1; } .section-title { font-size: clamp(28px, 2.6vw + 14px, 42px); font-weight: 700; max-width: 22ch; } .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; } .section-head .section-title { margin: 0; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split-top { align-items: start; margin-bottom: 48px; } /* Hero */ .hero { padding: clamp(56px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(1200px 400px at 85% -10%, var(--accent-wash), transparent 70%); } .hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .hero h1 { font-size: clamp(48px, 6.5vw + 10px, 96px); font-weight: 800; letter-spacing: -0.045em; margin-bottom: 8px; } .hero-role { font-size: clamp(20px, 1.8vw + 10px, 28px); font-weight: 600; color: var(--accent); margin-bottom: 18px; letter-spacing: -0.01em; } .hero-line { font-size: clamp(22px, 2vw + 12px, 32px); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 20px; } .stack-card { background: var(--ink); color: #d5d8dc; border-radius: var(--radius); padding: 0 0 8px; box-shadow: 0 24px 60px rgba(14,15,17,.22); } .stack-head { display: flex; gap: 6px; align-items: center; padding: 14px 18px; border-bottom: 1px solid #23262b; } .stack-head .dot { width: 10px; height: 10px; border-radius: 50%; background: #3a3e45; } .stack-head .mono { margin-left: 8px; font: 500 12px var(--mono); color: #8a9099; } .stack-card dl { margin: 0; padding: 6px 18px; } .stack-card dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1d2024; } .stack-card dl div:last-child { border-bottom: 0; } .stack-card dt { font: 500 12px/1.6 var(--mono); color: #7fd0e0; text-transform: uppercase; letter-spacing: .06em; } .stack-card dd { margin: 0; font-size: 15px; color: #f1f2f4; } /* Cards */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; } .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: #fff; } .card h3 { font-size: 21px; } .card p { margin: 0; color: var(--ink-2); } .card-icon { display: inline-block; font: 500 12px var(--mono); color: var(--accent); background: var(--accent-wash); border-radius: 6px; padding: 4px 8px; margin-bottom: 18px; } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .ticks li { padding: 16px 0 16px 34px; border-bottom: 1px solid #23262b; color: #eef0f2; font-weight: 500; position: relative; } .ticks li::before { content: ""; position: absolute; left: 0; top: 20px; width: 18px; height: 10px; border-left: 2.5px solid #7fd0e0; border-bottom: 2.5px solid #7fd0e0; transform: rotate(-45deg); } /* Work cards */ .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .work-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; } .work-visual { aspect-ratio: 16 / 9; background: var(--wash); overflow: hidden; border-bottom: 1px solid var(--line); display: grid; place-items: center; } .work-visual picture, .work-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .visual-synovo { background: radial-gradient(circle at 30% 30%, #0f7f97, #003845 70%); } .visual-books { background: linear-gradient(135deg, #1b1d21, #3a3f47); } .work-body { padding: 24px 26px 26px; } .work-body h3 { font-size: 21px; } .work-body p:last-of-type { margin-bottom: 8px; } .tag { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px !important; } .rig-shot { border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.14); } .logos-label { margin: 56px 0 18px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .logos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 28px 32px; align-items: center; } .logos li { display: grid; place-items: center; height: 44px; } .logos li { height: 44px; } .logos img { max-height: 30px; width: auto; max-width: min(112px, 100%); object-fit: contain; opacity: .75; filter: grayscale(1); } .logos li.tall img { max-height: 42px; } .logos-more { margin: 0; } /* CTA */ .cta { background: var(--ink); color: #c9ccd1; padding: clamp(48px, 7vw, 88px) 0; } .cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; } .cta h2 { color: #fff; font-size: clamp(26px, 2.4vw + 14px, 40px); margin-bottom: 8px; max-width: 20ch; } .cta p { margin: 0; } /* Footer */ .site-footer { background: #08090a; color: #9aa0a8; padding: 48px 0 28px; font-size: 14px; } .footer-grid { display: flex; justify-content: space-between; gap: 32px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid #1d2024; } .brand-footer .brand-name { color: #fff; } .brand-footer .brand-sub { color: #8a9099; } .brand-footer .logo-img img { filter: invert(1); } .footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: flex-end; } .footer-links a { color: #d6d9dd !important; text-decoration: none; } .footer-links a:hover { text-decoration: underline; } .legal { padding-top: 20px; } .legal p { margin: 0; color: #7d838b; font-size: 13px; } /* Inner pages */ .page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(32px, 4vw, 56px); } .page-hero h1 { font-size: clamp(40px, 4.6vw + 14px, 68px); font-weight: 800; letter-spacing: -0.04em; } .prose-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .prose p { font-size: 18px; } .principles { background: var(--wash); border-radius: var(--radius); padding: 28px; } .principles ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .principles li { font-size: 16px; } .principles strong { color: var(--ink); display: block; } .photo-pair { position: relative; min-height: 420px; } .photo { position: absolute; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.16); background: #fff; } .photo-a { width: 46%; left: 0; top: 0; } .photo-b { width: 70%; right: 0; bottom: 0; } .split-media { align-items: center; } /* Work page */ .jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .jump a { font-size: 14px; text-decoration: none; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid #b9bbb5; border-radius: 999px; } .roles { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--line); } .role { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--line); } .role-meta h3 { font-size: 22px; margin-bottom: 6px; } .role-meta p { color: var(--muted); font-size: 15px; margin-bottom: 8px; } .role-body ul { margin: 0 0 1em; padding-left: 1.1em; } .role-body li { margin-bottom: .45em; } .role-body li::marker { color: var(--accent); } .role-intro { font-weight: 600; color: var(--ink); } .contract { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; background: #fff; } .contract h4 { font-size: 18px; margin-bottom: 8px; } .contract p:last-child, .contract ul:last-child { margin-bottom: 0; } .roles-compact .role { padding: 28px 0; } .section-wash .roles { border-color: #dcdcd6; } .section-wash .role { border-color: #dcdcd6; } .vfx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .vfx-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; } .vfx-card picture img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .vfx-card > div { padding: 18px 20px 20px; } .vfx-card h3 { font-size: 18px; margin-bottom: 4px; } .vfx-card p { margin: 0; font-size: 15px; } /* Showreel */ .video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; margin-bottom: 12px; } .video-poster, .video-poster img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .15s; } .play:hover { transform: translate(-50%, -50%) scale(1.06); } .play svg { width: 34px; height: 34px; fill: var(--ink); margin-left: 4px; } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .form { display: grid; gap: 18px; } .field { display: grid; gap: 6px; } .field label { font-weight: 600; color: var(--ink); font-size: 15px; } .field input, .field textarea { font: inherit; padding: 12px 14px; border: 1.5px solid #8a8d93; border-radius: var(--radius-sm); background: #fff; color: var(--ink); } .field input:focus, .field textarea:focus { border-color: var(--ink); } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form .btn { justify-self: start; } .form-ok { display: none; padding: 12px 14px; border-radius: var(--radius-sm); background: #ecfdf3; color: #065f46; font-weight: 500; } .form.is-sent .form-ok { display: block; } .contact-side { background: var(--wash); border-radius: var(--radius); padding: 28px; } .contact-side h2 { margin-top: 8px; } .contact-side h2 + p { margin-top: 0; } /* Magic Tree Tales */ .books { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .book picture img { border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.16); aspect-ratio: 2438 / 3075; object-fit: cover; width: 100%; } .book h3 { margin-top: 18px; font-size: 20px; } .book p { font-size: 15px; } .spread img, .spread picture { display: block; width: 100%; height: auto; } .spread { margin: 48px 0 24px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.12); } /* 404 */ .notfound { padding: clamp(80px, 12vw, 160px) 0; } .notfound h1 { font-size: clamp(44px, 6vw + 10px, 84px); } .notfound .lede { margin: 0 auto; } /* ---------- Mobile ---------- */ @media (max-width: 860px) { .hero-grid, .split, .prose-grid, .contact-grid { grid-template-columns: 1fr; } .photo-pair { min-height: 0; display: grid; grid-template-columns: 2fr 3fr; gap: 16px; align-items: end; } .photo { position: static; width: 100% !important; } .cards-3 { grid-template-columns: 1fr; } .work-grid, .vfx-grid { grid-template-columns: 1fr 1fr; } .role { grid-template-columns: 1fr; gap: 12px; } .books { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (max-width: 640px) { body { font-size: 16px; } .menu-btn { display: inline-flex; } .nav { display: none; } .work-grid, .vfx-grid, .books { grid-template-columns: 1fr; } .books { gap: 32px; } .book picture img { max-width: 260px; } .section-head { flex-direction: column; align-items: start; } .cta-inner { flex-direction: column; align-items: start; } .footer-grid { flex-direction: column; } .footer-links { justify-content: flex-start; } .stack-card dl div { grid-template-columns: 1fr; gap: 2px; } .card, .principles, .contact-side { padding: 22px; } .contract { padding: 18px; } .actions .btn { flex: 1 1 auto; justify-content: center; } .play { width: 64px; height: 64px; } } /* ---------- Review fixes ---------- */ .skip { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--ink); color: #fff !important; padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } body { position: relative; } main:focus { outline: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cta :focus-visible, .section-dark :focus-visible, .site-footer :focus-visible { outline-color: #7fd0e0 !important; } .field-err { margin: 0; color: #b42318; font-size: 14px; font-weight: 500; } [aria-invalid="true"] { border-color: #b42318 !important; } .form-ok:empty { display: none !important; } .form-ok { display: block; padding: 12px 14px; border-radius: var(--radius-sm); background: #ecfdf3; color: #065f46; font-weight: 500; } .role-empty { padding-bottom: 20px !important; } .work-card { position: relative; transition: border-color .15s, box-shadow .15s; } .work-card:hover, .work-card:has(.card-link:focus-visible) { border-color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.08); } .card-link { text-decoration: none; color: inherit !important; } .card-link::after { content: ""; position: absolute; inset: 0; } .work-card .todo { position: relative; z-index: 1; } .work-visual.spec { align-items: flex-start; aspect-ratio: auto; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 22px 24px; background: linear-gradient(135deg, #0e0f11, #1f2328); border-bottom: 0; } .work-visual.spec .spec-tag { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #7fd0e0; } .work-visual.spec .spec-stack { text-align: left; font: 500 15px/1.5 var(--mono); color: #f1f2f4; } .vfx-card:nth-child(3) img { object-position: 75% center; } .hero-line { font-size: clamp(20px, 1.6vw + 12px, 26px); font-weight: 600; color: var(--ink-2); } @media (max-width: 860px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { .header-cta { margin-left: 0; margin-right: 8px; min-height: 44px; } .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .footer-links { gap: 0 22px; } .footer-links a { padding: 10px 0; display: inline-block; } } @media (max-width: 360px) { .header-cta { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .btn:hover { transform: none; } .play:hover { transform: translate(-50%, -50%); } } .header-inner .nav { order: 1; } .header-inner .header-cta { order: 2; } .header-inner .menu-btn { order: 3; } /* ---------- Site build additions ---------- */ .review-note { margin: 0; padding: 8px var(--gutter); background: #fff7ed; color: #7c2d12; font-size: 13px; text-align: center; border-bottom: 1px solid #fed7aa; } .form-status:empty { display: none; } .form-status { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 500; } .form-status.is-ok { background: #ecfdf3; color: #065f46; } .form-status.is-error { background: #fef3f2; color: #912018; } .btn[disabled] { opacity: .7; cursor: progress; } .grecaptcha-badge { visibility: hidden; } /* ---------- Round 2: home flow, project showcase, About heading, privacy ---------- */ .section-tight-top { padding-top: clamp(24px, 4vw, 48px); } .section-intro { max-width: 46ch; color: var(--muted); margin: 0; } .more-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 28px 0 0; } .wrap-wide { max-width: 1400px; } /* Proof points */ .proof { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #23262b; border: 1px solid #23262b; border-radius: var(--radius); overflow: hidden; } .proof li { background: var(--ink); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; } .proof strong { color: #fff; font-size: 21px; letter-spacing: -0.01em; } .proof span { color: #c9ccd1; font-size: 15px; flex: 1; } .proof .link-arrow { color: #7fd0e0; font-size: 14px; align-self: start; } @media (max-width: 1024px) { .proof { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .proof { grid-template-columns: 1fr; } } /* About heading: one line from tablet up, with a fluid size and a staggered colour reveal */ .about-hero .lede, .about-hero .eyebrow { max-width: 62ch; } .page-hero .about-title { font-size: clamp(40px, calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / 12.9), 88px); line-height: 1.02; margin-bottom: .35em; } .about-title span { display: inline-block; background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 40%, var(--accent) 60%, #1a8aa3 100%); background-size: 260% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; } .about-title span:nth-child(2) { background-position: 45% 0; } .about-title span:nth-child(3) { background-position: 100% 0; } @media (min-width: 641px) { .about-title { white-space: nowrap; } } @media (prefers-reduced-motion: no-preference) { .about-title span { animation: word-in .9s cubic-bezier(.2,.7,.2,1) both; } .about-title span:nth-child(2) { animation-delay: .12s; } .about-title span:nth-child(3) { animation-delay: .24s; } @keyframes word-in { from { transform: translateY(.35em); opacity: 0; } } } :target { scroll-margin-top: 24px; } .contract:target, .vfx-card:target { box-shadow: 0 0 0 3px var(--accent); } .role:target { box-shadow: inset 4px 0 0 var(--accent); padding-left: 16px; } /* Privacy */ .policy h2 { font-size: 24px; margin-top: 1.8em; } .policy h2:first-child { margin-top: 0; } .policy ul { padding-left: 1.2em; margin: 0 0 1em; } .policy li { margin-bottom: .5em; font-size: 17px; } .policy li::marker { color: var(--accent); } @media (forced-colors: active) { .about-title span { background: none; color: CanvasText; } } /* ---------- Round 3: compact hero, full-width project wall, filters, project pages ---------- */ /* Compact hero: everything in one band, no taller than about 360px on laptops and desktops */ .hero-compact { padding: 28px 0 26px; background: radial-gradient(900px 300px at 85% -20%, var(--accent-wash), transparent 70%); } .hero-compact .hero-grid { grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px); } .hero-compact .eyebrow { margin-bottom: 6px; } .hero-compact h1 { font-size: clamp(40px, 3.2vw + 12px, 60px); margin-bottom: 2px; letter-spacing: -0.04em; } .hero-compact .hero-role { font-size: clamp(17px, .7vw + 12px, 21px); margin-bottom: 6px; } .hero-compact .hero-line { font-size: clamp(16px, .5vw + 12px, 19px); margin-bottom: 8px; } .hero-compact .lede { font-size: 16px; line-height: 1.5; margin-bottom: 0; max-width: 56ch; } .hero-compact .actions { margin-top: 16px; gap: 10px; } .hero-compact .stack-head { padding: 9px 16px; } .hero-compact .stack-card dl { padding: 2px 16px; } .hero-compact .stack-card dl div { grid-template-columns: 96px 1fr; padding: 7px 0; gap: 10px; } .hero-compact .stack-card dd { font-size: 14px; line-height: 1.45; } .hero-compact .stack-card dt { font-size: 11px; } @media (max-width: 860px) { .hero-compact { padding: 32px 0 28px; } .hero-compact .hero-grid { grid-template-columns: 1fr; } } /* The wall: edge to edge, grouped, tiles about 200px across */ .section-wall { padding: 18px 16px 40px; background: var(--paper); } .wall-group + .wall-group { margin-top: 22px; } .wall-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding: 0 2px; font-size: 13px; font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .wall-h a { color: var(--ink); text-decoration: none; } .wall-h a:hover { text-decoration: underline; } .wall-n { color: var(--muted); font-size: 12px; } .wall-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; } .wall-grid { --cols: 2; } .wall.is-collapsed .wall-grid > li:nth-child(n+5) { display: none; } @media (min-width: 656px) { .wall-grid { --cols: 3; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+7) { display: none; } } @media (min-width: 868px) { .wall-grid { --cols: 4; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+9) { display: none; } } @media (min-width: 1080px) { .wall-grid { --cols: 5; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+11) { display: none; } } @media (min-width: 1292px) { .wall-grid { --cols: 6; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+13) { display: none; } } @media (min-width: 1504px) { .wall-grid { --cols: 7; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+15) { display: none; } } @media (min-width: 1716px) { .wall-grid { --cols: 8; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+17) { display: none; } } @media (min-width: 1928px) { .wall-grid { --cols: 9; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+19) { display: none; } } @media (min-width: 2140px) { .wall-grid { --cols: 10; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+21) { display: none; } } @media (min-width: 2352px) { .wall-grid { --cols: 11; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+23) { display: none; } } @media (min-width: 2564px) { .wall-grid { --cols: 12; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+25) { display: none; } } @media (min-width: 2776px) { .wall-grid { --cols: 13; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+27) { display: none; } } @media (min-width: 2988px) { .wall-grid { --cols: 14; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+29) { display: none; } } @media (min-width: 3200px) { .wall-grid { --cols: 15; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+31) { display: none; } } @media (min-width: 3412px) { .wall-grid { --cols: 16; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+33) { display: none; } } @media (min-width: 3624px) { .wall-grid { --cols: 17; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+35) { display: none; } } @media (min-width: 3836px) { .wall-grid { --cols: 18; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+37) { display: none; } } @media (min-width: 4048px) { .wall-grid { --cols: 19; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+39) { display: none; } } @media (min-width: 4260px) { .wall-grid { --cols: 20; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+41) { display: none; } } @media (min-width: 4472px) { .wall-grid { --cols: 21; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+43) { display: none; } } @media (min-width: 4684px) { .wall-grid { --cols: 22; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+45) { display: none; } } @media (min-width: 4896px) { .wall-grid { --cols: 23; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+47) { display: none; } } @media (min-width: 5108px) { .wall-grid { --cols: 24; } .wall.is-collapsed .wall-grid > li:nth-child(n+1) { display: block; } .wall.is-collapsed .wall-grid > li:nth-child(n+49) { display: none; } } .wall-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 26px; } .wall:not(.is-collapsed) + .wall-foot .wall-more, .wall-more[hidden] { display: none; } .tile { position: relative; min-width: 0; aspect-ratio: 1 / 1; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; } .d6 { --d: 6; } .d7 { --d: 7; } .tile-link { --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px; position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 14px; background: #e9e9e4; color: #fff; text-decoration: none; isolation: isolate; box-shadow: 0 1px 2px rgba(14,15,17,.06), 0 8px 22px -12px rgba(14,15,17,.3); transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .tile-img, .tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tile-img img { transform: translate(var(--px), var(--py)) scale(1.03); transition: transform .6s cubic-bezier(.2,.7,.2,1); } .pos-top .tile-img img { object-position: center top; } .pos-left .tile-img img { object-position: left center; } .pos-right .tile-img img { object-position: right center; } .pos-bottom .tile-img img { object-position: center bottom; } .tile-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 1px; background: linear-gradient(180deg, rgba(8,9,10,0) 0, rgba(8,9,10,.84) 26px, rgba(8,9,10,.92) 100%); padding: 30px 12px 11px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; } .tile-title { font-weight: 700; font-size: 14px; line-height: 1.25; letter-spacing: -0.005em; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .tile-client { font-size: 12px; line-height: 1.35; color: #e6e8eb; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .tile-role { font: 500 10px/1.45 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: #8fe0ef; margin-top: 2px; } .tile-link:hover, .tile-link:focus-visible { box-shadow: 0 2px 4px rgba(14,15,17,.08), 0 18px 36px -14px rgba(14,15,17,.5); } .tile-link:hover .tile-cap, .tile-link:focus-visible .tile-cap { opacity: 1; transform: none; } .tile-link:hover .tile-img img, .tile-link:focus-visible .tile-img img { transform: translate(var(--px), var(--py)) scale(1.08); } .tile-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .tile.is-new { animation: tile-pop .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 40ms); } @keyframes tile-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } } } @media print { .wall.is-collapsed .wall-grid > li { display: block !important; } .wall-grid.is-armed .tile { opacity: 1 !important; transform: none !important; } } /* Proof cards link to filtered work */ .proof li { padding: 0; } .proof-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 24px 24px; text-decoration: none; color: inherit; transition: background .2s ease; } .proof-card:hover, .proof-card:focus-visible { background: #16181c; } .proof-card .link-arrow { color: #7fd0e0; font-size: 14px; align-self: start; } /* Work page: images first */ .work-hero { padding: 28px 0 8px; } .wall-pad { padding: 0 18px; } .work-hero h1 { font-size: clamp(32px, 2.6vw + 14px, 52px); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 4px; } .work-hero .lede { font-size: 17px; margin: 0; } .work-wall { padding-top: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0 2px; } .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border: 1px solid #c9cbc5; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; background: #fff; transition: background .15s, color .15s, border-color .15s; } .chip:hover { border-color: var(--ink); } .chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .wall-status { margin: 0 0 12px; padding: 0 2px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .work-grid-tiles .tile[hidden] { display: none; } .experience-anchor { scroll-margin-top: 0; } .section-intro-band { padding: clamp(40px, 6vw, 72px) 0 0; border-top: 1px solid var(--line); } .section-intro-band .jump { margin-top: 12px; } @media (max-width: 640px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 0 16px 4px; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; } } /* Off-screen sections skip rendering until needed */ .section-wall + .section, .section-wall + .section + .section-dark { content-visibility: auto; contain-intrinsic-size: auto 700px; } /* Project pages */ /* Header: matches the share cards. Dark, with a faint gradient and texture from the hero image (per-project colours come from .t- rules generated by scripts/build_site.py, all checked for AA contrast). */ .project-hero { --g1: #0f5868; --g2: #11333b; --ink-t: #7fd0e0; position: relative; isolation: isolate; overflow: hidden; color: #c9ccd1; background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--g1) 55%, transparent) 0%, transparent 70%), radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--g2) 60%, transparent) 0%, transparent 70%), #0b0c0e; padding: clamp(24px, 3.2vw, 44px) 0 clamp(32px, 4vw, 56px); } .project-hero::before { content: ""; position: absolute; inset: -10%; z-index: -2; background: var(--tex, none) center / cover no-repeat; opacity: .18; } .project-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 4px 4px; } .ph-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-areas: "top media" "rest media"; column-gap: clamp(32px, 4.5vw, 72px); align-items: center; } .ph-top { grid-area: top; align-self: end; } .ph-rest { grid-area: rest; align-self: start; } .ph-media { grid-area: media; display: flex; justify-content: center; align-items: center; } .ph-eyebrow { font: 500 13px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-t); margin: 18px 0 12px; text-wrap: balance; } .project-hero h1 { color: #fff; font-size: clamp(34px, 2.6vw + 18px, 64px); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 18px; text-wrap: balance; } .project-intro { color: #c9ccd1; font-size: clamp(16px, .35vw + 14px, 18px); line-height: 1.6; margin: 0 0 22px; max-width: 60ch; } .ph-frame { display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); background: #16181c; cursor: zoom-in; max-width: 100%; } /* sized before the image loads (no layout shift): wide images fill the column, square and tall ones get a fixed height */ .ph-wide .ph-frame { width: 100%; } .ph-frame img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .ph-frame:hover img { transform: scale(1.02); } .ph-tall .ph-frame img, .ph-square .ph-frame img { width: auto; max-width: 100%; object-fit: cover; } .ph-tall .ph-frame img { height: min(70svh, 600px); } .ph-square .ph-frame img { height: min(58svh, 480px); } .crumbs { display: flex; gap: 8px; align-items: center; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 0; color: #8b9199; } .crumbs a { color: #9fdbe7; text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .facts { display: flex; flex-wrap: wrap; gap: 1px; margin: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; } .facts div { flex: 1 1 130px; padding: 12px 16px; background: rgba(14,15,17,.72); } .facts .f-tech { flex: 2 1 240px; } .facts dt { font: 500 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-t); } .facts dd { margin: 2px 0 0; color: #f1f2f4; font-size: 14px; line-height: 1.45; } @media (min-width: 861px) and (max-width: 1180px) { .project-hero h1 { font-size: clamp(34px, 3.4vw + 6px, 44px); margin-bottom: 14px; } .project-intro { font-size: 15.5px; line-height: 1.55; margin-bottom: 18px; } .ph-eyebrow { margin: 14px 0 10px; } .facts div { padding: 10px 14px; } } @media (max-width: 860px) { .ph-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "media" "rest"; } .ph-media { margin: 22px 0 24px; justify-content: flex-start; } .project-hero h1 { margin-bottom: 0; } .ph-frame { border-radius: 16px; } .ph-tall .ph-frame img, .ph-square .ph-frame img { height: min(56svh, 440px); } } /* Body: alternating text and image sections */ .project-body { padding: clamp(48px, 6vw, 96px) 0 clamp(16px, 2vw, 32px); } .zz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .zz + .zz { margin-top: clamp(56px, 7vw, 112px); } .zz-flip .zz-text { order: 2; } .zz-text h2, .project-prose h2 { font-size: clamp(24px, 1vw + 18px, 32px); letter-spacing: -0.02em; margin: 0 0 .6em; } .project-prose h2 { margin-top: 1.6em; } .project-prose h2:first-child { margin-top: 0; } .zz-text p, .zz-text li { font-size: 17px; line-height: 1.65; } .zz-text > :last-child, .zz-text ul:last-child { margin-bottom: 0; } .zz-text ul, .project-prose ul { padding-left: 1.2em; margin: 0 0 1em; } .zz-text li, .project-prose li { margin-bottom: .5em; } .project-prose li { font-size: 17px; } .zz-text li::marker, .project-prose li::marker { color: var(--accent); } .zz-media { margin: 0; } @media (min-width: 861px) { .zz-long { align-items: start; } .zz-long .zz-media { position: sticky; top: 96px; } } .zz-frame { aspect-ratio: 3 / 2; border-radius: 18px; box-shadow: 0 2px 4px rgba(14,15,17,.06), 0 24px 50px -24px rgba(14,15,17,.45); } .zz-frame picture, .zz-frame.g-item img { display: block; width: 100%; height: 100%; } .zz-frame.g-item img { object-fit: cover; } .zz-contain { background: var(--wash); } .zz-pos-left.g-item img { object-position: left center; } .zz-pos-top.g-item img { object-position: center top; } .zz-contain.g-item img { padding: 6%; } .zz-contain.zz-dark { background: #0b0c0e; } .zz-contain.g-item img { object-fit: contain; } .project-single { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); } .project-single .project-prose { max-width: 72ch; } .project-nav-inner.project-nav-solo { grid-template-columns: 1fr; justify-items: center; } .video-poster img { object-position: center 30%; } .more-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; } @media (max-width: 860px) { .zz { grid-template-columns: minmax(0, 1fr); gap: 24px; } .zz-flip .zz-text { order: 0; } } /* Scroll-in reveal (only armed by site.js when motion is allowed) */ @media (prefers-reduced-motion: no-preference) { /* position only: content is always visible, even if a reveal never fires */ .reveal-on .reveal:not(.is-in) { transform: translateY(24px); } .reveal-on .reveal { transition: transform .7s cubic-bezier(.2,.7,.2,1); } } .t-airbnb { --g1: #53282f; --g2: #3e2a1d; --ink-t: #dbc2b3; } .t-arthronica { --g1: #0f336b; --g2: #0b2650; --ink-t: #a0beee; } .t-beats { --g1: #583b23; --g2: #422c1a; --ink-t: #dfc5af; } .t-bigger-fish { --g1: #0f566b; --g2: #0b4150; --ink-t: #a0dcee; } .t-biostream { --g1: #283d53; --g2: #1b4140; --ink-t: #b0dedd; } .t-british-airways { --g1: #283953; --g2: #0d294f; --ink-t: #a0c1ee; } .t-compare-the-wombat { --g1: #542730; --g2: #483514; --ink-t: #e6cfa7; } .t-concord { --g1: #534328; --g2: #0b504f; --ink-t: #a0eeed; } .t-content-moderation { --g1: #3e3c3c; --g2: #402d1b; --ink-t: #ddc6b0; } .t-dennis-and-gnasher { --g1: #0f3c6b; --g2: #0b2d50; --ink-t: #a0c6ee; } .t-dneg { --g1: #1c405e; --g2: #500b11; --ink-t: #eea0a6; } .t-dove { --g1: #532845; --g2: #0b504b; --ink-t: #a0eee8; } .t-feel-like-a-nero { --g1: #532853; --g2: #451724; --ink-t: #e3abba; } .t-free-fire { --g1: #176063; --g2: #0c3e50; --ink-t: #a0d9ee; } .t-furry4 { --g1: #283d53; --g2: #462e16; --ink-t: #e4c6aa; } .t-lego-horizon-adventures { --g1: #10386b; --g2: #0c2a50; --ink-t: #a0c2ee; } .t-lottoland { --g1: #534c28; --g2: #482b14; --ink-t: #e7c3a7; } .t-magic-tree-tales { --g1: #0f3e6b; --g2: #0b2f50; --ink-t: #a0c8ee; } .t-mobil-1 { --g1: #4a2853; --g2: #50270b; --ink-t: #eebfa0; } .t-moomin { --g1: #534228; --g2: #50400b; --ink-t: #eedba0; } .t-mpc { --g1: #3d3d3d; --g2: #452817; --ink-t: #e3c0ab; } .t-mr-peanut { --g1: #60301a; --g2: #4d220e; --ink-t: #edb9a0; } .t-next-home { --g1: #3b3b3f; --g2: #462716; --ink-t: #e4beaa; } .t-prehistoric-megabeasts { --g1: #534c28; --g2: #0f314d; --ink-t: #a1caed; } .t-python-for-maya { --g1: #3d3d3d; --g2: #50400b; --ink-t: #eedca0; } .t-robin-wing-rig { --g1: #535328; --g2: #452716; --ink-t: #e4bfaa; } .t-showreel { --g1: #282e53; --g2: #161d46; --ink-t: #a9b2e5; } .t-skyfall { --g1: #195c61; --g2: #134549; --ink-t: #a6e3e8; } .t-super-man { --g1: #0f2e6b; --g2: #500b10; --ink-t: #eea0a5; } .t-the-caravan { --g1: #3d3d3d; --g2: #3e221e; --ink-t: #d6bbb8; } .t-the-dumping-ground { --g1: #565024; --g2: #501b0c; --ink-t: #eeb1a0; } .t-thorns-portal { --g1: #533428; --g2: #344319; --ink-t: #cee1ad; } .t-toilet-duck { --g1: #3e3b3f; --g2: #0b2d50; --ink-t: #a0c6ee; } .t-tooned { --g1: #6b4d0f; --g2: #503a0b; --ink-t: #eed4a0; } .t-touch-surgery { --g1: #3c3c3f; --g2: #4c2310; --ink-t: #ecbaa2; } .t-un-midwifery-training { --g1: #533928; --g2: #12294a; --ink-t: #a5c1e9; } .t-valentino { --g1: #6b5c0f; --g2: #0b1e50; --ink-t: #a0b5ee; } .t-vehicle-rigging { --g1: #3d3d3d; --g2: #1e2e3e; --ink-t: #bbc7d3; } .t-you-are-the-star-books { --g1: #153065; --g2: #10244c; --ink-t: #a2baec; } .project-embeds .wrap { display: grid; gap: 32px; } @media (min-width: 861px) { .project-embeds .embeds-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .embeds-multi .model-box { grid-column: 1 / -1; } } .embed { margin: 0; } .embed figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); } .video[data-youtube] iframe, .video[data-vimeo] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .project-gallery h2 .muted { font-weight: 500; } .gallery { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 45%), 1fr)); gap: 14px; } .gallery .g-item { aspect-ratio: 4 / 3; } .gallery.g-n1 { grid-template-columns: minmax(0, 560px); } .gallery.g-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } .gallery.g-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 640px) { .gallery.g-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gallery .g-contain { background: var(--wash); } .gallery .g-contain.g-item img { object-fit: contain; padding: 8%; } .gallery picture, .gallery .g-item img { display: block; width: 100%; height: 100%; object-fit: cover; } .g-item { display: block; border-radius: 12px; overflow: hidden; background: var(--wash); box-shadow: 0 1px 2px rgba(14,15,17,.06), 0 8px 22px -14px rgba(14,15,17,.3); cursor: zoom-in; } .g-item img { width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .g-item:hover img { transform: scale(1.025); } .project-nav { border-top: 1px solid var(--line); background: var(--wash); } .project-nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding-top: 24px; padding-bottom: 24px; } .pn { text-decoration: none; display: flex; flex-direction: column; gap: 2px; } .pn-next { text-align: right; align-items: end; } .pn-k { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); } .pn-t { font-weight: 700; font-size: 18px; color: var(--ink); } .pn-all { font-weight: 600; font-size: 14px; padding: 10px 16px; border: 1px solid #c9cbc5; border-radius: 999px; background: #fff; } @media (max-width: 640px) { .project-nav-inner { grid-template-columns: 1fr 1fr; } .pn-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; } } /* Lightbox */ .lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(6,7,8,.94); color: #fff; } .lightbox::backdrop { background: rgba(6,7,8,.94); } .lb-stage { position: absolute; inset: 56px 64px 64px; display: grid; place-items: center; } .lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(20,22,25,.7); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .lb-btn:hover { background: rgba(40,44,50,.9); } .lb-close { top: 12px; right: 12px; } .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); } .lb-next { right: 12px; top: 50%; transform: translateY(-50%); } .lb-cap { position: absolute; left: 64px; right: 64px; bottom: 16px; margin: 0; text-align: center; font-size: 14px; color: #c9ccd1; } .lb-count { position: absolute; top: 24px; left: 20px; font: 500 12px var(--mono); color: #9aa0a8; } .lightbox :focus-visible { outline: 3px solid #7fd0e0; outline-offset: 2px; } @media (max-width: 640px) { .lb-stage { inset: 56px 8px 72px; } .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; } .lb-cap { left: 72px; right: 72px; bottom: 20px; } } /* 3D character viewer */ .model-box { margin: 0; } .model-stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: radial-gradient(circle at 50% 35%, #ffffff, #e9ebe7 70%); box-shadow: 0 18px 50px rgba(0,0,0,.12); } .model-stage .model-poster, .model-stage .model-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s ease; } .model-stage model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; background: transparent; } .model-stage.is-ready .model-poster, .model-stage.is-ready .model-loading { opacity: 0; pointer-events: none; } .model-loading { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; font: 500 12px var(--mono); color: var(--muted); background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 999px; transition: opacity .4s; } .model-box figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); } .model-stage model-viewer:focus-visible, .model-stage model-viewer:focus { outline: 3px solid var(--accent); outline-offset: -3px; } @media (max-width: 640px) { .model-stage { aspect-ratio: 4 / 5; } } /* ---------- Round 4: breadcrumbs, at a glance, FAQ ---------- */ .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .crumbs li { display: inline-flex; gap: 8px; align-items: center; } .crumbs li + li::before { content: "/"; color: #5f646c; } .crumbs li[aria-current] { color: #9aa0a8; } .section-glance { padding: clamp(40px, 5vw, 64px) 0 0; } .section-glance + .section { padding-top: clamp(40px, 5vw, 64px); } .glance { font-size: clamp(17px, .5vw + 14px, 20px); line-height: 1.6; color: var(--ink); margin: 0; } .faq { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--line); } .faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); } .faq-item h3 { font-size: 19px; margin-bottom: 8px; } .faq-item p { margin: 0; } /* ===================================================================== Home page (and the shared dark theme, .page-dark, also used by Contact) Rebuilt from design/mockups/rigstore-landing-concept.html: poster wall hero, category picker, one newest-first rail of work, Show all grid, How I make things. Dark throughout. Motion is off for prefers-reduced-motion. */ .page-dark { --lp-ink: #0a0c0f; --lp-panel: #13171c; --lp-text: #eef2f4; --lp-muted: #9aa8b0; --lp-accent: #5ec4d6; --lp-line: rgba(238,242,244,.12); --lp-display: "Archivo", "Arial Narrow", system-ui, sans-serif; --lp-gutter: clamp(16px, 4vw, 56px); --tile: clamp(150px, 11vw, 230px); background: var(--lp-ink); color: var(--lp-text); color-scheme: dark; } .page-dark main { background: var(--lp-ink); overflow-x: clip; } .cat-platforms { --a: #1f8aa0; --b: #0c2f3a; } .cat-healthcare { --a: #2fae86; --b: #0b3a2e; } .cat-films { --a: #c0483b; --b: #3a0f12; } .cat-games { --a: #8a5cf0; --b: #21123f; } .cat-adverts { --a: #e09a2a; --b: #3d2508; } .cat-books { --a: #d65d8e; --b: #3a1024; } .cat-all { --a: #9aa6ad; --b: #1b2026; } /* Header floats over the hero */ .page-dark .site-header { position: absolute; inset: auto 0 auto 0; z-index: 20; background: transparent; border-bottom: 0; } .page-dark .brand-name { color: var(--lp-text); } .page-dark .brand-sub { color: var(--lp-muted); } .page-dark .site-header .brand svg, .page-dark .site-header .brand img { filter: invert(1); } .page-dark .nav a:not(.btn) { color: #cfd8dc; } .page-dark .nav a:not(.btn):hover { color: #fff; } .page-dark .nav a.is-active { color: #fff; } .page-dark .nav a.is-active::after { background: var(--lp-accent); } @media (max-width: 640px) { .page-dark .nav a.is-active { color: var(--lp-accent); } .nav a.is-active::after { display: none; } } .page-dark .site-header .header-cta { background: var(--lp-text); color: var(--lp-ink) !important; border-color: var(--lp-text); } .page-dark .site-header .header-cta:hover { background: #fff; } .page-dark .menu-btn { background: rgba(19,23,28,.7); border-color: var(--lp-line); } .page-dark .menu-btn span { background: var(--lp-text); } @media (max-width: 640px) { .page-dark .nav { background: var(--lp-panel); border-color: var(--lp-line); } .page-dark .nav a:not(.btn) { border-color: var(--lp-line); } } /* Hero */ .lp-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(92px, 11svh, 140px) var(--lp-gutter) clamp(26px, 3.5svh, 48px); display: flex; flex-direction: column; justify-content: flex-end; } .lp-wall { position: absolute; inset: -18% -10%; z-index: -2; transform: rotate(-7deg); display: flex; flex-direction: column; justify-content: center; gap: 14px; pointer-events: none; } .lp-wall-row { display: flex; gap: 14px; width: max-content; } .lp-veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 50% 110%, var(--lp-ink) 30%, transparent 70%), linear-gradient(180deg, rgba(10,12,15,.85) 0%, rgba(10,12,15,.4) 35%, rgba(10,12,15,.6) 65%, var(--lp-ink) 100%); } .lp-hero-inner { max-width: 1240px; margin: 0 auto; width: 100%; text-align: center; } .lp-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--lp-accent); margin: 0; } .lp-name { font-family: var(--lp-display); font-weight: 900; font-stretch: 72%; font-size: clamp(52px, min(15vw, 15svh), 150px); line-height: .88; letter-spacing: -.03em; margin: 12px 0 8px; color: var(--lp-text); } .lp-name .word { display: inline-block; white-space: nowrap; } .lp-name .ch { display: inline-block; } .lp-role { font-family: var(--lp-display); font-stretch: 110%; font-weight: 500; font-size: clamp(17px, 1.8vw, 24px); color: #d6e2e6; margin: 0; } .lp-tag { color: var(--lp-muted); margin: 6px 0 0; } /* Stats strip */ /* How I make things */ .lp-process { position: relative; padding: clamp(64px, 8vw, 96px) var(--lp-gutter) clamp(56px, 7vw, 84px); border-top: 1px solid var(--lp-line); overflow: hidden; isolation: isolate; } .lp-process::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 60vw; height: 60vw; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(94,196,214,.16), transparent 65%); } .lp-process-in { max-width: 1240px; margin: 0 auto; } .lp-process h2 { font-family: var(--lp-display); font-weight: 900; font-stretch: 72%; font-size: clamp(48px, 7vw, 104px); line-height: .9; letter-spacing: -.02em; margin: 12px 0 28px; color: var(--lp-text); } .lp-quote { margin: 0; } .lp-quote p { font-family: var(--lp-display); font-stretch: 105%; font-weight: 500; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.2; max-width: 28ch; text-wrap: balance; margin: 0; color: var(--lp-text); } .lp-quote p::before { content: "\201C"; color: var(--lp-accent); } .lp-quote p::after { content: "\201D"; color: var(--lp-accent); } .lp-intro { color: #c3ced3; max-width: 62ch; margin: 22px 0 0; font-size: 17px; } .lp-track { position: relative; margin-top: 64px; } .lp-line, .lp-fill, .lp-pulse { position: absolute; z-index: 0; pointer-events: none; } .lp-line { background: var(--lp-line); } .lp-fill { background: linear-gradient(var(--dir, 90deg), rgba(94,196,214,.25), var(--lp-accent)); transition: width 2.6s cubic-bezier(.45,0,.2,1), height 2.6s cubic-bezier(.45,0,.2,1); } .lp-pulse { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 0 4px rgba(94,196,214,.4), 0 0 26px 8px var(--lp-accent); transition: left 2.6s cubic-bezier(.45,0,.2,1), top 2.6s cubic-bezier(.45,0,.2,1), opacity .3s; } .lp-track.go .lp-pulse { opacity: 1; } .lp-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; z-index: 1; counter-reset: s; margin: 0; padding: 0; } .lp-step { position: relative; padding-top: 62px; transition: transform .5s cubic-bezier(.2,.8,.2,1); } .lp-step::before { counter-increment: s; content: "0" counter(s); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; z-index: 1; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; background: var(--lp-ink); border: 2px solid var(--lp-line); color: var(--lp-muted); transition: border-color .4s, color .4s, background .4s; } .lp-track.go .lp-step::before { border-color: var(--lp-accent); color: var(--lp-text); background: var(--lp-panel); } .lp-track.go .lp-step:nth-child(2)::before { transition-delay: .65s; } .lp-track.go .lp-step:nth-child(3)::before { transition-delay: 1.3s; } .lp-track.go .lp-step:nth-child(4)::before { transition-delay: 1.95s; } .lp-track.go .lp-step:nth-child(5)::before { transition-delay: 2.6s; } .lp-step h3 { font-family: var(--lp-display); font-weight: 800; font-stretch: 90%; font-size: 24px; margin: 0 0 8px; color: var(--lp-text); transition: color .3s; } .lp-step p { color: var(--lp-muted); font-size: 15px; margin: 0; } .lp-step:hover { transform: translateY(-6px); } .lp-step:hover h3 { color: var(--lp-accent); } .lp-engage { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--lp-line); max-width: 72ch; } .lp-engage p { color: #c3ced3; margin: 0; } .lp-engage .lp-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; } .page-dark .link-arrow { color: var(--lp-text); } @media (max-width: 900px) { .lp-steps { grid-template-columns: 1fr; gap: 28px; } .lp-step { padding: 0 0 0 70px; min-height: 44px; } } /* Rest of the page, dark */ .page-dark .section-dark { background: var(--lp-ink); border-top: 1px solid var(--lp-line); } .page-dark .faq { border-color: var(--lp-line); } .page-dark .faq-item { border-color: var(--lp-line); } .page-dark .faq-item h3 { color: var(--lp-text); } .page-dark .faq-item p, .page-dark .glance { color: #c3ced3; } .lp-faq .faq { margin-top: 8px; } @media (max-width: 520px) { .lp-eyebrow { font-size: 12px; letter-spacing: .1em; } .lp-wall, .lp-wall-row { gap: 10px; } } @media (max-width: 720px) { .lp-hero { padding-top: 96px; } .lp-head { align-items: start; } .lp-head p { display: none; } } /* Entrance motion: only when motion is allowed */ @media (prefers-reduced-motion: no-preference) { .lp-wall-row { animation: lp-drift 140s linear infinite; } .lp-wall-row:nth-child(2) { animation-direction: reverse; animation-duration: 170s; } .lp-wall-row:nth-child(3) { animation-duration: 200s; } .lp-wall-row:nth-child(4) { animation-direction: reverse; animation-duration: 155s; } .lp-name .ch { animation: lp-rise .6s cubic-bezier(.2,.8,.2,1) both; } .lp-name .d1 { animation-delay: .03s; } .lp-name .d2 { animation-delay: .06s; } .lp-name .d3 { animation-delay: .09s; } .lp-name .d4 { animation-delay: .12s; } .lp-name .d5 { animation-delay: .15s; } .lp-name .d6 { animation-delay: .18s; } .lp-name .d7 { animation-delay: .21s; } .lp-name .d8 { animation-delay: .24s; } .lp-name .d9 { animation-delay: .27s; } .lp-role { animation: lp-fade .6s .25s both; } .lp-tag { animation: lp-fade .6s .35s both; } .lp-go { animation: lp-fade .6s .45s both; } .lp-process::before { animation: lp-breathe 9s ease-in-out infinite; } .lp-track.go .lp-pulse { animation: lp-glow 1.6s 2.6s ease-in-out infinite; } } @keyframes lp-drift { to { transform: translateX(-50%); } } @keyframes lp-rise { from { transform: translateY(40%); opacity: 0; filter: blur(8px); } } @keyframes lp-fade { from { opacity: 0; transform: translateY(8px); } } @keyframes lp-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } } @keyframes lp-breathe { 50% { transform: translate(-6%, 8%) scale(1.1); } } @keyframes lp-glow { 50% { box-shadow: 0 0 0 7px rgba(94,196,214,.25), 0 0 40px 14px var(--lp-accent); } } @media (prefers-reduced-motion: reduce) { .lp-tile, .lp-year, .lp-face, .lp-face svg, .lp-poster, .lp-meta, .lp-step, .lp-fill, .lp-pulse, .lp-step::before, .lp-progress i { transition: none !important; } } /* ===================================================================== Contact page, in the landing page's style */ .ct-hero { padding-top: clamp(96px, 13svh, 136px); padding-bottom: clamp(40px, 7svh, 72px); } .ct-hero .lp-hero-inner { max-width: 880px; } .ct-title, .lp-name { text-wrap: balance; } .ct-title { font-family: var(--lp-display); font-weight: 900; font-stretch: 72%; font-size: clamp(48px, min(11vw, 13svh), 120px); line-height: .9; letter-spacing: -.03em; margin: 14px 0 16px; color: var(--lp-text); } .ct-title .word, .lp-name .word { display: inline-block; white-space: nowrap; } .ct-title .ch, .lp-name .ch { display: inline-block; } .ct-lede { color: #c9d4d9; font-size: clamp(17px, .5vw + 14px, 20px); line-height: 1.5; max-width: 52ch; margin: 0 auto; } .ct-main { padding: clamp(40px, 5vw, 72px) var(--lp-gutter) clamp(56px, 7vw, 96px); border-top: 1px solid var(--lp-line); } .ct-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .ct-panel { background: linear-gradient(160deg, rgba(94,196,214,.08), rgba(19,23,28,.9) 40%), var(--lp-panel); border: 1px solid var(--lp-line); border-radius: 22px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); } .ct-panel h2, .ct-side h2 { font-family: var(--lp-display); font-weight: 800; font-stretch: 85%; line-height: 1.05; letter-spacing: -.01em; color: var(--lp-text); margin: 0 0 18px; } .ct-panel h2 { font-size: clamp(26px, 2.4vw, 34px); } .ct-side { display: grid; gap: 22px; } .ct-card { background: rgba(19,23,28,.6); border: 1px solid var(--lp-line); border-radius: 18px; padding: 22px 24px; } .ct-side h2 { font-size: clamp(20px, 1.6vw, 24px); margin-bottom: 8px; } .ct-card p { color: #c3ced3; margin: 0; } .ct-linkedin { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; } .ct-linkedin svg { width: 22px; height: 22px; fill: currentColor; flex: none; } .page-dark .field label { color: var(--lp-text); } .page-dark .field input, .page-dark .field textarea { background: #0d1014; color: var(--lp-text); border: 1.5px solid #6b7883; border-radius: 12px; transition: border-color .2s, box-shadow .2s; } .page-dark .field input:focus, .page-dark .field textarea:focus { border-color: var(--lp-accent); box-shadow: 0 0 0 3px rgba(94,196,214,.25); outline: none; } .page-dark .field input[aria-invalid="true"], .page-dark .field textarea[aria-invalid="true"] { border-color: #ff8a80; } .page-dark .field-err { color: #ff9b92; } .page-dark .form-status.is-ok { background: rgba(47,174,134,.16); color: #9be8cc; border: 1px solid rgba(47,174,134,.4); } .page-dark .form-status.is-error { background: rgba(255,138,128,.12); color: #ffb3ab; border: 1px solid rgba(255,138,128,.4); } .page-dark .contact-form .btn { background: var(--lp-accent); border-color: var(--lp-accent); color: var(--lp-ink) !important; min-height: 48px; } .page-dark .contact-form .btn:hover { background: #7fd3e2; border-color: #7fd3e2; } .page-dark .contact-form .btn:disabled { opacity: .7; cursor: progress; } .page-dark .contact-form .small, .page-dark .contact-form .muted { color: var(--lp-muted); } .page-dark main a:not(.btn):not(.proof-card):not(.link-arrow):not(.lp-btn):not(.lp-go):not(.bt-link):not(.chip) { color: #9fdbe7; } @media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: no-preference) { .ct-title .ch { animation: lp-rise .6s cubic-bezier(.2,.8,.2,1) both; } .ct-title .d1 { animation-delay: 0.025s; } .ct-title .d2 { animation-delay: 0.050s; } .ct-title .d3 { animation-delay: 0.075s; } .ct-title .d4 { animation-delay: 0.100s; } .ct-title .d5 { animation-delay: 0.125s; } .ct-title .d6 { animation-delay: 0.150s; } .ct-title .d7 { animation-delay: 0.175s; } .ct-title .d8 { animation-delay: 0.200s; } .ct-title .d9 { animation-delay: 0.225s; } .ct-title .d10 { animation-delay: 0.250s; } .ct-title .d11 { animation-delay: 0.275s; } .ct-title .d12 { animation-delay: 0.300s; } .ct-title .d13 { animation-delay: 0.325s; } .ct-title .d14 { animation-delay: 0.350s; } .ct-title .d15 { animation-delay: 0.375s; } .ct-title .d16 { animation-delay: 0.400s; } .ct-title .d17 { animation-delay: 0.425s; } .ct-title .d18 { animation-delay: 0.450s; } .ct-title .d19 { animation-delay: 0.475s; } .ct-title .d20 { animation-delay: 0.500s; } .ct-lede { animation: lp-fade .6s .35s both; } } /* ===================================================================== Mobile and touch (round 8) */ /* Full-screen menu on small screens: focus is trapped in the header (the rest of the page is made inert), Esc closes it, and the page behind doesn't scroll. */ @media (max-width: 640px) { .site-header .menu-btn { position: relative; z-index: 62; } .site-header.is-open .brand, .site-header.is-open .header-cta { position: relative; z-index: 62; } .site-header.is-open .nav { display: flex; position: fixed; inset: 0; z-index: 61; flex-direction: column; justify-content: center; align-items: stretch; gap: 0; margin: 0; padding: calc(96px + env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); background: rgba(255,255,255,.985); overflow-y: auto; overscroll-behavior: contain; } .site-header.is-open .nav a:not(.btn) { display: flex; align-items: center; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: clamp(28px, 8vw, 38px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); box-shadow: none; } .site-header.is-open .nav a.is-active { color: var(--accent); } .page-dark .site-header.is-open .nav { background: rgba(10,12,15,.985); } .page-dark .site-header.is-open .nav a:not(.btn) { color: var(--lp-text); border-color: var(--lp-line); } .page-dark .site-header.is-open .nav a.is-active { color: var(--lp-accent); } .menu-btn span { transition: transform .25s ease; } .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } } @media (max-width: 640px) and (prefers-reduced-motion: no-preference) { .site-header.is-open .nav { animation: menu-in .22s ease both; } @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } } } html.menu-open, html.menu-open body { overflow: hidden; } /* Notched phones: keep content inside the safe area (viewport-fit=cover) */ .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .page-dark { --lp-gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right)); } .site-header { padding-top: env(safe-area-inset-top); } .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); } .lb-close { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); } .lb-prev { left: calc(12px + env(safe-area-inset-left)); } .lb-next { right: calc(12px + env(safe-area-inset-right)); } /* Touch: nothing important on hover only. Work tiles show the title and year at rest; one tap opens the project. */ .tile-year { font: 500 12px/1.4 var(--mono); color: #8fe0ef; letter-spacing: .04em; } @media (hover: none) { .tile-cap { opacity: 1; transform: none; padding: 22px 10px 9px; background: linear-gradient(180deg, rgba(8,9,10,0) 0, rgba(8,9,10,.85) 18px, rgba(8,9,10,.92) 100%); } .tile-title { font-size: 13px; } .tile-client, .tile-role { display: none; } } /* Touch targets: at least 44 by 44px on touch screens and small viewports */ @media (pointer: coarse), (max-width: 1024px) { .footer-links a, .crumbs a, .chip, .pn, .pn-all, .link-arrow, .header-cta, .btn, .lp-btn, .nav a:not(.btn), .skip, .more-links a, .brand { min-height: 44px; } .footer-links a, .crumbs a, .link-arrow, .more-links a { display: inline-flex; align-items: center; } .footer-links a, .crumbs a, .crumbs li[aria-current] { padding-left: 6px; padding-right: 6px; } .footer-links { margin-left: -6px; gap: 0 10px !important; } .crumbs ol { margin-left: -6px; } .crumbs li { gap: 2px; } .nav a:not(.btn) { display: inline-flex; align-items: center; padding-left: 6px; padding-right: 6px; } .header-inner .nav { gap: 16px; } h2 > a, h3 > a, h4 > a, .contract h4 a { display: inline-flex; align-items: center; min-height: 44px; } .footer-links { gap: 0 22px; } .crumbs ol { gap: 0 8px; } .menu-btn { min-width: 44px; min-height: 44px; } } /* Form fields: 16px text so iOS doesn't zoom in */ .field input, .field textarea { font-size: max(16px, 1rem); } /* Rails scroll with native momentum and snapping, and never trap vertical page scrolling */ /* Wide banners whose lettering can't survive a crop: shown whole on a dark panel instead */ .fit-all img, .lp-tile.fit-tall img, .lp-poster.fit-tall img { object-fit: contain !important; object-position: center !important; } .tile.fit-all .tile-link { background: #16191d; } .lp-tile.fit-tall, .lp-tile.fit-all { background: radial-gradient(120% 80% at 50% 50%, #1d2329, #0d1013); } /* Tile focal points (generated from the project front matter) */ .fp-100-35 img { object-position: 100% 35%; } .fp-2-50 img { object-position: 2% 50%; } .fp-25-50 img { object-position: 25% 50%; } .fp-34-50 img { object-position: 34% 50%; } .fp-37-60 img { object-position: 37% 60%; } .fp-38-25 img { object-position: 38% 25%; } .fp-4-30 img { object-position: 4% 30%; } .fp-40-50 img { object-position: 40% 50%; } .fp-41-40 img { object-position: 41% 40%; } .fp-43-50 img { object-position: 43% 50%; } .fp-45-100 img { object-position: 45% 100%; } .fp-46-30 img { object-position: 46% 30%; } .fp-46-35 img { object-position: 46% 35%; } .fp-47-45 img { object-position: 47% 45%; } .fp-50-12 img { object-position: 50% 12%; } .fp-50-15 img { object-position: 50% 15%; } .fp-50-20 img { object-position: 50% 20%; } .fp-50-35 img { object-position: 50% 35%; } .fp-50-4 img { object-position: 50% 4%; } .fp-50-40 img { object-position: 50% 40%; } .fp-50-5 img { object-position: 50% 5%; } .fp-50-50 img { object-position: 50% 50%; } .fp-50-52 img { object-position: 50% 52%; } .fp-50-72 img { object-position: 50% 72%; } .fp-50-8 img { object-position: 50% 8%; } .fp-50-85 img { object-position: 50% 85%; } .fp-50-88 img { object-position: 50% 88%; } .fp-50-9 img { object-position: 50% 9%; } .fp-50-93 img { object-position: 50% 93%; } .fp-51-60 img { object-position: 51% 60%; } .fp-52-40 img { object-position: 52% 40%; } .fp-55-100 img { object-position: 55% 100%; } .fp-62-10 img { object-position: 62% 10%; } .fp-66-40 img { object-position: 66% 40%; } .fp-68-55 img { object-position: 68% 55%; } .fp-7-50 img { object-position: 7% 50%; } .fp-74-46 img { object-position: 74% 46%; } .fp-76-40 img { object-position: 76% 40%; } .fp-79-0 img { object-position: 79% 0%; } .fp-80-60 img { object-position: 80% 60%; } .fp-85-20 img { object-position: 85% 20%; } .fp-88-40 img { object-position: 88% 40%; } /* ===================================================================== Visual review fixes (round 8) */ /* Short pages: the footer sits at the bottom of the window, with no white band under it */ body { display: flex; flex-direction: column; min-height: 100svh; } body > main { flex: 1 0 auto; } .site-footer { margin-top: auto; } /* Footer: brand above the links between phone and desktop; links start flush left; divider within the content */ .footer-grid { border-bottom: 0; } .site-footer .legal { padding-top: 0; } .legal p { border-top: 1px solid #1d2024; padding-top: 20px; } @media (max-width: 1000px) { .footer-grid { flex-direction: column; gap: 18px; } .footer-links { justify-content: flex-start; gap: 0 20px; } } /* Breadcrumbs: on phones the current page is left out (the title below says it), so the trail never wraps */ @media (max-width: 700px) { .crumbs li[aria-current] { display: none; } } /* Header image: never crop lettering baked into artwork */ .ph-tall .ph-frame img, .ph-square .ph-frame img { object-fit: contain; } /* Project header on phones in landscape: two columns, image capped to the screen */ @media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) { .ph-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "top media" "rest media"; column-gap: 24px; } .ph-media { margin: 0; } .ph-wide .ph-frame img, .ph-tall .ph-frame img, .ph-square .ph-frame img { max-height: 78svh; width: auto; max-width: 100%; height: auto; object-fit: contain; } .ph-wide .ph-frame { width: auto; } } /* Fact grid: rows always close (column count from the number of facts) */ .facts { display: grid; grid-template-columns: repeat(var(--fc, 4), minmax(0, 1fr)); } .facts div { flex: none; } .facts.fc-1 { --fc: 1; } .facts.fc-2 { --fc: 2; } .facts.fc-3 { --fc: 3; } .facts.fc-4 { --fc: 2; } .facts.fc-5 { --fc: 6; } .facts.fc-5 div { grid-column: span 2; } .facts.fc-5 div:nth-child(n+4) { grid-column: span 3; } .facts .f-tech { grid-column: 1 / -1; } @media (min-width: 1200px) { .facts.fc-4 { --fc: 4; } } @media (max-width: 480px) { .facts.fc-3, .facts.fc-5 { --fc: 2; } .facts.fc-5 div, .facts.fc-5 div:nth-child(n+4) { grid-column: auto; } .facts.fc-3 div:last-child, .facts.fc-5 div:last-child { grid-column: 1 / -1; } } /* Previous / next on phones: labels line up */ .project-nav-inner { align-items: start; } /* Home and Contact: every section on the same 1240px column (the rail track still bleeds to the right edge) */ .page-dark { --lp-max: 1240px; --lp-edge: max(var(--lp-gutter), calc((100vw - var(--lp-max)) / 2)); } .page-dark .wrap { max-width: calc(var(--lp-max) + 2 * var(--gutter)); } .page-dark .wrap.narrow .faq, .page-dark .wrap.narrow .glance { max-width: 78ch; } .page-dark .wrap.narrow { max-width: calc(var(--lp-max) + 2 * var(--gutter)); } .lp-head { max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-gutter); box-sizing: content-box; } @media (min-width: 1352px) { .lp-head { padding: 0; } } /* Rail labels: a stronger scrim so they read over artwork with its own lettering */ .tile-cap { background: linear-gradient(180deg, rgba(8,9,10,0) 0, rgba(8,9,10,.9) 22px, rgba(8,9,10,.95) 100%); } /* Blurred fill behind tiles shown whole (wide banners with lettering) */ .fit-bg { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(16px) brightness(.55) saturate(1.1); z-index: -3; pointer-events: none; } .tile-link .fit-bg { z-index: 0; } .tile.fit-all .tile-img { z-index: 1; } .tile-cap { z-index: 2; } /* Work page: heading, chips and grid share one column */ .work-hero .wrap, .work-wall .wrap { max-width: calc(1400px + 2 * var(--gutter)); } .section-wall.work-wall { padding-left: 0; padding-right: 0; } .work-grid-tiles { grid-template-columns: repeat(auto-fill, minmax(min(176px, 44%), 1fr)) !important; } /* Galleries: portrait images get tall tiles, so posters and renders aren't cropped through faces */ .gallery { grid-auto-flow: dense; } .gallery li.g-tall-li { grid-row: span 2; } .gallery li.g-tall-li .g-item { aspect-ratio: auto; height: 100%; } .gallery .g-top.g-item img { object-position: center 12%; } /* Images shown whole: card background matches the image's own background */ .g-contain.bg-light, .zz-contain.bg-light { background: #fff; } .g-contain.bg-dark, .zz-contain.bg-dark { background: #0b0c0e; } /* Video poster with no photo to use: a dark title card */ .video-card { position: absolute; inset: 0; display: grid; place-items: end start; padding: clamp(18px, 3vw, 32px); background: radial-gradient(120% 120% at 0% 0%, #1d3a42, #0b0c0e 70%); color: #eef2f4; } .video-card span { font: 800 clamp(20px, 2.4vw, 32px)/1.1 var(--sans, inherit); letter-spacing: -0.02em; max-width: 22ch; } /* Entrance animations are forced to their final state once they should have finished (some browsers pause them) */ .lp-settled .lp-name .ch, .lp-settled .lp-role, .lp-settled .lp-tag, .lp-settled .lp-go, .lp-settled .ct-title .ch, .lp-settled .ct-lede { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .ph-frame.g-item { background: #0d1013; } @media (max-width: 860px) { .ph-square .ph-frame img { width: 100%; height: auto; max-height: none; } .ph-square .ph-frame { width: 100%; } } /* ===================================================================== Visual recheck fixes (round 8, second pass) */ /* Short pages: the space goes above the call to action, so the dark CTA band and the footer stay together */ body > main { display: flex; flex-direction: column; } body > main > * { flex: none; } body > main > .cta, body > main > .project-nav:last-of-type ~ .cta { margin-top: auto; } body > main > .project-nav { margin-top: auto; } body > main > .project-nav + .cta { margin-top: 0; } /* Breadcrumbs: landscape phones also leave out the current page */ @media (orientation: landscape) and (max-height: 520px) { .crumbs li[aria-current] { display: none; } } /* Landscape phone header: room between the title and the intro */ @media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) { .project-hero h1 { margin-bottom: 16px; } } /* Header images: the frame hugs the picture (no letterbox bars) */ .ph-square .ph-frame img { width: 100%; height: auto; max-height: none; object-fit: cover; } .ph-square .ph-frame { width: 100%; } .ph-tall .ph-frame { width: fit-content; max-width: 100%; } .ph-media { justify-content: center !important; } /* Proof cards: the links share one baseline at the bottom of each card */ .proof-card .link-arrow { flex: none; margin-top: auto; } /* Category labels: two lines reserved, so every count lines up */ /* Narrow text columns line up with the header until they reach their width */ .wrap.narrow { max-width: calc(820px + 2 * var(--gutter)); } /* Work page: the same column as the header */ .work-hero .wrap, .work-wall .wrap { max-width: var(--wrap); } /* Project body: space before whatever follows (gallery, video, previous and next) */ .project-body { padding-bottom: clamp(56px, 7vw, 104px); } .project-gallery { padding-top: 0 !important; } /* Galleries: rows always close. Tiles are an even size; the last row stretches to fill. */ .gallery { display: flex !important; flex-wrap: wrap; gap: 14px; --gc: 4; } .gallery > li { flex: 1 1 calc((100% - (var(--gc) - 1) * 14px) / var(--gc)); max-width: 100%; } .gallery > li.g-wide-li { flex-grow: 2; flex-basis: calc((100% - (var(--gc) - 1) * 14px) / var(--gc) * 2 + 14px); } .gallery > li .g-item { aspect-ratio: 4 / 3; height: auto; } .gallery > li.g-wide-li .g-item { aspect-ratio: 8 / 3; } .gallery.g-portrait > li .g-item { aspect-ratio: 3 / 4; } .gallery.gc-2 { --gc: 2; max-width: 100%; } .gallery.gc-3 { --gc: 3; } .gallery.gc-4 { --gc: 4; } .gallery.gc-5 { --gc: 5; } @media (max-width: 1100px) { .gallery.gc-4, .gallery.gc-5 { --gc: 3; } } @media (max-width: 640px) { .gallery.gc-3, .gallery.gc-4, .gallery.gc-5 { --gc: 2; } } /* 3D viewer: the live model appears only once it's ready (no doubled character while loading) */ .model-stage model-viewer { opacity: 0; transition: opacity .4s ease; } .model-stage.is-ready model-viewer { opacity: 1; } /* Video title card: bold title */ .video-card span { font-weight: 800; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.1; font-family: inherit; } .video-card { background: linear-gradient(135deg, #18323a 0%, #0f1a1e 45%, #0b0c0e 100%); } .ph-eyebrow { text-wrap: wrap; } .ph-eyebrow .eb { display: inline-block; max-width: 100%; } .gallery.gc-1 { --gc: 1; max-width: 760px; } /* ===================================================================== Round 9: dark pages, bento grid, full-screen home hero, About, Showreel, Work */ /* Dark pages share the landing page tokens; the light-theme tokens are remapped inside main so older components follow */ .page-dark main { --ink: #eef2f4; --ink-2: #c3ced3; --muted: #9aa8b0; --line: rgba(238,242,244,.12); --wash: #101418; --paper: #0a0c0f; --accent: #5ec4d6; --accent-wash: rgba(94,196,214,.12); } .page-dark .cta { background: #0d1014; border-top: 1px solid var(--lp-line); } .page-dark .cta h2 { color: var(--lp-text); } .page-dark .proof { background: var(--lp-line); border-color: var(--lp-line); } .page-dark .proof li { background: var(--lp-panel); } .page-dark .proof-card:hover, .page-dark .proof-card:focus-visible { background: #1a1f25; } .page-dark .todo { background: #2a1d0c; color: #fdba74; border-color: #fdba74; } /* Poster wall: built by site.js from a random set of project images; cards are sized to each image */ .lp-wall { inset: -32% -16%; gap: var(--wg, 14px); transition: opacity .9s ease; } .lp-wall:empty { opacity: 0; } .lp-wall-row { gap: var(--wg, 14px); } .lp-card { flex: 0 0 auto; height: var(--wh, 200px); border-radius: 14px; overflow: hidden; background: #161a1f; opacity: .5; } .lp-card picture, .lp-card img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 599px) { .lp-card { border-radius: 10px; } } /* More breathing room around the centre text */ .lp-veil { background: radial-gradient(closest-side at 50% 50%, rgba(10,12,15,.82) 0%, rgba(10,12,15,.6) 55%, rgba(10,12,15,0) 100%), linear-gradient(180deg, rgba(10,12,15,.85) 0%, rgba(10,12,15,.45) 30%, rgba(10,12,15,.5) 70%, var(--lp-ink) 100%); } /* Home hero: exactly the first screen, the stats bar on the bottom edge */ .lp-full { min-height: 100vh; min-height: 100svh; padding: 0 var(--lp-gutter); justify-content: flex-start; } .lp-full .lp-hero-inner { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(84px, 13svh, 150px) 0 clamp(28px, 6svh, 72px); } .lp-full .lp-tag { font-size: clamp(16px, .5vw + 13px, 19px); } .lp-go { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(22px, 4.5svh, 48px); min-height: 52px; padding: 14px 26px; border-radius: 999px; background: var(--lp-accent); color: var(--lp-ink); font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: 0 14px 34px -12px rgba(94,196,214,.7); transition: background .2s, transform .25s; } .lp-go svg { transition: transform .3s; } .lp-go:hover { background: #8adbe8; transform: translateY(-2px); } .lp-go:hover svg { transform: translateY(3px); } .lp-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-height: 560px) { .lp-full .lp-hero-inner { padding-top: 76px; } } /* Work section (Home) and projects (Work): heading, chips and status above an edge-to-edge grid */ .bento-sec { --bgap: 6px; padding: clamp(40px, 5vw, 72px) var(--bgap) 0; scroll-margin-top: 0; } .bento-head { max-width: var(--lp-max); margin: 0 auto 18px; padding: 0 calc(var(--lp-gutter) - var(--bgap)); } .bento-head h2 { font-family: var(--lp-display); font-weight: 900; font-stretch: 72%; font-size: clamp(40px, 5vw, 72px); line-height: .95; letter-spacing: -.02em; margin: 0 0 18px; color: var(--lp-text); } .page-dark .chips { margin: 0 0 12px; padding: 0; } .page-dark .chip { background: transparent; border-color: rgba(238,242,244,.22); color: #d3dde1; } .page-dark .chip:hover { border-color: var(--lp-muted); color: #fff; } .page-dark .chip.is-on { background: var(--lp-text); border-color: var(--lp-text); color: var(--lp-ink); } .chips, .chip { position: relative; } /* keeps the visually hidden counts inside the scrolling chip bar */ .chip-n { margin-left: 6px; font: 500 12px var(--mono); opacity: .75; } .page-dark .wall-status { color: var(--lp-muted); margin: 0; padding: 0; } @media (max-width: 640px) { .page-dark .chips { margin: 0 calc(-1 * var(--lp-gutter)) 10px; padding: 0 var(--lp-gutter) 4px; } } .work-sec { padding-top: clamp(24px, 3vw, 40px); } /* The grid: columns by screen width (the same ranges as src/site.js and scripts/build_site.py), square cells, tiles 1 or 2 cells each way. Row height comes from the container width, so every box is fixed before images load. */ .bento-wrap { container-type: inline-size; } .bento { --cols: 2; --gap: 6px; --cell: calc((100cqw - (var(--rc, var(--cols)) - 1) * var(--gap)) / var(--rc, var(--cols))); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--cell); grid-auto-flow: row dense; gap: var(--gap); list-style: none; margin: 0; padding: 0; } .bt { grid-column: span var(--w, 1); grid-row: span var(--h, 1); position: relative; min-width: 0; border-radius: 10px; overflow: hidden; background: var(--lp-panel); } .bt[hidden] { display: none; } /* A small filtered set keeps the usual tile size, on fewer columns */ .bento.is-narrow { grid-template-columns: repeat(var(--cols), var(--cell)); } @media (max-width: 599px) { .s2-21 { --w: 2; } .s2-12 { --h: 2; } .s2-22 { --w: 2; --h: 2; } } @media (min-width: 600px) and (max-width: 1199px) { .bento { --cols: 4; --gap: 8px; } .bento-sec { --bgap: 8px; } .s4-21 { --w: 2; } .s4-12 { --h: 2; } .s4-22 { --w: 2; --h: 2; } } @media (min-width: 1200px) and (max-width: 1699px) { .bento { --cols: 6; --gap: 10px; } .bento-sec { --bgap: 10px; } .s6-21 { --w: 2; } .s6-12 { --h: 2; } .s6-22 { --w: 2; --h: 2; } } @media (min-width: 1700px) and (max-width: 2399px) { .bento { --cols: 8; --gap: 10px; } .bento-sec { --bgap: 10px; } .s8-21 { --w: 2; } .s8-12 { --h: 2; } .s8-22 { --w: 2; --h: 2; } } @media (min-width: 2400px) and (max-width: 3199px) { .bento { --cols: 10; --gap: 12px; } .bento-sec { --bgap: 12px; } .s10-21 { --w: 2; } .s10-12 { --h: 2; } .s10-22 { --w: 2; --h: 2; } } @media (min-width: 3200px) { .bento { --cols: 12; --gap: 14px; } .bento-sec { --bgap: 14px; } .s12-21 { --w: 2; } .s12-12 { --h: 2; } .s12-22 { --w: 2; --h: 2; } .bt { border-radius: 14px; } } @media (min-width: 1200px) { .bt { border-radius: 12px; } } /* A filtered view hides the grid until site.js has laid it out (no reflow), with a CSS fallback if it never does */ html[data-filter] .bento:not(.is-laid), html[data-filter]:not(.bt-laid) :is(.bento-sec ~ *, .site-footer) { visibility: hidden; animation: bt-show 0s 2.5s forwards; } @keyframes bt-show { to { visibility: visible; } } .bt-link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; container-type: size; isolation: isolate; } .bt-img, .bt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bt-img img { transition: transform .9s cubic-bezier(.2,.8,.2,1); } .bt-link::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,7,9,0) 45%, rgba(5,7,9,.45) 68%, rgba(5,7,9,.88) 100%); pointer-events: none; } .bt-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: clamp(12px, 5cqmin, 20px); background: linear-gradient(180deg, rgba(12,15,19,.86), rgba(8,10,13,.97)); border-top: 1px solid rgba(238,242,244,.1); transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.8,.2,1); } .bt-k { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-accent); } .bt-t { font-family: var(--lp-display); font-weight: 800; font-stretch: 85%; font-size: clamp(16px, 6cqmin, 24px); line-height: 1.05; color: #fff; } .bt-role { font-size: 13px; line-height: 1.35; color: #c9d4d9; } .bt-sum { font-size: 13px; line-height: 1.4; color: #aab7bd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bt-go { margin-top: 6px; display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--lp-accent); color: var(--lp-ink); font-size: 12px; font-weight: 700; } @container (max-height: 300px) { .bt-sum { -webkit-line-clamp: 1; } } @container (max-height: 230px) { .bt-sum { display: none; } } @container (max-height: 170px) { .bt-role { display: none; } } @container (max-width: 190px) { .bt-sum { display: none; } } .bt-link:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: -3px; } .bt-link:focus-visible .bt-panel { transform: none; } @media (hover: hover) and (pointer: fine) { .bt-link:hover .bt-panel { transform: none; } .bt-link:hover .bt-img img { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .bt-img img, .bt-panel, .bt-title { transition: none !important; } .bt-link:hover .bt-img img { transform: none; } } .lp-work .lp-all-bar { padding: 28px 16px 8px; } .lp-all-bar { display: flex; justify-content: center; } .lp-btn { display: inline-flex; align-items: center; min-height: 48px; border: 1px solid rgba(238,242,244,.28); padding: 12px 24px; border-radius: 999px; font-weight: 600; color: var(--lp-text); text-decoration: none; transition: background .2s, border-color .2s; } .lp-btn:hover { background: var(--lp-panel); border-color: var(--lp-muted); } .lp-btn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; } .lp-all-bar .lp-btn[hidden] { display: none; } .lp-work + .lp-glance { margin-top: clamp(40px, 5vw, 72px); } /* Compact wall hero on the inner dark pages */ .ct-hero .lp-hero-inner { position: relative; } .ab-hero .lp-hero-inner { max-width: 1240px; } @media (min-width: 641px) { .ab-hero .ct-title { white-space: nowrap; font-size: clamp(44px, 7.6vw, 120px); } } /* About: a sticky list of sections on the left, highlighted as you scroll; a chip bar on phones and tablets */ .ab-layout { max-width: var(--lp-max); margin: 0 auto; padding: clamp(40px, 5vw, 80px) var(--lp-gutter) 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; } .ab-nav { position: sticky; top: 28px; } .ab-nav ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--lp-line); } .ab-nav a { display: flex; align-items: center; min-height: 44px; margin-left: -1px; padding: 6px 0 6px 18px; border-left: 2px solid transparent; color: var(--lp-muted); text-decoration: none; font-size: 15px; line-height: 1.35; transition: color .2s, border-color .2s; } .page-dark main .ab-nav a { color: var(--lp-muted) !important; } .page-dark main .ab-nav a:hover { color: var(--lp-text) !important; } .page-dark main .ab-nav a.is-on { color: var(--lp-text) !important; border-left-color: var(--lp-accent); } .ab-sec { padding: 0 0 clamp(56px, 7vw, 100px); scroll-margin-top: 28px; } .ab-sec + .ab-sec { border-top: 1px solid var(--lp-line); padding-top: clamp(48px, 6vw, 88px); } .ab-h { font-family: var(--lp-display); font-weight: 900; font-stretch: 75%; font-size: clamp(38px, 4.4vw, 68px); line-height: .95; letter-spacing: -.02em; color: var(--lp-text); margin: 10px 0 28px; text-wrap: balance; } .ab-prose { max-width: 66ch; } .ab-prose p { font-size: 18px; color: #c9d4d9; } .ab-away { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(32px, 4vw, 56px); padding: clamp(22px, 3vw, 36px); border: 1px solid var(--lp-line); border-radius: 22px; background: linear-gradient(160deg, rgba(94,196,214,.06), rgba(19,23,28,.7) 45%); } .ab-away h3 { font-family: var(--lp-display); font-weight: 800; font-stretch: 85%; font-size: clamp(24px, 2.2vw, 32px); color: var(--lp-text); } .ab-away p { color: #c3ced3; } .ab-away p:last-child { margin-bottom: 0; } .ab-away .photo-pair { min-height: 340px; } .ab-away .photo { background: #111; box-shadow: 0 18px 50px rgba(0,0,0,.5); } .ab-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ab-principles li { padding: 22px 24px; border: 1px solid var(--lp-line); border-radius: 18px; background: rgba(19,23,28,.6); color: #c3ced3; font-size: 16px; } .ab-principles strong { display: block; color: var(--lp-text); font-size: 18px; margin-bottom: 4px; } .ab-sec.lp-process { position: relative; padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 100px); overflow: visible; border-top: 1px solid var(--lp-line); } .ab-sec .lp-track { margin-top: 48px; } .ab-sec .lp-engage { margin-top: 44px; } .ab-sec.lp-process::before { display: none; } .ab-sec .proof { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-more { margin: 28px 0 0; } .tl-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); } .tl-group h3 { min-height: 2.8em; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-accent); margin: 0 0 14px; } .tl { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--lp-line); } .tl > li { position: relative; display: flex; flex-direction: column; padding: 10px 0 12px 22px; } .tl > li::before { content: ""; position: absolute; left: -5px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--lp-ink); border: 2px solid var(--lp-accent); } .tl-when { font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--lp-muted); min-height: 1.6em; } .tl-when .todo { margin: 0; } .tl-what { display: flex; flex-direction: column; } .page-dark main .tl-what a { color: var(--lp-text); font-weight: 600; font-size: 17px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; margin: -8px 0 -10px; } .page-dark main .tl-what a:hover { color: var(--lp-accent); text-decoration: underline; } .tl-what span { color: var(--lp-muted); font-size: 15px; } @media (max-width: 1200px) { .tl-group h3 { min-height: 0; } .page-about .lp-steps { grid-template-columns: 1fr; gap: 28px; } .page-about .lp-step { padding: 0 0 0 70px; min-height: 44px; } .tl-groups { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .ab-layout { grid-template-columns: minmax(0, 1fr); padding-top: 0; gap: 32px; } .ab-nav { top: 0; z-index: 15; margin: 0 calc(-1 * var(--lp-gutter)); background: rgba(10,12,15,.94); border-bottom: 1px solid var(--lp-line); } .ab-nav ol { display: flex; gap: 8px; overflow-x: auto; border: 0; padding: 10px var(--lp-gutter); scrollbar-width: none; overscroll-behavior-x: contain; } .ab-nav ol::-webkit-scrollbar { display: none; } .ab-nav li { flex: none; } .ab-nav a { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 15px; border: 1px solid rgba(238,242,244,.22); border-radius: 999px; font-size: 14px; white-space: nowrap; } .page-dark main .ab-nav a.is-on { background: var(--lp-text); border-color: var(--lp-text); color: var(--lp-ink) !important; } .ab-nav a { transition: none; } .ab-sec { scroll-margin-top: 84px; } .ab-away { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .ab-principles, .ab-sec .proof { grid-template-columns: minmax(0, 1fr); } .ab-away .photo-pair { min-height: 0; } } .page-about #talk { scroll-margin-top: 28px; } @media (max-width: 900px) { .page-about #talk { scroll-margin-top: 84px; } } /* Showreel: the video in a large rounded frame */ .sr-main { padding: clamp(24px, 3vw, 48px) var(--lp-gutter) clamp(48px, 6vw, 88px); } .sr-frame { max-width: 1240px; margin: 0 auto; border-radius: clamp(16px, 2vw, 28px); overflow: hidden; border: 1px solid var(--lp-line); box-shadow: 0 40px 100px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(94,196,214,.08); } .sr-frame .video { border-radius: 0; margin: 0; } .sr-note { max-width: 1240px; margin: 14px auto 0; font-size: 14px; color: var(--lp-muted); } .sr-list { padding: clamp(48px, 6vw, 88px) var(--lp-gutter) clamp(56px, 7vw, 96px); border-top: 1px solid var(--lp-line); } .sr-in { max-width: var(--lp-max); margin: 0 auto; } .sr-lede { max-width: 66ch; color: #c3ced3; font-size: 17px; margin-bottom: 32px; } .sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; } .sr-studio { padding: 20px 22px; border: 1px solid var(--lp-line); border-radius: 18px; background: rgba(19,23,28,.6); } .sr-studio h3 { font-family: var(--lp-display); font-weight: 800; font-stretch: 85%; font-size: 22px; color: var(--lp-text); margin: 0 0 10px; } .sr-studio ul { list-style: none; margin: 0; padding: 0; } .sr-studio li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0; border-top: 1px solid var(--lp-line); } .sr-studio li a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; } .sr-studio li:first-child { border-top: 0; } .sr-studio li span { font: 500 12px var(--mono); color: var(--lp-muted); flex: none; } /* Work: experience below the grid, dark */ .page-work .section-intro-band { border-top: 1px solid var(--lp-line); margin-top: clamp(48px, 6vw, 88px); } .page-work .section-wash { background: #0e1115; } .page-work .roles, .page-work .role, .page-work .section-wash .roles, .page-work .section-wash .role { border-color: var(--lp-line); } .page-work .role-meta h3 { color: var(--lp-text); } .page-work .contract { background: rgba(19,23,28,.7); border-color: var(--lp-line); } .page-work .jump a { border-color: rgba(238,242,244,.22); color: #d3dde1; } .page-work .jump a:hover { border-color: var(--lp-muted); color: #fff; } .page-work .rig-shot { box-shadow: 0 24px 60px rgba(0,0,0,.6); } .page-work .section-title, .page-dark .section-title { font-family: var(--lp-display); font-weight: 900; font-stretch: 75%; letter-spacing: -.015em; } .page-dark .eyebrow { color: var(--lp-accent); } /* Buttons inside dark pages: dark text on a light button (the remapped --ink is light here) */ .page-dark main .btn { background: var(--lp-text); border-color: var(--lp-text); color: var(--lp-ink) !important; } .page-dark main .btn:hover { background: #fff; border-color: #fff; } /* Video play button on dark pages: accent disc, dark icon */ .page-dark .play { width: clamp(72px, 7vw, 108px); height: clamp(72px, 7vw, 108px); background: var(--lp-accent); box-shadow: 0 0 0 10px rgba(94,196,214,.22), 0 18px 50px rgba(0,0,0,.55); } .page-dark .play svg { fill: var(--lp-ink); width: 40%; height: 40%; } .page-dark .play:focus-visible { outline: 3px solid #fff; outline-offset: 6px; } /* ===================================================================== Final polish round */ /* Header brand: NICK HUGHES over TECHNICAL DIRECTOR, both lines the same width (site.js sets line 2's letter-spacing) */ .site-header .brand-text { align-items: flex-start; } .site-header .brand-name { text-transform: uppercase; font-weight: 700; font-size: clamp(14px, 3.9vw, 17px); letter-spacing: .05em; line-height: 1.15; white-space: nowrap; } .site-header .brand-sub { text-transform: uppercase; font-weight: 400; font-size: clamp(8.8px, 2.45vw, 10.6px); letter-spacing: .12em; line-height: 1.45; white-space: nowrap; color: #5f636b; } .page-dark .site-header .brand-sub { color: #cfd8dc; } /* Home hero ticker: pinned to the bottom of the first screen, one slow loop, pauses on hover and focus */ .lp-ticker { position: relative; margin: 0 calc(-1 * var(--lp-gutter)); border-top: 1px solid var(--lp-line); background: rgba(10,12,15,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); padding-bottom: env(safe-area-inset-bottom); } .tk-track { display: flex; width: max-content; animation: tk-run var(--tk-dur, 55s) linear infinite; } .lp-ticker:hover .tk-track, .lp-ticker:focus-within .tk-track { animation-play-state: paused; } .tk-seq { display: flex; flex: none; } .tk-i { display: flex; align-items: center; padding: 14px 0; font-family: var(--mono); font-size: 12.6px; line-height: 1.2; letter-spacing: .24em; text-transform: uppercase; color: #c9d3d8; white-space: nowrap; } .tk-i::after { content: "\00B7"; color: var(--lp-accent); opacity: .85; padding: 0 28px; } .tk-i b { color: #fff; font-weight: 500; } .tk-hl, .page-dark main .tk-hl a { color: var(--lp-accent); text-decoration: none; } .page-dark main .tk-hl a:hover { text-decoration: underline; } .tk-skip { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 6px 14px; border-radius: 999px; background: var(--lp-text); color: var(--lp-ink) !important; font: 600 13px/1.4 var(--font); text-decoration: none; white-space: nowrap; clip-path: inset(50%); opacity: 0; } .tk-skip:focus-visible { clip-path: none; opacity: 1; outline: 2px solid var(--lp-accent); outline-offset: 3px; } @keyframes tk-run { to { transform: translateX(-50%); } } @media (max-width: 720px) { .tk-i { font-size: 11px; letter-spacing: .18em; padding: 12px 0; } .tk-i::after { padding: 0 18px; } } @media (prefers-reduced-motion: reduce) { .tk-track { animation: none; width: auto; justify-content: center; padding: 6px 16px; } .tk-seq { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; column-gap: 40px; } .tk-seq + .tk-seq, .tk-i:nth-child(n+9) { display: none; } .tk-i { padding: 5px 0; } .tk-i::after { content: none; } /* wrapped rows: spacing instead of dots, so no dot dangles at a line end */ .lp-ticker { -webkit-mask-image: none; mask-image: none; } } @media (prefers-reduced-motion: reduce) and (max-width: 720px) { .tk-seq { column-gap: 24px; } } /* Tiles: the raw image at rest (no text, no gradient). Hover or keyboard focus dims and zooms the image and slides the panel up; on touch screens the first tap opens the panel (site.js adds .is-open), the second opens the project. */ .bt-link::after { content: none; } .bt-img img { transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .45s ease; } .bt-link:focus-visible .bt-img img, .bt.is-open .bt-img img { transform: scale(1.06); filter: brightness(.72); } @media (hover: hover) and (pointer: fine) { .bt-link:hover .bt-img img { transform: scale(1.06); filter: brightness(.72); } } @media (hover: none) { .bt-panel { display: flex; } } .bt.is-open .bt-panel { transform: none; } @media (prefers-reduced-motion: reduce) { .bt-link:hover .bt-img img, .bt-link:focus-visible .bt-img img, .bt.is-open .bt-img img { transform: none; } } /* Project header: long titles sit on two lines on desktop; an accent subtitle under the title */ .project-hero h1.h1-long { font-size: clamp(30px, 1.9vw + 16px, 48px); line-height: 1.06; margin-bottom: 10px; } .ph-sub { margin: 0 0 18px; font-family: "Archivo", "Arial Narrow", system-ui, sans-serif; font-weight: 500; font-stretch: 100%; font-size: clamp(15px, .8vw + 9px, 21px); line-height: 1.2; letter-spacing: .01em; color: #5ec4d6; } /* Breadcrumb on one line: the current page shortens with an ellipsis */ .crumbs { min-width: 0; max-width: 100%; } .crumbs ol { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow: hidden; } .crumbs li { flex: none; white-space: nowrap; } @media (min-width: 701px) { .crumbs ol { align-items: baseline; } .crumbs li[aria-current] { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crumbs li[aria-current]::before { margin-right: 8px; } } @media (orientation: landscape) and (max-height: 520px) { .crumbs li[aria-current] { display: none; } } /* Pull quote between write-up sections */ .pull-quote { margin: 40px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); } .pull-quote p { margin: 0; font-size: clamp(22px, 1.4vw + 14px, 30px); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } .ext-btn { margin-top: 8px; } /* About heading: a gradient across the words (white to teal, with a cooler blue at the end), and a slow sheen that sweeps across once on load and again on hover. Static for reduced motion; plain text in forced colours. */ .grad-title { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%), linear-gradient(100deg, #eef2f4 0%, #d9eef2 30%, #5ec4d6 72%, #7fa8e8 100%); background-size: 250% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat; filter: drop-shadow(0 2px 22px rgba(0,0,0,.55)); padding-bottom: .06em; } @media (prefers-reduced-motion: no-preference) { .grad-title { animation: sheen 2.6s .5s cubic-bezier(.4,0,.2,1) both; } @media (hover: hover) and (pointer: fine) { .grad-title:hover { animation: sheen2 2.2s cubic-bezier(.4,0,.2,1) both; } } } @keyframes sheen { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } } @keyframes sheen2 { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } } .lp-settled .grad-title:not(:hover) { animation: none; background-position: -60% 0, 0 0; } @media (forced-colors: active) { .grad-title { color: CanvasText; background: none; filter: none; } } @media (max-width: 640px) { .ab-hero .grad-title { text-wrap: balance; } } /* Career timeline accordion (About) */ .tl-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 2px 12px; align-items: start; padding: 2px 0; border-radius: 8px; } .tl-acc summary::-webkit-details-marker { display: none; } .tl-acc summary > .tl-when { grid-column: 1; } .tl-acc summary > .tl-what { grid-column: 1; } .tl-acc summary > .tl-chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(238,242,244,.22); position: relative; transition: transform .25s, border-color .2s; } .tl-chev::before { content: ""; position: absolute; left: 6px; top: 5px; width: 6px; height: 6px; border-right: 1.5px solid var(--lp-text); border-bottom: 1.5px solid var(--lp-text); transform: rotate(45deg); } .tl-acc[open] .tl-chev { transform: rotate(180deg); border-color: var(--lp-accent); } .tl-acc summary:hover .tl-co { color: var(--lp-accent); } .tl-acc summary:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 4px; } .tl-co { color: var(--lp-text); font-weight: 600; font-size: 17px; transition: color .2s; } .tl-role { color: #c3ced3; font-size: 15px; } .tl-place { font: 500 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lp-muted); margin-top: 2px; } .tl-body { padding: 10px 0 6px; color: #c3ced3; font-size: 15px; } .tl-body p { margin: 0 0 10px; } .tl-body ul { margin: 0 0 10px; padding-left: 1.1em; } .tl-body li { margin-bottom: 6px; } .tl-body li::marker { color: var(--lp-accent); } .tl-links { display: flex; flex-wrap: wrap; gap: 4px 18px; } .tl-links .link-arrow { font-size: 14px; } .tl > li { padding-top: 12px; padding-bottom: 12px; } .tl > li::before { top: 19px; } .tl-before { margin: 28px 0 0; font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--lp-muted); } @media (pointer: coarse), (max-width: 1024px) { .tl-acc summary { min-height: 44px; } } /* Work page: links under each role */ .role-body .tl-links { margin-top: 4px; } /* Principles as rows with small line icons (Biostream: safety first) */ .principles-list { list-style: none; margin: 18px 0 8px !important; padding: 0 !important; display: grid; gap: 10px; } .principles-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 !important; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); font-size: 16px; line-height: 1.5; } .principles-list li::marker { content: none; } .principles-list strong { display: block; color: var(--ink); margin-bottom: 2px; } .pr-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); } .pr-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Project header, hero_style: fade (Biostream): the image is a background layer of the whole header, invisible behind the text on the left, emerging from about halfway and fully visible by about 78%, with soft fades at the right edge, top and bottom (a CSS mask, so there are no hard edges). The text keeps its place; the image column is empty. */ .ph-fade .ph-media.ph-none { display: none; } @media (min-width: 861px) { .ph-fade .ph-grid { grid-template-areas: "top ." "rest ."; } } .ph-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 48%, rgba(0,0,0,.3) 60%, #000 79%, #000 92%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 48%, rgba(0,0,0,.3) 60%, #000 79%, #000 92%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .ph-bg picture { display: contents; } .ph-bg img { position: absolute; top: 0; right: 0; height: 100%; width: auto; min-width: 60%; max-width: none; object-fit: cover; object-position: right center; } /* Phones and tablets: the image faintly behind the text */ @media (max-width: 900px) { .ph-bg { opacity: .18; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%); } .ph-bg img { inset: 0; width: 100%; min-width: 0; object-position: 70% center; } } /* A dark gradient behind the text, above the image and under the text: keeps the text at full contrast wherever the image reaches under it */ .ph-fade::after { background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(9,16,20,.92) 0%, rgba(9,16,20,.85) 40%, rgba(9,16,20,.5) 52%, rgba(9,16,20,0) 64%); background-size: 4px 4px, 100% 100%; } @media (max-width: 900px) { .ph-fade::after { background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 4px 4px; } }