/* ============================= */ /* DYNAMIC FONT SIZE VARIABLES */ /* ============================= */ /* Base viewport width for calculations */ #home-not-authed{ /* Base font sizes that scale with viewport */ --vw-unit: 0.5vw; /* Define base sizes as percentage of viewport width */ --text-scale-xs: calc(1.5 * var(--vw-unit)); --text-scale-sm: calc(2 * var(--vw-unit)); --text-scale-base: calc(2.5 * var(--vw-unit)); --text-scale-md: calc(3 * var(--vw-unit)); --text-scale-lg: calc(4 * var(--vw-unit)); --text-scale-xl: calc(5 * var(--vw-unit)); --text-scale-2xl: calc(6 * var(--vw-unit)); --text-scale-3xl: calc(8 * var(--vw-unit)); --text-scale-hero: calc(10 * var(--vw-unit)); /* Apply min/max constraints */ --text-xs: clamp(10px, var(--text-scale-xs), 18px); --text-sm: clamp(14px, var(--text-scale-sm), 20px); --text-base: clamp(16px, var(--text-scale-base), 24px); --text-md: clamp(16px, var(--text-scale-md), 28px); --text-lg: clamp(20px, var(--text-scale-lg), 32px); --text-xl: clamp(24px, var(--text-scale-xl), 40px); --text-2xl: clamp(30px, var(--text-scale-2xl), 56px); --text-3xl: clamp(40px, var(--text-scale-3xl), 72px); --text-hero: clamp(50px, var(--text-scale-hero), 96px); /* ============================= */ /* PADDING VARIABLES */ /* ============================= */ /* Base padding unit - easily change this to scale all padding */ --padding-base: 40px; /* Padding scale system */ --padding-xs: calc(var(--padding-base) * 0.25); /* 5px */ --padding-sm: calc(var(--padding-base) * 0.5); /* 10px */ --padding-md: calc(var(--padding-base) * 1); /* 20px */ --padding-lg: calc(var(--padding-base) * 1.5); /* 30px */ --padding-xl: calc(var(--padding-base) * 2); /* 40px */ --padding-2xl: calc(var(--padding-base) * 3); /* 60px */ /* Card-specific padding - using md as default */ --card-padding: var(--padding-md); --section-padding: var(--padding-2xl); } /* Override for medium screens */ @media (max-width: 768px) { #home-not-authed{ --text-scale-xs: calc(3.5 * var(--vw-unit)); --text-scale-sm: calc(4 * var(--vw-unit)); --text-scale-base: calc(4.5 * var(--vw-unit)); --text-scale-md: calc(5 * var(--vw-unit)); --text-scale-lg: calc(6 * var(--vw-unit)); --text-scale-xl: calc(7 * var(--vw-unit)); --text-scale-2xl: calc(9 * var(--vw-unit)); --text-scale-3xl: calc(11 * var(--vw-unit)); --text-scale-hero: calc(13 * var(--vw-unit)); /* Adjust padding for tablets */ --padding-base: 30px; } } /* Override for small screens */ @media (max-width: 480px) { #home-not-authed{ --text-scale-xs: calc(4 * var(--vw-unit)); --text-scale-sm: calc(4.5 * var(--vw-unit)); --text-scale-base: calc(5 * var(--vw-unit)); --text-scale-md: calc(5.5 * var(--vw-unit)); --text-scale-lg: calc(6.5 * var(--vw-unit)); --text-scale-xl: calc(8 * var(--vw-unit)); --text-scale-2xl: calc(10 * var(--vw-unit)); --text-scale-3xl: calc(12 * var(--vw-unit)); --text-scale-hero: calc(14 * var(--vw-unit)); /* Adjust padding for mobile */ --padding-base: 20px; } } /* ============================= */ /* RESET AND BASE STYLES */ /* ============================= */ #home-not-authed *{ margin: 0; padding: 0; box-sizing: border-box; } #home-not-authed{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #000; color: #fff; overflow-x: hidden; line-height: 1.5; font-size: var(--text-base) !important; } /* ============================= */ /* CONTAINER AND SECTIONS */ /* ============================= */ #home-not-authed .container{ max-width: 1080px; margin: 0 auto; background: #0a0a0a; } /* Large spacing between sections for one-at-a-time viewing */ #home-not-authed .section{ min-height: 100vh; padding: var(--section-padding) var(--padding-xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; background: #0a0a0a; border-bottom: 2px solid #000; } @media (max-width: 768px) { #home-not-authed .section{ padding: var(--section-padding) var(--padding-lg); min-height: 100vh; } } @media (max-width: 480px) { #home-not-authed .section{ padding: var(--section-padding) var(--padding-md); min-height: 100vh; } } /* ============================= */ /* LOGO STYLES */ /* ============================= */ #home-not-authed .logo{ width: 100px; height: 100px; background: #E85D4E; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; margin: 0 auto 40px; font-size: var(--text-3xl) !important; } /* ============================= */ /* TEXT UTILITIES */ /* ============================= */ #home-not-authed .highlight{ color: #E85D4E; } /* Force all inline text to use our sizing */ #home-not-authed div, #home-not-authed span, #home-not-authed p{ font-size: inherit !important; } /* ============================= */ /* STATS GRID */ /* ============================= */ #home-not-authed .stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 40px; max-width: 400px; } @media (max-width: 480px) { #home-not-authed .stats-grid{ gap: 20px; } } #home-not-authed .stat-item{ background: #1a1a1a; padding: var(--card-padding); border-radius: 20px; text-align: center; } @media (max-width: 480px) { #home-not-authed .stat-item{ padding: var(--card-padding); } } /* ============================= */ /* COMPARISON CARDS */ /* ============================= */ #home-not-authed .comparison-container{ display: flex; gap: 40px; margin: 0 auto; flex-wrap: wrap; justify-content: center; width: 100%; /* Add this */ max-width: 100%; /* Add this */ padding: 0; /* Add this to ensure no hidden padding */ } #home-not-authed .card{ flex: 1; min-width: 300px; padding: var(--padding-lg) var(--card-padding); border-radius: 20px; background: #1a1a1a; text-align: left; } @media (max-width: 368px) { #home-not-authed .card{ min-width: 100%; } } #home-not-authed .card-highlighted{ border: 2px solid #E85D4E; } #home-not-authed .card-title{ margin: 0 0 20px 0; opacity: 0.6; text-transform: uppercase; letter-spacing: 2px; font-size: var(--text-lg) !important; } #home-not-authed .card-highlighted .card-title{ color: #E85D4E; opacity: 1; } /* Feature item with proper positioning */ #home-not-authed .feature-item{ margin: 20px 0; display: flex; align-items: center; gap: 15px; font-size: var(--text-base) !important; position: relative; padding-left: 35px; } /* Base for all ::before elements */ #home-not-authed .feature-item::before{ content: ''; position: absolute; left: 0; width: 20px; height: 20px; } /* X mark for traditional card */ #home-not-authed .card:not(.card-highlighted) .feature-item::before{ content: '×'; color: #E85D4E; font-size: 28px; opacity: 0.5; line-height: 20px; text-align: center; } /* Check mark for highlighted card */ #home-not-authed .card-highlighted .feature-item::before{ content: ''; width: 18px; height: 9px; border-left: 2px solid #4CAF50; border-bottom: 2px solid #4CAF50; transform: rotate(-45deg); position: absolute; left: 4px; top: 5px; opacity: 1; } /* ============================= */ /* TOOLS LIST */ /* ============================= */ #home-not-authed .tools-container{ margin: 20px auto; max-width: 600px; } #home-not-authed .tool-item{ display: flex; align-items: center; gap: 30px; margin: 40px 0; text-align: left; } @media (max-width: 480px) { #home-not-authed .tool-item{ gap: 20px; margin: 30px 0; } } #home-not-authed .tool-icon{ width: 42px; /* was 60px */ height: 42px; /* was 60px */ background: #1a1a1a; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 768px) { #home-not-authed .tool-icon{ width: 35px; /* was 50px */ height: 35px; /* was 50px */ } } @media (max-width: 480px) { #home-not-authed .tool-icon{ width: 28px; /* was 40px */ height: 28px; /* was 40px */ } } /* Icon Shapes */ #home-not-authed .icon-circle{ width: 28px; /* was 40px */ height: 28px; /* was 40px */ background: #E85D4E; border-radius: 50%; } #home-not-authed .icon-square{ width: 28px; /* was 40px */ height: 28px; /* was 40px */ background: transparent; border: 2px solid #E85D4E; /* reduced from 3px */ } #home-not-authed .icon-diamond{ width: 25px; /* was 35px */ height: 25px; /* was 35px */ background: #E85D4E; transform: rotate(45deg); } #home-not-authed .icon-triangle{ width: 0; height: 0; border-left: 14px solid transparent; /* was 20px */ border-right: 14px solid transparent; /* was 20px */ border-bottom: 25px solid #E85D4E; /* was 35px */ } #home-not-authed .icon-grid{ display: grid; grid-template-columns: repeat(3, 8px); /* was 12px */ grid-template-rows: repeat(3, 8px); /* was 12px */ gap: 2px; /* was 3px */ } #home-not-authed .grid-cell{ background: #E85D4E; } /* Scale icons for tablets */ @media (max-width: 768px) { #home-not-authed .icon-circle{ width: 25px; height: 25px; } /* was 35px */ #home-not-authed .icon-square{ width: 25px; height: 25px; } /* was 35px */ #home-not-authed .icon-diamond{ width: 21px; height: 21px; } /* was 30px */ #home-not-authed .icon-triangle{ border-left: 12px solid transparent; /* was 17px */ border-right: 12px solid transparent; /* was 17px */ border-bottom: 21px solid #E85D4E; /* was 30px */ } #home-not-authed .icon-grid{ grid-template-columns: repeat(3, 7px); /* was 10px */ grid-template-rows: repeat(3, 7px); /* was 10px */ } } /* Scale icons for mobile */ @media (max-width: 480px) { #home-not-authed .icon-circle{ width: 20px; height: 20px; } /* was 28px */ #home-not-authed .icon-square{ width: 20px; height: 20px; border-width: 2px; } /* was 28px */ #home-not-authed .icon-diamond{ width: 17px; height: 17px; } /* was 24px */ #home-not-authed .icon-triangle{ border-left: 10px solid transparent; /* was 14px */ border-right: 10px solid transparent; /* was 14px */ border-bottom: 17px solid #E85D4E; /* was 24px */ } #home-not-authed .icon-grid{ grid-template-columns: repeat(3, 6px); /* was 8px */ grid-template-rows: repeat(3, 6px); /* was 8px */ gap: 1px; /* was 2px */ } } /* ============================= */ /* CTA BUTTON */ /* ============================= */ #home-not-authed .cta-button{ background: #fff; color: #000; padding: 25px 70px; border-radius: 50px; text-decoration: none; display: inline-block; font-weight: 500; transition: transform 0.2s; border: none; cursor: pointer; margin-top: 40px; font-size: var(--text-md) !important; } @media (max-width: 480px) { #home-not-authed .cta-button{ padding: 20px 50px; } } #home-not-authed .cta-button:hover{ transform: scale(1.05); } /* ============================= */ /* DASHBOARD PREVIEW */ /* ============================= */ #home-not-authed .dashboard-preview{ width: 90%; max-width: 500px; background: #1a1a1a; border-radius: 20px; padding: var(--card-padding); margin: 40px auto 0; } #home-not-authed .chart-area{ height: 150px; background: #0a0a0a; border-radius: 10px; margin-bottom: 30px; position: relative; overflow: hidden; } #home-not-authed .chart-visual{ position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(135deg, #E85D4E 0%, #E85D4E 50%, #4CAF50 100%); clip-path: polygon(0 100%, 0 60%, 30% 70%, 50% 40%, 70% 50%, 100% 20%, 100% 100%); } #home-not-authed .metrics-row{ display: flex; justify-content: space-around; gap: 10px; } #home-not-authed .metric{ text-align: center; } /* ============================= */ /* INTERFACE MOCKUP */ /* ============================= */ #home-not-authed .interface-mockup{ width: 90%; max-width: 600px; background: #0a0a0a; border-radius: 20px; border: 2px solid #222; padding: var(--card-padding); margin: 40px auto 0; } #home-not-authed .chart-container{ display: flex; gap: 20px; padding: var(--padding-xs); background: #050505; border-radius: 10px; margin-bottom: 20px; } #home-not-authed .line-chart{ flex: 1; height: 120px; position: relative; } #home-not-authed .line-path{ stroke: #E85D4E; stroke-width: 3; fill: none; } #home-not-authed .bar-chart{ flex: 1; display: flex; align-items: flex-end; justify-content: space-evenly; gap: 10px; height: 120px; } #home-not-authed .bar{ width: 20%; background: #E85D4E; border-radius: 2px 2px 0 0; } #home-not-authed .bar:nth-child(1){ height: 70%; } #home-not-authed .bar:nth-child(2){ height: 45%; } #home-not-authed .bar:nth-child(3){ height: 85%; background: #4a8de8; } #home-not-authed .bar:nth-child(4){ height: 60%; background: #4ade80; } #home-not-authed .interface-metrics{ display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 10px; } #home-not-authed .metric-card{ background: #1a1a1a; padding: var(--padding-sm); border-radius: 10px; text-align: center; } /* ============================= */ /* COUNTRY TAGS */ /* ============================= */ #home-not-authed .tags-container{ display: flex; flex-wrap: wrap; gap: 15px; margin: 50px auto; justify-content: center; max-width: 800px; } @media (max-width: 480px) { #home-not-authed .tags-container{ gap: 10px; margin: 30px auto; } } #home-not-authed .tag{ background: #0a0a0a; border: 1px solid #E85D4E; color: #E85D4E; padding: 12px 25px; border-radius: 25px; font-size: var(--text-sm) !important; } @media (max-width: 480px) { #home-not-authed .tag{ padding: 10px 20px; } } #home-not-authed .screener-button{ background: #4ade80; color: #000; padding: 14px 60px; border-radius: 10px; font-weight: 500; border: none; cursor: pointer; margin: 20px auto; font-size: var(--text-md) !important; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.2; text-decoration: none; } /* ============================= */ /* CORRELATION GRID */ /* ============================= */ #home-not-authed .correlation-grid{ background: #1a1a1a; border-radius: 20px; padding: var(--card-padding); max-width: 600px; margin: 40px auto; } #home-not-authed .correlation-cells{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; } #home-not-authed .correlation-cell{ height: 60px; border-radius: 8px; } /* ============================= */ /* PORTFOLIO ANALYSIS */ /* ============================= */ #home-not-authed .portfolio-grid{ display: flex; gap: 40px; max-width: 900px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } #home-not-authed .portfolio-card{ flex: 1; min-width: 300px; background: #1a1a1a; padding: var(--card-padding); border-radius: 20px; } @media (max-width: 768px) { #home-not-authed .portfolio-card{ min-width: 100%; } } #home-not-authed .allocation-item{ margin-bottom: 30px; } #home-not-authed .allocation-header{ display: flex; justify-content: space-between; margin-bottom: 10px; font-size: var(--text-base) !important; } #home-not-authed .allocation-bar{ height: 20px; background: #0a0a0a; border-radius: 10px; overflow: hidden; position: relative; } #home-not-authed .allocation-fill{ height: 100%; position: relative; } #home-not-authed .allocation-marker{ position: absolute; right: -2px; top: 0; width: 4px; height: 100%; background: #fff; } #home-not-authed .allocation-info{ display: flex; justify-content: space-between; margin-top: 5px; color: #999; /* Improved contrast for accessibility */ font-size: var(--text-xs) !important; } #home-not-authed .rebalance-button{ width: 100%; background: #fff; color: #000; padding: 20px; border-radius: 10px; border: none; cursor: pointer; font-size: var(--text-sm) !important; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.2; text-decoration: none; } #home-not-authed .risk-chart{ height: 250px; position: relative; background: #0a0a0a; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } #home-not-authed .risk-options{ display: flex; justify-content: space-around; margin-top: 30px; } #home-not-authed .risk-option{ text-align: center; } /* ============================= */ /* ANIMATION STYLES - NAMESPACED FOR LANDING PAGE */ /* ============================= */ /* Base animation class */ #home-not-authed .slowio-landing-animate-on-scroll{ opacity: 0; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Fade up animation */ #home-not-authed .slowio-landing-fade-up{ transform: translateY(30px); } #home-not-authed .slowio-landing-fade-up.slowio-landing-animated{ opacity: 1; transform: translateY(0); } /* Fade in animation */ #home-not-authed .slowio-landing-fade-in{ transform: scale(0.95); } #home-not-authed .slowio-landing-fade-in.slowio-landing-animated{ opacity: 1; transform: scale(1); } /* Stagger animations for grids */ #home-not-authed .slowio-landing-stagger{ opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-stagger.slowio-landing-animated{ opacity: 1; transform: translateY(0); } /* Chart animations */ #home-not-authed .slowio-landing-chart-line{ stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-chart-line.slowio-landing-animated{ stroke-dashoffset: 0; } #home-not-authed .slowio-landing-chart-bar{ transform: scaleY(0); transform-origin: bottom; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-chart-bar.slowio-landing-animated{ transform: scaleY(1); } /* Progress bar animations */ #home-not-authed .slowio-landing-allocation-fill{ width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-allocation-fill.slowio-landing-animated{ transform: scaleX(var(--target-scale, 1)); } /* Number counting animation */ #home-not-authed .slowio-landing-count-up{ display: inline-block; } /* Tool icon animations */ #home-not-authed .slowio-landing-tool-icon{ opacity: 0; transform: scale(0.8) rotate(-10deg); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-tool-icon.slowio-landing-animated{ opacity: 1; transform: scale(1) rotate(0); } /* Correlation cell animations */ #home-not-authed .slowio-landing-correlation-cell{ opacity: 0; transform: scale(0); transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-correlation-cell.slowio-landing-animated{ opacity: var(--cell-opacity, 1); transform: scale(1); } /* Scatter plot points */ #home-not-authed .slowio-landing-scatter-point{ opacity: 0; transform: scale(0); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-scatter-point.slowio-landing-animated{ opacity: var(--point-opacity, 0.8); transform: scale(1); } /* Network nodes */ #home-not-authed .slowio-landing-network-node{ opacity: 0; transform: scale(0); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-network-node.slowio-landing-animated{ opacity: 1; transform: scale(1); } #home-not-authed .slowio-landing-network-line{ stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-network-line.slowio-landing-animated{ stroke-dashoffset: 0; } /* ============================= */ /* SVG PATH ANIMATIONS */ /* ============================= */ /* GPU-accelerate SVG animations to prevent CLS and improve smoothness */ /* Note: Using will-change instead of translateZ(0) to avoid overriding transform: scale(0) on animated elements like .slowio-landing-risk-point */ #home-not-authed .slowio-landing-risk-point, #home-not-authed .slowio-landing-trend-line, #home-not-authed .slowio-landing-risk-curve, #home-not-authed .slowio-landing-chart-line, #home-not-authed .slowio-landing-chart-bar, #home-not-authed .slowio-landing-allocation-fill, #home-not-authed .slowio-landing-scatter-point, #home-not-authed .slowio-landing-network-line, #home-not-authed .slowio-landing-network-node { will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Risk curve animation (Portfolio Analysis) */ #home-not-authed .slowio-landing-risk-curve{ stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-risk-curve.slowio-landing-animated{ stroke-dashoffset: 0; } /* Risk chart points */ #home-not-authed .slowio-landing-risk-point{ opacity: 0; transform: scale(0); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } #home-not-authed .slowio-landing-risk-point.slowio-landing-animated{ opacity: 1; transform: scale(1); } /* Dashboard preview chart animation - LEFT TO RIGHT REVEAL */ #home-not-authed .slowio-landing-chart-visual{ /* Use mask for smooth left-to-right reveal */ -webkit-mask-image: linear-gradient(to right, black 0%, black 100%); -webkit-mask-size: 0% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left center; mask-image: linear-gradient(to right, black 0%, black 100%); mask-size: 0% 100%; mask-repeat: no-repeat; mask-position: left center; transition: -webkit-mask-size 1.5s cubic-bezier(0.4, 0, 0.2, 1), mask-size 1.5s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-chart-visual.slowio-landing-animated{ -webkit-mask-size: 110% 100%; /* Slightly over 100% to ensure complete fill */ mask-size: 110% 100%; } /* Scatter plot trend line */ #home-not-authed .slowio-landing-trend-line{ stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-trend-line.slowio-landing-animated{ stroke-dashoffset: 0; } /* Hexagon icon */ #home-not-authed .icon-hexagon{ position: relative; width: 28px; height: 16px; background: #E85D4E; margin: 6px 0; } #home-not-authed .icon-hexagon:before, #home-not-authed .icon-hexagon:after{ content: ""; position: absolute; width: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; } #home-not-authed .icon-hexagon:before{ bottom: 100%; border-bottom: 8px solid #E85D4E; } #home-not-authed .icon-hexagon:after{ top: 100%; border-top: 8px solid #E85D4E; } /* Scale hexagon for tablets */ @media (max-width: 768px) { #home-not-authed .icon-hexagon{ width: 25px; height: 14px; margin: 5.5px 0; } #home-not-authed .icon-hexagon:before, #home-not-authed .icon-hexagon:after{ border-left: 12.5px solid transparent; border-right: 12.5px solid transparent; } #home-not-authed .icon-hexagon:before{ border-bottom: 7px solid #E85D4E; } #home-not-authed .icon-hexagon:after{ border-top: 7px solid #E85D4E; } } /* Scale hexagon for mobile */ @media (max-width: 480px) { #home-not-authed .icon-hexagon{ width: 20px; height: 11px; margin: 4.5px 0; } #home-not-authed .icon-hexagon:before, #home-not-authed .icon-hexagon:after{ border-left: 10px solid transparent; border-right: 10px solid transparent; } #home-not-authed .icon-hexagon:before{ border-bottom: 5.5px solid #E85D4E; } #home-not-authed .icon-hexagon:after{ border-top: 5.5px solid #E85D4E; } }