/* ========================================================================== Ace Animation Studios — landing page Implements design option 2a. Tokens derive from assets/nocturne-tokens.css. ========================================================================== */ :root { /* Ground + surfaces */ --ground: #161826; --surface: #232532; --surface-tint: #2b2741; /* flip back face */ /* Text */ --text: #e9e9ed; --text-muted: #b2b6ca; --text-faint: #9397ab; --text-footer: #75798c; /* Accent (Nocturne blurple) */ --accent: #9184d9; --accent-light: #b5abfc; --accent-pale: #e7e5fe; --accent-pale-2: #d2cefd; --accent-pale-3: #f5f4ff; /* Card glow */ --glow: 0 0 0 1px rgba(78,158,255,.55), 0 0 18px rgba(78,158,255,.35), 0 0 48px rgba(78,158,255,.15); --glow-strong: 0 0 0 1px rgba(78,158,255,.8), 0 0 22px rgba(78,158,255,.5), 0 0 60px rgba(78,158,255,.2); /* Layout */ --gutter: 40px; --rhythm: 120px; --radius: 8px; --radius-inner: 6px; /* Content is capped at the 1280px design canvas and centred. Backgrounds — the hero reel, the body wash, the contact gradient — stay full-bleed. */ --maxw: 1280px; --ease: cubic-bezier(.2,.8,.2,1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ground); color: var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { display: block; max-width: 100%; } h1, h2 { font-weight: 500; } /* Section heading. Design baseline was a flat 48/500. Three things give it energy without leaving the system: it scales up with the viewport (weight stays 500 — the handoff is firm that headings never go bolder), it carries a soft version of the same blue the cards glow with, and it ends in an accent mark that echoes the blue "O" in the logo. */ .h2 { margin: 0; font-size: clamp(40px, 5.2vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 0 60px rgba(78,158,255,.45), 0 0 24px rgba(78,158,255,.2); } .h2__mark { color: var(--accent-light); /* Pull the mark tight against the word so it reads as one unit. */ margin-left: -.02em; } /* Headings rise into place with the same easing the laurels use. JS adds .js to , so without it they are simply visible. */ .js .h2-reveal { opacity: 0; transform: translateY(18px); } .js .h2-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--surface); color: var(--text); border-radius: 0 0 var(--radius) 0; font-size: 14px; text-decoration: none; } .skip-link:focus { left: 0; } /* ========================================================================== 1. Hero ========================================================================== */ .hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--ground); } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(22,24,38,.15) 20%, rgba(22,24,38,.9) 100%); } /* -- Nav -- */ .nav { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 32px; padding: 22px var(--gutter); font-size: 14px; max-width: var(--maxw); margin-inline: auto; } .nav__home { margin-right: auto; display: block; line-height: 0; } .nav__logo { height: 22px; width: auto; filter: invert(1) hue-rotate(180deg); } .nav__links { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; } .nav__links a { color: var(--text); text-decoration: none; transition: color .2s var(--ease); } .nav__links a:hover { color: var(--accent-light); } .nav__cta { color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); padding: 7px 14px; text-decoration: none; font-weight: 500; transition: background-color .2s var(--ease), color .2s var(--ease); } .nav__cta:hover { background: rgba(145,132,217,.12); color: var(--accent-light); border-color: var(--accent-light); } /* -- Centred logo -- */ .hero__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; pointer-events: none; } .hero__title { margin: 0; line-height: 0; } .hero__logo { width: min(640px, 80vw); height: auto; filter: invert(1) hue-rotate(180deg) drop-shadow(0 12px 40px rgba(0,0,0,.7)); } /* ========================================================================== 2. Dark body wrapper + bokeh ========================================================================== */ .wash { position: relative; overflow: hidden; background: linear-gradient(180deg, #161826 0%, #1a1d3a 35%, #161826 70%, #1c2148 100%); } .wash__content { position: relative; } @keyframes drift { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,-40px) scale(1.12); } 66% { transform: translate(-40px,50px) scale(.94); } 100% { transform: translate(0,0) scale(1); } } .bokeh { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; animation: drift 30s ease-in-out infinite; will-change: transform; } .bokeh--1 { width: 520px; height: 520px; left: -140px; top: 8%; background: radial-gradient(circle, rgba(78,158,255,.32), rgba(78,158,255,0) 70%); animation-duration: 26s; } .bokeh--2 { width: 380px; height: 380px; right: -80px; top: 30%; background: radial-gradient(circle, rgba(145,132,217,.34), rgba(145,132,217,0) 70%); animation-duration: 32s; animation-delay: -9s; } .bokeh--3 { width: 640px; height: 640px; left: 30%; top: 58%; background: radial-gradient(circle, rgba(78,158,255,.22), rgba(78,158,255,0) 70%); animation-duration: 38s; animation-delay: -17s; } .bokeh--4 { width: 260px; height: 260px; right: 12%; top: 82%; background: radial-gradient(circle, rgba(181,171,252,.3), rgba(181,171,252,0) 70%); animation-duration: 22s; animation-delay: -5s; } /* ========================================================================== 3. About ========================================================================== */ /* The "About" label is gone, so the copy runs the full width of the container instead of sitting in the right-hand column of a 320px + 1fr grid. */ .about { padding: var(--rhythm) var(--gutter); max-width: var(--maxw); margin-inline: auto; } /* Runs the full container width and scales up to match — with the label gone this line is the section's opening statement, so it carries the weight. */ .about__lead { margin: 0 0 44px; font-size: clamp(30px, 3.8vw, 52px); font-weight: 500; line-height: 1.18; letter-spacing: -.022em; /* Not `balance` — that evens the lines by pulling the block narrower, which is the opposite of letting the copy run the full width. */ text-wrap: pretty; } .about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; font-size: 17px; line-height: 1.6; color: var(--text-muted); } .about__cols p { margin: 0; } .about__cols em { color: var(--text); font-style: normal; } /* ========================================================================== 4. The team — flip rows ========================================================================== */ .team { padding: 0 var(--gutter) var(--rhythm); max-width: var(--maxw); margin-inline: auto; } .team__heading { margin-bottom: 36px; } .team__rows { display: flex; flex-direction: column; gap: 14px; } .flip { height: 200px; perspective: 1400px; } .flip__inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--ease); } .flip:hover .flip__inner, .flip:focus-within .flip__inner, .flip.is-flipped .flip__inner { transform: rotateX(180deg); } .flip__face { height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; align-items: center; gap: 32px; padding: 20px 32px; border-radius: var(--radius); } .flip__front { display: grid; grid-template-columns: 160px 1fr 1fr; background: var(--surface); box-shadow: var(--glow); } .flip__back { position: absolute; inset: 0; display: grid; grid-template-columns: 160px 1fr; transform: rotateX(180deg); background: var(--surface-tint); box-shadow: var(--glow-strong); } .team__photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; } .team__photo--empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #2f3242 0 8px, #353849 8px 16px); font: 11px ui-monospace, Menlo, monospace; color: var(--text-faint); } .team__id { display: block; } .team__name { display: block; font-size: 34px; font-weight: 500; letter-spacing: -.02em; } .team__role { display: block; font-size: 16px; color: var(--text-faint); margin-top: 6px; } .team__bio { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-muted); } .team__label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); } .team__facts { font-size: 24px; line-height: 1.35; color: var(--accent-pale); } /* ========================================================================== 5. Recognition — laurels ========================================================================== */ .laurels { padding: 0 var(--gutter) var(--rhythm); overflow: hidden; max-width: var(--maxw); margin-inline: auto; } .laurels__row { display: flex; flex-wrap: wrap; gap: 36px 48px; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; } .laurel img { height: 110px; width: auto; filter: invert(1) brightness(1.1); } /* All six current laurels are black-on-transparent, so they all invert. Add this class to any future laurel that already ships light artwork. */ .laurel--light img { filter: none; } @keyframes slidein { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } } /* Hidden until IntersectionObserver adds .is-in. JS adds .js to , so the no-JS path leaves them visible. */ .js .laurel { opacity: 0; } .js .laurel.is-in { animation: slidein .9s var(--ease) both; } /* ========================================================================== 6. News ========================================================================== */ .news { padding: 0 var(--gutter) var(--rhythm); max-width: var(--maxw); margin-inline: auto; } .news__head { display: flex; align-items: baseline; gap: 28px; margin-bottom: 36px; } .news__note { font-size: 13px; color: var(--text-faint); max-width: 520px; line-height: 1.4; } /* Four across instead of three, so the cards read as a row of updates rather than three features. Padding and type step down to match the narrower card. */ .news__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .news__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--glow); } a.news__card { transition: color .2s var(--ease); } a.news__card:hover { color: var(--accent-light); } .news__img { aspect-ratio: 4 / 3; border-radius: var(--radius-inner); width: 100%; object-fit: cover; } .news__img--empty { background: repeating-linear-gradient(135deg, #2f3242 0 8px, #353849 8px 16px); } .news__title { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; flex: 1; } .news__date { font-size: 12px; color: var(--text-faint); } /* ========================================================================== 7. Contact ========================================================================== */ /* The gradient stays full-bleed; only the content inside is capped. */ .contact { overflow: hidden; background: linear-gradient(135deg, #262a60, #353b80 60%, #4c5397); } .contact__inner { position: relative; padding: 110px var(--gutter) var(--rhythm); max-width: var(--maxw); margin-inline: auto; } .contact__h2 { margin-bottom: 20px; color: var(--accent-pale-3); } .contact__email { display: inline-block; font-size: 56px; font-weight: 500; letter-spacing: -.02em; line-height: 1.05; color: var(--accent-pale-2); text-decoration: none; transition: color .2s var(--ease); } .contact__email:hover { color: var(--accent-pale-3); } .contact__social { display: flex; gap: 28px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 15px; } .contact__social a { color: var(--accent-pale); text-decoration: none; transition: color .2s var(--ease); } .contact__social a:hover { color: #fff; } .contact__mascot { position: absolute; right: 56px; bottom: -14px; width: 150px; height: auto; } /* ========================================================================== 8. Footer ========================================================================== */ .footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px var(--gutter); font-size: 12px; color: var(--text-footer); max-width: var(--maxw); margin-inline: auto; } .footer__links { display: flex; gap: 20px; } .footer a { color: var(--text-footer); text-decoration: none; transition: color .2s var(--ease); } .footer a:hover { color: var(--text-muted); } /* ========================================================================== Responsive ========================================================================== */ /* News steps 4 -> 2 -> 1 rather than dropping straight to a single column. */ @media (max-width: 1040px) { .news__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { :root { --gutter: 24px; --rhythm: 80px; } /* Nav collapses to logo + Contact */ .nav__links { display: none; } .about__cols { grid-template-columns: 1fr; gap: 24px; } /* Team rows grow: photo above text */ .flip { height: auto; min-height: 320px; } .flip__inner { height: auto; min-height: 320px; } .flip__front, .flip__back { grid-template-columns: 1fr; justify-items: start; align-content: center; gap: 20px; padding: 28px 24px; } .flip__front { height: auto; min-height: 320px; } .flip__back { height: 100%; overflow: hidden; } .team__name { font-size: 28px; } .team__facts { font-size: 20px; } .news__head { flex-direction: column; gap: 12px; } .contact__email { font-size: 32px; word-break: break-all; } .contact__mascot { width: 110px; right: 16px; opacity: .9; } .footer { flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 560px) { .news__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .laurel img { height: 84px; } .laurels__row { gap: 28px 32px; } } /* ========================================================================== Reduced motion — fade instead of rotate, hold the bokeh, hold the reel ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bokeh { animation: none; } .js .laurel { opacity: 1; } .js .laurel.is-in { animation: none; } .js .h2-reveal { opacity: 1; transform: none; } .js .h2-reveal.is-in { transition: none; } .flip__inner { transition: none; } .flip:hover .flip__inner, .flip:focus-within .flip__inner, .flip.is-flipped .flip__inner { transform: none; } /* Cross-fade the two faces in place */ .flip__face { transition: opacity .3s ease; } .flip__back { transform: none; opacity: 0; backface-visibility: visible; -webkit-backface-visibility: visible; } .flip:hover .flip__front, .flip:focus-within .flip__front, .flip.is-flipped .flip__front { opacity: 0; } .flip:hover .flip__back, .flip:focus-within .flip__back, .flip.is-flipped .flip__back { opacity: 1; } }