/* ========================================================================== Uay Balam Studios — landing page Dark theme. The typeface (Montserrat) comes from the studio pitch deck; the deck's light palette is inverted here over a #0A0F14 base with two soft radial glows. The deck's #6D9EEB reads well on dark and carries links and accents, which it could not do on white. ========================================================================== */ :root { --bg: #0A0F14; --surface: rgba(255, 255, 255, .045); /* cards, panels */ --surface-2: rgba(255, 255, 255, .07); /* tags, badges */ --line: rgba(255, 255, 255, .12); --ink: #E9EEF3; /* primary text */ --muted: #9BA9B7; /* secondary text */ --accent: #6D9EEB; /* rules, roles, links */ --wrap: 1120px; --radius: 14px; --gap: clamp(1.5rem, 3vw, 2.5rem); --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* The glows are pinned to the viewport rather than painted on : the gradients are sized in percentages, and on a page this tall they would stretch to nothing if they resolved against the document height. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(115% 85% at 92% 4%, rgba(75, 147, 247, .10), transparent 55%), radial-gradient(95% 80% at 2% 100%, rgba(53, 201, 173, .07), transparent 52%), var(--bg); } /* height:auto lets CSS sizing win over the width/height attributes on , which are there to reserve layout space and prevent shift while loading */ img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; } a { color: var(--accent); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2rem); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--accent); color: #08131F; padding: .6rem 1rem; border-radius: 8px; font-weight: 700; } :where(a, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 15, 20, .78); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .75rem; } .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); } .brand-badge { display: grid; place-items: center; width: 42px; height: 42px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; flex: none; } .brand-badge img { width: 74%; } .brand-badge.small { width: 34px; height: 34px; border-radius: 9px; } .brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.1; display: flex; flex-direction: column; } .brand-sub { font-weight: 500; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .site-nav { display: flex; align-items: center; gap: clamp(.75rem, 2.2vw, 1.6rem); flex-wrap: wrap; } .site-nav a { color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 600; padding-block: .25rem; border-bottom: 2px solid transparent; } .site-nav a:hover { border-bottom-color: var(--accent); } .nav-cta { background: var(--ink); color: #08131F !important; padding: .5rem 1rem !important; border-radius: 999px; border-bottom: 0 !important; } .nav-cta:hover { background: var(--accent); } /* ---------- Hero ---------- */ .hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem); border-bottom: 1px solid var(--line); } .hero-inner { max-width: 60rem; } .hero-mark { width: clamp(88px, 13vw, 128px); aspect-ratio: 1; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; margin-bottom: 1.75rem; } .hero-mark img { width: 72%; } .eyebrow { margin: 0 0 .85rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .hero h1 { font-size: clamp(2.1rem, 6vw, 3.7rem); font-weight: 800; max-width: 18ch; margin-bottom: 1.25rem; } .lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); max-width: 52ch; margin: 0 0 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; } .btn { display: inline-block; padding: .8rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; border: 2px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn-primary { background: var(--ink); color: #08131F; } .btn-primary:hover { background: var(--accent); color: #08131F; } .btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Section scaffolding ---------- */ .section { padding-block: clamp(3.25rem, 8vw, 5.75rem); } /* translucent so the fixed gradient stays visible through banded sections */ .section-alt { background: rgba(255, 255, 255, .028); } .section-title { font-size: clamp(1.6rem, 3.6vw, 2.35rem); font-weight: 800; margin-bottom: 1rem; padding-bottom: .85rem; position: relative; } .section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 62px; height: 4px; background: var(--accent); border-radius: 2px; } .section-intro { color: var(--muted); max-width: 58ch; margin: 1.5rem 0 0; } /* ---------- Who we are ---------- */ .studio-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--gap); margin-top: 2.25rem; align-items: start; } .studio-copy p { margin: 0 0 1.1rem; max-width: 62ch; color: var(--muted); } .studio-copy blockquote { margin: 1.75rem 0 0; padding: .3rem 0 .3rem 1.25rem; border-left: 4px solid var(--accent); font-size: 1.1rem; font-weight: 600; max-width: 46ch; color: var(--ink); } .facts { margin: 0; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 1.1rem; } .fact dt { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; } .fact dd { margin: 0; font-weight: 600; } /* ---------- Team ---------- */ /* explicit column counts rather than auto-fit: eight members stacked one per row makes for a very long scroll on a phone, and auto-fit would give five or six columns on a wide screen */ .team-grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); } @media (min-width: 620px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 940px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Discipline badges rather than headshots: transparent art that sits straight on the page, so there is no tile to fill and nothing to crop. object-fit is contain to keep the mask whole, and the art carries its own margin. */ .member img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: .95rem; } .member h3 { font-size: 1.05rem; font-weight: 700; } .member .role { margin: .3rem 0 0; font-size: .92rem; font-weight: 600; color: var(--accent); } .member .prior { margin: .25rem 0 0; font-size: .82rem; color: var(--muted); } /* ---------- Cards (clients + partners) ---------- */ .card-grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 1.35rem; display: flex; flex-direction: column; } .card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .6rem; } .card p { margin: 0; color: var(--muted); font-size: .94rem; } .tag { display: inline-block; vertical-align: middle; margin-left: .4rem; padding: .18rem .55rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } /* Client marks arrive on their own backgrounds and cannot be recoloured, so each plate matches its artwork: the Your Forest wordmark is dark and needs a light tile, while the AiStar and Genies marks are white on black. */ .plate { display: grid; border-radius: 10px; background: #EDF0F3; border: 1px solid var(--line); margin-bottom: 1.15rem; padding: 18px; overflow: hidden; } /* an explicit pixel height avoids percentage heights, which do not resolve against a grid area reliably; object-fit then centres and scales the artwork. The plate's own height comes out as 80px + padding. */ .plate img { width: 100%; height: 80px; object-fit: contain; } .plate-dark { background: #000; border-color: rgba(255, 255, 255, .16); } .photo { height: 168px; margin: -1.35rem -1.35rem 1.15rem; background: var(--surface-2); } .photo img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Feature (DNA Rush) ---------- */ .feature { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); } .feature-art img { width: 100%; border-radius: 10px; } .feature-copy h3 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 800; margin-bottom: .75rem; } .feature-copy > p { color: var(--muted); margin: 0; max-width: 48ch; } .stats { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.75rem; } .stats li { display: flex; flex-direction: column; } .stats strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; } .stats span { font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ---------- Contact ---------- */ .contact { text-align: center; border-top: 1px solid var(--line); background: radial-gradient(70% 140% at 50% 0%, rgba(75, 147, 247, .12), transparent 70%), rgba(255, 255, 255, .028); } .contact-inner h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: .75rem; } .contact-inner > p { color: var(--muted); margin: 0 0 2rem; } /* .btn was written for anchors. Buttons need the typography reset (form controls don't inherit it) but not a background — .btn-primary and .btn-ghost already set their own, and hardcoding one here would break the ghost variant. */ button.btn { font-family: inherit; line-height: inherit; cursor: pointer; } /* two classes, to outweigh the `.contact-inner > p` margin above */ .contact-inner > .contact-alt { margin: 1.25rem 0 0; font-size: .9rem; } /* ---------- Contact modal ---------- */ /* The dialog element is only the centring frame — .modal-card carries the panel. Splitting them keeps ::backdrop free to do the dimming, and means the card can scroll on a short screen without the padding scrolling with it. */ .modal { border: 0; padding: 1rem; background: transparent; color: var(--ink); /* the UA stylesheet gives dialog width:fit-content, which would shrink the panel to its longest line of text instead of filling the max-width */ width: 100%; max-width: min(34rem, 100%); max-height: 100dvh; overflow: visible; } .modal::backdrop { background: rgba(6, 10, 14, .72); backdrop-filter: blur(4px); } /* showModal() blocks interaction with the page but not scrolling of it, so the page behind the dialog is pinned by hand while it is open. */ body.modal-open { overflow: hidden; } .modal-card { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2rem); /* the frame's 1rem padding is doubled here so the card never touches the edge */ max-height: calc(100dvh - 2rem); overflow-y: auto; } .modal-card h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); font-weight: 800; padding-right: 2.5rem; /* clears the close button */ } .modal-intro { color: var(--muted); font-size: .94rem; margin: .6rem 0 1.6rem; } .req-note { display: block; font-size: .84rem; } .req { color: var(--accent); } .modal-close { position: absolute; top: .85rem; right: .85rem; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; color: var(--muted); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .modal-close:hover { color: var(--ink); border-color: var(--accent); } /* ---------- Contact form ---------- */ .contact-form { display: grid; gap: 1rem; } .field { display: grid; gap: .4rem; } .field label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .field input, .field select, .field textarea { /* form controls opt out of inherited typography, so it is set back by hand */ font: inherit; width: 100%; padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); transition: border-color .15s ease; } .field textarea { resize: vertical; min-height: 6.5rem; } .field select { /* the native arrow is drawn light-on-light on a dark control in some browsers, so it is replaced with one that follows --muted */ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239BA9B7' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px; padding-right: 2.4rem; } .field select:invalid { color: var(--muted); } .field select option { background: var(--bg); color: var(--ink); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } /* :user-invalid rather than :invalid — it waits until the field has actually been filled in and left, so empty required fields are not red on open. */ .field input:user-invalid, .field textarea:user-invalid { border-color: #E0685F; } /* The spam trap. Off-screen rather than display:none, which some bots skip. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-submit { justify-self: start; margin-top: .35rem; } .form-submit:disabled { opacity: .6; cursor: progress; } .form-status { margin: 0; font-size: .9rem; color: var(--muted); } .form-status:empty { display: none; } .form-status.is-ok { color: #6BD3AE; } .form-status.is-error { color: #E0685F; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding-block: 1.75rem; } .footer-inner { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; } .footer-inner p { margin: 0; font-size: .85rem; color: var(--muted); } /* ---------- Narrow screens ---------- */ @media (max-width: 860px) { .studio-grid, .feature { grid-template-columns: 1fr; } .feature { text-align: left; } } @media (max-width: 600px) { .header-inner { justify-content: center; } .site-nav { justify-content: center; gap: .65rem 1rem; } .site-nav a { font-size: .84rem; } .stats { gap: 1.25rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }