/* ============================================================ Farren Technology Group — site styles Aesthetic: modern-conservative trusted IT firm Type: IBM Plex Serif (display) + IBM Plex Sans (UI) ============================================================ */ :root { /* Palette — set against the logo's deep navy + cyan ribbon */ --bg: #FFFFFF; --surface: #F5F7FA; --surface-2: #EDF1F6; --ink: #0B1726; --ink-2: #1B2A40; --muted: #5B6A7E; --muted-2: #93A1B3; --line: #E3E8EF; --line-2: #CFD7E2; --accent: #1F8FFF; --accent-soft: #7AC4F2; --accent-ink: #0B3A6E; --warn: #C9651B; --ok: #1E8459; /* Type */ --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Density (set via .density-* on ) */ --pad-section: 96px; --pad-container: 32px; --gap: 24px; --radius: 6px; --radius-lg: 14px; --max-w: 1280px; } html.density-compact { --pad-section: 64px; --gap: 16px; } html.density-comfy { --pad-section: 128px; --gap: 32px; } html.dark { --bg: #0A1320; --surface: #111E30; --surface-2: #15263C; --ink: #F1F5FA; --ink-2: #D7DEE8; --muted: #93A1B3; --muted-2: #6A7889; --line: #1F2F46; --line-2: #2A3D58; --accent-ink: #C9E4FF; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ── Type scale ─────────────────────────────────────────── */ .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); display: inline-block; } html.dark .eyebrow::before { background: var(--accent); } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--ink); } h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.025em; } h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; } h3 { font-size: 22px; line-height: 1.2; } h4 { font-size: 17px; line-height: 1.3; font-weight: 600; } p { margin: 0; text-wrap: pretty; } .lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; } .muted { color: var(--muted); } /* ── Layout primitives ──────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad-container); padding-right: var(--pad-container); } section.section { padding-top: var(--pad-section); padding-bottom: var(--pad-section); } section.section.tight { padding-top: calc(var(--pad-section) * 0.5); padding-bottom: calc(var(--pad-section) * 0.5); } section.section.bare { padding-top: 0; } .divider { border: 0; border-top: 1px solid var(--line); margin: 0; } /* ── Buttons ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--surface); } .btn-link { background: transparent; color: var(--ink); padding: 0; border: 0; font-weight: 500; } .btn-link:hover { color: var(--accent); } .btn-arrow::after { content: "→"; font-family: var(--font-sans); transition: transform 0.15s; } .btn-arrow:hover::after { transform: translateX(3px); } /* ── Nav ───────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 32px; } .nav-logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .nav-logo img { height: 48px; width: auto; display: block; } html.dark .nav-logo img { background: #fff; padding: 6px 10px; border-radius: 6px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); border-radius: 6px; position: relative; } .nav-links a:hover { color: var(--ink); background: var(--surface); } .nav-links a.active { color: var(--accent); } .nav-links a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1.5px; background: var(--accent); border-radius: 1px; } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav-portal { font-size: 14px; padding: 9px 16px; font-weight: 500; white-space: nowrap; } /* ── Hero ──────────────────────────────────────────────── */ .hero { padding-top: 80px; padding-bottom: 80px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } .hero h1 { margin-bottom: 28px; } .hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; } .hero .lead { margin-bottom: 36px; } .hero-meta { display: flex; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); } .hero-meta-item { display: flex; gap: 8px; align-items: baseline; } .hero-meta-item strong { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; } .hero-actions { display: flex; gap: 12px; } /* Hero visual — abstract network/uptime panel */ .hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; position: relative; } .hero-card-hd { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; } .hero-card-hd span:last-child { color: var(--ok); display: flex; align-items: center; gap: 6px; } .hero-card-hd span:last-child::before { content: ""; width: 8px; height: 8px; background: var(--ok); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 5%, transparent); } } .hero-card h4 { font-family: var(--font-serif); font-weight: 500; margin-bottom: 4px; } .hero-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } .hero-stat { padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .hero-stat-num { font-family: var(--font-serif); font-size: 36px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; } .hero-stat-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .hero-sparkline { margin-top: 20px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .hero-sparkline-lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .hero-sparkline-val { color: var(--accent); } /* ── Services grid ─────────────────────────────────────── */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .service-card { background: var(--bg); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; min-height: 240px; transition: background 0.15s; position: relative; cursor: pointer; } .service-card:hover { background: var(--surface); } .service-card-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); } .service-card h3 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; letter-spacing: -0.015em; color: var(--ink); } .service-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; } .service-card-arrow { font-family: var(--font-sans); color: var(--accent); font-size: 18px; align-self: flex-start; transition: transform 0.15s; } .service-card:hover .service-card-arrow { transform: translateX(4px); } /* Service detail rows (Services page) */ .service-row { display: grid; grid-template-columns: 0.7fr 2fr; gap: 64px; padding: 56px 0; border-top: 1px solid var(--line); } .service-row:last-child { border-bottom: 1px solid var(--line); } .service-row-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .service-row-mono strong { display: block; font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.02em; text-transform: none; color: var(--ink); margin-top: 8px; font-weight: 500; } .service-row-body p { color: var(--ink-2); max-width: 62ch; margin-bottom: 20px; } .service-row-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; } .service-row-list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); padding: 6px 0; } .service-row-list li::before { content: "—"; color: var(--accent); font-family: var(--font-mono); } /* ── Industries ────────────────────────────────────────── */ .industries { background: var(--ink); color: #fff; padding: 96px 0; } html.dark .industries { background: var(--surface-2); } .industries h2 { color: #fff; } .industries .eyebrow { color: var(--accent-soft); } .industries .eyebrow::before { background: var(--accent-soft); } .industries .lead { color: #C2CEDF; } .industries-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); overflow: hidden; } .industry-card { background: var(--ink); padding: 32px 28px; min-height: 200px; display: flex; flex-direction: column; gap: 14px; } html.dark .industry-card { background: var(--surface-2); } .industry-card-glyph { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 20px; color: var(--accent-soft); } .industry-card h3 { color: #fff; font-size: 20px; font-weight: 500; } .industry-card p { color: #93A1B3; font-size: 14px; line-height: 1.55; } /* ── Service area map ──────────────────────────────────── */ .map-section { background: var(--surface); } .map-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; margin-top: 56px; } .map-counties { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); } .map-counties li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; } .map-counties li strong { font-family: var(--font-serif); font-weight: 500; font-size: 16px; } .map-counties li span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; } .map-counties li:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--line); } .map-counties li:nth-child(even) { padding-left: 24px; } .map-visual { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; aspect-ratio: 1 / 1; position: relative; } .map-visual svg { width: 100%; height: 100%; } .map-legend { position: absolute; bottom: 24px; left: 32px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: flex; gap: 18px; } .map-legend span { display: flex; align-items: center; gap: 6px; } .map-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; } .map-legend span:nth-child(1)::before { background: var(--accent); } .map-legend span:nth-child(2)::before { background: var(--accent-soft); } /* ── CTA band ──────────────────────────────────────────── */ .cta-band { padding: 80px 0; border-top: 1px solid var(--line); } .cta-band-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; } .cta-band h2 { font-size: 38px; letter-spacing: -0.02em; } .cta-band-cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } /* ── Footer ────────────────────────────────────────────── */ .footer { background: var(--ink); color: #C2CEDF; padding: 80px 0 32px; } html.dark .footer { background: var(--surface-2); } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; } .footer-brand img { height: 64px; width: auto; background: #fff; padding: 8px 12px; border-radius: 6px; margin-bottom: 22px; } .footer-brand p { color: #93A1B3; font-size: 14px; max-width: 28ch; } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 18px; font-weight: 500; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: #C2CEDF; transition: color 0.15s; } .footer-col a:hover { color: var(--accent-soft); } .footer-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-family: var(--font-mono); letter-spacing: 0.04em; color: #6A7889; } .footer-bottom a:hover { color: var(--accent-soft); } /* ── Contact form ──────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; } .contact-info { display: flex; flex-direction: column; gap: 28px; } .contact-info-item { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); } .contact-info-item .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .contact-info-item .val { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .contact-info-item .sub { font-size: 14px; color: var(--muted); } .form { background: var(--surface); padding: 40px; border-radius: var(--radius-lg); border: 1px solid var(--line); } .form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row.split > * { margin-bottom: 0; } .form-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .form-input, .form-textarea, .form-select { font-family: var(--font-sans); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .form-textarea { resize: vertical; min-height: 140px; } .form-error { color: var(--warn); font-size: 13px; margin-top: 4px; } .urgency-chips { display: flex; gap: 8px; } .urgency-chip { flex: 1; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: 14px; color: var(--ink-2); transition: all 0.15s; } .urgency-chip[data-on="1"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--accent-ink); } .urgency-chip strong { display: block; font-weight: 500; color: var(--ink); } .urgency-chip[data-on="1"] strong { color: var(--accent-ink); } .urgency-chip small { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .captcha { display: flex; align-items: center; gap: 12px; margin: 20px 0; padding: 14px 16px; background: var(--bg); border: 1px dashed var(--line-2); border-radius: var(--radius); font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .captcha-dot { width: 18px; height: 18px; border: 2px solid var(--line-2); border-radius: 50%; border-top-color: var(--accent); animation: spin 0.9s linear infinite; flex-shrink: 0; } .captcha.ok .captcha-dot { border: 0; background: var(--ok); animation: none; position: relative; } .captcha.ok .captcha-dot::after { content: "✓"; color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 700; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } @keyframes spin { to { transform: rotate(360deg); } } .captcha-brand { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; } .form-submit { width: 100%; padding: 16px; justify-content: center; font-size: 15px; font-weight: 500; } .form-success { background: color-mix(in srgb, var(--ok) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line)); padding: 24px; border-radius: var(--radius); display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; } .form-success-icon { width: 32px; height: 32px; background: var(--ok); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } /* ── About page ────────────────────────────────────────── */ .about-hero { padding-top: 80px; padding-bottom: 80px; } .about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .about-photo { aspect-ratio: 4/5; background: repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--surface) 12px 24px); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; align-items: flex-end; padding: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* About — fact sheet aside (replaces team photo) */ .about-aside { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; align-self: start; } .about-aside-row { padding: 22px 28px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .about-aside-row:last-child { border-bottom: 0; } .about-aside-row .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .about-aside-row .val { font-family: var(--font-serif); font-size: 24px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: 1.15; } .about-aside-row .sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; } .timeline { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .timeline-item { background: var(--bg); padding: 32px 28px; } .timeline-item .yr { font-family: var(--font-serif); font-size: 36px; line-height: 1; letter-spacing: -0.02em; color: var(--accent); margin-bottom: 12px; } .timeline-item h4 { font-family: var(--font-serif); font-weight: 500; font-size: 18px; margin-bottom: 8px; } .timeline-item p { font-size: 14px; color: var(--muted); } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; } .value h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; margin-bottom: 12px; } .value p { color: var(--muted); font-size: 15px; } .value-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 14px; } /* ── Page hero (sub-pages) ─────────────────────────────── */ .page-hero { padding: 80px 0 60px; border-bottom: 1px solid var(--line); } .page-hero h1 { font-size: clamp(36px, 4.5vw, 60px); margin-bottom: 20px; max-width: 18ch; } .page-hero .lead { max-width: 56ch; } /* About page hero — features the logo */ .about-page-hero { padding-bottom: 80px; } .about-page-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; } .about-page-hero-grid h1 { max-width: 22ch; } .about-logo-frame { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px 24px; display: flex; flex-direction: column; gap: 24px; overflow: hidden; max-width: 380px; margin-left: auto; } .about-logo-frame::before { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%); pointer-events: none; } .about-logo-frame img { width: 100%; max-width: 220px; margin: 0 auto; display: block; position: relative; } html.dark .about-logo-frame img { background: #fff; padding: 16px 20px; border-radius: 8px; } .about-logo-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; } .about-logo-meta > div { background: var(--bg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .about-logo-meta span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .about-logo-meta strong { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); } /* ── Misc ──────────────────────────────────────────────── */ .kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); color: var(--muted); } /* ── Portal page ───────────────────────────────────────── */ .portal-page { padding: 80px 0 120px; background: radial-gradient(ellipse 80% 50% at 80% 0%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%), var(--bg); } .portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .portal-left h1 em { color: var(--accent); font-style: italic; font-weight: 500; } .portal-feature-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 14px; } .portal-feature-list li { padding: 14px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: baseline; } .portal-feature-list li:last-child { border-bottom: 1px solid var(--line); } .portal-feature-list strong { font-family: var(--font-serif); font-weight: 500; font-size: 17px; color: var(--ink); } .portal-feature-list span { color: var(--muted); font-size: 14.5px; } .portal-security { margin-top: 40px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); } .portal-security .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; margin-bottom: 6px; } .portal-security p { color: var(--ink-2); font-size: 14px; } .portal-right { display: flex; flex-direction: column; gap: 32px; position: sticky; top: 100px; } .portal-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: 0 1px 0 rgba(11,23,38,0.02), 0 24px 60px -28px rgba(11,23,38,0.18); } .portal-card h2 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; } .portal-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--muted-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .portal-divider::before, .portal-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .portal-alt { display: flex; flex-direction: column; gap: 8px; } /* Portal preview card (the "peek inside") */ .portal-preview-wrap { border: 1px dashed var(--line-2); border-radius: var(--radius-lg); padding: 12px; background: var(--surface); } .portal-preview-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 4px 8px 10px; display: flex; align-items: center; gap: 6px; } .portal-preview { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .portal-preview-hd { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); } .portal-preview-hd-l .lbl { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .portal-preview-hd-l strong { font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--ink); } .portal-preview-hd-r { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok); } .portal-preview-hd-r .dot { width: 7px; height: 7px; background: var(--ok); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); } .portal-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); } .portal-preview-stats > div { background: var(--bg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .portal-preview-stats span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .portal-preview-stats strong { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1; letter-spacing: -0.015em; color: var(--ink); } .portal-preview-stats strong em { font-size: 14px; font-style: normal; color: var(--muted); font-weight: 400; } .portal-preview-stats small { font-size: 11.5px; color: var(--muted); } .portal-bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 8px; } .portal-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; } .portal-preview-tickets { padding: 4px 0; } .portal-preview-tickets .lbl-row { padding: 14px 20px 8px; display: grid; grid-template-columns: 56px 1fr 110px 70px; gap: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .ticket-row { padding: 11px 20px; display: grid; grid-template-columns: 56px 1fr 110px 70px; gap: 12px; align-items: center; border-top: 1px solid var(--line); font-size: 13px; } .ticket-id { font-family: var(--font-mono); color: var(--muted); font-size: 11.5px; } .ticket-title { color: var(--ink); } .ticket-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); text-align: center; } .ticket-status.status-in-progress { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--accent-ink); } .ticket-status.status-awaiting-client { background: color-mix(in srgb, var(--warn) 14%, var(--bg)); color: var(--warn); } .ticket-status.status-scheduled { background: var(--surface-2); color: var(--ink-2); } .ticket-status.status-resolved { background: color-mix(in srgb, var(--ok) 14%, var(--bg)); color: var(--ok); } .ticket-when { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); text-align: right; } @media (max-width: 960px) { .hero-grid, .map-wrap, .contact-grid, .about-hero-grid, .cta-band-inner, .about-page-hero-grid, .portal-grid { grid-template-columns: 1fr; } .services-grid, .industries-grid { grid-template-columns: 1fr 1fr; } .timeline { grid-template-columns: 1fr 1fr; } .values-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .service-row { grid-template-columns: 1fr; gap: 24px; } .portal-right { position: static; } } @media (max-width: 640px) { .services-grid, .industries-grid { grid-template-columns: 1fr; } .timeline { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .form-row.split { grid-template-columns: 1fr; } .nav-links { display: none; } } /* ── Additions for the production port ─────────────────── */ .hidden { display: none !important; } /* Two-up section heading (eyebrow + h2 on left, lead paragraph on right) */ .two-up-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; } @media (max-width: 960px) { .two-up-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; } } /* Dark service card variant ("Not sure where to start?") */ .service-card-dark { background: var(--ink); color: #fff; } .service-card-dark:hover { background: var(--ink-2); } .service-card-dark h3 { color: #fff; } .service-card-dark p { color: #C2CEDF; } .service-card-dark .service-card-num { color: var(--accent-soft); } .service-card-dark .service-card-arrow { color: #fff; } /* Mobile hamburger button */ .nav-burger { display: none; width: 40px; height: 40px; background: transparent; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 1px; transition: transform 0.15s, opacity 0.15s; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .nav-mobile { display: none; /* hidden by default — burger toggles [hidden] */ background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 0; flex-direction: column; } .nav-mobile a { padding: 14px var(--pad-container); font-size: 16px; font-weight: 500; color: var(--ink-2); border-top: 1px solid var(--line); } .nav-mobile a:first-child { border-top: 0; } .nav-mobile a.active { color: var(--accent); } @media (max-width: 640px) { .nav-burger { display: flex; } .nav-cta { display: none; } .nav-mobile:not([hidden]) { display: flex; } } /* ── Live-support page ─────────────────────────────────── */ .support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 28px; } .step-list li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: flex-start; } .step-num { font-family: var(--font-serif); font-size: 28px; font-weight: 500; color: var(--accent); letter-spacing: -0.02em; line-height: 1; padding-top: 6px; } .step-list h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; margin-bottom: 6px; letter-spacing: -0.015em; } .step-list p { color: var(--muted); font-size: 15px; } .step-list p a { font-weight: 500; } .support-callout { margin-top: 40px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); } .support-callout .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; margin-bottom: 6px; } .support-callout p { color: var(--ink-2); font-size: 14px; } .support-form-wrap { position: sticky; top: 100px; } @media (max-width: 960px) { .support-grid { grid-template-columns: 1fr; gap: 48px; } .support-form-wrap { position: static; } } /* ── Authenticated portal dashboard ─────────────────────── */ .dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } .dash-contract { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; margin-bottom: 40px; } .dash-contract-hero { display: grid; grid-template-columns: 1.2fr 1.6fr; gap: 48px; align-items: center; } .dash-hero-main { display: flex; flex-direction: column; gap: 8px; } .dash-stat-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .dash-hero-val { font-family: var(--font-serif); font-weight: 500; font-size: 88px; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); } .dash-hero-val em { font-style: normal; font-size: 36px; color: var(--muted); font-weight: 400; margin-left: 6px; } .dash-hero-val.low { color: var(--warn); } .dash-hero-note { font-family: var(--font-sans); font-size: 13px; color: var(--warn); margin-top: 6px; } .dash-hero-side { display: grid; grid-template-columns: 1fr; gap: 32px; padding-left: 48px; border-left: 1px solid var(--line); } .dash-hero-side:has(.dash-side-stat ~ .dash-side-stat) { /* Two stats (monthly clients): keep them side-by-side. Prepaid clients only render one and get the full width. */ grid-template-columns: 1fr 1fr; } .dash-side-stat { display: flex; flex-direction: column; gap: 4px; } .dash-side-val { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); } .dash-side-val em { font-style: normal; font-size: 14px; color: var(--muted); font-weight: 400; } .dash-side-sub { font-size: 13px; color: var(--muted); } @media (max-width: 720px) { .dash-contract-hero { grid-template-columns: 1fr; gap: 32px; } .dash-hero-side { grid-template-columns: 1fr 1fr; padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--line); } .dash-hero-val { font-size: 64px; } } .dash-burn { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); } .dash-burn-lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .dash-burn-lbl span:last-child { color: var(--ink-2); } .dash-burn-chart { display: flex; flex-direction: column; } .dash-burn-bars { display: flex; gap: 3px; align-items: flex-end; height: 88px; padding-bottom: 0; border-bottom: 1px solid var(--line-2); } .dash-burn-col { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; } .dash-burn-bar { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; transition: opacity 0.15s, background 0.15s; } .dash-burn-bar.empty { background: var(--line); min-height: 2px; /* a thin "no activity" tick along the axis */ height: 2px !important; } .dash-burn-col:hover .dash-burn-bar:not(.empty) { background: var(--accent-ink); } .dash-burn-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; padding-top: 6px; } .dash-tickets-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .dash-filter { display: flex; gap: 2px; background: var(--surface); border-radius: var(--radius); padding: 4px; border: 1px solid var(--line); } .dash-filter a { padding: 6px 14px; font-family: var(--font-sans); font-size: 13px; color: var(--muted); border-radius: 4px; } .dash-filter a.active { background: var(--bg); color: var(--accent-ink); font-weight: 500; box-shadow: 0 1px 0 rgba(11,23,38,0.04); } .dash-filter a:hover:not(.active) { color: var(--ink); } .dash-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .dash-table th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 16px; text-align: left; background: var(--surface); border-bottom: 1px solid var(--line); } .dash-table td { padding: 14px 16px; border-top: 1px solid var(--line); } .dash-table tr:first-child td { border-top: 0; } .dash-table .col-num { text-align: right; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; } .dash-table .col-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; } .dash-table .col-status { width: 1%; white-space: nowrap; } .dash-table .ticket-num { color: var(--muted); } .dash-table .ticket-link { color: var(--ink); } .dash-table .ticket-link:hover { color: var(--accent); } .dash-table .ticket-status { display: inline-block; padding: 3px 10px; border-radius: 99px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; } .dash-table .ticket-status.status-open { background: color-mix(in srgb, var(--warn) 12%, var(--bg)); color: var(--warn); } .dash-table .ticket-status.status-closed { background: color-mix(in srgb, var(--ok) 12%, var(--bg)); color: var(--ok); } .dash-paging { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .dash-paging-summary { letter-spacing: 0.04em; } .dash-paging-controls { display: flex; align-items: center; gap: 8px; } .dash-paging-pos { font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); padding: 0 8px; } .dash-page-btn { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink); padding: 7px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); transition: background 0.15s, border-color 0.15s, color 0.15s; } .dash-page-btn:hover:not(.disabled) { background: var(--surface); border-color: var(--accent); color: var(--accent); } .dash-page-btn.disabled { color: var(--muted-2); background: var(--surface); border-color: var(--line); cursor: not-allowed; pointer-events: none; } /* Ticket search bar above the table */ .dash-search { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; position: relative; } .dash-search-input { flex: 1; font-family: var(--font-sans); font-size: 14px; padding: 10px 38px 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .dash-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .dash-search-btn { padding: 9px 18px; } .dash-search-clear { position: absolute; right: 96px; /* sit just left of the Search button */ top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 14px; text-decoration: none; line-height: 1; } .dash-search-clear:hover { background: var(--warn); color: #fff; } .dash-empty { padding: 64px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius-lg); } @media (max-width: 720px) { .dash-contract-grid { grid-template-columns: 1fr 1fr; } .dash-table .col-date, .dash-table .col-num:not(:nth-child(5)) { display: none; } } /* ── Staff admin page ─────────────────────────────────── */ .staff-new-form .form-select { font-family: var(--font-sans); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px; outline: none; width: 100%; } .staff-new-form .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .staff-actions { display: flex; gap: 4px; flex-wrap: wrap; } .staff-actions form { margin: 0; } .staff-actions .btn-link { font-size: 12.5px; padding: 4px 8px; } /* ── Ticket detail page ───────────────────────────────── */ .ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .ticket-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 40px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); } .ticket-meta div { display: flex; flex-direction: column; gap: 4px; } .ticket-meta dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; } .ticket-meta dd { font-family: var(--font-serif); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; color: var(--ink); margin: 0; line-height: 1.2; } .ticket-meta dd em { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 400; } .ticket-notes-body { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; word-break: break-word; padding: 24px 28px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .ticket-empty { padding: 64px 24px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); } @media (max-width: 720px) { .ticket-meta { grid-template-columns: 1fr 1fr; } .ticket-head { flex-direction: column; } } /* ── "Getting it installed" — Windows + macOS columns ─────── */ .install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; } @media (max-width: 960px) { .install-grid { grid-template-columns: 1fr; } } .install-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 32px 28px; } .install-card-hd { margin-bottom: 12px; } .install-card-os { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); padding: 4px 10px; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); border-radius: 99px; margin-bottom: 14px; } .install-card-hd h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; } .install-intro { color: var(--muted); font-size: 15px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .install-step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; margin-bottom: 24px; } .install-step:last-child { margin-bottom: 0; } .install-step-num { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 2px; } .install-step h4 { font-family: var(--font-serif); font-weight: 500; font-size: 16.5px; margin-bottom: 6px; letter-spacing: -0.01em; } .install-step p { font-size: 14.5px; color: var(--ink-2); } .install-step p strong { color: var(--ink); font-weight: 500; } .install-step code { font-family: var(--font-mono); font-size: 12.5px; padding: 1px 5px; background: var(--surface-2); border-radius: 3px; color: var(--ink); } /* Screenshot figures — gracefully hide when image file is missing. */ .install-shot { margin: 14px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .install-shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); } .install-shot figcaption { padding: 8px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.03em; } .install-shot figcaption code { font-size: 11px; background: var(--bg); } /* If the errors (file missing), JS adds this class — hide the whole figure, keep the text readable on its own. */ .install-shot-empty { display: none; }