/* ============================================================ VEHIX — Shared per-app PAGE system (themeable) One stylesheet for every app "world". Each page sets a handful of CSS vars on and the whole page recolors: --fc world background color (hero / CTA band) --fc-deep darker shade (scrolled nav) --fc-ink text color ON the world (white or dark) --fc-ink-2 secondary text on the world --fc-em italic accent inside hero/CTA headings --fc-accent READABLE accent for paper sections (deep tone) Reuses tokens / styles / mocks / apps CSS. ============================================================ */ /* ---- ENTRANCE: colored cover peels up to reveal the hero ---- */ #enter { position: fixed; inset: 0; z-index: 95; background: var(--fc); display: grid; place-items: center; transform: translateY(0); /* CSS-only safety net: even if JS never runs, the cover auto-peels and stops intercepting input — it can never trap the visitor. JS (the .entered class) gives the nicer, intentional timing when available. */ animation: enter-autopeel 0s linear 2.4s forwards; } #enter img { width: 60px; height: 60px; animation: vx-float 3s var(--ease) infinite; } body.entered #enter { transform: translateY(-101%); transition: transform .75s var(--ease-out); pointer-events: none; animation: none; } @keyframes enter-autopeel { to { transform: translateY(-101%); pointer-events: none; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { #enter { display: none; animation: none; } } /* ---- NAV (translucent over the world color) ---- */ .nav.app-nav { background: color-mix(in srgb, var(--fc) 58%, transparent); } .nav.app-nav.scrolled { background: color-mix(in srgb, var(--fc-deep, var(--fc)) 84%, transparent); border-bottom-color: color-mix(in srgb, var(--fc-ink) 22%, transparent); } .nav.app-nav .brand, .nav.app-nav .brand b, .nav.app-nav .nav-links a:not(.btn) { color: var(--fc-ink); } .nav.app-nav .nav-links a:not(.btn):hover { color: var(--fc-ink); background: color-mix(in srgb, var(--fc-ink) 14%, transparent); } .nav.app-nav .btn { background: var(--fc-ink); color: var(--fc); } .nav.app-nav .btn:hover { background: var(--fc-ink); opacity: .9; } .nav.app-nav .menu-btn { color: var(--fc-ink); } .nav.app-nav .mobile-menu { background: color-mix(in srgb, var(--fc-deep, var(--fc)) 94%, transparent); border-bottom-color: color-mix(in srgb, var(--fc-ink) 18%, transparent); } .nav.app-nav .mobile-menu a { color: var(--fc-ink); border-top-color: color-mix(in srgb, var(--fc-ink) 16%, transparent); } .nav.app-nav .mobile-menu a.btn { background: var(--fc-ink); color: var(--fc); } /* ---- HERO (full world color) ---- */ .fhero { position: relative; overflow: hidden; background: var(--fc); color: var(--fc-ink); padding-top: clamp(4rem, 2rem + 6vw, 7rem); padding-bottom: var(--section-y); } .fhero::after, .fcta::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .fhero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2.5rem, 1rem + 5vw, 6rem); } .fhero-body { max-width: 33rem; } .fhero .kicker { color: var(--fc-ink-2); } .fhero .kicker::before { background: var(--fc-ink-2); } .fhero-title { font-family: var(--serif); font-weight: var(--w-med); font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.7rem); line-height: 1.08; letter-spacing: -.018em; margin-top: 18px; } .fhero-title em { font-style: italic; color: var(--fc-em); } .fhero-sub { margin-top: 28px; font-size: var(--fs-lead); line-height: 1.5; color: var(--fc-ink-2); } .fhero-price { margin-top: 20px; font-size: 1.05rem; font-weight: var(--w-semi); color: var(--fc-ink); } .fhero-price b { font-weight: var(--w-bold); } .fhero-cta { margin-top: 32px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .fbtn { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; cursor: pointer; border: none; font-family: var(--sans); font-weight: var(--w-semi); font-size: 1.04rem; padding: 14px 28px; border-radius: var(--r-pill); background: var(--fc-ink); color: var(--fc); text-decoration: none; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .fbtn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.22); } .fbtn:active { transform: scale(.97); } .fghost { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; background: none; border: none; font-family: var(--sans); font-weight: var(--w-semi); font-size: 1.04rem; color: var(--fc-ink); text-decoration: none; opacity: .85; } .fghost:hover { opacity: 1; } .fghost .chev { transition: transform var(--dur-fast) var(--ease); } .fghost:hover .chev { transform: translateX(-4px); } .fhero-media { display: flex; justify-content: center; position: relative; } .fhero-media::before { content: ""; position: absolute; width: 86%; height: 86%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.30), transparent 68%); filter: blur(28px); z-index: 0; } .fhero-media > * { position: relative; z-index: 1; } /* ---- SECTIONS ON PAPER (use --fc-accent for readability) ---- */ .fsection { padding-block: var(--section-y); } .fsection .wrap { max-width: var(--maxw); } .fhead { text-align: center; margin-bottom: clamp(2.5rem, 1rem + 4vw, 4.5rem); } .fhead .kicker { justify-content: center; color: var(--fc-accent); margin-bottom: 16px; } .fhead .kicker::before { background: var(--fc-accent); } .fhead h2 { font-family: var(--serif); font-weight: var(--w-med); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; } .fhead h2 em { font-style: italic; color: var(--fc-accent); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); } .step .sn { font-family: var(--serif); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--fc-accent); opacity: .9; } .step h3 { font-family: var(--serif); font-weight: var(--w-med); font-size: 1.4rem; margin-top: 14px; letter-spacing: -.01em; } .step p { margin-top: 10px; color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; } .ffeatures { background: var(--paper-2); } .fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .fcard { background: var(--paper); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--elev-1); } .fcard .ic { width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--fc-accent) 13%, #fff); color: var(--fc-accent); display: grid; place-items: center; margin-bottom: 16px; } .fcard h3 { font-family: var(--serif); font-weight: var(--w-med); font-size: 1.28rem; letter-spacing: -.01em; } .fcard p { margin-top: 9px; color: var(--ink-2); font-size: 1rem; line-height: 1.55; } /* ---- CTA BAND (world color) ---- */ .fcta { background: var(--fc); color: var(--fc-ink); text-align: center; padding-block: clamp(4rem, 2rem + 6vw, 7rem); position: relative; overflow: hidden; } .fcta .wrap { position: relative; z-index: 2; } .fcta h2 { font-family: var(--serif); font-weight: var(--w-med); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.015em; max-width: 20ch; margin: 0 auto; } .fcta h2 em { font-style: italic; color: var(--fc-em); } .fcta p { margin: 18px auto 0; max-width: 46ch; color: var(--fc-ink-2); font-size: var(--fs-lead); } .fcta .fhero-cta { justify-content: center; } @media (max-width: 860px) { .fhero .wrap { grid-template-columns: 1fr; gap: 3rem; } .steps { grid-template-columns: 1fr; gap: 2rem; } .fgrid { grid-template-columns: 1fr; } }