/* MADE CX — White Paper Library Styled to the MADECX Design Standard (Culture Exchange Standard v3.2), light mode. Brutalist/terminal aesthetic: white canvas, 2px borders, sharp edges, Space Grotesk display, IBM Plex Mono labels, green used sparingly. */ :root { --black: #000000; --white: #ffffff; --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #e5e5e5; --gray-300: #d4d4d4; --gray-400: #a3a3a3; --gray-500: #737373; --gray-600: #525252; --gray-900: #171717; --green: #00c805; --green-dark: #00a804; --bg: var(--white); --bg-alt: var(--gray-100); --bg-tertiary: var(--gray-50); --text: var(--black); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --border: var(--gray-200); --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', var(--font-primary); --font-mono: 'IBM Plex Mono', 'Monaco', 'Courier New', monospace; --wrap: 1200px; } /* Dark theme — applied when (toggle in the header, persisted to localStorage 'madecx-theme'). Only the semantic tokens flip; the hero carousel and the left nav-drawer are intentionally dark in both modes. */ :root[data-theme="dark"] { --bg: #0a0a0a; --bg-alt: #161616; --bg-tertiary: #1c1c1c; --text: #ffffff; --text-secondary: #b3b3b3; --text-muted: #8a8a8a; --border: #2a2a2a; color-scheme: dark; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } img { max-width: 100%; height: auto; display: block; } body { font-family: var(--font-primary); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--green); color: var(--black); } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--bg); border-bottom: 2px solid var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: flex-start; gap: 16px; height: 64px; } /* Logo — canonical MADECX construction: Inter 900, solid "MADE", transparent "CX" with a 2.5px green stroke. (Design Standard §02 Brand & Logo.) */ .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .logo-text { display: flex; align-items: baseline; font-family: var(--font-primary); font-size: 22px; font-weight: 900; letter-spacing: -0.01em; line-height: 1; } .logo-made { color: var(--text); } .logo-cx { color: transparent; -webkit-text-stroke: 2.5px var(--green); margin-left: 8px; } /* Hamburger — opens the left navigation drawer (all viewports) */ .burger { display: flex; width: 42px; height: 42px; flex: 0 0 auto; margin-right: 14px; border: 2px solid var(--text); background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; } .burger span { display: block; width: 18px; height: 2px; background: var(--text); } .burger:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* Left navigation drawer + scrim */ .nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1400; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .nav-scrim.open { opacity: 1; visibility: visible; } .nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 84vw); background: var(--black); color: #fff; z-index: 1500; transform: translateX(-100%); transition: transform .32s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); } .nav-drawer.open { transform: translateX(0); } .nav-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 2px solid rgba(255,255,255,.14); flex: 0 0 auto; } .nav-drawer-top .logo-made { color: #fff; } .nav-drawer-close { width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .nav-drawer-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .nav-drawer-links { display: flex; flex-direction: column; padding: 10px 0 24px; } .nav-drawer-links a { padding: 15px 22px; color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; border-bottom: 1px solid rgba(255,255,255,.08); } .nav-drawer-links a:hover, .nav-drawer-links a:focus-visible { background: rgba(255,255,255,.07); outline: none; } .nav-drawer-links .drawer-cta { margin: 16px 22px 0; padding: 15px 18px; text-align: center; border-bottom: none; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: #fff; color: #000; } .nav-drawer-links .drawer-cta.ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); margin-top: 10px; } .nav-drawer-links .drawer-cta .arw { color: var(--green); } body.nav-open { overflow: hidden; } .header-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-link { font-family: var(--font-mono); color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .nav-link:hover { color: var(--text); border-bottom-color: var(--text); } .nav-cta { font-family: var(--font-mono); color: var(--bg); background: var(--text); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; margin-left: 10px; border: 2px solid var(--text); transition: opacity .2s; } .nav-cta:hover { opacity: .9; } /* Dark-mode toggle button (bordered square icon, matches the brutalist header) */ .theme-toggle { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--text); background: transparent; color: var(--text); cursor: pointer; padding: 0; transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--text); color: var(--bg); } .theme-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ic-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; } /* ── Hero carousel (clean full-image display of recent cards) ── */ .hero { background: var(--black); border-bottom: 2px solid var(--border); } .hero-slider { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 22px 40px 26px; } /* Caption sits OFF the image so it never clashes with baked-in card text. */ .hero-cap { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin-bottom: 16px; } .hero-cap .dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: heropulse 2s infinite; } @keyframes heropulse { 0%,100%{opacity:1} 50%{opacity:.35} } .hero-viewport { position: relative; width: 100%; aspect-ratio: 1200 / 630; overflow: hidden; border: 2px solid var(--gray-900); background: #0a0a0a; } .hero-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .hslide { flex: 0 0 100%; height: 100%; display: block; overflow: hidden; } .hslide img { width: 100%; height: 100%; object-fit: cover; /* aspect matches the container, so no crop */ object-position: center; display: block; } /* Prev / next — overlaid on the image edges */ .hnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border: 2px solid rgba(255,255,255,.55); background: rgba(0,0,0,.42); color: var(--white); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; } .hnav:hover { background: rgba(0,0,0,.72); border-color: var(--white); } .hnav:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .hprev { left: 14px; } .hnext { right: 14px; } /* Dots — below the image on the black hero, never over card art */ .hero-dots { display: flex; justify-content: center; gap: 9px; margin-top: 16px; } .hdot { width: 30px; height: 4px; border: none; background: rgba(255,255,255,.32); cursor: pointer; padding: 0; transition: background .2s; } .hdot:hover { background: rgba(255,255,255,.6); } .hdot.is-active { background: var(--green); } .hdot:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .hero-fallback { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.03em; color: var(--white); padding: 80px 0; } /* ── Sections ── */ .library, .newsletter { padding: 72px 0; border-bottom: 2px solid var(--border); } /* Wider container so the 4 tiles read larger. */ .library > .wrap { max-width: 1360px; } .section-label { font-family: var(--font-mono); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); margin-bottom: 28px; display: flex; align-items: center; gap: 12px; } .section-label::after { content: ""; flex: 1; height: 2px; background: var(--border); } /* ── Library: dataroom-style MADECX asset cards, grouped by category ── */ .lib-block { margin-bottom: 56px; } .lib-block:last-child { margin-bottom: 4px; } .gridtitle { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--black); padding-bottom: 14px; margin-bottom: 26px; } .gridtitle .lbl { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--black); } .gridtitle .lbl .ix { color: var(--green-dark); } .gt-right { display: flex; align-items: center; gap: 16px; } .gridtitle .mono { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .shelf-nav { display: flex; gap: 8px; } .shelf-nav[hidden] { display: none; } .shelf-arrow { width: 38px; height: 38px; border: 2px solid var(--border); background: var(--bg); color: var(--black); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .18s, color .18s, opacity .18s; } .shelf-arrow:hover { border-color: var(--black); } .shelf-arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .shelf-arrow.is-off { opacity: .3; pointer-events: none; } /* Horizontal shelf: 4 tiles visible, arrows scroll to reveal the rest. */ .shelf { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding-bottom: 4px; } .shelf::-webkit-scrollbar { display: none; } /* WebKit */ .shelf > .acard { flex: 0 0 calc((100% - 3 * 18px) / 4); scroll-snap-align: start; } .acard { border: 2px solid var(--border); background: var(--bg); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .18s, transform .18s; } .acard:hover { border-color: var(--green); transform: translateY(-2px); } .acard:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .athumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 2px solid var(--border); background: var(--bg-alt); display: block; } .athumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .3s ease; } .acard:hover .athumb { border-bottom-color: var(--green); } .acard:hover .athumb img { transform: scale(1.04); } /* Category label — bottom-left corner of the thumbnail */ .athumb .kind { position: absolute; left: 0; bottom: 0; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); background: var(--black); padding: 5px 10px; } .athumb--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-alt), var(--bg-tertiary)); } .athumb--ph .ph-mark { font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .abody { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; } .abody .ah { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: auto; } .abody .as { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .abody .as .go { color: var(--green-dark); } .acard:hover .abody .as .go { color: var(--green); } .empty { color: var(--text-muted); font-family: var(--font-mono); } .empty code { background: var(--bg-alt); border: 1px solid var(--border); padding: 2px 6px; } /* ── Newsletter ── */ .newsletter h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 12px; } .newsletter p { color: var(--text-secondary); max-width: 560px; margin-bottom: 24px; } .subscribe-cta { display: inline-block; margin-top: 24px; padding: 15px 28px; border: 2px solid var(--text); background: var(--text); color: var(--bg); font-family: var(--font-primary); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; transition: opacity .2s; } .subscribe-cta:hover { opacity: .9; } .subscribe-cta .cta-arrow { color: var(--green); } .form-status { flex-basis: 100%; margin-top: 10px; font-family: var(--font-mono); font-size: 0.8rem; min-height: 1.1em; } .form-status.ok { color: var(--green-dark); } .form-status.err { color: #d11; } /* ── Intro / GEO answer block ── */ .intro { padding: 60px 0; border-bottom: 2px solid var(--border); } .intro h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(32px, 5vw, 54px); letter-spacing: -0.03em; line-height: 1.04; margin: 14px 0 20px; max-width: 20ch; } .intro-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; color: var(--text-secondary); max-width: 68ch; } .intro-lead strong { color: var(--text); font-weight: 700; } .intro-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border: 2px solid var(--text); transition: opacity .2s, background .2s; } .btn-primary { background: var(--text); color: var(--bg); } .btn-primary:hover { opacity: .9; } .btn-ghost { background: transparent; color: var(--text); } .btn-ghost:hover { background: var(--bg-alt); } .btn-primary .cta-arrow, .btn-ghost .cta-arrow { color: var(--green); } /* ── FAQ ── */ .faq { padding: 60px 0; border-bottom: 2px solid var(--border); } .faq h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 22px; } .faq-list { display: flex; flex-direction: column; border-top: 2px solid var(--border); max-width: 900px; } .faq-item { border-bottom: 2px solid var(--border); } .faq-item summary { cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--text); font-size: 20px; flex: none; } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { padding: 0 0 22px; color: var(--text-secondary); max-width: 72ch; font-size: 15px; line-height: 1.7; } .faq-item a { color: var(--green-dark); font-weight: 700; } /* ── Footer ── */ .site-footer { padding: 32px 0; } .site-footer .wrap { display: block; } .foot-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-footer p { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0; } .site-disclosure { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; max-width: 92ch; } .disc-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .site-disclosure p { font-family: var(--font-primary); font-size: 12px; line-height: 1.65; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin: 0; } .site-disclosure code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); } .site-disclosure a { color: var(--text-secondary); } .footer-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border: 2px solid var(--text); background: var(--text); color: var(--bg); font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; transition: opacity .2s; } .footer-cta:hover { opacity: .9; } .footer-cta .cta-arrow { color: var(--green); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Responsive ── */ @media (max-width: 1180px) { .shelf > .acard { flex-basis: calc((100% - 2 * 18px) / 3); } /* 3 visible */ } @media (max-width: 860px) { .shelf > .acard { flex-basis: calc((100% - 18px) / 2); } /* 2 visible */ } @media (max-width: 768px) { .wrap { padding: 0 20px; } .header-nav { display: none; } .burger { display: flex; } /* hamburger reveals the left drawer */ .theme-toggle { margin-left: auto; } /* nav hidden — keep the toggle at the right */ .library, .newsletter { padding: 52px 0; } .hero-slider { padding: 18px 20px 22px; } .hnav { width: 38px; height: 38px; font-size: 16px; } .hprev { left: 8px; } .hnext { right: 8px; } .intro, .faq, .sec { padding: 44px 0; } .intro-cta, .btns { flex-direction: column; align-items: stretch; } .intro-cta a, .btn-primary, .btn-ghost { justify-content: center; } } @media (max-width: 520px) { .shelf > .acard { flex-basis: 84%; } /* 1 + peek */ .site-header .wrap { height: 58px; } .logo-text { font-size: 19px; } .intro h1 { font-size: clamp(28px, 8vw, 40px); } .site-disclosure { max-width: 100%; } .footer-cta { width: 100%; justify-content: center; } .foot-top { flex-direction: column; align-items: flex-start; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .hero-track { transition: none; } .shelf { scroll-behavior: auto; } .athumb img, .acard { transition: none; } .acard:hover { transform: none; } }