/* style.css — non-critical styles */ /* Reset, variables, header, nav, burger, mobile-menu, hero sunt in critical CSS inline in */ @font-face { font-family: "Inter"; src: url("../fonts/inter-v20-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } img { display: block; width: 100%; height: auto; } /* ─── WORK ────────────────────────────────────────────── */ .section-block { padding-bottom: 0; } .section-shell { border-top: var(--section-border); padding-top: var(--section-gap); padding-bottom: var(--section-gap); } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; gap: 20px; } .section-meta { font-size: 14px; color: rgba(0, 0, 0, 0.55); } .work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .project-card { display: block; min-width: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; } .project-image { background: #f2f2f2; } .flip-card-media { aspect-ratio: 1 / 1; perspective: 1200px; overflow: visible; } .flip-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s ease; } .flip-card-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #f2f2f2; } .flip-card-front { z-index: 2; } .flip-card-back { transform: rotateY(180deg); } .flip-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .flip-card-media img[src$=".svg"] { object-fit: cover; padding: 0; } @media (hover: hover) and (pointer: fine) { .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .project-card:hover .flip-card-media img { transform: scale(1.02); } } @media (hover: none) and (pointer: coarse) { .flip-card:hover .flip-card-inner { transform: none; } .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); } .project-card:hover .flip-card-media img { transform: none; } } .has-shadow { filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.18)); } .project-info { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0 6px; min-width: 0; } .project-title { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; } .project-category, .project-number, .muted, .form-note, .form-success, .form-error, .footer-copy, .footer-copy a { font-size: 14px; color: rgba(0, 0, 0, 0.6); } .project-number { color: rgba(0, 0, 0, 0.55); padding-top: 4px; white-space: nowrap; flex-shrink: 0; } /* ─── ABOUT / CONTACT ─────────────────────────────────── */ .about, .contact, .contact-form-section { padding: 0; } .about-grid, .contact-grid, .contact-form-grid { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: 10px; min-width: 0; } .about-content { display: flex; flex-direction: column; gap: 0; width: 100%; min-width: 0; } .about-intro { padding-bottom: 16px; display: flex; flex-direction: column; gap: 10px; } .about-title { font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: #000; } .about-body { font-size: 16px; line-height: 1.75; color: var(--text-muted); } .about-services { display: flex; flex-direction: column; width: 100%; min-width: 0; } .about-service-row { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "name detail note"; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, 0.08); gap: 16px; max-width: 98%; } .about-service-last { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .about-service-name { grid-area: name; font-size: 15px; font-weight: 500; color: #000; } .about-service-detail { grid-area: detail; font-size: 13px; color: rgba(0, 0, 0, 0.55); } .about-service-note { grid-area: note; font-size: 13px; color: rgba(0, 0, 0, 0.45); font-style: italic; text-align: right; } .about-sub-row { padding-top: 14px; } .about-sub { font-size: 13px; color: rgba(0, 0, 0, 0.55); font-style: normal; margin-top: 9px; letter-spacing: 0.02em; } .contact-content { display: flex; flex-direction: column; width: 100%; min-width: 0; } .contact-title { max-width: 760px; font-size: clamp(42px, 6vw, 92px); line-height: 0.96; letter-spacing: -0.05em; font-weight: 600; } .contact-body { font-size: 18px; line-height: 1.75; color: var(--text-muted); margin-top: 12px; } .contact-sub { font-size: 13px; color: rgba(0, 0, 0, 0.55); margin-top: 14px; letter-spacing: 0.02em; } /* ─── FORM ────────────────────────────────────────────── */ .form-wrap { max-width: 760px; width: 100%; min-width: 0; } .form-intro { max-width: 560px; font-size: 18px; line-height: 1.7; color: var(--text-muted); margin-bottom: 44px; overflow-wrap: anywhere; word-break: break-word; } .form-intro a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.18); transition: border-color 0.2s ease; overflow-wrap: anywhere; word-break: break-word; } .form-intro a:hover { border-color: rgba(0, 0, 0, 0.4); } .contact-form { display: flex; flex-direction: column; gap: 22px; width: 100%; min-width: 0; position: relative; } .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; min-width: 0; } .field { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .field label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); } .field input, .field textarea { width: 100%; max-width: 100%; border: 1px solid var(--border-light); background: transparent; padding: 16px 18px; font-size: 15px; color: #000; outline: none; transition: border-color 0.2s ease, background 0.2s ease; border-radius: 0; appearance: none; -webkit-appearance: none; min-width: 0; } .field textarea { min-height: 180px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.012); } .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 10px; flex-wrap: wrap; width: 100%; min-width: 0; } .form-note { max-width: 420px; line-height: 1.6; overflow-wrap: anywhere; } .form-note.is-success { color: #2d7a3a; } .hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ─── FOOTER ──────────────────────────────────────────── */ .site-footer { padding: 0; } .footer-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } .footer-left { justify-self: start; } .footer-center { justify-self: center; text-align: center; } .footer-right { justify-self: end; text-align: right; } .footer-copy, .footer-copy a { font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, 0.55); } .footer-link { transition: opacity 0.2s ease; } .footer-link:hover { opacity: 0.6; } /* ─── RESPONSIVE — below the fold only ───────────────── */ @media (max-width: 980px) { .about-grid, .contact-grid, .contact-form-grid, .footer-grid { grid-template-columns: 1fr; } .footer-grid { gap: 12px; } .footer-left, .footer-center, .footer-right { justify-self: center; text-align: center; } .form-wrap { max-width: 100%; } } @media (max-width: 760px) { .hero-content { padding-bottom: 24px; padding-top: 8%; } .form-intro { font-size: 16px; } .form-row { grid-template-columns: 1fr; } .work-grid { grid-template-columns: 1fr; } .project-title { font-size: 22px; } .section-head { margin-bottom: 28px; } .contact-title { font-size: clamp(34px, 10vw, 56px); } .contact-body { font-size: 16px; } .contact-sub { font-size: 13px; } .field input, .field textarea { padding: 15px 16px; } .form-actions { align-items: flex-start; } .form-note { max-width: 100%; } .footer-grid { gap: 18px; } .footer-copy, .footer-copy a { font-size: 13px; } .about-service-row { grid-template-columns: 1fr 1fr; grid-template-areas: "name detail"; max-width: 100%; } .about-service-last { max-width: 100%; } .about-service-note { display: none; } .about-service-detail { text-align: right; } }