@layer components; @layer components { /* ========================= COMPONENTS (modules & utilities) ========================= */ /* ========================= THEME HOOKS (fallbacks) If base.css already sets these, it will win. ========================= */ :root{ --surface:#ffffff; --surface-elevated:#ffffff; --text:#111111; --border: color-mix(in oklab, #000 14%, transparent); --radius:12px; } @media (prefers-color-scheme: dark){ :root{ --surface:#101012; --surface-elevated:#16181b; --text:#e9e9ee; --border: color-mix(in oklab, #fff 18%, transparent); } } /* Force theme via class on */ .theme-light{ --surface:#ffffff; --surface-elevated:#ffffff; --text:#111111; --border: color-mix(in oklab, #000 14%, transparent); } .theme-dark{ --surface:#101012; --surface-elevated:#16181b; --text:#e9e9ee; --border: color-mix(in oklab, #fff 18%, transparent); } /* Links inside article use accent token */ .article a, .article a:focus, .article a:hover, .article a:visited{ color: var(--accent); } /* Responsive iframe video wrapper */ .video{ position:relative; padding-bottom:56.25%; height:0; margin-bottom:1.3rem; width:100%; } .video iframe{ position:absolute; top:0; left:0; width:100%; height:100%; } .adaptive-video { position: relative; } .adaptive-video__trigger{ position:absolute; inset:auto 1rem 1rem auto; padding:.5rem .75rem; border:0; border-radius:.5rem; background: var(--accent, #334); color: var(--on-accent, #fff); cursor:pointer; font: inherit; box-shadow:0 2px 6px rgba(0,0,0,.2); } .adaptive-video__trigger:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* --- Inline video credit overlay --- */ .adaptive-video video, .adaptive-video img { display:block; width:100%; height:auto; } .video-credit { position: absolute; right: 10px; bottom: 10px; z-index: 2; /* below play button, above media */ font-size: 0.72rem; line-height: 1; padding: 6px 8px; border-radius: 6px; background: var(--video-credit-bg, color-mix(in oklab, #000 24%, transparent)); color: var(--video-credit-fg, #fff); text-shadow: 0 1px 1px rgba(0,0,0,.25); pointer-events: none; /* purely informational */ opacity: 0.92; } .video-credit.left { right:initial; left: 10px; } /* if you ever put a link in the credit */ .video-credit a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; pointer-events: auto; /* allow click on the link only */ } /* keep it above the optional play trigger */ .adaptive-video__trigger { z-index: 3; position: absolute; } /* ===== COVER / HEADER ===== */ .cover{ display:flex; flex-direction:column; max-width:768px; margin:auto; font-family: var(--body-font); box-shadow:0 0 25px rgb(13 13 13 / 25%); background: var(--is-white); } .cover-img{ display:flex; position:relative; width:100%; min-height:88vh; background-position:center; background-size:cover; background-repeat:no-repeat; } .headline { margin:1rem; width: min-content; min-width:300px; } .headline h2 { color: #ffffff; line-height:1; text-shadow:0 0 15px #000; } .pre-header{ display:flex; justify-content:space-between; padding:1rem 0; } @media (min-width:600px){ .pre-header{ padding:2rem 1.8rem 1rem; } } .preheader p,.alignLeft,.alignRight,.alignCenter{ font-size:.8rem; padding:0; margin:0; } @media (min-width:380px){ .preheader p,.alignLeft,.alignRight,.alignCenter{ font-size:1rem; color: var(--accent); } } .header-title{ width: 100%; margin: 0 auto; padding: 0; line-height: 1; } .header-title svg{ fill:#2a2a2a; } .sub-title{ font-size:.8rem; text-align:center; background:#fff; padding-bottom:1rem; position:relative; } @media (min-width:700px){ .sub-title{ padding:.3rem 2rem 1.3rem; font-size:1.1rem; } } @media (min-width:900px){ .sub-title{ font-size:1.2rem; } } .sub-title .speech-icon{ display:block; width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #fff; position:absolute; bottom:-15px; left:70%; z-index:9999; } .main-title{ padding:1.5rem; color:#fff; font-family:"Raleway",sans-serif; margin:0; display:block; } @media (min-width:600px){ .main-title{ padding:1.5rem 1.5rem 2.2rem; } } .main-title h1{ font-size:2.6rem; color: var(--is-white);line-height: 1.15; } @media (min-width:600px){ .main-title h1{ font-size:4.9rem; } .main-title .short-title{ max-width:70%; } } .main-title .title-link h1{ max-width:60%; } .title-link,.title-link:focus,.title-link:hover,.title-link:visited{ line-height:1; text-shadow:none; text-decoration:none; color:#fff; } .title-link span{ font-weight:900; background: var(--accent); text-decoration:none; } .enter{ width:50px; height:50px; background: var(--accent); padding:.8rem; position:absolute; bottom:12px; right:12px; z-index:999; display:flex; align-items:center; } .titles-container{ padding-bottom:2.8rem; padding-top:1.5rem; } .titles-container h2{ max-width:180px; line-height:1.2; margin:.5rem 0 0 1rem; color: var(--is-white); text-shadow:0 0 25px rgba(0,0,0,.9),0 0 35px rgba(0,0,0,.7); font-size:1.1rem; padding-bottom:1.8rem; padding-left:.5rem; } @media (min-width:600px){ .titles-container h2{ font-size:1.3rem; max-width:270px; margin:1.4rem 0 0 1.8rem; } } .titles-container h2{ color: var(--accent); } .titles-container h2.is-white{ color: var(--is-white); } .footer-cover{ padding:2rem 0; } .footer-cover strong{ color: var(--accent); } .footer-inner>*{ padding:0; } .footer-inner{ margin:auto; } @media (min-width:480px){ .footer-inner{ display:grid; grid-template-columns:1fr 1fr; gap:25px; } .footer-inner>*{ margin:0; } } /*-------------------------------------------- COVER ----------------------------------------------*/ .cover { display: flex; flex-direction: column; max-width: 768px; margin: auto; font-family: var(--body-font); box-shadow: 0 0 25px rgb(13 13 13 / 25%); background: var(--is-white); } .cover-img { background-image: url(../img/cover.webp); background-position: top; align-items: flex-end; } .pre-header { display: flex; justify-content: space-between; padding: 1rem 0.5rem; } .preheader p, .alignLeft, .alignRight, .alignCenter { font-size: 0.8rem; padding: 0; margin: 0; } @media screen and (min-width: 380px) { .preheader p, .alignLeft, .alignRight, .alignCenter { font-size: 1rem; color: var(--accent); } } .header-title svg { fill: #2a2a2a; } .sub-title { font-size: 0.8rem; text-align: left; background: #fff; position: relative; padding: 0 0 1rem; line-height: 1; } @media screen and (min-width: 700px) { .sub-title { font-size: 1.1rem; } } @media screen and (min-width: 900px) { .sub-title { font-size: 1.2rem; } } .sub-title .speech-icon { display: block; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid rgb(255 255 255); position: absolute; bottom: -15px; left: 70%; z-index: 9999; } .main-title { padding: 1.5rem; color: #fff; font-family: "Raleway", sans-serif; width: auto; margin: 0; display: block; } @media (min-width: 600px) { .main-title { padding: 1.5rem 1.5rem 2.2rem; max-width:70% } } .main-title h1 { font-size: 2.6rem; color: var(--is-white); } @media screen and (min-width: 600px) { .main-title h1 { font-size: 4.9rem; } .main-title .short-title { max-width: 70%; } } .main-title .title-link h1 { max-width: 60%; } .titles-container .is-bright { color: var(--light-on-dark); } .cover-img { display: flex; position: relative; width: 100%; margin: 0; padding: 0; min-height: 88vh; background-position: center; background-size: cover; background-repeat: no-repeat; } @media (min-width: 768px) { .cover-img { min-height: 79vh; } } .title-link .header-subtitle { font-weight: 400; } .title-link, .title-link:focus, .title-link:hover, .title-link:visited { line-height: 1; text-shadow: none; text-decoration: none; color: #fff; } .title-link span { font-weight: 900; background: var(--accent); text-decoration: none; } .enter { width: 50px; height: 50px; background: var(--accent); padding: 0.8rem; position: absolute; bottom: 12px; right: 12px; z-index: 999; display: flex; margin: auto; align-items: center; } .enter svg { padding-bottom: 0 !important; } .titles-container { padding-bottom: 2.8rem; padding-top: 1.5rem; } .titles-container h2 { max-width: 180px; line-height: 1.2; margin: 0.5rem 0 0 1rem; color: var(--is-white); text-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 0, 0, 0.7); font-size: 1.1rem; padding-bottom: 1.8rem; padding-left: 0.5rem; } @media (min-width: 600px) { .titles-container h2 { font-size: 1.3rem; max-width: 270px; margin: 1.4rem 0 0 1.8rem; } } .titles-container h2 { color: var(--accent); } .titles-container h2.is-white { color: var(--is-white); } .footer-cover { padding: 2rem 0; } .footer-cover strong { color: var(--accent); } .footer-inner>* { padding: 0; } .footer-inner { margin: auto; } @media (min-width: 480px) { .footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } .footer-inner>* { margin: 0; } } /* ===== CONTENTS ===== */ .contents-wrapper{ max-width:768px; margin:0 auto; padding:1rem; } @media (min-width:600px){ .contents-wrapper{ padding:1.8rem; display:grid; } .contents-wrapper *>img{ display:block; width:100%; } } .contents-header{ display:grid; grid-template-columns:1fr; grid-gap:18px; margin-bottom:1.8rem; } @media (min-width:480px){ .contents-header{ grid-template-columns:1fr 1fr; } } .contents-header img{ max-width:195px; height:auto; margin-bottom:1.8rem; box-shadow:0 0 25px rgb(0 0 0 / 15%); } .contents-header p{ margin-bottom:1rem; } .contents-header hr{ border-top: rgba(134,134,134,.1) 1px dotted; } .contents-header h1, .contents-header h2{ margin:0; padding:0; } .contents-header p{ font-size:1.1rem; } /* Contents image & page number */ .contents-image{ position:relative; } .page-number{ position:absolute; left:0; bottom:0; padding:.6rem; background: var(--accent); color: var(--is-white); } /* Contents footer */ .contents-footer{ width:100%; max-width:360px; margin:2rem auto; background: var(--lighter-accent); padding-bottom:2rem; } .contents-heading{ margin:0 auto 1rem; } @media (min-width:480px){ .contents-footer{ display:flex; gap:1.8rem; max-width:100%; padding:1rem; } .contents-heading{ max-width:100%; } } .contents-footer>*>ul{ list-style:none; padding:0; margin:.5rem 0 1rem; } .contents-footer>div>h3{ padding:0; margin:0; } .contents-footer>div>p{ margin:.5rem 0 1rem; } .contents-footer>div{ width:100%; padding:1rem; background: var(--lighter-accent); margin:0 auto; } .contents-footer>*>ul>li, .contents-footer>div>p{ padding-bottom:.5rem; font-size:80%; } .contents-footer a{ color: var(--accent); } .contents-footer>.membership{ background:hsl(222deg 40% 97%); } /* Contents layouts */ .config{ display:block; margin-left:auto; margin-right:auto; max-width:360px; } .config img{ width:100%; } @media (max-width:480px){ .config>div{ margin-bottom:1.3rem; } } @media (min-width:600px){ .config{ display:grid; width:100%; max-width:100%; margin-top:.75em; grid-gap:.75em; } } .config a{ color: var(--is-dark); text-decoration:none; } .config h3{ text-decoration:underline; } .config.--five h3{ font-size:initial; } .--one{ grid-template-rows:repeat(3,auto); grid-template-columns:1fr 3fr; grid-template-areas:"article-a feature-a" "article-b feature-a" "article-c feature-a"; } .--two{ grid-template-rows:repeat(2,auto); grid-template-columns:1fr 3fr; grid-template-areas:"article-d feature-b" "article-a feature-b"; } .--three{ grid-template-rows:1fr; grid-template-columns:repeat(3,1fr); grid-template-areas:"article-f article-g article-h"; } .--four{ grid-template-rows:repeat(1,auto); grid-template-columns:1fr 1fr; grid-template-areas:"feature-c feature-e"; } .--five{ grid-template-rows:repeat(1,auto); grid-template-columns:1fr 1fr; grid-template-areas:"feature-a feature-b"; } .--six{ grid-template-rows:repeat(1,auto); grid-template-columns:2fr 1fr; grid-template-areas:"feature-a article-a" "feature-a article-b"; } :is(.article-a,.article-b,.article-c,.article-d,.article-e,.feature-a,.feature-b){ padding:.5rem; } @media (max-width:599px){ :is(.article-a,.article-b,.article-c,.article-d,.article-e,.article-f,.article-g,.article-h,.feature-a,.feature-b,.feature-c,.feature-d,.feature-e,.feature-f,.feature-g,.feature-h){ margin-bottom:.5rem; } } .article-a{ grid-area:article-a; } .article-b{ grid-area:article-b; } .article-c{ grid-area:article-c; } .article-d{ grid-area:article-d; } .article-e{ grid-area:article-e; } :is(.article-f,.article-h,.article-g){ padding:0; } .feature-a{ grid-area:feature-a; color: var(--is-white); background: var(--accent); } .feature-b{ grid-area:feature-b; color: var(--is-white); } .feature-a h3, .feature-b h3{ padding:.75rem 0 0; font-size:1.6rem; } .feature-a h3{ color: var(--is-white); } .feature-b h3{ color: var(--is-dark); } .feature-a p{ color: var(--is-white); } .feature-a img, .feature-b img{ width:100%; } .grow-image{ height:135px; object-fit:cover; display:flex; } .grow-image img{ object-fit:cover; } .uniform-feature{ height:230px; display:flex; object-fit:cover; } .uniform-feature img{ object-fit:cover; } .fit-image{ object-fit:cover; } /* ===== BASE PAGE SHELLS ===== */ .page-title{ display:flex; justify-content:flex-start; align-items:center; padding:1.2rem 1rem; font-size:.8rem; color: var(--accent); } @media (min-width:600px){ .page-title{ padding:1.2rem 2rem; } } .page-title img{ width:25px; height:16px; margin-right:.5rem; vertical-align:middle; } .page{ background:#fff; font-family: var(--body-font); letter-spacing:.01em; padding:0 0 2rem; margin:0 auto; width:100%; max-width: clamp(680px, 80vw, 900px); box-sizing:border-box; box-shadow:0 0 25px rgb(13 13 13 / 25%); min-height:100vh; } .image{ position:relative; margin-bottom:1.8rem; } .image :where(img){ width:100%; max-width: clamp(680px, 80vw, 900px); margin:1rem 0 0; } .image.main img{ margin:0; } @media (min-width:600px){ .main img{ height:480px; object-fit:cover; } } figure { max-width: 900px; } .cover figure { max-width:100%; } .two-column{ display:grid; grid-template-columns:auto 1fr; grid-gap:1rem; margin:1.8rem 0; } .two-column p{ margin:0; text-align:left; font-size:16px; } .two-column img{ max-width:240px; } .column-two{ display:flex; align-items:flex-end; text-align:left; } .column-two.caption{ padding:12px 0 0; font-style:oblique; font-size:12px; } .bio{ width:100%; display:flow-root; } .inserted-image{ width:120px; float:left; shape-outside:margin-box; margin-right:1rem; } .library>*{ padding:0; } .page-nav span{ font-style:normal; font-size:.9rem; } .aligned-left{text-align:left;} .aligned-center{text-align:center;} /* Legacy sticky navbar (optional pages) */ #navbar{ background-color:#333; position:fixed; top:0; transition:top .1s; width:100%; z-index:999; max-width: clamp(680px, 80vw, 900px); } .page-nav{ margin:0; padding:12px 1.8rem; display:grid; grid-template-columns:50% auto auto auto; list-style:none; text-align:left; background:#333; border-bottom:1px rgba(0,0,0,.5); color:#fff; } .last-column{ font-size:2.1rem; text-align:right; margin-right:.5rem; color:rgba(255,255,255,.8); } .nav-bottom{ background:#afafaf; } .page-nav.nav-bottom li a{ color:#222; } .page-nav.nav-bottom li a svg{ fill:#222; } .page-nav li{ line-height:1; margin-right:-.5rem; } .page-nav li a{ color:#fff; display:grid; grid-template-columns:45px 1fr; align-items:center; } .page-nav li a.last{ grid-template-columns:1fr 45px; text-align:right; } .nav-desc{ display:none; } @media (min-width:480px){ .nav-desc{ display:inline; } } /* Navigation */ .nav { position: fixed; width: 100%; height: var(--above-main); top: 0; left: 0; background-color: var(--bkgrd-color); color: var(--light-color); padding: var(--padding-nav); text-align: center; transition: top 0.3s; z-index: 1000; } .nav-buttons { display: flex; justify-content: space-between; max-width: clamp(680px, 80vw, 900px); margin: auto; padding: 0 1rem 0 0; } .nav-buttons button { display: flex; padding: 0; background-color: var(--background-color); color: var(--accent-gradient); border: none; cursor: pointer; -webkit-background-clip: text; background-clip: text; align-items: center; } .nav-buttons { padding: 0; } .nav-buttons button:disabled { background-color: var(--bkgrd-color-400); cursor: not-allowed; } .button-group { display: flex; align-items: center; gap: 12px; } .nav-caret { padding: 0 .25rem; fill: #fff; } .contents { padding-left: 0; } .contents::after { content: 'Contents'; margin-left: .3rem; } .next::before { content: 'Next'; } .previous::after { content: 'Prev'; } .pageNo { width: 35px; height: 32px; padding: 0.2rem .4rem; text-align: center; border-radius: 50%; color: #fff; } .logo span { display:none; } @media (min-width: 600px) { .logo span { display:inline; } } /* ===== Author modules & utilities ===== */ .guest-editor-wrap{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr; gap:12px; padding:1rem; background: var(--accent); max-width:39ch; } .guest-editor-wrap h2{ font-size: var(--editor-font-size); margin-top:0; max-width:21ch; line-height:1; color: var(--is-white); } .guest-editor-wrap img{ width:80px; height:auto; margin-right:1rem; } .editor-wrap{ display:grid; grid-template-columns:auto 1fr; padding:3rem 1.8rem 0; } .editor-wrap h2{ font-size: var(--editor-font-size); margin-top:0; color: var(--accent); } @media (min-width:600px){ .editor-wrap h2{ font-size:2rem; } } .editor-wrap h2 span{ font-size:50%; line-height:.5; } .editor-wrap img{ width:80px; height:auto; margin-right:1rem; } .Editor-title{ color: var(--accent); } .half-author-container{ display:flex; flex-wrap:wrap; margin:0 1rem 1rem 0; gap:1rem; height:min-content; } .author-group img{ margin-bottom:1rem; } .author-group p{ font-size:80%; padding-bottom:.3rem; } p.author-additional{ font-size: var(--author-font-size); } .multiple-authors{ width:240px; grid-template-columns:40px 1fr 40px 1fr; } .singlespan-author{ width:100%; display:grid; grid-template-columns:40px 1fr; gap:.5rem; } .singlespan-author img{ width:46px; height:auto; } .authors{ display:grid; grid-template-columns:40% 60%; grid-gap:.4rem; width:255px; margin:1rem 1rem 0; background: var(--accent); padding:.5rem; position:relative; color:#fff; } .author-desc{ margin:0 .5rem; text-align:left; font-size: var(--author-font-size); color: var(--accent-txt); } /* Author image sizing (was in general.css) */ .author img { width: 48px; height: 64px; } /* The small triangle / speech notch */ .speech-icon { display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid var(--accent-gradient-start); position: absolute; bottom: -13px; left: 24px; z-index: 1; pointer-events: none; } .photo-caption { padding-inline: 1rem; font-size:12px; margin:.5rem 0; } @media (min-width: 600px) { .photo-caption { padding-inline: 2rem; } } /* 1) Constrain to the same content width and center it */ .author-container { box-sizing: border-box; max-width: clamp(680px, 80vw, 900px); margin: 0 auto 1rem; } .authors-row { display: flex; flex-wrap: wrap; gap: clamp(.75rem, 2vw, 1rem); align-items: flex-start; } .authors-row .author { flex: 1 1 240px; max-width: 360px; margin-bottom:1rem; } /* 2) If the container sits INSIDE .page (which already clamps width), just match the text's side padding so the left edge lines up */ .page .author-container { margin-inline: 0; padding-inline: 1rem; } @media (min-width: 600px) { .page .author-container { padding-inline: 2rem; } } /* Author card – gradient + element triangle */ .author { display: grid; grid-template-columns: 40px 1fr; gap: 0.4rem; width: auto; background: var(--accent-gradient); color: var(--on-accent); padding: 0.5rem; position: relative; border-radius: var(--radius-base); overflow: visible; box-shadow: 0 4px 10px rgba(0,0,0,.15); } .author img { width: 48px; height: 64px; border-radius: 4px; object-fit: cover; } /* Triangle element (matches the card’s gradient) */ .author .speech-icon { position: absolute; bottom: -13px; left: 24px; width: 20px; height: 15px; background: var(--accent-gradient-start); clip-path: polygon(0 0, 50% 100%, 100% 0); pointer-events: none; z-index: 1; } .ch20{ width: 20ch; } .ch25{ width: 25ch; } .ch30{ width: 30ch; } .ch35{ width: 35ch; } .ch40{ width: 40ch; } .ch45{ width: 45ch; } .ch50{ width: 50ch; } .ch55{ width: 55ch; } .ch60{ width: 60ch; } .ch65{ width: 65ch; } .ch70{ width: 70ch; } .annamaria{ max-width:290px; } .stumpy{ max-width:120px; } .narrow{ max-width:170px; } .narrower{ max-width:155px; } .wide{ max-width:28ch; } .wider{ max-width:32ch; } .widish{ max-width:65%; } .widest{ width:90%; } .ch24{ max-width:24ch; } .ch28{ max-width:28ch; } .ch32{ max-width:32ch; } .ch36{ max-width:36ch; } .ch38{ max-width:38ch; } .ch42{ max-width:42ch; } .ch48{ max-width:48ch; } /* Lists & buttons */ .article li{ padding-bottom:.1rem; } .article li::marker, .article ol li::marker{ color: var(--accent-gradient-end); } .article ol li::marker{ font-size:1rem; } .article ol li{ padding-left:.7rem; } ol.footnotes li::marker{ color:initial; font-size:70%; } .list-block li{ font-size:1.3rem; margin-bottom:.6rem; } .lower-latin{ list-style-type: lower-latin; } .tick-list{ list-style-position:outside; } .tick-list li{ padding-left:.5rem; } .tick-list li::marker{ content:"✓"; } .button{ width:200px; padding:.7rem .5rem .2rem; background: var(--accent); border-radius:3px; margin:0 auto; } .button p{ text-align:center; font-weight:bold; } .button a{ color:#222; } .super-script{ font-size:70%; } .no-style{ list-style:none; } .no-style li{ text-decoration:none; } /* Footnotes & references (extras) */ p.references{ font-size: var(--reference-font-size); } p.references span a{ font-size:.8rem; font-style:normal; } .footnotes{ padding-inline-start:1rem; } .footnotes li{ font-size:70%; } .oblique{ font-style:oblique; padding:0 1rem; } .is-centered{ text-align:center; margin:auto; } .references li { font-size: 1rem; padding-bottom: .5rem; line-height: 1; } /* Resource grid */ .resource-wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; } .resource-image{ width:100%; margin-bottom:1rem; } .resource{ width:100%; max-width:150px; margin:0 auto 1.5rem; } @media (min-width:500px){ .resource{ width:40%; margin:0; } } @media (min-width:600px){ .resource{ width:30%; } } .resource-wrap .resource .resource-author{ padding:0 0 1.2rem; font-style:oblique; font-size:12px; } /* Image modifiers */ .main{ margin-bottom:0; margin-top: var(--above-main); } .zero{ margin-bottom:0; } .has-max-width{ min-width:320px; max-width:80%; margin:auto auto 1.8rem; } .small{ min-width:320px; max-width:500px; margin:auto; } .has-box-shadow{ box-shadow:0 0 25px rgb(0 0 0 / 15%); } .left{ margin-left:0; text-align:left; } .is-center{ text-align:center; margin:auto; } /* Badges */ .badges{ display:flex; flex-direction:row; justify-content:space-around; flex-wrap:wrap; margin:1.3rem auto; } .badges img{ max-width:120px; margin:0 1.3rem 1.3rem; object-fit:contain; } .coupon a{ display:inline-block; padding:1rem; border-radius:.3rem; background:yellowgreen; color:#111; text-decoration:none; font-weight:900; margin:auto; } /* Gallery */ .gallery{ max-width:100%; margin-bottom:1.8rem; } .gallery ul{ display:flex; flex-wrap:wrap; list-style-type:none; padding:0; margin:0; } .shrink-to-fit li{ margin:auto; text-align:center; } .gallery.shrink-to-fit img{ height:auto; min-width:48%; max-width:300px; object-fit:cover; vertical-align:bottom; } .gallery li{ flex-grow:1; text-decoration:none; padding-bottom:0; } .gallery img{ max-height:100%; min-width:100%; max-width:100%; object-fit:cover; vertical-align:bottom; } /* Carousel */ .mySlides{ display:none; } img{ vertical-align:middle; } .slideshow-container{ max-width:768px; position:relative; margin:auto; } .dots{ margin:0 auto 1.3rem auto; } .slideshow-container a{ color: var(--is-white); } .mySlides .prev, .mySlides .next{ cursor:pointer; position:absolute; top:50%; width:auto; padding:16px; margin-top:-22px; color:white; font-weight:bold; font-size:1.8rem; transition:.6s ease; border-radius:0 3px 3px 0; user-select:none; } .mySlides .next{ right:0; border-radius:3px 0 0 3px; } .mySlides .prev:hover, .mySlides .next:hover{ background-color:rgba(0,0,0,.8); } .mySlides .text{ box-sizing:border-box; color:#f2f2f2; font-size:1rem; position:absolute; bottom:0; padding:.5rem .5rem .7rem .5rem; width:100%; text-align:center; text-shadow:0 0 25px #000; background: rgba(0,0,0,.5); } .mySlides .text a{ color: var(--is-white); } .mySlides .numbertext{ color:#f2f2f2; font-size:12px; padding:8px 12px; position:absolute; top:0; } .mySlides .dot{ cursor:pointer; height:15px; width:15px; margin:0 2px; background-color:#bbb; border-radius:50%; display:inline-block; transition: background-color .6s ease; } .mySlides .active, .mySlides .dot:hover{ background-color:#717171; } .mySlides .fade{ animation-name:fade; animation-duration:1.5s; } @keyframes fade{ from{ opacity:.4; } to{ opacity:1; } } @media (max-width:300px){ .prev,.next,.text{ font-size:11px; } } /* ========================= LAYOUT COMPONENTS ========================= */ /* ---- Two-column split ---- */ .split { display: grid; grid-template-columns: 1fr; /* stack by default */ gap: var(--space-m, 1.4rem); align-items: center; overflow: hidden; /* prevents stray horiz scroll from wide media */ padding:0; } /* go two columns on wider screens */ @media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } .split--40-60 { grid-template-columns: 0.4fr 0.6fr; } .split--60-40 { grid-template-columns: 0.6fr 0.4fr; } .split--reverse > *:first-child { order: 2; } .split--reverse > *:last-child { order: 1; } } /* sensible defaults for media + text */ .split img, .split video, .split svg, .split picture { max-width: 100%; height: auto; display: block; border-radius: var(--radius, 12px); } /* optional content width to keep text comfy */ .split__content { max-width: 65ch; } .split--card p { color: var(--light-color); } /* optional “card” wrapper — now theme-aware */ .split--card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: clamp(1rem, 2vw, 2rem); } /* utility: center contents vertically (desktop) */ @media (min-width: 768px) { .split--center { align-items: center; } .split--top { align-items: start; } .split--bottom { align-items: end; } } /* utility: make the media fill and crop */ .split__media--cover { height: 100%; } .split__media--cover > img { width: 100%; height: 100%; object-fit: cover; } /* ===== Author row spacing (tight + matches page insets) ===== */ /* Page side insets are 1rem (mobile) / 2rem (≥600px) — mirror that vertically */ .author-container{ margin-block: 1rem; /* top & bottom space = 1rem on narrow */ } @media (min-width: 600px){ .author-container{ margin-block: 2rem; } /* 2rem on wider screens */ } /* Author cards row: small vertical gap when they wrap/stack */ .authors-row{ display: flex; flex-wrap: wrap; gap: .6rem; /* < 1rem when stacked */ } @media (min-width: 600px){ .authors-row{ gap: .8rem; } /* still compact on wider screens */ } /* ========================= SPLIT v2 (image + text) Supports: .split, .split--card, .split-inline ========================= */ /* base: stack on mobile */ .split, .split--card, .split-inline { display: grid; grid-template-columns: 1fr; gap: var(--space-m, 1.25rem); margin-block: 1rem; } @media (min-width: 600px){ .split, .split--card, .split-inline { margin-block: 1rem; } } /* desktop: two columns, equal height row */ @media (min-width: 768px){ .split, .split--card, .split-inline { /* default 60/40; override per variant if needed with a more specific rule */ grid-template-columns: 0.6fr 0.4fr; align-items: stretch; /* both columns take row height */ } } /* media column fills row height; image covers */ .split__media { position: relative; /* anchor abs-pos image */ min-height: 0; margin: 0; /* neutralize any default figure margins if used */ } .split__media > img, .split__media > picture > img { position: absolute; inset: 0; /* top/right/bottom/left: 0 */ width: 100%; height: 100%; object-fit: cover; /* crop to fill the column height */ display: block; } /* text column: top-aligned content */ .split__content { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; } .split__content > h2:first-child, .split__content > p:first-child { margin-top: 0 !important; padding-top:0; } .split__content > p { font-family: var(--body-font); font-size: var(--font-size); } /* optional: caption OUTSIDE
*/ .split__caption { grid-column: 1; /* sits under the image if you place it after both columns */ font-style: oblique; line-height: 1.35; /* opacity: .9; margin-top: .6rem; margin-bottom: .9rem; */ font-size: var(--author-font-size); color: var(--light-color); } /* variant: boxed card look + themeable bg */ .split--card { background: var(--split-card-bg, var(--surface-elevated, #fff)); border: 1px solid color-mix(in oklab, #000 14%, transparent); border-radius: var(--radius, 12px); padding: clamp(1rem, 2vw, 2rem); } /* (optional) if you want a 60/40 only on .split--60-40 modifiers */ @media (min-width: 768px){ .split--60-40 { grid-template-columns: 0.6fr 0.4fr; } .split--40-60 { grid-template-columns: 0.4fr 0.6fr; } .split--reverse > *:first-child { order: 2; } .split--reverse > *:last-child { order: 1; } } /* Fix: keep split images visible on narrow screens (stacked layout) */ @media (max-width: 767px){ /* ensure single column stack (safety) */ .split, .split--card, .split-inline { grid-template-columns: 1fr; } /* let media take natural height */ .split__media { position: relative; min-height: 0; } /* reset the desktop absolute-cover rules */ .split__media > img, .split__media > picture > img { position: static; /* was absolute on desktop */ inset: auto; width: 100%; height: auto; /* no forced height = no collapse */ display: block; object-fit: contain; /* show full image when stacked */ } /* optional: kill extra margins from figure defaults if any */ .split__media { margin: 0; } } .image.main.hero-image{position:relative} .image.main.hero-image img{display:block;width:100%;height:auto} .image-credit{ position:absolute; right:.6rem; bottom:.6rem; font: 600 .68rem/1 Raleway,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background: rgba(17,17,17,.32); color:#fff; padding:.35rem .5rem; border-radius:.5rem; letter-spacing:.01em; backdrop-filter: blur(2px); } /* Splash quotes */ .splash-quote { max-width: 800px; margin: 3rem auto; padding: 2.2rem 1.6rem; text-align: center; font-family: var(--body-font); font-size: clamp(1.4rem, 2.8vw, 2.4rem); line-height: 1.25; color: var(--accent); background: var(--surface-elevated); /* border-left: 6px solid var(--accent); border-right: 6px solid var(--accent); border-radius: var(--radius); box-shadow: 0 12px 35px rgba(0,0,0,.12); */ } .splash-quote span { display: block; margin-top: 1rem; font-size: clamp(.9rem, 1.4vw, 1.1rem); color: var(--light-color); font-style: italic; } /* Splash quote fade-in animation */ .splash-quote-anim { opacity: 0; transform: translateY(40px); animation: splashFadeIn 1.2s ease-out forwards; animation-timeline: view(); animation-range: entry 0% cover 40%; /* triggers as it scrolls in */ } @keyframes splashFadeIn { 0% { opacity: 0; transform: translateY(40px); } 60% { opacity: .8; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .pull-quote { margin: 2.5rem auto; max-width: 45ch; padding: 1.8rem 1.4rem; font-size: clamp(1.2rem, 2.3vw, 1.8rem); line-height: 1.3; font-family: var(--body-font); color: var(--on-accent); background: var(--accent-gradient); border-radius: var(--radius); text-align: left; box-shadow: 0 10px 25px rgba(0,0,0,.15); position: relative; } .pull-quote::before { content: "“"; position: absolute; top: -20px; left: 10px; font-size: 5rem; line-height: 1; opacity: 0.12; } .splash-quote-anim.glow, .pull-quote-anim.glow { animation: splashFadeIn 1.2s ease-out forwards, glowPulse 6s ease-in-out infinite 1.3s; } @keyframes glowPulse { 0% { box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 25px color-mix(in oklab, var(--accent) 40%, transparent); } 100% { box-shadow: 0 0 0 rgba(0,0,0,0); } } /* Base pull quote */ .pull-quote-clean { position: relative; font-family: var(--heading-font); font-size: clamp(1.4rem, 2.6vw, 2rem); font-style: normal; line-height: 1.35; color: var(--accent-gradient-start); max-width: 55ch; margin: 3rem auto 1rem; padding: 1.6rem 1.2rem; text-align: left; font-weight: 500; } /* Opening speech mark */ .pull-quote-clean::before { content: "“"; position: absolute; top: 0px; left: 0; right: 0; margin: auto; font-size: clamp(4rem, 8vw, 6rem); font-weight:900; line-height: 0.5; color: var(--accent); opacity: 0.18; pointer-events: none; } /* Closing speech mark (optional aesthetic) */ /* .pull-quote-clean::after { content: "”"; position: absolute; bottom: -20px; right: 0; margin: auto; font-size: clamp(4rem, 8vw, 6rem); font-weight:900; line-height: 0.5; color: var(--accent); opacity: 0.12; pointer-events: none; } */ /* Optional small attribution line */ .pull-quote-clean .quote-source { display: block; margin-top: 1rem; font-size: 0.9rem; font-style: italic; color: var(--accent); } /* ========================= SIMPLE LIST BOX (non-conflicting) ========================= */ .list-box, .list-group { padding: 1.2rem 1.9rem; margin: 1.8rem 0 1.8rem; border: 1px solid var(--border); border-radius: var(--radius, 12px); background: var(--surface-elevated); box-shadow: 0 2px 5px rgba(0,0,0,.06); max-width: 65ch; } .list-box h3 { margin-top: 0; margin-bottom: .75rem; font-size: 1.2rem; color: var(--accent); } .list-box h2 { margin-top:0; } .list-box ul, .list-box ol { padding-left: 1.2rem; margin: 0; } .list-box li { margin-bottom: .4rem; line-height: 1.4; } .list-box li:last-child { margin-bottom: 0; } .list-group li { margin-bottom: .8rem; } .list-group ul li { margin-bottom: .1rem; margin-left: 1rem; } .list-group ul li::marker { margin-left: 1rem; } /* Ordered list with boxed items */ .sd-listboxed { list-style: none; /* Remove default numbers */ counter-reset: boxcount; /* Start custom counter */ margin: 2rem 0; padding: 0; } .sd-listboxed li { counter-increment: boxcount; margin-bottom: 1.5rem; position: relative; } .sd-listboxed li::before { content: counter(boxcount) "."; position: absolute; left: -2.4rem; top: 0.4rem; font-family: var(--font-sans, 'Lato', sans-serif); font-weight: 700; font-size: 1.2rem; color: var(--accent-color, #4492CD); /* Swap in SD30 accent if needed */ } /* The box itself */ .sd-listboxed__item { border: 1px solid rgba(0,0,0,0.12); padding: 1.2rem 1.4rem; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); font-size: 1rem; line-height: 1.5; } } /* end @layer components */