:root { color-scheme: light; --bg: #f8f2e9; --panel: #fdf9f3; --surface: #fdf9f3; --surface-hover: #e6dccf; --surface-raised: #f5e4e1; --border-control: #857980; --text: #2b1530; --text-muted: #5b4359; --text-faint: #6b5668; --accent: #b0205a; --accent-text: #ffffff; --line: rgba(43, 21, 48, 0.12); --danger: #b3261e; --error: #b3261e; --focus-ring: #2b1530; --on-light: #fdf9f3; --color-glass: #f5e4e1; --color-glass-strong: #efd6d2; --font: "Bricolage Text", -apple-system, BlinkMacSystemFont, "Bricolage Text Fallback", "Bricolage Text Fallback Roboto", "Segoe UI", system-ui, sans-serif; --give-display: "Bricolage Display", "Bricolage Display Fallback", "Bricolage Display Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --give-deep: #7e1440; --give-ink: #2b1530; --give-line: rgba(43, 21, 48, 0.12); } body { background: var(--bg); color: var(--text); text-wrap: pretty; } .give { gap: 16px; padding-top: 18px; } .give::before { content: ""; display: block; width: 118px; height: 26px; background: url("/brand/fitvee/logo/lockup-light.svg") left center / 118px 26px no-repeat; } .give a:not(.btn) { color: var(--text); text-underline-offset: 3px; } .give-head h1, .give-redeem h1, .give-thanks { font: 600 28px/1.1 var(--give-display); letter-spacing: -0.01em; color: var(--text); text-align: start; } .give-lede { color: var(--text-muted); margin: 8px 0 0; } .give legend { font-weight: 600; color: var(--text); } .give-lengths { grid-template-columns: 1fr; gap: 0; } .give-length { grid-template-columns: 22px 1fr auto; align-items: baseline; column-gap: 12px; row-gap: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; } .give-length:last-of-type { border-bottom: 1px solid var(--line); } .give-length::before { content: ""; grid-row: 1; grid-column: 1; align-self: center; width: 16px; height: 16px; border: 1.5px solid var(--border-control); border-radius: 50%; box-sizing: border-box; } .give-length.is-chosen { border-color: var(--line); box-shadow: none; } .give-length.is-chosen::before { border-color: var(--text); background: radial-gradient(circle, var(--text) 0 4px, transparent 5px); } .give-length:focus-within { outline-offset: 0; } .give-length-label { grid-column: 2; } .give-length-price { grid-column: 3; grid-row: 1; font: 600 20px/1.2 var(--font); color: var(--text); } .give-length-per { grid-column: 2; grid-row: 2; color: var(--text-muted); } .give-length.is-chosen .give-length-label { font-weight: 700; color: var(--text); } .give :is(input, textarea).field-input { padding: 10px 0; border: 0; border-bottom: 1.5px solid var(--border-control); border-radius: 0; background: none; box-shadow: none; min-height: 44px; } .give-field { gap: 2px; } .give :is(input, textarea).field-input:focus { outline: none; box-shadow: none; border-bottom-color: var(--text); } .give-when label { display: flex; align-items: center; gap: 10px; color: var(--text); } .give input[type="radio"] { accent-color: var(--text); width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex: none; border: 0; background: none; box-shadow: none; } .give .primary { background: var(--accent); color: var(--accent-text); letter-spacing: 0; text-decoration: none; } .give .primary:hover:not(:disabled) { background: var(--give-deep); box-shadow: none; } .give .secondary { background: none; color: var(--text); text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0; } .give .secondary:hover { background: none; color: var(--text-muted); } .give-found-what { font: 600 22px/1.2 var(--font); color: var(--text); } .give-code-input { letter-spacing: 0.05em; } .give-card-page { gap: 0; text-align: center; } .give-card-page::before { margin: 0 auto 16px; background-position: center; } .give-card-page .give-thanks { font: 600 17px/1.3 var(--font); letter-spacing: 0; color: var(--text-muted); text-align: center; margin: 0 0 16px; } .give-card { padding: 0; gap: 0; justify-items: center; border: 0; border-radius: 0; background: none; color: var(--text); text-align: center; } .give-card-stars { position: static; inset: auto; width: 100%; max-width: 420px; aspect-ratio: 3 / 2; margin: 0 0 24px; opacity: 1; border-radius: 50% 50% 28px 28px / 72% 72% 28px 28px; background: url("/brand/fitvee/img/give-photo-680.webp") center 18% / cover no-repeat; } .give-card > .give-card-stars { position: static; } .give-card-brand { letter-spacing: 0; text-transform: none; font: 600 15px/1.2 var(--font); color: var(--text-muted); } .give-card-message, .give .give-card-message { margin: 0; max-width: 18ch; padding: 0; border: 0; font: 600 21px/1.35 var(--give-display); font-style: normal; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; } .give .give-card-message[data-size="short"] { max-width: 15ch; font: 600 36px/1.08 var(--give-display); letter-spacing: -0.02em; } .give .give-card-message[data-size="medium"] { max-width: 18ch; font: 600 27px/1.15 var(--give-display); } .give .give-card-message[data-size="long"] { max-width: 28ch; font: 500 20px/1.4 var(--font); } .give-card > .give-card-from { margin: 12px 0 0; font: 400 17px/1.3 var(--font); color: var(--text-muted); } .give-card > .give-card-gift { display: grid; gap: 2px; margin: 24px 0 0; } .give-card-gift > * { margin: 0; } .give-card-to { font: 600 20px/1.2 var(--font); letter-spacing: 0; color: var(--text); } .give-card-what { font: 400 17px/1.3 var(--font); color: var(--text-muted); } .give-card-stars + .give-card-gift .give-card-to { font: 600 36px/1.08 var(--give-display); letter-spacing: -0.02em; } .give-card > .give-card-gift + .give-card-from { margin-top: 8px; } .give-card > .give-card-code { box-sizing: border-box; width: 100%; display: grid; justify-items: start; gap: 0; margin: 24px 0 0; padding: 14px 20px 16px; text-align: start; border-radius: 22px; background: var(--surface-raised); } .give-card-code-label { letter-spacing: 0; text-transform: none; font: 400 15px/1.3 var(--font); color: var(--text-muted); } .give-card-code-copy { justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; min-height: 48px; text-align: start; } .give-card-code-value { font: 700 24px/1.2 var(--font); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--text); } .give-card-code-act { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; font: 600 16px/1.2 var(--font); color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .give-card-code-act .give-card-tick { color: var(--text); } .give-card-how { margin: 0; font: 400 14px/1.3 var(--font); color: var(--text-muted); } .give-actions { display: grid; gap: 4px; } .give-actions > * { min-height: 44px; flex: none; } .give-actions .secondary { justify-content: center; } .give-card-page .give-actions { margin: 24px 0 0; } .give-share { min-height: 56px; font: 700 18px/1 var(--font); } .give-card-page .give-actions-small { margin: 4px 0 0; } .give-print { font: 400 15px/1.3 var(--font); color: var(--text-muted); } .give-card-page .give-sent { margin: 12px 0 0; font: 400 15px/1.4 var(--font); color: var(--text-muted); text-wrap: balance; } .give-card-page .give-copy-note { margin: 0; min-height: 0; } .give-card-page .give-copy-note:not(:empty) { margin-top: 12px; } .give-card-code-copy:active { opacity: 0.7; } @media print { .give::before { display: none; } .give-card-code-act { display: none; } .give-card-stars { max-width: 90mm; } }