/* Theme Name: Studio Simpatico Theme URI: http://www.studiosimpati.co/ Description: This custom WordPress theme was designed and developed with love by Studio Simpatico. Author: Studio Simpatico Author URI: http://www.studiosimpati.co/ Version: 1.0.0 */ /***************************************************************************************************************************************************************************************/ /* HTML5 BOILERPLATE MINIFIED */ /***************************************************************************************************************************************************************************************/ *{box-sizing:border-box;}article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;}canvas{display:inline;}video{display:inline;}audio:not([controls]){display:none}[hidden]{display:none}html{color:#222;font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button{-webkit-appearance:button;color:#222;cursor:pointer;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;overflow:visible;vertical-align:middle}input{color:#222;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;vertical-align:middle}select{color:#222;font-family:sans-serif;font-size:100%;margin:0;vertical-align:middle}textarea{color:#222;font-family:sans-serif;font-size:100%;margin:0;overflow:auto;resize:vertical;vertical-align:top}body{font-size:1em;line-height:1.4;margin:0}::-moz-selection{background:#333;color:#fff;text-shadow:none}::selection{background:#333;color:#fff;text-shadow:none}a{color:#00e}a:hover{color:#06e;outline:0}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{bottom:-.25em;font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;top:-.5em;vertical-align:baseline}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0;white-space:normal}input[type="button"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="reset"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="submit"]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled]{cursor:default}input[disabled]{cursor:default}input[type="checkbox"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="radio"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0} /***************************************************************************************************************************************************************************************/ /* FONTS */ /***************************************************************************************************************************************************************************************/ @font-face { font-display: swap; font-family: 'KH Teka'; font-style: normal; font-weight: 300; src: local('KH Teka Light'), local('KHTeka-Light'), url('assets/fonts/KHTeka-Light.woff2') format('woff2'), url('assets/fonts/KHTeka-Light.woff') format('woff'), url('assets/fonts/KHTeka-Light.otf') format('opentype'); } @font-face { font-display: swap; font-family: 'KH Teka'; font-style: normal; font-weight: 400; src: local('KH Teka'), local('KHTeka-Regular'), url('assets/fonts/KHTeka-Regular.woff2') format('woff2'), url('assets/fonts/KHTeka-Regular.woff') format('woff'), url('assets/fonts/KHTeka-Regular.otf') format('opentype'); } @font-face { font-display: swap; font-family: 'KH Teka'; font-style: normal; font-weight: 500; src: local('KH Teka Medium'), local('KHTeka-Medium'), url('assets/fonts/KHTeka-Medium.woff2') format('woff2'), url('assets/fonts/KHTeka-Medium.woff') format('woff'), url('assets/fonts/KHTeka-Medium.otf') format('opentype'); } @font-face { font-display: swap; font-family: 'KH Teka'; font-style: normal; font-weight: 700; src: local('KH Teka Bold'), local('KHTeka-Bold'), url('assets/fonts/KHTeka-Bold.woff2') format('woff2'), url('assets/fonts/KHTeka-Bold.woff') format('woff'), url('assets/fonts/KHTeka-Bold.otf') format('opentype'); } /***************************************************************************************************************************************************************************************/ /* BODY STYLES */ /***************************************************************************************************************************************************************************************/ :root { /* Colors */ --orange: #fb5a08; --orange-on-parchment: #f05608; /* darker orange for AA contrast on parchment */ --black: #242b2d; --electric-lavender: #7155de; --digital-blue: #0042e4; --teal: #27e9d4; --lavender: #e3e1f4; --alabaster-gray: #c4d1d5; --parchment: #f3f2ef; --off-white: #fafafa; --white: #fff; --error-color: #c00; /* Grays */ --gray-light: #d4d4d2; --gray: #c1c1c1; --gray-dark: #6f7373; /* Hover states */ --black-hover: #4d5354; --white-hover: #e9eaea; --digital-blue-hover: #0e399b; --alabaster-gray-hover: #d7dedf; /* Gradients */ --orange-gradient: linear-gradient(to bottom, #ff803e 0%, var(--orange) 100%); --teal-gradient: linear-gradient(to bottom, #a7b4c7 0%, #2db0a2 100%); --blue-gradient: linear-gradient(-19deg, rgba(236, 185, 222, 0) 20.83%, rgba(236, 185, 222, 0.4) 84.82%), linear-gradient(90deg, var(--digital-blue), var(--digital-blue)); /* Same 4-layer shape as --euphoric-blue so it reuses the euphoria-drift keyframes; the linear base stays still on its 100% layer. */ --teal-glow: radial-gradient(50% 60% at 75% 20%, color-mix(in srgb, var(--teal) 75%, transparent) 0%, transparent 60%), radial-gradient(55% 65% at 18% 55%, color-mix(in srgb, var(--electric-lavender) 32%, transparent) 0%, transparent 60%), radial-gradient(50% 55% at 55% 95%, color-mix(in srgb, #20857a 65%, transparent) 0%, transparent 58%), linear-gradient(to bottom, #a7b4c7 0%, #2db0a2 100%); /* Kept dark enough for white text. The blobs ride oversized background-sizes and drift via the euphoria-drift keyframes (motion-gated); the linear base sits still on its 100% layer. */ --euphoric-blue: radial-gradient(48% 58% at 16% 22%, color-mix(in srgb, var(--electric-lavender) 82%, transparent) 0%, transparent 62%), radial-gradient(52% 60% at 86% 40%, color-mix(in srgb, var(--digital-blue-hover) 78%, transparent) 0%, transparent 58%), radial-gradient(50% 54% at 64% 92%, rgba(236, 185, 222, 0.3) 0%, transparent 58%), linear-gradient(155deg, var(--digital-blue) 22%, color-mix(in srgb, var(--digital-blue) 50%, var(--electric-lavender)) 100%); /* One drift cycle for every euphoria-drift surface. Lower = livelier; the keyframes hold 5 legs, so a leg (a blob's turn) is this over five. */ --euphoria-drift-duration: 16s; /* Shadows / overlays */ --overlay-dim: rgba(0, 0, 0, 0.25); --hero-overlay: rgba(0, 0, 0, 0.2); --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-strong: -15px 15px 40px rgba(0, 0, 0, 0.15); --shadow-card: drop-shadow(24px 24px 30px rgba(0, 0, 0, 0.03)); --shadow-dropdown: 0 16px 40px rgba(36, 43, 45, 0.12); --shadow-sticky: 0 24px 20px rgba(0, 0, 0, 0.08); --text-shadow-dim: 0 0 30px rgba(0, 0, 0, 0.4); /* Locals not in the brand palette (figma-only one-offs) */ --carousel-purple: #2d5fe6; --carousel-purple-hover: #2556d9; --meta-gray: #666b6c; --electric-lavender-light: #8a71ef; --electric-lavender-lighter: #a28aff; --track-gray: #e3e3e3; /* Fonts */ --body-font: 'acumin-pro-wide', 'Acumin Pro Wide', 'acumin-pro-wide-black', Arial, Helvetica, sans-serif; --heading-font: 'KH Teka', Arial, Helvetica, sans-serif; /* Container */ --container-width: 90vw; --container-max-width: 2000px; --container-outer-padding: 40px; --container-outer-margin: calc((100vw - var(--container-width)) / 2); --viewport-edge: calc((var(--container-outer-margin) + var(--container-outer-padding)) * -1); --container-breakout-full: min(0px, 64px - var(--container-outer-margin) - var(--container-outer-padding)); --container-breakout: max(-42px, var(--container-breakout-full)); --one-column-width: ((100vw - (2 * (var(--container-outer-margin) + var(--container-outer-padding)))) - (11 * var(--gap))) / 12; /* Grid */ --gap: 40px; --grid: repeat(12, minmax(0,1fr)); /* Header */ --header-height: 80px; /* How much overlaid header the first hero must reserve. 0 unless the header leaves the flow — see the body:has() rule beside #header. Not a length of 0: calc() can't add a unitless number to a length. */ --header-clearance: 0px; /* Spacing */ --text-spacing-xxsmall: 8px; --text-spacing-xsmall: 16px; --text-spacing-small: 24px; --text-spacing-medium: 32px; --text-spacing-large: 40px; --text-spacing-xlarge: 48px; --text-spacing-xxlarge: 56px; --module-spacing-small: 64px; --module-spacing-medium: 80px; --module-spacing-large: 120px; --module-spacing-xlarge: 160px; --module-spacing-xxlarge: 240px; interpolate-size: allow-keywords; } /* Each blob travels a closed orbit — differently shaped, differently phased, so they never turn together — while swelling out of phase with its own travel. The swell is what reads as glow; position alone just slides the layer. linear is set per-keyframe (overriding the call sites' ease-in-out): easing to a stop at every vertex is what made the old drift lurch. The trailing layer is the solid base, held still at 0 0 / 100%. Sizes at 0% match the background-size each surface declares, so the resting (reduced-motion) frame is unchanged. */ @keyframes euphoria-drift { 0% { animation-timing-function: linear; background-position: 50% 0%, 100% 50%, 20% 80%, 0 0; background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%; } 20% { animation-timing-function: linear; background-position: 98% 35%, 65% 98%, 0% 30%, 0 0; background-size: 222% 222%, 204% 204%, 258% 258%, 100% 100%; } 40% { animation-timing-function: linear; background-position: 79% 90%, 10% 79%, 45% 0%, 0 0; background-size: 204% 204%, 234% 234%, 244% 244%, 100% 100%; } 60% { animation-timing-function: linear; background-position: 21% 90%, 10% 21%, 95% 25%, 0 0; background-size: 226% 226%, 210% 210%, 262% 262%, 100% 100%; } 80% { animation-timing-function: linear; background-position: 2% 35%, 65% 2%, 80% 75%, 0 0; background-size: 208% 208%, 232% 232%, 248% 248%, 100% 100%; } 100% { background-position: 50% 0%, 100% 50%, 20% 80%, 0 0; background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%; } } @keyframes hero-glow-breathe { 0%, 100% { opacity: 0.75; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } } /* Always reserve the scrollbar gutter so the layout width is constant — no jump between short and scrolling pages. overflow-y: scroll is the fallback for browsers without scrollbar-gutter. */ /* Anchor jumps clear the fixed header. scroll-padding on the scroll container (not a per-element scroll-margin) covers every target type — section, .svp-step, the stacked props — and it must sit outside prefers-reduced-motion: the offset is layout, not motion, so reduced-motion users need it too. */ html { font-size: 100%; overflow-y: scroll; scroll-padding-top: calc(var(--header-height) + var(--text-spacing-large)); scrollbar-gutter: stable; } /* A pinned sticky-menu parks under the header — an anchor must clear both. */ html:has(.sticky-menu) { scroll-padding-top: calc(var(--header-height) + 56px + var(--text-spacing-large)); } body { background: var(--off-white); color: var(--black); font: 1rem var(--body-font); -moz-osx-font-smoothing: grayscale; /* Inherited — a long URL/token in a heading, card title, or WYSIWYG body would otherwise overflow its column and scroll the page at 320px (WCAG 1.4.10). */ overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } .svg-inline--fa { display: inline-block; font-size: inherit; height: 1em; overflow: visible; vertical-align: -0.125em; } .svg-inline--fa path { fill: currentColor; } a { text-decoration: none; transition: all .25s ease; } input[type=submit], button { border-radius: 0; font-family: inherit; transition: all .25s ease; } img, svg, iframe, picture { max-width: 100%; } img, svg, picture { height: auto; } h1, .heading-1, h2, .heading-2, h3, .heading-3, h4, .heading-4, h5, .heading-5, h6, .heading-6 { font-family: var(--heading-font); font-weight: 300; margin: 0; } /* H1–H5 default to the Light cut; .bold swaps to the heavier Regular cut. */ h1.bold, .heading-1.bold, h2.bold, .heading-2.bold, h3.bold, .heading-3.bold, h4.bold, .heading-4.bold, h5.bold, .heading-5.bold { font-weight: 400; } /* / inside a heading maps to the .bold (Regular) cut. */ :is(h1, .heading-1, h2, .heading-2, h3, .heading-3, h4, .heading-4, h5, .heading-5) :is(strong, b) { font-weight: 400; } h1, .heading-1 { font-size: calc(88rem / 16); letter-spacing: -0.6px; line-height: calc(96 / 88); } /* Inherits the -0.6px tracking from .heading-1. */ .heading-1.large { font-size: calc(108rem / 16); line-height: calc(96 / 108); } /* Lighter, smaller display heading — inherits the -0.6px tracking from .heading-1. */ .heading-1.small { font-size: calc(76rem / 16); font-weight: 300; line-height: calc(84 / 76); } h2, .heading-2 { font-size: calc(64rem / 16); line-height: calc(70 / 64); } /* WYSIWYG (content-styles) headings render one step down the display scale — a bare h2 takes .heading-3, h3 takes .heading-4, etc. — so body-copy headings stay modest against the page's display headings. Carried through every breakpoint below. */ h3, .heading-3, .content-styles h2:not([class^="heading-"]) { font-size: calc(52rem / 16); line-height: calc(56 / 52); } h4, .heading-4, .content-styles h3:not([class^="heading-"]) { font-size: calc(40rem / 16); line-height: calc(50 / 40); } h5, .heading-5, .content-styles h4:not([class^="heading-"]) { font-size: calc(32rem / 16); line-height: calc(40 / 32); } h6, .heading-6, .content-styles h5:not([class^="heading-"]) { font-size: calc(18rem / 16); font-weight: 700; letter-spacing: 0.4px; line-height: calc(26 / 18); } .heading-6.large { font-size: calc(22rem / 16); font-weight: 500; letter-spacing: 0.1px; line-height: calc(32 / 22); } .heading-6.large.bold { font-weight: 700; } p, ul, ol, .regular-text, .regular-text p, .regular-text ul, .regular-text ol { font-size: calc(16rem / 16); font-weight: 300; line-height: calc(30 / 16); } /* No UA margin on

— module spacing comes from gap / adjacent margins. Rich-text wrappers restore inter-paragraph spacing via p + p below. */ p { margin: 0; } /* Reset the UA blockquote margin/padding (boilerplate sets margin: 1em 40px). */ blockquote { margin: 0; padding: 0; } /* Paragraph rhythm scales with the text size: regular body at 12px (between the xxsmall/xsmall tokens — no token lands on it), the larger and longform cuts open up to xsmall, and small text tightens to xxsmall. */ .content-styles p + p, .regular-text p + p, .medium-text p + p { margin-top: 12px; } .large-text p + p, .xlarge-text p + p, .longform-text p + p { margin-top: var(--text-spacing-xsmall); } .small-text p + p { margin-top: var(--text-spacing-xxsmall); } /* Inline video / oEmbeds fill the content column at 16:9 (e.g. webinar replays); WordPress otherwise leaves the iframe at its native pixel size. */ .content-styles :is(iframe, video) { aspect-ratio: 16 / 9; display: block; height: auto; width: 100%; } p.xlarge, ul.xlarge, ol.xlarge, .xlarge-text, .xlarge-text p, .xlarge-text ul, .xlarge-text ol { font-family: var(--body-font); font-size: calc(22rem / 16); font-weight: 400; line-height: calc(34 / 22); } p.xlarge.bold, .xlarge-text.bold, .xlarge-text.bold p { font-weight: 600; } p.large, ul.large, ol.large, .large-text, .large-text p, .large-text ul, .large-text ol { font-family: var(--body-font); font-size: calc(20rem / 16); font-weight: 400; line-height: calc(32 / 20); } p.large.bold, .large-text.bold, .large-text.bold p { font-weight: 600; } p.medium, ul.medium, ol.medium, .medium-text, .medium-text p, .medium-text ul, .medium-text ol { font-family: var(--body-font); font-size: calc(16rem / 16); font-weight: 300; line-height: calc(30 / 16); } p.medium.bold, .medium-text.bold, .medium-text.bold p { font-weight: 600; } p.longform, ul.longform, ol.longform, .longform-text, .longform-text p, .longform-text ul, .longform-text ol { font-family: var(--body-font); font-size: calc(18rem / 16); font-weight: 300; line-height: calc(34 / 18); } p.longform.bold, .longform-text.bold, .longform-text.bold p, .longform a:not(.btn), .longform-text a:not(.btn) { font-weight: 500; } /* :not() carries the exemptions: buttons, and the reference marker/back-link, which are navigation affordances rather than prose links. Listing them here beats out-specifying this (0,2,1) selector from each of their own rules. */ .longform a:not(.btn, .ref-marker-link, .ref-backref), .longform-text a:not(.btn, .ref-marker-link, .ref-backref) { text-decoration: underline; } p.small, ul.small, ol.small, .small-text, .small-text p, .small-text ul, .small-text ol { font-size: calc(14rem / 16); font-weight: 400; letter-spacing: 0.2px; line-height: calc(24 / 14); } p.small.bold, .small-text.bold, .small-text.bold p { font-weight: 700; } p.xsmall, ul.xsmall, ol.xsmall, .xsmall-text, .xsmall-text p, .xsmall-text ul, .xsmall-text ol { font-size: calc(12rem / 16); font-weight: 400; letter-spacing: 0.2px; line-height: calc(16 / 12); } /* Bold in body copy defaults to the semibold (600) cut. */ b, strong { font-weight: 600; } /* Small body is the exception — its bold cut is full bold (700), not semibold, so it stays bold when a true Acumin semibold is added to the kit. */ .small-text :is(b, strong), p.small :is(b, strong) { font-weight: 700; } .eyebrow, .large-text .eyebrow, .medium-text .eyebrow, .small-text .eyebrow, .regular-text .eyebrow, .longform-text .eyebrow { display: block; /* Pinned so the eyebrow looks identical whether it's a

or a heading tag (e.g. an

when it stands in as the semantic page title). */ font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 700; letter-spacing: 3px; line-height: calc(20 / 14); text-transform: uppercase; } .eyebrow.small { font-size: calc(11rem / 16); font-weight: 700; letter-spacing: 1.5px; line-height: calc(16 / 11); } .eyebrow.xsmall { font-size: calc(10rem / 16); font-weight: 700; letter-spacing: 0.8px; line-height: calc(13 / 10); } .eyebrow.lavender { color: var(--lavender); } /*** Callout box — dashed-border offer box (eyebrow + body) ***/ .callout { align-items: stretch; border: 1px dashed color-mix(in srgb, currentColor 40%, transparent); display: flex; flex-direction: column; gap: var(--text-spacing-xxsmall); padding: var(--text-spacing-large) var(--text-spacing-medium) var(--text-spacing-xlarge); } .callout > * { margin: 0; } /* Promo variant — white card with dark copy, the badge straddling its top edge. */ .callout:has(.spin-badge) { background: var(--white); color: var(--black); padding-top: var(--text-spacing-xxlarge); position: relative; } /*** Try Phreesia badge — circular teal sticker centred on the callout's top edge ***/ /* translateY -58% keeps ~42px overlapping the box, the rest above it (Figma 1624:6233). */ .spin-badge { left: 50%; position: absolute; top: 0; transform: translate(-50%, -58%); width: 100px; } .spin-badge svg { display: block; height: auto; width: 100%; } .field-label { font-size: calc(10rem / 16); font-weight: 700; letter-spacing: 0.8px; line-height: calc(13 / 10); text-transform: uppercase; } .big-stat { font-family: var(--heading-font); font-size: calc(114rem / 16); font-weight: 300; letter-spacing: -0.6px; line-height: calc(96 / 114); } .big-stat.large { font-size: calc(180rem / 16); line-height: calc(140 / 180); } /* A hidden copy of the final value sizes the box, so the live counting number (overlaid in the same grid cell) never resizes the layout as digits are added. tabular-nums keeps the digits from jiggling as they tick. */ .count-up { display: inline-grid; font-variant-numeric: tabular-nums; } .count-up > * { grid-area: 1 / 1; } .count-up-value { text-align: inherit; } .count-up-reserve { visibility: hidden; } .highlight { color: var(--orange); font-weight: 400; } /* On a digital-blue field the brand-orange highlight clashes — paint it white. */ .module.bg-digital-blue .highlight { color: var(--white); } /* Inset painted region — modules set `background` only. `:has()` auto-isolates the host so the z-index:-1 doesn't escape upward. */ :has(> .bg-field) { isolation: isolate; position: relative; } .bg-field { inset: 0 var(--text-spacing-small); position: absolute; z-index: -1; } /* Hero paints bg-field as a card — inset on all four sides, not the band's side-only gutters. Shared here (not per style) because each hero style loads its own CSS file; every hero style that renders a bg-field wants this. */ .module.hero .bg-field { inset: var(--text-spacing-small); } /* Drop into any positioned, clipping host (e.g. .media); fills and sits behind the host's content. */ .bg-gradient { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -1; } .bg-layer { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } .bg-layer-base { background-color: #12ceb4; } .bg-layer-diamond { background: url(assets/images/bg-gradient-diamond.svg) no-repeat center; background-size: cover; } .bg-layer-texture { background: url(assets/images/bg-gradient-texture.png) no-repeat center; background-size: 100% 100%; } @property --bg-green-angle { inherits: false; initial-value: 270deg; syntax: ''; } .bg-layer-green { --bg-green-angle: 270deg; background: linear-gradient(var(--bg-green-angle), rgba(0, 158, 136, 0) 0%, rgba(0, 158, 136, 0.3) 100%); } @property --bg-pink-angle { inherits: false; initial-value: 322.03deg; syntax: ''; } .bg-layer-pink { --bg-pink-angle: 322.03deg; background: linear-gradient(var(--bg-pink-angle), rgba(236, 185, 222, 0) -20.83%, rgba(236, 185, 222, 0.7) 84.82%); } @keyframes bg-green-sway { to { --bg-green-angle: 240deg; } } @keyframes bg-pink-rotate { to { --bg-pink-angle: 682.03deg; } } /* Motion is ambient decoration — static for reduced-motion users. */ @media (prefers-reduced-motion: no-preference) { .bg-layer-green { animation: bg-green-sway 10s ease-in-out infinite alternate; } .bg-layer-pink { animation: bg-pink-rotate 14s linear infinite; } } .media { aspect-ratio: 15 / 17; overflow: hidden; position: relative; } .media > img, .media > video, .media > iframe, .media > picture > img { display: block; height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; } .media > iframe { border: 0; } .media.product { aspect-ratio: 748 / 756; background: var(--teal-gradient); } .media.product > img, .media.product > picture > img { filter: drop-shadow(8px 8px 24px rgba(0, 0, 0, 0.14)); object-fit: contain; padding: var(--text-spacing-small); } /* Anchor the screenshot to a corner: drop the padding on the anchored sides so it hugs that corner, keeping it only on the two away sides (centre is default). */ .media.product.anchor-top-left > img, .media.product.anchor-top-left > picture > img { object-position: top left; padding: 0 var(--text-spacing-small) var(--text-spacing-small) 0; } .media.product.anchor-top-right > img, .media.product.anchor-top-right > picture > img { object-position: top right; padding: 0 0 var(--text-spacing-small) var(--text-spacing-small); } .media.product.anchor-bottom-left > img, .media.product.anchor-bottom-left > picture > img { object-position: bottom left; padding: var(--text-spacing-small) var(--text-spacing-small) 0 0; } .media.product.anchor-bottom-right > img, .media.product.anchor-bottom-right > picture > img { object-position: bottom right; padding: var(--text-spacing-small) 0 0 var(--text-spacing-small); } /* Silent video (no controls) stands in for an image — show its full frame at its natural ratio instead of cropping it to the 16/9 box. */ .media.video-silent { aspect-ratio: auto; } .media.video-silent > video { height: auto; position: static; width: 100%; } /* Silent embed (Vimeo `background=1` / muted YouTube): a no-controls background player standing in for the image. The 16:9 iframe is oversized + centered so it covers any .media box aspect (crop, don't letterbox), and stays non-interactive. */ .media.video-bg { overflow: hidden; } .media.video-bg > iframe { aspect-ratio: 16 / 9; height: auto; left: 50%; min-height: 100%; min-width: 100%; pointer-events: none; top: 50%; translate: -50% -50%; width: auto; } /* Hover scrim — fades a bottom darken over the poster (z-index 1: above the image, below the play button + label at 2) so the label stays legible. */ .media.video::after { background: linear-gradient(180deg, transparent 57.06%, #000 100%); content: ""; inset: 0; opacity: 0; position: absolute; transition: opacity 0.2s ease; z-index: 1; } .media.video:hover::after, .media.video:focus-within::after { opacity: 0.25; } /* Whole .media is the click target (button covers it); triggers an inline