/* ========================================================= North Pole Story Time — theme Fonts (App.razor ): https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600;1,9..144,700&family=Figtree:wght@400;500;600;700;800&display=swap ========================================================= */ @font-face { font-family: 'NP Hand'; src: url('/Content/Fonts/BadScript-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'NP Script'; src: url('/Content/Fonts/ImperialScript-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { --np-night: #0E1A2B; --np-night-deep: #0A1426; --np-night-mid: #16263D; --np-navy: #1E3150; --np-cranberry: #A3253A; --np-cranberry-dark: #7E1A2C; --np-cranberry-bright: #E0463F; --np-gold: #C9A24A; --np-gold-light: #E9C46A; --np-gold-pale: #F3E7C6; --np-gold-deep: #8C6B2A; --np-evergreen: #1F5A47; --np-evergreen-light: #2A6E57; --np-evergreen-dark: #13332A; --np-evergreen-deep: #0C2A20; --np-snow: #F8F5EF; --np-paper: #FFFDF8; --np-parchment: #FFFBF0; --np-ink: #1B2433; --np-ink-soft: #4A5366; --np-muted: #5B6475; --np-line: #D9C48F; --np-field-line: #D6CDBB; --np-accent: var(--np-cranberry); --np-font-display: 'Fraunces', Georgia, serif; --np-font-body: 'Figtree', 'Helvetica Neue', sans-serif; --np-font-hand: 'NP Hand', 'Segoe Script', 'Bradley Hand', cursive; --np-font-script: 'NP Script', 'NP Hand', cursive; --np-ink-pen: #2B3A5C; --np-foil: linear-gradient(100deg, #B8862F 0%, #F6E3A6 32%, #D6AE52 52%, #FFF1C4 72%, #B8862F 100%); --np-candy: repeating-linear-gradient(-45deg, #FFFDF8 0 12px, #A3253A 12px 24px); --np-bauble-red: radial-gradient(circle at 35% 30%, #E0463F, #A3253A 55%, #6E1626); --np-bauble-gold: radial-gradient(circle at 35% 30%, #F6E3A6, #C9A24A 55%, #8C6B2A); --np-bauble-green: radial-gradient(circle at 35% 30%, #3E8A6E, #1F5A47 55%, #0F3A2C); --np-bauble-blue: radial-gradient(circle at 35% 30%, #4E6FA8, #2E4A7A 55%, #18294A); } /* ---------- base ---------- */ .np-page { font-family: var(--np-font-body); color: var(--np-ink); background: var(--np-snow); min-width: 0; overflow-x: hidden; } .np-page a { color: var(--np-cranberry); } .np-page a:hover { color: var(--np-cranberry-dark); } .np-page :focus-visible { outline: 3px solid var(--np-gold-light); outline-offset: 3px; } /* Blazor's FocusOnNavigate moves focus to the page's

on every navigation. That is a screen-reader affordance, not a control anyone tabbed to, so it must not draw the ring above - which otherwise boxes the heading in gold. Interactive elements keep theirs. */ .np-page h1:focus, .np-page h1:focus-visible { outline: none; } .np-container { max-width: 1240px; margin: 0 auto; padding-inline: 28px; } .np-dots { background-color: var(--np-snow); background-image: radial-gradient(#E6DAC0 1.3px, transparent 1.5px); background-size: 30px 30px; } .np-foil { background: var(--np-foil); -webkit-background-clip: text; background-clip: text; color: transparent; } .np-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-accent); } .np-eyebrow--gold { color: var(--np-gold-light); } .np-h2 { margin: 0; font-family: var(--np-font-display); font-weight: 700; font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1.05; } .np-h2 em { font-weight: 600; } .np-lead { font-size: 18px; line-height: 1.65; } /* ---------- motion ---------- */ @keyframes npFall { 0% { transform: translate3d(0, -20px, 0); } 100% { transform: translate3d(40px, var(--np-fall, 1040px), 0); } } @keyframes npTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } @keyframes npSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } .np-snowfall { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .np-flake { position: absolute; top: -20px; border-radius: 50%; background: #FFFFFF; animation-name: npFall; animation-timing-function: linear; animation-iteration-count: infinite; } .np-twinkle { animation: npTwinkle 3.2s ease-in-out infinite; } .np-sway { transform-origin: 50% 0; animation: npSway 5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .np-twinkle, .np-sway { animation: none; } .np-flake { display: none; } } /* ---------- buttons ---------- */ .np-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 24px; border-radius: 999px; font-family: var(--np-font-body); font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; } .np-btn--lg { padding: 18px 30px; } .np-btn--sm { min-height: 44px; padding: 12px 20px; font-size: 15px; } .np-page a.np-btn--primary { background: var(--np-accent); color: #FFFFFF; box-shadow: inset 0 0 0 2px var(--np-gold-light), 0 14px 30px -10px rgba(163, 37, 58, 0.7); } .np-page a.np-btn--primary:hover { color: #FFFFFF; filter: brightness(1.08); } .np-page a.np-btn--hero { box-shadow: inset 0 0 0 2px var(--np-gold-light), inset 0 0 0 5px var(--np-accent), inset 0 0 0 6px rgba(233, 196, 106, 0.5), 0 14px 30px -10px rgba(163, 37, 58, 0.8); } .np-page a.np-btn--ghost { color: var(--np-snow); background: rgba(12, 42, 32, 0.35); border: 2px solid var(--np-gold); } .np-page a.np-btn--ghost:hover { color: #FFFFFF; background: rgba(12, 42, 32, 0.6); } .np-page a.np-btn--gold { color: #13201B; background: linear-gradient(135deg, #C9A24A, #F6E3A6 50%, #C9A24A); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); } .np-page a.np-btn--gold:hover { color: #13201B; filter: brightness(1.05); } .np-page a.np-btn--paper { color: var(--np-evergreen-dark); background: var(--np-paper); box-shadow: inset 0 0 0 2px var(--np-gold); } .np-page a.np-btn--paper:hover { color: var(--np-evergreen-dark); filter: brightness(0.97); } /* ---------- sale bar ---------- */ .np-salebar { position: relative; background: var(--np-cranberry-dark); color: #FBEFD2; font-size: 15px; padding: 12px 20px 16px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; text-align: center; } .np-salebar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--np-candy); } .np-salebar__title { font-family: var(--np-font-display); font-style: italic; font-size: 17px; } .np-salebar strong { color: #FFFFFF; font-size: 17px; } .np-page a.np-salebar__cta { color: var(--np-cranberry-dark); background: var(--np-gold-light); text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; } .np-page a.np-salebar__cta:hover { color: var(--np-cranberry-dark); background: #F3D684; } /* ---------- nav / logo ---------- */ .np-nav { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .np-nav__links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .np-page a.np-nav__link { color: #EDE6D6; text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 14px; } .np-page a.np-nav__link:hover { color: #FFFFFF; } .np-page a.np-nav__link.is-active { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-decoration-color: var(--np-gold-light); text-underline-offset: 8px; text-decoration-thickness: 2px; } .np-nav__sep { color: var(--np-gold); padding: 0 6px; } .np-nav__logout { display: inline; margin: 0; } /* the logout control is a submit button so it can POST, but it reads as a nav link */ .np-page .np-nav__link--button { font: inherit; font-weight: 600; font-size: 15px; padding: 12px 14px; background: none; border: none; cursor: pointer; color: #EDE6D6; } .np-page .np-nav__link--button:hover { color: #FFFFFF; } .np-page a.np-nav__cart { width: 46px; height: 46px; border-radius: 50%; background: var(--np-cranberry); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px var(--np-gold-light); } .np-page a.np-nav__cart:hover { color: #FFFFFF; filter: brightness(1.1); } .np-page a.np-logo { display: flex; align-items: center; gap: 14px; color: var(--np-snow); text-decoration: none; } .np-logo__img { display: block; width: min(520px, 46vw); height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); } @media (max-width: 760px) { .np-logo__img { width: min(420px, 72vw); } } .np-logo__words { display: flex; flex-direction: column; line-height: 1; } .np-logo__top { font-family: var(--np-font-display); font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--np-gold-light); } .np-logo__bottom { font-family: var(--np-font-display); font-size: 27px; font-weight: 700; font-style: italic; margin-top: 4px; } /* ---------- headers (both pages) ---------- */ .np-header { position: relative; overflow: hidden; color: var(--np-snow); } .np-header--night { background: radial-gradient(ellipse 90% 70% at 78% 8%, #2A4370 0%, #15243F 42%, #0A1426 100%); --np-fall: 1040px; } .np-header--forest { background: radial-gradient(ellipse 90% 80% at 70% 0%, #2A6E57 0%, #174636 40%, #0C2A20 100%); --np-fall: 760px; } /* forest headers over the taller village skyline (every page but Author's Corner), so the snow falls the full height */ .np-header--village { --np-fall: 1040px; } .np-header__sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Home header backdrop: Santa at his desk, faded into the --forest gradient. .np-header__sky is still used by the Author's Corner header. */ .np-header__backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .np-header__backdrop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; opacity: 0.34; -webkit-mask-image: radial-gradient(ellipse 80% 78% at 52% 34%, #000 28%, rgba(0, 0, 0, 0.35) 62%, transparent 100%); mask-image: radial-gradient(ellipse 80% 78% at 52% 34%, #000 28%, rgba(0, 0, 0, 0.35) 62%, transparent 100%); } /* scrim keeps the hero copy legible over the art */ .np-header__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12, 42, 32, 0.45) 0%, rgba(12, 42, 32, 0.12) 34%, rgba(12, 42, 32, 0.82) 100%), linear-gradient(to right, rgba(12, 42, 32, 0.62) 0%, rgba(12, 42, 32, 0.1) 52%, rgba(12, 42, 32, 0) 100%); } @media (max-width: 760px) { .np-header__backdrop-img { object-position: 50% 18%; opacity: 0.26; } } .np-header__edge { position: absolute; top: 0; display: flex; gap: 26px; align-items: flex-start; pointer-events: none; z-index: 1; } .np-header__edge--left { left: 34px; } .np-header__edge--right { right: 30px; gap: 24px; } @media (max-width: 900px) { .np-header__edge { display: none; } } /* ---------- home hero ---------- */ .np-hero__content { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 48px 28px 40px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; } .np-hero__copy { flex: 1 1 500px; min-width: 0; } .np-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .np-kicker span { font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--np-gold-light); } .np-hero__title { margin: 0; font-family: var(--np-font-display); font-weight: 700; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(12, 42, 32, 0.6); } .np-hero__title .np-foil { display: block; font-style: italic; font-weight: 600; padding-bottom: 0.08em; text-shadow: none; } .np-hero__lead { margin: 26px 0 0; font-size: 19px; line-height: 1.65; color: #C6D6CF; max-width: 520px; } .np-hero__ctas { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .np-hero__art { flex: 1 1 440px; min-width: 0; position: relative; display: flex; justify-content: center; padding: 30px 10px 20px; } /* ---------- Santa letter (hero art) ---------- */ .np-letter-envelope { position: absolute; width: 78%; max-width: 420px; aspect-ratio: 3 / 2; top: 54%; left: 50%; transform: translate(-58%, -10%) rotate(-9deg); border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); } .np-letter-envelope svg { width: 100%; height: 100%; display: block; } .np-env__to { font-family: var(--np-font-hand); font-size: 20px; fill: #3B2E1A; } .np-env__line { font-family: var(--np-font-hand); font-size: 12px; fill: #5E4B2E; } .np-env__mark { font-family: var(--np-font-body); font-size: 7px; font-weight: 700; letter-spacing: 0.12em; fill: #7E1A2C; } .np-env__mark-date { font-family: var(--np-font-body); font-size: 8px; font-weight: 800; letter-spacing: 0.06em; fill: #7E1A2C; } .np-env__stamp-text { font-family: var(--np-font-body); font-size: 4.6px; font-weight: 800; letter-spacing: 0.1em; fill: #7E1A2C; } .np-env__stamp-value { font-family: var(--np-font-display); font-size: 9px; font-weight: 700; fill: #F6E3A6; } .np-letter { position: relative; width: 82%; max-width: 420px; color: #2A2418; border-radius: 4px; padding: 34px 32px 28px; transform: rotate(3deg); box-sizing: border-box; background: radial-gradient(130px 96px at 10% 6%, rgba(201, 162, 74, 0.13), transparent 70%), radial-gradient(150px 110px at 90% 94%, rgba(140, 107, 42, 0.13), transparent 72%), var(--np-parchment); box-shadow: 0 0 0 1px #E8DAB8, 0 40px 70px -24px rgba(0, 0, 0, 0.75); } .np-letter::before, .np-letter::after { content: ""; position: absolute; border: 1.5px solid var(--np-gold); border-radius: 2px; pointer-events: none; } .np-letter::before { inset: 10px; } .np-letter::after { inset: 14px; border-width: 0.5px; } .np-letter__holly { position: absolute; top: -26px; right: -22px; } .np-letter__head { text-align: center; padding-bottom: 12px; border-bottom: 1px solid rgba(201, 162, 74, 0.45); } .np-letter__from { margin: 0; font-family: var(--np-font-display); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--np-gold-deep); } .np-letter__name { margin: 3px 0 2px; font-family: var(--np-font-display); font-size: 25px; font-weight: 700; font-style: italic; color: var(--np-cranberry); } .np-letter__address { margin: 0; font-family: var(--np-font-body); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A7A55; } .np-letter__greeting { margin: 16px 0 6px; font-family: var(--np-font-hand); font-size: 21px; color: var(--np-ink-pen); } /* ruled lines live on the body only, so the 32px rhythm stays locked to the handwriting */ .np-letter__body { background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(201, 162, 74, 0.28) 31px 32px); } .np-letter__body p { margin: 0 0 32px; font-family: var(--np-font-hand); font-size: 15px; line-height: 32px; color: var(--np-ink-pen); text-align: left; } .np-letter__body p:last-child { margin-bottom: 0; } .np-letter__ps { margin: 14px 0 0; font-family: var(--np-font-hand); font-size: 13px; line-height: 1.5; color: #5A6480; } .np-letter__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 16px; } .np-letter__closing { margin: 0; font-family: var(--np-font-hand); font-size: 14px; color: var(--np-ink-pen); } .np-letter__sig { margin: 0; font-family: var(--np-font-script); font-size: 42px; line-height: 1.05; color: var(--np-evergreen); transform: rotate(-3deg); transform-origin: left center; } .np-letter__seal { flex: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); transform: rotate(8deg); } @media (max-width: 560px) { .np-letter { padding: 28px 22px 24px; } .np-letter__body p { font-size: 14px; } .np-letter__sig { font-size: 36px; } } /* ---------- countdown ---------- */ .np-countdown { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 10px 28px 0; } .np-countdown__label { margin: 0 0 6px; text-align: center; font-family: var(--np-font-display); font-style: italic; font-size: 22px; color: var(--np-gold-pale); } .np-countdown__rail { position: relative; max-width: 720px; margin: 0 auto; } .np-countdown__garland { position: absolute; top: 0; left: 0; width: 100%; height: 60px; } .np-countdown__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 22px; } .np-bauble { display: flex; flex-direction: column; align-items: center; } .np-bauble__string { width: 1px; background: #B9A078; opacity: 0.85; } /* fluted metal finial: top rim + wire loop + scored collar */ .np-bauble__cap { width: 24px; height: 15px; border-radius: 2px 2px 3px 3px; margin-bottom: -3px; position: relative; z-index: 2; background: repeating-linear-gradient(90deg, rgba(94, 67, 25, 0.45) 0 1px, transparent 1px 4px), linear-gradient(90deg, #5E4319 0%, #E9C46A 20%, #F6E3A6 44%, #C9A24A 68%, #5E4319 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); } .np-bauble__cap::before { content: ""; position: absolute; left: -2px; right: -2px; top: -3px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #5E4319, #F6E3A6 45%, #8C6B2A); } .np-bauble__cap::after { content: ""; position: absolute; left: 50%; top: -13px; transform: translateX(-50%); width: 12px; height: 12px; border: 2px solid #C9A24A; border-bottom-color: transparent; border-radius: 50%; } .np-bauble__ball { position: relative; isolation: isolate; width: clamp(76px, 12vw, 128px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; /* top layer first: bounce light, sheen, reflected band, edge falloff, then the colour */ background: radial-gradient(circle at 56% 90%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 42%), radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0) 62%), radial-gradient(ellipse 36% 9% at 50% 79%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%), radial-gradient(circle at 38% 30%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.32) 82%, rgba(0, 0, 0, 0.58) 100%), var(--np-bauble-skin, var(--np-bauble-red)); box-shadow: inset 0 0 0 2px rgba(233, 196, 106, 0.40), inset 0 7px 12px -6px rgba(0, 0, 0, 0.60), inset -12px -16px 28px rgba(0, 0, 0, 0.26), 0 20px 32px -12px rgba(0, 0, 0, 0.65); } /* two-part specular: blurred bloom plus a sharp catchlight */ .np-bauble__ball::before, .np-bauble__ball::after { content: ""; position: absolute; pointer-events: none; background: #FFFFFF; border-radius: 50%; } .np-bauble__ball::before { left: 17%; top: 14%; width: 22%; height: 30%; transform: rotate(-24deg); filter: blur(4px); opacity: 0.55; } .np-bauble__ball::after { left: 20%; top: 16%; width: 7%; height: 10%; transform: rotate(-24deg); filter: blur(0.6px); opacity: 0.85; } /* keep the digits above the highlights */ .np-bauble__value, .np-bauble__unit { position: relative; z-index: 1; } .np-bauble__value { font-family: var(--np-font-display); font-size: clamp(24px, 4vw, 40px); font-weight: 700; line-height: 1; color: #FFFFFF; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; } .np-bauble__unit { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FBEFD2; margin-top: 4px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .np-bauble--red .np-bauble__ball { --np-bauble-skin: var(--np-bauble-red); } .np-bauble--gold .np-bauble__ball { --np-bauble-skin: var(--np-bauble-gold); } .np-bauble--green .np-bauble__ball { --np-bauble-skin: var(--np-bauble-green); } .np-bauble--blue .np-bauble__ball { --np-bauble-skin: var(--np-bauble-blue); } @media (prefers-reduced-motion: reduce) { .np-bauble__ball::before, .np-bauble__ball::after { filter: none; } } /* the svg fills the width by cropping; past its 1440:260 shape the height grows with the width, so wide screens crop nothing off the top (roofs, chimneys, the chapel cross) */ .np-skyline { position: relative; display: block; width: 100%; height: max(260px, 18.06vw); margin-top: -10px; } .np-skyline--forest { height: max(150px, 10.42vw); margin-top: 0; } /* ---------- section heading ---------- */ .np-section-head { text-align: center; max-width: 680px; margin: 0 auto 70px; } .np-section-head .np-h2 { margin-top: 12px; color: var(--np-night); } .np-section-head .np-h2 em { color: var(--np-accent); } .np-section-head p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--np-ink-soft); } /* ---------- product cards ---------- */ .np-products { padding-top: 56px; padding-bottom: 110px; } .np-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px 32px; } .np-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: var(--np-paper); border: 1px solid var(--np-line); box-shadow: 0 0 0 7px var(--np-paper), 0 0 0 8px var(--np-line), 0 34px 60px -28px rgba(14, 26, 43, 0.45); } .np-card--evergreen { background: var(--np-evergreen-dark); color: var(--np-snow); border-color: var(--np-gold); box-shadow: 0 0 0 7px var(--np-evergreen-dark), 0 0 0 8px var(--np-gold), 0 34px 60px -28px rgba(14, 26, 43, 0.55); } .np-card__bow { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); z-index: 2; } .np-card__art { margin: 16px 16px 0; aspect-ratio: 16 / 11; border-radius: 14px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .np-card__art svg { width: 88%; height: auto; } .np-card__art--parchment { background: linear-gradient(160deg, #F6EBD3, #EBDDBC); } .np-card__art--night { background: radial-gradient(ellipse at 50% 30%, #2A4370, #0E1A2B); } .np-card__art--forest { background: radial-gradient(ellipse at 50% 40%, #2A6E57, #13332A 75%); } .np-card__art--frost { background: linear-gradient(160deg, #EEF4F8, #D7E4EE); } .np-card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .np-card__eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--np-accent); } .np-card__eyebrow--green { color: var(--np-evergreen); } .np-card--evergreen .np-card__eyebrow { color: var(--np-gold-light); } .np-card__title { margin: 0; font-family: var(--np-font-display); font-size: 28px; font-weight: 700; color: var(--np-night); } .np-card--evergreen .np-card__title { color: var(--np-snow); } .np-card__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--np-ink-soft); } .np-card--evergreen .np-card__text { color: #C6D6CF; } .np-card__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .np-tag { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px 10px 30px; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); background: var(--np-gold-pale); color: #3E3420; font-size: 13px; } .np-tag::before { content: ""; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--np-paper); } .np-tag strong { font-family: var(--np-font-display); font-size: 20px; color: var(--np-night); } .np-tag--gold { background: var(--np-gold-light); } .np-tag--gold::before { background: var(--np-evergreen-dark); } .np-tag--gold strong { color: #13201B; } .np-scallop { display: block; width: 100%; height: 40px; } /* ---------- how it works (plaid) ---------- */ .np-plaid { position: relative; color: var(--np-snow); background-color: var(--np-evergreen); background-image: repeating-linear-gradient(0deg, rgba(10, 30, 24, 0.35) 0 22px, transparent 22px 44px, rgba(163, 37, 58, 0.28) 44px 50px, transparent 50px 88px), repeating-linear-gradient(90deg, rgba(10, 30, 24, 0.35) 0 22px, transparent 22px 44px, rgba(163, 37, 58, 0.28) 44px 50px, transparent 50px 88px); } .np-steps { padding-top: 60px; padding-bottom: 100px; } .np-steps__banner { text-align: center; margin: 0 auto 30px; max-width: 640px; padding: 20px 36px; border-radius: 999px; background: var(--np-evergreen-dark); border: 1px solid var(--np-gold); box-shadow: 0 0 0 6px var(--np-evergreen-dark), 0 0 0 7px rgba(201, 162, 74, 0.6); } .np-steps__banner h2 { margin: 0; font-family: var(--np-font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; } .np-steps__banner em { color: var(--np-gold-light); font-weight: 600; } .np-steps__rail { position: relative; } .np-steps__garland { position: absolute; top: 0; left: 0; width: 100%; height: 70px; } .np-steps__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 28px; padding: 30px 0 0; margin: 0; list-style: none; } .np-step { display: flex; flex-direction: column; align-items: center; } .np-step__string { width: 1.5px; background: var(--np-gold-light); } .np-step__num { width: 84px; height: 84px; border-radius: 50%; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--np-font-display); font-size: 38px; font-weight: 700; font-style: italic; color: #FFFFFF; box-shadow: inset 0 0 0 3px rgba(233, 196, 106, 0.7), 0 12px 24px -8px rgba(0, 0, 0, 0.5); } .np-step__num--red { background: var(--np-bauble-red); } .np-step__num--gold { background: var(--np-bauble-gold); color: #3E3420; box-shadow: inset 0 0 0 3px rgba(255, 253, 248, 0.6), 0 12px 24px -8px rgba(0, 0, 0, 0.5); } .np-step__num--blue { background: var(--np-bauble-blue); } .np-step__card { margin-top: -30px; padding: 50px 28px 30px; width: 100%; box-sizing: border-box; text-align: center; background: var(--np-parchment); color: var(--np-ink); border-radius: 18px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.6); } .np-step__card h3 { margin: 0 0 8px; font-family: var(--np-font-display); font-size: 23px; font-weight: 700; } .np-step__card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--np-ink-soft); } /* ---------- video spotlight ---------- */ .np-spotlight { position: relative; background: var(--np-snow); overflow: hidden; } .np-spotlight__flake { position: absolute; right: -90px; top: -60px; opacity: 0.08; } .np-spotlight__inner { position: relative; padding-top: 110px; padding-bottom: 110px; display: flex; flex-wrap: wrap; gap: 72px; align-items: center; } .np-spotlight__media { flex: 1 1 540px; min-width: 0; position: relative; } .np-frame { padding: 14px; border-radius: 26px; background: linear-gradient(135deg, #8C6B2A, #F6E3A6 25%, #C9A24A 50%, #FFF1C4 75%, #8C6B2A); box-shadow: 0 40px 70px -30px rgba(14, 26, 43, 0.6); } .np-frame__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 20%, #2A4370, #0E1A2B 70%); box-shadow: inset 0 0 0 2px #7A5A1F; } .np-frame__scene { position: absolute; inset: 0; width: 100%; height: 100%; } .np-frame__badge { position: absolute; left: 18px; top: 16px; background: var(--np-cranberry); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .np-play { position: relative; border: 0; border-radius: 50%; cursor: pointer; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; background: var(--np-bauble-red); } .np-play--lg { width: 96px; height: 96px; box-shadow: inset 0 0 0 3px var(--np-gold-light), 0 0 0 14px rgba(255, 253, 248, 0.12), 0 0 0 28px rgba(255, 253, 248, 0.06); } .np-play--sm { width: 64px; height: 64px; box-shadow: inset 0 0 0 2px var(--np-gold-light); } .np-spotlight__holly { position: absolute; top: -40px; left: -36px; } .np-spotlight__gifts { position: absolute; right: -40px; bottom: -50px; } .np-spotlight__copy { flex: 1 1 400px; min-width: 0; } .np-spotlight__copy .np-h2 { color: var(--np-night); } .np-spotlight__copy .np-h2 em { color: var(--np-accent); } .np-spotlight__copy .np-lead { margin: 22px 0 30px; color: var(--np-ink-soft); } .np-checks { display: flex; flex-direction: column; gap: 18px; list-style: none; margin: 0; padding: 0; } .np-checks li { display: flex; gap: 16px; align-items: flex-start; font-size: 17px; line-height: 1.55; } .np-checks li span { padding-top: 5px; } .np-checks svg { flex: none; } .np-spotlight__cta { margin-top: 36px; } /* ---------- featured videos ---------- */ .np-featured { position: relative; overflow: hidden; color: var(--np-snow); background: radial-gradient(ellipse 80% 60% at 50% 0%, #1E3150, #0E1A2B 70%); } .np-candy-strip { height: 8px; background: var(--np-candy); } .np-featured__inner { padding-top: 80px; padding-bottom: 100px; } .np-featured__head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; } .np-page a.np-featured__all { color: var(--np-gold-pale); font-weight: 700; font-size: 15px; padding: 12px 0; text-underline-offset: 4px; text-decoration-color: var(--np-gold); } .np-featured__rail { position: relative; } .np-featured__line { position: absolute; top: 18px; left: 0; width: 100%; height: 60px; } .np-featured__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; padding-top: 44px; } .np-polaroid { position: relative; background: var(--np-paper); padding: 14px 14px 18px; border-radius: 4px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.8); } .np-polaroid__pin { position: absolute; top: -18px; left: 50%; margin-left: -9px; width: 18px; height: 36px; border-radius: 4px; z-index: 1; background: linear-gradient(90deg, #B98A4E, #E3C08A, #B98A4E); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } .np-polaroid__media { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at 50% 30%, #2A4370, #16263D); display: flex; align-items: center; justify-content: center; overflow: hidden; } .np-polaroid__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .np-polaroid__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .np-polaroid__length { position: absolute; right: 10px; bottom: 10px; background: rgba(10, 20, 38, 0.85); color: var(--np-gold-pale); font-size: 12px; padding: 4px 8px; border-radius: 6px; } .np-polaroid__caption { padding: 16px 6px 6px; color: var(--np-ink); } .np-polaroid__title { font-family: var(--np-font-display); font-style: italic; font-size: 20px; font-weight: 600; } .np-polaroid__kind { font-size: 14px; color: var(--np-muted); margin-top: 4px; } /* ---------- author band (home) ---------- */ .np-authorband-wrap { padding-top: 110px; padding-bottom: 110px; } .np-authorband { position: relative; color: var(--np-snow); border-radius: 30px; padding: clamp(36px, 5vw, 72px); display: flex; flex-wrap: wrap; gap: 56px; align-items: center; background: radial-gradient(ellipse at 20% 0%, #2A6E57, #13332A 60%); box-shadow: 0 0 0 1px var(--np-gold), 0 0 0 8px var(--np-snow), 0 0 0 9px var(--np-gold), 0 40px 80px -40px rgba(14, 26, 43, 0.6); } .np-authorband__ornaments { position: absolute; top: -40px; right: 48px; display: flex; gap: 20px; align-items: flex-start; } .np-authorband__copy { flex: 1 1 460px; min-width: 0; } .np-authorband__copy .np-lead { margin: 22px 0 0; color: #C6D6CF; } .np-authorband__cta { margin-top: 34px; } .np-authorband__tags { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; } .np-bigtag { position: relative; color: var(--np-ink); clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%); /* clip-path crops box-shadow, so the lift has to come from drop-shadow */ transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease, background-color 220ms ease; } .np-page a.np-bigtag__link, .np-page a.np-bigtag__link:hover { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px 18px 40px; color: var(--np-ink); text-decoration: none; } .np-bigtag__link:focus-visible { outline: 3px solid var(--np-gold-light); outline-offset: -4px; } .np-bigtag:hover, .np-bigtag:focus-within { transform: translate(7px, -5px); filter: drop-shadow(-7px 11px 14px rgba(5, 20, 14, 0.45)); } .np-bigtag--1:hover, .np-bigtag--1:focus-within { background: #FFFFFF; } .np-bigtag--2:hover, .np-bigtag--2:focus-within { background: #FBF2D9; } .np-bigtag--3:hover, .np-bigtag--3:focus-within { background: #F3D684; } @media (prefers-reduced-motion: reduce) { .np-bigtag { transition: filter 220ms ease, background-color 220ms ease; } .np-bigtag:hover, .np-bigtag:focus-within { transform: none; } } .np-bigtag::before { content: ""; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--np-evergreen-dark); } .np-bigtag__label { font-weight: 700; } .np-bigtag__price { font-family: var(--np-font-display); font-size: 24px; font-weight: 700; color: var(--np-cranberry); } .np-bigtag--1 { background: var(--np-parchment); } .np-bigtag--2 { background: var(--np-gold-pale); } .np-bigtag--3 { background: var(--np-gold-light); } .np-bigtag--3 .np-bigtag__price { color: var(--np-cranberry-dark); } .np-authorband__more { margin: 6px 0 0; font-size: 14px; color: #A9C3B8; } .np-page .np-authorband__more a { color: var(--np-gold-pale); } /* ---------- footer ---------- */ .np-footer { position: relative; background: var(--np-night-deep); color: #C9CFDA; } .np-footer__roofs { display: block; width: 100%; height: clamp(120px, 11vw, 170px); background: var(--np-snow); } .np-footer__main { padding-top: 40px; padding-bottom: 36px; display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; } .np-footer__brand { flex: 1 1 280px; min-width: 0; } .np-footer__brand .np-logo__bottom { font-size: 30px; color: var(--np-snow); } .np-footer__brand p { margin: 16px 0 0; font-size: 15px; line-height: 1.6; max-width: 320px; } .np-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; } .np-footer__col { display: flex; flex-direction: column; gap: 4px; } .np-footer__heading { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--np-gold-light); margin-bottom: 8px; } .np-page .np-footer__col a { color: #E6E1D6; text-decoration: none; padding: 6px 0; } .np-page .np-footer__col a:hover { color: #FFFFFF; text-decoration: underline; } .np-footer__legal { padding-top: 22px; padding-bottom: 32px; border-top: 1px solid #1E2C42; font-size: 14px; color: #8A98AF; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .np-footer__legal em { font-family: var(--np-font-display); color: var(--np-gold); } /* ---------- Author's Corner ---------- */ .np-ac-hero__content { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 40px 28px 30px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; } .np-ac-hero__copy { flex: 1 1 480px; min-width: 0; } .np-ac-hero__title { margin: 0; font-family: var(--np-font-display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.015em; } .np-ac-hero__title .np-foil { font-style: italic; font-weight: 600; } .np-ac-hero__lead { margin: 24px 0 0; font-size: 19px; line-height: 1.65; color: #C6D6CF; max-width: 540px; } .np-chips { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; } .np-chips li { font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 999px; background: rgba(12, 42, 32, 0.6); border: 1px solid var(--np-gold); color: var(--np-gold-pale); } .np-ac-hero__art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; } /* chips sit on the forest header by default; this variant suits the --night pages */ .np-chips--night li { background: rgba(10, 20, 38, 0.6); border-color: var(--np-gold); } /* quantity stepper */ .np-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .np-qty { display: inline-flex; align-items: stretch; border: 2px solid var(--np-gold); border-radius: 999px; overflow: hidden; background: var(--np-paper); } .np-qty__btn { width: 48px; border: 0; cursor: pointer; background: transparent; color: var(--np-cranberry); font-size: 24px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background-color 160ms ease, color 160ms ease; } .np-qty__btn:hover:not(:disabled) { background: var(--np-cranberry); color: #FFFFFF; } .np-qty__btn:focus-visible { outline: 3px solid var(--np-gold-light); outline-offset: -3px; } .np-qty__btn:disabled { color: #BFB49A; cursor: not-allowed; } .np-qty__input { width: 72px; border: 0; border-left: 2px solid var(--np-gold); border-right: 2px solid var(--np-gold); padding: 12px 4px; text-align: center; background: transparent; color: var(--np-ink); font-family: var(--np-font-display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } .np-qty__input::-webkit-outer-spin-button, .np-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .np-qty__input:focus-visible { outline: 3px solid var(--np-gold-light); outline-offset: -3px; } .np-qty__hint { margin: 0; font-size: 15px; color: var(--np-ink-soft); } .np-qty__hint strong { color: var(--np-ink); } /* ---------- cart ---------- */ .np-cart-hero { padding-bottom: 10px; } .np-cart-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .np-cart-empty p { margin: 0; color: var(--np-ink-soft); } .np-cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .np-cart-item { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--np-field-line); } .np-cart-item:last-child { border-bottom: 0; padding-bottom: 0; } .np-cart-item__main { flex: 1 1 220px; min-width: 0; } .np-cart-item__name { margin: 0; font-family: var(--np-font-display); font-size: 20px; font-weight: 700; color: var(--np-night); } .np-cart-item__meta { margin: 4px 0 0; font-size: 14px; color: var(--np-muted); } .np-cart-item__unit { margin: 6px 0 0; font-size: 13px; color: var(--np-ink-soft); } .np-cart-item__right { display: flex; align-items: center; gap: 16px; margin-left: auto; } .np-cart-item__total { font-family: var(--np-font-display); font-size: 22px; font-weight: 700; color: var(--np-cranberry); font-variant-numeric: tabular-nums; } .np-cart-item__remove { border: 0; background: none; cursor: pointer; padding: 6px 2px; font-size: 13px; font-weight: 600; color: var(--np-muted); text-decoration: underline; } .np-cart-item__remove:hover:not(:disabled) { color: var(--np-cranberry); } .np-cart-item__remove:disabled { cursor: not-allowed; opacity: 0.5; } /* read-only quantity readout inside the cart's stepper */ .np-qty__input--static { display: inline-flex; align-items: center; justify-content: center; } .np-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .np-promo__input { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--np-field-line); background: #FFFFFF; color: var(--np-ink); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; } .np-promo__input:focus { border-color: var(--np-evergreen); box-shadow: 0 0 0 3px rgba(31, 90, 71, 0.2); outline: none; } .np-promo--applied { gap: 14px; } .np-promo__tag { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--np-evergreen); color: var(--np-gold-pale); font-weight: 700; letter-spacing: 0.08em; } .np-promo__clear { border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--np-muted); text-decoration: underline; } .np-promo__clear:hover:not(:disabled) { color: var(--np-cranberry); } .np-promo__msg { margin: 12px 0 0; font-size: 14px; font-weight: 600; } .np-promo__msg--ok { color: var(--np-evergreen); } .np-promo__msg--bad { color: var(--np-cranberry); } .np-checkout-btn { width: 100%; justify-content: center; margin-top: 18px; } .np-checkout-btn:disabled { opacity: 0.55; cursor: not-allowed; } .np-ac-hero__art svg { width: 100%; max-width: 480px; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); } .np-order { padding-top: 50px; padding-bottom: 110px; display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; } .np-order__steps { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 40px; } .np-panel { position: relative; background: var(--np-paper); border: 1px solid var(--np-line); border-radius: 22px; padding: 40px 34px 34px; box-shadow: 0 0 0 7px var(--np-paper), 0 0 0 8px var(--np-line), 0 30px 50px -30px rgba(14, 26, 43, 0.4); } .np-panel__head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; } .np-panel__num { flex: none; width: 52px; height: 52px; border-radius: 50%; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-family: var(--np-font-display); font-style: italic; font-weight: 700; font-size: 24px; box-shadow: inset 0 0 0 2px var(--np-gold-light); } .np-panel__num--red { background: var(--np-bauble-red); } .np-panel__num--gold { background: var(--np-bauble-gold); color: #3E3420; box-shadow: inset 0 0 0 2px var(--np-paper); } .np-panel__num--green { background: var(--np-bauble-green); } .np-panel__title { margin: 0; font-family: var(--np-font-display); font-size: 30px; font-weight: 700; color: var(--np-night); } .np-panel__note { margin: 20px 0 0; font-size: 14px; color: var(--np-muted); } .np-panel__intro { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--np-muted); } /* Shown in place of the order form while a product's kill switch is off (e.g. CustomVideoEnable). */ .np-order__closed { flex: 1 1 100%; max-width: 760px; margin: 0 auto; text-align: center; } .np-order__closed p { margin: 16px auto 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--np-muted); } .np-order__closed-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Opt-in letter sections: a checkbox that reveals its own detail fields. */ .np-optins { display: flex; flex-direction: column; gap: 16px; } .np-optin { border: 1px solid #E7DCC0; border-radius: 16px; background: var(--np-parchment); padding: 18px 20px; } .np-optin:has(input:checked) { border-color: var(--np-gold); background: #FFF9EC; } .np-optin__head { display: flex; gap: 12px; align-items: center; } .np-optin__head label { font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--np-night); cursor: pointer; } .np-optin__body { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #DCCFAE; } .np-optin__hint { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #5B5134; } .np-optin__note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--np-muted); } .np-field__help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--np-muted); } /* name pronunciation preview: text box with a speaker button beside it */ .np-speak { display: flex; align-items: center; gap: 10px; } .np-speak .rz-textbox { flex: 1 1 auto; min-width: 0; } .np-speak__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; background: var(--np-parchment); border: 1px solid var(--np-gold); color: var(--np-evergreen); transition: background .15s ease, color .15s ease; } .np-speak__btn:hover:not(:disabled) { background: var(--np-bauble-green); color: #FFFFFF; } .np-speak__btn:disabled { opacity: .55; cursor: progress; } .np-speak__btn.is-working { animation: np-speak-pulse 1.1s ease-in-out infinite; } @keyframes np-speak-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .np-speak__msg { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--np-evergreen); font-weight: 600; } .np-speak__msg--bad { color: var(--np-cranberry-dark); } .np-speak__approve { align-items: flex-start; margin-top: 16px; } .np-speak__approve label { font-size: 14px; font-weight: 500; line-height: 1.55; cursor: pointer; } /* contact form bot check */ .np-robot { margin: 22px 0 4px; } .np-robot__widget { min-height: 65px; } .np-robot .np-field__help { margin-top: 8px; } /* letter-photo upload inside an opt-in section */ .np-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .np-upload input[type="file"] { font: inherit; font-size: 14px; max-width: 100%; } .np-upload__hint { font-size: 13px; color: var(--np-muted); } .np-upload__preview { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; } .np-upload__preview img { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; border: 1px solid #DCCFAE; background: #FFFFFF; } .np-upload__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; } .np-upload__name { font-size: 14px; font-weight: 600; color: var(--np-ink); overflow-wrap: anywhere; } .np-upload__error { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--np-cranberry-dark); } .np-upload__ok { font-size: 13px; line-height: 1.5; color: var(--np-bauble-green); font-weight: 600; } .np-upload__working { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .np-upload__working-text { font-family: var(--np-font-display); font-size: 20px; color: var(--np-bauble-green); min-width: 14ch; /* holds its width as the dots tick, so the row doesn't jitter */ } .np-upload__review { margin: 4px 0 18px; padding: 16px 18px; border-radius: 12px; background: #FFF4F2; border: 1px solid #E8BFB6; } .np-upload__review-body { font-size: 14px; line-height: 1.6; color: #5B3A33; } .np-upload__review-body h4 { margin: 14px 0 6px; font-size: 15px; } .np-upload__review-body ul { margin: 0; padding-left: 20px; } .np-upload__review-body li { margin: 4px 0; } .np-upload__accept { align-items: flex-start; margin-top: 16px; } .np-upload__accept label { font-size: 14px; font-weight: 500; line-height: 1.55; cursor: pointer; } .np-upload__accept--nested { margin-left: 28px; padding-top: 4px; } .np-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .np-package { position: relative; overflow: hidden; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px; border-radius: 16px; color: var(--np-ink); background: #FFFFFF; border: 2px solid #E7E0D2; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .np-package:hover { border-color: var(--np-gold); } .np-package[aria-pressed="true"] { background: #FFF6DE; border-color: var(--np-gold); box-shadow: 0 0 0 4px rgba(201, 162, 74, 0.25), 0 16px 30px -16px rgba(163, 37, 58, 0.6); } .np-package[aria-pressed="true"]::after { content: ""; position: absolute; top: 0; right: 28px; width: 14px; height: 100%; opacity: 0.16; background: linear-gradient(90deg, #8F1F32, #C0303F 50%, #8F1F32); } .np-package__row { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; z-index: 1; } .np-package__label { font-weight: 800; font-size: 16px; } .np-package__dot { width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; border: 2px solid #B9AF9C; } .np-package[aria-pressed="true"] .np-package__dot { border: 6px solid var(--np-cranberry); background: #FFFFFF; box-shadow: 0 0 0 2px var(--np-gold-light); } .np-package__price { font-family: var(--np-font-display); font-size: 32px; font-weight: 700; margin-top: 16px; color: var(--np-cranberry); position: relative; z-index: 1; } .np-package__note { font-size: 14px; color: var(--np-muted); margin-top: 4px; position: relative; z-index: 1; } .np-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .np-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .np-field--full { grid-column: 1 / -1; } .np-books { display: flex; flex-direction: column; gap: 18px; } .np-book { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 22px 22px 34px; background: var(--np-parchment); border: 1px solid #E7DCC0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .np-book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: repeating-linear-gradient(-45deg, #A3253A 0 8px, #FFFDF8 8px 16px); } .np-book__title { margin: 0; grid-column: 1 / -1; font-family: var(--np-font-display); font-style: italic; font-size: 20px; font-weight: 600; color: var(--np-evergreen); } .np-summary { flex: 1 1 330px; min-width: 0; position: relative; margin-top: 34px; } .np-summary__bow { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: 2; } .np-summary__box { position: relative; border-radius: 22px; overflow: hidden; color: var(--np-snow); background: radial-gradient(ellipse at 30% 0%, #B3263A, #7E1A2C 70%); box-shadow: 0 40px 60px -30px rgba(14, 26, 43, 0.6); } .np-summary__box::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 22px; margin-left: -11px; background: linear-gradient(90deg, #A9822F, #F6E3A6 50%, #A9822F); } .np-summary__card { position: relative; margin: 30px 20px 20px; padding: 28px 24px; border-radius: 16px; background: var(--np-parchment); color: var(--np-ink); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } .np-summary__title { margin: 0; text-align: center; font-family: var(--np-font-display); font-size: 26px; font-weight: 700; color: var(--np-night); } .np-summary__line { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--np-field-line); } .np-summary__line span:first-child { color: var(--np-ink-soft); } .np-summary__line span:last-child { font-weight: 700; } .np-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .np-summary__total span:first-child { font-weight: 700; } .np-summary__total span:last-child { font-family: var(--np-font-display); font-size: 38px; font-weight: 700; color: var(--np-cranberry); } .np-summary__agree { display: flex; flex-direction: column; gap: 6px; background: var(--np-gold-pale); border-radius: 14px; padding: 16px; } .np-summary__agree-row { display: flex; gap: 12px; align-items: flex-start; } .np-summary__agree label { font-size: 14px; line-height: 1.5; color: #3E3420; } .np-page .np-summary__agree a { color: var(--np-cranberry-dark); font-weight: 600; } .np-summary__fine { margin: 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--np-muted); } /* ---------- Radzen overrides (scoped to .np-form) ---------- */ .np-form { --rz-primary: var(--np-evergreen); --rz-primary-light: var(--np-evergreen-light); --rz-primary-dark: var(--np-evergreen-dark); --rz-danger: var(--np-cranberry); } .np-form .rz-label { font-size: 14px; font-weight: 700; color: var(--np-ink); padding: 0; } .np-form .rz-textbox { font-family: var(--np-font-body); font-size: 16px; padding: 14px 16px; min-height: 50px; box-sizing: border-box; border-radius: 12px; border: 1.5px solid var(--np-field-line); background: var(--np-parchment); color: var(--np-ink); box-shadow: none; width: 100%; } .np-form .np-book .rz-textbox { background: #FFFFFF; } .np-form .rz-textbox:hover { border-color: var(--np-gold); } .np-form .rz-textbox:focus { border-color: var(--np-evergreen); box-shadow: 0 0 0 3px rgba(31, 90, 71, 0.2); outline: none; } .np-form .rz-textbox.invalid { border-color: var(--np-cranberry); } .np-form .rz-message, .np-form .rz-messages-error { position: static; display: block; margin-top: 2px; padding: 0; background: none; box-shadow: none; color: var(--np-cranberry); font-size: 13px; font-weight: 600; } .np-form .rz-chkbox { flex: none; margin-top: 1px; } .np-form .rz-chkbox-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--np-gold-deep); background: #FFFFFF; } .np-form .rz-chkbox-box.rz-state-active { background: var(--np-evergreen); border-color: var(--np-evergreen); } .np-form .rz-button.np-checkout { width: 100%; min-height: 56px; border: 0; border-radius: 999px; font-family: var(--np-font-body); font-weight: 800; font-size: 16px; text-transform: none; letter-spacing: 0; color: #FFFFFF; background: var(--np-bauble-green); box-shadow: inset 0 0 0 2px var(--np-gold-light), 0 12px 24px -10px rgba(15, 58, 44, 0.8); } .np-form .rz-button.np-checkout:not(.rz-state-disabled):hover { filter: brightness(1.1); background: var(--np-bauble-green); } .np-page a.np-play, .np-page a.np-play:hover { color: #FFFFFF; } /* ========================================================================== Account / Identity pages The scaffold ships Bootstrap markup and this site does not load Bootstrap, so these rules give the Identity pages the site's own look. Everything is scoped under .np-auth, which only NpAccountLayout applies - nothing here can reach the storefront pages. ========================================================================== */ .np-auth { display: flex; flex-direction: column; min-height: 100vh; background: var(--np-paper); } .np-auth__header { background: var(--np-night); } /* Centred rather than top-aligned: a short form like Forgot Password otherwise sits high with a large empty gap beneath it. align-items stays centre because the card grows the row, so tall pages (account settings) still lay out top-down and scroll normally. */ .np-auth__main { flex: 1; display: flex; justify-content: center; align-items: center; padding: 48px 16px 64px; } .np-auth__card { width: 100%; max-width: 520px; background: #FFFFFF; border: 1px solid #E7DCC0; border-radius: 20px; padding: 40px; box-shadow: 0 24px 48px -32px rgba(12, 42, 32, 0.45); } /* the account-settings pages carry a side nav, so they need more room */ .np-auth__card:has(.np-manage) { max-width: 920px; } .np-auth__title { margin: 0 0 8px; font-family: var(--np-font-display); font-size: 32px; font-weight: 700; color: var(--np-night); line-height: 1.2; } .np-auth__subtitle { margin: 28px 0 14px; font-family: var(--np-font-display); font-size: 21px; font-weight: 700; color: var(--np-night); } .np-auth__card > .np-auth__subtitle:first-child, .np-auth__card section > .np-auth__subtitle:first-child { margin-top: 0; } .np-auth__lead { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--np-muted); } /* the scaffold's Bootstrap grid, flattened to a single readable column */ .np-auth__row { display: flex; flex-direction: column; gap: 28px; } .np-auth__col { min-width: 0; } /* ---- fields ---------------------------------------------------------- */ /* Bootstrap's floating-label markup puts the input before its label, so the column-reverse here restores a normal label-above-input reading order without having to rewrite every form in the scaffold. */ .np-auth .np-field { display: flex; flex-direction: column-reverse; gap: 7px; margin-bottom: 20px; } .np-auth .np-label { font-size: 14px; font-weight: 700; color: var(--np-ink); } .np-auth .np-input { /* Capped so a single email address does not stretch the full width of the wider account-settings card. The login card is narrower than this, so it is unaffected. */ width: 100%; max-width: 440px; box-sizing: border-box; font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 10px; border: 1px solid #CFC4AC; background: var(--np-parchment); color: var(--np-ink); transition: border-color .15s ease, box-shadow .15s ease; } .np-auth .np-input:focus { outline: none; border-color: var(--np-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.28); background: #FFFFFF; } .np-auth .np-input::placeholder { color: #A89C84; } .np-auth .np-input:disabled { background: #F2EDE1; color: var(--np-muted); cursor: not-allowed; } .np-auth .np-checkrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .np-auth .np-checkrow .np-label { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; } .np-auth .np-check { width: 18px; height: 18px; accent-color: var(--np-cranberry); cursor: pointer; } .np-auth .np-inputgroup { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .np-auth .np-inputgroup .np-input { flex: 1 1 220px; } .np-auth .np-inputgroup__text { font-size: 14px; color: var(--np-muted); } /* ---- buttons --------------------------------------------------------- */ .np-auth .np-btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; /* Explicit, because an inside a

would otherwise inherit that paragraph's 1.6 line-height and render visibly taller than a sibling