/* Lunark Projects - Custom Stylesheet This stylesheet defines the look and feel of the Lunark Projects website. It uses a minimal palette derived from the company logo (dark teal, black and white) and keeps the layout clean and modern. The design embraces responsiveness from the outset so the same markup adapts gracefully to desktops, tablets and phones. A dark‑mode is also provided via CSS variables and a simple class toggle on the element. To add new colours or tweak the design simply adjust the variables defined in the :root block. Comments throughout describe the purpose of major rules. */ /* Root variables store the colour palette and spacing values. Update these values to change the look globally. When dark mode is active (the .dark‑mode class is placed on ) an alternate set of variables are defined further below. */ :root { --color-primary: #21494c; /* deep teal from the Lunark logo */ --color-secondary: #2b2a29; /* dark grey/black accent */ --color-accent: #0a575c; /* slightly lighter teal for highlights */ --color-background: #ffffff; /* light background for default mode */ --color-surface: #f5f7f8; /* light grey surface for cards */ --color-text: #2b2a29; /* primary text colour */ --color-muted: #666; /* muted text for secondary information */ --transition-fast: 0.2s; --transition-slow: 0.4s; --header-height: 70px; --max-width: 1200px; } /* Dark mode overrides some of the variables. The colours are inverted to provide higher contrast on dark backgrounds. */ .dark-mode { --color-background: #141414; --color-surface: #1e1e1e; --color-text: #e6e6e6; --color-muted: #aaa; --color-primary: #21494c; --color-secondary: #2b2a29; --color-accent: #287377; } /* Global reset and base styling */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; background-color: var(--color-background); color: var(--color-text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } /* Header and navigation */ header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: var(--color-background); box-shadow: 0 2px 8px rgba(0,0,0,0.05); z-index: 999; display: flex; align-items: center; } .nav-container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; } .logo img { height: 40px; } .nav-links { display: flex; gap: 1.5rem; list-style: none; } .nav-links li a { padding: 0.5rem 0; font-weight: 500; color: var(--color-text); transition: color var(--transition-fast); } .nav-links li a:hover { color: var(--color-primary); } /* Hamburger menu for small screens */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; cursor: pointer; } .hamburger span { width: 24px; height: 2px; background-color: var(--color-text); transition: transform var(--transition-fast); } /* Theme toggle button */ .theme-toggle { cursor: pointer; border: none; background: none; font-size: 1.2rem; color: var(--color-text); display: flex; align-items: center; justify-content: center; margin-left: 1rem; } /* Responsive navigation - show/hide on mobile */ @media (max-width: 768px) { .nav-links { position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--color-background); flex-direction: column; align-items: flex-start; padding: 1rem; gap: 1rem; max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .nav-links.open { max-height: 300px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .hamburger { display: flex; } .theme-toggle { margin-left: 0; } } /* Hero section */ .hero { margin-top: var(--header-height); width: 100%; min-height: 80vh; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1.2; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; color: #e0e0e0; } .btn-primary { display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--color-primary); color: #fff; border-radius: 4px; transition: background-color var(--transition-fast); } .btn-primary:hover { background-color: var(--color-accent); } /* Generic section styling */ section { width: 100%; padding: 4rem 1rem; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; } section h2 { font-size: 2rem; margin-bottom: 2rem; color: var(--color-primary); text-align: center; } /* About Section */ .about-wrapper { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; } .about-image { flex: 1 1 300px; } .about-content { flex: 1 1 300px; } .about-content h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-primary); } .about-content p { margin-bottom: 1rem; color: var(--color-text); } /* Services Section */ .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; } .service-card { background-color: var(--color-surface); border: 1px solid rgba(0,0,0,0.05); border-radius: 6px; padding: 2rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast); display: flex; flex-direction: column; height: 100%; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .service-card h3 { margin-bottom: 0.5rem; font-size: 1.25rem; color: var(--color-primary); } .service-card p { flex-grow: 1; color: var(--color-text); margin-bottom: 1rem; } /* Projects grid */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } .project-card { position: relative; border-radius: 6px; overflow: hidden; background-color: var(--color-surface); height: 200px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .project-card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.1); } .project-card .project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; opacity: 0; transition: opacity var(--transition-fast); text-align: center; padding: 1rem; } .project-card:hover .project-overlay { opacity: 1; } .project-card img { width: 100%; height: 100%; object-fit: cover; } /* Timeline styling for project steps */ .timeline { display: flex; flex-direction: column; gap: 2rem; max-width: 800px; margin: 0 auto; } .timeline-step { display: flex; gap: 1.5rem; align-items: flex-start; } .timeline-number { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-primary); color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .timeline-content h4 { margin-bottom: 0.5rem; font-size: 1.1rem; color: var(--color-primary); } .timeline-content p { color: var(--color-text); } /* Contact form */ .contact-details { margin-bottom: 2rem; text-align: center; } .contact-details p { margin: 0.5rem 0; } .contact-form { max-width: 600px; margin: 0 auto; background-color: var(--color-surface); border-radius: 6px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .contact-form div { margin-bottom: 1rem; display: flex; flex-direction: column; } .contact-form label { margin-bottom: 0.3rem; color: var(--color-primary); font-weight: 500; } .contact-form input, .contact-form textarea { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(33,73,76,0.1); } .contact-form button { padding: 0.7rem 1.5rem; background-color: var(--color-primary); color: #fff; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background-color var(--transition-fast); } .contact-form button:hover { background-color: var(--color-accent); } .form-response { margin-top: 1rem; padding: 0.75rem; background-color: #e7f4f5; border: 1px solid #c4e0e4; border-radius: 4px; color: var(--color-primary); display: none; } /* Footer */ footer { margin-top: auto; padding: 2rem 1rem; background-color: var(--color-primary); color: #fff; } footer .footer-container { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; } footer h4 { margin-bottom: 0.5rem; font-size: 1.1rem; } /* Blog cards for the insights section These classes reuse the same aesthetic as the service cards but with slight tweaks to typography and spacing. Blog cards are used on the blog page to showcase thought‑leadership articles. */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } .blog-card { background-color: var(--color-surface); border: 1px solid rgba(0,0,0,0.05); border-radius: 6px; padding: 2rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast); display: flex; flex-direction: column; height: 100%; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .blog-card h3 { margin-bottom: 0.5rem; font-size: 1.25rem; color: var(--color-primary); } .blog-card p { flex-grow: 1; color: var(--color-text); margin-bottom: 1rem; } .post-meta { font-size: 0.9rem; color: var(--color-muted); margin-bottom: 1rem; } /* Case study sections highlight real‑world examples of our work. They are stacked vertically with generous spacing and reuse our colour palette for headings. */ .case-study-section { margin-bottom: 4rem; } .case-study-section h3 { font-size: 1.75rem; margin-bottom: 1rem; color: var(--color-primary); } .case-study-section h4 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--color-primary); } .case-study-section p { margin-bottom: 1rem; color: var(--color-text); } footer ul { list-style: none; padding: 0; margin: 0; } footer ul li { margin-bottom: 0.5rem; } footer a { color: #e0e0e0; transition: color var(--transition-fast); } footer a:hover { color: #fff; } footer .copyright { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: #e0e0e0; } /* Values list used on about page */ .values-list { list-style: disc inside; display: flex; flex-direction: column; gap: 0.5rem; margin-left: 1.5rem; } /* ===================== Case Studies Cards ===================== */ .case-studies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; } .case-study-card { background: var(--color-surface); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 8px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .case-study-card:hover { transform: translateY(-6px); box-shadow: 0 6px 14px rgba(0,0,0,0.12); } .case-study-card h3 { margin-bottom: 0.75rem; color: var(--color-primary); font-size: 1.25rem; } .case-study-card p { margin: 0.5rem 0; font-size: 0.95rem; line-height: 1.5; } .case-study-card strong { color: var(--color-accent); } .case-study-card .testimonial { margin-top: 1rem; font-style: italic; color: var(--color-secondary); }