/* Ported from the prototype's shared.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */ @layer legacy { /* ========================================================= الأترجة — SECTION BACKGROUND SYSTEM --------------------------------------------------------- The site is a journey, not one long beige page. Every section owns a background tone and a mood, and they are all drawn from the same six brand colours. hero #071F1A / #0B2923 forest + charcoal, night vision #F8F5ED warm ivory, calm + academic halaqat #E3EEE5 soft sage, community manahij #F3E9D8 soft sand, structured teachers #F8F5ED warm ivory, flip-card row lectures #071F1A dark, cinematic deck stories #EDF4EC soft sage, human + trusting Rules for any new section: 1. pick the next tone below — never repeat the previous section's background back to back 2. surfaces on top of it stay LIGHTER than the section background (cards read as lifted, not sunken) 3. ink stays #123C35, accent stays #D4AF5A, always ========================================================= */ :root{ /* brand */ --u-ivory: #F8F5ED; --u-forest: #123C35; --u-sage: #A8C7B5; --u-gold: #D4AF5A; --u-sand: #E8D4A5; --u-lavender: #B9AFE8; --u-ink-2: #66736D; /* section atmospheres */ --atmo-hero: #071F1A; --atmo-vision: #F8F5ED; --atmo-halaqat: #E3EEE5; --atmo-manahij: #F3E9D8; --atmo-teachers: #F8F5ED; --atmo-lectures: #071F1A; --atmo-stories: #EDF4EC; } /* Sections meet edge to edge, so each one fades its own top out of whatever came before it. A section sets --bg (its own tone) and --from (the previous section's tone) and takes the .atmo class. This paints the seam as a background layer rather than a pseudo- element, because sections use ::before/::after for decoration. */ .atmo{ background: linear-gradient(to bottom, var(--from, transparent) 0, transparent var(--seam, 160px)), var(--bg, transparent); } /* ========================================================= الأترجة — shared UI primitives Used by more than one section, so it lives on its own. ========================================================= */ /* --- a word ringed by a hand-drawn gold circle --- The ring draws itself once its section gets .is-seen. JS measures the path and sets --len so the draw is exact. */ .circled{ position:relative; display:inline-block; white-space:nowrap; padding:0 .14em; } .circled svg{ position:absolute; top:50%; left:50%; width:130%; height:176%; transform:translate(-50%,-50%) rotate(-2.2deg); overflow:visible; pointer-events:none; } .circled path{ fill:none; stroke:#D4AF5A; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--len, 900); stroke-dashoffset:var(--len, 900); } .is-seen .circled path{ transition:stroke-dashoffset 1.25s cubic-bezier(.62,.03,.36,1) .55s; stroke-dashoffset:0; } /* the ✦ that sits before a section label */ @keyframes spark-turn{ to{ transform:rotate(360deg); } } @media (max-width:640px){ .circled path{ stroke-width:6; } } @media (prefers-reduced-motion:reduce){ .circled path{ stroke-dashoffset:0 !important; transition:none !important; } } /* ========================================================= IMAGE REVEAL — the blob dissolve --------------------------------------------------------- Taken from the reference: the photo does not fade or wipe. Scattered round patches of it appear, grow, and merge until the whole picture is there — about half a second end to end. (Frame-by-frame off the recording: a few circles at 5.18s, many overlapping blobs by 5.42s, complete by ~5.62s.) Three tiled dot grids at different scales, unioned by the default `add` mask compositing. Each grows on its own clock, so the circles never read as a regular pattern. Usage: put .img-dissolve on the ; it opens when any ancestor gains .is-seen or .is-in. ========================================================= */ /* The dissolve itself is driven by dissolve.js: tiled CSS gradients cannot make circles appear at different moments, and that staggering is the whole character of the effect. This only reserves the hook. */ .img-dissolve{ will-change:mask-image; } @media (prefers-reduced-motion:reduce){ /* dissolve.js bails out entirely; nothing to undo here */ .img-dissolve{ will-change:auto; } } /* ========================================================= SECTION LABELS — every public page's small kicker above a section title (✦ عن الأترجة …) wears the hero's pill: a touch larger, a soft hairline border, a faint fill. The border and fill follow the label's own colour, so it reads on light and dark sections alike. ========================================================= */ body :is(.sec-label, .hlq-label, .mnh-label, .tch-label, .mhd-label, .tjr-label, .lh-eyebrow, .ct-label){ display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:100px; border:1px solid color-mix(in srgb, currentColor 24%, transparent); background:color-mix(in srgb, currentColor 5%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:15px; font-weight:600; line-height:1.4; letter-spacing:0; } body :is(.sec-label, .hlq-label, .mnh-label, .tch-label, .mhd-label, .tjr-label) .spark{ font-size:14px; } /* ========================================================= ONE MAIN BUTTON — every call to action on the public pages is the same pill with a round icon at its end: · green (.u-green list) on light ground — ivory badge, green arrow · gold (.u-gold list) on dark ground — green badge, gold arrow Same as «تعرّف على الأترجة» / «عرض جميع المحاضرات». ========================================================= */ body :is(.tx-cta, .le-end-cta, .mh-cta, .dt-cta, .md-cta, .fq-cta, .lv-cta, .cx-cta, .hw-cta-lime){ display:inline-flex; align-items:center; justify-content:center; gap:14px; width:auto; height:auto; min-height:0; padding-block:9px; padding-inline:26px 9px; border:0; border-radius:100px; font-size:16px; font-weight:600; line-height:1.4; letter-spacing:0; text-decoration:none; cursor:pointer; transition:transform .35s cubic-bezier(.22,.68,.32,1), box-shadow .35s cubic-bezier(.22,.68,.32,1); } body :is(.tx-cta, .le-end-cta, .mh-cta, .dt-cta, .md-cta, .fq-cta){ background:#123C35; color:#F8F5ED; box-shadow:0 14px 30px -18px rgba(18,60,53,.85); } body :is(.lv-cta, .cx-cta, .hw-cta-lime){ background:#D4AF5A; color:#123C35; box-shadow:0 14px 30px -14px rgba(212,175,90,.6); } body :is(.tx-cta, .le-end-cta, .mh-cta, .dt-cta, .md-cta, .fq-cta, .lv-cta, .cx-cta, .hw-cta-lime)::before{ content:none; } body :is(.tx-cta, .le-end-cta, .mh-cta, .dt-cta, .md-cta, .fq-cta, .lv-cta, .cx-cta, .hw-cta-lime):hover{ transform:translateY(-3px); } /* the round icon: a bare arrow, or the span that holds it, always at the end */ body :is(.tx-cta, .le-end-cta, .mh-cta, .dt-cta, .md-cta, .lv-cta, .cx-cta) > svg, body :is(.fq-cta-ico, .hw-cta-lime-ico){ order:9; flex:none; box-sizing:border-box; display:grid; place-items:center; width:38px; height:38px; margin:0; padding:10.5px; border-radius:50%; border:0; box-shadow:none; transition:transform .35s cubic-bezier(.22,.68,.32,1), background-color .35s; } body :is(.fq-cta-ico, .hw-cta-lime-ico){ padding:0; } body :is(.fq-cta-ico, .hw-cta-lime-ico) svg{ width:17px; height:17px; } body :is(.tx-cta, .le-end-cta, .mh-cta, .dt-cta, .md-cta) > svg, body .fq-cta-ico{ background:#F8F5ED; color:#123C35; } body :is(.lv-cta, .cx-cta) > svg, body .hw-cta-lime-ico{ background:#123C35; color:#D4AF5A; } body :is(.tx-cta, .le-end-cta, .dt-cta, .md-cta, .lv-cta, .cx-cta, .fq-cta, .hw-cta-lime):hover :is(> svg, .fq-cta-ico, .hw-cta-lime-ico){ transform:translateX(-5px); } body :is(.tx-cta, .le-end-cta, .mh-cta, .dt-cta, .md-cta, .fq-cta):hover :is(> svg, .fq-cta-ico){ background-color:#D4AF5A; } body .mh-cta:hover > svg{ transform:translateY(3px); } } /* Nuxt: on phones a main button that spans the full width keeps the text at its start and the round icon at its end (not both bunched in the middle) */ @layer legacy { @media (max-width:640px){ body :is(.tx-cta, .le-end-cta, .mh-cta, .dt-cta, .md-cta, .fq-cta, .lv-cta, .cx-cta, .hw-cta-lime){ justify-content:space-between; } } }