/* ========================================================= PACHO — gazpacho reinventado Theming: every colour comes from [data-flavor] on . ========================================================= */ :root{ --ink:#fff; --ink-soft:rgba(255,255,255,.72); --ink-faint:rgba(255,255,255,.34); --rule:rgba(255,255,255,.18); --btn-ink:#12100e; --max:1240px; --pad:clamp(20px,5vw,64px); --r:14px; } /* ---- flavour themes ---- */ body[data-flavor="sandia"]{ --bg-1:#DE5A20; --bg-2:#A9300F; --deep:#5E1706; --accent:#FFC94A; /* highlight word */ --punch:#FFC94A; /* "Es Pacho." — the payoff line is the brightest thing in the block on every theme */ --liquid-1:#F0472A; --liquid-2:#B31E10; --can-1:#E23A1E; --can-2:#8E1A0B; } body[data-flavor="arandanos"]{ --bg-1:#8E0F3D; --bg-2:#4A0620; --deep:#2A0312; --accent:#F06795; --punch:#F06795; --liquid-1:#A61B5C; --liquid-2:#5C0B2E; --can-1:#6C31C0; --can-2:#361666; } body[data-flavor="pepino"]{ --bg-1:#175447; --bg-2:#0A2A23; --deep:#061A15; --accent:#C3E23F; --punch:#C3E23F; --liquid-1:#87B740; --liquid-2:#41701F; --can-1:#7FAE3C; --can-2:#39631B; } body[data-flavor="naranja"]{ --bg-1:#F3C21C; --bg-2:#DE9E06; --deep:#8A5D00; --accent:#0E6E5C; --punch:#0E6E5C; --liquid-1:#FBAF17; --liquid-2:#DC7B05; --can-1:#F2A310; --can-2:#C46A03; --ink:#fff; --ink-soft:rgba(48,30,0,.78); --ink-faint:rgba(48,30,0,.42); --rule:rgba(48,30,0,.22); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg-2); color:var(--ink); font-family:"Barlow",system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .6s ease; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* chrome that follows the flavour instead of the browser default */ ::selection{background:var(--accent);color:var(--deep)} :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px} :focus:not(:focus-visible){outline:none} html{scrollbar-color:var(--accent) var(--deep);color-scheme:dark} body[data-flavor="naranja"] html, body[data-flavor="naranja"]{accent-color:var(--accent)} .signup input{accent-color:var(--accent)} /* ---------- shared type ---------- */ .kicker,.eyebrow{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.34em; font-size:13px; font-weight:600; color:var(--ink); } .kicker em{font-style:normal;color:var(--accent)} .eyebrow{color:var(--ink-faint);margin-bottom:14px} h2{ text-wrap:balance; font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(34px,5.2vw,68px); line-height:.96; letter-spacing:-.01em; } .lede{text-wrap:pretty;max-width:52ch;color:var(--ink-soft);margin-top:18px;font-size:clamp(16px,1.5vw,19px)} .head{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .btn{ display:inline-block; background:var(--ink); color:var(--btn-ink); font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:16px; padding:15px 30px; border-radius:100px; border:0; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; } body[data-flavor="naranja"] .btn{background:#241700;color:#F3C21C} .btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.28)} .btn--sm{padding:10px 20px;font-size:14px} .link{ font-family:"Barlow Condensed",sans-serif;text-transform:uppercase; letter-spacing:.14em;font-size:15px;font-weight:600;color:var(--ink-soft); border-bottom:1px solid var(--rule);padding-bottom:3px; } .link:hover{color:var(--ink)} /* ---------- nav ---------- */ .nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:32px; padding:16px var(--pad); background:color-mix(in srgb, var(--bg-2) 78%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--rule); transition:background .6s ease; } .nav__mark{ position:relative; display:inline-block; padding-right:10px; font-family:"Anton",Impact,sans-serif; font-size:26px; letter-spacing:.02em; line-height:1; } .nav__mark sup{position:absolute; top:1px; right:0; font-size:9px; line-height:1} .nav__links{display:flex;gap:26px;margin-left:auto} .nav__links a{ font-family:"Barlow Condensed",sans-serif;text-transform:uppercase; letter-spacing:.16em;font-size:14px;font-weight:600;color:var(--ink-soft); } .nav__links a:hover{color:var(--ink)} .lang{ display:flex; align-items:center; gap:5px; font-family:"Barlow Condensed",sans-serif; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; } .lang button{ background:none; border:0; padding:5px 2px; cursor:pointer; font:inherit; letter-spacing:inherit; color:var(--ink-faint); transition:color .2s ease; } .lang button:hover{color:var(--ink)} .lang button[aria-pressed="true"]{color:var(--ink)} .lang > span{color:var(--ink-faint);opacity:.45} .nav__burger{display:none;background:none;border:0;cursor:pointer;margin-left:14px} .nav__burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0} /* ---------- hero ---------- */ .hero{ position:relative; overflow:hidden; padding:clamp(40px,6vw,80px) 0 0; background: radial-gradient(120% 90% at 78% 18%, color-mix(in srgb,var(--bg-1) 70%, #fff 6%) 0%, transparent 60%), linear-gradient(150deg, var(--bg-1) 0%, var(--bg-2) 62%, var(--deep) 100%); transition:background .6s ease; } .hero__leaf{ position:absolute; inset:-10% auto auto -6%; width:52vw; height:52vw; background:radial-gradient(closest-side, rgba(0,0,0,.28), transparent 70%); filter:blur(30px); pointer-events:none; } .hero__inner{ position:relative; max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; } .wordmark{ position:relative; display:inline-block; font-family:"Anton",Impact,"Haettenschweiler",sans-serif; font-size:clamp(76px,12.5vw,176px); line-height:1; letter-spacing:-.005em; margin:22px 0 0; text-transform:uppercase; transform:scaleY(1.16); transform-origin:left center; } .wordmark sup{ position:absolute; top:.06em; right:-.34em; font-size:.085em; letter-spacing:0; transform:scaleY(.86); } .claim{ text-wrap:balance; margin-top:clamp(18px,2.4vw,34px); font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(30px,4.4vw,54px); line-height:.98; letter-spacing:-.005em; margin-top:26px; } .claim__punch{color:var(--punch);transition:color .5s ease} .triad{ font-family:"Barlow Condensed",sans-serif;font-weight:600; text-transform:uppercase;letter-spacing:.06em; font-size:clamp(15px,1.7vw,21px);margin-top:18px; } .triad__2{color:var(--accent)} .hero__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px} /* ingredient row */ /* the row is the recipe, so it stays on one line at every width and the items share the space instead of wrapping a lone ingredient onto line two */ .ingredients{ list-style:none; display:flex; flex-wrap:nowrap; align-items:flex-start; gap:clamp(6px,1.4vw,26px); margin:34px 0 0; max-width:640px; } .ingredients li{flex:1 1 0; min-width:0; max-width:96px; text-align:center} .ingredients img{ width:100%; height:clamp(38px,4.4vw,64px); object-fit:contain; object-position:bottom; margin:0 auto 10px; display:block; filter:drop-shadow(0 8px 12px rgba(0,0,0,.34)); transition:transform .3s cubic-bezier(.2,.7,.3,1); } .ingredients li:hover img{transform:translateY(-4px) scale(1.06)} .ingredients span{ font-family:"Barlow Condensed",sans-serif;text-transform:uppercase; letter-spacing:.08em;font-size:clamp(8.5px,.76vw,10.5px);line-height:1.25; color:var(--ink-soft);display:block; } /* product shot */ .hero__shot{display:flex;justify-content:center;align-items:flex-end;min-height:420px} .shot{position:relative;width:100%;height:clamp(380px,42vw,545px);display:flex;align-items:flex-end;justify-content:flex-start} .shot::after{ /* grounding shadow under the pack shot */ content:""; position:absolute; bottom:3%; left:34%; transform:translateX(-50%); width:62%; height:36px; background:rgba(0,0,0,.5); filter:blur(26px); border-radius:50%; } .shot__img{ position:relative; z-index:2; height:100%; width:auto; max-width:100%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 26px 34px rgba(0,0,0,.42)); view-transition-name:pack; } .shot--intro .shot__img{animation:rise .7s cubic-bezier(.2,.7,.3,1) both} @keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985)}} .seal{ /* hero corner, clear of the pack shot */ position:absolute; top:clamp(40px,5.5vw,78px); right:var(--pad); z-index:3; width:clamp(92px,10.5vw,132px); height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.42)); transform:rotate(-8deg); } /* switcher */ .switcher{ position:relative; max-width:var(--max); margin:clamp(24px,4vw,48px) auto 0; padding:0 var(--pad); display:flex; gap:10px; flex-wrap:wrap; } .switcher button{ display:flex; align-items:center; gap:9px; cursor:pointer; background:transparent; color:var(--ink-soft); border:1px solid var(--rule); border-radius:100px; padding:9px 18px 9px 10px; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:600; transition:.22s ease; } .switcher button i{width:16px;height:16px;border-radius:50%;display:block} .switcher button:nth-child(1) i{background:linear-gradient(160deg,#F0472A,#B31E10)} .switcher button:nth-child(2) i{background:linear-gradient(160deg,#A61B5C,#5C0B2E)} .switcher button:nth-child(3) i{background:linear-gradient(160deg,#87B740,#41701F)} .switcher button:nth-child(4) i{background:linear-gradient(160deg,#FBAF17,#DC7B05)} .switcher button:hover{border-color:var(--ink);color:var(--ink)} .switcher button[aria-selected="true"]{background:var(--ink);color:var(--btn-ink);border-color:var(--ink)} body[data-flavor="naranja"] .switcher button[aria-selected="true"]{background:#241700;color:#F3C21C} /* promises strip */ .promises{ list-style:none; max-width:var(--max); margin:clamp(28px,4vw,52px) auto 0; padding:18px var(--pad) 26px; display:flex; gap:clamp(14px,3vw,40px); flex-wrap:wrap; border-top:1px solid var(--rule); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:12.5px; color:var(--ink-faint); } .promises b{color:var(--accent);font-weight:600} /* ---------- ticker ---------- */ .ticker{background:var(--deep);border-block:1px solid var(--rule);overflow:hidden;padding:14px 0;transition:background .6s ease} .ticker__row{display:flex;width:max-content;animation:slide 38s linear infinite} .ticker span{ font-family:"Anton",Impact,sans-serif;font-size:clamp(22px,3vw,38px); text-transform:uppercase;letter-spacing:.04em;padding-right:.6em; color:transparent; white-space:nowrap; /* --ink-faint goes dark on the warmer themes, so key the stroke off --ink, which stays white in all four */ -webkit-text-stroke:1px rgba(255,255,255,.5); -webkit-text-stroke:1px color-mix(in srgb, var(--ink) 58%, transparent); } @keyframes slide{to{transform:translateX(-50%)}} /* ---------- sabores ---------- */ .sabores{padding:clamp(64px,9vw,120px) 0;background:var(--bg-2);transition:background .6s ease} .grid{ max-width:var(--max);margin:clamp(36px,5vw,56px) auto 0;padding:0 var(--pad); display:grid;grid-template-columns:repeat(4,1fr);gap:16px; } .card{ position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer; padding:26px 22px 22px;min-height:400px; display:flex;flex-direction:column;justify-content:flex-end; border:1px solid rgba(255,255,255,.12); transition:transform .3s ease, box-shadow .3s ease; } .card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.35)} .card__shot{ position:absolute; top:20px; left:0; right:0; height:190px; display:flex; align-items:flex-end; justify-content:center; } .card__img{ height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 14px 20px rgba(0,0,0,.34)); transition:transform .35s cubic-bezier(.2,.7,.3,1); } .card:hover .card__img{transform:translateY(-6px) scale(1.04)} .card h3{ font-family:"Barlow Condensed",sans-serif;text-transform:uppercase; font-size:26px;line-height:1;font-weight:700;color:#fff;margin-bottom:6px; } .card p{font-size:14.5px;color:rgba(255,255,255,.78);line-height:1.4} .card small{ display:block;margin-top:14px;font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:rgba(255,255,255,.6); } .card[data-active="true"]{border-color:#fff} /* the yellow card needs dark ink to stay readable */ .card[data-set="naranja"] h3{color:#241700} .card[data-set="naranja"] p{color:rgba(36,23,0,.82)} .card[data-set="naranja"] small{color:rgba(36,23,0,.62)} /* ---------- dentro ---------- */ .dentro{padding:clamp(64px,9vw,120px) 0;background:var(--deep);transition:background .6s ease} .dentro__inner{ max-width:var(--max);margin:0 auto;padding:0 var(--pad); display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start; } .checks{list-style:none;margin-top:30px;display:grid;gap:12px} .checks li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:16px} .checks li::before{ content:"✳";position:absolute;left:0;top:0;color:var(--accent);font-size:14px; } .nutri{width:100%;border-collapse:collapse;font-family:"Barlow Condensed",sans-serif} .nutri caption{ text-align:left;text-transform:uppercase;letter-spacing:.2em;font-size:12px; color:var(--ink-faint);padding-bottom:14px; } .nutri caption b{color:var(--accent);font-weight:600} .nutri td{padding:14px 0;border-bottom:1px solid var(--rule);font-size:17px} .nutri td:last-child{text-align:right;font-weight:700;letter-spacing:.04em} .nutri tr:first-child td{border-top:1px solid var(--rule)} /* ---------- ritual ---------- */ .ritual{padding:clamp(64px,9vw,120px) 0;background:var(--bg-2);transition:background .6s ease} .steps{ list-style:none;max-width:var(--max);margin:clamp(36px,5vw,56px) auto 0;padding:0 var(--pad); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px); } .steps li{border-top:1px solid var(--rule);padding-top:22px} .steps span{font-family:"Anton",sans-serif;font-size:15px;color:var(--accent);letter-spacing:.14em} .steps h3{ font-family:"Barlow Condensed",sans-serif;text-transform:uppercase; font-size:30px;line-height:1;margin:12px 0 10px;font-weight:700; } .steps p{color:var(--ink-soft);font-size:16px} /* ---------- donde ---------- */ .donde{ padding:clamp(72px,10vw,140px) 0; background:linear-gradient(150deg,var(--bg-1),var(--bg-2) 70%); transition:background .6s ease; } .donde__inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);max-width:860px} .signup{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap} .signup input{ flex:1 1 260px;background:transparent;border:1px solid var(--rule); border-radius:100px;padding:15px 24px;color:var(--ink);font-family:inherit;font-size:16px; } .signup input::placeholder{color:var(--ink-faint)} .signup input:focus{outline:none;border-color:var(--ink)} .micro{margin-top:16px;font-size:14px;color:var(--ink-faint)} /* ---------- footer ---------- */ .foot{ background:var(--deep);padding:clamp(48px,6vw,80px) var(--pad) 40px; display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start; border-top:1px solid var(--rule);transition:background .6s ease; } .foot__mark{ position:relative; display:inline-block; justify-self:start; padding-right:.34em; font-family:"Anton",sans-serif; font-size:clamp(48px,7vw,86px); line-height:.82; transform:scaleY(1.12); transform-origin:left; } .foot__mark sup{position:absolute; top:.03em; right:0; font-size:.13em; line-height:1; transform:scaleY(.89)} .foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .foot__cols h4{ font-family:"Barlow Condensed",sans-serif;text-transform:uppercase; letter-spacing:.2em;font-size:12px;color:var(--ink-faint);margin-bottom:12px;font-weight:600; } .foot__cols a{display:block;color:var(--ink-soft);font-size:15px;padding:4px 0} .foot__cols a:hover{color:var(--ink)} .foot__legal{ grid-column:1/-1;border-top:1px solid var(--rule);padding-top:22px;margin-top:12px; font-size:13px;color:var(--ink-faint); } /* ---------- view transitions ---------- */ /* the whole page cross-fades while the pack shot morphs across it */ ::view-transition-old(root), ::view-transition-new(root){animation-duration:.5s; animation-timing-function:ease} ::view-transition-group(pack){ animation-duration:.62s; animation-timing-function:cubic-bezier(.34,.8,.28,1); } ::view-transition-old(pack), ::view-transition-new(pack){animation-duration:.62s; mix-blend-mode:normal} /* ---------- reveal ---------- */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} [data-reveal].in{opacity:1;transform:none} /* where scroll timelines exist, CSS drives the reveal and the hero parallax */ @supports (animation-timeline:view()){ [data-reveal]{ transition:none; animation:reveal linear both; animation-timeline:view(); animation-range:entry 4% cover 26%; } .steps li{animation-range:entry 2% cover 30%} .hero__shot{ animation:drift linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; } .hero__copy{ animation:driftSlow linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; } } @keyframes reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes drift{to{transform:translateY(-72px)}} @keyframes driftSlow{to{transform:translateY(-26px)}} /* ---------- responsive ---------- */ @media (max-width:1000px){ /* the copy block dissolves so its children order alongside the pack shot: claim first, then the product, then the call to action */ .hero__inner{grid-template-columns:1fr;gap:0} .hero__copy{display:contents} .kicker{order:1} /* as a grid item the inline-block blockifies and would stretch the column, throwing the absolutely-placed trademark to the far edge */ .wordmark{order:2;justify-self:start} .claim{order:3} .triad{order:4} .hero__shot{order:5;min-height:0} .hero__cta{order:6} .ingredients{order:7} .shot{height:clamp(300px,64vw,430px);justify-content:center} .hero__shot{margin-top:26px} .hero__cta{margin-top:26px} .ingredients{margin-top:30px;max-width:none} /* parallax reads as drift in a stacked column, so drop it here */ .hero__shot,.hero__copy{animation:none} .dentro__inner{grid-template-columns:1fr} .grid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:1fr;gap:26px} .foot{grid-template-columns:1fr} } /* below this the four pills cannot share a line without unreadable type, so they go to a balanced 2x2 rather than orphaning the fourth */ @media (max-width:760px){ .switcher{display:grid;grid-template-columns:1fr 1fr;gap:8px} .switcher button{justify-content:center;padding:10px 12px 10px 10px} } @media (max-width:640px){ .nav__links{display:none} .nav .btn--sm{display:none} .nav__burger{display:block} .lang{margin-left:auto} .grid{grid-template-columns:1fr} .foot__cols{grid-template-columns:1fr 1fr} /* keep the five ingredients on one line rather than orphaning the last */ .ingredients{gap:5px} .ingredients img{margin-bottom:7px} .ingredients span{letter-spacing:.04em} /* seal tucks beside the wordmark, clear of the switcher */ .seal{top:clamp(74px,19vw,110px)} .switcher button{font-size:12px;padding:8px 14px 8px 8px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto} [data-reveal]{opacity:1;transform:none} .hero__shot,.hero__copy{transform:none!important} ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none!important} }