/* ============ MARKETING SUITE ============ Every selector in this file starts with #caMarketing, and every @keyframes name starts with cm-. Nothing here can reach Sellers, Buyers or the shared chrome, and `node check-regression.js compare` fails if anything tries. Everything below the first rule is the approved prototype's own CSS, lifted rather than rewritten: every rule that applies to its Gallery home, its Your work view, each campaign's entry, Build it Yourself for each topic, every state of the intake (each kind of question, a validation error, the import review, the photo step, the review), Choose a design, the finished collection with all ten products in each of the three looks and each of their three layouts for each campaign topic, and Edit (both modes, the layout tray, the package picker, and all five pages of the buyer presentation in each look). It is in the prototype's source order, with #caMarketing put in front of each selector. That keeps the prototype's cascade intact, since every rule gains the same specificity. Its `main` is .mk-main here. The command that produced it is in port-tools.js's header. One change is made to every lifted rule: the designs' Georgia and Arial are set as Gelasio and Arimo, with Georgia and Arial behind them. They are free and measured to match, so the server can render downloads in the same type the agent previewed. Outline's heavy headlines, Arial Black on the Windows machine the prototype was approved on, are Archivo Black. Brendan, 2026-10-03; done by port-tools.js css, whose swapFonts() says how. Left behind on purpose: the prototype's own top bar (the real one is here), the SANDBOX label and brand switcher (struck 2026-09-23), the Recent work cards (no real data until phase 8), the sample-details shortcuts (struck 2026-10-01), and its view-transition rules, which animate the whole document; cade-marketing.js does the zoom inside this section instead. The few rules that are not the prototype's are at the very end, under "not from the prototype". */ /* The prototype's :root and body, scoped to this section. The two font names are the app's: the prototype self-hosts the same two faces as "Jakarta" and "Instrument", and index.html already loads them from Google Fonts. These custom properties shadow #cadeApp's --accent and --ink inside this section only, which is what the lifted rules below expect. */ #caMarketing{ --ink:#1d1b22; --muted:#797680; --purple:#79669b; --accent:#695184; --line:#e5e3e9; --wash:#f0edf5; --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --serif:'Instrument Serif',Georgia,serif; flex-direction:column; overflow-y:auto; background:#f7f7f9; color:var(--ink); font:14px/1.55 var(--sans); -webkit-font-smoothing:auto; } /* Start from where the prototype started: the browser's own defaults. Without this, older global rules in index.html reach in -- `header` paints a dark bar with a gradient line under the Start a Campaign heading, `label` sets the search box in small caps, `*` strips every default margin and padding -- and so does `#cadeApp button`. `revert` rolls each property back to the browser default, and every lifted rule below still wins over this, because each is at least as specific and comes later. SVG is left out. The browser counts an SVG's presentation attributes (fill, stroke, r, d) as author styles, so revert would erase the icons' drawing. :where() keeps the exclusion from adding specificity, which would otherwise let this beat the lifted `#caMarketing *` rule. */ #caMarketing :where(:not(svg, svg *)), #caMarketing :where(:not(svg, svg *))::before, #caMarketing :where(:not(svg, svg *))::after{ all:revert; } #caMarketing button{ all:revert; } /* The browser styles an element with contenteditable through the attribute, which counts as author style, so the revert above erases it the way it would erase an SVG's drawing. These are the three properties it sets; Edit on design needs them to wrap and edit as the prototype does. */ #caMarketing [contenteditable]{ overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-modify: read-write-plaintext-only; } /* Outline's heavy headlines are Archivo Black (see below). The one thing set inside them at a normal weight, Market Update's italic "in numbers.", was regular Arial italic in the prototype; Archivo Black has no such weight, so it gets Arimo, the stand-in for Arial everywhere else. */ #caMarketing .design-piece.theme-lilac h2 em{ font-family: Arimo, Arial, sans-serif; font-synthesis: initial; } /* The section is a flex column (every .ca-suite is), which shrank the sub-nav and centred the page on its content. The prototype's nav and main sit in a plain block, its body; .mk-page is that block. */ #caMarketing .mk-page{ flex:none; } /* Two prototype rules the generator drops with its shell, because they hang off its body and its bare main: an open campaign hides the sub-nav (body[data-pack=true] there, .mk-pack here), and focusing the page after the zoom draws no ring (main:focus). */ #caMarketing .mk-page.mk-pack .studio-nav{ display: none; } #caMarketing .mk-main:focus{ outline: none; } /* from the prototype's studio.css */ #caMarketing *{ box-sizing: border-box; } #caMarketing button, #caMarketing input, #caMarketing select, #caMarketing textarea{ font: inherit; } #caMarketing button{ border: 0px; background: none; color: inherit; cursor: pointer; } #caMarketing button:disabled{ opacity: 0.45; cursor: not-allowed; } #caMarketing a{ color: inherit; text-decoration: none; } #caMarketing button, #caMarketing a, #caMarketing input, #caMarketing select, #caMarketing textarea{ outline-offset: 4px; } #caMarketing button:focus-visible, #caMarketing a:focus-visible{ outline: 2px solid var(--purple); } #caMarketing h1, #caMarketing h2, #caMarketing h3, #caMarketing p{ margin: 0px; } #caMarketing h1{ font-size: 38px; line-height: 1.12; letter-spacing: -1.4px; font-weight: 700; } #caMarketing h2{ font-size: 21px; letter-spacing: -0.5px; font-weight: 700; } #caMarketing h3{ font-size: 16px; } #caMarketing p{ color: var(--muted); } #caMarketing .studio-nav{ height: 64px; padding: 0px 4.5%; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 38px; background: rgba(250, 250, 251, 0.91); backdrop-filter: blur(20px); position: sticky; top: 0px; z-index: 5; } #caMarketing .studio-nav > strong{ font-size: 18px; letter-spacing: -0.6px; } #caMarketing .studio-nav nav{ height: 100%; display: flex; gap: 24px; } #caMarketing .studio-nav nav button{ height: 100%; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; padding: 0px 2px; } #caMarketing .studio-nav nav button.selected{ color: var(--ink); border-color: var(--purple); font-weight: 700; } #caMarketing .mk-main{ max-width: 1480px; margin: 0px auto; padding: 38px 4.5% 55px; min-height: calc(-124px + 100vh); } #caMarketing .page-heading{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; } #caMarketing .primary, #caMarketing .secondary{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 11px; font-size: 13px; font-weight: 700; white-space: nowrap; } #caMarketing .primary{ background: var(--accent); color: white; box-shadow: rgba(97, 72, 122, 0.125) 0px 2px 4px; } #caMarketing .primary:hover{ background: rgb(89, 65, 116); } #caMarketing .secondary{ background: rgb(238, 237, 241); color: rgb(89, 84, 95); } #caMarketing .secondary:hover{ background: rgb(229, 224, 237); } #caMarketing .plain{ font-size: 12px; color: var(--accent); font-weight: 600; } #caMarketing .work-grid{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 21px; } #caMarketing .library-controls{ display: flex; align-items: center; gap: 20px; margin: 26px 0px; } #caMarketing .segmented{ display: inline-flex; padding: 3px; border-radius: 10px; background: rgb(234, 232, 238); gap: 2px; } #caMarketing .segmented button{ font-size: 12px; border-radius: 8px; padding: 7px 14px; color: rgb(116, 110, 124); } #caMarketing .segmented button.active{ background: white; box-shadow: rgba(0, 0, 0, 0.067) 0px 1px 5px; color: var(--ink); } #caMarketing .search{ margin-left: auto; position: relative; min-width: 215px; } #caMarketing .search input{ width: 100%; padding: 10px 12px 10px 34px; background: transparent; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; } #caMarketing .search svg{ position: absolute; left: 11px; top: 12px; color: rgb(155, 150, 162); } #caMarketing .library-grid{ row-gap: 30px; } #caMarketing .empty{ padding: 60px 20px; text-align: center; color: var(--muted); grid-column: 1 / -1; } #caMarketing .empty h2{ color: var(--ink); margin-bottom: 10px; } #caMarketing .back{ font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; } #caMarketing input[type="checkbox"]{ accent-color: var(--purple); } #caMarketing dialog{ border: 1px solid rgba(255, 255, 255, 0.533); border-radius: 23px; padding: 28px; width: min(520px, -32px + 100vw); color: var(--ink); box-shadow: rgba(32, 22, 44, 0.19) 0px 25px 90px; } #caMarketing dialog::backdrop{ background: rgba(26, 20, 40, 0.3); backdrop-filter: blur(9px); } #caMarketing .modal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } #caMarketing .modal-head h2{ font-size: 24px; letter-spacing: -0.7px; } #caMarketing .close{ height: 28px; width: 28px; background: rgb(238, 237, 241); border-radius: 50%; font-size: 19px; color: rgb(129, 121, 140); } #caMarketing .export-options{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #caMarketing .export-option{ border: 1px solid var(--line); border-radius: 13px; padding: 23px 15px; text-align: left; } #caMarketing .export-option:hover{ border-color: var(--purple); background: rgb(248, 245, 252); } #caMarketing .export-option strong{ display: block; font-size: 16px; margin-bottom: 5px; } #caMarketing .export-option span{ font-size: 11px; color: var(--muted); } #caMarketing #toast{ position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 15px); background: rgb(39, 35, 46); color: white; border-radius: 12px; padding: 12px 20px; font-size: 12px; opacity: 0; pointer-events: none; transition: 0.2s; z-index: 20; max-width: 90vw; } #caMarketing #toast.show{ opacity: 1; transform: translate(-50%, 0px); } #caMarketing svg{ vertical-align: middle; flex: 0 0 auto; } @media (max-width: 1000px){ #caMarketing .work-grid{ gap: 15px; } } @media (max-width: 730px){ #caMarketing .work-grid{ grid-template-columns: repeat(2, minmax(0px, 1fr)); } #caMarketing .studio-nav{ gap: 25px; } #caMarketing .library-controls{ flex-wrap: wrap; gap: 13px; } #caMarketing .search{ min-width: 0px; margin-left: 0px; flex: 1 1 0%; } } @media (max-width: 480px){ #caMarketing .studio-nav{ height: 57px; padding: 0px 18px; gap: 23px; } #caMarketing .studio-nav > strong{ font-size: 16px; } #caMarketing .studio-nav nav{ gap: 16px; } #caMarketing .studio-nav nav button{ font-size: 12px; } #caMarketing .mk-main{ padding: 28px 18px 35px; } #caMarketing .page-heading h1{ font-size: 31px; letter-spacing: -1px; } #caMarketing .page-heading{ align-items: center; } #caMarketing .work-grid{ gap: 17px 12px; } #caMarketing .primary, #caMarketing .secondary{ padding: 9px 13px; font-size: 11px; } #caMarketing .segmented button{ padding: 6px 12px; font-size: 11px; } #caMarketing .library-controls{ display: block; } #caMarketing .search{ margin-top: 13px; } #caMarketing .export-option{ padding: 20px 12px; } #caMarketing .export-option strong{ font-size: 14px; } #caMarketing .export-option span{ font-size: 10px; } } @media (prefers-reduced-motion: reduce){ #caMarketing *{ transition: none !important; } } /* from the prototype's concepts.css */ #caMarketing .overline{ font-size: 10px; letter-spacing: 1.7px; font-weight: 700; color: rgb(148, 129, 159); display: block; margin-bottom: 13px; } /* from the prototype's products.css */ #caMarketing .quiet-select select{ font: inherit; color: inherit; background: transparent; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(162, 145, 180); border-image: none; padding: 10px 22px 10px 0px; cursor: pointer; } #caMarketing .quiet-select select option{ color: rgb(48, 39, 55); background: rgb(255, 255, 255); } #caMarketing .pack-app{ max-width: 1320px; margin: auto; } #caMarketing .pack-heading{ display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; } #caMarketing .pack-heading h1{ font-size: 32px; letter-spacing: -1.2px; line-height: 1.15; max-width: 650px; } #caMarketing .pack-heading .primary{ flex: 0 0 auto; } #caMarketing .theme-gallery{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; } #caMarketing .theme-card{ text-align: left; padding: 0px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgb(255, 255, 255); transition: transform 0.2s, box-shadow 0.2s; } #caMarketing .theme-card:hover{ transform: translateY(-5px); box-shadow: rgba(34, 21, 44, 0.082) 0px 14px 28px; } #caMarketing .theme-scene{ height: 340px; background: rgb(232, 225, 238); position: relative; overflow: hidden; } #caMarketing .theme-scene > div:first-child{ position: absolute; top: 30px; left: 8%; width: 75%; transform: rotate(-6deg); box-shadow: rgba(24, 16, 34, 0.2) 0px 10px 30px; } #caMarketing .theme-scene > div:last-child{ position: absolute; bottom: 25px; right: 7%; width: 48%; transform: rotate(7deg); box-shadow: rgba(24, 16, 34, 0.2) 0px 10px 30px; } #caMarketing .theme-description{ padding: 23px; } #caMarketing .theme-description > span{ font-size: 8px; letter-spacing: 2px; color: rgb(146, 117, 157); } #caMarketing .theme-description h2{ font: 29px/1.15 var(--serif); margin: 8px 0px; color: rgb(45, 37, 51); } #caMarketing .pack-toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 20px 0px; } #caMarketing .quiet-select{ display: flex; align-items: center; gap: 15px; font-size: 12px; } #caMarketing .quiet-select > span{ font-size: 10px; color: rgb(148, 123, 166); } #caMarketing .pack-workspace{ display: grid; gap: 24px; align-items: start; } #caMarketing .brief-workspace{ grid-template-columns: 290px minmax(0px, 1fr); } #caMarketing .direct-workspace{ grid-template-columns: minmax(0px, 1fr) 240px; } #caMarketing .brief-panel, #caMarketing .direct-details{ padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: white; } #caMarketing .brief-panel h2{ font-size: 18px; } #caMarketing .pack-field{ display: block; margin: 17px 0px; } #caMarketing .pack-field > span{ display: block; font-size: 11px; margin-bottom: 7px; color: rgb(141, 118, 158); } #caMarketing .pack-field textarea, #caMarketing .pack-field input{ width: 100%; font: 13px/1.6 var(--sans); padding: 10px 11px; border: 1px solid rgb(219, 210, 225); border-radius: 7px; background: transparent; color: inherit; min-width: 0px; } #caMarketing .pack-field textarea{ min-height: 94px; resize: vertical; } #caMarketing .pack-field-row{ display: flex; gap: 10px; flex-wrap: wrap; } #caMarketing .pack-field-row .pack-field{ flex: 1 1 0%; min-width: 75px; } #caMarketing .pack-details{ border-top: 1px solid var(--line); padding-top: 15px; margin-top: 22px; font-size: 12px; } #caMarketing .pack-details summary, #caMarketing .direct-details > summary{ cursor: pointer; font-size: 12px; color: rgb(153, 128, 171); } #caMarketing .direct-details form{ margin-top: 22px; } #caMarketing .zone-label{ font-size: 10px; color: rgb(144, 124, 158); } #caMarketing .pack-preview{ border: 1px solid var(--line); border-radius: 15px; background: rgb(234, 230, 239); padding: 20px; min-width: 0px; } #caMarketing .preview-bar{ display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 11px; color: rgb(124, 104, 141); margin-bottom: 22px; } #caMarketing .preview-bar small{ display: block; font-size: 9px; margin-top: 4px; opacity: 0.7; } #caMarketing .preview-bar button{ font-size: 10px; } #caMarketing .piece-stage{ max-width: 500px; margin: auto; box-shadow: rgba(33, 24, 42, 0.082) 0px 8px 25px; } #caMarketing .piece-stage:has(.size-portrait){ max-width: 400px; } #caMarketing .piece-strip{ display: flex; gap: 14px; overflow-x: auto; padding: 28px 2px 12px; } #caMarketing .piece-strip > button{ flex: 0 0 auto; width: 100px; text-align: center; font-size: 10px; color: inherit; padding: 5px; } #caMarketing .piece-mini{ height: 103px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; opacity: 0.65; transition: opacity 0.2s; } #caMarketing .piece-mini > .piece{ width: 88px; } #caMarketing .piece-mini > .size-portrait{ width: 72px; } #caMarketing .piece-mini > .size-story{ width: 56px; } #caMarketing .piece-strip .selected .piece-mini{ outline: rgb(160, 123, 183) solid 2px; outline-offset: 6px; border-radius: 2px; opacity: 1; } #caMarketing .piece-add > span:first-child{ height: 100px; display: grid; place-items: center; font-size: 30px; border: 1px dashed rgb(187, 166, 202); border-radius: 5px; margin-bottom: 10px; } #caMarketing .layout-tray{ display: flex; gap: 16px; justify-content: center; padding: 4px 0px 25px; } #caMarketing .layout-tray button{ width: 100px; font-size: 10px; text-align: center; color: inherit; } #caMarketing .layout-tray button > div{ height: 110px; overflow: hidden; margin-bottom: 7px; border: 2px solid transparent; padding: 4px; } #caMarketing .layout-tray button[aria-pressed="true"] > div{ border-color: rgb(162, 124, 187); border-radius: 4px; } #caMarketing .package-picker{ padding: 24px; border: 1px solid rgb(182, 151, 203); border-radius: 15px; margin: 20px 0px; background: rgb(244, 239, 248); } #caMarketing .package-picker h2{ font-size: 20px; } #caMarketing .package-picker > div:nth-child(2){ display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 22px; } #caMarketing .package-picker label{ display: flex; align-items: center; gap: 10px; font-size: 12px; cursor: pointer; } #caMarketing .package-picker small{ display: block; font-size: 9px; color: rgb(155, 132, 172); margin-top: 4px; } #caMarketing .collection-review{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 32px 24px; } #caMarketing .collection-review .piece{ width: 100%; max-width: 250px; } #caMarketing .collection-review .size-story{ max-width: 135px; } #caMarketing .collection-review .size-portrait{ max-width: 193px; } #caMarketing .collection-review strong{ font-size: 12px; } #caMarketing .collection-review small{ display: block; font-size: 9px; margin-top: 4px; color: rgb(151, 132, 159); } #caMarketing .pack-work-card{ text-align: left; min-width: 0px; } #caMarketing .pack-work-thumb{ height: 210px; background: rgb(232, 225, 236); padding: 17px; overflow: hidden; border-radius: 10px; } #caMarketing .pack-work-thumb > .piece{ max-width: 175px; margin: auto; } #caMarketing .pack-work-card > strong{ font-size: 12px; display: block; margin-top: 13px; } #caMarketing .pack-work-card > small{ display: block; font-size: 10px; color: rgb(154, 128, 169); margin-top: 5px; } #caMarketing .piece{ container-type: inline-size; position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 1 / 1; background: rgb(247, 242, 233); color: rgb(44, 56, 46); overflow: hidden; isolation: isolate; font-family: Arimo, Arial, sans-serif; } #caMarketing .piece *{ box-sizing: border-box; } #caMarketing .piece.size-story{ aspect-ratio: 9 / 16; } #caMarketing .piece.size-portrait{ aspect-ratio: 8.5 / 11; } #caMarketing .piece-brand{ display: flex; justify-content: space-between; font-size: 2.1cqw; letter-spacing: 0.17em; padding: 6% 7%; font-weight: 700; z-index: 2; } #caMarketing .piece-brand > span{ font-size: 1.6cqw; align-self: center; } #caMarketing .piece-photo{ height: 43%; position: relative; overflow: hidden; flex: 0 0 auto; margin: 0px 7%; } #caMarketing .piece-photo img{ width: 100%; height: 100%; object-fit: cover; } #caMarketing .piece-content{ padding: 6% 7%; flex: 1 1 0%; z-index: 2; min-height: 0px; } #caMarketing .piece-label{ display: block; font-size: 1.8cqw; letter-spacing: 0.15em; font-weight: 700; margin-bottom: 3%; } #caMarketing .piece h2{ font: 9.4cqw / 1 Gelasio, Georgia, serif; letter-spacing: -0.04em; margin: 0px 0px 5%; overflow-wrap: anywhere; } #caMarketing .piece-address{ font-size: 3cqw; font-weight: 600; line-height: 1.4; } #caMarketing .piece small{ display: block; font-size: 2.2cqw; font-weight: 400; line-height: 1.5; } #caMarketing .piece-date{ border-top: 1px solid; margin-top: 4%; padding-top: 4%; font-size: 2.7cqw; line-height: 1.5; } #caMarketing .piece-date small{ font-size: 1.7cqw; opacity: 0.7; } #caMarketing .piece-footer{ display: flex; justify-content: space-between; gap: 6%; padding: 3% 7% 5%; font-size: 1.9cqw; z-index: 2; } #caMarketing .piece-footer > span{ overflow-wrap: anywhere; max-width: 55%; } #caMarketing .piece p{ font-size: 2.6cqw; line-height: 1.5; margin: 4% 0px; } #caMarketing .piece-stats{ font: 5cqw Gelasio, Georgia, serif; margin-top: 5%; padding-top: 5%; border-top: 1px solid; } #caMarketing .piece-stats small{ margin-top: 3%; } #caMarketing .piece [contenteditable]{ outline: rgba(152, 117, 186, 0.5) dashed 1px; outline-offset: 4px; cursor: text; min-width: 25px; } #caMarketing .piece [contenteditable]:focus{ outline: rgb(181, 149, 208) solid 2px; background: rgba(181, 149, 208, 0.133); } #caMarketing .size-story .piece-photo{ height: 46%; } #caMarketing .size-story h2{ font-size: 13cqw; } #caMarketing .size-story .piece-content{ padding-top: 10%; } #caMarketing .size-story .piece-date{ margin-top: 9%; } #caMarketing .size-story .piece-address{ font-size: 4cqw; } #caMarketing .size-story .piece-footer{ font-size: 2.3cqw; } #caMarketing .product-facts .piece-photo{ height: 32%; } #caMarketing .product-facts .piece-content{ padding-top: 5%; } #caMarketing .product-facts h2{ font-size: 7.5cqw; } #caMarketing .product-facts .piece-date{ font-size: 2.3cqw; } #caMarketing .product-welcome h2{ font-size: 13cqw; } #caMarketing .product-welcome .piece-photo{ height: 33%; } #caMarketing .product-welcome .piece-date{ border: 0px; padding-top: 0px; } #caMarketing .product-signin .piece-content{ padding-top: 10%; } #caMarketing .product-signin h2{ font-size: 10cqw; } #caMarketing .product-signin .piece-date{ border: 0px; padding-top: 0px; } #caMarketing .signin-rows{ margin: 8% 0px 6%; } #caMarketing .signin-rows > div{ display: flex; justify-content: space-between; padding: 4% 0px; font-size: 2.3cqw; border-bottom: 1px solid rgb(165, 170, 165); } #caMarketing .signin-rows > div:first-child{ font-weight: bold; } #caMarketing .piece .consent-note{ font-size: 1.8cqw; max-width: 90%; } #caMarketing .piece.layout-1 .piece-photo{ position: absolute; inset: 0px; margin: 0px; height: 100%; z-index: 0; } #caMarketing .piece.layout-1:not(.product-signin)::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(16, 31, 35, 0.2), rgba(16, 31, 35, 0.067) 25%, rgba(16, 31, 35, 0.92)); z-index: 1; } #caMarketing .piece.layout-1:not(.product-signin){ color: rgb(255, 255, 255); } #caMarketing .piece.layout-1:not(.product-signin) .piece-content{ margin-top: auto; flex: 0 0 auto; padding-top: 33%; } #caMarketing .piece.layout-1 h2{ font-size: 12cqw; max-width: 90%; } #caMarketing .piece.layout-1.product-facts .piece-content{ padding-top: 15%; } #caMarketing .piece.layout-1.product-signin{ background: rgb(255, 255, 255); } #caMarketing .piece.layout-1.product-signin .piece-content{ border: 1px solid; margin: 0px 7% 5%; padding: 6%; } #caMarketing .piece.layout-2 .piece-brand{ padding-bottom: 4%; } #caMarketing .piece.layout-2 .piece-photo{ height: 32%; margin: 0px 7%; border-radius: 50% 50% 0px 0px; } #caMarketing .piece.layout-2 .piece-content{ text-align: center; padding-top: 5%; } #caMarketing .piece.layout-2 h2{ font-size: 10cqw; } #caMarketing .piece.layout-2 .piece-date{ border-top: 0px; } #caMarketing .piece.layout-2 .piece-footer{ border-top: 1px solid; margin: 0px 7%; padding-left: 0px; padding-right: 0px; } #caMarketing .piece.layout-2.product-signin .piece-content{ text-align: left; } #caMarketing .piece.layout-2.product-signin h2{ font-style: italic; } #caMarketing .piece.theme-lilac{ background: rgb(217, 198, 240); color: rgb(53, 33, 71); } #caMarketing .piece.theme-lilac h2{ font-family: "Archivo Black", Arimo, Arial, sans-serif; font-weight: 800; letter-spacing: -0.07em; font-synthesis: none; } #caMarketing .piece.theme-lilac .piece-photo{ margin: 0px; height: 42%; } #caMarketing .piece.theme-lilac .piece-brand{ background: rgb(53, 33, 71); color: rgb(234, 220, 249); } #caMarketing .piece.theme-lilac.layout-1 .piece-photo{ inset: 0px 0px 0px 47%; height: 100%; width: 53%; } #caMarketing .piece.theme-lilac.layout-1:not(.product-signin){ color: rgb(53, 33, 71); } #caMarketing .piece.theme-lilac.layout-1:not(.product-signin)::after{ background: linear-gradient(90deg, rgb(217, 198, 240) 44%, rgba(217, 198, 240, 0) 82%); } #caMarketing .piece.theme-lilac.layout-1 .piece-content{ padding-top: 20%; width: 88%; } #caMarketing .piece.theme-lilac.layout-1 .piece-date{ max-width: 70%; } #caMarketing .piece.theme-lilac.layout-1 .piece-footer{ background: rgb(217, 198, 240); } #caMarketing .piece.theme-lilac.layout-2{ background: rgb(241, 233, 250); } #caMarketing .piece.theme-lilac.layout-2 .piece-photo{ margin: 6% auto 0px; width: 55%; height: 35%; border-radius: 50%; } #caMarketing .piece.theme-lilac.layout-2 .piece-label{ color: rgb(139, 97, 172); } #caMarketing .piece.theme-ink{ background: rgb(25, 29, 33); color: rgb(241, 238, 231); } #caMarketing .piece.theme-ink h2{ font-family: Gelasio, Georgia, serif; font-style: italic; } #caMarketing .piece.theme-ink .piece-photo{ filter: grayscale(1); margin: 0px; height: 40%; } #caMarketing .piece.theme-ink .piece-label{ border-left: 3px solid rgb(190, 167, 133); padding-left: 4%; } #caMarketing .piece.theme-ink .piece-date{ color: rgb(190, 167, 133); } #caMarketing .piece.theme-ink.layout-1:not(.product-signin)::after{ background: linear-gradient(rgba(25, 29, 33, 0.533), rgba(25, 29, 33, 0.067), rgb(25, 29, 33)); } #caMarketing .piece.theme-ink.layout-1 .piece-photo{ height: 100%; filter: grayscale(1); } #caMarketing .piece.theme-ink.layout-2{ background: rgb(244, 242, 236); color: rgb(25, 29, 33); } #caMarketing .piece.theme-ink.layout-2 .piece-photo{ width: 65%; height: 35%; margin: auto; border-radius: 0px; border: 7px solid rgb(25, 29, 33); } #caMarketing .piece.theme-ink.product-signin{ background: rgb(244, 242, 236); color: rgb(25, 29, 33); } #caMarketing .piece.theme-lilac.product-signin .piece-brand{ margin-bottom: 5%; } #caMarketing .piece-mini .piece, #caMarketing .layout-tray .piece, #caMarketing .theme-scene .piece{ pointer-events: none; } #caMarketing .pack-app button:focus-visible, #caMarketing .pack-app select:focus-visible{ outline: rgb(177, 138, 205) solid 2px; outline-offset: 4px; } @media (max-width: 1150px){ #caMarketing .theme-gallery{ gap: 12px; } #caMarketing .theme-scene{ height: 265px; } #caMarketing .theme-description{ padding: 17px; } #caMarketing .theme-description h2{ font-size: 25px; } #caMarketing .brief-workspace{ grid-template-columns: 240px minmax(0px, 1fr); } #caMarketing .direct-workspace{ grid-template-columns: 1fr; } #caMarketing .direct-details{ padding: 17px; } #caMarketing .direct-details form{ display: grid; grid-template-columns: 1fr 1fr; gap: 0px 20px; } #caMarketing .collection-review{ grid-template-columns: 1fr 1fr; } #caMarketing .pack-heading h1{ font-size: 28px; } #caMarketing .pack-heading{ align-items: flex-start; } #caMarketing .pack-heading > .primary{ margin-top: 25px; } #caMarketing .pack-field-row .pack-field{ min-width: 90px; } #caMarketing .pack-heading .primary{ font-size: 11px; } #caMarketing .piece-stage{ max-width: 440px; } } @media (max-width: 760px){ #caMarketing .theme-gallery{ grid-template-columns: 1fr; } #caMarketing .theme-card{ display: grid; grid-template-columns: 1fr 1fr; } #caMarketing .theme-scene{ height: 240px; } #caMarketing .theme-description{ align-self: center; } #caMarketing .brief-workspace{ grid-template-columns: 1fr; } #caMarketing .brief-panel{ order: 2; } #caMarketing .pack-heading{ display: block; } #caMarketing .pack-heading > .primary{ margin-top: 18px; } #caMarketing .package-picker > div:nth-child(2){ grid-template-columns: 1fr 1fr; } #caMarketing .collection-review .size-story{ max-width: 95px; } #caMarketing .collection-review .size-portrait{ max-width: 148px; } #caMarketing .pack-heading h1{ font-size: 27px; } #caMarketing .quiet-select{ gap: 8px; } #caMarketing .quiet-select select{ max-width: 180px; font-size: 11px; } #caMarketing .direct-details form{ display: block; } #caMarketing .preview-bar{ flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce){ #caMarketing .theme-card{ transition: none; } } #caMarketing .collection-review .piece small{ font-size: 2.2cqw; margin-top: 0px; color: inherit; } #caMarketing .collection-review .piece-date small{ font-size: 1.7cqw; } #caMarketing .collection-review .piece .consent-note{ font-size: 1.8cqw; } #caMarketing .piece:not(.size-story) .piece-photo{ height: 33%; } #caMarketing .piece .piece-brand{ padding-top: 5%; padding-bottom: 5%; } #caMarketing .piece .piece-content{ padding-top: 4%; padding-bottom: 4%; } #caMarketing .piece h2{ margin-bottom: 3%; } #caMarketing .piece.headline-medium h2{ font-size: 7.8cqw; } #caMarketing .piece.layout-1:not(.product-signin) .piece-photo{ height: 100%; } #caMarketing .piece.layout-1:not(.product-signin) .piece-content{ padding-top: 8%; } #caMarketing .piece.layout-1.headline-medium h2{ font-size: 8.8cqw; } #caMarketing .piece.product-welcome h2{ font-size: 11cqw; } #caMarketing .piece.product-facts .piece-photo{ height: 27%; } #caMarketing .piece.product-facts .piece-content{ padding-top: 3%; } #caMarketing .piece.product-facts h2{ font-size: 7cqw; } #caMarketing .piece.theme-lilac.layout-2 .piece-photo{ height: 30%; } #caMarketing .piece.product-signin h2{ font-size: 9cqw; } #caMarketing .piece.product-signin .piece-content{ padding-top: 6%; } #caMarketing .piece.product-signin .signin-rows{ margin-top: 5%; } #caMarketing .piece.product-signin .signin-rows > div{ padding: 3.5% 0px; } #caMarketing .piece.layout-1 .piece-footer{ margin-top: auto; } #caMarketing .piece.product-signin .signin-rows > div{ padding: 2.8% 0px; min-height: 3.2cqw; } #caMarketing .piece.product-signin .signin-rows{ margin: 4% 0px; } #caMarketing .piece.product-signin .piece-content{ padding-top: 4%; } #caMarketing .pack-field-row .pack-field:has(input[type="date"]){ flex-basis: 100%; } /* from the prototype's intake.css */ #caMarketing .intake-app{ max-width: 840px; margin: 12px auto 60px; } #caMarketing .intake-heading{ margin: 32px 0px; } #caMarketing .intake-heading .overline{ font-size: 10px; letter-spacing: 2px; color: rgb(151, 119, 172); } #caMarketing .intake-heading h1{ font: 46px/1.08 var(--serif); letter-spacing: -0.7px; color: var(--ink); margin: 16px 0px; } #caMarketing .intake-question{ max-width: 560px; margin: 30px auto 0px; padding: 32px; background: white; border: 1px solid rgb(227, 219, 233); border-radius: 18px; } #caMarketing .intake-fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 0px 20px; } #caMarketing .intake-fields .pack-field:has(textarea), #caMarketing .intake-fields .pack-field:has(input[type="date"]){ grid-column: 1 / -1; } #caMarketing .intake-question .intake-fields:has(.pack-field:only-child){ grid-template-columns: 1fr; } #caMarketing .intake-fields .pack-field{ margin: 12px 0px; } #caMarketing .intake-fields .pack-field > span{ font-size: 12px; } #caMarketing .intake-fields textarea, #caMarketing .intake-fields .pack-field input{ font-size: 15px; padding: 13px; } #caMarketing .pack-field select{ width: 100%; border: 1px solid rgb(217, 205, 226); border-radius: 7px; padding: 12px; font: 13px var(--sans); background: transparent; color: inherit; } #caMarketing .pack-field select option{ color: rgb(52, 43, 60); background: white; } #caMarketing .intake-progress{ display: flex; justify-content: space-between; border-bottom: 1px solid rgb(223, 213, 231); padding: 20px 0px; font-size: 9px; letter-spacing: 1.5px; color: rgb(161, 139, 172); } #caMarketing .intake-progress + .intake-heading{ text-align: center; margin-top: 40px; } #caMarketing .intake-actions{ display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgb(231, 223, 237); } #caMarketing .intake-actions .plain{ font-size: 12px; } #caMarketing .import-credit{ font-size: 11px; text-align: center; padding: 12px; border-radius: 8px; background: rgb(239, 232, 245); color: rgb(128, 98, 145); margin: 0px auto; max-width: 560px; } #caMarketing .intake-error{ font-size: 12px; color: rgb(172, 76, 102); line-height: 1.6; margin: 18px 0px; } #caMarketing .intake-error:empty{ display: none; } #caMarketing .import-review{ background: white; padding: 30px; border: 1px solid rgb(227, 219, 233); border-radius: 15px; } #caMarketing .import-values{ margin: 20px 0px; display: grid; grid-template-columns: 1fr 1fr; gap: 0px 24px; } #caMarketing .import-values > div{ padding: 14px 0px; border-bottom: 1px solid rgb(237, 231, 240); } #caMarketing .import-values dt{ font-size: 10px; color: rgb(155, 130, 170); margin-bottom: 6px; } #caMarketing .import-values dd{ font-size: 13px; line-height: 1.6; margin: 0px; overflow-wrap: anywhere; } #caMarketing .import-warning{ font-size: 11px; color: rgb(165, 111, 53); margin: 15px 0px; } #caMarketing .photo-choice{ display: flex; align-items: center; flex-direction: column; gap: 24px; } #caMarketing .photo-choice img{ width: 100%; max-height: 280px; object-fit: cover; border-radius: 8px; } #caMarketing .upload-photo{ position: relative; border: 1px solid rgb(179, 149, 196); border-radius: 8px; padding: 13px 24px; font-size: 13px; cursor: pointer; overflow: hidden; } #caMarketing .upload-photo input{ position: absolute; inset: 0px; opacity: 0; width: 100%; cursor: pointer; } #caMarketing .intake-summary{ display: grid; grid-template-columns: 1fr 220px; gap: 32px; } #caMarketing .intake-summary section{ border-bottom: 1px solid rgb(229, 220, 233); padding: 20px 0px; } /* Review details is a white card like the questions, with the same bordered fields, so its fields do not sit bare on the page's grey. */ #caMarketing .intake-summary > div:first-child{ background: white; border: 1px solid rgb(227, 219, 233); border-radius: 18px; padding: 4px 32px 24px; box-shadow: rgba(71, 52, 82, 0.02) 0px 15px 40px; } #caMarketing .intake-summary section:last-of-type{ border-bottom: 0px; } #caMarketing .intake-summary h2{ font-size: 17px; } #caMarketing .intake-summary aside{ align-self: start; padding: 16px; background: white; border: 1px solid rgb(227, 219, 233); border-radius: 18px; box-shadow: rgba(71, 52, 82, 0.02) 0px 15px 40px; } #caMarketing .intake-summary aside img{ display: block; width: 100%; border-radius: 10px; } #caMarketing .collection-review > article > div{ height: 310px; padding: 25px; background: rgb(233, 227, 238); display: flex; align-items: center; justify-content: center; border-radius: 9px; margin-bottom: 15px; overflow: hidden; } #caMarketing .collection-review > article > strong{ font-size: 12px; } #caMarketing .collection-review > article > small{ display: block; font-size: 9px; margin-top: 4px; color: rgb(151, 132, 159); } /* The finished page's way back, and through the designs. Not in the prototype. */ #caMarketing .look-bar{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: -12px 0px 28px; padding: 10px 0px; border-top: 1px solid rgb(231, 223, 237); border-bottom: 1px solid rgb(231, 223, 237); } #caMarketing .look-cycle{ display: inline-flex; align-items: center; gap: 14px; font-size: 12px; color: rgb(128, 108, 142); } #caMarketing .look-cycle strong{ color: var(--ink); font-weight: 600; margin-right: 4px; } #caMarketing .look-cycle button{ width: 34px; height: 34px; border: 1px solid rgb(217, 205, 226); border-radius: 50%; background: white; color: var(--accent); font-size: 19px; line-height: 1; padding-bottom: 2px; } #caMarketing .look-cycle button:hover{ background: rgb(243, 236, 249); } #caMarketing .look-cycle button:focus-visible{ outline: rgb(171, 133, 198) solid 3px; outline-offset: 2px; } #caMarketing .finished-foot{ display: flex; justify-content: space-between; align-items: center; margin-top: 35px; font-size: 10px; color: rgb(154, 133, 166); } #caMarketing .finished-foot .plain{ font-size: 11px; } #caMarketing .edit-mode{ display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgb(226, 214, 234); padding-bottom: 15px; margin-bottom: 25px; } #caMarketing .edit-mode > span{ font-size: 9px; letter-spacing: 1px; color: rgb(161, 138, 175); } #caMarketing .edit-mode button{ font-size: 11px; padding: 8px 12px; border-radius: 6px; color: rgb(148, 112, 167); } #caMarketing .edit-mode button[aria-pressed="true"]{ background: rgb(237, 228, 245); color: rgb(116, 80, 135); } @media (max-width: 700px){ #caMarketing .intake-heading h1{ font-size: 36px; } #caMarketing .intake-question{ padding: 23px; } #caMarketing .intake-summary{ grid-template-columns: 1fr; } #caMarketing .intake-summary aside{ order: -1; max-width: 220px; } #caMarketing .intake-fields{ gap: 0px 12px; } #caMarketing .import-values{ grid-template-columns: 1fr; } #caMarketing .finished-foot{ align-items: flex-start; flex-direction: column; gap: 18px; } #caMarketing .collection-review > article > div{ height: 230px; padding: 15px; } #caMarketing .intake-actions .primary{ max-width: 230px; } #caMarketing .intake-question .intake-fields{ grid-template-columns: 1fr; } } /* from the prototype's marketing.css */ #caMarketing .mk-main{ max-width: 1340px; margin: auto; padding: 50px 48px 80px; } #caMarketing .studio-nav{ border-bottom: 1px solid rgb(234, 230, 239); } #caMarketing .studio-nav > strong{ font-size: 17px; } #caMarketing .marketing-home{ max-width: 1210px; margin: auto; } #caMarketing .marketing-heading{ display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 10px 0px 36px; } #caMarketing .marketing-heading h1{ font-size: 42px; line-height: 1.1; font-weight: 600; letter-spacing: -1.8px; margin: 0px; } #caMarketing .build-button{ font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 22px; border: 1px solid rgb(217, 204, 229); border-radius: 30px; padding: 13px 20px; background: rgba(255, 255, 255, 0.533); color: rgb(115, 89, 139); } #caMarketing .build-button:hover{ background: rgb(236, 227, 244); } #caMarketing .build-button > span{ font-size: 20px; font-weight: 400; } #caMarketing .campaign-gallery{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 25px; } #caMarketing .campaign-tile{ display: block; position: relative; padding: 0px; text-align: left; background: white; border-radius: 20px; overflow: hidden; border: 1px solid rgb(237, 232, 241); transition: transform 0.2s, box-shadow 0.2s; min-width: 0px; } #caMarketing .campaign-tile:hover{ transform: translateY(-5px); box-shadow: rgba(81, 53, 103, 0.07) 0px 18px 35px; } #caMarketing .campaign-openhouse{ grid-column: span 2; } #caMarketing .campaign-visual{ position: relative; height: 325px; background: rgb(236, 229, 242); overflow: hidden; } #caMarketing .campaign-sheet{ position: absolute; width: 62%; top: 45px; left: 6%; transform: rotate(-7deg); box-shadow: rgba(56, 40, 70, 0.137) 0px 20px 35px; pointer-events: none; } #caMarketing .campaign-sheet.secondary-sheet{ width: 37%; top: 83px; left: 58%; transform: rotate(9deg); } #caMarketing .campaign-openhouse .campaign-sheet{ width: 48%; top: 38px; left: 8%; } #caMarketing .campaign-openhouse .secondary-sheet{ width: 28%; left: 61%; top: 30px; } #caMarketing .campaign-identity .campaign-visual{ background: radial-gradient(at 60% 20%, rgb(238, 230, 245), rgb(207, 192, 221)); } #caMarketing .campaign-identity .campaign-sheet{ width: 66%; left: 8%; top: 32px; } #caMarketing .campaign-identity .secondary-sheet{ width: 45%; left: 54%; top: 128px; } #caMarketing .campaign-financial .campaign-visual{ background: rgb(222, 222, 220); } #caMarketing .campaign-local .campaign-visual{ background: rgb(231, 233, 220); } #caMarketing .campaign-listing .campaign-visual{ background: rgb(218, 214, 209); } #caMarketing .campaign-caption{ padding: 23px 25px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } #caMarketing .campaign-caption span:not(.round-arrow){ font-size: 8px; letter-spacing: 1.5px; color: rgb(154, 134, 167); } #caMarketing .campaign-caption h2{ font-size: 25px; letter-spacing: -0.8px; font-weight: 600; line-height: 1.2; margin: 8px 0px; } #caMarketing .campaign-caption small{ font-size: 10px; color: rgb(161, 142, 173); } #caMarketing .round-arrow{ height: 33px; width: 33px; border-radius: 50%; background: rgb(244, 239, 248); display: grid; place-items: center; font-size: 17px; color: rgb(154, 122, 176); flex: 0 0 auto; } #caMarketing .product-genre{ margin: 35px 0px; } #caMarketing .product-genre > h2{ font-size: 20px; font-weight: 600; margin-bottom: 19px; letter-spacing: -0.5px; } #caMarketing .product-picker-grid{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 19px; } #caMarketing .product-choice{ position: relative; border: 1px solid rgb(229, 221, 235); background: white; border-radius: 14px; padding: 13px; text-align: left; transition: background 0.2s; min-width: 0px; } #caMarketing .product-choice.selected{ border: 2px solid rgb(156, 121, 182); padding: 12px; background: rgb(243, 236, 249); } #caMarketing .product-choice-art{ height: 200px; display: flex; align-items: center; justify-content: center; background: rgb(240, 237, 243); border-radius: 8px; overflow: hidden; padding: 20px; margin-bottom: 15px; } #caMarketing .product-choice-art > .piece{ width: 100%; } #caMarketing .product-choice-art > .size-portrait{ max-width: 130px; } #caMarketing .product-choice-art > .size-story{ max-width: 90px; } #caMarketing .product-choice strong{ font-size: 12px; display: block; padding-right: 26px; } #caMarketing .product-choice > small{ font-size: 10px; color: rgb(165, 145, 177); display: block; margin-top: 6px; } #caMarketing .choice-check{ position: absolute; right: 14px; bottom: 27px; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgb(218, 205, 228); border-radius: 50%; color: rgb(163, 140, 175); font-size: 14px; } #caMarketing .selected .choice-check{ background: rgb(157, 124, 179); color: white; border: 0px; } #caMarketing .builder-context{ display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgb(161, 138, 174); } #caMarketing .builder-context select{ background: transparent; color: rgb(109, 84, 126); border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(206, 188, 217); border-image: none; padding: 10px; font: 12px var(--sans); } #caMarketing .builder-bottom{ position: sticky; bottom: 15px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgb(231, 221, 239); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(16px); padding: 15px 24px; border-radius: 15px; box-shadow: rgba(65, 50, 77, 0.063) 0px 10px 35px; margin-top: 30px; z-index: 3; } #caMarketing .builder-bottom > span{ font-size: 12px; color: rgb(161, 138, 175); } #caMarketing .primary:disabled{ opacity: 0.4; cursor: default; } #caMarketing .builder-page{ max-width: 1120px; margin: auto; } #caMarketing .campaign-entry{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; margin-top: 38px; } #caMarketing .entry-showcase{ height: 530px; background: radial-gradient(at 40% 30%, rgb(243, 237, 248), rgb(228, 216, 238)); position: relative; border-radius: 28px; overflow: hidden; } #caMarketing .entry-showcase > div{ position: absolute; box-shadow: rgba(73, 51, 85, 0.14) 0px 23px 38px; pointer-events: none; } #caMarketing .showcase-main{ width: 70%; left: 4%; top: 80px; transform: rotate(-9deg); } #caMarketing .showcase-side{ width: 37%; right: 1%; top: 130px; transform: rotate(9deg); } #caMarketing .showcase-third{ width: 44%; left: 35%; bottom: -20px; transform: rotate(4deg); } #caMarketing .sample-chip{ position: absolute; top: 23px; left: 25px; font-size: 9px; color: rgb(163, 140, 178); letter-spacing: 1px; } #caMarketing .entry-decision > .overline{ font-size: 9px; letter-spacing: 2px; color: rgb(161, 139, 176); } #caMarketing .entry-decision h1{ font-size: 42px; letter-spacing: -1.3px; font-weight: 600; margin: 16px 0px 26px; } #caMarketing .included-list{ list-style: none; padding: 0px; margin: 0px 0px 30px; } #caMarketing .included-list li{ font-size: 12px; color: rgb(145, 128, 155); padding: 8px 0px; border-bottom: 1px solid rgb(233, 226, 237); } #caMarketing .included-list li > span{ float: right; font-size: 10px; color: rgb(177, 158, 189); } #caMarketing .entry-decision > .primary{ width: 100%; padding: 15px; border-radius: 10px; } #caMarketing .entry-import{ position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid rgb(217, 204, 227); border-radius: 10px; padding: 15px; margin-top: 12px; font-size: 12px; color: rgb(138, 108, 158); cursor: pointer; } #caMarketing .entry-import > span{ font-size: 9px; color: rgb(174, 152, 187); } #caMarketing .entry-import input{ position: absolute; inset: 0px; opacity: 0; width: 100%; cursor: pointer; } #caMarketing .entry-import:focus-within{ outline: rgb(173, 135, 201) solid 2px; } #caMarketing .intake-app:has(.campaign-entry){ max-width: 1120px; } #caMarketing .intake-heading h1{ font-family: var(--sans); font-size: 37px; font-weight: 500; letter-spacing: -1.3px; } #caMarketing .intake-heading .overline{ font-size: 9px; } /* The questions, on the left, beside the sample picture on the right. The columns are the entry's own, swapped, so the picture is the same size in both and only has to move across. While a step moves, the section clips what passes through its top and bottom edges. Not in the prototype. */ #caMarketing .campaign-entry{ position: relative; } #caMarketing .campaign-entry.q-split{ grid-template-columns: 1fr 1.4fr; align-items: start; margin-top: 22px; } /* While a step moves, the section clips what passes through its edges, so the old step leaves through the top and the next arrives from the bottom. */ #caMarketing .campaign-entry.q-moving{ overflow: clip; } #caMarketing .campaign-entry .q-out{ pointer-events: none; } /* The question is on a layer of its own all the time, not only while it moves, so nothing is redrawn when a slide ends. */ #caMarketing .q-split .q-panel, #caMarketing .campaign-entry .q-out{ will-change: transform; } #caMarketing .q-stage{ min-width: 0px; } #caMarketing .q-split .q-stage{ order: 1; } #caMarketing .q-split .entry-showcase{ order: 2; align-self: end; } /* Every question is the same height, so the picture beside them never moves from one question to the next. The picture sits at the bottom of the row, level with the bottom of the card, and a card with less on it stretches to the same height, its buttons kept at its foot. 780px holds the longest question of the five starter collections; a custom collection with more on a page makes that page taller, and the picture follows it. */ #caMarketing .q-split .q-stage{ display: flex; flex-direction: column; min-height: 780px; } #caMarketing .q-split .q-panel{ flex: 1 1 auto; display: flex; flex-direction: column; } #caMarketing .q-split .q-panel > .intake-question{ flex: 1 1 auto; display: flex; flex-direction: column; } #caMarketing .q-split .intake-question .intake-fields, #caMarketing .q-split .intake-question .photo-choice{ margin-bottom: 14px; } #caMarketing .q-split .intake-question .intake-actions{ margin-top: auto; } #caMarketing .q-split .intake-progress{ padding: 0px 0px 14px; } #caMarketing .q-split .intake-progress + .intake-heading{ text-align: left; margin: 22px 0px 18px; } #caMarketing .q-split .intake-heading h1{ font-size: 33px; margin: 12px 0px 0px; } #caMarketing .q-split .intake-question{ max-width: none; margin: 0px; padding: 24px; } #caMarketing .q-split .import-credit{ max-width: none; margin: 0px 0px 14px; } #caMarketing .q-split .intake-question{ padding: 20px 24px; } #caMarketing .q-split .intake-fields .pack-field{ margin: 7px 0px; } #caMarketing .q-split .intake-fields .pack-field > span{ margin-bottom: 5px; } #caMarketing .q-split .intake-fields textarea, #caMarketing .q-split .intake-fields .pack-field input{ padding: 10px 12px; } #caMarketing .q-split .intake-actions{ margin-top: 14px; padding-top: 16px; } #caMarketing .q-split .mk-listing-picks{ margin: 16px 0px 0px; padding-top: 14px; border-top: 1px solid rgb(231, 223, 237); } #caMarketing .q-split .mk-listing-picks > span{ font-size: 12px; } #caMarketing .q-split .intake-fields .pack-field:has([data-intake-field="address"], [data-intake-field="city"], [data-intake-field="propertyAddress"], [data-intake-field="contact"], [data-intake-field="source"], [data-intake-field="period"], [data-intake-field^="local"]){ grid-column: 1 / -1; } #caMarketing .intake-question{ box-shadow: rgba(71, 52, 82, 0.02) 0px 15px 40px; } #caMarketing .finished-heading{ display: flex; justify-content: space-between; align-items: center; gap: 25px; margin: 20px 0px 35px; } #caMarketing .finished-heading h1{ font-size: 35px; letter-spacing: -1.2px; font-weight: 600; margin: 6px 0px; } #caMarketing .finished-heading .overline{ font-size: 10px; color: rgb(162, 135, 178); } #caMarketing .finished-heading > div:last-child{ display: flex; gap: 12px; } #caMarketing .finished-heading > div:first-child{ display: block; } #caMarketing .finished-heading .plain{ font-size: 12px; } #caMarketing .theme-description{ padding: 22px; } #caMarketing .theme-description h2{ font-family: var(--sans); font-size: 23px; letter-spacing: -0.7px; } #caMarketing .theme-description > span{ font-size: 10px; } #caMarketing .theme-scene{ height: 350px; } #caMarketing .theme-scene > div:first-child{ width: 76%; left: 4%; top: 45px; } #caMarketing .theme-scene > div:last-child{ width: 47%; right: 0px; bottom: 15px; } #caMarketing .pack-heading h1{ font-size: 29px; } #caMarketing .deck-pages{ display: flex; gap: 5px; flex-wrap: wrap; margin: 0px 0px 20px; } #caMarketing .deck-pages button{ font-size: 9px; padding: 7px 10px; border-radius: 6px; color: rgb(155, 130, 173); } #caMarketing .deck-pages button[aria-pressed="true"]{ background: rgb(222, 208, 233); color: rgb(114, 84, 139); } #caMarketing .brief-section{ margin-bottom: 15px; border-bottom: 1px solid rgb(233, 225, 238); padding-bottom: 15px; } #caMarketing .brief-section summary{ font-size: 12px; cursor: pointer; } #caMarketing .brief-section .pack-field textarea{ min-height: 95px; } #caMarketing .piece.property-design{ background: rgb(249, 245, 237); color: rgb(52, 57, 48); } #caMarketing .property-design.theme-estate.layout-0 .piece-photo{ position: absolute; top: 0px; bottom: 0px; right: 0px; width: 48%; height: 100%; margin: 0px; } #caMarketing .property-design.theme-estate.layout-0 .piece-brand{ width: 52%; padding: 7% 5%; display: block; } #caMarketing .property-design.theme-estate.layout-0 .piece-brand span{ display: block; font-size: 1.6cqw; line-height: 2; margin-top: 8%; } #caMarketing .property-design.theme-estate.layout-0 .piece-content{ width: 52%; padding: 8% 5% 3%; margin-top: auto; flex: 0 0 auto; } #caMarketing .property-design.theme-estate.layout-0 h2{ font-size: 9.3cqw; line-height: 0.98; } #caMarketing .property-design.theme-estate.layout-0 .piece-address{ font-size: 2.9cqw; } #caMarketing .property-design.theme-estate.layout-0 .piece-date{ font-size: 2.2cqw; line-height: 1.5; } #caMarketing .property-design.theme-estate.layout-0 .piece-footer{ width: 52%; padding: 4% 5%; flex-direction: column; gap: 5px; font-size: 1.6cqw; } #caMarketing .property-design.theme-estate.layout-0 .piece-footer > span{ max-width: 100%; } #caMarketing .property-design.theme-estate.layout-0 .piece-stats{ font-size: 4cqw; } #caMarketing .property-design.theme-estate.layout-0.product-facts .piece-photo{ height: 42%; width: 48%; } #caMarketing .property-design.theme-estate.layout-0.product-facts .piece-content{ width: 100%; padding-top: 4%; margin-top: 25%; flex: 1 1 0%; } #caMarketing .property-design.theme-estate.layout-0.product-facts .piece-content h2{ max-width: 75%; font-size: 8cqw; } #caMarketing .property-design.theme-estate.layout-0.product-facts .piece-stats{ display: flex; justify-content: space-between; font-size: 5cqw; } #caMarketing .property-design.theme-estate.layout-0.product-facts .piece-stats small{ margin: 0px; } #caMarketing .property-design.theme-estate.layout-0.product-facts .piece-footer{ width: 100%; flex-direction: row; } #caMarketing .property-design.theme-lilac.layout-0{ background: rgb(232, 221, 243); color: rgb(71, 49, 87); } #caMarketing .property-design.theme-lilac.layout-0 .piece-brand{ background: transparent; color: rgb(71, 49, 87); padding: 5% 7%; border-bottom: 1px solid rgb(175, 149, 194); } #caMarketing .property-design.theme-lilac.layout-0 .piece-photo{ position: absolute; right: 7%; top: 36%; height: 31%; width: 43%; border-radius: 50% 50% 4px 4px; transform: rotate(5deg); margin: 0px; } #caMarketing .property-design.theme-lilac.layout-0 .piece-content{ padding: 7%; display: flex; flex-direction: column; justify-content: space-between; } #caMarketing .property-design.theme-lilac.layout-0 h2{ font-size: 12cqw; font-weight: 800; line-height: 0.9; max-width: 98%; letter-spacing: -0.08em; } #caMarketing .property-design.theme-lilac.layout-0 .piece-label{ order: 0; } #caMarketing .property-design.theme-lilac.layout-0 .piece-address{ margin-top: 25%; max-width: 55%; } #caMarketing .property-design.theme-lilac.layout-0 .piece-date{ font-size: 3.7cqw; font-weight: 600; border: 0px; padding-top: 3%; margin-top: 0px; } #caMarketing .property-design.theme-lilac.layout-0 .piece-footer{ background: rgb(71, 49, 87); color: rgb(232, 221, 243); padding: 4% 7%; } #caMarketing .property-design.theme-lilac.layout-0.product-facts .piece-photo{ display: none; } #caMarketing .property-design.theme-lilac.layout-0.product-facts .piece-address{ margin-top: 3%; max-width: 100%; } #caMarketing .property-design.theme-lilac.layout-0.product-facts h2{ font-size: 11cqw; } #caMarketing .property-design.theme-lilac.layout-0.product-facts .piece-stats{ font: 700 8cqw Arimo, Arial, sans-serif; } #caMarketing .property-design.theme-ink.layout-0:not(.product-signin){ color: rgb(255, 255, 255); background: rgb(32, 42, 40); } #caMarketing .property-design.theme-ink.layout-0:not(.product-signin) .piece-photo{ position: absolute; inset: 0px; height: 100%; width: 100%; margin: 0px; filter: none; } #caMarketing .property-design.theme-ink.layout-0:not(.product-signin)::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(16, 33, 26, 0.25), rgba(16, 33, 26, 0) 30%, rgba(16, 33, 26, 0.91)); z-index: 0; } #caMarketing .property-design.theme-ink.layout-0 .piece-brand{ font-size: 2.5cqw; letter-spacing: 0.25em; } #caMarketing .property-design.theme-ink.layout-0 .piece-content{ margin-top: auto; flex: 0 0 auto; padding: 7%; } #caMarketing .property-design.theme-ink.layout-0 h2{ font: italic 12cqw / 0.95 Gelasio, Georgia, serif; letter-spacing: -0.05em; max-width: 90%; } #caMarketing .property-design.theme-ink.layout-0 .piece-label{ border: 0px; padding: 0px; } #caMarketing .property-design.theme-ink.layout-0 .piece-date{ color: rgb(243, 233, 214); border-color: rgba(255, 255, 255, 0.333); } #caMarketing .property-design.theme-ink.layout-0 .piece-footer{ background: rgb(251, 247, 239); color: rgb(37, 57, 45); padding: 4% 7%; } #caMarketing .property-design.product-signin .piece-content{ width: 100% !important; margin: 0px !important; padding: 7% !important; } #caMarketing .property-design.product-signin .piece-brand{ width: 100% !important; display: flex !important; } #caMarketing .property-design.product-signin .piece-footer{ width: 100% !important; flex-direction: row !important; } #caMarketing .property-design.product-signin .piece-address{ margin: 0px !important; max-width: 100% !important; } #caMarketing .property-design.product-signin h2{ font-size: 9cqw !important; } #caMarketing .property-design.product-signin .piece-date{ font-size: 2.4cqw !important; } #caMarketing .property-design.product-signin .piece-content{ display: block !important; } #caMarketing .property-design.product-signin .piece-brand span{ margin: 0px !important; } #caMarketing .property-design.theme-lilac.product-signin{ background: rgb(246, 239, 251); } #caMarketing .property-design.theme-ink.product-signin{ border: 1px solid rgb(48, 59, 53); background: rgb(247, 245, 239); color: rgb(35, 55, 44); } #caMarketing .property-design.size-story.theme-estate.layout-0 .piece-photo{ width: 100%; height: 48%; bottom: auto; } #caMarketing .property-design.size-story.theme-estate.layout-0 .piece-brand{ color: white; position: relative; z-index: 2; } #caMarketing .property-design.size-story.theme-estate.layout-0 .piece-content{ width: 100%; margin-top: auto; padding: 8%; } #caMarketing .property-design.size-story.theme-estate.layout-0 h2{ font-size: 14cqw; } #caMarketing .property-design.size-story.theme-estate.layout-0 .piece-footer{ width: 100%; padding: 4% 8%; flex-direction: row; } #caMarketing .property-design.headline-medium h2{ font-size: 8cqw !important; } #caMarketing .design-piece{ background: rgb(249, 245, 237); color: rgb(53, 60, 50); display: flex; flex-direction: column; font-family: Arimo, Arial, sans-serif; } #caMarketing .design-piece .design-topline{ padding: 5% 7%; display: flex; justify-content: space-between; font-size: 1.65cqw; letter-spacing: 0.18em; z-index: 2; flex: 0 0 auto; } #caMarketing .design-piece .design-body{ flex: 1 1 0%; min-height: 0px; padding: 4% 7%; position: relative; } #caMarketing .design-piece h2{ font: 9.3cqw / 1.02 Gelasio, Georgia, serif; letter-spacing: -0.04em; margin: 4% 0px 7%; overflow-wrap: anywhere; } #caMarketing .design-piece h2 em{ font-size: 8cqw; display: block; font-weight: 400; } #caMarketing .design-piece p{ font: 2.7cqw / 1.65 Arimo, Arial, sans-serif; margin: 5% 0px; } #caMarketing .design-eyebrow{ font-size: 1.8cqw; letter-spacing: 0.12em; display: block; } #caMarketing .design-footer{ display: flex; justify-content: space-between; gap: 10%; padding: 4% 7%; font-size: 1.8cqw; flex: 0 0 auto; z-index: 2; } #caMarketing .design-footer > span{ max-width: 55%; overflow-wrap: anywhere; } #caMarketing .metric-grid{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid; border-bottom: 1px solid; padding: 6% 0px; margin: 8% 0px; gap: 4%; } #caMarketing .metric-grid > div{ border-right: 1px solid rgb(158, 170, 159); padding-right: 6%; } #caMarketing .metric-grid > div:last-child{ border: 0px; } #caMarketing .design-piece .metric-grid strong{ font: 8cqw / 1 Gelasio, Georgia, serif; letter-spacing: -0.06em; } #caMarketing .design-piece .metric-grid small{ font: 1.9cqw / 1.5 Arimo, Arial, sans-serif; display: block; margin-top: 14%; } #caMarketing .market-stamp{ display: block; position: absolute; right: 7%; bottom: 2%; border: 1px solid; border-radius: 50%; height: 9cqw; width: 9cqw; text-align: center; padding-top: 3.5cqw; font: 1.7cqw Gelasio, Georgia, serif; transform: rotate(-15deg); } #caMarketing .source-line{ font: 1.5cqw / 1.4 Arimo, Arial, sans-serif; padding: 0px 7%; opacity: 0.7; } #caMarketing .design-piece .market-observation{ max-width: 82%; font-size: 2.4cqw; } #caMarketing .financial-design.theme-ink{ background: rgb(37, 62, 53); color: rgb(239, 234, 218); } #caMarketing .financial-design.theme-ink .metric-grid{ border: 0px; grid-template-columns: 1fr 1fr 1fr; gap: 7%; } #caMarketing .financial-design.theme-ink .metric-grid > div{ border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(158, 181, 160) currentcolor currentcolor; border-image: none; padding-top: 20%; } #caMarketing .financial-design.theme-ink .metric-grid strong{ font: 7cqw Arimo, Arial, sans-serif; } #caMarketing .financial-design.theme-lilac{ background: rgb(240, 230, 252); color: rgb(73, 38, 99); } #caMarketing .financial-design.theme-lilac h2{ font-family: "Archivo Black", Arimo, Arial, sans-serif; font-weight: 800; letter-spacing: -0.07em; font-synthesis: none; } #caMarketing .financial-design.theme-lilac .metric-grid{ border: 0px; gap: 3%; padding: 0px; grid-template-columns: 1.4fr 1fr; } #caMarketing .financial-design.theme-lilac .metric-grid > div{ background: rgb(214, 189, 233); border: 0px; padding: 15%; border-radius: 10%; } #caMarketing .financial-design.theme-lilac .metric-grid > div:first-child{ grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: rgb(73, 38, 99); color: rgb(240, 230, 252); } #caMarketing .financial-design.theme-lilac .metric-grid strong{ font: bold 8cqw Arimo, Arial, sans-serif; } #caMarketing .financial-design.theme-lilac .metric-grid small{ font-size: 1.7cqw; } #caMarketing .financial-design.theme-lilac .market-stamp{ display: none; } #caMarketing .local-map{ height: 26cqw; position: relative; margin: -4% -8% 7%; background: repeating-linear-gradient(35deg, transparent, transparent 23px, rgba(179, 189, 168, 0.36) 24px, rgba(179, 189, 168, 0.36) 27px, transparent 28px), repeating-linear-gradient(125deg, rgb(228, 231, 215), rgb(228, 231, 215) 35px, rgb(250, 248, 236) 36px, rgb(250, 248, 236) 40px); } #caMarketing .local-map i{ position: absolute; left: 25%; top: 0px; width: 18%; height: 100%; background: rgba(162, 188, 182, 0.44); transform: rotate(-30deg); } #caMarketing .local-map b{ position: absolute; background: rgb(70, 94, 69); color: rgb(245, 244, 223); border-radius: 50%; width: 5cqw; height: 5cqw; display: grid; place-items: center; font-size: 1.7cqw; top: 25%; left: 20%; } #caMarketing .local-map b:nth-of-type(2){ left: 48%; top: 55%; } #caMarketing .local-map b:nth-of-type(3){ left: 76%; top: 24%; } #caMarketing .local-map > span{ position: absolute; bottom: 6%; left: 7%; font-size: 2cqw; letter-spacing: 0.12em; } #caMarketing .design-piece.local-design h2{ font-size: 8cqw; margin-bottom: 4%; } #caMarketing .local-picks{ list-style: none; padding: 0px; margin: 6% 0px 0px; } #caMarketing .local-picks li{ display: flex; gap: 5%; border-top: 1px solid; padding: 4% 0px; font-size: 2.5cqw; line-height: 1.4; } #caMarketing .local-picks li > span:first-child{ font-size: 1.8cqw; opacity: 0.6; flex: 0 0 auto; } #caMarketing .local-design.theme-lilac{ background: rgb(255, 231, 206); color: rgb(116, 68, 46); } #caMarketing .local-design.theme-lilac .local-map{ background: repeating-linear-gradient(25deg, rgb(239, 209, 180), rgb(239, 209, 180) 27px, rgb(255, 242, 220) 28px, rgb(255, 242, 220) 31px); height: 23cqw; } #caMarketing .local-design.theme-lilac h2{ font-family: "Archivo Black", Arimo, Arial, sans-serif; font-weight: 800; font-size: 10cqw; letter-spacing: -0.08em; font-synthesis: none; } #caMarketing .local-design.theme-lilac .local-picks{ display: grid; grid-template-columns: 1fr 1fr; gap: 3%; } #caMarketing .local-design.theme-lilac .local-picks li{ background: rgb(243, 197, 167); border: 0px; padding: 9%; display: block; font-size: 2.2cqw; } #caMarketing .local-design.theme-lilac .local-picks li:first-child{ grid-column: span 2; } #caMarketing .local-design.theme-ink{ background: rgb(48, 62, 61); color: rgb(237, 233, 220); } #caMarketing .local-design.theme-ink .local-map{ height: 35cqw; opacity: 0.8; } #caMarketing .brand-design .brand-portrait{ position: absolute; right: 0px; top: 0px; bottom: 0px; width: 45%; overflow: hidden; } #caMarketing .brand-portrait > img, #caMarketing .portrait-frame > img, #caMarketing .portrait-small > img{ width: 100%; height: 100%; object-fit: cover; } #caMarketing .agent-monogram{ height: 100%; width: 100%; background: radial-gradient(at 30% 20%, rgb(232, 221, 243), rgb(181, 162, 204)); display: grid; place-items: center; overflow: hidden; position: relative; } #caMarketing .agent-monogram > span{ font: 20cqw Gelasio, Georgia, serif; color: rgb(113, 87, 135); z-index: 1; } #caMarketing .agent-monogram i{ position: absolute; border: 1px solid rgba(248, 241, 255, 0.5); width: 110%; height: 60%; border-radius: 50%; transform: rotate(-30deg); } #caMarketing .brand-copy{ width: 54%; padding: 6% 0px; } #caMarketing .brand-copy h2{ font-size: 10cqw; line-height: 0.95; } #caMarketing .brand-copy p{ font-size: 2.5cqw; line-height: 1.5; } #caMarketing .signature-script{ font: italic 3.4cqw Gelasio, Georgia, serif; display: block; margin-top: 13%; } #caMarketing .brand-design.theme-lilac{ background: rgb(217, 201, 236); color: rgb(77, 51, 101); } #caMarketing .brand-design.theme-lilac .brand-portrait{ position: relative; width: 45%; height: 30cqw; border-radius: 50% 50% 3px 3px; float: right; margin-left: 5%; transform: rotate(4deg); } #caMarketing .brand-design.theme-lilac .brand-copy{ width: 100%; padding: 0px; } #caMarketing .brand-design.theme-lilac h2{ font: 800 12cqw / 0.9 "Archivo Black", Arimo, Arial, sans-serif; letter-spacing: -0.08em; margin-top: 10%; max-width: 90%; font-synthesis: none; } #caMarketing .brand-design.theme-lilac .brand-copy p{ max-width: 80%; } #caMarketing .brand-design.theme-ink{ background: rgb(41, 44, 54); color: rgb(240, 232, 217); } #caMarketing .brand-design.theme-ink .brand-portrait{ width: 100%; height: 38%; bottom: auto; opacity: 0.75; } #caMarketing .brand-design.theme-ink .brand-copy{ width: 100%; margin-top: 38%; padding-top: 2%; } #caMarketing .brand-design.theme-ink .brand-copy h2{ font-size: 9cqw; margin: 3% 0px; } #caMarketing .brand-design.theme-ink .brand-copy p{ max-width: 85%; } #caMarketing .brand-design.theme-ink .signature-script{ margin-top: 6%; } #caMarketing .newsletter-masthead{ display: flex; justify-content: space-between; border-bottom: 2px solid; padding-bottom: 4%; font-size: 2.3cqw; letter-spacing: 0.08em; } #caMarketing .design-piece .newsletter-masthead small{ font-size: 1.7cqw; } #caMarketing .design-piece.digital-newsletter h2{ font-size: 9cqw; margin: 6% 0px 3%; } #caMarketing .digital-newsletter .design-body{ padding-top: 0px; } #caMarketing .design-piece.digital-newsletter p{ font-size: 2.4cqw; line-height: 1.6; } #caMarketing .digital-newsletter .metric-grid{ padding: 5% 0px; margin: 5% 0px; } #caMarketing .digital-newsletter .metric-grid strong{ font-size: 6.5cqw; } #caMarketing .newsletter-stories section{ display: grid; grid-template-columns: 15% 1fr; border-top: 1px solid; padding: 3% 0px; align-items: start; } #caMarketing .newsletter-stories section > span{ font: 4cqw Gelasio, Georgia, serif; padding-top: 5%; } #caMarketing .newsletter-stories section p{ margin: 3% 0px; } #caMarketing .newsletter-context{ border-top: 1px solid; margin-top: 7%; padding-top: 5%; } #caMarketing .newsletter-context h3{ font-size: 3.4cqw; } #caMarketing .local-ribbon{ padding: 6%; background: rgb(220, 225, 207); margin: 6% 0px; color: rgb(73, 98, 61); } #caMarketing .local-ribbon > span{ font-size: 1.7cqw; display: block; } #caMarketing .local-ribbon strong{ font: 6cqw Gelasio, Georgia, serif; display: block; margin-top: 4%; } #caMarketing .local-ribbon i{ float: right; font-size: 6cqw; } #caMarketing .digital-script{ background: rgb(255, 254, 250); color: rgb(53, 59, 50); } #caMarketing .digital-script .design-body h2{ font-size: 9cqw; margin: 5% 0px 9%; } #caMarketing .script-sections section{ border-top: 1px solid; padding: 5% 0px; display: grid; grid-template-columns: 19% 1fr; gap: 6%; } #caMarketing .design-piece .script-sections section > small{ font-size: 1.7cqw; letter-spacing: 0.1em; padding-top: 5%; } #caMarketing .design-piece .script-sections p{ font-size: 2.6cqw; line-height: 1.55; margin: 0px; } #caMarketing .digital-script.theme-lilac .script-sections section{ border: 0px; background: rgb(232, 218, 243); padding: 5%; margin-bottom: 3%; } #caMarketing .digital-script.theme-lilac{ background: rgb(248, 243, 252); color: rgb(77, 51, 101); } #caMarketing .digital-script.theme-ink{ background: rgb(241, 238, 231); color: rgb(41, 60, 51); } #caMarketing .digital-script.theme-ink .design-topline{ background: rgb(41, 60, 51); color: rgb(241, 238, 231); } #caMarketing .presentation .design-body{ padding-top: 2%; } #caMarketing .presentation .portrait-frame{ height: 47cqw; margin: -2% -8% 10%; overflow: hidden; } #caMarketing .presentation .portrait-frame .agent-monogram > span{ font-size: 25cqw; } #caMarketing .presentation h2{ font-size: 11cqw; margin: 5% 0px 8%; max-width: 90%; } #caMarketing .presentation .portrait-small{ width: 33%; height: 35cqw; float: right; margin: 0px 0px 5% 7%; border-radius: 50% 50% 0px 0px; overflow: hidden; } #caMarketing .presentation p{ font-size: 3cqw; line-height: 1.7; } #caMarketing .approach-list{ list-style: none; padding: 0px; margin: 10% 0px; } #caMarketing .approach-list li{ display: flex; gap: 8%; align-items: center; border-top: 1px solid; padding: 6% 0px; font-size: 3.4cqw; } #caMarketing .approach-list li > span{ font: 5cqw Gelasio, Georgia, serif; opacity: 0.5; } #caMarketing .journey-list{ list-style: none; padding: 0px; margin: 10% 0px; } #caMarketing .journey-list li{ padding: 4% 0px 6%; border-top: 1px solid; } #caMarketing .journey-list b{ display: block; font-size: 3cqw; } #caMarketing .journey-list span{ font-size: 2.5cqw; line-height: 1.6; display: block; margin-top: 3%; } #caMarketing .buyer-note-lines{ height: 30cqw; background: repeating-linear-gradient(transparent, transparent 23%, rgb(183, 181, 170) 24%, transparent 25%); margin: 12% 0px; } #caMarketing .presentation.theme-lilac{ background: rgb(233, 222, 244); color: rgb(73, 53, 90); } #caMarketing .presentation.theme-lilac h2{ font: bold 12cqw / 0.96 Arimo, Arial, sans-serif; letter-spacing: -0.08em; } #caMarketing .presentation.theme-lilac .portrait-frame{ width: 53%; height: 52cqw; border-radius: 50% 50% 0px 0px; margin: 3% 0px 12% auto; transform: rotate(5deg); } #caMarketing .presentation.theme-lilac .design-footer{ background: rgb(73, 53, 90); color: rgb(238, 227, 246); } #caMarketing .presentation.theme-ink{ background: rgb(39, 59, 51); color: rgb(239, 233, 218); } #caMarketing .presentation.theme-ink .portrait-frame{ height: 57cqw; margin: 0px 0px 10%; opacity: 0.85; } #caMarketing .presentation.theme-ink .design-topline{ border-bottom: 1px solid rgb(116, 137, 123); } #caMarketing .presentation.theme-ink h2{ font-style: italic; } #caMarketing .presentation.theme-ink .design-footer{ border-top: 1px solid rgb(116, 137, 123); } #caMarketing .design-piece.size-wide{ aspect-ratio: 1200 / 630; } #caMarketing .design-piece.size-wide .design-topline{ padding: 3% 5%; font-size: 1.2cqw; } #caMarketing .design-piece.size-wide .design-body{ padding: 1% 5%; } #caMarketing .design-piece.size-wide h2{ font-size: 6cqw; max-width: 45%; margin: 0px 0px 4%; } #caMarketing .design-piece.size-wide h2 em{ font-size: 4.5cqw; } #caMarketing .design-piece.size-wide .metric-grid{ position: absolute; width: 47%; right: 5%; top: 12%; margin: 0px; padding: 5% 0px; } #caMarketing .design-piece.size-wide .metric-grid small{ font-size: 1.3cqw; } #caMarketing .design-piece.size-wide .market-observation{ font-size: 1.7cqw; max-width: 43%; margin: 2% 0px; } #caMarketing .design-piece.size-wide .design-footer{ padding: 2% 5%; font-size: 1.3cqw; } #caMarketing .design-piece.size-wide .source-line{ font-size: 1.1cqw; padding: 0px 5%; } #caMarketing .design-piece.size-wide .market-stamp{ display: none; } #caMarketing .design-piece.size-wide .local-map{ float: right; width: 43%; height: 25cqw; margin: 0px -5% 0px 4%; } #caMarketing .design-piece.size-wide .local-picks{ margin: 0px; max-width: 50%; } #caMarketing .design-piece.size-wide .local-picks li{ font-size: 1.8cqw; padding: 3% 0px; } #caMarketing .design-piece.size-wide .design-eyebrow{ font-size: 1.3cqw; } #caMarketing .design-piece.size-story h2{ font-size: 14cqw; } #caMarketing .design-piece.size-story .design-body{ padding-top: 12%; } #caMarketing .design-piece.size-story .metric-grid{ grid-template-columns: 1fr; gap: 8%; margin-top: 15%; } #caMarketing .design-piece.size-story .metric-grid > div{ display: flex; justify-content: space-between; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor; border-image: none; padding: 7% 0px; } #caMarketing .design-piece.size-story .metric-grid strong{ font-size: 14cqw; } #caMarketing .design-piece.size-story .metric-grid small{ margin: 0px; font-size: 3cqw; max-width: 40%; } #caMarketing .design-piece.size-story .local-map{ height: 55cqw; } #caMarketing .design-piece.size-story .local-picks li{ font-size: 4cqw; padding: 8% 0px; } #caMarketing .design-piece.size-story .brand-portrait{ height: 45%; width: 100%; position: absolute; } #caMarketing .design-piece.size-story .brand-copy{ margin-top: 85%; width: 100%; } #caMarketing .design-piece.size-story .brand-copy p{ font-size: 4cqw; } #caMarketing .design-piece.size-story .brand-copy h2{ font-size: 15cqw; } #caMarketing .design-piece.size-story .signature-script{ font-size: 5cqw; } #caMarketing .design-piece.composition-1:not(.digital-script):not(.digital-newsletter){ border: 2cqw solid rgb(211, 195, 222); } #caMarketing .design-piece.composition-1 .design-body h2{ font-style: italic; } #caMarketing .design-piece.composition-2:not(.digital-script):not(.digital-newsletter){ background: rgb(253, 251, 247); color: rgb(54, 50, 57); } #caMarketing .design-piece.composition-2 .design-body h2{ text-transform: uppercase; font: 700 8cqw / 0.98 Arimo, Arial, sans-serif; letter-spacing: -0.06em; } #caMarketing .design-piece.composition-2 .local-map{ height: 18cqw; } #caMarketing .design-piece.composition-2 .metric-grid{ border-width: 3px 0px 0px; border-style: solid none none; border-color: currentcolor; border-image: none; } #caMarketing .design-piece.composition-2 .brand-portrait{ opacity: 0.6; } #caMarketing .design-piece [contenteditable]{ outline: rgba(150, 115, 171, 0.4) dashed 1px; outline-offset: 4px; cursor: text; } #caMarketing .design-piece [contenteditable]:focus{ outline: rgb(171, 130, 198) solid 2px; } #caMarketing .piece-mini .design-piece h2{ font-size: 9cqw !important; } #caMarketing .collection-review .design-piece small{ font-size: 1.9cqw; color: inherit; margin: 0px; } #caMarketing .collection-review .design-piece .source-line{ font-size: 1.5cqw; } #caMarketing .collection-review .design-piece .metric-grid small{ margin-top: 10%; font-size: 1.9cqw; } #caMarketing .collection-review .size-wide{ max-width: 280px; } #caMarketing .collection-review .design-piece.size-wide .metric-grid small{ font-size: 1.3cqw; } #caMarketing .design-piece.digital-script .design-body, #caMarketing .design-piece.digital-newsletter .design-body{ overflow: hidden; } @media (min-width: 1450px){ #caMarketing .campaign-visual{ height: 375px; } #caMarketing .campaign-openhouse .campaign-visual{ height: 375px; } } @media (max-width: 1000px){ #caMarketing .mk-main{ padding: 35px 30px 70px; } #caMarketing .marketing-heading h1{ font-size: 36px; } #caMarketing .campaign-gallery{ gap: 18px; grid-template-columns: 1fr 1fr; } #caMarketing .campaign-openhouse{ grid-column: span 2; } #caMarketing .campaign-visual{ height: 310px; } #caMarketing .campaign-openhouse .campaign-visual{ height: 330px; } #caMarketing .campaign-gallery .campaign-listing{ grid-column: span 2; } #caMarketing .campaign-listing .campaign-sheet{ width: 48%; left: 10%; } #caMarketing .campaign-listing .secondary-sheet{ width: 25%; left: 60%; top: 15px; } #caMarketing .campaign-entry{ gap: 35px; grid-template-columns: 1.1fr 1fr; } #caMarketing .campaign-entry.q-split{ grid-template-columns: 1fr 1.1fr; } #caMarketing .q-split .q-stage{ min-height: 780px; } #caMarketing .entry-showcase{ height: 440px; } #caMarketing .entry-decision h1{ font-size: 34px; } #caMarketing .showcase-main{ top: 70px; } #caMarketing .showcase-third{ bottom: 40px; } #caMarketing .product-picker-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); } #caMarketing .theme-scene{ height: 280px; } } @media (max-width: 700px){ #caMarketing .mk-main{ padding: 28px 18px 60px; } #caMarketing .marketing-heading{ align-items: flex-start; margin-bottom: 28px; } #caMarketing .marketing-heading h1{ font-size: 31px; max-width: 210px; } #caMarketing .build-button{ font-size: 10px; padding: 11px 13px; gap: 8px; } #caMarketing .campaign-gallery{ gap: 13px; } #caMarketing .campaign-caption{ padding: 18px 15px; } #caMarketing .campaign-caption h2{ font-size: 22px; } #caMarketing .campaign-caption small{ font-size: 9px; } #caMarketing .round-arrow{ width: 26px; height: 26px; font-size: 14px; } #caMarketing .campaign-caption span:not(.round-arrow){ font-size: 6.5px; } #caMarketing .campaign-visual{ height: 240px; } #caMarketing .campaign-openhouse .campaign-visual{ height: 295px; } #caMarketing .campaign-gallery .campaign-listing{ grid-column: auto; } #caMarketing .campaign-listing .campaign-sheet{ width: 65%; left: 5%; } #caMarketing .campaign-listing .secondary-sheet{ width: 40%; left: 55%; top: 70px; } #caMarketing .campaign-entry{ display: flex; flex-direction: column; gap: 30px; } #caMarketing .entry-showcase{ height: 310px; width: 100%; max-width: 480px; } #caMarketing .entry-decision{ width: 100%; } #caMarketing .q-split .entry-showcase{ display: none; } #caMarketing .q-split .q-stage{ width: 100%; min-height: 0px; } #caMarketing .entry-decision h1{ font-size: 36px; margin: 13px 0px 22px; } #caMarketing .showcase-main{ width: 55%; left: 6%; top: 55px; } #caMarketing .showcase-side{ width: 30%; right: 5%; top: 60px; } #caMarketing .showcase-third{ width: 34%; left: 40%; bottom: -15px; } #caMarketing .included-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 0px 18px; } #caMarketing .included-list li{ font-size: 11px; } #caMarketing .product-picker-grid{ grid-template-columns: 1fr 1fr; gap: 12px; } #caMarketing .product-choice-art{ height: 175px; padding: 16px; } #caMarketing .product-choice strong{ font-size: 11px; } #caMarketing .builder-context{ display: block; font-size: 10px; } #caMarketing .builder-context select{ display: block; max-width: 150px; font-size: 10px; padding: 8px 0px; } #caMarketing .finished-heading h1{ font-size: 29px; } #caMarketing .finished-heading{ align-items: flex-start; } #caMarketing .finished-heading > div:last-child{ gap: 6px; } #caMarketing .theme-card{ display: block; } #caMarketing .theme-gallery{ grid-template-columns: 1fr; } #caMarketing .theme-scene{ height: 340px; } #caMarketing .theme-scene > div:first-child{ width: 60%; top: 32px; } #caMarketing .theme-scene > div:last-child{ width: 30%; right: 5%; bottom: 25px; } #caMarketing .intake-summary aside{ max-width: 160px; } #caMarketing .intake-heading h1{ font-size: 31px; } #caMarketing .collection-review{ gap: 23px 14px; } #caMarketing .collection-review > article > div{ padding: 12px; } #caMarketing .deck-pages button{ font-size: 8px; } } @media (prefers-reduced-motion: reduce){ #caMarketing .campaign-tile{ transition: none; } } #caMarketing .design-piece .design-topline{ padding: 4cqw 7cqw; } #caMarketing .design-piece .design-body{ padding: 2cqw 7cqw; } #caMarketing .design-piece h2{ margin: 3cqw 0px 4cqw; } #caMarketing .design-piece .design-footer{ padding: 3cqw 7cqw; } #caMarketing .design-piece .metric-grid{ margin: 4cqw 0px; padding: 4cqw 0px; gap: 3cqw; } #caMarketing .design-piece .metric-grid small{ margin-top: 2cqw; } #caMarketing .financial-design.theme-lilac .metric-grid{ height: 27cqw; gap: 2cqw; margin: 4cqw 0px; padding: 0px; } #caMarketing .financial-design.theme-lilac .metric-grid > div{ padding: 3cqw; border-radius: 3cqw; min-height: 0px; } #caMarketing .financial-design.theme-lilac .metric-grid strong{ font-size: 7cqw; } #caMarketing .financial-design.theme-lilac .metric-grid small{ margin-top: 1cqw; } #caMarketing .financial-design.theme-ink .metric-grid{ grid-template-columns: 1.4fr 1fr; gap: 3cqw; height: 29cqw; } #caMarketing .financial-design.theme-ink .metric-grid > div{ padding: 2cqw 0px; } #caMarketing .financial-design.theme-ink .metric-grid > div:first-child{ grid-row: span 2; display: flex; flex-direction: column; justify-content: center; } #caMarketing .financial-design.theme-ink .metric-grid > div:first-child strong{ font: 12cqw Gelasio, Georgia, serif; } #caMarketing .financial-design.theme-ink .metric-grid > div:not(:first-child) strong{ font-size: 5cqw; } #caMarketing .financial-design .market-observation{ font-size: 2.4cqw; margin: 3cqw 0px; max-width: 84%; } #caMarketing .design-piece .script-sections section{ padding: 3cqw 0px; } #caMarketing .digital-script.theme-lilac .script-sections section{ padding: 3cqw; margin-bottom: 2cqw; } #caMarketing .digital-script .design-body h2{ margin: 4cqw 0px 6cqw; } #caMarketing .design-piece.digital-newsletter h2{ margin: 4cqw 0px 3cqw; } #caMarketing .newsletter-context{ margin-top: 4cqw; padding-top: 3cqw; } #caMarketing .design-piece.digital-newsletter p{ margin: 3cqw 0px; } #caMarketing .design-piece.size-wide .metric-grid{ height: 22cqw; padding: 0px; margin: 0px; gap: 1.5cqw; } #caMarketing .design-piece.size-wide .metric-grid > div{ padding: 2cqw; } #caMarketing .design-piece.size-wide .metric-grid strong{ font-size: 5cqw; } #caMarketing .design-piece.size-wide .metric-grid > div:first-child strong{ font-size: 6cqw; } #caMarketing .design-piece.size-wide .metric-grid small{ font-size: 1.3cqw; margin-top: 1cqw; } #caMarketing .design-piece.size-wide h2{ font-size: 5.5cqw; } #caMarketing .design-piece.size-wide .design-body{ padding: 1cqw 5cqw; } #caMarketing .design-piece.size-wide .design-footer{ padding: 2cqw 5cqw; } #caMarketing .collection-review .design-piece .metric-grid small{ margin-top: 1cqw; } #caMarketing .design-piece.size-story .metric-grid{ height: auto; } #caMarketing .design-piece.size-story .metric-grid > div{ padding: 5cqw 0px; } #caMarketing .brand-design.theme-lilac .brand-portrait{ width: 30%; height: 22cqw; } #caMarketing .brand-design.theme-lilac .brand-copy h2{ clear: both; font-size: 11cqw; max-width: 100%; margin: 7% 0px 4%; overflow-wrap: normal; } #caMarketing .brand-design.theme-lilac .brand-copy p{ max-width: 100%; margin: 3% 0px; } #caMarketing .brand-design.theme-lilac .signature-script{ margin-top: 5%; } #caMarketing .brand-design.size-story.theme-lilac .brand-portrait{ width: 100%; height: 45%; } #caMarketing .brand-design.size-story.theme-lilac .brand-copy h2{ font-size: 15cqw; } #caMarketing .intake-summary aside .plain{ margin-top: 15px; font-size: 11px; } #caMarketing .presentation.page-1 .design-body > p, #caMarketing .presentation.page-2 .design-body > p, #caMarketing .presentation.page-4 .design-body > p{ font-size: 2.8cqw; } #caMarketing .campaign-tile:focus-visible, #caMarketing .product-choice:focus-visible{ outline: rgb(171, 133, 198) solid 3px; outline-offset: 4px; } #caMarketing .local-design .local-map, #caMarketing .local-design.theme-ink .local-map, #caMarketing .local-design.theme-lilac .local-map{ height: 23cqw; margin: -2cqw -7cqw 4cqw; } #caMarketing .local-design .local-picks{ margin: 3cqw 0px 0px; } #caMarketing .local-design .local-picks li{ padding: 2.5cqw 0px; } #caMarketing .local-design.theme-lilac .local-picks{ gap: 2cqw; } #caMarketing .local-design.theme-lilac .local-picks li{ padding: 2.5cqw; } #caMarketing .local-design .local-ribbon{ padding: 3cqw; margin: 4cqw 0px; } #caMarketing .local-design .local-ribbon strong{ margin-top: 2cqw; font-size: 5cqw; } #caMarketing .local-design .newsletter-stories section{ padding: 2cqw 0px; } #caMarketing .local-design.digital-newsletter h2{ font-size: 8cqw; margin: 4cqw 0px 2cqw; } #caMarketing .local-design.digital-newsletter p{ font-size: 2.3cqw; margin: 2cqw 0px; } #caMarketing .local-design.size-wide .local-map{ height: 23cqw; margin: 0px -5% 0px 4%; } #caMarketing .local-design.size-wide h2{ font-size: 5.5cqw; } #caMarketing .local-design.size-wide .local-picks li{ padding: 1.5cqw 0px; } #caMarketing .local-design.size-story .local-map{ height: 50cqw; } #caMarketing .local-design.size-story .local-picks li{ padding: 5cqw 0px; } #caMarketing .included-list li{ color: rgb(116, 103, 126); } #caMarketing .campaign-caption small, #caMarketing .entry-import > span, #caMarketing .builder-context{ color: rgb(129, 112, 141); } #caMarketing .piece p{ color: inherit; } #caMarketing .design-piece.digital-script.theme-ink{ background: rgb(244, 241, 232); color: rgb(48, 62, 61); } #caMarketing .design-piece.digital-script.theme-ink .design-footer{ color: rgb(48, 62, 61); } /* from the prototype's motion.css */ #caMarketing .campaign-tile{ transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms; } #caMarketing .campaign-tile:hover{ transform: translateY(-3px); } #caMarketing .campaign-tile:active{ transform: scale(0.985); } #caMarketing .campaign-tile .campaign-sheet{ transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1); } #caMarketing .campaign-tile:hover .campaign-sheet:first-child{ transform: translateY(-5px) rotate(-5deg); } #caMarketing .campaign-tile:hover .secondary-sheet{ transform: translateY(-3px) rotate(7deg); } #caMarketing .product-choice .choice-check{ transition: transform 220ms, background 220ms; } #caMarketing .product-choice.selected .choice-check{ animation: 250ms ease 0s 1 normal none running cm-selection-pop; } @media (prefers-reduced-motion: reduce){ #caMarketing .campaign-tile, #caMarketing .campaign-tile .campaign-sheet, #caMarketing .product-choice .choice-check{ transition: none; animation: auto ease 0s 1 normal none running none; } #caMarketing .campaign-tile:hover, #caMarketing .campaign-tile:active, #caMarketing .campaign-tile:hover .campaign-sheet:first-child, #caMarketing .campaign-tile:hover .secondary-sheet{ transform: none; } } /* The prototype's selection-pop, renamed because keyframe names are global. */ @keyframes cm-selection-pop{ 0%{ transform: scale(0.7); } 65%{ transform: scale(1.12); } 100%{ transform: scale(1); } } /* ---------- not from the prototype ---------- Two things the prototype has no screen for, added in phase 4 and agreed with Brendan on 2026-10-01: the agent's own listings on a property campaign's first question, and the linked listing's gallery on the photo step. Hand-written, in the prototype's own vocabulary: the field label's type and colour, the product picker's card, border and selected state. */ #caMarketing .mk-gallery-picks > span{ display: block; font-size: 12px; margin-bottom: 10px; color: rgb(141, 118, 158); } #caMarketing .mk-gallery-pick.selected{ border: 2px solid rgb(156, 121, 182); } #caMarketing .mk-gallery-picks{ width: 100%; } #caMarketing .mk-gallery-picks > div{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } #caMarketing .mk-gallery-pick{ display: block; padding: 0px; aspect-ratio: 3 / 2; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: rgb(240, 237, 243); } #caMarketing .mk-gallery-pick img{ display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0px; } #caMarketing .mk-gallery-pick:focus-visible{ outline: rgb(171, 133, 198) solid 3px; outline-offset: 3px; } /* Market Update's figures, fitted to their grids. Brendan, 2026-10-04. In three pieces the prototype's figures are taller than the grid that holds them and print over the paragraph below, its own sample data included (found by the backend's render proof, AGENT-LOG 2026-10-04). Letting the grids grow only pushed the text into the footer, since these are fixed canvases, so the contents are fitted instead and nothing else on the piece moves. - After Hours post and newsletter: the right-hand column's two figures are set a little smaller and tighter, their labels sit closer, and the grid gives up most of its inner padding, so the column fits inside the grid's 29cqw. The large figure is unchanged, and nothing below moves. - Sunday story: its rows were spaced by a percentage of a height the browser does not know while sizing the grid, so they overflowed it. The grid was sized with no gap between rows; now it is drawn that way, each row still divided by its own rule. */ #caMarketing .financial-design.theme-ink:is(.size-square, .size-portrait) .metric-grid > div:not(:first-child) strong{ font-size: 4.2cqw; line-height: 1; } #caMarketing .financial-design.theme-ink:is(.size-square, .size-portrait) .metric-grid > div:not(:first-child) small{ margin-top: 1cqw; } #caMarketing .financial-design.theme-ink:is(.size-square, .size-portrait) .metric-grid{ padding: 1cqw 0px 0px; } #caMarketing .design-piece.size-story.theme-estate .metric-grid{ row-gap: 0px; } /* The invitation at 5 x 7 in, beside letter (Brendan, 2026-10-04). The same design in the card's shape: everything in it is sized by width, and the card is a little taller than letter in proportion, so it fills as is. */ #caMarketing .piece.size-portrait.format-5x7{ aspect-ratio: 5 / 7; } /* The newsletter's and the script's words, to copy, below the finished collection (Brendan, 2026-10-04). Not in the prototype: its brief-panel card and its section heading, with the words set as they are written. */ #caMarketing .mk-copy-texts{ margin-top: 40px; } #caMarketing .mk-copy-texts > h2{ font-size: 20px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 19px; } #caMarketing .mk-copy-texts > div{ display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px; } #caMarketing .mk-copy-text{ padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: white; min-width: 0px; } #caMarketing .mk-copy-text > header{ display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 16px; } #caMarketing .mk-copy-text > header strong{ font-size: 14px; } #caMarketing .mk-copy-text pre{ margin: 0px; max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px / 1.6 var(--sans); color: var(--ink); } #caMarketing .mk-copy-text pre:focus-visible{ outline: 2px solid var(--purple); outline-offset: 4px; } @media (max-width: 760px){ #caMarketing .mk-copy-texts > div{ grid-template-columns: 1fr; } }