/* ---- original style block 1 ---- */ /* ╔══════════════════════════════════════════════════════════════════════╗ ║ EGETY EDS SIMULATOR - MASTER STYLESHEET ║ ╠══════════════════════════════════════════════════════════════════════╣ ║ CSS ORGANISATION ║ ║ ───────────────────────────────────────────────────────────────── ║ ║ 1. CSS CUSTOM PROPERTIES (variables for dark/light themes) ║ ║ 2. BASE STYLES (body, scrollbar, overflow control) ║ ║ 3. CARD COMPONENTS (.card, hover effects, live-simulation-card) ║ ║ 4. PACKAGE BUTTONS (.package-btn, .package-info-bar, fallback imgs) ║ ║ 5. SLIDER CONTROLS (range input, tick marks, labels) ║ ║ 6. STICKY BUBBLES (price dot, big bubble, WhatsApp icon) ║ ║ 7. RESULTS & TABLES (.results-box, .styled-table, carousel) ║ ║ 8. FORMS & INPUTS (.number-input, toggle switches, goal planner) ║ ║ 9. MODALS & TOOLTIPS (.info-tooltip, #ploModal, WhatsApp popup) ║ ║ 10. INSTALLMENT SECTION (.installment-suggestion-card, data-row) ║ ║ 11. COMPACT LAYOUT OVERRIDES (spacing, padding, font-size reductions) ║ ║ 12. EGETY DESIGN TOKENS (:root brand vars, semantic typography) ║ ║ 13. RESPONSIVE OVERRIDES (@media breakpoints for mobile/tablet) ║ ╠══════════════════════════════════════════════════════════════════════╣ ║ OPTIMIZATIONS ║ ║ ───────────────────────────────────────────────────────────────── ║ ║ • Mobile header block deduplicated (was 7x, now 1x) ║ ║ • .sticky-bubble deduplicated (was 3x, now 1x) ║ ║ • Duplicate @media(max-width: 768px) consolidated ║ ╚══════════════════════════════════════════════════════════════════════╝ */ :root { --primary-color-light: #1a56db; --accent-color-light: #38bdf8; --bg-color-light: #f0f4f8; --text-color-light: #0f172a; --card-bg-light: rgba(255, 255, 255, 0.97); --border-color-light: rgba(226, 232, 240, 0.9); --primary-glow-light: rgba(26, 86, 219, 0.2); --stat-card-bg-light: rgba(241, 245, 249, 0.97); --primary-color-dark: #3b82f6; --accent-color-dark: #38bdf8; --bg-color-dark: #0a0e1a; --text-color-dark: #e2e8f0; --card-bg-dark: rgba(29, 41, 56, 0.95); --border-color-dark: rgba(51, 65, 85, 0.7); --primary-glow-dark: rgba(59, 130, 246, 0.2); --stat-card-bg-dark: rgba(51, 65, 85, 0.95); } /* Ensure dark-bg banner sections look correct in light mode */ .light-mode #trust-app-section > div, .light-mode #bds-section > div { background: linear-gradient(135deg, rgba(15,23,42,0.97), rgba(30,41,59,0.97)) !important; color: #f1f5f9; } /* ===== INTER FONT & SIZE SCALE OVERRIDE ===== */ /* Set Inter globally via body inheritance. Then restore Font Awesome / flag-icon font-families so their glyphs render. The FA restore rule uses higher specificity than the body rule, so no !important is needed on it. */ html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* Protect Font Awesome icon fonts — these MUST keep their own font-family */ .fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-light, .fa-duotone, .fa-brands, .fa-thin, [data-prefix="fas"], [data-prefix="far"], [data-prefix="fab"] { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important; } .fab, .fa-brands, [data-prefix="fab"] { font-family: "Font Awesome 6 Brands" !important; } /* Protect flag-icons */ .fi, [class*="fi-"] { font-family: inherit !important; } /* Font size scale: 15px body, 18px h3, 21px h2, 24px h1, 27px title */ body, p, span, div, li, td, th, label, input, select, textarea, button, a, details summary { font-size: 15px; } h4, .text-base { font-size: 15px !important; } h3, .text-lg { font-size: 18px !important; } h2, .text-xl, .section-title { font-size: 21px !important; } h1, .text-2xl, .eg-section-title { font-size: 24px !important; } .text-3xl, .title-text, .hero-r-title { font-size: 27px !important; } .text-4xl, .text-5xl { font-size: 27px !important; } .text-sm { font-size: 14px !important; } .text-xs { font-size: 13px !important; } /* ===== GLOBAL HOVER & MOTION EFFECTS ===== */ @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeSlideInLeft { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px rgba(59,130,246,0.2); } 50% { box-shadow: 0 0 20px rgba(59,130,246,0.4); } } @keyframes subtleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* Smooth transitions for ALL interactive elements */ a, button, .card, .interactive-btn, .package-btn, .faq-tab, .trust-layer, .trust-icon-card, .stat-card, .results-box, details, summary, input, select, .egety-nav-link, .egety-nav-settings-btn, .egety-nav-cta, .eds-package-section, .category-header, img, .info-tooltip-container, nav, section { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Card hover lift effect */ .card:hover, .trust-icon-card:hover, .stat-card:hover, .results-box:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); } /* Button hover glow */ button:hover, .interactive-btn:hover, .egety-nav-cta:hover { transform: translateY(-1px); filter: brightness(1.08); } /* Nav link hover */ .egety-nav-link:hover { transform: translateY(-1px); text-shadow: 0 0 8px rgba(59,130,246,0.3); } /* Trust layer hover enhancement */ .trust-layer:hover { transform: translateX(6px); border-left-width: 5px; } /* FAQ details hover */ details:hover { background: rgba(59,130,246,0.03); border-radius: 8px; } details summary:hover { color: var(--primary-color); } /* Image hover zoom */ img:hover { transform: scale(1.02); } /* Input focus animation */ input:focus, select:focus, textarea:focus { transform: scale(1.01); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); } /* Scroll-triggered reveal animation */ .eg-reveal { animation: fadeSlideIn 0.6s ease both; } /* Trust layer description animation */ .trust-layer-desc.active { display: block; animation: fadeSlideInLeft 0.4s ease both; } /* Package button hover */ .package-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 20px rgba(59,130,246,0.2); } /* Page nav buttons */ .page-nav-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; border: 2px solid var(--border-color); background: var(--card-bg); color: var(--text-color); transition: all 0.3s ease; position: relative; overflow: hidden; } .page-nav-btn:hover { transform: translateY(-2px); border-color: var(--primary-color); box-shadow: 0 4px 15px rgba(59,130,246,0.2); } .page-nav-btn.active { background: linear-gradient(135deg, var(--primary-color), #06b6d4); color: white; border-color: transparent; box-shadow: 0 4px 20px rgba(59,130,246,0.3); } .page-nav-container { display: flex; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem; flex-wrap: wrap; position: sticky; top: 60px; z-index: 40; background: var(--bg-color); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; } @media (max-width: 640px) { .page-nav-container { gap: 0.4rem; padding: 0.5rem; } .page-nav-btn { font-size: 13px !important; padding: 0.4rem 0.75rem; } .page-nav-btn i { display: none; } } /* Page content transitions */ .page-content { animation: fadeSlideIn 0.4s ease both; } .page-content.hidden { display: none !important; } .light-mode { --bg-color: var(--bg-color-light); --text-color: var(--text-color-light); --card-bg: var(--card-bg-light); --border-color: var(--border-color-light); --primary-color: var(--primary-color-light); --accent-color: var(--accent-color-light); --primary-glow: var(--primary-glow-light); --stat-card-bg: var(--stat-card-bg-light); /* Override card and page backgrounds in light mode. Without redefining these tokens the live simulation results retain the dark colours of the default theme. */ --bg-card: rgba(255, 255, 255, 0.95); --bg-page: var(--bg-color-light); } .dark-mode { --bg-color: var(--bg-color-dark); --text-color: var(--text-color-dark); --card-bg: var(--card-bg-dark); --border-color: var(--border-color-dark); --primary-color: var(--primary-color-dark); --accent-color: var(--accent-color-dark); --primary-glow: var(--primary-glow-dark); --stat-card-bg: var(--stat-card-bg-dark); } html { /* This is the master rule to prevent any horizontal scrolling on the root element */ overflow-x: hidden; } body { /* These rules force the body to fit the screen width exactly */ width: 100%; max-width: 100vw; overflow-x: hidden; /* Your other original body styles remain the same */ background-color: var(--bg-color); color: var(--text-color); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transition: background-color 0.3s, color 0.3s; font-size: 16px; position: relative; scroll-behavior: smooth; } #particle-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-color); } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-color); } .tooltip-align-right .info-tooltip { left: auto; right: 0; transform: translateX(0); } /* Cards are visible by default (no initial fade-in) */ .card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04); backdrop-filter: none; -webkit-backdrop-filter: none; transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease, border-color 0.3s ease; opacity: 1; transform: scale(1); } .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-color: var(--accent-color); } .card.is-visible { opacity: 1; transform: scale(1); } .dark-mode .card { box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.2); } .light-mode .results-carousel .text-white { color: var(--text-color-light); } /* * Provide consistent sizing for the package images displayed on the * package selection buttons. The default size is 2.5rem square with * a modest border radius and object-fit cover so the image fills the * container without distortion. Top-tier packages can be styled * slightly larger by targeting the `.top-k-package` class. */ .package-img { /* Enlarge package artwork to make the package imagery more prominent * within the simulator. Use !important to override any Tailwind * utility classes (e.g. w-6 h-6) that may still be present on * the image elements. Flex-shrink:0 prevents the thumbnail from * shrinking when the container is narrow. */ flex-shrink: 0; width: 4rem !important; height: 4rem !important; object-fit: cover; border-radius: 10px; } .top-k-package .package-img { /* Top tier packages receive a slightly larger image for emphasis. * Use !important to override any existing width/height classes. */ width: 5rem !important; height: 5rem !important; } /* * New layout for package selection buttons. Each package button is a horizontal * flex row with an enlarged image on the left and all textual data on the * right. This allows the artwork to stand out without overlay elements. A * small padding and gap separate the two columns. The button retains its * rounded corners and inherits colours from the interactive-btn base class. */ /* Layout for each package button. Stack the header (multiplier/EDS) and * the centred content vertically. Stretch children horizontally so * the multiplier and EDS count can sit at opposite ends of the top row. */ .package-btn { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 0.5rem; min-height: 4.5rem; text-align: center; } /* * When displaying the selected package within the Live Simulation card, * enlarge the thumbnail and ensure it maintains its aspect ratio. The * `.result-package-img` class is applied to images rendered in the * simulation results section. Increasing both width and height to four * rem makes the package art more prominent without overpowering nearby * metrics. Object-fit cover ensures the image fills the container * cleanly while preserving its aspect ratio. */ .result-package-img { /* Increase the size of the selected package thumbnail in the live simulation * card. The thumbnail stands alone on the left and should be large * enough to recognise the package artwork. Explicit dimensions with * !important prevent Tailwind utility classes from overriding these * values. */ flex-shrink: 0; /* Size of the selected package thumbnail in the live simulation card. A * four‑rem square offers a noticeable presence without making the * card overly tall. */ width: 4rem !important; height: 4rem !important; object-fit: cover; border-radius: 10px; } /* Styling for multiplier and EDS count within package buttons */ .multiplier-info { color: var(--accent-color); font-size: 0.8rem !important; font-weight: 700; } /* Fallback avatar used when a package image cannot be loaded. Increase * the font size to make the initial letter clearly visible within the * thumbnail square. */ /* * Base styling for fallback avatars used when package images cannot be * displayed. Increase the font size so the initial letter is clearly * visible and ensure the letter is centred both vertically and horizontally * within the square. The actual dimensions of the fallback are set * inline or inherited from the container; here we only set the text * properties. */ .fallback-img { /* Increase the size of the initial letter in the fallback avatar so it is * easily readable at a glance. A two‑rem font size provides clear * presence inside the 4rem square used for thumbnails. */ font-size: 2rem; display: flex; align-items: center; justify-content: center; } .eds-info { /* Make the EDS count subtle by using a neutral grey colour. This draws attention to the package name and price while still keeping the information visible. */ color: #9CA3AF; font-size: 0.8rem !important; font-weight: 700; } /* Override the colour of the EDS count within the investor simulator cards. The general .eds-info class defined above is sometimes overridden by more specific selectors (e.g. .package-info-bar .eds-info), which can cause the EDS count to appear white or coloured instead of grey. To ensure the counts are consistently grey within the investor simulator package buttons, we apply an additional rule scoped to .eds-package-section so that it has higher specificity and includes !important. */ .eds-package-section .eds-info { color: #9CA3AF !important; } /* Override the base styles for package buttons when they are rendered inside * the edsPackageButtons containers. The selector mirrors the * specificity of the existing reset (#edsPackageButtons .interactive-btn) so * that padding, gaps and alignment defined here take precedence. */ #edsPackageButtons .package-btn { padding: 0.5rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; min-height: 4.5rem; text-align: center; } .dark-mode .live-simulation-card .text-gray-600, .dark-mode #resultsContainer .card .text-gray-600 { color: #e2e8f0; } .light-mode .live-simulation-card .text-gray-600, .light-mode #resultsContainer .card .text-gray-600 { color: #0f172a; } .title-text, .section-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; color: var(--primary-color); } .section-title { text-shadow: none; } .link-btn { background-color: var(--primary-color); color: white; transition: all 0.25s ease; border: 1px solid transparent; border-radius: 9999px; font-weight: 600; } .link-btn:hover { background-color: color-mix(in srgb, var(--primary-color) 85%, black); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(26, 86, 219, 0.2); border-color: var(--accent-color); } /* Hide sticky bubbles whenever any modal is open */ .modal-is-open .sticky-bubble { display: none !important; } /* * Style the scrollbars for the white paper list so users can see when more * content is available. We avoid hiding the scrollbars (as done * previously) and instead customise their appearance to match the site’s * colour palette. This ensures accessibility while still blending * seamlessly with the dark/light themes. On browsers that support * ``scrollbar-width`` (Firefox) we request a thin scrollbar and set * colours via ``scrollbar-color``. On WebKit-based browsers we * explicitly style the track and thumb. */ #whitePaperList { /* Always show a vertical scrollbar when needed */ overflow-y: auto; /* Use a thin scrollbar on Firefox */ scrollbar-width: thin; /* Thumb colour uses the primary colour variable; track is transparent */ scrollbar-color: var(--primary-color) transparent; } #whitePaperList::-webkit-scrollbar { width: 6px; /* Slim width for the vertical scrollbar */ } #whitePaperList::-webkit-scrollbar-track { background: transparent; } #whitePaperList::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 3px; } #launchAppBtn, #saveSimulationBtn { animation: none; } @keyframes pulse-cta { 0% { box-shadow: 0 0 0 0 transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .interactive-btn { background-color: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); transition: all 0.2s ease; border-radius: 10px; font-weight: 500; } .interactive-btn:hover { border-color: var(--accent-color); color: var(--primary-color); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .interactive-btn.active { background: linear-gradient(to right, var(--primary-color), var(--accent-color)); border-color: var(--accent-color); color: white; box-shadow: none; transform: translateY(-1px); } .interactive-btn .btn-subtext { font-size: 0.95rem; } .interactive-btn.active .btn-subtext { color: rgba(255, 255, 255, 0.9); } /* Style the batch visibility toggle so it is obvious and easy to interact with. Without explicit styling the button inherits minimal dimensions from its parent and can become hard to spot. Applying display, padding, and colours ensures the control is visible in both light and dark themes. These variables tie into existing colour definitions used by other interactive buttons. */ #toggleOldBatchVisibility { display: inline-block; border-radius: 10px; padding: 0.35rem 0.75rem; border: 1px solid var(--accent-color); background: var(--card-bg); color: var(--accent-color); font-weight: 600; } #toggleOldBatchVisibility:hover { background: var(--accent-color); color: var(--card-bg); } /* ===== Linked Show More/See Less for Purchase Stages table ===== */ #toggleOldBatchVisibilityTable { display: inline-block; border-radius: 10px; padding: 0.35rem 0.75rem; border: 1px solid var(--accent-color); background: var(--card-bg); color: var(--accent-color); font-weight: 600; } #toggleOldBatchVisibilityTable:hover { background: var(--accent-color); color: var(--card-bg); } .stat-card, .how-it-works-item { background-color: var(--stat-card-bg); transition: all 0.3s ease-in-out; border: 1px solid transparent; } .how-it-works-item:hover, .stat-card:hover { transform: translateY(-4px); border-color: var(--accent-color); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .how-it-works-item i, .stat-card i, .partner-logo, .automation-icon i { transition: all 0.3s ease; } .how-it-works-item:hover i, .stat-card:hover i, .automation-icon:hover i, .partner-logo:hover { transform: scale(1.08); color: var(--accent-color); } .partner-logo:hover { filter: brightness(1.05); } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--border-color); border-radius: 5px; outline: none; transition: background .2s; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: var(--primary-color); cursor: pointer; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: transform 0.2s; /* Raise the thumb above the tick marks and labels so it always sits on top. Position relative enables z-index to take effect. */ position: relative; z-index: 20; } /* Ensure the range input itself sits above tick marks and labels. By positioning the slider relative and elevating its z-index, the knob remains visually on top of all ticks, and the slider track does not get obscured by tick elements. */ input[type="range"] { position: relative; z-index: 15; } input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.2); } .number-input, .goal-planner-select { background-color: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-color); } .number-input:focus, .goal-planner-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12); outline: none; } /* Hide the default spinner on number inputs for a cleaner converter field */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } .goal-planner-select option { background-color: var(--bg-color-dark); color: var(--text-color-dark); } .light-mode .goal-planner-select option { background-color: var(--bg-color-light); color: var(--text-color-light); } /* * In light mode most cards should take on a bright background to match the * rest of the interface. Without this explicit override many sections * remain dark because they rely on a semi‑transparent dark colour * inherited from the default variables. Apply the light card surface * and text colour broadly, but exclude the partner logos section so * those white logos remain visible. The partner section is identified * via the #partnersCard id. */ .light-mode .card { /* Use a nearly opaque white background in light mode. The default semi‑transparent card colour allowed the dark gradient behind sections to bleed through, resulting in cards that still appeared dark. A stronger white background ensures cards are clearly light when the light theme is active. Specify the `background` shorthand and mark it important to override the default card background set elsewhere. */ background: rgba(255, 255, 255, 0.97) !important; color: var(--text-color-light); } .light-mode #partnersCard { /* Keep the partner logos card dark in light mode to provide sufficient contrast against its white text and logos. Use !important to ensure this override wins against global card rules defined later in the stylesheet. */ background: var(--card-bg-dark) !important; color: var(--text-color-dark) !important; } .slider-ticks-container { position: relative; /* Increase the height to allow tick labels to be fully visible in all modes */ height: 28px; } .slider-tick { position: absolute; top: -5px; width: 2px; height: 10px; background-color: var(--border-color); transform: translateX(-50%); /* Make ticks clickable and ensure they sit above the slider track */ cursor: pointer; /* Raise the z-index high enough so that ticks sit on top of the slider track and remain clickable. */ z-index: 100; /* Ensure pointer events reach these elements */ pointer-events: all; } .slider-tick-label { position: absolute; top: 10px; /* Increase the label size and make it fully opaque so tick values * such as 0, 200,000 and 1M are clearly visible on the slider. */ /* Increase font size slightly to improve visibility of milestone labels */ font-size: 0.85rem; opacity: 1; color: var(--text-color); /* Ensure labels remain on a single line and centre them relative to their tick. Translating by -50% positions the midpoint of the text directly above the tick so long values do not overflow the ends of the bar. */ white-space: nowrap; transform: translateX(-50%); /* Make labels clickable and ensure they sit above the slider track */ cursor: pointer; /* Raise the z-index high enough so that labels sit on top of the slider track and remain clickable. */ z-index: 100; /* Ensure pointer events reach these elements */ pointer-events: all; } /* * Make the static milestone labels for the agent users slider appear interactive. When the * user hovers over these spans, the cursor changes to a pointer to indicate the * labels can be clicked. This mirrors the behaviour of the dynamic slider tick * labels and improves discoverability on desktop and mobile. */ /* Removed styling for the static milestone labels under the agent users slider. These elements have been removed from the markup entirely. */ .results-box { background-color: color-mix(in srgb, var(--accent-color) 15%, transparent); border-left: 4px solid var(--accent-color); padding: 0.5rem; } .results-carousel { display: grid; grid-auto-flow: row; gap: 1.5rem; } @media (max-width: 1023px) { .results-carousel { grid-auto-flow: column; grid-auto-columns: 90%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; margin-bottom: -1rem; } .results-carousel > * { scroll-snap-align: center; } } .styled-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .styled-table thead tr { background: linear-gradient(to right, var(--primary-color), var(--accent-color)); color: #ffffff; text-align: left; } .styled-table th, .styled-table td { padding: 12px 8px; text-align: center; } .styled-table th:first-child, .styled-table td:first-child { text-align: left; padding-left: 15px; } .styled-table th:last-child, .styled-table td:last-child { padding-right: 15px; } .styled-table tbody tr { border-bottom: 1px solid var(--border-color); transition: all 0.3s ease; } .styled-table tbody tr:hover { background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); } /* Highlight the selected row in purchase stages and packages tables. The active row uses the same gradient as interactive buttons for consistency and white text for contrast. */ .styled-table tbody tr.active { background: linear-gradient(to right, var(--primary-color), var(--accent-color)); color: #ffffff; } /* Ensure the first cell (Package Name) of an active package row remains legible. When a row is selected, override its color so selected package names appear white for maximum contrast against the gradient. */ .styled-table tbody tr.active td:first-child { color: #ffffff !important; } /* * Improve readability of package names in the EDS Package Tiers table. * Rather than reusing the accent color (which fades into the row highlight), use the * primary color for unselected rows. This provides stronger contrast against the dark * card background. When the row is active, the first‑cell override above takes * precedence and turns the text white. */ .styled-table tbody td.package-name-cell { color: var(--primary-color); } /* Indicate that rows in the purchase stages and package tables are interactive by changing the cursor on hover. */ .styled-table tbody tr { cursor: pointer; } /* * Style the live simulation card with an animated gradient border instead of a * pulsing glow. The card uses a double‑layered background: the inner * layer fills the card with the normal card background, while the outer * layer defines the gradient border. The `background-size` and * `background-position` properties are animated to make the gradient * appear to rotate around the card. Removing the heavy box‑shadow * improves readability of the metrics displayed within the card. */ .live-simulation-card { border: 2px solid transparent; /* Two backgrounds: the inner one uses the card colour and fills the * padding box, while the outer one defines the colourful border. A * repeating gradient sequence is used so the colours cycle smoothly * along all sides of the border. Note that we include three * colours (primary, accent, primary) so the colours return to the * starting shade after a full cycle. */ background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(45deg, var(--primary-color), var(--accent-color), var(--primary-color)) border-box; /* Expand the background beyond the default size so we have space to * animate it across the border. Setting both dimensions to 200% * allows the gradient to slide smoothly from one corner to the * opposite corner. */ background-size: 200% 200%; animation: none; } /* Animation to smoothly slide the gradient across the border. The * positions cycle from the starting point to the opposite side and * back, creating the impression of a rotating border. The duration * should be long enough to avoid distraction while still conveying * dynamism. */ @keyframes spin-border { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* * Tweak the appearance of the Live Simulation card. We enlarge all * text within the card to improve readability and emphasise the * dynamic metrics. In addition, we remove the card's drop shadow * and background blur so the animated border remains the only * decorative effect. Without the glow, the content stands out * clearly against the page background. These rules only affect * elements inside the `.live-simulation-card` container. */ .live-simulation-card { /* Remove box shadow and backdrop blur to eliminate the glow */ box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Base font size increase for all text in the live card */ .live-simulation-card { font-size: 1rem; } /* Increase sizes of labelled text elements */ .live-simulation-card h3 { font-size: 1.25rem !important; } .live-simulation-card h4 { font-size: 1.125rem !important; } .live-simulation-card .results-box p { font-size: 0.9rem !important; } .live-simulation-card .results-box .main-value { font-size: 1.2rem !important; } .live-simulation-card .results-box .label { font-size: 0.85rem; } .live-simulation-card .text-xs { font-size: 0.875rem !important; } .live-simulation-card .text-sm { font-size: 1rem !important; } .live-simulation-card .text-base { font-size: 1.125rem !important; } .live-simulation-card .text-md { font-size: 1.25rem !important; } .live-simulation-card .text-lg { font-size: 1.375rem !important; } /* Add subtle hover effects to every results box within the live * simulation. The background colour lightens and the card scales * slightly on hover, providing tactile feedback when users * inspect different metrics. Transitions smooth out the change. */ .live-simulation-card .results-box { transition: background-color 0.3s ease, transform 0.2s ease; } .live-simulation-card .results-box:hover { /* Lighten the background colour using a mix of the accent colour */ background-color: color-mix(in srgb, var(--accent-color) 25%, transparent); transform: translateY(-2px); } /* Further enlarge the details list (PLO count, machines per PLO, machine income, * package name, package price, batch) displayed below the package image. The * default 11px text is increased to improve readability. Bold values * are scaled slightly larger than their labels. */ .live-simulation-card .flex.flex-col.gap-0\.5 div { font-size: 1rem !important; } .live-simulation-card .flex.flex-col.gap-0\.5 div b { font-size: 1.05rem !important; } /* Apply similar typography scaling to saved simulation cards. By targeting cards within * the results container, we ensure that saved simulations adopt the same sizes as * the live simulation card without adding a special class. Headings and labels * are enlarged for better readability from a distance. */ #resultsContainer .card h3 { font-size: 1.25rem !important; } #resultsContainer .card h4 { font-size: 1.125rem !important; } #resultsContainer .card .results-box p { font-size: 0.9rem !important; } #resultsContainer .card .results-box .main-value { font-size: 1.2rem !important; } #resultsContainer .card .results-box .label { font-size: 0.85rem; } #resultsContainer .card .text-xs { font-size: 0.875rem !important; } #resultsContainer .card .text-sm { font-size: 1rem !important; } #resultsContainer .card .text-base { font-size: 1.125rem !important; } #resultsContainer .card .text-md { font-size: 1.25rem !important; } #resultsContainer .card .text-lg { font-size: 1.375rem !important; } #resultsContainer .card .flex.flex-col.gap-0\.5 div { font-size: 1rem !important; } #resultsContainer .card .flex.flex-col.gap-0\.5 div b { font-size: 1.05rem !important; } .info-tooltip-container { position: relative; display: inline-block; vertical-align: middle; z-index: 999998; } .info-icon { cursor: pointer; color: var(--accent-color); opacity: 0.6; } .info-tooltip { /* Tooltip default styles */ visibility: hidden; /* hide tooltips by default; they are shown on hover by JS */ display: none; background-color: #1e293b; /* Solid background for readability */ color: #fff; text-align: left; border-radius: 10px; padding: 10px; position: absolute; /* Increase z-index significantly so tooltips always appear above other elements. Use an extremely high value to ensure they overlay even over fixed elements like the Income Goal Planner or chat widgets. */ z-index: 999999; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s, visibility 0.3s, display 0.3s; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 0.9rem; font-weight: 400; line-height: 1.4; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3); width: 220px; max-width: 90vw; } .info-tooltip-container:hover { position: relative; z-index: 999999; } .tooltip-align-right .info-tooltip { left: auto; right: 0; transform: translateX(0); } .form-modal-input { background: rgba(255,255,255,0.1); border: 1px solid var(--border-color-dark); color: var(--text-color-dark); } .form-modal-input::placeholder { color: var(--text-color-dark); opacity: 0.5; } .form-modal-input:focus { background: rgba(255,255,255,0.2); border-color: var(--accent-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); outline: none; } .modal { transition: opacity 0.3s ease; } #ploModal #modal-content { background: rgba(10, 14, 26, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-left: 1px solid var(--border-color-dark); } html.modal-is-open { overflow: hidden; } .light-mode #toggle-indicator { transform: translateX(0); } .dark-mode #toggle-indicator { transform: translateX(1.5rem); } [dir="rtl"].light-mode #toggle-indicator { transform: translateX(0); } [dir="rtl"].dark-mode #toggle-indicator { transform: translateX(-1.5rem); } .lang-btn .fi { font-size: 1.5rem; border-radius: 3px; } #goalPlannerResultsContainer .stat-card { padding: 0.75rem; } #goalPlannerResultsContainer .stat-card h4 { font-size: 1rem; font-weight: 600; } #goalPlannerResultsContainer .stat-card p { font-size: 0.875rem; } #goalPlannerResultsContainer .stat-card .font-bold.text-xl { font-size: 1.125rem; } .results-carousel .results-box .font-bold { font-size: 1.1rem; } .results-carousel .results-box .text-sm { font-size: 0.8rem; } .results-carousel .results-box .text-xs { font-size: 0.7rem; } .results-carousel h4 { font-size: 1rem; margin-bottom: 0.25rem; } .hide-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ overflow-x: auto; /* Enable horizontal scrolling */ flex-wrap: nowrap; /* Keep flags on a single line */ } .hide-scrollbar::-webkit-scrollbar { display: none; /* Safari and Chrome */ } /* Custom styling for the Shepherd tour popups */ .shepherd-theme-custom .shepherd-modal-overlay-container .shepherd-footer, .shepherd-theme-custom .shepherd-element { background-color: var(--card-bg-dark); border: 1px solid var(--border-color-dark); backdrop-filter: blur(12px); border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); font-family: 'DM Sans', system-ui, sans-serif; color: var(--text-color-dark); transition: all 0.3s ease; } .shepherd-theme-custom .shepherd-header { background: transparent; padding: 1.5rem 1.5rem 0.5rem; border-bottom: none; } .shepherd-theme-custom .shepherd-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 800; font-size: 1.25rem; color: #0d47a1; text-shadow: none; } .shepherd-theme-custom .shepherd-text { padding: 0 1.5rem; font-size: 0.9rem; line-height: 1.6; color: #1a202c; opacity: 0.9; } .shepherd-theme-custom .shepherd-footer { padding: 1rem 1.5rem 1.5rem; border-top: none; justify-content: flex-end; } .shepherd-theme-custom .shepherd-button { text-transform: uppercase; font-weight: 700; border-radius: 9999px; padding: 0.75rem 1.5rem; border: 1px solid transparent; transition: all 0.3s ease; cursor: pointer; } .shepherd-theme-custom .shepherd-button.shepherd-button-primary { background-color: var(--primary-color-dark); color: white; } .shepherd-theme-custom .shepherd-button.shepherd-button-primary:hover { background-color: color-mix(in srgb, var(--primary-color-dark) 85%, black); box-shadow: 0 0 15px var(--primary-glow-dark); transform: translateY(-2px); } .shepherd-theme-custom .shepherd-button:not(.shepherd-button-primary) { background-color: transparent; color: #1a202c; border: 1px solid var(--border-color-dark); } .shepherd-theme-custom .shepherd-button:not(.shepherd-button-primary):hover { border-color: var(--accent-color-dark); color: var(--accent-color-dark); transform: translateY(-2px); } .shepherd-theme-custom .shepherd-button i { margin-right: 8px; font-size: 1.1em; } .shepherd-theme-custom .shepherd-text .custom-icon { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--primary-color-dark); animation: floating-icon 3s infinite ease-in-out; text-shadow: 0 0 15px var(--primary-glow-dark); display: block; text-align: center; } @keyframes floating-icon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .shepherd-theme-custom .shepherd-cancel-icon { color: #1a202c; opacity: 0.6; transition: color 0.3s ease; padding: 1rem; font-size: 1.5rem; } .shepherd-theme-custom .shepherd-cancel-icon:hover { opacity: 1; color: #e53e3e; } .package-category-header { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); margin-top: 1.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color); } .package-category-k { /* Remove the dual-colour gradient border for the K package container and instead use a simple gold border with the standard card background. Preserve the existing border radius and padding. */ border: 1px solid #FFD700; background: var(--card-bg); border-radius: 14px; padding: 1rem; margin-top: 1rem; } .star-rating { color: #facc15; } /* --- NEW K PACKAGES LAYOUT STYLES --- */ /* Mobile-first default: A custom 1-2-2 layout */ #edsPackageButtonsK { display: grid; grid-template-columns: repeat(2, 1fr); /* Establish a 2-column grid for mobile */ gap: 0.5rem; } /* Make the first button (1M) span the full width on mobile */ #edsPackageButtonsK .interactive-btn:nth-child(1) { grid-column: span 2; } /* Desktop layout (768px and wider): Apply the complex 6-column grid */ @media (min-width: 768px) { #edsPackageButtonsK { /* Use a simple two‑column layout on larger screens */ grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } /* Ensure the first package spans two columns and others each occupy one column */ #edsPackageButtonsK .interactive-btn:nth-child(1) { grid-column: span 2; } #edsPackageButtonsK .interactive-btn:nth-child(2), #edsPackageButtonsK .interactive-btn:nth-child(3), #edsPackageButtonsK .interactive-btn:nth-child(4), #edsPackageButtonsK .interactive-btn:nth-child(5) { grid-column: span 1; } } /* Optional: Add a special border to the top 2 packages to make them pop */ #edsPackageButtonsK .top-k-package.active { border: 2px solid var(--accent-color); box-shadow: 0 0 20px var(--primary-glow); } /* --- NEW PACKAGE BUTTON STYLES --- */ /* Resets the main button for the new design */ #edsPackageButtons .interactive-btn { position: relative; padding: 0; /* Remove padding from the button itself */ justify-content: flex-start; align-items: stretch; } /* Styles the new info bar at the top of the button */ .package-info-bar { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: rgba(0, 0, 0, 0.25); /* A subtle, dark overlay */ padding: 5px 8px; border-top-left-radius: 10px; /* Match button's corner radius */ border-top-right-radius: 10px; z-index: 2; } /* Styles the text inside the info bar */ .package-info-bar > span { font-size: 0.8rem !important; font-weight: 700; } .package-info-bar .multiplier-info { color: var(--accent-color); /* Highlight the multiplier */ } .package-info-bar .eds-info { color: #e2e8f0; /* Softer white for the EDS count */ } /* Wrapper for the button's main content (name, price, stars) */ .package-content-wrapper { /* Adds padding to push the content below the info bar */ padding: 2.2rem 0.5rem 0.75rem 0.5rem; width: 100%; text-align: center; } .sticky-bubble { position: fixed; z-index: 100; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 4px 15px rgba(0,0,0,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; gap: 8px; transition: transform 0.3s ease, opacity 0.3s ease; } .sticky-bubble:hover { transform: scale(1.05); } .sticky-bubble .logo { width: 20px; height: 20px; } .egety-price-bubble { bottom: 20px; left: 20px; } .batch-bubble { bottom: 80px; left: 20px; } .white-paper-bubble { bottom: 140px; left: 20px; } /* NEW POSITION */ [dir="rtl"] .egety-price-bubble { left: auto; right: 20px; } [dir="rtl"] .batch-bubble { left: auto; right: 20px; } [dir="rtl"] .white-paper-bubble { left: auto; right: 20px; } /* NEW RTL POSITION */ .ecosystem-video-card { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .ecosystem-video-card { grid-template-columns: 1fr 1fr; } } .live-simulation-card .package-multiplier, .saved-simulation-card .package-multiplier { display:none!important; } .sticky-bubble { position: fixed; z-index: 100; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding-top: 22px; padding-bottom: 22px; padding-left: 22px; padding-right: 22px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 4px 15px rgba(0,0,0,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; gap: 8px; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; perspective: 1000px; min-width: 230px; min-height: 44px; white-space: nowrap; } /* ADD THIS: Defines the hidden state for the bubbles */ .sticky-bubble.is-hidden { opacity: 0; transform: translateY(150%); /* Moves the bubble down and out of view */ pointer-events: none; /* Prevents interaction when hidden */ } /* Hide spinner arrows on number inputs across browsers. Even though we primarily use type="text" for the currency and budget fields, other numerical inputs (e.g. sliders' companion inputs) still render increment/decrement controls by default in some browsers. The following rules remove those controls for a clean appearance. */ input[type="number"], input.number-input { -moz-appearance: textfield; } /* * When the page is in light mode the partner logos section ("Backed By The Best") * needs a dark background so that white or light-coloured logos remain visible. * Assigning a dark background, dark border and dark‑mode text colour ensures * adequate contrast. The id `partnersCard` is attached to this section in the * markup so that this rule targets only the partner logos card. */ .light-mode #partnersCard { background-color: var(--bg-color-dark); border-color: var(--border-color-dark); color: var(--text-color-dark); } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button, input.number-input::-webkit-inner-spin-button, input.number-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* * Custom styling for the floating WhatsApp icon. Unlike the other sticky * bubbles, this element is purely an icon. It overrides the base * .sticky-bubble styling to remove padding and minimum width so it * displays as a circular button. When hidden via the is-hidden class * (toggled by the handleBubbleVisibility() function), the icon fades * and slides out of view just like the other bubbles. */ .whatsapp-icon { /* The WhatsApp button uses a fixed position like the other sticky bubbles, but sets explicit offsets so it appears in the bottom‑right corner of the viewport. A circular shape with a green background and larger font size makes the icon prominent. */ position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; min-width: 60px; min-height: 60px; padding: 0; gap: 0; border-radius: 50%; border: none; background: #25D366; color: #ffffff; display: flex; justify-content: center; align-items: center; font-size: 2rem; z-index: 101; /* ensure the icon floats above other bubbles */ transition: transform 0.3s ease, opacity 0.3s ease; } /* Adjust position in right‑to‑left layouts */ [dir="rtl"] .whatsapp-icon { right: auto; left: 20px; } .whatsapp-icon i { margin: 0; pointer-events: none; } /* When hidden, the WhatsApp icon fades out and slides down just like the other bubbles */ .whatsapp-icon.is-hidden { opacity: 0; transform: translateY(150%); pointer-events: none; } /* -------------------------------------------------------------------------------- Custom styles for the collapsible live price dot and the expanded live data bubble. The livePriceDot is a small circular indicator that appears in place of the individual sticky bubbles after the user collapses them. It is positioned in the same bottom‑left corner as the other bubbles but reduced in size so it doesn’t obstruct any page content. The bigLiveDataBubble expands to show a scrollable list of all live data lines (white paper entries, supply figures and price conversions) when the user double clicks either the price bubble or this dot. These styles ensure both elements integrate seamlessly with the existing sticky bubble design while providing distinct behavior. */ .live-price-dot { bottom: 20px; left: 20px; /* Increase the dot size slightly to make it easier to click on small screens */ width: 20px; height: 20px; min-width: 20px; min-height: 20px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--accent-color); padding: 0; gap: 0; display: flex; align-items: center; justify-content: center; z-index: 101; /* above other bubbles so it remains clickable */ } .big-live-bubble { bottom: 20px; left: 20px; flex-direction: column; white-space: normal; padding: 16px; max-width: 280px; max-height: 60vh; overflow-y: auto; } .big-live-bubble > div { margin-bottom: 6px; } /* When the dot is hidden we still rely on the global .sticky-bubble.is-hidden to animate it off screen, but adding pointer-events: none prevents any accidental clicks while it is animating or invisible. */ .live-price-dot.is-hidden { pointer-events: none; } /* Hide the dot and big bubble by default. They will be toggled to display via JavaScript when the user collapses or expands the live price bubbles. */ .live-price-dot, .big-live-bubble { display: none; } /* Styles for the WhatsApp contact popup */ #whatsappPopup { position: fixed; bottom: 90px; right: 20px; width: 320px; max-width: calc(100vw - 40px); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 102; display: none; } #whatsappPopup h4 { margin-bottom: 8px; font-weight: 600; color: var(--primary-color); } #whatsappPopup textarea { width: 100%; height: 80px; border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; resize: vertical; background: var(--bg-color); color: var(--text-color); } #whatsappPopup button.send-btn { margin-top: 10px; width: 100%; padding: 10px; border-radius: 10px; background: #25D366; color: #ffffff; font-weight: 600; text-align: center; cursor: pointer; } #whatsappPopup .close-btn { position: absolute; top: 8px; right: 12px; font-size: 1.2rem; cursor: pointer; color: var(--text-color); } /* Ensure installment tooltips always appear above surrounding sections */ #installmentSection { overflow: visible !important; position: relative; z-index: 5000; } #installmentSection .info-tooltip-container { z-index: 2147483646 !important; } #installmentSection .info-tooltip { z-index: 2147483647 !important; } .bubble-flipper { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .sticky-bubble.is-flipped .bubble-flipper { transform: rotateX(180deg); } .bubble-front, .bubble-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; } .bubble-back { transform: rotateX(180deg); } /* ===== COMPACT LAYOUT STYLES ===== */ /* These styles override default Tailwind classes and other styles to create a more compact UI. */ /* Reduce vertical space between title, stage selector, and package list */ .simulator-card > h2 + div, .simulator-card > div + div#edsPackageButtons { margin-top: 0.5rem; } #edsPackageButtons { padding-top: 0.25rem; } /* Make package category headers smaller and tighter */ .package-category-header { font-size: 0.9rem; margin-top: 0.75rem; margin-bottom: 0.25rem; padding-bottom: 0.25rem; } /* Reduce padding and margin on the special 'K' package box */ .package-category-k { padding: 0.5rem; margin-top: 0.25rem; } /* Reduce the gap between all package buttons */ #edsPackageButtonsK, #edsPackageButtonsA, #edsPackageButtonsB, #edsPackageButtonsC { gap: 0.35rem; /* Reduced gap */ } /* Further reduce the height of the K package buttons */ #edsPackageButtonsK .interactive-btn:nth-child(1), #edsPackageButtonsK .interactive-btn:nth-child(2) { min-height: 65px; } #edsPackageButtonsK .interactive-btn:nth-child(3), #edsPackageButtonsK .interactive-btn:nth-child(4), #edsPackageButtonsK .interactive-btn:nth-child(5) { min-height: 60px; } /* Set a smaller, consistent height for A, B, and C package buttons */ #edsPackageButtonsA .interactive-btn, #edsPackageButtonsB .interactive-btn, #edsPackageButtonsC .interactive-btn { min-height: 50px; } /* Reduce the internal padding of ALL package buttons for a much tighter feel */ .package-content-wrapper { padding: 1.6rem 0.25rem 0.4rem 0.25rem; /* Key change for internal space */ } /* 1. General Page & Section Spacing */ main.space-y-6 > * + * { margin-top: 1rem; /* Reduces space between all main sections */ } .card { padding: 1rem 1.5rem; /* Reduced base padding for all cards */ } @media (min-width: 768px) { .card { padding: 1.25rem 1.5rem; /* Slightly more padding on larger screens */ } } .section-title { font-size: 1.5rem; /* Reduced size for main section titles */ margin-bottom: 0.5rem; } @media (min-width: 1024px) { .section-title { font-size: 1.75rem; } } .card > .space-y-6 > * + * { margin-top: 1rem; /* Reduces vertical space inside cards */ } .card .gap-6 { gap: 1rem; } .card .gap-8 { gap: 1.25rem; } /* 2. Simulator Controls */ .simulator-card { padding: 1rem; } .slider-group { margin-bottom: 0.5rem; } .slider-group label { font-size: 0.9rem; margin-bottom: 0.1rem; } #purchaseStageButtons { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; } #purchaseStageButtons button { height: 2.75rem; font-size: 0.7rem; padding: 0.25rem; } #edsPackageButtons .interactive-btn { min-height: 55px; /* Compact package buttons */ padding: 0.25rem; } #edsPackageButtons .font-bold.text-sm { font-size: 0.75rem; } /* 3. Tables */ .styled-table { font-size: 0.8rem; } .styled-table th, .styled-table td { padding: 6px 8px; } /* 4. Results & Projections */ #resultsContainer.results-carousel { gap: 1rem; } #resultsContainer .card { padding: 0.75rem; } #resultsContainer .card > div { row-gap: 0.5rem; } #resultsContainer .results-box { padding: 0.4rem; } #resultsContainer h4 { font-size: 0.9rem; margin-bottom: 0.25rem; } #resultsContainer .font-bold.text-xl { font-size: 1rem; } #resultsContainer .font-bold.text-lg { font-size: 0.95rem; } /* 5. Goal Planner */ #goalPlannerSection { /* Padding styles for the goal planner card */ padding: 1rem 1.25rem; /* Position the goal planner card after the earnings projection card by using the CSS flexbox order property. The parent container uses flex-direction: column, so a higher order value pushes this section below its siblings (results and projection cards). */ order: 3; } #goalPlannerSection .gap-x-6 { column-gap: 1rem; } #goalPlannerResultsContainer { margin-top: 0.5rem; } /* 6. Modals (Compact) */ #modal-content-details { padding: 1rem 1.5rem; /* Base padding */ max-width: 40rem; /* A bit wider to better fit the side-by-side layout */ max-height: 90vh; overflow-y: auto; } #modal-content-details h3 { font-size: 1.25rem; } #modal-content-details h4 { font-size: 1.0rem; margin-bottom: 0.25rem; /* Reduced space below titles */ } /* Controls the size of the pie chart's container */ #modal-content-details .pie-chart-container { height: 9rem; /* 144px */ width: 9rem; /* 144px */ } /* Targets the right column for compact spacing */ #modal-content-details .calculation-column { display: flex; flex-direction: column; gap: 0.25rem; /* This creates tight, consistent spacing */ } /* Styles each data box in the right column */ #modal-content-details .calculation-item { padding: 0.5rem; /* Reduced padding inside the boxes */ } /* Reduces the font size of the numbers */ #modal-content-details .calculation-item p.font-bold { font-size: 1.1rem; } /* 7. FAQ Section */ #faqTabs { top: 6rem; } /* Adjust sticky position */ .faq-tab { padding: 0.75rem; font-size: 1rem; text-decoration: underline; } /* Highlight the active FAQ tab with a bottom border so users know which category is selected */ .faq-tab.active { border-bottom: 2px solid currentColor; } .faq-content { margin-top: 0 !important; } details > summary { padding: 0.75rem 1rem; font-size: 1rem; } details > p { padding: 0 1rem 0.75rem 1rem; font-size: 0.9rem; } /* ===== NEW STYLES FOR ENLARGED EDS RESULTS ===== */ .eds-results-enlarged .results-box { display: flex; flex-direction: column; justify-content: center; text-align: center; } .eds-results-enlarged .label { /* Make the labels in the EDS results cards larger for improved visibility */ font-size: 1rem !important; opacity: 0.7; line-height: 1.2; } /* Increase the font size of the values displayed in the EDS results cards. Only the numeric values are enlarged – labels remain unchanged. This improves long‑distance readability for presentation scenarios. */ .eds-results-enlarged .main-value { /* Make the numeric values in the EDS results cards significantly larger for distance visibility */ font-size: 2rem !important; font-weight: 700; color: var(--primary-color); line-height: 1.3; } /* On smaller screens, make the main value a bit smaller */ @media (max-width: 767px) { .eds-results-enlarged .main-value { /* Increase the size of numeric values on small screens as well */ font-size: 1.4rem !important; } } /* Ensure the first K package (1M) spans two columns when packages are laid out in a two‑column grid. This makes the 1M K package occupy the entire first row, while the remaining K packages appear in pairs on subsequent rows. Apply this rule at all viewport sizes for consistent layout. */ #edsPackageButtonsK > *:first-child { grid-column: span 2 / span 2; } /* --- Installment Section Styles --- */ .installment-suggestion-card { border: 2px solid var(--border-color); background-color: var(--card-bg); border-radius: 14px; /* 20px */ transition: all 0.3s ease; display: flex; flex-direction: column; /* Previously used overflow: hidden to clip children to the rounded corners. However, this also clipped any tooltips inside, causing them to be cut off if they extended beyond the card. To ensure tooltips appear above surrounding sections, use overflow: visible instead. The card still retains its border radius but allows absolutely positioned tooltip elements to show outside its bounds. */ overflow: visible; } .installment-suggestion-card:hover { border-color: var(--accent-color); transform: translateY(-5px); box-shadow: 0 10px 25px -5px var(--primary-glow); } .installment-suggestion-card.highlighted { border: 2px solid transparent; background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(145deg, var(--primary-color), var(--accent-color)) border-box; box-shadow: 0 0 25px var(--primary-glow); } .installment-card-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); background-color: color-mix(in srgb, var(--primary-color) 8%, transparent); } .installment-card-body { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; gap: 0.6rem; } .data-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; padding: 0.1rem 0; border-bottom: 1px solid var(--border-color-dark); } .installment-suggestion-card .data-row:last-child { border-bottom: none; } .data-row .label { opacity: 0.7; display: flex; align-items: center; gap: 0.5rem; } .data-row .value { font-weight: 600; color: var(--text-color); text-align: right; } .data-row .value.accent { color: var(--primary-color); font-weight: 700; } .extra-cost { font-size: 0.8rem; color: #f87171; /* A reddish color for contrast */ font-weight: 700; } .dark-mode .extra-cost { color: #ef4444; } .installment-placeholder-text { grid-column: 1 / -1; /* Span all columns */ text-align: center; padding: 2rem; opacity: 0.6; font-style: italic; } /* --- Insurance Toggle Switch --- */ /* * Rework the sizing and positioning of the custom toggle switch knobs used in the * “EDS Installment & Insurance” card. Previously these switches used absolute * positioning from the right edge which left a gap on the side opposite the knob * and caused the off/on states to feel backwards. The knob also had a thick * border which counted towards its width, making it impossible to slide flush * against the container edges. To achieve a more typical toggle behavior where * the knob sits fully at the far left when off and at the far right when on, * the knob is now positioned from the left. The border has been removed to * ensure the knob can align perfectly against the ends of the track. When the * checkbox is checked the knob shifts right by 1rem (the remaining space in * the 2.5rem wide track). The track colour updates on the checked state via * the adjacent label. */ /* * Redefine the appearance of our custom toggle switches to present a more * elegant, futuristic control. The track is now wider with smooth * rounded corners and subtle glow. The knob slides from the far left * (off) to the far right (on) with a short easing animation. Colours * transition gracefully on activation. The knob itself receives a * secondary glow to lift it from the track. RTL layouts mirror the * behaviour by swapping left/right properties. */ .toggle-label { display: block; cursor: pointer; overflow: hidden; width: 2.75rem; height: 1.5rem; border-radius: 14px; background-color: var(--border-color-dark); transition: background-color 0.3s ease, box-shadow 0.3s ease; } .toggle-checkbox { position: absolute; top: 0.125rem; left: 0.125rem !important; /* Knob size with !important ensures it overrides inline dimensions set on * the checkbox elements. Without this the width/height from the * markup (e.g. w-6 h-6) can win via specificity. */ width: 1.25rem !important; height: 1.25rem !important; border-radius: 9999px; background-color: var(--background-color); box-shadow: 0 0 4px var(--primary-glow); transition: left 0.25s ease, background-color 0.25s ease; } /* When toggles are turned on the knob becomes the same color as the track which makes it impossible to distinguish the handle. Override the knob’s background on the checked state to provide a clear contrast. Leaving the position change intact preserves the sliding animation. */ .toggle-checkbox:checked { left: 1.375rem !important; /* Use a solid white knob when enabled so it stands out against the accent‑coloured track in both light and dark themes. */ background-color: #ffffff; } .toggle-checkbox:checked + .toggle-label { background-color: var(--accent-color); box-shadow: 0 0 8px var(--primary-glow); } /* Mirror knob movement in RTL contexts */ [dir="rtl"] .toggle-checkbox { right: 0.125rem !important; left: auto !important; } [dir="rtl"] .toggle-checkbox:checked { right: 1.375rem !important; left: auto !important; } /* ======= Custom modifications for package photo and EDS results ======= */ /* Enlarge the selected package thumbnail in the live simulation card and ensure the surrounding container scales accordingly. Increasing both the wrapper and inner image dimensions prevents the artwork from being clipped and gives it greater visual prominence. */ .live-simulation-card .relative { width: 5rem !important; height: 5rem !important; } .live-simulation-card .result-package-img, .live-simulation-card .fallback-img { width: 5rem !important; height: 5rem !important; } /* Adjust the package summary row within the live simulation card so that the PLO and package details begin immediately adjacent to the enlarged thumbnail. By explicitly defining the grid template columns we avoid excessive spacing caused by default responsive breakpoints. */ .live-simulation-card .p-1.grid { grid-template-columns: auto 1fr 1fr !important; gap: 0.5rem !important; } /* Mirror the same thumbnail and grid adjustments for saved simulations. Saved simulation cards receive the `saved-simulation-card` class in createResultSetElement(). Applying these styles ensures the package image and details align identically to the live simulation card. */ .saved-simulation-card .relative { width: 5rem !important; height: 5rem !important; } .saved-simulation-card .result-package-img, .saved-simulation-card .fallback-img { width: 5rem !important; height: 5rem !important; } .saved-simulation-card .p-1.grid { grid-template-columns: auto 1fr 1fr !important; gap: 0.5rem !important; } /* Increase the font sizes in the 'Your EDS Results' section to improve visibility from a distance. The label text uses a 1rem size (approx. 16px) and the main values are bumped up to 2rem for enhanced readability. A slightly smaller size is applied on mobile to maintain layout integrity. */ .eds-results-enlarged .label { font-size: 1rem !important; } .eds-results-enlarged .main-value { font-size: 2rem !important; font-weight: 700; } @media (max-width: 767px) { .eds-results-enlarged .main-value { font-size: 1.5rem !important; } .eds-results-enlarged .label { font-size: 0.875rem !important; } } /* =====================================================================*/ /* EGETY DESIGN SYSTEM: Unified tokens, fonts and component overrides */ /* These definitions override earlier values to provide consistent */ /* branding, readability and accessibility across the application. */ /* =====================================================================*/ /* --- Global colour tokens --- */ :root { --brand-primary: #0B3A4A; --brand-accent: #236B7F; --data-primary: #F0FAFF; --data-secondary: #BFDDEB; --text-muted: #8FB3C4; --bg-page: #061E28; --bg-card: #0B3A4A; --border-subtle: rgba(255, 255, 255, 0.06); /* Data font sizes */ --fs-data-xl: 1.6rem; --fs-data-lg: 1.3rem; --fs-data-md: 1.1rem; /* Label font sizes */ --fs-label-lg: 0.95rem; --fs-label-md: 0.85rem; --fs-label-sm: 0.75rem; } /* --- Semantic typography classes --- */ .data-primary { font-size: var(--fs-data-xl); font-weight: 800; color: var(--data-primary); letter-spacing: 0.02em; } .data-secondary { font-size: var(--fs-data-lg); font-weight: 700; color: var(--data-secondary); } .data-tertiary { font-size: var(--fs-data-md); font-weight: 600; color: var(--data-secondary); } .label { font-size: var(--fs-label-md); color: var(--text-muted); font-weight: 600; } /* Override existing .main-value and label usage to adopt tokens */ .main-value { font-size: var(--fs-data-xl) !important; font-weight: 800 !important; color: var(--data-primary) !important; letter-spacing: 0.02em; } .results-box .label, .eds-results-enlarged .label, .live-simulation-card .label { font-size: var(--fs-label-md) !important; color: var(--text-muted) !important; font-weight: 600 !important; } /* --- Results boxes & cards --- */ .results-box { background-color: var(--bg-card) !important; border-left: 4px solid var(--brand-accent) !important; padding: 0.5rem !important; border-radius: 10px; box-shadow: none !important; } .card { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .card:hover { box-shadow: none !important; border-color: var(--brand-accent) !important; } /* --- Live simulation card overrides --- */ .live-simulation-card { border: 2px solid var(--brand-accent) !important; background: var(--bg-card) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; } .live-simulation-card .results-box { border-left: 4px solid var(--brand-accent) !important; } .live-simulation-card .results-box:hover { background-color: var(--bg-card) !important; border-left-color: var(--brand-accent) !important; transform: none !important; } /* --- Interactive buttons --- */ .interactive-btn { background-color: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; color: var(--data-secondary) !important; box-shadow: none !important; } .interactive-btn:hover { border-color: var(--brand-accent) !important; color: var(--data-primary) !important; transform: translateY(-2px); } .interactive-btn.active { background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: #ffffff !important; box-shadow: none !important; transform: translateY(-2px); } .interactive-btn .btn-subtext { font-size: var(--fs-label-md) !important; } /* --- Styled table overrides --- */ .styled-table thead tr { background: var(--brand-primary) !important; color: #ffffff !important; } .styled-table tbody tr { background-color: var(--bg-card) !important; } .styled-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.03) !important; } .styled-table tbody tr:hover { background-color: var(--brand-accent) !important; color: #ffffff !important; } /* Highlight active rows and buttons */ .styled-table tbody tr.active { background: linear-gradient(to right, var(--primary-color), var(--accent-color)) !important; color: #ffffff !important; } .styled-table tbody tr.active td:first-child { color: #ffffff !important; } /* Highlight the selected batch button */ #purchaseStageButtons button.active { background: linear-gradient(to right, var(--primary-color), var(--accent-color)) !important; color: #ffffff !important; border-color: var(--accent-color) !important; } /* --- Form controls & sliders --- */ input[type="number"], select { background-color: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; color: var(--data-primary) !important; padding: 0.5rem !important; border-radius: 10px; } input[type="number"]:focus, select:focus { outline: none; border-color: var(--brand-accent) !important; box-shadow: none !important; } .slider-tick { background-color: var(--border-subtle) !important; } .slider-tick-label { font-size: var(--fs-label-sm) !important; color: var(--text-muted) !important; } /* Preset values overlay for the PLO top‑up slider. These clickable labels * appear directly on the slider bar, allowing users to quickly set * common percentages without scrolling. Each label is absolutely * positioned relative to the presets container based on its value. */ #ploTopUp-presets-container { position: relative; /* Overlay the preset labels above the slider. A negative margin pulls * the container upward so its children sit directly over the slider * track without creating extra vertical space. The height is kept * zero so the container itself does not push other elements. */ margin-top: -1.3rem; height: 0; pointer-events: none; /* allow clicks on child elements but not on the container */ } #ploTopUp-presets-container .preset-value { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.85rem; color: var(--data-primary) !important; cursor: pointer; white-space: nowrap; pointer-events: auto; /* enable pointer events on labels */ } /* --- Presentation mode --- */ .presentation-mode { --data-primary: #FFFFFF; --bg-card: #062A36; font-size: 1.15em; } /* ===== Enhanced EDS results styling ===== * Increase font sizes for the key metrics under 'Your EDS Results' in both * the live simulation and any saved simulations. We target the * combination of the results container (`#resultsContainer`) and the live card * to ensure the rules override more specific definitions in earlier styles. * Larger values improve readability on larger displays and from a distance. */ .live-simulation-card .eds-results-enlarged .results-box .label, #resultsContainer .eds-results-enlarged .results-box .label { font-size: 1.2rem !important; } .live-simulation-card .eds-results-enlarged .results-box .main-value, #resultsContainer .eds-results-enlarged .results-box .main-value { font-size: 2.4rem !important; font-weight: 700 !important; } @media (max-width: 767px) { .live-simulation-card .eds-results-enlarged .results-box .label, #resultsContainer .eds-results-enlarged .results-box .label { font-size: 1rem !important; } .live-simulation-card .eds-results-enlarged .results-box .main-value, #resultsContainer .eds-results-enlarged .results-box .main-value { font-size: 1.6rem !important; } } /* ===== Hover effects for results cells ===== * Add interactive feedback for each metric cell within the live simulation * and in saved simulations. The results box will slightly scale up and * its background colour will lighten on hover. Transition properties * ensure smooth animation. This highlights the number and text without * altering the surrounding layout. */ .live-simulation-card .results-box, #resultsContainer .results-box { /* Apply smooth transitions for transform, background, shadow and font size to enable an engaging 3D hover effect. */ transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease; transform-style: preserve-3d; /* Establish a stacking context so that z-index takes effect; default base layer */ position: relative; z-index: 0; } .live-simulation-card .results-box:hover, #resultsContainer .results-box:hover { /* On hover the cell lifts farther toward the viewer and scales up more noticeably. A larger box‑shadow enhances the 3D illusion while the accent colour brightens the background. Use !important on transform, background-color and box-shadow to override earlier reset rules. */ transform: perspective(600px) translateZ(40px) scale(1.12) !important; background-color: color-mix(in srgb, var(--brand-accent) 45%, transparent) !important; box-shadow: 0 20px 32px rgba(0, 0, 0, 0.35) !important; /* Raise the hovered card above neighbouring cells */ z-index: 10; } /* When hovering over results cells, enlarge the label and main value slightly to draw the eye. Use !important to override any inline or previous font-size definitions. */ .live-simulation-card .results-box:hover .label, #resultsContainer .results-box:hover .label { font-size: 1.25rem !important; } .live-simulation-card .results-box:hover .main-value, #resultsContainer .results-box:hover .main-value { font-size: 2.6rem !important; } /* Light mode overrides for simulation cards and general cards. Place these at the end of the stylesheet to ensure they override any earlier !important definitions. */ .light-mode .card:not(#partnersCard) { background: rgba(255, 255, 255, 0.97) !important; color: var(--text-color-light); } .light-mode .live-simulation-card, .light-mode .saved-simulation-card { background: rgba(255, 255, 255, 0.97) !important; border: 2px solid var(--brand-accent) !important; } .light-mode .live-simulation-card .results-box:hover, .light-mode .saved-simulation-card .results-box:hover { background-color: rgba(255, 255, 255, 0.9) !important; } /* * When using the Egety design system tokens in light mode the default * colours for key data (e.g. primary/secondary values and muted * labels) remain extremely light. On a white card surface these * pastels offer very little contrast, making the simulation * metrics difficult to read. Override the token values in * light mode to adopt darker hues that harmonise with the rest * of the site’s palette. The primary data colour uses the * brand’s primary colour, the secondary colour uses the accent, * and muted labels take on a medium slate tone. We also * strengthen the card border to a light black to delineate * elements on a white background. */ .light-mode { --data-primary: var(--primary-color-light); --data-secondary: var(--accent-color-light); /* Use a medium slate colour for muted labels in light mode */ --text-muted: #475569; /* Ensure cards remain clearly white in light mode */ --bg-card: rgba(255, 255, 255, 0.95); /* Darken subtle borders so they are visible on white backgrounds */ --border-subtle: rgba(0, 0, 0, 0.1); } /* Custom styles for the agent results card and table */ .agent-results-card .results-box { /* Increase padding and add subtle left border for each metric box */ padding: 0.75rem; border-left: 4px solid var(--accent-color); background-color: color-mix(in srgb, var(--accent-color) 8%, transparent); } .agent-results-card .results-box p { /* Increase the overall font size for both label and value to improve readability */ font-size: 1.4rem !important; } .agent-results-card .results-box .label { /* Ensure labels remain slightly smaller than the values */ font-size: 1.25rem !important; } .agent-results-card .results-box .main-value { /* Make the numeric values significantly larger for emphasis */ font-size: 1.8rem !important; } /* Layout for agent timeframe buttons: two columns with the flexible button spanning both columns */ #agentTimeframeButtons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; width: 100%; } #agentTimeframeButtons button { width: 100%; text-align: center; background-color: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-color); } /* Make the flexible timeframe button span across both columns. It should * appear as a hollow pill with a coloured stroke rather than a solid * gradient fill. When active, the flexible button’s border and text * colour intensify but the background remains transparent. Other * timeframe buttons still use the gradient fill when active. */ #agentTimeframeButtons button.flexible-btn { grid-column: span 2; /* Make the Flexible button appear as a hollow pill. Use !important to override generic button styles such as those from .interactive-btn. */ background-color: transparent !important; border: 2px solid var(--primary-color); color: var(--primary-color) !important; } #agentTimeframeButtons button.flexible-btn.active { /* When active, keep the Flexible button hollow but intensify the stroke and adjust text colour for readability. */ background-color: transparent !important; border-color: var(--accent-color) !important; /* Set the text to white so it contrasts against the accent‑coloured border */ color: white !important; } /* Active state for regular timeframe buttons */ #agentTimeframeButtons button.active:not(.flexible-btn) { background: linear-gradient(to right, var(--primary-color), var(--accent-color)); border-color: var(--accent-color); color: white; } .agent-results-card .agent-table { font-size: 0.95rem; } .agent-results-card .agent-table th, .agent-results-card .agent-table td { padding: 0.5rem 0.5rem; } .agent-results-card .agent-table-row { transition: transform 0.2s ease, box-shadow 0.2s ease; } .agent-results-card .agent-table-row:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); } /* Larger font sizes for result cells in agent mode. Each results box created in agent mode includes the `agent-metric` class; increase the font size of all paragraphs within these boxes. */ .agent-metric p { font-size: 1.4rem !important; } /* * Adjust agent results card metrics to match the live simulation design. When the * agent-results-card also carries the live-simulation-card class, we want to * neutralise the oversized font rules and remove the coloured left border so * that metrics look identical to those in the live card. These overrides * ensure padding, font sizes and hover effects mirror the live simulation. */ .agent-results-card.live-simulation-card .results-box { border-left: none; /* Use the same padding as the live simulation results boxes (p-1.5) */ padding: 0.375rem; background-color: color-mix(in srgb, var(--accent-color) 8%, transparent); } .agent-results-card.live-simulation-card .results-box p { font-size: 0.9rem !important; } .agent-results-card.live-simulation-card .results-box .label { font-size: 0.85rem; } .agent-results-card.live-simulation-card .results-box .main-value { font-size: 1.2rem !important; } .agent-results-card.live-simulation-card .results-box:hover { background-color: color-mix(in srgb, var(--accent-color) 25%, transparent); transform: translateY(-2px); } /* Prevent any residual oversized font rules from the generic agent metrics class */ .agent-results-card.live-simulation-card .agent-metric p { font-size: inherit !important; } /* ==================== Agent card metrics overrides ===================== * Match the default, pre-hover font sizes of the six Agent result cells * to the User mode result cells when expanded. Hover effects remain * controlled by the generic results-box hover rules below. */ .agent-results-card.live-simulation-card .results-box { /* Center the text inside each metric cell */ text-align: center; } .agent-results-card.live-simulation-card .results-box p { /* Match base text sizing used by user-mode result cards */ font-size: 0.9rem !important; } .agent-results-card.live-simulation-card .results-box .label { /* Match user-mode label size before hover */ font-size: 1.2rem !important; } .agent-results-card.live-simulation-card .results-box .main-value { /* Match user-mode main value size before hover */ font-size: 2.4rem !important; font-weight: 700 !important; } /* Make the agent users slider tick labels visible and legible. The default * slider tick labels are muted and small; override them for the agent * user slider so the milestone numbers (0, 200k, etc.) show clearly. */ #agent-users-slider-ticks-container .slider-tick-label { font-size: 0.85rem; color: var(--data-primary) !important; } /* Ensure sufficient height for the agent users tick container so that labels * and tick marks do not get clipped by surrounding layouts. Without * explicitly setting a height, the container can collapse when moved * into the agent control wrapper, causing the tick labels to be hidden. */ #agent-users-slider-ticks-container { /* Reduce height since labels are hidden in agent mode. Only the tick * marks remain, so a smaller height suffices and tightens up the * layout. */ height: 16px !important; } /* * Collapsible investor section styles. These rules allow the K/A/B/C * package categories in the EDS Investor panel to expand and collapse * smoothly. The category-content class defines a maximum height and * fade transition for the package buttons. When the collapsed class * is applied, the content is hidden by reducing its max-height to 0 * and fading its opacity. The eds-section-arrow class gives each * arrow a pointer cursor and prevents text selection. */ .eds-package-section .category-content { /* Collapse and expand the package lists instantly. Eliminate the lengthy fade and slide animations by setting the duration to a very small value. A 0.05s transition feels instantaneous to users while still animating when necessary. */ /* Use a zero-duration transition so the package lists open and close immediately. The user requested that the sections collapse without any noticeable delay, so we set both max-height and opacity transitions to 0 s. The easing is retained for consistency but has no effect at zero duration. */ transition: max-height 0s ease, opacity 0s ease; /* Allow content to overflow the container when expanded so that hovered or selected package cards can rise above the header without being clipped. Overflow is restricted again when collapsed (see below). */ overflow: visible; max-height: 2000px; opacity: 1; } .eds-package-section .category-content.collapsed { max-height: 0; opacity: 0; /* Restrict overflow when collapsed so content stays hidden */ overflow: hidden; /* Disable pointer events when collapsed so that the hidden package buttons cannot be interacted with while fading out. */ pointer-events: none; } .eds-section-arrow { cursor: pointer; user-select: none; } /* Investor section layout tweaks: visible strokes and consistent sizing */ .eds-package-section { border: 2px solid transparent; border-radius: 14px; padding: 0.5rem; transition: padding 0.3s ease, border 0.3s ease; } .eds-package-section[data-category="K"] { background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(145deg, #800020, #FFD700) border-box; } .eds-package-section[data-category="A"], .eds-package-section[data-category="B"], .eds-package-section[data-category="C"] { background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(145deg, var(--primary-color), var(--primary-color)) border-box; } .eds-package-section.section-collapsed { /* When collapsed, remove extra vertical padding so the header sits * snugly within the section and there is no wasted space. Use * display:flex so the header contents remain vertically centred. */ /* Maintain the same left/right padding as expanded sections while reducing only the vertical padding. This ensures the category titles align consistently with the card border whether collapsed or expanded. */ padding: 0.25rem 0.5rem !important; display: flex; align-items: center; /* Force a consistent height for the collapsed panel. A fixed * height ensures that all categories (K, A, B, C) align with the * tallest collapsed header (the K section, which contains two * lines of text). Increasing this value slightly above the * measured K collapsed height keeps the content from being * clipped on narrow screens. */ height: 4rem; min-height: 4rem; } .eds-package-section .category-header { margin-bottom: 0.5rem; /* Align the header contents vertically within their container. */ display: flex; align-items: center; } .eds-package-section.section-collapsed .category-header { /* Remove bottom margin when collapsed so there is no extra space * below the header. */ margin-bottom: 0; } /* Increase the font size of the package price labels across all packages within the investor simulator. By overriding the btn-subtext within .eds-package-section we ensure the larger size applies only to the package buttons and not to other interactive buttons elsewhere on the site. */ .eds-package-section .interactive-btn .btn-subtext { font-size: 1rem !important; } /* For packages in categories A, B and C, display the package price in white to improve contrast against the coloured backgrounds. */ .eds-package-section[data-category="A"] .interactive-btn .btn-subtext, .eds-package-section[data-category="B"] .interactive-btn .btn-subtext, .eds-package-section[data-category="C"] .interactive-btn .btn-subtext { color: #ffffff !important; } /* ------------------------------------------------------------------ */ /* Highlight animation for the hero call-to-action button The "Go to Simulation" button pulses gently to draw the user’s eye when the page loads. The animation scales the button slightly and adds a soft glow to the button’s border. It repeats indefinitely but uses a long duration to avoid being distracting. */ @keyframes pulseSimulationBtn { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.0); } 50% { transform: scale(1.05); box-shadow: 0 0 8px 3px var(--brand-accent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.0); } } #startSimulationBtn { animation: pulseSimulationBtn 2.5s ease-in-out infinite; } /* Deprecated: K package button colours were previously defined here. The updated styles are defined later in this stylesheet. */ /* Highlight K rows in packages table */ .k-package-row { /* For unselected K rows, use the same background as other package rows to maintain consistency with the overall table styling. Highlight the text in gold to denote the K category. */ color: #FFD700 !important; } .k-package-row.active { /* When selected, the K row is highlighted in burgundy with gold text to distinguish it. */ background: #800020 !important; color: #FFD700 !important; } /* Apply the same styling to each cell in K rows. Without targeting td elements directly, alternating row shading defined elsewhere in the table could override our colours. */ .k-package-row td { color: #FFD700 !important; } .k-package-row.active td { background: #800020 !important; color: #FFD700 !important; } /* * Stage toggle: legacy rule preserved for reference. Previously * stages beyond the 11th were hidden unless the container had * `.show-all`. This logic has since been superseded by the * Show Old/Hide Old toggle (using `.show-old` and the `.old-batch` * class). The rule is commented out to prevent unintended side * effects. See `.old-batch` and `.show-old` rules for current * behaviour. */ /* [REMOVED: deprecated nth-child stage hide rule - replaced by .old-batch] */ /* ------------------------------------------------------------------------- * Pure CSS toggle for old batches * * We use a hidden checkbox (#batchToggleCheckbox) and its associated * label (#toggleOldBatchVisibility) to control the visibility of * batches 1–3 and 12–18 without relying on JavaScript. When the * checkbox is unchecked, `.old-batch` buttons are hidden. When * checked, they are shown. The label text is defined via * `data-show-text` and `data-hide-text` attributes and displayed * using the `content` property. These attributes are filled in * at runtime with the translated strings for the current language. */ /* Hide old batches when the toggle is off */ #batchToggleCheckbox:not(:checked) ~ #purchaseStageButtons button.old-batch { display: none !important; } /* Show old batches when the toggle is on */ #batchToggleCheckbox:checked ~ #purchaseStageButtons button.old-batch { display: flex !important; } /* Default label text (show more) */ #toggleOldBatchVisibility::after { content: attr(data-show-text); } /* When the toggle is checked, display hide more text */ #batchToggleCheckbox:checked ~ div > #toggleOldBatchVisibility::after, #batchToggleCheckbox:checked ~ #toggleOldBatchVisibility::after { content: attr(data-hide-text); } /* Always display all stage buttons by default unless hidden by other rules. Override previous nth-child rules to ensure buttons beyond the 11th remain visible. */ #purchaseStageButtons button { display: flex !important; } /* * Important: the rule above causes all stage buttons to be displayed, even those * marked as `.old-batch`. To ensure old batches remain hidden when * `.show-old` is not present on the stage container, we re‑apply the hide * rule after the general display rule. By placing this rule after the * `#purchaseStageButtons button` definition and using `!important`, it * overrides the general display rule and properly hides old batches by * default. Without this override, batches 1–3 and 12–18 would remain * visible on initial load. */ #purchaseStageButtons:not(.show-old) button.old-batch { display: none !important; } /* * K package styling adjustments: * - Remove the red/gold gradient and use a single light border colour. * - Make unselected K package buttons very light so that only the active * selection appears burgundy. The border remains gold for all states. */ .eds-package-section[data-category="K"] { /* Remove the red/gold gradient and use a flat card background with a gold border to match the other categories. This ensures the K section blends seamlessly with the rest of the interface. */ border: 1px solid #FFD700 !important; } .eds-package-section[data-category="K"] .interactive-btn { /* Very light background for unselected K packages. Use an almost white tone with just a hint of warmth so the unselected states do not appear red at all. Only the selected state (active) is burgundy. */ background: #F7F2F2 !important; border: 1px solid #FFD700 !important; color: #800020 !important; } .eds-package-section[data-category="K"] .interactive-btn.active { /* When selected, the K button becomes burgundy with gold border and white text to match the founders palette. */ background: #800020 !important; border-color: #FFD700 !important; color: #FFFFFF !important; } .eds-package-section[data-category="K"] .interactive-btn:hover { /* Maintain a subtle brightness effect on hover */ filter: brightness(1.05); } /* * Reinforce K package colours at the button level. By scoping the * rules to the #edsPackageButtonsK container we ensure that all * K package buttons (including the special top packages) inherit * the desired neutral background when unselected and the burgundy * background when active. These rules use !important to trump * any remaining Tailwind or component styles. */ /* Style for K package buttons. Use the same neutral background as other package categories and highlight only with gold text and border. When active the button turns burgundy with a gold border. */ #edsPackageButtonsK .interactive-btn { /* Match the base interactive button background so unselected K packages blend seamlessly with other categories */ background: var(--bg-color) !important; border: 1px solid #FFD700 !important; color: #FFD700 !important; } #edsPackageButtonsK .interactive-btn.active { background: #800020 !important; border: 1px solid #FFD700 !important; color: #FFFFFF !important; } /* Prevent package category titles from wrapping onto multiple lines */ .package-category-header { white-space: nowrap; } /* * Ensure hovered or selected package buttons can rise above the * category header. Without a higher stacking context the buttons * appear underneath the header when they translate upwards on * hover/active. Assign a relative position so z-index takes effect. */ .eds-package-section .interactive-btn { position: relative; z-index: 0; } .eds-package-section .interactive-btn:hover, .eds-package-section .interactive-btn.active { z-index: 1; } /* Ensure the category header is positioned relative so that the arrow can be absolutely positioned. This allows us to place the collapse/expand arrow at the extreme right edge of the header, matching the user’s mockups. */ .eds-package-section .category-header { position: relative; /* Add extra right padding to provide room for the arrow icon which is absolutely positioned at the far right. Without this padding the arrow could overlap the category title or tooltip icons when the viewport is narrow. */ padding-right: 1.75rem; /* Align children to the start; the arrow is absolutely positioned so there is no need to distribute space between items. This prevents large gaps from appearing when using justify-between in the markup. */ justify-content: flex-start; } /* Position arrow indicators at the far right within the category header. Using absolute positioning here ensures the arrow aligns with the right border of the section rather than simply sitting at the end of the flex container. Reduce the right offset so the arrow sits flush with the edge of the header (as highlighted in the mock‑ups). Reset margin-left to avoid conflicting with previous auto margins. */ .eds-package-section .category-header .eds-section-arrow { position: absolute; /* Position the arrow flush against the right-hand side of the section header. Increasing the right offset from 0.25rem to 0.5rem pushes the indicator fully into the corner as shown in the mock‑up. */ /* Reduce the right offset to move the arrow closer to the edge of the category header. A 0.3 rem gap aligns the arrow with the design shown in the provided mock‑up (red circle), placing the indicator neatly near the right border without overflowing. */ /* Position the arrow flush against the right edge of the category header */ right: 0rem; top: 50%; transform: translateY(-50%); margin-left: 0; /* Prevent the arrow itself from intercepting click events so that clicks anywhere on the header (including the arrow) toggle the section. */ pointer-events: none; } /* ========================================================= PATCH 23-02-2026: Results layout toggle + strict arrows + mobile stacked ========================================================= */ /* ---- Results header controls (tablet/desktop only) ---- */ .results-layout-controls { display: none; } @media (min-width: 768px) { .results-layout-controls { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.75rem; } } /* Small icon buttons */ .results-layout-btn { width: 2.25rem; height: 2.25rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .results-layout-btn:hover { transform: translateY(-1px); border-color: var(--accent-color); color: var(--accent-color); } .results-layout-btn.active { border-color: var(--accent-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent); } /* ---- Side-by-side results layout (>=768px only) ---- */ @media (min-width: 768px) { #resultsContainer.results-side { display: block !important; /* we will inject wrappers */ } /* Wrapper contains BOTH columns. In UNLOCKED mode the wrapper is the horizontal scroller, so live + saved move together. In LOCKED mode, wrapper is not scrollable and only the saved column scrolls. */ #resultsContainer .results-side-wrapper { display: flex; gap: 1rem; align-items: stretch; width: 100%; overflow-x: auto; /* UNLOCKED: scroll both columns together */ padding-bottom: 0.5rem; } #resultsContainer .results-live-col { flex: 0 0 420px; min-width: 360px; } #resultsContainer .results-saved-col { /* UNLOCKED: do NOT shrink saved column; let it take the width of all saved cards so the wrapper becomes horizontally scrollable (live + saved move together). */ flex: 0 0 auto; width: max-content; overflow: visible; } /* Saved cards row (no scrolling here in UNLOCKED mode) */ #resultsContainer .results-saved-scroll { /* UNLOCKED: make the saved row as wide as its cards so the wrapper can scroll */ width: max-content; display: flex; gap: 1rem; overflow: visible; padding-bottom: 0; } #resultsContainer .results-saved-scroll > .card { flex: 0 0 420px; min-width: 360px; } /* LOCKED: only saved simulations scroll */ #resultsContainer.results-side.results-lock .results-side-wrapper { overflow-x: hidden; } #resultsContainer.results-side.results-lock .results-saved-col { /* LOCKED: saved column takes remaining width and becomes the scroll viewport */ flex: 1 1 auto; width: auto; min-width: 0; overflow: hidden; } #resultsContainer.results-side.results-lock .results-saved-scroll { overflow-x: auto; width: 100%; padding-bottom: 0.5rem; } #resultsContainer.results-side.results-lock .results-live-col { position: sticky; top: 0; align-self: flex-start; z-index: 2; } /* In side-by-side view, keep the package image ON TOP (not next to the details) */ #resultsContainer.results-side .live-simulation-card .p-1.grid, #resultsContainer.results-side .saved-simulation-card .p-1.grid { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; grid-template-columns: 1fr !important; } #resultsContainer.results-side .live-simulation-card .p-1.grid > .relative, #resultsContainer.results-side .saved-simulation-card .p-1.grid > .relative { width: 100% !important; height: auto !important; display: flex !important; justify-content: center !important; } #resultsContainer.results-side .live-simulation-card .p-1.grid > .relative img, #resultsContainer.results-side .saved-simulation-card .p-1.grid > .relative img { width: 6rem !important; height: 6rem !important; } /* In side-by-side view, show EDS results as 2 columns only */ #resultsContainer.results-side .eds-results-enlarged .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ---- Mobile results: stacked only, no horizontal carousel ---- */ @media (max-width: 767px) { #resultsContainer.results-carousel { display: flex !important; flex-direction: column !important; gap: 1rem !important; overflow-x: visible !important; scroll-snap-type: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } #resultsContainer.results-carousel > * { scroll-snap-align: unset !important; } /* Force package summary row to stack with image on top */ .live-simulation-card .p-1.grid, .saved-simulation-card .p-1.grid { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; grid-template-columns: 1fr !important; } .live-simulation-card .p-1.grid > .relative, .saved-simulation-card .p-1.grid > .relative { width: 100% !important; height: auto !important; display: flex !important; justify-content: center !important; } .live-simulation-card .p-1.grid > .relative img, .saved-simulation-card .p-1.grid > .relative img { width: 6rem !important; height: 6rem !important; } /* Mobile: show 'Your EDS Results' as 2 columns (not 3) */ .live-simulation-card .eds-results-enlarged .grid, .saved-simulation-card .eds-results-enlarged .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ===== Package tier dual selector + compact user metrics fixes ===== */ #packageStageButtonsSmall { position: relative; z-index: 30; overflow: visible; display: flex; align-items: center; flex-wrap: nowrap; gap: 0.18rem; width: 100%; overflow-x: auto; scrollbar-width: none; } #packageStageButtonsSmall::-webkit-scrollbar { display: none; } #packageStageButtonsSmall .package-stage-row { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 0.14rem; flex: 0 0 auto; } #packageStageButtonsSmall .package-stage-row-label { min-width: auto; font-size: 0.64rem; font-weight: 700; color: rgba(255,255,255,0.82); margin-right: 0.05rem; white-space: nowrap; } #packageStageButtonsSmall .stage-btn-group { display: inline-flex; flex-wrap: nowrap; gap: 0.14rem; } #packageStageButtonsSmall .interactive-btn { position: relative; z-index: 31; min-width: 1.45rem; width: 1.45rem; height: 1.45rem; padding: 0; border-radius: 0.38rem; font-size: 0.58rem !important; line-height: 1; flex: 0 0 auto; } #packageStageButtonsSmall .release-btn { min-width: 1.45rem; width: 1.45rem; } #packageStageButtonsSmall .interactive-btn, #packageStageButtonsSmall .release-btn { transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease; } #packageStageButtonsSmall .interactive-btn:hover, #packageStageButtonsSmall .interactive-btn:focus-visible, #packageStageButtonsSmall .release-btn:hover, #packageStageButtonsSmall .release-btn:focus-visible { z-index: 31; transform: none !important; box-shadow: none !important; } #packageStageButtonsSmall:hover .interactive-btn:not(:hover), #packageStageButtonsSmall:hover .release-btn:not(:hover) { transform: none !important; box-shadow: none !important; } .package-tier-selector-wrap { position: relative; z-index: 5000; overflow: visible !important; } .card:has(#packageStageButtonsSmall) { position: relative; z-index: 5000; overflow: visible !important; } .card:has(#packageStageButtonsSmall) h2, .card:has(#packageStageButtonsSmall) .title-text { position: relative; z-index: 1; } .card:has(#packageStageButtonsSmall) .overflow-x-auto, .card:has(#packageStageButtonsSmall) table { position: relative; z-index: 1; } .package-tier-selector-wrap, .package-tier-selector-wrap *, .package-tier-selector-wrap + .overflow-x-auto, .package-tier-selector-wrap + .overflow-x-auto .styled-table { isolation: auto; } #packageStageButtonsSmall .interactive-btn.active { box-shadow: 0 0 0 1px rgba(77, 208, 255, 0.45), 0 0 10px rgba(46, 195, 255, 0.18); } @media (max-width: 767px) { #packageStageButtonsSmall { gap: 0.12rem; } #packageStageButtonsSmall .package-stage-row-label { font-size: 0.62rem; } #packageStageButtonsSmall .interactive-btn { min-width: 1.32rem; width: 1.32rem; height: 1.32rem; font-size: 0.54rem !important; } } /* In compact side-by-side user view, keep the 6 result numbers at normal readable size */ #resultsContainer.results-side .live-simulation-card .eds-results-enlarged .results-box .label, #resultsContainer.results-side .saved-simulation-card .eds-results-enlarged .results-box .label { font-size: 0.95rem !important; } #resultsContainer.results-side .live-simulation-card .eds-results-enlarged .results-box .main-value, #resultsContainer.results-side .saved-simulation-card .eds-results-enlarged .results-box .main-value { font-size: 1.55rem !important; line-height: 1.18 !important; } @media (max-width: 767px) { #resultsContainer.results-side .live-simulation-card .eds-results-enlarged .results-box .main-value, #resultsContainer.results-side .saved-simulation-card .eds-results-enlarged .results-box .main-value { font-size: 1.3rem !important; } } /* ---- Strict arrow positioning for package sections ---- */ /* Arrow must be on FAR LEFT, and must not shift between collapsed/expanded */ .eds-package-section .category-header { position: relative !important; padding-left: 2.0rem !important; /* constant */ padding-right: 0.5rem !important; } .eds-package-section .category-header .eds-section-arrow { position: absolute !important; left: 0.5rem !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; } /* Ensure collapsed state does NOT change left padding */ .eds-package-section.section-collapsed .category-header { padding-left: 2.0rem !important; padding-right: 0.5rem !important; } /* ========================================================= Mobile fix: keep the Live button inside the Ecosystem Simulator row ========================================================= */ #edsTopRow { flex-wrap: nowrap !important; } #edsTopRow #liveEdsBtn { flex: 0 0 auto; } #edsTopRow #totalPackagesSoldInput { flex: 1 1 auto !important; width: auto !important; /* override Tailwind w-30/w-36 */ min-width: 6.5rem; } #edsTopRow span { flex: 0 0 auto; } @media (max-width: 420px) { #edsTopRow #totalPackagesSoldInput { min-width: 5.5rem; } } /* ========================================================= Mobile fix: keep the Users input inside the Ecosystem Simulator section - Make the Users input responsive and prevent it from overflowing its card ========================================================= */ #usersTopRow, #agentUsersTopRow { flex-wrap: nowrap !important; max-width: 100%; } #usersTopRow #usersCountInput, #agentUsersTopRow #agentUsersCountInput { flex: 1 1 auto !important; width: auto !important; /* override Tailwind w-30/w-36 */ min-width: 6.5rem; max-width: 100%; } #usersTopRow span, #agentUsersTopRow span { flex: 0 0 auto; } @media (max-width: 420px) { #usersTopRow #usersCountInput, #agentUsersTopRow #agentUsersCountInput { min-width: 5.5rem; } } /* ===== MOBILE HEADER LAYOUT UPDATE ===== */ @media (max-width: 768px) { .header, .top-bar, .navbar { display: flex; flex-direction: column !important; align-items: stretch !important; } .header > div:first-child, .top-bar > div:first-child, .navbar > div:first-child { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px; } /* Title + Language inline */ .header h1, .top-bar h1, .navbar h1 { display: inline-flex !important; align-items: center; gap: 8px; } /* Language selector beside title */ select[id*="lang"], select[class*="lang"] { max-width: 120px; } /* Theme + Currency second row */ .theme-toggle, .currency-dropdown, select[id*="currency"], select[class*="currency"] { width: 100% !important; } .theme-toggle, select[id*="currency"], select[class*="currency"] { margin-top: 8px; } } /* ===== FINAL UX FIXES 12-03-2026 ===== */ .language-switcher-pill { justify-content: flex-start !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22); } .language-switcher-pill .fi { font-size: 1.25rem !important; } .language-switcher-pill .language-switcher-label { display: inline-block; min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .language-switcher-pill { min-width: 128px !important; max-width: 160px !important; padding: 0.45rem 0.7rem !important; } .language-switcher-pill .language-switcher-label { max-width: 90px; font-size: .86rem !important; } } /* Put EDS section arrows on the right and keep headers full width */ .eds-package-section .category-header { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.9rem !important; padding-left: 0 !important; padding-right: 3.4rem !important; min-height: 52px; } .eds-package-section .category-header > div, .eds-package-section .category-header > h4 { min-width: 0; } .eds-package-section .category-header .eds-section-arrow { position: absolute !important; left: auto !important; right: 0.25rem !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2; } .eds-package-section.section-collapsed .category-header { padding-left: 0 !important; padding-right: 3.4rem !important; } /* Keep package section width stable while collapsing */ .eds-package-section, .eds-package-section.section-collapsed { width: 100% !important; min-width: 0 !important; } .eds-package-section .category-content.collapsed { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Trust layers inline descriptions */ .trust-layer-stack { width: 100%; } .trust-layer-inline { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; min-height: 84px; border-radius: 18px; } .trust-layer-copy { display: flex; align-items: center; gap: 0.9rem; min-width: 0; flex: 1; } .trust-layer-title { font-weight: 800; color: #e5eefb; white-space: nowrap; } .trust-layer-inline-desc { color: #9fb3c8; font-size: 0.95rem; line-height: 1.6; } .interactive-shell:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 24px 60px rgba(8, 47, 73, 0.28); } @media (max-width: 1100px) { .trust-layer-copy { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .trust-layer-title { white-space: normal; } } @media (max-width: 640px) { .trust-layer-inline { align-items: flex-start; } .trust-layer-icon { margin-left: 0.2rem; } } /* ===== FINAL UX CONSISTENCY PATCH ===== */ .page-content > section, .page-content > .section-spacing, .page-content > div[id^="page"] > section { margin-top: 0 !important; margin-bottom: 0 !important; } .page-content > section + section { margin-top: 1.75rem !important; } @media (max-width: 768px) { .page-content > section + section { margin-top: 1.25rem !important; } } /* Global interaction system */ .interactive-hover, .page-content section > div:first-child, .page-content .card, .page-content .trust-icon-card, .page-content .founder-card-new, .page-content .package-card, .page-content .feature-card, .page-content .goal-card, .page-content .results-box, .page-content .styled-table, .page-content .live-simulation-card, .page-content .interactive-btn, .page-content button, .page-content .page-nav-btn, .page-content .trust-layer, .page-content .lang-btn, .page-content .language-selector, .page-content .ecosystem-video-card { transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease, background .32s ease, filter .32s ease; transform-style: preserve-3d; will-change: transform; } .page-content .card:hover, .page-content .trust-icon-card:hover, .page-content .founder-card-new:hover, .page-content .package-card:hover, .page-content .feature-card:hover, .page-content .goal-card:hover, .page-content .results-box:hover, .page-content .styled-table:hover, .page-content .live-simulation-card:hover, .page-content .interactive-btn:hover, .page-content button:hover, .page-content .page-nav-btn:hover, .page-content .lang-btn:hover, .page-content .language-selector:hover, .page-content .ecosystem-video-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 22px 44px rgba(6, 182, 212, 0.14), 0 8px 24px rgba(15, 23, 42, 0.26); } .page-content .trust-layer:hover { transform: translateX(6px) translateY(-2px); box-shadow: 0 16px 34px rgba(6, 182, 212, 0.10); } .page-content a:hover, .page-content h1:hover, .page-content h2:hover, .page-content h3:hover, .page-content h4:hover, .page-content .section-title:hover, .page-content .eg-section-title:hover, .page-content .eg-section-label:hover { filter: brightness(1.08); } /* Layers interactive layout */ .trust-layer-interactive-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 1.25rem; align-items: stretch; margin-top: 2rem; } .trust-layer-stack { width: 100%; margin-top: 0 !important; } .trust-layer-inline { min-height: 78px; } .trust-layer-inline-desc { display: none !important; } .trust-layer-copy { display: flex; align-items: center; min-width: 0; } .trust-layer-title { white-space: normal; } .trust-layer-detail-panel { min-height: 100%; padding: 1.4rem; border-radius: 20px; border: 1px solid rgba(34, 211, 238, 0.22); background: linear-gradient(145deg, rgba(9, 27, 56, 0.96), rgba(12, 43, 70, 0.90)); box-shadow: 0 18px 45px rgba(8, 47, 73, 0.24); position: relative; overflow: hidden; } .trust-layer-detail-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(34,211,238,.15), transparent 34%), radial-gradient(circle at bottom left, rgba(59,130,246,.12), transparent 28%); pointer-events: none; } .trust-layer-detail-panel > * { position: relative; z-index: 1; } .trust-layer-detail-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.20); color: #67e8f9; font-size: .78rem; font-weight: 700; letter-spacing: .03em; margin-bottom: .85rem; } .trust-layer-detail-title { font-size: 1.25rem; font-weight: 800; color: #f8fbff; line-height: 1.3; margin-bottom: .8rem; } .trust-layer-detail-text { color: #c1d3e6; line-height: 1.75; font-size: .97rem; margin-bottom: 1rem; } .trust-layer-detail-points { display: grid; gap: .75rem; } .trust-layer-detail-point { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .85rem; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); color: #dbeafe; } .trust-layer-detail-point i { color: #22d3ee; margin-top: .2rem; } .trust-layer.trust-layer-selected, .trust-layer.trust-layer-active { border-left-color: #22d3ee; background: linear-gradient(90deg, rgba(6,182,212,.16), rgba(6,182,212,.06)); } @media (max-width: 1100px) { .trust-layer-interactive-grid { grid-template-columns: 1fr; } .trust-layer-detail-panel { min-height: 280px; } } @media (max-width: 900px) { #bds-section > div > div, #builder-showcase-section > div > div, #trust-app-section > div > div, #trust-app-showcase-section > div > div { grid-template-columns: 1fr !important; } #bds-section > div > div > div:last-child { margin-top: 0 !important; } #bds-section img, #builder-showcase-section img, #trust-app-section img, #trust-app-showcase-section img { min-height: 280px !important; } } /* ---- original style block 2 ---- */ #language-switcher-btn, #languageModal, #languageModalButtons, #closeLanguageModalBtn, #languageModalTitle, #languageModalDesc, #languageModalFooter { display: none !important; } /* ---- original style block 3 ---- */ /* === AGENT RESULTS FIX: 3 Columns on Tablet & Desktop (Non-Compact Only) === */ @media (min-width: 768px) { .agent-results:not(.compact), .agent-results-wrapper:not(.compact), .agent-results-grid:not(.compact) { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } } /* ---- original style block 4 ---- */ /* ═══════════════════════════════════════════════════════════════ EGETY REDESIGN OVERLAY v2 — Institutional Premium Merges with existing simulator CSS without breaking anything ═══════════════════════════════════════════════════════════════ */ /* --- Typography Upgrade --- */ :root { --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body-new: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --redesign-primary: #1a56db; --redesign-accent: #0ea5e9; --redesign-accent-soft: #e0f2fe; --redesign-success: #059669; --redesign-success-soft: #d1fae5; --redesign-text: #0f172a; --redesign-text-secondary: #475569; --redesign-text-muted: #94a3b8; --redesign-bg: #f8fafc; --redesign-card: rgba(255, 255, 255, 0.97); --redesign-border: #e2e8f0; --redesign-radius: 14px; } .dark-mode { --redesign-bg: #0a0f1e; --redesign-card: #111827; --redesign-text: #f1f5f9; --redesign-text-secondary: #94a3b8; --redesign-text-muted: #64748b; --redesign-border: #1e293b; --redesign-accent-soft: rgba(14, 165, 233, 0.1); --redesign-success-soft: rgba(5, 150, 105, 0.1); } /* ═══ STICKY NAV ═══ */ .egety-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: rgba(248, 250, 252, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--redesign-border); transition: all 0.3s ease; } .dark-mode .egety-nav { background: rgba(10, 15, 30, 0.92); } .egety-nav-inner { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 64px; } .egety-nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--redesign-text); } .egety-nav-logo img { height: 30px; width: 30px; } .egety-nav-logo span { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.02em; color: var(--text-color); } .egety-nav-links { display: flex; align-items: center; gap: 2rem; } .egety-nav-link { text-decoration: none; color: var(--redesign-text-secondary); font-family: var(--font-body-new); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; transition: color 0.2s; } .dark-mode .egety-nav-link { color: var(--redesign-text-secondary); } .egety-nav-link:hover { color: var(--redesign-primary); } .dark-mode .egety-nav-link:hover { color: var(--redesign-accent); } .egety-nav-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; padding: 10px 16px; border-radius: 9999px; border: 1px solid var(--redesign-border); background: transparent; color: var(--redesign-text-secondary); font-family: var(--font-body-new); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; } .dark-mode .egety-nav-page-btn { border-color: var(--border-color-dark); color: var(--redesign-text-secondary); } .egety-nav-page-btn:hover { border-color: var(--redesign-accent); color: var(--redesign-primary); background: var(--redesign-accent-soft); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(26, 86, 219, 0.18); } .dark-mode .egety-nav-page-btn:hover { color: #ffffff; box-shadow: 0 12px 24px rgba(14, 165, 233, 0.16); } .egety-nav-page-btn.active { background: linear-gradient(135deg, var(--redesign-primary), var(--redesign-accent)); color: #ffffff !important; border-color: transparent; box-shadow: 0 12px 28px rgba(26, 86, 219, 0.22); } .egety-nav-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--redesign-primary); color: #fff !important; padding: 10px 22px; border-radius: 9999px; font-family: var(--font-body-new); font-size: 0.875rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all 0.25s ease; } .egety-nav-cta:hover { background: #1e40af; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26, 86, 219, 0.25); } @media (max-width: 768px) { .egety-nav-links { display: none; } .egety-nav-links.nav-mobile-open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--redesign-card); border-bottom: 1px solid var(--redesign-border); padding: 1.5rem; gap: 1rem; z-index: 9999; } .dark-mode .egety-nav-links.nav-mobile-open { background: var(--bg-color-dark); } .egety-nav-page-btn { width: 100%; } .egety-mobile-toggle { display: flex !important; } } .egety-mobile-toggle { display: none; background: none; border: none; color: var(--text-color); font-size: 1.25rem; cursor: pointer; } /* ═══ REDESIGNED HERO ═══ */ #hero-redesigned { padding-top: 0.5rem; padding-bottom: 1.5rem; position: relative; overflow: hidden; } #hero-redesigned::before { content: ''; position: absolute; top: -50%; right: -20%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(14, 165, 233, 0.05) 0%, transparent 70%); pointer-events: none; } .dark-mode #hero-redesigned::before { background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%); } .hero-redesigned-inner { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; } .hero-r-content { max-width: 600px; } .hero-r-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--redesign-accent-soft); color: #0c4a6e; padding: 6px 16px; border-radius: 9999px; font-family: var(--font-body-new); font-size: 0.8rem; font-weight: 600; margin-bottom: 1.25rem; letter-spacing: 0.02em; opacity: 0; animation: heroFadeUp 0.7s ease 0.1s forwards; } .dark-mode .hero-r-badge { color: var(--redesign-accent); } .hero-r-badge .pulse-green { width: 8px; height: 8px; border-radius: 50%; background: var(--redesign-success); animation: heroPulse 2s infinite; } .hero-r-title { font-family: var(--font-display); font-size: clamp(2.4rem, 4.5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--text-color); margin-bottom: 1.25rem; opacity: 0; animation: heroFadeUp 0.7s ease 0.2s forwards; text-shadow: none !important; } .hero-r-title em { font-style: italic; color: var(--redesign-primary); } .dark-mode .hero-r-title em { color: var(--redesign-accent); } .hero-r-subtitle { font-family: var(--font-body-new); font-size: 1.1rem; color: var(--redesign-text-secondary); line-height: 1.7; margin-bottom: 1.75rem; max-width: 530px; opacity: 0; animation: heroFadeUp 0.7s ease 0.35s forwards; } .hero-r-actions { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; opacity: 0; animation: heroFadeUp 0.7s ease 0.5s forwards; } .hero-r-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--redesign-primary); color: #fff; padding: 14px 28px; border-radius: 9999px; font-family: var(--font-body-new); font-size: 1rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all 0.25s ease; } .hero-r-btn-primary:hover { background: #1e40af; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26, 86, 219, 0.3); } .hero-r-btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--redesign-text-secondary); padding: 14px 22px; border-radius: 9999px; font-family: var(--font-body-new); font-size: 0.938rem; font-weight: 500; text-decoration: none; border: 1px solid var(--redesign-border); cursor: pointer; transition: all 0.25s ease; } .hero-r-btn-secondary:hover { border-color: var(--redesign-accent); color: var(--redesign-primary); background: var(--redesign-accent-soft); } .hero-r-trust-bar { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; opacity: 0; animation: heroFadeUp 0.7s ease 0.6s forwards; } .hero-r-trust-item { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-body-new); font-size: 0.8rem; color: var(--redesign-text-muted); font-weight: 500; } .hero-r-trust-item i { color: var(--redesign-success); font-size: 0.7rem; } .hero-r-trust-item strong { color: var(--text-color); font-weight: 600; } /* Hero Preview Card */ .hero-r-visual { opacity: 0; animation: heroFadeUp 0.7s ease 0.3s forwards; } .hero-r-card { background: var(--redesign-card); border: 1px solid var(--redesign-border); border-radius: var(--redesign-radius); padding: 1.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06); } .dark-mode .hero-r-card { background: var(--card-bg-dark); border-color: var(--border-color-dark); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } .hero-r-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--redesign-border); } .dark-mode .hero-r-card-header { border-color: var(--border-color-dark); } .hero-r-card-label { font-family: var(--font-body-new); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--redesign-text-muted); font-weight: 600; } .hero-r-card-live { display: flex; align-items: center; gap: 6px; font-family: var(--font-body-new); font-size: 0.7rem; color: var(--redesign-success); font-weight: 600; } .hero-r-card-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--redesign-success); animation: heroPulse 2s infinite; } .hero-r-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .hero-r-metric { background: var(--stat-card-bg, var(--bg-color-light)); border-radius: 10px; padding: 0.875rem; transition: all 0.2s ease; } .dark-mode .hero-r-metric { background: rgba(51, 65, 85, 0.5); } .hero-r-metric:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .hero-r-metric-label { font-family: var(--font-body-new); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--redesign-text-muted); font-weight: 600; margin-bottom: 4px; } .hero-r-metric-value { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-color); letter-spacing: -0.02em; } .hero-r-metric-value.blue { color: var(--redesign-primary); } .dark-mode .hero-r-metric-value.blue { color: var(--redesign-accent); } .hero-r-metric-value.green { color: var(--redesign-success); } .hero-r-metric-sub { font-family: var(--font-body-new); font-size: 0.65rem; font-weight: 600; color: var(--redesign-success); margin-top: 2px; } .hero-r-card-footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--redesign-border); display: flex; align-items: center; justify-content: space-between; } .dark-mode .hero-r-card-footer { border-color: var(--border-color-dark); } .hero-r-card-footer span { font-family: var(--font-body-new); font-size: 0.78rem; font-weight: 500; color: var(--redesign-text-muted); } .hero-r-card-footer a { font-family: var(--font-body-new); font-size: 0.78rem; font-weight: 600; color: var(--redesign-primary); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: gap 0.2s; } .dark-mode .hero-r-card-footer a { color: var(--redesign-accent); } .hero-r-card-footer a:hover { gap: 8px; } @media (max-width: 1024px) { .hero-redesigned-inner { grid-template-columns: 1fr; gap: 2rem; } .hero-r-content { max-width: 100%; } .hero-r-visual { max-width: 500px; } } @media (max-width: 640px) { #hero-redesigned { padding-top: 90px; padding-bottom: 1.5rem; } .hero-r-actions { flex-direction: column; align-items: stretch; } .hero-r-btn-primary, .hero-r-btn-secondary { justify-content: center; text-align: center; } .hero-r-trust-bar { gap: 0.75rem; } .hero-r-metric-grid { grid-template-columns: 1fr; } } /* ═══ SOCIAL PROOF STRIP ═══ */ .social-proof-strip { background: var(--redesign-card); border-top: 1px solid var(--redesign-border); border-bottom: 1px solid var(--redesign-border); padding: 2.5rem 0; overflow: hidden; } .dark-mode .social-proof-strip { background: var(--card-bg-dark); border-color: var(--border-color-dark); } .social-proof-strip-inner { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; } .social-proof-strip-label { text-align: center; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1.6rem; line-height: 1.2; text-transform: none; letter-spacing: normal; color: var(--primary-color); font-weight: 800; margin-bottom: 1.25rem; } .testimonial-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .testi-card { background: var(--bg-color); border: 1px solid var(--redesign-border); border-radius: var(--redesign-radius); padding: 1.25rem; position: relative; } .dark-mode .testi-card { border-color: var(--border-color-dark); } .testi-card::before { content: '\201C'; font-family: var(--font-display); font-size: 2.5rem; color: var(--redesign-accent); opacity: 0.25; position: absolute; top: 6px; left: 14px; line-height: 1; } .testi-text { font-family: var(--font-body-new); font-size: 0.9rem; color: var(--redesign-text-secondary); line-height: 1.6; margin-bottom: 0.875rem; position: relative; z-index: 1; } .testi-author { display: flex; align-items: center; gap: 0.5rem; } .testi-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--redesign-accent-soft); color: var(--redesign-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-body-new); font-size: 0.75rem; font-weight: 700; } .dark-mode .testi-avatar { color: var(--redesign-accent); } .testi-name { font-family: var(--font-body-new); font-size: 0.78rem; font-weight: 600; color: var(--text-color); } .testi-meta { font-family: var(--font-body-new); font-size: 0.65rem; color: var(--redesign-text-muted); } @media (max-width: 768px) { .testimonial-row { grid-template-columns: 1fr; gap: 0.875rem; } } /* ═══ FOUNDERS SECTION ═══ */ /* ═══ EGETY BUILDER SECTION ═══ */ .builder-section { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(15,23,42,0.97), rgba(30,41,59,0.97)); border-radius: 16px; padding: 3rem 2rem; } .light-mode .builder-section { background: linear-gradient(135deg, rgba(240,245,255,0.98), rgba(224,235,255,0.98)); } .builder-section .builder-glow { position: absolute; width: 400px; height: 400px; border-radius: 50%; filter: blur(120px); opacity: 0.15; pointer-events: none; } .builder-section .builder-glow-1 { background: #3b82f6; top: -100px; right: -100px; } .builder-section .builder-glow-2 { background: #06b6d4; bottom: -100px; left: -100px; } .builder-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .builder-module-card { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 12px; padding: 1.25rem 1rem; text-align: center; transition: all 0.3s ease; } .builder-module-card:hover { border-color: rgba(59,130,246,0.5); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,0.15); } .builder-module-card i { font-size: 1.5rem; margin-bottom: 0.5rem; color: #38bdf8; } .builder-module-card span { font-size: 0.8rem; font-weight: 600; display: block; } .builder-coming-soon { display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); border-radius: 12px; filter: blur(0.5px); opacity: 0.85; transition: all 0.3s ease; } .builder-coming-soon:hover { filter: blur(0px); opacity: 1; } .builder-coming-soon i { font-size: 1.3rem; color: #a78bfa; } .builder-flow-canvas { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; } .builder-flow-node { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.75rem; font-weight: 600; color: #60a5fa; white-space: nowrap; } .light-mode .builder-flow-node { color: #2563eb; } .builder-flow-arrow { color: rgba(59,130,246,0.4); font-size: 1.2rem; } .builder-key-points { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; } @media (max-width: 640px) { .builder-key-points { grid-template-columns: 1fr; } .builder-module-grid { grid-template-columns: repeat(3, 1fr); } } .builder-key-point { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--text-color); opacity: 0.85; } .builder-key-point i { color: #38bdf8; margin-top: 3px; font-size: 0.8rem; } /* ═══ EGETY TRUST SECTION ═══ */ .trust-banner-section { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(10,15,30,0.98), rgba(20,30,50,0.98)); border-radius: 16px; padding: 3rem 2rem; } .light-mode .trust-banner-section { background: linear-gradient(135deg, rgba(235,245,255,0.98), rgba(220,235,250,0.98)); } .trust-banner-section .trust-glow { position: absolute; width: 350px; height: 350px; border-radius: 50%; filter: blur(100px); opacity: 0.12; pointer-events: none; } .trust-banner-section .trust-glow-1 { background: #1d4ed8; top: -80px; left: -80px; } .trust-banner-section .trust-glow-2 { background: #06b6d4; bottom: -80px; right: -80px; } .trust-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; } @media (max-width: 768px) { .trust-icon-grid { grid-template-columns: repeat(2, 1fr); } } .trust-icon-card { background: rgba(29,78,216,0.08); border: 1px solid rgba(29,78,216,0.2); border-radius: 12px; padding: 1.25rem 1rem; text-align: center; transition: all 0.3s ease; } .trust-icon-card:hover { border-color: rgba(29,78,216,0.4); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(29,78,216,0.12); } .trust-icon-card i { font-size: 1.5rem; color: #60a5fa; margin-bottom: 0.5rem; } .trust-icon-card h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.3rem; } .trust-icon-card p { font-size: 0.62rem; opacity: 0.7; line-height: 1.4; } .trust-layer-diagram { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; } .trust-layer { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.2rem; border-left: 3px solid rgba(59,130,246,0.2); transition: all 0.3s ease; font-size: 0.8rem; } .trust-layer:hover { border-left-color: #3b82f6; background: rgba(59,130,246,0.05); } .trust-layer.trust-layer-active { border-left-color: #06b6d4; background: rgba(6,182,212,0.08); font-weight: 700; } .trust-layer-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(59,130,246,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #60a5fa; flex-shrink: 0; } .trust-layer-active .trust-layer-num { background: rgba(6,182,212,0.2); color: #22d3ee; } .trust-layer { cursor: pointer; position: relative; } .trust-layer-icon { margin-left: auto; font-size: 1.1rem; opacity: 0.7; } .trust-layer.trust-layer-selected { border-left-color: #06b6d4; background: rgba(6,182,212,0.08); } .trust-layer-desc { display: none; padding: 0; margin: 0; font-size: 0.85rem; color: #94a3b8; line-height: 1.6; animation: fadeSlideIn 0.3s ease; } .trust-layer-desc.active { display: block; } @keyframes layerDescFade { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .founders-section { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; } .founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; } .founder-card-new { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--redesign-radius); padding: 1.5rem; } .founder-card-label { font-family: var(--font-body-new); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--redesign-text-muted); font-weight: 600; margin-bottom: 1rem; } .founder-row { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border-color); } .founder-row:last-child { border-bottom: none; } .founder-avatar-new { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--redesign-primary), var(--redesign-accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.2rem; } .founder-row h4 { font-family: var(--font-body-new); font-size: 1rem; font-weight: 600; color: var(--text-color); margin-bottom: 2px; } .founder-row p { font-family: var(--font-body-new); font-size: 0.8rem; color: var(--redesign-text-secondary); margin-bottom: 0.5rem; line-height: 1.5; } .founder-linkedin { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body-new); font-size: 0.75rem; color: var(--redesign-primary); text-decoration: none; font-weight: 600; } .dark-mode .founder-linkedin { color: var(--redesign-accent); } .founder-linkedin:hover { text-decoration: underline; } .stat-grid-new { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; } .stat-box-new { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 1.25rem; text-align: center; transition: all 0.25s ease; } .stat-box-new:hover { border-color: var(--redesign-accent); transform: translateY(-2px); } .stat-box-new i { color: var(--redesign-accent); font-size: 1.125rem; margin-bottom: 0.5rem; } .stat-box-new .stat-num { font-family: var(--font-display); font-size: 1.75rem; color: var(--text-color); letter-spacing: -0.02em; } .stat-box-new .stat-lbl { font-family: var(--font-body-new); font-size: 0.7rem; color: var(--redesign-text-muted); margin-top: 2px; } @media (max-width: 768px) { .founders-grid { grid-template-columns: 1fr; } } /* ═══ FINAL CTA ═══ */ .final-cta-section { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; } .final-cta-card-new { background: linear-gradient(135deg, var(--redesign-primary), #1e40af); border-radius: var(--redesign-radius); padding: 3rem; color: #fff; text-align: center; position: relative; overflow: hidden; } .final-cta-card-new::before { content: ''; position: absolute; top: -50%; right: -30%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%); pointer-events: none; } .final-cta-card-new h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 0.75rem; position: relative; } .final-cta-card-new > p { font-family: var(--font-body-new); font-size: 1.05rem; opacity: 0.85; margin-bottom: 1.5rem; position: relative; } .final-cta-btn-white { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: var(--redesign-primary); padding: 14px 32px; border-radius: 9999px; font-family: var(--font-body-new); font-size: 1rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all 0.25s ease; position: relative; } .final-cta-btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .final-cta-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 1.5rem; position: relative; } .final-cta-stat { text-align: center; } .final-cta-stat-num { font-family: var(--font-display); font-size: 1.4rem; } .final-cta-stat-lbl { font-family: var(--font-body-new); font-size: 0.7rem; opacity: 0.7; } /* ═══ UPGRADED FOOTER ═══ */ .footer-redesigned { border-top: 1px solid var(--redesign-border); padding: 2.5rem 0 1.5rem; } .dark-mode .footer-redesigned { border-color: var(--border-color-dark); } .footer-redesigned-inner { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; } .footer-redesigned .footer-brand-new p { font-family: var(--font-body-new); font-size: 0.8rem; color: var(--redesign-text-muted); margin-top: 0.5rem; max-width: 280px; line-height: 1.6; } .footer-redesigned .footer-col-new h5 { font-family: var(--font-body-new); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--redesign-text-muted); font-weight: 600; margin-bottom: 0.75rem; } .footer-redesigned .footer-col-new a { display: block; font-family: var(--font-body-new); font-size: 0.85rem; color: var(--redesign-text-secondary); text-decoration: none; margin-bottom: 0.5rem; transition: color 0.2s; } .footer-redesigned .footer-col-new a:hover { color: var(--redesign-primary); } .dark-mode .footer-redesigned .footer-col-new a:hover { color: var(--redesign-accent); } .footer-social-new { display: flex; gap: 0.625rem; margin-top: 0.75rem; } .footer-social-new a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--redesign-border); display: flex !important; align-items: center; justify-content: center; color: var(--redesign-text-muted); transition: all 0.2s; margin-bottom: 0 !important; font-size: 0.8rem; } .dark-mode .footer-social-new a { border-color: var(--border-color-dark); } .footer-social-new a:hover { border-color: var(--redesign-primary); color: var(--redesign-primary); } .dark-mode .footer-social-new a:hover { border-color: var(--redesign-accent); color: var(--redesign-accent); } .footer-bottom-new { max-width: 1360px; margin: 1.25rem auto 0; padding: 1rem 1.5rem 0; border-top: 1px solid var(--redesign-border); display: flex; justify-content: space-between; font-family: var(--font-body-new); font-size: 0.7rem; color: var(--redesign-text-muted); } .dark-mode .footer-bottom-new { border-color: var(--border-color-dark); } @media (max-width: 768px) { .footer-redesigned-inner { grid-template-columns: 1fr 1fr; } .footer-bottom-new { flex-direction: column; gap: 0.5rem; } } /* ═══ SCROLL REVEAL ═══ */ .eg-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .eg-reveal.eg-visible { opacity: 1; transform: translateY(0); } /* ═══ ANIMATIONS ═══ */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ═══ MAIN CONTAINER SPACING for sticky nav ═══ */ main.relative.min-h-screen { padding-top: 72px !important; } /* ═══ NAV SETTINGS CONTROLS ═══ */ .egety-nav-settings-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--redesign-border); background: transparent; color: var(--redesign-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; } .egety-nav-settings-btn:hover { border-color: var(--redesign-accent); color: var(--redesign-primary); } .dark-mode .egety-nav-settings-btn:hover { color: var(--redesign-accent); } .egety-nav-theme-toggle { width: 44px; height: 26px; border-radius: 9999px; background: #e2e8f0; display: flex; align-items: center; padding: 2px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .dark-mode .egety-nav-theme-toggle { background: #334155; } .egety-nav-currency { height: 34px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--redesign-border); background: transparent; color: var(--text-color); font-family: var(--font-body-new); font-size: 0.75rem; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; min-width: 50px; } @media (max-width: 768px) { .egety-nav-settings-btn, .egety-nav-theme-toggle, .egety-nav-currency { display: none; } } /* ═══ NAV ACTIVE STATE ═══ */ .egety-nav-link.nav-active { color: var(--redesign-primary); position: relative; } .dark-mode .egety-nav-link.nav-active { color: var(--redesign-accent); } .egety-nav-link.nav-active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--redesign-primary); border-radius: 2px; } .dark-mode .egety-nav-link.nav-active::after { background: var(--redesign-accent); } /* ═══ SECTION TRANSITION BRIDGE ═══ */ /* Smooth visual bridge between new institutional sections and simulator */ .simulator-container { position: relative; } .simulator-container::before { content: ''; position: absolute; top: -2rem; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: linear-gradient(to right, var(--redesign-primary), var(--redesign-accent)); border-radius: 4px; opacity: 0.3; } /* Hide the old header card since we have the sticky nav */ /* Keep it in DOM for language/theme/currency controls but make it slimmer */ /* Section label styling for new sections */ .eg-section-label { font-family: var(--font-body-new); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--redesign-primary); font-weight: 700; margin-bottom: 0.5rem; } .dark-mode .eg-section-label { color: var(--redesign-accent); } .eg-section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); letter-spacing: -0.02em; color: var(--text-color); margin-bottom: 0.5rem; text-shadow: none !important; } .eg-section-subtitle { font-family: var(--font-body-new); font-size: 1rem; color: var(--redesign-text-secondary); max-width: 580px; line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════ BRANDING UNIFICATION — Override ALL old styles for cohesion Applied LAST so these rules win via cascade + specificity ═══════════════════════════════════════════════════════════════════ */ /* --- 1. FONT — base declarations updated, edge cases only --- */ .shepherd-theme-custom .shepherd-element, .styled-table th, .styled-table td { font-family: 'DM Sans', system-ui, sans-serif; } .section-title, .title-text, h1, h2, h3 { text-shadow: none !important; } /* Colors unified in base :root */ /* --- 3. KILL GLOW, NEON, PARTICLES --- */ #particle-bg { display: none !important; } /* Remove all text-shadow glow from titles */ .section-title, .title-text, h1, h2, h3, h4 { text-shadow: none !important; } /* Kill pulse animation on CTAs */ #launchAppBtn, #saveSimulationBtn, .link-btn { animation: none !important; } /* Kill the spinning gradient border */ .live-simulation-card { animation: none !important; border: 2px solid var(--accent-color) !important; } /* Card styles in base declarations */ /* Button styles in base declarations */ /* --- 5. TABLE REFINEMENT --- */ .styled-table thead tr { background: var(--primary-color); border-radius: 10px; } .styled-table { font-size: 0.85rem; } .styled-table tbody tr:hover { background-color: rgba(14, 165, 233, 0.06); } .dark-mode .styled-table tbody tr:hover { background-color: rgba(14, 165, 233, 0.1); } .styled-table tbody tr.active { background: var(--primary-color); } /* --- 6. RESULTS BOX REFINEMENT --- */ .results-box { border-radius: 10px; border-left: 3px solid var(--accent-color); transition: transform 0.25s ease, box-shadow 0.25s ease; } .results-box:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } /* --- 7. SLIDER REFINEMENT --- */ input[type="range"] { accent-color: var(--primary-color); } input[type="range"]::-webkit-slider-thumb { background: var(--primary-color); } /* Form input styles in base rules */ /* --- 9. SIMULATOR CARD REFINEMENT --- */ .simulator-card { border-radius: 14px; padding: 1.25rem; } /* --- 10. INSTALLMENT CARDS --- */ .installment-suggestion-card { border-radius: 14px; } .installment-suggestion-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .installment-suggestion-card.highlighted { border: 2px solid var(--primary-color); box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1); } /* --- 11. ICON ANIMATIONS — reduce to subtle --- */ .how-it-works-item i, .stat-card i, .automation-icon i { animation: none !important; transition: color 0.2s ease, transform 0.2s ease !important; } .how-it-works-item:hover i, .stat-card:hover i, .automation-icon:hover i { transform: scale(1.08) !important; color: var(--accent-color) !important; } /* --- 12. FAQ TAB REFINEMENT --- */ .faq-tab { text-decoration: none !important; border-radius: 10px; font-weight: 500 !important; } .faq-tab.active { background: rgba(14, 165, 233, 0.08) !important; color: var(--primary-color) !important; border-bottom: none !important; } /* --- 13. PARTNER LOGOS --- */ .partner-logo { transition: transform 0.2s ease, filter 0.2s ease !important; } .partner-logo:hover { transform: scale(1.05) !important; filter: none !important; } /* --- 14. STICKY BUBBLES --- */ .sticky-bubble { border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; } /* --- 15. MODAL REFINEMENT --- */ .modal .card { border-radius: 14px; } /* --- 16. PACKAGE BUTTONS --- */ .package-btn { border-radius: 14px; transition: all 0.2s ease !important; } /* --- 17. CHART CONTAINER --- */ canvas:not(#particle-bg) { border-radius: 10px; } /* --- 18. TOGGLE SWITCHES --- */ .toggle-label { border-radius: 9999px; } /* --- 19. HOW IT WORKS + STAT CARDS match new aesthetic --- */ .how-it-works-item, .stat-card { border-radius: 14px; } /* --- 20. LIGHT MODE OVERRIDE (softer surfaces) --- */ /* Light mode in base rules */ /* --- 21. HEADER CARD (settings bar) refinement --- */ header.card { border-radius: 14px; padding: 0.75rem 1rem !important; } /* --- 22. SECTION SPACING --- */ /* Section spacing handled by space-y-4 on main */ /* --- 23. COMPARISON CARDS --- */ .compare-card { border-radius: 14px; border-color: var(--accent-color) !important; } /* --- 24. TOOLTIP REFINEMENT --- */ .info-tooltip { border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; } /* --- 25. WHITEPAPER MODAL --- */ #whitePaperModalContent { border-radius: 14px; } #whitePaperModal { z-index: 2147483647 !important; } #whitePaperModalContent { position: relative; z-index: 2147483647 !important; } .inline-video-trigger { width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer; text-align: inherit; } .inline-video-trigger:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; } .inline-video-player-shell { position: relative; width: 100%; min-height: 260px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #000; box-shadow: 0 25px 50px rgba(0,0,0,0.35); } .inline-video-player-shell iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; } @media (min-width: 768px) { .inline-video-player-shell, .inline-video-player-shell iframe { min-height: 400px; } .inline-video-player-shell.video-height-360, .inline-video-player-shell.video-height-360 iframe { min-height: 360px; } } /* ---- original style block 5 ---- */ /* Final UI fix: restore icon rendering, unify gradients, enforce Inter */ :root { --section-grad-start: #0f172a; --section-grad-end: #1e293b; --section-border: rgba(59,130,246,0.16); --section-shadow: 0 8px 28px rgba(0,0,0,0.18); } .light-mode { --section-grad-start: #eff6ff; --section-grad-end: #dbeafe; --section-border: rgba(37,99,235,0.12); --section-shadow: 0 8px 24px rgba(15,23,42,0.08); } html, body, body button, body input, body select, body textarea, body option, body a, body p, body span, body div, body li, body td, body th, body label, body h1, body h2, body h3, body h4, body h5, body h6, body summary, body small, body strong, body em { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } .title-text, .section-title, .eg-section-title, .hero-r-title, .egety-nav-logo span, .final-cta-card-new h2, .hero-r-metric-value, .stat-num, .final-cta-stat-num { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; letter-spacing: -0.02em; } /* Keep icon fonts intact */ .fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-light, .fa-duotone, .fa-brands, .fa-thin, [class^="fa-"], [class*=" fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; display: inline-block; } .fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; } /* Make sure icons remain visible */ i.fa, i.fas, i.far, i.fal, i.fad, i.fab, i.fa-solid, i.fa-regular, i.fa-light, i.fa-duotone, i.fa-brands, i.fa-thin, i[class^="fa-"], i[class*=" fa-"] { opacity: 1 !important; visibility: visible !important; } /* Unified section gradients */ .card, .builder-section, .trust-banner-section, #bds-section > div, #plo-banner-section > div, #trust-app-section > div, .social-proof-strip, .final-cta-card-new, .founder-card-new, .stat-box-new, .testi-card, .hero-r-card, .installment-suggestion-card, .results-box, .stat-card, .how-it-works-item, .package-category-k, .eds-package-section, #partnersCard, .footer-redesigned, .page-nav-container, .egety-nav { background: linear-gradient(135deg, var(--section-grad-start), var(--section-grad-end)) !important; border: 1px solid var(--section-border) !important; box-shadow: var(--section-shadow) !important; } .light-mode .card:not(#partnersCard), .light-mode .builder-section, .light-mode .trust-banner-section, .light-mode #bds-section > div, .light-mode #plo-banner-section > div, .light-mode #trust-app-section > div, .light-mode .social-proof-strip, .light-mode .hero-r-card, .light-mode .testi-card, .light-mode .founder-card-new, .light-mode .stat-box-new, .light-mode .results-box, .light-mode .stat-card, .light-mode .how-it-works-item, .light-mode .installment-suggestion-card, .light-mode .package-category-k, .light-mode .eds-package-section, .light-mode .footer-redesigned, .light-mode .page-nav-container, .light-mode .egety-nav { color: #0f172a !important; } /* Keep the CTA visually stronger but still gradient-consistent */ .final-cta-card-new { background: linear-gradient(135deg, #1d4ed8, #0ea5e9) !important; border-color: rgba(255,255,255,0.16) !important; } /* Avoid white-on-white icon/text issues in light mode */ .light-mode .results-box .main-value, .light-mode .hero-r-metric-value, .light-mode .stat-num, .light-mode .title-text, .light-mode .section-title, .light-mode .eg-section-title { color: #0f172a !important; } /* ---- original style block 6 ---- */ /* ===== Final UI consistency patch ===== */ :root { --primary-color-light: #2563eb !important; --accent-color-light: #22d3ee !important; --bg-color-light: #edf4ff !important; --text-color-light: #0f172a !important; --card-bg-light: rgba(255,255,255,0.92) !important; --border-color-light: rgba(96,165,250,0.22) !important; --primary-glow-light: rgba(37,99,235,0.22) !important; --stat-card-bg-light: rgba(248,250,252,0.92) !important; --primary-color-dark: #3b82f6 !important; --accent-color-dark: #22d3ee !important; --bg-color-dark: #071120 !important; --text-color-dark: #e6eef8 !important; --card-bg-dark: rgba(10, 24, 44, 0.82) !important; --border-color-dark: rgba(56, 189, 248, 0.18) !important; --primary-glow-dark: rgba(59, 130, 246, 0.30) !important; --stat-card-bg-dark: rgba(10, 24, 44, 0.88) !important; --site-gradient-main: linear-gradient(135deg, rgba(8,20,40,0.98) 0%, rgba(10,31,60,0.96) 30%, rgba(11,58,92,0.94) 68%, rgba(8,93,122,0.88) 100%); --site-gradient-soft: linear-gradient(135deg, rgba(7,18,36,0.92) 0%, rgba(13,32,59,0.90) 45%, rgba(17,63,97,0.86) 100%); --site-gradient-card: linear-gradient(145deg, rgba(8,20,40,0.90), rgba(12,34,58,0.88) 58%, rgba(10,70,98,0.78)); --site-gradient-row: linear-gradient(90deg, rgba(13,40,72,0.96), rgba(11,73,102,0.92)); --site-gradient-active: linear-gradient(135deg, #2563eb, #06b6d4); --site-shadow: 0 14px 34px rgba(2, 12, 27, 0.32); --site-shadow-hover: 0 22px 48px rgba(6, 24, 49, 0.42); } html, body, body *, button, input, select, textarea, summary { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } .fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-light, .fa-duotone, .fa-brands, .fa-thin, [class^="fa-"], [class*=" fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important; } .fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; } .material-symbols-outlined, .material-icons { font-family: 'Material Symbols Outlined', 'Material Icons' !important; } body { background: radial-gradient(circle at top right, rgba(34,211,238,0.12), transparent 32%), radial-gradient(circle at top left, rgba(59,130,246,0.14), transparent 28%), var(--site-gradient-main) !important; } section, .card, .simulator-card, .results-box, .package-category-k, .eds-package-section, .page-nav-container, .page-nav-btn, .styled-table, .styled-table thead tr, .styled-table tbody tr, nav, header, footer, .modal-content, .shepherd-theme-custom .shepherd-content, #trust-app-section > div, #bds-section > div, [id$="-section"] > div:first-child, [class*="section"] > .max-w-7xl, [class*="section"] > .max-w-6xl, [class*="section"] > .max-w-5xl, [class*="section"] > .container, [class*="glass"], [class*="card"] { border-color: var(--border-color) !important; } .card, .simulator-card, .package-category-k, .eds-package-section, .results-box, .modal-content, .shepherd-theme-custom .shepherd-content, #trust-app-section > div, #bds-section > div, .page-nav-container, .page-nav-btn, [class*="glass"], [class*="card"] { background: var(--site-gradient-card) !important; box-shadow: var(--site-shadow) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } section, nav, header, footer, [id$="-section"] { background-color: transparent !important; } .styled-table { background: rgba(7, 17, 34, 0.42) !important; overflow: hidden; border-radius: 18px !important; } .styled-table thead tr { background: var(--site-gradient-active) !important; } .styled-table tbody tr, .table-row, tr { background: transparent; transition: transform .28s ease, background .28s ease, box-shadow .28s ease; } .styled-table tbody tr:nth-child(odd) { background: linear-gradient(90deg, rgba(9,29,54,0.88), rgba(12,68,94,0.74)) !important; } .styled-table tbody tr:nth-child(even) { background: linear-gradient(90deg, rgba(10,37,64,0.74), rgba(12,51,86,0.60)) !important; } .styled-table tbody tr:hover { background: var(--site-gradient-row) !important; transform: translateY(-2px) scale(1.003); box-shadow: inset 0 0 0 1px rgba(34,211,238,0.15); } .styled-table tbody tr.active { background: var(--site-gradient-active) !important; box-shadow: 0 10px 22px rgba(37,99,235,0.22); } /* Package sections and category headers */ .eds-package-section { background: var(--site-gradient-card) !important; border: 1px solid rgba(56,189,248,0.18) !important; border-radius: 18px !important; padding: 0.65rem 0.8rem !important; width: 100% !important; transform-style: preserve-3d; } .eds-package-section[data-category="K"] { background: linear-gradient(145deg, rgba(15,31,52,0.95), rgba(18,49,76,0.92) 60%, rgba(17,92,120,0.84)) !important; border-color: rgba(147,197,253,0.30) !important; } .eds-package-section[data-category="A"], .eds-package-section[data-category="B"], .eds-package-section[data-category="C"] { background: linear-gradient(145deg, rgba(10,28,50,0.94), rgba(14,48,79,0.90) 55%, rgba(8,96,122,0.72)) !important; } .eds-package-section .category-header { min-height: 58px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; } .eds-package-section.section-collapsed { display: block !important; width: 100% !important; min-height: 78px !important; height: auto !important; padding: 0.65rem 0.8rem !important; } .eds-package-section.section-collapsed .category-header { margin-bottom: 0 !important; min-height: 58px !important; } .eds-package-section .category-content.collapsed { max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; } .eds-section-arrow { min-width: 42px; width: 42px; height: 42px; border-radius: 999px; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(147,197,253,0.18); color: #dbeafe !important; transition: transform .28s ease, background .28s ease, box-shadow .28s ease !important; } .eds-package-section:hover .eds-section-arrow { background: rgba(34,211,238,0.14); box-shadow: 0 10px 22px rgba(34,211,238,0.14); } /* Remove olive/green-looking fills and unify with blue-cyan */ [style*="#556B2F"], [style*="#6b8e23"], [style*="olive"], .bg-olive, .olive, .olive-green, .greenish { background: var(--site-gradient-row) !important; color: var(--text-color) !important; } /* Broad interactivity */ a, button, summary, .interactive-btn, .page-nav-btn, .results-box, .card, .simulator-card, .eds-package-section, .styled-table tbody tr, details, input, select, textarea, .lang-btn, .bubble, .info-icon, .toggle-switch, [class*="btn"], [role="button"] { transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease, color .28s ease, opacity .28s ease !important; will-change: transform; } a:hover, button:hover, summary:hover, .interactive-btn:hover, .page-nav-btn:hover, .results-box:hover, .card:hover, .simulator-card:hover, .eds-package-section:hover, details:hover, .lang-btn:hover, .bubble:hover, [class*="btn"]:hover, [role="button"]:hover { transform: translateY(-4px); box-shadow: var(--site-shadow-hover) !important; } .interactive-btn, .page-nav-btn, [class*="btn"], button { background-image: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(34,211,238,0.14)); } .interactive-btn:hover, .page-nav-btn:hover, [class*="btn"]:hover, button:hover { border-color: rgba(34,211,238,0.35) !important; background-image: linear-gradient(135deg, rgba(37,99,235,0.32), rgba(34,211,238,0.22)); } input:hover, select:hover, textarea:hover, input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(34,211,238,0.12), 0 14px 30px rgba(2,12,27,0.18) !important; border-color: rgba(34,211,238,0.45) !important; transform: translateY(-1px); } /* Nice reveal animation */ .oai-reveal-ready { opacity: 0; transform: translateY(24px) scale(.985); } .oai-reveal-in { opacity: 1; transform: translateY(0) scale(1); transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); } /* Stronger hover states for FAQ and expandable content */ details, summary { border-radius: 16px; } details:hover summary { color: #ffffff !important; } /* Improve page nav / footer consistency */ .page-nav-btn.active, button.active, .interactive-btn.active { background: var(--site-gradient-active) !important; color: #fff !important; border-color: transparent !important; } /* Avoid motion overload on touch devices */ @media (hover: none), (pointer: coarse) { a:hover, button:hover, summary:hover, .interactive-btn:hover, .page-nav-btn:hover, .results-box:hover, .card:hover, .simulator-card:hover, .eds-package-section:hover, details:hover, .lang-btn:hover, .bubble:hover, [class*="btn"]:hover, [role="button"]:hover, .styled-table tbody tr:hover { transform: none !important; } } /* ---- original style block 7 ---- */ :root { --chain-cyan: #22d3ee; --chain-blue: #2563eb; --chain-deep: #081325; --chain-violet: #7c3aed; } body::before, body::after { content: ""; position: fixed; inset: auto; pointer-events: none; z-index: 0; filter: blur(70px); opacity: .18; } body::before { top: 12vh; left: -6vw; width: 28vw; height: 28vw; background: radial-gradient(circle, rgba(34,211,238,.55), rgba(37,99,235,.15) 45%, transparent 70%); } body::after { right: -8vw; bottom: 10vh; width: 34vw; height: 34vw; background: radial-gradient(circle, rgba(59,130,246,.45), rgba(124,58,237,.14) 48%, transparent 72%); } .page-content, .simulator-container, section, .card, .simulator-card { position: relative; z-index: 1; } /* Keep section spacing clean and consistent */ .page-content > section, .page-content > .simulator-container, .page-content > div > section, .page-content > div > .simulator-container { margin-top: 1.25rem !important; } .page-content > section:first-child, .page-content > .simulator-container:first-child, .page-content > div > section:first-child, .page-content > div > .simulator-container:first-child { margin-top: 0 !important; } .simulator-container { row-gap: 1.25rem !important; } /* Stop large cards from lifting into each other */ .card:hover, .simulator-card:hover, #feeDistributionWrapper:hover { transform: none !important; box-shadow: 0 16px 42px rgba(2,12,27,.30), 0 0 0 1px rgba(56,189,248,.10) !important; } #resultsContainer, #mySavedResultsContainer, #goalPlannerSection, #ecosystemSimulatorSection, .simulator-card, .card { overflow: hidden !important; } /* Fix package section arrows and remove stray overlap */ .eds-package-section { overflow: hidden !important; } .eds-package-section .category-header { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: .9rem !important; padding: .1rem 0 !important; min-height: 56px !important; } .eds-package-section .category-header > div, .eds-package-section .category-header > h4 { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding-right: 0 !important; } .eds-package-section .category-header .eds-section-arrow { position: static !important; transform: none !important; right: auto !important; top: auto !important; margin-left: auto !important; flex: 0 0 42px !important; min-width: 42px !important; width: 42px !important; height: 42px !important; line-height: 1 !important; font-size: 1rem !important; } .eds-package-section.section-collapsed .category-header { margin-bottom: 0 !important; } .eds-package-section .category-content { width: 100% !important; } /* Remove connector-like line between simulator and results columns */ #resultsContainer.results-side .results-side-wrapper, #resultsContainer .results-live-col, #resultsContainer .results-saved-col, #resultsContainer .results-saved-scroll { border: 0 !important; background-image: none !important; box-shadow: none !important; } #resultsContainer .results-live-col::before, #resultsContainer .results-live-col::after, #resultsContainer .results-saved-col::before, #resultsContainer .results-saved-col::after, #resultsContainer .results-side-wrapper::before, #resultsContainer .results-side-wrapper::after { display: none !important; content: none !important; } /* Distribution of fees section polish + layout stability */ #feeDistributionWrapper, .fee-distribution-shell { background: linear-gradient(135deg, rgba(7,18,40,.96), rgba(10,33,63,.96) 46%, rgba(8,56,88,.90)) !important; border: 1px solid rgba(56,189,248,.18) !important; box-shadow: 0 18px 48px rgba(2,12,27,.34), inset 0 1px 0 rgba(255,255,255,.04) !important; } #feeDistributionSection { position: relative; } #feeDistributionSection::before { content: ""; position: absolute; inset: -10px 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,.34), rgba(37,99,235,.26), transparent); } .fee-distribution-grid { align-items: stretch; gap: 1.25rem !important; } .fee-distribution-col, .fee-distribution-chart-col { background: linear-gradient(145deg, rgba(9,24,46,.78), rgba(11,41,72,.72)); border: 1px solid rgba(56,189,248,.12); border-radius: 18px; padding: 1rem; min-height: 100%; } .fee-distribution-table-wrap { width: 100%; overflow: hidden; } .fee-distribution-table { width: 100%; } .fee-distribution-table thead tr, .fee-distribution-table tbody tr { background: transparent !important; } .fee-distribution-table tbody tr { transition: background .24s ease, box-shadow .24s ease, color .24s ease !important; } .fee-distribution-table tbody tr:hover { transform: none !important; background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(34,211,238,.10)) !important; box-shadow: inset 0 0 0 1px rgba(56,189,248,.10); } #feeDistributionChart { max-width: 100%; filter: drop-shadow(0 14px 30px rgba(34,211,238,.14)); } /* Futuristic multichain visual language */ .section-title, .title-text, .egety-nav-link.active, .package-category-header, h1, h2, h3 { text-shadow: 0 0 18px rgba(34,211,238,.08); } .card, .simulator-card, .eds-package-section, .trust-layer-detail-panel, .builder-module-card, .results-box { background-image: linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0) 28%), linear-gradient(145deg, rgba(8,19,37,.96), rgba(11,33,61,.94) 55%, rgba(8,65,96,.86)); backdrop-filter: blur(12px); } .interactive-btn, .page-nav-btn, .egety-nav-cta, button { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(37,99,235,.18); } .styled-table tbody tr:hover, .results-box:hover, .eds-package-section:hover { box-shadow: 0 12px 28px rgba(37,99,235,.14) !important; } /* ---- original style block 8 ---- */ .eds-package-section[data-category="C"], #edsPackageButtonsC { display: none !important; } /* ---- original style block 9 ---- */ /* Agent mode: make the 6 result boxes shorter while keeping pre-hover text larger */ #agentResults .results-box, .agent-results-card.live-simulation-card .results-box { padding: 0.32rem 0.4rem !important; min-height: 72px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 0.12rem !important; } #agentResults .results-box p.text-xs, .agent-results-card.live-simulation-card .results-box .label { font-size: 1.08rem !important; line-height: 1.1 !important; margin: 0 !important; } #agentResults .results-box p.font-bold, .agent-results-card.live-simulation-card .results-box .main-value { font-size: 1.95rem !important; line-height: 1.05 !important; margin: 0 !important; font-weight: 700 !important; } @media (max-width: 767px) { #agentResults .results-box, .agent-results-card.live-simulation-card .results-box { min-height: 64px !important; padding: 0.28rem 0.34rem !important; } #agentResults .results-box p.text-xs, .agent-results-card.live-simulation-card .results-box .label { font-size: 0.96rem !important; } #agentResults .results-box p.font-bold, .agent-results-card.live-simulation-card .results-box .main-value { font-size: 1.65rem !important; } } /* ---- original style block 10 ---- */ /* Page-specific cleanup requested on 13-03-2026 */ /* Make the Trust App photos smaller and cleaner inside both Trust sections */ #trust-app-section > div > div, #trust-app-showcase-section > div > div { align-items: center !important; } #trust-app-section > div > div > div:first-child, #trust-app-showcase-section > div > div > div[style*="order:2"] { max-width: 320px !important; width: 100% !important; margin: 0 auto !important; } #trust-app-section img, #trust-app-showcase-section img { width: 100% !important; min-height: 260px !important; max-height: 320px !important; object-fit: contain !important; margin: 0 auto !important; } /* Keep page 2 focused only on Builder / BDS / PLO content */ body[data-active-page="page2"] #globalFinalCtaSection { display: none !important; } @media (max-width: 900px) { #trust-app-section img, #trust-app-showcase-section img { min-height: 220px !important; max-height: 260px !important; } } /* ---- original style block 11 ---- */ /* Hide the social proof/testimonial strip on pages 2 and 3 */ body[data-active-page="page2"] .social-proof-strip, body[data-active-page="page3"] .social-proof-strip { display: none !important; } /* Hide the “How It Works” section on pages 2 and 3 */ body[data-active-page="page2"] #howitworks-section, body[data-active-page="page3"] #howitworks-section { display: none !important; } /* Hide the trust statistics section (“Why Investors Trust Egety”) on pages 2 and 3 */ body[data-active-page="page2"] #trust-stats-container, body[data-active-page="page3"] #trust-stats-container { display: none !important; } /* Hide the Installment & Insurance section on pages 2 and 3 */ body[data-active-page="page2"] #installmentSection, body[data-active-page="page3"] #installmentSection { display: none !important; } /* Hide the purchase stages & batches and EDS package tiers tables on pages 2 and 3. */ body[data-active-page="page2"] #purchaseStagesTable, body[data-active-page="page3"] #purchaseStagesTable, body[data-active-page="page2"] #packagesTable, body[data-active-page="page3"] #packagesTable, body[data-active-page="page2"] [data-translate="purchase_stages_title"], body[data-active-page="page3"] [data-translate="purchase_stages_title"], body[data-active-page="page2"] [data-translate="packages_title"], body[data-active-page="page3"] [data-translate="packages_title"], body[data-active-page="page2"] #purchaseStageButtons, body[data-active-page="page3"] #purchaseStageButtons, body[data-active-page="page2"] #packageStageButtonsSmall, body[data-active-page="page3"] #packageStageButtonsSmall, body[data-active-page="page2"] #toggleOldBatchVisibilityTable, body[data-active-page="page3"] #toggleOldBatchVisibilityTable { display: none !important; } /* Hide the simulator container, results, saved results and goal planner on pages 2 and 3 */ body[data-active-page="page2"] .simulator-container, body[data-active-page="page3"] .simulator-container, body[data-active-page="page2"] #ecosystemSimulatorSection, body[data-active-page="page3"] #ecosystemSimulatorSection, body[data-active-page="page2"] #resultsContainer, body[data-active-page="page3"] #resultsContainer, body[data-active-page="page2"] #mySavedResultsContainer, body[data-active-page="page3"] #mySavedResultsContainer, body[data-active-page="page2"] #goalPlannerSection, body[data-active-page="page3"] #goalPlannerSection { display: none !important; } /* Reduce the height of images in the Trust App section to make the photo smaller */ #trust-app-section img { max-height: 240px !important; } /* Hide the digital revolution and private label sections on pages 2 and 3 */ body[data-active-page="page2"] #digitalRevolutionSection, body[data-active-page="page3"] #digitalRevolutionSection, body[data-active-page="page2"] #privateLabelsSection, body[data-active-page="page3"] #privateLabelsSection { display: none !important; } /* Hide the Trust & Authority/Founders section on pages 2 and 3 */ body[data-active-page="page2"] #founders-section, body[data-active-page="page3"] #founders-section { display: none !important; } /* Hide the partner logos and FAQ container on pages 2 and 3 */ body[data-active-page="page2"] #partnersAndFaqContainer, body[data-active-page="page3"] #partnersAndFaqContainer { display: none !important; } /* Hide the purchase stages and package tiers section on pages 2 and 3 (to prevent empty cards) */ body[data-active-page="page2"] #purchaseTablesSection, body[data-active-page="page3"] #purchaseTablesSection { display: none !important; } /* Hide the final call-to-action section on page3 (already hidden on page2 above) */ body[data-active-page="page3"] #globalFinalCtaSection { display: none !important; } /* ---- original style block 12 ---- */ /* Final light-theme repair patch: appended last so it defeats prior dark overrides */ body.light-mode { --bg-color: #f4f8ff !important; --text-color: #0f172a !important; --card-bg: rgba(255,255,255,0.96) !important; --border-color: rgba(148, 163, 184, 0.22) !important; --primary-color: #2563eb !important; --accent-color: #0ea5e9 !important; --primary-glow: rgba(37,99,235,0.16) !important; --stat-card-bg: rgba(248,250,252,0.95) !important; --bg-card: rgba(255,255,255,0.96) !important; --bg-page: #f4f8ff !important; --brand-primary: #2563eb !important; --brand-accent: #0ea5e9 !important; --data-primary: #0f172a !important; --data-secondary: #2563eb !important; --text-muted: #64748b !important; --border-subtle: rgba(148,163,184,0.22) !important; --section-grad-start: #f8fbff !important; --section-grad-end: #eaf2ff !important; --section-border: rgba(148,163,184,0.18) !important; --section-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; --site-gradient-main: linear-gradient(180deg, #f8fbff 0%, #eef4ff 52%, #e9f1ff 100%) !important; --site-gradient-soft: linear-gradient(135deg, rgba(248,251,255,0.96), rgba(237,244,255,0.96)) !important; --site-gradient-card: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 60%, rgba(239,246,255,0.98)) !important; --site-gradient-row: linear-gradient(90deg, rgba(248,250,252,0.98), rgba(239,246,255,0.98)) !important; --site-gradient-active: linear-gradient(135deg, #2563eb, #0ea5e9) !important; --site-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; --site-shadow-hover: 0 18px 36px rgba(15,23,42,0.10) !important; color-scheme: light; } body.light-mode, body.light-mode::before, body.light-mode::after { color: #0f172a !important; } body.light-mode { background: radial-gradient(circle at top right, rgba(14,165,233,0.08), transparent 30%), radial-gradient(circle at top left, rgba(37,99,235,0.08), transparent 24%), linear-gradient(180deg, #f8fbff 0%, #eef4ff 52%, #e9f1ff 100%) !important; } body.light-mode #particle-bg, body.light-mode body::before, body.light-mode body::after { opacity: .06 !important; } body.light-mode .card:not(#partnersCard), body.light-mode .simulator-card, body.light-mode .results-box, body.light-mode .stat-card, body.light-mode .how-it-works-item, body.light-mode .hero-r-card, body.light-mode .testi-card, body.light-mode .founder-card-new, body.light-mode .stat-box-new, body.light-mode .footer-redesigned, body.light-mode .page-nav-container, body.light-mode .page-nav-btn, body.light-mode .eds-package-section, body.light-mode .package-category-k, body.light-mode .social-proof-strip, body.light-mode .installment-suggestion-card, body.light-mode .builder-section, body.light-mode .trust-banner-section, body.light-mode .egety-nav, body.light-mode .interactive-btn, body.light-mode .results-layout-btn, body.light-mode #digitalRevolutionSection, body.light-mode #privateLabelsSection, body.light-mode #trust-stats-container, body.light-mode #purchaseTablesSection, body.light-mode #goalPlannerSection, body.light-mode #ecosystemSimulatorSection, body.light-mode #globalFinalCtaSection .final-cta-section { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 60%, rgba(239,246,255,0.98)) !important; color: #0f172a !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; } body.light-mode .page-nav-btn.active, body.light-mode .interactive-btn.active, body.light-mode button.active { background: linear-gradient(135deg, #2563eb, #0ea5e9) !important; color: #ffffff !important; border-color: transparent !important; } body.light-mode .interactive-btn, body.light-mode .results-layout-btn, body.light-mode #toggleOldBatchVisibility, body.light-mode #toggleOldBatchVisibilityTable { color: #0f172a !important; background-image: none !important; } body.light-mode .main-value, body.light-mode .data-primary, body.light-mode .hero-r-metric-value, body.light-mode .stat-num, body.light-mode .title-text, body.light-mode .section-title, body.light-mode .eg-section-title, body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode strong, body.light-mode .founder-row h4, body.light-mode .testi-name, body.light-mode .hero-r-title, body.light-mode .hero-r-title em, body.light-mode .social-proof-strip-label, body.light-mode .eg-section-label, body.light-mode .package-category-header, body.light-mode .results-box .main-value { color: #0f172a !important; } body.light-mode p, body.light-mode span, body.light-mode label, body.light-mode li, body.light-mode .label, body.light-mode .hero-r-subtitle, body.light-mode .hero-r-card-label, body.light-mode .hero-r-card-footer span, body.light-mode .testi-text, body.light-mode .testi-meta, body.light-mode .founder-row p, body.light-mode .stat-lbl, body.light-mode .eg-section-subtitle, body.light-mode .trust-layer-inline-desc, body.light-mode .footer-redesigned .footer-brand-new p, body.light-mode .footer-redesigned .footer-col-new a, body.light-mode .footer-bottom-new, body.light-mode .hero-r-trust-item, body.light-mode .hero-r-metric-label, body.light-mode .hero-r-metric-sub, body.light-mode .results-box .label { color: #475569 !important; } body.light-mode .hero-r-btn-secondary, body.light-mode .page-nav-btn, body.light-mode .results-layout-btn, body.light-mode .egety-nav-settings-btn, body.light-mode .egety-nav-currency, body.light-mode #language-switcher-btn { background: rgba(255,255,255,0.9) !important; color: #0f172a !important; border-color: rgba(148,163,184,0.22) !important; } body.light-mode .egety-nav { background: rgba(248,251,255,0.88) !important; } body.light-mode .egety-nav-link, body.light-mode .egety-nav-logo span, body.light-mode .footer-redesigned .footer-col-new h5, body.light-mode .footer-social-new a { color: #334155 !important; } body.light-mode .footer-social-new a { border-color: rgba(148,163,184,0.22) !important; } body.light-mode .hero-r-metric, body.light-mode .builder-module-card, body.light-mode .trust-icon-card, body.light-mode .builder-coming-soon, body.light-mode .builder-flow-node, body.light-mode .trust-layer-detail-point, body.light-mode .installment-card-header, body.light-mode #goalPlannerResultsContainer .stat-card { background: rgba(239,246,255,0.8) !important; border-color: rgba(147,197,253,0.24) !important; color: #0f172a !important; } body.light-mode #bds-section > div, body.light-mode #builder-showcase-section > div, body.light-mode #plo-banner-section > div, body.light-mode #trust-app-section > div, body.light-mode #trust-app-showcase-section > div { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 60%, rgba(239,246,255,0.98)) !important; color: #0f172a !important; border: 1px solid rgba(148,163,184,0.22) !important; box-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; } body.light-mode #bds-section > div [style*="rgba(255,255,255,0.03)"], body.light-mode #builder-showcase-section > div [style*="rgba(255,255,255,.035)"], body.light-mode #plo-banner-section > div [style*="rgba(255,255,255,0.03)"], body.light-mode #trust-app-section > div [style*="rgba(255,255,255,0.03)"], body.light-mode #trust-app-showcase-section > div [style*="rgba(255,255,255,.035)"], body.light-mode #plo-banner-section > div [style*="background:rgba(15,23,42,0.9)"], body.light-mode #trust-app-section > div [style*="background:rgba(6,182,212,0.06)"], body.light-mode #plo-banner-section > div [style*="background:rgba(6,182,212,0.06)"], body.light-mode #bds-section > div [style*="background:rgba(59,130,246,0.15)"], body.light-mode #plo-banner-section > div [style*="background:rgba(59,130,246,0.15)"], body.light-mode #trust-app-section > div [style*="background:rgba(6,182,212,0.15)"], body.light-mode #builder-showcase-section > div [style*="background:rgba(255,255,255,.04)"], body.light-mode #trust-app-section > div [style*="background:rgba(255,255,255,0.04)"], body.light-mode #trust-app-showcase-section > div [style*="background:rgba(255,255,255,.04)"] { background: rgba(239,246,255,0.78) !important; color: #0f172a !important; border-color: rgba(147,197,253,0.24) !important; box-shadow: none !important; } body.light-mode #bds-section h2, body.light-mode #bds-section h3, body.light-mode #bds-section h4, body.light-mode #builder-showcase-section h2, body.light-mode #builder-showcase-section h3, body.light-mode #builder-showcase-section h4, body.light-mode #plo-banner-section h2, body.light-mode #plo-banner-section h3, body.light-mode #plo-banner-section h4, body.light-mode #trust-app-section h2, body.light-mode #trust-app-section h3, body.light-mode #trust-app-section h4, body.light-mode #trust-app-showcase-section h2, body.light-mode #trust-app-showcase-section h3, body.light-mode #trust-app-showcase-section h4, body.light-mode #bds-section [style*="color:#f1f5f9"], body.light-mode #bds-section [style*="color:#e2e8f0"], body.light-mode #builder-showcase-section [style*="color:#f8fbff"], body.light-mode #builder-showcase-section [style*="color:#eaf4ff"], body.light-mode #plo-banner-section [style*="color:#f1f5f9"], body.light-mode #plo-banner-section [style*="color:#e2e8f0"], body.light-mode #trust-app-section [style*="color:#f1f5f9"], body.light-mode #trust-app-section [style*="color:#e2e8f0"], body.light-mode #trust-app-showcase-section [style*="color:#f8fbff"], body.light-mode #trust-app-showcase-section [style*="color:#eaf4ff"] { color: #0f172a !important; } body.light-mode #bds-section p, body.light-mode #bds-section span, body.light-mode #builder-showcase-section p, body.light-mode #builder-showcase-section span, body.light-mode #plo-banner-section p, body.light-mode #plo-banner-section span, body.light-mode #trust-app-section p, body.light-mode #trust-app-section span, body.light-mode #trust-app-showcase-section p, body.light-mode #trust-app-showcase-section span, body.light-mode #bds-section [style*="color:#94a3b8"], body.light-mode #bds-section [style*="color:#cbd5e1"], body.light-mode #builder-showcase-section [style*="color:#c1d3e6"], body.light-mode #builder-showcase-section [style*="color:#7dd3fc"], body.light-mode #plo-banner-section [style*="color:#94a3b8"], body.light-mode #plo-banner-section [style*="color:#cbd5e1"], body.light-mode #trust-app-section [style*="color:#94a3b8"], body.light-mode #trust-app-section [style*="color:#cbd5e1"], body.light-mode #trust-app-showcase-section [style*="color:#c1d3e6"], body.light-mode #trust-app-showcase-section [style*="color:#7dd3fc"] { color: #475569 !important; } body.light-mode .trust-layer, body.light-mode .trust-layer.trust-layer-selected, body.light-mode .trust-layer.trust-layer-active, body.light-mode .trust-layer-inline { background: rgba(239,246,255,0.7) !important; border-left-color: rgba(14,165,233,0.45) !important; color: #0f172a !important; } body.light-mode .trust-layer-num { background: rgba(37,99,235,0.12) !important; color: #2563eb !important; } body.light-mode .trust-layer-detail-panel { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 60%, rgba(239,246,255,0.98)) !important; border-color: rgba(147,197,253,0.24) !important; box-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; } body.light-mode .trust-layer-detail-panel::before { background: radial-gradient(circle at top right, rgba(34,211,238,.08), transparent 34%), radial-gradient(circle at bottom left, rgba(59,130,246,.06), transparent 28%) !important; } body.light-mode .trust-layer-detail-title, body.light-mode .trust-layer-title, body.light-mode .trust-layer-detail-badge, body.light-mode .trust-layer-detail-point { color: #0f172a !important; } body.light-mode .trust-layer-detail-text, body.light-mode .trust-layer-inline-desc { color: #475569 !important; } body.light-mode .trust-layer-detail-badge { background: rgba(14,165,233,0.10) !important; border-color: rgba(14,165,233,0.18) !important; } body.light-mode .styled-table { background: rgba(255,255,255,0.96) !important; color: #0f172a !important; } body.light-mode .styled-table thead tr { background: linear-gradient(135deg, #2563eb, #0ea5e9) !important; color: #ffffff !important; } body.light-mode .styled-table tbody tr, body.light-mode tr, body.light-mode .table-row { color: #0f172a !important; } body.light-mode .styled-table tbody tr:nth-child(odd) { background: rgba(248,250,252,0.98) !important; } body.light-mode .styled-table tbody tr:nth-child(even) { background: rgba(239,246,255,0.98) !important; } body.light-mode .styled-table tbody tr:hover { background: rgba(219,234,254,0.9) !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,0.18) !important; } body.light-mode input, body.light-mode select, body.light-mode textarea, body.light-mode .number-input, body.light-mode .goal-planner-select, body.light-mode .form-modal-input, body.light-mode #whatsappPopup, body.light-mode #whatsappPopup textarea { background: rgba(255,255,255,0.96) !important; color: #0f172a !important; border-color: rgba(148,163,184,0.22) !important; } body.light-mode .form-modal-input::placeholder, body.light-mode input::placeholder, body.light-mode textarea::placeholder { color: #94a3b8 !important; opacity: 1 !important; } body.light-mode .package-info-bar { background-color: rgba(226,232,240,0.85) !important; } body.light-mode .package-info-bar .eds-info, body.light-mode .package-info-bar .multiplier-info { color: #0f172a !important; } body.light-mode .info-tooltip { background-color: #ffffff !important; color: #0f172a !important; border: 1px solid rgba(148,163,184,0.22) !important; box-shadow: 0 10px 24px rgba(15,23,42,0.12) !important; } body.light-mode #partnersCard, body.light-mode #partnersCard * { color: #e2e8f0; } body.light-mode #partnersCard { background: linear-gradient(145deg, rgba(15,23,42,0.96), rgba(30,41,59,0.96)) !important; border-color: rgba(71,85,105,0.45) !important; } /* ---- original style block 13 ---- */ /* Final fix: selected controls use white text, text chips stay transparent, and fee distribution becomes fully light in light mode. */ /* Remove any accidental text backgrounds/chips inside stage/package buttons */ #purchaseStageButtons button span, #packageStageButtonsSmall .interactive-btn, #edsPackageButtons .interactive-btn span, #edsPackageButtons .interactive-btn .multiplier-info, #edsPackageButtons .interactive-btn .eds-info, #edsPackageButtons .interactive-btn .btn-subtext, .package-info-bar, .package-info-bar > span, .multiplier-info, .eds-info { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } /* Keep selected/active control text white everywhere */ .interactive-btn.active, .interactive-btn.active *, .page-nav-btn.active, .page-nav-btn.active *, #purchaseStageButtons button.active, #purchaseStageButtons button.active *, #packageStageButtonsSmall .interactive-btn.active, #packageStageButtonsSmall .interactive-btn.active *, #edsPackageButtons .interactive-btn.active, #edsPackageButtons .interactive-btn.active *, #agentTimeframeButtons button.active, #agentTimeframeButtons button.active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Preserve readable muted text on non-selected controls */ body.light-mode #purchaseStageButtons button:not(.active) .btn-subtext, body.light-mode #edsPackageButtons .interactive-btn:not(.active) .btn-subtext, body.light-mode #edsPackageButtons .interactive-btn:not(.active) .eds-info { color: #64748b !important; -webkit-text-fill-color: #64748b !important; } body.light-mode #edsPackageButtons .interactive-btn:not(.active) .multiplier-info { color: #0ea5e9 !important; -webkit-text-fill-color: #0ea5e9 !important; } /* Make the fee distribution section truly light in light mode */ body.light-mode #feeDistributionWrapper, body.light-mode #feeDistributionSection, body.light-mode .fee-distribution-shell, body.light-mode .fee-distribution-col, body.light-mode .fee-distribution-chart-col, body.light-mode .fee-distribution-table-wrap { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 60%, rgba(239,246,255,0.98)) !important; color: #0f172a !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; } body.light-mode #feeDistributionSection::before { background: linear-gradient(90deg, transparent, rgba(14,165,233,0.28), rgba(37,99,235,0.22), transparent) !important; } body.light-mode .fee-distribution-table, body.light-mode .fee-distribution-table th, body.light-mode .fee-distribution-table td, body.light-mode .fee-distribution-table tbody tr, body.light-mode .fee-distribution-table tbody tr td, body.light-mode .fee-distribution-table thead tr, body.light-mode .fee-distribution-table thead th { background: transparent !important; color: #0f172a !important; border-color: rgba(148,163,184,0.22) !important; } body.light-mode .fee-distribution-table thead tr { border-bottom-color: rgba(148,163,184,0.32) !important; } body.light-mode .fee-distribution-table tbody tr:hover { background: rgba(219,234,254,0.65) !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,0.16) !important; } /* Ensure the fee distribution title is dark in light mode */ body.light-mode #feeDistributionSection h3, body.light-mode #feeDistributionSection h3 *, body.light-mode #feeDistributionWrapper h3, body.light-mode #feeDistributionWrapper h3 * { color: #0f172a !important; } /* ---- original style block 14 ---- */ /* Force Save & Compare button text/icons to stay white in light mode */ body.light-mode #saveSimulationBtn, body.light-mode #saveSimulationBtn span, body.light-mode #saveSimulationBtn i, body.light-mode #saveSimulationBtn *, body.light-mode button#saveSimulationBtn, body.light-mode button#saveSimulationBtn:hover, body.light-mode button#saveSimulationBtn:focus, body.light-mode button#saveSimulationBtn:active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- original style block 15 ---- */ /* Force these CTA buttons to use white text/icons in light mode */ body.light-mode #launchAppBtn, body.light-mode #launchAppBtn *, body.light-mode #privateLabelsSection .link-btn, body.light-mode #privateLabelsSection .link-btn *, body.light-mode a.link-btn, body.light-mode a.link-btn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Remove any background chip/box behind the WhatsApp popup close X */ #whatsappPopup .close-btn, #whatsappPopup .close-btn:hover, #whatsappPopup .close-btn:focus, #whatsappPopup .close-btn:active { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important; padding: 0 !important; border-radius: 0 !important; } body.light-mode #whatsappPopup .close-btn, body.light-mode #whatsappPopup .close-btn:hover, body.light-mode #whatsappPopup .close-btn:focus, body.light-mode #whatsappPopup .close-btn:active { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* ---- original style block 16 ---- */ /* Final override: keep the two blue CTA buttons white in light mode */ body.light-mode #privateLabelsSection a.link-btn, body.light-mode #privateLabelsSection a.link-btn span, body.light-mode #privateLabelsSection a.link-btn i, body.light-mode #privateLabelsSection a.link-btn *, body.light-mode a#launchAppBtn, body.light-mode a#launchAppBtn span, body.light-mode a#launchAppBtn i, body.light-mode a#launchAppBtn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- original style block 17 ---- */ #egetyPriceBubble, #batchBubble, #whitePaperBubble { width: auto; min-width: 0; max-width: calc(100vw - 40px); padding: 12px 16px !important; border-radius: 18px !important; } #egetyPriceBubble .bubble-flipper, #batchBubble .bubble-flipper, #whitePaperBubble .bubble-flipper { width: 100%; height: 24px; } #egetyPriceBubble .bubble-front, #egetyPriceBubble .bubble-back, #batchBubble .bubble-front, #batchBubble .bubble-back, #whitePaperBubble .bubble-front, #whitePaperBubble .bubble-back { position: absolute !important; width: 100% !important; height: 100% !important; justify-content: flex-start !important; align-items: center !important; text-align: left !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; gap: 10px !important; } #egetyPriceBubble .logo, #egetyPriceBubble .bubble-line-icon, #batchBubble .bubble-front i, #batchBubble .bubble-back i, #whitePaperBubble .bubble-front i, #whitePaperBubble .bubble-back i { flex: 0 0 auto; } #egetyPriceBubble .bubble-line-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; font-weight: 700; color: var(--accent-color); } #egetyPriceBubble .bubble-line-icon .logo { width: 18px; height: 18px; } #egetyPriceText, #eaiPriceText, #batchBubbleText, #totalEdsText, #whitePaperBubbleText, #whitePaperBubbleTextBack { display: block; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2; font-size: 0.84rem; } #bigLiveDataBubble { min-width: 340px; max-width: 380px; } #bigLiveDataBubble .live-data-group-title { color: var(--accent-color); font-weight: 700; margin: 6px 0 4px; } #bigLiveDataBubble .live-data-line { font-size: 0.86rem; margin: 2px 0; } /* ---- original style block 18 ---- */ .staking-page-shell { display: grid; gap: 1rem; } .staking-simulator-card, .staking-packages-card { position: relative; overflow: hidden; border-radius: 22px; background: linear-gradient(145deg, rgba(8,20,40,0.96), rgba(12,34,58,0.94) 55%, rgba(8,74,106,0.82)); border: 1px solid rgba(56,189,248,0.18); box-shadow: 0 18px 42px rgba(2,12,27,0.32); } .staking-simulator-card::before, .staking-packages-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(34,211,238,0.14), transparent 30%), radial-gradient(circle at bottom left, rgba(59,130,246,0.10), transparent 28%); pointer-events: none; } .staking-simulator-card > *, .staking-packages-card > * { position: relative; z-index: 1; } .staking-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: end; margin-top: 1.1rem; } .staking-display-field { min-height: 58px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); padding: .8rem .95rem; display: flex; flex-direction: column; justify-content: center; gap: .18rem; } .staking-display-field .primary { font-size: 1rem; font-weight: 800; color: #f8fbff; line-height: 1.2; } .staking-display-field .secondary { font-size: .78rem; color: #9fb3c8; line-height: 1.35; } .staking-note { margin-top: 1rem; border-left: 4px solid var(--accent-color); background: rgba(56,189,248,.08); border-radius: 14px; padding: .9rem 1rem; color: #c1d3e6; font-size: .88rem; line-height: 1.75; } .staking-year-mix-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .95rem; margin-top: 1.15rem; } .staking-year-mix-card { border-radius: 18px; padding: .9rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .staking-year-mix-head { display: flex; justify-content: space-between; align-items: center; gap: .55rem; margin-bottom: .45rem; } .staking-year-mix-title { font-size: .9rem; font-weight: 800; color: #f8fbff; } .staking-year-mix-value { font-size: .82rem; font-weight: 800; color: #67e8f9; white-space: nowrap; } .staking-mix-slider { width: 100%; height: 10px; appearance: none; border-radius: 999px; background: linear-gradient(90deg, rgba(34,211,238,.9) 0%, rgba(37,99,235,.92) 100%); outline: none; margin-top: .2rem; } .staking-mix-slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #f8fbff; border: 2px solid rgba(37,99,235,.95); box-shadow: 0 6px 16px rgba(2,12,27,.35); cursor: pointer; } .staking-mix-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #f8fbff; border: 2px solid rgba(37,99,235,.95); box-shadow: 0 6px 16px rgba(2,12,27,.35); cursor: pointer; } .staking-year-mix-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .55rem; font-size: .74rem; color: #9fb3c8; gap: .5rem; } .staking-year-mix-foot strong { color: #f8fbff; } .staking-results-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .staking-metric { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 1rem; } .staking-metric .metric-label { font-size: .74rem; color: #9fb3c8; margin-bottom: .28rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .staking-metric .metric-value { font-size: 1.28rem; font-weight: 800; color: #f8fbff; line-height: 1.18; } .staking-metric .metric-sub { font-size: .78rem; color: #9fb3c8; margin-top: .3rem; line-height: 1.45; } .staking-chart-card { margin-top: 1rem; padding: 1rem; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .staking-chart-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .7rem; flex-wrap: wrap; } .staking-chart-head h3 { font-size: 1rem !important; margin-bottom: .25rem; color: #f8fbff; font-weight: 800; } .staking-chart-head p { color: #9fb3c8; font-size: .82rem; line-height: 1.55; margin: 0; } .staking-chart-wrap { position: relative; width: 100%; height: 320px; } .staking-table-wrap { margin-top: 1rem; overflow-x: auto; border-radius: 18px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); } .staking-table { width: 100%; min-width: 980px; border-collapse: collapse; } .staking-table thead tr { background: linear-gradient(135deg, #2563eb, #06b6d4); color: #fff; } .staking-table th, .staking-table td { padding: .8rem .78rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle; } .staking-table th:first-child, .staking-table td:first-child { text-align: left; } .staking-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.025); } .staking-table tbody tr:nth-child(even) { background: rgba(255,255,255,.045); } .staking-table tbody tr:hover { background: rgba(34,211,238,.08); } .staking-table .table-strong { color: #f8fbff; font-weight: 800; } .staking-plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .staking-plan-card { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 1rem; min-height: 104px; } .staking-plan-card img { width: 76px; height: 76px; border-radius: 18px; object-fit: cover; flex: 0 0 auto; background: rgba(255,255,255,.05); } .staking-plan-copy { min-width: 0; flex: 1 1 auto; } .staking-plan-copy .plan-name { font-size: .98rem; color: #f8fbff; font-weight: 800; line-height: 1.25; } .staking-plan-copy .plan-desc { font-size: .78rem; color: #94a3b8; margin-top: .2rem; line-height: 1.55; } .staking-plan-prices { text-align: right; flex: 0 0 auto; } .staking-plan-prices .plan-price { font-size: 1rem; font-weight: 800; color: #f8fbff; line-height: 1.2; } .staking-plan-prices .plan-price-sub { font-size: .76rem; color: #9fb3c8; margin-top: .18rem; line-height: 1.35; } .staking-package-select { position: relative; } .staking-package-button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: .85rem; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); padding: .75rem .9rem; color: #f8fbff; cursor: pointer; text-align: left; } .staking-package-button:hover { border-color: rgba(34,211,238,.26); box-shadow: 0 14px 28px rgba(2,12,27,.18); transform: translateY(-1px); } .staking-package-left { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1 1 auto; } .staking-package-left img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; background: rgba(255,255,255,.05); } .staking-package-meta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; gap: .12rem; flex: 1 1 auto; } .staking-package-name { display: block; font-size: .92rem; font-weight: 800; color: #f8fbff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .staking-package-sub { display: block; font-size: .86rem; font-weight: 700; color: #9fb3c8; margin-top: .12rem; line-height: 1.25; white-space: nowrap; } .staking-package-price { margin-left: auto; text-align: right; font-size: .86rem; font-weight: 800; color: #f8fbff; line-height: 1.2; white-space: nowrap; flex: 0 0 auto; } .staking-package-arrow { color: #9fb3c8; font-size: .82rem; flex: 0 0 auto; } .staking-package-menu { position: absolute; top: calc(100% + .45rem); left: 0; right: 0; max-height: 360px; overflow-y: auto; border-radius: 18px; border: 1px solid rgba(56,189,248,.18); background: linear-gradient(145deg, rgba(8,20,40,.98), rgba(12,34,58,.96)); box-shadow: 0 18px 40px rgba(2,12,27,.34); z-index: 130; padding: .45rem; } .staking-package-option { width: 100%; border: 0; background: transparent; color: inherit; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .72rem .78rem; border-radius: 14px; text-align: left; cursor: pointer; } .staking-package-option:hover, .staking-package-option.is-active { background: rgba(34,211,238,.10); } .staking-package-option .staking-package-left img { width: 40px; height: 40px; border-radius: 12px; } .staking-package-option .staking-package-name { font-size: .90rem; } .staking-package-option .staking-package-sub { font-size: .92rem; } .staking-package-option .staking-package-price { font-size: .82rem; } body.light-mode .staking-simulator-card, body.light-mode .staking-packages-card { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 60%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; } body.light-mode .staking-display-field, body.light-mode .staking-year-mix-card, body.light-mode .staking-metric, body.light-mode .staking-chart-card, body.light-mode .staking-plan-card, body.light-mode .staking-package-button, body.light-mode .staking-package-menu, body.light-mode .staking-table-wrap { background: rgba(255,255,255,0.9) !important; border-color: rgba(148,163,184,0.22) !important; color: #0f172a !important; } body.light-mode .staking-note { color: #334155 !important; } body.light-mode .staking-display-field .primary, body.light-mode .staking-metric .metric-value, body.light-mode .staking-year-mix-title, body.light-mode .staking-package-name, body.light-mode .staking-package-price, body.light-mode .staking-plan-copy .plan-name, body.light-mode .staking-plan-prices .plan-price, body.light-mode .staking-chart-head h3, body.light-mode .staking-table .table-strong { color: #0f172a !important; } body.light-mode .staking-display-field .secondary, body.light-mode .staking-metric .metric-label, body.light-mode .staking-metric .metric-sub, body.light-mode .staking-year-mix-foot, body.light-mode .staking-package-sub, body.light-mode .staking-plan-copy .plan-desc, body.light-mode .staking-plan-prices .plan-price-sub, body.light-mode .staking-chart-head p { color: #475569 !important; } body.light-mode .staking-table tbody tr:nth-child(odd) { background: rgba(248,250,252,0.98) !important; } body.light-mode .staking-table tbody tr:nth-child(even) { background: rgba(239,246,255,0.98) !important; } body.light-mode .staking-table tbody tr:hover { background: rgba(219,234,254,0.72) !important; } body.light-mode #page4 .staking-simulator-card p[style], body.light-mode #page4 .staking-packages-card p[style] { color: #475569 !important; } body.light-mode #page4 .staking-simulator-card h2[style], body.light-mode #page4 .staking-packages-card h2[style], body.light-mode #page4 .staking-simulator-card h3[style] { color: #0f172a !important; } @media (max-width: 1180px) { .staking-control-grid, .staking-results-grid, .staking-year-mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .staking-plan-list { grid-template-columns: 1fr; } } @media (max-width: 640px) { .egety-nav-page-btn i { display: inline-block !important; } } @media (max-width: 768px) { .staking-control-grid, .staking-results-grid, .staking-year-mix-grid, .staking-plan-list { grid-template-columns: 1fr; } .staking-chart-wrap { height: 280px; } .staking-plan-card { min-height: 0; align-items: flex-start; } } /* ---- original style block 19 ---- */ .staking-chip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } .staking-chip { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: .9rem; text-align: center; } .staking-chip .value { display: block; font-size: 1.12rem; font-weight: 800; color: #f8fbff; line-height: 1.2; } .staking-chip .label { display: block; font-size: .78rem; color: #9fb3c8; margin-top: .2rem; line-height: 1.45; } .staking-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .staking-info-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 1.1rem; } .staking-info-card h3 { margin-bottom: .55rem; font-size: 1.02rem !important; font-weight: 800; color: #f8fbff; } .staking-info-card p { color: #c1d3e6; line-height: 1.75; font-size: .88rem; } .staking-info-card ul { margin-top: .75rem; padding-left: 1rem; color: #9fb3c8; line-height: 1.8; font-size: .83rem; } .staking-chart-summary { min-width: 170px; display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: .72rem .95rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); } .staking-chart-summary .summary-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9fb3c8; font-weight: 700; } .staking-chart-summary .summary-value { font-size: 1.28rem; font-weight: 800; color: #f8fbff; line-height: 1.2; margin-top: .12rem; } body.light-mode .staking-chip, body.light-mode .staking-info-card, body.light-mode .staking-chart-summary { background: rgba(255,255,255,0.92) !important; border-color: rgba(148,163,184,0.22) !important; color: #0f172a !important; } body.light-mode .staking-chip .value, body.light-mode .staking-info-card h3, body.light-mode .staking-chart-summary .summary-value { color: #0f172a !important; } body.light-mode .staking-chip .label, body.light-mode .staking-info-card p, body.light-mode .staking-info-card ul, body.light-mode .staking-chart-summary .summary-label { color: #475569 !important; } @media (max-width: 1100px) { .staking-chip-grid, .staking-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .staking-chip-grid, .staking-info-grid { grid-template-columns: 1fr; } .staking-chart-summary { width: 100%; align-items: flex-start; } } /* Keep the extra non-staking sections hidden only while page 4 is active, so the full EDS page content remains available again on page 1. */ body[data-active-page="page4"] .social-proof-strip, body[data-active-page="page4"] #digitalRevolutionSection, body[data-active-page="page4"] #howitworks-section, body[data-active-page="page4"] #privateLabelsSection, body[data-active-page="page4"] #trust-stats-container, body[data-active-page="page4"] #installmentSection, body[data-active-page="page4"] #purchaseTablesSection, body[data-active-page="page4"] .simulator-container, body[data-active-page="page4"] #founders-section, body[data-active-page="page4"] #partnersAndFaqContainer, body[data-active-page="page4"] #feeDistributionWrapper { display: none !important; } /* Hide navigation links that point to removed sections */ #egetyNavLinks a[href="#howitworks-section"], #egetyNavLinks a[href="#ecosystemSimulatorSection"], #egetyNavLinks a[href="#founders-section"], #egetyNavLinks a[href="#faqTabs"] { display: none !important; } /* ---- original style block 20 ---- */ .staking-page-shell { display: grid; gap: 1.2rem; } .staking-section-block { width: 100%; } .staking-story-card, .staking-simulator-card, .staking-packages-card { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(145deg, rgba(8,20,40,0.96), rgba(12,34,58,0.94) 55%, rgba(8,74,106,0.82)); border: 1px solid rgba(56,189,248,0.18); box-shadow: 0 18px 42px rgba(2,12,27,0.32); } .staking-story-card::before, .staking-simulator-card::before, .staking-packages-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(34,211,238,0.12), transparent 30%), radial-gradient(circle at bottom left, rgba(59,130,246,0.10), transparent 28%); pointer-events: none; } .staking-story-card > *, .staking-simulator-card > *, .staking-packages-card > * { position: relative; z-index: 1; } .staking-story-card:hover, .staking-simulator-card:hover, .staking-packages-card:hover { box-shadow: 0 18px 42px rgba(2,12,27,0.32) !important; } .staking-story-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .staking-story-title { margin-bottom: .35rem; color: #f8fbff !important; } .staking-story-copy { max-width: 900px; font-size: .92rem; line-height: 1.8; color: #c1d3e6; margin: 0; } .staking-story-badge-wrap { display: flex; align-items: stretch; gap: .8rem; } .staking-live-badge { min-width: 180px; padding: .9rem 1rem; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; justify-content: center; gap: .2rem; } .staking-live-badge.alt { min-width: 220px; } .badge-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9fb3c8; font-weight: 700; } .badge-value { font-size: 1.08rem; color: #f8fbff; font-weight: 800; line-height: 1.2; } .staking-story-grid { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr); gap: 1.25rem; align-items: stretch; } .staking-plan-grid { grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr); } .staking-orb-panel, .staking-plan-visual-panel, .staking-story-panel { min-width: 0; } .staking-coin-orb-shell { position: relative; min-height: 340px; border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; } .staking-orb-ring { position: absolute; border-radius: 999px; border: 1px solid rgba(125,211,252,.22); animation: stakingSpin 16s linear infinite; } .staking-orb-ring.ring-1 { width: 240px; height: 240px; } .staking-orb-ring.ring-2 { width: 310px; height: 310px; border-style: dashed; animation-direction: reverse; animation-duration: 21s; } .staking-orb-core { width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.32), rgba(56,189,248,.20) 26%, rgba(37,99,235,.92) 72%); box-shadow: 0 22px 48px rgba(2,12,27,.42), inset 0 1px 18px rgba(255,255,255,.20); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; transform-style: preserve-3d; animation: stakingFloat 5.8s ease-in-out infinite; } .orb-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .88; font-weight: 700; } .orb-title { font-size: 2rem; font-weight: 900; line-height: 1.05; margin-top: .18rem; } .staking-orbit-chip { position: absolute; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border-radius: 999px; background: rgba(8,20,40,.72); border: 1px solid rgba(125,211,252,.22); color: #eaf4ff; font-size: .76rem; font-weight: 700; box-shadow: 0 12px 24px rgba(2,12,27,.22); backdrop-filter: blur(10px); animation: stakingFloatChip 6.2s ease-in-out infinite; } .staking-orbit-chip i { color: #67e8f9; } .staking-orbit-chip.chip-a { top: 38px; left: 40px; } .staking-orbit-chip.chip-b { top: 70px; right: 26px; animation-delay: .6s; } .staking-orbit-chip.chip-c { bottom: 82px; left: 24px; animation-delay: 1.1s; } .staking-orbit-chip.chip-d { bottom: 38px; right: 48px; animation-delay: 1.6s; } .staking-stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: .95rem; } .staking-mini-stat, .staking-feature-card, .staking-flow-card, .staking-live-card, .staking-detail-surface, .staking-chart-summary { transform-style: preserve-3d; transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease, background .26s ease; } .staking-mini-stat, .staking-feature-card, .staking-live-card { border-radius: 18px; padding: .95rem 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .staking-fx-card:hover, .staking-feature-card:hover, .staking-flow-card:hover, .staking-live-card:hover, .staking-mini-stat:hover, .staking-detail-surface:hover { transform: translateY(-6px) scale(1.01) !important; box-shadow: 0 24px 38px rgba(2,12,27,.30) !important; border-color: rgba(103,232,249,.28); background: rgba(255,255,255,.07); } .mini-label, .live-card-label, .staking-detail-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9fb3c8; font-weight: 700; display: block; } .mini-value, .live-card-value { display: block; font-size: 1.05rem; color: #f8fbff; font-weight: 800; line-height: 1.22; margin-top: .2rem; } .staking-story-panel { display: flex; flex-direction: column; gap: .95rem; } .staking-tab-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } .staking-tab-btn { min-height: 64px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: #cfe4f5; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem; font-size: .76rem; font-weight: 700; text-align: center; padding: .8rem .65rem; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease; } .staking-tab-btn i { font-size: 1rem; color: #67e8f9; } .staking-tab-btn:hover { transform: translateY(-4px); box-shadow: 0 18px 30px rgba(2,12,27,.22); border-color: rgba(103,232,249,.26); } .staking-tab-btn.is-active { background: linear-gradient(135deg, rgba(37,99,235,.78), rgba(6,182,212,.82)); border-color: transparent; color: #fff; box-shadow: 0 18px 30px rgba(37,99,235,.22); } .staking-tab-btn.is-active i { color: #fff; } .staking-detail-surface { border-radius: 22px; padding: 1.1rem 1.15rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .staking-detail-surface h3 { font-size: 1.12rem !important; font-weight: 800; color: #f8fbff; margin: .35rem 0 .5rem; } .staking-detail-surface p { color: #c1d3e6; font-size: .88rem; line-height: 1.8; margin: 0; } .staking-detail-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; } .staking-detail-point { display: flex; align-items: flex-start; gap: .6rem; padding: .78rem .82rem; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: #eaf4ff; font-size: .81rem; line-height: 1.55; } .staking-detail-point i { color: #67e8f9; margin-top: .16rem; } .staking-feature-grid, .staking-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; } .staking-feature-card { display: flex; align-items: flex-start; gap: .75rem; } .staking-feature-card i { color: #67e8f9; font-size: 1.12rem; margin-top: .15rem; } .staking-feature-card h4, .staking-flow-card h4 { font-size: .92rem; color: #f8fbff; font-weight: 800; margin: 0 0 .15rem; } .staking-feature-card p, .staking-flow-card p, .live-card-sub { font-size: .78rem; color: #9fb3c8; line-height: 1.6; margin: 0; } .staking-flow-stack { display: grid; gap: .7rem; } .staking-flow-card { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .flow-icon { width: 52px; height: 52px; border-radius: 18px; background: linear-gradient(135deg, rgba(37,99,235,.76), rgba(6,182,212,.82)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: 0 0 auto; box-shadow: 0 16px 28px rgba(37,99,235,.22); } .flow-step { display: inline-block; font-size: .7rem; color: #67e8f9; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; } .staking-flow-arrow { text-align: center; color: rgba(103,232,249,.7); font-size: .9rem; } .staking-live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .staking-live-card { display: flex; flex-direction: column; gap: .18rem; } .staking-live-card .live-card-sub { margin-top: .18rem; } .staking-section-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; } @keyframes stakingFloat { 0%, 100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); } 50% { transform: translateY(-10px) rotateX(4deg) rotateY(-4deg); } } @keyframes stakingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes stakingFloatChip { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-7px); } } body.light-mode .staking-story-card, body.light-mode .staking-simulator-card, body.light-mode .staking-packages-card { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 60%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; } body.light-mode .staking-story-title, body.light-mode .badge-value, body.light-mode .orb-title, body.light-mode .mini-value, body.light-mode .staking-detail-surface h3, body.light-mode .staking-feature-card h4, body.light-mode .staking-flow-card h4, body.light-mode .live-card-value, body.light-mode .staking-tab-btn, body.light-mode .staking-package-name, body.light-mode .staking-package-price, body.light-mode .staking-flow-card, body.light-mode .staking-orbit-chip, body.light-mode .staking-detail-point { color: #0f172a !important; } body.light-mode .staking-story-copy, body.light-mode .badge-label, body.light-mode .staking-feature-card p, body.light-mode .staking-flow-card p, body.light-mode .live-card-sub, body.light-mode .mini-label, body.light-mode .staking-detail-surface p, body.light-mode .staking-detail-eyebrow, body.light-mode .staking-story-card .eg-section-label { color: #475569 !important; } body.light-mode .staking-live-badge, body.light-mode .staking-mini-stat, body.light-mode .staking-feature-card, body.light-mode .staking-flow-card, body.light-mode .staking-live-card, body.light-mode .staking-detail-surface, body.light-mode .staking-coin-orb-shell, body.light-mode .staking-tab-btn, body.light-mode .staking-orbit-chip { background: rgba(255,255,255,0.88) !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 10px 26px rgba(15,23,42,0.06) !important; } body.light-mode .staking-tab-btn.is-active { background: linear-gradient(135deg, #2563eb, #0ea5e9) !important; color: #fff !important; } body.light-mode .staking-tab-btn.is-active i { color: #fff !important; } @media (max-width: 1180px) { .staking-story-grid, .staking-plan-grid, .staking-live-grid { grid-template-columns: 1fr 1fr; } .staking-story-grid > .staking-story-panel, .staking-plan-grid > .staking-story-panel { grid-column: 1 / -1; } .staking-tab-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .staking-story-grid, .staking-plan-grid, .staking-detail-points, .staking-feature-grid, .staking-live-grid, .staking-stat-strip { grid-template-columns: 1fr; } .staking-story-badge-wrap { width: 100%; } .staking-live-badge, .staking-live-badge.alt { width: 100%; min-width: 0; } } @media (max-width: 640px) { .staking-coin-orb-shell { min-height: 300px; } .staking-orb-core { width: 150px; height: 150px; } .staking-orb-ring.ring-1 { width: 210px; height: 210px; } .staking-orb-ring.ring-2 { width: 270px; height: 270px; } .staking-orbit-chip.chip-a { top: 26px; left: 16px; } .staking-orbit-chip.chip-b { top: 58px; right: 12px; } .staking-orbit-chip.chip-c { bottom: 74px; left: 14px; } .staking-orbit-chip.chip-d { bottom: 24px; right: 18px; } } /* ---- original style block 21 ---- */ /* Fix staking package dropdown layering, solid surfaces, and selection reliability */ .staking-simulator-card { overflow: visible !important; } .staking-package-select { z-index: 600 !important; isolation: isolate; } .staking-package-button { min-height: 58px !important; height: 58px !important; background: linear-gradient(145deg, rgba(10,24,44,0.96), rgba(12,34,58,0.94)) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 10px 24px rgba(2,12,27,.18); } .staking-package-menu { z-index: 2600 !important; background: linear-gradient(145deg, rgba(7,18,36,0.99), rgba(11,31,55,0.98) 56%, rgba(8,68,96,0.94)) !important; border: 1px solid rgba(56,189,248,.24) !important; box-shadow: 0 22px 46px rgba(2,12,27,.42) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .staking-package-option { background: rgba(9,24,46,0.92) !important; border: 1px solid rgba(255,255,255,.06); margin-bottom: .42rem; } .staking-package-option:last-child { margin-bottom: 0; } .staking-package-option:hover, .staking-package-option.is-active { background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(34,211,238,.18)) !important; border-color: rgba(103,232,249,.28); } /* Match purchase phase height to the package field */ #stakingPhaseSelect.staking-phase-select { min-height: 58px !important; height: 58px !important; padding: 0 .95rem !important; line-height: 1.2 !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(10,24,44,0.96), rgba(12,34,58,0.94)) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #f8fbff !important; appearance: none; -webkit-appearance: none; box-shadow: 0 10px 24px rgba(2,12,27,.18); } #stakingPhaseSelect.staking-phase-select option { background: #0b1f38; color: #f8fbff; } /* Reduce motion in the first staking section only */ .staking-coin-card .staking-orb-ring.ring-1 { animation-duration: 24s !important; } .staking-coin-card .staking-orb-ring.ring-2 { animation-duration: 32s !important; } .staking-coin-card .staking-orb-core { animation: stakingFloatSoft 9s ease-in-out infinite !important; } .staking-coin-card .staking-orbit-chip { animation: stakingFloatChipSoft 9s ease-in-out infinite !important; } .staking-coin-card .staking-fx-card:hover, .staking-coin-card .staking-orbit-chip:hover, .staking-coin-card .staking-tab-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 24px rgba(2,12,27,.20) !important; } @keyframes stakingFloatSoft { 0%, 100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); } 50% { transform: translateY(-4px) rotateX(1.2deg) rotateY(-1.2deg); } } @keyframes stakingFloatChipSoft { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-3px); } } body.light-mode .staking-package-button, body.light-mode #stakingPhaseSelect.staking-phase-select { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 60%, rgba(239,246,255,0.98)) !important; color: #0f172a !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 10px 24px rgba(15,23,42,.08) !important; } body.light-mode .staking-package-menu { background: linear-gradient(145deg, rgba(255,255,255,0.99), rgba(248,250,252,0.99) 60%, rgba(239,246,255,0.99)) !important; border-color: rgba(148,163,184,0.24) !important; box-shadow: 0 18px 34px rgba(15,23,42,.12) !important; } body.light-mode #stakingPhaseSelect.staking-phase-select option { background: #ffffff; color: #0f172a; } body.light-mode .staking-package-option { background: rgba(255,255,255,0.96) !important; border-color: rgba(148,163,184,0.16) !important; } body.light-mode .staking-package-option:hover, body.light-mode .staking-package-option.is-active { background: rgba(219,234,254,0.72) !important; border-color: rgba(96,165,250,0.24) !important; } /* ---- original style block 22 ---- */ /* Final hard fix for the staking package dropdown on page 4 */ #page4, #page4 .staking-page-shell, #page4 .staking-section-block, #page4 .card, #page4 .staking-story-card, #page4 .staking-simulator-card, #page4 .staking-packages-card, #page4 .staking-package-select { overflow: visible !important; } #page4 .staking-simulator-card, #page4 .staking-package-select { position: relative !important; z-index: 1200 !important; } #page4 #stakingPackageButton { background: #0b1f38 !important; background-image: none !important; opacity: 1 !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 14px 30px rgba(2,12,27,0.20) !important; } #page4 #stakingPackageMenu { position: fixed !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 99999 !important; width: 320px; max-width: calc(100vw - 32px); background: #08192d !important; background-image: none !important; opacity: 1 !important; border: 1px solid rgba(56,189,248,0.26) !important; box-shadow: 0 26px 48px rgba(2,12,27,0.42) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #page4 #stakingPackageMenu.hidden { display: none !important; } #page4 #stakingPackageMenu .staking-package-option { background: #0d243f !important; background-image: none !important; opacity: 1 !important; border: 1px solid rgba(255,255,255,0.06) !important; pointer-events: auto !important; position: relative !important; z-index: 2 !important; } #page4 #stakingPackageMenu .staking-package-option:hover, #page4 #stakingPackageMenu .staking-package-option.is-active { background: #123157 !important; background-image: none !important; border-color: rgba(103,232,249,0.30) !important; } /* Keep the trigger content non-interactive so the button itself receives the event, but allow the dropdown option contents to receive normal pointer events. */ #page4 #stakingPackageButton * { pointer-events: none; } #page4 #stakingPackageMenu .staking-package-option, #page4 #stakingPackageMenu .staking-package-option * { pointer-events: auto !important; } #page4 #stakingPackageMenu .staking-package-option { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body.light-mode #page4 #stakingPackageButton { background: #ffffff !important; background-image: none !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 14px 28px rgba(15,23,42,0.08) !important; } body.light-mode #page4 #stakingPackageMenu { background: #ffffff !important; background-image: none !important; border-color: rgba(148,163,184,0.24) !important; box-shadow: 0 22px 36px rgba(15,23,42,0.12) !important; } body.light-mode #page4 #stakingPackageMenu .staking-package-option { background: #ffffff !important; background-image: none !important; border-color: rgba(148,163,184,0.16) !important; } body.light-mode #page4 #stakingPackageMenu .staking-package-option:hover, body.light-mode #page4 #stakingPackageMenu .staking-package-option.is-active { background: #dbeafe !important; background-image: none !important; border-color: rgba(96,165,250,0.24) !important; } /* ---- original style block 23 ---- */ .egety-nav-links { display: flex; align-items: center; gap: 0.75rem !important; } .egety-nav-page-btn { min-width: auto !important; padding: 0.6rem 1.2rem !important; border-radius: 10px !important; border: 2px solid var(--border-color) !important; background: var(--card-bg) !important; color: var(--text-color) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: none !important; text-decoration: none !important; } .egety-nav-page-btn i { font-size: 0.92rem !important; } .egety-nav-page-btn:hover { transform: translateY(-2px) !important; border-color: var(--primary-color) !important; color: var(--text-color) !important; background: var(--card-bg) !important; box-shadow: 0 4px 15px rgba(59,130,246,0.20) !important; } .egety-nav-page-btn.active { background: linear-gradient(135deg, var(--primary-color), #06b6d4) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 4px 20px rgba(59,130,246,0.30) !important; } .egety-nav-page-btn.active i, .egety-nav-page-btn.active span { color: #ffffff !important; } #stakingPackageMenu { position: fixed !important; z-index: 99999 !important; width: 320px; max-width: calc(100vw - 32px); background: #08192d !important; background-image: none !important; opacity: 1 !important; border: 1px solid rgba(56,189,248,0.26) !important; box-shadow: 0 26px 48px rgba(2,12,27,0.42) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: auto !important; } #stakingPackageMenu.hidden { display: none !important; } #stakingPackageMenu .staking-package-option { background: #0d243f !important; background-image: none !important; opacity: 1 !important; border: 1px solid rgba(255,255,255,0.06) !important; pointer-events: auto !important; position: relative !important; z-index: 2 !important; user-select: none; -webkit-user-select: none; touch-action: manipulation; } #stakingPackageMenu .staking-package-option:hover, #stakingPackageMenu .staking-package-option.is-active { background: #123157 !important; background-image: none !important; border-color: rgba(103,232,249,0.30) !important; } body.light-mode #stakingPackageMenu { background: #ffffff !important; background-image: none !important; border-color: rgba(148,163,184,0.24) !important; box-shadow: 0 22px 36px rgba(15,23,42,0.12) !important; } body.light-mode #stakingPackageMenu .staking-package-option { background: #ffffff !important; background-image: none !important; border-color: rgba(148,163,184,0.16) !important; } body.light-mode #stakingPackageMenu .staking-package-option:hover, body.light-mode #stakingPackageMenu .staking-package-option.is-active { background: #dbeafe !important; background-image: none !important; border-color: rgba(96,165,250,0.24) !important; } @media (max-width: 768px) { .egety-nav-links.nav-mobile-open { gap: 0.75rem !important; } .egety-nav-page-btn { width: 100% !important; justify-content: flex-start !important; } } /* ---- original style block 24 ---- */ .staking-fee-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .staking-fee-card { display: flex; align-items: center; justify-content: space-between; gap: .9rem; border-radius: 18px; padding: 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .staking-fee-card-copy { min-width: 0; display: flex; flex-direction: column; gap: .18rem; } .staking-fee-card .fee-title { display: block; font-size: .82rem; font-weight: 800; color: #f8fbff; line-height: 1.25; } .staking-fee-card .fee-desc { display: block; font-size: .76rem; color: #9fb3c8; line-height: 1.55; } .staking-fee-summary-card { align-items: flex-start; flex-direction: column; justify-content: center; } .staking-fee-summary-card .fee-value { display: block; font-size: 1.12rem; font-weight: 800; color: #f8fbff; line-height: 1.2; margin-top: .18rem; } .staking-fee-toggle-control { flex: 0 0 auto; margin-left: auto; } body.light-mode .staking-fee-card { background: rgba(255,255,255,0.92) !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 10px 24px rgba(15,23,42,.06) !important; } body.light-mode .staking-fee-card .fee-title, body.light-mode .staking-fee-summary-card .fee-value { color: #0f172a !important; } body.light-mode .staking-fee-card .fee-desc { color: #475569 !important; } @media (max-width: 1180px) { .staking-fee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .staking-fee-grid { grid-template-columns: 1fr; } } /* ---- original style block 25 ---- */ /* Allow per-card tilt on the staking page — match other pages' motion */ #page4 .card.staking-story-card, #page4 .card.staking-simulator-card, #page4 .card.staking-packages-card { transition: transform .32s cubic-bezier(0.22,1,0.36,1), box-shadow .28s ease, border-color .28s ease, background .28s ease !important; will-change: transform !important; } body.light-mode #page4 .card.staking-story-card:hover, body.light-mode #page4 .card.staking-simulator-card:hover, body.light-mode #page4 .card.staking-packages-card:hover, body.light-mode #page4 .staking-section-block:hover .card.staking-story-card, body.light-mode #page4 .staking-section-block:hover .card.staking-simulator-card, body.light-mode #page4 .staking-section-block:hover .card.staking-packages-card { box-shadow: 0 10px 26px rgba(15,23,42,0.07) !important; } /* ---- original style block 26 ---- */ /* Allow per-card tilt — parent section-block stays flat */ #page4 .staking-section-block { transform: none !important; will-change: auto !important; perspective: none !important; } /* Custom phase dropdown */ .staking-phase-select-wrap { position: relative; z-index: 610; } .staking-phase-select { display: none !important; } .staking-phase-button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: .85rem; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: #0b1f38 !important; padding: .75rem .9rem; color: #f8fbff; cursor: pointer; text-align: left; box-shadow: 0 14px 30px rgba(2,12,27,0.20); } .staking-phase-button:hover { border-color: rgba(103,232,249,.28); box-shadow: 0 18px 34px rgba(2,12,27,0.26); } .staking-phase-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1 1 auto; gap: .14rem; } .staking-phase-name { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 800; line-height: 1.2; color: #f8fbff; } .staking-phase-sub { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .80rem; font-weight: 700; line-height: 1.25; color: #9fb3c8; } .staking-phase-arrow { color: #9fb3c8; font-size: .82rem; flex: 0 0 auto; } .staking-phase-menu { position: fixed !important; z-index: 99999 !important; width: 340px; max-width: calc(100vw - 32px); max-height: 360px; overflow-y: auto; padding: .45rem; border-radius: 18px; background: #08192d !important; border: 1px solid rgba(56,189,248,0.26) !important; box-shadow: 0 26px 48px rgba(2,12,27,0.42) !important; } .staking-phase-menu.hidden { display: none !important; } .staking-phase-option, #stakingPackageMenu .staking-package-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border-radius: 14px; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .staking-phase-option { padding: .78rem .82rem; margin-bottom: .42rem; border: 1px solid rgba(255,255,255,0.06) !important; background: #0d243f !important; color: #f8fbff; } .staking-phase-option:last-child { margin-bottom: 0; } .staking-phase-option-mark, .staking-package-option-mark { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: transparent; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: .72rem; } .staking-phase-option:hover, .staking-phase-option.is-active, #stakingPackageMenu .staking-package-option:hover, #stakingPackageMenu .staking-package-option.is-active { background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(34,211,238,.20)) !important; border-color: rgba(103,232,249,.34) !important; box-shadow: inset 0 0 0 1px rgba(103,232,249,.10), 0 14px 24px rgba(2,12,27,.18); } .staking-phase-option.is-active .staking-phase-name, .staking-phase-option.is-active .staking-phase-sub, #stakingPackageMenu .staking-package-option.is-active .staking-package-name, #stakingPackageMenu .staking-package-option.is-active .staking-package-sub, #stakingPackageMenu .staking-package-option.is-active .staking-package-price { color: #ffffff !important; } .staking-phase-option.is-active .staking-phase-option-mark, #stakingPackageMenu .staking-package-option.is-active .staking-package-option-mark { color: #ffffff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); } #stakingPackageMenu .staking-package-option .staking-package-meta, .staking-phase-option .staking-phase-meta { min-width: 0; flex: 1 1 auto; } body.light-mode .staking-phase-button { background: #ffffff !important; color: #0f172a !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 14px 28px rgba(15,23,42,0.08) !important; } body.light-mode .staking-phase-name { color: #0f172a !important; } body.light-mode .staking-phase-sub, body.light-mode .staking-phase-arrow { color: #475569 !important; } body.light-mode .staking-phase-menu { background: #ffffff !important; border-color: rgba(148,163,184,0.24) !important; box-shadow: 0 22px 36px rgba(15,23,42,0.12) !important; } body.light-mode .staking-phase-option, body.light-mode #stakingPackageMenu .staking-package-option { background: #ffffff !important; color: #0f172a !important; border-color: rgba(148,163,184,0.16) !important; } body.light-mode .staking-phase-option:hover, body.light-mode .staking-phase-option.is-active, body.light-mode #stakingPackageMenu .staking-package-option:hover, body.light-mode #stakingPackageMenu .staking-package-option.is-active { background: #dbeafe !important; border-color: rgba(96,165,250,0.28) !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,.08), 0 12px 22px rgba(15,23,42,.08); } body.light-mode .staking-phase-option.is-active .staking-phase-name, body.light-mode .staking-phase-option.is-active .staking-phase-sub, body.light-mode #stakingPackageMenu .staking-package-option.is-active .staking-package-name, body.light-mode #stakingPackageMenu .staking-package-option.is-active .staking-package-sub, body.light-mode #stakingPackageMenu .staking-package-option.is-active .staking-package-price { color: #0f172a !important; } body.light-mode .staking-phase-option-mark, body.light-mode .staking-package-option-mark { background: rgba(239,246,255,.95); border-color: rgba(148,163,184,.18); } body.light-mode .staking-phase-option.is-active .staking-phase-option-mark, body.light-mode #stakingPackageMenu .staking-package-option.is-active .staking-package-option-mark { color: #2563eb; background: rgba(219,234,254,.95); border-color: rgba(96,165,250,.24); } /* ---- original style block 27 ---- */ #stakingDropdownPortal { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2147483646; pointer-events: none; overflow: visible !important; isolation: isolate; contain: none !important; } #stakingDropdownPortal .staking-phase-menu, #stakingDropdownPortal .staking-package-menu { position: fixed !important; top: 0; left: 0; right: auto !important; bottom: auto !important; z-index: 2147483647 !important; pointer-events: auto !important; transform: none !important; filter: none !important; opacity: 1 !important; margin: 0 !important; contain: layout style paint; } body.staking-dropdown-open, body.staking-dropdown-open #page4, body.staking-dropdown-open #page4 .staking-page-shell, body.staking-dropdown-open #page4 .staking-section-block, body.staking-dropdown-open #page4 .staking-simulator-card, body.staking-dropdown-open #page4 .staking-packages-card, body.staking-dropdown-open #page4 .staking-control-grid, body.staking-dropdown-open #page4 .staking-year-mix-grid, body.staking-dropdown-open #page4 .staking-chart-card, body.staking-dropdown-open #page4 .card { overflow: visible !important; } body.staking-dropdown-open #page4 .staking-story-card, body.staking-dropdown-open #page4 .staking-simulator-card, body.staking-dropdown-open #page4 .staking-packages-card, body.staking-dropdown-open #page4 .staking-section-block { z-index: auto !important; } /* ---- original style block 28 ---- */ /* ─── Staking tilt isolation (comprehensive) ─── 1. Shell wrapper: no perspective, no 3D, no transforms 2. Section blocks: flat, no transforms 3. Cards: JS handles tilt via style.transform !important 4. Override the global .card:hover CSS so it doesn't fight JS */ #page4 .staking-page-shell, #page4 .staking-section-block { perspective: none !important; transform: none !important; transform-style: flat !important; will-change: auto !important; } #page4 .staking-section-block:hover, #page4 .staking-page-shell:hover { transform: none !important; } /* Let JS own the transform on staking cards — disable CSS hover transform */ #page4 .card.staking-story-card, #page4 .card.staking-simulator-card, #page4 .card.staking-packages-card { transform-style: flat !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; transition: transform .32s cubic-bezier(0.22,1,0.36,1), box-shadow .28s ease, border-color .28s ease, background .28s ease !important; } #page4 .card.staking-story-card:hover, #page4 .card.staking-simulator-card:hover, #page4 .card.staking-packages-card:hover { /* Remove the global .card:hover translateY/scale — JS sets transform directly */ transform: unset !important; } /* ---- original style block 29 ---- */ #edsInvestorSection { display: none !important; } #ecosystemSimulatorSection, #edsPackageSelectWrap, #edsReleaseSelectWrap, #edsBatchSelectWrap { overflow: visible !important; } .eds-simulator-select-grid { grid-template-columns: 1fr !important; gap: 0.95rem !important; } .eds-simulator-select-field, .eds-simulator-select-field .staking-package-select, .eds-simulator-select-field .staking-phase-select-wrap { width: 100%; } #edsPackageMenu, #edsReleaseMenu, #edsBatchMenu { position: absolute !important; top: calc(100% + 0.45rem) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; z-index: 9999 !important; } #edsPlannerProjectionRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } #edsPlannerProjectionRow > section { height: 100%; } #goalPlannerSection, #earningsProjectionSection { order: initial !important; } .goal-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; } .goal-package-card { overflow: hidden; } .goal-package-body { gap: 0.7rem; } .goal-package-image-wrap { position: relative; width: 100%; height: 140px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 0.75rem; } .goal-package-image { width: 100%; height: 100%; object-fit: cover; display: block; } .goal-package-name { font-size: 1.05rem; font-weight: 800; color: #f8fbff; line-height: 1.25; } .goal-package-grade { font-size: 0.82rem; color: #9fb3c8; line-height: 1.55; margin-top: 0.2rem; } body.light-mode .goal-package-image-wrap { background: rgba(255,255,255,0.92) !important; border-color: rgba(148,163,184,0.22) !important; } body.light-mode .goal-package-name { color: #0f172a !important; } body.light-mode .goal-package-grade { color: #475569 !important; } @media (max-width: 1180px) { #edsPlannerProjectionRow, .goal-package-grid { grid-template-columns: 1fr; } } /* ---- original style block 30 ---- */ /* Bring floating ecosystem UI above the Installment & Insurance section */ #egetyPriceBubble, #batchBubble, #whitePaperBubble, #bigLiveDataBubble, #livePriceDot, .whatsapp-icon, #whatsappPopup { z-index: 30050 !important; } /* Keep selected EDS package price slightly higher to align with package title */ #edsPackageButtonPrice { align-self: flex-start !important; margin-top: -0.14rem !important; line-height: 1.15 !important; } /* Small polish for dropdown option prices too */ #edsPackageMenu .staking-package-option .staking-package-price { margin-top: -0.14rem !important; } /* ---- original style block 31 ---- */ /* Match hero width with the rest of the page on wide screens */ #hero-redesigned .hero-redesigned-inner { width: 100%; max-width: 80rem !important; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* Keep the planner and projection row full width and evenly split */ #edsPlannerProjectionRow { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; } #edsPlannerProjectionRow > section { width: 100%; min-width: 0; margin: 0 !important; } /* Remove the lower copyright footer line */ p[data-translate="footer_text"] { display: none !important; } /* General responsive hardening */ .page-content, .simulator-container, #partnersAndFaqContainer, #edsSelectionControls, #resultsContainer, #mySavedResultsContainer, .footer-redesigned, .footer-redesigned-inner { min-width: 0; } img, iframe, canvas, video { max-width: 100%; } .styled-table, .staking-table { width: 100%; } @media (max-width: 1279px) { #hero-redesigned .hero-redesigned-inner { max-width: 100% !important; } } @media (max-width: 1024px) { #hero-redesigned { padding-top: 0.25rem; padding-bottom: 1.25rem; } #hero-redesigned .hero-redesigned-inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; align-items: stretch; } .hero-r-content, .hero-r-visual { max-width: 100% !important; } .footer-redesigned-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.25rem !important; } } @media (max-width: 820px) { #edsPlannerProjectionRow { grid-template-columns: 1fr !important; } #goalPlannerSection, #earningsProjectionSection { width: 100% !important; } .goal-package-grid, .eds-investor-summary-grid, .staking-chip-grid, .staking-info-grid, .staking-results-grid, .staking-year-mix-grid, .staking-fee-grid, .staking-plan-list, .staking-feature-grid, .staking-live-grid, .staking-detail-points, .builder-module-grid, .trust-icon-grid, .testimonial-row, .founders-grid, .stat-grid-new, .ecosystem-video-card, #partnersAndFaqContainer { grid-template-columns: 1fr !important; } .page-nav-container, .egety-nav-links.nav-mobile-open { gap: 0.5rem !important; } } @media (max-width: 640px) { main.relative.min-h-screen { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } #hero-redesigned .hero-redesigned-inner { padding-left: 0.75rem; padding-right: 0.75rem; } .hero-r-actions { flex-direction: column; align-items: stretch; } .hero-r-btn-primary, .hero-r-btn-secondary { width: 100%; justify-content: center; } .hero-r-card { padding: 1rem; } .hero-r-metric-grid, .eds-investor-summary-grid, .goal-package-grid, .staking-control-grid, .staking-results-grid, .staking-year-mix-grid, .staking-plan-list, .staking-feature-grid, .staking-live-grid, .staking-detail-points, .staking-fee-grid, .builder-module-grid, .trust-icon-grid, .testimonial-row, .stat-grid-new, .footer-redesigned-inner { grid-template-columns: 1fr !important; } .footer-bottom-new { flex-direction: column !important; gap: 0.35rem !important; text-align: center; } .sticky-bubble, #whatsappPopup, #bigLiveDataBubble { max-width: calc(100vw - 24px) !important; } } /* ---- original style block 32 ---- */ /* Final layout repair: hero width, 50/50 planner/projection row, responsive hardening, and footer cleanup */ #hero-redesigned { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; } #hero-redesigned .hero-redesigned-inner { width: 100%; max-width: 80rem !important; margin-left: auto; margin-right: auto; padding-left: 1rem !important; padding-right: 1rem !important; } /* Keep the planner + projection in a true full-width desktop row */ #edsPlannerProjectionRow { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 1rem !important; align-items: stretch !important; grid-column: 1 / -1 !important; } #edsPlannerProjectionRow > section, #edsPlannerProjectionRow > .card, #goalPlannerSection, #earningsProjectionSection { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; height: 100% !important; order: initial !important; } /* Remove the lower footer strip entirely */ .footer-bottom-new { display: flex !important; } /* General responsive hardening for major sections */ .page-content, .simulator-container, #partnersAndFaqContainer, #edsSelectionControls, #resultsContainer, #mySavedResultsContainer, .footer-redesigned, .footer-redesigned-inner, .hero-redesigned-inner, .founders-grid, .testimonial-row, .stat-grid-new, .ecosystem-video-card, .builder-module-grid, .trust-icon-grid, .staking-plan-list, .staking-chip-grid, .staking-info-grid, .staking-results-grid, .staking-year-mix-grid, .staking-fee-grid, .staking-feature-grid, .staking-live-grid, .staking-detail-points, .goal-package-grid, .eds-investor-summary-grid { min-width: 0; } .card, .simulator-card, .staking-story-card, .staking-simulator-card, .staking-packages-card, .hero-r-card, .testi-card, .founder-card-new, .stat-box-new, .results-box, .installment-suggestion-card, .builder-section, .trust-banner-section { max-width: 100%; } img, iframe, canvas, video, table { max-width: 100%; } .styled-table, .staking-table { width: 100%; } @media (max-width: 1279px) { #hero-redesigned, #hero-redesigned .hero-redesigned-inner { max-width: 100% !important; } } @media (max-width: 1024px) { #hero-redesigned { padding-top: 0.25rem; padding-bottom: 1.25rem; } #hero-redesigned .hero-redesigned-inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; align-items: stretch !important; } .hero-r-content, .hero-r-visual { max-width: 100% !important; } #edsPlannerProjectionRow { grid-template-columns: 1fr !important; } .footer-redesigned-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.25rem !important; } } @media (max-width: 820px) { .goal-package-grid, .eds-investor-summary-grid, .staking-chip-grid, .staking-info-grid, .staking-results-grid, .staking-year-mix-grid, .staking-fee-grid, .staking-plan-list, .staking-feature-grid, .staking-live-grid, .staking-detail-points, .builder-module-grid, .trust-icon-grid, .testimonial-row, .founders-grid, .stat-grid-new, .ecosystem-video-card, #partnersAndFaqContainer { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { main.relative.min-h-screen { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } #hero-redesigned .hero-redesigned-inner { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .hero-r-actions { flex-direction: column !important; align-items: stretch !important; } .hero-r-btn-primary, .hero-r-btn-secondary { width: 100% !important; justify-content: center !important; } .hero-r-card { padding: 1rem !important; } .hero-r-metric-grid, .eds-investor-summary-grid, .goal-package-grid, .staking-control-grid, .staking-results-grid, .staking-year-mix-grid, .staking-plan-list, .staking-feature-grid, .staking-live-grid, .staking-detail-points, .staking-fee-grid, .builder-module-grid, .trust-icon-grid, .testimonial-row, .stat-grid-new, .footer-redesigned-inner { grid-template-columns: 1fr !important; } .footer-bottom-new { display: flex !important; } .sticky-bubble, #whatsappPopup, #bigLiveDataBubble { max-width: calc(100vw - 24px) !important; } } /* ---- original style block 33 ---- */ /* Match EDS hero width with the standard site content width */ #hero-redesigned { width: 100% !important; max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; } #hero-redesigned .hero-redesigned-inner { width: 100% !important; max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1rem !important; padding-right: 1rem !important; } /* Force Goal Planner + Earnings Projection into a real 50/50 full-width row on desktop */ #edsPlannerProjectionRow { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 1rem !important; align-items: stretch !important; grid-column: 1 / -1 !important; } #edsPlannerProjectionRow > section, #edsPlannerProjectionRow > .card, #goalPlannerSection, #earningsProjectionSection { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; height: 100% !important; order: initial !important; } /* Mobile + tablet: keep the 4 page buttons visible in the sticky header as a horizontal scroll strip */ @media (max-width: 1024px) { .egety-nav { overflow: visible !important; } .egety-nav-inner { max-width: 80rem !important; height: auto !important; min-height: 64px !important; flex-wrap: wrap !important; align-items: center !important; row-gap: 0.65rem !important; padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .egety-nav-links, .egety-nav-links.nav-mobile-open { display: flex !important; order: 3 !important; width: 100% !important; flex-wrap: nowrap !important; gap: 0.65rem !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; padding: 0.05rem 0 0.15rem !important; margin: 0 !important; background: transparent !important; border: 0 !important; position: static !important; left: auto !important; right: auto !important; top: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .egety-nav-links::-webkit-scrollbar { display: none !important; } .egety-nav-page-btn { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; white-space: nowrap !important; scroll-snap-align: start; } .egety-mobile-toggle { display: none !important; } .egety-nav-links.oai-nav-hint { animation: oaiNavScrollHint 1.8s ease-in-out 1; } } @media (max-width: 820px) { #edsPlannerProjectionRow { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { #hero-redesigned .hero-redesigned-inner { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } @keyframes oaiNavScrollHint { 0% { transform: translateX(0); } 28% { transform: translateX(-22px); } 56% { transform: translateX(0); } 100% { transform: translateX(0); } } /* ---- original style block 34 ---- */ /* Final fix: keep Simulator Breakdown full-width above the planner/projection row, and make Goal Planner + Earnings Projection a true 50/50 full-width row. */ #simulatorBreakdownSection { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; } #edsPlannerProjectionRow { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; align-items: stretch !important; } #edsPlannerProjectionRow > section, #edsPlannerProjectionRow > .card, #goalPlannerSection, #earningsProjectionSection { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; height: 100% !important; } @media (max-width: 1024px) { #edsPlannerProjectionRow { grid-template-columns: 1fr !important; } } /* ---- original style block 35 ---- */ /* Keep theme toggle and currency selector visible in tablet and mobile header */ @media (max-width: 1024px) { .egety-nav-theme-toggle, .egety-nav-currency { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto !important; } .egety-nav-currency { min-width: 72px !important; height: 36px !important; padding: 0 0.75rem !important; background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; border-radius: 10px !important; } .egety-nav-theme-toggle { width: 46px !important; height: 28px !important; flex-shrink: 0 !important; } .egety-nav-inner > div:last-child { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin-left: auto !important; flex: 0 0 auto !important; min-width: 0 !important; max-width: 100% !important; } .egety-nav-cta { flex: 0 0 auto !important; white-space: nowrap !important; padding: 10px 16px !important; } } @media (max-width: 768px) { .egety-nav-inner { row-gap: 0.55rem !important; } .egety-nav-logo span { font-size: 1.2rem !important; } .egety-nav-currency { min-width: 66px !important; height: 34px !important; padding: 0 0.6rem !important; font-size: 0.72rem !important; } .egety-nav-theme-toggle { width: 42px !important; height: 26px !important; } .egety-nav-cta { padding: 9px 14px !important; font-size: 0.82rem !important; } } @media (max-width: 420px) { .egety-nav-inner > div:last-child { gap: 0.4rem !important; } .egety-nav-cta { padding: 8px 12px !important; font-size: 0.78rem !important; } .egety-nav-currency { min-width: 60px !important; padding: 0 0.5rem !important; } } /* ---- original style block 36 ---- */ /* Mobile/tablet header: keep theme + currency directly beside the logo */ @media (max-width: 1024px) { .egety-nav-inner { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) !important; align-items: center !important; column-gap: 0.55rem !important; row-gap: 0.65rem !important; height: auto !important; min-height: 64px !important; padding: 0.7rem 0.85rem !important; max-width: 80rem !important; } .egety-nav-logo { grid-column: 1 !important; min-width: 0 !important; margin-right: 0 !important; gap: 0.5rem !important; } .egety-nav-inner > div:last-child { grid-column: 2 !important; justify-self: start !important; margin-left: 0 !important; display: flex !important; align-items: center !important; gap: 0.45rem !important; flex-wrap: nowrap !important; min-width: 0 !important; max-width: 100% !important; } .egety-nav-inner > div:last-child .language-switcher-pill, .egety-nav-inner > div:last-child .egety-mobile-toggle, .egety-nav-inner > div:last-child .egety-nav-cta { display: none !important; } .egety-nav-theme-toggle, .egety-nav-currency { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto !important; } .egety-nav-theme-toggle { width: 44px !important; height: 26px !important; } .egety-nav-currency { min-width: 74px !important; max-width: 92px !important; width: auto !important; height: 34px !important; padding: 0 0.65rem !important; margin-right: 0 !important; border-radius: 10px !important; } .egety-nav-links, .egety-nav-links.nav-mobile-open { grid-column: 1 / -1 !important; order: unset !important; width: 100% !important; margin: 0 !important; } } @media (max-width: 768px) { .egety-nav-inner { padding: 0.65rem 0.75rem 0.7rem !important; column-gap: 0.5rem !important; } .egety-nav-logo img { width: 28px !important; height: 28px !important; } .egety-nav-logo span { font-size: 1.12rem !important; } .egety-nav-theme-toggle { width: 42px !important; height: 26px !important; } .egety-nav-currency { min-width: 70px !important; max-width: 86px !important; font-size: 0.7rem !important; padding: 0 0.55rem !important; } } @media (max-width: 420px) { .egety-nav-inner { padding-left: 0.7rem !important; padding-right: 0.7rem !important; column-gap: 0.42rem !important; } .egety-nav-logo span { font-size: 1.04rem !important; } .egety-nav-currency { min-width: 68px !important; max-width: 80px !important; } } /* Builder page mobile overlap repair */ @media (max-width: 1024px) { #bds-section > div > div > div:last-child, #builder-showcase-section > div > div { grid-template-columns: 1fr !important; } #bds-section > div > div > div:last-child > div:first-child, #builder-showcase-section > div > div > div:first-child > div:last-child { grid-template-columns: 1fr !important; } #bds-section > div > div > div:last-child > div:first-child > div, #builder-showcase-section > div > div > div:first-child > div:last-child > div { width: 100% !important; min-width: 0 !important; } #bds-section > div > div > div:last-child > div:first-child > div, #builder-showcase-section > div > div > div:first-child > div:last-child > div, #bds-section > div > div > div:last-child > div:first-child > div > div { overflow-wrap: anywhere !important; word-break: normal !important; } } @media (max-width: 640px) { #bds-section > div, #builder-showcase-section > div { padding: 1.15rem !important; border-radius: 18px !important; } #bds-section h2, #builder-showcase-section h3 { font-size: 1.2rem !important; line-height: 1.28 !important; } #bds-section p, #builder-showcase-section p, #bds-section h4, #builder-showcase-section h4 { max-width: 100% !important; } #bds-section p, #builder-showcase-section p { font-size: 0.84rem !important; line-height: 1.65 !important; } } /* Staking page mobile/tablet responsiveness */ @media (max-width: 1024px) { #page4 { overflow-x: hidden !important; } #page4 .staking-story-header, #page4 .staking-section-topbar { flex-direction: column !important; align-items: stretch !important; } #page4 .staking-story-badge-wrap, #page4 .staking-live-badge, #page4 .staking-live-badge.alt { width: 100% !important; min-width: 0 !important; } #page4 .staking-story-grid, #page4 .staking-plan-grid, #page4 .staking-feature-grid, #page4 .staking-live-grid, #page4 .staking-detail-points, #page4 .staking-stat-strip, #page4 .staking-control-grid, #page4 .staking-results-grid, #page4 .staking-year-mix-grid, #page4 .staking-plan-list, #page4 .staking-fee-grid { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { #page4 .staking-page-shell { gap: 0.9rem !important; } #page4 .staking-section-block { width: 100% !important; min-width: 0 !important; } #page4 .card.staking-story-card, #page4 .card.staking-simulator-card, #page4 .card.staking-packages-card { padding: 1rem !important; border-radius: 22px !important; } #page4 .staking-story-copy, #page4 .staking-simulator-card p, #page4 .staking-packages-card p, #page4 .staking-detail-surface p, #page4 .staking-note { font-size: 0.84rem !important; line-height: 1.65 !important; } #page4 .staking-tab-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.55rem !important; } #page4 .staking-tab-btn { min-height: 54px !important; padding: 0.72rem 0.5rem !important; font-size: 0.72rem !important; } #page4 .staking-coin-orb-shell { min-height: 260px !important; padding: 0.9rem !important; } #page4 .staking-orb-core { width: 130px !important; height: 130px !important; } #page4 .orb-title { font-size: 1.55rem !important; } #page4 .staking-orb-ring.ring-1 { width: 180px !important; height: 180px !important; } #page4 .staking-orb-ring.ring-2 { width: 230px !important; height: 230px !important; } #page4 .staking-orbit-chip { padding: 0.42rem 0.58rem !important; gap: 0.3rem !important; font-size: 0.66rem !important; } #page4 .staking-orbit-chip span { white-space: nowrap !important; } #page4 .staking-orbit-chip.chip-a { top: 14px !important; left: 12px !important; } #page4 .staking-orbit-chip.chip-b { top: 42px !important; right: 10px !important; } #page4 .staking-orbit-chip.chip-c { bottom: 56px !important; left: 10px !important; } #page4 .staking-orbit-chip.chip-d { bottom: 16px !important; right: 12px !important; } #page4 .staking-detail-surface, #page4 .staking-chart-card, #page4 .staking-table-wrap, #page4 .staking-metric, #page4 .staking-mini-stat, #page4 .staking-live-card, #page4 .staking-feature-card, #page4 .staking-flow-card, #page4 .staking-plan-card, #page4 .staking-year-mix-card, #page4 .staking-fee-card { border-radius: 16px !important; } #page4 .staking-display-field, #page4 .staking-package-button, #page4 .staking-phase-button, #page4 #stakingPhaseSelect.staking-phase-select { min-height: 52px !important; height: 52px !important; border-radius: 16px !important; } #page4 .staking-package-left img, #page4 .staking-plan-card img { width: 42px !important; height: 42px !important; border-radius: 12px !important; } #page4 .staking-package-name, #page4 .staking-plan-copy .plan-name { font-size: 0.84rem !important; } #page4 .staking-package-sub, #page4 .staking-package-price, #page4 .staking-plan-prices .plan-price, #page4 .staking-plan-prices .plan-price-sub { font-size: 0.78rem !important; } #page4 .staking-plan-card { align-items: flex-start !important; flex-wrap: wrap !important; gap: 0.75rem !important; min-height: 0 !important; } #page4 .staking-plan-prices { width: 100% !important; text-align: left !important; margin-left: 0 !important; } #page4 .staking-chart-head { flex-direction: column !important; align-items: flex-start !important; } #page4 .staking-chart-wrap { height: 260px !important; } #page4 .staking-table { min-width: 860px !important; } } @media (max-width: 480px) { #page4 .card.staking-story-card, #page4 .card.staking-simulator-card, #page4 .card.staking-packages-card { padding: 0.92rem !important; } #page4 .staking-coin-orb-shell { min-height: 232px !important; } #page4 .staking-orb-core { width: 116px !important; height: 116px !important; } #page4 .orb-title { font-size: 1.38rem !important; } #page4 .staking-orb-ring.ring-1 { width: 160px !important; height: 160px !important; } #page4 .staking-orb-ring.ring-2 { width: 204px !important; height: 204px !important; } #page4 .staking-orbit-chip { font-size: 0.62rem !important; padding: 0.38rem 0.52rem !important; } #page4 .staking-orbit-chip.chip-a { top: 12px !important; left: 8px !important; } #page4 .staking-orbit-chip.chip-b { top: 34px !important; right: 8px !important; } #page4 .staking-orbit-chip.chip-c { bottom: 50px !important; left: 8px !important; } #page4 .staking-orbit-chip.chip-d { bottom: 12px !important; right: 8px !important; } #page4 .staking-tab-btn { min-height: 52px !important; font-size: 0.7rem !important; } #page4 .staking-chart-wrap { height: 230px !important; } } /* ---- original style block 37 ---- */ /* Final direct fix for the latest uploaded file */ /* 1) Mobile/tablet header: keep theme toggle and currency next to the logo, above the nav buttons */ @media (max-width: 1024px) { .egety-nav-inner { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; column-gap: 0.5rem !important; row-gap: 0.7rem !important; padding: 0.7rem 0.8rem !important; height: auto !important; min-height: 64px !important; } .egety-nav-logo { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; margin-right: 0 !important; align-self: center !important; } .egety-nav-inner > div:last-child { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; margin-left: 0 !important; display: flex !important; align-items: center !important; gap: 0.45rem !important; flex-wrap: nowrap !important; min-width: 0 !important; max-width: 100% !important; } .egety-nav-links, .egety-nav-links.nav-mobile-open { grid-column: 1 / -1 !important; grid-row: 2 !important; display: flex !important; width: 100% !important; flex-wrap: nowrap !important; gap: 0.65rem !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; position: static !important; left: auto !important; right: auto !important; top: auto !important; margin: 0 !important; padding: 0.05rem 0 0.15rem !important; background: transparent !important; border: 0 !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .egety-nav-links::-webkit-scrollbar { display: none !important; } .egety-nav-page-btn { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; white-space: nowrap !important; } .egety-nav-theme-toggle, .egety-nav-currency { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto !important; } .egety-nav-theme-toggle { width: 42px !important; height: 26px !important; } .egety-nav-currency { min-width: 68px !important; max-width: 84px !important; width: auto !important; height: 34px !important; padding: 0 0.55rem !important; margin-right: 0 !important; border-radius: 10px !important; } .egety-nav-inner > div:last-child .language-switcher-pill, .egety-nav-inner > div:last-child .egety-mobile-toggle, .egety-nav-inner > div:last-child .egety-nav-cta { display: none !important; } } @media (max-width: 768px) { .egety-nav-inner { padding: 0.65rem 0.75rem !important; column-gap: 0.42rem !important; row-gap: 0.62rem !important; } .egety-nav-logo img { width: 28px !important; height: 28px !important; } .egety-nav-logo span { font-size: 1.08rem !important; } .egety-nav-theme-toggle { width: 40px !important; height: 26px !important; } .egety-nav-currency { min-width: 64px !important; max-width: 80px !important; font-size: 0.7rem !important; padding: 0 0.5rem !important; } } /* 2) Builder page mobile overlap repair */ @media (max-width: 900px) { #bds-section > div > div > div:last-child, #builder-showcase-section > div > div { display: grid !important; grid-template-columns: 1fr !important; gap: 1rem !important; align-items: stretch !important; } #bds-section > div > div > div:last-child > div:first-child { display: grid !important; grid-template-columns: 1fr !important; gap: 0.85rem !important; } #bds-section > div > div > div:last-child > div:first-child > div, #builder-showcase-section > div > div > div:first-child > div:last-child > div { width: 100% !important; min-width: 0 !important; overflow: hidden !important; } #bds-section > div > div > div:last-child > div:first-child > div h4, #builder-showcase-section h4 { font-size: 0.9rem !important; line-height: 1.35 !important; word-break: break-word !important; } #bds-section > div > div > div:last-child > div:first-child > div p, #builder-showcase-section p { font-size: 0.8rem !important; line-height: 1.6 !important; word-break: break-word !important; } } @media (max-width: 640px) { #bds-section > div, #builder-showcase-section > div { padding: 1.1rem !important; border-radius: 18px !important; } #bds-section img, #builder-showcase-section img { min-height: 220px !important; max-height: 260px !important; object-fit: contain !important; } } /* 3) Staking page mobile responsiveness */ @media (max-width: 1024px) { #page4 { overflow-x: hidden !important; } #page4 .staking-story-header, #page4 .staking-section-topbar { flex-direction: column !important; align-items: stretch !important; gap: 0.85rem !important; } #page4 .staking-story-badge-wrap, #page4 .staking-live-badge, #page4 .staking-live-badge.alt { width: 100% !important; min-width: 0 !important; } #page4 .staking-story-grid, #page4 .staking-plan-grid, #page4 .staking-feature-grid, #page4 .staking-live-grid, #page4 .staking-detail-points, #page4 .staking-stat-strip, #page4 .staking-control-grid, #page4 .staking-results-grid, #page4 .staking-year-mix-grid, #page4 .staking-plan-list, #page4 .staking-fee-grid, #page4 .staking-info-grid, #page4 .staking-chip-grid { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { #page4 .staking-page-shell { gap: 0.9rem !important; } #page4 .card.staking-story-card, #page4 .card.staking-simulator-card, #page4 .card.staking-packages-card { padding: 1rem !important; border-radius: 22px !important; } #page4 .staking-story-copy, #page4 .staking-simulator-card p, #page4 .staking-packages-card p, #page4 .staking-detail-surface p, #page4 .staking-note, #page4 .staking-info-card p, #page4 .staking-info-card ul { font-size: 0.84rem !important; line-height: 1.65 !important; } #page4 .staking-tab-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.55rem !important; } #page4 .staking-tab-btn { min-height: 54px !important; padding: 0.72rem 0.5rem !important; font-size: 0.72rem !important; } #page4 .staking-coin-orb-shell { min-height: 230px !important; padding: 0.8rem !important; } #page4 .staking-orb-core { width: 110px !important; height: 110px !important; } #page4 .orb-title { font-size: 1.34rem !important; } #page4 .staking-orb-ring.ring-1 { width: 150px !important; height: 150px !important; } #page4 .staking-orb-ring.ring-2 { width: 192px !important; height: 192px !important; } #page4 .staking-orbit-chip { font-size: 0.6rem !important; padding: 0.34rem 0.48rem !important; gap: 0.28rem !important; max-width: 42vw !important; white-space: nowrap !important; } #page4 .staking-orbit-chip.chip-a { top: 10px !important; left: 8px !important; } #page4 .staking-orbit-chip.chip-b { top: 32px !important; right: 8px !important; } #page4 .staking-orbit-chip.chip-c { bottom: 48px !important; left: 8px !important; } #page4 .staking-orbit-chip.chip-d { bottom: 10px !important; right: 8px !important; } #page4 .staking-display-field, #page4 .staking-package-button, #page4 .staking-phase-button, #page4 #stakingPhaseSelect.staking-phase-select { min-height: 52px !important; height: 52px !important; border-radius: 16px !important; } #page4 .staking-package-left img, #page4 .staking-plan-card img { width: 42px !important; height: 42px !important; border-radius: 12px !important; } #page4 .staking-plan-card { flex-wrap: wrap !important; gap: 0.75rem !important; min-height: 0 !important; align-items: flex-start !important; } #page4 .staking-plan-prices { width: 100% !important; text-align: left !important; margin-left: 0 !important; } #page4 .staking-chart-head { flex-direction: column !important; align-items: flex-start !important; gap: 0.7rem !important; } #page4 .staking-chart-wrap { height: 220px !important; } #page4 .staking-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } #page4 .staking-table { min-width: 820px !important; } } /* ---- original style block 38 ---- */ /* Final header currency fix: on tablet/mobile the currency stays on the right, next to the theme toggle, and auto-sizes to the selected currency without exceeding the real space available in the header. */ @media (max-width: 1024px) { .egety-nav-inner { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; column-gap: 0.55rem !important; row-gap: 0.7rem !important; } .egety-nav-logo { grid-column: 1 !important; grid-row: 1 !important; min-width: max-content !important; margin-right: 0 !important; align-self: center !important; } .egety-nav-logo span { white-space: nowrap !important; } .egety-nav-inner > div:last-child, .egety-nav-inner > .oai-mobile-header-controls { grid-column: 2 !important; grid-row: 1 !important; justify-self: stretch !important; align-self: center !important; width: 100% !important; min-width: 0 !important; margin-left: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.45rem !important; flex-wrap: nowrap !important; overflow: hidden !important; } .egety-nav-theme-toggle { flex: 0 0 auto !important; width: 42px !important; height: 26px !important; } .egety-nav-currency { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; max-width: calc(100% - 46px - 0.45rem) !important; height: 34px !important; padding-left: 0.65rem !important; padding-right: 1.9rem !important; margin: 0 !important; border-radius: 10px !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden !important; } .egety-nav-links, .egety-nav-links.nav-mobile-open { grid-column: 1 / -1 !important; grid-row: 2 !important; } } @media (max-width: 768px) { .egety-nav-inner { column-gap: 0.45rem !important; row-gap: 0.62rem !important; padding: 0.65rem 0.75rem !important; } .egety-nav-logo img { width: 28px !important; height: 28px !important; } .egety-nav-logo span { font-size: 1.08rem !important; } .egety-nav-theme-toggle { width: 40px !important; height: 26px !important; } .egety-nav-currency { height: 34px !important; font-size: 0.72rem !important; padding-left: 0.55rem !important; padding-right: 1.75rem !important; max-width: calc(100% - 44px - 0.45rem) !important; } } @media (max-width: 420px) { .egety-nav-inner { column-gap: 0.38rem !important; padding-left: 0.7rem !important; padding-right: 0.7rem !important; } .egety-nav-logo span { font-size: 1.02rem !important; } .egety-nav-currency { font-size: 0.7rem !important; padding-left: 0.5rem !important; padding-right: 1.6rem !important; max-width: calc(100% - 42px - 0.38rem) !important; } } /* ---- original style block 39 ---- */ @media (max-width: 1024px) { .egety-nav-inner > div:last-child { overflow: hidden !important; min-width: 0 !important; } .egety-nav-currency { box-sizing: border-box !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; flex: 0 0 auto !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ---- original style block 40 ---- */ /* Keep the theme thumb fully inside its track on all breakpoints */ #theme-switcher.egety-nav-theme-toggle { position: relative !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; padding: 2px !important; overflow: hidden !important; } #toggle-indicator { box-sizing: border-box !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; margin: 0 !important; flex: 0 0 20px !important; transform: translateX(0); transition: transform 0.25s ease !important; } /* ---- original style block 41 ---- */ /* Remove the 3 visible titles above the simulator dropdowns and add more breathing room between the Batch dropdown and the EDS field row. */ #edsSelectionControls { margin-top: 0.35rem !important; gap: 1rem !important; } #edsTopRow { margin-top: 1rem !important; } @media (max-width: 640px) { #edsTopRow { margin-top: 1.15rem !important; } } /* ---- original style block 42 ---- */ #edsPackageButton { align-items: flex-start !important; } #edsPackageButton .staking-package-left, #edsPackageMenu .staking-package-left { align-items: flex-start !important; gap: 0.8rem !important; width: 100% !important; } #edsPackageButton .eds-package-meta, #edsPackageMenu .eds-package-meta { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 0.28rem !important; width: 100% !important; min-width: 0 !important; } #edsPackageButton .staking-package-head, #edsPackageMenu .staking-package-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 0.8rem !important; width: 100% !important; min-width: 0 !important; } #edsPackageButton .staking-package-name, #edsPackageMenu .staking-package-name { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.15 !important; } #edsPackageButton .staking-package-price-inline, #edsPackageMenu .staking-package-price-inline { flex: 0 0 auto !important; white-space: nowrap !important; font-size: 0.94rem !important; font-weight: 800 !important; line-height: 1.15 !important; color: #f8fbff !important; text-align: right !important; margin-top: 0.02rem !important; } #edsPackageButton .eds-package-detail-line, #edsPackageMenu .eds-package-detail-line { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.35rem !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important; } #edsPackageButton .eds-package-detail-chip, #edsPackageMenu .eds-package-detail-chip { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.16rem 0.42rem !important; border-radius: 999px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.08) !important; font-size: 0.72rem !important; font-weight: 700 !important; color: #cfe4f5 !important; line-height: 1.1 !important; } #edsPackageButton .eds-package-grade, #edsPackageMenu .eds-package-grade { color: #67e8f9 !important; } #edsPackageButton .eds-package-return, #edsPackageMenu .eds-package-return { color: #f8fbff !important; } #edsPackageMenu .staking-package-option { align-items: flex-start !important; gap: 0.75rem !important; } #edsPackageMenu .staking-package-option-mark { margin-top: 0.18rem !important; } body.light-mode #edsPackageButton .staking-package-price-inline, body.light-mode #edsPackageMenu .staking-package-price-inline { color: #0f172a !important; } body.light-mode #edsPackageButton .eds-package-detail-chip, body.light-mode #edsPackageMenu .eds-package-detail-chip { background: rgba(219,234,254,0.75) !important; border-color: rgba(96,165,250,0.18) !important; color: #334155 !important; } body.light-mode #edsPackageButton .eds-package-grade, body.light-mode #edsPackageMenu .eds-package-grade { color: #0369a1 !important; } body.light-mode #edsPackageButton .eds-package-return, body.light-mode #edsPackageMenu .eds-package-return { color: #0f172a !important; } @media (max-width: 640px) { #edsPackageButton .staking-package-left, #edsPackageMenu .staking-package-left { gap: 0.68rem !important; } #edsPackageButton .staking-package-price-inline, #edsPackageMenu .staking-package-price-inline { font-size: 0.88rem !important; } #edsPackageButton .eds-package-detail-chip, #edsPackageMenu .eds-package-detail-chip { font-size: 0.68rem !important; padding: 0.15rem 0.36rem !important; } } /* ---- original style block 43 ---- */ /* Partner section in light mode: clear white heading and strong gradient glow behind logos */ #partnersCard { position: relative; overflow: hidden; } #partnersCard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 22% 28%, rgba(56,189,248,0.24), transparent 22%), radial-gradient(circle at 78% 28%, rgba(59,130,246,0.24), transparent 24%), radial-gradient(circle at 22% 74%, rgba(14,165,233,0.22), transparent 24%), radial-gradient(circle at 78% 74%, rgba(96,165,250,0.22), transparent 24%), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 34%); pointer-events: none; z-index: 0; } #partnersCard > * { position: relative; z-index: 1; } #partnersCard .partners-logo-grid { position: relative; isolation: isolate; } #partnersCard .partner-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 100%; padding: 0.6rem 0.4rem; } #partnersCard .partner-logo::before { content: ""; position: absolute; inset: -10px; border-radius: 20px; background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(56,189,248,0.14) 45%, transparent 72%); filter: blur(10px); opacity: 1; z-index: -1; } #partnersCard .partner-logo img { position: relative; z-index: 1; } body.light-mode #partnersCard .section-title, body.light-mode #partnersCard h2, body.light-mode #partnersCard [data-translate="partners_title"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* FAQ: remove duplicate internal section heading */ #getting-started-content > h3 { display: none !important; } /* Founder stats: bigger and centered */ #founders-section .stat-grid-new { align-items: stretch; } #founders-section .stat-box-new { min-height: 245px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.4rem 1rem; } #founders-section .stat-box-new i { font-size: 1.7rem !important; margin-bottom: 0.95rem !important; } #founders-section .stat-box-new .stat-num { font-size: 2.35rem !important; line-height: 1.1 !important; text-align: center !important; } #founders-section .stat-box-new .stat-lbl { font-size: 1rem !important; line-height: 1.35 !important; text-align: center !important; margin-top: 0.55rem !important; } #founders-section .stat-box-new .stat-num[style*="Olympus Shield"] { font-size: 1.15rem !important; line-height: 1.25 !important; } @media (max-width: 768px) { #founders-section .stat-box-new { min-height: 200px; } #founders-section .stat-box-new .stat-num { font-size: 2rem !important; } } /* EDS Package Tiers selector: individual hover only, each item above everything */ #packageStageButtonsSmall { position: relative !important; z-index: 8000 !important; overflow: visible !important; } #packageStageButtonsSmall .package-stage-row, #packageStageButtonsSmall .stage-btn-group { overflow: visible !important; } #packageStageButtonsSmall .interactive-btn, #packageStageButtonsSmall .release-btn { position: relative !important; z-index: 1 !important; transform-origin: center center; } #packageStageButtonsSmall .interactive-btn:hover, #packageStageButtonsSmall .release-btn:hover { z-index: 9005 !important; transform: translateY(-2px) scale(1.09) !important; box-shadow: 0 14px 26px rgba(2,12,27,0.28) !important; } #packageStageButtonsSmall:hover .interactive-btn:not(:hover), #packageStageButtonsSmall:hover .release-btn:not(:hover) { transform: none !important; box-shadow: none !important; } .card:has(#packageStageButtonsSmall), .package-tier-selector-wrap { overflow: visible !important; z-index: 8000 !important; } /* PLO Top-Up tooltip always in front of everything */ #ecosystemSimulatorSection, #ecosystemSimulatorSection .simulator-card, #ecosystemSimulatorSection .slider-group, #advancedControls { overflow: visible !important; } #ecosystemSimulatorSection .info-tooltip-container[data-tooltip-key="tooltip_plo_top_up"] { position: relative !important; z-index: 2147483646 !important; } #ecosystemSimulatorSection .info-tooltip-container[data-tooltip-key="tooltip_plo_top_up"] .info-tooltip { z-index: 2147483647 !important; } /* ---- original style block 44 ---- */ /* Triple Phoenix Hood logo size */ #partnersCard .partner-logo img[alt="Phoenix Hood logo"] { height: 15rem !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; } /* EDS package table selector: only the hovered batch/stage number should react */ .card:has(#packageStageButtonsSmall):hover, .package-tier-selector-wrap:hover, #packageStageButtonsSmall:hover, #packageStageButtonsSmall .package-stage-row:hover, #packageStageButtonsSmall .stage-btn-group:hover { transform: none !important; box-shadow: none !important; filter: none !important; } #packageStageButtonsSmall .interactive-btn, #packageStageButtonsSmall .release-btn { transform: none !important; box-shadow: none !important; filter: none !important; } #packageStageButtonsSmall .interactive-btn:hover, #packageStageButtonsSmall .release-btn:hover, #packageStageButtonsSmall .interactive-btn:focus-visible, #packageStageButtonsSmall .release-btn:focus-visible { z-index: 31 !important; transform: none !important; box-shadow: none !important; } #packageStageButtonsSmall:hover .interactive-btn:not(:hover):not(:focus-visible), #packageStageButtonsSmall:hover .release-btn:not(:hover):not(:focus-visible), #packageStageButtonsSmall .package-stage-row:hover .interactive-btn:not(:hover):not(:focus-visible), #packageStageButtonsSmall .stage-btn-group:hover .interactive-btn:not(:hover):not(:focus-visible), #packageStageButtonsSmall .stage-btn-group:hover .release-btn:not(:hover):not(:focus-visible) { transform: none !important; box-shadow: none !important; z-index: 1 !important; } /* ---- original style block 45 ---- */ /* Reduce total height of partner section while keeping logos clearer */ #partnersCard { padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; } #partnersCard .partners-logo-grid { gap: 1.1rem 1.4rem !important; padding-top: 0.55rem !important; align-items: center !important; } #partnersCard .partner-logo { min-height: 94px; padding: 0.3rem 0.25rem !important; } #partnersCard .partner-logo::before { inset: -6px !important; filter: blur(8px) !important; } /* Phoenix Hood: match the other partner logos, remove the card effect, keep only a softer glow, and make it bigger */ #partnersCard .partner-logo[href*="phoenixhood.com"] { min-height: 94px; border-radius: 0 !important; padding: 0.3rem 0.25rem !important; background: transparent !important; box-shadow: none !important; } #partnersCard .partner-logo[href*="phoenixhood.com"]::before { inset: -10px !important; border-radius: 28px !important; background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(56,189,248,0.12) 42%, rgba(255,255,255,0.03) 62%, transparent 82%) !important; filter: blur(10px) !important; opacity: 1 !important; } #partnersCard .partner-logo img[alt="Phoenix Hood logo"] { height: 10.25rem !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; filter: brightness(1.22) contrast(1.26) saturate(1.1) !important; opacity: 1 !important; } /* Earnings Projection: let the chart use more of the card height dynamically */ #earningsProjectionSection { display: flex !important; flex-direction: column !important; height: 100% !important; } #earningsProjectionSection > .flex:first-child { flex: 0 0 auto; } #earningsProjectionSection > .relative { flex: 1 1 auto !important; min-height: 430px !important; height: auto !important; } #projectionChart { width: 100% !important; height: 100% !important; } @media (max-width: 1024px) { #earningsProjectionSection > .relative { min-height: 360px !important; } } @media (max-width: 640px) { #earningsProjectionSection > .relative { min-height: 300px !important; } } /* Global tooltip hardening: solid surface + always above everything */ .info-tooltip-container { position: relative !important; z-index: 2147483640 !important; overflow: visible !important; } .info-tooltip-container:hover, .info-tooltip-container:focus-within { z-index: 2147483646 !important; } .info-tooltip { background: #0f172a !important; background-color: #0f172a !important; color: #ffffff !important; opacity: 1; border: 1px solid rgba(148,163,184,0.24) !important; box-shadow: 0 18px 38px rgba(2,12,27,0.34) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 2147483647 !important; isolation: isolate; } body.light-mode .info-tooltip { background: #ffffff !important; background-color: #ffffff !important; color: #0f172a !important; border-color: rgba(148,163,184,0.24) !important; box-shadow: 0 18px 38px rgba(15,23,42,0.16) !important; } /* Prevent clipping from common tooltip ancestors across the site */ section, .card, .simulator-card, .slider-group, .results-box, .stat-card, .goal-package-card, .installment-suggestion-card, .staking-detail-surface, .staking-story-card, .staking-simulator-card, .staking-packages-card, #partnersAndFaqContainer, #purchaseTablesSection, #ecosystemSimulatorSection, #goalPlannerSection, #earningsProjectionSection, #simulatorBreakdownSection, #founders-section, #page1, #page2, #page3, #page4 { overflow: visible !important; } /* Final stage/batch hover isolation */ #packageStageButtonsSmall, #packageStageButtonsSmall .package-stage-row, #packageStageButtonsSmall .stage-btn-group { overflow: visible !important; } #packageStageButtonsSmall .interactive-btn, #packageStageButtonsSmall .release-btn { transition: transform 0.18s ease, box-shadow 0.18s ease, z-index 0s !important; } #packageStageButtonsSmall .interactive-btn:hover, #packageStageButtonsSmall .release-btn:hover { z-index: 9999 !important; transform: translateY(-2px) scale(1.08) !important; box-shadow: 0 14px 26px rgba(2,12,27,0.28) !important; } #packageStageButtonsSmall:hover .interactive-btn:not(:hover):not(:focus-visible), #packageStageButtonsSmall:hover .release-btn:not(:hover):not(:focus-visible) { transform: none !important; box-shadow: none !important; z-index: 1 !important; } /* ---- original style block 46 ---- */ /* Force the 3 ecosystem bubbles and WhatsApp UI above every section, card, chart, iframe, and tooltip */ #egetyPriceBubble, #batchBubble, #whitePaperBubble, #livePriceDot, #bigLiveDataBubble { position: fixed !important; z-index: 2147483646 !important; isolation: isolate !important; transform: translateZ(0); } .whatsapp-icon, #whatsappPopup { position: fixed !important; z-index: 2147483647 !important; isolation: isolate !important; transform: translateZ(0); } #whatsappPopup *, .whatsapp-icon * { position: relative; z-index: inherit; } /* ---- original style block 47 ---- */ /* Header must always stay above everything */ .egety-nav, #egetyNav { position: fixed !important; z-index: 2147483647 !important; isolation: isolate !important; transform: translateZ(0); } .egety-nav::before, .egety-nav::after, .egety-nav * { pointer-events: auto; } .egety-nav-inner, .egety-nav-links, .egety-nav-page-btn { position: relative; z-index: 2147483647; } .egety-nav-page-btn { cursor: pointer !important; pointer-events: auto !important; } /* ---- original style block 48 ---- */ .footer-redesigned { position: relative; overflow: visible !important; margin-top: 1.5rem; padding: 0 !important; border: 1px solid rgba(56,189,248,0.16) !important; border-radius: 28px !important; background: radial-gradient(circle at top left, rgba(34,211,238,0.14), transparent 28%), radial-gradient(circle at bottom right, rgba(37,99,235,0.16), transparent 34%), linear-gradient(145deg, rgba(7,18,36,0.96), rgba(11,31,55,0.94) 56%, rgba(8,68,96,0.88)) !important; box-shadow: 0 24px 54px rgba(2,12,27,0.34), inset 0 1px 0 rgba(255,255,255,0.04) !important; } .footer-redesigned::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 18%); pointer-events: none; } .footer-redesigned-inner { position: relative; z-index: 1; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; gap: 2rem !important; max-width: none !important; padding: 2rem !important; align-items: start; } .footer-main-brand { min-width: 0; } .footer-brand-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .footer-brand-mark { display: inline-flex; align-items: center; gap: 0.9rem; width: fit-content; max-width: 100%; text-decoration: none; } .footer-brand-mark img { width: 44px; height: 44px; flex: 0 0 auto; } .footer-brand-wordmark { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; } .footer-brand-wordmark strong { font-size: 1.1rem; font-weight: 800; color: #f8fbff; line-height: 1.15; letter-spacing: -0.02em; } .footer-brand-wordmark span { font-size: 0.76rem; color: #9fb3c8; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; } .footer-closing-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; padding: 0.42rem 0.72rem; border-radius: 999px; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; } .footer-closing-title { font-size: clamp(1.6rem, 2vw, 2.2rem) !important; line-height: 1.08 !important; letter-spacing: -0.03em; color: #f8fbff !important; margin: 0 !important; font-weight: 800 !important; max-width: 14ch; } .footer-closing-copy { margin: 0; max-width: 52ch; font-size: 0.97rem; line-height: 1.78; color: #c1d3e6; } .footer-trust-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; } .footer-trust-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.82rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #e2e8f0; font-size: 0.76rem; font-weight: 700; line-height: 1; white-space: nowrap; } .footer-trust-chip i { color: #67e8f9; } .footer-cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; } .footer-cta-primary, .footer-cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.85rem 1.2rem; border-radius: 999px; text-decoration: none; font-size: 0.92rem; font-weight: 700; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease; } .footer-cta-primary { background: linear-gradient(135deg, #2563eb, #06b6d4) !important; color: #ffffff !important; border: 1px solid transparent; box-shadow: 0 16px 34px rgba(37,99,235,0.22); } .footer-cta-secondary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: #f8fbff !important; } .footer-cta-primary:hover, .footer-cta-secondary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(2,12,27,0.28); } .footer-contact-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; } .footer-contact-inline .footer-contact-label { font-size: 0.82rem; font-weight: 700; color: #9fb3c8; } .footer-social-new { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0 !important; } .footer-social-new a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.04); color: #cbd5e1 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 0.9rem; margin-bottom: 0 !important; box-shadow: none !important; } .footer-social-new a:hover { border-color: rgba(103,232,249,0.28) !important; color: #ffffff !important; background: rgba(34,211,238,0.12) !important; transform: translateY(-2px); } .footer-link-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; min-width: 0; } .footer-col-new { min-width: 0; padding-left: 0.9rem; border-left: 1px solid rgba(255,255,255,0.08); } .footer-col-new h5 { margin: 0 0 0.85rem !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; color: #9fb3c8 !important; text-transform: uppercase; font-weight: 700 !important; } .footer-link-list { display: flex; flex-direction: column; gap: 0.38rem; } .footer-col-new a { display: inline-flex !important; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%; padding: 0.32rem 0; color: #e2e8f0 !important; text-decoration: none; font-size: 0.92rem !important; font-weight: 600; line-height: 1.45; margin: 0 !important; } .footer-col-new a i { color: #67e8f9; width: 14px; text-align: center; flex: 0 0 14px; } .footer-col-new a:hover { color: #ffffff !important; transform: translateX(3px); } .footer-bottom-new { position: relative; z-index: 1; display: flex !important; align-items: center; justify-content: space-between; gap: 0.9rem; margin: 0 !important; padding: 0.95rem 2rem 1.1rem !important; border-top: 1px solid rgba(255,255,255,0.08) !important; color: #9fb3c8 !important; font-size: 0.78rem !important; } .footer-bottom-left, .footer-bottom-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; min-width: 0; } .footer-bottom-right a { color: #cbd5e1; text-decoration: none; font-weight: 600; } .footer-bottom-right a:hover { color: #ffffff; } .footer-legal-dot { width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.24); flex: 0 0 auto; } body.light-mode .footer-redesigned { background: radial-gradient(circle at top left, rgba(34,211,238,0.09), transparent 28%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 58%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 16px 36px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.5) !important; } body.light-mode .footer-closing-title, body.light-mode .footer-brand-wordmark strong, body.light-mode .footer-col-new a, body.light-mode .footer-cta-secondary, body.light-mode .footer-bottom-right a { color: #0f172a !important; } body.light-mode .footer-closing-copy, body.light-mode .footer-brand-wordmark span, body.light-mode .footer-col-new h5, body.light-mode .footer-bottom-new, body.light-mode .footer-bottom-right, body.light-mode .footer-bottom-left, body.light-mode .footer-contact-inline .footer-contact-label { color: #475569 !important; } body.light-mode .footer-closing-eyebrow { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.14); color: #0369a1; } body.light-mode .footer-trust-chip, body.light-mode .footer-cta-secondary, body.light-mode .footer-social-new a, body.light-mode .footer-col-new { border-color: rgba(148,163,184,0.18) !important; } body.light-mode .footer-trust-chip, body.light-mode .footer-cta-secondary, body.light-mode .footer-social-new a { background: rgba(255,255,255,0.8) !important; } body.light-mode .footer-social-new a { color: #334155 !important; } body.light-mode .footer-col-new a i, body.light-mode .footer-trust-chip i { color: #0ea5e9 !important; } body.light-mode .footer-bottom-new { border-top-color: rgba(148,163,184,0.18) !important; } body.light-mode .footer-legal-dot { background: rgba(100,116,139,0.35); } @media (max-width: 1100px) { .footer-redesigned-inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .footer-link-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-col-new:first-child { padding-left: 0; border-left: 0; } } @media (max-width: 820px) { .footer-link-columns { grid-template-columns: 1fr; gap: 1rem; } .footer-col-new { padding-left: 0; border-left: 0; padding-top: 0.2rem; border-top: 1px solid rgba(255,255,255,0.08); } body.light-mode .footer-col-new { border-top-color: rgba(148,163,184,0.18) !important; } .footer-bottom-new { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .footer-redesigned-inner { padding: 1.25rem !important; gap: 1.25rem !important; } .footer-bottom-new { padding: 0.9rem 1.25rem 1rem !important; align-items: flex-start; } .footer-closing-title { max-width: none; } .footer-cta-row { flex-direction: column; align-items: stretch; } .footer-cta-primary, .footer-cta-secondary { width: 100%; } } /* ---- original style block 49 ---- */ #hero-redesigned { position: relative; overflow: visible !important; padding-top: 0.5rem !important; padding-bottom: 1.5rem !important; z-index: 1; } .eds-hero-shell { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; } .eds-hero-copy, .eds-hero-story-card { position: relative; overflow: hidden; min-width: 0; border-radius: 28px; border: 1px solid rgba(56,189,248,0.16); box-shadow: 0 22px 52px rgba(2,12,27,0.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .eds-hero-copy { padding: 2rem; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at top left, rgba(34,211,238,0.10), transparent 30%), radial-gradient(circle at bottom right, rgba(37,99,235,0.14), transparent 34%), linear-gradient(145deg, rgba(7,18,36,0.96), rgba(11,31,55,0.95) 56%, rgba(8,68,96,0.88)); } .eds-hero-story-card { padding: 1.35rem; background: radial-gradient(circle at top right, rgba(34,211,238,0.10), transparent 28%), radial-gradient(circle at bottom left, rgba(37,99,235,0.12), transparent 34%), linear-gradient(145deg, rgba(8,20,40,0.96), rgba(12,34,58,0.95) 58%, rgba(8,74,106,0.86)); } .eds-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; max-width: 100%; padding: 0.48rem 0.82rem; border-radius: 999px; border: 1px solid rgba(34,211,238,0.18); background: rgba(34,211,238,0.10); color: #7dd3fc; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; margin-bottom: 1rem; } .eds-hero-eyebrow-dot { width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, #22d3ee, #2563eb); box-shadow: 0 0 0 6px rgba(34,211,238,0.10); flex: 0 0 auto; } .eds-hero-title { margin: 0; font-size: clamp(2.15rem, 4vw, 3.35rem) !important; line-height: 1.02 !important; letter-spacing: -0.05em; color: #f8fbff !important; max-width: 14ch; text-wrap: balance; } .eds-hero-subtitle { margin: 0.95rem 0 0; max-width: 62ch; font-size: 1rem; line-height: 1.74; color: #c1d3e6; } .eds-hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.3rem; } .eds-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.86rem 1.16rem; border-radius: 999px; text-decoration: none; font-size: 0.92rem; font-weight: 800; line-height: 1; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .eds-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(2,12,27,0.24); } .eds-hero-btn-primary { background: linear-gradient(135deg, #2563eb, #06b6d4); color: #ffffff !important; box-shadow: 0 16px 32px rgba(37,99,235,0.24); } .eds-hero-btn-secondary, .eds-hero-btn-tertiary { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: #f8fbff !important; } .eds-hero-meta-row { margin-top: 0.95rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; } .eds-hero-inline-link { appearance: none; border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; gap: 0.5rem; color: #9ddcf6; font-size: 0.86rem; font-weight: 700; cursor: pointer; } .eds-hero-inline-link:hover { color: #ffffff; } .eds-hero-chip-row { display: flex; flex-wrap: wrap; gap: 0.58rem; margin-top: 1rem; max-width: 60rem; } .eds-hero-chip { display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.54rem 0.78rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #dbeafe; font-size: 0.75rem; font-weight: 700; line-height: 1; white-space: nowrap; } .eds-hero-chip i { font-size: 0.36rem; color: #67e8f9; } .eds-hero-story-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; margin-bottom: 1rem; } .eds-hero-story-kicker { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9fb3c8; font-weight: 800; margin-bottom: 0.28rem; } .eds-hero-story-title { margin: 0; font-size: 1.22rem !important; line-height: 1.28 !important; color: #f8fbff !important; font-weight: 800; max-width: 22ch; } .eds-hero-story-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0.5rem 0.78rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #dbeafe; font-size: 0.75rem; font-weight: 800; white-space: nowrap; } .eds-hero-story-stage-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; } .eds-hero-stage { appearance: none; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #cfe4f5; border-radius: 18px; min-height: 62px; padding: 0.72rem 0.62rem; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.12rem; cursor: pointer; text-align: left; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease; } .eds-hero-stage:hover { transform: translateY(-2px); border-color: rgba(103,232,249,0.24); box-shadow: 0 14px 26px rgba(2,12,27,0.18); } .eds-hero-stage.is-active { background: linear-gradient(135deg, rgba(37,99,235,0.86), rgba(6,182,212,0.78)); color: #ffffff; border-color: transparent; box-shadow: 0 18px 30px rgba(37,99,235,0.22); } .eds-hero-stage-num { font-size: 0.68rem; font-weight: 800; opacity: 0.84; letter-spacing: 0.08em; } .eds-hero-stage-label { font-size: 0.88rem; font-weight: 800; line-height: 1.15; } .eds-hero-story-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; } .eds-hero-visual-map { position: relative; min-height: 280px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); overflow: hidden; display: flex; align-items: center; justify-content: center; } .eds-hero-visual-ring { position: absolute; width: 226px; height: 226px; border-radius: 999px; border: 1px solid rgba(125,211,252,0.22); animation: edsHeroSpin 18s linear infinite; } .eds-hero-visual-ring-two { width: 286px; height: 286px; border-style: dashed; animation-direction: reverse; animation-duration: 24s; } .eds-hero-visual-center { width: 164px; height: 164px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.26), rgba(56,189,248,.18) 28%, rgba(37,99,235,.92) 74%); box-shadow: 0 22px 44px rgba(2,12,27,.38), inset 0 1px 18px rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; text-align: center; color: #ffffff; transition: transform .26s ease, box-shadow .26s ease, background .26s ease; } .eds-hero-visual-center-kicker { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 800; opacity: 0.86; } .eds-hero-visual-center strong { display: block; margin-top: 0.26rem; font-size: 1.08rem; line-height: 1.12; letter-spacing: -0.02em; } .eds-hero-visual-center span:last-child { display: block; margin-top: 0.28rem; font-size: 0.76rem; line-height: 1.38; opacity: 0.86; } .eds-hero-visual-node { position: absolute; display: inline-flex; align-items: center; gap: 0.46rem; padding: 0.54rem 0.74rem; border-radius: 999px; background: rgba(8,20,40,.72); border: 1px solid rgba(125,211,252,.22); color: #eaf4ff; font-size: 0.76rem; font-weight: 800; box-shadow: 0 12px 24px rgba(2,12,27,.22); backdrop-filter: blur(10px); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease; } .eds-hero-visual-node i { color: #67e8f9; } .eds-hero-visual-node.is-active { background: linear-gradient(135deg, rgba(37,99,235,.88), rgba(6,182,212,.82)); border-color: transparent; color: #ffffff; box-shadow: 0 18px 32px rgba(37,99,235,.24); transform: translateY(-2px); } .eds-hero-visual-node.is-active i { color: #ffffff; } .eds-hero-node-own { top: 28px; left: 18px; } .eds-hero-node-ecosystem { top: 56px; right: 16px; } .eds-hero-node-activity { bottom: 72px; left: 14px; } .eds-hero-node-participate { bottom: 26px; right: 34px; } .eds-hero-story-panel { display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; min-width: 0; } .eds-hero-story-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .eds-hero-story-panel-badge, .eds-hero-story-panel-next { display: inline-flex; align-items: center; min-height: 32px; padding: 0.42rem 0.72rem; border-radius: 999px; font-size: 0.74rem; font-weight: 800; } .eds-hero-story-panel-badge { background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; } .eds-hero-story-panel-next { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #cbd5e1; } .eds-hero-story-panel-title { margin: 0; font-size: 1.32rem !important; line-height: 1.18 !important; letter-spacing: -0.03em; color: #f8fbff !important; max-width: 22ch; } .eds-hero-story-panel-text { margin: 0; color: #c1d3e6; font-size: 0.92rem; line-height: 1.7; max-width: 56ch; } .eds-hero-story-points { display: grid; gap: 0.58rem; } .eds-hero-story-point { display: flex; align-items: flex-start; gap: 0.58rem; padding: 0.72rem 0.82rem; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #eaf4ff; font-size: 0.82rem; line-height: 1.55; } .eds-hero-story-point i { color: #67e8f9; margin-top: 0.14rem; } .eds-hero-story-footer { margin-top: 0.2rem; padding: 0.9rem 0.95rem; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } .eds-hero-story-footer-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9fb3c8; font-weight: 800; margin-bottom: 0.26rem; } .eds-hero-story-footer-value { color: #f8fbff; font-size: 0.88rem; line-height: 1.65; font-weight: 700; } .eds-hero-copy .eds-hero-cta-row, .eds-hero-copy .eds-hero-meta-row, .eds-hero-copy .eds-hero-chip-row, .eds-hero-story-card { width: 100%; } .eds-hero-story-card { margin-top: 0; } .eds-hero-story-panel, .eds-hero-story-grid, .eds-hero-story-head, .eds-hero-story-stage-row { max-width: 100%; } body.light-mode #hero-redesigned { background: transparent !important; } body.light-mode .eds-hero-copy, body.light-mode .eds-hero-story-card { background: radial-gradient(circle at top left, rgba(14,165,233,0.08), transparent 30%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 58%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.20) !important; box-shadow: 0 16px 36px rgba(15,23,42,0.08) !important; } body.light-mode .eds-hero-eyebrow { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.14); color: #0369a1; } body.light-mode .eds-hero-title, body.light-mode .eds-hero-story-title, body.light-mode .eds-hero-story-panel-title, body.light-mode .eds-hero-story-footer-value { color: #0f172a !important; } body.light-mode .eds-hero-subtitle, body.light-mode .eds-hero-story-kicker, body.light-mode .eds-hero-story-panel-text, body.light-mode .eds-hero-story-footer-label, body.light-mode .eds-hero-story-panel-next { color: #475569 !important; } body.light-mode .eds-hero-btn-secondary, body.light-mode .eds-hero-btn-tertiary, body.light-mode .eds-hero-chip, body.light-mode .eds-hero-story-badge, body.light-mode .eds-hero-inline-link, body.light-mode .eds-hero-stage, body.light-mode .eds-hero-story-point, body.light-mode .eds-hero-story-footer, body.light-mode .eds-hero-story-panel-next { background: rgba(255,255,255,0.82) !important; border-color: rgba(148,163,184,0.18) !important; color: #0f172a !important; } body.light-mode .eds-hero-chip i, body.light-mode .eds-hero-story-point i, body.light-mode .eds-hero-visual-node i { color: #0ea5e9 !important; } body.light-mode .eds-hero-stage.is-active, body.light-mode .eds-hero-visual-node.is-active { color: #ffffff !important; } body.light-mode .eds-hero-stage.is-active i, body.light-mode .eds-hero-visual-node.is-active i { color: #ffffff !important; } body.light-mode .eds-hero-visual-map { background: linear-gradient(145deg, rgba(255,255,255,0.84), rgba(239,246,255,0.92)); border-color: rgba(148,163,184,0.18); } body.light-mode .eds-hero-visual-center { box-shadow: 0 20px 38px rgba(15,23,42,.14), inset 0 1px 12px rgba(255,255,255,.22); } body.light-mode .eds-hero-visual-node { background: rgba(255,255,255,0.92); border-color: rgba(148,163,184,0.18); color: #0f172a; box-shadow: 0 14px 26px rgba(15,23,42,.10); } body.light-mode .eds-hero-story-panel-badge { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.14); color: #0369a1 !important; } @keyframes edsHeroSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .eds-top-width, #digitalRevolutionSection, #howitworks-section, #privateLabelsSection { width: 100% !important; max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; border-radius: 24px !important; } .social-proof-strip.eds-top-width { width: 100% !important; max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; border-radius: 24px !important; overflow: hidden !important; padding: 1.5rem 0 !important; } .social-proof-strip.eds-top-width .social-proof-strip-inner { max-width: none !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } #digitalRevolutionSection, #howitworks-section, #privateLabelsSection { padding: 1.25rem !important; } .eds-hero-shell { grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr); gap: 1rem; } .eds-hero-copy, .eds-hero-story-card, #digitalRevolutionSection, #howitworks-section, #privateLabelsSection, .social-proof-strip.eds-top-width { border-radius: 24px !important; } .eds-hero-story-card { display: flex; flex-direction: column; justify-content: center; } .eds-hero-story-head { margin-bottom: 0.85rem; } .eds-hero-story-stage-row { margin-bottom: 0.85rem; } .eds-hero-stage { min-height: 56px; align-items: center; text-align: center; } .eds-hero-stage-label { font-size: 0.82rem; } .eds-hero-visual-map { min-height: 320px; } .eds-hero-visual-center { width: 172px; height: 172px; } .eds-hero-story-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.9rem; } .eds-hero-story-mini { padding: 0.8rem 0.75rem; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); text-align: center; } .eds-hero-story-mini-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: #9fb3c8; font-weight: 800; margin-bottom: 0.25rem; } .eds-hero-story-mini-value { display: block; font-size: 0.92rem; color: #f8fbff; font-weight: 800; line-height: 1.25; } body.light-mode .eds-hero-story-mini { background: rgba(255,255,255,0.86) !important; border-color: rgba(148,163,184,0.18) !important; } body.light-mode .eds-hero-story-mini-label { color: #64748b !important; } body.light-mode .eds-hero-story-mini-value { color: #0f172a !important; } @media (max-width: 1180px) { .eds-hero-shell { grid-template-columns: 1fr; } .eds-hero-copy, .eds-hero-story-card { padding: 1.25rem; } .eds-hero-story-grid { grid-template-columns: 1fr; } .eds-hero-title { max-width: 16ch; } } @media (max-width: 760px) { #hero-redesigned { padding-top: 0.15rem !important; padding-bottom: 1.15rem !important; } .eds-hero-shell { padding: 0 0.75rem; gap: 1rem; } .eds-hero-copy, .eds-hero-story-card { border-radius: 22px; padding: 1rem; } .eds-hero-title { max-width: none; font-size: clamp(1.95rem, 8.5vw, 2.65rem) !important; } .eds-hero-subtitle { font-size: 0.94rem; line-height: 1.72; } .eds-hero-cta-row { flex-direction: column; align-items: stretch; } .eds-hero-btn { width: 100%; min-width: 0; } .eds-hero-chip-row { gap: 0.5rem; } .eds-hero-chip { max-width: 100%; white-space: normal; line-height: 1.25; justify-content: center; } .eds-hero-story-head { flex-direction: column; align-items: flex-start; } .eds-hero-story-stage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eds-hero-stage { min-height: 58px; align-items: center; text-align: center; } .eds-hero-visual-map { min-height: 235px; } .eds-hero-visual-center { width: 130px; height: 130px; padding: 0.8rem; } .eds-hero-visual-center strong { font-size: 0.96rem; } .eds-hero-visual-center span:last-child { font-size: 0.7rem; } .eds-hero-visual-ring { width: 182px; height: 182px; } .eds-hero-visual-ring-two { width: 228px; height: 228px; } .eds-hero-visual-node { padding: 0.45rem 0.58rem; font-size: 0.68rem; gap: 0.34rem; max-width: 38vw; } .eds-hero-node-own { top: 16px; left: 10px; } .eds-hero-node-ecosystem { top: 28px; right: 10px; } .eds-hero-node-activity { bottom: 48px; left: 10px; } .eds-hero-node-participate { bottom: 14px; right: 14px; } .eds-hero-story-panel-title { max-width: none; font-size: 1.22rem !important; } .eds-hero-story-panel-text { font-size: 0.88rem; line-height: 1.68; } } /* ---- original style block 50 ---- */ /* Full-width pass for the EDS page: make every top-level page-1 section use the full available content width, remove older max-width caps, and keep a unified section radius. */ #page1 { width: 100% !important; min-width: 0 !important; } #page1 > section, #page1 > div, #page1 > .social-proof-strip, #page1 > .simulator-container, #page1 > #partnersAndFaqContainer, #page1 > #purchaseTablesSection, #page1 > #edsPlannerProjectionRow, #page1 > #mySavedResultsContainer { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; } /* Target the real EDS sections explicitly so no older max-width utility wins */ #hero-redesigned, #digitalRevolutionSection, #howitworks-section, #privateLabelsSection, #trust-stats-container, #installmentSection, #purchaseTablesSection, #founders-section, #partnersAndFaqContainer, #page1 > .simulator-container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Keep the top EDS sections visually consistent */ #hero-redesigned, #hero-redesigned .eds-hero-copy, #hero-redesigned .eds-hero-story-card, .social-proof-strip.eds-top-width, #digitalRevolutionSection, #howitworks-section, #privateLabelsSection, #trust-stats-container, #installmentSection, #founders-section, #partnersCard, #faqCard { border-radius: 24px !important; } /* Remove inner width clamps that were creating visible side emptiness */ #hero-redesigned .eds-hero-shell, .social-proof-strip.eds-top-width .social-proof-strip-inner, #founders-section .founders-section, #founders-section .final-cta-section, #page1 .footer-redesigned-inner { width: 100% !important; max-width: none !important; } #hero-redesigned .eds-hero-shell, .social-proof-strip.eds-top-width .social-proof-strip-inner, #founders-section .founders-section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } /* Full-width grids should not collapse because of min-content sizing */ #page1 .simulator-container, #page1 .simulator-container > div, #page1 .simulator-container > section, #purchaseTablesSection, #purchaseTablesSection > div, #partnersAndFaqContainer, #partnersAndFaqContainer > div, #edsPlannerProjectionRow, #edsPlannerProjectionRow > section, #edsPlannerProjectionRow > .card { min-width: 0 !important; } /* Keep the planner / projection row truly edge-to-edge within the page content area */ #edsPlannerProjectionRow { width: 100% !important; max-width: none !important; grid-column: 1 / -1 !important; } /* Slightly reduce page gutters on small screens without removing safe breathing room */ @media (max-width: 1024px) { #hero-redesigned .eds-hero-shell, .social-proof-strip.eds-top-width .social-proof-strip-inner, #founders-section .founders-section { padding-left: 1rem !important; padding-right: 1rem !important; } } @media (max-width: 640px) { #hero-redesigned .eds-hero-shell, .social-proof-strip.eds-top-width .social-proof-strip-inner, #founders-section .founders-section { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* ---- original style block 51 ---- */ #trust-app-section { width: 100% !important; max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; } #trust-app-section .trust-hero-shell { width: 100%; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(340px, 1.06fr); gap: 1rem; align-items: stretch; } #trust-app-section .trust-hero-panel { position: relative; overflow: hidden; min-width: 0; border-radius: 26px; border: 1px solid rgba(56,189,248,0.16); box-shadow: 0 22px 48px rgba(2,12,27,0.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #trust-app-section .trust-hero-content { padding: 2.05rem; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 18%), radial-gradient(circle at top left, rgba(34,211,238,0.09), transparent 30%), radial-gradient(circle at bottom right, rgba(37,99,235,0.12), transparent 34%), linear-gradient(145deg, rgba(7,18,36,0.97), rgba(11,31,55,0.95) 58%, rgba(8,54,82,0.90)); } #trust-app-section .trust-hero-badge { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; max-width: 100%; padding: 0.48rem 0.82rem; border-radius: 999px; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; margin-bottom: 1rem; } #trust-app-section .trust-hero-title { margin: 0; max-width: 13ch; font-size: clamp(2.05rem, 4vw, 3.2rem) !important; line-height: 1.02 !important; letter-spacing: -0.05em; color: #f8fbff !important; font-weight: 800 !important; text-wrap: balance; } #trust-app-section .trust-hero-description { margin: 1rem 0 0; max-width: 58ch; font-size: 1rem; line-height: 1.78; color: #c1d3e6; } #trust-app-section .trust-hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.35rem; } #trust-app-section .trust-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.86rem 1.2rem; border-radius: 999px; text-decoration: none; font-size: 0.92rem; font-weight: 800; line-height: 1; border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease; white-space: nowrap; } #trust-app-section .trust-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(2,12,27,0.24); } #trust-app-section .trust-hero-btn-primary { background: linear-gradient(135deg, #2563eb, #06b6d4); color: #ffffff !important; box-shadow: 0 16px 32px rgba(37,99,235,0.24); } #trust-app-section .trust-hero-btn-secondary { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: #f8fbff !important; } #trust-app-section .trust-hero-chip-row { display: flex; flex-wrap: wrap; gap: 0.58rem; margin-top: 1rem; max-width: 44rem; } #trust-app-section .trust-hero-chip { display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.54rem 0.78rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #dbeafe; font-size: 0.75rem; font-weight: 700; line-height: 1; white-space: nowrap; } #trust-app-section .trust-hero-chip i { font-size: 0.36rem; color: #67e8f9; } #trust-app-section .trust-hero-visual { padding: 1.35rem; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 16%), radial-gradient(circle at top right, rgba(34,211,238,0.08), transparent 28%), radial-gradient(circle at bottom left, rgba(37,99,235,0.12), transparent 34%), linear-gradient(145deg, rgba(8,20,40,0.97), rgba(12,34,58,0.95) 58%, rgba(8,54,82,0.92)); } #trust-app-section .trust-hero-visual::before { content: ''; position: absolute; inset: 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.05); pointer-events: none; } #trust-app-section .trust-hero-visual-header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; } #trust-app-section .trust-hero-visual-kicker { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9fb3c8; font-weight: 800; margin-bottom: 0.28rem; } #trust-app-section .trust-hero-visual-title { margin: 0; max-width: 24ch; font-size: 1.28rem !important; line-height: 1.22 !important; color: #f8fbff !important; font-weight: 800 !important; } #trust-app-section .trust-hero-visual-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.45rem 0.76rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #dbeafe; font-size: 0.74rem; font-weight: 800; white-space: nowrap; } #trust-app-section .trust-hero-architecture-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px, 0.86fr) minmax(0, 1.14fr); gap: 0.95rem; align-items: stretch; } #trust-app-section .trust-hero-layer-stack { display: grid; gap: 0.65rem; } #trust-app-section .trust-hero-layer { appearance: none; width: 100%; text-align: left; display: flex; align-items: center; gap: 0.7rem; min-height: 74px; padding: 0.88rem 0.9rem; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #cfe4f5; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease; } #trust-app-section .trust-hero-layer:hover { transform: translateY(-2px); border-color: rgba(103,232,249,0.22); box-shadow: 0 16px 28px rgba(2,12,27,0.20); } #trust-app-section .trust-hero-layer.is-active { background: linear-gradient(135deg, rgba(37,99,235,0.88), rgba(6,182,212,0.78)); color: #ffffff; border-color: transparent; box-shadow: 0 18px 30px rgba(37,99,235,0.22); } #trust-app-section .trust-hero-layer-index { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; } #trust-app-section .trust-hero-layer.is-active .trust-hero-layer-index { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.18); } #trust-app-section .trust-hero-layer-copy { display: flex; flex-direction: column; gap: 0.16rem; min-width: 0; } #trust-app-section .trust-hero-layer-copy strong { font-size: 0.94rem; line-height: 1.2; font-weight: 800; color: currentColor; } #trust-app-section .trust-hero-layer-copy small { font-size: 0.76rem; line-height: 1.5; color: inherit; opacity: 0.88; } #trust-app-section .trust-hero-detail-panel { position: relative; overflow: hidden; border-radius: 22px; padding: 1.1rem 1.15rem; background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); min-height: 100%; } #trust-app-section .trust-hero-detail-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(34,211,238,0.12), transparent 34%), radial-gradient(circle at bottom left, rgba(59,130,246,0.10), transparent 28%); pointer-events: none; } #trust-app-section .trust-hero-detail-panel > * { position: relative; z-index: 1; } #trust-app-section .trust-hero-detail-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.72rem; border-radius: 999px; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; margin-bottom: 0.8rem; } #trust-app-section .trust-hero-detail-title { margin: 0; font-size: 1.3rem !important; line-height: 1.2 !important; color: #f8fbff !important; font-weight: 800 !important; max-width: 22ch; } #trust-app-section .trust-hero-detail-text { margin: 0.72rem 0 0; color: #c1d3e6; font-size: 0.9rem; line-height: 1.72; max-width: 56ch; } #trust-app-section .trust-hero-detail-list { display: grid; gap: 0.58rem; margin-top: 0.9rem; } #trust-app-section .trust-hero-detail-item { display: flex; align-items: flex-start; gap: 0.58rem; padding: 0.72rem 0.78rem; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #eaf4ff; font-size: 0.82rem; line-height: 1.58; } #trust-app-section .trust-hero-detail-item i { color: #67e8f9; margin-top: 0.14rem; } body.light-mode #trust-app-section .trust-hero-content, body.light-mode #trust-app-section .trust-hero-visual { background: linear-gradient(180deg, rgba(255,255,255,0.26), transparent 18%), radial-gradient(circle at top left, rgba(14,165,233,0.08), transparent 30%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 58%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.20) !important; box-shadow: 0 16px 36px rgba(15,23,42,0.08) !important; } body.light-mode #trust-app-section .trust-hero-badge, body.light-mode #trust-app-section .trust-hero-detail-badge { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.14); color: #0369a1; } body.light-mode #trust-app-section .trust-hero-title, body.light-mode #trust-app-section .trust-hero-visual-title, body.light-mode #trust-app-section .trust-hero-detail-title, body.light-mode #trust-app-section .trust-hero-layer-copy strong { color: #0f172a !important; } body.light-mode #trust-app-section .trust-hero-description, body.light-mode #trust-app-section .trust-hero-visual-kicker, body.light-mode #trust-app-section .trust-hero-detail-text, body.light-mode #trust-app-section .trust-hero-layer-copy small { color: #475569 !important; } body.light-mode #trust-app-section .trust-hero-btn-secondary, body.light-mode #trust-app-section .trust-hero-chip, body.light-mode #trust-app-section .trust-hero-visual-pill, body.light-mode #trust-app-section .trust-hero-layer, body.light-mode #trust-app-section .trust-hero-detail-panel, body.light-mode #trust-app-section .trust-hero-detail-item { background: rgba(255,255,255,0.82) !important; border-color: rgba(148,163,184,0.18) !important; color: #0f172a !important; } body.light-mode #trust-app-section .trust-hero-chip i, body.light-mode #trust-app-section .trust-hero-detail-item i { color: #0ea5e9 !important; } body.light-mode #trust-app-section .trust-hero-layer.is-active { color: #ffffff !important; } body.light-mode #trust-app-section .trust-hero-layer.is-active .trust-hero-layer-copy strong, body.light-mode #trust-app-section .trust-hero-layer.is-active .trust-hero-layer-copy small, body.light-mode #trust-app-section .trust-hero-layer.is-active .trust-hero-layer-index { color: #ffffff !important; } @media (max-width: 1180px) { #trust-app-section .trust-hero-shell { grid-template-columns: 1fr; } #trust-app-section .trust-hero-content, #trust-app-section .trust-hero-visual { padding: 1.25rem; } } @media (max-width: 760px) { #trust-app-section { max-width: 100% !important; } #trust-app-section .trust-hero-content, #trust-app-section .trust-hero-visual { border-radius: 22px; padding: 1rem; } #trust-app-section .trust-hero-title { max-width: none; font-size: clamp(1.95rem, 8vw, 2.6rem) !important; } #trust-app-section .trust-hero-description { font-size: 0.94rem; line-height: 1.72; } #trust-app-section .trust-hero-cta-row { flex-direction: column; align-items: stretch; } #trust-app-section .trust-hero-btn { width: 100%; } #trust-app-section .trust-hero-chip-row { gap: 0.5rem; } #trust-app-section .trust-hero-chip { max-width: 100%; white-space: normal; justify-content: center; line-height: 1.25; } #trust-app-section .trust-hero-visual-header { flex-direction: column; align-items: flex-start; } #trust-app-section .trust-hero-architecture-grid { grid-template-columns: 1fr; } #trust-app-section .trust-hero-layer { min-height: 68px; padding: 0.8rem 0.85rem; } #trust-app-section .trust-hero-detail-title { max-width: none; font-size: 1.16rem !important; } #trust-app-section .trust-hero-detail-text { font-size: 0.88rem; line-height: 1.68; } } /* ---- original style block 52 ---- */ #trust-app-section > .trust-hero-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #trust-app-section > .trust-hero-shell > .trust-hero-content { align-items: flex-start !important; } #trust-app-section > .trust-hero-shell > .trust-hero-visual { align-items: stretch !important; } #trust-app-section > .trust-hero-shell > .trust-hero-content > .trust-hero-badge, #trust-app-section > .trust-hero-shell > .trust-hero-visual > .trust-hero-visual-header { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } body.light-mode #trust-app-section > .trust-hero-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ---- original style block 53 ---- */ /* Make the Trust App showcase photo noticeably bigger without affecting other Trust sections */ #trust-app-showcase-section > div > div { grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr) !important; gap: 1.75rem !important; } #trust-app-showcase-section > div > div > div[style*="order:2"] { max-width: 440px !important; width: 100% !important; margin-left: auto !important; margin-right: 0 !important; } #trust-app-showcase-section img { width: 100% !important; min-height: 340px !important; max-height: 460px !important; object-fit: contain !important; margin: 0 auto !important; } @media (max-width: 900px) { #trust-app-showcase-section > div > div { grid-template-columns: 1fr !important; gap: 1.25rem !important; } #trust-app-showcase-section > div > div > div[style*="order:2"] { max-width: 420px !important; margin: 0 auto !important; } #trust-app-showcase-section img { min-height: 300px !important; max-height: 400px !important; } } @media (max-width: 640px) { #trust-app-showcase-section > div { padding: 1.15rem !important; } #trust-app-showcase-section > div > div > div[style*="order:2"] { max-width: 100% !important; } #trust-app-showcase-section img { min-height: 250px !important; max-height: 340px !important; } } /* ---- original style block 54 ---- */ /* Make the first staking section use the full available page width */ #page4 #staking-hero-section { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; } #page4 #staking-hero-section > .staking-page-shell { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ---- original style block 55 ---- */ /* Tutorial popup must sit above every fixed/sticky UI layer */ .shepherd-modal-overlay-container { z-index: 2147483645 !important; pointer-events: auto !important; } .shepherd-modal-overlay-container .shepherd-modal-overlay-path { fill: rgba(2, 6, 23, 0.82) !important; } .shepherd-element, .shepherd-enabled .shepherd-element, .shepherd-theme-custom.shepherd-element, body .shepherd-element { z-index: 2147483647 !important; } .shepherd-target, .shepherd-enabled.shepherd-target, .shepherd-enabled [data-shepherd-step-id] { z-index: 2147483646 !important; } body.shepherd-active, body.shepherd-active main, body.shepherd-active .page-content { isolation: isolate; } /* ---- original style block 56 ---- */ /* Builder hero top layout */ .builder-hero-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr); gap: 1.4rem; align-items: start; } .builder-copy-block { min-width: 0; } .builder-key-points.builder-key-points-side { margin-top: 0.15rem; align-self: start; display: grid; grid-template-columns: 1fr; gap: 0.7rem; } .builder-key-points.builder-key-points-side .builder-key-point { min-height: 52px; padding: 0.85rem 1rem; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } /* Mobile / tablet bottom glass nav */ .mobile-bottom-page-nav { display: none; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2147483646; padding: 0.45rem; border-radius: 22px; background: rgba(8, 20, 40, 0.78); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 40px rgba(2,12,27,0.34); gap: 0.45rem; align-items: stretch; justify-content: space-between; } .mobile-bottom-page-nav .mobile-bottom-page-nav-inner { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .mobile-bottom-page-nav .egety-nav-page-btn { min-width: 0 !important; width: 100% !important; min-height: 58px; padding: 0.55rem 0.45rem !important; border-radius: 16px !important; display: inline-flex !important; flex-direction: column; align-items: center !important; justify-content: center !important; gap: 0.28rem !important; white-space: normal !important; text-align: center !important; font-size: 0.72rem !important; line-height: 1.1 !important; } .mobile-bottom-page-nav .egety-nav-page-btn i { display: inline-flex !important; font-size: 0.95rem !important; } /* EDS page responsive hardening */ @media (max-width: 1024px) { html, body { overflow-x: hidden !important; } #page1, #page1 > section, #page1 > div, #page1 .simulator-container, #page1 .card, #page1 .results-box, #page1 .styled-table, #page1 .goal-package-grid, #page1 .eds-investor-summary-grid, #page1 .testimonial-row, #page1 .stat-grid-new, #page1 .founders-grid, #page1 #partnersAndFaqContainer, #page1 #edsPlannerProjectionRow { min-width: 0 !important; max-width: 100% !important; } #page1 .styled-table, #page1 .staking-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } #page1 img, #page1 canvas, #page1 iframe, #page1 video { max-width: 100% !important; height: auto !important; } .builder-hero-top { grid-template-columns: 1fr; gap: 1rem; } .builder-key-points.builder-key-points-side { margin-top: 0; } /* Hide top page buttons in header on tablet/mobile */ #egetyNavLinks { display: none !important; } /* Show bottom sticky glass nav only on tablet/mobile */ .mobile-bottom-page-nav { display: flex; } main.relative.min-h-screen { padding-bottom: 108px !important; } } @media (max-width: 640px) { .mobile-bottom-page-nav { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 0.4rem; } .mobile-bottom-page-nav .mobile-bottom-page-nav-inner { gap: 0.38rem; } .mobile-bottom-page-nav .egety-nav-page-btn { min-height: 54px; padding: 0.5rem 0.35rem !important; font-size: 0.68rem !important; } .mobile-bottom-page-nav .egety-nav-page-btn i { font-size: 0.88rem !important; } } /* ---- original style block 57 ---- */ @media (max-width: 1024px) { /* Header should not be sticky on mobile/tablet */ .egety-nav, #egetyNav { position: relative !important; top: auto !important; left: auto !important; right: auto !important; z-index: 1200 !important; transform: none !important; } main.relative.min-h-screen { padding-top: 0 !important; padding-bottom: 88px !important; } /* Smaller premium glass bottom nav */ .mobile-bottom-page-nav { left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; padding: 0.28rem !important; border-radius: 18px !important; background: rgba(8, 20, 40, 0.52) !important; border: 1px solid rgba(255,255,255,0.12) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important; box-shadow: 0 14px 30px rgba(2,12,27,0.26) !important; gap: 0.3rem !important; } .mobile-bottom-page-nav .mobile-bottom-page-nav-inner { gap: 0.3rem !important; } .mobile-bottom-page-nav .egety-nav-page-btn { min-height: 46px !important; padding: 0.38rem 0.3rem !important; border-radius: 14px !important; font-size: 0.64rem !important; gap: 0.18rem !important; box-shadow: none !important; } .mobile-bottom-page-nav .egety-nav-page-btn i { font-size: 0.82rem !important; } /* Keep floating bubbles and WhatsApp above the nav */ .egety-price-bubble, #egetyPriceBubble, .whatsapp-icon { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } .batch-bubble, #batchBubble, #livePriceDot, #bigLiveDataBubble { bottom: calc(144px + env(safe-area-inset-bottom, 0px)) !important; } .white-paper-bubble, #whitePaperBubble { bottom: calc(204px + env(safe-area-inset-bottom, 0px)) !important; } #whatsappPopup { bottom: calc(154px + env(safe-area-inset-bottom, 0px)) !important; } } @media (max-width: 640px) { .mobile-bottom-page-nav { left: 8px !important; right: 8px !important; padding: 0.24rem !important; border-radius: 16px !important; } .mobile-bottom-page-nav .egety-nav-page-btn { min-height: 44px !important; font-size: 0.6rem !important; padding: 0.34rem 0.22rem !important; } .mobile-bottom-page-nav .egety-nav-page-btn i { font-size: 0.76rem !important; } } /* ---- original style block 58 ---- */ /* Remove the empty space under the header on all 4 pages for mobile and tablet */ @media (max-width: 1024px) { .egety-nav, #egetyNav { position: relative !important; top: auto !important; left: auto !important; right: auto !important; } main.relative.min-h-screen { padding-top: 0 !important; } #hero-redesigned, #page1, #page2, #page3, #page4, .page-content, .page-content > section:first-child, .page-content > div:first-child, #page1 > section:first-child, #page2 > section:first-child, #page3 > section:first-child, #page4 > section:first-child, #page1 > div:first-child, #page2 > div:first-child, #page3 > div:first-child, #page4 > div:first-child { margin-top: 0 !important; padding-top: 0 !important; } } /* Make tab-like buttons feel clearly clickable */ .staking-tab-btn, #stakingCoinTabs .staking-tab-btn, #stakingPlanTabs .staking-tab-btn, .page-nav-btn, .egety-nav-page-btn { position: relative; overflow: hidden; isolation: isolate; } .staking-tab-btn::after, #stakingCoinTabs .staking-tab-btn::after, #stakingPlanTabs .staking-tab-btn::after, .page-nav-btn::after, .egety-nav-page-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.16) 45%, transparent 100%); transform: translateX(-140%); opacity: 0; pointer-events: none; } .staking-tab-btn:not(.is-active), #stakingCoinTabs .staking-tab-btn:not(.is-active), #stakingPlanTabs .staking-tab-btn:not(.is-active) { animation: oaiClickablePulse 2.4s ease-in-out infinite; } .staking-tab-btn:not(.is-active)::after, #stakingCoinTabs .staking-tab-btn:not(.is-active)::after, #stakingPlanTabs .staking-tab-btn:not(.is-active)::after { opacity: 1; animation: oaiClickableSheen 2.8s ease-in-out infinite; } .staking-tab-btn:hover, #stakingCoinTabs .staking-tab-btn:hover, #stakingPlanTabs .staking-tab-btn:hover, .page-nav-btn:hover, .egety-nav-page-btn:hover { transform: translateY(-3px) scale(1.02) !important; } .staking-tab-btn:hover i, #stakingCoinTabs .staking-tab-btn:hover i, #stakingPlanTabs .staking-tab-btn:hover i, .page-nav-btn:hover i, .egety-nav-page-btn:hover i { animation: oaiIconNudge 0.7s ease-in-out; } @keyframes oaiClickablePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.00); border-color: rgba(255,255,255,0.08); } 50% { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08); border-color: rgba(103, 232, 249, 0.28); } } @keyframes oaiClickableSheen { 0% { transform: translateX(-140%); } 55% { transform: translateX(140%); } 100% { transform: translateX(140%); } } @keyframes oaiIconNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .staking-tab-btn:not(.is-active), #stakingCoinTabs .staking-tab-btn:not(.is-active), #stakingPlanTabs .staking-tab-btn:not(.is-active) { animation: none !important; } .staking-tab-btn::after, #stakingCoinTabs .staking-tab-btn::after, #stakingPlanTabs .staking-tab-btn::after, .page-nav-btn::after, .egety-nav-page-btn::after { animation: none !important; opacity: 0 !important; } } /* ---- original style block 59 ---- */ /* Remove the extra gap under the header on all 4 pages */ main.relative.min-h-screen { padding-top: 64px !important; } #hero-redesigned, #page1, #page2, #page3, #page4, .page-content, .page-content > *:first-child, #page1 > *:first-child, #page2 > *:first-child, #page3 > *:first-child, #page4 > *:first-child, #page2 > #bds-section, #page3 > #trust-app-section, #page4 > .staking-page-shell { margin-top: 0 !important; padding-top: 0 !important; } #hero-redesigned { padding-top: 0 !important; } @media (max-width: 1024px) { .egety-nav, #egetyNav { position: relative !important; top: auto !important; left: auto !important; right: auto !important; } main.relative.min-h-screen { padding-top: 0 !important; padding-bottom: 88px !important; } #hero-redesigned, #page1, #page2, #page3, #page4, .page-content, .page-content > *:first-child, #page1 > *:first-child, #page2 > *:first-child, #page3 > *:first-child, #page4 > *:first-child, #page2 > #bds-section, #page3 > #trust-app-section, #page4 > .staking-page-shell { margin-top: 0 !important; padding-top: 0 !important; } /* Put the collapsed live-data circle directly above the bottom navbar */ #livePriceDot { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; } /* Keep the expanded live bubble just above the navbar too */ #bigLiveDataBubble { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; } } @media (max-width: 640px) { #livePriceDot { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; } #bigLiveDataBubble { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; } } /* ---- original style block 60 ---- */ #page2 > section:first-child, #page3 > section:first-child, #page4 > section:first-child { margin-top: 0 !important; padding-top: 0 !important; } #page1 > section:first-child#hero-redesigned { margin-top: 0.45rem !important; } @media (max-width: 1024px) { #page2 > section:first-child, #page3 > section:first-child, #page4 > section:first-child { margin-top: 0 !important; padding-top: 0 !important; } #page1 > section:first-child#hero-redesigned { margin-top: 0.4rem !important; } } #theme-switcher, .egety-nav-theme-toggle { position: relative !important; overflow: hidden !important; padding: 2px !important; box-sizing: border-box !important; } #toggle-indicator { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; border-radius: 999px !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(2,12,27,0.28) !important; border: 1px solid rgba(255,255,255,0.9) !important; } .light-mode #toggle-indicator, .dark-mode #toggle-indicator { background: #ffffff !important; } .eds-video-preview { background: linear-gradient(145deg, rgba(7,18,36,0.96), rgba(11,31,55,0.95) 56%, rgba(8,68,96,0.88)); } .eds-video-preview-overlay { position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(34,211,238,0.12), transparent 30%), radial-gradient(circle at bottom right, rgba(37,99,235,0.14), transparent 34%), linear-gradient(180deg, rgba(2,12,27,0.06), rgba(2,12,27,0.42)); pointer-events: none; } .eds-video-preview-badge { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border-radius: 999px; background: rgba(15,23,42,0.72); border: 1px solid rgba(255,255,255,0.12); color: #ffffff; font-size: 0.78rem; font-weight: 800; box-shadow: 0 14px 30px rgba(2,12,27,0.25); } .eds-video-preview-badge i { color: #ff4d4f; } .eds-video-preview-play { position: absolute; inset: auto 18px 18px 18px; z-index: 2; display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.05rem; border-radius: 20px; background: rgba(8,20,40,0.74); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 34px rgba(2,12,27,0.30); } .eds-video-preview-play-circle { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2563eb, #06b6d4); color: #ffffff; box-shadow: 0 16px 28px rgba(37,99,235,0.28); transition: transform .22s ease, box-shadow .22s ease; } .eds-video-preview:hover .eds-video-preview-play-circle { transform: scale(1.06); box-shadow: 0 20px 34px rgba(37,99,235,0.34); } .eds-video-preview-play-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; text-align: left; } .eds-video-preview-play-copy strong { color: #f8fbff; font-size: 0.98rem; line-height: 1.25; font-weight: 800; } .eds-video-preview-play-copy small { color: #c1d3e6; font-size: 0.78rem; line-height: 1.55; font-weight: 600; } .eds-video-chip-row { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; } .lg\:text-left .eds-video-chip-row { justify-content: flex-start; } .eds-video-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.58rem 0.82rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #dbeafe; font-size: 0.78rem; font-weight: 700; line-height: 1; white-space: nowrap; } .eds-video-chip i { color: #67e8f9; } .eds-video-callout { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.05rem; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); } .eds-video-callout-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(34,211,238,0.12); color: #67e8f9; } .eds-video-callout-title { color: #f8fbff; font-size: 0.95rem; font-weight: 800; margin-bottom: 0.18rem; } .eds-video-callout p { margin: 0; color: #c1d3e6; font-size: 0.86rem; line-height: 1.7; } body.light-mode .eds-video-preview { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 58%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.20) !important; box-shadow: 0 16px 36px rgba(15,23,42,0.08) !important; } body.light-mode .eds-video-preview-overlay { background: radial-gradient(circle at top left, rgba(14,165,233,0.08), transparent 30%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(15,23,42,0.08)); } body.light-mode .eds-video-preview-badge, body.light-mode .eds-video-callout, body.light-mode .eds-video-chip { background: rgba(255,255,255,0.88) !important; border-color: rgba(148,163,184,0.18) !important; color: #0f172a !important; } body.light-mode .eds-video-chip i, body.light-mode .eds-video-callout-icon { color: #0ea5e9 !important; } body.light-mode .eds-video-callout-title, body.light-mode .eds-video-preview-play-copy strong { color: #0f172a !important; } body.light-mode .eds-video-callout p, body.light-mode .eds-video-preview-play-copy small { color: #475569 !important; } body.light-mode .eds-video-preview-play { background: rgba(255,255,255,0.90) !important; border-color: rgba(148,163,184,0.18) !important; box-shadow: 0 16px 30px rgba(15,23,42,0.10) !important; } @media (max-width: 767px) { .eds-video-preview-badge { top: 12px; left: 12px; font-size: 0.72rem; padding: 0.5rem 0.72rem; } .eds-video-preview-play { left: 12px; right: 12px; bottom: 12px; padding: 0.8rem 0.85rem; border-radius: 18px; gap: 0.75rem; } .eds-video-preview-play-circle { width: 48px; height: 48px; flex-basis: 48px; } .eds-video-preview-play-copy strong { font-size: 0.9rem; } .eds-video-preview-play-copy small { font-size: 0.74rem; } .eds-video-chip-row { gap: 0.5rem; } .eds-video-chip { white-space: normal; justify-content: center; text-align: center; line-height: 1.3; } .eds-video-callout { padding: 0.85rem 0.9rem; } } /* ---- original style block 61 ---- */ /* Reduce the height of the Trust & Authority section without changing the overall layout */ #founders-section.card { padding-top: 1rem !important; padding-bottom: 1rem !important; } #founders-section .founders-section { padding-left: 0 !important; padding-right: 0 !important; } #founders-section .eg-section-subtitle { margin-bottom: 0 !important; } #founders-section .founders-grid { gap: 1rem !important; margin-top: 1rem !important; } #founders-section .founder-card-new { padding: 1.1rem !important; } #founders-section .founder-card-label { margin-bottom: 0.7rem !important; } #founders-section .founder-row { padding: 0.75rem 0 !important; } #founders-section .stat-grid-new { gap: 0.9rem !important; } #founders-section .stat-box-new { min-height: 180px !important; padding: 1rem !important; } #founders-section .stat-box-new i { margin-bottom: 0.7rem !important; } #founders-section .stat-box-new .stat-num { font-size: 2rem !important; } #founders-section .stat-box-new .stat-lbl { font-size: 0.92rem !important; margin-top: 0.4rem !important; } #founders-section .stat-box-new .stat-num[style*="Olympus Shield"] { font-size: 1rem !important; line-height: 1.2 !important; } @media (max-width: 768px) { #founders-section .stat-box-new { min-height: 150px !important; } } /* Keep EDS dropdown wrappers open to let the menus float above all sections */ #ecosystemSimulatorSection, #edsSelectionControls, #edsPackageSelectWrap, #edsReleaseSelectWrap, #edsBatchSelectWrap { overflow: visible !important; } #edsPackageMenu, #edsReleaseMenu, #edsBatchMenu { z-index: 2147483000 !important; } /* ---- original style block 62 ---- */ .premium-how-section, .premium-plo-section { position: relative; overflow: hidden !important; border-radius: 26px !important; background: radial-gradient(circle at top left, rgba(34,211,238,0.10), transparent 30%), radial-gradient(circle at bottom right, rgba(37,99,235,0.12), transparent 34%), linear-gradient(145deg, rgba(8,20,40,0.96), rgba(12,34,58,0.95) 58%, rgba(8,74,106,0.86)) !important; border: 1px solid rgba(56,189,248,0.16) !important; box-shadow: 0 22px 48px rgba(2,12,27,0.28) !important; } .premium-how-section::before, .premium-plo-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 18%); pointer-events: none; } .premium-how-section > *, .premium-plo-section > * { position: relative; z-index: 1; } .premium-section-head { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.15rem; } .premium-section-head--center { align-items: center; text-align: center; } .premium-section-badge { display: inline-flex; align-items: center; gap: 0.48rem; width: fit-content; max-width: 100%; padding: 0.48rem 0.82rem; border-radius: 999px; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.03em; } .premium-section-subtext { max-width: 60rem; margin: 0; color: #c1d3e6; font-size: 0.96rem; line-height: 1.74; } .hiw-journey-shell { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; padding-top: 0.25rem; } .hiw-progress-line { position: absolute; top: 4.25rem; left: 7%; right: 7%; height: 1px; background: linear-gradient(90deg, rgba(56,189,248,0.10), rgba(56,189,248,0.42), rgba(56,189,248,0.10)); z-index: 0; } .hiw-step-card { position: relative; display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; padding: 1.1rem; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; z-index: 1; } .hiw-step-card:hover { transform: translateY(-6px); border-color: rgba(103,232,249,0.22); box-shadow: 0 20px 34px rgba(2,12,27,0.26); background: rgba(255,255,255,0.06); } .hiw-step-top { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; } .hiw-step-number { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: #f8fbff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; } .hiw-step-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0.42rem 0.72rem; border-radius: 999px; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; font-size: 0.72rem; font-weight: 800; white-space: nowrap; } .hiw-step-icon { width: 58px; height: 58px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(37,99,235,0.86), rgba(6,182,212,0.80)); color: #ffffff; font-size: 1.15rem; box-shadow: 0 16px 30px rgba(37,99,235,0.18); } .hiw-step-card h3 { margin: 0; color: #f8fbff; line-height: 1.18; font-weight: 800; } .hiw-step-card p { margin: 0; color: #c1d3e6; font-size: 0.88rem; line-height: 1.68; flex: 1 1 auto; } .hiw-step-footer { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.08); color: #9fb3c8; font-size: 0.76rem; font-weight: 700; } .hiw-step-footer i { color: #67e8f9; font-size: 0.68rem; } .hiw-bottom-callout { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .hiw-bottom-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.62rem 0.88rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #dbeafe; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .hiw-bottom-chip i { color: #67e8f9; } .plo-premium-shell { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 1rem; align-items: stretch; } .plo-story-card, .plo-impact-card { position: relative; overflow: hidden; border-radius: 24px; padding: 1.2rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .plo-story-card::before, .plo-impact-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(34,211,238,0.10), transparent 34%); pointer-events: none; } .plo-story-card > *, .plo-impact-card > * { position: relative; z-index: 1; } .plo-story-head, .plo-impact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.8rem; } .plo-story-kicker { display: block; margin-bottom: 0.22rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9fb3c8; font-weight: 800; } .plo-story-head h3, .plo-impact-head h4 { margin: 0; color: #f8fbff; font-weight: 800; line-height: 1.22; } .plo-story-badge, .plo-impact-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0.45rem 0.76rem; border-radius: 999px; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; font-size: 0.74rem; font-weight: 800; white-space: nowrap; } .plo-story-copy, .plo-why-card p, .plo-impact-subtitle { margin: 0; color: #c1d3e6; font-size: 0.9rem; line-height: 1.72; } .plo-bridge-steps { display: grid; gap: 0.7rem; margin-top: 1rem; } .plo-bridge-node, .plo-benefit-card, .plo-mini-stat, .plo-why-card, .plo-quote-band { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; } .plo-bridge-node { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.82rem 0.9rem; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } .plo-bridge-node:hover, .plo-benefit-card:hover, .plo-mini-stat:hover, .plo-why-card:hover, .plo-quote-band:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(2,12,27,0.18); border-color: rgba(103,232,249,0.20); } .plo-bridge-index { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(37,99,235,0.82), rgba(6,182,212,0.74)); color: #ffffff; font-size: 0.76rem; font-weight: 800; box-shadow: 0 14px 24px rgba(37,99,235,0.18); } .plo-bridge-node strong, .plo-benefit-card strong, .plo-mini-stat strong { display: block; color: #f8fbff; font-size: 0.9rem; line-height: 1.22; font-weight: 800; } .plo-bridge-node small, .plo-mini-stat small { display: block; margin-top: 0.18rem; color: #9fb3c8; font-size: 0.76rem; line-height: 1.55; } .plo-why-card { margin-top: 1rem; padding: 0.95rem 1rem; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } .plo-why-kicker { display: inline-block; margin-bottom: 0.34rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7dd3fc; font-weight: 800; } .plo-benefit-grid { display: grid; gap: 0.75rem; margin-top: 0.8rem; } .plo-benefit-card { display: flex; align-items: flex-start; gap: 0.78rem; padding: 0.92rem 0.95rem; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } .plo-benefit-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(37,99,235,0.86), rgba(6,182,212,0.78)); color: #ffffff; box-shadow: 0 14px 26px rgba(37,99,235,0.18); } .plo-benefit-card p { margin: 0.22rem 0 0; color: #9fb3c8; font-size: 0.8rem; line-height: 1.62; } .plo-quote-band { margin-top: 0.9rem; display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.9rem 1rem; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } .plo-quote-band i { color: #67e8f9; margin-top: 0.12rem; } .plo-quote-band p { margin: 0; color: #dbeafe; font-size: 0.84rem; line-height: 1.7; font-style: italic; } .plo-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.95rem; } .plo-mini-stat { padding: 0.9rem 0.82rem; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); text-align: center; } .plo-mini-stat span { display: block; margin-bottom: 0.24rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9fb3c8; font-weight: 800; } .plo-action-row { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; } .plo-cta-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.58rem; min-height: 48px; padding: 0.92rem 1.25rem !important; border-radius: 999px !important; font-weight: 800; border: 1px solid transparent; box-shadow: 0 16px 30px rgba(2,12,27,0.18); } .plo-cta-btn i { font-size: 0.9rem; } .plo-cta-btn--primary { background: linear-gradient(135deg, #2563eb, #06b6d4) !important; color: #ffffff !important; } .plo-cta-btn--secondary { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; color: #ffffff !important; } body.light-mode .premium-how-section, body.light-mode .premium-plo-section { background: radial-gradient(circle at top left, rgba(14,165,233,0.08), transparent 30%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 58%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.20) !important; box-shadow: 0 16px 36px rgba(15,23,42,0.08) !important; } body.light-mode .premium-section-badge, body.light-mode .hiw-step-pill, body.light-mode .plo-story-badge, body.light-mode .plo-impact-pill, body.light-mode .plo-why-kicker { background: rgba(14,165,233,0.08) !important; border-color: rgba(14,165,233,0.14) !important; color: #0369a1 !important; } body.light-mode .premium-section-subtext, body.light-mode .hiw-step-card p, body.light-mode .hiw-step-footer, body.light-mode .plo-story-copy, body.light-mode .plo-impact-subtitle, body.light-mode .plo-why-card p, body.light-mode .plo-benefit-card p, body.light-mode .plo-quote-band p, body.light-mode .plo-bridge-node small, body.light-mode .plo-mini-stat small, body.light-mode .plo-mini-stat span, body.light-mode .plo-story-kicker { color: #475569 !important; } body.light-mode .hiw-step-card, body.light-mode .hiw-bottom-chip, body.light-mode .plo-story-card, body.light-mode .plo-impact-card, body.light-mode .plo-bridge-node, body.light-mode .plo-why-card, body.light-mode .plo-benefit-card, body.light-mode .plo-quote-band, body.light-mode .plo-mini-stat, body.light-mode .plo-cta-btn--secondary { background: rgba(255,255,255,0.86) !important; border-color: rgba(148,163,184,0.18) !important; color: #0f172a !important; } body.light-mode .hiw-step-card h3, body.light-mode .hiw-step-number, body.light-mode .hiw-bottom-chip, body.light-mode .plo-story-head h3, body.light-mode .plo-impact-head h4, body.light-mode .plo-bridge-node strong, body.light-mode .plo-benefit-card strong, body.light-mode .plo-mini-stat strong, body.light-mode .plo-cta-btn--secondary { color: #0f172a !important; } body.light-mode .hiw-step-number { background: rgba(14,165,233,0.08) !important; border-color: rgba(14,165,233,0.14) !important; } body.light-mode .hiw-progress-line { background: linear-gradient(90deg, rgba(96,165,250,0.08), rgba(59,130,246,0.28), rgba(96,165,250,0.08)) !important; } body.light-mode .plo-cta-btn--primary { color: #ffffff !important; } @media (max-width: 1180px) { .hiw-journey-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hiw-progress-line { display: none; } .plo-premium-shell { grid-template-columns: 1fr; } } @media (max-width: 760px) { .premium-how-section, .premium-plo-section { border-radius: 22px !important; } .hiw-journey-shell, .plo-mini-stats { grid-template-columns: 1fr; } .hiw-step-card, .plo-story-card, .plo-impact-card { padding: 1rem; border-radius: 20px; } .hiw-step-top, .plo-story-head, .plo-impact-head { flex-direction: column; align-items: flex-start; } .hiw-step-footer { gap: 0.35rem; } .hiw-bottom-callout, .plo-action-row { flex-direction: column; align-items: stretch; } .hiw-bottom-chip, .plo-cta-btn { width: 100%; justify-content: center; } } /* ---- original style block 63 ---- */ #installmentSection.installment-premium-section { position: relative; overflow: visible !important; padding: 1.15rem !important; border-radius: 28px !important; background: radial-gradient(circle at top left, rgba(34,211,238,0.10), transparent 26%), radial-gradient(circle at bottom right, rgba(37,99,235,0.12), transparent 30%), linear-gradient(145deg, rgba(7,18,36,0.97), rgba(11,31,55,0.95) 58%, rgba(8,74,106,0.88)) !important; border: 1px solid rgba(56,189,248,0.18) !important; box-shadow: 0 22px 52px rgba(2,12,27,0.30) !important; } #installmentSection .installment-premium-shell { display: grid; gap: 1rem; } #installmentSection .installment-premium-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } #installmentSection .installment-premium-title-wrap { min-width: 0; flex: 1 1 520px; } #installmentSection .installment-premium-kicker { display: inline-flex; align-items: center; gap: 0.48rem; width: fit-content; max-width: 100%; padding: 0.46rem 0.78rem; border-radius: 999px; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.03em; margin-bottom: 0.8rem; } #installmentSection .installment-premium-title { margin-bottom: 0.5rem !important; color: #f8fbff !important; text-align: left !important; } #installmentSection .installment-premium-subtitle { margin: 0; max-width: 62ch; color: #c1d3e6; font-size: 0.95rem; line-height: 1.78; } #installmentSection .installment-premium-spotlight { min-width: 240px; max-width: 100%; padding: 1rem 1.05rem; border-radius: 22px; background: linear-gradient(135deg, rgba(37,99,235,0.26), rgba(6,182,212,0.18)); border: 1px solid rgba(103,232,249,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 0.18rem; align-self: stretch; } #installmentSection .installment-premium-spotlight-label { font-size: 0.72rem; color: #9fb3c8; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; } #installmentSection .installment-premium-spotlight-value { color: #f8fbff; font-size: 1.3rem; font-weight: 900; line-height: 1.15; } #installmentSection .installment-premium-spotlight-sub { color: #dbeafe; font-size: 0.8rem; line-height: 1.45; font-weight: 600; } #installmentSection .installment-premium-chip-row { display: flex; flex-wrap: wrap; gap: 0.65rem; } #installmentSection .installment-premium-chip { display: inline-flex; align-items: center; gap: 0.48rem; padding: 0.55rem 0.8rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #dbeafe; font-size: 0.78rem; font-weight: 700; line-height: 1; white-space: nowrap; } #installmentSection .installment-premium-chip i { color: #67e8f9; } #installmentSection .installment-premium-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } #installmentSection .installment-premium-panel { position: relative; overflow: visible !important; min-width: 0; padding: 1.15rem; border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); display: grid; gap: 1rem; } #installmentSection .installment-premium-panel--accent { background: linear-gradient(145deg, rgba(20,57,95,0.44), rgba(10,34,58,0.46)); border-color: rgba(103,232,249,0.16); } #installmentSection .installment-premium-panel-top { display: flex; align-items: center; gap: 0.85rem; } #installmentSection .installment-premium-panel-icon { width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 54px; background: linear-gradient(135deg, rgba(37,99,235,0.82), rgba(6,182,212,0.80)); color: #ffffff; box-shadow: 0 16px 28px rgba(37,99,235,0.22); font-size: 1.05rem; } #installmentSection .installment-premium-panel-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.16rem; } #installmentSection .installment-premium-panel-label { font-size: 0.72rem; color: #9fb3c8; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; } #installmentSection .installment-premium-panel-title { color: #f8fbff; font-size: 1rem; font-weight: 800; line-height: 1.24; } #installmentSection .installment-premium-field { display: grid; gap: 0.55rem; } #installmentSection .installment-premium-field-label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: #dbeafe; font-size: 0.82rem; font-weight: 700; line-height: 1.3; } #installmentSection .installment-premium-field-label-text { min-width: 0; } #installmentSection .installment-premium-input-shell { min-height: 72px; display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.95rem; border-radius: 20px; background: rgba(4,14,28,0.42); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } #installmentSection .installment-premium-currency-code { flex: 0 0 auto; color: #f8fbff; font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; } #installmentSection .installment-premium-input { min-width: 0; width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #f8fbff !important; font-size: clamp(1.45rem, 3vw, 1.9rem) !important; font-weight: 900 !important; letter-spacing: -0.03em; line-height: 1; } #installmentSection .installment-premium-input::placeholder { color: rgba(226,232,240,0.56); } #installmentSection .installment-premium-rate-line, #installmentSection .installment-premium-budget-note { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%; padding: 0.52rem 0.72rem; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #cbd5e1; font-size: 0.76rem; font-weight: 700; line-height: 1.3; } #installmentSection .installment-premium-rate-line i, #installmentSection .installment-premium-budget-note i { color: #67e8f9; flex: 0 0 auto; } #installmentSection .installment-premium-options { display: grid; gap: 0.7rem; } #installmentSection .installment-premium-check-card { display: block; border-radius: 18px; padding: 0.88rem 0.95rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; } #installmentSection .installment-premium-check-card:hover { transform: translateY(-2px); border-color: rgba(103,232,249,0.22); box-shadow: 0 14px 26px rgba(2,12,27,0.18); } #installmentSection .installment-premium-check-left { display: flex; align-items: flex-start; gap: 0.72rem; } #installmentSection .installment-premium-check-left input { margin-top: 0.15rem; flex: 0 0 auto; } #installmentSection .installment-premium-check-copy { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; } #installmentSection .installment-premium-check-copy strong { color: #f8fbff; font-size: 0.88rem; line-height: 1.25; font-weight: 800; } #installmentSection .installment-premium-check-copy small { color: #9fb3c8; font-size: 0.76rem; line-height: 1.55; } #installmentSection .installment-premium-toggle-card { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.95rem 1rem; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); } #installmentSection .installment-premium-toggle-copy { min-width: 0; display: grid; gap: 0.25rem; } #installmentSection .installment-premium-toggle-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.42rem; color: #f8fbff; font-size: 0.88rem; font-weight: 800; line-height: 1.3; } #installmentSection .installment-premium-toggle-subcopy { margin: 0; color: #9fb3c8; font-size: 0.78rem; line-height: 1.58; } #installmentSection .installment-premium-toggle-control { flex: 0 0 auto; } #installmentSection .installment-premium-slider-card { padding: 0.95rem 1rem; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); } #installmentSection .installment-premium-slider-label { color: #9fb3c8 !important; font-size: 0.76rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.08em; } #installmentSection .installment-premium-slider-value { color: #f8fbff; font-size: 0.98rem; font-weight: 900; } #installmentSection .installment-results-premium-grid { margin-top: 0.2rem; } #installmentSection #installmentResultsContainer .installment-suggestion-card { border-radius: 22px !important; background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 18px 32px rgba(2,12,27,0.20) !important; } #installmentSection #installmentResultsContainer .installment-card-header { border-bottom: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; } #installmentSection #installmentResultsContainer .data-row { border-bottom: 1px solid rgba(255,255,255,0.06) !important; } body.light-mode #installmentSection.installment-premium-section { background: radial-gradient(circle at top left, rgba(14,165,233,0.08), transparent 26%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08), transparent 30%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 58%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 16px 36px rgba(15,23,42,0.08) !important; } body.light-mode #installmentSection .installment-premium-kicker { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.14); color: #0369a1; } body.light-mode #installmentSection .installment-premium-title, body.light-mode #installmentSection .installment-premium-panel-title, body.light-mode #installmentSection .installment-premium-currency-code, body.light-mode #installmentSection .installment-premium-input, body.light-mode #installmentSection .installment-premium-spotlight-value, body.light-mode #installmentSection .installment-premium-check-copy strong, body.light-mode #installmentSection .installment-premium-toggle-label, body.light-mode #installmentSection .installment-premium-slider-value { color: #0f172a !important; } body.light-mode #installmentSection .installment-premium-subtitle, body.light-mode #installmentSection .installment-premium-panel-label, body.light-mode #installmentSection .installment-premium-spotlight-label, body.light-mode #installmentSection .installment-premium-spotlight-sub, body.light-mode #installmentSection .installment-premium-check-copy small, body.light-mode #installmentSection .installment-premium-toggle-subcopy, body.light-mode #installmentSection .installment-premium-rate-line, body.light-mode #installmentSection .installment-premium-budget-note, body.light-mode #installmentSection .installment-premium-chip, body.light-mode #installmentSection .installment-premium-slider-label { color: #475569 !important; } body.light-mode #installmentSection .installment-premium-spotlight, body.light-mode #installmentSection .installment-premium-panel, body.light-mode #installmentSection .installment-premium-input-shell, body.light-mode #installmentSection .installment-premium-check-card, body.light-mode #installmentSection .installment-premium-toggle-card, body.light-mode #installmentSection .installment-premium-slider-card, body.light-mode #installmentSection .installment-premium-rate-line, body.light-mode #installmentSection .installment-premium-budget-note, body.light-mode #installmentSection .installment-premium-chip, body.light-mode #installmentSection #installmentResultsContainer .installment-suggestion-card, body.light-mode #installmentSection #installmentResultsContainer .installment-card-header { background: rgba(255,255,255,0.88) !important; border-color: rgba(148,163,184,0.18) !important; box-shadow: 0 12px 24px rgba(15,23,42,0.06) !important; } body.light-mode #installmentSection .installment-premium-panel--accent { background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(239,246,255,0.96)) !important; } body.light-mode #installmentSection .installment-premium-panel-icon { box-shadow: 0 12px 24px rgba(37,99,235,0.14); } body.light-mode #installmentSection #installmentResultsContainer .data-row { border-bottom-color: rgba(148,163,184,0.18) !important; } @media (max-width: 1024px) { #installmentSection .installment-premium-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { #installmentSection.installment-premium-section { padding: 0.95rem !important; border-radius: 24px !important; } #installmentSection .installment-premium-panel, #installmentSection .installment-premium-spotlight { border-radius: 20px; } #installmentSection .installment-premium-header { gap: 0.85rem; } #installmentSection .installment-premium-spotlight { min-width: 0; width: 100%; } } @media (max-width: 640px) { #installmentSection .installment-premium-title { font-size: 1.75rem !important; line-height: 1.08 !important; } #installmentSection .installment-premium-subtitle { font-size: 0.88rem; line-height: 1.72; } #installmentSection .installment-premium-chip-row { display: grid; grid-template-columns: 1fr; } #installmentSection .installment-premium-chip { white-space: normal; justify-content: flex-start; } #installmentSection .installment-premium-input-shell { min-height: 64px; padding: 0.72rem 0.82rem; gap: 0.65rem; } #installmentSection .installment-premium-input { font-size: 1.3rem !important; } #installmentSection .installment-premium-toggle-card { align-items: flex-start; } } /* ---- original style block 64 ---- */ #installmentSection .installment-card-body--package { gap: 0.7rem; } #installmentSection .installment-card-media { display: block; text-align: center; } #installmentSection .installment-package-image-wrap { margin-bottom: 0.75rem; } #installmentSection .installment-package-name { margin: 0; } #installmentSection .installment-package-grade { margin-top: 0.2rem; } @media (max-width: 1024px) { #installmentSection #installmentResultsContainer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch; } #installmentSection #installmentResultsContainer .installment-suggestion-card { overflow: hidden !important; } #installmentSection #installmentResultsContainer .installment-card-body--package { padding: 1rem !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.7rem !important; } #installmentSection #installmentResultsContainer .installment-card-media { order: 0; } #installmentSection #installmentResultsContainer .installment-package-image-wrap { width: 100% !important; height: 140px !important; position: relative !important; margin-bottom: 0.75rem !important; border-radius: 14px !important; overflow: hidden !important; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } #installmentSection #installmentResultsContainer .installment-package-image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } #installmentSection #installmentResultsContainer .installment-package-name { font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1.25 !important; color: #f8fbff !important; margin: 0 !important; } #installmentSection #installmentResultsContainer .installment-package-grade { font-size: 0.82rem !important; font-weight: 600 !important; line-height: 1.55 !important; color: #9fb3c8 !important; margin: 0.2rem 0 0 !important; opacity: 1 !important; } #installmentSection #installmentResultsContainer .star-rating { margin: 0.35rem 0 0 !important; display: flex; justify-content: center; gap: 0.18rem; } #installmentSection #installmentResultsContainer .data-row { position: static !important; inset: auto !important; width: 100% !important; } } @media (max-width: 767px) { #installmentSection #installmentResultsContainer { grid-template-columns: 1fr !important; } } body.light-mode #installmentSection #installmentResultsContainer .installment-package-image-wrap { background: rgba(255,255,255,0.92) !important; border-color: rgba(148,163,184,0.22) !important; } body.light-mode #installmentSection #installmentResultsContainer .installment-package-name { color: #0f172a !important; } body.light-mode #installmentSection #installmentResultsContainer .installment-package-grade { color: #475569 !important; } /* ---- original style block 65 ---- */ /* Consolidated secondary-page cleanup */ body[data-active-page="page2"] #page2 .installment-placeholder-text, body[data-active-page="page2"] #page2 [data-translate="installment_placeholder"], body[data-active-page="page3"] #page3 .installment-placeholder-text, body[data-active-page="page3"] #page3 [data-translate="installment_placeholder"], body[data-active-page="page4"] #page4 .installment-placeholder-text, body[data-active-page="page4"] #page4 [data-translate="installment_placeholder"] { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Consolidated Agent compare layout */ #agentResults .agent-compare-grid, #resultsContainer .agent-compare-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; align-items: start !important; } #agentResults .agent-compare-grid.is-single, #resultsContainer .agent-compare-grid.is-single { grid-template-columns: 1fr !important; } #agentResults .agent-compare-card, #resultsContainer .agent-compare-card { min-width: 0 !important; } #agentResults .agent-compare-card .card, #resultsContainer .agent-compare-card .card { margin: 0 !important; } #agentResults .results-box { border: none !important; border-left: 4px solid var(--accent-color) !important; background-color: color-mix(in srgb, var(--accent-color) 15%, transparent) !important; padding: 0.5rem !important; transition: background-color 0.3s ease, transform 0.2s ease; } #agentResults .results-box:hover { background-color: color-mix(in srgb, var(--accent-color) 25%, transparent) !important; transform: translateY(-2px); } #agentResults .results-box p.text-xs { font-size: 1rem !important; } #agentResults .results-box p.font-bold { font-size: 1.6rem !important; font-weight: 700 !important; line-height: 1.15; } @media (max-width: 900px) { #agentResults .agent-compare-grid, #resultsContainer .agent-compare-grid { grid-template-columns: 1fr !important; } } /* ---- original style block 66 ---- */ /* Remove hover motion/rotation/lift only from Simulator Breakdown - Distribution of Fees */ #feeDistributionWrapper, #feeDistributionWrapper:hover, #feeDistributionSection, #feeDistributionSection:hover, #feeDistributionWrapper .fee-distribution-col, #feeDistributionWrapper .fee-distribution-col:hover, #feeDistributionWrapper .fee-distribution-chart-col, #feeDistributionWrapper .fee-distribution-chart-col:hover, #feeDistributionWrapper .fd-summary-card, #feeDistributionWrapper .fd-summary-card:hover, #feeDistributionWrapper .fd-legend-item, #feeDistributionWrapper .fd-legend-item:hover, #feeDistributionWrapper .fee-distribution-table tbody tr, #feeDistributionWrapper .fee-distribution-table tbody tr:hover, #feeDistributionWrapper .fd-active-row, #feeDistributionWrapper .fd-active-legend { transform: none !important; rotate: none !important; } #feeDistributionWrapper, #feeDistributionSection, #feeDistributionWrapper .fee-distribution-col, #feeDistributionWrapper .fee-distribution-chart-col, #feeDistributionWrapper .fd-summary-card, #feeDistributionWrapper .fd-legend-item, #feeDistributionWrapper .fee-distribution-table tbody tr { transform-style: flat !important; will-change: auto !important; } /* ---- original style block 67 ---- */ .legal-overlay { position: fixed; inset: 0; z-index: 2147483646; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(2, 6, 23, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .legal-overlay.is-open { display: flex; } .legal-page { width: min(1100px, 100%); max-height: min(90vh, 920px); overflow: hidden; border-radius: 28px; border: 1px solid rgba(56, 189, 248, 0.18); background: radial-gradient(circle at top left, rgba(34,211,238,0.10), transparent 28%), radial-gradient(circle at bottom right, rgba(37,99,235,0.12), transparent 34%), linear-gradient(145deg, rgba(7,18,36,0.98), rgba(11,31,55,0.97) 58%, rgba(8,68,96,0.92)); box-shadow: 0 28px 64px rgba(2, 12, 27, 0.38); color: #e2e8f0; display: flex; flex-direction: column; } .legal-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.45rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .legal-page-kicker { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; max-width: 100%; padding: 0.42rem 0.75rem; border-radius: 999px; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.18); color: #7dd3fc; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; margin-bottom: 0.75rem; } .legal-page-title { margin: 0; color: #f8fbff; font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; } .legal-page-subtitle { margin: 0.55rem 0 0; color: #c1d3e6; font-size: 0.9rem; line-height: 1.7; max-width: 64ch; } .legal-close-btn { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); color: #f8fbff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } .legal-close-btn:hover { transform: translateY(-2px); border-color: rgba(103,232,249,0.28); box-shadow: 0 16px 30px rgba(2,12,27,0.22); background: rgba(34,211,238,0.12); } .legal-page-body { overflow: auto; padding: 1.2rem 1.45rem 1.5rem; display: grid; gap: 1rem; scroll-behavior: smooth; } .legal-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } .legal-summary-card, .legal-section, .legal-highlight-box { border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .legal-summary-card { padding: 1rem; } .legal-summary-card .label { display: block; margin-bottom: 0.28rem; color: #9fb3c8; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800; } .legal-summary-card .value { color: #f8fbff; font-size: 0.96rem; line-height: 1.55; font-weight: 700; } .legal-highlight-box { padding: 1rem 1.05rem; } .legal-highlight-box strong { color: #f8fbff; } .legal-highlight-box p { margin: 0.4rem 0 0; color: #c1d3e6; font-size: 0.88rem; line-height: 1.75; } .legal-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .legal-section { padding: 1.05rem 1.1rem; } .legal-section h3 { margin: 0 0 0.65rem; color: #f8fbff; font-size: 1rem !important; line-height: 1.35 !important; font-weight: 800; } .legal-section p, .legal-section li { color: #c1d3e6; font-size: 0.88rem; line-height: 1.78; } .legal-section p:last-child { margin-bottom: 0; } .legal-section ul { margin: 0.7rem 0 0; padding-left: 1.1rem; } .legal-section li + li { margin-top: 0.34rem; } .legal-section .mini-note { margin-top: 0.65rem; padding: 0.72rem 0.8rem; border-radius: 14px; background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.14); color: #dbeafe; font-size: 0.8rem; } .legal-divider-title { margin: 0; color: #f8fbff; font-size: 1.05rem !important; line-height: 1.3 !important; font-weight: 800; } .legal-page-body a { color: #7dd3fc; } body.legal-open { overflow: hidden !important; } body.light-mode .legal-page { background: radial-gradient(circle at top left, rgba(14,165,233,0.08), transparent 28%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.99), rgba(248,250,252,0.98) 58%, rgba(239,246,255,0.98)) !important; color: #0f172a; border-color: rgba(148,163,184,0.22); box-shadow: 0 18px 40px rgba(15,23,42,0.12); } body.light-mode .legal-page-header { border-bottom-color: rgba(148,163,184,0.18); } body.light-mode .legal-page-kicker { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.14); color: #0369a1; } body.light-mode .legal-page-title, body.light-mode .legal-summary-card .value, body.light-mode .legal-section h3, body.light-mode .legal-highlight-box strong, body.light-mode .legal-divider-title { color: #0f172a; } body.light-mode .legal-page-subtitle, body.light-mode .legal-summary-card .label, body.light-mode .legal-section p, body.light-mode .legal-section li, body.light-mode .legal-highlight-box p, body.light-mode .legal-section .mini-note { color: #475569; } body.light-mode .legal-summary-card, body.light-mode .legal-section, body.light-mode .legal-highlight-box { background: rgba(255,255,255,0.86); border-color: rgba(148,163,184,0.18); box-shadow: 0 10px 24px rgba(15,23,42,0.06); } body.light-mode .legal-close-btn { background: rgba(255,255,255,0.86); color: #0f172a; border-color: rgba(148,163,184,0.18); } body.light-mode .legal-close-btn:hover { background: rgba(219,234,254,0.78); } @media (max-width: 900px) { .legal-summary-grid, .legal-grid-two { grid-template-columns: 1fr; } } @media (max-width: 640px) { .legal-overlay { padding: 0.7rem; } .legal-page { max-height: 100vh; width: 100%; border-radius: 22px; } .legal-page-header, .legal-page-body { padding-left: 1rem; padding-right: 1rem; } .legal-page-header { padding-top: 1rem; padding-bottom: 0.85rem; } .legal-close-btn { width: 44px; height: 44px; } } /* ---- original style block 68 ---- */ .compare-card { border: 1px solid #00F0FF; border-radius: 10px; padding: 12px; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); } [data-role="compare-container"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 768px) { [data-role="compare-container"] { grid-template-columns: repeat(2, 1fr); } } /* ---- original style block 69 ---- */ /* Final layout fixes for agent mode and save/compare */ .agent-results-card .agent-results-grid{ display:grid; gap:12px; } .agent-results-card.agent-expanded-layout .agent-results-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .agent-results-card.agent-compact-layout .agent-results-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .agent-results-card.agent-expanded-layout .agent-results-grid .main-value{ font-size:2.7rem !important; line-height:1.08 !important; } .agent-results-card.agent-expanded-layout .agent-results-grid .label{ font-size:1.32rem !important; line-height:1.15 !important; } .agent-results-card.agent-expanded-layout .agent-results-grid .results-box{ min-height:96px; } .agent-results-card.agent-compact-layout .agent-results-grid .main-value{ font-size:1.55rem !important; line-height:1.18 !important; } .agent-results-card.agent-compact-layout .agent-results-grid .label{ font-size:0.95rem !important; line-height:1.15 !important; } .agent-results-card.agent-compact-layout .agent-results-grid .results-box{ min-height:84px; } #resultsContainer .agent-compare-grid-fixed{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; } @media (max-width: 900px){ #resultsContainer .agent-compare-grid-fixed{ grid-template-columns:1fr; } } /* ---- original style block 70 ---- */ /* Final requested fix: make staking toggles show the white circle clearly */ .staking-fee-toggle-control { position: relative !important; width: 3rem !important; height: 1.6rem !important; flex: 0 0 3rem !important; overflow: visible !important; } .staking-fee-toggle-control .toggle-label { position: relative !important; display: block !important; width: 3rem !important; height: 1.6rem !important; border-radius: 999px !important; overflow: hidden !important; background: linear-gradient(135deg, rgba(96,165,250,0.22), rgba(34,211,238,0.18)) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important; z-index: 1 !important; } .staking-fee-toggle-control .toggle-checkbox { position: absolute !important; top: 2px !important; left: 2px !important; width: 1.35rem !important; height: 1.35rem !important; min-width: 1.35rem !important; min-height: 1.35rem !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: #ffffff !important; box-shadow: 0 4px 12px rgba(2,12,27,0.28) !important; appearance: none !important; -webkit-appearance: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; z-index: 2 !important; } .staking-fee-toggle-control .toggle-checkbox:checked { left: calc(100% - 1.35rem - 2px) !important; background: #ffffff !important; } .staking-fee-toggle-control .toggle-checkbox:checked + .toggle-label { background: linear-gradient(135deg, #22d3ee, #38bdf8) !important; border-color: rgba(255,255,255,0.14) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 14px rgba(34,211,238,0.24) !important; } [dir="rtl"] .staking-fee-toggle-control .toggle-checkbox { left: auto !important; right: 2px !important; } [dir="rtl"] .staking-fee-toggle-control .toggle-checkbox:checked { right: calc(100% - 1.35rem - 2px) !important; left: auto !important; } /* Final requested fix: Builder, Trust, and Staking first section spacing matches EDS */ #page1, #page2, #page3, #page4 { padding-top: 0 !important; } #page1 > *:first-child, #page2 > *:first-child, #page3 > *:first-child, #page4 > *:first-child, body[data-active-page="page2"] #builder-section, body[data-active-page="page3"] #trust-app-section, body[data-active-page="page4"] #staking-hero-section { margin-top: 1rem !important; padding-top: 0 !important; } @media (max-width: 1024px) { #page1 > *:first-child, #page2 > *:first-child, #page3 > *:first-child, #page4 > *:first-child, body[data-active-page="page2"] #builder-section, body[data-active-page="page3"] #trust-app-section, body[data-active-page="page4"] #staking-hero-section { margin-top: 0.9rem !important; } } @media (max-width: 640px) { #page1 > *:first-child, #page2 > *:first-child, #page3 > *:first-child, #page4 > *:first-child, body[data-active-page="page2"] #builder-section, body[data-active-page="page3"] #trust-app-section, body[data-active-page="page4"] #staking-hero-section { margin-top: 0.8rem !important; } } /* ---- original style block 71 ---- */ #feeDistributionWrapper.fee-distribution-shell { padding: 1.2rem !important; border-radius: 26px !important; background: radial-gradient(circle at top left, rgba(34,211,238,0.14), transparent 28%), radial-gradient(circle at bottom right, rgba(37,99,235,0.16), transparent 34%), linear-gradient(145deg, rgba(7,18,36,0.98), rgba(11,31,55,0.96) 56%, rgba(8,68,96,0.92)) !important; border: 1px solid rgba(56,189,248,0.18) !important; box-shadow: 0 24px 56px rgba(2,12,27,0.32), inset 0 1px 0 rgba(255,255,255,0.04) !important; } #feeDistributionSection { position: relative; overflow: visible !important; } .fd-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .fd-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .78rem; border-radius: 999px; background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.18); color: #7dd3fc; font-size: .74rem; font-weight: 800; letter-spacing: .04em; margin-bottom: .75rem; width: fit-content; } .fd-eyebrow-dot { width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, #22d3ee, #2563eb); box-shadow: 0 0 0 6px rgba(34,211,238,.10); } .fd-title-wrap h3 { margin: 0 !important; color: #f8fbff !important; font-size: 1.55rem !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -0.03em; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .fd-subtitle { margin-top: .4rem; color: #9fb3c8; font-size: .9rem; line-height: 1.7; max-width: 58ch; } .fd-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; min-width: min(100%, 420px); } .fd-summary-card { border-radius: 18px; padding: .9rem 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .fd-summary-card span { display: block; } .fd-summary-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #9fb3c8; font-weight: 800; margin-bottom: .2rem; } .fd-summary-value { color: #f8fbff; font-size: 1rem; line-height: 1.25; font-weight: 800; } .fee-distribution-grid { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(300px,.9fr) minmax(0,1fr); gap: 1rem !important; align-items: stretch !important; } .fee-distribution-col, .fee-distribution-chart-col { border-radius: 22px !important; padding: 1rem !important; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } .fd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; } .fd-panel-kicker { display: inline-flex; align-items: center; gap: .38rem; color: #9fb3c8; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; } .fd-panel-kicker i { color: #67e8f9; } .fd-table-wrap { overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); } .fee-distribution-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; } .fee-distribution-table thead tr, .fee-distribution-table thead th { background: transparent !important; border: 0 !important; } .fee-distribution-table th { padding: .78rem .85rem !important; font-size: .74rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .06em; color: #9fb3c8 !important; } .fee-distribution-table td { padding: .78rem .85rem !important; color: #eaf4ff !important; border-top: 1px solid rgba(255,255,255,.06) !important; vertical-align: middle; } .fee-distribution-table tbody tr { transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease; cursor: pointer; } .fee-distribution-table tbody tr:hover { transform: translateY(-1px); background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(34,211,238,.10)) !important; box-shadow: inset 0 0 0 1px rgba(103,232,249,.10); } .fee-distribution-table tbody tr.fd-active-row { background: linear-gradient(90deg, rgba(37,99,235,.18), rgba(34,211,238,.16)) !important; box-shadow: inset 0 0 0 1px rgba(103,232,249,.22), 0 10px 22px rgba(2,12,27,.16); } .fd-category-cell { display: flex; align-items: center; gap: .62rem; min-width: 0; } .fd-swatch { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; box-shadow: 0 0 0 5px rgba(255,255,255,.03); } .fd-category-text { font-weight: 700; color: #f8fbff; line-height: 1.35; } .fd-amount-cell { font-weight: 800; color: #eaf4ff; white-space: nowrap; } .fd-percent-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 34px; padding: .35rem .65rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-weight: 800; color: #dbeafe; white-space: nowrap; } .fee-distribution-chart-col { display: flex !important; flex-direction: column; justify-content: center; gap: .9rem; } .fd-chart-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; } .fd-chart-title { color: #f8fbff; font-size: 1rem; font-weight: 800; line-height: 1.25; } .fd-chart-sub { color: #9fb3c8; font-size: .8rem; line-height: 1.55; margin-top: .16rem; } .fd-chart-badge { display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; padding: .42rem .72rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #dbeafe; font-size: .74rem; font-weight: 800; white-space: nowrap; } .fd-chart-shell { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; } #feeDistributionChart { width: 100% !important; height: 340px !important; max-width: 340px !important; min-height: 340px !important; margin: 0 auto; filter: drop-shadow(0 18px 36px rgba(2,12,27,.18)); } .fd-chart-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 132px; height: 132px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), rgba(56,189,248,.12) 24%, rgba(7,18,36,.96) 76%); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 38px rgba(2,12,27,.24), inset 0 1px 14px rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: .8rem; } .fd-chart-center-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #9fb3c8; } .fd-chart-center-value { margin-top: .18rem; color: #ffffff; font-size: 1rem; line-height: 1.18; font-weight: 800; } .fd-chart-center-sub { margin-top: .18rem; color: #c1d3e6; font-size: .68rem; line-height: 1.35; } .fd-chart-legend { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; } .fd-legend-item { display: flex; align-items: center; gap: .5rem; padding: .55rem .62rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; min-width: 0; } .fd-legend-item:hover, .fd-legend-item.fd-active-legend { transform: translateY(-1px); background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(34,211,238,.10)); border-color: rgba(103,232,249,.18); } .fd-legend-text { display: flex; flex-direction: column; min-width: 0; gap: .1rem; } .fd-legend-name { color: #eaf4ff; font-size: .74rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd-legend-value { color: #9fb3c8; font-size: .68rem; font-weight: 700; line-height: 1.25; } body.light-mode #feeDistributionWrapper.fee-distribution-shell { background: radial-gradient(circle at top left, rgba(14,165,233,0.08), transparent 28%), radial-gradient(circle at bottom right, rgba(37,99,235,0.08), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98) 58%, rgba(239,246,255,0.98)) !important; border-color: rgba(148,163,184,0.22) !important; box-shadow: 0 16px 36px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.5) !important; } body.light-mode .fd-title-wrap h3, body.light-mode .fd-summary-value, body.light-mode .fd-chart-title, body.light-mode .fd-category-text, body.light-mode .fd-amount-cell, body.light-mode .fd-legend-name { color: #0f172a !important; } body.light-mode .fd-subtitle, body.light-mode .fd-summary-label, body.light-mode .fd-panel-kicker, body.light-mode .fee-distribution-table th, body.light-mode .fd-chart-sub, body.light-mode .fd-chart-badge, body.light-mode .fd-legend-value, body.light-mode .fd-chart-center-label, body.light-mode .fd-chart-center-sub { color: #475569 !important; } body.light-mode .fd-summary-card, body.light-mode .fee-distribution-col, body.light-mode .fee-distribution-chart-col, body.light-mode .fd-table-wrap, body.light-mode .fd-percent-pill, body.light-mode .fd-chart-badge, body.light-mode .fd-legend-item { background: rgba(255,255,255,.86) !important; border-color: rgba(148,163,184,.18) !important; box-shadow: 0 10px 24px rgba(15,23,42,.06) !important; } body.light-mode .fee-distribution-table td, body.light-mode .fd-percent-pill { color: #0f172a !important; } body.light-mode .fd-chart-center { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.92), rgba(219,234,254,.96) 34%, rgba(255,255,255,.98) 78%); border-color: rgba(148,163,184,.18) !important; box-shadow: 0 16px 30px rgba(15,23,42,.10), inset 0 1px 12px rgba(255,255,255,.72); } body.light-mode .fd-chart-center-value { color: #0f172a !important; } @media (max-width: 1180px) { .fee-distribution-grid { grid-template-columns: 1fr !important; } .fd-chart-shell { min-height: 300px; } #feeDistributionChart { height: 300px !important; min-height: 300px !important; max-width: 300px !important; } } @media (max-width: 720px) { #feeDistributionWrapper.fee-distribution-shell { padding: 1rem !important; border-radius: 22px !important; } .fd-header { gap: .85rem; } .fd-title-wrap h3 { font-size: 1.28rem !important; } .fd-summary-grid, .fd-chart-legend { grid-template-columns: 1fr !important; } .fee-distribution-table th, .fee-distribution-table td { padding: .72rem .68rem !important; font-size: .78rem !important; } } /* ---- original style block 72 ---- */ @media (min-width: 1025px) { :root { --oai-desktop-sticky-safe-offset: 72px; --oai-desktop-hover-guard: 18px; } .egety-nav, #egetyNav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 2147483647 !important; } body[data-active-page="page1"] main.relative.min-h-screen, body[data-active-page="page2"] main.relative.min-h-screen, body[data-active-page="page3"] main.relative.min-h-screen, body[data-active-page="page4"] main.relative.min-h-screen { padding-top: calc(var(--oai-desktop-sticky-safe-offset) + var(--oai-desktop-hover-guard)) !important; scroll-padding-top: calc(var(--oai-desktop-sticky-safe-offset) + var(--oai-desktop-hover-guard)) !important; } main.relative.min-h-screen > .page-content, main.relative.min-h-screen > .page-content.hidden + .page-content, main.relative.min-h-screen > .page-content.hidden ~ .page-content, #page1, #page2, #page3, #page4 { margin-top: 0 !important; padding-top: 0 !important; } #page1 > :first-child, #page2 > :first-child, #page3 > :first-child, #page4 > :first-child, #page1 > #hero-redesigned, #page2 > #builder-section, #page3 > #trust-app-section, #page4 > #staking-hero-section { margin-top: 0 !important; padding-top: 0 !important; scroll-margin-top: calc(var(--oai-desktop-sticky-safe-offset) + var(--oai-desktop-hover-guard)) !important; } /* Keep the first visible wrapper from lifting upward into the sticky header on hover */ #page1 > #hero-redesigned > .eds-hero-shell, #page2 > #builder-section > .builder-section, #page3 > #trust-app-section > .trust-hero-shell, #page4 > #staking-hero-section > .staking-page-shell, #page4 > #staking-hero-section .staking-coin-card { transform: translateY(0) !important; margin-top: 0 !important; } #page1 > #hero-redesigned > .eds-hero-shell:hover, #page2 > #builder-section > .builder-section:hover, #page3 > #trust-app-section > .trust-hero-shell:hover, #page4 > #staking-hero-section > .staking-page-shell:hover, #page4 > #staking-hero-section .staking-coin-card:hover { transform: translateY(0) !important; } } /* ---- original style block 73 ---- */ /* Final authoritative fix for the 3 EDS dropdowns: keep each menu inside its own selector field width and above nearby sections. */ #ecosystemSimulatorSection, #edsSelectionControls, .eds-simulator-select-grid, .eds-simulator-select-field, #edsPackageSelectWrap, #edsReleaseSelectWrap, #edsBatchSelectWrap, #edsBatchField { overflow: visible !important; min-width: 0 !important; } .eds-simulator-select-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0.9rem !important; width: 100% !important; } .eds-simulator-select-field, #edsPackageSelectWrap, #edsReleaseSelectWrap, #edsBatchSelectWrap { position: relative !important; width: 100% !important; min-width: 0 !important; } #edsPackageSelectWrap.menu-open, #edsReleaseSelectWrap.menu-open, #edsBatchSelectWrap.menu-open { z-index: 2147483645 !important; } #edsPackageButton, #edsReleaseButton, #edsBatchButton { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; position: relative !important; z-index: 2 !important; transform: none !important; } #edsPackageButton:hover, #edsReleaseButton:hover, #edsBatchButton:hover, #edsPackageButton:focus-visible, #edsReleaseButton:focus-visible, #edsBatchButton:focus-visible { transform: none !important; } #edsPackageMenu, #edsReleaseMenu, #edsBatchMenu { position: absolute !important; left: 0 !important; right: auto !important; top: calc(100% + 8px) !important; bottom: auto !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; z-index: 2147483646 !important; isolation: isolate !important; transform: none !important; margin: 0 !important; box-shadow: 0 24px 48px rgba(2,12,27,0.36) !important; } #edsPackageMenu.open-up, #edsReleaseMenu.open-up, #edsBatchMenu.open-up { top: auto !important; bottom: calc(100% + 8px) !important; } #edsPackageMenu.hidden, #edsReleaseMenu.hidden, #edsBatchMenu.hidden { display: none !important; } #edsPackageMenu .staking-package-option, #edsReleaseMenu .staking-phase-option, #edsBatchMenu .staking-phase-option { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #edsPackageMenu .staking-package-left, #edsPackageMenu .staking-package-meta, #edsReleaseMenu .staking-phase-meta, #edsBatchMenu .staking-phase-meta { min-width: 0 !important; } #edsPackageMenu .staking-package-name, #edsPackageMenu .staking-package-sub, #edsReleaseMenu .staking-phase-name, #edsReleaseMenu .staking-phase-sub, #edsBatchMenu .staking-phase-name, #edsBatchMenu .staking-phase-sub { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ---- original style block 74 ---- */ body.staking-dropdown-open #stakingDropdownPortal { display: block !important; } #stakingDropdownPortal .staking-phase-menu.hidden, #stakingDropdownPortal .staking-package-menu.hidden { display: none !important; } #stakingDropdownPortal .staking-phase-menu:not(.hidden), #stakingDropdownPortal .staking-package-menu:not(.hidden) { display: block !important; } /* ---- original style block 75 ---- */ /* Make stage controls react immediately without hover-lift shifting the hit area */ #toggleOldBatchVisibilityTable, #toggleOldBatchVisibility, #purchaseStageButtons button, #packageStageButtonsSmall .interactive-btn, #purchaseStagesTable tbody tr[data-index] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #toggleOldBatchVisibilityTable:hover, #toggleOldBatchVisibilityTable:active, #toggleOldBatchVisibility:hover, #toggleOldBatchVisibility:active, #purchaseStageButtons button:hover, #purchaseStageButtons button:active, #packageStageButtonsSmall .interactive-btn:hover, #packageStageButtonsSmall .interactive-btn:active, #purchaseStagesTable tbody tr[data-index]:hover, #purchaseStagesTable tbody tr[data-index]:active { transform: none !important; filter: none !important; } #purchaseStageButtons button, #packageStageButtonsSmall .interactive-btn, #purchaseStagesTable tbody tr[data-index] { user-select: none; } #purchaseStagesTable tbody tr[data-index] { cursor: pointer; } /* ---- original style block 76 ---- */ #purchaseStageButtons button, #packageStageButtonsSmall .interactive-btn, #packageStageButtonsSmall .release-btn, #purchaseStagesTable tbody tr[data-index], #packagesTable tbody tr.pkg-table-item { pointer-events: auto !important; position: relative; } #purchaseStageButtons button:hover, #purchaseStageButtons button:active, #packageStageButtonsSmall .interactive-btn:hover, #packageStageButtonsSmall .interactive-btn:active, #packageStageButtonsSmall .release-btn:hover, #packageStageButtonsSmall .release-btn:active, #purchaseStagesTable tbody tr[data-index]:hover, #purchaseStagesTable tbody tr[data-index]:active, #packagesTable tbody tr.pkg-table-item:hover, #packagesTable tbody tr.pkg-table-item:active { transform: none !important; }