/* ==========================================================
   TIFFINCAFE.COM
   LAUNCH EDITION 2.0
   THE THIRD TEMPER
   ========================================================== */

:root{

--gold:#D4AF37;

--lightgold:#F6E7A1;

--white:#ffffff;

--black:#111111;

--overlay:rgba(0,0,0,.48);

--glass:rgba(255,255,255,.08);

--radius:22px;

--shadow:0 18px 45px rgba(0,0,0,.45);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Segoe UI",Arial,sans-serif;

background:#111;

background-image:url("images/background.png");

background-repeat:no-repeat;

background-position:center top;

background-size:82% auto;

background-color:#111;

background-attachment:scroll;

color:#ffffff;

overflow-x:hidden;

line-height:1.6;

}

/* =========================
   MAIN OVERLAY
   ========================= */

.overlay{

width:100%;

min-height:100vh;

padding:40px 25px 60px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

background:linear-gradient(

180deg,

rgba(0,0,0,.35),

rgba(0,0,0,.58),

rgba(0,0,0,.70)

);

backdrop-filter:blur(2px);

}

/* =========================
LOGO
========================= */

.logo{

width:130px;

height:auto;

margin-bottom:20px;

filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));

transition:.35s;

}

.logo:hover{

transform:scale(1.04);

}

/* ==========================================================
   TITLES
   ========================================================== */

h1{

font-size:54px;

font-weight:700;

color:var(--gold);

letter-spacing:1px;

margin-bottom:8px;

text-shadow:0 3px 12px rgba(0,0,0,.45);

}

h2{

font-size:28px;

font-weight:300;

letter-spacing:4px;

margin-bottom:18px;

color:#ffffff;

}

.launch{

font-size:20px;

font-weight:600;

color:var(--lightgold);

margin-bottom:35px;

}

/* ==========================================================
   HERO IMAGE
   ========================================================== */

.hero-image{

width:100%;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:35px;

}

.hero-image img{

width:40%;

max-width:420px;

height:auto;

display:block;

border-radius:22px;

background:#ffffff;

padding:10px;

box-shadow:

0 12px 30px rgba(0,0,0,.45),

0 0 25px rgba(212,175,55,.20);

transition:.35s ease;

}

.hero-image img:hover{

transform:translateY(-4px) scale(1.02);

box-shadow:

0 20px 45px rgba(0,0,0,.55),

0 0 40px rgba(212,175,55,.35);

}

/* ==========================================================
   LIVE COUNTDOWN
   ========================================================== */

#countdown{

display:inline-block;

padding:18px 35px;

margin:18px 0 25px;

font-size:38px;

font-weight:700;

color:var(--gold);

background:var(--glass);

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.15);

border-radius:18px;

box-shadow:var(--shadow);

letter-spacing:1px;

}

/* ==========================================================
   TITLES
   ========================================================== */

h1{

font-size:54px;

font-weight:700;

color:var(--gold);

letter-spacing:1px;

margin-bottom:8px;

text-shadow:0 3px 12px rgba(0,0,0,.45);

}

h2{

font-size:28px;

font-weight:300;

letter-spacing:4px;

margin-bottom:18px;

color:#ffffff;

}

.launch{

font-size:20px;

font-weight:600;

color:var(--lightgold);

margin-bottom:35px;

}

/* ==========================================================
   HERO IMAGE
   ========================================================== */

.hero-image{

width:100%;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:35px;

}

.hero-image img{

width:40%;

max-width:420px;

height:auto;

display:block;

border-radius:22px;

background:#ffffff;

padding:10px;

box-shadow:

0 12px 30px rgba(0,0,0,.45),

0 0 25px rgba(212,175,55,.20);

transition:.35s ease;

}

.hero-image img:hover{

transform:translateY(-4px) scale(1.02);

box-shadow:

0 20px 45px rgba(0,0,0,.55),

0 0 40px rgba(212,175,55,.35);

}

/* ==========================================================
   LIVE COUNTDOWN
   ========================================================== */

#countdown{

display:inline-block;

padding:18px 35px;

margin:18px 0 25px;

font-size:38px;

font-weight:700;

color:var(--gold);

background:var(--glass);

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.15);

border-radius:18px;

box-shadow:var(--shadow);

letter-spacing:1px;

}

/* ==========================================================
   RESPONSIVE DESIGN
   ========================================================== */

@media (max-width:1200px){

.hero-image img{

width:50%;

max-width:460px;

}

}

@media (max-width:900px){

body{

background-size:cover;

background-position:center top;

}

.logo{

width:105px;

}

h1{

font-size:40px;

}

h2{

font-size:22px;

letter-spacing:2px;

}

.launch{

font-size:18px;

}

.hero-image img{

width:80%;

max-width:360px;

}

#countdown{

font-size:26px;

padding:14px 20px;

}

.message{

font-size:18px;

padding:0 10px;

}

.tagline{

font-size:16px;

letter-spacing:1px;

}

.footer{

width:95%;

padding:20px;

}

.footer p{

font-size:15px;

}

.contact-box{

width:95%;

padding:25px;

}

}

@media (max-width:600px){

.overlay{

padding:25px 15px 40px;

}

.logo{

width:85px;

}

h1{

font-size:30px;

}

h2{

font-size:18px;

}

.launch{

font-size:16px;

}

.hero-image img{

width:94%;

}

#countdown{

font-size:20px;

line-height:1.5;

}

.message{

font-size:16px;

}

.tagline{

font-size:14px;

}

}

/* ==========================================================
   ANIMATIONS
   ========================================================== */

.logo,
.hero-image img,
#countdown{

animation:fadeUp .9s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

background:#D4AF37;

color:#111111;

}

/* ==========================================================
   END OF FILE
   TIFFINCAFE.COM
   Powered by THE THIRD TEMPER
   ========================================================== */