/**
* FALLINORG WEBSITE TYPOGRAPHY SYSTEM
* ====================================
*
* This stylesheet enforces a consistent 5-tier typography system across all pages.
* Use the .type-* classes to maintain visual hierarchy and ensure consistency.
*
* TYPE CLASSES (Desktop Sizes - Base: type-m = 20px):
* ────────────────────────────────────────────────────
* .type-xl 60px Weight: 700 Line-height: 1.2 → Hero titles, main page headers
* .type-l 35px Weight: 600 Line-height: 1.3 → Section headers, emphasis
* .type-m 20px Weight: 400 Line-height: 1.6 → Body copy, paragraphs, feature lists
* .type-s 18.75px Weight: 500 Line-height: 1.5 → Subtitles, labels, section intros
* .type-xs 15px Weight: 400 Line-height: 1.4 → Captions, small labels, metadata
*
* MOBILE BREAKPOINTS (Scaled Proportionally):
* ────────────────────────────────────────────
* 768px and below:
* .type-xl: 50px .type-l: 30px .type-m: 17px .type-s: 17.5px .type-xs: 13.5px
*
* 576px and below:
* .type-xl: 40px .type-l: 26px .type-m: 16px .type-s: 15.5px .type-xs: 13px
*
* USAGE GUIDELINES:
* ─────────────────
* 1. Always use .type-* classes for new content
* 2. Avoid mixing Bootstrap typography (fs-*, display-*) with type classes
* 3. Do not use !important for typography—use proper CSS cascade
* 4. Maintain consistent line-heights (body: 1.6, headings: 1.2-1.5)
* 5. Letter-spacing (-0.02em to -0.01em) only for large headlines
*
* EXAMPLE HTML:
* ─────────────
* Hero Title
* Section Header
* Body paragraph text here...
* Subtitle or Label
* Small caption text
*/
/* CSS Variables */
:root {
/* Primary Colors */
--color-black: #000000;
--color-white: #ffffff;
--color-gray-light: #F2F2F2;
--color-gray-medium: #E0E0E0;
--color-gray-dark: #666666;
--color-gray-darker: #1D1D1F;
--color-gray-darkest: #1B1B1B;
/* Brand Colors */
--color-purple-primary: #5033b0;
--color-purple-secondary: #714EF6;
--color-purple-hover: #5a3bc4;
--color-purple-light: #8a5ff5;
--color-blue-accent: #3478F7;
--color-green-accent: #9ec99e;
--color-green-success: #35C85B;
/* UI Colors */
--color-border-light: #DDDDDD;
--color-border-medium: #CCCCCC;
--color-bg-light: #F4F4F4;
--color-error: #dc3545;
--color-dark-card: #1a1a1a;
--color-badge: #212121;
/* Opacity Colors */
--color-white-80: rgba(255, 255, 255, 0.8);
--color-white-70: rgba(255, 255, 255, 0.7);
--color-white-10: rgba(255, 255, 255, 0.1);
--color-black-90: rgba(0, 0, 0, 0.9);
--color-black-80: rgba(0, 0, 0, 0.8);
--color-black-70: rgba(0, 0, 0, 0.7);
--color-black-60: rgba(0, 0, 0, 0.6);
--color-black-10: rgba(0, 0, 0, 0.1);
--color-black-08: rgba(0, 0, 0, 0.08);
--color-navbar-dark: rgba(21, 21, 21, 0.8);
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-section: 80px;
--spacing-section-mobile: 60px;
/* Border Radius */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 50px;
--radius-circle: 50%;
/* Transitions */
--transition-fast: 0.2s;
--transition-normal: 0.3s;
--transition-ease: all 0.3s ease;
/* Shadows */
--shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.25);
--shadow-md: 0 8px 25px rgba(80, 51, 176, 0.3);
--shadow-lg: 0 8px 32px rgba(255, 255, 255, 0.1);
/* Other Common Values */
--blur-amount: blur(20px);
--navbar-padding: 80px;
--navbar-padding-mobile: 70px;
}
/* Global Styles */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: var(--color-black);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
/* Navigation */
.navbar {
background-color: var(--color-navbar-dark);
backdrop-filter: var(--blur-amount);
border-bottom: 1px solid var(--color-white-10);
transition: var(--transition-ease);
padding: 0.20rem 0;
align-items: center;
}
.navbar.navbar-light {
background-color: var(--color-white-70);
backdrop-filter: var(--blur-amount);
border-bottom: 1px solid var(--color-black-08);
}
.navbar .container {
display: flex;
align-items: center;
}
.navbar-nav {
align-items: center;
}
.navbar .navbar-brand {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-white);
text-decoration: none;
}
.navbar.navbar-light .navbar-brand {
color: var(--color-black);
}
.navbar .navbar-brand:hover {
color: var(--color-white);
}
.navbar.navbar-light .navbar-brand:hover {
color: var(--color-black);
}
.navbar .nav-link {
font-weight: 400;
padding: var(--spacing-xs) var(--spacing-sm);
color: var(--color-white-80);
transition: color var(--transition-normal) ease;
}
.navbar.navbar-light .nav-link {
color: var(--color-black-70);
}
.navbar .nav-link:hover {
color: var(--color-white);
}
.navbar.navbar-light .nav-link:hover {
color: var(--color-black);
}
.navbar .nav-link.active {
color: var(--color-white);
font-weight: 500;
}
.navbar.navbar-light .nav-link.active {
color: var(--color-black);
font-weight: 500;
}
/* Purple Pill Button */
a.btn-purple-pill,
.btn.btn-purple-pill {
background: var(--color-purple-primary); /* Safari fallback */
background: -webkit-linear-gradient(135deg, var(--color-purple-primary) 0%, var(--color-purple-secondary) 100%);
background: linear-gradient(135deg, var(--color-purple-primary) 0%, var(--color-purple-secondary) 100%);
border: none;
color: var(--color-white);
-webkit-border-radius: var(--radius-full);
border-radius: var(--radius-full);
padding: 0.15rem 1.5rem;
font-weight: 500;
text-decoration: none;
-webkit-transition: var(--transition-ease);
transition: var(--transition-ease);
display: inline-block;
-webkit-appearance: none;
appearance: none;
}
a.btn-purple-pill:hover,
.btn.btn-purple-pill:hover {
background: var(--color-purple-hover); /* Safari fallback */
background: -webkit-linear-gradient(135deg, var(--color-purple-hover) 0%, var(--color-purple-light) 100%);
background: linear-gradient(135deg, var(--color-purple-hover) 0%, var(--color-purple-light) 100%);
color: var(--color-white);
text-decoration: none;
}
a.btn-purple-pill:focus,
.btn.btn-purple-pill:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(80, 51, 176, 0.25);
box-shadow: 0 0 0 0.2rem rgba(80, 51, 176, 0.25);
color: var(--color-white);
}
a.btn-purple-pill.btn-lg,
.btn.btn-purple-pill.btn-lg {
padding: 0.6rem 2.5rem;
font-size: 1.1rem;
}
/* Add padding to body to account for fixed navbar - only for pages with navbar */
body.has-navbar {
padding-top: var(--navbar-padding);
}
/* Section Styles */
.section-black {
background-color: var(--color-black);
padding: var(--spacing-section) 0;
min-height: relative;
display: flex;
align-items: center;
position: relative;
}
.section-white {
background-color: var(--color-white);
padding: var(--spacing-section) 0;
min-height: relative;
display: flex;
align-items: center;
position: relative;
color: var(--color-black);
}
.section-white h1,
.section-white h2,
.section-white h3,
.section-white h4,
.section-white h5,
.section-white h6,
.section-white p,
.section-white span {
color: var(--color-black);
}
.section-white .btn-outline-light {
border-color: var(--color-black);
color: var(--color-black);
}
.section-white .btn-outline-light:hover {
background-color: var(--color-black);
border-color: var(--color-black);
color: var(--color-white);
}
.section-lightgray {
background-color: var(--color-gray-light);
padding: var(--spacing-section) 0;
min-height: relative;
display: flex;
align-items: center;
position: relative;
color: var(--color-black);
}
.section-lightgray h1,
.section-lightgray h2,
.section-lightgray h3,
.section-lightgray h4,
.section-lightgray h5,
.section-lightgray h6,
.section-lightgray p,
.section-lightgray span {
color: var(--color-black);
}
.section-lightgray .btn-outline-light {
border-color: var(--color-black);
color: var(--color-black);
}
.section-lightgray .btn-outline-light:hover {
background-color: var(--color-black);
border-color: var(--color-black);
color: var(--color-white);
}
.section-lightgray .feature-card {
background-color: var(--color-white);
}
.section-lightgray .feature-card h4,
.section-white .feature-card h4 {
color: var(--color-black);
font-weight: 600;
}
.section-lightgray .feature-card p,
.section-white .feature-card p {
color: var(--color-black-80);
margin-bottom: 0;
line-height: 1.6;
}
.section-lightgray .feature-card h1,
.section-white .feature-card h1 {
color: var(--color-black);
}
/* Feature card with flexbox layout (text + image) */
.feature-card.d-flex {
padding: 0;
overflow: hidden;
flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
align-items: flex-start;
-webkit-box-align: start;
}
.feature-card.d-flex > div:first-child {
padding: 30px;
}
.feature-card.d-flex img {
margin: 0;
display: block;
margin-top: 30px;
}
/* Feature card content wrapper */
.feature-card-content {
-webkit-box-flex: 1;
flex: 1 1 auto;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: start;
justify-content: flex-start;
width: 100%;
padding: 30px;
padding-bottom: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 0;
}
/* Feature card image styles */
.feature-card-image {
width: auto;
max-width: 100%;
height: 130px;
max-height: 130px;
flex: 0 0 auto;
flex-shrink: 0;
padding: 0 30px 30px 30px;
display: block;
object-fit: contain;
-o-object-fit: contain;
object-position: left center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
align-self: flex-start;
margin-right: auto;
margin-top: auto;
}
/* Green feature card variant */
.feature-card.d-flex.feature-card-green {
background-color: var(--color-green-accent);
padding: 0;
overflow: hidden;
}
.feature-card.d-flex.feature-card-green .feature-card-content {
-webkit-box-flex: 1;
flex: 1;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: start;
justify-content: flex-start;
padding: 30px;
}
.feature-card-green-text {
color: var(--color-white);
}
.feature-card-green-image {
width: 350px;
height: auto;
flex-shrink: 0;
margin-left: auto;
box-shadow: var(--shadow-sm);
align-self: flex-end;
}
/* Black feature card variant (privacy card) */
/* Now uses same structure as other feature cards with image at bottom */
.feature-card.feature-card-black {
background-color: var(--color-black);
color: var(--color-white);
}
/* Text elements inside black card - keep white color */
.feature-card.feature-card-black .feature-card-black-text,
.feature-card.feature-card-black h4.feature-card-black-text,
.feature-card.feature-card-black p.feature-card-black-text {
color: var(--color-white);
}
/* Hero section with gradient */
#hero {
background-color: var(--color-white);
padding: var(--spacing-section) 0;
min-height: relative;
display: flex;
align-items: center;
position: relative;
}
#demo {
min-height: auto;
padding: 40px 0;
}
#pricing {
min-height: auto;
}
.section-darker {
background-color: var(--color-gray-darker);
padding: var(--spacing-section) 0;
min-height: relative;
display: flex;
align-items: center;
position: relative;
}
.section-dark {
background-color: var(--color-gray-darkest);
padding: var(--spacing-section) 0;
min-height: relative;
display: flex;
align-items: center;
position: relative;
}
/* Typography System - 5 Type Classes for Consistency */
/* .type-xl: Hero titles, section headers | 60px | Weight: 700 | Line Height: 1.2 */
.type-xl {
font-size: 3.75rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* .type-l: Large text, emphasis | 35px | Weight: 600 | Line Height: 1.3 */
.type-l {
font-size: 2.1875rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
}
/* .type-m: General paragraph text, body copy | 20px | Weight: 400 | Line Height: 1.6 */
.type-m {
font-size: 1.25rem;
font-weight: 400;
line-height: 1.6;
}
/* .type-s: Subtitles, section intros, labels | 18.75px | Weight: 500 | Line Height: 1.5 */
.type-s {
font-size: 1.171875rem;
font-weight: 500;
line-height: 1.5;
}
/* .type-xs: Captions, small labels | 15px | Weight: 400 | Line Height: 1.4 */
.type-xs {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.4;
}
/* Bootstrap typography overrides using type system */
/* For maximum consistency, use .type-* classes directly in HTML instead of Bootstrap typography classes */
.display-3, .display-5 {
font-weight: 700;
letter-spacing: -0.02em;
}
.lead {
font-size: 1rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
/* NOTE: .lead now maps to .type-m (body copy), not section labels.
For section labels, use .type-s class instead */
}
.btn-light:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
.btn-outline-light:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}
/* Features section - equal height columns */
#features .col-lg-4,
#features .col-md-4 {
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
/* Features */
.feature-card {
background-color: #1D1D1F;
-webkit-border-radius: 16px;
border-radius: 16px;
padding: 30px;
text-align: left;
/*border: 1px solid rgba(255, 255, 255, 0.1);*/
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: flex-start;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
flex: 1;
-webkit-box-flex: 1;
}
.feature-card:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
/*border-color: rgba(255, 255, 255, 0.2);*/
}
.feature-card h4 {
color: #ffffff;
font-weight: 600;
}
.feature-card p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
line-height: 1.6;
}
/* Tablet adjustments (768px - 992px) */
@media (max-width: 992px) and (min-width: 768px) {
/* Feature cards - better spacing on tablets */
#features .feature-card {
padding: 25px;
margin-bottom: 1rem;
}
/* Feature card content padding */
#features .feature-card-content {
padding: 25px;
padding-bottom: 0;
}
/* Feature card flexbox adjustments */
#features .feature-card.d-flex {
padding: 0;
}
#features .feature-card.d-flex > div:first-child {
padding: 25px;
}
/* Feature card images - consistent height on tablets */
#features .feature-card-image {
padding: 0 25px 25px 25px;
max-width: 300px;
width: auto;
height: 130px;
max-height: 100%;
object-fit: contain;
-o-object-fit: contain;
object-position: left center;
align-self: flex-start;
margin-right: auto;
}
/* Green feature card adjustments */
#features .feature-card.feature-card-green .feature-card-content {
padding: 25px;
}
/* Presale button adjustments */
a.btn-presale,
.btn.btn-presale {
padding-left: 2.5rem;
padding-right: 2.5rem;
width: 100%;
max-width: 100%;
}
/* Pricing cards - reduce header size to prevent text wrapping */
#pricing .price-display h3.type-m {
font-size: 1.171875rem;
font-weight: 500;
line-height: 1.5;
}
#pricing .price {
font-size: 1.75rem;
}
#pricing .price-period {
font-size: 0.95rem;
}
#pricing .pricing-header {
min-height: 100px;
}
#pricing .pricing-card {
padding: 35px 28px;
}
}
/* Small displays - single column cards (below tablet, above mobile) */
@media (max-width: 767px) and (min-width: 576px) {
/* Feature card images - use original size when cards stack to single column */
#features .feature-card-image {
height: 130px;
max-height: 130px;
max-width: 300px;
padding: 0 30px 30px 30px;
object-position: left center;
align-self: flex-start;
margin-right: auto;
}
/* Green feature card - hide image and make layout match other cards */
#features .feature-card-green-image {
display: none;
}
#features .feature-card.feature-card-green {
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
padding: 30px;
}
#features .feature-card.feature-card-green .feature-card-content {
padding: 0;
}
}
/* Very small window adjustments */
@media (max-width: 480px) {
a.btn-presale,
.btn.btn-presale {
padding-left: 1.5rem;
padding-right: 1.5rem;
width: 100%;
max-width: 100%;
font-size: 0.9rem;
white-space: nowrap;
}
}
/* Typography Mobile Breakpoints - Type Class Variants */
@media (max-width: 768px) {
/* Adjust type classes for tablet/mobile (scaled proportionally from base) */
.type-xl {
font-size: 3.125rem;
/* 50px - scaled from 60px */
}
.type-l {
font-size: 1.875rem;
/* 30px - scaled from 35px */
}
.type-m {
font-size: 1.0625rem;
/* 17px - scaled from 20px, with increased line-height for readability */
line-height: 1.7;
}
.type-s {
font-size: 1.09375rem;
/* 17.5px - scaled from 18.75px */
}
.type-xs {
font-size: 0.84375rem;
/* 13.5px - scaled from 15px */
}
}
@media (max-width: 576px) {
/* Hero image - mobile adjustments */
.hero-image {
max-height: 300px;
}
/* Feature cards - reduce padding on very small screens */
#features .feature-card {
padding: 15px;
}
#features .feature-card-content {
padding: 15px;
padding-bottom: 0;
}
#features .feature-card.d-flex > div:first-child {
padding: 15px;
}
/* Feature card images - keep height large on very small screens for wide icons */
/* Reduce margin-top to minimize gap between text and image */
#features .feature-card-image {
height: 130px;
max-height: 130px;
max-width: 100%;
padding: 0 15px 15px 15px;
object-fit: contain;
-o-object-fit: contain;
object-position: left center;
align-self: flex-start;
margin-right: auto;
margin-top: 10px;
}
/* Green feature card - hide image and make layout match other cards */
#features .feature-card-green-image {
display: none;
}
#features .feature-card.feature-card-green {
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
padding: 15px;
}
#features .feature-card.feature-card-green .feature-card-content {
padding: 0;
}
/* Extra small screens (scaled proportionally from base) */
.type-xl {
font-size: 2.5rem;
/* 40px - scaled from 60px */
line-height: 1.1;
}
.type-l {
font-size: 1.625rem;
/* 26px - scaled from 35px */
}
.type-m {
font-size: 1rem;
/* 16px - scaled from 20px */
line-height: 1.7;
}
.type-s {
font-size: 0.96875rem;
/* 15.5px - scaled from 18.75px */
}
.type-xs {
font-size: 0.8125rem;
/* 13px - scaled from 15px */
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
/* Hero image - tablet adjustments */
.hero-image {
max-height: 450px;
}
/* Navigation mobile adjustments */
.navbar-brand {
font-size: 1.25rem;
}
.navbar .navbar-brand img {
width: 28px;
height: 28px;
}
.navbar a.btn-purple-pill,
.navbar .btn.btn-purple-pill {
padding: 0.12rem 1.2rem;
font-size: 0.9rem;
margin-top: 0.5rem;
}
.navbar .nav-link {
padding: 0.75rem 1rem;
}
body.has-navbar {
padding-top: 70px;
}
.section-black {
padding: 60px 0;
min-height: auto;
}
.section-white {
padding: 60px 0;
min-height: auto;
}
.section-lightgray {
padding: 60px 0;
min-height: auto;
}
.section-darker {
padding: 60px 0;
min-height: auto;
}
.section-dark {
padding: 60px 0;
min-height: auto;
}
.display-3 {
font-size: 2.5rem;
}
.display-5 {
font-size: 2rem;
}
.screenshot-container {
width: 80%;
max-width: 350px;
margin: 40px auto 0 auto;
}
/* Hero section mobile adjustments */
#hero img[src="assets/logo.png"] {
width: 150px;
height: 150px;
}
#hero .mt-5 {
margin-top: 1rem;
}
#hero .display-5 {
font-size: 1.75rem;
}
#hero .fs-2 {
font-size: 1.25rem;
}
/* Reduce pre-sale button size on mobile */
a.btn-presale,
.btn.btn-presale {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.9rem;
width: 100%;
white-space: nowrap;
}
/* Consistent typography for features section */
#features .lead.fw-bold {
font-size: 0.9rem;
}
#features .display-5 {
font-size: 1.5rem;
}
#features .fs-4 {
font-size: 1rem;
}
#features .feature-card h4 {
font-size: 1.1rem;
}
#features .feature-card p {
font-size: 0.9rem;
}
/* Fix feature card alignment overlap */
#features .col-lg-4,
#features .col-md-4 {
margin-bottom: 1.2rem;
}
#features .feature-card {
padding: 20px;
margin-bottom: 0.5rem;
}
#pricing .lead.fw-bold {
font-size: 0.9rem;
}
#pricing .fs-2 {
font-size: 1.3rem;
}
#pricing .fs-5 {
font-size: 1rem;
}
#pricing .pricing-card {
padding: 30px 20px;
}
#pricing .price {
font-size: 1.7rem;
}
#pricing .price-period {
font-size: 0.95rem;
}
#pricing .feature-item {
font-size: 0.9rem;
}
}
/* FAQ section mobile adjustments */
#faq .lead.fw-bold {
font-size: 0.9rem;
}
#faq .display-8 {
font-size: 1.3rem;
}
#faq .lead {
font-size: 1rem;
}
#faq .accordion-button {
font-size: 0.95rem;
}
#faq .accordion-body {
font-size: 0.9rem;
}
/* Newsletter section mobile adjustments */
#newsletter .display-6 {
font-size: 1.3rem;
}
#newsletter .lead {
font-size: 1rem;
}
#newsletter .form-control {
font-size: 0.9rem;
}
#newsletter .btn {
font-size: 0.9rem;
}
/* What's New section mobile adjustments */
.stacking-cards {
height: auto;
padding: 10px 0;
margin: 0 15px;
}
.whatsnew-card {
padding: 20px;
}
.whatsnew-card.main-card {
padding: 25px 20px;
}
/* Remove mobile-only card-header overrides - keep horizontal layout */
.whatsnew-icon {
width: 80px;
height: 80px;
}
.version-title {
font-size: 1.3rem;
}
.release-date {
font-size: 0.8rem;
}
.feature-list li {
font-size: 0.9rem;
margin-bottom: 8px;
line-height: 1.4;
}
/* Hide background cards on mobile for cleaner look */
.whatsnew-card.bg-card-1,
.whatsnew-card.bg-card-2 {
display: none;
}
}
/* Whatsnew Link Styles */
a.whatsnew-link {
color: #666666;
text-decoration: none;
font-weight: 500;
-webkit-text-decoration: none;
}
a.whatsnew-link:hover,
a.whatsnew-link:focus,
a.whatsnew-link:active {
color: #000000;
text-decoration: none;
-webkit-text-decoration: none;
}
a.whatsnew-link:visited {
color: #666666;
}
/* Hero image styling */
.hero-image {
height: auto !important;
max-height: 675px;
width: auto;
max-width: 100%;
display: block;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 1px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
/* Safari-specific image rendering */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* Category selector styles */
.category-path-container {
gap: 8px;
}
.category-path-label {
color: var(--color-gray-dark);
}
span.category-path-arrow,
#selectedCategory {
color: var(--color-blue-accent);
}
.category-buttons-container {
justify-content: flex-start;
}
.category-button {
background-color: var(--color-bg-light);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-sm);
padding: 0px 16px;
display: flex;
align-items: center;
cursor: pointer;
transition: gap var(--transition-fast);
}
.category-button-text {
color: var(--color-black);
font-size: 14px;
}
.category-button-circle {
width: 8px;
height: 8px;
background-color: var(--color-blue-accent);
border-radius: var(--radius-circle);
margin-right: 8px;
}
.category-plus-button {
width: 32px;
height: 32px;
background-color: var(--color-bg-light);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-circle);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.category-plus-icon {
color: var(--color-black);
font-size: 18px;
}
/* Full width wrapper */
.full-width {
width: 100%;
}
/* Pricing text color */
.pricing-text-dark {
color: #000;
}
/* Logo sizing */
.logo-medium {
width: 128px;
height: auto;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Text colors for better contrast */
.section-black .text-light-emphasis,
.section-darker .text-light-emphasis,
.section-dark .text-light-emphasis {
color: rgba(255, 255, 255, 0.7);
}
/* Screenshot with overlay effect */
.screenshot-container {
position: relative;
width: 100%;
margin: 60px auto 0 auto;
text-align: center;
}
.screenshot-container img {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
.screenshot-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 33.33%; /* 1/3 of the image */
/* Safari fallback with base64 gradient */
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC44IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZykiLz48L3N2Zz4=');
/* Safari old webkit syntax */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0)));
/* Modern webkit syntax */
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
/* Firefox */
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
/* Standard */
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: 1;
}
/* Demo video styling */
.demo-video {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
}
/* Minimal FAQ accordion styling */
.accordion-item {
background-color: #F2F2F2;
border: none;
}
.accordion-button {
/* Typography: Maps to .type-m (1rem, weight 400) */
background-color: #F2F2F2;
color: #000000;
border: none;
}
.accordion-button::after {
filter: brightness(0);
}
.accordion-button:focus {
border: none;
box-shadow: none;
}
.accordion-button:not(.collapsed) {
background-color: #E8E8E8;
color: #000000;
}
.accordion-button:not(.collapsed)::after {
filter: brightness(0);
}
.accordion-body {
/* Typography: Maps to .type-m (1rem, weight 400) */
background-color: #F2F2F2;
color: rgba(0, 0, 0, 0.8);
}
/* Pricing Section - Equal Height Cards */
#pricing .row > .col-lg-5,
#pricing .row > .col-md-6 {
display: flex;
}
/* Pricing Card Styles */
#pricing .pricing-card {
background: #F2F2F2;
border: 1px solid #E0E0E0;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 40px;
text-align: left;
-webkit-transition: transform 0.3s ease, border-color 0.3s ease;
transition: transform 0.3s ease, border-color 0.3s ease;
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#pricing .pricing-card:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
border-color: #CCCCCC;
background: #FFFFFF;
}
.pricing-header {
margin-bottom: 20px;
flex-shrink: 0;
min-height: 120px;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: start;
justify-content: flex-start;
}
.price-display {
margin: 20px 0;
-webkit-box-flex: 1;
flex-grow: 1;
min-height: 128px;
}
#pricing .price {
font-size: 2rem;
font-weight: 700;
color: #000000;
letter-spacing: -0.02em;
}
.price-period {
font-size: 1.1rem;
color: rgba(0, 0, 0, 0.6);
margin-left: 8px;
font-weight: 400;
}
.pricing-description {
/* Typography: Maps to .type-m (1rem, line-height 1.6) */
color: rgba(0, 0, 0, 0.8);
margin-bottom: 0;
}
#pricing .features-list {
text-align: left;
margin-bottom: 30px;
-webkit-box-flex: 1;
flex: 1;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.feature-item {
/* Typography: Maps to .type-m (1rem) */
display: flex;
align-items: flex-start;
margin-bottom: 12px;
color: rgba(0, 0, 0, 0.9);
}
.feature-item i {
color: #35C85B;
margin-right: 12px;
font-size: 1.1rem;
min-width: 20px;
}
.download-section {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 30px;
flex-shrink: 0;
min-height: 120px;
}
.email-input-group {
margin-bottom: 0;
}
.email-input {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
color: #ffffff;
padding: 12px 16px;
font-size: 1rem;
}
.email-input:focus {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
color: #ffffff;
outline: none;
}
.email-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.email-input.is-invalid {
border-color: #dc3545;
}
.invalid-feedback {
color: #dc3545;
font-size: 0.875rem;
margin-top: 5px;
}
#downloadBtn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#downloadBtn:disabled:hover {
transform: none;
box-shadow: none;
}
.download-note {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
margin-top: 15px;
margin-bottom: 0;
}
/* Custom Pre-Sale button styling */
a.btn-presale,
.btn.btn-presale {
background-color: #000000;
background: #000000;
border: none;
border-color: transparent;
color: #ffffff;
border-radius: 50px;
-webkit-border-radius: 50px;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
padding-left: 3rem;
padding-right: 3rem;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
text-decoration: none;
width: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
text-align: center;
white-space: nowrap;
}
a.btn-presale:hover,
a.btn-presale:focus,
a.btn-presale:active,
.btn.btn-presale:hover,
.btn.btn-presale:focus,
.btn.btn-presale:active {
background-color: #1a1a1a;
background: #1a1a1a;
border-color: transparent;
color: #ffffff;
text-decoration: none;
transform: translateY(-2px);
-webkit-transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
/* Stripe button styling */
.stripe-button {
width: 100%;
margin-top: 1rem;
}
/* Custom badge styling */
.badge.text-bg-secondary {
background-color: #212121;
color: white;
font-weight: normal;
}
/* Roadmap number circles */
.roadmap-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
background-color: transparent;
color: white;
border: 2px solid #D0D0D0;
border-radius: 50%;
font-weight: bold;
font-size: 1.1rem;
flex-shrink: 0;
}
/* Roadmap text styling - DEPRECATED: Use .type-m instead */
/* .roadmap-text class no longer needed - typography now handled by .type-m */
/* Feature card text styling - DEPRECATED: Use .type-m instead */
/* .feature-text class no longer needed - typography now handled by .type-m */
/* Stacking container */
.stacking-cards {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 20px 0;
overflow: visible; /* let the peeking borders show */
isolation: isolate; /* predictable z-index stacking */
display: block; /* container height grows with main card */
}
/* Main card: natural height */
.whatsnew-card.main-card {
background-color: #F2F2F2;
border: 1px solid #E0E0E0;
border-radius: 16px;
padding: 30px;
box-sizing: border-box;
position: relative; /* in flow so height matches content */
z-index: 3;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.whatsnew-card.main-card:hover {
transform: translateY(-5px);
border-color: #CCCCCC;
}
/* Background cards: same height as main card, smaller width + offsets */
.whatsnew-card.bg-card-1,
.whatsnew-card.bg-card-2 {
position: absolute;
height: 100%; /* match main card height dynamically */
box-sizing: border-box;
border-radius: 16px;
background-color: #F2F2F2;
border: 1px solid #E0E0E0;
padding: 30px;
pointer-events: none;
}
/* Stacking offsets and opacity */
.bg-card-1 {
z-index: 2;
left: 3%;
right: 3%;
top: -5px; /* peek from above */
bottom: auto; /* let height shrink so it only shows above */
height: 100%; /* shrink to fit the top peek */
opacity: 0.85;
}
.bg-card-2 {
z-index: 1;
left: 6%;
right: 6%;
top: -22px;
height: 100%;
opacity: 0.6;
}
/* Hide content inside background cards so only borders show */
.bg-card-1 .card-header,
.bg-card-1 .card-content,
.bg-card-2 .card-header,
.bg-card-2 .card-content {
display: none;
}
/* center the smaller backgrounds visually (in case you used inset earlier) */
.whatsnew-card { box-sizing: border-box; } /* keep */
/* Typography (keep yours, removing the duplicate !important versions helps) */
.card-header {
margin-bottom: 20px;
text-align: left;
display: flex;
flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
align-items: center;
-webkit-box-align: center;
gap: 15px;
}
#whatsnew .whatsnew-icon {
width: 100px;
height: 100px;
flex-shrink: 0;
object-fit: contain;
}
.header-content {
-webkit-box-flex: 1;
flex: 1;
}
.version-title { color: #000; margin-bottom: 5px; } /* Maps to .type-l */
.release-date { color: rgba(0, 0, 0, 0.6); margin-bottom: 0; } /* Maps to .type-xs */
.card-content { text-align: left; }
/* Extra small mobile optimizations */
@media (max-width: 576px) {
.stacking-cards {
height: auto;
margin: 0 10px;
}
.whatsnew-card {
padding: 20px 15px;
}
.whatsnew-card.main-card {
padding: 20px 15px;
}
#whatsnew .whatsnew-icon {
width: 80px;
height: 80px;
}
.card-header {
gap: 12px;
}
#whatsnew .version-title {
font-size: 1.2rem;
}
#whatsnew .release-date {
font-size: 0.8rem;
}
#whatsnew .feature-list li {
font-size: 0.85rem;
margin-bottom: 6px;
line-height: 1.3;
}
/* Adjust section padding for very small screens */
#whatsnew.section-black {
padding: 40px 0;
}
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
color: rgba(0, 0, 0, 0.9);
margin-bottom: 8px;
padding-left: 20px;
position: relative;
font-size: 1rem;
font-weight: 400;
line-height: 1.6; /* Maps to .type-m */
}
.feature-list li::before {
content: "•";
color: #714EF6;
font-weight: bold;
position: absolute;
left: 0;
}
/* Responsive pricing card */
@media (max-width: 768px) {
.pricing-card {
padding: 30px 20px;
margin: 0 15px;
}
.price {
font-size: 2.5rem;
}
}
/* Feedback Box */
.feedback-box {
background-color: #F2F2F2;
-webkit-border-radius: 16px;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
border: 1px solid #E0E0E0;
display: block;
visibility: visible;
opacity: 1;
}
.feedback-title {
/* Typography: Maps to .type-l (1.75rem, weight 600) */
color: #000000;
margin-bottom: 15px;
}
.feedback-text {
/* Typography: Maps to .type-m (1rem, line-height 1.6) */
color: rgba(0, 0, 0, 0.8);
margin-bottom: 20px;
}
.feedback-link {
color: #714EF6;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.feedback-link:hover {
color: #8a5ff5;
text-decoration: none;
}
/* Changelog Styles */
.changelog-version {
padding: 30px;
margin-bottom: 30px;
background-color: #F2F2F2;
border-radius: 16px;
border: 1px solid #E0E0E0;
}
.version-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 20px;
}
.version-title {
/* Typography: Maps to .type-l (1.75rem, weight 600)
Keep custom color/margin, inherit size/weight from type-l class */
color: #000000;
margin-bottom: 5px;
}
.version-subtitle {
/* Typography: Maps to .type-m (1rem, weight 400) */
color: rgba(0, 0, 0, 0.6);
margin-bottom: 0;
}
.change-category {
/* Typography: Maps to .type-s (0.9375rem, weight 500) */
color: #000000;
margin-top: 25px;
margin-bottom: 15px;
}
.change-list {
list-style: none;
padding: 0;
margin: 0;
}
.change-list li {
color: rgba(0, 0, 0, 0.9);
margin-bottom: 12px;
padding-left: 20px;
position: relative;
font-size: 1rem;
font-weight: 400;
line-height: 1.6; /* Maps to .type-m */
}
.change-list li::before {
content: "•";
color: #714EF6;
font-weight: bold;
position: absolute;
left: 0;
}
/* Mobile adjustments for changelog */
@media (max-width: 768px) {
.changelog-version {
padding: 20px;
margin-bottom: 20px;
}
.version-title {
font-size: 1.5rem;
}
.version-subtitle {
font-size: 1rem;
}
.change-category {
font-size: 1.1rem;
margin-top: 20px;
margin-bottom: 12px;
}
.change-list li {
font-size: 0.9rem;
margin-bottom: 10px;
line-height: 1.5;
}
}
/* Footer Styles */
footer.footer {
background-color: #F2F2F2;
background: #F2F2F2;
padding: 60px 0 40px 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
footer.footer .footer-content {
text-align: left;
}
footer.footer .footer-newsletter {
text-align: left;
}
footer.footer .footer-newsletter h4 {
color: #000000;
}
footer.footer .footer-title {
font-size: 1.8rem;
font-weight: 600;
color: #000000;
margin-bottom: 15px;
}
footer.footer .footer-description {
font-size: 1.1rem;
color: rgba(0, 0, 0, 0.7);
margin-bottom: 30px;
line-height: 1.6;
}
footer.footer .footer-links {
margin-bottom: 30px;
display: flex;
flex-direction: column;
gap: 15px;
}
footer.footer a.footer-link {
/* Typography: Maps to .type-m (1rem) */
color: rgba(0, 0, 0, 0.7);
text-decoration: none;
-webkit-text-decoration: none;
font-weight: 500;
margin: 0;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
display: inline-block;
}
footer.footer a.footer-link:hover,
footer.footer a.footer-link:focus,
footer.footer a.footer-link:active {
color: #000000;
text-decoration: none;
-webkit-text-decoration: none;
}
footer.footer a.footer-link:visited {
color: rgba(0, 0, 0, 0.7);
}
footer.footer .footer-link i {
font-size: 1rem;
}
footer.footer .footer-bottom {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 20px;
margin-top: 20px;
text-align: left;
}
footer.footer .footer-copyright {
/* Typography: Maps to .type-xs (0.75rem) */
color: rgba(0, 0, 0, 0.6);
margin-bottom: 0;
text-align: left;
}
/* Footer mobile adjustments */
@media (max-width: 768px) {
footer.footer {
padding: 40px 0 30px 0;
}
footer.footer .footer-title {
font-size: 1.5rem;
}
footer.footer .footer-description {
font-size: 1rem;
margin-bottom: 25px;
}
footer.footer .footer-link {
font-size: 0.95rem;
}
footer.footer .footer-copyright {
font-size: 0.85rem;
}
footer.footer .footer-newsletter {
margin-top: 30px;
}
}