/* ===== Hamburger Menu Styles ===== */ /* .hamburger-menu { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; z-index: 20; margin-right: 10px; } .hamburger-menu span { display: block; width: 28px; height: 3px; margin: 4px 0; background: var(--gold); border-radius: 2px; transition: all 0.3s; } */ .close-menu { display: none; position: absolute; top: calc(10px * var(--s)); right: calc(10px * var(--s)); background: none; border: none; font-size: calc(22px * var(--s)); color: var(--gold); z-index: 30; cursor: pointer; } @media (max-width: 768px) { .panel.e1 { position: relative; z-index: 200; } /* .hamburger-menu { display: flex !important; position: relative; z-index: 300; } */ /* Slide-in panel */ /* .navCell nav { position: fixed; top: 0; right: 0; width: 78vw; max-width: 340px; height: 100vh; background: #071b3a; background-image: radial-gradient( 800px 600px at 70% 30%, rgba(255,255,255,0.06), transparent 60% ); transform: translateX(100%); transition: transform 0.35s ease; padding: 90px 36px 36px; z-index: 250; display: flex; flex-direction: column; align-items: flex-end; } */ /* .navCell nav.open { transform: translateX(0); } */ /* Close button */ /* .navCell .close-menu { position: absolute; top: 22px; right: 22px; background: none; border: 1px solid var(--gold); color: var(--gold); width: 36px; height: 36px; font-size: 22px; line-height: 1; border-radius: 6px; cursor: pointer; } */ /* Menu list */ /* .nav ul { display: flex; flex-direction: column; gap: 22px; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; text-align: right; } .nav ul li { color: rgba(184,163,87,0.85); cursor: pointer; } .nav ul li.active { color: #fff; } */ /* CTA item */ /* .nav ul li.cta { margin-top: 18px; color: #fff; font-weight: 600; letter-spacing: 4px; } */ } :root { --bg: #191818; --text: #F1EDE3; --gold: #baa356; --cta: #ff4646; --font-weight-text: 300; /* scale: 1 at 1440 viewport (unitless) NOTE: We set this via JS for cross-browser correctness (Firefox rejects vw/px division). */ --s: 1; /* geometry */ --cell0: 700px; --cell1: 100vh; --cell: calc(var(--cell0) * var(--s)); --win0: 1440px; --win: calc(var(--win0) * var(--s)); /* fixed visible header height (same in both docs) */ --topVisible0: 152px; --topVisible: calc(var(--topVisible0) * var(--s)); --topHide: calc(var(--cell) - var(--topVisible)); /* gridlines */ /* Fallback for browsers that don't support max() - use 1px minimum */ --stroke: 1px; --line: #424242; /* spacing/type */ --pad: calc(40px * var(--s)); --padLg: calc(40px * var(--s)); --p: calc(13.5px * var(--s)); --radius: calc(12px * var(--s)); --shadow: 0 18px 60px rgba(0, 0, 0, 0.35); /* center the 3-column layout (c, d, e) - each row is 3 columns wide */ /* For 3 columns: center = 50vw - (1.5 * var(--cell)) */ --shiftX: calc(39vw - (1.5 * var(--cell))); /* nudge control - adjust in inspector to fine-tune horizontal position */ /* Positive values shift right, negative values shift left */ --nudgeX0: 0px; --nudgeX: calc(var(--nudgeX0) * var(--s)); /* inner-edge gutter for peek columns */ --edgeInset: calc(24px * var(--s)); /* ✅ NEW: nudge nav content right/left independent of grid */ /* Positive values shift right, negative values shift left */ --navNudge0: 330px; /* <-- adjust this in inspector to shift nav left/right */ --navNudge: calc(var(--navNudge0) * var(--s)); /* Number of content rows - update this if you add/remove rows */ --contentRows: 7; } /* Use max() if supported (iOS 11.3+) */ @supports (width: max(1px, 2px)) { :root { --stroke: max(1px, calc(1.5px * var(--s))); } } * { box-sizing: border-box; } body { height: 100%; } body { margin: 0; background-image: url('../images/background-home-092e4f.webp'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-color: var(--bg); color: var(--text); font-family: "Inria Sans", sans-serif, Roboto, Arial, sans-serif; overflow-x: hidden; } /* Baseline hr style */ hr { border: none; border-top: 1px solid #777777; margin: 0 0 0.8em 0; padding: 0; } /* Sitewide link color */ .ccm-page a, .ccm-page a:link, .ccm-page a:visited, .ccm-page a:hover, .ccm-page a:active { color: var(--gold); cursor: pointer !important; } /* Force pointer cursor for interactive elements (and their children). This prevents cursor "flicker" when hovering over nested elements like logo inside . */ a *, button, button *, .btn, .btn * { cursor: pointer !important; } .stage { width: calc(8 * var(--cell)); min-height: 100vh; display: grid; place-items: start center; padding: 0; background-image: url('../images/background-home-092e4f.webp'), radial-gradient( 1200px 700px at 65% 35%, rgba(255, 255, 255, 0.06), transparent 60% ), radial-gradient( 900px 600px at 25% 75%, rgba(255, 255, 255, 0.05), transparent 55% ); background-position: center center, center center, center center; background-size: cover, auto, auto; background-repeat: no-repeat, no-repeat, no-repeat; background-attachment: fixed, scroll, scroll; background-color: var(--bg); } .window { width: calc(8 * var(--cell)); min-height: calc((var(--contentRows) * var(--cell)) - var(--topHide)); overflow: visible; clip-path: inset(0 -100vmax 0 -100vmax round var(--radius)); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; background: rgba(0, 0, 0, 0.1); /* Allow body background to show through */ } .world { position: absolute; /* left: 0; top: 0; transform: translateX(calc(var(--shiftX) + var(--nudgeX))) translateY(calc(-1 * var(--topHide))); */ width: calc(8 * var(--cell)); /* Limit height to match content rows */ height: calc(var(--contentRows) * var(--cell)); max-height: calc(var(--contentRows) * var(--cell)); overflow: visible; left: calc(var(--shiftX) + var(--nudgeX)); top: calc(-1 * var(--topHide)); } .gridlines { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-template-rows: repeat(var(--contentRows), var(--cell)); pointer-events: none; opacity: 0.95; z-index: 997; /* Behind header background (998) and header gridlines (999) */ /* Limit to content rows */ height: calc(var(--contentRows) * var(--cell)); max-height: calc(var(--contentRows) * var(--cell)); overflow: hidden; } .gcell { border-right: var(--stroke) solid var(--line); border-bottom: var(--stroke) solid var(--line); } .gcell:nth-child(8n) { border-right: none; } /* Keep bottom border on the last row (footer row) - don't remove it */ /* .gcell:nth-last-child(-n + 8) { border-bottom: none; } */ .content { position: absolute; left: 0; top: 0; right: 0; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-template-rows: repeat(var(--contentRows), var(--cell)); /* Limit height to content rows */ height: calc(var(--contentRows) * var(--cell)); max-height: calc(var(--contentRows) * var(--cell)); } /* Expandable content template - row 2 expands with content */ .template-expandable-content .content { position: relative; grid-template-rows: var(--cell) auto var(--cell); height: auto; min-height: calc(3 * var(--cell)); max-height: none; left: 0; right: 0; top: 0; } .template-expandable-content .world { position: relative; height: auto; min-height: calc(3 * var(--cell)); max-height: none; left: calc(var(--shiftX) + var(--nudgeX)); top: calc(-1 * var(--topHide)); width: calc(8 * var(--cell)); } /* Allow panels in expandable template to expand with content */ .template-expandable-content .panel { overflow: visible; min-height: var(--cell); } .template-expandable-content .panel.d2 { overflow: visible; min-height: var(--cell); height: auto; } .template-expandable-content .window { min-height: calc(3 * var(--cell)); height: auto; } .template-expandable-content .stage { min-height: calc(3 * var(--cell)); height: auto; } .template-expandable-content .gridlines { grid-template-rows: var(--cell) auto var(--cell); height: 100%; min-height: calc(3 * var(--cell)); max-height: none; } /* Sticky Header Row 1 */ /* Make world allow overflow for sticky to work */ .world { overflow: visible; /* Changed from hidden to allow sticky */ } /* Header row background - spans all columns */ .content::before { content: ''; position: sticky; top: 0; grid-column: 1 / -1; /* Spans all columns */ grid-row: 1; z-index: 998; /* Above main gridlines (997) but below header gridlines (999) */ background-image: url('../images/background-home-092e4f.webp'), radial-gradient( 1200px 700px at 65% 35%, rgba(255, 255, 255, 0.06), transparent 60% ), radial-gradient( 900px 600px at 25% 75%, rgba(255, 255, 255, 0.05), transparent 55% ); background-position: center center, center center, center center; background-size: cover, auto, auto; background-repeat: no-repeat, no-repeat, no-repeat; background-attachment: fixed, scroll, scroll; background-color: var(--bg); pointer-events: none; } /* Header row gridlines - in front of header background */ .content::after { content: ''; position: sticky; top: 0; grid-column: 1 / -1; /* Spans all columns */ grid-row: 1; z-index: 999; /* Above header background (998) but below panels (1000) */ pointer-events: none; height: var(--cell); box-sizing: border-box; /* Create gridlines using background gradients */ background-image: /* Vertical lines - repeat every cell width */ repeating-linear-gradient( to right, transparent 0, transparent calc(var(--cell) - var(--stroke)), var(--line) calc(var(--cell) - var(--stroke)), var(--line) var(--cell) ), /* Horizontal line at bottom of row */ linear-gradient( to bottom, transparent calc(var(--cell) - var(--stroke)), var(--line) calc(var(--cell) - var(--stroke)), var(--line) var(--cell) ); background-size: 100% 100%, 100% 100%; background-position: 0 0, 0 0; background-repeat: no-repeat, no-repeat; } /* Removed empty ruleset - sticky header positioning is handled below */ /* Removed margin-top from .content - only sticky header elements should shift, not the entire grid */ /* Admin toolbar offsets: - We intentionally don't force "top" offsets here; sticky header behavior is handled by the newer header implementation below. */ .panel.logoCell, .panel.d1-f1, .panel.e1 { position: sticky; top: 0; z-index: 1000; background: transparent; height: var(--topVisible); min-height: var(--topVisible); max-height: var(--topVisible); box-sizing: border-box; display: flex; align-items: flex-end; /* or center as needed */ } .content::before, .content::after { height: var(--topVisible); min-height: var(--topVisible); max-height: var(--topVisible); box-sizing: border-box; } .header-row-border { position: sticky; top: calc(var(--topVisible) - var(--stroke)); grid-column: 1 / -1; grid-row: 1; height: var(--stroke); background: var(--line); z-index: 10002; pointer-events: none; } /* Admin toolbar offsets for `.header-row-border` are also handled by the newer sticky header styles below. */ /* Logged-in toolbar offset (non-fixed layouts): shift page content below Concrete toolbar */ html.ccm-toolbar-visible .ccm-page { margin-top: var(--adminBar, 48px); } /* Logged-in (toolbar visible) sticky offsets: Keep the header sticky, but pinned BELOW the Concrete toolbar. */ html.ccm-toolbar-visible { --adminBar: 48px; } .ccm-edit-mode .content::before, .ccm-edit-mode .content::after, .ccm-edit-mode .panel.logoCell, .ccm-edit-mode .panel.d1-f1, .ccm-edit-mode .panel.e1, .ccm-edit-mode .header-row-border { position: relative; } .ccm-edit-mode .panel.logoCell, .ccm-edit-mode .panel.d1-f1, .ccm-edit-mode .panel.e1 { height: unset !important; min-height: unset !important; max-height: unset !important; } /* Row 5 panel placements */ .panel.c5 { grid-column: 3; grid-row: 5; } .panel.d5 { grid-column: 4; grid-row: 5; } .panel.e5 { grid-column: 5; grid-row: 5; } .arrowR5 { grid-column: 6; grid-row: 5; display: flex; justify-content: flex-start; align-items: flex-start; padding-left: var(--edgeInset); padding-top: calc(18px * var(--s)); background: rgba(127, 183, 255, 0.012); } /* Row 6 panel placements */ .panel.c6 { grid-column: 3; grid-row: 6; } .panel.d6 { grid-column: 4; grid-row: 6; } .panel.e6 { grid-column: 5; grid-row: 6; } /* Row 7 panel placements */ .panel.c7 { grid-column: 3; grid-row: 7; } .panel.d7 { grid-column: 4; grid-row: 7; } .panel.e7 { grid-column: 5; grid-row: 7; } /* Row 8 panel placements */ .panel.c8 { grid-column: 3; grid-row: 8; } .panel.d8 { grid-column: 4; grid-row: 8; } .panel.e8 { grid-column: 5; grid-row: 8; } /* Row 9 panel placements */ .panel.c9 { grid-column: 3; grid-row: 9; } .panel.d9 { grid-column: 4; grid-row: 9; } .panel.e9 { grid-column: 5; grid-row: 9; } /* Row 10 panel placements */ .panel.c10 { grid-column: 3; grid-row: 10; } .panel.d10 { grid-column: 4; grid-row: 10; } .panel.e10 { grid-column: 5; grid-row: 10; } /* Row 11 panel placements */ .panel.c11 { grid-column: 3; grid-row: 11; } .panel.d11 { grid-column: 4; grid-row: 11; } .panel.e11 { grid-column: 5; grid-row: 11; } /* Row 12 panel placements */ .panel.c12 { grid-column: 3; grid-row: 12; } .panel.d12 { grid-column: 4; grid-row: 12; } .panel.e12 { grid-column: 5; grid-row: 12; } /* Row 13 panel placements */ .panel.c13 { grid-column: 3; grid-row: 13; } .panel.d13 { grid-column: 4; grid-row: 13; } .panel.e13 { grid-column: 5; grid-row: 13; } /* Row 14 panel placements */ .panel.c14 { grid-column: 3; grid-row: 14; } .panel.d14 { grid-column: 4; grid-row: 14; } .panel.e14 { grid-column: 5; grid-row: 14; } .arrowR6 { grid-column: 6; grid-row: 6; display: flex; justify-content: flex-start; align-items: flex-start; padding-left: var(--edgeInset); padding-top: calc(18px * var(--s)); background: rgba(127, 183, 255, 0.012); } /* Footer panel placements - dynamic row positioning */ /* Note: grid-row is set inline in footer.php using calculated footerRow */ .footer-panel-left, .panel.footer-panel-left { grid-column: 3; /* Empty panel, kept for grid structure */ } .panel.footer-panel-center { grid-column: 4; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 0; } /* Footer content area - spans 100% width within panel */ .panel.footer-panel-center > .ccm-area { width: 100%; } /* Footer center wrapper - anchored to bottom with padding */ .footer-center-wrapper { margin-top: auto; padding: var(--pad); } .panel.footer-panel-right { grid-column: 5; display: flex; justify-content: flex-end; align-items: flex-start; padding: var(--pad); background: rgba(127, 183, 255, 0.012); } /* Row 4 panel placements */ .panel.c4 { grid-column: 3; grid-row: 4; } .panel.d4 { grid-column: 4; grid-row: 4; } .panel.e4 { grid-column: 5; grid-row: 4; } .arrowR4 { grid-column: 6; grid-row: 4; display: flex; justify-content: flex-start; align-items: flex-start; padding-left: var(--edgeInset); padding-top: calc(18px * var(--s)); background: rgba(127, 183, 255, 0.012); } .panel { padding: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; } .panel.alt { background: rgba(127, 183, 255, 0.012); } .panel.blank { background: transparent; } .panel::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* background: radial-gradient(900px 600px at 25% 30%, rgba(255,255,255,0.06), transparent 60%), radial-gradient(700px 520px at 85% 80%, rgba(255,255,255,0.04), transparent 55%); */ opacity: 0.55; pointer-events: none; } .panel > * { position: relative; z-index: 1; } /* ===== Placement ===== */ .logoCell { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: calc(30px * var(--s)); padding-bottom: calc(30px * var(--s)); } /* Hamburger menu - hidden by default, shown via media queries */ .close-menu { display: none; } .panel.d1-f1 { grid-column: 4 / 6; grid-row: 1; /* Background set in sticky header section */ } .panel.e1 { grid-column: 5; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-left: var(--edgeInset); padding-bottom: calc(30px * var(--s)); /* Background set in sticky header section */ } .gridlines, .content { height: calc(var(--contentRows) * var(--cell)); max-height: calc(var(--contentRows) * var(--cell)); } div#ccm-toolbar { z-index: 10002; /* Above all grid elements */ } .cke_dialog_container { z-index: 20001 !important; } .cke.cke_reset_all.cke_1.cke_panel.cke_combopanel.cke_ltr { z-index: 20002 !important; } /* ✅ apply nav-only nudge to the nav itself (not the cell/grid) */ /* Only apply transform at desktop, not mobile */ @media (min-width: 900px) { .panel.e1 nav { transform: translateX(var(--navNudge)); will-change: transform; } } .panel.c2 { grid-column: 3; grid-row: 2; } .panel.d2 { grid-column: 4; grid-row: 2; } .panel.e2 { grid-column: 5; grid-row: 2; } .panel.c3 { grid-column: 3; grid-row: 3; } .panel.d3 { grid-column: 4; grid-row: 3; } .panel.e3 { grid-column: 5; grid-row: 3; } .arrowR { grid-column: 5; grid-row: 3; display: flex; justify-content: flex-start; align-items: flex-start; padding-left: var(--edgeInset); padding-top: calc(18px * var(--s)); background: rgba(127, 183, 255, 0.012); } /* Brand */ .brand { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10px * var(--s)); cursor: pointer !important; } .brand img { width: calc(150px * var(--s)); height: auto; display: block; } .mark { width: calc(78px * var(--s)); height: calc(78px * var(--s)); border: var(--stroke) solid rgba(184, 163, 87, 0.7); border-radius: calc(14px * var(--s)); display: grid; place-items: center; color: var(--gold); letter-spacing: calc(2px * var(--s)); font-weight: 700; } .brand-name { font-weight: 700; letter-spacing: calc(3px * var(--s)); color: var(--gold); font-size: calc(22px * var(--s)); } /* Nav */ .nav ul { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: calc(8px * var(--s)); font-size: calc(18px * var(--s)); letter-spacing: calc(1.6px * var(--s)); color: rgba(184, 163, 87, 0.9); text-transform: uppercase; text-align: right; } .nav ul a, .nav ul a:link, .nav ul a:visited, .nav ul a:hover, .nav ul a:active { color: inherit; text-decoration: none; cursor: pointer !important; } /* Top nav hover/active (match footer behavior) */ .nav ul li { transition: color 0.2s ease; } .nav ul li:hover, .nav ul li:focus-within, .nav ul li.active { color: var(--text); } /* Ensure anchors always inherit li color (prevents global link hover rules from interfering) */ .nav ul li a { color: inherit !important; } .nav ul li.active { cursor: pointer; transition: color 0.3s ease; color: #f1ede3; } /* ========================= GDS form controls (native) ========================= */ .ccm-page .gds-field { display: flex; flex-direction: column; gap: calc(12px * var(--s)); width: 100%; } .ccm-page .gds-label { display: block; font-size: calc(14px * var(--s)); letter-spacing: calc(1.6px * var(--s)); text-transform: uppercase; color: var(--gold); } .ccm-page .gds-select { width: 100%; box-sizing: border-box; color: var(--text); font-size: calc(18px * var(--s)); line-height: 1.25; padding: calc(14px * var(--s)) calc(44px * var(--s)) calc(14px * var(--s)) calc(14px * var(--s)); /* Native select, modern skin */ appearance: none; -webkit-appearance: none; -moz-appearance: none; border: var(--stroke) solid rgba(241, 237, 227, 0.28); border-radius: calc(10px * var(--s)); background-color: rgba(0, 0, 0, 0.22); /* Custom chevron */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23baa356' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right calc(14px * var(--s)) center; background-size: calc(16px * var(--s)) calc(10px * var(--s)); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .ccm-page .gds-select:hover { border-color: rgba(186, 163, 86, 0.65); background-color: rgba(0, 0, 0, 0.28); } .ccm-page .gds-select:focus { outline: none; } .ccm-page .gds-select:focus-visible { outline: none; box-shadow: 0 0 0 calc(2px * var(--s)) rgba(186, 163, 86, 0.45); border-color: rgba(186, 163, 86, 0.9); } /* Slightly improve readability for option list where supported */ .ccm-page .gds-select option { background: var(--bg); color: var(--text); } /* ========================= Posts Featured (Express) ========================= */ .posts-featured-express-block.grid-content-block { padding: 0; /* fill container; padding belongs in the card content half */ height: 100%; min-height: 100%; /* Ensure this block has a real height in grid panels so the 50/50 split can resolve */ min-height: var(--cell); } /* Grid tile template: Image Background (block template for featured posts) */ .gds-post-tile.gds-post-tile--imagebg { position: relative; width: 100%; height: 100%; margin: 0; } .gds-post-tile__link { display: block; width: 100%; height: 100%; text-decoration: none; position: relative; color: inherit; } .gds-post-tile__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0.15); } .gds-post-tile__overlay { position: absolute; inset: 0; display: flex; /* Default: bottom-aligned (block setting can override via content-position-* classes) */ align-items: flex-end; padding: var(--pad); background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0.18)); } .posts-featured-express-block.content-position-top .gds-post-tile__overlay { align-items: flex-start; } .posts-featured-express-block.content-position-center .gds-post-tile__overlay { align-items: center; } .posts-featured-express-block.content-position-bottom .gds-post-tile__overlay { align-items: flex-end; } .gds-post-tile__overlay-inner { width: 100%; } .gds-post-tile__meta { display: flex; flex-wrap: wrap; gap: calc(10px * var(--s)); margin-bottom: calc(14px * var(--s)); } .gds-post-tile__headline { margin: 0 0 calc(14px * var(--s)) 0; color: var(--gold); font-size: calc(36px * var(--s)); font-weight: 400; line-height: 1.15; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .gds-post-tile__author { display: flex; align-items: center; gap: calc(10px * var(--s)); margin-top: calc(20px * var(--s)); margin-bottom: calc(20px * var(--s)); } .gds-post-tile__author-headshot, .gds-post-tile__author-placeholder { width: calc(38px * var(--s)); height: calc(38px * var(--s)); border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: var(--stroke) solid rgba(241, 237, 227, 0.22); background: rgba(0, 0, 0, 0.18); } .gds-post-tile__author-name, .gds-post-tile__author-title { color: rgba(241, 237, 227, 0.92); line-height: 1.25; letter-spacing: calc(1.1px * var(--s)); } .gds-post-tile__author-name { font-size: calc(14px * var(--s)); } .gds-post-tile__author-title { font-size: calc(12px * var(--s)); opacity: 0.9; } .gds-post-tile__excerpt { margin: calc(14px * var(--s)) 0 0 0; font-size: calc(18px * var(--s)); /* match body copy sizing */ font-weight: var(--font-weight-text); color: rgba(241, 237, 227, 0.92); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Mobile: featured post images should display inline (no crop) */ @media (max-width: 767px) { .posts-featured-express-block.grid-content-block { height: auto; min-height: 0; } .posts-featured-express-block .grid-content-block-content { height: auto; } .posts-featured-express-block .posts-featured-card { height: auto; } .posts-featured-express-block .posts-featured-card__image { flex: none; } .posts-featured-express-block .posts-featured-card__image-img { height: auto; object-fit: contain; } .posts-featured-express-block .posts-featured-card__content { flex: none; } } /* grid-content has special inset rules when backgrounds are present that can flip height to auto. For this card block we want the block to stay "full height" so the 50/50 split is stable. */ .posts-featured-express-block.grid-content-block.has-background-color, .posts-featured-express-block.grid-content-block.has-background-image, .posts-featured-express-block.grid-content-block.half-height.has-background-color, .posts-featured-express-block.grid-content-block.half-height.has-background-image { height: 100%; min-height: 100%; } .posts-featured-express-block.grid-content-block.half-height { min-height: calc(var(--cell) / 2); } /* Critical: the inner grid_content wrappers are not height-constrained by default, so ensure they stretch to fill the section; otherwise the card height collapses to content. */ .posts-featured-express-block .grid-content-block-content { flex: 1 1 auto; height: 100%; } .posts-featured-card { display: flex; flex-direction: column; width: 100%; height: 100%; text-decoration: none; color: inherit; flex: 1 1 auto; min-height: 0; } .posts-featured-card__image { flex: 0 0 50%; width: 100%; border-bottom: var(--stroke) solid rgba(241, 237, 227, 0.18); position: relative; overflow: hidden; background: rgba(0, 0, 0, 0.10); } .posts-featured-card__image-img { width: 100%; height: 100%; object-fit: cover; display: block; } .posts-featured-card__image-placeholder { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); } .posts-featured-card__content { flex: 0 0 50%; width: 100%; box-sizing: border-box; padding: var(--pad); display: flex; flex-direction: column; justify-content: flex-start; gap: calc(14px * var(--s)); } .posts-featured-card__pills { display: flex; flex-wrap: wrap; gap: calc(10px * var(--s)); } .posts-featured-pill { display: inline-block; padding: calc(6px * var(--s)) calc(10px * var(--s)); border: var(--stroke) solid rgba(241, 237, 227, 0.24); border-radius: calc(999px * var(--s)); background: rgba(0, 0, 0, 0.22); color: var(--text); font-size: calc(12px * var(--s)); letter-spacing: calc(1.2px * var(--s)); text-transform: uppercase; line-height: 1; } .posts-featured-pill--category { border-color: rgba(186, 163, 86, 0.45); color: var(--gold); } .posts-featured-card__author { display: flex; align-items: center; gap: calc(12px * var(--s)); } .posts-featured-card__author-headshot { width: calc(38px * var(--s)); height: calc(38px * var(--s)); border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: var(--stroke) solid rgba(241, 237, 227, 0.22); } .posts-featured-card__author-headshot--placeholder { background: rgba(0, 0, 0, 0.18); } .posts-featured-card__author-line { display: block; font-size: calc(14px * var(--s)); letter-spacing: calc(1.1px * var(--s)); color: rgba(241, 237, 227, 0.92); line-height: 1.25; margin-top: calc(4px * var(--s)); margin-bottom: calc(4px * var(--s)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .posts-featured-card__headline { /* Headline uses the design-system h2 styling via markup; keep clamp behavior here */ margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Article detail hero: h1 should look like the h2 used on listing pages, but allow 3 lines */ #posts-article-hero .posts-featured-card__headline { color: var(--gold); font-size: calc(42px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; -webkit-line-clamp: 3; } /* Mobile: make listing-page featured card title a bit smaller, while keeping detail h1 at h2-size */ @media (max-width: 767px) { /* Override the global mobile `h1 { ... !important }` rule for the detail hero only */ #posts-article-hero .grid-content-block-content h1.posts-featured-card__headline { font-size: calc(42px * var(--s)) !important; line-height: 1.15 !important; } .posts-featured-express-block:not(#posts-article-hero) .posts-featured-card__headline { font-size: calc(34px * var(--s)); } } /* Reduce the vertical gap specifically between headline -> author */ .posts-featured-card__headline + .posts-featured-card__author { margin-top: calc(-3px * var(--s)); /* slightly tighter than default, but with breathing room */ } /* Featured excerpt: match regular body copy sizing and clamp to 3 lines */ .posts-featured-card__excerpt { font-size: calc(18px * var(--s)); /* matches .grid-content-block-content p */ font-weight: var(--font-weight-text); color: var(--text); line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Decorative right-arrow (same asset as testimonials) in lower-right corner */ .posts-featured-card__corner-arrow { margin-top: auto; align-self: flex-end; line-height: 0; pointer-events: none; /* keep the entire card link clickable */ } .posts-featured-card__corner-arrow .arrow-icon { width: calc(30px * var(--s)); height: calc(30px * var(--s)); max-width: calc(30px * var(--s)); max-height: calc(30px * var(--s)); object-fit: contain; transform: rotate(-90deg); /* down -> right */ } /* ========================= Posts List (Express) ========================= */ .posts-list-express-block.grid-content-block { padding: 0; } .posts-list-express { display: flex; flex-direction: column; width: 100%; } .posts-list-card { display: flex; gap: calc(22px * var(--s)); padding: calc(26px * var(--s)); text-decoration: none; color: inherit; align-items: flex-start; border-bottom: var(--stroke) solid rgba(241, 237, 227, 0.18); } .posts-list-card:first-child { border-top: var(--stroke) solid rgba(241, 237, 227, 0.18); } .posts-list-card__thumb { flex: 0 0 auto; width: calc(150px * var(--s)); aspect-ratio: 1 / 1; overflow: hidden; background: rgba(0, 0, 0, 0.10); border: var(--stroke) solid rgba(241, 237, 227, 0.18); } .posts-list-card__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .posts-list-card__thumb-placeholder { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); } .posts-list-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(14px * var(--s)); } .posts-list-card__corner-arrow { margin-top: auto; align-self: flex-end; line-height: 0; pointer-events: none; /* keep the entire card link clickable */ } .posts-list-card__corner-arrow .arrow-icon { width: calc(26px * var(--s)); height: calc(26px * var(--s)); max-width: calc(26px * var(--s)); max-height: calc(26px * var(--s)); object-fit: contain; transform: rotate(-90deg); /* down -> right */ } .posts-list-card__pills { display: flex; flex-wrap: wrap; gap: calc(10px * var(--s)); } .posts-list-pill { display: inline-block; padding: calc(6px * var(--s)) calc(10px * var(--s)); border: var(--stroke) solid rgba(241, 237, 227, 0.24); border-radius: calc(999px * var(--s)); background: rgba(0, 0, 0, 0.06); color: rgba(241, 237, 227, 0.9); font-size: calc(12px * var(--s)); letter-spacing: calc(1.2px * var(--s)); text-transform: uppercase; line-height: 1; } .posts-list-pill--category { border-color: rgba(186, 163, 86, 0.45); color: var(--gold); } .posts-list-card__headline { font-size: calc(24px * var(--s)); font-weight: 600; line-height: 1.2; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .posts-list-card__excerpt { /* Match other body copy calculations */ font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 70ch; } @media (max-width: 700px) { .posts-list-card { gap: calc(16px * var(--s)); padding: calc(18px * var(--s)); } .posts-list-card__thumb { width: calc(120px * var(--s)); } } /* Header nav CTA ("Get Started") */ .nav ul li.nav-cta a.btn { color: #f1ede3 !important; padding: calc(5px * var(--s)) calc(5px * var(--s)); } /* Mobile nav overlay sets links gold by default; keep CTA as a button */ header.row-header .header-nav-mobile nav ul li.nav-cta a.btn { color: #f1ede3 !important; background: var(--cta) !important; /* Match the overlay link sizing (the overlay sets ul font-size/letter-spacing) */ font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; /* Match the overlay link padding so CTA isn't visually smaller */ padding: calc(var(--pad) * 0.25) !important; } /* Grid Content Block */ .grid-content-block { max-width: 100%; width: 100%; height: 100%; display: flex; flex-direction: column; padding: var(--pad); position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; box-sizing: border-box; /* Expansion behavior (flex: none, align-self: flex-start) is inherited from universal rule */ overflow: visible; } /* When block has background (color or image), inset it to preserve grid borders */ /* Expansion behavior (flex: none, align-self: flex-start) is inherited from base rule */ .grid-content-block.has-background-color, .grid-content-block.has-background-image { width: calc(100% - var(--stroke)); height: auto; min-height: calc(100% - var(--stroke)); margin-left: calc(var(--stroke) / 2); margin-right: calc(var(--stroke) / 2); margin-top: calc(var(--stroke) / 2); margin-bottom: calc(var(--stroke) / 2); } /* Half height variant - allows two blocks in one panel */ .grid-content-block.half-height { height: auto; min-height: calc(var(--cell) / 2); } /* Half height with background - inset adjustments only */ /* Expansion behavior (flex: none, align-self: flex-start) is inherited from base rule */ .grid-content-block.half-height.has-background-color, .grid-content-block.half-height.has-background-image { min-height: calc((var(--cell) / 2) - var(--stroke)); height: auto; margin-left: calc(var(--stroke) / 2); margin-right: calc(var(--stroke) / 2); margin-top: calc(var(--stroke) / 2); margin-bottom: 0; } /* Grid Image Block */ .grid-image-block { max-width: 100%; width: 100%; height: 100%; position: relative; overflow: visible; /* Changed from hidden to visible to allow expansion */ display: flex; align-items: center; justify-content: center; box-sizing: border-box; /* Expansion behavior (flex: none, align-self: flex-start) is inherited from universal rule */ } /* When block has image, inset it to preserve grid borders */ .grid-image-block.has-image { width: calc(100% - var(--stroke)); height: calc(100% - var(--stroke)); } /* Half height variant */ .grid-image-block.half-height { height: auto; /* Changed from 50% to auto to allow expansion */ min-height: calc(var(--cell) / 2); /* Use same pattern as other blocks */ flex-shrink: 0; } /* Half width variant */ .grid-image-block.half-width { width: 50%; flex-shrink: 0; } .grid-image-block-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .grid-image-block-image { position: relative; width: 100%; height: 100%; z-index: 0; display: flex; align-items: center; justify-content: center; } .grid-image-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .grid-image-block-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999; font-size: calc(14px * var(--s)); padding: var(--pad); text-align: center; min-height: 200px; } .grid-image-block-title { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--pad); background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: #fff; font-size: calc(18px * var(--s)); font-weight: 600; z-index: 2; text-align: center; } .grid-content-block-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; z-index: 0; } /* Grid Arrow Block */ .grid-arrow-block { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; padding: var(--pad); box-sizing: border-box; } /* When block has background color, inset it to preserve grid borders */ .grid-arrow-block.has-background-color { width: calc(100% - var(--stroke)); height: calc(100% - var(--stroke)); } .grid-arrow-block-title { position: absolute; z-index: 2; font-size: calc(14px * var(--s)); color: var(--text); opacity: 0.8; } .grid-arrow-block-arrow { display: flex; align-items: center; justify-content: center; } .grid-arrow-block-arrow img, .grid-arrow-block-arrow svg { width: calc(60px * var(--s)); height: calc(60px * var(--s)); max-width: calc(60px * var(--s)); max-height: calc(60px * var(--s)); object-fit: contain; transition: transform 0.3s ease; } /* Arrow direction rotation */ .grid-arrow-block-arrow.arrow-direction-up .arrow-icon { transform: rotate(180deg); } .grid-arrow-block-arrow.arrow-direction-right .arrow-icon { transform: rotate(-90deg); } .grid-arrow-block-arrow.arrow-direction-down .arrow-icon { transform: rotate(0deg); } .grid-arrow-block-arrow.arrow-direction-left .arrow-icon { transform: rotate(90deg); } .grid-arrow-block-arrow svg { width: calc(60px * var(--s)); height: calc(60px * var(--s)); } /* Arrow position classes */ /* Top row */ .grid-arrow-block.arrow-top-left { align-items: flex-start; justify-content: flex-start; } .grid-arrow-block.arrow-top-left .grid-arrow-block-arrow { align-items: flex-start; justify-content: flex-start; } .grid-arrow-block.arrow-top-center { align-items: flex-start; justify-content: center; } .grid-arrow-block.arrow-top-center .grid-arrow-block-arrow { align-items: flex-start; justify-content: center; } .grid-arrow-block.arrow-top-right { align-items: flex-start; justify-content: flex-end; } .grid-arrow-block.arrow-top-right .grid-arrow-block-arrow { align-items: flex-start; justify-content: flex-end; } /* Middle row */ .grid-arrow-block.arrow-middle-left { align-items: center; justify-content: flex-start; } .grid-arrow-block.arrow-middle-left .grid-arrow-block-arrow { align-items: center; justify-content: flex-start; } .grid-arrow-block.arrow-middle-center { align-items: center; justify-content: center; } .grid-arrow-block.arrow-middle-center .grid-arrow-block-arrow { align-items: center; justify-content: center; } .grid-arrow-block.arrow-middle-right { align-items: center; justify-content: flex-end; } .grid-arrow-block.arrow-middle-right .grid-arrow-block-arrow { align-items: center; justify-content: flex-end; } /* Bottom row */ .grid-arrow-block.arrow-bottom-left { align-items: flex-end; justify-content: flex-start; } .grid-arrow-block.arrow-bottom-left .grid-arrow-block-arrow { align-items: flex-end; justify-content: flex-start; } .grid-arrow-block.arrow-bottom-center { align-items: flex-end; justify-content: center; } .grid-arrow-block.arrow-bottom-center .grid-arrow-block-arrow { align-items: flex-end; justify-content: center; } .grid-arrow-block.arrow-bottom-right { align-items: flex-end; justify-content: flex-end; } .grid-arrow-block.arrow-bottom-right .grid-arrow-block-arrow { align-items: flex-end; justify-content: flex-end; } .test-block-location { padding: 0 !important; } .stars { opacity: 0.92; letter-spacing: calc(4px * var(--s)); font-size: calc(14px * var(--s)); margin-bottom: calc(10px * var(--s)); } .quote { font-size: var(--p); line-height: 1.55; opacity: 0.88; font-style: italic; margin: 0 0 calc(12px * var(--s)) 0; max-width: 46ch; } .sig { font-size: calc(11px * var(--s)); opacity: 0.75; text-transform: uppercase; letter-spacing: calc(1.2px * var(--s)); } .spacer-md { height: calc(20px * var(--s)); } .spacer-sm { height: calc(16px * var(--s)); } /* Arrows */ .arrow { width: calc(52px * var(--s)); height: calc(52px * var(--s)); border: var(--stroke) solid rgba(184, 163, 87, 0.7); border-radius: calc(12px * var(--s)); display: grid; place-items: center; color: rgba(184, 163, 87, 0.95); font-size: calc(26px * var(--s)); } /* Grid Content Block Section */ .grid-content-block-section { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; } /* When no button, content takes full space */ .grid-content-block-section.no-button { justify-content: flex-start; } /* Content Position (controls vertical position of content within section) */ /* When button is present - use margins on content to position it within available space */ .grid-content-block.content-position-top .grid-content-block-section:not(.no-button) .grid-content-block-content { margin-top: 0; margin-bottom: auto; } .grid-content-block.content-position-center .grid-content-block-section:not(.no-button) .grid-content-block-content { margin-top: auto; margin-bottom: auto; } .grid-content-block.content-position-bottom .grid-content-block-section:not(.no-button) .grid-content-block-content { margin-top: auto; margin-bottom: 0; } /* When no button - content can be positioned anywhere in section */ .grid-content-block.content-position-top .grid-content-block-section.no-button { justify-content: flex-start; } .grid-content-block.content-position-center .grid-content-block-section.no-button { justify-content: center; } .grid-content-block.content-position-bottom .grid-content-block-section.no-button { justify-content: flex-end; } /* When button is at top, content shifts below */ /* But content position should override this */ .grid-content-block-section.button-top-left:not(.content-position-top):not(.content-position-center):not(.content-position-bottom), .grid-content-block-section.button-top-right:not(.content-position-top):not(.content-position-center):not(.content-position-bottom) { justify-content: flex-start; } /* Content position overrides button-top positioning */ .grid-content-block.content-position-bottom .grid-content-block-section.button-top-left, .grid-content-block.content-position-bottom .grid-content-block-section.button-top-right { justify-content: flex-end; } .grid-content-block.content-position-center .grid-content-block-section.button-top-left, .grid-content-block.content-position-center .grid-content-block-section.button-top-right { justify-content: center; } /* Grid Content Block Title */ .grid-content-block-title { color: var(--gold); font-size: calc(41px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(18px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } /* Standard h1 styling within grid-content-block-content */ .grid-content-block-content h1 { color: var(--gold); font-size: calc(60px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(18px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } /* Grid Content Block Content */ .grid-content-block-content { width: 100%; display: flex; flex-direction: column; } /* Standard h2 styling within grid-content-block-content */ .grid-content-block-content h2 { color: var(--gold); font-size: calc(42px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(18px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } .grid-content-block-content h3 { color: var(--gold); font-size: calc(26px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(18px * var(--s)) 0; font-family: "Inria Sans", Roboto, Arial, sans-serif; margin-bottom: 0.3em !important; } /* Refinement: h3 in half-height grid_content blocks */ .grid-content-block.half-height .grid-content-block-content h3 { margin-top: 0; } /* Standard p styling within grid-content-block-content */ .grid-content-block-content p { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.55; margin: 0 0 calc(24px * var(--s)) 0; max-width: 60ch; } /* Reduce vertical gap when a list follows a paragraph (helps article body rhythm) */ .grid-content-block-content p + ul, .grid-content-block-content p + ol { margin-top: 0.25em; } /* Utility: even tighter lead-in paragraph for lists */ .grid-content-block-content p.list-lead { margin-bottom: 0.25em; } .grid-content-block-content p.list-lead + ul, .grid-content-block-content p.list-lead + ol { margin-top: 0; } .grid-content-block-content p.intro { font-size: calc(24px * var(--s)); } .grid-content-block-content p:last-of-type { margin-bottom: 0; } /* Standard ul li styling within grid-content-block-content - match p font-size */ .grid-content-block-content ul li { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.55; } /* Personal Panel section */ .test-block-person { padding: 0; } /* Ensure intermediate wrappers stretch */ .test-block-person { display: flex; flex-direction: column; } /* Flex container fills available height */ .person-panel-section { display: flex; flex-direction: column; justify-content: space-between; height: 100%; flex: 1; } .person-img-section .person-section { display: flex; column-gap: calc(15px * var(--s)); /*align-items: stretch; flex-wrap: nowrap; justify-content: flex-start; width: 100%; min-height: 0; overflow: visible; height: 50%; */ } .person-img-section .person-section + .person-section { margin-left: 0; } .person-img-section .person-section .person-info { /* padding: 10px 7px 10px 0; */ display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; overflow: visible; } .person-img { border: 1px solid gray; } .person-img-section .person-section img { width: clamp(calc(120px * var(--s)), 24vw, calc(350px * var(--s))); max-width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; min-height: 0; } .person-img-section .person-section .person-info .name { color: #e52e00; font-size: calc(18px * var(--s)); font-weight: 400; margin: calc(10px * var(--s)) 0; } .person-img-section .person-section .person-info .position { color: #e52e00; font-size: calc(18px * var(--s)); font-weight: 400; margin-bottom: calc(10px * var(--s)); } .person-img-section .person-section .person-info .description { color: #f1ede3; font-size: calc(18px * var(--s)); font-weight: 400; /* margin: 10px 0; */ } .hero-img-section { width: 100%; height: 100%; overflow: hidden; } .hero-img-section img { width: 100%; height: 100%; max-height: 100%; object-fit: cover; display: block; } .person-block.test-block { padding: var(--pad); } /* .person-panel-section .person-block { */ /* padding: 44px 44px 95px; */ /* } */ /* .person-panel-section .headline{ color: var(--gold); font-size: 41px; font-weight: 400; } .person-panel-section .description{ font-size: 18px; font-weight: 400; color: var(--text); } .person-panel-section .person-img-section{ display: flex; flex-wrap: wrap ; } .person-panel-section .person-img-section img{ width: 50%; } */ .panel.d5 .headline { color: var(--gold); font-size: calc(41px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(30px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } .panel.d5 .description { font-size: calc(18px * var(--s)); font-weight: 400; color: var(--text); line-height: 1.55; margin: 0 0 calc(24px * var(--s)) 0; max-width: 60ch; } /* row3 section */ .bottom-vector-panel { /* padding: var(--pad); */ background-color: #000; } /* row5 section */ .panel.d5 { position: relative; } .panel.d5 .schedule-call-block { padding-top: calc(20px * var(--s)); } .schedule-call-block .schedule-call-btn { padding: calc(16px * var(--s)) calc(19px * var(--s)); background: var(--cta); font-size: calc(16px * var(--s)); font-weight: 400; color: #f1ede3; } .schedule-call-block .schedule-call-btn.stronger { letter-spacing: calc(2px * var(--s)); font-weight: bold; } .row-logo-panel{ padding: 0 !important; } /* row6 section */ .panel.d6 .test-block { padding-left: 0 !important; width: 100%; height: 100%; } .arrow-img-section { position: absolute; bottom: calc(20px * var(--s)); } .person-panel-section .headline { color: var(--gold); font-size: calc(41px * var(--s)); font-weight: 400; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } .person-panel-section .description { font-size: calc(16px * var(--s)); font-weight: 400; color: var(--text); } .office-section h3 { margin: 0 0 calc(15px * var(--s)) 0; font-size: calc(20px * var(--s)); font-weight: 600; letter-spacing: calc(0.3px * var(--s)); } .office-list { list-style: none; padding: 0; margin: 0; } .office-list li { margin-bottom: calc(8px * var(--s)); font-size: calc(15px * var(--s)); line-height: 1.4; } .office-list li::before { content: "› "; color: #ffffff; margin-right: calc(4px * var(--s)); } .panel.arrowR.bottom-vector-panel { margin: 1px; } .panel.arrowL4.bottom-vector-panel { margin: 1px; } /* Footer styling */ /* Footer Logo */ .footer-logo { width: calc(150px * var(--s)); height: auto; display: block; } /* Footer Center Wrapper - contains two navigation columns */ .footer-center-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; width: 100%; gap: calc(var(--pad) * 2); margin-top: auto; } /* Footer Left Content - wraps navigation only */ .footer-left-content { display: flex; flex-direction: column; align-items: flex-start; } /* Footer Navigation (Page List) - matches header navigation styling */ .footer-navigation { flex: 0 0 auto; } .footer-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(8px * var(--s)); /* Match header nav gap */ } .footer-navigation ul li { list-style: none; padding: 0; margin: 0; } .footer-navigation ul li a { /* Match header navigation font size and styling exactly */ font-size: calc(18px * var(--s)); letter-spacing: calc(1.6px * var(--s)); text-transform: uppercase; text-align: left; color: rgba(184, 163, 87, 0.9); /* Match header nav color */ text-decoration: none; display: block; } .footer-navigation ul li a:hover, .footer-navigation ul li.active a { color: var(--text); /* Match header nav hover/active */ } /* Footer Logo Wrapper - positions logo bottom right */ .footer-logo-wrapper { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: flex-end; } /* Footer Legal Wrapper - second row for legal links and copyright */ .footer-legal-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--pad) * 0.3); width: 100%; margin-top: calc(var(--pad) * 0.5); margin-bottom: var(--pad); margin-left: var(--pad); } /* Footer Legal Links */ .footer-legal-links { font-size: calc(14px * var(--s)); color: var(--text); } .footer-legal-links a { color: var(--text); text-decoration: none; } .footer-legal-links a:hover { color: var(--gold); } /* Copyright Section */ .copyright-section { font-size: calc(14px * var(--s)); color: #777777; } .copyright-section span { color: #777777; } /* Footer Social Icons - align to top right */ .panel.footer-panel-right { flex-direction: column; align-items: flex-end; gap: calc(var(--pad) * 0.5); } .panel.footer-panel-right a { display: block; } /* Social Links Block */ .ccm-block-social-links ul.list-inline li { font-size: calc(50px * var(--s)); } /* Button */ /* Directive styling */ .grid-content-block-directive { width: 100%; display: flex; flex-direction: column; margin-bottom: calc(24px * var(--s)); } /* When directive is present without button, position at bottom */ .grid-content-block-section.has-directive.no-button .grid-action { margin-top: auto; margin-bottom: 0; } .grid-content-block-section.has-directive.no-button .grid-action .grid-content-block-directive { margin-bottom: 0; } /* Directive text styling */ .grid-content-block-directive p { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.55; margin: 0 0 calc(16px * var(--s)) 0; } .grid-content-block-directive p:last-of-type { margin-bottom: 0; } .grid-content-block-directive h1, .grid-content-block-directive h2, .grid-content-block-directive h3 { color: var(--gold); font-weight: 400; line-height: 1.15; margin: 0 0 calc(16px * var(--s)) 0; } .grid-content-block-directive h1 { font-size: calc(60px * var(--s)); } .grid-content-block-directive h2 { font-size: calc(42px * var(--s)); } .grid-content-block-directive h3 { font-size: calc(26px * var(--s)); } /* When directive appears above bottom button - don't use margin-top: auto, grid-action handles positioning */ .grid-content-block-section.button-bottom-left .grid-action .grid-content-block-directive, .grid-content-block-section.button-bottom-right .grid-action .grid-content-block-directive { margin-top: 0; margin-bottom: calc(24px * var(--s)); } /* When directive appears above top button */ .grid-content-block-section.button-top-left .grid-action .grid-content-block-directive, .grid-content-block-section.button-top-right .grid-action .grid-content-block-directive { margin-top: 0; margin-bottom: calc(24px * var(--s)); } /* Adjust content margins when directive is present - allow it to flex to accommodate directive and button */ .grid-content-block-section.has-directive .grid-content-block-content { flex: 1; min-height: 0; } /* Grid Action container - wraps directive and button */ .grid-action { display: flex; flex-direction: column; width: 100%; } .grid-content-block-button { align-self: flex-start; } /* Button position: bottom (default) */ .grid-content-block-section.button-bottom-left .grid-action, .grid-content-block-section.button-bottom-right .grid-action { margin-top: auto; } /* Button position: top */ .grid-content-block-section.button-top-left .grid-action, .grid-content-block-section.button-top-right .grid-action { margin-top: 0; margin-bottom: calc(24px * var(--s)); } /* Button alignment */ .grid-content-block-section.button-top-right .grid-action, .grid-content-block-section.button-bottom-right .grid-action { align-items: flex-end; } /* Default button class - scoped to main content areas to exclude ConcreteCMS admin areas */ .main-wrapper .btn, footer .btn, header .btn { padding: calc(16px * var(--s)) calc(19px * var(--s)); background: var(--cta); font-size: calc(16px * var(--s)); font-weight: 400; color: #f1ede3 !important; text-transform: uppercase; text-decoration: none; display: inline-block; letter-spacing: calc(2px * var(--s)); font-weight: bold; cursor: pointer !important; } /* Buttons are often ; ensure link-color rules never turn them gold */ .ccm-page a.btn, .ccm-page a.btn:link, .ccm-page a.btn:visited, .ccm-page a.btn:hover, .ccm-page a.btn:active { color: #f1ede3 !important; } .grid-content-block-button .btn { padding: calc(16px * var(--s)) calc(19px * var(--s)); background: var(--cta); font-size: calc(16px * var(--s)); font-weight: 400; color: #f1ede3; text-transform: uppercase; text-decoration: none; display: inline-block; letter-spacing: calc(2px * var(--s)); font-weight: bold; cursor: pointer !important; } /* Button variation for grid-showmore-content */ .grid-showmore-content .btn { padding: calc(10px * var(--s)) calc(19px * var(--s)); } /* Block Preview in Edit Mode - Ensure proper layout representation */ .ccm-block-preview .grid-content-block { min-height: 400px; height: 400px; display: flex; flex-direction: column; /* Reset sizing for preview mode - always use 100% width/height */ width: 100% !important; height: 400px !important; box-sizing: border-box; } .ccm-block-preview .grid-content-block.half-height { min-height: 200px; height: 200px !important; } /* Override background adjustments in preview mode */ .ccm-block-preview .grid-content-block.has-background-color, .ccm-block-preview .grid-content-block.has-background-image { width: 100% !important; height: 400px !important; } .ccm-block-preview .grid-content-block.has-background-color.half-height, .ccm-block-preview .grid-content-block.has-background-image.half-height { height: 200px !important; } .ccm-block-preview .grid-content-block-section { height: 100%; flex: 1; display: flex; flex-direction: column; min-height: 0; } /* Block Preview in Edit Mode - Grid Image Block */ .ccm-block-preview .grid-image-block { min-height: 400px; height: 400px; display: flex; align-items: center; justify-content: center; /* Reset sizing for preview mode - always use 100% width/height */ width: 100% !important; height: 400px !important; box-sizing: border-box; } .ccm-block-preview .grid-image-block.half-height { min-height: 200px; height: 200px !important; } /* Override image adjustments in preview mode */ .ccm-block-preview .grid-image-block.has-image { width: 100% !important; height: 400px !important; } .ccm-block-preview .grid-image-block.has-image.half-height { height: 200px !important; } /* Block Preview in Edit Mode - Grid Arrow Block */ .ccm-block-preview .grid-arrow-block { min-height: 400px; height: 400px; display: flex; align-items: center; justify-content: center; /* Reset sizing for preview mode - always use 100% width/height */ width: 100% !important; height: 400px !important; box-sizing: border-box; } /* Override background adjustments in preview mode */ .ccm-block-preview .grid-arrow-block.has-background-color { width: 100% !important; height: 400px !important; } /* Grid Bio Block - Always half-height */ .grid-bio-block { width: 100%; height: 50%; display: flex; flex-direction: row; padding: 0; position: relative; box-sizing: border-box; gap: 0; flex-shrink: 0; } /* When block has image, inset it to preserve grid borders */ .grid-bio-block.has-image { width: calc(100% - var(--stroke)); height: calc(50% - var(--stroke)); } /* Image container - left side, square, exactly half width */ .grid-bio-block-image { flex: 0 0 50%; width: 50%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .grid-bio-block-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .grid-bio-block-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0; color: #999; font-size: calc(14px * var(--s)); } /* Content container - right side, exactly half width with padding */ .grid-bio-block-content { flex: 0 0 50%; width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: var(--pad); background: rgba(0, 0, 0, 0.8); background-image: radial-gradient(800px 600px at 70% 30%, rgba(255,255,255,0.06), transparent 60%); box-sizing: border-box; } /* Name (h3) - orange/gold color, smaller */ .grid-bio-block-name { color: var(--gold); font-size: calc(28px * var(--s)); font-weight: 400; line-height: 1.2; margin: 0 0 calc(8px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } /* Job Title (p) - orange/gold color, slightly smaller than name */ .grid-bio-block-position { font-size: calc(18px * var(--s)); font-weight: 400; color: var(--gold); line-height: 1.3; margin: 0 0 calc(16px * var(--s)) 0; } /* Bio (p) - white text, smaller white text */ .grid-bio-block-bio { font-size: calc(14px * var(--s)); font-weight: 400; color: #F1EDE3; line-height: 1.5; margin: 0; } /* Block Preview in Edit Mode - Grid Bio Block */ .ccm-block-preview .grid-bio-block { min-height: 200px; height: 200px !important; display: flex; flex-direction: row; /* Reset sizing for preview mode - always use 100% width/200px height */ width: 100% !important; box-sizing: border-box; } /* Override border adjustments in preview mode */ .ccm-block-preview .grid-bio-block.has-image { width: 100% !important; height: 200px !important; } /* Grid Content Two Column Block */ .grid-content-two-block { max-width: 100%; width: 100%; height: auto; display: flex; flex-direction: row; padding: var(--pad); position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; box-sizing: border-box; gap: var(--pad); overflow: visible; /* Expansion behavior (flex: none, align-self: flex-start) is inherited from universal rule */ } /* When block has background (color or image), inset it to preserve grid borders */ /* Use width reduction and margin for proper inset and centering */ /* Expansion behavior (flex: none, align-self: flex-start) is inherited from base rule */ .grid-content-two-block.has-background-color, .grid-content-two-block.has-background-image { width: calc(100% - var(--stroke)); height: auto; min-height: calc(100% - var(--stroke)); margin-left: calc(var(--stroke) / 2); margin-right: calc(var(--stroke) / 2); margin-top: calc(var(--stroke) / 2); margin-bottom: calc(var(--stroke) / 2); } /* Half height variant - allows two blocks in one panel */ .grid-content-two-block.half-height { min-height: calc(var(--cell) / 2); } /* Half height with background - inset adjustments only */ /* Expansion behavior (flex: none, align-self: flex-start) is inherited from base rule */ .grid-content-two-block.half-height.has-background-color, .grid-content-two-block.half-height.has-background-image { min-height: calc((var(--cell) / 2) - var(--stroke)); height: auto; margin-top: 0; margin-bottom: 0; } /* Two column container */ .grid-content-two-columns { width: 100%; height: auto; display: flex; flex-direction: row; gap: var(--pad); overflow: visible; align-items: stretch; } /* Individual column */ .grid-content-two-column { flex: 1; width: 50%; height: auto; display: flex; flex-direction: column; overflow: visible; align-items: stretch; } /* Column section (content + button) */ .grid-content-two-section { width: 100%; height: auto; display: flex; flex-direction: column; min-height: 0; overflow: visible; } .grid-content-two-section.no-button { justify-content: flex-start; } /* Content area */ .grid-content-two-content { width: 100%; flex: 0 1 auto; min-height: 0; overflow: visible; } /* Standard h2 styling within grid-content-two-content */ .grid-content-two-content h2 { color: var(--gold); font-size: calc(41px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(18px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } .grid-content-two-content h3 { color: var(--gold); font-size: calc(26px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(18px * var(--s)) 0; font-family: "Inria Sans", Roboto, Arial, sans-serif; margin-bottom: 0.3em !important; } /* Standard p styling within grid-content-two-content */ .grid-content-two-content p { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.55; margin: 0 0 calc(24px * var(--s)) 0; max-width: 60ch; } .grid-content-two-content p:last-of-type { margin-bottom: 0; } /* Standard ul li styling within grid-content-two-content - match p font-size */ .grid-content-two-content ul li { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.55; } /* Button - always bottom left */ .grid-content-two-button { align-self: flex-start; margin-top: auto; } .grid-content-two-button .btn { padding: calc(16px * var(--s)) calc(19px * var(--s)); background: var(--cta); font-size: calc(16px * var(--s)); font-weight: 400; color: #f1ede3; text-transform: uppercase; text-decoration: none; display: inline-block; letter-spacing: calc(2px * var(--s)); font-weight: bold; border: none; cursor: pointer; transition: background-color 0.3s ease; } .grid-content-two-button .btn:hover { background: var(--cta-hover, var(--cta)); opacity: 0.9; } /* Block Preview in Edit Mode - Grid Content Two Column Block */ .ccm-block-preview .grid-content-two-block { min-height: 400px; height: 400px; display: flex; flex-direction: row; /* Reset sizing for preview mode - always use 100% width/height */ width: 100% !important; height: 400px !important; box-sizing: border-box; } .ccm-block-preview .grid-content-two-block.half-height { min-height: 200px; height: 200px !important; } /* Override background adjustments in preview mode */ .ccm-block-preview .grid-content-two-block.has-background-color, .ccm-block-preview .grid-content-two-block.has-background-image { width: 100% !important; height: 400px !important; } .ccm-block-preview .grid-content-two-block.has-background-color.half-height, .ccm-block-preview .grid-content-two-block.has-background-image.half-height { height: 200px !important; } .ccm-block-preview .grid-content-two-columns { height: 100%; flex: 1; display: flex; flex-direction: row; min-height: 0; } /* Grid Testimonials Block */ .grid-testimonials-block { max-width: 100%; width: 100%; height: auto; min-height: 0; padding: var(--pad); position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: visible; } /* Half height variant - default */ /* Use fixed min-height based on cell size instead of percentage for better expansion behavior */ .grid-testimonials-block.half-height { height: auto; min-height: 0; flex-shrink: 0; } .grid-testimonials-slider { width: 100%; height: auto; min-height: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; overflow: visible; } .grid-testimonials-slides { width: 100%; height: auto; /* Changed from fixed 200px to auto to allow expansion */ min-height: 200px; /* Keep minimum height */ position: relative; overflow: visible; flex: 0 1 auto; order: 1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; transition: transform 400ms ease-in-out; will-change: transform; } .grid-testimonials-slide { width: 100%; height: auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: var(--pad); box-sizing: border-box; position: relative; flex: 0 0 100%; min-width: 100%; opacity: 0; transition: opacity 400ms ease-in-out; pointer-events: none; } .grid-testimonials-slide.is-active { opacity: 1; pointer-events: auto; } /* Testimonial avatar (Express variant uses this) */ .grid-testimonials-avatar { width: calc(100px * var(--s)); height: calc(100px * var(--s)); border-radius: 50%; overflow: hidden; margin: calc(12px * var(--s)) auto calc(10px * var(--s)); flex-shrink: 0; display: block; } .grid-testimonials-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .grid-testimonials-region { font-style: normal; } /* Rating stars - centered */ .grid-testimonials-rating { display: flex; margin-bottom: calc(18px * var(--s)); justify-content: center; align-items: center; flex-shrink: 0; } .grid-testimonials-rating .star { display: inline-flex; align-items: center; justify-content: center; width: calc(20px * var(--s)); height: calc(20px * var(--s)); color: #F1EDE3; margin-right: calc(4px * var(--s)); } .grid-testimonials-rating .star:last-child { margin-right: 0; } .grid-testimonials-rating .star svg { width: 100%; height: 100%; } .grid-testimonials-rating .star.star-filled svg path[fill] { fill: var(--gold); } .grid-testimonials-rating .star.star-empty { color: rgba(186, 163, 86, 0.3); } .grid-testimonials-rating .star.star-empty svg path[fill] { fill: none; } /* Testimonial text - white, italic, centered */ .grid-testimonials-text { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: #F1EDE3; line-height: 1.6; text-align: center; margin-bottom: calc(12px * var(--s)); font-style: italic; flex-shrink: 0; } .grid-testimonials-text p { margin: 0; color: #F1EDE3; font-style: italic; } .grid-testimonials-text p:last-child { margin-bottom: 0; } /* Attribution - white, centered, not italic, directly below testimonial */ .grid-testimonials-attribution { font-size: calc(16px * var(--s)); font-weight: 400; color: #F1EDE3; text-align: center; font-style: normal; margin-top: 0; margin-bottom: 0; flex-shrink: 0; } /* Navigation arrows */ .grid-testimonials-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.8); border: 1px solid #ddd; border-radius: 50%; width: calc(40px * var(--s)); height: calc(40px * var(--s)); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background-color 0.3s ease, border-color 0.3s ease; padding: 0; } .grid-testimonials-arrow:hover { background: rgba(255, 255, 255, 1); border-color: var(--gold); } .grid-testimonials-arrow svg { width: calc(20px * var(--s)); height: calc(20px * var(--s)); color: var(--text); } /* Express variant: use grid_arrow asset + align lower near avatar/attribution */ .grid-testimonials-express .grid-testimonials-arrow { top: auto; transform: none; bottom: calc(var(--pad) + (70px * var(--s))); background: transparent; border: none; border-radius: 0; width: auto; height: auto; padding: 0; } .grid-testimonials-express .grid-testimonials-arrow:hover { background: transparent; border-color: transparent; } .grid-testimonials-express .grid-testimonials-arrow .arrow-icon { width: calc(30px * var(--s)); height: calc(30px * var(--s)); max-width: calc(30px * var(--s)); max-height: calc(30px * var(--s)); object-fit: contain; transition: transform 0.3s ease; } /* Rotate the "down" arrow asset to become left/right */ .grid-testimonials-express .grid-testimonials-prev .arrow-icon { transform: rotate(90deg); } .grid-testimonials-express .grid-testimonials-next .arrow-icon { transform: rotate(-90deg); } .grid-testimonials-prev { left: calc(10px * var(--s)); } .grid-testimonials-next { right: calc(10px * var(--s)); } /* Dots navigation - hidden */ .grid-testimonials-dots { display: none; justify-content: center; gap: calc(8px * var(--s)); margin-top: calc(16px * var(--s)); flex-shrink: 0; order: 2; flex: 0 0 auto; } .grid-testimonials-dot { width: calc(10px * var(--s)); height: calc(10px * var(--s)); border-radius: 50%; border: 2px solid var(--gold); background: transparent; cursor: pointer; padding: 0; transition: background-color 0.3s ease; } .grid-testimonials-dot:hover { background: rgba(255, 193, 7, 0.5); } .grid-testimonials-dot.active { background: var(--gold); } /* Placeholder */ .grid-testimonials-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999; font-size: calc(16px * var(--s)); } /* Grid FAQ Block */ .grid-faq-block { max-width: 100%; width: 100%; height: 100%; padding: var(--pad); position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; /* Ensure overlays are positioned relative to this block */ } /* When block has background (color or image), inset it to preserve grid borders */ .grid-faq-block.has-background-color, .grid-faq-block.has-background-image { width: calc(100% - var(--stroke)); height: calc(100% - var(--stroke)); } /* Block title (h2) */ .grid-faq-title { color: var(--gold); font-size: calc(42px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(24px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } /* FAQ list */ .grid-faq-list { width: 100%; flex: 1; display: flex; flex-direction: column; gap: calc(12px * var(--s)); overflow-y: auto; } /* FAQ item */ .grid-faq-item { position: relative; width: 100%; } /* FAQ question button */ .grid-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: calc(16px * var(--s)) calc(20px * var(--s)); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; color: var(--text); font-size: calc(18px * var(--s)); font-weight: 400; text-align: left; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; } .grid-faq-question:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--gold); } .grid-faq-question-text { flex: 1; margin-right: calc(12px * var(--s)); } /* FAQ icon (plus/minus) */ .grid-faq-icon { display: flex; align-items: center; justify-content: center; width: calc(24px * var(--s)); height: calc(24px * var(--s)); color: var(--gold); transition: transform 0.3s ease; flex-shrink: 0; } .grid-faq-question[aria-expanded="true"] .grid-faq-icon { transform: rotate(45deg); } .grid-faq-icon svg { width: 100%; height: 100%; } /* FAQ overlay - covers entire block area */ .grid-faq-block .grid-faq-overlay { position: absolute; top: 0; left: 0; width: calc(100% - var(--stroke)); height: calc(100% - var(--stroke)); min-height: calc(100% - var(--stroke)); z-index: 100; display: flex; flex-direction: column; padding: var(--pad); box-sizing: border-box; /* Background color will be set inline from block's backgroundColor */ /* backdrop-filter will blur content behind this overlay */ /* Ensure backdrop-filter works by creating proper stacking context */ transform: translateZ(0); -webkit-transform: translateZ(0); overflow-y: auto; } /* When overlay is visible, allow it to expand beyond fixed height */ .grid-faq-block .grid-faq-overlay.is-visible { height: auto; min-height: calc(100% - var(--stroke)); } /* Close button - aligned with title on the right */ .grid-faq-close { position: absolute; top: calc(var(--pad) + 9px * var(--s)); right: calc(38px * var(--s)); width: calc(40px * var(--s)); height: calc(40px * var(--s)); background: none; border: none; color: var(--gold); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(calc(30px * var(--s))); transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s, color 0.2s ease; z-index: 101; } .grid-faq-overlay.is-visible .grid-faq-close { opacity: 1; transform: translateY(0); } .grid-faq-overlay:not(.is-visible) .grid-faq-close { opacity: 0; transform: translateY(calc(30px * var(--s))); transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease; } .grid-faq-close:hover { color: var(--gold); opacity: 0.8; } .grid-faq-close svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; } /* Overlay content - centered vertically */ .grid-faq-overlay-content { width: 100%; max-width: 800px; margin: auto; margin-top: calc(var(--pad) * 1.5); margin-bottom: calc(var(--pad) * 0.5); display: flex; flex-direction: column; color: var(--text); position: relative; justify-content: center; } /* Overlay question */ .grid-faq-overlay-question { color: var(--gold); font-size: calc(36px * var(--s)); font-weight: 400; line-height: 1.2; margin: 0 0 calc(32px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; flex-shrink: 0; } /* Overlay answer */ .grid-faq-overlay-answer { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.6; text-align: left; flex: 1; overflow-y: auto; } .grid-faq-overlay-answer p { margin: 0 0 calc(16px * var(--s)) 0; color: var(--text); } .grid-faq-overlay-answer p:last-child { margin-bottom: 0; } /* Placeholder */ .grid-faq-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.1); color: var(--text); font-size: calc(16px * var(--s)); } /* Block Preview in Edit Mode - Grid FAQ Block */ .ccm-block-preview .grid-faq-block { min-height: 400px; height: 400px; display: flex; flex-direction: column; width: 100% !important; height: 400px !important; box-sizing: border-box; } .ccm-block-preview .grid-faq-block.has-background-color, .ccm-block-preview .grid-faq-block.has-background-image { width: 100% !important; height: 400px !important; } /* Grid Showmore Block */ .grid-showmore-block { width: 100%; height: auto; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: visible; cursor: pointer; box-sizing: border-box; } /* Remove pointer cursor when read more is disabled */ .grid-showmore-block[data-enable-readmore="0"] { cursor: default; } /* When block has background, inset it to preserve grid borders */ .grid-showmore-block.has-background-color { width: calc(100% - var(--stroke)); height: calc(100% - var(--stroke)); } /* Upper Half: Image */ .grid-showmore-image { width: 100%; height: auto; min-height: calc(var(--cell) / 2); flex: 0 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; } .grid-showmore-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .grid-showmore-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.1); color: var(--text); font-size: calc(14px * var(--s)); opacity: 0.6; } /* Lower Half: Content */ .grid-showmore-content { width: 100%; height: auto; min-height: calc(var(--cell) / 2); flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: flex-start; padding: var(--pad); padding-top: calc(var(--pad) / 2); box-sizing: border-box; } .grid-showmore-content-inner { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; } /* Heading */ .grid-showmore-heading { color: var(--gold); font-size: calc(41px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(12px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } .grid-showmore-heading:empty { display: none; } /* Subheading */ .grid-showmore-subheading { color: var(--gold); font-size: calc(20px * var(--s)); font-weight: 700; line-height: 1.3; margin: 0 0 calc(16px * var(--s)) 0; font-family: "Inria Sans", sans-serif, Roboto, Arial, sans-serif; } .grid-showmore-subheading:empty { display: none; } .grid-showmore-text { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.55; margin: 0; /* Limit to approximately 2 lines */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* When read more is disabled, show full content without truncation */ .grid-showmore-text.no-truncate { display: block; overflow: visible; -webkit-line-clamp: initial; line-clamp: initial; -webkit-box-orient: initial; text-overflow: initial; } .grid-showmore-readmore { margin-top: calc(12px * var(--s)); } .grid-showmore-readmore-link { font-size: calc(16px * var(--s)); color: var(--gold); text-decoration: none; font-weight: 400; transition: opacity 0.3s ease; } .grid-showmore-readmore-link:hover { opacity: 0.8; } /* Icon with Position */ .grid-showmore-icon { position: absolute; z-index: 110; pointer-events: auto; } .grid-showmore-icon-top-left { top: var(--pad); left: var(--pad); } .grid-showmore-icon-top-right { top: var(--pad); right: var(--pad); } .grid-showmore-icon-bottom-left { bottom: var(--pad); left: var(--pad); } .grid-showmore-icon-bottom-right { bottom: var(--pad); right: var(--pad); } .grid-showmore-icon img, .grid-showmore-icon-svg { width: calc(40px * var(--s)); height: calc(40px * var(--s)); display: block; } .grid-showmore-icon-svg svg { width: 100%; height: 100%; fill: currentColor; color: var(--gold); } .grid-showmore-icon-link { display: block; text-decoration: none; transition: opacity 0.3s ease; } .grid-showmore-icon-link:hover { opacity: 0.8; } /* Overlay (Full 700x700 Panel) */ .grid-showmore-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--pad); box-sizing: border-box; opacity: 0; transition: opacity 0.3s ease; } .grid-showmore-overlay.is-visible { opacity: 1; } .grid-showmore-overlay-content { width: 100%; max-width: 90%; max-height: 90%; display: flex; flex-direction: column; position: relative; z-index: 101; overflow-y: auto; cursor: pointer; pointer-events: auto; } .grid-showmore-overlay-content a { pointer-events: auto; cursor: pointer; } /* Overlay Heading */ .grid-showmore-overlay-heading { color: var(--gold); font-size: calc(41px * var(--s)); font-weight: 400; line-height: 1.15; margin: 0 0 calc(12px * var(--s)) 0; font-family: "Inria Serif", serif, Roboto, Arial, sans-serif; } .grid-showmore-overlay-heading:empty { display: none; } /* Overlay Subheading */ .grid-showmore-overlay-subheading { color: var(--gold); font-size: calc(20px * var(--s)); font-weight: 700; line-height: 1.3; margin: 0 0 calc(16px * var(--s)) 0; font-family: "Inria Sans", sans-serif, Roboto, Arial, sans-serif; } .grid-showmore-overlay-subheading:empty { display: none; } .grid-showmore-overlay-text { font-size: calc(18px * var(--s)); font-weight: var(--font-weight-text); color: var(--text); line-height: 1.6; margin: 0; } .grid-showmore-overlay-text p { margin: 0 0 calc(16px * var(--s)) 0; color: var(--text); } .grid-showmore-overlay-text p:last-child { margin-bottom: 0; } /* Block Preview in Edit Mode - Grid Showmore Block */ .ccm-block-preview .grid-showmore-block { min-height: 400px; height: 400px; display: flex; flex-direction: column; width: 100% !important; height: 400px !important; box-sizing: border-box; } .ccm-block-preview .grid-showmore-block.has-background-color { width: 100% !important; height: 400px !important; } /* Block Preview in Edit Mode - Grid Testimonials Block */ .ccm-block-preview .grid-testimonials-block { min-height: 400px; height: 400px; display: flex; flex-direction: column; width: 100% !important; height: 400px !important; box-sizing: border-box; } .ccm-block-preview .grid-testimonials-block.half-height { min-height: 200px; height: 200px !important; } .schedule-call-btn { padding: calc(12px * var(--s)) calc(28px * var(--s)); background: transparent; color: #e52e00; font-weight: 600; letter-spacing: calc(1px * var(--s)); cursor: pointer; } /* Bottom Footer Content */ .bottom-section { display: flex; justify-content: space-between; align-items: flex-end; height: 100%; } /* Copyright and footer menu styles are defined above in footer section */ /* Footer Social Icons */ .panel.footer-panel-right a img { width: calc(45px * var(--s)); height: calc(45px * var(--s)); transition: opacity 0.2s ease; } .panel.footer-panel-right a img:hover { opacity: 0.7; } @media (max-width: 767px) { :root { /* Increase text sizes by 60% at mobile */ --text-multiplier: 1.6; } /* Apply text size increase to all text elements using calc() with var(--s) */ .nav ul { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .footer-navigation ul li a { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .footer-legal-links { font-size: calc(20px * var(--s)) !important; } .copyright-section, .copyright-section span, .copyright-section a { font-size: calc(20px * var(--s)) !important; color: #777777 !important; } .brand-name { font-size: calc(22px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-content h1 { font-size: calc(46px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-content h2 { font-size: calc(36px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-content h3 { font-size: calc(26px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-content p { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-content p.intro { font-size: calc(24px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-content ul li { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-content-two-content ul { padding-left: 0 !important; margin-left: 0 !important; list-style-position: outside; } .grid-content-two-content ul li { font-size: calc(16px * var(--s) * var(--text-multiplier)) !important; padding-left: 0 !important; margin-left: 0 !important; padding-bottom: calc(8px * var(--s)) !important; } /* Grid Testimonials Block - Allow expansion on mobile */ .grid-testimonials-block { height: auto !important; min-height: 0 !important; overflow: visible; display: flex !important; flex-direction: column !important; } .grid-testimonials-block.half-height { height: auto !important; min-height: 0 !important; } .grid-testimonials-slider { height: auto !important; min-height: 0 !important; flex: 0 1 auto !important; justify-content: flex-start !important; align-items: stretch !important; display: flex !important; flex-direction: column !important; } .grid-testimonials-slides { /* Use flex track on mobile too (do NOT stack slides vertically) */ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; overflow: visible !important; flex: 0 1 auto !important; order: 1; position: relative !important; width: 100% !important; } /* Slides are flex items in the track */ .grid-testimonials-slide { height: auto; min-height: 0; flex-direction: column; padding: var(--pad); box-sizing: border-box; flex: 0 0 100%; min-width: 100%; } .grid-testimonials-dots { display: none !important; } /* Grid Testimonials text */ .grid-testimonials-text, .grid-testimonials-text p { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-testimonials-attribution { font-size: calc(16px * var(--s) * var(--text-multiplier)) !important; } /* Grid FAQ text */ .grid-faq-question { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-faq-question-text { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-faq-overlay-question { font-size: calc(36px * var(--s) * var(--text-multiplier)) !important; } .grid-faq-overlay-answer, .grid-faq-overlay-answer p { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } /* Buttons */ .grid-content-block-button .btn { font-size: calc(16px * var(--s) * var(--text-multiplier)) !important; } .grid-content-two-button .btn { font-size: calc(16px * var(--s) * var(--text-multiplier)) !important; } /* Directive text */ .grid-content-block-directive p { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-directive h1 { font-size: calc(60px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-directive h2 { font-size: calc(42px * var(--s) * var(--text-multiplier)) !important; } .grid-content-block-directive h3 { font-size: calc(26px * var(--s) * var(--text-multiplier)) !important; } /* Grid Action margin when button is at bottom */ .grid-content-block-section.button-bottom-left .grid-action, .grid-content-block-section.button-bottom-right .grid-action { margin-top: calc(36px * var(--s) * var(--text-multiplier)) !important; } /* Grid Content Two Content */ .grid-content-two-content h2 { font-size: calc(41px * var(--s) * var(--text-multiplier)) !important; } .grid-content-two-content p { font-size: calc(16px * var(--s) * var(--text-multiplier)) !important; } /* Grid Showmore Block */ .grid-showmore-heading { font-size: calc(34px * var(--s) * var(--text-multiplier)) !important; } .grid-showmore-subheading { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-showmore-text, .grid-showmore-text p { font-size: calc(16px * var(--s) * var(--text-multiplier)) !important; margin-top: 0; } .grid-showmore-icon img, .grid-showmore-icon-svg { width: calc(50px * var(--s)); height: calc(50px * var(--s)); } .grid-showmore-readmore-link { font-size: calc(24px * var(--s)); } .grid-showmore-overlay-heading { font-size: calc(34px * var(--s) * var(--text-multiplier)) !important; } .grid-showmore-overlay-subheading { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-showmore-overlay-text, .grid-showmore-overlay-text p { font-size: calc(14px * var(--s) * var(--text-multiplier)) !important; } /* Grid Bio Block */ .grid-bio-block-name { font-size: calc(28px * var(--s) * var(--text-multiplier)) !important; } .grid-bio-block-position { font-size: calc(18px * var(--s) * var(--text-multiplier)) !important; } .grid-bio-block-bio { font-size: calc(14px * var(--s) * var(--text-multiplier)) !important; } /* Increase base body text size */ body { font-size: calc(1em * var(--text-multiplier)); } /* Ensure arrow icon scales properly at this breakpoint */ .grid-arrow-block-arrow img, .grid-arrow-block-arrow svg { width: calc(40px * var(--s)) !important; height: calc(40px * var(--s)) !important; max-width: calc(40px * var(--s)) !important; max-height: calc(40px * var(--s)) !important; } } @media (max-width: 1000px) { /* Logo scaling handled by --s variable, no fixed breakpoint needed */ .person-panel-section .headline { font-size: 24px; margin: 12px 0; } .person-img-section .person-section .person-info .description { font-size: 12px; margin: 5px 0; } .person-img-section .person-section .person-info .position { margin-bottom: 5px; } .person-img-section .person-section .person-info .name { margin: 4px 0; } } /* ===== NEW ROW-BASED STRUCTURE (iOS Compatible - Uses Positioning, Not Transform) ===== */ /* Main wrapper - contains content rows only */ .main-wrapper { position: relative; width: 100%; min-height: 100vh; background: var(--bg); background-image: url('../images/background-home-092e4f.webp'), radial-gradient( 1200px 700px at 65% 35%, rgba(255, 255, 255, 0.06), transparent 60% ), radial-gradient( 900px 600px at 25% 75%, rgba(255, 255, 255, 0.05), transparent 55% ); background-position: center center, center center, center center; background-size: cover, auto, auto; background-repeat: no-repeat, no-repeat, no-repeat; background-attachment: fixed, scroll, scroll; } /* Remove min-height for single-row templates - footer should follow immediately */ .main-wrapper:has(.row-container:only-child) { min-height: auto; } /* Ensure no margin between last row-container and footer */ .main-wrapper .row-container:last-child { margin-bottom: 0; } /* Ensure footer has no top margin */ footer.row-footer { margin-top: 0; } /* Row Container - 100% width wrapper for each row */ .row-container { width: 100%; position: relative; overflow: visible; } /* Header Row - 100% width container, body background, can be sticky */ header.row-header { width: 100%; position: sticky; top: 0; z-index: 10001; /* Body background */ background: var(--bg); background-image: url('../images/background-home-092e4f.webp'), radial-gradient( 1200px 700px at 65% 35%, rgba(255, 255, 255, 0.06), transparent 60% ), radial-gradient( 900px 600px at 25% 75%, rgba(255, 255, 255, 0.05), transparent 55% ); background-position: center center, center center, center center; background-size: cover, auto, auto; background-repeat: no-repeat, no-repeat, no-repeat; background-attachment: fixed, scroll, scroll; } #ccm-inline-toolbar-container { z-index: 10003; } html.ccm-toolbar-visible .ui-dialog { z-index: 20001; } /* Disable sticky header in edit mode */ .ccm-edit-mode header.row-header, body.ccm-edit-mode header.row-header { position: relative; top: auto; } .header-row-border { width: 100%; height: var(--stroke); background: var(--line); position: sticky; top: var(--topVisible); /* z-index: 10002; */ } /* Disable sticky border in edit mode */ .ccm-edit-mode .header-row-border, body.ccm-edit-mode .header-row-border { position: relative; top: auto; } /* Edit mode header behavior: Keep header non-sticky, but preserve normal height and keep nav visible/positioned. */ .ccm-edit-mode header.row-header { height: var(--topVisible); } .ccm-edit-mode header.row-header .row { min-height: var(--topVisible); } @media (max-width: 899px) { /* In edit mode, show the normal desktop nav (no hamburger overlay) */ .ccm-edit-mode header.row-header .col.header-nav .header-nav-content { display: block !important; } .ccm-edit-mode header.row-header .col.col-d.header-col-d { display: none !important; } .ccm-edit-mode header.row-header .header-logo-mobile { display: none !important; } .ccm-edit-mode header.row-header .col.header-logo .brand, .ccm-edit-mode header.row-header .col.header-logo img { display: flex !important; } .ccm-edit-mode header.row-header .header-nav-mobile-overlay { display: none !important; } } /* Individual Row - 3 columns, each 700px wide, positioned horizontally - Scoped to frontend only */ .ccm-page .row { display: grid; grid-template-columns: var(--cell) var(--cell) var(--cell); grid-template-rows: auto; gap: 0; width: calc(3 * var(--cell)); min-height: var(--cell); height: auto; position: relative; /* Position horizontally - adjustable via --nudgeX and --shiftX in inspector */ /* Use shiftX for base centering, then add nudgeX for fine-tuning */ margin-left: calc(var(--shiftX) + var(--nudgeX)); margin-right: auto; /* Ensure columns stay in same row - no wrapping */ grid-auto-flow: row; /* Allow rows to expand based on content */ grid-auto-rows: auto; align-items: stretch; } /* Column base styles - each exactly 700px wide (scaled) */ .col { position: relative; width: var(--cell); min-width: var(--cell); max-width: var(--cell); min-height: var(--cell); height: auto; max-height: none; overflow: visible; display: flex; flex-direction: column; /* Borders on ALL sides including outside edges */ border-top: var(--stroke) solid var(--line); border-right: var(--stroke) solid var(--line); border-bottom: var(--stroke) solid var(--line); border-left: var(--stroke) solid var(--line); box-sizing: border-box; /* Prevent shrinking or growing */ flex-shrink: 0; flex-grow: 0; /* Allow column to expand based on content */ align-self: stretch; /* Ensure flex children can push column open */ align-items: stretch; } /* Header row specific styling */ .ccm-page header.row-header .row { min-height: var(--topVisible); } header.row-header .col { min-height: var(--topVisible); } /* Header column specific positioning */ header.row-header .col.header-logo { grid-column: 1; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: calc(30px * var(--s)); padding-bottom: calc(30px * var(--s)); } header.row-header .col.header-nav { grid-column: 3; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-left: var(--edgeInset); padding-bottom: calc(16px * var(--s)); /* Nav nudge - adjust --navNudge0 in inspector to shift nav left/right */ position: relative; } /* Apply nav nudge to Area content and nav elements */ /* Target the Area wrapper and any nav elements inside */ header.row-header .col.header-nav .header-nav-content .ccm-area, header.row-header .col.header-nav .header-nav-content nav, header.row-header .col.header-nav .header-nav-content .ccm-area nav, header.row-header .col.header-nav .header-nav-content nav.ccm-responsive-navigation { position: relative; transform: translateX(var(--navNudge)); will-change: transform; } /* Hide mobile logo/overlay at desktop (900px and above) */ @media (min-width: 900px) { header.row-header .header-logo-mobile { display: none; } } /* Hamburger menu activation at 899px and below - in column d */ @media (max-width: 899px) { /* Hide nav content in column e */ header.row-header .col.header-nav .header-nav-content { display: none !important; } /* Show column d with logo left and hamburger right (same as 767px) */ header.row-header .col.col-d.header-col-d { display: flex !important; flex-direction: row; justify-content: space-between; align-items: flex-start; padding-top: var(--pad); padding-left: var(--pad); padding-right: var(--pad); padding-bottom: calc(20px * var(--s)); } /* Hide desktop logo in column c when mobile logo is shown */ header.row-header .col.header-logo .brand, header.row-header .col.header-logo img { display: none !important; } /* Show mobile logo at 899px (same as 767px) */ header.row-header .header-logo-mobile { display: flex !important; justify-content: flex-start; align-items: flex-start; z-index: 10001 !important; position: relative; } /* Ensure logo stays visible when overlay is open */ body.menu-open header.row-header .header-logo-mobile { z-index: 10001 !important; } /* Show hamburger menu in column d - positioned upper right, vertically centered */ header.row-header .col.header-col-d .hamburger-menu { display: flex !important; flex-direction: column; justify-content: center; align-items: center; width: calc(88px * var(--s)); height: calc(88px * var(--s)); background: none; border: none; cursor: pointer; z-index: 10002; position: relative; padding: 0; margin: 0; flex-shrink: 0; margin-top: 0; } header.row-header .col.header-col-d .hamburger-menu span { display: block; width: calc(48px * var(--s)); height: calc(4px * var(--s)); margin: 0; background: var(--gold); border-radius: calc(2px * var(--s)); transition: all 0.3s ease; transform-origin: center center; position: absolute; left: 50%; margin-left: calc(-24px * var(--s)); } /* Position spans vertically centered within hamburger button */ header.row-header .col.header-col-d .hamburger-menu span:nth-child(1) { top: calc(28px * var(--s)); } header.row-header .col.header-col-d .hamburger-menu span:nth-child(2) { top: calc(42px * var(--s)); } header.row-header .col.header-col-d .hamburger-menu span:nth-child(3) { top: calc(56px * var(--s)); } /* Animate hamburger to X when menu is open - keep exact same position */ body.menu-open header.row-header .col.header-col-d .hamburger-menu span:nth-child(1) { top: calc(42px * var(--s)); transform: rotate(45deg); } body.menu-open header.row-header .col.header-col-d .hamburger-menu span:nth-child(2) { opacity: 0; transform: scaleX(0); } body.menu-open header.row-header .col.header-col-d .hamburger-menu span:nth-child(3) { top: calc(42px * var(--s)); transform: rotate(-45deg); } /* Navigation overlay - full screen but keeps logo visible */ header.row-header .header-nav-mobile-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: var(--bg); background-image: url('../images/background-home-092e4f.webp'), radial-gradient(1200px 700px at 65% 35%, rgba(255, 255, 255, 0.06), transparent 60%), radial-gradient(900px 600px at 25% 75%, rgba(255, 255, 255, 0.05), transparent 55%); background-position: center center, center center, center center; background-size: cover, auto, auto; background-repeat: no-repeat, no-repeat, no-repeat; background-attachment: fixed, scroll, scroll; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; z-index: 10000; display: flex; flex-direction: column; padding-top: calc(var(--pad) * 3); padding-left: var(--pad); padding-right: var(--pad); padding-bottom: var(--pad); overflow-y: auto; pointer-events: none; } /* Hide hamburger menu inside overlay - it should only be in the header */ header.row-header .header-nav-mobile-overlay .hamburger-menu, header.row-header .header-nav-mobile .hamburger-menu, header.row-header .header-nav-mobile-overlay nav .hamburger-menu { display: none !important; visibility: hidden !important; } /* Hide ccm-responsive-menu-launch (close icon) inside overlay - hide everywhere in overlay */ header.row-header .header-nav-mobile-overlay .ccm-responsive-menu-launch, header.row-header .header-nav-mobile-overlay .close-menu, header.row-header .header-nav-mobile .ccm-responsive-menu-launch, header.row-header .header-nav-mobile .close-menu, header.row-header .header-nav-mobile-overlay nav .ccm-responsive-menu-launch, header.row-header .header-nav-mobile-overlay nav .close-menu, header.row-header .header-nav-mobile-overlay .ccm-area .ccm-responsive-menu-launch, header.row-header .header-nav-mobile-overlay .ccm-area .close-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; } header.row-header .header-nav-mobile-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; } /* Navigation content inside overlay */ header.row-header .header-nav-mobile { display: flex !important; flex-direction: column; width: 100%; margin-top: calc(var(--pad) * 2); } /* Navigation list styling */ header.row-header .header-nav-mobile nav ul { display: flex !important; flex-direction: column !important; gap: calc(var(--pad) * 0.5) !important; font-size: calc(42px * var(--s)) !important; letter-spacing: calc(2px * var(--s)) !important; text-transform: uppercase !important; text-align: center !important; list-style: none !important; padding: 0 !important; margin: 0 auto !important; width: 100% !important; align-items: center !important; } header.row-header .header-nav-mobile nav ul li { display: block !important; width: auto !important; text-align: center !important; } header.row-header .header-nav-mobile nav ul li a { color: var(--gold) !important; text-decoration: none !important; display: block !important; padding: calc(var(--pad) * 0.25) !important; transition: color 0.2s ease !important; text-align: center !important; } header.row-header .header-nav-mobile nav ul li a:hover, header.row-header .header-nav-mobile nav ul li.active a { color: var(--text) !important; } /* Prevent body scroll when menu is open */ body.menu-open { overflow: hidden !important; height: 100vh; } } /* Phone-landscape should use the SAME layout as mobile portrait (but only on mobile devices). iPhone landscape can exceed 899px width (e.g. ~932px), so use feature queries instead of width alone. */ @media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 932px) { /* When not in edit mode we use a fixed header; don't also offset the whole page */ html.ccm-toolbar-visible .ccm-page:not(.ccm-edit-mode) { margin-top: 0; } /* Fixed header in this mode (same as portrait mobile) */ .ccm-page:not(.ccm-edit-mode) header.row-header { position: fixed; top: var(--adminBar, 0px); left: 0; right: 0; width: 100%; } .ccm-page:not(.ccm-edit-mode) .main-wrapper { padding-top: calc(var(--adminBar, 0px) + var(--headerHeight, var(--topVisible)) + var(--stroke) - 2px); } /* Force the SAME single-column layout as mobile portrait */ .ccm-page .row { margin-left: 0 !important; margin-right: 0 !important; width: 100%; max-width: 100%; grid-template-columns: 1fr; min-height: 0; } .ccm-page .row .col.col-c, .ccm-page .row .col.col-e { display: none !important; } .ccm-page .row .col.col-d { width: 100%; min-width: 100%; max-width: 100%; border-right: none; border-left: none; } /* Header: hide c/e, show only d (logo + hamburger) */ header.row-header .col.col-c, header.row-header .col.col-e { display: none !important; } header.row-header .col.header-nav .header-nav-content { display: none !important; } .ccm-page header.row-header .row { grid-template-columns: 1fr; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } header.row-header .col.col-d { display: flex !important; flex-direction: column; justify-content: space-between; width: 100%; min-width: 100%; max-width: 100%; border-right: none; border-left: none; } header.row-header .col.col-d.header-col-d { display: flex !important; flex-direction: row; justify-content: space-between; align-items: flex-start; padding-top: var(--pad); padding-left: var(--pad); padding-right: var(--pad); padding-bottom: calc(20px * var(--s)); } header.row-header .header-logo-mobile { display: flex !important; } /* Ensure the mobile nav overlay is truly full-screen in this mode */ header.row-header .header-nav-mobile-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; } } /* Show nav content and hide hamburger at desktop (900px and above) */ @media (min-width: 900px) { header.row-header .col.header-nav .header-nav-content { display: block; } /* Hide any hamburger buttons inside header-nav-content at desktop */ header.row-header .col.header-nav .header-nav-content .hamburger-menu, header.row-header .col.header-nav .header-nav-content button.hamburger-menu { display: none !important; } header.row-header .col.header-col-d .hamburger-menu { display: none !important; } /* Keep the middle header column (col-d) present so its borders/gridlines render, but hide its contents (logo/hamburger/overlay) on desktop. */ header.row-header .col.header-col-d { display: flex !important; grid-column: 2; } header.row-header .col.header-col-d > * { display: none !important; } /* Ensure header-nav-content and its children have transparent background */ header.row-header .col.header-nav .header-nav-content { background: transparent !important; } header.row-header .col.header-nav .header-nav-content .ccm-area, header.row-header .col.header-nav .header-nav-content .ccm-custom-style-container { background: transparent !important; } /* Hide ccm-responsive-menu-launch div at desktop */ header.row-header .col.header-nav .header-nav-content .ccm-responsive-menu-launch { display: none !important; } /* Hide any scripts inside header-nav-content */ header.row-header .col.header-nav .header-nav-content script { display: none !important; } } /* Panel styles within columns - maintain backward compatibility */ /* Panels ARE the columns in the new structure, so they inherit .col styles */ /* Override any old grid positioning rules for new row-based structure */ .ccm-page .row-container .row .panel, .ccm-page .row .panel, .ccm-page header.row-header .row .panel, .ccm-page footer.row-footer .row .panel { width: 100% !important; height: auto; min-height: inherit; padding: 0; position: relative !important; overflow: visible; display: flex; flex-direction: column; box-sizing: border-box; /* Remove any old grid positioning - panels are now direct children of grid rows */ grid-column: unset !important; grid-row: unset !important; /* Borders are set on .col parent */ } /* Ensure ccm-area can expand and push panel open */ .ccm-page .row-container .row .panel > .ccm-area, .ccm-page .row .panel > .ccm-area, .ccm-page header.row-header .row .panel > .ccm-area, .ccm-page footer.row-footer .row .panel > .ccm-area { width: 100%; min-height: 0; height: auto; flex: 0 1 auto; display: flex; flex-direction: column; overflow: visible; align-items: stretch; } /* Universal expansion rule for ALL grid blocks - allows blocks to push panel open vertically */ /* This applies to all blocks that match the grid-*-block pattern */ .panel > .ccm-area > [class*="grid-"][class*="-block"] { flex: none; align-self: flex-start; overflow: visible; } /* Footer Row - 100% width container, no background, follows last row */ footer.row-footer { width: 100%; position: relative; min-height: var(--cell); height: auto; margin-top: 0; /* No background - transparent */ background: transparent; } /* Footer row-container - 100% width */ footer.row-footer .row-container { width: 100%; } /* Mobile Responsive - 767px and below */ @media (max-width: 767px) { /* When not in edit mode we use a fixed header on mobile; don't also offset the whole page */ html.ccm-toolbar-visible .ccm-page:not(.ccm-edit-mode) { margin-top: 0; } /* Mobile header behavior (all browsers): Use fixed positioning below 767px for consistent "sticky" behavior across Chrome + iOS. We reserve space using JS-measured `--headerHeight` and `--adminBar`. */ .ccm-page:not(.ccm-edit-mode) header.row-header { position: fixed; top: var(--adminBar, 0px); left: 0; right: 0; width: 100%; } .ccm-page:not(.ccm-edit-mode) .header-row-border { position: fixed; top: calc(var(--adminBar, 0px) + var(--headerHeight, var(--topVisible))); left: 0; right: 0; width: 100%; } .ccm-page:not(.ccm-edit-mode) .main-wrapper { padding-top: calc(var(--adminBar, 0px) + var(--headerHeight, var(--topVisible)) + var(--stroke) - 2px); } /* Prevent any accidental horizontal overflow ("right margin" / side scroll) on mobile */ .ccm-page, .ccm-page .main-wrapper { overflow-x: hidden; } /* Reset positioning at mobile - full width, no nudge/shift */ .ccm-page .row { margin-left: 0 !important; margin-right: 0 !important; width: 100%; max-width: 100%; grid-template-columns: 1fr; min-height: 0; } /* Hide c and e columns, show only d column */ .ccm-page .row .col.col-c, .ccm-page .row .col.col-e { display: none; } .ccm-page .row .col.col-d { width: 100%; min-width: 100%; max-width: 100%; border-right: none; border-left: none; } /* Remove min-height at mobile - let content determine height */ .col, .panel { min-height: 0; } /* Header - hide c and e columns, show only d column */ header.row-header .col.col-c, header.row-header .col.col-e { display: none; } header.row-header .col.header-nav .header-nav-content { display: none !important; } .ccm-page header.row-header .row { grid-template-columns: 1fr; } /* Logo and nav in col-d at mobile */ header.row-header .col.col-d { display: flex !important; flex-direction: column; justify-content: space-between; width: 100%; min-width: 100%; max-width: 100%; border-right: none; border-left: none; } /* Mobile header column - flexbox layout with logo left and hamburger right */ header.row-header .col.col-d.header-col-d { display: flex !important; flex-direction: row; justify-content: space-between; align-items: flex-start; padding-top: var(--pad); padding-left: var(--pad); padding-right: var(--pad); padding-bottom: calc(20px * var(--s)); } /* Show mobile logo at mobile - ensure it stays above overlay */ header.row-header .header-logo-mobile { display: flex !important; justify-content: flex-start; align-items: flex-start; z-index: 10001 !important; position: relative; } /* Ensure logo stays visible when overlay is open */ body.menu-open header.row-header .header-logo-mobile { z-index: 10001 !important; } /* Navigation overlay - full screen but keeps logo visible */ header.row-header .header-nav-mobile-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: var(--bg); background-image: url('../images/background-home-092e4f.webp'), radial-gradient(1200px 700px at 65% 35%, rgba(255, 255, 255, 0.06), transparent 60%), radial-gradient(900px 600px at 25% 75%, rgba(255, 255, 255, 0.05), transparent 55%); background-position: center center, center center, center center; background-size: cover, auto, auto; background-repeat: no-repeat, no-repeat, no-repeat; background-attachment: fixed, scroll, scroll; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; z-index: 10000; display: flex; flex-direction: column; padding-top: calc(var(--pad) * 3); padding-left: var(--pad); padding-right: var(--pad); padding-bottom: var(--pad); overflow-y: auto; pointer-events: none; } /* Hide hamburger menu inside overlay - it should only be in the header */ header.row-header .header-nav-mobile-overlay .hamburger-menu, header.row-header .header-nav-mobile .hamburger-menu, header.row-header .header-nav-mobile-overlay nav .hamburger-menu { display: none !important; visibility: hidden !important; } /* Hide ccm-responsive-menu-launch (close icon) inside overlay - hide everywhere in overlay */ header.row-header .header-nav-mobile-overlay .ccm-responsive-menu-launch, header.row-header .header-nav-mobile-overlay .close-menu, header.row-header .header-nav-mobile .ccm-responsive-menu-launch, header.row-header .header-nav-mobile .close-menu, header.row-header .header-nav-mobile-overlay nav .ccm-responsive-menu-launch, header.row-header .header-nav-mobile-overlay nav .close-menu, header.row-header .header-nav-mobile-overlay .ccm-area .ccm-responsive-menu-launch, header.row-header .header-nav-mobile-overlay .ccm-area .close-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; } header.row-header .header-nav-mobile-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; } /* Navigation content inside overlay */ header.row-header .header-nav-mobile { display: flex !important; flex-direction: column; width: 100%; margin-top: calc(var(--pad) * 2); } /* Navigation list styling */ header.row-header .header-nav-mobile nav ul { display: flex !important; flex-direction: column !important; gap: calc(var(--pad) * 0.5) !important; font-size: calc(42px * var(--s)) !important; letter-spacing: calc(2px * var(--s)) !important; text-transform: uppercase !important; text-align: center !important; list-style: none !important; padding: 0 !important; margin: 0 auto !important; width: 100% !important; align-items: center !important; } header.row-header .header-nav-mobile nav ul li { display: block !important; width: auto !important; text-align: center !important; } header.row-header .header-nav-mobile nav ul li a { color: var(--gold) !important; text-decoration: none !important; display: block !important; padding: calc(var(--pad) * 0.25) !important; transition: color 0.2s ease !important; text-align: center !important; } header.row-header .header-nav-mobile nav ul li a:hover, header.row-header .header-nav-mobile nav ul li.active a { color: var(--text) !important; } /* Prevent body scroll when menu is open */ body.menu-open { overflow: hidden !important; height: 100vh; } /* Footer - center column only */ .ccm-page .ccm-page footer.row-footer .row { grid-template-columns: 1fr; } footer.row-footer .col.footer-col-left, footer.row-footer .col.footer-col-right { display: none; } footer.row-footer .col.footer-col-center { width: 100%; min-width: 100%; max-width: 100%; border-right: none; border-left: none; } /* Allow grid-content-two-content to push open containers */ .grid-content-two-section { min-height: 0; height: auto; overflow: visible; } .grid-content-two-content { flex: 0 1 auto; min-height: 0; overflow: visible; } .grid-content-two-block { height: auto; min-height: 0; overflow: visible; } .grid-content-two-columns { height: auto; min-height: 0; overflow: visible; } .grid-content-two-column { height: auto; min-height: 0; overflow: visible; } /* Grid Content Block - add bottom margin at mobile */ /* Apply to the last grid-content-block inside a panel */ .grid-content-block:last-child { margin-bottom: 5% !important; } /* Also target last-of-type as fallback */ .grid-content-block:last-of-type { margin-bottom: 5% !important; } /* Override content position at mobile - always align to top */ .grid-content-block.content-position-center .grid-content-block-section:not(.no-button) .grid-content-block-content, .grid-content-block.content-position-bottom .grid-content-block-section:not(.no-button) .grid-content-block-content { margin-top: 0 !important; margin-bottom: 0 !important; } .grid-content-block.content-position-center .grid-content-block-section.no-button, .grid-content-block.content-position-bottom .grid-content-block-section.no-button { justify-content: flex-start !important; } .grid-content-block.content-position-center .grid-content-block-section.button-top-left, .grid-content-block.content-position-center .grid-content-block-section.button-top-right, .grid-content-block.content-position-bottom .grid-content-block-section.button-top-left, .grid-content-block.content-position-bottom .grid-content-block-section.button-top-right { justify-content: flex-start !important; } }