/* MDML Digital: the extra styling that theme.json can't express. Colours come from the palette (Appearance > Editor > Styles), so the Dark style works too. */ :root, body { --mdml-grad: linear-gradient(120deg, var(--wp--preset--color--purple) 0%, var(--wp--preset--color--magenta) 52%, var(--wp--preset--color--orange) 100%); --mdml-radius: 22px; --mdml-shadow: 0 1px 2px rgba(20, 13, 43, .04), 0 12px 32px -12px rgba(76, 38, 150, .16); --mdml-header-h: 84px; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mdml-header-h) + 8px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } .wp-site-blocks { padding-top: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } .mdml-main > .entry-content > * + *, .mdml-main .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; } :where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--wp--preset--color--magenta); outline-offset: 3px; } /* ---------- Header ---------- */ .mdml-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 70%, transparent); } .admin-bar .mdml-header { top: var(--wp-admin--admin-bar--height, 32px); } .mdml-header__bar { min-height: var(--mdml-header-h); gap: 1.5rem; } .mdml-header__right { gap: clamp(1rem, 3vw, 2.25rem); } .mdml-nav .wp-block-navigation-item__content { text-decoration: none; color: var(--wp--preset--color--contrast); opacity: .82; transition: opacity .2s; } .mdml-nav .wp-block-navigation-item__content:hover { opacity: 1; color: var(--wp--preset--color--contrast); } .mdml-nav .wp-block-navigation__container { gap: clamp(1rem, 2.5vw, 2rem); } .mdml-header__cta .wp-block-button__link { padding: .7rem 1.2rem; } @media (max-width: 640px) { :root { --mdml-header-h: 68px; } .mdml-header .mdml-logo__mark img { width: 42px !important; height: 42px !important; } } /* ---------- Logo ---------- */ .mdml-logo { gap: .9rem; align-items: center; } .mdml-logo .wp-block-image, .mdml-logo figure { margin: 0; line-height: 0; } .mdml-logo__mark img { display: block; border-radius: 50%; } .mdml-logo__word { margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--wp--preset--color--contrast); } /* ---------- Buttons ---------- */ .wp-block-button__link { transition: background-color .2s, color .2s, transform .2s, box-shadow .2s; text-decoration: none; } .wp-block-button__link:hover { transform: translateY(-1px); } .mdml-arrow .wp-block-button__link::after { content: "→"; display: inline-block; margin-left: .5em; transition: transform .2s; } .mdml-arrow .wp-block-button__link:hover::after { transform: translateX(3px); } .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent); padding: calc(.85rem - 1.5px) calc(1.5rem - 1.5px); } .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--contrast); background: transparent; color: var(--wp--preset--color--contrast); } /* ---------- Shared bits ---------- */ .mdml-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--wp--preset--color--magenta) 80%, var(--wp--preset--color--contrast)); margin-bottom: .25rem; } .mdml-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--muted); max-width: 40rem; } .mdml-section { padding-block: var(--wp--preset--spacing--60); } .mdml-section--tint { background: var(--wp--preset--color--surface); } .mdml-section__head { max-width: 46rem; margin-bottom: var(--wp--preset--spacing--50); } .mdml-section__head h2 { margin-top: .5rem; } /* ---------- Hero ---------- */ .mdml-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 10vw, 8.5rem) clamp(4rem, 9vw, 7.5rem); background: radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--wp--preset--color--magenta) 9%, transparent) 0%, transparent 70%), var(--wp--preset--color--base); } .mdml-hero::after { content: ""; position: absolute; z-index: -1; width: min(64vw, 820px); aspect-ratio: 1; right: max(-12vw, -180px); top: 50%; translate: 0 -50%; background: url(../img/hero-sphere.svg) center / contain no-repeat; animation: mdml-float 14s ease-in-out infinite alternate; pointer-events: none; } @keyframes mdml-float { from { transform: translate3d(0, -10px, 0) rotate(-2deg); } to { transform: translate3d(0, 12px, 0) rotate(2deg); } } @media (prefers-reduced-motion: reduce) { .mdml-hero::after { animation: none; } } .mdml-hero__inner > * { max-width: 38rem; } .mdml-hero h1 { margin: 0 0 1.5rem; max-width: 12ch; } .mdml-hero .mdml-eyebrow { margin-bottom: 1rem; } :is(h1, h2, .mdml-hero h1) mark.has-inline-color, .mdml-grad-text { background: var(--mdml-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; padding-right: .04em; } .mdml-hero .mdml-lead { margin-bottom: 2.25rem; } .mdml-hero__buttons { gap: .75rem; } @media (max-width: 781px) { .mdml-hero { padding-top: min(58vw, 300px); } .mdml-hero::after { width: min(92vw, 440px); right: -22%; top: -4%; translate: 0 0; } } /* ---------- Strip ---------- */ .mdml-strip { border-block: 1px solid var(--wp--preset--color--line); padding-block: 1.4rem; background: var(--wp--preset--color--base); } .mdml-strip__inner { gap: .75rem 2rem; align-items: center; } .mdml-strip__label { margin: 0; font-size: .875rem; color: var(--wp--preset--color--muted); } .mdml-strip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; } .mdml-strip__list li { font-weight: 700; display: flex; align-items: center; gap: .6rem; } .mdml-strip__list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mdml-grad); flex: none; } /* ---------- How we help (steps) ---------- */ .mdml-steps { gap: clamp(1.5rem, 3vw, 2.5rem); } .mdml-steps, .mdml-cards { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)) !important; } .mdml-step { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.5rem; } .mdml-step__num { font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; margin: 0 0 1rem; background: var(--mdml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .mdml-step h3 { margin: 0 0 .5rem; } .mdml-step p:last-child { color: var(--wp--preset--color--muted); margin: 0; } /* ---------- Service cards ---------- */ .mdml-cards { gap: 1.25rem; } .mdml-card, .mdml-work { position: relative; display: flex; flex-direction: column; background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: var(--mdml-radius); padding: 1.75rem; box-shadow: var(--mdml-shadow); transition: transform .25s, box-shadow .25s; } .mdml-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20, 13, 43, .05), 0 22px 44px -16px rgba(76, 38, 150, .26); } .mdml-card > * { margin: 0; } .mdml-card::before { content: ""; width: 44px; height: 44px; margin-bottom: 1.25rem; background: var(--mdml-grad); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .mdml-card h3 { margin-bottom: .5rem; } .mdml-card > p:not(.mdml-more) { color: var(--wp--preset--color--muted); font-size: .9688rem; } .mdml-ticks { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem !important; display: grid; gap: .45rem; font-size: .9375rem; } .mdml-ticks li { position: relative; padding-left: 1.6rem; } .mdml-ticks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--mdml-grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E") center/contain, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain; -webkit-mask-composite: xor; mask-composite: exclude; } .mdml-more { margin-top: auto !important; font-weight: 700; font-size: .9375rem; } .mdml-more a { text-decoration: none; color: var(--wp--preset--color--contrast); } .mdml-more a::after { content: " →"; transition: margin .2s; } .mdml-more a:hover { color: var(--wp--preset--color--magenta); } .mdml-icon-web { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='38' height='30' rx='6'/%3E%3Cpath d='M5 17h38'/%3E%3Ccircle cx='11' cy='12.5' r='.6' fill='%23000'/%3E%3Ccircle cx='16' cy='12.5' r='.6' fill='%23000'/%3E%3Cpath d='M18 44h12M24 38v6M14 25h10M14 31h18'/%3E%3C/svg%3E"); } .mdml-icon-camera { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='12' width='29' height='24' rx='6'/%3E%3Cpath d='M33 21l11-6v18l-11-6z'/%3E%3Ccircle cx='18.5' cy='24' r='5'/%3E%3C/svg%3E"); } .mdml-icon-spark { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6c1.6 8.4 5.6 12.4 14 14-8.4 1.6-12.4 5.6-14 14-1.6-8.4-5.6-12.4-14-14 8.4-1.6 12.4-5.6 14-14z'/%3E%3Cpath d='M37 30c.8 4 2.6 5.8 6 6.5-3.4.7-5.2 2.5-6 6.5-.8-4-2.6-5.8-6-6.5 3.4-.7 5.2-2.5 6-6.5z'/%3E%3C/svg%3E"); } .mdml-icon-chart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 42h36'/%3E%3Crect x='9' y='26' width='7' height='11' rx='2'/%3E%3Crect x='20.5' y='18' width='7' height='19' rx='2'/%3E%3Crect x='32' y='8' width='7' height='29' rx='2'/%3E%3C/svg%3E"); } /* Optional "Recent work" tiles */ .mdml-work { min-height: 20rem; justify-content: flex-end; color: #fff; border: 0; overflow: hidden; background: var(--mdml-grad); } .mdml-work:nth-child(2) { background: radial-gradient(120% 120% at 0% 100%, var(--wp--preset--color--orange), var(--wp--preset--color--magenta) 45%, var(--wp--preset--color--purple)); } .mdml-work:nth-child(3) { background: radial-gradient(120% 120% at 100% 0%, var(--wp--preset--color--orange), var(--wp--preset--color--purple) 55%, var(--wp--preset--color--night)); } .mdml-work > * { margin: 0; position: relative; } .mdml-work h3 { margin: .35rem 0; color: #fff; } .mdml-work__tag { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } .mdml-work .wp-block-image { position: absolute; inset: 0; margin: 0; } .mdml-work .wp-block-image img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Enquiry band ---------- */ .mdml-enquire { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-block: var(--wp--preset--spacing--60); background: radial-gradient(70% 90% at 100% 100%, rgba(255, 138, 61, .55) 0%, transparent 60%), radial-gradient(80% 100% at 85% 110%, rgba(227, 54, 158, .7) 0%, transparent 70%), radial-gradient(90% 120% at 10% 0%, rgba(122, 60, 240, .45) 0%, transparent 60%), #140c2e; } .mdml-enquire__cols { gap: clamp(2rem, 5vw, 5rem); align-items: flex-start !important; } .mdml-enquire h2 { color: #fff; margin: .4rem 0 1rem; } .mdml-enquire .mdml-eyebrow { color: #ffb8de; } .mdml-enquire .mdml-lead { color: rgba(255, 255, 255, .8); } .mdml-enquire h3 { color: #fff; margin: 2.25rem 0 .9rem; font-size: 1.0625rem; } .mdml-next { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: .8rem; color: rgba(255, 255, 255, .82); } .mdml-next li { counter-increment: n; position: relative; padding-left: 2.6rem; min-height: 1.8rem; } .mdml-next li::before { content: counter(n); position: absolute; left: 0; top: -.05rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-weight: 800; color: #140c2e; background: #fff; } .mdml-enquire .mdml-contact { margin-top: 2rem; } .mdml-enquire .mdml-contact a { color: #fff; } /* Contact list (shortcode) */ .mdml-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .mdml-contact li { display: flex; flex-direction: column; } .mdml-contact span { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .65; } .mdml-contact a { font-weight: 700; text-decoration: none; } .mdml-contact a:hover { text-decoration: underline; } /* ---------- Form ---------- */ .mdml-form { background: #fff; color: #140d2b; border-radius: var(--mdml-radius); padding: clamp(1.4rem, 3.5vw, 2.5rem); box-shadow: 0 30px 70px -30px rgba(10, 4, 30, .6); } .mdml-form > * { margin: 0; } .mdml-form > * + * { margin-top: 1.1rem; } .mdml-form__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; } .mdml-form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .mdml-form__row p { margin: 0; } @media (max-width: 560px) { .mdml-form__row--2 { grid-template-columns: 1fr; } } .mdml-form label, .mdml-form legend { display: block; font-size: .875rem; font-weight: 700; margin-bottom: .4rem; } .mdml-form label span, .mdml-form legend span { font-weight: 500; color: #6b6585; } .mdml-form input[type=text], .mdml-form input[type=email], .mdml-form input[type=tel], .mdml-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: #140d2b; background: #f7f5fc; border: 1.5px solid #e4def2; border-radius: 12px; padding: .8rem .95rem; transition: border-color .2s, background-color .2s, box-shadow .2s; } .mdml-form textarea { min-height: 8.5rem; resize: vertical; } .mdml-form input:focus, .mdml-form textarea:focus { outline: none; background: #fff; border-color: #7a3cf0; box-shadow: 0 0 0 4px rgba(122, 60, 240, .14); } .mdml-form ::placeholder { color: #8a84a3; } .mdml-form__chips { border: 0; padding: 0; margin-left: 0; margin-right: 0; } .mdml-form__chips label { display: inline-block; margin: 0 .35rem .45rem 0; font-weight: 600; } .mdml-form__chips input { position: absolute; opacity: 0; width: 1px; height: 1px; } .mdml-form__chips label > span { display: inline-block; color: #140d2b; font-size: .875rem; padding: .5rem .95rem; border-radius: 999px; border: 1.5px solid #e4def2; background: #fff; cursor: pointer; transition: all .2s; } .mdml-form__chips label:hover > span { border-color: #b9a6ea; } .mdml-form__chips input:checked + span { background: #140d2b; border-color: #140d2b; color: #fff; } .mdml-form__chips input:focus-visible + span { outline: 2px solid #e3369e; outline-offset: 2px; } .mdml-form__consent { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 500 !important; font-size: .875rem; color: #5a5470; } .mdml-form__consent input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: #7a3cf0; flex: none; } .mdml-form__consent a { color: inherit; } .mdml-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem !important; } .mdml-form__send .wp-block-button__link { border: 0; cursor: pointer; font-family: inherit; background: #140d2b; color: #fff; } .mdml-form__send .wp-block-button__link:hover { background: #7a3cf0; } .mdml-form__note { margin: 0; font-size: .875rem; color: #5a5470; } .mdml-form__error { background: #fdecef; color: #8c1230; border: 1px solid #f5c2ce; border-radius: 12px; padding: .8rem 1rem; font-size: .9375rem; } .mdml-form--done { text-align: left; } .mdml-form--done p { margin: 0; } .mdml-form__done-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem !important; background: var(--mdml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .mdml-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Footer ---------- */ .mdml-footer { background: #0d0820; color: rgba(255, 255, 255, .78); padding-block: var(--wp--preset--spacing--50) 1.5rem; font-size: .9375rem; } .mdml-footer .mdml-logo__word { color: #fff; } .mdml-footer__cols { gap: 2rem; } .mdml-footer__line { max-width: 22rem; margin-top: 1.1rem; } .mdml-footer__h { color: #fff; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; margin: .4rem 0 1rem; } .mdml-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .mdml-footer a { color: #fff; text-decoration: none; } .mdml-footer a:hover { color: #ffb8de; text-decoration: underline; } .mdml-footer__base { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: var(--wp--preset--spacing--50); padding-top: 1.25rem; } .mdml-legal { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .6); } /* ---------- Ordinary pages (privacy etc.) ---------- */ .mdml-page { padding-block: var(--wp--preset--spacing--60); } .mdml-page-title { font-size: var(--wp--preset--font-size--x-large) !important; margin-bottom: 2rem; } .mdml-page h2 { font-size: 1.5rem; margin-top: 2.5rem; } .mdml-page .mdml-form { border: 1px solid var(--wp--preset--color--line); } /* ---------- Editor: show the enquiry form placeholder clearly ---------- */ .editor-styles-wrapper .wp-block-shortcode { color: #140d2b; } /* Full-width sections inside the page keep the side gutter (older WordPress versions zero it). */ .wp-block-post-content > .alignfull.has-global-padding { padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); } .mdml-card h3, .mdml-step h3, .mdml-work h3 { font-size: 1.375rem; } /* ---------- 2.1: inner pages, navigation, FAQs ---------- */ /* Navigation with the Services drop-down and the phone menu */ .mdml-nav .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 16px; padding: .5rem !important; background: var(--wp--preset--color--base) !important; box-shadow: var(--mdml-shadow); min-width: 15rem !important; } .mdml-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem .8rem !important; border-radius: 10px; } .mdml-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--surface); } .mdml-nav .wp-block-navigation__responsive-container-open { padding: .5rem; border-radius: 999px; border: 1.5px solid var(--wp--preset--color--line); } .mdml-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; padding: 1.5rem clamp(1rem, 5vw, 2rem) !important; } .mdml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem !important; } .mdml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; font-weight: 800; opacity: 1; } .mdml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: .5rem 0 0 1rem !important; background: transparent !important; } .mdml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.125rem; font-weight: 600; padding: .3rem 0 !important; } @media (max-width: 599px) { .mdml-header__right { gap: .6rem; } .mdml-header__cta .wp-block-button__link { padding: .6rem .95rem; font-size: .875rem; } } /* Smaller hero on inner pages */ .mdml-hero--page { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem); } .mdml-hero--page::after { width: min(46vw, 600px); right: max(-10vw, -140px); } .mdml-hero--page h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); max-width: 15ch; } @media (max-width: 781px) { .mdml-hero--page { padding-top: min(46vw, 230px); } .mdml-hero--page::after { width: min(70vw, 330px); right: -14%; } } /* Split sections: heading on the left, content on the right */ .mdml-split { gap: clamp(2rem, 6vw, 5rem) !important; } .mdml-split .mdml-lead { font-size: 1.125rem; } .mdml-ticks--big { font-size: 1.0625rem; gap: .9rem; margin: 0 !important; } .mdml-ticks--big li { padding: 0 0 .9rem 2rem; border-bottom: 1px solid var(--wp--preset--color--line); } .mdml-ticks--big li:last-child { border-bottom: 0; } .mdml-ticks--big li::before { width: 1.2rem; height: 1.2rem; top: .2em; } .mdml-callout { margin-top: 1.75rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--wp--preset--color--surface); border-left: 4px solid var(--wp--preset--color--magenta); font-size: .9688rem; } .mdml-section--slim { padding-block: var(--wp--preset--spacing--50); } /* FAQs (Details blocks) */ .mdml-faqs { display: grid; gap: .75rem; max-width: 52rem; } .mdml-faq { border: 1px solid var(--wp--preset--color--line); border-radius: 16px; background: var(--wp--preset--color--card); padding: 0; transition: box-shadow .2s; } .mdml-faq[open] { box-shadow: var(--mdml-shadow); } .mdml-faq summary { list-style: none; cursor: pointer; padding: 1.15rem 3.25rem 1.15rem 1.35rem; font-weight: 700; font-size: 1.0625rem; position: relative; } .mdml-faq summary::-webkit-details-marker { display: none; } .mdml-faq summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; translate: 0 -50%; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--wp--preset--color--surface); transition: rotate .2s; } .mdml-faq[open] summary::after { rotate: 45deg; } .mdml-faq > p { margin: 0; padding: 0 1.35rem 1rem; color: var(--wp--preset--color--muted); } .mdml-faq > p:last-child { padding-bottom: 1.3rem; } /* Related services */ .mdml-related { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; } .mdml-related a { display: flex; flex-direction: column; gap: .35rem; height: 100%; box-sizing: border-box; padding: 1.4rem 3.5rem 1.4rem 1.4rem; position: relative; border-radius: var(--mdml-radius); background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); text-decoration: none; color: var(--wp--preset--color--contrast); transition: transform .2s, box-shadow .2s; } .mdml-related a::after { content: "→"; position: absolute; right: 1.4rem; top: 1.4rem; font-weight: 700; } .mdml-related a:hover { transform: translateY(-2px); box-shadow: var(--mdml-shadow); color: var(--wp--preset--color--contrast); } .mdml-related strong { font-size: 1.1875rem; } .mdml-related span { color: var(--wp--preset--color--muted); font-size: .9375rem; } /* Who you'll work with */ .mdml-roles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: r; } .mdml-roles li { counter-increment: r; display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--wp--preset--color--line); } .mdml-roles li:first-child { border-top: 1px solid var(--wp--preset--color--line); } .mdml-roles li::before { content: "0" counter(r); grid-row: span 2; font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; background: var(--mdml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .mdml-roles strong { font-size: 1.1875rem; } .mdml-roles span { color: var(--wp--preset--color--muted); } /* Contact page: the band is the first thing, so give it room under the header */ .wp-block-post-content > .mdml-enquire:first-child { padding-top: clamp(3.5rem, 8vw, 6rem); } .mdml-enquire h1 { color: #fff; margin: .4rem 0 1rem; font-size: clamp(2.4rem, 5.2vw, 4rem); } .mdml-footer__area { margin-top: 1.25rem; font-size: .875rem; color: rgba(255, 255, 255, .6); max-width: 18rem; } p.mdml-footer__h { font-weight: 800; } /* 2.1 review fixes */ .mdml-enquire .mdml-next-h { font-size: 1.0625rem; letter-spacing: -.01em; margin: 2.25rem 0 .9rem; color: #fff; } .mdml-section > .mdml-related { max-width: var(--wp--style--global--wide-size) !important; } @media (max-width: 781px) { .mdml-hero:not(.mdml-hero--page) { padding-top: min(84vw, 360px); } .mdml-hero--page { padding-top: min(66vw, 280px); } } /* ---------- 2.2: float into view on scroll (assets/js/reveal.js) ---------- */ .mdml-js .mdml-reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--mdml-d, 0ms); } .mdml-js .mdml-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .mdml-js .mdml-reveal { opacity: 1; transform: none; transition: none; } } @media print { .mdml-js .mdml-reveal { opacity: 1; transform: none; } } /* ---------- 2.2: liquid glass logo opening (assets/js/intro.js) ---------- */ html.mdml-intro { overflow: hidden; } html.mdml-intro::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: #fff; animation: mdml-intro-failsafe 0s 4.5s forwards; /* if scripts fail, the page shows anyway */ } @keyframes mdml-intro-failsafe { to { visibility: hidden; } } .mdml-intro-overlay { position: fixed; inset: 0; z-index: 9999; background: #fff; display: grid; place-items: center; transition: opacity .8s ease, visibility .8s; cursor: pointer; } .mdml-intro-overlay.is-leaving { opacity: 0; visibility: hidden; } .mdml-intro-overlay__glass { width: min(70vw, 340px); height: min(70vw, 340px); transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .mdml-intro-overlay.is-leaving .mdml-intro-overlay__glass { transform: scale(.92); } .mdml-intro-overlay__skip { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2.5rem); font: 600 .875rem/1 inherit; font-family: inherit; color: #5a5470; background: transparent; border: 1.5px solid #e7e1f3; border-radius: 999px; padding: .65rem 1.1rem; cursor: pointer; } .mdml-intro-overlay__skip:hover { color: #140d2b; border-color: #140d2b; } /* ---------- 2.3: gradient buttons (from the gradient-button component) ---------- Every button uses a deep MDML purple gradient that warms through magenta to orange when you point at it, with a thin glowing edge. The colours are the --color-1 … --color-5 values below. */ @property --pos-x { syntax: ''; initial-value: 11.14%; inherits: false; } @property --pos-y { syntax: ''; initial-value: 140%; inherits: false; } @property --spread-x { syntax: ''; initial-value: 150%; inherits: false; } @property --spread-y { syntax: ''; initial-value: 180.06%; inherits: false; } @property --color-1 { syntax: ''; initial-value: #000; inherits: false; } @property --color-2 { syntax: ''; initial-value: #08012c; inherits: false; } @property --color-3 { syntax: ''; initial-value: #4e1e40; inherits: false; } @property --color-4 { syntax: ''; initial-value: #70464e; inherits: false; } @property --color-5 { syntax: ''; initial-value: #88394c; inherits: false; } @property --border-angle { syntax: ''; initial-value: 20deg; inherits: true; } @property --border-color-1 { syntax: ''; initial-value: hsla(340, 75%, 60%, 0.2); inherits: true; } @property --border-color-2 { syntax: ''; initial-value: hsla(340, 75%, 40%, 0.75); inherits: true; } @property --stop-1 { syntax: ''; initial-value: 37.35%; inherits: false; } @property --stop-2 { syntax: ''; initial-value: 61.36%; inherits: false; } @property --stop-3 { syntax: ''; initial-value: 78.42%; inherits: false; } @property --stop-4 { syntax: ''; initial-value: 89.52%; inherits: false; } @property --stop-5 { syntax: ''; initial-value: 100%; inherits: false; } .wp-block-button .wp-block-button__link { --color-1: #0b0420; --color-2: #1d0c45; --color-3: #4a1d8f; --color-4: #7a3cf0; --color-5: #e3369e; --border-color-1: hsla(275, 85%, 70%, 0.25); --border-color-2: hsla(320, 80%, 60%, 0.8); position: relative; isolation: isolate; appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; color: #fff; text-decoration: none; opacity: 1; background: radial-gradient(var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y), var(--color-1) var(--stop-1), var(--color-2) var(--stop-2), var(--color-3) var(--stop-3), var(--color-4) var(--stop-4), var(--color-5) var(--stop-5)); transition: --pos-x .5s, --pos-y .5s, --spread-x .5s, --spread-y .5s, --color-1 .5s, --color-2 .5s, --color-3 .5s, --color-4 .5s, --color-5 .5s, --border-angle .5s, --border-color-1 .5s, --border-color-2 .5s, --stop-1 .5s, --stop-2 .5s, --stop-3 .5s, --stop-4 .5s, --stop-5 .5s, transform .2s; } .wp-block-button .wp-block-button__link::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; background: linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; } .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus-visible { color: #fff; background-color: transparent; --pos-x: 0%; --pos-y: 91.51%; --spread-x: 120.24%; --spread-y: 103.18%; --color-1: #ff9a3c; --color-2: #f0568a; --color-3: #c42fb8; --color-4: #2a0f5e; --color-5: #0b0420; --border-angle: 190deg; --border-color-1: hsla(300, 80%, 92%, 0.1); --border-color-2: hsla(320, 85%, 92%, 0.65); --stop-1: 0%; --stop-2: 8.8%; --stop-3: 21.44%; --stop-4: 71.34%; --stop-5: 85.76%; } /* Main buttons: the component's size. */ .wp-block-button .wp-block-button__link { min-width: 132px; padding: 1rem 2.25rem; font-size: 1rem; line-height: 19px; font-weight: 700; } .mdml-header__cta .wp-block-button .wp-block-button__link, .wp-block-button.mdml-header__cta .wp-block-button__link { min-width: 0; padding: .75rem 1.25rem; font-size: .9375rem; } /* (header button stays on one line) */ .mdml-header__cta .wp-block-button .wp-block-button__link, .wp-block-button.mdml-header__cta .wp-block-button__link { white-space: nowrap; } @media (max-width: 599px) { .mdml-header__cta .wp-block-button .wp-block-button__link, .wp-block-button.mdml-header__cta .wp-block-button__link { padding: .6rem .9rem; font-size: .875rem; } .mdml-header__cta .wp-block-button__link::after { margin-left: .35em; } } /* Second buttons ("See what we do" and other outline buttons): the brand's purple version. */ .wp-block-button.is-style-outline > .wp-block-button__link { border: 0; color: #fff; padding: 1rem 2.25rem; background: radial-gradient(var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y), var(--color-1) var(--stop-1), var(--color-2) var(--stop-2), var(--color-3) var(--stop-3), var(--color-4) var(--stop-4), var(--color-5) var(--stop-5)); --color-1: #0b0420; --color-2: #2a1162; --color-3: #5b2bc4; --color-4: #9b6bff; --color-5: #e3369e; --border-angle: 200deg; --border-color-1: hsla(270, 90%, 90%, 0.6); --border-color-2: hsla(300, 60%, 90%, 0.15); } .wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible { color: #fff; border-color: transparent; background: radial-gradient(var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y), var(--color-1) var(--stop-1), var(--color-2) var(--stop-2), var(--color-3) var(--stop-3), var(--color-4) var(--stop-4), var(--color-5) var(--stop-5)); --pos-x: 0%; --pos-y: 95.51%; --spread-x: 110.24%; --spread-y: 110.2%; --color-1: #e3369e; --color-2: #a955ff; --color-3: #7a3cf0; --color-4: #2a0f5e; --color-5: #0b0420; --stop-1: 0%; --stop-2: 10%; --stop-3: 35.44%; --stop-4: 71.34%; --stop-5: 90.76%; --border-angle: 210deg; --border-color-1: hsla(270, 90%, 90%, 0.2); --border-color-2: hsla(300, 60%, 90%, 0.75); } @media (prefers-reduced-motion: reduce) { .wp-block-button .wp-block-button__link { transition: none; } } /* ---------- 2.2: services strip as a gradient menu ---------- Round buttons that open into a gradient label when you point at them. On phones and touch screens the labels always show. */ .mdml-gm .mdml-gm--web { --gm-from: #6d28d9; --gm-to: #7e22ce; --gm-icon: url("data:image/svg+xml,"); } .mdml-gm .mdml-gm--photo { --gm-from: #c2410c; --gm-to: #be123c; --gm-icon: url("data:image/svg+xml,"); } .mdml-gm .mdml-gm--ai { --gm-from: #7e22ce; --gm-to: #a21caf; --gm-icon: url("data:image/svg+xml,"); } .mdml-gm .mdml-gm--marketing { --gm-from: #be185d; --gm-to: #c2410c; --gm-icon: url("data:image/svg+xml,"); } .mdml-gm { gap: 1rem; } .mdml-gm li { position: relative; display: block; } .mdml-gm li::before { display: none; } .mdml-gm a { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem .55rem .8rem; border-radius: 999px; background: #fff; color: var(--wp--preset--color--contrast); font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(20,13,43,.35), inset 0 0 0 1px var(--wp--preset--color--line); transition: width .5s, color .3s, box-shadow .5s; } .mdml-gm a::before { content: ""; flex: none; width: 1.35rem; height: 1.35rem; background: linear-gradient(45deg, var(--gm-from), var(--gm-to)); -webkit-mask: var(--gm-icon) center / contain no-repeat; mask: var(--gm-icon) center / contain no-repeat; transition: transform .5s, background .3s; } .mdml-gm a::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--gm-from), var(--gm-to)); opacity: 0; transition: opacity .5s; } .mdml-gm li::after { content: ""; position: absolute; left: 8%; right: 8%; top: 10px; bottom: -6px; z-index: -1; border-radius: 999px; background: linear-gradient(45deg, var(--gm-from), var(--gm-to)); filter: blur(15px); opacity: 0; transition: opacity .5s; pointer-events: none; } .mdml-gm a:hover, .mdml-gm a:focus-visible { color: #fff; box-shadow: none; } .mdml-gm a:hover::after, .mdml-gm a:focus-visible::after { opacity: 1; } .mdml-gm a:hover::before, .mdml-gm a:focus-visible::before { background: #fff; } .mdml-gm li:has(a:hover)::after, .mdml-gm li:has(a:focus-visible)::after { opacity: .5; } @media (hover: hover) and (pointer: fine) and (min-width: 900px) { .mdml-gm a { width: 60px; height: 60px; padding: 0; justify-content: center; overflow: hidden; color: transparent; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; } .mdml-gm a::before { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; } .mdml-gm .mdml-gm--web a, .mdml-gm .mdml-gm--ai a { --gm-w: 190px; } .mdml-gm .mdml-gm--photo a { --gm-w: 250px; } .mdml-gm .mdml-gm--marketing a { --gm-w: 160px; } .mdml-gm a:hover, .mdml-gm a:focus-visible { width: var(--gm-w, 200px); color: #fff; transition: width .5s, color .3s .15s, box-shadow .5s; } .mdml-gm a:hover::before, .mdml-gm a:focus-visible::before { transform: scale(0); } } @media (prefers-reduced-motion: reduce) { .mdml-gm a, .mdml-gm a::before, .mdml-gm a::after, .wp-block-button__link, .wp-block-button__link::before { transition: none; } } /* 2.2 review fixes */ html.mdml-intro { animation: mdml-intro-unlock 0s 4.5s forwards; } /* never leave the page locked if a script is blocked */ @keyframes mdml-intro-unlock { to { overflow: visible; } } .wp-block-navigation .wp-block-navigation__submenu-icon { padding: 8px; margin: -8px -8px -8px -4px; box-sizing: content-box; } /* The header's blur would trap the full-screen phone menu inside the header bar, so it's switched off while the menu is open. */ html.has-modal-open .mdml-header, .mdml-header:has(.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--wp--preset--color--base); } .mdml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .mdml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .mdml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }