/* ===== charter/css/tokens.css ===== */ /* ========================================================================== charter/css/tokens.css -- the Abbaye Saint-Pierre palette and typefaces One definition for all four sites: parchment ground, ink text, rubric red, EB Garamond over IM Fell DW Pica. Every site loads this first. A site may re-declare a token in its own layer (the farm uses a green accent for --rubrique); it should not invent a second name for the same colour. The faces themselves are in charter/fonts/ (fonts.css, SIL OFL 1.1). ========================================================================== */ /* --- tokens --------------------------------------------------------------- Values are the charter's own, unchanged. */ :root{ --papier:#F3ECDC; /* parchment page ground */ --papier2:#EAE1CC; /* second parchment, panels and pills */ --encre:#1C1A16; /* ink: body text, dark bands, footer */ --rubrique:#A1261C; /* rubric red: the one accent */ --ecarlate:#C5372A; /* brighter red, sparingly */ --sang:#6E1410; /* deep red */ --sepia:#6B5637; /* secondary text */ --filet:#C9BB97; /* rules and borders */ --or:#B08A2E; /* discreet gold, as on an illuminated initial */ --creme:#F6D9B8; /* warm cream, for text on dark photography */ --foot-text:#D8CFB8; /* footer body text on ink */ --serif:"EB Garamond",Garamond,Georgia,"Times New Roman",serif; --display:"IM Fell DW Pica",Georgia,serif; --caps:"IM Fell DW Pica SC","IM Fell DW Pica",Georgia,serif; --wrap:1180px; --measure:36em; --gutter:clamp(1rem,4vw,2rem); } /* ===== src/site.css ===== */ /* ========================================================================== www.abbayesaintpierre.org -- component layer. Written as a portable charter for all four sites; in practice only this site uses these class names. The shared parts (palette, typefaces) now live in charter/css/tokens.css and charter/fonts. Tokens, typography and components are taken from the Conservatoire's v3 charter so that the four sites read as one family: parchment ground, ink text, rubric red, EB Garamond over IM Fell DW Pica. PORTABILITY. This file is site-agnostic: it defines tokens, base typography and components only. Anything specific to one site belongs in that site's own layer, appended after this file. NAMING. The class names here are deliberately NOT the ones used in the old Conservatoire stylesheet (.hero, .tri, .facts, .band, .fig, .wide, .plate). Those carry a breakout mechanism -- width + margin-left:50% + translateX(-50%) -- in which any later `margin` shorthand silently drags the element half its own width off the page. Using fresh names removes that whole class of failure. Where a device is reproduced, the original name is given in a comment. NO SCRIPT. Nothing here hides content pending JavaScript. The old charter's .rv reveal left every heading at opacity:0 when its router was absent. ========================================================================== */ /* --- tokens: charter/css/tokens.css (identical values, moved there) --- */ /* --- reset ---------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0} img,picture,svg,video{max-width:100%;height:auto;display:block} h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0} ul,ol{padding:0} button,input,select,textarea{font:inherit;color:inherit} /* --- base ----------------------------------------------------------------- */ body{ background:var(--papier); color:var(--encre); font-family:var(--serif); font-size:1.14rem; line-height:1.6; background-image:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.35),transparent 60%); background-attachment:fixed; } @media(min-width:48rem){ body{font-size:1.22rem} } h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.1;text-wrap:balance} h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:2.6rem 0 .6rem} h3{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:1.8rem 0 .35rem} h4{font-family:var(--caps);font-size:1.05rem;letter-spacing:.06em;margin:1.4rem 0 .3rem} p,ul,ol,dl,figure,table,blockquote{margin-bottom:1.1rem} p:last-child{margin-bottom:0} a{color:var(--rubrique);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.06em} a:hover{color:var(--sang);text-decoration-thickness:.12em} :focus-visible{outline:3px solid var(--rubrique);outline-offset:2px} strong{font-weight:600} hr{border:0;border-top:1px solid var(--filet);margin:2.5rem 0} ::selection{background:var(--papier2)} /* --- layout --------------------------------------------------------------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .measure{max-width:var(--measure)} .sec{padding:clamp(2.75rem,6vw,4.5rem) 0 1rem} /* charter: .sec */ .sec--tint{background:var(--papier2);padding-bottom:clamp(2.75rem,6vw,4.5rem)} .sec--rule{border-top:1px solid var(--filet)} .stack>*+*{margin-top:1.1rem} /* --- section headings (charter: .kick / .sec-t / .sec-s) ------------------ */ .kick{ font-family:var(--caps);color:var(--rubrique);letter-spacing:.22em; font-size:.95rem;margin:0 0 .3rem } .sec-head{text-align:center;margin-bottom:2rem} .sec-head .kick{text-align:center} .sec-t{ font-family:var(--display);font-weight:400; font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.1;margin:0 0 .6rem;letter-spacing:0 } .sec-s{ font-style:italic;color:#3a342a;max-width:36em;margin:0 auto 1.5rem; font-size:1.14rem } .sec-head--left{text-align:left} .sec-head--left .sec-s{margin-left:0} /* --- fleuron (charter: .fleuron) ------------------------------------------ */ .fleuron{text-align:center;color:var(--rubrique);font-size:1.6rem;margin:2.2rem 0;line-height:1} .fleuron::before{content:"\275D\2766\275E"} /* --- long words ------------------------------------------------------------ German compounds are single unbreakable words that can exceed a narrow column: "Feldforschungszusammenarbeit" in an h2 measured 339px inside a 273px column at a 320px viewport, which pushed the whole document 50px wide and made every page scroll sideways. break-word stops the overflow; hyphens:auto adds a proper hyphen, and is scoped to German via so that English, French and Spanish keep unhyphenated headings. */ h1,h2,h3,h4,p,li,dt,dd,figcaption,caption,th,td,.kick,.sec-t,.sec-s,.lede{overflow-wrap:break-word} :lang(de) h1,:lang(de) h2,:lang(de) h3,:lang(de) h4,:lang(de) .sec-t{hyphens:auto} /* --- lede and small text -------------------------------------------------- */ .lede{font-size:1.28rem;line-height:1.5} .small{font-size:.95rem} .muted{color:var(--sepia)} /* --- buttons (charter: .btn) ---------------------------------------------- */ /* Buttons use EB Garamond at 600, uppercased and tracked, NOT the IM Fell small caps used for kickers and navigation. IM Fell DW Pica SC is a historical face with thin, irregular strokes and no bold weight: reversed out in white on the rubric red it goes muddy and is genuinely hard to read at button sizes, even though white on #A1261C measures 7.47:1 and passes AA comfortably. The failure is stroke weight, not colour contrast, so the fix is a typeface with real weight. The tracked uppercase keeps it in the charter's voice. */ .btn{ display:inline-block;font-family:var(--serif);font-weight:600; text-transform:uppercase;letter-spacing:.1em;font-size:.95rem; text-decoration:none;padding:.72rem 1.4rem;border:1px solid var(--rubrique); background:var(--rubrique);color:#fff;min-height:44px;line-height:1.65 } .btn:hover{background:var(--sang);border-color:var(--sang);color:#fff;text-decoration:none} .btn--ghost{background:transparent;color:var(--sang)} .btn--ghost:hover{background:var(--rubrique);color:#fff;border-color:var(--rubrique)} .btn--light{background:rgba(20,18,15,.35);color:#fff;border-color:#fff} .btn--light:hover{background:#fff;color:var(--encre);border-color:#fff} .btn--sm{padding:.5rem 1.05rem;font-size:.9rem;min-height:40px;letter-spacing:.08em} .btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem} /* --- pills (charter: .pill) ----------------------------------------------- */ .pill{ display:inline-flex;align-items:center;gap:.45rem;font-family:var(--caps); letter-spacing:.07em;font-size:.85rem;padding:.15rem .65rem;border-radius:99px; background:var(--papier2);color:var(--sepia) } .pill--prep{background:var(--papier2);color:var(--sang)} .pill--concept{background:var(--papier2);color:var(--sepia)} .pill--assoc{background:#F3DED9;color:var(--sang)} /* --- masthead (charter: .top) --------------------------------------------- */ /* No rule under the masthead: the logo is a fine line engraving and a hard horizontal filet running the full width directly beneath it reads as a second drawn line competing with it. The parchment tint and the blur carry the separation instead. */ .top{ position:sticky;top:0;z-index:40; background:rgba(243,236,220,.96);backdrop-filter:blur(6px) } /* flex-wrap is load-bearing on phones. The brand does not shrink (see below) and a four-locale language switch is ~129px wide, so at 360px the row cannot fit on one line: without wrapping, the whole document overflowed to 413px and every page scrolled sideways. Wrapping lets the switch drop to a second line instead. */ .top__in{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;min-height:68px} /* The wordmark is inside the logo artwork, so the brand block carries the logo and only the place line beneath it. */ /* The logo artwork is the abbey engraving plus the wordmark, converted to a transparent alpha mask and drawn in --encre, so it prints as ink directly on the parchment ground with no white plate behind it. The place line beneath picks up the same small caps as the navigation, which ties the two together. The source PNG from the live site is fully opaque white-ground; do not use it raw or the masthead gets a white box. */ /* flex:0 0 auto is load-bearing. The masthead is a flex row, so a wide navigation plus a multi-language switch will otherwise shrink the logo as the only flexible item: with four locales in the switch it collapsed to 56px at a 992px viewport. The brand never shrinks; the breakpoint below decides whether there is room for a horizontal bar at all. */ .brand{display:flex;align-items:center;text-decoration:none;color:var(--encre);flex:0 0 auto} .brand:hover{color:var(--encre);text-decoration:none} .brand__logo{width:clamp(124px,20vw,208px);height:auto;flex:none;opacity:.92;transition:opacity .25s} .brand:hover .brand__logo{opacity:1} /* Navigation. The list sits OUTSIDE the
deliberately: a closed
does not render its content and no CSS on the child can force it, so a desktop bar built by restyling the list inside it is invisible. */ .mainnav{display:flex;align-items:center;gap:.5rem} .mainnav__toggle summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem; font-family:var(--caps);letter-spacing:.06em;font-size:1rem; padding:.5rem .9rem;border:1px solid var(--filet);min-height:44px } .mainnav__toggle summary::-webkit-details-marker{display:none} .mainnav__toggle summary::after{ content:"";width:.6rem;height:.6rem;border-right:1.5px solid var(--encre); border-bottom:1.5px solid var(--encre);transform:rotate(45deg) translate(-2px,-2px) } .mainnav__toggle[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)} .mainnav__list{ list-style:none;display:none;flex-direction:column;gap:.1rem;margin:0; position:absolute;left:0;right:0;top:100%;background:var(--papier); border-bottom:1px solid var(--filet);padding:.8rem var(--gutter) 1.2rem; max-height:75vh;overflow:auto } .mainnav__toggle[open] ~ .mainnav__list{display:flex} /* :not(.btn) is load-bearing. The call to action inside the nav list is a .btn, and a bare `.mainnav__list a` selector (0,2,0) outranks `.btn` (0,1,0): it repainted the button's text in --encre on the rubric red background, giving about 1.5:1, and replaced its typeface too. Never style nav links without excluding the button. */ .mainnav__list a:not(.btn){ font-family:var(--caps);font-size:1.02rem;letter-spacing:.05em;color:var(--encre); text-decoration:none;padding:.5rem 0;display:block;border-bottom:1px solid transparent } .mainnav__list a:not(.btn):hover,.mainnav__list a:not(.btn)[aria-current="true"]{color:var(--rubrique);border-bottom-color:var(--rubrique)} /* 70rem, not 62rem. The horizontal bar needs room for the full-width logo, the seven nav items and a four-locale language switch at once; measured, that is about 1 055px of inner width, so below 70rem the menu button stays and the masthead holds together. */ @media(min-width:70rem){ /* Above the breakpoint the bar is measured to fit with room to spare, so the masthead must not wrap: wrapping would drop the language switch onto a second line and make the header needlessly tall. */ .top__in{flex-wrap:nowrap} .mainnav__toggle{display:none} .mainnav__list,.mainnav__toggle[open] ~ .mainnav__list{ display:flex;position:static;flex-direction:row;align-items:center;gap:1rem; border:0;padding:0;background:none;max-height:none;overflow:visible } .mainnav__list a:not(.btn){padding:.4rem 0;white-space:nowrap} } .langs{flex:0 0 auto} .langs{display:flex;gap:.45rem;align-items:center;font-family:var(--caps);font-size:.92rem;letter-spacing:.06em} .langs a,.langs span{text-decoration:none;padding:.2rem .15rem} .langs [aria-current="true"]{color:var(--rubrique);border-bottom:1px solid var(--rubrique)} /* An unavailable locale must still be legible: --filet on parchment is about 1.9:1, which reads as a rendering fault rather than a disabled state. */ .langs .is-off{color:var(--sepia);opacity:.65;cursor:default} /* --- hero (charter: .hero + .hero__card) ---------------------------------- */ .tophero{ position:relative;min-height:clamp(26rem,70vh,38rem);overflow:hidden; background:var(--encre);display:grid;place-items:end start; border-bottom:1px solid var(--filet) } .tophero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92} .tophero::after{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(90deg,rgba(20,18,15,.72) 0%,rgba(20,18,15,.35) 45%,rgba(20,18,15,0) 75%), linear-gradient(0deg,rgba(20,18,15,.55),transparent 40%) } .tophero__card{ position:relative;z-index:2;color:#fff;max-width:44rem; margin:0 0 clamp(2rem,6vw,4rem) max(var(--gutter),calc((100vw - var(--wrap))/2)); padding-right:1rem } .tophero__k{ font-family:var(--caps);letter-spacing:.2em;font-size:1rem;margin:0 0 .8rem; color:var(--creme);display:flex;align-items:center;gap:.6rem } .tophero__k::before{content:"\2766";font-size:1.15rem} .tophero__card h1{ font-family:var(--display);font-weight:400;margin:0;line-height:1.02; text-shadow:0 2px 20px rgba(0,0,0,.35); font-size:clamp(1.9rem,5.4vw,3.9rem);letter-spacing:.02em } .tophero__t{ font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.5;margin:1.2rem 0 0;max-width:34em; text-shadow:0 1px 10px rgba(0,0,0,.4);color:#F2EDE4 } .tophero__t strong{color:#fff;font-weight:600;border-bottom:2px solid var(--ecarlate)} .tophero .btns{margin-top:1.8rem} .tophero__cap{ position:absolute;right:var(--gutter);bottom:.6rem;z-index:2;color:#E6DCCB; font-style:italic;font-size:.85rem;text-shadow:0 1px 8px rgba(0,0,0,.6); max-width:24em;text-align:right;margin:0 } @media(max-width:56rem){ .tophero__cap{display:none} } /* --- page header for interior pages --------------------------------------- */ .pagehead{padding:clamp(2rem,5vw,3.4rem) 0 0} .pagehead h1{margin:0 0 .7rem} /* --- cards (charter: .tri / .rgrid) --------------------------------------- */ .cards{display:grid;gap:1.6rem;grid-template-columns:1fr} @media(min-width:44rem){ .cards--2{grid-template-columns:repeat(2,1fr)} } @media(min-width:56rem){ .cards--3{grid-template-columns:repeat(3,1fr)} } .cards--2,.cards--3{grid-template-columns:1fr} @media(min-width:44rem){ .cards--2,.cards--3{grid-template-columns:repeat(2,1fr)} } @media(min-width:56rem){ .cards--3{grid-template-columns:repeat(3,1fr)} } .card{background:var(--papier);border:1px solid var(--filet);display:flex;flex-direction:column} .sec--tint .card{background:var(--papier)} .card__media{overflow:hidden;background:var(--papier2)} .card__media img{width:100%;height:12rem;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .card:hover .card__media img{transform:scale(1.05)} .card__body{padding:1.3rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1} .card__n{font-family:var(--display);font-size:2rem;color:var(--rubrique);line-height:1;margin-bottom:.2rem} .card h3{margin:0 0 .4rem} .card h3 a{text-decoration:none} .card h3 a:hover{text-decoration:underline} .card__q{font-style:italic;color:var(--sepia);margin-bottom:.6rem} .card__more{margin-top:auto;padding-top:.9rem;font-family:var(--caps);letter-spacing:.05em;font-size:.98rem} /* --- photo cards over image (charter: .rgrid) ----------------------------- */ .plates{display:grid;gap:.8rem;grid-template-columns:1fr} @media(min-width:40rem){ .plates{grid-template-columns:repeat(2,1fr)} } @media(min-width:62rem){ .plates{grid-template-columns:repeat(4,1fr)} } .plate{ position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:15rem;padding:1rem;color:#fff;text-decoration:none;overflow:hidden;background:var(--encre) } .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:transform 1.2s,opacity .4s} .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(20,18,15,.92))} .plate:hover img{transform:scale(1.07);opacity:.9} .plate>*:not(img){position:relative;z-index:2} .plate .card__n{color:var(--creme)} .plate h3{color:#fff;font-size:1.2rem;margin:.3rem 0 .3rem} .plate p{font-size:.95rem;color:#EFE7D9} /* --- dark band (charter: .band) ------------------------------------------- */ .darkband{background:var(--encre);color:var(--papier);padding:clamp(2.5rem,6vw,3.6rem) 0} .darkband .kick{color:var(--creme)} .darkband .sec-t{color:#fff} .darkband .sec-s{color:#DCD3C2} .darkband a{color:var(--creme)} .darkband a:hover{color:#fff} /* --- strands -------------------------------------------------------------- */ .strand{border-top:1px solid var(--filet);padding-top:1.2rem;margin-top:1.8rem} .strand h3{margin-top:0} /* A research strand carrying an illustrative plate. The plate sits in a narrow column beside the text on wide screens and above it on narrow ones. Kept to a modest width on purpose: these engravings illustrate an argument, they do not stand in for evidence of current work. */ .strand--plate{display:grid;gap:1.3rem;grid-template-columns:1fr} @media(min-width:52rem){ /* The text column is capped in em, not fr, so a wide viewport lengthens the line no further than a comfortable measure. */ .strand--plate{grid-template-columns:minmax(0,14rem) minmax(0,36em);gap:2.4rem;align-items:start} .strand--plate .strand__fig{order:-1} .strand--plate--right{grid-template-columns:minmax(0,36em) minmax(0,14rem)} .strand--plate--right .strand__fig{order:1} } .strand__fig{margin:0} .strand__fig img{width:100%;height:auto;border:1px solid var(--filet);background:var(--papier2)} .strand__fig figcaption{font-size:.8rem;line-height:1.4;margin-top:.45rem} .strand__body>h3{margin-top:0} /* Evidence that a line of enquiry is actually funded: call identifiers and grant agreements, set small and marked with a rubric label so it reads as apparatus rather than as prose. */ .evid{ border-left:2px solid var(--filet);padding-left:.9rem;margin-top:1rem; font-size:.92rem;line-height:1.5;color:var(--sepia) } .evid b{ display:block;font-family:var(--caps);font-weight:400;letter-spacing:.09em; font-size:.78rem;color:var(--rubrique);margin-bottom:.15rem } .evid code{font-family:var(--sans);font-size:.88em;color:var(--encre);white-space:nowrap} /* --- lists ---------------------------------------------------------------- */ .bullets{list-style:none;margin-left:0} .bullets li{position:relative;padding-left:1.5rem;margin-bottom:.55rem} .bullets li::before{content:"\2766";position:absolute;left:0;top:0;color:var(--rubrique);font-size:.95rem} .qlist{list-style:none;counter-reset:q;margin-left:0} .qlist li{position:relative;padding-left:2.6rem;margin-bottom:.9rem} .qlist li::before{ counter-increment:q;content:counter(q,upper-roman);position:absolute;left:0;top:0; font-family:var(--display);font-size:1.3rem;color:var(--rubrique);line-height:1.2 } .steps{list-style:none;counter-reset:s;display:grid;gap:1.5rem;grid-template-columns:1fr} @media(min-width:48rem){ .steps{grid-template-columns:repeat(3,1fr)} } .steps li{border-top:2px solid var(--rubrique);padding-top:.9rem} .steps h3{margin-top:0} /* --- annotated proposal overlay ------------------------------------------- */ /* A real photograph with a proposed intervention drawn over it, keyed by letter in the manner of an engraved plate. The SVG is decorative and aria-hidden: every letter is repeated in the text key below, so the content does not depend on the graphic being seen or on any script. Dashed lines read as proposal rather than as built fabric. */ .plan__frame{position:relative;display:block;line-height:0} .plan__frame img{display:block;width:100%;height:auto} .plan__over{position:absolute;inset:0;width:100%;height:100%} .plan__over .ln{fill:none;stroke:var(--rubrique);stroke-width:3;stroke-dasharray:13 9;opacity:.85} .plan__over .ld{fill:none;stroke:var(--rubrique);stroke-width:2;opacity:.8} .plan__over .dot{fill:var(--papier);stroke:var(--rubrique);stroke-width:2.5} .plan__over .lt{fill:var(--rubrique);font-family:var(--display);font-size:30px;text-anchor:middle;dominant-baseline:central} .plan__key{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem 1.8rem;grid-template-columns:1fr;line-height:0} @media(min-width:44rem){ .plan__key{grid-template-columns:1fr 1fr} } .plan__key li{display:grid;grid-template-columns:1.6rem 1fr;gap:.55rem;align-items:baseline;font-size:.98rem;line-height:1.5} .plan__key b{font-family:var(--display);font-weight:400;color:var(--rubrique);font-size:1.15rem} /* --- figures -------------------------------------------------------------- */ figure{margin:0} .figure{margin-block:2rem} figcaption{font-size:.95rem;color:var(--sepia);font-style:italic;margin-top:.5rem;max-width:44em} .duo{display:grid;gap:1.4rem;grid-template-columns:1fr} @media(min-width:48rem){ .duo{grid-template-columns:1fr 1fr} } .feature{display:grid;gap:1.8rem;align-items:center;grid-template-columns:1fr} @media(min-width:56rem){ .feature{grid-template-columns:1fr 1fr;gap:3rem} .feature--flip .feature__media{order:2} } .feature__media img{width:100%;height:clamp(14rem,32vw,22rem);object-fit:cover} /* --- tables --------------------------------------------------------------- */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.3rem} table{border-collapse:collapse;width:100%;font-size:1.02rem} caption{text-align:left;font-family:var(--caps);letter-spacing:.06em;color:var(--sepia);padding-bottom:.5rem} th,td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--filet);vertical-align:top} thead th{font-family:var(--caps);letter-spacing:.05em;color:var(--rubrique);border-bottom:1px solid var(--encre)} tbody th{font-family:var(--caps);letter-spacing:.04em;font-weight:400} /* --- spec panel ----------------------------------------------------------- */ .specs{background:var(--papier2);border:1px solid var(--filet);padding:1.2rem 1.35rem} .specs dl{display:grid;grid-template-columns:1fr;gap:.15rem .9rem;margin:0} @media(min-width:34rem){ .specs dl{grid-template-columns:auto 1fr} } .specs dt{font-family:var(--caps);letter-spacing:.05em;color:var(--rubrique);font-size:.98rem} .specs dd{margin:0 0 .55rem} /* --- key/value strip ------------------------------------------------------ */ .strip{display:grid;gap:1.3rem;grid-template-columns:1fr;border-top:1px solid var(--filet);padding-top:1.5rem} @media(min-width:40rem){ .strip{grid-template-columns:repeat(2,1fr)} } @media(min-width:62rem){ .strip{grid-template-columns:repeat(4,1fr)} } .strip dt{font-family:var(--caps);letter-spacing:.08em;color:var(--rubrique);font-size:.92rem;margin-bottom:.15rem} .strip dd{margin:0} /* --- note ----------------------------------------------------------------- */ .note{border-left:3px solid var(--rubrique);background:var(--papier2);padding:1rem 1.2rem} .note p:last-child{margin-bottom:0} .sec--tint .note{background:var(--papier)} /* --- forms ---------------------------------------------------------------- */ .field{margin-bottom:1.1rem} .field label{display:block;font-family:var(--caps);letter-spacing:.05em;margin-bottom:.3rem} .field input,.field select,.field textarea{ width:100%;padding:.65rem .75rem;border:1px solid var(--sepia);background:#fff;min-height:44px } /* --- breadcrumb ----------------------------------------------------------- */ .crumb{font-family:var(--caps);letter-spacing:.05em;font-size:.92rem;color:var(--sepia);padding-top:1.1rem} .crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0} .crumb li+li::before{content:"\203A";margin-right:.4rem;color:var(--filet)} .crumb a{text-decoration:none} .crumb a:hover{text-decoration:underline} /* --- skip link ------------------------------------------------------------ */ .skip{ position:absolute;left:.5rem;top:-4rem;z-index:100;background:var(--rubrique);color:#fff; padding:.7rem 1.1rem;text-decoration:none;font-family:var(--caps);letter-spacing:.06em;transition:top .15s } .skip:focus{top:.5rem;color:#fff} /* --- footer (charter: .foot) ---------------------------------------------- */ .foot{background:var(--encre);color:var(--foot-text);margin-top:3.5rem;padding:3rem 0 2rem;font-size:1.02rem} .foot a{color:var(--foot-text);text-decoration:none} .foot a:hover{color:#fff;text-decoration:underline} .foot h2{font-family:var(--caps);letter-spacing:.09em;font-size:1rem;color:#fff;margin:0 0 .6rem} .foot ul{list-style:none;margin:0} .foot li{margin:.25rem 0} .foot-grid{display:grid;gap:2rem;grid-template-columns:1fr} @media(min-width:40rem){ .foot-grid{grid-template-columns:repeat(2,1fr)} } @media(min-width:62rem){ .foot-grid{grid-template-columns:2fr 1fr 1fr 1.2fr} } .foot-note{border-top:1px solid #3A342A;margin-top:2rem;padding-top:1.2rem;font-size:.92rem;color:#A99C85} /* --- motion --------------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* --- print ---------------------------------------------------------------- */ @media print{ .top,.foot,.btns,.skip{display:none} body{background:#fff;font-size:11pt;background-image:none} a{text-decoration:underline;color:#000} } /* =========================================================================== site.css - layer specific to abbayesaintpierre.org Appended to charter.css by build.ps1. Class names here must not collide with anything in charter.css: .film* and .filmfig were checked free. =========================================================================== */ /* --- embedded film --------------------------------------------------------- The source is a large file served from an external drive with no CORS and Content-Disposition: attachment. Media elements ignore that disposition, so playback works, but a poster frame cannot be captured from a tainted canvas. preload="none" is therefore load-bearing: without it a visitor who never presses play still pays for the download. Keep it on every