@import "tailwindcss"; @import "tom-select/dist/css/tom-select.default.css"; @import "flag-icons/css/flag-icons.css"; /* Dark mode is class-based so the same HTML structure can serve both light and dark themes via a `dark` class on . Theme is toggled/persisted in JS (theme-toggle.js). */ :root { --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", serif; --color-primary: #a81e2d; --color-primary-strong: #860816; --color-primary-deep: #931120; --color-background: #ffffff; --color-foreground: #161419; --color-muted: #6b6b75; --color-surface: #fbfafb; --color-surface-tint-1: #fcf6f6; --color-surface-tint-2: #fafafb; --color-border: #e5e3e8; --color-border-subtle: #e8e6eb; --color-border-soft: #e0d1d4; --color-border-faint: #d9d6db; --color-muted-2: #73707a; --color-muted-3: #47454d; --color-dark-background: #17141c; --color-dark-background-2: #141318; --color-dark-background-3: #14121a; --color-dark-background-4: #242129; --color-dark-foreground: #ffffff; --color-dark-muted: #b8b5bf; --color-dark-muted-2: #8c8a94; --color-dark-border: #3d3b45; --color-dark-section-bg: #0e0d12; --color-dark-heading: #EDEBF2; --color-dark-muted-3: #9E99A6; --radius-btn: 8px; --radius-card-sm: 14px; --radius-card: 16px; --radius-dropdown: 20px; --radius-pill: 100px; --shadow-dropdown: 0px 20px 50px 0px rgba(26, 13, 20, 0.12); --shadow-hero: 0px 30px 60px 0px rgba(26, 13, 20, 0.18); --shadow-showcase: 0px 30px 70px 0px rgba(0, 0, 0, 0.4); --shadow-featured: 0px 16px 40px 0px rgba(168, 31, 46, 0.12); --gradient-hero-light: linear-gradient(90deg, #fcf5f5 0%, #f5f7fc 100%); --gradient-hero-dark: linear-gradient(90deg, #331a1c 0%, #1c1f30 100%); --container-page: 1440px; } @theme { --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", serif; --color-primary: #a81e2d; --color-primary-strong: #860816; --color-primary-deep: #931120; --color-background: #ffffff; --color-foreground: #161419; --color-muted: #6b6b75; --color-surface: #fbfafb; --color-surface-tint-1: #fcf6f6; --color-surface-tint-2: #fafafb; --color-border: #e5e3e8; --color-border-subtle: #e8e6eb; --color-border-soft: #e0d1d4; --color-border-faint: #d9d6db; --color-muted-2: #73707a; --color-muted-3: #47454d; --color-dark-background: #17141c; --color-dark-background-2: #141318; --color-dark-background-3: #14121a; --color-dark-background-4: #242129; --color-dark-foreground: #ffffff; --color-dark-muted: #b8b5bf; --color-dark-muted-2: #8c8a94; --color-dark-border: #3d3b45; --color-dark-section-bg: #0e0d12; --color-dark-heading: #EDEBF2; --color-dark-muted-3: #9E99A6; --radius-btn: 8px; --radius-card-sm: 14px; --radius-card: 16px; --radius-dropdown: 20px; --radius-pill: 100px; --shadow-dropdown: 0px 20px 50px 0px rgba(26, 13, 20, 0.12); --shadow-hero: 0px 30px 60px 0px rgba(26, 13, 20, 0.18); --shadow-showcase: 0px 30px 70px 0px rgba(0, 0, 0, 0.4); --shadow-featured: 0px 16px 40px 0px rgba(168, 31, 46, 0.12); /* Hero gradients — do not modify */ --gradient-hero-light: linear-gradient(90deg, #fcf5f5 0%, #f5f7fc 100%); --gradient-hero-dark: linear-gradient(90deg, #331a1c 0%, #1c1f30 100%); --container-page: 1440px; } @layer base { html { background-color: var(--color-background); color: var(--color-foreground); font-family: var(--font-sans); } html.dark { background-color: var(--color-dark-background); color: var(--color-dark-foreground); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } } @layer utilities { .container-page { width: 100%; max-width: var(--container-page); margin-inline: auto; } .hero-bg { background-image: var(--gradient-hero-light); } .dark .hero-bg { background-image: var(--gradient-hero-dark); } } /* Component classes (keyTABS) — reusable, theme-aware styling. Theme switching handled manually under .dark. */ @layer components { .section-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; } .section-title { max-width: 100%; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1.1; text-align: center; } .section-description { max-width: 100%; margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 19px; line-height: 1.5; text-align: center; } .page-hero-title { font-family: var(--font-display); font-weight: 600; font-size: 58px; line-height: 106%; text-align: center; } .page-hero-description { font-family: var(--font-sans); font-weight: 400; font-size: 20px; line-height: 150%; text-align: center; } .content-section-title { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 110%; text-align: center; } .content-text-lg { font-family: var(--font-sans); font-weight: 400; font-size: 19px; line-height: 165%; text-align: center; } .site-header { /* Fluid width (no fixed 1440px). 80px desktop side padding applied at xl; smaller viewports use reduced padding to prevent overflow. */ padding: 22px 24px; height: 100px; position: relative; background-color: var(--color-background); border-bottom: 1px solid var(--color-border); } @media (min-width: 1280px) { .site-header { padding: 22px 80px; } } .dark .site-header { background-color: #0e0d12; border-bottom-color: var(--color-dark-border); } @media (max-width: 640px) { .site-header { padding: 22px 20px; } } .site-logo { width: 160px; height: 55.7px; display: block; } /* Dark logo is slightly shorter per Figma (50.94px vs 55.7px light). */ .dark .site-logo { height: 50.94px; } .desktop-nav__list, .header-actions { display: flex; align-items: center; gap: 32px; list-style: none; } @media (max-width: 1280px) { .desktop-nav__list{ gap: 30px; } .header-actions { gap: 25px; } } @media (max-width: 640px) { .desktop-nav__list, .header-actions { gap: 20px; } } .nav-link { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 16px; color: var(--color-foreground); text-decoration: none; } .nav-link:hover { color: var(--color-primary); } .dark .nav-link { color: #EDEBF2; } /* 38×38 round control: theme toggle + hamburger share this */ .icon-button { width: 38px; height: 38px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-faint); background-color: var(--color-background); color: var(--color-foreground); cursor: pointer; } .dark .icon-button { border-color: var(--color-dark-border); background-color: var(--color-dark-background); color: var(--color-dark-foreground); } .header-button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); border-radius: 8px; line-height: 16px; text-decoration: none; cursor: pointer; } .header-button--secondary { font-weight: 600; font-size: 15px; padding: 12px 20px; background-color: var(--color-background); color: var(--color-foreground); } .dark .header-button--secondary { background-color: transparent; color: #EDEBF2; } .header-button--primary { font-weight: 600; font-size: 15px; padding: 12px 20px; } .btn-red { background-color: var(--color-primary); color: #ffffff; border: 1px solid var(--color-primary); } .btn-red:hover { background-color: #7a0e1a; border-color: #7a0e1a; } .btn-white { border: 1px solid #d9d6db; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .btn-white:hover { background-color: #d9d6db; } .btn-black { background-color: #161419; color: #ffffff; } .btn-black:hover { background-color: #2c3566; } .btn-red, .btn-white, .btn-black { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .btn-red:focus-visible, .btn-white:focus-visible, .btn-black:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Dark mode: Hero + Header secondary + theme toggle (icon-button) outline buttons share the same dark background, border, and hover. */ .dark .hero__button--secondary.btn-white, .dark .header-button--secondary.btn-white, .dark .icon-button.btn-white { background-color: #0e0d12; border: 1px solid #d9d6db; } .dark .hero__button--secondary.btn-white:hover, .dark .header-button--secondary.btn-white:hover, .dark .icon-button.btn-white:hover { background-color: #474c5e; } /* Theme toggle icons (no inline display; visibility via .dark). Reference size 18×18 in both themes (Figma). */ .toggle-icon--light { width: 18px; height: 18px; display: block; } .toggle-icon--dark { width: 18px; height: 18px; display: block; } /* Header theme toggle + hamburger (both live inside .site-header). Dark variant per Figma: bg #211F26, border #4D4A54. Scoped to the header so shared .dark .icon-button.btn-white rules elsewhere stay untouched. Placed after the shared btn-white dark rules to win the equal-specificity cascade. */ .dark .site-header .icon-button { background-color: #211f26; border-color: #4d4a54; } .mobile-menu { position: absolute; top: calc(100% + 1px); left: 0; width: 100%; z-index: 50; background-color: var(--color-background); border-bottom: 1px solid var(--color-border); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; max-height: calc(100vh - 100px); overflow-y: auto; } .mobile-menu[data-state="open"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .dark .mobile-menu { background-color: #0e0d12; border-bottom-color: var(--color-dark-border); } /* Desktop: the hamburger is hidden (xl:hidden), so the mobile panel must stay completely hidden regardless of state, even during load/refresh or resize. Explicit display:none guarantees no flash at desktop widths. */ @media (max-width: 1024px) { .desktop-nav { display: none; } } @media (min-width: 1025px) { .header-actions--mobile { display: none; } } .mobile-menu ul { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0px 0px 20px; } .mobile-menu li > a { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 17px; color: var(--color-foreground); text-decoration: none; padding: 14px 4px; border-radius: 8px; } /** Tablet menu fixes **/ @media (max-width: 1024px) { .mobile-menu li > a{ padding-left: 24px; padding-right: 24px; } } .dark .mobile-menu li > a { color: #EDEBF2; } .mobile-menu li > a:hover, .mobile-menu li > a:focus-visible { color: var(--color-primary); } .mobile-menu li > a.mobile-menu-primary, .mobile-menu li > a.mobile-menu-secondary { margin-top: 8px; text-align: center; border-radius: 8px; text-decoration: none; } .mobile-menu li > a.mobile-menu-secondary { font-weight: 500; color: var(--color-foreground); background-color: var(--color-background); border: 1px solid var(--color-border-faint); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /** Tablet menu fixes **/ @media (max-width: 1024px) { .mobile-menu-primary, .mobile-menu-secondary { margin-left: 24px; margin-right: 24px; } } .mobile-menu li > a.mobile-menu-secondary:visited { color: var(--color-foreground); } .dark .mobile-menu li > a.mobile-menu-secondary { background-color: #0e0d12; border: 1px solid #d9d6db; color: #EDEBF2; } .mobile-menu li > a.mobile-menu-secondary:hover { background-color: #d9d6db; } .dark .mobile-menu li > a.mobile-menu-secondary:hover { background-color: #474c5e; } .mobile-menu li > a.mobile-menu-secondary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .mobile-menu li > a.mobile-menu-primary { font-weight: 600; color: #ffffff; background-color: var(--color-primary); border: 1px solid var(--color-primary); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .mobile-menu li > a.mobile-menu-primary:visited { color: #ffffff; } .mobile-menu li > a.mobile-menu-primary:hover, .mobile-menu li > a.mobile-menu-primary:focus-visible { background-color: #7a0e1a; border-color: #7a0e1a; color: #ffffff; } .mobile-menu li > a.mobile-menu-primary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .mobile-menu li > a.mobile-menu-primary:active { background-color: #7a0e1a; border-color: #7a0e1a; color: #ffffff; } .mobile-menu li > a.mobile-menu-secondary:active { background-color: #d9d6db; } .dark .mobile-menu li > a.mobile-menu-secondary:active { background-color: #474c5e; } @media (max-width: 640px) { .mobile-menu li > a { padding-left: 20px; padding-right: 20px; } .mobile-menu-primary, .mobile-menu-secondary { margin-left: 20px; margin-right: 20px; } } @media (min-width: 641px) and (max-width: 991px) { .mobile-menu li > a { padding-left: 24px; padding-right: 24px; } .mobile-menu-primary, .mobile-menu-secondary { margin-left: 24px; margin-right: 24px; } } /* CSS hamburger icon (three bars, morphs to X) */ .hamburger, .hamburger::before, .hamburger::after { display: block; width: 18px; height: 2px; background-color: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .hamburger { position: relative; } .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; } .hamburger::before { top: -6px; } .hamburger::after { top: 6px; } [aria-expanded="true"] .hamburger { background-color: transparent; } [aria-expanded="true"] .hamburger::before { transform: translateY(6px) rotate(45deg); } [aria-expanded="true"] .hamburger::after { transform: translateY(-6px) rotate(-45deg); } .hero { padding: 90px 80px 16px; display: flex; flex-direction: column; align-items: center; } .hero__eyebrow { display: inline-block; padding: 7px 14px; background-color: #ffffff; border: 1px solid var(--color-border-soft); border-radius: 100px; font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 13px; letter-spacing: 0.06em; color: var(--color-primary); } .dark .hero__eyebrow { background-color: #0e0d12; } .hero__title { max-width: 920px; font-family: var(--font-display); font-weight: 600; /* Fluid 34px → 66px; caps at 66px on desktop (1440px) */ font-size: clamp(34px, 4.5vw, 66px); line-height: 104%; color: var(--color-foreground); text-align: center; } .dark .hero__title { color: #edebf2; } /* Shared large body text: Hero description + The Case text share font-family/size/weight (20px Archivo 400). Each keeps its own line-height, color, width, and margins. */ .body-text-lg { font-family: var(--font-sans); font-weight: 400; font-size: 20px; } .hero__description { max-width: 680px; line-height: 150%; color: var(--color-muted); text-align: center; } .dark .hero__description { color: #9e99a6; } .hero__actions { display: flex; gap: 14px; } .hero__button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); border-radius: 8px; text-decoration: none; cursor: pointer; } .hero__button--primary { font-weight: 600; font-size: 16px; padding: 15px 26px; } .hero__button--secondary { font-weight: 600; font-size: 16px; padding: 15px 26px; background-color: #ffffff; border: 1px solid var(--color-border-faint); color: var(--color-foreground); } .dark .hero__button--secondary { color: #edebf2; } .hero__product { display: block; width: 100%; max-width: 1040px; height: auto; } @media (max-width: 1024px) { .hero { padding: 72px 40px 16px; } } @media (max-width: 640px) { .hero { padding: 56px 20px 14px; } .hero__actions { flex-direction: column; width: 100%; } .hero__button { width: 100%; } .hero__description { width: 100%; } } .trust-band { width: 100%; height: 100px; padding: 26px 0; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: var(--color-surface); } .dark .trust-band { background-color: #0e0d12; } .trust-band__text { width: 100%; margin: 0; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; line-height: 14px; text-align: center; color: var(--color-muted); } .dark .trust-band__text { color: #9e99a6; } @media (max-width: 1024px) { .trust-band { padding: 26px 40px; } .trust-band__text { line-height: 1.6; } } @media (max-width: 640px) { .trust-band { height: auto; padding: 24px 20px; } } .the-case { width: 100%; padding: 96px 80px; display: flex; flex-direction: column; align-items: center; background-color: var(--color-surface-tint-1); } .the-case__eyebrow { color: var(--color-primary); line-height: 14px; text-align: center; } .the-case__title { width: 100%; color: var(--color-foreground); } .the-case__text { width: 100%; max-width: 760px; margin: 0; line-height: 1.6; text-align: center; } .the-case__text--muted { color: var(--color-muted-3); } .the-case__text--strong { font-weight: 600; color: var(--color-foreground); } /* Tablet: reduce section padding, keep content centered */ @media (max-width: 1024px) { .the-case { padding: 80px 48px; } } /* Mobile: ~20px horizontal padding, reduced vertical padding, fluid heading scale, natural section height */ @media (max-width: 640px) { .the-case { padding: 56px 20px; } .the-case__title { font-size: 34px; line-height: 1.1; } } .dark .the-case { display: none; } .features { width: 100%; padding: 96px 80px; display: flex; flex-direction: column; align-items: center; background-color: var(--color-surface-tint-2); } .dark .features { background-color: var(--color-dark-section-bg); } .features__header { display: flex; flex-direction: column; align-items: center; } .features__eyebrow { color: var(--color-primary); line-height: 14px; text-align: center; } .features__title { color: var(--color-foreground); } .dark .features__title { color: var(--color-dark-heading); } .features__description { max-width: 660px; color: var(--color-muted); } .dark .features__description { color: var(--color-dark-muted-3); } .dark .how-it-works__title, .dark .comparison__title, .dark .pricing__title { color: var(--color-dark-heading); } .dark .how-it-works__description, .dark .comparison__description, .dark .pricing__description { color: var(--color-dark-muted-3); } .features__grid { width: 100%; max-width: 1280px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .features__grid--dark { display: none; } .dark .features__grid--light { display: none; } .dark .features__grid--dark { display: grid; } .features__card { background-color: var(--color-background); border: 1px solid var(--color-border-subtle); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .dark .features__card { background-color: var(--color-dark-section-bg); border-color: #33303b; } .features__icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; } .features__icon--red { background-color: #faeded; } .dark .features__icon--red { background-color: #331a1c; } .features__icon--blue { background-color: #ebedf7; } .dark .features__icon--blue { background-color: #1c1f30; } .features__icon-inner { width: 20px; height: 20px; border-radius: 6px; background-color: var(--color-primary); } .features__icon--blue .features__icon-inner { background-color: #2c3566; } /* Shared card/step title (Features card title + How it works step title are typographically identical: Archivo 600 / 19px / 21px). */ .card-title { font-family: var(--font-sans); font-weight: 600; font-size: 19px; line-height: 21px; margin: 0; } .features__card-title { color: var(--color-foreground); } .dark .features__card-title { color: var(--color-dark-heading); } /* Shared card body text (Features card description + How it works step text are typographically identical). Section/card classes keep layout + dark color. */ .card-description { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.5; margin: 0; } .features__card-description { color: var(--color-muted); } .dark .features__card-description { color: var(--color-dark-muted-3); } @media (max-width: 1024px) { .features { padding: 80px 48px; } .features__grid--light, .features__grid--dark { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .features { padding: 56px 20px; } .features__grid--light, .features__grid--dark { grid-template-columns: 1fr; } } .how-it-works { width: 100%; padding: 96px 80px; display: flex; flex-direction: column; align-items: center; background-color: var(--color-background); } .dark .how-it-works { background-color: var(--color-dark-section-bg); } .how-it-works__header { display: flex; flex-direction: column; align-items: center; width: 620px; max-width: 100%; } .how-it-works__eyebrow { color: var(--color-primary); } .how-it-works__title { color: var(--color-foreground); } .how-it-works__description { color: var(--color-muted); } .how-it-works__steps { width: 100%; max-width: 1280px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .how-it-works__steps--light { grid-template-columns: repeat(3, 1fr); } .how-it-works__steps--dark { display: none; grid-template-columns: repeat(4, 1fr); align-items: start; } .dark .how-it-works__steps--light { display: none; } .dark .how-it-works__steps--dark { display: grid; } .dark .how-it-works__step { gap: 14px; } .dark .how-it-works__number { flex: 0 0 44px; margin-bottom: 0; font-family: var(--font-display); font-size: 20px; line-height: 25px; } .how-it-works__step { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .how-it-works__number { width: 44px; height: 44px; border-radius: 100px; background-color: var(--color-primary); color: #ffffff; font-family: var(--font-sans); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .how-it-works__step-title { color: var(--color-foreground); margin: 0 0 12px; } .dark .how-it-works__step-title { color: var(--color-dark-heading); } .how-it-works__step-text { color: var(--color-muted); } .dark .how-it-works__step-text { color: var(--color-dark-muted-3); } @media (max-width: 1024px) { .how-it-works { padding: 80px 48px; } .how-it-works__steps--light { grid-template-columns: repeat(2, 1fr); } .how-it-works__steps--dark { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .how-it-works { padding: 56px 20px; } .how-it-works__steps--light, .how-it-works__steps--dark { grid-template-columns: 1fr; gap: 32px; } } .dashboard-showcase { width: 100%; padding: 96px 80px 18px; display: flex; flex-direction: column; align-items: center; background-color: #17141c; } .dashboard-showcase__header { display: flex; flex-direction: column; align-items: center; gap: 14px; } .dashboard-showcase__eyebrow { color: #f28c80; } .dashboard-showcase__title { color: #ffffff; } .dashboard-showcase__description { max-width: 680px; color: #b8b5bf; } .dashboard-showcase__media { width: 100%; max-width: 1120px; margin-top: 50px; } .dashboard-showcase__image { width: 100%; height: auto; display: block; } @media (max-width: 1024px) { .dashboard-showcase { padding: 80px 48px 16px; } .dashboard-showcase__media { margin-top: 44px; } } @media (max-width: 640px) { .dashboard-showcase { padding: 56px 20px 12px; } .dashboard-showcase__media { margin-top: 36px; } } .comparison { width: 100%; padding: 96px 80px; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; } /* Entire Comparison section is hidden in Dark mode (no Dark variant exists). */ .dark .comparison { display: none; } .comparison__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .comparison__eyebrow { color: var(--color-primary); line-height: 14px; text-align: center; } .comparison__title { color: var(--color-foreground); } .comparison__description { width: 100%; max-width: 680px; margin: 0; color: var(--color-muted-2); } /* Table wrapper: single outer border + radius; no horizontal scroll on desktop */ .comparison__table-wrapper { width: 100%; max-width: 1280px; margin-top: 48px; border: 1px solid #e5e3e8; border-radius: 16px; overflow: hidden; } .comparison__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 0; font-family: var(--font-sans); } .comparison__table th, .comparison__table td, .comparison__table tr { border: 0; } /* Column headers (Archivo 600 / 13px / 135%) */ .comparison__feature-head { background-color: var(--color-background); width: 31.5%; } .comparison__col-header { background-color: var(--color-background); width: 22.83%; padding: 15px 14px 15px 18px; text-align: left; font-weight: 600; font-size: 13px; line-height: 135%; color: var(--color-muted-2); } .comparison__keytabs-header { background-color: #218c52; width: 22.83%; padding: 15px 14px 15px 18px; text-align: left; font-weight: 600; font-size: 13px; line-height: 135%; color: var(--color-background); } /* Body cells (Archivo / 14.5px / 135%) */ .comparison__feature { background-color: inherit; width: 31.5%; padding: 15px 14px 15px 18px; text-align: left; font-weight: 600; font-size: 14.5px; line-height: 135%; color: var(--color-foreground); vertical-align: middle; } .comparison__cell { background-color: inherit; width: 22.83%; padding: 15px 14px 15px 18px; text-align: left; font-weight: 400; font-size: 14.5px; line-height: 135%; color: var(--color-muted-2); vertical-align: middle; min-width: 160px; } .comparison__keytabs { background-color: #e8f6ed; width: 22.83%; padding: 15px 14px 15px 18px; text-align: left; font-weight: 600; font-size: 14.5px; line-height: 135%; color: #178047; vertical-align: middle; min-width: 200px; } /* Exception: final keyTABS value uses foreground color, not green */ .comparison__keytabs--muted { color: var(--color-foreground); } /* Alternating row backgrounds (Feature + cell columns only; keyTABS column stays #E8F6ED) */ .comparison__row:nth-child(odd) .comparison__feature, .comparison__row:nth-child(odd) .comparison__cell { background-color: var(--color-background); } .comparison__row:nth-child(even) .comparison__feature, .comparison__row:nth-child(even) .comparison__cell { background-color: #fbfafb; } @media (max-width: 1024px) { .comparison { padding: 80px 48px; } .comparison__table-wrapper { margin-top: 44px; } .comparison__feature-head { padding: 12px 10px 12px 14px; } .comparison__col-header, .comparison__keytabs-header { padding: 12px 10px 12px 14px; } .comparison__feature, .comparison__cell, .comparison__keytabs { padding: 12px 10px 12px 14px; } } @media (max-width: 640px) { .comparison { padding: 56px 20px; } .comparison__table-wrapper { margin-top: 36px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .comparison__table { min-width: 760px; } } .pricing { width: 100%; padding: 96px 80px; display: flex; flex-direction: column; align-items: center; background-color: var(--color-background); } .pricing__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .pricing__title { width: 100%; color: var(--color-foreground); } .pricing__description { max-width: 640px; color: var(--color-muted); } .pricing__cards { width: 100%; max-width: 1280px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 52px; } .pricing__card { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; padding: 32px; background-color: var(--color-background); border: 1px solid var(--color-border); border-radius: 16px; } .pricing__card--featured { border: 2px solid var(--color-primary); box-shadow: 0 16px 40px rgba(168, 31, 46, 0.12); } .pricing__badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; background-color: var(--color-primary); border-radius: 100px; color: #ffffff; font-family: var(--font-sans); font-weight: 600; font-size: 11px; line-height: 12px; margin-bottom: 16px; } /* Standalone Pricing page: compact pill (Home keeps the stretched badge). The card is a column flex with align-items: stretch, so the badge would otherwise fill the card width. align-self flex-start shrinks it to ~112px. */ .pricing-page .pricing__badge--compact { align-self: flex-start; width: 112px; height: 24px; padding: 6px 12px; } .pricing__plan-name { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 20px; color: var(--color-foreground); margin: 0 0 10px; } .pricing__card--featured .pricing__plan-name { color: var(--color-primary); } .pricing__price { display: flex; align-items: baseline; gap: 4px; } .pricing__price-value { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 54px; color: var(--color-foreground); } .pricing__price-suffix { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 17px; color: var(--color-muted); } .pricing__plan-description { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 145%; color: var(--color-muted); margin: 8px 0 20px; } .pricing__cta { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 42px; padding: 13px 16px; border-radius: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 16px; text-decoration: none; cursor: pointer; } .pricing__cta--starter { background-color: var(--color-background); color: var(--color-foreground); border: 1px solid var(--color-border-faint); } .pricing__divider { width: 100%; height: 1px; background-color: #ebe8ed; margin: 22px 0 18px; } .pricing__features { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none; } .pricing__feature { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 140%; color: #403d45; } .pricing__feature-bullet { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background-color: var(--color-primary); margin-top: 6px; } /* Content differs from Light, so plan groups are switched by theme (same pattern as Features / How It Works). All shared card, typography, grid, and feature-list CSS is reused. */ .pricing__plans--dark { display: none; } .dark .pricing__plans--light { display: none; } .dark .pricing__plans--dark { display: grid; } .dark .pricing { background-color: var(--color-dark-section-bg); } .dark .pricing__card { background-color: var(--color-dark-section-bg); border: 1px solid #33303b; } .dark .pricing__card--featured { border: 2px solid var(--color-primary); box-shadow: 0 16px 40px rgba(168, 31, 46, 0.12); } .dark .pricing__plan-name { color: var(--color-dark-heading); } .dark .pricing__card--featured .pricing__plan-name { color: var(--color-primary); } .dark .pricing__price-value { color: var(--color-dark-heading); } .dark .pricing__price-suffix { color: var(--color-dark-muted-3); } .dark .pricing__plan-description { color: var(--color-dark-muted-3); } .dark .pricing__feature { color: var(--color-dark-heading); } .dark .pricing__divider { background-color: #33303b; } .dark .pricing__cta--starter.btn-white { background-color: var(--color-dark-section-bg); color: var(--color-dark-heading); border: 1px solid #d9d6db; } /* Static list (not an accordion). All Q+A visible. Dark + responsive FAQ handled separately. */ .faq { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 96px 80px; background-color: #fafafb; } .faq__title { width: 100%; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 110%; text-align: center; color: #161419; } .faq__list { width: 100%; max-width: 840px; display: flex; flex-direction: column; padding: 0; margin: 44px 0 0; } .faq__item { width: 100%; padding: 24px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-bottom: 1px solid #e6e3e8; } .faq__question { width: 100%; color: #161419; } .faq__answer { width: 100%; margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 150%; color: #6b6b75; } /* Same HTML/content as Light; only theme colors override. */ .dark .faq { background-color: var(--color-dark-section-bg); } .dark .faq__title, .dark .faq__question { color: var(--color-dark-heading); } .dark .faq__answer { color: var(--color-dark-muted-3); } .dark .faq__item { border-bottom-color: #33303b; } @media (max-width: 1024px) { .faq { padding: 80px 48px; } .faq__list { margin-top: 40px; } .faq__item { padding: 22px 0; } } @media (max-width: 640px) { .faq { padding: 56px 20px; } .faq__title { font-size: 34px; line-height: 110%; } .faq__list { margin-top: 32px; } .faq__item { padding: 20px 0; } .faq__question { font-size: 18px; line-height: 1.3; } .faq__answer { line-height: 1.5; } } .faq--pricing { padding: 40px 80px 96px; background-color: #ffffff; } .faq--pricing .faq__title { font-size: 36px; } .faq--pricing .faq__list { margin-top: 36px; } .dark .faq--pricing { background-color: #0e0d12; } @media (max-width: 1024px) { .faq--pricing { padding: 80px 48px; } .faq--pricing .faq__list { margin-top: 40px; } } @media (max-width: 640px) { .faq--pricing { padding: 56px 20px; } .faq--pricing .faq__title { font-size: 30px; } .faq--pricing .faq__list { margin-top: 32px; } } /* Section bg, heading, description, and white/red button are the same in both themes, so no .dark overrides are needed. */ .final-cta { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 90px 80px; background-color: var(--color-primary); text-align: center; } .final-cta__title { width: 100%; max-width: none; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 50px; line-height: 108%; text-align: center; color: #ffffff; } .final-cta__description { width: 100%; max-width: 640px; margin: 16px 0 0; line-height: 150%; text-align: center; color: #FFEBEB; } .final-cta__button { display: inline-flex; justify-content: center; align-items: center; margin-top: 30px; padding: 16px 30px; min-width: 173px; min-height: 49px; background-color: #ffffff; border-radius: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 17px; color: var(--color-primary); text-decoration: none; cursor: pointer; } .final-cta__button:hover { background-color: #f0f0f0; } @media (max-width: 1024px) { .final-cta { padding: 80px 48px; } } @media (max-width: 640px) { .final-cta { padding: 56px 20px; } .final-cta__title { font-size: 36px; line-height: 1.1; } .final-cta__description { font-size: 18px; line-height: 1.5; margin-top: 16px; } .final-cta__button { margin-top: 28px; } } /* Lives in the components layer so it ships in the build (this file is the only imported stylesheet). Reuses .btn-red for background/hover; only visibility/position animation is declared here. */ .back-to-top { position: fixed; right: 15px; bottom: 15px; width: 38px; height: 38px; padding: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); cursor: pointer; } .back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .back-to-top__icon { width: 18px; height: auto; fill: currentColor; transform: rotate(180deg); pointer-events: none; } @media (max-width: 640px) { .back-to-top { width: 35px; height: 35px; border-radius: 2px; } .back-to-top__icon { width: 16px; } } } @media (max-width: 1024px) { .pricing { padding: 80px 48px; } .pricing__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; } } @media (max-width: 640px) { .pricing { padding: 56px 20px; } .pricing__cards { grid-template-columns: 1fr; margin-top: 36px; } .pricing__card { padding: 24px; } } /* This section is Light-mode only; hidden completely in Dark mode. */ .pricing__compare { width: 100%; padding: 40px 80px 96px; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; } .dark .pricing__compare { display: none; } .pricing__compare-title { font-family: var(--font-sans); font-weight: 600; font-size: 36px; line-height: 110%; color: #161419; text-align: center; margin: 0; } .pricing__compare-table-wrapper { width: 100%; max-width: 1280px; margin-top: 40px; border: 1px solid #e6e3e8; border-radius: 16px; overflow: hidden; } .pricing__compare-table { width: 100%; max-width: 1280px; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 0; font-family: var(--font-sans); } .pricing__compare-table th, .pricing__compare-table td, .pricing__compare-table tr { border: 0; } .pricing__compare-feature-head { width: 440px; background-color: #a81e2d; padding: 0; vertical-align: middle; } .pricing__compare-starter-header { width: 280px; background-color: #a81e2d; padding: 12px 14px; text-align: left; font-weight: 400; font-size: 13.5px; line-height: 135%; color: #ffffff; vertical-align: middle; } .pricing__compare-growth-header { width: 280px; background-color: #218c52; padding: 12px 14px; text-align: left; font-weight: 400; font-size: 13.5px; line-height: 135%; color: #ffffff; vertical-align: middle; } .pricing__compare-enterprise-header { width: 280px; background-color: #a81e2d; padding: 12px 14px; text-align: left; font-weight: 400; font-size: 13.5px; line-height: 135%; color: #ffffff; vertical-align: middle; } .pricing__compare-feature { width: 440px; padding: 12px 14px; text-align: left; font-weight: 400; font-size: 14.5px; line-height: 135%; color: #161419; vertical-align: middle; min-height: 46px; } .pricing__compare-plan { width: 280px; padding: 12px 14px; text-align: left; font-weight: 600; font-size: 14.5px; line-height: 135%; color: #161419; vertical-align: middle; min-height: 46px; } .pricing__compare-growth { background-color: #e8f6ed; } .pricing__compare-yes { font-weight: 600; color: #178047; } .pricing__compare-no { font-weight: 400; color: #b8b5bd; } .pricing__compare-row:nth-child(odd) .pricing__compare-feature, .pricing__compare-row:nth-child(odd) .pricing__compare-starter, .pricing__compare-row:nth-child(odd) .pricing__compare-enterprise { background-color: #ffffff; } .pricing__compare-row:nth-child(even) .pricing__compare-feature, .pricing__compare-row:nth-child(even) .pricing__compare-starter, .pricing__compare-row:nth-child(even) .pricing__compare-enterprise { background-color: #fbfafb; } @media (max-width: 1280px) { .pricing__compare-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 1024px) { .pricing__compare { padding: 80px 48px; } } @media (max-width: 640px) { .pricing__compare { padding: 56px 20px; } .pricing__compare-title { font-size: 30px; } .pricing__compare-table { min-width: 1000px; } } /* Background spans full width; inner content shares the Header container width/alignment via .container-page, with side spacing mirrors .site-header. */ .footer { background: #17141c; padding-top: 64px; padding-bottom: 40px; } .footer__inner { display: flex; flex-direction: column; gap: 40px; padding-inline: 20px; } @media (min-width: 1024px) { .footer__inner { padding-inline: 48px; } } @media (min-width: 1280px) { .footer__inner { padding-inline: 80px; } } .footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .footer__brand { display: flex; flex-direction: column; gap: 14px; } .footer__logo { width: 150px; height: auto; } .footer__tagline { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 15px; color: #a6a3ad; margin: 0; } .footer__nav { display: flex; gap: 64px; flex-wrap: wrap; } .footer__nav-col { display: flex; flex-direction: column; gap: 12px; } .footer__nav-heading { font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #8c8a94; margin: 0; } .footer__nav-col ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .footer__link { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 15px; color: #ccc9d1; text-decoration: none; transition: color var(--default-transition-duration) var(--default-transition-timing-function); } .footer__link:hover { color: #ffffff; } .footer__divider { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.08); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer__copyright { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 14px; color: #8c8a94; margin: 0; } .footer__legal { display: flex; gap: 24px; } .footer__legal-link { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 14px; color: #9996a1; text-decoration: none; transition: color var(--default-transition-duration) var(--default-transition-timing-function); } .footer__legal-link:hover { color: #ffffff; } @media (max-width: 1024px) { .footer { padding-top: 56px; padding-bottom: 36px; } .footer__top { gap: 32px; } .footer__nav { gap: 48px; } } @media (max-width: 640px) { .footer { padding-top: 48px; padding-bottom: 32px; } .footer__top { flex-direction: column; gap: 32px; } .footer__nav { gap: 32px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; } } /* Reusable inner-page hero (About, Contact, etc.). Base flex/layout + eyebrow/title/description shared styling. Per-page differences use --about / --contact modifiers below. */ .inner-hero { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; } /* Eyebrow → Title spacing is 18px, overriding the section's default 20px gap */ .inner-hero__eyebrow { margin-bottom: -2px; color: var(--color-primary); } .inner-hero__title { width: 100%; margin: 0; color: var(--color-foreground); } /* Reuses .page-hero-description for typography; keeps only color/width */ .inner-hero__description { color: var(--color-muted); } /* ---- About page inner hero (preserves existing About appearance) ---- */ .inner-hero--about { padding: 96px 80px 80px; } .inner-hero--about .inner-hero__title { max-width: 900px; } .inner-hero--about .inner-hero__description { max-width: 680px; } /* ---- Contact page inner hero (Light Mode) ---- */ .inner-hero--contact { padding: 90px 80px 60px; } .inner-hero--contact .inner-hero__description { max-width: 640px; } /* ---- Features page inner hero (Light Mode) ---- */ .inner-hero--features { padding: 96px 80px 72px; } .inner-hero--features .inner-hero__title { max-width: 900px; font-size: 56px; } .inner-hero--features .inner-hero__description { max-width: 680px; } /* Tablet: reduce section padding, scale heading (reuse project 1024px bp) */ @media (max-width: 1024px) { .inner-hero--about, .inner-hero--contact, .inner-hero--features { padding-left: 48px; padding-right: 48px; } .inner-hero--about { padding-top: 80px; padding-bottom: 64px; } .inner-hero--contact { padding-top: 80px; padding-bottom: 52px; } .inner-hero--features { padding-top: 80px; padding-bottom: 60px; } .page-hero-title { font-size: 48px; line-height: 108%; } } /* Mobile: ~20px padding, fluid heading down to 320px (reuse project 640px bp) */ @media (max-width: 640px) { .inner-hero--about, .inner-hero--contact, .inner-hero--features { padding-left: 20px; padding-right: 20px; } .inner-hero--about { padding-top: 56px; padding-bottom: 48px; } .inner-hero--contact { padding-top: 56px; padding-bottom: 40px; } .inner-hero--features { padding-top: 56px; padding-bottom: 44px; } .page-hero-title { font-size: 38px; line-height: 1.08; } .page-hero-description { font-size: 18px; } } /* Background handled by shared `.dark .hero-bg` (--gradient-hero-dark). Both About and Contact share the same Dark Mode text colors (verified): eyebrow stays --color-primary; only title + description text colors change. Responsive rules are shared across both themes. */ .dark .inner-hero__title { color: #edebf2; } .dark .inner-hero__description { color: #9e99a6; } /* ---- Contact page body (Light Mode only for now) ---- */ .contact-body { width: 100%; padding: 72px 140px 96px; background-color: #ffffff; } .contact-body__inner { display: flex; flex-direction: row; align-items: flex-start; gap: 56px; max-width: 1160px; margin-inline: auto; } /* Form column (flex-grows to fill remaining width; ~744px at 1440px). */ .contact-form { flex: 1 1 auto; width: 100%; max-width: 744px; display: flex; flex-direction: column; gap: 20px; } .contact-form__group { display: flex; flex-direction: column; gap: 8px; width: 100%; } .contact-form__label { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 15px; color: #161419; } .contact-form__input, .contact-form__textarea { width: 100%; box-sizing: border-box; padding: 14px 16px; background-color: #fafafb; border: 1px solid #dedbe0; border-radius: 8px; font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 16px; color: #161419; } .contact-form__input::placeholder, .contact-form__textarea::placeholder { color: #9e9ca3; opacity: 1; } .contact-form__input { height: 50px; } .contact-form__textarea { height: 140px; min-height: 140px; resize: vertical; line-height: 1.5; } .contact-form__input:focus-visible, .contact-form__textarea:focus-visible { outline: 0; border-color: var(--color-primary); } /* Reuse shared .btn-red for bg/hover/focus; only layout + type sizing here. */ .contact-form__submit { width: 100%; height: 47px; padding: 15px 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 17px; color: #ffffff; cursor: pointer; } .contact-form__submit:hover { background-color: #7a0e1a; border-color: #7a0e1a; } .contact-form__submit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .contact-form__submit:disabled { background-color: #c9c9c9; border-color: #c9c9c9; cursor: not-allowed; } /* Inline validation error message + invalid field state. Uses [aria-invalid="true"] so the class is reusable later when Laravel renders server-side errors (it can set the same attribute). An icon-free bold left border acts as a non-color-only indicator of the error. */ .contact-form__error { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 16px; color: #c01526; } .contact-form__error[hidden] { display: none; } .contact-form__input[aria-invalid="true"], .contact-form__textarea[aria-invalid="true"] { border-color: #c01526; background-color: #fdf3f4; } /* Accessible success feedback (Light Mode). Static frontend only: replaces real Laravel server response later. */ .contact-form__success { margin: 0; padding: 14px 16px; border: 1px solid #cbe8d4; border-radius: 8px; background-color: #ecf8f0; font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.5; color: #137a3f; } .contact-form__success[hidden] { display: none; } /* Right-side information card (fixed 360px column). */ .contact-info { flex: 0 0 360px; width: 360px; box-sizing: border-box; padding: 32px; display: flex; flex-direction: column; gap: 28px; background-color: #fafafb; border: 1px solid #e8e6eb; border-radius: 16px; } .contact-info__item { display: flex; flex-direction: column; gap: 5px; } .contact-info__label { font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 13px; letter-spacing: 0.06em; color: #6b6b75; } .contact-info__value { font-family: var(--font-sans); font-weight: 500; font-size: 17px; line-height: 18px; color: #161419; text-decoration: none; } a.contact-info__value:hover { color: var(--color-primary); } /* Dark Mode: error + success states use lighter tones on dark surfaces. */ .dark .contact-form__input[aria-invalid="true"], .dark .contact-form__textarea[aria-invalid="true"] { background-color: #2a1d20; } .dark .contact-form__success { border-color: #2f6b47; background-color: #16241b; color: #7ee0a0; } /* ---- Contact page body: Dark Mode overrides (layout unchanged) ---- */ .dark .contact-body { background-color: #0e0d12; } .dark .contact-form__label { color: #edebf2; } .dark .contact-form__input, .dark .contact-form__textarea { background-color: #0e0d12; border-color: #33303b; color: #edebf2; } .dark .contact-form__input::placeholder, .dark .contact-form__textarea::placeholder { color: #9e99a6; } .dark .contact-info { background-color: #0e0d12; border-color: #33303b; } .dark .contact-info__label { color: #9e99a6; } .dark .contact-info__value { color: #edebf2; } /* ---- Contact page body: Responsive (shared across Light + Dark) ---- Layout/breakpoints only; no color changes (Dark Mode handles color). Two-column layout fits comfortably down to ~1440px, so stack at the project's tablet breakpoint (1024px). Reuses 1024px + 640px bps. */ .contact-form { min-width: 0; } .contact-info__value { overflow-wrap: anywhere; } @media (max-width: 1280px) { .contact-body { padding: 72px 80px 96px; } } @media (max-width: 1024px) { .contact-body { padding: 72px 48px 80px; } .contact-body__inner { flex-direction: column; gap: 32px; max-width: 744px; } .contact-form { max-width: 100%; } .contact-info { flex: 1 1 auto; width: 100%; } } @media (max-width: 640px) { .contact-body { padding: 56px 20px 64px; } .contact-body__inner { gap: 24px; } .contact-info { padding: 24px; } } .about-story { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 88px 80px; background-color: var(--color-background); } .about-story__title { width: 100%; margin: 0; color: var(--color-foreground); } .about-story__content { width: 100%; max-width: 760px; margin-top: 28px; display: flex; flex-direction: column; gap: 20px; } .about-story__text { width: 100%; margin: 0; color: #4d4a52; } /* Background + text colors only; layout/typography/spacing are shared. */ .dark .about-story { background-color: #0e0d12; } .dark .about-story__title { color: #edebf2; } .dark .about-story__text { color: #edebf2; } @media (max-width: 1024px) { .about-story { padding: 80px 48px; } } @media (max-width: 640px) { .about-story { padding: 56px 20px; } } .about-values { width: 100%; padding: 88px 80px; display: flex; flex-direction: column; align-items: center; background-color: #fafafb; } .about-values__title { color: var(--color-foreground); } .about-values__grid { width: 100%; max-width: 1280px; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .about-values__card { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 24px; background-color: #ffffff; border: 1px solid #e8e6eb; border-radius: 14px; } /* Icon colors match Features; dimensions are Values-specific. */ .about-values__icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .about-values__icon--red { background-color: #faeded; } .about-values__icon--blue { background-color: #ebedf7; } .about-values__icon-inner { width: 19px; height: 19px; border-radius: 6px; } .about-values__icon--red .about-values__icon-inner { background-color: #a81e2d; } .about-values__icon--blue .about-values__icon-inner { background-color: #2c3566; } .about-values__card-title { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 22px; color: #161419; } .about-values__card-description { width: 100%; margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 150%; color: #6b6b75; } /* Theme colors only; layout/typography/icon dimensions are shared. Inner icon colors are identical in both themes (base CSS). */ .dark .about-values { background-color: #0e0d12; } .dark .about-values__title { color: #edebf2; } .dark .about-values__card { background-color: #0e0d12; border-color: #33303b; } .dark .about-values__icon--red { background-color: #331a1c; } .dark .about-values__icon--blue { background-color: #1c1f30; } .dark .about-values__card-title { color: #edebf2; } .dark .about-values__card-description { color: #9e99a6; } /* Reuses project 1024px/640px breakpoints and section padding conventions. */ @media (max-width: 1024px) { .about-values { padding: 80px 48px; } .about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; } } @media (max-width: 640px) { .about-values { padding: 56px 20px; } .about-values__grid { grid-template-columns: 1fr; margin-top: 28px; } } /* Product Tour section Each .product-tour__row is the outer full-width element and controls its own background. The 1440px container lives INSIDE every row, with 80px side padding (=> 1280px usable content: 540 + 72 + 668). Per-row accent + icon background stay on the row via CSS variables. */ .product-tour { width: 100%; background-color: #ffffff; } .product-tour__row { /* Red accent (default): Dashboard, Analytics, Orders, Customers, Customer Detail */ --product-tour-accent: #a81e2d; --product-tour-icon-bg: #faeded; width: 100%; background-color: #ffffff; box-sizing: border-box; } /* Blue accent: Library (4), Reader Library (7), Cloud Reader (8) */ .product-tour__row--reader { --product-tour-accent: #2c3566; --product-tour-icon-bg: #ebedf7; } /* Alternating full-width row backgrounds (White / #FAFAFB) to match Figma. */ .product-tour__row:nth-child(even) { background-color: #fafafb; } /* Dark mode: Product Tour only. Light mode untouched. */ .dark .product-tour__row { --product-tour-accent: #a81e2d; --product-tour-icon-bg: #331a1c; background-color: #0e0d12; } .dark .product-tour__row--reader { --product-tour-accent: #2c3566; --product-tour-icon-bg: #1c1f30; } .dark .product-tour__title { color: #edebf2; } .dark .product-tour__description { color: #9e99a6; } .dark .product-tour__feature { color: #edebf2; } .product-tour__container { width: 100%; max-width: 1440px; margin-inline: auto; padding: 56px 80px; box-sizing: border-box; display: flex; align-items: center; gap: 32px; } /* Image-right rows (1,3,5,7): reduce RIGHT padding 80→48 so the image block extends 32px farther right; content left padding stays 80px. */ .product-tour__row:not(.product-tour__row--reverse) .product-tour__container { padding-left: 80px; padding-right: 48px; } /* Image-left rows (2,4,6,8): reduce LEFT padding 80→48 so the image block extends 32px farther left; content right padding stays 80px. */ .product-tour__row--reverse .product-tour__container { padding-left: 48px; padding-right: 80px; } .product-tour__row--reverse .product-tour__container { flex-direction: row-reverse; } .product-tour__content { width: 540px; max-width: 540px; flex: 0 0 540px; display: flex; flex-direction: column; } .product-tour__icon { width: 48px; height: 48px; border-radius: 12px; background-color: var(--product-tour-icon-bg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; } .product-tour__icon-image { width: 24px; height: 24px; } .product-tour__eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 14px; letter-spacing: 0.08em; color: var(--product-tour-accent); margin-bottom: 14px; } .product-tour__title { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 112%; color: #161419; margin: 0 0 16px; } .product-tour__description { font-family: var(--font-sans); font-weight: 400; font-size: 17px; line-height: 162%; color: #6b6b75; margin: 0 0 20px; } .product-tour__features { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; } .product-tour__feature { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 16px; color: #333038; } .product-tour__feature-bullet { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background-color: var(--product-tour-accent); } .product-tour__media { flex: 1 1 0; min-width: 0; box-sizing: border-box; } .product-tour__image { width: 100%; height: auto; display: block; border-radius: 12px; } /* Theme-aware Product Tour screenshots: only one variant shows at a time, so no layout shift. Follows the active .dark class (not prefers-color-scheme). */ .product-tour__image--dark { display: none; } .dark .product-tour__image--light { display: none; } .dark .product-tour__image--dark { display: block; } /* ============================================================ Product Tour — Responsive Uses project breakpoints: 1280px / 1024px / 640px ============================================================ */ /* Laptop / smaller desktop: fluid two-column, equal padding */ @media (max-width: 1280px) { .product-tour__row:not(.product-tour__row--reverse) .product-tour__container, .product-tour__row--reverse .product-tour__container { padding: 48px; gap: 24px; } .product-tour__row .product-tour__content { flex: 0 1 400px; width: auto; max-width: 100%; } .product-tour__row .product-tour__media { flex: 1 1 0; } } /* Tablet portrait and below: stacked single-column, content first */ @media (max-width: 1024px) { .product-tour__row:not(.product-tour__row--reverse) .product-tour__container, .product-tour__row--reverse .product-tour__container { flex-direction: column; padding: 48px 20px; gap: 32px; } .product-tour__row .product-tour__content { flex: 0 0 auto; width: 100%; max-width: none; } .product-tour__row .product-tour__media { flex: 0 0 auto; width: 100%; } .product-tour__title { font-size: 30px; } } /* Mobile: compact stacked layout */ @media (max-width: 640px) { .product-tour__row:not(.product-tour__row--reverse) .product-tour__container, .product-tour__row--reverse .product-tour__container { padding: 48px 20px; gap: 24px; } .product-tour__title { font-size: 26px; } .product-tour__description { font-size: 16px; } } /* ============================================================ Plugins & Integrations section ============================================================ */ .plugins { width: 100%; padding: 88px 80px; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; } .dark .plugins { background-color: #0e0d12; } .plugins__header { display: flex; flex-direction: column; align-items: center; } .plugins__eyebrow { color: var(--color-primary); line-height: 14px; text-align: center; margin-bottom: 12px; } .plugins__title { color: var(--color-foreground); margin-bottom: 14px; } .dark .plugins__title { color: var(--color-dark-heading); } .plugins__description { max-width: 640px; color: var(--color-muted); } .dark .plugins__description { color: var(--color-dark-muted-3); } .plugins__image { display: block; width: 100%; max-width: 602px; height: auto; margin-inline: auto; margin-top: 44px; } @media (max-width: 1024px) { .plugins { padding: 80px 48px; } } @media (max-width: 640px) { .plugins { padding: 56px 20px; } .plugins__image { margin-top: 36px; } } /* ============================================================ Sign Up / Auth Page ============================================================ */ .auth-page { display: flex; min-height: 100vh; } .auth-brand { width: 600px; flex-shrink: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 64px; box-sizing: border-box; background: linear-gradient(126.87deg, #931120 0%, #860816 71.43%); } .auth-brand__logo { width: 170px; height: auto; display: block; flex-shrink: 0; } .auth-brand__content { width: 100%; max-width: 472px; display: flex; flex-direction: column; } .auth-brand__title { width: 100%; max-width: 472px; font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 108%; color: #ffffff; margin: 0 0 20px; } .auth-brand__description { width: 100%; max-width: 472px; font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 155%; color: #dbd4d9; margin: 0 0 28px; } .auth-brand__benefits { width: 100%; max-width: 472px; display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; } .auth-brand__benefits li { display: flex; align-items: center; gap: 12px; padding-block: 7px; } .auth-brand__bullet { width: 7px; height: 7px; border-radius: 50%; background: #f28073; flex-shrink: 0; } .auth-brand__benefits li span:last-child { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 16px; color: #ede8ed; } .auth-form-side .auth-card .auth-form{ width: 100%; } .auth-form-side { flex: 1; min-width: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #ffffff; padding: 0; box-sizing: border-box; } .auth-card { width: 100%; max-width: 410px; display: flex; flex-direction: column; align-items: flex-start; padding: 0; } .auth-tabs { width: 100%; height: 41px; padding: 4px; display: flex; align-items: flex-start; background: #f5f5f7; border-radius: 10px; box-sizing: border-box; } .auth-tab { flex: 1; height: 33px; display: flex; justify-content: center; align-items: center; padding: 9px 0; border-radius: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 15px; text-decoration: none; color: #6b6b75; background: transparent; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .auth-tab--active { background: #ffffff; color: #161419; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .auth-tab:hover { color: #161419; } .auth-form { margin: 0; } .auth-form__title { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 110%; color: #161419; margin: 26px 0 8px; } .auth-form__description { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 16px; color: #6b6b75; margin: 0 0 22px; } .auth-form__fields { width: 100%; display: flex; flex-direction: column; gap: 14px; margin: 0; } .auth-field { width: 100%; display: flex; flex-direction: column; gap: 7px; position: relative; } .auth-field__label { font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; line-height: 15px; color: #161419; } .auth-field__input, .auth-field__select { width: 100%; height: 46px; padding-inline: 14px; background: #fafafb; border: 1px solid #dedbe0; border-radius: 8px; box-sizing: border-box; font-family: var(--font-sans); font-weight: 400; font-size: 15px; color: #161419; appearance: none; -webkit-appearance: none; } .auth-field__input::placeholder, .auth-field__select::placeholder { color: #9e9ca3; } .auth-field__select { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B6B75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .auth-field__input:focus-visible, .auth-field__select:focus-visible { outline: 0px solid var(--color-primary); outline-offset: 0px; border-color: var(--color-primary); } .auth-field__input[aria-invalid="true"], .auth-field__select[aria-invalid="true"] { border-color: #c01526; background-color: #fdf3f4; } .auth-field__error { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 16px; color: #c01526; } .auth-field__error[hidden] { display: none; } .auth-form__submit { width: 100%; height: 45px; display: inline-flex; justify-content: center; align-items: center; padding: 14px 0; border: 0; border-radius: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 17px; color: #ffffff; cursor: pointer; margin: 14px 0; } .auth-form__submit:hover { background-color: #7a0e1a; border-color: #7a0e1a; } .auth-form__submit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .auth-form__submit:disabled { background-color: #c9c9c9; border-color: #c9c9c9; cursor: not-allowed; } .auth-form__divider { width: 100%; height: 14px; display: flex; align-items: center; gap: 12px; margin: 14px 0; } .auth-form__divider-line { height: 1px; flex: 1; background: #e6e3e8; } .auth-form__divider-text { font-family: var(--font-sans); font-size: 13px; line-height: 14px; color: #6b6b75; } .auth-form__google, .auth-form__email-link { width: 100%; height: 42px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 0; background: #ffffff; border: 1px solid #d9d6db; border-radius: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: #161419; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; margin: 0; } .auth-form__google { margin-bottom: 10px; } .auth-form__email-link { margin-bottom: 20px; } .auth-form__google:hover, .auth-form__email-link:hover { background-color: #f5f5f7; } .auth-form__google:focus-visible, .auth-form__email-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .auth-form__google-icon { width: 18px; height: 18px; flex-shrink: 0; } .auth-form__email-icon { width: 18px; height: 18px; flex-shrink: 0; } .auth-form__bottom { text-align: center; font-family: var(--font-sans); font-weight: 400; font-size: 14px; color: #6b6b75; margin: 0; } .auth-form__bottom + .auth-form__bottom { margin-top: 6px; } .auth-form__bottom-link { font-weight: 600; color: #a81e2d; text-decoration: none; } .auth-form__bottom-link:hover { text-decoration: underline; } .auth-form__bottom-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Accessible success feedback (Light Mode). Static frontend only: replaces real Laravel server response later. */ .auth-form__success { margin: 0; padding: 14px 16px; border: 1px solid #cbe8d4; border-radius: 8px; background-color: #ecf8f0; font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.5; color: #137a3f; } .auth-form__success[hidden] { display: none; } /* ============================================================ Dark mode overrides — Sign Up right-side form ============================================================ */ .dark .auth-form-side { background: #141318; } .dark .auth-tabs { background: #141318; } .dark .auth-tab { color: #9e99a6; } .dark .auth-tab--active { color: #edebf2; background: #242129; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .dark .auth-tab:hover { color: #edebf2; } .dark .auth-form__title { color: #edebf2; } .dark .auth-form__description { color: #9e99a6; } .dark .auth-field__label { color: #edebf2; } .dark .auth-field__input, .dark .auth-field__select { background: #141318; border-color: #3d3b45; color: #edebf2; } .dark .auth-field__input::placeholder, .dark .auth-field__select::placeholder { color: #9e99a6; } .dark .auth-field__input[aria-invalid="true"], .dark .auth-field__select[aria-invalid="true"] { border-color: #c01526; background-color: #2a1d20; } .dark .auth-field__error { color: #c01526; } .dark .auth-form__divider-line { background: #3d3b45; } .dark .auth-form__divider-text { color: #9e99a6; } .dark .auth-form__google, .dark .auth-form__email-link { background: #141318; border-color: #d9d6db; color: #edebf2; } .dark .auth-form__google:hover, .dark .auth-form__email-link:hover { background-color: #242129; } .dark .auth-form__bottom { color: #9e99a6; } .dark .auth-form__bottom-link { color: #a81e2d; } .dark .auth-form__success { border-color: #2f6b47; background-color: #16241b; color: #7ee0a0; } /* --- Dark mode Tom Select --- */ .dark .auth-field .ts-wrapper.single .ts-control { background: #141318; border-color: #3d3b45; color: #edebf2; } .dark .auth-field .ts-wrapper.single .ts-control input[type="text"], .dark .auth-field .ts-wrapper.single .ts-control .items-placeholder { color: #edebf2; } .dark .auth-field .ts-wrapper.single .ts-control input::placeholder, .dark .auth-field .ts-wrapper.single .ts-control .items-placeholder::placeholder { color: #9e99a6; } .dark .auth-field .ts-control::placeholder { color: #9e99a6; } .dark .auth-field .ts-wrapper.single .ts-control .placeholder { color: #9e99a6; } .dark .auth-field .ts-wrapper.single .ts-control::after { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239E99A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .dark .auth-field .ts-wrapper.input-active .ts-control, .dark .auth-field .ts-wrapper.dropdown-active .ts-control { border: 1px solid #a81e2d; } .dark .auth-field .ts-wrapper.is-invalid .ts-control { border: 1px solid #c01526; background-color: #2a1d20; } .dark .auth-field .ts-dropdown { background: #141318; border-color: #3d3b45; box-shadow: 0px 16px 40px rgba(26, 13, 20, 0.14); } .dark .auth-field .dropdown-input-wrap { background: #242129; } .dark .auth-field .dropdown-input-wrap .dropdown-input { color: #edebf2; } .dark .auth-field .dropdown-input-wrap .dropdown-input::placeholder { color: #9e99a6; } .dark .auth-field .ts-optgroup-header { color: #9e99a6; } .dark .auth-field .ts-option { color: #edebf2; } .dark .auth-field .ts-option.active { background-color: #242129; color: #edebf2; } .dark .auth-field .ts-option.selected { background-color: #2a1f21; color: #edebf2; font-weight: 500; } .dark .auth-field .ts-no-results { color: #9e99a6; } .dark .auth-field .ts-item { color: #edebf2; } .dark .auth-field .ts-item-name { color: #edebf2; } /* Tablet and below: stack columns */ @media (max-width: 1024px) { .auth-page { flex-direction: column; min-height: auto; } .auth-brand { width: 100%; min-height: auto; padding: 48px; gap: 32px; justify-content: flex-start; } .auth-brand__content { max-width: 100%; } .auth-form-side { width: 100%; min-height: auto; padding: 48px; } } /* Mobile: single column, 20px edge spacing */ @media (max-width: 640px) { .auth-page { flex-direction: column; } .auth-brand { width: 100%; min-height: auto; padding: 48px 20px 32px; gap: 24px; } .auth-brand__content { max-width: 100%; } .auth-form-side { width: 100%; min-height: auto; padding: 32px 20px 48px; } .auth-card { max-width: 410px; } } @media (max-width: 480px) { .auth-brand { padding: 40px 20px 24px; gap: 20px; } .auth-form-side { padding: 24px 20px 40px; } } /* ============================================================ Tom Select overrides for Country selector ============================================================ */ /* --- Closed control --- */ .auth-field .ts-wrapper { width: 100%; margin: 0; padding-left: 0px; padding-right: 0px; border: 0; } .auth-field .ts-wrapper.single .ts-control { width: 100%; min-height: 46px; height: 46px; padding: 13px 14px; background: #ffffff; border: 1px solid #dedbe0; border-radius: 8px; box-shadow: none; font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 17px; color: #161419; display: flex; align-items: center; gap: 8px; cursor: pointer; box-sizing: border-box; background: #fafafb; } .auth-field .ts-wrapper.single .ts-control input[type="text"], .auth-field .ts-wrapper.single .ts-control .items-placeholder { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 16px; color: #161419; height: auto; padding: 0; margin: 0; } .auth-field .ts-wrapper.single .ts-control input::placeholder, .auth-field .ts-wrapper.single .ts-control .items-placeholder::placeholder { color: #9e9ca3; } .auth-field .ts-control::placeholder { color: #9e9ca3; } .auth-field .ts-wrapper.single .ts-control .placeholder { color: #9e9ca3; } .auth-field .ts-wrapper.single .ts-control .item { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; font-size: 15px; line-height: 17px; } .auth-field .ts-wrapper.single .ts-control .item-flag { width: 20px; height: 15px; flex-shrink: 0; background-size: cover; border-radius: 2px; } .auth-field .ts-wrapper.single .ts-control .item-name { font-size: 15px; line-height: 17px; } /* Custom dropdown arrow */ .auth-field .ts-wrapper.single .ts-control::after { content: ''; position: absolute; top: 50%; right: 14px; width: 10px; height: 6px; margin-top: -3px; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2380808A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; border: 0; } /* Remove default Tom Select caret/arrow */ .auth-field .ts-control > .ts-control:after { display: none; } /* Focus / open state */ .auth-field .ts-wrapper.input-active .ts-control, .auth-field .ts-wrapper.dropdown-active .ts-control { border: 1px solid #a81e2d; box-shadow: none; } .auth-field .ts-wrapper.single .ts-control:focus { outline: none; } .auth-field .ts-wrapper.single .ts-control:focus-visible { outline: 0px solid var(--color-primary); outline-offset: 0px; } /* Invalid state */ .auth-field .ts-wrapper.is-invalid .ts-control{ border-color: #c01526; background-color: #fdf3f4; } /* --- Dropdown --- */ .auth-field .ts-dropdown { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background: #ffffff; border: 1px solid #e0dee3; border-radius: 12px; box-shadow: 0px 16px 40px rgba(26, 13, 20, 0.14); z-index: 50; margin: 0; padding: 8px; box-sizing: border-box; overflow: hidden; } .auth-field .ts-dropdown-content { max-height: 280px; overflow-y: auto; overflow-x: hidden; padding: 0; position: relative; scrollbar-width: thin; } .auth-field .ts-dropdown-content::-webkit-scrollbar { width: 5px; height: 0; } .auth-field .ts-dropdown-content::-webkit-scrollbar-track { background: transparent; } .auth-field .ts-dropdown-content::-webkit-scrollbar-thumb { background: #c0bdc5; border-radius: 100px; } .dark .auth-field .ts-dropdown-content::-webkit-scrollbar-track { background: #141318; } .dark .auth-field .ts-dropdown-content { scrollbar-color: #3d3b45 #141318; } .dark .auth-field .ts-dropdown-content::-webkit-scrollbar-thumb { background: #3d3b45; } .auth-field .ts-dropdown-content::-webkit-scrollbar-thumb:hover { background: #a8a3ad; } .dark .auth-field .ts-dropdown-content::-webkit-scrollbar-thumb:hover { background: #5d5a64; } /* --- Search field --- */ .auth-field .dropdown-input-wrap { display: flex; flex-direction: row; align-items: center; padding: 11px 12px; gap: 8px; width: 100%; height: 38px; box-sizing: border-box; background: #f5f5f7; border: 0; border-radius: 8px; outline: 0; box-shadow: none; margin-bottom: 4px; } .auth-field .ts-search-icon { width: 14px; height: 14px; flex: 0 0 14px; flex-shrink: 0; object-fit: contain; } .auth-field .dropdown-input-wrap .dropdown-input { flex: 1; width: 100%; min-width: 0; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; font-family: 'Archivo'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 16px; color: #161419; } .auth-field .dropdown-input-wrap .dropdown-input::placeholder { color: #9999a3; } /* --- Region headers --- */ .auth-field .ts-optgroup-header { padding: 14px 12px 6px; font-family: var(--font-sans); font-weight: 600; font-size: 11px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #8c8a94; cursor: default; background: transparent; border: 0; } /* --- Country options --- */ .auth-field .ts-option { padding: 9px 12px; min-height: 34px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 16px; color: #2e2b33; border-radius: 6px; background: transparent; border: 0; } .auth-field .ts-option .ts-option-flag { width: 20px; height: 15px; flex-shrink: 0; background-size: cover; border-radius: 2px; } .auth-field .ts-option .ts-option-name { font-size: 15px; line-height: 16px; flex: 1; } .auth-field .ts-option.active { background-color: #f5f5f7; color: #161419; } .auth-field .ts-option.selected { background-color: #fdf3f4; color: #161419; font-weight: 500; } .auth-field .ts-option.selected::after { content: ''; width: 16px; height: 16px; margin-left: auto; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L6.5 11.5L13 4.5' stroke='%23A81E2D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; } .auth-field .ts-no-results { padding: 16px 12px; font-family: var(--font-sans); font-size: 14px; line-height: 16px; color: #6b6b75; text-align: center; } /* --- Selected item in closed control --- */ .auth-field .ts-item { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; font-size: 16px; line-height: 17px; } .auth-field .ts-item-flag { width: 20px; height: 15px; flex-shrink: 0; background-size: cover; border-radius: 2px; } .auth-field .ts-item-name { font-size: 15px; line-height: 17px; } /* --- Responsive --- */ @media (max-width: 640px) { .auth-field .ts-dropdown { max-height: 280px; } }