/* ============================================ Ibermeta — Design tokens Burgundy #C2002F on white, dark ink text. Headings: Cairo — Body: Tajawal ============================================ */ :root { --bg: #FFFFFF; --surface: #FAF8F6; --surface-dark: #17171A; --ink: #1A1A1A; --secondary: #56585D; --muted: #93958F; --hairline: #E8E4DF; --burgundy: #C2002F; --burgundy-dark: #920022; --burgundy-soft: #FBEAEC; --on-dark: #F3F1EE; --on-dark-secondary: #B7B4AF; --radius: 3px; --radius-lg: 10px; --container: 1180px; --font-heading: 'Cairo', 'Segoe UI', sans-serif; --font-body: 'Tajawal', 'Segoe UI', sans-serif; --shadow-card: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.05); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.75; /* direction comes from (set dynamically by WordPress / TranslatePress via language_attributes()) instead of being hardcoded, so this theme keeps working once English/Spanish pages are added. */ text-align: start; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { max-width: var(--container); margin: 0 auto; padding: 0 28px; } section { padding: 88px 0; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; margin: 0; letter-spacing: -0.01em; color: var(--ink); } p { margin: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--burgundy); letter-spacing: 0.04em; margin-bottom: 14px; } .eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--burgundy); display: inline-block; } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head.center { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-size: 34px; line-height: 1.3; margin-bottom: 16px; } .section-head p { color: var(--secondary); font-size: 17px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-heading); font-size: 15px; font-weight: 700; padding: 15px 30px; border-radius: var(--radius); cursor: pointer; border: 1.5px solid transparent; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--burgundy); color: #fff; } .btn-primary:hover { background: var(--burgundy-dark); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--hairline); } .btn-outline:hover { border-color: var(--ink); } .btn-ghost-light { background: transparent; color: var(--on-dark); border-color: rgba(243,241,238,.3); } .btn-ghost-light:hover { border-color: var(--on-dark); } .btn-sm { padding: 11px 20px; font-size: 13px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--hairline); } .site-header .bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; max-width: var(--container); margin: 0 auto; } .brand { display: flex; align-items: center; gap: 10px; } .brand img { height: 42px; width: auto; } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--ink); position: relative; padding: 6px 0; } .nav-links a::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 2px; background: var(--burgundy); transition: width .18s ease; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a.active { color: var(--burgundy); } .header-actions { display: flex; align-items: center; gap: 18px; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; } @media (max-width: 900px) { .nav-links { position: fixed; inset: 73px 0 0 0; background: #fff; flex-direction: column; padding: 32px 28px; gap: 22px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: all .2s ease; border-top: 1px solid var(--hairline); } .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .menu-toggle { display: block; } .header-actions .btn-primary { padding: 11px 18px; font-size: 13px; } } /* ---------- Hero ---------- */ .hero { padding: 76px 0 90px; position: relative; overflow: hidden; } .hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; } .hero h1 { font-size: 46px; line-height: 1.28; margin-bottom: 22px; } .hero h1 span { color: var(--burgundy); } .hero p.lead { font-size: 18px; color: var(--secondary); margin-bottom: 34px; max-width: 480px; } .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; } .trust-strip { display: flex; gap: 30px; flex-wrap: wrap; } .trust-strip .item { display: flex; align-items: center; gap: 10px; } .trust-strip .num { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--ink); } .trust-strip .label { font-size: 13px; color: var(--secondary); } /* Spain-outline motif, echoes the logo mark. Used as a quiet signature across the site. */ .spain-mark { width: 100%; height: auto; color: var(--burgundy); } .hero-visual { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); aspect-ratio: 4/5; overflow: hidden; } .hero-visual img.hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-visual .spain-mark { width: 62%; } .hero-visual .tag { position: absolute; bottom: 26px; right: 26px; left: 26px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 18px; font-size: 13px; color: var(--secondary); display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(20,20,20,.08); } .hero-visual .tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--burgundy); flex-shrink: 0; } .img-placeholder { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; text-align: center; gap: 8px; padding: 24px; } .img-placeholder .spain-mark { width: 34%; opacity: .5; margin-bottom: 10px; } @media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; } .hero h1 { font-size: 32px; } .hero-visual { order: -1; } } /* ---------- Services ---------- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch; } /* Two-column service list (services.html). A specific card can be marked with .service-card-full in the HTML to span the whole row (used for an odd card left alone at the end of the list). grid-column: 1 / -1 always means "full width", regardless of how many columns currently exist, so it stays correct at every breakpoint without extra overrides. */ .services-grid.two-col-list { grid-template-columns: repeat(2, 1fr); } .service-card-full { grid-column: 1 / -1; } .service-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 34px 28px; transition: border-color .15s ease, box-shadow .15s ease; } .service-card:hover { border-color: #D8D4CE; box-shadow: var(--shadow-card); } .service-card .icon { width: 46px; height: 46px; border-radius: var(--radius); background: var(--burgundy-soft); color: var(--burgundy); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .service-card h3 { font-size: 19px; margin-bottom: 10px; } .service-card p { color: var(--secondary); font-size: 15px; margin-bottom: 20px; } .service-card .link { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--burgundy); display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 620px) { .services-grid.two-col-list { grid-template-columns: 1fr; } } /* ---------- Why us ---------- */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .why-list { list-style: none; margin: 0; padding: 0; } .why-list li { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--hairline); } .why-list li:last-child { border-bottom: 1px solid var(--hairline); } .why-list .index { font-family: var(--font-heading); font-weight: 700; color: var(--burgundy); font-size: 15px; padding-top: 2px; } .why-list h4 { font-size: 17px; margin-bottom: 6px; } .why-list p { color: var(--secondary); font-size: 15px; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 32px; } } /* ---------- Testimonials ---------- */ .testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .testi-photo-card { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .testi-photo-card img { width: 100%; height: auto; display: block; } .testi-card { background: var(--surface); border-radius: var(--radius-lg); padding: 32px 28px; border: 1px solid var(--hairline); } .testi-card .quote { font-size: 16px; line-height: 1.8; margin-bottom: 24px; color: var(--ink); } .testi-card .person { display: flex; align-items: center; gap: 12px; } .testi-card .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--burgundy-soft); color: var(--burgundy); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 15px; flex-shrink: 0; } .testi-card .name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; } .testi-card .loc { font-size: 12px; color: var(--muted); } @media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } } /* ---------- CTA band ---------- */ .cta-band { background: var(--surface-dark); color: var(--on-dark); border-radius: var(--radius-lg); padding: 64px 56px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .cta-band h2 { color: var(--on-dark); font-size: 28px; max-width: 520px; } .cta-band p { color: var(--on-dark-secondary); margin-top: 10px; } @media (max-width: 700px) { .cta-band { padding: 42px 28px; } } /* ---------- Footer ---------- */ .site-footer { background: var(--surface-dark); color: var(--on-dark-secondary); padding: 72px 0 28px; margin-top: 40px; direction: rtl; text-align: right; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(243,241,238,.12); direction: rtl; } .footer-grid .brand img { height: 40px; margin-bottom: 16px; } .footer-grid p { font-size: 14px; line-height: 1.8; max-width: 280px; text-align: right; } .footer-grid h5 { color: var(--on-dark); font-family: var(--font-heading); font-size: 14px; margin-bottom: 18px; text-align: right; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer-grid li { text-align: right; } .footer-grid a { font-size: 14px; } .footer-grid a:hover { color: var(--on-dark); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 13px; flex-wrap: wrap; gap: 12px; } .social-row { display: flex; gap: 14px; } .social-row a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(243,241,238,.2); display: flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- Forms ---------- */ .form-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-card); } .form-row { margin-bottom: 18px; } .form-row label { display: block; font-family: var(--font-heading); font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--ink); } .form-row input, .form-row textarea, .form-row select { width: 100%; font-family: var(--font-body); font-size: 15px; padding: 13px 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); color: var(--ink); } .form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--burgundy); background: #fff; } .form-row textarea { min-height: 120px; resize: vertical; } .form-note { font-size: 12px; color: var(--muted); margin-top: 14px; } .form-success { display: none; background: var(--burgundy-soft); color: var(--burgundy-dark); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; margin-top: 16px; } .form-success.show { display: block; } /* ---------- Contact Form 7 (real form) ---------- CF7 generates its own HTML/classes, different from the .form-row markup above (which only styles the old static placeholder forms). These rules target CF7's actual output so the real form matches the design. */ .form-card .wpcf7-form-control-wrap { display: block; margin-bottom: 18px; } .form-card .wpcf7-form-control { width: 100%; font-family: var(--font-body); font-size: 15px; padding: 13px 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-sizing: border-box; text-align: right !important; direction: rtl !important; } .form-card .wpcf7-form-control:focus { outline: none; border-color: var(--burgundy); background: #fff; } .form-card textarea.wpcf7-form-control { min-height: 120px; resize: vertical; } .form-card input.wpcf7-submit { width: 100%; font-family: var(--font-heading); font-size: 15px; font-weight: 700; padding: 15px 30px; background: var(--burgundy); color: #fff; border: 1.5px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background .15s ease; } .form-card input.wpcf7-submit:hover { background: var(--burgundy-dark); } .form-card .wpcf7-spinner { margin-inline-start: 8px; } .form-card .wpcf7-not-valid-tip { display: block; color: var(--burgundy); font-size: 12px; margin-top: 6px; } .form-card .wpcf7-response-output { margin-top: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; } .form-card form.invalid .wpcf7-response-output { border-color: var(--burgundy); color: var(--burgundy-dark); } .form-card form.sent .wpcf7-response-output { border-color: var(--burgundy-soft); background: var(--burgundy-soft); color: var(--burgundy-dark); } /* ---------- Breadcrumb / page header ---------- */ .page-hero { padding: 64px 0 56px; border-bottom: 1px solid var(--hairline); background: var(--surface); } .page-hero .eyebrow { margin-bottom: 12px; } .page-hero h1 { font-size: 38px; margin-bottom: 14px; } .page-hero p { color: var(--secondary); font-size: 17px; max-width: 600px; } .breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 18px; } .breadcrumb a:hover { color: var(--burgundy); } /* ---------- Blog ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .post-card { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: #fff; } .post-card:hover { box-shadow: var(--shadow-card); } .post-card .thumb { aspect-ratio: 16/10; } .post-card .body { padding: 24px; } .post-card .cat { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--burgundy); margin-bottom: 10px; display: block; } .post-card h3 { font-size: 18px; line-height: 1.4; margin-bottom: 10px; } .post-card p { color: var(--secondary); font-size: 14px; margin-bottom: 16px; } .post-card .meta { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; } .post-card .meta .read { font-family: var(--font-heading); font-weight: 700; color: var(--ink); } @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } } .filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; } .filter-chip { font-family: var(--font-heading); font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 100px; border: 1px solid var(--hairline); color: var(--secondary); cursor: pointer; } .filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); } /* ---------- Article ---------- */ .article-wrap { max-width: 760px; margin: 0 auto; } .article-head .cat { font-family: var(--font-heading); font-weight: 700; color: var(--burgundy); font-size: 13px; } .article-head h1 { font-size: 34px; line-height: 1.35; margin: 14px 0; } .article-meta { display: flex; gap: 18px; color: var(--muted); font-size: 13px; margin-bottom: 32px; flex-wrap: wrap; } .article-cover { aspect-ratio: 16/9; margin-bottom: 40px; } .article-body { font-size: 17px; line-height: 1.9; color: #2A2A2A; } .article-body p { margin-bottom: 24px; } .article-body h2 { font-size: 24px; margin: 40px 0 16px; } .article-body ul { padding-inline-start: 22px; margin-bottom: 24px; } .article-body li { margin-bottom: 10px; } .article-cta { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 28px; margin: 48px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .article-cta h4 { font-size: 17px; margin-bottom: 4px; } .article-cta p { color: var(--secondary); font-size: 14px; } .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); } .tag-row span { font-size: 13px; color: var(--secondary); background: var(--surface); border: 1px solid var(--hairline); border-radius: 100px; padding: 6px 14px; } /* ---------- Utility ---------- */ .mt-0 { margin-top: 0; } .bg-surface { background: var(--surface); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 32px; } } .stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .stat-row .stat { text-align: center; padding: 28px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); } .stat-row .num { font-family: var(--font-heading); font-weight: 700; font-size: 32px; color: var(--burgundy); } .stat-row .label { font-size: 13px; color: var(--secondary); margin-top: 6px; } @media (max-width: 700px) { .stat-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { section { padding: 56px 0; } .section-head h2 { font-size: 26px; } } /* ---------- Map embed ---------- */ .map-embed { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; margin-top: 28px; position: relative; } .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .map-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--burgundy); margin-top: 14px; } .map-link:hover { color: var(--burgundy-dark); } /* ---------- WhatsApp floating button ---------- */ .whatsapp-fab { position: fixed; bottom: 26px; left: 26px; z-index: 300; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(20,20,20,.25); transition: transform .15s ease; } .whatsapp-fab:hover { transform: scale(1.07); } @media (max-width: 700px) { .whatsapp-fab { width: 52px; height: 52px; bottom: 18px; left: 18px; } } /* ---------- Thank-you page ---------- */ .thankyou-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 90px 0; } .thankyou-card { max-width: 560px; margin: 0 auto; text-align: center; } .thankyou-card .icon-badge { width: 72px; height: 72px; border-radius: 50%; background: var(--burgundy-soft); color: var(--burgundy); display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; } .thankyou-card h1 { font-size: 30px; margin-bottom: 14px; } .thankyou-card p { color: var(--secondary); font-size: 16px; margin-bottom: 32px; } .thankyou-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }