/* ========================================================================== 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; } /* ---------- SHORT VIEWPORTS --------------------------------------------- */ /* A slide that scrolls is a slide whose bottom the reader never learns about — there is no scrollbar cue on a centred panel and no reason to try. So on shorter screens the deck compacts rather than overflows. This matters most in Portuguese, which runs about a fifth longer than the English it is translated from, on exactly the same layout. */ @media (max-height: 820px) { .deck.is-live .slide { padding-block: var(--mt-space-4); } .deck.is-live .slide__label { margin-bottom: var(--mt-space-6); } .deck.is-live .mtx__row { padding-block: var(--mt-space-4); } .deck.is-live .slide__note { margin-top: var(--mt-space-4); } .deck.is-live .deck__bar { padding-block: var(--mt-space-4); } .deck.is-live .slide__logo { width: 200px; margin-bottom: var(--mt-space-6); } .deck.is-live .display--deck { font-size: clamp(2.75rem, 6vw, 4rem); } .deck.is-live .display--close { font-size: clamp(2.75rem, 5vw, 3.25rem); } } /* ---------- 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; } /* ---------- VISUALLY HIDDEN --------------------------------------------- */ /* Readable by a screen reader, invisible on screen. Distinct from .hp, which is a honeypot that must ALSO be hidden from assistive tech. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== OVERVIEW DECK — the unlisted company presentation (/overview, /overview/pt-br) ========================================================================== Same identity as the rest of the site, a different register. The homepage is cinematic: full-bleed video, parallax, 5.5rem display type, one idea per viewport. It is built to be scrolled through by someone who arrived by accident. This is a DECK — it is sent to one person on purpose and walked through a slide at a time. So it is quiet and typeset, with the frame doing the work the scroll used to: a persistent bar, a progress row, and one idea held still until the reader asks for the next one. TWO MODES, ONE MARKUP. Without JavaScript every slide is a section in a scrolling document — the whole presentation, in one column, correct. deck.js adds .is-live and the same markup becomes one-slide-at-a-time. Every rule below is written so the document mode is the default and the deck mode is the override, never the other way round: if the script never runs, nothing is hidden and nothing is broken. Coral is spent sparingly, per brand/README.md's 2-3-per-viewport cap: the active progress tick, and on the closing slide the section rule and the email address. The matrix deliberately does NOT use it — nine coral dots would blow that cap and put the deck's loudest colour on a legend rather than on the one action the reader is meant to take. ========================================================================== */ /* The deck is the whole page. The site header and footer are chrome for a site being browsed, and this is a document being presented. */ .deck-mode .hdr, .deck-mode .ftr { display: none; } /* ---------- SHELL ------------------------------------------------------- */ .deck { position: relative; } /* Live mode pins the deck to the viewport and lets the stage do the scrolling, so the bars stay put while a slide moves. */ html.deck-live, html.deck-live body { height: 100%; overflow: hidden; } .deck.is-live { display: flex; flex-direction: column; height: 100svh; } .deck__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--mt-space-6); width: min(100% - 3rem, 76rem); margin-inline: auto; padding-block: var(--mt-space-6); flex: none; } .deck__bar--top { border-bottom: 1px solid var(--mt-border); } /* The mark rides the bar on every slide, so the deck is branded even on the eight slides between the title and the sign-off. */ .deck__brand { display: flex; align-items: center; gap: var(--mt-space-3); min-width: 0; } .deck__symbol { width: 2rem; height: 2rem; flex: none; } .deck__doctype { font-size: var(--mt-text-xs); color: var(--mt-text); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); } @media (max-width: 480px) { /* The doctype label is the first thing to go: the mark identifies the deck on its own, and the slide beneath it needs the height more than the caption does. The mark itself never shrinks — 32px is its floor. */ .deck__doctype { display: none; } } .deck__filed { font-size: var(--mt-text-xs); color: var(--mt-text-subtle); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); margin-bottom: var(--mt-space-8); } /* ---------- LANGUAGE ---------------------------------------------------- */ .deck__langs { display: flex; align-items: center; gap: var(--mt-space-1); } .deck__lang { font-family: var(--mt-font-mono); font-size: var(--mt-text-xs); letter-spacing: var(--mt-tracking-wide); color: var(--mt-text-subtle); padding: var(--mt-space-1) var(--mt-space-3); border-radius: var(--mt-radius-full); border: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .deck__lang:hover { color: var(--mt-text); } .deck__lang.is-current { color: var(--mt-text); border-color: var(--mt-border-strong); } /* ---------- SLIDES ------------------------------------------------------ */ /* Document mode: sections, stacked, separated by a hairline. */ .slide { padding-block: var(--mt-space-16); border-top: 1px solid var(--mt-border); } .slide:first-child { border-top: 0; padding-top: var(--mt-space-12); } .slide__in { width: min(100% - 3rem, 68rem); margin-inline: auto; } /* Live mode: one at a time, stacked in place, centred in the stage. */ .deck.is-live .deck__stage { position: relative; flex: 1; min-height: 0; } /* A centred panel gives no scrollbar cue, so a slide too tall for the stage — which happens on a phone, and sooner in Portuguese — looks finished when it is not. deck.js measures the current slide and sets .has-overflow; this fade is the only thing telling the reader to keep going. It is removed once they reach the bottom. */ .deck.is-live .deck__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; background: linear-gradient(to top, var(--mt-bg), transparent); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .deck.is-live.has-overflow .deck__stage::after { opacity: 1; } .deck.is-live .slide { position: absolute; inset: 0; display: grid; /* `safe center` matters on a phone, where a dense slide is taller than the stage. Plain `center` overflows EQUALLY in both directions, which pushes the top of the slide above the scroll origin where nothing can reach it — the reader scrolls down and never sees the heading. `safe` falls back to start alignment the moment the content stops fitting. */ align-content: center; align-content: safe center; overflow-y: auto; padding-block: var(--mt-space-8); border-top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .38s ease, transform .38s ease, visibility 0s linear .38s; } .deck.is-live .slide.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity .38s ease, transform .38s ease, visibility 0s linear 0s; } .slide__label { font-size: var(--mt-text-xs); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); color: var(--mt-text-subtle); padding-bottom: var(--mt-space-3); border-bottom: 1px solid var(--mt-border); margin-bottom: var(--mt-space-8); } .slide__head { font-size: var(--mt-text-2xl); font-weight: var(--mt-weight-semibold); letter-spacing: var(--mt-tracking-tight); max-width: 20ch; } /* The one place the display face runs at full size in this deck. The 2.75rem floor is the same one the homepage keeps: below it the face stops working. */ .display--deck { font-size: clamp(2.75rem, 7vw, 5rem); max-width: 16ch; } .slide--title .slide__lede { margin-top: var(--mt-space-6); max-width: 54ch; } /* The lockup on the title slide. Sized so the symbol inside it lands at 60px — brand/README.md's floor is 28px measured on the symbol, which is a lockup about 120px wide, so there is room to shrink but not much. */ .slide__logo { width: 258px; max-width: 55%; height: auto; margin-bottom: var(--mt-space-12); } @media (max-width: 640px) { .slide__logo { width: 190px; max-width: 70%; margin-bottom: var(--mt-space-8); } } .slide__note { margin-top: var(--mt-space-6); font-size: var(--mt-text-sm); color: var(--mt-text-muted); max-width: 64ch; } .slide__prose { max-width: 64ch; } .slide__prose + .slide__prose { margin-top: var(--mt-space-4); } /* ---------- THE MATRIX -------------------------------------------------- */ .mtx { display: grid; } .mtx__head, .mtx__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--mt-space-4); align-items: center; } .mtx__head { padding-bottom: var(--mt-space-3); border-bottom: 1px solid var(--mt-border); font-size: var(--mt-text-xs); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); color: var(--mt-text-subtle); } .mtx__row { padding-block: var(--mt-space-6); border-bottom: 1px solid var(--mt-border); } .mtx__product { display: grid; gap: 2px; } .mtx__name { font-size: var(--mt-text-lg); font-weight: var(--mt-weight-medium); } .mtx__status { font-size: var(--mt-text-xs); color: var(--mt-text-subtle); } .mtx__cell { display: grid; gap: var(--mt-space-2); justify-items: start; } .mtx__dots { display: flex; gap: 6px; } /* Filled = shipped, hairline ring = in build. Neutral by design; see the coral note at the top of this section. */ .mtx__dot { width: 10px; height: 10px; flex: none; border-radius: var(--mt-radius-full); background: var(--mt-text); display: inline-block; } .mtx__dot--building { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mt-text-subtle); } .mtx__cell-label { font-size: var(--mt-text-xs); color: var(--mt-text-subtle); } .mtx__legend { display: flex; align-items: center; gap: var(--mt-space-2); margin-top: var(--mt-space-4); font-size: var(--mt-text-xs); color: var(--mt-text-subtle); } .mtx__legend .mtx__dot { margin-left: var(--mt-space-4); } .mtx__legend .mtx__dot:first-child { margin-left: 0; } @media (max-width: 720px) { /* The four-column grid cannot hold at phone width — the three dot columns collapse to a few pixels each. Stack instead: the product, then one labelled row per platform. data-platform on the cell carries the label, since the column head it belonged to is gone. */ .mtx__head { display: none; } .mtx__row { grid-template-columns: 1fr; gap: var(--mt-space-3); } .mtx__cell { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--mt-space-3); } .mtx__cell::before { content: attr(data-platform); font-family: var(--mt-font-mono); font-size: var(--mt-text-xs); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); color: var(--mt-text-subtle); min-width: 5rem; } } /* ---------- PLATFORMS --------------------------------------------------- */ .slide__platforms { display: grid; gap: var(--mt-space-8); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); } .slide__platforms dt { font-size: var(--mt-text-xl); font-weight: var(--mt-weight-semibold); margin-bottom: var(--mt-space-3); } .slide__platforms dd { margin: 0; color: var(--mt-text-muted); } /* ---------- THE SIX WEEKS ----------------------------------------------- */ .slide__weeks { list-style: none; padding: 0; margin-top: var(--mt-space-8); display: flex; flex-wrap: wrap; gap: var(--mt-space-2); } .slide__weeks li { display: flex; align-items: baseline; gap: var(--mt-space-2); padding: var(--mt-space-2) var(--mt-space-4); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-full); } .slide__wk-num { font-size: var(--mt-text-xs); color: var(--mt-text-subtle); } .slide__wk-name { font-size: var(--mt-text-sm); font-weight: var(--mt-weight-medium); } /* ---------- WORK SLIDES ------------------------------------------------- */ .slide--work { --app-accent: var(--mt-border-strong); } .slide__in--work { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--mt-space-12); align-items: center; } .wrk__shot { border: 1px solid var(--mt-border); border-top: 2px solid var(--app-accent); border-radius: var(--mt-radius-md); background: var(--mt-bg-sunken); overflow: hidden; } .wrk__shot img { width: 100%; height: auto; } .wrk__body { display: grid; gap: var(--mt-space-4); } .wrk__body .slide__label { margin-bottom: 0; } .wrk__head { display: flex; gap: var(--mt-space-3); align-items: center; } /* No background plate: these are their own brands, arriving as transparent PNGs, and a plate would fight whatever the logo already is. */ .wrk__icon { width: 3rem; height: 3rem; border-radius: var(--mt-radius-md); flex: none; object-fit: contain; } .wrk__name { font-size: var(--mt-text-xl); font-weight: var(--mt-weight-semibold); } .wrk__status { font-size: var(--mt-text-xs); color: var(--mt-text-subtle); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); } .wrk__copy { font-size: var(--mt-text-sm); color: var(--mt-text-muted); } /* .app__scope is a flex-column child on the homepage, where margin-top:auto pins it to the card's base. Here it sits in a grid, so that auto margin would push it to the bottom of its track instead. Reset it. */ .wrk__scope { margin-top: 0; } @media (max-width: 900px) { .slide__in--work { grid-template-columns: 1fr; gap: var(--mt-space-6); } } /* ---------- CLOSING SLIDE ----------------------------------------------- */ /* The ask is the last thing on screen and gets the display face, one step down from the title so the deck reads as opening and closing rather than shouting twice. */ .display--close { font-size: clamp(2.75rem, 5.5vw, 4rem); max-width: 18ch; } .slide__close-lede { margin-top: var(--mt-space-6); } .slide__reach { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mt-space-3); margin-top: var(--mt-space-6); font-size: var(--mt-text-lg); } /* The deck's last coral. It marks the only action being asked for. */ .slide__reach a { color: var(--mt-text-accent); text-decoration: underline; text-underline-offset: 4px; } .slide__reach-sep { color: var(--mt-text-subtle); } /* ---------- CONTROLS ---------------------------------------------------- */ /* Ships with the hidden attribute set and revealed by deck.js. A Next button that cannot advance anything is worse than no button at all. */ .deck__bar--bottom { border-top: 1px solid var(--mt-border); gap: var(--mt-space-4); } .deck__bar--bottom[hidden] { display: none; } .deck__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border: 1px solid var(--mt-border-strong); border-radius: var(--mt-radius-full); color: var(--mt-text); transition: border-color .2s ease, color .2s ease, opacity .2s ease; } .deck__btn svg { width: 1.25rem; height: 1.25rem; } .deck__btn:hover:not(:disabled) { border-color: var(--mt-brand); } /* Disabled rather than hidden at the ends: a control that vanishes moves everything beside it, and the row would jitter on the first and last slide. */ .deck__btn:disabled { opacity: .3; cursor: default; } .deck__ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mt-space-2); flex: 1; justify-content: center; } .deck__tick { display: block; width: 1.5rem; height: 2px; background: var(--mt-border-strong); border-radius: var(--mt-radius-full); padding: 0; transition: background-color .25s ease, transform .25s ease; } /* The deck's brand pulse: one small coral mark that moves as the reader does. */ .deck__tick.is-current { background: var(--mt-brand); transform: scaleY(2); } .deck__tick:hover:not(.is-current) { background: var(--mt-text-subtle); } /* A 2px target is unclickable; pad the hit area without moving the dash. */ .deck__ticks li { display: grid; place-items: center; height: 2.75rem; } .deck__counter { font-size: var(--mt-text-xs); color: var(--mt-text-subtle); flex: none; min-width: 4.5rem; text-align: right; } @media (max-width: 640px) { /* Ticks stop being useful once there are more of them than there is room, and a wrapped second row would push the bar over the closing slide. */ .deck__ticks { display: none; } .deck__bar { width: min(100% - 2rem, 76rem); } } /* ---------- REDUCED MOTION ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* Cross-fading full-viewport slides is exactly the kind of large-area motion this setting exists to stop. Swap them instantly instead. */ .deck.is-live .slide, .deck.is-live .slide.is-current { transition: none !important; transform: none !important; } .deck__tick { transition: none !important; } } /* ---------- PRINT ------------------------------------------------------- */ /* A deck that prints as one slide is useless, so print always falls back to the document: every slide, in order, one per page. deck.js also drops out of live mode on beforeprint, but Chrome's preview does not fire that reliably, so the rules here do the job on their own. On paper the dark canvas is a full-bleed ink flood that most printers refuse and no reader wants, so the tokens flip. Matching the specificity of :root[data-theme="dark"] in tokens.css is what lets these win — site.css loads after it, so an equal-specificity rule later in the cascade takes it. */ @media print { :root[data-theme="dark"] { --mt-bg: #FFFFFF; --mt-bg-raised: #FFFFFF; --mt-bg-sunken: #FFFFFF; --mt-text: #1A1718; --mt-text-muted: #3D3739; --mt-text-subtle: #565052; --mt-text-accent: #8F2020; --mt-border: #BAB2B4; --mt-border-strong: #928A8C; --mt-brand: #8F2020; } html.deck-live, html.deck-live body { height: auto !important; overflow: visible !important; } .hdr, .ftr, .skip, .deck__bar--bottom { display: none !important; } .deck.is-live { display: block !important; height: auto !important; } .deck.is-live .deck__stage { position: static !important; } .deck.is-live .slide { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; break-after: page; break-inside: avoid; } .deck.is-live .slide:last-child { break-after: auto; } .slide__in--work { break-inside: avoid; } }