/* Less font-swap jank, fallback close to Open Sans */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=optional'); body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif !important; } header { background-color: #ffffff !important; background-image: none !important; } .container-header .grid-child { padding: 0 !important; } .container-header nav { margin-top: 0 !important; } .container-header .navbar-brand a { color: #001a27; transition: color .5s linear; } .container-header .navbar-brand a:hover { color: #005e8d; } .container-header .mod-menu>li:after { display: none; } .container-header .mod-menu>li>a, .container-header .mod-menu>li>span { color: #0088cc; padding: 8px 12px; margin-top: 2px; margin-bottom: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .container-header .mod-menu>li>a:hover, .container-header .mod-menu>li>span:hover { background: #eee; } .container-header .mod-list li.active>a { background: #0088cc; color: #ffffff; } .navbar { padding: 10px 0 !important; border-top: 1px solid rgba(0,0,0,0.075); border-bottom: 1px solid rgba(0,0,0,0.075); margin-bottom: 10px; } .pull-center { text-align: center !important; } .brand-logo { text-decoration: none; padding-left: 15px !important; } .brand-logo span { font-size: 40px; font-weight: 500; } .item-page .page-header h1 { font-family: 'Open Sans', sans-serif !important; font-weight: 500; } .menu-button { position: absolute; right: 20px; top: 15px; background: #0088cc; box-shadow: none; border: 1px solid #0088cc; border-radius: 5px; } .menu-button i { color: #ffffff; font-size: 24px; } .offcanvas { width: 100% !important; } .btn-close { opacity: 1 !important; } footer { border-top: 1px solid #eee; background: #fff !important; color: #000 !important; } .footer .grid-child { justify-content: center; } footer a { color: #0088cc !important; } @media screen and (max-width: 1199.98px) { .container-header .mod-menu>li+li { margin-left: 10px !important; } .container-header .mod-menu>li>a, .container-header .mod-menu>li>span { padding: 8px 10px; } } @media screen and (max-width: 991.98px) { .container-nav { display: none; } } @media screen and (max-width: 767.9px) { .brand-logo span { font-size: 30px !important; } .mobile-hide { display: none; } .mobile-show { display: flex; flex-direction: row; } .container-nav { display: none; } } /* ======================================================= GLRY — Gallery Landing Design System (v7.11.0) Palettes, hero (+center), sticky CTA, frames (+depth), section “cards”, poster (frameless), sizing/typography, Cassiopeia full-bleed + footer fixes + Language Switcher for hero (EN/FR, etc.) New in 7.9.0: Hero (Desktop Compact) variant New in 7.10.0: Sticky CTA glass/soft variants (panel alpha token) ======================================================= PALETTE CLASSES (apply to ): .glry-theme-Z – Dark Navy (default) .glry-theme-X – Dark Navy + ice accent .glry-theme-C – Deep Teal .glry-theme-PG – Paper Gray (light) .glry-theme-WN – White / Newspaper LAYOUT PRIMITIVES: .glry-wrap – page container (max-width + side padding) .glry-section – rounded “card” panel (use inside .glry-wrap) FRAMES / DEPTH MODIFIERS: .glry-frame--mat / .glry-frame--shadowbox / .glry-frame--tight .glry-depth-s / .glry-depth-m / .glry-depth-l MEDIA BLOCKS: .glry-poster / .glry-poster__img – frameless poster image ------------------------------------------------------- */ /* ---------- tokens (overridden by a theme class) ---------- */ :root{ /* layout */ --glry-page-max:1120px; /* colors */ --glry-bg:#0A0F1A; --glry-surface:#101826; --glry-text:#E6EEF8; --glry-muted:#B4C1D1; --glry-accent:#60A5FA; --glry-accent-contrast:#07131b; --glry-border:rgba(255,255,255,.16); --glry-hero1:rgba(3,7,14,.58); --glry-hero2:transparent; /* artwork sizing */ --glry-art-max-h:72vh; --glry-art-max-h-abs:900px; /* typography + rhythm */ --glry-measure:68ch; --glry-h1-lh:1.06; --glry-lede-size:clamp(1rem,1.2vw,1.125rem); /* hero widths */ --glry-hero-inner-max:var(--glry-page-max); --glry-hero-h1-measure:36ch; --glry-hero-body-measure:68ch; /* shapes + effects */ --glry-radius:12px; --glry-radius-xl:16px; --glry-shadow-1:0 1px 4px rgba(0,0,0,.14); --glry-shadow-2:0 3px 18px rgba(0,0,0,.18); --glry-divider:linear-gradient(to right, transparent, rgba(0,0,0,.16), transparent); /* sticky panel baseline */ --glry-panel-alpha: 85%; --glry-panel-bg: color-mix(in oklab, var(--glry-surface) var(--glry-panel-alpha), transparent); --glry-panel-border: color-mix(in oklab, var(--glry-border) 90%, transparent); --glry-panel-shadow: 0 6px 28px rgba(0,0,0,.22); --glry-panel-blur: 10px; /* readability defaults */ --glry-panel-opaque-dark: rgba(10,15,26,.90); --glry-panel-opaque-light:#ffffff; --glry-panel-shadow-strong: 0 10px 34px rgba(0,0,0,.28); --glry-panel-blur-strong: 6px; /* ghost buttons on sticky panel */ --glry-ghost-fill: color-mix(in oklab, var(--glry-accent) 22%, transparent); --glry-ghost-fill-hover: color-mix(in oklab, var(--glry-accent) 34%, transparent); /* layout rhythm */ --glry-section-gap: var(--glry-radius); /* gap between stacked sections (~30% of old) */ --glry-section-pad: clamp(14px, 2vw, 22px); /* inner padding for cards */ --glry-stack-pad: clamp(6px, 0.9vw, 10px); /* small breathing room between wraps */ /* art presentation */ --glry-art-gap: 14px; /* fixed gap under frames to the title */ /* safe-area insets for notched phones (used by language switcher) */ --glry-safe-top: env(safe-area-inset-top, 0px); --glry-safe-right: env(safe-area-inset-right, 0px); --glry-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ---------- palette classes (select via Page Class) ---------- */ .glry-theme-Z{ --glry-bg:#0A0F1A; --glry-surface:#101826; --glry-text:#E6EEF8; --glry-muted:#B4C1D1; --glry-accent:#60A5FA; --glry-accent-contrast:#07131b; --glry-border:rgba(255,255,255,.16); --glry-hero1:rgba(3,7,14,.58); --glry-hero2:transparent; } .glry-theme-X{ --glry-bg:#0A0F1A; --glry-surface:#101826; --glry-text:#E6EEF8; --glry-muted:#B4C1D1; --glry-accent:#8BD3FF; --glry-accent-contrast:#061621; --glry-border:rgba(255,255,255,.16); --glry-hero1:rgba(3,7,14,.58); --glry-hero2:transparent; } .glry-theme-C{ --glry-bg:#0D1B2A; --glry-surface:#102235; --glry-text:#E0EAF5; --glry-muted:#B8C3CF; --glry-accent:#7FDBFF; --glry-accent-contrast:#07222b; --glry-border:rgba(255,255,255,.18); --glry-hero1:rgba(3,12,20,.55); --glry-hero2:transparent; } .glry-theme-PG{ --glry-bg:#F3F4F6; --glry-surface:#FFFFFF; --glry-text:#111827; --glry-muted:#4B5563; --glry-accent:#0B63CE; --glry-accent-contrast:#ffffff; --glry-border:rgba(0,0,0,.12); --glry-hero1:rgba(0,0,0,.15); --glry-hero2:transparent; } .glry-theme-WN{ --glry-bg:#FFFFFF; --glry-surface:#FAFBFC; --glry-text:#0B1220; --glry-muted:#415067; --glry-accent:#0F3D91; --glry-accent-contrast:#ffffff; --glry-border:rgba(0,0,0,.10); --glry-hero1:rgba(0,0,0,.20); --glry-hero2:transparent; } /* ---------- scaffold ---------- */ .glry-page{ background:var(--glry-bg); color:var(--glry-text); } .glry-wrap{ max-width:var(--glry-page-max); margin:0 auto; padding:0 16px; } /* side-only, vertical rhythm handled below */ .glry-surface{ background:var(--glry-surface); border:1px solid var(--glry-border); border-radius:var(--glry-radius); } .glry-muted{ color:var(--glry-muted); } /* spacing between stacked sections/wraps */ .glry-wrap + .glry-wrap{ margin-top: var(--glry-section-gap); padding-top: var(--glry-stack-pad); } .glry-wrap:has(+ .glry-wrap){ padding-bottom: var(--glry-stack-pad); } /* progressive; harmless elsewhere */ .glry-section + .glry-section{ margin-top: var(--glry-section-gap); } /* ---------- hero ---------- */ .glry-hero{ position:relative; border-radius:var(--glry-radius-xl); overflow:hidden; margin:12px auto 22px; background: linear-gradient(180deg, var(--glry-hero1), var(--glry-hero2) 45%), radial-gradient(1200px 600px at 70% 10%, rgba(0,0,0,.28), transparent); min-height:36vh; display:flex; align-items:flex-end; box-shadow:var(--glry-shadow-1); max-width:var(--glry-page-max); } .glry-hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:30px; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.08), rgba(0,0,0,0)); pointer-events:none; } .glry-hero-inner{ padding:clamp(18px,3vw,28px); max-width:min(var(--glry-hero-inner-max),95vw); } .glry-eyebrow{ display:inline-block; font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; color:var(--glry-muted); margin:0 0 .35rem; } .glry-hero .glry-h1{ font-size:clamp(2rem,4.8vw,3.25rem); line-height:var(--glry-h1-lh); letter-spacing:-0.012em; margin:0 0 .6rem; text-wrap:balance; max-width:var(--glry-hero-h1-measure); } .glry-hero p{ font-size:var(--glry-lede-size); line-height:1.55; text-wrap:pretty; max-width:var(--glry-hero-body-measure); margin:0 0 .65rem; } .glry-hero .glry-meta{ color:var(--glry-muted); font-size:.92rem; margin-top:.5rem; } .glry-hero a{ color:inherit; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color: color-mix(in oklab, var(--glry-text) 40%, transparent); } .glry-hero a:hover{ text-decoration-color:var(--glry-accent); } /* width modes (optional) */ .glry-hero.glry-hero--wide .glry-h1, .glry-hero.glry-hero--wide p{ max-width:95%; } .glry-hero.glry-hero--full .glry-h1{ max-width:none; } .glry-hero.glry-hero--full p{ max-width:var(--glry-hero-body-measure); } /* ---------- hero center mode ---------- */ .glry-hero.glry-hero--center{ align-items:flex-end; justify-content:center; text-align:center; } .glry-hero.glry-hero--center .glry-hero-inner{ margin:0 auto; text-align:inherit; max-width:min(var(--glry-hero-inner-max),95vw); } .glry-hero.glry-hero--center .glry-eyebrow, .glry-hero.glry-hero--center .glry-badges{ margin-left:auto; margin-right:auto; } .glry-hero.glry-hero--center .glry-h1, .glry-hero.glry-hero--center p{ margin-left:auto; margin-right:auto; max-width:var(--glry-hero-h1-measure); } .glry-hero.glry-hero--center.glry-hero--wide .glry-h1, .glry-hero.glry-hero--center.glry-hero--wide p{ max-width:95%; } .glry-hero.glry-hero--center.glry-hero--full .glry-h1{ max-width:none; } .glry-hero.glry-hero--center.glry-hero--full p{ max-width:var(--glry-hero-body-measure); } /* badges (optional) */ .glry-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:.4rem 0 .8rem; } .glry-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:color-mix(in oklab, var(--glry-surface) 70%, transparent); border:1px solid var(--glry-border); font-size:.92rem; color:var(--glry-text); } /* ---------- buttons ---------- */ .glry-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .glry-btn{ display:inline-block; padding:12px 16px; border-radius:10px; font-weight:600; border:1px solid transparent; text-decoration:none; cursor:pointer; } .glry-btn--primary{ background:var(--glry-accent); color:var(--glry-accent-contrast); } .glry-btn--primary:hover{ filter:brightness(0.94); } .glry-btn--outline{ background:transparent; color:var(--glry-text); border-color:var(--glry-border); } .glry-btn--ghost{ background:transparent; color:var(--glry-accent); } .glry-btn:focus{ outline:2px solid var(--glry-accent); outline-offset:2px; } /* ---------- inputs ---------- */ .glry-input{ padding:10px 12px; border-radius:10px; border:1px solid var(--glry-border); background:var(--glry-surface); color:var(--glry-text); width:100%; } /* ---------- grid/cards ---------- */ .glry-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; } .glry-card{ grid-column:span 6; padding:16px; } @media (max-width:900px){ .glry-card{ grid-column:span 12; } } /* ---------- sticky CTA ---------- */ .glry-sticky{ position:sticky; bottom:0; z-index:9; margin-top:24px; } /* Base sticky surface uses tokenized panel background */ .glry-sticky .glry-surface{ position:relative; padding:12px 16px; background:var(--glry-panel-bg); border:1px solid var(--glry-panel-border); border-top-left-radius:12px; border-top-right-radius:12px; box-shadow:var(--glry-panel-shadow); -webkit-backdrop-filter: blur(var(--glry-panel-blur)); backdrop-filter: blur(var(--glry-panel-blur)); } /* Default: keep strong opaque panels unless a glass variant is requested */ .glry-sticky:not(.glry-sticky--glass) .glry-surface{ background: var(--glry-panel-opaque-dark); box-shadow: var(--glry-panel-shadow-strong); -webkit-backdrop-filter: blur(var(--glry-panel-blur-strong)); backdrop-filter: blur(var(--glry-panel-blur-strong)); } body.glry-theme-PG .glry-sticky:not(.glry-sticky--glass) .glry-surface, body.glry-theme-WN .glry-sticky:not(.glry-sticky--glass) .glry-surface{ background: var(--glry-panel-opaque-light); color:#0B1220; } /* Variants: softer / glassy sticky panels */ .glry-sticky--soft .glry-surface{ --glry-panel-alpha: 65%; background: var(--glry-panel-bg); } .glry-sticky--glass .glry-surface{ --glry-panel-alpha: 50%; background: var(--glry-panel-bg); } /* Optional: general glass surface utility */ .glry-surface--glass{ --glry-panel-alpha: 50%; background: var(--glry-panel-bg); } /* Buttons inside sticky bar */ .glry-sticky .glry-btn--ghost{ background:var(--glry-ghost-fill); color:var(--glry-text); border-color:transparent; } .glry-sticky .glry-btn--ghost:hover{ background:var(--glry-ghost-fill-hover); } /* Avoid sticky overlap on small screens */ @media (max-width:700px){ .glry-artblock{ margin-bottom:56px; } /* avoid sticky overlap */ .glry-poster{ margin-bottom:56px; } } /* ---------- frames ---------- */ .glry-artblock{ display:flex; justify-content:center; padding:0 8px; margin-bottom:var(--glry-art-gap); } .glry-frame--mat, .glry-frame--shadowbox, .glry-frame--tight{ display:inline-block; width:auto; box-sizing:border-box; max-width:min(90vw,var(--glry-page-max)); vertical-align:top; overflow:visible; margin:0; } /* 1) Classic */ .glry-frame--mat{ background:#fff; border:8px solid #000; padding:clamp(14px,3.4vw,26px); box-shadow:inset 0 0 0 2px #000, var(--glry-shadow-2); } /* Depth modifiers */ .glry-depth-s.glry-frame--mat{ border-width:6px; box-shadow:inset 0 0 0 2px #000, var(--glry-shadow-1); } .glry-depth-m.glry-frame--mat{ border-width:16px; box-shadow:inset 0 0 0 2px #000, var(--glry-shadow-2); } .glry-depth-l.glry-frame--mat{ border-width:22px; box-shadow:inset 0 0 0 2px #000, 0 8px 26px rgba(0,0,0,.28); } /* 2) Shadowbox */ .glry-frame--shadowbox{ background:#0b0b0b; border:8px solid #000; padding:clamp(10px,2.6vw,18px); box-shadow:inset 0 0 0 2px #000, var(--glry-shadow-2); } .glry-frame--shadowbox .glry-mat{ background:#fff; padding:clamp(14px,3.4vw,26px); box-shadow:0 2px 6px rgba(0,0,0,.28); } /* 3) Tight black frame */ .glry-frame--tight{ background:transparent; border:8px solid #000; padding:0; } /* liner for all */ .glry-frame--mat .glry-art, .glry-frame--shadowbox .glry-art, .glry-frame--tight .glry-art{ box-shadow:0 0 0 2px #000; } /* ---------- artwork sizing ---------- */ .glry-art{ display:block; margin:0 auto; border:none; width:auto; height:auto; object-fit:contain; aspect-ratio:auto; max-width:100%; max-height:clamp(480px, var(--glry-art-max-h), var(--glry-art-max-h-abs)); } .glry-art--portrait{ max-height:clamp(560px, var(--glry-art-max-h), var(--glry-art-max-h-abs)); } .glry-art--landscape{ max-height:clamp(460px, var(--glry-art-max-h), var(--glry-art-max-h-abs)); } .glry-art--square{ aspect-ratio:1/1; } /* ---------- section cards (rounded content panels) ---------- */ .glry-section{ background:var(--glry-surface); border:1px solid var(--glry-border); border-radius:var(--glry-radius-xl); padding:var(--glry-section-pad); box-shadow:var(--glry-shadow-1); margin-left:calc(-1 * (var(--glry-section-pad) + 1px)); /* widen to match hero/CTA */ margin-right:calc(-1 * (var(--glry-section-pad) + 1px)); } /* tighter frame inset inside cards */ .glry-section .glry-artblock{ padding-left:4px; padding-right:4px; } .glry-section > .glry-h2:first-child{ margin-top:0; } .glry-section p:last-child, .glry-section ul:last-child{ margin-bottom:0; } /* Variants */ .glry-section--ghost{ background: color-mix(in oklab, var(--glry-surface) 35%, transparent); border-color: color-mix(in oklab, var(--glry-border) 70%, transparent); box-shadow:none; } .glry-section--flat{ background: color-mix(in oklab, var(--glry-surface) 12%, transparent); border-color:transparent; box-shadow:none; } /* ---------- Poster (frameless) ---------- */ .glry-poster{ margin:12px 0 0; text-align:center; } .glry-poster__img{ display:block; margin:0 auto; max-width:min(100%, 680px); height:auto; border-radius:var(--glry-radius); box-shadow:var(--glry-shadow-1); } /* ---------- type helpers ---------- */ .glry-h1{ font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.1; margin:0 0 8px; } .glry-h2{ font-size:clamp(1.2rem,2.2vw,1.6rem); margin:0 0 6px; } .glry-muted-small{ color:var(--glry-muted); font-size:.92rem; } /* titles/captions */ .glry-wrap > .glry-h2{ margin:0 0 14px; } .glry-work-title, .glry-work-meta{ text-align:center; } .glry-work-title{ margin:0 0 .25rem; } /* reset top margin so art→title gap stays constant */ .glry-work-meta{ margin:0 0 1.35rem; color:var(--glry-muted); } /* Light palettes: keep content area clean */ body.glry-theme-PG .glry-wrap, body.glry-theme-WN .glry-wrap{ background:transparent; } /* divider under hero */ .glry-hero + .glry-wrap > .glry-h2::before{ content:""; display:block; height:1px; margin:6px 0 14px; background:var(--glry-divider); } /* ---------- Cassiopeia full-bleed fix (all palettes) ---------- */ html{ background: var(--glry-bg); } body[class*="glry-theme-"]{ --template-bg-light: var(--glry-bg); --glry-template-bg: var(--glry-bg); --template-text-dark: var(--glry-text); background:var(--glry-bg); } body[class*="glry-theme-"] .site, body[class*="glry-theme-"] .site-grid, body[class*="glry-theme-"] .container-component, body[class*="glry-theme-"] main, body[class*="glry-theme-"] .com-content-article__body, body[class*="glry-theme-"] .grid-child{ background:var(--glry-bg) !important; } body[class*="glry-theme-"] .glry-page, body[class*="glry-theme-"] .glry-wrap{ background:transparent; } /* ---------- Footer controls & styling ---------- */ body.glry-hide-footer .container-footer.footer{ display:none !important; } body[class*="glry-theme-"] .footer.full-width, body[class*="glry-theme-"] .container-footer.footer{ background:var(--glry-bg) !important; border-top:1px solid color-mix(in oklab, var(--glry-text) 8%, transparent); border-radius:0 !important; box-shadow:none !important; overflow:visible; } body[class*="glry-theme-"] .container-footer.footer::before, body[class*="glry-theme-"] .container-footer.footer::after{ content:none !important; } body[class*="glry-theme-"] .container-footer .grid-child{ max-width:var(--glry-page-max); margin:0 auto; padding:18px 16px; background:transparent !important; border-radius:0 !important; box-shadow:none !important; } body[class*="glry-theme-"] .container-footer p{ color:var(--glry-muted); margin:.2rem 0; text-align:center; } body[class*="glry-theme-"] .container-footer a{ color:var(--glry-accent); text-decoration:underline; text-underline-offset:2px; } body[class*="glry-theme-"] .container-footer a:hover{ color:var(--glry-text); } body[class*="glry-theme-"] .glry-sticky{ margin-bottom:8px; } /* ---------- Language switcher (hero top-right) ---------- */ .glry-lang{ position:absolute; top: calc(var(--glry-section-pad) + var(--glry-safe-top)); right: calc(var(--glry-section-pad) + var(--glry-safe-right)); display:inline-flex; gap:8px; align-items:center; z-index:3; /* above hero fade (::after) */ font-size:.92rem; line-height:1; padding:6px 10px; /* matches .glry-badge density */ border-radius:999px; background: color-mix(in oklab, var(--glry-surface) 70%, transparent); border:1px solid var(--glry-border); box-shadow: var(--glry-shadow-1); } .glry-lang__link{ color: var(--glry-text); text-decoration: none; /* opt out of hero underline */ opacity:.92; transition: opacity 120ms ease, transform 120ms ease; } .glry-lang__link:hover, .glry-lang__link:focus-visible{ opacity:1; transform: translateY(-1px); outline:2px solid var(--glry-accent); outline-offset:2px; } .glry-lang__link.is-active{ font-weight:600; } .glry-lang__sep{ opacity:.55; } /* Force the switcher to the hero's RIGHT even if other CSS sets left:… */ .glry-hero{ position: relative; } /* ensure containing block */ .glry-hero > .glry-lang{ position: absolute; top: calc(var(--glry-section-pad) + var(--glry-safe-top)); right: calc(var(--glry-section-pad) + var(--glry-safe-right)); left: auto !important; z-index: 3; } @supports (inset-inline-end: 1px) { .glry-hero > .glry-lang{ inset-block-start: calc(var(--glry-section-pad) + var(--glry-safe-top)); inset-inline-end: calc(var(--glry-section-pad) + var(--glry-safe-right)); inset-inline-start: auto !important; } } /* ---------- small-screen tweaks ---------- */ @media (max-width:600px){ .glry-hero .glry-h1{ max-width:100%; font-size:clamp(1.8rem,7vw,2.25rem); } .glry-hero p{ max-width:100%; } .glry-hero-inner{ padding:18px; } .glry-section{ padding: clamp(12px, 3.5vw, 16px); border-radius: var(--glry-radius); } .glry-wrap{ padding:0 10px; } :root{ --glry-art-gap:10px; } .glry-artblock{ padding:0 6px; } .glry-section .glry-artblock{ padding:0 3px; } /* language switcher compact offsets */ .glry-hero > .glry-lang{ top: calc(12px + var(--glry-safe-top)); right: calc(12px + var(--glry-safe-right)); } } /* Optional: full-bleed hero edges */ .glry-hero.glry-hero--edge{ border-radius:0; } /* ======================================================= v7.9.1 — Hero (V-Fit) — scoped changes ONLY to this variant ======================================================= */ .glry-hero.glry-hero--vfit{ /* width/behavior identical to base hero */ margin-inline:auto; /* center within page width */ min-height: 0; /* no enforced height */ margin-block: 8px; /* tighter outer spacing */ /* wider copy area, same styles as other heroes */ --glry-hero-h1-measure: 48ch; /* base is 36ch */ --glry-hero-body-measure: 82ch; /* base is 68ch */ } /* remove the bottom fade strip for the compact look */ .glry-hero.glry-hero--vfit::after{ content: none; } /* keep base inline padding; only tighten vertical padding */ .glry-hero.glry-hero--vfit .glry-hero-inner{ padding-block: 14px; /* padding-inline is inherited from the base hero — do not override */ } /* small-screen: keep it compact vertically, leave inline padding as base */ @media (max-width: 600px){ .glry-hero.glry-hero--vfit .glry-hero-inner{ padding-block: 12px; } } /* Bottom-right variant (opt-in). Only flips top → bottom; everything else stays the same */ .glry-hero > .glry-lang.is-bottom{ top: auto !important; bottom: calc(var(--glry-section-pad) + var(--glry-safe-bottom, 0px)); } @media (max-width:600px){ .glry-hero > .glry-lang.is-bottom{ bottom: calc(12px + var(--glry-safe-bottom, 0px)); } }