/* HajazCo — built by tools/build-css.mjs. Do not edit.
 * Sources: fonts.css -> tokens.css -> base.css -> lattice.css -> components.css -> search.css
 * Edit wp-content/themes/hajazco-jo/assets/css/*.css instead.
 */

/* fonts.css */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/alexandria-400-700-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/alexandria-400-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/alexandria-400-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/inter-400-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/inter-400-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* tokens.css */
:root {
--hj-green-50: #f1f8f1;
--hj-green-100: #dff0e1;
--hj-green-200: #c3e0c6;
--hj-green-300: #a1caa7;
--hj-green-400: #7aad82;
--hj-green-500: #548d5e;
--hj-green-600: #376f42;
--hj-green-700: #255a30;
--hj-green-800: #154822;
--hj-green-900: #082e12;
--hj-green-950: #031908;
--hj-sand-50: #fdf8f3;
--hj-sand-100: #f8f0e6;
--hj-sand-200: #f0e1ce;
--hj-sand-300: #e4cdb1;
--hj-sand-400: #d4b590;
--hj-sand-500: #c19c70;
--hj-sand-600: #a68254;
--hj-sand-700: #88683f;
--hj-sand-800: #6b502f;
--hj-sand-900: #4d3920;
--hj-sand-950: #302313;
--hj-stone-50: #f7f9fa;
--hj-stone-100: #eff1f4;
--hj-stone-200: #dee2e7;
--hj-stone-300: #cacfd5;
--hj-stone-400: #b2b8bf;
--hj-stone-500: #979da5;
--hj-stone-600: #7a8087;
--hj-stone-700: #5e646a;
--hj-stone-800: #44494f;
--hj-stone-900: #2b2f33;
--hj-stone-950: #15181b;
--hj-success-surface: #ddf8e3;
--hj-success-ink: #00612e;
--hj-success-edge: #098b47;
--hj-success-solid: #006732;
--hj-warning-surface: #fff1df;
--hj-warning-ink: #7a5200;
--hj-warning-edge: #ba7f00;
--hj-warning-solid: #7a5200;
--hj-danger-surface: #ffedeb;
--hj-danger-ink: #8d2521;
--hj-danger-edge: #c83a35;
--hj-danger-solid: #992220;
--hj-info-surface: #e7f4ff;
--hj-info-ink: #075485;
--hj-info-edge: #1c7abb;
--hj-info-solid: #00598f;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--hj-success-surface: #12321c;
--hj-success-ink: #8fedaa;
--hj-success-edge: #1a9951;
--hj-success-solid: #006e35;
--hj-warning-surface: #3c2a0e;
--hj-warning-ink: #ffce88;
--hj-warning-edge: #c98a0e;
--hj-warning-solid: #815700;
--hj-danger-surface: #451e1b;
--hj-danger-ink: #ffbab1;
--hj-danger-edge: #cf4a42;
--hj-danger-solid: #a12623;
--hj-info-surface: #122f46;
--hj-info-ink: #a9d7ff;
--hj-info-edge: #3b89c6;
--hj-info-solid: #005f98;
}
}
:root[data-theme='dark'] {
--hj-success-surface: #12321c;
--hj-success-ink: #8fedaa;
--hj-success-edge: #1a9951;
--hj-success-solid: #006e35;
--hj-warning-surface: #3c2a0e;
--hj-warning-ink: #ffce88;
--hj-warning-edge: #c98a0e;
--hj-warning-solid: #815700;
--hj-danger-surface: #451e1b;
--hj-danger-ink: #ffbab1;
--hj-danger-edge: #cf4a42;
--hj-danger-solid: #a12623;
--hj-info-surface: #122f46;
--hj-info-ink: #a9d7ff;
--hj-info-edge: #3b89c6;
--hj-info-solid: #005f98;
}

