/* ========================================================================== SekolahYatim — app stylesheet (mobile-first) Colors come from Pengaturan → Brand & Warna (injected as CSS variables). ========================================================================== */ :root { --sy-primary: #2F7D3A; --sy-accent: #EC9A2B; --sy-navy: #1A2F5E; --sy-bg: #FFFFFF; --sy-blue: color-mix(in srgb, var(--sy-navy) 55%, #3D7BFF); --sy-splash: #1D4A2E; --sy-primary-deep: color-mix(in srgb, var(--sy-primary) 62%, #0c1a10); --sy-primary-soft: color-mix(in srgb, var(--sy-primary) 13%, #fff); --sy-primary-tint: color-mix(in srgb, var(--sy-primary) 6%, #fff); --sy-accent-soft: color-mix(in srgb, var(--sy-blue) 14%, #fff); --sy-accent-tint: color-mix(in srgb, var(--sy-blue) 6%, #fff); --sy-accent-deep: color-mix(in srgb, var(--sy-blue) 80%, #0a1838); --sy-navy-soft: color-mix(in srgb, var(--sy-navy) 12%, #fff); --sy-navy-tint: color-mix(in srgb, var(--sy-navy) 6%, #fff); --ink: color-mix(in srgb, var(--sy-navy) 82%, #061033); --ink-2: color-mix(in srgb, var(--sy-navy) 62%, #8a93a8); --muted: #6B7385; --line: #E5E8EF; --line-2: #EDF0F5; --surface: #FFFFFF; --surface-2: #F6F8FB; --dark: color-mix(in srgb, var(--sy-navy) 88%, #040b24); --dark-2: var(--sy-navy); --on-accent: color-mix(in srgb, var(--sy-navy) 90%, #040b24); --shade: 15, 30, 70; --ok: #2F7D3A; --err: #C2412D; --warn: #B7791F; --r-xl: 30px; --r-lg: 24px; --r-md: 18px; --r-sm: 12px; --shadow-sm: 0 1px 2px rgba(15, 30, 70, .06); --shadow: 0 1px 2px rgba(15, 30, 70, .05), 0 12px 30px -16px rgba(15, 30, 70, .22); --shadow-lg: 0 24px 60px -24px rgba(15, 30, 70, .45); --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --dock-h: 72px; --safe-b: env(safe-area-inset-bottom, 0px); --ease: cubic-bezier(.2, .8, .2, 1); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--sy-bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; padding-bottom: 0; } img, svg, video { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { line-height: 1.15; margin: 0; letter-spacing: -.02em; } p { margin: 0; } :focus-visible { outline: 2.5px solid var(--sy-accent); outline-offset: 2px; border-radius: 8px; } .sy-ico { flex: none; display: inline-block; vertical-align: middle; } .syt-skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--dark); color: #fff; padding: 8px 14px; border-radius: 99px; } .syt-skip:focus { left: 8px; } .sy-hp { position: absolute !important; left: -9999px !important; opacity: 0; } [hidden] { display: none !important; } .syt-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; } .syt-main { min-height: 60vh; } /* ---------- Splash ---------- */ .syt-splash { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--sy-splash) 70%, #3d8a4a) 0%, var(--sy-splash) 60%); color: #fff; text-align: center; transition: opacity .55s var(--ease), visibility .55s; } .syt-splash.is-done { opacity: 0; visibility: hidden; } .sy-nosplash .syt-splash { display: none; } .syt-splash__inner { display: flex; flex-direction: column; align-items: center; padding: 24px; } .syt-splash__leaf { width: 76px; height: 76px; margin-bottom: 18px; } .syt-splash__stem { fill: none; stroke: var(--sy-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: sytDraw .7s .1s var(--ease) forwards; } .syt-splash__blade { fill: #fff; transform-origin: 44px 84px; transform: scale(0) rotate(-20deg); animation: sytGrow .7s .5s var(--ease) forwards; } .syt-splash__logo { width: min(68vw, 300px); opacity: 0; transform: translateY(10px); animation: sytUp .6s .75s var(--ease) forwards; } .syt-splash__tag { margin-top: 12px; font-size: 14px; font-weight: 500; opacity: 0; animation: sytFade .6s 1s forwards; color: rgba(255, 255, 255, .78); } .syt-splash__bar { width: 120px; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .16); margin-top: 28px; overflow: hidden; } .syt-splash__bar i { display: block; height: 100%; width: 40%; border-radius: 9px; background: var(--sy-accent); animation: sytLoad 1.1s ease-in-out infinite; } .syt-splash__powered { position: absolute; bottom: calc(24px + var(--safe-b)); left: 0; right: 0; font-size: 12px; color: rgba(255, 255, 255, .55); letter-spacing: .02em; } @keyframes sytDraw { to { stroke-dashoffset: 0; } } @keyframes sytGrow { to { transform: scale(1) rotate(0); } } @keyframes sytUp { to { opacity: 1; transform: none; } } @keyframes sytFade { to { opacity: 1; } } @keyframes sytLoad { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } } /* ---------- App bar ---------- */ .syt-bar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--sy-bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .2s; } .syt-bar.is-scrolled { box-shadow: 0 1px 0 var(--line); } .syt-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 68px; } .syt-logo img { display: block; width: 150px; height: auto; } .syt-hello { display: flex; align-items: center; gap: 12px; min-width: 0; } .syt-hello b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; } .syt-hello small { display: flex; gap: 4px; align-items: center; color: var(--ink-2); font-size: 12.5px; font-weight: 500; } .syt-hello small .sy-ico { color: var(--sy-accent); } .syt-hello__avatar { box-shadow: 0 0 0 4px var(--sy-accent-soft); } .syt-topnav { display: none; } .syt-bar__end { margin-left: auto; display: flex; align-items: center; gap: 10px; } .syt-btn-donate { display: none; } .syt-login { font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 99px; background: var(--dark); color: #fff; } .syt-roundbtn { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 0; overflow: visible; } .syt-roundbtn .sy-avatar { --s: 40px !important; } .syt-roundbtn--sm { width: 40px; height: 40px; } .syt-dot { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D; border: 2px solid var(--surface); } /* ---------- Avatars ---------- */ .sy-avatar { width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; flex: none; background: var(--sy-primary-soft); color: var(--sy-primary-deep); font-weight: 800; font-size: calc(var(--s, 40px) * .36); letter-spacing: -.02em; } .sy-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Typography helpers ---------- */ .sy-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--sy-accent-deep); margin-bottom: 4px; } .sy-h2 { font-size: 21px; font-weight: 800; } .sy-h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .sy-muted { color: var(--muted); font-size: 14px; } .sy-center { text-align: center; } .sy-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--sy-primary); } .sy-link:hover { text-decoration: underline; text-underline-offset: 3px; } .sy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .sy-grow { flex: 1; } .sy-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .sy-head__link { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; padding: 6px 4px; } /* ---------- Buttons ---------- */ .sy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 99px; border: 1.5px solid transparent; font-weight: 700; font-size: 15px; letter-spacing: -.005em; line-height: 1; transition: transform .15s var(--ease), background .15s, box-shadow .15s; white-space: nowrap; text-decoration: none !important; } .sy-btn:active { transform: scale(.97); } .sy-btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; } .sy-btn--block { width: 100%; } .sy-btn--primary { background: var(--sy-primary); color: #fff; box-shadow: 0 10px 22px -12px var(--sy-primary); } .sy-btn--primary:hover { background: var(--sy-primary-deep); } .sy-btn--accent { background: var(--sy-accent); color: var(--on-accent); box-shadow: 0 10px 22px -12px var(--sy-accent); } .sy-btn--accent:hover { background: color-mix(in srgb, var(--sy-accent) 88%, var(--sy-navy)); } .sy-btn--dark { background: var(--dark); color: #fff; } .sy-btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); } .sy-btn--ghost:hover { border-color: var(--ink-2); } .sy-btn--wa { background: #E7F6EC; color: #0E7A3C; } .sy-btn--linkedin { background: #0A66C2; color: #fff; } .sy-btn.is-copied { background: var(--sy-primary-soft); color: var(--sy-primary-deep); } /* ---------- Cards & tiles ---------- */ .sy-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); } .sy-card--cream { background: var(--surface-2); } .sy-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sy-tile { position: relative; border-radius: var(--r-lg); padding: 16px 16px 14px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); border: 1.5px solid var(--line); overflow: hidden; } .sy-tile::before { content: ''; position: absolute; left: -1px; top: -1px; width: 66px; height: 58px; border-radius: 0 0 22px 0; background: var(--tile-tab, var(--line-2)); } .sy-tile__icon { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tile-ico, var(--dark)); color: #fff; margin: -6px 0 0 -6px; } .sy-tile__label { position: absolute; left: 74px; top: 18px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .sy-tile__value { font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1; text-align: center; margin-top: 14px; } .sy-tile--orange { border-color: color-mix(in srgb, var(--sy-blue) 45%, #fff); background: color-mix(in srgb, var(--sy-blue) 5%, #fff); --tile-tab: color-mix(in srgb, var(--sy-blue) 14%, #fff); --tile-ico: var(--sy-blue); } .sy-tile--navy { border-color: color-mix(in srgb, var(--sy-navy) 45%, #fff); background: var(--sy-navy-tint); --tile-tab: var(--sy-navy-soft); --tile-ico: var(--sy-navy); } .sy-tile--green { border-color: color-mix(in srgb, var(--sy-primary) 45%, #fff); background: var(--sy-primary-tint); --tile-tab: var(--sy-primary-soft); --tile-ico: var(--sy-primary); } .sy-tile--cream { --tile-tab: #EEF2F8; --tile-ico: var(--dark); } .sy-tiles--4 { grid-template-columns: repeat(2, 1fr); } /* ---------- Home: hero ---------- */ .syt-home { padding-top: 4px; } .syt-hero { display: grid; gap: 14px; } .syt-hero__card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); padding: 26px 22px 24px; background: linear-gradient(150deg, color-mix(in srgb, var(--sy-primary) 82%, #9bd27a) 0%, var(--sy-primary) 45%, var(--sy-primary-deep) 100%); color: #fff; min-height: 380px; box-shadow: 0 2px 0 rgba(var(--shade), .04), 0 28px 50px -30px var(--sy-primary-deep); } .syt-hero__card::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -10px; height: 24px; border-radius: 0 0 30px 30px; background: color-mix(in srgb, var(--sy-primary-deep) 70%, var(--sy-navy)); z-index: -2; } .syt-hero__deco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; } .syt-hero__text { position: relative; z-index: 2; max-width: 30ch; } .syt-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); } .syt-hero__title { font-size: clamp(30px, 8.6vw, 52px); font-weight: 800; letter-spacing: -.035em; margin: 14px 0 10px; text-wrap: balance; } .syt-hero__lead { font-size: 14.5px; color: rgba(255, 255, 255, .84); max-width: 34ch; } .syt-hero__cta { display: flex; align-items: center; gap: 14px; margin-top: 46px; } .syt-hero__go { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; flex: none; } .syt-hero__go::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: var(--sy-accent); border-right-color: var(--sy-accent); transform: rotate(-20deg); } .syt-hero__go span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: #fff; transition: transform .2s var(--ease); } .syt-hero__go:hover span { transform: translateX(2px); } .syt-hero__links { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .syt-hero__links b { font-weight: 800; font-size: 15px; } .syt-hero__alt { display: inline-flex; align-items: center; gap: 4px; color: #FFE1AE; font-weight: 600; } .syt-hero__art { position: absolute; right: -18px; bottom: -4px; width: 150px; z-index: 1; pointer-events: none; } .syt-hero__art img, .syt-hero__art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(var(--shade), .2)); } .syt-art { animation: sytFloat 6s ease-in-out infinite; } @keyframes sytFloat { 50% { transform: translateY(-6px) rotate(-1deg); } } .syt-hero__side { display: grid; gap: 14px; } /* "progress performance" style seat card */ .syt-seatcard { display: block; background: #F5F7FB; border-radius: var(--r-lg); padding: 18px; border: 1px solid var(--line-2); } .syt-seatcard__head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; } .syt-seatcard__head b { font-weight: 800; letter-spacing: -.01em; } .syt-seatcard__more { font-weight: 800; letter-spacing: 1px; color: var(--ink-2); } .syt-seatcard__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 12px; } .syt-seatcard__col { min-width: 0; text-align: center; position: relative; } .syt-seatcard__bar { display: block; height: 44px; border-radius: 8px; margin-bottom: 8px; position: relative; } .syt-seatcard__col--orange .syt-seatcard__bar { background: linear-gradient(to top, var(--sy-blue) 0 var(--f), color-mix(in srgb, var(--sy-blue) 16%, #fff) var(--f)); } .syt-seatcard__col--navy .syt-seatcard__bar { background: linear-gradient(to top, color-mix(in srgb, var(--sy-navy) 55%, #9aa7ff) 0 var(--f), var(--sy-navy-soft) var(--f)); } .syt-seatcard__col--grey .syt-seatcard__bar { background: repeating-linear-gradient(135deg, #D9DFEA 0 6px, #E8ECF3 6px 12px); } .syt-seatcard__col b { display: block; font-size: 13px; margin-top: 2px; } .syt-seatcard__col small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .syt-seatcard__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px dashed #DCE1EA; font-size: 13px; color: var(--ink-2); } .syt-seatcard__cta { display: inline-flex; gap: 4px; align-items: center; font-weight: 800; color: var(--ink); } /* ---------- Sections ---------- */ .syt-section { margin-top: 34px; } /* Audience cards */ .syt-audience { display: grid; gap: 12px; } .syt-aud { position: relative; display: block; border-radius: var(--r-lg); padding: 20px 20px 18px; overflow: hidden; transition: transform .2s var(--ease); } .syt-aud:active { transform: scale(.985); } .syt-aud h3 { font-size: 22px; font-weight: 800; margin: 14px 0 6px; } .syt-aud p { font-size: 14px; max-width: 36ch; } .syt-aud__icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; } .syt-aud__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .syt-aud__chips i { font-style: normal; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 99px; } .syt-aud__go { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; } .syt-aud--yatim { background: var(--sy-navy); color: #fff; } .syt-aud--yatim p { color: rgba(255, 255, 255, .78); } .syt-aud--yatim .syt-aud__icon { background: rgba(255, 255, 255, .12); color: #C9D3FF; } .syt-aud--yatim .syt-aud__chips i { background: rgba(255, 255, 255, .1); } .syt-aud--yatim .syt-aud__go { background: #fff; color: var(--sy-navy); } .syt-aud--janda { background: var(--sy-accent); color: var(--on-accent); } .syt-aud--janda p { color: rgba(19, 37, 77, .78); } .syt-aud--janda .syt-aud__icon { background: rgba(255, 255, 255, .35); } .syt-aud--janda .syt-aud__chips i { background: rgba(255, 255, 255, .38); } .syt-aud--janda .syt-aud__go { background: var(--dark); color: #fff; } /* Course cards (from reference: dark/color card, open icon, big round arrow) */ .syt-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; } .syt-scroller::-webkit-scrollbar { display: none; } .syt-scroller > * { scroll-snap-align: start; } .sy-cgrid { display: grid; gap: 12px; } .sy-ccard { --c-bg: var(--dark); --c-fg: #fff; --c-sub: rgba(255, 255, 255, .64); --c-cat: var(--sy-accent); --c-btn: #fff; --c-btn-fg: var(--dark); --c-chip: rgba(255, 255, 255, .1); position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 236px; border-radius: var(--r-xl); padding: 16px 16px 16px 18px; background: var(--c-bg); color: var(--c-fg); overflow: hidden; isolation: isolate; transition: transform .2s var(--ease), box-shadow .2s; } .sy-ccard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .sy-ccard__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; } .sy-ccard__swirl { position: absolute; right: -40px; bottom: -40px; width: 210px; height: 210px; color: rgba(255, 255, 255, .06); z-index: -1; } .sy-ccard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sy-ccard__icon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--c-chip); color: var(--c-cat); } .sy-ccard__thumb { width: 64px; height: 50px; object-fit: cover; border-radius: 14px; margin-right: auto; } .sy-ccard__open { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--c-btn); color: var(--c-btn-fg); } .sy-ccard__cat { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--c-cat); margin-bottom: 6px; } .sy-ccard__title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; max-width: 18ch; } .sy-ccard__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 12.5px; color: var(--c-sub); } .sy-ccard__meta span { display: inline-flex; align-items: center; gap: 4px; } .sy-ccard__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; } .sy-ccard__free { font-size: 12.5px; font-weight: 600; color: var(--c-sub); } .sy-ccard__progress { flex: 1; height: 6px; border-radius: 9px; background: var(--c-chip); overflow: hidden; } .sy-ccard__progress span { display: block; height: 100%; background: var(--sy-accent); border-radius: 9px; } .sy-ccard__pct { font-size: 13px; } .sy-ccard__go { margin-left: auto; position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(var(--sy-accent) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .16) 0); } .sy-ccard__go::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-btn); } .sy-ccard__go .sy-ico { position: relative; color: var(--c-btn-fg); } .sy-ccard--orange { --c-bg: var(--sy-accent); --c-fg: var(--on-accent); --c-sub: rgba(19, 37, 77, .68); --c-cat: var(--on-accent); --c-btn: var(--dark); --c-btn-fg: #fff; --c-chip: rgba(255, 255, 255, .34); } .sy-ccard--orange .sy-ccard__swirl { color: rgba(255, 255, 255, .16); } .sy-ccard--orange .sy-ccard__go { background: conic-gradient(var(--dark) calc(var(--p, 0) * 1%), rgba(var(--shade), .12) 0); } .sy-ccard--orange .sy-ccard__progress span { background: var(--dark); } .sy-ccard--green { --c-bg: var(--sy-primary); --c-cat: #CFEABF; --c-chip: rgba(255, 255, 255, .14); } .sy-ccard--navy { --c-bg: var(--sy-navy); --c-cat: #FFC56E; } .sy-ccard--cream { --c-bg: #EEF2F8; --c-fg: var(--ink); --c-sub: var(--muted); --c-cat: var(--sy-accent-deep); --c-btn: var(--dark); --c-btn-fg: #fff; --c-chip: rgba(var(--shade), .06); } .sy-ccard--cream .sy-ccard__swirl { color: rgba(var(--shade), .05); } /* Programs */ .syt-programs { display: grid; gap: 12px; } .syt-prog { position: relative; display: block; border-radius: var(--r-lg); padding: 18px 18px 20px; background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; } .syt-prog::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--pc, var(--sy-primary)); } .syt-prog__no { font-size: 12px; font-weight: 800; color: var(--pc, var(--sy-primary)); letter-spacing: .06em; } .syt-prog__aud { position: absolute; right: 16px; top: 16px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--pc-soft, var(--sy-primary-soft)); color: var(--pc-deep, var(--sy-primary-deep)); } .syt-prog__img { width: 52px; height: 52px; object-fit: contain; display: block; margin: 8px 0 0; } .syt-prog h3 { font-size: 18px; font-weight: 800; margin: 10px 0 6px; } .syt-prog p { font-size: 14px; color: var(--ink-2); } .syt-prog--green { --pc: var(--sy-primary); --pc-soft: var(--sy-primary-soft); --pc-deep: var(--sy-primary-deep); } .syt-prog--orange { --pc: var(--sy-accent); --pc-soft: var(--sy-accent-soft); --pc-deep: var(--sy-accent-deep); } .syt-prog--navy { --pc: var(--sy-navy); --pc-soft: var(--sy-navy-soft); --pc-deep: var(--sy-navy); } .syt-prog--dark { --pc: var(--dark); --pc-soft: #ECEAE5; --pc-deep: var(--dark); } .syt-prog--cream { --pc: #C9B98F; --pc-soft: #EEF2F8; --pc-deep: #6b5a2c; } /* Donation band */ .syt-donateband { position: relative; display: grid; gap: 22px; border-radius: var(--r-xl); padding: 26px 22px; background: var(--dark); color: #fff; overflow: hidden; } .syt-donateband::before { content: ''; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sy-accent) 40%, transparent), transparent 70%); } .syt-donateband .sy-eyebrow { color: var(--sy-accent); } .syt-donateband h2 { font-size: 26px; font-weight: 800; margin: 2px 0 10px; text-wrap: balance; } .syt-donateband p { color: rgba(255, 255, 255, .72); font-size: 14.5px; } .syt-donateband__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 18px 0; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); } .syt-donateband__price small { font-size: 12px; color: rgba(255, 255, 255, .6); } .syt-donateband__price b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--sy-accent); } .syt-donateband__price span { font-size: 13px; color: rgba(255, 255, 255, .7); } .syt-donateband__pay { font-size: 12.5px; color: rgba(255, 255, 255, .55); } .syt-donateband__chairs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .syt-donateband__chairs i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .22); } .syt-donateband__chairs i.on { background: var(--sy-accent); color: var(--dark); } /* Steps */ .syt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; } .syt-steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); } .syt-steps__n { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; background: var(--sy-primary-soft); color: var(--sy-primary-deep); } .syt-steps li:last-child .syt-steps__n { background: var(--sy-accent); color: var(--on-accent); } .syt-steps b { font-size: 15.5px; } .syt-steps small { font-size: 13px; color: var(--muted); } /* Promo cards */ .syt-split { display: grid; gap: 12px; } .syt-certpromo { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); } .syt-certpromo h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; } .syt-certpromo p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; } .syt-certpromo__shield { flex: none; } .syt-tutorpromo { position: relative; display: block; padding: 20px; border-radius: var(--r-lg); background: var(--sy-accent-soft); border: 1.5px solid color-mix(in srgb, var(--sy-accent) 50%, #fff); } .syt-tutorpromo__icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--sy-accent); color: var(--on-accent); margin-bottom: 12px; } .syt-tutorpromo h3 { font-size: 19px; font-weight: 800; margin-bottom: 6px; } .syt-tutorpromo p { font-size: 14px; color: var(--ink-2); } .syt-tutorpromo__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 800; font-size: 14px; } /* About */ .syt-about { text-align: center; padding: 28px 20px; border-radius: var(--r-xl); background: var(--sy-primary-tint); border: 1px solid color-mix(in srgb, var(--sy-primary) 16%, #fff); } .syt-about__mark { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--sy-primary); color: #fff; } .syt-about__text { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; margin: 0 auto; } .syt-about__powered { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; font-size: 14px; } .syt-about__powered img { height: 36px; width: auto; } .syt-about__powered b { color: var(--sy-primary-deep); } /* Tutors */ .sy-tutors { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; } .sy-tutor { text-align: center; padding: 16px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); } .sy-tutor img, .sy-tutor .sy-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; display: block; } .sy-tutor .sy-avatar { display: grid; } .sy-tutor b { display: block; font-size: 13.5px; } .sy-tutor small { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* FAQ */ .sy-faq { display: grid; gap: 8px; } .sy-faq details { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s; } .sy-faq details[open] { border-color: var(--line); box-shadow: var(--shadow-sm); } .sy-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 700; font-size: 15px; cursor: pointer; } .sy-faq summary::-webkit-details-marker { display: none; } .sy-faq summary i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); transition: transform .25s var(--ease), background .2s; } .sy-faq details[open] summary i { transform: rotate(180deg); background: var(--sy-accent); color: var(--on-accent); } .sy-faq__a { padding: 0 18px 16px; color: var(--ink-2); font-size: 14.5px; } .sy-faq__a p + p { margin-top: 8px; } /* ---------- Page shell ---------- */ .syt-page { padding-top: 6px; } .syt-page--narrow { max-width: 640px; } .syt-pagehead { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 20px; } .syt-pagehead__title { font-size: clamp(28px, 7.4vw, 44px); font-weight: 800; letter-spacing: -.035em; } .syt-pagehead__sub { margin-top: 6px; color: var(--muted); font-size: 14.5px; max-width: 56ch; } .syt-back { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); } .syt-back--light { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .3); color: inherit; } .syt-cover { margin: 0 0 20px; border-radius: var(--r-lg); overflow: hidden; } .syt-cover img { display: block; width: 100%; } .syt-prose { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); } .syt-prose > * + * { margin-top: 14px; } .syt-prose > h2 { font-size: 21px; font-weight: 800; color: var(--ink); margin-top: 28px; } .syt-prose > h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 22px; } .syt-prose > ul, .syt-prose > ol { padding-left: 22px; } .syt-prose li + li { margin-top: 6px; } .syt-prose ul li::marker { color: var(--sy-primary); } .syt-prose ol li::marker { color: var(--sy-accent-deep); font-weight: 800; } .syt-prose :where(p, li, td, h2, h3, blockquote) > a:not(.sy-btn) { color: var(--sy-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .syt-prose :where(p, li, td) > :where(strong, b) { color: var(--ink); } .syt-prose > p img, .syt-prose > figure img { border-radius: var(--r-md); } .syt-prose blockquote { margin: 0; padding: 14px 18px; border-left: 4px solid var(--sy-accent); background: var(--sy-accent-tint); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .syt-prose > table { width: 100%; border-collapse: collapse; font-size: 14px; } .syt-prose th, .syt-prose td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; } .syt-prose > div[class^="sy-"], .syt-prose > form { color: var(--ink); line-height: 1.55; font-size: 15px; } .syt-page--aid_terms .syt-prose, .syt-page--tutor_terms .syt-prose, .syt-page--about .syt-prose { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px 20px; } .syt-page--aid_terms .syt-prose h2, .syt-page--tutor_terms .syt-prose h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; } .syt-page--aid_terms .syt-prose h2::before, .syt-page--tutor_terms .syt-prose h2::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--sy-accent); flex: none; } /* ---------- Forms ---------- */ .sy-form { display: grid; gap: 14px; } .sy-form.sy-card { padding: 20px; } .sy-field { display: grid; gap: 6px; } .sy-field__label { font-size: 13.5px; font-weight: 700; color: var(--ink); } .sy-field__label i { color: var(--err); font-style: normal; } .sy-field__help { font-size: 12.5px; color: var(--muted); } .sy-field input, .sy-field textarea, .sy-select select, .sy-verify input { width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); font-size: 16px; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; } .sy-field textarea { min-height: 96px; resize: vertical; } .sy-field input:focus, .sy-field textarea:focus, .sy-select select:focus, .sy-verify input:focus { outline: none; border-color: var(--sy-primary); box-shadow: 0 0 0 4px var(--sy-primary-soft); } .sy-select { position: relative; display: block; } .sy-select select { padding-right: 44px; } .sy-select .sy-ico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); } .sy-file { position: relative; display: block; } .sy-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; min-height: 0; } .sy-file__ui { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--sy-primary) 40%, var(--line)); background: var(--sy-primary-tint); color: var(--sy-primary-deep); font-weight: 600; font-size: 14px; } .sy-file__ui span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sy-file.has-file .sy-file__ui { border-style: solid; background: var(--sy-primary-soft); } .sy-grid-2 { display: grid; gap: 14px; } .sy-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); cursor: pointer; } .sy-check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--sy-primary); } .sy-check a { color: var(--sy-primary); font-weight: 700; } .sy-alert { padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; margin-bottom: 16px; border: 1px solid; } .sy-alert--ok { background: var(--sy-primary-soft); color: var(--sy-primary-deep); border-color: color-mix(in srgb, var(--sy-primary) 25%, #fff); } .sy-alert--err { background: #FCEBE7; color: #8E2A1B; border-color: #F5CFC6; } .sy-alert--warn { background: var(--sy-accent-tint); color: var(--sy-accent-deep); border-color: var(--sy-accent-soft); } /* Auth */ .sy-auth__card { display: grid; gap: 14px; } .sy-auth__links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .sy-auth__alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--ink-2); } .sy-auth__alt a { color: var(--sy-primary); } /* Multi-step register */ .sy-steps__bar { list-style: none; margin: 0 0 4px; padding: 0; display: none; gap: 6px; } .sy-steps.is-js .sy-steps__bar { display: flex; } .sy-steps__bar li { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); } .sy-steps__bar li::before { content: ''; height: 6px; border-radius: 9px; background: var(--line); transition: background .3s; } .sy-steps__bar li.is-on { color: var(--ink); } .sy-steps__bar li.is-on::before { background: var(--sy-primary); } .sy-steps__bar span { display: none; } .sy-step { border: 0; margin: 0; padding: 20px; display: grid; gap: 14px; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line-2); } .sy-steps.is-js .sy-step:not(.is-active) { display: none; } .sy-steps:not(.is-js) [data-next], .sy-steps:not(.is-js) [data-prev] { display: none; } .sy-step legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; } .sy-step__nav { display: flex; gap: 10px; margin-top: 4px; } .sy-step__nav .sy-btn--ghost { width: 52px; padding: 0; } .sy-choice { display: grid; gap: 10px; } .sy-choice__item { position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; } .sy-choice__item input { position: absolute; opacity: 0; } .sy-choice__icon { grid-row: span 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; } .sy-choice__item b { font-size: 16px; } .sy-choice__item small { font-size: 13px; color: var(--muted); } .sy-choice__item--green .sy-choice__icon { background: var(--sy-navy-soft); color: var(--sy-navy); } .sy-choice__item--orange .sy-choice__icon { background: var(--sy-accent-soft); color: var(--sy-accent-deep); } .sy-choice__item:has(input:checked) { border-color: var(--sy-primary); background: var(--sy-primary-tint); } .sy-choice__item:has(input:checked)::after { content: ''; position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--sy-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; } /* ---------- Empty / status ---------- */ .sy-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px dashed var(--line); color: var(--ink-2); } .sy-empty > .sy-ico { color: var(--sy-primary); margin-bottom: 4px; } .sy-empty h3 { font-size: 18px; font-weight: 800; color: var(--ink); } .sy-empty p { font-size: 14px; max-width: 40ch; } .sy-empty .sy-row, .sy-empty .sy-btn { margin-top: 8px; justify-content: center; } .sy-empty--sm { padding: 24px 16px; } .sy-status { display: flex; gap: 14px; padding: 16px; border-radius: var(--r-lg); margin-bottom: 14px; } .sy-status b { display: block; font-size: 15.5px; margin-bottom: 4px; } .sy-status p { font-size: 13.5px; margin-bottom: 8px; } .sy-status__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; } .sy-status--pending { background: var(--sy-accent-tint); border: 1px solid var(--sy-accent-soft); } .sy-status--pending .sy-status__icon { background: var(--sy-accent); color: var(--on-accent); } .sy-status--rejected { background: #FCEBE7; } .sy-status--rejected .sy-status__icon { background: #E9897A; color: #fff; } .sy-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; } .sy-pill--ok { background: var(--sy-primary-soft); color: var(--sy-primary-deep); } .sy-pill--bad { background: #FCEBE7; color: #8E2A1B; } /* ---------- Dashboard ---------- */ .sy-dash { display: grid; gap: 14px; } .sy-dash .sy-head { margin-top: 12px; margin-bottom: 0; } .sy-mcard-mini { position: relative; display: grid; grid-template-columns: 1fr; gap: 2px; padding: 20px; border-radius: var(--r-lg); overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--sy-primary) 0%, var(--sy-primary-deep) 70%); min-height: 160px; box-shadow: 0 20px 40px -24px var(--sy-primary-deep); } .sy-mcard-mini::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 200px; height: 200px; border-radius: 48% 52% 0 50%; background: rgba(255, 255, 255, .08); transform: rotate(-24deg); } .sy-mcard-mini__logo { width: 130px; margin-bottom: 22px; } .sy-mcard-mini__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; grid-column: 1; } .sy-mcard-mini__no { font-size: 20px; font-weight: 800; letter-spacing: .02em; grid-column: 1; font-variant-numeric: tabular-nums; } .sy-mcard-mini__type { grid-column: 1; font-size: 13px; opacity: .8; } .sy-mcard-mini__open { position: absolute; z-index: 1; right: 16px; top: 16px; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .16); padding: 9px 14px; border-radius: 99px; } .sy-mylist, .sy-certlist { display: grid; gap: 8px; } .sy-myrow, .sy-certrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); } .sy-myrow > span:nth-child(2), .sy-certrow > span:nth-child(2) { flex: 1; min-width: 0; } .sy-myrow b, .sy-certrow b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sy-myrow small, .sy-certrow small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sy-certrow__shield { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sy-accent-soft); color: var(--sy-accent-deep); flex: none; } .sy-ring { --size: 50px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--sy-primary) calc(var(--p) * 1%), var(--line-2) 0); position: relative; } .sy-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); } .sy-ring b { position: relative; font-size: 13px; font-weight: 800; } .sy-ring--lg { --size: 74px; } .sy-ring--lg b { font-size: 17px; } .sy-myrow--orange .sy-ring { background: conic-gradient(var(--sy-accent) calc(var(--p) * 1%), var(--line-2) 0); } .sy-myrow--navy .sy-ring { background: conic-gradient(var(--sy-navy) calc(var(--p) * 1%), var(--line-2) 0); } .sy-myrow--dark .sy-ring { background: conic-gradient(var(--dark) calc(var(--p) * 1%), var(--line-2) 0); } .sy-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } .sy-quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; text-align: center; } .sy-quick a .sy-ico { color: var(--sy-primary); } /* ---------- Course archive ---------- */ .syt-coursehead { position: relative; overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 18px 20px 26px; background: var(--sy-accent); color: var(--dark); min-height: 270px; isolation: isolate; } .syt-coursehead__deco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; } .syt-coursehead__title { font-size: clamp(36px, 10vw, 56px); font-weight: 800; letter-spacing: -.04em; margin: 54px 0 22px; line-height: 1; } .syt-coursehead__art { position: absolute; right: -16px; top: 40px; width: 190px; transform: rotate(-8deg); } .syt-coursehead__chips { display: flex; gap: 10px; flex-wrap: wrap; } .syt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; font-size: 14px; font-weight: 700; } .syt-chip--dark { background: var(--dark); color: #fff; } .syt-chip--soft { background: rgba(255, 255, 255, .34); } .syt-chip--glass { background: rgba(255, 255, 255, .18); } .syt-coursebody { background: var(--surface-2); border-radius: var(--r-xl); margin-top: -24px; position: relative; padding: 18px 14px 20px; border: 1px solid var(--line-2); } .syt-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 16px; padding: 2px 14px; } .syt-filter::-webkit-scrollbar { display: none; } .syt-filter a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; white-space: nowrap; } .syt-filter__ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--sy-primary); } .syt-filter a.is-active { background: var(--dark); color: #fff; border-color: var(--dark); } .syt-filter a.is-active .syt-filter__ico { background: rgba(255, 255, 255, .12); color: var(--sy-accent); } .syt-joinbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sy-primary-soft); } .syt-joinbar b { display: block; font-size: 15px; } .syt-joinbar small { font-size: 13px; color: var(--ink-2); } .syt-pager .nav-links { display: flex; justify-content: center; gap: 6px; margin-top: 18px; } .syt-pager .page-numbers { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-weight: 700; } .syt-pager .page-numbers.current { background: var(--dark); color: #fff; } .syt-pager .screen-reader-text { position: absolute; left: -9999px; } /* ---------- Course detail ---------- */ .syt-chero { --ch-bg: var(--dark); --ch-fg: #fff; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); padding: 16px 20px 24px; background: var(--ch-bg); color: var(--ch-fg); } .syt-chero--orange { --ch-bg: var(--sy-accent); --ch-fg: var(--dark); } .syt-chero--green { --ch-bg: var(--sy-primary); } .syt-chero--navy { --ch-bg: var(--sy-navy); } .syt-chero--cream { --ch-bg: #EDE6D7; --ch-fg: var(--ink); } .syt-chero__swirl { position: absolute; right: -60px; bottom: -70px; width: 280px; color: rgba(255, 255, 255, .08); z-index: -1; } .syt-chero__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .syt-chero__icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: var(--sy-accent); } .syt-chero--orange .syt-chero__icon, .syt-chero--cream .syt-chero__icon { background: rgba(255, 255, 255, .4); color: var(--dark); } .syt-chero__cat { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .75; } .syt-chero__title { font-size: clamp(26px, 7.2vw, 42px); font-weight: 800; letter-spacing: -.035em; margin: 8px 0 18px; text-wrap: balance; } .syt-chero__chips { display: flex; flex-wrap: wrap; gap: 8px; } .syt-chero .syt-chip--dark { background: var(--surface); color: var(--ink); } .syt-chero--orange .syt-chip--dark, .syt-chero--cream .syt-chip--dark { background: var(--dark); color: #fff; } .syt-chero .syt-chip { padding: 10px 14px; font-size: 13px; } .syt-course__body { padding: 20px 2px 0; display: grid; gap: 16px; } .syt-course__body > .sy-head { margin: 8px 0 -4px; } .syt-progresscard { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); } .syt-progresscard b { font-size: 16px; } .syt-progresscard p { font-size: 13.5px; color: var(--muted); } .syt-tutorline { display: flex; gap: 12px; align-items: center; } .syt-tutorline small { display: block; font-size: 12px; color: var(--muted); } .syt-outline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .syt-outline__row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); } .syt-outline__txt { flex: 1; min-width: 0; } .syt-outline__txt small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; } .syt-outline__txt b { display: block; font-size: 15px; } .syt-outline__txt em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); } .syt-outline__state { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--muted); border: 1.5px solid var(--line); } .syt-outline__item.is-done .syt-outline__state { background: var(--sy-primary); color: #fff; border-color: var(--sy-primary); } .syt-outline__item.is-open .syt-outline__state { background: var(--dark); color: #fff; border-color: var(--dark); } .syt-outline__item.is-open .syt-outline__row { border-color: var(--ink-2); box-shadow: var(--shadow); } .syt-outline__item.is-locked .syt-outline__row { opacity: .62; } .syt-outline__item--quiz.is-open .syt-outline__state { background: var(--sy-accent); color: var(--on-accent); border-color: var(--sy-accent); } .syt-outline__item--cert .syt-outline__row { background: var(--sy-accent-tint); border-style: dashed; border-color: color-mix(in srgb, var(--sy-accent) 45%, #fff); opacity: 1; } .syt-outline__item--cert .syt-outline__state { background: var(--sy-accent-soft); color: var(--sy-accent-deep); border-color: transparent; } .syt-fundnote { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); background: var(--sy-primary-tint); color: var(--sy-primary-deep); font-size: 13.5px; } .syt-fundnote .sy-ico { flex: none; } /* Sticky action bar (course, lesson, quiz) */ .syt-sticky { position: sticky; bottom: calc(var(--dock-h) + 22px + var(--safe-b)); z-index: 40; margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .syt-sticky__info { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .syt-sticky__info b { overflow: hidden; text-overflow: ellipsis; } .syt-sticky .sy-btn { min-height: 48px; } .syt-sticky:has(.sy-btn--ghost) { padding-left: 10px; } /* Quiz */ .sy-quiz { display: grid; gap: 12px; } .sy-q { border: 0; margin: 0; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); } .sy-q legend { float: left; width: 100%; display: flex; gap: 12px; font-size: 16px; font-weight: 700; margin-bottom: 14px; padding: 0; } .sy-q__n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--dark); color: #fff; font-size: 13px; } .sy-q__opts { clear: both; display: grid; gap: 8px; } .sy-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s; } .sy-opt input { position: absolute; opacity: 0; } .sy-opt__key { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); font-weight: 800; font-size: 13px; transition: background .15s; } .sy-opt__txt { font-size: 15px; } .sy-opt:has(input:checked) { border-color: var(--sy-primary); background: var(--sy-primary-tint); } .sy-opt:has(input:checked) .sy-opt__key { background: var(--sy-primary); color: #fff; } .sy-opt:has(input:focus-visible) { outline: 2.5px solid var(--sy-accent); outline-offset: 2px; } .syt-score { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: #FCEBE7; } .syt-score .sy-ring { background: conic-gradient(var(--err) calc(var(--p) * 1%), #F5CFC6 0); } .syt-score .sy-ring::before { background: #FCEBE7; } .syt-score p { font-size: 13.5px; color: var(--ink-2); } .sy-congrats { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--sy-accent-soft); margin-bottom: 14px; } .sy-congrats > span { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--sy-accent); color: var(--on-accent); flex: none; } .sy-congrats b { font-size: 16px; } .sy-congrats p { font-size: 13.5px; color: var(--ink-2); } /* ---------- Lesson player ---------- */ .syt-lesson { padding-top: 6px; } .syt-lesson__top { display: flex; align-items: center; gap: 12px; } .syt-lesson__crumb { flex: 1; min-width: 0; } .syt-lesson__crumb small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .syt-lesson__crumb b { font-size: 15px; } .syt-segs { display: flex; gap: 4px; margin: 14px 0 18px; } .syt-segs i { flex: 1; height: 6px; border-radius: 9px; background: var(--line); } .syt-segs i.is-done { background: var(--sy-primary); } .syt-segs i.is-now { background: var(--sy-accent); } .syt-segs i.is-quiz { flex: .5; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); } .syt-lesson__title { font-size: clamp(24px, 6.6vw, 36px); font-weight: 800; letter-spacing: -.03em; } .syt-lesson__meta { display: flex; gap: 10px; align-items: center; margin: 10px 0 18px; font-size: 13px; color: var(--muted); } .syt-lesson__meta > span { display: inline-flex; align-items: center; gap: 5px; } .syt-block { margin-bottom: 16px; } .syt-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--dark); box-shadow: var(--shadow); } .syt-video iframe, .syt-video video, .syt-video embed, .syt-video object { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } .syt-pdf { padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); display: grid; gap: 14px; } .syt-pdf__head { display: flex; gap: 12px; align-items: center; } .syt-pdf__head small { display: block; font-size: 12px; color: var(--muted); } .syt-pdf__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #FCE5E1; color: #B23A26; flex: none; } .syt-pdf__frame { display: none; width: 100%; height: 72vh; border: 0; border-radius: var(--r-md); background: var(--surface-2); } .syt-linkcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--sy-navy-tint); border: 1px solid var(--sy-navy-soft); } .syt-linkcard > div { flex: 1; min-width: 0; } .syt-linkcard small { display: block; font-size: 12px; color: var(--muted); } .syt-linkcard b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .syt-linkcard__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sy-navy); color: #fff; flex: none; } .syt-reading { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); } .syt-reading__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--sy-primary); margin-bottom: 12px; } .syt-lesson__pn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .syt-lesson__pn a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 700; min-width: 0; } .syt-lesson__pn a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .syt-lesson__pn small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); } .syt-lesson__pn .is-next { grid-column: 2; justify-content: flex-end; text-align: right; } .syt-lesson__side { display: none; margin-top: 18px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); } .syt-lesson__side.is-open { display: block; } .syt-mini { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; } .syt-mini a, .syt-mini span { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; font-size: 14px; } .syt-mini i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--muted); } .syt-mini .is-done i { background: var(--sy-primary); color: #fff; } .syt-mini .is-current a { background: var(--sy-accent-tint); font-weight: 700; } .syt-mini .is-current i { background: var(--sy-accent); color: var(--on-accent); } .syt-mini .is-locked { opacity: .55; } /* ---------- Donation page ---------- */ .sy-donate { display: grid; gap: 18px; } .sy-seatbar { padding: 20px; border-radius: var(--r-lg); background: var(--dark); color: #fff; } .sy-seatbar__nums { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sy-seatbar__nums b { font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: var(--sy-accent); line-height: 1; } .sy-seatbar__nums span { font-size: 14px; color: rgba(255, 255, 255, .7); } .sy-seatbar__track { height: 10px; border-radius: 9px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 14px 0; } .sy-seatbar__track span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--sy-accent), #FFD38A); } .sy-seats-viz { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } .sy-seats-viz i { aspect-ratio: 1; display: grid; place-items: center; color: rgba(255, 255, 255, .2); } .sy-seats-viz i.on { color: var(--sy-accent); } .sy-calc { display: grid; gap: 14px; } .sy-seatpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sy-seatpick label { cursor: pointer; } .sy-seatpick input { position: absolute; opacity: 0; } .sy-seatpick span { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: 16px; border: 1.5px solid var(--line); font-size: 12px; color: var(--muted); transition: all .15s; } .sy-seatpick b { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; } .sy-seatpick input:checked + span { border-color: var(--sy-accent); background: var(--sy-accent-tint); color: var(--sy-accent-deep); } .sy-seatpick input:focus-visible + span { outline: 2.5px solid var(--sy-accent); outline-offset: 2px; } .sy-stepper { display: flex; align-items: center; gap: 8px; } .sy-stepper button { width: 52px; height: 52px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center; } .sy-stepper input { flex: 1; min-height: 52px; text-align: center; font-size: 20px; font-weight: 800; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface-2); -moz-appearance: textfield; } .sy-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; } .sy-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--sy-primary-soft); } .sy-total span { font-weight: 600; color: var(--sy-primary-deep); } .sy-total > b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--sy-primary-deep); } .sy-pay { display: grid; gap: 10px; } .sy-pay .sy-head { margin-bottom: 4px; } .sy-qris { padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); text-align: center; display: grid; gap: 12px; justify-items: center; } .sy-qris__head { display: flex; gap: 10px; align-items: center; justify-content: center; } .sy-qris__head b { padding: 4px 10px; border-radius: 8px; background: var(--dark); color: #fff; font-size: 13px; letter-spacing: .06em; } .sy-qris__head span { font-weight: 700; font-size: 14px; } .sy-qris img { width: min(100%, 300px); border-radius: 16px; border: 1px solid var(--line-2); } .sy-qris p { font-size: 13px; color: var(--muted); max-width: 34ch; } .sy-bank { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); } .sy-bank__logo { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--sy-navy-soft); color: var(--sy-navy); overflow: hidden; } .sy-bank__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; } .sy-bank__txt { flex: 1; min-width: 0; } .sy-bank__txt small { display: block; font-size: 12px; color: var(--muted); } .sy-bank__txt b { display: block; font-size: 18px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .sy-copy { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 700; transition: all .15s; } .sy-copy.is-copied { background: var(--sy-primary); color: #fff; border-color: var(--sy-primary); } .sy-note { font-size: 13px; color: var(--muted); padding: 0 4px; } .sy-donors { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sy-donors li { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); } .sy-donors b { font-size: 14.5px; } .sy-donors small { display: block; font-size: 12px; color: var(--muted); } .sy-donors p { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; font-style: italic; } /* ---------- Contact ---------- */ .sy-contact { display: grid; gap: 12px; } .sy-wa-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: #128C4A; color: #fff; } .sy-wa-card > span:nth-child(2) { flex: 1; min-width: 0; } .sy-wa-card small { display: block; font-size: 12.5px; opacity: .8; } .sy-wa-card b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.01em; } .sy-wa-card em { display: block; font-style: normal; font-size: 12.5px; opacity: .75; } .sy-wa-card__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); flex: none; } .sy-wa-card--sm { padding: 14px; } .sy-wa-card--sm b { font-size: 17px; } .sy-wa-card--sm .sy-wa-card__icon { width: 46px; height: 46px; border-radius: 14px; } .sy-clist { display: grid; gap: 8px; } .sy-clist a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); font-weight: 600; font-size: 14.5px; } .sy-clist a .sy-ico { color: var(--sy-primary); } .sy-clist small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; } .sy-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .sy-socials a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; transition: transform .15s; } .sy-socials a:hover { transform: translateY(-1px); } .sy-socials a .sy-ico { width: 36px; height: 36px; padding: 8px; border-radius: 12px; color: #fff; } .sy-socials__instagram .sy-ico { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .sy-socials__tiktok .sy-ico { background: var(--sy-navy); } .sy-socials__youtube .sy-ico { background: #FF0000; } .sy-socials__facebook .sy-ico { background: #1877F2; } .sy-socials__x .sy-ico { background: var(--sy-navy); } .sy-socials__linkedin .sy-ico { background: #0A66C2; } .sy-socials__threads .sy-ico { background: var(--sy-navy); } .sy-socials--compact { grid-template-columns: repeat(auto-fill, 48px); justify-content: center; } .sy-socials--compact a { padding: 6px; justify-content: center; } .sy-socials--compact span { display: none; } .sy-socials--footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .sy-socials--footer a { padding: 0; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); } .sy-socials--footer a .sy-ico { width: 42px; height: 42px; padding: 11px; background: transparent; } .sy-socials--footer span { display: none; } /* ---------- Partner / sponsors ---------- */ .sy-sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 24px; } .sy-sponsors > * { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); font-weight: 700; text-align: center; font-size: 14px; } .sy-sponsors img { max-height: 54px; width: auto; object-fit: contain; } /* ---------- Verify ---------- */ .sy-verify { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 16px; border-radius: 99px; background: var(--surface); border: 1.5px solid var(--line); margin-bottom: 18px; } .sy-verify > span { color: var(--muted); display: grid; } .sy-verify input { border: 0 !important; box-shadow: none !important; min-height: 48px; padding: 0 4px; text-transform: uppercase; background: transparent; } .sy-verify .sy-btn { min-height: 46px; } .sy-vresult { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 26px 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line-2); } .sy-vresult--ok { background: linear-gradient(180deg, var(--sy-primary-tint), var(--surface) 50%); border-color: color-mix(in srgb, var(--sy-primary) 20%, #fff); } .sy-vresult h3 { font-size: 24px; font-weight: 800; } .sy-vresult dl { width: 100%; margin: 6px 0 4px; display: grid; gap: 0; text-align: left; } .sy-vresult dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .sy-vresult dt { color: var(--muted); } .sy-vresult dd { margin: 0; font-weight: 700; text-align: right; } .sy-vresult p { font-size: 14px; color: var(--ink-2); } /* ---------- Certificate & transcript (fixed A4 landscape, scaled on screen) ---------- */ .sy-certbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .sy-certbar .sy-btn { min-height: 46px; font-size: 14px; } .sy-sheetfit { position: relative; width: 100%; overflow: hidden; margin-bottom: 18px; border-radius: 10px; } .sy-sheetfit > * { transform-origin: top left; } .sy-cert, .sy-transcript { width: 1123px; height: 794px; position: relative; background: #FFFDF8; color: #13254D; overflow: hidden; box-shadow: var(--shadow); font-family: var(--font); } .sy-cert__frame { position: absolute; inset: 22px; border: 2px solid var(--sy-primary); border-radius: 6px; } .sy-cert__frame::after { content: ''; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--sy-accent) 70%, #fff); border-radius: 3px; } .sy-cert__leaf { position: absolute; width: 260px; height: 260px; } .sy-cert__leaf path { fill: var(--sy-primary-soft); } .sy-cert__leaf--tl { left: -90px; top: -90px; } .sy-cert__leaf--br { right: -90px; bottom: -90px; transform: rotate(180deg); } .sy-cert__leaf--br path { fill: var(--sy-accent-soft); } .sy-cert__top { position: absolute; left: 70px; right: 70px; top: 56px; display: flex; justify-content: space-between; align-items: center; } .sy-cert__logo { width: 210px; height: auto; } .sy-cert__serial { text-align: right; } .sy-cert__serial small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #8A8576; } .sy-cert__serial b { font-size: 16px; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .sy-cert__main { position: absolute; left: 90px; right: 90px; top: 92px; text-align: center; } .sy-cert__shield { display: flex; justify-content: center; margin-bottom: 4px; } .sy-cert__title { font-size: 44px; font-weight: 800; letter-spacing: -.02em; color: var(--sy-primary-deep); line-height: 1.05; } .sy-cert__sub { font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--sy-accent-deep); margin-top: 6px; } .sy-cert__given { margin-top: 18px; font-size: 14px; color: #6E6A60; } .sy-cert__name { font-size: 46px; font-weight: 800; letter-spacing: -.03em; margin: 4px auto 0; padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--sy-accent) 60%, #fff); display: inline-block; min-width: 520px; } .sy-cert__text { margin-top: 12px; font-size: 15px; color: #5A5648; } .sy-cert__course { margin-top: 6px; font-size: 25px; font-weight: 800; color: var(--sy-navy); } .sy-cert__meta { display: flex; justify-content: center; gap: 0; margin-top: 18px; } .sy-cert__meta > div { padding: 0 28px; border-left: 1px solid #E5DDCB; } .sy-cert__meta > div:first-child { border-left: 0; } .sy-cert__meta small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #8A8576; } .sy-cert__meta b { font-size: 15px; } .sy-cert__sign { position: absolute; left: 110px; right: 110px; bottom: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 40px; } .sy-cert__sign--1, .sy-cert__sign--0 { grid-template-columns: 260px 1fr; } .sy-cert__sign--1 .sy-cert__qr, .sy-cert__sign--0 .sy-cert__qr { justify-self: end; } .sy-cert__signer { text-align: center; } .sy-cert__signer img { height: 64px; max-width: 220px; width: auto; object-fit: contain; display: block; margin: 0 auto -8px; mix-blend-mode: multiply; } .sy-cert__sigline { display: block; height: 50px; } .sy-cert__signer b { display: block; font-size: 15px; padding-top: 8px; border-top: 1.5px solid #13254D; } .sy-cert__signer small { font-size: 12px; color: #6E6A60; } .sy-cert__qr { text-align: center; } .sy-cert__qr small { display: block; font-size: 10px; color: #8A8576; margin-top: 4px; } .sy-cert__url { position: absolute; left: 0; right: 0; bottom: 46px; text-align: center; font-size: 11px; color: #8A8576; letter-spacing: .04em; } .sy-cert__wm { position: absolute; left: 50%; top: 52%; width: 560px; height: 560px; transform: translate(-50%, -50%); opacity: .2; pointer-events: none; } .sy-cert__band { position: absolute; left: 40px; right: 40px; height: 16px; opacity: .9; } .sy-cert__band .sy-band { display: block; width: 100%; height: 100%; } .sy-cert__band--top { top: 30px; } .sy-cert__band--bottom { bottom: 28px; } .sy-cert__micro { position: absolute; left: 70px; right: 70px; bottom: 64px; font-size: 4.6px; line-height: 1; letter-spacing: .3px; white-space: nowrap; overflow: hidden; color: color-mix(in srgb, var(--sy-primary) 70%, #fff); } .sy-cert__codelabel { margin-top: 4px; letter-spacing: .06em !important; } .sy-cert__codelabel b { font-size: 12px; color: var(--sy-accent-deep); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .sy-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sy-accent-deep) !important; letter-spacing: .06em; } .sy-vresult__tip { font-size: 13px !important; color: var(--muted) !important; background: var(--sy-accent-tint); border-radius: 12px; padding: 10px 12px; text-align: left; } .sy-table__comp td { background: var(--sy-navy-tint); } .sy-transcript__note { margin-top: 12px; font-size: 13px; color: #44506B; font-style: italic; } .sy-transcript__seal { flex: none; } .sy-transcript { isolation: isolate; } .sy-transcript .sy-cert__wm { opacity: .1; z-index: -1; } .sy-qr { width: 92px; height: 92px; padding: 6px; background: #fff; border-radius: 8px; margin: 0 auto; } .sy-qr svg { width: 100%; height: 100%; display: block; } .sy-qr--sm { width: 84px; height: 84px; flex: none; } .sy-transcript { padding: 56px 70px; } .sy-transcript__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 3px solid var(--sy-primary); } .sy-transcript__head h2 { font-size: 30px; font-weight: 800; text-align: right; color: var(--sy-primary-deep); } .sy-transcript__head p { font-size: 13px; color: #8A8576; text-align: right; letter-spacing: .04em; } .sy-transcript__info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0; padding: 16px 18px; background: #F6F1E5; border-radius: 12px; } .sy-transcript__info small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #8A8576; } .sy-transcript__info b { font-size: 15px; } .sy-table { width: 100%; border-collapse: collapse; font-size: 14px; } .sy-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #8A8576; padding: 10px 12px; border-bottom: 1.5px solid #E5DDCB; } .sy-table td { padding: 9px 12px; border-bottom: 1px solid #EFE8DA; } .sy-table__total td { background: var(--sy-accent-tint); font-weight: 700; border-bottom: 0; } .sy-transcript__grade { position: absolute; left: 70px; right: 70px; bottom: 50px; display: flex; gap: 24px; align-items: center; padding-top: 18px; border-top: 1px solid #E5DDCB; } .sy-transcript__grade p { flex: 1; font-size: 12.5px; color: #6E6A60; } .sy-transcript__big { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; border-radius: 14px; background: var(--sy-primary); color: #fff; } .sy-transcript__big b { font-size: 40px; font-weight: 800; line-height: 1; } .sy-transcript__big span { font-size: 14px; font-weight: 600; } /* Member card (ID-1 ratio 85.6 × 54) */ .sy-kta-wrap { max-width: 560px; } .sy-sheetfit--card { border-radius: 26px; } .sy-kta { width: 856px; height: 540px; position: relative; border-radius: 40px; overflow: hidden; color: #fff; padding: 40px 48px; background: linear-gradient(135deg, var(--sy-primary) 0%, var(--sy-primary-deep) 78%); font-family: var(--font); } .sy-kta--janda { background: linear-gradient(135deg, color-mix(in srgb, var(--sy-accent) 92%, #fff) 0%, var(--sy-accent-deep) 85%); } .sy-kta__bg { position: absolute; inset: 0; width: 100%; height: 100%; } .sy-kta__head { position: relative; display: flex; justify-content: space-between; align-items: center; } .sy-kta__head img { width: 270px; } .sy-kta__head span { font-size: 16px; font-weight: 800; letter-spacing: .18em; opacity: .9; } .sy-kta__body { position: relative; display: grid; grid-template-columns: 170px 1fr 150px; gap: 32px; align-items: center; margin-top: 46px; } .sy-kta__photo .sy-avatar { --s: 170px !important; width: 170px; height: 210px; border-radius: 24px; border: 5px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .2); color: #fff; font-size: 56px; } .sy-kta__data small { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin-top: 10px; } .sy-kta__data b { font-size: 20px; } .sy-kta__name { display: block; font-size: 32px !important; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .sy-kta__no { display: block; font-size: 24px !important; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .sy-kta__row { display: flex; gap: 34px; } .sy-kta__qr .sy-qr { width: 150px; height: 150px; padding: 10px; border-radius: 18px; } .sy-kta__foot { position: absolute; left: 48px; right: 48px; bottom: 26px; font-size: 13px; opacity: .78; } /* ---------- Sponsors band ---------- */ .syt-sponsorband { margin-top: 48px; padding: 26px 0 8px; border-top: 1px solid var(--line); } .syt-sponsorband__title { text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; } .syt-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .syt-marquee__track { display: flex; gap: 14px; width: max-content; animation: sytMarquee 34s linear infinite; } .syt-marquee:hover .syt-marquee__track { animation-play-state: paused; } .syt-marquee__item { flex: none; height: 84px; min-width: 140px; padding: 12px 22px; display: grid; place-items: center; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); font-weight: 700; color: var(--ink-2); } .syt-marquee__item img { max-height: 58px; max-width: 170px; width: auto; transition: transform .2s; } .syt-marquee__item:hover img { transform: scale(1.05); } @keyframes sytMarquee { to { transform: translateX(calc(-50% - 7px)); } } /* ---------- Footer ---------- */ .syt-footer { margin-top: 26px; background: var(--dark); color: rgba(255, 255, 255, .72); padding: 36px 0 calc(var(--dock-h) + 36px + var(--safe-b)); border-radius: var(--r-xl) var(--r-xl) 0 0; } .syt-footer__grid { display: grid; grid-template-columns: 1fr; gap: 26px; text-align: center; justify-items: center; } .syt-footer__brand p { margin: 0 auto; } .syt-footer .sy-socials--footer { justify-content: center; } .syt-footer__brand { grid-column: 1 / -1; } .syt-footer__logo { width: 190px; margin-bottom: 14px; } .syt-footer__brand p { font-size: 14px; max-width: 42ch; } .syt-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; } .syt-footer__grid a:not(.sy-socials a) { display: block; font-size: 14px; padding: 5px 0; } .syt-footer__grid > div > a:hover { color: #fff; } .syt-footer__bottom { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 8px; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; } .syt-powered a, .syt-powered b { color: var(--sy-accent); font-weight: 700; } /* ---------- WhatsApp float ---------- */ .syt-wafloat { position: fixed; right: 16px; bottom: calc(var(--dock-h) + 30px + var(--safe-b)); z-index: 55; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 12px 24px -10px rgba(18, 140, 74, .7); transition: transform .2s var(--ease); } .syt-wafloat:hover { transform: scale(1.06); } .sy-learning .syt-wafloat, body:has(.syt-sticky) .syt-wafloat { display: none; } /* ---------- Bottom dock ---------- */ .syt-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); z-index: 70; height: var(--dock-h); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 6px; border-radius: 28px; background: var(--sy-primary-deep); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--sy-primary-deep) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14); max-width: 520px; margin: 0 auto; } .syt-dock > a, .syt-dock > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; border: 0; background: none; color: rgba(255, 255, 255, .68); font-size: 10.5px; font-weight: 600; border-radius: 20px; transition: color .2s; } .syt-dock > a::before, .syt-dock > button::before { content: ''; position: absolute; inset: 4px 6px; border-radius: 18px; background: rgba(255, 255, 255, .16); opacity: 0; transform: scale(.8); transition: all .25s var(--ease); } .syt-dock .is-active { color: #fff; } .syt-dock .is-active:not(.syt-dock__center)::before { opacity: 1; transform: none; } .syt-dock .is-active:not(.syt-dock__center) .sy-ico { color: #FFD38A; } .syt-dock .sy-ico { position: relative; } .syt-dock span { position: relative; } .syt-dock__center i { width: 56px; height: 56px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center; background: var(--sy-accent); color: var(--on-accent); border: 5px solid var(--sy-bg); box-shadow: 0 10px 18px -8px var(--sy-accent); transition: transform .25s var(--ease); } .syt-dock__center:active i { transform: scale(.92); } .syt-dock__center.is-active { color: #FFD38A; } /* ---------- Sheet ---------- */ .syt-sheet { position: fixed; inset: 0; z-index: 90; } .syt-sheet__backdrop { position: absolute; inset: 0; background: rgba(12, 24, 52, .45); opacity: 0; transition: opacity .3s; } .syt-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; background: var(--sy-bg); border-radius: 30px 30px 0 0; padding: 10px 16px calc(20px + var(--safe-b)); transform: translateY(100%); transition: transform .38s var(--ease); display: grid; gap: 14px; max-width: 560px; margin: 0 auto; } .syt-sheet.is-open .syt-sheet__backdrop { opacity: 1; } .syt-sheet.is-open .syt-sheet__panel { transform: none; } .syt-sheet__grip { width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 0 auto; cursor: pointer; } .syt-sheet__head { display: flex; justify-content: space-between; align-items: center; } .syt-sheet__head img { width: 150px; } .syt-sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .syt-sheet__grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 6px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; line-height: 1.25; } .syt-sheet__grid span { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sy-primary-soft); color: var(--sy-primary-deep); } .syt-sheet__grid a:nth-child(3n+2) span { background: var(--sy-accent-soft); color: var(--sy-accent-deep); } .syt-sheet__grid a:nth-child(3n) span { background: var(--sy-navy-soft); color: var(--sy-navy); } .syt-sheet__logout { display: flex; justify-content: center; gap: 6px; align-items: center; font-size: 14px; font-weight: 700; color: var(--err); padding: 8px; } html.is-locked { overflow: hidden; } /* ---------- Posts & 404 ---------- */ .syt-posts { display: grid; gap: 12px; } .syt-post { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; } .syt-post__img img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .syt-post__body { padding: 16px; display: grid; gap: 4px; } .syt-post__body small { font-size: 12px; color: var(--muted); } .syt-post__body b { font-size: 17px; } .syt-post__body span { font-size: 14px; color: var(--ink-2); } .syt-404 { border-style: solid; padding-top: 10px; } .syt-404__art { width: 220px; } .syt-404 h1 { font-size: 30px; font-weight: 800; } /* Reveal on scroll */ .syt-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .syt-reveal.is-in { opacity: 1; transform: none; } /* ========================================================================== Tablet & desktop ========================================================================== */ @media (min-width: 560px) { .sy-grid-2 { grid-template-columns: 1fr 1fr; } .sy-choice { grid-template-columns: 1fr 1fr; } .sy-choice__item { grid-template-columns: 1fr; row-gap: 6px; } .sy-choice__icon { grid-row: auto; margin-bottom: 6px; } .syt-audience { grid-template-columns: 1fr 1fr; } .syt-programs { grid-template-columns: 1fr 1fr; } .sy-cgrid { grid-template-columns: 1fr 1fr; } .sy-tiles--4 { grid-template-columns: repeat(4, 1fr); } .syt-split { grid-template-columns: 1.2fr 1fr; } .syt-hero__art { width: 230px; right: -10px; } .syt-hero__cta { margin-top: 28px; } .syt-sheet__grid { grid-template-columns: repeat(3, 1fr); } .syt-posts { grid-template-columns: 1fr 1fr; } .syt-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; text-align: left; justify-items: stretch; } .syt-footer__brand { grid-column: auto; } .syt-footer__brand p { margin: 0; } .syt-footer .sy-socials--footer { justify-content: flex-start; } .syt-footer__bottom { justify-content: space-between; } } @media (min-width: 900px) { body { font-size: 16px; padding-bottom: 0; } .syt-wrap { padding: 0 28px; } .syt-bar__inner { min-height: 80px; } .syt-logo img { width: 190px; } .syt-topnav { display: flex; gap: 4px; margin-left: 24px; } .syt-topnav a { padding: 10px 14px; border-radius: 99px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); transition: background .15s, color .15s; } .syt-topnav a:hover { background: rgba(var(--shade), .05); color: var(--ink); } .syt-topnav a.is-active { background: var(--dark); color: #fff; } .syt-btn-donate { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; background: var(--sy-accent); color: var(--on-accent); font-weight: 800; font-size: 14px; } .syt-hello b { font-size: 20px; } .syt-dock, .syt-sheet { display: none !important; } .syt-wafloat { bottom: 24px; right: 24px; width: 60px; height: 60px; } .syt-sticky { bottom: 20px; } body:has(.syt-sticky) .syt-wafloat { display: grid; bottom: 100px; } .syt-hero { grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: stretch; } .syt-hero__card { min-height: 470px; padding: 44px 44px 40px; } .syt-hero__title { font-size: 50px; } .syt-hero__text { max-width: 58%; } .syt-hero__lead { font-size: 16px; max-width: 42ch; } .syt-hero__art { width: 360px; right: 10px; bottom: 10px; } .syt-hero__side { grid-template-rows: auto 1fr; } .syt-seatcard { display: flex; flex-direction: column; } .syt-seatcard__bars { flex: 1; padding-top: 10px; } .syt-seatcard__col { display: flex; flex-direction: column; } .syt-seatcard__bar { flex: 1; height: auto; min-height: 120px; border-radius: 14px; } .syt-section { margin-top: 56px; } .sy-h2 { font-size: 26px; } .syt-scroller { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; } .syt-scroller > *:nth-child(n+7) { display: none; } .sy-cgrid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .sy-ccard { min-height: 270px; padding: 20px 20px 20px 22px; } .sy-ccard__title { font-size: 21px; } .syt-programs { grid-template-columns: repeat(4, 1fr); } .syt-donateband { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 44px; gap: 40px; } .syt-donateband h2 { font-size: 34px; } .syt-donateband__chairs { grid-template-columns: repeat(4, 1fr); gap: 12px; } .syt-steps { grid-template-columns: repeat(5, 1fr); } .syt-steps li { grid-template-columns: 1fr; text-align: left; padding: 18px; align-items: start; row-gap: 4px; } .syt-steps__n { grid-row: auto; margin-bottom: 10px; } .syt-steps li:not(:last-child)::after { content: ''; position: absolute; right: -10px; top: 40px; width: 10px; height: 2px; background: var(--line); } .syt-about { padding: 44px; } .syt-about__text { font-size: 19px; } .sy-tutors { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 0; } .syt-page { padding-top: 18px; } .syt-pagehead { margin: 18px 0 30px; } .syt-pagehead .syt-back { display: none; } .syt-page--faq, .syt-page--contact, .syt-page--dashboard, .syt-page--aid_terms, .syt-page--tutor_terms, .syt-page--about, .syt-page--card { max-width: 820px; } .syt-page--donate .sy-donate { grid-template-columns: 1fr 1fr; align-items: start; } .syt-page--donate .sy-seatbar { grid-column: 1 / -1; } .syt-page--donate #konfirmasi { grid-column: 2; grid-row: 2 / span 3; position: sticky; top: 100px; } .syt-page--donate .sy-calc { grid-column: 1; } .syt-page--donate .sy-pay { grid-column: 1; } .syt-page--donate .sy-donate > .sy-head, .syt-page--donate .sy-donors { grid-column: 1; } .sy-seats-viz { grid-template-columns: repeat(20, 1fr); } .syt-page--aid_terms .syt-prose, .syt-page--tutor_terms .syt-prose, .syt-page--about .syt-prose { padding: 36px 40px; } .syt-coursehead { min-height: 320px; padding: 26px 40px 40px; } .syt-coursehead__art { width: 280px; right: 60px; top: 30px; } .syt-coursebody { padding: 26px 26px 30px; } .syt-filter { margin: 0 0 20px; padding: 0; flex-wrap: wrap; } .syt-course { display: grid; grid-template-columns: 1fr; } .syt-chero { padding: 26px 40px 40px; } .syt-chero__title { max-width: 22ch; } .syt-course__body { max-width: 820px; padding-top: 28px; } .syt-lesson__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .syt-lesson__side { display: block; margin-top: 0; position: sticky; top: 100px; } .syt-lesson__top .syt-roundbtn { display: none; } .syt-pdf__frame { display: block; } .syt-sticky { max-width: calc(100% - 344px); } .syt-footer__bottom { margin-top: 36px; } .syt-footer { padding-bottom: 20px; } } @media (min-width: 1200px) { .syt-hero__title { font-size: 54px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .syt-reveal { opacity: 1; transform: none; } } /* ========================================================================== Print — certificate, transcript, member card ========================================================================== */ @media print { @page { size: A4 landscape; margin: 0; } body { background: #fff !important; padding: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .syt-bar, .syt-dock, .syt-sheet, .syt-footer, .syt-sponsorband, .syt-wafloat, .syt-splash, .no-print, .syt-pagehead, .sy-certbar, .sy-congrats { display: none !important; } .syt-wrap, .syt-page, .syt-prose { max-width: none !important; padding: 0 !important; margin: 0 !important; } .sy-sheetfit { height: auto !important; overflow: visible; margin: 0; border-radius: 0; } .sy-sheetfit > * { transform: none !important; box-shadow: none; } .sy-cert, .sy-transcript { width: 297mm; height: 209mm; page-break-after: always; break-after: page; } .sy-kta { margin: 20mm auto; } } /* Grid children must be allowed to shrink on small screens */ .sy-donate > *, .sy-dash > *, .syt-course__body > *, .sy-calc > *, .syt-hero > *, .syt-lesson__grid > * { min-width: 0; } .sy-stepper input { min-width: 0; width: 100%; } .sy-mylist > *, .sy-certlist > *, .sy-faq > *, .sy-pay > * { min-width: 0; } .syt-prose .sy-dash a, .syt-prose .sy-donate a { text-decoration: none; } /* ---------- v2: donation free amount, QRIS frame, Midtrans ---------- */ .sy-calc .sy-h3 { margin-bottom: 2px; } .sy-stepper button { font-size: 22px; font-weight: 700; color: var(--ink); } .sy-amountpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .sy-amountpick input { position: absolute; opacity: 0; } .sy-amountpick span { display: block; text-align: center; padding: 12px 6px; border-radius: 14px; border: 1.5px solid var(--line); font-weight: 700; font-size: 14px; cursor: pointer; transition: all .15s; } .sy-amountpick input:checked + span { border-color: var(--sy-primary); background: var(--sy-primary-tint); color: var(--sy-primary-deep); } .sy-amountpick input:focus-visible + span { outline: 2.5px solid var(--sy-accent); outline-offset: 2px; } .sy-moneyinput { display: flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 60px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color .15s, box-shadow .15s; } .sy-moneyinput:focus-within { border-color: var(--sy-primary); box-shadow: 0 0 0 4px var(--sy-primary-soft); } .sy-moneyinput span { font-weight: 800; color: var(--muted); } .sy-moneyinput input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); padding: 0; } .sy-moneyinput em { font-style: normal; font-size: 13px; color: var(--muted); } [data-min-note].is-bad { color: var(--err); font-weight: 700; } .sy-total > span { font-size: 13px; } .sy-total > span b { font-weight: 800; } .sy-qris__frame { padding: 14px; border-radius: 22px; background: #fff; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); position: relative; } .sy-qris__frame::before, .sy-qris__frame::after { content: ''; position: absolute; width: 26px; height: 26px; border: 3px solid var(--sy-primary); } .sy-qris__frame::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; } .sy-qris__frame::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; } .sy-qris__frame img { display: block; width: min(68vw, 260px); border: 0; border-radius: 6px; } .sy-qris__nmid { font-size: 12px; color: var(--muted); letter-spacing: .04em; } .sy-qris__head b { background: var(--sy-navy); } .sy-mtcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sy-primary-tint); border: 1.5px solid color-mix(in srgb, var(--sy-primary) 30%, #fff); } .sy-mtcard > div { flex: 1; min-width: 0; } .sy-mtcard b { display: block; } .sy-mtcard small { display: block; font-size: 12.5px; color: var(--ink-2); } .sy-mtcard__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sy-primary); color: #fff; flex: none; } .sy-or { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); } .sy-or::before, .sy-or::after { content: ''; flex: 1; height: 1px; background: var(--line); } .sy-btn.is-loading { opacity: .7; pointer-events: none; } @media (min-width: 560px) { .sy-amountpick { grid-template-columns: repeat(4, 1fr); } } /* ---------- v2.2: Berita ---------- */ .sy-newsgrid { display: grid; gap: 14px; } .sy-news { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; } .sy-news:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .sy-news__img { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--surface-2); } .sy-news__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); } .sy-news:hover .sy-news__img img { transform: scale(1.03); } .sy-news__body { display: grid; gap: 6px; padding: 14px 16px 16px; } .sy-news__cat { justify-self: start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--sy-primary); } .sy-news__title { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); } .sy-news__ex { font-size: 14px; color: var(--ink-2); } .sy-news__meta { font-size: 12.5px; color: var(--muted); } .sy-news--big .sy-news__title { font-size: 22px; } .syt-filter--news { margin: 0 -16px 18px; padding: 2px 16px; } .syt-article { max-width: 760px; padding-top: 10px; } .syt-article__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .syt-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); } .syt-article__cat { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 5px 11px; border-radius: 99px; background: var(--sy-primary-soft); color: var(--sy-primary-deep); } .syt-article__title { font-size: clamp(27px, 7vw, 42px); font-weight: 800; letter-spacing: -.03em; text-wrap: balance; } .syt-article__lead { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--ink-2); } .syt-article__cover { margin: 18px 0 22px; border-radius: var(--r-lg); overflow: hidden; } .syt-article__cover img { display: block; width: 100%; height: auto; } .syt-article__body { font-size: 16.5px; } .sy-share { margin: 18px 0; padding: 16px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-2); } .sy-share--compact { background: transparent; border: 0; padding: 0; margin: 16px 0 0; } .sy-share__label { font-weight: 800; font-size: 15px; margin-bottom: 12px; } .sy-share__row { display: flex; flex-wrap: wrap; gap: 8px; } .sy-share--compact .sy-share__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; } .sy-share--compact .sy-share__row::-webkit-scrollbar { display: none; } .sy-share__btn, .sy-share__native { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink); } .sy-share__btn .sy-ico { width: 22px; height: 22px; padding: 3px; border-radius: 50%; color: #fff; background: var(--sy-navy); } .sy-share__btn--whatsapp .sy-ico { background: #25D366; } .sy-share__btn--telegram .sy-ico { background: #229ED9; } .sy-share__btn--facebook .sy-ico { background: #1877F2; } .sy-share__btn--linkedin .sy-ico { background: #0A66C2; } .sy-share__btn--copy .sy-ico, .sy-share__btn--img .sy-ico { background: var(--sy-primary); } .sy-share__native { background: var(--sy-primary); border-color: var(--sy-primary); color: #fff; } .sy-share__btn.is-copied { background: var(--sy-primary-soft); } /* ---------- v2.2: Sekolah mitra ---------- */ .sy-schools { display: grid; gap: 14px; } .sy-school { display: grid; gap: 16px; padding: 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); scroll-margin-top: 90px; } .sy-school__logo { display: grid; place-items: center; height: 150px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-2); padding: 18px; } .sy-school__logo img { max-width: 100%; max-height: 112px; width: auto; height: auto; object-fit: contain; } .sy-school__tags { display: flex; flex-wrap: wrap; gap: 6px; } .sy-school__tags span { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; background: var(--sy-navy); color: #fff; } .sy-school__tags span.is-soft { background: var(--sy-primary-soft); color: var(--sy-primary-deep); } .sy-school h3 { font-size: 22px; font-weight: 800; margin: 10px 0 6px; } .sy-school__desc { font-size: 14px; color: var(--ink-2); } .sy-school__info { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .sy-school__info li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); } .sy-school__info .sy-ico { color: var(--sy-primary); margin-top: 1px; } .sy-school__info a { color: var(--sy-navy); font-weight: 700; word-break: break-all; } .sy-school__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .sy-schools__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--sy-navy-tint); border: 1px solid var(--sy-navy-soft); } .sy-schools__cta b { display: block; } .sy-schools__cta small { font-size: 13px; color: var(--ink-2); } .sy-schoollogos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .sy-schoollogos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 12px; min-height: 140px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); text-align: center; } .sy-schoollogos img { max-height: 70px; max-width: 100%; width: auto; object-fit: contain; } .sy-schoollogos span { font-size: 13px; font-weight: 700; color: var(--ink); } @media (min-width: 560px) { .sy-newsgrid { grid-template-columns: 1fr 1fr; } .sy-newsgrid--page .sy-news--big { grid-column: 1 / -1; } .sy-school { grid-template-columns: 220px 1fr; align-items: center; } .sy-school__logo { height: 190px; } .sy-schoollogos { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) { .sy-newsgrid { grid-template-columns: repeat(3, 1fr); } .sy-newsgrid--page .sy-news--big { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; } .sy-news--big .sy-news__body { padding: 24px 28px; } .sy-news--big .sy-news__title { font-size: 28px; } .syt-filter--news { margin: 0 0 22px; padding: 0; flex-wrap: wrap; } .syt-article .syt-back { display: none; } .syt-article__head { margin-top: 20px; } .sy-share--compact .sy-share__row { flex-wrap: wrap; margin: 0; padding: 0; } } @media (min-width: 900px) and (max-width: 1199px) { .syt-topnav a:nth-child(n+6) { display: none; } }