/* Blue Sprig — Porcelain Cobalt Calendar Cartouche */ .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 1402 / 1122); aspect-ratio: 1122 / 1402; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } /* Blue Sprig — Reference-Matched Cobalt Corner Calendar Card */ .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 886 / 1416); aspect-ratio: 1416 / 886; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 10; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] :is( .event-details-v2-date-time-full, .event-details-v2-date-time-parts, .event-details-v2-date-time-time, .event-details-v2-date-time-timezone ) { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; z-index: 10; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] :is( .event-details-v2-date-time-live-weekday, .event-details-v2-date-time-live-day, .event-details-v2-date-time-live-month-year ) { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.1944em !important; letter-spacing: 0.17em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: -0.015em !important; line-height: 0.84 !important; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-month-year { left: var(--date-time-safe-month-year-x) !important; inset-block-start: var(--date-time-safe-month-year-y) !important; inline-size: var(--date-time-safe-month-year-width) !important; block-size: var(--date-time-safe-month-year-height) !important; grid-template-columns: 48.4211% 9.4737% 42.1052%; font-size: 0.2em !important; letter-spacing: 0 !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-month-year :is( .event-details-v2-date-time-live-month, .event-details-v2-date-time-live-year, .event-details-v2-date-time-live-month-year-separator ) { position: static !important; inset: auto !important; display: inline-flex !important; align-items: center; justify-content: center; inline-size: auto !important; block-size: auto !important; min-inline-size: 0; max-inline-size: 100%; margin: 0; padding: 0; color: inherit !important; -webkit-text-fill-color: currentcolor !important; font-family: inherit; font-synthesis: none; font-weight: 400; line-height: 1 !important; text-align: center; text-transform: uppercase; transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-month-year .event-details-v2-date-time-live-month { font-size: 1em !important; letter-spacing: 0.15em !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-month-year .event-details-v2-date-time-live-year { font-size: 0.9861em !important; letter-spacing: 0.13em !important; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-month-year .event-details-v2-date-time-live-month-year-separator { visibility: hidden !important; font-size: 0 !important; letter-spacing: 0 !important; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-weekday[data-date-time-fit="compact"] { font-size: 0.18em !important; letter-spacing: 0.11em !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"] .event-details-v2-date-time-live-month-year :is( .event-details-v2-date-time-live-month[data-date-time-fit="compact"], .event-details-v2-date-time-live-year[data-date-time-fit="compact"] ) { font-size: 0.9em !important; letter-spacing: 0.11em !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltCornerCalendarCard"][dir="rtl"] :is( .event-details-v2-date-time-live-weekday, .event-details-v2-date-time-live-day, .event-details-v2-date-time-live-month-year, .event-details-v2-date-time-live-month, .event-details-v2-date-time-live-year ) { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; text-transform: none; } /* Blue Sprig — Exact Four-Panel Porcelain Date Card */ @media all { .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 853 / 1844); aspect-ratio: 1844 / 853; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2241379em !important; letter-spacing: 0.1em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: -0.015em !important; line-height: 0.86 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.2241379em !important; letter-spacing: 0.1em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.2310345em !important; letter-spacing: 0.11em !important; line-height: 1 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-weekday[data-date-time-fit="compact"], .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactFourPanelPorcelainDateCard"] .event-details-v2-date-time-live-month[data-date-time-fit="compact"] { font-size: 0.18em !important; letter-spacing: 0.11em !important; transform: translateX(0.055em); } } /* Blue Sprig — reference-match oval center / side plaques date card */ @media all { .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 993 / 1584); aspect-ratio: 1584 / 993; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; inline-size: 100%; block-size: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 10; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] :is( .event-details-v2-date-time-full, .event-details-v2-date-time-parts, .event-details-v2-date-time-time, .event-details-v2-date-time-timezone ) { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; z-index: 10; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] :is( .event-details-v2-date-time-live-weekday, .event-details-v2-date-time-live-day, .event-details-v2-date-time-live-month, .event-details-v2-date-time-live-year ) { position: absolute !important; inset-inline-start: auto !important; display: flex !important; align-items: center; justify-content: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; font-synthesis: none; font-weight: 400 !important; overflow: visible; text-align: center; text-rendering: geometricPrecision; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2327586em !important; letter-spacing: 0.1em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: 0 !important; line-height: 0.82 !important; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.2241379em !important; letter-spacing: 0.12em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.2310345em !important; letter-spacing: 0.12em !important; line-height: 1 !important; text-transform: none; } } /* Long labels must stay inside the narrow side plaque, including at 110%. */ .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalCenterSidePlaques"] :is( .event-details-v2-date-time-live-weekday[data-date-time-fit="compact"], .event-details-v2-date-time-live-month[data-date-time-fit="compact"] ) { font-size: 0.205em !important; } /* Blue Sprig — Reference-Matched Center-Oval Porcelain Date Plaque */ @media all { .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 940 / 1672); aspect-ratio: 1672 / 940; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] :is( .event-details-v2-date-time-full, .event-details-v2-date-time-parts, .event-details-v2-date-time-time, .event-details-v2-date-time-timezone ) { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] :is( .event-details-v2-date-time-live-weekday, .event-details-v2-date-time-live-day, .event-details-v2-date-time-live-month, .event-details-v2-date-time-live-year ) { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2027778em !important; letter-spacing: 0.14em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: -0.015em !important; line-height: 0.82 !important; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.2027778em !important; letter-spacing: 0.14em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.2em !important; letter-spacing: 0.14em !important; line-height: 1 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"] :is( .event-details-v2-date-time-live-weekday[data-date-time-fit="compact"], .event-details-v2-date-time-live-month[data-date-time-fit="compact"] ) { font-size: 0.17em !important; letter-spacing: 0.126em !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"][dir="rtl"] :is( .event-details-v2-date-time-live-weekday, .event-details-v2-date-time-live-day, .event-details-v2-date-time-live-month, .event-details-v2-date-time-live-year ) { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; text-transform: none; } } /* Blue Sprig — Exact Horizontal Floral Date Cartouche */ .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 934 / 1683); aspect-ratio: 1683 / 934; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2196em !important; letter-spacing: 0.14em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: -0.015em !important; line-height: 0.82 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.2268em !important; letter-spacing: 0.13em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.2143em !important; letter-spacing: 0.09em !important; line-height: 1 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-weekday[data-date-time-fit="compact"], .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"] .event-details-v2-date-time-live-month[data-date-time-fit="compact"] { font-size: 0.18em !important; letter-spacing: 0.11em !important; transform: translateX(0.055em); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalFloralDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-year { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; transform: none; text-transform: none; } /* Blue Sprig — Reference-Matched Cobalt Arch Date Cartouche */ @media all { .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 1114 / 1412); aspect-ratio: 1412 / 1114; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2742em !important; letter-spacing: 0.039em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: 0 !important; line-height: 0.86 !important; transform: scaleX(1.12); transform-origin: center; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.2843em !important; letter-spacing: 0.0376em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCobaltArchDateCartouche"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.2843em !important; letter-spacing: 0.1654em !important; line-height: 1 !important; } } /* Blue Sprig — Exact Arched Cobalt Calendar Rail */ @media all { .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 994 / 1583); aspect-ratio: 1583 / 994; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; inline-size: 100%; block-size: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; overflow: visible !important; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.1984848em !important; letter-spacing: 0.12em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: -0.015em !important; line-height: 0.84 !important; transform: scaleY(1.05); transform-origin: center; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.1984848em !important; letter-spacing: 0.12em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceExactArchedCobaltCalendarRail"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.1878788em !important; letter-spacing: 0.12em !important; line-height: 1 !important; } } /* Blue Sprig — Exact Horizontal Cobalt Calendar Card */ .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 740 / 1503); aspect-ratio: 1503 / 740; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Didot, "Bodoni 72", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2em !important; letter-spacing: 0.17em !important; line-height: 1 !important; transform: translateX(0.085em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.207em !important; letter-spacing: 0.17em !important; line-height: 1 !important; transform: translateX(0.085em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; font-weight: 400; letter-spacing: -0.015em !important; line-height: 0.86 !important; text-shadow: 0 0.12em 0.12em rgb(71 78 89 / 16%); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.207em !important; letter-spacing: 0.14em !important; line-height: 1 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-weekday[data-date-time-fit="compact"] { font-size: 0.18em !important; letter-spacing: 0.11em !important; transform: translateX(0.055em); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] .event-details-v2-date-time-live-month[data-date-time-fit="compact"] { font-size: 0.18em !important; letter-spacing: 0.11em !important; transform: translateX(0.055em); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"][dir="rtl"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"][dir="rtl"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"][dir="rtl"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"][dir="rtl"] .event-details-v2-date-time-live-year { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; transform: none; text-transform: none; } /* Blue Sprig — Exact Scalloped Cobalt Calendar Plaque */ .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 1070 / 1470); aspect-ratio: 1470 / 1070; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; inline-size: 100%; block-size: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d; overflow: visible !important; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-year { position: absolute !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", "Noto Naskh Arabic", "Noto Sans Arabic", Garamond, Georgia, serif; -webkit-text-fill-color: #173c6d !important; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-weekday { inset-inline-start: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.1547619em !important; letter-spacing: 0.24em !important; line-height: 1 !important; transform: scaleX(0.96); transform-origin: center; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-day { inset-inline-start: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 0.82em !important; letter-spacing: -0.015em !important; line-height: 0.9 !important; transform: scaleX(0.73); transform-origin: center; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-month { inset-inline-start: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.1785714em !important; letter-spacing: 0.24em !important; line-height: 1 !important; transform: scaleX(0.85); transform-origin: center; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"] .event-details-v2-date-time-live-year { inset-inline-start: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.1845238em !important; letter-spacing: 0.18em !important; line-height: 1 !important; transform: scaleX(1); transform-origin: center; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"][dir="rtl"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"][dir="rtl"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"][dir="rtl"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"][dir="rtl"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"][dir="rtl"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"][dir="rtl"] .event-details-v2-date-time-live-year { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; transform: none; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-year { position: absolute !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Didot, "Bodoni 72", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-weekday { inset-inline-start: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.1525em !important; letter-spacing: 0.24em !important; line-height: 1 !important; transform: translateX(0.12em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-day { inset-inline-start: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: 0.01em !important; line-height: 0.86 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-month { inset-inline-start: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.17875em !important; letter-spacing: 0.22em !important; line-height: 1 !important; transform: translateX(0.11em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"] .event-details-v2-date-time-live-year { inset-inline-start: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.17em !important; letter-spacing: 0.22em !important; line-height: 1 !important; transform: translateX(0.11em); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"][dir="rtl"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"][dir="rtl"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"][dir="rtl"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigPorcelainCalendarCartouche"][dir="rtl"] .event-details-v2-date-time-live-year { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; transform: none; text-transform: none; } /* Blue Sprig — approved Cobalt Porcelain Date Cartouche */ .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 1402 / 1122); aspect-ratio: 1122 / 1402; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.25em !important; letter-spacing: 0.35em !important; line-height: 1 !important; transform: translateX(0.175em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; font-weight: 300; letter-spacing: -0.02em !important; line-height: 0.9 !important; transform: translateX(-0.01em); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.26087em !important; letter-spacing: 0.27em !important; line-height: 1 !important; transform: translateX(0.135em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.25em !important; letter-spacing: 0.33em !important; line-height: 1 !important; transform: translateX(0.165em); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"][dir="rtl"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"][dir="rtl"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"][dir="rtl"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"][dir="rtl"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"][dir="rtl"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blue-sprig-cobalt-porcelain-date-cartouche"][dir="rtl"] .event-details-v2-date-time-live-year { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; transform: none; text-transform: none; } /* Blue Sprig — Reference-Faithful Cobalt Calendar Cartouche */ .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 740 / 1503); aspect-ratio: 1503 / 740; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Didot, "Bodoni 72", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.319em !important; letter-spacing: 0.27em !important; line-height: 1 !important; transform: translateX(0.135em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.324em !important; letter-spacing: 0.27em !important; line-height: 1 !important; transform: translateX(0.135em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: -0.015em !important; line-height: 0.86 !important; text-shadow: 0 0.12em 0.12em rgb(71 78 89 / 16%); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.324em !important; letter-spacing: 0.21em !important; line-height: 1 !important; transform: translateX(0.105em); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"][dir="rtl"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"][dir="rtl"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"][dir="rtl"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceFaithfulCobaltCalendarCartouche"][dir="rtl"] .event-details-v2-date-time-live-year { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; transform: none; text-transform: none; } /* Blue Sprig — approved wide Cobalt Porcelain Date Cartouche */ @media all { .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 904 / 1740); aspect-ratio: 1740 / 904; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"]::after { content: ""; position: absolute; z-index: 2; top: 55%; inline-size: 1.05%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff8d8 0 12%, transparent 13%), radial-gradient( circle at 50% 52%, #c79026 0 38%, #895711 70%, #f1c65e 100% ); box-shadow: 0 0.35cqi 0.7cqi rgb(93 54 8 / 32%); transform: translate(-50%, -50%); pointer-events: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"]::before { left: 40.2%; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"]::after { left: 59.8%; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Didot, "Bodoni 72", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.36em !important; letter-spacing: 0.32em !important; line-height: 1 !important; transform: translateX(0.16em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-year { inset-block-start: var(--date-time-safe-month-y) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.45em !important; letter-spacing: 0.28em !important; line-height: 1 !important; transform: translateX(0.14em); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inline-size: var(--date-time-safe-month-width) !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; font-weight: 300; letter-spacing: -0.02em !important; line-height: 0.88 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inline-size: var(--date-time-safe-year-width) !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"][dir="rtl"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"][dir="rtl"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-year { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; letter-spacing: 0 !important; transform: none; text-transform: none; } } /* Blue Sprig — reference-match oval blue date seal */ @media all { .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 1188 / 1254); aspect-ratio: 1254 / 1188; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Didot, "Bodoni 72", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.24em !important; letter-spacing: 0.14em !important; line-height: 1 !important; transform: translateX(0.108em) scale(0.952, 0.86); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: 0 !important; line-height: 1 !important; transform: translateX(0.017em) scaleX(1.06); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.24em !important; letter-spacing: 0.2em !important; line-height: 1 !important; transform: translateX(0.158em) scale(0.956, 1.237); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchOvalBlueDateSeal"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.2621em !important; letter-spacing: 0.14em !important; line-height: 1 !important; transform: translateX(0.112em) scale(1.024, 0.94); } } /* Blue Sprig — locked ornate oval date medallion */ @media all { .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 1115 / 1450); aspect-ratio: 1450 / 1115; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; inline-size: 100%; block-size: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 10; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] :is( .event-details-v2-date-time-full, .event-details-v2-date-time-parts, .event-details-v2-date-time-time, .event-details-v2-date-time-timezone ) { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] :is( .event-details-v2-date-time-live-weekday, .event-details-v2-date-time-live-day, .event-details-v2-date-time-live-month, .event-details-v2-date-time-live-year ) { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; transform-origin: center; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2142857em !important; letter-spacing: 0.14em !important; line-height: 1 !important; transform: scale(0.936669, 0.940909); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 0.76em !important; letter-spacing: 0 !important; line-height: 0.8 !important; transform: scale(1.307313, 1.636043); } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.2142857em !important; letter-spacing: 0.16em !important; line-height: 1 !important; transform: scale(1.099667, 1.239472); text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigLockedOrnateOvalDateMedallion"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.2142857em !important; letter-spacing: 0.12em !important; line-height: 1 !important; transform: scale(1.389655, 0.908229); } } /* Blue Sprig — reference-matched opaque cobalt date plaque */ @media all { .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 918 / 1536); aspect-ratio: 1536 / 918; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } /* Blue Sprig — Reference-Match Porcelain Column Date Cartouche */ .event-details-v2-block-dateTime:has( > .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] ) { z-index: 3; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] { position: relative; display: block; inline-size: 100%; min-block-size: calc(100cqi * 941 / 1695); aspect-ratio: 1695 / 941; container-type: inline-size; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #173c6d; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; inline-size: 100%; block-size: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; overflow: visible !important; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400 !important; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-weekday { inset-inline-start: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2348485em !important; letter-spacing: 0.18em !important; line-height: 0.92 !important; transform: scaleX(1.22) scaleY(1.27); transform-origin: center; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-day { inset-inline-start: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 0.84em !important; letter-spacing: 0 !important; line-height: 0.8 !important; transform: scaleX(1.16) scaleY(1.47); transform-origin: center; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-month { inset-inline-start: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.219697em !important; letter-spacing: 0.18em !important; line-height: 0.94 !important; transform: scaleX(1.21) scaleY(1.22); transform-origin: center; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchPorcelainColumnDateCartouche"] .event-details-v2-date-time-live-year { inset-inline-start: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.2272727em !important; letter-spacing: 0.12em !important; line-height: 0.94 !important; transform: scaleX(1.51) scaleY(1.27); transform-origin: center; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"]::before, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"]::after { content: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-art { position: absolute; inset: 0; z-index: 0 !important; background-position: center; background-repeat: no-repeat; background-size: contain; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-date { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; color: #173c6d !important; overflow: visible; text-align: center; text-transform: none; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-full, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-parts, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-time, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-timezone { display: none !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-stack { position: absolute !important; inset: 0 !important; display: block !important; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none; overflow: visible; overflow-wrap: normal; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-weekday, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-day, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-month, .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-year { position: absolute !important; inset-inline-start: auto !important; display: grid !important; place-items: center; margin: 0; padding: 0; color: #173c6d !important; -webkit-text-fill-color: #173c6d !important; font-family: var(--font-cormorant-garamond), "Cormorant Garamond", Garamond, Didot, "Bodoni 72", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-synthesis: none; font-weight: 400; overflow: visible; text-align: center; text-wrap: nowrap; unicode-bidi: plaintext; white-space: nowrap; word-break: keep-all; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-weekday { left: var(--date-time-safe-weekday-x) !important; inset-block-start: var(--date-time-safe-weekday-y) !important; inline-size: var(--date-time-safe-weekday-width) !important; block-size: var(--date-time-safe-weekday-height) !important; font-size: 0.2em !important; letter-spacing: 0.17em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-day { left: var(--date-time-safe-day-x) !important; inset-block-start: var(--date-time-safe-day-y) !important; inline-size: var(--date-time-safe-day-width) !important; block-size: var(--date-time-safe-day-height) !important; font-size: 1em !important; letter-spacing: -0.015em !important; line-height: 0.86 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-month { left: var(--date-time-safe-month-x) !important; inset-block-start: var(--date-time-safe-month-y) !important; inline-size: var(--date-time-safe-month-width) !important; block-size: var(--date-time-safe-month-height) !important; font-size: 0.207em !important; letter-spacing: 0.17em !important; line-height: 1 !important; text-transform: uppercase; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-year { left: var(--date-time-safe-year-x) !important; inset-block-start: var(--date-time-safe-year-y) !important; inline-size: var(--date-time-safe-year-width) !important; block-size: var(--date-time-safe-year-height) !important; font-size: 0.207em !important; letter-spacing: 0.14em !important; line-height: 1 !important; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-weekday[data-date-time-fit="compact"], .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedOpaqueCobaltDatePlaque"] .event-details-v2-date-time-live-month[data-date-time-fit="compact"] { font-size: 0.18em !important; letter-spacing: 0.11em !important; } } /* Optical corrections for RTL glyph metrics. These offsets follow component width (cqi), so the shell and its live type retain their relationship on resize. Keep the Latin recipes unchanged; the existing RTL fonts have taller figures. */ .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"][dir="rtl"] { --blue-sprig-date-day-optical-y: 2cqi; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigReferenceMatchedCenterOvalPorcelainDatePlaque"][dir="rtl"] .event-details-v2-date-time-live-day { translate: 0 var(--blue-sprig-date-day-optical-y); } /* Center an oversized numeral's grid track as well as the glyph inside it. */ .event-details-v2-date-time:is( [data-event-details-v2-date-time-variant="blueSprigExactScallopedCobaltCalendarPlaque"], [data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"] ) .event-details-v2-date-time-live-day { justify-content: center; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"][dir="rtl"] { --blue-sprig-date-weekday-optical-y: -1.5cqi; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"][dir="rtl"] .event-details-v2-date-time-live-weekday { translate: 0 var(--blue-sprig-date-weekday-optical-y); } /* The RTL figures otherwise cross the two fixed gold dividers at 110%. Preserve their height and font size while fitting that bounded column. */ .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"][dir="rtl"] { --blue-sprig-date-day-optical-y: 3cqi; } .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigExactHorizontalCobaltCalendarCard"][dir="rtl"] .event-details-v2-date-time-live-day { translate: 0 var(--blue-sprig-date-day-optical-y); scale: 0.9 1; } /* * Persisted Wide Cobalt Porcelain Date Cartouche alignment contract. * This late override keeps the component box identical to its approved * 1740 × 904 artwork even when an older portrait draft stylesheet is present. */ .event-details-v2-date-time[data-event-details-v2-date-time-variant="blueSprigWideCobaltPorcelainDateCartouche"] { min-block-size: calc(100cqi * 904 / 1740) !important; aspect-ratio: 1740 / 904 !important; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] { --blue-sprig-schedule-frame-top: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-frame-top.png"); --blue-sprig-schedule-frame-middle: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-frame-middle-row.png"); --blue-sprig-schedule-frame-bottom: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-frame-bottom.png"); --blue-sprig-schedule-top-peony: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-top-peony-crest.png"); --blue-sprig-schedule-top-left-spray: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-top-left-cobalt-spray.png"); --blue-sprig-schedule-top-right-spray: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-top-right-cobalt-spray.png"); --blue-sprig-schedule-title-divider: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-title-divider.png"); --blue-sprig-schedule-row-horizontal-divider: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-row-horizontal-divider.png"); --blue-sprig-schedule-row-vertical-divider: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-row-vertical-divider.png"); --blue-sprig-schedule-bottom-left-spray: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-bottom-left-cobalt-spray.png"); --blue-sprig-schedule-bottom-right-spray: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-bottom-right-cobalt-spray.png"); --blue-sprig-schedule-bottom-crest: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/schedule/cobalt-garden-arch/blue-sprig-cobalt-garden-arch-schedule-bottom-scroll-crest.png"); --blue-sprig-schedule-ink: #163f96; position: relative; isolation: isolate; display: block; box-sizing: border-box; width: 100%; max-width: none; margin-inline: auto; padding: 46% 0 19%; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--blue-sprig-schedule-ink); container-type: inline-size; text-align: start; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"]::before, .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"]::after { content: none; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art { position: absolute; z-index: 2; display: block; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-frame-top, .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-frame-bottom { left: 0; z-index: 1; width: 100%; background-size: 100% 100%; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-frame-top { top: 0; height: 46cqi; background-image: var(--blue-sprig-schedule-frame-top); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-frame-bottom { bottom: 0; height: 19cqi; background-image: var(--blue-sprig-schedule-frame-bottom); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-top-peony-crest { top: 3.8cqi; left: 50%; width: 28%; aspect-ratio: 24 / 19; background-image: var(--blue-sprig-schedule-top-peony); transform: translateX(-50%); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-top-left-cobalt-spray, .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-top-right-cobalt-spray { top: 7cqi; width: 28%; aspect-ratio: 8 / 9; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-top-left-cobalt-spray { left: 7%; background-image: var(--blue-sprig-schedule-top-left-spray); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-top-right-cobalt-spray { right: 7%; background-image: var(--blue-sprig-schedule-top-right-spray); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-title-divider { top: 44.6cqi; left: 50%; width: 22%; aspect-ratio: 10 / 1; background-image: var(--blue-sprig-schedule-title-divider); transform: translate(-50%, -50%); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-bottom-left-cobalt-spray, .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-bottom-right-cobalt-spray { bottom: 4cqi; width: 37%; aspect-ratio: 43 / 19; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-bottom-left-cobalt-spray { left: 5.5%; background-image: var(--blue-sprig-schedule-bottom-left-spray); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-bottom-right-cobalt-spray { right: 5.5%; background-image: var(--blue-sprig-schedule-bottom-right-spray); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-bottom-scroll-crest { bottom: 0.5cqi; left: 50%; width: 19%; aspect-ratio: 18 / 13; background-image: var(--blue-sprig-schedule-bottom-crest); transform: translateX(-50%); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] h3 { position: absolute; top: 37.4cqi; left: 20%; z-index: 5; display: grid; width: 60%; height: 5cqi; margin: 0; padding: 0; place-items: center; color: var(--blue-sprig-schedule-ink); font-family: var(--invitation-font-heading); font-size: clamp(0.82em, 3.2cqi, 1.45em); font-weight: 400; letter-spacing: 0.13em; line-height: 1; text-align: center; text-transform: uppercase; text-wrap: balance; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] ol { position: relative; z-index: 2; display: grid; width: 100%; gap: 0; margin: 0; padding: 0; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] ol::before, .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] ol::after { content: none; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] li { position: relative; display: grid; box-sizing: border-box; grid-template-columns: 21.5% 18.5% 6% 42% 12%; gap: 0; min-height: 17.5cqi; align-items: center; padding-block: clamp(0.75em, 2.8cqi, 1.15em); overflow: visible; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-frame-middle-row { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; background-image: var(--blue-sprig-schedule-frame-middle); background-repeat: repeat-y; background-position: top center; background-size: 100% 17.5cqi; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-row-horizontal-divider { position: absolute; bottom: 0; left: 50%; z-index: 3; display: block; width: 48%; aspect-ratio: 40 / 3; pointer-events: none; background-image: var(--blue-sprig-schedule-row-horizontal-divider); background-repeat: no-repeat; background-position: center; background-size: contain; transform: translate(-50%, 50%); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] li:last-child .event-details-v2-schedule-art-row-horizontal-divider { display: none; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-art-row-vertical-divider { position: absolute; top: 50%; left: 42.5%; z-index: 3; display: block; width: 2.2%; height: 64%; pointer-events: none; background-image: var(--blue-sprig-schedule-row-vertical-divider); background-repeat: no-repeat; background-position: center; background-size: contain; transform: translate(-50%, -50%); } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] time, .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-row-copy { position: relative; z-index: 4; min-width: 0; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] time { grid-column: 2; justify-self: center; color: var(--blue-sprig-schedule-ink); font-family: var(--invitation-font-heading); font-size: 0.92em; font-weight: 400; letter-spacing: 0.09em; line-height: 1.12; text-align: center; white-space: nowrap; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] .event-details-v2-schedule-row-copy { grid-column: 4; text-align: start; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] strong { color: var(--blue-sprig-schedule-ink); font-family: var(--invitation-font-heading); font-size: 0.96em; font-weight: 400; letter-spacing: 0.11em; line-height: 1.2; overflow-wrap: anywhere; text-transform: uppercase; hyphens: auto; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] small { display: none; } @container (max-width: 300px) { .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] li { grid-template-columns: 21.5% 18.5% 6% 42% 12%; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] time { letter-spacing: 0.04em; } .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] strong { letter-spacing: 0.07em; } } .builder-event-details-v2-schedule-thumbnail-canvas .event-details-v2-schedule[data-event-details-v2-schedule-variant="blue-sprig-cobalt-garden-arch-schedule"] { box-shadow: none; } /* Blue Sprig — Faithful Arched Countdown Rail */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/blue-sprig-faithful-arched-countdown-rail/blue-sprig-faithful-arched-countdown-rail-shell-mask.svg"); /* Optical correction within the raster shell and its baked separator band. */ --blue-sprig-countdown-optical-offset-y: -1.5%; --blue-sprig-faithful-arched-rail-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/blue-sprig-faithful-arched-countdown-rail/blue-sprig-faithful-arched-countdown-rail-shell.png"); --blue-sprig-faithful-arched-rail-ink: #173c6d; --blue-sprig-faithful-arched-rail-label: #8a6b43; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1536 / 971; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background-color: transparent; background-image: var(--blue-sprig-faithful-arched-rail-shell); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; color: var(--blue-sprig-faithful-arched-rail-ink); container-type: inline-size; isolation: isolate; } /* Blue Sprig — Cobalt Floral Relief Countdown Rail */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/cobalt-floral-relief-countdown-rail/blue-sprig-cobalt-floral-relief-countdown-rail-shell-mask.svg"); /* Optical correction within the raster shell and its baked separator band. */ --blue-sprig-countdown-optical-offset-y: -3%; --blue-sprig-relief-rail-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/cobalt-floral-relief-countdown-rail/blue-sprig-cobalt-floral-relief-countdown-rail-shell.png"); --blue-sprig-relief-rail-ink: #173c6d; --blue-sprig-relief-rail-label: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1960 / 802; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-relief-rail-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-relief-rail-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit { --blue-sprig-relief-rail-unit-center-x: 50%; position: absolute; top: calc(38.5% + var(--blue-sprig-countdown-optical-offset-y)); left: var(--blue-sprig-relief-rail-unit-center-x); display: grid; box-sizing: border-box; width: 15.5%; height: 24%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.05cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-relief-rail-unit-center-x: 25.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-relief-rail-unit-center-x: 41.9%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-relief-rail-unit-center-x: 58.4%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-relief-rail-unit-center-x: 75%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-relief-rail-unit-center-x: 75%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-relief-rail-unit-center-x: 58.4%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-relief-rail-unit-center-x: 41.9%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-relief-rail-unit-center-x: 25.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-relief-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(21px, 8.8cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.86), 0 0.035em 0.055em rgba(23, 60, 109, 0.12); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-relief-rail-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 1.9cqi, 12px); font-weight: 600; letter-spacing: 0.1em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit strong { direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.08em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 39%; left: 18%; display: grid; box-sizing: border-box; width: 64%; height: 21%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-relief-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.4cqi, 29px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][data-event-details-v2-time-left-complete="true"][dir="rtl"] .event-details-v2-time-left-message strong { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit small { letter-spacing: 0.055em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.04em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit small { letter-spacing: 0.005em; } } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit { --blue-sprig-faithful-arched-rail-unit-center-x: 50%; position: absolute; top: calc(47.2% + var(--blue-sprig-countdown-optical-offset-y)); left: var(--blue-sprig-faithful-arched-rail-unit-center-x); display: grid; box-sizing: border-box; width: 13.4%; height: 20%; grid-template-rows: auto auto; place-content: center; justify-items: center; gap: 1.45cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-faithful-arched-rail-unit-center-x: 27.4%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-faithful-arched-rail-unit-center-x: 43.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-faithful-arched-rail-unit-center-x: 58.4%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-faithful-arched-rail-unit-center-x: 74.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-faithful-arched-rail-unit-center-x: 74.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-faithful-arched-rail-unit-center-x: 58.4%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-faithful-arched-rail-unit-center-x: 43.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-faithful-arched-rail-unit-center-x: 27.4%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-faithful-arched-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(24px, 8.6cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.78); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-faithful-arched-rail-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 2cqi, 13px); font-weight: 600; letter-spacing: 0.12em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.015em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 46%; left: 20%; display: grid; width: 60%; height: 16%; margin: 0; place-items: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { color: var(--blue-sprig-faithful-arched-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(14px, 4.2cqi, 28px); font-weight: 500; line-height: 1.1; text-align: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit small { letter-spacing: 0.06em; } } /* Blue Sprig — Cobalt Floral Countdown Plaque */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] { /* Optical correction within the raster shell and its baked separator band. */ --blue-sprig-countdown-optical-offset-y: -4%; --blue-sprig-cobalt-floral-plaque-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/cobalt-floral-countdown-plaque/blue-sprig-cobalt-floral-countdown-plaque-shell.png"); --blue-sprig-cobalt-floral-plaque-ink: #173c6d; --blue-sprig-cobalt-floral-plaque-label: #705a32; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1629 / 966; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-cobalt-floral-plaque-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-cobalt-floral-plaque-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit { --blue-sprig-cobalt-floral-plaque-unit-center-x: 50%; position: absolute; top: calc(43% + var(--blue-sprig-countdown-optical-offset-y)); left: var(--blue-sprig-cobalt-floral-plaque-unit-center-x); display: grid; box-sizing: border-box; width: 14.5%; height: 22%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.25cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit:nth-child(1) { /* Physical shell compartments, optically balanced against baked dividers. Keep the reversed RTL assignments below on these same anchors. */ --blue-sprig-cobalt-floral-plaque-unit-center-x: 24.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-cobalt-floral-plaque-unit-center-x: 42%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-cobalt-floral-plaque-unit-center-x: 57.65%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-cobalt-floral-plaque-unit-center-x: 74.6%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-cobalt-floral-plaque-unit-center-x: 74.6%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-cobalt-floral-plaque-unit-center-x: 57.65%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-cobalt-floral-plaque-unit-center-x: 42%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-cobalt-floral-plaque-unit-center-x: 24.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-cobalt-floral-plaque-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(23px, 8.8cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.035em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.86), 0 0.035em 0.055em rgba(23, 60, 109, 0.12); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-cobalt-floral-plaque-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 2cqi, 13px); font-weight: 600; letter-spacing: 0.1em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][dir="rtl"] .event-details-v2-time-left-unit strong { direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; top: 43%; left: 20%; display: grid; box-sizing: border-box; width: 60%; height: 17%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-cobalt-floral-plaque-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.4cqi, 29px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][data-event-details-v2-time-left-complete="true"][dir="rtl"] .event-details-v2-time-left-message strong { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit small { letter-spacing: 0.06em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"][dir="rtl"] .event-details-v2-time-left-unit small { letter-spacing: 0.005em; } } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] { --blue-sprig-time-left-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/blue-sprig-porcelain-countdown/blue-sprig-porcelain-countdown-shell.png"); --blue-sprig-time-left-ink: #173c6d; --blue-sprig-time-left-gold: #c0a05e; position: relative; display: block; box-sizing: border-box; width: min(100%, 430px); max-width: 430px; aspect-ratio: 1008 / 1046; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-time-left-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-time-left-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-kicker { position: absolute; top: 29.2%; left: 16%; width: 68%; margin: 0; overflow: hidden; color: var(--blue-sprig-time-left-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(9px, 3.05cqi, 13px); font-weight: 500; letter-spacing: 0.25em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-message { position: absolute; top: 32.5%; left: 12%; display: grid; width: 76%; height: 5.8%; margin: 0; place-items: start center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-time-left-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(16px, 5.7cqi, 25px); font-weight: 500; letter-spacing: 0.1em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-message::after { position: absolute; bottom: 0; left: 50%; width: 23%; height: 1px; background: linear-gradient( 90deg, transparent, var(--blue-sprig-time-left-gold) 18%, var(--blue-sprig-time-left-gold) 82%, transparent ); content: ""; opacity: 0.9; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; margin: 0; padding: 0; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit { --blue-sprig-time-left-unit-center-x: 50%; position: absolute; top: 53.8%; left: var(--blue-sprig-time-left-unit-center-x); display: grid; width: 13.8%; height: 22%; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 0.7cqi; min-width: 0; /* Let long labels use the medallion width at narrow builder sizes. */ padding: 0; transform: translate(-50%, -50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-time-left-unit-center-x: 24.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-time-left-unit-center-x: 41.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-time-left-unit-center-x: 58.6%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-time-left-unit-center-x: 75.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-time-left-unit-center-x: 75.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-time-left-unit-center-x: 58.6%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-time-left-unit-center-x: 41.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-time-left-unit-center-x: 24.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-time-left-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(24px, 7.8cqi, 34px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; line-height: 0.86; text-align: center; text-overflow: clip; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.72); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit small { max-width: 100%; overflow: hidden; color: var(--blue-sprig-time-left-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 1.9cqi, 8.2px); font-weight: 600; letter-spacing: 0.12em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][dir="rtl"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][dir="rtl"] .event-details-v2-time-left-message strong, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.02em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-kicker { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { top: 31%; left: 16%; width: 68%; height: 6%; place-items: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message::after { display: none; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit small { letter-spacing: 0.06em; } } /* Blue Sprig — Exact Porcelain Countdown Cartouche */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/exact-porcelain-countdown-cartouche/blue-sprig-exact-porcelain-countdown-cartouche-shell-mask.svg"); /* Optical correction within the raster shell and its baked separator band. */ --blue-sprig-countdown-optical-offset-y: -2.5%; --blue-sprig-exact-cartouche-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/exact-porcelain-countdown-cartouche/blue-sprig-exact-porcelain-countdown-cartouche-shell.png"); --blue-sprig-exact-cartouche-ink: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1691 / 930; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-exact-cartouche-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-exact-cartouche-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-kicker { position: absolute; z-index: 1; top: 34.1%; left: 18%; display: grid; width: 64%; height: 5%; margin: 0; place-items: center; overflow: hidden; color: var(--blue-sprig-exact-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(8px, 2.7cqi, 18px); font-weight: 600; letter-spacing: 0.18em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-units { position: absolute; z-index: 1; top: calc(47.2% + var(--blue-sprig-countdown-optical-offset-y)); right: 0; left: 0; display: block; width: 100%; height: 20%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit { --blue-sprig-exact-cartouche-unit-center-x: 50%; position: absolute; top: 0; left: var(--blue-sprig-exact-cartouche-unit-center-x); display: grid; width: 13.2%; height: 100%; grid-template-rows: auto auto; place-content: center; justify-items: center; gap: 1.45cqi; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(1) { /* Physical shell compartments, optically balanced against baked dividers. */ --blue-sprig-exact-cartouche-unit-center-x: 29.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-exact-cartouche-unit-center-x: 44.25%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-exact-cartouche-unit-center-x: 58.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-exact-cartouche-unit-center-x: 74.35%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit strong { max-width: 100%; overflow: visible; color: var(--blue-sprig-exact-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(24px, 8.6cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.78); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit small { max-width: 100%; overflow: hidden; color: var(--blue-sprig-exact-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 2cqi, 13px); font-weight: 600; letter-spacing: 0.12em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.015em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 46%; left: 20%; display: grid; width: 60%; height: 16%; margin: 0; place-items: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { color: var(--blue-sprig-exact-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(14px, 4.2cqi, 28px); font-weight: 500; line-height: 1.1; text-align: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-kicker { letter-spacing: 0.11em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit small { letter-spacing: 0.05em; } } /* Blue Sprig — Cobalt Porcelain Countdown Cartouche */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] { /* Optical correction within the raster shell and its baked separator band. */ --blue-sprig-countdown-optical-offset-y: -3%; --blue-sprig-cartouche-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/cobalt-porcelain-countdown-cartouche/blue-sprig-cobalt-porcelain-countdown-cartouche-shell.png"); --blue-sprig-cartouche-ink: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 34rem); max-width: 34rem; aspect-ratio: 941 / 651; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-cartouche-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-cartouche-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-kicker { position: absolute; top: 39%; left: 14%; width: 72%; margin: 0; overflow: hidden; color: var(--blue-sprig-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(8px, 2.9cqi, 15px); font-weight: 600; letter-spacing: 0.14em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; margin: 0; padding: 0; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit { --blue-sprig-cartouche-unit-center-x: 50%; position: absolute; top: calc(63% + var(--blue-sprig-countdown-optical-offset-y)); left: var(--blue-sprig-cartouche-unit-center-x); display: grid; min-width: 0; width: 13.4%; height: 23%; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 1.5cqi; padding: 0; transform: translate(-50%, -50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit:nth-child(1) { /* Physical shell compartments, optically balanced against baked dividers. Keep the reversed RTL assignments below on these same anchors. */ --blue-sprig-cartouche-unit-center-x: 28.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-cartouche-unit-center-x: 44.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-cartouche-unit-center-x: 60.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-cartouche-unit-center-x: 75.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit strong { max-width: 100%; overflow: visible; color: var(--blue-sprig-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(23px, 8.2cqi, 43px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.035em; line-height: 0.88; text-shadow: 0 0.025em 0 rgba(255, 255, 255, 0.7); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit small { max-width: 100%; overflow: hidden; color: var(--blue-sprig-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 2.1cqi, 11px); font-weight: 600; letter-spacing: 0.1em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"][dir="rtl"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.02em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-cartouche-unit-center-x: 75.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-cartouche-unit-center-x: 60.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-cartouche-unit-center-x: 44.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-cartouche-unit-center-x: 28.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; top: 56%; left: 24%; display: grid; width: 52%; height: 17%; place-items: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { color: var(--blue-sprig-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(14px, 4cqi, 21px); font-weight: 500; line-height: 1; text-align: center; } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-kicker { letter-spacing: 0.08em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit small { letter-spacing: 0.05em; } } /* Blue Sprig — Cobalt Sprig Porcelain Quartet */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] { --cobalt-sprig-quartet-top-crest: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/cobalt-sprig-porcelain-quartet/cobalt-sprig-porcelain-quartet-top-crest.png"); --cobalt-sprig-quartet-counter-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/cobalt-sprig-porcelain-quartet/cobalt-sprig-porcelain-quartet-counter-shell.png"); --cobalt-sprig-quartet-botanical-cross: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/cobalt-sprig-porcelain-quartet/cobalt-sprig-porcelain-quartet-botanical-cross.png"); --cobalt-sprig-quartet-bottom-crest: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/cobalt-sprig-porcelain-quartet/cobalt-sprig-porcelain-quartet-bottom-crest.png"); --cobalt-sprig-quartet-ink: #173c6d; --cobalt-sprig-quartet-gold: #c0a05e; position: relative; display: block; box-sizing: border-box; width: min(100%, 27rem); max-width: 27rem; aspect-ratio: 1122 / 1402; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; color: var(--cobalt-sprig-quartet-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-ornament { position: absolute; z-index: 3; display: block; margin: 0; background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 0.9cqi 0.8cqi rgba(42, 57, 71, 0.12)); pointer-events: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-ornament-before { top: 0.5%; left: 7%; width: 86%; height: 15.5%; background-image: var(--cobalt-sprig-quartet-top-crest); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-ornament-after { right: 16%; bottom: 0.4%; left: 16%; width: 68%; height: 11.5%; background-image: var(--cobalt-sprig-quartet-bottom-crest); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-kicker { position: absolute; z-index: 4; top: 17.4%; left: 8%; display: grid; width: 84%; height: 5.2%; margin: 0; place-items: start center; overflow: visible; color: var(--cobalt-sprig-quartet-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(8px, 2.85cqi, 12.3px); font-weight: 600; letter-spacing: 0.22em; line-height: 1; text-align: center; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-kicker::after { position: absolute; top: 2.15em; left: 50%; width: 48%; height: 1px; background: radial-gradient( circle at 1px 50%, var(--cobalt-sprig-quartet-gold) 0 1.2px, transparent 1.4px ), radial-gradient( circle at calc(100% - 1px) 50%, var(--cobalt-sprig-quartet-gold) 0 1.2px, transparent 1.4px ), linear-gradient( 90deg, transparent 0 2%, var(--cobalt-sprig-quartet-gold) 5% 95%, transparent 98% 100% ); content: ""; opacity: 0.9; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-units { position: absolute; z-index: 1; top: 23%; left: 2%; display: grid; width: 96%; height: 63%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); direction: ltr; gap: 0; margin: 0; padding: 0; background: var(--cobalt-sprig-quartet-botanical-cross) center / 91% 91% no-repeat; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-unit { position: relative; z-index: 2; display: grid; box-sizing: border-box; min-width: 0; height: 100%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.25cqi; /* Center each live pair within its own medallion; keep the raster fixed. */ padding: 0 7%; background: var(--cobalt-sprig-quartet-counter-shell) center / contain no-repeat; filter: drop-shadow(0 1.15cqi 1.05cqi rgba(45, 55, 64, 0.16)); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-unit strong { display: block; width: 100%; max-width: 100%; overflow: visible; color: var(--cobalt-sprig-quartet-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(32px, 10.8cqi, 46px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.025em; line-height: 0.84; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.8), 0 0.035em 0.055em rgba(22, 61, 111, 0.16); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-unit small { display: block; width: 100%; max-width: 100%; overflow: hidden; color: var(--cobalt-sprig-quartet-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(8px, 2.6cqi, 11.2px); font-weight: 600; letter-spacing: 0.16em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"][dir="rtl"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.015em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-kicker { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 2; top: 28%; left: 24%; display: grid; box-sizing: border-box; width: 52%; aspect-ratio: 1; margin: 0; padding: 12%; place-items: center; background: var(--cobalt-sprig-quartet-counter-shell) center / contain no-repeat; filter: drop-shadow(0 1.15cqi 1.05cqi rgba(45, 55, 64, 0.16)); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { color: var(--cobalt-sprig-quartet-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.8cqi, 21px); font-weight: 500; line-height: 1.08; text-align: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] { width: min(100%, 70px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-kicker { letter-spacing: 0.16em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-unit small { letter-spacing: 0.09em; } } /* Blue Sprig — Four-Panel Porcelain Rail */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/blue-sprig-four-panel-porcelain-rail/blue-sprig-four-panel-porcelain-rail-shell-mask.svg"); /* Optical correction within the raster shell and its baked separator band. */ --blue-sprig-countdown-optical-offset-y: -4%; --blue-sprig-four-panel-rail-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/blue-sprig-four-panel-porcelain-rail/blue-sprig-four-panel-porcelain-rail-shell.png"); --blue-sprig-four-panel-rail-ink: #173c6d; --blue-sprig-four-panel-rail-label: #8a6b43; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1862 / 845; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background-color: transparent; background-image: var(--blue-sprig-four-panel-rail-shell); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; color: var(--blue-sprig-four-panel-rail-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-unit { --blue-sprig-four-panel-rail-unit-center-x: 50%; position: absolute; top: calc(39% + var(--blue-sprig-countdown-optical-offset-y)); left: var(--blue-sprig-four-panel-rail-unit-center-x); display: grid; box-sizing: border-box; width: 15.2%; height: 24.5%; grid-template-rows: auto auto; place-content: start center; justify-items: center; gap: 1.5cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-unit:nth-child(1) { /* Physical shell compartments, optically balanced against baked dividers. Keep the reversed RTL assignments below on these same anchors. */ --blue-sprig-four-panel-rail-unit-center-x: 24.4%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-four-panel-rail-unit-center-x: 41.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-four-panel-rail-unit-center-x: 58.9%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-four-panel-rail-unit-center-x: 75.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-four-panel-rail-unit-center-x: 75.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-four-panel-rail-unit-center-x: 58.9%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-four-panel-rail-unit-center-x: 41.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-four-panel-rail-unit-center-x: 24.4%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-four-panel-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(24px, 8.4cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.025em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.78); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-four-panel-rail-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 2cqi, 13px); font-weight: 600; letter-spacing: 0.11em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][dir="rtl"] .event-details-v2-time-left-unit strong { direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 39%; left: 18%; display: grid; width: 64%; height: 22%; margin: 0; place-items: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { color: var(--blue-sprig-four-panel-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(14px, 4.2cqi, 28px); font-weight: 500; line-height: 1.1; text-align: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"] .event-details-v2-time-left-unit small { letter-spacing: 0.06em; } } /* Blue Sprig — Reference-Matched Porcelain Floral Rail Countdown */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/reference-matched-porcelain-floral-rail-countdown/blue-sprig-reference-matched-porcelain-floral-rail-countdown-shell-mask.svg"); /* Optical correction within the raster shell and its baked separator band. */ --blue-sprig-countdown-optical-offset-y: -2%; --blue-sprig-reference-floral-rail-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/reference-matched-porcelain-floral-rail-countdown/blue-sprig-reference-matched-porcelain-floral-rail-countdown-shell.png"); --blue-sprig-reference-floral-rail-ink: #173c6d; --blue-sprig-reference-floral-rail-label: #705a32; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1728 / 910; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-reference-floral-rail-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-reference-floral-rail-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-kicker { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-unit { --blue-sprig-reference-floral-rail-unit-center-x: 50%; position: absolute; top: calc(38% + var(--blue-sprig-countdown-optical-offset-y)); left: var(--blue-sprig-reference-floral-rail-unit-center-x); display: grid; box-sizing: border-box; width: 15.2%; height: 30%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.45cqi; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-reference-floral-rail-unit-center-x: 22%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-reference-floral-rail-unit-center-x: 41%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-reference-floral-rail-unit-center-x: 59%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-reference-floral-rail-unit-center-x: 78%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-reference-floral-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(25px, 7.6cqi, 50px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.035em; line-height: 0.84; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.84), 0 0.035em 0.055em rgba(23, 60, 109, 0.14); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-reference-floral-rail-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(7px, 1.65cqi, 11px); font-weight: 500; letter-spacing: 0.115em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.015em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; top: 43%; left: 20%; display: grid; box-sizing: border-box; width: 60%; height: 15%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-reference-floral-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.2cqi, 28px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] .event-details-v2-time-left-unit small { letter-spacing: 0.06em; } } /* Blue Sprig — Ornate Oval Countdown Cartouche */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/blue-sprig-ornate-oval-countdown-cartouche/blue-sprig-ornate-oval-countdown-cartouche-shell-mask.svg"); --blue-sprig-ornate-oval-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/blue-sprig-ornate-oval-countdown-cartouche/blue-sprig-ornate-oval-countdown-cartouche-shell.png"); --blue-sprig-ornate-oval-ink: #173c6d; --blue-sprig-ornate-oval-label: #8a6b43; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1586 / 992; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-ornate-oval-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-ornate-oval-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit { --blue-sprig-ornate-oval-unit-center-x: 50%; position: absolute; top: 52.5%; left: var(--blue-sprig-ornate-oval-unit-center-x); display: grid; box-sizing: border-box; width: 14.2%; height: 21%; grid-template-rows: auto auto; place-content: center; justify-items: center; gap: 1.15cqi; min-width: 0; padding: 0; transform: translate(-50%, -50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(1) { /* Physical shell compartments, optically balanced against baked dividers. Keep the reversed RTL assignments below on these same anchors. */ --blue-sprig-ornate-oval-unit-center-x: 25.45%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-ornate-oval-unit-center-x: 42%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-ornate-oval-unit-center-x: 57.9%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-ornate-oval-unit-center-x: 75.25%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-ornate-oval-unit-center-x: 75.25%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-ornate-oval-unit-center-x: 57.9%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-ornate-oval-unit-center-x: 42%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-ornate-oval-unit-center-x: 25.45%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-ornate-oval-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(24px, 8.6cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.025em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.78); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-ornate-oval-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 2cqi, 13px); font-weight: 600; letter-spacing: 0.11em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 43%; left: 22%; display: grid; width: 56%; height: 16%; margin: 0; place-items: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { color: var(--blue-sprig-ornate-oval-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(14px, 4.2cqi, 28px); font-weight: 500; line-height: 1.1; text-align: center; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit small { letter-spacing: 0.06em; } } /* Blue Sprig — Reference-Matched Opaque Scalloped Cobalt Cartouche */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/reference-matched-opaque-scalloped-cobalt-cartouche/blue-sprig-reference-matched-opaque-scalloped-cobalt-cartouche-shell-mask.svg"); /* Optical correction within the raster shell and its baked separator band. */ --blue-sprig-countdown-optical-offset-y: -13%; --blue-sprig-opaque-cartouche-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/reference-matched-opaque-scalloped-cobalt-cartouche/blue-sprig-reference-matched-opaque-scalloped-cobalt-cartouche-shell.png"); --blue-sprig-opaque-cartouche-ink: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1619 / 972; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background-color: transparent; background-image: var(--blue-sprig-opaque-cartouche-shell); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; color: var(--blue-sprig-opaque-cartouche-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-unit { --blue-sprig-opaque-cartouche-unit-center-x: 50%; position: absolute; top: calc(53.5% + var(--blue-sprig-countdown-optical-offset-y)); left: var(--blue-sprig-opaque-cartouche-unit-center-x); display: grid; box-sizing: border-box; width: 14.8%; height: 24%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.25cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-unit:nth-child(1) { /* Physical shell compartments, optically balanced against baked dividers. Keep the reversed RTL assignments below on these same anchors. */ --blue-sprig-opaque-cartouche-unit-center-x: 24.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-opaque-cartouche-unit-center-x: 43.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-opaque-cartouche-unit-center-x: 59.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-opaque-cartouche-unit-center-x: 76.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-opaque-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(24px, 8cqi, 56px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.025em; line-height: 0.84; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.84), 0 0.035em 0.055em rgba(23, 60, 109, 0.12); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-opaque-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 1.95cqi, 12px); font-weight: 600; letter-spacing: 0.14em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-opaque-cartouche-unit-center-x: 76.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-opaque-cartouche-unit-center-x: 59.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-opaque-cartouche-unit-center-x: 43.1%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-opaque-cartouche-unit-center-x: 24.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][dir="rtl"] .event-details-v2-time-left-unit small { direction: rtl; font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.1em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; top: 43%; left: 20%; display: grid; box-sizing: border-box; width: 60%; height: 17%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-opaque-cartouche-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.4cqi, 29px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][data-event-details-v2-time-left-complete="true"][dir="rtl"] .event-details-v2-time-left-message strong { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"] .event-details-v2-time-left-unit small { letter-spacing: 0.06em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.04em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"][dir="rtl"] .event-details-v2-time-left-unit small { letter-spacing: 0.005em; } } /* Blue Sprig — Opaque Floral Cartouche Rail */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/opaque-floral-cartouche-rail/blue-sprig-opaque-floral-cartouche-rail-shell-mask.svg"); --blue-sprig-opaque-floral-rail-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/opaque-floral-cartouche-rail/blue-sprig-opaque-floral-cartouche-rail-shell.png"); --blue-sprig-opaque-floral-rail-ink: #173c6d; --blue-sprig-opaque-floral-rail-label: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1871 / 840; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-opaque-floral-rail-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-opaque-floral-rail-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-unit { --blue-sprig-opaque-floral-rail-unit-center-x: 50%; position: absolute; top: 39%; left: var(--blue-sprig-opaque-floral-rail-unit-center-x); display: grid; box-sizing: border-box; width: 15.2%; height: 23%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.15cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-opaque-floral-rail-unit-center-x: 25.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-opaque-floral-rail-unit-center-x: 41.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-opaque-floral-rail-unit-center-x: 58.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-opaque-floral-rail-unit-center-x: 75.2%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-opaque-floral-rail-unit-center-x: 75.2%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-opaque-floral-rail-unit-center-x: 58.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-opaque-floral-rail-unit-center-x: 41.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-opaque-floral-rail-unit-center-x: 25.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-opaque-floral-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(23px, 8.8cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.86), 0 0.035em 0.055em rgba(23, 60, 109, 0.12); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-opaque-floral-rail-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 1.85cqi, 12px); font-weight: 600; letter-spacing: 0.1em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][dir="rtl"] .event-details-v2-time-left-unit strong { direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.08em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 40%; left: 18%; display: grid; box-sizing: border-box; width: 64%; height: 20%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-opaque-floral-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.4cqi, 29px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][data-event-details-v2-time-left-complete="true"][dir="rtl"] .event-details-v2-time-left-message strong { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"] .event-details-v2-time-left-unit small { letter-spacing: 0.055em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.04em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"][dir="rtl"] .event-details-v2-time-left-unit small { letter-spacing: 0.005em; } } /* Blue Sprig — Exact Scalloped Cobalt Floral Rail */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/exact-scalloped-cobalt-floral-rail/blue-sprig-exact-scalloped-cobalt-floral-rail-shell-mask.svg"); --blue-sprig-exact-scalloped-floral-rail-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/exact-scalloped-cobalt-floral-rail/blue-sprig-exact-scalloped-cobalt-floral-rail-shell.png"); --blue-sprig-exact-scalloped-floral-rail-ink: #173c6d; --blue-sprig-exact-scalloped-floral-rail-label: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1866 / 843; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-exact-scalloped-floral-rail-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-exact-scalloped-floral-rail-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-unit { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 50%; position: absolute; top: 39%; left: var(--blue-sprig-exact-scalloped-floral-rail-unit-center-x); display: grid; box-sizing: border-box; width: 15.2%; height: 23%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.15cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 25.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 41.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 58.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 75.2%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 75.2%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 58.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 41.8%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-exact-scalloped-floral-rail-unit-center-x: 25.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-exact-scalloped-floral-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(23px, 8.8cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.86), 0 0.035em 0.055em rgba(23, 60, 109, 0.12); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-exact-scalloped-floral-rail-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 1.85cqi, 12px); font-weight: 600; letter-spacing: 0.1em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][dir="rtl"] .event-details-v2-time-left-unit strong { direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.08em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 40%; left: 18%; display: grid; box-sizing: border-box; width: 64%; height: 20%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-exact-scalloped-floral-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.4cqi, 29px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][data-event-details-v2-time-left-complete="true"][dir="rtl"] .event-details-v2-time-left-message strong { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"] .event-details-v2-time-left-unit small { letter-spacing: 0.055em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.04em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"][dir="rtl"] .event-details-v2-time-left-unit small { letter-spacing: 0.005em; } } /* Blue Sprig — Reference-Matched Porcelain Floral Capsule Countdown */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/reference-matched-porcelain-floral-capsule-countdown/blue-sprig-reference-matched-porcelain-floral-capsule-countdown-shell-mask.svg"); --blue-sprig-floral-capsule-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/reference-matched-porcelain-floral-capsule-countdown/blue-sprig-reference-matched-porcelain-floral-capsule-countdown-shell.png"); --blue-sprig-floral-capsule-ink: #173c6d; --blue-sprig-floral-capsule-label: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1863 / 844; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-floral-capsule-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-floral-capsule-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit { --blue-sprig-floral-capsule-unit-center-x: 50%; position: absolute; top: 39%; left: var(--blue-sprig-floral-capsule-unit-center-x); display: grid; box-sizing: border-box; width: 15.2%; height: 23%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.15cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-floral-capsule-unit-center-x: 26%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-floral-capsule-unit-center-x: 41.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-floral-capsule-unit-center-x: 58.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-floral-capsule-unit-center-x: 74%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-floral-capsule-unit-center-x: 74%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-floral-capsule-unit-center-x: 58.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-floral-capsule-unit-center-x: 41.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-floral-capsule-unit-center-x: 26%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-floral-capsule-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(23px, 8.8cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.86), 0 0.035em 0.055em rgba(23, 60, 109, 0.12); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-floral-capsule-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 1.85cqi, 12px); font-weight: 600; letter-spacing: 0.1em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][dir="rtl"] .event-details-v2-time-left-unit strong { direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.08em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 40%; left: 18%; display: grid; box-sizing: border-box; width: 64%; height: 20%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-floral-capsule-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.4cqi, 29px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][data-event-details-v2-time-left-complete="true"][dir="rtl"] .event-details-v2-time-left-message strong { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit small { letter-spacing: 0.055em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.04em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"][dir="rtl"] .event-details-v2-time-left-unit small { letter-spacing: 0.005em; } } /* Blue Sprig — Reference-Matched Opaque Four-Ring Countdown Cartouche */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] { --blue-sprig-countdown-silhouette: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/reference-matched-opaque-four-ring-countdown-cartouche/blue-sprig-reference-matched-opaque-four-ring-countdown-cartouche-shell-mask.svg"); --blue-sprig-reference-four-ring-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/reference-matched-opaque-four-ring-countdown-cartouche/blue-sprig-reference-matched-opaque-four-ring-countdown-cartouche-shell.png"); --blue-sprig-reference-four-ring-ink: #173c6d; --blue-sprig-reference-four-ring-label: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1879 / 837; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-reference-four-ring-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-reference-four-ring-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-unit { --blue-sprig-reference-four-ring-unit-center-x: 50%; position: absolute; top: 38.5%; left: var(--blue-sprig-reference-four-ring-unit-center-x); display: grid; box-sizing: border-box; width: 15.4%; height: 24%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.05cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-reference-four-ring-unit-center-x: 23.6%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-reference-four-ring-unit-center-x: 41.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-reference-four-ring-unit-center-x: 58.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-reference-four-ring-unit-center-x: 76.2%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-reference-four-ring-unit-center-x: 76.2%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-reference-four-ring-unit-center-x: 58.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-reference-four-ring-unit-center-x: 41.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-reference-four-ring-unit-center-x: 23.6%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-reference-four-ring-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(21px, 8.6cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.86), 0 0.035em 0.055em rgba(23, 60, 109, 0.12); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-reference-four-ring-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 1.85cqi, 12px); font-weight: 600; letter-spacing: 0.1em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit strong { direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit small { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.08em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 39%; left: 18%; display: grid; box-sizing: border-box; width: 64%; height: 21%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-reference-four-ring-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.4cqi, 29px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][data-event-details-v2-time-left-complete="true"][dir="rtl"] .event-details-v2-time-left-message strong { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"] .event-details-v2-time-left-unit small { letter-spacing: 0.055em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.04em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"][dir="rtl"] .event-details-v2-time-left-unit small { letter-spacing: 0.005em; } } /* Blue Sprig — Faithful Scalloped Floral Rail */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] { --blue-sprig-faithful-scalloped-rail-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/event-details-v2/time-left/blue-sprig-faithful-scalloped-floral-rail/blue-sprig-faithful-scalloped-floral-rail-shell.png"); --blue-sprig-faithful-scalloped-rail-ink: #173c6d; --blue-sprig-faithful-scalloped-rail-label: #173c6d; position: relative; display: block; box-sizing: border-box; width: min(100%, 42rem); max-width: 42rem; aspect-ratio: 1959 / 803; min-height: 0; margin-inline: auto; padding: 0; overflow: visible; background: var(--blue-sprig-faithful-scalloped-rail-shell) center / 100% 100% no-repeat; color: var(--blue-sprig-faithful-scalloped-rail-ink); container-type: inline-size; isolation: isolate; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-ornament, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-kicker, .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-message { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-units { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-unit { --blue-sprig-faithful-scalloped-rail-unit-center-x: 50%; position: absolute; top: 39%; left: var(--blue-sprig-faithful-scalloped-rail-unit-center-x); display: grid; box-sizing: border-box; width: 15.2%; height: 24%; grid-template-rows: auto auto; place-content: center; align-items: center; justify-items: center; gap: 1.05cqi; min-width: 0; padding: 0; transform: translateX(-50%); } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-faithful-scalloped-rail-unit-center-x: 25.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-faithful-scalloped-rail-unit-center-x: 41.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-faithful-scalloped-rail-unit-center-x: 58.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-faithful-scalloped-rail-unit-center-x: 74.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-unit strong { display: block; max-width: 100%; overflow: visible; color: var(--blue-sprig-faithful-scalloped-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(21px, 8.7cqi, 58px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; line-height: 0.82; text-align: center; text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.88), 0 0.035em 0.055em rgba(23, 60, 109, 0.12); white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-unit small { display: block; max-width: 100%; overflow: hidden; color: var(--blue-sprig-faithful-scalloped-rail-label); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(6px, 1.85cqi, 12px); font-weight: 600; letter-spacing: 0.095em; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(1) { --blue-sprig-faithful-scalloped-rail-unit-center-x: 74.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(2) { --blue-sprig-faithful-scalloped-rail-unit-center-x: 58.3%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(3) { --blue-sprig-faithful-scalloped-rail-unit-center-x: 41.7%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][dir="rtl"] .event-details-v2-time-left-unit:nth-child(4) { --blue-sprig-faithful-scalloped-rail-unit-center-x: 25.5%; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][dir="rtl"] .event-details-v2-time-left-unit { direction: rtl; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][dir="rtl"] .event-details-v2-time-left-unit strong { direction: ltr; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][dir="rtl"] .event-details-v2-time-left-unit small { direction: rtl; font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; letter-spacing: 0.01em; text-transform: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.075em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-units { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message { position: absolute; z-index: 1; top: 39%; left: 17%; display: grid; box-sizing: border-box; width: 66%; height: 21%; margin: 0; place-items: center; overflow: hidden; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message strong { max-width: 100%; overflow: hidden; color: var(--blue-sprig-faithful-scalloped-rail-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(15px, 4.4cqi, 29px); font-weight: 500; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][data-event-details-v2-time-left-complete="true"] .event-details-v2-time-left-message small { display: none; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][data-event-details-v2-time-left-complete="true"][dir="rtl"] .event-details-v2-time-left-message strong { font-family: "Noto Naskh Arabic", var(--invitation-font-body), serif; } .builder-event-details-v2-time-left-thumbnail-canvas .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] { width: min(100%, 84px); } @media (max-width: 380px) { .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"] .event-details-v2-time-left-unit small { letter-spacing: 0.055em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][lang="ms"] .event-details-v2-time-left-unit small { letter-spacing: 0.04em; } .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulScallopedFloralRail"][dir="rtl"] .event-details-v2-time-left-unit small { letter-spacing: 0.005em; } } /* Opaque source canvases use a matching exterior silhouette. Both layers share the full raster coordinate system, so builder scaling and optical anchors stay unchanged. Native-alpha shells need no mask. */ .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFourPanelPorcelainRail"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactScallopedCobaltFloralRail"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOpaqueFloralCartoucheRail"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueFourRingCountdownCartouche"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedOpaqueScallopedCobaltCartouche"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"], .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralRailCountdown"] { -webkit-mask: var(--blue-sprig-countdown-silhouette) center / 100% 100% no-repeat; mask: var(--blue-sprig-countdown-silhouette) center / 100% 100% no-repeat; } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques { --blue-sprig-response-ink: #234b78; --blue-sprig-response-muted-ink: #7290b0; --blue-sprig-response-gold: #c1a05e; --blue-sprig-response-plaque: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/cobalt-garden-plaques/blue-sprig-cobalt-garden-plaque.png"); container-type: inline-size; gap: clamp(10px, 2.8cqi, 18px); padding: 2px 0 clamp(6px, 1.8cqi, 12px); text-align: center; } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques > p { margin: 0; color: var(--blue-sprig-response-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.74em, 2.8cqi, 1em); font-weight: 500; letter-spacing: 0.18em; line-height: 1.15; text-transform: uppercase; } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques { width: min(100%, 430px); justify-self: center; grid-template-columns: minmax(0, 1fr) !important; gap: clamp(8px, 2.8cqi, 16px); } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > button { display: grid; min-height: clamp(74px, 18cqi, 112px) !important; aspect-ratio: 1942 / 809; place-items: center; padding: 16px 18% !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-plaque) !important; background-position: center !important; background-repeat: no-repeat; background-size: 100% 100% !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; filter: drop-shadow(0 7px 6px rgba(53, 46, 39, 0.16)); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 2.6cqi, 1.02em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.15; text-align: center; text-transform: uppercase; text-wrap: balance; transition: filter 160ms ease, transform 160ms ease; } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > button:first-child, .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > button.selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > button:hover { filter: saturate(1.04) brightness(1.02) drop-shadow(0 7px 6px rgba(53, 46, 39, 0.16)); } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > button.selected { transform: translateY(-1px); } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: 3px; } .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques { gap: 4px; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques > span:first-child { color: var(--blue-sprig-response-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: 7px; letter-spacing: 0.12em; line-height: 1.1; text-transform: uppercase; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques { width: 100%; gap: 3px; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > span { display: grid; min-height: 25px !important; aspect-ratio: 1942 / 809; place-items: center; padding: 10px 18% !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-plaque) !important; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; color: var(--blue-sprig-response-muted-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: 5px; letter-spacing: 0.08em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: balance; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > span:first-child, .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > span.selected { color: var(--blue-sprig-response-ink); } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigCobaltGardenPlaques .rsvp-v2-options-blueSprigCobaltGardenPlaques > button { transition: none; } } .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #7394ba; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-plaque: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/cobalt-porcelain-twin-plaques/blue-sprig-cobalt-porcelain-twin-plaque.png"); container-type: inline-size; gap: clamp(10px, 2.8cqi, 18px); padding: 2px 0 clamp(6px, 1.8cqi, 12px); text-align: center; } .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques { width: min(100%, 430px); justify-self: center; grid-template-columns: minmax(0, 1fr) !important; gap: clamp(2px, 1.4cqi, 6px); } .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > button { display: grid; min-height: 0 !important; aspect-ratio: 2017 / 560; place-items: center; padding: 12px 18% !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-plaque) !important; background-position: center; background-repeat: no-repeat; background-size: 100% 100% !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; filter: drop-shadow(0 7px 6px rgba(53, 46, 39, 0.16)); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 2.6cqi, 1.02em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.15; text-align: center; text-transform: uppercase; text-wrap: balance; transition: filter 160ms ease, transform 160ms ease; } .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > button:first-child, .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > button.selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > button:hover { filter: saturate(1.04) brightness(1.02) drop-shadow(0 7px 6px rgba(53, 46, 39, 0.16)); } .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > button.selected { transform: translateY(-1px); } .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: 3px; } .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques { width: 100%; gap: 2px; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > span { display: grid; height: auto !important; min-height: 0 !important; aspect-ratio: 2017 / 560; place-items: center; padding: 8px 18% !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-plaque) !important; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; color: var(--blue-sprig-response-muted-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: 5px; letter-spacing: 0.08em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: balance; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > span:first-child, .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > span.selected { color: var(--blue-sprig-response-ink); } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigCobaltPorcelainTwinPlaques .rsvp-v2-options-blueSprigCobaltPorcelainTwinPlaques > button { transition: none; } } /* * Reference-matched Blue Sprig response block. * * The shell is one transparent artboard containing both stacked plaques and * their gold dividers. The two buttons remain live HTML so translated or * customized attendance labels never become part of the image asset. */ .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques { --blue-sprig-response-ink: #1d4d89; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-reference-button-gap: 12px; --blue-sprig-response-shell: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/porcelain-relief-twin-plaques/blue-sprig-porcelain-relief-twin-plaques-shell.png"); container-type: inline-size; gap: 0 !important; padding: 0 !important; text-align: center; } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques > p { display: none; } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques { width: min(100%, 430px); min-width: 0; justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; aspect-ratio: 1886 / 834; background-color: transparent !important; background-image: none !important; filter: drop-shadow(0 5px 5px rgba(53, 46, 39, 0.13)); } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button { z-index: 1; display: grid; min-width: 0; min-height: 0 !important; height: 100%; align-self: stretch; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: var(--blue-sprig-response-shell) !important; background-position: center top !important; background-repeat: no-repeat; background-size: 100% 200% !important; color: var(--blue-sprig-response-ink) !important; appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.82em, 3.35cqi, 1.08em); font-weight: 500; letter-spacing: 0.14em; line-height: 1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease; } /* The artwork already contains both rows. Keep the standard 12px spacing * pixel-matched, then apply only the user's spacing delta to the second row. */ .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button + button { background-position: center bottom !important; margin-block-start: calc( var(--rsvp-v2-response-button-gap) - var(--blue-sprig-response-reference-button-gap) ) !important; } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button > .rsvp-v2-response-label { display: block; width: 100%; max-width: 100%; margin-inline: auto; transform: none !important; white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button:first-child > .rsvp-v2-response-label { transform: translateY(1.13cqi) !important; } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button:nth-child(2) > .rsvp-v2-response-label { transform: translateY(-1.13cqi) !important; } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button:hover { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button.selected { transform: none !important; } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: 3px; } .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques { width: 100%; aspect-ratio: 1886 / 834; gap: 0; background-color: transparent !important; background-image: var(--blue-sprig-response-shell) !important; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; filter: drop-shadow(0 2px 2px rgba(53, 46, 39, 0.13)); } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > span { display: grid; min-width: 0; min-height: 0 !important; height: 100%; align-self: stretch; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; color: var(--blue-sprig-response-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: 5px; font-weight: 500; letter-spacing: 0.07em; line-height: 1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > span > .rsvp-v2-response-label { display: block; width: 100%; max-width: 100%; margin-inline: auto; transform: none !important; white-space: nowrap; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > span:first-child > .rsvp-v2-response-label { transform: translateY(1.13cqi) !important; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > span:nth-child(2) > .rsvp-v2-response-label { transform: translateY(-1.13cqi) !important; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigPorcelainReliefTwinPlaques .rsvp-v2-options-blueSprigPorcelainReliefTwinPlaques > button { transition: none; } } /* Reference-faithful Cobalt Twin-Rail Plaques. The approved shell is split * into two CSS-cropped live rows so spacing can move the artwork and labels * together without baking the editable text into the raster. */ .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #7394ba; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-reference-button-gap: 12px; --blue-sprig-response-twin-rail-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/reference-matched-cobalt-twin-rail/blue-sprig-reference-matched-cobalt-twin-rail-shell.png"); container-type: inline-size; gap: 0; padding: 0; text-align: center; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques { display: grid; width: min(100%, 430px); aspect-ratio: auto; justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, auto); align-items: start; gap: 0 !important; margin: 0; padding: 0; overflow: visible; background-color: transparent !important; background-image: none !important; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > :is(button, span) { display: grid; position: relative; min-width: 0; min-height: 0 !important; height: auto !important; aspect-ratio: 3356 / 937; place-items: center; box-sizing: border-box; width: 100%; margin-inline: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-twin-rail-art) !important; background-position: center top !important; background-repeat: no-repeat; background-size: 100% 200% !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 3.5cqi, 1em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease, opacity 160ms ease; } /* The options are exact half-artboard rows. These percentages map the live * label centers to the approved 1678 × 937 reference: Attending center is * 57.95% down the upper row, and Not Attending center is 24.55% down the * lower row. */ .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > :is(button, span)[data-rsvp-v2-response-option="attending"] > .rsvp-v2-response-label { position: absolute; top: 57.95%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > :is(button, span)[data-rsvp-v2-response-option="declined"] > .rsvp-v2-response-label { position: absolute; top: 24.55%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } /* Use the top and bottom halves of the same shell on movable live rows. The * standard 12px control value represents the shell's baked-in reference gap; * custom values apply only the delta so the default remains pixel-matched. */ .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > :is(button, span) + :is(button, span) { margin-block-start: calc( var(--rsvp-v2-response-button-gap) - var(--blue-sprig-response-reference-button-gap) ) !important; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > :is(button, span)[data-rsvp-v2-response-option="declined"] { background-position: center bottom !important; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > :is(button, span):first-child, .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > :is(button, span).selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > button:disabled { cursor: not-allowed; filter: saturate(0.78) opacity(0.58); } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: -2px; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > button[data-rsvp-v2-response-option][disabled] { cursor: not-allowed; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques { width: 100%; } /* The shared theme-thumbnail normalizer assumes one complete artwork per * option. This variant intentionally crops one stacked sprite into two rows, * so retain the authored half-shell crop in the picker. */ .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > span { background-size: 100% 200% !important; } .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques[data-rsvp-v2-preview-spacing="normalized"] > span + span { margin-block-start: 0 !important; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltTwinRailPlaques .rsvp-v2-options-blueSprigReferenceFaithfulCobaltTwinRailPlaques > :is(button, span) { transition: none; } } /* Reference-Matched Ornate Twin Plaques. Keep the approved two-row artwork * intact and position only the live English response labels in its open * porcelain panels. */ .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #173c6d; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-twin-rail-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/reference-matched-ornate-twin-plaques/blue-sprig-reference-matched-ornate-twin-plaques.png"); container-type: inline-size; gap: 0; padding: 0; text-align: center; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques { display: grid; width: min(100%, 430px); aspect-ratio: 1774 / 887; justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, auto); gap: 0 !important; margin: 0; padding: 0; overflow: visible; background-color: transparent !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > :is(button, span) { display: grid; position: relative; aspect-ratio: 4 / 1; min-width: 0; min-height: 0 !important; height: auto !important; place-items: center; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-twin-rail-art) !important; background-position: center top !important; background-size: 100% 200% !important; background-repeat: no-repeat !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 3.5cqi, 1em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease, opacity 160ms ease; } /* Measured against the supplied 312 × 163 screenshot and mapped onto the * equal 1774 × 887 sprite rows: Attending's center is 54.60% into row one; * Not Attending's center is 40.49% into row two. */ .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > :is(button, span)[data-rsvp-v2-response-option="attending"] > .rsvp-v2-response-label { position: absolute; top: 54.6%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > :is(button, span) + :is(button, span) { /* Keep the artwork's baked inter-plaque gap as the baseline, then apply * the user's live spacing adjustment to the second choice. */ background-position: center bottom !important; margin-block-start: calc( var(--rsvp-v2-response-button-gap) + var(--rsvp-v2-response-collision-clearance) - var(--rsvp-v2-response-artwork-overlap) ) !important; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > :is(button, span)[data-rsvp-v2-response-option="declined"] > .rsvp-v2-response-label { position: absolute; top: 40.49%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > :is(button, span):first-child, .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > :is(button, span).selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > button:disabled { cursor: not-allowed; filter: saturate(0.78) opacity(0.58); } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: -2px; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > button[data-rsvp-v2-response-option][disabled] { cursor: not-allowed; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques { width: 100%; } /* Preserve the top/bottom sprite crop after the shared picker normalizer. */ .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > span { background-size: 100% 200% !important; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigReferenceMatchedOrnateTwinPlaques .rsvp-v2-options-blueSprigReferenceMatchedOrnateTwinPlaques > :is(button, span) { transition: none; } } /* Blue Sprig Floral Response Rails. The plaque shell is artwork-only; both * labels remain live HTML and share the same centered content anchor. */ .rsvp-v2-choice-preview-blueSprigFloralResponseRails { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #173c6d; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-plaque: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/floral-response-rails/blue-sprig-floral-response-rails-shell.png"); container-type: inline-size; gap: clamp(10px, 2.8cqi, 18px); padding: 2px 0 clamp(6px, 1.8cqi, 12px); text-align: center; } .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails { width: min(100%, 430px); justify-self: center; grid-template-columns: minmax(0, 1fr) !important; gap: clamp(8px, 3.8cqi, 17px); } .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button { display: grid; height: auto !important; min-height: 0 !important; aspect-ratio: 2110 / 457; place-items: center; box-sizing: border-box; padding: 0 18% !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-plaque) !important; background-position: center; background-repeat: no-repeat; background-size: 100% 100% !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; filter: drop-shadow(0 7px 6px rgba(53, 46, 39, 0.16)); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.82em, 2.8cqi, 1.04em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.15; text-align: center; text-transform: uppercase; text-wrap: balance; transition: filter 160ms ease, transform 160ms ease; } .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button > .rsvp-v2-response-label { display: block; position: relative; z-index: 1; width: 100%; max-width: 100%; margin: 0; transform: none; text-align: center; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button:first-child, .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button.selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02) drop-shadow(0 7px 6px rgba(53, 46, 39, 0.16)); } .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button.selected { transform: translateY(-1px); } .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: 3px; } .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigFloralResponseRails { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails { width: 100%; gap: 3px; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > span { display: grid; height: auto !important; min-height: 0 !important; aspect-ratio: 2110 / 457; place-items: center; box-sizing: border-box; padding: 0 18% !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-plaque) !important; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; color: var(--blue-sprig-response-muted-ink); font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: 5px; letter-spacing: 0.08em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: balance; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > span > .rsvp-v2-response-label { display: block; width: 100%; max-width: 100%; margin: 0; transform: none; text-align: center; white-space: normal; text-wrap: balance; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > span:first-child, .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > span.selected { color: var(--blue-sprig-response-ink); } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigFloralResponseRails .rsvp-v2-options-blueSprigFloralResponseRails > button { transition: none; } } /* Preserve the established selected-state lift without reintroducing an x-shift. */ /* Blue Sprig Exact Cobalt Twin Plaques. This transparent two-row artboard keeps * the supplied plaque geometry intact while the attendance labels remain live * HTML. The anchor percentages are calibrated to the supplied screenshot. */ .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #173c6d; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-exact-twin-plaque-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/reference-exact-cobalt-twin-plaques/blue-sprig-reference-exact-cobalt-twin-plaques-shell-geometry-locked.png"); container-type: inline-size; gap: 0; padding: 0; text-align: center; } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques { display: grid; width: min(100%, 430px); aspect-ratio: auto; justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, auto); align-items: start; gap: 0 !important; margin: 0; padding: 0; overflow: visible; background-color: transparent !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > :is(button, span) { display: grid; position: relative; min-width: 0; min-height: 0 !important; height: auto !important; aspect-ratio: 3334 / 943; place-items: center; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-exact-twin-plaque-art) !important; background-position: center top !important; background-size: 100% 200% !important; background-repeat: no-repeat !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 3.5cqi, 1em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease, opacity 160ms ease; } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > :is(button, span)[data-rsvp-v2-response-option="attending"] > .rsvp-v2-response-label { position: absolute; top: 54.5%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > :is(button, span) + :is(button, span) { background-position: center bottom !important; margin-block-start: calc( var(--rsvp-v2-response-button-gap) + var(--rsvp-v2-response-collision-clearance) - var(--rsvp-v2-response-artwork-overlap) ) !important; } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > :is(button, span)[data-rsvp-v2-response-option="declined"] > .rsvp-v2-response-label { position: absolute; top: 44.5%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > :is(button, span):first-child, .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > :is(button, span).selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > button:disabled { cursor: not-allowed; filter: saturate(0.78) opacity(0.58); } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: -2px; } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > button[data-rsvp-v2-response-option][disabled] { cursor: not-allowed; } .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques { width: 100%; } /* The shared picker normalizer compresses each theme option to one artwork * frame. This response uses one two-rail sprite per option, so keep the * picker crop on the same top/bottom frames as the live invitation. */ .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > span { background-position: center top !important; background-size: 100% 200% !important; } .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > span + span { background-position: center bottom !important; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigReferenceExactCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactCobaltTwinPlaques > :is(button, span) { transition: none; } } /* Blue Sprig Reference-Exact Ornate Cobalt Twin Plaques. This is the original * attached-reference sprite: two shallow ornate porcelain plaques with live * labels over the supplied relief artwork. Each row shows one half of the * 1572x1001 two-row sprite so the picker and invitation preserve the same * plaque geometry. */ .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #173c6d; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-exact-ornate-twin-plaque-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/reference-exact-cobalt-twin-plaques/blue-sprig-reference-exact-cobalt-twin-plaques-shell.png"); container-type: inline-size; gap: 0; padding: 0; text-align: center; } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques { display: grid; width: min(100%, 430px); aspect-ratio: auto; justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, auto); align-items: start; gap: 0 !important; margin: 0; padding: 0; overflow: visible; background-color: transparent !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > :is(button, span) { display: grid; position: relative; min-width: 0; min-height: 0 !important; height: auto !important; aspect-ratio: 3144 / 1001; place-items: center; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var( --blue-sprig-response-exact-ornate-twin-plaque-art ) !important; background-position: center top !important; background-size: 100% 200% !important; background-repeat: no-repeat !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 3.5cqi, 1em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease, opacity 160ms ease; } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > :is(button, span)[data-rsvp-v2-response-option="attending"] > .rsvp-v2-response-label { position: absolute; top: 54.5%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > :is(button, span) + :is(button, span) { background-position: center bottom !important; margin-block-start: calc( var(--rsvp-v2-response-button-gap) + var(--rsvp-v2-response-collision-clearance) - var(--rsvp-v2-response-artwork-overlap) ) !important; } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > :is(button, span)[data-rsvp-v2-response-option="declined"] > .rsvp-v2-response-label { position: absolute; top: 44.5%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > :is(button, span):first-child, .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > :is(button, span).selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > button:disabled { cursor: not-allowed; filter: saturate(0.78) opacity(0.58); } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: -2px; } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > button[data-rsvp-v2-response-option][disabled] { cursor: not-allowed; } .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques { width: 100%; } /* Keep the two sprite halves aligned when the shared picker normalizer renders * this theme-owned response as a thumbnail. */ .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > span { background-position: center top !important; background-size: 100% 200% !important; } .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > span + span { background-position: center bottom !important; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigReferenceExactOrnateCobaltTwinPlaques .rsvp-v2-options-blueSprigReferenceExactOrnateCobaltTwinPlaques > :is(button, span) { transition: none; } } /* Reference-Faithful Cobalt Botanical Twin Rails. The artwork is one * transparent two-rail shell, cropped into live rows so the editable labels * stay aligned with the porcelain while the response spacing control remains * functional. */ .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #173c6d; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-reference-button-gap: 12px; --blue-sprig-response-botanical-twin-rails-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/reference-faithful-cobalt-botanical-twin-rails/blue-sprig-reference-faithful-cobalt-botanical-twin-rails-shell.png"); container-type: inline-size; gap: 0; padding: 0; text-align: center; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails { display: grid; width: min(100%, 430px); aspect-ratio: auto; justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, auto); align-items: start; gap: 0 !important; margin: 0; padding: 0; overflow: visible; background-color: transparent !important; background-image: none !important; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span) { display: grid; position: relative; min-width: 0; min-height: 0 !important; height: auto !important; aspect-ratio: 3380 / 931; place-items: center; box-sizing: border-box; width: 100%; margin-inline: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var( --blue-sprig-response-botanical-twin-rails-art ) !important; background-position: center top !important; background-repeat: no-repeat !important; background-size: 100% 200% !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 3.72cqi, 1em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.15; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease, opacity 160ms ease; } /* These percentages are measured from the attached 391 × 221 screenshot: * the live ink centers sit at 51.13% of the upper crop and 40.72% of the * lower crop. Keeping symmetric inline bounds preserves the shared 50% axis * for both labels, including the wider “NOT ATTENDING” copy. */ .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span)[data-rsvp-v2-response-option="attending"] > .rsvp-v2-response-label { position: absolute; top: 51.13%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span)[data-rsvp-v2-response-option="declined"] > .rsvp-v2-response-label { position: absolute; top: 40.72%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } /* The artwork shell already contains the reference's small inter-rail gap; * custom values move only the second live row by the difference from 12px. */ .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span) + :is(button, span) { margin-block-start: calc( var(--rsvp-v2-response-button-gap) - var(--blue-sprig-response-reference-button-gap) ) !important; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span)[data-rsvp-v2-response-option="declined"] { background-position: center bottom !important; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span):first-child, .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span).selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > button:disabled { cursor: not-allowed; filter: saturate(0.78) opacity(0.58); } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: -2px; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > button[data-rsvp-v2-response-option][disabled] { cursor: not-allowed; } .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails { width: 100%; } /* The shared theme-thumbnail rule scales a normal single-artwork response * item to 100% 100%. This variant is a stacked shell, so the picker must * retain the same half-shell crop used by the live invitation. */ .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span) { background-size: 100% 200% !important; } .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span)[data-rsvp-v2-response-option="attending"] { background-position: center top !important; } .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span)[data-rsvp-v2-response-option="declined"] { background-position: center bottom !important; } .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails[data-rsvp-v2-preview-spacing="normalized"] > span + span { margin-block-start: 0 !important; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigReferenceFaithfulCobaltBotanicalTwinRails .rsvp-v2-options-blueSprigReferenceFaithfulCobaltBotanicalTwinRails > :is(button, span) { transition: none; } } /* Reference-Matched Cobalt Medallion Rails. The artwork follows the supplied * two-card screenshot; the labels stay live and share one right-side anchor. */ .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #173c6d; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-standard-gap: 12px; --blue-sprig-response-medallion-rail-attending-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/reference-matched-cobalt-medallion-rails/blue-sprig-reference-matched-cobalt-medallion-rails-attending.png"); --blue-sprig-response-medallion-rail-declined-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/reference-matched-cobalt-medallion-rails/blue-sprig-reference-matched-cobalt-medallion-rails-declined.png"); container-type: inline-size; gap: 0; padding: 0; text-align: center; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails { display: grid; width: min(100%, 430px); justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto; align-items: start; align-content: start; gap: 0 !important; margin: 0; padding: 0; overflow: visible; background-color: transparent !important; background-image: none !important; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > :is(button, span) { display: grid; position: relative; min-width: 0; min-height: 0 !important; height: auto !important; aspect-ratio: 1740 / 474; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var( --blue-sprig-response-medallion-rail-attending-art ) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 3.5cqi, 1em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease, opacity 160ms ease; } /* The percentages preserve the original source-artboard anchors after the * combined shell is split at y=474. Both labels stay on the same right-side * content anchor while the browser can measure each row independently. */ .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > :is(button, span)[data-rsvp-v2-response-option="attending"] > .rsvp-v2-response-label { position: absolute; top: 57.22%; right: 6%; left: 31%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > :is(button, span) + :is(button, span) { aspect-ratio: 1740 / 430; background-image: var( --blue-sprig-response-medallion-rail-declined-art ) !important; margin-block-start: calc( var(--rsvp-v2-response-button-gap) - var(--blue-sprig-response-standard-gap) ) !important; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > :is(button, span)[data-rsvp-v2-response-option="declined"] > .rsvp-v2-response-label { position: absolute; top: 44.29%; right: 6%; left: 31%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > :is(button, span):first-child, .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > :is(button, span).selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > button:disabled { cursor: not-allowed; filter: saturate(0.78) opacity(0.58); } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: -2px; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > button[data-rsvp-v2-response-option][disabled] { cursor: not-allowed; } .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails { width: 100%; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigReferenceMatchedCobaltMedallionRails .rsvp-v2-options-blueSprigReferenceMatchedCobaltMedallionRails > :is(button, span) { transition: none; } } /* Cobalt Sprig Capsule Pair. The transparent two-row shell follows the * approved reference while both English labels remain live HTML. */ .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #173c6d; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-capsule-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/cobalt-sprig-capsules/blue-sprig-cobalt-sprig-capsules-shell.png"); container-type: inline-size; gap: 0; padding: 0; text-align: center; } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules { display: grid; width: min(100%, 430px); /* Let the measured RSVP block include the live inter-capsule spacing. The * artwork remains 1672 × 941 at the standard gap, while auto tracks make * the second capsule's spacing part of the parent block's height. */ aspect-ratio: auto; justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, auto); gap: 0 !important; margin: 0; padding: 0; overflow: visible; background-color: transparent !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > :is(button, span) { display: grid; position: relative; min-width: 0; min-height: 0 !important; height: auto !important; aspect-ratio: 1672 / 470.5; place-items: center; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var(--blue-sprig-response-capsule-art) !important; background-position: center top !important; background-size: 100% 200% !important; background-repeat: no-repeat !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 3.5cqi, 1em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease, opacity 160ms ease; } /* Measured within each half of the approved 1672 × 941 reference artboard. * Shared 18% inline bounds keep both labels on the same center axis while * preserving the wider “NOT ATTENDING” word spacing. */ .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > :is(button, span)[data-rsvp-v2-response-option="attending"] > .rsvp-v2-response-label { position: absolute; top: 60.36%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > :is(button, span) + :is(button, span) { background-position: center bottom !important; margin-block-start: calc( var(--rsvp-v2-response-button-gap) + var(--rsvp-v2-response-collision-clearance) - var(--rsvp-v2-response-artwork-overlap) ) !important; } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > :is(button, span)[data-rsvp-v2-response-option="declined"] > .rsvp-v2-response-label { position: absolute; top: 44.1%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > :is(button, span):first-child, .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > :is(button, span).selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > button:disabled { cursor: not-allowed; filter: saturate(0.78) opacity(0.58); } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: -2px; } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > button[data-rsvp-v2-response-option][disabled] { cursor: not-allowed; } .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules { width: 100%; } /* The shared theme-picker normalization uses a full-artboard background for * single-panel artwork. This two-panel shell needs the same 100% × 200% * crop in the picker that it uses in the live block. */ .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > :is(button, span) { background-size: 100% 200% !important; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigCobaltSprigCapsules .rsvp-v2-options-blueSprigCobaltSprigCapsules > :is(button, span) { transition: none; } } /* Reference-Exact Medallion Twin Plaques. This is the approved screenshot * treatment: two shallow porcelain plaques, four attached cobalt medallions, * and live labels anchored inside the same content window as the reference. */ .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques { --blue-sprig-response-ink: #173c6d; --blue-sprig-response-muted-ink: #173c6d; --blue-sprig-response-gold: #c0a05e; --blue-sprig-response-exact-medallion-twin-plaque-art: url("/template-packages/porcelain-wedding/themes/blue-sprig/assets/rsvp-v2/response/reference-exact-medallion-twin-plaques/blue-sprig-reference-exact-medallion-twin-plaques-shell.png"); container-type: inline-size; gap: 0; padding: 0; text-align: center; } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques { display: grid; width: min(100%, 430px); aspect-ratio: auto; justify-self: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, auto); gap: 0 !important; margin: 0; padding: 0; overflow: visible; background-color: transparent !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span) { display: grid; position: relative; aspect-ratio: 4 / 1; min-width: 0; min-height: 0 !important; height: auto !important; place-items: center; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: var( --blue-sprig-response-exact-medallion-twin-plaque-art ) !important; background-position: center top !important; background-size: 100% 200% !important; background-repeat: no-repeat !important; color: var(--blue-sprig-response-muted-ink); appearance: none; box-shadow: none !important; font-family: var(--invitation-font-heading), "Cormorant Garamond", Garamond, Georgia, serif; font-size: clamp(0.78em, 3.5cqi, 1em); font-weight: 500; letter-spacing: 0.16em; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: nowrap; white-space: nowrap; transition: filter 160ms ease, opacity 160ms ease; } /* These anchors are measured against the approved 1774 × 887 reference shell: * 63.6% in the upper crop and 44.8% in the lower crop. The symmetric 18% * inline window keeps both live English labels on the shared visual axis. */ .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span)[data-rsvp-v2-response-option="attending"] > .rsvp-v2-response-label { position: absolute; top: 63.6%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span) + :is(button, span) { background-image: none !important; background-position: center bottom !important; margin-block-start: calc( var(--rsvp-v2-response-button-gap) + var(--rsvp-v2-response-collision-clearance) - var(--rsvp-v2-response-artwork-overlap) ) !important; } /* The sprite midpoint falls through the lower edge of the upper plaque. Keep * the original lower-row placement, but hide that four-percent upper-shadow * strip so only the lower plaque enters its button crop. */ .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span) + :is(button, span)::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-image: var(--blue-sprig-response-exact-medallion-twin-plaque-art); background-position: center bottom; background-size: 100% 200%; background-repeat: no-repeat; clip-path: inset(8.2% 0 0); } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span) > .rsvp-v2-response-label { z-index: 1; } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span)[data-rsvp-v2-response-option="declined"] > .rsvp-v2-response-label { position: absolute; top: 44.8%; right: 18%; left: 18%; display: block; max-width: none; margin: 0; transform: translateY(-50%); white-space: nowrap; } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span):first-child, .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span).selected { color: var(--blue-sprig-response-ink); } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > button:hover:not(:disabled) { filter: saturate(1.04) brightness(1.02); } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > button:disabled { cursor: not-allowed; filter: saturate(0.78) opacity(0.58); } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > button:focus-visible { outline: 2px solid var(--blue-sprig-response-gold); outline-offset: -2px; } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > button[data-rsvp-v2-response-option][disabled] { cursor: not-allowed; } .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > button > span[aria-hidden="true"] { display: none; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques { gap: 0; padding: 0; } .builder-rsvp-v2-response-thumbnail .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques { width: 100%; } /* Keep the medallion shell at double block-size so each picker row shows one * plaque rather than squeezing the full two-plaque sprite into both rows. */ .builder-rsvp-v2-response-thumbnail[data-rsvp-v2-preview-family="theme"] .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > span { background-size: 100% 200% !important; } @media (prefers-reduced-motion: reduce) { .rsvp-v2-choice-preview-blueSprigReferenceExactMedallionTwinPlaques .rsvp-v2-options-blueSprigReferenceExactMedallionTwinPlaques > :is(button, span) { transition: none; } } /* Blue Sprig Builder thumbnail legibility overrides. */ .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit strong { font-size: 8.8cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralReliefCountdownRail"] .event-details-v2-time-left-unit small { font-size: 1.9cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit strong { font-size: 8.8cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigCobaltFloralCountdownPlaque"] .event-details-v2-time-left-unit small { font-size: 2cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit strong { font-size: 8.6cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigFaithfulArchedCountdownRail"] .event-details-v2-time-left-unit small { font-size: 2cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-kicker { font-size: 2.7cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit strong { font-size: 8.6cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigExactPorcelainCountdownCartouche"] .event-details-v2-time-left-unit small { font-size: 2cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-kicker { font-size: 2.85cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-unit strong { font-size: 10.8cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="cobaltSprigPorcelainQuartet"] .event-details-v2-time-left-unit small { font-size: 2.6cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-kicker { font-size: 2.9cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit strong { font-size: 8.2cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blue-sprig-cobalt-porcelain-countdown-cartouche"] .event-details-v2-time-left-unit small { font-size: 2.1cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-kicker { font-size: 3.05cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-message strong { font-size: 5.7cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit strong { font-size: 7.8cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigPorcelainCountdown"] .event-details-v2-time-left-unit small { font-size: 1.9cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit strong { font-size: 8.6cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigOrnateOvalCountdownCartouche"] .event-details-v2-time-left-unit small { font-size: 2cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit strong { font-size: 8.8cqi; } .builder-time-left-floating-card .builder-event-details-v2-time-left-thumbnail[data-time-left-thumbnail-artboard="true"] .event-details-v2-time-left[data-event-details-v2-time-left-variant="blueSprigReferenceMatchedPorcelainFloralCapsuleCountdown"] .event-details-v2-time-left-unit small { font-size: 2cqi; }