/* ========================================================================== Huda Academy — site stylesheet Built 2026-07-28 from the settled lab work. Every value in the token block is a client decision; see docs/DESIGN-LIBRARY.md for what was approved and why. A second client changes the tokens and the logo, not the components. NOT the rejected first direction — that is parked in docs/archive/v1-rejected/ and must not be built on. ========================================================================== */ /* ---------- tokens -------------------------------------------------------- */ :root{ /* palette — ground derived from bayyinah.com and shifted off the pink; the red is sampled from the client's own logo, NOT from Bayyinah */ --paper:#FAF2E6; --paper-2:#F3E6D4; --paper-3:#EBDCC6; --terracotta:#9B3B21; --terracotta-deep:#7A2C17; --tan:#BF9971; --gold:#E8C08A; --ink:#2A1A11; --ink-soft:#5F4A38; --cream:#F3E7D3; /* the nav is sized around the logo, not the other way round */ --nav-h:126px; --mark-h:90px; --word-h:54px; /* the hero scrim is almost off on purpose — the copy halo does the work */ --scrim:.05; } @media (max-width:900px){ :root{ --nav-h:92px; --mark-h:64px; --word-h:38px } } *{box-sizing:border-box} html{scrollbar-gutter:stable} body{ margin:0;color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.6; /* Khatim lattice wallpaper. One continuous layer on so the tile rhythm never breaks at a section boundary — light sections veil it rather than repaint it. Tile is a 4-way mirror of the client plate, so it is seamless by construction; 880px renders the star cell at ~220px, matching the plate. */ background-color:var(--paper); background-image:url("../img/pattern-khatim.webp"); background-size:880px auto; background-repeat:repeat; } img{display:block} a{color:inherit} /* Proportional, not a fixed cap. max-width:1180px was 68% of a 1568px viewport but only 57% of a 1920px one, so the page got narrower the bigger the screen. 88% holds the proportion; the 1460px ceiling stops line length running away on very wide monitors. 1568 -> 1380px (88%). 1920 -> 1460px (76%). Used by .stats, .mission and .footer — the nav and hero have their own. */ .wrap{width:min(88%,1460px);margin-inline:auto} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--terracotta); color:#fff;padding:.8rem 1.2rem;border-radius:0 0 4px 0} .skip:focus{left:0} /* ---------- nav ----------------------------------------------------------- */ /* No backdrop-filter. A blurred sticky nav over moving video stalled the renderer once already — do not reintroduce it. */ .nav{ position:fixed;inset:0 0 auto;z-index:40;height:var(--nav-h); display:flex;align-items:center;gap:1.5rem;padding:0 clamp(1rem,3.5vw,2.75rem); background:linear-gradient(180deg,rgba(20,13,9,.55) 0%,rgba(20,13,9,0) 100%); transition:height 300ms ease,background-color 320ms ease,box-shadow 320ms ease; } .nav.scrolled{ height:88px; background:linear-gradient(180deg,#241610 0%,#1C110C 100%); box-shadow:0 1px 0 rgba(243,231,211,.10),0 10px 30px -18px rgba(0,0,0,.9); } .nav.scrolled .brand__mark{height:62px} .nav.scrolled .brand__word{height:37px} @media (max-width:900px){ .nav.scrolled{height:74px} .nav.scrolled .brand__mark{height:50px} .nav.scrolled .brand__word{height:30px} } .brand{display:flex;align-items:center;gap:.9rem;text-decoration:none;flex:0 0 auto} .brand__mark{height:var(--mark-h);width:auto;aspect-ratio:333/370;transition:height 300ms ease} .brand__word{height:var(--word-h);width:auto;aspect-ratio:507/178;transition:height 300ms ease} .brand:focus-visible{outline:2px solid var(--cream);outline-offset:6px;border-radius:4px} .nav__links{display:flex;align-items:center;gap:1.6rem;margin-left:auto} .nav__links a{ color:var(--cream);text-decoration:none;font-size:.86rem;font-weight:500; letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.55); } .nav__links a:hover{color:#fff} .nav__cta{ display:inline-flex;align-items:center;min-height:42px;padding:.55rem 1.15rem; border:1px solid rgba(243,231,211,.5);border-radius:4px;font-size:.8rem!important; transition:background-color 200ms ease,border-color 200ms ease; } .nav__cta:hover{background:var(--terracotta);border-color:var(--terracotta)} .nav__burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:10px} .nav__burger span{display:block;height:2px;background:var(--cream);margin:5px 0;border-radius:2px;transition:transform 250ms ease,opacity 200ms ease} /* Breakpoint set by where the nav runs out of room, not a notional phone width */ @media (max-width:900px){ .nav__links{display:none} .nav__burger{display:block} } /* mobile drawer */ .nav__drawer{ position:fixed;inset:var(--nav-h) 0 auto;z-index:39;display:none; background:linear-gradient(180deg,#241610 0%,#1C110C 100%); padding:1rem clamp(1rem,3.5vw,2.75rem) 1.6rem; box-shadow:0 18px 34px -26px rgba(0,0,0,.9); } .nav__drawer a{ display:block;padding:.85rem 0;color:var(--cream);text-decoration:none; font-size:.95rem;letter-spacing:.06em;text-transform:uppercase; border-bottom:1px solid rgba(243,231,211,.14); } .nav__drawer a:last-child{border-bottom:0} html.nav-open .nav__drawer{display:block} @media (min-width:901px){ html.nav-open .nav__drawer{display:none} } /* ---------- hero ---------------------------------------------------------- */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;overflow:hidden;isolation:isolate} .hero__media{position:absolute;inset:0;z-index:0;background:#1A120C} .hero__video{width:100%;height:100%;object-fit:cover;display:block} .hero__scrim{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--scrim); background: radial-gradient(125% 88% at 50% 40%, rgba(12,16,22,.10) 0%, rgba(9,12,17,.58) 58%, rgba(6,8,12,.88) 100%), linear-gradient(180deg, rgba(14,18,25,.66) 0%, rgba(32,20,13,.40) 44%, rgba(10,13,19,.84) 100%); } /* Grounding only — top for the nav, bottom for the scroll cue. The middle is deliberately clear so the building is not buried. */ .hero__plate{ position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg, rgba(7,9,13,.30) 0%, rgba(7,9,13,.06) 22%, rgba(7,9,13,0) 45%, rgba(7,9,13,.10) 74%, rgba(7,9,13,.46) 100%); } /* Every large dark area is a real gradient plus noise — never a flat fill, or the display pipeline dithers a visible diagonal hairline across it. */ .hero__noise{ position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } .hero__inner{ position:relative;z-index:4;width:100%;max-width:1240px;margin-inline:auto; display:flex;align-items:center;justify-content:center;text-align:center; padding:var(--nav-h) clamp(1rem,3.5vw,2.75rem) 4rem; } .hero__copy{position:relative;color:var(--cream);max-width:52rem;text-align:center} /* The copy halo, not the scrim, is what makes a 0.05 scrim survivable: it darkens the words and leaves the rest of the frame alone. */ .hero__copy::before{ content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none; background:radial-gradient(closest-side ellipse at 50% 50%, rgba(6,8,12,.65) 0%, rgba(6,8,12,.585) 58%, rgba(6,8,12,.195) 81%, rgba(6,8,12,0) 100%); } .hero__eyebrow{ position:relative;padding-top:1.6rem;font-size:.78rem;font-weight:700;letter-spacing:.19em; text-transform:uppercase;color:var(--cream);margin:0 auto 1.15rem; text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55); } .hero__eyebrow::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:64px;height:3px;background:var(--gold);border-radius:2px; } .hero h1{ font-weight:600;font-size:clamp(2.05rem,3.95vw,3.25rem);line-height:1.1; letter-spacing:-.025em;margin:0 0 1.25rem; text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 16px rgba(0,0,0,.6); } .hero h1 .ln{display:block} .hero h1 .ln:first-child{color:var(--gold);font-style:italic} .hero .lede{ font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--cream);max-width:38rem; margin:0 auto 2.25rem;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.5); } .hero .cta-row{justify-content:center} .scroll-cue{ position:absolute;left:0;right:0;bottom:2.6rem;z-index:4;width:max-content;margin-inline:auto; display:flex;flex-direction:column;align-items:center;gap:.5rem; color:rgba(243,231,211,.55);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase; } .scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,rgba(243,231,211,.6),rgba(243,231,211,0))} /* ---------- buttons ------------------------------------------------------- */ .cta-row{display:flex;flex-wrap:wrap;gap:.8rem} .btn{ display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:.95rem 1.9rem; border-radius:4px;background:var(--terracotta);color:#fff;font-size:.95rem;font-weight:600; letter-spacing:.03em;text-decoration:none; transition:background-color 200ms ease,transform 200ms ease; } .btn:hover{background:var(--terracotta-deep);transform:translateY(-1px)} .btn--ghost{background:transparent;border:1px solid rgba(243,231,211,.55);color:var(--cream)} .btn--ghost:hover{background:rgba(243,231,211,.12)} .btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px} /* ---------- shared section furniture -------------------------------------- */ .kicker{font-size:.74rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase; color:var(--terracotta);margin:0 0 .9rem} .rule{width:64px;height:3px;background:var(--terracotta);border-radius:2px} /* Reveal is additive only: content is visible until .js proves scripting is alive, and the failsafe puts it back regardless. */ html.js .rv{opacity:0;transform:translateY(16px)} html.js.in .rv{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)} html.js.in .rv:nth-child(2){transition-delay:.07s} html.js.in .rv:nth-child(3){transition-delay:.14s} html.in .rv{opacity:1!important;transform:none!important} /* ---------- stat band ----------------------------------------------------- */ /* Deliberately opaque: the stat band stays plain so the lattice reads only behind the mission. Making this transparent puts the pattern back. */ .stats{background:var(--paper);padding:clamp(3.5rem,9vh,6.5rem) 0} .stats__grid{display:grid;grid-template-columns:repeat(3,1fr)} .stat{padding:0 clamp(1rem,3vw,2.5rem);border-left:1px solid rgba(155,59,33,.20)} .stat:first-child{border-left:0;padding-left:0} .stat__num{display:block;font-size:clamp(2.6rem,6.2vw,4.4rem);font-weight:600;line-height:1; letter-spacing:-.035em;color:var(--terracotta);font-variant-numeric:tabular-nums} .stat__body{display:block} .stat__label{display:block;margin-top:.7rem;font-size:.82rem;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--ink)} .stat__src{display:block;margin-top:.5rem;font-size:.72rem;color:var(--ink-soft);opacity:.75} /* A missing feed must never render as 0 — see site.js */ .stat.is-empty .stat__num{color:var(--ink-soft);opacity:.45;letter-spacing:0} .stat.is-empty .stat__src{color:var(--terracotta);opacity:1;font-weight:600} @media (max-width:820px){ .stats__grid{grid-template-columns:1fr;gap:1.6rem} .stat{border-left:0;border-top:1px solid rgba(155,59,33,.20);padding:1.4rem 0 0} .stat:first-child{border-top:0;padding-top:0} } /* ---------- mission ------------------------------------------------------- */ /* --paper-2 as a veil, not a fill: keeps the tonal step down from .stats while letting the body lattice read through. Opaque here would break the pattern. */ .mission{background:rgba(243,230,212,.78);padding:clamp(3.5rem,10vh,7rem) 0} .mission .rule{margin:1rem 0 1.6rem} /* The client's official mission statement. Left-aligned, not centred: 60 words centred and ragged on both sides read as a poster rather than a statement. 58ch, not a pixel cap — at this type size that lands near 1080px, so it still fills ~74% of the wrap while keeping line length inside the readable band. */ .mission__lead{font-weight:500;letter-spacing:-.016em;line-height:1.3;margin:0; font-size:clamp(1.45rem,3.05vw,2.6rem);max-width:58ch} /* "God conscious lives" is the hinge into the ayah — the only emphasis. */ .mission__lead em{font-style:italic;color:var(--terracotta)} /* The diagonal: dateline holds the bottom-left, ayah anchors the bottom-right, both hanging off one full-width rule. */ .mission__foot{margin-top:clamp(2rem,4vw,3rem);padding-top:1.8rem; border-top:1px solid rgba(155,59,33,.20); display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap} .mission__sig{margin:0;font-size:.8rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-soft)} /* ---------- ayah ---------------------------------------------------------- */ /* No box and no rule of its own — it sits in the bottom-right of the mission's diagonal and the section rule above it does the dividing. A framed pull-quote reads as decoration; this should read as a source. */ .ayah{margin:0 0 0 auto;text-align:right} /* Lateef — the face bayyinah.com sets its Qur'anic lines in (they self-host it; it is SIL's, under the OFL, and mirrored on Google Fonts, so we can serve it). Lateef carries its harakat inside generous built-in vertical metrics, so it wants FAR less leading than Amiri did — bayyinah runs it at 1.0. */ .ayah__ar{margin:0;font-weight:400;color:var(--ink); font-family:Lateef,"Noto Naskh Arabic","Traditional Arabic","Geeza Pro",serif; font-size:clamp(2.5rem,5.6vw,5.2rem); line-height:1.32} .ayah__en{margin:.6rem 0 0;padding:0;border:0;font-style:italic; color:var(--ink-soft);line-height:1.6;font-size:clamp(.96rem,1.2vw,1.06rem)} .ayah__en p{margin:0} .ayah__ref{margin-top:.55rem;font-size:.74rem;letter-spacing:.14em;font-weight:600; text-transform:uppercase;color:var(--terracotta)} /* Below the flex wrap point the dateline and ayah stack, so the ayah loses its right edge and hangs off the section's left edge with everything else. */ @media (max-width:860px){ .mission__lead{max-width:none} .ayah{margin-left:0;text-align:left} } /* ---------- footer -------------------------------------------------------- */ /* Dark section: real two-stop gradient + noise overlay, never a flat fill. */ .footer{position:relative;background:linear-gradient(180deg,#241610 0%,#1A110C 100%); color:var(--cream);padding:clamp(3rem,7vh,4.5rem) 0 2rem;overflow:hidden} .footer__noise{position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,")} .footer .wrap{position:relative} .footer__top{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;justify-content:space-between} .footer__brand img{height:72px;width:auto} .footer__note{max-width:26rem;color:rgba(243,231,211,.72);font-size:.9rem;margin:1rem 0 0} .footer__cols{display:flex;flex-wrap:wrap;gap:clamp(2rem,6vw,4.5rem)} .footer h3{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);margin:0 0 .8rem;font-weight:700} .footer ul{list-style:none;margin:0;padding:0} .footer li{margin-bottom:.5rem} .footer li a{color:rgba(243,231,211,.82);text-decoration:none;font-size:.9rem} .footer li a:hover{color:#fff} .footer__bottom{margin-top:clamp(2rem,5vh,3rem);padding-top:1.4rem; border-top:1px solid rgba(243,231,211,.14);display:flex;flex-wrap:wrap;gap:1rem; justify-content:space-between;font-size:.78rem;color:rgba(243,231,211,.55)} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }