/* |-------------------------------------------------------------------------- | site.css — Milife Solutions Public Site | Laravel 12 · PHP 8.4 |-------------------------------------------------------------------------- | Design: Bold & Confident — Navy + Warm Sand | Fonts: Playfair Display (headlines) · DM Sans (body) · IBM Plex Mono (labels) | Colors: #f0ede8 sand · #1a3a8f navy · #1a1a2e ink |-------------------------------------------------------------------------- | Table of Contents | 1. Reset & Root Variables | 2. Base Typography | 3. Navigation | 4. Buttons & Links | 5. Pills & Tags | 6. Section Shared Styles | 7. Hero | 8. Portfolio Grid (Homepage highlights) | 9. Page Header (inner pages) | 10. Portfolio Page (full grid + filter + cards) | 11. About Page | 12. Contact Page | 13. CTA Band | 14. Footer | 14a. Legal Pages | 15. Utility | 16. Animations | 17. Responsive |-------------------------------------------------------------------------- */ /* ============================================================ 1. RESET & ROOT VARIABLES ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Font size scale — three states on . All rem values derive from this automatically. The toggle button in the footer cycles through these states. Default: 16px (browser default) text-lg: 17px (accessibility: larger) text-xl: 18px (accessibility: largest) */ html { font-size: 16px; } html.text-lg { font-size: 17px; } html.text-xl { font-size: 18px; } :root { /* Palette */ --sand: #f0ede8; --sand-mid: #e8e4de; --sand-dark: #d4cfc8; --navy: #1a3a8f; --navy-light: #2d50a8; --navy-dark: #112766; --navy-pale: #edf0fa; --ink: #1a1a2e; --slate: #4a5568; --muted: #6b7a8d; --light-muted: #9aa5b4; --white: #ffffff; /* Pill group colours */ --pill-mobile-border: #2a9d8f; --pill-mobile-text: #1a7a6e; --pill-mobile-bg: #edf7f6; --pill-cloud-border: #e8a020; --pill-cloud-text: #b87800; --pill-cloud-bg: #fff8ec; --pill-web-border: #3a5cb8; --pill-web-text: #1a3a8f; --pill-web-bg: #edf0fa; --pill-design-border: #c47a8a; --pill-design-text: #9d4f62; --pill-design-bg: #fdf0f2; /* Typography */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Spacing */ --page-pad: 56px; --section-gap: 80px; /* Transitions */ --t-fast: 0.15s ease; --t-base: 0.2s ease; --t-slow: 0.35s ease; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--sand); font-family: var(--font-sans); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } img { display: block; max-width: 100%; } /* ============================================================ 2. BASE TYPOGRAPHY All sizes in rem so the font-size toggle scales everything. Conversion guide (base 16px): Display: 62px→3.9rem 52px→3.4rem 38px→2.5rem 28px→1.875rem Body: 16px→1.0625rem 15px→1rem 14px→0.9375rem 13px→0.875rem UI: 12px→0.8125rem 11px→0.75rem Label: 10px→0.6875rem 9px→0.625rem ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } /* Shared headline styles */ .page-headline { font-family: var(--font-serif); font-size: 3.4rem; font-weight: 700; color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; } .page-headline em { font-style: italic; color: var(--navy); } .section-headline { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700; color: var(--ink); line-height: 1.12; letter-spacing: -0.02em; } .section-headline em { font-style: italic; color: var(--navy); } /* Eyebrow labels */ .page-eyebrow, .section-eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--light-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 14px; } .page-eyebrow { color: var(--navy); font-size: 0.75rem; margin-bottom: 16px; } .page-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--navy); flex-shrink: 0; } .section-eyebrow::after { content: ''; display: block; width: 40px; height: 1px; background: var(--sand-dark); } /* ============================================================ 3. NAVIGATION .nav — full-bleed background container only .nav-inner — 1440px constrained flex layout ============================================================ */ .nav { background: var(--sand); height: 68px; border-bottom: 1px solid var(--sand-mid); position: sticky; top: 0; z-index: 100; } /* Top accent line — full-bleed, lives on outer .nav */ .nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--navy) 0%, #4a7adf 60%, transparent 100%); } /* 1440px constraint wrapper — holds logo, links, CTA */ .nav-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--page-pad); width: 100%; display: flex; align-items: center; justify-content: space-between; height: 100%; } /* Logo */ .nav-logo { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; flex-shrink: 0; } .nav-logo-dot { width: 7px; height: 7px; background: var(--navy); border-radius: 50%; flex-shrink: 0; } /* Desktop links */ .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0 auto; padding: 0 40px; } .nav-link { font-size: 0.875rem; font-weight: 500; color: var(--slate); text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 4px; transition: color var(--t-base), background var(--t-base); } .nav-link:hover { color: var(--navy); background: var(--navy-pale); } .nav-link.active { color: var(--navy); } /* CTA button */ .nav-cta { background: var(--navy); color: var(--white); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; padding: 10px 22px; border-radius: 5px; text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; transition: background var(--t-base); flex-shrink: 0; } .nav-cta:hover { background: var(--navy-light); } /* Mobile hamburger — hidden on desktop */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base); } /* Mobile menu drawer — sits outside .nav-inner, hidden on desktop */ .nav-mobile-menu { display: none; } /* ============================================================ 4. BUTTONS & LINKS ============================================================ */ .btn-primary { display: inline-block; background: var(--navy); color: var(--white); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; padding: 14px 32px; border-radius: 5px; text-decoration: none; letter-spacing: 0.03em; border: none; cursor: pointer; transition: background var(--t-base), transform var(--t-fast); } .btn-primary:hover { background: var(--navy-light); transform: translateY(-1px); } .btn-outline { display: inline-block; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--navy); text-decoration: none; border: 1.5px solid var(--navy); padding: 12px 28px; border-radius: 5px; transition: background var(--t-base); cursor: pointer; background: transparent; } .btn-outline:hover { background: var(--navy-pale); } .btn-text { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--navy); padding-bottom: 2px; transition: opacity var(--t-base); } .btn-text:hover { opacity: 0.75; } /* ============================================================ 5. PILLS & TAGS ============================================================ */ .pills { display: flex; flex-wrap: wrap; gap: 6px; } .pill { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; padding: 5px 11px; border-radius: 20px; white-space: nowrap; transition: border-color var(--t-base), color var(--t-base); } .pill.mobile { border: 1px solid var(--pill-mobile-border); color: var(--pill-mobile-text); background: var(--pill-mobile-bg); } .pill.cloud { border: 1px solid var(--pill-cloud-border); color: var(--pill-cloud-text); background: var(--pill-cloud-bg); } .pill.web { border: 1px solid var(--pill-web-border); color: var(--pill-web-text); background: var(--pill-web-bg); } .pill.design { border: 1px solid var(--pill-design-border); color: var(--pill-design-text); background: var(--pill-design-bg); } .pill:hover { opacity: 0.8; } .pills-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light-muted); margin-bottom: 10px; } /* ============================================================ 6. SECTION SHARED STYLES ============================================================ */ .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 40px; } .section-sub { font-size: 1rem; color: var(--muted); line-height: 1.7; max-width: 380px; padding-bottom: 4px; flex-shrink: 0; } /* ============================================================ 7. HERO Right panel widened: 420px → 540px ============================================================ */ .hero { display: grid; grid-template-columns: 1fr 540px; min-height: 560px; position: relative; overflow: hidden; } /* Background watermark */ .bg-watermark { position: absolute; bottom: -60px; left: -30px; font-family: var(--font-serif); font-size: 20rem; font-weight: 700; color: rgba(26,58,143,0.04); line-height: 1; user-select: none; pointer-events: none; z-index: 0; letter-spacing: -0.04em; } /* Hero left */ .hero-left { padding: 60px var(--page-pad) 56px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); margin-bottom: 26px; } .eyebrow::before { content: ''; display: block; width: 36px; height: 1px; background: var(--navy); flex-shrink: 0; } .headline { font-family: var(--font-serif); font-size: 3.9rem; font-weight: 700; color: var(--ink); line-height: 1.07; letter-spacing: -0.02em; margin-bottom: 22px; } .headline em { font-style: italic; color: var(--navy); } .subhead { font-size: 1.0625rem; font-weight: 400; color: var(--muted); line-height: 1.7; max-width: 440px; margin-bottom: 40px; } .actions { display: flex; align-items: center; gap: 20px; margin-bottom: 52px; } /* Stats strip */ .stats { display: flex; gap: 0; } .stat { padding-right: 36px; border-right: 1px solid var(--sand-dark); margin-right: 36px; } .stat:last-child { border-right: none; margin-right: 0; padding-right: 0; } .stat-val { font-family: var(--font-serif); font-size: 1.9375rem; font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -0.01em; } .stat-lbl { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--light-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 5px; } /* Hero right panel */ .hero-right { background: var(--white); border-left: 1px solid var(--sand-mid); display: flex; flex-direction: column; padding: 36px 32px 32px; position: relative; z-index: 2; overflow-y: auto; } .panel-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light-muted); margin-bottom: 20px; } /* Service cards in hero panel */ .service-card { border: 1px solid var(--sand-mid); border-radius: 8px; padding: 20px 20px 18px; margin-bottom: 12px; transition: border-color var(--t-base), box-shadow var(--t-base); } .service-card:last-of-type { margin-bottom: 0; } .service-card:hover { border-color: var(--navy); box-shadow: 0 4px 16px rgba(26,58,143,0.08); } .service-card.featured { background: var(--navy); border-color: var(--navy); } .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .card-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--navy-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-icon svg { width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .service-card.featured .card-icon { background: rgba(255,255,255,0.15); } .service-card.featured .card-icon svg { stroke: var(--white); } .card-tag { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-muted); background: var(--sand); padding: 3px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } .service-card.featured .card-tag { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); } .card-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; letter-spacing: -0.01em; } .service-card.featured .card-title { color: var(--white); } .card-desc { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; } .service-card.featured .card-desc { color: rgba(255,255,255,0.65); } .hero-divider { border: none; border-top: 1px solid var(--sand-mid); margin: 16px 0 14px; } /* ============================================================ 8. PORTFOLIO GRID (Homepage highlights) ============================================================ */ .portfolio-section { padding: var(--section-gap) var(--page-pad); } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .port-card { background: var(--white); border: 1.5px solid var(--sand-mid); border-radius: 10px; overflow: hidden; text-decoration: none; display: block; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); } .port-card:hover { border-color: var(--navy); box-shadow: 0 8px 32px rgba(26,58,143,0.1); transform: translateY(-3px); } .port-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; background: var(--sand-mid); } .port-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .port-card:hover .port-thumb-img { transform: scale(1.03); } .port-thumb-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; } .port-thumb-placeholder svg { width: 28px; height: 28px; stroke: var(--sand-dark); fill: none; stroke-width: 1.5; } .port-thumb-placeholder span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--sand-dark); letter-spacing: 0.12em; text-transform: uppercase; } .port-body { padding: 20px 22px 22px; } .port-category { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; opacity: 0.7; } .port-title { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.3; } .port-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; } .port-meta { display: flex; align-items: center; justify-content: space-between; } .port-industry { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-muted); } .port-arrow { font-size: 0.875rem; color: var(--navy); font-weight: 500; opacity: 0; transition: opacity var(--t-base), transform var(--t-base); } .port-card:hover .port-arrow { opacity: 1; transform: translateX(4px); } .portfolio-footer { display: flex; justify-content: center; margin-top: 40px; } /* ============================================================ 9. PAGE HEADER (inner pages) ============================================================ */ .page-header { padding: 64px var(--page-pad) 52px; border-bottom: 1px solid var(--sand-mid); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } .page-header-right { font-size: 1rem; font-weight: 400; color: var(--muted); line-height: 1.7; max-width: 400px; padding-bottom: 6px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; } /* ============================================================ 10. PORTFOLIO PAGE (filterable grid + cards) ============================================================ */ /* Filter bar */ .filter-bar { padding: 20px var(--page-pad); border-bottom: 1px solid var(--sand-mid); display: flex; align-items: center; gap: 8px; background: var(--sand); position: sticky; top: 68px; z-index: 90; flex-wrap: wrap; } .filter-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--light-muted); margin-right: 8px; flex-shrink: 0; } .filter-btn { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; color: var(--slate); background: var(--white); border: 1.5px solid var(--sand-dark); border-radius: 20px; padding: 7px 18px; cursor: pointer; letter-spacing: 0.02em; transition: border-color var(--t-base), color var(--t-base), background var(--t-base); white-space: nowrap; } .filter-btn:hover { border-color: var(--navy); color: var(--navy); } .filter-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); } /* Portfolio cards */ .card { background: var(--white); border: 1.5px solid var(--sand-mid); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); } .card:hover { border-color: var(--navy); box-shadow: 0 8px 32px rgba(26,58,143,0.1); transform: translateY(-2px); } .card.expanded { border-color: var(--navy); box-shadow: 0 8px 32px rgba(26,58,143,0.12); transform: none; grid-column: span 3; cursor: default; display: grid; grid-template-columns: 400px 1fr; } .card.expanded:hover { transform: none; } .card-thumb { aspect-ratio: 16/9; background: var(--sand-mid); position: relative; overflow: hidden; flex-shrink: 0; } .card.expanded .card-thumb { aspect-ratio: unset; min-height: 320px; } .card-thumb-img { width: 100%; height: 100%; object-fit: cover; } .card-thumb-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; } .card-thumb-placeholder svg { width: 32px; height: 32px; stroke: var(--sand-dark); fill: none; stroke-width: 1.5; } .card-thumb-placeholder span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--sand-dark); letter-spacing: 0.12em; text-transform: uppercase; } .card-body { padding: 20px 22px 22px; } .card.expanded .card-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; } .card-category { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; opacity: 0.7; } .card-title { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.3; } .card.expanded .card-title { font-size: 1.75rem; margin-bottom: 12px; } .card-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; } .card.expanded .card-desc { font-size: 1rem; line-height: 1.75; margin-bottom: 24px; max-width: 520px; } .card-full-desc { font-size: 1rem; color: var(--muted); line-height: 1.75; margin-bottom: 20px; } .card-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .card-industry { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-muted); display: flex; align-items: center; gap: 6px; } .card-industry::before { content: ''; display: block; width: 3px; height: 3px; background: var(--light-muted); border-radius: 50%; } .card-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; } .card-pill { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--sand-dark); color: var(--slate); background: var(--sand); } .card.expanded .card-pills .card-pill { font-size: 0.75rem; padding: 5px 13px; } .card-expand-extra { display: none; } .card.expanded .card-expand-extra { display: block; } .card-hint { font-size: 0.8125rem; color: var(--light-muted); margin-top: 10px; display: flex; align-items: center; gap: 5px; } .card.expanded .card-hint { display: none; } .card-close-btn { display: none; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--navy); background: none; border: 1.5px solid var(--navy); border-radius: 5px; padding: 10px 20px; cursor: pointer; margin-top: 16px; transition: background var(--t-base); width: fit-content; } .card.expanded .card-close-btn { display: flex; } .card-close-btn:hover { background: var(--navy-pale); } .portfolio-empty { font-size: 1rem; color: var(--muted); padding: 32px; text-align: center; } /* ============================================================ 11. ABOUT PAGE ============================================================ */ /* Page header variant */ .page-header-inner { flex: 1; } /* Mission band */ .mission-band { background: var(--navy); padding: 64px var(--page-pad); position: relative; overflow: hidden; } .mission-band::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .mission-band-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; } .mission-quote-mark { font-family: var(--font-serif); font-size: 5rem; font-weight: 700; color: rgba(255,255,255,0.12); line-height: 0.6; margin-bottom: 8px; } .mission-quote { font-family: var(--font-serif); font-size: 1.875rem; font-weight: 600; font-style: italic; color: var(--white); line-height: 1.4; letter-spacing: -0.01em; } /* Differentiators */ .differentiators-section { padding: var(--section-gap) var(--page-pad); border-bottom: 1px solid var(--sand-mid); } .differentiators-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .diff-card { background: var(--white); border: 1px solid var(--sand-mid); border-radius: 10px; padding: 28px 26px; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); } .diff-card:hover { border-color: var(--navy); box-shadow: 0 6px 24px rgba(26,58,143,0.08); transform: translateY(-2px); } .diff-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--navy-pale); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .diff-card-icon svg { width: 20px; height: 20px; stroke: var(--navy); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .diff-card-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; } .diff-card-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.65; } /* Technologies */ .tech-section { padding: var(--section-gap) var(--page-pad); border-bottom: 1px solid var(--sand-mid); } .tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .tech-col-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--navy-pale); } .tech-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .tech-list li { font-size: 0.9375rem; color: var(--slate); padding-left: 14px; position: relative; line-height: 1.4; } .tech-list li::before { content: '—'; position: absolute; left: 0; color: var(--sand-dark); font-size: 0.8125rem; } /* ============================================================ 12. CONTACT PAGE Info col widened: 380px → 490px ============================================================ */ .contact-page { display: grid; grid-template-columns: 1fr 490px; gap: 0; min-height: calc(100vh - 68px); } .contact-form-col { padding: 64px var(--page-pad) 64px; border-right: 1px solid var(--sand-mid); } .contact-header { margin-bottom: 40px; } /* Form alerts */ .form-alert { padding: 14px 18px; border-radius: 6px; font-size: 0.9375rem; margin-bottom: 24px; line-height: 1.5; } .form-alert--success { background: #edf7f6; border: 1px solid #2a9d8f; color: #1a7a6e; } .form-alert--error { background: #fdf0f2; border: 1px solid var(--pill-design-border); color: var(--pill-design-text); } /* Form elements */ .contact-form { max-width: 580px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .form-group.has-error .form-input, .form-group.has-error .form-select, .form-group.has-error .form-textarea { border-color: var(--pill-design-border); } .form-label { font-size: 0.875rem; font-weight: 500; color: var(--ink); letter-spacing: 0.01em; } .form-required { color: var(--navy); font-weight: 600; } .form-input, .form-select, .form-textarea { font-family: var(--font-sans); font-size: 0.9375rem; color: var(--ink); background: var(--white); border: 1.5px solid var(--sand-dark); border-radius: 6px; padding: 11px 14px; transition: border-color var(--t-base), box-shadow var(--t-base); outline: none; width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,58,143,0.08); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a8d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .form-textarea { resize: vertical; min-height: 120px; } .form-error { font-size: 0.8125rem; color: var(--pill-design-text); } .form-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; } .form-submit-note { font-size: 0.875rem; color: var(--light-muted); } /* Contact info panel */ .contact-info-col { padding: 64px 40px; background: var(--white); } .contact-info-card { background: var(--sand); border: 1px solid var(--sand-mid); border-radius: 10px; padding: 22px 22px; display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .contact-info-icon { width: 38px; height: 38px; border-radius: 8px; background: var(--navy-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-icon svg { width: 17px; height: 17px; stroke: var(--navy); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .contact-info-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--light-muted); margin-bottom: 4px; } .contact-info-value { font-size: 0.9375rem; font-weight: 500; color: var(--navy); text-decoration: none; } .contact-info-value:hover { text-decoration: underline; } .contact-response-note { font-size: 0.875rem; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 36px; padding: 12px 16px; background: var(--navy-pale); border-radius: 6px; line-height: 1.5; } .contact-response-dot { width: 8px; height: 8px; background: #2a9d8f; border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .contact-steps-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light-muted); margin-bottom: 20px; } .contact-steps-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .contact-step { display: flex; gap: 16px; padding-bottom: 24px; position: relative; } .contact-step:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 1px; background: var(--sand-dark); } .contact-step-num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--white); background: var(--navy); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0; } .contact-step strong { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 3px; } .contact-step p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; } /* ============================================================ 13. CTA BAND ============================================================ */ .cta-band { padding: 72px var(--page-pad); display: flex; align-items: center; justify-content: space-between; gap: 60px; border-top: 1px solid var(--sand-mid); } .cta-headline { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; } .cta-headline em { font-style: italic; color: var(--navy); } .cta-sub { font-size: 1rem; color: var(--muted); line-height: 1.65; max-width: 480px; } .cta-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .cta-band-left { flex: 1; } /* ============================================================ 14. FOOTER .footer-inner and .footer-bottom constrained to 1440px. .footer background remains full-bleed. ============================================================ */ .footer { background: var(--navy); position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .footer-watermark { position: absolute; bottom: -40px; right: -20px; font-family: var(--font-serif); font-size: 17.5rem; font-weight: 700; color: rgba(255,255,255,0.03); line-height: 1; user-select: none; pointer-events: none; letter-spacing: -0.04em; } .footer-inner { position: relative; z-index: 2; padding: 60px var(--page-pad) 0; max-width: 1440px; margin: 0 auto; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-brand {} .footer-logo { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .footer-logo-dot { width: 7px; height: 7px; background: rgba(255,255,255,0.5); border-radius: 50%; } .footer-tagline { font-size: 0.875rem; font-weight: 300; color: rgba(255,255,255,0.5); line-height: 1.65; max-width: 240px; margin-bottom: 24px; } .footer-contact-item { display: flex; align-items: center; gap: 10px; } .footer-contact-item svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.35); fill: none; flex-shrink: 0; } .footer-contact-item a { font-size: 0.875rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color var(--t-base); } .footer-contact-item a:hover { color: var(--white); } .footer-col-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 18px; } .footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col-links li a { font-size: 0.9375rem; color: rgba(255,255,255,0.6); text-decoration: none; transition: color var(--t-base); } .footer-col-links li a:hover { color: var(--white); } .footer-services-sublabel { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 10px; } .footer-services-group { margin-bottom: 20px; } .footer-services-group:last-child { margin-bottom: 0; } .footer-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--page-pad); max-width: 1440px; margin: 0 auto; } .footer-copyright { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(255,255,255,0.25); letter-spacing: 0.08em; } .footer-legal-links { display: flex; align-items: center; gap: 24px; list-style: none; } .footer-legal-links a { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(255,255,255,0.25); text-decoration: none; transition: color var(--t-base); } .footer-legal-links a:hover { color: rgba(255,255,255,0.6); } /* Font size accessibility toggle. Placed in footer-legal-links list item (right side of footer bottom bar). Cycles: Normal (16px) → Larger (17px) → Largest (18px) → Normal State is persisted in localStorage via Alpine.js on . */ .font-size-toggle { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; padding: 5px 13px; cursor: pointer; transition: border-color var(--t-base), background var(--t-base), color var(--t-base); font-family: var(--font-mono); color: rgba(255,255,255,0.65); font-size: 0.75rem; letter-spacing: 0.08em; white-space: nowrap; } .font-size-toggle:hover { border-color: rgba(255,255,255,0.7); color: var(--white); background: rgba(255,255,255,0.12); } .font-size-toggle.is-active { border-color: rgba(255,255,255,0.7); color: var(--white); background: rgba(255,255,255,0.14); } .font-size-toggle-icon { font-size: 1rem; font-family: var(--font-sans); font-weight: 700; line-height: 1; color: var(--white); } /* ============================================================ 14a. LEGAL PAGES (Privacy, Terms) ============================================================ */ .legal-page { max-width: 720px; margin: 0 auto; padding: 64px var(--page-pad) 80px; } .legal-header { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--sand-mid); } .legal-updated { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--light-muted); margin-top: 14px; text-transform: uppercase; } .legal-body { display: flex; flex-direction: column; gap: 20px; } .legal-body h2 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-top: 12px; } .legal-body p { font-size: 1rem; color: var(--slate); line-height: 1.75; } .legal-body a { color: var(--navy); text-decoration: underline; } .legal-disclaimer { font-size: 0.875rem !important; color: var(--light-muted) !important; padding: 14px 16px; background: var(--sand-mid); border-radius: 5px; } /* ============================================================ 15. UTILITY ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* page-wrap — 1440px constraint for all main page content */ .page-wrap { max-width: 1440px; margin: 0 auto; width: 100%; } /* ============================================================ 16. ANIMATIONS ============================================================ */ @keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Staggered hero entrance */ .hero-left .eyebrow { animation: fade-up 0.5s ease both; animation-delay: 0.05s; } .hero-left .headline { animation: fade-up 0.5s ease both; animation-delay: 0.12s; } .hero-left .subhead { animation: fade-up 0.5s ease both; animation-delay: 0.2s; } .hero-left .actions { animation: fade-up 0.5s ease both; animation-delay: 0.27s; } .hero-left .stats { animation: fade-up 0.5s ease both; animation-delay: 0.34s; } .hero-right { animation: fade-up 0.5s ease both; animation-delay: 0.18s; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ 17. RESPONSIVE ============================================================ */ @media (max-width: 1100px) { :root { --page-pad: 40px; } .hero { grid-template-columns: 1fr 460px; } .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 900px) { :root { --page-pad: 28px; --section-gap: 56px; } .hero { grid-template-columns: 1fr; min-height: auto; } .hero-right { border-left: none; border-top: 1px solid var(--sand-mid); } .headline { font-size: 2.75rem; } .page-headline { font-size: 2.375rem; } .section-headline { font-size: 1.875rem; } .page-header { flex-direction: column; align-items: flex-start; gap: 20px; } .page-header-right { max-width: 100%; } .portfolio-grid { grid-template-columns: 1fr 1fr; } .card.expanded { grid-column: span 2; grid-template-columns: 1fr; } .card.expanded .card-thumb { min-height: 200px; aspect-ratio: 16/9; } .contact-page { grid-template-columns: 1fr; } .contact-form-col { border-right: none; border-bottom: 1px solid var(--sand-mid); } .contact-info-col { padding: 40px var(--page-pad); } .differentiators-grid { grid-template-columns: 1fr 1fr; } .section-header { flex-direction: column; align-items: flex-start; gap: 12px; } .section-sub { max-width: 100%; } .cta-band { flex-direction: column; align-items: flex-start; gap: 28px; } .cta-actions { flex-wrap: wrap; } } @media (max-width: 640px) { :root { --page-pad: 20px; } /* Mobile nav */ .nav-links { display: none; } .nav-cta { display: none; } .nav-hamburger { display: flex; } .nav-mobile-menu { display: flex; flex-direction: column; position: fixed; top: 68px; left: 0; right: 0; background: var(--sand); border-bottom: 1px solid var(--sand-mid); padding: 20px var(--page-pad); gap: 4px; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform var(--t-base), opacity var(--t-base); z-index: 99; } .nav-mobile-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-mobile-link { font-size: 1rem; font-weight: 500; color: var(--slate); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--sand-mid); letter-spacing: 0.04em; } .nav-mobile-cta { margin-top: 12px; display: inline-block; background: var(--navy); color: var(--white); font-size: 0.9375rem; font-weight: 600; padding: 12px 24px; border-radius: 5px; text-decoration: none; text-align: center; } .headline { font-size: 2.25rem; } .page-headline { font-size: 2rem; } .portfolio-grid { grid-template-columns: 1fr; } .card.expanded { grid-column: span 1; grid-template-columns: 1fr; } .differentiators-grid { grid-template-columns: 1fr; } .tech-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .form-submit-row { flex-direction: column; align-items: flex-start; gap: 12px; } .stats { gap: 0; flex-wrap: wrap; } .stat { padding-right: 24px; margin-right: 24px; } .footer-top { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; } .mission-quote { font-size: 1.25rem; } }