/* ========================================================= AwareNotes — Landing page styles Design language: warm paper + hand-inked note cards, pulled directly from the product's own UI palette. Uses CSS logical properties throughout so the exact same stylesheet serves both the English (LTR) and Arabic (RTL) pages — only changes. ========================================================= */ :root{ /* --- color tokens (lifted from the app's real palette) --- */ --paper: #FBF3DD; --paper-soft: #F7ECD3; --paper-line: rgba(62,44,20,0.12); --ink: #3B2A14; --ink-soft: #6E5B3C; --gold: #C1861F; --gold-deep: #97690F; --gold-pale: #EFD9A6; --mint: #D6EFDF; --mint-line: #AEDBC3; --peach: #F6DCC0; --peach-line: #E7BE8F; --sky: #D3EAF2; --sky-line: #A9CFDD; --blush: #F7DBE2; --blush-line: #E6B3C1; --deep: #2A1F10; --deep-soft: #3B2C17; --deep-line: rgba(251,243,221,0.14); --cream-text: #F3E8CC; /* --- type scale --- */ --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); --step-3: clamp(2.1rem, 1.7rem + 1.8vw, 3.2rem); --step-4: clamp(2.6rem, 2rem + 2.8vw, 4.4rem); --radius-s: 14px; --radius-m: 22px; --radius-l: 34px; --shadow-card: 0 14px 34px -18px rgba(59,42,20,0.35); --shadow-soft: 0 6px 20px -10px rgba(59,42,20,0.25); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @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; scroll-behavior:auto !important; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased; } [dir="rtl"] body{ font-family:'Tajawal', system-ui, sans-serif; } img{ max-width:100%; display:block; } a{ color:inherit; } h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:600; line-height:1.08; margin:0 0 0.5em; letter-spacing:-0.01em; } [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{ font-family:'Markazi Text', 'Tajawal', serif; font-weight:700; letter-spacing:0; } p{ margin:0 0 1em; color:var(--ink-soft); } .container{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px; } section{ position:relative; } /* --- eyebrow label --- */ .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep); background:var(--gold-pale); padding:6px 14px; border-radius:999px; margin-bottom:18px; } [dir="rtl"] .eyebrow{ letter-spacing:0; text-transform:none; font-size:0.95rem; } .eyebrow--light{ background:rgba(251,243,221,0.12); color:var(--gold-pale); } /* --- buttons --- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:0.98rem; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn-primary{ background:var(--ink); color:var(--paper); box-shadow:var(--shadow-soft); } .btn-primary:hover{ background:var(--gold-deep); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--paper-line); } .btn-ghost:hover{ border-color:var(--ink); } .btn-on-dark{ background:var(--gold); color:var(--deep); } .btn-on-dark:hover{ background:var(--gold-pale); } /* ========================================================= NAV ========================================================= */ .nav{ position:sticky; top:0; z-index:50; background:rgba(251,243,221,0.86); backdrop-filter:blur(10px); border-block-end:1px solid var(--paper-line); } .nav .container{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px; } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:'Fraunces', serif; font-weight:600; font-size:1.3rem; color:var(--ink); } [dir="rtl"] .brand{ font-size:1.3rem; } .brand, .footer-brand{ direction:ltr; } .brand-sub{ font-family:'Markazi Text','Tajawal',serif; font-weight:600; font-size:0.85rem; color:var(--ink-soft); padding-inline-start:6px; border-inline-start:1.5px solid var(--paper-line); margin-inline-start:2px; } .brand img{ width:34px; height:34px; border-radius:9px; } .nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; } .nav-links a{ text-decoration:none; font-size:0.95rem; font-weight:600; color:var(--ink-soft); transition:color .15s ease; } .nav-links a:hover{ color:var(--ink); } .nav-actions{ display:flex; align-items:center; gap:12px; } .lang-switch{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--paper-line); text-decoration:none; font-size:0.85rem; font-weight:700; color:var(--ink); transition:border-color .15s ease, background .15s ease; } .lang-switch:hover{ border-color:var(--gold); background:var(--gold-pale); } .nav-toggle{ display:none; } @media (max-width: 900px){ .nav-links{ display:none; position:absolute; top:100%; inset-inline:0; background:var(--paper); border-block-end:1px solid var(--paper-line); flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 18px; } .nav-links.nav-links--open{ display:flex; } .nav-links a{ display:block; padding:12px 0; width:100%; border-block-end:1px solid var(--paper-line); } .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px;height:40px; border-radius:10px; border:1.5px solid var(--paper-line); background:transparent; } } @media (min-width:901px){ .nav-toggle{ display:none; } } /* ========================================================= HERO ========================================================= */ .hero{ padding-block:64px 40px; overflow:hidden; } .hero .container{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; } @media (max-width: 900px){ .hero .container{ grid-template-columns:1fr; gap:48px; } } .hero-blobs{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; } .blob{ position:absolute; border-radius:50%; filter:blur(46px); opacity:0.55; } .blob-1{ width:420px; height:420px; background:var(--mint); top:-120px; inset-inline-end:-100px; } .blob-2{ width:340px; height:340px; background:var(--blush); bottom:-140px; inset-inline-start:8%; } .blob-3{ width:260px; height:260px; background:var(--sky); top:30%; inset-inline-start:40%; opacity:0.4; } .hero h1{ font-size:var(--step-4); max-width:12ch; } .hero-sub{ font-size:1.1rem; max-width:46ch; margin-bottom:28px; } .hero-ctas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:34px; } .hero-trust{ display:flex; gap:22px; flex-wrap:wrap; font-size:0.85rem; font-weight:700; color:var(--ink-soft); } .hero-trust span{ display:inline-flex; align-items:center; gap:6px; } /* --- signature element: phone demo that "writes" a note --- */ .phone-stage{ position:relative; display:flex; justify-content:center; } .phone-frame{ width:270px; border-radius:34px; background:var(--ink); padding:12px; box-shadow:var(--shadow-card); position:relative; z-index:2; } .phone-screen{ background:var(--paper); border-radius:24px; padding:18px 16px 22px; min-height:420px; display:flex; flex-direction:column; overflow:hidden; } .phone-notch{ width:70px; height:6px; background:var(--ink); border-radius:99px; margin:0 auto 14px; } .demo-label{ font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:8px; } [dir="rtl"] .demo-label{ text-transform:none; letter-spacing:0; } .demo-typing{ font-family:'Fraunces', serif; font-size:0.98rem; color:var(--ink-soft); border-inline-start:2px solid var(--gold); padding-inline-start:10px; min-height:2.6em; } [dir="rtl"] .demo-typing{ font-family:'Markazi Text','Tajawal',serif; border-inline-start:none; border-inline-end:2px solid var(--gold); padding-inline-start:0; padding-inline-end:10px; } .demo-typing .cursor{ display:inline-block; width:2px; height:1em; background:var(--gold); margin-inline-start:2px; vertical-align:-2px; animation:blink 1s steps(1) infinite; } @keyframes blink{ 50%{ opacity:0; } } .demo-arrow{ display:flex; align-items:center; justify-content:center; gap:8px; margin-block:14px; color:var(--gold-deep); font-size:0.78rem; font-weight:700; } .demo-arrow svg{ animation:pulse 2.2s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity:0.5; transform:scale(1);} 50%{ opacity:1; transform:scale(1.12);} } .note-chip{ border-radius:14px; padding:12px 14px; font-size:0.82rem; font-weight:600; margin-bottom:9px; opacity:0; transform:translateY(10px); animation:chipIn 0.6s ease forwards; box-shadow:0 6px 14px -8px rgba(59,42,20,0.3); } .note-chip:nth-child(1){ background:var(--mint); animation-delay:1.4s; } .note-chip:nth-child(2){ background:var(--peach); animation-delay:1.9s; } .note-chip:nth-child(3){ background:var(--sky); animation-delay:2.4s; } @keyframes chipIn{ to{ opacity:1; transform:translateY(0); } } .phone-sticker{ position:absolute; border-radius:16px; padding:10px 14px; font-size:0.78rem; font-weight:700; box-shadow:var(--shadow-soft); z-index:3; } .sticker-1{ background:var(--blush); top:6%; inset-inline-start:-8%; transform:rotate(-9deg); animation:float1 5s ease-in-out infinite; } .sticker-2{ background:var(--gold-pale); bottom:10%; inset-inline-end:-10%; transform:rotate(7deg); animation:float2 6s ease-in-out infinite; } @keyframes float1{ 0%,100%{ transform:rotate(-9deg) translateY(0);} 50%{ transform:rotate(-9deg) translateY(-8px);} } @keyframes float2{ 0%,100%{ transform:rotate(7deg) translateY(0);} 50%{ transform:rotate(7deg) translateY(8px);} } /* ========================================================= TRUST STRIP (receipt style) ========================================================= */ .trust-strip{ border-block:1.5px dashed var(--paper-line); background:var(--paper-soft); } .trust-strip .container{ display:flex; flex-wrap:wrap; justify-content:center; gap:36px; padding-block:22px; } .trust-item{ display:flex; align-items:center; gap:10px; font-size:0.9rem; font-weight:700; color:var(--ink-soft); } .trust-item .ico{ font-size:1.2rem; } /* ========================================================= FEATURES — corkboard of note cards ========================================================= */ .features{ padding-block:100px 80px; } .section-head{ max-width:640px; margin-bottom:56px; } .section-head h2{ font-size:var(--step-3); } .section-head p{ font-size:1.05rem; } .note-wall{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; } @media (max-width:900px){ .note-wall{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .note-wall{ grid-template-columns:1fr; } } .feat-card{ border-radius:var(--radius-m); padding:28px 26px; box-shadow:var(--shadow-card); transition:transform .25s ease, box-shadow .25s ease; } .feat-card:hover{ transform:translateY(-6px) rotate(0deg) !important; box-shadow:0 20px 40px -18px rgba(59,42,20,0.4); } .feat-card:nth-child(1){ background:var(--mint); transform:rotate(-1.4deg); } .feat-card:nth-child(2){ background:var(--peach); transform:rotate(1deg); } .feat-card:nth-child(3){ background:var(--sky); transform:rotate(-0.8deg); } .feat-card:nth-child(4){ background:var(--blush); transform:rotate(1.3deg); } .feat-card:nth-child(5){ background:var(--gold-pale); transform:rotate(-1deg); } .feat-card:nth-child(6){ background:var(--mint); transform:rotate(0.9deg); } .feat-ico{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(59,42,20,0.08); font-size:1.35rem; margin-bottom:16px; } .feat-card h3{ font-size:1.2rem; margin-bottom:8px; } .feat-card p{ font-size:0.95rem; margin:0; color:var(--ink); opacity:0.75; } /* ========================================================= SHOWCASE — dark filmstrip ========================================================= */ .showcase{ background:var(--deep); color:var(--cream-text); padding-block:96px; } .showcase .section-head h2{ color:var(--cream-text); } .showcase .section-head p{ color:rgba(243,232,204,0.72); } .filmstrip{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-block-end:14px; margin-inline:-24px; padding-inline:24px; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; } .filmstrip::-webkit-scrollbar{ height:8px; } .filmstrip::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:99px; } .film-item{ scroll-snap-align:start; flex:0 0 auto; width:230px; text-align:center; } .film-device{ border-radius:26px; background:#000; padding:8px; box-shadow:0 24px 50px -20px rgba(0,0,0,0.6); margin-bottom:16px; } .film-device img{ border-radius:19px; } .film-item p{ color:rgba(243,232,204,0.8); font-size:0.85rem; font-weight:600; margin:0; } /* ========================================================= PRIVACY ========================================================= */ .privacy{ padding-block:100px; } .privacy .container{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } @media (max-width:900px){ .privacy .container{ grid-template-columns:1fr; gap:48px; } } .privacy h2{ font-size:var(--step-3); max-width:12ch; } .privacy-list{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:14px; } .privacy-list li{ display:flex; align-items:flex-start; gap:12px; font-weight:600; color:var(--ink); } .privacy-list li .tick{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--mint); display:flex; align-items:center; justify-content:center; font-size:0.8rem; margin-top:2px; } .privacy-diagram{ background:var(--paper-soft); border:1.5px solid var(--paper-line); border-radius:var(--radius-l); padding:38px 30px; } .privacy-diagram svg{ width:100%; height:auto; } /* ========================================================= LANGUAGES ========================================================= */ .languages{ padding-block:90px; text-align:center; } .languages .section-head{ margin-inline:auto; text-align:center; } .lang-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; max-width:820px; margin-inline:auto; } .lang-chip{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:16px; background:var(--paper-soft); border:1.5px solid var(--paper-line); font-weight:700; font-size:1.02rem; box-shadow:var(--shadow-soft); } .lang-chip:nth-child(2n){ transform:rotate(-1.5deg); } .lang-chip:nth-child(3n){ transform:rotate(1.5deg); } .lang-chip .flag{ font-size:1.3rem; } /* ========================================================= FINAL CTA ========================================================= */ .cta-final{ margin-inline:24px; margin-block-end:90px; background:var(--gold); border-radius:var(--radius-l); padding:70px 40px; text-align:center; position:relative; overflow:hidden; } .cta-final::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25), transparent 45%); } .cta-final h2{ color:var(--deep); font-size:var(--step-3); position:relative; } .cta-final p{ color:var(--deep); opacity:0.8; max-width:44ch; margin-inline:auto 26px; position:relative; font-weight:600; } .cta-final .btn-primary{ background:var(--deep); color:var(--gold-pale); position:relative; } .cta-final .btn-primary:hover{ background:#1c1409; } .cta-note{ margin-top:16px; font-size:0.85rem; color:var(--deep); opacity:0.65; position:relative; font-weight:600; } /* ========================================================= FOOTER ========================================================= */ footer{ background:var(--deep); color:rgba(243,232,204,0.75); padding-block:50px 30px; } .footer-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding-block-end:30px; border-block-end:1px solid var(--deep-line); margin-bottom:24px; } .footer-brand{ display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-size:1.15rem; color:var(--cream-text); } [dir="rtl"] .footer-brand{ font-size:1.15rem; } .footer-brand img{ width:28px; height:28px; border-radius:8px; } .footer-links{ display:flex; gap:22px; list-style:none; padding:0; margin:0; flex-wrap:wrap; } .footer-links a{ text-decoration:none; font-size:0.9rem; font-weight:600; color:rgba(243,232,204,0.75); } .footer-links a:hover{ color:var(--gold-pale); } .footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:0.82rem; color:rgba(243,232,204,0.5); } /* --- reveal-on-scroll utility (progressive enhancement) --- Elements are fully visible by default. JS opts specific elements into the hidden-then-fade-in state only once it has confirmed it can also bring them back via IntersectionObserver — so nothing ever depends on JS/scrolling to become visible. */ .reveal.reveal-armed{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; } .reveal.reveal-armed.is-visible{ opacity:1; transform:translateY(0); } /* --- visually hidden --- */ .vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* --- focus visibility --- */ a:focus-visible, button:focus-visible{ outline:2.5px solid var(--gold-deep); outline-offset:3px; }