/* ====================================================================== STUART — pencil-on-paper design system. Strictly ink + paper. Fonts are loaded via in each page's . ====================================================================== */ :root { --ink: #181510; --ink-soft: #4a443a; --paper: #f4efe4; --paper-2: #efe8d8; --line: #1815100f; --maxw: 1180px; --display: 'Shantell Sans', 'Comic Sans MS', cursive; --hand: 'Caveat', cursive; --mono: 'Space Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* paper grain + faint pencil hatching, fixed so it reads as the sheet */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E"); background-size: 240px 240px; } .defs { position: absolute; width: 0; height: 0; overflow: hidden; } .wrap { width: min(var(--maxw), 92vw); margin-inline: auto; position: relative; z-index: 1; } /* ---- type ------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; margin: 0; } p { margin: 0 0 1em; } a { color: inherit; } .eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); } .mono { font-family: var(--mono); } .hand { font-family: var(--hand); font-weight: 600; font-size: 1.5em; line-height: 1.05; color: var(--ink); } /* ---- figure svg ------------------------------------------------------- */ .figbox { display: inline-block; line-height: 0; } .figbox .fig { width: 100%; height: auto; display: block; overflow: visible; } /* ---- sketch chrome (hand-drawn borders) ------------------------------- */ .sketch { border: 2.6px solid var(--ink); border-radius: 235px 18px 225px 15px / 16px 215px 20px 235px; background: var(--paper-2); } .sketch-alt { border-radius: 16px 230px 20px 220px / 220px 16px 235px 18px; } .btn { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--display); font-weight: 700; font-size: 18px; padding: 0.62em 1.4em; color: var(--ink); background: var(--paper); border: 2.6px solid var(--ink); border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px; text-decoration: none; cursor: pointer; transition: transform .14s ease, background .14s ease, color .14s ease; box-shadow: 3px 3px 0 var(--ink); } .btn:hover { transform: translate(-1px,-1px) rotate(-1deg); box-shadow: 5px 5px 0 var(--ink); } .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); } .btn--solid { background: var(--ink); color: var(--paper); } .btn--solid:hover { background: #000; } /* divider scribble */ .scribble { display: block; width: 100%; height: 18px; color: var(--ink); } /* ---- nav -------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(4px); border-bottom: 2.4px solid var(--ink); } .nav__inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; text-decoration: none; letter-spacing: -0.01em; } .brand .figbox { width: 26px; } .nav__links { margin-left: auto; display: flex; align-items: center; gap: 26px; } .nav__links a { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding-bottom: 3px; } .nav__links a:hover { box-shadow: inset 0 -2px 0 var(--ink); } .nav__links a.cta { padding: 8px 16px; border: 2.4px solid var(--ink); border-radius: 220px 12px 200px 12px / 12px 200px 12px 220px; } .nav__links a.cta:hover { background: var(--ink); color: var(--paper); box-shadow: none; } @media (max-width: 720px) { .nav__links .hide-sm { display: none; } } /* ---- footer ----------------------------------------------------------- */ .foot { border-top: 2.4px solid var(--ink); margin-top: 60px; padding: 34px 0 50px; position: relative; z-index: 1; } .foot__inner { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .foot .mono { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.06em; } .foot a:hover { box-shadow: inset 0 -2px 0 var(--ink); } /* ---- studio teaser (home) --------------------------------------------- */ .studio-teaser { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; padding: 28px 34px; background: var(--paper-2); } @media (max-width: 720px) { .studio-teaser { grid-template-columns: 1fr; text-align: center; } } .studio-teaser__figs { display: flex; align-items: flex-end; gap: 8px; } @media (max-width: 720px) { .studio-teaser__figs { justify-content: center; } } .studio-teaser__body .eyebrow { display: block; margin-bottom: 8px; } .studio-teaser__body h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; } .studio-teaser__body p { color: var(--ink-soft); margin: 0 0 18px; max-width: 560px; } /* reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; } html { scroll-behavior: auto; } }