:root { --ink: #14151A; --ink-soft: #1E1F25; --border-ink: #2B2C31; --text-on-ink: #F5F5F2; --text-on-ink-muted: #A9A9A4; --paper: #FAFAF8; --paper-dim: #F1EFE8; --border: #E1DFD6; --text: #1A1A18; --text-muted: #6B6B66; /* Service palette */ --c-teal: #1F6F5C; --c-teal-bright: #4FA893; --c-teal-soft: #DCEAE6; --c-teal-ink: #0F3D32; --c-pink: #E8487A; --c-pink-bright: #FF7FA6; --c-pink-soft: #FCE1EA; --c-pink-ink: #8A1D42; --c-blue: #2D7FF9; --c-blue-bright: #6FA8FF; --c-blue-soft: #DCE9FE; --c-blue-ink: #14458C; --c-amber: #F5A623; --c-amber-bright: #FFC24B; --c-amber-soft: #FDEEDA; --c-amber-ink: #8A5A0C; --c-purple: #7C5CFC; --c-purple-bright: #A78BFF; --c-purple-soft: #EAE4FE; --c-purple-ink: #4630A0; --c-coral: #FF6B4A; --c-coral-bright: #FF9478; --c-coral-soft: #FFE6DE; --c-coral-ink: #A6371C; /* Active theme (default: teal) — overridden per-page by .theme-* on */ --accent: var(--c-teal); --accent-bright: var(--c-teal-bright); --accent-ink: var(--c-teal-ink); --accent-soft: var(--c-teal-soft); --maxw: 1100px; --radius: 3px; /* Default hero photo — overridden per-page via .hero-* class on */ --hero-img: url('img/hero-photo.jpg'); } .hero-about { --hero-img: url('img/hero-about.jpg'); } .hero-contact { --hero-img: url('img/hero-contact.jpg'); } .hero-portfolio { --hero-img: url('img/hero-portfolio.jpg'); } .hero-app-development { --hero-img: url('img/hero-app-development.jpg'); } .hero-web-development { --hero-img: url('img/hero-web-development.jpg'); } .hero-web-applications { --hero-img: url('img/hero-web-applications.jpg'); } .hero-web-design { --hero-img: url('img/hero-web-design.jpg'); } .hero-it-services { --hero-img: url('img/hero-it-services.jpg'); } .hero-cyber-security { --hero-img: url('img/hero-cyber-security.jpg'); } /* Visually hidden but still readable by screen readers — for headings/labels needed for a correct document outline without a visible UI element. */ .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; } .theme-teal { --accent: var(--c-teal); --accent-bright: var(--c-teal-bright); --accent-ink: var(--c-teal-ink); --accent-soft: var(--c-teal-soft); } .theme-pink { --accent: var(--c-pink); --accent-bright: var(--c-pink-bright); --accent-ink: var(--c-pink-ink); --accent-soft: var(--c-pink-soft); } .theme-blue { --accent: var(--c-blue); --accent-bright: var(--c-blue-bright); --accent-ink: var(--c-blue-ink); --accent-soft: var(--c-blue-soft); } .theme-amber { --accent: var(--c-amber); --accent-bright: var(--c-amber-bright); --accent-ink: var(--c-amber-ink); --accent-soft: var(--c-amber-soft); } .theme-purple { --accent: var(--c-purple); --accent-bright: var(--c-purple-bright); --accent-ink: var(--c-purple-ink); --accent-soft: var(--c-purple-soft); } .theme-coral { --accent: var(--c-coral); --accent-bright: var(--c-coral-bright); --accent-ink: var(--c-coral-ink); --accent-soft: var(--c-coral-soft); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; line-height: 1.65; color: var(--text); background: var(--paper); } h1, h2, h3, .headline { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 0; } p { margin: 0 0 1rem; max-width: 62ch; } a { color: inherit; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* Nav */ .site-nav { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--border); z-index: 50; } .site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 68px; } .wordmark { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; text-decoration: none; color: var(--text); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 9px; } .wordmark svg { width: 22px; height: 22px; display: block; flex-shrink: 0; } .footer-grid .wordmark { display: inline-flex; } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-links a { text-decoration: none; font-size: 14px; color: var(--text-muted); } .nav-links a:hover, .nav-links a.current { color: var(--text); } .nav-cta { border: 1px solid var(--text); padding: 9px 16px; border-radius: var(--radius); text-decoration: none; font-size: 14px; color: var(--text) !important; white-space: nowrap; } .nav-cta:hover { background: var(--text); color: var(--paper) !important; } .nav-toggle { display: none; } @media (max-width: 760px) { .nav-links { display: none; } .nav-toggle { display: block; order: 3; margin-left: 10px; background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 16px; line-height: 1; cursor: pointer; color: var(--text); } .nav-cta { order: 2; margin-left: auto; } .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: absolute; top: 68px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--border); padding: 20px 24px; z-index: 49; } .site-nav .container { flex-wrap: wrap; position: relative; } /* Let more of the photo show through on narrow screens, where text spans nearly the full width */ .hero, .cta-band, .page-header { background-image: linear-gradient(100deg, rgba(16,12,26,0.72) 0%, rgba(16,12,26,0.5) 55%, rgba(16,12,26,0.22) 85%), var(--hero-img); } .section-ink { background-image: linear-gradient(260deg, rgba(16,12,26,0.72) 0%, rgba(16,12,26,0.5) 55%, rgba(16,12,26,0.22) 85%), var(--hero-img); } } /* Colorful brand stripe on banner sections */ .hero, .page-header, .cta-band { position: relative; overflow: hidden; } .hero::before, .page-header::before, .cta-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-teal), var(--c-pink), var(--c-blue), var(--c-amber), var(--c-purple), var(--c-coral)); z-index: 3; } /* Optional background video (homepage hero only) — sits above the photo, below the gradient/content */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(100deg, rgba(16,12,26,0.85) 0%, rgba(16,12,26,0.6) 42%, rgba(16,12,26,0.18) 75%); z-index: 1; pointer-events: none; } .hero > .container { position: relative; z-index: 2; } @media (max-width: 760px) { .hero-video { display: none; } .hero::after { background-image: linear-gradient(100deg, rgba(16,12,26,0.72) 0%, rgba(16,12,26,0.5) 55%, rgba(16,12,26,0.22) 85%); } } /* Hero (dark) */ .hero { background-color: #1B1730; background-image: linear-gradient(100deg, rgba(16,12,26,0.85) 0%, rgba(16,12,26,0.6) 42%, rgba(16,12,26,0.18) 75%), var(--hero-img); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; color: var(--text-on-ink); padding: 88px 0 64px; } .hero-eyebrow { font-size: 13px; color: var(--text-on-ink-muted); margin-bottom: 14px; } .hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--text-on-ink); max-width: 16ch; margin-bottom: 18px; } .hero p.lede { font-size: 17px; color: var(--text-on-ink-muted); max-width: 50ch; margin-bottom: 28px; } .hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .btn-solid { display: inline-block; background: var(--paper); color: var(--ink); padding: 13px 22px; border-radius: var(--radius); text-decoration: none; font-size: 14px; font-weight: 500; border: 1px solid var(--paper); } .btn-solid:hover { background: transparent; color: var(--paper); } .btn-outline { display: inline-block; border: 1px solid var(--border); color: var(--text); padding: 12px 22px; border-radius: var(--radius); text-decoration: none; font-size: 14px; } .btn-outline:hover { border-color: var(--text); } .btn-outline-on-photo { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.1); color: var(--text-on-ink); } .btn-outline-on-photo:hover { border-color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.18); } .trust-note { font-size: 13px; color: var(--text-on-ink-muted); } /* Page header (dark photo hero, same treatment as home hero) */ .page-header { background-color: #1B1730; background-image: linear-gradient(100deg, rgba(16,12,26,0.85) 0%, rgba(16,12,26,0.6) 42%, rgba(16,12,26,0.18) 75%), var(--hero-img); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; color: var(--text-on-ink); padding: 72px 0 56px; } .page-header h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--text-on-ink); margin-bottom: 14px; max-width: 20ch; } .page-header p.lede { font-size: 17px; color: var(--text-on-ink-muted); max-width: 56ch; margin-bottom: 22px; } .page-header .btn-outline { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.1); color: var(--text-on-ink); } .page-header .btn-outline:hover { border-color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.18); } /* Sections */ .section { padding: 64px 0; } .section-dim { background: var(--paper-dim); } .section-ink { background-color: #1B1730; background-image: linear-gradient(260deg, rgba(16,12,26,0.85) 0%, rgba(16,12,26,0.6) 42%, rgba(16,12,26,0.18) 75%), var(--hero-img); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; color: var(--text-on-ink); } .section-ink p { color: var(--text-on-ink-muted); } .section-label { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; } .section-ink .section-label { color: var(--text-on-ink-muted); } .section h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 14px; max-width: 22ch; } /* Services section (home): same dark-photo treatment as .section-ink, its own image. Content spans the full width here (a 6-card grid), not just one side, so this uses a flatter, more uniform overlay instead of section-ink's one-sided diagonal fade. */ .section-ink.section-services { background-image: linear-gradient(rgba(16,12,26,0.82), rgba(16,12,26,0.82)), url('img/services-bg.jpg'); } .section-ink .cap-grid { border-top-color: var(--border-ink); border-left-color: var(--border-ink); } .section-ink .cap-item { border-right-color: var(--border-ink); border-bottom-color: var(--border-ink); color: var(--text-on-ink); } .section-ink .cap-item .desc { color: var(--text-on-ink-muted); } /* Capability grid on home */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .cap-item { position: relative; overflow: hidden; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 26px 24px; text-decoration: none; color: var(--text); display: block; transition: transform 0.25s ease; } .cap-item:hover { z-index: 2; } .cap-mark { width: 10px; height: 10px; background: var(--accent); margin-bottom: 14px; position: relative; z-index: 1; } .cap-item .name, .cap-item .desc { position: relative; z-index: 1; } .cap-item .name { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; margin-bottom: 6px; } .cap-item .desc { font-size: 13px; color: var(--text-muted); } /* Each service in the home grid gets its own color, used for the mark and the hover glow */ .cap-grid .cap-item:nth-child(1) { --card-glow: var(--c-teal); } .cap-grid .cap-item:nth-child(2) { --card-glow: var(--c-pink); } .cap-grid .cap-item:nth-child(3) { --card-glow: var(--c-blue); } .cap-grid .cap-item:nth-child(4) { --card-glow: var(--c-amber); } .cap-grid .cap-item:nth-child(5) { --card-glow: var(--c-purple); } .cap-grid .cap-item:nth-child(6) { --card-glow: var(--c-coral); } .cap-grid .cap-item:nth-child(1) .cap-mark { background: var(--c-teal); } .cap-grid .cap-item:nth-child(2) .cap-mark { background: var(--c-pink); } .cap-grid .cap-item:nth-child(3) .cap-mark { background: var(--c-blue); } .cap-grid .cap-item:nth-child(4) .cap-mark { background: var(--c-amber); } .cap-grid .cap-item:nth-child(5) .cap-mark { background: var(--c-purple); } .cap-grid .cap-item:nth-child(6) .cap-mark { background: var(--c-coral); } @media (max-width: 760px) { .cap-grid { grid-template-columns: 1fr; } } /* Spotlight (alternating) blocks */ .spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .spotlight.reverse .spotlight-text { order: 2; } .spotlight.reverse .spotlight-visual { order: 1; } .spotlight-text ul { list-style: none; margin: 18px 0 0; padding: 0; } .spotlight-text ul li { border-left: 2px solid var(--accent); padding: 4px 0 4px 14px; margin-bottom: 10px; font-size: 14px; } .section-ink .spotlight-text ul li { border-left-color: var(--accent-bright); } .link-text { text-decoration: underline; text-underline-offset: 3px; font-size: 14px; font-weight: 500; color: var(--accent-ink); } .section-ink .link-text { color: var(--accent-bright); } @media (max-width: 760px) { .spotlight, .spotlight.reverse { grid-template-columns: 1fr; } .spotlight.reverse .spotlight-text { order: 1; } .spotlight.reverse .spotlight-visual { order: 2; } } /* Google Calendar booking embed */ .booking-embed { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 900px; } .booking-embed iframe { display: block; width: 100%; height: 600px; } @media (max-width: 600px) { .booking-embed iframe { height: 720px; } } /* Abstract code-bar visual (stand-in for screenshots) */ .code-panel { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .section-ink .code-panel { background: var(--ink-soft); border-color: var(--border-ink); } .code-panel .bar { height: 8px; background: var(--border); border-radius: 2px; margin-bottom: 9px; } .section-ink .code-panel .bar { background: var(--border-ink); } .code-panel .bar.accent { background: var(--accent); } .code-panel .bar.w70 { width: 70%; } .code-panel .bar.w45 { width: 45%; } .code-panel .bar.w90 { width: 90%; } .code-panel .bar.w30 { width: 30%; } .code-panel .bar.w60 { width: 60%; } /* Steps */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; } .step .num { font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: var(--accent-ink); margin-bottom: 8px; } .step .title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; margin-bottom: 6px; } .step p { font-size: 14px; color: var(--text-muted); } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } } /* Portfolio grid */ .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; } .portfolio-item { position: relative; display: block; text-decoration: none; color: var(--text); padding: 6px; margin: -6px; border-radius: 8px; transition: transform 0.25s ease; --card-glow: var(--accent); } .portfolio-item:hover { z-index: 2; } .portfolio-item > * { position: relative; z-index: 1; } .portfolio-item .name { font-family: 'Space Grotesk', sans-serif; font-size: 15px; margin: 14px 0 4px; } .portfolio-item .desc { font-size: 13px; color: var(--text-muted); } .portfolio-item .tag { font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 8px; border-radius: 2px; display: inline-block; margin-top: 8px; } @media (max-width: 760px) { .portfolio-grid { grid-template-columns: 1fr; } } /* Portfolio tags colored by service */ .portfolio-item[data-tag="Web development"] { --card-glow: var(--c-teal); } .portfolio-item[data-tag="Web design"] { --card-glow: var(--c-pink); } .portfolio-item[data-tag="App development"] { --card-glow: var(--c-blue); } .portfolio-item[data-tag="Web applications"] { --card-glow: var(--c-amber); } .portfolio-item[data-tag="IT services"] { --card-glow: var(--c-purple); } .portfolio-item[data-tag="Cyber security"] { --card-glow: var(--c-coral); } .portfolio-item[data-tag="Web development"] .tag { color: var(--c-teal-ink); background: var(--c-teal-soft); } .portfolio-item[data-tag="Web design"] .tag { color: var(--c-pink-ink); background: var(--c-pink-soft); } .portfolio-item[data-tag="App development"] .tag { color: var(--c-blue-ink); background: var(--c-blue-soft); } .portfolio-item[data-tag="Web applications"] .tag { color: var(--c-amber-ink); background: var(--c-amber-soft); } .portfolio-item[data-tag="IT services"] .tag { color: var(--c-purple-ink); background: var(--c-purple-soft); } .portfolio-item[data-tag="Cyber security"] .tag { color: var(--c-coral-ink); background: var(--c-coral-soft); } .filter-btn[data-filter="Web development"]:hover { border-color: var(--c-teal); color: var(--c-teal-ink); } .filter-btn[data-filter="Web design"]:hover { border-color: var(--c-pink); color: var(--c-pink-ink); } .filter-btn[data-filter="App development"]:hover { border-color: var(--c-blue); color: var(--c-blue-ink); } .filter-btn[data-filter="Web applications"]:hover { border-color: var(--c-amber); color: var(--c-amber-ink); } .filter-btn[data-filter="IT services"]:hover { border-color: var(--c-purple); color: var(--c-purple-ink); } .filter-btn[data-filter="Cyber security"]:hover { border-color: var(--c-coral); color: var(--c-coral-ink); } .portfolio-item[data-tag="Web development"] .code-panel .bar.accent { background: var(--c-teal); } .portfolio-item[data-tag="Web design"] .code-panel .bar.accent { background: var(--c-pink); } .portfolio-item[data-tag="App development"] .code-panel .bar.accent { background: var(--c-blue); } .portfolio-item[data-tag="Web applications"] .code-panel .bar.accent { background: var(--c-amber); } .portfolio-item[data-tag="IT services"] .code-panel .bar.accent { background: var(--c-purple); } .portfolio-item[data-tag="Cyber security"] .code-panel .bar.accent { background: var(--c-coral); } .filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .filter-btn { border: 1px solid var(--border); background: transparent; padding: 8px 14px; border-radius: var(--radius); font-size: 13px; cursor: pointer; color: var(--text); } .filter-btn.active { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); } /* Closing CTA */ .cta-band { background-color: #1B1730; background-image: linear-gradient(100deg, rgba(16,12,26,0.85) 0%, rgba(16,12,26,0.6) 42%, rgba(16,12,26,0.18) 75%), var(--hero-img); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; color: var(--text-on-ink); padding: 56px 0; text-align: left; } .cta-band h2 { color: var(--text-on-ink); margin-bottom: 18px; font-size: clamp(1.5rem, 3vw, 2.1rem); } /* Footer */ footer { background-color: #1B1730; background-image: linear-gradient(rgba(16,12,26,0.88), rgba(16,12,26,0.88)), var(--hero-img); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; color: var(--text-on-ink-muted); border-top: 1px solid var(--border-ink); padding: 48px 0 28px; font-size: 13px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; } .footer-grid .wordmark { color: var(--text-on-ink); } .footer-grid h3 { font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: var(--text-on-ink); font-weight: 500; margin-bottom: 12px; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 8px; } .footer-grid a { text-decoration: none; color: var(--text-on-ink-muted); } .footer-grid a:hover { color: var(--text-on-ink); } .footer-bottom { border-top: 1px solid var(--border-ink); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* Form */ .form-message { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: 20px; } .form-message:empty { display: none; } .form-message.success { background: var(--accent-soft); color: var(--accent-ink); } .form-message.error { background: #FDECEC; color: #7A1F1A; border: 1px solid #F2B8B5; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; max-width: 640px; } .form-grid .full { grid-column: 1 / -1; } label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } input, select, textarea { width: 100%; font-family: inherit; font-size: 14px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); color: var(--text); } textarea { resize: vertical; min-height: 110px; } .submit-btn { background: var(--ink); color: var(--text-on-ink); border: 1px solid var(--ink); padding: 13px 24px; border-radius: var(--radius); font-size: 14px; cursor: pointer; } .submit-btn:hover { opacity: 0.9; } .submit-btn:disabled { opacity: 0.5; cursor: default; } @media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } } /* Custom Google Calendar booking widget */ .booking-widget { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; max-width: 720px; } .booking-step-label { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .booking-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 24px; } .booking-day-btn { flex: 0 0 auto; border: 1px solid var(--border); background: transparent; border-radius: var(--radius); padding: 10px 14px; font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: center; line-height: 1.3; } .booking-day-btn .dow { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .booking-day-btn .dom { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; } .booking-day-btn:hover { border-color: var(--accent); } .booking-day-btn.active { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); } .booking-day-btn.active .dow { color: var(--text-on-ink-muted); } .booking-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .booking-slot-btn { border: 1px solid var(--border); background: transparent; border-radius: var(--radius); padding: 9px 16px; font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; } .booking-slot-btn:hover { border-color: var(--accent); color: var(--accent-ink); } .booking-slot-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .booking-status { font-size: 13px; color: var(--text-muted); padding: 8px 0; } .booking-status.error { color: #7A1F1A; } .booking-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .booking-form .selected-slot { font-size: 14px; margin-bottom: 16px; } .booking-form .selected-slot strong { color: var(--text); } .booking-success { text-align: center; padding: 20px 0; } .booking-success .icon { font-size: 32px; margin-bottom: 12px; } .booking-success h3 { margin-bottom: 8px; } .booking-success p { color: var(--text-muted); max-width: 44ch; margin: 0 auto; } .booking-success a { color: var(--accent-ink); font-weight: 500; } /* Values / about */ .value-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; } .value-list .title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; margin-bottom: 8px; } .value-list p { font-size: 14px; color: var(--text-muted); } @media (max-width: 760px) { .value-list { grid-template-columns: 1fr; } } .pull-quote { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 500; line-height: 1.4; max-width: 30ch; margin: 24px 0; } /* Checklist (deliverables etc.) */ .check-list { list-style: none; margin: 18px 0 0; padding: 0; max-width: 640px; } .check-list li { border-left: 2px solid var(--accent); padding: 4px 0 4px 14px; margin-bottom: 10px; font-size: 14px; color: var(--text-muted); } /* FAQ accordion */ .faq { max-width: 760px; margin-top: 20px; } .faq details { border-bottom: 1px solid var(--border); padding: 18px 0; } .faq summary { cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 20px; color: var(--accent-ink); flex-shrink: 0; } .faq details[open] summary::after { content: "\2212"; } .faq details p { margin: 10px 0 0; color: var(--text-muted); font-size: 14px; max-width: 62ch; } /* Process timeline */ .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; } .timeline .step .when { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 4px; display: block; } @media (max-width: 760px) { .timeline { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- Motion & interaction --------------------------------------------------------------- */ /* Living background: a slow drift on the hero / dark spotlight / CTA band photo */ .hero, .section-ink, .cta-band { animation: bg-drift 26s ease-in-out infinite; } @keyframes bg-drift { 0% { background-position: center, center; } 50% { background-position: center, 56% 44%; } 100% { background-position: center, center; } } /* Card tilt (applied via JS transform) + a cursor-following glow in the card's own service color */ .cap-item::before, .portfolio-item::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--card-glow, var(--accent)) 0%, transparent 60%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .cap-item:hover::before, .portfolio-item:hover::before { opacity: 0.16; } /* Magnetic buttons */ .btn-solid, .nav-cta { transition: transform 0.15s ease-out, background 0.2s, color 0.2s, opacity 0.2s; } /* Scroll reveal — gated behind html.js so content is always visible if JS never runs */ html.js .cap-item, html.js .portfolio-item, html.js .spotlight-text, html.js .spotlight-visual, html.js .step, html.js .value-list > div, html.js .faq details { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(.16,.8,.3,1), transform 0.6s cubic-bezier(.16,.8,.3,1); } html.js .cap-item.reveal-visible, html.js .portfolio-item.reveal-visible, html.js .spotlight-text.reveal-visible, html.js .spotlight-visual.reveal-visible, html.js .step.reveal-visible, html.js .value-list > div.reveal-visible, html.js .faq details.reveal-visible { opacity: 1; transform: translateY(0); } /* .cap-item/.portfolio-item already transition `transform` for the hover tilt; let the reveal fade run on opacity alone once visible so hover isn't fighting it. */ html.js .cap-item.reveal-visible, html.js .portfolio-item.reveal-visible { transition-property: opacity, transform, box-shadow; } /* Logo draw-in — precise stroke lengths are set by JS; this is just the initial hidden state */ html.js .site-nav .wordmark svg path, html.js .site-nav .wordmark svg line { stroke-dasharray: 500; stroke-dashoffset: 500; } html.js .site-nav .wordmark svg rect { opacity: 0; transform: scale(0.3); transform-origin: 60px 70px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero, .section-ink, .cta-band { animation: none; } } /* Mobile bottom navigation */ .mobile-bottom-nav { display: none; } @media (max-width: 760px) { body { padding-bottom: 68px; } .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--border); padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); } .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; text-decoration: none; color: var(--text-muted); font-size: 10px; line-height: 1.1; white-space: nowrap; } .mobile-nav-item svg { width: 20px; height: 20px; display: block; } .mobile-nav-item.current { color: var(--accent-ink); } } /* Rich article editor — font classes (shared by admin editor and published content) */ .ql-font-space-grotesk { font-family: 'Space Grotesk', sans-serif; } .ql-font-ibm-plex-sans { font-family: 'IBM Plex Sans', sans-serif; } .ql-font-inter { font-family: 'Inter', sans-serif; } .ql-font-roboto { font-family: 'Roboto', sans-serif; } .ql-font-poppins { font-family: 'Poppins', sans-serif; } .ql-font-montserrat { font-family: 'Montserrat', sans-serif; } .ql-font-merriweather { font-family: 'Merriweather', serif; } .ql-font-playfair-display { font-family: 'Playfair Display', serif; } .ql-font-source-code-pro { font-family: 'Source Code Pro', monospace; } .ql-font-lato { font-family: 'Lato', sans-serif; } /* Quill font picker — show each font name set in its own face */ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="space-grotesk"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="space-grotesk"]::before { content: "Space Grotesk"; font-family: 'Space Grotesk', sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="ibm-plex-sans"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="ibm-plex-sans"]::before { content: "IBM Plex Sans"; font-family: 'IBM Plex Sans', sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="inter"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="inter"]::before { content: "Inter"; font-family: 'Inter', sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before { content: "Roboto"; font-family: 'Roboto', sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="poppins"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="poppins"]::before { content: "Poppins"; font-family: 'Poppins', sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="montserrat"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="montserrat"]::before { content: "Montserrat"; font-family: 'Montserrat', sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="merriweather"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="merriweather"]::before { content: "Merriweather"; font-family: 'Merriweather', serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="playfair-display"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="playfair-display"]::before { content: "Playfair Display"; font-family: 'Playfair Display', serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="source-code-pro"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="source-code-pro"]::before { content: "Source Code Pro"; font-family: 'Source Code Pro', monospace; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lato"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lato"]::before { content: "Lato"; font-family: 'Lato', sans-serif; } /* Responsive embedded video (YouTube etc.) inside article/page content */ .ql-editor .ql-video, .article-content .ql-video, .page-content .ql-video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); display: block; margin: 20px 0; } /* Article/page images inserted via the rich editor */ .article-content img, .page-content img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 20px 0; } .admin-form-card .ql-container { border-radius: 0 0 3px 3px; font-size: 15px; } .admin-form-card .ql-toolbar { border-radius: 3px 3px 0 0; } .admin-form-card .ql-editor { min-height: 280px; } /* Skip link */ .skip-link { position: absolute; top: -50px; left: 12px; background: var(--ink); color: var(--text-on-ink); padding: 10px 18px; border-radius: var(--radius); font-size: 14px; text-decoration: none; z-index: 100; transition: top 0.15s ease; } .skip-link:focus { top: 12px; }