/* ===================================================================== Medical Insurance for Retired Employees - UCO Bank Design system. Light surfaces, strong colour, large type, big targets. No inline styles anywhere: the CSP is style-src 'self'. ===================================================================== */ @font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); } @font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); } @font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); } :root { --brand: #0b3d91; --primary: #1558d6; --primary-2: #2f7bf6; --primary-soft: #e8f0ff; --accent: #f59e0b; --accent-soft: #fff4dc; --coral: #ff6b4a; --teal: #0c9b78; --teal-soft: #e2f7f0; --danger: #c62828; --danger-soft: #fdecec; --violet: #6d4ae8; --ink: #14213d; --ink-2: #33415e; --muted: #56627f; --line: #d6deee; --line-2: #e8edf7; --bg: #f3f6fd; --card: #ffffff; --radius: 18px; --radius-sm: 12px; --shadow-1: 0 1px 2px rgba(20, 33, 61, .06), 0 4px 14px rgba(20, 33, 61, .06); --shadow-2: 0 10px 30px rgba(21, 88, 214, .12), 0 2px 6px rgba(20, 33, 61, .06); --shadow-3: 0 24px 60px rgba(20, 33, 61, .22); --ease: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", Arial, sans-serif; --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", Arial, sans-serif; } /* Text size switch (A / A+ / A++) - set on by mb-init.js before paint */ html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html.ts-lg { font-size: 125%; } html.ts-xl { font-size: 137.5%; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--bg); background-image: radial-gradient(1100px 520px at 110% -10%, rgba(47, 123, 246, .13), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(245, 158, 11, .12), transparent 60%); background-attachment: fixed; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.01em; } h1 { font-size: 1.9rem; font-weight: 700; } h2 { font-size: 1.45rem; font-weight: 600; } h3 { font-size: 1.15rem; font-weight: 600; } p { margin: 0 0 1em; } a { color: var(--primary); text-underline-offset: 3px; } a:hover { color: var(--brand); } img { max-width: 100%; } strong { font-weight: 700; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; transition: top .2s; } .skip-link:focus { top: 1rem; color: #fff; } .container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; } main { flex: 1 0 auto; padding: 1.6rem 0 3rem; overflow-x: clip; } /* ---------------- Header ---------------- */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line-2); box-shadow: 0 2px 14px rgba(20, 33, 61, .05); } .topbar__inner { display: flex; align-items: center; gap: 1rem; min-height: 4.4rem; } .brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); } .brand img { width: 3rem; height: 3rem; border-radius: 12px; object-fit: contain; background: #fff; box-shadow: var(--shadow-1); } .brand__text { display: flex; flex-direction: column; line-height: 1.2; } .brand__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--brand); } .brand__sub { font-size: .8rem; color: var(--muted); } .topbar__spacer { flex: 1; } .topbar__tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; } .textsize { display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; } .textsize button { border: 0; background: transparent; font: inherit; font-family: var(--font-head); font-weight: 600; color: var(--ink-2); min-width: 2.6rem; height: 2.5rem; cursor: pointer; transition: background .2s, color .2s; } .textsize button + button { border-left: 1px solid var(--line); } .textsize button[aria-pressed="true"] { background: var(--primary); color: #fff; } .textsize button:nth-child(1) { font-size: .85rem; } .textsize button:nth-child(2) { font-size: 1rem; } .textsize button:nth-child(3) { font-size: 1.15rem; } .userchip { display: flex; align-items: center; gap: .6rem; padding: .3rem .9rem .3rem .3rem; border-radius: 999px; background: var(--primary-soft); color: var(--brand); font-weight: 600; max-width: 22rem; } .userchip__avatar { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--violet)); color: #fff; font-family: var(--font-head); font-size: .95rem; flex: none; } .userchip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; } .nav { background: #fff; border-bottom: 1px solid var(--line-2); } .nav__list { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .nav__list::-webkit-scrollbar { display: none; } .nav__link { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; color: var(--ink-2); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s, background .2s; } .nav__link:hover { color: var(--primary); background: var(--primary-soft); } .nav__link[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); } .nav__link .ico { width: 1.25rem; height: 1.25rem; } /* ---------------- Icons ---------------- */ .ico { width: 1.4rem; height: 1.4rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .ico--fill { fill: currentColor; stroke: none; } /* ---------------- Buttons ---------------- */ .btn { --b: var(--primary); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.3rem; padding: .7rem 1.5rem; border-radius: 14px; border: 2px solid transparent; font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: transform .15s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; user-select: none; } .btn:active { transform: scale(.97); } .btn--primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: 0 8px 20px rgba(21, 88, 214, .28); } .btn--primary:hover { color: #fff; box-shadow: 0 12px 28px rgba(21, 88, 214, .38); transform: translateY(-1px); } .btn--accent { background: linear-gradient(135deg, var(--accent), var(--coral)); color: #fff; box-shadow: 0 8px 20px rgba(245, 120, 11, .3); } .btn--accent:hover { color: #fff; transform: translateY(-1px); } .btn--success { background: linear-gradient(135deg, var(--teal), #13c29a); color: #fff; box-shadow: 0 8px 20px rgba(12, 155, 120, .28); } .btn--success:hover { color: #fff; transform: translateY(-1px); } .btn--ghost { background: #fff; color: var(--primary); border-color: var(--line); } .btn--ghost:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--brand); } .btn--danger { background: #fff; color: var(--danger); border-color: #f1c4c4; } .btn--danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .btn--danger-solid { background: var(--danger); color: #fff; } .btn--danger-solid:hover { background: #a61f1f; color: #fff; } .btn--sm { min-height: 2.6rem; padding: .4rem 1rem; font-size: .92rem; border-radius: 11px; } .btn--block { width: 100%; } .btn[disabled], .btn.is-busy { opacity: .7; cursor: not-allowed; transform: none; } .btn .spinner { display: none; } .btn.is-busy .spinner { display: inline-block; } .btn.is-busy .btn__label-idle { display: none; } .btn .btn__label-busy { display: none; } .btn.is-busy .btn__label-busy { display: inline; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .6s var(--ease) forwards; pointer-events: none; } .btn--ghost .ripple, .btn--danger .ripple { background: rgba(21, 88, 214, .18); } .spinner { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .8s linear infinite; } .spinner--dark { border-color: rgba(21, 88, 214, .2); border-top-color: var(--primary); } /* ---------------- Cards & layout ---------------- */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-1); border: 1px solid var(--line-2); padding: 1.6rem; } .card--pad-lg { padding: 2.2rem; } .card__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; } .card__head h2, .card__head h3 { margin: 0; } .card__icon { width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); } .card__icon .ico { width: 1.6rem; height: 1.6rem; } .grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stack > * + * { margin-top: 1.25rem; } .row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; } .row--end { justify-content: flex-end; } .row--between { justify-content: space-between; } .muted { color: var(--muted); } .small { font-size: .9rem; } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .page-head h1 { margin: 0; } .page-head p { margin: .3rem 0 0; color: var(--muted); } .crumb { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); text-decoration: none; font-weight: 600; margin-bottom: .4rem; } .crumb:hover { color: var(--primary); } /* ---------------- Badges & callouts ---------------- */ .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 999px; font-weight: 700; font-size: .85rem; font-family: var(--font-head); letter-spacing: .01em; } .badge--blue { background: var(--primary-soft); color: var(--brand); } .badge--green { background: var(--teal-soft); color: #067055; } .badge--amber { background: var(--accent-soft); color: #8a5300; } .badge--red { background: var(--danger-soft); color: var(--danger); } .badge--grey { background: #eef1f6; color: var(--ink-2); } .badge .dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; } .badge--live .dot { animation: pulseDot 1.6s ease-in-out infinite; } .callout { display: flex; gap: .9rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid; align-items: flex-start; } .callout .ico { margin-top: .15rem; } .callout p:last-child { margin-bottom: 0; } .callout--info { background: var(--primary-soft); border-color: #c7d9fb; color: #133a7c; } .callout--warn { background: var(--accent-soft); border-color: #f7d99a; color: #6d4300; } .callout--ok { background: var(--teal-soft); border-color: #a9e5d3; color: #05553f; } .callout--error { background: var(--danger-soft); border-color: #f3b9b9; color: #8e1b1b; } /* ---------------- Forms ---------------- */ .field { display: flex; flex-direction: column; gap: .4rem; position: relative; } .field--full { grid-column: 1 / -1; } .label { font-weight: 700; color: var(--ink); font-size: 1rem; display: block; } .label .ico { vertical-align: -0.2em; } .label .req { color: var(--danger); font-weight: 700; } .label .opt { font-weight: 500; color: var(--muted); font-size: .85rem; } .hint { color: var(--muted); font-size: .88rem; margin: 0; } .input, .select { width: 100%; min-height: 3.35rem; padding: .7rem 1rem; font: inherit; font-size: 1.05rem; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 13px; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; } .select { padding-right: 2.8rem; background-image: url("../img/chevron.svg"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; cursor: pointer; } .input:hover, .select:hover { border-color: #b4c3de; } .input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(21, 88, 214, .16); } .input[readonly] { background: #f4f7fc; color: var(--ink-2); border-style: dashed; cursor: default; } .input--big { font-size: 1.35rem; letter-spacing: .08em; font-family: var(--font-head); font-weight: 600; min-height: 3.8rem; } .input--upper { text-transform: uppercase; } .field.has-error .input, .field.has-error .select, .field.has-error .choice { border-color: var(--danger); background-color: #fffafa; } .field.has-error .input:focus, .field.has-error .select:focus { box-shadow: 0 0 0 4px rgba(198, 40, 40, .15); } .field__error { display: none; align-items: flex-start; gap: .4rem; color: var(--danger); font-weight: 600; font-size: .92rem; } .field.has-error .field__error { display: flex; animation: shakeIn .4s var(--ease); } .field__error .ico { width: 1.15rem; height: 1.15rem; margin-top: .15rem; } .field.is-ok .input { border-color: #86d6bf; } .field__ok { position: absolute; right: .9rem; top: 2.65rem; color: var(--teal); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s var(--ease-spring); pointer-events: none; } .field.is-ok .field__ok { opacity: 1; transform: scale(1); } .date3 { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: .6rem; } .pair { display: grid; grid-template-columns: 1fr 2fr; gap: .6rem; } /* Choice cards (radios) */ .choices { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); border: 0; padding: 0; margin: 0; min-width: 0; } .choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choices--chips { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); } .choices legend { padding: 0; margin-bottom: .5rem; } .choice { position: relative; display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; border: 2px solid var(--line); border-radius: 15px; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .2s var(--ease), background .2s; min-height: 3.35rem; } .choice:hover { border-color: #9fb7e6; transform: translateY(-2px); box-shadow: var(--shadow-1); } .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .choice__mark { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #9aa9c6; flex: none; display: grid; place-items: center; transition: all .2s; margin-top: .05rem; background: #fff; } .choice__mark::after { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .25s var(--ease-spring); } .choice__body { display: flex; flex-direction: column; gap: .15rem; } .choice__title { font-weight: 700; color: var(--ink); line-height: 1.35; } .choice__desc { font-size: .88rem; color: var(--muted); line-height: 1.45; } .choice.is-checked { border-color: var(--primary); background: linear-gradient(180deg, #f5f9ff, #fff); box-shadow: 0 0 0 4px rgba(21, 88, 214, .1); } .choice.is-checked .choice__mark { border-color: var(--primary); background: var(--primary); } .choice.is-checked .choice__mark::after { transform: scale(1); } .choice.is-focus { outline: 3px solid var(--accent); outline-offset: 2px; } .choice--chip { justify-content: center; text-align: center; padding: .8rem .6rem; font-family: var(--font-head); font-weight: 600; } .choice--chip .choice__mark { display: none; } .choice--chip.is-checked { background: var(--primary); color: #fff; } .choice--chip.is-checked .choice__title { color: #fff; } .choice.is-disabled { opacity: .55; cursor: not-allowed; transform: none; } .checkline { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 2px solid var(--line); border-radius: 15px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; } .checkline input { width: 1.7rem; height: 1.7rem; margin: .15rem 0 0; accent-color: var(--primary); flex: none; cursor: pointer; } .checkline.is-checked { border-color: var(--teal); background: var(--teal-soft); } .field.has-error .checkline { border-color: var(--danger); background: #fffafa; } /* ---------------- Login ---------------- */ .auth { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 4.4rem); } .auth__hero { position: relative; overflow: hidden; padding: 3.5rem 3rem; color: #fff; background: linear-gradient(145deg, #0b3d91 0%, #1558d6 55%, #2f7bf6 100%); display: flex; flex-direction: column; justify-content: center; } .auth__hero h1 { color: #fff; font-size: 2.3rem; } .auth__hero p { color: rgba(255, 255, 255, .9); font-size: 1.1rem; max-width: 34rem; } .auth__blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .45; animation: floaty 12s ease-in-out infinite; } .auth__blob--1 { width: 22rem; height: 22rem; right: -6rem; top: -6rem; background: radial-gradient(circle at 30% 30%, #ffc857, #ff6b4a); } .auth__blob--2 { width: 15rem; height: 15rem; left: -4rem; bottom: -5rem; background: radial-gradient(circle at 30% 30%, #7ee8c7, #0c9b78); animation-delay: -4s; } .auth__blob--3 { width: 7rem; height: 7rem; right: 18%; bottom: 14%; background: radial-gradient(circle at 30% 30%, #fff, #b8cdf7); opacity: .3; animation-delay: -7s; } .auth__points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .9rem; position: relative; } .auth__points li { display: flex; gap: .9rem; align-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); padding: .85rem 1.1rem; border-radius: 14px; backdrop-filter: blur(4px); font-weight: 600; } .auth__points .num { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; flex: none; } .auth__shield { width: 5.2rem; height: 5.2rem; border-radius: 22px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; margin-bottom: 1.4rem; border: 1px solid rgba(255, 255, 255, .3); animation: bob 5s ease-in-out infinite; } .auth__shield .ico { width: 2.8rem; height: 2.8rem; color: #fff; } .auth__panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; } .auth__card { width: 100%; max-width: 32rem; } .steps-mini { display: flex; gap: .5rem; margin-bottom: 1.4rem; } .steps-mini span { height: .45rem; flex: 1; border-radius: 99px; background: var(--line); overflow: hidden; position: relative; } .steps-mini span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .steps-mini span.is-on::after { transform: scaleX(1); } .auth__step { animation: slideInRight .5s var(--ease) both; } .auth__step.is-back { animation-name: slideInLeft; } .welcome-pill { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--teal-soft); color: #05553f; font-weight: 600; margin-bottom: 1.2rem; } /* ---------------- Home ---------------- */ .hero { position: relative; overflow: hidden; border-radius: 24px; padding: 2rem 2.2rem; color: #fff; background: linear-gradient(120deg, #0b3d91 0%, #1558d6 50%, #6d4ae8 100%); box-shadow: var(--shadow-2); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; } .hero h1 { color: #fff; margin-bottom: .3rem; } .hero p { color: rgba(255, 255, 255, .92); margin: 0; font-size: 1.05rem; } .hero__glow { position: absolute; width: 26rem; height: 26rem; right: -8rem; top: -12rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 87, .55), transparent 65%); animation: floaty 10s ease-in-out infinite; pointer-events: none; } .hero__meta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; position: relative; } .hero__meta .badge { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .25); } .ring { position: relative; width: 8.5rem; height: 8.5rem; flex: none; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring__track { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 10; } .ring__bar { fill: none; stroke: #ffc857; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); } .ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; } .ring__num { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; } .ring__txt { font-size: .78rem; opacity: .9; } .status-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1.3rem; align-items: center; } .status-card__icon { width: 4.2rem; height: 4.2rem; border-radius: 20px; display: grid; place-items: center; } .status-card__icon .ico { width: 2.2rem; height: 2.2rem; } .status-card__icon--none { background: var(--accent-soft); color: #b36b00; } .status-card__icon--ok { background: var(--teal-soft); color: var(--teal); } .status-card__icon--wd { background: var(--danger-soft); color: var(--danger); } .status-card__icon--lock { background: #eef1f6; color: var(--ink-2); } .status-card h2 { margin-bottom: .2rem; } .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } .tile { --c: var(--primary); --s: var(--primary-soft); position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; cursor: pointer; text-align: left; font: inherit; } .tile::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--c); transform: scaleX(.25); transform-origin: left; transition: transform .45s var(--ease); } .tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: transparent; color: var(--ink); } .tile:hover::before { transform: scaleX(1); } .tile__icon { width: 3.4rem; height: 3.4rem; border-radius: 16px; display: grid; place-items: center; background: var(--s); color: var(--c); transition: transform .4s var(--ease-spring); } .tile:hover .tile__icon { transform: scale(1.1) rotate(-6deg); } .tile__icon .ico { width: 1.8rem; height: 1.8rem; } .tile__title { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; } .tile__desc { color: var(--muted); font-size: .92rem; margin: 0; } .tile__go { margin-top: auto; display: inline-flex; align-items: center; gap: .3rem; color: var(--c); font-weight: 700; font-size: .92rem; } .tile__go .ico { width: 1.1rem; height: 1.1rem; transition: transform .3s var(--ease); } .tile:hover .tile__go .ico { transform: translateX(5px); } .tile--blue { --c: #1558d6; --s: #e8f0ff; } .tile--teal { --c: #0c9b78; --s: #e2f7f0; } .tile--amber { --c: #d97706; --s: #fff4dc; } .tile--violet { --c: #6d4ae8; --s: #efeaff; } .tile--coral { --c: #e5482a; --s: #ffece7; } .tile--slate { --c: #33415e; --s: #eef1f6; } .tile.is-disabled { opacity: .55; pointer-events: none; } .timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .timeline li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; position: relative; padding-bottom: 1.2rem; } .timeline li:last-child { padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: 1.25rem; top: 2.6rem; bottom: 0; width: 3px; background: var(--line); border-radius: 3px; } .timeline li:last-child::before { display: none; } .timeline li.is-done::before { background: var(--teal); } .timeline__dot { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--line); font-family: var(--font-head); font-weight: 700; color: var(--muted); z-index: 1; } .timeline li.is-done .timeline__dot { background: var(--teal); border-color: var(--teal); color: #fff; } .timeline li.is-now .timeline__dot { border-color: var(--primary); color: var(--primary); animation: pulseRing 2s ease-out infinite; } .timeline__title { font-weight: 700; margin-top: .35rem; } .timeline__desc { color: var(--muted); font-size: .9rem; margin: 0; } .premium-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .premium-mini div { padding: 1rem; border-radius: 14px; background: #f7f9fe; border: 1px solid var(--line-2); } .premium-mini .v { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--ink); } .premium-mini .k { color: var(--muted); font-size: .85rem; } .premium-mini div.total { background: linear-gradient(135deg, #fff7e6, #fff); border-color: #f7d99a; } .premium-mini div.total .v { color: #9a5b00; } /* ---------------- Wizard ---------------- */ .wizard { display: grid; grid-template-columns: 17rem 1fr; gap: 1.6rem; align-items: start; } .stepper { position: sticky; top: 6rem; list-style: none; margin: 0; padding: 1rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); } .stepper__item { position: relative; } .stepper__btn { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .75rem .7rem; border: 0; background: transparent; border-radius: 12px; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; transition: background .2s, color .2s; } .stepper__btn:hover { background: var(--primary-soft); } .stepper__btn[disabled] { cursor: default; opacity: .6; } .stepper__btn[disabled]:hover { background: transparent; } .stepper__num { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); font-family: var(--font-head); font-weight: 700; flex: none; background: #fff; transition: all .3s var(--ease); } .stepper__label { font-weight: 600; line-height: 1.3; } .stepper__item.is-current .stepper__btn { background: var(--primary-soft); color: var(--brand); } .stepper__item.is-current .stepper__num { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 5px rgba(21, 88, 214, .15); } .stepper__item.is-done .stepper__num { background: var(--teal); border-color: var(--teal); color: #fff; } .stepper__item.has-error .stepper__num { background: var(--danger); border-color: var(--danger); color: #fff; } .stepper__progress { height: .5rem; border-radius: 99px; background: var(--line-2); margin: .4rem .4rem 1rem; overflow: hidden; } .stepper__progress span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--primary)); transition: width .6s var(--ease); } .stepper__caption { font-size: .85rem; color: var(--muted); margin: 0 .4rem .3rem; font-weight: 600; } .panel { animation: fadeUp .45s var(--ease) both; } .panel.is-forward { animation-name: slideInRight; } .panel.is-backward { animation-name: slideInLeft; } .panel__title { display: flex; align-items: center; gap: .9rem; margin-bottom: .4rem; } .panel__title h2 { margin: 0; } .panel__lead { color: var(--muted); margin-bottom: 1.5rem; } .panel__actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2); flex-wrap: wrap; } .section-label { font-family: var(--font-head); font-weight: 600; color: var(--brand); font-size: 1.05rem; margin: 1.6rem 0 .8rem; display: flex; align-items: center; gap: .6rem; } .section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Premium panel */ .premium { position: relative; border-radius: 20px; padding: 1.5rem; background: linear-gradient(160deg, #0b3d91, #1558d6 60%, #2f7bf6); color: #fff; box-shadow: var(--shadow-2); overflow: hidden; } .premium::after { content: ""; position: absolute; width: 16rem; height: 16rem; right: -6rem; bottom: -8rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 87, .45), transparent 65%); pointer-events: none; } .premium h3 { color: #fff; display: flex; align-items: center; gap: .6rem; } .premium__rows { display: grid; gap: .6rem; margin: 1rem 0; position: relative; z-index: 1; } .premium__row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .6rem .9rem; border-radius: 12px; background: rgba(255, 255, 255, .1); } .premium__row span:first-child { opacity: .92; } .premium__row b { font-family: var(--font-head); font-size: 1.15rem; white-space: nowrap; } .premium__total { position: relative; z-index: 1; padding: 1rem 1.1rem; border-radius: 14px; background: #fff; color: var(--ink); } .premium__total .k { color: var(--muted); font-weight: 600; font-size: .9rem; } .premium__total .v { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--brand); display: block; line-height: 1.2; } .premium__total .w { font-size: .85rem; color: var(--muted); } .premium__note { font-size: .88rem; opacity: .92; margin: 1rem 0 0; position: relative; z-index: 1; } .premium__empty { position: relative; z-index: 1; padding: 1rem; border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .4); text-align: center; } .premium.is-loading .premium__total .v { opacity: .4; } .premium.flash .premium__total { animation: flash .8s var(--ease); } .policy-layout { display: grid; grid-template-columns: 1fr 20rem; gap: 1.6rem; align-items: start; } .policy-layout .premium { position: sticky; top: 6rem; } /* Review */ .review-block { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: #fff; } .review-block + .review-block { margin-top: 1rem; } .review-block__head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.1rem; background: #f6f8fd; border-bottom: 1px solid var(--line-2); } .review-block__head h3 { margin: 0; font-size: 1.05rem; } .kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } .kv > div { padding: .75rem 1.1rem; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: .1rem; } .kv > div:nth-child(odd) { border-right: 1px solid var(--line-2); } .kv dt { font-size: .82rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .kv dd { margin: 0; font-weight: 600; word-break: break-word; } .kv dd.empty { color: #9aa6bf; font-weight: 500; } /* ---------------- Documents ---------------- */ .photo-box { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; } .photo-frame { width: 9rem; height: 11rem; border-radius: 16px; border: 3px dashed #b4c3de; display: grid; place-items: center; overflow: hidden; background: #f7f9fe; color: var(--muted); text-align: center; font-size: .85rem; position: relative; } .photo-frame img { width: 100%; height: 100%; object-fit: cover; animation: popIn .5s var(--ease-spring); } .photo-frame.has-photo { border-style: solid; border-color: var(--teal); } .dropzone { position: relative; border: 3px dashed #b4c3de; border-radius: 18px; padding: 2rem 1.4rem; text-align: center; background: #fafcff; transition: border-color .2s, background .2s, transform .2s; cursor: pointer; } .dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); } .dropzone.is-over { transform: scale(1.01); } .dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .dropzone__icon { width: 4rem; height: 4rem; margin: 0 auto .7rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--primary); box-shadow: var(--shadow-1); animation: bob 3s ease-in-out infinite; } .dropzone__icon .ico { width: 2rem; height: 2rem; } .dropzone__title { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; } .progress { height: .8rem; border-radius: 99px; background: var(--line-2); overflow: hidden; } .progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--primary)); background-size: 200% 100%; animation: stripes 1.2s linear infinite; transition: width .2s; border-radius: 99px; } .doclist { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; } .doc { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1rem; align-items: center; padding: .8rem; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; animation: fadeUp .4s var(--ease) both; transition: box-shadow .2s, transform .2s; } .doc:hover { box-shadow: var(--shadow-1); } .doc.is-leaving { animation: fadeOut .35s var(--ease) forwards; } .doc__thumb { width: 4rem; height: 4rem; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #fdecec; color: var(--danger); font-family: var(--font-head); font-weight: 700; font-size: .85rem; } .doc__thumb img { width: 100%; height: 100%; object-fit: cover; } .doc__name { font-weight: 700; word-break: break-all; } .doc__meta { color: var(--muted); font-size: .85rem; } .doc__actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; } .empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); } .empty-state .ico { width: 3rem; height: 3rem; color: #b4c3de; } /* ---------------- Help ---------------- */ .faq details { border: 1px solid var(--line-2); border-radius: 14px; background: #fff; margin-bottom: .8rem; overflow: hidden; transition: box-shadow .2s; } .faq details[open] { box-shadow: var(--shadow-1); border-color: #c7d9fb; } .faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.2rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-head); font-size: 1.6rem; line-height: 1; color: var(--primary); transition: transform .3s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq__a { padding: 0 1.2rem 1.1rem; color: var(--ink-2); animation: fadeUp .35s var(--ease); } .contact-card { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 14px; background: #f7f9fe; border: 1px solid var(--line-2); } /* ---------------- Toasts ---------------- */ .toasts { position: fixed; top: 5.2rem; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: .7rem; width: min(38rem, calc(100vw - 2rem)); pointer-events: none; } .toast { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; box-shadow: var(--shadow-3); border-left: 7px solid var(--primary); animation: toastIn .5s var(--ease-spring) both; position: relative; overflow: hidden; } .toast.is-leaving { animation: toastOut .35s var(--ease) forwards; } .toast__icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); } .toast__title { font-weight: 700; font-family: var(--font-head); } .toast__msg { margin: 0; color: var(--ink-2); } .toast__close { border: 0; background: transparent; cursor: pointer; color: var(--muted); width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; } .toast__close:hover { background: #eef1f6; color: var(--ink); } .toast__timer { position: absolute; left: 0; bottom: 0; height: 4px; background: currentColor; opacity: .25; animation: timer linear forwards; } .toast--success { border-left-color: var(--teal); color: var(--teal); } .toast--success .toast__icon { background: var(--teal-soft); color: var(--teal); } .toast--error { border-left-color: var(--danger); color: var(--danger); } .toast--error .toast__icon { background: var(--danger-soft); color: var(--danger); } .toast--warn { border-left-color: var(--accent); color: #b36b00; } .toast--warn .toast__icon { background: var(--accent-soft); color: #b36b00; } .toast--info { color: var(--primary); } /* ---------------- Modal ---------------- */ .modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; } .modal__scrim { position: absolute; inset: 0; background: rgba(15, 25, 50, .55); backdrop-filter: blur(3px); animation: fadeIn .3s ease both; } .modal__box { position: relative; width: min(36rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: #fff; border-radius: 22px; box-shadow: var(--shadow-3); padding: 2rem; animation: modalIn .45s var(--ease-spring) both; } .modal__box--wide { width: min(44rem, 100%); } .modal.is-leaving .modal__scrim { animation: fadeOut .25s ease forwards; } .modal.is-leaving .modal__box { animation: modalOut .25s var(--ease) forwards; } .modal__icon { width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1rem; background: var(--primary-soft); color: var(--primary); } .modal__icon .ico { width: 2.2rem; height: 2.2rem; } .modal__icon--danger { background: var(--danger-soft); color: var(--danger); } .modal__icon--warn { background: var(--accent-soft); color: #b36b00; } .modal__icon--ok { background: var(--teal-soft); color: var(--teal); } .modal__title { margin-bottom: .5rem; } .modal__body { color: var(--ink-2); } .modal__actions { display: flex; gap: .8rem; justify-content: flex-end; margin-top: 1.6rem; flex-wrap: wrap; } .modal__actions .btn { min-width: 9rem; } body.has-modal { overflow: hidden; } /* ---------------- Success ---------------- */ .success { text-align: center; padding: 2.5rem 1.5rem; position: relative; overflow: hidden; } .success__check { width: 7rem; height: 7rem; margin: 0 auto 1.2rem; } .success__check circle { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 4; stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 0.8s var(--ease) .1s forwards; } .success__check path { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: draw .5s var(--ease) .75s forwards; } .confetti { position: absolute; top: -1rem; width: .7rem; height: 1.1rem; border-radius: 2px; opacity: 0; animation: confetti 2.8s ease-in forwards; pointer-events: none; } .confetti:nth-child(3n) { background: var(--accent); } .confetti:nth-child(3n+1) { background: var(--primary-2); } .confetti:nth-child(3n+2) { background: var(--teal); } .confetti:nth-child(4n) { background: var(--coral); border-radius: 50%; width: .8rem; height: .8rem; } /* ---------------- Skeleton ---------------- */ .skeleton { border-radius: 10px; background: linear-gradient(90deg, #edf1f8 25%, #f7f9fd 50%, #edf1f8 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; min-height: 1.2rem; } .skeleton--block { height: 7rem; } /* ---------------- Footer ---------------- */ .footer { border-top: 1px solid var(--line-2); background: #fff; padding: 1.3rem 0; color: var(--muted); font-size: .9rem; } .footer .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* ---------------- Entrance choreography ---------------- */ .reveal { opacity: 0; transform: translateY(18px); } .reveal.is-in { animation: fadeUp .6s var(--ease) forwards; animation-delay: var(--d, 0s); } .reveal-d1 { --d: .06s; } .reveal-d2 { --d: .12s; } .reveal-d3 { --d: .18s; } .reveal-d4 { --d: .24s; } .reveal-d5 { --d: .3s; } .reveal-d6 { --d: .36s; } /* ---------------- Keyframes ---------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } } @keyframes popIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } } @keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes modalOut { to { opacity: 0; transform: translateY(16px) scale(.97); } } @keyframes toastIn { from { opacity: 0; transform: translateY(-24px) scale(.95); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateY(-16px) scale(.96); } } @keyframes timer { from { width: 100%; } to { width: 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ripple { to { transform: scale(3.2); opacity: 0; } } @keyframes floaty { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-18px, 22px) scale(1.06); } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes stripes { from { background-position: 0 0; } to { background-position: -200% 0; } } @keyframes shakeIn { 0% { opacity: 0; transform: translateX(-6px); } 40% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { opacity: 1; transform: none; } } @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(21, 88, 214, .4); } 100% { box-shadow: 0 0 0 14px rgba(21, 88, 214, 0); } } @keyframes flash { 0% { transform: scale(1); } 30% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255, 200, 87, .6); } 100% { transform: scale(1); } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(26rem) rotate(560deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------------- Responsive ---------------- */ @media (max-width: 1000px) { .wizard { grid-template-columns: 1fr; } .stepper { position: static; display: flex; gap: .3rem; overflow-x: auto; padding: .6rem; } .stepper__caption, .stepper__progress { display: none; } .stepper__btn { flex-direction: column; gap: .3rem; padding: .5rem; min-width: 5.5rem; text-align: center; } .stepper__label { font-size: .78rem; } .policy-layout { grid-template-columns: 1fr; } .policy-layout .premium { position: static; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .auth { grid-template-columns: 1fr; } .auth__hero { padding: 2.2rem 1.5rem; } .auth__hero h1 { font-size: 1.7rem; } } @media (max-width: 700px) { html { font-size: 106.25%; } .grid-2, .grid-3, .kv, .premium-mini, .choices--2 { grid-template-columns: 1fr; } .kv > div:nth-child(odd) { border-right: 0; } .tiles { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; padding: 1.6rem; } .ring { width: 7rem; height: 7rem; } .status-card { grid-template-columns: auto 1fr; } .status-card > :last-child { grid-column: 1 / -1; } .photo-box { grid-template-columns: 1fr; justify-items: center; text-align: center; } .doc { grid-template-columns: 3.2rem 1fr; } .doc__actions { grid-column: 1 / -1; justify-content: flex-start; } .brand__sub, .userchip__name { display: none; } .card { padding: 1.2rem; } .modal__box { padding: 1.4rem; } .panel__actions .btn { flex: 1; } } /* ---------------- Print (View page) ---------------- */ @media print { .topbar, .nav, .footer, .no-print, .toasts { display: none !important; } body { background: #fff; } main { padding: 0; } .card, .review-block { box-shadow: none; border-color: #999; break-inside: avoid; } .reveal { opacity: 1; transform: none; } .print-only { display: block !important; } } .print-only { display: none; } .center .row, .success .row { justify-content: center; } .success .premium-mini { max-width: 44rem; margin: 0 auto; text-align: left; } body.is-leaving main { animation: fadeOut .4s var(--ease) forwards; } .choice-grid-empty { color: var(--muted); padding: .6rem 0; } .dropzone.is-disabled { opacity: .5; pointer-events: none; } .rate-table { width: 100%; border-collapse: collapse; margin: .6rem 0 1.2rem; font-size: .95rem; } .rate-table th, .rate-table td { padding: .65rem .8rem; border-bottom: 1px solid var(--line-2); text-align: right; } .rate-table th:first-child, .rate-table td:first-child { text-align: left; } .rate-table thead th { background: #f6f8fd; color: var(--ink-2); font-family: var(--font-head); font-weight: 600; } .rate-table tbody tr:hover { background: #fafcff; } .table-wrap { overflow-x: auto; } .help-grid { display: grid; grid-template-columns: 1fr 22rem; gap: 1.5rem; align-items: start; } @media (max-width: 1000px) { .help-grid { grid-template-columns: 1fr; } } /* ---- layout refinements after the first walkthrough ---- */ @media (max-width: 1280px) { .policy-layout { grid-template-columns: 1fr; } .policy-layout .premium { position: static; order: -1; } } .date3 { max-width: 34rem; } .date3 .select { padding-left: .8rem; padding-right: 2.1rem; background-position: right .65rem center; background-size: .95rem; } .date3 .input { padding-left: .8rem; padding-right: .6rem; } .ring__txt { font-size: .72rem; max-width: 6.2rem; } /* ---- challenged dependent children (2026-27 add-on) ---- */ .dep-card { border: 1px solid var(--line-2); border-radius: 16px; padding: 1.1rem 1.2rem; margin-top: 1rem; background: #fbfcff; animation: fadeUp .4s var(--ease) both; } .dep-card h4 { margin: 0 0 .8rem; font-family: var(--font-head); font-size: 1.02rem; color: var(--brand); } .dropzone--sm { padding: 1.1rem 1rem; } .dropzone--sm .dropzone__icon { width: 3rem; height: 3rem; margin-bottom: .4rem; } .dropzone.is-done { border-style: solid; border-color: var(--teal); background: var(--teal-soft); } /* ---- OTP step ---- */ .input--otp { letter-spacing: .5em; text-align: center; font-size: 1.8rem; } #otpTimer { font-weight: 700; color: var(--brand); } /* ---- Instructions page ---- */ .guide-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 2rem 2.2rem; margin-bottom: 1.25rem; color: #fff; background: linear-gradient(120deg, #0b3d91 0%, #1558d6 55%, #6d4ae8 100%); box-shadow: var(--shadow-2); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; } .guide-hero h1 { color: #fff; margin: .4rem 0 .3rem; } .guide-hero p { color: rgba(255, 255, 255, .92); margin: 0; font-size: 1.05rem; } .guide-hero .badge { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .3); } .guide-hero__art { position: relative; width: 8rem; height: 8rem; display: grid; place-items: center; flex: none; } .guide-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .guide-ring__track { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 8; } .guide-ring__bar { fill: none; stroke: #ffc857; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); } .guide-hero__icon { width: 3rem; height: 3rem; color: #fff; } .cover-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .cover { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border: 1px solid var(--line-2); border-radius: 15px; background: #fbfcff; font-weight: 600; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .cover:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); } .cover__icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; } .guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: gs; } .guide-step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.1rem; padding: 1.1rem 0; border-top: 1px solid var(--line-2); opacity: .55; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .guide-step:first-child { border-top: 0; } .guide-step.is-lit { opacity: 1; transform: none; } .guide-step h3 { margin: .1rem 0 .3rem; color: var(--brand); } .guide-step p { margin: 0 0 .6rem; color: var(--ink-2); } .guide-step__num { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-spring); } .guide-step.is-lit .guide-step__num { background: linear-gradient(135deg, var(--primary), var(--violet)); color: #fff; transform: scale(1.06); } .guide-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { padding: .35rem .8rem; border-radius: 999px; background: var(--accent-soft); color: #8a5300; font-size: .88rem; font-weight: 600; } .guide-cta { text-align: center; display: grid; gap: 1rem; justify-items: center; } .guide-cta .checkline { max-width: 32rem; } @media (max-width: 700px) { .cover-list { grid-template-columns: 1fr; } .guide-hero { grid-template-columns: 1fr; } }