[data-theme='fresh'] { --sv-ink: oklch(0.222 0.026 164); --sv-ink-2: oklch(0.47 0.022 164); /* ink-3 is muted text: >= 4.5:1 on white and on the mint panel. */ --sv-ink-3: oklch(0.52 0.016 164); --sv-bg: #ffffff; --sv-surface: #ffffff; --sv-surface-2: oklch(0.967 0.009 161); --sv-line: oklch(0.931 0.013 160); --sv-line-strong: oklch(0.87 0.02 160); --sv-mint: oklch(0.97 0.013 160); --sv-mint-pill: oklch(0.954 0.023 164); --sv-mint-shape: oklch(0.931 0.035 160); --sv-primary-soft: var(--sv-mint-pill); --sv-primary-tint: oklch(0.884 0.047 161); --sv-primary-ink: color-mix(in oklab, var(--primary) 78%, black); /* Primary as a light tint (hover ring + focus on the deep stage). */ --sv-primary-light: color-mix(in oklab, var(--primary) 55%, white); --sv-stage: oklch(0.316 0.058 166); --sv-stage-2: oklch(0.526 0.106 162); --sv-stage-line: oklch(0.86 0.1 160); --sv-on-stage: #ffffff; --sv-on-stage-2: oklch(0.85 0.037 163); --sv-on-primary: var(--primary-foreground, #fff); --sv-lime: #c8f25a; --sv-on-lime: var(--sv-stage); --sv-lime-soft: color-mix(in oklab, var(--sv-lime) 32%, white); --sv-lime-glow: color-mix(in srgb, var(--sv-lime) 19%, transparent); /* Rotated square inside the mint panels: pale lime on green primaries (mockup F), the primary's own pale tint for other hues (single family). */ --sv-panel-square: var(--sv-lime-soft); /* Legacy names kept for the area skins. */ --sv-signal: var(--sv-lime); --sv-signal-ink: var(--sv-on-lime); /* Semantic status (small chips and text only). */ --sv-ok: oklch(0.52 0.13 152); --sv-ok-soft: oklch(0.965 0.035 152); --sv-err: oklch(0.55 0.2 27); --sv-err-soft: oklch(0.97 0.022 27); --sv-hot: var(--sv-err); --sv-hot-soft: var(--sv-err-soft); --sv-star: oklch(0.8 0.16 80); --sv-ring: var(--primary); --sv-notch-bg: var(--sv-bg); --sv-glow: 0 18px 30px -18px color-mix(in oklab, var(--primary) 55%, transparent); --sv-radius-xl: 30px; --sv-radius-lg: 18px; --sv-radius: 16px; --sv-radius-sm: 12px; --sv-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 10px 24px -20px rgb(0 0 0 / 0.3); --sv-shadow-lg: 0 1px 0 rgb(0 0 0 / 0.04), 0 24px 44px -26px oklch(0.3 0.05 160 / 0.38); --sv-container: 1240px; --sv-gutter: clamp(16px, 4vw, 32px); --sv-section-gap: clamp(48px, 5.6vw, 72px); font-family: var(--font-theme-body), system-ui, sans-serif; color: var(--sv-ink); -webkit-font-smoothing: antialiased; } @supports (color: oklch(from red l c h)) { [data-theme='fresh'] { --sv-ink: oklch(from var(--primary) 0.222 min(c, 0.026) h); --sv-ink-2: oklch(from var(--primary) 0.47 min(c, 0.022) h); --sv-ink-3: oklch(from var(--primary) 0.52 min(c, 0.016) h); --sv-surface-2: oklch(from var(--primary) 0.967 min(c, 0.009) h); --sv-line: oklch(from var(--primary) 0.931 min(c, 0.013) h); --sv-line-strong: oklch(from var(--primary) 0.87 min(c, 0.02) h); --sv-mint: oklch(from var(--primary) 0.97 min(calc(c * 0.11), 0.014) h); --sv-mint-pill: oklch(from var(--primary) 0.954 min(calc(c * 0.18), 0.024) h); --sv-mint-shape: oklch(from var(--primary) 0.931 min(calc(c * 0.29), 0.036) h); --sv-primary-tint: oklch(from var(--primary) 0.884 min(calc(c * 0.38), 0.048) h); /* Primary as text on white / mint (>= 4.5:1). */ --sv-primary-ink: oklch(from var(--primary) min(l, 0.47) min(c, 0.12) h); --sv-primary-light: oklch(from var(--primary) 0.83 min(c, 0.12) h); --sv-stage: oklch(from var(--primary) 0.316 min(calc(c * 0.47), 0.065) h); --sv-stage-2: oklch(from var(--primary) 0.526 min(calc(c * 0.86), 0.11) h); --sv-stage-line: oklch(from var(--primary) 0.86 min(calc(c * 0.8), 0.1) h); --sv-on-stage-2: oklch(from var(--primary) 0.85 min(calc(c * 0.3), 0.04) h); } } /* K = how close the primary hue is to green (1 within 40deg of h160, 0 beyond 60deg). */ @supports (color: oklch(from red l c calc(h + abs(mod(h - 10, 360) - 180)))) { [data-theme='fresh'] { --sv-panel-square: oklch(from var(--primary) 0.955 calc(0.067 * clamp(0, (60 - abs(mod(h - 340, 360) - 180)) / 20, 1) * clamp(0, (c - 0.05) / 0.05, 1) + 0.03 * (1 - clamp(0, (60 - abs(mod(h - 340, 360) - 180)) / 20, 1) * clamp(0, (c - 0.05) / 0.05, 1))) calc(122 * clamp(0, (60 - abs(mod(h - 340, 360) - 180)) / 20, 1) * clamp(0, (c - 0.05) / 0.05, 1) + h * (1 - clamp(0, (60 - abs(mod(h - 340, 360) - 180)) / 20, 1) * clamp(0, (c - 0.05) / 0.05, 1)))); } } /* Lime moves toward yellow when the primary hue sits within ~24deg of it (lime / yellow-green brands); full shift within 14deg. Grey primaries never shift. */ @supports (color: oklch(from red l c calc(h + abs(mod(h - 10, 360) - 180)))) { [data-theme='fresh'] { --sv-lime: oklch(from var(--primary) 0.903 0.182 calc(123.2 - 31 * clamp(0, (24 - abs(mod(h - 303.2, 360) - 180)) / 10, 1) * clamp(0, (c - 0.05) / 0.05, 1))); } } /* Text on primary: white while the primary is dark enough (Y <= 0.205), deep ink otherwise. */ @supports (color: color(from red xyz-d65 x y z)) { [data-theme='fresh'] { --sv-on-primary: color(from var(--primary) xyz-d65 calc(0.9505 * clamp(0, (0.205 - y) * 1000, 1) + 0.0085 * (1 - clamp(0, (0.205 - y) * 1000, 1))) calc(clamp(0, (0.205 - y) * 1000, 1) + 0.0115 * (1 - clamp(0, (0.205 - y) * 1000, 1))) calc(1.089 * clamp(0, (0.205 - y) * 1000, 1) + 0.0104 * (1 - clamp(0, (0.205 - y) * 1000, 1)))); } } [data-theme='fresh'] body, [data-theme='fresh'] .upl-store { background: var(--sv-bg); } [data-theme='fresh'] ::selection { background: var(--sv-mint-shape); color: var(--sv-ink); } [data-theme='fresh'] :is(h1, h2, h3, h4) { font-family: var(--font-theme-heading), system-ui, sans-serif; letter-spacing: -0.02em; } [data-theme='fresh'] :is(button, a, input, select, textarea, summary, [role='button']):focus-visible { outline: 3px solid color-mix(in oklab, var(--primary) 55%, white); outline-offset: 2px; } /* Layout */ [data-theme='fresh'] .sv-container { width: 100%; max-width: var(--sv-container); margin-inline: auto; padding-inline: var(--sv-gutter); } [data-theme='fresh'] .sv-section { margin-top: var(--sv-section-gap); } [data-theme='fresh'] .sv-section:first-child { margin-top: 0; } /* Section heading: kicker pill + title + optional action */ [data-theme='fresh'] .sv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 20px; margin-bottom: 22px; } [data-theme='fresh'] .sv-section-kicker { display: inline-flex; align-items: center; gap: 7px; width: fit-content; min-height: 26px; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 12.5px; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; } [data-theme='fresh'] .sv-section-kicker svg { width: 14px; height: 14px; flex-shrink: 0; color: currentColor; stroke-width: 2.3; } [data-theme='fresh'] .sv-section-title { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: var(--sv-ink); text-wrap: balance; } [data-theme='fresh'] .sv-section-sub { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); max-width: 60ch; } [data-theme='fresh'] .sv-section-link { position: relative; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; min-height: 38px; padding: 0 12px 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--sv-primary-ink); background: var(--sv-mint-pill); transition: background-color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-section-link svg { width: 16px; height: 16px; flex-shrink: 0; } [data-theme='fresh'] .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-ring); } /* 38px pill, 46px hit area */ [data-theme='fresh'] .sv-section-link::after { content: ''; position: absolute; inset: -4px; } /* Surfaces */ [data-theme='fresh'] .sv-card { background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow); } /* Chips & badges */ [data-theme='fresh'] .sv-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; background: var(--sv-surface-2); color: var(--sv-ink-2); border: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-chip svg { width: 13px; height: 13px; } [data-theme='fresh'] .sv-chip--primary { background: var(--sv-mint-pill); color: var(--sv-primary-ink); border-color: transparent; } /* Highlights: lime with deep-stage text (>= 4.5:1). */ [data-theme='fresh'] :is(.sv-chip--signal, .sv-chip--hot) { background: var(--sv-lime); color: var(--sv-on-lime); border-color: transparent; font-weight: 800; } [data-theme='fresh'] .sv-chip--glass { background: rgb(255 255 255 / 0.18); color: #fff; border-color: rgb(255 255 255 / 0.28); backdrop-filter: blur(6px); } /* Buttons */ [data-theme='fresh'] .sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 700; border: 1px solid transparent; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; cursor: pointer; } [data-theme='fresh'] .sv-btn--primary { background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 8px 18px -10px var(--primary); } [data-theme='fresh'] .sv-btn--primary:hover { background: color-mix(in oklab, var(--primary) 88%, black); } [data-theme='fresh'] .sv-btn--primary:disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); border-color: var(--sv-line-strong); border-style: dashed; box-shadow: none; cursor: not-allowed; } [data-theme='fresh'] .sv-btn--ghost { background: var(--sv-surface); color: var(--sv-ink); border-color: var(--sv-line-strong); } [data-theme='fresh'] .sv-btn--ghost:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-btn--block { width: 100%; } /* Form fields */ [data-theme='fresh'] .sv-field { display: grid; gap: 6px; } [data-theme='fresh'] .sv-label { font-size: 13px; font-weight: 700; color: var(--sv-ink); } [data-theme='fresh'] .sv-input { width: 100%; height: 46px; padding: 0 14px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: var(--sv-surface); color: var(--sv-ink); font-size: 15px; transition: border-color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-input::placeholder { color: var(--sv-ink-3); } [data-theme='fresh'] .sv-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--sv-mint-pill); } [data-theme='fresh'] .sv-hint { font-size: 12px; line-height: 1.45; color: var(--sv-ink-2); } /* Step panel (detail page form sections) */ [data-theme='fresh'] .sv-step { background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow); overflow: hidden; } [data-theme='fresh'] .sv-step-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-step-num { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-step-title { font-size: 16px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-step-aside { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-step-body { padding: 20px 22px 22px; } /* Stars */ [data-theme='fresh'] .sv-stars { display: inline-flex; gap: 2px; color: var(--sv-star); } [data-theme='fresh'] .sv-stars svg { width: 15px; height: 15px; fill: currentColor; } /* Skeleton */ [data-theme='fresh'] .sv-skeleton { background: linear-gradient(90deg, var(--sv-surface-2), color-mix(in oklab, var(--sv-surface-2) 60%, white), var(--sv-surface-2)); background-size: 200% 100%; animation: sv-shimmer 1.4s ease-in-out infinite; border-radius: var(--sv-radius-sm); } @keyframes sv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Page shell: white (mockup F) with a faint background so long pages never look empty: - a soft primary glow top-left and a lime glow top-right, just below the header; - .sv-pattern: Fresh contour lines in the primary at very low opacity, faded out toward the centre column so text and cards stay on clean white. The stages and mint panels still carry the colour; this only fills the quiet areas. */ [data-theme='fresh'] .sv-shell { position: relative; isolation: isolate; background: radial-gradient(900px 520px at 4% 120px, color-mix(in oklab, var(--primary) 9%, transparent), transparent 70%), radial-gradient(820px 480px at 98% 60px, color-mix(in srgb, var(--sv-lime) 18%, transparent), transparent 70%), var(--sv-bg); background-repeat: no-repeat; } [data-theme='fresh'] .sv-pattern { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } [data-theme='fresh'] .sv-pattern::before { content: ''; position: absolute; inset: 0; background: var(--primary); opacity: 0.16; -webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221100%22%20viewBox%3D%220%200%201600%201100%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22fv%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22fh%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22mv%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%221100%22%3E%3Crect%20width%3D%221600%22%20height%3D%221100%22%20fill%3D%22url(%23fv)%22%20stroke%3D%22none%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22mh%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%221100%22%3E%3Crect%20width%3D%221600%22%20height%3D%221100%22%20fill%3D%22url(%23fh)%22%20stroke%3D%22none%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url(%23mv)%22%3E%3Cg%20mask%3D%22url(%23mh)%22%3E%3Cpath%20d%3D%22M1477%20120C1479%20124%201481%20130%201481%20134C1481%20139%201479%20144%201476%20148C1473%20152%201468%20156%201464%20159C1459%20162%201454%20164%201449%20166C1444%20168%201439%20170%201434%20172C1429%20173%201425%20175%201421%20177C1417%20178%201412%20180%201408%20182C1404%20183%201399%20184%201394%20185C1390%20185%201385%20185%201380%20185C1375%20185%201371%20184%201366%20183C1362%20182%201357%20181%201353%20180C1348%20179%201343%20179%201338%20178C1333%20177%201327%20177%201322%20175C1316%20174%201310%20173%201305%20170C1301%20168%201296%20164%201293%20160C1290%20156%201288%20152%201287%20147C1287%20142%201288%20137%201290%20133C1291%20128%201295%20124%201297%20120C1299%20116%201302%20113%201303%20109C1305%20106%201306%20102%201307%2099C1308%2095%201308%2091%201309%2087C1310%2083%201310%2079%201312%2075C1315%2071%201317%2067%201321%2064C1324%2061%201329%2058%201334%2056C1338%2054%201344%2053%201349%2052C1354%2051%201359%2050%201365%2050C1370%2049%201375%2049%201380%2049C1385%2049%201391%2048%201396%2049C1401%2050%201406%2051%201411%2052C1415%2054%201420%2057%201424%2060C1427%2063%201430%2066%201433%2070C1435%2073%201437%2077%201439%2081C1441%2084%201442%2087%201445%2090C1447%2093%201451%2095%201454%2098C1458%20101%201462%20104%201466%20108C1470%20111%201474%20116%201477%20120Z%22%2F%3E%3Cpath%20d%3D%22M1561%20120C1565%20128%201567%20138%201565%20146C1564%20155%201559%20163%201553%20171C1548%20178%201538%20184%201530%20189C1522%20195%201512%20199%201503%20203C1495%20207%201487%20210%201479%20214C1471%20218%201463%20221%201455%20225C1448%20228%201440%20231%201432%20234C1424%20236%201415%20238%201406%20239C1398%20239%201389%20239%201380%20238C1371%20238%201363%20236%201355%20235C1346%20233%201338%20232%201330%20231C1321%20230%201312%20229%201302%20228C1292%20227%201281%20226%201272%20223C1262%20221%201251%20218%201242%20212C1234%20207%201226%20200%201222%20193C1217%20186%201215%20176%201215%20168C1215%20159%201219%20150%201222%20142C1224%20134%201230%20127%201233%20120C1236%20113%201239%20107%201241%20100C1243%2094%201243%2087%201244%2080C1245%2073%201244%2065%201246%2058C1247%2050%201249%2042%201253%2035C1257%2028%201263%2021%201270%2016C1277%2010%201286%206%201295%202C1304%20-1%201314%20-3%201323%20-5C1333%20-7%201342%20-8%201352%20-9C1361%20-10%201370%20-11%201380%20-11C1390%20-11%201399%20-12%201409%20-10C1418%20-9%201428%20-6%201436%20-3C1444%201%201452%207%201458%2012C1464%2018%201469%2025%201473%2031C1477%2038%201480%2044%201485%2050C1489%2056%201493%2060%201498%2065C1504%2070%201511%2074%201519%2080C1526%2085%201535%2090%201542%2097C1549%20104%201557%20112%201561%20120Z%22%2F%3E%3Cpath%20d%3D%22M1647%20120C1651%20132%201652%20146%201649%20158C1645%20170%201637%20182%201628%20192C1618%20202%201605%20211%201593%20219C1582%20226%201568%20232%201557%20239C1545%20245%201534%20251%201523%20256C1512%20262%201502%20268%201491%20273C1480%20279%201468%20284%201456%20287C1444%20290%201431%20292%201418%20293C1405%20294%201392%20293%201380%20292C1368%20291%201356%20288%201343%20287C1331%20285%201319%20284%201306%20283C1293%20282%201279%20282%201264%20281C1250%20279%201233%20278%201219%20273C1205%20269%201190%20263%201179%20255C1168%20247%201159%20236%201154%20225C1149%20213%201148%20200%201149%20187C1150%20175%201155%20162%201159%20151C1163%20140%201169%20130%201172%20120C1175%20110%201177%20101%201178%2092C1179%2082%201177%2072%201178%2061C1178%2050%201177%2038%201179%2027C1181%2016%201185%204%201192%20-6C1199%20-16%201209%20-26%201219%20-33C1230%20-41%201244%20-46%201257%20-51C1270%20-56%201284%20-59%201297%20-62C1311%20-64%201325%20-67%201338%20-68C1352%20-70%201366%20-72%201380%20-72C1394%20-73%201408%20-72%201422%20-69C1435%20-67%201449%20-62%201460%20-56C1471%20-50%201481%20-41%201490%20-32C1498%20-24%201504%20-13%201511%20-5C1517%204%201522%2012%201529%2020C1536%2027%201544%2033%201554%2040C1563%2046%201576%2052%201587%2060C1599%2067%201613%2076%201623%2086C1633%2096%201643%20108%201647%20120Z%22%2F%3E%3Cpath%20d%3D%22M1733%20120C1737%20136%201735%20154%201729%20169C1723%20185%201710%20200%201698%20213C1685%20225%201668%20236%201654%20246C1639%20257%201624%20265%201609%20274C1595%20283%201582%20291%201568%20300C1555%20308%201542%20317%201527%20323C1512%20330%201496%20337%201480%20341C1464%20345%201447%20346%201430%20347C1413%20348%201396%20346%201380%20345C1364%20344%201348%20342%201331%20340C1315%20339%201299%20339%201281%20338C1263%20338%201243%20338%201224%20336C1205%20334%201183%20331%201165%20325C1147%20318%201129%20309%201117%20297C1104%20285%201095%20269%201090%20254C1085%20239%201087%20221%201088%20205C1090%20189%201097%20173%201101%20159C1105%20145%201111%20133%201113%20120C1115%20107%201114%2096%201113%2082C1112%2069%201108%2055%201108%2041C1107%2026%201106%2010%201110%20-5C1113%20-20%201120%20-35%201130%20-48C1139%20-61%201153%20-73%201168%20-82C1183%20-91%201201%20-98%201218%20-104C1235%20-110%201253%20-115%201271%20-119C1289%20-123%201307%20-127%201325%20-129C1343%20-132%201362%20-135%201380%20-134C1398%20-134%201418%20-133%201435%20-128C1452%20-124%201469%20-116%201483%20-107C1497%20-98%201509%20-85%201520%20-74C1531%20-63%201538%20-50%201547%20-39C1556%20-29%201563%20-19%201574%20-10C1585%20-2%201597%205%201612%2013C1626%2021%201645%2028%201660%2038C1676%2049%201695%2060%201707%2074C1719%2087%201730%20104%201733%20120Z%22%2F%3E%3Cpath%20d%3D%22M1818%20120C1820%20140%201814%20161%201805%20180C1796%20199%201779%20216%201763%20232C1748%20247%201729%20260%201712%20273C1695%20286%201678%20298%201662%20309C1646%20321%201631%20333%201615%20344C1598%20355%201582%20366%201563%20374C1545%20383%201525%20390%201505%20394C1485%20399%201463%20400%201442%20401C1421%20402%201400%20400%201380%20399C1360%20398%201340%20397%201319%20397C1298%20396%201277%20397%201254%20397C1231%20397%201206%20398%201182%20394C1158%20391%201132%20386%201111%20376C1090%20367%201070%20353%201057%20337C1043%20321%201035%20300%201031%20281C1028%20262%201031%20240%201034%20221C1036%20202%201044%20184%201047%20167C1050%20150%201053%20136%201053%20120C1053%20104%201048%2090%201045%2073C1042%2056%201036%2038%201035%2019C1033%201%201033%20-20%201038%20-38C1044%20-56%201054%20-75%201067%20-90C1080%20-106%201099%20-119%201118%20-130C1136%20-141%201158%20-150%201180%20-158C1201%20-165%201223%20-172%201245%20-177C1267%20-183%201289%20-189%201311%20-192C1334%20-195%201357%20-198%201380%20-197C1403%20-196%201426%20-193%201447%20-186C1468%20-178%201488%20-167%201505%20-155C1522%20-143%201535%20-127%201548%20-113C1561%20-99%201570%20-85%201582%20-73C1594%20-61%201606%20-51%201621%20-42C1636%20-32%201655%20-26%201674%20-16C1694%20-6%201718%203%201738%2016C1758%2029%201780%2044%201793%2062C1806%2079%201816%20100%201818%20120Z%22%2F%3E%3Cpath%20d%3D%22M1899%20120C1898%20143%201888%20168%201875%20190C1863%20211%201843%20231%201825%20250C1807%20268%201787%20283%201768%20299C1750%20315%201733%20330%201715%20345C1697%20360%201681%20375%201662%20389C1643%20402%201623%20416%201600%20425C1578%20435%201554%20443%201529%20448C1505%20453%201479%20454%201454%20455C1429%20456%201405%20454%201380%20455C1355%20455%201332%20455%201306%20456C1280%20457%201253%20460%201225%20460C1198%20460%201166%20460%201138%20455C1110%20450%201080%20441%201057%20428C1034%20415%201013%20395%201000%20375C987%20354%20981%20329%20979%20305C976%20282%20982%20257%20984%20235C987%20213%20994%20194%20995%20174C996%20155%20995%20139%20991%20120C988%20101%20979%2083%20974%2063C968%2042%20960%2020%20958%20-3C957%20-25%20958%20-50%20966%20-71C974%20-93%20988%20-114%201005%20-132C1022%20-150%201045%20-165%201068%20-178C1090%20-191%201116%20-201%201141%20-211C1166%20-221%201191%20-230%201218%20-237C1244%20-245%201270%20-252%201297%20-256C1324%20-259%201353%20-262%201380%20-260C1407%20-257%201435%20-251%201460%20-241C1484%20-231%201506%20-215%201526%20-200C1545%20-185%201560%20-166%201575%20-151C1591%20-135%201602%20-120%201618%20-107C1634%20-94%201650%20-85%201671%20-75C1692%20-65%201717%20-58%201742%20-47C1767%20-36%201797%20-24%201820%20-8C1842%208%201866%2028%201879%2050C1892%2071%201899%2097%201899%20120Z%22%2F%3E%3Cpath%20d%3D%22M1974%20120C1970%20147%201955%20175%201940%20199C1925%20223%201903%20246%201883%20267C1864%20288%201843%20306%201824%20325C1805%20344%201788%20363%201769%20381C1750%20399%201731%20418%201709%20434C1688%20450%201663%20465%201637%20476C1611%20488%201582%20495%201553%20501C1525%20506%201495%20507%201466%20509C1437%20511%201409%20511%201380%20513C1351%20514%201323%20517%201292%20520C1261%20522%201228%20527%201195%20526C1162%20526%201125%20525%201093%20517C1062%20509%201028%20496%201004%20478C980%20460%20960%20435%20948%20410C936%20385%20933%20354%20932%20327C930%20300%20937%20273%20939%20249C940%20224%20944%20203%20942%20182C940%20160%20934%20142%20926%20120C919%2098%20906%2076%20898%2052C890%2028%20881%201%20880%20-25C880%20-52%20884%20-80%20895%20-104C905%20-129%20924%20-152%20944%20-172C965%20-192%20992%20-209%201018%20-225C1045%20-240%201073%20-253%201102%20-265C1130%20-278%201160%20-289%201190%20-298C1220%20-307%201251%20-317%201283%20-320C1315%20-324%201349%20-326%201380%20-321C1411%20-316%201444%20-306%201471%20-293C1499%20-280%201523%20-260%201545%20-243C1567%20-225%201583%20-204%201602%20-187C1620%20-171%201635%20-156%201656%20-143C1677%20-131%201699%20-122%201726%20-112C1752%20-102%201785%20-94%201815%20-81C1844%20-67%201879%20-52%201904%20-32C1929%20-13%201952%2012%201963%2038C1975%2063%201978%2093%201974%20120Z%22%2F%3E%3Cpath%20d%3D%22M2044%20120C2036%20150%202017%20180%202000%20207C1982%20235%201959%20259%201939%20283C1919%20307%201899%20329%201880%20351C1861%20374%201844%20396%201824%20418C1803%20439%201782%20461%201757%20480C1732%20498%201703%20514%201673%20527C1643%20539%201610%20547%201577%20553C1544%20559%201511%20561%201478%20565C1445%20568%201414%20570%201380%20574C1346%20578%201313%20585%201277%20588C1241%20592%201201%20598%201163%20596C1125%20595%201083%20591%201048%20580C1013%20568%20979%20549%20954%20526C930%20503%20912%20471%20902%20441C891%20411%20891%20376%20890%20347C888%20317%20895%20288%20894%20261C894%20235%20894%20213%20887%20189C881%20166%20868%20145%20857%20120C846%2095%20828%2069%20819%2041C810%2013%20801%20-19%20802%20-48C803%20-78%20810%20-109%20824%20-137C838%20-164%20861%20-189%20886%20-212C910%20-234%20940%20-253%20969%20-271C999%20-290%201030%20-305%201062%20-320C1094%20-335%201127%20-350%201161%20-361C1196%20-371%201232%20-382%201269%20-385C1305%20-388%201344%20-387%201380%20-380C1416%20-373%201451%20-358%201482%20-342C1512%20-326%201539%20-303%201563%20-283C1588%20-263%201606%20-241%201629%20-225C1651%20-208%201671%20-194%201697%20-182C1723%20-170%201754%20-164%201786%20-153C1819%20-142%201858%20-132%201892%20-117C1926%20-101%201964%20-81%201989%20-57C2014%20-34%202035%20-3%202044%2026C2053%2056%202051%2090%202044%20120Z%22%2F%3E%3Cpath%20d%3D%22M2107%20120C2096%20153%202074%20185%202055%20215C2036%20245%202013%20272%201994%20299C1974%20326%201956%20351%201937%20377C1918%20403%201901%20430%201879%20455C1857%20479%201833%20505%201804%20525C1776%20545%201743%20562%201709%20576C1675%20589%201637%20597%201600%20605C1564%20612%201527%20616%201491%20622C1454%20628%201418%20634%201380%20640C1342%20647%201302%20657%201261%20661C1219%20666%201173%20672%201130%20669C1087%20666%201041%20658%201004%20641C967%20625%20932%20599%20908%20570C884%20541%20870%20503%20860%20469C851%20435%20853%20397%20851%20364C849%20332%20854%20302%20850%20274C846%20247%20839%20224%20828%20198C817%20172%20798%20148%20783%20120C768%2092%20747%2061%20737%2029C727%20-3%20720%20-38%20724%20-71C727%20-104%20739%20-138%20757%20-168C774%20-198%20801%20-225%20828%20-250C856%20-275%20888%20-297%20921%20-318C953%20-339%20987%20-359%201022%20-376C1057%20-394%201094%20-412%201133%20-424C1171%20-436%201214%20-446%201255%20-448C1296%20-450%201340%20-446%201380%20-436C1420%20-426%201458%20-407%201492%20-388C1525%20-369%201554%20-343%201581%20-322C1609%20-302%201630%20-280%201657%20-264C1684%20-248%201711%20-237%201743%20-226C1776%20-215%201814%20-209%201852%20-197C1891%20-185%201937%20-173%201974%20-154C2010%20-135%202049%20-110%202073%20-82C2098%20-54%202114%20-18%202120%2016C2126%2049%202118%2087%202107%20120Z%22%2F%3E%3Cpath%20d%3D%22M232%20760C230%20764%20227%20767%20225%20771C223%20774%20220%20777%20218%20780C216%20783%20214%20786%20212%20789C210%20792%20208%20795%20206%20798C204%20800%20201%20803%20198%20805C194%20808%20191%20810%20187%20811C183%20813%20179%20813%20175%20814C171%20815%20167%20816%20162%20816C158%20817%20154%20818%20150%20819C146%20820%20141%20821%20136%20822C132%20822%20126%20823%20121%20823C117%20822%20111%20821%20107%20819C103%20817%2099%20814%2097%20811C94%20807%2093%20803%2092%20799C91%20795%2092%20790%2092%20787C92%20783%2092%20780%2092%20777C92%20774%2091%20771%2089%20769C88%20766%2085%20763%2083%20760C81%20757%2079%20753%2077%20750C76%20746%2075%20742%2076%20738C76%20735%2078%20731%2080%20727C82%20724%2085%20721%2088%20718C91%20715%2094%20713%2098%20711C102%20708%20105%20706%20109%20704C113%20702%20118%20700%20122%20698C126%20697%20131%20696%20136%20696C141%20696%20146%20696%20150%20698C154%20699%20159%20701%20162%20704C166%20706%20169%20709%20172%20711C175%20714%20177%20716%20181%20718C184%20719%20187%20720%20190%20721C194%20723%20199%20723%20203%20724C208%20725%20213%20727%20218%20729C222%20731%20226%20734%20229%20737C232%20740%20233%20744%20234%20748C234%20752%20233%20756%20232%20760Z%22%2F%3E%3Cpath%20d%3D%22M301%20760C298%20767%20293%20773%20289%20780C285%20786%20282%20791%20278%20797C275%20803%20272%20809%20269%20815C265%20821%20262%20827%20257%20832C253%20837%20247%20843%20241%20847C235%20851%20227%20854%20220%20857C213%20860%20205%20862%20197%20864C190%20866%20182%20867%20174%20870C166%20872%20159%20874%20150%20877C141%20879%20132%20882%20123%20883C114%20884%20103%20885%2094%20884C85%20882%2075%20879%2068%20874C61%20869%2055%20862%2051%20855C47%20848%2045%20839%2044%20831C43%20823%2044%20816%2043%20809C43%20803%2043%20797%2041%20792C39%20786%2035%20782%2032%20777C28%20771%2022%20766%2018%20760C14%20754%2010%20747%208%20740C6%20733%205%20725%207%20718C8%20711%2012%20704%2016%20698C20%20692%2026%20686%2032%20681C38%20675%2044%20670%2051%20665C57%20660%2064%20656%2072%20651C79%20647%2087%20643%2096%20641C104%20639%20114%20637%20123%20637C132%20638%20142%20640%20150%20643C158%20646%20166%20651%20173%20655C180%20659%20186%20665%20192%20669C198%20672%20203%20676%20209%20678C216%20680%20223%20681%20231%20683C239%20685%20249%20685%20258%20688C266%20690%20277%20693%20284%20698C292%20703%20299%20709%20302%20716C306%20722%20308%20730%20307%20738C307%20745%20304%20753%20301%20760Z%22%2F%3E%3Cpath%20d%3D%22M365%20760C360%20770%20354%20779%20350%20788C345%20797%20341%20806%20337%20814C333%20823%20330%20832%20325%20841C321%20850%20316%20859%20309%20867C302%20874%20293%20882%20284%20888C275%20894%20263%20898%20253%20902C242%20907%20231%20910%20220%20914C209%20917%20198%20921%20186%20925C175%20930%20163%20935%20150%20939C137%20943%20123%20947%20108%20948C94%20950%2079%20949%2065%20946C52%20942%2039%20935%2029%20927C20%20919%2013%20906%208%20895C3%20884%202%20871%200%20860C-1%20850%20-1%20839%20-3%20830C-5%20822%20-7%20815%20-11%20807C-16%20800%20-23%20793%20-30%20785C-36%20778%20-45%20769%20-51%20760C-56%20751%20-62%20740%20-64%20730C-65%20720%20-65%20708%20-62%20698C-59%20688%20-53%20678%20-46%20669C-40%20660%20-32%20652%20-23%20644C-15%20635%20-6%20627%203%20620C13%20612%2022%20605%2033%20599C45%20592%2057%20587%2070%20584C83%20581%2097%20580%20110%20581C124%20582%20138%20586%20150%20591C162%20596%20173%20603%20183%20609C193%20615%20202%20621%20211%20626C220%20630%20229%20633%20240%20635C251%20638%20263%20638%20276%20640C289%20642%20304%20644%20317%20648C330%20652%20344%20658%20354%20666C363%20674%20371%20684%20375%20695C379%20705%20378%20717%20377%20728C375%20739%20369%20750%20365%20760Z%22%2F%3E%3Cpath%20d%3D%22M424%20760C419%20773%20413%20784%20408%20796C403%20808%20400%20820%20396%20832C391%20843%20388%20856%20382%20867C376%20879%20368%20890%20359%20900C350%20910%20338%20919%20325%20927C313%20935%20299%20941%20285%20947C271%20953%20257%20958%20243%20965C229%20971%20215%20978%20200%20985C184%20992%20168%201000%20150%201005C132%201011%20112%201016%2093%201017C75%201017%2054%201014%2037%201008C21%201001%205%20990%20-7%20977C-18%20964%20-25%20947%20-31%20932C-36%20917%20-37%20901%20-40%20888C-43%20874%20-44%20862%20-48%20852C-53%20841%20-59%20833%20-67%20823C-75%20814%20-86%20805%20-96%20795C-105%20784%20-116%20772%20-123%20760C-130%20748%20-135%20733%20-135%20720C-136%20706%20-133%20692%20-128%20679C-124%20666%20-115%20653%20-107%20641C-98%20629%20-88%20618%20-78%20607C-68%20596%20-57%20585%20-45%20574C-33%20564%20-20%20553%20-5%20546C10%20538%2027%20531%2044%20528C62%20525%2081%20525%2099%20528C116%20530%20134%20537%20150%20543C166%20549%20179%20559%20193%20565C207%20571%20218%20578%20231%20581C245%20585%20258%20587%20274%20588C290%20590%20308%20590%20326%20592C344%20595%20364%20598%20381%20605C397%20612%20414%20622%20424%20633C435%20645%20441%20660%20444%20674C447%20689%20444%20705%20441%20719C437%20733%20430%20747%20424%20760Z%22%2F%3E%3Cpath%20d%3D%22M481%20760C476%20776%20471%20790%20466%20805C462%20819%20460%20834%20455%20849C450%20863%20446%20879%20438%20893C430%20907%20420%20921%20408%20933C396%20945%20380%20955%20365%20965C350%20975%20333%20982%20317%20991C301%201000%20285%201008%20267%201018C250%201028%20233%201039%20214%201049C194%201058%20173%201070%20150%201076C127%201082%20102%201087%2078%201086C55%201084%2030%201078%2010%201067C-9%201057%20-27%201040%20-40%201023C-52%201006%20-59%20984%20-66%20966C-73%20948%20-74%20929%20-79%20914C-84%20899%20-89%20886%20-97%20874C-105%20862%20-116%20852%20-128%20841C-139%20829%20-155%20818%20-167%20805C-178%20791%20-191%20776%20-197%20760C-204%20744%20-207%20726%20-207%20710C-206%20693%20-200%20676%20-193%20660C-186%20644%20-176%20629%20-166%20614C-156%20599%20-145%20585%20-132%20570C-120%20556%20-108%20541%20-93%20528C-78%20516%20-61%20502%20-42%20493C-23%20485%20-1%20478%2020%20475C42%20473%2066%20475%2088%20479C110%20483%20131%20492%20150%20499C169%20506%20185%20515%20203%20521C220%20527%20235%20531%20253%20533C271%20536%20291%20535%20312%20536C333%20537%20358%20536%20381%20540C403%20544%20428%20550%20447%20560C466%20571%20483%20585%20494%20601C504%20617%20508%20637%20509%20655C510%20674%20505%20693%20500%20711C495%20728%20487%20744%20481%20760Z%22%2F%3E%3Cpath%20d%3D%22M538%20760C533%20778%20529%20795%20525%20813C522%20831%20520%20849%20515%20866C509%20884%20503%20902%20493%20918C483%20935%20469%20950%20454%20964C440%20978%20421%20990%20404%201002C386%201014%20368%201024%20349%201036C331%201048%20313%201061%20293%201075C273%201088%20252%201104%20229%201116C205%201129%20178%201142%20150%201149C122%201155%2091%201158%2063%201154C36%201149%207%201138%20-15%201123C-37%201107%20-55%201084%20-69%201064C-83%201043%20-90%201017%20-99%20997C-107%20977%20-111%20957%20-119%20941C-128%20924%20-137%20912%20-149%20898C-162%20885%20-179%20874%20-195%20860C-210%20846%20-229%20832%20-242%20815C-255%20799%20-267%20779%20-273%20760C-278%20741%20-279%20720%20-276%20700C-273%20680%20-265%20661%20-256%20642C-247%20623%20-236%20605%20-225%20587C-213%20569%20-201%20551%20-187%20533C-174%20516%20-159%20498%20-141%20483C-123%20468%20-102%20453%20-78%20443C-55%20434%20-28%20428%20-2%20427C25%20425%2053%20430%2078%20435C104%20440%20128%20450%20150%20457C172%20464%20192%20471%20213%20475C234%20479%20254%20480%20277%20480C301%20480%20327%20476%20354%20477C381%20478%20413%20478%20439%20484C466%20490%20495%20501%20515%20515C535%20530%20551%20550%20560%20571C569%20591%20570%20616%20570%20638C569%20660%20561%20682%20556%20703C550%20723%20543%20742%20538%20760Z%22%2F%3E%3Cpath%20d%3D%22M595%20760C591%20781%20590%20801%20587%20822C583%20842%20581%20863%20575%20884C568%20904%20559%20925%20546%20943C534%20961%20516%20978%20499%20994C482%201010%20461%201024%20442%201038C423%201053%20403%201067%20383%201083C363%201099%20344%201118%20321%201135C297%201152%20273%201173%20244%201188C216%201202%20183%201217%20150%201222C117%201227%2080%201226%2049%201218C18%201209%20-13%201191%20-37%201172C-61%201152%20-80%201124%20-95%201100C-111%201076%20-119%201049%20-130%201027C-141%201005%20-149%20986%20-162%20970C-175%20953%20-191%20940%20-208%20926C-226%20911%20-249%20898%20-268%20882C-286%20865%20-307%20847%20-321%20826C-334%20806%20-344%20783%20-348%20760C-352%20737%20-349%20713%20-344%20690C-339%20668%20-328%20646%20-318%20624C-308%20602%20-296%20581%20-284%20560C-271%20538%20-259%20516%20-243%20496C-227%20476%20-210%20454%20-188%20438C-166%20421%20-140%20406%20-112%20397C-84%20388%20-51%20384%20-21%20384C9%20384%2041%20390%2070%20396C98%20401%20124%20411%20150%20416C176%20421%20198%20425%20224%20425C250%20426%20275%20422%20305%20420C334%20418%20368%20412%20401%20413C433%20414%20471%20416%20501%20426C531%20435%20561%20451%20581%20471C601%20490%20615%20517%20622%20542C630%20567%20628%20596%20626%20621C624%20647%20615%20672%20610%20695C605%20718%20599%20739%20595%20760Z%22%2F%3E%3Cpath%20d%3D%22M925%201180C924%201185%20923%201190%20923%201194C922%201199%20921%201204%20919%201209C918%201214%20916%201218%20913%201223C910%201227%20906%201231%20902%201235C898%201239%20893%201242%20888%201245C884%201249%20879%201252%20874%201255C869%201258%20864%201262%20859%201266C853%201269%20848%201273%20841%201276C835%201279%20827%201282%20820%201283C813%201284%20804%201284%20797%201283C790%201281%20783%201278%20777%201274C772%201270%20767%201264%20763%201259C759%201254%20756%201248%20754%201243C751%201239%20748%201234%20745%201230C742%201226%20739%201223%20735%201219C731%201216%20727%201212%20723%201208C719%201204%20715%201200%20712%201195C709%201191%20707%201185%20706%201180C705%201175%20705%201169%20707%201164C708%201159%20710%201154%20712%201149C714%201144%20717%201139%20720%201134C723%201129%20726%201124%20730%201120C734%201115%20738%201110%20743%201107C748%201103%20754%201099%20760%201097C766%201095%20774%201093%20780%201093C787%201092%20795%201093%20801%201094C808%201095%20814%201097%20820%201098C826%201099%20831%201100%20837%201101C843%201101%20849%201101%20856%201101C862%201101%20870%201101%20877%201101C884%201102%20892%201103%20899%201105C905%201107%20912%201111%20917%201115C922%201119%20925%201125%20927%201130C929%201136%20930%201142%20930%201148C930%201154%20928%201159%20928%201165C927%201170%20926%201175%20925%201180Z%22%2F%3E%3Cpath%20d%3D%22M994%201180C993%201188%20993%201196%20991%201204C990%201212%20989%201220%20986%201228C983%201236%20978%201244%20973%201251C968%201258%20961%201264%20955%201270C948%201277%20941%201282%20933%201288C926%201294%20919%201300%20911%201306C903%201312%20895%201319%20886%201326C877%201332%20867%201339%20856%201344C845%201348%20832%201353%20820%201354C808%201355%20794%201353%20783%201350C771%201346%20760%201339%20751%201332C742%201325%20734%201316%20728%201308C721%201300%20717%201291%20711%201284C706%201276%20701%201270%20695%201264C689%201258%20682%201253%20675%201247C668%201241%20659%201235%20653%201229C646%201222%20640%201214%20636%201206C632%201198%20629%201189%20629%201180C628%201171%20630%201162%20632%201153C634%201145%20638%201136%20641%201128C645%201120%20649%201111%20654%201103C659%201095%20664%201087%20670%201079C676%201072%20684%201064%20692%201058C701%201052%20711%201047%20722%201044C732%201041%20744%201039%20756%201039C767%201038%20779%201040%20789%201041C800%201043%20810%201045%20820%201046C830%201047%20839%201047%20849%201047C860%201046%20870%201044%20882%201044C893%201043%20906%201042%20919%201043C931%201045%20944%201047%20955%201052C965%201056%20975%201063%20982%201071C989%201079%20994%201089%20997%201098C999%201108%20999%201118%20999%201128C999%201137%20997%201146%20996%201155C995%201164%20994%201172%20994%201180Z%22%2F%3E%3Cpath%20d%3D%22M1063%201180C1062%201191%201063%201203%201061%201214C1059%201225%201056%201237%201052%201247C1047%201258%201040%201269%201033%201278C1025%201288%201016%201297%201007%201305C998%201314%20988%201322%20978%201331C969%201340%20960%201349%20949%201359C938%201368%20928%201379%20915%201388C902%201398%20887%201408%20871%201413C856%201419%20837%201424%20820%201424C803%201424%20784%201420%20768%201414C753%201408%20738%201397%20726%201387C714%201377%20704%201364%20695%201353C685%201343%20678%201332%20670%201323C661%201314%20652%201307%20643%201299C633%201291%20621%201285%20611%201277C600%201269%20588%201260%20579%201250C570%201240%20562%201229%20558%201217C553%201205%20551%201192%20551%201180C551%201168%20554%201155%20558%201143C561%201131%20566%201119%20571%201107C576%201096%20581%201084%20588%201073C594%201061%20601%201049%20610%201039C619%201029%20630%201018%20643%201011C655%201003%20670%20997%20685%20993C700%20990%20717%20989%20733%20989C748%20988%20764%20991%20778%20991C793%20992%20806%20993%20820%20993C834%20993%20847%20991%20862%20989C877%20987%20893%20983%20910%20982C927%20981%20946%20980%20963%20982C980%20985%20998%20989%201012%20997C1026%201005%201038%201016%201047%201028C1055%201040%201060%201054%201063%201068C1066%201081%201066%201095%201066%201108C1066%201121%201064%201134%201064%201146C1064%201158%201063%201169%201063%201180Z%22%2F%3E%3Cpath%20d%3D%22M1134%201180C1134%201195%201134%201209%201131%201224C1128%201238%201124%201253%201117%201266C1110%201280%201101%201293%201091%201305C1081%201317%201069%201328%201058%201340C1047%201351%201036%201363%201024%201375C1013%201387%201002%201401%20989%201414C975%201427%20962%201442%20945%201454C928%201465%20908%201477%20887%201484C866%201490%20842%201493%20820%201491C798%201490%20775%201482%20755%201473C736%201464%20718%201450%20703%201437C688%201425%20676%201410%20663%201397C651%201385%20640%201374%20627%201364C615%201354%20601%201346%20587%201337C573%201327%20556%201319%20542%201309C528%201298%20513%201286%20502%201273C491%201259%20483%201244%20478%201228C474%201213%20473%201196%20474%201180C475%201164%20480%201148%20484%201133C488%201117%20494%201102%20500%201087C506%201072%20512%201056%20520%201042C529%201027%20538%201012%20550%20999C563%20986%20578%20974%20595%20965C612%20957%20632%20951%20652%20947C671%20943%20692%20943%20712%20942C731%20941%20750%20943%20768%20943C786%20942%20802%20942%20820%20939C838%20936%20856%20931%20876%20927C896%20924%20918%20918%20940%20916C962%20915%20987%20914%201009%20918C1030%20923%201052%20931%201069%20943C1086%20954%201099%20970%201109%20986C1119%201002%201123%201021%201127%201038C1131%201056%201130%201073%201131%201089C1132%201106%201132%201121%201132%201136C1133%201151%201134%201165%201134%201180Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221100%22%20viewBox%3D%220%200%201600%201100%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22fv%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22fh%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22mv%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%221100%22%3E%3Crect%20width%3D%221600%22%20height%3D%221100%22%20fill%3D%22url(%23fv)%22%20stroke%3D%22none%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22mh%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%221100%22%3E%3Crect%20width%3D%221600%22%20height%3D%221100%22%20fill%3D%22url(%23fh)%22%20stroke%3D%22none%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url(%23mv)%22%3E%3Cg%20mask%3D%22url(%23mh)%22%3E%3Cpath%20d%3D%22M1477%20120C1479%20124%201481%20130%201481%20134C1481%20139%201479%20144%201476%20148C1473%20152%201468%20156%201464%20159C1459%20162%201454%20164%201449%20166C1444%20168%201439%20170%201434%20172C1429%20173%201425%20175%201421%20177C1417%20178%201412%20180%201408%20182C1404%20183%201399%20184%201394%20185C1390%20185%201385%20185%201380%20185C1375%20185%201371%20184%201366%20183C1362%20182%201357%20181%201353%20180C1348%20179%201343%20179%201338%20178C1333%20177%201327%20177%201322%20175C1316%20174%201310%20173%201305%20170C1301%20168%201296%20164%201293%20160C1290%20156%201288%20152%201287%20147C1287%20142%201288%20137%201290%20133C1291%20128%201295%20124%201297%20120C1299%20116%201302%20113%201303%20109C1305%20106%201306%20102%201307%2099C1308%2095%201308%2091%201309%2087C1310%2083%201310%2079%201312%2075C1315%2071%201317%2067%201321%2064C1324%2061%201329%2058%201334%2056C1338%2054%201344%2053%201349%2052C1354%2051%201359%2050%201365%2050C1370%2049%201375%2049%201380%2049C1385%2049%201391%2048%201396%2049C1401%2050%201406%2051%201411%2052C1415%2054%201420%2057%201424%2060C1427%2063%201430%2066%201433%2070C1435%2073%201437%2077%201439%2081C1441%2084%201442%2087%201445%2090C1447%2093%201451%2095%201454%2098C1458%20101%201462%20104%201466%20108C1470%20111%201474%20116%201477%20120Z%22%2F%3E%3Cpath%20d%3D%22M1561%20120C1565%20128%201567%20138%201565%20146C1564%20155%201559%20163%201553%20171C1548%20178%201538%20184%201530%20189C1522%20195%201512%20199%201503%20203C1495%20207%201487%20210%201479%20214C1471%20218%201463%20221%201455%20225C1448%20228%201440%20231%201432%20234C1424%20236%201415%20238%201406%20239C1398%20239%201389%20239%201380%20238C1371%20238%201363%20236%201355%20235C1346%20233%201338%20232%201330%20231C1321%20230%201312%20229%201302%20228C1292%20227%201281%20226%201272%20223C1262%20221%201251%20218%201242%20212C1234%20207%201226%20200%201222%20193C1217%20186%201215%20176%201215%20168C1215%20159%201219%20150%201222%20142C1224%20134%201230%20127%201233%20120C1236%20113%201239%20107%201241%20100C1243%2094%201243%2087%201244%2080C1245%2073%201244%2065%201246%2058C1247%2050%201249%2042%201253%2035C1257%2028%201263%2021%201270%2016C1277%2010%201286%206%201295%202C1304%20-1%201314%20-3%201323%20-5C1333%20-7%201342%20-8%201352%20-9C1361%20-10%201370%20-11%201380%20-11C1390%20-11%201399%20-12%201409%20-10C1418%20-9%201428%20-6%201436%20-3C1444%201%201452%207%201458%2012C1464%2018%201469%2025%201473%2031C1477%2038%201480%2044%201485%2050C1489%2056%201493%2060%201498%2065C1504%2070%201511%2074%201519%2080C1526%2085%201535%2090%201542%2097C1549%20104%201557%20112%201561%20120Z%22%2F%3E%3Cpath%20d%3D%22M1647%20120C1651%20132%201652%20146%201649%20158C1645%20170%201637%20182%201628%20192C1618%20202%201605%20211%201593%20219C1582%20226%201568%20232%201557%20239C1545%20245%201534%20251%201523%20256C1512%20262%201502%20268%201491%20273C1480%20279%201468%20284%201456%20287C1444%20290%201431%20292%201418%20293C1405%20294%201392%20293%201380%20292C1368%20291%201356%20288%201343%20287C1331%20285%201319%20284%201306%20283C1293%20282%201279%20282%201264%20281C1250%20279%201233%20278%201219%20273C1205%20269%201190%20263%201179%20255C1168%20247%201159%20236%201154%20225C1149%20213%201148%20200%201149%20187C1150%20175%201155%20162%201159%20151C1163%20140%201169%20130%201172%20120C1175%20110%201177%20101%201178%2092C1179%2082%201177%2072%201178%2061C1178%2050%201177%2038%201179%2027C1181%2016%201185%204%201192%20-6C1199%20-16%201209%20-26%201219%20-33C1230%20-41%201244%20-46%201257%20-51C1270%20-56%201284%20-59%201297%20-62C1311%20-64%201325%20-67%201338%20-68C1352%20-70%201366%20-72%201380%20-72C1394%20-73%201408%20-72%201422%20-69C1435%20-67%201449%20-62%201460%20-56C1471%20-50%201481%20-41%201490%20-32C1498%20-24%201504%20-13%201511%20-5C1517%204%201522%2012%201529%2020C1536%2027%201544%2033%201554%2040C1563%2046%201576%2052%201587%2060C1599%2067%201613%2076%201623%2086C1633%2096%201643%20108%201647%20120Z%22%2F%3E%3Cpath%20d%3D%22M1733%20120C1737%20136%201735%20154%201729%20169C1723%20185%201710%20200%201698%20213C1685%20225%201668%20236%201654%20246C1639%20257%201624%20265%201609%20274C1595%20283%201582%20291%201568%20300C1555%20308%201542%20317%201527%20323C1512%20330%201496%20337%201480%20341C1464%20345%201447%20346%201430%20347C1413%20348%201396%20346%201380%20345C1364%20344%201348%20342%201331%20340C1315%20339%201299%20339%201281%20338C1263%20338%201243%20338%201224%20336C1205%20334%201183%20331%201165%20325C1147%20318%201129%20309%201117%20297C1104%20285%201095%20269%201090%20254C1085%20239%201087%20221%201088%20205C1090%20189%201097%20173%201101%20159C1105%20145%201111%20133%201113%20120C1115%20107%201114%2096%201113%2082C1112%2069%201108%2055%201108%2041C1107%2026%201106%2010%201110%20-5C1113%20-20%201120%20-35%201130%20-48C1139%20-61%201153%20-73%201168%20-82C1183%20-91%201201%20-98%201218%20-104C1235%20-110%201253%20-115%201271%20-119C1289%20-123%201307%20-127%201325%20-129C1343%20-132%201362%20-135%201380%20-134C1398%20-134%201418%20-133%201435%20-128C1452%20-124%201469%20-116%201483%20-107C1497%20-98%201509%20-85%201520%20-74C1531%20-63%201538%20-50%201547%20-39C1556%20-29%201563%20-19%201574%20-10C1585%20-2%201597%205%201612%2013C1626%2021%201645%2028%201660%2038C1676%2049%201695%2060%201707%2074C1719%2087%201730%20104%201733%20120Z%22%2F%3E%3Cpath%20d%3D%22M1818%20120C1820%20140%201814%20161%201805%20180C1796%20199%201779%20216%201763%20232C1748%20247%201729%20260%201712%20273C1695%20286%201678%20298%201662%20309C1646%20321%201631%20333%201615%20344C1598%20355%201582%20366%201563%20374C1545%20383%201525%20390%201505%20394C1485%20399%201463%20400%201442%20401C1421%20402%201400%20400%201380%20399C1360%20398%201340%20397%201319%20397C1298%20396%201277%20397%201254%20397C1231%20397%201206%20398%201182%20394C1158%20391%201132%20386%201111%20376C1090%20367%201070%20353%201057%20337C1043%20321%201035%20300%201031%20281C1028%20262%201031%20240%201034%20221C1036%20202%201044%20184%201047%20167C1050%20150%201053%20136%201053%20120C1053%20104%201048%2090%201045%2073C1042%2056%201036%2038%201035%2019C1033%201%201033%20-20%201038%20-38C1044%20-56%201054%20-75%201067%20-90C1080%20-106%201099%20-119%201118%20-130C1136%20-141%201158%20-150%201180%20-158C1201%20-165%201223%20-172%201245%20-177C1267%20-183%201289%20-189%201311%20-192C1334%20-195%201357%20-198%201380%20-197C1403%20-196%201426%20-193%201447%20-186C1468%20-178%201488%20-167%201505%20-155C1522%20-143%201535%20-127%201548%20-113C1561%20-99%201570%20-85%201582%20-73C1594%20-61%201606%20-51%201621%20-42C1636%20-32%201655%20-26%201674%20-16C1694%20-6%201718%203%201738%2016C1758%2029%201780%2044%201793%2062C1806%2079%201816%20100%201818%20120Z%22%2F%3E%3Cpath%20d%3D%22M1899%20120C1898%20143%201888%20168%201875%20190C1863%20211%201843%20231%201825%20250C1807%20268%201787%20283%201768%20299C1750%20315%201733%20330%201715%20345C1697%20360%201681%20375%201662%20389C1643%20402%201623%20416%201600%20425C1578%20435%201554%20443%201529%20448C1505%20453%201479%20454%201454%20455C1429%20456%201405%20454%201380%20455C1355%20455%201332%20455%201306%20456C1280%20457%201253%20460%201225%20460C1198%20460%201166%20460%201138%20455C1110%20450%201080%20441%201057%20428C1034%20415%201013%20395%201000%20375C987%20354%20981%20329%20979%20305C976%20282%20982%20257%20984%20235C987%20213%20994%20194%20995%20174C996%20155%20995%20139%20991%20120C988%20101%20979%2083%20974%2063C968%2042%20960%2020%20958%20-3C957%20-25%20958%20-50%20966%20-71C974%20-93%20988%20-114%201005%20-132C1022%20-150%201045%20-165%201068%20-178C1090%20-191%201116%20-201%201141%20-211C1166%20-221%201191%20-230%201218%20-237C1244%20-245%201270%20-252%201297%20-256C1324%20-259%201353%20-262%201380%20-260C1407%20-257%201435%20-251%201460%20-241C1484%20-231%201506%20-215%201526%20-200C1545%20-185%201560%20-166%201575%20-151C1591%20-135%201602%20-120%201618%20-107C1634%20-94%201650%20-85%201671%20-75C1692%20-65%201717%20-58%201742%20-47C1767%20-36%201797%20-24%201820%20-8C1842%208%201866%2028%201879%2050C1892%2071%201899%2097%201899%20120Z%22%2F%3E%3Cpath%20d%3D%22M1974%20120C1970%20147%201955%20175%201940%20199C1925%20223%201903%20246%201883%20267C1864%20288%201843%20306%201824%20325C1805%20344%201788%20363%201769%20381C1750%20399%201731%20418%201709%20434C1688%20450%201663%20465%201637%20476C1611%20488%201582%20495%201553%20501C1525%20506%201495%20507%201466%20509C1437%20511%201409%20511%201380%20513C1351%20514%201323%20517%201292%20520C1261%20522%201228%20527%201195%20526C1162%20526%201125%20525%201093%20517C1062%20509%201028%20496%201004%20478C980%20460%20960%20435%20948%20410C936%20385%20933%20354%20932%20327C930%20300%20937%20273%20939%20249C940%20224%20944%20203%20942%20182C940%20160%20934%20142%20926%20120C919%2098%20906%2076%20898%2052C890%2028%20881%201%20880%20-25C880%20-52%20884%20-80%20895%20-104C905%20-129%20924%20-152%20944%20-172C965%20-192%20992%20-209%201018%20-225C1045%20-240%201073%20-253%201102%20-265C1130%20-278%201160%20-289%201190%20-298C1220%20-307%201251%20-317%201283%20-320C1315%20-324%201349%20-326%201380%20-321C1411%20-316%201444%20-306%201471%20-293C1499%20-280%201523%20-260%201545%20-243C1567%20-225%201583%20-204%201602%20-187C1620%20-171%201635%20-156%201656%20-143C1677%20-131%201699%20-122%201726%20-112C1752%20-102%201785%20-94%201815%20-81C1844%20-67%201879%20-52%201904%20-32C1929%20-13%201952%2012%201963%2038C1975%2063%201978%2093%201974%20120Z%22%2F%3E%3Cpath%20d%3D%22M2044%20120C2036%20150%202017%20180%202000%20207C1982%20235%201959%20259%201939%20283C1919%20307%201899%20329%201880%20351C1861%20374%201844%20396%201824%20418C1803%20439%201782%20461%201757%20480C1732%20498%201703%20514%201673%20527C1643%20539%201610%20547%201577%20553C1544%20559%201511%20561%201478%20565C1445%20568%201414%20570%201380%20574C1346%20578%201313%20585%201277%20588C1241%20592%201201%20598%201163%20596C1125%20595%201083%20591%201048%20580C1013%20568%20979%20549%20954%20526C930%20503%20912%20471%20902%20441C891%20411%20891%20376%20890%20347C888%20317%20895%20288%20894%20261C894%20235%20894%20213%20887%20189C881%20166%20868%20145%20857%20120C846%2095%20828%2069%20819%2041C810%2013%20801%20-19%20802%20-48C803%20-78%20810%20-109%20824%20-137C838%20-164%20861%20-189%20886%20-212C910%20-234%20940%20-253%20969%20-271C999%20-290%201030%20-305%201062%20-320C1094%20-335%201127%20-350%201161%20-361C1196%20-371%201232%20-382%201269%20-385C1305%20-388%201344%20-387%201380%20-380C1416%20-373%201451%20-358%201482%20-342C1512%20-326%201539%20-303%201563%20-283C1588%20-263%201606%20-241%201629%20-225C1651%20-208%201671%20-194%201697%20-182C1723%20-170%201754%20-164%201786%20-153C1819%20-142%201858%20-132%201892%20-117C1926%20-101%201964%20-81%201989%20-57C2014%20-34%202035%20-3%202044%2026C2053%2056%202051%2090%202044%20120Z%22%2F%3E%3Cpath%20d%3D%22M2107%20120C2096%20153%202074%20185%202055%20215C2036%20245%202013%20272%201994%20299C1974%20326%201956%20351%201937%20377C1918%20403%201901%20430%201879%20455C1857%20479%201833%20505%201804%20525C1776%20545%201743%20562%201709%20576C1675%20589%201637%20597%201600%20605C1564%20612%201527%20616%201491%20622C1454%20628%201418%20634%201380%20640C1342%20647%201302%20657%201261%20661C1219%20666%201173%20672%201130%20669C1087%20666%201041%20658%201004%20641C967%20625%20932%20599%20908%20570C884%20541%20870%20503%20860%20469C851%20435%20853%20397%20851%20364C849%20332%20854%20302%20850%20274C846%20247%20839%20224%20828%20198C817%20172%20798%20148%20783%20120C768%2092%20747%2061%20737%2029C727%20-3%20720%20-38%20724%20-71C727%20-104%20739%20-138%20757%20-168C774%20-198%20801%20-225%20828%20-250C856%20-275%20888%20-297%20921%20-318C953%20-339%20987%20-359%201022%20-376C1057%20-394%201094%20-412%201133%20-424C1171%20-436%201214%20-446%201255%20-448C1296%20-450%201340%20-446%201380%20-436C1420%20-426%201458%20-407%201492%20-388C1525%20-369%201554%20-343%201581%20-322C1609%20-302%201630%20-280%201657%20-264C1684%20-248%201711%20-237%201743%20-226C1776%20-215%201814%20-209%201852%20-197C1891%20-185%201937%20-173%201974%20-154C2010%20-135%202049%20-110%202073%20-82C2098%20-54%202114%20-18%202120%2016C2126%2049%202118%2087%202107%20120Z%22%2F%3E%3Cpath%20d%3D%22M232%20760C230%20764%20227%20767%20225%20771C223%20774%20220%20777%20218%20780C216%20783%20214%20786%20212%20789C210%20792%20208%20795%20206%20798C204%20800%20201%20803%20198%20805C194%20808%20191%20810%20187%20811C183%20813%20179%20813%20175%20814C171%20815%20167%20816%20162%20816C158%20817%20154%20818%20150%20819C146%20820%20141%20821%20136%20822C132%20822%20126%20823%20121%20823C117%20822%20111%20821%20107%20819C103%20817%2099%20814%2097%20811C94%20807%2093%20803%2092%20799C91%20795%2092%20790%2092%20787C92%20783%2092%20780%2092%20777C92%20774%2091%20771%2089%20769C88%20766%2085%20763%2083%20760C81%20757%2079%20753%2077%20750C76%20746%2075%20742%2076%20738C76%20735%2078%20731%2080%20727C82%20724%2085%20721%2088%20718C91%20715%2094%20713%2098%20711C102%20708%20105%20706%20109%20704C113%20702%20118%20700%20122%20698C126%20697%20131%20696%20136%20696C141%20696%20146%20696%20150%20698C154%20699%20159%20701%20162%20704C166%20706%20169%20709%20172%20711C175%20714%20177%20716%20181%20718C184%20719%20187%20720%20190%20721C194%20723%20199%20723%20203%20724C208%20725%20213%20727%20218%20729C222%20731%20226%20734%20229%20737C232%20740%20233%20744%20234%20748C234%20752%20233%20756%20232%20760Z%22%2F%3E%3Cpath%20d%3D%22M301%20760C298%20767%20293%20773%20289%20780C285%20786%20282%20791%20278%20797C275%20803%20272%20809%20269%20815C265%20821%20262%20827%20257%20832C253%20837%20247%20843%20241%20847C235%20851%20227%20854%20220%20857C213%20860%20205%20862%20197%20864C190%20866%20182%20867%20174%20870C166%20872%20159%20874%20150%20877C141%20879%20132%20882%20123%20883C114%20884%20103%20885%2094%20884C85%20882%2075%20879%2068%20874C61%20869%2055%20862%2051%20855C47%20848%2045%20839%2044%20831C43%20823%2044%20816%2043%20809C43%20803%2043%20797%2041%20792C39%20786%2035%20782%2032%20777C28%20771%2022%20766%2018%20760C14%20754%2010%20747%208%20740C6%20733%205%20725%207%20718C8%20711%2012%20704%2016%20698C20%20692%2026%20686%2032%20681C38%20675%2044%20670%2051%20665C57%20660%2064%20656%2072%20651C79%20647%2087%20643%2096%20641C104%20639%20114%20637%20123%20637C132%20638%20142%20640%20150%20643C158%20646%20166%20651%20173%20655C180%20659%20186%20665%20192%20669C198%20672%20203%20676%20209%20678C216%20680%20223%20681%20231%20683C239%20685%20249%20685%20258%20688C266%20690%20277%20693%20284%20698C292%20703%20299%20709%20302%20716C306%20722%20308%20730%20307%20738C307%20745%20304%20753%20301%20760Z%22%2F%3E%3Cpath%20d%3D%22M365%20760C360%20770%20354%20779%20350%20788C345%20797%20341%20806%20337%20814C333%20823%20330%20832%20325%20841C321%20850%20316%20859%20309%20867C302%20874%20293%20882%20284%20888C275%20894%20263%20898%20253%20902C242%20907%20231%20910%20220%20914C209%20917%20198%20921%20186%20925C175%20930%20163%20935%20150%20939C137%20943%20123%20947%20108%20948C94%20950%2079%20949%2065%20946C52%20942%2039%20935%2029%20927C20%20919%2013%20906%208%20895C3%20884%202%20871%200%20860C-1%20850%20-1%20839%20-3%20830C-5%20822%20-7%20815%20-11%20807C-16%20800%20-23%20793%20-30%20785C-36%20778%20-45%20769%20-51%20760C-56%20751%20-62%20740%20-64%20730C-65%20720%20-65%20708%20-62%20698C-59%20688%20-53%20678%20-46%20669C-40%20660%20-32%20652%20-23%20644C-15%20635%20-6%20627%203%20620C13%20612%2022%20605%2033%20599C45%20592%2057%20587%2070%20584C83%20581%2097%20580%20110%20581C124%20582%20138%20586%20150%20591C162%20596%20173%20603%20183%20609C193%20615%20202%20621%20211%20626C220%20630%20229%20633%20240%20635C251%20638%20263%20638%20276%20640C289%20642%20304%20644%20317%20648C330%20652%20344%20658%20354%20666C363%20674%20371%20684%20375%20695C379%20705%20378%20717%20377%20728C375%20739%20369%20750%20365%20760Z%22%2F%3E%3Cpath%20d%3D%22M424%20760C419%20773%20413%20784%20408%20796C403%20808%20400%20820%20396%20832C391%20843%20388%20856%20382%20867C376%20879%20368%20890%20359%20900C350%20910%20338%20919%20325%20927C313%20935%20299%20941%20285%20947C271%20953%20257%20958%20243%20965C229%20971%20215%20978%20200%20985C184%20992%20168%201000%20150%201005C132%201011%20112%201016%2093%201017C75%201017%2054%201014%2037%201008C21%201001%205%20990%20-7%20977C-18%20964%20-25%20947%20-31%20932C-36%20917%20-37%20901%20-40%20888C-43%20874%20-44%20862%20-48%20852C-53%20841%20-59%20833%20-67%20823C-75%20814%20-86%20805%20-96%20795C-105%20784%20-116%20772%20-123%20760C-130%20748%20-135%20733%20-135%20720C-136%20706%20-133%20692%20-128%20679C-124%20666%20-115%20653%20-107%20641C-98%20629%20-88%20618%20-78%20607C-68%20596%20-57%20585%20-45%20574C-33%20564%20-20%20553%20-5%20546C10%20538%2027%20531%2044%20528C62%20525%2081%20525%2099%20528C116%20530%20134%20537%20150%20543C166%20549%20179%20559%20193%20565C207%20571%20218%20578%20231%20581C245%20585%20258%20587%20274%20588C290%20590%20308%20590%20326%20592C344%20595%20364%20598%20381%20605C397%20612%20414%20622%20424%20633C435%20645%20441%20660%20444%20674C447%20689%20444%20705%20441%20719C437%20733%20430%20747%20424%20760Z%22%2F%3E%3Cpath%20d%3D%22M481%20760C476%20776%20471%20790%20466%20805C462%20819%20460%20834%20455%20849C450%20863%20446%20879%20438%20893C430%20907%20420%20921%20408%20933C396%20945%20380%20955%20365%20965C350%20975%20333%20982%20317%20991C301%201000%20285%201008%20267%201018C250%201028%20233%201039%20214%201049C194%201058%20173%201070%20150%201076C127%201082%20102%201087%2078%201086C55%201084%2030%201078%2010%201067C-9%201057%20-27%201040%20-40%201023C-52%201006%20-59%20984%20-66%20966C-73%20948%20-74%20929%20-79%20914C-84%20899%20-89%20886%20-97%20874C-105%20862%20-116%20852%20-128%20841C-139%20829%20-155%20818%20-167%20805C-178%20791%20-191%20776%20-197%20760C-204%20744%20-207%20726%20-207%20710C-206%20693%20-200%20676%20-193%20660C-186%20644%20-176%20629%20-166%20614C-156%20599%20-145%20585%20-132%20570C-120%20556%20-108%20541%20-93%20528C-78%20516%20-61%20502%20-42%20493C-23%20485%20-1%20478%2020%20475C42%20473%2066%20475%2088%20479C110%20483%20131%20492%20150%20499C169%20506%20185%20515%20203%20521C220%20527%20235%20531%20253%20533C271%20536%20291%20535%20312%20536C333%20537%20358%20536%20381%20540C403%20544%20428%20550%20447%20560C466%20571%20483%20585%20494%20601C504%20617%20508%20637%20509%20655C510%20674%20505%20693%20500%20711C495%20728%20487%20744%20481%20760Z%22%2F%3E%3Cpath%20d%3D%22M538%20760C533%20778%20529%20795%20525%20813C522%20831%20520%20849%20515%20866C509%20884%20503%20902%20493%20918C483%20935%20469%20950%20454%20964C440%20978%20421%20990%20404%201002C386%201014%20368%201024%20349%201036C331%201048%20313%201061%20293%201075C273%201088%20252%201104%20229%201116C205%201129%20178%201142%20150%201149C122%201155%2091%201158%2063%201154C36%201149%207%201138%20-15%201123C-37%201107%20-55%201084%20-69%201064C-83%201043%20-90%201017%20-99%20997C-107%20977%20-111%20957%20-119%20941C-128%20924%20-137%20912%20-149%20898C-162%20885%20-179%20874%20-195%20860C-210%20846%20-229%20832%20-242%20815C-255%20799%20-267%20779%20-273%20760C-278%20741%20-279%20720%20-276%20700C-273%20680%20-265%20661%20-256%20642C-247%20623%20-236%20605%20-225%20587C-213%20569%20-201%20551%20-187%20533C-174%20516%20-159%20498%20-141%20483C-123%20468%20-102%20453%20-78%20443C-55%20434%20-28%20428%20-2%20427C25%20425%2053%20430%2078%20435C104%20440%20128%20450%20150%20457C172%20464%20192%20471%20213%20475C234%20479%20254%20480%20277%20480C301%20480%20327%20476%20354%20477C381%20478%20413%20478%20439%20484C466%20490%20495%20501%20515%20515C535%20530%20551%20550%20560%20571C569%20591%20570%20616%20570%20638C569%20660%20561%20682%20556%20703C550%20723%20543%20742%20538%20760Z%22%2F%3E%3Cpath%20d%3D%22M595%20760C591%20781%20590%20801%20587%20822C583%20842%20581%20863%20575%20884C568%20904%20559%20925%20546%20943C534%20961%20516%20978%20499%20994C482%201010%20461%201024%20442%201038C423%201053%20403%201067%20383%201083C363%201099%20344%201118%20321%201135C297%201152%20273%201173%20244%201188C216%201202%20183%201217%20150%201222C117%201227%2080%201226%2049%201218C18%201209%20-13%201191%20-37%201172C-61%201152%20-80%201124%20-95%201100C-111%201076%20-119%201049%20-130%201027C-141%201005%20-149%20986%20-162%20970C-175%20953%20-191%20940%20-208%20926C-226%20911%20-249%20898%20-268%20882C-286%20865%20-307%20847%20-321%20826C-334%20806%20-344%20783%20-348%20760C-352%20737%20-349%20713%20-344%20690C-339%20668%20-328%20646%20-318%20624C-308%20602%20-296%20581%20-284%20560C-271%20538%20-259%20516%20-243%20496C-227%20476%20-210%20454%20-188%20438C-166%20421%20-140%20406%20-112%20397C-84%20388%20-51%20384%20-21%20384C9%20384%2041%20390%2070%20396C98%20401%20124%20411%20150%20416C176%20421%20198%20425%20224%20425C250%20426%20275%20422%20305%20420C334%20418%20368%20412%20401%20413C433%20414%20471%20416%20501%20426C531%20435%20561%20451%20581%20471C601%20490%20615%20517%20622%20542C630%20567%20628%20596%20626%20621C624%20647%20615%20672%20610%20695C605%20718%20599%20739%20595%20760Z%22%2F%3E%3Cpath%20d%3D%22M925%201180C924%201185%20923%201190%20923%201194C922%201199%20921%201204%20919%201209C918%201214%20916%201218%20913%201223C910%201227%20906%201231%20902%201235C898%201239%20893%201242%20888%201245C884%201249%20879%201252%20874%201255C869%201258%20864%201262%20859%201266C853%201269%20848%201273%20841%201276C835%201279%20827%201282%20820%201283C813%201284%20804%201284%20797%201283C790%201281%20783%201278%20777%201274C772%201270%20767%201264%20763%201259C759%201254%20756%201248%20754%201243C751%201239%20748%201234%20745%201230C742%201226%20739%201223%20735%201219C731%201216%20727%201212%20723%201208C719%201204%20715%201200%20712%201195C709%201191%20707%201185%20706%201180C705%201175%20705%201169%20707%201164C708%201159%20710%201154%20712%201149C714%201144%20717%201139%20720%201134C723%201129%20726%201124%20730%201120C734%201115%20738%201110%20743%201107C748%201103%20754%201099%20760%201097C766%201095%20774%201093%20780%201093C787%201092%20795%201093%20801%201094C808%201095%20814%201097%20820%201098C826%201099%20831%201100%20837%201101C843%201101%20849%201101%20856%201101C862%201101%20870%201101%20877%201101C884%201102%20892%201103%20899%201105C905%201107%20912%201111%20917%201115C922%201119%20925%201125%20927%201130C929%201136%20930%201142%20930%201148C930%201154%20928%201159%20928%201165C927%201170%20926%201175%20925%201180Z%22%2F%3E%3Cpath%20d%3D%22M994%201180C993%201188%20993%201196%20991%201204C990%201212%20989%201220%20986%201228C983%201236%20978%201244%20973%201251C968%201258%20961%201264%20955%201270C948%201277%20941%201282%20933%201288C926%201294%20919%201300%20911%201306C903%201312%20895%201319%20886%201326C877%201332%20867%201339%20856%201344C845%201348%20832%201353%20820%201354C808%201355%20794%201353%20783%201350C771%201346%20760%201339%20751%201332C742%201325%20734%201316%20728%201308C721%201300%20717%201291%20711%201284C706%201276%20701%201270%20695%201264C689%201258%20682%201253%20675%201247C668%201241%20659%201235%20653%201229C646%201222%20640%201214%20636%201206C632%201198%20629%201189%20629%201180C628%201171%20630%201162%20632%201153C634%201145%20638%201136%20641%201128C645%201120%20649%201111%20654%201103C659%201095%20664%201087%20670%201079C676%201072%20684%201064%20692%201058C701%201052%20711%201047%20722%201044C732%201041%20744%201039%20756%201039C767%201038%20779%201040%20789%201041C800%201043%20810%201045%20820%201046C830%201047%20839%201047%20849%201047C860%201046%20870%201044%20882%201044C893%201043%20906%201042%20919%201043C931%201045%20944%201047%20955%201052C965%201056%20975%201063%20982%201071C989%201079%20994%201089%20997%201098C999%201108%20999%201118%20999%201128C999%201137%20997%201146%20996%201155C995%201164%20994%201172%20994%201180Z%22%2F%3E%3Cpath%20d%3D%22M1063%201180C1062%201191%201063%201203%201061%201214C1059%201225%201056%201237%201052%201247C1047%201258%201040%201269%201033%201278C1025%201288%201016%201297%201007%201305C998%201314%20988%201322%20978%201331C969%201340%20960%201349%20949%201359C938%201368%20928%201379%20915%201388C902%201398%20887%201408%20871%201413C856%201419%20837%201424%20820%201424C803%201424%20784%201420%20768%201414C753%201408%20738%201397%20726%201387C714%201377%20704%201364%20695%201353C685%201343%20678%201332%20670%201323C661%201314%20652%201307%20643%201299C633%201291%20621%201285%20611%201277C600%201269%20588%201260%20579%201250C570%201240%20562%201229%20558%201217C553%201205%20551%201192%20551%201180C551%201168%20554%201155%20558%201143C561%201131%20566%201119%20571%201107C576%201096%20581%201084%20588%201073C594%201061%20601%201049%20610%201039C619%201029%20630%201018%20643%201011C655%201003%20670%20997%20685%20993C700%20990%20717%20989%20733%20989C748%20988%20764%20991%20778%20991C793%20992%20806%20993%20820%20993C834%20993%20847%20991%20862%20989C877%20987%20893%20983%20910%20982C927%20981%20946%20980%20963%20982C980%20985%20998%20989%201012%20997C1026%201005%201038%201016%201047%201028C1055%201040%201060%201054%201063%201068C1066%201081%201066%201095%201066%201108C1066%201121%201064%201134%201064%201146C1064%201158%201063%201169%201063%201180Z%22%2F%3E%3Cpath%20d%3D%22M1134%201180C1134%201195%201134%201209%201131%201224C1128%201238%201124%201253%201117%201266C1110%201280%201101%201293%201091%201305C1081%201317%201069%201328%201058%201340C1047%201351%201036%201363%201024%201375C1013%201387%201002%201401%20989%201414C975%201427%20962%201442%20945%201454C928%201465%20908%201477%20887%201484C866%201490%20842%201493%20820%201491C798%201490%20775%201482%20755%201473C736%201464%20718%201450%20703%201437C688%201425%20676%201410%20663%201397C651%201385%20640%201374%20627%201364C615%201354%20601%201346%20587%201337C573%201327%20556%201319%20542%201309C528%201298%20513%201286%20502%201273C491%201259%20483%201244%20478%201228C474%201213%20473%201196%20474%201180C475%201164%20480%201148%20484%201133C488%201117%20494%201102%20500%201087C506%201072%20512%201056%20520%201042C529%201027%20538%201012%20550%20999C563%20986%20578%20974%20595%20965C612%20957%20632%20951%20652%20947C671%20943%20692%20943%20712%20942C731%20941%20750%20943%20768%20943C786%20942%20802%20942%20820%20939C838%20936%20856%20931%20876%20927C896%20924%20918%20918%20940%20916C962%20915%20987%20914%201009%20918C1030%20923%201052%20931%201069%20943C1086%20954%201099%20970%201109%20986C1119%201002%201123%201021%201127%201038C1131%201056%201130%201073%201131%201089C1132%201106%201132%201121%201132%201136C1133%201151%201134%201165%201134%201180Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); -webkit-mask-size: 100% 100%, 1600px 1100px; mask-size: 100% 100%, 1600px 1100px; -webkit-mask-repeat: no-repeat, repeat; mask-repeat: no-repeat, repeat; -webkit-mask-position: 0 0, center -40px; mask-position: 0 0, center -40px; -webkit-mask-composite: source-in; mask-composite: intersect; } @media (max-width: 767px) { /* Narrow screens: the content spans the width, so the lines only sit at the very edges. */ [data-theme='fresh'] .sv-pattern::before { opacity: 0.12; -webkit-mask-image: linear-gradient(90deg, #000, transparent 18%, transparent 82%, #000), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221100%22%20viewBox%3D%220%200%201600%201100%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22fv%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22fh%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22mv%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%221100%22%3E%3Crect%20width%3D%221600%22%20height%3D%221100%22%20fill%3D%22url(%23fv)%22%20stroke%3D%22none%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22mh%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%221100%22%3E%3Crect%20width%3D%221600%22%20height%3D%221100%22%20fill%3D%22url(%23fh)%22%20stroke%3D%22none%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url(%23mv)%22%3E%3Cg%20mask%3D%22url(%23mh)%22%3E%3Cpath%20d%3D%22M1477%20120C1479%20124%201481%20130%201481%20134C1481%20139%201479%20144%201476%20148C1473%20152%201468%20156%201464%20159C1459%20162%201454%20164%201449%20166C1444%20168%201439%20170%201434%20172C1429%20173%201425%20175%201421%20177C1417%20178%201412%20180%201408%20182C1404%20183%201399%20184%201394%20185C1390%20185%201385%20185%201380%20185C1375%20185%201371%20184%201366%20183C1362%20182%201357%20181%201353%20180C1348%20179%201343%20179%201338%20178C1333%20177%201327%20177%201322%20175C1316%20174%201310%20173%201305%20170C1301%20168%201296%20164%201293%20160C1290%20156%201288%20152%201287%20147C1287%20142%201288%20137%201290%20133C1291%20128%201295%20124%201297%20120C1299%20116%201302%20113%201303%20109C1305%20106%201306%20102%201307%2099C1308%2095%201308%2091%201309%2087C1310%2083%201310%2079%201312%2075C1315%2071%201317%2067%201321%2064C1324%2061%201329%2058%201334%2056C1338%2054%201344%2053%201349%2052C1354%2051%201359%2050%201365%2050C1370%2049%201375%2049%201380%2049C1385%2049%201391%2048%201396%2049C1401%2050%201406%2051%201411%2052C1415%2054%201420%2057%201424%2060C1427%2063%201430%2066%201433%2070C1435%2073%201437%2077%201439%2081C1441%2084%201442%2087%201445%2090C1447%2093%201451%2095%201454%2098C1458%20101%201462%20104%201466%20108C1470%20111%201474%20116%201477%20120Z%22%2F%3E%3Cpath%20d%3D%22M1561%20120C1565%20128%201567%20138%201565%20146C1564%20155%201559%20163%201553%20171C1548%20178%201538%20184%201530%20189C1522%20195%201512%20199%201503%20203C1495%20207%201487%20210%201479%20214C1471%20218%201463%20221%201455%20225C1448%20228%201440%20231%201432%20234C1424%20236%201415%20238%201406%20239C1398%20239%201389%20239%201380%20238C1371%20238%201363%20236%201355%20235C1346%20233%201338%20232%201330%20231C1321%20230%201312%20229%201302%20228C1292%20227%201281%20226%201272%20223C1262%20221%201251%20218%201242%20212C1234%20207%201226%20200%201222%20193C1217%20186%201215%20176%201215%20168C1215%20159%201219%20150%201222%20142C1224%20134%201230%20127%201233%20120C1236%20113%201239%20107%201241%20100C1243%2094%201243%2087%201244%2080C1245%2073%201244%2065%201246%2058C1247%2050%201249%2042%201253%2035C1257%2028%201263%2021%201270%2016C1277%2010%201286%206%201295%202C1304%20-1%201314%20-3%201323%20-5C1333%20-7%201342%20-8%201352%20-9C1361%20-10%201370%20-11%201380%20-11C1390%20-11%201399%20-12%201409%20-10C1418%20-9%201428%20-6%201436%20-3C1444%201%201452%207%201458%2012C1464%2018%201469%2025%201473%2031C1477%2038%201480%2044%201485%2050C1489%2056%201493%2060%201498%2065C1504%2070%201511%2074%201519%2080C1526%2085%201535%2090%201542%2097C1549%20104%201557%20112%201561%20120Z%22%2F%3E%3Cpath%20d%3D%22M1647%20120C1651%20132%201652%20146%201649%20158C1645%20170%201637%20182%201628%20192C1618%20202%201605%20211%201593%20219C1582%20226%201568%20232%201557%20239C1545%20245%201534%20251%201523%20256C1512%20262%201502%20268%201491%20273C1480%20279%201468%20284%201456%20287C1444%20290%201431%20292%201418%20293C1405%20294%201392%20293%201380%20292C1368%20291%201356%20288%201343%20287C1331%20285%201319%20284%201306%20283C1293%20282%201279%20282%201264%20281C1250%20279%201233%20278%201219%20273C1205%20269%201190%20263%201179%20255C1168%20247%201159%20236%201154%20225C1149%20213%201148%20200%201149%20187C1150%20175%201155%20162%201159%20151C1163%20140%201169%20130%201172%20120C1175%20110%201177%20101%201178%2092C1179%2082%201177%2072%201178%2061C1178%2050%201177%2038%201179%2027C1181%2016%201185%204%201192%20-6C1199%20-16%201209%20-26%201219%20-33C1230%20-41%201244%20-46%201257%20-51C1270%20-56%201284%20-59%201297%20-62C1311%20-64%201325%20-67%201338%20-68C1352%20-70%201366%20-72%201380%20-72C1394%20-73%201408%20-72%201422%20-69C1435%20-67%201449%20-62%201460%20-56C1471%20-50%201481%20-41%201490%20-32C1498%20-24%201504%20-13%201511%20-5C1517%204%201522%2012%201529%2020C1536%2027%201544%2033%201554%2040C1563%2046%201576%2052%201587%2060C1599%2067%201613%2076%201623%2086C1633%2096%201643%20108%201647%20120Z%22%2F%3E%3Cpath%20d%3D%22M1733%20120C1737%20136%201735%20154%201729%20169C1723%20185%201710%20200%201698%20213C1685%20225%201668%20236%201654%20246C1639%20257%201624%20265%201609%20274C1595%20283%201582%20291%201568%20300C1555%20308%201542%20317%201527%20323C1512%20330%201496%20337%201480%20341C1464%20345%201447%20346%201430%20347C1413%20348%201396%20346%201380%20345C1364%20344%201348%20342%201331%20340C1315%20339%201299%20339%201281%20338C1263%20338%201243%20338%201224%20336C1205%20334%201183%20331%201165%20325C1147%20318%201129%20309%201117%20297C1104%20285%201095%20269%201090%20254C1085%20239%201087%20221%201088%20205C1090%20189%201097%20173%201101%20159C1105%20145%201111%20133%201113%20120C1115%20107%201114%2096%201113%2082C1112%2069%201108%2055%201108%2041C1107%2026%201106%2010%201110%20-5C1113%20-20%201120%20-35%201130%20-48C1139%20-61%201153%20-73%201168%20-82C1183%20-91%201201%20-98%201218%20-104C1235%20-110%201253%20-115%201271%20-119C1289%20-123%201307%20-127%201325%20-129C1343%20-132%201362%20-135%201380%20-134C1398%20-134%201418%20-133%201435%20-128C1452%20-124%201469%20-116%201483%20-107C1497%20-98%201509%20-85%201520%20-74C1531%20-63%201538%20-50%201547%20-39C1556%20-29%201563%20-19%201574%20-10C1585%20-2%201597%205%201612%2013C1626%2021%201645%2028%201660%2038C1676%2049%201695%2060%201707%2074C1719%2087%201730%20104%201733%20120Z%22%2F%3E%3Cpath%20d%3D%22M1818%20120C1820%20140%201814%20161%201805%20180C1796%20199%201779%20216%201763%20232C1748%20247%201729%20260%201712%20273C1695%20286%201678%20298%201662%20309C1646%20321%201631%20333%201615%20344C1598%20355%201582%20366%201563%20374C1545%20383%201525%20390%201505%20394C1485%20399%201463%20400%201442%20401C1421%20402%201400%20400%201380%20399C1360%20398%201340%20397%201319%20397C1298%20396%201277%20397%201254%20397C1231%20397%201206%20398%201182%20394C1158%20391%201132%20386%201111%20376C1090%20367%201070%20353%201057%20337C1043%20321%201035%20300%201031%20281C1028%20262%201031%20240%201034%20221C1036%20202%201044%20184%201047%20167C1050%20150%201053%20136%201053%20120C1053%20104%201048%2090%201045%2073C1042%2056%201036%2038%201035%2019C1033%201%201033%20-20%201038%20-38C1044%20-56%201054%20-75%201067%20-90C1080%20-106%201099%20-119%201118%20-130C1136%20-141%201158%20-150%201180%20-158C1201%20-165%201223%20-172%201245%20-177C1267%20-183%201289%20-189%201311%20-192C1334%20-195%201357%20-198%201380%20-197C1403%20-196%201426%20-193%201447%20-186C1468%20-178%201488%20-167%201505%20-155C1522%20-143%201535%20-127%201548%20-113C1561%20-99%201570%20-85%201582%20-73C1594%20-61%201606%20-51%201621%20-42C1636%20-32%201655%20-26%201674%20-16C1694%20-6%201718%203%201738%2016C1758%2029%201780%2044%201793%2062C1806%2079%201816%20100%201818%20120Z%22%2F%3E%3Cpath%20d%3D%22M1899%20120C1898%20143%201888%20168%201875%20190C1863%20211%201843%20231%201825%20250C1807%20268%201787%20283%201768%20299C1750%20315%201733%20330%201715%20345C1697%20360%201681%20375%201662%20389C1643%20402%201623%20416%201600%20425C1578%20435%201554%20443%201529%20448C1505%20453%201479%20454%201454%20455C1429%20456%201405%20454%201380%20455C1355%20455%201332%20455%201306%20456C1280%20457%201253%20460%201225%20460C1198%20460%201166%20460%201138%20455C1110%20450%201080%20441%201057%20428C1034%20415%201013%20395%201000%20375C987%20354%20981%20329%20979%20305C976%20282%20982%20257%20984%20235C987%20213%20994%20194%20995%20174C996%20155%20995%20139%20991%20120C988%20101%20979%2083%20974%2063C968%2042%20960%2020%20958%20-3C957%20-25%20958%20-50%20966%20-71C974%20-93%20988%20-114%201005%20-132C1022%20-150%201045%20-165%201068%20-178C1090%20-191%201116%20-201%201141%20-211C1166%20-221%201191%20-230%201218%20-237C1244%20-245%201270%20-252%201297%20-256C1324%20-259%201353%20-262%201380%20-260C1407%20-257%201435%20-251%201460%20-241C1484%20-231%201506%20-215%201526%20-200C1545%20-185%201560%20-166%201575%20-151C1591%20-135%201602%20-120%201618%20-107C1634%20-94%201650%20-85%201671%20-75C1692%20-65%201717%20-58%201742%20-47C1767%20-36%201797%20-24%201820%20-8C1842%208%201866%2028%201879%2050C1892%2071%201899%2097%201899%20120Z%22%2F%3E%3Cpath%20d%3D%22M1974%20120C1970%20147%201955%20175%201940%20199C1925%20223%201903%20246%201883%20267C1864%20288%201843%20306%201824%20325C1805%20344%201788%20363%201769%20381C1750%20399%201731%20418%201709%20434C1688%20450%201663%20465%201637%20476C1611%20488%201582%20495%201553%20501C1525%20506%201495%20507%201466%20509C1437%20511%201409%20511%201380%20513C1351%20514%201323%20517%201292%20520C1261%20522%201228%20527%201195%20526C1162%20526%201125%20525%201093%20517C1062%20509%201028%20496%201004%20478C980%20460%20960%20435%20948%20410C936%20385%20933%20354%20932%20327C930%20300%20937%20273%20939%20249C940%20224%20944%20203%20942%20182C940%20160%20934%20142%20926%20120C919%2098%20906%2076%20898%2052C890%2028%20881%201%20880%20-25C880%20-52%20884%20-80%20895%20-104C905%20-129%20924%20-152%20944%20-172C965%20-192%20992%20-209%201018%20-225C1045%20-240%201073%20-253%201102%20-265C1130%20-278%201160%20-289%201190%20-298C1220%20-307%201251%20-317%201283%20-320C1315%20-324%201349%20-326%201380%20-321C1411%20-316%201444%20-306%201471%20-293C1499%20-280%201523%20-260%201545%20-243C1567%20-225%201583%20-204%201602%20-187C1620%20-171%201635%20-156%201656%20-143C1677%20-131%201699%20-122%201726%20-112C1752%20-102%201785%20-94%201815%20-81C1844%20-67%201879%20-52%201904%20-32C1929%20-13%201952%2012%201963%2038C1975%2063%201978%2093%201974%20120Z%22%2F%3E%3Cpath%20d%3D%22M2044%20120C2036%20150%202017%20180%202000%20207C1982%20235%201959%20259%201939%20283C1919%20307%201899%20329%201880%20351C1861%20374%201844%20396%201824%20418C1803%20439%201782%20461%201757%20480C1732%20498%201703%20514%201673%20527C1643%20539%201610%20547%201577%20553C1544%20559%201511%20561%201478%20565C1445%20568%201414%20570%201380%20574C1346%20578%201313%20585%201277%20588C1241%20592%201201%20598%201163%20596C1125%20595%201083%20591%201048%20580C1013%20568%20979%20549%20954%20526C930%20503%20912%20471%20902%20441C891%20411%20891%20376%20890%20347C888%20317%20895%20288%20894%20261C894%20235%20894%20213%20887%20189C881%20166%20868%20145%20857%20120C846%2095%20828%2069%20819%2041C810%2013%20801%20-19%20802%20-48C803%20-78%20810%20-109%20824%20-137C838%20-164%20861%20-189%20886%20-212C910%20-234%20940%20-253%20969%20-271C999%20-290%201030%20-305%201062%20-320C1094%20-335%201127%20-350%201161%20-361C1196%20-371%201232%20-382%201269%20-385C1305%20-388%201344%20-387%201380%20-380C1416%20-373%201451%20-358%201482%20-342C1512%20-326%201539%20-303%201563%20-283C1588%20-263%201606%20-241%201629%20-225C1651%20-208%201671%20-194%201697%20-182C1723%20-170%201754%20-164%201786%20-153C1819%20-142%201858%20-132%201892%20-117C1926%20-101%201964%20-81%201989%20-57C2014%20-34%202035%20-3%202044%2026C2053%2056%202051%2090%202044%20120Z%22%2F%3E%3Cpath%20d%3D%22M2107%20120C2096%20153%202074%20185%202055%20215C2036%20245%202013%20272%201994%20299C1974%20326%201956%20351%201937%20377C1918%20403%201901%20430%201879%20455C1857%20479%201833%20505%201804%20525C1776%20545%201743%20562%201709%20576C1675%20589%201637%20597%201600%20605C1564%20612%201527%20616%201491%20622C1454%20628%201418%20634%201380%20640C1342%20647%201302%20657%201261%20661C1219%20666%201173%20672%201130%20669C1087%20666%201041%20658%201004%20641C967%20625%20932%20599%20908%20570C884%20541%20870%20503%20860%20469C851%20435%20853%20397%20851%20364C849%20332%20854%20302%20850%20274C846%20247%20839%20224%20828%20198C817%20172%20798%20148%20783%20120C768%2092%20747%2061%20737%2029C727%20-3%20720%20-38%20724%20-71C727%20-104%20739%20-138%20757%20-168C774%20-198%20801%20-225%20828%20-250C856%20-275%20888%20-297%20921%20-318C953%20-339%20987%20-359%201022%20-376C1057%20-394%201094%20-412%201133%20-424C1171%20-436%201214%20-446%201255%20-448C1296%20-450%201340%20-446%201380%20-436C1420%20-426%201458%20-407%201492%20-388C1525%20-369%201554%20-343%201581%20-322C1609%20-302%201630%20-280%201657%20-264C1684%20-248%201711%20-237%201743%20-226C1776%20-215%201814%20-209%201852%20-197C1891%20-185%201937%20-173%201974%20-154C2010%20-135%202049%20-110%202073%20-82C2098%20-54%202114%20-18%202120%2016C2126%2049%202118%2087%202107%20120Z%22%2F%3E%3Cpath%20d%3D%22M232%20760C230%20764%20227%20767%20225%20771C223%20774%20220%20777%20218%20780C216%20783%20214%20786%20212%20789C210%20792%20208%20795%20206%20798C204%20800%20201%20803%20198%20805C194%20808%20191%20810%20187%20811C183%20813%20179%20813%20175%20814C171%20815%20167%20816%20162%20816C158%20817%20154%20818%20150%20819C146%20820%20141%20821%20136%20822C132%20822%20126%20823%20121%20823C117%20822%20111%20821%20107%20819C103%20817%2099%20814%2097%20811C94%20807%2093%20803%2092%20799C91%20795%2092%20790%2092%20787C92%20783%2092%20780%2092%20777C92%20774%2091%20771%2089%20769C88%20766%2085%20763%2083%20760C81%20757%2079%20753%2077%20750C76%20746%2075%20742%2076%20738C76%20735%2078%20731%2080%20727C82%20724%2085%20721%2088%20718C91%20715%2094%20713%2098%20711C102%20708%20105%20706%20109%20704C113%20702%20118%20700%20122%20698C126%20697%20131%20696%20136%20696C141%20696%20146%20696%20150%20698C154%20699%20159%20701%20162%20704C166%20706%20169%20709%20172%20711C175%20714%20177%20716%20181%20718C184%20719%20187%20720%20190%20721C194%20723%20199%20723%20203%20724C208%20725%20213%20727%20218%20729C222%20731%20226%20734%20229%20737C232%20740%20233%20744%20234%20748C234%20752%20233%20756%20232%20760Z%22%2F%3E%3Cpath%20d%3D%22M301%20760C298%20767%20293%20773%20289%20780C285%20786%20282%20791%20278%20797C275%20803%20272%20809%20269%20815C265%20821%20262%20827%20257%20832C253%20837%20247%20843%20241%20847C235%20851%20227%20854%20220%20857C213%20860%20205%20862%20197%20864C190%20866%20182%20867%20174%20870C166%20872%20159%20874%20150%20877C141%20879%20132%20882%20123%20883C114%20884%20103%20885%2094%20884C85%20882%2075%20879%2068%20874C61%20869%2055%20862%2051%20855C47%20848%2045%20839%2044%20831C43%20823%2044%20816%2043%20809C43%20803%2043%20797%2041%20792C39%20786%2035%20782%2032%20777C28%20771%2022%20766%2018%20760C14%20754%2010%20747%208%20740C6%20733%205%20725%207%20718C8%20711%2012%20704%2016%20698C20%20692%2026%20686%2032%20681C38%20675%2044%20670%2051%20665C57%20660%2064%20656%2072%20651C79%20647%2087%20643%2096%20641C104%20639%20114%20637%20123%20637C132%20638%20142%20640%20150%20643C158%20646%20166%20651%20173%20655C180%20659%20186%20665%20192%20669C198%20672%20203%20676%20209%20678C216%20680%20223%20681%20231%20683C239%20685%20249%20685%20258%20688C266%20690%20277%20693%20284%20698C292%20703%20299%20709%20302%20716C306%20722%20308%20730%20307%20738C307%20745%20304%20753%20301%20760Z%22%2F%3E%3Cpath%20d%3D%22M365%20760C360%20770%20354%20779%20350%20788C345%20797%20341%20806%20337%20814C333%20823%20330%20832%20325%20841C321%20850%20316%20859%20309%20867C302%20874%20293%20882%20284%20888C275%20894%20263%20898%20253%20902C242%20907%20231%20910%20220%20914C209%20917%20198%20921%20186%20925C175%20930%20163%20935%20150%20939C137%20943%20123%20947%20108%20948C94%20950%2079%20949%2065%20946C52%20942%2039%20935%2029%20927C20%20919%2013%20906%208%20895C3%20884%202%20871%200%20860C-1%20850%20-1%20839%20-3%20830C-5%20822%20-7%20815%20-11%20807C-16%20800%20-23%20793%20-30%20785C-36%20778%20-45%20769%20-51%20760C-56%20751%20-62%20740%20-64%20730C-65%20720%20-65%20708%20-62%20698C-59%20688%20-53%20678%20-46%20669C-40%20660%20-32%20652%20-23%20644C-15%20635%20-6%20627%203%20620C13%20612%2022%20605%2033%20599C45%20592%2057%20587%2070%20584C83%20581%2097%20580%20110%20581C124%20582%20138%20586%20150%20591C162%20596%20173%20603%20183%20609C193%20615%20202%20621%20211%20626C220%20630%20229%20633%20240%20635C251%20638%20263%20638%20276%20640C289%20642%20304%20644%20317%20648C330%20652%20344%20658%20354%20666C363%20674%20371%20684%20375%20695C379%20705%20378%20717%20377%20728C375%20739%20369%20750%20365%20760Z%22%2F%3E%3Cpath%20d%3D%22M424%20760C419%20773%20413%20784%20408%20796C403%20808%20400%20820%20396%20832C391%20843%20388%20856%20382%20867C376%20879%20368%20890%20359%20900C350%20910%20338%20919%20325%20927C313%20935%20299%20941%20285%20947C271%20953%20257%20958%20243%20965C229%20971%20215%20978%20200%20985C184%20992%20168%201000%20150%201005C132%201011%20112%201016%2093%201017C75%201017%2054%201014%2037%201008C21%201001%205%20990%20-7%20977C-18%20964%20-25%20947%20-31%20932C-36%20917%20-37%20901%20-40%20888C-43%20874%20-44%20862%20-48%20852C-53%20841%20-59%20833%20-67%20823C-75%20814%20-86%20805%20-96%20795C-105%20784%20-116%20772%20-123%20760C-130%20748%20-135%20733%20-135%20720C-136%20706%20-133%20692%20-128%20679C-124%20666%20-115%20653%20-107%20641C-98%20629%20-88%20618%20-78%20607C-68%20596%20-57%20585%20-45%20574C-33%20564%20-20%20553%20-5%20546C10%20538%2027%20531%2044%20528C62%20525%2081%20525%2099%20528C116%20530%20134%20537%20150%20543C166%20549%20179%20559%20193%20565C207%20571%20218%20578%20231%20581C245%20585%20258%20587%20274%20588C290%20590%20308%20590%20326%20592C344%20595%20364%20598%20381%20605C397%20612%20414%20622%20424%20633C435%20645%20441%20660%20444%20674C447%20689%20444%20705%20441%20719C437%20733%20430%20747%20424%20760Z%22%2F%3E%3Cpath%20d%3D%22M481%20760C476%20776%20471%20790%20466%20805C462%20819%20460%20834%20455%20849C450%20863%20446%20879%20438%20893C430%20907%20420%20921%20408%20933C396%20945%20380%20955%20365%20965C350%20975%20333%20982%20317%20991C301%201000%20285%201008%20267%201018C250%201028%20233%201039%20214%201049C194%201058%20173%201070%20150%201076C127%201082%20102%201087%2078%201086C55%201084%2030%201078%2010%201067C-9%201057%20-27%201040%20-40%201023C-52%201006%20-59%20984%20-66%20966C-73%20948%20-74%20929%20-79%20914C-84%20899%20-89%20886%20-97%20874C-105%20862%20-116%20852%20-128%20841C-139%20829%20-155%20818%20-167%20805C-178%20791%20-191%20776%20-197%20760C-204%20744%20-207%20726%20-207%20710C-206%20693%20-200%20676%20-193%20660C-186%20644%20-176%20629%20-166%20614C-156%20599%20-145%20585%20-132%20570C-120%20556%20-108%20541%20-93%20528C-78%20516%20-61%20502%20-42%20493C-23%20485%20-1%20478%2020%20475C42%20473%2066%20475%2088%20479C110%20483%20131%20492%20150%20499C169%20506%20185%20515%20203%20521C220%20527%20235%20531%20253%20533C271%20536%20291%20535%20312%20536C333%20537%20358%20536%20381%20540C403%20544%20428%20550%20447%20560C466%20571%20483%20585%20494%20601C504%20617%20508%20637%20509%20655C510%20674%20505%20693%20500%20711C495%20728%20487%20744%20481%20760Z%22%2F%3E%3Cpath%20d%3D%22M538%20760C533%20778%20529%20795%20525%20813C522%20831%20520%20849%20515%20866C509%20884%20503%20902%20493%20918C483%20935%20469%20950%20454%20964C440%20978%20421%20990%20404%201002C386%201014%20368%201024%20349%201036C331%201048%20313%201061%20293%201075C273%201088%20252%201104%20229%201116C205%201129%20178%201142%20150%201149C122%201155%2091%201158%2063%201154C36%201149%207%201138%20-15%201123C-37%201107%20-55%201084%20-69%201064C-83%201043%20-90%201017%20-99%20997C-107%20977%20-111%20957%20-119%20941C-128%20924%20-137%20912%20-149%20898C-162%20885%20-179%20874%20-195%20860C-210%20846%20-229%20832%20-242%20815C-255%20799%20-267%20779%20-273%20760C-278%20741%20-279%20720%20-276%20700C-273%20680%20-265%20661%20-256%20642C-247%20623%20-236%20605%20-225%20587C-213%20569%20-201%20551%20-187%20533C-174%20516%20-159%20498%20-141%20483C-123%20468%20-102%20453%20-78%20443C-55%20434%20-28%20428%20-2%20427C25%20425%2053%20430%2078%20435C104%20440%20128%20450%20150%20457C172%20464%20192%20471%20213%20475C234%20479%20254%20480%20277%20480C301%20480%20327%20476%20354%20477C381%20478%20413%20478%20439%20484C466%20490%20495%20501%20515%20515C535%20530%20551%20550%20560%20571C569%20591%20570%20616%20570%20638C569%20660%20561%20682%20556%20703C550%20723%20543%20742%20538%20760Z%22%2F%3E%3Cpath%20d%3D%22M595%20760C591%20781%20590%20801%20587%20822C583%20842%20581%20863%20575%20884C568%20904%20559%20925%20546%20943C534%20961%20516%20978%20499%20994C482%201010%20461%201024%20442%201038C423%201053%20403%201067%20383%201083C363%201099%20344%201118%20321%201135C297%201152%20273%201173%20244%201188C216%201202%20183%201217%20150%201222C117%201227%2080%201226%2049%201218C18%201209%20-13%201191%20-37%201172C-61%201152%20-80%201124%20-95%201100C-111%201076%20-119%201049%20-130%201027C-141%201005%20-149%20986%20-162%20970C-175%20953%20-191%20940%20-208%20926C-226%20911%20-249%20898%20-268%20882C-286%20865%20-307%20847%20-321%20826C-334%20806%20-344%20783%20-348%20760C-352%20737%20-349%20713%20-344%20690C-339%20668%20-328%20646%20-318%20624C-308%20602%20-296%20581%20-284%20560C-271%20538%20-259%20516%20-243%20496C-227%20476%20-210%20454%20-188%20438C-166%20421%20-140%20406%20-112%20397C-84%20388%20-51%20384%20-21%20384C9%20384%2041%20390%2070%20396C98%20401%20124%20411%20150%20416C176%20421%20198%20425%20224%20425C250%20426%20275%20422%20305%20420C334%20418%20368%20412%20401%20413C433%20414%20471%20416%20501%20426C531%20435%20561%20451%20581%20471C601%20490%20615%20517%20622%20542C630%20567%20628%20596%20626%20621C624%20647%20615%20672%20610%20695C605%20718%20599%20739%20595%20760Z%22%2F%3E%3Cpath%20d%3D%22M925%201180C924%201185%20923%201190%20923%201194C922%201199%20921%201204%20919%201209C918%201214%20916%201218%20913%201223C910%201227%20906%201231%20902%201235C898%201239%20893%201242%20888%201245C884%201249%20879%201252%20874%201255C869%201258%20864%201262%20859%201266C853%201269%20848%201273%20841%201276C835%201279%20827%201282%20820%201283C813%201284%20804%201284%20797%201283C790%201281%20783%201278%20777%201274C772%201270%20767%201264%20763%201259C759%201254%20756%201248%20754%201243C751%201239%20748%201234%20745%201230C742%201226%20739%201223%20735%201219C731%201216%20727%201212%20723%201208C719%201204%20715%201200%20712%201195C709%201191%20707%201185%20706%201180C705%201175%20705%201169%20707%201164C708%201159%20710%201154%20712%201149C714%201144%20717%201139%20720%201134C723%201129%20726%201124%20730%201120C734%201115%20738%201110%20743%201107C748%201103%20754%201099%20760%201097C766%201095%20774%201093%20780%201093C787%201092%20795%201093%20801%201094C808%201095%20814%201097%20820%201098C826%201099%20831%201100%20837%201101C843%201101%20849%201101%20856%201101C862%201101%20870%201101%20877%201101C884%201102%20892%201103%20899%201105C905%201107%20912%201111%20917%201115C922%201119%20925%201125%20927%201130C929%201136%20930%201142%20930%201148C930%201154%20928%201159%20928%201165C927%201170%20926%201175%20925%201180Z%22%2F%3E%3Cpath%20d%3D%22M994%201180C993%201188%20993%201196%20991%201204C990%201212%20989%201220%20986%201228C983%201236%20978%201244%20973%201251C968%201258%20961%201264%20955%201270C948%201277%20941%201282%20933%201288C926%201294%20919%201300%20911%201306C903%201312%20895%201319%20886%201326C877%201332%20867%201339%20856%201344C845%201348%20832%201353%20820%201354C808%201355%20794%201353%20783%201350C771%201346%20760%201339%20751%201332C742%201325%20734%201316%20728%201308C721%201300%20717%201291%20711%201284C706%201276%20701%201270%20695%201264C689%201258%20682%201253%20675%201247C668%201241%20659%201235%20653%201229C646%201222%20640%201214%20636%201206C632%201198%20629%201189%20629%201180C628%201171%20630%201162%20632%201153C634%201145%20638%201136%20641%201128C645%201120%20649%201111%20654%201103C659%201095%20664%201087%20670%201079C676%201072%20684%201064%20692%201058C701%201052%20711%201047%20722%201044C732%201041%20744%201039%20756%201039C767%201038%20779%201040%20789%201041C800%201043%20810%201045%20820%201046C830%201047%20839%201047%20849%201047C860%201046%20870%201044%20882%201044C893%201043%20906%201042%20919%201043C931%201045%20944%201047%20955%201052C965%201056%20975%201063%20982%201071C989%201079%20994%201089%20997%201098C999%201108%20999%201118%20999%201128C999%201137%20997%201146%20996%201155C995%201164%20994%201172%20994%201180Z%22%2F%3E%3Cpath%20d%3D%22M1063%201180C1062%201191%201063%201203%201061%201214C1059%201225%201056%201237%201052%201247C1047%201258%201040%201269%201033%201278C1025%201288%201016%201297%201007%201305C998%201314%20988%201322%20978%201331C969%201340%20960%201349%20949%201359C938%201368%20928%201379%20915%201388C902%201398%20887%201408%20871%201413C856%201419%20837%201424%20820%201424C803%201424%20784%201420%20768%201414C753%201408%20738%201397%20726%201387C714%201377%20704%201364%20695%201353C685%201343%20678%201332%20670%201323C661%201314%20652%201307%20643%201299C633%201291%20621%201285%20611%201277C600%201269%20588%201260%20579%201250C570%201240%20562%201229%20558%201217C553%201205%20551%201192%20551%201180C551%201168%20554%201155%20558%201143C561%201131%20566%201119%20571%201107C576%201096%20581%201084%20588%201073C594%201061%20601%201049%20610%201039C619%201029%20630%201018%20643%201011C655%201003%20670%20997%20685%20993C700%20990%20717%20989%20733%20989C748%20988%20764%20991%20778%20991C793%20992%20806%20993%20820%20993C834%20993%20847%20991%20862%20989C877%20987%20893%20983%20910%20982C927%20981%20946%20980%20963%20982C980%20985%20998%20989%201012%20997C1026%201005%201038%201016%201047%201028C1055%201040%201060%201054%201063%201068C1066%201081%201066%201095%201066%201108C1066%201121%201064%201134%201064%201146C1064%201158%201063%201169%201063%201180Z%22%2F%3E%3Cpath%20d%3D%22M1134%201180C1134%201195%201134%201209%201131%201224C1128%201238%201124%201253%201117%201266C1110%201280%201101%201293%201091%201305C1081%201317%201069%201328%201058%201340C1047%201351%201036%201363%201024%201375C1013%201387%201002%201401%20989%201414C975%201427%20962%201442%20945%201454C928%201465%20908%201477%20887%201484C866%201490%20842%201493%20820%201491C798%201490%20775%201482%20755%201473C736%201464%20718%201450%20703%201437C688%201425%20676%201410%20663%201397C651%201385%20640%201374%20627%201364C615%201354%20601%201346%20587%201337C573%201327%20556%201319%20542%201309C528%201298%20513%201286%20502%201273C491%201259%20483%201244%20478%201228C474%201213%20473%201196%20474%201180C475%201164%20480%201148%20484%201133C488%201117%20494%201102%20500%201087C506%201072%20512%201056%20520%201042C529%201027%20538%201012%20550%20999C563%20986%20578%20974%20595%20965C612%20957%20632%20951%20652%20947C671%20943%20692%20943%20712%20942C731%20941%20750%20943%20768%20943C786%20942%20802%20942%20820%20939C838%20936%20856%20931%20876%20927C896%20924%20918%20918%20940%20916C962%20915%20987%20914%201009%20918C1030%20923%201052%20931%201069%20943C1086%20954%201099%20970%201109%20986C1119%201002%201123%201021%201127%201038C1131%201056%201130%201073%201131%201089C1132%201106%201132%201121%201132%201136C1133%201151%201134%201165%201134%201180Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: linear-gradient(90deg, #000, transparent 18%, transparent 82%, #000), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221100%22%20viewBox%3D%220%200%201600%201100%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22fv%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22fh%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22mv%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%221100%22%3E%3Crect%20width%3D%221600%22%20height%3D%221100%22%20fill%3D%22url(%23fv)%22%20stroke%3D%22none%22%2F%3E%3C%2Fmask%3E%3Cmask%20id%3D%22mh%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%221100%22%3E%3Crect%20width%3D%221600%22%20height%3D%221100%22%20fill%3D%22url(%23fh)%22%20stroke%3D%22none%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url(%23mv)%22%3E%3Cg%20mask%3D%22url(%23mh)%22%3E%3Cpath%20d%3D%22M1477%20120C1479%20124%201481%20130%201481%20134C1481%20139%201479%20144%201476%20148C1473%20152%201468%20156%201464%20159C1459%20162%201454%20164%201449%20166C1444%20168%201439%20170%201434%20172C1429%20173%201425%20175%201421%20177C1417%20178%201412%20180%201408%20182C1404%20183%201399%20184%201394%20185C1390%20185%201385%20185%201380%20185C1375%20185%201371%20184%201366%20183C1362%20182%201357%20181%201353%20180C1348%20179%201343%20179%201338%20178C1333%20177%201327%20177%201322%20175C1316%20174%201310%20173%201305%20170C1301%20168%201296%20164%201293%20160C1290%20156%201288%20152%201287%20147C1287%20142%201288%20137%201290%20133C1291%20128%201295%20124%201297%20120C1299%20116%201302%20113%201303%20109C1305%20106%201306%20102%201307%2099C1308%2095%201308%2091%201309%2087C1310%2083%201310%2079%201312%2075C1315%2071%201317%2067%201321%2064C1324%2061%201329%2058%201334%2056C1338%2054%201344%2053%201349%2052C1354%2051%201359%2050%201365%2050C1370%2049%201375%2049%201380%2049C1385%2049%201391%2048%201396%2049C1401%2050%201406%2051%201411%2052C1415%2054%201420%2057%201424%2060C1427%2063%201430%2066%201433%2070C1435%2073%201437%2077%201439%2081C1441%2084%201442%2087%201445%2090C1447%2093%201451%2095%201454%2098C1458%20101%201462%20104%201466%20108C1470%20111%201474%20116%201477%20120Z%22%2F%3E%3Cpath%20d%3D%22M1561%20120C1565%20128%201567%20138%201565%20146C1564%20155%201559%20163%201553%20171C1548%20178%201538%20184%201530%20189C1522%20195%201512%20199%201503%20203C1495%20207%201487%20210%201479%20214C1471%20218%201463%20221%201455%20225C1448%20228%201440%20231%201432%20234C1424%20236%201415%20238%201406%20239C1398%20239%201389%20239%201380%20238C1371%20238%201363%20236%201355%20235C1346%20233%201338%20232%201330%20231C1321%20230%201312%20229%201302%20228C1292%20227%201281%20226%201272%20223C1262%20221%201251%20218%201242%20212C1234%20207%201226%20200%201222%20193C1217%20186%201215%20176%201215%20168C1215%20159%201219%20150%201222%20142C1224%20134%201230%20127%201233%20120C1236%20113%201239%20107%201241%20100C1243%2094%201243%2087%201244%2080C1245%2073%201244%2065%201246%2058C1247%2050%201249%2042%201253%2035C1257%2028%201263%2021%201270%2016C1277%2010%201286%206%201295%202C1304%20-1%201314%20-3%201323%20-5C1333%20-7%201342%20-8%201352%20-9C1361%20-10%201370%20-11%201380%20-11C1390%20-11%201399%20-12%201409%20-10C1418%20-9%201428%20-6%201436%20-3C1444%201%201452%207%201458%2012C1464%2018%201469%2025%201473%2031C1477%2038%201480%2044%201485%2050C1489%2056%201493%2060%201498%2065C1504%2070%201511%2074%201519%2080C1526%2085%201535%2090%201542%2097C1549%20104%201557%20112%201561%20120Z%22%2F%3E%3Cpath%20d%3D%22M1647%20120C1651%20132%201652%20146%201649%20158C1645%20170%201637%20182%201628%20192C1618%20202%201605%20211%201593%20219C1582%20226%201568%20232%201557%20239C1545%20245%201534%20251%201523%20256C1512%20262%201502%20268%201491%20273C1480%20279%201468%20284%201456%20287C1444%20290%201431%20292%201418%20293C1405%20294%201392%20293%201380%20292C1368%20291%201356%20288%201343%20287C1331%20285%201319%20284%201306%20283C1293%20282%201279%20282%201264%20281C1250%20279%201233%20278%201219%20273C1205%20269%201190%20263%201179%20255C1168%20247%201159%20236%201154%20225C1149%20213%201148%20200%201149%20187C1150%20175%201155%20162%201159%20151C1163%20140%201169%20130%201172%20120C1175%20110%201177%20101%201178%2092C1179%2082%201177%2072%201178%2061C1178%2050%201177%2038%201179%2027C1181%2016%201185%204%201192%20-6C1199%20-16%201209%20-26%201219%20-33C1230%20-41%201244%20-46%201257%20-51C1270%20-56%201284%20-59%201297%20-62C1311%20-64%201325%20-67%201338%20-68C1352%20-70%201366%20-72%201380%20-72C1394%20-73%201408%20-72%201422%20-69C1435%20-67%201449%20-62%201460%20-56C1471%20-50%201481%20-41%201490%20-32C1498%20-24%201504%20-13%201511%20-5C1517%204%201522%2012%201529%2020C1536%2027%201544%2033%201554%2040C1563%2046%201576%2052%201587%2060C1599%2067%201613%2076%201623%2086C1633%2096%201643%20108%201647%20120Z%22%2F%3E%3Cpath%20d%3D%22M1733%20120C1737%20136%201735%20154%201729%20169C1723%20185%201710%20200%201698%20213C1685%20225%201668%20236%201654%20246C1639%20257%201624%20265%201609%20274C1595%20283%201582%20291%201568%20300C1555%20308%201542%20317%201527%20323C1512%20330%201496%20337%201480%20341C1464%20345%201447%20346%201430%20347C1413%20348%201396%20346%201380%20345C1364%20344%201348%20342%201331%20340C1315%20339%201299%20339%201281%20338C1263%20338%201243%20338%201224%20336C1205%20334%201183%20331%201165%20325C1147%20318%201129%20309%201117%20297C1104%20285%201095%20269%201090%20254C1085%20239%201087%20221%201088%20205C1090%20189%201097%20173%201101%20159C1105%20145%201111%20133%201113%20120C1115%20107%201114%2096%201113%2082C1112%2069%201108%2055%201108%2041C1107%2026%201106%2010%201110%20-5C1113%20-20%201120%20-35%201130%20-48C1139%20-61%201153%20-73%201168%20-82C1183%20-91%201201%20-98%201218%20-104C1235%20-110%201253%20-115%201271%20-119C1289%20-123%201307%20-127%201325%20-129C1343%20-132%201362%20-135%201380%20-134C1398%20-134%201418%20-133%201435%20-128C1452%20-124%201469%20-116%201483%20-107C1497%20-98%201509%20-85%201520%20-74C1531%20-63%201538%20-50%201547%20-39C1556%20-29%201563%20-19%201574%20-10C1585%20-2%201597%205%201612%2013C1626%2021%201645%2028%201660%2038C1676%2049%201695%2060%201707%2074C1719%2087%201730%20104%201733%20120Z%22%2F%3E%3Cpath%20d%3D%22M1818%20120C1820%20140%201814%20161%201805%20180C1796%20199%201779%20216%201763%20232C1748%20247%201729%20260%201712%20273C1695%20286%201678%20298%201662%20309C1646%20321%201631%20333%201615%20344C1598%20355%201582%20366%201563%20374C1545%20383%201525%20390%201505%20394C1485%20399%201463%20400%201442%20401C1421%20402%201400%20400%201380%20399C1360%20398%201340%20397%201319%20397C1298%20396%201277%20397%201254%20397C1231%20397%201206%20398%201182%20394C1158%20391%201132%20386%201111%20376C1090%20367%201070%20353%201057%20337C1043%20321%201035%20300%201031%20281C1028%20262%201031%20240%201034%20221C1036%20202%201044%20184%201047%20167C1050%20150%201053%20136%201053%20120C1053%20104%201048%2090%201045%2073C1042%2056%201036%2038%201035%2019C1033%201%201033%20-20%201038%20-38C1044%20-56%201054%20-75%201067%20-90C1080%20-106%201099%20-119%201118%20-130C1136%20-141%201158%20-150%201180%20-158C1201%20-165%201223%20-172%201245%20-177C1267%20-183%201289%20-189%201311%20-192C1334%20-195%201357%20-198%201380%20-197C1403%20-196%201426%20-193%201447%20-186C1468%20-178%201488%20-167%201505%20-155C1522%20-143%201535%20-127%201548%20-113C1561%20-99%201570%20-85%201582%20-73C1594%20-61%201606%20-51%201621%20-42C1636%20-32%201655%20-26%201674%20-16C1694%20-6%201718%203%201738%2016C1758%2029%201780%2044%201793%2062C1806%2079%201816%20100%201818%20120Z%22%2F%3E%3Cpath%20d%3D%22M1899%20120C1898%20143%201888%20168%201875%20190C1863%20211%201843%20231%201825%20250C1807%20268%201787%20283%201768%20299C1750%20315%201733%20330%201715%20345C1697%20360%201681%20375%201662%20389C1643%20402%201623%20416%201600%20425C1578%20435%201554%20443%201529%20448C1505%20453%201479%20454%201454%20455C1429%20456%201405%20454%201380%20455C1355%20455%201332%20455%201306%20456C1280%20457%201253%20460%201225%20460C1198%20460%201166%20460%201138%20455C1110%20450%201080%20441%201057%20428C1034%20415%201013%20395%201000%20375C987%20354%20981%20329%20979%20305C976%20282%20982%20257%20984%20235C987%20213%20994%20194%20995%20174C996%20155%20995%20139%20991%20120C988%20101%20979%2083%20974%2063C968%2042%20960%2020%20958%20-3C957%20-25%20958%20-50%20966%20-71C974%20-93%20988%20-114%201005%20-132C1022%20-150%201045%20-165%201068%20-178C1090%20-191%201116%20-201%201141%20-211C1166%20-221%201191%20-230%201218%20-237C1244%20-245%201270%20-252%201297%20-256C1324%20-259%201353%20-262%201380%20-260C1407%20-257%201435%20-251%201460%20-241C1484%20-231%201506%20-215%201526%20-200C1545%20-185%201560%20-166%201575%20-151C1591%20-135%201602%20-120%201618%20-107C1634%20-94%201650%20-85%201671%20-75C1692%20-65%201717%20-58%201742%20-47C1767%20-36%201797%20-24%201820%20-8C1842%208%201866%2028%201879%2050C1892%2071%201899%2097%201899%20120Z%22%2F%3E%3Cpath%20d%3D%22M1974%20120C1970%20147%201955%20175%201940%20199C1925%20223%201903%20246%201883%20267C1864%20288%201843%20306%201824%20325C1805%20344%201788%20363%201769%20381C1750%20399%201731%20418%201709%20434C1688%20450%201663%20465%201637%20476C1611%20488%201582%20495%201553%20501C1525%20506%201495%20507%201466%20509C1437%20511%201409%20511%201380%20513C1351%20514%201323%20517%201292%20520C1261%20522%201228%20527%201195%20526C1162%20526%201125%20525%201093%20517C1062%20509%201028%20496%201004%20478C980%20460%20960%20435%20948%20410C936%20385%20933%20354%20932%20327C930%20300%20937%20273%20939%20249C940%20224%20944%20203%20942%20182C940%20160%20934%20142%20926%20120C919%2098%20906%2076%20898%2052C890%2028%20881%201%20880%20-25C880%20-52%20884%20-80%20895%20-104C905%20-129%20924%20-152%20944%20-172C965%20-192%20992%20-209%201018%20-225C1045%20-240%201073%20-253%201102%20-265C1130%20-278%201160%20-289%201190%20-298C1220%20-307%201251%20-317%201283%20-320C1315%20-324%201349%20-326%201380%20-321C1411%20-316%201444%20-306%201471%20-293C1499%20-280%201523%20-260%201545%20-243C1567%20-225%201583%20-204%201602%20-187C1620%20-171%201635%20-156%201656%20-143C1677%20-131%201699%20-122%201726%20-112C1752%20-102%201785%20-94%201815%20-81C1844%20-67%201879%20-52%201904%20-32C1929%20-13%201952%2012%201963%2038C1975%2063%201978%2093%201974%20120Z%22%2F%3E%3Cpath%20d%3D%22M2044%20120C2036%20150%202017%20180%202000%20207C1982%20235%201959%20259%201939%20283C1919%20307%201899%20329%201880%20351C1861%20374%201844%20396%201824%20418C1803%20439%201782%20461%201757%20480C1732%20498%201703%20514%201673%20527C1643%20539%201610%20547%201577%20553C1544%20559%201511%20561%201478%20565C1445%20568%201414%20570%201380%20574C1346%20578%201313%20585%201277%20588C1241%20592%201201%20598%201163%20596C1125%20595%201083%20591%201048%20580C1013%20568%20979%20549%20954%20526C930%20503%20912%20471%20902%20441C891%20411%20891%20376%20890%20347C888%20317%20895%20288%20894%20261C894%20235%20894%20213%20887%20189C881%20166%20868%20145%20857%20120C846%2095%20828%2069%20819%2041C810%2013%20801%20-19%20802%20-48C803%20-78%20810%20-109%20824%20-137C838%20-164%20861%20-189%20886%20-212C910%20-234%20940%20-253%20969%20-271C999%20-290%201030%20-305%201062%20-320C1094%20-335%201127%20-350%201161%20-361C1196%20-371%201232%20-382%201269%20-385C1305%20-388%201344%20-387%201380%20-380C1416%20-373%201451%20-358%201482%20-342C1512%20-326%201539%20-303%201563%20-283C1588%20-263%201606%20-241%201629%20-225C1651%20-208%201671%20-194%201697%20-182C1723%20-170%201754%20-164%201786%20-153C1819%20-142%201858%20-132%201892%20-117C1926%20-101%201964%20-81%201989%20-57C2014%20-34%202035%20-3%202044%2026C2053%2056%202051%2090%202044%20120Z%22%2F%3E%3Cpath%20d%3D%22M2107%20120C2096%20153%202074%20185%202055%20215C2036%20245%202013%20272%201994%20299C1974%20326%201956%20351%201937%20377C1918%20403%201901%20430%201879%20455C1857%20479%201833%20505%201804%20525C1776%20545%201743%20562%201709%20576C1675%20589%201637%20597%201600%20605C1564%20612%201527%20616%201491%20622C1454%20628%201418%20634%201380%20640C1342%20647%201302%20657%201261%20661C1219%20666%201173%20672%201130%20669C1087%20666%201041%20658%201004%20641C967%20625%20932%20599%20908%20570C884%20541%20870%20503%20860%20469C851%20435%20853%20397%20851%20364C849%20332%20854%20302%20850%20274C846%20247%20839%20224%20828%20198C817%20172%20798%20148%20783%20120C768%2092%20747%2061%20737%2029C727%20-3%20720%20-38%20724%20-71C727%20-104%20739%20-138%20757%20-168C774%20-198%20801%20-225%20828%20-250C856%20-275%20888%20-297%20921%20-318C953%20-339%20987%20-359%201022%20-376C1057%20-394%201094%20-412%201133%20-424C1171%20-436%201214%20-446%201255%20-448C1296%20-450%201340%20-446%201380%20-436C1420%20-426%201458%20-407%201492%20-388C1525%20-369%201554%20-343%201581%20-322C1609%20-302%201630%20-280%201657%20-264C1684%20-248%201711%20-237%201743%20-226C1776%20-215%201814%20-209%201852%20-197C1891%20-185%201937%20-173%201974%20-154C2010%20-135%202049%20-110%202073%20-82C2098%20-54%202114%20-18%202120%2016C2126%2049%202118%2087%202107%20120Z%22%2F%3E%3Cpath%20d%3D%22M232%20760C230%20764%20227%20767%20225%20771C223%20774%20220%20777%20218%20780C216%20783%20214%20786%20212%20789C210%20792%20208%20795%20206%20798C204%20800%20201%20803%20198%20805C194%20808%20191%20810%20187%20811C183%20813%20179%20813%20175%20814C171%20815%20167%20816%20162%20816C158%20817%20154%20818%20150%20819C146%20820%20141%20821%20136%20822C132%20822%20126%20823%20121%20823C117%20822%20111%20821%20107%20819C103%20817%2099%20814%2097%20811C94%20807%2093%20803%2092%20799C91%20795%2092%20790%2092%20787C92%20783%2092%20780%2092%20777C92%20774%2091%20771%2089%20769C88%20766%2085%20763%2083%20760C81%20757%2079%20753%2077%20750C76%20746%2075%20742%2076%20738C76%20735%2078%20731%2080%20727C82%20724%2085%20721%2088%20718C91%20715%2094%20713%2098%20711C102%20708%20105%20706%20109%20704C113%20702%20118%20700%20122%20698C126%20697%20131%20696%20136%20696C141%20696%20146%20696%20150%20698C154%20699%20159%20701%20162%20704C166%20706%20169%20709%20172%20711C175%20714%20177%20716%20181%20718C184%20719%20187%20720%20190%20721C194%20723%20199%20723%20203%20724C208%20725%20213%20727%20218%20729C222%20731%20226%20734%20229%20737C232%20740%20233%20744%20234%20748C234%20752%20233%20756%20232%20760Z%22%2F%3E%3Cpath%20d%3D%22M301%20760C298%20767%20293%20773%20289%20780C285%20786%20282%20791%20278%20797C275%20803%20272%20809%20269%20815C265%20821%20262%20827%20257%20832C253%20837%20247%20843%20241%20847C235%20851%20227%20854%20220%20857C213%20860%20205%20862%20197%20864C190%20866%20182%20867%20174%20870C166%20872%20159%20874%20150%20877C141%20879%20132%20882%20123%20883C114%20884%20103%20885%2094%20884C85%20882%2075%20879%2068%20874C61%20869%2055%20862%2051%20855C47%20848%2045%20839%2044%20831C43%20823%2044%20816%2043%20809C43%20803%2043%20797%2041%20792C39%20786%2035%20782%2032%20777C28%20771%2022%20766%2018%20760C14%20754%2010%20747%208%20740C6%20733%205%20725%207%20718C8%20711%2012%20704%2016%20698C20%20692%2026%20686%2032%20681C38%20675%2044%20670%2051%20665C57%20660%2064%20656%2072%20651C79%20647%2087%20643%2096%20641C104%20639%20114%20637%20123%20637C132%20638%20142%20640%20150%20643C158%20646%20166%20651%20173%20655C180%20659%20186%20665%20192%20669C198%20672%20203%20676%20209%20678C216%20680%20223%20681%20231%20683C239%20685%20249%20685%20258%20688C266%20690%20277%20693%20284%20698C292%20703%20299%20709%20302%20716C306%20722%20308%20730%20307%20738C307%20745%20304%20753%20301%20760Z%22%2F%3E%3Cpath%20d%3D%22M365%20760C360%20770%20354%20779%20350%20788C345%20797%20341%20806%20337%20814C333%20823%20330%20832%20325%20841C321%20850%20316%20859%20309%20867C302%20874%20293%20882%20284%20888C275%20894%20263%20898%20253%20902C242%20907%20231%20910%20220%20914C209%20917%20198%20921%20186%20925C175%20930%20163%20935%20150%20939C137%20943%20123%20947%20108%20948C94%20950%2079%20949%2065%20946C52%20942%2039%20935%2029%20927C20%20919%2013%20906%208%20895C3%20884%202%20871%200%20860C-1%20850%20-1%20839%20-3%20830C-5%20822%20-7%20815%20-11%20807C-16%20800%20-23%20793%20-30%20785C-36%20778%20-45%20769%20-51%20760C-56%20751%20-62%20740%20-64%20730C-65%20720%20-65%20708%20-62%20698C-59%20688%20-53%20678%20-46%20669C-40%20660%20-32%20652%20-23%20644C-15%20635%20-6%20627%203%20620C13%20612%2022%20605%2033%20599C45%20592%2057%20587%2070%20584C83%20581%2097%20580%20110%20581C124%20582%20138%20586%20150%20591C162%20596%20173%20603%20183%20609C193%20615%20202%20621%20211%20626C220%20630%20229%20633%20240%20635C251%20638%20263%20638%20276%20640C289%20642%20304%20644%20317%20648C330%20652%20344%20658%20354%20666C363%20674%20371%20684%20375%20695C379%20705%20378%20717%20377%20728C375%20739%20369%20750%20365%20760Z%22%2F%3E%3Cpath%20d%3D%22M424%20760C419%20773%20413%20784%20408%20796C403%20808%20400%20820%20396%20832C391%20843%20388%20856%20382%20867C376%20879%20368%20890%20359%20900C350%20910%20338%20919%20325%20927C313%20935%20299%20941%20285%20947C271%20953%20257%20958%20243%20965C229%20971%20215%20978%20200%20985C184%20992%20168%201000%20150%201005C132%201011%20112%201016%2093%201017C75%201017%2054%201014%2037%201008C21%201001%205%20990%20-7%20977C-18%20964%20-25%20947%20-31%20932C-36%20917%20-37%20901%20-40%20888C-43%20874%20-44%20862%20-48%20852C-53%20841%20-59%20833%20-67%20823C-75%20814%20-86%20805%20-96%20795C-105%20784%20-116%20772%20-123%20760C-130%20748%20-135%20733%20-135%20720C-136%20706%20-133%20692%20-128%20679C-124%20666%20-115%20653%20-107%20641C-98%20629%20-88%20618%20-78%20607C-68%20596%20-57%20585%20-45%20574C-33%20564%20-20%20553%20-5%20546C10%20538%2027%20531%2044%20528C62%20525%2081%20525%2099%20528C116%20530%20134%20537%20150%20543C166%20549%20179%20559%20193%20565C207%20571%20218%20578%20231%20581C245%20585%20258%20587%20274%20588C290%20590%20308%20590%20326%20592C344%20595%20364%20598%20381%20605C397%20612%20414%20622%20424%20633C435%20645%20441%20660%20444%20674C447%20689%20444%20705%20441%20719C437%20733%20430%20747%20424%20760Z%22%2F%3E%3Cpath%20d%3D%22M481%20760C476%20776%20471%20790%20466%20805C462%20819%20460%20834%20455%20849C450%20863%20446%20879%20438%20893C430%20907%20420%20921%20408%20933C396%20945%20380%20955%20365%20965C350%20975%20333%20982%20317%20991C301%201000%20285%201008%20267%201018C250%201028%20233%201039%20214%201049C194%201058%20173%201070%20150%201076C127%201082%20102%201087%2078%201086C55%201084%2030%201078%2010%201067C-9%201057%20-27%201040%20-40%201023C-52%201006%20-59%20984%20-66%20966C-73%20948%20-74%20929%20-79%20914C-84%20899%20-89%20886%20-97%20874C-105%20862%20-116%20852%20-128%20841C-139%20829%20-155%20818%20-167%20805C-178%20791%20-191%20776%20-197%20760C-204%20744%20-207%20726%20-207%20710C-206%20693%20-200%20676%20-193%20660C-186%20644%20-176%20629%20-166%20614C-156%20599%20-145%20585%20-132%20570C-120%20556%20-108%20541%20-93%20528C-78%20516%20-61%20502%20-42%20493C-23%20485%20-1%20478%2020%20475C42%20473%2066%20475%2088%20479C110%20483%20131%20492%20150%20499C169%20506%20185%20515%20203%20521C220%20527%20235%20531%20253%20533C271%20536%20291%20535%20312%20536C333%20537%20358%20536%20381%20540C403%20544%20428%20550%20447%20560C466%20571%20483%20585%20494%20601C504%20617%20508%20637%20509%20655C510%20674%20505%20693%20500%20711C495%20728%20487%20744%20481%20760Z%22%2F%3E%3Cpath%20d%3D%22M538%20760C533%20778%20529%20795%20525%20813C522%20831%20520%20849%20515%20866C509%20884%20503%20902%20493%20918C483%20935%20469%20950%20454%20964C440%20978%20421%20990%20404%201002C386%201014%20368%201024%20349%201036C331%201048%20313%201061%20293%201075C273%201088%20252%201104%20229%201116C205%201129%20178%201142%20150%201149C122%201155%2091%201158%2063%201154C36%201149%207%201138%20-15%201123C-37%201107%20-55%201084%20-69%201064C-83%201043%20-90%201017%20-99%20997C-107%20977%20-111%20957%20-119%20941C-128%20924%20-137%20912%20-149%20898C-162%20885%20-179%20874%20-195%20860C-210%20846%20-229%20832%20-242%20815C-255%20799%20-267%20779%20-273%20760C-278%20741%20-279%20720%20-276%20700C-273%20680%20-265%20661%20-256%20642C-247%20623%20-236%20605%20-225%20587C-213%20569%20-201%20551%20-187%20533C-174%20516%20-159%20498%20-141%20483C-123%20468%20-102%20453%20-78%20443C-55%20434%20-28%20428%20-2%20427C25%20425%2053%20430%2078%20435C104%20440%20128%20450%20150%20457C172%20464%20192%20471%20213%20475C234%20479%20254%20480%20277%20480C301%20480%20327%20476%20354%20477C381%20478%20413%20478%20439%20484C466%20490%20495%20501%20515%20515C535%20530%20551%20550%20560%20571C569%20591%20570%20616%20570%20638C569%20660%20561%20682%20556%20703C550%20723%20543%20742%20538%20760Z%22%2F%3E%3Cpath%20d%3D%22M595%20760C591%20781%20590%20801%20587%20822C583%20842%20581%20863%20575%20884C568%20904%20559%20925%20546%20943C534%20961%20516%20978%20499%20994C482%201010%20461%201024%20442%201038C423%201053%20403%201067%20383%201083C363%201099%20344%201118%20321%201135C297%201152%20273%201173%20244%201188C216%201202%20183%201217%20150%201222C117%201227%2080%201226%2049%201218C18%201209%20-13%201191%20-37%201172C-61%201152%20-80%201124%20-95%201100C-111%201076%20-119%201049%20-130%201027C-141%201005%20-149%20986%20-162%20970C-175%20953%20-191%20940%20-208%20926C-226%20911%20-249%20898%20-268%20882C-286%20865%20-307%20847%20-321%20826C-334%20806%20-344%20783%20-348%20760C-352%20737%20-349%20713%20-344%20690C-339%20668%20-328%20646%20-318%20624C-308%20602%20-296%20581%20-284%20560C-271%20538%20-259%20516%20-243%20496C-227%20476%20-210%20454%20-188%20438C-166%20421%20-140%20406%20-112%20397C-84%20388%20-51%20384%20-21%20384C9%20384%2041%20390%2070%20396C98%20401%20124%20411%20150%20416C176%20421%20198%20425%20224%20425C250%20426%20275%20422%20305%20420C334%20418%20368%20412%20401%20413C433%20414%20471%20416%20501%20426C531%20435%20561%20451%20581%20471C601%20490%20615%20517%20622%20542C630%20567%20628%20596%20626%20621C624%20647%20615%20672%20610%20695C605%20718%20599%20739%20595%20760Z%22%2F%3E%3Cpath%20d%3D%22M925%201180C924%201185%20923%201190%20923%201194C922%201199%20921%201204%20919%201209C918%201214%20916%201218%20913%201223C910%201227%20906%201231%20902%201235C898%201239%20893%201242%20888%201245C884%201249%20879%201252%20874%201255C869%201258%20864%201262%20859%201266C853%201269%20848%201273%20841%201276C835%201279%20827%201282%20820%201283C813%201284%20804%201284%20797%201283C790%201281%20783%201278%20777%201274C772%201270%20767%201264%20763%201259C759%201254%20756%201248%20754%201243C751%201239%20748%201234%20745%201230C742%201226%20739%201223%20735%201219C731%201216%20727%201212%20723%201208C719%201204%20715%201200%20712%201195C709%201191%20707%201185%20706%201180C705%201175%20705%201169%20707%201164C708%201159%20710%201154%20712%201149C714%201144%20717%201139%20720%201134C723%201129%20726%201124%20730%201120C734%201115%20738%201110%20743%201107C748%201103%20754%201099%20760%201097C766%201095%20774%201093%20780%201093C787%201092%20795%201093%20801%201094C808%201095%20814%201097%20820%201098C826%201099%20831%201100%20837%201101C843%201101%20849%201101%20856%201101C862%201101%20870%201101%20877%201101C884%201102%20892%201103%20899%201105C905%201107%20912%201111%20917%201115C922%201119%20925%201125%20927%201130C929%201136%20930%201142%20930%201148C930%201154%20928%201159%20928%201165C927%201170%20926%201175%20925%201180Z%22%2F%3E%3Cpath%20d%3D%22M994%201180C993%201188%20993%201196%20991%201204C990%201212%20989%201220%20986%201228C983%201236%20978%201244%20973%201251C968%201258%20961%201264%20955%201270C948%201277%20941%201282%20933%201288C926%201294%20919%201300%20911%201306C903%201312%20895%201319%20886%201326C877%201332%20867%201339%20856%201344C845%201348%20832%201353%20820%201354C808%201355%20794%201353%20783%201350C771%201346%20760%201339%20751%201332C742%201325%20734%201316%20728%201308C721%201300%20717%201291%20711%201284C706%201276%20701%201270%20695%201264C689%201258%20682%201253%20675%201247C668%201241%20659%201235%20653%201229C646%201222%20640%201214%20636%201206C632%201198%20629%201189%20629%201180C628%201171%20630%201162%20632%201153C634%201145%20638%201136%20641%201128C645%201120%20649%201111%20654%201103C659%201095%20664%201087%20670%201079C676%201072%20684%201064%20692%201058C701%201052%20711%201047%20722%201044C732%201041%20744%201039%20756%201039C767%201038%20779%201040%20789%201041C800%201043%20810%201045%20820%201046C830%201047%20839%201047%20849%201047C860%201046%20870%201044%20882%201044C893%201043%20906%201042%20919%201043C931%201045%20944%201047%20955%201052C965%201056%20975%201063%20982%201071C989%201079%20994%201089%20997%201098C999%201108%20999%201118%20999%201128C999%201137%20997%201146%20996%201155C995%201164%20994%201172%20994%201180Z%22%2F%3E%3Cpath%20d%3D%22M1063%201180C1062%201191%201063%201203%201061%201214C1059%201225%201056%201237%201052%201247C1047%201258%201040%201269%201033%201278C1025%201288%201016%201297%201007%201305C998%201314%20988%201322%20978%201331C969%201340%20960%201349%20949%201359C938%201368%20928%201379%20915%201388C902%201398%20887%201408%20871%201413C856%201419%20837%201424%20820%201424C803%201424%20784%201420%20768%201414C753%201408%20738%201397%20726%201387C714%201377%20704%201364%20695%201353C685%201343%20678%201332%20670%201323C661%201314%20652%201307%20643%201299C633%201291%20621%201285%20611%201277C600%201269%20588%201260%20579%201250C570%201240%20562%201229%20558%201217C553%201205%20551%201192%20551%201180C551%201168%20554%201155%20558%201143C561%201131%20566%201119%20571%201107C576%201096%20581%201084%20588%201073C594%201061%20601%201049%20610%201039C619%201029%20630%201018%20643%201011C655%201003%20670%20997%20685%20993C700%20990%20717%20989%20733%20989C748%20988%20764%20991%20778%20991C793%20992%20806%20993%20820%20993C834%20993%20847%20991%20862%20989C877%20987%20893%20983%20910%20982C927%20981%20946%20980%20963%20982C980%20985%20998%20989%201012%20997C1026%201005%201038%201016%201047%201028C1055%201040%201060%201054%201063%201068C1066%201081%201066%201095%201066%201108C1066%201121%201064%201134%201064%201146C1064%201158%201063%201169%201063%201180Z%22%2F%3E%3Cpath%20d%3D%22M1134%201180C1134%201195%201134%201209%201131%201224C1128%201238%201124%201253%201117%201266C1110%201280%201101%201293%201091%201305C1081%201317%201069%201328%201058%201340C1047%201351%201036%201363%201024%201375C1013%201387%201002%201401%20989%201414C975%201427%20962%201442%20945%201454C928%201465%20908%201477%20887%201484C866%201490%20842%201493%20820%201491C798%201490%20775%201482%20755%201473C736%201464%20718%201450%20703%201437C688%201425%20676%201410%20663%201397C651%201385%20640%201374%20627%201364C615%201354%20601%201346%20587%201337C573%201327%20556%201319%20542%201309C528%201298%20513%201286%20502%201273C491%201259%20483%201244%20478%201228C474%201213%20473%201196%20474%201180C475%201164%20480%201148%20484%201133C488%201117%20494%201102%20500%201087C506%201072%20512%201056%20520%201042C529%201027%20538%201012%20550%20999C563%20986%20578%20974%20595%20965C612%20957%20632%20951%20652%20947C671%20943%20692%20943%20712%20942C731%20941%20750%20943%20768%20943C786%20942%20802%20942%20820%20939C838%20936%20856%20931%20876%20927C896%20924%20918%20918%20940%20916C962%20915%20987%20914%201009%20918C1030%20923%201052%20931%201069%20943C1086%20954%201099%20970%201109%20986C1119%201002%201123%201021%201127%201038C1131%201056%201130%201073%201131%201089C1132%201106%201132%201121%201132%201136C1133%201151%201134%201165%201134%201180Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); -webkit-mask-size: 100% 100%, 1100px auto; mask-size: 100% 100%, 1100px auto; } } /* Mobile-only disclosure (guide cards): the toggle exists below 1024px only and the body is always shown on desktop, so SSR never shifts the desktop layout. */ [data-theme='fresh'] .sv-collapse-toggle { display: none; } @media (max-width: 1023px) { [data-theme='fresh'] .sv-collapse-toggle { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 44px; margin-left: auto; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--sv-line); background: var(--sv-mint); font-size: 13px; font-weight: 700; color: var(--sv-primary-ink); white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s; } [data-theme='fresh'] .sv-collapse-toggle:hover { border-color: var(--primary); } [data-theme='fresh'] .sv-collapse-toggle svg { width: 16px; height: 16px; transition: transform .2s; } [data-theme='fresh'] .sv-collapse-toggle[aria-expanded='true'] svg { transform: rotate(180deg); } [data-theme='fresh'] .sv-collapse-body:not([data-open]) { display: none; } } @media (max-width: 640px) { [data-theme='fresh'] .sv-step-head { padding: 16px; } [data-theme='fresh'] .sv-step-body { padding: 16px; } [data-theme='fresh'] .sv-input { font-size: 16px; } [data-theme='fresh'] .sv-section-title { font-size: 24px; } /* Section head: kicker / [title · link] / sub — the link stays on the title row instead of dropping below the copy. */ [data-theme='fresh'] .sv-section-head { margin-bottom: 16px; } [data-theme='fresh'] .sv-section-head:has(.sv-section-link) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; } [data-theme='fresh'] .sv-section-head:has(.sv-section-link) > :first-child { display: contents; } [data-theme='fresh'] .sv-section-head:has(.sv-section-link) .sv-section-kicker { grid-column: 1 / -1; justify-self: start; } [data-theme='fresh'] .sv-section-head:has(.sv-section-link) .sv-section-title { grid-column: 1; grid-row: 2; } [data-theme='fresh'] .sv-section-head:has(.sv-section-link) > :is(.sv-section-aside, .sv-section-link) { grid-column: 2; grid-row: 2; justify-self: end; } [data-theme='fresh'] .sv-section-head:has(.sv-section-link) .sv-section-sub { grid-column: 1 / -1; } [data-theme='fresh'] .sv-section-link { min-height: 36px; padding: 0 10px 0 12px; font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { [data-theme='fresh'] *, [data-theme='fresh'] *::before, [data-theme='fresh'] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ───────────── Landing layout ───────────── */ [data-theme='fresh'] .sv-landing { --sv-section-gap: clamp(48px, 5.6vw, 72px); padding-bottom: clamp(56px, 7vw, 88px); } /* New sections (joki, artikel) sit in slots; an empty slot takes no space. */ [data-theme='fresh'] .sv-landing-slot { margin-top: var(--sv-section-gap); } [data-theme='fresh'] .sv-landing-slot:empty { display: none; } [data-theme='fresh'] .sv-landing-slot > * { margin-top: 0; } [data-theme='fresh'] .sv-landing .sv-container .sv-container { max-width: none; padding-inline: 0; } [data-theme='fresh'] .sv-section-head-text { min-width: 0; } [data-theme='fresh'] .sv-section-aside { flex-shrink: 0; } /* Shared horizontal rail. The 4px bleed on desktop leaves room for the hover ring. */ [data-theme='fresh'] .sv-rail { position: relative; display: flow-root; --sv-rail-gap: 14px; --sv-rail-cols: 4; --sv-rail-bleed: 4px; } [data-theme='fresh'] .sv-rail-track { display: grid; grid-auto-flow: column; gap: var(--sv-rail-gap); grid-auto-columns: calc((100% - (var(--sv-rail-cols) - 1) * var(--sv-rail-gap)) / var(--sv-rail-cols)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: -8px calc(var(--sv-rail-bleed) * -1) -20px; padding: 8px var(--sv-rail-bleed) 20px; scroll-padding-inline: var(--sv-rail-bleed); } [data-theme='fresh'] .sv-rail-track::-webkit-scrollbar { display: none; } [data-theme='fresh'] .sv-rail-item { display: flex; min-width: 0; scroll-snap-align: start; } [data-theme='fresh'] .sv-rail-item > * { flex: 1; min-width: 0; } [data-theme='fresh'] .sv-rail-btn { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink); box-shadow: var(--sv-shadow-lg); transform: translateY(-50%); cursor: pointer; transition: opacity .2s, border-color .15s, color .15s; } [data-theme='fresh'] .sv-rail-btn svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-rail-btn--prev { left: -20px; } [data-theme='fresh'] .sv-rail-btn--next { right: -20px; } [data-theme='fresh'] .sv-rail-btn:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-rail-btn:disabled { opacity: 0; pointer-events: none; } @media (hover: hover) and (min-width: 1024px) { [data-theme='fresh'] .sv-rail[data-overflow] .sv-rail-btn { display: grid; } } @media (max-width: 1023px) { [data-theme='fresh'] .sv-rail { --sv-rail-bleed: var(--sv-gutter); --sv-rail-gap: 12px; } } /* Shared skeleton bits */ [data-theme='fresh'] .sv-skeleton-line { display: block; height: 12px; width: 72%; margin: 12px 6px 8px; border-radius: 6px; } [data-theme='fresh'] .sv-skeleton-line--short { width: 44%; margin-top: 0; } [data-theme='fresh'] .sv-empty { padding: 32px 24px; text-align: center; } [data-theme='fresh'] .sv-empty-title { font-size: 16px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-empty-text { margin-top: 4px; font-size: 14px; color: var(--sv-ink-2); } /* ───────────── Banner: the first deep stage ───────────── */ [data-theme='fresh'] .sv-landing .sv-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), radial-gradient(40% 70% at 0% 100%, var(--sv-lime-glow), transparent 70%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-landing .sv-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.22; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-landing .sv-hero .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing .sv-hero .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-landing .sv-hero .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-landing .sv-hero .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing .sv-hero .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-landing .sv-hero { margin-top: clamp(16px, 2vw, 24px); padding: 20px 20px 2px; border-radius: var(--sv-radius-xl); } [data-theme='fresh'] .sv-landing .sv-hero:not(:has(.sv-hero-dots)) { padding-bottom: 20px; } [data-theme='fresh'] .sv-landing .sv-hero-frame { position: relative; isolation: isolate; aspect-ratio: 3 / 1; border-radius: 22px; overflow: hidden; background: var(--sv-stage-2); box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.9); } [data-theme='fresh'] .sv-landing .sv-hero-frame.sv-skeleton { background: linear-gradient(90deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.06)); background-size: 200% 100%; box-shadow: none; } [data-theme='fresh'] .sv-landing .sv-hero-frame::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); } [data-theme='fresh'] .sv-landing .sv-hero-viewport { height: 100%; overflow: hidden; } [data-theme='fresh'] .sv-landing .sv-hero-track { display: flex; height: 100%; touch-action: pan-y pinch-zoom; } [data-theme='fresh'] .sv-landing .sv-hero-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; } [data-theme='fresh'] .sv-landing .sv-hero-link { position: absolute; inset: 0; display: block; } [data-theme='fresh'] .sv-landing .sv-hero-link:focus-visible { outline-offset: -4px; } [data-theme='fresh'] .sv-landing .sv-hero-img { object-fit: cover; } [data-theme='fresh'] .sv-landing .sv-hero-arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.6); background: rgb(255 255 255 / 0.86); color: var(--sv-ink); box-shadow: var(--sv-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transition: opacity .2s, background-color .15s; transform: translateY(-50%); } [data-theme='fresh'] .sv-landing .sv-hero-arrow svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-landing .sv-hero-arrow:hover { background: var(--sv-surface); } [data-theme='fresh'] .sv-landing .sv-hero-arrow--prev { left: 16px; } [data-theme='fresh'] .sv-landing .sv-hero-arrow--next { right: 16px; } [data-theme='fresh'] .sv-landing .sv-hero-arrow:focus-visible { opacity: 1; } @media (hover: hover) { [data-theme='fresh'] .sv-landing .sv-hero-frame:hover .sv-hero-arrow { opacity: 1; } } /* Dots inside the stage: white 25% / active lime pill */ [data-theme='fresh'] .sv-landing .sv-hero-dots { display: flex; justify-content: center; gap: 0; margin-top: -2px; } [data-theme='fresh'] .sv-landing .sv-hero-dot { display: grid; place-items: center; width: 20px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .25s; } [data-theme='fresh'] .sv-landing .sv-hero-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgb(255 255 255 / 0.25); transition: width .25s, background-color .25s; } [data-theme='fresh'] .sv-landing .sv-hero-dot:hover::before { background: rgb(255 255 255 / 0.5); } [data-theme='fresh'] .sv-landing .sv-hero-dot[aria-current='true'] { width: 40px; } [data-theme='fresh'] .sv-landing .sv-hero-dot[aria-current='true']::before { width: 28px; background: var(--sv-lime); } [data-theme='fresh'] .sv-landing .sv-hero-dot:focus-visible { outline-color: var(--sv-lime); outline-offset: -8px; border-radius: 999px; } [data-theme='fresh'] .sv-landing .sv-hero + .sv-section { margin-top: var(--sv-section-gap); } @media (max-width: 767px) { [data-theme='fresh'] .sv-landing .sv-hero { padding: 12px 12px 0; border-radius: 22px; } [data-theme='fresh'] .sv-landing .sv-hero:not(:has(.sv-hero-dots)) { padding-bottom: 12px; } [data-theme='fresh'] .sv-landing .sv-hero-frame { border-radius: 16px; } [data-theme='fresh'] .sv-landing .sv-hero-arrow { display: none; } [data-theme='fresh'] .sv-landing .sv-hero-dots { margin-top: -4px; margin-bottom: -4px; } } /* ───────────── Flash sale: mint panel ───────────── */ [data-theme='fresh'] .sv-landing .sv-flash-panel { position: relative; isolation: isolate; overflow: hidden; padding: 26px; border-radius: var(--sv-radius-xl); background: var(--sv-mint); --sv-notch-bg: var(--sv-mint); } [data-theme='fresh'] .sv-landing .sv-flash-panel::after { content: ''; position: absolute; z-index: -1; right: -70px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: var(--sv-mint-shape); opacity: 0.85; pointer-events: none; } [data-theme='fresh'] .sv-landing .sv-flash-panel::before { content: ''; position: absolute; z-index: -1; left: -46px; bottom: -64px; width: 170px; height: 170px; border-radius: 44px; background: var(--sv-panel-square); opacity: 0.75; transform: rotate(18deg); pointer-events: none; } @media (max-width: 760px) { [data-theme='fresh'] .sv-landing .sv-flash-panel { padding: 20px 16px; border-radius: 24px; } [data-theme='fresh'] .sv-landing .sv-flash-panel::after { right: -90px; top: -96px; width: 210px; height: 210px; } [data-theme='fresh'] .sv-landing .sv-flash-panel::before { left: -60px; bottom: -74px; width: 150px; height: 150px; border-radius: 40px; } } [data-theme='fresh'] .sv-landing .sv-flash-panel { --sv-panel-pad: 26px; } [data-theme='fresh'] .sv-landing .sv-flash .sv-section-head { flex-wrap: wrap; align-items: flex-end; row-gap: 14px; } [data-theme='fresh'] .sv-landing .sv-flash .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing .sv-flash .sv-section-kicker svg { fill: currentColor; } [data-theme='fresh'] .sv-landing .sv-countdown { display: flex; align-items: center; gap: 8px; } [data-theme='fresh'] .sv-landing .sv-countdown-label { font-size: 13px; font-weight: 700; color: var(--sv-ink); white-space: nowrap; } [data-theme='fresh'] .sv-landing .sv-countdown-clock { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-landing .sv-countdown-unit { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 12px; background: var(--sv-stage); color: var(--sv-lime); font-size: 19px; font-weight: 800; letter-spacing: 0; } [data-theme='fresh'] .sv-landing .sv-countdown-sep { font-size: 15px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-rail--flash { --sv-rail-cols: 4; --sv-rail-gap: 14px; } [data-theme='fresh'] .sv-flash-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 14px; border-radius: var(--sv-radius); background: var(--sv-surface); border: 1px solid transparent; box-shadow: var(--sv-shadow); color: var(--sv-ink); } [data-theme='fresh'] .sv-flash-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 14px; } [data-theme='fresh'] .sv-flash-card-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; background: var(--sv-mint); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-flash-card-icon img { width: 30px; height: 30px; object-fit: contain; } [data-theme='fresh'] .sv-flash-card-icon svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-flash-card-off { height: 22px; padding: 0 9px; font-size: 12.5px; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-flash-card-name { font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='fresh'] .sv-flash-card-game { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--sv-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='fresh'] .sv-flash-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: auto; padding-top: 12px; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-flash-card-price strong { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-flash-card-price s { font-size: 12.5px; font-weight: 500; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-flash-card-stock { padding-top: 12px; } [data-theme='fresh'] .sv-meter { height: 7px; border-radius: 999px; overflow: hidden; background: var(--sv-surface-2); } [data-theme='fresh'] .sv-meter-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 30%, var(--sv-lime))); } [data-theme='fresh'] .sv-flash-card-stock-row { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-flash-card-hot { display: inline-flex; align-items: center; gap: 4px; color: var(--sv-primary-ink); font-weight: 700; white-space: nowrap; } [data-theme='fresh'] .sv-flash-card-hot svg { width: 13px; height: 13px; } [data-theme='fresh'] .sv-flash-card-stock-row > span:first-child { white-space: nowrap; } /* Narrow cards: keep the flame, hide the label visually (still read by screen readers). */ [data-theme='fresh'] .sv-flash-card { container-type: inline-size; } @container (max-width: 172px) { [data-theme='fresh'] .sv-flash-card-hot-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } [data-theme='fresh'] .sv-flash-card-available { font-size: 12.5px; font-weight: 700; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-flash-card-soldout { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sv-surface-2); color: var(--sv-ink-2); border: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-flash-card[data-state='soldout'] { background: var(--sv-surface-2); box-shadow: none; } [data-theme='fresh'] .sv-flash-card[data-state='soldout'] :is(.sv-flash-card-icon img, .sv-flash-card-price) { filter: grayscale(1); opacity: .6; } /* Rails inside the panel bleed to its edge. */ @media (max-width: 1023px) { [data-theme='fresh'] .sv-landing .sv-flash-panel .sv-rail { --sv-rail-bleed: var(--sv-panel-pad); } [data-theme='fresh'] .sv-rail--flash { --sv-rail-cols: 3.2; } } @media (max-width: 760px) { [data-theme='fresh'] .sv-landing .sv-flash-panel { --sv-panel-pad: 16px; } [data-theme='fresh'] .sv-landing .sv-flash .sv-section-head { margin-bottom: 16px; } [data-theme='fresh'] .sv-landing .sv-flash .sv-section-aside { width: 100%; } [data-theme='fresh'] .sv-landing .sv-countdown-unit { min-width: 38px; height: 38px; font-size: 16px; border-radius: 10px; } [data-theme='fresh'] .sv-rail--flash { --sv-rail-cols: 2.2; --sv-rail-gap: 10px; } [data-theme='fresh'] .sv-flash-card { padding: 12px; } [data-theme='fresh'] .sv-flash-card-icon { width: 42px; height: 42px; border-radius: 12px; } [data-theme='fresh'] .sv-flash-card-icon img { width: 28px; height: 28px; } [data-theme='fresh'] .sv-flash-card-name { font-size: 15px; } [data-theme='fresh'] .sv-flash-card-price strong { font-size: 17px; } } @media (max-width: 479px) { [data-theme='fresh'] .sv-rail--flash { --sv-rail-cols: 1.45; } } /* ───────────── Trending: white ───────────── */ [data-theme='fresh'] .sv-rail--trending { --sv-rail-cols: 3; --sv-rail-gap: 14px; } [data-theme='fresh'] .sv-trend-card { position: relative; display: flex; align-items: center; gap: 14px; height: 100%; min-height: 88px; padding: 14px 18px 14px 14px; border-radius: var(--sv-radius); background: var(--sv-surface); border: 1px solid var(--sv-line); box-shadow: var(--sv-shadow); overflow: hidden; color: var(--sv-ink); } [data-theme='fresh'] .sv-trend-card[data-rank='1'] { background: linear-gradient(110deg, var(--sv-surface) 45%, var(--sv-mint-pill)); border-color: var(--sv-primary-tint); } [data-theme='fresh'] .sv-trend-thumb { position: relative; display: block; width: 58px; height: 58px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: var(--sv-surface-2); box-shadow: 0 0 0 1px var(--sv-line); } [data-theme='fresh'] .sv-trend-thumb img { object-fit: cover; } [data-theme='fresh'] .sv-trend-body { position: relative; z-index: 1; display: grid; gap: 4px; flex: 1; min-width: 0; } [data-theme='fresh'] .sv-trend-name { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='fresh'] .sv-trend-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-trend-meta > svg { display: none; } [data-theme='fresh'] .sv-trend-badge { height: 20px; margin-left: 2px; padding: 0 8px; font-size: 11.5px; } [data-theme='fresh'] .sv-trend-rank { flex-shrink: 0; margin-left: auto; padding-left: 4px; font-family: var(--font-theme-heading), system-ui, sans-serif; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--sv-numeral, oklch(0.908 0.025 161)); } @supports (color: oklch(from red l c h)) { [data-theme='fresh'] .sv-trend-rank { --sv-numeral: oklch(from var(--primary) 0.908 min(calc(c * 0.2), 0.025) h); } } [data-theme='fresh'] .sv-trend-card[data-rank='1'] .sv-trend-rank { color: var(--primary); } [data-theme='fresh'] .sv-trend-skeletons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } [data-theme='fresh'] .sv-trend-card--skeleton { box-shadow: none; } [data-theme='fresh'] .sv-trend-card--skeleton .sv-skeleton-line { margin: 0; } @media (min-width: 1024px) { /* Desktop: a tidy grid (3 per row) instead of a scroller. */ [data-theme='fresh'] .sv-rail--trending .sv-rail-track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; } } @media (max-width: 1023px) { [data-theme='fresh'] .sv-rail--trending { --sv-rail-cols: 2.2; --sv-rail-gap: 12px; } [data-theme='fresh'] .sv-trend-skeletons { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow: hidden; } } @media (max-width: 639px) { [data-theme='fresh'] .sv-rail--trending { --sv-rail-cols: 1.22; } [data-theme='fresh'] .sv-trend-skeletons { grid-auto-columns: 82%; } [data-theme='fresh'] .sv-trend-card { min-height: 84px; padding: 12px 16px 12px 12px; gap: 12px; } [data-theme='fresh'] .sv-trend-thumb { width: 54px; height: 54px; border-radius: 13px; } [data-theme='fresh'] .sv-trend-name { font-size: 15.5px; } [data-theme='fresh'] .sv-trend-rank { font-size: 38px; } } /* ───────────── Second stage: joki (or the fallback section) ───────────── */ [data-theme='fresh'] .sv-landing .sv-joki-section { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-landing .sv-joki-section::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.16; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-landing .sv-joki-section .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing .sv-joki-section .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-landing .sv-joki-section .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-landing .sv-joki-section .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing .sv-joki-section .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.16; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.16; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-landing .sv-joki-section, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending { --sv-stage-pad: 30px; padding: var(--sv-stage-pad); border-radius: 32px; } :is([data-theme='fresh'] .sv-landing .sv-joki-section, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending) .sv-rail { --sv-rail-bleed: 4px; } @media (max-width: 1023px) { :is([data-theme='fresh'] .sv-landing .sv-joki-section, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending) .sv-rail { --sv-rail-bleed: var(--sv-stage-pad); } [data-theme='fresh'] .sv-landing .sv-joki-section .sv-joki-rail { margin-inline: calc(var(--sv-stage-pad) * -1); padding: 4px var(--sv-stage-pad) 16px; scroll-padding-inline: var(--sv-stage-pad); } } @media (max-width: 760px) { [data-theme='fresh'] .sv-landing .sv-joki-section, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending { --sv-stage-pad: 16px; padding: 20px var(--sv-stage-pad); border-radius: 24px; } } /* Cards on the stage: white, no outline needed. */ :is([data-theme='fresh'] .sv-landing .sv-joki-section, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending) :is(.sv-joki-card, .sv-voucher-card, .sv-trend-card) { border-width: 0; box-shadow: 0 1px 0 rgb(0 0 0 / 0.05), 0 18px 34px -22px rgb(0 0 0 / 0.6); } :is([data-theme='fresh'] .sv-landing .sv-joki-section, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending) .sv-trend-card[data-rank='1'] { border-color: transparent; } /* ───────────── Voucher: white ───────────── */ [data-theme='fresh'] .sv-rail--vouchers { --sv-rail-cols: 6; --sv-rail-gap: 14px; } /* Same card as "Semua Game" (owner request): image tile + name, no ticket tear line. */ [data-theme='fresh'] .sv-voucher-card { position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 6px 6px 12px; border-radius: 18px; background: var(--sv-surface); border: 1px solid var(--sv-line); box-shadow: var(--sv-shadow); color: var(--sv-ink); } [data-theme='fresh'] .sv-voucher-media { position: relative; display: block; aspect-ratio: 1; border-radius: 13px; overflow: hidden; background: var(--sv-surface-2); } [data-theme='fresh'] .sv-voucher-media img { object-fit: cover; } [data-theme='fresh'] .sv-voucher-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 10px 6px 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; min-height: calc(2 * 1.3em + 10px); } [data-theme='fresh'] .sv-voucher-skeletons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } [data-theme='fresh'] .sv-voucher-card--skeleton { box-shadow: none; } @media (max-width: 1023px) { [data-theme='fresh'] .sv-rail--vouchers { --sv-rail-cols: 4.3; } [data-theme='fresh'] .sv-voucher-skeletons { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 23%; overflow: hidden; } } @media (max-width: 639px) { [data-theme='fresh'] .sv-rail--vouchers { --sv-rail-cols: 2.4; --sv-rail-gap: 10px; } [data-theme='fresh'] .sv-voucher-skeletons { grid-auto-columns: 40%; } } @media (max-width: 559px) { [data-theme='fresh'] .sv-voucher-card { padding: 4px 4px 8px; border-radius: 14px; } [data-theme='fresh'] .sv-voucher-media { border-radius: 10px; } [data-theme='fresh'] .sv-voucher-name { font-size: 12.5px; line-height: 1.28; padding: 7px 3px 0; min-height: calc(2 * 1.28em + 7px); letter-spacing: -0.005em; overflow-wrap: anywhere; } } /* ───────────── Semua Game: mint panel ───────────── */ [data-theme='fresh'] .sv-landing .sv-games { position: relative; isolation: isolate; overflow: hidden; padding: 26px; border-radius: var(--sv-radius-xl); background: var(--sv-mint); --sv-notch-bg: var(--sv-mint); } [data-theme='fresh'] .sv-landing .sv-games::after { content: ''; position: absolute; z-index: -1; right: -70px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: var(--sv-mint-shape); opacity: 0.85; pointer-events: none; } [data-theme='fresh'] .sv-landing .sv-games::before { content: ''; position: absolute; z-index: -1; left: -46px; bottom: -64px; width: 170px; height: 170px; border-radius: 44px; background: var(--sv-panel-square); opacity: 0.75; transform: rotate(18deg); pointer-events: none; } @media (max-width: 760px) { [data-theme='fresh'] .sv-landing .sv-games { padding: 20px 16px; border-radius: 24px; } [data-theme='fresh'] .sv-landing .sv-games::after { right: -90px; top: -96px; width: 210px; height: 210px; } [data-theme='fresh'] .sv-landing .sv-games::before { left: -60px; bottom: -74px; width: 150px; height: 150px; border-radius: 40px; } } [data-theme='fresh'] .sv-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-game-grid > li { display: flex; min-width: 0; } [data-theme='fresh'] .sv-game-card { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 6px 6px 12px; border-radius: 18px; background: var(--sv-surface); border: 1px solid var(--sv-line); box-shadow: var(--sv-shadow); color: var(--sv-ink); } [data-theme='fresh'] .sv-game-media { position: relative; display: block; aspect-ratio: 1; border-radius: 13px; overflow: hidden; background: var(--sv-surface-2); } [data-theme='fresh'] .sv-game-media img { object-fit: cover; } [data-theme='fresh'] .sv-game-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 10px 6px 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; min-height: calc(2 * 1.3em + 10px); } [data-theme='fresh'] .sv-game-card--skeleton { box-shadow: none; } @media (min-width: 340px) { [data-theme='fresh'] .sv-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } } @media (min-width: 560px) { [data-theme='fresh'] .sv-game-grid { gap: 14px; } } @media (min-width: 840px) { [data-theme='fresh'] .sv-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1120px) { [data-theme='fresh'] .sv-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 559px) { [data-theme='fresh'] .sv-game-card { padding: 4px 4px 8px; border-radius: 14px; } [data-theme='fresh'] .sv-game-media { border-radius: 10px; } [data-theme='fresh'] .sv-game-name { font-size: 12.5px; line-height: 1.28; padding: 7px 3px 0; min-height: calc(2 * 1.28em + 7px); letter-spacing: -0.005em; overflow-wrap: anywhere; } } /* ───────────── Footer: a stage card at the end of every page ───────────── */ [data-theme='fresh'] .sv-footer { padding: 0 var(--sv-gutter) var(--sv-gutter); background: var(--sv-bg); color: var(--sv-on-stage); } [data-theme='fresh'] .sv-footer > .sv-container { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-footer > .sv-container::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.14; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-footer > .sv-container .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-footer > .sv-container .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-footer > .sv-container .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-footer > .sv-container .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-footer > .sv-container .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } /* Full-width stage card: the same gap (gutter) on the left, right and bottom; on wide screens the content inside lines up with the page container above (padding = 50% - container/2 + gutter). */ [data-theme='fresh'] .sv-footer > .sv-container { max-width: none; padding-inline: max(clamp(20px, 3.4vw, 44px), calc(50% - var(--sv-container) / 2 + var(--sv-gutter))); border-radius: var(--sv-radius-xl); } [data-theme='fresh'] .sv-footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; padding-block: 48px 36px; } [data-theme='fresh'] .sv-footer-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-theme-heading), system-ui, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--sv-on-stage); } [data-theme='fresh'] .sv-footer-logo img { width: 44px; height: 44px; border-radius: 12px; } [data-theme='fresh'] .sv-footer-desc { max-width: 38ch; margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid transparent; transition: box-shadow .15s; } [data-theme='fresh'] .sv-footer-social a:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-footer-social img { width: 20px; height: 20px; object-fit: contain; } [data-theme='fresh'] .sv-footer-title { margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-on-stage); } [data-theme='fresh'] .sv-footer-col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-footer-col a { display: inline-flex; align-items: center; min-height: 34px; font-size: 14px; font-weight: 500; color: var(--sv-on-stage-2); transition: color .15s; } [data-theme='fresh'] .sv-footer-col a:hover { color: var(--sv-on-stage); text-decoration: underline; text-underline-offset: 3px; } [data-theme='fresh'] .sv-footer-col .sv-footer-pay-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } [data-theme='fresh'] .sv-footer-pay-item { display: grid; place-items: center; height: 42px; padding: 6px 8px; border-radius: 10px; background: #fff; } [data-theme='fresh'] .sv-footer-pay-item img { width: auto; height: auto; max-width: 100%; max-height: 22px; object-fit: contain; } [data-theme='fresh'] .sv-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-block: 18px 24px; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: 13px; color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-footer :is(a, button):focus-visible { outline-color: var(--sv-lime); } @media (max-width: 1023px) { [data-theme='fresh'] .sv-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-block: 36px 28px; } [data-theme='fresh'] .sv-footer-brand, [data-theme='fresh'] .sv-footer-pay { grid-column: 1 / -1; } [data-theme='fresh'] .sv-footer-col a { min-height: 40px; } } @media (max-width: 760px) { [data-theme='fresh'] .sv-footer > .sv-container { border-radius: 24px; } } @media (max-width: 479px) { [data-theme='fresh'] .sv-footer-col .sv-footer-pay-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ───────── Header shell (mobile first) ───────── */ /* Solid white, no blur: the page pattern never shows through. The box keeps its full height (no layout shift); row 2 slides behind row 1. */ [data-theme='fresh'] .sv-nav { position: sticky; top: 0; z-index: 50; pointer-events: none; } [data-theme='fresh'] .sv-nav > * { pointer-events: auto; } [data-theme='fresh'] .sv-nav[data-collapsed] > .sv-nav-sub { pointer-events: none; } [data-theme='fresh'] .sv-nav-bar { position: relative; z-index: 2; background: var(--sv-surface); box-shadow: 0 1px 0 var(--sv-line); transition: box-shadow .25s ease; } [data-theme='fresh'] .sv-nav[data-scrolled] .sv-nav-bar { box-shadow: 0 1px 0 var(--sv-line), 0 10px 24px -20px oklch(0.3 0.05 160 / 0.5); } [data-theme='fresh'] .sv-nav-bar-inner { display: flex; align-items: center; gap: 10px; height: 56px; } /* Identity */ [data-theme='fresh'] .sv-nav-brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; min-width: 44px; min-height: 44px; border-radius: 12px; color: var(--sv-ink); } [data-theme='fresh'] .sv-nav-logo { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; object-fit: cover; } [data-theme='fresh'] .sv-nav-logo--initial { display: grid; place-items: center; background: var(--primary); color: var(--sv-on-primary); font-size: 15px; font-weight: 800; } [data-theme='fresh'] .sv-nav-name { display: none; min-width: 0; font-family: var(--font-theme-heading), system-ui, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Search pill (small screens; opens the search sheet) */ [data-theme='fresh'] .sv-nav-pill { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sv-line); background: var(--sv-surface-2); color: var(--sv-ink-3); cursor: pointer; text-align: left; transition: border-color .15s, background-color .15s; } [data-theme='fresh'] .sv-nav-pill:hover { border-color: var(--sv-line-strong); } [data-theme='fresh'] .sv-nav-pill:active { background: color-mix(in oklab, var(--sv-surface-2) 70%, var(--sv-line)); } [data-theme='fresh'] .sv-nav-pill svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-nav-pill-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 500; } [data-theme='fresh'] .sv-nav-pill-text--long { display: none; } /* Account (small screens): icon button "Masuk" or initial avatar, 44px targets */ [data-theme='fresh'] .sv-nav-me { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink); font-size: 13.5px; font-weight: 700; transition: border-color .15s, color .15s; } [data-theme='fresh'] .sv-nav-me::before { content: ''; position: absolute; inset: -3px -3px; } [data-theme='fresh'] .sv-nav-me:hover { border-color: color-mix(in oklab, var(--primary) 60%, var(--sv-line)); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-me[aria-current='page'] { border-color: transparent; background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-me svg { width: 20px; height: 20px; flex-shrink: 0; } [data-theme='fresh'] .sv-nav-me-text { display: none; } [data-theme='fresh'] .sv-nav-me--avatar { border: 0; background: none; } [data-theme='fresh'] .sv-nav-me--avatar .sv-nav-avatar { width: 34px; height: 34px; font-size: 14px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 25%, var(--sv-line)); } [data-theme='fresh'] .sv-nav-me--avatar[aria-current='page'] { background: none; } [data-theme='fresh'] .sv-nav-me--avatar[aria-current='page'] .sv-nav-avatar { box-shadow: 0 0 0 2px var(--primary); } [data-theme='fresh'] .sv-nav-me--loading { border: 0; } [data-theme='fresh'] .sv-nav-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 13px; font-weight: 800; } /* Desktop-only parts are hidden on small screens */ [data-theme='fresh'] .sv-nav-search, [data-theme='fresh'] .sv-nav-utils, [data-theme='fresh'] .sv-nav-sub { display: none; } /* Buttons (desktop account, Lainnya sheet) */ [data-theme='fresh'] .sv-nav-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; white-space: nowrap; font-size: 14.5px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-nav-btn--ghost { background: var(--sv-surface); border-color: var(--sv-line); color: var(--sv-ink); } [data-theme='fresh'] .sv-nav-btn--ghost:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-btn--ghost[aria-current='page'] { border-color: var(--primary); background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-btn--primary { background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 8px 18px -10px var(--primary); } [data-theme='fresh'] .sv-nav-btn--primary:hover { background: color-mix(in oklab, var(--primary) 88%, black); } [data-theme='fresh'] .sv-nav-btn--primary[aria-current='page'] { box-shadow: 0 0 0 3px var(--sv-primary-tint); } /* Generic icon button kept for other areas. */ [data-theme='fresh'] .sv-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink); cursor: pointer; transition: border-color .15s, color .15s; } [data-theme='fresh'] .sv-icon-btn:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-pill { background: var(--sv-surface-2); } [data-theme='fresh'] .sv-icon-btn svg { width: 20px; height: 20px; } /* Phones ≥390px: the store name fits next to the mark. */ @media (min-width: 390px) { [data-theme='fresh'] .sv-nav-name { display: block; max-width: 30vw; } } /* Tablets: same pattern, wider pill, "Masuk" gets its label. */ @media (min-width: 640px) { [data-theme='fresh'] .sv-nav-bar-inner { gap: 16px; } [data-theme='fresh'] .sv-nav-name { max-width: 220px; font-size: 16px; } [data-theme='fresh'] .sv-nav-pill { height: 42px; margin-inline: 8px; } [data-theme='fresh'] .sv-nav-pill-text--short { display: none; } [data-theme='fresh'] .sv-nav-pill-text--long { display: block; } [data-theme='fresh'] .sv-nav-me:not(.sv-nav-me--avatar):not(.sv-nav-me--loading) { width: auto; padding: 0 14px 0 11px; } [data-theme='fresh'] .sv-nav-me-text { display: inline; } } /* Search field (desktop row 1) */ [data-theme='fresh'] .sv-nav-search { position: relative; flex: 1; min-width: 0; } [data-theme='fresh'] .sv-nav-search-icon { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--sv-ink-2); pointer-events: none; } [data-theme='fresh'] .sv-nav-search-input { width: 100%; height: 44px; padding: 0 46px 0 44px; border-radius: 14px; border: 1px solid var(--sv-line); background: var(--sv-surface-2); color: var(--sv-ink); font-size: 15px; font-weight: 500; transition: border-color .15s, background-color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-nav-search-input::placeholder { color: var(--sv-ink-3); } [data-theme='fresh'] .sv-nav-search-input:hover { border-color: var(--sv-line-strong); } [data-theme='fresh'] .sv-nav-search-input:is(:focus, :focus-visible) { outline: none; background: var(--sv-surface); border-color: color-mix(in oklab, var(--primary) 70%, var(--sv-line)); box-shadow: 0 0 0 4px var(--sv-mint-pill); } [data-theme='fresh'] .sv-nav-search-kbd { position: absolute; right: 11px; top: 50%; translate: 0 -50%; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--sv-line-strong); background: var(--sv-surface); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; color: var(--sv-ink); pointer-events: none; transition: opacity .15s; } [data-theme='fresh'] .sv-nav-search:focus-within .sv-nav-search-kbd { opacity: 0; } [data-theme='fresh'] .sv-nav-search-clear { position: absolute; right: 5px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--sv-ink-3); cursor: pointer; transition: background-color .15s, color .15s; } [data-theme='fresh'] .sv-nav-search-clear:hover { background: var(--sv-surface-2); color: var(--sv-ink); } [data-theme='fresh'] .sv-nav-search-clear svg { width: 16px; height: 16px; } [data-theme='fresh'] .sv-nav-search-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(100%, 560px); max-height: min(460px, 70vh); overflow: auto; padding: 6px; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: 16px; box-shadow: var(--sv-shadow-lg); } /* Suggestions (desktop dropdown + mobile sheet) */ [data-theme='fresh'] .sv-suggest-label { padding: 8px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-suggest-state { display: flex; align-items: center; gap: 8px; padding: 14px 12px; font-size: 14px; line-height: 1.45; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-suggest-state svg { width: 16px; height: 16px; flex-shrink: 0; } [data-theme='fresh'] .sv-suggest-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-suggest-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--sv-ink); transition: background-color .12s; } [data-theme='fresh'] .sv-suggest-item:hover, [data-theme='fresh'] .sv-suggest-option[aria-selected='true'] .sv-suggest-item { background: var(--sv-mint); } [data-theme='fresh'] .sv-suggest-thumb { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--sv-surface-2); box-shadow: 0 0 0 1px var(--sv-line); } [data-theme='fresh'] .sv-suggest-thumb img { object-fit: cover; } [data-theme='fresh'] .sv-suggest-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='fresh'] .sv-suggest-enter { width: 15px; height: 15px; flex-shrink: 0; color: var(--sv-primary-ink); opacity: 0; transition: opacity .12s; } [data-theme='fresh'] .sv-suggest-option[aria-selected='true'] .sv-suggest-enter { opacity: 1; } [data-theme='fresh'] .sv-suggest-all { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 4px; padding: 0 12px; border: 0; border-top: 1px solid var(--sv-line); border-radius: 0 0 10px 10px; background: none; cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); transition: color .15s; } [data-theme='fresh'] .sv-suggest-state + .sv-suggest-all { margin-top: 0; } [data-theme='fresh'] .sv-suggest-all > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='fresh'] .sv-suggest-all strong { font-weight: 700; color: var(--sv-ink); } [data-theme='fresh'] .sv-suggest-all svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-suggest-all:hover { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-suggest-all:hover .sv-suggest-all-go { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-spin { animation: sv-nav-spin .9s linear infinite; } @keyframes sv-nav-spin { to { transform: rotate(360deg); } } /* ───────── Desktop (≥1024px): two rows ───────── */ @media (min-width: 1024px) { [data-theme='fresh'] .sv-nav-bar-inner { gap: 24px; height: 68px; } [data-theme='fresh'] .sv-nav-brand { gap: 10px; max-width: 260px; } [data-theme='fresh'] .sv-nav-logo { width: 36px; height: 36px; border-radius: 10px; } [data-theme='fresh'] .sv-nav-name { display: block; max-width: none; font-size: 18px; } [data-theme='fresh'] .sv-nav-pill, [data-theme='fresh'] .sv-nav-me { display: none; } [data-theme='fresh'] .sv-nav-search { display: block; } [data-theme='fresh'] .sv-nav-utils { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } [data-theme='fresh'] .sv-nav-sub { display: block; } [data-theme='fresh'] .sv-nav[data-scrolled] .sv-nav-bar { box-shadow: 0 1px 0 var(--sv-line); } [data-theme='fresh'] .sv-nav[data-scrolled][data-collapsed] .sv-nav-bar { box-shadow: 0 1px 0 var(--sv-line), 0 10px 24px -20px oklch(0.3 0.05 160 / 0.5); } } /* Row 1 utilities: Cek Transaksi · divider · account */ [data-theme='fresh'] .sv-nav-util { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--sv-ink); transition: background-color .15s, color .15s; } [data-theme='fresh'] .sv-nav-util svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sv-ink-2); transition: color .15s; } [data-theme='fresh'] .sv-nav-util:hover { background: var(--sv-mint); color: var(--sv-ink); } [data-theme='fresh'] .sv-nav-util:hover svg { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-util[aria-current='page'] { background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-util[aria-current='page'] svg { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-nav-divider { width: 1px; height: 24px; margin: 0 10px 0 6px; background: var(--sv-line-strong); } [data-theme='fresh'] .sv-nav-auth { display: flex; align-items: center; gap: 8px; } [data-theme='fresh'] .sv-nav-auth-loading { display: block; width: 158px; height: 38px; border-radius: 10px; } [data-theme='fresh'] .sv-nav-account { display: inline-flex; align-items: center; gap: 10px; max-width: 240px; height: 44px; padding: 0 14px 0 6px; border-radius: 12px; color: var(--sv-ink); transition: background-color .15s; } [data-theme='fresh'] .sv-nav-account:hover { background: var(--sv-mint); } [data-theme='fresh'] .sv-nav-account[aria-current='page'] { background: var(--sv-mint-pill); } [data-theme='fresh'] .sv-nav-account-text { display: grid; min-width: 0; line-height: 1.2; } [data-theme='fresh'] .sv-nav-account-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 700; } [data-theme='fresh'] .sv-nav-account-balance { white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } /* Row 2: Belanja (left, primary) and Komunitas (right, secondary) */ [data-theme='fresh'] .sv-nav-sub { position: relative; z-index: 1; background: var(--sv-surface); box-shadow: 0 1px 0 var(--sv-line); transition: transform .32s cubic-bezier(.2, .7, .2, 1), opacity .24s ease, box-shadow .25s ease; } [data-theme='fresh'] .sv-nav[data-collapsed] .sv-nav-sub { transform: translateY(-100%); opacity: 0; } [data-theme='fresh'] .sv-nav[data-scrolled] .sv-nav-sub { box-shadow: 0 1px 0 var(--sv-line), 0 10px 24px -20px oklch(0.3 0.05 160 / 0.5); } [data-theme='fresh'] .sv-nav-sub-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 48px; } [data-theme='fresh'] .sv-nav-group { display: flex; min-width: 0; } [data-theme='fresh'] .sv-nav-group-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-nav-group-item { display: flex; } /* Links are pills; the active one is a mint pill with primary text (no underline). */ [data-theme='fresh'] .sv-nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; border-radius: 999px; white-space: nowrap; transition: color .15s, background-color .15s; } [data-theme='fresh'] .sv-nav-link::after { content: ''; position: absolute; inset: -4px 0; } [data-theme='fresh'] .sv-nav-link:hover { background: var(--sv-mint); } [data-theme='fresh'] .sv-nav-link[aria-current='page'] { background: var(--sv-mint-pill); color: var(--sv-primary-ink) !important; } [data-theme='fresh'] .sv-nav-link:focus-visible { outline-offset: 0; } /* Belanja: the main navigation (first pill's text lines up with the logo) */ [data-theme='fresh'] .sv-nav-group[data-tone='primary'] .sv-nav-group-list { gap: 4px; } [data-theme='fresh'] .sv-nav-group[data-tone='primary'] .sv-nav-link { padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--sv-ink); } /* Komunitas: quieter content links (smaller, muted) */ [data-theme='fresh'] .sv-nav-group[data-tone='secondary'] .sv-nav-group-list { gap: 2px; } [data-theme='fresh'] .sv-nav-group[data-tone='secondary'] .sv-nav-link { gap: 6px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-nav-group[data-tone='secondary'] .sv-nav-link svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--sv-ink-3); transition: color .15s; } [data-theme='fresh'] .sv-nav-group[data-tone='secondary'] .sv-nav-link:hover { color: var(--sv-ink); } [data-theme='fresh'] .sv-nav-group[data-tone='secondary'] .sv-nav-link[aria-current='page'] svg { color: var(--sv-primary-ink); } @media (min-width: 1024px) and (max-width: 1199px) { [data-theme='fresh'] .sv-nav-bar-inner { gap: 20px; } [data-theme='fresh'] .sv-nav-util { padding: 0 10px; } [data-theme='fresh'] .sv-nav-divider { margin: 0 8px 0 4px; } } /* ───────── Mobile search sheet (portalled to ; the theme scope is on the sheet) ───────── */ [data-theme='fresh'].sv-search-sheet { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--sv-surface); color: var(--sv-ink); animation: sv-sheet-in .22s cubic-bezier(.2, .7, .2, 1); } @keyframes sv-sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } [data-theme='fresh'] .sv-search-sheet-bar { display: flex; align-items: center; gap: 4px; padding: calc(10px + env(safe-area-inset-top)) 8px 10px var(--sv-gutter); border-bottom: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-search-sheet-form { position: relative; flex: 1; min-width: 0; } [data-theme='fresh'] .sv-search-sheet-icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--sv-ink-3); pointer-events: none; } [data-theme='fresh'] .sv-search-sheet-input { width: 100%; height: 46px; padding: 0 44px 0 42px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--primary) 70%, var(--sv-line)); background: var(--sv-surface); color: var(--sv-ink); font-size: 16px; font-weight: 500; box-shadow: 0 0 0 4px var(--sv-mint-pill); -webkit-appearance: none; appearance: none; } [data-theme='fresh'] .sv-search-sheet-input::placeholder { color: var(--sv-ink-3); } [data-theme='fresh'] .sv-search-sheet-input:is(:focus, :focus-visible) { outline: none; } [data-theme='fresh'] .sv-search-sheet-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } [data-theme='fresh'] .sv-search-sheet-clear { position: absolute; right: 3px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--sv-ink-3); cursor: pointer; } [data-theme='fresh'] .sv-search-sheet-clear svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-search-sheet-close { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-search-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px calc(var(--sv-gutter) - 6px) calc(24px + env(safe-area-inset-bottom)); } [data-theme='fresh'] .sv-search-sheet-body .sv-suggest-item { min-height: 56px; font-size: 15px; } [data-theme='fresh'] .sv-search-sheet-body .sv-suggest-all { min-height: 52px; font-size: 14px; border-radius: 0; } [data-theme='fresh'] .sv-search-sheet-hint { padding: 10px 6px 18px; font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-search-sheet-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-search-sheet-link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px 6px 6px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--sv-ink); transition: background-color .12s; } [data-theme='fresh'] .sv-search-sheet-link:hover { background: var(--sv-mint); } [data-theme='fresh'] .sv-search-sheet-link-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-search-sheet-link-icon svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-search-sheet-link-go { width: 16px; height: 16px; margin-left: auto; color: var(--sv-ink-3); } /* ───────── Bottom tab bar (<1024px) ───────── */ [data-theme='fresh'] .sv-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding-bottom: env(safe-area-inset-bottom); background: var(--sv-surface); box-shadow: 0 -1px 0 var(--sv-line), 0 -10px 24px -22px oklch(0.3 0.05 160 / 0.45); } [data-theme='fresh'] .sv-tabbar-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 600px; height: 64px; margin: 0 auto; padding: 0; list-style: none; } [data-theme='fresh'] .sv-tabbar-list > li { display: flex; min-width: 0; } [data-theme='fresh'] .sv-tabbar-item { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 44px; padding: 4px 0 2px; border: 0; background: none; color: var(--sv-ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s; } /* The icon sits in a pill (same box for every tab, so nothing shifts); the active pill is mint. */ [data-theme='fresh'] .sv-tabbar-item svg { box-sizing: content-box; width: 22px; height: 22px; padding: 4px 15px; flex-shrink: 0; border-radius: 999px; stroke-width: 1.85; transition: color .15s, background-color .15s; } [data-theme='fresh'] .sv-tabbar-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } [data-theme='fresh'] .sv-tabbar-item:is([aria-current='page'], [data-active]) { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-tabbar-item:is([aria-current='page'], [data-active]) svg { background: var(--sv-mint-pill); color: var(--sv-primary-ink); stroke-width: 2.15; } [data-theme='fresh'] .sv-tabbar-item:is([aria-current='page'], [data-active]) .sv-tabbar-label { font-weight: 700; } [data-theme='fresh'] .sv-tabbar-item:focus-visible { outline-offset: -4px; border-radius: 12px; } /* In-flow spacer after the footer, so the bar never covers content */ [data-theme='fresh'] .sv-tabbar-spacer { flex-shrink: 0; height: calc(64px + env(safe-area-inset-bottom)); } [data-theme='fresh'] .sv-tabbar-label-short { display: none; } @media (max-width: 379px) { [data-theme='fresh'] .sv-tabbar-list[data-count='5'] .sv-tabbar-label-full { display: none; } [data-theme='fresh'] .sv-tabbar-list[data-count='5'] .sv-tabbar-label-short { display: inline; } } @media (min-width: 1024px) { [data-theme='fresh'] .sv-tabbar, [data-theme='fresh'] .sv-tabbar-spacer { display: none; } } /* ───────── "Lainnya" bottom sheet (portalled to ) ───────── */ [data-theme='fresh'].sv-more { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; justify-content: flex-end; color: var(--sv-ink); } [data-theme='fresh'] .sv-more-backdrop { position: absolute; inset: 0; background: oklch(0.22 0.03 165 / 0.42); animation: sv-more-fade .2s ease; } [data-theme='fresh'] .sv-more-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: min(88dvh, 720px); margin: 0 auto; border-radius: 22px 22px 0 0; background: var(--sv-surface); box-shadow: 0 -24px 48px -28px oklch(0.25 0.05 160 / 0.5); animation: sv-more-in .28s cubic-bezier(.2, .8, .2, 1); } [data-theme='fresh'] .sv-more-panel:focus { outline: none; } [data-theme='fresh'] .sv-more-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 10px 4px var(--sv-gutter); } [data-theme='fresh'] .sv-more-handle { position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 99px; background: var(--sv-line-strong); } [data-theme='fresh'] .sv-more-title { font-family: var(--font-theme-heading), system-ui, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } [data-theme='fresh'] .sv-more-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--sv-ink-2); cursor: pointer; } [data-theme='fresh'] .sv-more-close:hover { background: var(--sv-surface-2); color: var(--sv-ink); } [data-theme='fresh'] .sv-more-close svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-more-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 calc(var(--sv-gutter) - 8px) calc(14px + env(safe-area-inset-bottom)); } [data-theme='fresh'] .sv-more-group { padding: 12px 0; } [data-theme='fresh'] .sv-more-group + .sv-more-group { border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-more-group-title { padding: 0 8px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--sv-ink-2) 75%, var(--sv-ink-3)); } [data-theme='fresh'] .sv-more-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-more-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--sv-ink); transition: background-color .12s; } [data-theme='fresh'] .sv-more-link:hover, [data-theme='fresh'] .sv-more-link:active { background: var(--sv-mint); } [data-theme='fresh'] .sv-more-link[aria-current='page'] { background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-more-link-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--sv-mint); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-more-link-icon svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-more-link[aria-current='page'] .sv-more-link-icon { background: var(--sv-surface); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-more-link-text { flex: 1; min-width: 0; } [data-theme='fresh'] .sv-more-link-go { width: 16px; height: 16px; flex-shrink: 0; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-more-auth { display: grid; gap: 12px; padding: 2px 8px 4px; } [data-theme='fresh'] .sv-more-auth-note { font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-more-auth-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } [data-theme='fresh'] .sv-more-auth-actions .sv-nav-btn { height: 46px; border-radius: 12px; font-size: 14.5px; } [data-theme='fresh'] .sv-more-account { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0 2px; padding: 10px 12px 10px 10px; border-radius: 14px; border: 1px solid var(--sv-line); color: var(--sv-ink); transition: border-color .15s, background-color .15s; } [data-theme='fresh'] .sv-more-account:hover { border-color: var(--sv-line-strong); } [data-theme='fresh'] .sv-more-account[aria-current='page'] { border-color: var(--primary); background: var(--sv-mint-pill); } [data-theme='fresh'] .sv-more-account .sv-nav-avatar { width: 40px; height: 40px; font-size: 16px; } [data-theme='fresh'] .sv-more-account-text { display: grid; flex: 1; min-width: 0; gap: 2px; } [data-theme='fresh'] .sv-more-account-name { font-size: 15px; font-weight: 700; } [data-theme='fresh'] .sv-more-account-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 500; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-more-account-loading { display: block; height: 64px; margin: 0 2px; border-radius: 14px; } @keyframes sv-more-in { from { transform: translateY(100%); } to { transform: none; } } @keyframes sv-more-fade { from { opacity: 0; } to { opacity: 1; } } /* ───────── Footer: Belanja / Bantuan / Komunitas columns ───────── */ @media (min-width: 1024px) { [data-theme='fresh'] .sv-footer-grid[data-community] { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 0.9fr)) minmax(0, 1.45fr); gap: 32px; } } @media (min-width: 640px) and (max-width: 1023px) { [data-theme='fresh'] .sv-footer-grid[data-community] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { /* The tab bar spacer already clears the bottom; no extra room needed. */ [data-theme='fresh'] .sv-shell:has(> .sv-tabbar-spacer) .sv-footer-bottom { padding-bottom: 24px; } /* Pages with their own fixed order bar (no tab bar): keep the copyright line clear of it. */ [data-theme='fresh'] .sv-shell:has(.sv-order-bar, .sv-joki-bar) .sv-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } } /* ───────── Header-aware offsets for sticky content and scroll targets ───────── */ /* The contact step is always scrolled to from above (product grid), so row 2 is hidden when the scroll ends: clear row 1 plus a 24px gap (88 desktop / 80 mobile). */ [data-theme='fresh'] .sv-shell .sv-detail-anchor { scroll-margin-top: calc(var(--sv-header-bar-h, 64px) + 24px); } /* Sticky side cards follow the visible header height (row 2 in or out). */ [data-theme='fresh'] .sv-shell :is(.sv-detail-reviews, .sv-joki-terms) { top: calc(var(--sv-header-offset, 108px) + 20px); transition: top .32s cubic-bezier(.2, .7, .2, 1); } @media (prefers-reduced-motion: reduce) { [data-theme='fresh'] .sv-nav-sub, [data-theme='fresh'] .sv-nav-bar, [data-theme='fresh'].sv-search-sheet, [data-theme='fresh'] .sv-tabbar-item, [data-theme='fresh'] .sv-tabbar-item svg, [data-theme='fresh'] .sv-more-panel, [data-theme='fresh'] .sv-more-backdrop, [data-theme='fresh'] .sv-shell :is(.sv-detail-reviews, .sv-joki-terms) { transition: none; animation: none; } } /* Status colors (semantic: stay green/red/amber even when the reseller primary changes) */ [data-theme='fresh'] { --sv-warn-ink: oklch(0.42 0.09 65); --sv-warn-soft: oklch(0.975 0.04 88); --sv-info-ink: oklch(0.45 0.1 245); --sv-info-soft: oklch(0.97 0.02 245); } @keyframes sv-spin { to { transform: rotate(360deg); } } [data-theme='fresh'] .sv-spin { animation: sv-spin 1s linear infinite; } /* ---------- Page frame ---------- */ [data-theme='fresh'] .sv-detail { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } [data-theme='fresh'] .sv-detail-main { margin-top: 28px; } [data-theme='fresh'] .sv-detail-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "form" "reviews"; } [data-theme='fresh'] .sv-detail-info { grid-area: info; min-width: 0; } [data-theme='fresh'] .sv-detail-form { grid-area: form; min-width: 0; display: grid; gap: 20px; align-content: start; } [data-theme='fresh'] .sv-detail-reviews { grid-area: reviews; min-width: 0; } [data-theme='fresh'] .sv-detail-reviews:empty { display: none; } [data-theme='fresh'] .sv-detail-anchor { scroll-margin-top: 112px; } @media (min-width: 1024px) { [data-theme='fresh'] .sv-detail { padding-bottom: 80px; } [data-theme='fresh'] .sv-detail-main { margin-top: 32px; } [data-theme='fresh'] .sv-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "info form" "reviews form"; column-gap: 28px; row-gap: 20px; align-items: start; } [data-theme='fresh'] .sv-detail-anchor { scroll-margin-top: 96px; } } /* Reviews follow the long form on tall desktop screens (collapsed card only). */ @media (min-width: 1024px) and (min-height: 820px) { [data-theme='fresh'] .sv-detail-reviews { position: sticky; top: 96px; } [data-theme='fresh'] .sv-detail-reviews:has([aria-expanded='true']) { position: static; } } /* ---------- Hero: banner on a deep stage, white info card inside it ---------- */ [data-theme='fresh'] .sv-detail .sv-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), radial-gradient(40% 70% at 0% 100%, var(--sv-lime-glow), transparent 70%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-detail .sv-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.22; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-detail .sv-hero .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-detail .sv-hero .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-detail .sv-hero .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-detail .sv-hero .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-detail .sv-hero .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-detail .sv-hero { width: auto; max-width: calc(var(--sv-container) - 2 * var(--sv-gutter)); margin: 20px max(var(--sv-gutter), calc((100% - var(--sv-container)) / 2 + var(--sv-gutter))) 0; padding: 20px; border-radius: var(--sv-radius-xl); } [data-theme='fresh'] .sv-detail .sv-hero .sv-hero-banner { position: relative; aspect-ratio: 3 / 1; overflow: hidden; border-radius: 22px; background: var(--sv-stage-2); box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.9); } [data-theme='fresh'] .sv-hero-banner-img { object-fit: cover; object-position: 50% 10%; } [data-theme='fresh'] .sv-detail .sv-hero .sv-hero-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / 0.36), transparent 48%); } [data-theme='fresh'] .sv-detail .sv-hero .sv-hero-card { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; margin: -64px 28px 0; padding: 18px 24px; color: var(--sv-ink); background: var(--sv-surface); border-radius: var(--sv-radius-lg); box-shadow: 0 24px 44px -26px rgb(0 0 0 / 0.6); } [data-theme='fresh'] .sv-detail .sv-hero.sv-hero--plain .sv-hero-card { margin: 0; } [data-theme='fresh'] .sv-hero-logo { position: relative; flex-shrink: 0; width: 88px; height: 88px; align-self: center; display: grid; place-items: center; overflow: hidden; border-radius: 22px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 32px; font-weight: 800; box-shadow: 0 0 0 1px var(--sv-line), 0 12px 26px -14px oklch(0.25 0.04 165 / 0.55); } [data-theme='fresh'] .sv-hero-logo img { width: 100%; height: 100%; object-fit: cover; } [data-theme='fresh'] .sv-hero-info { min-width: 0; } [data-theme='fresh'] .sv-hero-kicker { display: inline-flex; width: fit-content; padding: 4px 10px; border-radius: 999px; background: var(--sv-mint-pill); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-hero-title { margin-top: 6px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='fresh'] .sv-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } [data-theme='fresh'] .sv-hero-chips .sv-chip { height: 28px; } [data-theme='fresh'] .sv-hero-rating { background: var(--sv-surface); color: var(--sv-ink); border-color: var(--sv-line-strong); } [data-theme='fresh'] .sv-hero-rating svg { fill: var(--sv-star); color: var(--sv-star); } [data-theme='fresh'] .sv-hero-rating strong { font-weight: 800; } [data-theme='fresh'] .sv-hero-rating-count { font-weight: 600; color: var(--sv-ink-2); } @media (max-width: 639px) { [data-theme='fresh'] .sv-detail .sv-hero { margin-top: 12px; padding: 12px; border-radius: 22px; } [data-theme='fresh'] .sv-detail .sv-hero .sv-hero-banner { aspect-ratio: 2 / 1; border-radius: 16px; } [data-theme='fresh'] .sv-detail .sv-hero .sv-hero-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-areas: "logo kicker" "logo title" "chips chips"; column-gap: 14px; row-gap: 0; align-items: start; margin: -36px 8px 0; padding: 14px; } [data-theme='fresh'] .sv-detail .sv-hero.sv-hero--plain .sv-hero-card { margin: 0; } [data-theme='fresh'] .sv-hero-info { display: contents; } [data-theme='fresh'] .sv-hero-logo { grid-area: logo; align-self: center; width: 68px; height: 68px; border-radius: 18px; } [data-theme='fresh'] .sv-hero-kicker { grid-area: kicker; align-self: end; justify-self: start; } [data-theme='fresh'] .sv-hero-title { grid-area: title; align-self: start; margin-top: 4px; font-size: 21px; } [data-theme='fresh'] .sv-hero-chips { grid-area: chips; margin-top: 12px; } [data-theme='fresh'] .sv-hero-chips .sv-chip { height: 28px; padding: 0 10px; font-size: 12px; } } /* ---------- Guide (left column) ---------- */ [data-theme='fresh'] .sv-guide { display: grid; gap: 16px; padding: 20px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-guide-head { display: flex; align-items: center; gap: 12px; } [data-theme='fresh'] .sv-guide-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-guide-icon svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-guide-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-guide-title { font-size: 17px; line-height: 1.25; font-weight: 800; } [data-theme='fresh'] .sv-guide-subtitle { margin-bottom: 4px; font-size: 14px; font-weight: 800; } [data-theme='fresh'] .sv-guide-sub { padding-top: 14px; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-guide-body { display: grid; gap: 16px; } [data-theme='fresh'] .sv-guide-head > div { flex: 1; min-width: 0; } [data-theme='fresh'] .sv-guide-steps { display: grid; } [data-theme='fresh'] .sv-guide-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-guide-step p { padding-top: 3px; } [data-theme='fresh'] .sv-guide-step:not(:last-child)::before { content: ''; position: absolute; left: 13.5px; top: 39px; bottom: -3px; width: 1px; background: var(--sv-line-strong); } [data-theme='fresh'] .sv-guide-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-guide-link { color: var(--sv-primary-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } [data-theme='fresh'] .sv-guide-help { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; background: var(--sv-mint); color: var(--sv-ink); text-decoration: none; transition: border-color .15s, background-color .15s; } [data-theme='fresh'] .sv-guide-help:hover { border-color: var(--primary); } [data-theme='fresh'] .sv-guide-help-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; background: var(--sv-surface); color: var(--sv-primary-ink); border: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-guide-help-icon svg { width: 17px; height: 17px; } [data-theme='fresh'] .sv-guide-help-text { display: grid; font-size: 13px; line-height: 1.35; } [data-theme='fresh'] .sv-guide-help-text strong { font-weight: 800; } [data-theme='fresh'] .sv-guide-help-text span { color: var(--sv-ink-2); } [data-theme='fresh'] .sv-guide-help-arrow { width: 18px; height: 18px; margin-left: auto; color: var(--sv-ink-3); flex-shrink: 0; } /* Notes & alerts */ [data-theme='fresh'] :is(.sv-detail, .sv-dialog) .sv-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; } [data-theme='fresh'] :is(.sv-detail, .sv-dialog) .sv-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } /* Warnings stay neutral (white + line); only the icon and the lead word carry the amber. */ [data-theme='fresh'] .sv-detail .sv-note--warn { background: var(--sv-surface); color: var(--sv-ink-2); border: 1px solid var(--sv-line-strong); } [data-theme='fresh'] .sv-detail .sv-note--warn :is(svg, strong) { color: var(--sv-warn-ink); } [data-theme='fresh'] .sv-detail .sv-note strong { font-weight: 800; } [data-theme='fresh'] .sv-detail .sv-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sv-line); font-size: 13.5px; line-height: 1.5; } [data-theme='fresh'] .sv-detail .sv-alert-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } [data-theme='fresh'] .sv-detail .sv-alert-body { min-width: 0; flex: 1; } [data-theme='fresh'] .sv-detail .sv-alert-title { font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-detail .sv-alert-text { color: var(--sv-ink-2); overflow-wrap: anywhere; } [data-theme='fresh'] .sv-detail .sv-alert-text strong { color: var(--sv-ink); font-weight: 800; } [data-theme='fresh'] .sv-detail .sv-alert-action { flex-shrink: 0; align-self: center; } [data-theme='fresh'] .sv-detail .sv-alert-btn { min-height: 38px; padding: 0 12px; gap: 6px; font-size: 13px; } [data-theme='fresh'] .sv-detail .sv-alert-btn svg { width: 15px; height: 15px; } [data-theme='fresh'] .sv-detail .sv-alert[data-tone='ok'] { background: var(--sv-ok-soft); border-color: color-mix(in oklab, var(--sv-ok) 22%, transparent); } [data-theme='fresh'] .sv-detail .sv-alert[data-tone='ok'] .sv-alert-icon { color: var(--sv-ok); } [data-theme='fresh'] .sv-detail .sv-alert[data-tone='err'] { background: var(--sv-err-soft); border-color: color-mix(in oklab, var(--sv-err) 22%, transparent); } [data-theme='fresh'] .sv-detail .sv-alert[data-tone='err'] .sv-alert-icon { color: var(--sv-err); } [data-theme='fresh'] .sv-detail .sv-alert[data-tone='warn'] { background: var(--sv-surface); border-color: var(--sv-line-strong); } [data-theme='fresh'] .sv-detail .sv-alert[data-tone='warn'] .sv-alert-icon { color: var(--sv-warn-ink); } [data-theme='fresh'] .sv-detail .sv-alert[data-tone='info'] { background: var(--sv-mint); border-color: var(--sv-primary-tint); } [data-theme='fresh'] .sv-detail .sv-alert[data-tone='info'] .sv-alert-icon { color: var(--sv-primary-ink); } /* ---------- Step panels ---------- */ [data-theme='fresh'] .sv-detail .sv-step-head { min-height: 64px; background: var(--sv-surface); } [data-theme='fresh'] .sv-detail .sv-step-title { font-size: 16.5px; } [data-theme='fresh'] .sv-detail .sv-step-aside { min-width: 0; } [data-theme='fresh'] .sv-detail .sv-step-picked { display: block; max-width: min(220px, 40vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 10px; border-radius: 999px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-weight: 700; } [data-theme='fresh'] .sv-detail .sv-step-body { display: grid; gap: 18px; } [data-theme='fresh'] .sv-detail .sv-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 12px; text-align: center; color: var(--sv-ink-2); font-size: 14px; } [data-theme='fresh'] .sv-detail .sv-empty svg { width: 28px; height: 28px; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-detail .sv-empty-text { padding: 24px 0; text-align: center; color: var(--sv-ink-2); font-size: 14px; } /* ---------- Products ---------- */ [data-theme='fresh'] .sv-detail .sv-products { display: grid; gap: 22px; } [data-theme='fresh'] .sv-detail .sv-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } [data-theme='fresh'] .sv-detail .sv-group-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-group-label::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--primary); } [data-theme='fresh'] .sv-detail .sv-group-count { font-size: 12px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-detail .sv-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } [data-theme='fresh'] .sv-detail .sv-product-grid > li { display: flex; min-width: 0; } @media (min-width: 768px) { [data-theme='fresh'] .sv-detail .sv-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } [data-theme='fresh'] .sv-detail .sv-product { position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "icon price"; align-items: center; align-content: space-between; column-gap: 8px; row-gap: 8px; min-height: 84px; padding: 12px; text-align: left; color: var(--sv-ink); background: var(--sv-surface); border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius); cursor: pointer; } [data-theme='fresh'] .sv-detail .sv-product-body { display: contents; } [data-theme='fresh'] .sv-detail .sv-product-icon { grid-area: icon; display: grid; place-items: center; width: 26px; height: 26px; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-product-icon img { width: 100%; height: 100%; object-fit: contain; } [data-theme='fresh'] .sv-detail .sv-product-icon svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-detail .sv-product-name { grid-area: name; align-self: start; font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='fresh'] .sv-detail .sv-product-price { grid-area: price; font-size: 14.5px; font-weight: 800; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 640px) { [data-theme='fresh'] .sv-detail .sv-product { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon name" "icon price"; column-gap: 12px; row-gap: 3px; align-content: center; min-height: 72px; } [data-theme='fresh'] .sv-detail .sv-product-icon { width: 40px; height: 40px; padding: 5px; border-radius: 11px; background: var(--sv-mint); } [data-theme='fresh'] .sv-detail .sv-product-name { align-self: end; } [data-theme='fresh'] .sv-detail .sv-product-price { align-self: start; font-size: 15px; } } [data-theme='fresh'] .sv-detail .sv-product[aria-pressed='true'] .sv-product-icon { background: var(--sv-surface); } [data-theme='fresh'] .sv-detail .sv-product-check { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 0 0 3px var(--sv-surface); } [data-theme='fresh'] .sv-detail .sv-product-check svg { width: 13px; height: 13px; stroke-width: 3; } [data-theme='fresh'] .sv-detail .sv-more-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 10px; border-radius: 12px; border: 1px dashed var(--sv-line-strong); background: var(--sv-mint); font-size: 14px; font-weight: 700; color: var(--sv-primary-ink); cursor: pointer; transition: border-color .15s, background-color .15s; } [data-theme='fresh'] .sv-detail .sv-more-btn:hover { border-color: var(--primary); border-style: solid; } [data-theme='fresh'] .sv-detail .sv-more-btn svg { width: 17px; height: 17px; transition: transform .2s; } [data-theme='fresh'] .sv-detail .sv-more-btn svg[data-open='true'] { transform: rotate(180deg); } /* ---------- Flash sale (inside step 1) ---------- */ [data-theme='fresh'] .sv-detail .sv-flash-panel { position: relative; isolation: isolate; overflow: hidden; padding: 26px; border-radius: var(--sv-radius-xl); background: var(--sv-mint); --sv-notch-bg: var(--sv-mint); } [data-theme='fresh'] .sv-detail .sv-flash-panel::after { content: ''; position: absolute; z-index: -1; right: -70px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: var(--sv-mint-shape); opacity: 0.85; pointer-events: none; } [data-theme='fresh'] .sv-detail .sv-flash-panel::before { content: ''; position: absolute; z-index: -1; left: -46px; bottom: -64px; width: 170px; height: 170px; border-radius: 44px; background: var(--sv-panel-square); opacity: 0.75; transform: rotate(18deg); pointer-events: none; } @media (max-width: 760px) { [data-theme='fresh'] .sv-detail .sv-flash-panel { padding: 20px 16px; border-radius: 24px; } [data-theme='fresh'] .sv-detail .sv-flash-panel::after { right: -90px; top: -96px; width: 210px; height: 210px; } [data-theme='fresh'] .sv-detail .sv-flash-panel::before { left: -60px; bottom: -74px; width: 150px; height: 150px; border-radius: 40px; } } [data-theme='fresh'] .sv-detail .sv-flash-panel { padding: 16px; border-radius: 20px; } [data-theme='fresh'] .sv-detail .sv-flash-panel::after { right: -90px; top: -110px; width: 220px; height: 220px; } [data-theme='fresh'] .sv-detail .sv-flash-panel::before { left: -70px; bottom: -90px; width: 150px; height: 150px; } [data-theme='fresh'] .sv-detail .sv-flash-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; } [data-theme='fresh'] .sv-detail .sv-flash-panel-titles { display: flex; align-items: center; gap: 10px; min-width: 0; } [data-theme='fresh'] .sv-detail .sv-flash-panel-title { font-size: 16px; font-weight: 800; line-height: 1.25; } [data-theme='fresh'] .sv-detail .sv-timer { display: inline-flex; align-items: center; gap: 8px; } [data-theme='fresh'] .sv-detail .sv-timer-label { font-size: 12.5px; font-weight: 700; color: var(--sv-ink); } [data-theme='fresh'] .sv-detail .sv-timer-units { display: inline-flex; align-items: center; gap: 3px; } [data-theme='fresh'] .sv-detail .sv-timer-unit { display: grid; place-items: center; min-width: 32px; height: 30px; padding: 0 5px; border-radius: 9px; background: var(--sv-stage); color: var(--sv-lime); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-detail .sv-timer-sep { font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-detail .sv-timer--ended { font-size: 12px; font-weight: 700; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-product--flash { grid-template-areas: "name name" "icon price" "meter meter"; border-color: transparent; box-shadow: var(--sv-shadow); } [data-theme='fresh'] .sv-detail .sv-product-prices { grid-area: price; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; } [data-theme='fresh'] .sv-detail .sv-product--flash .sv-product-price { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-product-was { font-size: 12px; font-weight: 600; color: var(--sv-ink-3); text-decoration: line-through; white-space: nowrap; } [data-theme='fresh'] .sv-detail .sv-product-off { position: absolute; top: -9px; left: 10px; display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--sv-lime); color: var(--sv-on-lime); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--sv-surface); } [data-theme='fresh'] .sv-detail .sv-product--flash { margin-top: 4px; } [data-theme='fresh'] .sv-detail .sv-meter { grid-area: meter; display: grid; gap: 4px; margin-top: 2px; } [data-theme='fresh'] .sv-detail .sv-meter-track { display: block; height: 6px; border-radius: 999px; background: var(--sv-surface-2); overflow: hidden; } [data-theme='fresh'] .sv-detail .sv-meter-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 30%, var(--sv-lime))); } [data-theme='fresh'] .sv-detail .sv-meter-text { font-size: 12px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-meter[data-hot] .sv-meter-text { color: var(--sv-primary-ink); font-weight: 700; } @media (min-width: 640px) { [data-theme='fresh'] .sv-detail .sv-product--flash { grid-template-areas: "icon name" "icon price" "meter meter"; row-gap: 3px; } [data-theme='fresh'] .sv-detail .sv-product--flash .sv-meter { margin-top: 8px; } } [data-theme='fresh'] .sv-detail .sv-product:disabled { cursor: not-allowed; background: var(--sv-surface-2); border-style: dashed; } [data-theme='fresh'] .sv-detail .sv-product:disabled :is(.sv-product-icon, .sv-product-name, .sv-product-prices, .sv-product-off) { opacity: 0.55; filter: grayscale(1); } /* ---------- Contact form ---------- */ [data-theme='fresh'] .sv-detail .sv-form-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } [data-theme='fresh'] .sv-detail .sv-form-grid[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } [data-theme='fresh'] .sv-detail .sv-field { min-width: 0; } [data-theme='fresh'] .sv-detail .sv-label { display: inline-flex; align-items: center; gap: 2px; } [data-theme='fresh'] .sv-detail .sv-required { color: var(--sv-err); font-weight: 800; } [data-theme='fresh'] .sv-detail .sv-select { justify-content: space-between; height: 46px; box-shadow: none; } [data-theme='fresh'] .sv-detail .sv-help-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sv-primary-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--primary) 35%, transparent); text-underline-offset: 3px; } [data-theme='fresh'] .sv-detail .sv-help-btn::after { content: ''; position: absolute; inset: -6px -4px; } [data-theme='fresh'] .sv-detail .sv-help-btn svg { width: 16px; height: 16px; flex-shrink: 0; } [data-theme='fresh'] .sv-detail .sv-step--contact .sv-step-body { gap: 16px; } [data-theme='fresh'] .sv-detail .sv-account-slot:empty { display: none; } [data-theme='fresh'] .sv-detail .sv-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; } [data-theme='fresh'] .sv-detail .sv-account-label { font-weight: 700; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-account-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; } [data-theme='fresh'] .sv-detail .sv-account-chip svg { width: 15px; height: 15px; flex-shrink: 0; } [data-theme='fresh'] .sv-detail .sv-account[data-state='ok'] .sv-account-chip { background: var(--sv-ok-soft); color: var(--sv-ok); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sv-ok) 30%, transparent); } [data-theme='fresh'] .sv-detail .sv-account[data-state='err'] .sv-account-chip { background: var(--sv-err-soft); color: var(--sv-err); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sv-err) 30%, transparent); } [data-theme='fresh'] .sv-detail .sv-account[data-state='busy'] .sv-account-chip { background: var(--sv-surface-2); color: var(--sv-ink-2); font-weight: 700; } [data-theme='fresh'] .sv-detail .sv-account-meta { color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-input-group { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-sm); background: var(--sv-surface); transition: border-color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-detail .sv-input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--sv-mint-pill); } [data-theme='fresh'] .sv-detail .sv-input-prefix { display: grid; place-items: center; padding: 0 12px; border-right: 1px solid var(--sv-line); border-radius: 9px 0 0 9px; background: var(--sv-surface-2); color: var(--sv-ink-2); font-size: 15px; font-weight: 700; } [data-theme='fresh'] .sv-detail .sv-input-group .sv-input { min-width: 0; height: 44px; border: 0; border-radius: 0 9px 9px 0; box-shadow: none; } /* ---------- Voucher ---------- */ [data-theme='fresh'] .sv-detail .sv-voucher-row { display: flex; gap: 8px; } [data-theme='fresh'] .sv-detail .sv-voucher-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } [data-theme='fresh'] .sv-detail .sv-voucher-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; } [data-theme='fresh'] .sv-detail .sv-voucher-btn { flex-shrink: 0; min-height: 46px; padding: 0 18px; } [data-theme='fresh'] .sv-detail .sv-btn:disabled { color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-voucher-btn svg { width: 17px; height: 17px; } [data-theme='fresh'] .sv-detail .sv-tickets-label { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-tickets { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } [data-theme='fresh'] .sv-detail .sv-ticket { --sv-ticket-line: color-mix(in oklab, var(--primary) 45%, var(--sv-line-strong)); position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 0 14px; min-height: 84px; padding-right: 12px; border: 1.5px dashed var(--sv-ticket-line); border-radius: 14px; background: var(--sv-surface); } [data-theme='fresh'] .sv-detail .sv-ticket[data-applied] { background: var(--sv-mint-pill); border-color: var(--primary); border-style: solid; box-shadow: inset 0 0 0 1px var(--primary); } [data-theme='fresh'] .sv-detail .sv-ticket-value { position: relative; align-self: stretch; display: grid; place-content: center; justify-items: center; gap: 2px; border-right: 1.5px dashed var(--sv-ticket-line); background: var(--sv-mint-pill); border-radius: 12px 0 0 12px; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-ticket-value::before, [data-theme='fresh'] .sv-detail .sv-ticket-value::after { content: ''; position: absolute; right: -8px; width: 14px; height: 14px; border-radius: 999px; background: var(--sv-surface); border: 1.5px dashed var(--sv-ticket-line); } [data-theme='fresh'] .sv-detail .sv-ticket-value::before { top: -9px; clip-path: inset(50% 0 0 0); } [data-theme='fresh'] .sv-detail .sv-ticket-value::after { bottom: -9px; clip-path: inset(0 0 50% 0); } [data-theme='fresh'] .sv-detail .sv-ticket-value strong { font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; } [data-theme='fresh'] .sv-detail .sv-ticket-value span { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; } [data-theme='fresh'] .sv-detail .sv-ticket-body { display: grid; gap: 2px; min-width: 0; padding: 12px 0; } [data-theme='fresh'] .sv-detail .sv-ticket-code { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='fresh'] .sv-detail .sv-ticket-meta { font-size: 12px; line-height: 1.4; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-ticket-btn { min-height: 40px; padding: 0 16px; font-size: 14px; } [data-theme='fresh'] .sv-detail .sv-ticket-btn:disabled { color: var(--sv-ink-3); cursor: not-allowed; background: var(--sv-surface-2); } [data-theme='fresh'] .sv-detail .sv-ticket-skeleton { height: 84px; border-radius: 14px; } @media (max-width: 479px) { [data-theme='fresh'] .sv-detail .sv-ticket { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "value body" "value btn"; padding-bottom: 12px; } [data-theme='fresh'] .sv-detail .sv-ticket-value { grid-area: value; margin-bottom: -12px; } [data-theme='fresh'] .sv-detail .sv-ticket-body { grid-area: body; padding-bottom: 8px; } [data-theme='fresh'] .sv-detail .sv-ticket-btn { grid-area: btn; justify-self: start; min-height: 44px; } } /* ---------- Payment ---------- */ [data-theme='fresh'] .sv-detail .sv-pay-empty { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; border: 1px dashed var(--sv-line-strong); background: var(--sv-mint); } [data-theme='fresh'] .sv-detail .sv-pay-empty-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--sv-surface); border: 1px solid var(--sv-line); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-pay-empty-icon svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-detail .sv-pay-empty p { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-pay-empty strong { font-size: 14px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-detail .sv-pay-group-label { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-pay-list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { [data-theme='fresh'] .sv-detail .sv-pay-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } [data-theme='fresh'] .sv-detail .sv-pay-list > li { display: flex; min-width: 0; } [data-theme='fresh'] .sv-detail .sv-pay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo name name" "logo meta total"; position: relative; align-items: center; column-gap: 12px; row-gap: 2px; width: 100%; min-height: 66px; padding: 11px 14px; text-align: left; color: var(--sv-ink); background: var(--sv-surface); border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius); cursor: pointer; } [data-theme='fresh'] .sv-detail .sv-pay:disabled { cursor: not-allowed; background: var(--sv-surface-2); border-color: var(--sv-line); } [data-theme='fresh'] .sv-detail .sv-pay:disabled .sv-pay-logo { opacity: 0.6; filter: grayscale(1); } [data-theme='fresh'] .sv-detail .sv-pay:disabled :is(.sv-pay-name, .sv-pay-total) { color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-pay-radio { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--sv-line-strong); background: var(--sv-surface); transition: border-color .15s, box-shadow .15s, background-color .15s; } [data-theme='fresh'] .sv-detail .sv-pay[aria-pressed='true'] .sv-pay-radio { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px var(--sv-surface); } [data-theme='fresh'] .sv-detail .sv-pay-logo { grid-area: logo; display: grid; place-items: center; width: 58px; height: 38px; padding: 5px 6px; border-radius: 9px; background: #fff; border: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-detail .sv-pay-logo img { width: 100%; height: 100%; object-fit: contain; } [data-theme='fresh'] .sv-detail .sv-pay-logo[data-kind='wallet'] { background: var(--sv-mint-pill); border-color: transparent; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-pay-logo svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-detail .sv-pay-initials { font-size: 12px; font-weight: 800; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-pay-info { display: contents; } [data-theme='fresh'] .sv-detail .sv-pay-name { grid-area: name; min-width: 0; padding-right: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; font-weight: 700; line-height: 1.3; } [data-theme='fresh'] .sv-detail .sv-pay-tag { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 999px; background: var(--sv-signal); color: var(--sv-signal-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; } [data-theme='fresh'] .sv-detail .sv-pay-meta { grid-area: meta; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-pay-meta[data-tone='ok'] { color: var(--sv-ok); font-weight: 600; } [data-theme='fresh'] .sv-detail .sv-pay-meta[data-tone='err'] { color: var(--sv-err); font-weight: 600; } [data-theme='fresh'] .sv-detail .sv-pay-total { grid-area: total; justify-self: end; font-size: 15px; font-weight: 800; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='fresh'] .sv-detail .sv-pay[aria-pressed='true'] .sv-pay-total { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-pay-skeleton { height: 66px; border-radius: var(--sv-radius); } @media (max-width: 400px) { [data-theme='fresh'] .sv-detail .sv-pay { column-gap: 10px; padding: 10px 12px; } [data-theme='fresh'] .sv-detail .sv-pay-logo { width: 46px; height: 32px; padding: 4px; } [data-theme='fresh'] .sv-detail .sv-pay-meta { font-size: 12px; } [data-theme='fresh'] .sv-detail .sv-pay-total { font-size: 14px; } } /* ---------- Order action ---------- */ [data-theme='fresh'] .sv-detail .sv-order { position: relative; display: grid; gap: 14px; padding: 22px; overflow: hidden; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-lg); } [data-theme='fresh'] .sv-detail .sv-order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } [data-theme='fresh'] .sv-detail .sv-order-title { font-size: 17px; font-weight: 800; } [data-theme='fresh'] .sv-detail .sv-order-progress { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sv-surface-2); color: var(--sv-ink-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='fresh'] .sv-detail .sv-order-progress[data-done] { background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-order-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--sv-mint); } [data-theme='fresh'] .sv-detail .sv-order-item-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 6px; border-radius: 11px; background: var(--sv-surface); border: 1px solid var(--sv-line); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-order-item-icon img { width: 100%; height: 100%; object-fit: contain; } [data-theme='fresh'] .sv-detail .sv-order-item-text { display: grid; gap: 2px; min-width: 0; } [data-theme='fresh'] .sv-detail .sv-order-item-name { font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } [data-theme='fresh'] .sv-detail .sv-order-item-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-order-flash { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 999px; background: var(--sv-lime); color: var(--sv-on-lime); font-size: 11px; font-weight: 800; } [data-theme='fresh'] .sv-detail .sv-order-item-price { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='fresh'] .sv-detail .sv-order-empty { padding: 14px; border-radius: 12px; border: 1px dashed var(--sv-line-strong); text-align: center; font-size: 14px; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-order-rows { display: grid; gap: 8px; } [data-theme='fresh'] .sv-detail .sv-order-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.4; } [data-theme='fresh'] .sv-detail .sv-order-row dt { flex-shrink: 0; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-order-row dd { min-width: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; } [data-theme='fresh'] .sv-detail .sv-order-row[data-tone='ok'] dd { color: var(--sv-ok); } [data-theme='fresh'] .sv-detail .sv-order-strong { font-weight: 800; } [data-theme='fresh'] .sv-detail .sv-order-soft { font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-order-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--sv-line-strong); } [data-theme='fresh'] .sv-detail .sv-order-total > span { display: grid; gap: 2px; font-size: 14px; font-weight: 700; } [data-theme='fresh'] .sv-detail .sv-order-total small { font-size: 12px; font-weight: 500; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-detail .sv-order-total strong { font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-order-btn { min-height: 54px; border-radius: 14px; font-size: 16px; } [data-theme='fresh'] .sv-detail .sv-order-btn { flex-wrap: wrap; row-gap: 4px; padding: 8px 16px; } [data-theme='fresh'] .sv-detail .sv-order-btn svg { width: 17px; height: 17px; } [data-theme='fresh'] .sv-detail .sv-order-btn-amount { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--sv-on-primary) 16%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='fresh'] .sv-detail :is(.sv-order-btn, .sv-order-bar-btn):disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); border: 1px dashed var(--sv-line-strong); box-shadow: none; } [data-theme='fresh'] .sv-detail .sv-order-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-order-checklist li { display: inline-flex; align-items: center; gap: 6px; } [data-theme='fresh'] .sv-detail .sv-order-checklist li[data-done] { color: var(--sv-ink); } [data-theme='fresh'] .sv-detail .sv-order-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--sv-line-strong); background: var(--sv-surface); } [data-theme='fresh'] .sv-detail li[data-done] .sv-order-check { border-color: var(--sv-ok); background: var(--sv-ok); color: #fff; } [data-theme='fresh'] .sv-detail .sv-order-check svg { width: 11px; height: 11px; stroke-width: 3.5; } [data-theme='fresh'] .sv-detail .sv-order-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--sv-ink-3); text-align: center; } [data-theme='fresh'] .sv-detail .sv-order-secure svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--sv-ok); } /* Mobile sticky order bar */ [data-theme='fresh'] .sv-detail .sv-order-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px var(--sv-gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--sv-surface) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--sv-line); box-shadow: 0 -14px 32px -22px oklch(0.3 0.05 160 / 0.45); transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; } [data-theme='fresh'] .sv-detail .sv-order-bar[data-visible] { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; } [data-theme='fresh'] .sv-detail .sv-order-bar-info { display: grid; flex: 1; min-width: 0; } [data-theme='fresh'] .sv-detail .sv-order-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-detail .sv-order-bar-total { font-size: 18px; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-detail .sv-order-bar-btn { flex-shrink: 0; min-height: 46px; padding: 0 18px; } @media (min-width: 1024px) { [data-theme='fresh'] .sv-detail .sv-order-bar { display: none; } } /* ---------- Loading skeleton ---------- */ [data-theme='fresh'] .sv-detail--loading .sv-skeleton { border: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-detail--loading .sv-skeleton-banner { aspect-ratio: 3 / 1; margin-top: 20px; border-radius: var(--sv-radius-xl); } [data-theme='fresh'] .sv-detail--loading .sv-skeleton-card { position: relative; height: 104px; margin: -56px 28px 0; border-radius: var(--sv-radius-lg); border: 4px solid var(--sv-bg); } [data-theme='fresh'] .sv-detail--loading .sv-skeleton-guide { height: 380px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-detail--loading .sv-skeleton-step { height: 460px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-detail--loading .sv-skeleton-step--short { height: 240px; } @media (max-width: 639px) { [data-theme='fresh'] .sv-detail--loading .sv-skeleton-banner { aspect-ratio: 2 / 1; margin-top: 12px; border-radius: 16px; } [data-theme='fresh'] .sv-detail--loading .sv-skeleton-card { margin: -36px 10px 0; height: 120px; } } /* ---------- Reviews ---------- */ [data-theme='fresh'] .sv-reviews { display: grid; gap: 18px; padding: 20px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-reviews-kicker { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border-radius: 999px; background: var(--sv-mint-pill); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-reviews-kicker svg { width: 15px; height: 15px; } [data-theme='fresh'] .sv-reviews-title { margin-top: 8px; font-size: 17px; line-height: 1.25; font-weight: 800; } [data-theme='fresh'] .sv-reviews-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px; border-radius: 16px; background: var(--sv-mint); } [data-theme='fresh'] .sv-reviews-score { display: grid; justify-items: center; gap: 5px; padding-right: 16px; border-right: 1px solid var(--sv-line-strong); } [data-theme='fresh'] .sv-reviews-avg { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-reviews-score .sv-stars svg { width: 14px; height: 14px; } [data-theme='fresh'] .sv-reviews-total { font-size: 12px; font-weight: 600; color: var(--sv-ink-2); white-space: nowrap; } [data-theme='fresh'] .sv-reviews-dist { display: grid; gap: 5px; } [data-theme='fresh'] .sv-reviews-dist-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font-size: 12px; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-reviews-dist-star { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-reviews-dist-star svg { width: 11px; height: 11px; fill: var(--sv-star); color: var(--sv-star); } [data-theme='fresh'] .sv-reviews-bar { display: block; height: 6px; border-radius: 999px; background: var(--sv-mint-shape); overflow: hidden; } [data-theme='fresh'] .sv-reviews-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--sv-star); } [data-theme='fresh'] .sv-reviews-dist-count { text-align: right; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-reviews .sv-stars svg[data-empty] { fill: none; color: var(--sv-line-strong); } [data-theme='fresh'] .sv-review-list { display: grid; } [data-theme='fresh'] .sv-review { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-review:first-child { padding-top: 0; border-top: 0; } [data-theme='fresh'] .sv-review:last-child { padding-bottom: 0; } [data-theme='fresh'] .sv-review-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; } [data-theme='fresh'] .sv-review-head .sv-stars svg { width: 13px; height: 13px; } /* Avatars: one family (mint, pale lime, deep stage, primary tint). */ [data-theme='fresh'] .sv-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 14px; font-weight: 800; } [data-theme='fresh'] .sv-avatar[data-tone='1'] { background: var(--sv-lime-soft); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-avatar[data-tone='2'] { background: var(--sv-stage); color: var(--sv-on-stage); } [data-theme='fresh'] .sv-avatar[data-tone='3'] { background: var(--sv-primary-tint); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-review-who { display: grid; min-width: 0; } [data-theme='fresh'] .sv-review-name { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme='fresh'] .sv-review-date { font-size: 12px; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-review-text { font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-review-product { justify-self: start; height: 24px; font-size: 12px; } [data-theme='fresh'] .sv-reviews-more { min-height: 44px; font-size: 14px; } /* ---------- Dialogs (rendered in a portal that carries data-theme) ---------- */ [data-theme='fresh'].sv-dialog { display: grid; gap: 16px; width: 100%; max-width: min(440px, calc(100% - 32px)); padding: 22px; background: var(--sv-surface); color: var(--sv-ink); border: 1px solid var(--sv-line); border-radius: 22px; box-shadow: 0 30px 60px -30px oklch(0.2 0.05 160 / 0.5); } [data-theme='fresh'] .sv-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } [data-theme='fresh'] .sv-dialog-title { font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-dialog-text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-dialog-close { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink-2); cursor: pointer; transition: border-color .15s, color .15s; } [data-theme='fresh'] .sv-dialog-close:hover { border-color: var(--sv-line-strong); color: var(--sv-ink); } [data-theme='fresh'] .sv-dialog-close svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-dialog-rows { display: grid; border: 1px solid var(--sv-line); border-radius: 14px; overflow: hidden; } [data-theme='fresh'] .sv-dialog-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 14px; line-height: 1.4; } [data-theme='fresh'] .sv-dialog-row + .sv-dialog-row { border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-dialog-row dt { flex-shrink: 0; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-dialog-row dd { min-width: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; } [data-theme='fresh'] .sv-dialog-row[data-tone='ok'] dd { color: var(--sv-ok); } [data-theme='fresh'] .sv-dialog-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sv-mint-pill); } [data-theme='fresh'] .sv-dialog-total span { font-size: 14px; font-weight: 700; } [data-theme='fresh'] .sv-dialog-total strong { font-size: 21px; font-weight: 800; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; } [data-theme='fresh'] .sv-dialog-image { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--sv-line); } /* Mobile rhythm: tighter stack so step 1 sits right under the hero. */ @media (max-width: 1023px) { [data-theme='fresh'] .sv-detail-main { margin-top: 16px; } [data-theme='fresh'] .sv-detail-layout, [data-theme='fresh'] .sv-detail-form { gap: 16px; } [data-theme='fresh'] .sv-detail-anchor { scroll-margin-top: calc(var(--sv-header-h, 56px) + 16px); } } @media (max-width: 639px) { [data-theme='fresh'] .sv-guide { gap: 14px; padding: 16px; } /* Room for the "N langkah" toggle: drop the decorative icon on phones. */ [data-theme='fresh'] .sv-guide-icon { display: none; } [data-theme='fresh'] .sv-guide-step { font-size: 15px; } [data-theme='fresh'] .sv-review-text { font-size: 15px; } [data-theme='fresh'] .sv-reviews { padding: 16px; } [data-theme='fresh'] .sv-detail .sv-alert-btn { min-height: 44px; } [data-theme='fresh'] .sv-detail .sv-order { padding: 18px 16px; } } /* ───────── Rank tier palettes ───────── */ [data-theme='fresh'] [data-rank='epic'] { --sv-rank-a: oklch(0.82 0.12 172); --sv-rank-b: oklch(0.52 0.11 190); --sv-rank-deep: oklch(0.3 0.06 200); --sv-rank-orn: oklch(0.9 0.07 170); --sv-rank-mark: oklch(0.99 0.02 170); --sv-rank-ink: oklch(0.42 0.09 190); } [data-theme='fresh'] [data-rank='legend'] { --sv-rank-a: oklch(0.89 0.14 90); --sv-rank-b: oklch(0.64 0.15 60); --sv-rank-deep: oklch(0.33 0.08 50); --sv-rank-orn: oklch(0.93 0.1 92); --sv-rank-mark: oklch(0.99 0.03 90); --sv-rank-ink: oklch(0.5 0.12 60); } [data-theme='fresh'] [data-rank='mythic'] { --sv-rank-a: oklch(0.78 0.14 305); --sv-rank-b: oklch(0.48 0.2 292); --sv-rank-deep: oklch(0.28 0.12 290); --sv-rank-orn: oklch(0.87 0.09 310); --sv-rank-mark: oklch(0.99 0.02 300); --sv-rank-ink: oklch(0.45 0.18 292); } [data-theme='fresh'] [data-rank='honor'] { --sv-rank-a: oklch(0.74 0.13 262); --sv-rank-b: oklch(0.45 0.17 268); --sv-rank-deep: oklch(0.27 0.1 268); --sv-rank-orn: oklch(0.87 0.13 85); --sv-rank-mark: oklch(0.97 0.05 90); --sv-rank-ink: oklch(0.43 0.16 268); } [data-theme='fresh'] [data-rank='glory'] { --sv-rank-a: oklch(0.82 0.15 62); --sv-rank-b: oklch(0.54 0.2 30); --sv-rank-deep: oklch(0.3 0.11 28); --sv-rank-orn: oklch(0.9 0.14 90); --sv-rank-mark: oklch(0.99 0.04 85); --sv-rank-ink: oklch(0.5 0.18 32); } /* Rank emblem */ [data-theme='fresh'] .sv-rank { display: block; flex-shrink: 0; overflow: visible; filter: drop-shadow(0 3px 6px color-mix(in oklab, var(--sv-rank-b) 40%, transparent)); } [data-theme='fresh'] .sv-rank-stop-a { stop-color: var(--sv-rank-a); } [data-theme='fresh'] .sv-rank-stop-b { stop-color: var(--sv-rank-b); } [data-theme='fresh'] .sv-rank-stop-shine { stop-color: #fff; stop-opacity: 0.5; } [data-theme='fresh'] .sv-rank-stop-clear { stop-color: #fff; stop-opacity: 0; } [data-theme='fresh'] .sv-rank-shield { stroke: var(--sv-rank-orn); stroke-width: 1.8; stroke-linejoin: round; } [data-theme='fresh'] .sv-rank-inner { fill: none; stroke: color-mix(in oklab, var(--sv-rank-mark) 50%, transparent); stroke-width: 1; } [data-theme='fresh'] .sv-rank-mark { fill: var(--sv-rank-mark); } [data-theme='fresh'] .sv-rank-orn path, [data-theme='fresh'] .sv-rank-crest { fill: var(--sv-rank-orn); stroke: var(--sv-rank-b); stroke-width: 0.9; stroke-linejoin: round; } [data-theme='fresh'] .sv-rank-pips circle { fill: var(--sv-rank-mark); opacity: 0.9; } /* ───────── Page shell (supporting pages) ───────── */ [data-theme='fresh'] .sv-page { padding-block: clamp(14px, 2.5vw, 24px) clamp(56px, 8vw, 96px); } [data-theme='fresh'] .sv-page-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 13px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-page-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } [data-theme='fresh'] .sv-page-crumbs a { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; color: var(--sv-ink-2); border-radius: 6px; transition: color .15s; } [data-theme='fresh'] .sv-page-crumbs a:hover { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-page-crumbs a::after { content: ''; position: absolute; inset: -6px -4px; } [data-theme='fresh'] .sv-page-crumbs [aria-current='page'] { color: var(--sv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(46ch, 62vw); } [data-theme='fresh'] .sv-page-crumbs-sep { width: 14px; height: 14px; flex-shrink: 0; } [data-theme='fresh'] .sv-page-head { margin: 14px 0 24px; max-width: 760px; } [data-theme='fresh'] .sv-page-title { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--sv-ink); text-wrap: balance; } [data-theme='fresh'] .sv-page-sub { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--sv-ink-2); max-width: 62ch; } [data-theme='fresh'] .sv-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; } [data-theme='fresh'] .sv-page-filters { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; } [data-theme='fresh'] .sv-page-filters::-webkit-scrollbar { display: none; } [data-theme='fresh'] .sv-page-filter { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 44px; padding: 0 8px 0 16px; border-radius: 999px; border: 1px solid var(--sv-line-strong); background: var(--sv-surface); font-size: 14px; font-weight: 700; color: var(--sv-ink-2); white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } [data-theme='fresh'] .sv-page-filter:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-page-filter[aria-pressed='true'] { background: var(--sv-mint-pill); border-color: var(--primary); color: var(--sv-primary-ink); box-shadow: inset 0 0 0 1px var(--primary); } [data-theme='fresh'] .sv-page-filter-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--sv-surface-2); font-size: 12px; font-weight: 800; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-page-filter[aria-pressed='true'] .sv-page-filter-count { background: var(--primary); color: var(--sv-on-primary); } [data-theme='fresh'] .sv-page-count { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--sv-ink-3); } /* ───────── Article card ───────── */ [data-theme='fresh'] .sv-article-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-theme='fresh'] .sv-article-card { min-width: 0; } [data-theme='fresh'] .sv-article-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow); overflow: hidden; } [data-theme='fresh'] .sv-article-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sv-surface-2); } [data-theme='fresh'] .sv-article-card-img { object-fit: cover; } [data-theme='fresh'] .sv-article-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; } [data-theme='fresh'] .sv-article-card-tags { display: flex; align-items: center; gap: 8px; min-width: 0; } [data-theme='fresh'] .sv-article-card-game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-article-card-title { font-size: 17px; line-height: 1.35; font-weight: 800; color: var(--sv-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='fresh'] .sv-article-card-excerpt { font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='fresh'] .sv-article-card-meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); } /* Featured (lead story on the list page) */ [data-theme='fresh'] .sv-article-featured { margin-bottom: 20px; } [data-theme='fresh'] .sv-article-card[data-layout='featured'] .sv-article-card-link { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } [data-theme='fresh'] .sv-article-card[data-layout='featured'] .sv-article-card-media { aspect-ratio: 16 / 9; align-self: stretch; } [data-theme='fresh'] .sv-article-card[data-layout='featured'] .sv-article-card-body { justify-content: center; gap: 14px; padding: clamp(22px, 3.2vw, 40px); } [data-theme='fresh'] .sv-article-card[data-layout='featured'] .sv-article-card-title { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; letter-spacing: -0.02em; -webkit-line-clamp: 3; } [data-theme='fresh'] .sv-article-card[data-layout='featured'] .sv-article-card-excerpt { font-size: 15.5px; -webkit-line-clamp: 3; } [data-theme='fresh'] .sv-article-card[data-layout='featured'] .sv-article-card-meta { margin-top: 6px; } /* ───────── Joki card (mockup F + owner tweak) ───────── Rank-tinted art with the RankEmblem on the art/body seam (inside the card), then a clear type rhythm: meta 12.5 → title 19 (8px) → summary 14.5/1.6, 2 lines (8px) → estimate chip (14px) → price row pinned to the bottom (equal heights). */ [data-theme='fresh'] .sv-joki-card { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow); overflow: hidden; } [data-theme='fresh'] .sv-joki-card-media { position: relative; flex-shrink: 0; aspect-ratio: 2 / 1; background: var(--sv-rank-deep); isolation: isolate; } [data-theme='fresh'] .sv-joki-card-img { z-index: -2; object-fit: cover; object-position: center 30%; } [data-theme='fresh'] .sv-joki-card-media::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, color-mix(in oklab, var(--sv-rank-deep) 72%, transparent) 76%, color-mix(in oklab, var(--sv-rank-deep) 94%, transparent) 100%), linear-gradient(110deg, color-mix(in oklab, var(--sv-rank-b) 55%, transparent) 0%, transparent 55%); } [data-theme='fresh'] .sv-joki-card-media .sv-joki-kind { position: absolute; top: 12px; left: 12px; height: 25px; padding: 0 10px; background: #fff; color: var(--sv-ink); border-color: transparent; font-size: 12.5px; } [data-theme='fresh'] .sv-joki-card-media .sv-joki-kind svg { display: none; } [data-theme='fresh'] .sv-joki-card-discount { position: absolute; top: 12px; right: 12px; height: 25px; padding: 0 10px; font-size: 12.5px; } [data-theme='fresh'] .sv-joki-card-emblem { position: absolute; left: 16px; bottom: -28px; width: 60px; height: 60px; z-index: 2; filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.28)); } [data-theme='fresh'] .sv-joki-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 40px 20px 0; } [data-theme='fresh'] .sv-joki-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.2; font-weight: 700; letter-spacing: 0.01em; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-card-tier { color: var(--sv-rank-ink); } [data-theme='fresh'] .sv-joki-card-title { margin-top: 8px; font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-card-summary { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--sv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='fresh'] .sv-joki-card-estimate { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 10px; border-radius: 999px; background: var(--sv-surface-2); font-size: 12.5px; font-weight: 600; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-card-estimate svg { width: 14px; height: 14px; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 18px 20px 0; padding: 16px 0 20px; border-top: 1px dashed var(--sv-line-strong); } [data-theme='fresh'] .sv-joki-card-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 1px; min-width: 0; } [data-theme='fresh'] .sv-joki-card-from { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-card-price strong { font-size: 20px; font-weight: 800; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } [data-theme='fresh'] .sv-joki-card-unit { font-size: 12.5px; font-weight: 500; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-card-before { font-size: 12.5px; font-weight: 500; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-joki-card-go { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 8px 16px -10px var(--primary); } [data-theme='fresh'] .sv-joki-card-go svg { width: 18px; height: 18px; } /* Kind chip (Eceran / Paketan / Mabar) outside the card art: calm mint pill. */ [data-theme='fresh'] .sv-joki-kind { background: var(--sv-mint-pill); color: var(--sv-primary-ink); border-color: transparent; } /* Section rail + list grid */ [data-theme='fresh'] .sv-joki-rail, [data-theme='fresh'] .sv-joki-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-theme='fresh'] .sv-joki-rail > li, [data-theme='fresh'] .sv-joki-grid > li { display: flex; min-width: 0; } [data-theme='fresh'] .sv-joki-rail > li > *, [data-theme='fresh'] .sv-joki-grid > li > * { flex: 1; min-width: 0; } /* ───────── Joki list page ───────── */ [data-theme='fresh'] .sv-joki-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: clamp(32px, 4.5vw, 48px); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow); } [data-theme='fresh'] .sv-joki-flow-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 18px 44px 18px 18px; } [data-theme='fresh'] .sv-joki-flow-item + .sv-joki-flow-item { border-left: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-joki-flow-num { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 13px; font-weight: 800; } [data-theme='fresh'] .sv-joki-flow-icon { position: absolute; top: 20px; right: 16px; width: 18px; height: 18px; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-joki-flow-title { padding-top: 4px; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-flow-text { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-trust { position: relative; isolation: isolate; overflow: hidden; padding: 26px; border-radius: var(--sv-radius-xl); background: var(--sv-mint); --sv-notch-bg: var(--sv-mint); } [data-theme='fresh'] .sv-joki-trust::after { content: ''; position: absolute; z-index: -1; right: -70px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: var(--sv-mint-shape); opacity: 0.85; pointer-events: none; } [data-theme='fresh'] .sv-joki-trust::before { content: ''; position: absolute; z-index: -1; left: -46px; bottom: -64px; width: 170px; height: 170px; border-radius: 44px; background: var(--sv-panel-square); opacity: 0.75; transform: rotate(18deg); pointer-events: none; } @media (max-width: 760px) { [data-theme='fresh'] .sv-joki-trust { padding: 20px 16px; border-radius: 24px; } [data-theme='fresh'] .sv-joki-trust::after { right: -90px; top: -96px; width: 210px; height: 210px; } [data-theme='fresh'] .sv-joki-trust::before { left: -60px; bottom: -74px; width: 150px; height: 150px; border-radius: 40px; } } [data-theme='fresh'] .sv-joki-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 64px); } [data-theme='fresh'] .sv-joki-trust-item { display: flex; gap: 14px; padding: 18px; border-radius: var(--sv-radius); background: var(--sv-surface); box-shadow: var(--sv-shadow); } [data-theme='fresh'] .sv-joki-trust-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-joki-trust-icon svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-joki-trust-title { font-size: 14.5px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-trust-text { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--sv-ink-2); } /* Joki list: the page head sits on a deep stage (title, sub and kicker read on dark). */ [data-theme='fresh'] .sv-joki-list > .sv-page-head { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), radial-gradient(40% 70% at 0% 100%, var(--sv-lime-glow), transparent 70%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-joki-list > .sv-page-head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.2; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-joki-list > .sv-page-head .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-joki-list > .sv-page-head .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-joki-list > .sv-page-head .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-joki-list > .sv-page-head .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-joki-list > .sv-page-head .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-joki-list > .sv-page-head { max-width: none; margin-bottom: 20px; padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3.4vw, 40px); border-radius: 32px; } [data-theme='fresh'] .sv-joki-list > .sv-page-head .sv-page-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-joki-list > .sv-page-head .sv-page-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-joki-list > .sv-page-head .sv-section-kicker { margin-bottom: 14px; } /* ───────── Joki detail: hero ───────── width: 100% keeps min-height from widening the banner through aspect-ratio (overflowed 768-959px). */ /* The hero is a deep stage: rank-tinted art frame inside, white info card overlapping it. */ [data-theme='fresh'] .sv-joki-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), radial-gradient(40% 70% at 0% 100%, var(--sv-lime-glow), transparent 70%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-joki-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.2; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-joki-hero .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-joki-hero .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-joki-hero .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-joki-hero .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-joki-hero .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-joki-hero { margin-top: 12px; padding: 20px; border-radius: var(--sv-radius-xl); } [data-theme='fresh'] .sv-joki-hero-banner { position: relative; width: 100%; aspect-ratio: 4 / 1; min-height: 220px; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--sv-rank-deep); box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.9); } [data-theme='fresh'] .sv-joki-hero-backdrop { z-index: -3; object-fit: cover; filter: blur(26px) saturate(1.25); transform: scale(1.25); opacity: 0.85; } [data-theme='fresh'] .sv-joki-hero-banner::after { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 110% at 84% 34%, color-mix(in oklab, var(--sv-rank-a) 55%, transparent), transparent 70%), linear-gradient(100deg, color-mix(in oklab, var(--sv-rank-deep) 94%, transparent) 0%, color-mix(in oklab, var(--sv-rank-deep) 62%, transparent) 52%, color-mix(in oklab, var(--sv-rank-b) 40%, transparent) 100%); } [data-theme='fresh'] .sv-joki-hero-emblem { position: absolute; right: clamp(24px, 9%, 120px); top: 9%; width: clamp(96px, 13vw, 164px); height: auto; filter: drop-shadow(0 20px 30px rgb(0 0 0 / 0.38)); } [data-theme='fresh'] .sv-joki-hero-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin: -84px clamp(12px, 2.5vw, 28px) 0; padding: 22px 26px; background: var(--sv-surface); color: var(--sv-ink); border-radius: var(--sv-radius-lg); box-shadow: 0 24px 44px -26px rgb(0 0 0 / 0.55); } [data-theme='fresh'] .sv-joki-hero-art { width: 88px; height: 88px; flex-shrink: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--sv-line), var(--sv-shadow); background: var(--sv-surface-2); } [data-theme='fresh'] .sv-joki-hero-art img { width: 100%; height: 100%; object-fit: cover; } [data-theme='fresh'] .sv-joki-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 700; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-hero-tier { display: inline-flex; align-items: center; gap: 5px; color: var(--sv-rank-ink); } [data-theme='fresh'] .sv-joki-hero-title { margin-top: 4px; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-hero-summary { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } [data-theme='fresh'] .sv-joki-hero-price { display: grid; justify-items: end; align-content: center; gap: 2px; padding-left: 22px; border-left: 1px dashed var(--sv-line-strong); text-align: right; white-space: nowrap; } [data-theme='fresh'] .sv-joki-hero-price-label { font-size: 12px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-joki-hero-price strong { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } [data-theme='fresh'] .sv-joki-hero-price-unit { font-size: 13px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-hero-price-before { font-size: 13px; font-weight: 600; color: var(--sv-ink-3); } /* ───────── Joki detail: layout + side cards ───────── */ [data-theme='fresh'] .sv-joki-layout { display: grid; gap: 20px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "guide" "form" "terms"; } [data-theme='fresh'] .sv-joki-guide { grid-area: guide; padding: 20px 22px; } [data-theme='fresh'] .sv-joki-terms { grid-area: terms; display: grid; gap: 16px; align-content: start; } [data-theme='fresh'] .sv-joki-form { grid-area: form; display: grid; gap: 20px; min-width: 0; align-content: start; } [data-theme='fresh'] .sv-joki-side-title { margin-bottom: 14px; font-size: 16px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } [data-theme='fresh'] .sv-joki-guide-head .sv-joki-side-title { margin-bottom: 0; } [data-theme='fresh'] .sv-joki-guide-list { margin-top: 14px; } [data-theme='fresh'] .sv-joki-guide-list li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; } [data-theme='fresh'] .sv-joki-guide-list li:last-child { padding-bottom: 0; } [data-theme='fresh'] .sv-joki-guide-list li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: repeating-linear-gradient(to bottom, var(--sv-line-strong) 0 4px, transparent 4px 8px); } [data-theme='fresh'] .sv-joki-guide-num { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 13px; font-weight: 800; } [data-theme='fresh'] .sv-joki-guide-title { padding-top: 4px; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-guide-text { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-rules { padding: 20px 22px; } [data-theme='fresh'] .sv-joki-rules-list { display: grid; gap: 11px; } [data-theme='fresh'] .sv-joki-rules-list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-rules-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--primary); } [data-theme='fresh'] .sv-joki-security { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--sv-radius-lg); background: var(--sv-mint); } [data-theme='fresh'] .sv-joki-security-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--sv-surface); color: var(--sv-primary-ink); box-shadow: var(--sv-shadow); } [data-theme='fresh'] .sv-joki-security-icon svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-joki-security-title { font-size: 14.5px; font-weight: 800; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-joki-security-text { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--sv-ink-2); } /* ───────── Joki detail: form ───────── */ [data-theme='fresh'] .sv-joki-page .sv-step { scroll-margin-top: 96px; } [data-theme='fresh'] .sv-joki-page .sv-step[data-invalid='true'] { border-color: var(--sv-err); box-shadow: 0 0 0 4px var(--sv-err-soft); } [data-theme='fresh'] .sv-joki-page .sv-step:focus-visible { outline: 3px solid color-mix(in oklab, var(--primary) 55%, white); outline-offset: 2px; } [data-theme='fresh'] .sv-joki-page .sv-input[aria-invalid='true'] { border-color: var(--sv-err); box-shadow: 0 0 0 4px var(--sv-err-soft); } [data-theme='fresh'] .sv-joki-fields { display: grid; gap: 16px; } [data-theme='fresh'] .sv-joki-row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='fresh'] .sv-joki-optional { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-joki-textarea { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: vertical; } [data-theme='fresh'] .sv-joki-segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 13px; background: var(--sv-surface-2); border: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-joki-segment { min-height: 40px; padding: 0 6px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-joki-segment:hover { color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-segment[aria-pressed='true'] { background: var(--sv-mint-pill); color: var(--sv-primary-ink); box-shadow: inset 0 0 0 1.5px var(--primary); } [data-theme='fresh'] .sv-joki-password { position: relative; } [data-theme='fresh'] .sv-joki-password .sv-input { padding-right: 52px; } [data-theme='fresh'] .sv-joki-reveal { position: absolute; top: 50%; right: 1px; display: grid; place-items: center; width: 44px; height: 44px; transform: translateY(-50%); border-radius: 9px; color: var(--sv-ink-2); cursor: pointer; transition: color .15s; } [data-theme='fresh'] .sv-joki-reveal:hover, [data-theme='fresh'] .sv-joki-reveal[aria-pressed='true'] { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-joki-reveal svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-joki-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; } [data-theme='fresh'] .sv-joki-callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } [data-theme='fresh'] .sv-joki-callout strong { font-weight: 800; } [data-theme='fresh'] .sv-joki-callout[data-tone='warn'] { background: var(--sv-surface); color: var(--sv-ink-2); border: 1px solid var(--sv-line-strong); } [data-theme='fresh'] .sv-joki-callout[data-tone='warn'] :is(svg, strong) { color: oklch(0.42 0.09 65); } [data-theme='fresh'] .sv-joki-callout[data-tone='info'] { background: var(--sv-mint); color: var(--sv-primary-ink); border: 1px solid var(--sv-primary-tint); } /* Option groups */ [data-theme='fresh'] .sv-joki-group + .sv-joki-group { margin-top: 22px; } [data-theme='fresh'] .sv-joki-group-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-joki-group-label::after { content: ''; flex: 1; height: 1px; background: var(--sv-line); } [data-theme='fresh'] .sv-joki-options { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='fresh'] .sv-joki-option { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 74px; padding: 12px 14px 12px 12px; border-radius: var(--sv-radius); border: 1px solid var(--sv-line-strong); background: var(--sv-surface); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-joki-option-emblem { width: 44px; height: 44px; } [data-theme='fresh'] .sv-joki-option-text { min-width: 0; } [data-theme='fresh'] .sv-joki-option-title { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-option-sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--sv-rank-ink); } [data-theme='fresh'] .sv-joki-option-price { display: grid; justify-items: end; gap: 4px; text-align: right; } [data-theme='fresh'] .sv-joki-option-price strong { font-size: 15px; font-weight: 800; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-joki-option[aria-pressed='true'] .sv-joki-option-price strong { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-joki-option-before { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sv-ink-3); white-space: nowrap; } [data-theme='fresh'] .sv-joki-off { padding: 2px 7px; border-radius: 999px; background: var(--sv-lime); color: var(--sv-on-lime); font-size: 11px; font-weight: 800; } [data-theme='fresh'] .sv-joki-option-check { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 0 0 3px var(--sv-surface); opacity: 0; transform: scale(0.6); transition: opacity .15s, transform .15s; } [data-theme='fresh'] .sv-joki-option-check svg { width: 13px; height: 13px; stroke-width: 3; } [data-theme='fresh'] .sv-joki-option[aria-pressed='true'] .sv-joki-option-check { opacity: 1; transform: scale(1); } /* Quantity */ [data-theme='fresh'] .sv-joki-qty { display: grid; gap: 14px; } [data-theme='fresh'] .sv-joki-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } [data-theme='fresh'] .sv-joki-stepper { display: inline-flex; align-items: center; border: 1px solid var(--sv-line-strong); border-radius: 12px; background: var(--sv-surface); overflow: hidden; } [data-theme='fresh'] .sv-joki-stepper button { display: grid; place-items: center; width: 46px; height: 46px; color: var(--sv-ink); cursor: pointer; transition: background-color .15s, color .15s; } [data-theme='fresh'] .sv-joki-stepper button svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-joki-stepper button:hover:not(:disabled) { background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-joki-stepper button:disabled { color: var(--sv-ink-3); opacity: 0.45; cursor: not-allowed; } [data-theme='fresh'] .sv-joki-stepper input { width: 64px; height: 46px; border: 0; border-inline: 1px solid var(--sv-line); background: transparent; text-align: center; font-size: 17px; font-weight: 800; color: var(--sv-ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } [data-theme='fresh'] .sv-joki-stepper input::-webkit-inner-spin-button, [data-theme='fresh'] .sv-joki-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } [data-theme='fresh'] .sv-joki-qty-unit { font-size: 14px; font-weight: 700; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-qty-subtotal { margin-left: auto; font-size: 18px; font-weight: 800; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-joki-quick { display: flex; flex-wrap: wrap; gap: 8px; } [data-theme='fresh'] .sv-joki-quick-btn { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px dashed var(--sv-line-strong); background: var(--sv-surface); font-size: 13px; font-weight: 700; color: var(--sv-ink-2); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; } [data-theme='fresh'] .sv-joki-quick-btn:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-joki-quick-btn[aria-pressed='true'] { border-style: solid; border-color: var(--primary); background: var(--sv-mint-pill); color: var(--sv-primary-ink); box-shadow: inset 0 0 0 1px var(--primary); } [data-theme='fresh'] .sv-joki-qty-fixed { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sv-mint); font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-qty-fixed svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--sv-primary-ink); } /* Payment */ [data-theme='fresh'] .sv-joki-pay-list { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='fresh'] .sv-joki-pay { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: var(--sv-radius); border: 1px solid var(--sv-line-strong); background: var(--sv-surface); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-joki-pay:disabled { cursor: not-allowed; background: var(--sv-surface-2); border-style: dashed; } [data-theme='fresh'] .sv-joki-pay:disabled .sv-joki-pay-logo { opacity: 0.55; filter: grayscale(1); } [data-theme='fresh'] .sv-joki-pay-logo { display: grid; place-items: center; width: 56px; height: 40px; border-radius: 9px; background: #fff; border: 1px solid var(--sv-line); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-joki-pay-logo svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-joki-pay-img { width: 44px; height: 28px; object-fit: contain; } [data-theme='fresh'] .sv-joki-pay-text { min-width: 0; } [data-theme='fresh'] .sv-joki-pay-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-pay-fee { display: block; margin-top: 2px; font-size: 12px; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-joki-pay:disabled .sv-joki-pay-fee { color: var(--sv-ink-2); font-weight: 600; } [data-theme='fresh'] .sv-joki-pay-total { font-size: 14px; font-weight: 800; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-joki-pay[aria-pressed='true'] .sv-joki-pay-total { color: var(--sv-primary-ink); } /* Contact */ [data-theme='fresh'] .sv-joki-phone { display: flex; align-items: stretch; } [data-theme='fresh'] .sv-joki-phone-prefix { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--sv-line-strong); border-right: 0; border-radius: var(--sv-radius-sm) 0 0 var(--sv-radius-sm); background: var(--sv-surface-2); font-size: 15px; font-weight: 700; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-phone .sv-input { border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0; } /* Summary */ [data-theme='fresh'] .sv-joki-summary { padding: 22px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-joki-summary-title { margin-bottom: 8px; font-size: 16px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-summary-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--sv-line); font-size: 14px; } [data-theme='fresh'] .sv-joki-summary-list dt { flex-shrink: 0; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-summary-list dd { min-width: 0; text-align: right; font-weight: 700; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-summary-option { display: inline-flex; align-items: center; gap: 6px; } [data-theme='fresh'] .sv-joki-summary-empty { font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-joki-summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; } [data-theme='fresh'] .sv-joki-summary-total span { font-size: 14px; font-weight: 700; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-summary-pending { font-size: 14px; font-weight: 700; color: var(--sv-ink-3); letter-spacing: 0; } [data-theme='fresh'] .sv-joki-summary-total strong { font-size: 26px; font-weight: 800; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } [data-theme='fresh'] .sv-joki-summary-missing { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--sv-err-soft); color: color-mix(in oklab, var(--sv-err) 80%, black); font-size: 13px; font-weight: 600; line-height: 1.5; } [data-theme='fresh'] .sv-joki-submit { min-height: 52px; font-size: 16px; } [data-theme='fresh'] .sv-joki-summary-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-joki-summary-note svg { width: 13px; height: 13px; } /* Mobile sticky total bar */ [data-theme='fresh'] .sv-joki-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px var(--sv-gutter) calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--sv-line); box-shadow: 0 -12px 30px -20px oklch(0.3 0.05 160 / 0.4); transition: transform .25s ease, visibility .25s; } [data-theme='fresh'] .sv-joki-bar[data-hidden='true'] { transform: translateY(110%); visibility: hidden; } [data-theme='fresh'] .sv-joki-bar-total { display: grid; flex: 1; min-width: 0; } [data-theme='fresh'] .sv-joki-bar-total span { font-size: 12px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-bar-total strong { font-size: 18px; font-weight: 800; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-joki-bar .sv-btn { flex-shrink: 0; padding: 0 24px; } /* "Sebelum order joki" dialog (portaled; carries data-theme itself) */ .sv-joki-dialog[data-theme='fresh'] { max-width: min(480px, calc(100% - 24px)); padding: 0; gap: 0; border-radius: var(--sv-radius-lg); border: 1px solid var(--sv-line); background: var(--sv-surface); box-shadow: var(--sv-shadow-lg); overflow: hidden; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-dialog-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 22px 22px 16px; } [data-theme='fresh'] .sv-joki-dialog-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-joki-dialog-icon svg { width: 22px; height: 22px; } [data-theme='fresh'] .sv-joki-dialog-title { font-size: 18px; line-height: 1.25; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-dialog-desc { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-dialog-close { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px 0 0; border-radius: 10px; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s; } [data-theme='fresh'] .sv-joki-dialog-close:hover { background: var(--sv-surface-2); color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-dialog-close svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-joki-checklist { display: grid; gap: 8px; padding: 0 22px; } [data-theme='fresh'] .sv-joki-check { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sv-line); background: var(--sv-surface); cursor: pointer; transition: border-color .15s, background-color .15s; } [data-theme='fresh'] .sv-joki-check:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--sv-line)); } [data-theme='fresh'] .sv-joki-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } [data-theme='fresh'] .sv-joki-check:has(input:focus-visible) { outline: 3px solid color-mix(in oklab, var(--primary) 55%, white); outline-offset: 2px; } [data-theme='fresh'] .sv-joki-check-box { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--sv-line-strong); background: var(--sv-surface); color: transparent; transition: background-color .15s, border-color .15s, color .15s; } [data-theme='fresh'] .sv-joki-check-box svg { width: 14px; height: 14px; stroke-width: 3; } [data-theme='fresh'] .sv-joki-check-text { font-size: 14px; line-height: 1.5; color: var(--sv-ink); } [data-theme='fresh'] .sv-joki-check[data-checked='true'] { border-color: var(--primary); background: var(--sv-mint-pill); box-shadow: inset 0 0 0 1px var(--primary); } [data-theme='fresh'] .sv-joki-check[data-checked='true'] .sv-joki-check-box { background: var(--primary); border-color: var(--primary); color: var(--sv-on-primary); } [data-theme='fresh'] .sv-joki-dialog-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 22px 0; padding: 12px 14px; border-radius: 12px; background: var(--sv-mint); font-size: 13px; line-height: 1.45; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-joki-dialog-summary strong { flex-shrink: 0; font-size: 16px; font-weight: 800; color: var(--sv-ink); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-joki-dialog-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 16px 22px 22px; } [data-theme='fresh'] .sv-joki-dialog-actions .sv-btn--primary:disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); border: 1px dashed var(--sv-line-strong); box-shadow: none; } /* ───────── Article detail ───────── */ [data-theme='fresh'] .sv-article { margin-top: 18px; } /* One reading column: breadcrumb, header, image, body and footer share the same left/right edges. */ [data-theme='fresh'] .sv-article-page { --sv-article-w: 720px; } [data-theme='fresh'] .sv-article-page > .sv-page-crumbs, [data-theme='fresh'] .sv-article-head, [data-theme='fresh'] .sv-article-figure, [data-theme='fresh'] .sv-article-body, [data-theme='fresh'] .sv-article-foot { box-sizing: border-box; width: 100%; max-width: var(--sv-article-w); margin-inline: auto; } [data-theme='fresh'] .sv-article-head, [data-theme='fresh'] .sv-article-body, [data-theme='fresh'] .sv-article-foot { font-size: 17px; } [data-theme='fresh'] .sv-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } [data-theme='fresh'] .sv-article-cat { position: relative; min-height: 30px; transition: background-color .15s; } [data-theme='fresh'] .sv-article-cat::after { content: ''; position: absolute; inset: -7px -2px; } [data-theme='fresh'] .sv-article-cat:hover { box-shadow: 0 0 0 2px var(--primary); } [data-theme='fresh'] .sv-article-game { font-size: 13px; font-weight: 700; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-article-title { margin-top: 14px; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: var(--sv-ink); text-wrap: balance; } [data-theme='fresh'] .sv-article-lead { margin-top: 14px; font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sv-line); font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-article-author { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--sv-ink); } [data-theme='fresh'] .sv-article-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--sv-stage); color: var(--sv-on-stage); font-size: 12px; font-weight: 800; } [data-theme='fresh'] .sv-article-meta-item { display: inline-flex; align-items: center; gap: 6px; } [data-theme='fresh'] .sv-article-meta-item svg { width: 15px; height: 15px; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-article-figure { position: relative; aspect-ratio: 16 / 9; margin: 28px auto 0; border-radius: 20px; overflow: hidden; background: var(--sv-surface-2); box-shadow: var(--sv-shadow-lg); } [data-theme='fresh'] .sv-article-img { object-fit: cover; } [data-theme='fresh'] .sv-article-body { margin-top: 34px; line-height: 1.75; color: var(--sv-ink); } [data-theme='fresh'] .sv-article-body p + p { margin-top: 1.15em; } [data-theme='fresh'] .sv-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-article-foot-note { font-size: 13px; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-article-related { margin-top: clamp(48px, 7vw, 80px); } /* ───────── Responsive ───────── */ @media (min-width: 1024px) { [data-theme='fresh'] .sv-joki-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "guide form" "terms form"; gap: 24px; align-items: start; } [data-theme='fresh'] .sv-joki-terms { position: sticky; top: 96px; } [data-theme='fresh'] .sv-joki-bar { display: none; } } @media (max-width: 1023px) { [data-theme='fresh'] .sv-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='fresh'] .sv-article-grid[data-context='section'] > :nth-child(3), [data-theme='fresh'] .sv-article-grid[data-context='related'] > :nth-child(3) { display: none; } [data-theme='fresh'] .sv-joki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='fresh'] .sv-joki-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--sv-gutter) * -1); padding: 4px var(--sv-gutter) 12px; scroll-padding-inline: var(--sv-gutter); } [data-theme='fresh'] .sv-joki-rail::-webkit-scrollbar { display: none; } [data-theme='fresh'] .sv-joki-rail > li { scroll-snap-align: start; } [data-theme='fresh'] .sv-joki-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='fresh'] .sv-joki-flow-item:nth-child(3) { border-left: 0; } [data-theme='fresh'] .sv-joki-flow-item:nth-child(n + 3) { border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-joki-page { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } } @media (max-width: 767px) { [data-theme='fresh'] .sv-article-card[data-layout='featured'] .sv-article-card-link { display: flex; } [data-theme='fresh'] .sv-article-card[data-layout='featured'] .sv-article-card-body { padding: 18px; gap: 10px; } [data-theme='fresh'] .sv-joki-trust { grid-template-columns: 1fr; gap: 10px; } [data-theme='fresh'] .sv-joki-hero { padding: 12px 12px 12px; border-radius: 22px; } [data-theme='fresh'] .sv-joki-hero-banner { aspect-ratio: 2 / 1; min-height: 0; border-radius: 16px; } [data-theme='fresh'] .sv-joki-hero-emblem { top: 10%; right: 18px; width: clamp(84px, 26vw, 120px); } [data-theme='fresh'] .sv-joki-hero-card { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; margin: -52px 6px 0; padding: 16px; } [data-theme='fresh'] .sv-joki-hero-art { width: 64px; height: 64px; border-radius: 16px; align-self: start; } [data-theme='fresh'] .sv-joki-hero-title { font-size: 23px; } [data-theme='fresh'] .sv-joki-hero-summary { font-size: 14px; } [data-theme='fresh'] .sv-joki-hero-chips { grid-column: 1 / -1; } [data-theme='fresh'] .sv-joki-hero-info { display: contents; } [data-theme='fresh'] .sv-joki-hero-info > :not(.sv-joki-hero-chips) { grid-column: 2; } [data-theme='fresh'] .sv-joki-hero-meta { grid-row: 1; align-self: end; flex-direction: column; align-items: flex-start; gap: 2px; } [data-theme='fresh'] .sv-joki-hero-meta > [aria-hidden='true'] { display: none; } [data-theme='fresh'] .sv-joki-hero-title { grid-row: 2; margin-top: 0; } [data-theme='fresh'] .sv-joki-hero-art { grid-row: 1 / span 2; } [data-theme='fresh'] .sv-joki-hero-summary { grid-column: 1 / -1 !important; margin-top: 0; } [data-theme='fresh'] .sv-joki-hero-price { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 8px; padding: 14px 0 0; border-left: 0; border-top: 1px dashed var(--sv-line-strong); text-align: left; } [data-theme='fresh'] .sv-joki-hero-price strong { font-size: 22px; } } @media (max-width: 639px) { [data-theme='fresh'] .sv-page-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } [data-theme='fresh'] .sv-page-filters { margin-inline: calc(var(--sv-gutter) * -1); padding-inline: var(--sv-gutter); } [data-theme='fresh'] .sv-article-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } [data-theme='fresh'] .sv-article-grid[data-context='page'] { gap: 16px; } [data-theme='fresh'] .sv-article-grid[data-context='section'] > :nth-child(3), [data-theme='fresh'] .sv-article-grid[data-context='related'] > :nth-child(3) { display: block; } /* Section + related: lead card, then compact rows */ [data-theme='fresh'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-link, [data-theme='fresh'] .sv-article-grid[data-context='related'] > * .sv-article-card-link { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: stretch; border-radius: var(--sv-radius); } [data-theme='fresh'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-media, [data-theme='fresh'] .sv-article-grid[data-context='related'] > * .sv-article-card-media { aspect-ratio: auto; min-height: 104px; height: 100%; } [data-theme='fresh'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-body, [data-theme='fresh'] .sv-article-grid[data-context='related'] > * .sv-article-card-body { gap: 6px; padding: 12px 14px; } [data-theme='fresh'] .sv-article-grid[data-context='section'] > :not(:first-child) :is(.sv-article-card-excerpt, .sv-article-card-game), [data-theme='fresh'] .sv-article-grid[data-context='related'] > * :is(.sv-article-card-excerpt, .sv-article-card-game) { display: none; } [data-theme='fresh'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-title, [data-theme='fresh'] .sv-article-grid[data-context='related'] > * .sv-article-card-title { font-size: 15px; } [data-theme='fresh'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-chip, [data-theme='fresh'] .sv-article-grid[data-context='related'] > * .sv-chip { height: 22px; padding: 0 8px; font-size: 11px; } [data-theme='fresh'] .sv-joki-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } [data-theme='fresh'] .sv-joki-rail { grid-auto-columns: 84%; gap: 12px; } [data-theme='fresh'] .sv-joki-flow { grid-template-columns: minmax(0, 1fr); } [data-theme='fresh'] .sv-joki-flow-item + .sv-joki-flow-item { border-left: 0; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-joki-flow-item { padding: 14px 44px 14px 16px; } [data-theme='fresh'] .sv-joki-row, [data-theme='fresh'] .sv-joki-options, [data-theme='fresh'] .sv-joki-pay-list { grid-template-columns: minmax(0, 1fr); } [data-theme='fresh'] .sv-joki-option { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "emblem text" "emblem price"; row-gap: 6px; column-gap: 12px; min-height: 0; padding: 12px 14px 12px 12px; } [data-theme='fresh'] .sv-joki-option-emblem { grid-area: emblem; width: 40px; height: 40px; align-self: center; } [data-theme='fresh'] .sv-joki-option-text { grid-area: text; } [data-theme='fresh'] .sv-joki-option-price { grid-area: price; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; text-align: left; } [data-theme='fresh'] .sv-joki-aside-hint { display: none; } [data-theme='fresh'] .sv-joki-row--pair { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; } [data-theme='fresh'] .sv-joki-segment { min-height: 44px; font-size: 13px; padding: 0 2px; } [data-theme='fresh'] .sv-joki-quick-btn { min-height: 44px; } [data-theme='fresh'] .sv-joki-guide, [data-theme='fresh'] .sv-joki-rules { padding: 18px 16px; } [data-theme='fresh'] .sv-joki-summary { padding: 18px 16px; } [data-theme='fresh'] :is(.sv-joki-flow-text, .sv-joki-trust-text, .sv-joki-guide-text, .sv-joki-security-text) { font-size: 14px; } [data-theme='fresh'] :is(.sv-joki-callout, .sv-joki-rules-list li) { font-size: 14px; } [data-theme='fresh'] .sv-joki-guide { padding: 16px; } [data-theme='fresh'] .sv-joki-layout { gap: 16px; margin-top: 20px; } [data-theme='fresh'] .sv-joki-form { gap: 16px; } [data-theme='fresh'] .sv-page-head { margin: 10px 0 20px; } [data-theme='fresh'] .sv-page-sub { font-size: 15px; } /* How-it-works: a swipeable strip of compact steps so the packages show sooner. */ [data-theme='fresh'] .sv-joki-flow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: 10px; margin: 0 calc(var(--sv-gutter) * -1) 28px; padding: 2px var(--sv-gutter) 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sv-gutter); scrollbar-width: none; background: none; border: 0; border-radius: 0; box-shadow: none; } [data-theme='fresh'] .sv-joki-flow::-webkit-scrollbar { display: none; } [data-theme='fresh'] .sv-joki-flow > .sv-joki-flow-item { scroll-snap-align: start; padding: 14px 40px 14px 14px; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); } [data-theme='fresh'] .sv-article-figure { border-radius: 16px; margin-top: 22px; } [data-theme='fresh'] .sv-article-body { margin-top: 24px; font-size: 16.5px; line-height: 1.7; } } @media (hover: none) { [data-theme='fresh'] .sv-joki-card:hover, [data-theme='fresh'] .sv-article-card-link:hover { transform: none; } } /* ───────── Segmented tabs (shared) ───────── */ [data-theme='fresh'] .sv-segtabs { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; border-radius: 13px; background: var(--sv-surface-2); border: 1px solid var(--sv-line); overflow-x: auto; scrollbar-width: none; } [data-theme='fresh'] .sv-segtabs::-webkit-scrollbar { display: none; } [data-theme='fresh'] .sv-segtab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 700; color: var(--sv-ink-2); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-segtab:hover { color: var(--sv-ink); } [data-theme='fresh'] .sv-segtab[aria-selected='true'] { background: var(--sv-surface); color: var(--sv-primary-ink); box-shadow: inset 0 0 0 1.5px var(--primary), 0 4px 10px -6px color-mix(in oklab, var(--primary) 60%, transparent); } [data-theme='fresh'] .sv-segtab:focus-visible { outline-offset: 0; } [data-theme='fresh'] .sv-segtab-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: color-mix(in oklab, var(--sv-line) 80%, white); font-size: 12px; font-weight: 800; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-segtab[aria-selected='true'] .sv-segtab-count { background: var(--sv-mint-pill); color: var(--sv-primary-ink); } /* ───────── Daftar Harga ───────── */ [data-theme='fresh'] .sv-pricelist-head { margin-bottom: 22px; } [data-theme='fresh'] .sv-pricelist-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } [data-theme='fresh'] .sv-pricelist-live { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); animation: sv-pricelist-pulse 2.2s ease-out infinite; } @keyframes sv-pricelist-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 0%, transparent); } } [data-theme='fresh'] .sv-pricelist-layout { display: grid; gap: 16px; align-items: start; } [data-theme='fresh'] .sv-pricelist-aside, [data-theme='fresh'] .sv-pricelist-main { min-width: 0; } [data-theme='fresh'] .sv-pricelist-main { overflow: hidden; scroll-margin-top: 124px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-pricelist-aside { border-radius: var(--sv-radius-lg); } /* Game picker */ [data-theme='fresh'] .sv-pricelist-picker { display: flex; flex-direction: column; min-height: 0; padding: 18px; } [data-theme='fresh'] .sv-pricelist-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } [data-theme='fresh'] .sv-pricelist-picker-title { font-size: 16px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-pricelist-picker-count { font-size: 12.5px; font-weight: 600; color: var(--sv-ink-3); white-space: nowrap; } [data-theme='fresh'] .sv-pricelist-search, [data-theme='fresh'] .sv-pricelist-filter { position: relative; } [data-theme='fresh'] .sv-pricelist-search { margin-bottom: 14px; } [data-theme='fresh'] .sv-pricelist-search-icon, [data-theme='fresh'] .sv-pricelist-filter-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--sv-ink-3); pointer-events: none; } [data-theme='fresh'] .sv-pricelist-search-input, [data-theme='fresh'] .sv-pricelist-filter-input { padding: 0 44px 0 42px; border-radius: 12px; background: var(--sv-surface-2); border-color: var(--sv-line); font-weight: 500; } [data-theme='fresh'] .sv-pricelist-search-input:hover, [data-theme='fresh'] .sv-pricelist-filter-input:hover { border-color: var(--sv-line-strong); } [data-theme='fresh'] .sv-pricelist-search-input:focus, [data-theme='fresh'] .sv-pricelist-filter-input:focus { background: var(--sv-surface); } [data-theme='fresh'] .sv-pricelist-search-input::-webkit-search-cancel-button, [data-theme='fresh'] .sv-pricelist-filter-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } [data-theme='fresh'] .sv-pricelist-search-clear { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--sv-ink-2); cursor: pointer; transition: color .15s; } [data-theme='fresh'] .sv-pricelist-search-clear:hover { color: var(--sv-ink); } [data-theme='fresh'] .sv-pricelist-search-clear svg { width: 18px; height: 18px; padding: 2px; border-radius: 999px; background: var(--sv-line); } [data-theme='fresh'] .sv-pricelist-games { margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-pricelist-games[data-layout='rail'] { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -18px; padding: 2px 18px 4px; scroll-padding-inline: 18px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); } [data-theme='fresh'] .sv-pricelist-games[data-layout='rail']::-webkit-scrollbar { display: none; } [data-theme='fresh'] .sv-pricelist-games[data-layout='rail'] > li { flex: 0 0 84px; scroll-snap-align: start; } [data-theme='fresh'] .sv-pricelist-games[data-layout='grid'] { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } [data-theme='fresh'] .sv-pricelist-game { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; height: 100%; padding: 5px 5px 7px; border: 1px solid transparent; border-radius: 14px; background: var(--sv-surface); text-align: center; color: var(--sv-ink-2); cursor: pointer; } [data-theme='fresh'] .sv-pricelist-game:hover { color: var(--sv-ink); } [data-theme='fresh'] .sv-pricelist-game[aria-pressed='true'] { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-pricelist-game-media { position: relative; display: block; aspect-ratio: 1; border-radius: 11px; overflow: hidden; background: var(--sv-surface-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sv-line) 70%, transparent); } [data-theme='fresh'] .sv-pricelist-game-media img { object-fit: cover; } [data-theme='fresh'] .sv-pricelist-game-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 18px; font-weight: 800; } [data-theme='fresh'] .sv-pricelist-game-check { position: absolute; top: 5px; right: 5px; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 0 0 2px var(--sv-surface); } [data-theme='fresh'] .sv-pricelist-game-check svg { width: 12px; height: 12px; stroke-width: 3.2; } [data-theme='fresh'] .sv-pricelist-game-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; font-size: 12px; font-weight: 700; line-height: 1.25; } [data-theme='fresh'] .sv-pricelist-game--skeleton { cursor: default; } [data-theme='fresh'] .sv-pricelist-skeleton-line { display: block; height: 10px; width: 80%; margin: 4px auto 0; } [data-theme='fresh'] .sv-pricelist-picker-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--sv-mint); font-size: 13.5px; font-weight: 700; color: var(--sv-ink-2); cursor: pointer; transition: color .15s, border-color .15s; } [data-theme='fresh'] .sv-pricelist-picker-toggle:hover { color: var(--sv-primary-ink); border-color: var(--sv-line-strong); } [data-theme='fresh'] .sv-pricelist-picker-toggle svg { width: 16px; height: 16px; transition: transform .2s; } [data-theme='fresh'] .sv-pricelist-picker-toggle[aria-expanded='true'] svg { transform: rotate(180deg); } /* Shared empty / error states */ [data-theme='fresh'] .sv-pricelist-picker-empty, [data-theme='fresh'] .sv-pricelist-state, [data-theme='fresh'] .sv-pricelist-table-empty { display: grid; justify-items: center; text-align: center; padding: 28px 12px; } [data-theme='fresh'] .sv-pricelist-state { padding: 44px 20px; } [data-theme='fresh'] .sv-pricelist-state--page { padding: 56px 24px; } [data-theme='fresh'] .sv-pricelist-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 14px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-pricelist-empty-icon[data-tone='error'] { background: var(--sv-err-soft); color: color-mix(in oklab, var(--sv-err) 85%, black); } [data-theme='fresh'] .sv-pricelist-empty-icon svg { width: 22px; height: 22px; } [data-theme='fresh'] .sv-pricelist-empty-title { font-size: 16px; font-weight: 800; color: var(--sv-ink); text-wrap: balance; } [data-theme='fresh'] .sv-pricelist-empty-text { margin-top: 4px; max-width: 38ch; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); text-wrap: pretty; } [data-theme='fresh'] .sv-pricelist-empty-action { margin-top: 16px; } [data-theme='fresh'] .sv-pricelist-empty-action svg { width: 16px; height: 16px; } /* Price panel */ [data-theme='fresh'] .sv-pricelist-panel-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--sv-line); background: var(--sv-mint); } [data-theme='fresh'] .sv-pricelist-panel-logo { position: relative; display: block; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--sv-surface-2); box-shadow: 0 0 0 1px var(--sv-line), 0 10px 20px -12px oklch(0.3 0.05 160 / 0.4); } [data-theme='fresh'] .sv-pricelist-panel-logo img { object-fit: cover; } [data-theme='fresh'] .sv-pricelist-panel-heading { min-width: 0; } [data-theme='fresh'] .sv-pricelist-panel-kicker { display: inline-flex; width: fit-content; padding: 3px 10px; border-radius: 999px; background: var(--sv-mint-pill); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-pricelist-panel-title { margin-top: 6px; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; font-weight: 800; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='fresh'] .sv-pricelist-panel-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font-size: 13.5px; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-pricelist-panel-meta strong { font-weight: 800; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-pricelist-panel-cta { white-space: nowrap; } [data-theme='fresh'] .sv-pricelist-panel-cta svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-pricelist-panel-body { padding: 18px 22px 22px; } [data-theme='fresh'] .sv-pricelist-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } [data-theme='fresh'] .sv-pricelist-types { min-width: 0; } [data-theme='fresh'] .sv-pricelist-type-single { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; font-size: 15px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-pricelist-filter { flex: 0 1 260px; min-width: 200px; } [data-theme='fresh'] .sv-pricelist-table-wrap { border: 1px solid var(--sv-line); border-radius: 14px; overflow: hidden; } [data-theme='fresh'] .sv-pricelist-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } [data-theme='fresh'] .sv-pricelist-table thead th { padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sv-ink-3); background: var(--sv-surface-2); border-bottom: 1px solid var(--sv-line); white-space: nowrap; } [data-theme='fresh'] .sv-pricelist-table thead .sv-pricelist-col-price { text-align: right; } [data-theme='fresh'] .sv-pricelist-table .sv-pricelist-col-action { width: 1%; } [data-theme='fresh'] .sv-pricelist-table tbody tr { transition: background-color .15s; } [data-theme='fresh'] .sv-pricelist-table tbody tr + tr { border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-pricelist-table tbody tr:hover { background: var(--sv-mint); } [data-theme='fresh'] .sv-pricelist-table tbody :is(th, td) { padding: 9px 16px; text-align: left; vertical-align: middle; } [data-theme='fresh'] .sv-pricelist-table tbody th { font-weight: inherit; } [data-theme='fresh'] .sv-pricelist-product { display: flex; align-items: center; gap: 12px; min-width: 0; } [data-theme='fresh'] .sv-pricelist-product-icon { position: relative; display: block; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--sv-mint); } [data-theme='fresh'] .sv-pricelist-product-icon img { object-fit: contain; padding: 3px; } [data-theme='fresh'] .sv-pricelist-product-icon[data-empty] { background: var(--sv-mint-pill); } [data-theme='fresh'] .sv-pricelist-product-name { min-width: 0; font-weight: 650; line-height: 1.35; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='fresh'] .sv-pricelist-cell-price { text-align: right !important; white-space: nowrap; } [data-theme='fresh'] .sv-pricelist-price { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-pricelist-cell-action { padding-left: 4px !important; text-align: right !important; } [data-theme='fresh'] .sv-pricelist-buy { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--sv-mint-pill); font-size: 13.5px; font-weight: 800; color: var(--sv-primary-ink); transition: background-color .15s, color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-pricelist-table tbody tr:hover .sv-pricelist-buy { box-shadow: inset 0 0 0 1.5px var(--primary); } [data-theme='fresh'] .sv-pricelist-table tbody tr .sv-pricelist-buy:hover { background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 8px 16px -10px var(--primary); } [data-theme='fresh'] .sv-pricelist-note { display: flex; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-pricelist-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; } /* Panel skeletons */ [data-theme='fresh'] .sv-pricelist-skeleton-meta { display: block; width: 168px; max-width: 100%; height: 14px; margin-top: 8px; } [data-theme='fresh'] .sv-pricelist-skeleton-title { display: block; width: 180px; max-width: 100%; height: 22px; } [data-theme='fresh'] .sv-pricelist-skeleton-tabs { display: block; width: 220px; height: 48px; border-radius: 13px; } [data-theme='fresh'] .sv-pricelist-skeleton-rows { display: grid; border: 1px solid var(--sv-line); border-radius: 14px; overflow: hidden; } [data-theme='fresh'] .sv-pricelist-skeleton-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 88px; align-items: center; gap: 12px; padding: 13px 16px; } [data-theme='fresh'] .sv-pricelist-skeleton-row + .sv-pricelist-skeleton-row { border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-pricelist-skeleton-icon { display: block; width: 36px; height: 36px; } [data-theme='fresh'] .sv-pricelist-skeleton-name { display: block; width: 58%; height: 12px; } [data-theme='fresh'] .sv-pricelist-skeleton-price { display: block; height: 12px; } @media (min-width: 1024px) { [data-theme='fresh'] .sv-pricelist-layout { grid-template-columns: 324px minmax(0, 1fr); gap: 24px; } [data-theme='fresh'] .sv-pricelist-aside { position: sticky; top: calc(var(--sv-header-offset, 108px) + 16px); transition: top .32s cubic-bezier(.2, .7, .2, 1); display: flex; flex-direction: column; max-height: calc(100dvh - 136px); overflow: hidden; } [data-theme='fresh'] .sv-pricelist-aside .sv-pricelist-picker { flex: 1 1 auto; } [data-theme='fresh'] .sv-pricelist-games[data-layout] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin: -6px -10px -10px; padding-inline: 10px; scroll-snap-type: none; scrollbar-width: thin; scrollbar-color: var(--sv-line-strong) transparent; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%); padding-top: 8px; padding-bottom: 16px; } [data-theme='fresh'] .sv-pricelist-games[data-layout] > li { flex: none; } [data-theme='fresh'] .sv-pricelist-picker-toggle { display: none; } } @media (max-width: 639px) { [data-theme='fresh'] .sv-pricelist-picker { padding: 16px; } [data-theme='fresh'] .sv-pricelist-head, [data-theme='fresh'] .sv-leaderboard-head { margin-bottom: 16px; } [data-theme='fresh'] .sv-pricelist-facts { margin-top: 12px; } [data-theme='fresh'] .sv-pricelist-search { margin-bottom: 12px; } [data-theme='fresh'] .sv-pricelist-games[data-layout='rail'] { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } [data-theme='fresh'] .sv-pricelist-games[data-layout='rail'] > li { flex-basis: 78px; } [data-theme='fresh'] .sv-pricelist-games[data-layout='grid'] { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; } [data-theme='fresh'] .sv-pricelist-panel-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; } [data-theme='fresh'] .sv-pricelist-panel-logo { width: 56px; height: 56px; border-radius: 14px; } [data-theme='fresh'] .sv-pricelist-panel-cta { grid-column: 1 / -1; width: 100%; } [data-theme='fresh'] .sv-pricelist-panel-body { padding: 14px 16px 18px; } [data-theme='fresh'] .sv-pricelist-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } [data-theme='fresh'] .sv-pricelist-types { display: flex; } [data-theme='fresh'] .sv-pricelist-types .sv-segtab { flex: 1 0 auto; min-height: 44px; } [data-theme='fresh'] .sv-pricelist-filter { flex: none; min-width: 0; } /* Stacked rows: [icon + name / price] [Beli] */ [data-theme='fresh'] .sv-pricelist-table-wrap { margin-inline: -4px; } [data-theme='fresh'] .sv-pricelist-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-theme='fresh'] .sv-pricelist-table, [data-theme='fresh'] .sv-pricelist-table tbody { display: block; } [data-theme='fresh'] .sv-pricelist-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "product action" "price action"; column-gap: 12px; align-items: center; min-height: 68px; padding: 11px 12px 11px 60px; } [data-theme='fresh'] .sv-pricelist-table tbody :is(th, td) { padding: 0; } [data-theme='fresh'] .sv-pricelist-cell-product { grid-area: product; } [data-theme='fresh'] .sv-pricelist-cell-price { grid-area: price; padding: 2px 0 0 !important; text-align: left !important; align-self: start; } [data-theme='fresh'] .sv-pricelist-cell-action { grid-area: action; padding: 0 !important; } [data-theme='fresh'] .sv-pricelist-cell-product { align-self: end; } [data-theme='fresh'] .sv-pricelist-product { display: block; } [data-theme='fresh'] .sv-pricelist-product-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); } [data-theme='fresh'] .sv-pricelist-product-name { display: block; font-size: 14px; } [data-theme='fresh'] .sv-pricelist-price { font-size: 14.5px; } [data-theme='fresh'] .sv-pricelist-buy { min-height: 44px; min-width: 60px; } [data-theme='fresh'] .sv-pricelist-skeleton-row { grid-template-columns: 36px minmax(0, 1fr) 60px; } } /* ───────── Leaderboard ───────── */ [data-theme='fresh'] .sv-leaderboard { --sv-medal-gold: oklch(0.86 0.13 88); --sv-medal-gold-deep: oklch(0.66 0.14 72); --sv-medal-gold-ink: oklch(0.36 0.08 70); --sv-medal-silver: oklch(0.88 0.012 250); --sv-medal-silver-deep: oklch(0.66 0.02 255); --sv-medal-silver-ink: oklch(0.36 0.02 255); --sv-medal-bronze: oklch(0.8 0.09 58); --sv-medal-bronze-deep: oklch(0.6 0.12 48); --sv-medal-bronze-ink: oklch(0.36 0.08 45); --sv-trend-up: oklch(0.5 0.13 152); --sv-trend-up-soft: oklch(0.95 0.05 152); } [data-theme='fresh'] .sv-leaderboard-head { margin-bottom: 22px; } [data-theme='fresh'] .sv-leaderboard-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; } [data-theme='fresh'] .sv-leaderboard-reset { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-leaderboard-reset svg { width: 16px; height: 16px; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-leaderboard-body { display: grid; gap: 20px; align-items: start; } [data-theme='fresh'] .sv-leaderboard-main { display: grid; gap: 16px; min-width: 0; } /* Stage + podium */ /* The podium sits on a deep stage (mockup F); the medal colours stay semantic. */ [data-theme='fresh'] .sv-leaderboard-stage { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), radial-gradient(40% 70% at 0% 100%, var(--sv-lime-glow), transparent 70%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-leaderboard-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.2; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-leaderboard-stage .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-leaderboard-stage .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-leaderboard-stage .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-leaderboard-stage .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-leaderboard-stage .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-leaderboard-stage { padding: 22px 24px 0; border-radius: var(--sv-radius-xl); } [data-theme='fresh'] .sv-leaderboard-stage-title { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 800; color: var(--sv-on-stage); } [data-theme='fresh'] .sv-leaderboard-stage-title span { font-size: 12.5px; font-weight: 600; color: var(--sv-on-stage-2); letter-spacing: 0; } [data-theme='fresh'] .sv-leaderboard-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 18px auto 0; padding: 0; max-width: 760px; list-style: none; } [data-theme='fresh'] .sv-leaderboard-podium-item { display: flex; flex-direction: column; align-items: center; min-width: 0; } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] { order: 2; --sv-medal: var(--sv-medal-gold); --sv-medal-deep: var(--sv-medal-gold-deep); --sv-medal-ink: var(--sv-medal-gold-ink); } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='2'] { order: 1; --sv-medal: var(--sv-medal-silver); --sv-medal-deep: var(--sv-medal-silver-deep); --sv-medal-ink: var(--sv-medal-silver-ink); } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='3'] { order: 3; --sv-medal: var(--sv-medal-bronze); --sv-medal-deep: var(--sv-medal-bronze-deep); --sv-medal-ink: var(--sv-medal-bronze-ink); } [data-theme='fresh'] .sv-leaderboard-podium-person { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0; padding: 0 4px 16px; text-align: center; } [data-theme='fresh'] .sv-leaderboard-podium-figure { position: relative; margin: 16px 0 16px; } [data-theme='fresh'] .sv-leaderboard-podium-figure .sv-leaderboard-avatar { box-shadow: 0 0 0 3px var(--sv-stage), 0 0 0 6px var(--sv-medal), 0 16px 28px -14px rgb(0 0 0 / 0.6); } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-avatar { width: 88px; height: 88px; font-size: 26px; } [data-theme='fresh'] .sv-leaderboard-crown { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; color: var(--sv-medal-deep); fill: var(--sv-medal); stroke-width: 1.8; } [data-theme='fresh'] .sv-leaderboard-medal { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: linear-gradient(160deg, var(--sv-medal), color-mix(in oklab, var(--sv-medal) 70%, var(--sv-medal-deep))); color: var(--sv-medal-ink); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--sv-stage); } [data-theme='fresh'] .sv-leaderboard-podium-name { max-width: 100%; font-size: 15px; font-weight: 800; color: var(--sv-on-stage); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='fresh'] .sv-leaderboard-podium-total { font-family: var(--font-theme-heading), system-ui, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--sv-on-stage); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-total { font-size: 23px; color: var(--sv-lime); } [data-theme='fresh'] .sv-leaderboard-amount-short { display: none; } [data-theme='fresh'] .sv-leaderboard-podium-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--sv-on-stage-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-leaderboard-podium-game { max-width: 100%; margin-top: 6px; background: var(--sv-surface); color: var(--sv-ink); border-color: transparent; } [data-theme='fresh'] .sv-leaderboard-podium-game svg { flex-shrink: 0; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-leaderboard-podium-step { position: relative; display: grid; place-items: center; width: 100%; height: 44px; border-radius: 16px 16px 0 0; background: linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)); } [data-theme='fresh'] .sv-leaderboard-podium-step span { font-family: var(--font-theme-heading), system-ui, sans-serif; font-size: 26px; font-weight: 800; line-height: 1; color: var(--sv-medal); } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step { height: 76px; } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step span { font-size: 34px; } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='2'] .sv-leaderboard-podium-step { height: 56px; } /* Avatars */ [data-theme='fresh'] .sv-leaderboard-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--sv-av-bg); color: var(--sv-av-ink); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; } [data-theme='fresh'] .sv-leaderboard-avatar[data-size='lg'] { width: 72px; height: 72px; font-size: 22px; } /* Avatars: one green family (mint, pale lime, primary tint, primary, deep stage). */ [data-theme='fresh'] .sv-leaderboard-avatar[data-tone='0'] { --sv-av-bg: var(--sv-mint-pill); --sv-av-ink: var(--sv-primary-ink); } [data-theme='fresh'] .sv-leaderboard-avatar[data-tone='1'] { --sv-av-bg: var(--sv-lime-soft); --sv-av-ink: var(--sv-on-lime); } [data-theme='fresh'] .sv-leaderboard-avatar[data-tone='2'] { --sv-av-bg: var(--sv-primary-tint); --sv-av-ink: var(--sv-on-lime); } [data-theme='fresh'] .sv-leaderboard-avatar[data-tone='3'] { --sv-av-bg: var(--primary); --sv-av-ink: var(--sv-on-primary); } [data-theme='fresh'] .sv-leaderboard-avatar[data-tone='4'] { --sv-av-bg: var(--sv-stage); --sv-av-ink: var(--sv-on-stage); } /* Rank change */ [data-theme='fresh'] .sv-leaderboard-change { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 38px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--sv-surface-2); color: var(--sv-ink-3); } [data-theme='fresh'] .sv-leaderboard-change-mark { font-size: 8px; line-height: 1; } [data-theme='fresh'] .sv-leaderboard-change[data-dir='same'] .sv-leaderboard-change-mark { font-size: 13px; font-weight: 700; } [data-theme='fresh'] .sv-leaderboard-change[data-dir='up'] { background: var(--sv-trend-up-soft); color: var(--sv-trend-up); } [data-theme='fresh'] .sv-leaderboard-change[data-dir='down'] { background: var(--sv-err-soft); color: color-mix(in oklab, var(--sv-err) 85%, black); } /* Ranks 4–20 */ [data-theme='fresh'] .sv-leaderboard-list { overflow: hidden; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-leaderboard-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-leaderboard-list-title { font-size: 16px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-leaderboard-list-period { font-size: 12.5px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 14px; } [data-theme='fresh'] .sv-leaderboard-table thead th { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sv-ink-3); background: var(--sv-surface-2); border-bottom: 1px solid var(--sv-line); white-space: nowrap; } [data-theme='fresh'] .sv-leaderboard-table abbr { text-decoration: none; } [data-theme='fresh'] .sv-leaderboard-table :is(.sv-leaderboard-col-rank, .sv-leaderboard-cell-rank) { width: 64px; text-align: center !important; } [data-theme='fresh'] .sv-leaderboard-table :is(.sv-leaderboard-col-tx, .sv-leaderboard-cell-tx, .sv-leaderboard-col-total, .sv-leaderboard-cell-total) { text-align: right !important; } [data-theme='fresh'] .sv-leaderboard-table :is(.sv-leaderboard-col-change, .sv-leaderboard-cell-change) { width: 72px; text-align: center !important; } [data-theme='fresh'] .sv-leaderboard-table tbody tr + tr { border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-leaderboard-table tbody tr { transition: background-color .15s; } [data-theme='fresh'] .sv-leaderboard-table tbody tr:hover { background: var(--sv-mint); } [data-theme='fresh'] .sv-leaderboard-table tbody :is(th, td) { padding: 10px 14px; text-align: left; vertical-align: middle; } [data-theme='fresh'] .sv-leaderboard-table tbody th { font-weight: inherit; } [data-theme='fresh'] .sv-leaderboard-rank { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; background: var(--sv-mint); font-size: 13px; font-weight: 800; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-leaderboard-who { display: flex; align-items: center; gap: 12px; min-width: 0; } [data-theme='fresh'] .sv-leaderboard-who-text { display: grid; min-width: 0; } [data-theme='fresh'] .sv-leaderboard-name { font-weight: 700; color: var(--sv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='fresh'] .sv-leaderboard-sub { display: none; font-size: 12px; font-weight: 500; color: var(--sv-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='fresh'] .sv-leaderboard-cell-game { color: var(--sv-ink-2); white-space: nowrap; } [data-theme='fresh'] .sv-leaderboard-cell-tx { color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-leaderboard-tx-unit { display: none; } [data-theme='fresh'] .sv-leaderboard-cell-total { font-weight: 800; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='fresh'] .sv-leaderboard-note { padding: 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-leaderboard-empty { padding: 40px 20px; text-align: center; } [data-theme='fresh'] .sv-leaderboard-empty-title { font-size: 16px; font-weight: 800; } [data-theme='fresh'] .sv-leaderboard-empty-text { margin-top: 4px; font-size: 14px; color: var(--sv-ink-2); } /* Aside: CTA + rules */ [data-theme='fresh'] .sv-leaderboard-aside { display: grid; gap: 16px; align-content: start; min-width: 0; } [data-theme='fresh'] .sv-leaderboard-cta { position: relative; isolation: isolate; overflow: hidden; padding: 22px; border-radius: var(--sv-radius-lg); background: var(--sv-mint); border-color: transparent; box-shadow: none; } [data-theme='fresh'] .sv-leaderboard-cta::after { content: ''; position: absolute; z-index: -1; right: -60px; top: -70px; width: 180px; height: 180px; border-radius: 50%; background: var(--sv-mint-shape); opacity: 0.85; } [data-theme='fresh'] .sv-leaderboard-cta-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 8px 18px -10px var(--primary); } [data-theme='fresh'] .sv-leaderboard-cta-icon svg { width: 22px; height: 22px; } [data-theme='fresh'] .sv-leaderboard-cta-title { margin-top: 14px; font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--sv-ink); text-wrap: balance; } [data-theme='fresh'] .sv-leaderboard-cta-text { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); text-wrap: pretty; } [data-theme='fresh'] .sv-leaderboard-cta-text strong { font-weight: 800; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-leaderboard-cta-btn { margin-top: 18px; } [data-theme='fresh'] .sv-leaderboard-cta-btn svg { width: 18px; height: 18px; } [data-theme='fresh'] .sv-leaderboard-rules { padding: 18px 20px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-leaderboard-rules-title { margin-bottom: 12px; font-size: 14px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-leaderboard-rules-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-leaderboard-rules-list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-leaderboard-rules-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--sv-primary-ink); } @media (min-width: 1024px) { [data-theme='fresh'] .sv-leaderboard-body { grid-template-columns: minmax(0, 1fr) 328px; gap: 24px; } [data-theme='fresh'] .sv-leaderboard-aside { position: sticky; top: calc(var(--sv-header-offset, 108px) + 16px); transition: top .32s cubic-bezier(.2, .7, .2, 1); } } @media (min-width: 640px) and (max-width: 1023px) { [data-theme='fresh'] .sv-leaderboard-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { [data-theme='fresh'] .sv-leaderboard-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } [data-theme='fresh'] .sv-leaderboard-periods { display: flex; } [data-theme='fresh'] .sv-leaderboard-periods .sv-segtab { flex: 1 0 auto; min-height: 44px; padding: 0 12px; } [data-theme='fresh'] .sv-leaderboard-stage { padding: 16px 10px 0; border-radius: 24px; } [data-theme='fresh'] .sv-leaderboard-stage-title { padding-inline: 6px; } [data-theme='fresh'] .sv-leaderboard-podium { gap: 6px; margin-top: 10px; } [data-theme='fresh'] .sv-leaderboard-podium-person { gap: 2px; padding: 0 2px 12px; } [data-theme='fresh'] .sv-leaderboard-podium-figure { margin: 14px 0 14px; } [data-theme='fresh'] .sv-leaderboard-avatar[data-size='lg'] { width: 52px; height: 52px; font-size: 16px; } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-avatar { width: 62px; height: 62px; font-size: 19px; } [data-theme='fresh'] .sv-leaderboard-podium-figure .sv-leaderboard-avatar { box-shadow: 0 0 0 2px var(--sv-stage), 0 0 0 4px var(--sv-medal), 0 12px 20px -12px rgb(0 0 0 / 0.6); } [data-theme='fresh'] .sv-leaderboard-crown { top: -21px; width: 20px; height: 20px; } [data-theme='fresh'] .sv-leaderboard-medal { min-width: 22px; height: 22px; bottom: -8px; padding: 0 6px; font-size: 12px; box-shadow: 0 0 0 2px var(--sv-stage); } [data-theme='fresh'] .sv-leaderboard-podium-name { font-size: 13px; } [data-theme='fresh'] .sv-leaderboard-podium-total, [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-total { font-size: 15px; } [data-theme='fresh'] .sv-leaderboard-amount-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-theme='fresh'] .sv-leaderboard-amount-short { display: inline; } [data-theme='fresh'] .sv-leaderboard-podium-meta { flex-direction: column; gap: 4px; font-size: 12px; } [data-theme='fresh'] .sv-leaderboard-podium-meta .sv-leaderboard-change { height: 20px; min-width: 0; padding: 0 6px; font-size: 11px; } [data-theme='fresh'] .sv-leaderboard-podium-game { height: 22px; padding: 0 7px; gap: 4px; margin-top: 4px; font-size: 11px; } [data-theme='fresh'] .sv-leaderboard-podium-game svg { display: none; } [data-theme='fresh'] .sv-leaderboard-podium-step { height: 28px; border-radius: 12px 12px 0 0; } [data-theme='fresh'] .sv-leaderboard-podium-step span { font-size: 17px; } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step { height: 46px; } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step span { font-size: 22px; } [data-theme='fresh'] .sv-leaderboard-podium-item[data-rank='2'] .sv-leaderboard-podium-step { height: 36px; } [data-theme='fresh'] .sv-leaderboard-list-head { padding: 14px 16px; } [data-theme='fresh'] .sv-leaderboard-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-theme='fresh'] .sv-leaderboard-table, [data-theme='fresh'] .sv-leaderboard-table tbody { display: block; } [data-theme='fresh'] .sv-leaderboard-table tbody tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; grid-template-areas: "rank who total total" "rank who tx change"; column-gap: 8px; row-gap: 3px; align-items: center; padding: 11px 14px; } [data-theme='fresh'] .sv-leaderboard-table tbody :is(th, td) { padding: 0; } [data-theme='fresh'] .sv-leaderboard-table :is(.sv-leaderboard-cell-rank, .sv-leaderboard-cell-change) { width: auto; } [data-theme='fresh'] .sv-leaderboard-table .sv-leaderboard-cell-total { justify-self: end; } [data-theme='fresh'] .sv-leaderboard-table .sv-leaderboard-cell-tx { grid-area: tx; justify-self: end; font-size: 12px; font-weight: 600; color: var(--sv-ink-3); white-space: nowrap; } [data-theme='fresh'] .sv-leaderboard-tx-unit { display: inline; } [data-theme='fresh'] .sv-leaderboard-cell-rank { grid-area: rank; } [data-theme='fresh'] .sv-leaderboard-cell-name { grid-area: who; min-width: 0; } [data-theme='fresh'] .sv-leaderboard-cell-total { grid-area: total; font-size: 14px; } [data-theme='fresh'] .sv-leaderboard-cell-change { grid-area: change; justify-self: end; } [data-theme='fresh'] .sv-leaderboard-table .sv-leaderboard-cell-game { display: none; } [data-theme='fresh'] .sv-leaderboard-rank { min-width: 28px; height: 28px; font-size: 12.5px; } [data-theme='fresh'] .sv-leaderboard-who { gap: 10px; } [data-theme='fresh'] .sv-leaderboard-who .sv-leaderboard-avatar { width: 34px; height: 34px; font-size: 12px; } [data-theme='fresh'] .sv-leaderboard-sub { display: block; } [data-theme='fresh'] .sv-leaderboard-table .sv-leaderboard-change { height: 20px; min-width: 0; padding: 0 7px; font-size: 11px; } [data-theme='fresh'] .sv-leaderboard-cta { padding: 20px; } } @media (prefers-reduced-motion: reduce) { [data-theme='fresh'] .sv-pricelist-live { animation: none; } } /* ───────── Shared: status tones, phone group, spinner ───────── */ [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) { --sv-warn: oklch(0.47 0.1 65); --sv-warn-soft: oklch(0.97 0.05 88); --sv-info: oklch(0.47 0.12 248); --sv-info-soft: oklch(0.965 0.022 248); } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='ok'] { --tone-ink: var(--sv-ok); --tone-soft: var(--sv-ok-soft); } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='err'] { --tone-ink: var(--sv-err); --tone-soft: var(--sv-err-soft); } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='warn'] { --tone-ink: var(--sv-warn); --tone-soft: var(--sv-warn-soft); } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='info'] { --tone-ink: var(--sv-info); --tone-soft: var(--sv-info-soft); } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='muted'] { --tone-ink: var(--sv-ink-2); --tone-soft: var(--sv-surface-2); } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-sm); background: var(--sv-surface); transition: border-color .15s, box-shadow .15s; } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--sv-mint-pill); } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-prefix { display: grid; place-items: center; padding: 0 12px; border-right: 1px solid var(--sv-line); border-radius: 9px 0 0 9px; background: var(--sv-surface-2); color: var(--sv-ink-2); font-size: 15px; font-weight: 700; } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group .sv-input { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 0 9px 9px 0; background: transparent; box-shadow: none; } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group .sv-input:focus { box-shadow: none; } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input:disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-btn svg { width: 18px; height: 18px; flex-shrink: 0; } /* Busy (submitting) keeps the brand color; only a truly unavailable button greys out. */ [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-btn--primary[aria-busy='true']:disabled { background: var(--primary); color: var(--sv-on-primary); border-color: transparent; border-style: solid; opacity: 0.82; cursor: progress; } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-spin { animation: sv-acct-spin 0.9s linear infinite; } @keyframes sv-acct-spin { to { transform: rotate(360deg); } } /* ───────── Cek Transaksi ───────── */ [data-theme='fresh'] .sv-track-head { margin-bottom: 26px; } [data-theme='fresh'] .sv-track-layout { display: grid; gap: 20px; align-items: start; } [data-theme='fresh'] .sv-track-form { display: grid; gap: 16px; padding: 22px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-track-assure { display: grid; gap: 10px; margin: 2px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px dashed var(--sv-line-strong); font-size: 13px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-track-assure li { display: flex; align-items: flex-start; gap: 9px; } [data-theme='fresh'] .sv-track-assure svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-track-assure a { font-weight: 700; color: var(--sv-primary-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } [data-theme='fresh'] .sv-track-results { min-width: 0; } [data-theme='fresh'] .sv-track-results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 14px; } [data-theme='fresh'] .sv-track-results-title { font-size: 18px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-track-results-sub { font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-track-list { display: grid; gap: 14px; } /* Status guide (before searching) */ [data-theme='fresh'] .sv-track-guide { padding: 22px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-track-guide-title { font-size: 17px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-track-guide-sub { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-track-guide-list { display: grid; margin: 14px 0 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-track-guide-list li { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-track-guide-list li:last-child { padding-bottom: 0; } [data-theme='fresh'] .sv-track-guide-list p { font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-track-guide-list .sv-order-status { justify-self: start; } /* Error + empty */ [data-theme='fresh'] .sv-track-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--sv-radius); background: var(--sv-err-soft); border: 1px solid color-mix(in oklab, var(--sv-err) 24%, transparent); color: var(--sv-err); } [data-theme='fresh'] .sv-track-alert > svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; } [data-theme='fresh'] .sv-track-alert-title { font-size: 15px; font-weight: 800; } [data-theme='fresh'] .sv-track-alert-text { margin-top: 2px; font-size: 13.5px; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-track-empty { display: grid; justify-items: center; gap: 8px; padding: clamp(28px, 5vw, 44px) 22px; text-align: center; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-track-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-track-empty-icon svg { width: 26px; height: 26px; } [data-theme='fresh'] .sv-track-empty-title { font-size: 17px; font-weight: 800; color: var(--sv-ink); text-wrap: balance; } [data-theme='fresh'] .sv-track-empty-text { max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-track-empty .sv-btn { margin-top: 10px; } /* Order card */ [data-theme='fresh'] .sv-order { padding: 18px 20px 0; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow); } [data-theme='fresh'] .sv-order-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; } [data-theme='fresh'] .sv-order-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; } [data-theme='fresh'] .sv-order-titles { min-width: 0; } [data-theme='fresh'] .sv-order-game { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-order-product { margin-top: 2px; font-size: 16.5px; line-height: 1.3; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-order-status { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: var(--tone-soft); color: var(--tone-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone-ink) 22%, transparent); } [data-theme='fresh'] .sv-order-status svg { width: 15px; height: 15px; flex-shrink: 0; } [data-theme='fresh'] .sv-order-status[data-status='processing'] svg { animation: sv-acct-spin 2.4s linear infinite; } [data-theme='fresh'] .sv-order-note { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--sv-mint); font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-order-help { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 36px; padding: 0 12px; border-radius: 9px; background: var(--sv-surface); border: 1px solid var(--sv-line-strong); font-size: 13px; font-weight: 700; color: var(--sv-ink); transition: border-color .15s, color .15s; } [data-theme='fresh'] .sv-order-help:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-order-help svg { width: 16px; height: 16px; } /* Progress: dipesan → pembayaran → pengiriman */ [data-theme='fresh'] .sv-order-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-order-step { position: relative; display: grid; align-content: start; gap: 1px; min-width: 0; padding-right: 10px; } [data-theme='fresh'] .sv-order-step:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 34px; right: 10px; height: 2px; border-radius: 2px; background: var(--sv-line-strong); } [data-theme='fresh'] .sv-order-step[data-state='done']:not(:last-child)::after { background: color-mix(in oklab, var(--sv-ok) 55%, var(--sv-line)); } [data-theme='fresh'] .sv-order-step-dot { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 8px; border-radius: 999px; background: var(--tone-soft); color: var(--tone-ink); box-shadow: inset 0 0 0 1.5px var(--tone-ink); } [data-theme='fresh'] .sv-order-step-dot svg { width: 13px; height: 13px; stroke-width: 2.6; } [data-theme='fresh'] .sv-order-step[data-state='done'] .sv-order-step-dot { background: var(--sv-ok); color: #fff; box-shadow: none; } [data-theme='fresh'] .sv-order-step[data-state='current'] .sv-order-step-dot { background: var(--sv-surface); box-shadow: inset 0 0 0 1.5px var(--tone-ink), 0 0 0 4px var(--tone-soft); } [data-theme='fresh'] .sv-order-step[data-state='current'][data-step='delivery'] .sv-order-step-dot svg { animation: sv-acct-spin 2.4s linear infinite; } [data-theme='fresh'] .sv-order-step[data-state='idle'] .sv-order-step-dot { background: var(--sv-surface); box-shadow: inset 0 0 0 1.5px var(--sv-line-strong); } [data-theme='fresh'] .sv-order-step-label { font-size: 12px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-order-step-value { font-size: 13.5px; line-height: 1.35; font-weight: 750; color: var(--tone-ink); } [data-theme='fresh'] .sv-order-step[data-step='ordered'] .sv-order-step-value { font-weight: 600; color: var(--sv-ink); } [data-theme='fresh'] .sv-order-step[data-state='idle'] .sv-order-step-value { font-weight: 600; color: var(--sv-ink-3); } /* ID, method, serial */ [data-theme='fresh'] .sv-order-meta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px 28px; margin: 16px 0 0; padding: 14px 0; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-order-cell { display: grid; align-content: start; gap: 6px; min-width: 0; } [data-theme='fresh'] .sv-order-cell--wide { grid-column: 1 / -1; } [data-theme='fresh'] .sv-order-cell dt { font-size: 12px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-order-cell dd { min-width: 0; font-size: 14px; font-weight: 600; color: var(--sv-ink); } [data-theme='fresh'] .sv-order-copyrow { display: flex; align-items: center; gap: 10px; min-width: 0; } [data-theme='fresh'] .sv-order-id { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='fresh'] .sv-order-copy { position: relative; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--sv-line-strong); background: var(--sv-surface); font-size: 12.5px; font-weight: 700; color: var(--sv-ink-2); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; } [data-theme='fresh'] .sv-order-copy::after { content: ''; position: absolute; inset: -5px; } [data-theme='fresh'] .sv-order-copy:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-order-copy svg { width: 14px; height: 14px; } [data-theme='fresh'] .sv-order-method { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } [data-theme='fresh'] .sv-order-method-logo { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 28px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--sv-line); background: #fff; } [data-theme='fresh'] .sv-order-method-logo img { width: 100%; height: 100%; object-fit: contain; } [data-theme='fresh'] .sv-order-method-logo--icon { color: var(--sv-primary-ink); background: var(--sv-mint-pill); border-color: transparent; } [data-theme='fresh'] .sv-order-method-logo--icon svg { width: 16px; height: 16px; } [data-theme='fresh'] .sv-order-muted { font-size: 13px; font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 16px; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-order-foot span { font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-order-foot strong { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-order--skeleton { padding-bottom: 18px; box-shadow: none; } [data-theme='fresh'] .sv-order--skeleton .sv-order-head { grid-template-columns: auto minmax(0, 1fr); } [data-theme='fresh'] .sv-order-sk { display: block; height: 12px; border-radius: 6px; width: 70%; } [data-theme='fresh'] .sv-order-sk--short { width: 32%; margin-bottom: 8px; } [data-theme='fresh'] .sv-order-sk--note { width: 100%; height: 40px; margin-top: 14px; border-radius: 10px; } [data-theme='fresh'] .sv-order-sk--row { width: 100%; height: 14px; margin-top: 16px; } [data-theme='fresh'] .sv-order-sk--track { width: 100%; height: 44px; margin-top: 18px; } /* ───────── Masuk / Daftar ───────── */ [data-theme='fresh'] .sv-auth { padding-block: clamp(20px, 5vw, 56px) clamp(48px, 8vw, 96px); } [data-theme='fresh'] .sv-auth-shell { display: grid; max-width: 460px; margin-inline: auto; } [data-theme='fresh'] .sv-auth-aside { display: none; } [data-theme='fresh'] .sv-auth-card { min-width: 0; padding: 28px 24px 24px; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: 22px; box-shadow: var(--sv-shadow-lg); } [data-theme='fresh'] .sv-auth-brand { display: flex; align-items: center; gap: 10px; min-width: 0; } [data-theme='fresh'] .sv-auth-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; object-fit: cover; } [data-theme='fresh'] .sv-auth-logo--initial { display: grid; place-items: center; background: var(--primary); color: var(--sv-on-primary); font-size: 18px; font-weight: 800; } [data-theme='fresh'] .sv-auth-store { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--sv-ink); } [data-theme='fresh'] .sv-auth-title { margin-top: 22px; font-size: clamp(24px, 3vw, 28px); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: var(--sv-ink); } [data-theme='fresh'] .sv-auth-sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 20px; padding: 4px; border-radius: 13px; background: var(--sv-surface-2); border: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-segmented-tab { min-height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 14.5px; font-weight: 700; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-segmented-tab:hover { color: var(--sv-ink); } [data-theme='fresh'] .sv-segmented-tab[aria-selected='true'] { background: var(--sv-surface); color: var(--sv-primary-ink); box-shadow: inset 0 0 0 1.5px var(--primary), 0 4px 10px -6px color-mix(in oklab, var(--primary) 60%, transparent); } [data-theme='fresh'] .sv-auth-form { display: grid; gap: 16px; margin-top: 20px; } [data-theme='fresh'] .sv-auth-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sv-err-soft); border: 1px solid color-mix(in oklab, var(--sv-err) 24%, transparent); color: var(--sv-err); font-size: 13.5px; line-height: 1.45; font-weight: 650; } [data-theme='fresh'] .sv-auth-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } [data-theme='fresh'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group--password .sv-input { border-radius: 9px 0 0 9px; } [data-theme='fresh'] .sv-input-toggle { display: grid; place-items: center; flex-shrink: 0; width: 46px; border: 0; border-radius: 0 9px 9px 0; background: transparent; color: var(--sv-ink-3); cursor: pointer; transition: color .15s; } [data-theme='fresh'] .sv-input-toggle:hover, [data-theme='fresh'] .sv-input-toggle[aria-pressed='true'] { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-input-toggle svg { width: 19px; height: 19px; } [data-theme='fresh'] .sv-auth-form .sv-btn--primary { margin-top: 4px; min-height: 48px; } [data-theme='fresh'] .sv-auth-switch { text-align: center; font-size: 14px; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-auth-switch button { min-height: 44px; padding: 0 4px; border: 0; background: none; font-weight: 800; color: var(--sv-primary-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } [data-theme='fresh'] .sv-auth-legal { font-size: 12.5px; line-height: 1.55; text-align: center; color: var(--sv-ink-2); text-wrap: balance; } [data-theme='fresh'] .sv-auth-legal a { font-weight: 700; color: var(--sv-primary-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } [data-theme='fresh'] .sv-auth-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px dashed var(--sv-line-strong); font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-auth-trust li { display: inline-flex; align-items: center; gap: 6px; } [data-theme='fresh'] .sv-auth-trust svg { width: 15px; height: 15px; color: var(--sv-ok); } @media (min-width: 960px) { [data-theme='fresh'] .sv-auth-shell { max-width: 1000px; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-lg); overflow: hidden; } /* The welcome side is a deep stage (mockup F). */ [data-theme='fresh'] .sv-auth-aside { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-on-stage); background: radial-gradient(55% 90% at 100% 0%, var(--sv-stage-2) 0, transparent 62%), radial-gradient(40% 70% at 0% 100%, var(--sv-lime-glow), transparent 70%), var(--sv-stage); --sv-ring: var(--sv-primary-light); --sv-notch-bg: var(--sv-stage); } [data-theme='fresh'] .sv-auth-aside::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--sv-stage-line); opacity: 0.22; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22520%22%20viewBox%3D%220%200%20640%20520%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-26C110%20-58%20210%2014%20320%20-22S530%206%20640%20-26%22%2F%3E%3Cpath%20d%3D%22M0%2026C110%20-6%20210%2066%20320%2030S530%2058%20640%2026%22%2F%3E%3Cpath%20d%3D%22M0%2078C110%2046%20210%20118%20320%2082S530%20110%20640%2078%22%2F%3E%3Cpath%20d%3D%22M0%20130C110%2098%20210%20170%20320%20134S530%20162%20640%20130%22%2F%3E%3Cpath%20d%3D%22M0%20182C110%20150%20210%20222%20320%20186S530%20214%20640%20182%22%2F%3E%3Cpath%20d%3D%22M0%20234C110%20202%20210%20274%20320%20238S530%20266%20640%20234%22%2F%3E%3Cpath%20d%3D%22M0%20286C110%20254%20210%20326%20320%20290S530%20318%20640%20286%22%2F%3E%3Cpath%20d%3D%22M0%20338C110%20306%20210%20378%20320%20342S530%20370%20640%20338%22%2F%3E%3Cpath%20d%3D%22M0%20390C110%20358%20210%20430%20320%20394S530%20422%20640%20390%22%2F%3E%3Cpath%20d%3D%22M0%20442C110%20410%20210%20482%20320%20446S530%20474%20640%20442%22%2F%3E%3Cpath%20d%3D%22M0%20494C110%20462%20210%20534%20320%20498S530%20526%20640%20494%22%2F%3E%3Cpath%20d%3D%22M0%20546C110%20514%20210%20586%20320%20550S530%20578%20640%20546%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 640px 520px; mask-size: 640px 520px; -webkit-mask-position: center; mask-position: center; } [data-theme='fresh'] .sv-auth-aside .sv-section-kicker { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-auth-aside .sv-section-title { color: var(--sv-on-stage); } [data-theme='fresh'] .sv-auth-aside .sv-section-sub { color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-auth-aside .sv-section-link { background: var(--sv-lime); color: var(--sv-on-lime); } [data-theme='fresh'] .sv-auth-aside .sv-section-link:hover { box-shadow: 0 0 0 2px var(--sv-primary-light); } [data-theme='fresh'] .sv-auth-aside { order: -1; display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; border-radius: 0; } [data-theme='fresh'] .sv-auth-aside-title { max-width: 15ch; margin-top: 2px; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: var(--sv-on-stage); text-wrap: balance; } [data-theme='fresh'] .sv-auth-benefits { display: grid; gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-auth-benefits li { display: flex; align-items: flex-start; gap: 14px; font-size: 13.5px; line-height: 1.5; color: var(--sv-on-stage-2); } [data-theme='fresh'] .sv-auth-benefits strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 800; color: var(--sv-on-stage); } [data-theme='fresh'] .sv-auth-benefit-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: rgb(255 255 255 / 0.1); color: var(--sv-primary-light); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); } [data-theme='fresh'] .sv-auth-benefit-icon svg { width: 20px; height: 20px; } [data-theme='fresh'] .sv-auth-card { padding: 44px 44px 32px; border: 0; border-radius: 0; box-shadow: none; } } @media (max-width: 400px) { [data-theme='fresh'] .sv-auth-card { padding: 22px 18px 20px; border-radius: 18px; } [data-theme='fresh'] .sv-auth-title { margin-top: 18px; } } /* ───────── Pencarian ───────── */ [data-theme='fresh'] .sv-search-head { margin-bottom: 18px; } [data-theme='fresh'] .sv-search-term { color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-search-count { font-weight: 600; } [data-theme='fresh'] .sv-search-form { display: flex; gap: 10px; max-width: 640px; margin-bottom: clamp(24px, 4vw, 36px); } [data-theme='fresh'] .sv-search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; } [data-theme='fresh'] .sv-search-field > svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--sv-ink-3); pointer-events: none; } [data-theme='fresh'] .sv-search-input { width: 100%; height: 50px; padding: 0 16px 0 46px; border-radius: 14px; border: 1px solid var(--sv-line-strong); background: var(--sv-surface); box-shadow: var(--sv-shadow); font-size: 16px; color: var(--sv-ink); transition: border-color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-search-input::placeholder { color: var(--sv-ink-3); } [data-theme='fresh'] .sv-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--sv-mint-pill); } [data-theme='fresh'] .sv-search-form .sv-btn { min-height: 50px; padding: 0 24px; border-radius: 14px; } [data-theme='fresh'] .sv-search-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; padding: 22px 24px; border-radius: var(--sv-radius-lg); } [data-theme='fresh'] .sv-search-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-search-empty-icon svg { width: 26px; height: 26px; } [data-theme='fresh'] .sv-search-empty-title { font-size: 18px; font-weight: 800; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='fresh'] .sv-search-empty-text { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-search-empty-cta { flex-shrink: 0; } [data-theme='fresh'] .sv-search-suggest { margin-top: clamp(32px, 5vw, 48px); } /* ───────── Legal (Kebijakan Privasi, Syarat & Ketentuan) ───────── */ [data-theme='fresh'] .sv-legal-head { max-width: 820px; margin-bottom: clamp(22px, 3vw, 32px); } [data-theme='fresh'] .sv-legal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-legal-meta li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: var(--sv-mint); font-size: 13px; font-weight: 600; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-legal-meta svg { width: 15px; height: 15px; color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-legal-layout { display: grid; gap: 20px; align-items: start; } [data-theme='fresh'] .sv-legal-main { min-width: 0; } [data-theme='fresh'] .sv-legal-toc { display: none; } [data-theme='fresh'] .sv-legal-toc-title { margin-bottom: 8px; padding-left: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-legal-toc-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-legal-toc-list a { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--sv-ink-2); transition: background-color .15s, color .15s, box-shadow .15s; } [data-theme='fresh'] .sv-legal-toc-list a:hover { background: var(--sv-mint); color: var(--sv-ink); } [data-theme='fresh'] .sv-legal-toc-list a[aria-current] { background: var(--sv-mint-pill); color: var(--sv-primary-ink); } [data-theme='fresh'] .sv-legal-toc-num { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: -1px; border-radius: 7px; background: var(--sv-surface); border: 1px solid var(--sv-line); font-size: 12px; font-weight: 800; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-legal-toc-list a[aria-current] .sv-legal-toc-num { background: var(--primary); border-color: transparent; color: var(--sv-on-primary); } [data-theme='fresh'] .sv-legal-toc-mobile details { margin-bottom: 14px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-surface); box-shadow: var(--sv-shadow); } [data-theme='fresh'] .sv-legal-toc-mobile summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; list-style: none; font-size: 15px; font-weight: 800; color: var(--sv-ink); cursor: pointer; } [data-theme='fresh'] .sv-legal-toc-mobile summary::-webkit-details-marker { display: none; } [data-theme='fresh'] .sv-legal-toc-mobile summary svg { width: 18px; height: 18px; color: var(--sv-ink-3); transition: transform .2s; } [data-theme='fresh'] .sv-legal-toc-mobile details[open] summary svg { transform: rotate(180deg); } [data-theme='fresh'] .sv-legal-toc-count { font-weight: 600; color: var(--sv-ink-3); } [data-theme='fresh'] .sv-legal-toc-mobile .sv-legal-toc-list { padding: 6px 6px 8px; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-legal-body { padding: clamp(22px, 4vw, 44px) clamp(18px, 4.4vw, 52px); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-surface); box-shadow: var(--sv-shadow); } [data-theme='fresh'] .sv-legal-section { max-width: 68ch; scroll-margin-top: calc(var(--sv-header-bar-h, 64px) + 24px); font-size: 16.5px; line-height: 1.75; color: var(--sv-ink); } [data-theme='fresh'] .sv-legal-section + .sv-legal-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--sv-line); } [data-theme='fresh'] .sv-legal-h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-legal-num { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; background: var(--sv-mint-pill); color: var(--sv-primary-ink); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } [data-theme='fresh'] .sv-legal-section p + p, [data-theme='fresh'] .sv-legal-section p + .sv-legal-list { margin-top: 10px; } [data-theme='fresh'] .sv-legal-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } [data-theme='fresh'] .sv-legal-list li { position: relative; padding-left: 24px; } [data-theme='fresh'] .sv-legal-list li::before { content: ''; position: absolute; left: 6px; top: 0.66em; width: 8px; height: 8px; border-radius: 999px; background: var(--primary); } [data-theme='fresh'] .sv-legal-help { position: relative; isolation: isolate; overflow: hidden; padding: 26px; border-radius: var(--sv-radius-xl); background: var(--sv-mint); --sv-notch-bg: var(--sv-mint); } [data-theme='fresh'] .sv-legal-help::after { content: ''; position: absolute; z-index: -1; right: -70px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: var(--sv-mint-shape); opacity: 0.85; pointer-events: none; } [data-theme='fresh'] .sv-legal-help::before { content: ''; position: absolute; z-index: -1; left: -46px; bottom: -64px; width: 170px; height: 170px; border-radius: 44px; background: var(--sv-panel-square); opacity: 0.75; transform: rotate(18deg); pointer-events: none; } @media (max-width: 760px) { [data-theme='fresh'] .sv-legal-help { padding: 20px 16px; border-radius: 24px; } [data-theme='fresh'] .sv-legal-help::after { right: -90px; top: -96px; width: 210px; height: 210px; } [data-theme='fresh'] .sv-legal-help::before { left: -60px; bottom: -74px; width: 150px; height: 150px; border-radius: 40px; } } [data-theme='fresh'] .sv-legal-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 20px; padding: 24px 26px; } [data-theme='fresh'] .sv-legal-help-title { font-size: 17px; font-weight: 800; color: var(--sv-ink); } [data-theme='fresh'] .sv-legal-help-text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='fresh'] .sv-legal-help-actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (min-width: 1024px) { [data-theme='fresh'] .sv-track-layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; } [data-theme='fresh'] .sv-track-side { position: sticky; top: calc(var(--sv-header-offset, 108px) + 16px); transition: top .32s cubic-bezier(.2, .7, .2, 1); } [data-theme='fresh'] .sv-legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; } [data-theme='fresh'] .sv-legal-toc { display: block; position: sticky; top: calc(var(--sv-header-offset, 108px) + 20px); transition: top .32s cubic-bezier(.2, .7, .2, 1); } [data-theme='fresh'] .sv-legal-toc-mobile { display: none; } /* The header's wide search covers this on desktop. */ [data-theme='fresh'] .sv-search-form { display: none; } } @media (max-width: 640px) { [data-theme='fresh'] .sv-track-head { margin-bottom: 18px; } [data-theme='fresh'] .sv-track-form, [data-theme='fresh'] .sv-track-guide { padding: 18px 16px; } [data-theme='fresh'] .sv-track-guide-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; } [data-theme='fresh'] .sv-order { padding: 16px 16px 0; } [data-theme='fresh'] .sv-order-head { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; } [data-theme='fresh'] .sv-order-head .sv-order-status { grid-column: 2; justify-self: start; margin-top: 6px; } [data-theme='fresh'] .sv-order-mark { width: 42px; height: 42px; border-radius: 12px; font-size: 13px; } [data-theme='fresh'] .sv-order-note { flex-wrap: wrap; font-size: 14px; } [data-theme='fresh'] .sv-order-help { min-height: 44px; } [data-theme='fresh'] .sv-order-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; } [data-theme='fresh'] .sv-order-step { padding-right: 6px; } [data-theme='fresh'] .sv-order-step:not(:last-child)::after { left: 30px; right: 6px; } [data-theme='fresh'] .sv-order-step-value { font-size: 13px; } [data-theme='fresh'] .sv-search-form .sv-btn { padding: 0 18px; } [data-theme='fresh'] .sv-search-empty { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 20px 18px; } [data-theme='fresh'] .sv-search-empty-icon { width: 48px; height: 48px; border-radius: 14px; } [data-theme='fresh'] .sv-legal-section { font-size: 16px; line-height: 1.7; } [data-theme='fresh'] .sv-legal-h2 { font-size: 17.5px; align-items: flex-start; } [data-theme='fresh'] .sv-legal-num { width: 28px; height: 28px; font-size: 12.5px; } [data-theme='fresh'] .sv-legal-help { padding: 20px 18px; } [data-theme='fresh'] .sv-legal-help-actions { width: 100%; } [data-theme='fresh'] .sv-legal-help-actions .sv-btn { flex: 1 1 auto; } } [data-theme='fresh'] :is(.sv-flash-card, a.sv-trend-card, a.sv-voucher-card, a.sv-game-card, .sv-joki-card, .sv-article-card-link), [data-theme='fresh'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game) { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; } @media (hover: hover) { [data-theme='fresh'] :is(.sv-flash-card, a.sv-trend-card, a.sv-voucher-card, a.sv-game-card, .sv-joki-card, .sv-article-card-link):hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--sv-ring), var(--sv-glow); } [data-theme='fresh'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game):hover:not(:disabled):not([aria-pressed='true']) { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--sv-ring), var(--sv-glow); } :is([data-theme='fresh'] .sv-landing .sv-joki-section, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, [data-theme='fresh'] .sv-landing:not(:has(.sv-joki-section)):not(:has(.sv-vouchers)) .sv-trending) :is(.sv-joki-card, a.sv-voucher-card, a.sv-trend-card):hover { box-shadow: 0 0 0 2px var(--sv-ring), 0 18px 34px -18px rgb(0 0 0 / 0.55); } } [data-theme='fresh'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game)[aria-pressed='true'] { transform: none; border-color: var(--primary); background: var(--sv-mint-pill); box-shadow: inset 0 0 0 1px var(--primary), 0 12px 24px -18px color-mix(in oklab, var(--primary) 80%, transparent); } /* Media inside cards stays put (no zoom); arrows and emblems never move by themselves. */ [data-theme='fresh'] :is(.sv-flash-card, a.sv-trend-card, a.sv-voucher-card, a.sv-game-card, .sv-joki-card, .sv-article-card-link) :is(img, svg) { transition: none; } [data-theme='fresh'] :is(.sv-joki-card, .sv-joki-card:hover) .sv-joki-card-emblem { transform: none; } /* Check badge for the joki payment cards (the markup has none). */ [data-theme='fresh'] .sv-joki-pay { position: relative; } [data-theme='fresh'] .sv-joki-pay[aria-pressed='true']::before { content: ''; position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 3px var(--sv-surface); } [data-theme='fresh'] .sv-joki-pay[aria-pressed='true']::after { content: ''; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; background: var(--sv-on-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } @media (prefers-reduced-motion: reduce) { [data-theme='fresh'] :is(.sv-flash-card, a.sv-trend-card, a.sv-voucher-card, a.sv-game-card, .sv-joki-card, .sv-article-card-link):hover, [data-theme='fresh'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game):hover { transform: none !important; } }