/** * Egypt Holiday Makers — shared component stylesheet * --------------------------------------------------------------------- * Auto-extracted from the 24 approved HTML templates: every rule below is * byte-identical (via tinycss2) across all 24 files, post-unification. * * NOT included here: header / nav / topbar / footer / search-overlay CSS. * Those stay inconsistent across the 24 static files on purpose — they will * be authored ONCE, directly, from the homepage's real markup, when the * header.php / footer.php partials are built. Appending their CSS here then * is expected, not a gap. * * See CLAUDE.md for the unification decisions this file is built on. */ /* ---- design tokens ---- */ :root{--shadow-2:0 1px 2px rgba(7,42,71,.05),0 8px 20px rgba(7,42,71,.07),0 20px 44px rgba(7,42,71,.08); --blue:#0075C3; --deep:#0A3D66; --night:#062338; --ink:#072A47; --cyan:#39B6E6; --gold:#FAB40A; --orange:#F68712; --orange-d:#DC6D1F; --sand:#FDF9F0; --mist:#EAF5FC; --cream:#FEF3D8; --line:#E8E0D0; --soft:#4A6B85; --wa:#1DA851; --fd:"Bricolage Grotesque",sans-serif; --fb:"Plus Jakarta Sans",sans-serif; --sunrise:linear-gradient(90deg,var(--gold),var(--orange) 55%,var(--cyan)); --shadow:0 2px 6px rgba(7,42,71,.06),0 12px 28px rgba(7,42,71,.09); --shadow-h:0 8px 18px rgba(7,42,71,.12),0 26px 52px rgba(7,42,71,.18);} /* ---- Reset & base ---- */ *{margin:0;padding:0;box-sizing:border-box} ::selection{background:var(--gold);color:var(--deep)} ::-webkit-scrollbar{width:12px} ::-webkit-scrollbar-track{background:var(--sand)} ::-webkit-scrollbar-thumb{background:#D8CDB8;border-radius:99px;border:3px solid var(--sand)} html{scroll-behavior:smooth} /* .traveltour-body not bare "body": traveltour-style-custom.css's `.traveltour-body,...,button,select{font-family:"Poppins"}` (specificity 0,1,0) beats a bare `body{}` (0,0,1) outright — not a tie, so source order can't save it. Matching the parent's own class-level scope here is required, not optional; ties on the rest of that rule (bg/color) would resolve fine either way, but keeping one selector for the whole declaration block is clearer than splitting it. */ .traveltour-body{font-family:var(--fb);background:var(--sand);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} /* Systemic, not per-element: `.traveltour-body button/input/select/textarea {font-family:"Poppins"}` matches those tags DIRECTLY, so the `.traveltour- body` fix above (inheritance only) never reaches them — a directly- matching rule always wins over an inherited value, regardless of specificity. Same selector depth as the parent's own rule (0,1,1 each) ties; we load after, so `inherit` here resolves back to .traveltour- body's font-family. This covers every current AND future form element in ehm.css — no more one-off font-family patches per button/input. */ .traveltour-body button,.traveltour-body input,.traveltour-body select,.traveltour-body textarea{font-family:inherit} /* Neutralize the parent theme's forced heading + link styling — but ONLY on our own templates. traveltour-style-custom.css sets, sitewide: .traveltour-body h1..h6 { font-family:"Poppins"; color:#383838 } (0,1,1) .traveltour-body a { color:#f97150 } (0,1,1) Both directly target the element, so they beat inherited colors (our hero H1 inherits white from .hero; a tour-card title link inherits the title's ink) and force Poppins/orange onto our content. Scoping to `body.ehm-tpl` (a class we add only when one of OUR templates renders — see ehm_body_class() in functions.php) means old Goodlayers content on not-yet-rebuilt pages is untouched: verified that the unscoped version bled onto 40 Goodlayers headings on the live front page. `body.ehm-tpl h1` is (0,1,2) > the parent's (0,1,1), so it wins outright, no load-order tie. color:inherit restores the design's own inheritance; section rules that set an explicit heading color are (0,1,1)/(0,2,0) and still win over this. Every heading in the design uses var(--fd), so forcing it is safe. `body.ehm-tpl a{color:inherit}` restores the design's `a{color:inherit}` default for content links; explicitly-coloured links (.arrlink, buttons, topbar/nav/footer) keep their own higher-specificity colours. MUST stay ABOVE component rules. */ /* element reset — ALL at specificity (0,1,1) via `.ehm-tpl X`, placed above every component rule: it BEATS the parent (`.traveltour-body X`, 0,1,1, loaded earlier in tt-custom) purely by load order, and LOSES to our own components (0,1,1+, loaded later in ehm.css/home.css/tour.css) — so it only neutralizes parent bare-element leaks on NEW markup and never overrides a component. `color:inherit` MUST be here at (0,1,1), NOT at `body.ehm-tpl` (0,1,2): the (0,1,2) version beat `.tour-hero h1{color:#fff}` (0,1,1) and turned the tour hero title dark on its photo — proven, then fixed here. */ .ehm-tpl h1,.ehm-tpl h2,.ehm-tpl h3,.ehm-tpl h4,.ehm-tpl h5,.ehm-tpl h6{font-family:var(--fd);color:inherit;font-size:inherit;font-weight:inherit;line-height:1.2;margin:0;letter-spacing:normal} .ehm-tpl a{color:inherit} .ehm-tpl p{margin:0;line-height:inherit} .ehm-tpl ul,.ehm-tpl ol{list-style:none;margin:0;padding:0} .ehm-tpl li{line-height:inherit} .ehm-tpl blockquote{margin:0;padding:0;font-size:inherit;font-style:normal;color:inherit;background:transparent;border:0} .ehm-tpl table{text-align:left;margin:0} .ehm-tpl hr{margin:0} .ehm-tpl figure,.ehm-tpl fieldset,.ehm-tpl dl{margin:0} img{display:block;max-width:100%} a{text-decoration:none;color:inherit} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;border:0;cursor:pointer;border-radius:999px;padding:14px 28px;transition:.2s;line-height:1} .btn svg{width:17px;height:17px;flex:none} /* .traveltour-body prefix on the next 3 base rules: the parent theme's Customizer-generated traveltour-style-custom.css carries `.traveltour-body a{color:#f97150}` and `.traveltour-body button{...}` — specificity (0,1,1), higher than a bare `.btn-primary` (0,1,0), so it was winning regardless of load order. Matching the parent's own scope depth (not !important, not a duplicated class) beats it cleanly. Verified via getComputedStyle on the real rendered front page, not assumed. */ .traveltour-body .btn-primary{background:linear-gradient(180deg,#FF981F,var(--orange) 55%,#EE7E0C);color:#fff;box-shadow:0 6px 16px rgba(246,135,18,.35),inset 0 1px 0 rgba(255,255,255,.35)} .btn-primary:hover{background:linear-gradient(180deg,#F68712,var(--orange-d));transform:translateY(-2px);box-shadow:0 10px 24px rgba(220,109,31,.42),inset 0 1px 0 rgba(255,255,255,.3)} .traveltour-body .btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 16px rgba(29,168,81,.3)} .btn-wa:hover{background:#178A42;transform:translateY(-2px)} .traveltour-body .arrlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--orange)} .arrlink .a{transition:transform .18s} .arrlink:hover .a{transform:translateX(4px)} /* ---- Chips & labels ---- */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)} .eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--sunrise)} .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;background:var(--mist);color:var(--deep)} .stars{color:var(--gold);letter-spacing:2px} /* ---- Tour card ---- */ .tour-card{background:#fff;border:1px solid rgba(7,42,71,.06);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-2);transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;display:flex;flex-direction:column;position:relative} .tour-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-h)} .tc-media{position:relative;aspect-ratio:3/1.9;overflow:hidden} .tc-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(180deg,transparent,rgba(6,35,56,.42));pointer-events:none;z-index:1} .tc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .tour-card:hover .tc-media img{transform:scale(1.06)} /* .traveltour-body prefix — .tc-fav is a