/* ============================================================ MacxLabs — shared design system Static, no build step. Dark studio base + per-app accent. Set an app accent by adding a theme class to : .theme-cascade | .theme-factfall | .theme-arcade or override --accent inline on a section. ============================================================ */ :root { /* studio base palette */ --bg: #0b0d13; --bg-2: #11141d; --surface: #161a26; --surface-2: #1c2130; --border: #262c3d; --border-2: #323a50; --text: #eef1f7; --muted: #9aa3b8; --muted-2: #6f7891; /* default accent (studio violet) — apps override */ --accent: #8b7cff; --accent-2: #b3a8ff; --accent-ink: #0b0d13; /* text drawn on top of accent fills */ --accent-glow: rgba(139,124,255,.35); --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --shadow: 0 10px 40px rgba(0,0,0,.45); --shadow-lg: 0 24px 70px rgba(0,0,0,.55); --maxw: 1080px; /* fluid gutter — tighter on phones, roomier on desktop */ --gutter: clamp(16px, 5vw, 22px); /* min tap target for interactive controls */ --tap: 44px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; } /* ---- per-app themes ---- */ .theme-cascade { --accent: #ff4d8d; --accent-2: #ff86b3; --accent-glow: rgba(255,77,141,.32); --bg: #120a22; --bg-2: #170c2c; --surface: #1e1238; --surface-2: #261546; --border: #33215c; --border-2: #432a73; --accent-ink: #21102e; } .theme-factfall { --accent: #ff3b8a; --accent-2: #46e8b0; /* mint */ --accent-glow: rgba(70,232,176,.30); --bg: #0e1418; --bg-2: #121b20; --surface: #17222a; --surface-2: #1d2c35; --border: #273a44; --border-2: #33505d; --accent-ink: #06120d; } .theme-arcade { --accent: #ff4dff; /* neon magenta */ --accent-2: #34e6ff; /* neon cyan */ --accent-glow: rgba(52,230,255,.30); --bg: #07040f; --bg-2: #0c0618; --surface: #140a26; --surface-2: #1b0e32; --border: #2c1850; --border-2: #3d2070; --accent-ink: #0a0316; } /* ============================== base ============================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* never allow a stray wide element to create sideways scroll on a phone */ overflow-x: hidden; } body { margin: 0; font-family: var(--font); color: var(--text); background: radial-gradient(900px 520px at 78% -8%, var(--accent-glow), transparent 60%), radial-gradient(700px 480px at 8% 4%, rgba(255,255,255,.045), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--bg) 38%); background-attachment: fixed; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .4em; font-weight: 800; } h1 { font-size: clamp(2rem, 5.4vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); } h3 { font-size: 1.18rem; } p { margin: 0 0 1rem; color: var(--muted); } small { color: var(--muted-2); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: clamp(40px, 8vw, 64px) 0; } .center { text-align: center; } .eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 800; color: var(--accent-2); margin: 0 0 14px; } .lead { font-size: clamp(1.02rem, 2.1vw, 1.22rem); color: var(--muted); } .text-grad { background: linear-gradient(120deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* skip link for a11y */ .skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; z-index: 100; } .skip:focus { left: 0; } :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; } /* ============================== header ============================== */ .site-head { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--border); /* respect the iPhone notch / Dynamic Island safe area */ padding-top: env(safe-area-inset-top); } .site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 12px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-size: 1.06rem; flex: none; } .brand:hover { text-decoration: none; } /* --- real MacxLabs mark (gradient tile + masked "M" stroke) --- */ .brand .mark { position: relative; width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 16px var(--accent-glow); /* hide any literal "M" text in the markup — the stroke is drawn below */ color: transparent; font-size: 0; overflow: hidden; } .brand .mark::before { content: ""; position: absolute; inset: 0; background: var(--accent-ink); -webkit-mask: var(--ml-mark) center / 86% 86% no-repeat; mask: var(--ml-mark) center / 86% 86% no-repeat; } /* the brand mark is the studio logo regardless of page theme */ :root { --ml-mark: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2064%22>%3Cpath%20d=%22M16%2045V21.5c0-1.7%202.1-2.5%203.2-1.2L32%2035l12.8-14.7c1.1-1.3%203.2-.5%203.2%201.2V45%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%226.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/>%3C/svg>"); } /* inline-SVG variant: the SVG paints its own gradient tile + stroke (sharpest option, used on the home page header/footer) */ .brand .mark.mark-svg { background: none; } .brand .mark.mark-svg::before { display: none; } .brand .mark.mark-svg svg { width: 100%; height: 100%; display: block; } /* subpage variant that drops a real favicon image inside the tile */ .brand .mark.img { background: none; box-shadow: none; } .brand .mark.img::before { display: none; } .brand .mark.img img { width: 100%; height: 100%; display: block; object-fit: cover; } .nav { display: flex; gap: clamp(12px, 3vw, 22px); align-items: center; font-size: .92rem; flex-wrap: wrap; justify-content: flex-end; } .nav a { color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 2px; } .nav a:hover { color: var(--text); text-decoration: none; } /* below 560px we keep only the primary "Apps" link; the three deep links live in the footer and the app cards, so the bar never overflows */ @media (max-width: 560px){ .nav .hide-sm { display: none; } .site-head .wrap { min-height: 54px; } .nav { gap: 10px; } } /* ============================== buttons ============================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: 1rem; line-height: 1; padding: 14px 22px; min-height: var(--tap); border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 10px 30px var(--accent-glow); } .btn-primary:hover { box-shadow: 0 14px 40px var(--accent-glow); } .btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border-2); } .btn-ghost:hover { background: var(--surface); border-color: var(--accent-2); } .btn-lg { padding: 17px 28px; font-size: 1.06rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } .btn-row.center-row { justify-content: center; } /* the hero pair has long labels — stack them full-width on small phones so neither button is clipped or becomes a hard-to-tap sliver */ @media (max-width: 440px){ .hero .btn-row { flex-direction: column; align-items: stretch; } .hero .btn-row .btn { width: 100%; } } /* App Store badge button */ .appstore { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; border: 1px solid #2c2c2e; padding: 11px 20px 11px 18px; border-radius: 14px; font-weight: 600; transition: transform .12s ease, border-color .2s; } .appstore:hover { text-decoration: none; transform: translateY(-2px); border-color: #4a4a4e; } .appstore svg { width: 26px; height: 26px; flex: none; } .appstore .t { display: flex; flex-direction: column; line-height: 1.05; text-align: left; } .appstore .t small { font-size: .62rem; letter-spacing: .04em; color: #c7c7cc; text-transform: uppercase; } .appstore .t b { font-size: 1.18rem; font-weight: 600; } /* ============================== hero ============================== */ .hero { padding: clamp(36px, 9vw, 72px) 0 clamp(32px, 7vw, 48px); } .hero .eyebrow { justify-content: center; } .badge-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-2); color: var(--muted); padding: 7px 14px; border-radius: 999px; font-size: clamp(.76rem, 2.6vw, .82rem); font-weight: 600; margin-bottom: 20px; /* keep a long status pill readable on a 320px screen instead of clipping */ max-width: 100%; line-height: 1.3; text-align: center; } .badge-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); } .badge-pill.live .dot { background: #36d97a; box-shadow: 0 0 10px #36d97a; } .hero-app { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .hero-app .copy { max-width: 560px; } .hero-app h1 { margin-bottom: 18px; } .hero-icon-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .hero-icon-row img { width: 78px; height: 78px; border-radius: 19px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06) inset; } .hero-icon-row .name { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; } .hero-icon-row .name span { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: 0; } /* phone frame for hero shot */ .phone { position: relative; width: 280px; max-width: 78%; margin: 0 auto; border-radius: 42px; padding: 9px; background: linear-gradient(160deg, #2a2f3e, #14171f); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.05) inset; } .phone::after { content: ""; position: absolute; top: 17px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; background: #05060a; border-radius: 0 0 14px 14px; z-index: 2; } .phone img { border-radius: 34px; width: 100%; } @media (max-width: 820px){ .hero-app { grid-template-columns: 1fr; text-align: center; } .hero-app .copy { margin: 0 auto; } .hero-icon-row { justify-content: center; } .btn-row { justify-content: center; } .phone { order: -1; } } /* ============================== app cards (home) ============================== */ .app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* tablet: two up */ @media (max-width: 880px){ .app-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } /* phone: single clean stack */ @media (max-width: 600px){ .app-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } } .app-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(22px, 5vw, 26px) clamp(20px, 4.5vw, 24px); overflow: hidden; transition: transform .16s ease, border-color .2s; } .app-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c1, var(--accent)), var(--c2, var(--accent-2))); opacity: .9; } .app-card:hover { transform: translateY(-4px); border-color: var(--border-2); } .app-card .ico { width: 72px; height: 72px; border-radius: 17px; margin-bottom: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) inset; } .app-card h3 { margin-bottom: 4px; font-size: clamp(1.18rem, 4vw, 1.28rem); } .app-card .tag { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .app-card .status { display: inline-flex; align-items: center; gap: 6px; } .app-card .status .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); flex: none; } .app-card .status.live .d { background: #36d97a; box-shadow: 0 0 8px #36d97a; } .app-card .status.review .d { background: #f5b13d; box-shadow: 0 0 8px #f5b13d; } .app-card p { flex: 1; font-size: .96rem; color: var(--muted); } .app-card .card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } /* on a phone, stack the two card buttons full-width for big, easy tap targets */ @media (max-width: 380px){ .app-card .card-actions { flex-direction: column; align-items: stretch; } .app-card .card-actions .btn { justify-content: center; } } /* ============================== feature blocks ============================== */ .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 720px){ .features { grid-template-columns: 1fr; } } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(22px, 4.5vw, 26px) clamp(20px, 4vw, 24px); transition: border-color .2s; } .feature:hover { border-color: var(--border-2); } .feature .fi { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; display: grid; place-items: center; font-size: 1.4rem; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .feature h3 { margin-bottom: 8px; } .feature p { margin: 0; font-size: .96rem; } /* stat strip */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 620px){ .stats { grid-template-columns: repeat(2, 1fr); } } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 16px; text-align: center; } .stat b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); background: linear-gradient(120deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; } .stat span { font-size: .82rem; color: var(--muted); } /* ============================== gallery ============================== */ .gallery { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 18px; align-items: flex-start; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .gallery::-webkit-scrollbar { height: 8px; } .gallery::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; } .shot { flex: 0 0 auto; width: 230px; scroll-snap-align: center; border-radius: 26px; overflow: hidden; border: 1px solid var(--border-2); background: var(--surface); box-shadow: var(--shadow); } .shot img { width: 100%; aspect-ratio: 590 / 1280; object-fit: cover; } .shot-wide { width: min(520px, 84vw); } .shot-wide img { aspect-ratio: 1280 / 590; object-fit: cover; } .shot .cap { font-size: .8rem; color: var(--muted); padding: 10px 12px 13px; text-align: center; } .gallery-hint { font-size: .82rem; color: var(--muted-2); text-align: center; margin-top: 4px; } /* ============================== CTA band ============================== */ .cta-band { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--surface)); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 32px); text-align: center; } .cta-band h2 { margin-bottom: 10px; } .cta-band p { max-width: 540px; margin: 0 auto 22px; } /* phone: full-width stacked CTAs so nothing is a cramped tap target */ @media (max-width: 460px){ .cta-band .btn-row { flex-direction: column; align-items: stretch; } .cta-band .btn-row .btn { width: 100%; } } /* ============================== subject SEO pages ============================== */ .subj-list { display: flex; flex-wrap: wrap; gap: 10px; } .subj-list a { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; } .subj-list a:hover { border-color: var(--accent-2); color: var(--text); text-decoration: none; } .prose { max-width: 760px; } .prose p { color: var(--muted); font-size: 1.04rem; } .prose ul { color: var(--muted); padding-left: 20px; } .prose li { margin-bottom: 8px; } .crumbs { font-size: .85rem; color: var(--muted-2); margin-bottom: 18px; } .crumbs a { color: var(--muted); } /* play placeholder page */ .play-wrap { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 22px; } .play-card { max-width: 520px; } .spinner { width: 46px; height: 46px; margin: 0 auto 26px; border-radius: 50%; border: 4px solid var(--border-2); border-top-color: var(--accent); animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .spinner { animation: none; } html { scroll-behavior: auto; } .btn:hover, .app-card:hover, .appstore:hover { transform: none; } } /* ============================== footer ============================== */ .site-foot { border-top: 1px solid var(--border); margin-top: 40px; padding: clamp(32px, 7vw, 40px) 0 calc(48px + env(safe-area-inset-bottom)); color: var(--muted-2); font-size: .9rem; } .site-foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px 32px; align-items: start; } .site-foot .col h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 12px; } .site-foot a:not(.brand) { color: var(--muted-2); display: block; margin-bottom: 4px; min-height: 34px; line-height: 34px; } .site-foot a:hover { color: var(--text); } .site-foot .fine { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; } /* tablet: brand on its own row, two link columns under it */ @media (max-width: 720px){ .site-foot .wrap { grid-template-columns: 1fr 1fr; } .site-foot .col:first-child { grid-column: 1 / -1; } } /* phone: single column, generous tap spacing */ @media (max-width: 460px){ .site-foot .wrap { grid-template-columns: 1fr; } .site-foot .fine { flex-direction: column; gap: 10px; } }