/* ============================================================ Furamori v3 (rev) — Poppins, slate ink, wavy section transitions ============================================================ */ /* Poppins — self-hosted (latin subset). No external request, no render-block. Critical weights (400/800) are preloaded in each page . */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/poppins-800.woff2') format('woff2');} :root{ --fura-blue:#004aad; --fura-blue-700:#003a89; --fura-blue-500:#1a5fb8; --fura-blue-300:#7da3da; --fura-blue-50:#eef2fb; --fura-red:#e01717; --fura-red-600:#c11414; --fura-cream:#faf7f5; --fura-cream-2:#f3ede4; --ink:#1B1F24; --ink-2:#3d4452; --muted:#7a8090; --line:#e7e0d8; --font:'Poppins', system-ui, -apple-system, sans-serif; --r-md:18px; --r-lg:28px; --r-xl:36px; --shadow-sm:0 2px 10px rgba(27,31,36,.06); --shadow-md:0 18px 40px -14px rgba(0,30,90,.18); --shadow-lg:0 30px 70px -20px rgba(0,30,90,.28); --maxw:1200px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--fura-cream); -webkit-font-smoothing:antialiased; line-height:1.55; font-weight:400; overflow-x:hidden; /* prevent absolute decorations from causing horizontal scroll */ } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;} .section{padding:110px 0;} .eyebrow{ font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--fura-red);margin:0 0 16px; } .eyebrow--cream{color:rgba(250,247,245,.85);} .h-section{ font-weight:700; font-size:clamp(34px,4.4vw,52px); line-height:1.04;letter-spacing:-.025em; margin:0 0 18px;text-wrap:balance;color:var(--ink); } .lead{font-size:18px;color:var(--ink-2);max-width:55ch;margin:0 auto;text-wrap:pretty;} .center{text-align:center;} /* ============================================================ BUTTONS */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font);font-weight:600;font-size:16px; padding:16px 30px;border-radius:999px; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; white-space:nowrap; } .btn--primary{background:var(--fura-red);color:#fff;} .btn--primary:hover{transform:translateY(-2px);background:var(--fura-red-600);} .btn--blue{background:var(--fura-blue);color:#fff;} .btn--blue:hover{transform:translateY(-2px);background:var(--fura-blue-700);} .btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);} .btn--ghost:hover{background:#fff;border-color:var(--ink-2);} .btn--lg{padding:19px 36px;font-size:17px;} /* ============================================================ NAV (cream) */ .nav{ position:sticky;top:0;z-index:50; background:color-mix(in oklab, var(--fura-cream), transparent 8%); backdrop-filter:blur(12px); border-bottom:1px solid color-mix(in oklab, var(--line), transparent 50%); } .nav__inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px;} .brand{ display:inline-flex;align-items:center;gap:6px; height:42px; } .brand__mark{ height:34px;width:34px;flex:none; background:url('logo-mark.png') center/contain no-repeat; } .brand__mark::before,.brand__mark::after{content:none;display:none;} .brand__word{ font-family:var(--font); font-weight:600; font-size:28px; letter-spacing:-.025em; color:var(--ink); line-height:1; } .footer .brand__word{color:#fff;} .nav__links{display:flex;align-items:center;gap:30px;} .nav__links a{color:var(--ink-2);font-weight:500;font-size:15px;transition:.15s;} .nav__links a:hover{color:var(--fura-blue);} /* ---- Flag dropdown language selector ---- */ .langdrop{position:relative;} .langdrop__trigger{ display:inline-flex;align-items:center;gap:9px; background:#fff;border:none; border-radius:999px;padding:7px 14px 7px 7px; font-weight:600;font-size:14px;color:var(--ink-2); cursor:pointer;transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.04); } .langdrop__trigger:hover{background:var(--fura-blue-50);color:var(--fura-blue);} .langdrop__trigger .flagdisc{ width:28px;height:28px;border-radius:50%; overflow:hidden;flex:none; } .langdrop__trigger .flagdisc img{width:100%;height:100%;object-fit:cover;display:block;} .langdrop__trigger .caret{width:14px;height:14px;color:var(--muted);transition:transform .18s ease;} .langdrop[aria-expanded="true"] .caret{transform:rotate(180deg);} .langdrop__menu{ position:absolute;top:calc(100% + 8px);right:0; background:#fff;border:1px solid var(--line); border-radius:18px;padding:8px; box-shadow:0 24px 50px -18px rgba(0,30,90,.22), 0 4px 12px rgba(0,0,0,.04); display:none;flex-direction:column;gap:2px;min-width:180px;z-index:60; } .langdrop[aria-expanded="true"] .langdrop__menu{display:flex;} .langdrop__menu button{ display:flex;align-items:center;gap:11px; padding:9px 12px;border-radius:12px; font-weight:500;font-size:14.5px;color:var(--ink); cursor:pointer;text-align:left;transition:.12s; } .langdrop__menu button:hover{background:var(--fura-blue-50);color:var(--fura-blue);} .langdrop__menu button[aria-selected="true"]{background:var(--fura-blue-50);color:var(--fura-blue);font-weight:600;} .langdrop__menu .flagdisc{ width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none; } .langdrop__menu .flagdisc img{width:100%;height:100%;object-fit:cover;display:block;} .nav__cta{display:flex;align-items:center;gap:14px;} /* burger (mobile only) */ .burger{ display:none; width:42px;height:42px;border-radius:12px; background:transparent;border:none; align-items:center;justify-content:center; cursor:pointer;flex:none; } .burger svg{width:24px;height:24px;color:var(--ink);} .burger:hover{background:rgba(0,0,0,.05);} /* mobile full-screen menu overlay (display-toggled — robust) */ .navdrawer{ position:fixed;inset:0;z-index:200; background:var(--fura-cream); padding:84px 30px 40px; flex-direction:column; display:none; } body.nav-open .navdrawer{display:flex;} .navdrawer__close{ position:absolute;top:18px;right:20px; width:42px;height:42px;border-radius:12px; display:grid;place-items:center;background:transparent;border:none;cursor:pointer; } .navdrawer__close svg{width:26px;height:26px;color:var(--ink);} .navdrawer__close:hover{background:rgba(0,0,0,.05);} .navdrawer__links{display:flex;flex-direction:column;margin-bottom:auto;} .navdrawer__links a{ font-size:21px;font-weight:600;color:var(--ink); padding:17px 4px;border-bottom:1px solid var(--line); transition:color .14s; } .navdrawer__links a:hover{color:var(--fura-blue);} .navdrawer__seat{justify-content:center;width:100%;margin-top:26px;padding:16px;font-size:17px;} /* ============================================================ HERO (cream) */ .hero{ padding:90px 0 130px;text-align:center; position:relative; } .hero .wrap{position:relative;z-index:2;} /* ============================================================ FLOATING DECORATIONS — bubbles + polaroids */ .bubble{ position:absolute; display:inline-flex;align-items:center;gap:10px; background:var(--fura-cream);color:var(--fura-blue); font-weight:600;font-size:17px; padding:13px 22px 13px 18px; border-radius:28px 28px 28px 10px; box-shadow:0 14px 28px -12px rgba(0,40,90,.25), 0 2px 4px rgba(0,0,0,.04); white-space:nowrap; z-index:3; border:1px solid rgba(0,0,0,.03); } .bubble--right{border-radius:28px 28px 10px 28px;} .bubble__dot{ width:13px;height:13px;border-radius:50%; background:var(--fura-red);flex:none; } .polaroid{ position:absolute; background:#fff; padding:8px 8px 22px; border-radius:6px; box-shadow:0 22px 42px -16px rgba(0,30,90,.28), 0 2px 4px rgba(0,0,0,.04); z-index:2; } .polaroid img{ width:170px;height:200px; object-fit:cover; border-radius:3px;display:block; } .polaroid--sm img{width:130px;height:150px;} .polaroid--xs img{width:110px;height:128px;} /* hero placements (bubbles only — photos moved to intersections) */ .bubble--hero-jp{top:46px;left:4%;--rot:-6deg;} .bubble--hero-fr{top:60px;right:5%;--rot:5deg;} .bubble--hero-en{top:230px;left:3%;--rot:4deg;} .bubble--hero-es{top:250px;right:4%;--rot:-5deg;} /* Bubbles use a CSS variable so the float animation can preserve the rotation. The keyframe falls back to 0deg if no --rot is declared (default state). */ .bubble{animation:bubbleFloat 7s ease-in-out infinite both;transform:rotate(var(--rot, 0deg));} .bubble--hero-jp{animation-delay:0s;} .bubble--hero-fr{animation-delay:.6s;} .bubble--hero-en{animation-delay:1.4s;} .bubble--hero-es{animation-delay:2.0s;} @keyframes bubbleFloat{ 0%,100%{transform:rotate(var(--rot, 0deg)) translateY(0);} 50%{transform:rotate(var(--rot, 0deg)) translateY(-6px);} } @media (prefers-reduced-motion: reduce){ .bubble{animation:none;transform:rotate(var(--rot, 0deg));} } /* PHOTOSTRIP — large polaroids straddling section boundaries (Timeleft-style) */ .wavebar{position:relative;overflow:visible;} .photostrip{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; z-index:10;pointer-events:none; } .photostrip .polaroid{ position:relative; margin:0 -22px; background:#fff; padding:10px 10px 26px; border-radius:8px; box-shadow:0 26px 50px -18px rgba(0,30,90,.35), 0 3px 6px rgba(0,0,0,.06); pointer-events:auto; display:block; transition:transform .35s ease; } .photostrip .polaroid:hover{transform:scale(1.04) rotate(0) translateY(-6px) !important;} .photostrip .polaroid img{ width:260px;height:200px; object-fit:cover; border-radius:4px;display:block; } /* 3-polaroid layout (blue → cream wave) */ .photostrip:not(.photostrip--two) .polaroid:nth-child(1){transform:rotate(-7deg);} .photostrip:not(.photostrip--two) .polaroid:nth-child(2){transform:rotate(2deg) translateY(-22px);z-index:2;} .photostrip:not(.photostrip--two) .polaroid:nth-child(3){transform:rotate(-4deg) translateY(10px);} /* 2-polaroid layout (cream → blue wave — hero photos) Desktop: split apart so the "How it works" title is visible between them. Mobile: keep centered (flex default) so they hug each other. */ .photostrip--two .polaroid:nth-child(1){ --base-rot:-5deg; transform:rotate(var(--base-rot)); animation:swayLeft 7s ease-in-out infinite; } .photostrip--two .polaroid:nth-child(2){ --base-rot:4deg; transform:rotate(var(--base-rot)) translateY(-14px); animation:swayRight 8s ease-in-out infinite .6s; } /* Desktop+ tablet: pin polaroids to opposite sides, leaving room for the heading */ @media (min-width:760px){ .photostrip--two{justify-content:space-between;padding:0 6%;} .photostrip--two .polaroid{margin:0;} } @keyframes swayLeft{ 0%,100%{transform:rotate(var(--base-rot)) translateY(0);} 50%{transform:rotate(calc(var(--base-rot) + 2deg)) translateY(-4px);} } @keyframes swayRight{ 0%,100%{transform:rotate(var(--base-rot)) translateY(-14px);} 50%{transform:rotate(calc(var(--base-rot) - 2deg)) translateY(-18px);} } @media (prefers-reduced-motion: reduce){ .photostrip--two .polaroid{animation:none;} } /* events section placements */ .bubble--lang{top:50px;right:5%;transform:rotate(4deg);} .polaroid--lang{top:50px;left:3%;transform:rotate(-5deg);} /* coffee section placements */ .bubble--coffee{top:-20px;left:6%;transform:rotate(-4deg);z-index:5;} /* hide ambient bubbles in OTHER sections on small screens (hero bubbles + heroshots stay) */ @media (max-width:1100px){ .bubble--lang,.bubble--coffee,.polaroid--lang{display:none;} .polaroid:not(.heroshots .polaroid):not(.photostrip .polaroid){display:none;} } .hero h1{ font-weight:700; font-size:clamp(40px,5.6vw,74px); line-height:1.05;letter-spacing:-.03em; color:var(--ink); margin:0 auto 26px; max-width:18ch;text-wrap:balance; } .hero h1 em{font-style:normal;color:var(--fura-red);} .hero__sub{ font-size:clamp(17px,1.5vw,21px); color:var(--ink-2); max-width:54ch;margin:0 auto 36px; text-wrap:pretty;font-weight:400; } .hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} /* ============================================================ WAVY SECTION TRANSITIONS */ .wavebar{ display:block;width:100%;line-height:0; position:relative; margin-top:-1px;margin-bottom:-1px; } .wavebar svg{display:block;width:100%;height:100%;} .wavebar--to-blue{background:var(--fura-cream);height:110px;} .wavebar--to-cream{background:var(--fura-blue);height:110px;} /* ============================================================ HOW IT WORKS (blue, polaroid cards) */ .how{ background:var(--fura-blue); padding:140px 0 100px; position:relative; } .how__head{text-align:center;color:var(--fura-cream);margin:0 auto 64px;max-width:680px;} .how__head .h-section{color:var(--fura-cream);margin:0 0 14px;} .how__head p{color:rgba(250,247,245,.82);font-size:17px;margin:0;font-weight:400;} .steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; align-items:end; } .stepcard{ background:#fff; border-radius:var(--r-lg); padding:38px 32px 32px; box-shadow:var(--shadow-lg); position:relative; transition:transform .25s ease; min-height:340px; display:flex;flex-direction:column; } .stepcard:nth-child(1){transform:rotate(-1.6deg);} .stepcard:nth-child(2){transform:rotate(1.4deg) translateY(-18px);} .stepcard:nth-child(3){transform:rotate(-2.2deg) translateY(6px);} .stepcard:hover{transform:rotate(0) translateY(-10px);} .stepcard__ic{ width:84px;height:84px;border-radius:50%; display:grid;place-items:center; margin-bottom:28px; position:relative; } .stepcard__ic svg{width:40px;height:40px;} .stepcard:nth-child(1) .stepcard__ic{background:var(--fura-blue-50);color:var(--fura-blue);} .stepcard:nth-child(2) .stepcard__ic{background:#fde3e3;color:var(--fura-red);} .stepcard:nth-child(3) .stepcard__ic{background:#e3efe9;color:#1f8a5b;} .stepcard__num{ position:absolute;top:-4px;right:-4px; width:30px;height:30px;border-radius:50%; background:var(--ink);color:#fff; font-size:13px;font-weight:600; display:grid;place-items:center; border:3px solid #fff; } .stepcard h3{ font-size:22px;font-weight:700; margin:0 0 10px;letter-spacing:-.015em;color:var(--ink);line-height:1.2; } .stepcard p{margin:0;color:var(--ink-2);font-size:15.5px;} /* ============================================================ EVENTS (Which language do you speak?) */ .events{padding:90px 0 110px;position:relative;} .events__head{text-align:center;max-width:680px;margin:0 auto 36px;} .events__head h2{ font-size:clamp(28px,3.4vw,42px); font-weight:700;letter-spacing:-.02em; margin:0 0 12px;color:var(--ink); } .events__head p{color:var(--ink-2);font-size:17px;margin:0;} /* flag chips — no labels, just rounded flags */ .langchips{ display:flex;justify-content:center;gap:18px; flex-wrap:wrap;margin:0 auto 48px; } .langchip{ width:60px;height:60px;border-radius:50%; overflow:hidden;cursor:pointer; padding:0;background:#fff; box-shadow:0 0 0 3px #fff, 0 4px 14px -4px rgba(0,30,90,.16); transition:transform .18s ease, box-shadow .18s ease; position:relative; } .langchip img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;} .langchip:hover{transform:translateY(-4px) scale(1.05);} .langchip[aria-pressed="true"]{ box-shadow:0 0 0 4px var(--fura-blue), 0 12px 22px -8px rgba(0,74,173,.45); transform:scale(1.1); } .eventgrid{ display:grid;grid-template-columns:repeat(3, 1fr); gap:24px; } /* language pages: 1 pair card + "more" card → centered 2-up */ .eventgrid--pair{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:780px;margin-left:auto;margin-right:auto; } .eventcard{ display:block; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .eventcard:hover{ transform:translateY(-6px); border-color:var(--fura-blue); box-shadow:0 24px 50px -18px rgba(0,30,90,.22); } .eventcard__media{ aspect-ratio:4/3;overflow:hidden;background:#eee; position:relative; } .eventcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;} .eventcard:hover .eventcard__media img{transform:scale(1.04);} .eventcard__body{padding:22px 22px 24px;} .pair{display:flex;align-items:center;gap:10px;margin-bottom:14px;} .pair__flags{display:flex;align-items:center;gap:6px;} .pair__flag{ width:30px;height:30px;border-radius:50%; overflow:hidden;flex:none; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.08); } .pair__flag img{width:100%;height:100%;object-fit:cover;display:block;} .pair__swap{color:var(--fura-blue-300);display:grid;place-items:center;} .pair__swap svg{width:18px;height:18px;} .pair__tag{ margin-left:auto; background:var(--fura-blue-50);color:var(--fura-blue); border-radius:999px;padding:5px 11px; font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; } .eventcard h3{ font-size:22px;font-weight:700;letter-spacing:-.015em; margin:0 0 6px;color:var(--ink);line-height:1.2; } .eventcard__meta{ color:var(--muted);font-size:14.5px;margin:0 0 18px; } .eventcard__cta{ display:inline-flex;align-items:center;gap:8px; background:var(--fura-blue);color:#fff; padding:11px 18px;border-radius:12px; font-weight:600;font-size:14.5px; transition:.16s; } .eventcard:hover .eventcard__cta{background:var(--fura-blue-700);} .eventcard__cta svg{width:16px;height:16px;} .events__note{ text-align:center;margin-top:40px;color:var(--muted);font-size:15px; } .events__note a{color:var(--fura-blue);font-weight:600;border-bottom:1.5px solid transparent;transition:.15s;} .events__note a:hover{border-color:var(--fura-blue);} /* ============================================================ EXPECT (introvert-friendly) */ .expect{padding:30px 0 110px;} .expect__inner{ display:grid;grid-template-columns:1fr 1.05fr; gap:64px;align-items:center; } .expect__media{ aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden; box-shadow:var(--shadow-md); } .expect__media img, .expect__media video{width:100%;height:100%;object-fit:cover;display:block;} /* stylish video composition */ .expect__stage{ position:relative; display:grid;place-items:center; min-height:600px; } .expect__blob{ position:absolute;z-index:0; width:330px;height:430px; border-radius:46% 54% 60% 40% / 52% 42% 58% 48%; background:linear-gradient(155deg, var(--fura-blue) 0%, #2a64c4 100%); transform:rotate(8deg) translate(26px,4px); } .expect__dot{ position:absolute;z-index:0; width:128px;height:128px;border-radius:50%; background:var(--fura-red); left:6%;bottom:9%; } .expect__peek{ position:absolute;z-index:1; top:18px;right:6%; width:138px;background:#fff; padding:8px 8px 12px;border-radius:10px; box-shadow:var(--shadow-md); transform:rotate(7deg); } .expect__peek img{width:100%;height:110px;object-fit:cover;border-radius:5px;display:block;} .expect__videocard{ position:relative;z-index:2;margin:0; width:288px;background:#fff; padding:12px 12px 16px;border-radius:28px; box-shadow:0 36px 66px -22px rgba(0,40,110,.45); transform:rotate(-3deg); transition:transform .45s cubic-bezier(.2,.7,.2,1); } .expect__videocard:hover{transform:rotate(0);} .expect__videocard video{ width:100%;aspect-ratio:9/16;height:auto; border-radius:18px;object-fit:cover;display:block;background:#000; } .expect__playtag{ position:absolute;left:50%;bottom:34px;transform:translateX(-50%); background:rgba(255,255,255,.96);backdrop-filter:blur(4px); border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700; color:var(--fura-blue);display:flex;align-items:center;gap:7px; box-shadow:var(--shadow-sm);white-space:nowrap; } .bubble--expect{bottom:13%;right:0;--rot:6deg;z-index:3;} .expect h2{ font-size:clamp(32px,4vw,46px);font-weight:700; letter-spacing:-.02em;line-height:1.06;margin:0 0 18px; text-wrap:balance;color:var(--ink); } .expect-list{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:18px;} .expect-list li{ display:flex;gap:14px;align-items:flex-start; font-size:16.5px;color:var(--ink-2); } .expect-list .tick{ flex:none;width:28px;height:28px;border-radius:50%; background:var(--fura-blue-50);color:var(--fura-blue); display:grid;place-items:center;margin-top:2px; } .expect-list .tick svg{width:14px;height:14px;} .expect-list b{color:var(--ink);font-weight:700;} /* ============================================================ COFFEE CHAT (secondary) */ .coffee{padding:0 0 110px;} .coffee__inner{ background:linear-gradient(135deg,#ffd23f 0%, #ff8a5b 60%, var(--fura-red) 110%); color:#fff;border-radius:var(--r-xl); padding:54px 56px; display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center; position:relative;overflow:hidden; } .coffee__tag{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3); border-radius:999px;padding:7px 14px; font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase; margin-bottom:18px; } .coffee h2{ font-size:clamp(28px,3.4vw,40px);font-weight:700; letter-spacing:-.02em;margin:0 0 14px;line-height:1.08; } .coffee p{font-size:16.5px;margin:0 0 26px;max-width:42ch;color:rgba(255,255,255,.95);font-weight:400;} .coffee__cta{ display:inline-flex;align-items:center;gap:8px; background:#fff;color:var(--fura-red); padding:13px 22px;border-radius:999px;font-weight:600;font-size:15px; transition:.16s; } .coffee__cta:hover{transform:translateX(4px);} .match{ background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); border-radius:20px;padding:22px; } .match__row{display:flex;align-items:center;gap:14px;} .match__av{ width:48px;height:48px;border-radius:50%; background-size:cover;background-position:center; border:2.5px solid rgba(255,255,255,.6);flex:none; } .match__who b{display:block;font-size:15px;font-weight:600;} .match__who small{color:rgba(255,255,255,.85);font-size:13px;} .match__link{ margin:12px 24px;height:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 6px, transparent 6px 12px); } .match__when{ margin-top:14px;background:rgba(255,255,255,.22); border-radius:12px;padding:11px 14px; font-weight:600;font-size:14px;text-align:center; } /* ============================================================ REVIEWS */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;} .review{ background:#fff;border-radius:var(--r-lg);padding:28px; border:1px solid var(--line);box-shadow:var(--shadow-sm); display:flex;flex-direction:column;gap:18px; } .review .stars{color:#e6a700;letter-spacing:1px;font-size:15px;} .review p{margin:0;color:var(--ink-2);font-size:15.5px;text-wrap:pretty;flex:1;font-weight:400;} .review__who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px;} .review__av{position:relative;width:48px;height:48px;border-radius:50%;background-size:cover;background-position:center;flex:none;} .review__flag{ position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%; background:#fff;border:2.5px solid #fff;overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.18); } .review__flag img{width:100%;height:100%;object-fit:cover;display:block;} .review__who b{display:block;font-size:15px;font-weight:600;} .review__who small{color:var(--muted);font-size:13px;} /* ============================================================ FINAL CTA */ .finalcta{ background:var(--fura-blue); color:var(--fura-cream); border-radius:var(--r-xl); padding:72px 64px;text-align:center;position:relative;overflow:hidden; margin-top:64px; } .finalcta h2{ font-size:clamp(30px,4vw,46px); margin:0 0 14px;font-weight:700;letter-spacing:-.02em;color:var(--fura-cream); } .finalcta p{font-size:18px;max-width:50ch;margin:0 auto 30px;color:rgba(250,247,245,.85);font-weight:400;} .finalcta .btn--primary{background:var(--fura-cream);color:var(--fura-blue);} .finalcta .btn--primary:hover{background:#fff;} .finalcta__shape{position:absolute;border-radius:50%;opacity:.16;} .finalcta__shape.a{background:var(--fura-red);width:280px;height:280px;top:-90px;left:-60px;} .finalcta__shape.b{background:#ffd23f;width:200px;height:200px;bottom:-70px;right:-40px;} /* ============================================================ FOOTER */ .footer{background:#0a0907;color:#a39c93;padding:64px 0 40px;margin-top:80px;} .footer .brand{color:#fff;margin-bottom:14px;} .footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;} .footer p.tag{color:#7a736b;max-width:32ch;font-size:14.5px;font-weight:400;} .footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 16px;font-weight:600;} .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;} .footer a{color:#a39c93;font-size:14.5px;font-weight:400;} .footer a:hover{color:#fff;} .footer__bot{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;color:#5e5750;font-size:13px;} /* ============================================================ RESPONSIVE */ @media (max-width:1000px){ .section, .events, .expect, .coffee{padding-top:64px;padding-bottom:64px;} .nav__links{display:none;} .burger{display:inline-flex;} .nav__seat{display:none;} /* moved into the burger drawer */ .eventgrid{grid-template-columns:1fr;} .steps{grid-template-columns:1fr;gap:28px;} .stepcard:nth-child(n){transform:none;} .expect__inner{grid-template-columns:1fr;gap:32px;} /* stylish video composition — tighten for tablet/mobile, keep it clean */ .expect__stage{min-height:auto;padding:40px 0 24px;} .expect__videocard{width:248px;} .expect__blob{width:280px;height:360px;transform:rotate(8deg) translate(20px,4px);} .expect__dot{width:96px;height:96px;left:10%;bottom:6%;} .expect__peek{display:none;} .bubble--expect{display:none;} .coffee__inner{grid-template-columns:1fr;padding:36px;} .reviews{grid-template-columns:1fr;} .footer__top{grid-template-columns:1fr 1fr;} .finalcta{padding:48px 28px;} .wavebar--to-blue,.wavebar--to-cream{height:96px;} .photostrip:not(.photostrip--two) .polaroid img{width:170px;height:130px;} .photostrip--two .polaroid img{width:200px;height:150px;} .photostrip .polaroid{padding:7px 7px 18px;margin:0 -16px;} } @media (max-width:760px){ .nav__inner{height:66px;gap:8px;} .brand{height:34px;gap:5px;} .brand__mark{height:28px;width:28px;} .brand__word{font-size:20px;} .nav__cta{gap:8px;} .langdrop__trigger{padding:5px 10px 5px 5px;gap:7px;} .langdrop__trigger .flagdisc{width:26px;height:26px;} .langdrop__trigger #langdrop-label{display:inline;font-size:14px;font-weight:600;} .langdrop__menu{min-width:170px;right:0;} .burger{width:38px;height:38px;border-radius:10px;} .burger svg{width:22px;height:22px;} } @media (max-width:560px){ .wrap{padding:0 20px;} .footer__top{grid-template-columns:1fr;} /* Flag chips: horizontal scroll, with breathing room so the active ring doesn't get clipped. Scrollbar hidden. */ .langchips{ display:flex;justify-content:flex-start;align-items:center; gap:16px; padding:16px 4px; overflow-x:auto; overflow-y:visible; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity; } .langchips::-webkit-scrollbar{display:none;} .langchip{flex:none;scroll-snap-align:center;} /* Active state: ring rendered via border so it stays inside the chip's bounds */ .langchip[aria-pressed="true"]{ transform:none; box-shadow:0 0 0 3px var(--fura-blue), 0 6px 12px -4px rgba(0,74,173,.35); } .langchip:hover{transform:translateY(-3px) scale(1.03);} .photostrip:not(.photostrip--two) .polaroid img{width:120px;height:92px;} .photostrip--two .polaroid img{width:135px;height:104px;} .photostrip:not(.photostrip--two) .polaroid:nth-child(2){transform:rotate(2deg) translateY(-10px);} .photostrip .polaroid{padding:6px 6px 14px;margin:0 -10px;} .wavebar--to-blue,.wavebar--to-cream{height:80px;} /* Hero — reasonable mobile sizing */ .hero{padding:48px 0 80px;} .hero h1{font-size:44px;line-height:1.04;margin-bottom:18px;} .hero__sub{font-size:16px;margin-bottom:24px;} .hero__cta{flex-direction:column;gap:10px;} .hero__cta .btn{width:100%;justify-content:center;} /* hero bubbles — compact, stay tucked at the top corners */ .bubble{font-size:13.5px;padding:9px 16px 9px 14px;border-radius:22px 22px 22px 8px;} .bubble--right{border-radius:22px 22px 8px 22px;} .bubble__dot{width:10px;height:10px;} .bubble--hero-jp{top:14px;left:8px;} .bubble--hero-fr{top:14px;right:8px;} .bubble--hero-en,.bubble--hero-es{display:none;} /* Mobile step cards: lighter rotations, keep some delight */ .stepcard:nth-child(1){transform:rotate(-1.2deg);} .stepcard:nth-child(2){transform:rotate(1deg);} .stepcard:nth-child(3){transform:rotate(-1.4deg);} .stepcard:hover{transform:rotate(0) translateY(-4px);} /* Mobile reviews: keep the CSS marquee auto-scroll (no manual control). */ .rcard{width:280px;} } /* Step cards: visible immediately (no opacity reveal — editor instrumentation interferes with opacity transitions on the parent). The rotation + hover IS the delight; no entrance animation needed for them. */ /* Flag chip hover lift */ .langchip{will-change:transform;} .langchip:hover{transform:translateY(-6px) scale(1.05);} /* Button micro-bounce on hover */ .btn--primary{will-change:transform;} .btn--primary:active{transform:translateY(0) scale(.98);} /* FAQ item hover state */ .faq__item:hover{border-color:var(--fura-blue-300);} /* ============================================================ REVEAL ON SCROLL */ .reveal{ opacity:0;transform:translateY(34px) scale(.99); transition:opacity .75s cubic-bezier(.16,.84,.3,1), transform .75s cubic-bezier(.16,.84,.3,1); will-change:opacity, transform; } .reveal.is-visible{opacity:1;transform:translateY(0) scale(1);} .reveal[data-delay="1"]{transition-delay:.08s;} .reveal[data-delay="2"]{transition-delay:.16s;} .reveal[data-delay="3"]{transition-delay:.24s;} .reveal[data-delay="4"]{transition-delay:.32s;} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} } /* Hero is visible immediately. Subtle scroll reveals are handled via the .reveal pattern on lower sections. */ /* ============================================================ REVIEWS MARQUEE */ .reviewmarquee{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); padding:18px 0 28px; margin-top:14px; } .reviewmarquee__track{ display:flex;gap:18px;width:max-content; animation:rscroll 60s linear infinite; } .reviewmarquee:hover .reviewmarquee__track{animation-play-state:paused;} @keyframes rscroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } .rcard{ flex:none;width:340px; background:#fff;border-radius:var(--r-lg); padding:24px 24px 22px; box-shadow:0 8px 24px -10px rgba(0,30,90,.10), 0 1px 2px rgba(0,0,0,.03); display:flex;flex-direction:column;gap:14px; } .rcard .stars{color:#e6a700;letter-spacing:2px;font-size:22px;line-height:1;} .rcard__quote{color:var(--ink);font-size:15.5px;font-weight:500;margin:0;line-height:1.55;} .rcard__og{color:var(--muted);font-size:13.5px;font-style:italic;margin:0;line-height:1.5;} .rcard__who{display:flex;align-items:center;gap:11px;border-top:1px solid #f0ebe3;padding-top:14px;margin-top:auto;} .rcard__flag{ width:34px;height:34px;border-radius:50%;overflow:hidden; box-shadow:0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.08);flex:none; } .rcard__flag img{width:100%;height:100%;object-fit:cover;display:block;} .rcard__who b{font-size:14.5px;font-weight:600;color:var(--ink);display:block;line-height:1.15;} .rcard__who span{color:var(--muted);font-size:13px;display:block;line-height:1.3;margin-top:1px;} .reviews__lead{ font-size:15px;color:var(--ink-2);margin:8px auto 0;max-width:50ch; } .trustline{ font-size:15.5px;color:var(--ink-2); margin:30px auto 0; display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center; text-align:center; } .trustline b{color:var(--ink);} .trustline__stars{color:var(--fura-red);letter-spacing:2px;font-size:17px;} /* ============================================================ EVENT GRID — 2 cards + "more pairs" */ .eventcard--more{ background:linear-gradient(160deg, var(--fura-blue) 0%, var(--fura-blue-700) 100%); color:var(--fura-cream); border:1.5px solid transparent; border-radius:var(--r-lg); display:flex;flex-direction:column;justify-content:space-between; padding:30px;text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; overflow:hidden;position:relative; } .eventcard--more:hover{transform:translateY(-6px);box-shadow:0 28px 50px -20px rgba(0,30,90,.45);} .eventcard--more h3{ font-size:22px;font-weight:700;color:var(--fura-cream); margin:0 0 10px;letter-spacing:-.015em;line-height:1.2; } .eventcard--more p{color:rgba(250,247,245,.85);font-size:15px;margin:0 0 22px;} .eventcard--more .flagcloud{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;} .eventcard--more .flagcloud img{ width:38px;height:38px;border-radius:50%; box-shadow:0 0 0 2.5px rgba(255,255,255,.5); } .eventcard--more .morecta{ background:var(--fura-cream);color:var(--fura-blue); padding:12px 18px;border-radius:12px;font-weight:600;font-size:14.5px; align-self:flex-start; display:inline-flex;align-items:center;gap:8px; } .eventcard__city{ display:inline-flex;align-items:center;gap:5px; color:var(--muted);font-size:13.5px;font-weight:500; margin-bottom:4px; } .eventcard__city svg{width:13px;height:13px;flex:none;} /* ============================================================ FAQ */ .faq{padding:60px 0 90px;} .faq__head{text-align:center;margin-bottom:36px;} .faq__head .eyebrow{margin-bottom:10px;} .faq__head h2{font-size:clamp(28px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--ink);} .faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;} .faq__item{ background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; } .faq__item[open]{border-color:var(--fura-blue-300);box-shadow:var(--shadow-sm);} .faq__item summary{ cursor:pointer;font-weight:600;font-size:16px;color:var(--ink); padding:18px 22px;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:14px; } .faq__item summary::-webkit-details-marker{display:none;} .faq__item summary::after{ content:'+';font-weight:300;font-size:26px;color:var(--fura-blue);line-height:1; width:24px;height:24px;display:grid;place-items:center; transition:transform .25s ease;flex:none; } .faq__item[open] summary::after{transform:rotate(45deg);} .faq__body{padding:0 22px 20px;color:var(--ink-2);font-size:15.5px;line-height:1.6;}