/* styles.css - Under Construction / Coming Soon page README: - Palette & typography variables at the top. Modify --brand-slate, --accent-yellow, etc. - Breakpoints: mobile-first; large layout starts at --break-lg (used in media queries). - To enable dark mode by default, add class "theme-dark" to . */ :root{ /* Color palette */ --brand-slate: #202b2f; --brand-slate-2: #2b3336; --accent-yellow: #ffd400; --muted: #9aa2a6; --white: #ffffff; --glass-bg: rgba(255,255,255,0.04); /* Spacing & sizes */ --space-xs: 6px; --space-sm: 12px; --space-md: 18px; --space-lg: 28px; --space-xl: 40px; --container: 1100px; /* Typography */ --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --fs-hero: 1.6rem; --fs-lead: 1rem; /* Progress */ --progress-height: 12px; /* Breakpoints */ --break-md: 720px; --break-lg: 980px; } /* Dark theme overrides */ html.theme-dark{ --brand-slate: #0f1516; --brand-slate-2: #1b2224; --glass-bg: rgba(255,255,255,0.03); color-scheme: dark; } /* Basic resets */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:var(--font-sans); background:linear-gradient(180deg,var(--brand-slate) 0%,#121617 100%); color:var(--white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45; font-size:16px; padding-bottom:60px; } /* Utility */ .container{ width:calc(100% - 32px); max-width:var(--container); margin:0 auto; } /* Header */ .site-header{padding:var(--space-sm) 0} .header__inner{display:flex;align-items:center;justify-content:space-between} .brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none} .brand__logo{flex:0 0 auto} .brand__name{font-weight:700;font-size:1rem;letter-spacing:0.2px} .header__controls{display:flex;gap:8px;align-items:center} /* Buttons */ .btn{font-family:var(--font-sans);border:0;padding:10px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px} .btn:focus{outline:3px solid rgba(255,212,0,0.24);outline-offset:2px} .btn--primary{background:var(--accent-yellow);color:#111;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,0.25)} .btn--ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.04)} .btn--accent{background:transparent;border:2px solid var(--accent-yellow);color:var(--accent-yellow);padding:8px 12px;border-radius:10px} /* Visually-hidden for accessibility */ .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} /* Hero */ .main__inner{padding:var(--space-lg) 0} .hero{display:grid;grid-template-columns:1fr;gap:24px;align-items:center} .hero__content{max-width:680px} .hero__title{font-size:calc(var(--fs-hero) + 0.6rem);margin:0 0 var(--space-sm);line-height:1.05} .hero__lead{color:var(--muted);margin:0 0 var(--space-md)} .hero__ctas{display:flex;gap:12px;align-items:center;margin-top:8px} /* Status area */ .status{margin-top:20px;display:flex;flex-direction:column;gap:14px} .progress-wrap{display:flex;flex-direction:column;gap:8px} .progress-label{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:0.95rem} .progress{background:rgba(255,255,255,0.04);height:var(--progress-height);border-radius:999px;overflow:hidden;position:relative} .progress__bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-yellow),#ffef8b);transition:width 1.8s cubic-bezier(.22,.9,.34,1);box-shadow:0 4px 10px rgba(0,0,0,0.25) inset} #progressPercent{font-weight:600;color:var(--white)} /* Countdown */ .countdown{display:flex;flex-direction:column;gap:10px} .countdown__grid{display:flex;gap:10px;margin-top:4px} .countdown__item{background:var(--glass-bg);padding:12px;border-radius:10px;min-width:68px;text-align:center;backdrop-filter: blur(6px)} .countdown__value{display:block;font-weight:700;font-size:1.05rem} .countdown__label{color:var(--muted);font-size:0.75rem} /* Hero visual */ .hero__visual{width:100%;height:220px;border-radius:14px;overflow:hidden;display:block;align-self:stretch;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));box-shadow: 0 12px 36px rgba(2,6,8,0.6);} /* Highlights grid */ .highlights__grid{display:grid;grid-template-columns:1fr;gap:12px;margin:var(--space-lg) 0 0;padding:0;list-style:none} .card{padding:16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 6px 14px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.02)} .card__title{margin:0 0 6px;font-size:1.05rem} .card__desc{margin:0 0 10px;color:var(--muted)} .card__link{text-decoration:none;color:var(--accent-yellow);font-weight:600} /* Signup form */ .signup{margin:var(--space-xl) 0;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:block} .form__row{display:flex;gap:8px} .input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--white);min-width:0} .input:focus{outline:3px solid rgba(255,212,0,0.12);outline-offset:2px} .form__meta{margin-top:10px;display:flex;justify-content:space-between;align-items:center} .micro{color:var(--muted);font-size:0.85rem} .form__msg{font-size:0.95rem} /* Contact */ .contact{margin:var(--space-lg) 0;padding-top:12px} .contact__inner{display:flex;flex-direction:column;gap:12px} .contact__card{padding:12px;border-radius:10px;background:rgba(0,0,0,0.06)} .contact__map img{width:320px;max-width:100%;height:auto;border-radius:8px;border:1px solid rgba(255,255,255,0.02)} .contact__line{margin:6px 0} .social{display:flex;gap:12px;margin-top:12px} .social__link{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.02)} .social__link:focus{outline:3px solid rgba(255,212,0,0.12)} /* Footer */ .site-footer{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5));padding:12px 0;backdrop-filter:blur(4px)} .footer__inner{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:0.9rem} .footer__link{text-decoration:none;color:var(--muted);margin-left:12px} /* Responsive layout adjustments */ @media (min-width: 720px){ .hero{grid-template-columns:1fr 360px} .hero__visual{height:260px} .highlights__grid{grid-template-columns:repeat(3,1fr)} .contact__inner{flex-direction:row;align-items:center;justify-content:space-between} } /* Larger screens */ @media (min-width: 980px){ body{font-size:17px} .hero__title{font-size:2.2rem} .hero__visual{height:320px} } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .progress__bar, .hero__visual svg * { animation: none !important; transition: none !important; } svg { transform: none !important; } } /* Focus visible for keyboard users */ :focus-visible{outline:3px solid rgba(255,212,0,0.16);outline-offset:2px}