:root { --bg: #ffffff; /* background */ --text: #111827; /* main text */ --accent: #0ea5a4; /* buttons / highlights */ --muted: #6b7280; /* secondary text */ } [data-theme="dark"] { --bg: #0b1220; --text: #e6eef8; --accent: #38bdf8; --muted: #94a3b8; } * { box-sizing: border-box; } html,body { height:100%; } body { margin:0; font-family: "Segoe UI", Tahoma, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; /* Base direction is LTR. Switch to RTL by adding dir="rtl" on the element. */ direction: ltr; text-align: left; } .container { max-width:900px; margin:0 auto; padding:1rem; } .site-header { padding:1.5rem 0; border-bottom:1px solid rgba(0,0,0,0.06); } h1 { margin:0; font-size:1.75rem; } .tagline { color:var(--muted); margin-top:0.25rem; } button { background:var(--accent); color:white; border:0; padding:0.5rem 1rem; border-radius:6px; cursor:pointer; } .site-footer { padding:1rem; border-top:1px solid rgba(0,0,0,0.06); color:var(--muted); text-align:center; margin-top:2rem } /* --- Styles migrated from original inline stylesheet --- */ /* Navigation */ nav { display: flex; justify-content: space-between; align-items: center; padding: 5px 60px; border-bottom: 1px solid rgba(0,0,0,0.04); position: sticky; top: 0; background: var(--bg); z-index: 100; } .logo { font-size: 1.6rem; font-weight: 300; line-height: 1; letter-spacing: 3px; color: var(--text); } .nav-links { display: flex; gap: 40px; list-style: none; } .nav-links a { text-decoration: none; color: #666; font-size: 0.95rem; font-weight: 300; letter-spacing: 0.5px; transition: color 0.3s ease; } .nav-links a:hover { color: var(--text); } /* Hero Section */ .hero { text-align: center; padding: 0px 0px; border-bottom: 1px solid rgba(0,0,0,0.04); } .hero h1 { font-size: 3.5rem; font-weight: 300; letter-spacing: 1px; margin: 0 0 0px 0; color: var(--text); } .hero p { font-size: 1.2rem; color: var(--muted); font-weight: 700; letter-spacing: 0.5px; max-width: 600px; margin: 0 auto; } /* Products Section */ .products-section { padding: 0 60px; } .section-title { font-size: 2rem; font-weight: 300; letter-spacing: 1px; margin: 0; text-align: center; color: var(--text); } .section-title-row { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 10px auto 0; width: 100%; } .top-link { display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; color: var(--muted); text-decoration: none; transition: color 0.2s ease; } .top-link:hover { color: var(--text); } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 20px; } .product-card { background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%); border-radius: 8px; padding: 40px 30px; text-align: center; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; min-height: 250px; display: flex; flex-direction: column; justify-content: center; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .product-card h3 { font-size: 1.5rem; font-weight: 300; margin-bottom: 15px; color: #222; letter-spacing: 0.5px; } .product-card p { font-size: 0.95rem; color: #555; font-weight: 300; } /* Calendar Section */ .calendar-section { background: #f8f8f8; padding: 20px 60px 20px; border-top: 1px solid #e0e0e0; } .calendar-container { max-width: 900px; margin: 0 auto; } .calendar-wrapper { background: var(--bg); border-radius: 8px; padding: 40px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } iframe { width: 100%; border: none; border-radius: 4px; } /* Info Sections */ .info-section { padding: 0 60px 20px; background: #fafafa; } .contact-section { padding-top: 0; padding-bottom: 20px; } .info-container { max-width: 760px; margin: 0 auto; text-align: center; } .info-container p { color: #555; font-size: 1rem; } /* Footer */ footer { text-align: center; padding: 40px 20px; border-top: 1px solid rgba(0,0,0,0.04); font-size: 0.9rem; color: #999; font-weight: 300; } /* Responsive */ @media (max-width: 768px) { nav { padding: 8px 20px; flex-direction: column; gap: 10px; } .nav-links { gap: 20px; } .hero h1 { font-size: 2.5rem; margin: 0 0 10px 0; } .hero { padding: 10px 20px; } .products-section, .calendar-section, .info-section { padding: 0 20px; } .info-section#contact, .info-section#about { padding: 0; } .info-section#contact .info-container, .info-section#about .info-container { padding: 0 20px 40px; } .info-section { padding-top: 0; padding-bottom: 40px; } .products-grid { grid-template-columns: 1fr; } } /* RTL support when page uses dir="rtl" */ html[dir="rtl"] body { direction: rtl; text-align: right; }