/* ============================================================ SYSTEMIC IT CONSULTING — Global Stylesheet ============================================================ TABLE OF CONTENTS ----------------- 1. Reset & Base 2. Design Tokens (CSS Variables) ← START HERE for color/font changes 3. Typography 4. Layout Helpers 5. Navigation 6. Buttons 7. Hero Section (Home page) 8. Feature / Value Prop Cards 9. Services Grid 10. Page Header (inner pages: About, Services, Contact) 11. About Page Sections 12. Contact Page & Form 13. CTA Banner 14. Footer 15. Responsive / Mobile HOW TO MAKE COMMON CHANGES --------------------------- • Change accent color: Update --accent in Section 2 • Change background: Update --bg-base in Section 2 • Change font: Update --font-sans in Section 2 (and the Google Fonts import in each HTML file) • Add a new page: Copy any existing .html file, update the and page content. The nav, footer, and styles are all shared — no extra CSS needed. • Adjust spacing: Section padding is controlled by `section { padding: Xrem 0; }` • Change max content width: Update --max-width in Section 2 ============================================================ */ /* ============================================================ 1. RESET & BASE Sets consistent defaults across all browsers. You generally don't need to change anything here. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ 2. DESIGN TOKENS (CSS VARIABLES) This is the single source of truth for the site's visual identity. Changing a value here updates it everywhere it's used. COLOR SYSTEM: --bg-base → the darkest background (page background) --bg-surface → slightly lighter, used for cards and sections --bg-elevated → slightly lighter still, used for hover states --border → subtle dividing lines between elements TEXT: --text-primary → main headings and body text --text-secondary→ supporting / descriptive text --text-muted → timestamps, labels, de-emphasized content ACCENT (Electric Blue): --accent → buttons, links, highlights, active states --accent-hover → hover state of accent (slightly lighter) --accent-dim → very faint blue used for card backgrounds on hover --accent-dim-border → subtle blue used for card borders on hover SPACING & SHAPE: --max-width → maximum width of the content area --nav-height → height of the fixed top navigation bar --radius-* → corner rounding for cards, buttons, badges ============================================================ */ :root { /* Backgrounds */ --bg-base: #0d0d0f; /* Near-black page background */ --bg-surface: #16161a; /* Card / section background */ --bg-elevated: #1e1e24; /* Hover / raised card background */ --border: rgba(255, 255, 255, 0.07); /* Subtle white borders */ /* Text */ --text-primary: #f0f0f4; /* Headings and main body text */ --text-secondary:#9a9aaa; /* Supporting descriptions */ --text-muted: #5a5a6a; /* Labels, metadata, de-emphasized */ /* Accent — change these two hex values to re-theme the entire site */ --accent: #2b7fff; /* Primary electric blue */ --accent-hover: #5599ff; /* Lighter blue for hover states */ --accent-dim: rgba(43, 127, 255, 0.12); /* Faint blue fill */ --accent-dim-border: rgba(43, 127, 255, 0.3); /* Faint blue border */ /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* To change the font: replace 'Inter' here and update the Google Fonts <link> tag in each HTML file's <head> to import your chosen font. */ /* Shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Layout */ --transition: 0.2s ease; --max-width: 1100px; /* Max content width — increase for wider layouts */ --nav-height: 68px; /* Must match the nav's actual rendered height */ } html { scroll-behavior: smooth; /* Enables smooth scrolling for anchor links */ font-size: 16px; } body { font-family: var(--font-sans); background-color: var(--bg-base); color: var(--text-primary); line-height: 1.65; -webkit-font-smoothing: antialiased; /* Crisper text on macOS/iOS */ } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } img { max-width: 100%; display: block; } /* ============================================================ 3. TYPOGRAPHY Font sizes use clamp() so they scale smoothly between mobile and desktop without breakpoints. Format: clamp(min, preferred, max). To make headings larger/smaller, adjust the third value. ============================================================ */ h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); } /* Page hero titles */ h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } /* Section headings */ h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); } /* Card headings */ h4 { font-size: 1rem; font-weight: 600; } /* Small labels */ p { color: var(--text-secondary); max-width: 65ch; /* Limits paragraph width for readability */ } /* Small uppercase label above section headings (e.g. "About", "Services") */ .section-label { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } /* ============================================================ 4. LAYOUT HELPERS Reusable utility classes used throughout all pages. ============================================================ */ /* .container centers content and limits its width */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; /* Side padding keeps content away from screen edges */ } /* Default vertical padding for all <section> elements */ section { padding: 5rem 0; } /* Intro block above a grid or content area — heading + supporting text */ .section-header { max-width: 680px; margin-bottom: 3.5rem; } .section-header p { font-size: 1.05rem; margin-top: 1rem; } /* ============================================================ 5. NAVIGATION Fixed top nav bar with a frosted-glass blur effect. It stays visible as the user scrolls. TO CHANGE NAV LINKS: edit the <ul class="nav-links"> in each HTML file. TO CHANGE THE LOGO TEXT: edit the .nav-logo-main and .nav-logo-sub spans. TO CHANGE NAV HEIGHT: update --nav-height in Section 2 (keep in sync). ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; background: rgba(13, 13, 15, 0.85); /* Semi-transparent so content shows through */ backdrop-filter: blur(12px); /* Frosted glass effect */ -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: background var(--transition); } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } /* Logo / brand lockup in the top-left */ .nav-logo { display: flex; flex-direction: column; gap: 1px; text-decoration: none; } .nav-logo-main { font-size: 1rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; } .nav-logo-sub { font-size: 0.65rem; font-weight: 500; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; } /* Horizontal list of nav links */ .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: color var(--transition); } .nav-links a:hover, .nav-links a.active { /* .active is set by main.js based on current page */ color: var(--text-primary); } /* "Get in Touch" button in the nav — styled differently from other links */ .nav-cta { background: var(--accent); color: #fff !important; padding: 0.5rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600 !important; transition: background var(--transition) !important; } .nav-cta:hover { background: var(--accent-hover) !important; color: #fff !important; } /* Hamburger button — hidden on desktop, shown on mobile */ .nav-mobile-btn { display: none; background: none; border: none; cursor: pointer; padding: 4px; flex-direction: column; gap: 5px; } .nav-mobile-btn span { display: block; width: 22px; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: all var(--transition); } /* ============================================================ 6. BUTTONS Two variants: .btn-primary (filled blue) and .btn-outline (bordered). Usage: <a href="..." class="btn btn-primary">Label</a> Add both classes — "btn" provides base styles, the second sets the variant. ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); font-size: 0.925rem; font-weight: 600; cursor: pointer; transition: all var(--transition); text-decoration: none; border: none; line-height: 1; } /* Primary: solid blue fill */ .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); /* Subtle lift on hover */ box-shadow: 0 4px 20px rgba(43, 127, 255, 0.35); } /* Outline: transparent with a border, turns blue on hover */ .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--accent-dim-border); color: var(--accent); background: var(--accent-dim); } /* ============================================================ 7. HERO SECTION (Home page — index.html) Full-viewport-height section with large headline, subtext, CTAs, and stat figures. The glow effects are CSS radial gradients. TO EDIT HERO TEXT: open index.html and find <section class="hero"> TO CHANGE THE GLOW: adjust the rgba colors in the ::before / ::after pseudos ============================================================ */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-height); /* Offset so content isn't hidden under the nav */ position: relative; overflow: hidden; } /* Decorative radial glow — top right */ .hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(43, 127, 255, 0.08) 0%, transparent 70%); pointer-events: none; } /* Decorative radial glow — bottom left */ .hero::after { content: ''; position: absolute; bottom: -100px; left: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(43, 127, 255, 0.04) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 1; /* Sits above the glow pseudoelements */ max-width: 760px; } /* Small pill badge above the main headline */ .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; padding: 0.35rem 0.9rem; border: 1px solid var(--accent-dim-border); border-radius: 99px; background: var(--accent-dim); } .hero h1 { margin-bottom: 1.25rem; } /* Highlighted word in the h1 — currently wraps "system" */ .hero h1 .highlight { color: var(--accent); } .hero-lead { font-size: 1.15rem; line-height: 1.75; margin-bottom: 2.25rem; max-width: 600px; } /* Row of CTA buttons */ .hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* Stats bar below the CTAs — separated by dividers */ .hero-meta { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; } /* Individual stat (number + label) */ .hero-stat span { display: block; } .hero-stat .stat-num { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.03em; } .hero-stat .stat-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; } /* Vertical line divider between stats */ .hero-divider { width: 1px; height: 40px; background: var(--border); } /* ============================================================ 8. FEATURE / VALUE PROP CARDS Used on the home page to show the "Why Systemic IT" section. Cards sit in a connected grid with shared borders. TO ADD A CARD: duplicate a <div class="feature-card"> in index.html TO CHANGE ICONS: replace the emoji inside <div class="feature-icon"> ============================================================ */ /* The grid container — cards share a border, giving a "table" feel */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5px; /* The gap IS the border between cards */ background: var(--border); /* Shows through the gaps as border color */ border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .feature-card { background: var(--bg-surface); padding: 2rem; transition: background var(--transition); } .feature-card:hover { background: var(--bg-elevated); } /* Icon badge at the top of each card */ .feature-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--accent-dim); border: 1px solid var(--accent-dim-border); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; font-size: 1.1rem; } .feature-card h3 { margin-bottom: 0.5rem; font-size: 1rem; } .feature-card p { font-size: 0.9rem; line-height: 1.6; } /* ============================================================ 9. SERVICES GRID Used on both index.html (teaser) and services.html (full list). Each card lifts and reveals a blue top-border line on hover. TO ADD A SERVICE CARD: duplicate <div class="service-card"> in the HTML TO CHANGE ICONS: replace the emoji in <div class="service-card-icon"> ============================================================ */ .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .service-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; transition: all var(--transition); position: relative; overflow: hidden; } /* Blue top-border accent line — hidden by default, revealed on hover */ .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; transition: opacity var(--transition); } .service-card:hover { border-color: var(--accent-dim-border); background: var(--bg-elevated); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); } .service-card:hover::before { opacity: 1; } .service-card-icon { font-size: 1.4rem; margin-bottom: 0.9rem; } .service-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); } .service-card p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; max-width: none; } /* ============================================================ 10. PAGE HEADER (inner pages: About, Services, Contact) The large header block at the top of non-home pages. It accounts for the fixed nav height with padding-top. TO EDIT: find <header class="page-header"> in the relevant HTML file. ============================================================ */ .page-header { padding-top: calc(var(--nav-height) + 4rem); /* nav height + extra breathing room */ padding-bottom: 4rem; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } /* Decorative glow in the top-right corner */ .page-header::before { content: ''; position: absolute; top: 0; right: 0; width: 500px; height: 400px; background: radial-gradient(circle at top right, rgba(43,127,255,0.07), transparent 60%); pointer-events: none; } .page-header h1 { margin-bottom: 1rem; } .page-header .lead { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; line-height: 1.75; } /* ============================================================ 11. ABOUT PAGE SECTIONS Two main layouts used on about.html: - .about-bio: Two-column bio + credential cards - .philosophy-grid: Two-column philosophy text + principle pillars ============================================================ */ /* Bio layout: prose on left, credential cards on right */ .about-bio { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .about-bio-text h2 { margin-bottom: 1.25rem; } .about-bio-text p { margin-bottom: 1rem; } /* Vertical stack of credential highlight cards */ .about-credentials { display: flex; flex-direction: column; gap: 1.25rem; } .credential-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .credential-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; } .credential-item h4 { margin-bottom: 0.3rem; } .credential-item p { font-size: 0.875rem; max-width: none; } /* Philosophy section — slightly different background to visually separate it */ .philosophy-section { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* Two-column layout: explanation left, principles right */ .philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } /* Pull-quote block with a left blue accent border */ .philosophy-quote { border-left: 3px solid var(--accent); padding: 1.5rem 1.5rem 1.5rem 1.75rem; background: var(--bg-elevated); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-top: 1.5rem; font-size: 1rem; color: var(--text-secondary); line-height: 1.75; font-style: italic; } /* Grid of individual principle cards */ .philosophy-pillars { display: grid; gap: 1rem; } .pillar { padding: 1.25rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); } .pillar h4 { color: var(--accent); margin-bottom: 0.4rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; } .pillar p { font-size: 0.875rem; max-width: none; } /* ============================================================ 12. CONTACT PAGE & FORM Two-column layout: contact info on left, form card on right. The form currently uses a basic submit handler in main.js that shows a confirmation message. To wire it to a real backend or service (e.g. Formspree, Netlify Forms), update the <form> action attribute and the JS handler in js/main.js. ============================================================ */ /* Two-column: info left (1fr), form right (wider, 1.4fr) */ .contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; } .contact-info h2 { margin-bottom: 1rem; } .contact-info > p { margin-bottom: 2rem; } /* Individual contact detail row (icon + label + value) */ .contact-detail { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .contact-detail-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-dim); border: 1px solid var(--accent-dim-border); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .contact-detail h4 { margin-bottom: 0.2rem; font-size: 0.875rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } .contact-detail p { font-size: 0.95rem; color: var(--text-primary); max-width: none; } /* The form itself lives inside this card */ .contact-form-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; } /* Form field groupings */ .form-group { margin-bottom: 1.25rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Labels above inputs */ label { display: block; font-size: 0.825rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; letter-spacing: 0.04em; } /* All text inputs, textareas, and selects share these base styles */ input, textarea, select { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.925rem; padding: 0.7rem 0.9rem; transition: border-color var(--transition), box-shadow var(--transition); outline: none; appearance: none; /* Removes browser-default select arrow styling */ } input::placeholder, textarea::placeholder { color: var(--text-muted); } /* Blue ring on focus — matches the accent color */ input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 127, 255, 0.12); } textarea { resize: vertical; min-height: 130px; } select option { background: var(--bg-elevated); } /* Full-width submit button */ .form-submit { width: 100%; justify-content: center; margin-top: 0.5rem; } /* ============================================================ 13. CTA BANNER Full-width call-to-action block used at the bottom of each page before the footer. Edit the text and button links in each HTML file. ============================================================ */ .cta-banner { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; padding: 4.5rem 0; } .cta-banner h2 { margin-bottom: 1rem; } .cta-banner p { font-size: 1.05rem; margin: 0 auto 2rem; } .cta-banner .btn-group { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* ============================================================ 14. FOOTER Shared across all pages. Edit footer links and copyright text inside the <footer class="footer"> block in each HTML file. ============================================================ */ .footer { padding: 3rem 0; border-top: 1px solid var(--border); } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } .footer-brand .nav-logo-main { font-size: 0.95rem; } .footer-links { display: flex; gap: 1.75rem; list-style: none; flex-wrap: wrap; } .footer-links a { font-size: 0.85rem; color: var(--text-muted); } .footer-links a:hover { color: var(--text-secondary); } .footer-copy { font-size: 0.8rem; color: var(--text-muted); } /* Generic horizontal rule used between sections */ hr { border: none; border-top: 1px solid var(--border); margin: 0; } /* ============================================================ 15. RESPONSIVE / MOBILE Breakpoint at 768px — this is where the layout shifts for mobile and tablet screens. - Nav collapses to a hamburger menu (toggled by main.js) - Multi-column grids stack into single columns - Section padding is reduced ============================================================ */ @media (max-width: 768px) { /* Hide desktop nav links; show hamburger button */ .nav-links { display: none; } .nav-mobile-btn { display: flex; } /* Mobile nav: full-width dropdown panel that appears below the nav bar */ .nav-links.open { display: flex; flex-direction: column; position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--bg-surface); padding: 1.5rem; gap: 1.25rem; border-bottom: 1px solid var(--border); z-index: 99; } /* Stack multi-column layouts into a single column */ .hero-meta { gap: 1.5rem; } .about-bio { grid-template-columns: 1fr; gap: 2.5rem; } .philosophy-grid { grid-template-columns: 1fr; gap: 2rem; } .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; } .form-row { grid-template-columns: 1fr; } /* Feature cards: remove the shared border grid, use individual card borders */ .features-grid { background: none; border: none; border-radius: 0; gap: 1rem; } .feature-card { border: 1px solid var(--border); border-radius: var(--radius-md); } section { padding: 3.5rem 0; } /* Tighter vertical spacing on mobile */ }