@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-variable.woff2") format("woff2-variations"); } :root { --color-bg: #071624; --color-bg-deep: #04101b; --color-bg-alt: #0a1c2d; --color-surface: #0d2438; --color-surface-raised: #112c42; --color-surface-hover: #15354d; --color-line: #21435a; --color-line-soft: rgba(142, 190, 207, 0.14); --color-text: #f5f8fa; --color-text-soft: #b8c5ce; --color-text-muted: #879aa9; --color-brand: #74d5c7; --color-brand-strong: #50e5cf; --color-brand-ink: #062722; --color-focus: #a8fff1; --color-danger: #ff818b; --color-success: #7be0a1; --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --container: 1240px; --content: 760px; --gutter: clamp(20px, 5vw, 72px); --section-space: clamp(72px, 9vw, 128px); --header-height: 80px; --hero-peek: clamp(120px, 15svh, 160px); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --shadow-card: 0 18px 55px rgba(0, 0, 0, 0.22); --shadow-brand: 0 14px 42px rgba(80, 229, 207, 0.2); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); } body { min-width: 320px; margin: 0; padding-inline: 0 !important; overflow-x: clip; color: var(--color-text); background: var(--color-bg-deep); font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body::before { position: fixed; z-index: -1; inset: 0; pointer-events: none; content: ""; opacity: 0.22; background: radial-gradient(circle at 15% 8%, rgba(80, 229, 207, 0.08), transparent 25rem), radial-gradient(circle at 92% 36%, rgba(75, 124, 255, 0.07), transparent 28rem); } body.nav-open { overflow: hidden; } ::selection { color: var(--color-brand-ink); background: var(--color-brand); } img, svg, video { display: block; max-width: 100%; height: auto; } figure { margin: 0; } button, input, textarea, select { font: inherit; } button, [type="button"], [type="submit"] { cursor: pointer; } a { color: inherit; text-decoration-color: rgba(116, 213, 199, 0.55); text-underline-offset: 0.18em; } a:hover { color: var(--color-brand-strong); } :where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; } h1, h2, h3, h4, h5, h6, p { margin-block-start: 0; } h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-weight: 760; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; } h1 { font-size: clamp(2.7rem, 5.4vw, 5.3rem); } h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); } h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); } p:last-child { margin-bottom: 0; } .container, .header-inner, .footer-inner { width: min(var(--container), calc(100% - (2 * var(--gutter)))); margin-inline: auto; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; clip-path: inset(50%); } .screen-reader-text:focus, .skip-link:focus { z-index: 100000; top: 12px; left: 12px; width: auto; height: auto; padding: 12px 18px; clip: auto !important; color: var(--color-brand-ink); background: var(--color-focus); border-radius: var(--radius-sm); font-weight: 750; clip-path: none; } .site-main { display: block; min-height: 45vh; } .eyebrow, .section-kicker, .entry-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--color-brand); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; } .eyebrow::before, .section-kicker::before, .entry-kicker::before { width: 24px; height: 1px; content: ""; background: currentColor; box-shadow: 8px 0 18px rgba(80, 229, 207, 0.45); } .text-gradient, .hero__title em, .hero__title strong { color: var(--color-brand-strong); font-style: normal; background: linear-gradient(105deg, #a8fff1 0%, #50e5cf 48%, #81b7ff 112%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .button, .wp-element-button, .search-submit, .comment-form input[type="submit"] { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 13px 21px; color: var(--color-brand-ink); background: var(--color-brand); border: 1px solid var(--color-brand); border-radius: 12px; box-shadow: 0 10px 30px rgba(80, 229, 207, 0.12); font-size: 0.94rem; font-weight: 760; line-height: 1.2; text-align: center; text-decoration: none; transition: transform 200ms var(--ease-out), color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .button:hover, .wp-element-button:hover, .search-submit:hover, .comment-form input[type="submit"]:hover { color: var(--color-brand-ink); background: var(--color-brand-strong); border-color: var(--color-brand-strong); box-shadow: var(--shadow-brand); transform: translateY(-2px); } .button--secondary, .button--ghost { color: var(--color-text); background: rgba(255, 255, 255, 0.025); border-color: rgba(184, 197, 206, 0.32); box-shadow: none; } .button--secondary:hover, .button--ghost:hover { color: var(--color-brand-strong); background: rgba(116, 213, 199, 0.08); border-color: rgba(116, 213, 199, 0.62); box-shadow: none; } .button--small { min-height: 42px; padding: 10px 16px; font-size: 0.86rem; } .button svg, .card-link svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); } .button:hover svg, .card-link:hover svg { transform: translate(2px, -2px); } /* Header */ .site-header { position: absolute; z-index: 1000; top: 0; right: 0; left: 0; height: var(--header-height); border-bottom: 1px solid transparent; transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease; } .site-header.is-scrolled { position: fixed; background: rgba(7, 22, 36, 0.88); border-color: var(--color-line-soft); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); } .admin-bar .site-header { top: 32px; } .header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 28px; } .site-branding, .brand { display: inline-flex; min-width: max-content; align-items: center; gap: 12px; color: var(--color-text); font-weight: 780; letter-spacing: -0.02em; text-decoration: none; } .brand:hover { color: var(--color-text); } .custom-logo, .brand__image, .site-logo { width: 44px; height: 44px; object-fit: contain; } .brand__text, .site-title { display: grid; line-height: 1.05; } .brand__name, .site-title a { color: var(--color-text); font-size: 0.96rem; text-decoration: none; } .brand__role, .site-description { margin: 4px 0 0; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.055em; text-transform: uppercase; } .primary-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); } .primary-nav ul, .primary-menu, .site-header .menu { display: flex; margin: 0; padding: 0; align-items: center; gap: clamp(16px, 2vw, 28px); list-style: none; } .primary-nav a, .site-header .menu a { position: relative; display: inline-flex; min-height: 44px; align-items: center; color: var(--color-text-soft); font-size: 0.86rem; font-weight: 620; text-decoration: none; transition: color 180ms ease; } .primary-nav a::after, .site-header .menu a::after { position: absolute; right: 0; bottom: 7px; left: 0; height: 1px; content: ""; background: var(--color-brand); transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease-out); } .primary-nav a:hover, .primary-nav .current-menu-item > a, .site-header .menu a:hover, .site-header .current-menu-item > a { color: var(--color-text); } .primary-nav a:hover::after, .primary-nav .current-menu-item > a::after, .site-header .menu a:hover::after, .site-header .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; } .header-cta { min-height: 42px; padding: 10px 16px; } .nav-toggle { position: relative; display: none; width: 46px; height: 46px; padding: 0; color: var(--color-text); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--color-line-soft); border-radius: 12px; } .nav-toggle__line, .nav-toggle span:not(.screen-reader-text) { position: absolute; left: 12px; width: 20px; height: 2px; background: currentColor; border-radius: 999px; transition: transform 200ms ease, top 200ms ease, opacity 200ms ease; } .nav-toggle__line:nth-of-type(1), .nav-toggle span:nth-last-child(3) { top: 15px; } .nav-toggle__line:nth-of-type(2), .nav-toggle span:nth-last-child(2) { top: 21px; } .nav-toggle__line:nth-of-type(3), .nav-toggle span:nth-last-child(1) { top: 27px; } .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-of-type(1) { top: 21px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-of-type(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-of-type(3) { top: 21px; transform: rotate(-45deg); } /* Hero */ .hero-stage { position: relative; display: grid; min-height: calc(100vh - var(--hero-peek)); min-height: calc(100svh - var(--hero-peek)); overflow: clip; padding-top: var(--header-height); isolation: isolate; background: radial-gradient(circle at 77% 46%, rgba(116, 213, 199, 0.16), transparent 28%), radial-gradient(circle at 13% 72%, rgba(68, 111, 187, 0.1), transparent 33%), linear-gradient(135deg, #071624 0%, #0a1c2d 62%, #0b2235 100%); } .hero-stage::before { position: absolute; z-index: -2; inset: 0; content: ""; opacity: 0.45; background-image: linear-gradient(rgba(142, 190, 207, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(142, 190, 207, 0.045) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent 92%); } .hero-stage::after { position: absolute; z-index: -1; width: min(55vw, 780px); aspect-ratio: 1; right: -12%; bottom: -40%; content: ""; border: 1px solid rgba(116, 213, 199, 0.09); border-radius: 50%; box-shadow: 0 0 0 100px rgba(116, 213, 199, 0.022), 0 0 0 200px rgba(116, 213, 199, 0.016); } .hero { display: grid; width: 100%; align-items: center; padding-block: clamp(54px, 7vh, 96px) clamp(88px, 11vh, 126px); } .hero__inner { display: grid; width: min(var(--container), calc(100% - (2 * var(--gutter)))); margin-inline: auto; align-items: center; gap: clamp(38px, 6vw, 88px); grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); } .hero__content { position: relative; z-index: 2; max-width: 790px; } .hero__title { max-width: 13ch; margin-bottom: 26px; font-size: clamp(2.8rem, 5.25vw, 5.15rem); font-weight: 790; line-height: 0.99; letter-spacing: -0.054em; } .hero__description, .hero__lead { max-width: 65ch; margin-bottom: 30px; color: var(--color-text-soft); font-size: clamp(1.04rem, 1.4vw, 1.27rem); line-height: 1.62; } .hero__actions { display: flex; margin-bottom: 34px; flex-wrap: wrap; gap: 12px; } .hero__scope, .scope-list { display: flex; margin: 0; padding: 0; flex-wrap: wrap; gap: 8px; list-style: none; } .hero__scope li, .scope-list li, .chip, .project-card__tag, .post-card__category, .entry-taxonomy a { display: inline-flex; min-height: 30px; align-items: center; padding: 6px 10px; color: var(--color-text-soft); background: rgba(116, 213, 199, 0.07); border: 1px solid rgba(116, 213, 199, 0.18); border-radius: 999px; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.2; letter-spacing: 0.02em; } .hero__media { position: relative; z-index: 1; display: grid; justify-items: center; place-items: center; } .hero__media::before { position: absolute; z-index: -1; width: 82%; aspect-ratio: 1; content: ""; background: radial-gradient(circle, rgba(80, 229, 207, 0.14), transparent 68%); filter: blur(10px); } .hero__image, .hero__media img { width: min(44vw, 570px); max-height: 65vh; object-fit: contain; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.28)); animation: hero-float 7s ease-in-out infinite; } .hero__status, .availability-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--color-text-soft); font-family: var(--font-mono); font-size: 0.74rem; } .hero__status::before, .availability-badge::before { width: 8px; height: 8px; content: ""; background: var(--color-success); border-radius: 50%; box-shadow: 0 0 0 5px rgba(123, 224, 161, 0.12); } .scroll-cue { position: absolute; z-index: 3; bottom: 20px; left: 50%; display: grid; justify-items: center; gap: 8px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.11em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); } .scroll-cue::after { width: 1px; height: 30px; content: ""; background: linear-gradient(var(--color-brand), transparent); animation: scroll-cue 1.7s ease-in-out infinite; transform-origin: top; } .scroll-cue:hover { color: var(--color-brand); } @keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes scroll-cue { 0%, 100% { opacity: 0.35; transform: scaleY(0.55); } 50% { opacity: 1; transform: scaleY(1); } } /* Sections and shared headings */ .section { position: relative; padding-block: var(--section-space); } .section[id] { scroll-margin-top: calc(var(--header-height) + 12px); } .section--surface, .section-surface { background: var(--color-bg-alt); border-block: 1px solid var(--color-line-soft); } .section--raised { background: var(--color-surface); } .section--intro, .intro-strip, .capability-strip { position: relative; z-index: 4; margin-top: 0; padding-block: clamp(44px, 6vw, 72px); background: var(--color-surface); border-top: 1px solid rgba(116, 213, 199, 0.18); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 -22px 70px rgba(0, 0, 0, 0.16); } .section-heading { display: flex; margin-bottom: clamp(34px, 5vw, 58px); align-items: end; justify-content: space-between; gap: 36px; } .section-heading__content, .section-heading > div:first-child { max-width: 760px; } .section-heading h2 { margin-bottom: 0; } .section-heading__copy, .section-heading p { max-width: 58ch; margin: 14px 0 0; color: var(--color-text-soft); font-size: 1.04rem; } .section-heading__link { flex: 0 0 auto; } /* About */ .about-layout { display: grid; align-items: start; gap: clamp(38px, 7vw, 90px); grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); } .about-copy, .about__content { max-width: 760px; } .about-copy h2, .about__content h2 { margin-bottom: 26px; } .about-copy p, .about__content p { color: var(--color-text-soft); font-size: clamp(1rem, 1.3vw, 1.16rem); } .about-copy p + p, .about__content p + p { margin-top: 18px; } .about-signature { display: inline-flex; margin-top: 22px; align-items: center; gap: 14px; color: var(--color-text); font-weight: 720; } .about-signature img { width: 48px; height: 48px; object-fit: contain; } .proof-grid, .about-proof, .stats-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof-card, .stat-card { min-height: 138px; padding: 22px; background: linear-gradient(145deg, rgba(17, 44, 66, 0.92), rgba(13, 36, 56, 0.86)); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); transition: transform 220ms var(--ease-out), border-color 220ms ease; } .proof-card:hover, .stat-card:hover { border-color: rgba(116, 213, 199, 0.38); transform: translateY(-3px); } .proof-card__icon, .stat-card__icon { display: grid; width: 40px; height: 40px; margin-bottom: 20px; place-items: center; color: var(--color-brand); background: rgba(116, 213, 199, 0.08); border: 1px solid rgba(116, 213, 199, 0.16); border-radius: 11px; } .proof-card strong, .stat-card strong { display: block; margin-bottom: 5px; color: var(--color-text); font-size: 0.98rem; } .proof-card span, .stat-card span { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.45; } /* Services */ .services-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .service-card { position: relative; min-height: 290px; overflow: hidden; padding: clamp(24px, 2.4vw, 32px); background: linear-gradient(150deg, rgba(17, 44, 66, 0.9), rgba(10, 28, 45, 0.96)); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); transition: transform 240ms var(--ease-out), border-color 240ms ease, box-shadow 240ms ease, background-color 240ms ease; } .service-card::after { position: absolute; width: 170px; height: 170px; right: -90px; bottom: -100px; content: ""; background: radial-gradient(circle, rgba(116, 213, 199, 0.13), transparent 68%); transition: transform 350ms var(--ease-out); } .service-card:hover { background: linear-gradient(150deg, rgba(21, 53, 77, 0.96), rgba(10, 28, 45, 0.98)); border-color: rgba(116, 213, 199, 0.42); box-shadow: var(--shadow-card); transform: translateY(-5px); } .service-card:hover::after { transform: scale(1.35); } .service-card__top { display: flex; margin-bottom: 30px; align-items: center; justify-content: space-between; } .service-card__icon { display: grid; width: 48px; height: 48px; place-items: center; color: var(--color-brand); background: rgba(116, 213, 199, 0.08); border: 1px solid rgba(116, 213, 199, 0.18); border-radius: 13px; } .service-card__icon svg { width: 24px; height: 24px; } .service-card__number { color: rgba(184, 197, 206, 0.32); font-family: var(--font-mono); font-size: 0.72rem; } .service-card h3 { margin-bottom: 14px; } .service-card p { color: var(--color-text-soft); font-size: 0.94rem; line-height: 1.68; } /* Project cards */ .projects-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .project-card, .post-card { position: relative; display: flex; min-width: 0; overflow: hidden; flex-direction: column; background: rgba(13, 36, 56, 0.88); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.015) inset; transition: transform 240ms var(--ease-out), border-color 240ms ease, box-shadow 240ms ease; } .project-card:hover, .project-card:focus-within, .post-card:hover, .post-card:focus-within { border-color: rgba(116, 213, 199, 0.42); box-shadow: var(--shadow-card); transform: translateY(-5px); } .project-card__media, .post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(116, 213, 199, 0.2), transparent 28%), linear-gradient(135deg, #102b42, #071521); border-bottom: 1px solid var(--color-line-soft); } .project-card__media::after, .post-card__media::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(to top, rgba(4, 16, 27, 0.2), transparent 45%); } .project-card__media img, .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--ease-out), filter 300ms ease; } .project-card:hover .project-card__media img, .post-card:hover .post-card__media img { transform: scale(1.04); } .project-card__placeholder, .project-placeholder { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; color: rgba(245, 248, 250, 0.92); font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 750; letter-spacing: -0.08em; } .project-card__placeholder::before, .project-placeholder::before { position: absolute; inset: 14%; content: ""; opacity: 0.5; background-image: linear-gradient(rgba(116, 213, 199, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 213, 199, 0.13) 1px, transparent 1px); background-size: 26px 26px; border: 1px solid rgba(116, 213, 199, 0.16); border-radius: 18px; transform: rotate(-4deg); } .project-card__body, .post-card__body { display: flex; padding: 24px; flex: 1; flex-direction: column; } .project-card__meta, .post-card__meta, .entry-meta { display: flex; margin-bottom: 13px; align-items: center; flex-wrap: wrap; gap: 8px 12px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.4; } .project-card h3, .post-card h2, .post-card h3 { margin-bottom: 12px; font-size: clamp(1.18rem, 1.7vw, 1.45rem); line-height: 1.2; } .project-card h3 a, .post-card h2 a, .post-card h3 a { color: var(--color-text); text-decoration: none; } .project-card h3 a::after, .post-card h2 a::after, .post-card h3 a::after { position: absolute; inset: 0; content: ""; } .project-card__excerpt, .post-card__excerpt { margin-bottom: 20px; color: var(--color-text-soft); font-size: 0.9rem; line-height: 1.65; } .project-card__footer, .post-card__footer { display: flex; margin-top: auto; align-items: center; justify-content: space-between; gap: 14px; } .project-card__tags, .entry-taxonomy { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; } .card-link { position: relative; z-index: 2; display: inline-flex; min-width: max-content; min-height: 40px; align-items: center; gap: 7px; color: var(--color-brand); font-size: 0.78rem; font-weight: 720; text-decoration: none; } .project-card--featured { grid-column: span 2; } .project-card--featured .project-card__media { aspect-ratio: 2 / 1; } .projects-empty, .no-results { padding: clamp(30px, 5vw, 58px); color: var(--color-text-soft); background: rgba(13, 36, 56, 0.68); border: 1px dashed rgba(116, 213, 199, 0.3); border-radius: var(--radius-md); text-align: center; grid-column: 1 / -1; } /* Posts */ .posts-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .post-card__media { aspect-ratio: 16 / 9; } .post-card__category { color: var(--color-brand); } .post-card time { color: var(--color-text-muted); } /* Contact and Fluent Forms */ .contact-panel { position: relative; display: grid; overflow: hidden; padding: clamp(28px, 5vw, 62px); align-items: center; gap: clamp(38px, 7vw, 88px); background: radial-gradient(circle at 6% 90%, rgba(80, 229, 207, 0.1), transparent 30%), linear-gradient(145deg, rgba(17, 44, 66, 0.96), rgba(7, 22, 36, 0.98)); border: 1px solid rgba(116, 213, 199, 0.2); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); grid-template-columns: minmax(0, 5fr) minmax(340px, 5fr); } .contact-panel::before { position: absolute; width: 360px; height: 360px; top: -260px; right: -100px; content: ""; border: 1px solid rgba(116, 213, 199, 0.09); border-radius: 50%; box-shadow: 0 0 0 70px rgba(116, 213, 199, 0.025); } .contact-panel__content { position: relative; z-index: 1; } .contact-panel__content h2 { margin-bottom: 22px; } .contact-panel__content > p { max-width: 54ch; color: var(--color-text-soft); font-size: 1.04rem; } .contact-links { display: grid; margin: 28px 0 0; padding: 0; gap: 10px; list-style: none; } .contact-links a { display: inline-flex; min-height: 42px; align-items: center; gap: 10px; color: var(--color-text-soft); text-decoration: none; } .contact-links a:hover { color: var(--color-brand); } .contact-panel__form, .form-card { position: relative; z-index: 2; padding: clamp(22px, 3vw, 34px); background: rgba(4, 16, 27, 0.52); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .contact-panel .fluentform, .newsletter-panel .fluentform, .widget .fluentform { color: var(--color-text); } .contact-panel .ff-el-group, .newsletter-panel .ff-el-group, .widget .ff-el-group { margin-bottom: 16px; } .contact-panel .ff-el-input--label, .newsletter-panel .ff-el-input--label, .widget .ff-el-input--label { margin-bottom: 7px; } .contact-panel .ff-el-input--label label, .newsletter-panel .ff-el-input--label label, .widget .ff-el-input--label label, .contact-panel .ff-el-form-check-label, .newsletter-panel .ff-el-form-check-label, .widget .ff-el-form-check-label { color: var(--color-text-soft) !important; font-size: 0.82rem; font-weight: 620; } .contact-panel .ff-el-form-control, .newsletter-panel .ff-el-form-control, .widget .ff-el-form-control { width: 100%; min-height: 54px; padding: 13px 15px; color: var(--color-text) !important; background: #071827 !important; border: 1px solid var(--color-line) !important; border-radius: 10px !important; box-shadow: none !important; transition: border-color 180ms ease, box-shadow 180ms ease; } .contact-panel textarea.ff-el-form-control, .newsletter-panel textarea.ff-el-form-control, .widget textarea.ff-el-form-control { min-height: 130px; resize: vertical; } .contact-panel .ff-el-form-control::placeholder, .newsletter-panel .ff-el-form-control::placeholder, .widget .ff-el-form-control::placeholder { color: #6f8595 !important; opacity: 1; } .contact-panel .ff-el-form-control:focus, .newsletter-panel .ff-el-form-control:focus, .widget .ff-el-form-control:focus { border-color: var(--color-brand) !important; box-shadow: 0 0 0 3px rgba(116, 213, 199, 0.16) !important; outline: none; } .contact-panel .ff-btn-submit, .newsletter-panel .ff-btn-submit, .widget .ff-btn-submit { min-height: 50px; padding: 13px 20px !important; color: var(--color-brand-ink) !important; background: var(--color-brand) !important; border: 1px solid var(--color-brand) !important; border-radius: 10px !important; font-weight: 760 !important; opacity: 1 !important; transition: transform 180ms var(--ease-out), background 180ms ease, box-shadow 180ms ease; } .contact-panel .ff-btn-submit:hover, .newsletter-panel .ff-btn-submit:hover, .widget .ff-btn-submit:hover { background: var(--color-brand-strong) !important; box-shadow: var(--shadow-brand); transform: translateY(-2px); } .contact-panel .ff-el-is-error .ff-el-form-control, .newsletter-panel .ff-el-is-error .ff-el-form-control, .widget .ff-el-is-error .ff-el-form-control { border-color: var(--color-danger) !important; } .contact-panel .error.text-danger, .newsletter-panel .error.text-danger, .widget .error.text-danger { margin-top: 6px; color: var(--color-danger) !important; font-size: 0.75rem; } .ff-message-success { padding: 16px 18px !important; color: #cbffdc !important; background: rgba(123, 224, 161, 0.09) !important; border: 1px solid rgba(123, 224, 161, 0.34) !important; border-radius: 10px !important; box-shadow: none !important; } .form-fallback, .plugin-notice { padding: 18px; color: var(--color-text-soft); background: rgba(255, 255, 255, 0.025); border: 1px dashed var(--color-line); border-radius: 10px; font-size: 0.88rem; } /* Newsletter, shown globally */ .newsletter-section { padding-block: clamp(54px, 7vw, 90px); background: var(--color-bg-deep); border-top: 1px solid var(--color-line-soft); } .newsletter-panel { position: relative; display: grid; overflow: hidden; padding: clamp(28px, 4vw, 48px); align-items: center; gap: 36px; background: linear-gradient(115deg, rgba(116, 213, 199, 0.08), transparent 42%), var(--color-surface); border: 1px solid rgba(116, 213, 199, 0.19); border-radius: var(--radius-lg); grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr); } .newsletter-panel::after { position: absolute; width: 210px; height: 210px; right: -100px; bottom: -130px; content: ""; border: 1px solid rgba(116, 213, 199, 0.12); border-radius: 50%; box-shadow: 0 0 0 45px rgba(116, 213, 199, 0.026); } .newsletter-panel__content, .newsletter-panel__form { position: relative; z-index: 1; } .newsletter-panel h2, .newsletter-panel h3 { margin-bottom: 12px; font-size: clamp(1.55rem, 2.6vw, 2.45rem); } .newsletter-panel p { max-width: 55ch; color: var(--color-text-soft); } .newsletter-panel .frm-fluent-form, .newsletter-panel form { display: grid; align-items: end; gap: 10px; } .newsletter-panel .ff_submit_btn_wrapper { margin-bottom: 0; } .newsletter-panel .ff-btn-submit { width: 100%; } /* Inner page headers */ .page-hero, .archive-hero, .search-hero, .entry-hero { position: relative; overflow: hidden; padding-block: calc(var(--header-height) + clamp(68px, 8vw, 112px)) clamp(60px, 7vw, 98px); background: radial-gradient(circle at 78% 35%, rgba(116, 213, 199, 0.11), transparent 28%), linear-gradient(145deg, var(--color-bg), var(--color-bg-alt)); border-bottom: 1px solid var(--color-line-soft); } .page-hero::after, .archive-hero::after, .entry-hero::after { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: 0.35; background-image: linear-gradient(90deg, rgba(142, 190, 207, 0.045) 1px, transparent 1px); background-size: 64px 100%; mask-image: linear-gradient(90deg, transparent, black 30%, transparent); } .page-hero__inner, .archive-hero__inner, .entry-hero__inner { position: relative; z-index: 1; max-width: 920px; } .page-hero h1, .archive-hero h1, .entry-hero h1 { max-width: 17ch; margin-bottom: 18px; font-size: clamp(2.4rem, 5vw, 4.7rem); } .page-hero p, .archive-hero p, .entry-hero p { max-width: 65ch; margin-bottom: 0; color: var(--color-text-soft); font-size: clamp(1rem, 1.4vw, 1.2rem); } .content-shell { padding-block: var(--section-space); } .content-grid, .archive-layout { display: grid; align-items: start; gap: clamp(34px, 5vw, 64px); grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } .archive-posts { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Article */ .article-layout { display: grid; width: min(1160px, calc(100% - (2 * var(--gutter)))); margin-inline: auto; padding-block: var(--section-space); align-items: start; gap: clamp(42px, 7vw, 88px); grid-template-columns: minmax(0, var(--content)) minmax(260px, 310px); } .article-layout--single { justify-content: center; } .article, .entry-content { min-width: 0; } .article__featured, .entry-featured-image { width: min(1160px, calc(100% - (2 * var(--gutter)))); margin: clamp(30px, 5vw, 58px) auto 0; overflow: hidden; border: 1px solid var(--color-line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .article__featured img, .entry-featured-image img { width: 100%; max-height: 660px; object-fit: cover; } .entry-content { color: #d4dde3; font-size: clamp(1.04rem, 1.2vw, 1.13rem); line-height: 1.78; } .entry-content > * { max-width: var(--content); margin-inline: auto; } .entry-content > .alignwide { max-width: 1040px; } .entry-content > .alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); } .entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 2.2em; margin-bottom: 0.75em; scroll-margin-top: calc(var(--header-height) + 24px); } .entry-content p, .entry-content ul, .entry-content ol, .entry-content blockquote, .entry-content pre, .entry-content table, .entry-content figure { margin-bottom: 1.45em; } .entry-content a { color: var(--color-brand); font-weight: 600; } .entry-content a:hover { color: var(--color-focus); } .entry-content ul, .entry-content ol { padding-left: 1.3em; } .entry-content li + li { margin-top: 0.45em; } .entry-content blockquote { padding: 8px 0 8px 24px; color: var(--color-text-soft); border-left: 3px solid var(--color-brand); font-size: 1.08em; font-style: italic; } .entry-content code, .comment-content code { padding: 0.15em 0.36em; color: #b9fff5; background: #04101b; border: 1px solid rgba(116, 213, 199, 0.12); border-radius: 5px; font-family: var(--font-mono); font-size: 0.86em; } .entry-content pre, .comment-content pre { max-width: 100%; padding: 22px; overflow-x: auto; color: #d9fdf7; background: #040d16; border: 1px solid var(--color-line-soft); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.65; } .entry-content pre code { padding: 0; color: inherit; background: transparent; border: 0; } .entry-content table { width: 100%; border-spacing: 0; border-collapse: collapse; } .entry-content th, .entry-content td { padding: 12px 14px; border: 1px solid var(--color-line); text-align: left; } .entry-content th { color: var(--color-text); background: var(--color-surface); } .entry-content figcaption, .wp-caption-text { margin-top: 8px; color: var(--color-text-muted); font-size: 0.76rem; text-align: center; } .entry-footer, .article-footer { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--color-line-soft); } .post-navigation { margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--color-line-soft); } .post-navigation .nav-links { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-navigation a { display: grid; min-height: 112px; padding: 20px; align-content: center; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: var(--radius-sm); text-decoration: none; } .post-navigation a:hover { color: var(--color-brand); border-color: rgba(116, 213, 199, 0.35); } .nav-subtitle { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; } .nav-title { margin-top: 6px; font-weight: 700; } /* Sidebar and widgets */ .sidebar, .widget-area { min-width: 0; } .article-layout .sidebar { position: sticky; top: calc(var(--header-height) + 28px); } .widget { margin-bottom: 18px; padding: 22px; color: var(--color-text-soft); background: rgba(13, 36, 56, 0.75); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); } .widget-title, .widget h2, .widget h3 { margin-bottom: 16px; font-size: 1rem; letter-spacing: -0.015em; } .widget ul { display: grid; margin: 0; padding: 0; gap: 9px; list-style: none; } .widget li { padding-bottom: 9px; border-bottom: 1px solid rgba(142, 190, 207, 0.09); } .widget li:last-child { padding-bottom: 0; border-bottom: 0; } .widget a { color: var(--color-text-soft); text-decoration: none; } .widget a:hover { color: var(--color-brand); } .search-form { display: flex; gap: 8px; } .search-form label { flex: 1; } .search-field, .comment-form input:not([type="submit"]), .comment-form textarea { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--color-text); background: #071827; border: 1px solid var(--color-line); border-radius: 9px; } .search-field:focus, .comment-form input:not([type="submit"]):focus, .comment-form textarea:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(116, 213, 199, 0.15); outline: none; } .search-submit { min-width: 48px; padding-inline: 15px; } /* Pagination */ .pagination, .posts-navigation { margin-top: 48px; } .pagination .nav-links, .posts-navigation .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .page-numbers, .posts-navigation a { display: inline-flex; min-width: 44px; min-height: 44px; padding: 10px 13px; align-items: center; justify-content: center; color: var(--color-text-soft); background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: 9px; text-decoration: none; } .page-numbers.current, .page-numbers:hover, .posts-navigation a:hover { color: var(--color-brand-ink); background: var(--color-brand); border-color: var(--color-brand); } /* Comments */ .comments-area { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--color-line-soft); } .comments-title, .comment-reply-title { margin-bottom: 28px; font-size: clamp(1.45rem, 2vw, 2rem); } #cancel-comment-reply-link { display: inline-flex; margin-left: 12px; vertical-align: middle; font-size: 0.62em; font-weight: 650; white-space: nowrap; } .comment-list { margin: 0 0 44px; padding: 0; list-style: none; } .comment-list .children { margin-left: 30px; list-style: none; } .comment-body { margin-bottom: 18px; padding: 22px; background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: var(--radius-sm); } .comment-meta { margin-bottom: 14px; color: var(--color-text-muted); font-size: 0.78rem; } .comment-author { color: var(--color-text); font-weight: 700; } .comment-author img { display: inline-block; margin-right: 9px; border-radius: 50%; vertical-align: middle; } .comment-form { display: grid; gap: 14px; } .comment-form p { margin: 0; } .comment-form label { display: block; margin-bottom: 6px; color: var(--color-text-soft); font-size: 0.82rem; font-weight: 650; } /* 404 */ .error-404, .not-found-page { display: grid; min-height: 70vh; padding-block: calc(var(--header-height) + 80px) 90px; place-items: center; text-align: center; } .error-404__inner, .not-found-page__inner { width: min(680px, calc(100% - (2 * var(--gutter)))); } .error-404__code, .not-found-page__code { display: block; margin-bottom: 12px; color: rgba(116, 213, 199, 0.24); font-family: var(--font-mono); font-size: clamp(5rem, 16vw, 10rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.1em; } .error-404 h1, .not-found-page h1 { margin-bottom: 18px; } .error-404 p, .not-found-page p { margin-bottom: 28px; color: var(--color-text-soft); } .error-404 .search-form, .not-found-page .search-form { max-width: 520px; margin-inline: auto; } /* Footer */ .site-footer { position: relative; padding-block: clamp(54px, 7vw, 88px) 28px; background: var(--color-bg-deep); border-top: 1px solid var(--color-line-soft); } .footer-grid { display: grid; margin-bottom: 48px; gap: clamp(32px, 6vw, 78px); grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(140px, 0.6fr)); } .footer-brand { max-width: 430px; } .footer-brand .brand { margin-bottom: 18px; } .footer-brand p { color: var(--color-text-muted); font-size: 0.9rem; } .footer-title { margin-bottom: 16px; color: var(--color-text); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .footer-menu, .footer-links, .social-links { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 9px; list-style: none; } .footer-menu a, .footer-links a { color: var(--color-text-muted); font-size: 0.88rem; text-decoration: none; } .footer-menu a:hover, .footer-links a:hover { color: var(--color-brand); } .social-links { margin-top: 20px; flex-direction: row; flex-wrap: wrap; } .social-links a { display: grid; width: 42px; height: 42px; place-items: center; color: var(--color-text-soft); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--color-line-soft); border-radius: 10px; text-decoration: none; transition: transform 180ms var(--ease-out), color 180ms ease, border-color 180ms ease; } .social-links a:hover { color: var(--color-brand); border-color: rgba(116, 213, 199, 0.38); transform: translateY(-2px); } .social-links svg { width: 18px; height: 18px; } .footer-bottom { display: flex; padding-top: 24px; align-items: center; justify-content: space-between; gap: 20px; color: var(--color-text-muted); border-top: 1px solid var(--color-line-soft); font-family: var(--font-mono); font-size: 0.68rem; } .back-to-top { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; color: var(--color-text-muted); text-decoration: none; } .back-to-top:hover { color: var(--color-brand); } .whatsapp-float-wrap { position: fixed; z-index: 900; right: 22px; bottom: 22px; width: 54px; height: 54px; } .whatsapp-float { display: grid; width: 54px; height: 54px; place-items: center; color: #062722; background: #55e6bd; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; box-shadow: 0 12px 34px rgba(32, 191, 142, 0.3); text-decoration: none; transition: transform 180ms var(--ease-out), box-shadow 180ms ease; } .whatsapp-float:hover { color: #062722; box-shadow: 0 16px 42px rgba(32, 191, 142, 0.42); transform: translateY(-3px) scale(1.02); } .whatsapp-float svg { width: 25px; height: 25px; } /* WordPress helpers */ .sticky { border-color: rgba(116, 213, 199, 0.38); } .bypostauthor { border-left: 2px solid var(--color-brand); } .alignleft { float: left; margin: 0 1.5em 1em 0; } .alignright { float: right; margin: 0 0 1em 1.5em; } .aligncenter { display: block; margin-right: auto; margin-left: auto; } .wp-block-image img, .entry-content img { border-radius: var(--radius-sm); } .wp-block-separator { margin-block: 2.5em; border-color: var(--color-line-soft); } .wp-block-button__link { border-radius: 12px; } /* Motion reveal: content remains visible until JS opts in. */ .has-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); } .has-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1080px) { :root { --gutter: clamp(20px, 4vw, 48px); } .hero__inner { gap: 36px; grid-template-columns: minmax(0, 6fr) minmax(280px, 4fr); } .services-grid, .projects-grid, .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-card--featured { grid-column: auto; } .project-card--featured .project-card__media { aspect-ratio: 16 / 10; } .article-layout { width: min(960px, calc(100% - (2 * var(--gutter)))); grid-template-columns: minmax(0, 1fr); } .article-layout .sidebar { position: static; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-layout .sidebar .widget { margin-bottom: 0; } } @media (max-width: 920px) { :root { --header-height: 72px; --hero-peek: 64px; } .brand__role, .site-description, .header-cta { display: none; } .nav-toggle { z-index: 1002; display: block; } .primary-nav { position: fixed; z-index: 1001; top: 0; right: 0; bottom: 0; display: flex; width: min(88vw, 390px); padding: calc(var(--header-height) + 36px) 30px 34px; align-items: stretch; flex-direction: column; justify-content: flex-start; background: rgba(7, 22, 36, 0.98); border-left: 1px solid var(--color-line-soft); box-shadow: -28px 0 70px rgba(0, 0, 0, 0.34); visibility: hidden; opacity: 0; transform: translateX(100%); transition: transform 260ms var(--ease-out), opacity 200ms ease, visibility 0s linear 260ms; } .primary-nav.is-open, .primary-nav[aria-hidden="false"] { visibility: visible; opacity: 1; transform: translateX(0); transition-delay: 0s; } .primary-nav ul, .primary-menu, .site-header .menu { width: 100%; align-items: stretch; flex-direction: column; gap: 4px; } .primary-nav li, .primary-nav a, .site-header .menu a { width: 100%; } .primary-nav a, .site-header .menu a { min-height: 54px; padding-inline: 12px; font-size: 1rem; border-bottom: 1px solid rgba(142, 190, 207, 0.08); } .primary-nav a::after, .site-header .menu a::after { display: none; } .hero { padding-block: 54px 96px; } .hero__inner { grid-template-columns: minmax(0, 1fr); } .hero__content { max-width: 760px; } .hero__title { max-width: 14ch; } .hero__media { position: absolute; right: -7%; bottom: 3%; width: min(43vw, 390px); opacity: 0.26; } .hero__image, .hero__media img { width: 100%; max-height: 45vh; } .about-layout, .contact-panel, .newsletter-panel, .content-grid, .archive-layout { grid-template-columns: minmax(0, 1fr); } .contact-panel__form, .newsletter-panel__form { max-width: 680px; } .archive-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media (max-width: 680px) { :root { --gutter: 20px; --header-height: 68px; --hero-peek: 56px; --section-space: clamp(64px, 16vw, 84px); } .brand__text, .site-title { display: none; } .custom-logo, .brand__image, .site-logo { width: 42px; height: 42px; } .hero-stage { min-height: calc(100svh - var(--hero-peek)); } .hero { padding-block: 38px 92px; } .hero__title { margin-bottom: 21px; font-size: clamp(2.55rem, 12vw, 3.8rem); line-height: 1.01; } .hero__description, .hero__lead { margin-bottom: 24px; font-size: 1rem; } .hero__media { right: -24%; bottom: 1%; width: 74vw; opacity: 0.16; } .hero__actions { align-items: stretch; flex-direction: column; } .hero__actions .button { width: 100%; } .scroll-cue { right: 20px; bottom: 16px; left: auto; transform: none; } .section-heading { align-items: flex-start; flex-direction: column; gap: 20px; } .proof-grid, .about-proof, .stats-grid, .services-grid, .projects-grid, .posts-grid, .archive-posts, .article-layout .sidebar, .footer-grid { grid-template-columns: minmax(0, 1fr); } .service-card { min-height: 0; } .project-card__body, .post-card__body { padding: 21px; } .contact-panel { padding: 25px; border-radius: var(--radius-md); } .contact-panel__form, .form-card { padding: 18px; } .newsletter-panel { padding: 25px; border-radius: var(--radius-md); } .page-hero, .archive-hero, .search-hero, .entry-hero { padding-block: calc(var(--header-height) + 52px) 62px; } .post-navigation .nav-links { grid-template-columns: minmax(0, 1fr); } .comment-list .children { margin-left: 12px; padding-left: 0; } .footer-bottom { align-items: flex-start; flex-direction: column; } .whatsapp-float-wrap { right: 16px; bottom: 16px; } .whatsapp-float { width: 50px; height: 50px; } } @media (max-height: 650px) and (min-width: 681px) { .hero-stage { min-height: 720px; } .hero { padding-block: 36px 90px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .has-reveal [data-reveal] { opacity: 1; transform: none; } } @media print { :root { --color-bg: #fff; --color-text: #111; --color-text-soft: #333; } body { color: #111; background: #fff; } .site-header, .site-footer, .newsletter-section, .sidebar, .post-navigation, .comments-area { display: none !important; } .article-layout { display: block; width: 100%; padding: 0; } a { color: #111; } } /* Classic template integration */ .site-shell { width: min(var(--container), calc(100% - (2 * var(--gutter)))); margin-inline: auto; } .site-header__inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: clamp(18px, 2.4vw, 32px); } .site-header__inner .site-branding { flex: 0 1 auto; min-width: 0; } .site-branding__text { display: grid; min-width: 0; color: var(--color-text); line-height: 1.05; text-decoration: none; } .site-branding__text:hover { color: var(--color-text); } .site-branding__name { font-size: 0.92rem; font-weight: 780; } .site-branding__tagline { min-width: 0; margin-top: 4px; overflow: hidden; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.59rem; letter-spacing: 0.045em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .site-branding__tagline--short { display: none; } .primary-navigation { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); } .primary-navigation a { position: relative; display: inline-flex; min-height: 44px; align-items: center; color: var(--color-text-soft); font-size: 0.84rem; font-weight: 620; text-decoration: none; transition: color 180ms ease; } .primary-navigation a::after { position: absolute; right: 0; bottom: 7px; left: 0; height: 1px; content: ""; background: var(--color-brand); transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease-out); } .primary-navigation a:hover, .primary-navigation .current-menu-item > a { color: var(--color-text); } .primary-navigation a:hover::after, .primary-navigation .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; } .site-header__contact { display: inline-flex; min-width: max-content; min-height: 40px; padding: 9px 14px; align-items: center; gap: 9px; color: var(--color-text-soft); background: rgba(116, 213, 199, 0.06); border: 1px solid rgba(116, 213, 199, 0.22); border-radius: 999px; font-family: var(--font-mono); font-size: 0.66rem; text-decoration: none; } .site-header__contact:hover { color: var(--color-brand); border-color: rgba(116, 213, 199, 0.48); } .site-header__status, .hero__availability-dot { width: 8px; height: 8px; flex: 0 0 auto; background: var(--color-success); border-radius: 50%; box-shadow: 0 0 0 5px rgba(123, 224, 161, 0.11); } .menu-toggle { position: relative; display: none; width: 46px; height: 46px; padding: 0; color: var(--color-text); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--color-line-soft); border-radius: 12px; } .menu-toggle__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .menu-toggle__icon, .menu-toggle__icon span { position: absolute; pointer-events: none; } .menu-toggle__icon { inset: 0; } .menu-toggle__icon span { left: 50%; width: 20px; height: 2px; background: currentColor; border-radius: 999px; transform: translateX(-50%); transition: top 200ms ease, transform 200ms ease, opacity 160ms ease; } .menu-toggle__icon span:nth-child(1) { top: 15px; } .menu-toggle__icon span:nth-child(2) { top: 22px; } .menu-toggle__icon span:nth-child(3) { top: 29px; } .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) { top: 22px; transform: translateX(-50%) rotate(-45deg); } .menu-drawer-close { display: none; } .header-search { position: relative; flex: 0 0 auto; } .header-search__toggle { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--color-text); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--color-line-soft); border-radius: 12px; } .header-search__toggle:hover, .header-search__toggle[aria-expanded="true"] { color: var(--color-brand-strong); border-color: var(--color-brand); } .header-search__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: flex; width: 400px; align-items: center; gap: 8px; padding: 12px; background: var(--color-bg-alt); border: 1px solid var(--color-line-soft); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .header-search__panel[hidden] { display: none; } .header-search__panel .search-form { flex: 1; } .header-search__close { display: none; width: 34px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--color-text-soft); background: transparent; border: none; } @media (max-width: 920px) { .header-search__panel { position: fixed; top: var(--header-height); right: 0; left: 0; z-index: 1002; width: auto; padding: 14px var(--gutter); border-radius: 0; border-width: 0 0 1px; } .header-search__close { display: flex; } .header-search__panel .search-form__submit span:not([aria-hidden]) { display: none; } .header-search__panel .search-form__submit { min-width: 44px; padding: 10px; } } /* * WordPress inserts its native Customizer shortcut just outside the left edge * of a partial by default. The preview iframe clips that area behind the * Customizer panel, so keep the native shortcut inside each theme section. */ .hero-stage > .customize-partial-edit-shortcut, .section > .customize-partial-edit-shortcut { z-index: 10; } .hero-stage > .customize-partial-edit-shortcut button, .section > .customize-partial-edit-shortcut button { left: 22px !important; } .hero-stage > .customize-partial-edit-shortcut button { top: calc(var(--header-height) + 16px) !important; } .section > .customize-partial-edit-shortcut button { top: 18px !important; } /* Native WordPress menu partials are attached to their rendered