/* ======================================================================= Venomers — Contact Page Styles (contact-bilingual.css) Purpose: ONE stylesheet for BOTH English (LTR) and Arabic (RTL) Contact page: intro, breadcrumb, quick actions, locations, hours table, contact form, safety/downloads, utilities. Depends on: /en/css/global.css (tokens) Updated: 2025-10-07 Notes: - Direction-aware via logical properties and [dir] on . Use or . - Kept class names and overall structure. Removed left/right where possible. - Accessibility: focus-visible, reduced motion (scoped), forced-colors, print. ======================================================================= */ /* ----------------------- Intro / Header ------------------------ */ .contact-intro { position: relative; isolation: isolate; /* ensure gradients don't bleed outside */ padding-block: clamp(36px, 8vw, 84px); padding-inline: clamp(12px, 3vw, 28px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); background: /* soft accent glow at the top */ radial-gradient( 800px 400px at 50% -10%, color-mix(in oklab, var(--accent), transparent 80%), transparent 60% ), /* gentle top sheen */ linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--surface-2); } .contact-intro h1 { text-align: center; letter-spacing: 0.2px; font-weight: 700; text-wrap: balance; margin-block-end: 0.6rem; } .contact-intro p { max-width: 75ch; margin-inline: auto; color: var(--text); text-wrap: pretty; /* nicer wrapping for long lines */ } .contact-intro .sub { color: var(--muted); } /* ----------------------- Breadcrumb (LTR/RTL-safe) ------------------------ */ .breadcrumb { margin: clamp(12px, 2.6vw, 16px) auto 0; padding: 0; max-width: 75ch; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); } .breadcrumb li { display: inline-flex; align-items: center; gap: 6px; } /* Separator — keep neutral by default; swap glyph in RTL if desired */ .breadcrumb li + li::before { content: "/"; opacity: 0.7; } :root[dir="rtl"] .breadcrumb li + li::before { content: "/"; opacity: 0.7; } .breadcrumb a { color: var(--accent); text-decoration: none; } .breadcrumb a:is(:hover, :focus-visible) { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; } /* ========================================= Quick Actions (cards) - Equal-height responsive cards - Bold on hover/focus (instead of underline) ========================================= */ /* Wrapper spacing */ .quick-actions { padding-block-start: clamp(20px, 4vw, 36px); } /* Grid: 3/2/1 columns + equal heights per row */ .qa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 18px); padding: 0; margin: 0; list-style: none; align-items: stretch; /* equalize card heights per row */ } @media (max-width: 900px) { .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; } /* Make mailto card span full width on 2-col layout (progressive enhancement) */ @supports selector(.qa-item:has(> a)) { .qa-grid > .qa-item:has(> a.qa-card[href^="mailto:"]) { grid-column: 1 / -1; } .qa-grid > .qa-item:has(> a.qa-card[href^="mailto:"]) .qa-card { inline-size: 100%; justify-self: stretch; } } } @media (max-width: 540px) { .qa-grid { grid-template-columns: 1fr; } } /* List item: let the inner card stretch */ .qa-item { list-style: none; display: flex; min-width: 0; } /* Card: layout, visuals, interactions */ .qa-card { display: grid; grid-template-columns: 56px 1fr; align-items: start; gap: 12px; inline-size: 100%; block-size: 100%; min-block-size: clamp(84px, 10vh, 112px); /* comfy min-height for 3 lines */ padding: clamp(12px, 2.6vw, 16px); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-1); color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; } /* Hover/Focus: lift + accent ring + subtle gradient + stronger text */ .qa-card:is(:hover, :focus-visible) { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent), white 55%); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); background: linear-gradient( 180deg, color-mix(in oklab, var(--accent), transparent 90%), color-mix(in oklab, var(--accent), transparent 97%) 38% ), var(--card); text-decoration: none; outline: none; } /* Slight press feedback */ .qa-card:active { transform: translateY(-1px) scale(0.997); } /* Icon block */ .qa-icon img { display: block; inline-size: 48px; block-size: 48px; } /* Text column */ .qa-text { min-width: 0; display: grid; align-content: start; gap: 2px; } /* Heading inside card */ .qa-heading { display: block; font-weight: 600; letter-spacing: 0.2px; transition: font-weight 0.01s linear; } /* Primary value (phone/email) */ .qa-value { display: block; color: var(--text); line-height: 1.25; font-variant-numeric: tabular-nums; min-width: 0; transition: font-weight 0.01s linear; } /* Make texts bolder on hover/focus instead of underlining */ .qa-card:is(:hover, :focus-visible) .qa-heading, .qa-card:is(:hover, :focus-visible) .qa-value { font-weight: 700; } /* Note / secondary line */ .qa-note { display: block; color: var(--muted); font-size: var(--fs-small); } /* Email-specific: keep email LTR even on RTL pages */ .qa-value.qa-email { font-size: clamp(13px, 1.6vw, 14px); line-height: 1.2; letter-spacing: 0.1px; font-weight: 500; direction: ltr; unicode-bidi: isolate; white-space: normal; /* allow wrapping */ overflow-wrap: anywhere; word-break: break-word; } /* Keyboard focus ring for accessibility */ .qa-card:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), white 70%), 0 12px 28px rgba(0, 0, 0, 0.28); } /* Motion reduction preference */ @media (prefers-reduced-motion: reduce) { .qa-card { transition: none; } .qa-card:is(:hover, :focus-visible, :active) { transform: none; } } /* Extra-small screens: free up space for text */ @media (max-width: 380px) { .qa-card { grid-template-columns: 48px 1fr; } .qa-icon img { inline-size: 40px; block-size: 40px; } } /* ----------------------- Locations (cards + maps) ------------------------ */ .locations { /* reserved for sectional spacing if needed */ } .location-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: clamp(16px, 3vw, 20px); margin-block: clamp(8px, 1.6vw, 12px); } .location-card h3 { margin-block-end: 0.4rem; font-weight: 600; } .location-card address, .location-card p { margin: 0 0 0.8rem; color: var(--text); font-style: normal; /* avoid italics for address */ text-wrap: pretty; } /* Responsive map embed */ .map-embed { margin-block-start: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); } .map-embed iframe { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; } /* Location actions */ .loc-actions { margin-block-start: 0.6rem; } /* ----------------------- Hours (table) ------------------------ */ .hours { /* reserved for sectional spacing if needed */ } .table-wrap { margin-block-start: 0.6rem; overflow: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-1); } .tz-table { inline-size: 100%; border-collapse: collapse; min-inline-size: 720px; } .tz-table caption { text-align: start; padding: 12px 14px; color: var(--muted); font-size: var(--fs-small); } .tz-table thead th { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--surface), black 4%); font-weight: 600; letter-spacing: 0.1px; } .tz-table tbody th, .tz-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); } .tz-table tbody tr:hover { background: color-mix(in oklab, var(--surface), white 1.5%); } /* ----------------------- Form (no-JS, accessible) ------------------------ */ .contact-form { /* reserved for sectional spacing if needed */ } .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2.6vw, 16px); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: clamp(14px, 3vw, 20px); } @media (max-width: 780px) { .form { grid-template-columns: 1fr; } } .field { display: grid; gap: 6px; } .field label { font-weight: 600; letter-spacing: 0.15px; } .field :where(input, select, textarea) { inline-size: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; accent-color: var(--accent); /* improves control styling where applicable */ } .field :where(textarea) { resize: vertical; } /* Focus styles */ .field :where(input, select, textarea):focus { outline: none; border-color: color-mix(in oklab, var(--accent), white 60%); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 75%); background: color-mix(in oklab, var(--surface), white 2%); } /* (Progressive) invalid hint — gentle only */ .field :where(input, select, textarea):is(:user-invalid, :invalid) { border-color: color-mix(in oklab, crimson, white 50%); } /* Honeypot (hidden) */ .hp { display: none !important; } /* Actions */ .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-start: 4px; } .privacy { color: var(--muted); font-size: var(--fs-small); } /* ----------------------- Buttons (primary + outline) ------------------------ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--accent), white 40%); background: linear-gradient( 180deg, color-mix(in oklab, var(--accent), white 12%), color-mix(in oklab, var(--accent), black 8%) ); color: #06121c; /* dark text for glossy accent button */ font-weight: 600; letter-spacing: 0.2px; text-decoration: none; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease; } .btn:is(:hover, :focus-visible) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26); outline: none; } .btn:active { transform: translateY(0); filter: brightness(0.98); } /* Outline variant derives its highlight from --accent */ .btn.outline { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 30% ), var(--surface); color: var(--text); border: 1px solid var(--glass-border); } .btn.outline:is(:hover, :focus-visible) { border-color: color-mix(in oklab, var(--accent), white 60%); background: linear-gradient( 180deg, color-mix(in oklab, var(--accent), transparent 90%), color-mix(in oklab, var(--accent), transparent 96%) 38% ), var(--surface); } /* High-contrast modes */ @media (forced-colors: active) { .btn, .btn.outline, .qa-card { outline: 1px solid ButtonText; outline-offset: 2px; } } /* ----------------------- Safety & Downloads ------------------------ */ .safety, .downloads { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: clamp(16px, 3vw, 20px); } .downloads ul { padding: 0; margin: 0.4rem 0 0; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; } /* ----------------------- Small tweaks / utilities ------------------------ */ .locations h2, .hours h2, .contact-form h2, .safety h2, .downloads h2 { margin-block-end: 0.4rem; } /* Unify focus outline offset across key blocks for visibility */ .qa-card, .location-card, .safety, .downloads, .form { outline-offset: 3px; } /* Very small screens refinement */ @media (max-width: 420px) { .qa-card { grid-template-columns: 44px 1fr; } .qa-icon img { inline-size: 40px; block-size: 40px; } } /* ----------------------- Print niceties (optional) ------------------------ */ @media print { .map-embed iframe { display: none; /* maps usually render blank in print */ } .map-embed { background: none; border-style: dashed; } } /* ----------------------- Prefer more contrast (optional) ------------------------ */ @media (prefers-contrast: more) { .tz-table thead th { background: color-mix(in oklab, var(--surface), black 8%); } .btn.outline { border-color: color-mix(in oklab, var(--accent), white 70%); } }