a default top margin, which left a 24px white strip between the bottom of the sticky header and the top of the hero photograph. Nothing should sit in that gap. --------------------------------------------------------------------- */ .tt-header + main, main.wp-block-group:first-of-type { margin-block-start: 0 !important; } body > .wp-site-blocks > main:first-of-type { margin-block-start: 0 !important; } /* --------------------------------------------------------------------------- 25. reCAPTCHA ------------------------------------------------------------------------ The floating badge sits over the bottom-right of every page it loads on and collides with the call button on a phone. Google allow hiding it as long as the attribution shows near the form instead, which the form renders. --------------------------------------------------------------------- */ .grecaptcha-badge { visibility: hidden !important; } .tt-form__recaptcha { margin: .9rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--slate); line-height: 1.5; } .tt-form__recaptcha a { color: var(--wp--preset--color--blue); } /* --------------------------------------------------------------------------- 27. Ghost button inside the dark header ------------------------------------------------------------------------ is-style-tt-ghost is drawn for light sections: ink text, a faint ink border. Dropped onto the near-black header it becomes ink on ink, which is what made the phone number look washed out next to the Book online button. Same class of bug as the menu links, same fix. --------------------------------------------------------------------- */ .tt-header .is-style-tt-ghost .wp-block-button__link, .tt-header .tt-header__call .wp-block-button__link { color: #fff !important; border-color: rgba(255, 255, 255, .32) !important; background: rgba(255, 255, 255, .05) !important; font-weight: 700; } .tt-header .is-style-tt-ghost .wp-block-button__link:hover, .tt-header .tt-header__call .wp-block-button__link:hover { border-color: var(--wp--preset--color--brand) !important; background: rgba(255, 140, 0, .16) !important; color: #fff !important; } /* --------------------------------------------------------------------------- 26. Portfolio cards ------------------------------------------------------------------------ Screenshot first, name second, nothing else. A visitor deciding whether to trust the work looks at the picture; a paragraph about what the project needed is for me, not for them. Everything that used to be written out is one click away on the live site. --------------------------------------------------------------------- */ .tt-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.75rem; margin-block-start: 3.5rem; } .tt-work__card { display: block; border-radius: var(--wp--custom--radius--lg); overflow: hidden; background: #fff; border: 1px solid var(--wp--preset--color--line); box-shadow: var(--wp--preset--shadow--soft); text-decoration: none; color: inherit; transition: transform .45s var(--tt-ease), box-shadow .45s var(--tt-ease), border-color .45s var(--tt-ease); } .tt-work__shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wp--preset--color--mist); } .tt-work__shot img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .7s var(--tt-ease); } /* The veil and the button live behind the image edge until hover. */ .tt-work__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, .05) 0%, rgba(2, 6, 23, .78) 100%); opacity: 0; transition: opacity .4s var(--tt-ease); } .tt-work__open { position: absolute; inset-block-end: 1.1rem; inset-inline-start: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.15rem; border-radius: 999px; background: var(--wp--preset--color--brand); color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--x-small); font-weight: 800; opacity: 0; transform: translateY(12px); transition: opacity .4s var(--tt-ease), transform .4s var(--tt-ease); } .tt-work__open::after { content: ""; inline-size: .4rem; block-size: .4rem; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); } @media (hover: hover) and (pointer: fine) { .tt-work__card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--lift); border-color: rgba(255, 140, 0, .5); } .tt-work__card:hover .tt-work__shot img { transform: scale(1.06); } .tt-work__card:hover .tt-work__veil { opacity: 1; } .tt-work__card:hover .tt-work__open { opacity: 1; transform: translateY(0); } } /* Keyboard users get the same reveal, since :hover never fires for them. */ .tt-work__card:focus-visible .tt-work__veil { opacity: 1; } .tt-work__card:focus-visible .tt-work__open { opacity: 1; transform: translateY(0); } .tt-work__foot { display: block; padding: 1.15rem 1.35rem 1.35rem; } .tt-work__name { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--wp--preset--color--ink); } .tt-work__domain { display: block; margin-block-start: .2rem; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--slate); font-variant-numeric: tabular-nums; } .tt-work__cat { display: inline-block; margin-block-start: .7rem; padding: .22rem .65rem; border-radius: 999px; background: rgba(36, 99, 235, .08); border: 1px solid rgba(36, 99, 235, .22); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--blue); } @media (prefers-reduced-motion: reduce) { .tt-work__card, .tt-work__shot img, .tt-work__veil, .tt-work__open { transition: none; } .tt-work__card:hover { transform: none; } .tt-work__card:hover .tt-work__shot img { transform: none; } } /* --------------------------------------------------------------------------- 27. Three layout bugs --------------------------------------------------------------------- */ /* (a) The full-width sections inside a template part were being capped. A template part wrapper carries max-inline-size from the block layout, so an alignfull section inside it stopped short of the window and read as a narrow inset band on a wide screen. */ .wp-block-template-part { max-inline-size: none !important; } /* (b) The select rendered taller than the text inputs beside it, because the inputs compute as content-box and the select as border-box. Same declared height, different box model, so they never lined up. */ .tt-form :is(input, select, textarea) { box-sizing: border-box !important; block-size: auto; min-block-size: 3.4rem; line-height: 1.5; } .tt-form select { /* The native arrow sizes itself differently again, so it is replaced with a drawn one and the control is given room for it. */ appearance: none; -webkit-appearance: none; padding-inline-end: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) calc(50% + 2px), calc(100% - 0.8rem) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } /* Fields stack from the top so a taller control never drags its label down. */ .tt-form__field { align-content: start; } .tt-form__field > label { align-self: start; } .tt-form__row { align-items: start; } /* (c) The footer was capped narrower than the widest sections above it. */ .tt-footer { --wp--style--global--content-size: 1560px; } .tt-footer > .tt-footer__grid, .tt-footer > .tt-footer__legal { max-inline-size: 1560px; margin-inline: auto; } /* --------------------------------------------------------------------------- 28. Reviews slider ------------------------------------------------------------------------ Scroll-snap does the work. The track is a real scroll container, so it swipes on a phone, takes a trackpad gesture, and responds to arrow keys when focused, all without a line of JavaScript. The buttons added by the script are a convenience on top of something that already works. --------------------------------------------------------------------- */ .tt-rev { position: relative; margin-block-start: 2.5rem; } .tt-rev__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(100%, 21rem), 1fr); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Room for the cards' shadow, and for the focus ring not to be clipped. */ padding: .5rem .35rem 1.25rem; margin-inline: -.35rem; scrollbar-width: thin; } .tt-rev__track:focus-visible { outline: 2px solid var(--wp--preset--color--blue); outline-offset: 4px; border-radius: var(--wp--custom--radius--lg); } @media (min-width: 60em) { /* A fixed track size, not minmax(0, …). With a minmax the columns happily shrink to share the container and the track never overflows, so it never scrolls and the arrows stay hidden. Three across, and the rest overflow into the scroll, which is the entire point of a slider. */ .tt-rev__track { grid-auto-columns: calc((100% - 2.5rem) / 3); } } .tt-rev__slide { scroll-snap-align: start; display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.4rem, 3vw, 1.9rem); border-radius: var(--wp--custom--radius--lg); background: #fff; border: 1px solid var(--wp--preset--color--line); box-shadow: var(--wp--preset--shadow--soft); transition: border-color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base); } .tt-rev__slide:hover { border-color: rgba(255, 140, 0, .4); box-shadow: var(--wp--preset--shadow--lift); } .tt-rev__text { flex: 1; font-size: var(--wp--preset--font-size--small); line-height: 1.65; color: var(--wp--preset--color--slate); /* The longest review here runs to fifteen lines. Capping it keeps the slides a sane height; the full text is a click away on Google. */ max-block-size: 15.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); } .tt-rev__text p { margin: 0 0 .7rem; } .tt-rev__text p:last-child { margin-block-end: 0; } .tt-rev__by { display: flex; align-items: center; gap: .7rem; padding-block-start: .9rem; border-block-start: 1px solid var(--tt-hairline); font-size: var(--wp--preset--font-size--x-small); } .tt-rev__when { color: var(--wp--preset--color--slate); } /* --- controls ----------------------------------------------------------- */ .tt-rev__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-block-start: .25rem; } .tt-rev__controls[hidden] { display: none; } .tt-rev__btn { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); background: #fff; cursor: pointer; position: relative; transition: border-color var(--wp--custom--transition--base), background var(--wp--custom--transition--base), transform var(--wp--custom--transition--base); } .tt-rev__btn::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: .5rem; block-size: .5rem; border-block-start: 2px solid var(--wp--preset--color--ink); border-inline-end: 2px solid var(--wp--preset--color--ink); } .tt-rev__btn[data-dir="next"]::before { transform: translate(-65%, -50%) rotate(45deg); } .tt-rev__btn[data-dir="prev"]::before { transform: translate(-35%, -50%) rotate(-135deg); } .tt-rev__btn:hover:not(:disabled) { border-color: var(--wp--preset--color--brand); background: rgba(255, 140, 0, .1); transform: translateY(-2px); } .tt-rev__btn:disabled { opacity: .35; cursor: default; } .tt-rev__dots { display: flex; gap: .45rem; } .tt-rev__dot { inline-size: .5rem; block-size: .5rem; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--line); cursor: pointer; transition: background var(--wp--custom--transition--base), inline-size var(--wp--custom--transition--base); } .tt-rev__dot[aria-current="true"] { background: var(--wp--preset--color--brand); inline-size: 1.5rem; border-radius: 999px; } @media (prefers-reduced-motion: reduce) { .tt-rev__track { scroll-behavior: auto; } .tt-rev__btn, .tt-rev__dot, .tt-rev__slide { transition: none; } .tt-rev__btn:hover { transform: none; } } /* --------------------------------------------------------------------------- 29. Pricing panels ------------------------------------------------------------------------ Two priced lists side by side. The previous version was a plain bulleted list, which meant the price floated at the end of a sentence and your eye had to hunt for it on every line. Here the name and its caveat sit left, the figure sits hard right in a tabular column, and a hairline separates the rows, so the prices read down the page as a single column of numbers. --------------------------------------------------------------------- */ .tt-pricecols { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 1.75rem; margin-block-start: 3.5rem; align-items: start; } .tt-price { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--wp--preset--shadow--soft); } /* The business panel is the one with the recurring revenue behind it, so it gets the accent. Not a hard sell, just a nudge. */ .tt-price--biz { border-color: rgba(36, 99, 235, .3); } .tt-price__head { margin-block-end: 1.75rem; } .tt-price__tag { display: inline-block; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--blue); } .tt-price--biz .tt-price__tag { color: var(--wp--preset--color--brand-text); } .tt-price__title { margin: .5rem 0 .6rem; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .tt-price__blurb { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.6; color: var(--wp--preset--color--slate); max-inline-size: 42ch; } .tt-price__list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--tt-hairline); } .tt-price__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: .95rem .6rem; margin-inline: -.6rem; border-block-end: 1px solid var(--tt-hairline); border-radius: 8px; transition: background var(--wp--custom--transition--base); } .tt-price__row:hover { background: var(--wp--preset--color--mist); } .tt-price__what { display: block; } .tt-price__name { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--ink); line-height: 1.45; } .tt-price__note { display: block; margin-block-start: .2rem; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--slate); line-height: 1.45; } .tt-price__cost { flex: none; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--wp--preset--color--brand-text); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; } .tt-price__unit { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; color: var(--wp--preset--color--slate); margin-inline-start: .25rem; } .tt-price__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-block-start: 1.9rem; } .tt-price__cta { display: inline-block; padding: .85rem 1.6rem; border-radius: 999px; background: var(--wp--preset--color--brand); color: var(--wp--preset--color--ink) !important; font-weight: 800; font-size: var(--wp--preset--font-size--small); text-decoration: none; transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base); } .tt-price__cta:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--glow); text-decoration: none; } .tt-price__alt { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--blue); } /* Under about 30em the price cannot sit beside a long service name without one of them wrapping badly, so the row stacks. */ @media (max-width: 30em) { .tt-price__row { flex-direction: column; align-items: flex-start; gap: .3rem; } .tt-price__cost { text-align: start; } } @media (prefers-reduced-motion: reduce) { .tt-price__row, .tt-price__cta { transition: none; } .tt-price__cta:hover { transform: none; } } /* -------------------------------------------------------------------------- 14. Mobile menu — header blur vs the navigation overlay -------------------------------------------------------------------------- .tt-header carries backdrop-filter. Any element with a backdrop-filter becomes the containing block for its position:fixed descendants, so the navigation overlay - which is fixed, inset 0 - was being sized against the header instead of the screen. On a phone that meant a strip the height of the header with only the first item, "Home", inside it. The blur is dropped at the widths where the overlay is used, and while it is open at any width. The header background is already 94% opaque, so nothing looks different. */ @media (max-width: 600px) { .tt-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 18, 33, .98); } } html.has-modal-open .tt-header { backdrop-filter: none; -webkit-backdrop-filter: none; } .tt-header .wp-block-navigation__responsive-container.is-menu-open { inset: 0; overflow-y: auto; } /* The open-menu icon inherited the ink colour, which is the navy it sits on, so it was all but invisible. White, and a 44px target for a thumb. */ .tt-header .wp-block-navigation__responsive-container-open, .tt-header .wp-block-navigation__responsive-container-open svg, .tt-header .wp-block-navigation__responsive-container-close, .tt-header .wp-block-navigation__responsive-container-close svg { color: #fff; fill: currentColor; } .tt-header .wp-block-navigation__responsive-container-open { min-inline-size: 44px; min-block-size: 44px; align-items: center; justify-content: center; }