/* Toubkal — mytoubkal.com */ :root { --terracotta: #D45400; --saffron: #F8AF00; --rose: #DA2673; --blue: #0E60A4; --teal: #00B1AF; --green: #33874E; --cream: #FCECD5; --bg: #FFF7EC; --ink: #2A1A10; --muted: #7A6656; --card: rgba(255, 255, 255, 0.58); --card-edge: rgba(255, 255, 255, 0.9); --chip: rgba(252, 236, 213, 0.9); --link: #0E60A4; --mention: #C01F63; --shadow: rgba(212, 84, 0, 0.14); --radius: 28px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Geeza Pro", sans-serif; --display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif; /* landscape moods (set by data-mood on ) */ --sky-top: #FFE3A8; --sky-bottom: #FCECD5; --orb: #F8AF00; --far: rgba(212, 84, 0, .35); --peak: #33874E; --near: #F8AF00; } @media (prefers-color-scheme: dark) { :root { --bg: #140F0B; --ink: #FCECD5; --muted: #B9A797; --card: rgba(44, 33, 25, 0.6); --card-edge: rgba(255, 255, 255, 0.12); --chip: rgba(58, 46, 36, 0.9); --link: #6FAEEB; --mention: #F27BAE; --shadow: rgba(0, 0, 0, 0.35); } } html[data-mood="afternoon"] { --sky-top: #9EE3E0; --sky-bottom: #FCECD5; --orb: #F8AF00; --far: rgba(0,177,175,.45); --peak: #33874E; --near: #F3C46B; } html[data-mood="evening"] { --sky-top: #F27A9F; --sky-bottom: #F8B26A; --orb: #FFD36B; --far: rgba(218,38,115,.55); --peak: #8E2A55; --near: #D45400; } html[data-mood="night"] { --sky-top: #062849; --sky-bottom: #0E60A4; --orb: #FCECD5; --far: #0B3E73; --peak: #082C52; --near: #3B2A5E; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--font); overflow-x: hidden; } a { color: inherit; } img, svg { display: block; } button, input { font: inherit; color: inherit; } /* ---------- ambient background ---------- */ .ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .ambient span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .32; animation: drift 18s ease-in-out infinite alternate; } .ambient span:nth-child(1) { width: 60vmax; height: 60vmax; background: var(--saffron); top: -25vmax; left: -20vmax; } .ambient span:nth-child(2) { width: 50vmax; height: 50vmax; background: var(--rose); top: 20vh; right: -25vmax; opacity: .22; animation-duration: 22s; } .ambient span:nth-child(3) { width: 55vmax; height: 55vmax; background: var(--teal); bottom: -30vmax; left: 10vw; opacity: .18; animation-duration: 26s; } html[data-mood="night"] .ambient span:nth-child(1) { background: var(--blue); } @keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.08); } } /* ---------- layout ---------- */ .wrap { width: min(1120px, 100% - 32px); margin-inline: auto; } section { padding: 72px 0; } h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; letter-spacing: -0.01em; } h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 800; } h2 { font-size: clamp(30px, 4.5vw, 44px); font-weight: 800; } h3 { font-size: 21px; font-weight: 750; } p { margin: 0; } .muted { color: var(--muted); } .gradient-text { background: linear-gradient(90deg, var(--terracotta), var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-head { max-width: 640px; margin-bottom: 36px; } .section-head p { margin-top: 12px; font-size: 19px; } /* ---------- glass ---------- */ .glass { background: var(--card); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: 0 18px 40px -12px var(--shadow), 0 1px 2px rgba(0,0,0,.04); } /* ---------- nav ---------- */ .nav { position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px 10px 18px; border-radius: 999px; } .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--display); font-weight: 850; font-size: 22px; } .brand svg { width: 30px; height: 22px; } .nav-right { display: flex; align-items: center; gap: 8px; } .langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip); } .langs button { border: 0; background: none; padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 650; color: var(--muted); transition: background .25s, color .25s, transform .15s; } .langs button:active { transform: scale(.92); } .langs button[aria-pressed="true"] { background: var(--terracotta); color: #fff; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font-weight: 750; font-size: 17px; transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s, opacity .2s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: scale(.96); } .btn-primary { color: #fff; background: linear-gradient(90deg, var(--terracotta), var(--rose)); box-shadow: 0 12px 26px -10px rgba(212,84,0,.6); } .btn-ghost { background: var(--card); border: 1px solid var(--card-edge); color: var(--ink); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .btn-small { padding: 9px 16px; font-size: 15px; } .btn:focus-visible, .langs button:focus-visible, input:focus-visible, .vote button:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; } /* ---------- hero ---------- */ .hero { padding-top: 56px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; margin-bottom: 22px; } .kicker i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; font-style: normal; font-size: 12px; } .hero p.lead { font-size: 20px; margin-top: 22px; max-width: 540px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* ---------- phone mockup ---------- */ .stage { position: relative; display: grid; place-items: center; min-height: 640px; text-align: start; } .phone { position: relative; width: 320px; height: 650px; border-radius: 52px; padding: 12px; background: linear-gradient(145deg, #2a211b, #0f0b08); box-shadow: 0 40px 80px -24px rgba(42,26,16,.55), inset 0 0 0 2px rgba(255,255,255,.08); animation: float 7s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-10px); } } .screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: var(--bg); padding: 46px 12px 12px; } .screen::before { /* soft glows inside the phone */ content: ""; position: absolute; inset: -40% -40% auto auto; width: 120%; height: 70%; background: radial-gradient(circle, rgba(248,175,0,.28), transparent 60%); } .island { position: absolute; top: 22px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; z-index: 3; } .app-bar { position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; font-family: var(--display); font-weight: 850; font-size: 17px; margin-bottom: 10px; } .app-bar svg { width: 22px; height: 16px; } .mini-hero { position: relative; height: 112px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); } .mini-hero svg { width: 100%; height: 100%; } .mini-hero .greet { position: absolute; inset: auto 12px 10px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.35); } .mini-hero .greet b { display: block; font-family: var(--display); font-size: 17px; } .mini-hero .greet small { font-size: 11.5px; font-weight: 600; } .pills { position: relative; display: flex; gap: 4px; padding: 3px; margin: 10px 0; border-radius: 999px; background: var(--card); border: 1px solid var(--card-edge); } .pills span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 5px 0; border-radius: 999px; color: var(--muted); } .pills span.on { color: #fff; background: linear-gradient(90deg, var(--terracotta), var(--rose)); } .post { position: relative; padding: 12px; border-radius: 20px; margin-bottom: 10px; font-size: 13px; } .post header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 11px var(--display); box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); flex: none; } .who { line-height: 1.2; min-width: 0; } .who b { font-size: 13px; } .who small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; } .post p { line-height: 1.4; } .tag { color: var(--link); font-weight: 700; } .actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--muted); } /* interactive vote capsule */ .vote { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--chip); transition: background .3s; } .vote button { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--muted); display: grid; place-items: center; border-radius: 50%; transition: transform .2s cubic-bezier(.3,1.8,.5,1), color .2s; } .vote button svg { width: 14px; height: 14px; } .vote button:active { transform: scale(.8); } .vote .n { font-weight: 800; color: var(--ink); min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums; } .vote.up { background: rgba(248,175,0,.25); } .vote.up .n, .vote.up .upb { color: var(--terracotta); } .vote.down { background: rgba(14,96,164,.14); } .vote.down .n, .vote.down .downb { color: var(--link); } .vote .n.roll { animation: roll .35s cubic-bezier(.3,1.6,.5,1); } @keyframes roll { from { transform: translateY(60%); opacity: 0; } } .vote button.bounce { animation: bounce .45s cubic-bezier(.3,1.8,.5,1); } @keyframes bounce { 40% { transform: translateY(-5px) scale(1.25); } } .spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; animation: spark .6s ease-out forwards; } @keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } } /* floating toasts around the phone */ .float-toast { position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; animation: float 6s ease-in-out infinite; } .float-toast i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; } .float-toast.a { top: 90px; inset-inline-start: -6px; animation-delay: -2s; } .float-toast.b { bottom: 120px; inset-inline-end: -10px; animation-delay: -4s; } /* ---------- features ---------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature { padding: 28px; transition: transform .35s cubic-bezier(.3,1.4,.5,1), box-shadow .35s; } .feature:hover { transform: translateY(-6px); } .feature .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; margin-bottom: 18px; box-shadow: 0 10px 20px -8px var(--c); background: linear-gradient(135deg, var(--c), var(--c2)); transition: transform .4s cubic-bezier(.3,1.8,.5,1); } .feature:hover .ico { transform: rotate(-8deg) scale(1.08); } .feature .ico svg { width: 26px; height: 26px; } .feature p { margin-top: 10px; color: var(--muted); } /* ---------- languages ---------- */ .lang-card { padding: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; } .lang-card p { margin-top: 12px; font-size: 19px; color: var(--muted); } .lang-big { display: grid; gap: 12px; } .lang-big button { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-radius: 20px; cursor: pointer; border: 1px solid var(--card-edge); background: var(--card); font-size: 20px; font-weight: 750; font-family: var(--display); transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .25s, color .25s; } .lang-big button:hover { transform: translateX(4px); } html[dir="rtl"] .lang-big button:hover { transform: translateX(-4px); } .lang-big button[aria-pressed="true"] { background: linear-gradient(90deg, var(--terracotta), var(--rose)); color: #fff; border-color: transparent; } .lang-big small { font-size: 13px; font-weight: 600; opacity: .8; font-family: var(--font); } /* ---------- communities marquee ---------- */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 40s linear infinite; padding: 8px 0; } .marquee:hover .marquee-track { animation-play-state: paused; } html[dir="rtl"] .marquee-track { animation-direction: reverse; } @keyframes marquee { to { transform: translateX(-50%); } } .cchip { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; font-weight: 700; white-space: nowrap; } .cchip .e { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--c) 20%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); } .cchip small { color: var(--c); font-weight: 700; } /* ---------- waitlist ---------- */ .waitlist { position: relative; padding: 48px; text-align: center; overflow: hidden; } .waitlist::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(120deg, var(--saffron), var(--terracotta), var(--rose), var(--blue), var(--teal)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .waitlist .scene { width: 180px; height: 120px; margin: 0 auto 24px; border-radius: 26px; overflow: hidden; box-shadow: 0 16px 36px -14px var(--shadow); } .waitlist .scene svg { width: 100%; height: 100%; } .waitlist p.lead { margin: 14px auto 0; max-width: 520px; font-size: 19px; color: var(--muted); } .wl-form { display: flex; gap: 10px; max-width: 520px; margin: 28px auto 0; } .wl-form input[type=email] { flex: 1; min-width: 0; padding: 14px 20px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--card); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 17px; outline: none; transition: box-shadow .2s; } .wl-form input[type=email]:focus { box-shadow: 0 0 0 4px rgba(248,175,0,.35); } .wl-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .wl-msg { min-height: 26px; margin-top: 14px; font-weight: 700; } .wl-msg.ok { color: var(--green); } .wl-msg.err { color: var(--mention); } .wl-form.shake { animation: shake .4s; } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .wl-note { margin-top: 6px; font-size: 14px; color: var(--muted); } /* ---------- footer ---------- */ footer { padding: 40px 0 56px; color: var(--muted); font-size: 15px; } footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; } footer nav { display: flex; gap: 18px; } footer a { text-decoration: none; } footer a:hover { color: var(--ink); } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } .features .reveal:nth-child(2) { transition-delay: .08s; } .features .reveal:nth-child(3) { transition-delay: .16s; } /* ---------- scene (svg) ---------- */ .stars circle { fill: var(--cream); opacity: 0; } html[data-mood="night"] .stars circle { opacity: .9; animation: twinkle 2.4s ease-in-out infinite alternate; } .stars circle:nth-child(2n) { animation-delay: -1.2s; } @keyframes twinkle { to { opacity: .3; } } .moon-bite { opacity: 0; } html[data-mood="night"] .moon-bite { opacity: 1; } html[data-mood="night"] .cloud { display: none; } .orb { animation: orb 6s ease-in-out infinite alternate; } @keyframes orb { to { transform: translateY(8px); } } /* ---------- legal pages ---------- */ .doc { max-width: 760px; margin: 40px auto 0; padding: 40px; } .doc h1 { font-size: clamp(32px, 5vw, 44px); } .doc h2 { font-size: 22px; margin-top: 32px; } .doc p, .doc li { color: var(--ink); margin-top: 10px; } .doc ul { padding-inline-start: 22px; } .doc .updated { color: var(--muted); margin-top: 8px; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; text-align: center; padding-top: 32px; gap: 16px; } .hero p.lead { margin-inline: auto; } .hero-ctas { justify-content: center; } .features { grid-template-columns: 1fr; } .lang-card { grid-template-columns: 1fr; padding: 28px; } .float-toast.a { inset-inline-start: 0; top: -6px; } .float-toast.b { inset-inline-end: 0; bottom: 30px; } } @media (max-width: 560px) { body { font-size: 16px; } section { padding: 52px 0; } .nav { padding-inline-start: 14px; } .nav-right .btn-small { display: none; } .stage { min-height: 600px; } .phone { transform: scale(.92); animation: none; } .float-toast { font-size: 12.5px; } .waitlist { padding: 32px 20px; } .wl-form { flex-direction: column; } .doc { padding: 26px 20px; margin-top: 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } }