/* ============================================================ WORDPRESS USAGE NOTES - This file is a self-contained prototype - For WordPress: copy CSS into your theme's style.css or a Custom CSS block. Copy each section's HTML into individual page blocks or a full-width page template. - Fonts are loaded via Google Fonts link above - add to your theme's via functions.php or a plugin. - The nav and footer should be adapted to your WP theme. - No JavaScript dependencies beyond vanilla JS below. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --night: #0d0d14; --deep: #12121e; --panel: #1a1a2e; --mid: #2a2a42; --border: #2e2e48; --muted: #6b6b88; --silver: #a8a8c0; --offwhite: #e8e8f0; --white: #f5f5fa; --gold: #c9a96e; --gold-light: #e0c48a; --people: #E68A00; --media: #8f949c; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; --max: 1200px; --pad: clamp(1.5rem, 5vw, 4rem); } html { scroll-behavior: smooth; } body { background: var(--night); color: var(--offwhite); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* ── NAVIGATION ───────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.25rem var(--pad); display: flex; align-items: center; justify-content: space-between; background: rgba(13,13,20,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.3s; flex-wrap: wrap; gap: 1rem; } .nav-logo { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.04em; color: var(--white); text-decoration: none; } .nav-logo span { color: var(--gold); } .nav-links { display: flex; gap: 2.5rem; list-style: none; } .nav-links a { color: var(--silver); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover { color: var(--white); } .nav-cta { background: transparent; border: 1px solid var(--gold); color: var(--gold); font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 1.4rem; cursor: pointer; text-decoration: none; transition: background 0.2s, color 0.2s; } .nav-cta:hover { background: var(--gold); color: var(--night); } .nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid rgba(201, 169, 110, 0.35); background: transparent; color: var(--white); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .nav-toggle:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.02); } .nav-toggle-line { display: block; width: 1.2rem; height: 1px; background: currentColor; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-toggle-line + .nav-toggle-line { margin-top: 0.28rem; } .nav-mobile-panel { display: none; } .nav-mobile-panel[hidden] { display: none !important; } /* ── HERO ─────────────────────────────────────────────────── */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 8rem var(--pad) 6rem; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 60% 50%, rgba(26,26,46,0.9) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 20% 80%, rgba(201,169,110,0.06) 0%, transparent 60%), linear-gradient(135deg, #0d0d14 0%, #12121e 50%, #0f0f1a 100%); z-index: 0; } /* Geometric accent lines */ .hero-lines { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-lines::before { content: ''; position: absolute; top: -10%; right: -5%; width: 55%; height: 120%; border-left: 1px solid rgba(201,169,110,0.08); border-bottom: 1px solid rgba(201,169,110,0.05); transform: skewX(-8deg); } .hero-lines::after { content: ''; position: absolute; top: 20%; right: 8%; width: 35%; height: 60%; border: 1px solid rgba(201,169,110,0.04); transform: skewX(-8deg); } .hero-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; width: 100%; } .hero-label { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; } .hero-label::before { content: ''; display: block; width: 40px; height: 1px; background: var(--gold); } .hero h1 { font-family: var(--serif); font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; color: var(--white); max-width: 820px; margin-bottom: 1.8rem; } .hero h1 em { font-style: italic; color: var(--gold-light); } .hero-sub { font-size: 1.1rem; color: var(--silver); max-width: 520px; margin-bottom: 3.5rem; line-height: 1.65; font-weight: 300; } .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 2rem; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; transition: all 0.25s; } .btn-primary { background: var(--people); color: #fff; } .btn-primary:hover { background: #cc7b00; transform: translateY(-2px); } .btn-secondary { background: transparent; border: 1px solid var(--media); color: var(--media); } .btn-secondary:hover { background: var(--media); color: var(--night); transform: translateY(-2px); } .btn-arrow { font-size: 1rem; transition: transform 0.2s; } .btn:hover .btn-arrow { transform: translateX(4px); } /* ── SECTION SCAFFOLDING ──────────────────────────────────── */ section { padding: clamp(5rem, 10vw, 9rem) var(--pad); } .section-inner { max-width: var(--max); margin: 0 auto; } .section-label { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 1rem; } .section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); } .section-h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.15; color: var(--white); margin-bottom: 1rem; } .section-h2 em { font-style: italic; color: var(--gold-light); } .section-intro { font-size: 1.05rem; color: var(--silver); max-width: 580px; line-height: 1.75; font-weight: 300; margin-bottom: 4rem; } /* ── PRINCIPLES ───────────────────────────────────────────── */ .principles { background: var(--deep); } .principles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; } .principle { padding: 2.8rem 2.5rem; border-top: 1px solid var(--border); border-right: 1px solid var(--border); position: relative; transition: background 0.3s; } .principle:nth-child(4n) { border-right: none; } .principle:hover { background: rgba(201,169,110,0.03); } .principle-num { font-family: var(--serif); font-size: 3rem; font-weight: 300; color: rgba(201,169,110,0.15); line-height: 1; margin-bottom: 1.2rem; } .principle h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--offwhite); margin-bottom: 0.8rem; } .principle p { font-size: 0.9rem; color: var(--muted); line-height: 1.75; font-weight: 300; } /* ── COMPANIES ────────────────────────────────────────────── */ .companies { background: var(--night); } .companies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 1rem; } .company-card { background: var(--panel); padding: 3.5rem; position: relative; overflow: hidden; transition: transform 0.3s; } .company-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .company-card.people::before { background: var(--people); } .company-card.media::before { background: var(--media); } .company-card:hover { transform: translateY(-4px); } .company-tag { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem; font-weight: 500; } .company-card.people .company-tag { color: var(--people); } .company-card.media .company-tag { color: var(--media); } .company-card h3 { font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--white); margin-bottom: 0.4rem; line-height: 1.1; } .company-subtitle { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2rem; } .company-card p { font-size: 0.95rem; color: var(--silver); line-height: 1.8; font-weight: 300; margin-bottom: 2rem; } .company-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; } .tag { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border: 1px solid var(--border); color: var(--muted); } .company-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; font-weight: 500; transition: gap 0.2s; } .company-card.people .company-link { color: var(--people); } .company-card.media .company-link { color: var(--media); } .company-link:hover { gap: 0.9rem; } /* ── WHO WE WORK WITH ─────────────────────────────────────── */ .clients { background: var(--deep); } .clients-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-bottom: 4rem; } .client-types { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .client-type { background: var(--panel); padding: 2rem 2.2rem; border-left: 2px solid transparent; transition: border-color 0.25s, background 0.25s; } .client-type:hover { border-left-color: var(--gold); background: rgba(201,169,110,0.04); } .client-type h4 { font-size: 0.9rem; font-weight: 600; color: var(--offwhite); margin-bottom: 0.5rem; letter-spacing: 0.02em; } .client-type p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; font-weight: 300; } /* ── CREDENTIALS ──────────────────────────────────────────── */ .credentials { background: var(--night); } .stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--border); margin-top: 1rem; } .stat { padding: 3rem 2rem; border-right: 1px solid var(--border); text-align: center; } .stat:last-child { border-right: none; } .stat-value { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; color: var(--gold-light); line-height: 1; margin-bottom: 0.6rem; display: block; } .stat-label { font-size: 0.75rem; color: var(--muted); line-height: 1.5; text-transform: uppercase; letter-spacing: 0.08em; } /* ── LEADERSHIP ───────────────────────────────────────────── */ .leadership { background: var(--deep); } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 1rem; } .team-card { background: var(--panel); padding: 3rem; position: relative; overflow: hidden; } .team-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: linear-gradient(to top, rgba(201,169,110,0.05), transparent); transition: height 0.4s; } .team-card:hover::after { height: 100%; } .team-initial { width: 56px; height: 56px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--gold); margin-bottom: 2rem; } .team-card h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; color: var(--white); margin-bottom: 0.3rem; } .team-role { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .team-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.8; font-weight: 300; } /* ── CONTACT ──────────────────────────────────────────────── */ .contact { background: var(--panel); } .contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6rem; align-items: start; } .contact-info h2 { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 400; color: var(--white); margin-bottom: 1.2rem; line-height: 1.2; } .contact-info p { font-size: 0.95rem; color: var(--silver); line-height: 1.8; font-weight: 300; margin-bottom: 2.5rem; } .contact-detail { display: flex; flex-direction: column; gap: 0.6rem; } .contact-detail span { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; } .contact-detail a { color: var(--silver); text-decoration: none; } .contact-detail a:hover { color: var(--gold); } /* Form */ .contact-form { display: flex; flex-direction: column; gap: 1.2rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .form-group input, .form-group select, .form-group textarea { background: var(--mid); border: 1px solid var(--border); border-radius: 0; color: var(--offwhite); font-family: var(--sans); font-size: 0.9rem; padding: 0.85rem 1rem; outline: none; transition: border-color 0.2s; appearance: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b88' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer; } .form-group textarea { resize: vertical; min-height: 120px; } .form-submit { background: var(--gold); color: var(--night); border: none; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 1rem 2.5rem; cursor: pointer; align-self: flex-start; transition: background 0.2s, transform 0.2s; } .form-submit:hover { background: var(--gold-light); transform: translateY(-2px); } /* ── FOOTER ───────────────────────────────────────────────── */ footer { background: var(--night); border-top: 1px solid var(--border); padding: 3rem var(--pad); } .footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 3rem; } .footer-brand { font-family: var(--serif); font-size: 1.1rem; color: var(--silver); } .footer-brand span { color: var(--gold); } .footer-tagline { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; font-style: italic; } .footer-links { display: flex; gap: 2rem; list-style: none; } .footer-links a { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--gold); } .footer-legal { font-size: 0.75rem; color: var(--muted); text-align: right; } /* ── SCROLL ANIMATIONS ────────────────────────────────────── */ .fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up:nth-child(1) { transition-delay: 0.05s; } .fade-up:nth-child(2) { transition-delay: 0.15s; } .fade-up:nth-child(3) { transition-delay: 0.25s; } .fade-up:nth-child(4) { transition-delay: 0.35s; } .fade-up:nth-child(5) { transition-delay: 0.45s; } /* ── RESPONSIVE ───────────────────────────────────────────── */ @media (max-width: 900px) { body.mobile-nav-open { overflow: hidden; } .nav { align-items: center; } .nav-links, .nav-cta { display: none; } .nav-toggle { display: inline-flex; } .nav-mobile-panel { display: block; width: 100%; margin-top: 0.25rem; padding: 1.4rem 1.2rem 1.2rem; background: rgba(18, 18, 30, 0.98); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transform: translateY(-0.65rem); pointer-events: none; transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease; } .nav.nav-open .nav-mobile-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav.nav-open .nav-toggle-line:nth-child(1) { transform: translateY(0.38rem) rotate(45deg); } .nav.nav-open .nav-toggle-line:nth-child(2) { opacity: 0; } .nav.nav-open .nav-toggle-line:nth-child(3) { transform: translateY(-0.38rem) rotate(-45deg); } .nav-mobile-links { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .nav-mobile-links a, .nav-mobile-cta { display: block; text-decoration: none; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; } .nav-mobile-links a { color: var(--offwhite); padding: 0.9rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .nav-mobile-cta { margin-top: 1rem; padding: 0.95rem 1.1rem; text-align: center; border: 1px solid var(--gold); color: var(--gold); } .companies-grid, .team-grid, .contact-grid, .clients-header { grid-template-columns: 1fr; gap: 2rem; } .stats-row { grid-template-columns: 1fr; } .stats-row .stat { border-right: none; border-bottom: 1px solid var(--border); } .stats-row .stat:last-child { border-bottom: none; } .client-types { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .footer-legal { text-align: left; } } .nav-logo-link { text-decoration: none; display: inline-flex; align-items: center; } .nav-logo-img, .nav-logo-link .custom-logo { display: block; width: auto; max-height: 52px; } .footer-logo-img, .footer-inner .custom-logo { display: block; width: auto; max-height: 44px; margin-bottom: 0.35rem; } .contact-form-shell { width: 100%; } .contact .wpforms-container, .contact .wpforms-container-full { margin: 0; } .contact .wpforms-form { display: flex; flex-direction: column; gap: 1.2rem; } .contact .wpforms-field-container { display: flex; flex-direction: column; gap: 1.2rem; } .contact .wpforms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .contact .wpforms-field, .contact .wpforms-field-row-block { padding: 0; margin: 0; } .contact .wpforms-field label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } .contact .wpforms-field input, .contact .wpforms-field select, .contact .wpforms-field textarea { background: var(--mid); border: 1px solid var(--border); border-radius: 0; color: var(--offwhite); font-family: var(--sans); font-size: 0.9rem; padding: 0.85rem 1rem; outline: none; transition: border-color 0.2s; } .contact .wpforms-field input:focus, .contact .wpforms-field select:focus, .contact .wpforms-field textarea:focus { border-color: var(--gold); } .contact .wpforms-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b88' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer; appearance: none; } .contact .wpforms-field textarea { min-height: 120px; resize: vertical; } .contact .wpforms-submit-container { padding: 0; margin: 0; } .contact .wpforms-submit { background: var(--gold); color: var(--night); border: none; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 1rem 2.5rem; cursor: pointer; align-self: flex-start; transition: background 0.2s, transform 0.2s; } .contact .wpforms-submit:hover { background: var(--gold-light); transform: translateY(-2px); } .contact .wpforms-error, .contact .wpforms-field-description, .contact .wpforms-confirmation-container-full { color: var(--silver); } .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border: 1px solid rgba(201, 169, 110, 0.35); background: rgba(18, 18, 30, 0.92); color: var(--offwhite); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; cursor: pointer; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, border-color 0.25s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { border-color: var(--gold); } .back-to-top-arrow { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border: 1px solid var(--border); color: var(--gold); font-size: 0.9rem; line-height: 1; } @media (max-width: 900px) { .contact .wpforms-field-row { grid-template-columns: 1fr; } } @media (max-width: 640px) { .back-to-top { right: 1rem; bottom: 1rem; padding: 0.75rem 0.9rem; gap: 0.55rem; } .back-to-top-label { display: none; } } /* ── WPFORMS #18 MATCHING ────────────────────────────────── */ .contact #wpforms-18 { width: 100%; } .contact #wpforms-18 .wpforms-field-container { gap: 1.3rem; } .contact #wpforms-18 .wpforms-field-row { gap: 1.2rem; align-items: end; } .contact #wpforms-18 .wpforms-field { margin: 0; } .contact #wpforms-18 .wpforms-field-label { display: inline-block; margin-bottom: 0.55rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; } .contact #wpforms-18 input, .contact #wpforms-18 select, .contact #wpforms-18 textarea { width: 100%; background: #30304b; border: 1px solid rgba(255, 255, 255, 0.04); color: var(--offwhite); box-shadow: none; } .contact #wpforms-18 input, .contact #wpforms-18 select { min-height: 48px; } .contact #wpforms-18 textarea { min-height: 122px; } .contact #wpforms-18 input::placeholder, .contact #wpforms-18 textarea::placeholder { color: #8f8fa8; opacity: 1; } .contact #wpforms-18 .wpforms-submit-container { padding-top: 0.4rem; } .contact #wpforms-18 .wpforms-submit { min-width: 202px; justify-content: center; text-align: center; padding: 1rem 2rem; background: #c9a96e; color: #0d0d14; border: none; } .contact #wpforms-18 .wpforms-submit:hover { background: #e0c48a; } .contact #wpforms-18 .wpforms-error { color: #f2b3b3; font-size: 0.78rem; margin-top: 0.4rem; } .contact #wpforms-18 .wpforms-confirmation-container-full { background: transparent; border: 1px solid var(--border); padding: 1rem 1.2rem; } @media (max-width: 640px) { .contact #wpforms-18 .wpforms-submit { width: 100%; min-width: 0; } } /* ── WPFORMS #18 EXACT LAYOUT OVERRIDE ───────────────────── */ .contact #wpforms-form-18 { display: flex; flex-direction: column; gap: 0; } .contact #wpforms-18 .wpforms-field-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.15rem 1.2rem; } .contact #wpforms-18 .wpforms-field-container > .wpforms-field { width: 100%; max-width: none; margin: 0; padding: 0; } .contact #wpforms-18 .wpforms-field-container > .wpforms-field:nth-child(1), .contact #wpforms-18 .wpforms-field-container > .wpforms-field:nth-child(2) { grid-column: span 1; } .contact #wpforms-18 .wpforms-field-container > .wpforms-field:nth-child(3), .contact #wpforms-18 .wpforms-field-container > .wpforms-field:nth-child(4), .contact #wpforms-18 .wpforms-field-container > .wpforms-field:nth-child(5), .contact #wpforms-18 .wpforms-field-container > .wpforms-field:nth-child(6), .contact #wpforms-18 .wpforms-field-container > .wpforms-field:nth-child(n+3):not(.wpforms-field-hp) { grid-column: 1 / -1; } .contact #wpforms-18 .wpforms-field-row, .contact #wpforms-18 .wpforms-field-row-block { display: contents; } .contact #wpforms-18 .wpforms-field-label { margin-bottom: 0.62rem; letter-spacing: 0.18em; font-size: 0.69rem; line-height: 1; } .contact #wpforms-18 input, .contact #wpforms-18 select, .contact #wpforms-18 textarea { border-radius: 0; background: #31314b; border: 0; height: auto; padding: 1.02rem 1rem; font-size: 0.92rem; line-height: 1.2; } .contact #wpforms-18 input, .contact #wpforms-18 select { min-height: 46px; } .contact #wpforms-18 textarea { min-height: 118px; padding-top: 0.95rem; } .contact #wpforms-18 .wpforms-submit-container { margin-top: 1.25rem; padding: 0; } .contact #wpforms-18 .wpforms-submit { display: inline-flex; align-items: center; justify-content: center; min-width: 202px; height: 50px; padding: 0 2rem; font-size: 0.8rem; letter-spacing: 0.18em; font-weight: 600; } @media (max-width: 900px) { .contact #wpforms-18 .wpforms-field-container { grid-template-columns: 1fr; } .contact #wpforms-18 .wpforms-field-container > .wpforms-field { grid-column: 1 / -1; } } /* ── WPFORMS #18 FIELD-ID LAYOUT FIX ─────────────────────── */ .contact #wpforms-18-field_1-container, .contact #wpforms-18-field_2-container { grid-column: span 1 !important; } .contact #wpforms-18-field_3-container, .contact #wpforms-18-field_4-container, .contact #wpforms-18-field_5-container { grid-column: 1 / -1 !important; } .contact #wpforms-18-field_6-container, .contact #wpforms-18-field_7-container, .contact #wpforms-18 .wpforms-field-hp { display: none !important; } /* ── WPFORMS #18 FINAL FIELD-ID FIX ──────────────────────── */ .contact #wpforms-18-field_1-container, .contact #wpforms-18-field_2-container { grid-column: span 1 !important; } .contact #wpforms-18-field_3-container, .contact #wpforms-18-field_4-container, .contact #wpforms-18-field_5-container { grid-column: 1 / -1 !important; } .contact #wpforms-18-field_6-container, .contact #wpforms-18-field_7-container, .contact #wpforms-18 .wpforms-field-hp { display: none !important; }