/* ========================================================================== TrustLayer Partner Portal - extra components This file loads AFTER style.css and only ADDS things the main site did not need: the tier ladder, the deal pipeline visual, the signed-in bar, the collateral list and the form kit. Nothing here changes the shared design system. Colours, type and spacing all still come from the tokens at the top of style.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FORM KIT Lifted out of the demo page so every form on this site matches. -------------------------------------------------------------------------- */ .form-card { background: var(--card); border: 1px solid rgba(255,255,255,0.11); border-radius: var(--r-card); padding: clamp(26px, 4vw, 38px); box-shadow: var(--elev-2); } .field { display: grid; gap: 7px; margin-bottom: 18px; } .field label { font-family: var(--font-display); font-weight: 500; font-size: 0.84rem; letter-spacing: 0.01em; color: var(--text); } .field input, .field select, .field textarea { background: #16171B; border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; padding: 0.8em 0.95em; color: var(--text); font-family: var(--font-body); font-size: 0.97rem; width: 100%; } .field textarea { resize: vertical; min-height: 92px; } .field input::placeholder, .field textarea::placeholder { color: #6E747E; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,74,205,0.16); } .field .hint { font-size: 0.78rem; color: var(--muted); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } .next { display: grid; gap: 18px; margin-top: 8px; list-style: none; padding: 0; } .next li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; } .next .step { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(47,74,205,0.5); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; } .next h4 { margin: 0 0 0.2em; font-size: 0.98rem; } .next p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } /* -------------------------------------------------------------------------- 2. THE DEAL PIPELINE VISUAL The hero graphic. A small mock of a partner's registered deals, drawn entirely in HTML and CSS so there is no image to load or maintain. -------------------------------------------------------------------------- */ .pipe { background: linear-gradient(168deg, #24262C 0%, #131418 100%); border: 1px solid rgba(255,255,255,0.11); border-radius: var(--r-card); box-shadow: var(--elev-2); overflow: hidden; } .pipe-top { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } .pipe-top .dots { display: flex; gap: 5px; } .pipe-top .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); } .pipe-top .ttl { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em; } .pipe-top .who { margin-left: auto; font-size: 0.75rem; color: var(--muted); } .pipe-body { padding: 16px; display: grid; gap: 9px; } .deal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.022); } .deal .co { font-family: var(--font-display); font-weight: 500; font-size: 0.9rem; } .deal .meta { font-size: 0.76rem; color: var(--muted); margin-top: 2px; } .deal .pill { font-family: var(--font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35em 0.75em; border-radius: var(--r-pill); white-space: nowrap; } .pill-live { background: rgba(47,74,205,0.14); color: var(--accent); border: 1px solid rgba(47,74,205,0.4); } .pill-review { background: rgba(255,106,61,0.12); color: var(--coral); border: 1px solid rgba(255,106,61,0.34); } .pill-quiet { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid rgba(255,255,255,0.12); } /* The emphasised row - one item per view carries the eye */ .deal.is-lead { border-color: rgba(47,74,205,0.42); background: var(--grad-card); box-shadow: var(--elev-accent); } .pipe-foot { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; color: var(--muted); } .pipe-foot b { font-family: var(--font-display); color: var(--text); font-size: 1.05rem; font-weight: 600; } /* -------------------------------------------------------------------------- 3. THE TIER LADDER Deliberately NOT three equal cards. Each tier is taller than the last, so the progression is something you see before you read it. -------------------------------------------------------------------------- */ .ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; } .rung { border: 1px solid rgba(255,255,255,0.11); border-radius: var(--r-card); background: var(--card); padding: 26px 24px; position: relative; } .rung-1 { padding-top: 30px; } .rung-2 { padding-top: 46px; } .rung-3 { padding-top: 66px; background: var(--grad-card); border-color: rgba(47,74,205,0.42); box-shadow: var(--elev-accent); } .rung .tier { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 0.15em; } .rung .who { font-size: 0.84rem; color: var(--muted); margin-bottom: 18px; } .rung ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rung li { display: flex; gap: 0.6em; font-size: 0.89rem; color: var(--muted); line-height: 1.45; } .rung li::before { content: "\2713"; color: var(--accent); font-weight: 700; flex: none; } .rung .mark { position: absolute; top: 18px; right: 20px; font-family: var(--font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .rung-3 .mark { color: var(--accent); } @media (max-width: 860px) { .ladder { grid-template-columns: 1fr; align-items: stretch; } .rung-1, .rung-2, .rung-3 { padding-top: 26px; } } /* -------------------------------------------------------------------------- 4. BENTO GRID Varied tile sizes, so no two rows read the same. -------------------------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .tile { border: 1px solid rgba(255,255,255,0.11); border-radius: var(--r-card); background: var(--card); padding: 28px 26px; display: flex; flex-direction: column; justify-content: space-between; min-height: 172px; } .tile h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35em; } .tile p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .tile .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4.5vw, 3.1rem); line-height: 1; letter-spacing: -0.045em; margin-bottom: 0.18em; } .tile .big em { font-style: normal; color: var(--accent); } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .tile-lead { background: var(--grad-card); border-color: rgba(47,74,205,0.4); box-shadow: var(--elev-accent); } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .span-2, .span-3, .span-4, .span-6 { grid-column: span 2; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .span-2, .span-3, .span-4, .span-6 { grid-column: span 1; } } /* -------------------------------------------------------------------------- 5. SIGNED-IN BAR Sits at the top of every page inside the private area, so a partner always knows they are in the portal and not on the public site. -------------------------------------------------------------------------- */ .signed { background: rgba(47,74,205,0.07); border-bottom: 1px solid rgba(47,74,205,0.22); font-size: 0.8rem; } .signed .wrap { display: flex; align-items: center; gap: 14px; min-height: 42px; flex-wrap: wrap; } .signed .lock { color: var(--accent); font-weight: 600; font-family: var(--font-display); } .signed .sep { color: var(--muted); } /* The first link pushes to the right; any after it sit beside it. */ .signed .out { color: var(--muted); } .signed .out:first-of-type { margin-left: auto; } .signed .out:hover { color: var(--text); } /* -------------------------------------------------------------------------- 6. COLLATERAL LIST Rows rather than cards, because a library is scanned, not browsed. -------------------------------------------------------------------------- */ .res-group { margin-bottom: clamp(34px, 5vw, 52px); } .res-group > h3 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.1); } .res { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 17px 6px; border-bottom: 1px solid rgba(255,255,255,0.07); } .res:hover { background: rgba(255,255,255,0.018); } .res .kind { width: 40px; height: 40px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.05em; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); color: var(--muted); } .res .kind.pdf { border-color: rgba(255,106,61,0.34); color: var(--coral); } .res .kind.docx { border-color: rgba(47,74,205,0.36); color: var(--accent); } .res .kind.web { border-color: rgba(255,255,255,0.22); color: var(--text); } .res .kind.pptx { border-color: rgba(255,106,61,0.4); color: var(--coral); } .res .rname { font-family: var(--font-display); font-weight: 500; font-size: 0.96rem; } .res .rdesc { font-size: 0.85rem; color: var(--muted); margin-top: 3px; line-height: 1.45; } .res .rget { white-space: nowrap; } @media (max-width: 620px) { .res { grid-template-columns: 40px 1fr; } .res .rget { grid-column: 2; justify-self: start; margin-top: 8px; } } /* -------------------------------------------------------------------------- 7. OBJECTION CARDS The question in display type, the answer underneath in muted body. -------------------------------------------------------------------------- */ .objs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .obj { border: 1px solid rgba(255,255,255,0.11); border-left: 2px solid var(--accent); border-radius: var(--r-card); background: var(--card); padding: 24px 26px; } .obj .q { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.015em; margin-bottom: 0.6em; display: block; } .obj .a { margin: 0; color: var(--muted); font-size: 0.91rem; line-height: 1.6; } .obj .a b { color: var(--text); font-weight: 600; } @media (max-width: 820px) { .objs { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 8. COMPARISON TABLE Scrolls sideways on a phone rather than squashing. -------------------------------------------------------------------------- */ .cmp-scroll { overflow-x: auto; } .cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.92rem; } .cmp th, .cmp td { text-align: left; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,0.09); } .cmp thead th { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .cmp tbody th { font-family: var(--font-display); font-weight: 500; color: var(--text); } .cmp td { color: var(--muted); } .cmp .us { background: rgba(47,74,205,0.055); border-left: 1px solid rgba(47,74,205,0.28); border-right: 1px solid rgba(47,74,205,0.28); color: var(--text); } .cmp thead .us { color: var(--accent); } /* -------------------------------------------------------------------------- 9. TO-CONFIRM FLAG Anything on this site that still needs sign-off from Ed or Gareth is wrapped in one of these, so nothing unapproved goes out looking final. Search the project for "needs-signoff" to find every one of them. -------------------------------------------------------------------------- */ .needs-signoff { border: 1px dashed rgba(255,106,61,0.55); border-radius: 8px; background: rgba(255,106,61,0.055); padding: 14px 16px; font-size: 0.83rem; color: #FFC3AC; line-height: 1.55; } .needs-signoff b { color: var(--coral); font-weight: 600; } /* -------------------------------------------------------------------------- 10. STEP RAIL A numbered horizontal path, used for "how partnering works". -------------------------------------------------------------------------- */ .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .rail.rail-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1050px) { .rail.rail-5 { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } } .rail::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: rgba(255,255,255,0.12); } .rail-step { padding-right: 24px; position: relative; } .rail-step .n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; background: var(--bg); border: 1px solid rgba(255,255,255,0.18); font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; margin-bottom: 18px; } .rail-step:first-child .n { border-color: var(--accent); color: var(--accent); } .rail-step h4 { font-size: 0.99rem; font-weight: 600; margin: 0 0 0.35em; } .rail-step p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.55; } @media (max-width: 860px) { .rail { grid-template-columns: 1fr; gap: 26px; } .rail::before { display: none; } .rail-step { padding-right: 0; } } /* -------------------------------------------------------------------------- 11. VISUALLY HIDDEN Text only a screen reader announces. Used for table headers that are obvious to look at but need a name spoken aloud. -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== 12. MASTER BRAND ALIGNMENT This section is LAST on purpose, so it wins over everything above it. It pulls the palette back to the official TrustLayer brand and to the colours trustlayer.co.uk actually uses, measured from the live site rather than guessed. The earlier teal-led direction is gone. Cobalt Blue leads now. TO DIAL THE WHOLE SITE: change --bg and --accent-solid below. ========================================================================== */ :root { /* ---- Brand primaries ---- */ --indigo: #03206B; /* deep brand navy */ --cobalt: #2F4ACD; /* the action colour, used as a button fill */ --burnt-red: #E63946; /* ---- Brand secondaries ---- */ --coral: #FF6A3D; --grey: #D9E1ED; --turquoise: #00C6A2; --sky: #C4E9E5; --dark: #1F2025; /* ---- How those map onto the interface ---- Cobalt is a DARK blue. On a dark page it is unreadable as text, which is why the live site only ever uses it as a button fill with white text on top. So we keep two versions: --accent-solid the real brand cobalt, for fills --accent a lighter tint of it, for text, icons and borders Both are cobalt. One is simply legible on a dark background. */ --accent: #6E9BFF; --accent-rgb: 110, 155, 255; /* the same colour, for rgba() tints */ --danger: #E5484D; --accent-solid: #2F4ACD; --accent-deep: #263CA8; /* ---- Surfaces, taken from the live site ---- */ --bg: #1F2025; /* the live site's own body colour */ --surface: #2A2C33; --card: #272930; /* every card and panel fill */ --text: #FFFFFF; --muted: #7E8695; /* the live site's own secondary text */ --ink: #16171B; /* dark text on light panels */ /* Cards lift toward indigo rather than teal */ --grad-card: radial-gradient(120% 120% at 85% 12%, #26326E 0%, #23252D 64%); /* The glow around an emphasised card, tinted cobalt not mint */ --elev-accent: inset 0 1px 0 rgba(160,180,255,0.16), 0 4px 10px rgba(0,0,0,0.4), 0 30px 70px rgba(0,0,0,0.5), 0 0 60px rgba(47,74,205,0.14); } /* Solid fills use the true brand cobalt, with white on top */ .btn-primary { background: var(--accent-solid); color: #FFFFFF; } .btn-primary:hover { background: var(--accent-deep); } .sol-lead { background: var(--accent-solid); border-color: var(--accent-solid); } /* Surface alternation rebuilt around the new base */ .surface-raised { background: linear-gradient(180deg, #24262C 0%, #1F2025 100%); border-top-color: rgba(255,255,255,0.09); border-bottom-color: rgba(255,255,255,0.06); } .surface-sunken { background: linear-gradient(180deg, #16171B 0%, #1F2025 100%); } .nav-outer { background: rgba(31,32,37,0.88); } .mega { background: #2A2C33; } @media (max-width: 900px) { .nav-outer { background: #1F2025; } } /* Light panels use the brand Grey */ .panel { background: var(--grey); } .cta-wash { background: linear-gradient(180deg, #D9E1ED 0%, #C4E9E5 100%); } /* -------------------------------------------------------------------------- Status colours for the leads table. Built only from brand colours, plus one tint of cobalt, so the pipeline reads as a progression rather than a random set of colours. -------------------------------------------------------------------------- */ .st-submitted { color:#7E8695; border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); } .st-review { color:#FF8A5C; border-color:rgba(255,106,61,0.45); background:rgba(255,106,61,0.12); } .st-approved { color:#00C6A2; border-color:rgba(0,198,162,0.45); background:rgba(0,198,162,0.12); } .st-demo { color:#6E9BFF; border-color:rgba(47,74,205,0.55); background:rgba(47,74,205,0.18); } .st-eval { color:#C4E9E5; border-color:rgba(196,233,229,0.4); background:rgba(196,233,229,0.1); } .st-proposal { color:#B8C4FF; border-color:rgba(184,196,255,0.4); background:rgba(184,196,255,0.1); } .st-won { color:#0B2B24; border-color:var(--turquoise); background:var(--turquoise); } .st-lost { color:#FF8A93; border-color:rgba(230,57,70,0.45); background:rgba(230,57,70,0.1); } .st-expired { color:#7E8695; border-color:rgba(255,255,255,0.16); background:transparent; } /* Success messages stay turquoise, so "posted" does not look like a link */ .cbox .cmsg.ok { color: var(--turquoise); } /* The last dot on a timeline is a filled cobalt marker */ .tl li:last-child::before { background: var(--accent-solid); border-color: var(--accent); } /* ========================================================================== 13. TYPE, MATCHED TO trustlayer.co.uk Sora is gone. The live site is Onest throughout, and the display font was the single biggest thing making this site look like a different company. What we do NOT copy is the live site's heading scale. Its H1 runs to 96px; ours stays restrained, because that is the direction that worked. Same family, calmer execution. Letter-spacing is copied exactly, and it is unusual: the live site tightens the H1 but OPENS UP the smaller headings. Measured, not guessed. ========================================================================== */ :root { --font-display: "Onest", system-ui, sans-serif; --font-body: "Onest", system-ui, sans-serif; } /* The live site sets body copy at 15px. Its line-height is 1.33, which suits its short paragraphs but is too tight for the longer copy here, so this sits just above it. */ body { font-size: 15px; line-height: 1.55; } h1 { font-weight: 600; letter-spacing: -0.03em; } /* tightened, as they do */ h2 { font-weight: 600; letter-spacing: 0.02em; } /* opened up, as they do */ h3, h4 { font-weight: 700; letter-spacing: 0.02em; } /* ========================================================================== 14. NAVIGATION, MATCHED TO trustlayer.co.uk Their menu greys out everything you are not on, brings an item to white on hover, and marks the current page with a small blue dot. Copied here. ========================================================================== */ .nav-links > li > a { color: var(--muted); font-weight: 500; transition: color 0.16s ease; } /* Hover brings it to white. No background pill - the live site has none. */ .nav-links > li > a:hover, .nav-links > li > a:focus-visible, .nav-links > li:focus-within > a { background: none; color: var(--text); } /* The page you are on: white, heavier, and dotted */ .nav-links > li > a.is-current { color: var(--text); font-weight: 700; background: none; } .nav-links > li > a.is-current::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 0.6em; vertical-align: middle; position: relative; top: -1px; } /* ========================================================================== 15. THE DOTS The live site marks the current menu item with a small blue square that blinks. Measured from trustlayer.co.uk: 8px, #2F4ACD exactly, opacity 1 to 0 and back over 0.75 seconds, forever. Two deliberate differences from theirs: - Ours are round, because every other dot on this site already is. - Ours stop for anyone who has asked their computer to reduce motion. Something that blinks indefinitely is uncomfortable for some people and can be a problem for others, so it is worth the three lines. ========================================================================== */ @keyframes tl-dot-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* Every dot uses the true brand cobalt, not the lighter text tint. These are solid shapes, not text, so they do not need to be lightened to stay legible. */ .label::before, .nav-links > li > a.is-current::before { background: var(--accent-solid); } /* EXACTLY ONE blinking dot per page: the current item in the top menu. Nothing else blinks. Two things pulsing at different points on the same screen is distracting, and the tab strip already shows which tab you are on with an underline. */ .nav-links > li > a.is-current::before { width: 8px; height: 8px; animation: tl-dot-blink 0.75s ease infinite; } @media (prefers-reduced-motion: reduce) { .nav-links > li > a.is-current::before { animation: none; } } /* -------------------------------------------------------------------------- 16. AUDIENCE CHIPS The portal deliberately has ONE track rather than separate MSP and Reseller sections. These chips do the same job far more cheaply: they say who a piece of material is for, without splitting the site in two. -------------------------------------------------------------------------- */ .aud { display: inline-block; vertical-align: middle; font-family: var(--font-display); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.22em 0.6em; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.2); color: var(--muted); margin-left: 0.6em; position: relative; top: -1px; } .aud-msp { border-color: rgba(47,74,205,0.55); color: var(--accent); } .aud-all { border-color: rgba(255,255,255,0.2); color: var(--muted); } /* -------------------------------------------------------------------------- 17. CAMPAIGN BANNER Sits directly under the menu. Deliberately one line: a campaign strip that pushes the page down is resented, and the incentive is not the reason most people came. -------------------------------------------------------------------------- */ .campaign { background: linear-gradient(90deg, rgba(47,74,205,0.22) 0%, rgba(0,198,162,0.14) 100%); border-bottom: 1px solid rgba(47,74,205,0.4); } .campaign .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 46px; padding-block: 9px; } .campaign .tag { font-family: var(--font-display); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(47,74,205,0.55); border-radius: var(--r-pill); padding: 0.24em 0.7em; flex: none; } .campaign .msg { font-size: 0.88rem; } .campaign .msg b { font-weight: 600; } .campaign .go { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; } .campaign .go::after { content: "\203A"; font-size: 1.2em; line-height: 1; transition: transform 0.18s ease; } .campaign .go:hover::after { transform: translateX(3px); } @media (max-width: 640px) { .campaign .go { margin-left: 0; } .campaign .msg { font-size: 0.84rem; } } /* -------------------------------------------------------------------------- 18. BUTTONS BACK TO PILLS An earlier pass forced every button to a 4px radius, borrowed from reference sites during the teal-era direction. It was already wrong once this site moved onto the master brand: trustlayer.co.uk uses fully rounded buttons (measured at 9999px), and square ones looked cheap next to everything else here. -------------------------------------------------------------------------- */ .btn, .btn-primary, .btn-ghost { border-radius: var(--r-pill); } /* -------------------------------------------------------------------------- 19. THE "SELL" DROPDOWN Campaigns and Enablement are two halves of one job: what to send a customer, and what to say to them. They sit under one menu item so the bar stays short, and the two names inside explain the difference. -------------------------------------------------------------------------- */ .has-mega > a::after { content: "\25BE"; font-size: 0.7em; margin-left: 0.45em; opacity: 0.6; display: inline-block; vertical-align: middle; } .has-mega:hover > a::after, .has-mega:focus-within > a::after { opacity: 1; } /* On a phone the dropdown is hidden, which would strand the pages inside it. Flatten it into the menu instead, indented under its parent. THIS WIDTH IS NOT FREE TO CHANGE. It has to match the width at which style.css swaps the nav bar for the hamburger, which is 720px. It was 900px, and the 180 pixels where the two disagreed rendered the nav as a horizontal bar with the dropdown already forced open inside it, wrapping over three lines. Nobody sees that at a normal window size, which is why it survived: you reach it by zooming in, not by resizing. If the nav breakpoint in style.css ever moves, move this one with it. */ @media (max-width: 720px) { .has-mega .mega { display: block !important; position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 0 14px; min-width: 0; } .has-mega .mega .mega-title { display: none; } .has-mega .mega ul a { font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; padding: 0.55em 0.9em; color: var(--muted); } .has-mega .mega ul a:hover { color: var(--text); background: none; } .has-mega > a::after { display: none; } } /* -------------------------------------------------------------------------- 20. TEXT SELECTION The old rule flipped selected text to dark-on-light, which over a photo looked like somebody had gone at it with a highlighter pen. A translucent wash keeps the text its own colour and just tints behind it. -------------------------------------------------------------------------- */ ::selection { background: rgba(47,74,205,0.5); color: inherit; } /* -------------------------------------------------------------------------- 21. THE DROPDOWN GAP The panel is positioned 10px below the menu item, and that gap was dead space: move the pointer toward the panel and hover was lost halfway, so the menu shut before you could click anything. Two fixes. An invisible strip bridges the gap, and because the panel sits inside the same list item, hovering the strip keeps the whole thing open. Then a short delay on the way out, so a slightly wandering pointer does not dismiss it. Opening stays instant; only closing is forgiving. -------------------------------------------------------------------------- */ .has-mega .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .has-mega .mega { transition-delay: 0.25s; } .has-mega:hover .mega, .has-mega:focus-within .mega { transition-delay: 0s; } /* A little more room to aim at, and the items easier to hit. */ .has-mega .mega { min-width: 260px; padding: 14px; } .has-mega .mega ul a { padding: 0.7em 0.85em; } @media (max-width: 900px) { /* Flattened into the menu on a phone, so none of the above applies. */ .has-mega .mega::before { display: none; } .has-mega .mega { padding: 0 0 0 14px; min-width: 0; } } /* -------------------------------------------------------------------------- 22. THE DROPDOWN OPENS ON CLICK Hover was tried twice and failed twice: the panel sits below the menu item and the pointer lost hover crossing the gap. Click is unambiguous, works on touch, and has no invisible geometry to get wrong. The hover rule from style.css is switched off here so the two cannot fight. Keyboard focus still opens it, so tabbing to it works without a mouse. -------------------------------------------------------------------------- */ .nav-links > li.has-mega:hover .mega { opacity: 0; visibility: hidden; transform: translateY(-6px); } .nav-links > li.has-mega.open .mega, .nav-links > li.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } /* Point the caret up while it is open */ .has-mega.open > a::after { transform: rotate(180deg); } .has-mega > a::after { transition: transform 0.16s ease; } /* Make it obvious the trigger is a control rather than a link */ .has-mega > a { cursor: pointer; } @media (max-width: 900px) { /* Flattened into the menu on a phone: always visible, never toggled. */ .nav-links > li.has-mega:hover .mega, .nav-links > li.has-mega .mega { opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* -------------------------------------------------------------------------- 23. DEAL REGISTRATION The product picker and the email field we already know. -------------------------------------------------------------------------- */ /* A field filled in from the session. Visibly settled rather than visibly broken: readable, but plainly not somewhere you are meant to type. */ .form-card input.is-known { background: rgba(255, 255, 255, 0.03); color: var(--muted); cursor: default; } .form-card input.is-known:focus { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; } /* The checkbox group. A fieldset, so it needs its browser default stripped. */ .checkset { border: 0; padding: 0; margin: 0 0 22px; } .checkset > legend { padding: 0; margin-bottom: 12px; font-size: 0.82rem; font-weight: 500; color: var(--text); } .checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; } .check { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; font-size: 0.86rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .check:hover { border-color: rgba(255, 255, 255, 0.2); } .check input { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; } /* A chosen product should read at a glance across six of them. */ .check:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.10); } /* Keyboard users get the same ring as every other control. */ .check:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* Nothing picked, on submit. */ .checkset.has-error .checkgrid { outline: 1px solid var(--danger); outline-offset: 6px; border-radius: 10px; } .checkset.has-error .hint { color: var(--danger); } /* -------------------------------------------------------------------------- 24. CALLOUT A settled instruction, as opposed to .needs-signoff which is a question we have not answered yet. Calm rather than alarming: this is guidance a partner should follow, not a warning that something is wrong. -------------------------------------------------------------------------- */ .callout { border: 1px solid rgba(var(--accent-rgb), 0.28); border-left: 3px solid var(--accent); background: rgba(var(--accent-rgb), 0.06); border-radius: 10px; padding: 16px 20px; color: var(--muted); font-size: 0.92rem; line-height: 1.6; } .callout b { color: var(--text); font-weight: 600; } /* -------------------------------------------------------------------------- 25. FORM ERRORS One message above the button saying the first thing that is wrong, plus a red edge on the field it refers to. Deliberately not a message per field: a wall of red is harder to act on than one clear instruction. -------------------------------------------------------------------------- */ .form-error { margin: 0 0 14px; padding: 11px 14px; border: 1px solid rgba(229, 72, 77, 0.4); border-radius: 8px; background: rgba(229, 72, 77, 0.08); color: var(--danger); font-size: 0.86rem; } .form-error[hidden] { display: none; } .form-card input.has-error, .form-card select.has-error, .form-card textarea.has-error { border-color: var(--danger); } /* -------------------------------------------------------------------------- 26. HIDDEN Pages that swap between loading, error and content states use .hidden to do it. It was defined inside one page's