/* ========================================================================== Wedding Websites & More: main stylesheet (v2.1) The v1 brand colours: aubergine, jacaranda, orchid, hibiscus and marigold on ivory. Pages are WordPress blocks (core blocks plus the theme's wwm/* blocks), so these styles follow block markup. Everything is complete without JavaScript; main.js adds motion, the mockup player and the stack index. ========================================================================== */ @font-face { font-family: "Adventor"; src: url("../fonts/tex-gyre-adventor-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Adventor"; src: url("../fonts/tex-gyre-adventor-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --aubergine: #23094B; --aubergine-deep: #170531; --jacaranda: #6B2BD9; --orchid: #A65BF2; --hibiscus: #D81B72; --hibiscus-deep: #BA1562; /* Hibiscus darkened for small text (WCAG AA) */ --marigold: #FFC21A; --marigold-soft: #FFD95C; --ivory: #FAF7F2; --white: #FFFFFF; --lilac: #F1ECFA; --petal: #FCE7F0; --butter: #FFF3CC; --line: #E2DAEC; --plum: #655C73; --ink: #221B2D; --success: #18864B; --success-t: #E3F4EA; --warning: #9A5B00; --warning-t: #FFF3CC; --error: #C0392B; --error-t: #FBE6E3; --info: #1F6FB2; --info-t: #E3EFF9; --wa-bg: #EFE9E1; --wa-out: #DCF5D0; --dusk: linear-gradient(45deg, #23094B 0%, #6B2BD9 60%, #A65BF2 100%); /* Names kept for the shop and dashboard styles */ --royal: var(--aubergine); --night: var(--aubergine-deep); --pink: var(--hibiscus-deep); --gold: var(--marigold); /* Text colours; dark sections redefine them */ --heading: var(--aubergine); --text: var(--ink); --muted: var(--plum); --accent: var(--hibiscus); --label: var(--hibiscus-deep); --focus: var(--jacaranda); --font-display: "Adventor", "TeX Gyre Adventor", "ITC Avant Garde Gothic", "Century Gothic", "Questrial", sans-serif; --font-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-h1: clamp(1.95rem, 1.3rem + 2.6vw, 3.5rem); --fs-h2: clamp(1.55rem, 1.15rem + 1.6vw, 2.5rem); --fs-h3: clamp(1.15rem, 1.02rem + .5vw, 1.45rem); --fs-lede: clamp(1rem, .95rem + .22vw, 1.15rem); --fs-body: clamp(.9375rem, .92rem + .1vw, 1rem); --fs-label: .75rem; --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 160ms; --t-card: 260ms; --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --shadow-sm: 0 2px 6px rgba(35, 9, 75, .06), 0 1px 2px rgba(35, 9, 75, .06); --shadow-md: 0 18px 40px -18px rgba(35, 9, 75, .3), 0 4px 12px rgba(35, 9, 75, .06); --shadow-lg: 0 40px 80px -30px rgba(23, 5, 49, .45), 0 10px 30px rgba(23, 5, 49, .12); --header-h: 72px; --adm: 0px; --gutter: clamp(16px, 4vw, 40px); --max: 1240px; --band: clamp(64px, 2rem + 6vw, 128px); --dome: clamp(28px, 1rem + 4vw, 80px); --tab: 54px; } @media (min-width: 1101px) { :root { --header-h: 100px; } } @media (max-width: 1100px) { :root { --header-h: 76px; } } .admin-bar { --adm: 32px; } @media (max-width: 782px) { .admin-bar { --adm: 46px; } } @media (max-width: 600px) { .admin-bar { --adm: 0px; } } /* Dark surfaces: text and accents switch to white and marigold */ .band--dusk, .band--aubergine, .cta-card, .stack-card:nth-child(3n+2), .site-footer { --heading: #fff; --text: rgba(255, 255, 255, .88); --muted: rgba(255, 255, 255, .74); --accent: var(--marigold); --label: var(--marigold); --focus: var(--marigold); color: var(--text); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--adm) + 16px); } html:not(.lenis) { scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } html.menu-lock { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--jacaranda); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--aubergine); } button { font: inherit; color: inherit; cursor: pointer; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding-left: 1.25em; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--heading); text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: -.03em; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -.01em; line-height: 1.2; } h4 { font-size: 1.05rem; letter-spacing: 0; line-height: 1.3; } h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--aubergine); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 600; } .skip-link:focus { top: 12px; color: #fff; } .site-main:focus { outline: none; } .icon { width: 20px; height: 20px; flex: none; } .wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: calc(760px + var(--gutter) * 2); } /* ---------- Type styles (block styles in the editor) ---------- */ .is-style-eyebrow, .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--label); } .is-style-lede, .lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); } .small, p.small { font-size: .875rem; color: var(--muted); } .muted { color: var(--muted); } .note { color: var(--muted); font-size: .95rem; border-left: 3px solid var(--marigold); padding-left: 14px; max-width: 62ch; } .h-display { font-size: var(--fs-h1); } .h-display--sm { font-size: var(--fs-h2); } .eyebrow--pink { color: var(--hibiscus-deep); } .label { font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); margin-bottom: .6em; } .label--marigold { color: var(--marigold); } /* ---------- Buttons ---------- */ body .wp-block-button__link, .btn { --bg: var(--aubergine); --fg: #fff; --bd: transparent; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; border-radius: 999px; background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.2; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(23, 5, 49, .16); transition: transform var(--t-fast) var(--ease), background-color var(--t-card) var(--ease), color var(--t-card) var(--ease), border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease); } /* A soft light passes across a button on hover */ body .wp-block-button__link::after, .btn::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent); transform: skewX(-20deg); opacity: 0; pointer-events: none; } body .wp-block-button__link:hover::after, .btn:hover::after { opacity: 1; transform: translateX(380%) skewX(-20deg); transition: transform .8s var(--ease-out), opacity .2s; } body .wp-block-button__link:hover, .btn:hover { color: var(--fg); transform: translateY(-1px); box-shadow: var(--shadow-md); } body .wp-block-button__link:active, .btn:active { transform: none; } .btn .icon { width: 18px; height: 18px; transition: transform var(--t-card) var(--ease); } .btn:hover .icon-arrow { transform: translateX(3px); } body .wp-block-button__link:hover { --bg: var(--jacaranda); } body .is-style-yellow .wp-block-button__link, .btn--yellow, .btn--gold { --bg: var(--marigold); --fg: var(--aubergine); } body .is-style-yellow .wp-block-button__link:hover, .btn--yellow:hover, .btn--gold:hover { --bg: var(--marigold-soft); } body .is-style-light .wp-block-button__link, .btn--light { --bg: #fff; --fg: var(--aubergine); --bd: var(--line); } body .is-style-light .wp-block-button__link:hover, .btn--light:hover { --bg: var(--lilac); } body .is-style-outline .wp-block-button__link, .btn--outline, .btn--secondary { --bg: transparent; --fg: var(--aubergine); --bd: var(--aubergine); } body .is-style-outline .wp-block-button__link:hover, .btn--outline:hover, .btn--secondary:hover { --bg: var(--aubergine); --fg: #fff; } .btn--primary { --bg: var(--aubergine); } .btn--primary:hover { --bg: var(--jacaranda); } .btn--pink { --bg: var(--hibiscus-deep); } .btn--pink:hover { --bg: #A2124F; } .btn--whatsapp { --bg: #128C4A; } .btn--whatsapp:hover { --bg: #0E7A3F; } .btn--sm { min-height: 40px; padding: 8px 16px; font-size: .875rem; } .btn--block { width: 100%; } /* On dark surfaces the plain button turns marigold and light buttons lose their border */ :is(.band--dusk, .band--aubergine, .cta-card, .stack-card:nth-child(3n+2)) .wp-block-button:not([class*="is-style-"]) .wp-block-button__link { --bg: var(--marigold); --fg: var(--aubergine); } :is(.band--dusk, .band--aubergine, .cta-card, .stack-card:nth-child(3n+2)) .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover { --bg: var(--marigold-soft); } :is(.band--dusk, .band--aubergine, .cta-card, .stack-card:nth-child(3n+2)) .is-style-light .wp-block-button__link { --bd: transparent; } :is(.band--dusk, .band--aubergine, .cta-card, .stack-card:nth-child(3n+2)) :is(.is-style-outline .wp-block-button__link, .btn--outline) { --fg: #fff; --bd: rgba(255, 255, 255, .55); } :is(.band--dusk, .band--aubergine, .cta-card, .stack-card:nth-child(3n+2)) :is(.is-style-outline .wp-block-button__link, .btn--outline):hover { --bg: #fff; --fg: var(--aubergine); } body .wp-block-buttons { gap: 10px; } body :where(.is-layout-flow, .is-layout-constrained) > .wp-block-buttons { margin-top: 1.5rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .btn-row--center { justify-content: center; } .text-btn { background: none; border: 0; padding: 8px 0; color: inherit; text-decoration: underline; text-underline-offset: .2em; opacity: .85; } .text-btn:hover { opacity: 1; } .link-arrow, .card-link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--jacaranda); } .link-arrow .icon { width: 18px; height: 18px; transition: transform var(--t-card) var(--ease); } .link-arrow:hover .icon { transform: translateX(3px); } .card-link a::after { content: "→"; transition: transform var(--t-card) var(--ease); } .card-link a:hover::after { transform: translateX(3px); } .chip, .cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.4; background: var(--lilac); color: var(--aubergine); text-decoration: none; white-space: nowrap; } a.cat-chip:hover { background: var(--aubergine); color: #fff; } .chip--success { background: var(--success-t); color: var(--success); } .chip--warning, .chip--pending { background: var(--warning-t); color: var(--warning); } .chip--error, .chip--rejected { background: var(--error-t); color: var(--error); } .chip--info { background: var(--info-t); color: var(--info); } .chip--approved, .chip--paid { background: var(--success-t); color: var(--success); } /* ---------- Lists (block styles) ---------- */ body .is-style-chips { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; max-width: 36rem; } body .is-style-chips > li { position: relative; margin: 0; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line); color: var(--heading); font-size: .9rem; font-weight: 600; line-height: 1.35; } .is-style-chips > li::before { content: ""; position: absolute; left: 0; top: calc(9px + .1em); width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B2BD9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; } :is(.band--dusk, .band--aubergine, .stack-card:nth-child(3n+2)) .is-style-chips > li { border-color: rgba(255, 255, 255, .14); } :is(.band--dusk, .band--aubergine, .stack-card:nth-child(3n+2)) .is-style-chips > li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC21A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } body .is-style-ticks { list-style: none; padding: 0; display: grid; gap: 10px; } body .is-style-ticks > li { position: relative; margin: 0; padding-left: 30px; } .is-style-ticks > li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; background: var(--marigold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323094B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; } /* ---------- Bands (page sections) ---------- */ .band { position: relative; padding: var(--band) var(--gutter); } .band--ivory { background: var(--ivory); } .band--white { background: #fff; } .band--lilac { background: var(--lilac); } .band--dusk { background: var(--dusk); } .band--aubergine { background: var(--aubergine); } .band--cta { background: var(--ivory); padding-top: clamp(16px, 3vw, 48px); } .band--white + .band--cta { background: #fff; } .band--lilac + .band--cta { background: var(--lilac); } /* Dark sections get a soft glow and a fine grain, so the gradient reads as print rather than screen */ :root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .band--dusk::before, .band--aubergine::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain) 0 0 / 180px, radial-gradient(60% 50% at 85% 10%, rgba(166, 91, 242, .35), transparent 70%), radial-gradient(40% 40% at 5% 100%, rgba(216, 27, 114, .18), transparent 70%); } .band--dusk > *, .band--aubergine > * { position: relative; } /* Section heading */ .section-head > * { max-width: 46rem; } .section-head.is-centred { text-align: center; } .section-head.is-centred > * { margin-inline: auto; } body .section-head > :is(h1, h2) { margin-top: .6rem; margin-bottom: 0; } body .section-head > .is-style-lede { margin-top: .9rem; } body .section-head + * { margin-top: clamp(36px, 4.5vw, 64px); } body .section-head > :first-child { margin-top: 0; } /* Hero */ .hero { padding-block: clamp(48px, 1.5rem + 5vw, 104px) var(--band); overflow: clip; } body .hero__cols { align-items: center; gap: clamp(28px, 5vw, 72px); margin: 0; } .hero__cols > .wp-block-column:first-child { flex: 1 1 52%; } .hero__cols > .wp-block-column:last-child { flex: 1 1 48%; min-width: 0; } body .hero h1 { margin: .7rem 0 0; max-width: none; text-wrap: pretty; } body .hero h1 + .is-style-lede { margin-top: 1rem; max-width: 36rem; } body .hero .wp-block-buttons { margin-top: 1.75rem; } .hero__photo { margin: 0; } .hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); } /* Homepage hero: a centred, full-width heading over the three offers */ .hero--stage { padding-bottom: calc(var(--band) + var(--dome)); } .hero__head { text-align: center; } body .hero--stage h1 { font-size: clamp(2.55rem, .9rem + 5.6vw, 5.6rem); line-height: 1.02; letter-spacing: -.04em; } body .hero--stage h1 + .is-style-lede { max-width: 44rem; margin-inline: auto; } body .hero--stage .wp-block-buttons { justify-content: center; } body .hero__head + .mockup { margin-top: clamp(48px, 6vw, 84px); } .hero--compact { padding-block: clamp(36px, 1rem + 4vw, 72px) clamp(28px, 1rem + 3vw, 56px); } .hero--compact h1, .hero--compact .section-head > h2 { font-size: var(--fs-h1); } .hero--compact + .band--white, .hero--compact + .band { padding-top: clamp(32px, 4vw, 56px); } /* Cards */ body .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } body .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } body .cards:has(> :nth-child(2):last-child), body :is(.split-cols, .form-cols) .cards, body :is(.split-cols, .form-cols) .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } body .is-style-card { margin: 0; padding: clamp(18px, 2vw, 26px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); } body .is-style-card > * + * { margin-top: .5rem; } .band--white .is-style-card { background: var(--ivory); border-color: transparent; } .is-style-card h3 { font-size: 1.125rem; } .is-style-card p { color: var(--plum); font-size: .9375rem; } body .is-style-card .card-link { margin-top: auto; padding-top: .5rem; } .is-style-card:has(.card-link) { display: flex; flex-direction: column; transition: transform var(--t-card) var(--ease-out), box-shadow var(--t-card) var(--ease); } .is-style-card:has(.card-link):hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* Numbered steps (How it works, How we work) */ body .steps { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .steps:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } body .steps > li { counter-increment: step; margin: 0; padding: 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); font-size: .9375rem; line-height: 1.55; color: var(--plum); } .band--white .steps > li { background: var(--ivory); border-color: transparent; } .steps > li::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: var(--marigold); color: var(--aubergine); font-family: var(--font-display); font-weight: 700; font-size: .875rem; } .steps > li strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; color: var(--aubergine); } .steps > li > br, .feature-list > li > br { display: none; } /* Feature list (Wedding Website) */ body .feature-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); } body .feature-list > li { margin: 0; padding: 16px 0 18px; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.5; color: var(--plum); } .feature-list strong { display: block; margin-bottom: 2px; color: var(--aubergine); font-size: .975rem; } body .features__cols { gap: clamp(28px, 5vw, 72px); align-items: flex-start; } .features__cols > .wp-block-column:first-child { flex: 0 0 auto; width: min(340px, 34%); } @media (min-width: 1001px) { .features__cols > .wp-block-column:first-child { position: sticky; top: calc(var(--header-h) + var(--adm) + 24px); } } /* Two-column layouts */ body .split-cols, body .form-cols { gap: clamp(28px, 5vw, 72px); align-items: center; } body .form-cols { align-items: flex-start; } .split-cols > .wp-block-column, .form-cols > .wp-block-column { min-width: 0; } .form-cols > .wp-block-column:first-child { flex: 1 1 36%; } .form-cols > .wp-block-column:last-child { flex: 1 1 58%; } /* FAQs */ body .faq-cols { gap: clamp(24px, 5vw, 72px); } .faq-cols > .wp-block-column:first-child { flex: 0 0 32%; } .faq-list { border-top: 1px solid var(--line); } body .faq-list > details { margin: 0; border-bottom: 1px solid var(--line); } .faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--aubergine); cursor: pointer; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323094B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform var(--t-card) var(--ease), background-color var(--t-card) var(--ease); } .faq-list details[open] summary::after { transform: rotate(45deg); background-color: var(--marigold); } .faq-list summary:hover { color: var(--jacaranda); } body .faq-list details > :not(summary) { margin: 0; padding-bottom: 18px; color: var(--plum); max-width: 64ch; } .faq-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px clamp(24px, 4vw, 56px); align-items: start; } body .faq-group > * { margin: 0; } body .faq-group + .faq-group { margin-top: clamp(32px, 5vw, 56px); } .faq-group > h2 { font-size: var(--fs-h3); padding-top: 16px; } /* Closing call to action */ .cta-card { position: relative; overflow: hidden; padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 72px); border-radius: var(--r-xl); background: var(--dusk); text-align: center; } .cta-card::before { content: ""; position: absolute; inset: 0; background: var(--grain) 0 0 / 180px; pointer-events: none; } .cta-card::after { content: ""; position: absolute; right: -10%; bottom: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 194, 26, .28), transparent 65%); pointer-events: none; } .cta-card > * { position: relative; z-index: 1; max-width: 40rem; margin-inline: auto; } body .cta-card > h2 { margin-top: .6rem; margin-bottom: 0; } body .cta-card > .is-style-lede { margin-top: .9rem; } body .cta-card .wp-block-buttons { justify-content: center; } /* ---------- Header ---------- */ /* The header floats over the top of the page and the first section runs up behind it. Only its links and buttons take clicks. */ .site-header { position: sticky; top: var(--adm); z-index: 100; height: var(--header-h); margin-bottom: calc(-1 * var(--header-h)); pointer-events: none; --nav: var(--aubergine); } .site-header :is(a, button), .menu-sheet { pointer-events: auto; } body:has(.site-main > :first-child:is(.band--dusk, .band--aubergine, .dusk-run)) .site-header { --nav: #fff; } .site-main > :first-child { border-top: var(--header-h) solid transparent; } .site-header__inner { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 20px; height: 100%; max-width: calc(1400px + var(--gutter) * 2); margin-inline: auto; padding: 14px var(--gutter) 0; } .brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; } .logo { --logo-fs: 15px; display: inline-flex; align-items: center; gap: .7em; font-size: var(--logo-fs); color: #2E0D63; } .logo__mark { flex: none; width: 2.7em; height: 2.7em; } .logo__text { display: flex; flex-wrap: nowrap; column-gap: .42em; font-family: var(--font-display); font-weight: 400; font-size: .86em; line-height: 1.2; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; } .logo__amp { color: #B8913A; } .logo--reverse { color: #F6EFE3; } .logo--reverse .logo__amp { color: #E2C26B; } img.logo { width: auto; height: 40px; } .site-header .brand { padding: 6px 16px 6px 6px; border-radius: var(--r-sm); background: #fff; box-shadow: 0 0 0 1px rgba(35, 9, 75, .08); } .header-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; } .header-cart { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: #fff; box-shadow: 0 0 0 1px rgba(35, 9, 75, .08); color: var(--aubergine); text-decoration: none; } .header-cart:hover { background: var(--lilac); color: var(--aubergine); } .header-cart .icon { width: 21px; height: 21px; } .header-cart__count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--hibiscus-deep); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; } .header-cta { min-height: 44px; } .header-cta__short { display: none; } /* Menu button: the label rolls from Menu to Close */ .menu-toggle { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--aubergine); color: #fff; font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; } .menu-toggle:hover { background: var(--jacaranda); } .menu-toggle__label { display: block; height: 1.4em; overflow: hidden; line-height: 1.4; } .menu-toggle__label > span { display: block; transition: transform 460ms var(--ease-out); } .menu-toggle[aria-expanded="true"] .menu-toggle__label > span { transform: translateY(-100%); } .menu-toggle__bars { position: relative; width: 18px; height: 10px; } .menu-toggle__bars i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 320ms var(--ease-out), top 320ms var(--ease-out); } .menu-toggle__bars i:first-child { top: 0; } .menu-toggle__bars i:last-child { top: 8px; } .menu-toggle[aria-expanded="true"] .menu-toggle__bars i { top: 4px; } .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { transform: rotate(-45deg); } .menu-open .site-main::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(23, 5, 49, .4); animation: sheetIn 300ms var(--ease) both; } /* The menu: a white panel from the right at every width. Sections with links slide in as their own screen. */ .menu-sheet { position: fixed; top: var(--adm); right: 0; bottom: 0; z-index: 1; width: min(480px, 100%); overflow: hidden; padding-top: var(--header-h); background: #fff; border-left: 1px solid var(--line); animation: sheetSide 420ms var(--ease-out) both; } @keyframes sheetIn { from { opacity: 0; } to { opacity: 1; } } @keyframes sheetSide { from { transform: translateX(48px); opacity: 0; } } @keyframes sheetItem { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .sheet-nav { position: relative; height: 100%; } .sheet-panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) calc(40px + env(safe-area-inset-bottom)); background: #fff; transition: transform 460ms var(--ease-out), opacity 300ms var(--ease), visibility 0s; } .sheet-panel--sub, .sheet-nav.is-sub .sheet-panel--main { visibility: hidden; transition: transform 460ms var(--ease-out), opacity 300ms var(--ease), visibility 0s linear 460ms; } .sheet-panel--sub { transform: translateX(100%); } .sheet-nav.is-sub .sheet-panel--main { transform: translateX(-22%); opacity: 0; } .sheet-panel--sub.is-active { visibility: visible; transform: none; transition: transform 460ms var(--ease-out), opacity 300ms var(--ease), visibility 0s; } .sheet-list { list-style: none; padding: 0; margin: 0; } .sheet-list > li { animation: sheetItem 520ms var(--ease-out) both; animation-delay: calc(60ms + var(--n, 0) * 35ms); } .sheet-link { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 6px 0; border: 0; background: none; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.85rem); line-height: 1.15; letter-spacing: -.02em; color: var(--aubergine); text-decoration: none; -webkit-tap-highlight-color: transparent; } .sheet-link .icon, .sheet-utility .icon:last-child { width: 22px; height: 22px; color: #9B93A8; transition: transform var(--t-card) var(--ease), color var(--t-card) var(--ease); } .sheet-link:hover, .sheet-link:active, .sheet-link[aria-current="page"] { color: var(--jacaranda); } .sheet-link:hover .icon { transform: translateX(3px); color: var(--jacaranda); } .sheet-list--sub .sheet-link { min-height: 56px; font-family: var(--font-text); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; } .sheet-utility { list-style: none; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); animation: sheetItem 520ms var(--ease-out) 300ms both; } .sheet-utility a { display: flex; align-items: center; gap: 14px; min-height: 54px; color: var(--aubergine); font-weight: 600; font-size: 1.05rem; text-decoration: none; } .sheet-utility a > span { flex: 1; } .sheet-utility small { margin-left: 6px; font-weight: 500; font-size: .85rem; color: var(--plum); } .sheet-utility .icon { width: 21px; height: 21px; } .sheet-utility .icon:last-child { width: 20px; height: 20px; } .sheet-back { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin-left: -6px; padding: 0 10px 0 0; border: 0; background: none; color: var(--plum); font-weight: 600; font-size: .95rem; } .sheet-back .icon { width: 22px; height: 22px; transform: rotate(180deg); } .sheet-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.2rem); line-height: 1.1; letter-spacing: -.025em; color: var(--aubergine); text-decoration: none; } .sheet-title .icon { width: 24px; height: 24px; color: var(--jacaranda); transition: transform var(--t-card) var(--ease); } a.sheet-title:hover .icon { transform: translateX(4px); } @media (max-width: 1279px) { .brand .logo { --logo-fs: 13px; } } @media (max-width: 600px) { .brand .logo { --logo-fs: 11px; } .brand .logo__text, .site-footer .logo__text { flex-direction: column; } .header-actions { gap: 4px; } .header-cart { width: 40px; height: 40px; } .header-cta { min-height: 40px; padding: 6px 14px; font-size: .84rem; } .menu-toggle { width: 40px; height: 40px; padding: 0; justify-content: center; } .menu-toggle__label { display: none; } .site-header .brand { padding-right: 12px; } .header-cta__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .header-cta__short { display: inline; } body .is-style-chips { gap: 0 18px; } body .is-style-chips > li { padding-block: 8px; font-size: .85rem; } .is-style-chips > li::before { top: calc(8px + .08em); } } @media (prefers-reduced-motion: reduce) { .menu-sheet, .sheet-list > li, .sheet-utility { animation: none; } .sheet-panel, .sheet-panel--sub, .sheet-nav.is-sub .sheet-panel--main, .sheet-panel--sub.is-active { transition: none; } } /* ---------- Footer ---------- */ .site-footer { background: var(--aubergine); padding-top: clamp(44px, 6vw, 80px); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 72px); padding-bottom: clamp(32px, 5vw, 56px); } .site-footer__brand .logo { --logo-fs: 14px; } .site-footer__tagline { margin: 18px 0; max-width: 26ch; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: #fff; } .site-footer__contact { list-style: none; padding: 0; display: grid; gap: 8px; } .site-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; } .site-footer a:hover { color: var(--marigold); } .site-footer__contact a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; } .site-footer__contact .icon { width: 18px; height: 18px; color: var(--marigold); } .site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; } .site-footer__title { margin: 0 0 12px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold); } .site-footer__cols ul { list-style: none; padding: 0; display: grid; gap: 8px; } .site-footer__cols a { font-size: .925rem; } .site-footer__legal { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 18px; font-size: .82rem; color: rgba(255, 255, 255, .64); } .site-footer__legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; } .site-footer__legal p { margin: 0; } .site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; } /* ---------- Stacked offers (homepage) ---------- */ .stack { position: relative; } .stack__cards { display: flex; flex-direction: column; gap: 24px; } body .stack > .stack-card + .stack-card { margin-top: 24px; } body .stack-card { position: relative; margin: 0; padding: clamp(22px, 3.2vw, 44px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(35, 9, 75, .45); transform-origin: 50% 0; } .stack-card:nth-child(3n+2) { background: var(--aubergine); border-color: transparent; background-image: var(--grain), radial-gradient(70% 60% at 100% 0%, rgba(107, 43, 217, .45), transparent 70%); background-size: 180px, auto; } .stack-card:nth-child(3n) { background: var(--petal); border-color: transparent; } body .stack-card__cols { margin: 0; gap: clamp(24px, 4vw, 56px); align-items: center; } .stack-card__cols > .wp-block-column { min-width: 0; } .stack-card__cols > .wp-block-column:first-child { flex: 1 1 52%; } .stack-card__cols > .wp-block-column:last-child { flex: 1 1 48%; } body .stack-card h3 { margin: .6rem 0 0; font-size: var(--fs-h2); } body .stack-card h3 + .is-style-lede { margin-top: .8rem; } body .stack-card .is-style-chips { margin-top: 1.1rem; } body .stack-card .small { margin-top: 1rem; } .stack-card:focus { outline: none; } .stack-card__tab { display: none; } .stack-index ol { list-style: none; padding: 0; display: grid; gap: 4px; } .stack-index a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); color: var(--plum); font-weight: 600; font-size: .95rem; line-height: 1.3; text-decoration: none; transition: background var(--t-card) var(--ease), color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease); } .stack-index a:hover { color: var(--aubergine); background: rgba(255, 255, 255, .7); } .stack-index a.is-active { color: var(--aubergine); background: #fff; box-shadow: var(--shadow-sm); } .stack-index__n { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--lilac); color: var(--jacaranda); font-family: var(--font-display); font-size: .78rem; transition: background var(--t-card) var(--ease), color var(--t-card) var(--ease); } .stack-index a.is-active .stack-index__n { background: var(--marigold); color: var(--aubergine); } .stack-index__bar { position: absolute; overflow: hidden; border-radius: 2px; background: var(--line); } .stack-index__bar i { position: absolute; inset: 0; background: var(--jacaranda); transform-origin: 0 0; transition: transform 400ms var(--ease); } @media (min-width: 1101px) { .stack.has-index { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; } .stack-index { position: sticky; top: calc(var(--header-h) + var(--adm) + 32px); padding-left: 16px; } .stack-index__bar { left: 0; top: 8px; bottom: 8px; width: 2px; } .stack-index__bar i { transform: scaleY(var(--p, 0)); } } @media (min-width: 1101px) and (min-height: 700px) { /* Each card sticks a little lower than the one before, so the earlier cards stay visible as tabs. */ body .stack-card { position: sticky; top: calc(var(--header-h) + var(--adm) + 24px + var(--i, 0) * var(--tab)); min-height: min(620px, calc(100vh - var(--header-h) - var(--adm) - 48px - (var(--n, 3) - 1) * var(--tab))); display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--tab) + 8px); } .stack-card__tab { position: absolute; left: 0; right: 0; top: 0; height: var(--tab); display: flex; align-items: center; gap: 12px; padding-inline: clamp(22px, 3.2vw, 44px); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--label); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; } .stack-card__tab b { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; color: var(--jacaranda); } .stack-card:nth-child(3n+2) .stack-card__tab b { color: var(--marigold); } .stack-card.is-under .stack-card__tab { opacity: 1; } } @media (min-width: 1101px) and (min-height: 700px) and (max-height: 880px) { .stack-card .mockup { zoom: .82; } } @media (max-width: 1100px) { .stack-index { position: sticky; top: calc(var(--header-h) + var(--adm)); z-index: 5; margin: 0 calc(var(--gutter) * -1) 16px; padding: 10px var(--gutter); background: rgba(250, 247, 242, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .stack-index ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .stack-index ol::-webkit-scrollbar { display: none; } .stack-index a { padding: 6px 12px 6px 6px; border-radius: 999px; white-space: nowrap; font-size: .875rem; background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .stack-index a.is-active { background: var(--aubergine); color: #fff; box-shadow: none; } .stack-index__n { width: 26px; height: 26px; font-size: .72rem; } .stack-index__bar { left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0; } .stack-index__bar i { transform: scaleX(var(--p, 0)); } } /* ---------- Animated mockups ---------- The final frame is the default (no JavaScript, reduced motion and the editor). With .seq-ready, main.js plays each [data-step] in order: .is-on shows a step, stages replace each other, and the loop restarts. */ .mockup { display: grid; justify-items: center; gap: 14px; width: 100%; min-width: 0; } .mockup__stage { position: relative; display: grid; justify-items: center; gap: 12px; width: 100%; } .mockup__foot { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; } .demo-label { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: .75rem; letter-spacing: .01em; line-height: 1.4; color: var(--muted); text-align: left; } .mockup__toggle { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: none; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--aubergine); transition: background var(--t-fast) var(--ease); } .mockup__toggle:hover { background: var(--lilac); } .mockup__toggle .icon { width: 14px; height: 14px; } .mockup__toggle .i-play, .mockup__toggle.is-paused .i-pause { display: none; } .mockup__toggle.is-paused .i-play { display: block; } :is(.band--dusk, .band--aubergine, .stack-card:nth-child(3n+2)) .mockup__toggle { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; } .mk-stage { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 16px; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear 0s; } .mockup:not(.seq-ready) .mk-stage:not(:last-child) { visibility: hidden; opacity: 0; } /* A feature tour shows its first screen when it is not playing */ .mockup:not(.seq-ready):has([data-static]) .mk-stage:last-child:not([data-static]) { visibility: hidden; opacity: 0; } .mockup:not(.seq-ready) .mk-stage[data-static] { visibility: visible; opacity: 1; } .seq-ready .mk-stage:not(.is-on) { visibility: hidden; opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; } .mk-step { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .seq-ready .mk-step:not(.is-on) { opacity: 0; transform: translateY(10px); } .seq-reset, .seq-reset * { transition: none !important; } .seq-out [data-step] { opacity: 0 !important; transition: opacity .35s var(--ease) !important; } [data-type].is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: currentColor; animation: caret .8s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } [data-tap] { position: relative; overflow: hidden; } .is-tapped { transform: scale(.95) !important; } .is-tapped::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: rgba(255, 255, 255, .65); animation: tap .5s var(--ease-out) forwards; pointer-events: none; } :is(.mk-answers, .mk-langs, .mk-rows, .mk-toggles) .is-tapped::after { background: rgba(107, 43, 217, .3); } @keyframes tap { from { transform: scale(.4); opacity: .9; } to { transform: scale(5); opacity: 0; } } @keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } } /* Devices */ /* An iPhone 17 Pro-style phone: slim even bezels, Dynamic Island, a metal band with the side buttons, iOS status bar */ .mk-phone { --w: 264px; --bz: calc(var(--w) * .034); position: relative; width: var(--w); max-width: 100%; padding: var(--bz); border-radius: calc(var(--w) * .175); background: #050507; box-shadow: 0 0 0 1px #4A4A52, 0 0 0 2.5px #1D1D22, 0 0 0 3.5px #63636D, var(--shadow-lg); color: var(--ink); } .mk-phone::before, .mk-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #3E3E46; } .mk-phone::before { right: 100%; margin-right: 3px; top: 17%; height: 25%; background: linear-gradient(#3E3E46 0 13%, transparent 13% 25%, #3E3E46 25% 57%, transparent 57% 67%, #3E3E46 67%); } .mk-phone::after { left: 100%; margin-left: 3px; top: 27%; height: 13%; } .mk-phone__screen { position: relative; display: grid; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: calc(var(--w) * .142); background: #fff; } .mk-phone__screen::after { content: ""; position: absolute; z-index: 6; left: 50%; bottom: calc(var(--w) * .018); width: 35%; height: max(3px, calc(var(--w) * .014)); margin-left: -17.5%; border-radius: 3px; background: rgba(0, 0, 0, .85); pointer-events: none; } .mk-phone__screen:has(.bp)::after { background: rgba(255, 255, 255, .8); } .mk-phone__notch { position: absolute; z-index: 7; top: calc(var(--bz) + var(--w) * .03); left: 50%; width: calc(var(--w) * .29); height: calc(var(--w) * .085); transform: translateX(-50%); border-radius: 999px; background: #000; } .mk-phone--tall { --w: 288px; } .mk-phone .mk-stage { padding-top: calc(var(--w) * .16); } .mk-phone:not(.mk-phone--tall) .mk-stage { justify-content: center; } .mk-phone--safari .mk-stage { padding-bottom: calc(var(--w) * .31); } .ios-status { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: calc(var(--w) * .14); padding: calc(var(--w) * .014) calc(var(--w) * .062) 0 calc(var(--w) * .115); color: #000; font: 600 calc(var(--w) * .052)/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-text); letter-spacing: -.01em; pointer-events: none; } .ios-status__icons { display: flex; align-items: center; gap: calc(var(--w) * .014); } .ios-status svg { display: block; width: auto; height: calc(var(--w) * .037); fill: currentColor; } .ios-status--light { color: #fff; } .ios-status--rec .ios-status__time { margin-left: calc(var(--w) * -.025); padding: 2px 7px; border-radius: 999px; background: #FF3B30; color: #fff; } .ios-safari { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--w) * .028); padding: calc(var(--w) * .025) calc(var(--w) * .04) calc(var(--w) * .075); border-top: 1px solid rgba(0, 0, 0, .07); background: rgba(249, 249, 249, .95); color: #007AFF; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-text); } .ios-safari__field { display: flex; align-items: center; gap: 6px; height: calc(var(--w) * .118); padding: 0 calc(var(--w) * .035); border-radius: calc(var(--w) * .042); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .13); color: #000; font-size: calc(var(--w) * .046); } .ios-safari__aa { font-weight: 600; letter-spacing: -.02em; } .ios-safari__aa small { font-size: .74em; } .ios-safari__url { display: flex; flex: 1; align-items: center; justify-content: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; } .ios-safari__url > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ios-safari__url svg { flex: none; width: auto; height: .8em; fill: #8E8E93; } .ios-safari__reload { flex: none; width: auto; height: .95em; fill: #000; } .ios-safari__tools { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--w) * .025); } .ios-safari__tools svg { width: auto; height: calc(var(--w) * .062); } .ios-safari__tools .is-off { opacity: .3; } .mk-window { position: relative; width: 100%; max-width: 520px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); color: var(--ink); } .mk-window__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--lilac); } .mk-window__bar i { width: 9px; height: 9px; border-radius: 50%; background: #F2A0C4; } .mk-window__bar i:nth-child(2) { background: var(--marigold-soft); } .mk-window__bar i:nth-child(3) { background: #C2A8F0; } .mk-window__bar span { flex: 1; min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 12px; border-radius: 999px; background: #fff; color: var(--plum); font-size: .68rem; text-align: center; } .mk-caption { margin: 0; min-height: 1.3em; font-size: .85rem; font-weight: 700; color: var(--heading); text-align: center; } .mk-dots { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 5px; } .mk-dots li { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .3s var(--ease), background .3s var(--ease); } .mk-dots li.is-done { background: var(--orchid); } .mk-dots li.is-on { width: 18px; background: var(--marigold); } /* Shared pieces */ .mockup__stage p { margin: 0; } .mk-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); } .mk-kicker em, .mk-pass__top em, .mk-names em { font-style: normal; color: var(--hibiscus); } .mk-names { min-height: 1.1em; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; color: var(--aubergine); text-align: center; } .mk-names--sm { font-size: 1.05rem; } .mk-field { display: grid; gap: 3px; } .mk-field small { font-size: .62rem; font-weight: 600; color: var(--plum); } .mk-field span { display: block; min-height: 36px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-size: .82rem; font-weight: 600; color: var(--aubergine); } .mk-field--code span { border-color: var(--jacaranda); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .12em; text-align: center; } .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch; min-height: 38px; padding: 8px 14px; border-radius: 999px; background: var(--jacaranda); color: #fff; font-size: .78rem; font-weight: 700; } .mk-btn .icon { width: 15px; height: 15px; } .mk-btn--ok { background: var(--success); } .mk-btn--gold { background: var(--marigold); color: var(--aubergine); } .mk-btn--sm { align-self: center; min-height: 30px; padding: 6px 18px; font-size: .7rem; } .mk-toast { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--success-t); color: #12703D; font-size: .74rem; font-weight: 700; line-height: 1.3; } .mk-toast .icon { width: 15px; height: 15px; } .mk-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .72rem; color: var(--plum); } .mk-note .icon { width: 15px; height: 15px; color: #128C4A; } .mk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--jacaranda); } .mk-dot--pink { background: var(--hibiscus); } .mk-dot--gold { background: var(--marigold); } .mk-tag { --dot: #fff; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .mk-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); } .mk-tag--gold { --dot: var(--marigold); } .mk-tag--pink { --dot: #FF7DB5; } .mk-shot { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; } .mk-shot img { width: 100%; height: 100%; object-fit: cover; } .mk-count { display: flex; gap: 6px; } .mk-count span { display: grid; justify-items: center; min-width: 48px; padding: 6px 8px; border-radius: 10px; background: var(--lilac); } .mk-count b { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.1; color: var(--aubergine); font-variant-numeric: tabular-nums; } .mk-count small { font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); } .mk-count--sm { justify-content: center; } .mk-count--sm span { min-width: 38px; padding: 4px 6px; } .mk-count--sm b { font-size: .95rem; } /* Guest pass and door check-in */ .mk-scan { position: relative; display: grid; justify-items: center; gap: 6px; padding: 8px 0; } .mk-scan > .icon { width: 60px; height: 60px; padding: 15px; border-radius: 50%; background: var(--lilac); color: var(--jacaranda); } .mk-scan__ring { position: absolute; top: 8px; left: 50%; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; border: 2px solid var(--jacaranda); animation: ring 1.6s var(--ease-out) infinite; } @keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.5); opacity: 0; } } .mk-scan small { font-size: .68rem; font-weight: 700; color: var(--success); } .mk-pass { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 10px; padding: 14px 14px 16px; overflow: hidden; border-radius: 16px; background: var(--dusk); color: #fff; box-shadow: var(--shadow-md); } .mk-pass__top { display: flex; justify-content: space-between; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .mk-pass__top em { color: var(--marigold); } .mk-pass__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .mk-pass__code { min-height: 1.2em; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: .12em; color: var(--marigold); } .mk-pass__top { grid-column: 1 / -1; } .mk-pass img { grid-column: 2; grid-row: 2 / span 2; width: 60px; height: 60px; padding: 5px; border-radius: 8px; background: #fff; } .mk-pass__name { overflow-wrap: anywhere; line-height: 1.2; } .mk-pass--sm { padding: 12px; } .mk-pass--sm .mk-pass__code { font-size: 1.2rem; } .mk-match { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--ivory); } .mk-match img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .mk-match p { display: grid; font-size: .8rem; line-height: 1.3; } .mk-match strong { color: var(--aubergine); } .mk-match small { font-size: .68rem; font-weight: 600; color: #146C3D; } /* Wedding website invitation (browser window) */ .mk-invite { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 340px; } .mk-invite__photo { position: relative; overflow: hidden; } .mk-invite__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mk-invite__body { display: flex; flex-direction: column; gap: 10px; padding: 20px; } .mk-invite__names { min-height: 1.05em; font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; line-height: 1.05; color: var(--aubergine); } .mk-events { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; } .mk-events li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; font-size: .75rem; line-height: 1.3; } .mk-events strong { color: var(--aubergine); } .mk-events small { grid-column: 2; font-size: .66rem; color: var(--plum); } .mk-events .mk-dot { grid-row: span 2; } .mk-invite .mk-btn { margin-top: auto; } .mk-toast--float { position: absolute; left: 12px; bottom: 12px; max-width: calc(46% - 12px); background: #fff; box-shadow: var(--shadow-md); } /* WhatsApp (Vendor AI) */ /* WhatsApp as it looks on an iPhone */ .mk-phone--wa { --w: 280px; } .mk-phone--wa .mk-phone__screen { display: flex; flex-direction: column; } .wa-head { flex: none; display: flex; align-items: center; gap: calc(var(--w) * .03); padding: calc(var(--w) * .15) calc(var(--w) * .045) calc(var(--w) * .025) calc(var(--w) * .03); border-bottom: 1px solid rgba(0, 0, 0, .09); background: #F6F6F6; color: #000; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-text); text-align: left; } .wa-head__back { display: flex; align-items: center; gap: 1px; color: #007AFF; font-size: calc(var(--w) * .052); } .wa-head__back svg { width: auto; height: calc(var(--w) * .06); } .wa-head .seal { flex: none; width: calc(var(--w) * .11); height: calc(var(--w) * .11); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); } .wa-head__who { display: grid; flex: 1; min-width: 0; line-height: 1.2; } .wa-head__who b { font-size: calc(var(--w) * .052); font-weight: 600; } .wa-head__who small { font-size: calc(var(--w) * .038); color: #8E8E93; } .wa-head__calls { display: flex; align-items: center; gap: calc(var(--w) * .06); color: #007AFF; } .wa-head__calls svg { width: auto; height: calc(var(--w) * .056); } .mk-wa__log { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; flex: 1; min-height: 0; overflow: hidden; padding: 10px; } .wa-chat { background-color: #EFEAE2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='14' cy='16' r='5'/%3E%3Cpath d='M52 10c-3-4-9-2-9 3 0 4 9 9 9 9s9-5 9-9c0-5-6-7-9-3zM78 30l4 8 8 1-6 6 2 8-8-4-8 4 2-8-6-6 8-1zM12 60h16M20 52v16M50 64a8 8 0 1 0 16 0 8 8 0 0 0-16 0zM80 74l8 8M88 74l-8 8M30 86c4-4 8 4 12 0'/%3E%3C/svg%3E"); background-size: 96px; } .wa-chat .mk-msg { position: relative; border-radius: 9px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); color: #111B21; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-text); } .wa-chat .mk-msg--out { background: #D9FDD3; border-radius: 9px 9px 2px 9px; } .wa-chat .mk-msg--in { background: #fff; border-radius: 9px 9px 9px 2px; } .wa-chat .mk-msg time { color: #667781; } .wa-chat .mk-msg--out time::after { content: ""; display: inline-block; width: 14px; height: 9px; margin-left: 3px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M1 6l3 3 6-7M6.5 9.2 7.3 10 13.5 2' fill='none' stroke='%2353BDEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .mk-wa__day { align-self: center; padding: 2px 8px; border-radius: 6px; background: #fff; color: #54656F; font-size: .6rem; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } .wa-compose { flex: none; display: flex; align-items: center; gap: calc(var(--w) * .038); padding: calc(var(--w) * .025) calc(var(--w) * .045) calc(var(--w) * .085); border-top: 1px solid rgba(0, 0, 0, .08); background: #F6F6F6; color: #007AFF; } .wa-compose svg { flex: none; width: auto; height: calc(var(--w) * .062); } .wa-compose__field { display: flex; flex: 1; align-items: center; justify-content: flex-end; height: calc(var(--w) * .105); padding: 0 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); color: #8E8E93; } .wa-compose__field svg { height: calc(var(--w) * .054); } .mk-wa { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 18px; background: var(--wa-bg); box-shadow: var(--shadow-lg); } .mk-msg { flex: none; max-width: 84%; padding: 6px 10px 4px; border-radius: 12px; font-size: .74rem; line-height: 1.4; color: var(--ink); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); } .mk-msg time { display: block; margin-top: 1px; text-align: right; font-size: .56rem; color: var(--plum); } .mk-msg--out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 4px; } .mk-msg--in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; } .seq-ready .mk-msg[data-step]:not(.is-on) { display: none; } .seq-ready .mk-msg.is-on { animation: msgIn .35s var(--ease-out); } .mk-typing { display: none; align-self: flex-start; gap: 3px; padding: 9px 12px; background: #fff; } .seq-ready .mk-typing.is-on:not(.is-gone) { display: inline-flex; } .mk-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--plum); animation: typing 1s infinite; } .mk-typing i:nth-child(2) { animation-delay: .15s; } .mk-typing i:nth-child(3) { animation-delay: .3s; } @keyframes typing { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } } /* Wedding branding (design board) */ .mk-board { width: 100%; max-width: 460px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); color: var(--ink); } .mk-board__bar { padding: 10px 14px; background: #0F5E4A; color: #fff; font-size: .7rem; font-weight: 600; } .mk-board__screen { display: grid; height: 300px; background: #F6F1E7; } .mk-board .mk-stage { align-items: center; justify-content: center; padding: 22px; } .mk-identity { display: grid; justify-items: center; gap: 14px; text-align: center; } .mk-mono { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: #0F5E4A; } .mk-mono em, .mk-item b em { font-style: normal; color: #C99F45; } .mk-mono.mk-mono--sm { font-size: 1.5rem; } .mk-swatches { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; } .mk-swatches li { display: grid; justify-items: center; gap: 4px; } .mk-swatches li::before { content: ""; width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } .mk-swatches small { font-size: .62rem; color: var(--plum); } .mk-type { display: flex; align-items: center; gap: 10px; } .mk-type b { font-family: var(--font-display); font-size: 1.8rem; color: #0F5E4A; } .mk-type span { max-width: 10em; font-size: .7rem; color: var(--plum); text-align: left; line-height: 1.35; } .mk-card { position: relative; display: grid; justify-items: center; gap: 6px; width: 100%; max-width: 250px; padding: 22px 18px; border-radius: 6px; background: #FFFDF8; border: 1px solid #E8DFC9; box-shadow: var(--shadow-md); color: #0F5E4A; text-align: center; } .mk-card__kicker { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #56675F; } .mk-card__names { min-height: 1.2em; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: #0F5E4A; } .mk-card__date { font-size: .7rem; letter-spacing: .04em; color: #8A6A2A; } .mk-stamp { position: absolute; right: -10px; top: -12px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--success); color: #fff; font-size: .64rem; font-weight: 700; white-space: nowrap; rotate: 6deg; box-shadow: var(--shadow-md); } .mk-stamp .icon { width: 12px; height: 12px; } .mk-card--sm { padding: 16px 14px; } .mk-card--sm .mk-card__names { font-size: 1.05rem; } .mk-print { display: grid; gap: 18px; width: 100%; } .mk-items { display: flex; justify-content: center; align-items: flex-end; gap: 12px; } .mk-item { display: grid; justify-items: center; gap: 6px; } .mk-item b { display: grid; place-items: center; background: #fff; border: 1px solid #E8DFC9; box-shadow: var(--shadow-sm); font-family: var(--font-display); color: #0F5E4A; } .mk-item--invite b { width: 74px; height: 100px; border-radius: 4px; font-size: 1.1rem; } .mk-item--pass b { width: 96px; height: 60px; border-radius: 8px; border-color: transparent; background: #0F5E4A; color: #F6E4A6; font-size: .78rem; letter-spacing: .1em; } .mk-item--fan b { width: 78px; height: 78px; border-radius: 50%; border-color: transparent; background: #C99F45; color: #fff; font-size: 1.1rem; } .mk-item--fan b em { color: #0F5E4A; } .mk-item small { font-size: .62rem; font-weight: 600; color: var(--plum); } .mk-progress { display: grid; gap: 6px; font-size: .68rem; font-weight: 700; color: var(--plum); } .mk-progress i { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #E8DFC9; } .mk-progress b { display: block; height: 100%; background: #0F5E4A; transform-origin: 0 50%; } .seq-ready .mk-progress.is-on b { animation: fill 1.6s var(--ease) both; } @keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .mk-ship { display: flex; align-items: center; gap: 22px; } .mk-parcel { display: grid; place-items: center; width: 84px; height: 84px; flex: none; border-radius: 16px; background: #C99F45; color: #fff; box-shadow: var(--shadow-md); } .mk-parcel .icon { width: 40px; height: 40px; } .mk-track { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .mk-track li { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: #0F5E4A; } .mk-track .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--success); color: #fff; } /* Homepage hero: three phones in turn (Wedding Website, Wedding Branding, Vendor AI), two couple photos and a notification card on each side. Everything is placed from the phone's centre line, so the group stays together. */ .mockup--hero { gap: 18px; } .mk-hero { position: relative; display: grid; place-items: center; width: 100%; padding: 28px 0; } .mk-trio { grid-area: 1 / 1; z-index: 2; display: grid; } .mk-trio .mk-scene { grid-area: 1 / 1; display: block; padding: 0; } .mk-hero .mk-phone--scene { --w: 304px; zoom: .88; } .mk-phone--scene .mk-phone__screen { display: block; position: relative; } .seq-ready .mk-trio .mk-scene { transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), visibility 0s; } .seq-ready .mk-trio .mk-scene:not(.is-on) { visibility: hidden; opacity: 0; transform: translateX(90px) rotate(4deg); transition: opacity .45s var(--ease), transform .7s var(--ease), visibility 0s linear .7s; } .seq-ready .mk-trio .mk-scene:not(.is-on):has(~ .mk-scene.is-on) { transform: translateY(30px) scale(.86); } .seq-paused *, .seq-paused *::before, .seq-paused *::after { animation-play-state: paused !important; } .mk-hero__side { position: absolute; z-index: 3; display: grid; } .mk-hero__side--l { right: calc(50% + 96px); bottom: 12%; justify-items: end; } .mk-hero__side--r { left: calc(50% + 96px); top: 12%; justify-items: start; } .mk-photo { position: absolute; z-index: 1; margin: 0; width: 172px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--lilac); box-shadow: 0 0 0 5px #fff, 0 30px 60px -24px rgba(20, 5, 48, .7); animation: drift 7s ease-in-out infinite alternate; } .mk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .mk-photo--a { --r: -6deg; right: calc(50% + 64px); top: 6%; } .mk-photo--a img { object-position: 22% 40%; } .mk-photo--b { --r: 5deg; left: calc(50% + 64px); bottom: 6%; animation-delay: -3.5s; } .mk-photo--b img { object-position: 62% 40%; } @keyframes drift { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-12px) rotate(calc(var(--r) * .6)); } } .mk-float { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; width: 226px; padding: 11px 14px 11px 11px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 26px 50px -22px rgba(20, 5, 48, .6); color: var(--ink); text-align: left; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); } .mk-float > i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--lilac); color: var(--jacaranda); } .mk-hero__side--r .mk-float > i { background: #FFF1C2; color: #7A5300; } .mk-float .icon { width: 20px; height: 20px; } .mk-float span { display: grid; min-width: 0; font-size: .8rem; line-height: 1.4; color: var(--plum); } .mk-float b { font-family: var(--font-display); font-size: .98rem; color: var(--aubergine); } .mockup:not(.seq-ready) .mk-float[data-key="site"], .mk-hero:has(.mk-scene.is-on .ws__pass.is-on) .mk-hero__side--l .mk-float[data-key="site"], .mk-hero:has(.mk-scene.is-on .ws__sprayed.is-on) .mk-hero__side--r .mk-float[data-key="site"], .mk-hero:has(.mk-scene[data-key="brand"].is-on) .mk-hero__side--l .mk-float[data-key="brand"], .mk-hero:has(.mk-scene.is-on .bp__toast.is-on) .mk-hero__side--r .mk-float[data-key="brand"], .mk-hero:has(.mk-scene.is-on .mk-msg.is-on .wa__doc--ok) .mk-hero__side--l .mk-float[data-key="vai"], .mk-hero:has(.mk-scene.is-on .wa__confirm.is-on) .mk-hero__side--r .mk-float[data-key="vai"] { opacity: 1; transform: none; transition-delay: .4s; } .mk-hero:has(.mk-scene[data-key="brand"].is-on) .mk-hero__side--l .mk-float[data-key="brand"] { transition-delay: 1.4s; } .seq-out .mk-float { opacity: 0 !important; transition-delay: 0s !important; } /* 1. A couple's wedding website, recorded on a guest's phone */ .ws { display: flex; flex-direction: column; height: 100%; padding-top: calc(var(--w) * .14); background: #FBF8F3; color: #2B1640; text-align: left; } .ws .ios-safari { position: relative; flex: none; } .ws__view { position: relative; flex: 1; min-height: 0; overflow: hidden; } .ws__page { position: relative; transition: transform 1s cubic-bezier(.65, 0, .35, 1); will-change: transform; } .ws__cover { padding-bottom: 16px; text-align: center; } .ws__cover img { width: 100%; height: 236px; object-fit: cover; object-position: 50% 22%; } .mockup__stage .ws__kicker { margin: 12px 0 2px; color: #6E5D40; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; } .mockup__stage .ws__names { margin: 0; color: #3A1468; font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem; line-height: 1.1; } .ws__names em { color: #9A7224; font-style: italic; } .mockup__stage .ws__date { margin: 4px 0 10px; color: #6A5F75; font-size: .58rem; } .mockup__stage .ws__count { display: flex; justify-content: center; gap: 6px; margin: 0; } .ws__count span { display: grid; min-width: 48px; padding: 5px 4px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #EEE7DD; color: #6A5F75; font-size: .46rem; letter-spacing: .08em; text-transform: uppercase; } .ws__count b { color: #3A1468; font-family: var(--font-display); font-size: .95rem; letter-spacing: 0; } .mockup__stage .ws__nav { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 9px 6px; border-block: 1px solid #EEE7DD; background: #fff; color: #3A1468; font-size: .52rem; font-weight: 600; } .ws__sec { padding: 16px 14px; border-bottom: 1px solid #EEE7DD; } .mockup__stage .ws__h { margin: 0 0 9px; color: #3A1468; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; } .mockup__stage .ws__row { display: flex; gap: 10px; margin: 0 0 9px; font-size: .62rem; line-height: 1.35; } .ws__row b { flex: none; width: 32px; color: #8A6516; font-family: var(--font-display); } .ws__row small { display: block; color: #6A5F75; font-size: .54rem; } .mockup__stage .ws__field { margin: 0 0 7px; padding: 7px 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E4DCCF; font-size: .6rem; } .mockup__stage .ws__choice { display: flex; gap: 6px; margin: 0 0 8px; } .ws__choice span { position: relative; flex: 1; padding: 7px 4px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E4DCCF; font-size: .56rem; font-weight: 600; text-align: center; transition: background .25s, color .25s; } .ws__choice .ws__yes.is-on, .mockup:not(.seq-ready) .ws__yes { background: #3A1468; color: #fff; box-shadow: none; } .mockup__stage .ws__btn { position: relative; margin: 0; padding: 8px; border-radius: 999px; background: #3A1468; color: #fff; font-size: .6rem; font-weight: 700; text-align: center; transition: transform .2s; } .mockup__stage .ws__btn--line { margin-top: 8px; background: transparent; box-shadow: inset 0 0 0 1px #3A1468; color: #3A1468; } .mockup__stage .ws__btn--gold { background: #C9A24A; color: #2B1640; } .ws__pass { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 10px; background: #3A1468; color: #fff; font-size: .58rem; line-height: 1.4; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); } .mockup__stage .ws__pass p { display: grid; margin: 0; } .ws__pass b { font-size: .66rem; } .ws__pass small { color: #E2C26B; letter-spacing: .1em; } .ws__qr { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 6px; background: #fff; color: #2B1640; } .ws__qr .icon { width: 34px; height: 34px; } .seq-ready .ws__pass:not(.is-on), .seq-ready .ws__sprayed:not(.is-on) { opacity: 0; transform: translateY(6px); } .ws__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .ws__grid img { width: 100%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; } .mockup__stage .ws__amounts { display: flex; gap: 6px; margin: 0 0 8px; } .ws__amounts span { flex: 1; padding: 7px 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E4DCCF; font-size: .62rem; font-weight: 700; text-align: center; } .ws__amounts .is-picked { box-shadow: inset 0 0 0 2px #C9A24A; } .mockup__stage .ws__sprayed { margin: 8px 0 0; color: var(--success); font-size: .58rem; font-weight: 700; text-align: center; transition: opacity .4s, transform .4s; } .ws__video img { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; object-fit: cover; } .mockup__stage .ws__livebar { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; color: #6A5F75; font-size: .56rem; } .ws__live-dot { padding: 2px 6px; border-radius: 4px; background: #D92B2B; color: #fff; font-size: .5rem; font-weight: 700; text-transform: uppercase; } /* 2. The brand pack: swipe through the designs, then approve them for print */ .bp { position: relative; display: flex; flex-direction: column; height: 100%; padding: calc(var(--w) * .15) 0 calc(var(--w) * .075); background: #17121F; color: #fff; text-align: left; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-text); } .mockup__stage .bp__top { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 16px 0 12px; line-height: 1.3; } .bp__top > span:last-child { display: grid; } .bp__back { color: #0A84FF; } .bp__back svg { display: block; } .bp__top b { font-size: .86rem; font-weight: 600; } .bp__top small { color: rgba(255, 255, 255, .62); font-size: .58rem; } .bp__view { flex: 1; min-height: 0; overflow: hidden; } .bp__track { display: flex; width: 900%; height: 100%; transform: translateX(calc(var(--i, 0) * -100% / 9)); transition: transform .65s cubic-bezier(.65, 0, .35, 1); } .bp__slide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: calc(100% / 9); margin: 0; padding: 0 16px; } .bp__slide figcaption { color: rgba(255, 255, 255, .7); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; } .bp__art { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 14px; background: #F3E7D3; color: #3A1468; font-family: Georgia, "Times New Roman", serif; } .bp__art i { color: #B88A2E; font-style: italic; } .bp__mono { display: grid; place-items: center; width: 70%; aspect-ratio: 1; border: 2px solid #C9A24A; border-radius: 50%; background: #3A1468; color: #F3E7D3; font-size: 2.6rem; letter-spacing: -.04em; box-shadow: inset 0 0 0 6px #3A1468, inset 0 0 0 7px #C9A24A; } .bp__art--palette { grid-template-columns: repeat(5, 1fr); gap: 0; place-items: stretch; overflow: hidden; background: #fff; } .bp__art--palette span { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; background: var(--c); color: #fff; font-family: var(--font-text); font-size: .52rem; font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); } .bp__art--palette span:nth-child(3) { color: #3A1468; } .bp__card { display: grid; gap: 6px; width: 72%; padding: 18px 10px; border: 1px solid #C9A24A; background: #FFFDF8; text-align: center; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); } .bp__card b, .bp__easel b { font-size: 1.15rem; font-weight: 400; } .bp__card small, .bp__easel small, .bp__tent small, .bp__post small { font-family: var(--font-text); font-size: .46rem; letter-spacing: .12em; text-transform: uppercase; } .bp__art--pass { background: #E9E1F4; } .bp__ticket { display: grid; justify-items: center; gap: 8px; width: 56%; padding: 14px 10px; border-radius: 10px; background: #3A1468; color: #F3E7D3; font-family: var(--font-text); } .bp__ticket b { font-family: Georgia, serif; font-size: 1.2rem; font-weight: 400; } .bp__ticket i { width: 56px; height: 56px; border-radius: 4px; background: #fff; background-image: linear-gradient(90deg, #17121F 50%, transparent 0), linear-gradient(#17121F 50%, transparent 0); background-size: 8px 8px, 12px 12px; background-blend-mode: multiply; } .bp__ticket small { font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; } .bp__art--sign { background: #DCD3C4; } .bp__easel { display: grid; place-items: center; gap: 6px; width: 64%; aspect-ratio: 3 / 4; padding: 10px; border: 6px solid #C9A24A; background: #3A1468; color: #F3E7D3; text-align: center; } .bp__tent { display: grid; justify-items: center; width: 52%; padding: 14px 0; border-radius: 6px 6px 0 0; background: #FFFDF8; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5); } .bp__tent b { font-size: 3rem; font-weight: 400; line-height: 1; } .bp__art--fan { background: #F6E3EA; } .bp__fan { display: grid; place-items: center; width: 74%; aspect-ratio: 2 / 1; margin-top: -10%; border-radius: 999px 999px 0 0; background: repeating-conic-gradient(from -90deg at 50% 100%, #3A1468 0 9deg, #C9A24A 9deg 18deg); color: #fff; } .bp__fan b { margin-top: 30%; padding: 4px 8px; border-radius: 6px; background: #3A1468; font-size: .9rem; font-weight: 400; } .bp__art--post { background: #3A1468; color: #F3E7D3; } .bp__post { display: grid; justify-items: center; gap: 2px; } .bp__post b { font-size: 3.6rem; font-weight: 400; line-height: 1; color: #E2C26B; } .bp__post i { margin-top: 8px; color: #F3E7D3; font-family: var(--font-text); font-size: .56rem; font-style: normal; } .bp__art--tote { background: #E9E1F4; } .bp__tote { position: relative; display: grid; place-items: center; width: 54%; aspect-ratio: 5 / 6; margin-top: 14%; border-radius: 4px; background: #F3E7D3; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5); } .bp__tote::before { content: ""; position: absolute; left: 25%; top: -24%; width: 50%; height: 34%; border: 4px solid #C9A24A; border-bottom: 0; border-radius: 999px 999px 0 0; } .bp__tote b { font-size: 1.3rem; font-weight: 400; } .mockup__stage .bp__dots { position: relative; height: 3px; margin: 12px 16px; border-radius: 3px; background: rgba(255, 255, 255, .18); } .bp__dots::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc((var(--i, 0) + 1) / 9 * 100%); border-radius: inherit; background: #E2C26B; transition: width .65s var(--ease); } .mockup__stage .bp__actions { display: flex; gap: 8px; margin: 0; padding: 0 16px; } .bp__actions span { position: relative; flex: 1; padding: 9px 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); font-size: .6rem; font-weight: 700; text-align: center; } .bp__actions .bp__approve { background: var(--hibiscus); box-shadow: none; } .bp__toast { position: absolute; left: 16px; right: 16px; bottom: 60px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--success); font-size: .66rem; font-weight: 700; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); transition: opacity .35s, transform .35s var(--ease-out); } .bp__toast .icon { width: 16px; height: 16px; } .seq-ready .bp__toast:not(.is-on), .mockup:not(.seq-ready) .bp__toast { opacity: 0; transform: translateY(10px); } .bp:has([data-slide="1"].is-on) { --i: 1; } .bp:has([data-slide="2"].is-on) { --i: 2; } .bp:has([data-slide="3"].is-on) { --i: 3; } .bp:has([data-slide="4"].is-on) { --i: 4; } .bp:has([data-slide="5"].is-on) { --i: 5; } .bp:has([data-slide="6"].is-on) { --i: 6; } .bp:has([data-slide="7"].is-on) { --i: 7; } .bp:has([data-slide="8"].is-on) { --i: 8; } /* 3. Vendor AI on WhatsApp */ .wa { display: flex; flex-direction: column; height: 100%; background: var(--wa-bg); text-align: left; } .wa__log { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 0; overflow: hidden; padding: 10px; background-image: radial-gradient(rgba(35, 9, 75, .05) 1px, transparent 1px); background-size: 14px 14px; } .wa__log .mk-msg { max-width: 88%; font-size: .68rem; } .wa__doc, .wa__pay { display: flex; gap: 8px; margin: 0 0 6px; padding: 8px; border-radius: 8px; background: var(--lilac); color: var(--aubergine); font-size: .6rem; line-height: 1.35; } .wa__doc > i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--aubergine); color: #fff; } .wa__doc .icon { width: 16px; height: 16px; } .wa__doc > span { display: grid; } .wa__doc b { font-size: .66rem; } .wa__doc small { color: var(--plum); font-size: .56rem; } .wa__doc--ok { background: var(--success-t); } .wa__doc--ok > i { background: var(--success); } .wa__doc--wallet { background: #FFF3CC; } .wa__doc--wallet > i { background: #7A5300; } .wa__pay { flex-direction: column; gap: 4px; } .wa__pay > span { display: flex; justify-content: space-between; gap: 8px; } .wa__confirm { position: relative; justify-content: center !important; margin-top: 4px; padding: 6px; border-radius: 999px; background: var(--aubergine); color: #fff; font-weight: 700; } @media (max-width: 1180px) { .mk-hero__side--l { right: calc(50% + 56px); } .mk-hero__side--r { left: calc(50% + 56px); } .mk-float { width: 196px; } } @media (max-width: 1000px) { .mk-hero__side { display: none; } } @media (max-width: 860px) { /* Phones and tablets: the phone in the middle, the two couples as round photos hugging its sides */ .mk-hero { width: 100%; padding: 16px 0; } .mk-hero__side { display: none; } .mk-photo { --s: clamp(76px, 22vw, 124px); width: var(--s); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 18px 36px -14px rgba(20, 5, 48, .7); } .mk-photo--a { right: auto; left: max(0px, calc(50% - 128px - var(--s) + 26px)); top: 10%; } .mk-photo--b { left: auto; right: max(0px, calc(50% - 128px - var(--s) + 26px)); bottom: 10%; } } @media (max-width: 480px) { .mk-hero .mk-phone--scene { zoom: .8; max-width: none; } } /* Paperwork and payments inside a chat */ .mk-doc { width: 86%; max-width: none; overflow: hidden; padding: 0 10px 4px; } .mk-doc__bar { display: block; margin: 0 -10px 7px; padding: 6px 10px; background: var(--aubergine); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .mk-doc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .72rem; } .mk-doc__row b { font-family: var(--font-display); font-size: .92rem; color: var(--aubergine); } .mk-doc small { display: block; margin-top: 3px; font-size: .6rem; color: var(--plum); } .mk-pay { display: grid; gap: 5px; width: 86%; max-width: none; } .mk-pay > b { font-size: .74rem; color: var(--aubergine); } .mk-pay span { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: .7rem; } .mk-pay span i { font-style: normal; font-weight: 700; color: var(--aubergine); } .mk-pay__btn { display: block; margin-top: 2px; padding: 7px 10px; border-radius: 999px; background: var(--success); color: #fff; font-style: normal; font-size: .7rem; font-weight: 700; text-align: center; transition: transform .2s var(--ease); } .mk-msg .icon { width: 13px; height: 13px; vertical-align: -2px; color: var(--success); } /* Wedding website feature tour (tall phone) */ .mk-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .mk-rows li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--ivory); font-size: .74rem; font-weight: 600; color: var(--aubergine); } .mk-rows small { margin-left: auto; font-size: .66rem; font-weight: 500; color: var(--plum); } .mk-rows--boxed .icon { width: 16px; height: 16px; color: var(--hibiscus); } .mk-chip { padding: 2px 8px; border-radius: 999px; background: var(--success-t); color: var(--success) !important; font-weight: 700 !important; } .seq-ready .mk-chip:not(.is-on) { background: var(--lilac); color: var(--jacaranda) !important; } .mk-diary { position: relative; min-height: 300px; padding: 16px 14px; border-radius: 12px; background: #FFFDF6 repeating-linear-gradient(transparent 0 23px, #EDE3CF 23px 24px); box-shadow: inset 4px 0 0 var(--petal); } .mk-hand { min-height: 72px; font-style: italic; font-size: .82rem; line-height: 24px; color: #3D2C5A; } .mk-shot--pinned { width: 72%; margin: 14px auto 0; padding: 6px 6px 18px; aspect-ratio: auto; border-radius: 4px; background: #fff; box-shadow: var(--shadow-md); rotate: -3deg; } .mk-shot--pinned img { aspect-ratio: 4 / 3; height: auto; } .mk-turn { position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; border-radius: 0 0 12px 0; background: linear-gradient(135deg, transparent 50%, #E9DFC8 50%); box-shadow: -2px -2px 6px rgba(0, 0, 0, .06); } .mk-live { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; border-radius: 14px; } .mk-live img { width: 100%; height: 100%; object-fit: cover; } .mk-live__chip { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: #E0245E; color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .08em; } .mk-live__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.2s steps(1) infinite; } @keyframes blink { 50% { opacity: .2; } } .mk-chat { padding: 7px 10px; border-radius: 10px; background: var(--ivory); font-size: .72rem; color: var(--ink); } .mk-chat b { color: var(--jacaranda); } .mk-spray { position: relative; height: 200px; overflow: hidden; border-radius: 14px; background: var(--dusk); } .mk-spray .mk-note { position: absolute; display: grid; place-items: center; width: 74px; height: 38px; border-radius: 4px; background: linear-gradient(135deg, #CFE8C4, #9FCB8E); color: #1E4D2B; font-family: var(--font-display); font-size: .74rem; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); } .mk-spray .mk-note--b { background: linear-gradient(135deg, #F1D3E2, #D9A4BF); color: #5C1A3B; } .mk-spray .mk-note:nth-child(1) { left: 8%; top: 14%; rotate: -12deg; } .mk-spray .mk-note:nth-child(2) { left: 52%; top: 8%; rotate: 9deg; } .mk-spray .mk-note:nth-child(3) { left: 28%; top: 38%; rotate: 4deg; } .mk-spray .mk-note:nth-child(4) { left: 62%; top: 44%; rotate: -8deg; } .mk-spray .mk-note:nth-child(5) { left: 10%; top: 66%; rotate: 10deg; } .mk-spray .mk-note:nth-child(6) { left: 46%; top: 70%; rotate: -4deg; } .seq-ready .mk-spray .mk-note:not(.is-on) { transform: translateY(-140px); } .mk-total { display: grid; justify-items: center; } .mk-total small { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--plum); } .mk-total b { font-family: var(--font-display); font-size: 1.5rem; color: var(--aubergine); font-variant-numeric: tabular-nums; } .mk-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mk-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; } .mk-wall { padding: 10px 12px; border-radius: 12px; background: var(--petal); color: var(--hibiscus-deep); font-size: .78rem; font-weight: 600; } .mk-wall small { font-weight: 500; color: var(--plum); } .mk-avatars { display: flex; align-items: center; } .mk-avatars img { width: 38px; height: 38px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; } .mk-avatars img:first-child { margin-left: 0; } .mk-avatars span { margin-left: 6px; font-size: .74rem; font-weight: 700; color: var(--jacaranda); } .mk-q { font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--aubergine); } .mk-answers { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .mk-answers li { padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: .78rem; font-weight: 600; color: var(--aubergine); transition: background .25s, border-color .25s, color .25s; } .mk-answers .mk-right { border-color: var(--success); background: var(--success-t); color: var(--success); } .seq-ready .mk-answers .mk-right:not(.is-on) { border-color: var(--line); background: transparent; color: var(--aubergine); } .mk-board-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .mk-board-list li { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--lilac); font-size: .76rem; } .mk-board-list b { color: var(--aubergine); } .mk-board-list span { font-weight: 700; color: var(--jacaranda); font-variant-numeric: tabular-nums; } .mk-toggles { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .mk-toggles li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--ivory); font-size: .78rem; font-weight: 600; color: var(--aubergine); } .mk-tog { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: #D9D2E3; transition: background .25s var(--ease); } .mk-tog::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .25s var(--ease); } .mk-tog[data-step] { background: var(--success); } .mk-tog[data-step]::before { transform: translateX(14px); } .seq-ready .mk-tog[data-step]:not(.is-on) { background: #D9D2E3; } .seq-ready .mk-tog[data-step]:not(.is-on)::before { transform: none; } .mk-hint { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--plum); } .mk-hint .icon { width: 15px; height: 15px; } .mk-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .mk-langs span { padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--aubergine); } .mk-langs [data-tap] { border-color: var(--aubergine); background: var(--aubergine); color: #fff; } .seq-ready .mk-langs [data-tap]:not(.is-on) { border-color: var(--line); background: transparent; color: var(--aubergine); } .seq-ready .mk-langs:not(:has([data-tap].is-on)) .is-lang { border-color: var(--jacaranda); color: var(--jacaranda); } /* Affiliate dashboard */ .mk-dash { display: grid; gap: 12px; padding: 18px; } .mk-link { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 6px 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--ivory); font-size: .74rem; font-weight: 600; color: var(--aubergine); } .mk-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-copy { padding: 5px 10px; border-radius: 999px; background: var(--success); color: #fff; font-size: .64rem; transition: opacity .3s var(--ease); } .seq-ready .mk-copy:not(.is-on) { opacity: 0; } .mk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mk-stats p { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--lilac); } .mk-stats small { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--plum); } .mk-stats b { font-family: var(--font-display); font-size: 1.1rem; color: var(--aubergine); font-variant-numeric: tabular-nums; white-space: nowrap; } .mk-stats .mk-stat--gold { background: var(--marigold); } .mk-stats .mk-stat--gold small { color: var(--aubergine); } .mk-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; padding: 8px; border-radius: 12px; background: var(--ivory); } .mk-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(var(--orchid), var(--jacaranda)); transform-origin: 50% 100%; } .seq-ready .mk-bars.is-on i { animation: grow .8s var(--ease-out) both; } .mk-bars i:nth-child(2) { animation-delay: .06s; } .mk-bars i:nth-child(3) { animation-delay: .12s; } .mk-bars i:nth-child(4) { animation-delay: .18s; } .mk-bars i:nth-child(5) { animation-delay: .24s; } .mk-bars i:nth-child(6) { animation-delay: .3s; } .mk-bars i:nth-child(7) { animation-delay: .36s; } @keyframes grow { from { transform: scaleY(0); } } /* Mockups inside the stacked cards are a little smaller so each card fits the screen */ .stack-card .mk-phone { --w: 236px; } .stack-card .mk-phone--wa { --w: 252px; } .stack-card .mk-board__screen { height: 280px; } /* ---------- Pricing (Wedding Website and Wedding Branding) ---------- */ .pricing { display: grid; gap: 16px; max-width: 1040px; margin-inline: auto; } .pricing fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .pricing__packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .package { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); border: 2px solid transparent; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease); } .package:hover { box-shadow: var(--shadow-md); } .package:has(:checked), .package.is-selected { border-color: var(--jacaranda); box-shadow: 0 24px 48px -28px rgba(107, 43, 217, .55); } .package:has(:focus-visible) { outline: 3px solid var(--jacaranda); outline-offset: 3px; } .package__input, .addon input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .package__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .package__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: var(--aubergine); } .package__radio { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 2px solid var(--line); border-radius: 50%; transition: border-color var(--t-card) var(--ease); } .package__radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--jacaranda); transform: scale(0); transition: transform var(--t-card) var(--ease); } .package:has(:checked) .package__radio, .package.is-selected .package__radio { border-color: var(--jacaranda); } .package:has(:checked) .package__radio::after, .package.is-selected .package__radio::after { transform: scale(1); } .package__price { display: flex; align-items: baseline; gap: 6px; } .package__price small { font-size: .85rem; font-weight: 600; color: var(--plum); } .package__price b { font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); line-height: 1; letter-spacing: -.02em; color: var(--aubergine); } .package__how { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--butter); color: #6B4E00; font-size: .78rem; font-weight: 700; } .package__input[data-online="0"] ~ .package__how { background: var(--lilac); color: var(--jacaranda); } .package__summary { font-size: .92rem; color: var(--plum); } .package__list { display: grid; gap: 7px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); } .package__list > span { display: flex; gap: 8px; font-size: .9rem; line-height: 1.45; } .package__list .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--success); } .package__not { padding-top: 10px; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--plum); } .pricing .pricing__addons { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-sm); } .pricing__addons > legend:not(.screen-reader-text) { float: left; width: 100%; display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--aubergine); } .pricing__addons > legend span { font-family: var(--font-text); font-size: .78rem; font-weight: 600; color: var(--plum); } .addon-list { clear: both; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .addon { position: relative; } .addon label, .addon__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); font-weight: 400; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .addon label:hover { border-color: var(--orchid); } .addon label:has(:checked), .addon.is-selected label { border-color: var(--jacaranda); background: var(--lilac); } .addon label:has(:focus-visible) { outline: 3px solid var(--jacaranda); outline-offset: 2px; } .addon__box { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--line); border-radius: 7px; background: #fff; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .addon__box .icon { width: 14px; height: 14px; color: #fff; opacity: 0; } .addon label:has(:checked) .addon__box { border-color: var(--jacaranda); background: var(--jacaranda); } .addon label:has(:checked) .addon__box .icon { opacity: 1; } .addon__text { display: grid; gap: 2px; } .addon__text b { font-size: .92rem; line-height: 1.3; color: var(--aubergine); } .addon__text small { font-size: .8rem; line-height: 1.45; color: var(--plum); } .addon__price { font-size: .92rem; font-weight: 700; color: var(--aubergine); white-space: nowrap; } .addon--ask .addon__row { cursor: default; border-style: dashed; background: var(--ivory); } .addon__box--off { border-style: dashed; background: transparent; } .addon__ask { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--jacaranda); font-size: .8rem; text-decoration: none; } .addon__ask:hover { border-color: var(--jacaranda); color: var(--aubergine); } .pricing__addons--grid .addon-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pricing__summary { position: sticky; bottom: 12px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; padding: 16px 20px; border-radius: var(--r-xl); background: var(--aubergine); color: #fff; box-shadow: 0 24px 50px -24px rgba(23, 5, 49, .7); --focus: var(--marigold); } .pricing__total { display: grid; margin: 0; line-height: 1.2; } .pricing__total span { font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .72); } .pricing__total b { font-family: var(--font-display); font-size: 1.6rem; color: var(--marigold); } .pricing__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .pricing__summary .btn--outline { --fg: #fff; --bd: rgba(255, 255, 255, .5); } .pricing__summary .btn--outline:hover { --bg: #fff; --fg: var(--aubergine); } .pricing__note { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 0; font-size: .78rem; color: rgba(255, 255, 255, .74); } .pricing__note .icon { width: 15px; height: 15px; color: var(--marigold); } .block-note { padding: 14px 18px; border-radius: var(--r-md); background: var(--butter); color: var(--warning); font-size: .9rem; } /* Vendor AI plans */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1120px; margin-inline: auto; align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--ivory); } .plan--featured { border-color: transparent; background: var(--aubergine) var(--grain) 0 0 / 180px; color: rgba(255, 255, 255, .86); box-shadow: var(--shadow-lg); } .plan__flag { position: absolute; top: 18px; right: 18px; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--marigold); color: var(--aubergine); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } body .plan__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--aubergine); } .plan__for { margin: 0; font-size: .9rem; color: var(--plum); } .plan__price { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .plan__price b { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1; letter-spacing: -.02em; color: var(--aubergine); } .plan__price small { font-size: .85rem; color: var(--plum); } .plan__list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; font-size: .92rem; line-height: 1.45; } .plan__list li { display: flex; gap: 10px; } .plan__list .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--jacaranda); } .plan__actions { display: grid; gap: 8px; margin-top: auto; } .plan__actions .btn { width: 100%; justify-content: center; } .plan__demo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: .88rem; font-weight: 600; text-decoration: none; } .plan__demo .icon { width: 16px; height: 16px; } .plan__demo:hover { text-decoration: underline; } .plan--featured :is(.plan__name, .plan__price b) { color: #fff; } .plan--featured :is(.plan__for, .plan__price small) { color: rgba(255, 255, 255, .74); } .plan--featured .plan__price { border-color: rgba(255, 255, 255, .16); } .plan--featured .plan__list .icon { color: var(--marigold); } .plan--featured .btn--outline { --fg: #fff; --bd: rgba(255, 255, 255, .55); } .plan--featured .btn--outline:hover { --bg: #fff; --fg: var(--aubergine); } .plan--featured .plan__demo { color: var(--marigold); } .plans__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px auto 0; font-size: .85rem; color: var(--plum); text-align: center; } .plans__note .icon { width: 16px; height: 16px; flex: none; color: var(--success); } .addon__price small { display: block; font-size: .7rem; font-weight: 500; color: var(--plum); text-align: right; } /* Vendor types */ .vendor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .vendor-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: transform var(--t-card) var(--ease-out), box-shadow var(--t-card) var(--ease); } .vendor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); } .vendor-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lilac); } .vendor-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); } .vendor-card:hover .vendor-card__img img { transform: scale(1.04); } .vendor-card__name { padding: 16px 18px 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--aubergine); } .vendor-card__more { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px 16px; font-size: .875rem; font-weight: 600; color: var(--jacaranda); } .vendor-card__more .icon { width: 16px; height: 16px; transition: transform var(--t-card) var(--ease); } .vendor-card:hover .vendor-card__more .icon { transform: translateX(3px); } /* Contact details */ .contact-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; } .contact-list a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--aubergine); font-weight: 600; overflow-wrap: anywhere; transition: box-shadow var(--t-card) var(--ease); } .contact-list a:hover { box-shadow: var(--shadow-md); } .contact-list .icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--lilac); color: var(--jacaranda); } .contact-list span { display: grid; line-height: 1.35; } .contact-list small { font-size: .75rem; font-weight: 600; color: var(--plum); } /* ---------- Forms ---------- */ input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="password"], input[type="search"], input[type="number"], select, textarea { width: 100%; min-height: 48px; padding: 11px 15px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); } textarea { min-height: 130px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--jacaranda); box-shadow: 0 0 0 4px rgba(107, 43, 217, .14); } label { font-weight: 600; font-size: .92rem; } .enquiry-form, .form-card { padding: clamp(20px, 3vw, 36px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-lg); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; } .field--full { grid-column: 1 / -1; } .field label, .field legend { padding: 0; font-weight: 600; font-size: .92rem; color: var(--aubergine); } .req { color: var(--hibiscus-deep); } .field [aria-invalid="true"] { border-color: var(--error); background: var(--error-t); } .field__error { margin: 0; font-size: .85rem; font-weight: 600; color: var(--error); } .choice-group legend { margin-bottom: 10px; } .choice-pills { display: flex; flex-wrap: wrap; gap: 8px; } .choice-pill { position: relative; font-weight: 400; } .choice-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; } .choice-pill span { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 15px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: .9rem; font-weight: 600; color: var(--aubergine); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .choice-pill span:hover { border-color: var(--jacaranda); } .choice-pill input:checked + span { border-color: var(--aubergine); background: var(--aubergine); color: #fff; } .choice-pill input:focus-visible + span { outline: 3px solid var(--jacaranda); outline-offset: 2px; } .choice-group.has-error .choice-pill span { border-color: var(--error); } .quote-summary { padding: 14px 16px; border-radius: var(--r-md); background: var(--butter); font-size: .9rem; } .quote-summary ul { margin: 6px 0 0; } .form-foot { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; } .form-foot p { margin: 0; } .form-foot .btn { min-width: 190px; } .form-status { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding: 16px 18px; border-radius: 14px; font-weight: 600; } .form-status p { margin: 0; } .form-status--success { background: var(--success-t); color: var(--success); } .form-status--success .icon { width: 22px; height: 22px; } .form-status--error { background: var(--error-t); color: var(--error); } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; font-weight: 400; } .check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--jacaranda); } .search-form { display: flex; gap: 8px; max-width: 520px; } .search-form input[type="search"] { flex: 1; } .notice { padding: 14px 18px; border-radius: 14px; background: var(--lilac); } /* ---------- Blog ---------- */ .blog { padding-top: clamp(32px, 4vw, 56px); } .feature-post { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-bottom: clamp(32px, 5vw, 56px); } .feature-post__img { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-xl); background: var(--lilac); } .feature-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); } .feature-post:hover .feature-post__img img { transform: scale(1.03); } .feature-post__text h2 { margin: .6rem 0; font-size: var(--fs-h2); } .feature-post__text h2 a { color: inherit; text-decoration: none; } .feature-post__text h2 a:hover { color: var(--jacaranda); } .feature-post__text p:not(.post-card__meta) { color: var(--plum); } .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); } .post-card__link { display: flex; flex-direction: column; gap: 8px; height: 100%; text-decoration: none; color: inherit; } .post-card__img { display: block; overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 6px; border-radius: var(--r-lg); background: var(--lilac); } .post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); } .post-card__link:hover .post-card__img img { transform: scale(1.04); } .post-card__ph { display: block; width: 100%; height: 100%; background: var(--dusk); } .post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: .82rem; color: var(--plum); } .post-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--aubergine); transition: color var(--t-fast) var(--ease); } .post-card__link:hover .post-card__title { color: var(--jacaranda); } .post-card__text { font-size: .92rem; color: var(--plum); } .pagination, .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; } .nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--ivory); color: var(--aubergine); font-weight: 600; text-decoration: none; } .nav-links .page-numbers.current, .nav-links .page-numbers:hover { background: var(--aubergine); color: #fff; } /* Article */ .article__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 48px); } .article__head h1 { margin: .7rem 0 0; } .article__head .is-style-lede { margin: 1rem 0 0; } .article__by { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-weight: 600; color: var(--aubergine); } .article__by .seal { width: 32px; height: 32px; } .article__img { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-xl); } .article__img img { width: 100%; height: 100%; object-fit: cover; } .article__body { padding-bottom: var(--band); } .prose { font-size: 1.0625rem; line-height: 1.75; } .prose > * + * { margin-top: 1.1em; } .prose h2 { margin-top: 1.8em; font-size: var(--fs-h3); } .prose h3 { margin-top: 1.5em; font-size: 1.15rem; } .prose p, .prose ul, .prose ol { margin-bottom: 0; } .prose li + li { margin-top: .4em; } .prose img { border-radius: var(--r-lg); } .prose blockquote { margin: 1.6em 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--marigold); font-family: var(--font-display); font-size: 1.2rem; line-height: 1.4; color: var(--aubergine); } .prose a { font-weight: 600; } .article__body { display: grid; grid-template-columns: 44px minmax(0, 720px); justify-content: center; gap: clamp(20px, 4vw, 48px); } .share { position: sticky; top: calc(var(--header-h) + var(--adm) + 24px); align-self: start; display: flex; flex-direction: column; gap: 8px; } .share a, .share button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--aubergine); transition: background var(--t-fast) var(--ease); } .share a:hover, .share button:hover, .share .is-copied { background: var(--lilac); color: var(--aubergine); } .share .icon { width: 18px; height: 18px; } .comment-form p { margin: 0 0 14px; } .comment-form label { display: block; margin-bottom: 6px; color: var(--aubergine); } .comment-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; } .comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--plum); } .comment-form input[type="submit"] { min-height: 46px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--aubergine); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .comment-form input[type="submit"]:hover { background: var(--jacaranda); } .comment-reply-title { font-size: var(--fs-h3); } .comments, .comment-list { margin-top: 48px; } .comment-list { list-style: none; padding: 0; display: grid; gap: 16px; } .alignwide { max-width: 1100px; margin-inline: auto; } .alignfull { width: 100vw; margin-left: calc(50% - 50vw); } .wp-block-image figcaption, .wp-caption-text { font-size: .85rem; color: var(--plum); text-align: center; } .empty-state { display: grid; justify-items: center; gap: 12px; max-width: 560px; margin-inline: auto; padding: clamp(32px, 5vw, 64px) 20px; text-align: center; } .empty-state .seal { width: 72px; height: 72px; } .empty-state h2 { font-size: var(--fs-h3); margin: 0; } .empty { padding: 28px; border-radius: var(--r-lg); background: var(--ivory); color: var(--plum); text-align: center; } /* 404 */ .hero--404 { text-align: center; padding-block: clamp(56px, 10vw, 140px); } .hero--404 > * { margin-inline: auto; max-width: 40rem; } .hero--404 .nf-seal { width: 88px; height: 88px; margin: 0 auto 24px; } .hero--404 .btn-row { justify-content: center; } /* Gift Shop */ .shop-body { padding-top: clamp(32px, 4vw, 56px); } /* ---------- Affiliate dashboard ---------- */ .band--dash { min-height: 70vh; padding-top: clamp(36px, 5vw, 64px); background: linear-gradient(180deg, var(--lilac), var(--ivory) 400px); } .band--dash .form-status { margin-bottom: 24px; } .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .auth--single { grid-template-columns: minmax(0, 560px); justify-content: center; } .auth__card { padding: clamp(20px, 3vw, 36px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-lg); } .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 24px; padding: 4px; border-radius: 999px; background: var(--lilac); } .seg button { padding: 10px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; color: var(--plum); transition: background var(--t-card), color var(--t-card), box-shadow var(--t-card); } .seg button[aria-selected="true"] { background: #fff; color: var(--aubergine); box-shadow: var(--shadow-sm); } .aff-form { display: grid; gap: 14px; } .aff-form--inline { grid-template-columns: 1fr 1fr; } .aff-form--inline .field--full, .aff-form--inline .btn, .aff-form--inline > p { grid-column: 1 / -1; } .aff-form--code { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; margin: 14px 0 18px; } .ref-code { padding: 4px 8px; background: var(--lilac); font-family: var(--font-mono); font-weight: 700; letter-spacing: .06em; } .code-table__share { white-space: nowrap; text-align: right; } .code-table__share .btn + .btn { margin-left: 6px; } .dash__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; } .dash__head h1 { margin: 0; } .dash__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .note-box { margin-bottom: 24px; padding: 16px 18px; border-radius: var(--r-md); background: var(--butter); color: var(--ink); } .dash__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; } .stat-card { display: grid; gap: 6px; padding: 18px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); } .stat-card small, .stat-card span { font-size: .8rem; font-weight: 600; color: var(--plum); } .stat-card b { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.05; color: var(--aubergine); overflow-wrap: anywhere; } .stat-card--gold { background: var(--marigold); } .stat-card--gold small, .stat-card--gold span { color: var(--aubergine); } .stat-card--pink { background: var(--hibiscus-deep); } .stat-card--royal { background: var(--dusk); } .stat-card--pink :is(b, small, span), .stat-card--royal :is(b, small, span) { color: #fff; } .dash__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .dash-card { min-width: 0; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-sm); } .dash-card h2 { font-size: 1.3rem; } .dash-card--wide { grid-column: 1 / -1; } .copy-field { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 6px 6px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--ivory); } .copy-field input, .copy-field output, .copy-field code { flex: 1; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--aubergine); text-overflow: ellipsis; white-space: nowrap; box-shadow: none; } .copy-field:focus-within { border-color: var(--jacaranda); } [data-copy].is-copied, [data-copy-text].is-copied { --bg: var(--success); } .link-builder { display: grid; gap: 10px; } .dash-table { width: 100%; border-collapse: collapse; font-size: .92rem; } .dash-table th { padding: 10px 12px; border-bottom: 2px solid var(--line); text-align: left; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); white-space: nowrap; } .dash-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .table-wrap { overflow-x: auto; } /* ---------- Vendor AI interactive chat (block) ---------- */ .chat-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 1100px; margin-inline: auto; } .chat-demo__prompts { display: grid; gap: 12px; } .prompt-list { list-style: none; padding: 0; display: grid; gap: 10px; } .prompt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink); font-size: .95rem; text-align: left; transition: border-color var(--t-card) var(--ease), transform var(--t-fast) var(--ease); } .prompt:hover:not(:disabled) { border-color: var(--jacaranda); transform: translateX(3px); } .prompt:disabled { opacity: .45; cursor: not-allowed; } .prompt.is-used { border-color: var(--marigold); } .prompt__n { font-family: var(--font-display); font-size: .8rem; color: var(--hibiscus-deep); } .prompt .icon { width: 18px; height: 18px; color: var(--jacaranda); } .wa { display: flex; flex-direction: column; height: 100%; background: #EFEAE2; } .wa--full .wa__log { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 14px 12px; overflow-y: auto; } .mk-phone--demo { --w: 330px; } .wa-compose__field:has(.wa-compose__text) { justify-content: space-between; gap: 8px; padding-left: 12px; } .wa-compose__text { overflow: hidden; color: #8E8E93; font-size: calc(var(--w) * .042); white-space: nowrap; text-overflow: ellipsis; } .wa-chat .wa-msg { border-radius: 9px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-text); } .wa-chat .wa-msg--out { background: #D9FDD3; border-radius: 9px 9px 2px 9px; } .wa-chat .wa-msg--in { border-radius: 9px 9px 9px 2px; } .wa-chat .wa-msg time { color: #667781; } .wa-day { align-self: center; margin: 0 0 4px; padding: 3px 10px; border-radius: 8px; background: #fff; color: var(--plum); font-size: .7rem; } .wa-msg { position: relative; max-width: 86%; margin: 0; padding: 8px 12px 6px; border-radius: 14px; font-size: .84rem; line-height: 1.45; color: var(--ink); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); } .wa-msg p { margin: 0 0 4px; color: var(--ink); } .wa-msg b { color: var(--aubergine); } .wa-msg time { display: block; text-align: right; font-size: .65rem; color: var(--plum); } .wa-msg--out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 4px; } .wa-msg--in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; } .wa-msg.is-new { animation: msgIn 320ms var(--ease); } .wa-typing { display: inline-flex; align-self: flex-start; gap: 4px; margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff; } .wa-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--plum); animation: typing 1s infinite; } .wa-typing i:nth-child(2) { animation-delay: .15s; } .wa-typing i:nth-child(3) { animation-delay: .3s; } .wa-list { list-style: none; padding: 0; display: grid; gap: 6px; margin: 6px 0; } .wa-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: var(--ivory); } .wa-list b { font-size: .82rem; } .wa-list small { grid-column: 1; font-size: .74rem; color: var(--plum); } .wa-list .chip { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 2px 8px; font-size: .66rem; } .wa-rows { display: grid; gap: 4px; margin: 6px 0; font-size: .78rem; } .wa-rows div { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line); } .wa-rows dt { color: var(--plum); } .wa-rows dd { margin: 0; font-weight: 600; color: var(--aubergine); } .wa-confirm { margin: 4px 0 6px; padding: 8px 10px; border-radius: 10px; background: var(--butter); font-size: .8rem; font-weight: 600; color: var(--aubergine); } .wa-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .wa-actions button, .wa-link { min-height: 36px; padding: 6px 12px; border: 1.5px solid var(--aubergine); border-radius: 999px; background: #fff; color: var(--aubergine); font-size: .76rem; font-weight: 700; } .wa-actions button:first-child { background: var(--aubergine); color: #fff; } .wa-actions button:disabled { opacity: .5; cursor: default; } .wa-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; border-color: var(--jacaranda); color: var(--jacaranda); } .chat-demo__view { position: absolute; right: -24px; top: 50%; z-index: 5; width: min(400px, 92vw); translate: 0 -50%; animation: panelIn 300ms var(--ease); } .record { width: 100%; padding: clamp(16px, 3vw, 26px); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-lg); color: var(--ink); display: grid; gap: 12px; } .record__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .record__title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; color: var(--aubergine); } .record__meta { margin: 0; font-size: .88rem; color: var(--plum); } .record__block { padding: 14px; border-radius: var(--r-md); background: var(--ivory); font-size: .9rem; } .record__block p { margin: 0; } .timeline, .ledger { list-style: none; padding: 0; display: grid; gap: 8px; } .timeline b { display: inline-block; min-width: 4.6em; color: var(--aubergine); } .ledger li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; } .ledger b { color: var(--aubergine); } .ledger .chip { grid-column: 1 / -1; justify-self: start; } .round-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--aubergine); } .round-btn:hover { background: var(--lilac); } .round-btn .icon { width: 18px; height: 18px; } /* First-visit confetti canvas */ .confetti-canvas { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; pointer-events: none; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { body .steps:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } body .steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1000px) { /* Two-column blocks stack on tablets as well as phones */ body :is(.hero__cols, .stack-card__cols, .split-cols, .features__cols, .form-cols, .faq-cols) { flex-wrap: wrap !important; } body :is(.hero__cols, .stack-card__cols, .split-cols, .features__cols, .form-cols, .faq-cols) > .wp-block-column { flex-basis: 100% !important; width: 100%; } .hero__cols > .wp-block-column:last-child { display: flex; justify-content: center; } .hero__photo { width: 100%; max-width: 640px; } .features__cols > .wp-block-column:first-child { order: 2; } body .steps, body .steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vendor-grid, .post-grid, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } body .cards, body .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pricing__addons--grid .addon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faq-group { grid-template-columns: 1fr; } .faq-group > h2 { padding-top: 0; } .site-footer__grid { grid-template-columns: 1fr; } .article__head, .feature-post, .auth, .dash__grid, .article__body { grid-template-columns: 1fr; } .share { position: static; flex-direction: row; } .chat-demo { grid-template-columns: 1fr; justify-items: center; } .chat-demo__prompts { width: 100%; max-width: 560px; } .chat-demo__view { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 75vh; overflow-y: auto; translate: none; } } @media (max-width: 782px) { .pricing__packages, .addon-list { grid-template-columns: 1fr; } body .feature-list { grid-template-columns: 1fr; } } @media (max-width: 600px) { :root { --r-lg: 18px; --r-xl: 22px; } body { line-height: 1.65; } .hero { padding-top: 44px; } body .hero .wp-block-buttons { margin-top: 1.25rem; } body .hero .wp-block-buttons > .wp-block-button { flex: 1 1 auto; } body .hero .wp-block-button__link { width: 100%; } body .wp-block-button__link, .btn { min-height: 44px; padding: 10px 18px; font-size: .925rem; } .section-head > * { max-width: none; } body .section-head + * { margin-top: 36px; } body .steps, body .steps:has(> li:nth-child(4):last-child), body .steps:has(> li:nth-child(5):last-child) { grid-template-columns: 1fr; gap: 14px; } body .steps > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 16px; } .steps > li::before { width: 34px; height: 34px; margin: 0; grid-row: span 2; font-size: .8rem; } .steps > li strong { align-self: center; } .vendor-grid { grid-template-columns: 1fr; gap: 14px; } .vendor-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; } .vendor-card__img { position: relative; grid-row: span 2; align-self: stretch; height: auto; min-height: 76px; aspect-ratio: auto; } .vendor-card__img img { position: absolute; inset: 0; } .vendor-card__name { padding: 14px 14px 2px; font-size: .975rem; } .vendor-card__more { padding: 0 14px 14px; font-size: .82rem; } .post-grid, .plans, .pricing__addons--grid .addon-list { grid-template-columns: 1fr; } body .cards, body .cards:has(> :nth-child(4):last-child), body .cards:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; gap: 10px; } .form-grid, .aff-form--inline, .aff-form--code { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } .enquiry-form, .form-card { padding: 18px; } .pricing__summary { position: static; grid-template-columns: 1fr; padding: 16px; } .pricing__actions { justify-content: stretch; } .pricing__actions .btn { flex: 1 1 100%; } .pricing__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pricing__total b { font-size: 1.35rem; } .package__price b { font-size: 1.85rem; } .cta-card { text-align: left; } .cta-card .is-style-eyebrow, body .cta-card .wp-block-buttons { justify-content: flex-start; } .faq-list summary { padding: 15px 0; font-size: .95rem; } .dash__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .contact-list a { padding: 12px 14px; } /* Mockups scale down a little on phones */ .mk-phone { --w: 252px; } .mk-phone--tall { --w: 272px; } .mk-phone--wa { --w: 270px; } .mk-invite { grid-template-columns: 1fr; min-height: 0; } .mk-invite__photo { height: 130px; } .mk-invite__body { padding: 16px; } .mk-toast--float { left: 12px; right: 12px; bottom: auto; top: 54px; max-width: none; } .mk-board__screen, .stack-card .mk-board__screen { height: 270px; } .mk-mono { font-size: 2.2rem; } .mk-ship { gap: 14px; } .mk-parcel { width: 64px; height: 64px; } .mockup__foot { align-items: flex-start; } } @media (max-width: 420px) { .site-header__inner { gap: 6px; } .brand .logo { gap: .55em; } .brand .logo__text { letter-spacing: .07em; } .header-cart { width: 36px; height: 36px; } .header-cta { padding-inline: 12px; font-size: .8rem; } } /* Phones and tablets: Book a demo lives in the menu, not the header */ @media (max-width: 1100px) { .header-cta { display: none; } } /* ---------- Preloader: the couple climbs the steps to the altar ---------- */ .preloader { position: fixed; inset: 0; z-index: 2000; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--ivory); transition: opacity .5s var(--ease), visibility 0s linear .5s; } .preloader.is-done { opacity: 0; visibility: hidden; } .no-preload .preloader { display: none; } html.is-preloading { overflow: hidden; } .preloader__scene { width: min(260px, 70vw); height: auto; overflow: visible; } .pre-couple { animation: climb 2.3s cubic-bezier(.45, .05, .35, 1) .15s both; } @keyframes climb { 0% { transform: translate(0, 0); } 12% { transform: translate(18px, -12px); } 20% { transform: translate(35px, -15px); } 32% { transform: translate(53px, -27px); } 40% { transform: translate(70px, -30px); } 52% { transform: translate(88px, -42px); } 60% { transform: translate(105px, -45px); } 74% { transform: translate(136px, -57px); } 86%, 100% { transform: translate(163px, -60px); } } .pre-heart { opacity: 0; transform-origin: 200px 46px; animation: heartIn .5s var(--ease-out) 2.3s forwards; } @keyframes heartIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } } .preloader__logo .logo { --logo-fs: 13px; } .preloader__bar { width: 140px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); } .preloader__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--jacaranda), var(--hibiscus), var(--marigold)); transform-origin: 0 50%; animation: fill 2.4s var(--ease) both; } @media (prefers-reduced-motion: reduce) { .preloader { display: none; } } /* ---------- Gift Shop: sale countdown and recent purchases ---------- */ .sale { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 64px); } body .sale h2 { margin: .5rem 0 0; font-size: var(--fs-h1); } body .sale .is-style-lede { margin-top: .8rem; } .sale__ends { margin: 1rem 0 0; font-size: .9rem; font-weight: 600; color: var(--marigold); } .countdown { display: flex; gap: clamp(8px, 1.2vw, 14px); } .countdown__unit { display: grid; justify-items: center; gap: 6px; min-width: clamp(68px, 8vw, 104px); padding: clamp(14px, 1.6vw, 22px) 10px; border-radius: 20px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } .countdown__unit b { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .countdown__unit small { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .countdown.is-over { opacity: .5; } .buy-toast { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 12px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 40px 12px 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s; } .buy-toast.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .buy-toast__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B2BD9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") center / 20px no-repeat; } .buy-toast p { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--ink); } .buy-toast b { color: var(--aubergine); } .buy-toast a { font-weight: 600; } .buy-toast small { display: block; margin-top: 2px; font-size: .74rem; color: var(--plum); } .buy-toast__close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--plum); font-size: 1.2rem; line-height: 1; cursor: pointer; } .buy-toast__close:hover { background: var(--ivory); } /* Pay on WhatsApp: order confirmation */ .wa-pay { display: grid; justify-items: start; gap: 10px; margin: 0 0 32px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); background: var(--success-t); box-shadow: inset 0 0 0 1px rgba(24, 134, 75, .25); } .wa-pay h2 { margin: 0; font-size: var(--fs-h3); } .wa-pay p { margin: 0; max-width: 40rem; } .wa-pay__desc { margin: 0; } /* ---------- Case studies ---------- */ .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .case-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--ivory); transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease); } .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .case-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; } .case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .case-card:hover .case-card__media img { transform: scale(1.04); } .case-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; } .case-card__client { margin: 0; font-size: .8rem; font-weight: 600; color: var(--plum); } body .case-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.2; } .case-card h3 a { color: var(--aubergine); text-decoration: none; } .case-card h3 a::after { content: ""; position: absolute; inset: 0; } .case-card__body > p { margin: 0; font-size: .92rem; } .case-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto !important; padding-top: 6px; font-weight: 700; color: var(--jacaranda); } .case-card__more .icon { width: 16px; height: 16px; } .case-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 4px; padding: 14px 0 0; border-top: 1px solid var(--line); } .case-results div { min-width: 0; } .case-results dt { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: var(--aubergine); overflow-wrap: anywhere; } .case-results dd { margin: 4px 0 0; font-size: .74rem; line-height: 1.35; color: var(--plum); } .case-results--lg { max-width: 820px; margin-top: 32px; border-color: rgba(255, 255, 255, .18); } .case-results--lg dt { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); color: var(--marigold); } .case-results--lg dd { font-size: .88rem; color: rgba(255, 255, 255, .78); } .case__hero .is-style-eyebrow a { color: inherit; } .case__body { display: grid; gap: 32px; max-width: 820px; } .case__img { margin: 0; } .case__img img { width: 100%; border-radius: var(--r-xl); } .cases-empty { display: grid; justify-items: center; gap: 18px; max-width: 40rem; margin-inline: auto; text-align: center; } .cases-empty .block-note { width: 100%; text-align: left; } /* ---------- Link in bio ---------- */ body.links-page { min-height: 100vh; background: var(--grain) 0 0 / 180px, radial-gradient(70% 50% at 50% 0%, rgba(166, 91, 242, .45), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(216, 27, 114, .25), transparent 70%), var(--aubergine); background-attachment: fixed; color: rgba(255, 255, 255, .86); } .links { display: grid; justify-items: center; gap: 22px; width: min(480px, 100%); margin-inline: auto; padding: clamp(40px, 8vh, 72px) 20px 40px; text-align: center; } .links__logo .logo { --logo-fs: 15px; } .links__logo .logo__text { flex-direction: column; align-items: center; } .links .logo { flex-direction: column; gap: 14px; } .links .logo__mark { width: 4.2em; height: 4.2em; } body .links__bio { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .82); } body .links__list { display: grid; gap: 12px; width: 100%; } body .links__list .wp-block-button { width: 100%; } body .links__list .wp-block-button__link { width: 100%; min-height: 56px; justify-content: center; font-size: 1rem; } .links__foot { margin: 8px 0 0; font-size: .85rem; color: rgba(255, 255, 255, .7); } .links__foot a { color: #fff; } /* ---------- Book a demo ---------- */ .enquiry-form--demo select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B2BD9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; padding-right: 40px; } /* ---------- Affiliate links per offer ---------- */ .aff-links { list-style: none; padding: 0; margin: 14px 0 10px; display: grid; gap: 12px; } .aff-links label { display: block; margin-bottom: 4px; font-size: .82rem; font-weight: 700; color: var(--aubergine); } .aff-links .copy-field { margin: 0; } .btn--icon { width: 40px; padding-inline: 0; justify-content: center; } /* ---------- Front-end editor ---------- */ .fe-bar { position: fixed; left: 16px; bottom: 16px; z-index: 1500; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 16px; background: #140530; box-shadow: var(--shadow-lg); font-size: .85rem; } .fe-btn { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .fe-btn:hover { background: rgba(255, 255, 255, .2); } .fe-btn--main { background: var(--marigold); color: var(--aubergine); } .fe-btn--main:hover { background: var(--marigold-soft); } .fe-btn[disabled] { opacity: .6; } .fe-hint, .fe-status { padding: 0 8px; color: rgba(255, 255, 255, .8); } .fe-status:empty { display: none; } .fe-on [data-fe] { outline: 1.5px dashed rgba(107, 43, 217, .55); outline-offset: 4px; border-radius: 4px; cursor: text; } .fe-on :is(.band--dusk, .band--aubergine, .cta-card, .stack-card:nth-child(3n+2)) [data-fe] { outline-color: rgba(255, 194, 26, .7); } .fe-on [data-fe]:hover, .fe-on [data-fe]:focus { outline-style: solid; outline-color: var(--hibiscus); } .fe-on [data-fe-type="image"] { cursor: pointer; } .fe-on .reveal, .fe-on [style*="opacity"] { opacity: 1 !important; transform: none !important; } .fe-link { position: absolute; z-index: 1600; width: 290px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg); font-size: .8rem; font-weight: 700; color: var(--aubergine); } .fe-link input { min-height: 38px; margin-top: 6px; padding: 6px 10px; font-size: .85rem; font-weight: 400; } @media (max-width: 1100px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sale { grid-template-columns: 1fr; } } @media (max-width: 600px) { .cases { grid-template-columns: 1fr; } .countdown { justify-content: space-between; gap: 6px; } .countdown__unit { min-width: 0; flex: 1; padding-inline: 4px; border-radius: 14px; } .case-results--lg { grid-template-columns: 1fr; gap: 14px; } .buy-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } .fe-hint { display: none; } } /* ---------- Curved section edges: a light section after a dark one rises into it with a domed top ---------- */ :is(.band--dusk, .band--aubergine):has(+ .band:not(.band--dusk, .band--aubergine)) { padding-bottom: calc(var(--band) + var(--dome)); } :is(.band--dusk, .band--aubergine) + .band:not(.band--dusk, .band--aubergine) { z-index: 1; margin-top: calc(var(--dome) * -1); border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0; } /* ---------- Reduced motion: no movement; mockups show their final screen ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html:not(.lenis) { scroll-behavior: auto; } } @media print { .site-header, .mockup__foot, .stack-index, .pricing__summary { display: none; } .band { padding-block: 24px; } } .case-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 0; font-size: .875rem; color: rgba(255, 255, 255, .8); } .case-sample .mk-tag { margin: 0; } /* v2.4: more room between paragraphs, lists and cards, mostly on phones */ body :where(.is-layout-flow, .is-layout-constrained) > .wp-block-buttons { margin-top: 2rem; } @media (max-width: 600px) { body :where(.is-layout-flow, .is-layout-constrained) > * + * { margin-block-start: 1.15rem; } body .wp-block-columns { gap: 32px; } .btn-row { margin-top: 28px; } } /* ========================================================================== v2.5 look, after the reference Ayoola chose: flat brand colour, hairlines on a column grid, squared corners, mono labels and large left-aligned headings. No glows, grain or labels laid over photos. ========================================================================== */ :root { --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px; --shadow-sm: none; --dome: 0px; --dusk: linear-gradient(45deg, #23094B 0%, #6B2BD9 60%, #A65BF2 100%); --grid: rgba(35, 9, 75, .035); --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-h1: clamp(2.3rem, 1.15rem + 4.2vw, 5rem); --fs-h2: clamp(1.85rem, 1.1rem + 2.8vw, 3.6rem); } /* Thin column lines behind light sections, lined up with the content edges and quarters */ :is(.band--ivory, .band--white, .band--lilac, .band--cta) { background-image: linear-gradient(90deg, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px)); background-size: calc(min(var(--max), 100% - 2 * var(--gutter)) / 4) 100%; background-position: 50% 0; } /* The brand gradient exactly as the guidelines show it: one smooth 45° sweep, no glows or grain */ .band--dusk::before, .band--aubergine::before, .dusk-run::before { content: none; } .cta-card::before, .cta-card::after { content: none; } .stack-card:nth-child(3n+2) { background: var(--dusk); } body.links-page { background: var(--dusk) fixed; } /* Marigold on flat jacaranda needs the lighter shade for small text */ .band--dusk { --label: var(--marigold-soft); --accent: var(--marigold-soft); } /* Type: mono labels, big tight headings */ .is-style-eyebrow, .eyebrow, .site-footer__title, .case-card__meta { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; } h1, h2 { letter-spacing: -.035em; line-height: 1.02; } .section-head > * { max-width: 52rem; } .split-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; } .split-head > .section-head { flex: 1 1 30rem; } body .split-head > .section-head + .wp-block-buttons { margin: 0; } body .split-head + * { margin-top: clamp(32px, 4vw, 56px); } /* Squared, flat buttons and controls (still set in Avant Garde) */ body .wp-block-button__link, .btn { border-radius: var(--r-sm); background-image: none; box-shadow: none; } .chip, .cat-chip, .stack-index a { border-radius: var(--r-sm); } .faq-list summary::after { border-radius: var(--r-sm); } /* Cards: hairline edges, no lift */ body .is-style-card, body .steps > li, .case-card, body .stack-card { border-radius: 0; box-shadow: none; } .is-style-card:has(.card-link):hover, .case-card:hover { transform: none; box-shadow: none; border-color: var(--jacaranda); } .case-card { background: #fff; border: 1px solid var(--line); transition: border-color var(--t-card) var(--ease); } .case-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: .7rem; text-transform: uppercase; color: var(--label); } .case-card__meta .case-card__sample { color: var(--warning); } .cta-card { border-radius: 0; } /* Numbered steps as index cards: number top right, title over a rule */ body .steps > li { position: relative; padding: 20px 22px 24px; background: #fff; } .steps > li::before { position: absolute; top: 20px; right: 22px; display: block; width: auto; height: auto; margin: 0; border-radius: 0; background: none; color: var(--label); font-family: var(--font-mono); font-weight: 500; font-size: .8rem; } .steps > li strong { margin-bottom: 12px; padding: 0 40px 12px 0; border-bottom: 1px solid var(--line); font-size: 1.15rem; } @media (min-width: 1001px) { .process .steps { padding-bottom: 48px; } .process .steps > li { transform: translateY(var(--y, 0)) rotate(var(--tilt, 0deg)); box-shadow: 0 26px 44px -32px rgba(35, 9, 75, .45); } .process .steps > li:nth-child(1) { --tilt: -1.6deg; } .process .steps > li:nth-child(2) { --tilt: 1.2deg; --y: 36px; } .process .steps > li:nth-child(3) { --tilt: -.8deg; --y: 8px; } .process .steps > li:nth-child(4) { --tilt: 1.8deg; --y: 48px; } } /* Homepage hero: the heading on the left, the three phones on the right, on flat jacaranda */ .hero--home { padding-block: clamp(32px, 1rem + 3.5vw, 64px) clamp(40px, 1rem + 4vw, 80px); } body .hero--home h1 { font-size: clamp(2.5rem, 1rem + 4.2vw, 5.1rem); line-height: 1; letter-spacing: -.045em; } .hero--home .hero__cols > .wp-block-column:first-child { flex: 1 1 48%; } .hero--home .hero__cols > .wp-block-column:last-child { flex: 1 1 52%; } body .price-teaser__figure { margin: .35rem 0 .1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.55rem, 1.15rem + 1.1vw, 2.2rem); line-height: 1.1; letter-spacing: -.02em; color: var(--heading); } /* Footer: the seal large beside the tagline, then link columns split by hairlines */ @media (max-width: 640px) { .site-footer__cols > div { padding-left: 14px; } body .steps > li { display: block; padding: 16px 18px 18px; } .steps > li::before { top: 16px; right: 18px; width: auto; height: auto; } } /* Vendor AI credits: free credits first, the packs beside them, then what each action uses */ .credits > * { max-width: var(--max); margin-inline: auto; } .credits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); } .credit-free { --heading: #fff; --text: rgba(255, 255, 255, .9); --label: var(--marigold-soft); display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 32px); background: var(--jacaranda); color: var(--text); } .credit-free p { margin: 0; } .credit-free__num { display: grid; gap: 6px; } .credit-free__num b { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: .9; letter-spacing: -.04em; color: var(--marigold-soft); } .credit-free__num span, .plan__credits { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--label); } .credit-free__actions { display: grid; gap: 6px; margin-top: auto; } .credit-free__actions .btn { justify-content: center; } .credit-free .plan__demo { color: #fff; } .credits .plan { border: 0; border-radius: 0; background: #fff; box-shadow: none; } .credits .plan--featured { background: var(--aubergine); } .credits .plan__credits { margin: 0; } .credits .plan__credits b { font-weight: 700; } .plan--featured .plan__credits { color: var(--marigold-soft); } .plan__flag { border-radius: var(--r-sm); } .credit-uses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 56px); } .credit-uses h3 { margin: 0; } .credit-uses dl { margin: 0; border-top: 1px solid var(--line); } .credit-uses dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .credit-uses dt { font-weight: 600; color: var(--aubergine); } .credit-uses dd { flex: none; margin: 0; font-family: var(--font-mono); font-size: .82rem; color: var(--label); text-align: right; } .credits .plans__note { justify-content: flex-start; text-align: left; } @media (max-width: 1100px) { .credits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .credits__grid, .credit-uses { grid-template-columns: 1fr; } .credit-uses dl > div { flex-direction: column; gap: 2px; } .credit-uses dd { text-align: left; } } /* ========================================================================== v2.6: closer to the reference. Giant headings, a statement that steps down into the next section, offers as an accordion beside their mockup, scattered step cards, staggered case studies, a news grid and a footer led by the seal. main.js adds the motion: rolling link text, headings rising word by word, images opening, parallax. ========================================================================== */ body .giant { margin-block: 0; font-size: clamp(2.7rem, .9rem + 6.2vw, 7.4rem); font-weight: 400; line-height: .94; letter-spacing: -.055em; color: var(--jacaranda); } body .giant.is-centred { max-width: 13ch; margin-inline: auto; text-align: center; } .wp-block-buttons.is-centred { justify-content: center; } .wp-block-buttons.is-wide, .wp-block-buttons.is-wide > .wp-block-button { width: 100%; } .wp-block-buttons.is-wide .wp-block-button__link { width: 100%; min-height: 58px; justify-content: center; } /* Homepage hero: a full screen, the heading low on the left, the phones on the right */ .hero--home { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - var(--adm)); padding-block: clamp(24px, 3vw, 48px) clamp(32px, 4vw, 64px); } .hero--home .hero__cols { align-items: flex-end !important; } body .hero--home h1 { font-size: clamp(2.2rem, .8rem + 3.3vw, 4.5rem); font-weight: 400; line-height: 1; letter-spacing: -.05em; } .hero--home .hero__cols > .wp-block-column:first-child { padding-bottom: clamp(8px, 2vw, 32px); } /* Statement: who we are in large type; the section ends in two steps on the column lines */ /* Hero and statement share one gradient (.dusk-run); it ends in two steps on the column lines */ .dusk-run { --step: clamp(36px, 5.5vw, 84px); --q: calc(min(var(--max), 100% - 2 * var(--gutter)) / 4); --x0: calc((100% - min(var(--max), 100% - 2 * var(--gutter))) / 2); position: relative; background: var(--dusk) border-box; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--x0) + 2 * var(--q)) 100%, calc(var(--x0) + 2 * var(--q)) calc(100% - var(--step)), calc(var(--x0) + var(--q)) calc(100% - var(--step)), calc(var(--x0) + var(--q)) calc(100% - 2 * var(--step)), 0 calc(100% - 2 * var(--step))); } body .dusk-run > * { margin-block: 0; } .dusk-run > .band--dusk { background: none; } .dusk-run > .band--dusk::before { content: none; } .dusk-run > .hero--home { min-height: calc(100svh - var(--adm) - var(--header-h)); } body .statement { --step: clamp(36px, 5.5vw, 84px); --q: calc(min(var(--max), 100% - 2 * var(--gutter)) / 4); --x0: calc((100% - min(var(--max), 100% - 2 * var(--gutter))) / 2); position: relative; padding-top: clamp(48px, 7vw, 112px); } .statement:not(.dusk-run > *) { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--x0) + 2 * var(--q)) 100%, calc(var(--x0) + 2 * var(--q)) calc(100% - var(--step)), calc(var(--x0) + var(--q)) calc(100% - var(--step)), calc(var(--x0) + var(--q)) calc(100% - 2 * var(--step)), 0 calc(100% - 2 * var(--step))); } .band.band--dusk.statement { padding-bottom: calc(clamp(48px, 6vw, 96px) + 2 * var(--step)); } .hero--home + .statement { margin-top: -1px; } body .statement__text { margin-block: 0 clamp(24px, 3vw, 40px); padding-right: clamp(0px, 22vw, 380px); font-family: var(--font-display); font-size: clamp(1.55rem, .95rem + 2.3vw, 3.2rem); line-height: 1.12; letter-spacing: -.03em; color: #fff; } .statement > .statement__tag { position: absolute; bottom: calc(var(--step) * .35); left: calc(var(--x0) + 2 * var(--q) + 14px); max-width: none; margin: 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold-soft); } /* Offers: the open offer's mockup stays beside the list */ .offers .giant { margin-bottom: clamp(36px, 6vw, 96px); } body .offer-acc { gap: 0; align-items: flex-start !important; } .offer-acc > .wp-block-column:first-child { flex: 0 0 50% !important; position: sticky; top: calc(var(--header-h) + var(--adm) + 16px); padding-right: clamp(16px, 3vw, 48px); } .offer-acc > .wp-block-column:last-child { flex: 1 1 50% !important; padding-left: 14px; } .offer-media { display: grid; justify-items: center; } .offer-media > .mockup { grid-area: 1 / 1; display: none; width: 100%; animation: mediaIn 900ms var(--ease-out) both; } .offer-media > .mockup:first-child, .offer-acc:has(.offer-item:nth-of-type(2)[open]) .offer-media > .mockup:nth-child(2), .offer-acc:has(.offer-item:nth-of-type(3)[open]) .offer-media > .mockup:nth-child(3) { display: block; } .offer-acc:has(.offer-item:nth-of-type(2)[open], .offer-item:nth-of-type(3)[open]) .offer-media > .mockup:first-child { display: none; } @keyframes mediaIn { from { clip-path: inset(0 0 100% 0); transform: translateY(24px); } to { clip-path: inset(0 0 -40% 0); transform: none; } } body .offer-intro { max-width: 36ch; margin: 0 0 clamp(24px, 3vw, 40px) auto; font-family: var(--font-mono); font-size: .76rem; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--jacaranda); } .offer-item { border-top: 1px solid rgba(107, 43, 217, .35); } .offer-item:last-of-type { border-bottom: 1px solid rgba(107, 43, 217, .35); } .offer-item + .wp-block-buttons { margin-top: 14px; } .offer-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.3rem, .95rem + 1.1vw, 2rem); line-height: 1.15; letter-spacing: -.025em; color: var(--jacaranda); } .offer-item > summary::-webkit-details-marker { display: none; } .offer-item > summary::after, .faq-list summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 460ms var(--ease-out); } .offer-item[open] > summary::after, .faq-list details[open] summary::after { transform: rotate(45deg); background-color: transparent; } .is-closing > summary::after, .faq-list details.is-closing summary::after { transform: none; } .offer-item > :not(summary) { max-width: 40rem; } .offer-item > summary + * { margin-top: 4px; } .offer-item > :last-child { margin-bottom: 24px; } /* How we work: the giant heading on the left, the step cards scattered on the right */ .process { border-top: 1px solid rgba(107, 43, 217, .25); } body .process__cols { align-items: flex-start !important; } .process__cols > .wp-block-column:first-child { flex: 0 0 38% !important; position: sticky; top: calc(var(--header-h) + var(--adm) + 24px); } .process__cols > .wp-block-column:last-child { flex: 1 1 62% !important; } body .process .steps { display: flex; flex-direction: column; gap: clamp(20px, 4vw, 56px); padding: 8px 0 32px; } body .process .steps > li { width: min(400px, 82%); margin: 0; transform: translateY(calc(var(--y, 0px) + var(--py, 0px))) rotate(var(--tilt, 0deg)); box-shadow: 0 26px 44px -32px rgba(35, 9, 75, .45); } .process .steps > li:nth-child(odd) { margin-left: 6%; } .process .steps > li:nth-child(even) { margin-left: auto; } .process .steps > li:nth-child(1) { --tilt: 2.4deg; } .process .steps > li:nth-child(2) { --tilt: -1.8deg; } .process .steps > li:nth-child(3) { --tilt: 1.2deg; } .process .steps > li:nth-child(4) { --tilt: -2.6deg; } /* Case studies: a giant centred heading, then three staggered columns with the title over the photo */ .stories { border-top: 1px solid rgba(107, 43, 217, .25); } .stories .giant { margin-bottom: clamp(40px, 7vw, 112px); } .stories .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2.2vw, 32px); } .stories .case-card { border: 0; background: none; overflow: visible; } .stories .case-card:nth-child(3n+2) { margin-top: clamp(32px, 7vw, 120px); } .stories .case-card:nth-child(3n) { margin-top: clamp(64px, 14vw, 240px); } .stories .case-card__body { order: -1; gap: 6px; padding: 0 0 14px; } .stories .case-card__body > p:not([class]), .stories .case-results, .stories .case-card__client, .stories .case-card__more { display: none; } body .stories .case-card h3 { font-size: clamp(1.2rem, .95rem + .8vw, 1.65rem); font-weight: 400; letter-spacing: -.02em; } .stories .case-card h3 a { color: var(--jacaranda); } .stories .cases + .wp-block-buttons { margin-top: clamp(32px, 5vw, 64px); } /* From the blog: a large first post, then a grid of titles that fill with colour on hover */ .news { border-top: 1px solid rgba(107, 43, 217, .25); } .news:not(:has(.post-grid)) { display: none; } .news__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 4vw, 48px); } .news__head > * { margin: 0; } body .news__all a { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--jacaranda); text-decoration: none; } .news__all a::before { content: "[ "; } .news__all a::after { content: " \2192 ]"; } .news .post-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0; } .news .post-card:first-child { grid-row: span 2; padding-right: clamp(16px, 2vw, 28px); } .news .post-card:first-child .post-card__img { aspect-ratio: 4 / 3; border-radius: 0; } .news .post-card:not(:first-child) :is(.post-card__img, .post-card__text) { display: none; } .news .post-card:not(:first-child) .post-card__link { justify-content: space-between; min-height: clamp(180px, 18vw, 250px); padding: 16px; border-top: 1px solid rgba(107, 43, 217, .3); transition: background-color 500ms var(--ease-out); } .news .post-card:nth-child(n+4) .post-card__link { border-bottom: 1px solid rgba(107, 43, 217, .3); } .news .post-card:not(:first-child) .post-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, .9rem + .4vw, 1.3rem); color: var(--jacaranda); } .news .post-card:not(:first-child) .post-card__link:hover { background: var(--jacaranda); } .news .post-card:not(:first-child) .post-card__link:hover :is(.post-card__title, .post-card__meta, time) { color: #fff; } .news .post-card:not(:first-child) .post-card__link:hover .cat-chip { background: rgba(255, 255, 255, .16); color: #fff; } .news .post-card:first-child .post-card__title { font-weight: 400; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); letter-spacing: -.02em; color: var(--jacaranda); } /* Footer: the seal large on the left, mono link columns on the right */ .site-footer { padding-top: clamp(48px, 7vw, 104px); } .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(36px, 5vw, 80px); padding-bottom: clamp(40px, 6vw, 88px); } .site-footer__mark { display: grid; justify-items: start; gap: clamp(20px, 3vw, 36px); } .site-footer__seal { width: clamp(150px, 27vw, 380px); height: auto; } /* Footer seal as a coin: turns once every 16 seconds on its vertical axis, with a light sweeping across its face */ .coin { position: relative; aspect-ratio: 1; perspective: 1600px; filter: drop-shadow(0 18px 36px rgba(18, 4, 42, .35)); } .coin__body { position: absolute; inset: 0; transform-style: preserve-3d; animation: coinTurn 16s linear infinite; } .coin__face, .coin__edge i { position: absolute; inset: 0; border-radius: 50%; } .coin__face { overflow: hidden; backface-visibility: hidden; transform: translateZ(4px); } .coin__face--back { transform: rotateY(180deg) translateZ(4px); } .coin__face .seal { display: block; width: 100%; height: 100%; } .coin__face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .12) 53%, transparent 60%) no-repeat; background-size: 260% 100%; background-position: 160% 0; mix-blend-mode: soft-light; animation: coinShine 8s ease-in-out infinite; pointer-events: none; } .coin__edge { position: absolute; inset: 0; transform-style: preserve-3d; } .coin__edge i { background: linear-gradient(90deg, #6B4E12, #D9B65E 45%, #F6E4A6 52%, #A8832E 70%, #6B4E12); } .coin__edge i:nth-child(1) { transform: translateZ(3px); } .coin__edge i:nth-child(2) { transform: translateZ(2px); } .coin__edge i:nth-child(3) { transform: translateZ(1px); } .coin__edge i:nth-child(5) { transform: translateZ(-1px); } .coin__edge i:nth-child(6) { transform: translateZ(-2px); } .coin__edge i:nth-child(7) { transform: translateZ(-3px); } @keyframes coinTurn { to { transform: rotateY(360deg); } } @keyframes coinShine { 0%, 50% { background-position: 160% 0; } 80%, 100% { background-position: -60% 0; } } @media (prefers-reduced-motion: reduce) { .coin__body, .coin__face::after { animation: none; } } .site-footer__mark .site-footer__tagline { max-width: 24ch; margin: 0; font-size: clamp(1.25rem, .9rem + 1vw, 1.8rem); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; } .site-footer__side { display: grid; gap: clamp(32px, 5vw, 64px); } .site-footer__cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 0; } .site-footer__cols > div { padding: 0 16px 8px; border-left: 1px solid rgba(255, 255, 255, .18); } .site-footer__cols ul { gap: 6px; } .site-footer__cols a { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; } .site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); } .site-footer__brand .site-footer__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; } .site-footer__contact a { font-family: var(--font-mono); font-weight: 500; font-size: .8rem; letter-spacing: .04em; } .site-footer__legal { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; } /* Headings in the regular weight, as in the reference */ h1, h2 { font-weight: 400; } /* Motion hooks (main.js). Rolling link text: a copy waits below and rolls up on hover. */ .roll { display: inline-block; height: 1.3em; overflow: hidden; line-height: 1.3; vertical-align: bottom; white-space: nowrap; } .roll__t { display: block; text-shadow: 0 1.3em 0 currentColor; transition: transform 560ms var(--ease-out); } @media (hover: hover) { :is(a, button):hover > .roll .roll__t, :is(a, button):hover .roll .roll__t { transform: translateY(-1.3em); } } .w { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; } .w > i { display: inline-block; font-style: inherit; will-change: transform; } .w--plain { overflow: visible; padding: 0; margin: 0; } @media (max-width: 1000px) { body .offer-acc, body .process__cols { flex-wrap: wrap !important; } .offer-acc > .wp-block-column:is(:first-child, :last-child), .process__cols > .wp-block-column:is(:first-child, :last-child) { flex-basis: 100% !important; position: static; padding: 0; } .offer-acc > .wp-block-column:first-child { margin-bottom: 24px; } .site-footer__grid { grid-template-columns: 1fr; } } @media (max-width: 781px) { body .statement, .dusk-run { --step: 28px; } .statement > .statement__tag { position: static; margin-top: 24px; } .stories .case-card:nth-child(n) { margin-top: 0; } .news .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .news .post-card:first-child { grid-column: 1 / -1; grid-row: auto; padding: 0 0 20px; } body .process .steps > li { width: 92%; } } @media (max-width: 640px) { .stories .cases { grid-template-columns: 1fr; } .offer-intro { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .offer-media > .mockup, .menu-open .site-main::before { animation: none; } .roll__t, .offer-item > summary::after, .faq-list summary::after { transition: none; } } /* ---------- v2.7: phones and tablets hide the header while the stacked offers (and their tabs) fill the screen ---------- */ @media (max-width: 1100px) { .site-header { transition: transform .4s var(--ease); } .header-away .site-header { transform: translateY(calc(-100% - var(--adm) - 2px)); } .stack-index { transition: top .4s var(--ease); } .header-away .stack-index { top: var(--adm); } } @media (max-width: 1100px) and (prefers-reduced-motion: reduce) { .site-header, .stack-index { transition: none; } } /* ---------- v2.7: guide pages, breadcrumbs, guide links, article FAQs, markets row ---------- */ .crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 18px; padding: 0; list-style: none; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .crumbs li { display: inline-flex; align-items: center; min-width: 0; } .crumbs li + li::before { content: "/"; margin: 0 .6em; opacity: .5; } .crumbs a { color: inherit; text-decoration: none; } .band--dusk .crumbs a { opacity: .78; } .crumbs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .crumbs [aria-current] { overflow: hidden; max-width: 34ch; white-space: nowrap; text-overflow: ellipsis; } .band--dusk .crumbs { color: #fff; } .article__text .crumbs { color: var(--plum); } .guide-hero .guide__photo { margin: 0; } .guide-hero .guide__photo img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: var(--r-lg); } .guide .guide__body, .guide__faq { max-width: 46rem; margin-inline: auto; } .guide__body > h2:first-child { margin-top: 0; } .guide__faq h2 { margin: 0 0 18px; font-size: var(--fs-h3); } .guide-links__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .guide-links__list li { border-bottom: 1px solid var(--line); } .guide-links__list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 20px 0; color: var(--aubergine); text-decoration: none; } .guide-links__n { grid-row: span 2; font-family: var(--font-mono); font-size: .75rem; color: var(--jacaranda); } .guide-links__t { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; } .guide-links__d { grid-column: 2; font-size: .9rem; line-height: 1.5; color: var(--plum); } .guide-links__list .icon { grid-row: 1 / span 2; grid-column: 3; align-self: center; width: 20px; height: 20px; color: var(--jacaranda); transition: transform var(--t-card) var(--ease); } .guide-links__list a:hover .guide-links__t { color: var(--jacaranda); } .guide-links__list a:hover .icon { transform: translateX(4px); } .post-faq { margin-top: 2.4em; } .post-faq h2 { margin-bottom: .6em; } .site-footer__markets { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0; padding: 18px 0 0; list-style: none; font-size: .9rem; } .site-footer__markets li:first-child { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; } .site-footer__markets a { color: inherit; text-decoration: none; } .site-footer__markets a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Wedding Website hero: the desktop window on wide screens, the same invitation on an iPhone on phones and tablets */ .mockup--invite-phone { display: none; } @media (max-width: 1100px) { .mockup--invite { display: none; } .mockup--invite-phone { display: flex; } } /* ========================================================================== v2.8: guide page mockups (template-parts/mockups/guide.php) ========================================================================== */ .guide-hero .mockup--guide { align-self: center; } .mockup--guide .mk-stage { gap: 9px; } .mk-phone--safari .mk-stage.is-on { justify-content: flex-start; } .mk-live__count { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .6rem; font-weight: 700; } .mk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mk-stats span { display: grid; padding: 10px 12px; border-radius: 12px; background: var(--lilac); } .mk-stats b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; color: var(--aubergine); } .mk-stats small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--plum); } .mk-fund { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--dusk); color: #fff; } .mk-fund p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font-size: .78rem; } .mk-fund small { color: rgba(255, 255, 255, .75); font-size: .66rem; } .mk-fund i { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .25); } .mk-fund i b { display: block; height: 100%; border-radius: 3px; background: var(--marigold); } .mk-fund__chips { justify-content: flex-start !important; } .mk-fund__chips span { padding: 4px 8px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; font-size: .66rem; font-weight: 700; } .mk-fund__chips .is-on { border-color: var(--marigold); background: var(--marigold); color: var(--aubergine); } .mk-headline { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; color: var(--aubergine); } .mk-lines { display: grid; gap: 6px; } .mk-lines i { display: block; height: 6px; border-radius: 3px; background: #ECE6F3; } .mk-lines i:last-child { width: 70%; } .mk-guests { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .mk-guests li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--ivory); } .mk-guests__i { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lilac); color: var(--jacaranda); font-size: .8rem; font-weight: 700; } .mk-guests b { font-size: .76rem; color: var(--aubergine); line-height: 1.2; } .mk-guests small { grid-column: 2; font-size: .64rem; color: var(--plum); } .mk-guests em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-size: .6rem; } .mk-phone--safari .mk-stage--world.is-on, .mk-phone--safari .mk-stage--langs.is-on { justify-content: center; } .mk-places { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; } .mk-places span { padding: 5px 9px; border-radius: 999px; background: var(--lilac); color: var(--aubergine); font-size: .66rem; font-weight: 700; } /* Instagram profile */ .ig { gap: 10px !important; padding-inline: 12px !important; } .mk-phone .mk-stage.ig { justify-content: flex-start; } .ig__bar { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: #111; } .ig__bar .icon { width: 18px; height: 18px; } .ig__head { display: grid; grid-template-columns: 58px repeat(3, 1fr); align-items: center; gap: 6px; text-align: center; } .ig__head p { display: grid; margin: 0; } .ig__head b { font-size: .82rem; color: #111; } .ig__head small { font-size: .58rem; color: #555; } .ig__avatar { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #0F5E4A; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #D6249F; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .ig__avatar em, .ig__tile b em { font-style: normal; color: #E6C77A; } .ig__bio { display: grid; gap: 1px; font-size: .66rem; line-height: 1.35; color: #222; } .ig__bio b { font-size: .7rem; } .ig__bio span { color: #00376B; } .ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-inline: -12px; } .ig__grid img, .ig__tile { width: 100%; aspect-ratio: 1; object-fit: cover; } .ig__tile { display: grid; place-content: center; justify-items: center; gap: 2px; background: #0F5E4A; color: #fff; text-align: center; } .ig__tile b { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; } .ig__tile small { font-size: .46rem; letter-spacing: .1em; text-transform: uppercase; color: #E6C77A; } .ig__tile--count { background: #C99F45; } .ig__tile--count small { color: #fff; } .ig__tile--light { background: #FAF7F2; color: #0F5E4A; } .ig__tile--light small { color: #A8832E; } /* Printed items on a desk, in the sample couple's emerald, gold and ivory */ .mk-desk { position: relative; display: grid; width: min(100%, 420px); aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 22px; background: radial-gradient(120% 80% at 30% 20%, #FBF8F2, #EDE4D3); box-shadow: var(--shadow-lg); } .mk-desk .mk-stage { align-items: center; justify-content: center; padding: 24px; } .pr-mono { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: #0F5E4A; } .pr-mono em, .pr-names em, .pr-fan b em, .pr-tote b em, .pr-mug b em { font-style: normal; color: #C99F45; } .pr-mono--sm { font-size: 1.2rem; } .pr-kicker { margin: 0; font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8A651C; } .pr-names { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; line-height: 1.1; color: #0F5E4A; } .pr-small { margin: 0; font-size: .6rem; font-style: italic; color: #5E5446; } .pr-date { margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .06em; color: #0F5E4A; } .pr-tag { margin: 0; font-size: .7rem; font-weight: 700; color: #8A651C; } .pr-invite { position: relative; width: 100%; height: 100%; } .pr-envelope { position: absolute; left: 4%; top: 18%; width: 64%; aspect-ratio: 1.45; border-radius: 6px; background: #0F5E4A; box-shadow: 0 12px 28px rgba(15, 94, 74, .3); rotate: -9deg; } .pr-envelope::after { content: ""; position: absolute; inset: 0 0 auto; height: 58%; background: #0C4D3D; clip-path: polygon(0 0, 100% 0, 50% 100%); } .pr-card { position: absolute; right: 6%; top: 8%; display: grid; justify-items: center; align-content: center; gap: 8px; width: 60%; aspect-ratio: 5 / 7; padding: 16px; border: 1px solid #E6D8B8; border-radius: 4px; background: #FFFDF8; box-shadow: 0 18px 40px rgba(60, 40, 10, .18), inset 0 0 0 6px #FFFDF8, inset 0 0 0 7px #D9B65E; text-align: center; rotate: 4deg; } .pr-rsvp { position: absolute; left: 10%; bottom: 8%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 4px; background: #fff; box-shadow: 0 10px 24px rgba(60, 40, 10, .16); font-size: .62rem; font-weight: 700; color: #0F5E4A; rotate: -3deg; } .pr-pass { position: relative; display: grid; justify-items: center; } .pr-pass__strap { width: 26px; height: 90px; margin-bottom: -10px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(0deg, #0F5E4A 0 10px, #127055 10px 20px); } .pr-pass__card { display: grid; justify-items: center; gap: 6px; width: 200px; padding: 18px 16px; border-radius: 14px; background: #FFFDF8; box-shadow: 0 18px 40px rgba(60, 40, 10, .2), inset 0 0 0 1px #E6D8B8; text-align: center; rotate: -2deg; } .pr-pass__card img { width: 84px; height: 84px; } .pr-pass__name { margin: 0; font-family: var(--font-display); font-size: 1rem; color: #0F5E4A; } .pr-pass__code { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; color: #8A651C; } .pr-sign { display: grid; justify-items: center; width: 100%; } .pr-sign__board { display: grid; justify-items: center; gap: 8px; width: 78%; padding: 22px 18px; border: 6px solid #C99F45; border-radius: 6px; background: #0F5E4A; box-shadow: 0 18px 40px rgba(15, 94, 74, .3); text-align: center; } .pr-sign__board .pr-kicker { color: #E6C77A; } .pr-sign__board .pr-names { color: #fff; font-size: 1.7rem; } .pr-sign__board .pr-date { color: #E6C77A; } .pr-sign__qr { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 10px 6px 6px; border-radius: 6px; background: #FFFDF8; font-size: .58rem; font-weight: 700; color: #0F5E4A; text-align: left; } .pr-sign__legs { width: 70%; height: 40px; background: linear-gradient(#8A651C, #8A651C) 18% 0 / 6px 100% no-repeat, linear-gradient(#8A651C, #8A651C) 82% 0 / 6px 100% no-repeat; } .pr-souv { position: relative; width: 100%; height: 100%; } .pr-fan { position: absolute; left: 6%; top: 10%; display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #0F5E4A; box-shadow: 0 14px 30px rgba(15, 94, 74, .3), inset 0 0 0 6px #C99F45; } .pr-fan::after { content: ""; position: absolute; left: 50%; top: 96%; width: 8px; height: 70%; margin-left: -4px; border-radius: 4px; background: #8A651C; } .pr-fan b, .pr-mug b { font-family: var(--font-display); font-size: 1.8rem; color: #fff; } .pr-tote { position: absolute; right: 6%; top: 18%; display: grid; place-content: center; justify-items: center; gap: 6px; width: 44%; aspect-ratio: .9; padding: 10px; border-radius: 4px 4px 10px 10px; background: #F4ECDD; box-shadow: 0 14px 30px rgba(60, 40, 10, .18); text-align: center; } .pr-tote::before { content: ""; position: absolute; left: 25%; bottom: 96%; width: 50%; height: 30%; border: 5px solid #E2D3B6; border-bottom: 0; border-radius: 40px 40px 0 0; } .pr-tote b { font-family: var(--font-display); font-size: 1.5rem; color: #0F5E4A; } .pr-tote small { font-size: .5rem; color: #5E5446; } .pr-mug { position: absolute; left: 32%; bottom: 6%; display: grid; place-items: center; width: 30%; aspect-ratio: .85; border-radius: 6px 6px 14px 14px; background: #FFFDF8; box-shadow: 0 12px 26px rgba(60, 40, 10, .2), inset 0 0 0 1px #E6D8B8; } .pr-mug::after { content: ""; position: absolute; left: 96%; top: 24%; width: 30%; height: 42%; border: 6px solid #FFFDF8; border-left: 0; border-radius: 0 20px 20px 0; filter: drop-shadow(1px 1px 0 #E6D8B8); } .pr-mug b { color: #0F5E4A; font-size: 1.2rem; } .pr-banner { display: grid; justify-items: center; height: 100%; } .pr-banner__roll { display: grid; justify-items: center; align-content: start; gap: 10px; width: 44%; height: 86%; padding: 22px 12px; border-radius: 3px; background: linear-gradient(#0F5E4A, #0C4D3D); box-shadow: 0 18px 40px rgba(15, 94, 74, .3); text-align: center; } .pr-banner__roll .pr-mono { color: #E6C77A; font-size: 1.6rem; } .pr-banner__roll .pr-names { color: #fff; font-size: 1.15rem; } .pr-banner__roll .pr-tag { color: #E6C77A; } .pr-banner__qr { display: grid; justify-items: center; gap: 4px; margin: auto 0 0; padding: 8px; border-radius: 6px; background: #FFFDF8; font-size: .5rem; font-weight: 700; color: #0F5E4A; } .pr-banner__base { width: 54%; height: 12px; border-radius: 6px; background: linear-gradient(#B9BCC4, #8C9099); } .mk-desk--identity .mk-stage { background: #F6F1E7; } .mk-fund__mini { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--dusk); color: #fff; font-size: .74rem; font-weight: 600; } .mk-fund__mini b { margin-left: auto; color: var(--marigold); }