:root {
/* Core palette (keep for backwards compatibility) */
--color-primary: #2c474c;
--color-secondary: #1a4d6d;
--color-accent: #548992;
--color-earth: #8b7355;
--color-light: white;
--color-dark: #1a1a1a;
--color-overlay: rgba(26, 45, 38, 0.7);
/* Theme tokens (use these throughout styles) */
--bg: var(--color-light);
--surface: #ffffff;
--card-bg: #ffffff;
--text: var(--color-dark);
--muted: rgba(0,0,0,0.6);
--primary: var(--color-primary);
--secondary: var(--color-secondary);
--accent: var(--color-accent);
--overlay: var(--color-overlay);
--color-dirty-gold: #928d6b;
--color-steel: #647481;
--color-steel-light: #7d8e9b;
--success: rgba(74, 143, 103, 0.95);
--error: rgba(220, 70, 70, 0.95);
}
/* Dark theme override: set on */
html[data-theme="dark"] {
--bg: #0f1720;
--surface: #0b1220;
--card-bg: #07101a;
--text: #e6eef0;
--muted: rgba(230,238,240,0.7);
--primary: #66b28f;
--secondary: #2b6a87;
--accent: #8fd3b0;
--overlay: rgba(10, 20, 25, 0.6);
--success: rgba(102,178,143,0.95);
--error: rgba(220,70,70,0.95);
}
/* Steel accent color used for secondary links */
a { color: var(--color-steel); text-decoration: underline; }
a:visited { color: var(--color-steel-light); }
a:hover, a:focus { color: var(--color-steel-light); outline: none; }
/* Secondary button variant */
.secondary-button {
padding: 1.05rem 2rem;
font-size: 0.98rem;
font-weight: 700;
color: #fff;
background: var(--color-steel);
border: none;
border-radius: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.secondary-button:hover { background: var(--color-steel-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.16); }
html[data-theme="dark"] .secondary-button { background: color-mix(in srgb, var(--color-steel) 60%, #ffffff 40%); }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Remove default top margin on lists site-wide (overridden by more specific rules if needed) */
ul { margin-top: 0; }
html {
scroll-behavior: smooth;
background: var(--bg);
color: var(--text);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
background: transparent;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Site header with compact logo spacing */
.site-header {
background: transparent;
color: var(--text);
padding: 1.3rem 0;
}
.site-header .logo {
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 2.2rem;
}
.site-header .container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo-link { display: inline-block; }
.site-logo {
display: block;
max-height: 24px; /* reduced: keep header compact with less spacing */
width: auto;
margin: 3px 0; /* reduced vertical spacing */
}
@media (max-width: 480px) {
.hero-title { font-size: 1.5rem; }
.site-logo { max-height: 20px; }
.site-header { padding: 0.175rem 0; }
.site-header .logo { justify-content: center; }
}
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Use hero image as background; keep color fallback and allow existing .hero-overlay for tinting */
background-image: url("assets/img/hero_lp.jpeg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: var(--primary);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(74, 143, 103, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(26, 77, 109, 0.15) 0%, transparent 50%);
background-size: cover;
transform: translateZ(0);
will-change: transform;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
opacity: 0.6;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(30px, 30px) scale(1.1);
}
}
.hero-content {
position: relative;
z-index: 10;
text-align: center;
color: var(--color-light, #fff);
padding: 2rem;
animation: fadeInUp 1s ease-out;
}
.hero .signup-box {
margin: 2rem auto 0;
max-width: 720px;
width: calc(100% - 3rem);
background: rgba(255,255,255,0.08);
border-radius: 16px;
padding: 1.25rem 1.25rem;
box-shadow: 0 12px 50px rgba(0,0,0,0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-align: center;
color: var(--color-light, #fff);
}
html[data-theme="dark"] .hero .signup-box {
background: rgba(0,0,0,0.35);
}
.hero .signup-box .signup-title {
margin: 0 0 1rem 0;
font-size: 1.2rem;
color: inherit;
}
.hero .signup-box .form-group {
justify-content: center;
}
.hero .signup-box .email-input {
border: 2px solid rgba(255,255,255,0.22);
background: rgba(255,255,255,0.06);
color: #fff;
}
.hero .signup-box {
color: var(--color-light, #fff);
}
.hero-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
letter-spacing: -0.02em;
}
.hero-subtitle {
font-size: 1.2rem;
font-weight: 300;
opacity: 0.95;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.hero-title { font-size: 2rem; }
.text-section {
padding: 1.25rem;
margin: 1.25rem auto;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.hero-title { font-size: 1.5rem; }
.hero .hero-subtitle, .hero .signup-box .signup-title {
font-size: 1rem;
}
}
@keyframes bounce {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-10px);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.business-case {
position: relative;
padding: 1rem 0;
background: #4b5d67;
overflow: hidden;
}
.diagonal-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-primary) 100%);
clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
opacity: 0.08;
transform: translateZ(0);
}
.business-content {
position: relative;
z-index: 5;
max-width: 900px;
margin: 0 auto;
color: var(--color-light);
}
.clip-reveal {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.clip-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Shared text section styling for business-case and about */
.text-section {
font-size: clamp(1rem, 2.0vw, 1.15rem);
line-height: 1.7;
color: var(--color-light);
padding: 1.75rem;
border-radius: 12px;
max-width: 900px;
margin: 3rem auto;
}
.text-section p { margin-top: 1em; margin-bottom: 1em; }
.text-section ul { margin: 0em 0; padding-left: 1.5rem; }
.text-section li { margin-bottom: 0em; line-height: inherit; }
/* remove gap when a paragraph is immediately followed by a list */
.text-section p + ul { margin-top: 0; }
/* Modern browsers: if a is immediately followed by a
, remove paragraph bottom margin */
.text-section p:has(+ ul) { margin-bottom: 0; }
/* keep alignment differences requested */
.business-text { text-align: justify; }
.about .about-content { text-align: left; }
/* About section box: similar visual treatment to .business-text but left-aligned content */
.about .about-content h2 {
margin-top: 1rem;
}
.about .about-content p,
.about .about-content h3 {
color: var(--text);
text-align: left;
}
.features {
padding: 3rem 0;
background: var(--surface);
position: relative;
}
.features::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: linear-gradient(to left, rgba(74, 143, 103, 0.03), transparent);
pointer-events: none;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
position: relative;
z-index: 5;
width: 75%;
justify-self: center;
}
.feature-card {
text-align: center;
align-content: center;
padding: 1rem 2rem;
background: var(--card-bg);
border-radius: 16px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 0;
transform: translateY(30px);
aspect-ratio: 1 / 1;
max-width: 15rem;
justify-self: center;
}
.feature-card.visible {
opacity: 1;
transform: translateY(0);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 45px rgba(45, 95, 63, 0.15);
}
/* Background images for feature cards */
.feature-card.feature-card--sell,
.feature-card.feature-card--test,
.feature-card.feature-card--verify {
background: none;
position: relative;
overflow: hidden;
color: #fff;
}
.feature-card.feature-card--sell::before {
content: "";
position: absolute;
inset: 0;
background-image: url("assets/img/sell.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 0;
transform: translateZ(0);
}
.feature-card.feature-card--test::before {
content: "";
position: absolute;
inset: 0;
background-image: url("assets/img/test.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 0;
transform: translateZ(0);
}
.feature-card.feature-card--verify::before {
content: "";
position: absolute;
inset: 0;
background-image: url("assets/img/verify.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 0;
transform: translateZ(0);
}
/* subtle overlay to improve contrast for titles/icons */
.feature-card.feature-card--sell::after,
.feature-card.feature-card--test::after,
.feature-card.feature-card--verify::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.42) 100%);
z-index: 1;
}
.feature-card.feature-card--sell .feature-icon,
.feature-card.feature-card--sell .feature-title,
.feature-card.feature-card--test .feature-icon,
.feature-card.feature-card--test .feature-title,
.feature-card.feature-card--verify .feature-icon,
.feature-card.feature-card--verify .feature-title {
position: relative;
z-index: 2;
color: #fff;
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
border-radius: 16px;
}
.feature-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--primary);
}
.signup {
position: relative;
padding: 8rem 0;
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
overflow: hidden;
}
.signup-shape {
position: absolute;
top: -10%;
left: -5%;
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
filter: blur(80px);
}
.signup-content {
position: relative;
z-index: 10;
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.signup-title {
font-size: 1.5rem;
color: var(--color-light, #fff);
margin-bottom: 3rem;
font-weight: 600;
line-height: 1.3;
}
.email-form {
width: 100%;
}
.form-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.email-input {
flex: 1;
text-align: center;
min-width: 250px;
padding: 1.2rem 1.5rem;
font-size: 1.1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
background: rgba(255, 255, 255, 0.15);
color: var(--color-light, #fff);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.email-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.email-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.25);
}
/* Consent checkbox row: small, muted, and compact */
.consent-row {
margin-top: 0.6rem;
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.78rem;
color: #fff; /* consent text should be white */
text-align: left;
line-height: 1.2;
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding: 0 0.6rem;
}
.consent-row .consent-text { font-size: 0.68rem; color: inherit; text-align: left; }
.consent-row input[type="checkbox"] {
margin-top: 3px;
}
.consent-row a { color: inherit; text-decoration: underline; }
/* Toggle button for small screens */
.consent-toggle {
display: none;
background: var(--color-dirty-gold);
border: none;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
padding: 0;
border-radius: 50%;
align-items: center;
justify-content: center;
flex: 0 0 auto;
box-sizing: border-box;
line-height: 1;
cursor: pointer;
margin-left: 0.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Expanded hidden text (default visible on desktop) */
.consent-more { display: inline; }
/* rotate the chevron when open */
.consent-toggle svg { transition: transform 0.18s ease; transform-origin: center; }
.consent-row.open .consent-toggle svg { transform: rotate(180deg); }
.consent-toggle svg { width: 12px; height: 12px; display: block; }
/* Small screens: collapse the long consent text and show toggle */
@media (max-width: 480px) {
.consent-more { display: none; }
.consent-row.open .consent-more { display: block; margin-top: 0.35rem; }
.consent-toggle { display: inline-flex; }
.consent-row { align-items: center; }
/* If JS determines toggle is not needed, force the detailed text visible and hide the toggle */
.consent-row.force-show .consent-more { display: block; margin-top: 0.25rem; }
.consent-row.force-show .consent-toggle { display: none; }
.consent-row { font-size: 0.5rem; gap: 0.5rem; }
.consent-row input[type="checkbox"] { transform: scale(0.8); }
}
/* On small screens reduce input and button sizes (including paddings/margins) to 80% for consistent appearance */
@media (max-width: 480px) {
.form-group { gap: calc(1rem * 0.8); }
.email-input {
padding: calc(1.2rem * 0.8) calc(1.5rem * 0.8);
font-size: calc(1.1rem * 0.8);
border-radius: calc(16px * 0.8);
box-sizing: border-box;
}
.primary-button {
padding: calc(1.2rem * 0.8) calc(2.2rem * 0.8);
font-size: calc(1.05rem * 0.8);
border-radius: calc(16px * 0.8);
box-sizing: border-box;
display: inline-flex;
}
/* ensure the toggle button and checkbox align with the smaller controls */
.consent-toggle {
width: calc(30px * 0.8);
height: calc(30px * 0.8);
min-width: calc(30px * 0.8);
min-height: calc(30px * 0.8);
margin-left: calc(0.5rem * 0.8);
}
}
.primary-button {
padding: 1.2rem 2.2rem;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
background: var(--color-dirty-gold);
border: none;
border-radius: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
box-shadow: 0 6px 22px rgba(0,0,0,0.18);
justify-content: center;
}
.primary-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 34px rgba(0,0,0,0.25);
background: color-mix(in srgb, var(--color-dirty-gold) 86%, #000000 14%);
}
html[data-theme="dark"] .primary-button {
color: #07101a;
background: color-mix(in srgb, var(--color-dirty-gold) 60%, #ffffff 40%);
}
.form-message {
/* Collapsed by default to avoid reserving vertical space when empty */
margin-top: 0;
padding: 0;
border-radius: 12px;
font-size: 1.05rem;
font-weight: 500;
text-align: center;
transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease, padding 0.28s ease, margin-top 0.28s ease;
opacity: 0;
transform: translateY(-6px);
max-height: 0;
overflow: hidden;
}
.form-message.success,
.form-message.error {
/* Expanded state when a message is present */
margin-top: 1.5rem;
padding: 1.2rem 1.5rem;
opacity: 1;
transform: translateY(0);
max-height: 240px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
animation: slideIn 0.4s ease-out;
}
/* Validation message styled like error but yellow */
.form-message.validation {
margin-top: 1.5rem;
padding: 1.2rem 1.5rem;
opacity: 1;
transform: translateY(0);
max-height: 240px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
animation: slideIn 0.28s ease-out;
background: #fff3bf; /* light yellow */
color: #664d03; /* dark yellow/brown text */
border: 1px solid rgba(102,77,3,0.12);
}
.form-message.success {
background: var(--success);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
}
.form-message.error {
background: var(--error);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.hidden {
position: absolute;
left: -9999px;
}
.footer {
padding: 2rem 0;
background: var(--color-light);
color: black;
text-align: center;
}
.footer p {
font-size: 0.95rem;
}
@media (max-width: 768px) {
.business-case {
padding: 1rem 0;
}
.business-text {
padding: 2rem;
font-size: 1.1rem;
}
.features {
padding: 2rem 0;
}
.features-grid {
gap: 2rem;
}
.signup {
padding: 5rem 0;
}
.signup-title {
font-size: 0.8rem;
margin-bottom: 2rem;
}
.form-group {
flex-direction: column;
align-items: stretch;
}
.email-input {
width: 100%;
min-width: auto;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.text-section {
padding: 1.5rem;
font-size: 1rem;
}
.feature-card {
padding: 2rem 1rem;
}
/* Tighter hero paddings on small screens to avoid squeezed content */
.hero {
height: auto; /* let content determine height on small devices */
padding-top: 3rem;
padding-bottom: 3rem;
}
.hero-content {
padding: 1rem;
}
.hero .signup-box {
padding: 0.75rem 0.75rem; /* smaller internal padding for signup box */
margin-top: 1rem;
width: calc(100% - 1.5rem);
}
}
/* Additional tightening for very small screens (<=360px): reduce horizontal padding further */
@media (max-width: 360px) {
.container { padding: 0 0.6rem; }
.feature-card { padding-left: 0.75rem; padding-right: 0.75rem; }
.about .about-content { padding-left: 0.75rem; padding-right: 0.75rem; }
.hero .signup-box { padding-left: 0.6rem; padding-right: 0.6rem; width: calc(100% - 1.2rem); }
/* further tighten hero on very small screens */
.hero { padding-top: 2rem; padding-bottom: 2rem; }
.hero-content { padding: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Modal / privacy styles */
.modal-overlay {
position: fixed;
inset: 0;
/* darker, less transparent overlay */
background: rgba(0,0,0,0.82);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
padding: 2rem;
}
.modal {
max-width: 900px;
width: 100%;
max-height: 85vh;
overflow: auto;
background: var(--surface);
color: var(--text);
border-radius: 12px;
padding: 1.5rem 1.75rem;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
position: relative;
}
.modal h2 { margin-top: 0; }
.modal .modal-body { margin-top: 0.75rem; line-height: 1.6; }
/* increase spacing before headers in modal */
.modal h2,
.modal h3 {
margin-top: 1rem;
}
/* indent ordered lists inside modal more than normal text */
.modal .modal-body ol {
padding-left: 2.4rem;
margin-left: 0;
}
.modal .modal-body ol li { margin-bottom: 0.45rem; }
.modal .modal-body ul li { margin-left: 1.1rem; }
.modal-close {
position: absolute;
right: 12px;
top: 10px;
background: transparent;
border: none;
font-size: 1.4rem;
cursor: pointer;
color: var(--muted);
}
/* hide overlay when [hidden] attribute present */
.modal-overlay[hidden] { display: none; }
/* Prevent background scrolling when modal open */
.no-scroll { overflow: hidden; }