/* ========================================================================== ABLE ELECTRIC — Powering Progress. Building Trust. Delivering Excellence. Design system & animation framework · see design.md ========================================================================== */ :root { --ink: #0b141d; --ink-2: #101d29; --ink-3: #1b2c3b; --paper: #f2f5f4; --paper-2: #e7edeb; --steel: #7c8a94; --line: rgba(11, 20, 29, 0.14); --line-inv: rgba(242, 245, 244, 0.16); --accent: #2bb39c; --accent-dark: #1d8f7d; --blue: #3e6fa6; --blue-deep: #27476b; --font-display: "Poppins", "Segoe UI", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --ease-out: cubic-bezier(0.19, 1, 0.22, 1); --ease-inout: cubic-bezier(0.77, 0, 0.175, 1); --dur: 0.9s; --gutter: clamp(1.25rem, 4vw, 4rem); --header-h: 88px; --topbar-h: 2.4rem; --fs-title: 60px; --fs-content: 17px; --fs-content-large: 17px; } @media (max-width: 992px) { :root { --fs-title: 40px; } } @media (max-width: 768px) { :root { --fs-title: 35px; --fs-content-large: 17px; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent) #edf2f7; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-loading, body.modal-open { overflow: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Production-only source protection (deterrent, see protect.js) ---------- Toggled by .protected-build on , added by protect.js only when NOT running on localhost. Text selection/drag stays fully enabled in local dev. Form fields and any element marked .selectable are always exempt so forms and copyable info still work. */ /* html.protected-build body { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } */ html.protected-build input, html.protected-build textarea, html.protected-build select, html.protected-build .selectable { -webkit-user-select: text; -moz-user-select: text; user-select: text; } html.protected-build img { -webkit-user-drag: none; user-drag: none; } p { font-size: var(--fs-content); } .fs-content{ font-size: var(--fs-content); } .content-large { font-size: var(--fs-content-large)!important; } /* ---------- Typography ---------- */ .display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.015em; } .h-hero { font-size: clamp(2.4rem, 6vw, 4.5rem); } /* .h-1 { font-size: clamp(2.1rem, 3.6vw, 4.8rem); } .h-2 { font-size: clamp(1.7rem, 3.8vw, 3.2rem); } */ .h-1 , .h-2 { font-size: var(--fs-title); } .h-3 { font-size: clamp(1.25rem, 2.2vw, 1.8rem); } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); } p.eyebrow { font-size: 0.72rem!important; } @media (max-width: 580px) { .h-1, .h-2 { text-align: center; } p.eyebrow { text-align: center; justify-content: center; display: flex; } } /* .lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; max-width: 46ch; } */.lead { font-size: var(--fs-content); line-height: 1.55; max-width: 46ch; } .muted { color: var(--steel); } .accent { color: var(--accent); } /* ---------- Layout ---------- */ .container { width: 100%; padding-inline: var(--gutter); margin-inline: auto; max-width: 110rem; } .section { padding-block: 80px; position: relative; } /* .section { padding-block: clamp(4rem, 9vw, 8.5rem); position: relative; } */ .section--dark { background: var(--ink); color: var(--paper); } .section--dark .eyebrow { color: rgba(242, 245, 244, 0.55); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); } @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .grid-2 > *, .grid-3 > * { min-width: 0; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } /* .grid-2--stretch: both columns match the taller one's height (e.g. About "Who we are", where the right column grew taller once the stat-grid moved in below its text) — .col-fill lets an .img-frame--grow inside it fill the leftover height so the image's bottom lines up with whatever the sibling column ends at, instead of stopping at its own aspect-ratio. */ .grid-2--stretch { align-items: stretch; } .col-fill { display: flex; flex-direction: column; } .img-frame--grow { flex: 1 1 auto; min-height: 16rem; } @media (max-width: 900px) { .col-fill { display: block; } .img-frame--grow { flex: none; min-height: 0; aspect-ratio: 16 / 10; } } @media (max-width: 540px) { .grid-4 { grid-template-columns: 1fr; } .section { padding-block: 45px; text-align: center; } } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section-head .display { max-width: 18ch; } @media (max-width: 480px) { .section-head { text-align: center; justify-content: center; } } /* ---------- Buttons & links ---------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; overflow: hidden; transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out); isolation: isolate; } .btn::before { content: ""; position: absolute; inset: 0; background: var(--accent); border-radius: inherit; transform: translateY(101%); transition: transform 0.55s var(--ease-out); z-index: -1; } .btn:hover { color: #fff; border-color: var(--accent); } .btn:hover::before { transform: translateY(0); } .btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); } .btn--accent::before { background: var(--ink); } .btn .arr { transition: transform 0.45s var(--ease-out); } .btn:hover .arr { transform: translateX(4px); } .link-line { position: relative; display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding-bottom: .35rem; color: var(--text-color); transition: color .35s ease; } .link-line::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transition: transform .45s var(--ease-out), background-color .35s ease; transform-origin:right; } .link-line:hover{ color: var(--accent); /* tu turquesa */ } .link-line:hover::after{ transform:scaleX(0); transform-origin:left; } @media (max-width: 580px) { .btn { font-size: 0.65rem; } } /* ========================================================================== Preloader ========================================================================== */ .preloader { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--ink); color: var(--paper); transition: transform 0.9s var(--ease-inout); } .preloader.is-done { transform: translateY(-100%); } .preloader .pre-brand { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 3.5rem); text-transform: uppercase; overflow: hidden; } .preloader .pre-brand span { display: inline-block; transform: translateY(110%); animation: pre-up 0.9s var(--ease-out) 0.1s forwards; } .preloader .pre-brand .volt { color: var(--accent); } @keyframes pre-up { to { transform: translateY(0); } } .preloader .pre-tag { font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--steel); } .preloader .pre-count { font-size: 0.8rem; letter-spacing: 0.3em; color: var(--steel); font-variant-numeric: tabular-nums; } .preloader .pre-bar { width: min(16rem, 60vw); height: 2px; background: var(--line-inv); overflow: hidden; } .preloader .pre-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.2s linear; } /* ========================================================================== Top utility bar ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 210; background: var(--ink); color: rgba(242, 245, 244, 0.75); font-size: 0.7rem; letter-spacing: 0.06em; border-bottom: 1px solid var(--line-inv); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--topbar-h); padding-inline: var(--gutter); } .topbar-group { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .topbar a { transition: color 0.3s; } .topbar a:hover { color: var(--accent); } .topbar .tb-item { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; } .topbar .tb-item svg { width: 20px; height: 20px; fill: var(--accent); flex: none; } .topbar .tb-note { color: var(--accent); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .topbar .tb-social { display: flex; gap: 0.9rem; } .topbar .tb-social a { display: grid; place-items: center; } .topbar .tb-social svg { width: 20px; height: 20px; fill: currentColor; } @media (max-width: 1100px) { .topbar .tb-note { display: none; } } @media (max-width: 860px) { .topbar .tb-hide-m { display: none; } } /* ========================================================================== Header ========================================================================== .site-header.is-scrolled { top: 0; } */ .site-header { position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 200; transition: background 0.4s ease, box-shadow 0.4s ease, top 0.5s var(--ease-out); } .site-header.is-scrolled { background: rgba(11, 20, 29, 0.9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line-inv); } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem; height: var(--header-h); padding: 8px 0px; /* padding-inline: var(--gutter); */} .header-inner > nav { justify-self: center; min-width: 0; } .header-inner .header-right { justify-self: end; } .brand { display: inline-flex; align-items: center; justify-self: start; z-index: 320; position: relative; } .brand img { height: 4.5rem; width: auto; transform: translateY(0.18rem); filter: brightness(1.55) saturate(1.1) drop-shadow(0 0 6px rgba(43, 179, 156, 0.25)); } .nav-toggle { display: none; } /* Hero pages: light header over dark hero */ body.has-dark-hero .site-header:not(.is-scrolled) { color: var(--paper); } .site-header.is-scrolled { color: var(--paper); } /* ---------- Primary nav + mega menu ---------- */ .main-nav { display: flex; align-items: center; gap: 0.25rem; } .main-nav > li { position: relative; } .main-nav > li > a, .main-nav > li > button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.3s; } .main-nav > li > a:hover, .main-nav > li > button:hover, .main-nav > li > a.is-active, .main-nav > li.open > button, .main-nav > li.open > a { color: var(--accent); } .main-nav > li > .submenu-toggle { display: none; } .main-nav .caret { width: 0.55rem; height: 0.55rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.3s; } .main-nav > li.open .caret { transform: rotate(-135deg) translateY(-2px); } @media (max-width: 1330px) { .main-nav > li > a, .main-nav > li > button { padding: 0.6rem 0.55rem; font-size: 0.7rem; letter-spacing: 0.1em; } } @media (max-width: 900px) { .header-inner { grid-template-columns: auto 1fr auto; height: var(--header-h); padding-block: 0; justify-content: space-between; position: relative; } .brand img { height: 3.3rem; transform: none; } .header-inner .header-right { display: none; } .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; justify-self: end; gap: 0.32rem; width: 2.75rem; height: 2.75rem; color: currentColor; border: 1px solid currentColor; border-radius: 50%; z-index: 320; } .nav-toggle span { width: 1.15rem; height: 1.5px; background: currentColor; transform-origin: center; transition: transform 0.3s var(--ease-out), opacity 0.2s ease; } .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(0.41rem) rotate(45deg); } .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-0.41rem) rotate(-45deg); } .header-inner > nav { position: absolute; top: 0; left: auto; right: -20px; justify-self: auto; max-height: calc(100svh - var(--topbar-h) - var(--header-h)); overflow-y: auto; color: var(--paper); background: var(--ink); border-top: 1px solid var(--line-inv); box-shadow: 0 1.25rem 2.5rem rgba(11, 20, 29, 0.28); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.5rem); transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0.25s; height: 101vh; max-height: 199vh !important; padding-top: var(--header-h); } .site-header.is-scrolled .header-inner > nav { max-height: calc(100svh - var(--header-h)); } .site-header.nav-open .header-inner > nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .main-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.55rem var(--gutter) 0.8rem; } .main-nav > li { border-bottom: 1px solid var(--line-inv); } .main-nav > li.has-drop { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; } .main-nav > li:last-child { border-bottom: 0; } .main-nav > li > a, .main-nav > li > button { width: 100%; min-height: 3rem; justify-content: space-between; padding: 0.7rem 0; color: var(--paper); white-space: nowrap; } .main-nav .nav-caret { display: none; } .main-nav > li > .submenu-toggle { display: flex; width: 3rem; min-height: 3rem; justify-content: center; padding: 0; border-left: 1px solid var(--line-inv); } .main-nav > li > .submenu-toggle .caret { display: block; } } /* ========================================================================== Submenu panels (About / Services) — Spence-style: intro | links | image ========================================================================== */ .nav-mega { --mega-pad: clamp(1.5rem, 2.6vw, 2.6rem); position: fixed; left: var(--gutter); right: var(--gutter); top: calc(var(--topbar-h) + var(--header-h) + 0.5rem); background: var(--paper); color: var(--ink); border-radius: 0.7rem; overflow: hidden; /* right padding is 0: .nm-media bleeds full-height to the panel's own top/right/bottom edges, so it's clipped by this rounding — not its own — with no inset "frame" around the photo (see .nm-media below) */ padding: var(--mega-pad) 0 calc(var(--mega-pad) + 4px) var(--mega-pad); display: grid; grid-template-columns: 1.15fr 1fr 1.55fr; gap: clamp(1.5rem, 3vw, 3.25rem); align-items: stretch; opacity: 0; visibility: hidden; transform: translateY(0.8rem); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s; box-shadow: 0 30px 80px rgba(11, 20, 29, 0.45); } /* accent line along the bottom edge */ .nav-mega::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--blue)); } .site-header.is-scrolled .nav-mega { top: calc(var(--header-h) + 0.5rem); } .main-nav li.open .nav-mega { opacity: 1; visibility: visible; transform: none; } .nm-intro { align-self: start; } .nm-intro h4 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.7rem); text-transform: uppercase; line-height: 1; letter-spacing: -0.015em; } .nm-intro p { margin-top: 1.1rem; font-size: var(--fs-content); line-height: 1.6; color: #46535d; max-width: 34ch; } .nm-links { align-self: center; display: flex; flex-direction: column; max-height: 330px; flex-wrap: wrap; gap: 15px; } .nm-links--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1rem, 2vw, 2.25rem); } .nm-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0.1rem; font-size: 0.95rem; font-weight: 600; color: var(--ink); border-bottom: 1px dotted rgba(11, 20, 29, 0.28); transition: color 0.25s, padding-left 0.35s var(--ease-out); } .nm-links a:hover { color: var(--accent); padding-left: 0.5rem; } .nm-links .nm-arr { opacity: 0; transform: translateX(-0.4rem); transition: opacity 0.3s, transform 0.35s var(--ease-out); color: var(--accent); } .nm-links a:hover .nm-arr { opacity: 1; transform: none; } /* Full-bleed to the panel's top/right/bottom (no right padding on .nav-mega above; negative margins here cancel its top/bottom padding) — a single sharp rectangle clipped only by the panel's own rounded corners, so there's no separate inner radius/frame for the photo to "bleed" past. */ .nm-media { position: relative; overflow: hidden; min-height: 15rem; margin: calc(-1 * var(--mega-pad)) 0 calc(-1 * (var(--mega-pad) + 4px)) 0; } .nm-media .ph { position: absolute; inset: 0; } .nm-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } @media (max-width: 1080px) { .nav-mega { grid-template-columns: 1fr 1fr; padding-right: var(--mega-pad); } .nm-media { display: none; } } @media (max-width: 900px) { .nav-mega { grid-column: 1 / -1; position: static; display: block; max-height: 0; padding: 0 0.8rem; border-radius: 0; background: #101d28; color: var(--paper); box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height 0.35s var(--ease-out), padding 0.35s var(--ease-out); } .main-nav li.open .nav-mega { max-height: 38rem; padding-block: 0.35rem 0.8rem; } .nav-mega::after, .nm-intro, .nm-media { display: none; } .nm-links, .nm-links--2col { display: grid; grid-template-columns: 1fr; gap: 0; } .nm-links a { min-height: 2.65rem; padding: 0.65rem 0.25rem; color: rgba(242, 245, 244, 0.82); border-color: var(--line-inv); font-size: 0.82rem; } .nm-links .nm-arr { opacity: 1; transform: none; } } .header-right { display: flex; align-items: center; gap: 1rem; } .header-tel { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; transition: color 0.3s; } .header-tel svg { width: 0.9rem; height: 0.9rem; fill: var(--accent); } .header-tel:hover { color: var(--accent); } @media (max-width: 1330px) { .header-tel { display: none; } } .header-cta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.7rem 1.4rem; border-radius: 999px; background: var(--accent); color: #fff; border: 1px solid var(--accent); white-space: nowrap; transition: background 0.4s var(--ease-out), border-color 0.4s; } .header-cta:hover { background: var(--accent-dark); border-color: var(--accent-dark); } @media (max-width: 640px) { .header-cta { display: none; } } /* ========================================================================== Hero (+ slideshow) ========================================================================== */ .hero { position: relative; min-height: 97svh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--paper); overflow: hidden; background: var(--ink); padding-top: calc(var(--topbar-h) + var(--header-h)); } .hero-media { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; } .hero-media .ph { position: absolute; inset: 0; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(11, 20, 29, 0.94) 0%, rgba(11, 20, 29, 0.4) 45%, rgba(11, 20, 29, 0.3) 100%); } .hero-content { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(2rem, 5vh, 4rem); } .hero-eyebrow { margin-bottom: 1.2rem; color: rgba(242, 245, 244, 0.65); } .hero-title { max-width: 16ch; } .hero-title .accent { color: var(--accent); } .hero-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(1.5rem, 3vh, 3rem); padding-top: 1.75rem; border-top: 1px solid var(--line-inv); } .hero-sub { max-width: 52ch; color: rgba(242, 245, 244, 0.8); } .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; } /* Sub-page hero — 2/3 the height of the old 68svh, content sized/spaced down to match (min-height only, so it still grows if content wraps to more lines on very small screens — never clips). */ .hero--page { min-height: 45svh; } .hero--page .hero-title { max-width: 16ch; font-size: 50px; } .hero--page .hero-content { padding-bottom: clamp(1.25rem, 3.5vh, 2.5rem); } .hero--page .hero-bottom { margin-top: clamp(1rem, 2vh, 1.75rem); padding-top: 1.25rem; } .hero--page .hero-sub { font-size: clamp(0.95rem, 1.3vw, 1.1rem); } @media (max-width: 720px) { .hero--page::after { background: linear-gradient(to top, rgba(11, 20, 29, 0.96) 0%, rgba(11, 20, 29, 0.48) 45%, rgba(11, 20, 29, 0.38) 100%); } .hero--page .hero-title { font-size: 50px; } .hero{ padding-top: var(--header-h); justify-content: center; align-items: center; } } /* Hero slideshow */ .hero-slider { position: absolute; inset: 0; } .hs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--ease-inout); } .hs-slide.is-active { opacity: 1; } .hs-slide .ph { position: absolute; inset: 0; transform: scale(1); } .hs-slide.is-active .ph { animation: kenburns 9s ease-out forwards; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } } /* Real video slides (hero footage) */ .hs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); transform: scale(1); } .hs-slide.is-active .hs-video { animation: kenburns 8s ease-out forwards; } .hs-tag { position: absolute; right: var(--gutter); top: calc(var(--topbar-h) + var(--header-h) + 1.5rem); z-index: 3; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(242, 245, 244, 0.55); } @media (max-width: 992px) { .hs-tag { position: relative; top: 0; left: 0; display: flex; justify-content: center; text-align: center; } .hero-eyebrow { display: flex; justify-content: center; text-align: center; } } @media (max-width: 680px) { .hero-content { text-align: center; justify-content: center; } } @media (max-width: 480px) { .hero-bottom .btn { width: 100%; text-align: center; justify-content: center; } } /* ========================================================================== Marquee ========================================================================== */ .marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.1rem; background: var(--paper); position: relative; z-index: 2; } .section--dark .marquee, .marquee--dark { background: var(--ink); color: var(--paper); border-color: var(--line-inv); } .marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 30s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { display: flex; align-items: center; gap: 3rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.7rem); text-transform: uppercase; white-space: nowrap; } .marquee-track span::after { content: "⚡"; color: var(--accent); font-size: 0.6em; } @keyframes marquee { to { transform: translateX(-50%); } } /* ========================================================================== Image placeholders (stylised division imagery — swap for photography later) ========================================================================== */ .ph { position: relative; width: 100%; height: 100%; min-height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1.5'%3E%3Cpath d='M20 160V96h40v-36h60'/%3E%3Cpath d='M60 160v-40h56V80h44'/%3E%3Ccircle cx='60' cy='96' r='4'/%3E%3Ccircle cx='116' cy='120' r='4'/%3E%3Ccircle cx='120' cy='60' r='4'/%3E%3C/g%3E%3C/svg%3E") repeat, linear-gradient(140deg, var(--ph-a, #23303c) 0%, var(--ph-b, #0d151d) 70%); overflow: hidden; } .ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% 10%, var(--ph-glow, rgba(43, 179, 156, 0.22)), transparent 60%); } .ph::after { content: attr(data-label); position: absolute; left: 1.1rem; bottom: 0.9rem; font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(242, 245, 244, 0.55); } .ph--commercial { --ph-a: #26364a; --ph-b: #0d1520; --ph-glow: rgba(62, 111, 166, 0.32); } .ph--industrial { --ph-a: #3c3527; --ph-b: #171208; --ph-glow: rgba(224, 158, 66, 0.26); } .ph--lowvolt { --ph-a: #1f3a38; --ph-b: #0a1514; --ph-glow: rgba(43, 179, 156, 0.32); } .ph--service { --ph-a: #40312a; --ph-b: #16100c; --ph-glow: rgba(232, 120, 64, 0.26); } .ph--underground{ --ph-a: #35302b; --ph-b: #131009; --ph-glow: rgba(178, 141, 88, 0.26); } .ph--concrete { --ph-a: #363c41; --ph-b: #14171a; --ph-glow: rgba(180, 195, 205, 0.2); } .ph--design { --ph-a: #2c3050; --ph-b: #0e101f; --ph-glow: rgba(122, 132, 220, 0.26); } .ph--solar { --ph-a: #3a3d22; --ph-b: #14150a; --ph-glow: rgba(212, 197, 84, 0.28); } .ph--hq { --ph-a: #223442; --ph-b: #0b141d; --ph-glow: rgba(43, 179, 156, 0.3); } /* Real photos fill their frame exactly like the .ph placeholder did */ .img-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Image reveal + hover zoom (placeholders and real photos alike) */ .img-frame { position: relative; overflow: hidden; border-radius: 4px; } .img-frame .ph, .img-frame img { transform: scale(1.12); transition: transform 1.4s var(--ease-out); } [data-reveal].in .img-frame .ph, .img-frame.in .ph, [data-reveal].in .img-frame img, .img-frame.in img { transform: scale(1); } a:hover .img-frame .ph, .card:hover .img-frame .ph, a:hover .img-frame img, .card:hover .img-frame img { transform: scale(1.07); } .img-frame::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleY(1); transform-origin: top; transition: transform 1s var(--ease-inout); } .section--dark .img-frame::after { background: var(--ink); } .img-frame.in::after, [data-reveal].in .img-frame::after { transform: scaleY(0); } .ratio-16x10 { aspect-ratio: 16 / 10; } .ratio-4x5 { aspect-ratio: 4 / 5; } .ratio-1x1 { aspect-ratio: 1 / 1; } .ratio-21x9 { aspect-ratio: 21 / 9; } .ratio-3x4 { aspect-ratio: 3 / 4; } .ratio-16x9 { aspect-ratio: 16 / 9; } /* ========================================================================== Reveal / scroll animation framework ========================================================================== */ [data-reveal] { transform: translateY(2.5rem); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: var(--d, 0s); } @media(min-width:768px){ [data-reveal]{ opacity: 0; will-change: transform; } } [data-reveal="fade"] { transform: none; } [data-reveal="left"] { transform: translateX(-3rem); } [data-reveal="right"] { transform: translateX(3rem); } [data-reveal].in { opacity: 1; transform: none; } /* Split-word mask reveal */ .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; } .split .wi { display: inline-block; transform: translateY(115%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--wi) * 0.05s); will-change: transform; } .split.in .wi { transform: translateY(0); } /* Stagger group */ [data-stagger] > * { opacity: 0; transform: translateY(2rem); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } [data-stagger].in > * { opacity: 1; transform: none; } [data-stagger].in > *:nth-child(1) { transition-delay: 0.05s; } [data-stagger].in > *:nth-child(2) { transition-delay: 0.15s; } [data-stagger].in > *:nth-child(3) { transition-delay: 0.25s; } [data-stagger].in > *:nth-child(4) { transition-delay: 0.35s; } [data-stagger].in > *:nth-child(5) { transition-delay: 0.45s; } [data-stagger].in > *:nth-child(6) { transition-delay: 0.55s; } [data-stagger].in > *:nth-child(7) { transition-delay: 0.65s; } [data-stagger].in > *:nth-child(8) { transition-delay: 0.75s; } .trust-bar-background{ [data-stagger].in > *:nth-child(1) { transition-delay: 0.05s; padding-left: 0px; } [data-stagger].in > *:nth-child(8) { transition-delay: 0.75s; padding-right: 0px;} } /* ========================================================================== Trust bar & stats ========================================================================== */ .trust-bar { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--ink); color: var(--paper); } .trust-bar-background{ background: var(--ink); border-block: 1px solid var(--line-inv); } .trust-item { padding: 1.5rem 1.25rem; border-right: 1px solid var(--line-inv); display: flex; flex-direction: column; gap: 0.3rem; } .trust-item:last-child { border-right: 0; } .trust-item strong { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: bold; } .trust-item span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); } .trust-item strong em { font-style: normal; color: var(--accent); } @media (max-width: 1000px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } .trust-item:nth-child(2n) { border-right: 0; } .trust-item { border-bottom: 1px solid var(--line-inv); } } @media (max-width: 540px) { .trust-bar { grid-template-columns: 1fr; } .trust-item { border-right: 0; text-align: center; } } /* Home snapshot — text (left) + 2x2 stat-card grid (right), balanced against each other so the row doesn't leave the right side half-empty. .stat-grid/.stat-card below are shared — About's "Who we are" reuses them stacked under its own column text (see about.html) rather than inside a two-column .snapshot-grid. */ .snapshot-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 900px) { .snapshot-grid { grid-template-columns: 1fr; } .trust-bar-background .container{ padding-inline: 0px; } } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2vw, 1.35rem); } .stat-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: clamp(1.7rem, 3.4vw, 2.35rem) clamp(1.4rem, 2.8vw, 1.9rem); overflow: hidden; transition: background .45s ease, color .45s ease, border-color .45s ease, transform .35s ease, box-shadow .35s ease; } .stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--blue)); } .stat-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(11, 20, 29, 0.09); } .stat-card .num { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4.1vw, 3.3rem); line-height: 1; font-variant-numeric: tabular-nums; } .stat-card .num sup { font-size: 0.62em; font-weight: 800; color: var(--accent); top: 0; position: static; } .stat-card p { margin-top: 0.7rem; font-size: var(--fs-content); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel); } @media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } } /* Fondo animado */ .stat-card::after{ content:""; position:absolute; inset:0; background:linear-gradient( 135deg, var(--blue), #123e57 55%, var(--accent) ); opacity:0; transition:.45s ease; z-index:0; } /* Mantener el contenido arriba */ .stat-card > *{ position:relative; z-index:2; } .stat-card:hover{ transform:translateY(-8px); border-color:transparent; box-shadow: 0 22px 50px rgba(10,26,42,.18); } .stat-card:hover::after{ opacity:1; } /* Barra lateral */ .stat-card:hover::before{ background:#fff; } /* Número */ .stat-card:hover .num{ color:#fff; } /* El + */ .stat-card:hover .num small, .stat-card:hover .num sup{ color:var(--accent); } /* Texto */ .stat-card:hover p, .stat-card:hover small{ color:rgba(255,255,255,.82); } /* ========================================================================== Services index list ========================================================================== */ .solutions .lead { max-width: 100%; font-size: var(--fs-content-large); } .svc-list { border-top: 1px solid var(--line-inv); } .section:not(.section--dark) .svc-list { border-color: var(--line); } .svc-row { display: grid; grid-template-columns: 5rem 1fr auto; align-items: center; gap: 2rem; padding: clamp(1.3rem, 2.6vw, 2.1rem) 0; border-bottom: 1px solid var(--line-inv); position: relative; transition: padding-left 0.5s var(--ease-out); } .section:not(.section--dark) .svc-row { border-color: var(--line); } .svc-row::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease-out); z-index: 0; } .svc-row:hover::before { transform: scaleY(1); transform-origin: top; } .svc-row > * { position: relative; z-index: 1; transition: color 0.35s; } .svc-row:hover { padding-left: 1.5rem; } .svc-row:hover > * { color: #fff; } .svc-row .svc-idx { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; color: var(--steel); } .svc-row .svc-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-content-large); text-transform: uppercase; line-height: 1.1; } .svc-row .svc-tag { font-size: var(--fs-content); color: #fff; max-width: 45ch; text-align: right; } .svc-row .svc-arr { width: 3rem; height: 3rem; border: 1px solid var(--line-inv); border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; transition: transform 0.45s var(--ease-out), background 0.35s, border-color 0.35s; flex: none; } .svc-row:hover .svc-tag, .svc-row:hover .svc-idx { color: #fff; }.svc-row:hover .svc-end { padding-right: 12px; } .section:not(.section--dark) .svc-row .svc-arr { border-color: var(--line); } .svc-row:hover .svc-arr { transform: rotate(-45deg); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); } .svc-end { display: flex; align-items: center; gap: 2rem; } @media (max-width: 720px) { .svc-row { grid-template-columns: 1fr auto; } .svc-row .svc-idx, .svc-row .svc-tag { display: none; } } /* ========================================================================== Cards ========================================================================== */ .card { display: block; position: relative; } .card .card-body { padding-top: 1.1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .card h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.3rem); text-transform: uppercase; line-height: 1.2; transition: color 0.3s; } .card:hover h3 { color: var(--accent); } /* .card .card-meta { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); white-space: nowrap; } */ .card .card-meta { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); /* white-space: nowrap; */ display: flex; flex-direction: column; text-align: end; } .card p.card-desc { margin-top: 0.5rem; font-size:var(--fs-content); color: var(--steel); max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Division cards (services overview) */ .division-card { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.75rem 1.5rem; border: 1px solid var(--line-inv); border-radius: 6px; overflow: hidden; transition: border-color 0.4s, transform 0.5s var(--ease-out), background 0.4s; background: var(--ink-2); } .division-card:hover { border-color: rgba(43, 179, 156, 0.55); transform: translateY(-0.4rem); background: var(--ink-3); } .division-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); } .division-card:hover::before { transform: scaleX(1); } .division-card .dc-num { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; color: var(--accent); } .division-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; text-transform: uppercase; line-height: 1.25; } .division-card p { font-size: var(--fs-content); color: var(--steel); flex: 1; } .division-card .dc-link { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 0.5rem; } .division-card .dc-link .arr { transition: transform 0.4s var(--ease-out); } .division-card:hover .dc-link .arr { transform: translateX(5px); } .division-card:hover .dc-link { color: white; } @media (max-width: 480px) { .division-card, .division-card .dc-link { text-align: center; justify-content: center; } } /* Project-type tiles — photo tile with label overlay so each market is recognizable at a glance (images lazy-load; all real project photos) */ .section.why-choose .lead { font-size: var(--fs-content-large); } .type-tile { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 8px; overflow: hidden; background: var(--ink-2); } .type-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out), opacity 0.4s; opacity: 0.85; } .type-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 20, 29, 0) 35%, rgba(11, 20, 29, 0.85) 100%); } .type-tile b { position: absolute; z-index: 1; left: 0.9rem; right: 0.9rem; bottom: 0.8rem; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; display: flex; align-items: center; gap: 0.55rem; } .type-tile b::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); flex: none; } .type-tile:hover img { transform: scale(1.06); opacity: 1; } /* Project-type carousel — horizontal, scroll-snapped, 4 tiles per view on desktop tapering to a peeking single tile on mobile. Arrow buttons page by one viewport width; native touch/trackpad scroll works for free. */ .type-carousel { position: relative; } .type-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); } .type-viewport::-webkit-scrollbar { display: none; } .type-track { display: flex; gap: clamp(0.7rem, 1.6vw, 1rem); } .type-track .type-tile { flex: 0 0 calc(25% - 0.75rem); scroll-snap-align: start; } @media (max-width: 1000px) { .type-track .type-tile { flex-basis: calc(33.333% - 0.7rem); } } @media (max-width: 720px) { .type-carousel { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 0.6rem; } .type-viewport { flex: 0 0 100%; -webkit-mask-image: none; mask-image: none; } .type-track { gap: 0; } .type-track .type-tile { flex-basis: 100%; scroll-snap-stop: always; } } .type-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 1.05rem; box-shadow: 0 12px 28px rgba(11, 20, 29, 0.16); transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s, transform 0.3s var(--ease-out); } .carousel-arrow { position: relative; display: block; width: 1.05rem; height: 2px; border-radius: 999px; background: currentColor; pointer-events: none; } .carousel-arrow::after { content: ""; position: absolute; top: 50%; right: 0; width: 0.48rem; height: 0.48rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); transform-origin: center; } .type-prev .carousel-arrow, .team-carousel__prev .carousel-arrow, .testi-btn[data-prev] .carousel-arrow { transform: rotate(180deg); } .type-nav:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .type-nav:active { transform: translateY(-50%) scale(0.92); } .type-nav:disabled { opacity: 0.3; pointer-events: none; } .type-prev { left: -1.45rem; } .type-next { right: -1.45rem; } @media (max-width: 720px) { .type-nav { position: static; top: auto; left: auto; right: auto; translate: none; flex: 0 0 auto; } .type-nav:active { transform: scale(0.92); } } /* Brand experience — running logo belt (marquee). Two identical .brand-group tracks; translateX(-50%) scrolls exactly one group width for a seamless loop (each group carries a trailing padding equal to the gap so the join is invisible). Logos render as single-color silhouettes via mask-image so any logo file (mono or full-colour) shows in the section's ink tone. See agent.md "Brand experience belt". */ .brand-belt { position: relative; overflow: hidden; margin-top: clamp(1.5rem, 3vw, 2.5rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .brand-track { display: flex; width: max-content; animation: brand-marquee 40s linear infinite; } .brand-belt:hover .brand-track { animation-play-state: paused; } .brand-group { display: flex; align-items: center; gap: clamp(2.25rem, 5vw, 4.75rem); padding-right: clamp(2.25rem, 5vw, 4.75rem); } .brand-item { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1rem, 1.7vw, 1.5rem); white-space: nowrap; color: var(--ink); opacity: 0.82; transition: color 0.35s, opacity 0.35s; } .brand-item--logo { height: 3rem; background-size: 100%; background-repeat: no-repeat; background-size: 100%; width: 110px; background-size: contain; background-position: center; filter: brightness(0) invert(0); } .section.section--dark.section--tight .brand-item--logo { filter: brightness(0) invert(1); } @media(max-width: 768px){ .brand-item--logo { height: 4rem; width: 135px; } .brand-item{ font-size: clamp(2rem, 1.7vw, 1.5rem); } } /* One class per logo. Paths are relative to THIS stylesheet (assets/css/), so `../img/brands/…` resolves under both http:// and file://. To add a real logo for another brand: drop assets/img/brands/.svg, add a .brand-logo- rule here, and swap that item's text span for in index.html + projects.html. */ /* Per-logo width tunes each mark to a consistent optical height (aspect ratio × target height; the item box is 2.5rem tall). */ .section--dark .brand-item { color: var(--paper); } .brand-belt:hover .brand-item.brand-item--logo:hover { opacity: 1; filter: invert(57%) sepia(43%) saturate(1021%) hue-rotate(122deg) brightness(96%) contrast(74%)} .brand-belt:hover .brand-item:not(.brand-item--logo):hover { color: var(--accent); opacity: 1;} @keyframes brand-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .brand-belt { -webkit-mask-image: none; mask-image: none; } .brand-track { animation: none; width: auto; flex-wrap: wrap; } .brand-group { flex-wrap: wrap; justify-content: center; padding-right: 0; gap: 0.9rem 2rem; } .brand-group[aria-hidden="true"] { display: none; } } /* Featured projects — compact 3-up cards; clicking opens the project quick-view modal (data-open-project), not a separate page */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); } .feature-grid.in small { font-size: var(--fs-content); } @media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr; } } .fcard { display: block; transition: all .8s;} .fcard .img-frame img { transition: all .8s; } .fcard h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-content-large); text-transform: uppercase; line-height: 1.2; margin-bottom: 0.5rem; transition: color 0.3s; } .fcard:hover h3 { color: var(--accent); } .fcard:hover .img-frame img { scale: 1.1; } .fcard p { color: var(--steel); font-size: var(--fs-content); max-width: 40ch; } .fcard .fp-num { font-family: var(--font-display); font-size: var(--fs-content); color: var(--accent); letter-spacing: 0.18em; display: block; margin: 1.1rem 0 0.6rem; } /* Featured-projects rotator crossfade — each card fades independently (see featuredRotator() in main.js), never all three at once. */ .fcard .img-frame img, .fcard .fp-num, .fcard h3, .fcard p { transition: opacity 0.45s var(--ease-out); } .fcard.fp-fading .img-frame img, .fcard.fp-fading .fp-num, .fcard.fp-fading h3, .fcard.fp-fading p { opacity: 0; transition: all .8s;} /* ========================================================================== Coverage map (licensed states) — real US map artwork (embedded in main.js as MAP_SVG, injected by coverageMaps()) with teal pin markers overlaid on the licensed states. Licensed states are colored teal, all other states dark-blue; the SVG has no background so it reads as if the map sits directly on the section. See agent.md "Coverage map artwork". ========================================================================== */ .multistate .lead { font-size: var(--fs-content-large); } .fcard:nth-child(4), .fcard:nth-child(5), .fcard:nth-child(6) { display: none; } .map-wrap { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 900px) { .map-wrap { grid-template-columns: 1fr; } } [data-map] { position: relative; display: block; width: 100%; max-width: 60rem; aspect-ratio: 3 / 2; background: transparent; } [data-map] svg { display: block; width: 100%; height: 100%; overflow: visible; } .us-map-pins { position: absolute; inset: 0; pointer-events: none; } .map-pin { position: absolute; transform: translate(-50%, -50%); width: 1.7rem; height: 1.7rem; border: none; border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent-dark)); color: #fff; display: grid; place-items: center; font-family: var(--font-body); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.03em; cursor: default; box-shadow: 0 6px 16px rgba(43, 179, 156, 0.45), 0 0 0 3px rgba(11, 20, 29, 0.5); pointer-events: auto; transition: transform 0.35s var(--ease-out), box-shadow 0.35s; } .map-pin[data-map-state="NV"]{ background: linear-gradient(140deg, #039d83, #047764); } button.map-pin { cursor: pointer; } button.map-pin:hover, button.map-pin.on { transform: translate(-50%, -50%) translateY(-3px) scale(1.12); box-shadow: 0 10px 22px rgba(43, 179, 156, 0.55), 0 0 0 3px rgba(11, 20, 29, 0.6); } button.map-pin.on { outline: 2px solid #fff; outline-offset: 1px; } .map-pin.hq::after { content: "★"; position: absolute; top: -0.6rem; right: -0.4rem; font-size: 0.65rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* ---- Interactive projects map: Helix-style drill-down ---------------- State pins carry a cluster-count badge; clicking one zooms the SVG (CSS transform on .us-map-viewport) into the state and reveals city markers at each project's exact location. Hovering a marker shows the .map-card info card; clicking opens the project quick-view modal. */ .us-map--zoomable { overflow: hidden; border-radius: 14px; } .us-map-viewport { position: absolute; inset: 0; --z: 1; transform-origin: 0 0; transition: transform 1s var(--ease-inout); } .us-map--zoomable.is-zoomed { cursor: zoom-out; } .pin-n { position: absolute; top: -0.45rem; left: -0.55rem; min-width: 1rem; height: 1rem; padding: 0 0.2rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-style: normal; font-size: 0.52rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } .is-zoomed .map-pin { opacity: 0; pointer-events: none; } .us-map--zoomable .map-pin { transition: transform 0.35s var(--ease-out), box-shadow 0.35s, opacity 0.3s; } .map-marker { position: absolute; transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1))); width: 1.9rem; height: 1.9rem; border: none; background: transparent; display: grid; place-items: center; padding: 0; cursor: pointer; pointer-events: none; opacity: 0; transition: opacity 0.3s; } .map-marker.show { opacity: 1; pointer-events: auto; transition: opacity 0.35s 0.55s; } .map-marker i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent-dark)); box-shadow: 0 0 0 3px rgba(242, 245, 244, 0.85), 0 4px 10px rgba(0, 0, 0, 0.4); transition: transform 0.3s var(--ease-out); } .map-marker::after { content: ""; position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; } .map-marker[data-marker-state="NV"]::after { border: 2px solid #039d83; } .map-marker[data-marker-state="NV"] i{ background: linear-gradient(140deg, #039d83, #016b59); } .map-marker.show::after { animation: marker-ping 2.4s ease-out 0.9s infinite; } .map-marker:hover i, .map-marker:focus-visible i { transform: scale(1.35); } @keyframes marker-ping { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.6); opacity: 0; } } .map-card { position: absolute; z-index: 6; width: 15rem; background: var(--paper); color: var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity 0.3s, visibility 0.3s, translate 0.3s var(--ease-out); cursor: pointer; pointer-events: auto; } .map-card.show { opacity: 1; visibility: visible; translate: 0 0; } .map-card img { display: block; width: 100%; height: 6rem; object-fit: cover; } .map-card .mc-body { padding: 0.8rem 0.95rem 0.9rem; display: grid; gap: 0.15rem; } .map-card h6 { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); } .map-card strong { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.82rem; line-height: 1.25; } .map-card .mc-body > span { font-size: 0.72rem; color: var(--steel); } .map-card em { font-style: normal; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 0.35rem; } .map-card:hover em .arr { transform: translateX(4px); } .map-card em .arr { display: inline-block; transition: transform 0.3s var(--ease-out); } .map-reset { position: absolute; z-index: 6; top: 0.9rem; left: 0.9rem; padding: 0.55rem 1.1rem; border: 1px solid var(--line-inv); border-radius: 999px; background: rgba(11, 20, 29, 0.72); color: var(--paper); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; backdrop-filter: blur(4px); cursor: pointer; opacity: 0; visibility: hidden; translate: 0 -4px; transition: opacity 0.35s, visibility 0.35s, translate 0.35s var(--ease-out), border-color 0.3s, color 0.3s; } .is-zoomed .map-reset { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0.45s; } .map-reset:hover { border-color: var(--accent); color: var(--accent); } @media (prefers-reduced-motion: reduce) { .us-map-viewport { transition: none; } .map-marker.show { transition: none; } .map-marker.show::after { animation: none; } } .map-legend { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.4rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); } .map-legend i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.45rem; vertical-align: -0.1em; } .map-legend .lg-lic i { background: var(--accent); } .map-legend .lg-hq i { background: var(--accent); position: relative; } .map-legend .lg-other i { background: var(--ink-3); } .section:not(.section--dark) .map-legend .lg-other i { background: var(--paper-2); } .state-list { display: flex; flex-direction: column; gap: 0.1rem; } .state-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line-inv); } .section:not(.section--dark) .state-list li { border-color: var(--line); } .state-list .st-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-content-large); text-transform: uppercase; } .state-list .st-meta { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } @media(width<768px){ .map-legend{ flex-direction: column; } } /* ========================================================================== Values / FAQ accordion ========================================================================== */ .acc { border-top: 1px solid var(--line); } .section--dark .acc { border-color: var(--line-inv); } .acc-item { border-bottom: 1px solid var(--line); } .section--dark .acc-item { border-color: var(--line-inv); } .acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 0; text-align: left; } .acc-head .acc-title { display: flex; align-items: baseline; gap: 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-content-large); text-transform: uppercase; } .acc-head .acc-title em { font-style: normal; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; color: var(--accent); } .acc-icon { flex: none; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 50%; position: relative; transition: transform 0.5s var(--ease-out), background 0.3s, border-color 0.3s; } .section--dark .acc-icon { border-color: var(--line-inv); } .acc-icon::before, .acc-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.9rem; height: 2px; background: currentColor; translate: -50% -50%; transition: rotate 0.5s var(--ease-out); } .acc-icon::after { rotate: 90deg; } .acc-item.open .acc-icon { transform: rotate(180deg); background: var(--accent); border-color: var(--accent); color: #fff; } .acc-item.open .acc-icon::after { rotate: 0deg; } .acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.7s var(--ease-inout); } .acc-panel > div { padding: 0 0 1.8rem; max-width: 64ch; color: var(--steel); } @media (max-width: 580px) { .acc-panel { text-align: start; } .acc-icon { width: 2rem; height: 2rem; } } /* ========================================================================== Testimonials slider ========================================================================== */ /* About: mission/vision/values cards */ .mvv-card { position: relative; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); } .mvv-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--blue)); border-radius: 0 0 10px 10px; transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); } .mvv-card:hover::after { transform: scaleX(1); } .mvv-card .mvv-num { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--accent); letter-spacing: 0.2em; display: block; margin-bottom: 0.9rem; } .mvv-card p:last-child { font-size: var(--fs-content); color: #35414b; } /* About: text-only team profiles until client-approved staff content is available. */ .section.about .lead { max-width: 100%; } .about b { font-size: var(--fs-content-large); } .about p { font-size: var(--fs-content); } .about .stat-card p { font-size: 14px; } .number-about { display: flex; align-items: end; gap: 8px; } .number-about small { font-size: 30px; font-weight: 800; color: var(--accent); top: 0; position: static; } #team { scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 1rem); } .team-carousel__intro { max-width: 52ch; font-size: var(--fs-content-large); } .team-carousel__button { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.15rem; line-height: 1; touch-action: manipulation; transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s, transform 0.3s var(--ease-out); } .team-carousel__button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .team-carousel__button:active { transform: scale(0.92); } .team-carousel__button:disabled { opacity: 0.3; pointer-events: none; } .team-carousel__prev, .team-carousel__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; box-shadow: 0 12px 28px rgba(11, 20, 29, 0.16); } .team-carousel__prev { left: -1.45rem; } .team-carousel__next { right: -1.45rem; } .team-carousel__prev:active, .team-carousel__next:active { transform: translateY(-50%) scale(0.92); } .team-carousel { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-inline: 2rem;} .team-carousel__viewport { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x; cursor: grab; } .team-carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } .team-carousel__viewport.is-dragging .team-profile > img { pointer-events: none; } .team-carousel__viewport:focus-visible { outline-offset: -3px; border-radius: 8px; } .team-carousel__viewport::-webkit-scrollbar { display: none; } .team-carousel__track { display: flex; align-items: stretch; gap: clamp(0.9rem, 1.8vw, 1.4rem); } .team-profile { flex: 0 0 calc(25% - 1.05rem); display: grid; grid-template-rows: 1fr; min-width: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; border-radius: 8px; background: var(--ink); color: var(--paper); } .team-profile__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.7rem; min-height: 13rem; padding: clamp(1.1rem, 1.7vw, 1.4rem); border-top: 3px solid var(--accent); } .team-profile__role { min-height: 2.8em; color: var(--accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; line-height: 1.4; text-transform: uppercase; } .team-profile h3 { font-family: var(--font-display); font-size: clamp(1.05rem, 1.45vw, 1.3rem); font-weight: 700; line-height: 1.18; text-transform: uppercase; text-wrap: balance; } .team-profile__body > p:not(.team-profile__role):not(.team-profile__focus) { color: rgba(242, 245, 244, 0.82); line-height: 1.5; text-wrap: pretty; } .team-profile__focus { display: grid; gap: 0.28rem; margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--line-inv); color: rgba(242, 245, 244, 0.9); line-height: 1.4; } .team-profile__focus span { color: var(--steel); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } @media (max-width: 1100px) { .team-profile { flex-basis: calc(33.333% - 0.95rem); } } @media (max-width: 820px) { .team-profile { flex-basis: calc(50% - 0.7rem); } } @media (max-width: 720px) { .team-carousel__intro { max-width: none; } #team .section-head > * { flex: 0 0 100%; min-width: 0; } #team .section-head .display { max-width: 100%; } /* On phones the cards are tall, so overlapping side arrows read poorly — drop the buttons into a centered row below the carousel instead. */ .team-carousel { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 1.1rem 0.6rem; padding-inline: 0px;} .team-carousel__viewport { flex: 0 0 100%; width: 100%; min-width: 0; } .team-carousel__track { gap: 0; } .team-carousel__prev, .team-carousel__next { position: static; top: auto; left: auto; right: auto; transform: none; } .team-carousel__prev:active, .team-carousel__next:active { transform: scale(0.92); } .team-profile { flex-basis: 100%; } .team-profile__body { min-height: 12.5rem; } } @media (max-width: 580px) { .number-about { text-align: center; justify-content: center; align-items: center; } } @media (prefers-reduced-motion: reduce) { .team-carousel__viewport { scroll-behavior: auto; } } /* Compact contact card (About FAQs sidebar) */ .faqs p.lead.in { font-size: var(--fs-content-large); max-width: 100%; } .mini-contact { border: 1px solid var(--line-inv); border-radius: 10px; padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; gap: 1rem; } .section:not(.section--dark) .mini-contact { border-color: var(--line); } .mini-contact .mc-line { display: grid; gap: 0.15rem; } .mini-contact .mc-line strong { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; transition: color 0.3s; } .mini-contact .mc-line:hover strong { color: var(--accent); } .mini-contact .mc-line span { font-size: var(--fs-content); color: var(--steel); } .testi-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } @media (max-width: 900px) { .testi-wrap { grid-template-columns: 1fr; } } .testi { position: relative; min-width: 0; } .testi-viewport { overflow: hidden; } .testi-track { display: flex; transition: transform 0.8s var(--ease-inout); } .testi-slide { flex: 0 0 100%; padding-inline: 2px; } .testi-slide blockquote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.7vw, 2.2rem); text-transform: uppercase; line-height: 1.2; max-width: 100%; text-wrap: balance; } .testi-slide p { font-size: 35px; } @media(width<768px){ .testi-slide p { font-size: 18px; } } .testi-slide blockquote .accent { color: var(--accent); } .testi-slide figcaption { margin-top: 1.6rem; font-size:14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); } .testi-nav { display: flex; gap: 0.75rem; margin-top: 2.5rem; align-items: center; } .testi-btn { width: 3.2rem; height: 3.2rem; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease-out); } .section--dark .testi-btn { border-color: var(--line-inv); } .testi-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); } .testi-dots { display: flex; gap: 0.5rem; margin-left: 1rem; } .testi-dots i { width: 2rem; height: 2px; background: var(--line); position: relative; overflow: hidden; } .section--dark .testi-dots i { background: var(--line-inv); } .testi-dots i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; } .testi-dots i.on::after { transform: scaleX(1); transition: transform 6s linear; } @media (max-width: 720px) { .testi-nav { justify-content: center; margin-top: 1.5rem; } .testi-dots { margin-left: 0.25rem; } .type-nav, .team-carousel__button, .testi-btn { width: 3rem; height: 3rem; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 1.1rem; line-height: 1; padding: 0; appearance: none; box-shadow: 0 10px 24px rgba(11, 20, 29, 0.14); } .testi-slide{ display: flex; align-items: center; flex-direction: column; justify-content: center; } .section--dark .testi-btn { border-color: var(--line); background: #fff; color: var(--ink); } .type-nav:hover, .team-carousel__button:hover, .testi-btn:hover { border-color: var(--line); background: #fff; color: var(--ink); transform: none; } .type-nav:active, .team-carousel__button:active, .testi-btn:active { transform: scale(0.92); } } @media (max-width: 680px) { .testi-nav { flex-wrap: wrap; } .testi-dots { width: 100%; display: none; justify-content: center; margin-top: 20px; } } /* ========================================================================== CTA banner ========================================================================== */ .cta-banner { text-align: center; overflow: hidden; } .cta-banner .display a { display: inline-block; transition: color 0.4s ease, letter-spacing 0.6s var(--ease-out); } .cta-banner .display a:hover { color: var(--accent); letter-spacing: 0.03em; } .cta-banner .lead { margin: 1.5rem auto 0; font-size: var(--fs-content-large); } .cta-banner .hero-ctas { justify-content: center; margin-top: 2.2rem; } .cta-banner h2 { max-width: 900px; margin: 15px auto; } @media (max-width: 580px) { .cta-banner .hero-ctas .btn { width: 100%; justify-content: center; } .hero-ctas { display: flex; justify-content: center; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--ink); color: var(--paper); padding-top: clamp(3.5rem, 7vw, 6rem); overflow: hidden; } .footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; padding-bottom: 3.5rem; } @media (max-width: 900px) { .site-footer { text-align: center; } .footer-top { grid-template-columns: 1fr 1fr; justify-items: center; } .footer-col { width: 100%; } .footer-tag { margin-inline: auto; } .footer-tag img { display: block; margin-inline: auto; } .footer-social { justify-content: center; } .footer-col a:hover { padding-left: 0; } .footer-col a:hover::before { content: none; } .footer-bar { flex-direction: column; align-items: center; justify-content: center; } .footer-bar > span { width: 100%; } .footer-legal { flex-wrap: wrap; justify-content: center; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } } .footer-col h5 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); margin-bottom: 1.1rem; } .footer-col li { margin-bottom: 0.55rem; } .footer-col a, .footer-col p { color: rgba(242, 245, 244, 0.8); font-size: var(--fs-content); } .footer-col a { position: relative; transition: color 0.3s, padding-left 0.35s var(--ease-out); } .footer-col ul a:hover { color: var(--accent); padding-left: 0.6rem; } .footer-col ul a:hover::before { content: "→ "; position: absolute; left: -0.4rem; opacity: 0.9; } .footer-tag { max-width: 34ch; color: var(--steel); font-size: 0.95rem; } .footer-tag img { height: 4.4rem; margin-bottom: 1.1rem; } .footer-tag .f-lic { margin-top: 1.1rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); } .footer-social { display: flex; gap: 0.8rem; margin-top: 1.2rem; } .footer-social a { width: 2.4rem; height: 2.4rem; border: 1px solid var(--line-inv); border-radius: 50%; display: grid; place-items: center; transition: border-color 0.3s, background 0.3s, color 0.3s, padding-left 0s; } .footer-social a:hover { border-color: var(--accent); background: rgba(43, 179, 156, 0.12); color: var(--accent); padding-left: 0; } .footer-social a:hover::before { content: none; } .footer-social svg { width: 1rem; height: 1rem; fill: currentColor; } .footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line-inv); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); } .footer-bar a:hover { color: var(--accent); } .footer-legal { display: flex; gap: 1.5rem; } @media (max-width: 720px) { .footer-legal { order: 0; margin-bottom: 0.15rem; } .footer-bar > span:first-child { order: 1; font-size: 0.66rem; line-height: 1.65; letter-spacing: 0.1em; } } @media (max-width: 720px) { .footer-bar > span:first-child { font-size: 0.5rem; } } /* Back to top */ .to-top { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 150; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; opacity: 0; transform: translateY(1.5rem); transition: opacity 0.4s, transform 0.4s var(--ease-out), background 0.3s; pointer-events: none; border: 1px solid var(--line-inv); } .to-top.show { opacity: 1; transform: none; pointer-events: all; } .to-top:hover { background: var(--accent); } @media(max-width: 768px){ .to-top{ bottom: 4.4rem; } } /* ========================================================================== Custom cursor ========================================================================== */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 900; pointer-events: none; border-radius: 50%; translate: -50% -50%; } .cursor-dot { width: 6px; height: 6px; background: var(--accent); } .cursor-ring { width: 38px; height: 38px; border: 1px solid var(--accent); display: grid; place-items: center; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em; color: #fff; transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), background 0.3s, border-color 0.3s; } .cursor-ring .cursor-label { opacity: 0; transition: opacity 0.25s; } .cursor-ring.is-link { width: 56px; height: 56px; background: rgba(43, 179, 156, 0.14); } .cursor-ring.is-view { width: 86px; height: 86px; background: var(--accent); border-color: var(--accent); } .cursor-ring.is-view .cursor-label { opacity: 1; } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } /* ========================================================================== Detail pages (services / projects) ========================================================================== */ .last-text { margin-top: 15px; width: 100%; max-width: 100% !important; } .detail-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: 1.75rem; border-block: 1px solid var(--line); } @media (max-width: 800px) { .detail-meta { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .detail-meta { grid-template-columns: repeat(2, 1fr); } } .detail-meta h6 { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); margin-bottom: 0.4rem; } .detail-meta p { font-weight: 600; font-size: 0.95rem; } /* .detail-body { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 6rem); } */ .detail-body { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 6rem); margin-top: 45px; } @media (max-width: 1080px) { .detail-body { display: block; } } .detail-aside { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; } @media (max-width: 1080px) { .detail-aside { position: static; } } .detail-content > p { margin-bottom: 1.4rem; max-width: 64ch; color: #35414b; } .section--dark .detail-content > p { color: rgba(242, 245, 244, 0.75); } .detail-content h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; margin: 2.4rem 0 1rem; } .check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2rem; margin-top: 1.5rem; } @media (max-width: 640px) { .check-list { grid-template-columns: 1fr; text-align: start;} } .check-list li { display: flex; gap: 0.8rem; align-items: baseline; font-size: var(--fs-content); font-weight: 500; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); } .section--dark .check-list li { border-color: var(--line-inv); } .check-list li::before { content: "✓"; color: var(--accent); font-weight: 700; } /* Service sections on services.html */ .svc-section { scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 1rem); } /* Services quick navigation — ordered division index (numbered TOC grid) */ .svc-quicknav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } @media (max-width: 1000px) { .svc-quicknav { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .svc-quicknav { grid-template-columns: 1fr; } } .svc-quicknav a { display: flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.35s var(--ease-out); } .svc-quicknav a em { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; } .svc-quicknav a b { font-weight: 600; flex: 1; } .svc-quicknav a .arr { transition: transform 0.3s var(--ease-out); } .svc-quicknav a:hover { border-color: var(--accent); transform: translateY(-2px); } .svc-quicknav a:hover .arr { transform: translateX(4px); color: var(--accent); } .section--dark .svc-quicknav a { border-color: var(--line-inv); background: transparent; color: var(--paper); } .section--dark .svc-quicknav a:hover { border-color: var(--accent); } /* Static capability pills (services "project types we support") */ .pill-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; } .pill-grid span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 1.2rem; border: 1px solid var(--line-inv); border-radius: 999px; color: rgba(242, 245, 244, 0.82); display: inline-flex; align-items: center; gap: 0.55rem; transition: border-color 0.3s, color 0.3s; } .pill-grid span::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); } .pill-grid span:hover { border-color: var(--accent); color: #fff; } .section:not(.section--dark) .pill-grid span { border-color: var(--line); color: var(--ink); } /* Next page nav */ .next-nav { display: block; text-align: center; } .next-nav .eyebrow { justify-content: center; } .next-nav .display { transition: color 0.4s, letter-spacing 0.5s var(--ease-out); } .next-nav:hover .display { color: var(--accent); letter-spacing: 0.04em; } /* ========================================================================== Projects index — filter dropdowns + Pinterest-style masonry grid ========================================================================== */ .filter-groups { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); position: relative; z-index: 6; } .filter-groups--center { justify-content: center; } /* Centered title above the projects filter/gallery block */ .gallery-head { text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); } .gallery-head .eyebrow { justify-content: center; } .filter-group { position: relative; } .fg-trigger { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.35rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; transition: border-color 0.3s, box-shadow 0.3s; } .fg-trigger .fg-name { color: var(--steel); letter-spacing: 0.18em; } .fg-trigger .fg-current { color: var(--ink); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; } .fg-trigger .fg-chevron { flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--steel); transition: transform 0.35s var(--ease-out), border-top-color 0.3s; } .fg-trigger:hover { border-color: var(--accent); } .filter-group.open .fg-trigger { border-color: var(--accent); box-shadow: 0 10px 26px rgba(43, 179, 156, 0.16); } .filter-group.open .fg-trigger .fg-chevron { transform: rotate(180deg); border-top-color: var(--accent); } .fg-panel { position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.5rem; width: max-content; max-width: min(36rem, 88vw); padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 0.85rem; box-shadow: 0 30px 70px rgba(11, 20, 29, 0.18); opacity: 0; visibility: hidden; transform: translateY(0.6rem); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s; } .filter-group.open .fg-panel { opacity: 1; visibility: visible; transform: none; } .section.gallery .proj-note.in { text-align: center; } .section.gallery .proj-empty.show { text-align: center; justify-content: center; display: flex; } .section.gallery .proj-empty.show p { font-size: var(--fs-content-large) !important; text-wrap: balance; } @media (max-width: 640px) { .fg-panel { left: 50%; transform: translate(-50%, 0.6rem); } .filter-group.open .fg-panel { transform: translate(-50%, 0); } .filter-group { position: relative; width: 100%; } .fg-trigger { display: flex; justify-content: center; width: 100%; } .filter-btn { font-size: 0.5rem!important; padding: 0.6rem 0.6rem!important; } } .filter-btn { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.6rem 1.25rem; border: 1px solid var(--line); border-radius: 999px; transition: background 0.3s, color 0.3s, border-color 0.3s; } .filter-btn:hover { border-color: var(--accent); color: var(--accent); } .filter-btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Ordered, uniform project grid (3-up, equal 16:10 cards) + pagination */ .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .proj-grid .card { display: block; width: 100%; } @media (max-width: 1000px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .proj-grid { grid-template-columns: 1fr; } } @media (max-width:580px) { .proj-grid .card .card-body { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; line-height: 1rem; gap: 1px; } } .proj-grid .card.hide, .proj-grid .card.page-hide { display: none; } .proj-empty { display: none; padding: 3rem 0; text-align: center; color: var(--steel); } .proj-empty.show { display: block; } .proj-pager { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: clamp(2rem, 4vw, 3rem); } .proj-pager:empty { display: none; } .pg-btn { min-width: 2.6rem; height: 2.6rem; padding: 0 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; display: inline-flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s, border-color 0.3s; } .pg-btn:hover { border-color: var(--accent); color: var(--accent); } .pg-btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .pg-btn:disabled { opacity: 0.35; pointer-events: none; } .proj-note { font-size: var(--fs-content); color: var(--steel); margin-top: 2.2rem; /* text-align: center; */ } /* ========================================================================== Careers modal ========================================================================== */ #careersTitle { font-size: 40px; } .careers-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1.25rem; visibility: hidden; opacity: 0; transition: opacity 0.45s var(--ease-out), visibility 0.45s; } .careers-modal.is-open { visibility: visible; opacity: 1; } .careers-backdrop { position: absolute; inset: 0; background: rgba(11, 20, 29, 0.78); backdrop-filter: blur(6px); } .careers-panel { position: relative; width: min(46rem, 100%); max-height: min(88svh, 60rem); overflow-y: auto; background: var(--paper); color: var(--ink); border-radius: 8px; padding: clamp(1.75rem, 4vw, 3rem); transform: translateY(2.5rem); transition: transform 0.55s var(--ease-out); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); } .careers-modal.is-open .careers-panel { transform: none; } .careers-close { position: absolute; top: 1.1rem; right: 1.1rem; width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease-out); } .careers-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: rotate(90deg); } .careers-roles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 2rem; } .careers-roles span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: #35414b; } @media (max-width: 580px) { .careers-roles { text-align: center; justify-content: center; } .box-careers { text-align: center; } form .form-field label { text-align: start; } #careersTitle { font-size: 30px; text-wrap: balance; } } /* ========================================================================== Project quick-view modal (projects.html) — wide horizontal: image | body ========================================================================== */ .project-modal { position: fixed; inset: 0; z-index: 410; display: grid; place-items: center; padding: 1.25rem; visibility: hidden; opacity: 0; transition: opacity 0.4s var(--ease-out), visibility 0.4s; } .project-modal.is-open { visibility: visible; opacity: 1; } .pm-backdrop { position: absolute; inset: 0; background: rgba(11, 20, 29, 0.8); backdrop-filter: blur(6px); } .pm-panel { position: relative; width: min(76rem, 100%); height: min(84svh, 42rem); display: grid; grid-template-columns: 0.6fr 1fr; grid-template-rows: minmax(0, 1fr); background: var(--paper); color: var(--ink); border-radius: 10px; overflow: hidden; transform: translateY(2.5rem) scale(0.98); transition: transform 0.5s var(--ease-out); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55); } .project-modal.is-open .pm-panel { transform: none; } .pm-media { position: relative; overflow: hidden; background: var(--ink); min-height: 0; } .pm-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pm-img-pos, 50% 50%); } .pm-body { position: relative; min-width: 0; min-height: 0; height: 100%; } .pm-scroll { height: 100%; overflow-y: auto; padding: clamp(1.75rem, 3.5vw, 3.25rem); scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .pm-scroll::-webkit-scrollbar { width: 8px; } .pm-scroll::-webkit-scrollbar-track { background: transparent; } .pm-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; } .pm-scroll > p { margin-bottom: 1.1rem; max-width: 60ch; color: #35414b; } .pm-scroll h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; margin: 1.6rem 0 1rem; } .pm-meta { padding-block: 1.4rem; margin: 0; } .pm-meta h6 { font-size: 0.62rem; } .pm-meta p { font-size: 0.85rem; } .pm-close { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 5; width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); background: var(--paper); border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease-out); } .pm-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: rotate(90deg); } .pm-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 5; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(11, 20, 29, 0.55); color: #fff; border: 1px solid rgba(242, 245, 244, 0.4); display: grid; place-items: center; font-size: 1.2rem; backdrop-filter: blur(4px); transition: background 0.3s, transform 0.3s var(--ease-out); } .pm-nav:hover { background: var(--accent); border-color: var(--accent); } .pm-nav:active { transform: translateY(-50%) scale(0.92); } .pm-prev { left: 1rem; } .pm-next { right: 1rem; } @media (max-width: 860px) { .pm-panel { grid-template-columns: 1fr; height: min(92svh, 46rem);} .pm-nav { top: 7.5rem; width: 30px; height: 30px; line-height: normal; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } } /* ========================================================================== Contact ========================================================================== */ .form-field p br { display: none; } .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2.5rem, 6vw, 7rem); } .heading-form-mobile { display: none; } @media (max-width: 900px) { .heading-form-mobile { display: flex; } .heading-form { display: none; } .heading-info { display: flex; justify-content: center; align-items: center; flex-direction: column-reverse; gap: 0; margin-bottom: 25px; } .heading-info p.eyebrow { margin-bottom: 0; } .contact-grid { /* grid-template-columns: 1fr; */ display: flex; flex-direction: column-reverse; } } .contact-info h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1rem; margin: 2rem 0 0.5rem; } .contact-info a { border-bottom: 1px solid var(--line); transition: color 0.3s, border-color 0.3s; } .contact-info a:hover { color: var(--accent); border-color: var(--accent); } /* Boxed form fields — clearly visible inputs, uniform vertical rhythm */ .form-field { position: relative; margin-bottom: 1.4rem; } .form-field label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); margin-bottom: 0.5rem; } .form-field input, .form-field textarea, .form-field select { width: 100%; background: #fff; border: 1px solid var(--line); padding: 0.75rem 1rem; font: inherit; color: inherit; outline: none; border-radius: 8px; transition: border-color 0.3s, box-shadow 0.3s; } .form-field textarea { resize: vertical; /* min-height: 4rem; */ height: 200px; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 179, 156, 0.14); } .form-field.error input, .form-field.error textarea, .form-field.error select { border-color: #d43a2f; } .form-field .err-msg { position: absolute; right: 0; top: 0; font-size: 0.68rem; color: #d43a2f; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s; } .form-field.error .err-msg { opacity: 1; } .form-field input[type="file"] { border-style: dashed; font-size: 0.85rem; color: var(--steel); background: transparent; } .form-field input[type="file"]::file-selector-button { font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.6rem 1.2rem; margin-right: 1rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: background 0.3s, color 0.3s; } .form-field input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--paper); } .form-success { display: none; padding: 2.5rem; border: 1px solid var(--accent); border-radius: 6px; text-align: center; } .form-success.show { display: block; animation: fadein 0.6s var(--ease-out); } @keyframes fadein { from { opacity: 0; transform: translateY(1rem); } } .map-ph { margin-top: 2rem; aspect-ratio: 8 / 3; } /* ---------- Utility ---------- */ .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } .tc { text-align: center; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } [data-reveal], [data-stagger] > *, .split .wi { opacity: 1 !important; transform: none !important; } .hs-slide { transition: none; } } #faqs .content-large a { font-size: 16px !important; } @media(max-width: 768px){ .stat-card .num, .hero--page .hero-bottom{ justify-content: center; } } @media(min-width: 768px){ .btn-mobil{ display: none; } } @media(max-width: 768px){ .btn-pc{ display: none; } .contact-info .img-frame{ height: 450px; width: 100%; iframe{ height: 100%; width: 100%; } } .pm-prev { left: 0rem; } .pm-next { right: 0; } } .pm-panel--quote { max-width: 780px; grid-template-columns: 1fr; } .hour{ white-space: nowrap; } .button-faqs{ border: none; background: transparent; outline: none; } /* ================================================== SWEETALERT2 - DASHBOARD ================================================== */ .swal2-container{ padding:1.25rem; background:rgba(4,12,20,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } /* ---------- MODAL ---------- */ .swal2-popup{ width:min(430px,calc(100% - 2rem)); padding:2.25rem 2rem 2rem; border:1px solid var(--line-inv); border-radius:16px; background:var(--ink-2); color:var(--paper); box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.25); font-family:var(--font-body); } /* ---------- SUCCESS ICON ---------- */ .swal2-icon.swal2-success .swal2-success-ring{ border:2px solid rgba(32,185,168,.22); } .swal2-icon.swal2-success [class^="swal2-success-line"]{ background-color:var(--accent); } .swal2-icon.swal2-success .swal2-success-fix, .swal2-icon.swal2-success .swal2-success-circular-line-left, .swal2-icon.swal2-success .swal2-success-circular-line-right{ background-color:var(--ink-2); } /* ================================================== SUCCESS ICON ================================================== */ .swal2-icon.swal2-success{ position:relative; width:72px !important; height:72px !important; margin:0 auto 1.25rem; border:2px solid rgba(32,185,168,.28) !important; border-radius:50%; background:rgba(32,185,168,.08); color:var(--accent); box-sizing:border-box; transform:none !important; } /* Ocultamos la animación interna de SweetAlert2 */ .swal2-icon.swal2-success .swal2-success-line-tip, .swal2-icon.swal2-success .swal2-success-line-long, .swal2-icon.swal2-success .swal2-success-ring, .swal2-icon.swal2-success .swal2-success-fix, .swal2-icon.swal2-success .swal2-success-circular-line-left, .swal2-icon.swal2-success .swal2-success-circular-line-right{ display:none !important; } /* Dibujamos nuestro propio check */ .swal2-icon.swal2-success::after{ content:""; position:absolute; width:24px; height:13px; top:50%; left:50%; border-left:3px solid var(--accent); border-bottom:3px solid var(--accent); transform: translate(-50%, -65%) rotate(-45deg); border-radius:2px; box-sizing:border-box; } .swal2-icon.swal2-success::after{ content:""; position:absolute; width:24px; height:13px; top:50%; left:50%; border-left:3px solid var(--accent); border-bottom:3px solid var(--accent); transform: translate(-50%, -65%) rotate(-45deg); border-radius:2px; box-sizing:border-box; filter:drop-shadow(0 0 4px rgba(32,185,168,.25)); } /* ---------- TITLE ---------- */ .swal2-title{ margin:0; padding:0; color:var(--paper); font-family:var(--font-body); font-size:1.35rem; font-weight:700; line-height:1.3; } /* ---------- MESSAGE ---------- */ .swal2-html-container{ margin:1rem 0 0; padding:0; color:rgba(242,245,244,.68); font-size:.95rem; line-height:1.6; } /* ---------- ACTIONS ---------- */ .swal2-actions{ margin:1.75rem 0 0; gap:.75rem; } /* ---------- CONFIRM BUTTON ---------- */ .swal2-confirm.swal2-styled{ min-width:90px; height:46px; margin:0; padding:0 1.5rem; border:0; border-radius:9px; background:var(--accent) !important; color:#fff; font-family:var(--font-body); font-size:.85rem; font-weight:700; letter-spacing:.02em; cursor:pointer; box-shadow:none !important; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; } .swal2-confirm.swal2-styled:hover{ background:var(--accent-dark) !important; transform:translateY(-1px); box-shadow:0 8px 20px rgba(32,185,168,.18) !important; } .swal2-confirm.swal2-styled:focus{ box-shadow: 0 0 0 3px rgba(32,185,168,.2) !important; } /* ---------- CLOSE BUTTON ---------- */ .swal2-close{ color:rgba(242,245,244,.5); transition: color .2s ease, background-color .2s ease; } .swal2-close:hover{ color:var(--paper); background:rgba(255,255,255,.05); } /* ---------- VALIDATION / TEXT ---------- */ .swal2-validation-message{ background:var(--ink-3); color:var(--paper); } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .swal2-container{ padding:1rem; } .swal2-popup{ width:min(100%,380px); padding:2rem 1.5rem 1.5rem; border-radius:14px; } .swal2-icon.swal2-success{ width:64px; height:64px; margin-bottom:1rem; } .swal2-title{ font-size:1.2rem; } .swal2-html-container{ font-size:.9rem; } .swal2-actions{ width:100%; margin-top:1.5rem; } .swal2-confirm.swal2-styled{ width:100%; height:48px; } } /* ========================================================= USER ========================================================= */ .dashboard-header__user { position: relative; } .dashboard-user { appearance: none; border: 0; background: transparent; display: flex; align-items: center; padding: 7px 0px 7px 7px; gap: 5px; color: var(--paper); font-family: var(--font-body); cursor: pointer; border-radius: 12px; transition: background 0.25s ease, transform 0.25s ease; } .dashboard-user:hover { background: rgba(242, 245, 244, 0.06); } .dashboard-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Avatar */ .dashboard-user__avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient( 145deg, var(--accent), var(--accent-dark) ); color: var(--paper); font-family: var(--font-display); font-size: 14px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 5px 18px rgba(0,0,0,0.18); flex: 1; } /* User information */ .dashboard-user__info { display: flex; flex-direction: column; min-width: 120px; text-align: left; } .dashboard-user__info strong { color: var(--paper); font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.25; } .dashboard-user__info span { margin-top: 3px; color: white; font-size: 12px; line-height: 1.2; } /* Arrow */ .dashboard-user__arrow { width: 28px; height: 28px; display: grid; place-items: center; color: white; transition: transform 0.3s var(--ease-out), color 0.25s ease; } .dashboard-user__arrow svg { width: 17px; height: 17px; } .dashboard-user[aria-expanded="true"] .dashboard-user__arrow { color: var(--accent); transform: rotate(180deg); } /* ========================================================= DROPDOWN ========================================================= */ .dashboard-user-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 220px; padding: 8px; background: linear-gradient( 145deg, var(--ink-2), var(--ink) ); border: 1px solid var(--line-inv); border-radius: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s var(--ease-out); } .dashboard-user-menu::before { content: ""; position: absolute; top: -6px; right: 27px; width: 11px; height: 11px; background: var(--ink-2); border-left: 1px solid var(--line-inv); border-top: 1px solid var(--line-inv); transform: rotate(45deg); } .dashboard-user-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* ========================================================= MENU ITEMS ========================================================= */ .dashboard-user-menu__item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; color: var(--paper); text-decoration: none; border-radius: 9px; font-family: var(--font-body); font-size: 13px; font-weight: 500; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .dashboard-user-menu__item svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--steel); transition: color 0.2s ease; } .dashboard-user-menu__item:hover { background: rgba(43, 179, 156, 0.09); color: var(--accent); transform: translateX(2px); } .dashboard-user-menu__item:hover svg { color: var(--accent); } /* Divider */ .dashboard-user-menu__divider { height: 1px; margin: 7px 6px; background: var(--line-inv); } /* Logout */ .dashboard-user-menu__item--logout { color: #d7dddf; } .dashboard-user-menu__item--logout:hover { background: rgba(210, 80, 80, 0.08); color: #e48a8a; } .dashboard-user-menu__item--logout:hover svg { color: #e48a8a; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 768px) { .dashboard-header__inner { min-height: 70px; } .dashboard-header__brand img { height: 40px; } .dashboard-user__info { display: none; } .dashboard-user { gap: 5px; } .dashboard-user-menu { right: -4px; width: 205px; } } @media(max-width:768px){ .header-mobile{ display: block; } .header-pc{ display: none; } .dashboard-header__user{ position: relative; display: flex; justify-content: end; } .icon-login{ padding: 0; width: 42.8px; height: 42.8px; display: flex; justify-content: end; align-items: center; background: transparent; border: none; width: 100%; svg{ width: 32px; height: auto; fill: var(--accent); } &:hover{ background: transparent; border: none; } } } @media(min-width:768px){ .header-pc{ display: block; } .header-mobile{ display: none; } .icon-login{ padding: 0; width: 42.8px; height: 42.8px; display: flex; justify-content: center; align-items: center; background: transparent; border: none; svg{ width: 30px; height: auto; fill: var(--accent); } &:hover{ background: transparent; border: none; } } } @media(max-width:1450px){ .dashboard-user .dashboard-user__info{ display: none; } } /* ========================================================= LOGIN TOOLTIP ========================================================= */ .dashboard-header__user.header-pc { position: relative; } /* Tooltip */ .dashboard-header__user.header-pc.icon-not-login::after { content: "Log In"; position: absolute; top: calc(100% + 5px); right: 0; padding: 7px 11px; background: linear-gradient( 145deg, var(--ink-2), var(--ink) ); border: 1px solid var(--line-inv); border-radius: 8px; color: var(--paper); font-family: var(--font-body); font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.10); opacity: 0; visibility: hidden; transform: translateY(-5px) scale(0.96); transform-origin: top right; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s var(--ease-out); z-index: 100; } /* Flecha */ .dashboard-header__user.header-pc.icon-not-login::before { content: ""; position: absolute; top: calc(100% + 1px); right: 13px; width: 9px; height: 9px; background: var(--ink-2); border-left: 1px solid var(--line-inv); border-top: 1px solid var(--line-inv); transform: rotate(45deg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 101; } /* Mostrar tooltip */ .dashboard-header__user.header-pc:hover::after, .dashboard-header__user.header-pc:focus-within::after, .dashboard-header__user.header-pc:hover::before, .dashboard-header__user.header-pc:focus-within::before { opacity: 1; visibility: visible; } /* Animación */ .dashboard-header__user.header-pc:hover::after, .dashboard-header__user.header-pc:focus-within::after { transform: translateY(0) scale(1); }