/* gms_icons.css + fonts.css are linked directly in (layout.php) to avoid a render-blocking @import waterfall - do NOT re-add @import here. */ :root { /* ============================================================ GMS BRAND PALETTE - single source of truth (logo + site) ============================================================ */ /* logo greens - mane gradient (top = brightest brand green) */ --gms-body: #c8e1c3; --gms-mane-top: #0c8642; --gms-mane-1: #0f733a; --gms-mane-2: #125f31; --gms-mane-3: #144c24; --gms-mane-4: #10371a; --gms-mane-shadow: #0b130b; /* site brand greens */ --gms-green-dark: #00370d; --gms-green: #008521; --gms-green-vivid: #00aa33; /* site sage + mint greens */ --gms-sage-1: #aed2a7; --gms-sage-2: #c7e0c2; --gms-sage-3: #c9e4c8; --gms-sage-4: #c8dfc2; --gms-sage-5: #9dc49f; --gms-mint-1: #e3f0df; --gms-mint-2: #e4f1e3; /* neutrals */ --gms-white: #ffffff; --gms-black: #000000; --gms-green-gray: #4d6453; --gms-border: #b8cdbb; /* utility accents (pop) */ --gms-gold: #ffd801; --gms-teal: #0099aa; --gms-error: #bb0000; --gms-error-dark: #990000; --gms-error-bg: #ffdddd; /* rgb triplets for rgba() shadows + overlays */ --gms-shadow-rgb: 0, 55, 13; --gms-white-rgb: 255, 255, 255; --gms-black-rgb: 0, 0, 0; --gms-body-rgb: 200, 225, 195; --gms-mane-top-rgb: 12, 134, 66; --gms-gold-rgb: 255, 216, 1; --theme-color-bg: var(--gms-body); --theme-color-surface: var(--gms-white); --theme-color-text: var(--gms-mane-4); --theme-color-muted: var(--gms-green-gray); --theme-color-accent: var(--gms-green-dark); --theme-color-border: var(--gms-border); --theme-page-section-bg: var(--gms-white); --theme-page-section-text: var(--gms-mane-4); --theme-page-section-border: var(--gms-border); --theme-page-section-radius: 0px; --theme-page-section-padding: 1.25rem 1.4rem; --theme-page-section-shadow: none; --theme-content-card-bg: var(--gms-white); --theme-content-card-text: var(--gms-mane-4); --theme-content-card-border: var(--gms-border); --theme-content-card-radius: 18px; --theme-content-card-padding: 1rem 1.05rem 1.1rem; --theme-content-card-shadow: 0 14px 28px rgba(var(--gms-shadow-rgb), 0.08); --theme-content-card-hover-bg: var(--gms-white); --theme-content-card-hover-text: var(--gms-mane-4); --theme-content-card-hover-border: var(--gms-border); --theme-content-card-hover-radius: 18px; --theme-content-card-hover-padding: 1rem 1.05rem 1.1rem; --theme-content-card-hover-shadow: 0 18px 34px rgba(var(--gms-shadow-rgb), 0.12); --theme-content-card-hover-margin: 0 0 1rem 0; --theme-content-card-hover-text-align: left; --theme-section-title-color: var(--gms-mane-4); --theme-section-title-size: 1.2rem; --theme-section-title-margin-bottom: 0.75rem; --theme-body-copy-color: var(--gms-mane-4); --theme-body-copy-size: 1rem; --theme-body-copy-line-height: 1.7; --theme-meta-pill-bg: var(--gms-sage-3); --theme-meta-pill-text: var(--gms-green-dark); --theme-meta-pill-border: var(--gms-border); --theme-meta-pill-radius: 999px; --theme-meta-pill-padding-y: 0.35rem; --theme-meta-pill-padding-x: 0.8rem; --theme-action-button-bg: var(--gms-green-dark); --theme-action-button-text: var(--gms-mint-2); --theme-action-button-border: var(--gms-green-dark); --theme-action-button-radius: 999px; --theme-action-button-padding-y: 20px; --theme-action-button-padding-x: 20px; --theme-action-button-shadow: none; --theme-action-button-hover-bg: var(--gms-green-dark); --theme-action-button-hover-text: var(--gms-mint-2); --theme-action-button-hover-border: var(--gms-green-dark); --theme-action-button-hover-radius: 999px; --theme-action-button-hover-padding-y: 0.6rem; --theme-action-button-hover-padding-x: 1rem; --theme-action-button-hover-shadow: 0 0.5rem 1.1rem rgba(var(--gms-shadow-rgb), 0.14); --theme-action-button-hover-margin: 0; --theme-action-button-hover-text-align: left; --theme-action-button-secondary-bg: var(--gms-white); --theme-action-button-secondary-text: var(--gms-mane-4); --theme-action-button-secondary-border: var(--gms-border); --theme-action-button-secondary-radius: 999px; --theme-action-button-secondary-padding-y: 0.6rem; --theme-action-button-secondary-padding-x: 1rem; --theme-action-button-secondary-shadow: none; --theme-action-button-secondary-margin: 0; --theme-action-button-secondary-text-align: left; --theme-action-button-secondary-hover-bg: var(--gms-mint-1); --theme-action-button-secondary-hover-text: var(--gms-mane-4); --theme-action-button-secondary-hover-border: var(--gms-border); --theme-action-button-secondary-hover-radius: 999px; --theme-action-button-secondary-hover-padding-y: 0.6rem; --theme-action-button-secondary-hover-padding-x: 1rem; --theme-action-button-secondary-hover-shadow: 0 0.5rem 1.1rem rgba(var(--gms-shadow-rgb), 0.07); --theme-action-button-secondary-hover-margin: 0; --theme-action-button-secondary-hover-text-align: left; --theme-action-button-tertiary-bg: transparent; --theme-action-button-tertiary-text: var(--gms-green-dark); --theme-action-button-tertiary-border: transparent; --theme-action-button-tertiary-radius: 999px; --theme-action-button-tertiary-padding-y: 0.6rem; --theme-action-button-tertiary-padding-x: 1rem; --theme-action-button-tertiary-shadow: none; --theme-action-button-tertiary-margin: 0; --theme-action-button-tertiary-text-align: left; --theme-action-button-tertiary-hover-bg: var(--gms-sage-3); --theme-action-button-tertiary-hover-text: var(--gms-green-dark); --theme-action-button-tertiary-hover-border: transparent; --theme-action-button-tertiary-hover-radius: 999px; --theme-action-button-tertiary-hover-padding-y: 0.6rem; --theme-action-button-tertiary-hover-padding-x: 1rem; --theme-action-button-tertiary-hover-shadow: none; --theme-action-button-tertiary-hover-margin: 0; --theme-action-button-tertiary-hover-text-align: left; } body { margin: 0; font-family: var(--theme-body-font-family, 'Poppins', Arial, sans-serif); font-size: var(--theme-body-font-size, 16px); line-height: var(--theme-body-line-height, 1.7); background: var(--theme-body-bg, var(--theme-color-bg)); color: var(--theme-body-text, var(--theme-color-text)); text-align: var(--theme-body-text-align, left); } h1, h2, h3, h4, h5, h6 { font-family: 'Bodoni 16', Georgia, serif; font-weight: 400; } html.is-loading-overlay { overflow: hidden; } a { color: var(--theme-link-text, var(--theme-color-link, var(--theme-color-accent))); font-family: var(--theme-link-font-family, inherit); font-size: var(--theme-link-font-size, inherit); font-weight: var(--theme-link-font-weight, inherit); font-style: var(--theme-link-font-style, normal); line-height: var(--theme-link-line-height, inherit); letter-spacing: var(--theme-link-letter-spacing, inherit); text-transform: var(--theme-link-text-transform, none); text-decoration: var(--theme-link-text-decoration, underline); background: var(--theme-link-bg, transparent); border: var(--theme-link-border-width, 1px) var(--theme-link-border-style, solid) var(--theme-link-border, transparent); border-radius: var(--theme-link-radius, 0); padding: var(--theme-link-padding-y, 0) var(--theme-link-padding-x, 0); box-shadow: var(--theme-link-shadow, none); margin: var(--theme-link-margin, 0); text-align: var(--theme-link-text-align, left); } a:hover, a:focus-visible { color: var(--theme-link-hover-text, var(--theme-link-text, var(--theme-color-link, var(--theme-color-accent)))); text-decoration: var(--theme-link-hover-text-decoration, none); background: var(--theme-link-hover-bg, transparent); border-color: var(--theme-link-hover-border, transparent); border-width: var(--theme-link-hover-border-width, var(--theme-link-border-width, 1px)); border-style: var(--theme-link-hover-border-style, var(--theme-link-border-style, solid)); border-radius: var(--theme-link-hover-radius, var(--theme-link-radius, 0)); padding: var(--theme-link-hover-padding-y, var(--theme-link-padding-y, 0)) var(--theme-link-hover-padding-x, var(--theme-link-padding-x, 0)); box-shadow: var(--theme-link-hover-shadow, none); font-family: var(--theme-link-hover-font-family, var(--theme-link-font-family, inherit)); font-size: var(--theme-link-hover-font-size, var(--theme-link-font-size, inherit)); font-weight: var(--theme-link-hover-font-weight, var(--theme-link-font-weight, inherit)); font-style: var(--theme-link-hover-font-style, var(--theme-link-font-style, normal)); line-height: var(--theme-link-hover-line-height, var(--theme-link-line-height, inherit)); letter-spacing: var(--theme-link-hover-letter-spacing, var(--theme-link-letter-spacing, inherit)); text-transform: var(--theme-link-hover-text-transform, var(--theme-link-text-transform, none)); margin: var(--theme-link-hover-margin, var(--theme-link-margin, 0)); text-align: var(--theme-link-hover-text-align, var(--theme-link-text-align, left)); } blockquote { padding: 0 30px 0 0; } blockquote:before { content: url('/images/quote.png'); position: absolute; left: -25px; padding: 0 25px 0 0; } blockquote:after { content: url('/images/quote2.png'); position: absolute; right: 0; } input:not([type=checkbox]), textarea { width: 100%; padding: 15px 20px; font-size: 16px; box-sizing: border-box; } /* input[type="checkbox"] { width: 30px; } */ .loading-fixed { position: fixed; top: 50px; left: calc(50% - 44px); width: 88px; max-width: 88px; z-index: 2147483647; } .loading-bg-fixed { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; filter: alpha(opacity=75); opacity: 0.75; background: var(--white); z-index: 2147483646; } .shell { margin: 0; padding: 0; /* max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; */ } .shell-admin { max-width: none; padding: 0 1.25rem 3rem; } /* .shell-blog deliberately has NO max-width - do not put one back. It used to be `max-width: 1600px` with no `margin: 0 auto`, a leftover from the old blog. Because the header and footer both live INSIDE .shell, that capped and left-pinned the entire blog chrome on any viewport wider than 1600px while every other page ran edge to edge - 320px of dead space at 1920px, 960px at 2560px. Invisible at 1440px and below, which is why it survived so long. .shell itself has had its max-width/margin commented out since the clean pass, so full-width IS the site-wide baseline and the blog was the only page opting out. The class stays on the blog templates as a hook; it just carries no geometry. */ .loading-bg-fixed { position: fixed; inset: 0; background: rgba(var(--gms-body-rgb), 0.72); z-index: 1600; } .loading-fixed { position: fixed; top: 2rem; left: calc(50% - 32px); width: 64px; max-width: 64px; height: 64px; z-index: 1601; display: flex; align-items: center; justify-content: center; } .loading-fixed::before { content: ''; width: 42px; height: 42px; border-radius: 999px; border: 4px solid rgba(var(--gms-shadow-rgb), 0.15); border-top-color: var(--gms-mane-top); animation: gms_loading_spin 0.9s linear infinite; } @keyframes gms_loading_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .site-header { position: relative; display: block; align-items: flex-start; gap: 1rem; background: var(--theme-header-bg, transparent); color: var(--theme-header-text, inherit); border: 1px solid var(--theme-header-border, transparent); border-radius: var(--theme-header-radius, 0); padding: var(--theme-header-padding, 0 0 1rem 0); box-shadow: var(--theme-header-shadow, none); margin: var(--theme-header-margin, 0 0 2rem 0); width: 100%; min-width: 0; max-width: none; height: var(--theme-header-height, auto); min-height: var(--theme-header-min-height, 0); max-height: var(--theme-header-max-height, none); text-align: var(--theme-header-text-align, left); box-sizing: border-box; } .site-header-blocks { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--header-blocks-gap, 1rem); margin: var(--header-blocks-margin, 0); padding: var(--header-blocks-padding, 0 3.25rem 0 0); } .site-header-blocks.site-header-blocks-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-header-blocks.site-header-blocks-count-2 { display: flex; justify-content: space-between; align-items: baseline; } .site-header-blocks.site-header-blocks-count-2 .site-header-block { flex: 0 1 auto; } .site-header-blocks.site-header-blocks-count-2 .site-header-block-kind-branding .theme-block-canvas { max-width: 420px; } .site-header-blocks.site-header-blocks-count-2 .site-header-block-kind-contact_compact .theme-block-canvas { max-width: 340px; } .site-header-blocks.site-header-blocks-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-header-blocks.site-header-blocks-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .site-header-blocks.site-header-blocks-count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .site-header-block { min-width: 0; text-align: var(--theme-header-text-align, left); display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start; } .site-header-blocks.site-header-blocks-count-1 .site-header-block { justify-self: start; } .site-header-blocks.site-header-blocks-count-2 .site-header-block:first-child, .site-header-blocks.site-header-blocks-count-3 .site-header-block:first-child, .site-header-blocks.site-header-blocks-count-4 .site-header-block:first-child, .site-header-blocks.site-header-blocks-count-5 .site-header-block:first-child { justify-self: start; } .site-header-blocks.site-header-blocks-count-2 .site-header-block:last-child, .site-header-blocks.site-header-blocks-count-3 .site-header-block:last-child, .site-header-blocks.site-header-blocks-count-4 .site-header-block:last-child, .site-header-blocks.site-header-blocks-count-5 .site-header-block:last-child { justify-self: end; } .site-header-blocks.site-header-blocks-count-3 .site-header-block:nth-child(2), .site-header-blocks.site-header-blocks-count-5 .site-header-block:nth-child(3) { justify-self: center; } .site-header-blocks.site-header-blocks-count-4 .site-header-block:nth-child(2) { justify-self: start; } .site-header-blocks.site-header-blocks-count-4 .site-header-block:nth-child(3) { justify-self: end; } .site-header-blocks.site-header-blocks-count-5 .site-header-block:nth-child(2) { justify-self: start; } .site-header-blocks.site-header-blocks-count-5 .site-header-block:nth-child(4) { justify-self: end; } .site-header-block .theme-block-canvas { margin-left: 0; margin-right: auto; } .site-header h1 { margin: 0; color: var(--theme-header-heading-color, var(--theme-header-text, inherit)); background: var(--theme-header-heading-bg, transparent); border: 1px solid var(--theme-header-heading-border, transparent); font-family: var(--theme-header-heading-font-family, inherit); font-size: var(--theme-header-heading-font-size, clamp(2rem, 4vw, 3.5rem)); font-weight: var(--theme-header-heading-font-weight, 400); display: inline-flex; align-items: center; gap: 0.65rem; line-height: var(--theme-header-heading-line-height, 1); letter-spacing: var(--theme-header-heading-letter-spacing, 0); width: var(--theme-header-heading-width, auto); min-width: var(--theme-header-heading-min-width, 0); max-width: var(--theme-header-heading-max-width, none); height: var(--theme-header-heading-height, auto); min-height: var(--theme-header-heading-min-height, 0); max-height: var(--theme-header-heading-max-height, none); text-align: var(--theme-header-heading-text-align, var(--theme-header-text-align, left)); } .site-logo { display: block; width: auto; max-height: 1em; } .site-tagline { margin: var(--theme-header-paragraph-margin, 0.35rem 0 0); color: var(--theme-header-paragraph-color, var(--theme-color-muted)); background: var(--theme-header-paragraph-bg, transparent); border: 1px solid var(--theme-header-paragraph-border, transparent); font-family: var(--theme-header-paragraph-font-family, var(--theme-body-font-family)); font-size: var(--theme-header-paragraph-font-size, 0.95rem); font-weight: var(--theme-header-paragraph-font-weight, 400); line-height: var(--theme-header-paragraph-line-height, 1.55); letter-spacing: var(--theme-header-paragraph-letter-spacing, 0); width: var(--theme-header-paragraph-width, auto); min-width: var(--theme-header-paragraph-min-width, 0); max-width: var(--theme-header-paragraph-max-width, none); height: var(--theme-header-paragraph-height, auto); min-height: var(--theme-header-paragraph-min-height, 0); max-height: var(--theme-header-paragraph-max-height, none); text-align: var(--theme-header-paragraph-text-align, var(--theme-header-text-align, left)); } .nav-toggle { border: 0; background: transparent; color: var(--theme-color-text); cursor: pointer; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; } .nav-toggle .gms { font-size: 1.6rem; } .theme-switch-button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--theme-body-text); box-shadow: none; cursor: pointer; font-size: 20px; line-height: 1; } .theme-switch-button .gms { font-size: 20px; line-height: 1; } .contact-line { margin: 0 0 0.35rem; } .contact-line:last-child { margin-bottom: 0; } .cache-clear-link { display: inline-flex; align-items: center; margin-left: 0.4rem; color: var(--gms-mane-top); text-decoration: none; } .cache-clear-link .gms { font-size: 0.9rem; } .content-grid { display: grid; gap: 0.75rem; } .page-children { /*margin: 1.75rem 0 2rem;*/ margin: 0; } .page-child-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .page-child-card { display: block; padding: 1rem 1.1rem; margin: var(--theme-content-card-margin, 0 0 1rem 0); border: 1px solid rgba(var(--gms-shadow-rgb), 0.18); border-radius: 18px; background: linear-gradient(180deg, rgba(var(--gms-body-rgb), 0.92), rgba(var(--gms-white-rgb), 0.98)); color: inherit; text-decoration: none; box-shadow: 0 14px 28px rgba(var(--gms-shadow-rgb), 0.08); } .page-child-card.content-nav-card:hover, .page-child-card.content-nav-card:focus-visible { padding: var(--theme-content-card-hover-padding, var(--theme-content-card-padding, 1rem 1.1rem)); margin: var(--theme-content-card-hover-margin, var(--theme-content-card-margin, 0 0 1rem 0)); border: 1px solid var(--theme-content-card-hover-border, rgba(var(--gms-shadow-rgb), 0.24)); border-radius: var(--theme-content-card-hover-radius, 18px); background: var(--theme-content-card-hover-bg, linear-gradient(180deg, rgba(var(--gms-body-rgb), 0.96), rgba(var(--gms-white-rgb), 1))); color: var(--theme-content-card-hover-text, inherit); text-decoration: none; box-shadow: var(--theme-content-card-hover-shadow, 0 18px 34px rgba(var(--gms-shadow-rgb), 0.12)); } .page-child-card strong { display: block; margin-bottom: 0.4rem; } .page-child-card span { /*display: block; color: rgba(var(--gms-shadow-rgb), 0.78);*/ font-size: 0.95rem; line-height: 1.5; } .page-theme-blocks { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--page-theme-blocks-gap, 1.5rem 2rem); margin: 0; padding: 0; } .page-theme-blocks.page-theme-blocks-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-theme-blocks.page-theme-blocks-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-theme-blocks.page-theme-blocks-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .page-theme-blocks.page-theme-blocks-count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .page-theme-block { background: transparent; padding: 0; width: 100%; max-width: 360px; margin: 0; justify-self: stretch; text-align: left; } .page-theme-blocks.page-theme-blocks-count-1 .page-theme-block { justify-self: center; } .page-theme-blocks.page-theme-blocks-count-2 .page-theme-block:first-child, .page-theme-blocks.page-theme-blocks-count-3 .page-theme-block:first-child, .page-theme-blocks.page-theme-blocks-count-4 .page-theme-block:first-child, .page-theme-blocks.page-theme-blocks-count-5 .page-theme-block:first-child { justify-self: start; } .page-theme-blocks.page-theme-blocks-count-2 .page-theme-block:last-child, .page-theme-blocks.page-theme-blocks-count-3 .page-theme-block:last-child, .page-theme-blocks.page-theme-blocks-count-4 .page-theme-block:last-child, .page-theme-blocks.page-theme-blocks-count-5 .page-theme-block:last-child { justify-self: end; } .page-theme-blocks.page-theme-blocks-count-3 .page-theme-block:nth-child(2), .page-theme-blocks.page-theme-blocks-count-5 .page-theme-block:nth-child(3) { justify-self: center; } .page-theme-blocks.page-theme-blocks-count-4 .page-theme-block:nth-child(2) { justify-self: start; } .page-theme-blocks.page-theme-blocks-count-4 .page-theme-block:nth-child(3) { justify-self: end; } .page-theme-blocks.page-theme-blocks-count-5 .page-theme-block:nth-child(2) { justify-self: start; } .page-theme-blocks.page-theme-blocks-count-5 .page-theme-block:nth-child(4) { justify-self: end; } .page-theme-block .theme-block-canvas { margin-left: 0; margin-right: auto; } .page-theme-block-section { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .page-theme-block-section .content-section-title { margin: 0 0 0.75rem; } .theme-default-block-canvas-page { border: 0; border-radius: 0; box-shadow: none; } .gms-list { margin: 0.75rem 0 1rem 1.25rem; padding: 0; } .gms-list li + li { margin-top: 0.45rem; } .gms-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; } .gms-table th, .gms-table td { padding: 0.65rem 0.75rem; border: 1px solid rgba(var(--gms-shadow-rgb), 0.14); text-align: left; vertical-align: top; } .gms-table th { background: rgba(var(--gms-body-rgb), 0.28); } .resource-table-row { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(120px, 0.9fr) minmax(80px, 0.6fr); gap: 0.75rem; align-items: center; padding: 0.55rem 0.75rem; } .resource-table-row.is-odd { background: rgba(var(--gms-body-rgb), 0.14); } .resource-table-row.is-even { background: rgba(var(--gms-white-rgb), 0.82); } .resource-table-row.is-unicode { background: rgba(var(--gms-white-rgb), 0.82); } .cell-left, .cell-middle, .cell-right { min-width: 0; } .cell-middle { font-family: "Courier New", Courier, monospace; font-size: 0.95rem; } .cell-right { font-size: 1.05rem; } .cInput { width: min(240px, 100%); margin: 0 0.5rem 0.75rem 0; padding: 0.6rem 0.7rem; border: 1px solid rgba(var(--gms-shadow-rgb), 0.22); border-radius: 10px; background: rgba(var(--gms-white-rgb), 0.92); } .pwow-header { margin-top: 1.5rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .poems-note { margin: 0 0 1.25rem; color: rgba(var(--gms-shadow-rgb), 0.72); font-size: 0.95rem; } .poem-card-grid { display: grid; gap: 1rem; /*grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));*/ margin: 0 0 1.5rem; } .poem-card, .wisdom-card { padding: 1.05rem 1.1rem 1.15rem; border: 1px solid rgba(var(--gms-shadow-rgb), 0.14); border-radius: 20px; background: linear-gradient(180deg, rgba(var(--gms-body-rgb), 0.9), rgba(var(--gms-white-rgb), 0.98)); box-shadow: 0 14px 28px rgba(var(--gms-shadow-rgb), 0.08); } .poem-card h2, .wisdom-card h2 { margin: 0 0 0.7rem; font-size: 1.15rem; } .poem-card p, .wisdom-list li { line-height: 1.7; } .poem-card-credit { margin-top: 0.85rem; color: rgba(var(--gms-shadow-rgb), 0.64); font-style: italic; } .wisdom-card { margin-top: 1.2rem; } .wisdom-list { margin: 0; padding-left: 1.25rem; list-style: disclosure-closed; } .wisdom-list li + li { margin-top: 0.8rem; } .wisdom-list span { display: block; margin-top: 0.2rem; color: rgba(var(--gms-shadow-rgb), 0.64); font-style: italic; } .resource-table-row .cell-left { font-family: inherit; font-size: 1rem; } .resource-table-row.is-unicode .cell-left, .resource-table-row.is-unicode .cell-middle, .resource-table-row.is-unicode .cell-right { font-family: "Courier New", Courier, monospace; } .site-nav-panel { display: none; position: absolute; top: 0; right: 1.25rem; width: min(320px, calc(100vw - 2.5rem)); min-width: var(--site-nav-min-width, 0); max-height: calc(100vh - 35px); background: rgba(var(--gms-white-rgb), 0.98); border: 1px solid rgba(var(--gms-shadow-rgb), 0.75); padding: 1rem 1.1rem; overflow-y: auto; z-index: 20; font-family: var(--site-nav-font-family, inherit); font-weight: var(--site-nav-font-weight, inherit); } .site-nav-panel.is-open { display: block; } .theme-block-canvas { position: relative; max-width: 100%; border: 1px solid rgba(var(--gms-shadow-rgb), 0.75); border-radius: 1rem; box-sizing: border-box; overflow: hidden; } .theme-block-canvas [data-block-node] { position: absolute; box-sizing: border-box; overflow: auto; } .theme-site-branding-block { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; height: 100%; overflow: visible !important; } .theme-site-branding-block h1 { color: var(--theme-header-heading-color, var(--theme-header-text, inherit)); background: var(--theme-header-heading-bg, transparent); border: 1px solid var(--theme-header-heading-border, transparent); font-family: var(--theme-header-heading-font-family, inherit); font-size: var(--theme-header-heading-font-size, clamp(2rem, 4vw, 3.5rem)); font-weight: var(--theme-header-heading-font-weight, 400); display: inline-flex; align-items: center; align-self: flex-start; gap: 0.65rem; line-height: var(--theme-header-heading-line-height, 1); letter-spacing: var(--theme-header-heading-letter-spacing, 0); max-width: 100%; margin: 0; text-align: var(--theme-header-heading-text-align, var(--theme-header-text-align, left)); } .theme-site-branding-block h1 > span { display: flex; align-items: center; line-height: inherit; transform: translateY(-0.05em); } .theme-site-branding-block .site-tagline { margin: 0.08rem 0 0; color: var(--theme-header-paragraph-color, var(--theme-color-muted)); background: var(--theme-header-paragraph-bg, transparent); border: 1px solid var(--theme-header-paragraph-border, transparent); font-family: var(--theme-header-paragraph-font-family, var(--theme-body-font-family)); font-size: var(--theme-header-paragraph-font-size, 0.95rem); font-weight: var(--theme-header-paragraph-font-weight, 400); line-height: var(--theme-header-paragraph-line-height, 1.55); letter-spacing: var(--theme-header-paragraph-letter-spacing, 0); text-align: var(--theme-header-paragraph-text-align, var(--theme-header-text-align, left)); transform: translateY(-0.08rem); } .theme-site-branding-block .site-logo, .theme-block-canvas .site-logo { display: block; flex: 0 0 auto; width: auto !important; height: auto !important; max-width: 100%; max-height: calc(var(--theme-header-heading-font-size, clamp(2rem, 4vw, 3.5rem)) * 1.35); object-fit: contain; } .site-nav-list, .site-subnav-list { list-style: none; margin: 0; padding: 0; } .site-nav-item + .site-nav-item { margin-top: 0.75rem; } .site-nav-entry { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; } .site-nav-entry[data-site-nav-tree-entry] { cursor: pointer; } .site-nav-entry[data-site-nav-tree-entry] > a { pointer-events: none; } .site-nav-item > a, .site-subnav-item > a, .site-nav-entry > a { text-decoration: none; color: var(--site-nav-color, var(--gms-mane-4)); display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--site-nav-font-size, 1rem); font-weight: var(--site-nav-font-weight, inherit); text-transform: var(--site-nav-text-transform, none); } .site-nav-heading, .site-subnav-heading { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--site-nav-sub-color, var(--gms-green-gray)); text-transform: var(--site-nav-text-transform, uppercase); letter-spacing: 0.08em; font-size: calc(var(--site-nav-font-size, 1rem) * 0.78); font-weight: var(--site-nav-font-weight, inherit); } .site-nav-panel-list-flat .site-subnav-item > a { color: var(--site-nav-flat-sub-color, var(--site-nav-sub-color, var(--gms-green-gray))); font-size: calc(var(--site-nav-font-size, 1rem) * 0.88); text-transform: var(--site-nav-flat-sub-text-transform, none); } .site-nav-panel-list-flat .site-subnav-heading { color: var(--site-nav-flat-sub-color, var(--site-nav-sub-color, var(--gms-green-gray))); font-size: calc(var(--site-nav-font-size, 1rem) * 0.88); text-transform: var(--site-nav-flat-sub-text-transform, var(--site-nav-text-transform, uppercase)); } .site-nav-panel-list-tree .site-nav-heading, .site-nav-panel-list-tree .site-subnav-heading, .site-nav-panel-accordion .site-nav-heading, .site-nav-panel-accordion .site-subnav-heading, .site-nav-panel-slider .site-nav-heading, .site-nav-panel-slider .site-subnav-heading { color: var(--site-nav-color, var(--gms-mane-4)); text-transform: var(--site-nav-text-transform, none); letter-spacing: 0; font-size: var(--site-nav-font-size, 1rem); } .site-nav-icon { flex: 0 0 auto; width: 1em; height: 1em; object-fit: contain; } .site-nav-icon-svg svg { display: block; width: 1em; height: 1em; } .site-subnav-list { margin-top: 0.45rem; padding-left: 1rem; } .site-subnav-list-nested { margin-top: 0.3rem; padding-left: 0.9rem; } .site-subnav-item + .site-subnav-item { margin-top: 0.35rem; } .site-nav-tree-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: transparent; color: var(--site-nav-color, var(--gms-green-gray)); font-weight: var(--site-nav-font-weight, inherit); text-transform: var(--site-nav-text-transform, none); cursor: pointer; } .site-nav-tree-toggle .gms, .site-nav-slider-forward > .gms, .site-nav-slider-back > .gms { font-size: var(--site-nav-glyph-font-size, 1em); transform: translateY(var(--site-nav-glyph-vertical-offset, 0)); } .site-nav-panel-list-tree .site-subnav-list, .site-nav-panel-accordion .site-subnav-list { display: none; } .site-nav-panel-list-tree .site-nav-item.is-open > .site-subnav-list, .site-nav-panel-list-tree .site-subnav-item.is-open > .site-subnav-list, .site-nav-panel-accordion .site-nav-item.is-open > .site-subnav-list, .site-nav-panel-accordion .site-subnav-item.is-open > .site-subnav-list { display: grid; } .site-nav-slider { position: relative; overflow: hidden; } .site-nav-slider-panel { display: none; gap: 0.55rem; } .site-nav-slider-panel.is-active { display: grid; } .site-nav-slider-forward, .site-nav-slider-back { width: 100%; display: flex; align-items: center; gap: 0.55rem; padding: 0; border: 0; background: transparent; color: var(--site-nav-color, var(--gms-mane-4)); font-size: var(--site-nav-font-size, 1rem); font-weight: var(--site-nav-font-weight, inherit); text-transform: var(--site-nav-text-transform, none); text-align: left; cursor: pointer; } .site-nav-slider-forward { justify-content: space-between; } .site-nav-slider-back { justify-content: flex-start; color: var(--site-nav-sub-color, var(--gms-green-gray)); font-weight: var(--site-nav-font-weight, 650); } .site-nav-slider-label { min-width: 0; display: inline-flex; align-items: center; gap: 0.45rem; } .site-nav-slider-forward > .gms { flex: 0 0 auto; margin-left: auto; } .site-nav-slider-back-row { padding-bottom: 0.45rem; border-bottom: 1px solid rgba(var(--gms-shadow-rgb), 0.1); } .content-panel, .content-block { background: var(--theme-page-section-bg); color: var(--theme-page-section-text); border: 1px solid var(--theme-page-section-border); border-radius: var(--theme-page-section-radius); padding: var(--theme-page-section-padding); box-shadow: var(--theme-page-section-shadow); margin: var(--theme-page-section-margin, 0 0 1.4rem 0); width: var(--theme-page-section-width, auto); min-width: var(--theme-page-section-min-width, 0); max-width: var(--theme-page-section-max-width, none); height: var(--theme-page-section-height, auto); min-height: var(--theme-page-section-min-height, 0); max-height: var(--theme-page-section-max-height, none); text-align: var(--theme-page-section-text-align, left); } .content-card { background: var(--theme-content-card-bg); color: var(--theme-content-card-text); border: 1px solid var(--theme-content-card-border); border-radius: var(--theme-content-card-radius); padding: var(--theme-content-card-padding); box-shadow: var(--theme-content-card-shadow); margin: var(--theme-content-card-margin, 0 0 1rem 0); width: var(--theme-content-card-width, auto); min-width: var(--theme-content-card-min-width, 0); max-width: var(--theme-content-card-max-width, none); height: var(--theme-content-card-height, auto); min-height: var(--theme-content-card-min-height, 0); max-height: var(--theme-content-card-max-height, none); text-align: var(--theme-content-card-text-align, left); } .content-card.content-nav-card:hover, .content-card.content-nav-card:focus-within { background: var(--theme-content-card-hover-bg, var(--theme-content-card-bg)); color: var(--theme-content-card-hover-text, var(--theme-content-card-text)); border: 1px solid var(--theme-content-card-hover-border, var(--theme-content-card-border)); border-radius: var(--theme-content-card-hover-radius, var(--theme-content-card-radius)); padding: var(--theme-content-card-hover-padding, var(--theme-content-card-padding)); box-shadow: var(--theme-content-card-hover-shadow, var(--theme-content-card-shadow)); margin: var(--theme-content-card-hover-margin, var(--theme-content-card-margin, 0 0 1rem 0)); text-align: var(--theme-content-card-hover-text-align, var(--theme-content-card-text-align, left)); } .content-form-card { width: 100%; box-sizing: border-box; } .content-form label { display: block; margin: 0 0 0.85rem; } .content-form .is-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .content-form-header { display: flex; flex-direction: column; gap: 0.6rem; } .content-form-title, .content-form-subtext { margin: 0; } .content-form-field-label { display: block; font-weight: 600; } .content-form-choice { display: flex; align-items: center; gap: 0.65rem; margin: 0; } .theme-default-form-canvas.content-form { display: grid; gap: 0.85rem; align-content: start; border-radius: 0; box-shadow: none; } .theme-default-form-canvas.content-form [data-form-node] { position: relative; left: auto; top: auto; min-width: 0; overflow: visible; } .theme-default-form-canvas.content-form [data-form-node] > * { max-width: 100%; } .theme-editor-form-flow-preview .theme-block-button { width: 100%; height: 100%; box-sizing: border-box; } .content-form input[type='text'], .content-form input[type='date'], .content-form input[type='datetime-local'], .content-form input[type='email'], .content-form input[type='month'], .content-form input[type='tel'], .content-form input[type='time'], .content-form input[type='url'], .content-form input[type='week'], .content-form input[type='number'], .content-form input[type='search'], .content-form input[type='password'], .content-form input[type='color'], .content-form input[type='range'], .content-form select, .content-form textarea { width: 100%; max-width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--theme-content-card-border, var(--gms-border)); border-radius: 12px; background: rgba(var(--gms-white-rgb), 0.96); color: inherit; box-sizing: border-box; font: inherit; } .content-form textarea { min-height: 7rem; resize: vertical; } .content-form input[type='checkbox'], .content-form input[type='radio'] { width: auto; margin-right: 0.45rem; } .content-form-actions { margin: 1rem 0 0; } .content-form-message { margin-top: 1rem; } .content-title, .content-card-title, .content-section-title, .content-block h2 { margin: 0 0 0.75rem; } .content-title { font-size: clamp(2rem, 4vw, 3.4rem); } .content-rich h1, .content-title { color: var(--theme-h1-color); background: var(--theme-h1-bg, transparent); border: 1px solid var(--theme-h1-border, transparent); font-family: var(--theme-h1-font-family); font-size: var(--theme-h1-font-size); font-weight: var(--theme-h1-font-weight); line-height: var(--theme-h1-line-height); letter-spacing: var(--theme-h1-letter-spacing); margin: var(--theme-h1-margin); width: var(--theme-h1-width, auto); min-width: var(--theme-h1-min-width, 0); max-width: var(--theme-h1-max-width, none); height: var(--theme-h1-height, auto); min-height: var(--theme-h1-min-height, 0); max-height: var(--theme-h1-max-height, none); text-align: var(--theme-h1-text-align, left); } .content-card-title, .content-section-title, .content-block h2 { font-size: var(--theme-h2-font-size); color: var(--theme-h2-color); background: var(--theme-h2-bg, transparent); border: 1px solid var(--theme-h2-border, transparent); font-family: var(--theme-h2-font-family); font-weight: var(--theme-h2-font-weight); line-height: var(--theme-h2-line-height); letter-spacing: var(--theme-h2-letter-spacing); margin: var(--theme-h2-margin); width: var(--theme-h2-width, auto); min-width: var(--theme-h2-min-width, 0); max-width: var(--theme-h2-max-width, none); height: var(--theme-h2-height, auto); min-height: var(--theme-h2-min-height, 0); max-height: var(--theme-h2-max-height, none); text-align: var(--theme-h2-text-align, left); } .content-rich h2 { color: var(--theme-h2-color); background: var(--theme-h2-bg, transparent); border: 1px solid var(--theme-h2-border, transparent); font-family: var(--theme-h2-font-family); font-size: var(--theme-h2-font-size); font-weight: var(--theme-h2-font-weight); line-height: var(--theme-h2-line-height); letter-spacing: var(--theme-h2-letter-spacing); margin: var(--theme-h2-margin); width: var(--theme-h2-width, auto); min-width: var(--theme-h2-min-width, 0); max-width: var(--theme-h2-max-width, none); height: var(--theme-h2-height, auto); min-height: var(--theme-h2-min-height, 0); max-height: var(--theme-h2-max-height, none); text-align: var(--theme-h2-text-align, left); } .content-rich h3 { color: var(--theme-h3-color); background: var(--theme-h3-bg, transparent); border: 1px solid var(--theme-h3-border, transparent); font-family: var(--theme-h3-font-family); font-size: var(--theme-h3-font-size); font-weight: var(--theme-h3-font-weight); line-height: var(--theme-h3-line-height); letter-spacing: var(--theme-h3-letter-spacing); margin: var(--theme-h3-margin); width: var(--theme-h3-width, auto); min-width: var(--theme-h3-min-width, 0); max-width: var(--theme-h3-max-width, none); height: var(--theme-h3-height, auto); min-height: var(--theme-h3-min-height, 0); max-height: var(--theme-h3-max-height, none); text-align: var(--theme-h3-text-align, left); } .content-kicker { margin: 0 0 0.35rem; color: var(--gms-green-gray); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; } .content-copy, .content-summary, .content-meta, .content-rich, .content-block p { margin: var(--theme-paragraph-margin, 0 0 0.85rem 0); line-height: var(--theme-paragraph-line-height, var(--theme-body-line-height)); font-size: var(--theme-paragraph-font-size, var(--theme-body-font-size)); font-family: var(--theme-paragraph-font-family, var(--theme-body-font-family)); font-weight: var(--theme-paragraph-font-weight, 400); letter-spacing: var(--theme-paragraph-letter-spacing, 0); color: var(--theme-paragraph-color, var(--theme-body-text)); background: var(--theme-paragraph-bg, transparent); border: 1px solid var(--theme-paragraph-border, transparent); width: var(--theme-paragraph-width, auto); min-width: var(--theme-paragraph-min-width, 0); max-width: var(--theme-paragraph-max-width, none); height: var(--theme-paragraph-height, auto); min-height: var(--theme-paragraph-min-height, 0); max-height: var(--theme-paragraph-max-height, none); text-align: var(--theme-paragraph-text-align, left); } .content-summary:last-child, .content-copy:last-child, .content-meta:last-child, .content-rich > *:last-child, .content-block p:last-child { margin-bottom: 0; } .content-card-list, .content-section-list { display: grid; gap: 0; } .content-meta-pills, .content-chip-row { display: flex; flex-wrap: wrap; gap: 0.55rem; } .content-meta-pills { margin: 0.9rem 0 1rem; } .content-pill, .content-chip { display: inline-flex; align-items: center; border-radius: 999px; text-decoration: none; } .content-pill { background: var(--theme-meta-pill-bg); border: 1px solid var(--theme-meta-pill-border); color: var(--theme-meta-pill-text); font-size: 0.85rem; padding: var(--theme-meta-pill-padding-y) var(--theme-meta-pill-padding-x); text-align: var(--theme-meta-pill-text-align, left); } .content-chip { padding: calc(var(--theme-meta-pill-padding-y) + 0.1rem) calc(var(--theme-meta-pill-padding-x) + 0.1rem); font-size: 0.92rem; background: var(--theme-meta-pill-bg); color: var(--theme-meta-pill-text); border: 1px solid var(--theme-meta-pill-border); border-radius: var(--theme-meta-pill-radius); text-align: var(--theme-meta-pill-text-align, left); } .content-rich { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .content-rich > *:first-child { margin-top: 0; } .content-rich p, .content-rich ul, .content-rich ol { margin: var(--theme-paragraph-margin, 0 0 0.85rem 0); } .content-rich ul, .content-rich ol { padding-left: var(--theme-list-padding-left, 1.15rem); margin: var(--theme-list-margin, 0 0 0.85rem 0); font-family: var(--theme-list-font-family, var(--theme-body-font-family)); font-size: var(--theme-list-font-size, var(--theme-body-font-size)); font-weight: var(--theme-list-font-weight, 400); line-height: var(--theme-list-line-height, var(--theme-body-line-height)); letter-spacing: var(--theme-list-letter-spacing, 0); color: var(--theme-list-color, var(--theme-body-text)); background: var(--theme-list-bg, transparent); border: 1px solid var(--theme-list-border, transparent); width: var(--theme-list-width, auto); min-width: var(--theme-list-min-width, 0); max-width: var(--theme-list-max-width, none); height: var(--theme-list-height, auto); min-height: var(--theme-list-min-height, 0); max-height: var(--theme-list-max-height, none); text-align: var(--theme-list-text-align, left); } .content-rich ul, .theme-editor-preview-list-block ul { list-style: none; padding-left: var(--theme-list-padding-left, 1.15rem); } .content-rich ul li, .theme-editor-preview-list-block ul li { position: relative; padding-left: calc(var(--theme-list-marker-column-width, 1.1rem) + var(--theme-list-text-indent, 0.45rem)); } .content-rich ul li + li, .theme-editor-preview-list-block ul li + li { margin-top: var(--theme-list-item-gap, 0.45rem); } .content-rich ul li::before, .theme-editor-preview-list-block ul li::before { content: var(--theme-list-marker-content, "•"); position: absolute; left: var(--theme-list-marker-indent, 0); top: var(--theme-list-marker-offset-y, 0.05em); width: var(--theme-list-marker-column-width, 1.1rem); height: var(--theme-list-marker-column-width, 1.1rem); display: inline-flex; align-items: center; justify-content: center; color: var(--theme-list-marker-color, var(--theme-color-accent)); font-family: var(--theme-list-marker-font-family, inherit); font-size: var(--theme-list-marker-size, 1em); line-height: 1; background-image: var(--theme-list-marker-image, none); background-repeat: no-repeat; background-position: center; background-size: contain; } .content-rich img, .content-rich video, .content-rich audio, .content-rich iframe { max-width: 100%; box-sizing: border-box; position: relative; z-index: 0; } .content-rich > *:not(img):not(video):not(audio):not(iframe) { position: relative; z-index: 1; } .content-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } .content-actions a { text-decoration: none; } .content-media-figure { display: block; margin: 0 0 1rem; } .content-media-figure img { width: 100%; height: auto; display: block; border-radius: 1rem; } .content-shell { display: grid; gap: 1rem; } .content-shell-spacious { gap: 1.75rem; } .error-shell { display: grid; place-items: center; min-height: 55vh; } .error-card { max-width: 760px; width: 100%; background: linear-gradient(180deg, rgba(var(--gms-white-rgb), 0.88), rgba(var(--gms-white-rgb), 0.94)); border: 1px solid rgba(var(--gms-shadow-rgb), 0.75); padding: 2rem; box-shadow: 0 20px 50px rgba(var(--gms-shadow-rgb), 0.08); } .error-code { margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.82rem; color: var(--gms-mane-top); } .error-copy { max-width: 42rem; line-height: 1.7; } .content-panel, .content-card { min-width: 0; } .content-title, .content-card-title { margin: 0 0 0.65rem; line-height: 1.1; letter-spacing: .1rem; } .content-card-title a, .content-title a { text-decoration: none; } .content-copy, .content-summary, .content-rich, .content-lead { line-height: 1.7; overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .content-rich { overflow: hidden; position: relative; isolation: isolate; } .content-card-list { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; } .content-card-compact { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.05rem 1.1rem; } .content-card-compact > * { margin-top: 0; margin-bottom: 0; } .content-empty-card { grid-column: 1 / -1; } .content-chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .content-chip-row-tight { gap: 0.5rem; margin-top: 0.9rem; } .content-chip { display: inline-flex; align-items: center; padding: 0.45rem 0.8rem; border-radius: 999px; text-decoration: none; } .content-chip-primary { background: var(--theme-meta-pill-bg); color: var(--theme-meta-pill-text); } .content-chip-primary.is-active { background: var(--gms-mane-2); color: var(--gms-white); } .content-chip-accent { padding: var(--theme-meta-pill-padding-y) var(--theme-meta-pill-padding-x); background: var(--theme-meta-pill-bg); color: var(--theme-meta-pill-text); font-size: 0.92rem; } .content-actions a, .theme-preview-button, .theme-editor-preview-button, .content-button-primary, .content-button-secondary, .content-button-tertiary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-transform: uppercase; } .content-actions a, .theme-preview-button, .theme-editor-preview-button, .content-button-primary { padding: var(--theme-action-button-padding-y) var(--theme-action-button-padding-x); border-radius: var(--theme-action-button-radius); border: 1px solid var(--theme-action-button-border); background: var(--theme-action-button-bg); color: var(--theme-action-button-text); box-shadow: var(--theme-action-button-shadow); text-decoration: none; margin: var(--theme-action-button-margin, 0); width: var(--theme-action-button-width, auto); min-width: var(--theme-action-button-min-width, 0); max-width: var(--theme-action-button-max-width, none); height: var(--theme-action-button-height, auto); min-height: var(--theme-action-button-min-height, 0); max-height: var(--theme-action-button-max-height, none); text-align: var(--theme-action-button-text-align, left); } .content-actions a:hover, .content-actions a:focus-visible, .theme-preview-button.is-hover-preview, .theme-editor-preview-button.is-hover-preview, .content-button-primary:hover, .content-button-primary:focus-visible { padding: var(--theme-action-button-hover-padding-y, var(--theme-action-button-padding-y)) var(--theme-action-button-hover-padding-x, var(--theme-action-button-padding-x)); border-radius: var(--theme-action-button-hover-radius, var(--theme-action-button-radius)); border: 1px solid var(--theme-action-button-hover-border, var(--theme-action-button-border)); background: var(--theme-action-button-hover-bg, var(--theme-action-button-bg)); color: var(--theme-action-button-hover-text, var(--theme-action-button-text)); box-shadow: var(--theme-action-button-hover-shadow, var(--theme-action-button-shadow)); margin: var(--theme-action-button-hover-margin, var(--theme-action-button-margin, 0)); width: var(--theme-action-button-hover-width, var(--theme-action-button-width, auto)); min-width: var(--theme-action-button-hover-min-width, var(--theme-action-button-min-width, 0)); max-width: var(--theme-action-button-hover-max-width, var(--theme-action-button-max-width, none)); height: var(--theme-action-button-hover-height, var(--theme-action-button-height, auto)); min-height: var(--theme-action-button-hover-min-height, var(--theme-action-button-min-height, 0)); max-height: var(--theme-action-button-hover-max-height, var(--theme-action-button-max-height, none)); text-align: var(--theme-action-button-hover-text-align, var(--theme-action-button-text-align, left)); text-decoration: none; } .content-chip-accent.is-active { background: var(--gms-mane-top); color: var(--gms-white); } .content-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 0.75rem; color: var(--gms-green-gray); font-size: 0.92rem; } .content-media-figure, .content-cover { display: block; margin: 0 0 1rem; } .content-media-link { display: block; margin-bottom: 0.2rem; } .content-media-figure img, .content-media-image, .cover-image { width: 100%; height: auto; display: block; border-radius: 1rem; } .content-lead { font-size: 1.05rem; color: var(--gms-green-gray); } .content-rich > *:first-child { margin-top: 0; } .content-rich img, .content-rich video, .content-rich audio, .content-rich iframe { box-sizing: border-box; position: relative; z-index: 0; } .content-rich > *:not(img):not(video):not(audio):not(iframe) { position: relative; z-index: 1; } .gms-modal-close .gms, .admin-editor-modal-close .gms { font-size: 0.95rem; } .admin-editor-code-toggle.is-active { background: var(--gms-green-dark); border-color: var(--gms-green); color: var(--gms-white); } .admin-editor-image-align-button.is-active { background: var(--gms-mane-top); } .cover-preview-stage .content-cover { margin: 0; } .site-footer { background: var(--theme-footer-bg, transparent); color: var(--theme-footer-text, inherit); border: 1px solid var(--theme-footer-border, transparent); border-radius: var(--theme-footer-radius, 0); padding: var(--theme-footer-padding, 1.5rem 0 0); box-shadow: var(--theme-footer-shadow, none); margin: var(--theme-footer-margin, 2.5rem 0 0); width: 100%; min-width: 0; max-width: none; height: var(--theme-footer-height, auto); min-height: var(--theme-footer-min-height, 0); max-height: var(--theme-footer-max-height, none); text-align: var(--theme-footer-text-align, left); box-sizing: border-box; } .footer-links { margin: var(--footer-menu-margin, 0 0 20px); padding: var(--footer-menu-padding, 0); text-align: center; } .footer-links-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem 0.9rem; list-style: none; margin: 0; padding: 0; } .footer-links-item { position: relative; } .footer-links-item:not(:last-child)::after { content: '|'; margin-left: 0.9rem; color: rgba(var(--gms-shadow-rgb), 0.45); } .footer-links a { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: var(--footer-menu-font-size, inherit); font-weight: var(--footer-menu-font-weight, inherit); } .footer-links a .gms { font-size: inherit; font-weight: inherit; line-height: 1; } .footer-copyright { text-align: center; } .footer-copyright p { margin: 0; font-size: var(--footer-menu-font-size, 0.9rem); font-weight: var(--footer-menu-font-weight, 400); } .footer-social-links { margin-top: 0; } .footer-social-links .footer-links-list { gap: 0.6rem 1rem; } .footer-social-links .footer-links-item:not(:last-child)::after { content: none; } .footer-grid { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--footer-blocks-gap, 1.5rem 2rem); margin: var(--footer-blocks-margin, 0); padding: var(--footer-blocks-padding, 0); } .footer-grid.footer-grid-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid.footer-grid-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-grid.footer-grid-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-grid.footer-grid-count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .footer-block { background: transparent; padding: 0; width: 100%; max-width: 360px; margin: 0; justify-self: stretch; text-align: left; } .footer-grid.footer-grid-count-1 .footer-block { justify-self: center; } .footer-grid.footer-grid-count-2 .footer-block:first-child, .footer-grid.footer-grid-count-3 .footer-block:first-child, .footer-grid.footer-grid-count-4 .footer-block:first-child, .footer-grid.footer-grid-count-5 .footer-block:first-child { justify-self: start; } .footer-grid.footer-grid-count-2 .footer-block:last-child, .footer-grid.footer-grid-count-3 .footer-block:last-child, .footer-grid.footer-grid-count-4 .footer-block:last-child, .footer-grid.footer-grid-count-5 .footer-block:last-child { justify-self: end; } .footer-grid.footer-grid-count-3 .footer-block:nth-child(2), .footer-grid.footer-grid-count-5 .footer-block:nth-child(3) { justify-self: center; } .footer-grid.footer-grid-count-4 .footer-block:nth-child(2) { justify-self: start; } .footer-grid.footer-grid-count-4 .footer-block:nth-child(3) { justify-self: end; } .footer-grid.footer-grid-count-5 .footer-block:nth-child(2) { justify-self: start; } .footer-grid.footer-grid-count-5 .footer-block:nth-child(4) { justify-self: end; } .footer-block-left { justify-self: start; text-align: left; } .footer-block-center { justify-self: center; text-align: center; } .footer-block-right { justify-self: end; text-align: right; } .footer-block h2 { margin: var(--theme-footer-heading-margin, 0 0 0.75rem); color: var(--theme-footer-heading-color, var(--theme-footer-text, inherit)); background: var(--theme-footer-heading-bg, transparent); border: 1px solid var(--theme-footer-heading-border, transparent); font-family: var(--theme-footer-heading-font-family, inherit); font-size: var(--theme-footer-heading-font-size, 1rem); font-weight: var(--theme-footer-heading-font-weight, 400); line-height: var(--theme-footer-heading-line-height, 1.12); letter-spacing: var(--theme-footer-heading-letter-spacing, 0); width: var(--theme-footer-heading-width, auto); min-width: var(--theme-footer-heading-min-width, 0); max-width: var(--theme-footer-heading-max-width, none); height: var(--theme-footer-heading-height, auto); min-height: var(--theme-footer-heading-min-height, 0); max-height: var(--theme-footer-heading-max-height, none); text-align: var(--theme-footer-heading-text-align, var(--theme-footer-text-align, left)); } .footer-block p { margin: var(--theme-footer-paragraph-margin, 0 0 0.55rem); color: var(--theme-footer-paragraph-color, var(--theme-footer-text, inherit)); background: var(--theme-footer-paragraph-bg, transparent); border: 1px solid var(--theme-footer-paragraph-border, transparent); font-family: var(--theme-footer-paragraph-font-family, var(--theme-body-font-family)); font-size: var(--theme-footer-paragraph-font-size, 0.95rem); font-weight: var(--theme-footer-paragraph-font-weight, 400); line-height: var(--theme-footer-paragraph-line-height, 1.55); letter-spacing: var(--theme-footer-paragraph-letter-spacing, 0); width: var(--theme-footer-paragraph-width, auto); min-width: var(--theme-footer-paragraph-min-width, 0); max-width: var(--theme-footer-paragraph-max-width, none); height: var(--theme-footer-paragraph-height, auto); min-height: var(--theme-footer-paragraph-min-height, 0); max-height: var(--theme-footer-paragraph-max-height, none); text-align: var(--theme-footer-paragraph-text-align, var(--theme-footer-text-align, left)); } .footer-block p:last-child { margin-bottom: 0; } .site-footer .theme-block-canvas { width: 100% !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; } .site-footer .theme-block-canvas [data-block-node] { max-width: 100%; } .footer-block .theme-block-canvas { margin-left: 0; margin-right: auto; } .social-list { list-style: none; margin: 0; padding: 0; } .social-list li { margin: 0 0 0.45rem; } .social-list li:last-child { margin-bottom: 0; } .social-list a { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; } .social-list a .gms { font-size: 1.15rem; line-height: 1; } .footer-map iframe { width: 100%; min-height: 240px; border: 0; } .site-footer .theme-block-canvas iframe { display: block; width: 100%; height: 100%; min-height: 0; max-width: 100%; border: 0; } .admin-sidebar-link .gms { font-size: 0.95rem; } .admin-sidebar-link.is-active:hover, .admin-sidebar-link.is-active:focus-visible { background: rgba(var(--gms-shadow-rgb), 0.16); border-color: rgba(var(--gms-shadow-rgb), 0.22); color: var(--gms-mane-3); } .admin-sidebar-link.is-active { background: rgba(var(--gms-shadow-rgb), 0.12); border-color: rgba(var(--gms-shadow-rgb), 0.18); color: var(--gms-mane-3); font-weight: 600; } .admin-sidebar-sublink.is-active { color: var(--gms-mane-3); font-weight: 600; background: rgba(var(--gms-shadow-rgb), 0.06); border-color: rgba(var(--gms-shadow-rgb), 0.18); } .admin-sidebar-sublink.is-active:hover, .admin-sidebar-sublink.is-active:focus-visible { color: var(--gms-mane-3); background: rgba(var(--gms-shadow-rgb), 0.06); border-color: rgba(var(--gms-shadow-rgb), 0.18); } .admin-panel, .admin-list-panel, .admin-editor-panel { background: rgba(var(--gms-white-rgb), 0.82); padding: 1.5rem; } .admin-panel-header, .admin-list-header, .admin-editor-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; } .admin-list-header > .admin-actions.admin-actions-stack, .admin-editor-header > .admin-actions.admin-actions-stack { display: none; } .admin-kicker { margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--gms-green-gray); } .admin-panel-header h2 { margin: 0 0 0.5rem; } .admin-copy { margin: 0; max-width: 60ch; } .admin-actions a { display: inline-block; padding: 0.65rem 0.9rem; text-decoration: none; background: var(--gms-mane-4); color: var(--gms-mint-2); } .admin-actions form { margin: 0; } .admin-actions button { display: inline-block; padding: 0.65rem 0.9rem; text-decoration: none; background: var(--gms-mane-4); color: var(--gms-mint-2); border: 0; cursor: pointer; font: inherit; } .admin-actions .gms-modal-close, .admin-actions .admin-editor-modal-close { width: 2.2rem; height: 2.2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .admin-actions-inline { margin-top: 0.6rem; } .admin-alert { margin-bottom: 1rem; padding: 0.85rem 1rem; background: rgba(var(--gms-shadow-rgb), 0.16); color: var(--gms-mane-3); } .admin-alert-error { background: rgba(var(--gms-mane-top-rgb), 0.12); color: var(--gms-mane-1); } .content-hero-tight { padding-bottom: 0; } .content-card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .content-card { background: var(--theme-content-card-bg); color: var(--theme-content-card-text); border: 1px solid var(--theme-content-card-border); border-radius: var(--theme-content-card-radius); box-shadow: var(--theme-content-card-shadow); padding: var(--theme-content-card-padding); } .content-card-head { display: grid; gap: 0.45rem; } .content-card-title { margin: 0; } .content-meta-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.9rem 0 1rem; } .content-pill { background: var(--theme-meta-pill-bg); border: 1px solid var(--theme-meta-pill-border); border-radius: var(--theme-meta-pill-radius); color: var(--theme-meta-pill-text); font-size: 0.85rem; padding: var(--theme-meta-pill-padding-y) var(--theme-meta-pill-padding-x); } .content-summary { font-size: 1rem; line-height: 1.65; margin: 0 0 1rem; } .content-rich { display: grid; gap: 0.8rem; } .content-rich p, .content-rich ul, .content-rich ol { margin: 0; } .content-rich ul, .content-rich ol { padding-left: 1.15rem; } .content-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.15rem; } .button-link { background: var(--gms-mane-3); border: 1px solid var(--gms-mane-3); border-radius: 999px; color: var(--gms-white); display: inline-flex; font-size: 0.92rem; font-weight: 700; padding: 0.72rem 1.15rem; text-decoration: none; } .button-link:hover, .button-link:focus-visible { background: var(--gms-mane-2); border-color: var(--gms-mane-2); color: var(--gms-white); } .content-split-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .content-card-sticky { align-self: start; } @media (max-width: 900px) { .content-split-layout, .jobs-application-detail { grid-template-columns: 1fr; } } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .settings-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.9rem; } .settings-field span { /*font-weight: bold;*/ } .settings-field textarea { width: 100%; } .settings-field input, .settings-field textarea { box-sizing: border-box; border: 1px solid rgba(var(--gms-shadow-rgb), 0.18); padding: 0.7rem 0.8rem; font: inherit; background: var(--gms-white); color: var(--gms-mane-4); } .settings-field small { color: var(--gms-green-gray); overflow-wrap: anywhere; } .settings-field .field-error { color: var(--gms-mane-top); font-weight: bold; } .settings-field select { box-sizing: border-box; border: 1px solid rgba(var(--gms-shadow-rgb), 0.18); padding: 0.7rem 0.8rem; font: inherit; background: var(--gms-white); color: var(--gms-mane-4); width: auto; } .settings-field-wide { grid-column: 1 / -1; } .admin-sidebar-right .settings-grid-compact .settings-field { margin: 0; } .admin-sidebar-right .settings-field textarea { min-height: 9rem; } .settings-field-checkbox { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.55rem; } .settings-field-checkbox input[type="checkbox"] { order: 0; flex: 0 0 auto; width: auto; margin: 0; padding: 0; } .settings-field-checkbox span { order: 1; } .settings-submit { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .settings-submit button { border: 0; background: var(--gms-mane-top); color: var(--gms-white); padding: 0.8rem 1.15rem; font: inherit; cursor: pointer; } .button, .button-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.72rem 0.95rem; border-radius: 0.95rem; font: inherit; font-size: 0.92rem; cursor: pointer; text-decoration: none; line-height: 1; box-shadow: 0 0.4rem 0.9rem rgba(var(--gms-shadow-rgb), 0.05); } .button { border: 1px solid var(--gms-mane-3) !important; background: var(--gms-mane-3) !important; color: var(--gms-white) !important; font-weight: 600; } .button:hover, .button:focus-visible { background: var(--gms-mane-2) !important; border: 1px solid var(--gms-mane-2) !important; color: var(--gms-white) !important; padding: 0.72rem 0.95rem !important; border-radius: 0.95rem !important; font-weight: 600 !important; font-size: 0.92rem !important; line-height: 1 !important; box-shadow: 0 0.5rem 1.1rem rgba(var(--gms-shadow-rgb), 0.14) !important; font-family: inherit !important; font-style: inherit !important; letter-spacing: inherit !important; text-transform: none !important; text-decoration: none !important; } .button:disabled { opacity: 0.55; cursor: default; } .button-secondary { border: 1px solid rgba(var(--gms-shadow-rgb), 0.18) !important; background: var(--gms-white) !important; color: var(--gms-mane-4) !important; } .button-secondary:hover, .button-secondary:focus-visible { background: rgba(var(--gms-shadow-rgb), 0.05) !important; border: 1px solid rgba(var(--gms-shadow-rgb), 0.35) !important; color: var(--gms-mane-4) !important; padding: 0.72rem 0.95rem !important; border-radius: 0.95rem !important; font-weight: inherit !important; font-size: 0.92rem !important; line-height: 1 !important; box-shadow: 0 0.5rem 1.1rem rgba(var(--gms-shadow-rgb), 0.07) !important; font-family: inherit !important; font-style: inherit !important; letter-spacing: inherit !important; text-transform: none !important; text-decoration: none !important; } .button-secondary:disabled { opacity: 0.55; cursor: default; } .admin-list-row-title .gms { color: var(--gms-green-gray); padding-top: 0.1rem; cursor: grab; touch-action: none; user-select: none; } .theme-editor-target-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .theme-editor-target-card { display: grid; gap: 0.85rem; padding: 1rem; border: 1px solid rgba(var(--gms-shadow-rgb), 0.75); border-radius: 1rem; background: rgba(var(--gms-white-rgb), 0.88); cursor: pointer; text-align: left; } .theme-editor-target-card:hover, .theme-editor-target-card:focus-visible { border-color: rgba(var(--gms-shadow-rgb), 0.24); box-shadow: 0 0 0 3px rgba(var(--gms-shadow-rgb), 0.08); } .theme-editor-target-card h3 { margin: 0; font-size: 1.05rem; } .theme-editor-target-card p { margin: 0; color: var(--gms-green-gray); font-size: 0.92rem; line-height: 1.55; } .theme-editor-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; } .theme-editor-swatch { display: grid; gap: 0.4rem; } .theme-editor-swatch-chip { height: 2.35rem; border-radius: 0.8rem; border: 1px solid rgba(var(--gms-shadow-rgb), 0.75); } .theme-editor-sidebar-tab.is-active { background: var(--gms-mane-3); border-color: var(--gms-mane-3); color: var(--gms-white); } .theme-editor-css-hint:hover, .theme-editor-css-hint:focus-visible, .theme-editor-css-hint.is-active { background: rgba(var(--gms-mane-top-rgb), 0.08); color: var(--gms-mane-top); } .theme-editor-shell .admin-editor-header .button, .theme-editor-shell .admin-editor-header .button-secondary, .theme-editor-shell .admin-editor-header .theme-editor-preview-actions > button { transform: none; transition: none; font-size: 0.92rem !important; line-height: 1 !important; font-family: 'Poppins', Arial, sans-serif !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; } .theme-editor-shell .admin-editor-header .button, .theme-editor-shell .admin-editor-header .theme-editor-preview-actions > button.button { font-weight: 600 !important; } .theme-editor-shell .admin-editor-header .button:hover, .theme-editor-shell .admin-editor-header .button:focus-visible, .theme-editor-shell .admin-editor-header .theme-editor-preview-actions > button.button:hover, .theme-editor-shell .admin-editor-header .theme-editor-preview-actions > button.button:focus-visible { background: var(--gms-mane-3) !important; border: 1px solid var(--gms-mane-3) !important; color: var(--gms-white) !important; padding: 0.72rem 0.95rem !important; border-radius: 0.95rem !important; font-weight: 600 !important; font-size: 0.92rem !important; font-family: 'Poppins', Arial, sans-serif !important; font-style: normal !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; line-height: 1 !important; box-shadow: 0 0.4rem 0.9rem rgba(var(--gms-shadow-rgb), 0.05) !important; transform: none !important; } .theme-editor-shell .admin-editor-header .button-secondary:hover, .theme-editor-shell .admin-editor-header .button-secondary:focus-visible, .theme-editor-shell .admin-editor-header .theme-editor-preview-actions > button:not(.button):not(.button-secondary):hover, .theme-editor-shell .admin-editor-header .theme-editor-preview-actions > button:not(.button):not(.button-secondary):focus-visible { background: var(--gms-white) !important; border: 1px solid rgba(var(--gms-shadow-rgb), 0.18) !important; color: var(--gms-mane-4) !important; padding: 0.72rem 0.95rem !important; border-radius: 0.95rem !important; font-weight: 400 !important; font-size: 0.92rem !important; font-family: 'Poppins', Arial, sans-serif !important; font-style: normal !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; line-height: 1 !important; box-shadow: 0 0.4rem 0.9rem rgba(var(--gms-shadow-rgb), 0.05) !important; transform: none !important; } .theme-editor-preview-actions button, .theme-editor-toolbar .settings-field select, .theme-editor-mode-toggle button { border: 1px solid rgba(var(--gms-shadow-rgb), 0.16); background: var(--gms-white); color: var(--gms-mane-4); padding: 0.72rem 0.95rem; border-radius: 0.95rem; font: inherit; box-shadow: 0 0.4rem 0.9rem rgba(var(--gms-shadow-rgb), 0.04); cursor: pointer; } .theme-editor-preview-actions button:hover, .theme-editor-preview-actions button:focus-visible, .theme-editor-toolbar .settings-field select:hover, .theme-editor-toolbar .settings-field select:focus-visible { border-color: rgba(var(--gms-shadow-rgb), 0.24); } .theme-editor-mode-toggle button .gms { font-size: 15px; } .theme-editor-mode-toggle button.is-active { background: var(--gms-mane-3); color: var(--gms-white); box-shadow: 0 0.45rem 0.9rem rgba(var(--gms-shadow-rgb), 0.18); } .theme-editor-mode-toggle button:not(.is-active) { opacity: 0.82; } .theme-editor-block-list-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .theme-editor-block-list-actions button { flex: 0 0 auto; } .theme-editor-footer-menu-toggle .gms { font-size: 1.7rem; line-height: 1; } .theme-editor-token-option.is-active, .theme-editor-token-option:hover, .theme-editor-token-option:focus-visible { background: rgba(var(--gms-mane-top-rgb), 0.08); color: var(--gms-mane-top); } .theme-editor-preview-managed-block-slot { width: 100%; } .theme-editor-preview-managed-block-node { position: absolute; display: block; border: 1px solid transparent; box-sizing: border-box; cursor: pointer; } .theme-editor-preview-nav-toggle { cursor: default; } .theme-block-canvas { overflow: hidden; } .theme-editor-block-node-meta { display: grid; gap: 0.15rem; } .theme-editor-block-node-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gms-mane-top); } .theme-editor-block-node-preview img:not(.site-logo), .theme-editor-preview-managed-block-node img:not(.site-logo) { display: block; width: 100%; height: 100%; object-fit: contain; } .theme-editor-block-node-preview .site-logo, .theme-editor-preview-managed-block-node .site-logo { display: block; flex: 0 0 auto; width: auto !important; height: auto !important; max-width: 100%; max-height: calc(var(--theme-header-heading-font-size, clamp(2rem, 4vw, 3.5rem)) * 1.35); object-fit: contain; } .theme-editor-block-node-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Each arc sits outside the node corners, extending ~15px beyond the boundary */ [data-rotate="nw"] { top: -15px; left: -15px; border-bottom: none; border-right: none; border-radius: 100% 0 0 0; } [data-rotate="ne"] { top: -15px; left: calc(100% + 1px); border-bottom: none; border-left: none; border-radius: 0 100% 0 0; } [data-rotate="sw"] { top: calc(100% + 1px); left: -15px; border-top: none; border-right: none; border-radius: 0 0 0 100%; } [data-rotate="se"] { top: calc(100% + 1px); left: calc(100% + 1px); border-top: none; border-left: none; border-radius: 0 0 100% 0; } .theme-editor-form-field-preview .is-visually-hidden, .theme-editor-faux-choice .is-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .theme-editor-block-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; align-items: center; } .theme-editor-block-controls input, .theme-editor-block-controls select, .theme-editor-block-card textarea { width: 100%; } .theme-editor-block-toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; } .theme-editor-block-preview { border-top: 1px solid rgba(var(--gms-shadow-rgb), 0.08); padding-top: 0.9rem; } .theme-block-button { display: inline-flex; align-items: center; justify-content: center; padding: var(--theme-action-button-padding-y, 0.7rem) var(--theme-action-button-padding-x, 1.15rem); border: 1px solid var(--theme-action-button-border, var(--theme-color-accent)); border-radius: var(--theme-action-button-radius, 999px); background: var(--theme-action-button-bg, var(--theme-color-accent)); color: var(--theme-action-button-text, var(--gms-white)); box-shadow: var(--theme-action-button-shadow, none); } #themeEditorFooterLinksCard { margin: 20px 0 0 0; } .theme-editor-preview-header-shell { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .theme-editor-preview-branding, .theme-editor-preview-contact { min-width: 0; } .theme-editor-preview-contact { text-align: right; margin-left: auto; } .theme-editor-preview-footer-links, .theme-editor-preview-footer-grid { width: 100%; } .theme-editor-preview-footer .footer-links { margin: 0; } .theme-editor-preview-footer .footer-block { background: rgba(var(--gms-white-rgb), 0.55); padding: 1rem 1.25rem; } .theme-editor-preview-header-heading h1 { margin: var(--theme-header-heading-margin, 0); color: var(--theme-header-heading-color, var(--theme-header-text, inherit)); background: var(--theme-header-heading-bg, transparent); border: 1px solid var(--theme-header-heading-border, transparent); font-family: var(--theme-header-heading-font-family, 'Bodoni 16', Georgia, serif); font-size: var(--theme-header-heading-font-size, clamp(2rem, 3.5vw, 3.5rem)); font-weight: var(--theme-header-heading-font-weight, 400); line-height: var(--theme-header-heading-line-height, 1); letter-spacing: var(--theme-header-heading-letter-spacing, 0); width: var(--theme-header-heading-width, auto); min-width: var(--theme-header-heading-min-width, 0); max-width: var(--theme-header-heading-max-width, none); height: var(--theme-header-heading-height, auto); min-height: var(--theme-header-heading-min-height, 0); max-height: var(--theme-header-heading-max-height, none); text-align: var(--theme-header-heading-text-align, var(--theme-header-text-align, left)); } .theme-editor-preview-header-copy p { margin: var(--theme-header-paragraph-margin, 0); color: var(--theme-header-paragraph-color, var(--theme-color-muted)); background: var(--theme-header-paragraph-bg, transparent); border: 1px solid var(--theme-header-paragraph-border, transparent); font-family: var(--theme-header-paragraph-font-family, var(--theme-body-font-family)); font-size: var(--theme-header-paragraph-font-size, 0.95rem); font-weight: var(--theme-header-paragraph-font-weight, 400); line-height: var(--theme-header-paragraph-line-height, 1.55); letter-spacing: var(--theme-header-paragraph-letter-spacing, 0); width: var(--theme-header-paragraph-width, auto); min-width: var(--theme-header-paragraph-min-width, 0); max-width: var(--theme-header-paragraph-max-width, none); height: var(--theme-header-paragraph-height, auto); min-height: var(--theme-header-paragraph-min-height, 0); max-height: var(--theme-header-paragraph-max-height, none); text-align: var(--theme-header-paragraph-text-align, var(--theme-header-text-align, left)); } .theme-editor-preview-footer-copy p { margin: var(--theme-footer-paragraph-margin, 0 0 0.55rem 0); color: var(--theme-footer-paragraph-color, var(--theme-footer-text, inherit)); background: var(--theme-footer-paragraph-bg, transparent); border: 1px solid var(--theme-footer-paragraph-border, transparent); font-family: var(--theme-footer-paragraph-font-family, var(--theme-body-font-family)); font-size: var(--theme-footer-paragraph-font-size, 0.95rem); font-weight: var(--theme-footer-paragraph-font-weight, 400); line-height: var(--theme-footer-paragraph-line-height, 1.55); letter-spacing: var(--theme-footer-paragraph-letter-spacing, 0); width: var(--theme-footer-paragraph-width, auto); min-width: var(--theme-footer-paragraph-min-width, 0); max-width: var(--theme-footer-paragraph-max-width, none); height: var(--theme-footer-paragraph-height, auto); min-height: var(--theme-footer-paragraph-min-height, 0); max-height: var(--theme-footer-paragraph-max-height, none); text-align: var(--theme-footer-paragraph-text-align, var(--theme-footer-text-align, left)); } .theme-editor-preview-header-link { background: var(--theme-header-link-bg, transparent); color: var(--theme-header-link-text, var(--theme-link-text, var(--theme-color-link))); border-color: var(--theme-header-link-border, transparent); border-radius: var(--theme-header-link-radius, 0); padding: var(--theme-header-link-padding-y, 0) var(--theme-header-link-padding-x, 0); box-shadow: var(--theme-header-link-shadow, none); font-family: var(--theme-header-link-font-family, inherit); font-size: var(--theme-header-link-font-size, inherit); font-weight: var(--theme-header-link-font-weight, inherit); line-height: var(--theme-header-link-line-height, inherit); letter-spacing: var(--theme-header-link-letter-spacing, inherit); text-decoration: var(--theme-header-link-text-decoration, none); margin: var(--theme-header-link-margin, 0); text-align: var(--theme-header-link-text-align, left); } .theme-editor-preview-footer-link { background: var(--theme-footer-link-bg, transparent); color: var(--theme-footer-link-text, var(--theme-link-text, var(--theme-color-link))); border-color: var(--theme-footer-link-border, transparent); border-radius: var(--theme-footer-link-radius, 0); padding: var(--theme-footer-link-padding-y, 0) var(--theme-footer-link-padding-x, 0); box-shadow: var(--theme-footer-link-shadow, none); font-family: var(--theme-footer-link-font-family, inherit); font-size: var(--theme-footer-link-font-size, inherit); font-weight: var(--theme-footer-link-font-weight, inherit); line-height: var(--theme-footer-link-line-height, inherit); letter-spacing: var(--theme-footer-link-letter-spacing, inherit); text-decoration: var(--theme-footer-link-text-decoration, none); margin: var(--theme-footer-link-margin, 0); text-align: var(--theme-footer-link-text-align, left); } .theme-editor-preview-footer-heading h3 { margin: var(--theme-footer-heading-margin, 0 0 0.75rem 0); color: var(--theme-footer-heading-color, var(--theme-footer-text, inherit)); background: var(--theme-footer-heading-bg, transparent); border: 1px solid var(--theme-footer-heading-border, transparent); font-family: var(--theme-footer-heading-font-family, 'Bodoni 16', Georgia, serif); font-size: var(--theme-footer-heading-font-size, 1rem); font-weight: var(--theme-footer-heading-font-weight, 400); line-height: var(--theme-footer-heading-line-height, 1.2); letter-spacing: var(--theme-footer-heading-letter-spacing, 0); width: var(--theme-footer-heading-width, auto); min-width: var(--theme-footer-heading-min-width, 0); max-width: var(--theme-footer-heading-max-width, none); height: var(--theme-footer-heading-height, auto); min-height: var(--theme-footer-heading-min-height, 0); max-height: var(--theme-footer-heading-max-height, none); text-align: var(--theme-footer-heading-text-align, var(--theme-footer-text-align, left)); } .theme-editor-color-editor-controls .settings-field { width: auto; min-width: 0; flex: 0 0 auto; display: inline-flex; flex-direction: column; } .theme-editor-color-editor-controls .settings-field-wide { grid-column: auto; } .theme-editor-color-editor-row .settings-field { margin-bottom: 0; align-self: start; } .theme-editor-color-editor-row .settings-field span { font-size: 0.8rem; color: var(--gms-green-gray); line-height: 1.1; } .theme-editor-color-editor-row .settings-field input[type='text'] { padding-top: 0.55rem; padding-bottom: 0.55rem; } .theme-editor-color-editor-row .button-secondary { margin-top: 1.4rem; } .theme-editor-glyph-preview-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem; border-radius: 1rem; border: 1px solid rgba(var(--gms-shadow-rgb), 0.10); background: rgba(var(--gms-white-rgb), 0.82); } .admin-table-actions .gms, .admin-icon-button .gms { font-size: calc(0.95rem + 2pt); line-height: 1; } .admin-table-actions-bare .gms { font-size: calc(0.95rem + 5pt); line-height: 1; } .block-editor-grid .settings-field-checkbox { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.55rem; } .block-editor-grid .settings-field-checkbox span { order: 1; } .block-editor-grid .settings-field-checkbox input[type="checkbox"] { order: 0; margin-top: 0; } .page-block-rich-field.is-active .page-block-rich-preview { display: none; border-color: rgba(var(--gms-mane-top-rgb), 0.35); box-shadow: 0 0 0 3px rgba(var(--gms-mane-top-rgb), 0.08); } .page-block-rich-field.is-active .page-block-rich-host { display: block; } .auth-shell { max-width: 42rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; } .auth-panel { margin: 0 auto; padding: 1.5rem; background: rgba(var(--gms-white-rgb), 0.96); border: 1px solid rgba(var(--gms-shadow-rgb), 0.75); width: calc(100vw - 30px); max-width: 700px; border-radius: 10px; box-sizing: border-box; } .auth-copy { margin: 0 0 1.25rem; max-width: 52ch; } .auth-form { display: grid; gap: 1rem; } .password-toggle-field { position: relative; } .password-toggle-field input { padding-right: 3rem; } .password-toggle-button { position: absolute; top: 50%; right: 0.45rem; transform: translateY(-50%); border: 0; background: transparent; color: var(--gms-green-gray); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .password-toggle-button .gms { font-size: 1rem; } @media (max-width: 700px) { .site-header { display: block; } .site-header-blocks { display: grid; grid-template-columns: 1fr; padding-right: 3.25rem; } .footer-grid { grid-template-columns: 1fr; justify-items: stretch; } .footer-block { max-width: none; } .page-theme-blocks { grid-template-columns: 1fr; justify-items: stretch; } .page-theme-block { max-width: none; } .nav-toggle { margin: 0; } .admin-panel-header { flex-direction: column; } } @media (min-width: 700px) { .content-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .content-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1500px) { .content-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .shell > main:not(.admin-shell):not(.admin-layout-main), .site-main, .content-main { background: var(--theme-main-bg, transparent); color: var(--theme-main-text, inherit); border: 1px solid var(--theme-main-border, transparent); border-radius: var(--theme-main-radius, 0); padding: var(--theme-main-padding, 0); box-shadow: var(--theme-main-shadow, none); margin: var(--theme-main-margin, 0); width: var(--theme-main-width, auto); min-width: var(--theme-main-min-width, 0); max-width: var(--theme-main-max-width, none); height: var(--theme-main-height, auto); min-height: var(--theme-main-min-height, 0); max-height: var(--theme-main-max-height, none); text-align: var(--theme-main-text-align, left); } main article, .site-article, .content-article { background: var(--theme-article-bg, transparent); color: var(--theme-article-text, inherit); border: 1px solid var(--theme-article-border, transparent); border-radius: var(--theme-article-radius, 0); padding: var(--theme-article-padding, 0); box-shadow: var(--theme-article-shadow, none); margin: var(--theme-article-margin, 0); width: var(--theme-article-width, auto); min-width: var(--theme-article-min-width, 0); max-width: var(--theme-article-max-width, none); height: var(--theme-article-height, auto); min-height: var(--theme-article-min-height, 0); max-height: var(--theme-article-max-height, none); text-align: var(--theme-article-text-align, left); } /* ============================================= Public site launch refinement ============================================= */ .route-public .site-header { border-width: 0 0 1px; } .route-public .site-header-blocks { width: min(1180px, calc(100% - 2.5rem)); margin-left: auto; margin-right: auto; } .route-public .shell > main { padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .route-public .content-header { margin-bottom: clamp(1.75rem, 4vw, 3rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--theme-color-border); } .route-public .content-title { width: 100%; max-width: 100%; font-size: clamp(2.35rem, 4vw, 3.85rem); } .route-public .content-section-list { gap: 0; } .route-public .content-block { border-width: 0 0 1px; } .route-public .content-block:last-child { border-bottom: 0; } .route-public .content-rich p, .route-public .content-rich ul, .route-public .content-rich ol { max-width: 74ch; } .route-public .content-rich li + li { margin-top: 0.55rem; } .route-public blockquote { position: relative; max-width: 52rem; margin: 0 0 1.75rem; padding: 0.2rem 0 0.2rem 1.5rem; border-left: 3px solid var(--theme-color-accent); font-family: 'Bodoni 16', Georgia, serif; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.45; } .route-public blockquote::before, .route-public blockquote::after { content: none; } .route-public .content-eyebrow { margin: 0 0 0.65rem; color: var(--theme-color-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; } .route-public .content-button-primary, .route-public .content-button-secondary, .route-public .content-button-tertiary { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } .route-public .content-button-primary:hover, .route-public .content-button-secondary:hover, .route-public .content-button-tertiary:hover { transform: translateY(-1px); } .route-public .page-child-card, .route-public .content-card { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .route-public .page-child-card.content-nav-card:hover, .route-public .page-child-card.content-nav-card:focus-visible, .route-public .content-card.content-nav-card:hover, .route-public .content-card.content-nav-card:focus-within { transform: translateY(-2px); } .route-public .site-footer { border-width: 1px 0 0; } .route-public .footer-grid, .route-public .footer-links, .route-public .footer-copyright { width: min(1180px, calc(100% - 2.5rem)); max-width: 1180px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .route-public.page-slug-contact .content-form-section { width: min(600px, 100%) !important; max-width: 100% !important; } @media (max-width: 700px) { .route-public .site-header-blocks { width: calc(100% - 2rem); } .route-public .shell > main { padding-left: 1rem; padding-right: 1rem; } .route-public .content-header { margin-bottom: 1.5rem; } .route-public .content-title { max-width: none; } .route-public .footer-grid, .route-public .footer-links, .route-public .footer-copyright { width: calc(100% - 2rem); } .route-public .content-rich img[style*='float'] { float: none !important; display: block; margin: 0 auto 1.25rem !important; } } /* ============================================= Public module normalization ============================================= */ .route-public .public-page-shell { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; } .route-public .public-page-frame { width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(1.35rem, 4vw, 3.5rem); background: var(--theme-article-bg, var(--theme-color-surface)); color: var(--theme-article-text, var(--theme-color-text)); border: 1px solid var(--theme-article-border, var(--theme-color-border)); border-radius: var(--theme-article-radius, 4px); box-shadow: var(--theme-article-shadow, 0 18px 50px rgba(var(--gms-shadow-rgb), 0.08)); box-sizing: border-box; } .route-public .public-page-header, .route-public .content-header { margin: 0 0 clamp(1.75rem, 4vw, 3rem); padding: 0 0 clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--theme-color-border); } .route-public .public-page-header .content-copy, .route-public .content-header .content-copy, .route-public .content-header .auth-copy { max-width: 70ch; margin-bottom: 0; } .route-public .content-kicker, .route-public .page-kicker, .route-public .admin-kicker { margin: 0 0 0.65rem; color: var(--theme-color-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; } .route-public .content-title { letter-spacing: var(--theme-h1-letter-spacing, -0.015em); } .route-public .content-card-title { letter-spacing: var(--theme-h2-letter-spacing, -0.01em); } .route-public .public-card-grid { gap: clamp(1rem, 2.5vw, 1.5rem); } .route-public .content-card { margin: 0; border-radius: var(--theme-content-card-radius, 3px); } .route-public .content-card-compact { gap: 0.85rem; padding: var(--theme-content-card-padding); } /* A link inside a heading must wear the HEADING's type, not the link type. The bare `a` rule near the top of this file applies --theme-link-font-size / -font-family / -font-weight to every link on the site, and those tokens carry real values from the theme payload - so a linked heading silently rendered at body size in the body font. Most visible on blog cards, where the post title sat at 16px next to a 34px heading style that never got to apply. font: inherit is deliberate here; do not narrow it to color alone. */ .route-public .content-card-title a, .route-public .content-title a, .route-public .content-section-title a { color: inherit; text-decoration: none; font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; letter-spacing: inherit; } .route-public .content-card-title a:hover, .route-public .content-card-title a:focus-visible { color: var(--theme-link-hover-text, var(--theme-color-link_hover)); text-decoration: underline; } .route-public .content-meta { gap: 0.45rem 0.9rem; margin: 0 0 1rem; color: var(--theme-color-muted); font-size: 0.88rem; line-height: 1.5; } .route-public .content-meta span + span::before { content: '/'; margin-right: 0.9rem; color: var(--theme-color-border); } .route-public .content-chip-row { gap: 0.5rem; margin-top: 1rem; } .route-public .content-chip, .route-public .content-pill { border-radius: var(--theme-meta-pill-radius, 3px); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.035em; } .route-public a.content-chip { display: inline-flex; align-items: center; box-sizing: border-box; padding: 0.45rem 0.8rem; margin: 0; border: 1px solid transparent; border-radius: var(--theme-meta-pill-radius, 3px); font-family: inherit; font-size: 0.82rem; font-weight: 600; font-style: normal; line-height: 1.4; letter-spacing: 0.035em; text-align: left; text-decoration: none; text-transform: none; } .route-public a.content-chip:hover, .route-public a.content-chip:focus-visible { display: inline-flex; align-items: center; box-sizing: border-box; padding: 0.45rem 0.8rem; margin: 0; background: var(--theme-color-surface-alt, var(--theme-color-surface_alt)); color: var(--theme-color-link-hover, var(--theme-color-link_hover)); border: 1px solid var(--theme-color-accent); border-radius: var(--theme-meta-pill-radius, 3px); box-shadow: none; font-family: inherit; font-size: 0.82rem; font-weight: 600; font-style: normal; line-height: 1.4; letter-spacing: 0.035em; text-align: left; text-decoration: none; text-transform: none; } .route-public .content-chip-primary.is-active, .route-public .content-chip-accent.is-active { background: var(--theme-color-accent); border-color: var(--theme-color-accent); color: var(--theme-color-button_text); } .route-public .content-media-figure, .route-public .content-cover { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); } .route-public .content-media-figure img, .route-public .content-media-image, .route-public .cover-image { border-radius: 3px; } .route-blog .content-card .content-media-image { aspect-ratio: 16 / 9; object-fit: cover; } .route-blog .public-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .route-blog .public-card-grid .content-card { min-width: 0; } .route-blog .blog-post-frame > .content-rich { max-width: 76ch; } .route-blog .blog-post-frame .content-cover { max-width: 900px; } .route-public .content-lead { max-width: 70ch; color: var(--theme-color-text); font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.75; } .route-public .content-split-layout { gap: clamp(1rem, 3vw, 2rem); } .route-public .content-card-sticky { position: sticky; top: 1.25rem; } .route-public .admin-panel, .route-public .auth-panel { background: var(--theme-content-card-bg, var(--theme-color-surface)); color: var(--theme-content-card-text, var(--theme-color-text)); border: 1px solid var(--theme-content-card-border, var(--theme-color-border)); border-radius: var(--theme-content-card-radius, 3px); box-shadow: none; } .route-public .auth-shell { max-width: 760px; padding-top: 0; padding-bottom: 0; } .route-public .auth-panel { width: 100%; max-width: 760px; padding: clamp(1.35rem, 4vw, 3rem); } .route-account .auth-shell { max-width: 1120px; } .route-account .auth-panel { max-width: 1120px; } .route-public .settings-grid, .route-public .account-password { min-height: 0; background: var(--theme-color-background); border: 1px solid var(--theme-color-border); border-radius: 3px; cursor: default; } .route-public .settings-field input, .route-public .settings-field select, .route-public .settings-field textarea, .route-public .admin-form input, .route-public .admin-form select, .route-public .admin-form textarea { border: 1px solid var(--theme-color-border); border-radius: 3px; background: var(--theme-color-surface); color: var(--theme-color-text); box-shadow: none; } .route-public .settings-field input:focus, .route-public .settings-field select:focus, .route-public .settings-field textarea:focus, .route-public .admin-form input:focus, .route-public .admin-form select:focus, .route-public .admin-form textarea:focus { outline: 2px solid var(--theme-color-accent-soft); outline-offset: 1px; border-color: var(--theme-color-accent); } .route-public .settings-submit button, .route-public .admin-actions button, .route-public .button-link { display: inline-flex; align-items: center; justify-content: center; padding: var(--theme-action-button-padding-y) var(--theme-action-button-padding-x); background: var(--theme-action-button-bg); color: var(--theme-action-button-text); border: 1px solid var(--theme-action-button-border); border-radius: var(--theme-action-button-radius, 3px); box-shadow: var(--theme-action-button-shadow); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .route-public .settings-submit button:hover, .route-public .settings-submit button:focus-visible, .route-public .admin-actions button:hover, .route-public .admin-actions button:focus-visible { background: var(--theme-action-button-hover-bg); color: var(--theme-action-button-hover-text); border-color: var(--theme-action-button-hover-border); box-shadow: var(--theme-action-button-hover-shadow); } .route-public .auth-secondary-button { padding: var(--theme-action-button-secondary-padding-y) var(--theme-action-button-secondary-padding-x); background: var(--theme-action-button-secondary-bg); color: var(--theme-action-button-secondary-text); border: 1px solid var(--theme-action-button-secondary-border); border-radius: var(--theme-action-button-secondary-radius, 3px); box-shadow: var(--theme-action-button-secondary-shadow); font: inherit; font-weight: 600; cursor: pointer; } .route-public .auth-secondary-button:hover, .route-public .auth-secondary-button:focus-visible { background: var(--theme-action-button-secondary-hover-bg); color: var(--theme-action-button-secondary-hover-text); border-color: var(--theme-action-button-secondary-hover-border); box-shadow: var(--theme-action-button-secondary-hover-shadow); } .route-public .button-link { background: var(--theme-action-button-bg); border-color: var(--theme-action-button-border); color: var(--theme-action-button-text); } .route-public .button-link:hover, .route-public .button-link:focus-visible { background: var(--theme-action-button-hover-bg); border-color: var(--theme-action-button-hover-border); color: var(--theme-action-button-hover-text); } .route-public .admin-alert { border: 1px solid var(--theme-color-border); border-radius: 3px; background: var(--theme-color-accent-soft); color: var(--theme-color-text); } .route-public .admin-alert-error { border-color: rgba(var(--gms-mane-top-rgb), 0.35); background: rgba(var(--gms-mane-top-rgb), 0.1); color: inherit; } .route-public .error-shell { min-height: 45vh; place-items: stretch; } .route-public .error-card { max-width: 860px; } .route-public .error-code { color: var(--theme-color-muted); } @media (max-width: 900px) { .route-public .content-card-sticky { position: static; } .route-blog .public-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .route-public .public-page-shell { padding-left: 1rem; padding-right: 1rem; } .route-public .public-page-frame, .route-public .auth-panel { padding: 1.25rem; } .route-public .content-meta span + span::before { content: none; } .route-public .content-meta span { width: 100%; } .route-blog .public-card-grid { grid-template-columns: 1fr; } } .admin-filter-bar .settings-grid { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } .admin-filter-bar .settings-field { flex-direction: row; align-items: center; gap: 0.5rem; margin-bottom: 0; } .admin-filter-bar .settings-field span { white-space: nowrap; font-size: 0.82rem; color: var(--gms-green-gray); flex-shrink: 0; } .admin-filter-bar .settings-field input, .admin-filter-bar .settings-field select { flex: 1; min-width: 0; } .admin-layout-main-leads .admin-panel, .admin-layout-main-leads .admin-list-panel, .admin-layout-main-leads .admin-editor-panel { padding: 1.25rem; border: 1px solid rgba(var(--gms-shadow-rgb), 0.08); border-radius: 8px; box-sizing: border-box; } .admin-layout-main-leads .admin-panel-header, .admin-layout-main-leads .admin-list-header, .admin-layout-main-leads .admin-editor-header { align-items: center; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(var(--gms-shadow-rgb), 0.08); } .admin-layout-main-leads .admin-copy { max-width: 82ch; } .admin-layout-main-leads .settings-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.7rem; } .admin-layout-main-leads .settings-field { min-width: 0; margin-bottom: 0; } .admin-layout-main-leads .settings-field-checkbox { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.55rem; min-height: 2.4rem; padding: 0.45rem 0; } .admin-layout-main-leads .settings-field-checkbox input[type="checkbox"] { order: 0; flex: 0 0 auto; width: 1rem; min-width: 1rem; height: 1rem; margin: 0; } .admin-layout-main-leads .settings-field-checkbox span { order: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; } .admin-layout-main-leads .settings-field input, .admin-layout-main-leads .settings-field select, .admin-layout-main-leads .settings-field textarea { width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .admin-layout-main-leads .settings-field textarea { resize: vertical; } .admin-layout-main-leads .button, .admin-layout-main-leads .button-secondary { min-height: 2.4rem; white-space: normal; text-align: center; } .admin-layout-main-leads .admin-filter-bar .settings-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .admin-layout-main-leads .admin-filter-bar .settings-field { display: grid; grid-template-columns: auto minmax(0, 1fr); } @container (max-width: 860px) { .admin-layout-main-leads .admin-two-col, .admin-layout-main-leads .admin-three-col { grid-template-columns: 1fr; } .admin-layout-main-leads .admin-panel-header, .admin-layout-main-leads .admin-list-header, .admin-layout-main-leads .admin-editor-header { align-items: stretch; } } @container (max-width: 620px) { .admin-layout-main-leads .admin-panel-actions, .admin-layout-main-leads .admin-filter-actions, .admin-layout-main-leads .leads-row-actions { display: grid; grid-template-columns: 1fr; justify-content: stretch; } .admin-layout-main-leads .admin-filter-bar .settings-field { grid-template-columns: 1fr; } } /* ============================================= Homepage concept 02 refinement ============================================= */ .route-public.page-slug-index .shell > main { position: relative; padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(3rem, 7vw, 5.5rem); background: linear-gradient(90deg, rgba(var(--gms-shadow-rgb), 0.045) 1px, transparent 1px), linear-gradient(180deg, rgba(var(--gms-shadow-rgb), 0.04) 1px, transparent 1px), linear-gradient(180deg, var(--gms-mint-1) 0%, var(--gms-mint-2) 56%, var(--gms-mint-2) 100%); background-size: 56px 56px, 56px 56px, auto; } .route-public.page-slug-index .content-article-home { width: min(1340px, 100%); max-width: 1340px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4.5rem); background: transparent; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; } .route-public.page-slug-index .content-header-home { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .route-public.page-slug-index .content-header-home::after { content: none; } .route-public.page-slug-index .content-section-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.65rem); } .route-public.page-slug-index .content-section-list > .content-block { position: relative; z-index: 1; margin: 0; box-sizing: border-box; } .route-public.page-slug-index .homepage-hero-section { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1.14fr); align-items: stretch; min-height: clamp(30rem, 55vw, 41rem); padding: 0; overflow: hidden; background: rgba(var(--gms-white-rgb), 0.9); border: 1px solid rgba(var(--gms-shadow-rgb), 0.14); border-radius: 2px; box-shadow: 0 22px 55px rgba(var(--gms-shadow-rgb), 0.08); } .route-public.page-slug-index .homepage-hero-section::before, .route-public.page-slug-index .homepage-hero-section::after { content: ""; position: absolute; z-index: 3; width: 18px; height: 18px; pointer-events: none; } .route-public.page-slug-index .homepage-hero-section::before { top: 16px; left: 16px; border-top: 1.5px solid rgba(var(--gms-shadow-rgb), 0.4); border-left: 1.5px solid rgba(var(--gms-shadow-rgb), 0.4); } .route-public.page-slug-index .homepage-hero-section::after { right: 16px; bottom: 16px; border-right: 1.5px solid rgba(var(--gms-shadow-rgb), 0.4); border-bottom: 1.5px solid rgba(var(--gms-shadow-rgb), 0.4); } .route-public.page-slug-index .homepage-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: none; margin: 0; padding: clamp(2.2rem, 5vw, 4.4rem) clamp(1.5rem, 4vw, 3.75rem); background: linear-gradient(90deg, rgba(var(--gms-body-rgb), 0.98) 0%, rgba(var(--gms-body-rgb), 0.92) 74%, rgba(var(--gms-body-rgb), 0) 100%), linear-gradient(180deg, rgba(var(--gms-shadow-rgb), 0.05) 1px, transparent 1px); background-size: auto, 100% 44px; } .route-public.page-slug-index .homepage-hero-copy::after { content: ""; display: block; width: min(190px, 42%); height: 1px; margin-top: clamp(1.35rem, 3vw, 2.2rem); background: var(--gms-gold); box-shadow: 28px 0 0 rgba(var(--gms-gold-rgb), 0.38); } .route-public.page-slug-index .homepage-hero-copy .content-eyebrow { margin-bottom: clamp(0.85rem, 2vw, 1.35rem); color: var(--gms-green-gray); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; } .route-public.page-slug-index .homepage-hero-copy h2 { max-width: 12.5ch; margin: 0; color: var(--gms-mane-3); font-family: 'Bodoni 16', Georgia, serif; font-size: clamp(3rem, 7.6vw, 6.7rem); font-weight: 400; line-height: 0.92; letter-spacing: 0; } .route-public.page-slug-index .homepage-hero-copy p:not(.content-eyebrow) { max-width: 34rem; margin-top: clamp(1rem, 2vw, 1.45rem); color: var(--gms-mane-2); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.72; } .route-public.page-slug-index .homepage-hero-visual { position: relative; min-width: 0; min-height: 100%; margin: 0; overflow: hidden; background: var(--gms-sage-2); } .route-public.page-slug-index .homepage-hero-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(var(--gms-body-rgb), 0.34) 0%, rgba(var(--gms-body-rgb), 0) 28%), linear-gradient(180deg, rgba(var(--gms-shadow-rgb), 0.08), rgba(var(--gms-shadow-rgb), 0)); pointer-events: none; } .route-public.page-slug-index .homepage-hero-visual::after { content: ""; position: absolute; right: clamp(1.15rem, 2.5vw, 2.3rem); bottom: clamp(1.1rem, 2.5vw, 2rem); z-index: 2; width: 46px; height: 5px; background: var(--gms-gold); box-shadow: 10px -12px 0 -1px var(--gms-gold), 20px 0 0 rgba(var(--gms-gold-rgb), 0.45); pointer-events: none; } .route-public.page-slug-index .homepage-hero-visual picture, .route-public.page-slug-index .homepage-hero-visual img { display: block; width: 100%; height: 100%; } .route-public.page-slug-index .homepage-hero-visual img { object-fit: cover; object-position: 70% 50%; } .route-public.page-slug-index .content-block-key-services_overview, .route-public.page-slug-index .content-block-key-seo_strategy { min-height: 100%; padding: clamp(1.45rem, 3vw, 2.45rem); background: rgba(var(--gms-white-rgb), 0.86); border: 1px solid rgba(var(--gms-shadow-rgb), 0.14); border-radius: 2px; box-shadow: 0 16px 36px rgba(var(--gms-shadow-rgb), 0.06); } .route-public.page-slug-index .content-block-key-services_overview::before, .route-public.page-slug-index .content-block-key-seo_strategy::before { content: ""; position: absolute; top: 12px; right: 12px; width: 13px; height: 13px; border-top: 1.5px solid rgba(var(--gms-shadow-rgb), 0.3); border-right: 1.5px solid rgba(var(--gms-shadow-rgb), 0.3); } .route-public.page-slug-index .content-block-key-services_overview .content-section-title, .route-public.page-slug-index .content-block-key-seo_strategy .content-section-title { max-width: 15ch; margin-bottom: 1rem; color: var(--gms-mane-3); font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.05; } .route-public.page-slug-index .content-block-key-services_overview .content-rich, .route-public.page-slug-index .content-block-key-seo_strategy .content-rich { margin: 0; } .route-public.page-slug-index .content-block-key-services_overview .content-rich p, .route-public.page-slug-index .content-block-key-seo_strategy .content-rich p { color: var(--gms-green-gray); font-size: 0.98rem; line-height: 1.62; } .route-public.page-slug-index .content-block-key-services_overview ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .route-public.page-slug-index .content-block-key-services_overview li { position: relative; margin: 0; padding: 0.85rem 0.9rem 0.85rem 1rem; background: rgba(var(--gms-body-rgb), 0.54); border: 1px solid rgba(var(--gms-shadow-rgb), 0.13); border-radius: 2px; color: var(--gms-mane-2); } .route-public.page-slug-index .content-block-key-services_overview li::before { content: ""; position: absolute; top: 0.9rem; right: 0.85rem; width: 6px; height: 6px; background: var(--gms-gold); transform: rotate(45deg); } .route-public.page-slug-index .content-block-key-services_overview .b, .route-public.page-slug-index .content-block-key-seo_strategy .b { color: var(--gms-mane-3); font-weight: 700; } .route-public.page-slug-index .content-block-key-cta_contact { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; padding: clamp(1.4rem, 3vw, 2.35rem) clamp(1.45rem, 4vw, 3.4rem); background: linear-gradient(90deg, rgba(var(--gms-shadow-rgb), 0.08) 1px, transparent 1px), linear-gradient(180deg, rgba(var(--gms-shadow-rgb), 0.055) 1px, transparent 1px), var(--gms-sage-4); background-size: 40px 40px, 40px 40px, auto; border: 1px solid rgba(var(--gms-shadow-rgb), 0.16); border-left: 5px solid var(--gms-gold); border-radius: 2px; box-shadow: 0 18px 45px rgba(var(--gms-shadow-rgb), 0.07); } .route-public.page-slug-index .content-block-key-cta_contact .content-section-title { margin: 0; color: var(--gms-mane-3); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.05; } .route-public.page-slug-index .content-block-key-cta_contact .content-rich { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2rem); align-items: center; margin: 0; } .route-public.page-slug-index .content-block-key-cta_contact .content-rich p { margin: 0; color: var(--gms-mane-2); line-height: 1.62; } .route-public.page-slug-index .content-block-key-cta_contact .content-button-primary { background: var(--gms-mane-3); color: var(--gms-mint-2); border-color: var(--gms-mane-3); border-radius: 2px; box-shadow: none; } .route-public.page-slug-index .content-block-key-cta_contact .content-button-primary:hover, .route-public.page-slug-index .content-block-key-cta_contact .content-button-primary:focus-visible { background: var(--gms-gold); border-color: var(--gms-gold); color: var(--gms-mane-3); } @media (max-width: 960px) { .route-public.page-slug-index .content-section-list { grid-template-columns: 1fr; } .route-public.page-slug-index .homepage-hero-section, .route-public.page-slug-index .content-block-key-cta_contact { grid-template-columns: 1fr; } .route-public.page-slug-index .homepage-hero-visual { min-height: clamp(18rem, 58vw, 30rem); } .route-public.page-slug-index .homepage-hero-copy { background: rgba(var(--gms-body-rgb), 0.96); } .route-public.page-slug-index .content-block-key-cta_contact .content-rich { grid-template-columns: 1fr; } } @media (max-width: 700px) { .route-public.page-slug-index .shell > main { padding-top: 0.75rem; } .route-public.page-slug-index .content-article-home { padding: 0 1rem; } .route-public.page-slug-index .homepage-hero-section { min-height: 0; } .route-public.page-slug-index .homepage-hero-copy { padding: clamp(2rem, 8vw, 3.2rem) 1.25rem; } .route-public.page-slug-index .homepage-hero-copy h2 { font-size: clamp(2.75rem, 13vw, 4.45rem); } .route-public.page-slug-index .homepage-hero-copy p:not(.content-eyebrow) { font-size: 1rem; } .route-public.page-slug-index .homepage-hero-visual { min-height: clamp(19rem, 82vw, 29rem); } .route-public.page-slug-index .homepage-hero-visual img { object-position: 50% 42%; } .route-public.page-slug-index .content-block-key-services_overview, .route-public.page-slug-index .content-block-key-seo_strategy, .route-public.page-slug-index .content-block-key-cta_contact { padding: 1.25rem; } .route-public.page-slug-index .content-block-key-services_overview ul { grid-template-columns: 1fr; } } /* ============================================= Homepage concept 02 sample alignment ============================================= */ .route-public.page-slug-index .shell > main { padding: clamp(0.9rem, 2vw, 1.5rem) 0 0; background: linear-gradient(rgba(var(--gms-shadow-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--gms-shadow-rgb), 0.05) 1px, transparent 1px), var(--gms-mint-1); background-size: 56px 56px, 56px 56px, auto; } .route-public.page-slug-index .content-article-home { width: min(1340px, 100%); max-width: 1340px; padding: 0 clamp(1.25rem, 5vw, 4.5rem); } .route-public.page-slug-index .content-section-list { gap: 0; } .route-public.page-slug-index .homepage-hero-section { position: relative; display: block; min-height: clamp(460px, 54vw, 620px); margin: 0; padding: 0; overflow: hidden; background: var(--gms-sage-4); border: 1px solid rgba(var(--gms-shadow-rgb), 0.12); border-radius: 2px; box-shadow: none; } .route-public.page-slug-index .homepage-hero-copy { position: absolute; inset: 0 auto 0 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: min(720px, 62%); max-width: 720px; padding: 0 clamp(1.6rem, 4.2vw, 3.75rem) clamp(1.6rem, 4.2vw, 3.75rem); background: transparent; } .route-public.page-slug-index .homepage-hero-copy::before { content: ""; position: absolute; inset: 0 -18vw 0 0; z-index: -1; background: linear-gradient(95deg, rgba(var(--gms-body-rgb), 0.98) 0%, rgba(var(--gms-body-rgb), 0.9) 35%, rgba(var(--gms-body-rgb), 0.48) 60%, rgba(var(--gms-body-rgb), 0) 100%); } .route-public.page-slug-index .homepage-hero-copy::after { width: clamp(70px, 15vw, 190px); margin-top: clamp(1.4rem, 3vw, 2.25rem); background: var(--gms-gold); box-shadow: -22px 0 0 -18px var(--gms-gold), 14px 0 0 rgba(var(--gms-gold-rgb), 0.42); } .route-public.page-slug-index .homepage-hero-copy .content-eyebrow { margin: 0 0 clamp(0.85rem, 2vw, 1.25rem); color: var(--gms-green-gray); font-family: 'Poppins', Arial, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .route-public.page-slug-index .homepage-hero-copy h2 { max-width: 8.8ch; color: var(--gms-mane-3); font-size: clamp(3.45rem, 7.1vw, 6.85rem); font-weight: 400; line-height: 0.92; letter-spacing: 0; } .route-public.page-slug-index .homepage-hero-copy p:not(.content-eyebrow) { max-width: 28rem; margin-top: clamp(1rem, 2vw, 1.45rem); color: var(--gms-mane-3); font-family: 'Poppins', Arial, sans-serif; font-size: clamp(0.98rem, 1.3vw, 1.08rem); line-height: 1.7; } .route-public.page-slug-index .homepage-hero-copy h2 + p + p { display: none; } .route-public.page-slug-index .homepage-hero-visual { position: absolute; inset: 0; min-height: 0; background: var(--gms-sage-4); } .route-public.page-slug-index .homepage-hero-visual::before { background: linear-gradient(180deg, rgba(var(--gms-shadow-rgb), 0.08), rgba(var(--gms-shadow-rgb), 0)); } .route-public.page-slug-index .homepage-hero-visual img { object-fit: cover; object-position: 72% 50%; } .route-public.page-slug-index .homepage-hero-section::before, .route-public.page-slug-index .homepage-hero-section::after { width: 18px; height: 18px; } .route-public.page-slug-index .content-block-key-services_overview { grid-column: 1 / -1; margin: clamp(0.65rem, 1.5vw, 1.1rem) 0 0; padding: clamp(1.25rem, 2.6vw, 1.9rem) clamp(1.5rem, 3.4vw, 3.25rem); background: var(--gms-sage-4); border: 1px solid rgba(var(--gms-shadow-rgb), 0.14); border-radius: 2px; box-shadow: none; } .route-public.page-slug-index .content-block-key-services_overview::before { content: none; } .route-public.page-slug-index .content-block-key-services_overview .content-section-title { margin: 0 0 0.85rem; max-width: none; font-family: 'Poppins', Arial, sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; line-height: 1.35; text-transform: uppercase; color: var(--gms-green-gray); } .route-public.page-slug-index .content-block-key-services_overview .content-rich > p { max-width: 68ch; margin: 0 0 1.25rem; color: var(--gms-mane-3); } .route-public.page-slug-index .content-block-key-services_overview ul { counter-reset: homepage-feature; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.1rem, 2.4vw, 2.2rem); margin: 0; } .route-public.page-slug-index .content-block-key-services_overview li { counter-increment: homepage-feature; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; padding: 0; background: transparent; border: 0; color: var(--gms-mane-3); } .route-public.page-slug-index .content-block-key-services_overview li::before { content: counter(homepage-feature, decimal-leading-zero); position: static; width: auto; height: auto; padding: 0.45rem 0.55rem; background: transparent; border: 1px solid rgba(var(--gms-shadow-rgb), 0.32); transform: none; font-family: 'Poppins', Arial, sans-serif; font-size: 0.78rem; font-weight: 600; line-height: 1; } .route-public.page-slug-index .content-block-key-services_overview li .b { display: block; font-family: 'Bodoni 16', Georgia, serif; font-size: clamp(1.05rem, 1.7vw, 1.28rem); font-weight: 400; line-height: 1.18; } .route-public.page-slug-index .content-block-key-services_overview li br { display: none; } .route-public.page-slug-index .content-block-key-services_overview li { font-family: 'Poppins', Arial, sans-serif; font-size: 0.78rem; line-height: 1.45; color: var(--gms-green-gray); } .route-public.page-slug-index .content-block-key-seo_strategy { grid-column: 1 / -1; margin: clamp(1.75rem, 4vw, 3.4rem) 0 0; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--gms-mint-2); border: 1px solid rgba(var(--gms-shadow-rgb), 0.14); border-radius: 2px; box-shadow: none; } .route-public.page-slug-index .content-block-key-seo_strategy::before, .route-public.page-slug-index .content-block-key-seo_strategy::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; } .route-public.page-slug-index .content-block-key-seo_strategy::before { top: 12px; right: 12px; border-top: 1.5px solid rgba(var(--gms-shadow-rgb), 0.3); border-right: 1.5px solid rgba(var(--gms-shadow-rgb), 0.3); } .route-public.page-slug-index .content-block-key-seo_strategy::after { left: 12px; bottom: 12px; border-left: 1.5px solid rgba(var(--gms-shadow-rgb), 0.3); border-bottom: 1.5px solid rgba(var(--gms-shadow-rgb), 0.3); } .route-public.page-slug-index .content-block-key-seo_strategy .content-section-title { max-width: none; font-size: clamp(2rem, 3vw, 2.7rem); } .route-public.page-slug-index .content-block-key-seo_strategy .content-rich { columns: 2 22rem; column-gap: clamp(1.5rem, 4vw, 3rem); } .route-public.page-slug-index .content-block-key-seo_strategy .content-rich p { break-inside: avoid; } .route-public.page-slug-index .content-block-key-cta_contact { margin: clamp(1.75rem, 4vw, 3.5rem) 0 0; padding: clamp(1.35rem, 3vw, 2.15rem) 0 0; background: transparent; border: 0; border-top: 1px solid rgba(var(--gms-shadow-rgb), 0.18); box-shadow: none; } .route-public.page-slug-index .content-block-key-cta_contact .content-section-title { font-size: clamp(1.85rem, 3vw, 2.45rem); } .route-public.page-slug-index .content-block-key-cta_contact .content-button-primary { padding: 0.85rem 1.4rem; background: transparent; color: var(--gms-mane-3); border: 1px solid var(--gms-gold); border-radius: 2px; font-family: 'Poppins', Arial, sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .route-public.page-slug-index .content-block-key-cta_contact .content-button-primary:hover, .route-public.page-slug-index .content-block-key-cta_contact .content-button-primary:focus-visible { background: var(--gms-mane-3); border-color: var(--gms-mane-3); color: var(--gms-mint-1); } .route-public .site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 clamp(1rem, 3vw, 2rem); width: min(1340px, 100%); max-width: 1340px; margin: clamp(1.4rem, 3vw, 2.15rem) auto 0; padding: 0 clamp(1.25rem, 5vw, 4.5rem) clamp(2.65rem, 6vw, 4.5rem); background: transparent; border: 0; box-shadow: none; } .route-public .footer-social-links { grid-column: 1 / -1; margin: 0; padding: 0; } .route-public .footer-social-links::after { content: ""; display: block; height: 1px; margin: clamp(1.25rem, 3vw, 1.9rem) 0; background: rgba(var(--gms-shadow-rgb), 0.16); } .route-public .footer-social-links .footer-links-list { gap: 0.75rem; } .route-public .footer-social-links a { width: 38px; height: 38px; border: 1px solid rgba(var(--gms-shadow-rgb), 0.22); border-radius: 50%; color: var(--gms-mane-3); font-size: 1rem; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .route-public .footer-social-links a:hover, .route-public .footer-social-links a:focus-visible { background: var(--gms-mane-3); border-color: var(--gms-mane-3); color: var(--gms-mint-1); } .route-public .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) { grid-column: 1; justify-self: start; margin: 0; padding: 0; } .route-public .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) .footer-links-list { justify-content: flex-start; gap: clamp(1rem, 2.2vw, 1.9rem); } .route-public .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) .footer-links-item::after { content: none; } .route-public .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) a { color: var(--gms-green-gray); font-family: 'Poppins', Arial, sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.4; text-decoration: none; text-transform: uppercase; } .route-public .footer-copyright { grid-column: 2; justify-self: end; margin: 0; padding: 0; text-align: right; } .route-public .footer-copyright p { color: var(--gms-green-gray); font-family: 'Poppins', Arial, sans-serif; font-size: 0.68rem; letter-spacing: 0.08em; line-height: 1.4; } @media (max-width: 960px) { .route-public.page-slug-index .homepage-hero-copy { width: min(680px, 72%); } .route-public.page-slug-index .content-block-key-services_overview ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .route-public.page-slug-index .shell > main { padding-top: 0.75rem; } .route-public.page-slug-index .content-article-home { padding: 0 1rem; } .route-public.page-slug-index .homepage-hero-section { min-height: 76vh; } .route-public.page-slug-index .homepage-hero-copy { inset: 0 0 auto; width: 100%; max-width: none; padding: clamp(2rem, 8vw, 3.5rem) 1.35rem; justify-content: flex-start; } .route-public.page-slug-index .homepage-hero-copy::before { inset: 0 0 -12vh 0; background: linear-gradient(180deg, rgba(var(--gms-body-rgb), 0.98) 0%, rgba(var(--gms-body-rgb), 0.84) 42%, rgba(var(--gms-body-rgb), 0) 100%); } .route-public.page-slug-index .homepage-hero-copy h2 { max-width: 8.8ch; font-size: clamp(2.65rem, 12vw, 4.15rem); } .route-public.page-slug-index .homepage-hero-copy p:not(.content-eyebrow) { max-width: 27rem; } .route-public.page-slug-index .homepage-hero-visual img { object-position: 50% 42%; } .route-public.page-slug-index .content-block-key-services_overview, .route-public.page-slug-index .content-block-key-seo_strategy { padding: 1.25rem; } .route-public.page-slug-index .content-block-key-services_overview ul, .route-public.page-slug-index .content-block-key-seo_strategy .content-rich, .route-public.page-slug-index .content-block-key-cta_contact, .route-public.page-slug-index .content-block-key-cta_contact .content-rich, .route-public .site-footer { grid-template-columns: 1fr; } .route-public.page-slug-index .content-block-key-seo_strategy .content-rich { columns: auto; } .route-public.page-slug-index .content-block-key-cta_contact .content-rich p:last-child { text-align: left; } .route-public .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright), .route-public .footer-copyright { grid-column: 1; justify-self: center; text-align: center; } .route-public .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) .footer-links-list { justify-content: center; } .route-public .footer-copyright { margin-top: 1rem; } } /* ============================================= Homepage concept 02 header correction ============================================= */ .route-public.page-slug-index .shell { background: var(--gms-mint-1); } .route-public.page-slug-index .site-header { position: relative; z-index: 10; width: min(1340px, 100%); max-width: 1340px; margin: 0 auto; padding: clamp(0.95rem, 2.4vw, 1.5rem) clamp(1.25rem, 5vw, 4.5rem); background: transparent; border: 0; border-bottom: 1px solid rgba(var(--gms-shadow-rgb), 0.14); box-shadow: none; box-sizing: border-box; } .route-public.page-slug-index .site-header-blocks { width: auto; min-height: 54px; margin: 0; padding: 0 !important; } .route-public.page-slug-index .site-header-block-kind-branding { width: auto; min-width: 0; } .route-public.page-slug-index .site-header-block-kind-branding .theme-block-canvas { position: relative; width: auto !important; min-width: 0; min-height: 54px !important; height: 54px !important; padding-left: 67px; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; } .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="heading"], .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="text"] { display: none !important; } .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="image"] { left: 0 !important; top: 0 !important; width: 54px !important; height: 54px !important; border: 1px solid rgba(var(--gms-shadow-rgb), 0.25); border-radius: 50%; background: var(--gms-mint-1); overflow: hidden !important; } .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="image"] img { width: 118% !important; height: 118% !important; max-width: none !important; margin: -9% !important; object-fit: cover !important; } .route-public.page-slug-index .site-header-block-kind-branding .theme-block-canvas::after { content: "green mane studio"; display: flex; align-items: center; height: 54px; color: var(--gms-mane-3); font-family: 'Poppins', Arial, sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; line-height: 1.3; text-transform: lowercase; white-space: nowrap; } @media (max-width: 700px) { .route-public.page-slug-index .site-header { padding: 0.85rem 1rem; } .route-public.page-slug-index .site-header-block-kind-branding .theme-block-canvas { padding-left: 56px; } .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="image"] { width: 44px !important; height: 44px !important; } .route-public.page-slug-index .site-header-block-kind-branding .theme-block-canvas::after { height: 44px; max-width: 45vw; font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; } } /* ============================================= Homepage concept 02 png-only correction ============================================= */ .route-public.page-slug-index .shell, .route-public.page-slug-index .shell > main { background: linear-gradient(var(--gms-template-shell-bg), var(--gms-template-shell-bg)) var(--gms-white) !important; } .route-public.page-slug-index .homepage-hero-copy { background: transparent; } .route-public.page-slug-index .homepage-hero-section, .route-public.page-slug-index .content-block-key-services_overview, .route-public.page-slug-index .content-block-key-seo_strategy, .route-public.page-slug-index .content-block-key-cta_contact, .route-public.page-slug-index .site-footer { background-image: none !important; } .route-public.page-slug-index .homepage-hero-section { background: var(--gms-white); box-shadow: 0 18px 44px rgba(var(--gms-shadow-rgb), 0.055); } .route-public.page-slug-index .homepage-hero-copy::before { background: linear-gradient(95deg, rgba(var(--gms-white-rgb), 0.98) 0%, rgba(var(--gms-white-rgb), 0.9) 38%, rgba(var(--gms-white-rgb), 0.48) 61%, rgba(var(--gms-white-rgb), 0) 100%); } .route-public.page-slug-index .content-block-key-services_overview { background: var(--gms-white); box-shadow: 0 12px 30px rgba(var(--gms-shadow-rgb), 0.045); } .route-public.page-slug-index .content-block-key-seo_strategy { background: var(--gms-white); box-shadow: 0 12px 30px rgba(var(--gms-shadow-rgb), 0.045); } .route-public.page-slug-index .content-block-key-cta_contact { background: transparent; } @media (max-width: 700px) { .route-public.page-slug-index .homepage-hero-copy::before { background: linear-gradient(180deg, rgba(var(--gms-white-rgb), 0.98) 0%, rgba(var(--gms-white-rgb), 0.84) 42%, rgba(var(--gms-white-rgb), 0) 100%); } } /* ============================================= Homepage concept 02 width and readability correction ============================================= */ .route-public.page-slug-index .shell > main { padding: 1rem 0 0; } .route-public.page-slug-index .content-article-home { width: 100%; max-width: none; margin: 0; padding: 0 2vw; } .route-public.page-slug-index .content-section-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.15rem, 3vw, 2.25rem); width: 100%; max-width: none; } .route-public.page-slug-index .content-section-list > .content-block { grid-column: 1 / -1; width: 100%; min-width: 0; max-width: none; margin-left: 0; margin-right: 0; box-sizing: border-box; } .route-public.page-slug-index .homepage-hero-section { width: 100%; min-height: clamp(470px, 58vw, 720px); margin: 0; } .route-public.page-slug-index .homepage-hero-visual, .route-public.page-slug-index .homepage-hero-visual picture, .route-public.page-slug-index .homepage-hero-visual img { width: 100%; height: 100%; } .route-public.page-slug-index .homepage-hero-visual img { object-fit: cover; object-position: center center; } .route-public.page-slug-index .homepage-hero-copy { width: min(760px, 58vw); max-width: 760px; min-width: min(92vw, 360px); } .route-public.page-slug-index .homepage-hero-copy h2 { max-width: 11ch; font-size: clamp(3.1rem, 7.4vw, 7.1rem); } .route-public.page-slug-index .homepage-hero-copy p:not(.content-eyebrow) { max-width: 36rem; } .route-public.page-slug-index .content-block-key-services_overview, .route-public.page-slug-index .content-block-key-seo_strategy, .route-public.page-slug-index .content-block-key-cta_contact { width: 100%; max-width: none; padding: clamp(1.4rem, 3vw, 2.5rem); } .route-public.page-slug-index .content-block-key-services_overview .content-rich, .route-public.page-slug-index .content-block-key-seo_strategy .content-rich, .route-public.page-slug-index .content-block-key-cta_contact .content-rich { display: block; width: 100%; min-width: 0; max-width: none; columns: auto; } .route-public.page-slug-index .content-block-key-services_overview .content-rich p, .route-public.page-slug-index .content-block-key-seo_strategy .content-rich p, .route-public.page-slug-index .content-block-key-cta_contact .content-rich p { width: auto; min-width: 0; max-width: 74ch; white-space: normal; word-break: normal; overflow-wrap: normal; } .route-public.page-slug-index .content-block-key-services_overview ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); width: 100%; min-width: 0; } .route-public.page-slug-index .content-block-key-services_overview li { min-width: 0; white-space: normal; word-break: normal; overflow-wrap: normal; } .route-public.page-slug-index .content-block-key-cta_contact { display: grid; grid-template-columns: minmax(220px, 0.55fr) minmax(320px, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; } .route-public.page-slug-index .content-block-key-cta_contact .content-rich { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2rem); align-items: center; } @media (max-width: 900px) { .route-public.page-slug-index .homepage-hero-copy { width: min(680px, 72vw); } .route-public.page-slug-index .content-block-key-cta_contact, .route-public.page-slug-index .content-block-key-cta_contact .content-rich { grid-template-columns: 1fr; } } @media (max-width: 700px) { .route-public.page-slug-index .content-article-home { padding: 0 1rem; } .route-public.page-slug-index .homepage-hero-section { min-height: clamp(560px, 92vh, 740px); } .route-public.page-slug-index .homepage-hero-copy { width: 100%; min-width: 0; } .route-public.page-slug-index .homepage-hero-copy h2 { font-size: clamp(2.55rem, 11vw, 4.25rem); } .route-public.page-slug-index .homepage-hero-visual img { object-position: center center; } } .route-public.page-slug-index { background: var(--gms-sage-4); } .route-public.page-slug-index ::-webkit-scrollbar { width: 8px; height: 8px; } .route-public.page-slug-index ::-webkit-scrollbar-thumb { background: rgba(var(--gms-shadow-rgb), 0.22); border-radius: 8px; } .route-public.page-slug-index .shell { position: relative; min-height: 100vh; overflow-x: hidden; background: var(--gms-mint-1); color: var(--gms-mane-3); font-family: 'GMS Clean Spectral', serif; } .route-public.page-slug-index .shell::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.45; background-image: linear-gradient(rgba(var(--gms-shadow-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--gms-shadow-rgb), 0.05) 1px, transparent 1px); background-size: 56px 56px; } .route-public.page-slug-index .site-header, .route-public.page-slug-index .gms-clean-home, .route-public.page-slug-index .site-footer, .route-public.page-slug-index .site-nav-panel { position: relative; z-index: 1; } .route-public.page-slug-index .site-header { z-index: 10; width: 100%; max-width: none; margin: 0; padding: clamp(15px, 2.4vw, 24px) clamp(20px, 5vw, 72px); background: transparent; border: 0; border-bottom: 1px solid rgba(var(--gms-shadow-rgb), 0.14); border-radius: 0; box-shadow: none; box-sizing: border-box; } .route-public.page-slug-index .site-header-blocks { max-width: 1340px; min-height: 52px; margin: 0 auto; padding: 0 58px 0 0 !important; align-items: center; } .route-public.page-slug-index .site-header-block-kind-branding .theme-block-canvas { min-height: 52px !important; height: 52px !important; padding-left: 64px; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; } .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="heading"], .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="text"] { display: none !important; } .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="image"] { left: 0 !important; top: 0 !important; width: 52px !important; height: 52px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; } .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="image"] img { width: auto !important; height: 52px !important; max-width: none !important; margin: 0 !important; object-fit: contain !important; } .route-public.page-slug-index .site-header-block-kind-branding .theme-block-canvas::after { content: "green mane studio"; display: flex; align-items: center; height: 52px; color: var(--gms-mane-3); font-family: 'GMS Clean Cormorant', serif; font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: 0.005em; line-height: 1; text-transform: lowercase; } .route-public.page-slug-index .nav-toggle, .route-public.page-slug-index.shell:not(.shell-admin) .nav-toggle, .route-public.page-slug-index .shell:not(.shell-admin) .nav-toggle { width: 48px; height: 38px; margin: 0; padding: 0; /* Bare glyph - keep in sync with the general public rule further down (`.route-public .shell .nav-toggle`). This homepage copy is NOT redundant: its third selector scores (0,5,0) against the general rule's (0,3,0), so it wins on the homepage no matter what order they appear in. Changing only the general one leaves the homepage hamburger on the old bordered styling - which is exactly what happened when this was first fixed. Change BOTH. */ border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--gms-mane-3); } /* The homepage cluster only differs in ink colour - position is shared with the general rule above, so it is deliberately NOT repeated here. */ .route-public.page-slug-index .site-header-tools .store-cart-button, .route-public.page-slug-index .site-header-tools .theme-switch-button { color: var(--gms-mane-3); } #menu-icon { background: rgb(var(--gms-sage-4), .5); backdrop-filter: blur(3px); } .route-public.page-slug-index .nav-toggle .gms { font-size: 20px; line-height: 1; } .route-public.page-slug-index .site-nav-panel { position: fixed; top: 64px; right: clamp(20px, 5vw, 72px); width: min(320px, calc(100vw - 40px)); max-height: calc(100vh - 82px); padding: 18px clamp(18px, 4vw, 26px); background: var(--gms-mint-1); border: 1px solid rgba(var(--gms-shadow-rgb), 0.18); box-shadow: 0 16px 30px -22px rgba(var(--gms-shadow-rgb), 0.4); font-family: 'GMS Clean Archivo', sans-serif; } .route-public.page-slug-index .site-nav-item > a, .route-public.page-slug-index .site-subnav-item > a, .route-public.page-slug-index .site-nav-heading, .route-public.page-slug-index .site-subnav-heading, .route-public.page-slug-index .site-nav-slider-forward, .route-public.page-slug-index .site-nav-slider-back { color: var(--gms-mane-3); font-family: 'GMS Clean Archivo', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } .route-public.page-slug-index .gms-clean-home { width: min(1340px, 100%); margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) clamp(28px, 4vw, 56px); box-sizing: border-box; } .route-public.page-slug-index .gms-clean-hero { position: relative; min-height: clamp(460px, 54vw, 620px); overflow: hidden; } .route-public.page-slug-index .gms-clean-hero picture, .route-public.page-slug-index .gms-clean-hero img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .route-public.page-slug-index .gms-clean-hero img { object-fit: cover; object-position: 72% 50%; } .route-public.page-slug-index .gms-clean-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(var(--gms-body-rgb), 0.77) 0%, #fff 13%, rgba(var(--gms-body-rgb), 0.52) 43%, rgba(var(--gms-body-rgb), 0) 62%); } .route-public.page-slug-index .gms-clean-hero-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(26px, 4.2vw, 60px) clamp(26px, 4.2vw, 60px); box-sizing: border-box; } .route-public.page-slug-index .gms-clean-hero-copy { max-width: 720px; } .route-public.page-slug-index .gms-clean-hero h1 { margin: 0; color: var(--gms-mane-3); font-family: 'GMS Clean Cormorant', serif; font-size: clamp(46px, 8.6vw, 110px); font-weight: 600; line-height: 0.92; letter-spacing: -0.012em; } .route-public.page-slug-index .gms-clean-hero p { max-width: 24ch; margin: clamp(16px, 2vw, 26px) 0 0; color: var(--gms-mane-3); font-size: clamp(17px, 2.2vw, 26px); line-height: 1.42; } .route-public.page-slug-index .gms-clean-ornament { display: flex; align-items: center; gap: 13px; margin-top: clamp(22px, 3vw, 36px); } .route-public.page-slug-index .gms-clean-diamond, .route-public.page-slug-index .gms-clean-divider i { width: 9px; height: 9px; border: 1px solid var(--gms-mane-2); transform: rotate(45deg); flex: none; } .route-public.page-slug-index .gms-clean-rule, .route-public.page-slug-index .gms-clean-divider span { height: 1px; background: var(--gms-mane-2); opacity: 0.75; } .route-public.page-slug-index .gms-clean-rule { width: clamp(70px, 15vw, 190px); } .route-public.page-slug-index .gms-clean-bars { display: flex; align-items: flex-end; gap: 3px; } .route-public.page-slug-index .gms-clean-bars span { width: 2px; background: var(--gms-mane-2); } .route-public.page-slug-index .gms-clean-bars span:nth-child(1), .route-public.page-slug-index .gms-clean-bars span:nth-child(3) { height: 12px; } .route-public.page-slug-index .gms-clean-bars span:nth-child(2) { height: 20px; } .route-public.page-slug-index .gms-clean-bars span:nth-child(4) { height: 8px; } .route-public.page-slug-index .gms-clean-corner { position: absolute; z-index: 3; width: 34px; height: 34px; border-color: rgba(var(--gms-shadow-rgb), 0.55); pointer-events: none; } .route-public.page-slug-index .gms-clean-corner-top { top: clamp(16px, 3vw, 34px); left: clamp(16px, 3vw, 34px); border-top: 1px solid; border-left: 1px solid; } .route-public.page-slug-index .gms-clean-corner-bottom { right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px); border-right: 1px solid; border-bottom: 1px solid; } .route-public.page-slug-index .gms-clean-process { margin-top: clamp(10px, 1.6vw, 18px); background: var(--gms-sage-4); border: 1px solid rgba(var(--gms-shadow-rgb), 0.14); border-radius: 2px; padding: clamp(20px, 2.6vw, 30px) clamp(28px, 3.4vw, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: clamp(20px, 2.6vw, 34px); } .route-public.page-slug-index .gms-clean-process article { display: flex; gap: 14px; } .route-public.page-slug-index .gms-clean-process article > span { border: 1px solid rgba(var(--gms-shadow-rgb), 0.32); padding: 7px 9px; font-family: 'GMS Clean Archivo', sans-serif; font-size: 13px; font-weight: 600; line-height: 1; align-self: flex-start; } .route-public.page-slug-index .gms-clean-process h2 { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.25; } .route-public.page-slug-index .gms-clean-process p, .route-public.page-slug-index .gms-clean-work-verbiage p, .route-public.page-slug-index .gms-clean-work-header span { margin: 5px 0 0; color: var(--gms-green-gray); font-family: 'GMS Clean Archivo', sans-serif; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; } .route-public.page-slug-index .gms-clean-services { margin-top: clamp(28px, 4vw, 54px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .route-public.page-slug-index .gms-clean-services article { position: relative; min-height: 304px; background: var(--gms-mint-2); border: 1px solid rgba(var(--gms-shadow-rgb), 0.15); border-radius: 2px; padding: clamp(22px, 2.7vw, 34px); display: flex; flex-direction: column; } .route-public.page-slug-index .gms-clean-service-icon { width: 68px; height: 68px; border: 1px solid rgba(var(--gms-shadow-rgb), 0.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gms-mane-3); } .route-public.page-slug-index .gms-clean-code-icon { font-family: 'GMS Clean Archivo', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: 0.01em; } .route-public.page-slug-index .gms-clean-services h2, .route-public.page-slug-index .gms-clean-work-verbiage h3 { margin: clamp(20px, 2vw, 26px) 0 0; color: var(--gms-mane-3); font-family: 'GMS Clean Cormorant', serif; font-size: clamp(25px, 2.4vw, 31px); font-weight: 600; line-height: 1.04; } .route-public.page-slug-index .gms-clean-services p { margin: 11px 0 0; color: var(--gms-green-gray); font-size: 15px; line-height: 1.55; } .route-public.page-slug-index .gms-clean-card-rule { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; } .route-public.page-slug-index .gms-clean-card-rule span:first-child { color: var(--gms-mane-2); font-family: 'GMS Clean Archivo', sans-serif; font-size: 18px; line-height: 1; } .route-public.page-slug-index .gms-clean-card-rule span:last-child { flex: 1; height: 1px; background: rgba(var(--gms-shadow-rgb), 0.45); } .route-public.page-slug-index .gms-clean-work { margin-top: clamp(30px, 5vw, 70px); } .route-public.page-slug-index .gms-clean-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .route-public.page-slug-index .gms-clean-work-grid article { position: relative; aspect-ratio: 1.12 / 1; overflow: hidden; background: var(--gms-sage-4); border: 1px solid rgba(var(--gms-shadow-rgb), 0.12); } .route-public.page-slug-index .gms-clean-work-grid img { width: 100%; height: 100%; display: block; object-fit: cover; } .route-public.page-slug-index .gms-clean-work-verbiage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 13px; } .route-public.page-slug-index .gms-clean-work-verbiage h3 { margin: 0; font-size: 23px; } .route-public.page-slug-index .gms-clean-work-verbiage p { letter-spacing: 0.12em; } .route-public.page-slug-index .gms-clean-work-header { display: flex; align-items: center; margin-top: clamp(22px, 3vw, 36px); } .route-public.page-slug-index .gms-clean-work-header span { margin: 0; font-size: 11px; letter-spacing: 0.2em; } .route-public.page-slug-index .gms-clean-divider { margin-top: clamp(38px, 5vw, 66px); display: flex; align-items: center; gap: 18px; } .route-public.page-slug-index .gms-clean-divider span { flex: 1; background: rgba(var(--gms-shadow-rgb), 0.18); } .route-public.page-slug-index .site-footer { position: relative; z-index: 1; width: min(1340px, 100%); max-width: 1340px; margin: clamp(22px, 3vw, 34px) auto 0; padding: 0 clamp(20px, 5vw, 72px) clamp(42px, 6vw, 72px); background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box; } .route-public.page-slug-index .site-footer .footer-links { margin: 0; padding: 0; } .route-public.page-slug-index .footer-social-links .footer-links-list { display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .route-public.page-slug-index .footer-social-links .footer-links-item { margin: 0; } .route-public.page-slug-index .footer-social-links a { width: 38px; height: 38px; border: 1px solid rgba(var(--gms-shadow-rgb), 0.22); border-radius: 50%; display: grid; place-items: center; color: var(--gms-mane-3); font-size: 20px; line-height: 1; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } .route-public.page-slug-index .footer-social-links a:hover, .route-public.page-slug-index .footer-social-links a:focus-visible { border-color: var(--gms-mane-3); background: var(--gms-mane-3); color: var(--gms-mint-1); } /* .route-public.page-slug-index .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) { border-top: 1px solid rgba(var(--gms-shadow-rgb), 0.16); margin-top: clamp(20px, 3vw, 30px); padding-top: clamp(20px, 3vw, 30px); } */ .route-public.page-slug-index .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) .footer-links-list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.2vw, 30px); margin: 0; padding: 0; list-style: none; } .route-public.page-slug-index .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) a, .route-public.page-slug-index .footer-copyright { color: var(--gms-green-gray); font-family: 'GMS Clean Archivo', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.13em; line-height: 1.3; text-decoration: none; text-transform: uppercase; transition: color 0.2s; } .route-public.page-slug-index .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) a:hover, .route-public.page-slug-index .site-footer > .footer-links:not(.footer-social-links):not(.footer-copyright) a:focus-visible { color: var(--gms-mane-3); } .route-public.page-slug-index .footer-copyright { margin-top: 16px; color: var(--gms-green-gray); font-weight: 400; letter-spacing: 0.08em; text-transform: none; } @media (max-width: 900px) { .route-public.page-slug-index .gms-clean-services, .route-public.page-slug-index .gms-clean-work-grid, .route-public.page-slug-index .gms-clean-work-verbiage { grid-template-columns: 1fr; } } @media (max-width: 719px) { .route-public.page-slug-index .site-header { padding: 16px 20px; } .route-public.page-slug-index .site-header-blocks { padding-right: 58px !important; } .route-public.page-slug-index .site-header-block-kind-branding .theme-block-canvas { padding-left: 52px; } .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="image"], .route-public.page-slug-index .site-header-block-kind-branding [data-block-node="image"] img { height: 40px !important; } .route-public.page-slug-index .site-header-block-kind-branding .theme-block-canvas::after { height: 40px; font-size: 20px; } .route-public.page-slug-index .site-header-tools { top: 16px; right: 20px; } .route-public.page-slug-index .site-nav-panel { top: 66px; right: 20px; } .route-public.page-slug-index .gms-clean-home { padding: 0 20px clamp(26px, 6vw, 40px); } .route-public.page-slug-index .gms-clean-hero { min-height: 76vh; } .route-public.page-slug-index .gms-clean-hero img { object-position: 50% 42%; } .route-public.page-slug-index .gms-clean-hero::after { background: linear-gradient(178deg, rgba(var(--gms-body-rgb), 0.97) 0%, rgba(var(--gms-body-rgb), 0.86) 26%, rgba(var(--gms-body-rgb), 0.28) 47%, rgba(var(--gms-body-rgb), 0) 64%); } .route-public.page-slug-index .gms-clean-hero-content { justify-content: flex-start; padding-top: clamp(28px, 8vw, 56px); } .route-public.page-slug-index .gms-clean-process, .route-public.page-slug-index .gms-clean-services article { padding: 22px; } } /* ============================================= GMS clean global public theme - 2026-06-30 Uses ..samples/example_template/index_clean.html as the visual source. ============================================= */ body.route-public { --gms-template-bg: var(--gms-mint-1); /* mint-1 at 25% - painted over a white base in the .shell rule */ --gms-template-shell-bg: rgba(227, 240, 223, 0.25); --gms-template-outer-bg: var(--gms-sage-4); --gms-template-panel: var(--gms-mint-2); --gms-template-panel-alt: var(--gms-sage-4); --gms-template-ink: var(--gms-mane-3); --gms-template-body: var(--gms-green-gray); --gms-template-muted: var(--gms-green-gray); --gms-template-accent: var(--gms-mane-2); --gms-template-line: rgba(var(--gms-shadow-rgb), 0.16); background: var(--gms-template-outer-bg) !important; color: var(--gms-template-ink); font-family: 'GMS Clean Spectral', serif; } /* Dark mode for the public clean theme. data-theme-mode lives on ; the public palette lives on body.route-public and is built from the fixed light --gms-* palette, so it never flipped when the theme switcher toggled dark. Re-map the --gms-template-* surfaces (plus the shadow rgb triplet used for borders/dividers) to dark values here. Mirrors the selector pattern ThemeLibrary uses for the --theme-* tokens. */ html[data-theme-mode="dark"] body.route-public { --gms-template-outer-bg: #0a1410; --gms-template-bg: #0e1b13; --gms-template-shell-bg: #0e1b13; --gms-template-panel: #15281c; --gms-template-panel-alt: #1a3323; --gms-template-ink: #e7f2e6; --gms-template-body: #bcd4c0; --gms-template-muted: #93b199; --gms-template-accent: #37c46b; --gms-template-line: rgba(231, 242, 230, 0.14); --gms-shadow-rgb: 205, 230, 210; } @media (prefers-color-scheme: dark) { html:not([data-theme-mode="light"]) body.route-public { --gms-template-outer-bg: #0a1410; --gms-template-bg: #0e1b13; --gms-template-shell-bg: #0e1b13; --gms-template-panel: #15281c; --gms-template-panel-alt: #1a3323; --gms-template-ink: #e7f2e6; --gms-template-body: #bcd4c0; --gms-template-muted: #93b199; --gms-template-accent: #37c46b; --gms-template-line: rgba(231, 242, 230, 0.14); --gms-shadow-rgb: 205, 230, 210; } } /* The homepage hero sits on a light photo with a light left gradient in BOTH modes, so its heading must stay dark even in dark mode (the sub-lede already uses --gms-mane-3 and stays dark). */ html[data-theme-mode="dark"] body.route-public .hero h1 { color: var(--gms-mane-3); } @media (prefers-color-scheme: dark) { html:not([data-theme-mode="light"]) body.route-public .hero h1 { color: var(--gms-mane-3); } } /* Dark mode: public form fields default to a near-white bg + inherited (now light) text -> light-on-light. Theme them dark so typed text/placeholder stay readable. */ html[data-theme-mode="dark"] body.route-public .content-form input:not([type="checkbox"]):not([type="radio"]), html[data-theme-mode="dark"] body.route-public .content-form select, html[data-theme-mode="dark"] body.route-public .content-form textarea { background: rgba(255, 255, 255, 0.06); color: var(--gms-template-ink); border-color: rgba(231, 242, 230, 0.22); } html[data-theme-mode="dark"] body.route-public .content-form ::placeholder { color: rgba(231, 242, 230, 0.5); } @media (prefers-color-scheme: dark) { html:not([data-theme-mode="light"]) body.route-public .content-form input:not([type="checkbox"]):not([type="radio"]), html:not([data-theme-mode="light"]) body.route-public .content-form select, html:not([data-theme-mode="light"]) body.route-public .content-form textarea { background: rgba(255, 255, 255, 0.06); color: var(--gms-template-ink); border-color: rgba(231, 242, 230, 0.22); } html:not([data-theme-mode="light"]) body.route-public .content-form ::placeholder { color: rgba(231, 242, 230, 0.5); } } body.route-public ::selection { background: var(--gms-template-ink); color: var(--gms-template-bg); } body.route-public ::-webkit-scrollbar { width: 8px; height: 8px; } body.route-public ::-webkit-scrollbar-thumb { background: rgba(var(--gms-shadow-rgb), 0.22); border-radius: 8px; } .route-public .shell { position: relative; min-height: 100vh; overflow-x: hidden; background: linear-gradient(var(--gms-template-shell-bg), var(--gms-template-shell-bg)) var(--gms-white) !important; color: var(--gms-template-ink); font-family: 'GMS Clean Spectral', serif; } .route-public .shell::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.45; background-image: linear-gradient(rgba(var(--gms-shadow-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--gms-shadow-rgb), 0.05) 1px, transparent 1px); background-size: 56px 56px; } .route-public .shell > .site-header, .route-public .shell > main, .route-public .shell > .site-footer, .route-public .shell > .site-nav-panel, .route-public .auth-modal-backdrop { position: relative; z-index: 1; } .route-public .shell .site-header { z-index: 10; width: 100%; max-width: none; margin: 0; padding: clamp(15px, 2.4vw, 24px) clamp(20px, 5vw, 72px); background: transparent !important; border: 0; border-bottom: 1px solid rgba(var(--gms-shadow-rgb), 0.14); border-radius: 0; box-shadow: none; box-sizing: border-box; } .route-public .shell .site-header-blocks { width: 100%; max-width: 1340px; min-height: 52px; margin: 0 auto; padding: 0 58px 0 0 !important; align-items: center; } .route-public .shell .site-header-block-kind-branding .theme-block-canvas { min-height: 52px !important; height: 52px !important; padding-left: 64px; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; } .route-public .shell .site-header-block-kind-branding [data-block-node="heading"], .route-public .shell .site-header-block-kind-branding [data-block-node="text"] { display: none !important; } .route-public .shell .site-header-block-kind-branding [data-block-node="image"] { left: 0 !important; top: 0 !important; width: 52px !important; height: 52px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; } .route-public .shell .site-header-block-kind-branding [data-block-node="image"] img { width: auto !important; height: 52px !important; max-width: none !important; margin: 0 !important; object-fit: contain !important; } .route-public .shell .site-header-block-kind-branding .theme-block-canvas::after { content: "green mane studio"; display: flex; align-items: center; height: 52px; color: var(--gms-template-ink); font-family: 'GMS Clean Cormorant', serif; font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: 0.005em; line-height: 1; text-transform: lowercase; } .route-public .shell .nav-toggle, .route-public .shell:not(.shell-admin) .nav-toggle { width: 48px; height: 38px; margin: 0; padding: 0; /* Bare glyph, to match the theme switch beside it - no border, no chip. The width/height stay: they are an invisible 48x38 tap target (the glyph itself is only 20px), which is what keeps this usable on a phone. Do not collapse them to shrink-wrap the glyph. NOTE the chip this overrides is NOT in this file - it is `.shell:not(.shell-admin) .nav-toggle` in the inline