/* base.css */
@layer reset, tokens, base, layout, components, utilities;
@layer tokens {
:root {
--hj-font-ar: 'Alexandria', 'Segoe UI', system-ui, sans-serif;
--hj-font-lat: 'Inter', 'Alexandria', system-ui, sans-serif;
--hj-font-body: var(--hj-font-ar);
--hj-font-num: var(--hj-font-body);
--hj-text-3xs: 0.75rem;
--hj-text-2xs: 0.8rem;
--hj-text-xs: 0.875rem;
--hj-text-sm: 0.9375rem;
--hj-text-base: 1rem;
--hj-text-md: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
--hj-text-lg: clamp(1.3rem, 1.16rem + 0.6vw, 1.5625rem);
--hj-text-xl: clamp(1.55rem, 1.3rem + 1.05vw, 1.953rem);
--hj-text-2xl: clamp(1.85rem, 1.42rem + 1.8vw, 2.441rem);
--hj-text-3xl: clamp(2.15rem, 1.5rem + 2.75vw, 3.052rem);
--hj-text-4xl: clamp(2.5rem, 1.5rem + 4.2vw, 3.815rem);
--hj-text-5xl: clamp(2.9rem, 1.4rem + 6.3vw, 4.768rem);
--hj-text-6xl: clamp(3.2rem, 1.1rem + 8.8vw, 5.96rem);
--hj-leading-tight: 1.15;
--hj-leading-snug: 1.3;
--hj-leading-normal: 1.6;
--hj-leading-relaxed: 1.85;
--hj-tracking-display: -0.028em;
--hj-tracking-tight: -0.015em;
--hj-tracking-normal: 0em;
--hj-tracking-label: 0.08em;
--hj-measure: 68ch;
--hj-measure-narrow: 46ch;
--hj-space-1: 0.25rem;
--hj-space-2: 0.5rem;
--hj-space-3: 0.75rem;
--hj-space-4: 1rem;
--hj-space-5: 1.25rem;
--hj-space-6: 1.5rem;
--hj-space-8: 2rem;
--hj-space-10: 2.5rem;
--hj-space-12: 3rem;
--hj-space-16: 4rem;
--hj-space-20: 5rem;
--hj-space-24: 6rem;
--hj-space-32: 8rem;
--hj-space-40: 10rem;
--hj-section-y: clamp(var(--hj-space-16), 9vw, var(--hj-space-32));
--hj-heading-lead: var(--hj-space-12);
--hj-heading-trail: var(--hj-space-5);
--hj-radius-xs: 0.25rem;
--hj-radius-sm: 0.5rem;
--hj-radius-md: 0.75rem;
--hj-radius-lg: 1rem;
--hj-radius-pill: 999rem;
--hj-border: 1px;
--hj-border-thick: 2px;
--hj-rule-hair: 1px;
--hj-rule-mid: 2px;
--hj-rule-heavy: 4px;
--hj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--hj-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--hj-dur-instant: 90ms;
--hj-dur-fast: 160ms;
--hj-dur-base: 280ms;
--hj-dur-slow: 520ms;
--hj-dur-dapple: 24s;
--hj-lattice-pitch-open: 72px;
--hj-lattice-pitch-mid: 52px;
--hj-lattice-pitch-dense: 34px;
--hj-lattice-stroke: 0.085;
}
:root:lang(en),
[lang='en'] {
--hj-font-body: var(--hj-font-lat);
}
:root {
color-scheme: light;
--hj-ground: var(--hj-sand-50);
--hj-surface: #ffffff;
--hj-surface-sunk: var(--hj-sand-100);
--hj-surface-raised: #ffffff;
--hj-ink: var(--hj-stone-900);
--hj-ink-muted: var(--hj-stone-700);
--hj-ink-faint: var(--hj-stone-700);
--hj-ink-on-brand: var(--hj-sand-50);
--hj-brand: var(--hj-green-800);
--hj-brand-hover: var(--hj-green-900);
--hj-brand-soft: var(--hj-green-50);
--hj-brand-ink: var(--hj-green-800);
--hj-wood: var(--hj-sand-700);
--hj-wood-deep: var(--hj-sand-900);
--hj-dapple: var(--hj-sand-300);
--hj-line: var(--hj-sand-200);
--hj-line-strong: var(--hj-sand-400);
--hj-line-brand: var(--hj-green-800);
--hj-focus: var(--hj-green-700);
--hj-selection-bg: var(--hj-green-100);
--hj-selection-ink: var(--hj-green-900);
--hj-shadow-hue: 148deg 55% 6%;
--hj-shadow-1: 0 1px 2px hsl(var(--hj-shadow-hue) / 0.07), 0 2px 6px hsl(var(--hj-shadow-hue) / 0.05);
--hj-shadow-2: 0 2px 4px hsl(var(--hj-shadow-hue) / 0.07), 0 8px 20px hsl(var(--hj-shadow-hue) / 0.08);
--hj-shadow-3: 0 4px 8px hsl(var(--hj-shadow-hue) / 0.08), 0 18px 44px hsl(var(--hj-shadow-hue) / 0.11);
}
}
@layer tokens {
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
color-scheme: dark;
--hj-ground: var(--hj-green-950);
--hj-surface: var(--hj-green-900);
--hj-surface-sunk: #021206;
--hj-surface-raised: #0c3a19;
--hj-ink: var(--hj-sand-100);
--hj-ink-muted: var(--hj-sand-300);
--hj-ink-faint: var(--hj-sand-400);
--hj-ink-on-brand: var(--hj-green-950);
--hj-brand: var(--hj-green-300);
--hj-brand-hover: var(--hj-green-200);
--hj-brand-soft: #0c3a19;
--hj-brand-ink: var(--hj-green-300);
--hj-wood: var(--hj-sand-400);
--hj-wood-deep: var(--hj-sand-600);
--hj-dapple: var(--hj-sand-500);
--hj-line: #1b4d29;
--hj-line-strong: var(--hj-green-700);
--hj-line-brand: var(--hj-green-300);
--hj-focus: var(--hj-sand-300);
--hj-selection-bg: var(--hj-green-700);
--hj-selection-ink: var(--hj-sand-50);
--hj-shadow-hue: 148deg 60% 2%;
--hj-shadow-1: 0 1px 2px hsl(var(--hj-shadow-hue) / 0.5), 0 2px 6px hsl(var(--hj-shadow-hue) / 0.4);
--hj-shadow-2: 0 2px 4px hsl(var(--hj-shadow-hue) / 0.5), 0 8px 20px hsl(var(--hj-shadow-hue) / 0.45);
--hj-shadow-3: 0 4px 8px hsl(var(--hj-shadow-hue) / 0.55), 0 18px 44px hsl(var(--hj-shadow-hue) / 0.5);
}
}
:root[data-theme='dark'] {
color-scheme: dark;
--hj-ground: var(--hj-green-950);
--hj-surface: var(--hj-green-900);
--hj-surface-sunk: #021206;
--hj-surface-raised: #0c3a19;
--hj-ink: var(--hj-sand-100);
--hj-ink-muted: var(--hj-sand-300);
--hj-ink-faint: var(--hj-sand-400);
--hj-ink-on-brand: var(--hj-green-950);
--hj-brand: var(--hj-green-300);
--hj-brand-hover: var(--hj-green-200);
--hj-brand-soft: #0c3a19;
--hj-brand-ink: var(--hj-green-300);
--hj-wood: var(--hj-sand-400);
--hj-wood-deep: var(--hj-sand-600);
--hj-dapple: var(--hj-sand-500);
--hj-line: #1b4d29;
--hj-line-strong: var(--hj-green-700);
--hj-line-brand: var(--hj-green-300);
--hj-focus: var(--hj-sand-300);
--hj-selection-bg: var(--hj-green-700);
--hj-selection-ink: var(--hj-sand-50);
--hj-shadow-hue: 148deg 60% 2%;
--hj-shadow-1: 0 1px 2px hsl(var(--hj-shadow-hue) / 0.5), 0 2px 6px hsl(var(--hj-shadow-hue) / 0.4);
--hj-shadow-2: 0 2px 4px hsl(var(--hj-shadow-hue) / 0.5), 0 8px 20px hsl(var(--hj-shadow-hue) / 0.45);
--hj-shadow-3: 0 4px 8px hsl(var(--hj-shadow-hue) / 0.55), 0 18px 44px hsl(var(--hj-shadow-hue) / 0.5);
}
}
@layer reset {
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-block-start: var(--hj-space-24);
}
body {
min-block-size: 100svb;
background-color: var(--hj-ground);
color: var(--hj-ink);
font-family: var(--hj-font-body);
font-size: var(--hj-text-base);
line-height: var(--hj-leading-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'calt' 1, 'liga' 1;
}
img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role='list'], ol[role='list'] { list-style: none; padding-inline-start: 0; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
}
@layer base {
::selection {
background-color: var(--hj-selection-bg);
color: var(--hj-selection-ink);
}
:root {
accent-color: var(--hj-brand);
caret-color: var(--hj-brand);
scrollbar-color: var(--hj-line-strong) transparent;
scrollbar-width: thin;
}
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background-color: var(--hj-line-strong);
border-radius: var(--hj-radius-pill);
border: 2px solid var(--hj-ground);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--hj-wood); }
:focus-visible {
outline: var(--hj-border-thick) solid var(--hj-focus);
outline-offset: 3px;
border-radius: var(--hj-radius-xs);
}
:focus:not(:focus-visible) { outline: none; }
a {
color: var(--hj-brand-ink);
text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
transition: text-decoration-color var(--hj-dur-fast) var(--hj-ease-out),
color var(--hj-dur-fast) var(--hj-ease-out);
}
a:hover { text-decoration-color: currentColor; }
.hj-num,
:where(td, th)[data-num],
output {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
:where(code, kbd, samp, pre, var) {
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
font-size: 0.88em;
direction: ltr;
unicode-bidi: isolate;
}
:where(code):not(pre code) {
background-color: var(--hj-surface-sunk);
padding-inline: 0.34em;
padding-block: 0.12em;
border-radius: var(--hj-radius-xs);
}
bdi,
.hj-ltr {
direction: ltr;
unicode-bidi: isolate;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: var(--hj-leading-tight);
letter-spacing: var(--hj-tracking-tight);
color: var(--hj-ink);
}
h1 { font-size: var(--hj-text-4xl); letter-spacing: var(--hj-tracking-display); }
h2 { font-size: var(--hj-text-2xl); }
h3 { font-size: var(--hj-text-lg); }
h4 { font-size: var(--hj-text-md); }
h5, h6 { font-size: var(--hj-text-base); }
:lang(ar) :where(h1, h2, h3, h4, h5, h6) {
letter-spacing: var(--hj-tracking-normal);
line-height: var(--hj-leading-snug);
}
:where(p, li) { max-inline-size: var(--hj-measure); }
:lang(ar) :where(p, li) { line-height: var(--hj-leading-relaxed); }
:where(h2, h3, h4) { margin-block-start: var(--hj-heading-lead); margin-block-end: var(--hj-heading-trail); }
:where(p, ul, ol, figure, table) + :where(p, ul, ol, figure, table) { margin-block-start: var(--hj-space-5); }
hr {
border: 0;
block-size: var(--hj-rule-hair);
background-color: var(--hj-line);
margin-block: var(--hj-space-12);
}
}
@layer layout {
.hj-shell {
inline-size: min(100% - 2 * var(--hj-space-5), 78rem);
margin-inline: auto;
}
.hj-shell--narrow { inline-size: min(100% - 2 * var(--hj-space-5), 46rem); }
.hj-shell--wide { inline-size: min(100% - 2 * var(--hj-space-4), 96rem); }
.hj-section { padding-block: var(--hj-section-y); }
.hj-stack { display: flex; flex-direction: column; gap: var(--hj-gap, var(--hj-space-5)); }
.hj-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hj-gap, var(--hj-space-4)); }
.hj-grid {
display: grid;
gap: var(--hj-gap, var(--hj-space-6));
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hj-col, 19rem)), 1fr));
}
.hj-skip-link {
position: absolute;
inset-block-start: var(--hj-space-2);
inset-inline-start: var(--hj-space-2);
z-index: 100;
padding: var(--hj-space-3) var(--hj-space-5);
background-color: var(--hj-brand);
color: var(--hj-ink-on-brand);
border-radius: var(--hj-radius-sm);
transform: translateY(-200%);
transition: transform var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-skip-link:focus-visible { transform: translateY(0); }
}
@layer utilities {
.hj-visually-hidden:not(:focus):not(:active) {
clip-path: inset(50%);
block-size: 1px;
inline-size: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
.hj-label {
font-size: var(--hj-text-2xs);
font-weight: 600;
letter-spacing: var(--hj-tracking-label);
text-transform: uppercase;
color: var(--hj-ink-faint);
}
:lang(ar) .hj-label { text-transform: none; letter-spacing: var(--hj-tracking-normal); }
.hj-measure { max-inline-size: var(--hj-measure); }
.hj-measure-narrow { max-inline-size: var(--hj-measure-narrow); }
}
.is-layout-constrained > .hj-shell,
.is-layout-constrained > .hj-shell--narrow,
.is-layout-constrained > .hj-shell--wide {
max-width: none;
}

/* lattice.css */
@layer components {
:root {
--hj-lattice-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='9'/%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3Ccircle cx='40' cy='0' r='9'/%3E%3Ccircle cx='0' cy='40' r='9'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3Cpath d='M13.64 13.64 6.36 6.36M26.36 13.64 33.64 6.36M13.64 26.36 6.36 33.64M26.36 26.36 33.64 33.64'/%3E%3Cpath d='M9 0h22M9 40h22M0 9v22M40 9v22'/%3E%3C/g%3E%3C/svg%3E");
}
.hj-lattice {
--hj-lattice-pitch: var(--hj-lattice-pitch-mid);
background-color: var(--hj-lattice-ink, var(--hj-wood));
-webkit-mask-image: var(--hj-lattice-tile);
mask-image: var(--hj-lattice-tile);
-webkit-mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
.hj-lattice--open { --hj-lattice-pitch: var(--hj-lattice-pitch-open); }
.hj-lattice--mid { --hj-lattice-pitch: var(--hj-lattice-pitch-mid); }
.hj-lattice--dense { --hj-lattice-pitch: var(--hj-lattice-pitch-dense); }
@media (max-width: 40rem) {
:root {
--hj-lattice-pitch-open: 56px;
--hj-lattice-pitch-mid: 44px;
--hj-lattice-pitch-dense: 30px;
}
}
.hj-screen {
position: relative;
overflow: clip;
background-color: var(--hj-green-900);
isolation: isolate;
}
.hj-screen__lattice {
position: absolute;
inset: 0;
z-index: 1;
--hj-lattice-ink: var(--hj-wood);
opacity: 0.9;
}
.hj-screen__dapple {
position: absolute;
inset-block: -30%;
inset-inline: -25%;
z-index: 0;
pointer-events: none;
background: radial-gradient(
55% 60% at 50% 50%,
color-mix(in oklab, var(--hj-dapple) 70%, transparent) 0%,
color-mix(in oklab, var(--hj-dapple) 24%, transparent) 45%,
transparent 72%
);
filter: blur(22px);
animation: hj-dapple-drift var(--hj-dur-dapple) var(--hj-ease-in-out) infinite alternate;
}
@keyframes hj-dapple-drift {
from { transform: translate3d(-30%, -4%, 0) rotate(-4deg); opacity: 0.6; }
to { transform: translate3d(30%, 4%, 0) rotate(4deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hj-screen__dapple {
animation: none;
transform: translate3d(0, 0, 0);
opacity: 0.8;
}
}
.hj-divider {
--hj-lattice-pitch: var(--hj-lattice-pitch-mid);
--hj-lattice-ink: var(--hj-line-strong);
block-size: var(--hj-lattice-pitch-mid);
border: 0;
margin-block: var(--hj-space-16);
background-color: var(--hj-lattice-ink);
-webkit-mask-image: var(--hj-lattice-tile);
mask-image: var(--hj-lattice-tile);
-webkit-mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
opacity: 0.55;
}
.hj-veil {
position: relative;
display: grid;
place-items: center;
gap: var(--hj-space-4);
min-block-size: 8rem;
padding: var(--hj-space-6);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-md);
background-color: var(--hj-surface-sunk);
overflow: clip;
isolation: isolate;
}
.hj-veil::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
--hj-lattice-pitch: var(--hj-lattice-pitch-dense);
background-color: var(--hj-wood);
opacity: 0.28;
-webkit-mask-image: var(--hj-lattice-tile);
mask-image: var(--hj-lattice-tile);
-webkit-mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
.hj-veil > * { position: relative; z-index: 1; text-align: center; }
.hj-opening {
position: relative;
padding: var(--hj-space-5);
border-radius: var(--hj-radius-lg);
background-color: var(--hj-surface);
box-shadow: var(--hj-shadow-2);
}
.hj-opening::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
--hj-lattice-pitch: var(--hj-lattice-pitch-dense);
background-color: var(--hj-wood);
opacity: 0.16;
-webkit-mask-image: var(--hj-lattice-tile);
mask-image: var(--hj-lattice-tile);
-webkit-mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
transition: opacity var(--hj-dur-base) var(--hj-ease-out),
-webkit-mask-size var(--hj-dur-base) var(--hj-ease-out),
mask-size var(--hj-dur-base) var(--hj-ease-out);
}
.hj-opening:focus-within::before {
opacity: 0.06;
--hj-lattice-pitch: var(--hj-lattice-pitch-open);
}
.hj-opening > * { position: relative; z-index: 1; }
@supports not ((mask-image: url('#')) or (-webkit-mask-image: url('#'))) {
.hj-lattice, .hj-veil::before, .hj-opening::before, .hj-divider { background-color: transparent; }
.hj-divider { block-size: var(--hj-rule-hair); background-color: var(--hj-line); opacity: 1; }
}
}

/* components.css */
@layer components {
.hj-site-header {
position: sticky;
inset-block-start: 0;
z-index: 60;
background-color: color-mix(in oklab, var(--hj-green-950) 96%, var(--hj-green-900));
color: var(--hj-sand-100);
box-shadow: var(--hj-shadow-2);
}
.hj-site-header__top {
border-block-end: var(--hj-rule-hair) solid color-mix(in oklab, var(--hj-sand-50) 14%, transparent);
background-color: color-mix(in oklab, var(--hj-green-950) 88%, var(--hj-green-900));
}
.hj-site-header__top-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hj-space-4);
min-block-size: 2.55rem;
}
.hj-site-header__quick {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hj-space-1);
min-inline-size: 0;
}
.hj-site-header__quick a {
display: inline-flex;
align-items: center;
gap: var(--hj-space-2);
min-block-size: 2rem;
padding-inline: var(--hj-space-2);
color: color-mix(in oklab, var(--hj-sand-50) 86%, transparent);
text-decoration: none;
font-size: var(--hj-text-xs);
font-weight: 700;
white-space: nowrap;
}
.hj-site-header__quick a:hover {
color: var(--hj-sand-50);
text-decoration: none;
}
.hj-site-header__quick a + a {
border-inline-start: var(--hj-rule-hair) solid color-mix(in oklab, var(--hj-sand-50) 18%, transparent);
}
.hj-site-header__quick .hj-icon {
color: var(--hj-wood);
}
.hj-site-header__quick--end {
justify-content: flex-end;
}
.hj-site-header__stage {
padding-block: var(--hj-space-3);
background:
linear-gradient(90deg, color-mix(in oklab, var(--hj-green-950) 88%, transparent), color-mix(in oklab, var(--hj-green-900) 76%, transparent)),
color-mix(in oklab, var(--hj-green-950) 94%, var(--hj-green-900));
}
.hj-site-header__rail,
.hj-site-footer__rail {
block-size: 0.5rem;
--hj-lattice-ink: var(--hj-wood);
opacity: 0.82;
}
.hj-site-header__bar {
display: grid;
grid-template-columns: minmax(13rem, auto) minmax(0, 1fr) auto;
align-items: center;
gap: var(--hj-space-5);
padding-block: var(--hj-space-3);
padding-inline: var(--hj-space-5);
border: var(--hj-rule-hair) solid color-mix(in oklab, var(--hj-sand-50) 16%, transparent);
border-radius: var(--hj-radius-pill);
background-color: color-mix(in oklab, var(--hj-green-900) 74%, transparent);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.hj-brand-lockup {
display: inline-flex;
align-items: center;
gap: var(--hj-space-3);
color: var(--hj-ink);
text-decoration: none;
min-inline-size: 0;
}
.hj-brand-lockup:hover { color: var(--hj-brand-ink); text-decoration: none; }
.hj-brand-lockup__mark {
inline-size: clamp(9.5rem, 14vw, 12.5rem);
block-size: auto;
flex: 0 0 auto;
}
.hj-brand-lockup__text {
display: none;
flex-direction: column;
gap: var(--hj-space-1);
min-inline-size: 0;
line-height: var(--hj-leading-tight);
}
.hj-brand-lockup__text strong {
color: var(--hj-brand-ink);
font-size: var(--hj-text-md);
font-weight: 700;
}
.hj-brand-lockup__text span {
color: var(--hj-ink-faint);
font-size: var(--hj-text-2xs);
font-weight: 700;
letter-spacing: var(--hj-tracking-label);
text-transform: uppercase;
}
:lang(ar) .hj-brand-lockup__text span {
letter-spacing: var(--hj-tracking-normal);
text-transform: none;
}
.hj-site-nav {
display: flex;
justify-content: center;
gap: var(--hj-space-1);
min-inline-size: 0;
}
.hj-site-nav a,
.hj-site-actions__partner,
.hj-site-actions__account {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: 2.75rem;
padding-block: var(--hj-space-2);
padding-inline: var(--hj-space-4);
border-radius: var(--hj-radius-pill);
color: color-mix(in oklab, var(--hj-sand-50) 76%, transparent);
text-decoration: none;
font-size: var(--hj-text-sm);
font-weight: 700;
white-space: nowrap;
transition: background-color var(--hj-dur-fast) var(--hj-ease-out),
color var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-site-nav a.is-current {
background-color: var(--hj-sand-400);
color: var(--hj-green-950);
box-shadow: 0 0.85rem 1.4rem color-mix(in oklab, var(--hj-wood) 32%, transparent);
}
.hj-site-nav a:hover {
background-color: color-mix(in oklab, var(--hj-sand-50) 10%, transparent);
color: var(--hj-sand-50);
}
.hj-site-actions {
display: inline-flex;
align-items: center;
justify-content: end;
gap: var(--hj-space-2);
min-inline-size: max-content;
}
.hj-site-actions__partner {
background-color: color-mix(in oklab, var(--hj-sand-50) 16%, transparent);
color: var(--hj-sand-50);
}
.hj-site-actions__account { display: none; }
.hj-site-actions__partner:hover {
background-color: var(--hj-brand);
color: var(--hj-ink-on-brand);
}
.hj-site-theme-toggle {
inline-size: auto;
min-inline-size: 5.25rem;
min-block-size: 2.75rem;
padding-inline: var(--hj-space-3);
border-color: color-mix(in oklab, var(--hj-sand-50) 20%, transparent);
background-color: color-mix(in oklab, var(--hj-green-950) 22%, transparent);
color: var(--hj-sand-100);
}
.hj-site-theme-toggle .hj-icon {
color: var(--hj-wood);
}
.hj-site-header .hj-btn--ghost:hover {
background-color: color-mix(in oklab, var(--hj-sand-50) 10%, transparent);
color: var(--hj-sand-50);
}
.hj-site-theme-toggle span {
display: inline;
font-size: var(--hj-text-xs);
font-weight: 700;
}
.hj-site-footer {
margin-block-start: var(--hj-space-20);
background-color: var(--hj-surface);
border-block-start: var(--hj-rule-hair) solid var(--hj-line);
}
.hj-site-footer__inner {
display: grid;
grid-template-columns: minmax(18rem, 1.4fr) repeat(3, minmax(10rem, 1fr));
gap: var(--hj-space-8);
padding-block: var(--hj-space-12);
}
.hj-site-footer__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--hj-space-5);
}
.hj-site-footer__brand p {
margin: 0;
color: var(--hj-ink-muted);
font-size: var(--hj-text-sm);
}
.hj-site-footer__contact {
display: flex;
flex-wrap: wrap;
gap: var(--hj-space-2);
}
.hj-site-footer__contact a {
display: inline-flex;
align-items: center;
gap: var(--hj-space-2);
min-block-size: 2.75rem;
padding-block: var(--hj-space-2);
padding-inline: var(--hj-space-3);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-pill);
color: var(--hj-ink-muted);
text-decoration: none;
font-size: var(--hj-text-xs);
font-weight: 700;
}
.hj-site-footer__contact a:hover {
border-color: var(--hj-line-brand);
color: var(--hj-brand-ink);
background-color: var(--hj-brand-soft);
}
.hj-site-footer__nav {
padding-block-start: var(--hj-space-2);
}
.hj-site-footer__nav h2 {
margin: 0 0 var(--hj-space-4);
color: var(--hj-ink);
font-size: var(--hj-text-sm);
}
.hj-footer-links {
display: flex;
flex-direction: column;
gap: var(--hj-space-2);
margin: 0;
padding: 0;
}
.hj-footer-links--dense {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hj-footer-links a {
color: var(--hj-ink-muted);
text-decoration: none;
font-size: var(--hj-text-sm);
font-weight: 600;
}
.hj-footer-links a:hover {
color: var(--hj-brand-ink);
text-decoration: underline;
}
.hj-site-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--hj-space-4);
padding-block: var(--hj-space-5);
border-block-start: var(--hj-rule-hair) solid var(--hj-line);
color: var(--hj-ink-faint);
font-size: var(--hj-text-xs);
}
.hj-site-footer__legal p {
margin: 0;
max-inline-size: 42rem;
}
@media (max-width: 64rem) {
.hj-site-header__top-inner {
align-items: flex-start;
flex-direction: column;
gap: 0;
padding-block: var(--hj-space-2);
}
.hj-site-header__quick--end {
justify-content: flex-start;
}
.hj-site-header__bar {
grid-template-columns: 1fr auto;
border-radius: var(--hj-radius-lg);
}
.hj-site-nav {
grid-column: 1 / -1;
justify-content: flex-start;
overflow-x: auto;
padding-block: var(--hj-space-1);
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hj-space-6), #000 calc(100% - var(--hj-space-6)), transparent);
mask-image: linear-gradient(to right, transparent, #000 var(--hj-space-6), #000 calc(100% - var(--hj-space-6)), transparent);
}
.hj-site-nav::-webkit-scrollbar { display: none; }
.hj-site-footer__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hj-site-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 44rem) {
.hj-site-header__top {
display: none;
}
.hj-site-header__stage {
padding-block: var(--hj-space-2);
}
.hj-site-header__bar {
gap: var(--hj-space-3);
padding-block: var(--hj-space-2);
padding-inline: var(--hj-space-3);
}
.hj-brand-lockup__mark {
inline-size: clamp(9.5rem, 50vw, 11.5rem);
block-size: auto;
}
.hj-brand-lockup__text strong {
font-size: var(--hj-text-base);
}
.hj-brand-lockup__text span {
font-size: var(--hj-text-3xs);
}
.hj-site-nav {
margin-inline: calc(-1 * var(--hj-space-5));
padding-inline: var(--hj-space-5);
}
.hj-site-actions__partner {
padding-inline: var(--hj-space-3);
font-size: var(--hj-text-xs);
}
.hj-site-actions__account {
display: inline-flex;
gap: var(--hj-space-1);
padding-inline: var(--hj-space-3);
font-size: var(--hj-text-xs);
}
.hj-site-footer__inner {
grid-template-columns: 1fr;
padding-block: var(--hj-space-10);
}
.hj-footer-links--dense {
grid-template-columns: 1fr;
}
.hj-site-footer__legal {
flex-direction: column;
}
}
@media (max-width: 36rem) {
.hj-site-header__bar {
grid-template-columns: 1fr;
}
.hj-site-actions {
justify-content: flex-start;
min-inline-size: 0;
}
.hj-brand-lockup__mark {
inline-size: min(100%, 11rem);
}
}
.hj-icon {
inline-size: 1.25em;
block-size: 1.25em;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.hj-icon--sm { inline-size: 1em; block-size: 1em; }
.hj-icon--lg { inline-size: 1.75em; block-size: 1.75em; stroke-width: 1.4; }
.hj-icon--brand { fill: currentColor; stroke: none; }
:dir(rtl) .hj-icon--dir { transform: scaleX(-1); }
.hj-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--hj-space-2);
padding-block: var(--hj-space-3);
padding-inline: var(--hj-space-6);
min-block-size: 2.75rem;
border: var(--hj-border) solid transparent;
border-radius: var(--hj-radius-sm);
font-size: var(--hj-text-sm);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color var(--hj-dur-fast) var(--hj-ease-out),
border-color var(--hj-dur-fast) var(--hj-ease-out),
color var(--hj-dur-fast) var(--hj-ease-out),
transform var(--hj-dur-instant) var(--hj-ease-out);
}
.hj-btn:active { transform: translateY(1px); }
.hj-btn--primary {
background-color: var(--hj-brand);
color: var(--hj-ink-on-brand);
}
.hj-btn--primary:hover { background-color: var(--hj-brand-hover); }
.hj-btn--secondary {
background-color: transparent;
border-color: var(--hj-line-brand);
color: var(--hj-brand-ink);
}
.hj-btn--secondary:hover { background-color: var(--hj-brand-soft); }
.hj-btn--ghost {
background-color: transparent;
color: var(--hj-ink-muted);
padding-inline: var(--hj-space-4);
}
.hj-btn--ghost:hover { background-color: var(--hj-surface-sunk); color: var(--hj-ink); }
.hj-btn--danger {
background-color: var(--hj-danger-solid);
color: #ffffff;
}
.hj-btn--lg { padding-block: var(--hj-space-4); padding-inline: var(--hj-space-8); font-size: var(--hj-text-base); }
.hj-btn--sm { padding-block: var(--hj-space-2); padding-inline: var(--hj-space-4); min-block-size: 2.25rem; font-size: var(--hj-text-xs); }
.hj-btn[disabled],
.hj-btn[aria-disabled='true'] {
cursor: not-allowed;
opacity: 0.55;
background-color: var(--hj-surface-sunk);
border-color: var(--hj-line);
color: var(--hj-ink-muted);
transform: none;
}
.hj-btn[data-loading='true'] { cursor: progress; pointer-events: none; }
.hj-btn[data-loading='true'] .hj-btn__spinner { display: block; }
.hj-btn__spinner { display: none; inline-size: 1em; block-size: 1em; }
.hj-btn__spinner circle {
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-dasharray: 46 18;
transform-origin: center;
animation: hj-spin 900ms linear infinite;
}
@keyframes hj-spin { to { transform: rotate(360deg); } }
.hj-field { display: flex; flex-direction: column; gap: var(--hj-space-2); }
.hj-field__label {
font-size: var(--hj-text-sm);
font-weight: 600;
color: var(--hj-ink);
}
.hj-field__required { color: var(--hj-danger-ink); font-weight: 400; }
.hj-field__hint {
font-size: var(--hj-text-xs);
color: var(--hj-ink-muted);
}
.hj-input,
.hj-select,
.hj-textarea {
inline-size: 100%;
padding-block: var(--hj-space-3);
padding-inline: var(--hj-space-4);
min-block-size: 2.75rem;
background-color: var(--hj-surface);
color: var(--hj-ink);
border: var(--hj-border) solid var(--hj-line-strong);
border-radius: var(--hj-radius-xs);
transition: border-color var(--hj-dur-fast) var(--hj-ease-out),
background-color var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-textarea { min-block-size: 7rem; resize: vertical; }
.hj-input::placeholder,
.hj-textarea::placeholder { color: var(--hj-ink-muted); opacity: 1; }
.hj-input:hover,
.hj-select:hover,
.hj-textarea:hover { border-color: var(--hj-wood); }
.hj-select { appearance: none; padding-inline-end: var(--hj-space-10); }
.hj-select-shell { position: relative; display: block; }
.hj-select-shell::after {
content: '';
position: absolute;
inset-inline-end: var(--hj-space-4);
inset-block-start: 50%;
inline-size: 1.15em;
block-size: 1.15em;
translate: 0 -50%;
pointer-events: none;
background-color: var(--hj-ink-muted);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.hj-input[aria-invalid='true'],
.hj-select[aria-invalid='true'],
.hj-textarea[aria-invalid='true'] {
border-color: var(--hj-danger-edge);
border-width: var(--hj-border-thick);
background-color: var(--hj-danger-surface);
color: var(--hj-danger-ink);
caret-color: var(--hj-danger-ink);
}
.hj-input[aria-invalid='true']::placeholder,
.hj-textarea[aria-invalid='true']::placeholder {
color: color-mix(in oklab, var(--hj-danger-ink) 70%, transparent);
}
.hj-field__error {
display: flex;
align-items: flex-start;
gap: var(--hj-space-2);
font-size: var(--hj-text-xs);
font-weight: 600;
color: var(--hj-danger-ink);
}
.hj-input[disabled],
.hj-select[disabled],
.hj-textarea[disabled] {
background-color: var(--hj-surface-sunk);
color: var(--hj-ink-muted);
cursor: not-allowed;
}
.wp-block-search__inside-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--hj-space-2);
border: 0;
padding: 0;
}
.wp-block-search__label {
display: block;
margin-block-end: var(--hj-space-2);
font-size: var(--hj-text-sm);
font-weight: 600;
color: var(--hj-ink-muted);
}
.wp-block-search__input {
flex: 1 1 12rem;
padding-block: var(--hj-space-3);
padding-inline: var(--hj-space-4);
min-block-size: 2.75rem;
background-color: var(--hj-surface);
color: var(--hj-ink);
border: var(--hj-border) solid var(--hj-line-strong);
border-radius: var(--hj-radius-xs);
}
.wp-block-search__input:hover { border-color: var(--hj-wood); }
.wp-block-search__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding-block: var(--hj-space-3);
padding-inline: var(--hj-space-6);
min-block-size: 2.75rem;
border: var(--hj-border) solid transparent;
border-radius: var(--hj-radius-sm);
background-color: var(--hj-brand);
color: var(--hj-ink-on-brand);
font-size: var(--hj-text-sm);
font-weight: 600;
cursor: pointer;
}
.wp-block-search__button:hover { background-color: var(--hj-brand-hover); }
.hj-choice { display: flex; flex-wrap: wrap; gap: var(--hj-space-3); }
.hj-choice__option {
display: inline-flex;
align-items: center;
gap: var(--hj-space-2);
padding-block: var(--hj-space-2);
padding-inline: var(--hj-space-4);
min-block-size: 2.5rem;
border: var(--hj-border-thick) dashed var(--hj-line-strong);
border-radius: var(--hj-radius-pill);
background-color: transparent;
color: var(--hj-ink-muted);
font-size: var(--hj-text-sm);
font-weight: 600;
cursor: pointer;
transition: border-color var(--hj-dur-fast) var(--hj-ease-out),
color var(--hj-dur-fast) var(--hj-ease-out),
background-color var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-choice__option:hover { color: var(--hj-ink); border-color: var(--hj-wood); }
.hj-choice__option:has(input:focus-visible) {
outline: var(--hj-border-thick) solid var(--hj-focus);
outline-offset: 3px;
}
.hj-choice__option[aria-pressed='true'],
.hj-choice__option[aria-selected='true'],
.hj-choice__option:has(input:checked) {
border-style: solid;
border-color: var(--hj-brand);
background-color: var(--hj-brand-soft);
color: var(--hj-brand-ink);
}
.hj-card {
display: flex;
flex-direction: column;
background-color: var(--hj-surface);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-md);
overflow: clip;
transition: border-color var(--hj-dur-base) var(--hj-ease-out),
transform var(--hj-dur-base) var(--hj-ease-out);
}
.hj-card:hover { border-color: var(--hj-line-brand); transform: translateY(-2px); }
.hj-card:focus-within { border-color: var(--hj-line-brand); }
.hj-card__media {
aspect-ratio: 3 / 2;
background-color: var(--hj-surface-sunk);
}
.hj-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hj-card__body {
display: flex;
flex-direction: column;
gap: var(--hj-space-3);
padding: var(--hj-space-5);
flex: 1;
}
.hj-card__title { font-size: var(--hj-text-md); margin: 0; }
.hj-card__ref {
font-size: var(--hj-text-2xs);
font-weight: 600;
letter-spacing: var(--hj-tracking-label);
color: var(--hj-ink-faint);
font-variant-numeric: tabular-nums lining-nums;
}
.hj-price { display: flex; flex-direction: column; gap: var(--hj-space-1); }
.hj-price__amount {
font-size: var(--hj-text-xl);
font-weight: 700;
line-height: 1.1;
color: var(--hj-ink);
font-variant-numeric: tabular-nums lining-nums;
}
.hj-price__unit { font-size: var(--hj-text-xs); font-weight: 400; color: var(--hj-ink-muted); }
.hj-price__secondary { font-size: var(--hj-text-xs); color: var(--hj-ink-faint); font-variant-numeric: tabular-nums; }
.hj-price[data-state='net'] .hj-price__amount { color: var(--hj-brand-ink); }
.hj-price[data-state='net']::before {
content: '';
display: block;
inline-size: var(--hj-space-10);
block-size: var(--hj-rule-heavy);
background-color: var(--hj-brand);
margin-block-end: var(--hj-space-2);
}
.hj-badge {
display: inline-flex;
align-items: center;
gap: var(--hj-space-2);
padding-block: var(--hj-space-1);
padding-inline: var(--hj-space-3);
border-radius: var(--hj-radius-pill);
font-size: var(--hj-text-2xs);
font-weight: 700;
line-height: 1.5;
background-color: var(--hj-surface-sunk);
color: var(--hj-ink-muted);
}
.hj-badge--success { background-color: var(--hj-success-surface); color: var(--hj-success-ink); }
.hj-badge--warning { background-color: var(--hj-warning-surface); color: var(--hj-warning-ink); }
.hj-badge--danger { background-color: var(--hj-danger-surface); color: var(--hj-danger-ink); }
.hj-badge--info { background-color: var(--hj-info-surface); color: var(--hj-info-ink); }
.hj-alert {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--hj-space-3) var(--hj-space-4);
padding: var(--hj-space-5);
border-radius: var(--hj-radius-md);
border-inline-start: var(--hj-rule-hair) solid var(--hj-line);
background-color: var(--hj-surface-sunk);
color: var(--hj-ink);
}
.hj-alert__title { font-size: var(--hj-text-base); font-weight: 700; margin: 0; }
.hj-alert__body { grid-column: 2; font-size: var(--hj-text-sm); color: var(--hj-ink-muted); max-inline-size: var(--hj-measure); }
.hj-alert__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--hj-space-3); }
.hj-alert--success { background-color: var(--hj-success-surface); border-inline-start-color: var(--hj-success-edge); color: var(--hj-success-ink); }
.hj-alert--warning { background-color: var(--hj-warning-surface); border-inline-start-color: var(--hj-warning-edge); color: var(--hj-warning-ink); }
.hj-alert--danger { background-color: var(--hj-danger-surface); border-inline-start-color: var(--hj-danger-edge); color: var(--hj-danger-ink); }
.hj-alert--info { background-color: var(--hj-info-surface); border-inline-start-color: var(--hj-info-edge); color: var(--hj-info-ink); }
.hj-alert :where(.hj-alert__body) { color: inherit; opacity: 0.92; }
.hj-skeleton {
background-color: var(--hj-surface-sunk);
border-radius: var(--hj-radius-xs);
position: relative;
overflow: clip;
}
.hj-skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--hj-wood) 14%, transparent), transparent);
transform: translateX(-100%);
animation: hj-shimmer 1400ms var(--hj-ease-in-out) infinite;
}
@keyframes hj-shimmer { to { transform: translateX(100%); } }
[dir='rtl'] .hj-skeleton::after {
transform: translateX(100%);
animation-name: hj-shimmer-rtl;
}
@keyframes hj-shimmer-rtl { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .hj-skeleton::after { animation: none; } }
.hj-skeleton--text { block-size: 0.75em; margin-block: 0.25em; }
.hj-skeleton--title { block-size: 1.4em; inline-size: 60%; }
.hj-skeleton--media { aspect-ratio: 3 / 2; border-radius: 0; }
.hj-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--hj-space-4);
padding-block: var(--hj-space-16);
padding-inline: var(--hj-space-5);
text-align: center;
}
.hj-state__icon { color: var(--hj-wood); }
.hj-state__title { font-size: var(--hj-text-lg); margin: 0; }
.hj-state__body { color: var(--hj-ink-muted); max-inline-size: var(--hj-measure-narrow); }
.hj-state__actions { display: flex; flex-wrap: wrap; gap: var(--hj-space-3); justify-content: center; }
.hj-table-scroll { overflow-x: auto; }
.hj-table {
inline-size: 100%;
border-collapse: collapse;
font-size: var(--hj-text-sm);
}
.hj-table :where(th, td) {
padding-block: var(--hj-space-3);
padding-inline: var(--hj-space-4);
text-align: start;
border-block-end: var(--hj-rule-hair) solid var(--hj-line);
}
.hj-table thead th {
border-block-end-width: var(--hj-rule-mid);
border-block-end-color: var(--hj-line-strong);
font-size: var(--hj-text-2xs);
letter-spacing: var(--hj-tracking-label);
text-transform: uppercase;
color: var(--hj-ink-faint);
}
:lang(ar) .hj-table thead th { text-transform: none; letter-spacing: var(--hj-tracking-normal); }
.hj-table :where(td, th)[data-num] { text-align: end; }
.hj-table tbody tr:hover { background-color: var(--hj-surface-sunk); }
}

