/* ============================================================ LOS SECRETOS DE COCINA DE MERCEDES — landing page Arquitectura de configuración centralizada al final del Buscar: CONFIG.GUMROAD_URL / CONFIG.ORIGINAL_PRICE / CONFIG.PRODUCT_PRICE / CONFIG.IMAGES ============================================================ */ *,*::before,*::after{box-sizing:border-box;} :root{ --cream:#F7F0DF; --cream-2:#FBF6EA; --ink:#30251B; --terracotta:#A94428; --chile:#8F2F1F; --nopal:#59613A; --maiz:#D6A84B; --barro:#75472F; --talavera:#315F75; --bg: var(--cream); --bg-alt: var(--cream-2); --text: var(--ink); --text-soft: color-mix(in srgb, var(--ink) 68%, transparent); --surface: var(--cream-2); --surface-border: color-mix(in srgb, var(--ink) 14%, transparent); --btn-text: var(--cream-2); --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif; --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --container: 1200px; --radius-s: 6px; --radius-m: 14px; --radius-l: 26px; --ease: cubic-bezier(.22,.61,.36,1); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#1C140D; --bg-alt:#241A11; --text:#F3E9D6; --text-soft:rgba(243,233,214,.7); --surface:#2A1F15; --surface-border:rgba(243,233,214,.14); --btn-text:#FBF6EA; } } :root[data-theme="dark"]{ --bg:#1C140D; --bg-alt:#241A11; --text:#F3E9D6; --text-soft:rgba(243,233,214,.7); --surface:#2A1F15; --surface-border:rgba(243,233,214,.14); --btn-text:#FBF6EA; } html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; background-image: radial-gradient(circle at 1px 1px, rgba(48,37,27,.05) 1px, transparent 0); background-size: 22px 22px; } img{max-width:100%;display:block;} a{color:inherit;} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.12;letter-spacing:.002em;} p{margin:0;} button{font-family:inherit;} .wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; } @media (max-width:600px){ .wrap{padding:0 20px;} } section{ position:relative; } /* focus states */ a:focus-visible, button:focus-visible, summary:focus-visible{ outline:3px solid var(--talavera); outline-offset:3px; border-radius:4px; } /* ---------- reveal-on-scroll ---------- */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-visible{opacity:1; transform:translateY(0);} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} } /* ---------- eyebrow ---------- */ .eyebrow{ font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta); display:inline-flex; align-items:center; gap:.6em; margin-bottom:1.1rem; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--terracotta); display:inline-block; } /* ---------- ornamental divider ---------- */ .ornament{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--nopal); margin:0 auto; } .ornament svg{ width:120px; height:16px; } .ornament.center{margin-block:2.6rem;} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.01em; padding:1.05rem 2.1rem; border-radius:var(--radius-s); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); white-space:nowrap; } .btn-primary{ background:var(--terracotta); color:var(--btn-text); box-shadow:0 1px 0 rgba(0,0,0,.06); } .btn-primary:hover{ background:var(--chile); transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(143,47,31,.55); } .btn-primary:active{transform:translateY(0);} .btn-ghost{ background:transparent; color:var(--text); border-color:var(--surface-border); } .btn-ghost:hover{ border-color:var(--terracotta); color:var(--terracotta); } .btn-block{width:100%;} @media (prefers-reduced-motion: reduce){ .btn{transition:background-color .2s;} .btn-primary:hover{transform:none;} } .microcopy{ font-size:.86rem; color:var(--text-soft); margin-top:.85rem; } /* ============================================================ HEADER ============================================================ */ .site-header{ position:sticky; top:0; z-index:60; padding:22px 0; transition:padding .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease); } .site-header.scrolled{ padding:12px 0; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--surface-border); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .logo{ font-family:var(--serif); font-size:1.28rem; letter-spacing:.01em; text-decoration:none; color:var(--text); } .logo em{ color:var(--terracotta); font-style:normal; } .main-nav{ display:flex; align-items:center; gap:2.4rem; } .main-nav a{ text-decoration:none; font-size:.93rem; color:var(--text-soft); position:relative; padding-bottom:3px; } .main-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--terracotta); transition:right .3s var(--ease); } .main-nav a:hover{color:var(--text);} .main-nav a:hover::after{right:0;} .header-cta{ display:flex; align-items:center; gap:1.4rem; } .header-cta .btn{ padding:.75rem 1.4rem; font-size:.9rem; } .nav-toggle{ display:none; } @media (max-width: 900px){ .main-nav{ display:none; } .header-cta .btn-primary span.long{display:none;} } /* ============================================================ HERO ============================================================ */ .hero{ padding:2.4rem 0 4rem; } .hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:4vw; align-items:center; } .hero-copy h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); color:var(--text); margin-bottom:1.4rem; } .hero-copy p.lede{ font-size:1.12rem; color:var(--text-soft); max-width:46ch; margin-bottom:2.1rem; } .hero-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; } .hero-visual{ position:relative; } .hero-photo-frame{ position:relative; border-radius:var(--radius-l); overflow:hidden; aspect-ratio:4/4.6; box-shadow:0 30px 60px -30px rgba(48,37,27,.45); } .hero-photo-frame img{ width:100%; height:100%; object-fit:cover; } .hero-book-float{ position:absolute; right:-8%; bottom:-9%; width:44%; border-radius:8px; overflow:hidden; box-shadow:0 24px 40px -14px rgba(48,37,27,.5), 0 0 0 8px var(--bg); transform:rotate(-3deg); } .hero-book-float img{ width:100%; display:block; } .hero-tag{ position:absolute; left:-6%; top:8%; background:var(--surface); border:1px solid var(--surface-border); border-radius:100px; padding:.55rem 1.1rem .55rem .7rem; display:flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:600; box-shadow:0 14px 30px -16px rgba(48,37,27,.35); } .hero-tag .dot{ width:9px;height:9px;border-radius:50%; background:var(--nopal); } @media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:2.6rem; } .hero-visual{ order:-1; max-width:420px; margin:0 auto; } .hero-copy{ text-align:left; } .hero-tag{ display:none; } } @media (max-width:600px){ .hero{padding:1.4rem 0 3rem;} .hero-copy p.lede{max-width:none;} .hero-actions{ width:100%; } .hero-actions .btn{ width:100%; } } /* ============================================================ SECTION SPACING / HEADS ============================================================ */ .section{ padding:5.6rem 0; } .section-tight{ padding:3.6rem 0; } @media (max-width:700px){ .section{padding:3.6rem 0;} } .head-block{ max-width:640px; } .head-block.center{ margin:0 auto; text-align:center; } .head-block h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom:1.1rem; } .head-block .sub{ font-size:1.05rem; color:var(--text-soft); } /* ============================================================ PROBLEM SECTION ============================================================ */ .problem-layout{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; } .problem-copy .callout{ margin-top:1.8rem; padding:1.6rem 1.8rem; border-left:3px solid var(--terracotta); background:var(--surface); border-radius:0 var(--radius-m) var(--radius-m) 0; } .problem-copy .callout p{ font-family:var(--serif); font-size:1.28rem; line-height:1.35; } .problem-list{ margin:1.6rem 0 0; padding:0; list-style:none; display:grid; gap:.65rem; } .problem-list li{ color:var(--text-soft); padding-left:1.3rem; position:relative; font-size:1rem; } .problem-list li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--maiz); } .problem-photos{ display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:auto auto; gap:1rem; } .problem-photos .ph-a{ grid-row:1/3; aspect-ratio:3/4; } .problem-photos .ph-b{ aspect-ratio:4/3; } .problem-photos .ph-c{ aspect-ratio:4/3; } .ph-item{ border-radius:var(--radius-m); overflow:hidden; } @media (max-width:900px){ .problem-layout{ grid-template-columns:1fr; gap:2.4rem; } .problem-photos{ order:-1; } } @media (max-width:560px){ .problem-photos{ grid-template-columns:1fr 1fr; } .problem-photos .ph-a{ grid-column:1/3; grid-row:auto; aspect-ratio:16/10; } } /* ============================================================ PLACEHOLDER IMAGES (para reemplazar por fotografía real) ============================================================ */ .ph-item, .img-box{ position:relative; background:linear-gradient(155deg, color-mix(in srgb, var(--barro) 22%, var(--surface)), color-mix(in srgb, var(--maiz) 18%, var(--surface)) 60%, var(--surface)); } .ph-item img, .img-box img{ width:100%; height:100%; object-fit:cover; } .ph-placeholder{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:.7rem; } .ph-placeholder::before{ content:""; position:absolute; inset:8px; border:1px dashed color-mix(in srgb, var(--ink) 24%, transparent); border-radius:calc(var(--radius-m) - 6px); } .ph-tag{ position:relative; font-family:var(--sans); font-size:.66rem; letter-spacing:.05em; font-weight:600; background:color-mix(in srgb, var(--bg) 88%, transparent); color:var(--text-soft); padding:.3rem .55rem; border-radius:5px; } /* ============================================================ MERCEDES INTRO ============================================================ */ .mercedes-section{ background:var(--bg-alt); } .mercedes-layout{ display:grid; grid-template-columns:.86fr 1.14fr; gap:4.4rem; align-items:center; } .mercedes-photo{ border-radius:var(--radius-l); overflow:hidden; aspect-ratio:3/3.6; } .mercedes-copy h2{ font-size:clamp(2rem, 3.4vw, 2.9rem); margin-bottom:1.3rem; } .mercedes-quote{ font-family:var(--serif); font-size:1.3rem; line-height:1.5; color:var(--text); margin:1.6rem 0 1.6rem; padding-left:1.4rem; border-left:2px solid var(--maiz); } .mercedes-copy p.closing{ font-size:1.08rem; color:var(--text-soft); } @media (max-width:900px){ .mercedes-layout{ grid-template-columns:1fr; gap:2.2rem; } .mercedes-photo{ max-width:380px; margin:0 auto; aspect-ratio:4/4.4; } } /* ============================================================ BENEFIT CARDS ============================================================ */ .benefit-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6px; margin-top:3rem; background:var(--surface-border); border:1px solid var(--surface-border); border-radius:var(--radius-m); overflow:hidden; } .benefit-card{ background:var(--bg); padding:2.4rem 2rem; display:flex; flex-direction:column; gap:.9rem; } .benefit-num{ font-family:var(--serif); font-size:1.4rem; color:var(--maiz); } .benefit-card h3{ font-family:var(--sans); font-weight:700; font-size:1.06rem; letter-spacing:.01em; } .benefit-card p{ color:var(--text-soft); font-size:.96rem; } @media (max-width:900px){ .benefit-grid{ grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .benefit-grid{ grid-template-columns:1fr;} .benefit-card{padding:2rem 1.6rem;} } /* ============================================================ BOOK PREVIEW CAROUSEL ============================================================ */ .preview-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; } .carousel-controls{ display:flex; gap:.6rem; } .car-btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--surface-border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .2s, border-color .2s; } .car-btn:hover{ border-color:var(--terracotta); } .car-btn svg{ width:18px; height:18px; } .book-carousel{ display:flex; gap:1.6rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:1rem .2rem 2.2rem; margin:0 -.2rem; scrollbar-width:none; } .book-carousel::-webkit-scrollbar{ display:none; } .book-page{ scroll-snap-align:center; flex:0 0 auto; width:min(300px, 74vw); aspect-ratio:3/4; border-radius:10px; overflow:hidden; box-shadow:0 22px 40px -20px rgba(48,37,27,.4); transition:transform .4s var(--ease); } @media (min-width:900px){ .book-page{ width:calc((100% - 3.2rem)/3); } } .preview-cta{ display:flex; justify-content:center; margin-top:.6rem; } /* ============================================================ REAL PROBLEMS (terracota) ============================================================ */ .trouble-section{ background:var(--chile); color:var(--cream-2); } .trouble-section .eyebrow{ color:var(--maiz); } .trouble-section .eyebrow::before{ background:var(--maiz); } .trouble-section .head-block .sub{ color:rgba(251,246,234,.78); } .trouble-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; } .trouble-card{ background:rgba(251,246,234,.06); border:1px solid rgba(251,246,234,.16); border-radius:var(--radius-m); overflow:hidden; } .trouble-card .tc-photo{ aspect-ratio:4/3; } .trouble-card .tc-text{ padding:1.5rem 1.5rem 1.7rem; } .trouble-card p.q{ font-family:var(--serif); font-size:1.2rem; line-height:1.35; } @media (max-width:900px){ .trouble-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .trouble-grid{ grid-template-columns:1fr; } } /* ============================================================ INDEX / CONTENIDO ============================================================ */ .index-list{ margin-top:3rem; display:grid; grid-template-columns:1fr 1fr; column-gap:3.2rem; } .index-item{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--surface-border); font-family:var(--serif); font-size:1.18rem; } .index-item span.n{ font-family:var(--sans); font-size:.78rem; color:var(--text-soft); letter-spacing:.06em; } @media (max-width:700px){ .index-list{ grid-template-columns:1fr; } } /* ============================================================ EMOTIONAL / QUOTE SECTION ============================================================ */ .emotional-section{ padding:0; } .emotional-media{ position:relative; height:min(78vh, 640px); overflow:hidden; } .emotional-media img{ width:100%; height:120%; object-fit:cover; position:relative; top:-8%; will-change:transform; } .emotional-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(28,20,13,.72) 0%, rgba(28,20,13,.18) 46%, rgba(28,20,13,0) 68%); display:flex; align-items:flex-end; } .emotional-inner{ padding:3.4rem 0; width:100%; } .emotional-eyebrow{ color:var(--maiz); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:1rem; } .emotional-title{ color:#FBF6EA; font-size:clamp(1.9rem,3.6vw,2.7rem); max-width:16ch; margin-bottom:1.6rem; } .emotional-quote{ color:#FBF6EA; font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.7rem); max-width:36ch; line-height:1.4; } @media (max-width:700px){ .emotional-media{ height:72vh; } } /* ============================================================ PRODUCTO DIGITAL — 3 pasos ============================================================ */ .product-layout{ display:grid; grid-template-columns:.92fr 1.08fr; gap:4.2rem; align-items:center; } .product-visual{ position:relative; } .product-visual .img-box{ border-radius:var(--radius-l); overflow:hidden; aspect-ratio:5/5.4; } .product-visual .img-box{ aspect-ratio:1/1; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:2.2rem; } .product-visual .img-box img{ width:100%; height:100%; object-fit:contain; object-position:center; border-radius:8px; } .digital-badge{ position:absolute; top:-14px; left:-14px; background:var(--nopal); color:var(--cream-2); padding:.6rem 1.1rem; border-radius:100px; font-size:.8rem; font-weight:700; letter-spacing:.05em; box-shadow:0 12px 26px -12px rgba(0,0,0,.4); } .steps{ margin-top:2.2rem; display:grid; gap:1.6rem; } .step{ display:flex; gap:1.2rem; } .step-num{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid var(--surface-border); display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:var(--terracotta); font-size:1.05rem; } .step h4{ font-family:var(--sans); font-weight:700; font-size:1rem; margin-bottom:.3rem; } .step p{ color:var(--text-soft); font-size:.96rem; } @media (max-width:900px){ .product-layout{ grid-template-columns:1fr; gap:2.4rem; } .product-visual{ max-width:380px; margin:0 auto; } } /* ============================================================ COMPRA PRINCIPAL ============================================================ */ .buy-section{ background:var(--bg-alt); } .buy-card{ background:var(--bg); border:1px solid var(--surface-border); border-radius:var(--radius-l); overflow:hidden; display:grid; grid-template-columns:.85fr 1.15fr; box-shadow:0 40px 80px -40px rgba(48,37,27,.35); } .buy-cover{ position:relative; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:2.2rem; } .buy-cover img{ width:100%; height:100%; object-fit:contain; object-position:center; } .buy-content{ padding:3.2rem; display:flex; flex-direction:column; } .buy-content h3{ font-size:clamp(1.7rem,2.6vw,2.2rem); margin-bottom:.6rem; } .buy-content .buy-sub{ color:var(--text-soft); margin-bottom:1.8rem; } .buy-features{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.7rem; } .buy-features li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.98rem; } .buy-features svg{ flex:0 0 auto; width:18px; height:18px; margin-top:.16em; color:var(--nopal); } .price-block{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; } .price-original{ font-family:var(--sans); font-size:1.05rem; color:var(--text-soft); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--text-soft) 70%, transparent); } .price-current{ font-family:var(--serif); color:var(--terracotta); font-size:2.6rem; line-height:1; } .price-caption{ font-size:.86rem; color:var(--text-soft); margin-top:.5rem; } .hero-price{ display:flex; flex-direction:column; gap:.15rem; margin-bottom:.2rem; } .hero-price .price-block{ gap:.6rem; } .hero-price .price-original{ font-size:.95rem; } .hero-price .price-current{ font-size:1.7rem; } .hero-price .price-eyebrow{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); font-weight:600; } .sticky-price-block{ display:flex; align-items:baseline; gap:.5rem; } .sticky-price-block .price-original{ font-size:.78rem; } .sticky-price-block .price-current{ font-size:1rem; font-family:var(--sans); font-weight:700; } .buy-price-row{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:1.6rem; padding-top:1.6rem; border-top:1px solid var(--surface-border); } .buy-price-label{ color:var(--text-soft); font-size:.9rem; } @media (max-width:900px){ .buy-card{ grid-template-columns:1fr; } .buy-cover{ aspect-ratio:1/1; padding:1.6rem; } .buy-content{ padding:2rem; } } /* ============================================================ FAQ ============================================================ */ .faq-list{ margin-top:2.6rem; max-width:760px; } .faq-item{ border-bottom:1px solid var(--surface-border); } .faq-item summary{ list-style:none; cursor:pointer; padding:1.5rem .2rem; display:flex; align-items:center; justify-content:space-between; gap:1.4rem; font-family:var(--serif); font-size:1.16rem; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-icon{ flex:0 0 auto; width:26px; height:26px; position:relative; } .faq-icon::before, .faq-icon::after{ content:""; position:absolute; left:50%; top:50%; background:var(--terracotta); transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .3s var(--ease); } .faq-icon::before{ width:14px; height:2px; } .faq-icon::after{ width:2px; height:14px; } details[open] .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .faq-item p{ padding:0 .2rem 1.6rem; color:var(--text-soft); max-width:64ch; } /* ============================================================ CLOSING ============================================================ */ .closing-section{ text-align:center; } .closing-photo{ max-width:220px; margin:0 auto 2.2rem; border-radius:50%; overflow:hidden; aspect-ratio:1/1; box-shadow:0 20px 40px -18px rgba(48,37,27,.4); } .closing-section h2{ font-size:clamp(2.1rem,4vw,3.1rem); max-width:16ch; margin:0 auto 1.3rem; } .closing-section p.lede{ max-width:52ch; margin:0 auto 2.4rem; color:var(--text-soft); font-size:1.08rem; } /* ============================================================ FOOTER ============================================================ */ .site-footer{ background:var(--barro); color:var(--cream-2); padding:3.4rem 0 2.2rem; } .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; padding-bottom:2.2rem; border-bottom:1px solid rgba(251,246,234,.16); } .footer-logo{ font-family:var(--serif); font-size:1.3rem; } .footer-tagline{ color:rgba(251,246,234,.7); font-size:.94rem; margin-top:.5rem; max-width:32ch; } .footer-links{ display:flex; gap:2.4rem; flex-wrap:wrap; } .footer-links a{ color:rgba(251,246,234,.85); text-decoration:none; font-size:.92rem; } .footer-links a:hover{ color:var(--maiz); } .footer-bottom{ padding-top:1.8rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:rgba(251,246,234,.55); font-size:.82rem; } /* ============================================================ STICKY MOBILE CTA ============================================================ */ .mobile-sticky{ position:fixed; left:12px; right:12px; bottom:-120px; z-index:80; background:var(--bg); border:1px solid var(--surface-border); border-radius:16px; padding:.8rem .9rem .8rem 1.1rem; display:flex; align-items:center; gap:.8rem; box-shadow:0 -10px 40px -10px rgba(48,37,27,.4), 0 18px 40px -14px rgba(48,37,27,.4); transition:bottom .45s var(--ease); } .mobile-sticky.visible{ bottom:14px; } .mobile-sticky-info{ flex:1 1 auto; min-width:0; } .mobile-sticky-title{ font-family:var(--serif); font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mobile-sticky-price{ font-size:.82rem; color:var(--text-soft); } .mobile-sticky .btn{ padding:.75rem 1.2rem; font-size:.88rem; } .mobile-sticky-close{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:none; background:transparent; display:flex; align-items:center; justify-content:center; color:var(--text-soft); cursor:pointer; } @media (min-width:900px){ .mobile-sticky{ display:none; } } /* util */ .only-mobile{ display:none; } @media (max-width:900px){ .only-mobile{ display:block; } .only-desktop{ display:none; } }