/* Theme Name: Chai & Careers Theme URI: https://example.com/chai-careers Author: Agha & ChatGPT Author URI: https://example.com Description: A modern landing + blog theme inspired by chai rituals. Includes an upgraded animated chai cup, full-page sections, and a styled blog index/single. Works well with the Classic Editor. Version: 1.0.7 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: chai-careers Tags: blog, custom-logo, custom-menu, two-columns, editor-style */ :root{ --basalt:#0E0F10; --espresso:#2B211D; --foam:#E9E4DA; --saffron:#C8741D; --saffron-hover:#B7671A; --cardamom:#2F6F6D; --rose:#B66A45; --divider: rgba(182,106,69,0.35); --focus: rgba(233,228,218,0.8); } html { scroll-behavior: smooth; } body{ margin:0; color:var(--foam); background:var(--basalt); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height:1.6; } .container { width: min(1100px, 92vw); margin-inline:auto; } a{ color: var(--cardamom); } a:hover{ color: var(--saffron); } .btn{ display:inline-flex; align-items:center; gap:.5rem; border:0; cursor:pointer; text-decoration:none; } .btn-primary{ background:var(--saffron); color:var(--basalt); padding:.9rem 1.2rem; border-radius:14px; } .btn-primary:hover{ background:var(--saffron-hover); } .btn-ghost{ border:1px solid var(--divider); color:var(--foam); padding:.8rem 1.2rem; border-radius:14px; } .btn-ghost:hover{ background: rgba(255,255,255,.06); } :focus{ outline: 3px solid var(--focus); outline-offset:2px; } /* Header / Nav */ .site-header { position: fixed; inset-inline:0; top:12px; z-index:999; display:flex; justify-content:center; } .nav-shell{ width:min(1100px,92vw); backdrop-filter: blur(16px); background: rgba(43,33,29,0.65); border:1px solid var(--divider); border-radius:18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; gap:1rem; } .brand{ display:flex; align-items:center; gap:.75rem; color:var(--foam); text-decoration:none; } .brand img{ height:34px; width:auto; display:block; } .custom-logo{ height:34px !important; width:auto !important; display:block; } .main-menu{ display:none; gap:1.2rem; align-items:center; } .main-menu ul{ margin:0; padding:0; list-style:none; display:flex; gap:1.2rem; align-items:center; } .main-menu li{ margin:0; padding:0; } .main-menu a{ color:var(--foam); text-decoration:none; } .main-menu a:hover{ color:var(--saffron); } .menu-toggle{ color:var(--foam); background:transparent; border:0; padding:.5rem .6rem; border-radius:10px; } @media (min-width: 768px){ .main-menu{ display:flex; } .menu-toggle{ display:none; } } .mobile-panel{ display:none; border-top:1px solid var(--divider); } .mobile-panel.open{ display:block; } .mobile-panel ul{ margin:0; padding:0; list-style:none; } .mobile-panel li a{ display:block; padding:.6rem 0; color:var(--foam); text-decoration:none; } .mobile-panel li a:hover{ color:var(--saffron); } /* Sections */ .section{ min-height: 40svh; display:flex; align-items:center; } .section .inner{ padding-block: 6rem; } /* Hero */ .hero { position:relative; overflow:hidden; background:var(--basalt); } .hero::before{ content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(45deg, #2F6F6D 0%, #C8741D 100%); opacity:.12; } .hero-grid{ position:relative; z-index:1; display:grid; gap:3rem; } @media(min-width: 900px){ .hero-grid{ grid-template-columns: 1.1fr 1fr; } } .h1{ font-size: clamp(2.1rem, 4.5vw, 3.25rem); line-height:1.15; margin:0; font-weight:800; letter-spacing:-0.01em; } .lead{ color:rgba(233,228,218,.85); margin-top:1rem; font-size:1.1rem; } .card-grid{ display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 520px; } .card{ background:var(--espresso); border:1px solid var(--divider); padding:1rem; border-radius:16px; } .badge{ display:inline-block; font-size:.75rem; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--divider); color:rgba(233,228,218,.85); } .section-title{ font-size:1.85rem; margin:0 0 .35rem; font-weight:700; } .section-sub{ color:rgba(233,228,218,.85); max-width:42ch; } .value-grid{ display:grid; gap:1rem; margin-top:2rem; } @media(min-width: 800px){ .value-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } .value-card{ background:var(--espresso); border:1px solid var(--divider); padding:1.2rem; border-radius:16px; } .box{ background:rgba(43,33,29,.6); border:1px solid var(--divider); border-radius:18px; padding:1.2rem; } /* Chai Animation */ .chai-wrap{ position:relative; width:256px; height:256px; margin-inline:auto; } .saucer{ position:absolute; left:50%; transform:translateX(-50%); bottom:8px; width:256px; height:22px; border-radius:999px; background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent 70%); } .cup{ position:absolute; left:50%; transform:translateX(-50%); bottom:48px; width:208px; height:170px; background: var(--espresso); border:1px solid var(--divider); border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; border-top-left-radius: 18px; border-top-right-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.4); } .handle{ position:absolute; right:8px; bottom:96px; width:64px; height:64px; border-radius:50%; border:4px solid var(--divider); } .surface{ position:absolute; left:50%; transform:translateX(-50%); bottom:104px; width:192px; height:48px; border-radius:36px; border:1px solid var(--divider); overflow:hidden; background: radial-gradient(100% 120% at 50% 10%, #E0A96D 0%, #BF6C2A 35%, #7C3F17 100%); } .shine{ position:absolute; inset:0; background: linear-gradient(110deg, transparent 40%, rgba(233,228,218,.25) 50%, transparent 60%); background-size: 200% 100%; animation: shine 4.5s linear infinite; } @keyframes shine { from { background-position: 200% 50%; } to { background-position: -200% 50%; } } .steam{ position:absolute; left:50%; transform: translateX(-50%); top:-40px; opacity:.8; } @keyframes steamFlow { 0%{ stroke-dashoffset: 240; opacity:.25; transform:translateX(0); } 50%{ opacity:.9; transform:translateX(2px);} 100%{ stroke-dashoffset: 0; opacity:.25; transform:translateX(0);} } .steam path{ stroke: url(#steamGrad); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-dasharray: 240; animation: steamFlow 3.6s ease-in-out infinite; } .steam path:nth-child(2){ animation-duration: 3.9s; } .steam path:nth-child(3){ animation-duration: 4.2s; } .bubbles span{ position:absolute; bottom:6px; width:8px; height:8px; border-radius:50%; background: rgba(233,228,218,.35); animation: rise 2.4s ease-out infinite; } @keyframes rise { 0%{ transform: translateY(0) scale(.6); opacity:0; } 25%{ opacity:.7; } 100%{ transform: translateY(-28px) scale(1.05); opacity:0; } } .bubbles span:nth-child(1){ left:10%; animation-delay:.0s } .bubbles span:nth-child(2){ left:22%; animation-delay:.15s } .bubbles span:nth-child(3){ left:34%; animation-delay:.3s } .bubbles span:nth-child(4){ left:46%; animation-delay:.45s } .bubbles span:nth-child(5){ left:58%; animation-delay:.6s } .bubbles span:nth-child(6){ left:70%; animation-delay:.75s } /* Blog */ .posts-grid{ display:grid; gap:1rem; } @media(min-width: 900px){ .posts-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } .post-card{ background:var(--espresso); border:1px solid var(--divider); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--foam); transition: transform .25s ease, box-shadow .25s ease; } .post-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); } .post-thumb{ aspect-ratio: 16/9; width:100%; object-fit: cover; display:block; } .post-body{ padding:1rem; } .post-meta{ font-size:.78rem; color: rgba(233,228,218,.6); } .prose{ max-width: 72ch; } .prose img{ max-width:100%; height:auto; border-radius:14px; border:1px solid var(--divider); } .prose a{ color: var(--cardamom); } /* Footer */ .site-footer{ border-top:1px solid var(--divider); padding-block: 2.5rem; background:var(--basalt); color:var(--foam); } .site-footer .foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } /* --- Patch v1.0.3: header logo + blog formatting --- */ .site-main{ padding-top: 112px; } /* more breathing room under fixed header */ .brand-link, .custom-logo-link{ display:flex; align-items:center; gap:.75rem; text-decoration:none; } .brand-link img, .custom-logo{ height:48px !important; /* bigger logo */ width:auto !important; max-width:190px; object-fit:contain; display:block; } @media (max-width: 420px){ .brand-link img, .custom-logo{ height:40px !important; max-width:160px; } } /* Sections: keep landing full-screen but avoid clipping behind header */ .section{ min-height: 100svh; display:flex; align-items: flex-start; /* was center; caused headings to hide under fixed header */ } .section .inner{ padding-block: 6rem; width:100%; } .section--page{ min-height: auto; } /* blog + normal pages */ /* --- Patch v1.0.4: layout + blog grid + logo left fix --- */ /* Missing container class caused "no margins" on pages */ .container{ width: min(1100px, 92vw); margin-inline: auto; } /* Ensure brand area behaves even when Custom Logo is used */ .site-header .brand{ display:flex; align-items:center; flex: 0 0 auto; } .site-header .brand .custom-logo-link, .site-header .brand .brand-link{ display:flex; align-items:center; gap:.75rem; text-decoration:none; } .site-header .brand .custom-logo, .site-header .brand img{ height: 48px !important; width: auto !important; max-width: 190px; object-fit: contain; display:block; } /* Blog cards were inline (anchor default). Force block so grid behaves. */ .post-card{ display:block; height:100%; } .posts-grid{ display:grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 720px){ .posts-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1024px){ .posts-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } /* Post meta + pagination a bit nicer */ .pagination{ margin-top: 1.25rem; } .pagination .nav-links{ display:flex; gap:.5rem; flex-wrap:wrap; } .pagination a, .pagination span{ display:inline-flex; align-items:center; justify-content:center; padding:.45rem .7rem; border-radius: 10px; border:1px solid var(--divider); text-decoration:none; color: var(--foam); } .pagination .current{ background: rgba(255,255,255,0.06); } /* --- Patch v1.0.5: force header logo left + real margins + blog polish --- */ /* Stronger page margins (even if user pastes full-width HTML) */ .container{ width: min(1100px, 100%); margin-inline: auto; padding-inline: 24px; } /* Header: make sure brand stays on the left */ .site-header .nav-inner{ justify-content: space-between; } .site-header .brand{ margin-right: auto; } /* pushes menu to the right */ .site-header .brand .custom-logo-link, .site-header .brand .brand-link{ display:flex; align-items:center; text-decoration:none; } /* Make the logo larger and consistent */ .site-header .brand .custom-logo, .site-header .brand img{ height: 100px !important; width: auto !important; max-width: 220px; object-fit: contain; display:block; } @media (max-width: 420px){ .site-header .brand .custom-logo, .site-header .brand img{ height: 44px !important; max-width: 180px; } } /* Blog list spacing */ .posts-grid{ margin-top: 1.5rem; } .post-card{ height: 100%; } /* Ensure thumbnails always behave */ .post-thumb{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; } /* --- Patch v1.0.6: booking page styles moved into theme (WP strips