/* ============================================================================= elal.dev — Site Stylesheet Imports shared_brand_palette.css and applies the .theme-elal variant. ELAL Dev Limited brand: Indigo accent, IBM Plex Mono + DM Sans, dark-first. ============================================================================= */ @import url('shared_brand_palette.css'); /* Fonts loaded via Google Fonts in each HTML : IBM Plex Mono (400, 500, 600, 700) — brand/headings/mono DM Sans (400, 500, 600) — body text See each HTML file for the tag. */ /* ============================================================================= Reset & Base ============================================================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-padding-top: 140px; /* site-nav (64px) + jump-nav (~72px) */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html:not(.ready) * { transition: none !important; } html.ready { scroll-behavior: smooth; } @media (width <= 768px) { html { scroll-padding-top: 200px; } /* taller pill bar when pills wrap to multiple rows */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans), sans-serif; font-size: var(--text-base); line-height: var(--text-base-lh); font-weight: var(--font-normal); color: var(--text-primary); background-color: var(--bg-page); } ::selection { background: var(--slate-200); color: var(--slate-900); } a { color: var(--text-link); text-decoration: none; transition: color var(--duration-normal) var(--ease-default); } a:hover { color: var(--brand-primary); } /* ============================================================================= Layout ============================================================================= */ .container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); } .container--narrow { max-width: 720px; text-align: justify; } /* ============================================================================= Navigation ============================================================================= */ .site-nav { border-bottom: 1px solid var(--border-default); background: var(--bg-page); position: sticky; top: 0; z-index: 100; } .site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; } .site-nav__wordmark { font-size: var(--text-sm); font-weight: var(--font-light); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--slate-700); text-decoration: none; transition: color var(--duration-normal) var(--ease-default); position: relative; } .site-nav__wordmark::after { content: ''; display: block; width: 50%; height: 1px; background: var(--accent-400); margin: 2px auto 0; } .site-nav__wordmark:hover { color: var(--text-primary); } .site-nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; } .site-nav__links a { font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--slate-700); text-decoration: none; letter-spacing: var(--tracking-wide); transition: color var(--duration-normal) var(--ease-default); padding: var(--space-1) 0; } .site-nav__links a:hover, .site-nav__links a.active { color: var(--slate-900); } .site-nav__links a.active { border-bottom: 1px solid var(--accent-400); padding-bottom: calc(var(--space-1) - 1px); } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text-primary); margin: 4px 0; transition: all var(--duration-normal) var(--ease-default); } @media (width <= 768px) { .nav-toggle { display: block; } .site-nav__links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--bg-page); border-bottom: 1px solid var(--border-default); flex-direction: column; padding: var(--space-4) var(--space-6); gap: var(--space-4); } .site-nav__links.open { display: flex; } } /* ============================================================================= Hero Sections ============================================================================= */ .hero { padding: var(--space-16) 0 var(--space-20); text-align: center; } .hero--compact { padding: var(--space-8) 0 var(--space-12); } .hero--home { padding: var(--space-24) 0; } .hero__wordmark { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: var(--font-light); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-4); position: relative; display: inline-block; } .hero--home .hero__wordmark { color: var(--slate-700); } .hero__wordmark::after { content: ''; display: block; width: 50%; height: 2px; background: var(--accent-400); margin: 2px auto 0; } .hero__tagline { font-size: var(--text-lg); font-weight: var(--font-normal); color: var(--text-secondary); letter-spacing: var(--tracking-wide); margin: var(--space-4) auto var(--space-2); max-width: 640px; } .hero--home .hero__tagline { color: var(--slate-500); } .hero__subtitle { font-size: var(--text-base); color: var(--text-tertiary); max-width: 600px; margin: 0 auto; line-height: var(--text-base-lh); } .hero__page-title { font-size: var(--text-4xl); font-weight: var(--font-light); letter-spacing: var(--tracking-tight); color: var(--slate-800); margin-bottom: var(--space-4); display: inline-block; } .hero__page-title::after { content: ''; display: block; width: 70%; height: 2px; background: var(--accent-400); margin: 4px 0 0 14%; } .hero__page-desc { font-size: var(--text-lg); color: var(--slate-500); max-width: 640px; margin: 0 auto; line-height: var(--text-lg-lh); } .hero--left { text-align: left; } .hero--left .hero__page-desc { margin: 0; } /* ============================================================================= Sections ============================================================================= */ .section { padding: var(--space-14) 0; text-align: justify; } .section--alt { background-color: transparent; } .section--dark { background: var(--bg-hero); color: var(--text-inverse); } .section__label { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--slate-500); margin-bottom: var(--space-3); } .hero .section__label { display: block; margin-bottom: 0; } .section__title { font-size: var(--text-3xl); font-weight: var(--font-light); letter-spacing: var(--tracking-tight); color: var(--text-primary); margin-bottom: var(--space-4); } .section--dark .section__title { color: var(--text-inverse); } .section__desc { font-size: var(--text-lg); color: var(--text-secondary); max-width: 640px; line-height: var(--text-lg-lh); margin-bottom: var(--space-10); } .section--dark .section__desc { color: var(--neutral-300); } /* ============================================================================= Typography ============================================================================= */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-semibold); color: var(--text-primary); } h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); } h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); } h4 { font-size: var(--text-lg); margin-bottom: var(--space-2); } p { margin-bottom: var(--space-4); max-width: 720px; } strong { font-weight: var(--font-semibold); } code { font-family: var(--font-mono), monospace; font-size: 0.875em; background: var(--bg-sunken); padding: 2px 6px; border-radius: var(--radius-sm); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-small { font-size: var(--text-sm); } /* ============================================================================= Cards ============================================================================= */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); } .card-grid--2col { grid-template-columns: repeat(2, 1fr); } @media (width <= 768px) { .card-grid--2col { grid-template-columns: 1fr; } } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (width <= 900px) { .card-grid--3 { grid-template-columns: 1fr; } } .card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-10); transition: box-shadow var(--duration-normal) var(--ease-default); } .card:hover { box-shadow: var(--shadow-md); } .card__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--teal-50); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); color: var(--brand-primary); font-size: var(--text-lg); } .card__title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-1); } .card__subtitle { font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-3); } .card__text { font-size: var(--text-base); color: var(--text-secondary); line-height: var(--text-base-lh); text-align: justify; } /* ============================================================================= Stat Cards ============================================================================= */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); margin: var(--space-10) 0; } .stat { text-align: center; padding: var(--space-6) var(--space-4); } .stat__value { font-size: var(--text-3xl); font-weight: var(--font-light); color: var(--brand-primary); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-1); } .stat__label { font-size: var(--text-sm); color: var(--text-secondary); letter-spacing: var(--tracking-wide); } /* ============================================================================= Tables ============================================================================= */ .table-wrap { overflow-x: auto; margin: var(--space-6) 0; border-radius: var(--radius-lg); border: 1px solid var(--border-default); } table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } thead { background: var(--bg-sunken); } th { font-weight: var(--font-semibold); color: var(--text-primary); text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); white-space: nowrap; } td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: top; text-align: left; } tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--bg-sunken); } /* Strong / total rows */ tr.row--strong td { font-weight: var(--font-semibold); color: var(--text-primary); border-top: 2px solid var(--border-default); } td.td--right, th.th--right { text-align: right; } td.td--nowrap { white-space: nowrap; } /* ============================================================================= Wordmark Links ============================================================================= */ .wordmark-link { color: inherit; text-decoration: none; } .wordmark-ll { color: var(--accent-600); font-weight: 700; } strong:has(> .wordmark-ll) { white-space: nowrap; } /* ============================================================================= Call-to-Action Buttons ============================================================================= */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); font-family: var(--font-sans), sans-serif; font-size: var(--text-lg); font-weight: var(--font-medium); text-decoration: none; border: 1px solid var(--slate-300); cursor: pointer; transition: all var(--duration-normal) var(--ease-default); } .btn:hover { border-color: var(--accent-400); } .btn--primary { background: var(--slate-800); color: var(--text-inverse); border-color: var(--slate-800); } .btn--primary:hover { background: var(--slate-900); color: var(--text-inverse); border-color: var(--accent-400); box-shadow: var(--shadow-sm); font-weight: var(--font-semibold); } .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; } .btn--cta { background: var(--brand-cta); color: #fff; border-color: var(--brand-cta); } .btn--cta:hover { background: var(--terracotta-700); color: #fff; border-color: var(--accent-400); box-shadow: var(--shadow-sm); } .btn--outline { background: transparent; color: var(--slate-700); border-color: var(--slate-300); } .btn--outline:hover { background: transparent; color: var(--slate-900); border-color: var(--accent-400); } .btn-group { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); } /* llingr.io branded CTA */ .cta-llingr { display: inline-flex; align-items: center; margin-top: var(--space-8); padding: var(--space-3) var(--space-8); background: var(--brand-primary); color: var(--text-inverse); border-radius: var(--radius-md); font-size: var(--text-lg); font-weight: var(--font-semibold); text-decoration: none; transition: background var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default); } .cta-llingr:hover { background: var(--teal-800); box-shadow: var(--shadow-md); color: var(--text-inverse); } .cta-llingr:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; } .cta-llingr .ll { color: var(--accent-400); } .cta-llingr__arrow { font-size: var(--text-xl); opacity: 0.7; transition: transform var(--duration-normal) var(--ease-default); } .cta-llingr:hover .cta-llingr__arrow { transform: translateX(3px); } .cta-llingr--lg { font-size: var(--text-2xl); padding: var(--space-4) var(--space-12); } .site-footer .cta-llingr--footer { margin-top: var(--space-4); font-size: var(--text-base); padding: var(--space-2) var(--space-5); background: #fff; color: var(--slate-900); border: 2px solid transparent; font-weight: var(--font-bold); letter-spacing: var(--tracking-tight); } .site-footer .cta-llingr--footer .ll { color: var(--brand-accent); } .site-footer .cta-llingr--footer .cta-llingr__arrow { opacity: 0.3; } .site-footer .cta-llingr--footer:hover { background: #fff; color: var(--slate-900); border-color: var(--accent-400); box-shadow: none; } .site-footer .cta-llingr--footer:hover .cta-llingr__arrow { opacity: 1; } /* ============================================================================= Dividers & Decorations ============================================================================= */ .divider { width: 48px; height: 2px; background: var(--slate-400); margin: var(--space-6) 0; } .divider--center { margin-left: auto; margin-right: auto; } /* Hero divider draw animation */ .hero--home .divider { margin-top: var(--space-3); margin-bottom: var(--space-6); transform: scaleX(0); animation: divider-draw 0.8s ease-in-out 0.3s forwards; } @keyframes divider-draw { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .hero--home .divider { animation: none; transform: scaleX(1); } } hr { border: none; border-top: 1px solid var(--border-default); margin: var(--space-10) 0; } /* ============================================================================= Badges & Labels ============================================================================= */ .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wide); } .badge--teal { background: var(--teal-50); color: var(--teal-700); } .badge--accent { background: var(--accent-100); color: var(--accent-800); } .badge--terracotta { background: var(--terracotta-50); color: var(--terracotta-700); } .badge--slate { background: var(--slate-100); color: var(--slate-700); } /* ============================================================================= Risk Assessment Cards ============================================================================= */ .risk { padding: var(--space-6); border-left: 3px solid var(--border-default); margin-bottom: var(--space-6); } .risk--critical { border-left-color: var(--error); background: var(--error-bg); } .risk--high { border-left-color: var(--warning); background: var(--warning-bg); } .risk--medium { border-left-color: var(--info); background: var(--info-bg); } .risk__level { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: var(--space-2); } .risk--critical .risk__level { color: var(--error); } .risk--high .risk__level { color: var(--warning); } .risk--medium .risk__level { color: var(--info); } .risk__title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-2); } .risk__text { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-3); } .risk__mitigation { font-size: var(--text-sm); color: var(--text-primary); } .risk__mitigation strong { color: var(--brand-primary); } /* ============================================================================= Two-Column Layout ============================================================================= */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } .two-col--narrow-text { grid-template-columns: 2fr 3fr; } @media (width <= 768px) { .two-col, .two-col--narrow-text { grid-template-columns: 1fr; gap: var(--space-8); } } /* ============================================================================= Timeline ============================================================================= */ .timeline { position: relative; padding-left: var(--space-8); } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border-default); } .timeline__item { position: relative; margin-bottom: var(--space-10); } .timeline__item::before { content: ''; position: absolute; left: calc(-1 * var(--space-8) - 4px); top: 6px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--brand-primary); border: 2px solid var(--bg-page); } .timeline__label { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--brand-accent); margin-bottom: var(--space-1); } .timeline__title { font-size: var(--text-xl); font-weight: var(--font-semibold); margin-bottom: var(--space-2); } .timeline__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--text-sm-lh); } /* ============================================================================= Contact Form ============================================================================= */ .form-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 0 var(--space-4); } @media (width <= 768px) { .form-grid { grid-template-columns: 1fr; } } .form-group { margin-bottom: var(--space-5); } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: var(--space-1-5); } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: var(--space-2-5) var(--space-3); border: 2px solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-sans), sans-serif; font-size: var(--text-base); color: var(--text-primary); background: var(--bg-page); transition: border-color var(--duration-normal) var(--ease-default); } .form-group 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 1.5L6 6.5L11 1.5' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); } .form-group textarea { resize: vertical; min-height: 120px; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent-400); border-width: 2px; box-shadow: none; } /* 12-column grid: labels 2, inputs 3, labels 4, inputs 3 */ @media (width >= 1024px) { .form-grid { grid-template-columns: repeat(5, 1fr) var(--space-8) repeat(6, 1fr); gap: var(--space-5) var(--space-3); } /* Message (full width, outside grid) */ .form-group--inline { display: flex; align-items: start; gap: var(--space-3); margin-top: var(--space-5); } .form-group--inline label { flex-shrink: 0; min-width: 5rem; margin-bottom: 0; padding-top: var(--space-2-5); } .form-grid .form-group { display: contents; margin-bottom: 0; } .form-grid .form-group label { display: flex; align-items: center; margin-bottom: 0; } /* Left column (children 1-3: Name, Phone, Email) — label col 1, input cols 2-5 */ .form-grid .form-group:nth-child(1) label { grid-row: 1; grid-column: 1 / 2; } .form-grid .form-group:nth-child(1) input, .form-grid .form-group:nth-child(1) select { grid-row: 1; grid-column: 2 / 6; } .form-grid .form-group:nth-child(2) label { grid-row: 2; grid-column: 1 / 2; } .form-grid .form-group:nth-child(2) input, .form-grid .form-group:nth-child(2) select { grid-row: 2; grid-column: 2 / 6; } .form-grid .form-group:nth-child(3) label { grid-row: 3; grid-column: 1 / 2; } .form-grid .form-group:nth-child(3) input, .form-grid .form-group:nth-child(3) select { grid-row: 3; grid-column: 2 / 6; } /* Right column (children 4-6: Company, Industry, Enquiry) — label cols 6-8, input cols 9-12 */ .form-grid .form-group:nth-child(4) label { grid-row: 1; grid-column: 7 / 9; } .form-grid .form-group:nth-child(4) input, .form-grid .form-group:nth-child(4) select { grid-row: 1; grid-column: 9 / 13; } .form-grid .form-group:nth-child(5) label { grid-row: 2; grid-column: 7 / 9; } .form-grid .form-group:nth-child(5) input, .form-grid .form-group:nth-child(5) select { grid-row: 2; grid-column: 9 / 13; } .form-grid .form-group:nth-child(6) label { grid-row: 3; grid-column: 7 / 9; } .form-grid .form-group:nth-child(6) input, .form-grid .form-group:nth-child(6) select { grid-row: 3; grid-column: 9 / 13; } } /* ============================================================================= Footer ============================================================================= */ .site-footer { background: var(--slate-900); color: var(--neutral-400); padding: var(--space-8) 0 var(--space-6); } .site-footer a:any-link { color: var(--neutral-300); text-decoration: none; } .site-footer a:hover { color: var(--accent-400); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-6); } @media (width <= 768px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .footer__brand { font-size: var(--text-xs); font-weight: var(--font-light); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--neutral-300); margin-bottom: var(--space-3); position: relative; display: inline-block; } .footer__brand::after { content: ''; display: block; width: 50%; height: 1px; background: var(--accent-400); margin: 2px auto 0; } .footer__desc { font-size: var(--text-sm); color: var(--neutral-500); line-height: var(--text-sm-lh); max-width: 320px; } .footer__heading { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--neutral-400); margin-bottom: var(--space-3); } .footer__links { list-style: none; } .footer__links li { margin-bottom: var(--space-2); } .footer__links a:any-link { font-size: var(--text-sm); } .footer__bottom { border-top: 1px solid var(--slate-800); padding-top: var(--space-2); display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--neutral-500); } @media (width <= 768px) { .footer__bottom { flex-direction: column; gap: var(--space-2); text-align: center; } } /* ============================================================================= Key-Value Description Lists ============================================================================= */ .kv-list { list-style: none; } .kv-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); display: flex; gap: var(--space-4); } .kv-list li:last-child { border-bottom: none; } .kv-list__key { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); min-width: 180px; flex-shrink: 0; } .kv-list__value { font-size: var(--text-sm); color: var(--text-secondary); } @media (width <= 600px) { .kv-list li { flex-direction: column; gap: var(--space-1); } } /* ============================================================================= Callout Boxes ============================================================================= */ .callout { padding: var(--space-5) var(--space-6); border-left: 3px solid var(--brand-accent); background: var(--bg-sunken); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-6) 0; } .callout p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 0; } .callout strong { color: var(--text-primary); } /* ============================================================================= Jump Navigation (pill-style anchor links) ============================================================================= */ .jump-nav { padding: var(--space-3) 0; margin-top: calc(-1 * var(--space-12)); text-align: center; position: sticky; top: 64px; /* below site-nav */ z-index: 90; background: var(--bg-page); box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); } .jump-nav__pills { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1-5); padding: var(--space-1); background: rgb(0 0 0 / 0.04); border-radius: var(--radius-full); } .jump-nav__pill { padding: var(--space-1-5) var(--space-4); border-radius: var(--radius-full); border: 1px solid transparent; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-tertiary); opacity: 0.7; text-decoration: none; white-space: nowrap; letter-spacing: var(--tracking-wide); transition: color var(--duration-normal) var(--ease-default), background var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default); } .jump-nav__pill:focus-visible { outline: none; border-color: var(--accent-300); } .jump-nav__pill:hover { color: var(--slate-900); background: transparent; } .jump-nav__pill.active { color: var(--slate-800); background: #fff; border-color: transparent; opacity: 1; } .jump-nav__pill:active { background: rgb(15 97 102 / 0.08); } @media (width <= 768px) { .jump-nav__pills { border-radius: var(--radius-lg); padding: var(--space-2); } } /* ============================================================================= Utility ============================================================================= */ .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); } .text-center { text-align: center; } .max-w-prose { max-width: 720px; } /* ============================================================================= ACCESSIBILITY — Keyboard Focus Indicators ============================================================================= */ :focus-visible { outline: var(--ring-width, 2px) solid var(--brand-accent, #2EC4B6); outline-offset: var(--ring-offset, 2px); } a:any-link:focus-visible, button:focus-visible, /* stylelint-disable-next-line no-descending-specificity */ input:focus-visible, /* stylelint-disable-next-line no-descending-specificity */ textarea:focus-visible, /* stylelint-disable-next-line no-descending-specificity */ select:focus-visible, [tabindex]:focus-visible { outline: var(--ring-width, 2px) solid var(--brand-accent, #2EC4B6); outline-offset: var(--ring-offset, 2px); } .form-group input:focus-visible, .form-group textarea:focus-visible, .form-group select:focus-visible { outline: none; } /* ============================================================================= ACCESSIBILITY — Skip-to-Content Link ============================================================================= */ .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: 200; padding: var(--space-2) var(--space-4); background: var(--brand-accent, #2EC4B6); color: var(--teal-950, #041E20); font-family: var(--font-sans), sans-serif; font-size: var(--text-sm); font-weight: var(--font-semibold); border-radius: 0 0 var(--radius-md) var(--radius-md); text-decoration: none; transition: top var(--duration-fast) var(--ease-default); } .skip-link:focus { top: 0; outline: var(--ring-width, 2px) solid var(--brand-primary, #0F6166); outline-offset: var(--ring-offset, 2px); } /* Product title link — teal "ll" goes black on hover */ .section__title a:hover .ll-hover { color: var(--text-primary); } /* ============================================================================= elal.dev — Site-specific additions ELAL Dev Limited brand: dark-first, indigo (#6366f1), IBM Plex Mono + DM Sans ============================================================================= */ /* ---- ELAL logo mark ------------------------------------------------------- */ /* Nav wordmark: {ELAL} */ .elal-mark { display: inline-flex; align-items: center; gap: 0.05em; font-family: var(--font-mono); font-weight: 600; } .elal-brace { color: var(--brand-primary); font-weight: 400; opacity: 0.8; } /* Hero mark */ .elal-hero-mark { font-family: var(--font-mono); font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 600; letter-spacing: 0.18em; color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: 0.1em; line-height: 1; } .elal-hero-mark .elal-brace { font-size: 1.15em; opacity: 0.75; font-weight: 400; } .elal-hero-sub { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.45em; text-transform: uppercase; color: var(--text-tertiary); text-align: center; margin-top: var(--space-2); } /* ---- Dark-first site adjustments ------------------------------------------ */ /* The whole site is dark; .section--dark is a slightly different dark shade */ .theme-elal .section--dark { background: var(--bg-sunken); } /* Accent decorations — swap teal accent-400 refs to brand indigo */ .theme-elal .site-nav__wordmark::after, .theme-elal .hero__wordmark::after, .theme-elal .footer__brand::after, .theme-elal .site-nav__links a.active { background: var(--brand-primary); border-bottom-color: var(--brand-primary); } .theme-elal .site-nav__links a.active { border-bottom-color: var(--brand-primary); } /* Nav */ .theme-elal .site-nav { background: rgba(13, 16, 32, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Hero */ .hero--dark { background: var(--bg-hero); } /* section-label color (was teal accent) */ .theme-elal .section__label { color: var(--brand-primary); } .theme-elal .section--dark .section__label { color: var(--brand-accent); } .theme-elal .section--dark .section__title { color: var(--text-primary); } /* Cards in dark sections */ .section--dark .card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } .section--dark .card:hover { background: rgba(255, 255, 255, 0.07); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .section--dark .card__title { color: var(--text-primary); } .section--dark .card__text { color: var(--text-secondary); } .section--dark .card__icon { background: rgba(99, 102, 241, 0.15); color: var(--brand-accent); } .section--dark .section__label { color: var(--brand-accent); } /* Service icon box — larger 48px */ .card__icon--lg { width: 48px; height: 48px; border-radius: var(--radius-lg); font-size: var(--text-xl); } /* Discipline cards: icon + title + text, centered on hover */ .card--discipline { display: flex; flex-direction: column; } .card--discipline .card__icon { flex-shrink: 0; } /* Role cards in dark section */ .role-card { padding: var(--space-6) var(--space-8); } .role-card .role-card__label { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent-400); margin-bottom: var(--space-2); } .role-card .card__title { font-size: var(--text-xl); margin-bottom: var(--space-3); } /* Inline icon SVGs */ .icon { display: block; width: 22px; height: 22px; } /* CTA band */ .cta-band { padding: var(--space-16) 0; text-align: center; } .cta-band__title { font-size: var(--text-3xl); font-weight: var(--font-light); letter-spacing: var(--tracking-tight); color: var(--text-primary); margin-bottom: var(--space-4); } .cta-band__subtitle { font-size: var(--text-lg); color: var(--text-secondary); margin: 0 auto var(--space-8); max-width: 520px; } /* Engagement model cards — highlight accent border on hover */ .card--engagement:hover { border-color: var(--brand-accent); } /* Contact info block */ .contact-info { padding: var(--space-8); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-sunken); height: fit-content; } .contact-info__item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); } .contact-info__item:last-child { border-bottom: none; } .contact-info__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--brand-accent); } .contact-info__label { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-1); } .contact-info__value { font-size: var(--text-sm); color: var(--text-primary); } /* Form success / error state */ .form-status { display: none; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-6); font-size: var(--text-sm); font-weight: var(--font-medium); } .form-status--success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); } .form-status--error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); } .form-status.visible { display: block; } /* Stats strip */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-10) 0; } .stats-strip__item { padding: var(--space-8) var(--space-6); text-align: center; border-right: 1px solid var(--border-default); } .stats-strip__item:last-child { border-right: none; } .stats-strip__value { font-size: var(--text-3xl); font-weight: var(--font-light); color: var(--brand-primary); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-1); } .stats-strip__label { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-tertiary); } @media (width <= 768px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } .stats-strip__item:nth-child(2) { border-right: none; } .stats-strip__item:nth-child(3) { border-top: 1px solid var(--border-default); } .stats-strip__item:nth-child(4) { border-top: 1px solid var(--border-default); border-right: none; } } @media (width <= 480px) { .stats-strip { grid-template-columns: 1fr; } .stats-strip__item { border-right: none !important; border-top: 1px solid var(--border-default); } .stats-strip__item:first-child { border-top: none; } } /* ============================================================================= .theme-elal dark site — component overrides Fixes hard-coded scale colors (slate-900, neutral-*, accent-400) that don't inherit from the dark semantic tokens automatically. ============================================================================= */ /* Buttons — indigo instead of teal/terracotta/slate */ .theme-elal .btn--primary { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } .theme-elal .btn--primary:hover { background: var(--brand-secondary); color: #fff; border-color: var(--brand-accent); } .theme-elal .btn--cta { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } .theme-elal .btn--cta:hover { background: var(--brand-secondary); color: #fff; border-color: var(--brand-accent); } .theme-elal .btn--outline { color: var(--text-secondary); border-color: var(--border-default); } .theme-elal .btn--outline:hover { color: var(--text-primary); border-color: var(--brand-primary); background: rgba(99, 102, 241, 0.06); } /* Footer — dark-site footer should be the deepest surface */ .theme-elal .site-footer { background: var(--bg-sunken); border-top: 1px solid var(--border-default); color: var(--text-secondary); } .theme-elal .site-footer a:any-link { color: var(--text-secondary); } .theme-elal .site-footer a:hover { color: var(--brand-accent); } .theme-elal .footer__brand { color: var(--text-primary); } .theme-elal .footer__bottom { border-top-color: var(--border-default); color: var(--text-tertiary); } /* Card icon background — indigo tint instead of teal */ .theme-elal .card__icon { background: rgba(99, 102, 241, 0.12); color: var(--brand-accent); } /* Jump-nav active pill */ .theme-elal .jump-nav { background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); box-shadow: none; } .theme-elal .jump-nav__pills { background: rgba(255, 255, 255, 0.04); } .theme-elal .jump-nav__pill.active { background: rgba(99, 102, 241, 0.15); color: var(--brand-accent); } /* Timeline dots — indigo */ .theme-elal .timeline__item::before { background: var(--brand-primary); } .theme-elal .timeline__label { color: var(--brand-primary); } /* Callout border */ .theme-elal .callout { border-left-color: var(--brand-primary); background: rgba(99, 102, 241, 0.06); } /* Form inputs — dark backgrounds */ .theme-elal .form-group input, .theme-elal .form-group textarea, .theme-elal .form-group select { background: var(--bg-card); border-color: var(--border-default); color: var(--text-primary); color-scheme: dark; } .theme-elal .form-group input:focus, .theme-elal .form-group textarea:focus, .theme-elal .form-group select:focus { border-color: var(--brand-primary); } .theme-elal .form-group input::placeholder, .theme-elal .form-group textarea::placeholder { color: var(--text-tertiary); } /* KV list */ .theme-elal .kv-list__key { color: var(--text-primary); } /* Role card accent label */ .theme-elal .role-card__label { color: var(--brand-primary); } /* Divider (hero underline) — indigo */ .theme-elal .divider { background: var(--brand-primary); } /* Selection */ .theme-elal ::selection { background: var(--selection-bg); color: var(--selection-text); } /* Table header */ .theme-elal thead { background: var(--bg-elevated); } .theme-elal th { color: var(--text-primary); border-bottom-color: var(--border-default); } .theme-elal td { border-bottom-color: var(--border-subtle); color: var(--text-secondary); } .theme-elal tbody tr:hover { background: var(--bg-elevated); } /* Stats strip value */ .theme-elal .stats-strip__value { color: var(--brand-primary); } /* Badge colors */ .theme-elal .badge--teal { background: rgba(99, 102, 241, 0.12); color: var(--brand-accent); } /* Stat cards */ .theme-elal .stat__value { color: var(--brand-primary); } /* Focus ring — indigo */ .theme-elal :focus-visible { outline-color: var(--brand-primary); } /* ============================================================================= Founder / About Page — headshot hero, game title chips ============================================================================= */ .founder-hero { display: grid; grid-template-columns: 1fr auto; gap: var(--space-16); align-items: center; padding: var(--space-6) 0; } .founder-hero__name { font-size: var(--text-4xl); font-weight: var(--font-light); letter-spacing: var(--tracking-tight); color: var(--text-primary); margin-bottom: var(--space-2); line-height: 1.1; } .founder-hero__role { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-5); } .founder-hero__intro { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--text-lg-lh); max-width: 580px; margin-bottom: var(--space-6); } .founder-hero__links { display: flex; gap: var(--space-3); flex-wrap: wrap; } .founder-photo { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; object-position: center center; border: 3px solid var(--border-default); display: block; } @media (width <= 900px) { .founder-hero { grid-template-columns: 1fr; gap: var(--space-8); } .founder-hero__photo { order: -1; } .founder-photo { width: 160px; height: 160px; } } /* Game title chips */ .games-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .game-title { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: var(--space-1-5) var(--space-4); white-space: nowrap; display: inline-block; }