.st_chapter { position: relative; height: calc(100vh * (var(--n, 6) * 0.9 + 1)); background-color: #121212; } .st_pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background-color: #121212; color: #ffffff; } .st_stage { position: absolute; inset: 0; z-index: 0; } .st_ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .st_beat { position: absolute; left: 2.5vw; bottom: 10vh; width: 46vw; visibility: hidden; } .st_beat[data-w="wide"] { width: 62vw; } .st_beat[data-pos="top"] { bottom: auto; top: 17vh; } .st_beat[data-pos="right"] { left: auto; right: 2.5vw; width: 36vw; } .st_label { margin: 0 0 3.2vh; color: #b4b4b8; text-shadow: 0 0 18px rgba(4, 4, 5, 0.8); } .st_h { position: relative; isolation: isolate; margin: 0; font-size: 5.1vw; line-height: 0.96; letter-spacing: -0.062em; font-weight: 400; } .st_line { padding-bottom: 0.12em; margin-bottom: -0.12em; } .st_glow { position: absolute; inset: -0.45em -0.7em -0.5em; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(4, 4, 5, 0.6), rgba(4, 4, 5, 0.3) 58%, rgba(4, 4, 5, 0) 100%); transition: background 0.35s ease; } .cp11.is-light .st_glow { background: radial-gradient(closest-side, rgba(241, 241, 243, 0.62), rgba(241, 241, 243, 0.3) 58%, rgba(241, 241, 243, 0) 100%); } .st_sub { max-width: 31vw; margin: 3.6vh 0 0; color: #d0d0d4; text-align: left; text-shadow: 0 0 18px rgba(4, 4, 5, 0.8); } .st_links { display: flex; align-items: center; gap: 1.4vw; margin-top: 4.4vh; pointer-events: auto; } .st_links a { pointer-events: auto; } .st_meta { display: grid; gap: 0.7vh; margin-top: 3.4vh; color: #e6e6e8; text-shadow: 0 0 18px rgba(4, 4, 5, 0.8); } .st_meta p { display: grid; grid-template-columns: 11em 1fr; gap: 1em; margin: 0; } .st_meta span { color: #8a8a90; } .st_steps { display: grid; text-align: left; gap: 1.1vh; max-width: 40vw; margin: 3.6vh 0 0; padding: 0; list-style: none; text-shadow: 0 0 18px rgba(4, 4, 5, 0.8); } .st_steps li { display: grid; grid-template-columns: 2.4em 15em 1fr; gap: 0.6em; align-items: baseline; color: #77777d; transition: color 0.6s ease; } .st_steps b { font-weight: 400; } .st_steps i { font-style: normal; color: #55555a; transition: color 0.6s ease; } .st_steps li.is-on { color: #ffffff; } .st_steps li.is-on i { color: #a4a4aa; } .st_count { position: absolute; right: 2.5vw; bottom: 4.6vh; margin: 0; color: #5a5a5e; } .st_count b { font-weight: 400; color: #ffffff; } .st_fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 75% 85% at 0% 100%, rgba(4, 4, 5, 0.88) 0%, rgba(4, 4, 5, 0.5) 42%, rgba(4, 4, 5, 0) 78%); } .cp11 { position: relative; background-color: #121212; color: #ffffff; } .cp11 + .footer { position: relative; z-index: 4; margin-top: -100vh; margin-top: -100dvh; background-color: #121212; } .cp11 .st_chapter { height: calc(100vh * (var(--n, 14) * var(--per, 1.15) + 2)); } .cp11 .st_curtain { position: absolute; inset: 0; z-index: 2; background: #000000; opacity: 0; pointer-events: none; } .cp11 .st_h { width: fit-content; font-size: 4.4vw; } .cp11 .st_beat { width: 40vw; } .cp11 .st_beat[data-w="wide"] { width: 58vw; } .cp11 .st_sub { max-width: 28vw; } .cp11 .st_fade { background: none; } .cp11 .st_fade::before, .cp11 .st_fade::after { content: ""; position: absolute; inset: 0; transition: opacity 0.35s ease; } .cp11 .st_fade::before { background: linear-gradient(to bottom, rgba(4, 4, 5, 0.62), rgba(4, 4, 5, 0) 15vh), radial-gradient(ellipse 58% 64% at 0% 100%, rgba(4, 4, 5, 0.86) 0%, rgba(4, 4, 5, 0.48) 44%, rgba(4, 4, 5, 0) 80%); } .cp11 .st_fade::after { background: linear-gradient(to bottom, rgba(232, 231, 225, 0.86), rgba(232, 231, 225, 0) 15vh), radial-gradient(ellipse 60% 66% at 0% 100%, rgba(232, 231, 225, 0.97) 0%, rgba(232, 231, 225, 0.86) 40%, rgba(232, 231, 225, 0) 80%); opacity: 0; } .cp11.is-light .st_fade::before { opacity: 0; } .cp11.is-light .st_fade::after { opacity: 1; } .cp11 .st_ui, .cp11 .st_h, .cp11 .st_label, .cp11 .st_sub, .cp11 .st_meta, .cp11 .st_meta span, .cp11 .st_count, .cp11 .st_count b { transition: color 0.35s ease, text-shadow 0.35s ease; } .cp11.is-light .st_ui { color: #121212; } .cp11.is-light .st_h { text-shadow: none; } .cp11.is-light .st_label, .cp11.is-light .st_sub, .cp11.is-light .st_meta { text-shadow: 0 0 14px rgba(241, 241, 243, 0.95), 0 0 4px rgba(241, 241, 243, 0.8); } .cp11.is-light .st_label, .cp11.is-light .st_count { color: #6a6a66; } .cp11.is-light .st_sub { color: #3a3a38; } .cp11.is-light .st_meta { color: #121212; } .cp11.is-light .st_meta span { color: #6a6a66; } .cp11.is-light .st_count b { color: #121212; } .cp11.is-light .st_links .bracket-btn.is-dark { color: #121212; background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212), linear-gradient(#121212, #121212), linear-gradient(#121212, #121212), linear-gradient(#121212, #121212), linear-gradient(#121212, #121212), linear-gradient(#121212, #121212), linear-gradient(#121212, #121212); } .mg-css { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .mg-css * { box-sizing: border-box; } .mg-board, .mg-page, .mg-card, .mg-concept, .mg-code { --mg-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, Aspekta, "Helvetica Neue", Arial, sans-serif; font-family: var(--mg-sans); -webkit-font-smoothing: antialiased; } .mg-mark { display: block; flex: none; } .mg-board { position: relative; width: 1200px; height: 800px; backface-visibility: hidden; transform-style: preserve-3d; box-shadow: 0 80px 160px rgba(0, 0, 0, 0.45); } .mg-board.is-paper { background: #efefea; color: #111111; } .mg-board.is-ink { background: radial-gradient(ellipse 80% 70% at 50% 40%, #1a2014 0%, #101010 70%); color: #f2f4ee; } .mg-board_grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(17, 17, 17, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 17, 0.06) 1px, transparent 1px); background-size: 40px 40px; } .mg-board_k { position: absolute; margin: 0; font: 400 14px/1 "Geist Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; } .mg-board_k.is-tl { left: 32px; top: 30px; } .mg-board_k.is-tr { right: 32px; top: 30px; } .mg-board_k.is-bl { left: 32px; bottom: 30px; } .mg-board_k.is-br { right: 32px; bottom: 30px; } .mg-con { position: absolute; inset: 0; } .mg-gd { fill: none; stroke: #111111; stroke-opacity: 0.32; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; } .mg-gd.is-fine { stroke-opacity: 0.18; } .mg-dim { font: 400 15px "Geist Mono", monospace; fill: #111111; opacity: 0; } .mg-sq-line, .mg-bar-line { fill: none; stroke: #111111; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; } .mg-sq { opacity: 0; } .mg-bar { fill: #111111; } .mg-lockup { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 46px; } .mg-word { font-size: 196px; line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: #f4f7ee; margin-top: -24px; } .mg-word i { display: inline-block; font-style: normal; } .mg-curwrap { position: absolute; left: 0; top: 0; z-index: 20; transform-style: preserve-3d; pointer-events: none; } .mg-cur { position: absolute; left: 0; top: 0; color: var(--c); --ring: 0; transform: translateZ(70px); } .mg-cur.is-lain { --c: #adf353; } .mg-cur.is-client { --c: #ff5fa2; } .mg-cur svg { display: block; width: 34px; height: 34px; } .mg-cur span { position: absolute; left: 24px; top: 30px; padding: 7px 11px; border-radius: 7px; background: var(--c); color: #0b0b0b; font: 500 15px/1 "Geist Mono", monospace; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); } .mg-cur::after { content: ""; position: absolute; left: -20px; top: -20px; width: 44px; height: 44px; border: 2px solid var(--c); border-radius: 50%; opacity: calc(var(--ring) * (1 - var(--ring)) * 4); transform: scale(calc(0.3 + var(--ring) * 1.4)); } .mg-sel { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border: 2px solid #adf353; opacity: 0; transform: translateZ(24px); pointer-events: none; } .mg-sel i { position: absolute; width: 11px; height: 11px; background: #111111; border: 2px solid #adf353; } .mg-sel i:nth-child(1) { left: -6px; top: -6px; } .mg-sel i:nth-child(2) { right: -6px; top: -6px; } .mg-sel i:nth-child(3) { left: -6px; bottom: -6px; } .mg-sel i:nth-child(4) { right: -6px; bottom: -6px; } .mg-sel span { position: absolute; left: -2px; top: -34px; padding: 6px 9px; background: #adf353; color: #0b0b0b; font: 500 13px/1 "Geist Mono", monospace; white-space: nowrap; } .mg-pin { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -40px 0 0 0; border-radius: 50% 50% 50% 0; background: #ff5fa2; color: #ffffff; display: flex; align-items: center; justify-content: center; font: 600 17px/1 var(--mg-sans); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); opacity: 0; } .mg-pin.is-done { background: #adf353; color: #0b0b0b; } .mg-bub { position: absolute; width: 360px; padding: 16px 18px 18px; border-radius: 16px; background: #ffffff; color: #141414; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); font-size: 17px; line-height: 1.4; opacity: 0; } .mg-bub_q { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; } .mg-bub_q span { display: flex; flex-direction: column; } .mg-bub_q small { color: #8a8a86; font-size: 12px; } .mg-bub i { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font: 600 12px/1 var(--mg-sans); font-style: normal; flex: none; } .mg-bub i.is-c { background: #ff5fa2; color: #ffffff; } .mg-bub i.is-l { background: #111111; color: #adf353; } .mg-bub_t, .mg-bub_a { grid-area: 1 / 1; margin: 0; } .mg-bub_t + .mg-bub_a { display: flex; gap: 10px; align-items: flex-start; opacity: 0; } .mg-bub { display: grid; grid-template-rows: auto auto; } .mg-bub_q { grid-row: 1; } .mg-bub_t, .mg-bub_a { grid-row: 2; grid-column: 1; } .mg-page { position: relative; width: 1440px; color: #f2f4ee; transform-style: preserve-3d; } .mg-browser { position: absolute; left: 0; top: -60px; width: 1440px; height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 24px; border-radius: 16px 16px 0 0; background: #1d1f1c; opacity: 0; } .mg-browser i { width: 13px; height: 13px; border-radius: 50%; background: #3a3d38; } .mg-browser i:nth-child(1) { background: #ff5f57; } .mg-browser i:nth-child(2) { background: #febc2e; } .mg-browser i:nth-child(3) { background: #28c840; } .mg-url { margin: 0 auto; padding: 9px 150px; border-radius: 9px; background: #121411; color: #a2ab98; font: 400 14px/1 "Geist Mono", monospace; } .mg-hinge { position: absolute; left: 0; top: 100%; width: 1440px; transform-origin: 50% 0; transform-style: preserve-3d; } .mg-page > .mg-hinge { top: 0; } .mg-sec { position: relative; width: 1440px; transform-style: preserve-3d; } .mg-wire, .mg-real, .mg-over { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; } .mg-wire { background: #e2e1da; color: #1b1b1b; } .mg-real { background: #111111; transform: translateZ(1px); } .mg-over { pointer-events: none; transform: translateZ(2px); } .mg-scan { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #adf353; box-shadow: 0 0 30px 6px rgba(173, 243, 83, 0.5); opacity: 0; pointer-events: none; transform: translateZ(1.5px); } .mg-wbox { position: absolute; border: 1.5px solid rgba(17, 17, 17, 0.26); background: rgba(17, 17, 17, 0.04); transform-style: preserve-3d; } .mg-wbox > span { position: absolute; left: 8px; top: 7px; font: 500 12px/1 "Geist Mono", monospace; letter-spacing: 0.06em; color: rgba(17, 17, 17, 0.5); } .mg-wbox.is-image, .mg-wbox.is-card, .mg-wbox.is-table { background-image: linear-gradient(to top right, transparent calc(50% - 1px), rgba(17, 17, 17, 0.16) 50%, transparent calc(50% + 1px)), linear-gradient(to top left, transparent calc(50% - 1px), rgba(17, 17, 17, 0.16) 50%, transparent calc(50% + 1px)); } .mg-wtype { position: absolute; left: 0; top: 0; margin: 0; font-size: 60px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 350; color: #1b1b1b; white-space: nowrap; } .mg-wlines { position: absolute; left: 0; right: 0; top: 26px; } .mg-wlines i { display: block; height: 9px; margin: 0 10px 9px; background: rgba(17, 17, 17, 0.14); } .mg-caret { display: inline-block; width: 3px; height: 0.9em; margin-left: 4px; vertical-align: -0.08em; background: #adf353; } .mg-wire .mg-caret { background: #111111; } .mg-navbar { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mg-brand { display: flex; align-items: center; gap: 12px; font-size: 27px; font-weight: 500; letter-spacing: -0.03em; } .mg-links { display: flex; gap: 40px; margin: 0 48px 0 auto; font-size: 15px; color: #c5cbbd; } .mg-btn { position: relative; display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border: 1px solid #adf353; color: #adf353; font: 500 13px/1 "Geist Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .mg-btn::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: #adf353; } .mg-btn.is-solid { background: #adf353; color: #0d120a; } .mg-btn.is-sm { height: 40px; padding: 0 16px; font-size: 12px; } .mg-pillbtn { display: inline-flex; align-items: center; height: 54px; padding: 0 28px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); color: #f2f4ee; font-size: 17px; white-space: nowrap; } .mg-pillbtn.is-solid { background: #f2f4ee; color: #111111; border-color: transparent; } .mg-pillbtn.is-sm { height: 42px; padding: 0 20px; font-size: 15px; } .mg-pillbtn.is-dark { background: #111111; color: #f2f4ee; border-color: transparent; } .mg-pillbtn.is-line { border-color: rgba(17, 17, 17, 0.4); color: #111111; } .mg-sec.is-hero .mg-real::before { content: ""; position: absolute; left: 600px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.07); } .mg-hero_l { position: absolute; left: 56px; top: 0; width: 540px; height: 860px; } .mg-kicker { position: absolute; left: 0; top: 150px; margin: 0; padding-left: 14px; border-left: 1px solid #adf353; color: #adf353; font: 400 14px/1.2 "Geist Mono", monospace; letter-spacing: 0.02em; } .mg-h1 { position: absolute; left: 0; top: 268px; width: 560px; margin: 0; font-size: 60px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 400; } .mg-h1_a, .mg-h1_b { display: block; } .mg-h1_a { font-weight: 350; } .mg-h1_b { position: absolute; left: 0; top: 0; font-weight: 500; opacity: 0; } .mg-lead { position: absolute; left: 0; top: 470px; width: 440px; margin: 0; font-size: 17px; line-height: 1.55; color: #aeb6a4; } .mg-ctas { position: absolute; left: 0; top: 710px; display: flex; gap: 14px; transform-style: preserve-3d; } .mg-ctas.is-v2 { opacity: 0; } .mg-hero_r { position: absolute; left: 640px; top: 20px; width: 760px; height: 820px; transform-style: preserve-3d; } .mg-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } .mg-art.is-final { transform: translateZ(1px); } .mg-ticker { position: absolute; left: 0; top: 360px; width: 100%; height: 44px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; background: #0a0a0a; color: #e8eddf; font: 400 13px/1 "Geist Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; } .mg-ticker span { padding-left: 20px; flex: none; } .mg-page.is-live .mg-ticker span { animation: mg-tick 16s linear infinite; } @keyframes mg-tick { to { transform: translateX(-50%); } } .mg-quotes { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 16px; transform-style: preserve-3d; } .mg-quote { flex: 1; height: 214px; padding: 16px 18px; background: rgba(9, 11, 8, 0.94); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0; } .mg-quote_h { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 13px/1 "Geist Mono", monospace; color: #cfd5c6; } .mg-quote_h i { font-style: normal; padding: 3px 6px; background: rgba(173, 243, 83, 0.15); color: #adf353; font-size: 11px; } .mg-quote_h b { margin-left: auto; font: 500 20px/1 var(--mg-sans); color: #f2f4ee; } .mg-quote_d { margin: 6px 0 0; text-align: right; color: #adf353; font: 400 12px/1 "Geist Mono", monospace; } .mg-quote svg { display: block; width: 100%; height: 120px; margin-top: 18px; } .mg-cross { position: absolute; width: 16px; height: 16px; margin: -8px; background: linear-gradient(#5a6152, #5a6152) center / 1px 100% no-repeat, linear-gradient(#5a6152, #5a6152) center / 100% 1px no-repeat; } .mg-concept_tag { position: absolute; right: 32px; bottom: 28px; margin: 0; padding: 9px 13px; border: 1px solid currentColor; font: 500 14px/1 "Geist Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; } .mg-concept_tag.is-b { right: 56px; bottom: 40px; color: #adf353; background: rgba(10, 12, 9, 0.8); opacity: 0; } .mg-partners { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; padding: 0 80px; border-top: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #d5dacd; } .mg-partners .p1 { font: 400 22px/1 "Geist Mono", monospace; letter-spacing: 0.04em; } .mg-partners .p2 { font-size: 40px; font-weight: 700; letter-spacing: -0.09em; font-style: italic; } .mg-partners .p3 { font-size: 19px; font-weight: 700; letter-spacing: 0.02em; } .mg-partners .p4 { font-size: 22px; font-weight: 500; letter-spacing: 0.42em; } .mg-partners .p5 { font-size: 30px; font-weight: 350; letter-spacing: 0.16em; } .mg-partners .p6 { font-size: 26px; } .mg-mk_head { position: absolute; left: 116px; right: 116px; top: 110px; display: flex; justify-content: space-between; align-items: flex-end; } .mg-h2 { margin: 0; font-size: 48px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 400; } .mg-mk_p { width: 440px; margin: 0; font-size: 17px; line-height: 1.55; color: #a9b19f; } .mg-mk_side { position: absolute; top: 300px; width: 80px; height: 440px; } .mg-mk_side.is-l { left: 0; } .mg-mk_side.is-r { right: 0; } .mg-table { position: absolute; left: 116px; right: 116px; top: 300px; } .mg-row { display: grid; grid-template-columns: 64px 1.3fr 1fr 1fr 240px 1.3fr; align-items: center; height: 110px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 17px; } .mg-coin { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1d201b; color: #e9eee1; font-style: normal; font-size: 16px; } .mg-row_p { margin: 0; display: flex; flex-direction: column; gap: 4px; } .mg-row_p small { color: #adf353; font-size: 12px; } .mg-row_v { margin: 0; } .mg-row_d { margin: 0; font-size: 16px; } .mg-row_d.is-up { color: #adf353; } .mg-row_d.is-down { color: #e5484d; } .mg-row svg { width: 220px; height: 56px; } .mg-row_t { margin: 0; text-align: right; color: #6e7568; font-size: 14px; } .mg-mk_btn { position: absolute; left: 610px; top: 752px; } .mg-feats { position: absolute; left: 56px; right: 56px; top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .mg-feat { height: 380px; padding: 22px; background: #161815; border: 1px solid rgba(255, 255, 255, 0.07); } .mg-feat_art { height: 200px; background: #0f110e; } .mg-feat_art svg { display: block; width: 100%; height: 100%; } .mg-feat_t { margin: 26px 0 10px; font-size: 22px; letter-spacing: -0.02em; } .mg-feat_d { margin: 0; color: #9da694; font-size: 15px; line-height: 1.5; } .mg-art.is-ring { left: 440px; top: 40px; width: 560px; height: 560px; } .mg-cta_in { position: absolute; left: 0; right: 0; top: 214px; text-align: center; } .mg-cta_k { margin: 0 0 14px; color: #adf353; font: 400 13px/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em; } .mg-h2.is-c { font-size: 54px; } .mg-cta_p { width: 400px; margin: 16px auto 0; color: #aeb6a4; font-size: 16px; line-height: 1.5; } .mg-ctas.is-c { position: relative; left: auto; top: auto; justify-content: center; margin-top: 30px; } .mg-ft_tile { position: absolute; left: 0; top: 0; width: 420px; height: 420px; } .mg-ft_l { position: absolute; left: 470px; top: 60px; } .mg-ft_t { margin: 0 0 22px; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; } .mg-ft_c { position: absolute; left: 1000px; top: 60px; display: grid; gap: 11px; color: #a7af9d; font-size: 15px; } .mg-ft_c.is-2 { left: 1190px; } .mg-ft_c p { margin: 0 0 6px; color: #f2f4ee; font: 400 13px/1 "Geist Mono", monospace; text-transform: uppercase; } .mg-ft_big { position: absolute; left: 466px; bottom: 18px; margin: 0; font-size: 200px; line-height: 0.8; letter-spacing: -0.03em; font-weight: 500; color: transparent; -webkit-text-stroke: 1.2px rgba(173, 243, 83, 0.45); } .mg-concept { position: relative; width: 1440px; height: 952px; overflow: hidden; box-shadow: 0 80px 160px rgba(0, 0, 0, 0.45); } .mg-concept .mg-navbar { height: 92px; bottom: auto; } .mg-concept.is-a { background: linear-gradient(180deg, #edfdd2 0%, #b3f558 100%); color: #111111; } .mg-navbar.is-light { border-bottom-color: rgba(17, 17, 17, 0.1); } .mg-navbar.is-light .mg-links { color: #2c3522; } .mg-navbar.is-light .mg-pillbtn { border-color: rgba(17, 17, 17, 0.35); color: #111111; } .mg-ca_in { position: absolute; left: 0; right: 0; top: 190px; display: flex; flex-direction: column; align-items: center; text-align: center; } .mg-ca_h { margin: 40px 0 0; font-size: 96px; line-height: 0.98; letter-spacing: -0.045em; font-weight: 500; } .mg-ca_p { margin: 24px 0 0; font-size: 21px; color: #3b4a2a; } .mg-ctas.is-ca { position: relative; left: auto; top: auto; margin-top: 34px; } .mg-concept.is-c { background: #0b0c0a; color: #f2f4ee; } .mg-cc_big { position: absolute; left: 34px; top: 120px; margin: 0; font-size: 340px; line-height: 0.8; letter-spacing: -0.06em; font-weight: 500; color: #adf353; } .mg-cc_row { position: absolute; left: 40px; right: 40px; bottom: 170px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .mg-cc_tile { height: 190px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.12); } .mg-cc_tile p { margin: 0; font: 400 13px/1 "Geist Mono", monospace; color: #9ca493; } .mg-cc_tile b { display: block; margin-top: 12px; font-size: 32px; font-weight: 400; } .mg-cc_tile svg { display: block; width: 100%; height: 60px; margin-top: 18px; } .mg-cc_h { position: absolute; left: 40px; bottom: 70px; margin: 0; font-size: 40px; letter-spacing: -0.03em; } .mg-card { position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 60px 120px rgba(0, 0, 0, 0.4); } .mg-card_k { position: absolute; left: 28px; bottom: 24px; margin: 0; font: 400 13px/1 "Geist Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; } .mg-card.is-icon, .mg-card.is-type { background: linear-gradient(180deg, #dafbb0 0%, #abf34e 100%); color: #111111; } .mg-icon { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); } .mg-icon .mg-mark { filter: drop-shadow(0 30px 40px rgba(40, 70, 10, 0.35)); } .mg-icon b { position: absolute; right: -18px; top: -18px; width: 60px; height: 60px; border-radius: 50%; background: #f14a5b; color: #ffffff; font: 500 32px/60px var(--mg-sans); text-align: center; } .mg-type_l { position: absolute; left: 40px; top: 46px; margin: 0; font-size: 30px; } .mg-type_n { position: absolute; left: 40px; top: 88px; margin: 0; font-size: 32px; font-weight: 700; } .mg-type_dots { position: absolute; left: 40px; right: 40px; top: 640px; display: flex; justify-content: space-between; } .mg-type_dots i { width: 22px; height: 22px; background: rgba(17, 17, 17, 0.18); } .mg-type_aa { position: absolute; left: 30px; bottom: -70px; margin: 0; font-size: 560px; line-height: 1; letter-spacing: -0.05em; font-weight: 400; } .mg-card.is-con { background: #101010; color: #adf353; } .mg-con2 { position: absolute; left: 118px; top: 118px; display: flex; align-items: center; gap: 26px; font-size: 150px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: #d8faa8; } .mg-con2_h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(173, 243, 83, 0.3); } .mg-con2_v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(173, 243, 83, 0.3); } .mg-card.is-social { background: #1b2a10; color: #ffffff; } .mg-card.is-social .mg-tile { position: absolute; inset: 0; width: 100%; height: 100%; } .mg-pill { position: absolute; left: 50%; top: 50%; width: 560px; height: 170px; display: flex; align-items: center; gap: 26px; padding: 0 36px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; background: rgba(18, 26, 12, 0.72); } .mg-pill span { display: flex; flex-direction: column; gap: 6px; } .mg-pill b { font-size: 34px; font-weight: 500; } .mg-pill small { font-size: 19px; color: rgba(255, 255, 255, 0.6); } .mg-pill i { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 26px; } .mg-card.is-swatch { border-radius: 8px; } .mg-sw_n { position: absolute; left: 30px; top: 28px; margin: 0; font-size: 34px; font-weight: 500; letter-spacing: -0.02em; } .mg-sw_h { position: absolute; left: 30px; bottom: 26px; margin: 0; font: 400 16px/1 "Geist Mono", monospace; letter-spacing: 0.04em; } .mg-code { width: 700px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(13, 15, 12, 0.95); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5); color: #cfd6c6; font: 400 16px/1.8 "Geist Mono", monospace; } .mg-code_bar { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .mg-code_bar i { width: 12px; height: 12px; border-radius: 50%; background: #3a3d38; } .mg-code_bar span { margin-left: 14px; color: #8f9886; font-size: 14px; } .mg-code_body { padding: 18px 22px 22px; } .mg-code_l { display: flex; gap: 22px; white-space: pre; } .mg-code_l small { width: 22px; color: #4c5346; text-align: right; font-size: 14px; } .mg-code_l b { color: #adf353; font-weight: 400; } .mg-code_l u { color: #ffd28a; text-decoration: none; } .mg-code_l em { color: #8fd3ff; font-style: normal; } .cp11 .mg-board, .cp11 .mg-card, .cp11 .mg-concept, .cp11 .mg-code { box-shadow: none; } .cp11 .mg-board.is-paper { background: #f3f2ed; } .cp11 .mg-wire { background: #f6f5f1; } .cp11 .mg-wbox { border-color: rgba(17, 17, 17, 0.3); background-color: rgba(17, 17, 17, 0.035); } .cp11 .mg-hero_l { transform-style: preserve-3d; } .cp11 .mg-sec.is-hero { --ex: 0; } .cp11 .mg-sec.is-hero :is(.mg-kicker, .mg-h1, .mg-lead, .mg-ctas) { box-shadow: 0 0 0 16px rgba(17, 17, 17, calc(var(--ex) * 0.94)); background: rgba(17, 17, 17, calc(var(--ex) * 0.94)); outline: 1px solid rgba(173, 243, 83, calc(var(--ex) * 0.8)); outline-offset: 16px; } .cp11 .mg-sec.is-hero :is(.mg-hero_r, .mg-ticker, .mg-quotes) { outline: 1px solid rgba(173, 243, 83, calc(var(--ex) * 0.8)); outline-offset: 6px; } .mg-back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #efeee9 0%, #e6e5df 100%); transform: translateZ(-1px) rotateY(180deg); backface-visibility: hidden; } .mg-ext { position: absolute; transform-style: preserve-3d; pointer-events: none; } .mg-ext_s, .mg-ext_b { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; } .mg-ext_s { border-radius: 21%; } .mg-ext_s.is-top { background: linear-gradient(180deg, #d8faa8 0%, #b3f558 100%); } .mg-ext_b svg { display: block; width: 100%; height: 100%; } .mg-ext_b polygon { fill: currentColor; } .mg-concept.is-b { background: #111111; color: #f2f4ee; outline: 0 solid rgba(173, 243, 83, 0); outline-offset: 34px; } .mg-concept_tag.is-bb { right: 56px; bottom: 40px; color: #adf353; background: rgba(10, 12, 9, 0.8); } @font-face { font-family: "Archivo Expanded"; src: url("/fonts/Archivo-wide.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Pinyon Script"; src: url("/fonts/PinyonScript.woff2") format("woff2"); font-display: swap; } .mv-s, .mv-hero_in, .mv-concept, .mv-ca, .mv-cc { --mv-emerald: #1c3934; --mv-charcoal: #101010; --mv-ivory: #f1eada; --mv-burgundy: #261211; --mv-deep: #142a26; --mv-wine: #4d2320; --mv-sans: "Archivo Expanded", "Helvetica Neue", Arial, sans-serif; font-family: var(--mv-sans); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .mv-lion, .mv-dia, .mv-arrow { display: block; flex: none; } .mv-script { font-family: "Pinyon Script", cursive; font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; } .mv-label { margin: 0; font: 400 11px/1.4 var(--mv-sans); letter-spacing: 0.22em; text-transform: uppercase; } .mv-p { margin: 0; font: 300 14px/1.75 var(--mv-sans); letter-spacing: 0.01em; color: var(--mv-dim); } .mv-h2 { position: absolute; margin: 0; font: 260 52px/1.1 var(--mv-sans); letter-spacing: -0.012em; } .mv-photo { display: block; width: 100%; height: 100%; object-fit: cover; } .mv-still { display: block; } .mv-btn { display: inline-flex; align-items: center; gap: 16px; height: 52px; padding: 0 28px; border: 1px solid transparent; font: 450 11px/1 var(--mv-sans); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .mv-btn.is-sm { height: 40px; padding: 0 20px; font-size: 10px; } .mv-btn.is-solid { background: var(--mv-ivory); color: var(--mv-emerald); } .mv-btn.is-line { border-color: rgba(241, 234, 218, 0.5); color: var(--mv-ivory); } .mv-btn.is-dark { background: var(--mv-emerald); color: var(--mv-ivory); } .mv-btn.is-ink { border-color: rgba(28, 57, 52, 0.45); color: var(--mv-emerald); } .mv-btn.is-wine { background: var(--mv-wine); color: var(--mv-ivory); } .mv-link { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid currentColor; font: 450 11px/1 var(--mv-sans); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .mv-s { position: absolute; inset: 0; overflow: hidden; } .mv-s > * { position: absolute; margin: 0; } .mv-s.is-nav, .mv-s.is-course { background: var(--mv-emerald); color: var(--mv-ivory); --mv-dim: rgba(241, 234, 218, 0.66); --mv-rule: rgba(241, 234, 218, 0.16); } .mv-s.is-club, .mv-s.is-shop { background: var(--mv-ivory); color: var(--mv-emerald); --mv-dim: rgba(28, 57, 52, 0.72); --mv-rule: rgba(28, 57, 52, 0.18); } .mv-s.is-membership { background: var(--mv-burgundy); color: var(--mv-ivory); --mv-dim: rgba(241, 234, 218, 0.62); --mv-rule: rgba(241, 234, 218, 0.14); } .mv-s.is-footer { background: var(--mv-charcoal); color: var(--mv-ivory); --mv-dim: rgba(241, 234, 218, 0.56); --mv-rule: rgba(241, 234, 218, 0.12); } .mv-row { left: 80px; top: 64px; width: 1280px; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--mv-rule); } .mv-row .mv-label b { margin-right: 22px; font-weight: 400; opacity: 0.5; } .mv-cap { display: flex; justify-content: space-between; align-items: baseline; font: 400 11px/1 var(--mv-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mv-dim); } .mv-cap .mv-script { font-size: 26px; color: var(--mv-emerald); } .mv-s.is-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 80px; border-bottom: 1px solid rgba(241, 234, 218, 0.1); } .mv-s.is-nav > * { position: relative; } .mv-brand { display: flex; align-items: center; gap: 16px; justify-self: start; } .mv-brand span { font: 380 19px/1 var(--mv-sans); letter-spacing: 0.16em; text-transform: uppercase; } .mv-links { display: flex; align-items: center; height: 28px; gap: 46px; font: 400 11px/1 var(--mv-sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 234, 218, 0.78); } .mv-links span:first-child { color: var(--mv-ivory); } .mv-nav_r { display: flex; align-items: center; gap: 30px; justify-self: end; } .mv-nav_lang { font: 400 10px/1 var(--mv-sans); letter-spacing: 0.2em; color: rgba(241, 234, 218, 0.78); } .mv-nav_lang i { font-style: normal; margin: 0 5px; opacity: 0.4; } .mv-hero_in { position: absolute; inset: 0; transform-style: preserve-3d; color: var(--mv-ivory); } .mv-hero_in > * { position: absolute; margin: 0; } .mv-hero_pic { left: 0; top: 0; width: 1440px; height: 900px; } .mv-hero_scrim { left: 0; top: 0; width: 1440px; height: 900px; pointer-events: none; background: linear-gradient(0deg, rgba(8, 20, 17, 0.88) 0%, rgba(8, 20, 17, 0.66) 22%, rgba(8, 20, 17, 0.2) 50%, rgba(8, 20, 17, 0) 64%), linear-gradient(90deg, rgba(8, 20, 17, 0.46) 0%, rgba(8, 20, 17, 0.14) 46%, rgba(8, 20, 17, 0) 70%), linear-gradient(180deg, rgba(8, 20, 17, 0.3) 0%, rgba(8, 20, 17, 0) 18%); } .mv-hero_cap { left: 80px; top: 54px; height: 22px; display: flex; align-items: center; gap: 36px; font: 400 10px/1 var(--mv-sans); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(241, 234, 218, 0.8); } .mv-hero_grid { left: 80px; top: 0; width: 1280px; height: 836px; display: flex; justify-content: space-between; pointer-events: none; } .mv-hero_grid i { width: 1px; height: 100%; background: linear-gradient(180deg, rgba(241, 234, 218, 0) 0%, rgba(241, 234, 218, 0.075) 34%, rgba(241, 234, 218, 0.075) 100%); } .mv-hero_lock { left: 940px; top: 56px; width: 420px; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 6px; background: rgba(18, 40, 36, 0.78); } .mv-hero_lock::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(241, 234, 218, 0.12); } .mv-lock_mark { display: flex; align-items: flex-end; gap: 30px; } .mv-lock_mark span { padding-bottom: 18px; font: 400 10px/1 var(--mv-sans); letter-spacing: 0.22em; text-transform: uppercase; } .mv-lock_word { margin: 22px 0 0; font: 300 46px/1 var(--mv-sans); letter-spacing: 0.02em; text-transform: uppercase; } .mv-lock_script { margin: 2px 0 0; font: 400 50px/1.1 "Pinyon Script", cursive; } .mv-kicker { left: 80px; top: 462px; height: 22px; display: flex; align-items: center; gap: 16px; font: 400 11px/1 var(--mv-sans); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(241, 234, 218, 0.86); } .mv-kicker::before { content: ""; width: 36px; height: 1px; background: currentColor; } .mv-h1 { left: 76px; top: 500px; font-size: 64px; white-space: nowrap; font-family: var(--mv-sans); } .mv-h1_a, .mv-h1_b { display: block; } .mv-h1_a { font-weight: 380; line-height: 1.02; letter-spacing: -0.024em; } .mv-h1_b { position: absolute; left: 0; top: 0; font-weight: 200; line-height: 1.08; letter-spacing: 0.008em; opacity: 0; } .mv-lead { left: 80px; top: 726px; width: 440px; font: 300 15px/1.7 var(--mv-sans); color: rgba(241, 234, 218, 0.8); } .mv-ctas { right: 80px; top: 740px; display: flex; gap: 12px; } .mv-ctas.is-v2 { opacity: 0; } .mv-hero_meta { left: 80px; top: 836px; width: 1280px; height: 64px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(241, 234, 218, 0.2); font: 400 10px/1 var(--mv-sans); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(241, 234, 218, 0.82); } .mv-club_h { left: 80px; top: 142px; width: 920px; font-size: 46px; line-height: 1.2; } .mv-club_h .mv-script { font-size: 1.4em; line-height: 0.5; } .mv-club_r { left: 1040px; top: 150px; width: 320px; } .mv-club_r .mv-link { margin-top: 30px; } .mv-club_pic { left: 80px; top: 384px; width: 560px; height: 338px; overflow: hidden; background: #d8cdb4; } .mv-club_cap { left: 80px; top: 742px; width: 560px; } .mv-stats { left: 720px; top: 384px; width: 640px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .mv-stat { height: 169px; padding-top: 24px; border-top: 1px solid var(--mv-rule); } .mv-stat_n { margin: 0 0 16px; font: 240 56px/1 var(--mv-sans); letter-spacing: -0.01em; } .mv-stat .mv-label { font-size: 10px; color: var(--mv-dim); } .mv-course_h { left: 80px; top: 142px; } .mv-course_p { left: 1040px; top: 150px; width: 320px; } .mv-shot { overflow: hidden; background: var(--mv-deep); } .mv-shot.is-big { left: 80px; top: 320px; } .mv-shot.is-a { left: 944px; top: 320px; } .mv-shot.is-b { left: 944px; top: 544px; } .mv-shot_cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: flex; align-items: baseline; gap: 22px; padding: 48px 22px 18px; background: linear-gradient(0deg, rgba(10, 24, 21, 0.72) 0%, rgba(10, 24, 21, 0) 100%); font: 400 10px/1 var(--mv-sans); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(241, 234, 218, 0.84); } .mv-shot_cap b { font-weight: 400; color: var(--mv-ivory); } .mv-shot_cap span:last-child { margin-left: auto; } .mv-score { left: 80px; top: 784px; width: 1280px; border-bottom: 1px solid var(--mv-rule); } .mv-score_r { display: grid; grid-template-columns: 110px repeat(18, 1fr) 84px; align-items: center; height: 36px; border-top: 1px solid var(--mv-rule); font: 300 13px/1 var(--mv-sans); text-align: center; } .mv-score_r b { font: 400 10px/1 var(--mv-sans); letter-spacing: 0.22em; text-transform: uppercase; text-align: left; color: var(--mv-dim); } .mv-score_r b:last-child { text-align: right; } .mv-score_r + .mv-score_r { color: var(--mv-dim); } .mv-score_r span:nth-of-type(9) { box-shadow: 1px 0 0 var(--mv-rule); } .mv-mem_art { left: 92px; top: 140px; } .mv-cards { left: 110px; top: 196px; width: 580px; height: 450px; } .mv-mcard { position: absolute; width: 420px; height: 264px; overflow: hidden; border-radius: 12px; box-shadow: 0 28px 40px rgba(0, 0, 0, 0.4); } .mv-mcard.is-ivory { left: 10px; top: 20px; background: linear-gradient(160deg, #efe8d9 0%, #ddd3bf 100%); color: #2a2a26; transform: rotate(-6deg); } .mv-mcard.is-emerald { left: 150px; top: 168px; background: linear-gradient(155deg, #24463f 0%, #1c3934 45%, #132925 100%); color: var(--mv-ivory); transform: rotate(3deg); } .mv-guil { position: absolute; left: 0; top: 0; opacity: 0.09; } .mv-mcard_strip { position: absolute; left: 24px; right: 24px; top: 20px; display: flex; justify-content: space-between; align-items: center; font: 400 7px/1 var(--mv-sans); letter-spacing: 0.22em; text-transform: uppercase; } .mv-mcard_strip .mv-dia { width: 4px; height: 8px; } .mv-mcard_lock { position: absolute; left: 0; right: 0; top: 0; bottom: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .mv-mcard.is-ivory .mv-mcard_lock { top: 30px; bottom: 60px; } .mv-mcard_mark { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 12px; } .mv-mcard_mark span { padding-bottom: 10px; font: 400 7px/1 var(--mv-sans); letter-spacing: 0.22em; text-transform: uppercase; } .mv-mcard_word { margin: 0; font: 300 28px/1 var(--mv-sans); letter-spacing: 0.02em; text-transform: uppercase; } .mv-mcard.is-ivory .mv-mcard_word { font-weight: 450; } .mv-mcard_script { margin: 0; font: 400 32px/1.1 "Pinyon Script", cursive; } .mv-mcard_foot { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; font: 400 7px/1 var(--mv-sans); letter-spacing: 0.22em; text-transform: uppercase; } .mv-mcard.is-emerald .mv-mcard_foot { left: 28px; right: 28px; bottom: 22px; padding-top: 12px; border-top: 1px solid rgba(241, 234, 218, 0.2); } .mv-mcard_foot p { margin: 0; display: flex; flex-direction: column; gap: 8px; font: 350 14px/1 var(--mv-sans); letter-spacing: 0.04em; text-transform: none; } .mv-mcard_foot p.is-r { align-items: flex-end; } .mv-mcard_foot small { font: 400 8px/1 var(--mv-sans); letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7; } .mv-mem_h { left: 780px; top: 142px; } .mv-mem_p { left: 780px; top: 290px; width: 520px; } .mv-tiers { left: 780px; top: 410px; width: 580px; border-bottom: 1px solid var(--mv-rule); } .mv-tier { display: grid; grid-template-columns: 56px 150px 1fr auto; align-items: center; height: 72px; border-top: 1px solid var(--mv-rule); } .mv-tier b { font: 300 14px/1 var(--mv-sans); letter-spacing: 0.08em; opacity: 0.55; } .mv-tier strong { font: 350 18px/1 var(--mv-sans); letter-spacing: 0.01em; } .mv-tier small { font: 300 13px/1 var(--mv-sans); color: var(--mv-dim); } .mv-tier .mv-arrow { opacity: 0.7; } .mv-mem_cta { left: 780px; top: 664px; display: flex; align-items: center; gap: 30px; } .mv-s.is-membership .mv-btn.is-solid { color: var(--mv-burgundy); } .mv-mem_cta .mv-label { font-size: 10px; color: var(--mv-dim); } .mv-shop_h { left: 80px; top: 142px; } .mv-shop_r { left: 1040px; top: 150px; width: 320px; } .mv-shop_r .mv-link { margin-top: 30px; } .mv-prod { width: 400px; } .mv-prod.is-glove { left: 80px; top: 316px; } .mv-prod.is-cap { left: 520px; top: 316px; } .mv-prod.is-balls { left: 960px; top: 396px; } .mv-prod_pic { width: 400px; height: 320px; overflow: hidden; background: #ddd3bd; } .mv-prod.is-glove .mv-prod_pic { height: 400px; } .mv-prod_n { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 18px; } .mv-prod_n p { margin: 0; display: flex; flex-direction: column; gap: 8px; } .mv-prod_n strong { font: 380 15px/1 var(--mv-sans); letter-spacing: 0.02em; } .mv-prod_n small { font: 300 12px/1.3 var(--mv-sans); color: var(--mv-dim); } .mv-prod_n b { font: 350 13px/1 var(--mv-sans); letter-spacing: 0.08em; } .mv-ft_a { left: 80px; top: 72px; width: 400px; } .mv-ft_where { margin: 26px 0 10px; font-size: 34px; line-height: 1.1; } .mv-ft_c { left: 560px; top: 72px; display: grid; gap: 14px; font: 300 14px/1 var(--mv-sans); letter-spacing: 0.02em; color: rgba(241, 234, 218, 0.82); } .mv-ft_c .mv-label { margin-bottom: 8px; font-size: 10px; color: var(--mv-dim); } .mv-ft_c.is-2 { left: 790px; } .mv-ft_d { left: 1020px; top: 72px; width: 340px; } .mv-ft_d > .mv-label { font-size: 10px; color: var(--mv-dim); } .mv-ft_mail { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(241, 234, 218, 0.4); font: 300 14px/1 var(--mv-sans); color: rgba(241, 234, 218, 0.6); } .mv-social { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding: 14px 16px; border-radius: 14px; background: var(--mv-ivory); color: var(--mv-emerald); } .mv-social_av { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mv-emerald); } .mv-social p { margin: 0; display: flex; flex-direction: column; gap: 6px; } .mv-social strong { font: 400 13px/1 var(--mv-sans); letter-spacing: 0.08em; text-transform: uppercase; } .mv-social small { font: 300 11px/1 var(--mv-sans); color: rgba(28, 57, 52, 0.66); } .mv-social b { margin-left: auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(28, 57, 52, 0.4); border-radius: 50%; font: 300 18px/1 var(--mv-sans); } .mv-ft_base { left: 80px; top: 286px; width: 1280px; display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--mv-rule); font: 400 9px/1 var(--mv-sans); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(241, 234, 218, 0.42); } .mv-ft_big { left: 80px; top: 362px; width: 1280px; display: flex; justify-content: space-between; font: 200 158px/0.8 var(--mv-sans); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; color: var(--mv-ivory); } .mv-concept { position: relative; width: 1440px; height: 996px; overflow: hidden; } .mv-ca, .mv-cc { position: absolute; left: 0; top: 0; width: 1440px; height: 996px; overflow: hidden; } .mv-concept_tag { position: absolute; right: 32px; bottom: 28px; margin: 0; padding: 9px 13px; border: 1px solid currentColor; font: 500 13px/1 "Geist Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; } .mv-ca { background: var(--mv-ivory); color: var(--mv-emerald); } .mv-ca_nav { position: absolute; left: 0; top: 0; width: 1440px; height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 80px; border-bottom: 1px solid rgba(28, 57, 52, 0.16); } .mv-ca_links { display: flex; gap: 40px; font: 400 11px/1 var(--mv-sans); letter-spacing: 0.2em; text-transform: uppercase; } .mv-ca_brand { display: flex; align-items: center; gap: 14px; font: 380 18px/1 var(--mv-sans); letter-spacing: 0.18em; text-transform: uppercase; } .mv-ca_r { display: flex; align-items: center; gap: 40px; justify-self: end; } .mv-ca_hero { position: absolute; left: 0; top: 160px; width: 1440px; display: flex; flex-direction: column; align-items: center; text-align: center; } .mv-ca_k { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; color: rgba(28, 57, 52, 0.7); } .mv-ca_word { margin: 30px 0 0; font: 300 118px/0.9 var(--mv-sans); letter-spacing: 0.01em; text-transform: uppercase; } .mv-ca_script { margin: -14px 0 0 300px; font: 400 92px/1.1 "Pinyon Script", cursive; color: #5a2a26; } .mv-ca_p { margin: 14px 0 0; width: 520px; font: 300 16px/1.7 var(--mv-sans); color: rgba(28, 57, 52, 0.75); } .mv-ca_btns { display: flex; gap: 12px; margin-top: 34px; } .mv-ca_arches { position: absolute; left: 0; bottom: 0; width: 1440px; display: flex; justify-content: center; gap: 36px; } .mv-ca_arch { width: 360px; height: 250px; overflow: hidden; border-radius: 180px 180px 0 0; background: #d9cfba; } .mv-ca + .mv-concept_tag { background: #f1eada; color: #1c3934; } .mv-cc { background: var(--mv-charcoal); color: var(--mv-ivory); --mv-dim: rgba(241, 234, 218, 0.6); } .mv-cc_nav { position: absolute; left: 0; top: 0; width: 1440px; height: 96px; display: flex; align-items: center; gap: 56px; padding: 0 80px; border-bottom: 1px solid rgba(241, 234, 218, 0.1); } .mv-cc_word { font: 300 18px/1 var(--mv-sans); letter-spacing: 0.34em; text-transform: uppercase; } .mv-cc_links { display: flex; gap: 36px; margin-left: auto; font: 400 11px/1 var(--mv-sans); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(241, 234, 218, 0.8); } .mv-cc_links small { margin-right: 8px; font-size: 9px; color: #b0675f; } .mv-cc_hero { position: absolute; left: 0; top: 96px; width: 1440px; height: 900px; } .mv-cc_hero > * { position: absolute; margin: 0; } .mv-cc_k { left: 80px; top: 92px; display: flex; align-items: center; gap: 14px; font-size: 10px; color: var(--mv-dim); } .mv-cc_big { left: 70px; top: 150px; font: 200 148px/0.94 var(--mv-sans); letter-spacing: -0.02em; } .mv-cc_note { left: 0; top: 600px; width: 880px; height: 300px; padding: 52px 80px; background: var(--mv-burgundy); } .mv-cc_no { margin: 0 0 22px; font: 250 54px/1 var(--mv-sans); letter-spacing: 0.02em; color: #c98f86; } .mv-cc_note .mv-p { width: 380px; } .mv-cc_note .mv-link { margin-top: 26px; } .mv-cc_pic { left: 880px; top: 0; width: 560px; height: 900px; overflow: hidden; background: #1a1210; } .mv-cc_vert { position: absolute; right: 30px; top: 40px; margin: 0; display: flex; align-items: center; gap: 14px; writing-mode: vertical-rl; font: 400 10px/1 var(--mv-sans); letter-spacing: 0.3em; text-transform: uppercase; } .mv-cc_vert .mv-dia { transform: rotate(90deg); } .mv-cc_inset { left: 600px; top: 330px; width: 300px; height: 273px; overflow: hidden; outline: 12px solid var(--mv-burgundy); } .mv-cc + .mv-concept_tag { background: rgba(16, 16, 16, 0.82); color: #f1eada; } .cp11 .mg-board_k.is-bl { display: none; } .mg-page.is-far canvas { filter: blur(1.4px); } .cp11 + .footer { box-shadow: 0 -60px 120px rgba(0, 0, 0, 0.55); } .cp11 .mg-real { background: transparent; } .cp11 .mg-sec.is-hero .mg-real::before { display: none; } .cp11 .mg-concept { height: 996px; box-shadow: none; } .cp11 .mg-concept.is-b { background: transparent; } .cp11 .mg-cur.is-lain { --c: #d6b46a; } .cp11 .mg-cur.is-client { --c: #f1eada; } .cp11 .mg-sel, .cp11 .mg-sel i { border-color: #d6b46a; } .cp11 .mg-sel span { background: #d6b46a; color: #101010; } .cp11 .mg-scan { background: #d6b46a; box-shadow: 0 0 30px 6px rgba(214, 180, 106, 0.5); } .cp11 .mg-pin { background: #6e2a26; color: #f1eada; } .cp11 .mg-pin.is-done { background: #d6b46a; color: #101010; } .cp11 .mg-bub i.is-c { background: #1c3934; color: #f1eada; } .cp11 .mg-bub i.is-l { background: #101010; color: #d6b46a; } .cp11 .mg-concept_tag.is-bb { color: #f1eada; background: rgba(16, 16, 16, 0.78); } .cp11 .mg-sec.is-hero { --ex: 0; } .cp11 .mg-sec.is-hero .mv-hero_in > * { outline: 1px solid rgba(214, 180, 106, calc(var(--ex) * 0.85)); outline-offset: 6px; } .cp11 .mg-sec.is-hero .mv-hero_pic { outline-offset: -1px; } .cp11 .st_fade::after { background: linear-gradient(to bottom, rgba(241, 241, 243, 0.86), rgba(241, 241, 243, 0) 15vh), radial-gradient(ellipse 60% 66% at 0% 100%, rgba(241, 241, 243, 0.97) 0%, rgba(241, 241, 243, 0.86) 40%, rgba(241, 241, 243, 0) 80%); } .mv-board.is-ivory { background: #f1eada; color: #1c3934; } .mv-board.is-ivory .mg-board_grid { background-image: linear-gradient(rgba(28, 57, 52, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 57, 52, 0.07) 1px, transparent 1px); } .mv-board .mg-gd { stroke: #1c3934; } .mv-ol { fill: none; stroke: #1c3934; stroke-width: 1.6; stroke-dasharray: 1; stroke-linejoin: round; } .mv-node { fill: #1c3934; } .mv-fill { fill: #1c3934; } .mv-board.is-emerald { background: radial-gradient(ellipse 80% 70% at 50% 40%, #24463f 0%, #1c3934 55%, #142a26 100%); color: #f1eada; } .mv-lockup { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mv-lockup svg { display: block; } .mv-lockup_e { display: flex; justify-content: space-between; width: 520px; margin: -64px 0 0; font: 400 15px/1 "Archivo Expanded", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; } .mv-word { margin: 46px 0 0; font: 300 118px/1 "Archivo Expanded", sans-serif; letter-spacing: 0.01em; } .mv-script { margin: -6px 0 0; font: 400 110px/1 "Pinyon Script", cursive; } .mv-card.is-ball { background: radial-gradient(ellipse 70% 60% at 50% 42%, #2a2a28 0%, #101010 70%); color: #f1eada; display: flex; align-items: center; justify-content: center; } .mv-ball { display: block; margin-top: -40px; } .mv-ball_t { font: 400 15px/1 "Archivo Expanded", sans-serif; letter-spacing: 0.22em; fill: #101010; } .mv-card.is-type { background: #1c3934; color: #f1eada; } .mv-type_n { position: absolute; left: 44px; top: 48px; margin: 0; font: 300 64px/1 "Archivo Expanded", sans-serif; } .mv-type_ab { position: absolute; left: 46px; top: 140px; margin: 0; font: 300 17px/1.6 "Archivo Expanded", sans-serif; opacity: 0.85; } .mv-type_s { position: absolute; left: 44px; top: 270px; margin: 0; font: 400 78px/1 "Pinyon Script", cursive; } .mv-type_meta { position: absolute; left: 46px; bottom: 120px; width: 170px; padding-top: 18px; border-top: 1px solid rgba(241, 234, 218, 0.4); font: 300 15px/1.5 "Archivo Expanded", sans-serif; } .mv-type_meta p { margin: 0 0 14px; } .mv-type_aa { position: absolute; right: -40px; bottom: -150px; margin: 0; font: 400 900px/1 "Archivo Expanded", sans-serif; letter-spacing: -0.04em; } .mv-card.is-con { background: #261211; } .mv-con2 { position: absolute; left: 0; top: 30px; } .mv-con2 polygon { fill: none; stroke: #f1eada; stroke-opacity: 0.7; stroke-width: 1.6; stroke-linejoin: round; } .mv-con2 path { fill: #f1eada; } .mv-card.is-con .mg-card_k { color: #f1eada; } .mv-card.is-social { background: #10221e; color: #101010; } .mv-card.is-social > canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .mv-soc { position: absolute; left: 400px; top: 56px; width: 450px; height: 388px; border-radius: 22px; overflow: hidden; background: #f1eada; } .mv-soc_top { display: flex; align-items: center; justify-content: space-between; height: 190px; padding: 0 26px; background: #1c3934; color: #f1eada; font: 400 8px/1 "Archivo Expanded", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; } .mv-soc_top i { font-style: normal; font-size: 7px; } .mv-soc_av { position: absolute; left: 28px; top: 146px; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: #1c3934; border: 4px solid #f1eada; } .mv-soc_n { position: absolute; left: 30px; top: 256px; margin: 0; font: 300 21px/1 "Archivo Expanded", sans-serif; color: #1c3934; } .mv-soc_n b { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; background: #3d7be0; color: #ffffff; font-size: 11px; vertical-align: 2px; } .mv-soc_c { position: absolute; left: 30px; top: 286px; margin: 0; font: 300 12px/1 "Archivo Expanded", sans-serif; color: #7c7468; } .mv-soc_f { position: absolute; left: 30px; bottom: 34px; display: flex; gap: 70px; margin: 0; font: 400 11px/1 "Archivo Expanded", sans-serif; color: #1c3934; } .mv-soc_plus { position: absolute; right: 30px; top: 262px; display: flex; width: 38px; height: 38px; border: 1px solid #1c3934; border-radius: 50%; align-items: center; justify-content: center; font-style: normal; color: #1c3934; } .mv-card.is-social .mg-card_k { color: #f1eada; } .mv-ext_s { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; } .mv-ext_s svg { display: block; width: 100%; height: 100%; } .mv-ext_s.is-top { color: #1c3934; } .ai-page, .ai-prompt, .ai-post, .ai-card { --ai-cream: #f5efe3; --ai-sand: #efe6d2; --ai-ink: #2d2416; --ai-body: #7a6b52; --ai-gold: #c2923d; --ai-serif: "Playfair Display", Georgia, serif; --ai-sans: "Inter", -apple-system, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; font-family: var(--ai-sans); color: var(--ai-ink); -webkit-font-smoothing: antialiased; } .ai-page, .ai-page *, .ai-prompt, .ai-prompt *, .ai-post, .ai-post *, .ai-card, .ai-card * { box-sizing: border-box; } .ai-page { position: relative; width: 1440px; } .ai-s { position: relative; display: block; width: 1440px; background: var(--ai-cream); } .ai-s > * { position: absolute; margin: 0; } .ai-s.is-hero { background: none; } .ai-s.is-stats { background: linear-gradient(180deg, #efe6d2 0%, #f4e6c0 50%, #efe6d2 100%); } .ai-s.is-footer { background: var(--ai-sand); } .ai-logo { display: flex; align-items: center; gap: 12px; } .ai-mark { display: block; flex: none; filter: drop-shadow(0 4px 10px rgba(185, 134, 47, 0.35)); } .ai-logo_t { display: flex; flex-direction: column; gap: 4px; margin: 0; } .ai-logo_t b { font: 700 21px/1 var(--ai-sans); letter-spacing: -0.01em; color: var(--ai-ink); } .ai-logo_t small { font: 600 9px/1 var(--ai-sans); letter-spacing: 0.28em; text-transform: uppercase; color: #a88a52; } .ai-logo.is-white b { color: #ffffff; } .ai-logo.is-white small { color: rgba(255, 255, 255, 0.85); } .ai-arrow { display: block; flex: none; } .ai-stars { color: #e0a94a; letter-spacing: 2px; } .ai-grad { background: linear-gradient(90deg, #d39b3b 0%, #f0c46a 45%, #b8862f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } .ai-pill { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 34px; border-radius: 999px; font: 600 18px/1 var(--ai-sans); white-space: nowrap; } .ai-pill.is-sm { height: 44px; padding: 0 24px; font-size: 15px; } .ai-pill.is-gold { background: linear-gradient(135deg, #f3cf7a 0%, #e0a94a 55%, #c98a2e 100%); color: #ffffff; text-shadow: 0 1px 1px rgba(120, 80, 20, 0.25); box-shadow: 0 10px 24px rgba(201, 138, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .ai-pill.is-ghost { background: rgba(255, 255, 255, 0.72); border: 1.5px solid rgba(45, 36, 22, 0.14); color: var(--ai-ink); box-shadow: 0 8px 20px rgba(120, 90, 40, 0.08); } .ai-pill.is-white { background: #ffffff; color: var(--ai-ink); box-shadow: 0 12px 28px rgba(120, 80, 20, 0.25); } .ai-nav { left: 40px; top: 14px; width: 1360px; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-radius: 30px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 30px rgba(140, 104, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .ai-nav_links { display: flex; gap: 44px; font: 500 16px/1 var(--ai-sans); color: #6b5d45; } .ai-nav_links .is-on { color: var(--ai-gold); } .ai-hero_pic { inset: 0; background: #f3e4c8; overflow: hidden; } .ai-hero_pic canvas { display: block; width: 100%; height: 100%; } .ai-hero_tint { inset: 0; background: radial-gradient(ellipse 46% 42% at 50% 46%, rgba(245, 239, 227, 0.55) 0%, rgba(245, 239, 227, 0) 100%), radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 214, 140, 0.22) 0%, rgba(255, 214, 140, 0) 70%), linear-gradient(to bottom, rgba(245, 239, 227, 0) 0%, rgba(245, 239, 227, 0.35) 45%, rgba(245, 239, 227, 0.85) 100%); } .ai-hero_in { left: 0; top: 0; width: 1440px; height: 820px; display: flex; flex-direction: column; align-items: center; padding-top: 150px; text-align: center; } .ai-badge { display: inline-flex; align-items: center; height: 40px; margin: 0; padding: 0 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(222, 172, 82, 0.45); box-shadow: 0 6px 18px rgba(160, 120, 50, 0.12); font: 500 16px/1 var(--ai-sans); color: #8a6a2e; } .ai-h1 { margin: 22px 0 0; font: 400 104px/1.05 var(--ai-serif); letter-spacing: -0.02em; color: var(--ai-ink); text-shadow: 0 2px 30px rgba(245, 239, 227, 0.6); } .ai-h1 .ai-grad { font-style: italic; } .ai-lead { width: 760px; margin: 26px 0 0; font: 400 22px/1.6 var(--ai-sans); color: #5b4d36; } .ai-hero_btns { display: flex; gap: 16px; margin-top: 36px; } .ai-trust { display: flex; align-items: center; gap: 14px; margin-top: 38px; font: 500 15px/1 var(--ai-sans); color: #6b5d45; } .ai-faces { display: flex; padding-left: 10px; } .ai-faces i { display: flex; width: 34px; height: 34px; margin-left: -10px; align-items: center; justify-content: center; border: 2px solid #ffffff; border-radius: 50%; font: 600 11px/1 var(--ai-sans); font-style: normal; color: #ffffff; background: linear-gradient(135deg, #cfdcc0, #9fb58f); } .ai-faces i:nth-child(2) { background: linear-gradient(135deg, #f3d3b0, #d9a27a); } .ai-faces i:nth-child(3) { background: linear-gradient(135deg, #d9cde8, #a996c4); } .ai-faces i:nth-child(4) { background: linear-gradient(135deg, #f3cf7a, #c98a2e); } .ai-h2 { left: 0; top: 96px; width: 1440px; text-align: center; font: 400 54px/1.1 var(--ai-serif); letter-spacing: -0.015em; color: var(--ai-ink); } .ai-sub { left: 0; top: 172px; width: 1440px; text-align: center; font: 400 19px/1.5 var(--ai-sans); color: var(--ai-body); } .ai-fcards { left: 104px; top: 236px; display: flex; gap: 40px; } .ai-fcard { position: relative; width: 384px; height: 330px; padding: 36px; border-radius: 24px; background: #fffdf8; border: 1px solid rgba(222, 190, 130, 0.25); box-shadow: 0 20px 50px rgba(140, 104, 40, 0.1), 0 2px 6px rgba(140, 104, 40, 0.05); } .ai-fcard_i { display: flex; width: 68px; height: 68px; align-items: center; justify-content: center; border-radius: 50%; font-size: 32px; line-height: 1; } .ai-fcard_i.is-sage { background: #e4ecd9; } .ai-fcard_i.is-peach { background: #f8e5c9; } .ai-fcard_i.is-lilac { background: #ece4f2; } .ai-fcard_h { margin: 24px 0 0; font: 700 24px/1.25 var(--ai-sans); color: var(--ai-ink); } .ai-fcard_p { margin: 12px 0 0; font: 400 17px/1.6 var(--ai-sans); color: var(--ai-body); } .ai-more { position: absolute; left: 36px; bottom: 32px; display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--ai-sans); color: var(--ai-gold); } .ai-stats { left: 80px; top: 0; width: 1280px; height: 220px; display: flex; align-items: center; } .ai-stat { flex: 1; text-align: center; border-left: 1px solid rgba(160, 130, 80, 0.22); } .ai-stat:first-child { border-left: 0; } .ai-stat_n { margin: 0; font: 400 58px/1 var(--ai-serif); background: linear-gradient(90deg, #d39b3b, #f0c46a 50%, #b8862f); -webkit-background-clip: text; background-clip: text; color: transparent; } .ai-stat_t { margin: 14px 0 0; font: 500 17px/1.2 var(--ai-sans); color: var(--ai-body); } .ai-kick { left: 630px; top: 40px; width: 180px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #f8e8c4; font: 600 14px/1 var(--ai-sans); color: #a87a2c; } .ai-quote { left: 280px; top: 96px; width: 880px; height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 64px; border-radius: 28px; background: #fffdf8; box-shadow: 0 24px 60px rgba(140, 104, 40, 0.12), 0 2px 6px rgba(140, 104, 40, 0.05); text-align: center; } .ai-quote_m { position: absolute; left: 36px; top: -6px; font: 400 160px/1 var(--ai-serif); color: rgba(222, 172, 82, 0.25); } .ai-quote .ai-stars { position: relative; font-size: 22px; } .ai-quote_t { position: relative; margin: 18px 0 0; font: italic 400 26px/1.5 var(--ai-serif); color: #3c3221; } .ai-quote_by { display: flex; align-items: center; gap: 14px; margin-top: 26px; text-align: left; } .ai-av { display: flex; width: 56px; height: 56px; align-items: center; justify-content: center; border: 3px solid #ffffff; border-radius: 50%; background: linear-gradient(135deg, #cfdcc0, #9fb58f); box-shadow: 0 6px 16px rgba(100, 120, 80, 0.25); font: 600 18px/1 var(--ai-sans); font-style: normal; color: #ffffff; } .ai-quote_by p { margin: 0; } .ai-quote_by b { display: block; font: 700 17px/1.2 var(--ai-sans); color: var(--ai-ink); } .ai-quote_by small { display: block; margin-top: 4px; font: 400 14px/1.2 var(--ai-sans); color: #9a8a6c; } .ai-cta { left: 80px; top: 40px; width: 1280px; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 28px; background: linear-gradient(120deg, #f6d98f 0%, #e8b45c 50%, #cf923a 100%); box-shadow: 0 24px 60px rgba(201, 138, 46, 0.3); text-align: center; } .ai-cta > * { position: relative; } .ai-cta_o { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 70%); } .ai-cta_o.is-a { left: -120px; top: -160px; width: 460px; height: 460px; } .ai-cta_o.is-b { right: -80px; bottom: -220px; width: 520px; height: 520px; } .ai-cta_h { margin: 0; font: 400 50px/1.15 var(--ai-serif); color: #ffffff; text-shadow: 0 2px 12px rgba(120, 80, 20, 0.25); } .ai-cta_p { margin: 14px 0 0; font: 400 19px/1.5 var(--ai-sans); color: rgba(255, 255, 255, 0.92); } .ai-cta .ai-pill { margin-top: 28px; } .ai-ft_top { left: 80px; top: 44px; width: 1280px; height: 44px; display: flex; align-items: center; justify-content: space-between; } .ai-ft_links { display: flex; gap: 36px; font: 500 15px/1 var(--ai-sans); color: #6b5d45; } .ai-socials { display: flex; gap: 12px; } .ai-socials i { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; box-shadow: 0 6px 16px rgba(140, 104, 40, 0.12); font: 600 15px/1 var(--ai-sans); font-style: normal; color: #a87a2c; } .ai-ft_base { left: 80px; top: 132px; width: 1280px; display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(160, 130, 80, 0.22); font: 400 14px/1 var(--ai-sans); color: #9a8a6c; } .ai-s > .ai-skel { inset: 0; z-index: 10; overflow: hidden; background: var(--ai-cream); pointer-events: none; } .ai-s.is-stats > .ai-skel, .ai-s.is-footer > .ai-skel { background: var(--ai-sand); } .ai-skel i { position: absolute; background: rgba(138, 116, 80, 0.13); } .ai-skel::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%); animation: ai-shimmer 1.8s ease-in-out infinite; } @keyframes ai-shimmer { from { transform: translateX(-100%); } to { transform: translateX(250%); } } .ai-prompt { position: relative; width: 980px; height: 76px; display: flex; align-items: center; gap: 16px; padding: 0 12px 0 28px; border-radius: 38px; background: #ffffff; border: 1px solid rgba(45, 36, 22, 0.08); box-shadow: 0 18px 50px rgba(60, 45, 20, 0.16), 0 2px 6px rgba(60, 45, 20, 0.06); } .ai-prompt_k { position: absolute; left: 30px; top: -34px; margin: 0; font: 500 14px/1 var(--ai-sans); color: #8a7a5e; white-space: nowrap; } .ai-prompt_i { flex: none; font-size: 24px; line-height: 1; } .ai-prompt_t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 17px/1.4 var(--ai-sans); letter-spacing: -0.01em; color: var(--ai-ink); } .ai-prompt_t::after { content: ""; display: inline-block; width: 2px; height: 22px; margin-left: 2px; vertical-align: -5px; background: var(--ai-ink); } .ai-prompt_go { display: flex; flex: none; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; background: #1f1a12; color: #ffffff; } .ai-prompt_go svg { display: block; } .ai-post { position: relative; width: 600px; height: 600px; display: flex; flex-direction: column; align-items: center; padding-top: 84px; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, #f8f1e2 0%, #f1e4c6 100%); text-align: center; } .ai-post > * { position: relative; margin: 0; } .ai-post_glow { position: absolute; left: 50px; top: 20px; width: 500px; height: 400px; border-radius: 50%; background: radial-gradient(ellipse, rgba(240, 196, 106, 0.35) 0%, rgba(240, 196, 106, 0) 70%); } .ai-post_n { margin-top: 20px; font: 700 40px/1 var(--ai-sans); letter-spacing: -0.01em; } .ai-post_k { margin-top: 10px; font: 600 12px/1 var(--ai-sans); letter-spacing: 0.32em; text-transform: uppercase; color: #a88a52; } .ai-post_h { margin-top: 40px; font: 400 44px/1.1 var(--ai-serif); } .ai-post_p { margin-top: 14px; font: 400 18px/1.5 var(--ai-sans); color: var(--ai-body); } .ai-post .ai-post_tags { position: absolute; left: 0; bottom: 34px; width: 600px; display: flex; justify-content: center; gap: 18px; font: 600 16px/1 var(--ai-sans); color: var(--ai-gold); } .ai-card { position: relative; width: 700px; height: 400px; padding: 48px 56px; overflow: hidden; border-radius: 24px; background: linear-gradient(135deg, #f5d488 0%, #dfa94c 52%, #b8822c 100%); box-shadow: 0 30px 70px rgba(150, 100, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); color: #ffffff; } .ai-card > .ai-logo { position: relative; } .ai-card_o { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.14); } .ai-card_o.is-a { right: -120px; top: -160px; width: 420px; height: 420px; } .ai-card_o.is-b { right: 60px; top: 120px; width: 220px; height: 220px; background: rgba(255, 255, 255, 0.08); } .ai-card_who { position: absolute; left: 56px; bottom: 56px; } .ai-card_n { margin: 0; font: 400 44px/1 var(--ai-serif); text-shadow: 0 2px 10px rgba(120, 80, 20, 0.2); } .ai-card_r { margin: 12px 0 0; font: 500 15px/1 var(--ai-sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); } .ai-card_c { position: absolute; right: 56px; bottom: 56px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .ai-card_c p { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 16px/1 var(--ai-sans); } .ai-card_c span { font-size: 15px; } .cp11 .st_beat[data-pos="center"] { left: 50%; bottom: auto; top: 50%; width: 72vw; transform: translate(-50%, -50%); text-align: center; } .cp11 .st_beat[data-pos="center"] .st_h { margin-left: auto; margin-right: auto; font-size: 6.2vw; } .cp11 .st_beat[data-pos="center"] .st_sub { max-width: 36vw; margin-left: auto; margin-right: auto; text-align: center; } .cp11 .st_beat[data-pos="center"] .st_links { justify-content: center; } .cp11 .st_beat[data-pos="top"] { top: 15vh; } .cz_black { position: absolute; inset: 0; z-index: 1; background: #050505; opacity: 0; pointer-events: none; } .cp11 .st_fade { display: none; } .cz_scrims { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 1.1s ease; } .cz_scrims i { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; } .cz_scrims i.is-on { opacity: 1; } .cz_scrims::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30vh; background: linear-gradient(to bottom, rgba(10, 14, 10, 0.5), rgba(10, 14, 10, 0.22) 45%, rgba(10, 14, 10, 0)); opacity: 0; transition: opacity 0.8s ease; } .cz_scrims.is-sky::before { opacity: 1; } .cz_scrims .is-corner-light::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 64% 74% at 0% 100%, rgba(241, 241, 243, 0.94) 0%, rgba(241, 241, 243, 0.84) 46%, rgba(241, 241, 243, 0) 86%); opacity: 0; transition: opacity 0.8s ease; } .cz_scrims.is-veil .is-corner-light::after { opacity: 1; } .cz_scrims .is-corner-dark { background: linear-gradient(to bottom, rgba(4, 4, 5, 0.62), rgba(4, 4, 5, 0) 15vh), radial-gradient(ellipse 58% 64% at 0% 100%, rgba(4, 4, 5, 0.86) 0%, rgba(4, 4, 5, 0.48) 44%, rgba(4, 4, 5, 0) 80%); } .cz_scrims .is-corner-light { background: linear-gradient(to bottom, rgba(241, 241, 243, 0.86), rgba(241, 241, 243, 0) 15vh), radial-gradient(ellipse 60% 66% at 0% 100%, rgba(241, 241, 243, 0.97) 0%, rgba(241, 241, 243, 0.86) 40%, rgba(241, 241, 243, 0) 80%); } .cz_scrims .is-centre-dark { background: radial-gradient(ellipse 60% 52% at 50% 50%, rgba(4, 4, 5, 0.82) 0%, rgba(4, 4, 5, 0.5) 50%, rgba(4, 4, 5, 0) 100%); } .cz_scrims .is-centre-light { background: radial-gradient(ellipse 60% 52% at 50% 50%, rgba(241, 241, 243, 0.92) 0%, rgba(241, 241, 243, 0.62) 50%, rgba(241, 241, 243, 0) 100%); } .cz_scrims .is-golf { background: linear-gradient(to bottom, rgba(10, 14, 10, 0.55), rgba(10, 14, 10, 0) 34vh), linear-gradient(to top, rgba(10, 14, 10, 0.5), rgba(10, 14, 10, 0) 26vh); } .cp11 .st_pin.is-golf .st_ui, .gg-fade { transition: opacity 1.1s cubic-bezier(0.3, 0.6, 0.2, 1), color 0.35s ease, text-shadow 0.35s ease; } .cp11 .st_pin.is-golf.gg-busy .st_ui, .cp11 .st_pin.gg-busy .gg-fade { opacity: 0; transition-duration: 0.4s; } .cp11 .st_pin.is-golf.gg-busy .cz_scrims { opacity: 0.45; transition-duration: 0.5s; } .gg_pad { position: absolute; inset: 0; z-index: 4; display: none; cursor: crosshair; touch-action: pan-y; } .cp11 .st_pin.is-golf .gg_pad { display: block; } .gg_pad:active { cursor: grabbing; } .gg { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: #ffffff; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s 0.45s; } .cp11 .st_pin.is-golf .gg { opacity: 1; visibility: visible; transition: opacity 0.45s ease 0.15s, visibility 0s; } .gg p, .gg dl, .gg dd { margin: 0; } .gg .mono { font-family: "Geist Mono", monospace; font-size: clamp(10.5px, 0.68vw, 12px); letter-spacing: 0.04em; text-transform: uppercase; } .gg_top { position: absolute; right: 2.5vw; top: 15vh; width: 15vw; min-width: 210px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); text-align: right; text-shadow: 0 0 24px rgba(10, 14, 10, 0.5); } .gg_top .label-mono { color: rgba(255, 255, 255, 0.7); } .gg_hole-n { display: flex; justify-content: flex-end; gap: 1vw; margin-top: 10px !important; font-size: 2.3vw; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .gg_hole-n span:first-child { color: rgba(255, 255, 255, 0.55); } .gg_wind { position: absolute; right: 2.5vw; top: calc(15vh + 2.3vw + 62px); display: flex; align-items: center; gap: 10px; text-shadow: 0 0 18px rgba(10, 14, 10, 0.6); } .gg_wind i { position: relative; display: block; width: 22px; height: 24px; filter: drop-shadow(0 0 6px rgba(10, 14, 10, 0.55)); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); } .gg_wind i::before { content: ""; position: absolute; left: 50%; top: 2px; bottom: 1px; width: 1.5px; background: #f1eada; transform: translateX(-50%); } .gg_wind i::after { content: ""; position: absolute; left: 50%; top: 2px; width: 7px; height: 7px; border-left: 1.5px solid #f1eada; border-top: 1.5px solid #f1eada; transform: translateX(-50%) rotate(45deg); transform-origin: 50% 50%; margin-left: 0; } .gg_wind b { font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; } .gg_stats { position: absolute; right: 2.5vw; top: calc(15vh + 2.3vw + 108px); width: 15vw; min-width: 210px; } .gg_stats > div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); } .gg_stats dt { color: rgba(255, 255, 255, 0.62); } .gg_stats dd { font-size: 1.25vw; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .gg_hint { position: absolute; left: 50%; bottom: calc(4.6vh + 136px); transform: translateX(-50%); white-space: nowrap; color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); } .gg_hint span { color: rgba(255, 255, 255, 0.5); } .gg:not(.has-played) .gg_hint { opacity: 1 !important; } .gg.is-result .gg_hint { opacity: 0 !important; } .gg_clubs, .gg_tees { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .gg_clubs { position: absolute; right: calc(2.5vw + 64px); bottom: 4.6vh; display: flex; gap: 6px; pointer-events: auto; } .gg_club { position: relative; display: flex; flex-direction: column; align-items: center; width: 90px; padding: 4px 0 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(10, 14, 10, 0.34); color: #ffffff; font-family: Aspekta, Arial, sans-serif; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } .gg_club img { display: block; width: 84px; height: 63px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease; } .gg_club b { font-weight: 400; font-size: 17px; line-height: 1; letter-spacing: -0.03em; } .gg_club span { margin-top: 5px; color: rgba(255, 255, 255, 0.58); font-size: 10px !important; white-space: nowrap; } .gg_club kbd { position: absolute; left: 7px; top: 6px; font-size: 9px !important; color: rgba(255, 255, 255, 0.34); } .gg_club:hover { border-color: rgba(255, 255, 255, 0.55); transform: translateY(-3px); } .gg_club:hover img { transform: translateY(-2px) rotate(-5deg); } .gg_club.is-on { background: #f1eada; border-color: #f1eada; color: #121212; transform: translateY(-6px); } .gg_club.is-on img { filter: drop-shadow(0 6px 8px rgba(40, 30, 10, 0.28)); } .gg_club.is-on span, .gg_club.is-on kbd { color: rgba(18, 18, 18, 0.55); } .gg_club.is-on::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 5px; height: 5px; border-radius: 50%; background: #d6b46a; transform: translateX(-50%); } .gg_club:focus-visible, .gg_tee:focus-visible { outline: 1px dashed #ffffff; outline-offset: 3px; } .gg_tees { position: absolute; left: 2.5vw; bottom: 4.6vh; pointer-events: auto; } .gg_tees[hidden] { display: none; } .gg_tees .label-mono { margin-bottom: 10px !important; color: rgba(255, 255, 255, 0.62); text-shadow: 0 0 18px rgba(10, 14, 10, 0.6); } .gg_tees-r { display: flex; gap: 4px; } .gg_tee { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 58px; padding: 9px 8px 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(10, 14, 10, 0.34); color: #ffffff; text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .gg_tee b { font: 400 21px/1 Aspekta, Arial, sans-serif; letter-spacing: -0.04em; } .gg_tee b i { margin-left: 2px; font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.5); } .gg_tee span { font-size: 9px !important; color: rgba(255, 255, 255, 0.55); white-space: nowrap; } .gg_tee em { min-height: 1.2em; font-style: normal; font-size: 9px !important; color: #d6b46a; white-space: nowrap; } .gg_tee:hover { border-color: rgba(255, 255, 255, 0.55); } .gg_tee.is-on { background: #f1eada; border-color: #f1eada; color: #121212; } .gg_tee.is-on b i, .gg_tee.is-on span { color: rgba(18, 18, 18, 0.55); } .gg_tee.is-on em { color: #8a6a2c; } .gg.is-aiming .gg_clubs, .gg.is-aiming .gg_tees { opacity: 0.18; } .gg.is-aiming .gg_clubs { transform: translateY(10px); } .gg_sling { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } .gg_sling.is-on { opacity: 1; } .gg_sling-track { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 2; } .gg_sling-pow { fill: none; stroke: #f1eada; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); transition: stroke 0.2s ease; } .gg_sling.is-hot .gg_sling-pow, .gg_sling.is-hot .gg_sling-band { stroke: #d6b46a; } .gg_sling-band { stroke: #f1eada; stroke-linecap: round; opacity: 0.9; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4)); } .gg_sling-a { fill: #f1eada; } .gg_sling-k { fill: rgba(241, 234, 218, 0.16); stroke: #f1eada; stroke-width: 1.5; } .gg_read { position: absolute; left: 0; top: 0; white-space: nowrap; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.2s ease; } .gg_read b { font-weight: 400; color: #ffffff; } .gg_read.is-on { opacity: 1; } .gg_grip { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; touch-action: none; cursor: grab; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s 0.4s; } .gg_grip.is-on { opacity: 1; visibility: visible; transition: opacity 0.4s ease; } .gg_grip::before { content: ""; position: absolute; left: -64px; top: -64px; width: 128px; height: 128px; border-radius: 50%; } .gg_grip i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 1px solid rgba(241, 234, 218, 0.75); border-radius: 50%; animation: gg-ring 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; } .gg_grip b { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #f1eada; box-shadow: 0 0 12px rgba(241, 234, 218, 0.6); animation: gg-pull 2.6s cubic-bezier(0.5, 0, 0.2, 1) infinite; } .gg_grip::after { content: ""; position: absolute; left: -0.5px; top: 0; width: 1px; height: 64px; background: linear-gradient(to bottom, rgba(241, 234, 218, 0), rgba(241, 234, 218, 0.85)); transform-origin: 50% 0; transform: scaleY(0); animation: gg-line 2.6s cubic-bezier(0.5, 0, 0.2, 1) infinite; pointer-events: none; } .gg_grip span { position: absolute; left: 0; top: -46px; transform: translateX(-50%); white-space: nowrap; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); } .gg.has-played .gg_grip b, .gg.has-played .gg_grip span, .gg.has-played .gg_grip::after { display: none; } .gg.has-played .gg_grip i { animation: none; opacity: 0.32; transform: scale(0.8); } @keyframes gg-ring { 0% { transform: scale(0.8); opacity: 0; } 25% { opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } } @keyframes gg-pull { 0%, 12% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 62% { transform: translateY(64px); opacity: 1; } 70% { transform: translateY(-10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } @keyframes gg-line { 0%, 12% { transform: scaleY(0); opacity: 0; } 20% { opacity: 1; } 62% { transform: scaleY(1); opacity: 1; } 70%, 100% { transform: scaleY(0); opacity: 0; } } .gg_result { position: absolute; left: 50%; top: 50%; min-width: 30vw; padding: 32px 40px 30px; transform: translate(-50%, -42%); text-align: center; background: rgba(12, 14, 12, 0.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.16); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.35s; } .gg.is-result .gg_result { opacity: 1; visibility: visible; transform: translate(-50%, -50%); pointer-events: auto; transition: opacity 0.35s ease 0.25s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s, visibility 0s; } .gg_result-k { min-height: 1em; margin-bottom: 14px !important; color: #d6b46a; } .gg_result-t { font-size: 3.4vw; line-height: 1; letter-spacing: -0.06em; } .gg_result-s { margin-top: 12px !important; color: rgba(255, 255, 255, 0.72); } .gg_result-b { display: flex; justify-content: center; gap: 14px; margin-top: 26px; } .gg_result-b [hidden] { display: none; } .gg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(214, 180, 106, 0.3), rgba(214, 180, 106, 0) 70%); opacity: 0; pointer-events: none; } .gg.is-ace::before { animation: gg-glow 3.2s ease-out 0.1s both; } .gg.is-ace .gg_result { min-width: 34vw; padding: 34px 54px 34px; background: rgba(28, 57, 52, 0.9); border-color: #d6b46a; box-shadow: 0 0 0 6px rgba(28, 57, 52, 0.5), 0 0 0 7px rgba(214, 180, 106, 0.55), 0 30px 120px rgba(214, 180, 106, 0.25); } .gg.is-ace .gg_result-t { font-family: "Pinyon Script", cursive; font-size: 6.4vw; line-height: 1.05; letter-spacing: 0; color: #e8cb88; text-shadow: 0 0 40px rgba(214, 180, 106, 0.45); } .gg.is-ace .gg_result-s { color: #f1eada; } .gg.is-ace .gg_result::before, .gg.is-ace .gg_result::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border: 1px solid #d6b46a; border-radius: 50%; transform: translate(-50%, -50%); animation: gg-ace 1.8s cubic-bezier(0.1, 0.7, 0.2, 1) 0.2s both; pointer-events: none; } .gg.is-ace .gg_result::after { border-color: #f1eada; animation-delay: 0.55s; } @keyframes gg-ace { from { width: 40px; height: 40px; opacity: 1; } to { width: 150vh; height: 150vh; opacity: 0; } } @keyframes gg-glow { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0.35; } } @media (hover: none) { .gg_club kbd { display: none; } } @media (max-width: 1366px) { .gg_club { width: 82px; } .gg_club img { width: 76px; height: 57px; } .gg_tee { width: 54px; } } @media (max-width: 1180px) { .gg_club { width: 68px; } .gg_club img { width: 62px; height: 46px; } .gg_tee { width: 46px; padding: 8px 6px 7px; } .gg_tee span { display: none; } } .mc-page .mg-real { background: #efe8d8; } .mc-shot, .mc-hero_photo { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .mc-hero_nav, .mc-hero_title { position: absolute; display: block; } .mc-wfs { position: absolute; inset: 0; visibility: hidden; pointer-events: none; } .mc-wf { position: absolute; } .mc-concept .mg-real { position: absolute; left: 0; width: 100%; } .mc-mood { position: relative; width: 3000px; height: 1800px; transform-style: preserve-3d; } .mc-mood_c { --pick: 0; position: absolute; box-sizing: border-box; padding: 14px; background: #fbf8f1; box-shadow: 0 18px 40px rgba(30, 24, 12, 0.14); outline: calc(var(--pick) * 8px) solid rgba(214, 180, 106, var(--pick)); outline-offset: 12px; } .mc-mood_c img { display: block; width: 100%; height: 100%; object-fit: cover; } .mc-mood_c.is-img::before { content: ""; position: absolute; left: 50%; top: -16px; width: 120px; height: 34px; margin-left: -60px; background: rgba(236, 230, 214, 0.78); box-shadow: 0 1px 3px rgba(30, 24, 12, 0.12); transform: rotate(-3deg); } .mc-mood_c.is-img:nth-child(3n)::before { transform: rotate(4deg); margin-left: -20px; } .mc-mood_pick { position: absolute; right: -26px; top: -26px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #d6b46a; color: #101010; font: 400 28px/1 Aspekta, Arial, sans-serif; opacity: var(--pick); transform: scale(calc(0.4 + var(--pick) * 0.6)); } .mc-mood_c.is-type { padding: 40px 44px; background: #f1eada; color: #1c3934; } .mc-mood_aa { margin: 0; font: 300 170px/0.9 "Archivo Expanded", Aspekta, sans-serif; letter-spacing: -0.04em; } .mc-mood_tn { margin: 26px 0 0; font: 400 22px/1 "Geist Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; } .mc-mood_ts { position: absolute; right: 40px; bottom: 34px; margin: 0; font: 400 64px/1 "Pinyon Script", serif; color: #3a1614; } .mc-mood_c.is-swatch { display: flex; gap: 10px; } .mc-mood_c.is-swatch i { flex: 1; } .mc-note { position: absolute; box-sizing: border-box; width: 820px; padding: 44px 48px 50px; background: #ffffff; color: #121212; box-shadow: 0 18px 40px rgba(30, 24, 12, 0.12); } .mc-note p { margin: 0; } .mc-note_k { font: 400 20px/1 "Geist Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8579; margin-bottom: 30px !important; } .mc-note_q { margin-top: 26px !important; font: 400 22px/1.2 "Geist Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8579; } .mc-note_a { min-height: 46px; margin-top: 8px !important; font: 400 40px/1.15 Aspekta, Arial, sans-serif; letter-spacing: -0.03em; } .mc-word { position: absolute; margin: 0; padding: 16px 26px; border: 1.5px solid #121212; color: #121212; font: 400 30px/1 "Geist Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; background: #fbf8f1; box-shadow: 0 10px 24px rgba(30, 24, 12, 0.14); } .cp11 .mv-board { height: 675px; } .cp11 .mv-board .mg-con { top: -62.5px; bottom: auto; height: 800px; } .cp11 .mv-board .mv-ext, .cp11 .mv-board > .mg-curwrap { margin-top: -62.5px; } .mc-label { display: flex; align-items: baseline; gap: 22px; width: 420px; margin: 0; color: #121212; font: 400 58px/1 Aspekta, Arial, sans-serif; letter-spacing: -0.04em; white-space: nowrap; } .mc-label span { font: 400 24px/1 "Geist Mono", monospace; letter-spacing: 0.06em; color: #8a8579; } .mg-concept.mcc { height: 931px; background: #101010; color: #f1eada; } .mcc-a, .mcc-c { position: absolute; left: 0; top: 0; width: 1440px; height: 931px; overflow: hidden; font-family: "Archivo Expanded", "Helvetica Neue", Arial, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; } .mcc-a *, .mcc-c * { box-sizing: border-box; } .mcc-a > *, .mcc-c > * { position: absolute; margin: 0; } .mcc-brand { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 400; line-height: 16px; letter-spacing: 0.18em; text-transform: uppercase; } .mcc-brand .mv-lion { display: block; } .mcc-menu { display: flex; gap: 40px; font-size: 13px; font-weight: 400; line-height: 16px; letter-spacing: 0.04em; } .mcc-btn { font-size: 13px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .mg-concept_tag.mcc-tag { right: 56px; bottom: 40px; z-index: 3; color: #f1eada; background: rgba(16, 16, 16, 0.78); } .mcc-a { color: #f1eada; } .mcc-a_pic { left: 0; bottom: 0; display: block; width: 1440px; height: 931px; object-fit: cover; } .mcc-a_shade { inset: 0; background: linear-gradient(to top, rgba(8, 12, 10, 0.62) 0%, rgba(8, 12, 10, 0.3) 22%, rgba(8, 12, 10, 0) 46%); } .mcc-a_nav { left: 50px; top: 48px; width: 1340px; display: flex; align-items: center; justify-content: space-between; } .mcc-a_foot { left: 50px; bottom: 104px; width: 1340px; display: flex; justify-content: space-between; align-items: last baseline; } .mcc-a_h { margin: 0; font-size: 72px; font-weight: 250; line-height: 80px; letter-spacing: -0.02em; } .mcc-c { background: #f1eada; color: #1c3934; } .mcc-c_pic { left: 600px; top: 0; display: block; width: 840px; height: 931px; object-fit: cover; } .mcc-c_nav { left: 0; top: 0; width: 1440px; height: 96px; display: flex; align-items: center; padding: 0 72px; border-bottom: 1px solid rgba(28, 57, 52, 0.2); } .mcc-c_nav::after { content: ""; position: absolute; left: 600px; right: 0; bottom: -1px; height: 1px; background: rgba(241, 234, 218, 0.5); } .mcc-c_in { left: 72px; top: 96px; width: 456px; height: 835px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .mcc-c_in .mv-lion { display: block; } .mcc-c_word { margin: 24px 0 0; font-size: 15px; font-weight: 400; line-height: 16px; letter-spacing: 0.32em; text-transform: uppercase; } .mcc-c_h { margin: 72px 0 0; font-size: 48px; font-weight: 250; line-height: 56px; letter-spacing: -0.015em; } .mcc-c_p { max-width: 352px; margin: 24px 0 0; font-size: 14px; line-height: 24px; color: rgba(28, 57, 52, 0.78); } .mcc-c_in .mcc-btn { margin-top: 48px; } @media (max-width: 1024px) { .cp11 .st_chapter { --per: 0.85 !important; } .st_beat, .cp11 .st_beat, .cp11 .st_beat[data-w="wide"] { width: 64vw; } .st_h, .cp11 .st_h { font-size: 6vw; } .st_sub, .cp11 .st_sub { max-width: 52vw; } .cp11 .st_beat[data-pos="center"] { width: 84vw; } .cp11 .st_beat[data-pos="center"] .st_h { font-size: 8vw; } .cp11 .st_beat[data-pos="center"] .st_sub { max-width: 58vw; } .cp11 .st_count { transition: color 0.35s ease, opacity 0.45s ease; } .cp11 .st_pin.is-golf .st_count { opacity: 0; } .gg_top { top: auto; bottom: calc(3dvh + 196px + env(safe-area-inset-bottom)); right: 16px; width: auto; min-width: 0; padding-bottom: 0; border-bottom: 0; } .gg_top .label-mono { display: none; } .gg_hole-n { margin-top: 0 !important; font-size: clamp(20px, 5.6vw, 34px); gap: 8px; } .gg_wind { right: 16px; top: auto; bottom: calc(3dvh + 172px + env(safe-area-inset-bottom)); } .gg_stats { display: none; } .gg_hint { bottom: calc(3dvh + 236px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); white-space: normal; text-align: center; } .gg_hint span { display: none; } .gg_tees { left: 16px; right: 16px; bottom: calc(3dvh + 88px + env(safe-area-inset-bottom)); } .gg_tees .label-mono { display: none; } .gg_tees-r { gap: 4px; } .gg_tee { flex: 1; min-width: 0; width: auto; padding: 7px 6px 6px; } .gg_tee b { font-size: 16px; } .gg_clubs { left: 16px; right: 16px; bottom: calc(3dvh + env(safe-area-inset-bottom)); gap: 4px; } .gg_club { flex: 1; width: auto; padding: 2px 0 7px; } .gg_club img { width: 100%; max-width: 76px; height: 38px; } .gg_club b { font-size: 14px; } .gg_club span { margin-top: 3px; font-size: 8.5px !important; } .gg_club kbd { display: none; } .gg_club.is-on { transform: translateY(-3px); } .gg_club.is-on::after { bottom: -8px; } } @media (min-width: 768px) and (max-width: 1024px) { .cz_scrims .is-golf { background: linear-gradient(to bottom, rgba(10, 14, 10, 0.62), rgba(10, 14, 10, 0.36) 22vh, rgba(10, 14, 10, 0) 40vh), linear-gradient(to top, rgba(10, 14, 10, 0.5), rgba(10, 14, 10, 0) 28vh); } } @media (max-width: 767px) { .cp11 .st_chapter { --per: 0.7 !important; } .st_beat, .cp11 .st_beat, .cp11 .st_beat[data-w="wide"], .st_beat[data-pos="right"] { left: 16px; right: 16px; bottom: calc(8dvh + env(safe-area-inset-bottom)); width: auto; } .st_beat[data-pos="top"] { top: 13dvh; bottom: auto; } .st_label { margin-bottom: 1.8vh; } .st_h, .cp11 .st_h { font-size: 10.4vw; line-height: 1; letter-spacing: -0.055em; } .st_sub, .cp11 .st_sub { max-width: none; margin-top: 2.2vh; } .st_links { flex-wrap: wrap; gap: 12px; margin-top: 3vh; } .st_meta p { grid-template-columns: max-content 1fr; gap: 1.6em; } .st_count { right: 16px; bottom: calc(3dvh + env(safe-area-inset-bottom)); } .cp11 .st_beat[data-pos="center"] { left: 50%; right: auto; bottom: auto; width: calc(100vw - 32px); } .cp11 .st_beat[data-pos="center"] .st_h { font-size: 12vw; } .cp11 .st_beat[data-pos="center"] .st_sub { max-width: 86vw; } .cz_scrims .is-corner-dark { background: linear-gradient(to bottom, rgba(4, 4, 5, 0.45), rgba(4, 4, 5, 0) 12dvh), linear-gradient(to top, rgba(4, 4, 5, 0.62) 0%, rgba(4, 4, 5, 0.36) 22%, rgba(4, 4, 5, 0.12) 36%, rgba(4, 4, 5, 0) 46%); } .cz_scrims .is-corner-light { background: linear-gradient(to bottom, rgba(241, 241, 243, 0.6), rgba(241, 241, 243, 0) 12dvh), linear-gradient(to top, rgba(241, 241, 243, 0.72) 0%, rgba(241, 241, 243, 0.42) 22%, rgba(241, 241, 243, 0.14) 36%, rgba(241, 241, 243, 0) 46%); } .cz_scrims .is-corner-light::after { background: linear-gradient(to top, rgba(241, 241, 243, 0.88) 0%, rgba(241, 241, 243, 0.76) 24%, rgba(241, 241, 243, 0.42) 36%, rgba(241, 241, 243, 0) 48%); } .cz_scrims .is-centre-dark { background: radial-gradient(ellipse 90% 36% at 50% 50%, rgba(4, 4, 5, 0.6) 0%, rgba(4, 4, 5, 0.3) 55%, rgba(4, 4, 5, 0) 100%); } .cz_scrims .is-centre-light { background: radial-gradient(ellipse 90% 36% at 50% 50%, rgba(241, 241, 243, 0.72) 0%, rgba(241, 241, 243, 0.38) 55%, rgba(241, 241, 243, 0) 100%); } .st_label, .st_sub, .st_meta, .st_steps { text-shadow: 0 0 12px rgba(4, 4, 5, 0.5); } .st_glow { background: radial-gradient(closest-side, rgba(4, 4, 5, 0.36), rgba(4, 4, 5, 0.16) 58%, rgba(4, 4, 5, 0) 100%); } .cp11 .st_pin.is-golf .st_beat[data-pos="top"] .st_sub { display: none; } .gg_result { min-width: 0; width: calc(100vw - 32px); padding: 24px 20px; } .gg_result-t { font-size: 9vw; } .gg.is-ace .gg_result { min-width: 0; padding: 28px 20px; } .gg.is-ace .gg_result-t { font-size: 15vw; } .gg_result-b { flex-wrap: wrap; gap: 10px; } }