/* ========================================================================== MUNDYAL TECHNOLOGY — SITE STYLES Layered over brand/tokens/tokens.css. Never hard-code a colour here. The canvas is fixed dark; is set in _Layout. ========================================================================== */ /* ---------- FONTS ------------------------------------------------------- */ /* ?v=N on every face. Static assets are served with a one-year cache header and these filenames never change, so without it a rebuilt typeface is invisible to anyone who has already loaded the site. Bump on any font rebuild — the same trap already cost real debugging time with the hero video. */ @font-face { font-family: "Mundyal Display"; src: url("/fonts/MundyalDisplay-Regular.woff2?v=6") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/fonts/Figtree-Variable.woff2?v=6") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Variable.woff2?v=6") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { --mt-font-display: "Mundyal Display", "Figtree", sans-serif; } /* ---------- RESET ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--mt-bg); color: var(--mt-text); font-family: var(--mt-font-sans); font-size: var(--mt-text-base); line-height: var(--mt-leading-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* Focus is always visible. Never `outline: none`. */ :focus-visible { outline: 2px solid var(--mt-focus); outline-offset: 3px; border-radius: var(--mt-radius-sm); } .skip { position: absolute; left: -9999px; top: var(--mt-space-4); z-index: 100; padding: var(--mt-space-3) var(--mt-space-4); background: var(--mt-bg-raised); border: 1px solid var(--mt-brand); border-radius: var(--mt-radius-sm); } .skip:focus { left: var(--mt-space-4); } /* ---------- LAYOUT ------------------------------------------------------ */ .wrap { width: min(100% - 2.5rem, 76rem); margin-inline: auto; } .section { padding-block: clamp(4rem, 12vh, var(--mt-space-24)); position: relative; } /* The one place coral is allowed as a line: hairline section rules. */ .rule { height: 1px; border: 0; background: linear-gradient(90deg, var(--mt-brand) 0%, color-mix(in srgb, var(--mt-brand) 25%, transparent) 40%, transparent 100%); width: 100%; } /* ---------- TYPE -------------------------------------------------------- */ /* Mundyal Display is a DISPLAY face — 44px and above only, per font/README.md. It is also wide by construction, so line-length is set short. */ .display { font-family: var(--mt-font-display); font-weight: 400; line-height: var(--mt-leading-tight); letter-spacing: var(--mt-tracking-tight); text-wrap: balance; } /* The 2.75rem (44px) floor is deliberate and verified on a real 320px viewport: the headline wraps to two lines and holds its presence rather than shrinking to a timid one-liner. Do not lower it. */ .display--hero { font-size: clamp(2.75rem, 8vw, 5.5rem); max-width: 14ch; } .display--section { font-size: clamp(2.75rem, 4.5vw, var(--mt-text-4xl)); max-width: 18ch; } .eyebrow { font-family: var(--mt-font-mono); font-size: var(--mt-text-xs); font-weight: var(--mt-weight-medium); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); color: var(--mt-text-subtle); display: flex; align-items: center; gap: var(--mt-space-3); margin-bottom: var(--mt-space-6); } .eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--mt-brand); flex: none; } .lede { font-size: var(--mt-text-lg); line-height: var(--mt-leading-body); color: var(--mt-text-muted); max-width: 56ch; } .mono { font-family: var(--mt-font-mono); font-variant-numeric: tabular-nums; } /* ---------- BUTTONS ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--mt-space-2); padding: var(--mt-space-3) var(--mt-space-6); border-radius: var(--mt-radius-full); font-weight: var(--mt-weight-medium); font-size: var(--mt-text-sm); border: 1px solid transparent; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; } /* The single permitted coral fill. One per screen. */ .btn--primary { background: var(--mt-brand); color: var(--mt-ink-900); } .btn--primary:hover { background: var(--mt-action-hover); transform: translateY(-2px); } .btn--ghost { border-color: var(--mt-border-strong); color: var(--mt-text); } .btn--ghost:hover { border-color: var(--mt-brand); transform: translateY(-2px); } .btn--sm { padding: var(--mt-space-2) var(--mt-space-4); } /* ---------- HEADER ------------------------------------------------------ */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-block: var(--mt-space-4); transition: background-color .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; } .hdr[data-scrolled] { background: color-mix(in srgb, var(--mt-bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--mt-border); } .hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--mt-space-8); } .hdr__nav { display: flex; align-items: center; gap: var(--mt-space-8); font-size: var(--mt-text-sm); } .hdr__nav a:not(.btn) { color: var(--mt-text-muted); } .hdr__nav a:not(.btn):hover { color: var(--mt-text); } .hdr__toggle { display: none; flex-direction: column; gap: 5px; padding: var(--mt-space-2); } .hdr__toggle span { display: block; width: 22px; height: 1.5px; background: var(--mt-text); } .hdr__mobile { display: none; } @media (max-width: 860px) { .hdr__nav { display: none; } .hdr__toggle { display: flex; } .hdr__mobile { display: grid; gap: var(--mt-space-4); padding: var(--mt-space-6) 1.25rem var(--mt-space-8); background: var(--mt-bg-raised); border-top: 1px solid var(--mt-border); } .hdr__mobile[hidden] { display: none; } } /* ---------- FOOTER ------------------------------------------------------ */ .ftr { border-top: 1px solid var(--mt-border); padding-block: var(--mt-space-12); } .ftr__in { display: flex; flex-wrap: wrap; gap: var(--mt-space-8); justify-content: space-between; } .ftr__brand { display: flex; gap: var(--mt-space-4); align-items: flex-start; } .ftr__legal { font-size: var(--mt-text-sm); color: var(--mt-text-subtle); } .ftr__nav { display: flex; flex-wrap: wrap; gap: var(--mt-space-6); font-size: var(--mt-text-sm); } .ftr__nav a { color: var(--mt-text-muted); } .ftr__nav a:hover { color: var(--mt-text); } /* ---------- REVEALS ----------------------------------------------------- */ [data-reveal], [data-reveal-group] > * { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } [data-reveal].is-revealed, [data-reveal-group] > .is-revealed { opacity: 1; transform: none; } /* ---------- REDUCED MOTION ---------------------------------------------- */ /* A parallax site is a genuine vestibular hazard without this. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .btn:hover { transform: none !important; } [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; } [data-parallax] { transform: none !important; } } /* ---------- HERO -------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: -12% 0; z-index: -2; } .hero__video { width: 100%; height: 100%; object-fit: cover; } /* Scrim guarantees text contrast over any frame of the video. The horizontal gradient clears completely by 68%, because the video's mark lives in the right third — dimming it there was fighting the one element the video exists to show. */ .hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--mt-bg) 0%, transparent 22%, transparent 60%, var(--mt-bg) 100%), linear-gradient(90deg, var(--mt-bg) 0%, color-mix(in srgb, var(--mt-bg) 55%, transparent) 42%, transparent 68%); } .hero__body { position: relative; padding-block: var(--mt-space-24) var(--mt-space-16); } .hero__lede { margin-top: var(--mt-space-6); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--mt-space-4); margin-top: var(--mt-space-8); } .hero__scroll { position: absolute; bottom: var(--mt-space-8); left: 50%; transform: translateX(-50%); font-size: var(--mt-text-xs); letter-spacing: var(--mt-tracking-wide); color: var(--mt-text-subtle); animation: mt-drift 2.4s ease-in-out infinite; } @keyframes mt-drift { 0%, 100% { transform: translate(-50%, 0); opacity: .5; } 50% { transform: translate(-50%, 6px); opacity: 1; } } @media (max-width: 640px) { .hero__scroll { display: none; } } /* ---------- POSITIONING ------------------------------------------------- */ /* minmax(20rem, …) cannot shrink below 320px, which is wider than .wrap on a 320px phone — and with body{overflow-x:hidden} that clips silently rather than scrolling. min() lets the track collapse to the container. */ .pos__grid { display: grid; gap: var(--mt-space-8); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); margin-top: var(--mt-space-12); } /* ---------- CAPABILITIES ------------------------------------------------ */ .cap__grid { display: grid; gap: var(--mt-space-8); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); margin-top: var(--mt-space-16); } .cap { padding: var(--mt-space-8); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-lg); background: var(--mt-bg-raised); transition: border-color .3s ease, transform .3s ease; } .cap:hover { border-color: var(--mt-border-strong); transform: translateY(-4px); } .cap__icon { width: 2rem; height: 2rem; color: var(--mt-brand); margin-bottom: var(--mt-space-6); } .cap__name { font-size: var(--mt-text-xl); font-weight: var(--mt-weight-semibold); margin-bottom: var(--mt-space-3); } .cap__copy { color: var(--mt-text-muted); font-size: var(--mt-text-base); } /* ---------- THE SIX-WEEK BUILD ------------------------------------------ */ .build { position: relative; overflow: hidden; } .build__bg { position: absolute; inset: -30% 0; z-index: -1; background: radial-gradient(ellipse 50% 40% at 70% 40%, var(--mt-bg-raised) 0%, transparent 70%); } .build__lede { margin-top: var(--mt-space-6); } .build__weeks { list-style: none; padding: 0; margin-top: var(--mt-space-16); display: grid; } .wk { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--mt-space-8); padding-block: var(--mt-space-8); border-top: 1px solid var(--mt-border); align-items: start; } .wk:last-child { border-bottom: 1px solid var(--mt-border); } .wk__num { font-size: var(--mt-text-2xl); color: var(--mt-text-subtle); letter-spacing: var(--mt-tracking-tight); transition: color .3s ease; } .wk:hover .wk__num { color: var(--mt-brand); } .wk__title { font-size: var(--mt-text-xl); font-weight: var(--mt-weight-semibold); margin-bottom: var(--mt-space-2); } .wk__copy { color: var(--mt-text-muted); max-width: 54ch; } @media (max-width: 640px) { .wk { grid-template-columns: 1fr; gap: var(--mt-space-3); } } /* ---------- WORK -------------------------------------------------------- */ .work__grid { display: grid; gap: var(--mt-space-6); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); margin-top: var(--mt-space-16); } .app { --app-accent: var(--mt-border-strong); position: relative; display: flex; flex-direction: column; gap: var(--mt-space-4); padding: var(--mt-space-8); background: var(--mt-bg-raised); border: 1px solid var(--mt-border); border-top: 2px solid var(--app-accent); border-radius: var(--mt-radius-lg); /* .app__shot bleeds to the card edge with negative margins and has square corners of its own — without this it pokes past the card's rounded arc. */ overflow: hidden; transition: transform .3s ease, border-color .3s ease; } .app:hover { transform: translateY(-4px); } .app--placeholder { opacity: .55; border-style: dashed; } .app__flag { font-size: var(--mt-text-xs); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); color: var(--mt-warning); } /* Screenshot in a drawn browser frame. Bleeds to the card's edges by cancelling the card padding, so the image sits flush under the top border. */ .app__shot { margin: calc(var(--mt-space-8) * -1) calc(var(--mt-space-8) * -1) 0; border-bottom: 1px solid var(--mt-border); background: var(--mt-bg-sunken); overflow: hidden; } .app__chrome { display: flex; gap: 6px; align-items: center; padding: var(--mt-space-3) var(--mt-space-4); border-bottom: 1px solid var(--mt-border); } .app__chrome span { width: 8px; height: 8px; flex: none; border-radius: var(--mt-radius-full); background: var(--mt-border-strong); } .app__shot img { width: 100%; height: auto; } .app__head { display: flex; gap: var(--mt-space-4); align-items: center; } /* App logos are their own brands and arrive as transparent PNGs, so no background plate — a plate would fight whatever the logo already is. */ .app__icon { width: 3.5rem; height: 3.5rem; border-radius: var(--mt-radius-md); flex: none; object-fit: contain; } .app__icon--empty { background: var(--mt-bg-sunken); border: 1px dashed var(--mt-border); } .app__name { font-size: var(--mt-text-xl); font-weight: var(--mt-weight-semibold); } .app__meta { font-size: var(--mt-text-xs); color: var(--mt-text-subtle); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); } .app__tagline { font-size: var(--mt-text-lg); color: var(--mt-text); } .app__desc { color: var(--mt-text-muted); font-size: var(--mt-text-sm); } .app__scope { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mt-space-2); margin-top: auto; } .app__scope li { font-size: var(--mt-text-xs); padding: var(--mt-space-1) var(--mt-space-3); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-full); color: var(--mt-text-subtle); } .app__links { display: flex; gap: var(--mt-space-4); font-size: var(--mt-text-sm); } /* Not coral by default: the brand rule caps coral at 2-3 elements per viewport, and this list scales with the number of apps and store links — three apps with three links each is nine coral items in one screen. */ .app__links a { color: var(--mt-text); text-decoration: underline; text-underline-offset: 3px; } .app__links a:hover { color: var(--mt-text-accent); } /* ---------- TESTIMONIALS ------------------------------------------------ */ .quotes { display: grid; gap: var(--mt-space-6); grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); margin-top: var(--mt-space-16); } .quote { margin: 0; padding: var(--mt-space-8); background: var(--mt-bg-raised); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-lg); display: flex; flex-direction: column; gap: var(--mt-space-6); } .quote__text { font-size: var(--mt-text-lg); line-height: var(--mt-leading-snug); } .quote__by { display: flex; gap: var(--mt-space-3); align-items: center; font-size: var(--mt-text-sm); } .quote__face { width: 2.75rem; height: 2.75rem; border-radius: var(--mt-radius-full); } .quote__role { display: block; color: var(--mt-text-subtle); } /* ---------- STUDIO ------------------------------------------------------ */ .studio { position: relative; overflow: hidden; } .studio__bg { position: absolute; inset: -30% 0; z-index: -1; background: radial-gradient(ellipse 45% 40% at 25% 55%, var(--mt-bg-raised) 0%, transparent 70%); } .studio__grid { display: grid; gap: var(--mt-space-8); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); margin-top: var(--mt-space-12); } .studio__roles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mt-space-3); margin-top: var(--mt-space-12); } .studio__roles li { font-size: var(--mt-text-xs); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); padding: var(--mt-space-2) var(--mt-space-4); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-full); color: var(--mt-text-muted); } .studio__stats { display: grid; gap: var(--mt-space-8); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); margin-top: var(--mt-space-16); } .stat__label { font-size: var(--mt-text-xs); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); color: var(--mt-text-subtle); } .stat__value { font-size: var(--mt-text-3xl); margin: 0; margin-top: var(--mt-space-2); } /* ---------- CTA --------------------------------------------------------- */ .cta__in { display: grid; gap: var(--mt-space-6); justify-items: start; } .cta__head { margin-top: var(--mt-space-8); } /* ---------- FORMS ------------------------------------------------------- */ .form-page { padding-top: calc(var(--mt-space-24) + var(--mt-space-8)); } .form-page__in { max-width: 44rem; display: grid; gap: var(--mt-space-8); } .form-page__intro { display: grid; gap: var(--mt-space-4); } .form { display: grid; gap: var(--mt-space-6); } .field { display: grid; gap: var(--mt-space-2); } .field label { font-size: var(--mt-text-sm); font-weight: var(--mt-weight-medium); } .field__opt { color: var(--mt-text-subtle); font-weight: var(--mt-weight-regular); } .field input, .field select, .field textarea { width: 100%; padding: var(--mt-space-3) var(--mt-space-4); background: var(--mt-bg-raised); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-md); color: var(--mt-text); font: inherit; font-size: var(--mt-text-base); transition: border-color .2s ease; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--mt-border-strong); } .field textarea { resize: vertical; min-height: 9rem; } /* Errors are --mt-critical, never coral. Coral errors make every error look like branding and every logo look like a warning. */ .field__error { color: var(--mt-critical); font-size: var(--mt-text-sm); } .field input.input-validation-error, .field textarea.input-validation-error { border-color: var(--mt-critical); } .alert { padding: var(--mt-space-4) var(--mt-space-6); border: 1px solid var(--mt-critical); border-radius: var(--mt-radius-md); background: color-mix(in srgb, var(--mt-critical) 10%, transparent); font-size: var(--mt-text-sm); } .alert:empty { display: none; } .alert a { color: var(--mt-text); text-decoration: underline; } .form__legal { font-size: var(--mt-text-sm); color: var(--mt-text-subtle); } .form__legal a { color: var(--mt-text-accent); text-decoration: underline; } /* Honeypot: removed from view and from the accessibility tree, but still submitted. Never `display: none` — some bots skip those. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .prose { display: grid; gap: var(--mt-space-6); } .prose a { color: var(--mt-text-accent); text-decoration: underline; }