/* ========================================================================== Summit "Gathering Detail" page revamp (Figma: Gathering Detail Page, node 40000567:25989, same file as the home-page revamp). Scoped under .summit-revamp / .smt- prefixed classes so nothing bleeds into the legacy app.css selectors the hidden sections still depend on. Reuses the .hr-btn/.hr-icon-btn/.hr-diamond primitives and --hr-* tokens already established by home-revamp.css / layout-revamp.css. ========================================================================== */ .summit-revamp { --hr-green-400: #338a81; --hr-green-500: #006d62; --hr-yellow-400: #e19d33; --hr-yellow-500: #d98500; --hr-cream-50: #fefefd; --hr-cream-300: #fbfaf0; --hr-cream-400: #faf9ed; --hr-cream-500: #f9f7e9; --hr-brown-300: #66655c; --hr-brown-400: #49473d; --hr-brown-500: #1b190c; --hr-brown-700: #131209; --hr-brown-900: #0b0b05; --hr-blue-50: #e6eef3; --hr-blue-400: #33739f; --hr-blue-500: #005087; --hr-purple-500: #8e3b78; /* Shared side gutter for the hero + all four content sections, so every heading down the page lines up on one left edge. Proportional (vw), not a fixed px step. These sections cap their inner content at 1400px, which means above ~1667px the cap creates the gutter and the page sits comfortably inset (13.5% each side at 1920). Below that the viewport is the constraint, so any FIXED gutter shrinks as a share of the screen - at 80px on a 1440 laptop it was only 5.8%, i.e. content running nearly edge-to-edge, while the same page on a wide monitor looked correctly inset. 8vw holds that ~8-13% inset across the whole laptop range instead, converging on the cap's own proportion rather than fighting it. The 200px ceiling stops it growing past the point where max-width takes over anyway. */ /* BIL-817: the page's sections share the HEADER's container geometry, so section content starts at the BilAraby logo's left edge and ends at the right edge of the language pill. .header-revamp .container-xl (layout-revamp.css) is a flat 160px inline padding with max-width:none from 992px up, and Bootstrap's own 12px half-gutter below that - so this token is those two values rather than a fluid ramp of its own. It replaces `clamp(40px, 8vw, 200px)`, which resolved to 115px at 1440 and 154px at 1920 - always inside the header's 160px, so every section sat 45px wide of the logo on one side and short of the language pill on the other. The section inners' 1400px caps came off at the same time for the same reason: the header has no cap, so above ~1720px a capped inner pulled away from it again even with the gutter matched. */ --smt-gutter: 12px; /* The --smt-glass-* fill/stroke tokens that used to live here are gone. They held colours sampled off Figma's renders, because a literal rgba(255,255,255,.2) fill composites LIGHTER than the cream band in CSS (Figma paints drop shadows behind a translucent layer; CSS clips them to outside the border box). Every user - .smt-performance-nav, .smt-community-nav and .smt-agenda-head's "View Full Schedule" - now takes its home-page counterpart's recipe instead, where the shared glass rim in layout-revamp.css supplies the edge the sampled stroke stood in for. .smt-attend-btn was never pointed at them. */ font-family: 'Almarai', 'Helvetica Neue', Arial, sans-serif; } /* The header switches to its 160px container at exactly this width (@media (min-width: 992px) on .header-revamp .container-xl), so the page switches with it - matching breakpoint, matching value. */ @media (min-width: 992px) { .summit-revamp { --smt-gutter: 160px; } } .summit-revamp .hr-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; gap: 8px; padding: 16px 24px; border-radius: 61px; font-weight: 700; font-size: 16px; border: 1.5px solid transparent; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; } .summit-revamp .hr-btn:hover { transform: translateY(-2px); text-decoration: none; } .summit-revamp .hr-btn-primary { background: var(--hr-yellow-500); color: var(--hr-cream-50); border-color: #fff; /* Figma (node 40001286:67970): the inset highlight alone read as flat - it's paired with a stacked ambient shadow for actual glass depth, same treatment as the home page's equivalent button (BIL-539). */ box-shadow: inset 0 4px 6.1px rgba(255,255,255,.23), 7px 63px 18px rgba(0,0,0,.02), 2px 23px 14px rgba(0,0,0,.02), 1px 10px 10px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.03); } .summit-revamp .hr-btn-primary:hover { color: var(--hr-cream-50); box-shadow: 0 8px 20px rgba(217,133,0,.35); } /* The hero's "Register Now" is the same button as the home page's, and is asked to match it exactly. .summit-revamp's primitives differ from .home-revamp's in five ways, each restated here rather than changed page-wide - the page-wide rules also dress Discover More, Watch Highlights, View Full Schedule and the FAQ's Send Email, none of which should move: padding 16/24 -> 14.5/22.5. Home subtracts its own border so the pill is Figma's 56px; the flat 16/24 here rendered 59px. border 1.5px solid #fff -> 2px outset #ffffff9c with bottom 0, i.e. the home HERO's "Culture" button (.hr-hero-ctas). Home has two .hr-btn-primary treatments: .hr-gathering-ctas overrides the colour to fully transparent, which drops the lit outer ring - the hero/partners instances keep it, and that ring is the "outer layer" this button is meant to have. align-self deliberately NOT copied. Home computes 'auto', but its button sits in a flex ROW (.hr-gathering-ctas), where that stretches only the height. .smt-hero-copy is a flex COLUMN, so 'auto' stretched the pill to the full 666px column. The page's own flex-start (center on mobile) is what reproduces home's hug-the-content width here, so it is left alone. type held at 16/24 everywhere; home has no mobile step-down, so the one .smt-hero-copy .hr-btn applies is overridden here. hover home keeps the five-layer ambient shadow and lights the shared ::before glow instead of swapping in the amber drop-shadow above, which home-revamp.css records as invented. The glow itself lives in layout-revamp.css; this selector is added to its list there, which that rule's comment asks to be kept explicit. */ .summit-revamp .smt-hero-copy .hr-btn-primary { padding: 14.5px 22.5px; border: 2px outset #ffffff9c; border-bottom-width: 0; font-size: 16px; line-height: 24px; } .summit-revamp .smt-hero-copy .hr-btn-primary:hover { box-shadow: inset 0 4px 6.1px rgba(255,255,255,.23), 7px 63px 18px rgba(0,0,0,.02), 2px 23px 14px rgba(0,0,0,.02), 1px 10px 10px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.03); } /* Missing the inset glass highlight .hr-btn-primary already has just above, so it read as a flat translucent chip rather than glass ("Send Email", BIL-598). */ /* "Send Email" in the FAQ contact card - the only .hr-btn-ghost-light on this page - given the home buttons' treatment, same as the agenda head's "View Full Schedule" and the speakers head's "View More": padding 14.5/22.5, because this variant keeps .hr-btn's 1.5px border and CSS stacks border on top of padding, so 16/24 rendered 59px against the design's 56; home's full five-layer ambient stack rather than the inset highlight alone; hover holds the resting fill and lights the shared ::before ellipse (added for this selector in layout-revamp.css) instead of tinting .2 -> .3, which is what the glow is there to do. */ .summit-revamp .hr-btn-ghost-light { padding: 14.5px 22.5px; background: rgba(255,255,255,.2); color: #fff; border-color: transparent; box-shadow: inset 0 4px 6.1px rgba(255,255,255,.23), 7px 63px 18px rgba(0,0,0,.02), 2px 23px 14px rgba(0,0,0,.02), 1px 10px 10px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.03); } .summit-revamp .hr-btn-ghost-light:hover { color: #fff; background: rgba(255,255,255,.2); box-shadow: inset 0 4px 6.1px rgba(255,255,255,.23), 7px 63px 18px rgba(0,0,0,.02), 2px 23px 14px rgba(0,0,0,.02), 1px 10px 10px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.03); } .summit-revamp .hr-btn-ghost-dark { background: #fff; color: var(--hr-brown-900); border-color: rgba(27,25,12,.08); box-shadow: 0 4px 14px rgba(27,25,12,.06); } .summit-revamp .hr-btn-ghost-dark:hover { color: var(--hr-brown-900); background: #fff; box-shadow: 0 8px 20px rgba(27,25,12,.12); } .summit-revamp .hr-icon-btn { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); flex-shrink: 0; } .summit-revamp .hr-icon-btn img { width: 20px; height: 20px; } .summit-revamp .hr-accent { color: var(--hr-yellow-400); } /* Several existing icon assets are exported white/cream-only (built for dark surfaces), which makes them invisible on this page's light icon chips. Recolor via mask-image (same technique already used for the header's language-globe icon) instead of hunting for a differently-colored export. */ .smt-icon-mask { display: inline-block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; background-color: currentColor; } /* ---------- Hero ---------- */ .smt-hero { position: relative; /* Figma (node 40000567:25991): the hero content block starts at y=536 and the frame ends 120px after the highlight block. Those two values plus the content's own height reproduce Figma's 1276px hero exactly (536 + 280 content + 64 gap + 276 highlight + 120 = 1276). The hero sits under the fixed 133px header, so 536px of top padding is measured from the viewport top, matching the design's clearance. */ /* Side gutter matches the four content sections below — see .smt-agenda for the proportional-gutter rationale — so the hero title lines up with every section heading down the page. */ padding: 536px var(--smt-gutter) 120px; background-size: cover; background-position: center top; background-repeat: no-repeat; overflow: hidden; color: var(--hr-cream-500); } .smt-hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; } .smt-hero-scrim { position: absolute; inset: 0; z-index: 1; /* A background VIDEO can be bright at any given frame (unlike a fixed photo), so the whole hero needs a legibility floor, not just a bottom gradient tuned for a specific still image. */ background: linear-gradient(0deg, var(--hr-blue-500) 22%, rgba(16,79,131,0) 65%), linear-gradient(180deg, rgba(9,25,38,.55) 0%, rgba(9,25,38,.25) 40%, rgba(9,25,38,.15) 100%); pointer-events: none; } /* Decorative diamond+line divider between the stats row and the "Watch Highlights" block below it. The line is a flex-grow element (not a fixed-aspect-ratio image) so it genuinely reaches the container's true edge regardless of viewport width, instead of stopping partway. .smt-hero-inner is centered with max-width:1400px, so on wide viewports its own right edge sits well inside the true section/viewport edge — the negative margin below bleeds the divider past that cap to reach it. */ .smt-hero-divider { /* Bumped from 16px on review. Gap and line offset follow it automatically. */ --smt-diamond: 20px; display: flex; align-items: center; /* No gap meant the two diamonds sat flush edge-to-edge as unrotated boxes - but rotated 45deg each one's visual width is size * sqrt(2), so their points overlapped into each other instead of reading as two distinct diamonds. size * (sqrt(2)-1) is exactly that overlap, so the tips sit flush - touching, not merged. Derived from --smt-diamond rather than hardcoded: the size, this gap and the line's offset below are one relationship, and the previous literals (16 / 6.627 / -3.314) had to be recomputed together every time the size changed. */ gap: calc(var(--smt-diamond) * 0.414214); width: 55%; margin-inline-start: auto; /* Bleeds past .smt-hero-inner's 1400px cap to the true viewport edge. Percentages in margin resolve against the containing block (that capped inner), so 50% is half the content width and 50vw is half the viewport: the difference is exactly the distance from the inner's right edge to the viewport's. Derived rather than hardcoded, so it stays correct as --smt-gutter changes with the viewport - the previous fixed "-80px - (100vw - 1560px)/2" had to be re-derived by hand every time the padding or the cap moved. */ margin-inline-end: calc(50% - 50vw); pointer-events: none; } .smt-hero-diamond { width: var(--smt-diamond); height: var(--smt-diamond); transform: rotate(45deg); background: var(--hr-cream-500); flex-shrink: 0; } .smt-hero-divider-line { flex: 1 1 auto; height: 1px; background: rgba(249, 247, 233, .5); /* Same tip-vs-layout-box offset as the listing page's hero divider: the 6.627px flex gap also separates this line from the last diamond, but that diamond's rotated tip already reaches 3.314px into the gap, so pull back the difference to meet it. */ margin-inline-start: calc(var(--smt-diamond) * -0.207107); } @media (max-width: 991.98px) { .smt-hero-divider { display: none; } } .smt-hero-inner { position: relative; z-index: 2; max-width: none; margin-inline: auto; display: flex; flex-direction: column; gap: 64px; } .smt-hero-row { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; /* flex-end bottom-aligned the two columns, so whenever the stats column (esp. a wrapping location string) ran taller than .smt-hero-copy, its top - and the first stat's icon - sat noticeably above the title instead of level with it. flex-start keeps the title and the first stat on the same line regardless of how either column's content wraps. */ align-items: flex-start; } .smt-hero-copy { display: flex; flex-direction: column; gap: 32px; max-width: 840px; } .smt-hero-title { font-size: 48px; font-weight: 700; line-height: 1.15; /* Figma (node 40001286:67967): 24px gap between title and description - both sit in the same unwrapped
, so .smt-hero-copy's own 32px flex gap (which only separates that div from the Register button) never applied between them, leaving them flush (BIL-595). */ margin: 0 0 24px; } /* Figma (node 40001286:67969): 24px/32px regular, solid brown/brown-100 (#b8b8b4) - not this page's cream token faded with opacity, which is both the wrong size and the wrong color family. */ .smt-hero-desc { font-size: 24px; line-height: 32px; color: #b8b8b4; } /* $heroDescription is rendered raw and typically comes wrapped in a

from the rich-text editor - its default 16px bottom margin stacked on top of .smt-hero-copy's own 32px flex gap to the button below, inflating it to 48px (BIL-602). */ .smt-hero-desc > p:last-child { margin-bottom: 0; } .smt-hero-closed { border-radius: 16px; } .smt-hero-stats { display: flex; flex-direction: column; gap: 24px; } .smt-hero-stat { display: flex; /* center (against a long-wrapping value like the venue address) makes this stat's own row taller than its 52px icon, then centers the icon inside that extra height - pushing it down and out of line with the title above and the other two stats' icons. flex-start keeps every icon pinned to its row's top regardless of how many lines its text wraps to (same fix as .evtd-stat in event-detail-revamp.css). */ align-items: flex-start; gap: 14px; } /* The date is one line now that the duration under it is gone, so flex-start pinned it to the top of the 52px icon tile. Centred against the icon instead. Scoped to this stat: the location beside it still needs flex-start, since a long address wraps and centring would push its icon out of line. */ .smt-hero-stat-date { align-items: center; } /* Figma caps this at 164.373px so a long value (e.g. the venue's full address) wraps onto its own lines instead of running wide on one - without it, a long location string forced the whole stats column wide enough to overflow the row and drop onto its own line below .smt-hero-copy instead of sitting beside it (BIL-595, "content and location not showing two sides"). */ .smt-hero-stat > div { max-width: 180px; } /* Figma (node 40000567:26003): a 52px white tile = 28px icon + 12px padding, with a white hairline border and a slight backdrop blur so it lifts off the hero photo. */ .smt-hero-stat-icon { width: 52px; height: 52px; border-radius: 10px; background: #fff; border: 1px solid #fff; backdrop-filter: blur(7.25px); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* 28px per Figma. The exported glyphs are already blue-500 (#005087); they only read faint because they were previously drawn at 20px inside the 52px tile, leaving too much white around them. */ .smt-hero-stat-icon img { width: 28px; height: 28px; object-fit: contain; } .smt-hero-stat strong { display: block; font-size: 20px; font-weight: 700; } /* :not(.smt-hero-stat-icon) matters — the icon chip is also a inside .smt-hero-stat, so without this it inherited the sub-label's opacity:.7 ("2 Days" is the intended target). That let the blue hero behind it show through the chip's own background:#fff, so the square rendered as a pale cream/lavender tint instead of the white the design calls for. Same sibling-span trap already documented on .smt-agenda-badge below. */ .smt-hero-stat span:not(.smt-hero-stat-icon) { display: flex; font-size: 16px; color: var(--hr-cream-400); opacity: .7; } /* Watch-highlights block: thumbnail + text, same "reuse the home hero's watch-story modal" pattern, just laid out side-by-side per this design. */ .smt-hero-highlight { display: flex; align-items: center; /* Sized so the figure beside it can take a share of THIS row rather than of the viewport - see --smt-hl-w. A container cannot query itself, so the gap below stays in vw. */ container-type: inline-size; /* Figma's 60px gap in a 1600 container = 3.75%, i.e. 3.15vw of the 84vw row - kept proportional to the figure so the text column lands on its own spec share (1107/1600 = 69.19%) with no width of its own. Capped at 3.75% of .smt-hero-inner's own 1400px ceiling, which 3.15vw reaches at 1667px. */ gap: min(52.5px, 3.15vw); flex-wrap: wrap; } /* ---- Highlight figure: Figma node 40001967:59618, a 433x276 composition ---- Rebuilt straight from that node. Three pieces, each positioned by its CENTRE and then rotated, because CSS rotates about centre too - centre-placement is what makes the angles land exactly where Figma's do: bracket 204.034 x 180.684 centre (312.49, 170.81) rotate -3.92deg diamonds 119.049 x 99.4473 centre (381.90, 61.67) rotate -91.71deg card 400 x 250, r24 centre (200.00, 138.00) rotate -3.79deg The card paints last, over both decorations - that layer order is what makes the bracket peek out along the right edge while the diamonds sit clear of the top-right corner. All three artworks are Figma's own exports and were already in this repo; note the diamond cluster is ONE shape (a ribbon with diamond tassels), not the two rotated squares this block used to fake. --smt-hl-w is the figure's WIDTH, and every length above is written as Figma's own value over 433 times it, so the composition scales as a single piece and stays exact at any size. BIL: it used to be a unitless multiplier pinned at .625, which meant the figure stayed ~271px while the hero row grew with the viewport - by 1512 it was 21.4% of the row against Figma's 27.06%, so it read as a small thumbnail beside a long title/description instead of the design's large one. A length fixes that, because the share Figma draws IS expressible in vw: row = 100vw - 2 * --smt-gutter = 100vw - 16vw = 84vw (in the 8vw band) figure = 433 / 1600 of the row = 27.0625% * 84vw = 22.7325vw The earlier note here said a fluid scale was not expressible because CSS cannot divide a length by a length to get a unitless number; that is true, and is exactly why the token is now the length itself rather than a multiplier. */ .smt-hero-highlight-figure { /* Fallback for browsers without container queries: the same share worked out against the viewport. --smt-gutter is 8vw through this whole range, so the row is 84vw and the figure 27.0625% of it = 22.7325vw, capped at 27.0625% of the 1400px ceiling (reached at 1667px, where 84vw hits 1400). */ --smt-hl-w: min(378.875px, 22.7325vw); /* Preferred: a share of the row itself, so it needs to know neither the gutter nor the 1400px cap, and is not thrown off by the scrollbar the way vw is. Dropped whole by browsers that do not parse cqw. */ --smt-hl-w: min(433px, 27.0625cqw); position: relative; flex-shrink: 0; width: var(--smt-hl-w); height: calc(276 / 433 * var(--smt-hl-w)); padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s ease; } .smt-hero-highlight-figure:hover { transform: translateY(-4px); } .smt-hl-bracket, .smt-hl-diamond { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; } .smt-hl-bracket { inset-inline-start: calc(210.47 / 433 * var(--smt-hl-w)); top: calc(80.47 / 433 * var(--smt-hl-w)); width: calc(204.034 / 433 * var(--smt-hl-w)); height: calc(180.684 / 433 * var(--smt-hl-w)); transform: rotate(-3.92deg); background-image: url("../images/summit-revamp/thumb-outline-vector.svg"); } .smt-hl-diamond { inset-inline-start: calc(322.38 / 433 * var(--smt-hl-w)); top: calc(11.95 / 433 * var(--smt-hl-w)); width: calc(119.049 / 433 * var(--smt-hl-w)); height: calc(99.4473 / 433 * var(--smt-hl-w)); transform: rotate(-91.71deg); background-image: url("../images/summit-revamp/thumb-accent-vector.svg"); } .smt-hl-card { position: absolute; inset-inline-start: 0; top: calc(13 / 433 * var(--smt-hl-w)); width: calc(400 / 433 * var(--smt-hl-w)); height: calc(250 / 433 * var(--smt-hl-w)); border-radius: calc(24 / 433 * var(--smt-hl-w)); overflow: hidden; transform: rotate(-3.79deg); box-shadow: 0 20px 40px rgba(0,0,0,.35); } .smt-hl-media { width: 100%; height: 100%; object-fit: cover; display: block; } /* Figma exports this vignette as an SVG radialGradient whose matrix works out to semi-axes of 913.65px horizontal and 125px vertical about the card centre - so it shades the top and bottom edges only, never the sides. Softened from Figma's literal two-stop 0 -> .9 ramp, which was far too harsh against the reference render: ramping from dead centre meant the darkening started immediately and the photo was already visibly grey by mid-card, with the edges going near-black. Holding fully clear through the middle 45% and capping at .45 keeps the subject bright and leaves a light edge shade. */ .smt-hl-vignette { position: absolute; inset: 0; background: radial-gradient( calc(913.65 / 433 * var(--smt-hl-w)) calc(125 / 433 * var(--smt-hl-w)) at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%); pointer-events: none; } /* left/top rather than inset-inline-start: these two live INSIDE the card, whose photo is not mirrored in RTL, so they must not flip with it. */ .smt-hl-play { position: absolute; left: calc(171.81 / 433 * var(--smt-hl-w)); top: calc(96.77 / 433 * var(--smt-hl-w)); width: calc(56 / 433 * var(--smt-hl-w)); height: calc(56 / 433 * var(--smt-hl-w)); display: flex; align-items: center; justify-content: center; border-radius: 999px; overflow: hidden; /* Above .smt-hl-bar. Both sat at z-index:auto and the bar comes later in the DOM, so it painted OVER the disc's bottom 15px - a third of a 47px button - frosting it into a flat-bottomed blob. The note on the bar calls the overlap "~4px"; measured against the live render it is 15.1px, because the disc ends at 132.3 in the card and the bar starts at 117.3. Raising the disc keeps Figma's layer order everywhere it actually matters (the bar still frosts the photo) while leaving the button a whole circle. */ z-index: 1; /* Figma's export reports rgba(255,255,255,.1) for this disc, but its own render measures ~rgb(225,205,203) over a backdrop running rgb(189,189,189) above it to rgb(15,13,25) below - 10% white cannot produce that. It resolves to a heavy blur plus white. .64 is measured, not judged by eye: sampling Figma's render puts the disc's interior at rgb(215,197,196) against a local backdrop of rgb(113,106,113), which is 0.64 white. It was briefly .92 here on the assumption the disc looked too transparent - that was backwards, and rendered it as a near-flat white puck. */ background: rgba(255,255,255,.64); /* 5px on the same std-dev convention as the haze below; the previous 10 was estimated by eye, not taken from the design. */ -webkit-backdrop-filter: blur(calc(5 / 433 * var(--smt-hl-w))); backdrop-filter: blur(calc(5 / 433 * var(--smt-hl-w))); } .smt-hl-play img { width: calc(24 / 433 * var(--smt-hl-w)); height: calc(24 / 433 * var(--smt-hl-w)); display: block; } /* Frosted bar across the card's lower third - painted after the play disc, matching Figma's layer order (the two overlap by ~4px). */ .smt-hl-bar { position: absolute; left: calc(-2 / 433 * var(--smt-hl-w)); /* Figma's own numbers. Profiling its render down two unrelated columns shows the lightening begin ~62% down the card and climb monotonically to the foot (+88 and +100 luminance over the same span), which is this 148.76 / 250 = 59.5% onset. An attempt to start it at the midpoint was eyeballed and wrong. */ top: calc(148.76 / 433 * var(--smt-hl-w)); width: calc(402.024 / 433 * var(--smt-hl-w)); height: calc(102.246 / 433 * var(--smt-hl-w)); /* 3px, not the 6 Figma's panel shows: CSS blur() takes the Gaussian STANDARD DEVIATION, while Figma's blur field is ~2x that. This project's own exports prove the ratio - performance-card-glow.svg carries stdDeviation="18.37" for a Figma blur of ~37. Transcribing the 6 straight across made this twice as thick as the design. */ /* 1.6, down from 3. At 3 the haze read as a milky band swallowing the bottom half of the photo; the design keeps the audience legible right to the foot of the card, with only a light frosting over it. */ -webkit-backdrop-filter: blur(calc(1.6 / 433 * var(--smt-hl-w))); backdrop-filter: blur(calc(1.6 / 433 * var(--smt-hl-w))); /* The exported stops. At the foot Figma measures ~0.42 effective alpha (a dark frame at L=10 lifting to L=100), which .5 through the mask below lands on; .34 was too light and lost the haze entirely. */ background: linear-gradient(to top, rgba(243,236,241,.34) 0%, rgba(243,236,241,.13) 50.401%, rgba(243,236,241,0) 100%); /* backdrop-filter switches on at full strength the instant the element starts, so the tint faded in but the BLUR cut in on a hard horizontal line across the photo. The mask ramps the whole bar - blur and tint together - over its top half, so the frame dissolves into the caption instead of stepping into it. */ /* Full strength held over the bottom 30% of the bar rather than 55%, so the frosting hugs the card's foot instead of climbing to the middle of the photo. The rest of the ramp is unchanged in shape - it still dissolves upward rather than cutting in on a hard line. */ -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, rgba(0,0,0,.45) 65%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to top, #000 0%, #000 30%, rgba(0,0,0,.45) 65%, rgba(0,0,0,0) 100%); pointer-events: none; } /* RTL mirrors the composition. inset-inline-start already flips the three outer offsets, so only the rotations need negating - plus scaleX on the two decorative artworks, which are asymmetric. The card's photo stays unmirrored. */ [dir="rtl"] .smt-hl-bracket { transform: scaleX(-1) rotate(-3.92deg); } [dir="rtl"] .smt-hl-diamond { transform: scaleX(-1) rotate(-91.71deg); } [dir="rtl"] .smt-hl-card { transform: rotate(3.79deg); } /* Figma: this column is flex-[1_0_0] - it grows to fill whatever space is left beside the 250px thumb, not a fixed max-width. Without flex-grow the column fell back to auto-sizing in the wrapping row and got crushed down to ~116px, forcing the title/description to wrap mid-word (BIL-595). */ .smt-hero-highlight-text { flex: 1 1 0; min-width: 260px; } /* Figma gives the title its own narrower width so it deliberately wraps onto two lines instead of running the full column width like the paragraph does - without this it stretched the full flex width and, together with the crushed column above, is what read as "cut" against the row above. Figma's own example text ("Watch Highlights of Annual Gathering 2025") fits its spec width of 282px in two lines, but this title interpolates the summit's own (longer) name - widened to 360px so the real copy ("Watch Highlights of BilAraby Annual Gathering April-2026") still wraps to exactly two lines instead of three. */ .smt-hero-highlight-text h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; max-width: 360px; } /* Figma (node 40001286:68000): solid brown/brown-100 (#b8b8b4), not this page's cream token faded with opacity. Matched to .smt-hero-desc's 24px/ 32px rather than this node's own 20px/28px - the two descriptions read as inconsistently sized against each other on the same page otherwise. */ .smt-hero-highlight-text p, .smt-hero-highlight-desc { font-size: 16px; line-height: 32px; color: #b8b8b4; margin: 0; } .smt-hero-highlight-desc > p:last-child { margin-bottom: 0; } /* Step the hero's Figma-spec 536px top clearance down as the viewport shortens, so the title doesn't start below the fold on laptop screens. */ @media (max-width: 1399.98px) { .smt-hero { padding-top: 400px; } } @media (max-width: 1199.98px) { .smt-hero { padding-top: 300px; padding-bottom: 80px; } } @media (max-width: 991.98px) { .smt-hero { padding-top: 200px; } .smt-hero-title { font-size: 34px; } } /* ---- Mobile hero (Figma node 40002887:105575, the 402px "Annual Gathering" artboard). A different composition from the desktop hero, not just a narrower one: the banner/video shrinks to a ~200px strip across the top with the rest of the section on flat blue beneath it, everything centres, and the three stats turn from a right-hand column of icon-beside-text rows into one across-the-width row of icon-above-text. --------------- */ @media (max-width: 767.98px) { .smt-hero { /* 20px page gutter and content starting at y=190, both Figma's. */ padding: 200px var(--smt-gutter) 60px; /* The media no longer fills the section, so the section itself has to carry the colour the rest of it sits on. */ background-color: var(--hr-blue-500); background-size: 100% 220px; background-position: top center; } .smt-hero-bg-video { height: 220px; } /* Darkens the strip for legibility, then hard-lands on the section's blue by 200px so the media stops exactly where Figma's does (the desktop scrim's percentage stops can't do this - as a % of a ~1200px-tall mobile hero they'd leave the video showing through the middle). */ .smt-hero-scrim { background: linear-gradient(180deg, rgba(9,25,38,.5) 0px, rgba(9,25,38,.18) 140px, var(--hr-blue-500) 200px); } .smt-hero-inner { gap: 60px; } /* Copy and stats stack instead of sitting side by side. */ .smt-hero-row { flex-direction: column; gap: 40px; align-items: stretch; } /* Set from the leading edge, matching the summits LISTING page (which carries no mobile centring at all) and the events listing. `start` / `flex-start`, never `left`: in a column flex container the cross axis is horizontal and both resolve per direction, so Arabic aligns right off the same declarations. */ .smt-hero-copy { align-items: flex-start; text-align: start; gap: 32px; max-width: none; } /* .summit-revamp .hr-btn hard-sets align-self:flex-start, and a child's own align-self always beats the parent's align-items - so the button needs its own declaration to follow the column, exactly as it did when this was centred. */ .smt-hero-copy .hr-btn { align-self: flex-start; padding: 12px 20px; font-size: 14px; line-height: 20px; } .smt-hero-title { font-size: 32px; line-height: 40px; margin-bottom: 16px; } .smt-hero-desc { font-size: 16px; line-height: 24px; } /* Row of three, spread across the full content width. */ .smt-hero-stats { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; } /* flex:1 1 0 (equal thirds), not content-sized: Figma's placeholder venue is the short "Doha, Qatar", but a real CMS location can be the full "Multaqa (Education City Student Center), Doha, Qatar." - content-sized columns let that one string eat most of the row and squash the other two. Equal thirds keep the three icons evenly spaced whatever the copy length, and the long value just wraps inside its own third. */ .smt-hero-stat { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 8px; text-align: start; min-width: 0; } /* The desktop 180px cap is there to stop a long venue string widening the side column - here the three share the row, so let them size to it. */ .smt-hero-stat > div { max-width: none; display: flex; flex-direction: column; gap: 4px; } /* 40px tile = 20px icon + 10px padding (desktop is 52/28/12). */ .smt-hero-stat-icon { width: 40px; height: 40px; } .smt-hero-stat-icon img { width: 20px; height: 20px; } .smt-hero-stat strong { font-size: 14px; line-height: 20px; } /* flex-start with the column above: this span is itself a flex row, so its own main-axis alignment has to move too or the label stays centred inside a left-aligned stat. */ .smt-hero-stat span:not(.smt-hero-stat-icon) { font-size: 12px; line-height: normal; justify-content: flex-start; } /* Shown again below 991.98px (see the hide rule above, which is aimed at the tablet band): mobile has its own divider, diamonds at the START with the rule running off the right edge - the mirror of desktop's. Every number below derives from ONE fact: these diamonds are 12px, not desktop's 16px. A square rotated 45deg is w*sqrt(2) across, so its point overhangs its own layout box by w*(sqrt(2)-1)/2 per side - 2.485px here, 3.314px on desktop. Each inherited desktop value is that bit too large and has to come down with the diamonds, or the motif opens up gaps: gap w*(sqrt(2)-1) = 4.971px (was 6.627px -> 1.65px of daylight between the two points) pull-back half the gap = 2.485px (was 3.314px -> the rule stopped 0.83px clear of each point) The gap cancels the two neighbouring points' overhang exactly, so they meet tip to tip; the pull-back cancels one point's overhang, so the rule meets the point rather than the box behind it. */ .smt-hero-divider { display: flex; width: auto; /* gap stays derived from --smt-diamond (set below); restating it as a literal here is what left the tips overlapping by 1.2px after the size changed. */ /* Both ends cancel the hero's own page gutter so the rule runs the full width of the screen. Derived from the token rather than restating it: the gutter is 12px here since BIL-817 aligned it to the header, and a literal -20px now overshoots by 8px a side - clipped by .smt-hero's overflow:hidden, so invisible, but the rule no longer ends where it means to. */ margin-inline-start: calc(-1 * var(--smt-gutter)); margin-inline-end: calc(-1 * var(--smt-gutter)); } /* The rule continues BEFORE the diamond pair too, so the pair reads as sitting ON a full-width line rather than capping its start. Desktop has no counterpart - there the divider begins mid-row at 55% - so this is a pseudo-element here instead of a second in the markup. The divider itself has already bled to the screen edge above, so the stub spans exactly the 20px that bleed opened up - it takes no start margin of its own, which would pull a second 20px clean off-screen. */ .smt-hero-divider::before { content: ""; flex: 0 0 auto; width: 20px; height: 1px; margin-inline-end: calc(var(--smt-diamond) * -0.207107); background: rgba(249, 247, 233, .5); } /* Set the variable, not the box: gap and the line/::before offsets all derive from it, so overriding width/height alone left those at their desktop values. 15px keeps the 0.75 ratio to desktop that 12:16 had. */ .smt-hero-divider { --smt-diamond: 15px; } /* Figure above, centred copy below (desktop is side by side). */ .smt-hero-highlight { flex-direction: column; gap: 32px; align-items: stretch; } /* Stacked, so the screen is the constraint rather than the text column beside it. The hero drops to 20px gutters at this width, so the figure simply fills what they leave, capped at Figma's own 433px (reached at 473px wide). This replaced four discrete scale steps that existed only because the old token had to be unitless - see the note on .smt-hero-highlight-figure. They also overflowed slightly: .76 was 329.1px on a 350px column at 390px wide. */ .smt-hero-highlight-figure { --smt-hl-w: min(433px, calc(100vw - 40px)); --smt-hl-w: min(433px, 100cqw); margin-inline: auto; } .smt-hero-highlight-text { text-align: start; min-width: 0; } .smt-hero-highlight-text h3 { font-size: 20px; line-height: 28px; max-width: none; margin-bottom: 16px; } .smt-hero-highlight-text p { font-size: 16px; line-height: 24px; } } /* ========================================================================== Gathering stats: "BilAraby Gathering in Numbers" (Figma node 40001967:59633). Sits right after the hero, before Video/Why-attend. Card recipe (border+ shadow on odd cards, borderless on even) and the .counter/data-target count-up are this page's own conventions - see .smt-agenda-corner-diamond above for the corner-asset pattern and the bottom of summit.js for the counter animation (shared site-wide, no extra JS needed here). ========================================================================== */ .smt-stats { position: relative; background: var(--hr-cream-500); padding: 100px var(--smt-gutter); overflow: hidden; } .smt-stats-inner { position: relative; z-index: 1; max-width: none; margin-inline: auto; display: flex; flex-direction: column; gap: 80px; } .smt-stats-head h2 { font-size: 48px; line-height: 56px; font-weight: 700; color: var(--hr-brown-500); margin: 0 0 16px; } /* Figma paints this word #d98500 (yellow/yellow-500), a full step darker than the --hr-yellow-400 the page's shared .hr-accent uses - scoped here rather than changing .hr-accent, same reasoning as .smt-performance-accent above. */ .smt-stats-accent { color: var(--hr-yellow-500); } .smt-stats-head p { font-size: 24px; line-height: 32px; color: var(--hr-brown-300); max-width: 900px; margin: 0; } /* gap:0 - Figma lays the four panels edge to edge (400px each at x=0/400/ 800/1200 within the 1600px row), same as the homepage's .hr-voices-grid. */ .smt-stats-grid { display: flex; gap: 0; } /* 40px radius, 32px backdrop blur, 243px tall, all verbatim from the Figma node spec. No border and no drop-shadow, despite the node spec listing `1px solid #33739f` + `0 4px 4px rgba(0,0,0,.25)` on the odd panels: the design's own render shows neither, and a literal blue stroke reads far heavier than the design - exactly the call home-revamp.css already made for the identical .hr-voices-grid panels. What separates the cards is the gradient alone, fading out into the cream. No margin stagger either: Figma has all four at y=0, same 243px height. The up/down "float" in the design is an optical effect of the alternating gradient direction below - odd panels are shaded at the TOP and fade out before their bottom edge (so they read as sitting high), even panels are transparent at the top and shade in toward the BOTTOM (so they read as dropped). Adding a real margin on top of that double-counts the offset. */ .smt-stat-card { flex: 1 1 0; min-width: 0; height: 243px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; text-align: center; padding: 24px; border: 0; border-radius: 40px; -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); } .smt-stat-card:nth-child(odd) { background: linear-gradient(180deg, rgba(84,138,175,.18) 0%, rgba(51,115,159,0) 61.523%); } .smt-stat-card:nth-child(even) { background: linear-gradient(180deg, rgba(51,115,159,0) 23.251%, rgba(51,115,159,.08) 100%); } .smt-stat-card > span { font-size: 24px; font-weight: 700; line-height: 32px; color: var(--hr-brown-300); } .smt-stat-card strong { display: flex; align-items: center; justify-content: center; font-size: 80px; font-weight: 800; line-height: 100px; color: var(--hr-blue-400); } .smt-stat-card strong .counter { font-size: inherit; line-height: inherit; } /* .counter-plus (not a span authored in this blade file) is injected by the shared count-up in summit.js - it wraps the "+" so it can be coloured separately from the number, matching Figma's two-tone digit/plus. */ /* Same treatment the homepage's .hr-plus already carries (home-revamp.css .hr-voices-grid .hr-voice-stat strong .hr-plus), so both "in Numbers" blocks render identically. The "+" does NOT share the number's type style: Figma gives it Headings/H1/Bold (node 40001286:67933) at 64px/72px weight 700, against the number's 80px/100px ExtraBold - here it was inheriting the full 80px/800, which is why it read oversized next to the digits. Held in em so the ratio carries through the mobile step-down below without a value per breakpoint. Colour stays this section's own yellow-400. */ .smt-stat-card .counter-plus { /* inline-block, and this matters: summit.js injects the "+" INSIDE the .counter span (counter.innerHTML = value + ''), so unlike the homepage - where .hr-plus is a sibling flex item of .hr-counter - this one is inline text in the number's own line box. Two consequences the first pass at this missed: `align-items: center` on the parent never reaches it, and `transform` is ignored outright on a non-replaced inline box, so the lift below was in the computed style but never painted. inline-block makes both apply. vertical-align:top then does what align-items did on the homepage - puts the "+" box top on the line box top - and the small lift lands it at the same -2.9px offset from the digits' box top that the homepage measures. */ display: inline-block; vertical-align: top; font-size: .8em; font-weight: 700; line-height: 1.125; /* The "+" rides high against the digits rather than sitting on their baseline. In Figma that comes out of the text box being shorter than the line it holds (38.266px box, 72px line-height, bottom-aligned), which lifts the glyph by half the difference: (72 - 38.266) / 2 = 16.87px, or .264em of the "+"'s own 64px. */ transform: translateY(-.045em); color: var(--hr-yellow-400); } /* The edge-to-edge gap:0 above is a ROW-only arrangement: side by side, the alternating top-shaded / bottom-shaded gradients read as four distinct panels even while touching. Once the row wraps, cards stack with a shaded edge meeting a shaded edge, which merges neighbours into one continuous band and loses that rhythm entirely - so the wrapped layouts get a real gap back to keep each card reading as its own box. */ @media (max-width: 1199.98px) { .smt-stats-grid { flex-wrap: wrap; gap: 24px; } /* 45%, not 50% - leaves room for the gap so it still lands 2 per row. */ .smt-stat-card { flex: 1 1 45%; } } @media (max-width: 767.98px) { .smt-stats-inner { gap: 48px; } .smt-stats-head h2 { font-size: 32px; line-height: 40px; } .smt-stats-head p { font-size: 18px; line-height: 26px; } .smt-stats-grid { gap: 20px; } .smt-stat-card { flex: 1 1 100%; height: auto; padding: 32px 24px; gap: 24px; } .smt-stat-card strong { font-size: 56px; } } /* ---------- Agenda: "Two Days of Ideas & Impact" ---------- */ .smt-agenda { position: relative; background: var(--hr-cream-500); /* Was 24px: .smt-agenda-inner's 1400px cap only starts creating real margins once the viewport clears ~1450px, so on every laptop width below that the content ran within 24px of the screen edges while wide monitors looked correct. See --smt-gutter for why this is now proportional rather than a fixed px value. */ padding: 100px var(--smt-gutter); overflow: hidden; } .smt-agenda-inner { position: relative; z-index: 1; max-width: none; margin-inline: auto; } /* Decorative corner shape (Figma). Figma's own frame has 160px of side padding around the content, giving this shape room to bleed in without touching anything — this section's padding is much tighter, so at Figma's literal size/offset the shape reaches down into the head row and collides with the button. The head row starts exactly at this section's own padding-top (100px), so height is capped just under that (with a small buffer) rather than shrunk further than necessary — keeps it a visible corner accent instead of nearly hiding it. */ .smt-agenda-corner-shape { position: absolute; top: 0; inset-inline-end: -40px; width: 316px; height: 100px; transform: scaleX(-1); pointer-events: none; } [dir="rtl"] .smt-agenda-corner-shape { transform: none; } /* Mobile counterpart. Hidden by default so only one of the pair ever shows; it takes over at exactly the width the desktop shape switches off. */ .smt-agenda-corner-shape-mobile { display: none; } @media (max-width: 991.98px) { .smt-agenda-corner-shape-mobile { display: block; position: absolute; top: 0; inset-inline-end: 0; width: 109px; height: 64px; /* 180deg, not a plain scaleY(-1). The source file draws the solid band along its BOTTOM edge, two diamonds spiking UP out of it at x~23/49, and the mass tapering to nothing at the RIGHT. The design needs all three inverted at once - solid edge against the hero above, diamonds hanging below, and the mass weighted toward the right - which is a rotation, not a mirror. Flipping only vertically fixed the first two but left the taper on the wrong side, so the shape read as twisted. */ transform: rotate(180deg); pointer-events: none; } /* The horizontal mirror of rotate(180deg) is scaleY(-1). */ [dir="rtl"] .smt-agenda-corner-shape-mobile { transform: scaleY(-1); } } /* The matching bottom-left corner diamond (.smt-agenda-corner-diamond, agenda-corner-bottom.svg) was removed: this section was immediately followed by .smt-diamond-divider + the stats section's own corner artwork, and the two motifs sitting back to back at that seam read as redundant clutter rather than two intentional accents. NOTE: that stats artwork has since gone too (BIL-818), so the clash this describes no longer exists - the agenda diamond could be reinstated on its own merits if wanted. Left out for now: removing it was a separate decision and BIL-818 does not ask for it back. */ @media (max-width: 991.98px) { .smt-agenda-corner-shape { display: none; } } .smt-agenda-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 64px; } .smt-agenda-head h2 { font-size: 40px; font-weight: 700; color: var(--hr-brown-500); margin: 0; } /* The design breaks this heading before its highlighted words ("Two Days of" / "Ideas & Impact."). That used to be a
in the blade, but the title is admin-authored plain text now, so the break belongs here - on the accent span, the only part the markup still identifies. */ .smt-agenda-head h2 .hr-accent { display: block; } /* BIL-596: Figma (node 40002408:52500) draws this button as a translucent glass chip (matching the Button glass recipe used across the revamped pages), not the solid-white .hr-btn-ghost-dark treatment shared with the speakers section below — scoped here so that other .hr-btn-ghost-dark usages on this page/home are untouched. Now carries the home hero's "Watch the story" treatment (.home-revamp .hr-btn-ghost-light): the .2 white fill behind a 20px backdrop blur, a real 1.5px border, the five-layer ambient shadow, and the shared glass rim + hover ellipse from layout-revamp.css, which this selector is added to there. Two things deliberately NOT copied from it: colour - that button sits on the home hero's dark VIDEO and paints its label #fff. This band is cream, so #fff would be invisible; the existing brown-400 label stays. align-self - left to the page's own flex-start, as .smt-agenda-head is a centred flex row and vertical placement here is a layout choice rather than part of the effect. Padding drops to home's 14.5/22.5 so that the 1.5px border stacked on top still totals the design's 56px - a flat 16/24 plus the border made it 59px, which is why this rule previously used an inset ring and border:0. */ .smt-agenda-head .hr-btn-ghost-dark { padding: 14.5px 22.5px; border: 1.5px solid transparent; background: rgba(255,255,255,.2); color: var(--hr-brown-400); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 4px 6.1px rgba(255,255,255,.23), 7px 63px 18px rgba(0,0,0,.02), 2px 23px 14px rgba(0,0,0,.02), 1px 10px 10px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.03); } /* Both properties are restated, not inherited: .summit-revamp .hr-btn-ghost-dark:hover (above) paints background:#fff and swaps in a lifted shadow, and it has the same specificity as this rule, so dropping them here let a solid white lozenge through on hover. Home holds its resting fill and shadow and lights the ::before ellipse instead - which is only visible if the fill underneath stays translucent. */ .smt-agenda-head .hr-btn-ghost-dark:hover { color: var(--hr-brown-400); background: rgba(255,255,255,.2); box-shadow: inset 0 4px 6.1px rgba(255,255,255,.23), 7px 63px 18px rgba(0,0,0,.02), 2px 23px 14px rgba(0,0,0,.02), 1px 10px 10px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.03); } .smt-agenda-grid { display: flex; flex-wrap: wrap; gap: 80px; } /* Figma's 80px is a two-column gutter measured at its full 1400px+ frame. Below that it's a fixed 80px bite out of a shrinking row, so the two day cards lose width much faster than the section does — taper it instead. */ @media (max-width: 1399.98px) { .smt-agenda-grid { gap: 56px; } } .smt-agenda-card { flex: 1 1 340px; min-width: 0; } .smt-agenda-card-head { border-bottom: 1px dashed var(--hr-brown-400); padding-bottom: 24px; margin-bottom: 24px; } .smt-agenda-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.4); border: 1px solid rgba(176,201,218,.3); border-radius: 56px; padding: 8px 8px 8px 12px; margin-bottom: 24px; } [dir="rtl"] .smt-agenda-badge { padding: 8px 12px 8px 8px; } .smt-agenda-badge .smt-icon-mask { width: 18px; height: 18px; color: var(--hr-blue-500); flex-shrink: 0; } /* :not(.smt-icon-mask) matters — without it this pill styling (background, padding) hijacks the icon span too, since it's also a here, which overrides the icon's own background-color:currentColor and stretches its box via padding, making the star look washed-out/wrong-sized. */ .smt-agenda-badge span:not(.smt-icon-mask) { background: var(--hr-blue-50); color: var(--hr-blue-500); border-radius: 56px; padding: 8px 16px; font-weight: 700; font-size: 14px; } .smt-agenda-card-head h3 { font-size: 28px; font-weight: 700; color: var(--hr-brown-700); margin: 0 0 16px; } .smt-agenda-time { display: flex; align-items: center; gap: 8px; font-size: 20px; color: var(--hr-brown-700); } .smt-agenda-time .smt-icon-mask { width: 20px; height: 20px; color: var(--hr-yellow-500); } .smt-agenda-desc { font-size: 18px; color: var(--hr-brown-400); line-height: 1.6; margin-bottom: 16px; } /* The card title doubles as the schedule-modal trigger, so it's a