/* search.css */
@layer components {
.hj-hero {
position: relative;
min-block-size: clamp(34rem, 72svb, 42rem);
display: grid;
align-items: center;
isolation: isolate;
background-color: var(--hj-green-900);
overflow: clip;
}
.hj-hero__slides {
position: absolute;
inset: 0;
z-index: -2;
background-color: var(--hj-green-950);
}
.hj-hero__slide {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transform: scale(1.045);
transition: opacity 900ms var(--hj-ease-out),
transform 6200ms var(--hj-ease-out);
}
.hj-hero__slide--main {
object-position: 35% center;
}
.hj-hero__slide--petra {
object-position: 42% center;
}
.hj-hero__slide--aqaba {
object-position: 52% center;
}
.hj-hero__slide.is-active {
opacity: 1;
transform: scale(1);
}
.hj-hero::before,
.hj-hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.hj-hero::before {
z-index: -1;
background:
linear-gradient(90deg, color-mix(in oklab, var(--hj-green-950) 92%, transparent), color-mix(in oklab, var(--hj-green-900) 54%, transparent) 50%, color-mix(in oklab, var(--hj-green-950) 72%, transparent)),
linear-gradient(0deg, color-mix(in oklab, var(--hj-green-950) 86%, transparent), transparent 46%);
}
.hj-hero::after {
z-index: 0;
background:
linear-gradient(180deg, color-mix(in oklab, var(--hj-green-950) 32%, transparent), transparent 34%),
linear-gradient(0deg, color-mix(in oklab, var(--hj-green-950) 78%, transparent), transparent 48%);
box-shadow: inset 0 -4rem 6rem color-mix(in oklab, var(--hj-green-950) 76%, transparent);
}
.hj-hero .hj-screen__lattice {
--hj-lattice-ink: var(--hj-sand-100);
opacity: 0.14;
mix-blend-mode: soft-light;
}
.hj-hero .hj-screen__dapple {
opacity: 0.48;
}
.hj-hero__inner {
position: relative;
z-index: 2;
padding-block: var(--hj-space-12) var(--hj-space-20);
color: var(--hj-sand-50);
}
.hj-hero__kicker {
display: inline-flex;
align-items: center;
gap: var(--hj-space-2);
margin-block: 0 var(--hj-space-4);
padding-block: var(--hj-space-2);
padding-inline: var(--hj-space-3);
border-radius: var(--hj-radius-pill);
background-color: color-mix(in oklab, var(--hj-sand-50) 12%, transparent);
color: var(--hj-sand-100);
font-size: var(--hj-text-xs);
font-weight: 700;
}
.hj-hero__kicker::before {
content: '';
inline-size: var(--hj-space-8);
block-size: var(--hj-rule-mid);
border-radius: var(--hj-radius-pill);
background-color: var(--hj-wood);
}
.hj-hero__title {
font-size: var(--hj-text-5xl);
color: var(--hj-sand-50);
max-inline-size: 15ch;
margin: 0;
text-shadow: 0 0.18rem 0.7rem color-mix(in oklab, var(--hj-green-950) 82%, transparent);
}
.hj-hero__lede {
margin-block-start: var(--hj-space-5);
font-size: var(--hj-text-lg);
color: color-mix(in oklab, var(--hj-sand-50) 82%, transparent);
max-inline-size: 50ch;
font-weight: 600;
}
.hj-hero__search {
display: flex;
flex-wrap: wrap;
gap: var(--hj-space-3);
margin-block-start: var(--hj-space-8);
max-inline-size: 43rem;
padding: var(--hj-space-2);
border: var(--hj-rule-hair) solid color-mix(in oklab, var(--hj-sand-50) 22%, transparent);
border-radius: var(--hj-radius-pill);
background-color: color-mix(in oklab, var(--hj-green-950) 38%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.hj-hero__search .hj-input { flex: 1 1 14rem; }
.hj-hero__search .hj-input {
border-color: transparent;
border-radius: var(--hj-radius-pill);
background-color: color-mix(in oklab, var(--hj-sand-50) 96%, #ffffff);
color: var(--hj-green-950);
}
.hj-hero__search .hj-btn {
border-radius: var(--hj-radius-pill);
}
.hj-hero__controls {
position: absolute;
inset-block-end: var(--hj-space-8);
inset-inline: 0;
z-index: 4;
display: grid;
grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
align-items: center;
gap: var(--hj-space-4);
pointer-events: none;
}
.hj-hero__arrow,
.hj-hero__dot {
border: 0;
cursor: pointer;
pointer-events: auto;
}
.hj-hero__arrow {
display: grid;
place-items: center;
inline-size: 3.25rem;
block-size: 3.25rem;
border: var(--hj-rule-hair) solid color-mix(in oklab, var(--hj-sand-50) 32%, transparent);
border-radius: var(--hj-radius-pill);
background-color: color-mix(in oklab, var(--hj-green-950) 44%, transparent);
color: var(--hj-sand-50);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition: background-color var(--hj-dur-fast) var(--hj-ease-out),
transform var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-hero__arrow:hover {
background-color: color-mix(in oklab, var(--hj-sand-50) 16%, transparent);
transform: translateY(-1px);
}
.hj-hero__arrow--prev .hj-icon {
transform: scaleX(-1);
}
:dir(rtl) .hj-hero__arrow--prev .hj-icon {
transform: none;
}
:dir(rtl) .hj-hero__arrow--next .hj-icon {
transform: scaleX(-1);
}
.hj-hero__dots {
display: inline-flex;
justify-self: center;
align-items: center;
gap: var(--hj-space-2);
padding: var(--hj-space-2);
border-radius: var(--hj-radius-pill);
background-color: color-mix(in oklab, var(--hj-green-950) 38%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
pointer-events: auto;
}
.hj-hero__dot {
position: relative;
display: block;
inline-size: 0.75rem;
block-size: 0.75rem;
padding: 0;
border-radius: var(--hj-radius-pill);
background-color: color-mix(in oklab, var(--hj-sand-50) 52%, transparent);
color: transparent;
transition: inline-size var(--hj-dur-base) var(--hj-ease-out),
background-color var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-hero__dot span {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.hj-hero__dot::before {
content: '';
position: absolute;
inset: -0.5rem;
}
.hj-hero__dot.is-active {
inline-size: 2.75rem;
background-color: var(--hj-wood);
}
@media (prefers-reduced-motion: reduce) {
.hj-hero__slide {
transform: none;
transition: none;
}
}
@media (max-width: 52rem) {
.hj-hero {
min-block-size: clamp(34rem, 78svb, 42rem);
}
.hj-hero__inner {
padding-block: var(--hj-space-10) var(--hj-space-24);
}
.hj-hero__title {
font-size: var(--hj-text-4xl);
}
.hj-hero__search {
border-radius: var(--hj-radius-lg);
}
}
@media (max-width: 40rem) {
.hj-hero {
min-block-size: 0;
}
.hj-hero__lede {
font-size: var(--hj-text-base);
}
.hj-hero__search {
flex-direction: column;
align-items: stretch;
}
.hj-hero__search .hj-input,
.hj-hero__search .hj-btn {
inline-size: 100%;
}
.hj-hero__controls {
inset-block-end: var(--hj-space-5);
grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
gap: var(--hj-space-2);
}
.hj-hero__arrow {
inline-size: 2.75rem;
block-size: 2.75rem;
}
.hj-hero__dot.is-active {
inline-size: 2rem;
}
}
.hj-destination {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
gap: var(--hj-space-8);
align-items: start;
margin-block-end: var(--hj-space-10);
padding-block-end: var(--hj-space-10);
border-block-end: var(--hj-rule-mid) solid var(--hj-line);
}
.hj-destination__copy {
display: flex;
flex-direction: column;
gap: var(--hj-space-4);
}
.hj-destination .hj-eyebrow {
margin: 0;
color: var(--hj-wood);
font-size: var(--hj-text-xs);
font-weight: 700;
}
.hj-destination h1 {
margin: 0;
font-size: var(--hj-text-4xl);
max-inline-size: 14ch;
}
.hj-destination__summary {
max-inline-size: var(--hj-measure);
margin: 0;
font-size: var(--hj-text-lg);
color: var(--hj-ink-muted);
}
.hj-destination__media {
margin: 0;
aspect-ratio: 3 / 4;
overflow: clip;
border-radius: var(--hj-radius-md);
background-color: var(--hj-surface-sunk);
}
.hj-destination__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.hj-destination__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
gap: var(--hj-space-3);
margin-block-start: var(--hj-space-2);
}
.hj-destination__fact {
padding-block: var(--hj-space-3);
border-block-start: var(--hj-rule-heavy) solid var(--hj-brand);
}
.hj-destination__fact span {
display: block;
color: var(--hj-ink-faint);
font-size: var(--hj-text-xs);
font-weight: 700;
}
.hj-destination__fact strong {
display: block;
margin-block-start: var(--hj-space-1);
color: var(--hj-ink);
font-size: var(--hj-text-sm);
}
.hj-destination__body {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--hj-space-6);
}
.hj-destination__body section {
padding-block-start: var(--hj-space-4);
border-block-start: var(--hj-rule-hair) solid var(--hj-line);
}
.hj-destination__body h2 {
margin: 0 0 var(--hj-space-3);
font-size: var(--hj-text-md);
}
.hj-destination__body p {
margin: 0;
color: var(--hj-ink-muted);
font-size: var(--hj-text-sm);
}
.hj-destination__pairings {
display: flex;
flex-wrap: wrap;
gap: var(--hj-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.hj-destination__pairings a {
display: inline-flex;
padding-block: var(--hj-space-2);
padding-inline: var(--hj-space-3);
border: var(--hj-border) solid var(--hj-line-brand);
border-radius: var(--hj-radius-pill);
color: var(--hj-brand-ink);
text-decoration: none;
font-size: var(--hj-text-xs);
font-weight: 700;
}
.hj-destination__pairings a:hover {
background-color: var(--hj-brand-soft);
}
@media (max-width: 760px) {
.hj-destination { grid-template-columns: 1fr; }
.hj-destination__media { aspect-ratio: 3 / 2; }
.hj-destination__body { grid-template-columns: 1fr; }
}
.hj-doors {
display: flex;
flex-wrap: wrap;
gap: var(--hj-space-4);
margin-block-start: var(--hj-space-10);
}
.hj-door {
flex: 1 1 8rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--hj-space-2);
min-block-size: 7rem;
padding-block: var(--hj-space-5);
padding-inline: var(--hj-space-6);
border: var(--hj-border) solid color-mix(in oklab, var(--hj-sand-50) 30%, transparent);
border-radius: var(--hj-radius-md);
color: var(--hj-sand-50);
text-decoration: none;
text-align: center;
background-color: color-mix(in oklab, var(--hj-green-950) 30%, transparent);
transition: border-color var(--hj-dur-fast) var(--hj-ease-out),
background-color var(--hj-dur-fast) var(--hj-ease-out),
transform var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-door:hover {
border-color: var(--hj-sand-50);
background-color: color-mix(in oklab, var(--hj-green-950) 55%, transparent);
transform: translateY(-2px);
}
.hj-door__label { font-size: var(--hj-text-lg); font-weight: 700; }
.hj-door__hint {
color: var(--hj-sand-200);
font-size: var(--hj-text-xs);
font-weight: 600;
line-height: var(--hj-leading-snug);
}
.hj-section .hj-label {
margin-block: 0 var(--hj-space-3);
color: var(--hj-wood);
}
.hj-section__lede {
margin-block: calc(-1 * var(--hj-space-2)) var(--hj-space-8);
color: var(--hj-ink-muted);
font-size: var(--hj-text-md);
}
.hj-section--destinations {
overflow-x: clip;
background-color: color-mix(in oklab, var(--hj-surface-sunk) 68%, var(--hj-ground));
border-block-end: var(--hj-rule-hair) solid var(--hj-line);
}
.hj-section--destinations .hj-shell {
inline-size: min(100% - 2 * var(--hj-space-4), 106rem);
}
.hj-destination-carousel {
--hj-destination-edge: clamp(var(--hj-space-4), 2.5vw, var(--hj-space-8));
--hj-destination-card-gap: var(--hj-space-5);
position: relative;
display: grid;
inline-size: 100vw;
margin-inline: calc(50% - 50vw);
}
.hj-destination-carousel__controls {
position: absolute;
inset-block-start: 50%;
inset-inline: var(--hj-destination-edge);
z-index: 3;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
}
.hj-destination-carousel__button {
inline-size: 3.25rem;
block-size: 3.25rem;
padding-inline: 0;
border-color: color-mix(in oklab, var(--hj-sand-50) 38%, transparent);
box-shadow: var(--hj-shadow-2);
pointer-events: auto;
}
.hj-destination-carousel__icon--prev {
transform: scaleX(-1);
}
.hj-destination-carousel__viewport {
overflow-x: auto;
overflow-y: hidden;
padding-inline: var(--hj-destination-edge);
scroll-padding-inline: var(--hj-destination-edge);
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.hj-destination-carousel__viewport::-webkit-scrollbar {
display: none;
}
.hj-destination-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--hj-destination-card-gap) * 3)) / 4);
grid-template-columns: none;
gap: var(--hj-destination-card-gap);
}
.hj-destination-card {
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
min-block-size: 24rem;
overflow: clip;
border-radius: var(--hj-radius-md);
border: var(--hj-border) solid var(--hj-line);
background-color: var(--hj-surface);
box-shadow: var(--hj-shadow-2);
scroll-snap-align: start;
}
.hj-destination-card + .hj-destination-card::before {
content: '';
position: absolute;
inset-block: var(--hj-space-4);
inset-inline-start: calc(-0.5 * var(--hj-destination-card-gap));
inline-size: var(--hj-rule-hair);
background-color: color-mix(in oklab, var(--hj-line) 72%, transparent);
transform: translateX(50%);
}
[dir='rtl'] .hj-destination-card + .hj-destination-card::before {
transform: translateX(-50%);
}
.hj-destination-card__media {
position: relative;
display: block;
min-block-size: 13rem;
overflow: clip;
background-color: var(--hj-green-900);
}
.hj-destination-card__media img,
.hj-destination-card__lattice {
inline-size: 100%;
block-size: 100%;
min-block-size: inherit;
}
.hj-destination-card__media img {
object-fit: cover;
transform: scale(1.01);
transition: transform var(--hj-dur-slow) var(--hj-ease-out);
}
.hj-destination-card:hover .hj-destination-card__media img {
transform: scale(1.045);
}
.hj-destination-card__body {
display: flex;
flex-direction: column;
gap: var(--hj-space-3);
padding: var(--hj-space-5);
}
.hj-destination-card h3 {
margin: 0;
font-size: var(--hj-text-lg);
}
.hj-destination-card h3 a {
color: inherit;
text-decoration: none;
}
.hj-destination-card h3 a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.hj-destination-card p {
margin: 0;
color: var(--hj-ink-muted);
font-size: var(--hj-text-sm);
}
.hj-destination-card__meta {
display: inline-flex;
align-items: center;
gap: var(--hj-space-1);
color: var(--hj-brand-ink);
font-size: var(--hj-text-xs);
font-weight: 700;
}
@media (max-width: 62rem) {
.hj-destination-grid {
grid-auto-columns: calc((100% - var(--hj-destination-card-gap)) / 2);
}
.hj-destination-card { min-block-size: 23rem; }
}
@media (max-width: 42rem) {
.hj-destination-grid { grid-auto-columns: min(86%, 20rem); }
.hj-destination-card { min-block-size: 0; }
.hj-destination-carousel__controls {
display: none;
}
}
.hj-archive-lede {
max-inline-size: var(--hj-measure);
color: var(--hj-ink-muted);
font-size: var(--hj-text-lg);
margin-block-end: var(--hj-space-8);
}
.hj-property-card .hj-card__media,
.hj-tour-card .hj-card__media {
position: relative;
display: block;
overflow: clip;
}
.hj-property-card .hj-card__media img,
.hj-tour-card .hj-card__media img {
transform: scale(1.01);
transition: transform var(--hj-dur-slow) var(--hj-ease-out);
}
.hj-property-card:hover .hj-card__media img,
.hj-tour-card:hover .hj-card__media img {
transform: scale(1.045);
}
.hj-card__lattice {
display: block;
inline-size: 100%;
block-size: 100%;
aspect-ratio: 3 / 2;
--hj-lattice-ink: var(--hj-wood);
background-color: var(--hj-green-900);
}
.hj-card__badge {
position: absolute;
inset-block-start: var(--hj-space-3);
inset-inline-start: var(--hj-space-3);
z-index: 1;
}
.hj-card__title { margin: 0; }
.hj-card__title a { color: inherit; text-decoration: none; }
.hj-card__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.hj-card__location {
display: flex;
align-items: center;
gap: var(--hj-space-1);
margin: 0;
font-size: var(--hj-text-sm);
color: var(--hj-ink-muted);
}
.hj-card__location .hj-icon { color: var(--hj-wood); }
.hj-card__facts {
display: flex;
flex-wrap: wrap;
gap: var(--hj-space-4);
font-size: var(--hj-text-sm);
color: var(--hj-ink-muted);
}
.hj-fact { gap: var(--hj-space-1); }
.hj-fact .hj-icon { color: var(--hj-wood); }
.hj-property-card .hj-card__body .hj-price { margin-block-start: auto; }
.hj-tour-card .hj-card__body {
min-block-size: 15rem;
}
.hj-tour-card:has(.hj-tour-card__soon) {
border-style: dashed;
}
.hj-tour-card__action {
align-self: flex-start;
margin-block-start: auto;
}
.hj-tour-card__soon {
align-self: flex-start;
margin-block-start: calc(-1 * var(--hj-space-1));
}
.hj-tour-card__action.is-disabled {
cursor: default;
pointer-events: none;
opacity: 0.78;
}
.hj-section--flush-top {
padding-block-start: 0;
}
.hj-properties-screen {
position: relative;
isolation: isolate;
overflow-x: clip;
inline-size: 100%;
max-inline-size: none;
max-width: none;
padding-block-start: var(--hj-space-10);
background:
linear-gradient(180deg, color-mix(in oklab, var(--hj-surface-sunk) 88%, var(--hj-ground)), var(--hj-ground) 34rem),
linear-gradient(110deg, color-mix(in oklab, var(--hj-green-900) 9%, transparent), transparent 42%);
}
.hj-properties-screen__lattice {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
z-index: -1;
block-size: 24rem;
--hj-lattice-ink: var(--hj-wood);
opacity: 0.16;
}
.hj-properties-screen .hj-shell--wide {
inline-size: min(100% - 2 * var(--hj-space-5), 104rem);
max-inline-size: none;
max-width: min(calc(100% - 2 * var(--hj-space-5)), 104rem);
}
.hj-properties-screen [hidden] {
display: none !important;
}
.hj-properties-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem);
gap: var(--hj-space-8);
align-items: end;
margin-block-end: var(--hj-space-10);
}
.hj-properties-hero__copy {
display: flex;
flex-direction: column;
gap: var(--hj-space-4);
}
.hj-properties-hero h1 {
max-inline-size: 14ch;
margin: 0;
color: var(--hj-ink);
font-size: var(--hj-text-5xl);
overflow-wrap: normal;
word-break: normal;
}
.hj-properties-hero p {
max-inline-size: 46rem;
margin: 0;
color: var(--hj-ink-muted);
font-size: var(--hj-text-lg);
}
.hj-properties-quicknav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: clip;
border-radius: var(--hj-radius-lg);
background-color: var(--hj-green-900);
box-shadow: var(--hj-shadow-3);
}
.hj-properties-quicknav a {
display: grid;
place-items: center;
min-block-size: 5.75rem;
padding: var(--hj-space-4);
color: var(--hj-sand-50);
text-align: center;
text-decoration: none;
font-size: var(--hj-text-sm);
font-weight: 700;
transition: background-color var(--hj-dur-fast) var(--hj-ease-out),
transform var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-properties-quicknav a + a {
border-inline-start: var(--hj-rule-hair) solid color-mix(in oklab, var(--hj-sand-50) 18%, transparent);
}
.hj-properties-quicknav a:hover {
background-color: color-mix(in oklab, var(--hj-sand-50) 10%, transparent);
transform: translateY(-1px);
}
.hj-properties-screen .hj-search {
display: grid;
grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
gap: var(--hj-space-8);
align-items: start;
min-inline-size: 0;
}
.hj-properties-screen .hj-filters {
position: sticky;
inset-block-start: var(--hj-space-20);
min-inline-size: 0;
overflow: clip;
padding: var(--hj-space-6);
border-radius: var(--hj-radius-lg);
background-color: color-mix(in oklab, var(--hj-green-900) 96%, var(--hj-green-800));
box-shadow: var(--hj-shadow-3);
}
.hj-properties-screen .hj-filters::before {
content: '';
display: block;
block-size: 0.625rem;
margin-block: calc(-1 * var(--hj-space-6)) var(--hj-space-5);
margin-inline: calc(-1 * var(--hj-space-6));
--hj-lattice-pitch: var(--hj-lattice-pitch-dense);
background-color: var(--hj-wood);
opacity: 0.62;
-webkit-mask-image: var(--hj-lattice-tile);
mask-image: var(--hj-lattice-tile);
-webkit-mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
}
.hj-properties-screen .hj-filters__row,
.hj-properties-screen .hj-filters__actions {
display: grid;
gap: var(--hj-space-3);
}
.hj-properties-screen .hj-filters__grid {
grid-template-columns: 1fr;
}
.hj-properties-screen .hj-filters .hj-field__label,
.hj-properties-screen .hj-filters__amenities > summary {
color: var(--hj-sand-100);
}
.hj-properties-screen .hj-filters .hj-input,
.hj-properties-screen .hj-filters .hj-select {
border-color: transparent;
background-color: color-mix(in oklab, var(--hj-sand-50) 94%, #ffffff);
color: var(--hj-green-950);
box-shadow: inset 0 0 0 var(--hj-rule-hair) color-mix(in oklab, var(--hj-wood) 20%, transparent);
}
.hj-properties-screen .hj-filters .hj-select-shell::after {
background-color: var(--hj-green-900);
}
.hj-properties-screen .hj-filters .hj-choice__option {
border-color: color-mix(in oklab, var(--hj-sand-50) 38%, transparent);
color: var(--hj-sand-100);
}
.hj-properties-screen .hj-filters .hj-choice__option:hover {
border-color: var(--hj-sand-200);
color: var(--hj-sand-50);
}
.hj-properties-screen .hj-filters .hj-choice__option:has(input:checked) {
border-color: var(--hj-sand-100);
background-color: var(--hj-sand-100);
color: var(--hj-green-950);
}
.hj-properties-screen .hj-search__results {
min-inline-size: 0;
overflow: clip;
}
.hj-properties-screen .hj-search__count {
display: inline-flex;
align-items: center;
min-block-size: 2.75rem;
margin-block: 0 var(--hj-space-5);
padding-block: var(--hj-space-2);
padding-inline: var(--hj-space-4);
border-radius: var(--hj-radius-sm);
background-color: var(--hj-surface);
color: var(--hj-brand-ink);
font-size: var(--hj-text-sm);
font-weight: 700;
box-shadow: var(--hj-shadow-1);
}
.hj-properties-screen .hj-grid[data-hj-grid],
.hj-properties-screen [data-hj-skeletons] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: var(--hj-space-5);
align-items: stretch;
}
.hj-properties-screen .hj-property-card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
min-block-size: 28rem;
border: 0;
border-radius: var(--hj-radius-lg);
background:
linear-gradient(180deg, var(--hj-surface), color-mix(in oklab, var(--hj-surface) 84%, var(--hj-surface-sunk)));
box-shadow: var(--hj-shadow-2);
transition: box-shadow var(--hj-dur-base) var(--hj-ease-out),
transform var(--hj-dur-base) var(--hj-ease-out);
}
.hj-properties-screen .hj-property-card:hover {
box-shadow: var(--hj-shadow-3);
transform: translateY(-4px);
}
.hj-properties-screen .hj-property-card .hj-card__media {
position: relative;
aspect-ratio: 4 / 3;
min-block-size: 0;
background-color: var(--hj-green-900);
}
.hj-properties-screen .hj-property-card:nth-child(6n+1) .hj-card__media {
aspect-ratio: 4 / 3;
}
.hj-properties-screen .hj-property-card .hj-card__media::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 45%, color-mix(in oklab, var(--hj-green-950) 44%, transparent)),
linear-gradient(90deg, color-mix(in oklab, var(--hj-green-950) 18%, transparent), transparent 42%);
opacity: 0.7;
pointer-events: none;
}
.hj-properties-screen .hj-property-card .hj-card__body {
gap: var(--hj-space-4);
padding: var(--hj-space-6);
}
.hj-properties-screen .hj-property-card .hj-card__ref {
align-self: start;
inline-size: fit-content;
max-inline-size: 100%;
padding-block: var(--hj-space-1);
padding-inline: var(--hj-space-3);
border-radius: var(--hj-radius-xs);
background-color: var(--hj-brand-soft);
color: var(--hj-brand-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hj-properties-screen .hj-property-card .hj-card__title {
font-size: var(--hj-text-xl);
}
.hj-properties-screen .hj-property-card:nth-child(6n+1) .hj-card__title {
font-size: var(--hj-text-2xl);
}
.hj-properties-screen .hj-property-card .hj-card__location {
max-inline-size: none;
color: var(--hj-ink-muted);
line-height: var(--hj-leading-snug);
}
.hj-properties-screen .hj-property-card .hj-card__facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--hj-space-2);
}
.hj-properties-screen .hj-property-card .hj-fact {
justify-content: center;
min-block-size: 2.65rem;
padding: var(--hj-space-2);
border-radius: var(--hj-radius-sm);
background-color: var(--hj-surface-sunk);
color: var(--hj-ink);
}
.hj-properties-screen .hj-property-card .hj-price {
margin-block-start: auto;
padding-block-start: var(--hj-space-4);
border-block-start: var(--hj-rule-mid) solid var(--hj-line-brand);
}
.hj-properties-screen .hj-property-card .hj-price__amount {
font-size: var(--hj-text-xl);
}
.hj-properties-screen .hj-pagination {
justify-content: flex-start;
}
.hj-properties-screen .hj-state {
border-radius: var(--hj-radius-lg);
background-color: var(--hj-surface);
box-shadow: var(--hj-shadow-2);
}
@media (min-width: 82rem) {
.hj-properties-screen .hj-property-card:nth-child(6n+1) {
grid-column: span 2;
grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
grid-template-rows: 1fr;
min-block-size: 31rem;
}
.hj-properties-screen .hj-property-card:nth-child(6n+1) .hj-card__media {
block-size: 100%;
aspect-ratio: auto;
}
}
.hj-search { display: flex; flex-direction: column; gap: var(--hj-space-8); }
.hj-filters { display: flex; flex-direction: column; gap: var(--hj-space-5); }
.hj-filters__row { display: flex; flex-wrap: wrap; gap: var(--hj-space-3); align-items: flex-end; }
.hj-field--grow { flex: 1 1 16rem; }
.hj-filters__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
gap: var(--hj-space-4);
align-items: end;
}
.hj-filters__amenities { border-block-start: var(--hj-rule-hair) solid var(--hj-line); padding-block-start: var(--hj-space-4); }
.hj-filters__amenities > summary {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--hj-space-2);
list-style: none;
}
.hj-filters__amenities > summary::-webkit-details-marker { display: none; }
.hj-filters__amenities > summary::after {
content: '';
inline-size: 0.9em;
block-size: 0.9em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-filters__amenities[open] > summary::after { transform: rotate(180deg); }
.hj-filters__amenities .hj-choice { margin-block-start: var(--hj-space-4); }
.hj-filters__actions { display: flex; flex-wrap: wrap; gap: var(--hj-space-3); }
.hj-search__count {
font-size: var(--hj-text-sm);
color: var(--hj-ink-muted);
margin-block-end: var(--hj-space-5);
}
.hj-search__results { min-block-size: 12rem; }
.hj-search__results[aria-busy='true'] { opacity: 0.6; }
.hj-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hj-space-2);
margin-block-start: var(--hj-space-10);
justify-content: center;
}
.hj-page {
display: inline-grid;
place-items: center;
min-inline-size: 2.5rem;
min-block-size: 2.5rem;
padding-inline: var(--hj-space-2);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-sm);
color: var(--hj-ink-muted);
text-decoration: none;
font-weight: 600;
transition: border-color var(--hj-dur-fast) var(--hj-ease-out), color var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-page:hover { border-color: var(--hj-line-brand); color: var(--hj-ink); }
.hj-page.is-current {
background-color: var(--hj-brand);
border-color: var(--hj-brand);
color: var(--hj-ink-on-brand);
}
.hj-detail {
display: grid;
grid-template-columns: 1fr;
gap: var(--hj-space-10);
margin-block: var(--hj-space-10);
}
.hj-detail__fallback-media,
.hj-tour__media {
margin: 0 0 var(--hj-space-8);
overflow: clip;
border-radius: var(--hj-radius-md);
background-color: var(--hj-surface-sunk);
aspect-ratio: 3 / 2;
}
.hj-detail__fallback-media img,
.hj-tour__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
@media (min-width: 60rem) {
.hj-detail { grid-template-columns: 2fr 1fr; align-items: start; }
.hj-detail__aside { position: sticky; inset-block-start: var(--hj-space-8); }
}
@media (max-width: 72rem) {
.hj-properties-hero,
.hj-properties-screen .hj-search {
grid-template-columns: 1fr;
}
.hj-properties-screen .hj-filters {
position: relative;
inset-block-start: auto;
}
.hj-properties-screen .hj-filters__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hj-properties-screen .hj-filters__actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 46rem) {
.hj-properties-screen {
padding-block-start: var(--hj-space-8);
}
.hj-properties-screen .hj-shell--wide {
inline-size: min(100% - 2 * var(--hj-space-4), 104rem);
}
.hj-properties-hero {
gap: var(--hj-space-5);
margin-block-end: var(--hj-space-8);
}
.hj-properties-hero h1 {
font-size: var(--hj-text-4xl);
}
.hj-properties-quicknav {
grid-template-columns: 1fr;
}
.hj-properties-quicknav a {
min-block-size: 3.6rem;
}
.hj-properties-quicknav a + a {
border-inline-start: 0;
border-block-start: var(--hj-rule-hair) solid color-mix(in oklab, var(--hj-sand-50) 18%, transparent);
}
.hj-properties-screen .hj-filters,
.hj-properties-screen .hj-property-card .hj-card__body {
padding: var(--hj-space-5);
}
.hj-properties-screen .hj-filters__grid,
.hj-properties-screen .hj-filters__actions,
.hj-properties-screen .hj-grid[data-hj-grid],
.hj-properties-screen [data-hj-skeletons] {
grid-template-columns: 1fr;
}
.hj-properties-screen .hj-property-card,
.hj-properties-screen .hj-property-card:nth-child(6n+1),
.hj-properties-screen .hj-property-card:nth-child(6n+5),
.hj-properties-screen .hj-property-card:nth-child(6n+6) {
grid-column: 1 / -1;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
min-block-size: 0;
}
.hj-properties-screen .hj-property-card:nth-child(6n+1) .hj-card__media {
block-size: auto;
aspect-ratio: 4 / 3;
}
.hj-properties-screen .hj-property-card .hj-card__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.hj-detail__head { margin-block-end: var(--hj-space-6); }
.hj-detail__location {
display: flex;
align-items: center;
gap: var(--hj-space-1);
color: var(--hj-ink-muted);
margin-block-start: var(--hj-space-2);
}
.hj-detail__location .hj-icon { color: var(--hj-wood); }
.hj-detail__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
gap: var(--hj-space-4);
padding: var(--hj-space-5);
background-color: var(--hj-surface);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-md);
}
.hj-detail__fact { display: flex; flex-direction: column; gap: var(--hj-space-1); }
.hj-detail__fact .hj-icon { color: var(--hj-wood); }
.hj-detail__fact-label { font-size: var(--hj-text-xs); color: var(--hj-ink-faint); }
.hj-detail__fact-value { font-size: var(--hj-text-lg); font-weight: 700; }
.hj-detail__amenities { margin-block-start: var(--hj-space-10); }
.hj-amenities {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
gap: var(--hj-space-3);
margin-block-start: var(--hj-space-4);
}
.hj-amenity { display: flex; align-items: center; gap: var(--hj-space-2); }
.hj-amenity .hj-icon { color: var(--hj-success-solid); }
.hj-amenity a { color: var(--hj-ink); text-decoration: none; }
.hj-amenity a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.hj-detail__price-card {
display: flex;
flex-direction: column;
gap: var(--hj-space-4);
padding: var(--hj-space-6);
background-color: var(--hj-surface);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-lg);
box-shadow: var(--hj-shadow-2);
}
.hj-price--lg .hj-price__amount { font-size: var(--hj-text-2xl); }
.hj-detail__description { margin-block-start: var(--hj-space-12); max-inline-size: var(--hj-measure); }
.hj-detail__map { margin-block-start: var(--hj-space-10); }
.hj-detail__map-note { font-size: var(--hj-text-sm); color: var(--hj-ink-muted); max-inline-size: var(--hj-measure); }
.hj-map {
margin-block-start: var(--hj-space-4);
min-block-size: 12rem;
display: grid;
place-items: center;
padding: var(--hj-space-8);
border-radius: var(--hj-radius-md);
border: var(--hj-border) solid var(--hj-line);
background-color: var(--hj-surface-sunk);
position: relative;
overflow: clip;
}
.hj-map::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
--hj-lattice-pitch: var(--hj-lattice-pitch-dense);
background-color: var(--hj-wood);
opacity: 0.12;
-webkit-mask-image: var(--hj-lattice-tile);
mask-image: var(--hj-lattice-tile);
-webkit-mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
}
.hj-map > * { position: relative; z-index: 1; }
.hj-map iframe { inline-size: 100%; block-size: 100%; min-block-size: 20rem; border: 0; }
.hj-map__static {
display: block;
inline-size: min(100%, 22rem);
block-size: auto;
margin-block-end: var(--hj-space-4);
}
.hj-map__country {
fill: var(--hj-brand-soft);
stroke: var(--hj-brand);
stroke-width: 2.5;
stroke-linejoin: round;
}
.hj-map__halo { fill: color-mix(in oklab, var(--hj-brand) 25%, transparent); }
.hj-map__marker {
fill: var(--hj-brand);
stroke: var(--hj-surface);
stroke-width: 2;
}
.hj-detail__inquiry {
margin-block-start: var(--hj-space-5);
padding: var(--hj-space-6);
background-color: var(--hj-surface);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-lg);
}
.hj-detail__inquiry h2 {
font-size: var(--hj-text-lg);
margin-block: 0 var(--hj-space-1);
}
.hj-detail__inquiry-lede {
color: var(--hj-ink-muted);
font-size: var(--hj-text-sm);
margin-block-start: 0;
}
.hj-detail__inquiry .hj-form { margin-block-start: var(--hj-space-4); gap: var(--hj-space-3); }
.hj-inquiry-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
gap: var(--hj-space-3);
}
.hj-inquiry-hp {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.hj-tour { margin-block: var(--hj-space-8); display: flex; flex-direction: column; gap: var(--hj-space-8); }
.hj-tour__defs { display: grid; gap: 0; }
.hj-tour__row {
display: grid;
grid-template-columns: 10rem 1fr;
gap: var(--hj-space-4);
padding-block: var(--hj-space-4);
border-block-end: var(--hj-rule-hair) solid var(--hj-line);
}
.hj-tour__row dt { font-weight: 600; color: var(--hj-ink); margin: 0; }
.hj-tour__row dd { margin: 0; color: var(--hj-ink-muted); }
@media (max-width: 34rem) {
.hj-tour__row { grid-template-columns: 1fr; gap: var(--hj-space-1); }
}
.hj-whatsapp-float {
position: fixed;
inset-block-end: var(--hj-space-5);
inset-inline-end: var(--hj-space-5);
z-index: 60;
inline-size: 3.5rem;
block-size: 3.5rem;
display: grid;
place-items: center;
border-radius: var(--hj-radius-pill);
background-color: #128c7e;
color: #ffffff;
box-shadow: var(--hj-shadow-3);
transition: transform var(--hj-dur-fast) var(--hj-ease-out);
}
.hj-whatsapp-float:hover { transform: scale(1.06); }
.hj-whatsapp-float .hj-icon { inline-size: 1.9rem; block-size: 1.9rem; }
.hj-section__more { margin-block-start: var(--hj-space-8); }
.hj-section__more a { font-weight: 600; text-decoration: none; }
.hj-section__more a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.hj-portal-hero {
display: grid;
grid-template-columns: 1fr;
gap: var(--hj-space-10);
align-items: center;
padding-block: var(--hj-space-10);
}
@media (min-width: 58rem) {
.hj-portal-hero { grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); }
}
.hj-portal-hero__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--hj-space-5);
}
.hj-portal-hero__copy h1 {
font-size: var(--hj-text-4xl);
max-inline-size: 12ch;
margin: 0;
}
.hj-portal-hero__copy p {
font-size: var(--hj-text-lg);
color: var(--hj-ink-muted);
max-inline-size: 48ch;
}
.hj-portal-hero__screen {
position: relative;
min-block-size: 22rem;
border-radius: var(--hj-radius-lg);
background-color: var(--hj-green-900);
overflow: clip;
isolation: isolate;
box-shadow: var(--hj-shadow-3);
}
.hj-portal-hero__screen::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
--hj-lattice-pitch: var(--hj-lattice-pitch-mid);
background-color: var(--hj-sand-100);
opacity: 0.18;
-webkit-mask-image: var(--hj-lattice-tile);
mask-image: var(--hj-lattice-tile);
-webkit-mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
mask-size: var(--hj-lattice-pitch) var(--hj-lattice-pitch);
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
.hj-portal-hero__screen::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(90deg, transparent, color-mix(in oklab, var(--hj-green-950) 52%, transparent)),
linear-gradient(0deg, color-mix(in oklab, var(--hj-green-950) 54%, transparent), transparent 46%);
}
.hj-portal-hero__screen img {
inline-size: 100%;
block-size: 100%;
min-block-size: 22rem;
object-fit: cover;
object-position: center;
}
.hj-portal-actions,
.hj-portal-form .hj-alert,
.hj-portal-dashboard .hj-alert {
margin-block-start: var(--hj-space-4);
}
.hj-portal-actions {
display: flex;
flex-wrap: wrap;
gap: var(--hj-space-3);
}
.hj-portal-band { padding-block: var(--hj-space-10); }
.hj-portal-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: var(--hj-space-5);
}
.hj-portal-step {
padding-block: var(--hj-space-5);
border-block-start: var(--hj-rule-mid) solid var(--hj-line-brand);
}
.hj-portal-step .hj-icon { color: var(--hj-brand-ink); }
.hj-portal-step h2 {
font-size: var(--hj-text-md);
margin-block-start: var(--hj-space-4);
margin-block-end: var(--hj-space-2);
}
.hj-portal-step p {
color: var(--hj-ink-muted);
font-size: var(--hj-text-sm);
}
.hj-form {
display: flex;
flex-direction: column;
gap: var(--hj-space-5);
margin-block-start: var(--hj-space-6);
}
.hj-form__error {
margin: 0;
padding-block: var(--hj-space-2);
padding-inline: var(--hj-space-3);
background-color: var(--hj-danger-surface);
color: var(--hj-danger-ink);
border-inline-start: var(--hj-border-thick) solid var(--hj-danger-edge);
border-radius: var(--hj-radius-xs);
font-size: var(--hj-text-sm);
font-weight: 600;
}
.hj-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: var(--hj-space-4);
}
.hj-portal-grid__full { grid-column: 1 / -1; }
.hj-portal-heading {
max-inline-size: var(--hj-measure);
margin-block-end: var(--hj-space-8);
}
.hj-portal-heading h1 { margin-block-start: var(--hj-space-2); }
.hj-portal-heading p {
color: var(--hj-ink-muted);
font-size: var(--hj-text-md);
}
.hj-portal-dashboard__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--hj-space-8);
align-items: start;
}
@media (min-width: 70rem) {
.hj-portal-dashboard__grid { grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 0.9fr); }
}
.hj-portal-panel {
padding: var(--hj-space-6);
background-color: var(--hj-surface);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-lg);
}
.hj-portal-panel h2 {
font-size: var(--hj-text-xl);
margin-block-start: 0;
}
.hj-portal-panel > p {
color: var(--hj-ink-muted);
font-size: var(--hj-text-sm);
}
.hj-portal-units {
display: grid;
gap: var(--hj-space-3);
padding: 0;
border: 0;
}
.hj-portal-units legend {
font-size: var(--hj-text-sm);
font-weight: 700;
margin-block-end: var(--hj-space-1);
}
.hj-portal-units__hint {
color: var(--hj-ink-muted);
font-size: var(--hj-text-xs);
margin-block: 0 var(--hj-space-3);
}
.hj-unit-choice {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--hj-space-4);
padding: var(--hj-space-4);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-sm);
background-color: var(--hj-surface-sunk);
}
.hj-unit-choice:has(input[type="checkbox"]:checked) {
border-color: var(--hj-line-brand);
background-color: var(--hj-brand-soft);
}
.hj-unit-choice__pick {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--hj-space-3);
align-items: start;
cursor: pointer;
}
.hj-unit-choice__pick input { margin-block-start: 0.35em; }
.hj-unit-choice__pick span {
display: flex;
flex-direction: column;
gap: var(--hj-space-1);
}
.hj-unit-choice__pick span span {
color: var(--hj-ink-muted);
font-size: var(--hj-text-xs);
}
.hj-unit-choice__details {
display: grid;
grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
gap: var(--hj-space-3);
padding-inline-start: calc(1rem + var(--hj-space-3));
}
@media (max-width: 34rem) {
.hj-unit-choice__details {
grid-template-columns: 1fr;
padding-inline-start: 0;
}
}
.hj-unit-choice__details label {
display: flex;
flex-direction: column;
gap: var(--hj-space-1);
color: var(--hj-ink-muted);
font-size: var(--hj-text-xs);
font-weight: 700;
}
.hj-unit-choice__details input:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.hj-rfq-summary {
padding: var(--hj-space-4);
border: var(--hj-border) solid var(--hj-line);
border-radius: var(--hj-radius-sm);
background-color: var(--hj-surface-sunk);
}
.hj-rfq-summary h3 {
font-size: var(--hj-text-md);
margin-block: 0 var(--hj-space-3);
}
.hj-rfq-summary p,
.hj-rfq-summary li {
color: var(--hj-ink-muted);
font-size: var(--hj-text-sm);
}
.hj-rfq-summary ul {
display: grid;
gap: var(--hj-space-2);
margin-block: 0 var(--hj-space-3);
padding-inline-start: 1.2em;
}
.hj-rfq-summary__count {
font-weight: 700;
margin-block-end: 0;
}
}