/*
Theme Name: Homerly AI
Theme URI: https://homerlyai.com
Author: Me Saidani Engineering
Description: Editorial bilingual public marketing theme for Homerly AI.
Version: 0.3.2
Text Domain: homerly
*/

:root { --ink:#1f1b15; --forest:#061b0e; --forest-soft:#1b3022; --muted:#656761; --paper:#fff8f3; --cream:#f6ece3; --cream-deep:#e9ddd1; --sage:#d0e9d4; --terracotta:#d36135; --terracotta-soft:#ffb59b; --line:#d6d2c9; --serif:Georgia,'Times New Roman',serif; --sans:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.6; overflow-x:hidden; }
body::before { position:fixed; z-index:-1; inset:0; opacity:.22; pointer-events:none; background-image:radial-gradient(rgba(31,27,21,.12) .55px,transparent .55px); background-size:9px 9px; content:''; }
a { color:inherit; }
.skip-link { position:absolute; left:16px; top:-100px; z-index:10; padding:10px 14px; border-radius:8px; color:var(--paper); background:var(--forest); }
.skip-link:focus { top:16px; }
.site-header,.site-main,.site-footer { width:min(1280px,calc(100% - 128px)); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; min-height:94px; padding:20px 0; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--forest); text-decoration:none; font-size:1.04rem; font-weight:800; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:11px 11px 11px 3px; color:var(--paper); background:var(--forest); font-family:var(--serif); font-size:1.2rem; line-height:1; }
.site-nav { display:flex; align-items:center; gap:27px; font-size:.8rem; font-weight:600; }
.site-nav a { text-decoration:none; }
.site-nav a:not(.nav-cta):hover,.site-nav a:not(.nav-cta):focus-visible,.text-link:hover { color:var(--terracotta); }
.nav-cta,.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--forest); border-radius:999px; padding:12px 19px; font-weight:700; text-decoration:none; transition:transform .2s ease,background .2s ease,color .2s ease; }
.nav-cta { padding:9px 15px; color:var(--paper); background:var(--forest); }
.nav-cta:hover,.button-primary:hover { transform:translateY(-2px); background:var(--terracotta); border-color:var(--terracotta); }
.button-primary { color:var(--paper); background:var(--forest); }
.button-secondary { background:transparent; }
.button-secondary:hover { color:var(--paper); background:var(--forest); }
.button:focus-visible,.nav-cta:focus-visible,.site-nav a:focus-visible,.language-switcher a:focus-visible,.menu-toggle:focus-visible,.text-link:focus-visible { outline:3px solid var(--terracotta); outline-offset:4px; }
.language-switcher { display:flex; align-items:center; gap:6px; margin-left:2px; color:var(--muted); font-size:.7rem; letter-spacing:.08em; }
.language-switcher a { opacity:.62; }
.language-switcher a.is-current { opacity:1; color:var(--forest); font-weight:800; }
.menu-toggle { display:none; border:0; color:var(--forest); background:transparent; font:600 .78rem var(--sans); }
.menu-icon { display:inline-grid; gap:5px; margin-left:8px; }
.menu-icon i { display:block; width:23px; height:2px; background:currentColor; }
.hero { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(420px,.82fr); gap:86px; align-items:center; padding:94px 0 116px; }
.eyebrow { margin:0 0 18px; color:var(--terracotta); font-size:.68rem; font-weight:800; letter-spacing:.16em; line-height:1.4; text-transform:uppercase; }
h1,h2,h3 { font-family:var(--serif); font-weight:500; letter-spacing:-.045em; }
h1,h2 { margin:0; }
h1 { max-width:760px; font-size:clamp(3.7rem,7vw,6.7rem); line-height:.91; }
h2 { font-size:clamp(2.55rem,4.6vw,4.55rem); line-height:.98; }
h3 { margin:0; font-size:1.58rem; line-height:1.1; }
.hero-copy { max-width:570px; margin:29px 0 30px; color:var(--muted); font-size:1.05rem; line-height:1.72; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; }
.hero-note { display:flex; align-items:center; gap:9px; margin:19px 0 0; color:var(--muted); font-size:.76rem; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--terracotta); box-shadow:0 0 0 5px rgba(211,97,53,.12); }
.hero-visual { position:relative; min-height:518px; padding:25px; border-radius:25px; overflow:hidden; background:var(--sage); box-shadow:0 24px 70px rgba(6,27,14,.08); }
.hero-visual::before { position:absolute; inset:0; opacity:.28; background-image:linear-gradient(135deg,rgba(255,255,255,.45),transparent 55%); content:''; }
.visual-topline { position:relative; z-index:1; display:flex; justify-content:space-between; color:var(--forest-soft); font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.visual-status { color:var(--forest-soft); }
.opportunity-card { position:relative; z-index:1; max-width:397px; margin:43px auto 18px; padding:26px; border-radius:15px; background:var(--paper); box-shadow:0 19px 40px rgba(6,27,14,.11); }
.card-label,.action-kicker { display:block; margin:0 0 9px; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.opportunity-card h2 { font-size:1.5rem; line-height:1.12; }
.card-reason { display:flex; gap:12px; margin:24px 0 19px; padding:14px 0; border-block:1px solid var(--line); }
.card-reason p { margin:0; color:var(--muted); font-size:.72rem; line-height:1.52; }
.card-reason strong { display:block; margin-bottom:3px; color:var(--ink); font-size:.71rem; }
.mini-icon { display:grid; flex:none; place-items:center; width:23px; height:23px; border-radius:50%; color:var(--paper); background:var(--terracotta); font-size:.8rem; }
.card-action { padding:14px; border-radius:10px; background:var(--cream); font-size:.77rem; font-weight:800; }
.card-action b { float:right; color:var(--terracotta); font-size:1.1rem; }
.card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; font-size:.62rem; }
.approval { display:flex; align-items:center; gap:7px; color:var(--forest-soft); font-weight:800; }
.approval i { width:7px; height:7px; border-radius:50%; background:#408765; }
.example-label { color:var(--muted); }
.visual-metric { position:relative; z-index:1; max-width:397px; margin:auto; padding:15px 19px; border:1px solid rgba(6,27,14,.15); border-radius:12px; background:rgba(255,248,243,.4); }
.visual-metric > span { display:block; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.visual-metric strong { display:block; margin-top:2px; font-family:var(--serif); font-size:1.65rem; }
.visual-metric em { color:#408765; font:700 .75rem var(--sans); font-style:normal; }
.visual-metric svg { display:block; width:100%; height:42px; margin-top:4px; }
.visual-metric path { fill:none; stroke:var(--terracotta); stroke-linecap:round; stroke-width:2.5; }
.proof-strip { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.proof-strip > div { padding:27px 25px; border-right:1px solid var(--line); }
.proof-strip > div:last-child { border:0; }
.proof-strip strong { display:block; margin-bottom:3px; font-family:var(--serif); font-size:1.72rem; line-height:1.1; }
.proof-strip span { color:var(--muted); font-size:.73rem; }
.section { padding:132px 0; }
.section-intro { display:flex; align-items:end; justify-content:space-between; gap:55px; margin-bottom:56px; }
.section-intro > div { max-width:690px; }
.section-intro > p,.capabilities-intro > p:last-child,.blog-preview-copy > p:last-of-type,.cta-section > p { max-width:420px; margin:0; color:var(--muted); line-height:1.7; }
.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.workflow-card { display:flex; flex-direction:column; justify-content:space-between; min-height:305px; padding:29px; border:1px solid var(--line); border-radius:16px; background:rgba(255,248,243,.45); }
.workflow-card.is-featured { border-color:var(--forest-soft); color:var(--paper); background:var(--forest); }
.step-number { display:block; color:var(--terracotta); font-family:var(--serif); font-size:1.48rem; }
.workflow-card.is-featured .step-number { color:var(--terracotta-soft); }
.workflow-card p { margin:11px 0 0; color:var(--muted); font-size:.85rem; line-height:1.65; }
.workflow-card.is-featured p { color:#c8d4ca; }
.capabilities-section { display:grid; grid-template-columns:.72fr 1fr; gap:100px; align-items:start; padding-top:8px; }
.capabilities-intro { position:sticky; top:30px; }
.capabilities-intro h2 { margin-bottom:24px; }
.capabilities-list,.capability-list { display:grid; }
.capability-list article { display:grid; grid-template-columns:47px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.capability-list article > span { color:var(--terracotta); font-family:var(--serif); font-size:1.3rem; }
.capability-list h3 { font-size:1.65rem; }
.capability-list p { max-width:440px; margin:7px 0 0; color:var(--muted); font-size:.86rem; line-height:1.6; }
.audience-section { padding-top:78px; }
.audience-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:49px; }
.audience-heading h2 { max-width:590px; }
.audience-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.audience-cards article { min-height:245px; padding:27px; border-radius:16px; background:var(--cream); }
.audience-icon { display:grid; place-items:center; width:36px; height:36px; margin-bottom:48px; border-radius:50%; color:var(--paper); background:var(--forest); font-size:1.2rem; }
.audience-cards h3 { font-size:1.45rem; }
.audience-cards p { margin:8px 0 0; color:var(--muted); font-size:.83rem; line-height:1.6; }
.blog-preview { display:grid; grid-template-columns:1fr .62fr; gap:90px; align-items:center; padding-bottom:115px; } .blog-preview-copy,.capabilities-intro,.hero-copy-column { min-width:0; }
.blog-preview-copy h2 { max-width:700px; margin-bottom:23px; }
.text-link { display:inline-flex; gap:8px; margin-top:25px; color:var(--forest); font-size:.82rem; font-weight:800; text-decoration:none; }
.blog-paper { position:relative; min-height:250px; padding:27px; border-radius:16px; background:var(--cream-deep); transform:rotate(2deg); box-shadow:10px 12px 0 rgba(6,27,14,.08); }
.blog-paper::after { position:absolute; inset:19px; border:1px solid rgba(6,27,14,.16); content:''; }
.blog-paper > span { position:absolute; z-index:1; top:48px; left:50px; color:var(--forest); font:4.4rem var(--serif); }
.blog-paper i { position:relative; z-index:1; display:block; width:48%; height:7px; margin:17px 0 0 auto; border-radius:6px; background:rgba(6,27,14,.2); }
.blog-paper i:first-of-type { margin-top:54px; width:60%; }
.cta-section { padding:84px 25px 126px; text-align:center; }
.cta-section h2 { max-width:770px; margin-inline:auto; }
.cta-section > p { margin:22px auto 28px; }
.site-footer { display:grid; grid-template-columns:1.6fr 1fr auto; gap:30px; align-items:center; padding:27px 0 35px; border-top:1px solid var(--line); color:var(--muted); font-size:.7rem; }
.footer-brand,.footer-links { display:flex; align-items:center; gap:12px; }
.footer-brand .brand-mark { width:25px; height:25px; font-size:1rem; }
.footer-brand strong { color:var(--forest); }
.footer-tagline { margin-left:10px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:var(--terracotta); }
.footer-meta { text-align:right; }
.blog-page,.article-page { padding:78px 0 130px; }
.blog-heading { max-width:760px; padding-bottom:58px; }
.blog-heading h1 { font-size:clamp(3.5rem,7vw,6rem); }
.blog-heading > p:last-child { max-width:520px; margin-top:23px; color:var(--muted); line-height:1.7; }
.post-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; }
.post-card { min-height:280px; padding:28px; border-radius:16px; background:var(--cream); }
.post-date,.article-date { margin:0 0 40px; color:var(--terracotta); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.post-card h2 { font-size:2rem; }
.post-card h2 a { text-decoration:none; }
.post-card > p:not(.post-date) { max-width:450px; margin:12px 0 0; color:var(--muted); font-size:.86rem; line-height:1.65; }
.empty-blog { display:flex; grid-column:1/-1; gap:31px; align-items:center; padding:48px; border-radius:16px; background:var(--forest); color:var(--paper); }
.empty-blog h2 { max-width:600px; font-size:2.5rem; }
.empty-blog p { max-width:540px; color:#c8d4ca; }
.blog-empty-mark { display:grid; flex:none; place-items:center; width:100px; height:100px; border-radius:31px 31px 31px 7px; color:var(--forest); background:var(--sage); font:4rem var(--serif); }
.empty-blog .text-link { color:var(--terracotta-soft); }
.article-page { max-width:850px; }
.article-page h1 { max-width:850px; font-size:clamp(3rem,7vw,6rem); }
.article-date { margin-top:23px; }
.article-content { margin-top:60px; color:var(--muted); font-size:1.05rem; line-height:1.8; }
.article-content h2 { margin-top:55px; font-size:2.5rem; color:var(--ink); }
.article-content h3 { margin-top:38px; color:var(--ink); }
.article-content a { color:var(--forest); }
.legal-page { max-width:760px; padding:80px 0 130px; }
.legal-page h1 { font-size:clamp(3rem,7vw,5.4rem); }
.legal-page h2 { margin-top:42px; font-size:2rem; }
.legal-page p { color:var(--muted); line-height:1.75; }
@media (max-width:1020px) { .site-header,.site-main,.site-footer { width:min(100% - 64px,1280px); } .site-nav { gap:14px; } .hero { gap:44px; } .capabilities-section { gap:55px; } }
@media (max-width:780px) { .site-header,.site-main,.site-footer { width:min(100% - 36px,1280px); } .site-header { min-height:78px; } .menu-toggle { display:flex; align-items:center; } .site-nav { position:absolute; z-index:5; top:78px; right:18px; left:18px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:0 17px 45px rgba(6,27,14,.14); } .site-nav.is-open { display:flex; } .site-nav > a { padding:12px 10px; } .site-nav .language-switcher { order:4; margin:4px 10px 10px; } .site-nav .nav-cta { order:5; text-align:center; } .hero { grid-template-columns:1fr; gap:46px; padding:68px 0 82px; } .hero-visual { min-height:480px; } .proof-strip,.workflow-grid,.audience-cards { grid-template-columns:1fr; } .proof-strip > div { border-right:0; border-bottom:1px solid var(--line); } .proof-strip > div:last-child { border-bottom:0; } .section { padding:94px 0; } .section-intro,.audience-heading { display:block; } .section-intro > p,.audience-heading h2 { margin-top:22px; } .capabilities-section,.blog-preview { grid-template-columns:1fr; gap:55px; } .capabilities-intro { position:static; } .blog-preview-copy h2 { overflow-wrap:anywhere; } .blog-paper { max-width:440px; width:90%; margin:auto; } .site-footer { grid-template-columns:1fr; gap:15px; } .footer-meta { text-align:left; } .post-grid { grid-template-columns:1fr; } .empty-blog { display:block; padding:32px; } .blog-empty-mark { margin-bottom:28px; } }
@media (max-width:480px) { h1 { max-width:100%; font-size:3.45rem; overflow-wrap:anywhere; } h2 { font-size:2.75rem; } .hero-copy { max-width:100%; overflow-wrap:anywhere; } .button { white-space:normal; } .hero-visual { min-width:0; min-height:455px; padding:17px; } .opportunity-card { width:100%; min-width:0; margin-top:34px; padding:20px; } .opportunity-card h2 { font-size:1.32rem; } .visual-topline { font-size:.57rem; } .button { width:100%; } .button-row { display:grid; } .footer-brand { align-items:flex-start; flex-wrap:wrap; } .footer-tagline { width:100%; margin-left:37px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }