/** * core/group: the "Card" and "FAQ section" styles. * * Card: white with a hairline border and the 30-degree corner cut (the border's diagonal is drawn along the cut). * A card hovers only when it holds a link: a red bar draws in along the bottom and its icon tile turns red. When * the card's heading is a link, that link covers the whole card. * * FAQ section: the speech-bubble watermark sits faintly behind the section's first heading. * * @package ip-ollie-child */ .wp-block-group.is-style-ip-card, .wp-block-column.is-style-ip-card { --ip-cut-size: var(--wp--custom--cut); position: relative; border-width: 0 !important; background-image: linear-gradient( to top right, transparent calc(50% - 1px), var(--wp--preset--color--border-light) calc(50% - 1px), var(--wp--preset--color--border-light) 50%, transparent 50% ); background-repeat: no-repeat; background-position: top right; background-size: var(--ip-cut-size) calc(var(--ip-cut-size) * var(--wp--custom--slope)); box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-light); clip-path: polygon( 0 0, calc(100% - var(--ip-cut-size)) 0, 100% calc(var(--ip-cut-size) * var(--wp--custom--slope)), 100% 100%, 0 100% ); } /* On navy sections the card is the raised navy, without the hairline. */ .is-style-section-contrast :is(.wp-block-group, .wp-block-column).is-style-ip-card { background-color: var(--wp--preset--color--primary-alt); background-image: none; box-shadow: none; color: var(--wp--preset--color--base); } /* Linked cards: the bar and the whole-card link. */ :is(.wp-block-group, .wp-block-column).is-style-ip-card:has(a)::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: var(--wp--custom--accent--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease); } :is(.wp-block-group, .wp-block-column).is-style-ip-card:has(a):is(:hover, :focus-within)::after { transform: scaleX(1); } :is(.wp-block-group, .wp-block-column).is-style-ip-card .wp-block-heading a { color: inherit; text-decoration: none; } :is(.wp-block-group, .wp-block-column).is-style-ip-card .wp-block-heading a::before { content: ""; position: absolute; inset: 0; z-index: 1; } :is(.wp-block-group, .wp-block-column).is-style-ip-card:has(.wp-block-heading a:focus-visible) { outline: 3px solid var(--wp--custom--focus); outline-offset: -3px; } /* FAQ section: the speech-bubble watermark behind the first heading, in the page's brand colour. */ .wp-block-group.is-style-ip-faq .wp-block-heading:first-of-type { position: relative; isolation: isolate; } .wp-block-group.is-style-ip-faq .wp-block-heading:first-of-type::before { content: ""; position: absolute; top: calc(-1 * var(--wp--preset--spacing--large)); left: calc(-1 * var(--wp--preset--spacing--medium)); z-index: -1; width: 8rem; height: 8rem; background: color-mix(in srgb, var(--wp--custom--accent--brand) 10%, transparent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='g'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black' stroke='black' stroke-width='2.4' stroke-linejoin='miter'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M1 3H13.5L15.5 4.15V12H6L3 13.73V12H1Z' fill='black' mask='url(%23g)'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='g'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black' stroke='black' stroke-width='2.4' stroke-linejoin='miter'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M1 3H13.5L15.5 4.15V12H6L3 13.73V12H1Z' fill='black' mask='url(%23g)'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } /* * History timeline: full-screen years (Cover blocks) that stick under the header, so each year slides up over the * one before; the page snaps gently to each year. No JavaScript. Reduced motion: years scroll normally, no snap. */ .wp-block-group.is-style-ip-history > .ip-history__years { padding-block: var(--wp--preset--spacing--medium); padding-inline: var(--wp--preset--spacing--gutter, var(--wp--preset--spacing--medium)); border-bottom: 1px solid var(--wp--preset--color--border-dark); } .wp-block-group.is-style-ip-history .ip-history__year-list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small); margin: 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); } .wp-block-group.is-style-ip-history .ip-history__year-list a { color: var(--wp--preset--color--main-accent); text-decoration: none; } .wp-block-group.is-style-ip-history .ip-history__year-list a:hover { color: var(--wp--preset--color--base); text-decoration: underline; text-underline-offset: 0.25em; } .wp-block-group.is-style-ip-history > .ip-history__slide { position: sticky; top: var(--wp--custom--header-height); min-height: calc(100vh - var(--wp--custom--header-height)) !important; margin-block: 0; padding-block: var(--wp--preset--spacing--xx-large); padding-inline: var(--wp--preset--spacing--gutter, var(--wp--preset--spacing--medium)); scroll-snap-align: start; scroll-margin-top: var(--wp--custom--header-height); border-top: 1px solid var(--wp--preset--color--border-dark); } .wp-block-group.is-style-ip-history .ip-history__slide .wp-block-cover__inner-container > * { max-width: 48rem; margin-inline: 0 !important; } .wp-block-group.is-style-ip-history .ip-history__year { margin: 0; color: var(--wp--custom--accent--on-dark); font-size: clamp(4rem, 12vw, 10rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; } @media (prefers-reduced-motion: no-preference) { html:has(.wp-block-group.is-style-ip-history) { scroll-snap-type: y proximity; } } @media (prefers-reduced-motion: reduce) { .wp-block-group.is-style-ip-history > .ip-history__slide { position: relative; top: auto; } }