/* ========================================================================== site.css — Iglesia Apostólica "1ra de Adelanto" The only stylesheet. Tokens from SPEC.md §2 (the flyer's THEME variable block). Navy = hero / header / footer / dark cards. Cream = reading surface. Gold = accents, rules, primary buttons only (never body text on cream). No web fonts, no @import, no third-party requests. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Self-hosted type. Files in assets/fonts, SIL OFL licences beside them. Archivo variable, wght 100-900, wdth 62-125 - wordmark, headings, UI, body Fraunces variable, wght 100-900 at opsz 40 - scripture and pull quotes Pinyon Script - the motto line only Shipping them means Windows and Android render what macOS renders. -------------------------------------------------------------------------- */ @font-face{ font-family:"Archivo Variable"; src:url("assets/fonts/archivo-var.woff2") format("woff2"); font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap; } @font-face{ font-family:"Fraunces Variable"; src:url("assets/fonts/fraunces-var.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; } @font-face{ font-family:"Pinyon Script Web"; src:url("assets/fonts/pinyon-script.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root{ /* navy family (backgrounds) */ --navy-1:#223a6e; --navy-2:#16264d; --navy-3:#0a1128; /* light family (text on navy, and paper) */ --ink-on-dark:#f5f1e6; --muted-1:#cfd9f0; --muted-2:#aebbdd; --muted-3:#8fa2cc; --display:#f3ead8; --verse-on-dark:#c8d3ec; --cream:#faf7f2; --cream-2:#f3ead8; --paper-line:#e6dcc6; --white:#ffffff; --text:#16264d; --text-muted:#4a5877; /* accents */ --gold:#e3c169; --gold-deep:#cfa94a; --gold-tint:#fbf3dc; --hair-gold:rgba(227,193,105,.55); --hair-gold-soft:rgba(227,193,105,.35); --card-dark:rgba(10,17,40,.55); --live:#e8413c; --live-glow:rgba(232,65,60,.9); --fb:#1877F2; --zelle:#6D1ED4; --error-text:#8a1c1c; --error-bg:#fbe9e7; --focus:#16264d; /* focus ring on cream/white (13.9:1 vs cream) */ --focus-on-dark:#e3c169; /* focus ring on navy surfaces (8.5:1 vs navy-2) */ --big-shadow:rgba(0,0,0,.45); --ink-wash:rgba(245,241,230,.12); --navy-wash:rgba(22,38,77,.08); /* type */ --font-display:"Archivo Variable","Avenir Next Condensed","Helvetica Neue","Arial Narrow",sans-serif; --font-body:"Archivo Variable","Avenir Next",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-script:"Pinyon Script Web","Snell Roundhand","Brush Script MT",cursive; --font-serif:"Fraunces Variable","Iowan Old Style",Palatino,Georgia,serif; /* type scale (fluid; mobile → desktop) */ --fs-body:1.0625rem; --fs-small:0.9375rem; --fs-lead:clamp(1.2rem,2.2vw,1.375rem); --fs-h3:clamp(1.25rem,2.4vw,1.5rem); --fs-h2:clamp(1.75rem,4.5vw,2.5rem); --fs-h1:clamp(2.25rem,6vw,3.5rem); --fs-hero:clamp(2.75rem,9vw,5.75rem); --fs-eyebrow:0.95rem; --fs-script:clamp(1.5rem,3.4vw,2.25rem); --lh-body:1.6; --lh-tight:1.05; /* spacing */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --section-y:clamp(48px,8vw,96px); --container:1100px; --container-narrow:760px; --gutter:clamp(20px,4vw,32px); /* shape */ --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px; --shadow-1:0 6px 24px rgba(10,17,40,.12); --shadow-2:0 14px 40px rgba(10,17,40,.22); --dove-glow:drop-shadow(0 0 32px rgba(170,200,255,.5)) drop-shadow(0 10px 24px rgba(0,0,0,.3)); --header-h:64px; } /* -------------------------------------------------------------------------- 2. Reset and base -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--s5)); overflow-x:clip; } body{ margin:0; font:400 var(--fs-body)/var(--lh-body) var(--font-body); color:var(--text); background:var(--cream); overflow-x:clip; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; } img,svg,video,audio{max-width:100%;height:auto;display:block} h1,h2,h3,h4,p,figure,address,ul,ol{margin:0} address{font-style:normal} ul,ol{padding-left:1.25em} a{color:inherit;text-underline-offset:3px} a:hover{text-decoration-thickness:2px} button{font:inherit;color:inherit} strong{font-weight:700} code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95em} :focus-visible{outline:3px solid var(--focus);outline-offset:3px} .site-header :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.section--dark :focus-visible,.card--dark :focus-visible,.infocard :focus-visible,.site-footer :focus-visible,.skip-link:focus-visible{outline-color:var(--focus-on-dark)} :focus:not(:focus-visible){outline:none} /* Headings */ h1,h2,h3,.hero-display{font-family:var(--font-display);font-weight:700;line-height:var(--lh-tight);letter-spacing:0} h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);line-height:1.15} .h3{font-size:var(--fs-h3)} p + p{margin-top:var(--s4)} .lead{font-size:var(--fs-lead);line-height:1.5} .small{font-size:var(--fs-small);color:var(--text-muted)} .center{text-align:center} /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .container--narrow{max-width:var(--container-narrow)} .section{padding-block:var(--section-y)} .section--tight{padding-block:calc(var(--section-y) / 2)} .section--alt{background:var(--cream-2)} .section--dark{background:var(--navy-2);color:var(--ink-on-dark)} .section--dark h1,.section--dark h2,.section--dark h3{color:var(--ink-on-dark)} .section--dark .small{color:var(--muted-2)} .section-head{max-width:60ch;margin-bottom:var(--s6)} .section-head--center{margin-inline:auto;text-align:center} .section-head h2{margin-top:var(--s2)} .section-head .lead{margin-top:var(--s4);color:var(--text-muted)} .section--dark .section-head .lead{color:var(--muted-1)} .section-foot{margin-top:var(--s6)} .grid-2,.grid-3{display:grid;gap:var(--s5);grid-template-columns:1fr} .grid--center{align-items:center} @media (min-width:600px){ .grid-2,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} } .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Eyebrow */ .eyebrow{ font:600 var(--fs-eyebrow)/1.3 var(--font-display); text-transform:uppercase; letter-spacing:.22em; color:var(--text-muted); margin:0; } .section--dark .eyebrow,.hero .eyebrow,.page-hero .eyebrow,.card--dark .eyebrow,.site-footer .eyebrow,.infocard .eyebrow{color:var(--gold)} h2.eyebrow{font-size:var(--fs-eyebrow)} /* Gold rule */ .rule-gold{ height:1px;width:min(340px,60%);margin:var(--s5) auto;border:0; background:linear-gradient(90deg,transparent,var(--gold),transparent); } /* -------------------------------------------------------------------------- 4. Skip link -------------------------------------------------------------------------- */ .skip-link{ position:absolute;left:var(--s3);top:-100px;z-index:100; padding:var(--s3) var(--s4);border-radius:var(--r-sm); background:var(--gold);color:var(--text);font-weight:700;text-decoration:none; } .skip-link:focus{top:var(--s3);outline-offset:0} /* -------------------------------------------------------------------------- 5. Header, wordmark, language toggle, navigation -------------------------------------------------------------------------- */ .site-header{ position:sticky;top:0;z-index:50; background:var(--navy-3);color:var(--ink-on-dark); border-bottom:1px solid var(--hair-gold-soft); } .header-row{ display:flex;align-items:center;flex-wrap:wrap; gap:var(--s2);min-height:var(--header-h); } .brand{ display:inline-flex;align-items:center;gap:var(--s3); margin-right:auto;min-height:44px;padding-block:var(--s2); color:var(--ink-on-dark);text-decoration:none; } .brand-dove{width:40px;height:40px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(170,200,255,.45))} .brand-text{display:flex;flex-direction:column;line-height:1.1} .brand-name{font:700 1.05rem/1.1 var(--font-display);letter-spacing:.14em;color:var(--ink-on-dark)} .brand-sub{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:2px} @media (max-width:399px){.brand-sub{display:none}} @media (max-width:479px){ .brand{gap:var(--s2)} .brand-name{font-size:.95rem;letter-spacing:.08em} .lang-toggle,.nav-toggle{padding:0 10px;letter-spacing:.06em} } .lang-toggle,.nav-toggle{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:44px;padding:0 14px; border-radius:var(--r-pill);background:var(--navy-3); font:700 .95rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase; cursor:pointer;transition:background-color .2s,color .2s; } .lang-toggle{border:1px solid var(--gold);color:var(--gold)} .lang-toggle:hover{background:var(--gold);color:var(--text)} .nav-toggle{border:1px solid var(--muted-2);color:var(--ink-on-dark)} .nav-toggle:hover{background:var(--ink-wash)} .nav-toggle[aria-expanded="true"]{background:var(--navy-2);border-color:var(--gold)} /* Phone menu: full-bleed panel under the header */ .nav{ display:none;flex-basis:calc(100% + 2 * var(--gutter)); margin-inline:calc(-1 * var(--gutter)); background:var(--navy-2); border-top:1px solid var(--hair-gold-soft); } .nav.is-open{display:block} .nav ul{list-style:none;margin:0;padding:var(--s2) 0} .nav li + li{border-top:1px solid var(--hair-gold-soft)} .nav a{ display:flex;align-items:center;min-height:52px; padding:0 var(--gutter); color:var(--ink-on-dark);font:600 1rem/1.2 var(--font-body);text-decoration:none; transition:background-color .2s; } .nav a:hover{background:var(--ink-wash)} .nav a[aria-current="page"]:not(.btn){ text-decoration:underline;text-decoration-color:var(--gold); text-decoration-thickness:2px;text-underline-offset:6px; } .nav .nav-cta{border-top:0;padding:var(--s3) var(--gutter) var(--s2)} .nav a.btn-nav{min-height:44px;justify-content:center} @media (min-width:900px){ .header-row{flex-wrap:nowrap;gap:var(--s4)} .nav-toggle{display:none} .nav{display:block;flex-basis:auto;margin:0;background:transparent;border:0;order:1} .lang-toggle{order:2} .nav ul{display:flex;align-items:center;gap:var(--s5);padding:0} .nav li + li{border:0} .nav .nav-cta{padding:0} .nav a{min-height:44px;padding:0 var(--s1);border-radius:var(--r-sm)} .nav a:hover{background:transparent;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px} .nav a.btn-nav{min-height:44px;padding:8px 20px;margin-left:var(--s2)} } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:48px;min-width:44px;padding:12px 24px; border-radius:var(--r-pill);border:2px solid transparent; font:600 var(--fs-body)/1 var(--font-body);text-decoration:none;text-align:center; cursor:pointer;background:transparent; transition:background-color .2s,color .2s,border-color .2s,opacity .2s; } .btn:hover{text-decoration:none} .btn:disabled,.btn[aria-disabled="true"]{opacity:.65;cursor:default} .btn-primary{background:var(--gold);color:var(--text);border-color:var(--gold)} .btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--text)} .btn-outline{color:var(--text);border-color:var(--text)} .btn-outline:hover{background:var(--navy-wash)} .hero .btn-outline,.page-hero .btn-outline,.section--dark .btn-outline,.card--dark .btn-outline,.site-footer .btn-outline,.infocard .btn-outline{ color:var(--ink-on-dark);border-color:var(--ink-on-dark); } .hero .btn-outline:hover,.page-hero .btn-outline:hover,.section--dark .btn-outline:hover,.card--dark .btn-outline:hover,.site-footer .btn-outline:hover,.infocard .btn-outline:hover{ background:var(--ink-wash); } .btn-nav{min-height:44px;padding:8px 20px} .btn-sm{min-height:44px;padding:8px 18px;font-size:1rem} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center} .btn-row--center{justify-content:center} .hero .btn-row{justify-content:center} @media (max-width:599px){ .btn-block{width:100%} } /* Live dot */ .live-dot{ display:inline-block;width:11px;height:11px;border-radius:50%;flex-shrink:0; background:var(--live);box-shadow:0 0 8px var(--live-glow);vertical-align:middle; } .eyebrow .live-dot{margin-right:var(--s2);position:relative;top:-1px} /* Facebook line */ .fb-link{display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;min-height:44px} .fb-link:hover{text-decoration:underline;text-decoration-thickness:2px} .fb-badge{ display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; width:34px;height:34px;border-radius:8px;background:var(--fb); } .fb-badge svg{width:18px;height:18px} /* Text links that must be 44 px tap targets (map links, footer pages, episode links) */ .map-links a,.footer-nav a,.episode .links a{display:inline-flex;align-items:center;min-height:44px;padding-block:0;text-decoration:underline;font-weight:600} .map-links a:hover,.episode .links a:hover{text-decoration-thickness:2px} /* -------------------------------------------------------------------------- 7. Hero (home) and page hero (inner pages) -------------------------------------------------------------------------- */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:min(92vh,860px); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;color:var(--ink-on-dark); padding:var(--s6) 0 var(--s8); background:radial-gradient(ellipse 120% 80% at 50% 20%,var(--navy-1),var(--navy-2) 45%,var(--navy-3)); } .hero-photo{ position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover;object-position:center; opacity:.18;mix-blend-mode:luminosity; } .hero-rays{ position:absolute;top:-4%;left:50%;transform:translateX(-50%);z-index:-1; width:min(1200px,170vw);height:auto;opacity:.12;pointer-events:none; } .hero-inner{position:relative;display:flex;flex-direction:column;align-items:center} /* Scrim behind the hero text so copy stays ≥ 4.5:1 over bright photo regions */ .hero-inner::before{content:"";position:absolute;inset:-32px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,17,40,.6),rgba(10,17,40,0) 72%);pointer-events:none} .hero .rule-gold{margin:var(--s4) auto} .hero-dove{ width:min(62vw,340px);height:auto;margin:var(--s2) auto; filter:var(--dove-glow); } .hero-eyebrow{margin-top:var(--s2);color:var(--muted-1)} .hero .hero-eyebrow{color:var(--gold)} .hero-display{ font-size:var(--fs-hero);line-height:.95; text-transform:uppercase;letter-spacing:.04em; color:var(--display);text-shadow:0 6px 40px var(--big-shadow); margin:0; } .hero-sub{ margin-top:var(--s4);font-size:var(--fs-lead);line-height:1.4; color:var(--ink-on-dark);font-weight:500;max-width:36ch; } .hero-invite{margin-top:var(--s3);font-style:italic;color:var(--muted-1);max-width:40ch} .hero .btn-row{margin-top:var(--s5)} @media (max-height:700px){ .hero{padding:var(--s4) 0 var(--s6);min-height:0} .hero-dove{width:min(36vw,200px);margin:0 auto} .hero .rule-gold{margin:var(--s3) auto} .hero-sub{margin-top:var(--s3)} .hero-invite{margin-top:var(--s2)} .hero .btn-row{margin-top:var(--s4)} } .motto{ margin:0; font:700 clamp(1.05rem,3.4vw,1.5rem)/1.25 var(--font-display); text-transform:uppercase;letter-spacing:.2em;color:var(--ink-on-dark); } .motto .motto-accent{color:var(--gold)} .motto .motto-en{ display:block;margin-top:var(--s1); font:400 var(--fs-script)/1.2 var(--font-script); text-transform:none;letter-spacing:0;color:var(--muted-1); } .script{font:400 var(--fs-script)/1.2 var(--font-script)} .page-hero{ color:var(--ink-on-dark);text-align:center; padding-block:clamp(40px,7vw,72px); background:radial-gradient(ellipse 120% 80% at 50% 20%,var(--navy-1),var(--navy-2) 45%,var(--navy-3)); } .page-hero h1{margin-top:var(--s3);color:var(--display)} .page-hero .page-hero-sub{margin-top:var(--s3);font-size:var(--fs-lead);color:var(--muted-1)} /* -------------------------------------------------------------------------- 8. Cards, infocard, figure, verse, empty -------------------------------------------------------------------------- */ .card{ background:var(--white);border:1px solid var(--paper-line); border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:var(--s5); } .card h3{margin-bottom:var(--s3)} .card h2{margin-bottom:var(--s3)} .card .eyebrow + h3,.card .eyebrow + h2{margin-top:var(--s2)} .card--dark{ background:var(--navy-2);color:var(--ink-on-dark); border:1px solid var(--hair-gold-soft);box-shadow:var(--shadow-2); } .card--dark h2,.card--dark h3{color:var(--ink-on-dark)} .card--dark .small{color:var(--muted-2)} .card--band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);padding:var(--s6)} .card--band > div{flex:1 1 320px} .infocard{ border:1px solid var(--hair-gold);border-radius:var(--r-md); background:var(--card-dark);color:var(--ink-on-dark); display:flex;flex-direction:column;padding:var(--s3) var(--s3); } .infocard .cell{ flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--s1); padding:var(--s4) var(--s4);text-align:center; } .infocard .cell + .cell{border-top:1px solid var(--hair-gold-soft)} .infocard .lab{ font:600 .9rem/1.3 var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold); display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); } .infocard .val{font-size:1.4rem;font-weight:600;line-height:1.3;color:var(--ink-on-dark)} .infocard .val a{color:inherit} .infocard .val .fb-link{justify-content:center;font-size:1.15rem;text-align:left} .infocard .sub{color:var(--muted-2)} @media (min-width:700px){ .infocard{flex-direction:row;padding:var(--s5) var(--s2)} .infocard .cell + .cell{border-top:0;border-left:1px solid var(--hair-gold-soft)} .infocard .cell--wide{flex:1.35} .infocard .cell--wider{flex:1.55} } .figure{border-radius:var(--r-lg);overflow:hidden;margin:0;box-shadow:var(--shadow-1)} .figure img{width:100%;height:auto} .figure figcaption{font-size:var(--fs-small);color:var(--text-muted);padding:var(--s3) var(--s4);background:var(--white)} .section--dark .figure figcaption{background:var(--navy-3);color:var(--muted-2)} .verse{ font:italic 400 var(--fs-lead)/1.5 var(--font-serif); color:var(--text);max-width:60ch;margin:0; } .section--dark .verse,.hero .verse,.card--dark .verse{color:var(--verse-on-dark)} .verse-ref{ display:block;margin-top:var(--s3); font:600 .95rem/1.3 var(--font-display);font-style:normal; letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted); } .section--dark .verse-ref,.hero .verse-ref,.card--dark .verse-ref{color:var(--gold)} .verse-block{margin-top:var(--s6);padding-left:var(--s5);border-left:3px solid var(--gold)} .verse-block--center{border-left:0;padding-left:0;text-align:center;margin-inline:auto} .family{ font:600 clamp(1.1rem,3vw,1.5rem)/1.3 var(--font-display); letter-spacing:.14em;text-transform:uppercase;text-align:center; margin-top:var(--s6);color:var(--text); } .section--dark .family{color:var(--ink-on-dark)} .empty{ background:var(--cream-2);border:1px dashed var(--paper-line);border-radius:var(--r-md); padding:var(--s6) var(--s5);text-align:center;color:var(--text); } .section--alt .empty{background:var(--cream);} .empty h3{margin-bottom:var(--s3)} .empty .btn-row{justify-content:center;margin-top:var(--s5)} .empty .map-links,.empty .links{margin-top:var(--s4)} /* -------------------------------------------------------------------------- 9. JSON-driven rows: events, episodes, newsletters -------------------------------------------------------------------------- */ .events-list{display:grid;gap:var(--s5);grid-template-columns:1fr} @media (min-width:600px){.events-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:900px){.events-list{grid-template-columns:repeat(3,minmax(0,1fr))}} .events-list--rows{grid-template-columns:1fr} .event{display:flex;flex-direction:column;gap:var(--s3)} .event h3{margin:0} .event-when{font-weight:600;color:var(--text)} .card--dark .event-when{color:var(--ink-on-dark)} .event .btn-row{margin-top:auto;padding-top:var(--s2)} .events-next{margin-top:var(--s5);text-align:center} .events-next p{font-size:var(--fs-lead);font-weight:600} .events-next .btn-row{justify-content:center;margin-top:var(--s4)} .event-next-card{max-width:var(--container-narrow);margin-inline:auto} .event-next-card h3{font-size:var(--fs-h2)} .episode{display:flex;flex-direction:column;gap:var(--s3)} .episode + .episode{margin-top:var(--s5)} .episode-meta{color:var(--text-muted);font-size:var(--fs-small)} .episode audio{width:100%} .episode .links{display:flex;flex-wrap:wrap;gap:var(--s4)} .newsletter-item{display:flex;flex-direction:column;gap:var(--s2)} .newsletter-item + .newsletter-item{margin-top:var(--s4)} .newsletter-item time{font-size:var(--fs-small);color:var(--text-muted)} .newsletter-item h3 a{text-decoration:underline} /* -------------------------------------------------------------------------- 10. Forms -------------------------------------------------------------------------- */ .form{max-width:var(--container-narrow)} .form--compact{max-width:none} .field{margin-bottom:var(--s4)} .field label{display:block;font-weight:600;margin-bottom:var(--s2)} .field input,.field textarea,.field select{ display:block;width:100%;min-height:48px; padding:10px 14px;border:1px solid var(--text-muted);border-radius:var(--r-sm); background:var(--white);color:var(--text); font:400 1rem/1.4 var(--font-body); } .field textarea{min-height:140px;resize:vertical} .field input:focus,.field textarea:focus{border-color:var(--text)} .field-row{display:grid;gap:var(--s4);grid-template-columns:1fr} @media (min-width:600px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}} .radio-group{display:flex;flex-wrap:wrap;gap:var(--s4)} .radio-group label,.checkbox label{cursor:pointer} .radio,.checkbox{ display:flex;align-items:flex-start;gap:var(--s3); min-height:44px;padding:var(--s2) 0; } .radio{align-items:center} .radio input,.checkbox input{ width:22px;height:22px;flex-shrink:0;margin:3px 0 0; accent-color:var(--navy-2); } .radio input{margin-top:0} .form .btn{margin-top:var(--s2)} .form .small{margin-top:var(--s3)} fieldset{border:0;padding:0;margin:0 0 var(--s4)} legend{font-weight:600;margin-bottom:var(--s2);padding:0} .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .form-msg{ padding:var(--s4) var(--s5);border-radius:var(--r-sm);margin-bottom:var(--s4); color:var(--text); } .form-msg--ok{background:var(--gold-tint);border:1px solid var(--gold)} .form-msg--error{background:var(--error-bg);border-left:4px solid var(--error-text)} .form-msg .fb-link{margin-top:var(--s3)} .form[aria-busy="true"]{opacity:.85} /* -------------------------------------------------------------------------- 11. Footer -------------------------------------------------------------------------- */ .site-footer{ background:linear-gradient(180deg,var(--navy-2),var(--navy-3)); border-top:1px solid var(--hair-gold-soft); color:var(--muted-1);padding-block:var(--s8) var(--s6); } .footer-grid{display:grid;gap:var(--s6);grid-template-columns:1fr} @media (min-width:600px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:900px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr .8fr}} .site-footer .eyebrow{margin-bottom:var(--s3)} .site-footer p + p{margin-top:var(--s3)} .site-footer a{color:var(--ink-on-dark)} .site-footer strong{color:var(--ink-on-dark)} .footer-brand img{filter:drop-shadow(0 0 14px rgba(170,200,255,.45));margin-bottom:var(--s3)} .footer-name{font:700 1.25rem/1.2 var(--font-display);letter-spacing:.06em;color:var(--ink-on-dark)} .footer-brand .motto{margin-top:var(--s3);font-size:1rem;letter-spacing:.16em} .footer-brand .motto .motto-en{font-size:1.5rem} .footer-nav{list-style:none;padding:0;margin:0} .footer-nav a{text-decoration:none} .footer-nav a:hover{text-decoration:underline} .footer-bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--hair-gold-soft);font-size:var(--fs-small);color:var(--muted-2)} .site-footer .footer-bottom .small{color:var(--muted-2)} .site-footer .fb-link{color:var(--ink-on-dark)} /* -------------------------------------------------------------------------- 12. Page-specific helpers (shared so every builder can use them) -------------------------------------------------------------------------- */ .zelle-tile{ background:var(--white);padding:var(--s5);border:2px solid var(--zelle); border-radius:var(--r-md);text-align:center;max-width:380px;margin-inline:auto; } .zelle-tile img{max-width:300px;margin-inline:auto} .zelle-word{display:block;margin-top:var(--s3);color:var(--zelle);font-weight:700;font-size:1.4rem} .kv{display:grid;gap:var(--s4)} .kv .lab{font:600 .9rem/1.3 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)} .kv .val{font-size:1.4rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere} /* -------------------------------------------------------------------------- 13. Motion, print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } @media print{ .site-header .nav,.nav-toggle,.lang-toggle,.footer-nav,.skip-link,.hero-rays,.hero-photo,.btn-row button{display:none!important} .site-header,.hero,.page-hero,.section--dark,.site-footer,.card--dark,.infocard{background:var(--white)!important;color:var(--text)!important;box-shadow:none!important} .hero-display,.page-hero h1,.section--dark h2,.section--dark h3,.card--dark h2,.card--dark h3,.infocard .val,.motto,.footer-name,.brand-name{color:var(--text)!important;text-shadow:none!important} .site-footer a,.section--dark a,.card--dark a,.infocard a,.infocard .sub,.section--dark .verse,.section--dark p,.site-footer p{color:var(--text)!important} .map-links a::after,.fb-link::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all} .hero{min-height:0} .card,.figure{box-shadow:none!important} a{text-decoration:underline} } /* -------------------------------------------------------------------------- Home: welcome video band -------------------------------------------------------------------------- */ .section--video{background:var(--navy-3)} .video-frame{max-width:1100px;margin-inline:auto;border-radius:16px;overflow:hidden;background:#000; border:1px solid var(--hair-gold);box-shadow:0 24px 60px rgba(0,0,0,.45)} .site-video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000} .video-note{text-align:center;margin-top:var(--s4);color:var(--muted-2)} @media (max-width:640px){.video-frame{border-radius:10px}} /* -------------------------------------------------------------------------- Home: the welcome clip runs behind the WHOLE page (fixed), and every section floats over it as a translucent panel with a gold border, rising into view as it arrives. The poster frame stands in until the video plays. -------------------------------------------------------------------------- */ body.page-glass{background:var(--navy-3)} .page-video{position:fixed;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center 40%;background:var(--navy-3);pointer-events:none} .page-shade{position:fixed;inset:0;z-index:-2;pointer-events:none; background:linear-gradient(180deg,rgba(10,17,40,.28) 0%,rgba(10,17,40,.42) 55%,rgba(10,17,40,.66) 100%)} body.page-glass .hero{background:transparent;isolation:auto} body.page-glass .hero-rays{opacity:.07} body.is-video .hero-dove{display:none} body.page-glass main>section:not(.hero){ width:min(100% - 2 * var(--gutter),var(--container)); margin:var(--s6) auto; border:1px solid var(--hair-gold);border-radius:20px;overflow:hidden; background:rgba(250,247,242,.36); -webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1); box-shadow:0 24px 60px rgba(0,0,0,.35); } body.page-glass main>section.section--alt{background:rgba(243,234,216,.36)} body.page-glass main>section.section--dark{background:rgba(22,38,77,.48)} body.page-glass .site-header{background:rgba(10,17,40,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} body.page-glass .site-footer{background:rgba(10,17,40,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hair-gold)} html:not(.no-js) body.page-glass main>section:not(.hero){opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease} html:not(.no-js) body.page-glass main>section.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html:not(.no-js) body.page-glass main>section:not(.hero){opacity:1;transform:none;transition:none} } @media (max-width:640px){ body.page-glass main>section:not(.hero){border-radius:14px;margin:var(--s5) auto} } /* -------------------------------------------------------------------------- Home: modern pass — the clip stays vivid; header, panels and footer float as light glass with a bright top edge; reveals ease in with a touch of scale -------------------------------------------------------------------------- */ body.page-glass .page-video{filter:saturate(1.12) contrast(1.04)} body.page-glass .page-shade{ background: radial-gradient(120% 90% at 50% 38%,rgba(10,17,40,0) 0%,rgba(10,17,40,.10) 55%,rgba(10,17,40,.55) 100%), linear-gradient(180deg,rgba(10,17,40,.16) 0%,rgba(10,17,40,.06) 45%,rgba(10,17,40,.38) 100%); } body.page-glass .hero-inner::before{background:radial-gradient(ellipse at center,rgba(10,17,40,.55),rgba(10,17,40,0) 70%)} body.page-glass .hero-display{text-shadow:0 4px 30px rgba(10,17,40,.7),0 1px 2px rgba(10,17,40,.5)} body.page-glass .hero-sub,body.page-glass .hero-invite,body.page-glass .hero-eyebrow,body.page-glass .motto{text-shadow:0 1px 14px rgba(10,17,40,.6)} body.page-glass .site-header{ top:10px;width:min(100% - 2 * var(--gutter),1280px);margin:10px auto 0; border-radius:28px;border:1px solid rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.16); background:rgba(10,17,40,.42); -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2); box-shadow:0 12px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.14); } body.page-glass .site-header .nav{margin-inline:0;flex-basis:100%;border-radius:18px;background:rgba(10,17,40,.55);border-top:0;margin-top:var(--s2);margin-bottom:var(--s2)} body.page-glass .site-header .nav a{padding-inline:var(--s4)} body.page-glass main>section:not(.hero){ border-radius:24px;border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15); box-shadow:0 30px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.45); } body.page-glass main>section.section--dark{border-color:rgba(227,193,105,.45);box-shadow:0 30px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.12)} body.page-glass .site-footer{width:min(100% - 2 * var(--gutter),var(--container));margin:0 auto var(--s6);border-radius:24px;border:1px solid rgba(255,255,255,.16);background:rgba(10,17,40,.45)} html:not(.no-js) body.page-glass main>section:not(.hero){transform:translateY(24px) scale(.985);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)} html:not(.no-js) body.page-glass main>section.is-in{transform:none} body.page-glass .btn{transition:transform .2s,box-shadow .2s,background-color .2s,color .2s} body.page-glass .btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.25)} @media (max-width:640px){ body.page-glass .site-header{top:6px;margin-top:6px;border-radius:20px} body.page-glass main>section:not(.hero),body.page-glass .site-footer{border-radius:18px} } body.page-glass .brand-name,body.page-glass .brand-sub,body.page-glass .lang-toggle,body.page-glass .nav-toggle{white-space:nowrap} body.page-glass .site-header .header-row{flex-wrap:nowrap} @media (max-width:899px){body.page-glass .site-header .header-row{flex-wrap:wrap}} @media (min-width:900px){body.page-glass .site-header .nav a{padding-inline:var(--s3)}} body.page-glass .site-header .nav a{white-space:nowrap} @media (min-width:900px) and (max-width:1139px){ body.page-glass .site-header .nav a{font-size:.9rem;padding-inline:10px} body.page-glass .brand-sub{display:none} } @media (max-width:899px){ body.page-glass .site-header{width:calc(100% - 16px);margin:6px 8px 0;border-radius:20px} body.page-glass .site-header .container{padding-inline:12px} body.page-glass .site-header .nav{margin-inline:-12px;flex-basis:calc(100% + 24px);border-radius:0 0 18px 18px;margin-bottom:0} } /* inner pages: the title band is a dark glass panel too */ body.page-glass main>section.page-hero{background:rgba(22,38,77,.48);border-color:rgba(227,193,105,.45);box-shadow:0 30px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.12)} body.page-glass .page-hero--photo .hero-photo{opacity:.22} /* ========================================================================== 14. Craft pass — self-hosted type, material depth, choreographed motion. Everything below is additive. Deleting this whole block and the @font-face rules at the top of the file returns the site to the previous look. ========================================================================== */ /* 14.1 Typography --------------------------------------------------------- Archivo carries the wordmark, headings, UI and body at three widths; Fraunces carries scripture; Pinyon carries the motto. Because all three are shipped with the site, Windows and Android now render exactly what macOS renders — previously they fell back to Arial Narrow. */ body{ font-optical-sizing:auto; font-synthesis-weight:none; font-feature-settings:"kern" 1,"calt" 1; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,.h3{font-stretch:88%;letter-spacing:-.015em;text-wrap:balance} p,li,figcaption,blockquote{text-wrap:pretty} .lead{font-weight:380;letter-spacing:-.004em} .hero-display{font-stretch:78%;font-weight:750;letter-spacing:.03em} .page-hero h1{font-stretch:80%;font-weight:720;letter-spacing:.015em;text-transform:uppercase} .brand-name{font-stretch:74%;font-weight:760;letter-spacing:.15em} .eyebrow,.infocard .lab{font-stretch:86%;font-weight:640} .nav a,.btn,.footer-nav a{font-stretch:92%} .btn{font-weight:640;letter-spacing:.015em} .infocard .val{font-stretch:92%;font-weight:620;letter-spacing:-.01em} .verse{ font-family:var(--font-serif);font-weight:360;font-style:normal; letter-spacing:-.008em;line-height:1.42; } .verse-ref{font-stretch:86%;font-weight:620} .motto{font-stretch:82%;font-weight:720} .hero-invite{font-family:var(--font-serif);font-weight:360;font-style:italic} ::selection{background:var(--gold);color:var(--navy-3)} ::marker{color:var(--gold-deep)} /* 14.2 Material — a whisper of film grain over the whole page kills the banding that fixed video plus large gradients always produces. */ body.page-glass::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); background-size:160px 160px; } /* A slow light drifts across the clip, the way sun moves through a window. */ body.page-glass .page-shade::after{ content:"";position:absolute;inset:-30%;pointer-events:none; background:radial-gradient(42% 32% at 24% 16%,rgba(255,240,205,.20),rgba(255,240,205,0) 62%); animation:craft-sheen 24s ease-in-out infinite alternate; } @keyframes craft-sheen{ from{transform:translate3d(-5%,-3%,0) scale(1)} to{transform:translate3d(8%,5%,0) scale(1.12)} } /* 14.3 Panels — a gold light-edge on top, deeper ambient shadow below, and a hairline that catches the light along the leading edge. */ body.page-glass main>section:not(.hero){ position:relative; box-shadow: 0 2px 6px rgba(10,17,40,.10), 0 12px 28px rgba(10,17,40,.14), 0 40px 90px rgba(10,17,40,.30), inset 0 1px 0 rgba(255,255,255,.50); } body.page-glass main>section:not(.hero)::before{ content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(227,193,105,.85) 22%,rgba(255,255,255,.9) 50%,rgba(227,193,105,.85) 78%,transparent); opacity:.7; } body.page-glass main>section.section--dark::before{opacity:.55} /* 14.4 Header — the bar tightens and gains contrast once the page moves. */ body.page-glass .site-header{ transition:background-color .35s ease,box-shadow .35s ease,transform .35s ease,border-color .35s ease; } body.is-scrolled.page-glass .site-header{ background:rgba(10,17,40,.72); border-color:rgba(227,193,105,.28); box-shadow:0 10px 34px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.18); } .nav a{position:relative} .nav a::after{ content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:6px;height:2px; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); border-radius:2px;transform:scaleX(0);transform-origin:50% 50%; transition:transform .28s cubic-bezier(.2,.7,.2,1); } .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)} .nav a:hover{text-decoration:none} /* Reading progress — a thin gold seam across the very top of the window. */ .scroll-progress{ position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--gold-deep),var(--gold) 55%,#fff4d2); box-shadow:0 0 16px rgba(227,193,105,.55); } /* 14.5 Buttons — gold with a lit top edge, and a spring on the way up. */ .btn{ transition:transform .28s cubic-bezier(.34,1.4,.64,1),box-shadow .28s ease, background-color .2s,color .2s,border-color .2s,opacity .2s; } .btn-primary{ background:linear-gradient(180deg,#f2d891 0%,var(--gold) 46%,var(--gold-deep) 100%); border-color:var(--gold-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 8px 22px rgba(207,169,74,.34); } .btn-primary:hover{ background:linear-gradient(180deg,#f7e3a8 0%,#e8ca78 46%,var(--gold-deep) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px rgba(207,169,74,.46); } .btn-outline{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} /* 14.6 Cards lift toward the reader on hover. */ .card{ transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease; } .card:hover{ transform:translateY(-4px); box-shadow:0 4px 10px rgba(10,17,40,.08),0 22px 48px rgba(10,17,40,.20); border-color:var(--hair-gold); } .card--dark:hover{border-color:var(--hair-gold)} /* 14.7 Eyebrows get a short gold seam, the way a printed masthead does. */ .section-head--center .eyebrow::before,.section-head--center .eyebrow::after{ content:"";display:inline-block;vertical-align:middle;width:28px;height:1px; background:linear-gradient(90deg,transparent,var(--gold-deep)); margin-right:var(--s3);position:relative;top:-2px; } .section-head--center .eyebrow::after{ background:linear-gradient(90deg,var(--gold-deep),transparent); margin-right:0;margin-left:var(--s3); } /* 14.8 Motion — sections rise, then their contents follow in sequence. */ html:not(.no-js) body.page-glass main>section:not(.hero) .container>*{ opacity:0;transform:translateY(16px); transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1); } html:not(.no-js) body.page-glass main>section.is-in .container>*{opacity:1;transform:none} html:not(.no-js) body.page-glass main>section.is-in .container>:nth-child(1){transition-delay:.06s} html:not(.no-js) body.page-glass main>section.is-in .container>:nth-child(2){transition-delay:.14s} html:not(.no-js) body.page-glass main>section.is-in .container>:nth-child(3){transition-delay:.22s} html:not(.no-js) body.page-glass main>section.is-in .container>:nth-child(4){transition-delay:.30s} html:not(.no-js) body.page-glass main>section.is-in .container>:nth-child(n+5){transition-delay:.36s} /* The clip drifts a little slower than the page, so depth reads as depth. */ body.page-glass .page-video{ transform:translate3d(0,calc(var(--parallax,0) * 1px),0) scale(1.06); will-change:transform; } /* Hero copy arrives on load rather than simply being there. */ html:not(.no-js) .hero-inner>*{animation:craft-rise .9s cubic-bezier(.2,.7,.2,1) both} html:not(.no-js) .hero-inner>:nth-child(1){animation-delay:.05s} html:not(.no-js) .hero-inner>:nth-child(2){animation-delay:.14s} html:not(.no-js) .hero-inner>:nth-child(3){animation-delay:.23s} html:not(.no-js) .hero-inner>:nth-child(4){animation-delay:.32s} html:not(.no-js) .hero-inner>:nth-child(n+5){animation-delay:.40s} @keyframes craft-rise{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} } /* A quiet cue that there is more below the fold. */ .scroll-cue{ position:absolute;left:50%;bottom:clamp(14px,3vh,30px);transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:var(--s2); color:var(--muted-1);pointer-events:none; } .scroll-cue .scroll-cue-line{ width:1px;height:38px;border-radius:1px; background:linear-gradient(180deg,rgba(227,193,105,0),var(--gold)); animation:craft-cue 2.4s ease-in-out infinite; } .scroll-cue .scroll-cue-word{ font:640 .68rem/1 var(--font-display);font-stretch:86%; text-transform:uppercase;letter-spacing:.26em;color:var(--gold); } @keyframes craft-cue{ 0%,100%{opacity:.35;transform:scaleY(.65);transform-origin:50% 0} 50%{opacity:1;transform:scaleY(1);transform-origin:50% 0} } /* 14.9 The map — a printed-looking plate of the block, drawn from OpenStreetMap data and tinted to the brand. Attribution is required by ODbL and sits under the plate on every page that shows it. */ .map-plate{ display:block;position:relative;margin-top:var(--s5); border-radius:18px;overflow:hidden; border:1px solid var(--hair-gold); box-shadow:0 2px 8px rgba(10,17,40,.10),0 18px 42px rgba(10,17,40,.22); text-decoration:none;color:inherit;background:var(--navy-3); transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease; } .map-plate:hover{ transform:translateY(-3px);border-color:var(--gold); box-shadow:0 4px 12px rgba(10,17,40,.12),0 26px 56px rgba(10,17,40,.30); } .map-plate img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover} .map-chip{ position:absolute;right:10px;top:10px; display:inline-flex;align-items:center;gap:6px; padding:7px 13px;border-radius:var(--r-pill); font:640 .78rem/1 var(--font-display);font-stretch:88%; letter-spacing:.12em;text-transform:uppercase; color:var(--navy-3);background:linear-gradient(180deg,#f2d891,var(--gold) 55%,var(--gold-deep)); border:1px solid rgba(255,255,255,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 18px rgba(0,0,0,.35); } .map-chip::after{content:"\2197";font-size:.9em;line-height:1} .map-credit{ display:inline-block;margin-top:var(--s2);font-size:.75rem;color:var(--text-muted); letter-spacing:.01em;text-decoration:underline;text-underline-offset:2px; } .map-credit:hover{color:var(--text)} .section--dark .map-credit,.card--dark .map-credit{color:var(--muted-3)} @media (max-width:560px){ .map-plate img{aspect-ratio:4/3} .map-chip{right:8px;top:8px;padding:6px 11px;font-size:.72rem} } /* 14.10 Focus rings stay visible on glass. */ :focus-visible{outline-offset:3px;border-radius:2px} body.page-glass :focus-visible{box-shadow:0 0 0 6px rgba(227,193,105,.22)} /* 14.11 Respect the reader's motion setting for every addition above. */ @media (prefers-reduced-motion:reduce){ body.page-glass .page-shade::after,.scroll-cue .scroll-cue-line{animation:none} html:not(.no-js) .hero-inner>*{animation:none;opacity:1;transform:none} html:not(.no-js) body.page-glass main>section:not(.hero) .container>*{opacity:1;transform:none;transition:none} body.page-glass .page-video{transform:none} .btn:hover,.card:hover,.map-plate:hover{transform:none} .scroll-progress{display:none} } @media print{ .scroll-progress,.scroll-cue,body.page-glass::after{display:none!important} .map-plate{box-shadow:none!important;border:1px solid #999!important} } /* 14.12 Legibility over a bright clip — the welcome video is pale sky, so the lightest lines in the hero and the scroll cue need their own weight. */ body.page-glass .hero-invite{ color:var(--ink-on-dark);font-weight:420; text-shadow:0 1px 3px rgba(10,17,40,.55),0 2px 18px rgba(10,17,40,.75); } body.page-glass .hero-sub{text-shadow:0 1px 3px rgba(10,17,40,.5),0 2px 20px rgba(10,17,40,.7)} body.page-glass .motto .motto-en{color:var(--cream-2);text-shadow:0 1px 3px rgba(10,17,40,.6),0 2px 18px rgba(10,17,40,.8)} body.page-glass .scroll-cue .scroll-cue-word{ color:var(--cream-2);text-shadow:0 1px 3px rgba(10,17,40,.7),0 2px 14px rgba(10,17,40,.8); } body.page-glass .scroll-cue .scroll-cue-line{ background:linear-gradient(180deg,rgba(243,234,216,0),var(--cream-2)); box-shadow:0 0 10px rgba(10,17,40,.6); } /* 14.13 Hero fit and cue — keep the address on one line where it fits, give the invitation enough weight to read over sky, and make the scroll cue a small glass pill so it survives the brightest frames of the clip. */ .hero-sub{max-width:46ch;text-wrap:balance} body.page-glass .hero-invite{font-weight:520;font-size:1.05rem} .scroll-cue{ gap:var(--s3);padding:8px 14px 10px;border-radius:var(--r-pill); background:rgba(10,17,40,.34);border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2); box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22); } .scroll-cue .scroll-cue-line{height:26px} body.page-glass .scroll-cue .scroll-cue-word{color:var(--gold);text-shadow:0 1px 2px rgba(10,17,40,.8)} body.page-glass .scroll-cue .scroll-cue-line{background:linear-gradient(180deg,rgba(227,193,105,0),var(--gold));box-shadow:none} body.page-glass .hero-inner::before{background:radial-gradient(ellipse at center,rgba(10,17,40,.62),rgba(10,17,40,0) 72%)} /* 14.14 Header fit — seven links plus a call-to-action is a lot of bar. The condensed face buys room, and these two bands spend it: below 1140 the nav tightens, and on a 320-360 px phone the wordmark shrinks so the bar stays one row instead of two. Re-measure the bar at 320/360/390/900/1000/1280 after any change here. */ @media (min-width:900px) and (max-width:1139px){ body.page-glass .site-header .nav ul{gap:6px} body.page-glass .site-header .nav a{font-size:.82rem;padding-inline:7px;letter-spacing:0} body.page-glass .site-header .nav a.btn-nav{padding:8px 13px;margin-left:var(--s1)} body.page-glass .site-header .header-row{gap:var(--s3)} body.page-glass .brand-dove{width:34px;height:34px} body.page-glass .brand-name{font-size:.95rem;letter-spacing:.1em} } @media (min-width:1140px) and (max-width:1279px){ body.page-glass .site-header .nav ul{gap:var(--s4)} body.page-glass .site-header .nav a{font-size:.92rem;padding-inline:9px} } @media (max-width:389px){ body.page-glass .brand-dove{width:30px;height:30px} body.page-glass .brand-name{font-size:.82rem;letter-spacing:.06em} body.page-glass .brand{gap:var(--s2)} body.page-glass .lang-toggle,body.page-glass .nav-toggle{padding:0 9px;font-size:.85rem;min-width:40px} body.page-glass .site-header .container{padding-inline:10px} } /* ===== craft-2:type ===== */ /* ========================================================================== 14.15 Typographic craft - one scale, one label voice, and scripture set with the care it is owed. 14.1 chose the faces; this subsection sets them. Three facts drive everything below. 1. The display sizes were six independent clamps that reached their ceilings at six different widths, so the steps between them changed shape as the viewport moved. They now share one ramp. This IS a visible resize on desktop, not a like-for-like swap: see the table in 14.15.1. 2. Spanish runs about 20 percent longer than English and stacks accents above the cap height, so no rule here depends on a line count, and every heading is given room above the caps for A-acute, I-acute and N-tilde. 3. The shipped Fraunces is an optical-size 40 instance carrying a weight axis only, and neither variable family carries an italic at all. Optical size is therefore done by hand - weight, tracking and leading move with the size - and nothing asks for a slant the font cannot draw. Nothing here touches the header. --header-h, the wordmark, the toggles and the nav all size in fixed rem and are deliberately left off the ramp, so the one-row bar at 320/360/390/900/1024/1280 is unchanged by this subsection. ========================================================================== */ /* 14.15.1 One ramp, one scale. --type-t runs 0 to 1rem as the viewport travels 360px to 1192px, and each display size is its small value plus that progress times its own travel. Body, button and header sizes stay off the ramp on purpose. What actually changes, old -> new, in px: 320/360 900 1192+ lead 19.2->19 19.8->20.9 22->22 h3 20 ->21.8 21.6->25.2 24->27 h2 28 ->27.9 40 ->34.5 40->38 h1 36 ->35.7 54 ->47.6 56->54 hero 44 ->44 81 ->75.2 92->92 Phone widths are within 2px. Desktop is not: h3 grows 3px, h2 and h1 lose 2px at the ceiling and up to 6px mid-range because the old clamps topped out at 900-1024px and this one keeps climbing to 1192. Eyeball the h2/h3 rows on eventos and nosotros at 900 and 1280 before shipping. */ :root{ --type-t:clamp(0rem,(100vw - 22.5rem) / 52,1rem); --fs-lead:calc(1.1875rem + .1875 * var(--type-t)); /* 19 to 22 */ --fs-h3:calc(1.3625rem + .325 * var(--type-t)); /* 21.8 to 27 */ --fs-h2:calc(1.7438rem + .6313 * var(--type-t)); /* 27.9 to 38 */ --fs-h1:calc(2.2313rem + 1.1438 * var(--type-t)); /* 35.7 to 54 */ --fs-hero:calc(2.75rem + 3 * var(--type-t)); /* 44 to 92 */ --fs-eyebrow:.875rem; /* a label is not a heading: it does not scale */ --track-caps:.2em; --measure:38rem; /* about 70 characters at body size */ } /* 14.15.2 Leading and tracking, per level rather than one value for all. Tracking loosens as type gets smaller; 14.1 gave every heading the same -.015em. And 1.05 leading cannot clear a Spanish accent: at h2 size the acute on a second-line I-acute lands within half a pixel of the descender above it, so a two-line Spanish heading can touch itself where the English never does. These numbers put two to three pixels back. .h3 is sized like an h3 but carried no leading of its own, so it inherited whatever its parent had - body 1.6 in most places - and a card title marked .h3 sat looser than its h3 neighbours. .hero-display, .page-hero h1 and the eventos day label keep their own tracking: those selectors are more specific and still win. */ h1{line-height:1.08;letter-spacing:-.022em} h2{line-height:1.12;letter-spacing:-.016em} h3,.h3{line-height:1.24;letter-spacing:-.006em} /* 14.15.3 One label voice. The eyebrow, the infocard label, the kv label and the verse reference were four sizes and four tracking values doing one job; they are now 14px at .2em in the condensed cut. (.service-list .lab on nosotros is page-owned and still sits outside this - fold it in there if the mismatch shows.) Tracked caps also put a space after the LAST letter, which drags a centred label half a space left of centre. The correction is the FULL tracking value, not half of it: the box shrink-wraps around the trailing space, so centring gives half of any indent back before it lands. The flex label uses padding because text-indent does not reach a flex line, and the masthead seam shortens its own margin instead. The motto indent is scoped to the two centred mottos - the seven footer mottos are flush left against the footer column and must not move. */ .eyebrow,h2.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--track-caps);line-height:1.35} .infocard .lab,.kv .lab{font-size:var(--fs-eyebrow);letter-spacing:var(--track-caps)} .kv .lab{font-stretch:86%;font-weight:640} .center .eyebrow,.verse-block--center .verse-ref{text-indent:var(--track-caps)} .infocard .lab{padding-left:var(--track-caps)} .section-head--center .eyebrow::after{margin-left:calc(var(--s3) - var(--track-caps))} .family{text-indent:.14em} .hero .motto,.motto-hero .motto{text-indent:var(--track-caps)} .motto .motto-en{text-indent:0;line-height:1.3} .scroll-cue .scroll-cue-word{text-indent:.26em} /* 14.15.4 Measure. Body copy in the narrow column ran about 89 characters a line, a third longer than is comfortable; one token holds it near 70. Only unclassed paragraphs are treated as prose - a .lead is a deck and may span the column, and .motto, .closing and friends are display type that must never be boxed in. The three centred contexts need the auto margin, or a capped paragraph would hug the left edge of a centred block. Paragraph spacing becomes proportional so it stays one space at 17px and at 22px; the flex rows, where a gap already separates the children, stand down to zero. The label/value stacks stand down to the old 16px instead: em spacing keys off the SECOND paragraph, and .val is 1.4rem in the infocard and up to 2rem on the Zelle card, which would have opened those pairs to 27px and 38px. */ .container--narrow > p:not([class]),.card p:not([class]){max-width:var(--measure)} .center p:not([class]),.closing p:not([class]),.motto-hero p:not([class]){margin-inline:auto} p + p{margin-top:1.2em} .event p + p,.episode p + p,.contact-card p + p{margin-top:0} .infocard .cell p + p,.kv p + p{margin-top:var(--s4)} /* 14.15.5 Scripture. The verses carry the feeling of this site, so they get the serif's real attention. The reset zeroed p and figure but never blockquote, and .verse-block IS a blockquote, so every flush-left verse was still wearing the browser's 40px inline margins: on a phone that left the Word of God a 201px column, about twenty characters a line. Removing them, and easing the rule's padding on small screens, widens that measure by more than 40 percent. Above it: a 48-character line, leading opened to 1.46 because a high-contrast face needs the air, and the weight lifted off 360 - at 360 Fraunces goes spindly at 1x, and over the navy glass the thin strokes simply leave. Where a verse is flush left the opening quotation mark hangs into the margin so the text edge, not the punctuation, lines up with the gold rule; the hang is per language because the Spanish guillemet is wider than the English double quote, and the html lang attribute i18n.applyLang already sets picks the right one - with JS dead, lang="es" in the markup still gives the Spanish hang to the Spanish text that is actually on the page. Only index.html has a flush-left verse-block today; the child combinator keeps the hang off the centred blocks and off nosotros's .verse-other pair. Centred verses are balanced instead - a hanging mark on a centred line reads as a mistake, not a refinement. .verse--big on ofrendas and .motto-hero .verse on nosotros are page-owned and still win on size; that is intended. */ .verse-block:not(.verse-block--center){margin-inline:0} .verse{ font-family:var(--font-serif);font-style:normal;font-weight:400; font-size:var(--fs-lead);line-height:1.46;letter-spacing:-.004em; max-width:48ch; } .section--dark .verse,.card--dark .verse,.hero .verse{font-weight:440} .verse-block--center .verse,.verse-block--center .verse-ref,.center .verse{margin-inline:auto} .verse-block--center .verse{text-wrap:balance} .verse-block:not(.verse-block--center) > .verse:lang(es){text-indent:-.44em} .verse-block:not(.verse-block--center) > .verse:lang(en){text-indent:-.3em} .verse-ref{ font-size:.8125rem;font-stretch:86%;font-weight:620; letter-spacing:var(--track-caps);margin-top:var(--s4); } @media (max-width:599px){ .verse-block:not(.verse-block--center){padding-left:var(--s4)} } /* 14.15.6 No faked slants, and a second voice for captions. Neither variable family ships an italic, so every italic on this site was a browser-drawn shear - crude on a face with this much stroke contrast, and worst on the hero invitation, which is set over moving sky. font-synthesis:none turns the shear off at the root (14.1 had already done this for weight); emphasis moves to weight, the invitation stands upright, and captions become real Fraunces instead of a smaller grey copy of the body font. Pinyon ships one weight and is only ever asked for 400, so nothing loses a bold it was relying on. */ body{font-synthesis:none} em,i{font-style:normal;font-weight:620} .hero-invite{font-style:normal} .figure figcaption{ font-family:var(--font-serif);font-style:normal;font-weight:400; font-size:.9375rem;line-height:1.5;letter-spacing:0; } /* 14.15.7 The things that are figures, not words. Times, dates, the street number and the Zelle number get tabular lining digits, so 4:00 PM sits under 4:00 PM in a stacked column and the address keeps its width when the reader switches language. The contact address needs its element in the selector because contacto.html's own font shorthand resets numeral variants, and that page's