/* ========================================================= VOKO Landing — page-level styles Tokens import design-system/colors_and_type.css ========================================================= */ @import url("design-system/colors_and_type.css"); * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg1); font-family: var(--font-text); font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; } button { font-family: inherit; } a { color: inherit; } /* Density variants — controlled via */ body[data-density="compact"] { --section-y: 64px; --section-y-lg: 80px; } body[data-density="estandar"] { --section-y: 96px; --section-y-lg: 128px; } body[data-density="aireado"] { --section-y: 128px; --section-y-lg: 192px; } body { --section-y: 96px; --section-y-lg: 128px; } @media (max-width: 720px) { body { --section-y: 56px !important; --section-y-lg: 72px !important; } } /* Container */ .container { width: min(1280px, 92vw); margin: 0 auto; } .container-wide { width: min(1440px, 94vw); margin: 0 auto; } /* Nav */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(245, 240, 233, 0.78); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border); transition: background var(--dur-base) var(--ease-standard); } .nav-inner { display: flex; align-items: center; gap: 28px; padding: 14px 0; } .nav .brand img { height: 26px; width: auto; } .nav .links { display: flex; gap: 26px; margin-left: 12px; } .nav .links a { font-size: 14px; font-weight: 400; text-decoration: none; color: var(--fg1); position: relative; padding: 6px 0; transition: color var(--dur-fast) var(--ease-standard); } .nav .links a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-standard); } .nav .links a:hover::after { transform: scaleX(1); } .nav .spacer { flex: 1; } .nav .phone { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; text-decoration: none; color: var(--fg2); transition: color var(--dur-fast) var(--ease-standard); } .nav .phone:hover { color: var(--fg1); } .nav .phone svg { width: 14px; height: 14px; } @media (max-width: 860px) { .nav .links, .nav .phone { display: none; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-text); font-weight: 500; font-size: 14px; padding: 14px 22px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .btn:active { transform: translateY(1px); } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--voko-azul-perspectiva); color: var(--voko-blanco-vision); } .btn-primary:hover { background: #2c3242; box-shadow: var(--shadow-md); } .btn-accent { background: var(--accent); color: var(--voko-azul-perspectiva); } .btn-accent:hover { filter: brightness(0.96); box-shadow: var(--shadow-md); } .btn-secondary { background: transparent; color: var(--fg1); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--fg1); } .btn-on-dark { background: var(--voko-blanco-vision); color: var(--voko-azul-perspectiva); } .btn-on-dark:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .btn-lg { padding: 16px 28px; font-size: 15px; } /* WhatsApp icon */ .wa-icon { width: 18px; height: 18px; display: inline-block; } /* Eyebrow */ .eyebrow { font-family: var(--font-text); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg2); } .eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); margin-right: 8px; vertical-align: middle; transform: translateY(-1px); } /* Display headings */ .display { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.92; color: var(--fg1); text-wrap: balance; margin: 0; } .display em { font-style: italic; font-weight: 600; color: var(--accent); } .display.thin-italic em { font-weight: 300; } /* Sections */ .section { padding-block: var(--section-y); } .section-lg { padding-block: var(--section-y-lg); } /* Editorial figure / placeholder */ .figure { position: relative; background: var(--voko-blanco-vision); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--fg3); isolation: isolate; } .figure[data-tone="cream"] { background: #ece4d4; } .figure[data-tone="peach"] { background: #f1d3c0; color: #8a3c20; } .figure[data-tone="mint"] { background: #c9e4cf; color: #004c48; } .figure[data-tone="opal"] { background: #c3d6ec; color: #002c3c; } .figure[data-tone="navy"] { background: var(--voko-azul-abismo); color: rgba(245,240,233,0.6); } .figure[data-tone="forest"] { background: var(--voko-verde-bosque); color: rgba(245,240,233,0.6); } .figure[data-tone="plum"] { background: var(--voko-morado); color: rgba(245,240,233,0.6); } .figure[data-tone="ink"] { background: var(--voko-azul-perspectiva); color: rgba(245,240,233,0.6); } .figure .label { position: absolute; inset: auto auto 14px 16px; font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: currentColor; opacity: 0.7; } .figure .label::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 8px; opacity: 0.6; } /* Subtle grain over figure */ .figure::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(34,39,51,0.04) 1px, transparent 1px); background-size: 4px 4px; pointer-events: none; mix-blend-mode: multiply; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard); transition-delay: var(--delay, 0ms); } .reveal.in { opacity: 1; transform: none; } /* Generic divider */ .hr-thin { height: 1px; background: var(--border); border: 0; margin: 0; } /* Marquee for brand strip */ @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 64px; width: max-content; animation: marquee 40s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } /* Floating WhatsApp */ .wa-floating { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 56px; height: 56px; border-radius: 999px; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0,0,0,0.15); transition: transform var(--dur-base) var(--ease-standard); text-decoration: none; } .wa-floating:hover { transform: scale(1.06); } .wa-floating svg { width: 28px; height: 28px; } .wa-floating .ping { position: absolute; inset: -6px; border-radius: 999px; border: 2px solid #25d366; animation: ping 2.4s var(--ease-standard) infinite; pointer-events: none; } @keyframes ping { 0% { transform: scale(0.9); opacity: 0.7; } 80% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } /* Hide for small */ @media (max-width: 720px) { .nav .nav-inner { padding: 10px 0; gap: 12px; } } /* Body-on-dark utility */ .on-dark { background: var(--voko-azul-abismo); color: var(--fg-on-dark); } .on-dark .eyebrow { color: rgba(245,240,233,0.65); } .on-dark .display { color: var(--fg-on-dark); } .on-dark p { color: rgba(245,240,233,0.78); } .on-forest { background: var(--voko-verde-bosque); color: var(--fg-on-dark); } .on-forest .eyebrow { color: rgba(245,240,233,0.65); } .on-forest .display { color: var(--fg-on-dark); } .on-forest p { color: rgba(245,240,233,0.78); } /* Helpers */ .muted { color: var(--fg2); } .dim { color: var(--fg3); }