/* * ═══════════════════════════════════════════════════════════════════════════ * DIGITAL CARDS PORTAL - PUBLIC WEBSITE AND LEGAL PAGES * web.css · LOAD ON welcome.blade.php, compliance/privacy.blade.php AND * compliance/terms.blade.php * ─────────────────────────────────────────────────────────────────────────── * 1. Welcome page variables (welcome.blade.php) * 2. Welcome page base reset (welcome.blade.php) * 3. Welcome hero card (welcome.blade.php) * 4. Welcome logo (welcome.blade.php) * 5. Welcome badge and introduction (welcome.blade.php) * 6. Welcome primary action (welcome.blade.php) * 7. Welcome secondary actions (welcome.blade.php) * 8. Welcome account note (welcome.blade.php) * 9. Welcome responsive (welcome.blade.php) * 10. Legal layout and document shell (shared - privacy + terms) * 11. Legal table (shared - privacy + terms) * 12. Security grid (compliance/privacy.blade.php only) * 13. Pricing tiers (compliance/terms.blade.php only) * ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 1. WELCOME PAGE VARIABLES --welcome-brand and --welcome-brand-dark are exact colour matches for the global --brand and --brand-hover tokens (styles.css), so they reference those rather than repeating the hex values; the rest are specific to this standalone page and have no project-wide equivalent. ═══════════════════════════════════════════════════════════════ */ :root { --welcome-brand: var(--brand); --welcome-brand-dark: var(--brand-hover); --welcome-dark: #101828; --welcome-text: #475467; --welcome-border: rgba(15, 23, 42, 0.08); --welcome-navbar-height: 76px; } /* ═══════════════════════════════════════════════════════════════ 2. WELCOME PAGE BASE RESET welcome.blade.php is a standalone document (not the app layout), so its / tags carry the welcome-html/welcome-body classes purely so these two rules stay scoped to that page and never leak onto compliance/privacy.blade.php or compliance/terms.blade.php, which also load this stylesheet but use the shared app layout's own styling. The universal box-sizing: border-box reset welcome.blade.php used to repeat here has been dropped - styles.css already declares the identical rule globally, so it was a pure duplicate. ═══════════════════════════════════════════════════════════════ */ html.welcome-html, body.welcome-body { width: 100%; min-height: 100%; } body.welcome-body { margin: 0; overflow-x: hidden; color: var(--welcome-dark); background: #eef7fb; font-family: "Inter", sans-serif; } /* ═══════════════════════════════════════════════════════════════ 3. WELCOME HERO CARD Fits the complete card inside the available viewport. ═══════════════════════════════════════════════════════════════ */ .welcome-page { min-height: calc(100svh - var(--welcome-navbar-height)); padding: 22px 18px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top right, rgba(80, 197, 255, 0.22), transparent 32%), radial-gradient(circle at bottom left, rgba(65, 64, 66, 0.1), transparent 28%), linear-gradient(135deg, #f8fbfd 0%, #eef7fb 100%); } .welcome-card { position: relative; width: min(100%, 980px); max-height: calc(100svh - var(--welcome-navbar-height) - 44px); padding: clamp(22px, 2.7vh, 38px) clamp(28px, 4vw, 54px); overflow: hidden; text-align: center; border: 1px solid var(--welcome-border); border-radius: 32px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(251, 253, 255, 0.98) 100%); box-shadow: 0 28px 75px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.03); } .welcome-card::before { content: ""; position: absolute; top: -145px; right: -135px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(80, 197, 255, 0.19), transparent 70%); pointer-events: none; } .welcome-card::after { content: ""; position: absolute; bottom: -190px; left: -170px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(65, 64, 66, 0.07), transparent 70%); pointer-events: none; } .welcome-content { position: relative; z-index: 2; width: 100%; } /* ═══════════════════════════════════════════════════════════════ 4. WELCOME LOGO ═══════════════════════════════════════════════════════════════ */ .welcome-logo { width: clamp(76px, 9vh, 96px); height: clamp(76px, 9vh, 96px); margin: 0 auto clamp(11px, 1.6vh, 16px); padding: 13px; display: grid; place-items: center; border: 1px solid rgba(80, 197, 255, 0.23); border-radius: 24px; background: #ffffff; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08); } .welcome-logo img { width: 100%; height: 100%; object-fit: contain; } /* ═══════════════════════════════════════════════════════════════ 5. WELCOME BADGE AND INTRODUCTION ═══════════════════════════════════════════════════════════════ */ .welcome-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; margin-bottom: clamp(9px, 1.3vh, 14px); padding: 7px 13px; border: 1px solid rgba(80, 197, 255, 0.24); border-radius: 999px; background: rgba(80, 197, 255, 0.1); color: #1c5875; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; line-height: 1.2; text-transform: uppercase; } .welcome-badge i { color: var(--welcome-brand-dark); } .welcome-title { max-width: 790px; margin: 0 auto clamp(8px, 1.2vh, 13px); color: var(--welcome-dark); font-family: "Poppins", sans-serif; font-size: clamp(2rem, 3.3vw, 3.15rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.045em; } .welcome-text { max-width: 720px; margin: 0 auto clamp(17px, 2.3vh, 26px); color: var(--welcome-text); font-size: clamp(0.88rem, 1vw, 0.98rem); line-height: 1.62; } /* ═══════════════════════════════════════════════════════════════ 6. WELCOME PRIMARY ACTION ═══════════════════════════════════════════════════════════════ */ .welcome-enter { position: relative; display: flex; align-items: center; gap: 15px; width: 100%; min-height: 74px; margin-bottom: clamp(11px, 1.5vh, 16px); padding: 14px 22px; overflow: hidden; text-align: left; text-decoration: none; border: 1px solid rgba(80, 197, 255, 0.45); border-radius: 20px; color: #ffffff; background: linear-gradient( 120deg, var(--nav-bg) 0%, #14304f 55%, var(--welcome-brand-dark) 145% ); box-shadow: 0 17px 42px rgba(12, 22, 48, 0.27); transition: transform 0.25s ease, box-shadow 0.25s ease; } .welcome-enter:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 23px 52px rgba(12, 22, 48, 0.34); } .welcome-enter::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); transform: skewX(-20deg); animation: welcomeShine 4.5s ease-in-out infinite; } @keyframes welcomeShine { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } } .welcome-enter-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 1px solid rgba(80, 197, 255, 0.4); border-radius: 14px; background: rgba(80, 197, 255, 0.17); color: #7fd7ff; font-size: 1.25rem; } .welcome-enter-text { flex: 1 1 auto; min-width: 0; } .welcome-enter-text strong { display: block; font-family: "Poppins", sans-serif; font-size: 1.05rem; font-weight: 800; line-height: 1.25; } .welcome-enter-text span { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.74); font-size: 0.82rem; line-height: 1.45; } .welcome-enter-arrow { flex: 0 0 auto; color: #7fd7ff; font-size: 1.2rem; transition: transform 0.25s ease; } .welcome-enter:hover .welcome-enter-arrow { transform: translateX(5px); } /* ═══════════════════════════════════════════════════════════════ 7. WELCOME SECONDARY ACTIONS ═══════════════════════════════════════════════════════════════ */ .welcome-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-bottom: clamp(13px, 1.8vh, 20px); } .welcome-btn { min-width: 0; min-height: 48px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 14px; font-size: 0.86rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } .welcome-btn-light { border: 1px solid rgba(15, 23, 42, 0.11); background: #ffffff; color: var(--welcome-dark); box-shadow: 0 5px 14px rgba(15, 23, 42, 0.035); } .welcome-btn-light:hover { color: var(--welcome-dark); border-color: rgba(80, 197, 255, 0.42); background: #f8fdff; transform: translateY(-2px); box-shadow: 0 10px 23px rgba(15, 23, 42, 0.07); } .welcome-btn-light i { color: var(--welcome-brand-dark); font-size: 1rem; } /* ═══════════════════════════════════════════════════════════════ 8. WELCOME ACCOUNT NOTE ═══════════════════════════════════════════════════════════════ */ .welcome-note { max-width: 760px; margin: 0 auto; padding: 11px 14px; display: flex; align-items: flex-start; gap: 10px; text-align: left; border: 1px solid rgba(80, 197, 255, 0.17); border-radius: 15px; background: rgba(80, 197, 255, 0.08); color: #21536d; font-size: 0.82rem; line-height: 1.48; } .welcome-note-icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border: 1px solid rgba(80, 197, 255, 0.25); border-radius: 9px; background: rgba(255, 255, 255, 0.78); color: var(--welcome-brand-dark); } .welcome-note-content { min-width: 0; flex: 1; } .welcome-note-title { display: block; margin-bottom: 1px; color: #174861; font-size: 0.84rem; font-weight: 800; } .welcome-note-text { display: block; } /* ═══════════════════════════════════════════════════════════════ 9. WELCOME RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { .welcome-page { padding: 20px 16px; } .welcome-card { width: min(100%, 900px); padding: clamp(22px, 2.7vh, 34px) 36px; border-radius: 28px; } .welcome-title { font-size: clamp(2rem, 5vw, 2.9rem); } } @media (max-width: 767.98px) { .welcome-page { min-height: auto; padding: 16px 12px; align-items: flex-start; } .welcome-card { max-height: none; padding: 32px 22px; border-radius: 24px; } .welcome-actions { grid-template-columns: 1fr; } .welcome-btn { width: 100%; } } /* SHORT DESKTOP / LAPTOP SCREENS - compresses vertical space further. */ @media (max-height: 820px) and (min-width: 768px) { .welcome-page { padding-top: 14px; padding-bottom: 14px; } .welcome-card { max-height: calc(100svh - var(--welcome-navbar-height) - 28px); padding-top: 20px; padding-bottom: 20px; } .welcome-logo { width: 72px; height: 72px; margin-bottom: 9px; padding: 11px; border-radius: 20px; } .welcome-badge { min-height: 31px; margin-bottom: 8px; padding-top: 6px; padding-bottom: 6px; } .welcome-title { margin-bottom: 7px; font-size: clamp(1.85rem, 3vw, 2.6rem); } .welcome-text { margin-bottom: 14px; line-height: 1.5; } .welcome-enter { min-height: 66px; margin-bottom: 10px; padding-top: 11px; padding-bottom: 11px; } .welcome-enter-icon { width: 44px; height: 44px; flex-basis: 44px; } .welcome-actions { margin-bottom: 11px; } .welcome-btn { min-height: 44px; } .welcome-note { padding-top: 9px; padding-bottom: 9px; line-height: 1.4; } } /* MOBILE - occupies the full width of the device. */ @media (max-width: 575.98px) { :root { --welcome-navbar-height: 0px; } body.welcome-body { background: #ffffff; } .welcome-page { width: 100%; min-height: 100svh; padding: 0; align-items: stretch; background: linear-gradient( 180deg, rgba(80, 197, 255, 0.08), rgba(255, 255, 255, 0.97) 24%, #ffffff 100% ); } .welcome-card { width: 100%; max-width: none; min-height: 100svh; max-height: none; padding: max(26px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; box-shadow: none; } .welcome-card::after { display: none; } .welcome-content { width: 100%; } .welcome-logo { width: 82px; height: 82px; margin-bottom: 14px; border-radius: 22px; } .welcome-badge { min-height: 33px; margin-bottom: 12px; font-size: 0.67rem; letter-spacing: 0.055em; } .welcome-title { margin-bottom: 10px; font-size: clamp(1.8rem, 8.5vw, 2.25rem); line-height: 1.1; } .welcome-text { margin-bottom: 22px; font-size: 0.9rem; line-height: 1.65; } .welcome-enter { min-height: 68px; gap: 11px; margin-bottom: 13px; padding: 14px; border-radius: 17px; } .welcome-enter-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; font-size: 1.15rem; } .welcome-enter-text strong { font-size: 0.98rem; } .welcome-enter-text span { font-size: 0.76rem; line-height: 1.4; } .welcome-actions { gap: 9px; margin-bottom: 16px; } .welcome-btn { min-height: 48px; padding: 10px 14px; border-radius: 13px; font-size: 0.86rem; } .welcome-note { padding: 12px 13px; border-radius: 14px; font-size: 0.8rem; line-height: 1.5; } } @media (max-width: 379.98px) { .welcome-card { padding-left: 13px; padding-right: 13px; } .welcome-title { font-size: 1.68rem; } .welcome-enter-text span { display: none; } } @media (prefers-reduced-motion: reduce) { .welcome-enter, .welcome-btn, .welcome-enter-arrow { transition: none; } .welcome-enter::after { animation: none; } } /* ═══════════════════════════════════════════════════════════════ 10. LEGAL LAYOUT AND DOCUMENT SHELL (shared - privacy + terms) Byte-identical in both pages' original embedded styles (the .legal-section ul selector is the union of the two - terms.blade.php included ", ol" and privacy.blade.php did not; adding it to privacy.blade.php has no effect there since it has no matching element). ═══════════════════════════════════════════════════════════════ */ .legal-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } @media (max-width: 991.98px) { .legal-layout { grid-template-columns: 1fr; } } .legal-toc { position: sticky; top: 24px; border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--shadow-sm); padding: 18px; max-height: calc(100vh - 48px); overflow-y: auto; } @media (max-width: 991.98px) { .legal-toc { position: static; max-height: none; margin-bottom: 20px; } } .legal-toc-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .legal-toc a { display: block; padding: 7px 10px; border-radius: var(--r-md); font-size: 0.84rem; font-weight: 600; color: var(--text-muted); text-decoration: none; line-height: 1.4; } .legal-toc a:hover, .legal-toc a.is-active { background: var(--brand-50); color: var(--brand-deeper); } .legal-doc { border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .legal-doc-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 18px 28px; border-bottom: 1px solid var(--border); background: var(--n-50); font-size: 0.8rem; color: var(--text-muted); } .legal-doc-meta strong { color: var(--text-head); } .legal-section { padding: 28px; border-bottom: 1px solid var(--border); scroll-margin-top: 24px; } .legal-section:last-child { border-bottom: none; } .legal-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .legal-section-num { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--brand-50); border: 1px solid var(--brand-ring); color: var(--brand-deeper); font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; } .legal-section h2 { margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; color: var(--text-head); } .legal-section p, .legal-section li { font-size: 0.92rem; line-height: 1.75; color: var(--text-body, #414042); } .legal-section ul, .legal-section ol { padding-left: 22px; margin-bottom: 14px; } .legal-section li { margin-bottom: 6px; } .legal-section h3 { font-family: var(--font-display); font-size: 0.96rem; font-weight: 800; color: var(--text-head); margin: 18px 0 8px; } /* ═══════════════════════════════════════════════════════════════ 11. LEGAL TABLE (shared - privacy + terms) ═══════════════════════════════════════════════════════════════ */ .legal-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 14px 0; } .legal-table th, .legal-table td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; } .legal-table th { background: var(--n-50); font-weight: 800; color: var(--text-head); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } /* ═══════════════════════════════════════════════════════════════ 12. SECURITY GRID (compliance/privacy.blade.php only) ═══════════════════════════════════════════════════════════════ */ .security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0; } @media (max-width: 575.98px) { .security-grid { grid-template-columns: 1fr; } } .security-item { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--n-50); } .security-item i { font-size: 1.1rem; color: var(--green-text); flex-shrink: 0; } .security-item strong { display: block; font-size: 0.86rem; color: var(--text-head); margin-bottom: 2px; } .security-item span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════ 13. PRICING TIERS (compliance/terms.blade.php only) ═══════════════════════════════════════════════════════════════ */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 20px 0 10px; } @media (max-width: 991.98px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-card { position: relative; text-align: center; border: 1px solid var(--border); border-top: 4px solid var(--text-faint); border-radius: var(--r-xl); padding: 26px 20px 22px; background: var(--surface); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .pricing-card.is-bronze { border-top-color: #b8763e; } .pricing-card.is-silver { border-top-color: #9aa5b1; } .pricing-card.is-gold { border-top-color: #d4a017; } .pricing-card.is-custom { border-top-color: var(--brand); } .pricing-card.is-featured { border-color: var(--brand-ring); box-shadow: 0 14px 34px rgba(80, 197, 255, 0.22); transform: translateY(-6px); } .pricing-featured-pill { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 4px; background: var(--brand); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); } .pricing-medal { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; } .pricing-card.is-bronze .pricing-medal { background: linear-gradient(145deg, #c98a52, #9c6530); } .pricing-card.is-silver .pricing-medal { background: linear-gradient(145deg, #c3ccd6, #8b95a1); } .pricing-card.is-gold .pricing-medal { background: linear-gradient(145deg, #f3c948, #c9971a); } .pricing-card.is-custom .pricing-medal { background: linear-gradient(145deg, var(--brand), var(--brand-deeper)); font-size: 1.4rem; } .pricing-card h4 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 800; margin: 0 0 14px; color: var(--text-head); } .pricing-price-block { padding: 14px 0 16px; margin-bottom: 14px; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); } .pricing-price { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--text-head); } .pricing-price small { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-muted); } .pricing-card ul { list-style: none; padding: 0; margin: 0; font-size: 0.82rem; text-align: left; flex: 1 1 auto; } .pricing-card li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; line-height: 1.5; color: var(--text-body, #414042); } .pricing-card li i { color: var(--brand-deeper); margin-top: 2px; flex-shrink: 0; } .pricing-card.is-featured li i { color: var(--brand); } .sample-flag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(217, 119, 6, 0.12); border: 1px solid rgba(217, 119, 6, 0.3); color: #92400e; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }