/* ═══════════════════════════════════════════════════════════════ Aurora — the surface a visitor meets before signing in ═══════════════════════════════════════════════════════════════ Shared by the home page, the application form, the sign-in page and the pages that follow them: an animated wash of light behind frosted glass, clay-bright buttons, and a display face with real weight. Every class is prefixed au- and every token --au-. The pages that load this also load theme.css, which owns .card, .btn-primary and .input app-wide — an unprefixed name here would silently change how the rest of the app looks. ─────────────────────────────────────────────────────────────── */ :root{ --au-ink:#0C0A1A; --au-navy:#1E1B4B; --au-soft:#4A4560; --au-violet:#7C4DFF; --au-indigo:#4F46E5; --au-lilac:#FAF8FF; --au-glass:rgba(255,255,255,.62); --au-glass-dark:rgba(12,10,26,.55); --au-stroke:rgba(255,255,255,.85); --au-shadow:0 8px 24px -10px rgba(58,32,120,.28); --au-display:'Bricolage Grotesque','Plus Jakarta Sans','Cairo',system-ui,sans-serif; --au-body:'Plus Jakarta Sans','Cairo',Inter,system-ui,sans-serif; --au-gutter:clamp(1.15rem,4vw,2rem); --au-maxw:1140px; --au-r-btn:14px; --au-r-md:20px; --au-r-lg:28px; --au-nav-h:76px; } /* Arabic has no Bricolage cut, so the display face falls through to Cairo — named first here or the headline renders in a Latin fallback. */ html[dir="rtl"]{ --au-display:'Cairo','Plus Jakarta Sans',system-ui,sans-serif; --au-body:'Cairo','Plus Jakarta Sans',Inter,system-ui,sans-serif; } /* ─── Page shell ───────────────────────────────────────────────── */ /* Border-box, or every .au-field — width:100% plus its own padding — grows wider than the card holding it and spills over the edge. */ html.au *,html.au *::before,html.au *::after{box-sizing:border-box} /* clip, not hidden: the aurora deliberately bleeds past both edges and the page must not gain sideways scroll on a phone because of it. overflow:hidden would make the scroll container and a sticky nav would stop sticking; overflow:clip crops without that. */ html.au{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} body.au{ margin:0;font-family:var(--au-body);color:var(--au-ink);background:var(--au-lilac); line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased; } /* :where() so these count as bare element selectors. Written as `body.au h1` they score higher than a page's own `.lg-head h1`, and every heading on every page that loads this file would be pinned to the largest size in the clamp. */ :where(body.au) img{max-width:100%;display:block} :where(body.au) a{color:inherit;text-decoration:none} :where(body.au) button{font:inherit} :where(body.au) :focus-visible{outline:3px solid var(--au-violet);outline-offset:3px;border-radius:8px} :where(body.au) :is(h1,h2,h3){ font-family:var(--au-display);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0; } :where(body.au) h1{font-size:clamp(2.5rem,8.5vw,4.4rem)} :where(body.au) h2{font-size:clamp(1.85rem,5.4vw,2.9rem)} :where(body.au) h3{font-size:clamp(1.05rem,3.4vw,1.3rem);letter-spacing:-.02em} :where(body.au) p{margin:0} .au-wrap{width:100%;max-width:var(--au-maxw);margin-inline:auto;padding-inline:var(--au-gutter)} .au-lede{color:var(--au-soft);font-size:clamp(1rem,2.7vw,1.12rem);max-width:46ch;margin-inline:auto} .au-eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:.45rem .9rem;border-radius:999px;color:#5B3FD1; background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.55); box-shadow:var(--au-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } /* ─── The light itself ─────────────────────────────────────────── */ .au-aurora{position:absolute;inset:-25% -10%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.9} .au-aurora span{position:absolute;display:block;border-radius:50%;will-change:transform} .au-aurora .b1{width:52%;padding-top:52%;left:-6%;top:2%;background:radial-gradient(circle at 50% 50%,#8B5CFF 0%,rgba(139,92,255,0) 70%);animation:auDrift1 26s ease-in-out infinite alternate} .au-aurora .b2{width:46%;padding-top:46%;right:-4%;top:-8%;background:radial-gradient(circle at 50% 50%,#22D3EE 0%,rgba(34,211,238,0) 70%);animation:auDrift2 32s ease-in-out infinite alternate} .au-aurora .b3{width:44%;padding-top:44%;left:26%;bottom:-14%;background:radial-gradient(circle at 50% 50%,#34D399 0%,rgba(52,211,153,0) 70%);animation:auDrift3 29s ease-in-out infinite alternate} .au-aurora .b4{width:38%;padding-top:38%;right:14%;bottom:-6%;background:radial-gradient(circle at 50% 50%,#F472B6 0%,rgba(244,114,182,0) 70%);animation:auDrift4 35s ease-in-out infinite alternate} @keyframes auDrift1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14%,10%,0) scale(1.15)}100%{transform:translate3d(-6%,18%,0) scale(.95)}} @keyframes auDrift2{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-16%,14%,0) scale(.9)}100%{transform:translate3d(6%,-8%,0) scale(1.2)}} @keyframes auDrift3{0%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(18%,-12%,0) scale(1.18)}100%{transform:translate3d(-10%,-4%,0) scale(1)}} @keyframes auDrift4{0%{transform:translate3d(0,0,0) scale(1.1)}50%{transform:translate3d(-12%,-16%,0) scale(.92)}100%{transform:translate3d(10%,6%,0) scale(1.12)}} @keyframes auBreathe{0%{opacity:.62}50%{opacity:1}100%{opacity:.72}} @keyframes auStreaks{from{transform:translate3d(-5%,0,0)}to{transform:translate3d(7%,0,0)}} /* Slower, breathing variant — for a wash that stays on screen a while. */ .au-calm .b1{animation:auDrift1 46s cubic-bezier(.45,.05,.55,.95) infinite alternate,auBreathe 19s ease-in-out infinite alternate} .au-calm .b2{animation:auDrift2 58s cubic-bezier(.45,.05,.55,.95) infinite alternate,auBreathe 23s ease-in-out infinite alternate -6s} .au-calm .b3{animation:auDrift3 52s cubic-bezier(.45,.05,.55,.95) infinite alternate,auBreathe 26s ease-in-out infinite alternate -11s} .au-calm .b4{animation:auDrift4 64s cubic-bezier(.45,.05,.55,.95) infinite alternate,auBreathe 21s ease-in-out infinite alternate -3s} /* Light raked across the glass, like a reflection. */ .au-streaks{ position:absolute;inset:-25%;opacity:.45;filter:blur(16px); background:repeating-linear-gradient(112deg, rgba(255,255,255,0) 0 74px,rgba(255,255,255,.55) 74px 104px,rgba(255,255,255,0) 104px 190px); animation:auStreaks 42s ease-in-out infinite alternate; } /* A full-page wash, for pages that are one panel on a ground rather than a long scroll: the application form, signing in. Fixed, so it does not travel with the content. */ .au-ground{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none} .au-ground .au-aurora{inset:-22% -8%;opacity:.55;filter:blur(78px)} .au-ground .au-frost{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.30) 34%,rgba(255,255,255,.22) 68%,rgba(255,255,255,.46) 100%); } /* ─── Buttons — rectangles with a radius, not pills ────────────── */ .au-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.9rem 1.5rem;border-radius:var(--au-r-btn);border:1px solid transparent; font-family:var(--au-body);font-weight:700;font-size:.95rem;cursor:pointer; transition:transform .18s ease,box-shadow .25s ease,background .25s ease; } .au-btn:hover{transform:translateY(-2px)} .au-btn-block{width:100%} .au-btn-primary{ color:#fff;background:linear-gradient(135deg,var(--au-violet) 0%,var(--au-indigo) 100%); box-shadow:0 10px 26px -10px rgba(94,53,214,.6),inset 0 1px 0 rgba(255,255,255,.32); } .au-btn-primary:hover{box-shadow:0 16px 36px -12px rgba(94,53,214,.72),inset 0 1px 0 rgba(255,255,255,.45)} .au-btn-frost{ color:#fff; background:linear-gradient(120deg,rgba(124,77,255,.78) 0%,rgba(99,102,241,.62) 45%,rgba(45,212,191,.55) 100%); border-color:rgba(255,255,255,.5); backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%); box-shadow:0 14px 34px -14px rgba(94,53,214,.6),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -10px 22px rgba(60,20,160,.16); } .au-btn-frost:hover{background:linear-gradient(120deg,rgba(140,99,255,.86) 0%,rgba(112,116,246,.7) 45%,rgba(56,224,203,.62) 100%)} .au-btn-glass{ background:rgba(255,255,255,.72);border-color:var(--au-stroke);color:var(--au-navy); backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow:0 12px 30px -16px rgba(58,32,120,.5),inset 0 1px 0 rgba(255,255,255,.9); } .au-btn-sm{padding:.55rem 1rem;font-size:.86rem;border-radius:10px} /* After the sizes: .au-btn-sm also sets a radius, so declared before it this rule lost and a pill came out as a rounded rectangle. */ .au-btn-round{border-radius:999px} /* ─── Glass panel ──────────────────────────────────────────────── */ .au-card{ position:relative;z-index:1;border-radius:24px; background:var(--au-glass);border:1px solid var(--au-stroke); backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%); box-shadow:0 30px 60px -34px rgba(58,32,120,.5),inset 0 1px 0 rgba(255,255,255,.9); } /* ─── Fields ───────────────────────────────────────────────────── */ .au-label{ display:block;margin-bottom:.4rem;font-size:.82rem;font-weight:700;color:#3B3752; text-shadow:0 1px 0 rgba(255,255,255,.9); } .au-label .au-req{color:#EF4444;margin-inline-start:2px} .au-field{ width:100%;padding:.78rem .95rem;border-radius:var(--au-r-btn); font-family:var(--au-body);font-size:.95rem;color:var(--au-navy); background:rgba(255,255,255,.78);border:1px solid rgba(124,77,255,.16); box-shadow:inset 0 1px 3px rgba(20,10,60,.06); transition:border-color .15s ease,box-shadow .15s ease,background .15s ease; } .au-field::placeholder{color:#8A85A0} .au-field:hover{border-color:rgba(124,77,255,.3)} .au-field:focus{ outline:none;background:rgba(255,255,255,.94);border-color:rgba(124,77,255,.55); box-shadow:inset 0 1px 3px rgba(20,10,60,.06),0 0 0 3px rgba(124,77,255,.16); } textarea.au-field{min-height:112px;resize:vertical;line-height:1.55} /* The list is drawn by the OS and cannot be rounded, but the closed state can match the fields beside it. Inline SVG, nothing fetched. */ select.au-field{ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:15px 15px; padding-inline-end:36px; } html[dir="rtl"] select.au-field{background-position:left 12px center} .au-hint{font-size:.8rem;color:var(--au-soft);margin-top:.35rem} /* ─── Small parts ──────────────────────────────────────────────── */ .au-brand{ display:flex;align-items:center;gap:.55rem;flex:none;white-space:nowrap; font-family:var(--au-display);font-weight:800;letter-spacing:-.02em;font-size:1.1rem;color:var(--au-navy); } .au-brand img{width:30px;height:30px;border-radius:9px;flex:none} .au-link{font-weight:700;color:var(--au-indigo)} .au-link:hover{text-decoration:underline} .au-note{ display:flex;align-items:center;gap:.6rem;padding:.75rem .95rem;border-radius:14px; font-size:.86rem;line-height:1.5; } .au-note-err{background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.22);color:#991B1B} .au-note-ok{background:rgba(16,185,129,.09);border:1px solid rgba(16,185,129,.24);color:#065F46} /* ─── Reveal on scroll ─────────────────────────────────────────── */ .au-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)} .au-reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ body.au *{animation:none !important;transition:none !important} .au-reveal{opacity:1;transform:none} html.au{scroll-behavior:auto} } /* Brighter, for a page whose own content sits on top of the wash and whose app bar is transparent at rest: the colour has to read at the very top or a see-through bar looks like a white banner. */ .au-ground.au-vivid .au-aurora { opacity: 0.7; filter: blur(72px); } .au-ground.au-vivid .au-frost { background: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0.18) 62%, rgba(255, 255, 255, 0.46) 100%); }