/* Add custom CSS styles below */ /* Classic Luxurious CSS for a Car Care Shop Filename: classic-luxury-carcare.css Notes: Serif headings + clean sans body. Rich dark palette with gold accents. Usage: link this CSS in your HTML or import into your main stylesheet. */ :root{ /* Palette */ --bg:#0f1315; /* deep charcoal */ --panel:#121617; /* slightly lighter */ --cream:#efe6d8; /* warm cream */ --gold:#caa453; /* classic gold */ --gold-2:#d4b86a; --accent:#2a6b5b; /* deep green accent */ --muted:#9aa1a3; /* muted text */ --glass: rgba(255,255,255,0.03); --glass-strong: rgba(255,255,255,0.06); --radius:14px; --radius-sm:8px; --shadow:0 8px 30px rgba(2,8,10,0.65); --card-border: 1px solid rgba(255,255,255,0.04); } /* Base typography */ html,body{ height:100%; } body{ background: linear-gradient(180deg,var(--bg) 0%, #071214 100%); color:var(--cream); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.55; margin:0; padding:0; } /* Elegant serif for headings — fallback provided */ h1,h2,h3,h4{ font-family: "Playfair Display", "Georgia", serif; color:var(--cream); letter-spacing:0.4px; margin:0 0 0.6rem 0; } h1{font-size:2.4rem} h2{font-size:1.6rem} .container{ max-width:1200px; margin:0 auto; padding:3rem 1.5rem; } /* Header / nav */ .header{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; } .brand{ display:flex; gap:0.9rem; align-items:center; } .brand .logo{ width:58px;height:58px;border-radius:10px; background:linear-gradient(135deg,var(--panel),rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.05); display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow); } .brand .title{ font-family:"Playfair Display", serif; font-size:1.1rem; font-weight:700; color:var(--cream); } .nav{ display:flex;gap:1rem;align-items:center; } .nav a{ color:var(--muted); text-decoration:none; padding:0.55rem 0.8rem; border-radius:8px; transition:all 160ms ease; font-weight:600; } .nav a:hover{ color:var(--cream); background:rgba(255,255,255,0.02);} /* Hero */ .hero{ display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center; margin:2.5rem 0; } .hero-card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:var(--radius); padding:2.2rem; box-shadow:var(--shadow); border:var(--card-border); } .hero h1{font-size:3rem;margin-bottom:0.6rem} .hero p{color:var(--muted);font-size:1.05rem} .hero-cta{ display:flex;gap:1rem;margin-top:1.4rem;flex-wrap:wrap; } .btn{ display:inline-block;padding:0.85rem 1.3rem;border-radius:12px; text-decoration:none;font-weight:700;cursor:pointer;border:0;transition:transform 150ms ease, box-shadow 150ms ease; } .btn-primary{ background: linear-gradient(90deg,var(--gold),var(--gold-2)); color:#08110f; box-shadow: 0 6px 20px rgba(202,164,83,0.15); } .btn-primary:hover{ transform:translateY(-3px); } .btn-outline{ background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--cream); } /* Cards grid */ .grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:1.6rem; } .card{ background:var(--panel);padding:1.25rem;border-radius:12px;border:var(--card-border);box-shadow:0 6px 22px rgba(2,8,10,0.45); } .card .title{font-weight:700;margin-bottom:0.4rem} .card .desc{color:var(--muted);font-size:0.95rem} /* Product list */ .product{ display:flex;gap:1rem;align-items:center;padding:1rem;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border:1px solid rgba(255,255,255,0.03); } .product img{width:96px;height:64px;object-fit:cover;border-radius:8px} .product .meta{flex:1} .product .price{font-weight:800;color:var(--gold);} /* Badge */ .badge{ display:inline-block;padding:0.25rem 0.6rem;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:var(--gold);border:1px solid rgba(202,164,83,0.12);font-weight:700;font-size:0.8rem; } /* Form styles */ .form-row{display:flex;gap:0.8rem} .input,textarea,select{ width:100%;padding:0.85rem;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--cream); } .input:focus{outline:none;box-shadow:0 6px 20px rgba(42,107,91,0.06);border-color:rgba(42,107,91,0.8)} /* Footer */ .footer{ margin-top:3rem;padding:2rem;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted); } /* Utility: gold divider */ .divider-gold{ height:4px;width:90px;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold-2));margin:0.6rem 0 1.2rem 0; } /* Subtle ornaments: metallic lines */ .metal-line{ height:2px;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(202,164,83,0.14), rgba(255,255,255,0.04));border-radius:2px;margin:0.6rem 0; } /* Responsive tweaks */ @media (max-width:920px){ .hero{grid-template-columns:1fr;} .header{flex-direction:column;align-items:flex-start;gap:0.6rem} } /* Special: product highlight ribbon */ .ribbon{ position:relative;overflow:hidden;border-radius:8px; } .ribbon:before{ content:"";position:absolute;top:12px;left:-36px;padding:6px 52px;transform:rotate(-28deg);background:var(--gold);color:#08110f;font-weight:800;font-size:0.8rem;box-shadow:0 6px 20px rgba(202,164,83,0.15); } /* Accessibility improvements */ .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} /* Small print */ .small{font-size:0.85rem;color:var(--muted)} /* Example utility classes */ .text-accent{color:var(--accent)} .text-gold{color:var(--gold)} .m-0{margin:0} .p-0{padding:0} .center{display:flex;align-items:center;justify-content:center} /* End of stylesheet */