/* ===================================================================== MCF WEBSITE - site-v2.css The website's own layer on the house block (mcf-house.css), written 29 September 2026 for the overhaul mock-ups (WEB-014). It becomes 09-website/site.css when the design is approved. RULES THIS FILE KEEPS - Every colour and every text size is a house variable. No hex, rgb, px font-size or font-family outside mcf-house.css - checkhousestyle reads site.css with an empty allowance. - Resets are written with :where(), so a component's own rule always wins over them. - No fades between colours, no drop shade, no glass, no blur. White and soft grey bands, hairlines and space do the separating. Blue marks what is clickable. - Motion: transform and opacity only; every animation has a prefers-reduced-motion path that shows the finished state. - The one exception, marked below: PROPOSED house style v6 - a hero size above 48px. Delete that block and every hero falls back to 48. SECTIONS 1 fonts and page tokens 9 moving strip 2 resets (:where) 10 highlights, steps, trust strip 3 layout: wrap, bands, grid 11 cards: articles and case studies 4 type 12 CTA band, FAQ, banner 5 buttons and links 13 prose, legal, figures 6 header and menus 14 blog list parts 7 breadcrumb, sub-nav 15 forms 8 heroes: growing box, split, 16 chat, search overlay, video modal quote box, video link 17 footer 18 slots and draft-words marker 19 reveal and drawings ===================================================================== */ /* ---- 1. fonts and page tokens ---- */ @font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF} /* PROPOSED house style v6 - for Martin's yes (see DESIGN-NOTES.md). One size above the 48px display, used ONLY for the statement at the top of the home page and of a finance or trade page. The references sit at 56-64; 48 with weight and space is the fallback if he says no. Every use below is written var(--mcf-size-hero, var(--mcf-size-display)), so removing this block is the whole undo. */ :root{--mcf-size-hero:56px} /* end PROPOSED */ :root{ --wrap:1200px; /* the content column */ --wrap-read:720px; /* reading measure for articles and legal pages */ --gutter:24px; /* side gutter; 16 on a phone */ --head-h:68px; /* the website's header (the house bar is 60) */ --section:96px; /* space between bands; 64 on a phone */ --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:150ms; --t-menu:240ms; --side:max(var(--gutter),calc((100% - var(--wrap)) / 2)); /* the margin either side of the wrap */ } @media (max-width:640px){:root{--gutter:16px;--section:64px;--head-h:60px}} html{scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%} body.site{margin:0;font-family:var(--mcf-font);font-size:var(--mcf-size-body);line-height:1.55;color:var(--mcf-ink);background:var(--mcf-card);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} /* ---- 2. resets, all with :where() so components win ---- */ :where(.site) *,:where(.site) *::before,:where(.site) *::after{box-sizing:border-box} :where(.site) h1,:where(.site) h2,:where(.site) h3,:where(.site) h4,:where(.site) p,:where(.site) ul,:where(.site) ol,:where(.site) figure,:where(.site) dl,:where(.site) dd{margin:0} :where(.site) ul,:where(.site) ol{padding:0;list-style:none} :where(.site) img,:where(.site) svg,:where(.site) video{display:block;max-width:100%;height:auto} :where(.site) a{color:var(--mcf-blue);text-decoration:none} :where(.site) a:hover{color:var(--mcf-blue-hover)} :where(.site) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} :where(.site) input,:where(.site) select,:where(.site) textarea{font:inherit;color:inherit} :where(.site) summary{list-style:none;cursor:pointer} :where(.site) summary::-webkit-details-marker{display:none} :where(.site) table{border-collapse:collapse} :where(.site) [hidden]{display:none!important} .site :focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px;border-radius:4px} .skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--mcf-card);color:var(--mcf-blue);padding:var(--mcf-s2) var(--mcf-s4);border-radius:var(--mcf-r-control);border:1px solid var(--mcf-line)} .skip:focus{top:var(--mcf-s3)} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} /* the spam trap field: people never see it */ .ico{width:20px;height:20px;flex-shrink:0;stroke:currentColor} .ico-24{width:24px;height:24px} .ico-16{width:16px;height:16px} /* ---- 3. layout ---- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .wrap-read{max-width:var(--wrap-read);margin-inline:auto;padding-inline:var(--gutter)} main{display:block} /* A band is one section of the page. White by default, soft grey with .band-grey. Alternate them; never two grey bands touching. */ .band{padding-block:var(--section)} .band-grey{background:var(--mcf-page)} .band-tight{padding-block:var(--mcf-s8)} .band-flush{padding-top:0} /* Grids. Column counts fall away on narrower screens. */ .grid{display:grid;gap:var(--mcf-s5)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid-2-1{grid-template-columns:2fr 1fr} .grid-1-2{grid-template-columns:1fr 2fr} .grid-5-7{grid-template-columns:5fr 7fr} .grid-7-5{grid-template-columns:7fr 5fr} .grid-4-8{grid-template-columns:4fr 8fr} @media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2-1,.grid-1-2,.grid-5-7,.grid-7-5,.grid-4-8{grid-template-columns:1fr}} @media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} .stack{display:flex;flex-direction:column;gap:var(--mcf-s4)} .stack-s{gap:var(--mcf-s2)} .stack-l{gap:var(--mcf-s6)} .row{display:flex;align-items:center;gap:var(--mcf-s3);flex-wrap:wrap} .row-between{justify-content:space-between} .rule{border:0;border-top:1px solid var(--mcf-line);margin:0} /* Small spacing utilities, from the house steps only. */ .mt-2{margin-top:var(--mcf-s2)}.mt-3{margin-top:var(--mcf-s3)}.mt-4{margin-top:var(--mcf-s4)}.mt-6{margin-top:var(--mcf-s6)}.mb-4{margin-bottom:var(--mcf-s4)}.mb-5{margin-bottom:var(--mcf-s5)}.mb-6{margin-bottom:var(--mcf-s6)}.mb-8{margin-bottom:var(--mcf-s8)}.pb-4{padding-bottom:var(--mcf-s4)}.items-start{align-items:start}.items-end{align-items:end}.w-120{width:120px} /* ---- 4. type ---- One scale, nothing between. Headings 600, the page statement 700. Body 15; article reading text 18 (.prose); lead 22. */ .t-hero{font-size:var(--mcf-size-hero,var(--mcf-size-display));font-weight:700;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;max-width:16ch} .t-display{font-size:var(--mcf-size-display);font-weight:700;line-height:1.1;letter-spacing:-.02em;text-wrap:balance} .t-page{font-size:var(--mcf-size-page);font-weight:700;line-height:1.12;letter-spacing:-.02em;text-wrap:balance} .t-title{font-size:var(--mcf-size-title);font-weight:600;line-height:1.2;letter-spacing:-.015em;text-wrap:balance} .t-section{font-size:var(--mcf-size-section);font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:balance} .t-heading{font-size:var(--mcf-size-heading);font-weight:600;line-height:1.3;text-wrap:balance} .t-body{font-size:var(--mcf-size-body);line-height:1.55} .t-small{font-size:var(--mcf-size-small);line-height:1.5} .t-caption{font-size:var(--mcf-size-caption);line-height:1.45} .lead{font-size:var(--mcf-size-section);font-weight:400;line-height:1.4;color:var(--mcf-grey);max-width:34ch;text-wrap:pretty} .lead-small{font-size:var(--mcf-size-heading);line-height:1.45;color:var(--mcf-grey);max-width:44ch;text-wrap:pretty} .copy{max-width:66ch;text-wrap:pretty} .copy p+p{margin-top:var(--mcf-s3)} .muted{color:var(--mcf-grey)} .strong{color:var(--mcf-grey-strong)} .num{font-variant-numeric:tabular-nums} /* An eyebrow: a small label above a heading. At most one per three sections. */ .eyebrow{font-size:var(--mcf-size-small);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mcf-grey);display:block;margin-bottom:var(--mcf-s3)} /* A section head: heading left, an optional arrow link right. */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--mcf-s5);margin-bottom:var(--mcf-s7);flex-wrap:wrap} .sec-head>p{margin-top:var(--mcf-s2)} @media (max-width:640px){.sec-head{margin-bottom:var(--mcf-s6)}.t-hero{max-width:none}} @media (max-width:640px){ .t-hero{font-size:var(--mcf-size-page)} .t-display{font-size:var(--mcf-size-page)} .t-page{font-size:var(--mcf-size-title)} .lead{font-size:var(--mcf-size-heading)} } /* ---- 5. buttons and links ---- One blue button per view. A second action is .btn-quiet or a text link. Labels say what happens: "Apply", "Read the guide", "Call 01463 652653". */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--mcf-s2);min-height:44px;padding:0 22px;border-radius:var(--mcf-r-pill);border:1px solid var(--mcf-control);background:var(--mcf-card);color:var(--mcf-ink);font-size:var(--mcf-size-body);font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease} .btn:hover{background:var(--mcf-page);color:var(--mcf-ink)} .btn-primary{background:var(--mcf-blue);border-color:var(--mcf-blue);color:var(--mcf-card)} .btn-primary:hover{background:var(--mcf-blue-hover);border-color:var(--mcf-blue-hover);color:var(--mcf-card)} .btn-quiet{background:transparent} .btn-small{min-height:36px;padding:0 16px;font-size:var(--mcf-size-small)} .btn-large{min-height:52px;padding:0 28px;font-size:var(--mcf-size-heading)} .btn .ico{width:18px;height:18px} /* A text link with the arrow drawn (the font has no U+2192). */ .link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--mcf-blue)} .link-arrow .ico{width:16px;height:16px;transition:transform var(--t-fast) ease} .link-arrow:hover .ico{transform:translateX(2px)} .link-quiet{color:var(--mcf-ink);text-decoration:underline;text-decoration-color:var(--mcf-control);text-underline-offset:3px} .link-quiet:hover{color:var(--mcf-blue);text-decoration-color:currentColor} .actions{display:flex;align-items:center;gap:var(--mcf-s3);flex-wrap:wrap} /* The Donnie link (WEB-055, Martin 14 October 2026: "a small Donnie and a button that says apply"). Donnie himself, small, beside what pressing it does and a line of when - the same on every page, so he is recognised. .dlink-small sits inside a step or a card. */ .dlink{display:inline-flex;align-items:center;gap:var(--mcf-s3);min-height:56px;padding:6px var(--mcf-s5) 6px 10px;border-radius:var(--mcf-r-pill);border:1px solid var(--mcf-blue);background:var(--mcf-card);color:var(--mcf-ink);text-align:left;transition:background var(--t-fast) ease} .dlink:hover{background:var(--mcf-page);color:var(--mcf-ink)} .dlink img{width:36px;height:42px;flex-shrink:0;object-fit:contain} .dlink span{display:flex;flex-direction:column;gap:1px;min-width:0} .dlink b{font-weight:600;color:var(--mcf-blue);line-height:1.2} .dlink small{font-size:var(--mcf-size-caption);color:var(--mcf-grey);line-height:1.3} /* THE HOME PAGE'S START MY APPLICATION, UNMISSABLE (WEB-093, Martin, 3 November 2026: "Start my application needs to be more obvious"): the house's filled blue button, larger, with the same slow ring as the corner's Meet Donnie - still under reduced motion. Donnie stays on it. */ .dlink-big{background:var(--mcf-blue);border-color:var(--mcf-blue);color:var(--mcf-card);min-height:64px;padding:8px var(--mcf-s6) 8px 12px;position:relative} .dlink-big:hover{background:var(--mcf-blue-hover);border-color:var(--mcf-blue-hover);color:var(--mcf-card)} .dlink-big b{color:var(--mcf-card);font-size:var(--mcf-size-heading)} .dlink-big small{color:var(--mcf-card);opacity:.88} .dlink-big img{width:42px;height:49px} .dlink-big::before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--mcf-blue);opacity:0;pointer-events:none;animation:intro-ring 3.2s ease-out 1.6s infinite} @media (prefers-reduced-motion:reduce){.dlink-big::before{animation:none}} .dlink-small{min-height:48px;padding:4px var(--mcf-s4) 4px 8px;margin-top:var(--mcf-s3)} .dlink-small img{width:30px;height:35px} /* in the sub-menu bar under the hero: Donnie and the words, no second line (WEB-057) */ .dlink-bar{min-height:44px;padding:2px var(--mcf-s4) 2px 8px;gap:var(--mcf-s2)} .dlink-bar img{width:26px;height:30px} .dlink-bar b{font-size:var(--mcf-size-table)} /* The film as the page's hook: big, beside the words, one press to play. */ .vhero{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--mcf-ink)} .vhero .slot{aspect-ratio:16/9;width:100%;min-height:0} .vhero .slot figcaption{opacity:.7} .vhero-frame{position:relative;display:block} .vhero-frame:has(> .vhero-cover){aspect-ratio:16/9} /* Until a page's film is made, a Donnie drawing of that trade can be its cover (Martin, 14 October 2026: "A, use the Donnie taxi drawing as the cover"). */ .vhero-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--mcf-s5) var(--mcf-s4) var(--mcf-s3);background:var(--mcf-page);border-radius:var(--mcf-r-card);overflow:hidden} .band-grey .vhero-cover{background:var(--mcf-card)} .vhero-cover .illo{width:100%;max-width:none;height:auto;max-height:none} .vhero-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:var(--mcf-r-pill);background:var(--mcf-blue);color:var(--mcf-card);transition:transform var(--t-fast) ease} .vhero-play .ico{width:30px;height:30px;margin-left:4px} .vhero:hover .vhero-play{transform:translate(-50%,-50%) scale(1.06)} .vhero-text{display:flex;flex-direction:column;gap:2px;margin-top:var(--mcf-s3)} .vhero-text b{font-weight:600} .vhero-text small{font-size:var(--mcf-size-small);color:var(--mcf-grey)} /* A FILM LOOKS LIKE A FILM (WEB-093, Martin, 3 November 2026: "It should also mabye have a stronger blue outline and pulse so its obvious that it is subbposed to be watched"). Every film's frame - the page films (.vhero-frame) and the home film's screen (.st-screen) - has the blue edge and a slow pulse of its outline; the pulse stops once the film has been opened (.is-played), while the silent peek plays (.is-peeking, site-v2.js) and under reduced motion. The peek is a small silent copy of the film over the poster, pointer-events none so the press still opens the film. */ .vhero-frame{border:3px solid var(--mcf-blue);border-radius:var(--mcf-r-card)} /* the pulse is the outline, which an element's own overflow never clips: it widens and fades, over and over */ .vhero-frame,.st{outline:2px solid transparent;outline-offset:2px;animation:film-pulse 3.2s ease-out 1s infinite} .vhero-frame.is-played,.st.is-played,.vhero-frame.is-peeking,.st.is-peeking{animation:none} @keyframes film-pulse{0%{outline-color:var(--mcf-blue);outline-offset:2px}60%,100%{outline-color:transparent;outline-offset:14px}} @media (prefers-reduced-motion:reduce){.vhero-frame,.st{animation:none}} .vpeek{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:var(--mcf-ink);border-radius:inherit;z-index:1} .vhero-frame .vhero-play{z-index:2} /* a film's own words, under it (WEB-072) */ .film-words{margin-top:var(--mcf-s3)} .hero-media:has(.film-words){flex-direction:column;align-items:stretch} .film-words summary{cursor:pointer;color:var(--mcf-blue);font-weight:600;min-height:44px;display:flex;align-items:center} .film-words p{margin-top:var(--mcf-s2);font-size:var(--mcf-size-small);color:var(--mcf-ink)} /* ---- 6. header and menus ---- Sticky, white, one hairline. Logo left (by height), four menus, then search, phone and the one blue button. On a phone: logo, Apply, Menu. */ .site-head{position:sticky;top:0;z-index:50;background:var(--mcf-card);border-bottom:1px solid var(--mcf-line)} .head-row{display:flex;align-items:center;gap:var(--mcf-s6);height:var(--head-h)} .head-logo{display:flex;align-items:center;flex-shrink:0;margin-right:var(--mcf-s2)} .head-logo img{height:36px;width:auto} .head-logo .logo-m{display:none} .head-nav{flex:1 1 auto;display:flex;align-self:stretch} .menu-list{display:flex;align-self:stretch;gap:var(--mcf-s1)} .menu-item{display:flex} .menu-btn{display:inline-flex;align-items:center;gap:4px;padding:0 var(--mcf-s3);font-size:var(--mcf-size-body);font-weight:500;color:var(--mcf-ink);border-radius:var(--mcf-r-control);transition:color var(--t-fast) ease} .menu-btn .ico{width:14px;height:14px;color:var(--mcf-grey);transition:transform var(--t-menu) var(--ease-out)} .menu-btn:hover,.menu-btn[aria-expanded="true"]{color:var(--mcf-blue)} .menu-btn[aria-expanded="true"] .ico{transform:rotate(180deg)} .menu-item[aria-current="page"]>.menu-btn,.menu-item.is-current>.menu-btn{color:var(--mcf-ink)} .menu-btn{position:relative} .menu-item.is-current>.menu-btn::after{content:"";position:absolute;left:var(--mcf-s3);right:var(--mcf-s3);bottom:0;height:2px;background:var(--mcf-ink)} .menu-item{position:static} /* The mega panel: the full width of the page, under the bar. */ .menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--mcf-card);border-bottom:1px solid var(--mcf-line);z-index:40;display:none} .menu-panel.is-open{display:block} html.js .menu-panel.is-open{animation:mcf-menu var(--t-menu) var(--ease-out)} @keyframes mcf-menu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .menu-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mcf-s7);padding-block:var(--mcf-s7) var(--mcf-s8)} .menu-group h3,.menu-group .menu-h{font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mcf-grey);margin-bottom:var(--mcf-s3)} .menu-group ul{display:flex;flex-direction:column} .menu-link{display:block;padding:10px var(--mcf-s3);margin-inline:calc(-1 * var(--mcf-s3));border-radius:var(--mcf-r-control);color:var(--mcf-ink);transition:background var(--t-fast) ease} .menu-link b{display:block;font-weight:600;font-size:var(--mcf-size-body)} .menu-link span{display:block;font-size:var(--mcf-size-small);color:var(--mcf-grey);margin-top:2px} .menu-link:hover{background:var(--mcf-page);color:var(--mcf-ink)} .menu-link:hover b{color:var(--mcf-blue)} .menu-link[data-planned]::after{content:"planned";font-size:var(--mcf-size-caption);color:var(--mcf-grey);margin-left:6px;font-weight:400} /* The panel's last column: a quiet note with one link. */ .menu-aside{background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s5)} .menu-aside p{font-size:var(--mcf-size-body);color:var(--mcf-grey);margin:var(--mcf-s2) 0 var(--mcf-s4)} .menu-aside .illo{width:120px;margin-bottom:var(--mcf-s3)} .head-tools{display:flex;align-items:center;gap:var(--mcf-s2);margin-left:auto;flex-shrink:0} .head-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--mcf-r-pill);color:var(--mcf-ink);transition:background var(--t-fast) ease} .head-icon:hover{background:var(--mcf-page)} .head-phone{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 var(--mcf-s3);border-radius:var(--mcf-r-pill);color:var(--mcf-ink);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap} .head-phone:hover{background:var(--mcf-page);color:var(--mcf-ink)} .head-burger{display:none} /* The scrim under an open menu on desktop is just the page; on a phone, the mobile sheet holds every menu as an accordion. */ .mobile-menu{display:none;position:fixed;inset:var(--head-h) 0 0 0;background:var(--mcf-card);overflow-y:auto;z-index:45;padding:var(--mcf-s4) var(--gutter) var(--mcf-s8)} .mobile-menu.is-open{display:block} .mm-group{border-bottom:1px solid var(--mcf-line)} .mm-group summary{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:var(--mcf-size-heading);font-weight:600} .mm-group summary .ico{width:18px;height:18px;color:var(--mcf-grey);transition:transform var(--t-menu) var(--ease-out)} .mm-group[open] summary .ico{transform:rotate(180deg)} .mm-group ul{padding-bottom:var(--mcf-s3)} .mm-group .menu-link{margin:0;padding:10px 0} .mm-links{display:flex;flex-direction:column;gap:var(--mcf-s3);padding-top:var(--mcf-s5)} .mm-links a{display:inline-flex;align-items:center;gap:var(--mcf-s2);color:var(--mcf-ink);font-weight:500} @media (max-width:1240px){.head-row{gap:var(--mcf-s4)}.menu-btn{padding:0 10px}.head-phone span{display:none}.head-phone{width:40px;padding:0;justify-content:center}} @media (max-width:640px){.head-logo .logo-h{display:none}.head-logo .logo-m{display:block;height:30px}} @media (max-width:1100px){ .head-nav{display:none} .head-burger{display:inline-flex} .head-phone{display:none} .head-logo img{height:32px} .head-apply{min-height:38px;padding:0 16px} } body.menu-open{overflow:hidden} /* ---- 7. breadcrumb and a page's slim sub-nav ---- */ .crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--mcf-size-small);color:var(--mcf-grey);padding-block:var(--mcf-s4)} .crumbs a{color:var(--mcf-grey)} .crumbs a:hover{color:var(--mcf-blue)} .crumbs .ico{width:14px;height:14px;color:var(--mcf-icon-off)} .crumbs [aria-current]{color:var(--mcf-ink)} /* Under a finance page's hero: the page's name left, Apply right. */ .subnav{position:sticky;top:var(--head-h);z-index:30;background:var(--mcf-card);border-bottom:1px solid var(--mcf-line)} .subnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s4);height:52px} .subnav b{font-weight:600} .subnav nav{display:flex;gap:var(--mcf-s5);font-size:var(--mcf-size-table)} .subnav nav a{display:inline-flex;align-items:center;height:52px;padding-top:2px;border-bottom:2px solid transparent;color:var(--mcf-grey)} .subnav nav a[aria-current="true"]{color:var(--mcf-ink);border-bottom-color:var(--mcf-ink)} /* the section being read - set by site-v2.js */ body:has(.subnav) section[id]{scroll-margin-top:calc(var(--head-h) + 52px)} .subnav nav a:hover{color:var(--mcf-ink)} @media (max-width:900px){.subnav nav{display:none}} /* ---- 8. heroes ---- */ /* 8a. The GROWING FEATURE BOX (home). A soft-grey box that begins the width of the wrap and grows to the page's full width as it scrolls up, its corners squaring off. CSS scroll-driven where the browser has it; site-v2.js writes --p from 0 to 1 elsewhere; on a phone and under reduced motion it is a plain card. The words inside never move. */ .grow{padding-block:var(--mcf-s7) var(--section)} .grow-box{position:relative;overflow:hidden;background:var(--mcf-page);border-radius:var(--mcf-r-card);margin-inline:var(--side);min-height:560px;display:flex;align-items:stretch} @supports (animation-timeline:view()){ .grow-box{animation:mcf-grow linear both;animation-timeline:view();animation-range:entry 45% entry 100%} } @keyframes mcf-grow{from{margin-inline:var(--side);border-radius:var(--mcf-r-card)}to{margin-inline:0;border-radius:0}} html.grow-js .grow-box{animation:none;margin-inline:calc(var(--side) * (1 - var(--p,0)));border-radius:calc(var(--mcf-r-card) * (1 - var(--p,0)))} @media (prefers-reduced-motion:reduce),(max-width:768px){.grow-box,html.grow-js .grow-box{animation:none;margin-inline:var(--side);border-radius:var(--mcf-r-card)}} .grow-inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:var(--mcf-s8) var(--mcf-s8);display:grid;grid-template-columns:5fr 7fr;gap:var(--mcf-s7);align-items:center} .grow-inner .t-display{margin-bottom:var(--mcf-s4)} .grow-media{min-height:360px;display:flex;align-items:center;justify-content:center} .grow-media .illo{width:100%;max-width:520px} .grow-media .slot{width:100%} @media (max-width:900px){.grow-inner{grid-template-columns:1fr;padding:var(--mcf-s6) var(--mcf-s5)}.grow-media{min-height:0}.grow-box{min-height:0}} /* 8b. The SPLIT HERO: statement left; photo, drawing or a calm box right. */ .hero{padding-block:var(--mcf-s8) var(--section)} .hero-split{display:grid;grid-template-columns:7fr 5fr;gap:var(--mcf-s8);align-items:center} .hero-text{display:flex;flex-direction:column;gap:var(--mcf-s5)} .hero-text .lead{margin-top:calc(-1 * var(--mcf-s2))} .hero-media{display:flex;justify-content:flex-end;align-items:center} .hero-media .illo{width:100%;max-width:480px} .hero-media img{border-radius:var(--mcf-r-card);width:100%;object-fit:cover;aspect-ratio:4/3} .hero-media .slot{width:100%} /* a person's own page (martin-mackenzie.html): a small round photo above the heading, like the author box */ .hero-face{display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:var(--mcf-s4)} @media (max-width:640px){.hero-face{width:88px;height:88px}} @media (max-width:900px){.hero{padding-top:var(--mcf-s6)}.hero-split{grid-template-columns:1fr;gap:var(--mcf-s6)}.hero-media{justify-content:flex-start}.hero-media .illo{max-width:360px}} /* 8c. The MINI QUOTE BOX: three questions and Continue, which opens the apply page with the answers in the address. Sits in a hero's right column, or on its own in a band. */ .qbox{background:var(--mcf-card);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);padding:var(--mcf-s6);width:100%;max-width:440px;display:flex;flex-direction:column;gap:var(--mcf-s4)} .band-grey .qbox{border-color:transparent} .qbox h2,.qbox h3{font-size:var(--mcf-size-heading);font-weight:600} .qbox .field{gap:6px} .qbox-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s3);flex-wrap:wrap;margin-top:var(--mcf-s1)} .qbox-actions .btn-primary{flex:1 1 auto} .qbox-note{font-size:var(--mcf-size-small);color:var(--mcf-grey)} /* 8d. The SMALL VIDEO LINK: a thumbnail, "Watch", the title, the length. Sits under a hero statement, left. Opens the video modal. */ .vlink{display:inline-flex;align-items:center;gap:var(--mcf-s3);padding:var(--mcf-s2);padding-right:var(--mcf-s4);border-radius:var(--mcf-r-inner);border:1px solid var(--mcf-line);background:var(--mcf-card);color:var(--mcf-ink);text-align:left;max-width:360px;transition:border-color var(--t-fast) ease,background var(--t-fast) ease} .vlink:hover{border-color:var(--mcf-control);background:var(--mcf-page)} .vlink-thumb{position:relative;width:104px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--mcf-fill);flex-shrink:0} .vlink-thumb .slot{width:100%;height:100%;border:0;border-radius:0;padding:0;min-height:0} .vlink-thumb .slot figcaption,.vlink-thumb .slot .slot-ico{display:none} .vlink-thumb img{width:100%;height:100%;object-fit:cover} .vlink-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mcf-ink)} .vlink-play span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--mcf-r-pill);background:var(--mcf-card);border:1px solid var(--mcf-line)} .vlink-play .ico{width:14px;height:14px;margin-left:2px} .vlink-text{display:flex;flex-direction:column;gap:2px;min-width:0} .vlink-text b{font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mcf-grey)} .vlink-text span{font-size:var(--mcf-size-table);font-weight:500;line-height:1.3} .vlink-text small{font-size:var(--mcf-size-caption);color:var(--mcf-grey);font-variant-numeric:tabular-nums} /* The story card: the same link as a small standing card in a left margin. */ .story{display:flex;flex-direction:column;gap:var(--mcf-s3);width:240px;padding:var(--mcf-s4);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);background:var(--mcf-card)} .story .slot{min-height:0} .story b{font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mcf-grey)} .story p{font-size:var(--mcf-size-small);color:var(--mcf-grey)} @media (max-width:900px){.story{width:100%}} /* ---- 9. the MOVING STRIP: a title, then titles rolling left. Pauses on hover, on focus, and with its button; still and scrollable under reduced motion. The copy of the list is aria-hidden. ---- */ .strip{padding-block:var(--mcf-s6);border-top:1px solid var(--mcf-line);border-bottom:1px solid var(--mcf-line)} .strip-head{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s4);margin-bottom:var(--mcf-s5)} .strip-head h2{font-size:var(--mcf-size-section);font-weight:600} .strip-pause{display:inline-flex;align-items:center;gap:6px;font-size:var(--mcf-size-small);color:var(--mcf-grey);padding:6px 12px;border-radius:var(--mcf-r-pill);border:1px solid var(--mcf-line)} .strip-pause:hover{color:var(--mcf-ink);background:var(--mcf-page)} /* The rolling list keeps to the content column, its lines too, on every page and screen (Martin, 15 October 2026: "the rolling list of deals stretches right across the laptop screen but none of the other content does, can you trim it"); its ends fade so a card is never cut by a hard edge. */ .strip{width:min(100% - 2 * var(--gutter), var(--wrap) - 2 * var(--gutter));margin-inline:auto} .strip .wrap{padding-inline:0} .strip-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--mcf-ink) 32px,var(--mcf-ink) calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,var(--mcf-ink) 32px,var(--mcf-ink) calc(100% - 32px),transparent)} .strip-track{display:flex;width:max-content;animation:mcf-marquee var(--strip-dur,60s) linear infinite} .strip:hover .strip-track,.strip:focus-within .strip-track,.strip.is-paused .strip-track{animation-play-state:paused} .strip-list{display:flex;flex-shrink:0} .strip-item{display:flex;flex-direction:column;justify-content:center;gap:6px;width:320px;padding:var(--mcf-s2) var(--mcf-s5);border-right:1px solid var(--mcf-line);color:var(--mcf-ink)} .strip-item b{font-size:var(--mcf-size-heading);font-weight:600;line-height:1.3;text-wrap:balance} .strip-item span{font-size:var(--mcf-size-small);color:var(--mcf-grey)} .strip-item:hover b{color:var(--mcf-blue)} .strip-logo{display:flex;align-items:center;justify-content:center;width:200px;height:72px;padding:0 var(--mcf-s5);border-right:1px solid var(--mcf-line);color:var(--mcf-grey-strong)} @keyframes mcf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.strip-track{animation:none;width:auto}.strip-view{overflow-x:auto}.strip-pause{display:none}.strip-list[aria-hidden]{display:none}} @media (max-width:640px){.strip-item{width:240px;padding-inline:var(--mcf-s4)}} /* ---- 10. highlights, steps, trust strip ---- Three layouts that are NOT a row of matching icon-in-circle cards. Use one per page. */ /* 10a. The ticked list: a label column left, ruled rows right. */ .hl-list{display:grid;grid-template-columns:4fr 8fr;gap:var(--mcf-s7)} .hl-list-side{display:flex;flex-direction:column;gap:var(--mcf-s4);align-self:start;position:sticky;top:calc(var(--head-h) + var(--mcf-s6))} .hl-rows{display:flex;flex-direction:column} .hl-row{display:grid;grid-template-columns:32px 1fr;gap:var(--mcf-s4);padding:var(--mcf-s6) 0;border-top:1px solid var(--mcf-line)} .hl-row:last-child{border-bottom:1px solid var(--mcf-line)} .hl-row .ico{width:24px;height:24px;color:var(--mcf-ok);margin-top:2px} .hl-row h3{font-size:var(--mcf-size-heading);font-weight:600;margin-bottom:var(--mcf-s2)} .hl-row p{color:var(--mcf-grey);max-width:56ch;text-wrap:pretty} @media (max-width:900px){.hl-list{grid-template-columns:1fr;gap:var(--mcf-s5)}.hl-list-side{position:static}} /* 10b. The big-and-small split: one large panel, two small beside it. */ .hl-split{display:grid;grid-template-columns:7fr 5fr;gap:var(--mcf-s5)} .hl-big{background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s7);display:flex;flex-direction:column;justify-content:space-between;gap:var(--mcf-s6);min-height:420px} .hl-big .illo{width:min(100%,360px);align-self:flex-end} .hl-small{display:grid;grid-template-rows:1fr 1fr;gap:var(--mcf-s5)} .hl-panel{background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s6);display:flex;flex-direction:column;gap:var(--mcf-s2)} .band-grey .hl-big,.band-grey .hl-panel{background:var(--mcf-card)} .hl-panel h3,.hl-big h3{font-size:var(--mcf-size-heading);font-weight:600} .hl-big h3{font-size:var(--mcf-size-section)} .hl-panel p,.hl-big p{color:var(--mcf-grey);text-wrap:pretty} .hl-panel .link-arrow,.hl-big .link-arrow{margin-top:auto;padding-top:var(--mcf-s3)} @media (max-width:900px){.hl-split{grid-template-columns:1fr}.hl-small{grid-template-rows:none}.hl-big{min-height:0}} /* 10c. The two-column definition list: term left, meaning right. */ .hl-dl{display:grid;grid-template-columns:1fr;border-top:1px solid var(--mcf-line)} .hl-dl>div{display:grid;grid-template-columns:4fr 8fr;gap:var(--mcf-s6);padding:var(--mcf-s5) 0;border-bottom:1px solid var(--mcf-line)} .hl-dl dt{font-size:var(--mcf-size-heading);font-weight:600} .hl-dl dd{color:var(--mcf-grey);max-width:60ch;text-wrap:pretty} @media (max-width:640px){.hl-dl>div{grid-template-columns:1fr;gap:var(--mcf-s2)}} /* 10d. Steps: a real sequence, so it is numbered. Each step is what the person does. Horizontal at 1440, a column on a phone. */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mcf-s6);counter-reset:step} .step{position:relative;padding-top:var(--mcf-s5);border-top:1px solid var(--mcf-line);counter-increment:step} .step::before{content:counter(step);display:block;font-size:var(--mcf-size-title);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--mcf-ink);margin-bottom:var(--mcf-s3);line-height:1} .step h3{font-size:var(--mcf-size-heading);font-weight:600;margin-bottom:var(--mcf-s2)} .step p{color:var(--mcf-grey);text-wrap:pretty} .steps-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:900px){.steps,.steps-4{grid-template-columns:1fr;gap:var(--mcf-s5)}} /* 10e. The trust strip: the facts in site.json, the NACFB badge, and a marked slot for a reviews score once there is a real one. Sits directly under a hero, never inside it. */ .trust{border-top:1px solid var(--mcf-line);border-bottom:1px solid var(--mcf-line);padding-block:var(--mcf-s5)} .trust .wrap{display:flex;align-items:center;gap:var(--mcf-s7);flex-wrap:wrap} .trust-facts{display:flex;gap:var(--mcf-s7);flex-wrap:wrap;flex:1 1 auto} .trust-fact{display:flex;flex-direction:column;gap:2px} .trust-fact b{font-size:var(--mcf-size-section);font-weight:700;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums} .trust-fact span{font-size:var(--mcf-size-small);color:var(--mcf-grey)} .trust-badge{display:inline-flex;align-items:center;gap:var(--mcf-s3);color:var(--mcf-grey-strong);font-size:var(--mcf-size-small)} .trust-badge img{width:48px;height:auto} .trust-slot{display:inline-flex;align-items:center;gap:var(--mcf-s2);padding:var(--mcf-s2) var(--mcf-s3);border:1px dashed var(--mcf-control);border-radius:var(--mcf-r-control);font-size:var(--mcf-size-small);color:var(--mcf-grey)} @media (max-width:640px){.trust .wrap,.trust-facts{gap:var(--mcf-s5)}} /* ---- 11. cards: articles and case studies ---- A list of content, each with its picture, date and title. The whole card is the link; the title turns blue on hover; nothing lifts. */ .card{display:flex;flex-direction:column;gap:var(--mcf-s3);color:var(--mcf-ink);border-radius:var(--mcf-r-card);background:var(--mcf-card);overflow:hidden} .band-grey .card{background:var(--mcf-card)} .card-pic{aspect-ratio:16/9;background:var(--mcf-fill);border-radius:var(--mcf-r-card);overflow:hidden} .card-pic img{width:100%;height:100%;object-fit:cover} .card-pic .slot{border-radius:0;border:0;height:100%;min-height:0} /* the blog covers (WEB-061): house-style drawings the shape of the card */ .card-pic .cover,.card-pic .cover svg,.art-cover svg,.art-cover picture,.art-cover img{display:block;width:100%;height:100%} .illo-js .illo.cover .ln,.illo-js .illo.cover.is-drawn .ln{stroke-dasharray:none;stroke-dashoffset:0;animation:none} .illo-js .illo.cover .fl,.illo-js .illo.cover.is-drawn .fl{fill-opacity:1;animation:none} /* covers show finished: a grid of small pictures drawing themselves in, a few at a time, read as blank cards */ .art-cover{margin:0;aspect-ratio:16/9;border-radius:var(--mcf-r-card);overflow:hidden;background:var(--mcf-fill)} .card-body{display:flex;flex-direction:column;gap:var(--mcf-s2);padding:var(--mcf-s2) var(--mcf-s5) var(--mcf-s5)} /* text never closer than 24px to a card edge */ .card-meta{display:flex;align-items:center;gap:var(--mcf-s2);font-size:var(--mcf-size-small);color:var(--mcf-grey)} .card-meta .chip{margin-left:auto} .card h3{font-size:var(--mcf-size-heading);font-weight:600;line-height:1.3;text-wrap:balance} .card p{color:var(--mcf-grey);font-size:var(--mcf-size-table);text-wrap:pretty} .card:hover h3{color:var(--mcf-blue)} .card:hover{color:var(--mcf-ink)} /* Case study card: facts in a small key-value list under the title. */ .card-case .card-facts{display:grid;grid-template-columns:auto 1fr;gap:4px var(--mcf-s3);font-size:var(--mcf-size-small);border-top:1px solid var(--mcf-line-soft);padding-top:var(--mcf-s3);margin-top:var(--mcf-s1)} .card-case .card-facts dt{color:var(--mcf-grey)} .card-case .card-facts dd{color:var(--mcf-ink);font-weight:500} .chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--mcf-size-caption);font-weight:500;padding:3px 10px;border-radius:var(--mcf-r-pill);background:var(--mcf-fill);color:var(--mcf-grey-strong);white-space:nowrap} /* A list row instead of a card (the blog's list view, the "latest" list). */ .rowlist{display:flex;flex-direction:column;border-top:1px solid var(--mcf-line)} .rowlist-item{display:grid;grid-template-columns:1fr auto;gap:var(--mcf-s2) var(--mcf-s5);align-items:center;padding:var(--mcf-s4) 0;border-bottom:1px solid var(--mcf-line);color:var(--mcf-ink)} .rowlist-item b{font-size:var(--mcf-size-heading);font-weight:600} .rowlist-item span{font-size:var(--mcf-size-small);color:var(--mcf-grey)} .rowlist-item:hover b{color:var(--mcf-blue)} /* ---- 12. CTA band, FAQ, banner ---- */ .cta-band{background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s8);display:grid;grid-template-columns:7fr 5fr;gap:var(--mcf-s7);align-items:center} .band-grey .cta-band{background:var(--mcf-card)} .cta-band h2{font-size:var(--mcf-size-page);font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance;margin-bottom:var(--mcf-s3)} .cta-band p{color:var(--mcf-grey);max-width:44ch;text-wrap:pretty} .cta-band .actions{justify-content:flex-end} @media (max-width:900px){.cta-band{grid-template-columns:1fr;padding:var(--mcf-s6)}.cta-band .actions{justify-content:flex-start}} /* FAQ: native details, one open at a time by site-v2.js. */ .faq{border-top:1px solid var(--mcf-line);max-width:var(--wrap-read)} .faq details{border-bottom:1px solid var(--mcf-line)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s4);padding:var(--mcf-s4) 0;font-size:var(--mcf-size-heading);font-weight:600;line-height:1.35} .faq summary .ico{width:20px;height:20px;flex-shrink:0;color:var(--mcf-grey);transition:transform var(--t-menu) var(--ease-out)} .faq details[open] summary .ico{transform:rotate(45deg)} .faq summary:hover{color:var(--mcf-blue)} .faq .copy{padding:0 0 var(--mcf-s5);color:var(--mcf-grey-strong)} .faq-wide{max-width:none} /* The announcement banner: one per page at most, with one button. */ .banner{display:grid;grid-template-columns:auto 1fr auto;gap:var(--mcf-s6);align-items:center;padding:var(--mcf-s6) var(--mcf-s7);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);background:var(--mcf-card)} .banner .illo{width:96px} .banner h3{font-size:var(--mcf-size-section);font-weight:600;margin-bottom:4px;text-wrap:balance} .banner p{color:var(--mcf-grey)} @media (max-width:900px){.banner{grid-template-columns:1fr;gap:var(--mcf-s4);padding:var(--mcf-s5)}} /* ---- 13. prose (articles), legal layout, figures ---- */ .prose{font-size:var(--mcf-size-heading);line-height:1.6;max-width:var(--wrap-read);text-wrap:pretty} .prose>*+*{margin-top:var(--mcf-s5)} .prose h2{font-size:var(--mcf-size-title);font-weight:600;line-height:1.2;letter-spacing:-.015em;margin-top:var(--mcf-s8)} .prose h3{font-size:var(--mcf-size-section);font-weight:600;line-height:1.3;margin-top:var(--mcf-s7)} .prose h4{font-size:var(--mcf-size-heading);font-weight:600} .prose h2+*,.prose h3+*,.prose h4+*{margin-top:var(--mcf-s3)} .prose p a,.prose li a{text-decoration:underline;text-decoration-color:var(--mcf-control);text-underline-offset:3px} .prose p a:hover,.prose li a:hover{text-decoration-color:currentColor} .prose ul,.prose ol{padding-left:1.4em;display:flex;flex-direction:column;gap:var(--mcf-s2)} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose li::marker{color:var(--mcf-grey)} .prose strong{font-weight:600} .prose table{width:100%;font-size:var(--mcf-size-body);font-variant-numeric:tabular-nums} .prose th{text-align:left;font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mcf-grey);padding:0 var(--mcf-s3) var(--mcf-s3) 0;border-bottom:1px solid var(--mcf-line)} .prose td{padding:var(--mcf-s3) var(--mcf-s3) var(--mcf-s3) 0;border-bottom:1px solid var(--mcf-line-soft);vertical-align:top} .prose tr:last-child td{border-bottom:0} .prose .table-wrap{overflow-x:auto} .prose blockquote,.pullquote{border-left:2px solid var(--mcf-ink);padding:var(--mcf-s1) 0 var(--mcf-s1) var(--mcf-s5);font-size:var(--mcf-size-section);font-weight:500;line-height:1.35;letter-spacing:-.01em;text-wrap:balance} .prose blockquote footer,.pullquote footer{font-size:var(--mcf-size-small);font-weight:400;color:var(--mcf-grey);margin-top:var(--mcf-s2);letter-spacing:0} .callout{background:var(--mcf-page);border-radius:var(--mcf-r-inner);padding:var(--mcf-s5);font-size:var(--mcf-size-body);line-height:1.55} .callout b{display:block;font-weight:600;margin-bottom:4px} .band-grey .callout{background:var(--mcf-card)} .prose figure{margin-top:var(--mcf-s7);margin-bottom:var(--mcf-s7)} .prose figure img{width:100%;border-radius:var(--mcf-r-card)} .prose figure .slot{width:100%} .prose figcaption,.figcap{font-size:var(--mcf-size-small);color:var(--mcf-grey);margin-top:var(--mcf-s3);line-height:1.5} .credit{font-size:var(--mcf-size-caption);color:var(--mcf-grey)} .credit a{color:var(--mcf-grey);text-decoration:underline;text-decoration-color:var(--mcf-control);text-underline-offset:2px} /* Article head: meta line, title, lead, author. */ .art-head{display:flex;flex-direction:column;gap:var(--mcf-s4);max-width:var(--wrap-read)} .art-head .t-page{max-width:20ch} .art-meta{display:flex;align-items:center;gap:var(--mcf-s3);font-size:var(--mcf-size-small);color:var(--mcf-grey);flex-wrap:wrap} .author{display:flex;align-items:center;gap:var(--mcf-s3);font-size:var(--mcf-size-small)} .author img{width:40px;height:40px;border-radius:50%;object-fit:cover} .author b{display:block;font-weight:600;color:var(--mcf-ink);font-size:var(--mcf-size-table)} .author span{color:var(--mcf-grey)} /* The article layout: contents left (sticky), reading column, room right. */ .art-body{display:grid;grid-template-columns:200px minmax(0,var(--wrap-read)) 1fr;gap:var(--mcf-s8);align-items:start} .legal .art-body{grid-template-columns:200px minmax(0,var(--wrap-read))} .toc{position:sticky;top:calc(var(--head-h) + var(--mcf-s6));font-size:var(--mcf-size-small)} .toc h2{font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mcf-grey);margin-bottom:var(--mcf-s3)} .toc ol{display:flex;flex-direction:column;gap:var(--mcf-s2)} .toc a{color:var(--mcf-grey-strong);display:block;padding:2px 0 2px var(--mcf-s3);border-left:2px solid var(--mcf-line);line-height:1.4} .toc a:hover{color:var(--mcf-blue)} .toc a.is-active{color:var(--mcf-ink);border-left-color:var(--mcf-ink);font-weight:500} .toc .toc-select{display:none} @media (max-width:900px){.art-body,.legal .art-body{grid-template-columns:1fr;gap:var(--mcf-s6)}.toc{position:static}.toc ol{display:none}.toc .toc-select{display:flex}} .updated{font-size:var(--mcf-size-small);color:var(--mcf-grey)} /* ---- 14. blog list parts ---- */ /* Tabs (the sections at the top). */ .tabs{display:flex;gap:var(--mcf-s5);border-bottom:1px solid var(--mcf-line);overflow-x:auto;scrollbar-width:none} .tabs a,.tabs button{display:inline-flex;align-items:center;gap:6px;padding:12px 0;font-size:var(--mcf-size-body);font-weight:500;color:var(--mcf-grey);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap} .tabs a:hover,.tabs button:hover{color:var(--mcf-ink)} .tabs [aria-current],.tabs [aria-selected="true"]{color:var(--mcf-ink);border-bottom-color:var(--mcf-ink)} .tabs .chip{font-variant-numeric:tabular-nums} /* The big section links (the blog's top right). */ .biglinks{display:flex;flex-direction:column} .biglinks a{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s4);padding:var(--mcf-s4) 0;border-top:1px solid var(--mcf-line);font-size:var(--mcf-size-page);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--mcf-ink)} .biglinks a:last-child{border-bottom:1px solid var(--mcf-line)} .biglinks a .ico{width:28px;height:28px;color:var(--mcf-grey);transition:transform var(--t-fast) ease} .biglinks a:hover{color:var(--mcf-blue)} .biglinks a:hover .ico{transform:translateX(4px);color:var(--mcf-blue)} @media (max-width:640px){.biglinks a{font-size:var(--mcf-size-title)}} /* The listing toolbar: search left, count, then the grid/list switch. */ .toolbar{display:flex;align-items:center;gap:var(--mcf-s4);flex-wrap:wrap;margin-bottom:var(--mcf-s6)} .toolbar .search-field{flex:1 1 260px;max-width:360px} .toolbar .count{font-size:var(--mcf-size-small);color:var(--mcf-grey);margin-left:auto} .search-field{position:relative;display:flex;align-items:center} .search-field .ico{position:absolute;left:14px;width:18px;height:18px;color:var(--mcf-grey);pointer-events:none} .search-field input{width:100%;height:44px;padding:0 var(--mcf-s4) 0 42px;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-pill);background:var(--mcf-card);font-size:var(--mcf-size-body)} .search-field input:focus{outline:none;border-color:var(--mcf-blue)} .search-field input:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px} /* Segmented control: grid or list, and any choice of two to four. */ .seg{display:inline-flex;padding:3px;border-radius:var(--mcf-r-pill);background:var(--mcf-fill);gap:2px} .seg button,.seg label{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:var(--mcf-r-pill);font-size:var(--mcf-size-small);font-weight:500;color:var(--mcf-grey-strong);cursor:pointer;position:relative;transition:background var(--t-fast) ease,color var(--t-fast) ease} .seg button[aria-pressed="true"],.seg label:has(input:checked){background:var(--mcf-card);color:var(--mcf-ink)} .seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .seg label:has(input:focus-visible){outline:2px solid var(--mcf-blue);outline-offset:2px} .seg .ico{width:16px;height:16px} /* The blog layout: filters left, list right. */ .blog-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--mcf-s8);align-items:start} .filters{position:sticky;top:calc(var(--head-h) + var(--mcf-s6));display:flex;flex-direction:column} .filters details{border-top:1px solid var(--mcf-line);padding:var(--mcf-s3) 0} .filters details:last-child{border-bottom:1px solid var(--mcf-line)} .filters summary{display:flex;align-items:center;justify-content:space-between;font-size:var(--mcf-size-body);font-weight:600;padding:6px 0} .filters summary .ico{width:16px;height:16px;color:var(--mcf-grey);transition:transform var(--t-menu) var(--ease-out)} .filters details[open] summary .ico{transform:rotate(180deg)} .filters ul{display:flex;flex-direction:column;gap:var(--mcf-s2);padding:var(--mcf-s2) 0 var(--mcf-s2)} .check{display:flex;align-items:center;gap:10px;font-size:var(--mcf-size-table);cursor:pointer;color:var(--mcf-grey-strong)} .check input{width:18px;height:18px;margin:0;accent-color:var(--mcf-blue);border-radius:4px} .check .n{margin-left:auto;font-size:var(--mcf-size-caption);color:var(--mcf-grey);font-variant-numeric:tabular-nums} .filters .field select{height:40px} .filters-toggle{display:none} @media (max-width:900px){.blog-layout{grid-template-columns:1fr;gap:var(--mcf-s5)}.filters{position:static}.filters-toggle{display:inline-flex}.filters[hidden]{display:none}} .blog-list.is-list .grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--mcf-line)} .blog-list.is-list .card{flex-direction:row;align-items:center;gap:var(--mcf-s5);border-radius:0;border-bottom:1px solid var(--mcf-line);padding:var(--mcf-s4) 0;background:transparent} .blog-list.is-list .card-pic{width:160px;flex-shrink:0;border-radius:var(--mcf-r-inner)} .blog-list.is-list .card-body{padding:0;flex:1} .blog-list.is-list .card p{display:none} @media (max-width:640px){.blog-list.is-list .card-pic{width:96px}} /* ---- 15. forms ---- Label above, hint below, error under the field saying what to do. Fields 44px tall; at phone width their text is 18 so iOS does not zoom. */ .form{display:flex;flex-direction:column;gap:var(--mcf-s5);max-width:640px} .form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--mcf-s4);min-width:0} .form legend{font-size:var(--mcf-size-section);font-weight:600;padding:0;margin-bottom:var(--mcf-s3);letter-spacing:-.01em} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--mcf-s4)} @media (max-width:640px){.form-row{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:6px} .field>label,.field>.label{font-size:var(--mcf-size-table);font-weight:600} .field .optional{font-weight:400;color:var(--mcf-grey)} .field input,.field select,.field textarea{min-height:44px;padding:10px 14px;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-control);background:var(--mcf-card);color:var(--mcf-ink);font-size:var(--mcf-size-body);width:100%} .field textarea{min-height:120px;resize:vertical;line-height:1.5} .field select{appearance:none;padding-right:40px} .select{position:relative} .select::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;border-right:1.75px solid var(--mcf-grey);border-bottom:1.75px solid var(--mcf-grey);transform:translateY(-70%) rotate(45deg);pointer-events:none} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--mcf-blue)} .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px} .field .hint{font-size:var(--mcf-size-small);color:var(--mcf-grey);line-height:1.45} .field .error{display:none;font-size:var(--mcf-size-small);color:var(--mcf-bad-text);line-height:1.45} .field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--mcf-bad)} .field.is-bad .error{display:flex;align-items:flex-start;gap:6px} .field.is-bad .error .ico{width:16px;height:16px;margin-top:2px;color:var(--mcf-bad)} .prefix{position:relative} .prefix>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mcf-grey);font-weight:500;pointer-events:none} .prefix input{padding-left:32px;font-variant-numeric:tabular-nums} @media (max-width:640px){.field input,.field select,.field textarea,.search-field input{font-size:var(--mcf-size-heading)}} /* Error summary at the top after a failed send. */ .form-summary{border:1px solid var(--mcf-bad-line);background:var(--mcf-bad-tint);border-radius:var(--mcf-r-inner);padding:var(--mcf-s4) var(--mcf-s5);color:var(--mcf-bad-text)} .form-summary b{display:block;font-weight:600;margin-bottom:var(--mcf-s2)} .form-summary ul{padding-left:1.2em;list-style:disc;display:flex;flex-direction:column;gap:4px;font-size:var(--mcf-size-table)} .form-summary a{color:var(--mcf-bad-text);text-decoration:underline} /* The stepper: which part of a long form you are on. */ .stepper{display:flex;gap:var(--mcf-s2);counter-reset:sp} .stepper li{flex:1;display:flex;flex-direction:column;gap:var(--mcf-s2);font-size:var(--mcf-size-small);color:var(--mcf-grey);counter-increment:sp} .stepper li::before{content:"";display:block;height:3px;border-radius:2px;background:var(--mcf-line)} .stepper li.is-done::before,.stepper li[aria-current]::before{background:var(--mcf-ink)} .stepper li[aria-current]{color:var(--mcf-ink);font-weight:600} .stepper li span::before{content:counter(sp) ". "} /* File drop zone. */ .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mcf-s2);padding:var(--mcf-s6);border:1px dashed var(--mcf-control);border-radius:var(--mcf-r-inner);background:var(--mcf-page);text-align:center;color:var(--mcf-grey);font-size:var(--mcf-size-table);cursor:pointer;transition:border-color var(--t-fast) ease} .drop:hover,.drop.is-over{border-color:var(--mcf-blue);color:var(--mcf-ink)} .drop .ico{width:24px;height:24px;color:var(--mcf-grey-strong)} .drop b{color:var(--mcf-blue);font-weight:500} .drop input{position:absolute;opacity:0;width:1px;height:1px} .drop:has(input:focus-visible){outline:2px solid var(--mcf-blue);outline-offset:2px} .files{display:flex;flex-direction:column;gap:var(--mcf-s2)} .files li{display:flex;align-items:center;gap:var(--mcf-s3);padding:var(--mcf-s2) var(--mcf-s3);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-control);font-size:var(--mcf-size-table)} .files li .ico{width:18px;height:18px;color:var(--mcf-grey)} .files li span{color:var(--mcf-grey);margin-left:auto;font-size:var(--mcf-size-small);font-variant-numeric:tabular-nums} /* Consent: a checkbox and the plain sentence. */ .consent{display:flex;gap:var(--mcf-s3);align-items:flex-start;font-size:var(--mcf-size-table);color:var(--mcf-grey-strong);line-height:1.5} .consent input{width:20px;height:20px;margin:2px 0 0;flex-shrink:0;accent-color:var(--mcf-blue)} .form-actions{display:flex;align-items:center;gap:var(--mcf-s4);flex-wrap:wrap;padding-top:var(--mcf-s2)} .form-actions .note{font-size:var(--mcf-size-small);color:var(--mcf-grey)} .sent{background:var(--mcf-ok-tint);color:var(--mcf-ok-text);border-radius:var(--mcf-r-inner);padding:var(--mcf-s4) var(--mcf-s5);display:flex;gap:var(--mcf-s3);align-items:flex-start} .sent .ico{width:20px;height:20px;margin-top:2px;color:var(--mcf-ok)} .sent b{display:block;font-weight:600} /* ---- 16. chat, search overlay, video modal ---- */ /* The chat: a quiet button bottom right; a panel above it. */ .chat{position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:var(--mcf-s3)} .chat-btn{display:inline-flex;align-items:center;gap:var(--mcf-s2);min-height:44px;padding:0 18px 0 14px;border-radius:var(--mcf-r-pill);background:var(--mcf-card);border:1px solid var(--mcf-line);color:var(--mcf-ink);font-size:var(--mcf-size-body);font-weight:500;transition:border-color var(--t-fast) ease,background var(--t-fast) ease} .chat-btn:hover{border-color:var(--mcf-control);background:var(--mcf-page)} .chat-btn .ico{width:20px;height:20px} /* Donnie himself on the corner button (WEB-055, Martin: "Instead of the question picture, can it be a small Donnie - brand consistency") */ .chat-btn .chat-donnie{width:30px;height:35px;object-fit:contain;margin-block:-4px} .chat-panel{width:min(380px,calc(100vw - 2 * var(--gutter)));height:min(560px,calc(100vh - var(--head-h) - 2 * var(--gutter) - 56px));display:flex;flex-direction:column;background:var(--mcf-card);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);overflow:hidden} .chat-panel[hidden]{display:none} html.js .chat-panel:not([hidden]){animation:mcf-rise var(--t-menu) var(--ease-out)} @keyframes mcf-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .chat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s3);padding:var(--mcf-s3) var(--mcf-s3) var(--mcf-s3) var(--mcf-s4);border-bottom:1px solid var(--mcf-line)} .chat-head b{font-weight:600} .chat-head small{display:block;font-size:var(--mcf-size-caption);color:var(--mcf-grey);font-weight:400} .chat-log{flex:1;overflow-y:auto;padding:var(--mcf-s4);display:flex;flex-direction:column;gap:var(--mcf-s3);font-size:var(--mcf-size-table);line-height:1.5} .msg{max-width:88%;padding:10px 14px;border-radius:var(--mcf-r-inner);background:var(--mcf-page);color:var(--mcf-ink)} .msg-me{align-self:flex-end;background:var(--mcf-blue-tint)} .msg p+p{margin-top:var(--mcf-s2)} .msg-links{display:flex;flex-direction:column;gap:4px;margin-top:var(--mcf-s2)} .msg-links a{display:inline-flex;align-items:center;gap:4px;font-size:var(--mcf-size-small);font-weight:500} .msg-links .ico{width:14px;height:14px} .msg .btn{margin-top:var(--mcf-s2);align-self:flex-start} .chat-foot{display:flex;gap:var(--mcf-s2);padding:var(--mcf-s3);border-top:1px solid var(--mcf-line)} .chat-foot input{flex:1;min-height:40px;padding:0 14px;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-pill);font-size:var(--mcf-size-table)} .chat-foot input:focus{outline:none;border-color:var(--mcf-blue)} .chat-foot button{width:40px;height:40px;border-radius:var(--mcf-r-pill);background:var(--mcf-blue);color:var(--mcf-card);display:inline-flex;align-items:center;justify-content:center} .chat-foot button .ico{width:18px;height:18px} .chat-note{font-size:var(--mcf-size-caption);color:var(--mcf-grey);padding:0 var(--mcf-s4) var(--mcf-s3);text-align:center} /* Dialogs: the search palette and the video modal. */ dialog.sheet{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;inset:0;margin:0;display:none;align-items:flex-start;justify-content:center} dialog.sheet[open]{display:flex} dialog.sheet::backdrop{background:var(--mcf-scrim)} .sheet-box{background:var(--mcf-card);border-radius:var(--mcf-r-card);width:min(680px,calc(100% - 2 * var(--gutter)));margin-top:min(12vh,120px);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--gutter))} html.js dialog.sheet[open] .sheet-box{animation:mcf-rise var(--t-menu) var(--ease-out)} .search-box .search-field input{height:60px;border:0;border-bottom:1px solid var(--mcf-line);border-radius:0;font-size:var(--mcf-size-heading);padding-left:52px} .search-box .search-field .ico{left:20px;width:22px;height:22px} .search-box .search-field input:focus{border-color:var(--mcf-line)} .search-results{overflow-y:auto;padding:var(--mcf-s2)} .search-results h3{font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mcf-grey);padding:var(--mcf-s3) var(--mcf-s3) var(--mcf-s2)} .search-results a{display:flex;flex-direction:column;gap:2px;padding:10px var(--mcf-s3);border-radius:var(--mcf-r-control);color:var(--mcf-ink)} .search-results a b{font-weight:500} .search-results a span{font-size:var(--mcf-size-small);color:var(--mcf-grey)} .search-results a:hover,.search-results a.is-active{background:var(--mcf-page)} .search-results a:hover b{color:var(--mcf-blue)} .search-empty{padding:var(--mcf-s5) var(--mcf-s3);color:var(--mcf-grey);font-size:var(--mcf-size-table)} .search-foot{display:flex;gap:var(--mcf-s4);padding:var(--mcf-s3) var(--mcf-s4);border-top:1px solid var(--mcf-line);font-size:var(--mcf-size-caption);color:var(--mcf-grey)} .search-foot kbd{font-family:inherit;padding:1px 6px;border:1px solid var(--mcf-line);border-radius:4px;background:var(--mcf-page)} .video-box{width:min(960px,calc(100% - 2 * var(--gutter)));margin-top:auto;margin-bottom:auto} .video-box .slot{aspect-ratio:16/9;border-radius:0;border:0} .video-box video{display:block;width:100%;aspect-ratio:16/9;background:var(--mcf-ink)} /* a film's close (PRJ-057): over the foot of the film, above its controls; under the film on a phone, where it would cover it */ .video-box{position:relative} .vend{position:absolute;left:0;right:0;bottom:64px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--mcf-s3);padding:0 var(--mcf-s4)} .vend[hidden]{display:none} .vend .btn{min-height:44px} @media (max-width:640px){.vend{position:static;flex-direction:column;padding:var(--mcf-s4)}.vend .btn{width:100%}} .video-head{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s3);padding:var(--mcf-s3) var(--mcf-s3) var(--mcf-s3) var(--mcf-s5)} .video-head b{font-weight:600} .video-head small{color:var(--mcf-grey);font-size:var(--mcf-size-small);margin-left:var(--mcf-s2);font-variant-numeric:tabular-nums} @media (max-width:640px){.chat{right:var(--gutter);bottom:var(--gutter)}.chat-panel{height:min(560px,calc(100vh - 100px))}.sheet-box{margin-top:var(--mcf-s4)}} /* ---- 16b. Donnie's introduction (register S374, Martin, 20 October 2026) ---- "The Donnie in the corner needs to try and draw attention, so may need some more colour around it or flash slightly." So the corner wears the house blue and a ring breathes out from it now and then; on the home page the corner is a bubble with Donnie in it (body data-intro="bubble"), like the small film in the corner of a site he liked. Nothing plays until it is tapped: "so it doesnt start until they tap on it". Tapped, the introduction opens (#donnie-intro, assets/donnie-intro.js): Donnie talking, the words big as he says them, then the monthly email and "What would you like to do today?". Under reduced motion the ring is still and nothing moves. 06-tests/checkdonnieintro.mjs holds it. */ .chat-btn{position:relative;border:2px solid var(--mcf-blue)} .chat-btn::before,.intro-bubble::before{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--mcf-blue);opacity:0;pointer-events:none;animation:intro-ring 3.2s ease-out 1s infinite} html.intro-seen .chat-btn::before,html.intro-seen .intro-bubble::before,.chat-btn[aria-expanded="true"]::before{animation:none} @keyframes intro-ring{0%{transform:scale(1);opacity:.75}45%,100%{transform:scale(1.14,1.3);opacity:0}} .intro-bubble{display:none} html.js body[data-intro="bubble"] .intro-bubble{display:flex} html.js body[data-intro="bubble"] .chat-btn{display:none} .intro-bubble{position:relative;align-items:center;gap:var(--mcf-s3);min-height:44px;padding:5px 20px 5px 5px;border-radius:var(--mcf-r-pill);background:var(--mcf-card);border:2px solid var(--mcf-blue);color:var(--mcf-ink);text-align:left;transition:background var(--t-fast) ease} .intro-bubble:hover{background:var(--mcf-blue-tint)} html.js body[data-intro="bubble"] .intro-bubble[aria-expanded="true"],.intro-bubble[aria-expanded="true"]{display:none} .intro-bubble-art{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--mcf-blue-tint);display:grid;place-items:center} .intro-bubble-art img,.chat .intro-bubble-art > svg.illo{display:block;width:72px;height:72px;max-width:none;object-fit:cover} .intro-bubble-label{display:flex;flex-direction:column;font-weight:600;font-size:var(--mcf-size-body);line-height:1.25} .intro-bubble-label small{font-weight:400;font-size:var(--mcf-size-small);color:var(--mcf-grey)} .chat-meet{min-height:44px;padding:0 14px;border-radius:var(--mcf-r-pill);border:2px solid var(--mcf-blue);background:var(--mcf-card);color:var(--mcf-blue);font-size:var(--mcf-size-small);font-weight:600;white-space:nowrap} .chat-meet:hover{background:var(--mcf-blue-tint)} .intro{width:min(400px,calc(100vw - 2 * var(--gutter)));max-height:calc(100vh - 2 * var(--gutter));max-height:calc(100dvh - 2 * var(--gutter));overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;background:var(--mcf-card);border:2px solid var(--mcf-blue);border-radius:var(--mcf-r-card)} .intro[hidden]{display:none} .chat.is-intro .chat-btn,.chat.is-intro .intro-bubble{display:none} html.js body[data-intro="bubble"] .chat.is-intro .intro-bubble{display:none} html.js .intro:not([hidden]){animation:mcf-rise var(--t-menu) var(--ease-out)} .intro-head{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s3);padding:var(--mcf-s2) var(--mcf-s2) var(--mcf-s2) var(--mcf-s4);border-bottom:1px solid var(--mcf-line)} .intro-head b{font-weight:600} .intro-head small{display:block;font-size:var(--mcf-size-caption);color:var(--mcf-grey)} .intro-stage{flex:none;height:190px;background:var(--mcf-blue-tint);display:grid;place-items:center;overflow:hidden} .chat .intro-stage > svg.illo{display:block;height:180px;width:auto;max-width:100%} .intro-words{min-height:5.4em;margin:0;padding:var(--mcf-s4) var(--mcf-s4) var(--mcf-s2);font-size:var(--mcf-size-section);line-height:1.3;font-weight:600;color:var(--mcf-grey)} .intro-words .said{color:var(--mcf-ink)} .intro-note{margin:0;padding:0 var(--mcf-s4);font-size:var(--mcf-size-small);color:var(--mcf-grey)} .intro-note[hidden]{display:none} .intro-controls{display:flex;flex-wrap:wrap;gap:var(--mcf-s2);padding:var(--mcf-s3) var(--mcf-s4)} .intro-mail,.intro-next{display:flex;flex-direction:column;gap:var(--mcf-s2);margin:0 var(--mcf-s4) var(--mcf-s4);padding:var(--mcf-s4);border-radius:var(--mcf-r-inner);background:var(--mcf-page)} .intro-mail[hidden],.intro-next[hidden],.intro-mail [hidden]{display:none} .intro-mail label,.intro-ask{margin:0;font-weight:600} .intro-mail input{min-height:44px;padding:0 14px;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-control);background:var(--mcf-card);font-size:16px} .intro-mail input:focus{outline:none;border-color:var(--mcf-blue)} .intro-consent{margin:0;font-size:var(--mcf-size-small);color:var(--mcf-grey-strong);line-height:1.45} .intro-mail-acts,.intro-choices{display:flex;flex-wrap:wrap;gap:var(--mcf-s2)} .intro-mail-acts .btn,.intro-choices .btn{white-space:normal;text-align:center;line-height:1.2} .intro-said{margin:0;font-weight:600;color:var(--mcf-ok-text)} .intro-said.is-bad{color:var(--mcf-bad-text)} .intro-said:empty{display:none} @media (max-width:640px){.intro-stage{height:150px}.chat .intro-stage > svg.illo{height:142px}.intro-words{font-size:20px}.intro-choices .btn{flex:1 1 40%}} @media (prefers-reduced-motion:reduce){.chat-btn::before,.intro-bubble::before{animation:none}html.js .intro:not([hidden]){animation:none}} /* ---- 17. footer ---- Soft grey. The logo alone at the top left, the social links alone at the bottom left; five link columns; then the badge and the regulated paragraph, verbatim, in 12px grey across the bottom. */ .site-foot{background:var(--mcf-page);border-top:1px solid var(--mcf-line);padding-block:var(--mcf-s8) var(--mcf-s7);font-size:var(--mcf-size-table)} .foot-grid{display:grid;grid-template-columns:minmax(160px,2fr) repeat(7,minmax(0,2fr));gap:var(--mcf-s7) var(--mcf-s5)} .foot-brand{display:flex;flex-direction:column;justify-content:space-between;gap:var(--mcf-s7);min-height:280px} .foot-brand img{width:180px;height:auto} .foot-social{display:flex;flex-direction:column;gap:var(--mcf-s3)} .foot-social ul{display:flex;gap:var(--mcf-s3)} .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--mcf-r-pill);color:var(--mcf-grey-strong);border:1px solid var(--mcf-line);background:var(--mcf-card)} .foot-social a:hover{color:var(--mcf-blue);border-color:var(--mcf-control)} .foot-social .ico{width:18px;height:18px} .foot-social small{font-size:var(--mcf-size-caption);color:var(--mcf-grey)} .foot-wide{grid-column:span 2} .foot-col ul.foot-split{display:block;column-count:2;column-gap:var(--mcf-s5)} .foot-col ul.foot-split li{break-inside:avoid;margin-bottom:10px} .foot-col h2{font-size:var(--mcf-size-small);font-weight:600;margin-bottom:var(--mcf-s3);color:var(--mcf-ink)} .foot-col ul{display:flex;flex-direction:column;gap:10px} .foot-col a{color:var(--mcf-grey-strong);line-height:1.35} .foot-col a:hover{color:var(--mcf-blue)} .foot-col a[data-planned]::after{content:" (planned)";font-size:var(--mcf-size-caption);color:var(--mcf-grey)} .foot-bottom{margin-top:var(--mcf-s8);padding-top:var(--mcf-s6);border-top:1px solid var(--mcf-line);display:grid;grid-template-columns:auto 1fr;gap:var(--mcf-s6);align-items:start} .foot-badge{display:flex;align-items:center;gap:var(--mcf-s3);font-size:var(--mcf-size-caption);color:var(--mcf-grey)} .foot-badge img{width:56px;height:auto} .regulated{font-size:var(--mcf-size-caption);color:var(--mcf-grey);line-height:1.6;text-wrap:pretty} .regulated a{color:var(--mcf-grey);text-decoration:underline;text-decoration-color:var(--mcf-control);text-underline-offset:2px} .foot-contact{margin-top:var(--mcf-s5);display:flex;flex-direction:column;gap:6px;color:var(--mcf-grey-strong)} .foot-contact a{color:var(--mcf-grey-strong)} .foot-contact a:hover{color:var(--mcf-blue)} @media (max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr 1fr}.foot-wide{grid-column:1 / -1}.foot-brand{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:flex-start}} @media (max-width:640px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--mcf-s6) var(--mcf-s5)}.foot-brand{flex-direction:column}.foot-brand img{width:150px}.foot-bottom{grid-template-columns:1fr}} /* ---- 18. slots and the draft-words marker ---- A slot is where a photo or a film goes once Martin supplies it. It is obviously a placeholder and still tidy: soft grey, a thin dashed edge, the camera or play icon, and what it will show. sync-chrome.mjs fills the inner markup from the data- attributes. */ .slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mcf-s2);background:var(--mcf-page);border:1px dashed var(--mcf-control);border-radius:var(--mcf-r-card);padding:var(--mcf-s5);text-align:center;color:var(--mcf-grey);min-height:120px;overflow:hidden} .band-grey .slot{background:var(--mcf-card)} .slot[data-shape="16:9"]{aspect-ratio:16/9} .slot[data-shape="4:3"]{aspect-ratio:4/3} .slot[data-shape="3:2"]{aspect-ratio:3/2} .slot[data-shape="1:1"]{aspect-ratio:1/1} .slot[data-shape="3:4"]{aspect-ratio:3/4} .slot[data-shape="21:9"]{aspect-ratio:21/9} .slot[data-shape="2:1"]{aspect-ratio:2/1} .slot .slot-ico{width:28px;height:28px;color:var(--mcf-grey-strong)} .slot figcaption{font-size:var(--mcf-size-small);line-height:1.45;max-width:36ch} .slot figcaption b{display:block;font-weight:600;color:var(--mcf-grey-strong)} .slot figcaption small{display:block;font-size:var(--mcf-size-caption);margin-top:2px} .slot figcaption .slot-id{display:none;font-family:var(--mcf-mono);font-size:var(--mcf-size-caption)} .slot-round{border-radius:50%;aspect-ratio:1/1;padding:var(--mcf-s3)} .slot-round figcaption small,.slot-round figcaption span{display:none} /* Draft words: invisible until the mock toolbar turns them on (mock.css). */ /* ---- 19. reveal and drawings ---- A gentle once-only rise for at most a hero's media and one section per page. Off under reduced motion, and a page with no JS shows everything. */ html.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)} html.js .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}} .illo{display:block;max-width:100%;height:auto} div.illo:empty{aspect-ratio:4/3;background:var(--mcf-page);border-radius:var(--mcf-r-card)} /* a drawing not yet inlined */ /* The hidden icon sheet at the top of the page (tools/sync-chrome.mjs) - a class, not a style attribute: the site's security rules refuse inline styles. */ .sprite{position:absolute} /* PHONE THUMBS (Martin, 14 October 2026: "every page we build must also be optimised for easy viewing on a phone"). On a phone everything pressed is at least 44 pixels each way - Apple's guidelines, the house north star - held by tools/check-mockups.mjs at 390 and 375. */ @media (max-width:767px){ .head-icon{width:44px;height:44px} .head-apply,.btn-small{min-height:44px} .strip-pause{min-height:44px} .seg button{min-height:44px;min-width:44px} .filters summary{min-height:44px;display:flex;align-items:center} } /* ---- the long finance and trade pages' shared parts (WEB-058, 14 October 2026) ---- Martin: "make them consistent across the whole website of the trade pages". The three checklist tiles (like the CRM's menu tiles), the case study and guide cards with their drawings, and the closing band with Apply with Donnie. */ .need-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mcf-s5)} .need-tile{display:flex;flex-direction:column;gap:var(--mcf-s2);padding:var(--mcf-s6);background:var(--mcf-card);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);color:var(--mcf-ink);min-height:44px;transition:border-color var(--t-fast) ease} .need-tile:hover{border-color:var(--mcf-blue);color:var(--mcf-ink)} .need-tile>.ico{width:28px;height:28px;color:var(--mcf-blue);margin-bottom:var(--mcf-s2)} .need-tile b{font-size:var(--mcf-size-section);font-weight:700;letter-spacing:-.01em} .need-tile span{color:var(--mcf-grey);flex:1} .need-tile small{display:inline-flex;align-items:center;gap:6px;margin-top:var(--mcf-s3);font-size:var(--mcf-size-table);font-weight:600;color:var(--mcf-blue)} .need-tile small em{font-style:normal;font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.06em;color:var(--mcf-grey);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-pill);padding:1px 7px} .need-tile small .ico{width:16px;height:16px} .card-illo{display:flex;align-items:flex-end;justify-content:center;background:var(--mcf-page)} .card-illo .illo{width:100%;height:100%} .case-cards .card-body p{color:var(--mcf-grey)} .case-cards .card-case h3{margin-bottom:var(--mcf-s3)} .page-closing{padding-top:0} .page-close{border-top:1px solid var(--mcf-line);padding-top:var(--mcf-s8);display:grid;grid-template-columns:7fr 5fr;gap:var(--mcf-s8);align-items:end} .page-close p{color:var(--mcf-grey);max-width:56ch;margin-top:var(--mcf-s3)} .page-close .actions{justify-content:flex-end} @media (max-width:900px){ .need-tiles{grid-template-columns:1fr;gap:var(--mcf-s3)} .need-tile{padding:var(--mcf-s5)} .page-close{grid-template-columns:1fr;gap:var(--mcf-s5)} .page-close .actions{justify-content:flex-start} } /* A review quoted word for word, and the "Written by ... Checked" line: shared by every content page (moved from van.css, S280). check-mockups holds a quoted review to one on about.html. */ .vf-review{max-width:640px;background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s6);margin-bottom:var(--mcf-s6)} .vf-review-stars{color:var(--mcf-wait);letter-spacing:2px} .vf-review blockquote{margin:var(--mcf-s2) 0 0;font-size:var(--mcf-size-section);line-height:1.4} .vf-review figcaption{margin-top:var(--mcf-s3);font-size:var(--mcf-size-small);color:var(--mcf-grey)} .vf-by{margin-top:var(--mcf-s5);font-size:var(--mcf-size-small);color:var(--mcf-grey)} /* The author box (and a person card like it), on any page - moved from article.css (S294, 17 October 2026): only the article loaded it, so on the home, van and Inverness pages the name ran into the job title ("Martin MackenzieDirector") and the email into the phone. check-mockups "words run together" holds it. */ .art-author{display:flex;gap:var(--mcf-s5);align-items:flex-start;margin-block:var(--mcf-s8);padding:var(--mcf-s6);background:var(--mcf-page);border-radius:var(--mcf-r-card)} .art-author img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0} .art-author h2.art-author-kicker{font-size:var(--mcf-size-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mcf-grey);margin:0} .art-author-name{margin-top:var(--mcf-s1);display:flex;flex-direction:column} .art-author-name b{font-size:var(--mcf-size-section);font-weight:600} .art-author-name span{font-size:var(--mcf-size-small);color:var(--mcf-grey)} .art-author-contact{display:flex;flex-wrap:wrap;gap:var(--mcf-s2) var(--mcf-s5)} .art-author-contact a{display:inline-flex;align-items:center;min-height:44px} @media (max-width:640px){.art-author{flex-direction:column;padding:var(--mcf-s5)}.art-author img{width:72px;height:72px}}