/* ============================================================ ER"N — ALMAWARE · bright, warm-light theme Multilingual (he/en/fr/ar/ru), full RTL support. ============================================================ */ :root{ /* Palette — warm light, hopeful, bright */ --c-bg: #fbfaf7; /* warm paper */ --c-bg-alt: #f3f1ea; /* slightly deeper warm */ --c-surface: #ffffff; --c-ink: #1d2433; /* near-black for text */ --c-ink-soft: #4a5366; --c-line: #e7e3d8; --c-accent: #2f7df6; /* hopeful blue */ --c-accent2: #ff8a3d; /* warm orange */ --c-accent3: #18b5a6; /* teal-green growth */ --c-accent4: #a06bff; /* soft violet */ --grad-hero: linear-gradient(120deg,#2f7df6 0%,#18b5a6 55%,#ff8a3d 100%); --grad-text: linear-gradient(120deg,#2f7df6,#a06bff 60%,#18b5a6); --shadow-sm: 0 2px 10px rgba(29,36,51,.05); --shadow-md: 0 10px 34px rgba(29,36,51,.08); --shadow-lg: 0 22px 60px rgba(47,125,246,.14); --r: 16px; --r-lg:24px; --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-he: "Heebo", var(--font-latin); --font-he-display: "Frank Ruhl Libre", "Heebo", serif; --font-ar: "Cairo", var(--font-latin); --maxw: 1120px; } /* ---- language-specific font stacks ---- */ html[lang="he"]{ --font-body: var(--font-he); --font-display: var(--font-he-display); } html[lang="ar"]{ --font-body: var(--font-ar); --font-display: var(--font-ar); } html{ --font-body: var(--font-latin); --font-display: var(--font-latin); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--c-bg); color:var(--c-ink); font-family:var(--font-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } /* RTL flips handled by [dir] on ; logical props used where possible */ :where(p,li){ margin:0 0 .85em; } a{ color:var(--c-accent); text-decoration:none; } a:hover{ text-decoration:underline; } .wrap{ width:min(var(--maxw), 92vw); margin-inline:auto; } /* ============== HEADER / NAV ============== */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(251,250,247,.82); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--c-line); } .header-inner{ display:flex; align-items:center; gap:18px; min-height:64px; flex-wrap:wrap; } .brand{ display:inline-flex; align-items:center; gap:10px; color:var(--c-ink); font-weight:800; letter-spacing:.06em; } .brand:hover{ text-decoration:none; } .brand-mark{ display:inline-flex; } .brand-text{ font-size:.95rem; } .main-nav{ display:flex; gap:6px; margin-inline-start:auto; flex-wrap:wrap; } .main-nav a{ color:var(--c-ink-soft); font-weight:600; font-size:.92rem; padding:7px 12px; border-radius:999px; transition:.18s; } .main-nav a:hover{ background:var(--c-bg-alt); color:var(--c-ink); text-decoration:none; } .lang-switch{ display:inline-flex; gap:3px; background:var(--c-bg-alt); padding:4px; border-radius:999px; border:1px solid var(--c-line); } .lang-switch button{ border:0; background:transparent; cursor:pointer; font:inherit; font-size:.82rem; font-weight:700; color:var(--c-ink-soft); padding:5px 11px; border-radius:999px; transition:.18s; } .lang-switch button:hover{ color:var(--c-ink); } .lang-switch button.active{ background:var(--c-surface); color:var(--c-accent); box-shadow:var(--shadow-sm); } /* ============== HERO ============== */ .hero{ position:relative; padding:clamp(40px,7vw,84px) 0 clamp(48px,7vw,86px); overflow:hidden; } .hero-glow{ position:absolute; inset-block-start:-30%; inset-inline-end:-10%; width:60vw; height:60vw; max-width:760px; max-height:760px; background:radial-gradient(circle at 50% 50%, rgba(47,125,246,.18), rgba(24,181,166,.10) 40%, transparent 70%); filter:blur(8px); z-index:0; pointer-events:none; } .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center; } .kicker{ display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent); background:rgba(47,125,246,.08); padding:6px 14px; border-radius:999px; margin:0 0 18px; } html[lang="he"] .kicker, html[lang="ar"] .kicker{ text-transform:none; letter-spacing:.04em; } .hero-title{ font-family:var(--font-display); font-size:clamp(3.4rem,9vw,6rem); line-height:.98; margin:0 0 .1em; font-weight:900; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.01em; } .hero-subtitle{ font-size:clamp(1.2rem,2.6vw,1.7rem); font-weight:700; margin:0 0 .7em; color:var(--c-ink); } .hero-lead{ font-size:1.06rem; color:var(--c-ink-soft); max-width:54ch; } .hero-lead strong{ color:var(--c-ink); } .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; } .btn{ display:inline-block; font-weight:700; font-size:.98rem; padding:13px 24px; border-radius:999px; transition:.2s; cursor:pointer; border:0; } .btn:hover{ text-decoration:none; transform:translateY(-2px); } .btn-primary{ background:var(--grad-hero); color:#fff; box-shadow:var(--shadow-lg); } .btn-ghost{ background:var(--c-surface); color:var(--c-ink); border:1.5px solid var(--c-line); box-shadow:var(--shadow-sm); } .hero-art{ margin:0; text-align:center; } .hero-art #hero-svg{ width:100%; max-width:480px; margin-inline:auto; } .hero-art figcaption{ margin-top:12px; font-size:.85rem; color:var(--c-ink-soft); opacity:.85; } /* ============== BANDS / SECTIONS ============== */ .band{ padding:clamp(40px,6vw,76px) 0; } .band.alt{ background:var(--c-bg-alt); } .section-title{ font-family:var(--font-display); font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:800; margin:0 0 .35em; line-height:1.1; letter-spacing:-.01em; } .section-title.small{ font-size:clamp(1.4rem,2.6vw,1.8rem); } .lede{ font-size:1.12rem; color:var(--c-ink-soft); max-width:70ch; margin:0 0 1.6em; } .lede strong{ color:var(--c-ink); } .sub{ font-size:1.15rem; font-weight:800; margin:2em 0 .9em; color:var(--c-ink); } /* ============== CARDS ============== */ .card-grid{ display:grid; gap:18px; } .card-grid.two{ grid-template-columns:repeat(2,1fr); } .card-grid.three{ grid-template-columns:repeat(3,1fr); } .card-grid.four{ grid-template-columns:repeat(4,1fr); } .card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r); padding:22px 22px 18px; box-shadow:var(--shadow-sm); transition:.22s; } .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#dfe6f3; } .card h3,.card h4{ margin:0 0 .4em; font-size:1.08rem; font-weight:800; color:var(--c-ink); line-height:1.25; } .card p{ margin:0; color:var(--c-ink-soft); font-size:.97rem; } .card.glow{ background:linear-gradient(180deg,#fff,#fcfdff); } .card .ic{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; margin-bottom:12px; font-size:1.2rem; background:rgba(47,125,246,.10); color:var(--c-accent); } .card.person h4{ color:var(--c-accent); } /* mini cards (TL;DR) */ .mini-card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow-sm); position:relative; transition:.22s; } .mini-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .mini-card h3{ margin:.5em 0 .35em; font-size:1.05rem; font-weight:800; } .mini-card p{ margin:0; color:var(--c-ink-soft); font-size:.94rem; } .dot{ display:inline-block; width:30px; height:30px; border-radius:9px; } .dot.d1{ background:linear-gradient(135deg,#2f7df6,#5aa0ff); } .dot.d2{ background:linear-gradient(135deg,#18b5a6,#4fd6c8); } .dot.d3{ background:linear-gradient(135deg,#a06bff,#c39bff); } .dot.d4{ background:linear-gradient(135deg,#ff8a3d,#ffb27a); } /* ============== COLLAPSIBLE MODULES (details) ============== */ .module{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .22s; } .module[open]{ box-shadow:var(--shadow-md); } .module > summary{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,34px); } .module > summary::-webkit-details-marker{ display:none; } .module > summary:hover{ background:var(--c-bg); } .sum-head{ display:flex; align-items:center; gap:16px; } .sum-head .section-title{ margin:0; } .sum-num{ font-family:var(--font-display); font-weight:900; font-size:1.05rem; background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; border:2px solid var(--c-line); border-radius:50%; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; flex:none; } .sum-toggle{ flex:none; font-size:.82rem; font-weight:800; color:var(--c-accent); background:rgba(47,125,246,.09); padding:7px 16px; border-radius:999px; white-space:nowrap; } .sum-toggle .less{ display:none; } .module[open] .sum-toggle .more{ display:none; } .module[open] .sum-toggle .less{ display:inline; } .module-body{ padding:0 clamp(20px,3vw,34px) clamp(24px,3vw,34px); animation:fade .35s ease; } @keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} } .module + .module{ margin-top:18px; } /* ============== SOUL LAYER LIST ============== */ .layer-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; } .layer{ display:flex; gap:18px; align-items:stretch; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--r); padding:18px 20px; transition:.2s; } .layer:hover{ background:#fff; box-shadow:var(--shadow-sm); transform:translateX(4px); } html[dir="rtl"] .layer:hover{ transform:translateX(-4px); } .layer-bar{ width:5px; border-radius:99px; flex:none; background:var(--grad-hero); } .layer h4{ margin:0 0 .3em; font-size:1.06rem; font-weight:800; } .layer p{ margin:0; color:var(--c-ink-soft); font-size:.96rem; } .layer em{ color:var(--c-accent3); font-style:normal; font-weight:600; } /* ============== BUILD / NOW + TIMELINE ============== */ .now-card{ background:linear-gradient(125deg, rgba(47,125,246,.07), rgba(24,181,166,.07)); border:1.5px solid rgba(47,125,246,.22); border-radius:var(--r); padding:22px 24px; margin-bottom:22px; } .now-tag{ display:inline-block; font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#0e8e7f; background:rgba(24,181,166,.15); padding:4px 12px; border-radius:999px; margin-bottom:10px; } .now-card h4{ margin:0 0 .35em; font-size:1.12rem; font-weight:800; } .now-card p{ margin:0; color:var(--c-ink-soft); } .timeline{ list-style:none; padding:0; margin:0; display:grid; gap:14px; } .timeline li{ display:flex; gap:18px; align-items:flex-start; } .tl-step{ flex:none; width:46px; height:46px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; color:#fff; background:var(--grad-hero); box-shadow:var(--shadow-sm); font-size:.95rem; } .timeline h4{ margin:.2em 0 .2em; font-size:1.04rem; font-weight:800; } .timeline p{ margin:0; color:var(--c-ink-soft); font-size:.96rem; } /* ============== NEW IDEAS SECTION ============== */ .ideas{ padding:0; } .ideas .card-grid{ display:grid; gap:18px; } .ideas .card-grid.two{ grid-template-columns:repeat(2,1fr); } .ideas .card-grid.three{ grid-template-columns:repeat(3,1fr); } .ideas .card-grid.four{ grid-template-columns:repeat(4,1fr); } .idea-card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r); padding:22px 22px 18px; box-shadow:var(--shadow-sm); transition:.22s; } .idea-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#dfe6f3; } .idea-card h3,.idea-card h4{ margin:0 0 .4em; font-size:1.08rem; font-weight:800; color:var(--c-ink); line-height:1.25; } .idea-card p{ margin:0; color:var(--c-ink-soft); font-size:.97rem; } .idea-card .ic{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; margin-bottom:12px; font-size:1.2rem; background:rgba(47,125,246,.10); color:var(--c-accent); } /* ============== HONEST NOTE ============== */ .band.honest{ background:var(--c-bg-alt); } .honest-inner{ background:var(--c-surface); border:1px dashed #d9cfb8; border-radius:var(--r-lg); padding:clamp(24px,3vw,38px); box-shadow:var(--shadow-sm); max-width:880px; margin-inline:auto; } .honest-inner p{ margin:0; color:var(--c-ink-soft); font-size:1.04rem; } /* ============== FOOTER ============== */ .site-footer{ background:#1d2433; color:#cdd5e4; padding:clamp(34px,5vw,56px) 0; text-align:center; } .footer-inner p{ margin:.25em 0; } .footer-tag{ font-size:1.12rem; font-weight:700; color:#fff; } .footer-memorial{ font-size:.98rem; color:#9fb0d0; } .footer-brand{ font-size:.9rem; color:#7e8db0; letter-spacing:.04em; } /* ============== SVG hero neuron animation ============== */ #hero-svg .pulse{ animation:pulse 3.2s ease-in-out infinite; transform-origin:center; } #hero-svg .pulse2{ animation:pulse 3.2s ease-in-out infinite; animation-delay:1.1s; transform-origin:center; } #hero-svg .pulse3{ animation:pulse 3.2s ease-in-out infinite; animation-delay:2.1s; transform-origin:center; } @keyframes pulse{ 0%,100%{ opacity:.45; r:3; } 50%{ opacity:1; } } #hero-svg .spark{ stroke-dasharray:5 7; animation:flow 4s linear infinite; } @keyframes flow{ to{ stroke-dashoffset:-48; } } @media (prefers-reduced-motion: reduce){ #hero-svg .pulse,#hero-svg .pulse2,#hero-svg .pulse3,#hero-svg .spark{ animation:none; } html{ scroll-behavior:auto; } } /* ============== RESPONSIVE ============== */ @media (max-width: 920px){ .hero-grid{ grid-template-columns:1fr; text-align:center; } .hero-lead{ margin-inline:auto; } .hero-cta{ justify-content:center; } .hero-art{ order:-1; } .card-grid.four{ grid-template-columns:repeat(2,1fr); } .card-grid.three{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 760px){ .main-nav{ display:none; } .header-inner{ justify-content:space-between; } .lang-switch{ margin-inline-start:auto; } } @media (max-width: 560px){ body{ font-size:16px; } .card-grid.two,.card-grid.three,.card-grid.four{ grid-template-columns:1fr; } .module > summary{ flex-wrap:wrap; } .sum-head{ gap:12px; } .hero-title{ font-size:clamp(2.8rem,16vw,4rem); } } /* RTL fine-tuning */ html[dir="rtl"] .main-nav{ margin-inline-start:auto; } html[dir="rtl"] body{ letter-spacing:0; }