/* style.css — shared stylesheet Light / Dark via :root and .dark on Responsive, animated shapes, cards, placeholders, gray links (no underline) */ /* ----------------------- Variables ----------------------- */ :root{ --bg: #f6f5f3; /* soft warm page background */ --card: #ffffff; --text: #121212; --muted: #6b6b6b; --accent: #16697A; /* deep teal (primary accent) */ --accent-2: #FFB400; /* gold secondary */ --radius: 12px; --shadow: 0 14px 30px rgba(16,20,24,0.06); --glass: rgba(255,255,255,0.6); --maxw: 1100px; --gap: 20px; --transition: 0.32s ease; } /* dark overrides */ .dark { --bg: #0f1114; --card: #0f1316; --text: #e8eaec; --muted: #9aa0a6; --shadow: 0 18px 40px rgba(0,0,0,0.6); --glass: rgba(255,255,255,0.03); } /* ----------------------- Base Reset ----------------------- */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.6; transition: background var(--transition), color var(--transition); -webkit-tap-highlight-color: transparent; } /* ----------------------- Floating shapes (global) ----------------------- */ .floating-shapes{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } .floating-shapes span{ position:absolute;border-radius:50%; will-change: transform, opacity; filter: blur(.6px); opacity:.9; } /* a few soft floating shapes */ .floating-shapes .s1{ left:6%; bottom:-160px; width:180px; height:180px; background: linear-gradient(135deg,#16697A22,#FFB40014); animation: floatUp 36s linear infinite; } .floating-shapes .s2{ left:68%; bottom:-180px; width:240px; height:240px; background: linear-gradient(135deg,#FFB40022,#16697A14); animation: floatUp 44s linear infinite; } .floating-shapes .s3{ left:30%; bottom:-100px; width:120px; height:120px; background: linear-gradient(135deg,#16697A18,#FFB40010); animation: floatUp 28s linear infinite; } .floating-shapes .s4{ left:52%; bottom:-140px; width:160px; height:160px; background: linear-gradient(135deg,#8A5BFF18,#16697A10); animation: floatUp 40s linear infinite; } @keyframes floatUp{ 0%{ transform: translateY(0) rotate(0deg); opacity:.6; } 50%{ opacity:.95; } 100%{ transform: translateY(-1300px) rotate(720deg); opacity:0; } } /* respects reduce-motion */ @media (prefers-reduced-motion: reduce){ .floating-shapes span{ animation: none !important; transform:none !important; } } /* ----------------------- Topbar / header ----------------------- */ .topbar{ position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34)); border-bottom: 1px solid rgba(0,0,0,0.04); transition: background var(--transition), border-color var(--transition); } .dark .topbar{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-bottom: 1px solid rgba(255,255,255,0.04); } .brand{display:flex;gap:12px;align-items:center} .logo{ width:46px;height:46px;border-radius:12px;display:grid;place-items:center; background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff;font-weight:700;font-family:"Playfair Display",serif;box-shadow:var(--shadow); } .brand h1{margin:0;font-size:1rem;font-family:"Playfair Display",serif} .brand p{margin:0;color:var(--muted);font-size:.85rem} /* nav */ .topnav{display:flex;gap:12px;align-items:center} .topnav a{ color:var(--muted); text-decoration:none; font-weight:600; padding:6px 10px; border-radius:8px; } .topnav a:hover{ color:var(--text); background:var(--glass); } .topnav a.active{ color:var(--accent); background: transparent; } /* theme toggle button */ .btn{ border:0; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600; background:transparent; color:var(--muted); transition: transform .18s ease, box-shadow .18s ease; } .btn.primary{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--shadow); } /* ----------------------- Utilities / container ----------------------- */ .container{ max-width:var(--maxw); margin:0 auto; padding:28px; } /* ----------------------- Index (cover) hero ----------------------- */ .hero-wrap{ display:grid; grid-template-columns:1fr 420px; gap:36px; align-items:center; max-width:var(--maxw); margin:36px auto; padding:0 24px; } @media (max-width:980px){ .hero-wrap{ grid-template-columns:1fr; padding:0 20px; } } .home-section{ background: rgba(255,255,255,0.86); border-radius:16px; padding:28px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.03); } .dark .home-section{ background: rgba(18,18,18,0.78); border:1px solid rgba(255,255,255,0.03); } /* hero left */ .hero-left h1{ margin:0 0 8px 0; font-family:"Playfair Display",serif; font-size:2.2rem; line-height:1.05; } .hero-left p.lead{ margin:0 0 18px 0; color:var(--muted); font-size:1.05rem; } /* hero right placeholder */ .shapes{ width:360px; height:320px; border-radius:16px; display:grid; place-items:center; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)); box-shadow:var(--shadow); } .dark .shapes{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); } /* CTA group */ .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; } /* pills */ .pill{ display:inline-block; padding:8px 12px; border-radius:999px; background:transparent; border:1px solid rgba(0,0,0,0.04); color:var(--muted); font-weight:700; } /* ----------------------- Grid cards (services, posts) ----------------------- */ .grid{ display:grid; gap:20px; grid-template-columns:repeat(3,1fr); padding:0 24px; max-width:var(--maxw); margin:28px auto; } @media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .grid{ grid-template-columns:1fr; padding:0 18px; } } .card{ background:var(--card); border-radius:12px; padding:16px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:flex-start; transition: transform .28s var(--transition), box-shadow .28s var(--transition); border:1px solid rgba(0,0,0,0.03); } .dark .card{ border:1px solid rgba(255,255,255,0.03); } .card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,0.12); } /* placeholder image box */ .img-placeholder{ width:100%; height:160px; border-radius:10px; display:grid; place-items:center; background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01)); color:var(--muted); font-weight:700; text-align:center; } /* real card image */ .card-img{ width:100%; height:160px; object-fit:cover; border-radius:10px; display:block; } /* post/article */ .post{ background:var(--card); border-radius:12px; padding:18px; box-shadow:var(--shadow); margin-bottom:18px; border:1px solid rgba(0,0,0,0.03); } .post h2{ margin:8px 0; font-family:"Playfair Display",serif; } .meta{ color:var(--muted); font-size:.92rem; margin-bottom:10px; } /* about card */ .about-card{ background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.03); } /* footer */ footer{ max-width:var(--maxw); margin:40px auto 80px; padding:0 24px; color:var(--muted); font-size:.95rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; } /* ----------------------- Links (gray, no underline) ----------------------- */ a{ color:#6b6b6b; text-decoration:none; transition: color .18s ease; font-weight:500; } a:hover{ color:#222222; text-decoration:underline; } /* reveal animation */ .reveal{ opacity:0; transform:translateY(12px); transition: opacity .5s ease, transform .5s ease; } .reveal.visible{ opacity:1; transform:none; } /* small screens */ @media (max-width:640px){ .brand h1{ font-size:.98rem; } .hero-left h1{ font-size:1.6rem; } .topnav{ gap:8px; font-size:.95rem; } .shapes{ width:100%; height:220px; border-radius:12px; } } /* utility */ .small{ font-size:.9rem; } .muted{ color:var(--muted); } /* Contact Section */ .contact-section { padding: 60px 20px; background: var(--bg-light, #f9f9f9); } .contact-wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px; max-width: 1100px; margin: auto; } .contact-form-container, .contact-info { flex: 1 1 450px; background: var(--card-bg, #fff); padding: 30px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease; } .contact-form-container:hover, .contact-info:hover { transform: translateY(-5px); } .contact-form input, .contact-form textarea { width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 8px; border: 1px solid #ddd; font-size: 16px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent, teal); box-shadow: 0 0 5px rgba(0, 128, 128, 0.3); } .contact-form button { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 18px; cursor: pointer; background: linear-gradient(90deg, #005bea, #00c6fb); color: #fff; transition: 0.3s; } .contact-form button:hover { opacity: 0.9; transform: scale(1.02); } .contact-info h2 { margin-bottom: 15px; } .social-links { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; } .social-links a { text-decoration: none; color: var(--accent, teal); font-weight: 600; transition: 0.3s; } .social-links a:hover { color: #005bea; } .icon-img { width: 20px; /* adjust size */ height: 20px; object-fit: contain; /* keeps proportions */ display: block; margin: 0 auto 12px; /* centers and adds spacing */ } .card img { width: 60px; /* control the size */ height: 60px; /* keep them square */ object-fit: contain; /* keeps proportions */ margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; } @media (min-width: 1024px) { /* Desktop layout styles */ .hero { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 100px 10%; } .hero .text { max-width: 50%; } .hero .image-placeholder { width: 45%; } .card-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } @media (max-width: 768px) { /* === MOBILE LAYOUT === */ body { padding: 0 15px; } header nav { flex-direction: column; align-items: center; gap: 10px; } .hero { flex-direction: column; text-align: center; padding: 60px 20px; } .hero h1 { font-size: 1.8rem; } .hero p { font-size: 1rem; } .hero .image-placeholder { width: 80%; margin: 20px auto 0; } .section { padding: 40px 0; } .card-grid { grid-template-columns: 1fr; gap: 1.5rem; } .card { padding: 20px; } .card img { width: 100%; height: auto; } footer { flex-direction: column; text-align: center; gap: 10px; } }