/* ============================================================================= Nora — marketing site. Reuses the product's eucalyptus identity (tokens from packages/ui/src/styles/globals.css): pure-white surface, deep eucalyptus green, one reserved brass note on the numbers that behave like money. Flat + hairline-ruled, never cards-on-cards. Bilingual EN + 繁中. ========================================================================== */ :root { /* Surfaces — a pure honest white; warmth comes from ink + brand, not the bg. */ --bg: oklch(1 0 0); --surface: oklch(0.985 0.004 152); --surface-sunken: oklch(0.967 0.005 152); --border: oklch(0.922 0.005 152); --border-strong: oklch(0.864 0.007 152); /* Ink ramp (all AA+ on white). */ --ink: oklch(0.245 0.012 152); --ink-muted: oklch(0.455 0.012 152); --ink-subtle: oklch(0.548 0.01 152); --ink-faint: oklch(0.7 0.008 152); /* Eucalyptus — the one brand colour. */ --primary: oklch(0.475 0.085 152); --primary-hover: oklch(0.43 0.088 152); --primary-active: oklch(0.39 0.088 152); --primary-fg: oklch(0.99 0.01 150); --primary-tint: oklch(0.965 0.018 152); --primary-tint-strong: oklch(0.918 0.034 152); --ring: oklch(0.55 0.1 152); /* Brass — meaning-bound, credits/money only. */ --credit: oklch(0.58 0.072 76); --credit-deep: oklch(0.49 0.07 76); --credit-tint: oklch(0.955 0.022 80); --success: oklch(0.6 0.135 150); --danger: oklch(0.545 0.175 25); --font-sans: 'Hanken Grotesk', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem); --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.44rem); --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.85rem); --step-4: clamp(2.4rem, 1.9rem + 2.5vw, 4rem); --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem); --measure: 65ch; --radius: 12px; --radius-lg: 18px; --z-nav: 100; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* --------------------------------- reset ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--primary-tint-strong); color: var(--ink); } /* Skip link */ .skip { position: absolute; left: 1rem; top: 0.5rem; transform: translateY(-150%); background: var(--ink); color: var(--bg); padding: 0.5rem 0.85rem; border-radius: 8px; z-index: 200; transition: transform 0.2s var(--ease); } .skip:focus { transform: translateY(0); } /* -------------------------------- layout ---------------------------------- */ .wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); } .tabular { font-variant-numeric: tabular-nums; } /* --------------------------- language switcher ---------------------------- */ /* Both languages live in the DOM; [data-lang] on reveals exactly one. English is the default on , so it shows even if JS never runs, and the switch is instant with no flash of the wrong language. */ [data-lang='en'] .lang-zh, [data-lang='zh'] .lang-en { display: none; } /* Latin display tracking is too tight for CJK; give it room to breathe. */ [data-lang='zh'] h1, [data-lang='zh'] .sec-head h2, [data-lang='zh'] h3 { letter-spacing: -0.008em; } .langsw { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--bg); flex: none; } .langsw button { font: inherit; font-weight: 600; font-size: var(--step--1); line-height: 1; padding: 0.4rem 0.7rem; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .langsw button + button { border-left: 1px solid var(--border); } .langsw button:hover { color: var(--ink); } .langsw button[aria-pressed='true'] { background: var(--primary); color: var(--primary-fg); } /* ------------------------------- buttons ---------------------------------- */ .btn { --_bg: var(--primary); display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; font-weight: 600; font-size: var(--step-0); line-height: 1; white-space: nowrap; padding: 0.85em 1.35em; border-radius: 10px; border: 1px solid transparent; background: var(--_bg); color: var(--primary-fg); cursor: pointer; transition: background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease); box-shadow: 0 1px 2px oklch(0.475 0.085 152 / 0.14); } .btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 18px oklch(0.475 0.085 152 / 0.2); } .btn:active { background: var(--primary-active); transform: translateY(0); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); box-shadow: none; } .btn--ghost:hover { background: var(--surface-sunken); border-color: var(--ink-faint); box-shadow: none; } .btn svg { width: 1.05em; height: 1.05em; } /* --------------------------------- nav ------------------------------------ */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--border); } .nav__row { display: flex; align-items: center; gap: 0.85rem; height: 4.25rem; } @media (min-width: 52rem) { .nav__row { gap: 1.5rem; } } /* Nav CTA is chrome — lighter and more compact than an in-page button. */ .nav .btn { font-size: var(--step--1); padding: 0.6rem 0.95rem; box-shadow: none; } @media (min-width: 52rem) { .nav .btn { padding: 0.65rem 1.1rem; } } .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--primary); } .brand__mark { width: 1.4rem; height: 1.4rem; } .nav__links { display: none; gap: 1.75rem; margin-left: auto; list-style: none; padding: 0; font-size: var(--step--1); font-weight: 500; } .nav__links a { color: var(--ink-muted); transition: color 0.15s var(--ease); } .nav__links a:hover { color: var(--ink); } .nav__cta { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; } @media (min-width: 52rem) { .nav__links { display: flex; } .nav__cta { margin-left: 0; gap: 0.9rem; } } /* Redundant with the Open-Nora button on small screens — show only when the nav has room for it. */ .nav__signin { display: none; font-size: var(--step--1); font-weight: 600; color: var(--ink); padding: 0.6rem 0.5rem; } @media (min-width: 40rem) { .nav__signin { display: inline-block; } } .nav__signin:hover { color: var(--primary); } /* -------------------------------- hero ------------------------------------ */ .hero { padding-top: clamp(3rem, 2rem + 6vw, 6rem); padding-bottom: clamp(3rem, 2rem + 5vw, 5.5rem); position: relative; overflow: clip; } .hero::before { /* a single, quiet eucalyptus wash top-right — atmosphere, not decoration */ content: ''; position: absolute; inset: -30% -20% auto auto; width: min(46rem, 80vw); height: 36rem; background: radial-gradient( closest-side, oklch(0.475 0.085 152 / 0.07), transparent 72% ); pointer-events: none; z-index: -1; } .hero__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 5vw, 4.5rem); align-items: center; } @media (min-width: 60rem) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); font-weight: 600; color: var(--primary); background: var(--primary-tint); border: 1px solid var(--primary-tint-strong); padding: 0.35rem 0.75rem; border-radius: 999px; margin-bottom: 1.5rem; } .eyebrow .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); } h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; max-width: 15ch; } /* CJK titles run wider per character; let the hero headline use more measure. */ [data-lang='zh'] h1 { max-width: 19ch; } .hero__sub { font-size: var(--step-1); color: var(--ink-muted); margin-top: 1.5rem; max-width: 46ch; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; } .hero__note { margin-top: 1.5rem; font-size: var(--step--1); color: var(--ink-subtle); } /* --------- signature motif: a real booking-confirmation vignette ---------- */ .vignette { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: 0 1px 0 var(--border), 0 24px 60px -30px oklch(0.245 0.012 152 / 0.28); overflow: hidden; } .vignette__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface); font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); } .vignette__wallet { margin-left: auto; display: inline-flex; align-items: baseline; gap: 0.3rem; background: var(--credit-tint); padding: 0.3rem 0.6rem; border-radius: 8px; } .vignette__wallet b { color: var(--credit-deep); font-size: 1.05rem; font-weight: 800; } .vignette__wallet span { font-size: 0.72rem; color: var(--ink-muted); font-weight: 500; } /* a slim schedule column with a eucalyptus booking block */ .sched { display: grid; grid-template-columns: 3.25rem 1fr; font-size: var(--step--1); } .sched__row { display: contents; } .sched__time { padding: 0 0.75rem; text-align: right; color: var(--ink-subtle); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); line-height: 3.25rem; font-variant-numeric: tabular-nums; } .sched__cell { border-bottom: 1px solid var(--border); height: 3.25rem; position: relative; } .sched__cell--open { background: var(--primary-tint); } .sched__block { position: absolute; inset: 3px 8px 3px 4px; background: var(--primary); color: var(--primary-fg); border-radius: 8px; padding: 0.4rem 0.6rem; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 6px 14px -6px oklch(0.475 0.085 152 / 0.55); } .sched__block b { font-size: 0.82rem; font-weight: 700; letter-spacing: -0.01em; } .sched__block span { font-size: 0.68rem; opacity: 0.85; } .vignette__receipt { border-top: 1px solid var(--border); padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.6rem; background: var(--surface); font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--ink-muted); } .vignette__receipt .check { width: 1.15rem; height: 1.15rem; color: var(--success); flex: none; } .vignette__receipt b { color: var(--ink); font-weight: 700; } .vignette__receipt .credit { color: var(--credit-deep); font-weight: 700; } /* ------------------------------ section shell ----------------------------- */ section { padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); } .rule { border: 0; border-top: 1px solid var(--border); } .sec-head { max-width: 42rem; } .sec-head h2 { font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; } .sec-head p { color: var(--ink-muted); font-size: var(--step-1); margin-top: 1rem; max-width: 52ch; text-wrap: pretty; } /* ---------------------------- audiences (two) ----------------------------- */ .aud { display: grid; gap: clamp(1.5rem, 0.5rem + 3vw, 3rem); margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); } @media (min-width: 48rem) { .aud { grid-template-columns: 1fr 1fr; } } .aud__col { padding-top: 1.75rem; border-top: 2px solid var(--primary); } .aud__kicker { font-size: var(--step--1); font-weight: 700; color: var(--primary); letter-spacing: 0.02em; } .aud__col h3 { font-size: var(--step-2); letter-spacing: -0.02em; font-weight: 700; margin-top: 0.5rem; line-height: 1.15; } .aud__col > p { color: var(--ink-muted); margin-top: 0.85rem; max-width: 42ch; } .feat { list-style: none; padding: 0; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; } .feat li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--step-0); } .feat svg { width: 1.2rem; height: 1.2rem; color: var(--primary); flex: none; margin-top: 0.2rem; } .feat b { font-weight: 600; } /* ------------------------------- steps (3) -------------------------------- */ .steps { display: grid; gap: clamp(1.5rem, 0.5rem + 3vw, 2.75rem); margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); counter-reset: step; } @media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { position: relative; padding-top: 2rem; border-top: 1px solid var(--border-strong); } .step__n { font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary-tint); border: 1px solid var(--primary-tint-strong); margin-bottom: 1rem; } .step h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; } .step p { color: var(--ink-muted); margin-top: 0.6rem; font-size: var(--step-0); } /* ------------------------- correctness promise ---------------------------- */ .promise { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .promise__grid { display: grid; gap: clamp(1.5rem, 0.5rem + 3vw, 3rem); margin-top: clamp(2rem, 1rem + 3vw, 3rem); } @media (min-width: 48rem) { .promise__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 68rem) { .promise__grid { grid-template-columns: repeat(4, 1fr); } } .promise__item h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.5rem; } .promise__item h3 svg { width: 1.3rem; height: 1.3rem; color: var(--primary); } .promise__item p { color: var(--ink-muted); margin-top: 0.6rem; font-size: var(--step--1); line-height: 1.6; } /* ----------------------------- business/contact --------------------------- */ .biz__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); margin-top: clamp(1.5rem, 0.5rem + 2vw, 2.5rem); } @media (min-width: 54rem) { .biz__grid { grid-template-columns: 1.2fr 1fr; } } .biz dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.9rem 1.75rem; margin: 0; align-items: baseline; } .biz dt { color: var(--ink-subtle); font-size: var(--step--1); font-weight: 600; } .biz dd { margin: 0; color: var(--ink); font-size: var(--step-0); } .biz dd a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--primary-tint-strong); } .biz dd a:hover { text-decoration-color: var(--primary); } .biz__note { align-self: start; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); background: var(--bg); } .biz__note h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; } .biz__note p { color: var(--ink-muted); margin-top: 0.75rem; font-size: var(--step-0); } .biz__cta { margin-top: 1.5rem; } /* -------------------------------- footer ---------------------------------- */ .foot { border-top: 1px solid var(--border); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); background: var(--surface); } .foot__grid { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-start; justify-content: space-between; } .foot__brand { max-width: 24rem; } .foot__brand p { color: var(--ink-subtle); font-size: var(--step--1); margin-top: 0.85rem; line-height: 1.6; } .foot__links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; list-style: none; padding: 0; font-size: var(--step--1); font-weight: 500; } .foot__links a { color: var(--ink-muted); } .foot__links a:hover { color: var(--primary); } .foot__legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--ink-subtle); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } /* ------------------------------ prose (policies) -------------------------- */ .doc { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .doc__head { max-width: var(--measure); margin-inline: auto; } .doc__head h1 { font-size: var(--step-3); letter-spacing: -0.03em; max-width: none; } .doc__head .meta { color: var(--ink-subtle); font-size: var(--step--1); margin-top: 1rem; } .prose { max-width: var(--measure); margin-inline: auto; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } .prose h2 { font-size: var(--step-2); letter-spacing: -0.02em; font-weight: 700; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); scroll-margin-top: 6rem; } .prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .prose h3 { font-size: var(--step-1); font-weight: 600; margin-top: 1.75rem; } .prose p, .prose li { color: var(--ink-muted); margin-top: 1rem; text-wrap: pretty; } .prose p strong, .prose li strong { color: var(--ink); font-weight: 600; } .prose ul { margin-top: 0.75rem; padding-left: 1.35rem; } .prose li { margin-top: 0.5rem; } .prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .callout { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.35rem; font-size: var(--step--1); color: var(--ink-muted); } .callout strong { color: var(--ink); } /* ------------------------------- reveal motion ---------------------------- */ /* Content is visible by default. JS *arms* each element (adds .reveal) only when it can also guarantee the reveal — via IntersectionObserver, an immediate in-viewport pass, and a timeout failsafe. If JS never runs, or reduced-motion is set, nothing is armed and everything stays visible. So a headless/paused renderer can never ship a blank section. */ [data-reveal] { opacity: 1; } @media (prefers-reduced-motion: no-preference) { [data-reveal].reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; } [data-reveal].reveal.in { opacity: 1; transform: none; } }