/* Apple-style landing.css - Premium Dark Theme */ /* Google Fonts loaded via in for better LCP */ :root { /* Sampled directly from Ratna logo */ --bg-dark: #fdfbf8; /* Lightest shade for global background */ --card-bg: #f6f0e6; /* The main cream color from the logo background */ --gold-accent: #ae642c; /* The rich caramel text color */ --text-main: #3d2b1f; /* The dark espresso line art color */ --text-muted: #8a7769; /* Muted espresso */ --gold-hover: #b38e4d; --header-bg: rgba(253, 249, 243, 0.9); --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } html { scroll-behavior: smooth; background-color: var(--bg-dark); overflow-x: hidden; max-width: 100%; } *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-dark); font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; color: var(--text-main); margin: 0; overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Typography Overrides */ h1, h2, h3, h4, h5, p { margin: 0; padding: 0; } /* Base Styles */ section { position: relative; padding: 50px 5%; margin-bottom: 40px; /* ~10mm space after each section */ display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; min-height: auto; } /* --- Header --- */ .landing-header { background: var(--header-bg); padding: 0.6rem 8%; /* Reduced padding massively for a sleeker profile */ display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; width: 100%; z-index: 1000; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; } .header-logo img { height: 28px; /* Slimmer logo to match sleek header */ width: auto; filter: none; /* Removed invert since background is light */ } .header-nav { display: flex; gap: 2.5rem; align-items: center; } .header-nav a { text-decoration: none; color: var(--text-main); font-weight: 400; font-size: 0.8rem; /* Scaled down slightly for minimalist feel */ transition: color 0.3s ease; opacity: 0.8; } .header-nav a:hover { color: var(--gold-accent); opacity: 1; } .hamburger-menu { display: none; cursor: pointer; flex-direction: column; gap: 5px; } .hamburger-menu span { width: 25px; height: 2px; background: var(--text-main); } /* --- Hero Section --- */ .apple-hero { height: 75vh; /* Reduced from 100vh to allow the bento grid to peek over the fold */ min-height: 600px; /* Fallback for very small screens */ padding: 40px 50px 0 50px; /* 0 bottom padding so the laptop touches the edge */ text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow: hidden; /* Bento Box Styling */ background: var(--card-bg); border-radius: 45px; /* Box Constraints */ width: 90%; max-width: none; /* Removed constraint to ensure strictly 90% of screen */ margin: 70px auto 20px auto; /* Match bento grid gap */ box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); } .hero-headlines { margin-top: 1.5rem; margin-bottom: 0rem; z-index: 2; max-width: 800px; } .apple-headline { font-size: clamp(3rem, 7vw, 5rem); /* Main hero style */ font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--text-main); margin-bottom: 0.5rem; } .apple-subline { font-size: clamp(1.2rem, 2.5vw, 1.6rem); /* Subtitle formatting */ font-weight: 400; color: var(--text-muted); /* softer subline color */ letter-spacing: 0em; margin-bottom: 0; } .hero-image-wrapper { width: 100%; flex: 1; /* Takes up all remaining vertical space in the box */ min-height: 0; /* CRITICAL: Prevents flex child from overflowing its parent */ display: flex; align-items: flex-end; /* Pushes the image to the bottom */ justify-content: center; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; margin-top: 20px; } .hero-image-wrapper img { width: 100%; height: 100%; /* Force image exactly to container height */ object-fit: contain; /* Guarantees the entire image fits without cutting */ object-position: bottom; /* Anchor image to the exact bottom edge */ } /* Custom CTA Button */ .btn-apple { display: inline-block; padding: 8px 18px; /* Scaled down */ background: var(--text-main); color: #fff !important; text-decoration: none; border-radius: 980px; font-weight: 400; font-size: 0.95rem; /* Scaled down */ transition: var(--transition-smooth); margin-top: 1rem; } .btn-apple:hover { background: var(--gold-accent); transform: scale(1.02); } /* --- Bento Grid Layout --- */ .bento-section { padding: 0 5%; /* Yields 90% total width */ margin-bottom: 60px; width: 100%; max-width: none; /* Unconstrained to match 90% strictly */ margin-left: auto; margin-right: auto; overflow: visible; /* Prevents card shadows and hover transforms from clipping */ } .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; grid-auto-rows: minmax(320px, auto); width: 100%; } .bento-card { background: var(--card-bg); border-radius: 45px; /* Extremely rounded like the reference image */ padding: 2.5rem; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; transition: var(--transition-smooth); border: 1px solid rgba(0,0,0,0.04); } .bento-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); } /* Span utilities for grid */ .bento-col-2 { grid-column: span 2; } .bento-col-3 { grid-column: span 3; } .bento-row-2 { grid-row: span 2; } /* Custom oo,ooO left side squares */ .bento-square { aspect-ratio: 1 / 1; } /* Platform cards: always 3-col square grid */ .platforms-grid { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: auto; } .platforms-grid .bento-square { aspect-ratio: 1 / 1; } /* Custom oo,ooO right tall column */ .bento-tall-right { grid-column: 3; grid-row: 1 / span 2; height: 100%; /* Ensure it spans the full calculated row heights */ } /* Bento Text Formatting */ .bento-title { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 800; color: var(--text-main); line-height: 1.15; margin-bottom: 0.5rem; z-index: 2; } .bento-title-large { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; color: var(--text-main); line-height: 1.1; margin: 0; letter-spacing: -0.02em; z-index: 2; } .bento-desc { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; z-index: 2; max-width: 90%; } .bento-img-wrap { position: relative; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; z-index: 1; } .bento-img-wrap img { max-width: 100%; max-height: 250px; /* Constrain internal images to fit bento cards */ object-fit: contain; transition: var(--transition-smooth); } .bento-card:hover .bento-img-wrap img { transform: scale(1.03); /* Subtle internal zoom on hover */ } /* Dark variant bento card */ .bento-card.dark-bento { background: #1d1d1f; } .dark-bento .bento-title { color: #f5f5f7; } .dark-bento .bento-desc { color: #86868b; border: none; } @media (max-width: 900px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } .bento-tall-right { grid-column: span 2; grid-row: span 1; } .bento-square { aspect-ratio: auto; /* Revert to content flow on smaller screens */ } } @media (max-width: 650px) { .bento-grid { grid-template-columns: 1fr; } .bento-col-2, .bento-col-3, .bento-row-2, .bento-tall-right { grid-column: span 1; grid-row: span 1; } .bento-card { min-height: 350px; } } /* --- Pricing Section (Minimalist) --- */ .apple-pricing { width: 100%; max-width: 1200px; margin: 4rem auto; text-align: center; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 4rem; } .pricing-card { background: var(--bg-card); border-radius: 45px; padding: 3rem; text-align: center; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s ease; } .pricing-card:hover { transform: translateY(-10px); border-color: rgba(255,255,255,0.2); } .pricing-card h3 { font-size: 1.8rem; font-weight: 500; margin-bottom: 1rem; } .price { font-size: 3rem; font-weight: 600; margin-bottom: 2rem; } .price span { font-size: 1.2rem; color: var(--text-muted); } .pricing-features { list-style: none; padding: 0; margin-bottom: 2rem; text-align: left; } .pricing-features li { padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); } /* --- Footer --- */ .apple-footer { background: var(--bg-dark); /* Blend seamlessly with the main background */ padding: 4rem 8% 2rem; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid rgba(0,0,0,0.05); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .footer-col h4 { color: var(--text-main); font-weight: 500; margin-bottom: 1rem; } .footer-col ul { list-style: none; padding: 0; } .footer-col ul li { margin-bottom: 0.8rem; } .footer-col a { color: var(--text-muted); text-decoration: none; } .footer-col a:hover { color: var(--text-main); } .footer-bottom { border-top: 1px solid rgba(0,0,0,0.05); padding-top: 2rem; text-align: center; color: var(--text-muted); } /* Mobile Nav Overlay */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); z-index: 2000; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: var(--transition-smooth); } .mobile-menu-overlay.active { opacity: 1; visibility: visible; } .mobile-menu-overlay a { font-size: 2rem; color: white; text-decoration: none; margin: 1.5rem 0; font-weight: 500; } .close-menu { position: absolute; top: 30px; right: 30px; font-size: 3rem; color: white; cursor: pointer; } /* Media Queries */ @media (max-width: 1000px) { .apple-feature { grid-template-columns: 1fr; text-align: center; gap: 2rem; padding-top: 60px; } .apple-feature.reverse { grid-template-columns: 1fr; } .feature-text { order: 1 !important; /* Text above image on mobile */ } .feature-image { order: 2 !important; } .apple-headline { font-size: clamp(2.5rem, 10vw, 4rem); } } @media (max-width: 768px) { .header-nav { display: none; } .hamburger-menu { display: flex; } section { min-height: auto; padding: 60px 5%; } .apple-center-feature { padding: 4rem 1rem 0 1rem; width: 100%; } } /* --- Ecosystem Hero Section --- */ .ecosystem-hero { background: var(--card-bg); color: var(--text-main); width: 90%; margin: 0 auto 20px auto; border-radius: 45px; padding: 80px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); position: relative; overflow: hidden; } /* Subtle glow behind the content */ .ecosystem-hero::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background: radial-gradient(circle, rgba(174,100,44,0.05) 0%, transparent 60%); z-index: 0; pointer-events: none; } .eco-content, .eco-image-wrapper { z-index: 1; position: relative; } .eco-headline { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 600; line-height: 1.1; margin-bottom: 1.5rem; color: var(--text-main); letter-spacing: -0.02em; } .eco-subline { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-muted); max-width: 680px; margin: 0 auto 4rem auto; line-height: 1.6; } .eco-image-wrapper { width: 100%; max-width: 1000px; margin: 1rem auto 0 auto; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; } .eco-image-wrapper img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08)); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .ecosystem-hero:hover .eco-image-wrapper img { transform: scale(1.02) translateY(-5px); } @media (max-width: 768px) { .ecosystem-hero { padding: 60px 20px; } } /* --- Shield Hero Banner --- */ .shield-hero-banner { background: #111111; background: radial-gradient(circle at right center, #1a1a1c 0%, #000000 100%); color: #fff; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 3rem 4rem; gap: 40px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); width: 100%; } .shield-hero-banner::before { content: ''; position: absolute; right: 15%; top: 50%; transform: translateY(-50%); width: 250px; height: 250px; background: radial-gradient(circle, rgba(174,100,44,0.15) 0%, transparent 60%); z-index: 0; pointer-events: none; } .shield-hero-banner .eco-headline { color: #fff; } .shield-hero-banner .eco-subline { color: #aaa; } .shield-content { flex: 1; z-index: 1; max-width: 700px; } .shield-icon-wrapper { z-index: 1; display: flex; justify-content: center; align-items: center; } .shield-icon-wrapper img { max-height: 200px; /* Slightly larger for hero prominence */ object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); } @media (max-width: 900px) { .shield-hero-banner { flex-direction: column; text-align: center; padding: 2.5rem; } .shield-hero-banner .eco-headline, .shield-hero-banner .eco-subline { text-align: center !important; } } /* ============================================= MOBILE RESPONSIVE — APPLE STYLE ============================================= */ /* --- Tablet (max 900px) --- */ @media (max-width: 900px) { .apple-hero { height: auto; min-height: 550px; padding: 30px 24px 0 24px; margin: 60px auto 16px auto; width: 92%; border-radius: 45px; } .hero-headlines { margin-top: 1rem; } .apple-headline { font-size: clamp(2.4rem, 8vw, 3.5rem); } .apple-subline { font-size: clamp(1rem, 3.5vw, 1.3rem); } /* 2-column bento on tablet */ .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(260px, auto); } .bento-col-2 { grid-column: span 2; } .bento-col-3 { grid-column: span 2; } .bento-tall-right { grid-column: span 2; grid-row: span 1; } .bento-section { padding: 0 4%; margin-bottom: 40px; } .ecosystem-hero { width: 92%; padding: 60px 28px; border-radius: 45px; } .shield-hero-banner { flex-direction: column; text-align: center; padding: 2.5rem 2rem; border-radius: 45px; gap: 24px; } .shield-icon-wrapper img { max-height: 140px; } } /* --- Mobile (max 650px) --- */ @media (max-width: 650px) { /* Header: logo left + hamburger right */ .landing-header { padding: 0.6rem 5%; } .header-nav { display: none; } .hamburger-menu { display: flex; } /* Hero — Apple-style: comfortable text area + prominent product image */ .apple-hero { height: auto; min-height: 480px; max-height: unset; padding: 36px 22px 0 22px; margin: 56px auto 12px auto; width: 94%; border-radius: 28px; justify-content: flex-start; } .hero-headlines { margin-top: 1rem; margin-bottom: 0; text-align: center; } .apple-headline { font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: -0.03em; } .apple-subline { font-size: clamp(0.9rem, 3.5vw, 1.1rem); margin-top: 8px; } .btn-apple { font-size: 0.88rem; padding: 10px 22px; margin-top: 14px; } /* Image: flex fill — takes all remaining vertical space, anchored bottom */ .hero-image-wrapper { margin-top: 16px; flex: 1; min-height: 240px; max-height: none; } .hero-image-wrapper img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; } section { padding: 36px 4%; margin-bottom: 12px; } /* ── 6-card bento: 2-column grid on mobile ── */ #bento { padding: 0 4% !important; overflow: visible; margin-bottom: 16px; /* Fix: section flex interference */ display: block !important; align-items: unset !important; } #bento .bento-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: unset !important; gap: 12px !important; width: 100% !important; overflow: visible !important; /* Reset any carousel styles */ overflow-x: unset !important; scroll-snap-type: unset !important; flex-direction: unset !important; padding: 0 !important; } /* Each card: equal 2-col sizing */ #bento .bento-card { flex: unset !important; width: 100% !important; min-width: unset !important; height: 200px !important; min-height: unset !important; scroll-snap-align: unset !important; border-radius: 20px; padding: 1.3rem 1.1rem; overflow: hidden; } /* Reset any grid span overrides */ #bento .bento-col-2, #bento .bento-col-3, #bento .bento-row-2, #bento .bento-tall-right { grid-column: unset !important; grid-row: unset !important; flex: unset !important; width: 100% !important; min-width: unset !important; } .bento-title-large { font-size: clamp(1.3rem, 6vw, 1.8rem); } .bento-title { font-size: clamp(0.9rem, 4vw, 1.2rem); } .bento-desc { font-size: 0.78rem; max-width: 100%; } .bento-img-wrap { margin-top: 0.6rem; } .bento-img-wrap img { max-height: 100px; } .bento-section { padding: 0; margin-bottom: 20px; } /* Shield banner: text top, icon pinned to true centre of square */ .shield-hero-banner { position: relative; flex-direction: column; align-items: center; justify-content: flex-start; /* text stays at top */ text-align: center; aspect-ratio: 1 / 1; width: 94%; margin: 0 auto 0 auto; padding: 2rem 1.5rem; border-radius: 28px; gap: 0; } /* Title floats at the top, above the icon layer */ .shield-content { position: relative; z-index: 2; text-align: center; width: 100%; } /* Icon: absolutely centred in the entire card */ .shield-icon-wrapper { position: absolute; inset: 0; /* fills the whole card */ display: flex; justify-content: center; align-items: center; transform: translateY(10%); /* nudge icon slightly below true centre */ z-index: 1; } .shield-icon-wrapper img { max-height: 150px; } .shield-hero-banner h2 { font-size: clamp(1.4rem, 7vw, 2rem) !important; text-align: center !important; } /* Hide subtext inside shield on mobile */ .shield-hero-banner .eco-subline, .shield-hero-banner p { display: none !important; } /* Hardware/Scanner: 1 row × 2 columns — square cards side by side */ .bento-grid[style*="repeat(2, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: 1fr !important; gap: 12px !important; width: 94% !important; margin: 0 auto !important; } .bento-card[style*="flex-direction: row"] { flex-direction: column !important; aspect-ratio: 1 / 1 !important; min-height: unset !important; height: auto !important; padding: 1.1rem 1rem !important; border-radius: 20px; justify-content: space-between; align-items: flex-start; overflow: hidden !important; } .bento-card[style*="flex-direction: row"] > div:first-child { flex: unset !important; padding-right: 0 !important; } /* Hide description in hardware cards on mobile — not enough space in square */ .bento-card[style*="flex-direction: row"] .bento-desc { display: none !important; } .bento-card[style*="flex-direction: row"] .bento-img-wrap { flex: 1 !important; justify-content: flex-start !important; align-items: flex-end !important; margin-top: 6px; } .bento-card[style*="flex-direction: row"] .bento-img-wrap img { max-height: 75px; transform: none !important; } .bento-card[style*="flex-direction: row"] .bento-title { font-size: clamp(0.85rem, 4vw, 1.05rem); } /* Ecosystem hero — matches hero height, image fills bottom */ .ecosystem-hero { width: 94%; min-height: 480px; max-height: unset; padding: 40px 20px 0 20px; border-radius: 28px; justify-content: flex-start; flex-direction: column; } .eco-content { text-align: center; padding-bottom: 0; } .eco-headline { font-size: clamp(1.7rem, 8vw, 2.4rem); margin-bottom: 0.6rem; } .eco-subline { font-size: 0.9rem; margin-bottom: 1rem; } /* Eco image: fills remaining card space, anchored to bottom */ .ecosystem-hero .eco-image-wrapper { flex: 1; min-height: 260px; max-height: none; align-items: flex-end; margin: 0 auto; width: 100%; } .ecosystem-hero .eco-image-wrapper img { object-position: bottom; width: 100%; height: 100%; object-fit: contain; } .bento-grid .bento-square { aspect-ratio: auto; min-height: 160px; } /* ── Platform cards: 3-col square on mobile (icon + label only) ── */ #platforms .bento-grid, .platforms-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; width: 94% !important; margin: 0 auto !important; } #platforms .bento-card, .platforms-grid .bento-card { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 1rem 0.5rem !important; aspect-ratio: 1 / 1 !important; min-height: unset !important; gap: 0.4rem; border-radius: 20px; } .platforms-grid .bento-card svg { width: 30px !important; height: 30px !important; margin-bottom: 6px !important; flex-shrink: 0; } .platforms-grid .bento-card .bento-title { font-size: 0.72rem !important; font-weight: 700; margin-bottom: 0 !important; white-space: nowrap; } /* Hide subtitle on mobile platform cards — not enough space */ .platforms-grid .bento-card .bento-desc { display: none !important; } #iosModal > div { padding: 30px 22px !important; border-radius: 28px !important; width: 92% !important; } .apple-footer { padding: 2.5rem 5% 1.5rem; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; } } /* --- Small phones (max 400px) --- */ @media (max-width: 400px) { .apple-hero { border-radius: 24px; margin: 52px auto 10px auto; min-height: 420px; } .ecosystem-hero { border-radius: 24px; min-height: 420px; } .apple-headline { font-size: clamp(1.8rem, 11vw, 2.6rem); } /* Carousel cards slightly smaller on very small phones */ #bento .bento-card { flex: 0 0 88vw; width: 88vw; min-width: 88vw; height: 340px; } .bento-card { border-radius: 24px; } .shield-hero-banner { border-radius: 24px; } .footer-grid { grid-template-columns: 1fr; } }