block. */
.service-row {
border-top: 1px solid var(--line);
padding: 1.75rem 0;
display: flex;
align-items: center;
justify-content: space-between;
transition: background .2s ease, padding-left .2s ease;
cursor: hand;
text-decoration: none;
color: inherit;
}
.service-row:last-child {
border-bottom: 1px solid var(--line);
}
.service-row:hover {
background: var(--bone-dim);
padding-left: 1rem;
}
.service-row .num {
font-family: 'IBM Plex Mono', monospace;
font-size: .8rem;
color: var(--signal-dark);
width: 3rem;
flex-shrink: 0;
}
.service-row h3 {
font-size: 1.6rem;
margin: 0;
flex: 1;
}
.service-row .small {
font-size: .85rem;
opacity: .6;
width: 220px;
text-align: right;
display: none;
}
.service-row .arrow {
opacity: 0;
transform: translateX(-8px);
transition: opacity .2s ease, transform .2s ease;
font-size: 1.2rem;
color: var(--signal);
margin-left: 1rem;
}
.service-row:hover .arrow {
opacity: 1;
transform: translateX(0);
}
@media (min-width: 768px) {
.service-row .small { display: block; }
}
@media (max-width: 768px) {
.service-row { padding: 1.25rem 0; }
.service-row h3 { font-size: 1.2rem; }
}
.bg-ink .service-row:hover {
background: rgba(255, 255, 255, .04);
}
.bg-ink .service-row .arrow {
color: var(--signal);
}
/* ==========================================================================
10. PROCESS STEPS (mobile-app, custom ERP)
========================================================================== */
.process-step {
display: flex;
gap: 1.5rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--line);
align-items: flex-start;
}
.process-step:last-child { border-bottom: none; }
.process-step .step-number {
font-family: 'Fraunces', serif;
font-size: 2rem;
font-weight: 700;
color: var(--signal);
min-width: 50px;
line-height: 1;
opacity: .6;
}
.process-step .step-content { flex: 1; }
.process-step .step-content h4 {
font-family: 'Fraunces', serif;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: .3rem;
}
.process-step .step-content p {
font-size: .9rem;
opacity: .75;
line-height: 1.7;
margin-bottom: 0;
}
.bg-ink .process-step { border-bottom-color: var(--line-invert); }
.bg-ink .process-step .step-content h4 { color: var(--bone); }
.bg-ink .process-step .step-content p { color: var(--bone); opacity: .8; }
/* ==========================================================================
11. HOW IT WORKS (index)
========================================================================== */
.hiw-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem 3rem;
margin-bottom: 2.5rem;
}
.hiw-step {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: .5rem 0;
border-bottom: 1px solid transparent;
transition: border-color .3s ease;
}
.hiw-step:hover { border-bottom-color: var(--line); }
.hiw-step-number {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 3rem;
padding-top: .1rem;
}
.hiw-step-number span {
font-family: 'Fraunces', serif;
font-size: 1.8rem;
font-weight: 500;
color: var(--signal);
line-height: 1.2;
letter-spacing: -.02em;
background: var(--bone);
padding: 0 .2rem;
position: relative;
z-index: 1;
}
.hiw-step-line {
flex: 1;
width: 1px;
background: var(--line);
margin-top: .3rem;
min-height: 2.5rem;
align-self: stretch;
}
.hiw-step:last-child .hiw-step-line { display: none; }
.hiw-step-content { flex: 1; min-width: 0; }
.hiw-step-title {
font-family: 'Fraunces', serif;
font-size: 1.35rem;
font-weight: 500;
margin-bottom: .15rem;
line-height: 1.2;
letter-spacing: -.01em;
}
.hiw-step-tagline {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--signal-dark);
margin-bottom: .5rem;
}
.hiw-step-desc {
font-size: .9rem;
opacity: .8;
line-height: 1.6;
margin-bottom: 0;
}
.hiw-footer {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.bg-ink .hiw-step-number span {
background: var(--ink);
color: var(--signal);
}
.bg-ink .hiw-step-line { background: var(--line-invert); }
.bg-ink .hiw-step:hover { border-bottom-color: var(--line-invert); }
.bg-ink .hiw-step-tagline { color: var(--signal); }
.bg-ink .hiw-footer { border-top-color: var(--line-invert); }
/* ==========================================================================
12. TIMELINE (about — reserved for future use)
========================================================================== */
.timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding-left: 1.5rem;
border-left: 2px solid var(--signal);
}
.timeline-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.timeline-item .year {
font-family: 'Fraunces', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--signal);
min-width: 80px;
line-height: 1;
}
.timeline-item .desc {
font-size: .95rem;
opacity: .75;
line-height: 1.6;
margin: 0;
}
.timeline-item .desc strong { opacity: 1; }
/* ==========================================================================
13. STATS & NUMBERS
========================================================================== */
.stat-item { text-align: center; }
.stat-item h4 {
font-family: 'Fraunces', serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--signal);
margin: 0;
line-height: 1;
}
.stat-item p {
font-size: .7rem;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .7;
margin: .2rem 0 0;
}
.bg-ink .stat-item h4 { color: var(--signal); }
.bg-ink .stat-item p { color: var(--bone); opacity: .7; }
.stat-num {
font-family: 'Fraunces', serif;
color: var(--signal);
font-size: 3rem;
font-weight: 500;
}
.stat-num small { font-size: 1.4rem; }
.intro-stats {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
}
.intro-stats .stat-item h4 {
font-family: 'Fraunces', serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--signal);
margin: 0;
line-height: 1;
}
.intro-stats .stat-item p {
font-size: .7rem;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .7;
margin: .2rem 0 0;
}
/* ==========================================================================
14. BADGES & TAGS
========================================================================== */
.service-tag {
font-family: 'IBM Plex Mono', monospace;
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--signal-dark);
background: var(--bone-dim);
display: inline-block;
padding: .2rem .8rem;
border-radius: 100px;
}
.bg-ink .service-tag {
background: rgba(255, 255, 255, .06);
color: var(--signal);
}
.badge-accent-sm {
background: rgba(255, 56, 0, .08);
border: 1px solid rgba(255, 56, 0, .2);
border-radius: 100px;
color: var(--signal-dark);
font-family: 'IBM Plex Mono', monospace;
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .06em;
padding: .3rem .9rem;
display: inline-block;
}
.bg-ink .badge-accent-sm {
background: rgba(255, 56, 0, .12);
border-color: rgba(255, 56, 0, .25);
color: var(--signal);
}
.badge-accent {
background: rgba(255, 56, 0, .08);
border: 1px solid rgba(255, 56, 0, .2);
border-radius: 100px;
color: var(--signal-dark);
font-family: 'IBM Plex Mono', monospace;
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .06em;
padding: .4rem 1rem;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.bg-ink .badge-accent {
background: rgba(255, 56, 0, .12);
border-color: rgba(255, 56, 0, .25);
color: var(--signal);
}
/* ==========================================================================
15. TECH STACK PILLS
========================================================================== */
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: 1rem;
}
.tech-stack span {
background: var(--bone-dim);
border-radius: 100px;
padding: .3rem .9rem;
font-size: .7rem;
font-family: 'IBM Plex Mono', monospace;
color: var(--ink);
opacity: .7;
}
.bg-ink .tech-stack span {
background: rgba(255, 255, 255, .06);
color: var(--bone);
opacity: .7;
}
/* ==========================================================================
16. VALUE PROPS (b2b, services)
========================================================================== */
.value-prop { text-align: center; }
.value-prop i {
font-size: 2.2rem;
color: var(--signal);
display: block;
margin-bottom: .75rem;
}
.value-prop h4 {
font-family: 'Fraunces', serif;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: .3rem;
}
.value-prop p {
font-size: .85rem;
opacity: .7;
margin: 0;
}
.bg-ink .value-prop i { color: var(--signal); }
.bg-ink .value-prop h4 { color: var(--bone); }
.bg-ink .value-prop p { color: var(--bone); opacity: .7; }
/* ==========================================================================
17. CTA SECTION
========================================================================== */
.cta {
background: var(--signal);
color: var(--ink);
border-radius: var(--radius);
padding: 4rem 3rem;
}
.cta .display {
font-size: clamp(2rem, 4vw, 3.2rem);
}
/* ==========================================================================
18. FOOTER
--------------------------------------------------------------------------
[NOTE] Index uses a compact footer (2.5rem top padding). If you want the
old spacious footer look on a specific page, add `footer--roomy` and
the override is included below.
========================================================================== */
footer {
background: var(--ink);
color: var(--bone);
padding: 2.5rem 0 1.5rem;
}
footer.footer--roomy {
padding: 4rem 0 1.5rem;
}
footer a:hover { color: var(--signal); }
.foot-label {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .1em;
opacity: .55;
margin-bottom: .75rem;
}
.footer-brand {
font-family: 'Fraunces', serif;
font-size: 1.8rem;
}
.footer-text {
opacity: .8;
max-width: 36ch;
}
.footer-small { opacity: .8; }
.footer-copy { opacity: .6; }
.footer-link {
color: var(--bone);
opacity: .7;
text-decoration: none;
transition: opacity .2s, padding-left .2s, color .2s;
display: flex;
align-items: center;
gap: .5rem;
}
.footer-link:hover {
opacity: 1;
padding-left: 4px;
color: var(--signal);
}
.footer-social-link {
color: var(--bone);
opacity: .6;
transition: opacity .2s, color .2s;
}
.footer-social-link:hover {
opacity: 1;
color: var(--signal);
}
.footer-tagline {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 1rem;
opacity: .5;
margin-top: .5rem;
}
/* Bare-bones form used inside dark footers */
.form-control {
background: transparent;
border: none;
border-bottom: 1px solid var(--line-invert);
color: var(--bone);
border-radius: 0;
padding: .75rem .25rem;
}
.form-control:focus {
background: transparent;
color: var(--bone);
box-shadow: none;
border-bottom-color: var(--signal);
}
.form-control::placeholder {
color: rgba(239, 236, 227, .45);
}
/* ==========================================================================
19. FLOATING BUTTONS
========================================================================== */
.floating-btn {
position: fixed;
z-index: 900;
border: none;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
box-shadow: 0 3px 14px rgba(0, 0, 0, .2);
transition: transform .25s ease, opacity .35s ease, box-shadow .25s ease;
cursor: pointer;
opacity: 0;
transform: scale(0.7);
pointer-events: none;
will-change: transform, opacity;
right: 20px;
left: auto;
top: auto;
}
.floating-btn.visible {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.floating-btn:hover {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.floating-btn:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 2px;
}
.btn-whatsapp {
bottom: 76px;
background: var(--whatsapp);
color: #fff;
}
.btn-whatsapp:hover {
background: var(--whatsapp-dark);
color: #fff;
}
.btn-backtop {
bottom: 20px;
background: var(--ink);
color: var(--bone);
border: 1px solid var(--line-invert);
}
.btn-backtop:hover {
background: var(--signal);
color: var(--bone);
border-color: var(--signal);
}
/* ==========================================================================
20. MICROGRAPHIC CANVAS (fixed background pattern)
========================================================================== */
#microCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: .45;
}
body > *:not(#microCanvas):not(.modal):not(.modal-backdrop) {
position: relative;
z-index: 1;
}
/* ==========================================================================
21. AOS (scroll-reveal utility)
========================================================================== */
.aos-item {
opacity: 0;
transition: opacity .7s ease, transform .7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}
.aos-item.aos-visible {
opacity: 1;
transform: translate(0, 0) scale(1);
}
.aos-fade-up { transform: translateY(40px); }
.aos-fade-down { transform: translateY(-40px); }
.aos-fade-left { transform: translateX(40px); }
.aos-fade-right { transform: translateX(-40px); }
.aos-scale { transform: scale(0.92); }
.aos-zoom-in { transform: scale(0.85); }
.aos-fade-in { transform: none; opacity: 0; }
.aos-delay-1 { transition-delay: .08s; }
.aos-delay-2 { transition-delay: .16s; }
.aos-delay-3 { transition-delay: .24s; }
.aos-delay-4 { transition-delay: .32s; }
.aos-delay-5 { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
.aos-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.floating-btn {
transition: opacity .3s ease !important;
}
}
/* ==========================================================================
22. MODAL ("Start a Project")
--------------------------------------------------------------------------
[NOTE] Only used on index.html today. Included here so future pages can
reuse the same modal markup without restyling.
========================================================================== */
.modal-content {
background: var(--bone);
color: var(--ink);
border-radius: var(--radius);
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.modal-header {
border-bottom: 1px solid var(--line);
padding: 1.75rem 2rem 1.25rem 2rem;
}
.modal-header .modal-title {
font-family: 'Fraunces', serif;
font-size: 1.75rem;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1.2;
}
.modal-header .modal-subtitle {
display: block;
font-size: .85rem;
opacity: .7;
margin-top: .25rem;
font-weight: 400;
}
.modal-header .btn-close {
background: transparent;
border: none;
font-size: 1.4rem;
opacity: .5;
transition: opacity .2s, transform .2s;
padding: .25rem .5rem;
}
.modal-header .btn-close:hover {
opacity: 1;
transform: rotate(90deg);
}
.modal-body {
position: relative;
max-height: 70vh;
overflow-y: auto;
padding: 1.5rem 1.5rem 1rem;
}
.modal-body .form-label {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink);
opacity: .7;
margin-bottom: .2rem;
font-weight: 500;
}
.modal-body .form-required {
color: var(--signal);
font-weight: 600;
margin-left: .1rem;
}
.modal-body .form-control-custom {
background: var(--bone);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: .6rem .9rem;
font-size: .95rem;
color: var(--ink);
transition: border-color .25s ease, box-shadow .25s ease;
font-family: 'Inter', sans-serif;
width: 100%;
}
.modal-body .form-control-custom:focus {
border-color: var(--signal);
box-shadow: 0 0 0 3px rgba(255, 56, 0, .15);
background: var(--bone);
color: var(--ink);
}
.modal-body .form-control-custom::placeholder {
color: rgba(20, 19, 15, .35);
font-size: .9rem;
}
.modal-body .form-control-custom.is-invalid {
border-color: var(--signal) !important;
box-shadow: 0 0 0 3px rgba(255, 56, 0, .2) !important;
}
.modal-body .form-control-custom.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(255, 56, 0, .3) !important;
}
.modal-body .error-text {
font-size: .75rem;
color: var(--signal);
display: block;
margin-top: .3rem;
min-height: 1.2rem;
}
.modal-body .service-check-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem 1rem;
margin-top: .5rem;
}
.modal-body .service-check-item {
display: flex;
align-items: center;
gap: .5rem;
font-size: .9rem;
cursor: pointer;
padding: .3rem .4rem;
border-radius: 4px;
transition: background .15s ease;
}
.modal-body .service-check-item:hover {
background: rgba(20, 19, 15, .05);
}
.modal-body .service-check-item input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--signal);
flex-shrink: 0;
cursor: pointer;
}
.modal-body .service-check-item input[type="checkbox"]:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 2px;
}
.modal-body .opacity-7 { opacity: .7; }
/* Modal footer — the scroll cue ↔ buttons toggle */
.modal-footer {
border-top: 1px solid var(--line);
padding: .05rem 1rem .1rem;
display: flex;
align-items: center;
justify-content: flex-end;
gap: .4rem;
flex-wrap: wrap;
min-height: auto;
transition: padding .3s ease;
}
.modal-footer.footer-buttons-visible {
padding: .6rem 1.5rem 1rem;
}
.footer-message {
display: flex;
align-items: center;
justify-content: center;
gap: .35rem;
font-family: 'IBM Plex Mono', monospace;
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--signal-dark);
width: 100%;
opacity: 1;
transition: opacity .25s ease;
animation: pulse-message 2s ease-in-out infinite;
padding: 0;
line-height: 1.1;
margin: 0;
}
.footer-message.hidden {
display: none;
opacity: 0;
pointer-events: none;
}
@keyframes pulse-message {
0%, 100% { opacity: .6; }
50% { opacity: 1; }
}
.footer-message i {
animation: bounce-down-msg 1.8s infinite;
font-size: .85rem;
}
@keyframes bounce-down-msg {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
.footer-buttons {
display: none;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
justify-content: flex-end;
width: 100%;
}
.footer-buttons.visible {
display: flex;
animation: fade-buttons .35s ease;
}
@keyframes fade-buttons {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-footer .btn {
font-size: .75rem;
padding: .6rem 1.5rem;
}
.modal-footer .btn-signal {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.modal-footer .btn-signal i { font-size: 1.1rem; }
.status-message {
color: var(--signal);
font-size: .8rem;
opacity: .7;
min-height: 1.5rem;
text-align: center;
flex: 1;
}
.status-message.success { color: var(--whatsapp-dark); opacity: 1; }
.status-message.error { color: var(--signal); opacity: 1; }
/* ==========================================================================
23. TESTIMONIALS & CLIENTS GRID
========================================================================== */
.quote-mark {
font-family: 'Fraunces', serif;
font-size: 5rem;
line-height: 1;
color: var(--signal);
}
.testimonial-text {
font-size: 1.4rem;
font-family: 'Fraunces', serif;
font-weight: 300;
}
.testimonial-slide { display: none; }
.testimonial-slide.active {
display: block;
animation: fade .5s ease;
}
@keyframes fade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.t-dots {
display: flex;
gap: .5rem;
}
.t-dots button {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: var(--line-invert);
cursor: pointer;
transition: background .2s ease, transform .2s ease;
padding: 0;
}
.t-dots button.active {
background: var(--signal);
transform: scale(1.2);
}
.t-dots button:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 2px;
}
/* Clients logo grid — used on clients.html and home */
.clients-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem 1rem;
margin-bottom: 3rem;
}
.client-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem .5rem;
border-radius: var(--radius);
background: var(--bone);
border: 1px solid var(--line);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.client-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
border-color: var(--signal);
}
.client-logo-wrap {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--bone-dim);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: .6rem;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--line);
position: relative;
}
.client-logo-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
display: block;
}
.client-initials {
font-family: 'Fraunces', serif;
font-size: 1.4rem;
font-weight: 500;
color: var(--ink);
opacity: .5;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: var(--bone-dim);
}
.client-name {
font-family: 'Inter', sans-serif;
font-size: .8rem;
font-weight: 500;
letter-spacing: .02em;
line-height: 1.3;
color: var(--ink);
max-width: 100%;
word-break: break-word;
}
.bg-ink .client-item {
background: var(--ink);
border-color: var(--line-invert);
}
.bg-ink .client-item:hover { border-color: var(--signal); }
.bg-ink .client-name { color: var(--bone); }
.bg-ink .client-logo-wrap {
background: rgba(255, 255, 255, .04);
border-color: var(--line-invert);
}
.bg-ink .client-initials {
color: var(--bone);
background: rgba(255, 255, 255, .04);
}
/* Award list (index — reserved for future use) */
.award-item {
border-top: 1px solid var(--line-invert);
padding: 1.5rem 0;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: .5rem;
}
.award-item:last-child { border-bottom: 1px solid var(--line-invert); }
.award-item .org {
font-family: 'Fraunces', serif;
font-size: 1.4rem;
}
.award-item .meta {
font-family: 'IBM Plex Mono', monospace;
font-size: .75rem;
color: var(--signal);
text-transform: uppercase;
}
/* Team & blog cards (index — reserved for future use) */
.team-card img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
filter: grayscale(1);
transition: filter .3s ease;
border-radius: var(--radius);
}
.team-card:hover img { filter: grayscale(0); }
.team-card h4 {
margin-top: 1rem;
margin-bottom: .15rem;
font-size: 1.15rem;
}
.team-card .role {
font-family: 'IBM Plex Mono', monospace;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .65;
}
.blog-card img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
border-radius: var(--radius);
margin-bottom: 1.25rem;
}
.blog-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .6;
margin-bottom: .5rem;
}
/* ==========================================================================
24. UTILITIES
--------------------------------------------------------------------------
[NOTE] Add site-wide helper classes here. Keep them small and predictable.
========================================================================== */
.heading-clamp { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.heading-large { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.text-muted-para {
font-size: .95rem;
opacity: .75;
line-height: 1.75;
}
.text-muted-para-sm {
font-size: .9rem;
opacity: .75;
line-height: 1.7;
}
.text-muted-para-sm2 {
font-size: .95rem;
opacity: .7;
margin-top: .5rem;
}
.text-signal { color: var(--signal); }
.opacity-7 { opacity: .7; }
.opacity-6 { opacity: .6; }
.opacity-5 { opacity: .5; }
.opacity-8 { opacity: .8; }
.icon-lg-signal {
font-size: 2rem;
color: var(--signal);
display: block;
margin-bottom: .5rem;
}
.icon-md-signal {
font-size: 1.8rem;
color: var(--signal);
display: block;
margin-bottom: .75rem;
}
.icon-xl-signal {
font-size: 2.5rem;
color: var(--signal);
display: block;
margin-bottom: 1rem;
}
.border-top-line { border-top: 1px solid var(--line); }
.bg-signal-soft { background: rgba(255, 56, 0, .02); }
.bg-signal-soft-icon { background: rgba(255, 56, 0, .08); }
.cta-text {
font-size: .95rem;
opacity: .8;
max-width: 460px;
margin-top: .5rem;
}
.gap-3 { gap: 1rem; }
/* ==========================================================================
24b. PORTFOLIO
--------------------------------------------------------------------------
[NOTE] Used on portfolio.php and any future case-study detail page.
Grids collapse at 992px and 640px — see Section 25 for overrides.
========================================================================== */
/* ---- Portfolio hero ---- */
.portfolio-hero {
padding: 5rem 0 3rem;
position: relative;
overflow: hidden;
}
.portfolio-hero .display {
font-size: clamp(2.6rem, 6vw, 4.2rem);
font-weight: 600;
line-height: 1.02;
margin-bottom: 1rem;
}
.portfolio-hero .sub {
font-size: 1.1rem;
opacity: .75;
max-width: 660px;
margin-bottom: 0;
}
/* ---- Stats bar ---- */
.portfolio-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
padding: 2.5rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.portfolio-stats .stat-item {
text-align: left;
}
.portfolio-stats .stat-item h4 {
font-family: 'Fraunces', serif;
font-size: 2.6rem;
font-weight: 600;
color: var(--signal);
line-height: 1;
margin: 0 0 .35rem;
}
.portfolio-stats .stat-item p {
font-size: .7rem;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .65;
margin: 0;
}
/* ---- Filter pills ---- */
.portfolio-filter {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 2.5rem;
}
.filter-pill {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
padding: .55rem 1.15rem;
border: 1px solid var(--line);
border-radius: 100px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-pill:hover,
.filter-pill:focus-visible {
border-color: var(--signal);
color: var(--signal);
outline: none;
}
.filter-pill.active {
background: var(--ink);
color: var(--bone);
border-color: var(--ink);
}
/* ---- Featured case study ---- */
.feature-case {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line-invert);
background: var(--ink);
color: var(--bone);
text-decoration: none;
transition: border-color .3s ease, transform .3s ease;
}
.feature-case:hover {
border-color: var(--signal);
}
.feature-case-media {
position: relative;
min-height: 520px;
overflow: hidden;
}
.feature-case-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1);
display: block;
}
.feature-case:hover .feature-case-media img {
transform: scale(1.04);
}
.feature-case-body {
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.feature-case-body h3 {
font-family: 'Fraunces', serif;
font-size: 2rem;
font-weight: 600;
color: var(--bone);
letter-spacing: -.01em;
line-height: 1.1;
margin: 0;
}
.feature-case-body .service-tag {
background: rgba(255, 255, 255, .06);
color: var(--signal);
align-self: flex-start;
}
.feature-case-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
padding: 1.5rem 0;
margin: 1.5rem 0;
border-top: 1px solid var(--line-invert);
border-bottom: 1px solid var(--line-invert);
}
.metric-value {
font-family: 'Fraunces', serif;
font-size: 2rem;
font-weight: 600;
color: var(--signal);
line-height: 1;
letter-spacing: -.02em;
}
.metric-value span {
font-size: 1.1rem;
margin-left: .1rem;
}
.metric-label {
font-size: .7rem;
opacity: .65;
text-transform: uppercase;
letter-spacing: .06em;
margin-top: .4rem;
line-height: 1.35;
}
.feature-case-cta {
font-family: 'IBM Plex Mono', monospace;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--signal);
display: inline-flex;
align-items: center;
gap: .5rem;
transition: gap .25s ease;
}
.feature-case:hover .feature-case-cta {
gap: 1rem;
}
/* ---- Case grid & cards ---- */
.case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.case-card {
background: var(--bone);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.case-card:hover {
transform: translateY(-6px);
border-color: var(--signal);
box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
}
.case-card-media {
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--bone-dim);
}
.case-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.case-card:hover .case-card-media img {
transform: scale(1.05);
}
.case-card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.case-card-tag {
font-family: 'IBM Plex Mono', monospace;
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--signal-dark);
margin-bottom: .75rem;
display: block;
}
.case-card h3 {
font-family: 'Fraunces', serif;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.25;
margin: 0 0 .5rem;
color: var(--ink);
}
.case-card p {
font-size: .875rem;
opacity: .75;
line-height: 1.6;
margin-bottom: 1rem;
flex: 1;
}
.case-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid var(--line);
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .7;
}
.case-card-arrow {
font-size: 1rem;
color: var(--signal);
transition: transform .3s ease;
display: inline-flex;
}
.case-card:hover .case-card-arrow {
transform: translate(3px, -3px);
}
/* ---- Compact case card (home page portfolio grid) ----
A tighter version of .case-card used for the 3×2 grid on the home
page. Drops the description paragraph, reduces padding, and shrinks
the title. The meta row pins to the bottom so cards stay aligned
even when titles wrap to two lines.
Use the same HTML structure as .case-card, minus the . */
.case-card--compact .case-card-body {
padding: 1.15rem 1.25rem 1rem;
}
.case-card--compact .case-card-tag {
font-size: .6rem;
margin-bottom: .35rem;
}
.case-card--compact h3 {
font-size: 1.05rem;
line-height: 1.3;
margin-bottom: 0;
flex: 1;
}
.case-card--compact .case-card-meta {
padding-top: .85rem;
margin-top: .85rem;
font-size: .65rem;
}
/* ---- Case study detail page ---- */
.back-link {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: 'IBM Plex Mono', monospace;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ink);
opacity: .7;
text-decoration: none;
transition: opacity .2s ease, gap .25s ease, color .2s ease;
}
.back-link:hover {
opacity: 1;
gap: .85rem;
color: var(--signal);
}
.case-hero-media {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--bone-dim);
}
.case-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.case-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
padding: 2rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.case-summary-item .foot-label {
color: var(--signal-dark);
opacity: .8;
margin-bottom: .35rem;
}
.case-summary-item p {
font-size: .95rem;
}
/* Responsive tweaks for case study */
@media (max-width: 992px) {
.case-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.case-summary { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 0; }
}
/* ---- Empty state ---- */
.portfolio-empty {
text-align: center;
padding: 4rem 1rem;
font-size: .95rem;
opacity: .7;
}
/* ==========================================================================
25. RESPONSIVE
--------------------------------------------------------------------------
[NOTE] Breakpoints: 992, 768, 640, 576, 480, 420, 400.
When adding new components, add their responsive overrides inside the
matching breakpoint block below to keep media queries consolidated.
========================================================================== */
@media (max-width: 992px) {
.edge-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.clients-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.intro-stats { gap: 1.5rem; }
.intro-stats .stat-item h4 { font-size: 1.8rem; }
.approach-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.hiw-grid { gap: 2rem 1.5rem; }
.portfolio-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.feature-case { grid-template-columns: 1fr; }
.feature-case-media { min-height: 340px; }
.feature-case-body { padding: 2.5rem; }
.case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
section { padding: 3.5rem 0; }
.section-tight { padding: 2rem 0; }
.hero-full .display { font-size: clamp(2.2rem, 10vw, 3.5rem); }
.hero-full .sub { font-size: 1rem; }
.invoicing-hero,
.mobile-hero,
.b2b-hero,
.services-hero,
.training-hero,
.careers-hero,
.clientele-hero,
.consulting-hero,
.erp-hero,
.contact-hero,
.intro-section { padding: 3rem 1rem 2rem; }
.invoicing-hero .display,
.mobile-hero .display,
.b2b-hero .display,
.services-hero .display,
.training-hero .display,
.careers-hero .display,
.clientele-hero .display,
.consulting-hero .display,
.erp-hero .display,
.contact-hero .display,
.intro-section .display { font-size: clamp(2rem, 6vw, 2.6rem); }
.invoicing-hero .sub,
.mobile-hero .sub,
.b2b-hero .sub,
.services-hero .sub,
.training-hero .sub,
.careers-hero .sub,
.clientele-hero .sub,
.consulting-hero .sub,
.erp-hero .sub,
.contact-hero .sub,
.intro-section .sub { font-size: 1rem; }
.process-step { gap: 1rem; padding: 1rem 0; }
.process-step .step-number { font-size: 1.5rem; min-width: 35px; }
.hero-phone-links .btn { font-size: .65rem; padding: .5rem 1rem; }
.cta { padding: 2.5rem 1.5rem; }
/* Cards */
.pricing-card,
.service-card,
.b2b-service-card,
.source-card,
.infra-card,
.course-card,
.contact-info-card,
.contact-form-card,
.map-card { padding: 1.5rem; }
/* Clients */
.clients-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.client-logo-wrap { width: 64px; height: 64px; }
.client-initials { font-size: 1.1rem; }
.client-name { font-size: .7rem; }
.stat-item h4 { font-size: 1.5rem; }
/* Marquee */
.marquee-track .marquee-item img { height: 35px; }
.marquee-track > span:not(.marquee-item) {
font-size: 1.2rem;
padding: 0 1.2rem;
gap: 1.5rem;
}
/* How it works */
.hiw-grid { grid-template-columns: 1fr; gap: .5rem; }
.hiw-step { padding: 1rem .25rem; border-bottom: 1px solid var(--line); gap: 1rem; }
.hiw-step:last-child { border-bottom: none; }
.hiw-step-number span { font-size: 1.5rem; }
.hiw-step-line { min-height: 2rem; }
.hiw-step-title { font-size: 1.15rem; }
.hiw-step-desc { font-size: .85rem; }
.bg-ink .hiw-step { border-bottom-color: var(--line-invert); }
/* Timeline */
.timeline { padding-left: 1rem; }
.timeline-item .year { min-width: 60px; font-size: 1.4rem; }
}
@media (max-width: 640px) {
.floating-btn { width: 40px; height: 40px; font-size: 1.1rem; right: 14px; }
.btn-whatsapp { bottom: 66px; }
.btn-backtop { bottom: 14px; }
/* Modal mobile */
.modal-body { padding: 1rem .75rem .75rem; }
.modal-body .form-control-custom { padding: .5rem .7rem; font-size: .9rem; }
.modal-body .form-label { font-size: .6rem; }
.modal-body .service-check-grid { grid-template-columns: 1fr; gap: .3rem; }
.modal-body .service-check-item { font-size: .85rem; padding: .2rem .3rem; }
.modal-body .row.g-2.g-md-3 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
.modal-header { padding: 1rem .75rem .75rem; }
.modal-header .modal-title { font-size: 1.3rem; }
.modal-header .modal-subtitle { font-size: .75rem; }
.modal-footer { padding: .05rem .5rem .08rem; flex-direction: column; align-items: stretch; gap: .3rem; }
.modal-footer.footer-buttons-visible { padding: .5rem .5rem .75rem; }
.footer-message { font-size: .6rem; }
.footer-buttons .btn { width: 100%; justify-content: center; font-size: .7rem; padding: .5rem 1rem; }
.status-message { font-size: .75rem; padding: .2rem 0; }
.intro-stats { gap: 1rem; }
.case-grid { grid-template-columns: 1fr; }
.portfolio-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
.portfolio-stats .stat-item h4 { font-size: 2rem; }
.feature-case-body { padding: 2rem 1.5rem; }
.feature-case-body h3 { font-size: 1.5rem; }
.feature-case-metrics { grid-template-columns: 1fr 1fr; gap: 1rem; }
.metric-value { font-size: 1.6rem; }
}
@media (max-width: 576px) {
.approach-grid { grid-template-columns: 1fr; gap: 1rem; }
.approach-card-body { padding: 1.5rem 1.25rem; }
.approach-card-image { aspect-ratio: 4 / 3; }
.approach-card-number { font-size: 2rem; }
.approach-card-title { font-size: 1.1rem; }
.approach-card-desc { font-size: .85rem; }
}
@media (max-width: 480px) {
.clients-grid { gap: .6rem; }
.client-logo-wrap { width: 56px; height: 56px; }
.client-item { padding: .5rem .25rem; }
.hiw-step { flex-direction: row; gap: .75rem; padding: .75rem .25rem; }
.hiw-step-number { width: 2.4rem; }
.hiw-step-number span { font-size: 1.3rem; }
.hiw-step-title { font-size: 1rem; }
.hiw-step-tagline { font-size: .6rem; }
.hiw-step-desc { font-size: .8rem; }
}
@media (max-width: 420px) {
.floating-btn { width: 36px; height: 36px; font-size: 1rem; right: 10px; }
.btn-whatsapp { bottom: 56px; }
.btn-backtop { bottom: 10px; }
}
@media (max-width: 400px) {
.modal-body { padding: .75rem .5rem .5rem; }
.modal-header { padding: .75rem .5rem .5rem; }
.modal-footer { padding: .03rem .3rem .05rem; }
.modal-footer.footer-buttons-visible { padding: .4rem .3rem .6rem; }
.modal-body .form-control-custom { padding: .4rem .6rem; font-size: .85rem; }
.modal-body .service-check-item { font-size: .8rem; }
}
/* ==========================================================================
END OF FILE
========================================================================== */