/* ========================================================================== Quierounsitio — Main Website "Tu web, como debe ser." ========================================================================== */ /* Las tipografías (Montserrat / Poppins) se cargan desde el de index.html con preconnect + , que es más rápido que @import. */ :root { /* Brand palette (from Brandbook) */ --green: #74C043; --green-deep: #5A9633; --green-soft: #EAF4E1; --navy: #12202E; --navy-2: #1B2F42; --navy-3: #24384C; --gray: #BEC4D2; --white: #FFFFFF; --ink: #0D0D0D; --paper: #FAFAF8; --paper-2: #F2F1EC; /* Type */ --display: 'Montserrat', sans-serif; --body: 'Poppins', sans-serif; /* Rhythm */ --section-pad: clamp(4.5rem, 9vw, 9rem); --edge: clamp(1.5rem, 5vw, 5rem); --radius: 14px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--body); color: var(--navy); background: var(--paper); -webkit-font-smoothing: antialiased; font-weight: 400; line-height: 1.6; } h1, h2, h3, h4 { font-family: var(--display); color: var(--navy); margin: 0; line-height: 1.12; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--green); color: var(--white); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } .container { max-width: 1180px; margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-deep); } .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--green); display: inline-block; } .eyebrow.on-dark { color: var(--green); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.05rem 2.1rem; border-radius: 999px; font-family: var(--body); font-weight: 600; font-size: 1rem; border: none; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.3s ease; white-space: nowrap; } .btn-primary { background: var(--green); color: var(--navy); box-shadow: 0 1px 2px rgba(18,32,46,0.08), 0 10px 30px -12px rgba(116,192,67,0.55); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(18,32,46,0.08), 0 16px 36px -12px rgba(116,192,67,0.7); } .btn-primary:active { transform: translateY(0); } .link-quiet { position: relative; font-weight: 500; font-size: 0.98rem; padding-bottom: 2px; border-bottom: 1px solid rgba(18,32,46,0.25); transition: border-color 0.3s ease, opacity 0.3s ease; } .link-quiet:hover { border-color: var(--navy); } .link-quiet.on-dark { border-color: rgba(255,255,255,0.35); color: var(--white); } .link-quiet.on-dark:hover { border-color: var(--white); } /* ========================================================================== Nav ========================================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.35rem 0; transition: padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); } .nav.is-scrolled { padding: 0.85rem 0; background: rgba(250, 250, 248, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(18,32,46,0.06); } .nav .container { display: flex; align-items: center; justify-content: space-between; } .nav-logo img { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 0.94rem; font-weight: 500; color: var(--navy); opacity: 0.75; transition: opacity 0.25s ease; } .nav-links a:hover { opacity: 1; } .nav-cta { font-size: 0.9rem !important; font-weight: 600 !important; opacity: 1 !important; } .nav-toggle { display: none; background: none; border: none; width: 40px; height: 40px; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--navy); transition: transform 0.3s ease, opacity 0.3s ease; } .nav-toggle span { top: 19px; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } .nav-toggle.is-open span { background: transparent; } .nav-toggle.is-open span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span::after { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding-top: clamp(9rem, 18vw, 13rem); padding-bottom: clamp(6rem, 12vw, 9rem); overflow: hidden; background: var(--paper); } .hero-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; } .hero-inner { position: relative; z-index: 1; max-width: 760px; } .hero h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); font-weight: 800; margin-top: 1.4rem; } .hero h1 em { font-style: normal; color: var(--green-deep); } .hero-desc { margin-top: 1.7rem; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(18,32,46,0.72); max-width: 560px; font-weight: 300; } .hero-actions { margin-top: 2.6rem; } .hero-scroll { position: absolute; bottom: clamp(1.5rem, 4vw, 3rem); left: var(--edge); display: flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(18,32,46,0.45); } .hero-scroll .line { width: 32px; height: 1px; background: rgba(18,32,46,0.3); position: relative; overflow: hidden; } .hero-scroll .line::after { content: ''; position: absolute; top:0; left:-100%; width: 100%; height: 100%; background: var(--green); animation: scrollline 2.2s ease-in-out infinite; } @keyframes scrollline { 0% { left: -100%; } 50% { left: 0; } 100% { left: 100%; } } /* ========================================================================== Reveal on scroll ========================================================================== */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ========================================================================== Section — generic ========================================================================== */ .section { padding: var(--section-pad) 0; } .section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.55rem); font-weight: 700; margin-top: 1rem; } .section-head p { margin-top: 1.1rem; font-size: 1.08rem; color: rgba(18,32,46,0.68); font-weight: 300; } /* ========================================================================== Problem section (dark) ========================================================================== */ .section-problem { background: var(--navy); color: var(--white); position: relative; } .section-problem .section-head p { color: rgba(255,255,255,0.6); } .section-problem .section-head h2 { color: var(--white); } .problem-list { display: flex; flex-direction: column; } .problem-item { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: flex-start; padding: 1.9rem 0; border-top: 1px solid rgba(255,255,255,0.12); } .problem-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); } .problem-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 0.55rem; flex-shrink: 0; } .problem-item p { font-size: clamp(1.08rem, 2vw, 1.4rem); font-weight: 400; color: rgba(255,255,255,0.92); max-width: 640px; } .problem-item p .soft { color: rgba(255,255,255,0.5); font-weight: 300; } /* ========================================================================== Comparison (redes vs sitio propio) ========================================================================== */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); } .compare-card { padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: var(--radius); border: 1px solid rgba(18,32,46,0.1); } .compare-card.is-muted { background: var(--paper-2); } .compare-card.is-featured { background: var(--navy); color: var(--white); border-color: var(--navy); } .compare-card h3 { font-size: 1.15rem; font-weight: 700; } .compare-card.is-featured h3 { color: var(--white); } .compare-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; } .compare-list li { display: flex; gap: 0.75rem; font-size: 0.98rem; font-weight: 300; color: rgba(18,32,46,0.72); } .compare-card.is-featured .compare-list li { color: rgba(255,255,255,0.85); } .compare-list li svg { flex-shrink: 0; margin-top: 0.15rem; } /* ========================================================================== Value grid ========================================================================== */ .value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(18,32,46,0.1); border: 1px solid rgba(18,32,46,0.1); border-radius: var(--radius); overflow: hidden; } .value-item { background: var(--paper); padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.4rem, 2.5vw, 1.9rem); } .value-item .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--green-soft); color: var(--green-deep); margin-bottom: 1.3rem; } .value-item h3 { font-size: 1.02rem; font-weight: 600; font-family: var(--body); } .value-item p { margin-top: 0.6rem; font-size: 0.92rem; color: rgba(18,32,46,0.62); font-weight: 300; line-height: 1.55; } /* ========================================================================== Signature — before/after slider ========================================================================== */ .signature { background: var(--paper-2); } .compare-slider { position: relative; max-width: 880px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(18,32,46,0.35); aspect-ratio: 16/10; user-select: none; border: 1px solid rgba(18,32,46,0.08); } .slide-pane { position: absolute; inset: 0; overflow: hidden; } .slide-pane.after { clip-path: inset(0 0 0 50%); } .mock-browser { width: 100%; height: 100%; background: var(--white); display: flex; flex-direction: column; } .mock-chrome { height: 34px; background: #E7E5DE; display: flex; align-items: center; gap: 6px; padding: 0 12px; flex-shrink: 0; } .mock-chrome span { width: 8px; height: 8px; border-radius: 50%; background: rgba(18,32,46,0.2); } .mock-body { flex: 1; position: relative; overflow: hidden; } /* "before" mock — same copy as the "after" mock, deliberately mis-typeset: clashing fonts, gradient/outline text, hard drop shadows, crooked stickers, no grid, no breathing room. This is the point of the comparison: identical content, different execution. */ .slide-pane.before .mock-body { background: repeating-linear-gradient(0deg, #f1eee3 0px, #f1eee3 2px, transparent 2px, transparent 34px), linear-gradient(180deg, #fff6da, #f4ede0 45%, #ece7dd 100%); padding: 7% 7%; position: relative; } .before-clutter { position: relative; height: 100%; } .bc-topclutter { position: absolute; top: -1%; right: -1%; display: flex; align-items: center; gap: 10px; } .bc-emoji { font-size: 1.9rem; transform: rotate(-10deg); filter: drop-shadow(1px 3px 1px rgba(0,0,0,0.28)); } .bc-badge { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 0.62rem; color: #FFE45E; background: #D8534A; padding: 5px 9px; border-radius: 3px; transform: rotate(7deg); box-shadow: 2px 2px 0 rgba(0,0,0,0.35); letter-spacing: 0.02em; } .bc-brandmark { display: flex; align-items: center; gap: 6px; margin-bottom: 5%; } .bc-dot { width: 15px; height: 15px; border-radius: 3px; background: linear-gradient(135deg, #F2C400, #D8534A); box-shadow: 1px 1px 0 rgba(0,0,0,0.3); flex-shrink: 0; } .bc-wordmark { font-family: 'Brush Script MT', cursive; font-size: 1.15rem; color: #2255aa; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } .bc-content { max-width: 82%; } .bc-eyebrow { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 0.6rem; text-transform: uppercase; color: #fff; background: #2255aa; padding: 3px 9px; transform: rotate(-2deg); box-shadow: 2px 2px 0 rgba(0,0,0,0.25); } .bc-headline { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-style: italic; font-size: 1.9rem; text-transform: uppercase; line-height: 1; margin: 8px 0 3px; letter-spacing: 0.01em; background: linear-gradient(90deg, #D8534A, #F2C400 50%, #2255aa); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 2px 2px 0 rgba(0,0,0,0.16); } .bc-subtitle { font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif; font-size: 0.72rem; color: #8a8578; line-height: 1.2; margin: 0 0 6%; } .bc-cta { display: inline-block; font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif; font-weight: 700; font-size: 0.66rem; text-transform: uppercase; color: #FFE45E; background: #D8534A; padding: 8px 16px; border-radius: 2px; border: 2px solid #7a1f18; box-shadow: 3px 3px 0 rgba(0,0,0,0.35); transform: rotate(-3deg); } @media (max-width: 560px) { .bc-headline { font-size: 1.3rem; } .bc-emoji { font-size: 1.3rem; } } /* "after" mock — clean AND on-brand for the fictional business itself. Deliberately NOT Quierounsitio's own green/navy — this mockup represents a site built *for Cedro*, so it uses a warm coffee-shop palette. The quality (spacing, hierarchy, restraint) is the thing these two panes have in common with the rest of this page; the color story belongs to the client. */ .slide-pane.after .mock-body { background: radial-gradient(circle at 50% 34%, rgba(184,118,59,0.15), transparent 55%), #FBF6EE; padding: 6% 6.5%; } .after-clean { height: 100%; display: flex; flex-direction: column; } .ac-cupicon { flex-shrink: 0; } /* aligned brandmark — centered on purpose (see note below) */ .ac-brandmark { display: flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; } .ac-brandmark .ac-dot { width: 13px; height: 13px; border-radius: 50%; background: #B8763B; flex-shrink: 0; } .ac-brandmark .ac-wordmark { font-family: var(--display); font-weight: 800; font-size: 0.82rem; letter-spacing: -0.01em; color: #3B2A20; } /* Centered content block. This mockup is always rendered at the pane's FULL width and only clipped visually by the slider — a two-column layout would put half its content in the permanently-hidden left portion. Centering everything on the container's horizontal midpoint keeps it visible and legible at any slider position. This uses real set copy (a fictional café, not Enrique's own client) in the actual brand type — a wireframe of grey bars proved the structure was clean but never proved the *design quality* itself, which is the whole point of this section. */ .ac-center { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 0 8%; } .ac-eyebrow { font-family: var(--body); font-weight: 600; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: #B8763B; } .ac-headline { font-family: var(--display); font-weight: 800; font-size: 1.65rem; line-height: 1.08; color: #3B2A20; margin: 0.2rem 0 0; } .ac-subtitle { font-family: var(--body); font-weight: 300; font-size: 0.74rem; line-height: 1.55; color: rgba(59,42,32,0.58); max-width: 230px; margin: 0; } .ac-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--body); font-weight: 700; font-size: 0.68rem; color: #FFF8EE; background: #B8763B; padding: 0.62em 1.35em; border-radius: 999px; box-shadow: 0 6px 16px -4px rgba(184,118,59,0.55); margin-top: 0.35rem; } @media (max-width: 560px) { .ac-headline { font-size: 1.25rem; } .ac-subtitle { font-size: 0.66rem; max-width: 180px; } } .slider-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; transform: translateX(-50%); z-index: 5; } .slider-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--white); transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(18,32,46,0.15); } .slider-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--white); box-shadow: 0 8px 24px rgba(18,32,46,0.25); display: flex; align-items: center; justify-content: center; color: var(--navy); touch-action: none; } .slider-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } .compare-slider-labels { display: flex; justify-content: space-between; max-width: 880px; margin: 1.1rem auto 0; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(18,32,46,0.45); } .compare-slider-labels span:last-child { color: var(--green-deep); } /* ========================================================================== Process ========================================================================== */ .process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 3vw, 2rem); counter-reset: step; } .process-item { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--navy); } .process-num { font-family: var(--display); font-size: 0.9rem; font-weight: 800; color: var(--green-deep); letter-spacing: 0.04em; } .process-item h3 { margin-top: 0.9rem; font-size: 1.08rem; font-weight: 700; } .process-item p { margin-top: 0.65rem; font-size: 0.95rem; color: rgba(18,32,46,0.65); font-weight: 300; line-height: 1.6; } /* ========================================================================== Portfolio / evidence ========================================================================== */ .section-work { background: var(--paper); } .work-honest { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: rgba(18,32,46,0.55); font-weight: 400; margin-top: 0.9rem; } .work-honest svg { flex-shrink: 0; } .work-card { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; border-top: 1px solid rgba(18,32,46,0.12); padding-top: clamp(2.5rem, 5vw, 4rem); } .work-card + .work-card { margin-top: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 921px) { .work-card.is-reverse .work-visual { order: 2; } .work-card.is-reverse .work-copy { order: 1; } } .work-visual { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(18,32,46,0.3); border: 1px solid rgba(18,32,46,0.08); } .work-screenshot-frame { position: relative; width: 100%; padding-top: 48.13%; /* 913 / 1897 — matches the source screenshot's proportions */ overflow: hidden; background: #12202E; } .work-screenshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .work-visual .mock-chrome { background: #EDEBE4; } .work-visual .mock-body { aspect-ratio: 4/3; background: linear-gradient(160deg, #12202E 0%, #1B2F42 55%, #24384C 100%); position: relative; display: flex; align-items: center; justify-content: center; } .work-visual .mock-body::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(116,192,67,0.18), transparent 40%), radial-gradient(circle at 85% 75%, rgba(116,192,67,0.12), transparent 45%); } .work-visual .wv-mark { position: relative; text-align: center; color: var(--white); } .work-visual .wv-mark .wv-name { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.8rem); letter-spacing: 0.02em; } .work-visual .wv-mark .wv-tag { margin-top: 0.5rem; font-size: 0.82rem; color: rgba(255,255,255,0.55); font-weight: 300; letter-spacing: 0.02em; } .work-copy .tag { display: inline-block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); background: var(--green-soft); padding: 0.35rem 0.75rem; border-radius: 999px; } .work-copy h3 { margin-top: 1.1rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; } .work-copy p { margin-top: 1rem; font-size: 1rem; color: rgba(18,32,46,0.68); font-weight: 300; max-width: 46ch; } .work-copy .work-link { margin-top: 1.6rem; display: inline-flex; align-items: center; gap: 0.5rem; } .work-copy .work-link svg { transition: transform 0.3s var(--ease); } .work-copy .work-link:hover svg { transform: translate(3px, -3px); } /* ========================================================================== Contact ========================================================================== */ .section-contact { background: var(--navy); color: var(--white); position: relative; overflow: hidden; } .section-contact .section-head h2 { color: var(--white); } .section-contact .section-head p { color: rgba(255,255,255,0.62); } .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); } .contact-info { padding-top: 0.5rem; } .contact-info-item { display: flex; gap: 1rem; padding: 1.3rem 0; border-top: 1px solid rgba(255,255,255,0.12); } .contact-info-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); } .contact-info-item .icon { color: var(--green); flex-shrink: 0; margin-top: 0.15rem; } .contact-info-item strong { display:block; font-size: 0.95rem; font-weight: 600; } .contact-info-item span { display:block; margin-top: 0.2rem; font-size: 0.9rem; color: rgba(255,255,255,0.55); font-weight: 300; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .form-field { display: flex; flex-direction: column; gap: 0.5rem; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.65); } .form-field input, .form-field textarea { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 0.9rem 1rem; color: var(--white); font-family: var(--body); font-size: 0.98rem; transition: border-color 0.25s ease, background 0.25s ease; } .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255,255,255,0.32); } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--green); background: rgba(255,255,255,0.09); } .form-field textarea { resize: vertical; min-height: 118px; } .form-submit { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem; } .form-note { font-size: 0.85rem; color: rgba(255,255,255,0.45); font-weight: 300; } .form-status { margin-top: 1rem; font-size: 0.92rem; font-weight: 500; display: none; } .form-status.is-visible { display: block; } .form-status.ok { color: var(--green); } .form-status.err { color: #E8846F; } /* ========================================================================== Footer ========================================================================== */ .footer { background: var(--navy); color: rgba(255,255,255,0.5); padding: 2.6rem 0; border-top: 1px solid rgba(255,255,255,0.1); } .footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-brand { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; } .footer-brand img { height: 22px; width: auto; } .footer small { font-size: 0.82rem; } .footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; } .footer-credit { font-size: 0.78rem; color: rgba(255,255,255,0.4); transition: color 0.25s ease; } .footer-credit span { font-weight: 600; color: rgba(255,255,255,0.55); transition: color 0.25s ease; } .footer-credit:hover, .footer-credit:hover span { color: var(--green); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 920px) { .value-grid { grid-template-columns: repeat(2, 1fr); } .process-list { grid-template-columns: repeat(2, 1fr); } .compare { grid-template-columns: 1fr; } .work-card { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .nav-links { display: none; } .nav-toggle { display: block; } .nav.is-open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--paper); padding: 1.5rem var(--edge) 2rem; gap: 1.2rem; box-shadow: 0 12px 24px rgba(18,32,46,0.08); } .value-grid { grid-template-columns: 1fr; } .process-list { grid-template-columns: 1fr; } .process-item { border-top: none; border-left: 2px solid var(--navy); padding-left: 1.3rem; padding-top: 0.2rem; } .form-grid { grid-template-columns: 1fr; } .footer .container { flex-direction: column; text-align: center; } .footer-meta { align-items: center; } }