:root{ --cream-100:#F6EEDB; --cream-200:#F2E8D0; --cream-300:#E9DEBE; --teal-900:#0F2B33; --teal-800:#143540; --teal-700:#1A4350; --teal-600:#22525F; --gold-600:#B68A4A; --gold-500:#C9A05A; --gold-300:#E0BE83; --ink:#13313A; --paper-shadow: 0 1px 0 rgba(15,43,51,.04), 0 30px 60px -30px rgba(15,43,51,.18); } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} /* Reserve gutter for the scrollbar so locking body-scroll (mobile menu) doesn't shift the page. */ html{scroll-behavior:smooth;scrollbar-gutter:stable} body{ font-family:'Manrope',ui-sans-serif,system-ui,sans-serif; font-size:17px;line-height:1.6;color:var(--ink); background:var(--cream-200); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--gold-500);color:var(--cream-100)} /* paper grain */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:1; background-image:url("data:image/svg+xml;utf8,"); opacity:.3;mix-blend-mode:multiply; } h1,h2,h3,h4{ font-family:'Fraunces','Cormorant Garamond',Georgia,serif; font-weight:500;color:var(--teal-900); font-variation-settings:"opsz" 144,"SOFT" 30; letter-spacing:-.01em;margin:0; } .eyebrow{ font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:600; letter-spacing:.32em;text-transform:uppercase;color:var(--gold-600); display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before,.eyebrow::after{content:"";width:18px;height:1px;background:currentColor;opacity:.5} .eyebrow.solo::before,.eyebrow.solo::after{display:none} .container{width:min(1280px,100% - 3rem);margin-inline:auto} .wide{width:min(1500px,100% - 2rem);margin-inline:auto} /* ============================================================ HEADER */ header.site{ position:fixed;top:0;left:0;right:0;z-index:50; transition:background .4s ease, box-shadow .4s ease, padding .4s ease; padding:1.4rem 0; } header.site.scrolled{ background:rgba(242,232,208,.92); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); box-shadow:0 1px 0 rgba(15,43,51,.07); padding:.6rem 0; } .nav-row{display:flex;align-items:center;justify-content:space-between;gap:2rem} /* SVG logo — inlined as at top of ; 'd here. Inside the symbol fill="currentColor", so CSS color drives the paint. Default state (header is transparent over the hero photo): paint cream so it reads on dark. Scrolled state (header gains the cream backdrop): paint deep teal for contrast on cream. */ .brand{display:inline-flex;align-items:center;text-decoration:none} .logo-mark{ display:block; height:72px; width:auto; aspect-ratio:1195/896; color:var(--cream-100); filter:drop-shadow(0 4px 14px rgba(15,43,51,.55)); transition:height .4s ease, color .35s ease, filter .35s ease; overflow:visible; } .logo-mark use{fill:currentColor} header.site.scrolled .logo-mark{ height:54px; color:var(--teal-900); filter:drop-shadow(0 1px 0 rgba(15,43,51,.06)); } .logo-mark.light{color:var(--cream-100);filter:none} @media (max-width:920px){.logo-mark{height:56px}} nav.primary{display:flex;align-items:center;gap:.2rem} nav.primary a{ position:relative;padding:.6rem 1.05rem; font-size:.93rem;color:var(--teal-900); font-weight:500;letter-spacing:.01em; transition:color .3s ease;border-radius:999px; } nav.primary a::after{ content:"";position:absolute;left:1.05rem;right:1.05rem;bottom:.4rem; height:1px;background:var(--gold-500); transform-origin:left;transform:scaleX(0); transition:transform .45s cubic-bezier(.7,.05,.2,1); } nav.primary a:hover{color:var(--teal-700)} nav.primary a:hover::after{transform:scaleX(1)} nav.primary a.active{ background:var(--teal-800);color:var(--cream-100); } nav.primary a.active::after{display:none} nav.primary a.cta{ background:var(--teal-800);color:var(--cream-100); margin-left:.6rem;padding:.7rem 1.3rem; transition:background .3s ease, transform .3s ease; } nav.primary a.cta:hover{background:var(--teal-900);transform:translateY(-1px)} nav.primary a.cta::after{display:none} .hamburger{display:none;width:46px;height:46px;border-radius:999px;border:1px solid rgba(15,43,51,.14);align-items:center;justify-content:center} .hamburger span,.hamburger span::before,.hamburger span::after{display:block;width:18px;height:1.4px;background:var(--teal-900)} .hamburger span{position:relative} .hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0} .hamburger span::before{top:-5px} .hamburger span::after{top:5px} @media (max-width:920px){ nav.primary{display:none} .hamburger{display:inline-flex} } /* ============================================================ NAV CLUSTER + LANGUAGE SWITCHER */ .nav-cluster{display:flex;align-items:center;gap:1.6rem} @media (max-width:920px){.nav-cluster{gap:.8rem}} .lang-switch{ display:inline-flex;align-items:center;gap:.55rem; font-family:'Manrope',sans-serif; font-size:.72rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase; user-select:none; } .lang-btn{ position:relative; padding:.4rem .25rem .55rem; background:none;border:none;cursor:pointer; font:inherit;letter-spacing:inherit;text-transform:inherit; color:rgba(15,43,51,.32); font-weight:500; transition:color .35s ease, font-weight .35s ease; } .lang-btn::after{ content:"";position:absolute;left:.25rem;right:.25rem;bottom:.22rem; height:2px;background:var(--gold-500);border-radius:1px; transform:scaleX(0);transform-origin:left; transition:transform .45s cubic-bezier(.7,.05,.2,1); } .lang-btn:hover{color:var(--teal-700)} .lang-btn:hover::after{transform:scaleX(1)} .lang-btn.active{color:var(--teal-900);font-weight:700} .lang-btn.active::after{transform:scaleX(1)} .lang-btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:2px} .lang-sep{color:rgba(15,43,51,.2);font-weight:400;line-height:1} @media (max-width:920px){ .lang-switch{font-size:.68rem;gap:.4rem;letter-spacing:.18em} } /* When header is transparent over the photo hero — light text for legibility */ header.site:not(.scrolled) nav.primary a:not(.active):not(.cta){ color:rgba(246,238,219,.85); text-shadow:0 1px 6px rgba(15,43,51,.45); } header.site:not(.scrolled) nav.primary a:not(.active):not(.cta):hover{color:var(--cream-100)} header.site:not(.scrolled) nav.primary a::after{background:var(--gold-300)} header.site:not(.scrolled) .lang-btn{ color:rgba(246,238,219,.5); text-shadow:0 1px 6px rgba(15,43,51,.45); } header.site:not(.scrolled) .lang-btn:hover{color:rgba(246,238,219,.95)} header.site:not(.scrolled) .lang-btn.active{color:var(--cream-100)} header.site:not(.scrolled) .lang-sep{color:rgba(246,238,219,.4)} header.site:not(.scrolled) .lang-btn::after{background:var(--gold-300)} /* ============================================================ SKIP LINK */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--teal-900);color:var(--cream-100); font-family:'Manrope',sans-serif; font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; padding:.95rem 1.4rem;border-radius:0 0 6px 0; text-decoration:none; } .skip-link:focus{left:0;outline:2px solid var(--gold-500);outline-offset:-2px} /* ============================================================ HAMBURGER (open state) */ .hamburger span, .hamburger span::before, .hamburger span::after{ transition:transform .3s ease, top .3s ease, background .25s ease; } .hamburger.open span{background:transparent} .hamburger.open span::before{top:0;transform:rotate(45deg)} .hamburger.open span::after{top:0;transform:rotate(-45deg)} /* Hamburger contrast over the photo (transparent header) */ header.site:not(.scrolled) .hamburger{border-color:rgba(246,238,219,.4)} header.site:not(.scrolled) .hamburger span, header.site:not(.scrolled) .hamburger span::before, header.site:not(.scrolled) .hamburger span::after{background:var(--cream-100)} header.site:not(.scrolled) .hamburger.open span{background:transparent} /* ============================================================ MOBILE MENU */ .mobile-menu{ position:fixed;top:0;left:0;right:0;bottom:0; z-index:40; background:linear-gradient(180deg, rgba(15,43,51,.97) 0%, rgba(20,53,64,.96) 100%); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); padding:7rem 2rem 3rem; visibility:hidden;opacity:0; transform:translateY(-12px); transition:opacity .35s ease, transform .4s cubic-bezier(.2,.6,.2,1), visibility 0s linear .4s; } .mobile-menu.open{ visibility:visible;opacity:1;transform:translateY(0); transition:opacity .35s ease, transform .4s cubic-bezier(.2,.6,.2,1), visibility 0s linear 0s; } .mobile-menu ul{ list-style:none;margin:0 auto;padding:0; max-width:360px; display:flex;flex-direction:column; } .mobile-menu li{border-bottom:1px solid rgba(246,238,219,.1)} .mobile-menu li:first-child{border-top:1px solid rgba(246,238,219,.1)} .mobile-menu a{ display:flex;align-items:center;justify-content:space-between; padding:1.4rem .25rem; font-family:'Fraunces',serif;font-weight:400; font-size:1.6rem;color:var(--cream-100); text-decoration:none;letter-spacing:-.005em; font-variation-settings:"opsz" 144,"SOFT" 30; transition:color .3s ease, padding-left .35s ease; } .mobile-menu a::after{ content:"";width:18px;height:1px;background:rgba(224,190,131,.6); transition:width .35s ease, background .3s ease; } .mobile-menu a:hover, .mobile-menu a:focus-visible{ color:var(--gold-300);padding-left:.5rem; } .mobile-menu a:hover::after, .mobile-menu a:focus-visible::after{ width:34px;background:var(--gold-300); } @media (min-width:921px){ .mobile-menu{display:none} } /* ============================================================ HERO (photo) */ .hero{ position:relative; min-height:92vh; display:flex;align-items:center;justify-content:center; padding:8rem 1.5rem 8rem; color:var(--cream-100); text-align:center; isolation:isolate; overflow:hidden; } .hero .bg, .hero .bg::after{position:absolute;inset:0} .hero .bg{ z-index:-2; background-color:#1A4350; background-image:url("moorea-hero.jpg"); background-size:cover; background-position:center 38%; transform:scale(1.04); animation:slowZoom 24s ease-in-out infinite alternate; will-change:transform; } @keyframes slowZoom{ from{transform:scale(1.04)} to{transform:scale(1.12)} } .hero .bg::after{ content:"";z-index:-1; background: radial-gradient(ellipse at center, rgba(15,43,51,.18) 0%, rgba(15,43,51,.62) 80%), linear-gradient(180deg, rgba(15,43,51,.45) 0%, transparent 28%, transparent 60%, rgba(15,43,51,.6) 100%); } .hero h1{ font-family:'Fraunces',serif; color:var(--cream-100); font-weight:400; font-size:clamp(2.6rem,7vw,6rem); line-height:1;letter-spacing:.005em; text-transform:uppercase; text-shadow:0 6px 24px rgba(15,43,51,.4); font-variation-settings:"opsz" 144,"SOFT" 30; max-width:14ch;margin-inline:auto; } .hero .sub{ margin-top:1.6rem; font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.05rem,1.6vw,1.4rem); color:rgba(246,238,219,.92); font-weight:300; letter-spacing:.02em; font-variation-settings:"opsz" 144,"SOFT" 100; } /* CTA */ .hero .cta-row{ margin-top:2.4rem; display:flex;flex-direction:column;align-items:center;gap:1rem; } .btn-explore{ display:inline-flex;align-items:center;gap:1rem; background:var(--cream-100);color:var(--teal-900); padding:1.05rem 1.6rem 1.05rem 2rem; border-radius:999px; font-size:.78rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase; box-shadow:0 12px 28px -10px rgba(0,0,0,.45); transition:transform .3s ease, box-shadow .3s ease, background .3s ease; } .btn-explore:hover{transform:translateY(-2px);background:#FFF8E6;box-shadow:0 18px 40px -12px rgba(0,0,0,.55)} .btn-explore .ico{ width:30px;height:30px;border-radius:999px;background:var(--teal-900);color:var(--cream-100); display:grid;place-items:center; } .btn-explore .ico svg{display:block} .placeholder-pill{ display:inline-flex;align-items:center;gap:.7rem; padding:.5rem 1rem;border-radius:999px; background:rgba(246,238,219,.12); border:1px solid rgba(246,238,219,.3); backdrop-filter:blur(8px); color:rgba(246,238,219,.92); font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase; } .placeholder-pill .dot{width:7px;height:7px;border-radius:999px;background:var(--gold-500);box-shadow:0 0 0 4px rgba(201,160,90,.25);animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{50%{box-shadow:0 0 0 9px rgba(201,160,90,0)}} /* hero corner ornaments */ .hero .corner{ position:absolute;color:var(--cream-100);opacity:.55;pointer-events:none; } .hero .corner.tl{top:9.5rem;left:2.4rem} .hero .corner.tr{top:9.5rem;right:2.4rem;transform:scaleX(-1)} .hero .corner.bl{bottom:9rem;left:2.4rem;transform:scaleY(-1)} .hero .corner.br{bottom:9rem;right:2.4rem;transform:scale(-1,-1)} @media (max-width:780px){.hero .corner{display:none}} /* hero side captions (editorial details) */ .hero .caption{ position:absolute;color:rgba(246,238,219,.8); font-family:'Manrope',sans-serif;font-size:.68rem; letter-spacing:.32em;text-transform:uppercase; display:flex;align-items:center;gap:.8rem; } .hero .caption.left{left:1.6rem;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center} .hero .caption.right{right:1.6rem;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center} @media (max-width:1100px){.hero .caption{display:none}} /* scroll cue */ .hero .scroll-cue{ position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%); color:rgba(246,238,219,.7);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase; display:flex;flex-direction:column;align-items:center;gap:.6rem; } .hero .scroll-cue::after{ content:"";width:1px;height:46px;background:rgba(246,238,219,.5); animation:cue 2.2s ease-in-out infinite; transform-origin:top; } @keyframes cue{ 0%,100%{transform:scaleY(.3);opacity:.4} 50%{transform:scaleY(1);opacity:1} } /* ============================================================ EXPERIENCES (overlapping cards) */ section.experiences{ position:relative; padding:0 0 6rem; margin-top:-7rem; /* overlap onto hero like mockup */ z-index:5; } .cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem; } @media (max-width:980px){ .cards{grid-template-columns:1fr} section.experiences{margin-top:-5rem} } .card{ position:relative; background:var(--cream-100); border-radius:6px;overflow:hidden; box-shadow:0 30px 60px -28px rgba(15,43,51,.45), 0 1px 0 rgba(15,43,51,.05); display:flex;flex-direction:column; transition:transform .55s cubic-bezier(.2,.6,.2,1), box-shadow .55s ease; } .card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(15,43,51,.06), 0 50px 80px -30px rgba(15,43,51,.5)} .card .photo{ aspect-ratio:5/4; background:#143540 center/cover no-repeat; position:relative;overflow:hidden; } .card .photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, transparent 50%, rgba(15,43,51,.45) 100%); } .card .photo img{ width:100%;height:100%;object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.6,.2,1); } .card:hover .photo img{transform:scale(1.06)} .card .tag{ position:absolute;top:1rem;left:1rem;z-index:2; font-size:.62rem;letter-spacing:.24em;text-transform:uppercase; color:var(--cream-100); background:rgba(15,43,51,.55); backdrop-filter:blur(4px); padding:.42rem .72rem;border-radius:999px; font-weight:600; } .card .body{padding:1.7rem 1.7rem 1.9rem;display:flex;flex-direction:column;flex:1} .card .num{ font-family:'Fraunces',serif;font-style:italic;font-weight:300; color:var(--gold-600);font-size:.85rem;letter-spacing:.14em; margin-bottom:.4rem; } .card h3{ font-size:1.65rem;font-weight:500;letter-spacing:-.01em; margin:0 0 .55rem; } .card p{color:var(--teal-700);margin:0 0 1.4rem;font-size:.96rem} .card .more{ margin-top:auto; display:inline-flex;align-items:center;gap:.55rem; font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--teal-900); } .card .more .arr{display:inline-block;width:24px;height:1px;background:currentColor;position:relative;transition:width .4s ease} .card .more .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)} .card:hover .more .arr{width:36px} /* ============================================================ MARQUEE */ .ribbon{ position:relative; margin:1rem 0 0; padding:1.4rem 0; border-top:1px solid rgba(15,43,51,.14); border-bottom:1px solid rgba(15,43,51,.14); overflow:hidden; } .ribbon-track{display:flex;gap:3rem;white-space:nowrap;animation:slide 38s linear infinite;will-change:transform} .ribbon span{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1.55rem;color:var(--teal-700);display:inline-flex;align-items:center;gap:1.4rem} .ribbon span::after{content:"";display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--gold-500)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ STORY */ section.story{padding:7rem 0 7rem;position:relative} /* a printed-stamp / letterhead treatment for the real logo, where its rectangular cream form looks deliberate */ .brand-stamp{ display:inline-block; width:170px; margin:0 0 2rem; padding:.55rem; background:var(--cream-100); border:1px solid rgba(15,43,51,.12); border-radius:4px; box-shadow: 0 1px 0 rgba(15,43,51,.05), 0 18px 36px -16px rgba(15,43,51,.32), 0 30px 60px -28px rgba(15,43,51,.22); transform:rotate(-2.2deg); transform-origin:bottom left; transition:transform .6s cubic-bezier(.2,.6,.2,1); } .brand-stamp{position:relative} .brand-stamp img{display:block;width:100%;height:auto;border-radius:2px} .brand-stamp:hover{transform:rotate(-1deg) translateY(-2px)} @media (max-width:980px){.brand-stamp{width:140px}} .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center} @media (max-width:980px){.story-grid{grid-template-columns:1fr;gap:3rem}} .story h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;font-weight:400;margin:1rem 0 1.6rem} .story h2 em{font-style:italic;color:var(--teal-700);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 100} .story p{color:var(--teal-700);font-size:1.04rem;max-width:46ch} .story .mark{display:inline-flex;align-items:center;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(15,43,51,.14);font-family:'Fraunces',serif;font-style:italic;color:var(--teal-900)} .story .mark .sig{font-size:1.4rem} .story .mark .who{font-family:'Manrope',sans-serif;font-style:normal;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600);font-weight:600} .story .panel{ position:relative;aspect-ratio:1/1.05;border-radius:8px; background:var(--teal-900);overflow:hidden; box-shadow:0 30px 80px -20px rgba(15,43,51,.4); isolation:isolate; } .story .panel img{ width:100%;height:100%;display:block; object-fit:cover;object-position:center; transition:transform 1.6s cubic-bezier(.2,.6,.2,1); } .story .panel:hover img{transform:scale(1.03)} .story .panel::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(15,43,51,.45) 0%, transparent 18%, transparent 70%, rgba(15,43,51,.55) 100%); } .story .panel .map-overlay{ position:absolute;top:1.6rem;left:0;right:0;text-align:center;z-index:2; color:var(--cream-100); text-shadow:0 2px 12px rgba(15,43,51,.6); } .story .panel .map-title{ display:block; font-family:'Fraunces',serif;font-style:italic;font-weight:400; font-size:1.4rem;letter-spacing:.6em; font-variation-settings:"opsz" 144,"SOFT" 100; padding-left:.6em; } .story .panel .map-coords{ display:block; margin-top:.7rem; font-family:'Manrope',sans-serif;font-size:.66rem;font-weight:600; letter-spacing:.42em;color:var(--gold-300); } .story .panel .map-credit{ position:absolute;bottom:.7rem;right:1rem;z-index:2; font-family:'Manrope',sans-serif;font-size:.6rem; letter-spacing:.18em;text-transform:uppercase; color:rgba(246,238,219,.6); } .story .panel .pin{ position:absolute;bottom:6.5%;left:6%;z-index:3; background:var(--cream-100);color:var(--teal-900); border-radius:4px;padding:.55rem .85rem; box-shadow:0 6px 16px -8px rgba(15,43,51,.45); font-family:'Fraunces',serif;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase; transform:rotate(-3deg); border:1px solid rgba(15,43,51,.12); } /* ============================================================ FOOTER */ footer.site{ background:var(--teal-900);color:var(--cream-100); padding:5rem 0 2rem;position:relative;overflow:hidden; } footer.site::before{ content:"";position:absolute;inset:0; background-image:url("data:image/svg+xml;utf8,"); pointer-events:none; } .foot-grid{ display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.6rem; margin-bottom:3rem;position:relative; } @media (max-width:880px){ .foot-grid{grid-template-columns:1fr 1fr;gap:2rem} .foot-grid .col-brand{grid-column:1/-1} } .col-brand p{max-width:34ch;color:rgba(246,238,219,.7);margin:1.4rem 0 0;font-size:.94rem} .foot-grid h4{font-family:'Manrope',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300);margin:0 0 1rem} .foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem} .foot-grid a, .foot-grid li{font-size:.95rem;color:rgba(246,238,219,.85);transition:color .3s} .foot-grid a:hover{color:var(--cream-100)} .colophon{ border-top:1px solid rgba(246,238,219,.14); padding-top:1.6rem; display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem; color:rgba(246,238,219,.55);font-size:.82rem; position:relative; } .colophon a{color:rgba(246,238,219,.85);text-decoration:underline;text-decoration-color:rgba(246,238,219,.2);text-underline-offset:3px} .colophon a:hover{color:var(--cream-100)} /* ============================================================ ANIMATION */ /* Reveal-on-scroll: only hide initially when JS is on; without JS, content stays visible. */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1)} .js .reveal.in{opacity:1;transform:translateY(0)} .reveal.delay-1{transition-delay:.12s} .reveal.delay-2{transition-delay:.24s} .reveal.delay-3{transition-delay:.36s} .reveal.delay-4{transition-delay:.48s} .reveal.delay-5{transition-delay:.6s} @media (prefers-reduced-motion:reduce){ .ribbon-track, .hero .bg, .hero .scroll-cue::after{animation:none} .js .reveal{opacity:1;transform:none;transition:none} .mobile-menu{transition:opacity .01s, visibility 0s} }