/* Start custom CSS for html, class: .elementor-element-6dbd105 *//* LHAM TECH — Site pages (About / Contact / Realisations) */
:root{--bg:#0a0d14;--surface:#111827;--surface-strong:#060911;--text:#e8ecf4;--fg:#8a93a8;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-gold:#f59e0b;--border:#1e2a3d;--link:#60a5fa;--link-hover:#93c5fd;--text-on-accent:#fff;--radius:12px;--radius-lg:16px;--nav-height:68px;--container:1280px;--ease:250ms ease}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}a{color:var(--link);text-decoration:none;transition:color var(--ease)}a:hover{color:var(--link-hover)}
ul{list-style:none}h1,h2,h3,h4{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.15;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(2.2rem,5vw,3.4rem)}h2{font-size:clamp(1.5rem,3vw,2.15rem)}h3{font-size:1.15rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.container{width:min(100% - 2rem,var(--container));margin-inline:auto}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-gold);margin-bottom:.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.5rem;border-radius:8px;font-size:.95rem;font-weight:700;border:none;cursor:pointer;transition:transform var(--ease),background var(--ease),box-shadow var(--ease),border-color var(--ease)}
.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);color:#fff;box-shadow:0 8px 28px rgba(37,99,235,.35)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}.btn-outline:hover{border-color:var(--accent);color:var(--link)}
.btn-whatsapp{background:#25d366;color:#fff}.btn-whatsapp:hover{background:#1ebe57;color:#fff}
.btn-gold{background:linear-gradient(135deg,#f59e0b,#d97706);color:#1a1205}.btn-gold:hover{box-shadow:0 8px 28px rgba(245,158,11,.35);color:#1a1205}
.site-nav{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-height);background:color-mix(in srgb,var(--surface-strong) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-height)}
.nav-logo{display:flex;align-items:center;gap:.6rem;color:var(--text);font-size:1.25rem;font-weight:800;letter-spacing:.04em}.nav-logo span{color:var(--accent-gold)}
.nav-desktop{display:flex;align-items:center;gap:.15rem}.nav-desktop a{color:var(--fg);font-size:.875rem;font-weight:500;padding:.5rem .75rem;border-radius:6px;min-height:40px;display:inline-flex;align-items:center}
.nav-desktop a:hover,.nav-desktop a.active{color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.nav-cta{margin-left:.5rem;background:var(--accent)!important;color:#fff!important;font-weight:700!important;padding:.5rem 1.1rem!important}
.nav-mobile{display:none}.nav-toggle{width:44px;height:44px;border:1.5px solid var(--border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:1.25rem}
.nav-drawer{display:none;flex-direction:column;position:fixed;top:var(--nav-height);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 1.25rem 1.5rem;gap:.25rem;z-index:999}
details.nav-mobile[open] .nav-drawer{display:flex}.nav-drawer a{color:var(--fg);padding:.75rem 0;border-bottom:1px solid var(--border);min-height:44px;display:flex;align-items:center}
.page-hero{padding:calc(var(--nav-height) + 3rem) 0 3rem;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-20%;right:-10%;width:50%;height:120%;background:radial-gradient(ellipse at 70% 30%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%);pointer-events:none}
.page-hero .container{position:relative;z-index:1;max-width:48rem}
.page-hero p{color:var(--fg);font-size:1.1rem;margin-top:1rem;max-width:40rem}
.breadcrumb{font-size:.85rem;color:var(--fg);margin-bottom:1.25rem}.breadcrumb a{color:var(--fg)}.breadcrumb span{opacity:.5;margin:0 .4rem}
.section{padding:4rem 0}.section-alt{background:var(--surface)}
.section-header{max-width:40rem;margin-bottom:2.25rem}.section-header p{color:var(--fg);margin-top:.65rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease)}
.section-alt .card{background:var(--bg)}.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 28px rgba(37,99,235,.12)}
.card h3{margin-bottom:.5rem}.card p{color:var(--fg);font-size:.9rem;margin:0}
.card .num{color:var(--accent-gold);font-size:.75rem;font-weight:800;letter-spacing:.1em;margin-bottom:.55rem}
.values-card{text-align:left}.values-card .icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font-weight:800;margin-bottom:1rem}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.stat{padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-align:center}
.stat strong{display:block;font-size:1.75rem;color:var(--accent-gold);margin-bottom:.25rem}.stat span{font-size:.85rem;color:var(--fg)}
.timeline{display:flex;flex-direction:column;gap:0}
.timeline-item{display:grid;grid-template-columns:100px 1fr;gap:1.25rem;padding:1.25rem 0;border-bottom:1px solid var(--border)}
.timeline-item:last-child{border-bottom:none}.timeline-year{color:var(--accent-gold);font-weight:800;font-size:.9rem}
.timeline-item h3{font-size:1.05rem;margin-bottom:.35rem}.timeline-item p{color:var(--fg);font-size:.9rem;margin:0}
.team-card{text-align:center;padding:1.75rem 1.25rem}.team-avatar{width:72px;height:72px;margin:0 auto 1rem;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-gold));display:grid;place-items:center;font-weight:800;font-size:1.25rem;color:#fff}
.team-card h3{font-size:1.05rem;margin-bottom:.25rem}.team-card .role{color:var(--accent-gold);font-size:.8rem;font-weight:700;margin-bottom:.5rem}.team-card p{font-size:.85rem}
.case-card{display:flex;flex-direction:column;gap:.65rem;overflow:hidden}
.case-cover{aspect-ratio:16/10;border-radius:10px;background:radial-gradient(circle at 30% 20%,rgba(37,99,235,.35),transparent 55%),var(--surface);border:1px solid var(--border);display:grid;place-items:center;font-weight:800;font-size:.85rem;letter-spacing:.08em;color:var(--fg);text-transform:uppercase}
.case-tag{align-self:flex-start;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .65rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent-gold) 40%,transparent);color:var(--accent-gold)}
.case-card h3{font-size:1.1rem}.case-card p{color:var(--fg);font-size:.9rem;flex:1}
.case-meta{display:flex;flex-wrap:wrap;gap:.4rem}.case-meta span{font-size:.75rem;padding:.2rem .55rem;border-radius:6px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--link);font-weight:600}
.case-card a{font-size:.85rem;font-weight:700;color:var(--accent)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start}
.contact-channels{display:flex;flex-direction:column;gap:.75rem}
.contact-channel{display:flex;gap:1rem;align-items:center;padding:1rem 1.15rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);transition:border-color var(--ease),transform var(--ease)}
.contact-channel:hover{border-color:var(--accent);transform:translateX(4px);color:var(--text)}
.contact-channel .ch-icon{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font-weight:800;font-size:.75rem}
.contact-channel .label{display:block;font-size:.75rem;color:var(--fg)}.contact-channel .value{display:block;font-weight:700;font-size:.95rem}
.form-card{padding:1.75rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.form-card h2{font-size:1.35rem;margin-bottom:.35rem}.form-card .form-lead{color:var(--fg);font-size:.9rem;margin-bottom:1.25rem}
.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--fg);margin-bottom:.4rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;min-height:48px}
.form-group textarea{min-height:120px;resize:vertical}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{font-size:.8rem;color:var(--fg);margin-top:.75rem}
.map-placeholder{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:2rem;text-align:center;color:var(--fg);min-height:180px;display:grid;place-items:center}
.countries{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.countries span{font-size:.8rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--border);color:var(--fg)}
.cta-band{padding:3.5rem 0;background:linear-gradient(135deg,#1d4ed8,#2563eb 50%,#1e40af)}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.4rem}.cta-band p{color:rgba(255,255,255,.88);max-width:32rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.site-footer{background:var(--surface-strong);padding:3rem 0 1.5rem;border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.footer-brand p{color:var(--fg);font-size:.9rem;max-width:18rem;margin:.85rem 0 0}
.footer-col h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.footer-col a{display:block;color:var(--fg);font-size:.875rem;padding:.3rem 0}.footer-col a:hover{color:var(--link-hover)}
.footer-bottom{padding-top:1.25rem;color:var(--fg);font-size:.85rem}
@media(max-width:900px){.grid-2,.grid-3,.grid-4,.contact-grid,.stat-row,.form-row{grid-template-columns:1fr}.timeline-item{grid-template-columns:80px 1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}}
@media(max-width:767px){.nav-desktop{display:none}.nav-mobile{display:block}.cta-actions{flex-direction:column}.cta-actions .btn{width:100%}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}
/* ---------- BLOG ---------- */
.blog-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2.5rem;
align-items: start;
}
.blog-featured {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 1.5rem;
padding: 0;
overflow: hidden;
margin-bottom: 2rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
transition: border-color var(--ease), box-shadow var(--ease);
}
.blog-featured:hover {
border-color: var(--accent);
box-shadow: 0 12px 36px rgba(37, 99, 235, 0.12);
}
.blog-featured-cover {
min-height: 240px;
background:
radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.35), transparent 55%),
linear-gradient(160deg, #0d1628, #111827);
display: grid;
place-items: center;
padding: 1.5rem;
text-align: center;
}
.blog-featured-cover span {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-gold);
}
.blog-featured-body {
padding: 1.75rem 1.75rem 1.75rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.blog-featured-body h2 {
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}
.blog-featured-body h2 a { color: var(--text); }
.blog-featured-body h2 a:hover { color: var(--link); }
.blog-featured-body p { color: var(--fg); font-size: 0.95rem; flex: 1; }
.blog-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
font-size: 0.8rem;
color: var(--fg);
}
.blog-meta .cat {
color: var(--accent-gold);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.7rem;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.blog-card {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
overflow: hidden;
transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.blog-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
}
.blog-card-cover {
aspect-ratio: 16 / 9;
background:
radial-gradient(circle at 40% 20%, rgba(245, 158, 11, 0.12), transparent 50%),
radial-gradient(circle at 70% 80%, rgba(37, 99, 235, 0.2), transparent 50%),
var(--surface);
display: grid;
place-items: center;
border-bottom: 1px solid var(--border);
}
.blog-card-cover span {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg);
}
.blog-card-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.blog-card-body h3 {
font-size: 1.05rem;
line-height: 1.3;
}
.blog-card-body h3 a { color: var(--text); }
.blog-card-body h3 a:hover { color: var(--link); }
.blog-card-body p {
color: var(--fg);
font-size: 0.875rem;
flex: 1;
margin: 0;
}
.blog-card-body .read-more {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent);
margin-top: 0.35rem;
}
.blog-sidebar {
display: flex;
flex-direction: column;
gap: 1.25rem;
position: sticky;
top: calc(var(--nav-height) + 1.25rem);
}
.sidebar-box {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
padding: 1.35rem;
}
.sidebar-box h3 {
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1rem;
color: var(--text);
}
.cat-list { display: flex; flex-direction: column; gap: 0.35rem; }
.cat-list a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
color: var(--fg);
font-size: 0.9rem;
}
.cat-list a:last-child { border-bottom: none; }
.cat-list a:hover { color: var(--link); }
.cat-list .count {
font-size: 0.75rem;
font-weight: 700;
color: var(--accent-gold);
background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
padding: 0.15rem 0.5rem;
border-radius: 999px;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-cloud a {
font-size: 0.75rem;
font-weight: 600;
padding: 0.35rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--fg);
}
.tag-cloud a:hover {
border-color: var(--accent);
color: var(--link);
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.newsletter-box p {
color: var(--fg);
font-size: 0.875rem;
margin-bottom: 0.85rem;
}
.newsletter-box input {
width: 100%;
padding: 0.7rem 1rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font: inherit;
min-height: 44px;
margin-bottom: 0.5rem;
}
.newsletter-box input:focus {
outline: 2px solid var(--accent);
border-color: var(--accent);
}
.newsletter-box .btn { width: 100%; }
.blog-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.blog-filters a {
font-size: 0.8rem;
font-weight: 600;
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--fg);
}
.blog-filters a:hover,
.blog-filters a.active {
border-color: var(--accent);
color: var(--text);
background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.pagination {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 2rem;
justify-content: center;
}
.pagination a,
.pagination span {
min-width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 8px;
border: 1px solid var(--border);
color: var(--fg);
font-size: 0.9rem;
font-weight: 600;
}
.pagination a:hover {
border-color: var(--accent);
color: var(--link);
}
.pagination .current {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
@media (max-width: 900px) {
.blog-layout { grid-template-columns: 1fr; }
.blog-featured { grid-template-columns: 1fr; }
.blog-featured-body { padding: 1.25rem; }
.blog-sidebar { position: static; }
.blog-grid { grid-template-columns: 1fr; }
}
/* ---------- HUB PAGES (services / logiciels / materiel / portfolio) ---------- */
.hub-intro {
max-width: 42rem;
margin-bottom: 2.5rem;
}
.hub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.hub-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
color: inherit;
}
.section-alt .hub-card { background: var(--bg); }
.hub-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 12px 32px rgba(37, 99, 235, 0.14);
color: inherit;
}
.hub-card .hub-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.hub-card .hub-badge {
align-self: flex-start;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.25rem 0.6rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
color: var(--accent-gold);
}
.hub-card h3 {
font-size: 1.15rem;
color: var(--text);
}
.hub-card p {
color: var(--fg);
font-size: 0.9rem;
flex: 1;
margin: 0;
}
.hub-card .hub-link {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent);
margin-top: 0.25rem;
}
.hub-card:hover .hub-link { color: var(--link-hover); }
.hub-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0.25rem 0 0.5rem;
}
.hub-list li {
font-size: 0.85rem;
color: var(--fg);
padding-left: 1rem;
position: relative;
}
.hub-list li::before {
content: "·";
position: absolute;
left: 0.2rem;
color: var(--accent-gold);
font-weight: 800;
}
.hub-band {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
align-items: center;
padding: 2rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.hub-band h2 { margin-bottom: 0.5rem; }
.hub-band p { color: var(--fg); margin-bottom: 1.25rem; }
.hub-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.75rem;
}
.hub-filters a {
font-size: 0.8rem;
font-weight: 600;
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--fg);
}
.hub-filters a:hover,
.hub-filters a.active {
border-color: var(--accent);
color: var(--text);
background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.portfolio-item {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg);
display: flex;
flex-direction: column;
transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.portfolio-item:hover {
transform: translateY(-4px);
border-color: var(--accent-gold);
box-shadow: 0 12px 32px rgba(245, 158, 11, 0.1);
}
.portfolio-cover {
aspect-ratio: 16 / 9;
background:
radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.3), transparent 55%),
linear-gradient(160deg, #0d1628, #111827);
display: grid;
place-items: center;
border-bottom: 1px solid var(--border);
padding: 1.5rem;
text-align: center;
}
.portfolio-cover span {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-gold);
}
.portfolio-body {
padding: 1.35rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.portfolio-body h3 { font-size: 1.2rem; }
.portfolio-body p { color: var(--fg); font-size: 0.9rem; flex: 1; margin: 0; }
.portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.portfolio-tags span {
font-size: 0.72rem;
font-weight: 600;
padding: 0.25rem 0.55rem;
border-radius: 6px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--link);
}
.portfolio-body a {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent);
}
@media (max-width: 900px) {
.hub-grid { grid-template-columns: 1fr 1fr; }
.hub-band { grid-template-columns: 1fr; }
.portfolio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.hub-grid { grid-template-columns: 1fr; }
}
/* ---------- SERVICE DETAIL ---------- */
.service-hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 2.5rem;
align-items: start;
}
.service-panel {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
padding: 1.5rem;
position: sticky;
top: calc(var(--nav-height) + 1rem);
}
.service-panel h2 {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.service-panel .meta-row {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1.25rem;
}
.service-panel .meta-row div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.9rem;
}
.service-panel .meta-row span { color: var(--fg); }
.service-panel .meta-row strong { color: var(--text); text-align: right; }
.service-panel .panel-actions {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.service-panel .panel-actions .btn { width: 100%; }
.offer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.offer-card {
padding: 1.35rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
transition: border-color var(--ease), transform var(--ease);
}
.section-alt .offer-card { background: var(--bg); }
.offer-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
}
.offer-card .num {
color: var(--accent-gold);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.offer-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.offer-card p { color: var(--fg); font-size: 0.9rem; margin: 0; }
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.process-step-card {
padding: 1.35rem 1.15rem;
border-top: 2px solid var(--accent);
background: color-mix(in srgb, var(--accent) 6%, transparent);
border-radius: 0 0 var(--radius) var(--radius);
}
.process-step-card span {
display: block;
color: var(--accent-gold);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
margin-bottom: 0.75rem;
}
.process-step-card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.process-step-card p { color: var(--fg); font-size: 0.85rem; margin: 0; }
.audience-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.audience-list li {
display: flex;
gap: 0.75rem;
color: var(--fg);
font-size: 0.95rem;
}
.audience-list li::before {
content: "✓";
color: var(--accent-gold);
font-weight: 800;
flex-shrink: 0;
}
.related-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.related-service-card {
padding: 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: transform var(--ease), border-color var(--ease);
color: inherit;
}
.related-service-card:hover {
transform: translateY(-3px);
border-color: var(--accent-gold);
color: inherit;
}
.related-service-card h3 { font-size: 1rem; color: var(--text); }
.related-service-card p { color: var(--fg); font-size: 0.85rem; flex: 1; margin: 0; }
.related-service-card span { font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.faq-list { max-width: 48rem; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1.1rem 0.25rem;
cursor: pointer;
font-weight: 700;
list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; }
.faq-item[open] summary { color: var(--link); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0.25rem 1.1rem; color: var(--fg); font-size: 0.95rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.badge {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--border);
}
.badge-gold {
color: var(--accent-gold);
border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}
.badge-blue {
color: var(--link);
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
@media (max-width: 900px) {
.service-hero-grid,
.offer-grid,
.process-steps,
.related-services { grid-template-columns: 1fr; }
.service-panel { position: static; }
}
.service-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .service-split { grid-template-columns: 1fr; } }/* End custom CSS */