/* ========================================================================== מועדון "סיפורי סבתאות" Palette and typography taken from the original site, unchanged. Everything is RTL-first using CSS logical properties. ========================================================================== */ /* ---------- the display face (self hosted) ---------- */ /* Frank Ruhl Libre. Rafael Frank drew it in 1908, Yanek Iontef digitised it, and it is the face Hebrew books have been set in ever since. SIL Open Font License, free for commercial use. It replaces Leon (Ben Nathan, Hafontia), which is a commercial typeface whose files were carried over from the previous build. Nobody on this side ever held a licence for it, so it could not stay. One variable file covers every weight, and it was drawn with nikud rather than having it added later, which matters: the headline is "סִפּוּרֵי סַבְתָאוּת". */ @font-face{ font-family:"Frank Ruhl Libre"; src:url("assets/FrankRuhlLibre-hebrew.woff2") format("woff2"); font-weight:300 900; font-style:normal; font-display:swap; unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } /* Quotation marks, digits and the middle dot, for the punctuation that sits inside Hebrew headings. Cut by hand from the Latin file, which is four times the size and full of letters no heading here will ever use. */ @font-face{ font-family:"Frank Ruhl Libre"; src:url("assets/FrankRuhlLibre-punct.woff2") format("woff2"); font-weight:300 900; font-style:normal; font-display:swap; unicode-range:U+0020-0022,U+0027,U+002C-002E,U+003A-003B,U+003F,U+0030-0039,U+00A0,U+00B7,U+2013-2014,U+2018-201D,U+2026; } :root{ /* ---- colours, lifted from the original build ---- */ --cream:#F7F4ED; --sand:#F1EDE3; --white:#FFFFFF; --navy:#072448; --navy-soft:#16263F; --navy-deep:#123A6B; --gold:#C79A4A; --gold-dark:#7A5A18; /* deepened from #8E6A22 so small text clears WCAG AA */ --gold-light:#E3C583; --cream-on-navy:#EDE6D8; --rule:rgba(7,36,72,.12); --rule-light:rgba(237,230,216,.24); --font-display:"Frank Ruhl Libre","David Libre","Times New Roman",serif; --font-body:"Heebo","Arial Hebrew","Noto Sans Hebrew",sans-serif; --shell:1160px; --radius:14px; --radius-lg:22px; --shadow:0 2px 4px rgba(7,36,72,.04),0 12px 34px rgba(7,36,72,.07); --step-1:clamp(1.05rem,.99rem + .3vw,1.19rem); --step-0:clamp(1.13rem,1.06rem + .34vw,1.28rem); --step-2:clamp(1.32rem,1.2rem + .6vw,1.6rem); --step-3:clamp(1.62rem,1.4rem + 1.05vw,2.25rem); --step-4:clamp(2rem,1.6rem + 1.9vw,3.1rem); --step-5:clamp(2.5rem,1.75rem + 3.4vw,4.6rem); } *,*::before,*::after{box-sizing:border-box} html{ scroll-behavior:smooth; /* used when Lenis is not running */ scroll-padding-block-start:96px; -webkit-text-size-adjust:100%; } /* --------------------------------------------------------------------------- Lenis, the eased scrolling. These rules only take effect once the script adds its classes to , so with JavaScript off nothing here applies and scrolling stays native. --------------------------------------------------------------------------- */ html.lenis,html.lenis body{block-size:auto} /* Native smooth scrolling must be off while Lenis drives, otherwise the two ease against each other and the result stutters. Lenis 1.1 puts only the "lenis" class on , so that is what this targets. */ html.lenis{scroll-behavior:auto!important} html.lenis [data-lenis-prevent]{overscroll-behavior:contain} html.lenis-stopped{overflow:hidden} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ margin:0; background:var(--cream); color:var(--navy-soft); font-family:var(--font-body); font-size:var(--step-0); font-weight:400; line-height:1.75; /* Hebrew needs more leading than Latin */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-inline-size:100%;block-size:auto;display:block} /* Latin / numeric runs inside Hebrew must be isolated so they never reorder */ .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block} .en{direction:ltr;unicode-bidi:isolate;display:inline-block} .nowrap{white-space:nowrap} .shell{inline-size:min(var(--shell),100% - 2.5rem);margin-inline:auto} .shell-narrow{inline-size:min(760px,100% - 2.5rem)} .shell-form{inline-size:min(680px,100% - 2.5rem)} .skip-link{ position:absolute;inset-block-start:-100px;inset-inline-start:1rem;z-index:200; background:var(--navy);color:var(--cream);padding:.85rem 1.4rem;border-radius:0 0 10px 10px; font-weight:700;text-decoration:none;transition:inset-block-start .15s; } .skip-link:focus{inset-block-start:0} /* focus is always visible, never removed */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--gold);outline-offset:3px;border-radius:6px; } .band-navy a:focus-visible,.band-navy button:focus-visible, .band-navy input:focus-visible,.band-navy textarea:focus-visible{outline-color:var(--gold-light)} /* ========================================================================== HEADER ========================================================================== */ .site-header{ position:sticky;inset-block-start:0;z-index:100; background:rgba(247,244,237,.94); backdrop-filter:saturate(1.4) blur(10px); border-block-end:1px solid transparent; transition:box-shadow .2s,border-color .2s; } .site-header.is-stuck{border-block-end-color:var(--rule);box-shadow:0 6px 22px rgba(7,36,72,.07)} .header-inner{display:flex;align-items:center;gap:1.25rem;min-block-size:72px;padding-block:.6rem} .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--navy);flex:0 0 auto} .brand img{inline-size:44px;block-size:44px} .brand-name{font-family:var(--font-display);font-weight:700;font-size:1.06rem;line-height:1.2} .header-nav{display:flex;gap:1.6rem;margin-inline-start:auto;font-size:1rem} .header-nav a{color:var(--navy-soft);text-decoration:none;font-weight:500;padding-block:.35rem;position:relative} .header-nav a::after{ content:"";position:absolute;inset-block-end:0;inset-inline:0;block-size:2px; background:var(--gold);transform:scaleX(0);transform-origin:inline-end;transition:transform .2s; } .header-nav a:hover::after,.header-nav a:focus-visible::after{transform:scaleX(1)} @media (max-width:900px){ .header-nav{display:none} .brand-name{font-size:.98rem} .header-inner{gap:.75rem} .site-header .btn-sm{margin-inline-start:auto} } /* ========================================================================== BUTTONS ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;text-align:center; font-family:var(--font-body);font-weight:700;font-size:1.15rem;line-height:1.3; padding:1.05rem 2.1rem;min-block-size:60px;border:2px solid transparent;border-radius:999px; text-decoration:none;cursor:pointer;transition:transform .16s,background .16s,color .16s,box-shadow .16s; } .btn-sm{font-size:1rem;padding:.6rem 1.35rem;min-block-size:46px} .btn-block{inline-size:100%;min-block-size:68px;font-size:1.25rem} .btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 3px 0 var(--gold-dark)} .btn-gold:hover,.btn-gold:focus-visible{background:#D2A85C;transform:translateY(-2px);box-shadow:0 5px 0 var(--gold-dark)} .btn-gold:active{transform:translateY(1px);box-shadow:0 1px 0 var(--gold-dark)} .btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)} .btn-ghost:hover,.btn-ghost:focus-visible{background:var(--navy);color:var(--cream)} /* the two hero buttons carry the same weight, so they get the same box */ .hero-cta .btn{min-inline-size:250px} /* youtube and facebook sit beside the WhatsApp button as plain circles, the same height as the buttons so the row reads as one line */ /* the two icons travel as one unit, so a phone never strands one of them on a line of its own */ .hero-social{display:inline-flex;align-items:center;gap:.9rem} .icon-link{ display:inline-flex;align-items:center;justify-content:center;flex:none; inline-size:62px;block-size:62px;border-radius:50%; border:2px solid var(--navy);background:transparent; transition:transform .16s,background .16s,border-color .16s; } .icon-link svg{inline-size:24px;block-size:24px;transition:fill .16s} .icon-link:hover,.icon-link:focus-visible{transform:translateY(-2px)} #heroWhatsapp svg{fill:#128C7E} #heroYoutube svg{fill:#C4302B} #heroFacebook svg{fill:#1462C4} #heroWhatsapp:hover,#heroWhatsapp:focus-visible{background:#128C7E;border-color:#128C7E} #heroYoutube:hover,#heroYoutube:focus-visible{background:#C4302B;border-color:#C4302B} #heroFacebook:hover,#heroFacebook:focus-visible{background:#1462C4;border-color:#1462C4} #heroWhatsapp:hover svg,#heroWhatsapp:focus-visible svg, #heroYoutube:hover svg,#heroYoutube:focus-visible svg, #heroFacebook:hover svg,#heroFacebook:focus-visible svg{fill:#FFFFFF} @media (max-width:600px){ .hero-cta .btn{min-inline-size:230px} } .btn-outline{background:transparent;color:var(--cream-on-navy);border-color:var(--gold)} .btn-outline:hover,.btn-outline:focus-visible{background:var(--gold);color:var(--navy)} .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none} /* ========================================================================== BANDS ========================================================================== */ .band{padding-block:clamp(3.5rem,7vw,6.5rem)} .band-cream{background:var(--cream)} .band-sand{background:var(--sand)} .band-navy{background:var(--navy-deep);color:var(--cream-on-navy)} .eyebrow{ font-family:var(--font-body);font-weight:700;font-size:.98rem;letter-spacing:.12em; text-transform:none;color:var(--gold-dark);margin:0 0 .6rem; } .eyebrow-light{color:var(--gold-light)} .section-title{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-4);line-height:1.15;margin:0 0 1.1rem;text-wrap:balance; } .section-title-light{color:var(--cream-on-navy)} .section-title.center{text-align:center} .sub-title{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-2);margin:2.6rem 0 1.2rem; } .section-body{font-size:var(--step-1);max-inline-size:62ch;margin:0 0 1.1rem} .section-body-light{color:var(--cream-on-navy)} /* ========================================================================== HERO ========================================================================== */ .hero{ background: radial-gradient(ellipse 90% 60% at 50% 0%,rgba(199,154,74,.14),transparent 70%), var(--cream); padding-block:clamp(3rem,7vw,6rem) clamp(3.5rem,8vw,6.5rem); text-align:center; } .hero-inner{display:flex;flex-direction:column;align-items:center;gap:0} .hero-logo{inline-size:clamp(84px,11vw,128px);block-size:auto;margin-block-end:1.5rem} .hero-title{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-5);line-height:1.05;margin:0 0 1.4rem;letter-spacing:-.01em; } .hero-title-line{display:block} .hero-title-name{color:var(--navy)} .hero-lead{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-3);line-height:1.45;margin:0 0 1.5rem;max-inline-size:22ch;text-wrap:balance; } .hero-sub{font-size:var(--step-1);color:var(--navy-soft);margin:0 0 2.3rem;max-inline-size:40ch} .spaced-word{ letter-spacing:.42em;font-weight:700;color:var(--navy); margin-inline:.25em; /* letter-spacing, not literal spaces */ } .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center} /* ========================================================================== HOSTS ========================================================================== */ .hosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem;margin-block:2.4rem 2.6rem} .host-card{ background:var(--white);border-radius:var(--radius-lg);padding:2.4rem 1.9rem 2.1rem; box-shadow:var(--shadow);text-align:center; } .host-card picture{display:block;inline-size:clamp(150px,20vw,200px);margin-inline:auto;margin-block-end:1.3rem} .host-card img{border-radius:50%;border:4px solid var(--gold);aspect-ratio:1;object-fit:cover} .host-card h3{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-2);margin:0 0 .7rem; } .host-card p{margin:0;font-size:1.05rem;line-height:1.72} .host-facts{ list-style:none;margin:0;padding:0;display:grid;gap:.9rem; border-block-start:1px solid var(--rule);padding-block-start:2rem; text-align:center;font-size:var(--step-1);color:var(--navy); } .host-facts li{margin:0} /* ========================================================================== STATEMENT ========================================================================== */ .statement{text-align:center} .statement-title{ font-family:var(--font-display);font-weight:700;color:var(--cream-on-navy); font-size:var(--step-4);line-height:1.25;margin:0 0 1.2rem;text-wrap:balance; } .statement-body{font-size:var(--step-2);color:var(--gold-light);margin:0;line-height:1.6} /* ========================================================================== SPLIT + PULL ========================================================================== */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center} @media (max-width:820px){.split{grid-template-columns:1fr}} .split-text p{font-size:var(--step-1);margin:0 0 1rem;max-inline-size:52ch} .split-media{margin:0} .split-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);inline-size:100%;object-fit:cover;aspect-ratio:16/9} .pull{ margin-block-start:clamp(3rem,6vw,5rem);padding-block-start:clamp(2.5rem,5vw,3.5rem); border-block-start:2px solid var(--gold);text-align:center; } .pull-title{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-4);margin:0 0 .8rem; } .pull-body{font-size:var(--step-2);color:var(--navy-soft);margin:0 auto;max-inline-size:34ch;line-height:1.55} /* ========================================================================== QUESTIONS ========================================================================== */ .questions{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:q} .questions li{ display:flex;align-items:flex-start;gap:1.1rem;background:var(--white); border-radius:var(--radius);padding:1.3rem 1.5rem;box-shadow:0 1px 3px rgba(7,36,72,.05); border-inline-start:4px solid var(--gold); } .q-num{ font-family:var(--font-display);font-weight:700;color:var(--gold-dark); font-size:1.5rem;line-height:1.2;flex:0 0 auto;direction:ltr;unicode-bidi:isolate; min-inline-size:2.2ch; } .q-text{font-size:var(--step-1);color:var(--navy);font-weight:500;line-height:1.6} .invite{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-2);text-align:center;margin:3rem auto .9rem; max-inline-size:26ch;line-height:1.45;text-wrap:balance; } .invite-sub{ font-size:var(--step-1);color:var(--navy-soft);text-align:center; margin:0 auto 2rem;max-inline-size:40ch;line-height:1.7;text-wrap:pretty; } .three-up{ list-style:none;margin:0 0 3rem;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem;text-align:center; } .three-up li{ padding:1.7rem 1.2rem;background:var(--white);border-radius:var(--radius); font-size:var(--step-1);color:var(--navy);font-weight:500;line-height:1.55; box-shadow:0 1px 3px rgba(7,36,72,.05); } /* ---------- details bar ---------- */ .details{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0;margin:0 0 2.6rem;background:var(--navy-deep);border-radius:var(--radius-lg); overflow:hidden;color:var(--cream-on-navy); } /* dt comes first in the DOM for valid HTML, shown second by column-reverse */ .detail{padding:1.7rem 1.2rem;text-align:center;border-inline-start:1px solid var(--rule-light); display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.3rem} .detail:first-child{border-inline-start:0} @media (max-width:660px){ .detail{border-inline-start:0;border-block-start:1px solid var(--rule-light)} .detail:first-child{border-block-start:0} } .detail dd{ margin:0;font-family:var(--font-display);font-weight:700; font-size:1.5rem;color:var(--gold-light);line-height:1.25; } .detail dt{margin:0;font-size:.98rem;color:var(--cream-on-navy);opacity:.82} .center-cta{text-align:center;margin:0} /* ========================================================================== ASKS + TOPICS ========================================================================== */ .asks{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem} .asks li{ font-family:var(--font-display);font-weight:700;font-size:var(--step-2); color:var(--gold-light);padding-inline-start:1.4rem;border-inline-start:3px solid var(--gold); line-height:1.45; } .topics{ list-style:none;margin:2.5rem 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem; } .topics li{ background:var(--white);border-radius:var(--radius);padding:1.5rem 1.4rem;text-align:center; font-family:var(--font-display);font-weight:700;font-size:1.22rem;color:var(--navy); line-height:1.4;box-shadow:0 1px 3px rgba(7,36,72,.05); display:flex;align-items:center;justify-content:center;min-block-size:96px; } .quote{ margin:2.8rem 0 0;padding:2.2rem 2rem;background:var(--sand); border-radius:var(--radius-lg);border-inline-start:5px solid var(--gold); } .quote p{ margin:0;font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-2);line-height:1.55; } /* ========================================================================== FORM ========================================================================== */ .register-lines{ color:var(--cream-on-navy);font-size:var(--step-1);margin:0 0 2rem;line-height:1.8; } .register-lines strong{color:var(--gold-light);font-weight:700} .form{display:grid;gap:1.3rem;margin:0} .field{display:grid;gap:.45rem} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem} @media (max-width:600px){.field-row{grid-template-columns:1fr}} .form label{ font-weight:700;font-size:1.06rem;color:var(--cream-on-navy);line-height:1.5; } .form .en{font-weight:400;opacity:.72;font-size:.95rem;margin-inline-start:.3em} .form .opt{font-weight:400;opacity:.62;font-size:.92rem;margin-inline-start:.3em} .form input[type="text"],.form input[type="email"],.form input[type="tel"],.form textarea{ font-family:var(--font-body);font-size:1.13rem;color:var(--navy); background:var(--white);border:2px solid transparent;border-radius:12px; padding:.95rem 1.1rem;min-block-size:58px;inline-size:100%; transition:border-color .15s,box-shadow .15s; } .form textarea{min-block-size:120px;resize:vertical;line-height:1.7} .form input.narrow{max-inline-size:12ch} .form input::placeholder{color:#8A93A2;opacity:1} .form input:hover,.form textarea:hover{border-color:var(--gold-light)} .form input.is-error,.form textarea.is-error{border-color:#F0A08F} .hint{margin:0;font-size:.95rem;color:var(--cream-on-navy);opacity:.75;line-height:1.5} .err{margin:0;font-size:.98rem;color:#FFC7B8;font-weight:500} /* checkboxes are a real tap target */ .field-check{ display:flex;align-items:flex-start;gap:.9rem; background:rgba(255,255,255,.06);border-radius:12px;padding:1.1rem 1.2rem; } .field-check input[type="checkbox"]{ inline-size:30px;block-size:30px;min-inline-size:30px;margin:0; accent-color:var(--gold);cursor:pointer;flex:0 0 auto;margin-block-start:2px; } .field-check label{cursor:pointer;font-weight:500;font-size:1.05rem} .field-check a{color:var(--gold-light);text-underline-offset:3px} .field-join{background:rgba(227,197,131,.13);border:1px solid rgba(227,197,131,.3)} .field-join label{font-weight:700} /* honeypot: present for bots, clipped to nothing for people. No negative offset, so it can never widen the document. */ .hp{ position:absolute;inline-size:1px;block-size:1px; padding:0;margin:-1px;overflow:hidden;white-space:nowrap; clip-path:inset(50%);border:0; } .form-status{margin:0;font-size:1.05rem;color:var(--gold-light);min-block-size:1.5rem;text-align:center} .form-status.is-error{color:#FFC7B8} .after-form{ margin:1.8rem 0 0;font-size:1.02rem;color:var(--cream-on-navy);opacity:.85; text-align:center;line-height:1.7; } .success{ background:rgba(227,197,131,.12);border:2px solid var(--gold); border-radius:var(--radius-lg);padding:2.2rem 1.8rem;margin-block-end:1.5rem; } .success h3{ font-family:var(--font-display);font-weight:700;color:var(--gold-light); font-size:var(--step-3);margin:0 0 .9rem; } .success p{margin:0 0 1.3rem;font-size:var(--step-1);color:var(--cream-on-navy);line-height:1.75} .success-links{display:flex;flex-wrap:wrap;gap:.8rem} .success-links .zoom-pass{ display:block;inline-size:100%;margin-block-start:.4rem;font-size:1.02rem; color:var(--cream-on-navy);opacity:.85; } /* the drawn check, the eyebrow, and the settling of the panel contents */ .success-mark{ display:block;inline-size:56px;block-size:56px;margin:0 auto 1.1rem; } .success-mark svg{inline-size:100%;block-size:100%;display:block} .success-mark-ring{ fill:none;stroke:var(--gold);stroke-width:2.5;opacity:.55; } .success-mark-tick{ fill:none;stroke:var(--gold-light);stroke-width:4; stroke-linecap:round;stroke-linejoin:round; } .success-mark-ring,.success-mark-tick{stroke-dashoffset:0} .success-eyebrow{ font-family:var(--font-body);font-weight:700;font-size:.98rem;letter-spacing:.12em; color:var(--gold-light);text-align:center;margin:0 0 .5rem;opacity:.9; } .success h3,.success > p,.success-links{text-align:center} .success-links{justify-content:center} /* ========================================================================== THE FLIP The registration form and the confirmation are the front and back of the same card. When a registration goes through, the card turns over instead of one element being swapped for the other. The two faces are very different heights, so the stage animates its own height alongside the turn, otherwise the confirmation would sit in a tall empty box. Everything here is inside the motion query. A visitor who has asked for reduced motion gets the plain swap, which is what the script falls back to on its own. ========================================================================== */ .flip-stage{position:relative} @media (prefers-reduced-motion:no-preference){ .shell-form{perspective:1800px} .flip-stage{ transform-style:preserve-3d; transition:height .95s cubic-bezier(.4,.05,.2,1); } /* Faces only leave the flow once the turn begins, so the form keeps sizing the stage normally while it is being filled in. */ .flip-stage.is-turning > .flip-face{ position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%; backface-visibility:hidden;-webkit-backface-visibility:hidden; } .flip-stage.is-turning > .flip-back{transform:rotateY(-180deg)} .flip-stage.is-flipped{ animation:gsc-flip .95s cubic-bezier(.4,.05,.2,1) forwards; } /* The dip in the middle gives the card some weight as it passes edge-on. */ @keyframes gsc-flip{ 0% {transform:rotateY(0) scale(1)} 50% {transform:rotateY(-90deg) scale(.93)} 100%{transform:rotateY(-180deg) scale(1)} } /* Contents settle in after the card lands. These are transitions, not animations, and that is deliberate. A transition's resting state is the visible one: if it never runs, for any reason, the confirmation is simply there. An animation with a backwards fill would hold the first keyframe instead and could leave the whole panel blank. The only thing that hides these is the card mid-turn, and :not(.is-in) releases them the moment it lands. ------------------------------------------------------------------ */ .flip-stage.is-turning .success-mark, .flip-stage.is-turning .success-eyebrow, .flip-stage.is-turning .success h3, .flip-stage.is-turning .success > p, .flip-stage.is-turning .success-links{ transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } .flip-stage.is-turning .success:not(.is-in) .success-mark, .flip-stage.is-turning .success:not(.is-in) .success-eyebrow, .flip-stage.is-turning .success:not(.is-in) h3, .flip-stage.is-turning .success:not(.is-in) > p, .flip-stage.is-turning .success:not(.is-in) .success-links{ opacity:0;transform:translateY(16px); } .flip-stage.is-turning .success.is-in .success-mark {transition-delay:.02s} .flip-stage.is-turning .success.is-in .success-eyebrow{transition-delay:.10s} .flip-stage.is-turning .success.is-in h3 {transition-delay:.17s} .flip-stage.is-turning .success.is-in > p {transition-delay:.24s} .flip-stage.is-turning .success.is-in .success-links {transition-delay:.31s} /* The tick draws itself, the ring sweeps in behind it. Same reasoning: the resting offset is zero, so a mark that never animates is a mark that is simply drawn. */ .flip-stage.is-turning .success-mark-ring{ stroke-dasharray:145;transition:stroke-dashoffset .7s cubic-bezier(.22,.61,.36,1) .2s; } .flip-stage.is-turning .success-mark-tick{ stroke-dasharray:36;transition:stroke-dashoffset .45s cubic-bezier(.22,.61,.36,1) .5s; } .flip-stage.is-turning .success:not(.is-in) .success-mark-ring{stroke-dashoffset:145} .flip-stage.is-turning .success:not(.is-in) .success-mark-tick{stroke-dashoffset:36} } /* ========================================================================== WHEN ========================================================================== */ .when-list{list-style:none;margin:0 0 2.4rem;padding:0;display:grid;gap:1rem} .when-list li{ font-size:var(--step-1);color:var(--navy);padding-inline-start:1.5rem;position:relative;line-height:1.65; } .when-list li::before{ content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em; inline-size:8px;block-size:8px;border-radius:50%;background:var(--gold); } .when-card{ background:var(--white);border-radius:var(--radius-lg);padding:2.3rem 2rem; text-align:center;box-shadow:var(--shadow);border-block-start:5px solid var(--gold); } .when-card-title{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-3);margin:0 0 .8rem;line-height:1.3; } .when-card-dates{ font-family:var(--font-display);font-weight:700;color:var(--gold-dark); font-size:var(--step-2);margin:0 0 1rem;direction:rtl; } .when-card-note{margin:0 0 1.7rem;font-size:1.05rem;color:var(--navy-soft);line-height:1.7} /* ========================================================================== FOOTER ========================================================================== */ .site-footer{background:var(--navy);color:var(--cream-on-navy);padding-block:clamp(3rem,6vw,4.5rem) 2rem} .footer-inner{ display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:clamp(2rem,4vw,3.5rem); padding-block-end:2.5rem;border-block-end:1px solid var(--rule-light); } @media (max-width:900px){.footer-inner{grid-template-columns:1fr;text-align:center}} .footer-brand img{inline-size:88px;margin-block-end:1.1rem} @media (max-width:900px){.footer-brand img{margin-inline:auto}} .footer-club{ font-family:var(--font-display);font-weight:700;font-size:1.16rem; line-height:1.6;color:var(--cream-on-navy);margin:0; } .footer-heading{ font-weight:700;font-size:.92rem;letter-spacing:.14em;color:var(--gold-light); margin:0 0 1rem; } .footer-hosts p{margin:0 0 1.2rem;font-size:1.01rem;line-height:1.7;opacity:.92} .footer-hosts strong{color:var(--gold-light);font-size:1.1rem} .footer-links .btn{margin-block-end:1.5rem} @media (max-width:900px){.footer-links .btn{margin-inline:auto}} /* The sprite is only a definitions block. It draws nothing itself. */ .icon-sprite{position:absolute;inline-size:0;block-size:0;overflow:hidden} /* Who to follow, grouped by person rather than by network, so it is clear whose account each icon opens. */ .follow{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.15rem} .follow-name{ display:block;font-weight:700;font-size:1.02rem;color:var(--gold-light); margin-block-end:.5rem; } .follow-icons{display:flex;flex-wrap:wrap;gap:.6rem} @media (max-width:900px){.follow-icons{justify-content:center}} /* Deliberately not .icon-link. That name already belongs to the big brand-coloured buttons in the hero, and reusing it here silently resized them. These are their own thing: small, quiet, cream on navy. */ .follow-link{ display:inline-flex;align-items:center;justify-content:center;flex:none; inline-size:38px;block-size:38px;border-radius:50%; border:1px solid var(--rule-light);color:var(--cream-on-navy); transition:color .15s,border-color .15s,background-color .15s,transform .15s; } .follow-link svg{inline-size:19px;block-size:19px;display:block} .follow-link:hover,.follow-link:focus-visible{ color:var(--navy);background:var(--gold-light);border-color:var(--gold-light); transform:translateY(-2px); } @media (prefers-reduced-motion:reduce){.follow-link:hover,.follow-link:focus-visible{transform:none}} .footer-meta-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem} @media (max-width:900px){.footer-meta-links{justify-content:center}} .footer-meta-links a{ color:var(--cream-on-navy); /* was 2.33:1 grey on navy, now 12:1 */ text-decoration:none;font-size:1.02rem;border-block-end:1px solid transparent; padding-block-end:2px;transition:border-color .15s,color .15s; } .footer-meta-links a:hover, .footer-meta-links a:focus-visible{color:var(--gold-light);border-block-end-color:var(--gold-light)} .footer-meta-links{font-size:.98rem;opacity:.85} .footer-legal{padding-block-start:1.8rem} .footer-legal p{margin:0;font-size:.95rem;line-height:1.7;opacity:.72;text-align:center} /* ========================================================================== FLOATING WHATSAPP ========================================================================== */ .wa-float{ position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:90; inline-size:60px;block-size:60px;border-radius:50%; background:#25D366;color:#FFFFFF; display:flex;align-items:center;justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.22);transition:transform .18s,box-shadow .18s; } .wa-float:hover,.wa-float:focus-visible{transform:scale(1.07);box-shadow:0 8px 26px rgba(0,0,0,.3)} /* the button would sit on top of the form fields, so it steps aside while the registration form is on screen */ .wa-float.is-tucked{opacity:0;transform:scale(.7) translateY(12px);pointer-events:none} @media (max-width:600px){.wa-float{inline-size:56px;block-size:56px;inset-block-end:16px;inset-inline-end:16px}} /* ========================================================================== GENTLE REVEAL Deliberate design: the RESTING state of every element is fully visible. The animation is additive, a keyframe that runs from hidden to visible with animation-fill-mode:backwards, so the element's normal state is the end state. If JavaScript never runs, the observer never fires, the browser is old, or animations are blocked, the content simply shows. It is not possible for this mechanism to leave anything invisible. ========================================================================== */ @media (prefers-reduced-motion:no-preference){ @keyframes gsc-rise{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } .gsc-animate{animation:gsc-rise .55s cubic-bezier(.22,.61,.36,1) backwards} /* hero animates on load, no observer involved */ .hero-logo{animation:gsc-rise .6s cubic-bezier(.22,.61,.36,1) backwards} .hero-title{animation:gsc-rise .6s .07s cubic-bezier(.22,.61,.36,1) backwards} .hero-lead{animation:gsc-rise .6s .14s cubic-bezier(.22,.61,.36,1) backwards} .hero-sub{animation:gsc-rise .6s .2s cubic-bezier(.22,.61,.36,1) backwards} .hero-cta{animation:gsc-rise .6s .26s cubic-bezier(.22,.61,.36,1) backwards} } /* ========================================================================== PRIVACY / 404 DOCUMENT PAGES ========================================================================== */ .doc{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem)} .doc h1{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-4);line-height:1.2;margin:0 0 .5rem; } .doc .updated{color:var(--gold-dark);font-weight:500;margin:0 0 2.5rem;font-size:1.02rem} .doc h2{ font-family:var(--font-display);font-weight:700;color:var(--navy); font-size:var(--step-2);margin:2.6rem 0 .8rem; } .doc p,.doc li{font-size:var(--step-1);line-height:1.8;max-inline-size:66ch} .doc p{margin:0 0 1rem} .doc ul{margin:0 0 1.2rem;padding-inline-start:1.4rem;display:grid;gap:.5rem} .doc a{color:var(--gold-dark);text-underline-offset:3px} .doc .back{margin-block-start:3rem;padding-block-start:2rem;border-block-start:1px solid var(--rule)} .error-page{ min-block-size:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:1.2rem;padding-block:4rem; } .error-page h1{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:var(--step-4);margin:0} .error-page p{font-size:var(--step-1);margin:0;max-inline-size:42ch} .error-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-block-start:.8rem} /* date separator between meeting dates */ .date-sep{color:var(--gold);margin-inline:.55em;font-weight:700} .when-card-dates .date-sep{color:var(--gold)} .register-lines .date-sep{color:var(--gold-light)}