body { overflow-x: clip; } /* Header */ .c-head { position: fixed; left: 0; right: 0; top: var(--bar-h, 34px); z-index: 60; transition: background-color .35s, backdrop-filter .35s, border-color .35s; border-bottom: 1px solid transparent; } .c-head.scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom-color: var(--line-2); } .c-nav { display: flex; align-items: center; gap: 18px; height: 76px; } .c-nav .brand img { height: 52px; width: auto; } .c-links { display: flex; gap: 2px; margin: 0 auto; list-style: none; } .c-links a { padding: 10px 12px; text-decoration: none; color: var(--muted); font-size: .93rem; position: relative; white-space: nowrap; } .c-links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px; background: var(--metal); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .c-links a:hover { color: var(--text); } .c-links a:hover::after { transform: scaleX(1); } .c-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; } .c-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; } .c-progress > span { display: block; height: 100%; background: var(--metal); transform-origin: left; transform: scaleX(0); } /* Language segmented control with a sliding gold thumb */ .lang-seg { --i: 0; position: relative; display: inline-grid; grid-template-columns: repeat(3, auto); border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: color-mix(in srgb, var(--surface) 60%, transparent); isolation: isolate; } .lang-seg::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--metal); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px -6px rgba(217,154,18,.7); transform: translateX(calc(var(--i) * 100%)); transition: transform .45s cubic-bezier(.5,1.6,.4,1); } .lang-seg a { min-width: 52px; height: 34px; padding: 0 10px; border: 0; background: none; cursor: pointer; border-radius: 999px; font: 500 .74rem/1 var(--font-mono); letter-spacing: .08em; color: var(--muted); transition: color .3s; } .lang-seg a[aria-current="true"] { color: var(--on-gold); } .lang-seg a:lang(zh) { font-family: var(--font-body); letter-spacing: 0; } /* Theme switch: a brushed-gold knob travelling between moon and sun */ .theme-sw { position: relative; width: 66px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(135deg, #0b3f23, #2d1e05); cursor: pointer; padding: 0; flex: none; transition: background .5s; } :root[data-theme="light"] .theme-sw { background: linear-gradient(135deg, #f7e4a0, #ede9df); } .theme-sw .knob { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: var(--metal); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.35); display: grid; place-items: center; transition: transform .5s cubic-bezier(.5,1.6,.4,1); color: var(--on-gold); } .theme-sw[aria-checked="true"] .knob { transform: translateX(30px) rotate(180deg); } .theme-sw svg { width: 15px; height: 15px; } .theme-sw .k-sun { display: none; } .theme-sw[aria-checked="true"] .k-sun { display: block; } .theme-sw[aria-checked="true"] .k-moon { display: none; } .motion-btn { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--faint); font: 500 .7rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .motion-btn[aria-pressed="true"] { color: var(--gold-ink); border-color: var(--line); } @media (max-width: 1180px) { .c-links { display: none; } .c-nav .nav-portal { display: none; } } @media (max-width: 720px) { .c-nav { height: 64px; gap: 10px; } .c-nav .brand img { height: 40px; } .c-nav .btn-book { display: none; } .lang-seg a { min-width: 40px; padding: 0 6px; } .theme-sw { width: 58px; } .theme-sw[aria-checked="true"] .knob { transform: translateX(22px) rotate(180deg); } .motion-btn { display: none; } } @media (max-width: 380px) { .lang-seg a { min-width: 34px; font-size: .68rem; } } /* Language swap crossfade */ #app { transition: opacity .18s ease, filter .18s ease; } #app.lang-out { opacity: .15; filter: blur(2px); } :root[data-lang="zh"] .display, :root[data-lang="zh"] h1, :root[data-lang="zh"] h2 { letter-spacing: 0; } /* Split-word reveal */ [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } [data-split] .w > span { display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: left bottom; transition: transform .9s cubic-bezier(.2,.8,.1,1); transition-delay: calc(var(--i) * 45ms + var(--d, 0ms)); } [data-split].in .w > span { transform: none; } [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); } [data-reveal].in { opacity: 1; transform: none; } /* Metallic text with a slow travelling light */ .metal-text { background: linear-gradient(100deg, #a8740b 0%, #d99a12 22%, #f7e4a0 34%, #f0bf43 46%, #d99a12 62%, #a8740b 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s linear infinite; } :root[data-theme="light"] .metal-text { background-image: linear-gradient(100deg, #6b4a06 0%, #a8740b 25%, #d99a12 38%, #2d1e05 55%, #a8740b 75%, #6b4a06 100%); } /* Split metallic lines: the gradient sits on each word so it paints while the words move. */ .metal-text[data-split], .metal-text:has([data-split]) { background: none !important; color: var(--gold-ink); -webkit-text-fill-color: currentColor; animation: none; } .metal-text[data-split] .w > span, .metal-text [data-split] .w > span { background: linear-gradient(100deg, #a8740b 0%, #d99a12 22%, #f7e4a0 34%, #f0bf43 46%, #d99a12 62%, #a8740b 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .04em; } :root[data-theme="light"] .metal-text[data-split] .w > span { background-image: linear-gradient(100deg, #6b4a06 0%, #a8740b 25%, #d99a12 38%, #2d1e05 55%, #a8740b 75%, #6b4a06 100%); } @keyframes sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } } /* Tilt cards */ [data-tilt] { --rx: 0deg; --ry: 0deg; --lx: 50%; --ly: 50%; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease), box-shadow .5s; transform-style: preserve-3d; position: relative; } [data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(500px circle at var(--lx) var(--ly), rgba(247,228,160,.16), transparent 45%); opacity: 0; transition: opacity .4s; mix-blend-mode: screen; } :root[data-theme="light"] [data-tilt]::after { mix-blend-mode: multiply; background: radial-gradient(500px circle at var(--lx) var(--ly), rgba(217,154,18,.14), transparent 45%); } [data-tilt].lit::after { opacity: 1; } [data-tilt].lit { transition: transform .12s linear, box-shadow .5s; box-shadow: var(--shadow); } [data-tilt].pressed { transform: scale(.985); } [data-magnetic] { transition: transform .35s cubic-bezier(.3,1.6,.5,1); } /* Sections shared by all concepts */ .c-section { position: relative; padding: clamp(80px, 11vw, 150px) 0; } .c-eyebrow { font: 500 .74rem/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); display: inline-flex; gap: 12px; align-items: center; margin-bottom: 18px; } .c-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--metal); } :root[data-lang="zh"] .c-eyebrow { letter-spacing: .06em; } .c-h2 { font: 500 clamp(2.2rem, 5vw, 4.2rem)/1.02 var(--font-display); letter-spacing: -.015em; text-wrap: balance; } .c-h2 em { font-style: italic; font-weight: 400; display: block; } :root[data-lang="zh"] .c-h2 { line-height: 1.25; font-weight: 600; } :root[data-lang="zh"] .c-h2 em { font-style: normal; } .c-lede { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--muted); max-width: 60ch; margin-top: 20px; } @media (prefers-reduced-motion: reduce) { [data-split] .w > span, [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; } .metal-text { animation: none; } } html.motion-off [data-split] .w > span, html.motion-off [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; } html.motion-off .metal-text { animation: none; } /* ===== Homepage (direction B) ===== */ .l-hero { position: relative; min-height: 100svh; padding: calc(var(--bar-h, 34px) + var(--head-h, 110px) + 40px) 0 40px; overflow: clip; isolation: isolate; background: radial-gradient(80% 70% at 85% 30%, rgba(217,154,18,.14), transparent 60%), var(--brand-gradient); } :root[data-theme="light"] .l-hero { background: radial-gradient(80% 70% at 85% 30%, rgba(240,191,67,.3), transparent 60%), linear-gradient(135deg, #f4f1e8, #ede9df); } .l-grid { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 80%); } .l-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 80%); } .l-scan { position: absolute; left: 20px; top: 0; z-index: 0; pointer-events: none; font: 500 .62rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); opacity: .75; will-change: transform; } @media (max-width: 960px) { .l-scan { display: none; } } @media (prefers-reduced-motion: reduce) { .l-scan { display: none; } } html.motion-off .l-scan { display: none; } .l-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 80px); align-items: center; } .l-h1 { font: 500 clamp(2.5rem, 5.6vw, 5rem)/1 var(--font-display); letter-spacing: -.02em; } .l-h1 > span { display: block; } .l-l2 { font-style: italic; font-weight: 400; padding-bottom: .1em; } :root[data-lang="zh"] .l-h1 { line-height: 1.2; font-weight: 600; } :root[data-lang="zh"] .l-l2 { font-style: normal; } .l-copy .lede { margin: 24px 0 30px; } /* 3D form stack */ .l-stack-wrap { position: relative; display: grid; place-items: center; perspective: 1600px; min-height: 520px; overflow-x: clip; overflow-y: visible; } .l-stack { --sx: 0; --sy: 0; position: relative; width: min(380px, 78vw); aspect-ratio: 8.5/11; transform-style: preserve-3d; transform: rotateX(calc(12deg + var(--sy) * -10deg)) rotateY(calc(-18deg + var(--sx) * 22deg)) rotateZ(-4deg); transition: transform .25s linear; } .l-doc { --pos: var(--i); position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 22px; border-radius: 10px; text-decoration: none; color: #1d1b14; background: linear-gradient(170deg, #fffdf6, #f3ecd8); border: 1px solid rgba(45,30,5,.18); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 60px -30px rgba(0,0,0,.6); transform: translate3d(calc(var(--pos) * (16px + var(--spread, 0) * 46px)), calc(var(--pos) * (-14px - var(--spread, 0) * 30px)), calc(var(--pos) * -60px)) rotateZ(calc(var(--pos) * (2deg + var(--spread, 0) * 3deg))); transition: transform .8s cubic-bezier(.2,.8,.1,1), filter .6s, opacity .6s; z-index: calc(10 - var(--pos)); filter: brightness(calc(1 - var(--pos) * .07)); } .l-stack:hover, .l-stack:focus-within { --spread: 1; } .l-doc:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; } .l-doc-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1d1b14; padding-bottom: 10px; } .l-form { font: 600 1.25rem/1 var(--font-display); } .l-code { font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; color: #6b5a33; } .l-doc-lines { display: grid; gap: 9px; margin-top: 6px; } .l-doc-lines i { display: block; height: 7px; border-radius: 3px; background: linear-gradient(90deg, rgba(45,30,5,.14), rgba(45,30,5,.05)); } .l-doc-lines i:nth-child(2n) { width: 74%; } .l-doc-lines i:nth-child(3) { width: 88%; } .l-doc-name { margin-top: auto; font: 600 1.6rem/1.15 var(--font-display); color: #0b3f23; } .l-doc-price { font: 500 .8rem/1 var(--font-mono); letter-spacing: .08em; color: #8a5c06; } .l-stamp { position: absolute; right: 18px; bottom: 18px; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(168,116,11,.55); outline: 1px solid rgba(168,116,11,.35); outline-offset: 3px; rotate: -12deg; opacity: .9; background: radial-gradient(circle, rgba(247,228,160,.55), transparent 70%); } .l-stamp img { width: 72px; height: auto; } .l-hint { position: absolute; bottom: -18px; } .l-creds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--line); } .l-creds > div { padding: 16px 10px; border-right: 1px solid var(--line-2); } .l-creds > div:last-child { border-right: 0; } .l-creds b { display: block; font: 600 1.4rem/1 var(--font-display); color: var(--gold-ink); } .l-creds span { font: 500 .62rem/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } /* Ledger order rows */ .l-tape { padding: 70px 0; background: var(--bg-2); border-block: 1px solid var(--line); } .l-tape-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; align-items: baseline; margin-bottom: 18px; } .l-tape-head h2 { font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.2 var(--font-display); } .l-rows { border-top: 1px solid var(--line); } .l-row { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1.2fr) minmax(0, 1fr) 1fr auto auto 40px; gap: 18px; align-items: center; padding: 20px 8px; border-bottom: 1px solid var(--line); text-decoration: none; overflow: hidden; } .l-row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(217,154,18,.12), transparent 70%); transform: translateX(-101%); transition: transform .6s cubic-bezier(.2,.8,.1,1); } .l-row:hover::before, .l-row:focus-visible::before { transform: none; } .l-row > * { position: relative; } .l-idx { font: 500 .72rem/1 var(--font-mono); letter-spacing: .1em; color: var(--gold-ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; text-align: center; } .l-n { font: 600 1.3rem/1.2 var(--font-display); } .l-note { color: var(--muted); font-size: .9rem; } .l-dots { height: 1px; background-image: linear-gradient(90deg, var(--faint) 30%, transparent 0); background-size: 7px 1px; opacity: .6; } .l-p { font: 500 1.6rem/1 var(--font-display); color: var(--gold-ink); white-space: nowrap; } .l-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: background .3s, transform .4s var(--ease); } .l-go svg { width: 16px; height: 16px; } .l-row:hover .l-go { background: var(--metal); color: var(--on-gold); transform: rotate(-45deg); } /* Pinned scroll story */ .l-story { height: 420vh; position: relative; background: var(--bg); } .l-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: clip; padding-top: calc(var(--bar-h, 34px) + 60px); } .l-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; width: 100%; } .l-steps { list-style: none; margin-top: 26px; display: grid; gap: 4px; counter-reset: s; } .l-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 12px 0; color: var(--faint); border-top: 1px solid var(--line-2); transition: color .5s, padding-left .5s var(--ease); } .l-steps li.on { color: var(--text); padding-left: 8px; } .l-steps li.done { color: var(--muted); } .l-num { font: 500 .78rem/1.6 var(--font-mono); color: var(--faint); } .l-steps li.on .l-num { color: var(--gold-ink); } .l-visual { position: relative; display: grid; place-items: center; perspective: 1200px; } .l-paper { position: relative; width: min(360px, 70vw); aspect-ratio: 8.5/11; padding: 26px; border-radius: 10px; background: linear-gradient(170deg, #fffdf6, #f3ecd8); color: #1d1b14; display: grid; align-content: start; gap: 10px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); transform: rotateY(calc(-14deg + var(--p, 0) * 28deg)) rotateX(6deg); } .l-paper > i { display: block; height: 8px; border-radius: 4px; background: rgba(45,30,5,.12); } .l-paper > i.short { width: 60%; } .l-paper-h { display: flex; gap: 10px; align-items: baseline; border-bottom: 2px solid #1d1b14; padding-bottom: 10px; margin-bottom: 8px; } .l-paper-h b { font: 700 1.6rem/1 var(--font-display); } .l-paper-h span { font: 500 .72rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .l-overlay { position: absolute; left: 14%; right: -14%; padding: 16px; border-radius: 10px; background: #fffdf6; border: 1px solid rgba(168,116,11,.4); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); color: #0b3f23; display: grid; gap: 8px; opacity: 0; transform: translate3d(30px, 20px, 60px) rotate(3deg); transition: opacity .7s, transform .9s cubic-bezier(.2,.8,.1,1); } .l-overlay span { font: 500 .68rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #8a5c06; } .l-overlay i { display: block; height: 7px; border-radius: 4px; background: rgba(11,63,35,.15); } .l-overlay i.short { width: 55%; } .l-overlay svg { color: #d99a12; width: 100%; height: 50px; } .l-overlay.o1 { top: 26%; } .l-overlay.o2 { top: 44%; left: 20%; } .l-overlay.o3 { top: 62%; left: 8%; } .l-overlay.on { opacity: 1; transform: translate3d(0, 0, 40px) rotate(calc(var(--r, -2deg))); } .l-overlay.o2.on { --r: 1.5deg; } .l-seal-stamp { position: absolute; right: -10%; bottom: -6%; width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #f7e4a0, #f0bf43 60%, #d99a12); box-shadow: 0 20px 40px -10px rgba(0,0,0,.5), inset 0 0 0 6px rgba(255,255,255,.35); opacity: 0; transform: scale(1.8) rotate(-30deg); transition: opacity .4s, transform .6s cubic-bezier(.4,1.8,.5,1); } .l-seal-stamp img { width: 104px; height: auto; } .l-seal-stamp.on { opacity: 1; transform: scale(1) rotate(-12deg); } .l-meter { position: absolute; left: 0; right: 0; bottom: -40px; height: 2px; background: var(--line-2); } .l-meter span { display: block; height: 100%; background: var(--metal); transform-origin: left; transform: scaleX(var(--p, 0)); } /* Horizontal rail (vertical scroll drives horizontal motion) */ .l-rail { height: 320vh; padding: 0; } .l-rail .l-sticky { flex-direction: column; justify-content: center; align-items: stretch; gap: 40px; } .l-track { display: flex; gap: 20px; padding: 0 var(--gutter); width: max-content; transform: translate3d(calc(var(--p, 0) * var(--dist, 0px) * -1), 0, 0); will-change: transform; } .l-card { position: relative; flex: none; width: min(360px, 78vw); min-height: 340px; padding: 28px 26px; border-radius: 18px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; background: linear-gradient(165deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); } .l-card-no { font: 500 .74rem/1 var(--font-mono); letter-spacing: .12em; color: var(--gold-ink); } .l-card h3 { font: 600 1.7rem/1.1 var(--font-display); } .l-card-d { color: var(--muted); font-size: .94rem; } .l-card .tg { margin-top: auto; align-self: flex-start; font: 500 .66rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 10px; } .l-card .l-go { position: absolute; right: 22px; bottom: 22px; } .l-card:hover .l-go { background: var(--metal); color: var(--on-gold); transform: rotate(-45deg); } /* Portal preview */ .l-portal-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 80px); align-items: center; } .l-dash { border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .l-dash-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); } .l-dash-top .dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--line); } .l-dash-body { padding: 18px; display: grid; gap: 16px; } .l-dash-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } .l-dash-row .bar { grid-column: 1 / -1; } .l-dash-row .bar span { width: 0; transition: width 1.6s cubic-bezier(.2,.8,.1,1) .3s; } .l-dash.in .bar span { width: var(--w); } .l-dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .l-dash-tiles span { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--line-2); font-size: .86rem; background: var(--surface-2); } .l-dash-tiles svg { width: 20px; height: 20px; color: var(--gold-ink); } /* Shuffle deck testimonials */ .l-shuffle { position: relative; height: 380px; max-width: 680px; margin: 44px auto 0; } .l-q { position: absolute; inset: 0; margin: 0; padding: 32px 30px; border-radius: 18px; display: flex; flex-direction: column; gap: 16px; background: linear-gradient(165deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow-s); transform: translate3d(calc(var(--o, 0) * 18px), calc(var(--o, 0) * 18px), 0) rotate(calc(var(--o, 0) * 2deg)); z-index: calc(10 - var(--o, 0)); transition: transform .7s cubic-bezier(.2,.8,.1,1), opacity .5s; } .l-q.fly { transform: translate3d(120%, -30px, 0) rotate(14deg); opacity: 0; } .l-q .stars { color: var(--gold-hi); letter-spacing: 3px; } :root[data-theme="light"] .l-q .stars { color: var(--gold-lo); } .l-q blockquote { margin: 0; font: 400 1.3rem/1.5 var(--font-display); } .l-q figcaption { margin-top: auto; color: var(--muted); } .l-next { position: absolute; right: -10px; bottom: -60px; } @media (max-width: 960px) { .l-hero-grid, .l-story-grid, .l-portal-grid { grid-template-columns: 1fr; } .l-stack-wrap { min-height: 440px; } .l-stack { width: min(300px, 62vw); } .l-creds { grid-template-columns: repeat(3, 1fr); } .l-creds > div:nth-child(-n+3) { border-bottom: 1px solid var(--line-2); } .l-row { grid-template-columns: 64px 1fr auto; } .l-note, .l-dots { display: none; } .l-row .l-go { display: none; } .l-story { height: 360vh; } .l-sticky { align-items: flex-start; padding-top: calc(var(--bar-h, 34px) + 84px); } .l-visual { display: none; } .l-rail { height: auto; padding: 80px 0; } .l-rail .l-sticky { position: relative; height: auto; padding-top: 0; } .l-track { transform: none !important; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; -webkit-overflow-scrolling: touch; } .l-card { scroll-snap-align: center; } } @media (max-width: 520px) { .l-hero { padding-top: calc(var(--bar-h, 34px) + var(--head-h, 70px) + 24px); } .l-copy .btn-row > * { flex: 1 1 100%; } .l-copy .btn-row .btn { width: 100%; } .l-shuffle { height: 440px; } .l-q blockquote { font-size: 1.12rem; } .l-dash-tiles { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .l-stack, .l-paper { transform: none !important; } .l-track { transform: none !important; } } html.motion-off .l-stack, html.motion-off .l-paper { transform: none !important; } .l-voices { overflow-x: clip; } /* ===== Site-wide layer: design direction B (Futuristic Financial Intelligence) ===== Same logo, palette and fonts as the original site. The ledger is the visual system: ruled grids, DM Mono indices, paper documents, gold rules that draw in. */ main { padding-top: 0; } main:not(.flush) > :first-child:not(.page-hero):not(.auth):not(.app-shell) { margin-top: calc(var(--bar-h) + var(--head-h, 110px)); } body { overflow-x: clip; } .c-head { z-index: 70; } .c-ann { border-bottom: 1px solid var(--line-2); font: 500 .66rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); transition: margin .35s var(--ease), opacity .35s; } .c-ann .wrap { display: flex; justify-content: space-between; gap: 20px; padding-block: 8px; } .c-ann a { color: var(--gold-ink); text-decoration: none; letter-spacing: .06em; } :root[data-lang="zh"] .c-ann { letter-spacing: .04em; } .c-head.scrolled .c-ann { margin-top: -27px; opacity: 0; pointer-events: none; } .c-links a[aria-current="page"] { color: var(--text); } .c-links a[aria-current="page"]::after { transform: scaleX(1); } .prefs { display: flex; align-items: center; gap: 8px; } .lang-seg { isolation: isolate; } .lang-seg a { display: grid; place-items: center; text-decoration: none; } .menu-btn { display: none; } @media (max-width: 1180px) { .menu-btn { display: inline-flex; } } @media (max-width: 960px) { .c-ann { display: none; } .prefs-head .motion-btn { display: none; } } @media (max-width: 560px) { .prefs-head .theme-sw { display: none; } .c-tools { gap: 6px; } } .drawer-panel .prefs-drawer { flex-wrap: wrap; margin: 12px 0 6px; } .drawer-panel .prefs-drawer .theme-sw { display: block; } .drawer a.dl { justify-content: flex-start; gap: 14px; } .drawer a.dl .chev { margin-left: auto; } .dl-no { font: 500 .7rem/1 var(--font-mono); color: var(--gold-ink); letter-spacing: .1em; } .drawer-ann { margin-top: 14px; font: 500 .64rem/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } /* Labels: one mono eyebrow everywhere */ .kicker { font: 500 .74rem/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; } .kicker::before { width: 34px; background: var(--metal); opacity: 1; } :root[data-lang="zh"] .kicker { letter-spacing: .06em; } /* Ledger hero for every inner page */ .page-hero { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--bar-h) + var(--head-h, 110px) + clamp(36px, 6vw, 80px)) 0 clamp(48px, 7vw, 96px); background: radial-gradient(70% 80% at 90% 10%, rgba(217,154,18,.12), transparent 60%), var(--brand-gradient); border-bottom: 1px solid var(--line); } :root[data-theme="light"] .page-hero { background: radial-gradient(70% 80% at 90% 10%, rgba(240,191,67,.28), transparent 60%), linear-gradient(135deg, #f4f1e8, #ede9df); } .page-hero .wrap { position: relative; } .page-hero .display { font: 500 clamp(2.4rem, 5.4vw, 4.6rem)/1.02 var(--font-display); letter-spacing: -.02em; max-width: 20ch; } .page-hero .display > span:not(.w) { display: block; } .page-hero .display .line2 { font-style: italic; font-weight: 400; padding-bottom: .08em; } :root[data-lang="zh"] .page-hero .display { line-height: 1.22; font-weight: 600; } :root[data-lang="zh"] .page-hero .display .line2 { font-style: normal; } .page-hero .lede { max-width: 62ch; } .page-hero .bg-lines { display: none; } .l-grid { pointer-events: none; } .crumbs { font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } /* Service hero: the price card is the document */ .svc-hero .svc-top { align-items: center; } .svc-hero .display { font-size: clamp(2.2rem, 4.2vw, 3.7rem); max-width: 22ch; } .l-paperdoc { position: relative; color: #1d1b14; background: linear-gradient(170deg, #fffdf6, #f3ecd8); border: 1px solid rgba(45,30,5,.18); border-radius: 10px; padding: 26px 26px 22px; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 80px -40px rgba(0,0,0,.65); top: auto; } .l-paperdoc .pd-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1d1b14; padding-bottom: 10px; margin-bottom: 14px; } .l-paperdoc .pd-form { font: 600 1.2rem/1 var(--font-display); } .l-paperdoc .pd-code { font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; color: #6b5a33; } .l-paperdoc .pd-lines { display: grid; gap: 8px; margin-bottom: 18px; } .l-paperdoc .pd-lines i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(45,30,5,.14), rgba(45,30,5,.04)); } .l-paperdoc .pd-lines i:nth-child(2) { width: 76%; } .l-paperdoc .pd-lines i:nth-child(3) { width: 58%; } .l-paperdoc .pd-stamp { position: absolute; right: 16px; top: 64px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(168,116,11,.5); outline: 1px solid rgba(168,116,11,.3); outline-offset: 3px; rotate: -12deg; opacity: .85; pointer-events: none; } .l-paperdoc .pd-stamp img { width: 60px; height: auto; } .l-paperdoc .amt { color: #0b3f23; } .l-paperdoc .amt.word { color: #0b3f23; padding-right: 80px; } .l-paperdoc .pn { color: #4a4436; } .l-paperdoc .meta { color: #6b5a33; border-top-color: rgba(45,30,5,.15); } .l-paperdoc .btn { --b: rgba(45,30,5,.3); color: #1d1b14; background: transparent; } .l-paperdoc .btn:hover { --b: #8a5c06; color: #8a5c06; } .l-paperdoc .btn-gold { color: var(--on-gold); background: var(--metal); } .l-paperdoc .consult-menu { color: var(--text); } .l-paperdoc[data-tilt]::after { border-radius: 10px; } /* Sections and cards */ .section { position: relative; } .panel, .panel-engraved { border-radius: 6px; background: linear-gradient(165deg, var(--surface-2), var(--surface)); border-color: var(--line); } .panel-engraved::after { border-radius: 3px; border-color: var(--line-2); } .panel > .h3:first-child, .panel > h2:first-child { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); } .grid-3 > .panel, .grid-3 > .panel-engraved, .grid-2 > .panel { position: relative; } .steps li::before { content: counter(s, decimal-leading-zero); font: 500 .78rem/1.9 var(--font-mono); letter-spacing: .1em; } .list-check li::before { border-radius: 3px; } .ledger a { border-radius: 0; } .ledger a::before { background: var(--metal); } .ledger .tg, .pill, .status { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; } :root[data-lang="zh"] .ledger .tg, :root[data-lang="zh"] .pill, :root[data-lang="zh"] .status { letter-spacing: 0; text-transform: none; font-size: .74rem; } .chip { border-radius: 6px; font-family: var(--font-body); } .testi { border-radius: 6px; background: linear-gradient(165deg, var(--surface-2), var(--surface)); border-color: var(--line); } .testi::before { display: none; } .testi figcaption { padding-top: 14px; border-top: 1px solid var(--line-2); font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } :root[data-lang="zh"] .testi figcaption { letter-spacing: .02em; } .faq summary .pm { border-radius: 4px; } .es-box { border-radius: 0 6px 6px 0; } .tiles { border-radius: 6px; } .consult dl > div { position: relative; } /* Call to action band: ledger rather than seal */ .cta-band { isolation: isolate; border-top: 1px solid var(--line); } .cta-band .l-grid { mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 75%); } .cta-band .bg-seal { display: none; } /* Homepage additions in the same language */ .l-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; } .l-case { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 46px 26px 26px; border-radius: 4px 14px 6px 6px; background: linear-gradient(165deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); } .l-case-tab { position: absolute; left: -1px; top: -1px; padding: 8px 14px; border-radius: 4px 12px 0 0; background: var(--metal); color: var(--on-gold); font: 500 .66rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .l-case-ic { width: 34px; height: 34px; color: var(--gold-ink); } .l-case h3 { font: 600 1.55rem/1.15 var(--font-display); } .l-case ul { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-2); } .l-case li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: .94rem; position: relative; } .l-case li::before { content: "✓"; position: absolute; left: 2px; color: var(--gold-ink); font-size: .8rem; top: 10px; } .l-case .btn { margin-top: auto; align-self: flex-start; } .l-why-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .l-memo { margin-top: 26px; padding-left: 22px; border-left: 2px solid var(--gold); display: grid; gap: 14px; color: var(--muted); font-size: 1.03rem; } .l-cells { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); } .l-cell { position: relative; padding: 28px 22px 24px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); display: grid; gap: 8px; align-content: start; } .l-cell:nth-child(2n) { border-right: 0; } .l-cell:nth-child(n+3) { border-bottom: 0; } .l-cell-no { position: absolute; right: 16px; top: 14px; font: 500 .68rem/1 var(--font-mono); color: var(--faint); letter-spacing: .1em; } .l-cell svg { width: 28px; height: 28px; color: var(--gold-ink); } .l-cell h3 { font: 600 1.2rem/1.2 var(--font-display); } .l-cell p { color: var(--muted); font-size: .92rem; } .l-accounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--line); } .l-account { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px 28px; text-decoration: none; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line); overflow: hidden; } .l-account:last-child { border-right: 0; } .l-account::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(217,154,18,.1), transparent 70%); transform: translateY(-101%); transition: transform .6s cubic-bezier(.2,.8,.1,1); } .l-account:hover::before, .l-account:focus-visible::before { transform: none; } .l-account > * { position: relative; } .l-acc-no { font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; color: var(--gold-ink); } .l-acc-ic { width: 36px; height: 36px; color: var(--gold-ink); } .l-account h3 { font: 600 1.5rem/1.15 var(--font-display); } .l-account p { color: var(--muted); font-size: .95rem; } .l-account .go { margin-top: auto; color: var(--gold-ink); font-weight: 600; font-size: .92rem; display: inline-flex; gap: 6px; align-items: center; } .l-rail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; } .l-voices-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; } .l-q .orig { font-size: .74rem; color: var(--faint); } .consult { padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); } @media (max-width: 960px) { .l-cases, .l-accounts { grid-template-columns: 1fr; } .l-account { border-right: 0; } .l-why-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .l-cells { grid-template-columns: 1fr; } .l-cell { border-right: 0; border-bottom: 1px solid var(--line-2) !important; } .l-cell:last-child { border-bottom: 0 !important; } } /* Forms: ledger fields */ .input { border-radius: 4px; } .input:focus { box-shadow: 0 0 0 3px rgba(217,154,18,.16); } .field label { font-weight: 500; } dialog { border-radius: 8px; } .dlg-h h2 { font-family: var(--font-display); } /* Footer: the closing ledger */ .foot { position: relative; isolation: isolate; overflow: clip; } .foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 64px 64px; opacity: .5; mask-image: linear-gradient(180deg, #000, transparent 80%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); } .foot h2 { font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--line); } :root[data-lang="zh"] .foot h2 { letter-spacing: .04em; } .foot ul { gap: 0; } .foot ul li { padding: 6px 0; border-bottom: 1px solid var(--line-2); } /* Chatbot: a ledger panel */ .chat { border-radius: 10px; border-color: var(--line); } .chat-h { border-bottom: 1px solid var(--line); } .chat-h b { font-family: var(--font-display); } .chat-h small { font: 500 .62rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .chat-disc { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; } :root[data-lang="zh"] .chat-disc, :root[data-lang="zh"] .chat-h small { text-transform: none; letter-spacing: 0; font-size: .74rem; } .chat-log { background-image: linear-gradient(var(--line-2) 1px, transparent 1px); background-size: 100% 32px; background-attachment: local; } .msg { border-radius: 8px; } .msg.bot { border-bottom-left-radius: 2px; } .msg.me { border-bottom-right-radius: 2px; background: var(--metal); } .msg .mini { border-radius: 4px; font-family: var(--font-mono); font-size: .76rem; } .chat-chips button { border-radius: 6px; font-size: .8rem; } .chat-f input { border-radius: 6px; } .chat-f button { border-radius: 6px; background: var(--metal); } /* Portals: enterprise ledger */ .app-shell { background: var(--bg); } .app-side { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-right-color: var(--line); } .app-side button.tab { border-radius: 4px; font-size: .9rem; } .app-side button.tab[aria-selected="true"] { background: linear-gradient(90deg, rgba(217,154,18,.14), transparent); box-shadow: inset 2px 0 0 var(--gold); } .app-bar { display: flex; justify-content: flex-end; } .app-top { padding-bottom: 18px; border-bottom: 1px solid var(--line); } .app-top h1 { font-weight: 500; } .stat-grid { gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); } .stat { position: relative; border: 0; border-right: 1px solid var(--line-2); border-radius: 0; background: transparent; padding: 22px 20px; } .stat:last-child { border-right: 0; } .stat b { font: 500 2.4rem/1 var(--font-display); background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat span { display: block; margin-top: 8px; font: 500 .66rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } :root[data-lang="zh"] .stat span { letter-spacing: 0; text-transform: none; font-size: .8rem; } @media (max-width: 900px) { .stat:nth-child(2n) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); } } .tbl-wrap { border-radius: 6px; border-color: var(--line); } .tbl th { font: 500 .66rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--surface-2); } :root[data-lang="zh"] .tbl th { letter-spacing: 0; font-size: .76rem; } .tbl tbody tr { transition: background .25s; } .tbl tbody tr:hover { background: linear-gradient(90deg, rgba(217,154,18,.08), transparent 70%); } .bar { height: 4px; border-radius: 2px; } .tile-btns button { border-radius: 6px; } .demo-flag { border-radius: 6px; font-family: var(--font-body); } .auth-hero { isolation: isolate; background: radial-gradient(70% 80% at 90% 10%, rgba(217,154,18,.12), transparent 60%), var(--brand-gradient); } :root[data-theme="light"] .auth-hero { background: radial-gradient(120% 100% at 100% 0%, rgba(240,191,67,.22), transparent 70%), linear-gradient(135deg, #f4f1e8, #ede9df); } .auth-hero .l-grid { z-index: 0; } .auth-prefs { display: flex; justify-content: flex-end; } .otp input { border-radius: 4px; font-family: var(--font-mono); } @media (max-width: 900px) { .app-bar { justify-content: flex-start; } } /* Section divider: a ruled ledger line with column ticks (replaces the engraved wave) */ .rule-engraved { height: 14px; opacity: 1; background: none; position: relative; max-width: var(--wrap, 1200px); margin: 0 auto; border-bottom: 1px solid var(--line); background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 6px; background-repeat: repeat-x; background-position: left bottom; } :root[data-theme="light"] .rule-engraved { opacity: 1; } .cert::before { display: none; } .l-cta { font: 500 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .l-row:hover .l-cta { color: var(--gold-ink); } :root[data-lang="zh"] .l-cta { letter-spacing: 0; font-size: .78rem; } @media (max-width: 960px) { .l-row { grid-template-columns: 64px 1fr auto; } .l-cta { grid-column: 2 / -1; } } :root[data-theme="light"] .stat b { background: linear-gradient(100deg, #6b4a06 0%, #a8740b 30%, #8a5c06 60%, #2d1e05 100%); -webkit-background-clip: text; background-clip: text; } :root[data-lang="zh"] .l-h1 { font-size: clamp(2.2rem, 4.4vw, 4rem); } /* Hero surface (replaces the ruled grid) */ .l-surface { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; opacity: 0; transition: opacity 1.8s var(--ease); } .l-surface.on { opacity: 1; } .l-surface.off { display: none; } .l-hero::before, .page-hero::before, .auth-hero::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 75%; z-index: -2; pointer-events: none; background: radial-gradient(50% 55% at 62% 38%, rgba(240,191,67,.16), transparent 70%); } :root[data-theme="light"] .l-hero::before, :root[data-theme="light"] .page-hero::before, :root[data-theme="light"] .auth-hero::before { background: radial-gradient(50% 55% at 62% 38%, rgba(240,191,67,.32), transparent 70%); } .l-hero .l-grid, .page-hero .l-grid, .auth-hero .l-grid, .l-scan, .l-lines { display: none !important; } .auth-hero { position: relative; isolation: isolate; } .auth-hero > *:not(.l-surface) { position: relative; z-index: 1; } .foot::before { display: none; } .cta-band { background: radial-gradient(60% 90% at 50% 120%, rgba(217,154,18,.18), transparent 70%), var(--bg-2); } .l-hero .l-surface { height: 100svh; bottom: auto; } /* ===== Light theme: the brand's deep green as a working surface, not only as text ===== */ :root[data-theme="light"] { --line: rgba(11, 63, 35, .2); --line-2: rgba(11, 63, 35, .11); --text: #0b2a19; } /* Green sections: the dark palette re-scoped inside, so every component inside renders correctly */ :root[data-theme="light"] :is(.c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel) { --bg: #0b3f23; --bg-2: #0a3720; --surface: #0f4628; --surface-2: #145030; --surface-3: #1b5a37; --text: #ede9df; --muted: #d3dacd; --faint: #aebcab; --line: rgba(240, 191, 67, .3); --line-2: rgba(237, 233, 223, .13); --gold-ink: #f0bf43; --shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); --shadow-s: 0 10px 30px -14px rgba(0, 0, 0, .45); color: var(--text); color-scheme: dark; } :root[data-theme="light"] .c-ann { background: #0b3f23; border-bottom-color: rgba(240,191,67,.25); } :root[data-theme="light"] .c-head.scrolled { background: color-mix(in srgb, #f4f1e8 86%, transparent); } :root[data-theme="light"] .l-tape { background: linear-gradient(135deg, #0b3f23, #0a3720 60%, #2d1e05 140%); border-color: rgba(240,191,67,.3); } :root[data-theme="light"] .l-rail { background: radial-gradient(60% 80% at 85% 20%, rgba(240,191,67,.12), transparent 60%), linear-gradient(160deg, #0b3f23, #082d19); } :root[data-theme="light"] .l-portal { background: linear-gradient(135deg, #0b3f23 0%, #0a3720 55%, #2d1e05 130%); } :root[data-theme="light"] .cta-band { background: radial-gradient(60% 90% at 50% 120%, rgba(240,191,67,.22), transparent 70%), linear-gradient(135deg, #0b3f23, #2d1e05 140%); border-top: 0; } :root[data-theme="light"] .foot { background: linear-gradient(135deg, #0b3f23 0%, #082d19 60%, #2d1e05 130%); } :root[data-theme="light"] .auth-hero { background: radial-gradient(70% 80% at 90% 10%, rgba(240,191,67,.18), transparent 60%), linear-gradient(150deg, #0b3f23, #082d19 70%, #2d1e05 140%); } :root[data-theme="light"] .app-side { background: linear-gradient(180deg, #0b3f23, #082d19); border-right-color: rgba(240,191,67,.25); } :root[data-theme="light"] .app-side button.tab { color: #d3dacd; } :root[data-theme="light"] .app-side button.tab:hover { background: rgba(237,233,223,.08); color: #ede9df; } :root[data-theme="light"] .app-side button.tab[aria-selected="true"] { background: linear-gradient(90deg, rgba(240,191,67,.2), transparent); color: #ede9df; } :root[data-theme="light"] .chat-h { background: linear-gradient(135deg, #0b3f23, #0a3720); } :root[data-theme="light"] .drawer-panel { background: linear-gradient(170deg, #0b3f23, #082d19); } /* Metallic text inside green sections uses the dark-theme gold */ :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero, .drawer-panel) .metal-text { background-image: linear-gradient(100deg, #a8740b 0%, #d99a12 22%, #f7e4a0 34%, #f0bf43 46%, #d99a12 62%, #a8740b 100%); } :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero, .drawer-panel) .metal-text[data-split] .w > span { background-image: linear-gradient(100deg, #a8740b 0%, #d99a12 22%, #f7e4a0 34%, #f0bf43 46%, #d99a12 62%, #a8740b 100%); } /* Green accents on the ivory sections */ :root[data-theme="light"] :is(.l-h1, .c-h2, .page-hero .display, .auth-form h2, .app-top h1) { color: #0b3f23; } :root[data-theme="light"] .lede, :root[data-theme="light"] .c-lede { color: #2a4a35; } :root[data-theme="light"] .c-eyebrow::before, :root[data-theme="light"] .kicker::before { background: #0b3f23; } :root[data-theme="light"] :is(.l-case-ic, .l-acc-ic, .l-cell svg, .adv .icon, .tiles svg, .feat svg, .consult-opt svg, .tile-btns svg, .l-dash-tiles svg) { color: #0b3f23; } :root[data-theme="light"] .btn:not(.btn-gold):not(.btn-wa) { --b: rgba(11,63,35,.45); color: #0b3f23; } :root[data-theme="light"] .btn:not(.btn-gold):not(.btn-wa):hover { background: #0b3f23; color: #ede9df; --b: #0b3f23; } :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .drawer-panel, .app-side, .auth-hero) .btn:not(.btn-gold):not(.btn-wa) { --b: rgba(237,233,223,.35); color: #ede9df; } :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .drawer-panel, .app-side, .auth-hero) .btn:not(.btn-gold):not(.btn-wa):hover { background: rgba(237,233,223,.1); --b: #f0bf43; color: #f0bf43; } :root[data-theme="light"] .c-head .nav-portal { background: #0b3f23; color: #ede9df; --b: #0b3f23; } :root[data-theme="light"] .c-head .nav-portal:hover { background: #082d19; color: #f0bf43; } :root[data-theme="light"] .c-links a::after { background: #0b3f23; } :root[data-theme="light"] .c-links a[aria-current="page"] { color: #0b3f23; } :root[data-theme="light"] .l-case, :root[data-theme="light"] .panel, :root[data-theme="light"] .panel-engraved, :root[data-theme="light"] .testi { border-top: 2px solid #0b3f23; } :root[data-theme="light"] .l-memo { border-left-color: #0b3f23; } :root[data-theme="light"] .l-steps li.on .l-num, :root[data-theme="light"] .l-acc-no, :root[data-theme="light"] .l-card-no { color: #0b3f23; } :root[data-theme="light"] .l-hero, :root[data-theme="light"] .page-hero { background: radial-gradient(70% 80% at 90% 5%, rgba(240,191,67,.26), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(11,63,35,.12), transparent 70%), linear-gradient(135deg, #f6f3ea, #ede9df); } :root[data-theme="light"] .stat-grid { border-top: 2px solid #0b3f23; } :root[data-theme="light"] .msg.me { background: #0b3f23; color: #ede9df; } :root[data-theme="light"] .chat-f button, :root[data-theme="light"] .fab .fab-chat { background: #0b3f23; color: #f0bf43; } :root[data-theme="light"] .c-head .btn.nav-portal { background: #0b3f23; color: #ede9df !important; --b: #0b3f23; } :root[data-theme="light"] .c-head .btn.nav-portal:hover { background: #082d19; color: #f0bf43 !important; } :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero, .drawer-panel, .app-side) :is(.l-h1, .c-h2, .display, h1, h2, h3) { color: var(--text); } :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero, .drawer-panel) :is(.lede, .c-lede) { color: var(--muted); } :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero, .drawer-panel) :is(.l-card-no, .l-acc-no, .l-num) { color: var(--gold-ink); } :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero, .drawer-panel) :is(.l-dash-tiles svg, .feat svg) { color: var(--gold-ink); } :root[data-theme="light"] :is(.l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero, .drawer-panel) .c-eyebrow::before { background: var(--metal); } .foot .btn-wa, .foot .btn-wa:hover { color: var(--on-wa); text-decoration: none; } /* ===== Light theme v2: ivory pages, brand-green structure ===== Header, footer, tiles, cards, menus and portal chrome are deep green (#0B3F23) with ivory text and gold accents; pages and heroes stay ivory with green headlines and green rules. */ :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) { --bg: #0b3f23; --bg-2: #0a3720; --surface: #0f4628; --surface-2: #145030; --surface-3: #1b5a37; --text: #ede9df; --muted: #d3dacd; --faint: #aebcab; --line: rgba(240, 191, 67, .3); --line-2: rgba(237, 233, 223, .13); --gold-ink: #f0bf43; --ok: #5fd68f; --info: #7cc0f2; --warn: #f0bf43; --err: #ff8a7a; color: var(--text); color-scheme: dark; } :root[data-theme="light"] :is(.l-case, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .stat-grid, .tile-btns button, .l-dash, .tiles, .concept, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) { background: linear-gradient(160deg, #145030 0%, #0f4628 45%, #0b3f23 100%); border-color: rgba(240,191,67,.28); border-top: 1px solid rgba(240,191,67,.45); box-shadow: 0 1px 0 rgba(247,228,160,.12) inset, 0 24px 50px -28px rgba(11,63,35,.65); } :root[data-theme="light"] .l-cells { background: linear-gradient(160deg, #145030, #0b3f23); border-color: rgba(240,191,67,.28); } :root[data-theme="light"] .l-accounts { gap: 18px; border-top: 0; } :root[data-theme="light"] .l-account { border: 1px solid rgba(240,191,67,.28); border-radius: 6px; } :root[data-theme="light"] .l-account::before { background: linear-gradient(180deg, rgba(240,191,67,.14), transparent 70%); } :root[data-theme="light"] .c-head { background: linear-gradient(90deg, #0b3f23, #0a3720 60%, #1c2a10); border-bottom: 1px solid rgba(240,191,67,.3); box-shadow: 0 10px 30px -18px rgba(11,63,35,.6); } :root[data-theme="light"] .c-head.scrolled { background: color-mix(in srgb, #0b3f23 92%, transparent); } :root[data-theme="light"] .c-head .btn.nav-portal { background: transparent; color: #ede9df !important; --b: rgba(237,233,223,.35); } :root[data-theme="light"] .c-head .btn.nav-portal:hover { color: #f0bf43 !important; --b: #f0bf43; background: rgba(237,233,223,.06); } :root[data-theme="light"] .c-head .c-links a::after { background: var(--metal); } :root[data-theme="light"] .c-head .c-links a[aria-current="page"] { color: #ede9df; } :root[data-theme="light"] .c-head .lang-seg { background: rgba(7,19,13,.35); border-color: rgba(240,191,67,.3); } :root[data-theme="light"] .c-head .lang-seg a { color: #d3dacd; } :root[data-theme="light"] .c-head .lang-seg a[aria-current="true"] { color: #07130d; } :root[data-theme="light"] .c-head .motion-btn { color: #aebcab; border-color: rgba(237,233,223,.18); } :root[data-theme="light"] .c-head .motion-btn[aria-pressed="true"] { color: #f0bf43; border-color: rgba(240,191,67,.4); } :root[data-theme="light"] .c-head .menu-btn { color: #ede9df; border-color: rgba(237,233,223,.25); } :root[data-theme="light"] .preview-bar { border-bottom: 1px solid rgba(240,191,67,.3); } /* Text, icons and buttons inside green areas */ :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) :is(.l-h1, .c-h2, .display, h1, h2, h3, b, dt) { color: var(--text); } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) :is(p, li, dd, .lede, .c-lede, small, figcaption) { color: var(--muted); } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) :is(.l-case-ic, .l-acc-ic, .l-cell svg, .adv .icon, .tiles svg, .feat svg, .consult-opt svg, .tile-btns svg, .l-dash-tiles svg, .icon) { color: #f0bf43; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) :is(.l-card-no, .l-acc-no, .l-num, .l-cell-no, .kicker, .c-eyebrow, .note, .price, .amt, .go, .tag) { color: #f0bf43; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .stars { color: #f0bf43 !important; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) :is(.c-eyebrow, .kicker)::before { background: var(--metal); } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .btn:not(.btn-gold):not(.btn-wa) { --b: rgba(237,233,223,.35); color: #ede9df; background: transparent; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .btn:not(.btn-gold):not(.btn-wa):hover { background: rgba(237,233,223,.08); --b: #f0bf43; color: #f0bf43; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .metal-text, :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .metal-text[data-split] .w > span { background-image: linear-gradient(100deg, #a8740b 0%, #d99a12 22%, #f7e4a0 34%, #f0bf43 46%, #d99a12 62%, #a8740b 100%); } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .stat b { background: var(--metal); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) a:not(.btn) { color: inherit; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .input { background: rgba(7,19,13,.35); border-color: rgba(237,233,223,.22); color: #ede9df; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .input::placeholder { color: #aebcab; } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .pill.mute, :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .status { color: #d3dacd; border-color: rgba(237,233,223,.2); } :root[data-theme="light"] :is(.c-head, .c-ann, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .app-side, .auth-hero, .chat-h, .drawer-panel, .l-case, .l-cells, .l-account, .panel, .panel-engraved, .testi, .l-q, .cert, .order-card, .stat-grid, .tile-btns button, .l-dash, .tiles, .consult-menu, .pop-panel, .l-memo-card, .concept, .demo-toast, .quiz-result, .pkg, .lvl, .member, .contact-card, .notice, .fsec) .bar { background: rgba(237,233,223,.14); } /* Ivory areas: green typography and rules */ :root[data-theme="light"] :is(.l-h1, .c-h2, .page-hero .display, .auth-form h2, .app-top h1, .head .display, .section .display) { color: #0b3f23; } :root[data-theme="light"] .c-eyebrow::before, :root[data-theme="light"] .kicker::before { background: #0b3f23; } :root[data-theme="light"] .c-eyebrow, :root[data-theme="light"] .kicker { color: #8a5c06; } :root[data-theme="light"] .faq details { border-color: rgba(11,63,35,.2); } :root[data-theme="light"] .faq summary { color: #0b3f23; } :root[data-theme="light"] .faq summary .pm { border-color: rgba(11,63,35,.35); } :root[data-theme="light"] .faq summary .pm::before, :root[data-theme="light"] .faq summary .pm::after { background: #0b3f23; } :root[data-theme="light"] .ledger a::before { background: #0b3f23; } :root[data-theme="light"] .ledger .nm { color: #0b3f23; } :root[data-theme="light"] .l-row:hover .l-go { background: #0b3f23; color: #f0bf43; } :root[data-theme="light"] .rule-engraved { border-color: rgba(11,63,35,.3); background-image: linear-gradient(90deg, rgba(11,63,35,.3) 1px, transparent 1px); } :root[data-theme="light"] .chip { border-color: rgba(11,63,35,.3); color: #0b3f23; } :root[data-theme="light"] .chip:hover { background: #0b3f23; color: #ede9df; } :root[data-theme="light"] .es-box { border-left-color: #0b3f23; background: #fbf9f3; } :root[data-theme="light"] .crumbs a { color: #0b3f23; } /* Phone quick-action bar */ .m-bar { display: none; } @media (max-width: 720px) { .m-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 54; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; padding-bottom: env(safe-area-inset-bottom); background: rgba(240,191,67,.25); border-top: 1px solid rgba(240,191,67,.35); box-shadow: 0 -10px 30px -12px rgba(0,0,0,.5); } .m-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; text-decoration: none; font: 600 .86rem/1.1 var(--font-body); color: #ede9df; background: #0b3f23; } .m-bar a svg { width: 18px; height: 18px; } .m-bar .m-book { background: var(--metal); color: #07130d; } .m-bar .m-wa { background: #0a3720; } .m-bar .m-wa svg { color: #25d366; } .m-bar .m-call svg { color: #f0bf43; } body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } .fab { bottom: calc(68px + env(safe-area-inset-bottom)) !important; } .chat { bottom: 0 !important; z-index: 95; } } /* Smooth page-to-page transitions keep the header steady */ @view-transition { navigation: auto; } .c-head { view-transition-name: site-head; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } html.motion-off .c-head { view-transition-name: none; } :root[data-theme="light"] .foot .btn-wa, :root .foot .btn-wa { color: #07130d !important; } /* Layout fixes found by the layout audit */ @media (max-width: 960px) { /* The pinned resolution story becomes a normal section on phones and tablets so no step is cut off */ .l-story { height: auto; } .l-story .l-sticky { position: relative; height: auto; overflow: visible; padding: 90px 0 70px; align-items: stretch; } .l-steps li { color: var(--text); } .l-steps li .l-num { color: var(--gold-ink); } } @media (max-width: 560px) { .l-row { grid-template-columns: 58px minmax(0, 1fr); gap: 6px 14px; padding: 18px 6px; } .l-row .l-n { grid-column: 2; } .l-row .l-p { grid-column: 2; font-size: 1.35rem; white-space: normal; } .l-row .l-cta { grid-column: 2; } .l-row .l-idx { grid-row: 1 / span 3; align-self: start; } } .page-hero p.pill, .page-hero .pill { white-space: normal; max-width: 100%; line-height: 1.5; text-align: left; } .tier .roman { display: block; line-height: 1.15; margin-bottom: 10px; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; } /* ===== Section-specific motion ("fx"). Only active when motion is allowed; otherwise everything is simply shown. ===== */ html.fx [data-fx] > * { transition: opacity .8s var(--ease), transform .9s var(--ease), clip-path 1.1s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--k, 0) * 90ms); } /* Service ledger: rows slide in from the left, the gold rule draws underneath */ html.fx [data-fx="ledger"] > li { opacity: 0; transform: translateX(-28px); } html.fx [data-fx="ledger"].fx-in > li { opacity: 1; transform: none; } html.fx [data-fx="ledger"] > li { position: relative; } html.fx [data-fx="ledger"] > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--metal); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); transition-delay: calc(var(--k, 0) * 90ms + 200ms); } html.fx [data-fx="ledger"].fx-in > li::after { transform: scaleX(1); } /* Panels: a gold edge sweeps across the top, content settles */ html.fx [data-fx="panel"] { position: relative; overflow: hidden; } html.fx [data-fx="panel"]::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--metal); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .1s; z-index: 2; } html.fx [data-fx="panel"].fx-in::before { transform: scaleX(1); } html.fx [data-fx="panel"] > * { opacity: 0; transform: translateY(14px); } html.fx [data-fx="panel"].fx-in > * { opacity: 1; transform: none; } /* How it works: numbers tick in and a line connects the steps */ html.fx [data-fx="steps"] { position: relative; } html.fx [data-fx="steps"]::before { content: ""; position: absolute; left: 12px; top: 20px; bottom: 20px; width: 1px; background: var(--metal); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease) .2s; } html.fx [data-fx="steps"].fx-in::before { transform: scaleY(1); } html.fx [data-fx="steps"] > li { opacity: 0; transform: translateX(16px); } html.fx [data-fx="steps"].fx-in > li { opacity: 1; transform: none; } /* Client stories: cards tip forward into place */ html.fx [data-fx="flip"] { perspective: 1200px; } html.fx [data-fx="flip"] > * { opacity: 0; transform: rotateX(14deg) translateY(30px); transform-origin: top center; } html.fx [data-fx="flip"].fx-in > * { opacity: 1; transform: none; } /* Team: portraits open through an expanding circle */ html.fx [data-fx="portrait"] > * img { clip-path: circle(0% at 50% 50%); transition: clip-path 1.2s var(--ease); transition-delay: calc(var(--k, 0) * 140ms); } html.fx [data-fx="portrait"].fx-in > * img { clip-path: circle(75% at 50% 50%); } /* Packages and order tiles rise in sequence */ html.fx [data-fx="tiers"] > * { opacity: 0; transform: translateY(40px) scale(.97); } html.fx [data-fx="tiers"].fx-in > * { opacity: 1; transform: none; } /* Closing band: a light sweep crosses the headline once */ html.fx [data-fx="sweep"] .display, html.fx [data-fx="sweep"] .c-h2 { position: relative; } html.fx [data-fx="sweep"] .wrap::after { content: ""; position: absolute; inset: -20% -10%; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(247,228,160,.22) 50%, transparent 65%); transform: translateX(-100%); } html.fx [data-fx="sweep"].fx-in .wrap::after { animation: bandSweep 2.2s var(--ease) .3s 1 forwards; } @keyframes bandSweep { to { transform: translateX(100%); } } /* Consultation list: each row's rule draws in turn */ html.fx [data-fx="rows"] > div { opacity: 0; transform: translateY(10px); } html.fx [data-fx="rows"].fx-in > div { opacity: 1; transform: none; } /* Footer columns and related-service chips */ html.fx [data-fx="cols"] > * { opacity: 0; transform: translateY(18px); } html.fx [data-fx="cols"].fx-in > * { opacity: 1; transform: none; } html.fx [data-fx="chips"] > * { opacity: 0; transform: scale(.9); } html.fx [data-fx="chips"].fx-in > * { opacity: 1; transform: none; } html.fx [data-fx="crumbs"] li { opacity: 0; transform: translateX(-8px); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.fx [data-fx="crumbs"] li:nth-child(2) { transition-delay: .12s; } html.fx [data-fx="crumbs"] li:nth-child(3) { transition-delay: .24s; } html.fx [data-fx="crumbs"].fx-in li { opacity: 1; transform: none; } /* Service page: the seal presses onto the paper when it comes into view */ html.fx [data-fx="stamp"] .pd-stamp { opacity: 0; transform: scale(1.8) rotate(12deg); transition: transform .55s cubic-bezier(.3,1.6,.5,1) .6s, opacity .3s .6s; } html.fx [data-fx="stamp"].fx-in .pd-stamp { opacity: .85; transform: none; } /* Homepage sets */ html.fx [data-fx="cases"] > *, html.fx [data-fx="accounts"] > * { opacity: 0; transform: translateY(36px); } html.fx [data-fx="cases"].fx-in > *, html.fx [data-fx="accounts"].fx-in > * { opacity: 1; transform: none; } html.fx [data-fx="cells"] > * { opacity: 0; filter: blur(6px); } html.fx [data-fx="cells"].fx-in > * { opacity: 1; filter: none; } /* Form fields: a gold underline grows on focus */ .field { position: relative; } .field .input:focus { border-color: var(--gold); } /* Portal tab panels slide in */ html.fx [data-tabpanel]:not([hidden]) { animation: tabIn .45s var(--ease); } @keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ===== Metallic finish ===== */ /* Gold hairline edge on cards and tiles (brushed surface inside, metal edge outside) */ :is(.panel, .panel-engraved, .l-case, .l-card, .testi, .l-q, .cert, .l-dash, .l-cells, .notice, .fsec, .stat-grid) { border: 1px solid transparent !important; background: linear-gradient(165deg, var(--surface-2), var(--surface)) padding-box, linear-gradient(135deg, rgba(247,228,160,.55), rgba(168,116,11,.18) 35%, rgba(217,154,18,.08) 60%, rgba(240,191,67,.5)) border-box !important; } /* Gold buttons: deeper metal and a light sweep on hover */ .btn-gold { background: linear-gradient(135deg, #f7e4a0 0%, #f0bf43 22%, #d99a12 48%, #a8740b 70%, #f0bf43 100%); background-size: 160% 160%; background-position: 0% 50%; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,250,230,.6), inset 0 -1px 0 rgba(45,30,5,.25), 0 12px 28px -14px rgba(168,116,11,.75); transition: background-position .6s var(--ease), box-shadow .4s, transform .35s; } .btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 62%); transform: translateX(-120%); transition: transform .9s var(--ease); pointer-events: none; } .btn-gold:hover { background-position: 100% 50%; box-shadow: inset 0 1px 0 rgba(255,250,230,.7), 0 16px 34px -14px rgba(168,116,11,.85); } .btn-gold:hover::after { transform: translateX(120%); } /* Header: metallic hairline under the bar */ .c-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,191,67,.65) 20%, rgba(247,228,160,.9) 50%, rgba(240,191,67,.65) 80%, transparent); opacity: .7; pointer-events: none; } /* Section heads in green areas get a brushed-gold rule */ .cta-band .c-h2, .cta-band .display { text-shadow: 0 1px 0 rgba(0,0,0,.15); } /* ===== Typography: balanced headlines, even paragraphs ===== */ h1, h2, h3, .display, .c-h2, .l-h1 { text-wrap: balance; } p, li, dd, blockquote, figcaption { text-wrap: pretty; } :root[data-lang="zh"] main p, :root[data-lang="zh"] main li, :root[data-lang="zh"] main dd { text-align: justify; text-justify: inter-character; } main p { hanging-punctuation: first; } .lede, .c-lede, .muted { max-width: 68ch; } @media (prefers-reduced-motion: reduce) { html.fx [data-fx] > *, html.fx [data-fx] img, html.fx [data-fx] .pd-stamp { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; } } html.fx [data-fx="steps"]::before { left: -14px; } @media (max-width: 640px) { html.fx [data-fx="steps"]::before { display: none; } } :root[data-theme="light"] .statebar { background: #0b3f23; color: #d3dacd; border-color: rgba(240,191,67,.3); } :root[data-theme="light"] .statebar b { color: #f0bf43; } /* ===== Hero v3: the lion in light ===== */ .l-surface { display: none !important; } .lion-hero, .page-hero, :root[data-theme="light"] .lion-hero, :root[data-theme="light"] .page-hero { --bg: #0b3f23; --bg-2: #0a3720; --surface: #0f4628; --surface-2: #145030; --text: #ede9df; --muted: #d3dacd; --faint: #aebcab; --line: rgba(240,191,67,.3); --line-2: rgba(237,233,223,.13); --gold-ink: #f0bf43; color: var(--text); color-scheme: dark; background: radial-gradient(70% 90% at 78% 45%, #12502e 0%, #0b3f23 38%, #072a17 72%, #06200f 100%), #0b3f23; border-bottom: 1px solid rgba(240,191,67,.28); } .lion-hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 70%, rgba(45,30,5,.35)), radial-gradient(120% 70% at 0% 100%, rgba(45,30,5,.45), transparent 60%); } .lion-hero::before, .page-hero::before { display: none !important; } :root[data-theme="light"] :is(.lion-hero, .page-hero) :is(.l-h1, .display, h1, .c-h2) { color: #ede9df; } :root[data-theme="light"] :is(.lion-hero, .page-hero) :is(.lede, p) { color: #d3dacd; } :root[data-theme="light"] :is(.lion-hero, .page-hero) :is(.c-eyebrow, .kicker, .crumbs a) { color: #f0bf43; } :root[data-theme="light"] :is(.lion-hero, .page-hero) :is(.c-eyebrow, .kicker)::before { background: var(--metal); } :root[data-theme="light"] :is(.lion-hero, .page-hero) .metal-text, :root[data-theme="light"] :is(.lion-hero, .page-hero) .metal-text[data-split] .w > span { background-image: linear-gradient(100deg, #a8740b 0%, #d99a12 22%, #f7e4a0 34%, #f0bf43 46%, #d99a12 62%, #a8740b 100%); } :root[data-theme="light"] :is(.lion-hero, .page-hero) .btn:not(.btn-gold):not(.btn-wa) { --b: rgba(237,233,223,.35); color: #ede9df; } :root[data-theme="light"] :is(.lion-hero, .page-hero) .g-reviews { color: #ede9df; border-color: rgba(237,233,223,.2); background: rgba(7,19,13,.3); } .lion-hero { min-height: min(100svh, 980px); display: grid; align-content: center; } .lion-hero .l-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; } .lion-hero .l-copy { transform: translateY(calc(var(--p, 0) * 70px)); opacity: calc(1 - var(--p, 0) * 1.25); } .lh-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(34% 46% at 74% 46%, rgba(240,191,67,.2), transparent 70%); } .lion-stage { --tx: 0; --ty: 0; position: relative; display: grid; place-items: center; aspect-ratio: 1; perspective: 1400px; pointer-events: none; } .lion-lg { width: min(560px, 100%); justify-self: center; transform: scale(calc(1 - var(--p, 0) * .08)); } .lion-art { position: relative; width: 56%; aspect-ratio: 329 / 579; transform: rotateY(calc(var(--tx) * 14deg)) rotateX(calc(var(--ty) * -10deg)) translateZ(0); transition: transform .4s linear; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)) drop-shadow(0 0 50px rgba(240,191,67,.18)); opacity: 0; animation: lionIn 1.6s var(--ease) .15s forwards; } .lion-art img, .lion-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .lion-art canvas { opacity: 0; transition: opacity .6s; } .lion-art canvas.on { opacity: 1; } .lion-stage.lit .lion-art img { opacity: 0; } @keyframes lionIn { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; } } .lion-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .lion-ring circle { fill: none; stroke: url(#none); stroke: rgba(240,191,67,.42); stroke-width: .35; stroke-dasharray: 604; stroke-dashoffset: 604; animation: ringDraw 2.4s var(--ease) .3s forwards; } .lion-ring .r2 { stroke: rgba(240,191,67,.22); stroke-dasharray: 553; stroke-dashoffset: 553; animation-delay: .6s; } .lion-ring .ticks { transform-origin: 100px 100px; animation: tickSpin 120s linear infinite; opacity: 0; animation: tickSpin 120s linear infinite, fadeIn 1.2s 1.4s forwards; } .lion-ring line { stroke: rgba(247,228,160,.5); stroke-width: .3; } @keyframes ringDraw { to { stroke-dashoffset: 0; } } @keyframes tickSpin { to { transform: rotate(360deg); } } @keyframes fadeIn { to { opacity: 1; } } .lion-motes { position: absolute; inset: -10%; width: 120%; height: 120%; } /* Inner pages: the lion as a faint, lit watermark on the right */ .lion-bg { position: absolute; right: max(-60px, calc((100vw - 1200px) / 2 - 140px)); top: 50%; width: min(520px, 46vw); translate: 0 -46%; z-index: -1; opacity: .5; } .lion-bg .lion-art { width: 52%; } .svc-hero .lion-bg { opacity: .22; } @media (max-width: 960px) { .lion-hero .l-hero-grid { grid-template-columns: 1fr; } .lion-lg { width: min(340px, 78vw); order: -1; margin: 0 auto 10px; } .lion-bg { opacity: .16; width: 300px; right: -90px; } } @media (max-width: 560px) { .lion-lg { width: min(260px, 70vw); } } @media (prefers-reduced-motion: reduce) { .lion-art, .lion-ring circle, .lion-ring .ticks { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } .lion-hero .l-copy { transform: none; opacity: 1; } } html.motion-off .lion-art, html.motion-off .lion-ring circle, html.motion-off .lion-ring .ticks { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } /* ===== Column alignment: rows share one fixed column grid ===== */ .l-tape-head { display: block; } .l-tape-head .c-eyebrow { margin-bottom: 10px; } .l-row { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.1fr) minmax(24px, .45fr) 140px 108px 40px; } .l-row .l-p { justify-self: end; text-align: right; } .l-row .l-cta { justify-self: center; } .ledger a { grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr) 240px 22px; } .ledger .tg { justify-self: end; } @media (max-width: 960px) { .l-row { grid-template-columns: 64px minmax(0, 1fr) auto; } .l-row .l-p { grid-column: 3; } .ledger a { grid-template-columns: 1fr 22px; } .ledger .tg { justify-self: start; } } @media (max-width: 560px) { .l-row { grid-template-columns: 58px minmax(0, 1fr); } .l-row .l-p { grid-column: 2; justify-self: start; text-align: left; } .l-row .l-cta { justify-self: start; } } /* Footer motion control (moved out of the header) */ .foot-end { display: inline-flex; gap: 18px; align-items: center; } .motion-link { background: none; border: 0; padding: 0; cursor: pointer; font: 500 .66rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .motion-link::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: #2ecc71; vertical-align: 1px; } .motion-link[aria-pressed="false"]::before { background: var(--faint); } .motion-link:hover { color: var(--gold-ink); } /* ===== Hero v4: the globe ===== */ .lion-stage { display: none !important; } .gl-stage { position: relative; aspect-ratio: 1; pointer-events: none; } .gl-stage.off { display: none; } .gl-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s var(--ease); } .gl-stage.lit canvas { opacity: 1; } .gl-atmo { position: absolute; inset: 5%; border-radius: 50%; opacity: 0; transition: opacity 1.8s var(--ease) .2s; background: radial-gradient(circle at 38% 32%, rgba(240,191,67,.10), rgba(11,63,35,.0) 55%), radial-gradient(circle, rgba(7,30,17,.0) 60%, rgba(240,191,67,.10) 69%, rgba(240,191,67,.0) 73%); box-shadow: 0 0 120px -20px rgba(240,191,67,.28), inset 0 0 80px rgba(240,191,67,.06); } .gl-stage.lit .gl-atmo { opacity: 1; } .gl-hq { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .3s; white-space: nowrap; } .gl-hq i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #f7e4a0; box-shadow: 0 0 14px 3px rgba(240,191,67,.8); } .gl-hq i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(247,228,160,.7); animation: hqPulse 2.4s var(--ease) infinite; } @keyframes hqPulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } } .gl-hq b { font: 500 .66rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #f7e4a0; padding: 6px 9px; border: 1px solid rgba(240,191,67,.35); background: rgba(7,30,17,.7); border-radius: 3px; translate: 6px 0; } .gl-lg { width: min(600px, 100%); justify-self: center; transform: translateY(calc(var(--p, 0) * -40px)) scale(calc(1 - var(--p, 0) * .06)); } .gl-bg { position: absolute; right: max(-220px, calc((100vw - 1200px) / 2 - 300px)); top: 50%; width: min(620px, 56vw); translate: 0 -50%; z-index: -1; opacity: .55; } .gl-bg .gl-hq { display: none; } .svc-hero .gl-bg { opacity: .28; } @media (max-width: 960px) { .gl-lg { width: min(380px, 86vw); order: -1; margin: -10px auto 0; } .gl-bg { opacity: .22; width: 360px; right: -140px; } } @media (max-width: 560px) { .gl-lg { width: min(300px, 82vw); } .gl-hq b { font-size: .58rem; } } @media (prefers-reduced-motion: reduce) { .gl-hq i::after { animation: none; } } html.motion-off .gl-hq i::after { animation: none; } @media (max-width: 960px) { .gl-lg { order: 0; width: min(340px, 84vw); margin: 34px auto 0; } } .gl-bg { opacity: .42; } .lion-hero .l-h1 { font-size: clamp(2.4rem, 4.3vw, 4.15rem); line-height: 1.02; } .lion-hero .l-copy .lede { margin: 20px 0 26px; } .lion-hero { padding-top: calc(var(--bar-h, 34px) + var(--head-h, 110px) + 28px); padding-bottom: 56px; } /* ===== Resolution story: active-step display (replaces the blank paper) ===== */ .l-story .l-sticky { padding-top: calc(var(--bar-h, 34px) + var(--head-h, 110px) + 20px); } .l-steps li, .l-steps li.on { padding-left: 0 !important; position: relative; } .l-steps li::before { content: ""; position: absolute; left: -18px; top: 14px; bottom: 14px; width: 2px; background: var(--metal); transform: scaleY(0); transition: transform .5s var(--ease); } .l-steps li.on::before { transform: scaleY(1); } .l-visual { display: none !important; } .l-focus { position: relative; justify-self: center; width: min(460px, 100%); aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding: 18%; } .lf-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .lf-ring circle { fill: none; stroke-width: 1.2; } .lf-track { stroke: var(--line); } .lf-prog { stroke: url(#lfg); stroke: #f0bf43; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(240,191,67,.6)); transition: stroke-dashoffset .2s linear; } .lf-core { display: flex; align-items: baseline; gap: 10px; } .lf-num { font: 400 clamp(5rem, 9vw, 8rem)/.9 var(--font-display); letter-spacing: -.02em; } .lf-of { font: 500 .8rem/1 var(--font-mono); letter-spacing: .14em; color: var(--faint); } .lf-text { font: 500 clamp(1.15rem, 1.7vw, 1.45rem)/1.4 var(--font-display); color: var(--text); max-width: 22ch; min-height: 4.2em; } .lf-dots { display: flex; gap: 8px; } .lf-dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background .4s; } .lf-dots i.on { background: var(--metal); } .l-focus .lf-core, .l-focus .lf-text { transition: opacity .18s, transform .18s; } .l-focus.swap .lf-core, .l-focus.swap .lf-text { opacity: 0; transform: translateY(8px); } @media (max-width: 960px) { .l-focus { display: none; } .l-steps li::before { display: none; } } /* ===== Credential lines: whole items, clean breaks ===== */ .seg { white-space: nowrap; } .seg i { font-style: normal; margin: 0 .55em 0 .1em; opacity: .7; } .c-eyebrow, .kicker { flex-wrap: wrap; row-gap: 4px; } .lion-hero .c-eyebrow { font-size: .7rem; letter-spacing: .14em; } .lion-hero .c-eyebrow::before { align-self: center; } /* ===== Service document card: real content ===== */ .l-paperdoc .pd-list { list-style: none; display: grid; gap: 7px; margin: 0 86px 18px 0; padding: 0; } .l-paperdoc .pd-list li { position: relative; padding-left: 18px; font-size: .82rem; line-height: 1.4; color: #3d3829; } .l-paperdoc .pd-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #8a5c06; font-weight: 700; } .l-paperdoc .pd-lines { display: none; } /* ===== Brushed metal: brand green and gold with a light that follows the pointer ===== */ :is(.lion-hero, .page-hero, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero, .app-side) { position: relative; isolation: isolate; } .c-head { position: fixed !important; isolation: isolate; } :is(.lion-hero, .page-hero, .l-tape, .l-rail, .l-portal, .cta-band, .foot, .auth-hero) > .metal-sheen, .l-tape::before, .l-rail::before, .l-portal::before, .cta-band::before, .foot::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 60% at var(--mx, 70%) var(--my, 30%), rgba(247,228,160,.11), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(115deg, transparent 30%, rgba(240,191,67,.06) 46%, rgba(255,250,230,.08) 50%, rgba(240,191,67,.05) 54%, transparent 70%); } .lion-hero .lh-glow, .page-hero .lh-glow { background: radial-gradient(40% 60% at var(--mx, 70%) var(--my, 40%), rgba(247,228,160,.12), transparent 70%), radial-gradient(34% 46% at 74% 46%, rgba(240,191,67,.2), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px); } .c-head { background: linear-gradient(90deg, #072a17, #0b3f23 45%, #0a3720 70%, #1c2a10) !important; } .c-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(30% 140% at var(--mx, 50%) 0%, rgba(247,228,160,.10), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px); } /* Cards: brushed surface + gold metal edge + pointer specular (already via data-tilt) */ :is(.panel, .panel-engraved, .l-case, .l-card, .testi, .l-q, .cert, .l-dash, .l-cells, .notice, .fsec, .stat-grid, .l-account, .tier) { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px), linear-gradient(165deg, var(--surface-2), var(--surface)), linear-gradient(135deg, rgba(247,228,160,.6), rgba(168,116,11,.2) 35%, rgba(217,154,18,.1) 60%, rgba(240,191,67,.55)) !important; background-origin: padding-box, padding-box, border-box !important; background-clip: padding-box, padding-box, border-box !important; border: 1px solid transparent !important; } [data-tilt] { position: relative; } /* Section headings: the first line carries a faint metallic sheen too */ :is(.c-h2, .page-hero .display, .l-h1) > span:first-child:not(.metal-text):not([data-split]), :is(.c-h2, .page-hero .display, .l-h1) > span:first-child[data-split]:not(.metal-text) .w > span { background: linear-gradient(100deg, currentColor 0%, currentColor 40%, rgba(255,250,230,1) 50%, currentColor 60%, currentColor 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; } .segs { display: inline; } .seg i { margin: 0 .35em 0 0; } .lion-hero .c-eyebrow { font-size: .68rem; letter-spacing: .1em; flex-wrap: nowrap; align-items: flex-start; } .lion-hero .c-eyebrow::before { margin-top: .6em; flex: none; } .svc-hero .svc-top { align-items: start; } .svc-hero .svc-top > div:first-child { padding-top: 18px; } @media (min-width: 1100px) { .lion-hero .c-eyebrow { white-space: nowrap; width: max-content; max-width: none; } .lion-hero .c-eyebrow .seg { white-space: nowrap; } } /* ===== Service photos ===== */ .l-card.has-photo { padding-top: 0; overflow: hidden; min-height: 470px; } .l-card-img { display: block; position: relative; margin: 0 -26px 18px; height: 190px; overflow: hidden; border-bottom: 1px solid rgba(240,191,67,.3); } .l-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08) translate3d(calc(var(--ry, 0deg) / 1deg * -1.4px), calc(var(--rx, 0deg) / 1deg * 1.4px), 0); filter: saturate(.92) contrast(1.04); transition: transform 1.2s var(--ease), filter .6s; } .l-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,30,17,0) 45%, rgba(11,63,35,.55) 100%), linear-gradient(115deg, transparent 40%, rgba(247,228,160,.18) 50%, transparent 60%); background-size: 100% 100%, 250% 100%; background-position: 0 0, 120% 0; transition: background-position 1.1s var(--ease); pointer-events: none; } .l-card:hover .l-card-img img, .l-card:focus-visible .l-card-img img { transform: scale(1.14); filter: saturate(1.02) contrast(1.06); } .l-card:hover .l-card-img::after { background-position: 0 0, -40% 0; } .l-card.has-photo .l-card-no { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 8px; border-radius: 3px; background: rgba(7,30,17,.72); backdrop-filter: blur(6px); border: 1px solid rgba(240,191,67,.35); } /* Resolution: the photo for each step sits inside the progress ring */ .lf-photos { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; z-index: 0; box-shadow: inset 0 0 0 1px rgba(240,191,67,.3); } .lf-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1s var(--ease), transform 7s linear; } .lf-photos img.on { opacity: 1; transform: scale(1.0); } .lf-photos::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(7,30,17,.55) 0%, rgba(7,30,17,.82) 62%, rgba(7,30,17,.94) 100%); } :root[data-theme="light"] .lf-photos::after { background: radial-gradient(circle, rgba(11,63,35,.62) 0%, rgba(11,63,35,.86) 62%, rgba(11,63,35,.95) 100%); } .l-focus > :not(.lf-photos):not(.lf-ring) { position: relative; z-index: 1; } .l-focus .lf-text { color: #ede9df; text-shadow: 0 2px 12px rgba(0,0,0,.5); } :root[data-theme="light"] .l-focus .lf-of { color: #d3dacd; } @media (max-width: 960px) { .l-card.has-photo { min-height: 430px; } .l-card-img { height: 160px; } } @media (prefers-reduced-motion: reduce) { .lf-photos img { transition: opacity .2s; transform: none !important; } .l-card-img img { transform: none !important; } } html.motion-off .lf-photos img, html.motion-off .l-card-img img { transform: none !important; } .lf-photos::after { background: radial-gradient(circle, rgba(7,30,17,.74) 0%, rgba(7,30,17,.84) 55%, rgba(7,30,17,.95) 100%); } :root[data-theme="light"] .lf-photos::after { background: radial-gradient(circle, rgba(11,63,35,.76) 0%, rgba(11,63,35,.86) 55%, rgba(11,63,35,.96) 100%); } /* Live site: sent / busy states */ .form-status.ok { background: color-mix(in srgb, var(--gold) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); } .form-status.ok b { display: block; font: 600 1.2rem/1.3 var(--font-display); margin-bottom: 6px; color: var(--gold-ink); } .form-status.ok p { color: var(--muted); font-size: .93rem; margin: 0; } form[aria-busy="true"] button[type="submit"] { opacity: .65; pointer-events: none; } /* Smallest phones (320–380px): long eyebrow lines and contact details wrap instead of widening the page */ @media (max-width: 380px) { .c-eyebrow { white-space: normal; letter-spacing: .1em; max-width: 100%; overflow-wrap: anywhere; } .l-hero-grid, .l-copy { min-width: 0; max-width: 100%; } } .info-list, .info-list > *, .info-list dd { min-width: 0; overflow-wrap: anywhere; } .contact-grid > * { min-width: 0; } /* The hero is a single column on phones; never let its widest child set the column width */ @media (max-width: 760px) { .l-hero { grid-template-columns: minmax(0, 1fr); } .l-hero > * { min-width: 0; } } .m-bar a span { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 760px) { .svc-top, .page-hero .grid-2 { grid-template-columns: minmax(0, 1fr); } .svc-top > *, .page-hero .grid-2 > * { min-width: 0; } } h1.display, .c-h1 { overflow-wrap: break-word; hyphens: auto; } @media (max-width: 400px) { .l-creds { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 10px; } .l-creds > * { min-width: 0; } .l-creds b { overflow-wrap: anywhere; } } @media (max-width: 420px) { .lion-hero .c-eyebrow, .lion-hero .c-eyebrow .seg { white-space: normal; } .lion-hero .c-eyebrow { display: flex; max-width: 100%; } .lion-hero .c-eyebrow > * { min-width: 0; } } /* Build-time split headlines: never stay hidden if scripts are blocked or slow */ html.no-js [data-split] .w > span { transform: none; } [data-split]:not(.in) .w > span { animation: lbs-unhide 0s 2.5s forwards; } @keyframes lbs-unhide { to { transform: none; } } /* Short screens: pinned sections become normal sections (set by home.js when content would not fit) */ .l-story.unpin { height: auto; } .l-story.unpin .l-sticky { position: relative; height: auto; overflow: visible; padding-bottom: 80px; align-items: stretch; } .l-rail.unpin { height: auto !important; } .l-rail.unpin .l-sticky { position: relative; height: auto; overflow: visible; padding-bottom: 60px; } .l-rail.unpin #l-track { transform: none !important; overflow-x: auto; width: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .l-rail.unpin #l-track > * { scroll-snap-align: start; } /* Laptop-height screens (≈700–900px): tighten the pinned story so it still fits and pins */ @media (min-width: 1000px) and (max-height: 900px) { .l-story .l-sticky { padding-top: calc(var(--bar-h, 34px) + var(--head-h, 110px) - 8px); } .l-story .c-h2 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.02; } .l-story .c-lede { font-size: 1rem; line-height: 1.55; margin-top: 10px; } .l-steps { margin-top: 14px; gap: 0; } .l-steps li { padding: 8px 0; font-size: .95rem; line-height: 1.4; } .l-story .btn-row, .l-story .l-more { margin-top: 14px; } .l-rail .l-sticky { gap: 24px; } } /* Header "Order Online" (kept from the previous site) */ .c-tools .nav-order { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .88rem; color: var(--gold-ink); text-decoration: none; padding: 8px 6px; white-space: nowrap; border-radius: 8px; transition: color .25s, background .25s; } .c-tools .nav-order svg { width: 18px; height: 18px; } .c-tools .nav-order:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); } :root[data-theme="light"] .c-tools .nav-order { color: #0b3f23; } @media (max-width: 1439px) { .c-tools .nav-order { display: none; } } /* Longer Spanish labels: keep the header on one line at every desktop width */ @media (max-width: 1599px) { html[data-lang="es"] .c-tools .nav-order { display: none; } } @media (min-width: 1000px) and (max-width: 1440px) { html[data-lang="es"] .c-links a { padding: 10px 8px; font-size: .88rem; } html[data-lang="es"] .c-links a::after { left: 8px; right: 8px; } html[data-lang="es"] .c-tools { gap: 8px; } html[data-lang="es"] .c-tools .btn-sm { padding-left: 12px; padding-right: 12px; } } /* Booking options inside the assistant chat */ .chat-book { display: grid; gap: 6px; } .chat-book a { display: grid; gap: 2px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--gold) 7%, transparent); color: var(--text); text-decoration: none; } .chat-book a:hover { border-color: var(--gold); } .chat-book b { font-size: .86rem; color: var(--gold-ink); } .chat-book small { font-size: .74rem; color: var(--muted); } /* 2027 filing season */ .season-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: end; margin-bottom: 34px; } .season-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; } .season-list li { position: relative; display: grid; align-content: start; gap: 10px; padding: 20px 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, var(--surface)), var(--surface)); } .season-list li::before { content: ""; position: absolute; left: 20px; top: 0; width: 42px; height: 2px; background: var(--metal, linear-gradient(90deg, #f0bf43, #d99a12)); } .season-list time { font: 500 .78rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); } .season-list span { color: var(--text); font-size: .97rem; line-height: 1.5; } .season-foot { margin-top: 24px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .season-foot p { max-width: 62ch; margin: 0; } @media (max-width: 980px) { .season-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .season-head { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .season-list { grid-template-columns: minmax(0, 1fr); } } :root[data-theme="light"] .season-list li { background: #fff; border-color: rgba(11, 63, 35, .18); } :root[data-theme="light"] .season-list time { color: #0b3f23; } :root[data-theme="light"] .season-list span { color: #1d2318; } /* Lion Assistant: guided buttons and service cards */ .la-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 4px; } .la-btn { appearance: none; font: 500 .82rem/1.2 var(--font-body); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--text); cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s, transform .15s; } .la-btn:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); } .la-btn:active { transform: scale(.97); } .la-btn.primary { background: var(--metal, linear-gradient(135deg, #f0bf43, #d99a12)); color: #07130d; border-color: transparent; font-weight: 600; } .la-acts[data-used] button:not(.keep) { opacity: .55; } .la-card { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--gold) 5%, var(--surface)); } .la-card b { color: var(--gold-ink); font-size: .95rem; } .la-card p { margin: 0; font-size: .86rem; color: var(--muted); } .la-price { font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .06em; color: var(--gold-ink); } .la-k { margin: 0 0 6px; } :root[data-theme="light"] .la-btn { color: #0b3f23; border-color: rgba(11, 63, 35, .25); } :root[data-theme="light"] .la-btn.primary { color: #07130d; } :root[data-theme="light"] .la-card b, :root[data-theme="light"] .la-price { color: #0b3f23; }