/* Otthon Start Hitel - iOS-like, mobile-first theme */ :root{ /* Default brand (soft green); change by adding theme-* class on html/body */ --brand: #6faa7b; /* softer, subtler green to match sample */ --brand-600: #5c9367; /* slightly darker for hover/focus */ /* Flag base colors for hero buttons */ --flag-red: #e53935; --flag-green: #6faa7b; /* Dynamic navbar height for offcanvas offset */ --navbar-h: 0px; /* Overlap offcanvas by 1px to avoid hairline gap under the navbar */ --offcanvas-gap: -1px; /* Neutral ink + muted text */ --ink: #0a0a0a; --muted: #6e6e73; /* Surfaces, radii, shadows */ --surface: #ffffff; --radius-md: 12px; --radius-lg: 16px; --shadow-md: 0 6px 20px rgba(0,0,0,0.08); } html{ scroll-behavior:smooth; } body{ color:var(--ink); background-color:#f7f7f9; } .text-secondary{ color: var(--muted) !important; } /* Hero with soft brand tint */ .hero{ /* Fallback (older browsers) */ background: radial-gradient(1200px 300px at 85% -10%, rgba(111,170,123,0.10), rgba(111,170,123,0) 60%), linear-gradient(180deg, rgba(111,170,123,0.06), rgba(111,170,123,0)); /* Themed (modern browsers) */ background: radial-gradient(1200px 300px at 85% -10%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent); } /* Theme variants (set class on or ) */ html.theme-teal, body.theme-teal{ --brand: #00c2a8; --brand-600: #00a08b; } html.theme-purple, body.theme-purple{ --brand: #bf5af2; --brand-600: #9c3fe0; } html.theme-green, body.theme-green{ --brand: #34c759; --brand-600: #2eb349; } html.theme-orange, body.theme-orange{ --brand: #ff9f0a; --brand-600: #db8400; } /* Glassy, minimal navbar */ .navbar.sticky-top{ background: rgba(255,255,255,0.72) !important; backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom-color: rgba(0,0,0,0.06) !important; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); overflow: hidden; /* clip blur within rounded corners */ } .navbar-brand{ letter-spacing:.2px; white-space: nowrap; } .navbar-brand .brand-icon{ color: var(--brand); display:inline-block; width:26px; height:26px; object-fit:cover; object-position:center; border-radius:6px; overflow:hidden; } /* Brand collapse animation: full → OHS on constrained space (mobile overlays) */ .navbar .brand-text{ position: relative; display:inline-flex; align-items:center; } .navbar .brand-text-full, .navbar .brand-text-short{ display: inline-flex; align-items: center; line-height: 1.2; white-space: nowrap; } /* Start with short hidden and width driven by full text */ .navbar .brand-text{ --brandTextW: auto; width: var(--brandTextW); transition: width 420ms cubic-bezier(.2,.9,.2,1); } .navbar .brand-text-full{ opacity: 1; transition: opacity 1s ease; } .navbar .brand-text-short{ opacity: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: opacity 220ms linear; } /* Collapsed state: show short, fade out full, animate width */ body.brand-collapsed .navbar .brand-text{ width: var(--brandTextShortW, 0px); } body.brand-collapsed .navbar .brand-text-full{ opacity: 0; transition: opacity 220ms linear; } body.brand-collapsed .navbar .brand-text-short{ opacity: 1; transition: opacity 220ms linear; } /* Base hamburger size a touch smaller */ .navbar .navbar-toggler{ padding: .35rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; align-self: center; } .navbar .navbar-toggler{ background-color: transparent; border-color: rgba(0,0,0,0.08); } .navbar .navbar-toggler:hover{ background-color: rgba(0,0,0,0.04); } .navbar .navbar-toggler[aria-expanded="true"]{ background-color: transparent; box-shadow: none; } .navbar .navbar-toggler .navbar-toggler-icon{ width: 1.25rem; height: 1.25rem; background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } @media (max-width: 991.98px){ /* Keep brand, CTA, and hamburger on a single row */ .navbar{ flex-wrap: nowrap; } .navbar > .container, .navbar > .container-fluid{ flex-wrap: nowrap; } .navbar .navbar-brand{ margin-right: .5rem; font-size: 1.0625rem; } .navbar-brand .brand-icon{ width:32px; height:32px; object-fit:cover; object-position:center; border-radius:5px; overflow:hidden; } .navbar .navbar-toggler{ padding: .3rem; width: 42px; height: 36px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; align-self:center; } .navbar .navbar-toggler .navbar-toggler-icon{ width: 1.15rem; height: 1.15rem; background-position:center; background-size:100% 100%; } #navCtaSlot{ margin-left: .25rem; margin-right: .25rem; } } /* Symmetric, roomier padding on phones for visual balance */ @media (max-width: 575.98px){ .container{ padding-left: 1.25rem; padding-right: 1.25rem; } .navbar .navbar-brand{ font-size: 1rem; } .navbar-brand .brand-icon{ width:22px; height:22px; object-fit:cover; object-position:center; border-radius:5px; overflow:hidden; } .navbar .navbar-toggler{ width: 38px; height: 34px; padding: .25rem; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; align-self:center; } .navbar .navbar-toggler .navbar-toggler-icon{ width: 1.05rem; height: 1.05rem; background-position:center; background-size:100% 100%; } /* Reduce sticky CTA size by ~10% on smaller phones */ #navCtaSlot .btn{ font-size: .86rem; padding: .405rem .81rem; border-radius: calc(var(--radius-md) - 1px); } } /* Mobile collapsed menu polish */ @media (max-width: 991.98px){ .navbar .navbar-collapse{ padding: .25rem 0 .75rem; } .navbar .navbar-collapse .navbar-nav{ gap: .25rem; width: 100%; margin-left: 0 !important; align-items: stretch; } .navbar .navbar-collapse .nav-item{ width: 100%; } .navbar .navbar-collapse .nav-link{ padding: .6rem 0; font-size: 1.05rem; } .navbar .navbar-collapse .btn{ width: 100%; margin-top: .25rem; box-shadow: none; padding: .7rem 1rem; font-weight: 700; } } /* Sticky CTA (reusing original hero button in nav slot) */ #navCtaSlot{ display:flex; align-items:center; flex: 1 1 auto; min-width:0; overflow:visible; } #navCtaSlot{ max-width: 45vw; } #navCtaSlot .btn{ max-width: 100%; } .navbar .navbar-brand{ min-width: 0; text-overflow: ellipsis; } /* Ensure the brand icon remains visible and not clipped */ .navbar .navbar-brand .brand-icon{ flex: 0 0 auto; } /* Compact spacing between back button and brand on mobile */ @media (max-width: 991.98px){ #navbarBack{ margin-left: -0.25rem; } .navbar .navbar-brand{ margin-left: .25rem; } } #navCtaSlot .btn{ --cta-scale: 1; /* dynamically updated via JS to ensure the button fits */ border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: .45rem .9rem; /* slightly smaller than hero */ font-weight: 600; font-size: .95rem; /* scale text a touch */ opacity: 0; visibility: hidden; transform: translateY(-4px) scale(var(--cta-scale)); transform-origin: left center; white-space: nowrap; /* keep label to one line */ transition: opacity 1.1s ease, transform .25s ease, visibility 0s linear .2s; /* delay vis to avoid flicker */ } #navCtaSlot.show .btn{ opacity: 1; visibility: visible; transform: translateY(0) scale(var(--cta-scale)); transition-delay: 0s, 0s, 0s; } /* Cards & features */ .card{ border-radius: var(--radius-lg); border-color: rgba(0,0,0,0.06); box-shadow: var(--shadow-md); } .feature{ border-radius: var(--radius-lg); transition: box-shadow .2s ease, transform .2s ease; } .feature:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Buttons */ .btn{ border-radius: var(--radius-md); } .btn-primary{ background-color:var(--brand); border-color:var(--brand); } .btn-primary:hover{ background-color:var(--brand-600); border-color:var(--brand-600); } .btn-outline-primary{ color:var(--brand); border-color:var(--brand); } .btn-outline-primary:hover{ background-color:var(--brand); color:#fff; } /* Hero buttons as equal-size grid */ .hero-buttons{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; } .hero-buttons .btn{ width: 100%; } @media (max-width: 575.98px){ .hero-buttons{ grid-template-columns: 1fr; } } /* Alternate brand tint for gradient-like pairing */ .btn-brand-alt{ --brand-alt: color-mix(in srgb, var(--brand) 88%, white); background-color: var(--brand-alt); border-color: var(--brand-alt); color: #fff; } .btn-brand-alt:hover{ background-color: color-mix(in srgb, var(--brand) 100%, white); border-color: color-mix(in srgb, var(--brand) 100%, white); } /* Hungarian flag button set: red, white, green */ /* Mid-intensity variants (between bold and pastel) */ .btn-flag-red{ background-color: color-mix(in srgb, var(--flag-red) 72%, white); border-color: color-mix(in srgb, var(--flag-red) 78%, white); color:#ffffff; } .btn-flag-red:hover{ background-color: color-mix(in srgb, var(--flag-red) 85%, white); border-color: color-mix(in srgb, var(--flag-red) 90%, white); } .btn-flag-white{ background-color:#ffffff; border-color:#d8dee8; color:#0a0a0a; } .btn-flag-white:hover{ background-color:#f7f9fd; border-color:#c8d1e0; } .btn-flag-green{ background-color: color-mix(in srgb, var(--flag-green) 70%, white); border-color: color-mix(in srgb, var(--flag-green) 76%, white); color:#ffffff; } .btn-flag-green:hover{ background-color: color-mix(in srgb, var(--flag-green) 82%, white); border-color: color-mix(in srgb, var(--flag-green) 88%, white); } /* Make the hero Hitelkalkulátor button a touch fuller without affecting other green buttons */ .hero-buttons .btn-flag-green{ background-color: color-mix(in srgb, var(--flag-green) 80%, white); border-color: color-mix(in srgb, var(--flag-green) 86%, white); } .hero-buttons .btn-flag-green:hover{ background-color: color-mix(in srgb, var(--flag-green) 88%, white); border-color: color-mix(in srgb, var(--flag-green) 94%, white); } /* Benefit section: evenly sized soft tricolor buttons */ .benefit-cta-buttons{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; } .benefit-cta-buttons .btn{ width:100%; } @media (max-width: 767.98px){ .benefit-cta-buttons{ grid-template-columns: 1fr; } } .btn-flag-red-soft{ background-color: color-mix(in srgb, var(--flag-red) 55%, white); border-color: color-mix(in srgb, var(--flag-red) 60%, white); color:#fff; } .btn-flag-red-soft:hover{ background-color: color-mix(in srgb, var(--flag-red) 65%, white); border-color: color-mix(in srgb, var(--flag-red) 70%, white); } .btn-flag-white-soft{ background-color:#ffffff; border-color:#e2e6ef; color:#0a0a0a; } .btn-flag-white-soft:hover{ background-color:#fafbfe; border-color:#d4dae7; } .btn-flag-green-soft{ background-color: color-mix(in srgb, var(--flag-green) 62%, white); border-color: color-mix(in srgb, var(--flag-green) 68%, white); color:#fff; } .btn-flag-green-soft:hover{ background-color: color-mix(in srgb, var(--flag-green) 72%, white); border-color: color-mix(in srgb, var(--flag-green) 78%, white); } /* Collapse spacing when slot has no content */ #navCtaSlot:empty{ margin-left: 0 !important; margin-right: 0 !important; } /* Badges */ .badge.text-bg-light{ background-color:#f1f5ff !important; color:#1f3a7a; border:1px solid rgba(111,170,123,0.15); } /* Form */ .form-control, .form-select{ border-radius: var(--radius-md); border-color:#e6e8ee; } .form-control:focus, .form-select:focus{ box-shadow: 0 0 0 .25rem rgba(111,170,123,.20); border-color: var(--brand); } /* Utilities */ .py-md-6{ padding-top:4.5rem !important; padding-bottom:4.5rem !important; } /* Small tweaks for very small screens */ @media (max-width: 360px){ .display-5{ font-size:1.75rem; } .btn-lg{ padding:.6rem 1rem; font-size:1rem; } .navbar .navbar-brand{ font-size: .95rem; } .navbar-brand .brand-icon{ width:20px; height:20px; } .navbar .navbar-toggler{ width: 36px; height: 32px; padding: .2rem; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; align-self:center; } .navbar .navbar-toggler .navbar-toggler-icon{ width: 1rem; height: 1rem; background-position:center; background-size:100% 100%; } } /* Calculator overlay: make charts softer and scale typography responsively */ #overlay-calculator .amort-card h3, #overlay-calculator .amort-card .h6, #overlay-calculator .amort-card .h5 { font-size: clamp(0.9rem, 1.3vw, 1.05rem); } #overlay-calculator #calcMonthly { font-size: clamp(1.05rem, 1.8vw, 1.25rem); } #overlay-calculator .amort-chart { min-height: clamp(160px, 22vh, 260px); } /* Make stacked chart colors visually softer via CSS fallback (JS controls exact colors) */ #overlay-calculator .amort-card { --calc-area-alpha: 0.06; --calc-line-width: 3px; } /* Prevent table cells from wrapping on small screens and scale text down so rows don't break */ #overlay-calculator .table td, #overlay-calculator .table th { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: clamp(0.72rem, 1vw, 0.92rem); line-height: 1.05; } /* Ensure the table container can scroll horizontally on very small screens rather than wrap */ #overlay-calculator .table-responsive{ overflow:auto; -webkit-overflow-scrolling: touch; } /* Tweak form element sizes inside the overlay so elements fit comfortably */ #overlay-calculator .form-control, #overlay-calculator .form-select{ font-size: clamp(0.85rem, 1.1vw, 1rem); } /* Make the calc result numbers less dominant on small screens */ @media (max-width: 767.98px){ #overlay-calculator #calcMonthly { font-size: 1.05rem; } #overlay-calculator #calcTotal, #overlay-calculator #calcInterest { font-size: 0.95rem; } } /* Tap highlight and focus polish (reduces the gray ripple circle on mobile) */ a, button, .btn, .navbar-toggler{ -webkit-tap-highlight-color: rgba(0,0,0,0.04); } .navbar .navbar-toggler:focus{ box-shadow: none; } .navbar .navbar-toggler:focus-visible{ outline: none; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 30%, transparent); } /* Hide sticky CTA slot when JS toggles body.nav-open */ body.nav-open #navCtaSlot{ display: none !important; } /* Offcanvas (mobile menu) theming – frosted white, no gradient */ .offcanvas{ /* slightly translucent white for glass effect */ background: rgba(255,255,255,0.78) !important; /* iOS/macOS-like glass */ backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); /* Ensure flex children (offcanvas-body) can actually scroll */ display: flex; flex-direction: column; min-height: 0; /* allow child to define its own scroll area */ } .offcanvas.offcanvas-start, .offcanvas.offcanvas-end, .offcanvas.offcanvas-top, .offcanvas.offcanvas-bottom{ top: calc(var(--navbar-h, 0px) + var(--offcanvas-gap, 0px)); height: calc(100% - var(--navbar-h, 0px) - var(--offcanvas-gap, 0px)); } .offcanvas-backdrop{ top: calc(var(--navbar-h, 0px) + var(--offcanvas-gap, 0px)); height: calc(100% - var(--navbar-h, 0px) - var(--offcanvas-gap, 0px)); } .offcanvas.offcanvas-end{ border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); overflow: hidden; /* clip gradient and content to rounded edge */ border-left: 1px solid rgba(0,0,0,0.06); } .offcanvas .offcanvas-header{ display:none; } .offcanvas .offcanvas-title{ display:none; } .offcanvas .nav-link{ font-size: 1.05rem; color: var(--ink); padding: .6rem 0; } .offcanvas .nav-link:hover{ color: var(--brand-600); } .offcanvas .btn{ border-radius: var(--radius-md); box-shadow: var(--shadow-md); } /* Ensure initial body content isn't tucked under the top edge */ .offcanvas .offcanvas-body{ padding-top: calc(1rem + var(--offcanvas-gap, 0px)); } /* Make the panel body the scroll container with momentum scrolling on mobile */ .offcanvas .offcanvas-body{ overflow-y: auto !important; -webkit-overflow-scrolling: touch; max-height: 100%; touch-action: pan-y; } /* Close button inside body */ .offcanvas .offcanvas-close{ position: absolute; top: calc(.75rem + env(safe-area-inset-top, 0px)); right: calc(env(safe-area-inset-right, 0px) + clamp(1rem, 4vw, 1.5rem)); z-index: 10; opacity: .8; } .offcanvas .offcanvas-close:hover{ opacity: 1; } /* In-overlay back arrow (top-left), complements navbar back */ .offcanvas .offcanvas-back{ position: absolute; top: calc(.75rem + env(safe-area-inset-top, 0px)); left: clamp(.5rem, 2.5vw, 1rem); z-index: 10; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(0,0,0,0.04); color: inherit; } .offcanvas .offcanvas-back:hover{ background: rgba(0,0,0,0.08); } /* On small screens, rely on the navbar back button and hide the in-overlay back to avoid overlap */ @media (max-width: 991.98px){ .content-overlay .offcanvas-back{ display:none !important; } } /* Subtle tinted, blurred backdrop behind the offcanvas */ .offcanvas-backdrop.show{ background-color: rgba(15, 23, 42, 0.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Fullscreen content overlay variant */ .offcanvas.offcanvas-fullscreen{ width: 100vw; /* take entire width for content panels */ max-width: 100%; } .content-overlay .offcanvas-body{ padding-top: calc(1rem + var(--offcanvas-gap, 0px)); } .content-overlay ul{ padding-left: 1.15rem; margin-bottom: .75rem; } .content-overlay li{ margin-bottom: .35rem; } .content-overlay h3{ letter-spacing: .3px; } /* Subtle tables inside overlays */ .content-overlay .table{ font-size: .95rem; } .content-overlay .table th{ background-color: rgba(0,0,0,0.03); font-weight: 600; } .content-overlay .table td, .content-overlay .table th{ border-color: rgba(0,0,0,0.08); } /* Simple figure styling inside overlays */ .content-overlay .overlay-figure { margin: 1rem 0 0.5rem 0; } .content-overlay .overlay-figure .figure-caption { color: rgba(0,0,0,0.55); } /* Make the supported-overlay buttons uniform and slightly larger on wide screens. Center the group and give each button a readable, fixed-ish width that scales. This keeps the visual weight similar to other large CTAs while avoiding full-width bars. */ @media (min-width: 992px){ /* center the group and stack buttons vertically */ #overlay-supported .d-grid{ display: flex !important; flex-direction: column; gap: 1rem; align-items: center; max-width: 920px; margin-left: auto; margin-right: auto; } /* each button: consistent responsive width, larger padding and type */ #overlay-supported .d-grid .btn{ width: clamp(320px, 38vw, 560px); min-height: 64px; padding: 0.9rem 2.2rem; font-size: 1.05rem; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: calc(var(--radius-md) + 6px); box-shadow: var(--shadow-md); } /* slightly increase prominence of the white variant to match visual size */ #overlay-supported .d-grid .btn.btn-flag-white-soft{ color: #0a0a0a; border-color: #e6e8ee; } } .content-overlay .table-responsive{ -webkit-overflow-scrolling: touch; } /* Rounded outer corners for tables on explanation overlays */ .content-overlay .table-responsive, .content-overlay .table{ border-radius: .75rem; /* ~12px */ overflow: hidden; /* clip inner cell borders to the radius */ } /* Back button look-alike link */ #navbarBack{ color: inherit; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; } #navbarBack:hover{ background-color: rgba(0,0,0,0.05); } /* When an overlay is open, keep the navbar CTA visible but slightly smaller to fit alongside the back button */ body.overlay-open #navCtaSlot{ max-width: 60vw; } @media (max-width: 575.98px){ body.overlay-open #navCtaSlot .btn{ font-size: .80rem; padding: .36rem .72rem; border-radius: calc(var(--radius-md) - 2px); } } /* Extra narrow screens (older Android devices) — be more aggressive so CTA fits reliably */ @media (max-width: 420px){ /* Give nav slot more available width and reduce left-brand spacing */ #navCtaSlot{ max-width: 68vw; margin-left: .1rem; } .navbar .navbar-brand{ margin-left: .125rem; } #navbarBack{ margin-left: 0; } /* Scale CTA down further, reduce padding and font-size so it rarely wraps */ #navCtaSlot .btn{ --cta-scale: 0.88; font-size: .78rem; padding: .32rem .6rem; line-height: 1; white-space: nowrap; } /* Ensure hero CTA in the nav slot isn't wider than available space */ #navCtaSlot{ max-width: 72vw; } } /* Fallback for ultra narrow displays: allow the CTA to shrink text slightly */ @media (max-width: 360px){ #navCtaSlot .btn{ font-size: .75rem; padding: .28rem .5rem; --cta-scale: 0.82; } .display-5{ font-size:1.6rem; } } /* Collapse brand text to "OHS" earlier to free up space for CTA */ @media (max-width: 400px) { body:not(.brand-collapsed) .navbar .brand-text-full { opacity: 0; } body:not(.brand-collapsed) .navbar .brand-text-short { opacity: 1; } body:not(.brand-collapsed) .navbar .brand-text { width: var(--brandTextShortW, 0px); } } /* Ensure short brand ("OHS") is visible at 360px */ @media (max-width: 360px) { body.brand-collapsed .navbar .brand-text-short { opacity: 1; display: inline-block; } body.brand-collapsed .navbar .brand-text-full { opacity: 0; display: none; } #brandTextShort { display: inline; } #brandTextFull { display: none; } } /* Reduce navbar/CTA horizontal padding for extra space */ @media (max-width: 370px) { .navbar { padding-left: 2px !important; padding-right: 2px !important; } #navCtaSlot { margin-left: 0 !important; margin-right: 0 !important; } } /* Stack navbar elements vertically if still cramped */ @media (max-width: 340px) { .navbar { flex-direction: column !important; align-items: flex-start !important; } .navbar .navbar-brand, .navbar #navCtaSlot, .navbar .navbar-toggler { display: block !important; width: 100% !important; margin-bottom: 4px !important; text-align: left !important; } } /* Legal portrait sizing */ .legal-portrait{ max-width: 280px; } @media (max-width: 575.98px){ .legal-portrait{ max-width: 100%; float: none !important; margin: 0 0 .75rem 0 !important; } } /* Decorative watermark for legal overlay (subtle § sign) */ .overlay-legal .offcanvas-body{ position: relative; } .overlay-legal .offcanvas-body::after{ content: '§'; position: fixed; top: var(--navbar-h, 0px); left: 0; right: 0; bottom: 0; display: block; pointer-events: none; font-size: clamp(200px, 60vw, 640px); line-height: 1; font-weight: 700; color: rgba(0,0,0,0.06); letter-spacing: -0.02em; /* Place it visually behind content */ z-index: 0; /* Centered */ display:flex; align-items:center; justify-content:center; } /* Ensure overlay content stays above watermark */ .overlay-legal .offcanvas-body > .container{ position: relative; z-index: 1; } /* Decorative watermark for general overlay (subtle % sign) */ .overlay-general .offcanvas-body{ position: relative; } .overlay-general .offcanvas-body::after{ content: '%'; position: fixed; top: var(--navbar-h, 0px); left: 0; right: 0; bottom: 0; display: block; pointer-events: none; font-size: clamp(200px, 60vw, 640px); line-height: 1; font-weight: 700; color: rgba(0,0,0,0.06); letter-spacing: -0.02em; z-index: 0; display:flex; align-items:center; justify-content:center; } .overlay-general .offcanvas-body > .container{ position: relative; z-index: 1; } /* Decorative watermark for privacy overlay (subtle ! sign) */ .overlay-privacy .offcanvas-body{ position: relative; } .overlay-privacy .offcanvas-body::after{ content: '!'; position: fixed; top: var(--navbar-h, 0px); left: 0; right: 0; bottom: 0; display: block; pointer-events: none; font-size: clamp(200px, 60vw, 640px); line-height: 1; font-weight: 700; color: rgba(0,0,0,0.06); letter-spacing: -0.02em; z-index: 0; display:flex; align-items:center; justify-content:center; } .overlay-privacy .offcanvas-body > .container{ position: relative; z-index: 1; } /* No-select utility for overlays that should not allow copying */ .overlay-noselect, .overlay-noselect *{ -webkit-user-select: none !important; -ms-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; /* disable iOS long-press menu */ } /* Privacy consent actions: tighter, consistent sizing */ .privacy-consent-actions .btn{ padding: .625rem 1rem; /* slightly tighter than default .btn-lg */ font-size: 1rem; /* keep label readable without oversizing */ line-height: 1.25; border-radius: 14px; /* a touch rounder for CTA feel */ } @media (min-width: 576px){ .privacy-consent-actions .btn{ font-size: 1.05rem; } } @media (max-width: 360px){ .privacy-consent-actions .btn{ font-size: .97rem; padding: .56rem .9rem; } } /* Amortization chart panel – force light (white) look */ .amort-card{ background: linear-gradient(180deg, #ffffff, #fafafa); border: 1px solid rgba(0,0,0,0.06); box-shadow: var(--shadow-md); } /* Note: OS dark scheme rules intentionally disabled for now – keeping for later use @media (prefers-color-scheme: dark){ .amort-card{ background: linear-gradient(180deg, #0b1220, #0a0f1a); border-color: rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02); } } */ .amort-card h2{ letter-spacing:.2px; } /* Keep the chart compact and within the viewport height */ .amort-chart{ width: 100%; height: clamp(180px, 26vh, 240px); } @media (min-width: 768px){ .amort-chart{ height: clamp(200px, 28vh, 280px); } } @media (min-width: 1200px){ .amort-chart{ height: clamp(220px, 30vh, 320px); } } /* Add to your CSS file */ body.brand-collapsed #brandTextFull { display: none; } body.brand-collapsed #brandTextShort { display: inline; } #brandTextShort { display: none; } /* While we compute measurements, hide the brand text to prevent flash from full -> short */ body.brand-measuring .navbar .brand-text-full, body.brand-measuring .navbar .brand-text-short { opacity: 0 !important; visibility: hidden !important; } /* Add to your CSS file */ .navbar-tight { padding-left: 4px !important; padding-right: 4px !important; } .btn-tight { padding-left: 10px !important; padding-right: 10px !important; font-size: 0.95rem !important; } /* Optional: Stack navbar elements vertically on ultra-narrow screens */ @media (max-width: 340px) { .navbar .navbar-brand, .navbar #navCtaSlot, .navbar .navbar-toggler { display: block; width: 100%; margin-bottom: 4px; text-align: left; } .navbar { flex-direction: column !important; align-items: flex-start !important; } } /* Ultra-narrow screens: reduce navbar and CTA size, but keep proportions */ @media (max-width: 320px) { .navbar { font-size: 0.92rem !important; padding-left: 2px !important; padding-right: 2px !important; } .navbar .navbar-brand { font-size: 0.88rem !important; margin-right: 0.25rem !important; } .navbar-brand .brand-icon { width: 18px !important; height: 18px !important; } #navCtaSlot .btn { font-size: 0.72rem !important; padding: .22rem .44rem !important; border-radius: calc(var(--radius-md) - 3px) !important; min-width: 90px !important; min-height: 32px !important; } .navbar .navbar-toggler { width: 32px !important; height: 28px !important; padding: .15rem !important; } } /* Stack elements vertically only if absolutely necessary */ @media (max-width: 300px) { .navbar .navbar-brand, .navbar #navCtaSlot, .navbar .navbar-toggler { display: block !important; width: 100% !important; margin-bottom: 2px !important; text-align: left !important; } .navbar { flex-direction: column !important; align-items: flex-start !important; } } .navbar { display: flex; align-items: center; overflow: hidden; min-width: 0; } .navbar .navbar-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; } #navCtaSlot { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; } #navCtaSlot .btn { flex-shrink: 1; min-width: 90px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; } body.brand-icon-only .navbar .brand-text-full, body.brand-icon-only .navbar .brand-text-short { display: none !important; } body.brand-icon-only .navbar .brand-icon { display: inline-block !important; } /* ------------------------------------------------------------------ Additional safeguards to keep navbar ratios stable across devices - Use clamp() to keep font-size and paddings proportional - Explicit rules for the progressive collapse state added by JS - Force flex-shrink/min-width so items don't overflow/overlap ------------------------------------------------------------------ */ /* Make navbar typography fluid but constrained for consistent ratios */ .navbar .navbar-brand { font-size: clamp(0.95rem, 1.6vw, 1.12rem); } #navCtaSlot .btn { font-size: clamp(0.78rem, 1.2vw, 1rem); padding: clamp(.28rem, .8vw, .45rem) clamp(.5rem, 1.6vw, .9rem); } /* Ensure all primary navbar children can shrink and won't force overflow */ .navbar .navbar-brand, #navCtaSlot, .navbar .navbar-toggler, nav.d-lg-block { min-width: 0; flex-shrink: 1; } .navbar { gap: 0.5rem; } /* Explicit collapse state: hide nav items and ensure toggler visible */ body.nav-items-collapsed nav.d-lg-block { display: none !important; } body.nav-items-collapsed .navbar-toggler { display: inline-flex !important; } /* When nav items collapse, give CTA more room but keep it bounded */ body.nav-items-collapsed #navCtaSlot { max-width: 46vw; } /* Prevent CTA from overflowing; allow it to ellipsize but remain usable */ #navCtaSlot .btn { text-overflow: ellipsis; overflow: hidden; } /* Ensure SVG icons in navbar scale proportionally and don't distort */ .navbar .brand-icon, #navbarBack svg, .navbar .navbar-toggler-icon { width: auto; height: 1.6rem; max-height: 2.2rem; display: inline-block; } /* Small screens: prefer collapsing the nav early to keep consistent visual ratio */ @media (max-width: 480px){ body.nav-items-collapsed #navCtaSlot { max-width: 62vw; } .navbar .navbar-brand { font-size: clamp(.92rem, 2.6vw, 1.02rem); } }