/* ============================================================ JET ATLAS — Electric Atlas (ht-) SHARED CORE Design tokens + brand primitives + page chrome shared by every ht-* Elementor widget. Ported 1:1 from the proven theme stylesheet assets/css/home-two.css so the Elementor rebuild is pixel-identical. - Tokens live on :root (the standalone used .ht-body; widgets can't rely on a body class, so we hoist them globally — they fall back to the theme's --ja-* vars). - Base element resets are scoped to .ht-scope (added on every ht-* widget root) using :where() so they never out-specify widget rules nor leak onto native Elementor widgets on the same page. ============================================================ */ :root { --ht-ink: var(--ja-ink, #0A0A0A); --ht-paper: #FFFFFF; /* primary light bg */ --ht-paper2:#F5F5F2; /* faint neutral off-white for depth */ --ht-white: #FFFFFF; --ht-lime: var(--ja-lime, #DCFF00); --ht-line: rgba(10, 10, 10, 0.12); /* hairline on light */ --ht-line-d: rgba(255, 255, 255, 0.14); /* hairline on dark (footer/hero) */ --ht-mut: rgba(10, 10, 10, 0.58); /* muted on light */ --ht-mut-d: rgba(255, 255, 255, 0.66); /* muted on dark */ --ht-ease: cubic-bezier(0.16, 1, 0.3, 1); --ht-wrap: 1240px; --ht-serif: "Cormorant Garamond", Georgia, serif; --ht-ui: "Outfit", sans-serif; --ht-body: "Inter", sans-serif; --ht-data: "Space Grotesk", sans-serif; } /* ------------------------------------------------------------------ PROD SAFETY NET — Elementor container display fallback. Elementor's frontend.min.css declares `.e-con{display:var(--display)}` with NO fallback; the per-element `--display:flex` lives only in each page's generated CSS. If that file regenerates as a stub (e.g. a CSS cache flush in a degraded context), `--display` is missing and the container falls back to the CSS initial value `inline` — which ignores max-width / margin:auto, so boxed sections lose centering and go full-bleed flush-left. These rules restore Elementor's own defaults (flex column) ONLY when the vars are absent; healthy containers keep their real values. Scoped under .ht-js (on ) to out-specify Elementor by selector weight, no !important needed. */ .ht-js .e-con { display: var(--display, flex); flex-direction: var(--flex-direction, column); } .ht-js .e-con > .e-con-inner { display: var(--display, flex); flex-direction: var(--flex-direction, column); } /* Per-widget root reset (replaces the standalone .ht-body resets). */ .ht-scope { font-family: var(--ht-body); -webkit-font-smoothing: antialiased; } .ht-scope :where(h1, h2, h3, h4) { margin: 0; letter-spacing: normal; } .ht-scope :where(p) { margin: 0; } .ht-scope :where(ul) { margin: 0; padding: 0; list-style: none; } .ht-scope :where(img) { display: block; max-width: 100%; } .ht-scope :where(a) { text-decoration: none; } .ht-scope :where(a):hover { text-decoration: none; } .ht-scope :where(button) { font: inherit; } .ht-wrap { width: min(100% - 2 * clamp(16px, 5vw, 56px), var(--ht-wrap)); margin-inline: auto; } /* Eyebrow = LIME PILL everywhere (the neon signature, always readable) */ .ht-eyebrow, .ht-eyebrow--lime { display: inline-flex; align-items: center; gap: 8px; background: var(--ht-lime); color: var(--ht-ink); padding: 6px 13px; border-radius: 999px; font-family: var(--ht-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } .ht-orb { width: 7px; height: 7px; border-radius: 50%; background: var(--ht-lime); box-shadow: 0 0 0 4px rgba(220,255,0,0.18); } .ht-h2 { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(34px, 5vw, 64px); line-height: 1.03; letter-spacing: -0.01em; color: var(--ht-ink); } .ht-h2 em { font-style: italic; color: var(--ht-ink); text-decoration: underline; text-decoration-color: var(--ht-lime); text-decoration-thickness: 0.12em; text-underline-offset: 0.08em; } .ht-h2--light { color: var(--ht-white); } .ht-h2--light em { color: var(--ht-white); text-decoration-color: var(--ht-lime); } .ht-lead { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.72; color: var(--ht-mut); max-width: 56ch; } /* Dark-section helper — add the `ht-on-dark` CSS class to any ht-* widget whose Style → background is set to ink, to recolour the shared primitives that have no per-element colour control (the section heading, lead, hairlines). Per-widget bits (card surfaces, body copy) extend this in the widget's own stylesheet. */ .ht-on-dark .ht-h2, .ht-on-dark .ht-h2 em { color: var(--ht-white); } .ht-on-dark .ht-lead { color: rgba(255, 255, 255, 0.66); } /* Light lead for a dark section — must OUT-SPECIFY the Elementor kit, which emits `.elementor-widget-text-editor { color: var(--e-global-color-text) }` (dark) into post-N.css AFTER this file. Chaining the widget class wins at (0,2,0). */ .ht-lead--light, .ht-lead--light p, .ht-lead--light.elementor-widget-text-editor, .ht-lead--light.elementor-widget-text-editor p { color: rgba(255, 255, 255, 0.86); } .ht-link { font-family: var(--ht-ui); font-weight: 600; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ht-ink); border-bottom: 2px solid var(--ht-lime); padding-bottom: 3px; transition: opacity .3s; } .ht-link:hover { opacity: 0.6; } /* ============================================================ BUTTONS ============================================================ */ .ht-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 999px; border: 1px solid transparent; font-family: var(--ht-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .35s var(--ht-ease), color .35s var(--ht-ease), border-color .35s var(--ht-ease), transform .35s var(--ht-ease), box-shadow .35s var(--ht-ease); will-change: transform; } .ht-btn span { display: inline-block; } .ht-btn i { font-size: 0.88em; transition: transform .35s var(--ht-ease); } .ht-btn:hover i { transform: translateX(4px); } .ht-btn--sm { padding: 11px 20px; font-size: 11.5px; } .ht-btn--lg { padding: 18px 38px; font-size: 13px; } .ht-btn--lime { background: var(--ht-lime); color: var(--ht-ink); box-shadow: 0 14px 30px -16px rgba(220,255,0,0.6); } .ht-btn--lime:hover { background: #e7ff3a; color: var(--ht-ink); transform: translateY(-3px); box-shadow: 0 22px 46px -16px rgba(220,255,0,0.9); } .ht-btn--ink { background: var(--ht-ink); color: var(--ht-white); } .ht-btn--ink:hover { background: var(--ht-ink); color: var(--ht-lime); transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(10,10,10,0.4); } .ht-btn--ghost { background: transparent; color: var(--ht-white); border-color: rgba(255,255,255,0.45); } .ht-btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--ht-white); border-color: var(--ht-white); transform: translateY(-2px); } .ht-btn--lineink { background: transparent; color: var(--ht-ink); border-color: rgba(10,10,10,0.42); } .ht-btn--lineink:hover { background: var(--ht-ink); color: var(--ht-white); border-color: var(--ht-ink); transform: translateY(-2px); } /* ============================================================ SCROLL PROGRESS + CURSOR (page chrome — rendered by ht-nav) ============================================================ */ .ht-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ht-lime); z-index: 2000; box-shadow: 0 0 12px rgba(220,255,0,0.7); } .admin-bar .ht-progress { top: 32px; } .ht-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; opacity: 0; mix-blend-mode: difference; } .ht-has-cursor .ht-cursor { opacity: 1; } .ht-cursor__dot { position: fixed; width: 7px; height: 7px; border-radius: 50%; background: var(--ht-lime); transform: translate(-50%, -50%); } .ht-cursor__ring { position: fixed; width: 38px; height: 38px; border: 1px solid rgba(140,140,140,0.9); border-radius: 50%; transform: translate(-50%, -50%); transition: width .3s var(--ht-ease), height .3s var(--ht-ease), background .3s var(--ht-ease); } .ht-cursor.is-hover .ht-cursor__ring { width: 60px; height: 60px; background: rgba(120,120,120,0.18); } @media (hover: none) { .ht-cursor { display: none; } } /* ============================================================ REVEAL STATES (gated by .ht-js on ; front-end only so the Elementor editor — which has no .ht-js — shows content statically) ============================================================ */ .ht-js .ht-reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ht-ease), transform .9s var(--ht-ease); } .ht-reveal.is-in { opacity: 1; transform: none; } .ht-js .ht-rise { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ht-ease), transform 1s var(--ht-ease); } /* ============================================================ NATIVE-SECTION HELPERS Applied (via the "CSS Classes" field) to native Elementor Heading / Text widgets in the À propos + Final CTA sections, so those stay natively editable (container bg/padding, widget text) while still getting the brand typography that native controls can't express (lime-underline , the ✦ meta row, the lime-dot tag row). Selectors target Elementor's inner elements too, for robustness. ============================================================ */ .ht-emlime em { font-style: italic; text-decoration: underline; text-decoration-color: var(--ht-lime); text-decoration-thickness: 0.1em; text-underline-offset: 0.1em; } .ht-mani__title, .ht-mani__title.elementor-widget-heading .elementor-heading-title { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(32px,5.2vw,72px); line-height: 1.04; letter-spacing: -0.012em; color: var(--ht-ink); } .ht-mani__title em { font-style: italic; text-decoration: underline; text-decoration-color: var(--ht-lime); text-decoration-thickness: 0.1em; text-underline-offset: 0.1em; } .ht-mani__lead, .ht-mani__lead p { color: var(--ht-mut); font-size: clamp(15px,1.4vw,18px); line-height: 1.72; max-width: 64ch; } .ht-metarow { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font-family: var(--ht-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--ht-mut); } .ht-metarow i { color: var(--ht-ink); font-style: normal; opacity: 0.3; } .ht-tagrow { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; font-family: var(--ht-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: var(--ht-ink); } .ht-tagrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--ht-lime); box-shadow: 0 0 0 1.5px rgba(10,10,10,0.85); display: inline-block; } .ht-final__eyebrow, .ht-final__eyebrow .elementor-heading-title, .ht-final__eyebrow p { font-family: var(--ht-ui); font-size: 12px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: rgba(10,10,10,0.62); } .ht-final__title, .ht-final__title.elementor-widget-heading .elementor-heading-title { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(46px,8vw,116px); line-height: 0.98; color: var(--ht-ink); } .ht-final__title em { font-style: italic; } .ht-final__sub, .ht-final__sub p { color: rgba(10,10,10,0.74); line-height: 1.6; font-size: clamp(15px,1.4vw,18px); max-width: 52ch; margin-inline: auto; } /* light serif title for dark/overlay native sections (restaurant sunset + CTA) */ .ht-title-light, .ht-title-light.elementor-widget-heading .elementor-heading-title { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(40px,7vw,92px); line-height: 1.02; color: #fff; } .ht-title-light em { font-style: italic; color: var(--ht-lime); } /* menu teaser image + hours list (restaurant native sections) */ .ht-shadow img { box-shadow: 0 30px 70px -40px rgba(10,10,10,0.45); } .ht-hours { display: flex; flex-direction: column; max-width: 420px; margin: 6px auto 0; text-align: left; width: 100%; } .ht-hours > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ht-line); } .ht-hours > div:last-child { border-bottom: 0; } .ht-hours span { font-family: var(--ht-ui); font-size: 14px; color: var(--ht-ink); } .ht-hours b { font-family: var(--ht-data); font-weight: 700; font-size: 14px; color: var(--ht-ink); } /* brand logo atop the standalone /la-carte/ hero (page has no site header) */ .ht-carte-logo img { height: 52px; width: auto; max-width: 100%; } /* ht-carte — elegant fine-dining menu index for the restaurant « La carte » teaser (dark section, replaces the flat menu photo). Links out to /la-carte/. */ .ht-carte { width: 100%; max-width: 920px; margin: 14px auto 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(36px,6vw,84px); text-align: left; } .ht-carte__item { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 17px 2px; border-bottom: 1px solid rgba(255,255,255,0.14); } .ht-carte__name { font-family: var(--ht-serif); font-style: italic; font-weight: 500; font-size: clamp(21px,2.1vw,27px); line-height: 1.1; color: #fff; } .ht-carte__desc { flex-shrink: 0; font-family: var(--ht-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.58); text-align: right; } @media (max-width: 768px) { .ht-carte { grid-template-columns: 1fr; gap: 0; max-width: 460px; } } @media (prefers-reduced-motion: reduce) { .ht-js .ht-reveal, .ht-js .ht-rise { opacity: 1 !important; transform: none !important; } .ht-cursor { display: none; } * { scroll-behavior: auto !important; } }