/* ============================================================ Fiscalizer — personal brand command landing Minimal dark theme: warm charcoal, single amber accent, gradient earth-silhouette horizon (pure CSS, animated). Page is locked to dark mode (data-theme="dark" on ). ============================================================ */ .fp-page { --amber: #d69445; --fp-bg: #131110; --fp-deep: #0c0b0a; --fp-raised: #1b1815; --fp-line: rgba(241, 239, 234, .12); --fp-hair: rgba(241, 239, 234, .07); background: var(--fp-deep); } /* ---------- header ---------- */ .fp-head { background: color-mix(in srgb, var(--fp-bg) 55%, transparent); border-bottom-color: var(--fp-hair); } .fp-nav-cta { padding: 9px 18px; font-size: 14px; } /* ---------- hero ---------- */ .fp-hero { position: relative; z-index: 2; min-height: 100dvh; /* top-anchored (not centered) so the demo card grows downward without re-centering the title and CTAs */ display: flex; align-items: flex-start; overflow: hidden; padding: max(96px, 13vh) 0 110px; } /* earth silhouette: a huge dark circle whose top arc rims the first viewport, lit by an amber atmosphere glow. Anchored in dvh units so it stays put (behind the demo card) even when the hero grows taller. */ .fp-horizon { position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 80dvh; width: 240vmax; height: 240vmax; transform: translateX(-50%); border-radius: 50%; background: var(--fp-deep); box-shadow: inset 0 2px 0 rgba(236, 178, 102, .75), inset 0 18px 50px -18px rgba(214, 148, 69, .45), 0 -40px 140px -20px rgba(214, 148, 69, .30); } .fp-horizon::before { content: ""; position: absolute; left: 50%; top: 0; width: 70vw; height: 26vh; min-width: 560px; transform: translate(-50%, -55%); background: radial-gradient(50% 50% at 50% 50%, rgba(214, 148, 69, .30), rgba(214, 148, 69, .07) 55%, transparent 75%); animation: fp-breathe 9s ease-in-out infinite alternate; } @keyframes fp-breathe { from { opacity: .65; transform: translate(-50%, -55%) scale(1); } to { opacity: 1; transform: translate(-50%, -55%) scale(1.08); } } /* aurora: soft spectral shafts rising from the horizon, slowly drifting — sits behind everything in the hero */ .fp-aurora { position: absolute; top: 0; left: 0; right: 0; height: 100dvh; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 80%, transparent 100%); } .fp-aurora::before, .fp-aurora::after { content: ""; position: absolute; inset: -14% -28%; mix-blend-mode: screen; background: linear-gradient(96deg, transparent 2%, rgba(150, 118, 224, .11) 9%, transparent 17%, rgba(92, 164, 196, .09) 25%, transparent 31%, rgba(214, 148, 69, .12) 40%, transparent 47%, rgba(124, 194, 154, .08) 56%, transparent 62%, rgba(206, 122, 164, .10) 71%, transparent 78%, rgba(214, 148, 69, .08) 87%, transparent 94%); filter: blur(34px); animation: fp-aurora-drift 26s ease-in-out infinite alternate; } .fp-aurora::after { filter: blur(64px); opacity: .75; animation: fp-aurora-drift-rev 38s ease-in-out infinite alternate; } @keyframes fp-aurora-drift { from { transform: translateX(-3.5%); opacity: .8; } to { transform: translateX(3.5%); opacity: 1; } } @keyframes fp-aurora-drift-rev { from { transform: translateX(3.5%) scaleX(-1); } to { transform: translateX(-3.5%) scaleX(-1); } } .fp-hero-inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; } .fp-hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 5.6vw, 66px); line-height: 1.06; letter-spacing: -.015em; margin: 0 0 18px; color: #f4f1ec; } .fp-hero-title em { font-style: italic; font-weight: 600; line-height: 1.1; padding-bottom: 2px; } .fp-hero-lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: rgba(241, 239, 234, .72); max-width: 44ch; margin: 0 auto 28px; } .fp-hero-cta { justify-content: center; } .fp-hero .btn-ghost { color: #f1efea; border-color: rgba(241, 239, 234, .32); background: rgba(19, 17, 16, .25); } .fp-hero .btn-ghost:hover { border-color: #f1efea; background: rgba(241, 239, 234, .08); } /* ---------- profile verification demo ---------- */ .fp-demo { width: 100%; max-width: 540px; margin-top: 56px; text-align: left; border: 1px solid var(--fp-line); border-radius: 16px; background: linear-gradient(165deg, rgba(32, 28, 25, .92), rgba(27, 24, 21, .92)); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(241, 239, 234, .06), 0 40px 90px -40px rgba(0, 0, 0, .85); padding: 18px 20px 14px; } .fp-demo-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--fp-hair); } .fp-demo-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--fp-line); } .fp-demo-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fp-demo-name { font-family: var(--serif); font-weight: 600; font-size: 17px; color: #f1efea; } .fp-demo-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: rgba(241, 239, 234, .55); transition: color .3s var(--ease); } .fp-demo-badge.is-verified { color: var(--amber); } .fp-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: rgba(241, 239, 234, .4); animation: fp-dot-pulse 1.1s ease-in-out infinite; } .fp-demo-badge.is-verified .fp-badge-dot { background: var(--amber); animation: none; } @keyframes fp-dot-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .fp-demo-note { margin-left: auto; align-self: flex-start; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 239, 234, .35); } /* height reserved for all rows up-front so the card never grows mid-animation — rows simply fill the space top-to-bottom */ .fp-demo-rows { list-style: none; margin: 0; padding: 6px 0 0; min-height: 233px; /* 4 rows × 56px + 3 hairlines + top padding */ } .fp-demo-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 2px; opacity: 0; transform: translateY(6px); animation: fp-row-in .5s var(--ease) forwards; } .fp-demo-row + .fp-demo-row { border-top: 1px solid var(--fp-hair); } @keyframes fp-row-in { to { opacity: 1; transform: translateY(0); } } .fp-row-thumb { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex: none; position: relative; border: 1px solid var(--fp-hair); } .fp-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(5px) saturate(.8); transform: scale(1.3); } .fp-row-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .fp-row-site { font-size: 13.5px; font-weight: 600; color: #f1efea; } .fp-row-what { font-size: 12.5px; color: rgba(241, 239, 234, .5); } .fp-row-status { margin-left: auto; flex: none; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--fp-line); color: rgba(241, 239, 234, .6); transition: all .35s var(--ease); } .fp-row-status.is-sent { border-color: rgba(214, 148, 69, .5); color: var(--amber); } .fp-row-status.is-removed { border-color: transparent; background: var(--amber); color: #131110; } /* ---------- how it works ---------- */ .fp-block { position: relative; z-index: 2; padding: 104px 0; border-bottom: 1px solid var(--fp-hair); } .fp-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 56px; color: #f1efea; } .fp-sub { color: rgba(241, 239, 234, .62); max-width: 52ch; margin: 0 0 40px; font-size: clamp(16px, 1.9vw, 18px); line-height: 1.6; } .fp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; border-top: 1px solid var(--fp-line); padding-top: 40px; } .fp-step h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; margin: 0 0 12px; color: var(--amber); } .fp-step p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(241, 239, 234, .6); } /* ---------- enroll ---------- */ .fp-enroll { position: relative; z-index: 2; overflow: hidden; padding: 110px 0 120px; } .fp-enroll-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 65% at 50% 120%, rgba(214, 148, 69, .28), rgba(214, 148, 69, .06) 48%, transparent 72%), var(--fp-deep); } .fp-enroll-inner { max-width: 600px; text-align: center; } .fp-enroll .fp-h2 { margin-bottom: 14px; } .fp-enroll .fp-sub { margin: 0 auto 32px; } .fp-enroll-form { text-align: left; } .fp-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: rgba(241, 239, 234, .72); margin-bottom: 8px; } .fp-input { width: 100%; min-width: 0; font-family: var(--sans); font-size: 15px; color: #f1efea; background: rgba(19, 17, 16, .6); border: 1px solid var(--fp-line); border-radius: 10px; padding: 12px 14px; outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .fp-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(214, 148, 69, .22); } .fp-input::placeholder { color: rgba(241, 239, 234, .4); } .fp-enroll-row { display: flex; gap: 10px; } .fp-enroll-row .fp-input { flex: 1; } .fp-enroll-row .btn { flex: none; white-space: nowrap; } .fp-help { margin: 10px 0 0; font-size: 13px; color: rgba(241, 239, 234, .45); } .fp-error { margin: 10px 0 0; font-size: 13.5px; color: #e08a80; font-weight: 500; } .fp-success { margin: 8px 0 0; font-size: 16px; color: rgba(241, 239, 234, .7); border: 1px solid var(--fp-line); border-radius: 12px; background: var(--fp-raised); padding: 18px 20px; } .fp-success strong { color: var(--amber); font-family: var(--serif); } .fp-page .site-foot { border-top: 1px solid var(--fp-hair); background: var(--fp-deep); } .foot-note a { color: #efece9; } /* ---------- scroll reveal ---------- */ .fp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .fp-reveal.in { opacity: 1; transform: translateY(0); } /* ---------- responsive ---------- */ @media (max-width: 960px) { .fp-nav-cta { display: none; } .fp-steps { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 760px) { .fp-hero { padding: 88px 0 72px; min-height: 0; } .fp-demo { margin-top: 44px; } .fp-block { padding: 72px 0; } .fp-enroll { padding: 80px 0 90px; } .fp-enroll-row { flex-direction: column; } .fp-horizon { top: 88dvh; } .fp-aurora { height: 92dvh; } } @media (prefers-reduced-motion: reduce) { .fp-reveal { opacity: 1; transform: none; transition: none; } .fp-horizon::before { animation: none; } .fp-aurora::before, .fp-aurora::after { animation: none; } .fp-badge-dot { animation: none; } .fp-demo-row { animation: none; opacity: 1; transform: none; } }