/* ===================================================================== Model Citizens brand tokens and shared components (palette A "Cinema everywhere", chosen 28 Oct 2026). Load this FIRST on every site (Shop, Studio, Picture Day, Instant Creator, Business, partner pages, Passport), before any page stylesheet. Pages use these tokens instead of their own colours. The idea: every page opens on a dark stage (a face or a before/after, some movement), then flows into warm paper for reading and buying. One coral, used sparingly, means "act here". ===================================================================== */ :root { /* stage (dark) */ --mc-stage: #0A0B0F; --mc-stage-2: #16171D; --mc-stage-line: #262A36; --mc-stage-ink: #F2F0EB; --mc-stage-muted: #A3A7B4; /* paper (light) */ --mc-paper: #F7F2E9; --mc-card: #FFFDF8; --mc-tint: #F1EADD; --mc-line: #E6DCCB; --mc-ink: #16151B; --mc-muted: #5E5A55; /* the one coral: accents and big shapes on dark; buttons (bold white text); small coral text on paper */ --mc-accent: #FF5A3C; --mc-button: #E2472A; --mc-button-press: #E2472A; /* one coral: pressing darkens the same coral with a shade, not a new colour */ --mc-accent-text: #C73A22; /* keepsake gold, for "bestseller" and "gift" badges only */ --mc-gold: #C9A45C; --mc-good: #1F7A3D; /* type: Gloock headlines, Instrument Sans text, IBM Plex Mono labels. (Archivo retired.) */ --mc-serif: Gloock, Georgia, serif; --mc-sans: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mc-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --mc-radius: 18px; --mc-wrap: 1200px; --mc-gutter: clamp(16px, 4vw, 40px); } /* ---- buttons */ .mc-btn { appearance: none; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem/1 var(--mc-sans); padding: 15px 26px; border-radius: 999px; background: var(--mc-button); color: #fff; text-decoration: none; transition: background .15s, transform .15s; } .mc-btn:hover { background: var(--mc-button-press); box-shadow: inset 0 0 0 99px rgba(10,11,15,.1); } .mc-btn:active { transform: translateY(1px); } .mc-btn.ghost { background: transparent; color: currentColor; border-color: currentColor; } .mc-btn.small { padding: 10px 18px; font-size: .92rem; } /* ---- the stage hero: dark, eyebrow, Gloock headline with one coral italic word, two buttons, trust row, a face or before/after on the right. Markup:
…

Your pet, painted.

…

……
  • …
…image, .mc-wipe or video…
*/ .mc-stage { background: var(--mc-stage); color: var(--mc-stage-ink); position: relative; overflow: hidden; isolation: isolate; color-scheme: dark; } .mc-stage::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 140%; z-index: -1; background: radial-gradient(closest-side, rgba(255,90,60,.16), transparent 70%); pointer-events: none; } .mc-stage-in { max-width: var(--mc-wrap); margin: 0 auto; padding: clamp(36px, 7vw, 84px) var(--mc-gutter); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 64px); align-items: center; } @media (max-width: 820px) { .mc-stage-in { grid-template-columns: 1fr; } .mc-stage-art .mc-wipe { aspect-ratio: 1 / 1; } } .mc-stage-copy { display: grid; gap: 18px; justify-items: start; } .mc-stage h1 { font: 400 clamp(2.5rem, 6.4vw, 4.6rem)/1.02 var(--mc-serif); letter-spacing: -.012em; margin: 0; text-wrap: balance; } .mc-stage h1 em { color: var(--mc-accent); } .mc-eyebrow { font: 500 .74rem var(--mc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mc-accent); } .mc-lede { font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.55; color: var(--mc-stage-muted); max-width: 56ch; margin: 0; } .mc-paper .mc-lede { color: var(--mc-muted); } .mc-btns { display: flex; flex-wrap: wrap; gap: 12px; } .mc-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9rem; color: var(--mc-stage-muted); } .mc-trust li::before { content: "✓"; color: var(--mc-accent); margin-right: 6px; } .mc-stage-art { position: relative; } .mc-paper { background: var(--mc-paper); color: var(--mc-ink); } /* ---- motion kit (see /motion.js). Everything here is still without JavaScript and for reduced motion. */ /* 1. before/after wipe:
*/ .mc-wipe { position: relative; aspect-ratio: 4 / 5; border-radius: var(--mc-radius); overflow: hidden; background: var(--mc-stage-2); touch-action: pan-y; } .mc-wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mc-wipe .after { clip-path: inset(0 0 0 var(--cut, 50%)); } .mc-wipe::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.4); pointer-events: none; } .mc-wipe input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } .mc-wipe .tag { position: absolute; top: 12px; font: 500 .66rem var(--mc-mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(10,11,15,.7); color: #fff; padding: 5px 9px; border-radius: 999px; pointer-events: none; } .mc-wipe .tag.l { left: 12px; } .mc-wipe .tag.r { right: 12px; background: var(--mc-accent); } /* 2. marquee ticker:
…items, written twice…
*/ .mc-marquee { overflow: hidden; border-block: 1px solid var(--mc-stage-line); background: var(--mc-stage); color: var(--mc-stage-muted); font: 500 .74rem var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; } .mc-marquee-in { display: flex; gap: 48px; width: max-content; padding: 14px 0; animation: mc-marquee 40s linear infinite; } .mc-marquee:hover .mc-marquee-in { animation-play-state: paused; } @keyframes mc-marquee { to { transform: translateX(-50%); } } /* 3. card lift and tilt: add .mc-lift to any card */ .mc-lift { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; will-change: transform; } .mc-lift:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 24px 40px -26px rgba(22,21,27,.45); } /* 4. count-up numbers: $0 (motion.js fills it in) */ .mc-count { font-variant-numeric: tabular-nums; } /* reveal on scroll: add .mc-reveal; motion.js adds .in when it scrolls into view */ .mc-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .mc-reveal.in, .no-js .mc-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .mc-marquee-in { animation: none; } .mc-lift, .mc-lift:hover { transition: none; transform: none; } .mc-reveal { opacity: 1; transform: none; transition: none; } } /* ---- one header and one footer on every page (tools/site/chrome.py writes the markup). 31 Oct 2026, the studio restructure: the logo, For you · For brands · Storybooks · Guides, Sign in, one button. A few long pages add a quiet second row (.mc-sub). Phones: the main links open from the menu button, so only one row of links comes before the page. */ .mc-header { background: var(--mc-stage); color: var(--mc-stage-ink); border-bottom: 1px solid var(--mc-stage-line); position: sticky; top: 0; padding-top: env(safe-area-inset-top, 0px); z-index: 40; font-family: var(--mc-sans); } /* stays at the top on every page, phones included */ .mc-header-in { max-width: var(--mc-wrap); margin: 0 auto; padding: 0 var(--mc-gutter); min-height: 66px; display: flex; align-items: center; gap: 18px; position: relative; } .mc-lockup { display: inline-grid; text-decoration: none; color: inherit; flex: none; } .mc-lockup img { height: 32px; width: auto; display: block; } .mc-arm { display: none; } .mc-nav-t { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; } .mc-main { display: flex; align-items: center; gap: 26px; flex: 1; margin-left: 22px; min-width: 0; } .mc-main a, .mc-menu a { font: 600 .93rem/1 var(--mc-sans); color: var(--mc-stage-muted); text-decoration: none; white-space: nowrap; padding: 9px 0 7px; border-bottom: 2px solid transparent; } .mc-main a:hover, .mc-menu a:hover { color: var(--mc-stage-ink); } .mc-main a[aria-current="page"], .mc-menu a[aria-current="page"] { color: var(--mc-stage-ink); border-bottom-color: var(--mc-accent); } .mc-main .mc-signin { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .mc-signin svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .mc-nav { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; flex: none; } .mc-nav .mc-icon { position: relative; width: 38px; height: 38px; border: 1px solid var(--mc-stage-line); border-radius: 999px; display: grid; place-items: center; background: none; color: inherit; cursor: pointer; padding: 0; } .mc-nav .mc-icon svg { width: 17px; height: 17px; fill: none; stroke: var(--mc-stage-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .mc-nav .cart-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mc-button); color: #fff; font: 700 .68rem/18px var(--mc-sans); text-align: center; } .mc-cta { white-space: nowrap; } .mc-cta-s { display: none; } .mc-burger { display: none; } /* the quiet second row */ .mc-sub { border-top: 1px solid var(--mc-stage-line); background: #0E0F14; } .mc-menu { max-width: var(--mc-wrap); margin: 0 auto; padding: 0 var(--mc-gutter); display: flex; align-items: center; gap: 24px; overflow-x: auto; scrollbar-width: none; } .mc-menu::-webkit-scrollbar { display: none; } .mc-menu a { font-size: .84rem; font-weight: 500; padding: 11px 0 9px; } @media (max-width: 1000px) { .mc-main { gap: 20px; margin-left: 12px; } } /* phones and small tablets: logo, button, menu button; the main links drop down from the menu button */ @media (max-width: 900px) { .mc-header-in { min-height: 58px; gap: 10px; } .mc-nav { margin-left: auto; gap: 8px; } .mc-burger { display: grid; gap: 4px; width: 44px; height: 44px; flex: none; place-content: center; border: 1px solid var(--mc-stage-line); border-radius: 12px; cursor: pointer; } .mc-burger span { display: block; width: 17px; height: 1.6px; background: var(--mc-stage-ink); border-radius: 2px; transition: transform .15s, opacity .15s; } .mc-nav-t:checked ~ .mc-nav .mc-burger span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); } .mc-nav-t:checked ~ .mc-nav .mc-burger span:nth-child(2) { opacity: 0; } .mc-nav-t:checked ~ .mc-nav .mc-burger span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); } .mc-nav-t:focus-visible ~ .mc-nav .mc-burger { outline: 3px solid var(--mc-accent); outline-offset: 2px; } .mc-main { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--mc-stage); border-bottom: 1px solid var(--mc-stage-line); padding: 6px var(--mc-gutter) 18px; box-shadow: 0 30px 40px -20px rgba(0,0,0,.6); } .mc-nav-t:checked ~ .mc-main { display: flex; } .mc-main { z-index: 5; } .mc-header:has(.mc-nav-t:checked) .mc-sub { display: none; } .mc-main a { font: 400 1.5rem/1.2 var(--mc-serif); color: var(--mc-stage-ink); padding: 14px 0; border-bottom: 1px solid var(--mc-stage-line); } .mc-main a[aria-current="page"] { color: var(--mc-accent); border-bottom-color: var(--mc-stage-line); } .mc-main .mc-signin { margin: 6px 0 0; font: 600 1rem/1 var(--mc-sans); color: var(--mc-stage-muted); border-bottom: 0; } .mc-menu { gap: 20px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .mc-menu::after { content: ""; flex: none; width: 40px; height: 1px; } /* room at the end, so the last item can scroll clear of the fade */ } @media (max-width: 560px) { .mc-lockup img { height: 26px; } .mc-nav .mc-btn.small { padding: 9px 13px; font-size: .82rem; } .mc-nav .mc-icon { width: 36px; height: 36px; } } @media (max-width: 420px) { .mc-cta-l { display: none; } .mc-cta-s { display: inline; } } .mc-footer { background: var(--mc-stage); color: var(--mc-stage-muted); border-top: 1px solid var(--mc-stage-line); font: 400 .9rem/1.6 var(--mc-sans); } .mc-footer-in { max-width: var(--mc-wrap); margin: 0 auto; padding: 44px var(--mc-gutter) 36px; display: grid; gap: 30px; } .mc-foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } @media (max-width: 860px) { .mc-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mc-foot-cols div { display: grid; gap: 6px; align-content: start; } .mc-foot-h { font: 500 .66rem var(--mc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mc-accent); margin-bottom: 4px; } .mc-footer a { color: var(--mc-stage-muted); text-decoration: none; } .mc-footer a:hover { color: var(--mc-stage-ink); } .mc-footer a.mc-foot-h { color: var(--mc-accent); } .mc-footer a.mc-foot-h:hover { color: var(--mc-stage-ink); } .mc-foot-base { display: grid; gap: 6px; border-top: 1px solid var(--mc-stage-line); padding-top: 18px; font-size: .84rem; } .mc-foot-base b { color: var(--mc-stage-ink); font-weight: 600; } /* ---- Hollywood touches on every page (owner, 29 Oct: "glitz and glamour, without making it tacky"; first made for UGC Videos, where studio/studio-dark.css has its own copy). Three things, all quiet, all still for people who turn motion off: 1. a slow shimmer across the coral heading words on the dark stages (as on the Wayfounder site) 2. studio lighting on each page's opening stage: the coral glow drifts like a spotlight, with a warm key light and fine film grain 3. a fine champagne-gold edge, with a glint now and then, on the one box each page wants people to use ---- */ .mc-stage h1 em, .mc-stage h2 em, .mc-stage h1 mark.hl { background: linear-gradient(100deg, var(--mc-accent) 0%, var(--mc-accent) 40%, #FFD9CC 50%, var(--mc-accent) 60%, var(--mc-accent) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mc-sheen 5s ease-in-out infinite; } @keyframes mc-sheen { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } } main > .mc-stage:first-child::before, .pd-hero::before { background: radial-gradient(closest-side, rgba(255,90,60,.16), transparent 70%), radial-gradient(closest-side at 30% 40%, rgba(255,220,180,.10), transparent 70%); animation: mc-spot 16s ease-in-out infinite alternate; } .pd-hero { position: relative; isolation: isolate; } .pd-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } main > .mc-stage:first-child::after, .pd-hero::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes mc-spot { from { transform: translate(4%, -3%); } to { transform: translate(-14%, 6%); } } /* the gold edge: a 1px ring drawn over the box's own border, so it works on any background */ #joinForm.card, #apply .card, .pd-calc-box, body[data-page="picture-day"] .plan.main { position: relative; } #joinForm.card::after, #apply .card::after, .pd-calc-box::after, body[data-page="picture-day"] .plan.main::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(115deg, #5c4326 0%, #b8925a 30%, #f6e3b8 45%, #b8925a 60%, #5c4326 100%); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mc-foil 7s ease-in-out infinite; } @keyframes mc-foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .mc-stage h1 em, .mc-stage h2 em, .mc-stage h1 mark.hl { animation: none; background-position: 50% 0; } main > .mc-stage:first-child::before, .pd-hero::before, #joinForm.card::after, #apply .card::after, .pd-calc-box::after, body[data-page="picture-day"] .plan.main::after { animation: none; } } /* The shimmer paints the color inside each word's box, and italic letters lean past its right edge, so their tips were cut off ("Skip", "story."). A little room on each line, given back with a negative margin, keeps the spacing the same. */ .mc-stage h1 em, .mc-stage h2 em, .mc-stage h1 mark.hl, .mc-stage h2 mark.hl { padding-right: .14em; margin-right: -.14em; padding-left: .04em; margin-left: -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* "Made into something you can hold" (30 Oct): the printed gifts, shown as real objects. Used on /create/ and /business/. Markup:
.made-head + .made-grid of .made-card (first one .big) + .made-foot */ .made { display: grid; gap: 18px; } .made-head { display: grid; gap: 10px; max-width: 760px; } .made-head h2 em { color: var(--mc-accent-text); font-style: italic; padding-right: .14em; margin-right: -.14em; } .made-head p { margin: 0; color: var(--mc-muted); font-size: clamp(1.02rem, 1.8vw, 1.15rem); } .made-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px; } .made-card { position: relative; display: grid; grid-template-rows: auto 1fr; margin: 0; background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 18px; overflow: hidden; color: var(--mc-ink); text-decoration: none; min-width: 0; transition: transform .25s, box-shadow .25s; } .made-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(22,21,27,.55); } .made-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .made-card .mc-cap { display: grid; gap: 2px; padding: 12px 14px 14px; } .made-card .mc-cap b { font: 400 1.15rem/1.15 var(--mc-serif); } .made-card .mc-cap span { color: var(--mc-muted); font-size: .86rem; line-height: 1.4; } .made-card .mc-cap i { font-style: normal; font-weight: 600; color: var(--mc-ink); } .made-card .soon { position: absolute; top: 10px; left: 10px; background: var(--mc-ink); color: #fff; font: 500 .62rem/1 var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; } .made-card.big { grid-column: span 2; grid-row: span 2; } .made-card.big img { aspect-ratio: auto; height: 100%; min-height: 0; } .made-card.big { grid-template-rows: minmax(0, 1fr) auto; } .made-card.big .mc-cap b { font-size: 1.5rem; } .made-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: .92rem; color: var(--mc-muted); } .made-foot span { display: inline-flex; gap: 7px; align-items: center; } .made-foot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } @media (max-width: 900px) { .made-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .made-card.big { grid-row: auto; } .made-card.big img { aspect-ratio: 4 / 3; height: auto; } } @media (max-width: 480px) { .made-grid { gap: 10px; } .made-card .mc-cap { padding: 10px 11px 12px; } .made-card .mc-cap b { font-size: 1rem; } .made-card .mc-cap span { font-size: .8rem; } } /* the same for tails (y, g, p) below the last line */ .mc-stage h1 em, .mc-stage h2 em { padding-bottom: .12em; margin-bottom: -.12em; } /* The smallest phones (320 px, audit 4 Nov 2026): a slightly smaller logo so a longer short-label button ("Pick a story") and the 44 px menu button fit without the page scrolling sideways. */ @media (max-width: 359px) { .mc-lockup img { width: 118px; height: auto; } .mc-nav { gap: 6px; } } /* Images carry their real width and height (no jump while they load, audit 4 Nov 2026); this keeps their shape when a page scales them down. :where() has no weight, so any page rule that sets a height still wins. */ :where(img[width][height]) { height: auto; } /* Model Citizens Studio bar (the split, 6 Nov 2026): the Studio lockup on the dark bar */ .mc-studio .mc-lockup img { height: 40px; width: auto; }