/* Design Tokens */ :root { /* Colors */ --color-text: #121212; --color-gray-1: #414141; --color-gray-3: #c0c0c0; --color-background: #f8f8f7; ; /* Typography */ /* primary text font; fall back to system UI and include emoji fonts so arrows and other symbols render correctly on all platforms */ --font-primary: 'Ranade', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; /* Layout */ --layout-max-width: 1440px; --layout-padding-x: 2rem; --standard-bottom-padding: 4rem; } /* Font Family Utilities */ .font-sevenly { font-family: 'Outfit', 'Ranade', sans-serif; font-weight: 500; } .font-rocks { font-family: 'EB Garamond', 'Ranade', serif; font-weight: 500; } .font-method { font-family: 'Unbounded', 'Ranade', sans-serif; font-weight: 400; } .products-popup .font-tools { font-size: 1.4rem; } /* Font Face for Ranade */ @font-face { font-family: 'Ranade'; src: url('/assets/Ranade-Variable.woff2') format('woff2'); font-weight: 400 600; font-display: swap; } /* Reset & Base Styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* custom scrollbar matching site background */ ::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-track { background: var(--color-background); } ::-webkit-scrollbar-thumb { background: var(--color-gray-3); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-gray-1); } /* Firefox scrollbar settings */ * { /* Firefox doesn't support explicit width, use 'auto' or 'thin' – thin is roughly 8px, so we override with 'auto' and control via thumb padding via --property if needed. */ scrollbar-width: auto; scrollbar-color: var(--color-gray-3) var(--color-background); } /* Reset & Base Styles */ *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Fluid base font-size — scales with viewport and is clamped between 16px and 22px. 1.6vw gives 16px at 1000px (so the current base remains at that width). */ font-size: 16px; /* fallback for older browsers */ font-size: clamp(15px, 0.9vw + 0.5rem, 20px); /* background now handled on the element; single color site-wide */ scroll-snap-type: y mandatory; scroll-behavior: smooth; } body { height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; color: var(--color-text); /* single background color, no per-section variants */ background-color: var(--color-background); font-family: var(--font-primary); /* Ranade variable supports 400–600; use 400 as the base weight */ font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Typography Utilities */ h1 { font-size: 4rem; font-weight: 400; line-height: 1; margin-bottom: 1rem; } .h1-subtitle { font-size: 1.5rem; margin-bottom: 1rem; } h2 { font-size: 2.25rem; /* 56px */ font-weight: 400; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 1rem; } .h2-subtitle { font-size: 1.25rem; margin-bottom: 1.5rem; font-weight: 450; } h3 { font-size: 2rem; /* 32px */ font-weight: 400; margin-bottom: 1rem; } p { font-size: 1rem; /* 16px (1rem) — scales with root font-size */ margin-bottom: 0.5rem; line-height: 1.5; } /* Spacing utilities removed — prefer component/section spacing. */ /* vertical padding utilities removed — use section/component-level spacing instead */ /* Layout Utilities */ .container { max-width: var(--layout-max-width); margin: 0 auto; padding: 0; width: 100%; } /* Scroll Snap Container */ .scroll-container { box-sizing: border-box; width: 100%; max-width: var(--layout-max-width); margin: 0 auto; min-height: 100vh; padding-left: var(--layout-padding-x); padding-right: var(--layout-padding-x); } /* Individual Sections */ section { /* Take the viewport height minus the assumed browser-navigation offset so content centers above any persistent UI. */ /* derive from the variable; default provided on :root */ min-height: 100vh; width: 100%; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top:4rem; /* per-page adjustable bottom padding (box-sizing: border-box keeps total height at 100vh) */ padding-bottom: var(--extra-padding-bottom, var(--standard-bottom-padding)); } /* Opt-in: add `sections-padded` to on pages that need extra bottom padding for every section */ body.bottom-float { --extra-padding-bottom: calc(4rem + 40px + 1rem + 1rem + var(--standard-bottom-padding) - 2rem); /* default padding (4rem) + badge height (40px) + badge vertical padding (1rem) + bottom padding (1rem) - visual adjustment (1rem) */ } .hero { align-items: center; /* hero content should be centered by default */ text-align: center; } /* ensure hero images center even when `.col-centered` is not present */ .hero img.responsive-image { margin-left: auto; margin-right: auto; display: block; } /* Floating app badges — fixed to bottom-center of viewport so they remain visible while scrolling */ /* Shared surface treatment (border-radius, shadow, backdrop-filter) */ .surface { border-radius: 8px; box-shadow: 0 8px 24px rgba(2, 6, 23, 0.12); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); } /* structural layout only — visual surface provided by `.surface` */ .floating-app-badges { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); /* center horizontally */ display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.5rem; z-index: 220; -webkit-tap-highlight-color: transparent; /* ensure the container doesn't shrink the badges and stays wide enough */ width: max-content; white-space: nowrap; } /* grouping wrapper around store badges */ .badge-links { display: inline-flex; gap: 0.5rem; } .download-copy { /* inherit typographic styles from container (mostly font-size) */ white-space: nowrap; } /* Keep badge proportions identical to hero */ .floating-app-badges img { height: 40px; /* match .hero .app-badges */ width: auto; display: block; flex: 0 0 auto; } /* ensure section content sits above the overlay */ section>.container { position: relative; z-index: 2; } /* Page-level pattern overlay — single fixed layer behind section content */ body::before { content: ""; position: fixed; inset: 0; background-image: url('/assets/patterntst.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; /* stretch single image to fully cover viewport */ opacity: 0.66; /* uniform strength across all sections */ pointer-events: none; z-index: 1; } /* per-section overlay removed (now handled by body::before) */ /* Navigation */ nav { position: fixed; top: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: 100%; max-width: var(--layout-max-width); padding: 1.5rem 0; padding-left: var(--layout-padding-x); padding-right: var(--layout-padding-x); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; z-index: 100; } .nav-brand { text-decoration: none; color: var(--color-text); justify-self: start; grid-column: 1; } .nav-links { display: flex; gap: 2rem; justify-self: center; grid-column: 2; position: relative; /* anchoring dropdowns */ } .nav-links a, .products-toggle { text-decoration: none; color: var(--color-text); } /* products toggle button */ .products-toggle { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; } /* Dropdown container */ .nav-dropdown { position: relative; display: inline-block; } /* Popup panel */ .products-popup { position: absolute; left: 50%; /* start just slightly above final position so the transition feels crisp */ transform: translateX(-50%) translateY(10px); /* reduce gap so there's no 'dead' area between the button and panel */ top: calc(100% + 0.25rem); min-width: 800px; padding: 0.75rem 1.25rem; visibility: hidden; pointer-events: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; z-index: 120; white-space: normal; } /* Show only when opened via click (JS adds `.open`). Removed hover / focus-within behavior so menu opens only on explicit toggle. */ .nav-dropdown.open .products-popup { opacity: 1; visibility: visible; pointer-events: auto; } /* Product link/card inside popup */ .product-card { display: block; text-decoration: none; color: inherit; } .product-card h3 { margin: 0; font-size: 1.5rem; } .product-card p { margin: 0; } nav a:hover, nav a:focus-visible, .products-toggle:hover, .products-toggle:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; } /* Paragraph links: underline and inherit surrounding text color (except pill buttons) */ p a:not(.btn-pill) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; color: inherit; } /* right-aligned single link container (About) */ .nav-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2rem; } .nav-end a { text-decoration: none; color: var(--color-text); } .btn-pill { display: inline-block; padding: 0.65rem 1.25rem; /* compact inline pill */ margin: 1rem 0; background-color: var(--color-text); color: var(--color-background); text-decoration: none; border-radius: 9999px; font-size: 0.85rem; line-height: 1; box-shadow: 0 2px 6px rgba(2, 6, 23, 0.08); transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease; } /* Helper when used on `` inside a paragraph to keep spacing aligned */ p a.btn-pill { margin-left: 0.25rem; margin-right: 0.25rem; } /* Responsive Grid Utilities */ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem; /* 24px */ align-items: center; height: 100%; } .col-text { grid-column: 2 / span 5; z-index: 2; } /* Centered column variants - `col-centered` (default): spans columns 2 → 11 (centered, full) - `class="col-centered half"`: spans columns 5 → 8 (centered, half) Both variants become full-width on small screens (mobile). */ .col-centered { grid-column: 2 / span 10; /* columns 2 - 11 */ text-align: center; } .col-centered.half { grid-column: 4 / span 6; /* columns 5 - 8 */ text-align: center; } .col-image { grid-column: 7 / span 5; /* center image if smaller */ display: flex; align-items: center; justify-content: center; } /* allow inner images to scale but not exceed viewport height */ .col-image img { max-width: 100%; max-height: 45vh; width: auto; height: auto; } /* Layout follows DOM order — swap the HTML order of `.col-text` and `.col-image` to change columns */ .grid-12>.col-text:first-child, .grid-12>.col-image:first-child { grid-column: 2 / span 5; } .grid-12>.col-text:last-child, .grid-12>.col-image:last-child { grid-column: 7 / span 5; } .responsive-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* show entire image without cropping */ object-position: center center; /* center the image in the container */ display: block; } /* Small icon helper for inline SVGs used in nav/footer */ .icon { width: 1.15rem; height: 1.15rem; display: inline-block; vertical-align: text-bottom; } /* hamburger button for tiny screens */ .nav-hamburger { background: none; border: 0; padding: 0.5rem; display: none; /* shown only at phone breakpoint */ cursor: pointer; justify-self: end; } .mobile-menu { display: none; position: absolute; top: 100%; left: 0; width: max-content; min-width: 12rem; background-color: var(--color-background); padding: 1rem 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); flex-direction: column; gap: 1rem; z-index: 110; } .mobile-menu.open { display: flex; } .mobile-menu a { text-decoration: none; color: var(--color-text); } /* Ensure