:root{ --accent:#e1252b; --accent2:#8d0f13; --radius:20px; --shadow:0 20px 60px rgba(0,0,0,.18); } /* ------------------------- THEME TOKENS Apply theme on -------------------------- */ html.theme-dark{ --bg:#07070a; --bg2:#0b0b10; --text:#ffffff; --muted:rgba(255,255,255,.72); --muted2:rgba(255,255,255,.55); --border:rgba(255,255,255,.10); --surface:rgba(255,255,255,.05); --surface2:rgba(255,255,255,.06); --card:rgba(255,255,255,.04); --card2:rgba(255,255,255,.03); --glass:rgba(10,10,16,.55); --bar-bg:rgba(8,8,12,.72); --bar-bg2:rgba(10,10,16,.72); --nav-link:rgba(255,255,255,.82); --silver-grad:linear-gradient(90deg,rgba(231,231,231,.20),rgba(184,184,184,.10)); --silver-border:rgba(231,231,231,.18); --page-bg: /* soft red glow (top-left) */ radial-gradient( 1400px 900px at 12% -12%, rgba(225, 37, 43, 0.18) 0%, rgba(225, 37, 43, 0.10) 28%, rgba(225, 37, 43, 0.04) 52%, transparent 76% ), /* neutral highlight (top-right) */ radial-gradient( 1100px 760px at 92% -8%, rgba(231, 231, 231, 0.10) 0%, rgba(231, 231, 231, 0.06) 36%, rgba(231, 231, 231, 0.02) 58%, transparent 78% ), /* ambient fill to avoid hard transitions in the middle */ radial-gradient( 1200px 800px at 50% 18%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.015) 45%, transparent 80% ), /* smoother vertical base gradient with intermediate stop */ linear-gradient( 180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, var(--bg2) 28%) 38%, color-mix(in srgb, var(--bg) 38%, var(--bg2) 62%) 68%, var(--bg2) 100% ); --hero-overlay: radial-gradient(900px 520px at 25% 30%, rgba(225,37,43,.22), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85)); --parallax-overlay: radial-gradient(900px 520px at 25% 25%, rgba(225,37,43,.22), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.82)); --project-overlay: radial-gradient(700px 480px at 20% 20%, rgba(225,37,43,.18), transparent 65%), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.86)); --input-bg:rgba(255,255,255,.06); --input-border:rgba(255,255,255,.14); --backdrop:rgba(0,0,0,.72); --toast-bg:rgba(10,10,16,.85); --toast-border:rgba(231,231,231,.16); --footer-bg:rgba(7,7,10,.65); --pagehero-overlay:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85)); --modal-bg: radial-gradient(900px 520px at 20% 10%, rgba(225,37,43,.18), transparent 60%), linear-gradient(180deg, rgba(16,16,26,.95), rgba(10,10,16,.92)); } html.theme-light{ --bg:#f3f4f6; --bg2:#ffffff; --text:#0b0b10; --muted:rgba(0,0,0,.70); --muted2:rgba(0,0,0,.55); --border:rgba(0,0,0,.10); --surface:rgba(0,0,0,.04); --surface2:rgba(0,0,0,.06); --card:rgba(255,255,255,.86); --card2:rgba(255,255,255,.78); --glass:rgba(255,255,255,.72); --bar-bg:rgba(255,255,255,.78); --bar-bg2:rgba(255,255,255,.82); --nav-link:rgba(0,0,0,.78); --silver-grad:linear-gradient(90deg, rgba(255,255,255,.90), rgba(220,220,220,.75)); --silver-border:rgba(0,0,0,.08); --page-bg: /* soft red glow (top-left) */ radial-gradient( 1400px 900px at 12% -12%, rgba(225, 37, 43, 0.09) 0%, rgba(225, 37, 43, 0.05) 30%, rgba(225, 37, 43, 0.02) 54%, transparent 78% ), /* neutral gray highlight (top-right) */ radial-gradient( 1100px 760px at 92% -8%, rgba(180, 180, 180, 0.14) 0%, rgba(180, 180, 180, 0.08) 36%, rgba(180, 180, 180, 0.03) 58%, transparent 80% ), /* ambient fill for smoother blend */ radial-gradient( 1200px 800px at 50% 18%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 42%, transparent 82% ), /* smoother vertical base gradient with intermediate stop */ linear-gradient( 180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 68%, var(--bg2) 32%) 36%, color-mix(in srgb, var(--bg) 35%, var(--bg2) 65%) 70%, var(--bg2) 100% ); /* Keep hero/parallax overlays dark for readability over video/images */ --hero-overlay: radial-gradient(900px 520px at 25% 30%, rgba(225,37,43,.18), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.82)); --parallax-overlay: radial-gradient(900px 520px at 25% 25%, rgba(225,37,43,.14), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.70)); --project-overlay: radial-gradient(700px 480px at 20% 20%, rgba(225,37,43,.14), transparent 65%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.72)); --input-bg:rgba(0,0,0,.03); --input-border:rgba(0,0,0,.12); --backdrop:rgba(10,10,16,.55); --toast-bg:rgba(255,255,255,.92); --toast-border:rgba(0,0,0,.12); --footer-bg:rgba(255,255,255,.72); --pagehero-overlay:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.82)); --modal-bg: radial-gradient(900px 520px at 20% 10%, rgba(225,37,43,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,246,248,.94)); } /* ------------------------- BASE -------------------------- */ *{box-sizing:border-box} html,body{min-height:100%; overflow-x: hidden;} body { margin: 0; min-height: 100dvh; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; /* use image + fallback separately */ background-color: var(--bg); color: var(--text); } a{color:inherit;text-decoration:none} code{background:var(--surface2); padding:2px 6px; border-radius:8px} .container{width:min(1180px, 92%); margin:0 auto} .section{padding:72px 0; background-color: var(--bg2);} .section-alt { background-image: var(--page-bg); /* important: one continuous background across full page */ background-repeat: no-repeat; background-position: top center; background-attachment: scroll; } .gap-lg{gap:28px} .align-center{align-items:center} .kicker{ display:inline-block; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; color: color-mix(in srgb, var(--text) 70%, transparent); margin-bottom:10px; } .lead{font-size:18px; color:var(--muted); line-height:1.55} .muted{color:var(--muted); font-size: 16px;} .small{font-size:14px} .smallcaps{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); margin-bottom:10px} .badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface2); } .badge-silver{ background: var(--silver-grad); border-color: var(--silver-border); } .badge-red{ background: linear-gradient(135deg, rgba(225,37,43,.92), rgba(141,15,19,.92)); border-color: rgba(225,37,43,.35); } /* ------------------------- TOP BAR / NAV -------------------------- */ .topbar{ position:sticky; top:0; z-index:60; background: var(--bar-bg2); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); } .topbar-inner{display:flex; justify-content:space-between; align-items:center; padding:10px 0} .topbar-right{display:flex; gap:10px; align-items:center} .icon-btn{ display:inline-flex; align-items:center; gap:10px; padding:9px 12px; border-radius:999px; border:1px solid var(--border); background: var(--surface); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .icon-btn:hover{ transform: translateY(-2px); border-color: rgba(225,37,43,.45); box-shadow: 0 10px 30px rgba(0,0,0,.18); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:999px; border:1px solid var(--border); cursor:pointer; font-weight:700; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .btn-sm{padding:10px 14px; font-size:14px} .btn-accent{ background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: rgba(225,37,43,.45); box-shadow: 0 16px 40px rgba(225,37,43,.12); color:#fff; } .btn-accent:hover{transform: translateY(-2px); box-shadow: 0 20px 55px rgba(225,37,43,.18)} .btn-ghost{background: var(--surface)} .btn-ghost:hover{transform: translateY(-2px); border-color: color-mix(in srgb, var(--border) 60%, var(--accent) 40%)} .no-scroll{overflow:hidden} .navwrap{ position:inherit; top:52px; z-index:55; background: var(--bar-bg2); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0} .brand{display:flex; align-items:baseline; gap:10px} .brand-mark{ width:34px;height:34px; border-radius:12px; display:grid; place-items:center; font-weight:900; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 18px 40px rgba(225,37,43,.18); color:#fff; } .brand-name{font-weight:900; letter-spacing:.12em} .brand-sub{color:var(--muted2); font-weight:700} .brand-logo{ width:60px; height:60px; object-fit:contain; display:block; } .nav{display:flex; gap:18px; align-items:center} .nav a{ position:relative; color: var(--nav-link); font-weight:800; padding:8px 2px; /* tighter so underline feels crisp */ border-radius:0; /* remove pill look */ background:transparent; border:0; transition: transform .16s ease, color .16s ease, opacity .16s ease; } /* gradient underline */ .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transform: scaleX(0); transform-origin:left; opacity:0; filter: drop-shadow(0 6px 14px rgba(225,37,43,.28)); transition: transform .18s ease, opacity .18s ease; } /* subtle hover lift + underline reveal */ .nav a:hover{ transform: translateY(-1px); } .nav a:hover::after{ transform: scaleX(1); opacity:1; } /* active state: underline stays on */ .nav a.active{ color: var(--text); } .nav a.active::after{ transform: scaleX(1); opacity:1; } .nav-burger{display:none; background:transparent; border:1px solid var(--border); color:var(--text); border-radius:12px; padding:10px 12px; cursor:pointer} .nav-mobile{display:none; padding:12px 0 18px; border-top:1px solid var(--border)} .nav-mobile a, .nav-mobile button{display:block; width:92%; margin:10px auto} .nav-mobile.open{display:block} /* ------------------------- HERO -------------------------- */ .hero{ position:relative; min-height: 76vh; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--border); color:#fff; } .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(1.1) contrast(1.05); transform: scale(1.02); background:#000; } .hero-overlay{position:absolute; inset:0; background: var(--hero-overlay)} .hero-inner{position:relative; z-index:2} .hero-content{max-width:720px} .hero h1{font-size: clamp(36px, 4.2vw, 58px); margin:10px 0 12px} .hero .lead{color: rgba(255,255,255,.82)} .hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap} .hero-badges{margin-top:14px} .hero-scroll{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.7; } /* ------------------------- LAYOUT GRIDS -------------------------- */ .grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:18px} .grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px} @media (max-width: 980px){ .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .nav{display:none} .nav-burger{display:block} .hide-sm{display:none} } /* ------------------------- CARDS / COMPONENTS -------------------------- */ .card{ border-radius: var(--radius); border:1px solid var(--border); background: var(--card); box-shadow: var(--shadow); overflow:hidden; } .card-media{ min-height: 360px; background-image: var(--bg); background-size:contain; background-position:center; background-repeat: no-repeat; position:relative; } .service-media{ background-size:cover; min-height: 500px; } .card-media-inner{ position:absolute; inset:auto 0 0 0; padding:22px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.68)); color:#fff; } .checklist{list-style:none; padding:0; margin:14px 0 0} .checklist li{display:flex; gap:10px; margin:10px 0; color:var(--muted); font-size: 18px; } .checklist li::before{ content:"•"; color: var(--accent); font-weight:900; font-size: 18px; line-height: 1; } .chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px} .chip{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background: var(--surface); color: color-mix(in srgb, var(--text) 90%, transparent); font-weight:700; font-size:13px; } .section-head{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px} @media(max-width:760px){.section-head{flex-direction:column; align-items:start}} .parallax{ position:relative; background-size: cover !important; background-position: center; background-attachment: fixed; min-height: 660px; overflow: hidden; background-repeat: no-repeat; } .parallax-overlay{position:absolute; inset:0; background: var(--parallax-overlay); pointer-events: none;} .parallax .container{position:relative; z-index:2} .parallax-card{ border-radius: var(--radius); border:1px solid color-mix(in srgb, var(--border) 60%, transparent); background: var(--glass); backdrop-filter: blur(12px); box-shadow: var(--shadow); padding:26px; } @media (max-width: 991px){ .parallax{ background-attachment: scroll; } } .service-tile{ display:block; border-radius: 18px; border:1px solid var(--border); background: var(--surface2); padding:16px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .service-tile:hover{transform: translateY(-3px); border-color: rgba(225,37,43,.35); box-shadow: 0 18px 50px rgba(0,0,0,.18)} .tile-title{font-weight:900; margin-bottom:6px} .tile-sub{color: var(--muted2)} .map-card{ border-radius: var(--radius); border:1px solid var(--border); overflow:hidden; background: var(--card2); box-shadow: var(--shadow); margin-top: 30px; } .map{height:360px} .map-legend{padding:14px 16px; color: var(--muted); display:flex; align-items:center; gap:10px} .dot{width:10px;height:10px;border-radius:999px;background:color-mix(in srgb, var(--text) 20%, transparent)} .dot-accent{background: var(--accent)} .project-card{ position:relative; border-radius: var(--radius); overflow:hidden; min-height: 500px; background: var(--card2); background-image: var(--bg); background-size:cover; background-position:center; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .project-card:hover{transform: translateY(-4px); border-color: rgba(225,37,43,.35); box-shadow: 0 24px 70px rgba(0,0,0,.22)} .project-overlay{position:absolute; inset:0; background: var(--project-overlay)} .project-meta{position:absolute; inset:auto 0 0 0; padding:20px; color:#fff} .project-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px} .project-meta h3{margin:0 0 8px} .project-meta p{margin:0} .logos{display:flex; flex-direction:column; gap:12px} .logo-card{ display:flex; gap:14px; align-items:center; padding:14px 14px; border-radius:18px; border:1px solid var(--border); background: var(--surface2); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .logo-card:hover{transform: translateY(-3px); border-color: color-mix(in srgb, var(--border) 60%, var(--accent) 40%); box-shadow: 0 18px 50px rgba(0,0,0,.18)} .logo-card img{width:100px;height:100px; object-fit:contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.18)); border-radius:18px;} .logo-name{font-weight:900; margin-bottom:4px; color: #fff;} .glass-card{ border-radius: var(--radius); border:1px solid var(--border); background: var(--glass); backdrop-filter: blur(12px); box-shadow: var(--shadow); padding:20px; } .glass-card.big{padding:26px} .hover-lift{transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease} .hover-lift:hover{transform: translateY(-3px); border-color: rgba(225,37,43,.28); box-shadow: 0 22px 65px rgba(0,0,0,.22)} .timeline{margin:18px 0; display:flex; flex-direction:column; gap:14px} .step{display:flex; gap:12px; align-items:flex-start} .step-dot{ width:12px; height:12px; border-radius:999px; background: var(--accent); margin-top:6px; box-shadow: 0 0 0 6px rgba(225,37,43,.12); } .step-title{font-weight:900} .promise{margin-top:16px; padding-top:12px; border-top:1px solid var(--border)} /* ------------------------- FORMS -------------------------- */ .form{display:flex; flex-direction:column; gap:14px} label span{display:block; font-weight:800; margin-bottom:8px} input, textarea, select{ width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--input-border); background: var(--input-bg); color: var(--text); outline:none; } input:focus, textarea:focus, select:focus{border-color: rgba(225,37,43,.45); box-shadow: 0 0 0 6px rgba(225,37,43,.12)} textarea{resize:vertical} .form-actions{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap} .pillbox{border:1px solid var(--border); border-radius:16px; padding:14px; background: var(--surface)} .pillbox-title{font-weight:900; margin-bottom:10px} .pills{display:flex; flex-wrap:wrap; gap:10px} .pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid var(--border); background: var(--surface2); cursor:pointer; user-select:none; } .pill input{width:auto} .list{margin:10px 0 0; padding-left:18px; color:var(--muted)} .list li{margin:8px 0} /* ------------------------- FOOTER -------------------------- */ .footer{ border-top:1px solid var(--border); background: var(--footer-bg); padding:40px 0 20px; align-items: center; text-align: center; justify-content: center; } .footer-grid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px; } @media(max-width:980px){.footer-grid{grid-template-columns:1fr; align-items: center; text-align: center; justify-content: center;}} .footer-title{font-weight:900; margin-bottom:10px} .footer-brand{font-weight:900; letter-spacing:.10em} .footer-bottom{padding-top:14px; border-top:1px solid var(--border); margin-top:18px; align-items: center; text-align: center; justify-content: center; } /* ------------------------- PAGE HERO -------------------------- */ .page-hero{ position:relative; padding:100px 0; background-image: var(--pagehero-overlay), var(--hero-image); background-size:cover; background-position:center; color:#fff; } .page-hero .lead{color: rgba(255,255,255,.80)} .page-hero h1{font-size: clamp(30px, 3.6vw, 46px); margin:10px 0 10px} /* ------------------------- ACCORDION / CTA -------------------------- */ .accordion{display:flex; flex-direction:column; gap:12px} .acc-item{ border-radius: 18px; border:1px solid var(--border); background: var(--surface2); padding:14px 16px; } .acc-item summary{cursor:pointer; font-weight:900} .acc-body{padding-top:10px; color:var(--muted)} .cta-row{ margin-top:20px; border-radius: var(--radius); border:1px solid rgba(225,37,43,.20); background: radial-gradient(800px 360px at 30% 20%, rgba(225,37,43,.18), transparent 60%), linear-gradient(135deg, rgba(225,37,43,.10), rgba(0,0,0,.10)); padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; } @media(max-width:760px){.cta-row{flex-direction:column; align-items:flex-start}} /* ------------------------- MODAL / TOAST -------------------------- */ .modal{position:fixed; inset:0; z-index:90; display:none} .modal.open{display:block} .modal-backdrop{position:absolute; inset:0; background: var(--backdrop); backdrop-filter: blur(6px)} .modal-card{ position:relative; width: min(920px, 92%); max-height: 86vh; overflow:auto; margin: 6vh auto 0; border-radius: 24px; border:1px solid var(--border); background: var(--modal-bg); box-shadow: 0 30px 90px rgba(0,0,0,.30); } .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:20px 20px 10px; border-bottom:1px solid var(--border); } .modal-head h2{margin:6px 0 0} .form-note{border-top:1px solid var(--border); padding-top:12px} .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); padding:12px 14px; border-radius:999px; border:1px solid var(--toast-border); background: var(--toast-bg); color: var(--text); box-shadow: 0 18px 55px rgba(0,0,0,.22); opacity:0; pointer-events:none; transition: opacity .22s ease, transform .22s ease; } .toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)} /* ========================= HOME SERVICES (large cards) ========================= */ .home-services-head { margin-bottom: 1rem; } .home-services-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 800px) { .home-services-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; } } .home-service-card { --svc-radius: 22px; --svc-min-h: 550px; position: relative; display: block; min-height: var(--svc-min-h); border-radius: var(--svc-radius); overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; border: 1px solid var(--border); background: var(--card); box-shadow: 0 16px 40px rgba(0,0,0,.14); transform: translateY(0); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } @media (min-width: 1100px) { .home-service-card { min-height: 500px; } } .home-service-card__bg, .home-service-card__overlay { position: absolute; inset: 0; pointer-events: none; } .home-service-card__bg { z-index: -3; background-image: var(--svc-image); background-size: cover; background-position: center; transform: scale(1.02); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; filter: saturate(.95) contrast(1.02); } /* Dark image readability overlay + brand tint */ .home-service-card__overlay { z-index: -2; background: radial-gradient(900px 420px at 20% 15%, rgba(225,37,43,.22), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.40) 55%, rgba(0,0,0,.78) 100%); transition: opacity .35s ease, background .35s ease; opacity: 1; } /* subtle glass sheen */ .home-service-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 24%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 100%); opacity: .55; transition: opacity .35s ease, transform .45s ease; transform: translateX(0); } /* hover glow ring */ .home-service-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 0 rgba(225,37,43,0); transition: box-shadow .28s ease; pointer-events: none; } .home-service-card__content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; padding: 1.05rem; } @media (min-width: 1100px) { .home-service-card__content { padding: 1.2rem 1.15rem; } } .home-service-card__kicker { display: inline-flex; align-items: center; width: fit-content; padding: .35rem .6rem; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.95); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(6px); } .home-service-card__title { display: block; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.2; font-weight: 800; text-wrap: balance; text-shadow: 0 2px 10px rgba(0,0,0,.25); } .home-service-card__sub { display: block; color: rgba(255,255,255,.88); font-size: .94rem; line-height: 1.3; text-shadow: 0 2px 8px rgba(0,0,0,.25); } .home-service-card__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; width: fit-content; font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.95); opacity: .92; transition: transform .25s ease, opacity .25s ease; } .home-service-card__arrow { display: inline-block; transition: transform .25s ease; } /* Hover / focus interactions */ .home-service-card:hover, .home-service-card:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(0,0,0,.22); border-color: rgba(255,255,255,.18); } .home-service-card:hover .home-service-card__bg, .home-service-card:focus-visible .home-service-card__bg { transform: scale(1.08); filter: saturate(1.02) contrast(1.04); } .home-service-card:hover .home-service-card__overlay, .home-service-card:focus-visible .home-service-card__overlay { background: radial-gradient(900px 420px at 20% 15%, rgba(225,37,43,.28), transparent 62%), linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.36) 52%, rgba(0,0,0,.72) 100%); } .home-service-card:hover::before, .home-service-card:focus-visible::before { opacity: .8; transform: translateX(3%); } .home-service-card:hover::after, .home-service-card:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 0 0 1px rgba(225,37,43,.16), 0 18px 40px rgba(225,37,43,.12); } .home-service-card:hover .home-service-card__cta, .home-service-card:focus-visible .home-service-card__cta { opacity: 1; transform: translateY(-1px); } .home-service-card:hover .home-service-card__arrow, .home-service-card:focus-visible .home-service-card__arrow { transform: translateX(3px); } /* Keyboard accessibility */ .home-service-card:focus-visible { outline: 2px solid rgba(225,37,43,.55); outline-offset: 2px; } /* Light theme adjustments for contrast */ html.theme-light .home-service-card { border-color: rgba(0,0,0,.08); box-shadow: 0 14px 36px rgba(0,0,0,.10); } html.theme-light .home-service-card__overlay { background: radial-gradient(900px 420px at 20% 15%, rgba(225,37,43,.18), transparent 60%), linear-gradient(180deg, rgba(10,10,16,.08) 0%, rgba(10,10,16,.20) 55%, rgba(10,10,16,.62) 100%); } html.theme-light .home-service-card__kicker { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.28); } html.theme-light .home-service-card:hover, html.theme-light .home-service-card:focus-visible { box-shadow: 0 20px 46px rgba(0,0,0,.14); } /* Per-card images (replace with your real files) */ .home-service-card--beton { --svc-image: url('/img/screed.jpg'); } .home-service-card--abdichtung { --svc-image: url('/img/injection.jpg'); } .home-service-card--beschichtungen { --svc-image: url('/img/coating.jpg'); } .home-service-card--verstaerkung { --svc-image: url('/img/barbwire.jpg'); } /* Optional: motion-safe */ @media (prefers-reduced-motion: reduce) { .home-service-card, .home-service-card__bg, .home-service-card__overlay, .home-service-card::before, .home-service-card::after, .home-service-card__cta, .home-service-card__arrow { transition: none !important; } .home-service-card:hover, .home-service-card:focus-visible { transform: none; } .home-service-card:hover .home-service-card__bg, .home-service-card:focus-visible .home-service-card__bg { transform: none; } }