/* ===== AbaTools Bio — pure HTML/CSS ===== */
/* Fonts are loaded via in index.html for faster, non-blocking delivery. */
:root {
--emerald-500: #05A045;
--emerald-600: #048c3d;
--emerald-50: #e9f7ef;
--emerald-200: #a7e3c1;
--slate-50: #F8FAFC;
--slate-100: #f1f5f9;
--slate-300: #cbd5e1;
--slate-400: #94a3b8;
--slate-600: #475569;
--slate-800: #1e293b;
--slate-900: #0F172A;
--orange-600: #E64A19;
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.03);
--shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--slate-50);
color: var(--slate-600);
min-height: 100vh;
}
.font-display { font-family: 'Montserrat', sans-serif; }
/* ---- View toggling via hidden radios ---- */
.view-toggle { position: absolute; opacity: 0; pointer-events: none; }
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 2rem 1.5rem 1.5rem;
position: relative;
}
.view {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
animation: fadeIn .5s ease-out forwards;
}
.lang-view { display: none; }
/* default: home visible */
#view-home:checked ~ .page .home-view { display: flex; }
/* when a language is chosen: hide home, show that language */
#view-en:checked ~ .page .home-view,
#view-es:checked ~ .page .home-view,
#view-fr:checked ~ .page .home-view,
#view-de:checked ~ .page .home-view,
#view-it:checked ~ .page .home-view { display: none; }
#view-en:checked ~ .page .lang-en,
#view-es:checked ~ .page .lang-es,
#view-fr:checked ~ .page .lang-fr,
#view-de:checked ~ .page .lang-de,
#view-it:checked ~ .page .lang-it { display: flex; animation: fadeIn .4s ease-out forwards; }
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.container { width: 100%; max-width: 48rem; }
/* ================= HOME VIEW ================= */
.home-inner {
width: 100%;
max-width: 48rem;
display: flex;
flex-direction: column;
align-items: center;
margin-top: .5rem;
}
/* ---- Brand intro (root hub) ---- */
.brand-intro {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2.5rem;
}
.brand-logo {
width: 7rem;
height: auto;
object-fit: contain;
margin-bottom: 1.5rem;
}
.home-headline {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 1.75rem;
color: var(--slate-900);
letter-spacing: -.025em;
line-height: 1.15;
text-transform: uppercase;
max-width: 33rem;
margin-bottom: .875rem;
}
.home-subhead {
font-size: 14px;
font-weight: 500;
color: var(--slate-400);
line-height: 1.6;
max-width: 34rem;
}
/* ---- Social proof widget ---- */
.social-proof {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
margin-top: 1.75rem;
}
.sp-avatars { display: flex; }
.sp-avatars img {
width: 2.75rem;
height: 2.75rem;
border-radius: 9999px;
object-fit: cover;
border: 3px solid var(--slate-50);
margin-left: -.6rem;
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.sp-avatars img:first-child { margin-left: 0; }
.sp-info { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-top: .35rem; }
.sp-rating { display: inline-flex; align-items: center; gap: .5rem; }
.sp-score {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 1.25rem;
color: var(--slate-900);
letter-spacing: -.02em;
}
.sp-stars { display: inline-flex; gap: .1rem; color: #fbbf24; }
.sp-stars svg { width: 1.35rem; height: 1.35rem; }
.sp-count { font-size: .9rem; color: var(--slate-400); font-weight: 500; }
/* ---- Language prompt ---- */
.lang-prompt {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--slate-400);
margin-bottom: 1rem;
text-align: center;
}
@media (min-width: 768px) {
.brand-logo { width: 8.5rem; margin-top: -.75rem; margin-bottom: 2.5rem; }
.home-headline { font-size: 2.25rem; }
.home-subhead { font-size: 14px; }
}
.home-head { text-align: center; margin-bottom: 2.5rem; }
.globe-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem; height: 3rem;
background: #fff;
border-radius: 1rem;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
color: var(--emerald-500);
margin-bottom: 1rem;
}
.globe-badge svg { width: 1.5rem; height: 1.5rem; }
.home-title {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 1.875rem;
color: var(--slate-900);
letter-spacing: -.025em;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: .5rem;
}
.home-sub { color: var(--slate-600); font-weight: 500; font-size: 1.125rem; }
.card-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ---- Language card ---- */
.lang-card {
cursor: pointer;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.125rem 1.25rem;
background: #fff;
border-radius: 18px;
border: 1.5px solid var(--slate-100);
box-shadow: var(--shadow-xl);
transition: all .25s ease;
}
.lang-card:hover {
border-color: var(--emerald-200);
transform: translateY(-3px);
box-shadow: var(--shadow-2xl);
}
.lang-card:active { transform: scale(.98); }
.lang-card .left { display: flex; align-items: center; gap: 1.15rem; }
.flag {
position: relative;
width: 3.25rem; height: 3.25rem;
border-radius: 9999px;
overflow: hidden;
border: 1px solid var(--slate-100);
box-shadow: 0 1px 2px rgba(0,0,0,.06);
flex-shrink: 0;
}
.flag img { width: 100%; height: 100%; object-fit: cover; }
.lang-text { display: flex; flex-direction: column; gap: .15rem; }
.lang-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.125rem;
letter-spacing: -.02em;
color: var(--slate-900);
line-height: 1.2;
}
.lang-tag {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: .8125rem;
color: var(--slate-400);
line-height: 1.35;
}
.chev {
width: 2.25rem; height: 2.25rem;
display: flex; align-items: center; justify-content: center;
border-radius: 9999px;
background: var(--slate-50);
color: var(--slate-400);
transition: all .25s ease;
flex-shrink: 0;
}
.lang-card:hover .chev { background: var(--emerald-50); color: var(--emerald-500); }
.chev svg { width: 1.125rem; height: 1.125rem; }
/* ---- Help / contact block ---- */
.help-block {
width: 100%;
margin-top: 3.5rem;
padding-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .5rem;
}
.help-title {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 24px;
color: var(--slate-900);
letter-spacing: -.025em;
line-height: 1.15;
}
.help-sub {
color: var(--slate-400);
font-weight: 500;
font-size: 14px;
line-height: 1.6;
max-width: 26rem;
margin-bottom: 1rem;
}
.help-btn {
display: inline-flex;
align-items: center;
gap: .625rem;
padding: .75rem 1.5rem;
background: transparent;
border: 1.5px solid var(--slate-300);
border-radius: 999px;
color: var(--slate-800);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: all .25s ease;
}
.help-btn:hover {
border-color: var(--emerald-500);
color: var(--emerald-600);
background: var(--emerald-50);
transform: translateY(-2px);
}
.help-btn svg { width: 1.25rem; height: 1.25rem; }
.help-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .75rem;
}
.help-btn--ig {
border-color: #dd2a7b;
color: #dd2a7b;
background: transparent;
}
.help-btn--ig:hover {
border-color: #dd2a7b;
color: #dd2a7b;
background: rgba(221, 42, 123, .07);
transform: translateY(-2px);
}
@media (min-width: 768px) {
.help-title { font-size: 24px; }
.help-sub { font-size: 14px; }
}
/* ================= LANGUAGE / CONTENT VIEW ================= */
.back-row {
width: 100%;
max-width: 48rem;
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.back-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--slate-400);
font-weight: 500;
font-size: 1rem;
text-decoration: none;
padding: .5rem;
margin-left: -.5rem;
border-radius: .75rem;
cursor: pointer;
transition: all .2s ease;
}
.back-btn:hover { color: var(--slate-900); background: var(--slate-100); }
.back-btn svg { width: 1.5rem; height: 1.5rem; }
.content-main {
width: 100%;
max-width: 48rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.hero { text-align: center; }
.hero h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 24px;
color: var(--slate-900);
letter-spacing: -.025em;
line-height: 1.15;
text-transform: uppercase;
margin-bottom: 1rem;
}
.hero p {
font-size: 14px;
color: var(--slate-400);
font-weight: 500;
line-height: 1.6;
max-width: 42rem;
margin: 0 auto;
}
.product-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.5rem 0;
}
/* ---- Product card (vertical layout: icon on top, full-width CTA below) ---- */
.product-card {
width: 100%;
background: #fff;
border-radius: 24px;
padding: 1.5rem;
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
border: 2px solid transparent;
text-decoration: none;
transition: all .3s ease;
}
.product-card:hover {
border-color: rgba(5,160,69,.2);
box-shadow: var(--shadow-2xl);
transform: translateY(-4px);
}
.product-card:active { transform: scale(.98); }
.product-icon {
width: 3rem; height: 3rem;
background: var(--emerald-50);
border-radius: 1rem;
display: flex; align-items: center; justify-content: center;
color: var(--emerald-500);
flex-shrink: 0;
}
.product-icon svg { width: 1.5rem; height: 1.5rem; }
.product-text { display: flex; flex-direction: column; gap: .4rem; }
.product-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.0625rem;
color: var(--slate-900);
line-height: 1.25;
letter-spacing: -.01em;
}
.product-desc {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: .875rem;
color: var(--slate-400);
line-height: 1.45;
}
/* full-width call-to-action */
.product-btn {
margin-top: .25rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .9rem 1rem;
border-radius: 14px;
background: var(--emerald-500);
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: .95rem;
letter-spacing: .01em;
transition: background .3s ease;
}
.product-card:hover .product-btn { background: var(--emerald-600); }
.product-btn svg { width: 1.1rem; height: 1.1rem; }
/* ================= FOOTER ================= */
.footer {
margin-top: 7rem;
/* break out of .page padding so it touches the sides & bottom */
width: auto;
align-self: stretch;
margin-left: -1.5rem;
margin-right: -1.5rem;
margin-bottom: -1.5rem;
padding: 4rem 1.5rem 3rem;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-logo {
width: 8rem;
height: auto;
object-fit: contain;
opacity: .9;
margin-bottom: 2.5rem;
}
.footer-cols {
width: 100%;
max-width: 40rem;
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
.footer-heading {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: .8125rem;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--slate-900);
margin-bottom: 1.25rem;
}
.footer-list,
.footer-secure {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
}
.footer-line {
display: inline-flex;
align-items: center;
gap: .5rem;
font-weight: 600;
font-size: .9375rem;
color: var(--slate-800);
text-decoration: none;
transition: color .2s ease;
}
a.footer-line:hover { color: var(--emerald-600); }
.footer-line svg { width: 1.125rem; height: 1.125rem; color: var(--emerald-500); flex-shrink: 0; }
.footer-line--muted {
font-weight: 500;
font-size: .8125rem;
color: var(--slate-400);
margin-top: .25rem;
}
.footer-line--muted svg { color: var(--slate-400); }
.footer-line--accent { color: var(--emerald-600); }
.footer-seals {
width: auto;
max-width: 100%;
height: 8rem;
object-fit: contain;
opacity: .9;
margin-top: .25rem;
}
.footer-bottom {
width: 100%;
max-width: 20rem;
padding-top: 1.75rem;
border-top: 1px solid var(--slate-100);
}
.footer-bottom p {
font-size: .75rem;
color: var(--slate-400);
font-weight: 500;
}
@media (min-width: 768px) {
.footer-cols {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.footer-seals { height: 10rem; }
}
/* Top accent strip — ATRI 4-color bar (matches 500-OT access page) */
.gradient-bar {
position: fixed;
top: 0; left: 0;
width: 100%; height: 5px;
background: linear-gradient(90deg,
hsl(202 73% 51%) 0 25%, /* blue */
hsl(96 48% 47%) 25% 50%, /* green */
hsl(44 92% 54%) 50% 75%, /* yellow */
hsl(1 75% 53%) 75% 100%); /* red */
z-index: 100;
}
/* ================= FLOATING SUPPORT BUTTON ================= */
.support-fab {
position: fixed;
right: 1.25rem;
bottom: 1.5rem;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 999px;
background: var(--emerald-500);
color: #fff;
box-shadow: var(--shadow-2xl);
animation: fab-float 3s ease-in-out infinite;
transition: transform .25s ease, background .25s ease;
}
.support-fab:hover {
background: var(--emerald-600);
transform: scale(1.08);
}
.support-fab svg { width: 1.6rem; height: 1.6rem; }
@keyframes fab-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (min-width: 768px) {
.support-fab { right: 2rem; bottom: 2rem; width: 3.75rem; height: 3.75rem; }
}
/* ================= RESPONSIVE ================= */
@media (min-width: 768px) {
.home-inner { margin-top: 2.5rem; }
.home-title { font-size: 2.25rem; }
.lang-name { font-size: 1.25rem; }
.lang-tag { font-size: .875rem; }
.hero h1 { font-size: 24px; }
.hero p { font-size: 14px; }
.product-title { font-size: 1.1875rem; }
.product-desc { font-size: .9375rem; }
.footer-logo { width: 9rem; }
.page { padding: 2rem 2rem 1.5rem; }
.footer { margin-left: -2rem; margin-right: -2rem; }
}
@media (min-width: 1024px) {
.hero h1 { font-size: 24px; }
}
/* ================= WHO CREATED THE MATERIAL ================= */
.who-section {
width: 100%;
margin-top: 4rem;
padding-top: 3.5rem;
border-top: 1px solid var(--slate-100);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.who-title {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 24px;
color: var(--slate-900);
letter-spacing: -.025em;
line-height: 1.15;
text-transform: uppercase;
max-width: 30rem;
margin-bottom: .75rem;
}
.who-subtitle {
font-size: 14px;
font-weight: 500;
color: var(--slate-400);
line-height: 1.6;
max-width: 32rem;
margin-bottom: 2rem;
}
/* Repeated social-proof strip below the "who" section */
.trust-strip {
width: 100%;
display: flex;
justify-content: center;
margin-top: 2.5rem;
}
.trust-strip .social-proof { margin-top: 0; }
.who-media {
width: 100%;
max-width: 34rem;
margin-bottom: 2rem;
}
.who-media img {
width: 100%;
height: auto;
border-radius: 1.75rem;
border: 4px solid #fff;
box-shadow: var(--shadow-2xl);
object-fit: cover;
}
.who-text {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 40rem;
color: var(--slate-600);
font-size: 1rem;
font-weight: 500;
line-height: 1.65;
}
.who-text strong { color: var(--slate-800); font-weight: 700; }
@media (min-width: 768px) {
.who-title { font-size: 24px; }
.who-subtitle { font-size: 14px; }
.who-text { font-size: 1.125rem; }
}
/* ================= 30-DAY GUARANTEE ================= */
.guarantee-section {
width: 100%;
margin-top: 6rem;
margin-bottom: 3rem;
}
.guarantee-card {
width: 100%;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.75rem;
}
.guarantee-media {
width: 100%;
max-width: 12rem;
flex-shrink: 0;
display: flex;
justify-content: center;
}
.guarantee-media img {
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.12));
}
.guarantee-badge {
display: inline-flex;
align-items: center;
gap: .45rem;
background: #fffbeb;
color: #b45309;
padding: .4rem 1rem;
border-radius: 999px;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: .6875rem;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.guarantee-badge svg { width: 1rem; height: 1rem; }
.guarantee-title {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 24px;
color: var(--slate-900);
letter-spacing: -.025em;
line-height: 1.15;
text-transform: uppercase;
margin-bottom: .5rem;
}
.guarantee-subtitle {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.1875rem;
color: #d97706;
margin-bottom: 1.5rem;
}
.guarantee-text {
display: flex;
flex-direction: column;
gap: 1.25rem;
color: var(--slate-600);
font-size: 1rem;
font-weight: 500;
line-height: 1.65;
}
.guarantee-text strong { color: #b45309; font-weight: 700; }
@media (min-width: 768px) {
.guarantee-card {
flex-direction: row;
align-items: center;
text-align: left;
padding: 0;
gap: 3rem;
}
.guarantee-media { width: 33%; max-width: 16rem; }
.guarantee-badge { margin-bottom: 1.5rem; }
.guarantee-title { font-size: 24px; }
.guarantee-subtitle { font-size: 1.375rem; }
.guarantee-text { font-size: 1.125rem; }
}