/* ========================================================================== DIM Electrical: partner referral program -------------------------------------------------------------------------- Loaded after main.css on /partners/, /partners/signup/ and /partners/dashboard/. Nothing here redefines a global token: the ink, orange, wash and radius scale all come from main.css so the section reads as part of the same site rather than a microsite bolted on the side. Two registers live in this file, and they are deliberately different. .p* the marketing surface. Brand register. Fluid type, generous rhythm, full bleed photography, ink bands for punctuation. .pdash the partner dashboard. Product register. Fixed rem type, tight 1.15 scale, one accent, density over drama. A person checking whether they have been paid does not want choreography. Stage colours are lifted verbatim from crm/index.html so a lead that reads "Quoted" to DIM reads the same amber to the partner who sent it. ========================================================================== */ /* The contrast overrides that used to live here are now the real values in main.css, so every page gets them rather than just this section. .p-scope stays on the three partner tags: it costs nothing and it is the hook if this section ever needs to diverge again. */ :root { --p-new: #7c6f64; --p-contacted: #1d4ed8; --p-quoted: #a16207; --p-won: #15803d; --p-lost: #9f1239; /* Was orange fading to transparent, which ran out of strength at exactly the step that is the payoff. Now it gains toward step four and resolves in the same amber as .pscale__bar, so the rail and the commission scale are one gradient in two places rather than two decorations. */ --p-rail: linear-gradient(90deg, rgba(224, 119, 37, 0.3) 0%, var(--orange) 82%, var(--sun) 100%); } /* ========================================================================== 1. Hero Asymmetric on purpose: the copy column is wider than the photo column and the photo hangs below the fold line, so the eye lands on the sentence rather than splitting evenly between the two. ========================================================================== */ .phero { position: relative; background: var(--wash); padding-block: clamp(38px, 6vw, 76px) clamp(48px, 7vw, 92px); overflow: hidden; } .phero::after { /* Warm bloom behind the photo. Sits under everything and never intercepts a click. */ content: ""; position: absolute; top: -12%; right: -8%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle, rgba(245, 166, 35, 0.22) 0%, transparent 68%); pointer-events: none; z-index: 0; } .phero > .container { position: relative; z-index: 1; } .phero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .phero h1 { font-size: clamp(2.4rem, 6.4vw, 4.15rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 0.36em; max-width: 15ch; text-wrap: balance; } /* The colour marks the object of the imperative, so it says what is being asked for rather than floating as a category label. */ .phero h1 em { font-style: normal; color: var(--orange-hover); } /* The second sentence is a shrug, not fine print. Same ink, same family, half the size: scale does the demoting. Greying it or dropping it into the lede is exactly how a page quietly stops being sent switchboards. */ .phero h1 .phero__and { display: block; margin-top: 0.14em; font-size: 0.5em; font-weight: 700; letter-spacing: -0.022em; color: var(--ink); } .phero__lede { font-size: clamp(1.04rem, 1.5vw, 1.16rem); color: #5b524d; max-width: 46ch; margin-bottom: 26px; } .phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } /* Credential chips. Reads as a row of facts, not a card. */ /* Four facts instead of three needs more structure, not more decoration, so a hairline does the grouping and full ink does the emphasis. Text goes from #5b524d on 72% white to --ink on solid white, which raises contrast rather than spending it. */ .pchips { display: flex; flex-wrap: wrap; gap: 9px 10px; list-style: none; padding: 20px 0 0; margin: 4px 0 0; border-top: 1px solid var(--line); } .pchips li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 15px 8px 11px; border: 1px solid #EBE1D6; border-radius: 999px; background: var(--white); font-size: 0.86rem; font-weight: 600; color: var(--ink); } .pchips .icon { width: 16px; height: 16px; color: var(--orange-hover); } /* The photo, in an offset frame with a hanging tag. */ .phero__media { position: relative; margin: 0; } .phero__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--tint); } .phero__frame img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; /* The source is a tall portrait and the two of them stand in its lower third, so a centred crop fills the frame with roof. Pulled down and slightly right to put them on the frame's right hand third, which also keeps them clear of the tag in the bottom left corner. */ object-position: 56% 72%; } /* Pick one thing and make it the moment. The fold is a warm cream wash under a sunlit photograph, so the single darkest object in it is where the eye goes, and it now carries the fact a homeowner actually worries about rather than the commission. Deliberately not the hero metric template: one number on a photograph, not a row of stat tiles. */ .phero__tag { position: absolute; left: clamp(-20px, -2.2vw, -8px); bottom: 26px; display: grid; gap: 4px; padding: 16px 26px 18px; border-radius: var(--radius); background: var(--ink); border: 1px solid var(--ink); box-shadow: var(--shadow-lg); } /* The same amber on ink as .pscale__cap b further down the page, so the two biggest numbers read as one system instead of two decorations. */ .phero__tag b { font-family: var(--font-display); font-size: clamp(1.55rem, 2.9vw, 2.05rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--sun); } .phero__tag span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); } /* Past 1180px the photo stops being a polite column and runs off the right edge, square on that side. Two rounded rectangles side by side is the shape of every template hero; one of them breaking the container is what makes the fold read as designed. The left edge stays on its grid track so the plaque does not move, and .phero's overflow:hidden clips the bleed. */ @media (min-width: 1180px) { .phero__grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); } .phero__media { margin-right: calc((var(--container) - 100vw) / 2); } .phero__frame { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .phero::after { right: -20%; } } @media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; gap: 32px; } .phero h1 { max-width: 18ch; } .phero__media { max-width: 560px; } } /* ========================================================================== 2. Reputation band The emotional core, said once, on ink. Photo left, statement right. ========================================================================== */ .pname { background: var(--ink); color: var(--white); } .pname__grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(26px, 5vw, 60px); align-items: center; } .pname__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--tint); } .pname__photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 22%; } .pname h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); letter-spacing: -0.022em; max-width: 20ch; margin-bottom: 0.55em; } .pname__lede { color: rgba(255, 255, 255, 0.76); max-width: 52ch; margin-bottom: 26px; } .ppromise { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; } .ppromise li { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; margin: 0; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.13); } .ppromise li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.13); } .ppromise .icon { width: 20px; height: 20px; color: var(--sun); margin-top: 2px; } .ppromise b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .ppromise span { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; } @media (max-width: 860px) { .pname__grid { grid-template-columns: 1fr; } .pname__photo { max-width: 420px; } } /* ========================================================================== 3. The track Four steps on one connected rail. Not four cards: the rail is the point, because the whole promise is that the lead keeps moving after it leaves the partner's hands. Node four is orange because it is the payoff. ========================================================================== */ /* It is an
    because the order is meaningful, but the numbers are drawn as nodes on the rail. Without this reset the browser stacks its own "1." next to every heading and the step is numbered twice. main.css also puts 1.3em of padding on every list, which would shove the whole rail off its grid. */ .ptrack { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.6vw, 34px); list-style: none; padding-left: 0; margin: 0; } .ptrack > li { margin-bottom: 0; } .ptrack::before { content: ""; position: absolute; top: 26.5px; left: 28px; right: calc(25% - 28px); height: 3px; background: var(--p-rail); border-radius: 3px; } .pstep { position: relative; padding-top: 76px; min-width: 0; } .pstep__num { position: absolute; top: 0; left: 0; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 1.26rem; letter-spacing: -0.01em; /* The ring is the page background, so the rail appears to pass behind the node rather than butt up against it. */ box-shadow: 0 0 0 6px var(--white); } .pstep--paid .pstep__num { background: var(--btn-orange); } .pstep h3 { font-size: 1.16rem; margin-bottom: 8px; } .pstep p { color: var(--muted); font-size: 0.96rem; margin: 0; } @media (max-width: 820px) { /* Rail rotates to vertical. The container cannot draw it: a vertical rail has to stop at the LAST node's centre, and only the last step knows where that is, so any bottom offset on the container is a guess. Each step draws its own segment instead, from its node down to the next one, which lands exactly right whatever the copy does to the row heights. */ .ptrack { grid-template-columns: 1fr; gap: 0; } .ptrack::before { content: none; } .pstep { padding: 0 0 32px 78px; } .pstep:last-child { padding-bottom: 0; } .pstep__num { top: 0; box-shadow: 0 0 0 6px var(--white); } .pstep::before { content: ""; position: absolute; left: 27px; top: 28px; /* The gap is 0, so the step's bottom edge is the next step's top edge and 28px past it is the next node's centre. Follows .pstep__num's radius. */ bottom: -28px; width: 3px; border-radius: 2px; background: var(--orange); } /* Fades along the run, matching the horizontal gradient on desktop. */ .pstep:nth-child(2)::before { background: rgba(224, 119, 37, 0.62); } .pstep:nth-child(3)::before { background: rgba(224, 119, 37, 0.36); } .pstep:last-child::before { content: none; } } /* ========================================================================== 4. Who this is for Trades as type, photos as an asymmetric mosaic. A uniform grid of eight icon cards is the reflex answer here and it is the wrong one: the point is "you already know who you are", which type says better than icons. ========================================================================== */ .pfor__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 5vw, 62px); align-items: center; } .pfor__grid .lede { margin-bottom: 26px; } /* This section's argument is "you already know who you are", and the file's own note says type says that better than icons. It was then set barely above body size. With the hero naming batteries three times, this list is the page's answer to a landscaper wondering whether he is still invited, so it is the loudest thing in the section. */ .ptrades { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 5px 0; } .ptrades li { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3.1vw, 2rem); letter-spacing: -0.032em; line-height: 1.16; color: var(--ink); } .ptrades li + li::before { content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; margin: -4px 15px 0; border-radius: 50%; background: var(--orange); } .pfor__after { color: var(--muted); max-width: 44ch; } .pfor__after strong { color: var(--ink); } .pmosaic { display: grid; grid-template-columns: 1fr 0.86fr; grid-template-rows: auto auto; gap: clamp(10px, 1.4vw, 16px); } .pmosaic figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--tint); } .pmosaic img { width: 100%; height: 100%; object-fit: cover; } .pmosaic__tall { grid-column: 2; grid-row: 1 / span 2; } /* The roofer sits low in his frame, so a centred crop hands the tall panel a lot of empty sky once the column narrows at tablet width. */ .pmosaic__tall img { aspect-ratio: 3 / 5.1; object-position: 50% 62%; } .pmosaic__wide img { aspect-ratio: 4 / 2.9; } /* Nudge the tall frame down so the mosaic is not a tidy rectangle. */ .pmosaic__tall { transform: translateY(clamp(10px, 2vw, 24px)); } @media (max-width: 860px) { .pfor__grid { grid-template-columns: 1fr; } .pmosaic { max-width: 560px; } .pmosaic__tall { transform: none; } } @media (max-width: 460px) { .pmosaic { grid-template-columns: 1fr; } .pmosaic__tall { grid-column: 1; grid-row: auto; } .pmosaic__tall img { aspect-ratio: 4 / 3.2; } } /* ========================================================================== 5. What it pays The range as a scale, not a hero number. A single enormous "$500" would read as the pitch; the scale reads as the truth, which is that the figure moves with the job. ========================================================================== */ .pearn { background: var(--ink); color: var(--white); } /* Amber rather than orange on ink: the orange eyebrow is legible but the sun tone is what the scale below resolves to, so the two read as one idea. */ .pearn .eyebrow { color: var(--sun); } .pearn .eyebrow::before, .pearn .eyebrow::after { background: var(--sun); } .pname h2, .pearn h2 { color: var(--white); font-size: clamp(1.85rem, 4.4vw, 3.05rem); letter-spacing: -0.03em; line-height: 1.06; } .pname h2 { max-width: 16ch; } .pearn h2 { max-width: 13ch; } /* Light type on dark reads lighter than it measures, so the ledes get the line height back. */ .pname__lede, .pearn__lede { font-size: 1.08rem; line-height: 1.7; } /* Rhythm. The ink bands are the page's held notes and the sections between them are the working parts, so they do not all share one --section-pad. */ .pname, .pearn { padding-block: clamp(64px, 10vw, 124px); } .pclose { padding-block: clamp(60px, 9vw, 112px); } .pearn__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 64px); align-items: start; } .pearn h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); letter-spacing: -0.022em; max-width: 16ch; } .pearn__lede { color: rgba(255, 255, 255, 0.76); max-width: 46ch; } .pscale { margin: 0 0 6px; padding: 24px 24px 20px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.11); } .pscale__bar { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(224, 119, 37, 0.3) 0%, var(--orange) 78%, var(--sun) 100%); } .pscale__ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 13px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.66); } .pscale__ends span:last-child { text-align: right; } .pscale__cap { display: flex; align-items: baseline; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .pscale__cap b { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--sun); font-variant-numeric: tabular-nums; } .pscale__cap span { font-size: 0.93rem; color: rgba(255, 255, 255, 0.72); } /* Plain facts as a definition list. Rows, not tiles. */ .pfacts { margin: 0; display: grid; gap: 0; } .pfacts > div { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: 10px 22px; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.13); } .pfacts > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.13); } .pfacts dt { font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; color: var(--white); } .pfacts dd { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; } @media (max-width: 860px) { .pearn__grid { grid-template-columns: 1fr; } .pfacts > div { grid-template-columns: 1fr; gap: 3px; padding: 13px 0; } } @media (max-width: 560px) { /* Both ends of the scale are long enough to wrap on a phone. Keeping them pinned left and right preserves what the bar means; the smaller size is what stops them colliding in the middle. */ .pscale { padding: 20px 18px 18px; } .pscale__ends { font-size: 0.79rem; gap: 12px; } .pscale__ends span { max-width: 47%; } } /* ========================================================================== 6. Dashboard preview on the marketing page Real rows in the real component, not a screenshot. It cannot go stale and it proves the thing exists. ========================================================================== */ .ppreview__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(26px, 4.5vw, 56px); align-items: center; } .ppreview__pane { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); overflow: hidden; } .ppreview__bar { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--wash); font-size: 0.83rem; font-weight: 600; color: var(--muted); } .ppreview__bar .icon { width: 15px; height: 15px; color: var(--orange); } /* The preview shows four fields, not five, and sits in a narrower column than the real dashboard, so it gets its own track sizing. Inheriting the five column grid left an empty column on the right and squeezed the job text until it broke mid word. */ .ppreview__pane .plead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto auto; padding-inline: 18px; } .ppreview__pane .plead__job { overflow-wrap: normal; } @media (max-width: 560px) { .ppreview__pane .plead { grid-template-columns: 1fr; } } @media (max-width: 860px) { .ppreview__grid { grid-template-columns: 1fr; } } /* ========================================================================== 7. Closing call to action ========================================================================== */ .pclose { background: var(--tint); } .pclose__inner { max-width: 660px; } .pclose h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.022em; } .pclose .lede { margin-bottom: 24px; } .pclose__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* ========================================================================== 8. Signup form ========================================================================== */ .psign__crumb { margin-bottom: 22px; } .psign__crumb a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background-color 160ms var(--ease), border-color 160ms var(--ease); } .psign__crumb a:hover { background: var(--tint); border-color: #e2d4c6; color: var(--orange-hover); } .psign__crumb .icon { width: 16px; height: 16px; color: var(--orange); } .psign__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 4.5vw, 56px); align-items: start; } .psign__card .form-note { margin-top: 14px; text-align: center; } .psign__card { padding: clamp(22px, 3.4vw, 38px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); } .psign__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } @media (max-width: 620px) { .psign__row { grid-template-columns: 1fr; } } /* The site's .field pattern, with a required marker and a hint line. */ .field .req { color: var(--orange-hover); margin-left: 2px; } .field .field-hint { display: block; font-size: 0.83rem; color: var(--muted); margin-top: 6px; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7370' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px; } .field.has-error select, .field.has-error textarea { border-color: #B3261E; } .field.is-ok input, .field.is-ok select, .field.is-ok textarea { border-color: #6f9d7c; } .psign__submit { width: 100%; } /* The privacy link took the consent box's place under the button, so the note needs to read as a sentence rather than a caption. */ .papply .form-note a { color: var(--orange-hover); } .psign__err { margin: 0 0 16px; padding: 12px 15px; border-radius: var(--radius-sm); background: #FDECEA; border: 1px solid #E8B4AE; color: #8C1D18; font-size: 0.92rem; } .psign__err[hidden] { display: none; } /* Aside: what happens next. Numbered, quiet, no card nesting. */ .pnext { position: sticky; top: 96px; } .pnext h2 { font-size: 1.22rem; margin-bottom: 16px; } .pnext ol { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: pn; } .pnext li { counter-increment: pn; display: grid; grid-template-columns: 27px 1fr; gap: 13px; align-items: start; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--muted); } .pnext li:last-child { border-bottom: 1px solid var(--line); } .pnext li::before { content: counter(pn); display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--tint); color: var(--orange-hover); font-family: var(--font-display); font-weight: 800; font-size: 0.83rem; } .pnext strong { display: block; color: var(--ink); font-weight: 700; } .pnext__call { padding: 18px 20px; border-radius: var(--radius); background: var(--wash); border: 1px solid var(--line); } .pnext__call p { font-size: 0.92rem; color: var(--muted); margin-bottom: 12px; } @media (max-width: 900px) { .psign__grid { grid-template-columns: 1fr; } .pnext { position: static; } } /* Success state. Replaces the form in place so the page does not jump. */ .pdone { text-align: center; padding: clamp(16px, 3vw, 30px) 0; } .pdone__tick { width: 62px; height: 62px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: #E7F3EA; color: #15803d; } .pdone__tick .icon { width: 30px; height: 30px; stroke-width: 2.4; } .pdone h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: 10px; } .pdone p { color: var(--muted); max-width: 46ch; margin-inline: auto; } .pdone__what { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); text-align: left; } .pdone__what p { color: var(--muted); } .pdone__what strong { color: var(--ink); } .pdone__act { margin-top: 16px; } /* The card takes focus when it swaps in, so it needs a focus ring that does not look like a mistake on a non keyboard user's screen. */ .psign__card:focus { outline: none; } .psign__card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; } /* ========================================================================== 9. Partner dashboard Product register from here down. Fixed type scale, one accent, no motion that is not reporting a state change. ========================================================================== */ .pdash-page { background: var(--wash); } .pdash__note { display: flex; gap: 11px; align-items: flex-start; padding: 13px 17px; margin-bottom: 26px; border: 1px solid #E6D4B8; border-radius: var(--radius-sm); background: var(--sun-tint); font-size: 0.9rem; line-height: 1.5; color: #6b4e15; } .pdash__note .icon { width: 17px; height: 17px; color: #a16207; flex: none; margin-top: 2px; } .pdash__note strong { color: #55400f; } .pdash__note a { color: #7A4A05; } .pdash__note a:hover { color: #55400f; } .pdash__top { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .pdash__top h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 4px; } .pdash__who { color: var(--muted); font-size: 0.94rem; margin: 0; } .pdash__who b { color: var(--ink); font-weight: 700; } /* Stat rail. Four figures divided by hairlines, not four floating tiles. Tabular numerals so the columns do not jitter between states. */ .pstats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; margin-bottom: 22px; } .pstat { padding: 17px 20px; border-left: 1px solid var(--line); } .pstat:first-child { border-left: 0; } .pstat dt { font-size: 0.79rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .pstat dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .pstat--money dd { color: var(--ink); } .pstat--pending dd { color: var(--orange-hover); } @media (max-width: 720px) { .pstats { grid-template-columns: 1fr 1fr; } .pstat:nth-child(odd) { border-left: 0; } .pstat:nth-child(n + 3) { border-top: 1px solid var(--line); } } /* Stage filters. Same chip vocabulary as the CRM. */ .pfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } /* An author display value beats the UA stylesheet's [hidden] rule, so both of these stayed on screen in the empty state where the script had hidden them. Filtering nothing and a second copy of "here is how to refer someone" are exactly the clutter the empty state is supposed to remove. */ .pfilters[hidden], .prefer[hidden] { display: none; } .pfilter { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease); } .pfilter:hover { border-color: #cfc7c1; background: var(--wash); } .pfilter__n { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--muted); transition: color 160ms var(--ease); } .pfilter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); } .pfilter[aria-pressed="true"] .pfilter__n { color: rgba(255, 255, 255, 0.66); } /* The lead list. Not a : switching a table to display:block on mobile throws away its semantics, and a horizontal scroller for six columns is miserable on a phone. This is a list of articles that grid into columns on desktop, so every field keeps its own label at every width. */ .pdash__pane { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; } .pdash__head, .plead { display: grid; grid-template-columns: minmax(0, 1.35fr) 0.9fr minmax(0, 1.5fr) 1.05fr 1fr; gap: 8px 18px; align-items: center; padding: 14px 20px; } .pdash__head { background: var(--wash); border-bottom: 1px solid var(--line); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-block: 11px; } .pdash__list { list-style: none; padding: 0; margin: 0; } .plead { border-top: 1px solid var(--line); transition: background-color 150ms var(--ease); } .pdash__list > .plead:first-child { border-top: 0; } .plead:hover { background: #FCFAF7; } .plead > * { margin: 0; min-width: 0; } .plead__name { font-family: var(--font-display); font-size: 0.99rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .plead__date, .plead__job { color: var(--muted); font-size: 0.92rem; } .plead__job { overflow-wrap: anywhere; } /* Column headers are decorative; these carry the real label for a screen reader at every viewport. */ .plead__k { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Stage badge. Colour is never the only signal: every badge carries its label, and won/lost differ in shape as well as hue. */ .pbadge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 0.83rem; font-weight: 650; white-space: nowrap; border: 1px solid transparent; } .pbadge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .pbadge--new { color: #5f554b; background: #F2EFEC; border-color: #E3DDD7; } .pbadge--contacted { color: #1d4ed8; background: #EAF0FE; border-color: #CBDAFB; } .pbadge--quoted { color: #7A4A05; background: #FDF3E2; border-color: #F0DEBB; } /* #15803d, the CRM's green, measures 4.4:1 on this tint. A shade deeper clears AA while still reading as the same status colour. */ .pbadge--won { color: #0F6B31; background: #E7F3EA; border-color: #C3E2CD; } .pbadge--lost { color: #9f1239; background: #FDECF0; border-color: #F3CBD6; } /* Won gets a tick, lost gets a hollow ring. Legible without colour. */ .pbadge--won .pbadge__dot { width: 13px; height: 13px; background: none; border: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6B31' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .pbadge--lost .pbadge__dot { background: none; border: 2px solid currentColor; width: 10px; height: 10px; } /* Payout cell. */ .plead__pay { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .plead__amt { font-family: var(--font-display); font-weight: 700; font-size: 0.99rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .plead__none { color: #7E736D; font-size: 1.05rem; line-height: 1; } .ppay { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; } .ppay--paid { color: #0F6B31; background: #E7F3EA; } .ppay--pending { color: #7A4A05; background: #FDF3E2; } @media (max-width: 900px) { /* Cards. Each field regains a visible label, so nothing depends on a header row that is no longer there. */ .pdash__head { display: none; } .plead { grid-template-columns: 1fr; gap: 7px; padding: 17px 18px; } .plead__k { position: static; width: auto; height: auto; margin: 0 6px 0 0; clip: auto; overflow: visible; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .plead__name { font-size: 1.06rem; margin-bottom: 2px; } .plead__stage { margin-top: 3px; } } /* Empty state. Teaches the next action rather than announcing a void. */ .pempty { padding: clamp(34px, 6vw, 60px) clamp(20px, 4vw, 44px); text-align: center; } .pempty__mark { width: 60px; height: 60px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--orange-hover); } .pempty__mark .icon { width: 27px; height: 27px; } .pempty h2 { font-size: 1.3rem; margin-bottom: 8px; } .pempty > p { color: var(--muted); max-width: 44ch; margin-inline: auto; } .pempty__how { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; max-width: 620px; margin: 28px auto 0; text-align: left; } .pempty__how > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); } .pempty__how b { display: block; font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 4px; } .pempty__how p { margin: 0; font-size: 0.9rem; color: var(--muted); } .pempty__how a { font-weight: 700; } /* No results after filtering. Distinct from "no leads at all". */ .pnone { padding: 42px 24px; text-align: center; color: var(--muted); } .pnone b { display: block; color: var(--ink); font-family: var(--font-display); margin-bottom: 5px; } /* Refer panel under the list. */ .prefer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 30px; align-items: center; margin-top: 22px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .prefer h2 { font-size: 1.12rem; margin-bottom: 5px; } .prefer p { margin: 0; color: var(--muted); font-size: 0.94rem; } .prefer__acts { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 720px) { .prefer { grid-template-columns: 1fr; } .prefer__acts .btn { flex: 1 1 auto; } } /* ========================================================================== 10. Join layout Structured after the reference the owner picked: a centred hero over a row of facts, a numbered rail, a benefit grid, then one long grouped application form. Rendered in DIM's own tokens rather than the reference palette, so it reads as this site and not as somebody else's. One deliberate departure. The three things a partner gets are not three equal tiles. Battery work is the priority, so it carries more weight than the other two; a flat 3 up would say they matter equally, which is the opposite of the brief. ========================================================================== */ .pjoin { background: var(--wash); padding-block: clamp(40px, 6.5vw, 84px) clamp(36px, 5.5vw, 68px); text-align: center; } .pjoin__inner { max-width: 760px; margin-inline: auto; } .pjoin .eyebrow { justify-content: center; } /* Sized down from the 3.6rem the old headline used. That one was three short fragments; this one is three full sentences, and at 3.6rem it broke as "bill. Earn commissions." with the last sentence stranded on its own line. balance evens the ragged edge out so no line ends on a full stop mid phrase. */ .pjoin h1 { font-size: clamp(1.9rem, 4.5vw, 2.95rem); line-height: 1.07; letter-spacing: -0.032em; margin-bottom: 0.45em; text-wrap: balance; } .pjoin h1 em { font-style: normal; color: var(--orange-hover); } .pjoin__lede { font-size: clamp(1.04rem, 1.5vw, 1.16rem); color: #5b524d; max-width: 60ch; margin-inline: auto; margin-bottom: 28px; } .pjoin__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* The row of facts under the hero, as free standing pills rather than a ruled strip. Every one is checkable. There is no visitor count or partner count here because neither exists yet. Each pill is one line, so the label sits beside the number instead of under it. That is what stops the row reading as three stacked mini cards. */ .pfacts3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); padding: 0; list-style: none; } .pfacts3 li { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 11px 22px 11px 17px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .pfacts3 .icon { width: 19px; height: 19px; color: var(--orange-hover); flex: none; } .pfacts3 b { font-family: var(--font-display); font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; } .pfacts3 span { font-size: 0.92rem; color: var(--muted); } /* Under about 420px three pills will not sit two up without the middle one wrapping mid phrase, so give them the full row and centre the content. */ @media (max-width: 420px) { .pfacts3 li { width: 100%; justify-content: center; } } /* ---- the three things a partner gets ---------------------------------- */ /* This section carries no eyebrow and no h2, so the standard section padding, which is sized to hold a heading block, leaves the cards stranded in white. Tighter top and bottom pulls them up under the hero where they belong. */ .ppillars-sec { padding-block: clamp(34px, 5vw, 68px); } /* Two columns, not three. As a 3 up the two shorter cards each carried a block of dead space under the last line, and letting them size to content instead left the right hand two thirds of the row ragged and unfinished. Spanning the priority card down the left and stacking the other two beside it uses every pixel, and it stops the row reading as a card grid at all. */ .ppillars { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); /* stretch, so the two stacked cards absorb the lead card's overhang between them instead of leaving one gap under the last one. With the product plate fixed at 4:3 the overhang is about 90px, so it splits into roughly 45px of slack each, which reads as padding rather than a hole. */ align-items: stretch; } .ppillar--lead { grid-row: span 2; } .ppillar { display: flex; flex-direction: column; padding: clamp(22px, 2.8vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); } /* The photo is what makes the priority card structurally different from the other two rather than just darker. It also shows the work a partner is being asked to vouch for, which nothing else on the page does. This is a product shot on a white sweep, not a photograph of a place, so it gets a plate rather than a bleed and it is never cropped. Cover would slice the tower, and bleeding a white background to the edges of a near black card would read as a blown out panel with a small battery lost in the middle. The plate is --white so the sweep and the panel are the same colour and there is no visible seam around the product. Fixed to its own 8:5 ratio rather than flexing to fill leftover height: a product needs a consistent size, not whatever space is going. */ .ppillar__shot { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; /* auto, so when the card stretches to match the two stacked beside it the slack opens above the plate and the card still ends flush with it. The gap itself comes off the paragraph, because auto alone collapses to zero when there is no slack and the plate would butt against the copy. */ margin-top: auto; background: var(--white); border-radius: var(--radius); } .ppillar--lead p { margin-bottom: 22px; } /* The lead pillar is ink, so the eye lands on the work DIM actually wants. Doubled up as .ppillar.ppillar--lead because a single .ppillar--lead p ties with .ppillar p on specificity and loses on order, which left light copy sitting on a near black card at 2.78:1. */ .ppillar--lead { background: var(--ink); border-color: var(--ink); color: var(--white); } /* The big Up to $500 used to do the hierarchy work on this card. With it gone the heading has to, or the lead pillar reads as the same card in a darker shirt. */ .ppillar.ppillar--lead h3 { color: var(--white); font-size: clamp(1.32rem, 2.2vw, 1.55rem); letter-spacing: -0.02em; } .ppillar.ppillar--lead p { color: rgba(255, 255, 255, 0.82); } .ppillar__tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; margin-bottom: 16px; border-radius: 999px; background: var(--tint); color: var(--orange-hover); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .ppillar--lead .ppillar__tag { background: rgba(245, 166, 35, 0.16); color: var(--sun); } .ppillar__tag .icon { width: 14px; height: 14px; } .ppillar h3 { font-size: 1.14rem; margin-bottom: 8px; } .ppillar p { color: var(--muted); font-size: 0.97rem; margin: 0; } @media (max-width: 880px) { /* Single column, so the span has to be cancelled or the lead card claims two rows of a one column grid and leaves a hole under it. */ .ppillars { grid-template-columns: 1fr; } .ppillar--lead { grid-row: auto; } } /* ---- five step rail ---------------------------------------------------- */ .p5 { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.8vw, 24px); list-style: none; padding-left: 0; margin: 0; } .p5::before { content: ""; position: absolute; top: 25px; left: 26px; right: calc(20% - 26px); height: 3px; border-radius: 3px; background: var(--p-rail); } .p5 > li { position: relative; padding-top: 68px; margin: 0; min-width: 0; } .p5__num { position: absolute; top: 0; left: 0; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; /* The ring exists so the rail appears to pass behind the node, so it has to be the colour actually behind it. This rail sits on a --wash section, and --white left a visible halo on the cream. */ box-shadow: 0 0 0 6px var(--wash); } /* Step 2 is the vetting call and step 5 is the payoff, so both are orange. */ /* Alternating down the rail: 1 orange, 2 ink, 3 orange, 4 ink, 5 orange. The odd steps are the ones the partner does or gets paid for, so the alternation lands on meaning rather than just rhythm. */ .p5 > li:nth-child(odd) .p5__num { background: var(--btn-orange); } .p5 h3 { font-size: 1.04rem; margin-bottom: 6px; } /* Step 5's heading is the only one that wraps to two lines, which dropped its body copy half a line below the other four and made the rail look untidy. Reserving two lines on every heading puts all five bodies on one baseline. Rail widths only: in the stacked mobile layout it would just be a gap. */ @media (min-width: 901px) { .p5 h3 { min-height: 2lh; } } .p5 p { color: var(--muted); font-size: 0.93rem; margin: 0; } @media (max-width: 900px) { .p5 { grid-template-columns: 1fr; gap: 0; } .p5::before { content: none; } .p5 > li { padding: 0 0 28px 72px; } .p5 > li:last-child { padding-bottom: 0; } .p5 > li::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: -26px; width: 3px; border-radius: 3px; background: rgba(224, 119, 37, 0.42); } .p5 > li:last-child::before { content: none; } } /* ---- benefit grid ------------------------------------------------------ */ /* ---- why partner with us ----------------------------------------------- */ /* Asymmetric on purpose: the question is on the left, the two faces that answer it are on the right, and neither is centred. */ .pwhy__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(36px, 5vw, 64px); } .pwhy__head .eyebrow { justify-content: flex-start; } /* No lede under this one, so the heading is the whole left column and it can carry more weight than a standard section h2. */ .pwhy__head h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); letter-spacing: -0.03em; margin: 0; max-width: 12ch; } /* The studio backdrop in this shot is already the brand cream, so the photo needs a ground of the same family rather than a frame, or the crop edge reads as a mistake. */ .pwhy__who { margin: 0; } .pwhy__who img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--tint); } .pwhy__who figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--muted); } @media (max-width: 820px) { .pwhy__top { grid-template-columns: 1fr; gap: 26px; align-items: start; } .pwhy__head h2 { max-width: none; } } .pben { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 30px); list-style: none; padding-left: 0; margin: 0; } .pben > li { margin: 0; padding-top: 18px; border-top: 2px solid var(--line); } .pben .icon { width: 22px; height: 22px; color: var(--orange-hover); margin-bottom: 12px; } .pben h3 { font-size: 1.05rem; margin-bottom: 7px; } .pben p { color: var(--muted); font-size: 0.95rem; margin: 0; } @media (max-width: 880px) { .pben { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pben { grid-template-columns: 1fr; } } /* ---- the application form --------------------------------------------- */ .papply { background: var(--wash); } .papply__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(26px, 4vw, 52px); align-items: start; } .papply__card { padding: clamp(22px, 3.2vw, 38px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); } .pfs { border: 0; padding: 0; margin: 0 0 26px; } .pfs legend { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0 0 13px; margin-bottom: 18px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .pfs legend .icon { width: 16px; height: 16px; color: var(--orange-hover); } /* What happens after you apply. Sticky, because it answers the question the form provokes while the form is still on screen. */ .pafter { position: sticky; top: 96px; } .pafter h2 { font-size: 1.16rem; margin-bottom: 14px; } /* No trailing margin: the closing note that used to sit under this list is gone, so the list is the last thing in the aside. */ .pafter ol { list-style: none; padding: 0; margin: 0; counter-reset: pa; } .pafter li { counter-increment: pa; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; margin: 0; padding: 13px 0; border-top: 1px solid var(--line); font-size: 0.93rem; color: var(--muted); } .pafter li:last-of-type { border-bottom: 1px solid var(--line); } .pafter li::before { content: counter(pa); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--orange-hover); font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; } .pafter strong { display: block; color: var(--ink); font-weight: 700; } @media (max-width: 900px) { .papply__grid { grid-template-columns: 1fr; } .pafter { position: static; } }