/*
==============================================
CSS CUSTOM PROPERTIES (VARIABLES) - LIGHT THEME OPTIMIZED
Based on logo colors:Navy (#1E293B) + Emerald (#10B981)
Optimized for mobile reading & reduced eye strain
==============================================
*/
:root{
--primary:#10B981;
--primary-light:#34D399;
--primary-dark:#059669;
--primary-50:rgba(16,185,129,0.05);
--primary-100:rgba(16,185,129,0.1);
--primary-200:rgba(16,185,129,0.2);
--primary-300:rgba(16,185,129,0.3);
--primary-400:rgba(16,185,129,0.4);
--primary-500:rgba(16,185,129,0.5);
--navy:#1E293B;
--navy-light:#334155;
--navy-dark:#0F172A;
--success:#10B981;
--warning:#F59E0B;
--danger:#EF4444;
--info:#3B82F6;
--white:#FFFFFF;
--gray-50:#F8FAFC;
--gray-100:#F1F5F9;
--gray-200:#E2E8F0;
--gray-300:#CBD5E1;
--gray-400:#94A3B8;
--gray-500:#64748B;
--gray-600:#475569;
--gray-700:#334155;
--gray-800:#1E293B;
--gray-900:#0F172A;
--black:#000000;
--bg-primary:#F8FAFC;
--bg-secondary:#FFFFFF;
--bg-light:#FFFFFF;
--bg-card:#FFFFFF;
--bg-card-hover:#F1F5F9;
--text-primary:#1E293B;
--text-secondary:#475569;
--text-light:#64748B;
--text-muted:#94A3B8;
--text-white:var(--white);
--text-dark:var(--navy);
--glass-white:rgba(255,255,255,0.7);
--glass-white-light:rgba(255,255,255,0.5);
--glass-white-strong:rgba(255,255,255,0.9);
--glass-dark:rgba(30,41,59,0.05);
--glass-border:rgba(30,41,59,0.1);
--glass-backdrop:blur(20px);
--gradient-primary:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
--gradient-hero:linear-gradient(135deg,#F8FAFC 0%,#FFFFFF 50%,#F8FAFC 100%);
--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-size-xs:0.75rem;
--font-size-sm:0.875rem;
--font-size-md:1rem;
--font-size-lg:1.125rem;
--font-size-xl:1.25rem;
--font-size-2xl:1.5rem;
--font-size-3xl:1.875rem;
--font-size-4xl:2.25rem;
--font-weight-thin:100;
--font-weight-light:300;
--font-weight-normal:400;
--font-weight-medium:500;
--font-weight-semibold:600;
--font-weight-bold:700;
--font-weight-extrabold:800;
--font-weight-black:900;
--line-height-tight:1.25;
--line-height-normal:1.5;
--line-height-relaxed:1.75;
--spacing-0:0;
--spacing-1:0.25rem;
--spacing-2:0.5rem;
--spacing-3:0.75rem;
--spacing-4:1rem;
--spacing-5:1.25rem;
--spacing-6:1.5rem;
--spacing-8:2rem;
--spacing-10:2.5rem;
--spacing-12:3rem;
--spacing-16:4rem;
--spacing-20:5rem;
--spacing-24:6rem;
--spacing-32:8rem;
--spacing-xs:var(--spacing-1);
--spacing-sm:var(--spacing-2);
--spacing-md:var(--spacing-4);
--spacing-lg:var(--spacing-6);
--spacing-xl:var(--spacing-8);
--spacing-2xl:var(--spacing-12);
--spacing-3xl:var(--spacing-16);
--spacing-4xl:var(--spacing-24);
--radius-none:0;
--radius-sm:0.125rem;
--radius-md:0.375rem;
--radius-lg:0.5rem;
--radius-xl:0.75rem;
--radius-2xl:1rem;
--radius-3xl:1.5rem;
--radius-full:9999px;
--transition-fast:all 0.15s ease-in-out;
--transition-base:all 0.25s ease-in-out;
--transition-slow:all 0.5s ease-in-out;
--container-xs:475px;
--container-sm:640px;
--container-md:768px;
--container-lg:1024px;
--container-xl:1280px;
--container-2xl:1536px;
--container-max-width:1200px;
--container-padding:var(--spacing-md);
--navbar-height:70px;
--section-padding:var(--spacing-4xl);
--btn-height-sm:36px;
--btn-height-md:44px;
--btn-height-lg:56px;
--btn-height-xl:64px;
--z-dropdown:1000;
--z-sticky:1020;
--z-fixed:1030;
--z-navbar:1040;
--z-modal-backdrop:1050;
--z-modal:1060;
--z-popover:1070;
--z-tooltip:1080;
--z-chatbot:1090;
--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);
--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
}
/* ==============================================
ADAPTIVE DARK MODE - Auto-switch based on user preference
============================================== */
@media (prefers-color-scheme:dark){
:root{
--bg-primary:#0F172A;
--bg-secondary:#1E293B;
--bg-light:rgba(255,255,255,0.05);
--bg-card:rgba(255,255,255,0.05);
--bg-card-hover:rgba(255,255,255,0.08);
--text-primary:#FFFFFF;
--text-secondary:#E2E8F0;
--text-light:#CBD5E1;
--text-muted:#94A3B8;
--text-white:var(--white);
--text-dark:var(--navy-dark);
--glass-white:rgba(255,255,255,0.1);
--glass-white-light:rgba(255,255,255,0.05);
--glass-white-strong:rgba(255,255,255,0.15);
--glass-dark:rgba(0,0,0,0.3);
--glass-border:rgba(255,255,255,0.2);
--gradient-hero:linear-gradient(135deg,#0F172A 0%,#1E293B 50%,#0F172A 100%);
}
}
@media (prefers-contrast:high){
:root{
--text-secondary:var(--text-primary);
--text-light:var(--text-primary);
--glass-border:rgba(30,41,59,0.3);
}
}
@media (prefers-contrast:high) and (prefers-color-scheme:dark){
:root{
--text-secondary:#FFFFFF;
--text-light:#FFFFFF;
--glass-white:rgba(255,255,255,0.3);
--glass-white-strong:rgba(255,255,255,0.5);
--glass-border:rgba(255,255,255,0.4);
}
}/*
==============================================
BASE STYLES & RESET
==============================================
*/
*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
font-size:16px;
line-height:1.15;
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top:120px;
scrollbar-width:thin;
scrollbar-color:var(--primary) var(--gray-800);
}
body{
font-family:var(--font-family);
font-size:var(--font-size-md);
font-weight:var(--font-weight-normal);
line-height:var(--line-height-normal);
color:var(--text-primary);
background:var(--gradient-hero);
background-attachment:fixed;
overflow-x:hidden;
min-height:100vh;
min-height:100dvh;
position:relative;
font-feature-settings:'kern' 1,'liga' 1;
padding-top:var(--navbar-height);
}
*:focus{
outline:2px solid var(--primary);
outline-offset:2px;
}
*:focus:not(:focus-visible){
outline:none;
}
*:focus-visible{
outline:2px solid var(--primary);
outline-offset:2px;
}
::selection{
background:var(--primary-200);
color:var(--white);
}
::-moz-selection{
background:var(--primary-200);
color:var(--white);
}
::-webkit-scrollbar{
width:8px;
height:8px;
}
::-webkit-scrollbar-track{
background:var(--gray-800);
}
::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:var(--radius-full);
}
::-webkit-scrollbar-thumb:hover{
background:var(--primary-light);
}
h1,h2,h3,h4,h5,h6{
font-weight:var(--font-weight-bold);
line-height:var(--line-height-tight);
color:var(--white);
margin-bottom:var(--spacing-4);
}
h1{
font-size:var(--font-size-4xl);
font-weight:var(--font-weight-extrabold);
margin-bottom:var(--spacing-6);
}
h2{
font-size:var(--font-size-3xl);
margin-bottom:var(--spacing-5);
}
h3{
font-size:var(--font-size-2xl);
margin-bottom:var(--spacing-4);
}
h4{
font-size:var(--font-size-xl);
margin-bottom:var(--spacing-3);
}
h5{
font-size:var(--font-size-lg);
margin-bottom:var(--spacing-3);
}
h6{
font-size:var(--font-size-md);
margin-bottom:var(--spacing-2);
}
p{
margin-bottom:var(--spacing-4);
color:var(--text-secondary);
line-height:var(--line-height-relaxed);
}
a{
color:var(--primary);
text-decoration:none;
transition:var(--transition-fast);
}
a:hover{
color:var(--primary-light);
text-decoration:underline;
}
a:focus{
outline:2px solid var(--primary);
outline-offset:2px;
border-radius:var(--radius-sm);
}
ul,ol{
margin-left:var(--spacing-6);
margin-bottom:var(--spacing-4);
}
li{
margin-bottom:var(--spacing-2);
line-height:var(--line-height-relaxed);
color:var(--text-secondary);
}
strong,b{
font-weight:var(--font-weight-bold);
color:var(--white);
}
em,i{
font-style:italic;
color:var(--text-light);
}
code{
font-family:'Fira Code','Monaco','Consolas',monospace;
font-size:0.875em;
background:var(--glass-white);
color:var(--primary-light);
padding:0.2em 0.4em;
border-radius:var(--radius-sm);
border:1px solid var(--glass-border);
}
pre{
background:var(--glass-white);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
padding:var(--spacing-4);
margin-bottom:var(--spacing-4);
overflow-x:auto;
line-height:var(--line-height-relaxed);
}
pre code{
background:none;
border:none;
padding:0;
font-size:var(--font-size-sm);
}
blockquote{
border-left:4px solid var(--primary);
padding-left:var(--spacing-4);
margin-left:0;
margin-bottom:var(--spacing-4);
font-style:italic;
color:var(--text-light);
background:var(--glass-white-light);
padding:var(--spacing-4);
border-radius:var(--radius-lg);
}
table{
width:100%;
border-collapse:collapse;
margin-bottom:var(--spacing-4);
background:var(--glass-white);
border-radius:var(--radius-lg);
overflow:hidden;
border:1px solid var(--glass-border);
}
th{
background:var(--glass-white-strong);
color:var(--white);
font-weight:var(--font-weight-semibold);
padding:var(--spacing-3);
text-align:left;
border-bottom:1px solid var(--glass-border);
}
td{
padding:var(--spacing-3);
border-bottom:1px solid var(--glass-border);
color:var(--text-secondary);
}
tr:last-child td{
border-bottom:none;
}
img{
max-width:100%;
height:auto;
border-radius:var(--radius-lg);
}
hr{
border:none;
height:1px;
background:var(--glass-border);
margin:var(--spacing-6) 0;
}
input,
textarea,
select,
button{
font-family:inherit;
font-size:inherit;
line-height:inherit;
}
button{
cursor:pointer;
}
button:disabled{
cursor:not-allowed;
}
input,
textarea,
select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
button{
background:none;
border:none;
padding:0;
margin:0;
font:inherit;
color:inherit;
text-decoration:none;
cursor:pointer;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0;
}
input[type="number"]{
-moz-appearance:textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
-webkit-appearance:none;
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}/*
==============================================
LAYOUT SYSTEM
==============================================
*/
.container{
width:100%;
max-width:var(--container-max-width);
margin:0 auto;
padding:0 var(--container-padding);
}
.container-fluid{
width:100%;
padding:0 var(--container-padding);
}
.container-xs{max-width:var(--container-xs)}
.container-sm{max-width:var(--container-sm)}
.container-md{max-width:var(--container-md)}
.container-lg{max-width:var(--container-lg)}
.container-xl{max-width:var(--container-xl)}
.container-2xl{max-width:var(--container-2xl)}
.section{
padding:var(--section-padding) 0;
}
.section-sm{
padding:var(--spacing-2xl) 0;
}
.section-lg{
padding:calc(var(--section-padding) * 1.5) 0;
}
.section-hero{
padding:calc(var(--navbar-height) + var(--section-padding)) 0 var(--section-padding);
min-height:100vh;
min-height:100dvh;
display:flex;
align-items:center;
}
.grid{
display:grid;
gap:var(--spacing-6);
}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.grid-auto-fit{
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.grid-auto-fit-sm{
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.grid-auto-fit-lg{
grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
}
.gap-0{gap:0}
.gap-2{gap:var(--spacing-2)}
.gap-4{gap:var(--spacing-4)}
.gap-6{gap:var(--spacing-6)}
.gap-8{gap:var(--spacing-8)}
.gap-12{gap:var(--spacing-12)}
.gap-16{gap:var(--spacing-16)}
.col-span-1{grid-column:span 1 / span 1}
.col-span-2{grid-column:span 2 / span 2}
.col-span-3{grid-column:span 3 / span 3}
.col-span-4{grid-column:span 4 / span 4}
.col-span-5{grid-column:span 5 / span 5}
.col-span-6{grid-column:span 6 / span 6}
.col-span-full{grid-column:1 / -1}
.row-span-1{grid-row:span 1 / span 1}
.row-span-2{grid-row:span 2 / span 2}
.row-span-3{grid-row:span 3 / span 3}
.flex{
display:flex;
}
.inline-flex{
display:inline-flex;
}
.flex-row{flex-direction:row}
.flex-row-reverse{flex-direction:row-reverse}
.flex-col{flex-direction:column}
.flex-col-reverse{flex-direction:column-reverse}
.flex-wrap{flex-wrap:wrap}
.flex-wrap-reverse{flex-wrap:wrap-reverse}
.flex-nowrap{flex-wrap:nowrap}
.flex-1{flex:1 1 0%}
.flex-auto{flex:1 1 auto}
.flex-initial{flex:0 1 auto}
.flex-none{flex:none}
.flex-grow{flex-grow:1}
.flex-grow-0{flex-grow:0}
.flex-shrink{flex-shrink:1}
.flex-shrink-0{flex-shrink:0}
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.justify-evenly{justify-content:space-evenly}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-center{align-items:center}
.items-baseline{align-items:baseline}
.items-stretch{align-items:stretch}
.content-start{align-content:flex-start}
.content-end{align-content:flex-end}
.content-center{align-content:center}
.content-between{align-content:space-between}
.content-around{align-content:space-around}
.content-evenly{align-content:space-evenly}
.self-auto{align-self:auto}
.self-start{align-self:flex-start}
.self-end{align-self:flex-end}
.self-center{align-self:center}
.self-stretch{align-self:stretch}
.self-baseline{align-self:baseline}
.place-items-start{place-items:start}
.place-items-end{place-items:end}
.place-items-center{place-items:center}
.place-items-stretch{place-items:stretch}
.place-content-start{place-content:start}
.place-content-end{place-content:end}
.place-content-center{place-content:center}
.place-content-between{place-content:space-between}
.place-content-around{place-content:space-around}
.place-content-evenly{place-content:space-evenly}
.place-content-stretch{place-content:stretch}
.place-self-auto{place-self:auto}
.place-self-start{place-self:start}
.place-self-end{place-self:end}
.place-self-center{place-self:center}
.place-self-stretch{place-self:stretch}
.hero{
text-align:center;
padding:calc(var(--navbar-height) + var(--spacing-4xl)) 0 var(--spacing-4xl);
}
.hero-content{
max-width:800px;
margin:0 auto;
}
.content-header{
text-align:center;
margin-bottom:var(--spacing-2xl);
}
.content-container{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-xl);
margin-bottom:var(--spacing-xl);
}
.two-column{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--spacing-xl);
align-items:start;
}
.sidebar-layout{
display:grid;
grid-template-columns:300px 1fr;
gap:var(--spacing-2xl);
align-items:start;
}
.center{
display:flex;
align-items:center;
justify-content:center;
}
.center-vertical{
display:flex;
align-items:center;
}
.center-horizontal{
display:flex;
justify-content:center;
}
@media (max-width:1024px){
.container{
padding:0 var(--spacing-6);
}
.sidebar-layout{
grid-template-columns:1fr;
gap:var(--spacing-xl);
}
.two-column{
grid-template-columns:1fr;
gap:var(--spacing-lg);
}
.grid-cols-4{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid-cols-3{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:768px){
.container{
padding:0 var(--spacing-4);
}
.section{
padding:var(--spacing-3xl) 0;
}
.section-hero{
padding:calc(var(--navbar-height) + var(--spacing-3xl)) 0 var(--spacing-3xl);
}
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-5,
.grid-cols-6{
grid-template-columns:1fr;
}
.grid-auto-fit{
grid-template-columns:1fr;
}
.hero{
padding:calc(var(--navbar-height) + var(--spacing-3xl)) 0 var(--spacing-3xl);
}
.content-container{
padding:var(--spacing-lg);
}
}
@media (max-width:480px){
.container{
padding:0 var(--spacing-3);
}
.section{
padding:var(--spacing-2xl) 0;
}
.section-hero{
padding:calc(var(--navbar-height) + var(--spacing-2xl)) 0 var(--spacing-2xl);
}
.hero{
padding:calc(var(--navbar-height) + var(--spacing-2xl)) 0 var(--spacing-2xl);
}
.content-container{
padding:var(--spacing-md);
border-radius:var(--radius-lg);
}
}
/* ==============================================
PRIORITY 1 - MISSING FOOTER CLASSES (101% Quality)
============================================== */
.footer-logo{
display:inline-flex;
align-items:center;
gap:var(--spacing-2);
font-size:var(--font-size-lg);
font-weight:var(--font-weight-bold);
color:var(--navy);
text-decoration:none;
transition:all 0.2s ease;
}
.footer-logo:hover{
color:var(--primary);
transform:translateX(4px);
}
.footer-logo img{
width:32px;
height:32px;
}
.footer-social{
display:flex;
gap:var(--spacing-3);
align-items:center;
flex-wrap:wrap;
}
.footer-social a{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
background:var(--gray-100);
color:var(--navy);
border-radius:var(--radius-full);
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
text-decoration:none;
}
.footer-social a:hover{
background:var(--primary);
color:var(--white);
transform:translateY(-4px) scale(1.1);
box-shadow:0 8px 20px rgba(16,185,129,0.3);
}
.footer-social a:active{
transform:translateY(-2px) scale(1.05);
}
.footer-disclaimer{
background:var(--gray-50);
border:2px solid var(--gray-200);
border-radius:var(--radius-xl);
padding:var(--spacing-4);
margin-top:var(--spacing-6);
color:var(--text-secondary);
font-size:var(--font-size-sm);
line-height:1.6;
}
.footer-disclaimer strong{
color:var(--navy);
font-weight:var(--font-weight-semibold);
}
.footer-nav{
display:flex;
flex-direction:column;
gap:var(--spacing-2);
}
.footer-nav a{
color:var(--text-secondary);
text-decoration:none;
transition:all 0.2s ease;
padding:var(--spacing-1) 0;
display:inline-flex;
align-items:center;
gap:var(--spacing-2);
}
.footer-nav a:hover{
color:var(--primary);
padding-left:var(--spacing-2);
}
.footer-nav a:active{
color:var(--primary-dark);
}
.footer-brand{
display:flex;
flex-direction:column;
gap:var(--spacing-3);
}
/* ==============================================
PRIORITY 1 - COURSE/CHAPTER NAVIGATION
============================================== */
.chapter-header{
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
color:var(--white);
padding:var(--spacing-6);
border-radius:var(--radius-2xl);
margin-bottom:var(--spacing-6);
}
.chapter-header h1,
.chapter-header h2{
color:var(--white);
margin-bottom:var(--spacing-2);
}
.chapter-content{
background:var(--white);
padding:var(--spacing-6);
border-radius:var(--radius-xl);
border:2px solid var(--gray-200);
}
.chapter-intro{
background:var(--primary-50);
border-left:4px solid var(--primary);
padding:var(--spacing-5);
border-radius:var(--radius-lg);
margin-bottom:var(--spacing-6);
}
.chapter-label{
display:inline-block;
background:var(--primary);
color:var(--white);
padding:var(--spacing-1) var(--spacing-3);
border-radius:var(--radius-full);
font-size:var(--font-size-xs);
font-weight:var(--font-weight-semibold);
text-transform:uppercase;
letter-spacing:0.05em;
}
.breadcrumb-list{
display:flex;
align-items:center;
gap:var(--spacing-2);
flex-wrap:wrap;
padding:var(--spacing-3) 0;
list-style:none;
margin:0;
}
.breadcrumb-item{
display:flex;
align-items:center;
gap:var(--spacing-2);
color:var(--text-secondary);
font-size:var(--font-size-sm);
}
.breadcrumb-item a{
color:var(--text-secondary);
text-decoration:none;
transition:all 0.2s ease;
padding:var(--spacing-1) var(--spacing-2);
border-radius:var(--radius-lg);
}
.breadcrumb-item a:hover{
color:var(--primary);
background:var(--primary-50);
}
.breadcrumb-item a:active{
color:var(--primary-dark);
background:var(--primary-100);
}
.breadcrumb-item::after{
content:"/";
color:var(--text-muted);
margin-left:var(--spacing-2);
}
.breadcrumb-item:last-child::after{
display:none;
}
.breadcrumb-item.active{
color:var(--navy);
font-weight:var(--font-weight-medium);
}/*
==============================================
COMPONENT SYSTEM - TTRENING.COM
Complete and optimized component library
==============================================
*/
/* ==============================================
BUTTON SYSTEM
============================================== */
.btn,
button:not(.unstyled),
input[type="submit"],
input[type="button"]{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--spacing-2);
padding:var(--spacing-3) var(--spacing-6);
font-size:var(--font-size-md);
font-weight:var(--font-weight-medium);
line-height:1;
text-decoration:none;
text-align:center;
white-space:nowrap;
border:1px solid transparent;
border-radius:var(--radius-2xl);
cursor:pointer;
transition:var(--transition-fast);
min-height:var(--btn-height-md);
background:var(--gradient-primary);
color:var(--white);
box-shadow:var(--shadow-md);
}
.btn:hover,
button:not(.unstyled):hover,
input[type="submit"]:hover,
input[type="button"]:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-xl);
text-decoration:none;
}
.btn:active,
button:not(.unstyled):active,
input[type="submit"]:active,
input[type="button"]:active{
transform:translateY(0);
box-shadow:var(--shadow-md);
}
.btn-primary{
background:var(--primary);
border:2px solid var(--primary);
color:var(--white);
font-weight:var(--font-weight-bold);
}
.btn-primary:hover{
background:var(--primary-dark);
border-color:var(--primary-dark);
color:var(--white);
box-shadow:0 8px 24px rgba(5,150,105,0.5);
transform:translateY(-2px);
}
.btn-primary:active,
.btn-primary.active{
background:#047857;
border-color:#047857;
color:var(--white);
transform:translateY(0);
box-shadow:0 2px 8px rgba(5,150,105,0.4);
}
.btn-primary:focus{
outline:3px solid var(--primary-200);
outline-offset:2px;
}
.btn-secondary{
background:var(--navy);
border:2px solid var(--navy);
color:var(--white);
font-weight:var(--font-weight-bold);
}
.btn-secondary:hover{
background:var(--primary);
border-color:var(--primary);
color:var(--white);
box-shadow:0 8px 24px rgba(16,185,129,0.4);
transform:translateY(-2px);
}
.btn-secondary:active,
.btn-secondary.active{
background:var(--primary-dark);
border-color:var(--primary-dark);
color:var(--white);
transform:translateY(0);
box-shadow:0 2px 8px rgba(5,150,105,0.3);
}
.btn-secondary:focus{
outline:3px solid var(--primary-200);
outline-offset:2px;
}
.btn-outline{
background:transparent;
border:3px solid var(--primary);
color:var(--primary-dark);
font-weight:var(--font-weight-bold);
}
.btn-outline:hover{
background:var(--primary);
border-color:var(--primary);
color:var(--white);
box-shadow:0 8px 24px rgba(16,185,129,0.4);
transform:translateY(-2px);
}
.btn-outline:active,
.btn-outline.active{
background:var(--primary-dark);
border-color:var(--primary-dark);
color:var(--white);
transform:translateY(0);
}
.btn-ghost{
background:transparent;
border:2px solid transparent;
color:var(--navy);
font-weight:var(--font-weight-semibold);
}
.btn-ghost:hover{
background:var(--gray-200);
border-color:var(--gray-400);
color:var(--navy);
transform:translateY(-1px);
}
.btn-ghost:active,
.btn-ghost.active{
background:var(--gray-300);
border-color:var(--gray-500);
color:var(--navy);
transform:translateY(0);
}
.btn-danger{
background:linear-gradient(135deg,var(--danger) 0%,#DC2626 100%);
border-color:var(--danger);
color:var(--white);
}
.btn-danger:hover{
background:linear-gradient(135deg,#DC2626 0%,var(--danger) 100%);
box-shadow:0 8px 25px rgba(239,68,68,0.4);
}
.btn-calculate{
background:var(--gradient-primary);
border:2px solid var(--primary-400);
color:var(--white);
padding:var(--spacing-4) var(--spacing-8);
font-size:var(--font-size-lg);
min-height:52px;
border-radius:var(--radius-2xl);
font-weight:var(--font-weight-semibold);
letter-spacing:0.025em;
position:relative;
overflow:hidden;
}
.btn-calculate:hover{
border-color:var(--primary-light);
background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%);
transform:translateY(-3px) scale(1.02);
box-shadow:0 8px 25px rgba(16,185,129,0.4);
}
.btn-calculate:active{
transform:translateY(-1px) scale(1.01);
}
.btn-sm{
padding:var(--spacing-2) var(--spacing-4);
font-size:var(--font-size-sm);
min-height:var(--btn-height-sm);
border-radius:var(--radius-lg);
}
.btn-lg{
padding:var(--spacing-4) var(--spacing-8);
font-size:var(--font-size-lg);
min-height:var(--btn-height-lg);
border-radius:var(--radius-3xl);
}
.btn-xl{
padding:var(--spacing-5) var(--spacing-10);
font-size:var(--font-size-xl);
min-height:var(--btn-height-xl);
border-radius:var(--radius-3xl);
}
.btn:disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled{
opacity:0.6;
cursor:not-allowed;
transform:none;
box-shadow:var(--shadow-sm);
}
.btn:disabled:hover,
button:disabled:hover,
input[type="submit"]:disabled:hover,
input[type="button"]:disabled:hover{
transform:none;
box-shadow:var(--shadow-sm);
}
/* ==============================================
CARD SYSTEM
============================================== */
.card{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-6);
transition:var(--transition-base);
box-shadow:var(--shadow-md);
}
.card:hover{
background:var(--glass-white-strong);
transform:translateY(-2px);
box-shadow:var(--shadow-xl);
}
.card-header{
margin-bottom:var(--spacing-4);
padding-bottom:var(--spacing-4);
border-bottom:1px solid var(--glass-border);
}
.card-header h3{
color:var(--white);
margin-bottom:var(--spacing-2);
}
.card-body{
margin-bottom:var(--spacing-4);
}
.card-footer{
margin-top:var(--spacing-4);
padding-top:var(--spacing-4);
border-top:1px solid var(--glass-border);
}
.card-feature{
text-align:center;
padding:var(--spacing-8);
}
.card-feature .card-icon{
font-size:var(--font-size-4xl);
color:var(--primary);
margin-bottom:var(--spacing-4);
}
.card-compact{
padding:var(--spacing-4);
}
/* ==============================================
FORM SYSTEM
============================================== */
.form-group{
margin-bottom:var(--spacing-6);
}
.form-label{
display:block;
font-weight:var(--font-weight-medium);
color:var(--text-primary);
margin-bottom:var(--spacing-2);
font-size:var(--font-size-sm);
}
.form-label.required::after{
content:' *';
color:var(--danger);
}
.form-input,
.form-select,
.form-textarea{
width:100%;
padding:var(--spacing-3) var(--spacing-4);
font-size:var(--font-size-md);
font-weight:var(--font-weight-normal);
line-height:var(--line-height-normal);
background:#374151;
color:var(--white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
transition:var(--transition-fast);
min-height:44px;
}
.form-select option{
background-color:#1F2937 !important;
color:#FFFFFF !important;
padding:8px 12px !important;
}
.form-select option:not(:checked){
background-color:#1F2937 !important;
color:#FFFFFF !important;
}
.form-select{
color-scheme:dark !important;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus{
outline:none;
border-color:var(--primary);
background:var(--glass-white-strong);
box-shadow:0 0 0 3px var(--primary-100);
}
.form-input::placeholder,
.form-textarea::placeholder{
color:var(--text-muted);
}
.form-input:invalid{
border-color:var(--danger);
}
.form-input:invalid:focus{
box-shadow:0 0 0 3px rgba(239,68,68,0.1);
}
.form-textarea{
min-height:120px;
resize:vertical;
}
.form-select{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position:right var(--spacing-3) center;
background-repeat:no-repeat;
background-size:1.5em 1.5em;
padding-right:calc(var(--spacing-4) + 1.5em);
}
.form-help{
margin-top:var(--spacing-1);
font-size:var(--font-size-sm);
color:var(--text-muted);
}
.form-error{
margin-top:var(--spacing-1);
font-size:var(--font-size-sm);
color:var(--danger);
}
.checkbox-group,
.radio-group{
display:flex;
flex-direction:column;
gap:var(--spacing-2);
}
.checkbox-label,
.radio-label{
display:flex;
align-items:center;
gap:var(--spacing-2);
cursor:pointer;
padding:var(--spacing-3) var(--spacing-4);
background:var(--glass-white);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
transition:var(--transition-fast);
}
.radio-label:hover,
.checkbox-label:hover{
background:var(--glass-white-strong);
border-color:var(--primary-300);
}
input[type="radio"]:checked + .radio-label,
input[type="checkbox"]:checked + .checkbox-label{
background:var(--primary-100);
border-color:var(--primary);
color:var(--primary-light);
}
.radio-label:has(input[type="radio"]:checked){
background:var(--primary-100) !important;
border-color:var(--primary) !important;
color:var(--primary-light) !important;
}
/* ==============================================
CALCULATOR COMPONENTS
============================================== */
.calculator-container{
max-width:800px;
margin:0 auto;
padding:var(--spacing-xl);
}
.calculator-form{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-xl);
margin-bottom:var(--spacing-xl);
}
.calculator-layout{
display:grid;
grid-template-columns:1fr;
gap:var(--spacing-2xl);
max-width:1200px;
margin:0 auto;
}
@media (min-width:1024px){
.calculator-layout.with-sidebar{
grid-template-columns:2fr 1fr;
align-items:start;
}
}
.unit-toggle{
display:flex;
gap:var(--spacing-2);
margin-bottom:var(--spacing-6);
padding:var(--spacing-1);
background:var(--glass-white-light);
border-radius:var(--radius-xl);
border:1px solid var(--glass-border);
}
.unit-toggle .btn{
flex:1;
margin:0;
border-radius:var(--radius-lg);
transition:all 0.2s ease;
}
.unit-toggle .btn.active{
background:var(--gradient-primary);
color:var(--white);
box-shadow:var(--shadow-md);
}
.results-section{
margin-top:var(--spacing-2xl);
padding:var(--spacing-xl);
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
display:none;
}
.results-section.show{
display:block;
animation:fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.results-header{
text-align:center;
margin-bottom:var(--spacing-2xl);
padding:var(--spacing-xl);
background:var(--glass-white-light);
border-radius:var(--radius-2xl);
border:1px solid var(--glass-border);
}
.results-header h2{
color:var(--text-primary);
margin-bottom:var(--spacing-md);
background:var(--gradient-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.result-value{
font-size:var(--font-size-4xl);
font-weight:var(--font-weight-bold);
text-align:center;
margin:var(--spacing-lg) 0;
background:var(--gradient-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.result-method{
text-align:center;
font-size:var(--font-size-sm);
color:var(--text-secondary);
margin-bottom:var(--spacing-xl);
}
.results-sticky{
position:sticky;
top:calc(var(--navbar-height) + var(--spacing-xl));
height:fit-content;
background:var(--glass-white);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-xl);
}
.progress-bar{
height:12px;
background:var(--glass-white-light);
border-radius:var(--radius-full);
overflow:hidden;
position:relative;
border:1px solid var(--glass-border);
}
.progress-fill{
height:100%;
background:var(--gradient-primary);
border-radius:var(--radius-full);
transition:width 0.8s cubic-bezier(0.4,0,0.2,1);
position:relative;
}
.progress-fill::after{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.2) 50%,
transparent 100%);
animation:progress-shimmer 2s infinite;
}
@keyframes progress-shimmer{
0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}
.distribution-container{
display:flex;
flex-direction:column;
gap:var(--spacing-3);
padding:var(--spacing-4);
background:var(--glass-white-light);
border-radius:var(--radius-lg);
border:1px solid var(--glass-border);
}
.distribution-item{
display:flex;
align-items:center;
gap:var(--spacing-4);
}
.distribution-label{
min-width:100px;
font-size:var(--font-size-sm);
font-weight:var(--font-weight-medium);
color:var(--text-secondary);
}
.distribution-bar{
flex:1;
height:24px;
background:var(--glass-white);
border-radius:var(--radius-lg);
overflow:hidden;
position:relative;
border:1px solid var(--glass-border);
}
.distribution-fill{
height:100%;
background:var(--gradient-primary);
border-radius:var(--radius-lg);
transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
display:flex;
align-items:center;
justify-content:flex-end;
padding-right:var(--spacing-2);
color:var(--white);
font-size:var(--font-size-xs);
font-weight:var(--font-weight-semibold);
}
.quick-actions{
display:flex;
flex-wrap:wrap;
gap:var(--spacing-2);
align-items:center;
margin-top:var(--spacing-md);
padding:var(--spacing-3);
background:var(--glass-white-light);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
}
.quick-label{
font-size:var(--font-size-sm);
color:var(--text-secondary);
font-weight:var(--font-weight-medium);
margin-right:var(--spacing-2);
}
.quick-btn{
background:rgba(16,185,129,0.1);
border:1px solid var(--primary);
color:var(--primary);
border-radius:var(--radius-full);
padding:var(--spacing-xs) var(--spacing-3);
cursor:pointer;
transition:var(--transition-base);
font-weight:var(--font-weight-medium);
font-size:var(--font-size-sm);
white-space:nowrap;
}
.quick-btn:hover{
background:var(--gradient-primary);
color:var(--white);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
.input-group{
position:relative;
}
.input-group .form-input{
padding-right:60px;
}
.input-suffix{
position:absolute;
right:var(--spacing-4);
top:50%;
transform:translateY(-50%);
color:var(--text-secondary);
font-size:var(--font-size-sm);
pointer-events:none;
}
.zone-card{
padding:var(--spacing-4);
border-radius:var(--radius-lg);
border:2px solid;
text-align:center;
transition:var(--transition-base);
cursor:pointer;
position:relative;
min-height:100px;
display:flex;
flex-direction:column;
justify-content:center;
}
.zone-card:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-lg);
}
.zone-card.active::before{
content:'✓';
position:absolute;
top:8px;
right:8px;
background:var(--white);
color:var(--primary);
width:20px;
height:20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:var(--font-weight-bold);
font-size:var(--font-size-xs);
}
.zone-card.zone-1{border-color:#10b981;background:rgba(16,185,129,0.1)}
.zone-card.zone-2{border-color:#3b82f6;background:rgba(59,130,246,0.1)}
.zone-card.zone-3{border-color:#f59e0b;background:rgba(245,158,11,0.1)}
.zone-card.zone-4{border-color:#ef4444;background:rgba(239,68,68,0.1)}
.zone-card.zone-5{border-color:#8b5cf6;background:rgba(139,92,246,0.1)}
.guide-card{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-xl);
padding:var(--spacing-lg);
margin-bottom:var(--spacing-lg);
}
.guide-card h3{
color:var(--text-primary);
margin-bottom:var(--spacing-md);
display:flex;
align-items:center;
gap:var(--spacing-2);
}
.guide-card h3 i{
color:var(--primary);
}
.guide-highlight{
background:rgba(16,185,129,0.1);
border-left:4px solid var(--primary);
padding:var(--spacing-4);
border-radius:var(--radius-lg);
margin:var(--spacing-4) 0;
}
.guide-highlight strong{
color:var(--white);
}
.trust-badges{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:var(--spacing-3);
margin:var(--spacing-lg) 0;
}
.trust-badge{
display:inline-flex;
align-items:center;
gap:var(--spacing-2);
padding:var(--spacing-2) var(--spacing-4);
background:rgba(16,185,129,0.15);
border:1px solid var(--primary);
border-radius:var(--radius-full);
color:var(--primary);
font-size:var(--font-size-sm);
font-weight:var(--font-weight-medium);
white-space:nowrap;
}
.trust-badge i{
font-size:var(--font-size-xs);
}
/* ==============================================
NAVIGATION COMPONENTS
============================================== */
.navbar{
position:fixed;
top:0;
left:0;
right:0;
height:var(--navbar-height);
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border-bottom:1px solid var(--glass-border);
z-index:var(--z-navbar);
transition:var(--transition-base);
}
.navbar.scrolled{
background:var(--glass-white-strong);
box-shadow:var(--shadow-lg);
}
.navbar-container{
display:flex;
align-items:center;
justify-content:space-between;
height:100%;
max-width:var(--container-max-width);
margin:0 auto;
padding:0 var(--container-padding);
}
.navbar-brand{
display:flex;
align-items:center;
gap:var(--spacing-3);
font-size:var(--font-size-xl);
font-weight:var(--font-weight-bold);
color:var(--white);
text-decoration:none;
}
.navbar-menu{
display:flex;
list-style:none;
margin:0;
padding:0;
gap:var(--spacing-2);
}
.navbar-link{
display:flex;
align-items:center;
padding:var(--spacing-2) var(--spacing-4);
color:var(--text-light);
text-decoration:none;
border-radius:var(--radius-lg);
transition:var(--transition-fast);
font-weight:var(--font-weight-medium);
font-size:var(--font-size-sm);
}
.navbar-link:hover,
.navbar-link.active{
color:var(--white);
background:var(--glass-white-light);
}
.mobile-menu-toggle{
display:none;
background:none;
border:none;
color:var(--white);
font-size:var(--font-size-xl);
cursor:pointer;
padding:var(--spacing-2);
}
@media (min-width:769px){
.navbar-menu{
display:flex !important;
position:static !important;
background:transparent !important;
backdrop-filter:none !important;
border:none !important;
flex-direction:row !important;
padding:0 !important;
box-shadow:none !important;
}
.mobile-menu-toggle{
display:none !important;
}
}
@media (max-width:768px){
.mobile-menu-toggle{
display:block;
}
.navbar-menu{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:rgba(17,24,39,0.95);
backdrop-filter:blur(20px);
border-top:1px solid rgba(255,255,255,0.3);
border-bottom:1px solid rgba(255,255,255,0.1);
flex-direction:column;
padding:var(--spacing-4);
gap:var(--spacing-2);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}
.navbar-menu.active{
display:flex;
}
.navbar-link{
padding:var(--spacing-4) var(--spacing-4);
border-radius:var(--radius-lg);
width:100%;
justify-content:flex-start;
color:rgba(255,255,255,0.9);
font-weight:var(--font-weight-medium);
transition:all 0.2s ease;
border:1px solid transparent;
}
.navbar-link:hover,
.navbar-link.active{
background:rgba(16,185,129,0.15);
border-color:rgba(16,185,129,0.3);
color:rgba(255,255,255,1);
transform:translateX(4px);
}
.navbar-link.active{
background:rgba(16,185,129,0.2);
border-color:var(--primary);
color:var(--white);
}
}
/* ==============================================
ALERT SYSTEM
============================================== */
.alert{
padding:var(--spacing-4);
border-radius:var(--radius-lg);
border:1px solid transparent;
margin-bottom:var(--spacing-4);
}
.alert-success{
background:var(--glass-white);
border-color:var(--success);
color:var(--success);
}
.alert-warning{
background:var(--glass-white);
border-color:var(--warning);
color:var(--warning);
}
.alert-danger{
background:var(--glass-white);
border-color:var(--danger);
color:var(--danger);
}
.alert-info{
background:var(--glass-white);
border-color:var(--info);
color:var(--info);
}
/* ==============================================
BADGE SYSTEM
============================================== */
.badge{
display:inline-flex;
align-items:center;
padding:var(--spacing-1) var(--spacing-3);
font-size:var(--font-size-xs);
font-weight:var(--font-weight-medium);
border-radius:var(--radius-full);
text-transform:uppercase;
letter-spacing:0.05em;
}
.badge-primary{
background:var(--primary-100);
color:var(--primary);
}
.badge-secondary{
background:var(--glass-white);
color:var(--text-secondary);
}
.badge-success{
background:rgba(16,185,129,0.1);
color:var(--success);
}
.badge-warning{
background:rgba(245,158,11,0.1);
color:var(--warning);
}
.badge-danger{
background:rgba(239,68,68,0.1);
color:var(--danger);
}
.badge-info{
background:rgba(59,130,246,0.1);
color:#3b82f6;
}
/* ==============================================
LOADING INDICATORS
============================================== */
.loading{
display:inline-flex;
align-items:center;
gap:var(--spacing-2);
}
.spinner{
width:20px;
height:20px;
border:2px solid var(--glass-border);
border-top:2px solid var(--primary);
border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
/* ==============================================
BACK TO TOP BUTTON
============================================== */
.back-to-top{
position:fixed;
bottom:var(--spacing-6);
left:var(--spacing-6);
width:50px;
height:50px;
background:var(--gradient-primary);
border:none;
border-radius:50%;
color:var(--white);
cursor:pointer;
transition:var(--transition-base);
z-index:var(--z-fixed);
opacity:0;
visibility:hidden;
transform:translateY(100px);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
line-height:1;
padding:0;
box-shadow:var(--shadow-lg);
}
.back-to-top i{
display:block;
line-height:1;
}
.back-to-top.show{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.back-to-top:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-xl);
}
/* ==============================================
MOBILE TOUCH OPTIMIZATIONS
============================================== */
@media (max-width:768px){
.btn,
.calculator-card,
.navbar-link,
.course-nav-link,
.zone-card,
.quick-btn{
min-height:44px;
min-width:44px;
padding:12px 16px;
}
.mobile-menu-toggle{
min-height:44px;
min-width:44px;
padding:12px;
}
input,
select,
textarea{
font-size:16px;
min-height:44px;
padding:12px 16px;
}
.calculator-container{
padding:var(--spacing-lg);
}
.calculator-form{
padding:var(--spacing-lg);
}
.result-value{
font-size:var(--font-size-3xl);
}
.quick-actions{
justify-content:center;
}
.distribution-item{
flex-direction:column;
align-items:stretch;
gap:var(--spacing-2);
}
.distribution-label{
min-width:unset;
text-align:center;
}
.trust-badges{
flex-direction:column;
gap:var(--spacing-2);
}
.calculator-layout.with-sidebar{
grid-template-columns:1fr;
}
.results-sticky{
position:static;
margin-top:var(--spacing-xl);
}
}
/* ==============================================
PRIORITY 1 - MISSING BUTTON CLASSES (101% Quality)
============================================== */
.btn-block{
display:block;
width:100%;
}
.btn-large{
padding:var(--spacing-4) var(--spacing-8);
font-size:var(--font-size-xl);
min-height:56px;
border-radius:var(--radius-3xl);
}
.btn-white{
background-color:var(--white);
color:var(--navy);
border:2px solid var(--gray-200);
font-weight:var(--font-weight-semibold);
}
.btn-white:hover{
background-color:var(--gray-50);
border-color:var(--primary);
color:var(--primary-dark);
transform:translateY(-2px);
}
.btn-white:active,
.btn-white.active{
background-color:var(--primary-50);
border-color:var(--primary);
color:var(--primary-dark);
transform:translateY(0);
}
.btn-white:focus{
outline:3px solid var(--primary-200);
outline-offset:2px;
}
.btn-enhanced{
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
color:var(--white);
padding:var(--spacing-4) var(--spacing-8);
border-radius:var(--radius-2xl);
border:none;
cursor:pointer;
font-weight:var(--font-weight-semibold);
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.btn-enhanced:hover{
background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%);
transform:translateY(-3px) scale(1.02);
box-shadow:0 12px 30px rgba(16,185,129,0.4);
color:var(--white);
}
.btn-enhanced:active,
.btn-enhanced.active{
background:var(--primary-dark);
transform:translateY(-1px) scale(1.01);
box-shadow:0 6px 20px rgba(16,185,129,0.3);
color:var(--white);
}
.btn-enhanced:focus{
outline:3px solid var(--primary-300);
outline-offset:3px;
}
.btn-group{
display:inline-flex;
gap:var(--spacing-2);
flex-wrap:wrap;
}
.btn-group .btn{
margin:0;
}
.filter-btn{
background:var(--white);
color:var(--text-secondary);
border:2px solid var(--gray-300);
padding:var(--spacing-2) var(--spacing-4);
border-radius:var(--radius-xl);
font-size:var(--font-size-sm);
font-weight:var(--font-weight-medium);
cursor:pointer;
transition:all 0.2s ease;
}
.filter-btn:hover{
background:var(--gray-50);
border-color:var(--primary);
color:var(--navy);
transform:translateY(-1px);
}
.filter-btn:active,
.filter-btn.active{
background:var(--primary);
border-color:var(--primary);
color:var(--white);
transform:translateY(0);
box-shadow:0 0 0 3px var(--primary-100);
}
.filter-btn:focus{
outline:3px solid var(--primary-200);
outline-offset:2px;
}
.cta-buttons{
display:flex;
gap:var(--spacing-4);
flex-wrap:wrap;
margin-top:var(--spacing-6);
}
/* ==============================================
PRIORITY 1 - MISSING FORM CLASSES
============================================== */
.form-control{
display:block;
width:100%;
padding:var(--spacing-3) var(--spacing-4);
font-size:var(--font-size-md);
line-height:1.5;
color:var(--text-primary);
background-color:var(--white);
border:2px solid var(--gray-300);
border-radius:var(--radius-lg);
transition:all 0.2s ease;
}
.form-control:hover{
border-color:var(--gray-400);
}
.form-control:focus{
border-color:var(--primary);
outline:0;
box-shadow:0 0 0 4px var(--primary-100);
background-color:var(--white);
}
.form-control::placeholder{
color:var(--text-muted);
}
.form-row{
display:flex;
flex-wrap:wrap;
gap:var(--spacing-4);
margin-bottom:var(--spacing-4);
}
.form-row > *{
flex:1;
min-width:200px;
}
.input-wrapper{
position:relative;
display:flex;
align-items:center;
gap:var(--spacing-2);
}
.input-unit{
position:absolute;
right:var(--spacing-4);
top:50%;
transform:translateY(-50%);
color:var(--text-muted);
pointer-events:none;
font-weight:var(--font-weight-medium);
font-size:var(--font-size-sm);
}
.form-checklist{
list-style:none;
padding:0;
margin:var(--spacing-4) 0;
}
.form-checklist li{
padding:var(--spacing-2) 0;
display:flex;
align-items:center;
gap:var(--spacing-2);
}
.form-checklist li input[type="checkbox"]{
width:20px;
height:20px;
cursor:pointer;
}
.chat-input-container{
position:sticky;
bottom:0;
background:var(--white);
padding:var(--spacing-4);
border-top:2px solid var(--gray-200);
box-shadow:0 -4px 12px rgba(0,0,0,0.05);
}
.chat-input-wrapper{
display:flex;
gap:var(--spacing-3);
align-items:flex-end;
}
.chat-input{
flex:1;
padding:var(--spacing-3) var(--spacing-4);
border:2px solid var(--gray-300);
border-radius:var(--radius-2xl);
font-size:var(--font-size-md);
resize:none;
max-height:120px;
min-height:48px;
transition:all 0.2s ease;
}
.chat-input:focus{
border-color:var(--primary);
outline:0;
box-shadow:0 0 0 4px var(--primary-100);
}
.send-button{
padding:var(--spacing-3) var(--spacing-6);
background:var(--gradient-primary);
color:var(--white);
border:none;
border-radius:var(--radius-2xl);
cursor:pointer;
font-weight:var(--font-weight-semibold);
transition:all 0.2s ease;
min-height:48px;
}
.send-button:hover{
background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(16,185,129,0.3);
color:var(--white);
}
.send-button:active{
transform:translateY(0);
color:var(--white);
}
.test-input-form{
background:var(--gray-50);
padding:var(--spacing-6);
border-radius:var(--radius-xl);
margin:var(--spacing-6) 0;
border:2px solid var(--gray-200);
}
/* ==============================================
PRIORITY 1 - MISSING CARD CLASSES
============================================== */
.card-title{
color:var(--navy);
font-size:var(--font-size-xl);
font-weight:var(--font-weight-bold);
margin-bottom:var(--spacing-3);
line-height:1.3;
}
.card-content{
color:var(--text-secondary);
line-height:1.7;
}
.cue-card{
background:var(--white);
border:2px solid var(--gray-200);
border-radius:var(--radius-xl);
padding:var(--spacing-5);
margin-bottom:var(--spacing-4);
transition:all 0.3s ease;
}
.cue-card:hover{
border-color:var(--primary);
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(16,185,129,0.15);
}
.checkbox-card{
background:var(--white);
border:3px solid var(--gray-200);
border-radius:var(--radius-xl);
padding:var(--spacing-4);
cursor:pointer;
transition:all 0.2s ease;
}
.checkbox-card:hover{
border-color:var(--primary-light);
background:var(--gray-50);
transform:translateY(-1px);
}
.checkbox-card.selected,
.checkbox-card:active{
border-color:var(--primary);
background:var(--primary-50);
box-shadow:0 0 0 4px var(--primary-100);
}
.related-card{
background:var(--white);
border:1px solid var(--gray-200);
border-radius:var(--radius-lg);
padding:var(--spacing-4);
transition:all 0.2s ease;
}
.related-card:hover{
border-color:var(--primary);
box-shadow:0 4px 12px rgba(16,185,129,0.15);
transform:translateY(-2px);
}
/* ==============================================
UTILITY TRANSITIONS & TRANSFORMS
============================================== */
.transition-transform{
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.transition-all{
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.transition-colors{
transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}/*
==============================================
UTILITY CLASSES
==============================================
*/
/* ==============================================
DISPLAY UTILITIES
============================================== */
.block{display:block !important}
.inline-block{display:inline-block !important}
.inline{display:inline !important}
.flex{display:flex !important}
.inline-flex{display:inline-flex !important}
.grid{display:grid !important}
.inline-grid{display:inline-grid !important}
.hidden{display:none !important}
@media (max-width:768px){
.hidden-mobile{display:none !important}
.block-mobile{display:block !important}
}
@media (min-width:769px){
.hidden-desktop{display:none !important}
.block-desktop{display:block !important}
}
/* ==============================================
SPACING UTILITIES
============================================== */
.m-0{margin:0 !important}
.m-1{margin:var(--spacing-1) !important}
.m-2{margin:var(--spacing-2) !important}
.m-3{margin:var(--spacing-3) !important}
.m-4{margin:var(--spacing-4) !important}
.m-5{margin:var(--spacing-5) !important}
.m-6{margin:var(--spacing-6) !important}
.m-8{margin:var(--spacing-8) !important}
.m-10{margin:var(--spacing-10) !important}
.m-12{margin:var(--spacing-12) !important}
.m-16{margin:var(--spacing-16) !important}
.m-20{margin:var(--spacing-20) !important}
.m-24{margin:var(--spacing-24) !important}
.m-32{margin:var(--spacing-32) !important}
.m-auto{margin:auto !important}
.mt-0{margin-top:0 !important}
.mt-1{margin-top:var(--spacing-1) !important}
.mt-2{margin-top:var(--spacing-2) !important}
.mt-3{margin-top:var(--spacing-3) !important}
.mt-4{margin-top:var(--spacing-4) !important}
.mt-6{margin-top:var(--spacing-6) !important}
.mt-8{margin-top:var(--spacing-8) !important}
.mt-12{margin-top:var(--spacing-12) !important}
.mt-16{margin-top:var(--spacing-16) !important}
.mt-20{margin-top:var(--spacing-20) !important}
.mt-24{margin-top:var(--spacing-24) !important}
.mr-0{margin-right:0 !important}
.mr-2{margin-right:var(--spacing-2) !important}
.mr-4{margin-right:var(--spacing-4) !important}
.mr-6{margin-right:var(--spacing-6) !important}
.mr-8{margin-right:var(--spacing-8) !important}
.mb-0{margin-bottom:0 !important}
.mb-2{margin-bottom:var(--spacing-2) !important}
.mb-4{margin-bottom:var(--spacing-4) !important}
.mb-6{margin-bottom:var(--spacing-6) !important}
.mb-8{margin-bottom:var(--spacing-8) !important}
.mb-12{margin-bottom:var(--spacing-12) !important}
.mb-16{margin-bottom:var(--spacing-16) !important}
.ml-0{margin-left:0 !important}
.ml-2{margin-left:var(--spacing-2) !important}
.ml-4{margin-left:var(--spacing-4) !important}
.ml-6{margin-left:var(--spacing-6) !important}
.ml-8{margin-left:var(--spacing-8) !important}
.mx-0{margin-left:0 !important;margin-right:0 !important}
.mx-2{margin-left:var(--spacing-2) !important;margin-right:var(--spacing-2) !important}
.mx-4{margin-left:var(--spacing-4) !important;margin-right:var(--spacing-4) !important}
.mx-6{margin-left:var(--spacing-6) !important;margin-right:var(--spacing-6) !important}
.mx-8{margin-left:var(--spacing-8) !important;margin-right:var(--spacing-8) !important}
.mx-auto{margin-left:auto !important;margin-right:auto !important}
.my-0{margin-top:0 !important;margin-bottom:0 !important}
.my-2{margin-top:var(--spacing-2) !important;margin-bottom:var(--spacing-2) !important}
.my-4{margin-top:var(--spacing-4) !important;margin-bottom:var(--spacing-4) !important}
.my-6{margin-top:var(--spacing-6) !important;margin-bottom:var(--spacing-6) !important}
.my-8{margin-top:var(--spacing-8) !important;margin-bottom:var(--spacing-8) !important}
.p-0{padding:0 !important}
.p-1{padding:var(--spacing-1) !important}
.p-2{padding:var(--spacing-2) !important}
.p-3{padding:var(--spacing-3) !important}
.p-4{padding:var(--spacing-4) !important}
.p-5{padding:var(--spacing-5) !important}
.p-6{padding:var(--spacing-6) !important}
.p-8{padding:var(--spacing-8) !important}
.p-10{padding:var(--spacing-10) !important}
.p-12{padding:var(--spacing-12) !important}
.p-16{padding:var(--spacing-16) !important}
.p-20{padding:var(--spacing-20) !important}
.p-24{padding:var(--spacing-24) !important}
.pt-0{padding-top:0 !important}
.pt-2{padding-top:var(--spacing-2) !important}
.pt-4{padding-top:var(--spacing-4) !important}
.pt-6{padding-top:var(--spacing-6) !important}
.pt-8{padding-top:var(--spacing-8) !important}
.pt-12{padding-top:var(--spacing-12) !important}
.pt-16{padding-top:var(--spacing-16) !important}
.pr-0{padding-right:0 !important}
.pr-2{padding-right:var(--spacing-2) !important}
.pr-4{padding-right:var(--spacing-4) !important}
.pr-6{padding-right:var(--spacing-6) !important}
.pr-8{padding-right:var(--spacing-8) !important}
.pb-0{padding-bottom:0 !important}
.pb-2{padding-bottom:var(--spacing-2) !important}
.pb-4{padding-bottom:var(--spacing-4) !important}
.pb-6{padding-bottom:var(--spacing-6) !important}
.pb-8{padding-bottom:var(--spacing-8) !important}
.pb-12{padding-bottom:var(--spacing-12) !important}
.pl-0{padding-left:0 !important}
.pl-2{padding-left:var(--spacing-2) !important}
.pl-4{padding-left:var(--spacing-4) !important}
.pl-6{padding-left:var(--spacing-6) !important}
.pl-8{padding-left:var(--spacing-8) !important}
.px-0{padding-left:0 !important;padding-right:0 !important}
.px-2{padding-left:var(--spacing-2) !important;padding-right:var(--spacing-2) !important}
.px-4{padding-left:var(--spacing-4) !important;padding-right:var(--spacing-4) !important}
.px-6{padding-left:var(--spacing-6) !important;padding-right:var(--spacing-6) !important}
.px-8{padding-left:var(--spacing-8) !important;padding-right:var(--spacing-8) !important}
.py-0{padding-top:0 !important;padding-bottom:0 !important}
.py-2{padding-top:var(--spacing-2) !important;padding-bottom:var(--spacing-2) !important}
.py-4{padding-top:var(--spacing-4) !important;padding-bottom:var(--spacing-4) !important}
.py-6{padding-top:var(--spacing-6) !important;padding-bottom:var(--spacing-6) !important}
.py-8{padding-top:var(--spacing-8) !important;padding-bottom:var(--spacing-8) !important}
/* ==============================================
POSITION UTILITIES
============================================== */
.static{position:static !important}
.fixed{position:fixed !important}
.absolute{position:absolute !important}
.relative{position:relative !important}
.sticky{position:sticky !important}
.top-0{top:0 !important}
.right-0{right:0 !important}
.bottom-0{bottom:0 !important}
.left-0{left:0 !important}
.top-4{top:var(--spacing-4) !important}
.right-4{right:var(--spacing-4) !important}
.bottom-4{bottom:var(--spacing-4) !important}
.left-4{left:var(--spacing-4) !important}
.z-0{z-index:0 !important}
.z-10{z-index:10 !important}
.z-20{z-index:20 !important}
.z-30{z-index:30 !important}
.z-40{z-index:40 !important}
.z-50{z-index:50 !important}
.z-dropdown{z-index:var(--z-dropdown) !important}
.z-sticky{z-index:var(--z-sticky) !important}
.z-fixed{z-index:var(--z-fixed) !important}
.z-navbar{z-index:var(--z-navbar) !important}
.z-modal{z-index:var(--z-modal) !important}
.z-tooltip{z-index:var(--z-tooltip) !important}
/* ==============================================
SIZE UTILITIES
============================================== */
.w-auto{width:auto !important}
.w-full{width:100% !important}
.w-screen{width:100vw !important}
.w-fit{width:fit-content !important}
.h-auto{height:auto !important}
.h-full{height:100% !important}
.h-screen{height:100vh !important}
.h-fit{height:fit-content !important}
.min-w-0{min-width:0 !important}
.min-w-full{min-width:100% !important}
.min-w-fit{min-width:fit-content !important}
.min-h-0{min-height:0 !important}
.min-h-full{min-height:100% !important}
.min-h-screen{min-height:100vh !important}
.max-w-none{max-width:none !important}
.max-w-xs{max-width:320px !important}
.max-w-sm{max-width:384px !important}
.max-w-md{max-width:448px !important}
.max-w-lg{max-width:512px !important}
.max-w-xl{max-width:576px !important}
.max-w-2xl{max-width:672px !important}
.max-w-3xl{max-width:768px !important}
.max-w-4xl{max-width:896px !important}
.max-w-5xl{max-width:1024px !important}
.max-w-6xl{max-width:1152px !important}
.max-w-7xl{max-width:1280px !important}
.max-w-full{max-width:100% !important}
/* ==============================================
TEXT UTILITIES
============================================== */
.text-left{text-align:left !important}
.text-center{text-align:center !important}
.text-right{text-align:right !important}
.text-justify{text-align:justify !important}
.text-primary{color:var(--primary) !important}
.text-secondary{color:var(--text-secondary) !important}
.text-light{color:var(--text-light) !important}
.text-muted{color:var(--text-muted) !important}
.text-white{color:var(--white) !important}
.text-black{color:var(--black) !important}
.text-success{color:var(--success) !important}
.text-warning{color:var(--warning) !important}
.text-danger{color:var(--danger) !important}
.text-info{color:var(--info) !important}
.text-xs{font-size:var(--font-size-xs) !important}
.text-sm{font-size:var(--font-size-sm) !important}
.text-md{font-size:var(--font-size-md) !important}
.text-lg{font-size:var(--font-size-lg) !important}
.text-xl{font-size:var(--font-size-xl) !important}
.text-2xl{font-size:var(--font-size-2xl) !important}
.text-3xl{font-size:var(--font-size-3xl) !important}
.text-4xl{font-size:var(--font-size-4xl) !important}
.text-thin{font-weight:var(--font-weight-thin) !important}
.text-light{font-weight:var(--font-weight-light) !important}
.text-normal{font-weight:var(--font-weight-normal) !important}
.text-medium{font-weight:var(--font-weight-medium) !important}
.text-semibold{font-weight:var(--font-weight-semibold) !important}
.text-bold{font-weight:var(--font-weight-bold) !important}
.text-extrabold{font-weight:var(--font-weight-extrabold) !important}
.text-black{font-weight:var(--font-weight-black) !important}
.underline{text-decoration:underline !important}
.line-through{text-decoration:line-through !important}
.no-underline{text-decoration:none !important}
.italic{font-style:italic !important}
.not-italic{font-style:normal !important}
.leading-tight{line-height:var(--line-height-tight) !important}
.leading-normal{line-height:var(--line-height-normal) !important}
.leading-relaxed{line-height:var(--line-height-relaxed) !important}
.uppercase{text-transform:uppercase !important}
.lowercase{text-transform:lowercase !important}
.capitalize{text-transform:capitalize !important}
.normal-case{text-transform:none !important}
/* ==============================================
BACKGROUND UTILITIES
============================================== */
.bg-transparent{background-color:transparent !important}
.bg-primary{background-color:var(--primary) !important}
.bg-secondary{background-color:var(--bg-secondary) !important}
.bg-white{background-color:var(--white) !important}
.bg-black{background-color:var(--black) !important}
.bg-success{background-color:var(--success) !important}
.bg-warning{background-color:var(--warning) !important}
.bg-danger{background-color:var(--danger) !important}
.bg-info{background-color:var(--info) !important}
.bg-glass{background:var(--glass-white) !important}
.bg-glass-light{background:var(--glass-white-light) !important}
.bg-glass-strong{background:var(--glass-white-strong) !important}
.bg-gradient-primary{background:var(--gradient-primary) !important}
.bg-gradient-hero{background:var(--gradient-hero) !important}
/* ==============================================
BORDER UTILITIES
============================================== */
.border{border:1px solid var(--glass-border) !important}
.border-0{border:0 !important}
.border-2{border-width:2px !important}
.border-4{border-width:4px !important}
.border-t{border-top:1px solid var(--glass-border) !important}
.border-r{border-right:1px solid var(--glass-border) !important}
.border-b{border-bottom:1px solid var(--glass-border) !important}
.border-l{border-left:1px solid var(--glass-border) !important}
.border-primary{border-color:var(--primary) !important}
.border-secondary{border-color:var(--text-secondary) !important}
.border-white{border-color:var(--white) !important}
.border-transparent{border-color:transparent !important}
.rounded-none{border-radius:var(--radius-none) !important}
.rounded-sm{border-radius:var(--radius-sm) !important}
.rounded{border-radius:var(--radius-md) !important}
.rounded-lg{border-radius:var(--radius-lg) !important}
.rounded-xl{border-radius:var(--radius-xl) !important}
.rounded-2xl{border-radius:var(--radius-2xl) !important}
.rounded-3xl{border-radius:var(--radius-3xl) !important}
.rounded-full{border-radius:var(--radius-full) !important}
/* ==============================================
SHADOW UTILITIES
============================================== */
.shadow-none{box-shadow:none !important}
.shadow-sm{box-shadow:var(--shadow-sm) !important}
.shadow{box-shadow:var(--shadow-md) !important}
.shadow-lg{box-shadow:var(--shadow-lg) !important}
.shadow-xl{box-shadow:var(--shadow-xl) !important}
/* ==============================================
OPACITY UTILITIES
============================================== */
.opacity-0{opacity:0 !important}
.opacity-25{opacity:0.25 !important}
.opacity-50{opacity:0.5 !important}
.opacity-75{opacity:0.75 !important}
.opacity-100{opacity:1 !important}
/* ==============================================
OVERFLOW UTILITIES
============================================== */
.overflow-auto{overflow:auto !important}
.overflow-hidden{overflow:hidden !important}
.overflow-visible{overflow:visible !important}
.overflow-scroll{overflow:scroll !important}
.overflow-x-auto{overflow-x:auto !important}
.overflow-x-hidden{overflow-x:hidden !important}
.overflow-x-visible{overflow-x:visible !important}
.overflow-x-scroll{overflow-x:scroll !important}
.overflow-y-auto{overflow-y:auto !important}
.overflow-y-hidden{overflow-y:hidden !important}
.overflow-y-visible{overflow-y:visible !important}
.overflow-y-scroll{overflow-y:scroll !important}
/* ==============================================
TRANSITION UTILITIES
============================================== */
.transition-none{transition:none !important}
.transition-all{transition:var(--transition-base) !important}
.transition-fast{transition:var(--transition-fast) !important}
.transition-slow{transition:var(--transition-slow) !important}
/* ==============================================
TRANSFORM UTILITIES
============================================== */
.transform{transform:translateZ(0) !important}
.transform-none{transform:none !important}
.scale-0{transform:scale(0) !important}
.scale-50{transform:scale(.5) !important}
.scale-75{transform:scale(.75) !important}
.scale-90{transform:scale(.9) !important}
.scale-95{transform:scale(.95) !important}
.scale-100{transform:scale(1) !important}
.scale-105{transform:scale(1.05) !important}
.scale-110{transform:scale(1.1) !important}
.scale-125{transform:scale(1.25) !important}
.scale-150{transform:scale(1.5) !important}
.rotate-0{transform:rotate(0deg) !important}
.rotate-45{transform:rotate(45deg) !important}
.rotate-90{transform:rotate(90deg) !important}
.rotate-180{transform:rotate(180deg) !important}
.translate-x-0{transform:translateX(0) !important}
.translate-x-1{transform:translateX(var(--spacing-1)) !important}
.translate-x-2{transform:translateX(var(--spacing-2)) !important}
.translate-x-4{transform:translateX(var(--spacing-4)) !important}
.translate-y-0{transform:translateY(0) !important}
.translate-y-1{transform:translateY(var(--spacing-1)) !important}
.translate-y-2{transform:translateY(var(--spacing-2)) !important}
.translate-y-4{transform:translateY(var(--spacing-4)) !important}
/* ==============================================
CURSOR UTILITIES
============================================== */
.cursor-auto{cursor:auto !important}
.cursor-default{cursor:default !important}
.cursor-pointer{cursor:pointer !important}
.cursor-wait{cursor:wait !important}
.cursor-text{cursor:text !important}
.cursor-move{cursor:move !important}
.cursor-help{cursor:help !important}
.cursor-not-allowed{cursor:not-allowed !important}
/* ==============================================
USER SELECT UTILITIES
============================================== */
.select-none{user-select:none !important}
.select-text{user-select:text !important}
.select-all{user-select:all !important}
.select-auto{user-select:auto !important}
/* ==============================================
POINTER EVENTS UTILITIES
============================================== */
.pointer-events-none{pointer-events:none !important}
.pointer-events-auto{pointer-events:auto !important}
/* ==============================================
ANIMATION UTILITIES
============================================== */
.animate-spin{
animation:spin 1s linear infinite;
}
.animate-ping{
animation:ping 1s cubic-bezier(0,0,0.2,1) infinite;
}
.animate-pulse{
animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
.animate-bounce{
animation:bounce 1s infinite;
}
.animate-fadeIn{
animation:fadeIn 0.5s ease-in-out;
}
.animate-fadeInUp{
animation:fadeInUp 0.6s ease-out;
}
.animate-slideInRight{
animation:slideInRight 0.5s ease-out;
}
@keyframes spin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@keyframes ping{
75%,100%{
transform:scale(2);
opacity:0;
}
}
@keyframes pulse{
0%,100%{opacity:1}
50%{opacity:.5}
}
@keyframes bounce{
0%,100%{
transform:translateY(-25%);
animation-timing-function:cubic-bezier(0.8,0,1,1);
}
50%{
transform:translateY(0);
animation-timing-function:cubic-bezier(0,0,0.2,1);
}
}
@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}
@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes slideInRight{
from{
opacity:0;
transform:translateX(30px);
}
to{
opacity:1;
transform:translateX(0);
}
}
/* ==============================================
RESPONSIVE UTILITIES
============================================== */
@media (min-width:640px){
.sm\:block{display:block !important}
.sm\:hidden{display:none !important}
.sm\:flex{display:flex !important}
.sm\:grid{display:grid !important}
.sm\:text-sm{font-size:var(--font-size-sm) !important}
.sm\:text-md{font-size:var(--font-size-md) !important}
.sm\:text-lg{font-size:var(--font-size-lg) !important}
.sm\:text-xl{font-size:var(--font-size-xl) !important}
.sm\:p-4{padding:var(--spacing-4) !important}
.sm\:p-6{padding:var(--spacing-6) !important}
.sm\:p-8{padding:var(--spacing-8) !important}
.sm\:m-4{margin:var(--spacing-4) !important}
.sm\:m-6{margin:var(--spacing-6) !important}
.sm\:m-8{margin:var(--spacing-8) !important}
}
@media (min-width:768px){
.md\:block{display:block !important}
.md\:hidden{display:none !important}
.md\:flex{display:flex !important}
.md\:grid{display:grid !important}
.md\:text-lg{font-size:var(--font-size-lg) !important}
.md\:text-xl{font-size:var(--font-size-xl) !important}
.md\:text-2xl{font-size:var(--font-size-2xl) !important}
.md\:text-3xl{font-size:var(--font-size-3xl) !important}
.md\:p-6{padding:var(--spacing-6) !important}
.md\:p-8{padding:var(--spacing-8) !important}
.md\:p-12{padding:var(--spacing-12) !important}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media (min-width:1024px){
.lg\:block{display:block !important}
.lg\:hidden{display:none !important}
.lg\:flex{display:flex !important}
.lg\:grid{display:grid !important}
.lg\:text-xl{font-size:var(--font-size-xl) !important}
.lg\:text-2xl{font-size:var(--font-size-2xl) !important}
.lg\:text-3xl{font-size:var(--font-size-3xl) !important}
.lg\:text-4xl{font-size:var(--font-size-4xl) !important}
.lg\:p-8{padding:var(--spacing-8) !important}
.lg\:p-12{padding:var(--spacing-12) !important}
.lg\:p-16{padding:var(--spacing-16) !important}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
}
@media (min-width:1280px){
.xl\:block{display:block !important}
.xl\:hidden{display:none !important}
.xl\:flex{display:flex !important}
.xl\:grid{display:grid !important}
.xl\:text-2xl{font-size:var(--font-size-2xl) !important}
.xl\:text-3xl{font-size:var(--font-size-3xl) !important}
.xl\:text-4xl{font-size:var(--font-size-4xl) !important}
.xl\:p-12{padding:var(--spacing-12) !important}
.xl\:p-16{padding:var(--spacing-16) !important}
.xl\:p-20{padding:var(--spacing-20) !important}
.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
}
/* ==============================================
LAZY LOADING UTILITIES
============================================== */
.lazy-load{
opacity:0;
transition:opacity 0.3s ease;
}
.lazy-load.loaded{
opacity:1;
}
.lazy-load:not(.loaded){
background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
background-size:200% 100%;
animation:loading-shimmer 1.5s infinite;
}
@keyframes loading-shimmer{
0%{background-position:-200% 0}
100%{background-position:200% 0}
}/*
==============================================
PAGE-SPECIFIC STYLES
==============================================
*/
/* ==============================================
CALCULATOR PAGES
============================================== */
.calculator-container{
max-width:800px;
margin:0 auto;
padding:var(--spacing-xl);
}
.calculator-form{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-xl);
margin-bottom:var(--spacing-xl);
}
.calculator-inputs{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--spacing-lg);
margin-bottom:var(--spacing-xl);
}
.calculator-result{
background:var(--gradient-primary);
border-radius:var(--radius-xl);
padding:var(--spacing-xl);
text-align:center;
color:var(--white);
margin-top:var(--spacing-xl);
}
.calculator-result h3{
font-size:var(--font-size-2xl);
margin-bottom:var(--spacing-md);
}
.calculator-result .result-value{
font-size:var(--font-size-4xl);
font-weight:var(--font-weight-bold);
margin-bottom:var(--spacing-sm);
}
.calculator-result .result-unit{
font-size:var(--font-size-lg);
opacity:0.9;
}
.calculator-tips{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--spacing-lg);
margin-top:var(--spacing-2xl);
}
.tip-card{
background:var(--glass-white);
border:1px solid var(--glass-border);
border-radius:var(--radius-xl);
padding:var(--spacing-lg);
text-align:center;
}
.tip-icon{
font-size:var(--font-size-3xl);
color:var(--primary);
margin-bottom:var(--spacing-md);
}
/* ==============================================
COURSE PAGES
============================================== */
.course-layout{
display:grid;
grid-template-columns:300px 1fr;
gap:var(--spacing-2xl);
max-width:1400px;
margin:0 auto;
padding:var(--spacing-2xl);
}
.course-nav{
position:sticky;
top:calc(var(--navbar-height) + var(--spacing-xl));
height:fit-content;
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-xl);
padding:var(--spacing-xl);
}
.course-nav h3{
color:var(--white);
font-size:var(--font-size-lg);
margin-bottom:var(--spacing-lg);
padding-bottom:var(--spacing-md);
border-bottom:1px solid var(--glass-border);
}
.course-nav-list{
list-style:none;
margin:0;
padding:0;
}
.course-nav-item{
margin-bottom:var(--spacing-2);
}
.course-nav-link{
display:flex;
align-items:center;
gap:var(--spacing-2);
padding:var(--spacing-3) var(--spacing-4);
color:var(--text-light);
text-decoration:none;
border-radius:var(--radius-lg);
transition:var(--transition-fast);
font-size:var(--font-size-sm);
}
.course-nav-link:hover,
.course-nav-link.active{
background:var(--glass-white-light);
color:var(--white);
}
.course-nav-link.completed{
color:var(--primary);
}
.course-nav-link.completed::before{
content:'✓';
margin-right:var(--spacing-1);
color:var(--primary);
}
.course-content{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-2xl);
}
.course-header{
text-align:center;
margin-bottom:var(--spacing-2xl);
padding-bottom:var(--spacing-xl);
border-bottom:1px solid var(--glass-border);
}
.course-progress{
margin-bottom:var(--spacing-xl);
}
.progress-bar{
width:100%;
height:8px;
background:var(--glass-white-light);
border-radius:var(--radius-full);
overflow:hidden;
margin-bottom:var(--spacing-md);
}
.progress-fill{
height:100%;
background:var(--gradient-primary);
transition:width 0.3s ease;
}
.progress-text{
text-align:center;
color:var(--text-light);
font-size:var(--font-size-sm);
}
.chapter{
margin-bottom:var(--spacing-3xl);
padding-bottom:var(--spacing-2xl);
border-bottom:1px solid var(--glass-border);
}
.chapter:last-child{
border-bottom:none;
margin-bottom:0;
}
.chapter h2{
color:var(--primary);
margin-bottom:var(--spacing-lg);
}
/* ==============================================
PROGRAM PAGES
============================================== */
.program-overview{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--spacing-xl);
margin-bottom:var(--spacing-2xl);
}
.program-details{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-xl);
padding:var(--spacing-xl);
}
.program-details h3{
color:var(--primary);
margin-bottom:var(--spacing-lg);
}
.schedule-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:var(--spacing-md);
margin:var(--spacing-xl) 0;
}
.schedule-day{
background:var(--glass-white);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
padding:var(--spacing-md);
text-align:center;
min-height:120px;
display:flex;
flex-direction:column;
justify-content:center;
}
.schedule-day.training{
border-color:var(--primary);
background:var(--primary-100);
}
.schedule-day.rest{
border-color:var(--text-muted);
}
.schedule-day h4{
font-size:var(--font-size-sm);
margin-bottom:var(--spacing-sm);
text-transform:uppercase;
letter-spacing:0.05em;
}
.workout-table{
background:var(--glass-white);
border-radius:var(--radius-xl);
overflow:hidden;
border:1px solid var(--glass-border);
margin:var(--spacing-xl) 0;
}
.workout-table table{
width:100%;
border-collapse:collapse;
margin:0;
background:transparent;
border:none;
}
.workout-table th{
background:var(--glass-white-strong);
color:var(--white);
font-weight:var(--font-weight-semibold);
padding:var(--spacing-lg);
text-align:left;
border-bottom:1px solid var(--glass-border);
font-size:var(--font-size-sm);
text-transform:uppercase;
letter-spacing:0.05em;
}
.workout-table td{
padding:var(--spacing-lg);
border-bottom:1px solid var(--glass-border);
color:var(--text-secondary);
}
.workout-table tr:last-child td{
border-bottom:none;
}
.workout-table .exercise-name{
font-weight:var(--font-weight-semibold);
color:var(--white);
}
.workout-notes{
background:var(--glass-white-light);
border-radius:var(--radius-lg);
padding:var(--spacing-lg);
margin:var(--spacing-xl) 0;
}
.workout-notes h4{
color:var(--primary);
margin-bottom:var(--spacing-md);
}
.workout-notes ul{
margin-left:var(--spacing-4);
}
.workout-notes li{
color:var(--text-muted);
font-style:italic;
}
/* ==============================================
WORKOUT LOGGER SPECIFIC
============================================== */
.logger-container{
max-width:1200px;
margin:0 auto;
padding:var(--spacing-xl);
}
.quick-start-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:var(--spacing-lg);
margin-bottom:var(--spacing-2xl);
}
.quick-start-card{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-xl);
padding:var(--spacing-xl);
text-align:center;
transition:var(--transition-base);
cursor:pointer;
}
.quick-start-card:hover{
background:var(--glass-white-strong);
transform:translateY(-4px);
box-shadow:var(--shadow-xl);
}
.quick-start-icon{
font-size:var(--font-size-4xl);
color:var(--primary);
margin-bottom:var(--spacing-lg);
}
.workout-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--spacing-lg);
margin-bottom:var(--spacing-xl);
}
.stat-card{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
padding:var(--spacing-lg);
text-align:center;
}
.stat-value{
font-size:var(--font-size-2xl);
font-weight:var(--font-weight-bold);
color:var(--primary);
margin-bottom:var(--spacing-sm);
}
.stat-label{
font-size:var(--font-size-sm);
color:var(--text-light);
text-transform:uppercase;
letter-spacing:0.05em;
}
.exercise-list{
display:flex;
flex-direction:column;
gap:var(--spacing-md);
}
.exercise-item{
background:var(--glass-white);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
padding:var(--spacing-lg);
display:flex;
justify-content:space-between;
align-items:center;
}
.exercise-name{
font-weight:var(--font-weight-semibold);
color:var(--white);
}
.exercise-details{
color:var(--text-light);
font-size:var(--font-size-sm);
}
/* ==============================================
PROGRAM HEADER
============================================== */
.program-header{
text-align:center;
margin-bottom:var(--spacing-2xl);
}
.program-meta{
display:flex;
justify-content:center;
gap:var(--spacing-lg);
margin-top:var(--spacing-lg);
}
.meta-item{
display:flex;
align-items:center;
gap:var(--spacing-2);
color:var(--text-light);
font-size:var(--font-size-sm);
}
.meta-icon{
color:var(--primary);
}
/* ==============================================
ARTICLE PAGES
============================================== */
.article-container{
max-width:800px;
margin:0 auto;
padding:var(--spacing-xl);
}
.article-header{
text-align:center;
margin-bottom:var(--spacing-2xl);
padding-bottom:var(--spacing-xl);
border-bottom:1px solid var(--glass-border);
}
.article-meta{
display:flex;
justify-content:center;
gap:var(--spacing-lg);
margin-top:var(--spacing-lg);
color:var(--text-light);
font-size:var(--font-size-sm);
}
.article-content{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-2xl);
line-height:var(--line-height-relaxed);
}
.article-content h2,
.article-content h3,
.article-content h4{
color:var(--primary);
margin-top:var(--spacing-xl);
margin-bottom:var(--spacing-lg);
}
.article-content p{
margin-bottom:var(--spacing-lg);
}
.article-content ul,
.article-content ol{
margin-bottom:var(--spacing-lg);
margin-left:var(--spacing-6);
}
.article-content li{
margin-bottom:var(--spacing-2);
}
.article-sidebar{
background:var(--glass-white);
border:1px solid var(--glass-border);
border-radius:var(--radius-xl);
padding:var(--spacing-lg);
margin-top:var(--spacing-xl);
}
.article-toc{
margin-bottom:var(--spacing-lg);
}
.article-toc h4{
color:var(--primary);
margin-bottom:var(--spacing-md);
font-size:var(--font-size-md);
}
.article-toc ul{
list-style:none;
margin:0;
padding:0;
}
.article-toc li{
margin-bottom:var(--spacing-1);
}
.article-toc a{
color:var(--text-light);
text-decoration:none;
font-size:var(--font-size-sm);
padding:var(--spacing-1) 0;
display:block;
transition:var(--transition-fast);
}
.article-toc a:hover{
color:var(--primary);
}
/* ==============================================
HOME PAGE SPECIFIC
============================================== */
.hero-home{
background:var(--gradient-hero);
text-align:center;
padding:calc(var(--navbar-height) + var(--spacing-4xl)) 0 var(--spacing-4xl);
min-height:100vh;
display:flex;
align-items:center;
}
.hero-content{
max-width:800px;
margin:0 auto;
}
.hero-title{
font-size:clamp(var(--font-size-3xl),5vw,var(--font-size-4xl));
font-weight:var(--font-weight-extrabold);
margin-bottom:var(--spacing-lg);
background:var(--gradient-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hero-subtitle{
font-size:var(--font-size-xl);
color:var(--text-light);
margin-bottom:var(--spacing-2xl);
line-height:var(--line-height-relaxed);
}
.hero-cta{
display:flex;
gap:var(--spacing-lg);
justify-content:center;
margin-top:var(--spacing-2xl);
}
.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--spacing-xl);
margin:var(--spacing-4xl) 0;
}
.feature-card{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-xl);
text-align:center;
transition:var(--transition-base);
}
.feature-card:hover{
background:var(--glass-white-strong);
transform:translateY(-8px);
box-shadow:var(--shadow-xl);
}
.feature-icon{
font-size:var(--font-size-4xl);
color:var(--primary);
margin-bottom:var(--spacing-lg);
}
.feature-title{
color:var(--white);
font-size:var(--font-size-xl);
margin-bottom:var(--spacing-md);
}
.feature-description{
color:var(--text-secondary);
line-height:var(--line-height-relaxed);
}
/* ==============================================
CONTACT PAGE
============================================== */
.contact-container{
max-width:800px;
margin:0 auto;
padding:var(--spacing-xl);
}
.contact-form{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border:1px solid var(--glass-border);
border-radius:var(--radius-2xl);
padding:var(--spacing-2xl);
}
.contact-info{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--spacing-xl);
margin-bottom:var(--spacing-2xl);
}
.contact-item{
display:flex;
align-items:center;
gap:var(--spacing-md);
padding:var(--spacing-lg);
background:var(--glass-white-light);
border-radius:var(--radius-lg);
}
.contact-icon{
font-size:var(--font-size-xl);
color:var(--primary);
}
.contact-details h4{
color:var(--white);
margin-bottom:var(--spacing-sm);
}
.contact-details p{
color:var(--text-light);
margin:0;
}
/* ==============================================
FOOTER
============================================== */
.footer{
background:var(--glass-white);
backdrop-filter:var(--glass-backdrop);
border-top:1px solid var(--glass-border);
margin-top:var(--spacing-4xl);
padding:var(--spacing-2xl) 0;
}
.footer-content{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--spacing-xl);
margin-bottom:var(--spacing-xl);
}
.footer-section h4{
color:var(--white);
margin-bottom:var(--spacing-lg);
}
.footer-links{
list-style:none;
margin:0;
padding:0;
}
.footer-links li{
margin-bottom:var(--spacing-2);
}
.footer-links a{
color:var(--text-light);
text-decoration:none;
transition:var(--transition-fast);
}
.footer-links a:hover{
color:var(--primary);
}
.footer-bottom{
text-align:center;
padding-top:var(--spacing-xl);
border-top:1px solid var(--glass-border);
color:var(--text-muted);
font-size:var(--font-size-sm);
}
/* ==============================================
RESPONSIVE ADJUSTMENTS
============================================== */
@media (max-width:1024px){
.course-layout{
grid-template-columns:1fr;
gap:var(--spacing-xl);
padding:var(--spacing-lg);
}
.course-nav{
position:relative;
top:auto;
margin-bottom:var(--spacing-xl);
}
.sidebar-layout{
grid-template-columns:1fr;
}
.schedule-grid{
grid-template-columns:1fr;
}
.program-overview{
grid-template-columns:1fr;
}
}
@media (max-width:768px){
.calculator-container,
.article-container,
.contact-container,
.logger-container{
padding:var(--spacing-lg);
}
.calculator-inputs{
grid-template-columns:1fr;
}
.hero-cta{
flex-direction:column;
align-items:center;
}
.feature-grid{
grid-template-columns:1fr;
gap:var(--spacing-lg);
}
.contact-info{
grid-template-columns:1fr;
}
.footer-content{
grid-template-columns:1fr;
text-align:center;
}
.workout-stats{
grid-template-columns:repeat(2,1fr);
}
.quick-start-grid{
grid-template-columns:1fr;
}
.workout-table{
font-size:var(--font-size-sm);
}
.workout-table th,
.workout-table td{
padding:var(--spacing-md);
}
}
@media (max-width:480px){
.calculator-container,
.article-container,
.contact-container,
.logger-container{
padding:var(--spacing-md);
}
.calculator-form,
.article-content,
.contact-form,
.course-content{
padding:var(--spacing-lg);
}
.hero-title{
font-size:var(--font-size-2xl);
}
.hero-subtitle{
font-size:var(--font-size-lg);
}
.workout-stats{
grid-template-columns:1fr;
}
.program-meta{
flex-direction:column;
gap:var(--spacing-md);
}
.article-meta{
flex-direction:column;
gap:var(--spacing-sm);
}
}
/* ==============================================
PRINT OPTIMIZATIONS
============================================== */
@media print{
.calculator-form,
.article-content,
.course-content{
background:white !important;
border:1px solid #ccc !important;
box-shadow:none !important;
backdrop-filter:none !important;
}
.hero-home{
background:white !important;
color:black !important;
min-height:auto !important;
padding:var(--spacing-xl) 0 !important;
}
.feature-card{
break-inside:avoid;
background:white !important;
border:1px solid #ccc !important;
}
.workout-table{
background:white !important;
border:1px solid #ccc !important;
}
.workout-table th{
background:#f5f5f5 !important;
color:black !important;
}
}
/* ==============================================
CUSTOM OVERRIDES (from master-styles.css)
============================================== */
.body-type-distribution{
max-width:400px;
margin:0 auto;
}
.distribution-item{
margin-bottom:1.5rem;
}
.distribution-bar{
height:40px;
background:rgba(255,255,255,0.1);
border-radius:20px;
overflow:hidden;
margin-bottom:0.5rem;
}
.distribution-fill{
height:100%;
border-radius:20px;
transition:width 0.8s ease;
}
.distribution-fill.ecto{
background:linear-gradient(90deg,#3b82f6,#60a5fa);
}
.distribution-fill.meso{
background:linear-gradient(90deg,#10b981,#34d399);
}
.distribution-fill.endo{
background:linear-gradient(90deg,#f59e0b,#fbbf24);
}
.distribution-label{
display:flex;
justify-content:space-between;
align-items:center;
}
.distribution-label span{
color:var(--text-secondary);
font-weight:500;
}
.distribution-label strong{
color:var(--text-primary);
font-size:1.125rem;
font-weight:700;
}
.card.active{
border-color:var(--primary);
background:var(--primary-100);
}
.card.active .badge{
background:var(--primary);
color:var(--white);
}
.card.active h4{
color:var(--primary);
}
/* ==============================================
PRIORITY 1 - MISSING PAGE-LEVEL CLASSES (101% Quality)
============================================== */
.calculator-page{
padding-top:var(--navbar-height);
min-height:100vh;
}
.program-page{
padding-top:var(--navbar-height);
}
.article-page{
padding-top:var(--navbar-height);
font-size:var(--font-size-lg);
line-height:1.8;
}
.article-page h1,
.article-page h2,
.article-page h3{
color:var(--white);
}
.article-page p{
color:var(--text-secondary);
margin-bottom:var(--spacing-5);
}
.about-page{
padding-top:var(--navbar-height);
}
.contact-page{
padding-top:var(--navbar-height);
}
.disclaimer-page{
padding-top:var(--navbar-height);
padding-bottom:var(--spacing-2xl);
}
.offline-page{
background:var(--navy);
color:var(--white);
text-align:center;
padding:var(--spacing-4xl) var(--spacing-6);
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
.offline-page h1{
color:var(--white);
}
.offline-page p{
color:var(--gray-300);
}
/* ==============================================
AD CONTAINER (Priority 2)
============================================== */
.ad-container{
background:var(--gray-100);
border:2px dashed var(--gray-300);
border-radius:var(--radius-xl);
padding:var(--spacing-6);
margin:var(--spacing-6) 0;
text-align:center;
color:var(--text-muted);
font-size:var(--font-size-sm);
min-height:200px;
display:flex;
align-items:center;
justify-content:center;
}/* ========================================
ACCESSIBILITY STYLES - WCAG 2.1 AA Compliance
ttrening.com - Universal Design Principles
======================================== */
/* ========================================
SCREEN READER ONLY CONTENT
======================================== */
.sr-only{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
.sr-only:focus{
position:static !important;
width:auto !important;
height:auto !important;
padding:inherit !important;
margin:inherit !important;
overflow:visible !important;
clip:auto !important;
white-space:normal !important;
}
/* ========================================
SKIP NAVIGATION LINKS
======================================== */
.skip-to-content{
position:absolute;
top:-40px;
left:6px;
background:var(--primary,#10b981);
color:var(--white,#ffffff);
padding:8px 16px;
text-decoration:none;
border-radius:4px;
z-index:10000;
font-weight:600;
font-size:14px;
transition:top 0.3s ease;
border:2px solid transparent;
}
.skip-to-content:focus{
top:6px;
outline:2px solid var(--white,#ffffff);
outline-offset:2px;
}
.skip-to-content:hover{
background:var(--primary-dark,#059669);
text-decoration:underline;
}
/* ========================================
FOCUS MANAGEMENT
======================================== */
*:focus{
outline:2px solid var(--primary,#10b981);
outline-offset:2px;
}
button:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus{
outline:2px solid var(--primary,#10b981);
outline-offset:2px;
box-shadow:0 0 0 4px rgba(16,185,129,0.2);
}
a:focus{
outline:2px solid var(--primary,#10b981);
outline-offset:2px;
background:rgba(16,185,129,0.1);
border-radius:2px;
}
*:focus:not(:focus-visible){
outline:none;
box-shadow:none;
}
*:focus-visible{
outline:2px solid var(--primary,#10b981);
outline-offset:2px;
}
/* ========================================
HIGH CONTRAST MODE SUPPORT
======================================== */
@media (prefers-contrast:high){
.card,
.calculator-card,
.feature-card,
.article-card{
border:2px solid var(--text-primary,#ffffff);
background:var(--bg-primary,#111827);
}
.btn{
border:2px solid currentColor;
font-weight:700;
}
.navbar{
border-bottom:2px solid var(--text-primary,#ffffff);
}
.text-muted,
.text-light{
color:var(--text-secondary,#d1d5db);
}
}
/* ========================================
REDUCED MOTION PREFERENCES
======================================== */
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
.animate-fadeInUp,
.animate-fadeIn,
.animate-slideInRight,
.animate-bounce,
.animate-pulse,
.animate-spin{
animation:none !important;
}
.btn:hover,
.card:hover,
.calculator-card:hover{
transform:none !important;
}
}
/* ========================================
FORM ACCESSIBILITY
======================================== */
.form-group{
margin-bottom:var(--spacing-lg,1.5rem);
}
.form-error{
color:var(--danger,#ef4444);
font-size:var(--font-size-sm,0.875rem);
margin-top:var(--spacing-xs,0.25rem);
display:none;
}
.form-error[role="alert"]{
display:block;
}
.form-help{
color:var(--text-muted,#6b7280);
font-size:var(--font-size-sm,0.875rem);
margin-top:var(--spacing-xs,0.25rem);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
border-color:var(--danger,#ef4444);
box-shadow:0 0 0 2px rgba(239,68,68,0.2);
}
input[aria-invalid="false"]:not(:placeholder-shown),
select[aria-invalid="false"],
textarea[aria-invalid="false"]:not(:placeholder-shown){
border-color:var(--success,#10b981);
}
.required::after{
content:" *";
color:var(--danger,#ef4444);
font-weight:bold;
}
/* ========================================
INTERACTIVE ELEMENT STATES
======================================== */
button:hover:not(:disabled),
.btn:hover:not(:disabled){
transform:translateY(-2px);
box-shadow:var(--shadow-lg,0 10px 15px -3px rgba(0,0,0,0.1));
}
button:active:not(:disabled),
.btn:active:not(:disabled){
transform:translateY(0);
}
button:disabled,
.btn:disabled{
opacity:0.6;
cursor:not-allowed;
transform:none !important;
}
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"]{
min-height:44px;
min-width:44px;
}
/* ========================================
MOBILE ACCESSIBILITY
======================================== */
@media (max-width:768px){
.navbar-link,
.footer-links a,
.calculator-card,
.feature-card{
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
padding:12px;
}
body{
font-size:16px;
}
input,
select,
textarea{
font-size:16px;
min-height:44px;
}
}
/* ========================================
PROGRESS INDICATORS
======================================== */
.progress-bar{
background:var(--primary,#10b981);
height:100%;
transition:width 0.3s ease;
border-radius:inherit;
}
[role="progressbar"]{
background:var(--gray-200,#e5e7eb);
border-radius:var(--radius-md,0.375rem);
height:8px;
overflow:hidden;
position:relative;
}
[role="progressbar"]::after{
content:attr(aria-valuenow) "% complete";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:0.75rem;
font-weight:600;
color:var(--text-primary,#ffffff);
white-space:nowrap;
}
/* ========================================
ALERT AND STATUS MESSAGES
======================================== */
[role="alert"],
[role="status"]{
padding:var(--spacing-md,1rem);
border-radius:var(--radius-md,0.375rem);
margin:var(--spacing-md,1rem) 0;
font-weight:500;
}
.error-message{
background:rgba(239,68,68,0.1);
border:1px solid rgba(239,68,68,0.3);
color:var(--danger,#ef4444);
}
.success-message{
background:rgba(16,185,129,0.1);
border:1px solid rgba(16,185,129,0.3);
color:var(--success,#10b981);
}
.info-message{
background:rgba(59,130,246,0.1);
border:1px solid rgba(59,130,246,0.3);
color:var(--info,#3b82f6);
}
.warning-message{
background:rgba(245,158,11,0.1);
border:1px solid rgba(245,158,11,0.3);
color:var(--warning,#f59e0b);
}
/* ========================================
MOBILE MENU ACCESSIBILITY
======================================== */
.mobile-menu-toggle[aria-expanded="true"] + .navbar-menu{
display:block;
}
.navbar-menu[aria-hidden="true"]{
display:none;
}
.mobile-menu-toggle{
border:none;
background:transparent;
color:var(--text-primary,#ffffff);
font-size:1.25rem;
padding:8px;
cursor:pointer;
border-radius:4px;
}
.mobile-menu-toggle:focus{
background:rgba(255,255,255,0.1);
}
/* ========================================
TABLE ACCESSIBILITY
======================================== */
table{
border-collapse:collapse;
width:100%;
}
th,td{
text-align:left;
padding:var(--spacing-md,1rem);
border-bottom:1px solid var(--border-light,rgba(255,255,255,0.1));
}
th{
font-weight:var(--font-weight-semibold,600);
background:var(--gray-50,#f9fafb);
color:var(--text-dark,#111827);
}
caption{
text-align:left;
font-weight:var(--font-weight-semibold,600);
margin-bottom:var(--spacing-sm,0.5rem);
font-size:1.125rem;
}
.table-container{
overflow-x:auto;
margin:var(--spacing-lg,1.5rem) 0;
}
@media (max-width:768px){
.table-container{
font-size:0.875rem;
}
th,td{
padding:var(--spacing-sm,0.5rem);
}
}
/* ========================================
BREADCRUMB ACCESSIBILITY
======================================== */
.breadcrumb{
display:flex;
align-items:center;
gap:var(--spacing-sm,0.5rem);
margin:var(--spacing-lg,1.5rem) 0;
font-size:0.875rem;
}
.breadcrumb a{
color:var(--text-muted,#6b7280);
text-decoration:none;
}
.breadcrumb a:hover{
color:var(--text-primary,#ffffff);
text-decoration:underline;
}
.breadcrumb [aria-current="page"]{
color:var(--text-primary,#ffffff);
font-weight:500;
}
/* ========================================
PRINT ACCESSIBILITY
======================================== */
@media print{
.skip-to-content,
.mobile-menu-toggle,
.back-to-top,
[role="banner"],
[role="contentinfo"]{
display:none !important;
}
a::after{
content:" (" attr(href) ")";
font-size:0.8em;
color:#666;
}
a[href^="#"]::after,
a[href^="javascript:"]::after{
content:"";
}
}