/*! * LifeLearn Directory — stylesheet * File: ll-directory-styles-v1.css <-- CSS. Belongs in css/. RENAMED in 1.32.0. * Guard: If a page renders unstyled, check this file's SIZE on the server * first (~126 KB). The ?ver= string reports the plugin version whether * or not the file at that path is the right one. * Version: 1.52.0 (must match LLD_VER in lifelearn-directory.php — the enqueue * is versioned to it, so a mismatch serves a cached file) * Deploy: wp-content/lifelearn-assets/css/ll-directory-styles-v1.css * NOT inside the plugin — the plugin enqueues from lifelearn-assets so * this can be hot-fixed without re-uploading the zip. * * Contents * 1 Primitives ............ wrap, buttons, crumbs, icon defaults * 2 Archive hero .......... Aurora gradient stack, aurora ribbons, grain * 3 Centre dial ........... Browse + Location selector (lives in the hero) * 4 Toolbar .............. count, shortlist, sort, grid/map toggle * 5 Cards ................ logo variant, photo banner variant, why-line * 6 Featured rail ........ 3-up portrait posters * 7 Map .................. Leaflet overrides, pins, popups * 8 Single listing ....... hero medallion, glance tiles, section rows * 9 Search results ....... intent line, correction notice * 10 Theme containment .... BuddyBoss site-content-grid fixes * * Conventions * - Every rule is prefixed .lld- so nothing leaks into BuddyBoss. * - Colour literals are deliberate, not tokens: this file is edited in a * browser File Manager, where a missing custom property is hard to debug. * - Sections are appended in version order, so late rules intentionally * override earlier ones. Check the newest section first when a value looks * wrong. * - Anything decorative is disabled under prefers-reduced-motion. */ /* ---------- 1. Primitives ---------- */ .lld-wrap{max-width:1120px;margin:0 auto;padding:0 20px} .lld-btn{border:0;border-radius:10px;padding:12px 18px;font-family:Outfit,system-ui,sans-serif;font-weight:600; font-size:14.5px;cursor:pointer;background:#0E9F8B;color:#fff;text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:8px} .lld-btn:hover{background:#0B8676;color:#fff} .lld-btn.is-ghost{background:#fff;color:#0E1B3D;border:1px solid rgba(14,27,61,.13)} .lld-btn.is-onnavy{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.28)} .lld-btn.is-wa{background:#1FA855} .lld-btn.is-wa:hover{background:#17903f} .lld-btn.is-block{width:100%} .lld-stack{display:flex;flex-direction:column;gap:9px} .lld-crumbs{font-size:12.5px;color:#9FB2CE;margin-bottom:14px} .lld-crumbs a{color:#9FB2CE;text-decoration:none} .lld-hint{font-size:13px;color:#8494AC} .lld svg,.lld-badge svg,.lld-hbadge svg,.lld-place svg,.lld-ico svg,.lld-btn svg{stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* ---------- 2. Archive hero — Aurora (v1.7.2) ---------- */ .lld-ahero{color:#fff;padding:40px 0 0;position:relative;overflow:hidden; background: radial-gradient(70% 100% at 78% -10%, rgba(46,207,184,.30) 0%, rgba(46,207,184,0) 55%), radial-gradient(60% 90% at 18% 6%, rgba(88,120,255,.20) 0%, rgba(88,120,255,0) 60%), radial-gradient(120% 130% at 50% 130%, rgba(3,12,26,.95) 0%, rgba(3,12,26,0) 60%), linear-gradient(150deg,#050F22 0%,#0A1A38 40%,#0D2F44 74%,#10475A 100%)} /* blurred aurora ribbons give the light somewhere to come from */ .lld-aur{position:absolute;inset:-20% -10% auto -10%;height:150%;pointer-events:none;opacity:.5;z-index:0; background: conic-gradient(from 210deg at 30% 20%, rgba(159,240,223,.16), transparent 28%), conic-gradient(from 20deg at 80% 30%, rgba(140,180,255,.12), transparent 24%); filter:blur(28px)} /* grain stops a gradient this large banding on cheaper panels */ .lld-grain{position:absolute;inset:0;pointer-events:none;opacity:.04;z-index:0; background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);background-size:3px 3px} .lld-ahero>.lld-wrap{position:relative;z-index:1} @media(max-width:700px){.lld-aur{filter:blur(20px);opacity:.4}} .lld-ahero h1{font-family:Outfit,system-ui,sans-serif;font-size:clamp(2rem,4.3vw,2.95rem);font-weight:800;letter-spacing:-.015em; letter-spacing:-.015em;line-height:1.12;margin:0;color:#fff} .lld-ahero h1 em{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:600;color:#FFE9B8} .lld-eyebrow-hero{display:inline-flex;align-items:center;gap:8px;font-family:Outfit,system-ui,sans-serif; font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#9FF0DF;margin-bottom:18px} .lld-eyebrow-hero::before{content:"";width:26px;height:2px;background:#0E9F8B;border-radius:2px} .lld-lede{color:#C4D3E6;max-width:56ch;margin:8px 0 0;font-size:15.5px} .lld-searchbar{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap} .lld-searchbar input{flex:1 1 300px;min-width:0;border:0;border-radius:10px;padding:13px 15px;font:inherit;color:#16233F} .lld-searchbar input:focus{outline:2px solid #9FF0DF;outline-offset:1px} /* layout */ .lld-abody{display:block;padding:22px 0 56px} .lld-sbody{display:grid;grid-template-columns:1fr;gap:24px;padding:26px 0 56px} @media(min-width:920px){.lld-abody{display:block;padding:26px 0 60px}.lld-sbody{grid-template-columns:1fr 320px}} .lld-panel{background:#fff;border:1px solid rgba(14,27,61,.13);border-radius:14px;padding:16px;align-self:start} .lld-panel h3{font-family:Outfit,system-ui,sans-serif;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#8494AC;margin:0 0 9px} .lld-panel h3+h3,.lld-facet+h3{margin-top:18px} .lld-facet{display:flex;align-items:center;gap:8px;font-size:14px;padding:5px 0;text-decoration:none;color:#16233F} .lld-facet:hover{color:#0B8676} .lld-facet .lld-n{margin-left:auto;font-size:12px;color:#8494AC} .lld-facet.is-off{opacity:.45;pointer-events:none} .lld-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px} .lld-count{font-size:14px;color:#5B6B85;margin:0} .lld-sortwrap{margin-left:auto;display:flex;align-items:center;gap:8px} .lld-sortwrap label{font-size:12.5px;color:#5B6B85} .lld-sortwrap select{font:inherit;font-size:14px;padding:8px 12px;border:1px solid rgba(14,27,61,.13);border-radius:9px;color:#16233F;background:#fff} .lld-sortwrap select:focus{outline:2px solid #0E9F8B;outline-offset:1px} /* card */ .lld-grid{display:grid;grid-template-columns:1fr;gap:15px} @media(min-width:680px){.lld-grid{grid-template-columns:repeat(2,1fr)}} .lld-card{background:#fff;border:1px solid rgba(14,27,61,.13);border-radius:14px;padding:16px;display:flex;flex-direction:column} .lld-card:focus-within,.lld-btn:focus-visible,.lld-ico:focus-visible,.lld-facet:focus-visible, .lld-sortwrap select:focus-visible{outline:3px solid #9FF0DF;outline-offset:2px} @media(prefers-reduced-motion:no-preference){ .lld-card{transition:border-color .16s ease,box-shadow .16s ease} .lld-card:hover{border-color:rgba(14,159,139,.4);box-shadow:0 8px 22px rgba(5,11,30,.07)} } .lld-eyebrow{font-family:Outfit,system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.11em; text-transform:uppercase;color:#0B8676;margin:0 0 9px} .lld-top{display:flex;gap:13px;align-items:flex-start} .lld-logo{width:104px;aspect-ratio:16/9;flex:none;border-radius:9px;border:1px solid rgba(14,27,61,.13); background:#fff;display:grid;place-items:center;overflow:hidden;padding:6px} .lld-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block} .lld-logo.is-mono{border:0;padding:0;background:linear-gradient(135deg,#0E1B3D,#0F4A3E);color:#9FF0DF; font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:20px} /* hero medallion — matches the live GD single (snippet 78 llh-badge/llh-medallion) */ .lld-hbadge{position:relative;display:inline-flex;flex:none} .lld-hbadge::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:150px;height:150px;border-radius:50%; background:radial-gradient(circle,rgba(46,207,184,.45),rgba(46,207,184,0) 68%);filter:blur(6px);z-index:0} .lld-medallion{position:relative;z-index:1;width:88px;height:88px;border-radius:22px; display:flex;align-items:center;justify-content:center;overflow:hidden; background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.7); box-shadow:0 14px 30px rgba(7,16,38,.45),0 0 0 6px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.9)} .lld-medallion img{width:100%;height:100%;object-fit:contain;display:block;padding:8px} .lld-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-family:Outfit,system-ui,sans-serif;font-weight:800;font-size:32px;letter-spacing:-.5px; text-transform:uppercase;color:#0E1B3D} .lld-gatebox--main{margin-bottom:16px;text-align:left;padding:24px} .lld-gatebox--main h3{font-size:19px;margin:0 0 6px} .lld-t{min-width:0} .lld-card h2{font-family:Outfit,system-ui,sans-serif;font-size:18.5px;line-height:1.2;margin:0;letter-spacing:-.01em} .lld-card h2 a{color:inherit;text-decoration:none} .lld-card h2 a:hover{color:#0B8676} .lld-role{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:14px;color:#5B6B85;margin:4px 0 0;line-height:1.35} .lld-place{display:flex;align-items:center;gap:5px;font-size:13px;color:#8494AC;margin:12px 0 0} .lld-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px} .lld-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#43536E; border:1px solid rgba(14,27,61,.13);background:#FBFCFD;border-radius:7px;padding:4px 8px} .lld-badge svg{color:#0B8676} .lld-facts{display:flex;flex-wrap:wrap;gap:0 18px;margin:13px 0 0;padding-top:12px;border-top:1px solid rgba(14,27,61,.13)} .lld-facts dt{font-family:Outfit,system-ui,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:#8494AC} .lld-facts dd{margin:1px 0 0;font-size:14px;font-weight:500;white-space:nowrap} .lld-foot{display:flex;align-items:center;gap:7px;margin-top:14px} .lld-ico{width:32px;height:32px;border-radius:8px;border:1px solid rgba(14,27,61,.13);background:#fff; display:grid;place-items:center;color:#5B6B85;text-decoration:none;flex:none} .lld-ico:hover{border-color:#0E9F8B;color:#0B8676} .lld-ico.is-wa{border-color:rgba(31,168,85,.3);color:#1FA855;background:#F4FBF6} .lld-go{margin-left:auto;font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:13.5px;color:#0B8676;text-decoration:none} .lld-go:hover{text-decoration:underline} .lld-lock{background:#F2F7F6;border:1px solid rgba(14,159,139,.22);border-radius:9px;padding:8px 11px; font-size:12.5px;color:#0B5E52;display:flex;gap:8px;align-items:center;margin:13px 0 0} .lld-lock a{font-family:Outfit,system-ui,sans-serif;font-weight:600;color:#0B8676;margin-left:auto;text-decoration:none;white-space:nowrap} .lld-pager{display:flex;gap:6px;justify-content:center;margin-top:26px} .lld-pager .page-numbers{width:36px;height:36px;border-radius:9px;border:1px solid rgba(14,27,61,.13);background:#fff; display:grid;place-items:center;font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:14px; text-decoration:none;color:#5B6B85} .lld-pager .page-numbers.current{background:#0E1B3D;color:#fff;border-color:#0E1B3D} .lld-empty{background:#fff;border:1px solid rgba(14,27,61,.13);border-radius:14px;padding:34px;text-align:center} .lld-empty h2{font-family:Outfit,system-ui,sans-serif;font-size:20px;margin:0 0 6px} .lld-empty p{color:#5B6B85;margin:0 0 14px} /* single */ .lld-shero{background:linear-gradient(126deg,#08243B 0%,#0E1B3D 44%,#0F4A3E 100%);color:#fff;padding:30px 0 26px} .lld-sid{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .lld-sid-t{flex:1 1 320px;min-width:0} /* colour is EXPLICIT, never inherited: the theme ships its own h1 colour rule, and any matching selector beats inheritance from .lld-shero — which is why this title rendered near-black on the dark hero while every sibling (each carrying its own colour) was fine. */ .lld-shero h1{font-family:Outfit,system-ui,sans-serif;font-size:clamp(25px,3.4vw,34px);line-height:1.12;margin:0;color:#fff} .lld-srole{font-family:Fraunces,Georgia,serif;font-style:italic;color:#FFE9B8;font-size:17px;margin:6px 0 0} .lld-smeta{display:flex;gap:14px;flex-wrap:wrap;color:#C4D3E6;font-size:14px;margin:14px 0 0} .lld-smeta b{color:#fff;font-weight:500} .lld-sacts{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 0} .lld-block{background:#fff;border:1px solid rgba(14,27,61,.13);border-radius:14px;padding:20px;margin-bottom:16px} .lld-block h2{font-family:Outfit,system-ui,sans-serif;font-size:19px;margin:0 0 10px} .lld-block h4{font-family:Outfit,system-ui,sans-serif;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#8494AC;margin:0 0 9px} .lld-block p{margin:0 0 12px;font-size:15.5px} .lld-kv{display:grid;grid-template-columns:150px 1fr;gap:9px 16px;font-size:14.8px;margin:0} .lld-kv.is-tight{grid-template-columns:74px 1fr;font-size:14px} .lld-kv dt{color:#5B6B85} .lld-kv dd{margin:0} .lld-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px} .lld-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;background:#DDE6EA} .lld-hours div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed rgba(14,27,61,.13);font-size:14.5px} .lld-hours .is-today{font-weight:700;color:#0B8676} .lld-sticky{position:sticky;top:16px} .lld-gatebox{border:1px solid rgba(14,159,139,.3);background:#F4FAF9;border-radius:14px;padding:18px;text-align:center} .lld-gatebox h3{font-family:Outfit,system-ui,sans-serif;font-size:17px;margin:0} .lld-gatebox p{color:#5B6B85;font-size:14.5px;margin:6px 0 12px} .lld-pills{display:flex;gap:6px;flex-wrap:wrap} .lld-pills a{font-size:12.5px;background:#F1F5F7;border-radius:6px;padding:4px 9px;color:#3E4E68;font-weight:500;text-decoration:none} .lld-pills a:hover{background:#E4F5F1;color:#0B5E52} @media(max-width:520px){.lld-gal{grid-template-columns:repeat(2,1fr)}.lld-kv{grid-template-columns:1fr}} /* ---- v1.4: absorbed single design (was snippets 66-79) ---- */ .lld-hero-col{display:flex;flex-direction:column;align-items:center;gap:13px;max-width:680px;margin:0 auto;text-align:center} .lld-shero{text-align:center} .lld-shero .lld-crumbs{text-align:left} .lld-h-eyebrow{display:inline-flex;align-items:center;padding:6px 15px;border-radius:999px; border:1px solid rgba(94,208,191,.42);color:#3ECFB8;background:rgba(46,207,184,.06); font-family:Outfit,system-ui,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase} .lld-sloc{display:flex;align-items:center;gap:6px;font-size:.9rem;color:rgba(255,255,255,.72);margin:0} .lld-creds{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .lld-cred{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:500;color:#DCE9F5; border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:999px;padding:5px 12px} .lld-cred svg{color:#9FF0DF} .lld-glance{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px} @media(min-width:620px){.lld-glance{grid-template-columns:repeat(4,1fr)}} .lld-glance .lld-tile{background:#F7FAFC;border:1px solid rgba(14,27,61,.13);border-radius:12px;padding:13px 14px;text-align:center} .lld-glance .lld-tile .k{font-family:Outfit,system-ui,sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#8494AC;margin:0} .lld-glance .lld-tile .v{font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:1rem;color:#0E1B3D;margin:4px 0 0} .lld-sec-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0; border-bottom:1px dashed rgba(14,27,61,.13);font-size:.94rem} .lld-sec-row:last-of-type{border-bottom:0} .lld-sec-row .k{color:#5B6B85;flex:none} .lld-sec-row .v{text-align:right} .lld-sec-row.is-today{font-weight:700;color:#0B8676} .lld-toc a{display:block;font-size:.88rem;color:#3E4E68;padding:4px 0;text-decoration:none} .lld-toc a:hover{color:#0B8676} .lld-gatelist{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px} .lld-gatelist span{font-size:.76rem;background:#fff;border:1px solid rgba(14,27,61,.13);border-radius:999px; padding:5px 12px;color:#5B6B85} .lld-btn.is-wa{background:#1FA855} .lld-btn.is-wa:hover{background:#17903f} /* Single root per template: the theme's site-content-grid is a no-wrap flex row, so multiple top-level blocks became columns. One .lld-page child ends that. */ .lld-page{flex:1 1 100%;width:100%;max-width:100%;min-width:0;display:block} /* ---- v1.4.2: containment inside the BuddyBoss content wrapper ---- The theme lays its content area out with flex, which turned the hero and the body grid into flex siblings (hero became a tall left column) and let the card grid overflow. These rules force each top-level block to own a full row. */ .lld-ahero,.lld-shero,.lld-abody,.lld-sbody{width:100%;max-width:100%;flex:0 0 100%;float:none;clear:both} .lld-ahero,.lld-shero{display:block} .lld-abody,.lld-sbody{box-sizing:border-box} .lld-abody>*,.lld-sbody>*{min-width:0} /* stops grid children forcing overflow */ .lld-grid,.lld-panel,.lld-card{min-width:0;max-width:100%} .lld-card *{min-width:0} .lld-top{align-items:center} .lld-t{flex:1 1 auto} .lld-card h2{overflow-wrap:normal;word-break:normal;hyphens:none} .lld-card .lld-t{flex:1 1 auto;min-width:8rem} .lld-card .lld-logo{width:clamp(74px,26%,104px)} .lld-facts{row-gap:10px} .lld-facts>div{flex:0 0 auto} /* the theme adds glows to some inline elements; keep chips flat */ .lld-badge,.lld-chip,.lld-facts,.lld-place{box-shadow:none !important;filter:none !important} .lld-badge::before,.lld-badge::after{content:none} @media(min-width:660px) and (max-width:1100px){.lld-grid{grid-template-columns:1fr}} /* ---- v1.5: assisted search results, hero grammar, facet icons ---- */ .lld-locknote{display:flex;align-items:center;gap:8px;font-size:.85rem;color:rgba(255,255,255,.62);margin:16px 0 0} .lld-locknote svg{color:#9FF0DF} .lld-fic{flex:none;width:15px;height:15px;object-fit:contain;opacity:.85} .lld-intent{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:1.05rem;color:#3E4E68;margin:0 0 14px} .lld-searching{color:#5B6B85;padding:24px 0} .lld-resgrid{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:680px){.lld-resgrid{grid-template-columns:repeat(2,1fr)}} .lld-rescard{background:#fff;border:1px solid rgba(14,27,61,.13);border-radius:14px;padding:18px} .lld-rescard h2{font-family:Outfit,system-ui,sans-serif;font-size:1.12rem;margin:0} .lld-rescard h2 a{color:inherit;text-decoration:none} .lld-rescard h2 a:hover{color:#0B8676} .lld-why{font-family:Fraunces,Georgia,serif;font-style:italic;color:#0B5E52;font-size:.92rem;margin:6px 0 0} .lld-resmeta{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#8494AC;margin:8px 0 0} .lld-ressum{font-size:.92rem;color:#43536E;margin:9px 0 12px} .lld-clearwrap{margin:18px 0 0} .lld-clear{font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.88rem;color:#0B8676;text-decoration:none} .lld-clear:hover{text-decoration:underline} /* ---- v1.5.2: spelling correction notice ---- */ .lld-corrected{font-size:.92rem;color:#5B6B85;margin:0 0 8px} .lld-corrected b{color:#0B5E52;font-weight:600} /* ============ v1.6: shortlist, featured, photo cards, map ============ */ /* --- save button --- */ .lld-save{margin-left:auto;flex:none;width:31px;height:31px;border-radius:9px;cursor:pointer; border:1px solid rgba(14,27,61,.13);background:#fff;color:#8494AC; display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0; transition:color .16s ease,border-color .16s ease,transform .16s ease} .lld-save:hover{color:#E0526B;border-color:rgba(224,82,107,.4)} .lld-save.is-on{color:#E0526B;border-color:rgba(224,82,107,.45);background:#FFF5F7} .lld-save.is-on svg{fill:#E0526B} .lld-save.has-label{width:auto;padding:0 16px;height:44px;border-radius:999px; font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.95rem} .lld-save.just-changed{transform:scale(1.14)} .lld-savewrap{display:inline-flex} .lld-sacts .lld-save{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);color:#fff} .lld-sacts .lld-save.is-on{background:#fff;color:#E0526B} .lld-viewlink{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:#5B6B85; border:1px solid rgba(14,27,61,.13);background:#fff;border-radius:999px;padding:7px 14px;text-decoration:none} .lld-viewlink:hover,.lld-viewlink.is-on{color:#0B5E52;border-color:rgba(14,159,139,.4)} .lld-viewlink .lld-n{background:#EDF3F1;border-radius:999px;padding:1px 7px;font-size:.75rem;font-weight:600} /* --- view toggle --- */ .lld-viewtoggle{display:inline-flex;border:1px solid rgba(14,27,61,.13);border-radius:999px;background:#fff;padding:3px} .lld-viewtoggle button{border:0;background:none;cursor:pointer;border-radius:999px;padding:7px 15px; font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.85rem;color:#5B6B85} .lld-viewtoggle button.is-on{background:#0E1B3D;color:#fff} /* --- featured --- */ .lld-rail{margin-bottom:26px} .lld-railhead{font-family:Outfit,system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:#8494AC;margin:0 0 12px;display:flex;align-items:center;gap:9px} .lld-railhead::after{content:"";flex:1;height:1px;background:rgba(14,27,61,.13)} .lld-railgrid{display:grid;grid-template-columns:1fr;gap:15px} @media(min-width:680px){ /* auto-fit so a single featured card fills the row instead of being crushed into a third of it, which was breaking the title onto one word per line */ .lld-railgrid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))} } /* v1.20.1: v1.10's featured border retired — the Gilt below owns featured now. */ /* v1.20.1: the ribbon-era eyebrow clearance was removed with the ribbon. */ .lld-ribbon{position:absolute;top:12px;right:12px;z-index:2;background:#0E1B3D;color:#FFE9B8; font-family:Outfit,system-ui,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;border-radius:999px;padding:5px 12px;box-shadow:0 4px 12px rgba(5,11,30,.28)} /* --- photo-led card --- */ .lld-card{position:relative;padding:0;overflow:hidden} .lld-cbody{padding:16px;display:flex;flex-direction:column;flex:1} .lld-photo{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#DDE6EA} .lld-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .lld-card.is-photo:hover .lld-photo img{transform:scale(1.045)} .lld-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:62%; background:linear-gradient(to top,rgba(6,14,32,.72),transparent)} .lld-photo-logo{position:absolute;left:12px;bottom:12px;z-index:1;width:46px;height:46px;border-radius:12px; background:#fff;display:grid;place-items:center;padding:5px;box-shadow:0 6px 16px rgba(5,11,30,.3)} .lld-photo-logo img{max-width:100%;max-height:100%;object-fit:contain} .lld-photo-cat{position:absolute;left:12px;top:12px;z-index:1;font-family:Outfit,system-ui,sans-serif; font-size:.63rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#fff; background:rgba(6,14,32,.55);backdrop-filter:blur(3px);border-radius:999px;padding:5px 11px} .lld-card.is-photo .lld-top{gap:0} /* --- map --- */ #lld-map{height:min(70vh,620px);border-radius:16px;overflow:hidden;border:1px solid rgba(14,27,61,.13); background:#EEF2F6;box-shadow:0 10px 30px rgba(5,11,30,.07)} .lld-maploading{padding:40px;text-align:center;color:#8494AC} .lld-pin{background:none;border:0} .lld-pin-in{display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 50% 6px; transform:rotate(-45deg);background:linear-gradient(135deg,#0E1B3D,#0F4A3E); border:2px solid #fff;box-shadow:0 5px 14px rgba(5,11,30,.35);overflow:hidden} .lld-pin-in img,.lld-pin-in span{transform:rotate(45deg)} .lld-pin-in img{width:22px;height:22px;object-fit:contain;background:#fff;border-radius:4px;padding:1px} .lld-pin-in span{font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:.68rem;color:#9FF0DF} .leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 12px 34px rgba(5,11,30,.2)} .leaflet-popup-content{margin:14px 16px} .lld-pop-cat{font-family:Outfit,system-ui,sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:#0B8676;margin:0 0 4px} .lld-pop h3{font-family:Outfit,system-ui,sans-serif;font-size:1rem;margin:0 0 4px} .lld-pop h3 a{color:#0E1B3D;text-decoration:none} .lld-pop-meta{font-size:.82rem;color:#8494AC;margin:0} .lld-pop-price{font-size:.85rem;font-weight:600;color:#16233F;margin:4px 0 0} .lld-pop-approx{font-size:.72rem;color:#8494AC;font-style:italic;margin:5px 0 0} .lld-pop-go{display:inline-block;margin-top:9px;font-family:Outfit,system-ui,sans-serif;font-weight:600; font-size:.82rem;color:#0B8676;text-decoration:none} @media(prefers-reduced-motion:reduce){ .lld-card.is-photo:hover .lld-photo img{transform:none} .lld-save.just-changed{transform:none} } /* ================= v1.6.2 ================= */ /* --- hero sits in its own column, centred against the parent --- The previous full-bleed used calc(50% - 50vw), which assumes the content column is centred in the viewport. BuddyBoss puts an icon rail down the left, so that maths over-shifted the hero. Bleeding relative to the parent keeps it correct whatever the theme does with the column. --- */ .lld-ahero,.lld-shero{margin-inline:0;padding-inline:0;max-width:100%} .lld-ahero{border-radius:0 0 26px 26px} .lld-shero{border-radius:0 0 22px 22px} /* --- images: never stretch, never letterbox oddly --- */ .lld-logo img,.lld-photo-logo img,.lld-medallion img{object-fit:contain;object-position:center; width:100%;height:100%;display:block} .lld-photo img,.lld-gal img{object-fit:cover;object-position:center} .lld-fic{object-fit:contain} .lld-pin-in img{object-fit:contain} /* --- container queries: cards respond to their own column, not the viewport --- This is what makes a comfortable three-up possible: below 330px of card width the header stacks instead of squeezing the title beside the logo. */ .lld-grid,.lld-railgrid{container-type:inline-size} .lld-card{container-type:inline-size;container-name:lldcard} @container lldcard (max-width: 330px){ .lld-top{flex-wrap:wrap;gap:10px} .lld-logo{width:64px} .lld-t{flex:1 1 100%;order:3} .lld-save{order:2} .lld-facts{gap:0 14px} .lld-facts dd{font-size:.85rem} .lld-badge{font-size:.68rem;padding:4px 7px} } @container lldcard (min-width: 331px){ .lld-logo{width:96px} } /* three across, comfortably: 300px floor rather than a fixed fraction */ @media(min-width:1080px){ .lld-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} } .lld-cbody{gap:0} /* --- why-line above the title on search results --- */ .lld-why{display:flex;align-items:flex-start;gap:7px;margin:0;padding:12px 16px; font-family:Fraunces,Georgia,serif;font-style:italic;font-size:.9rem;line-height:1.45;color:#0B5E52; background:linear-gradient(180deg,#F2FAF8,#FFF);border-bottom:1px solid rgba(14,159,139,.18)} .lld-why svg{margin-top:3px;color:#0E9F8B} .lld-card.has-why{border-color:rgba(14,159,139,.32)} /* --- panel: grouped, capped, foldable --- */ .lld-facetgroup + .lld-facetgroup{margin-top:20px;padding-top:16px;border-top:1px solid rgba(14,27,61,.1)} .lld-facet{gap:9px} .lld-fname{flex:1;min-width:0} .lld-facet.is-child{padding-left:22px;font-size:.86rem;color:#5B6B85} .lld-facet.is-on{color:#0B5E52;font-weight:600} .lld-more{margin-top:4px} .lld-more summary{cursor:pointer;font-size:.8rem;color:#0B8676;padding:5px 0;list-style:none; font-family:Outfit,system-ui,sans-serif;font-weight:600} .lld-more summary::-webkit-details-marker{display:none} .lld-more summary::before{content:"+ ";} .lld-more[open] summary::before{content:"– ";} .lld-more.is-empty summary{color:#8494AC;font-weight:500} .lld-more[open] summary{margin-bottom:2px} /* --- active filter chips --- */ .lld-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .lld-fchip{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:#0B5E52; background:#EDF7F4;border:1px solid rgba(14,159,139,.28);border-radius:999px;padding:6px 13px;text-decoration:none} .lld-fchip:hover{background:#E0F1EC} .lld-fchip span[aria-hidden]{font-size:1rem;line-height:1;color:#0B8676} /* --- content-visibility: only pays off past a screenful, harmless before --- */ .lld-grid > .lld-card:nth-child(n+7){content-visibility:auto;contain-intrinsic-size:auto 420px} /* --- view transitions, where supported --- */ @view-transition{navigation:auto} @media(prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important} } /* --- :has() tidy-ups, no PHP branching needed --- */ .lld-card:has(.lld-photo) .lld-cbody{padding-top:14px} .lld-card:not(:has(.lld-badges)) .lld-facts{margin-top:12px} .lld-bar:has(.lld-viewtoggle) .lld-sortwrap{margin-left:0} /* ---- v1.6.3: card geometry + panel without counts + needs chips ---- */ /* fixed-height photo band so photo and logo cards align in one row; foot pinned to the bottom so no variant leaves a well of white space */ .lld-photo{aspect-ratio:auto;height:150px} .lld-rail .lld-photo,.lld-railgrid .lld-photo{height:220px} .lld-card{display:flex;flex-direction:column} .lld-cbody{display:flex;flex-direction:column;flex:1} .lld-foot{margin-top:auto;padding-top:13px} .lld-facts{margin-bottom:0} /* panel counts gone; rows breathe a little more */ .lld-panel .lld-n{display:none} .lld-facet{padding:7px 2px} .lld-more.is-empty summary::before{content:""} .lld-more.is-empty summary{font-style:italic} /* ================= v1.7.0 — no panel, banner cards, poster rail ================= */ /* panel gone */ .lld-panel{display:none} /* --- grid: three across on desktop --- */ .lld-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px} @media(min-width:1120px){.lld-grid{grid-template-columns:repeat(3,1fr)}} /* --- photo card: 16:9 banner, name over the fade --- */ .lld-media{position:relative;aspect-ratio:16/9;background:#DDE6EA;height:auto} .lld-media>a{display:block;width:100%;height:100%} .lld-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .lld-card.is-photo:hover .lld-media img{transform:scale(1.04)} .lld-media::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(6,14,32,.4) 0%,rgba(6,14,32,0) 34%,rgba(6,14,32,.74) 100%)} .lld-mcat{position:absolute;left:12px;top:11px;z-index:2;font-family:Outfit,system-ui,sans-serif;font-size:.6rem; font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(6,14,32,.44); backdrop-filter:blur(4px);border-radius:999px;padding:5px 11px} .lld-mover{position:absolute;left:14px;right:14px;bottom:11px;z-index:2;display:flex;align-items:flex-end;gap:11px} .lld-mlogo{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center; font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:.9rem;color:#0B5E52;overflow:hidden; box-shadow:0 5px 15px rgba(5,11,30,.32)} .lld-mlogo img{width:100%;height:100%;object-fit:contain;padding:5px} .lld-mover h2{font-family:Outfit,system-ui,sans-serif;font-size:1.06rem;line-height:1.2;margin:0} .lld-mover h2 a{color:#fff;text-decoration:none;text-shadow:0 2px 10px rgba(5,11,30,.45)} .lld-mover .lld-role{color:rgba(255,255,255,.85);font-size:.8rem;margin:2px 0 0;text-shadow:0 1px 8px rgba(5,11,30,.4)} .lld-card.is-photo .lld-cbody{padding-top:13px} .lld-savebar{display:flex;justify-content:flex-end;margin-bottom:-6px} /* --- featured rail: two up, poster treatment --- */ .lld-railgrid{grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:18px} @media(max-width:900px){.lld-railgrid{grid-template-columns:1fr}} .lld-poster{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:flex-end; border:1px solid rgba(14,27,61,.12);background:linear-gradient(140deg,#0A2A46,#0E1B3D 55%,#123F52)} .lld-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lld-poster::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(6,14,32,.46) 0%,rgba(6,14,32,.04) 32%,rgba(6,14,32,.85) 76%)} .lld-poster.is-mono::after{background:linear-gradient(180deg,rgba(6,14,32,.1),rgba(6,14,32,.62))} .lld-poster-mark{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:2;width:96px;height:96px; border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:grid; place-items:center;font-family:Outfit,system-ui,sans-serif;font-weight:800;font-size:2rem;color:#9FF0DF;overflow:hidden} .lld-poster-mark img{width:74%;height:74%;object-fit:contain} .lld-poster-top{position:absolute;top:13px;left:14px;right:14px;z-index:3;display:flex;gap:10px;align-items:flex-start} .lld-poster-top .lld-mcat{position:static} .lld-poster-top .lld-save{margin-left:auto;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff} .lld-poster-top .lld-save.is-on{background:#fff;color:#E0526B} .lld-ribbon.is-static{position:static} .lld-poster-panel{position:relative;z-index:3;width:100%;padding:17px;color:#fff;display:flex;flex-direction:column;gap:10px} .lld-poster-panel h2{font-family:Outfit,system-ui,sans-serif;font-size:1.35rem;line-height:1.16;margin:0} .lld-poster-panel h2 a{color:#fff;text-decoration:none} .lld-poster-panel .lld-role{color:rgba(255,255,255,.86);margin:3px 0 0} .lld-poster-panel .lld-place{color:rgba(255,255,255,.7);margin:5px 0 0} .lld-glass{background:rgba(255,255,255,.13);backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.22); border-radius:13px;padding:10px 13px;display:flex;align-items:center;gap:13px;flex-wrap:wrap} .lld-gist{display:flex;flex-wrap:wrap;gap:4px 13px;font-size:.8rem;color:rgba(255,255,255,.9);margin:0} .lld-pprice{font-family:Outfit,system-ui,sans-serif;font-weight:700;margin:0 0 0 auto;color:#fff} .lld-pgo{color:#0A2A22;background:#9FF0DF;border-radius:999px;padding:7px 15px; font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.83rem;text-decoration:none} .lld-pgo:hover{background:#B9F6E9} @media(prefers-reduced-motion:reduce){.lld-card.is-photo:hover .lld-media img{transform:none}} /* ============ v1.7.2 — centre dial, Aurora (inside the hero) ============ */ .lld-dial{position:relative;margin-top:24px;overscroll-behavior:contain;padding:17px 18px 18px;display:flex;flex-direction:column;gap:12px; border-radius:20px 20px 0 0;border:1px solid rgba(255,255,255,.14);border-bottom:0; background: linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.045) 40%,rgba(255,255,255,.02) 100%), linear-gradient(180deg,rgba(3,12,26,.34),rgba(3,12,26,.10)); backdrop-filter:blur(9px) saturate(1.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 14px 26px -16px rgba(0,0,0,.6), 0 -1px 0 rgba(0,0,0,.22), 0 20px 44px -20px rgba(0,0,0,.6)} /* dashed guide marking the selection point */ .lld-dial::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:1px;top:13px;bottom:56px; background:repeating-linear-gradient(180deg,rgba(159,240,223,.6) 0 4px,transparent 4px 9px);pointer-events:none;z-index:1} /* mint seam where the panel meets the hero */ .lld-dial::after{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(159,240,223,.5),transparent)} .lld-dialrow{display:flex;align-items:center;gap:12px;position:relative} .lld-dlabel{flex:none;width:78px;font-family:Outfit,system-ui,sans-serif;font-size:.62rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)} .lld-dview{flex:1;min-width:0;position:relative;height:48px;display:flex;align-items:center;border-radius:13px; background:linear-gradient(180deg,rgba(3,12,26,.26),rgba(3,12,26,.07)); box-shadow:inset 0 1px 7px rgba(0,0,0,.34),inset 0 -1px 0 rgba(255,255,255,.07)} .lld-dview::before,.lld-dview::after{content:"";position:absolute;top:0;bottom:0;width:72px;pointer-events:none;z-index:2} .lld-dview::before{left:0;border-radius:13px 0 0 13px;background:linear-gradient(90deg,rgba(7,22,44,.94) 18%,rgba(7,22,44,0))} .lld-dview::after{right:0;border-radius:0 13px 13px 0;background:linear-gradient(270deg,rgba(13,47,62,.94) 18%,rgba(13,47,62,0))} .lld-dtrack{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none; scroll-snap-type:x mandatory;padding:0 42%;width:100%;outline:none; /* stops a horizontal drag or trackpad swipe chaining out to the page */ overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pinch-zoom} .lld-dtrack::-webkit-scrollbar{display:none} .lld-dtrack:focus-visible{box-shadow:0 0 0 2px rgba(159,240,223,.5);border-radius:13px} /* focus lens: out-of-centre options recede */ .lld-ditem{flex:none;scroll-snap-align:center;white-space:nowrap;cursor:pointer;text-decoration:none; font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.89rem;color:rgba(255,255,255,.74); padding:10px 16px;border-radius:12px;opacity:.42;transform:scale(.9);filter:blur(.35px); display:inline-flex;align-items:center;gap:7px; transition:opacity .22s cubic-bezier(.2,.7,.3,1),transform .22s cubic-bezier(.2,.7,.3,1), filter .22s ease,background .22s ease,color .22s ease} .lld-ditem:hover{opacity:.8;filter:none;color:#fff} .lld-ditem.is-sel{color:#06231D;opacity:1;transform:scale(1.03);filter:none; background:linear-gradient(180deg,#B9F7EA,#9FF0DF 52%,#7CE2CD); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 3px rgba(4,20,16,.28),0 9px 24px rgba(159,240,223,.32)} .lld-ditem.is-sel .lld-fic{filter:brightness(0)} .lld-ditem.is-dim{opacity:.22;cursor:default;filter:none} .lld-ditem.is-dim i{font-style:normal;font-weight:500;font-size:.76rem} .lld-dhead{flex:none;font-family:Outfit,system-ui,sans-serif;font-size:.57rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.32);padding:0 12px;pointer-events:none;align-self:center} /* type-to-filter */ .lld-typebox{flex:none;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.09);border-radius:999px;padding:8px 14px;font-size:.82rem; color:rgba(255,255,255,.6);min-width:158px} .lld-typebox input{border:0;outline:0;font-family:inherit;font-size:.82rem;width:100%;background:none;color:#fff} .lld-typebox input::placeholder{color:rgba(255,255,255,.42)} /* A-Z: full alphabet always, 32px targets */ .lld-dial .lld-jump{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;padding-top:3px} .lld-jletter{width:32px;height:32px;border:1px solid rgba(255,255,255,.16);border-radius:9px; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 1px 2px rgba(0,0,0,.24); font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.82rem;color:rgba(255,255,255,.78); cursor:pointer;padding:0;transition:border-color .15s ease,color .15s ease} .lld-jletter:hover:not(:disabled){border-color:#9FF0DF;color:#9FF0DF} .lld-jletter.is-off{opacity:.24;cursor:default} .lld-jletter:disabled{pointer-events:none} /* search bar agrees with the dial's lift */ .lld-searchbar input{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 30px -12px rgba(0,0,0,.6)} .lld-searchbar .lld-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px -8px rgba(11,143,124,.7)} @media(max-width:620px){ .lld-dialrow{flex-wrap:wrap} .lld-dlabel{width:100%} .lld-typebox{width:100%} .lld-jletter{width:34px;height:34px} } @media(prefers-reduced-motion:reduce){ .lld-ditem{filter:none;transition:none} .lld-dtrack{scroll-behavior:auto} } /* ---- featured rail at three across, portrait posters ---- */ .lld-rail{margin-top:30px} .lld-railgrid{grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:1000px){.lld-railgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.lld-railgrid{grid-template-columns:1fr}} .lld-poster{aspect-ratio:4/5;border-radius:16px} .lld-poster-panel{padding:14px} .lld-poster-panel h2{font-size:1.06rem} .lld-poster-panel .lld-role{font-size:.79rem} .lld-poster-panel .lld-place{font-size:.75rem} .lld-glass{padding:9px 11px;gap:9px;border-radius:11px} .lld-gist{font-size:.73rem;gap:3px 10px} .lld-pprice{font-size:.83rem} .lld-pgo{padding:6px 12px;font-size:.77rem} .lld-poster-mark{width:78px;height:78px;border-radius:20px;font-size:1.6rem;top:40%} .lld-poster-top{top:11px;left:12px;right:12px} .lld-poster-top .lld-mcat{font-size:.57rem;padding:4px 9px} .lld-ribbon.is-static{font-size:.57rem;padding:4px 10px;margin-left:auto} .lld-poster-top .lld-save{width:30px;height:30px} /* ---- toolbar: sort beside the view toggle ---- */ .lld-barright{margin-left:auto;display:flex;align-items:center;gap:10px} .lld-sortwrap{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(14,27,61,.12);border-radius:999px; background:#fff;padding:0 4px 0 14px;height:44px;margin:0} .lld-sortwrap label{font-size:.78rem;color:#8494AC} .lld-sortwrap select{border:0;background:none;font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.85rem; color:#16233F;padding:8px 10px 8px 4px;cursor:pointer} .lld-viewtoggle{height:44px;align-items:center} .lld-bar{align-items:center} /* ---- v1.7.4: seamless region swap ---- */ /* The swapped region animates as one piece; the hero and dial are outside it and never move. min-height is set inline during a swap to hold the floor. */ #lld-results{view-transition-name:lld-results;contain:layout style} #lld-results[aria-busy="true"]{opacity:.72;transition:opacity .12s ease} @media(prefers-reduced-motion:no-preference){ ::view-transition-old(lld-results){animation:lld-out .16s ease both} ::view-transition-new(lld-results){animation:lld-in .22s ease both} } @keyframes lld-out{to{opacity:0}} @keyframes lld-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* posters and card media already carry aspect-ratio, so images landing late cannot change the region's height mid-swap */ .lld-poster,.lld-media{contain:layout paint} /* ================= v1.8.0 — cards fold to content, mobile fixes ================= */ /* Cards size to their own content instead of stretching to the tallest in the row. A tutor with two badges was being padded out to match a photo card with seven, which is the "elongated card with no data" — the foot was pinned to the bottom of a height it never needed. */ .lld-grid{align-items:start} .lld-railgrid{align-items:start} .lld-foot{margin-top:14px} /* was auto: no longer pushing to a false floor */ .lld-cbody{flex:0 1 auto} /* save button sits in the photo, not on a row of its own beneath it */ .lld-msave{position:absolute;top:10px;right:10px;z-index:3} .lld-msave .lld-save{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff; backdrop-filter:blur(4px)} .lld-msave .lld-save.is-on{background:#fff;color:#E0526B;border-color:#fff} .lld-savebar{display:none} /* facts: let a long value wrap rather than forcing the card wider or spilling */ .lld-facts{gap:10px 18px} .lld-facts dd{white-space:normal;overflow-wrap:anywhere} .lld-facts>div{flex:0 1 auto;min-width:0} /* ---- mobile: the grid floor was unconditional, so 340px overflowed a 360px phone and the whole page scrolled sideways ---- */ .lld-grid{grid-template-columns:1fr} @media(min-width:700px){.lld-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}} @media(min-width:1120px){.lld-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:400px){.lld-wrap{padding:0 14px}} /* dial on a phone: 42% side padding left ~50px of visible centre, so the neighbouring options — the whole point of the dial — were invisible */ @media(max-width:620px){ .lld-dtrack{padding:0 calc(50% - 92px)} .lld-ditem{font-size:.86rem;padding:9px 13px} .lld-dial{padding:14px 13px 15px} .lld-dview{height:44px} } /* iOS force-zooms any input under 16px and leaves the page zoomed */ .lld-typebox input,.lld-sortwrap select,.lld-searchbar input{font-size:16px} /* tap targets */ .lld-ico{width:40px;height:40px} .lld-save{width:40px;height:40px} .lld-jletter{width:36px;height:36px} /* v1.51.0 — the card heart was never reached by the rule above. .lld-card>.lld-save (child combinator + class, specificity 0,2,0) beats the bare .lld-save{width:40px} (0,1,0) regardless of source order, so the most- tapped icon in the directory stayed 32px on touch despite the tap-target fix existing two rules away. Scoped to pointer:coarse so the desktop 32px is untouched. Originally written against 1.49.x and lost when the asset moved on; re-applied here against the live file. */ @media(pointer:coarse){ .lld-card>.lld-save{width:40px;height:40px} } @media(max-width:620px){.lld-jletter{width:38px;height:38px}} /* iOS URL bar changes vh mid-scroll; dvh does not */ #lld-map{height:min(70dvh,620px)} @supports not (height:1dvh){#lld-map{height:min(70vh,620px)}} /* the aurora already steps down on small screens; the dial's blur did not */ @media(max-width:700px){ .lld-dial{backdrop-filter:blur(4px)} .lld-glass{backdrop-filter:blur(5px)} } /* ================= v1.8.1 — non-scrollable dial, tidy grid, poster glass ================= */ /* The dial is a selector, not a scroller. overflow:hidden removes native scrolling and momentum entirely — the wheel, a swipe, a click, an arrow key and the A-Z are the only ways it moves, and every one steps the selection through centreOn(). scrollLeft remains programmable under overflow:hidden, so the existing positioning code is untouched. */ .lld-dtrack{overflow-x:hidden;scroll-snap-type:none;touch-action:pan-y; overscroll-behavior-x:none} /* poster glass: the facts line owns row one; price and View share row two. Deliberate two rows instead of accidental wrapping — "View" can no longer end up orphaned under the facts. */ .lld-glass{flex-wrap:wrap;row-gap:8px} .lld-gist-row{flex:1 1 100%;min-width:0} .lld-pprice{margin-left:0} .lld-poster .lld-pgo{margin-left:auto} /* the +N overflow chip */ .lld-badge.is-more{color:#8494AC;border-style:dashed;background:transparent} /* tidy grid: with badges capped the heights converge; keep cards on their own content but align the visual rhythm */ .lld-cbody{padding-bottom:14px} .lld-foot{padding-top:12px;border-top:1px solid rgba(14,27,61,.08)} /* search bar: full-width read as a void next to a 44px button */ .lld-searchbar{max-width:640px} @media(max-width:700px){.lld-searchbar{max-width:none}} /* ================= v1.9.0 — W2: search in the well ================= */ /* The dial holds three rungs now: Search, Browse, Location. Tighter gaps than 1.8.1 because the panel is doing more work in less height. */ .lld-dial{gap:9px;padding:14px 16px 13px;margin-top:18px} .lld-dial::before{bottom:11px} /* guide stops short of the A-Z */ .lld-dialrow{gap:11px} .lld-dlabel{width:70px;font-size:.6rem} .lld-dview{height:44px} /* row zero: a real white input inside the dark well. The inner shadow is kept strong deliberately — a search field on a dark ground needs the contrast or it stops looking like the primary action. */ .lld-dialrow.is-search{display:flex;align-items:center;margin:0} .lld-dview.is-input{background:none;box-shadow:none;overflow:visible;height:46px;display:flex;align-items:center} .lld-dview.is-input input{width:100%;max-width:600px;height:46px;border:0;border-radius:12px;padding:0 16px; font:inherit;font-size:16px;color:#16233F; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -12px rgba(0,0,0,.6)} .lld-dview.is-input input:focus{outline:2px solid #9FF0DF;outline-offset:2px} .lld-dgo{flex:none;height:46px;padding:0 24px;border:0;border-radius:12px;cursor:pointer; font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.92rem;color:#fff; background:linear-gradient(180deg,#14C4A9,#0B8F7C); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px -10px rgba(11,143,124,.7)} .lld-dgo:hover{background:linear-gradient(180deg,#17D3B6,#0C9C87)} /* the old standalone bar is gone */ /* hero: less padding above, none below — the dial is now the last thing in it */ .lld-ahero{padding:30px 0 0} .lld-ahero h1{font-size:clamp(1.6rem,3.1vw,2.15rem);margin:6px 0 4px} .lld-lede{font-size:.9rem;max-width:640px} /* A-Z hidden until the town filter is used */ .lld-dial .lld-jump[hidden]{display:none} .lld-dial .lld-jump{padding-top:6px;margin-top:2px;border-top:1px solid rgba(255,255,255,.09)} @media(max-width:700px){ .lld-dialrow.is-search{flex-wrap:wrap} .lld-dialrow.is-search .lld-dlabel{width:100%} .lld-dview.is-input{flex:1 1 200px} .lld-dgo{padding:0 18px} } @media(max-width:620px){ .lld-dial{padding:12px 12px 12px;gap:8px} .lld-dview{height:42px} } /* ================= v1.9.1 — cards on a fixed row structure ================= */ /* * The grid looked random because each card was free to be any height: badges * wrapped to one, two or three rows, roles to one or three lines, facts to one * or two. Nine cards, nine heights. * * Every card is now the same set of fixed-height slots — header, place, badges, * facts, foot — so a logo card is always the same height as another logo card, * and a photo card is that plus its 16:9 banner. Rows level up on their own and * equal-height stretch becomes safe again, which removes both the raggedness * and the white wells that stretching used to cause. */ .lld-grid{align-items:stretch} .lld-card{display:flex;flex-direction:column} .lld-cbody{display:flex;flex-direction:column;flex:1 1 auto;gap:0} /* header: name one line, role two — clamped, not wrapped away */ .lld-top{align-items:flex-start;min-height:60px} .lld-t{min-width:0;flex:1} .lld-card h2{font-size:1.02rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical; overflow:hidden;word-break:break-word} .lld-card .lld-role{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:2.6em;margin-top:3px} .lld-card.is-photo .lld-role{min-height:0;-webkit-line-clamp:1} /* place: always one line */ .lld-place{min-height:20px;margin:11px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* badges: exactly one row, ever. Overflow becomes +N. */ .lld-badges{display:flex;flex-wrap:nowrap;overflow:hidden;gap:6px;margin-top:11px;min-height:30px;align-items:center} .lld-badge{flex:none;white-space:nowrap} .lld-badge.is-more{flex:none} /* facts: four fixed columns on one line, values never wrap */ .lld-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;margin-top:12px;padding-top:12px; border-top:1px solid rgba(14,27,61,.1);min-height:52px;align-content:start} .lld-facts>div{min-width:0} .lld-facts dt{font-size:.56rem;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lld-facts dd{font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} /* foot: pinned, so every card ends on the same line */ .lld-foot{margin-top:auto;padding-top:13px;display:flex;align-items:center;gap:9px} /* photo cards: banner plus the identical body below it */ .lld-card.is-photo .lld-cbody{padding-top:13px} @media(max-width:520px){ .lld-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;min-height:0} .lld-top{min-height:0} .lld-card .lld-role{min-height:0} } /* ================= v1.9.2 — legibility + Aurora true to mockup D ================= */ /* town filter: the theme paints inputs white, so white text vanished into it. Both are now forced — dark translucent box, white text — beyond any theme rule. */ .lld-dial .lld-typebox{background:rgba(3,12,26,.36);border-color:rgba(255,255,255,.22)} .lld-dial .lld-typebox input{background:transparent!important;color:#fff!important; -webkit-text-fill-color:#fff;caret-color:#9FF0DF} .lld-dial .lld-typebox input::placeholder{color:rgba(255,255,255,.45);-webkit-text-fill-color:rgba(255,255,255,.45)} /* search input: the track's edge-fade gradients were painting over the first word of the placeholder. The search row has no track, so no fades at all. */ .lld-dview.is-input::before,.lld-dview.is-input::after{display:none} /* ---- Aurora, deeper (mockup D) ---- */ /* five layers: two auroral glows, a violet counter-glow, the depth vignette, and the base sweep */ .lld-ahero{background: radial-gradient(70% 100% at 78% -10%, rgba(46,207,184,.34) 0%, rgba(46,207,184,0) 55%), radial-gradient(60% 90% at 18% 6%, rgba(88,120,255,.24) 0%, rgba(88,120,255,0) 60%), radial-gradient(45% 70% at 55% 30%, rgba(20,196,169,.12) 0%, rgba(20,196,169,0) 65%), radial-gradient(120% 130% at 50% 130%, rgba(2,9,21,.97) 0%, rgba(2,9,21,0) 62%), linear-gradient(150deg,#040D1E 0%,#0A1A38 38%,#0D2F44 72%,#114B5F 100%)} /* ribbons behind the type: bigger, brighter, slower blur */ .lld-aur{opacity:.65;filter:blur(34px);inset:-25% -12% auto -12%;height:165%; background: conic-gradient(from 210deg at 28% 18%, rgba(159,240,223,.22), transparent 30%), conic-gradient(from 15deg at 82% 28%, rgba(140,180,255,.17), transparent 26%)} /* grain over the whole surface, not just the flats */ .lld-grain{opacity:.055;z-index:2} .lld-ahero>.lld-wrap{z-index:3} /* the dial: a deeper well with a brighter mint seam */ .lld-dial{border-color:rgba(255,255,255,.17); background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.02)), linear-gradient(180deg,rgba(2,9,21,.44),rgba(2,9,21,.10)); box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 16px 30px -18px rgba(0,0,0,.7), 0 18px 44px -22px rgba(0,0,0,.6)} .lld-dial::before{background:repeating-linear-gradient(180deg,rgba(159,240,223,.7) 0 4px,transparent 4px 9px); box-shadow:0 0 12px rgba(159,240,223,.35)} .lld-dview{background:linear-gradient(180deg,rgba(2,9,21,.34),rgba(2,9,21,.08)); box-shadow:inset 0 1px 7px rgba(0,0,0,.38)} @media(max-width:700px){.lld-aur{filter:blur(22px);opacity:.5}} /* ================= v1.10.0 — the final card ================= */ /* * One structure for every listing. Three independent ceilings stop anything * overwhelming the body: the showcase sentence is capped by the field AND * clamped by line; pills shrink before they overflow; the tile rack is a fixed * height whatever it holds. Nothing can exceed its slot, so no clamp is ever * fighting content and rows level without help. */ .lld-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(14,27,61,.12); border-radius:16px;overflow:visible; transition:border-color .18s ease,box-shadow .18s ease} .lld-card:hover{border-color:rgba(14,159,139,.42);box-shadow:0 10px 30px -16px rgba(5,11,30,.34)} .lld-card:focus-within{border-color:#0E9F8B;box-shadow:0 0 0 3px rgba(14,159,139,.18)} .lld-cbody{position:relative;display:flex;flex-direction:column;flex:1;padding:14px 15px 12px;gap:0} /* the stretched link: one anchor, whole-card target, one tab stop */ .lld-card .lld-jump{color:inherit;text-decoration:none} .lld-card .lld-jump::after{content:"";position:absolute;inset:0;z-index:1;border-radius:16px} .lld-card .lld-save,.lld-strip,.lld-ico,.lld-go.is-up{position:relative;z-index:2} /* heart: top-right, out of the content flow, larger than before */ .lld-card>.lld-save{position:absolute;top:11px;right:12px;width:32px;height:32px;border-radius:9px; border:1px solid rgba(14,27,61,.12);background:#fff;color:#C9D1DE;display:grid;place-items:center;cursor:pointer; transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease} .lld-card>.lld-save svg{width:16px;height:16px} .lld-card>.lld-save:hover{color:#E0526B;border-color:rgba(224,82,107,.38)} .lld-card>.lld-save.is-on{background:#FFF5F7;color:#E0526B;border-color:rgba(224,82,107,.45)} .lld-card>.lld-save.is-on svg{fill:currentColor;width:17px;height:17px} .lld-savebar,.lld-msave{display:none} /* eyebrow: larger — it is the card's category signpost. Right padding keeps a long category clear of the heart. */ .lld-eyebrow{font-family:Outfit,system-ui,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#0B5E52;padding-right:52px;min-height:16px;margin:0} /* head: role sits under the title inside the text column, sharing the logo's height instead of starting a new row — about 14px off every card */ .lld-top{display:flex;gap:12px;align-items:flex-start;margin-top:9px;min-height:0} .lld-logo{flex:none;width:62px;height:62px;border-radius:15px;display:grid;place-items:center;overflow:hidden; background:linear-gradient(135deg,#0E1B3D,#0F4A3E);color:#9FF0DF; font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:1.08rem} .lld-logo img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff} .lld-t{min-width:0;flex:1;padding-top:2px;display:block} .lld-card h2{font-family:Outfit,system-ui,sans-serif;font-size:1.02rem;font-weight:700;line-height:1.22; letter-spacing:-.005em;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lld-card .lld-role{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-family:'DM Sans',system-ui,sans-serif;font-style:normal;font-size:.83rem;font-weight:500;color:#5B6B85; line-height:1.3;margin-top:3px;min-height:2.1em} .lld-place{font-size:.8rem;color:#8494AC;margin:9px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:19px} /* ---- showcase slot: tile rack with the label ---- 1.40.0: these were bare `.lld-tile` — the same class the single's "At a glance" facts tiles use. Two owners, identical specificity, and this block sits later in the file, so it won every contested property: the facts tiles were being handed height:62px, padding:0, background:none and cursor:pointer. The .lld-jump collision of 1.11.4, repeated. Both families are now scoped to the container that actually emits them. No values changed. ---- */ .lld-slab{font-family:Outfit,system-ui,sans-serif;font-size:.53rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#8494AC;margin:11px 0 0;min-height:13px} .lld-strip{display:flex;gap:6px;margin-top:5px;min-height:62px} .lld-strip .lld-tile{flex:1 1 0;min-width:0;height:62px;border-radius:10px;overflow:hidden;position:relative; border:1px solid rgba(14,27,61,.08);padding:0;background:none;cursor:pointer;display:block} .lld-strip .lld-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .lld-strip .lld-tile:hover img{transform:scale(1.06)} .lld-strip .lld-tile.is-count::after{content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center; background:rgba(6,14,32,.55);color:#fff;font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:.86rem} .lld-strip .lld-tile.is-said{flex:1 1 100%;border:0;padding:9px 12px;display:flex;align-items:center;cursor:default; background:linear-gradient(135deg,#0E1B3D 0%,#123A4A 58%,#0F5A4C 100%);color:#DCE9E6;text-align:left} .lld-strip .lld-tile.is-said .lld-mark{font-family:Outfit,system-ui,sans-serif;font-size:1.45rem;font-weight:700;color:#9FF0DF; opacity:.55;line-height:1;margin-right:9px;align-self:flex-start} .lld-strip .lld-tile.is-said>span:last-child{font-size:.78rem;line-height:1.4; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .lld-strip .lld-tile.is-empty{flex:1 1 100%;border-style:dashed;background:#FBFCFD;display:grid;place-items:center; color:#8494AC;font-size:.76rem;cursor:default} /* ---- pills: one row; a long credential narrows instead of overflowing ---- */ .lld-badges{display:flex;flex-wrap:nowrap;gap:6px;margin-top:10px;min-height:28px;align-items:center;overflow:hidden} .lld-badge{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:500; color:#43536E;border:1px solid rgba(14,27,61,.12);border-radius:9px;padding:5px 9px;background:#fff} .lld-badge>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lld-badge svg{flex:none} .lld-badge.is-more{flex:none;color:#8494AC;border-style:dashed;background:transparent} .lld-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;margin-top:10px;padding-top:10px; border-top:1px solid rgba(14,27,61,.09);min-height:0} .lld-facts dt{font-size:.54rem;letter-spacing:.09em} .lld-facts dd{font-size:.82rem;margin-top:2px} .lld-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:11px;border-top:0} .lld-ico{width:38px;height:38px;border-radius:10px} .lld-go{margin-left:auto;font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.84rem;color:#0E9F8B; text-decoration:none} .lld-card:hover .lld-go{text-decoration:underline} /* ---- the gallery modal ---- */ .lld-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:22px} .lld-modal.is-open{display:flex} .lld-mback{position:absolute;inset:0;background:rgba(4,11,26,.72);backdrop-filter:blur(6px)} .lld-mbox{position:relative;z-index:1;width:min(720px,100%);background:#fff;border-radius:20px;overflow:hidden; box-shadow:0 30px 80px -20px rgba(2,8,20,.7)} .lld-mstage{position:relative;aspect-ratio:4/3;background:#0B1730} .lld-mstage img{width:100%;height:100%;object-fit:cover;display:block} .lld-mx,.lld-mnav{position:absolute;z-index:3;border:0;cursor:pointer;color:#fff;background:rgba(6,14,32,.55); backdrop-filter:blur(4px)} .lld-mx{top:12px;right:12px;width:40px;height:40px;border-radius:12px;font-size:1rem} .lld-mnav{top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;font-size:1.1rem} .lld-mnav.is-prev{left:12px}.lld-mnav.is-next{right:12px} .lld-mnav:hover,.lld-mx:hover{background:rgba(6,14,32,.78)} .lld-mcount{position:absolute;left:14px;bottom:12px;z-index:3;font-family:Outfit,system-ui,sans-serif;font-size:.68rem; font-weight:700;color:#fff;background:rgba(6,14,32,.5);border-radius:999px;padding:5px 11px} .lld-mbar{display:flex;align-items:center;gap:14px;padding:13px 16px} .lld-mbar h3{font-family:Outfit,system-ui,sans-serif;font-size:.98rem;font-weight:700;margin:0} .lld-mbar p{font-size:.76rem;color:#8494AC;margin:2px 0 0} .lld-mgo{margin-left:auto;flex:none;height:40px;padding:0 18px;border-radius:11px;background:#0E1B3D;color:#fff; font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:.86rem;display:inline-flex;align-items:center; text-decoration:none} .lld-mgo:hover{background:#16295A} @media(max-width:520px){ .lld-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px} .lld-card .lld-role{min-height:0} .lld-eyebrow{padding-right:56px} } /* ---- 1.10.0: the photo/logo card split is gone ---------------------------- .lld-media, .lld-mover, .lld-mlogo, .lld-mcat and .is-photo are no longer emitted by card.php. The rules above are left in place because the featured poster still uses some of them; these two lines make sure nothing from the old variant can reappear on a grid card if a cached fragment survives. */ .lld-card .lld-media,.lld-card .lld-mover,.lld-card .lld-mcat{display:none} .lld-card.is-photo .lld-cbody{padding-top:14px} /* ================= v1.10.1 — make the live card match the mockup ================= */ /* * Two faults, both from rules written before the 1.10.0 card existed. * * 1. A container query at 330px stacked the head — logo on one row, title * full-width below it with order:3. That was right for the old card, where * the title sat beside a 64px logo AND a save button. The save button is out * of the flow now, so the head has room and should never stack above 260px. * * 2. Badges were given flex:0 1 auto so a long credential could narrow. In * practice four pills all narrowed at once and every label ellipsised to * "Insur…". They do not shrink at all now — the row clips whole pills and * the +N chip carries the remainder, which is what the mockup does. */ @container lldcard (max-width: 330px){ .lld-top{flex-wrap:nowrap;gap:12px} .lld-logo{width:62px;height:62px} .lld-t{flex:1 1 auto;order:0;min-width:0} } @container lldcard (max-width: 260px){ .lld-top{flex-wrap:wrap} .lld-t{flex:1 1 100%;order:0} } .lld-card .lld-t{min-width:0} /* pills: never squeeze — clip whole chips instead */ .lld-badges{flex-wrap:nowrap;overflow:hidden} .lld-badge{flex:none;min-width:0} .lld-badge>span{overflow:visible;text-overflow:clip;white-space:nowrap} .lld-badge.is-more{flex:none} /* the theme centres headings and paragraphs inside articles on some templates; the card is always left-aligned */ .lld-card,.lld-cbody,.lld-card h2,.lld-card .lld-role,.lld-card .lld-place{text-align:left} .lld-card h2 a{text-align:left} /* wrap: match the mockup's measure rather than the theme's full-width column */ .lld-page .lld-wrap{max-width:1120px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px} .lld-grid{grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:1000px){.lld-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.lld-grid{grid-template-columns:1fr}} /* ================= v1.10.2 — crown row, badge fitting, title alignment ================= */ /* Crown: category left, featured ribbon right, both clear of the heart. The ribbon was pinned top-right — the heart's corner — so featured cards had the two stacked on each other. */ .lld-crown{display:flex;align-items:center;gap:8px;padding-right:52px;min-height:22px} .lld-crown .lld-eyebrow{padding-right:0;min-height:0;flex:0 1 auto;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lld-card .lld-ribbon.is-static{position:static;flex:none;margin-left:auto; font-family:Outfit,system-ui,sans-serif;font-size:.55rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;background:#0E1B3D;color:#FFE9B8;border-radius:999px;padding:4px 10px;white-space:nowrap} /* Title and role share one left edge. Explicit rather than inherited: the h2 is a -webkit-box for line clamping, and box-pack decides alignment there. */ .lld-card .lld-t,.lld-card .lld-t h2,.lld-card .lld-t h2 a,.lld-card .lld-role{ text-align:left;-webkit-box-pack:start;justify-content:flex-start} .lld-card .lld-t h2{margin-left:0;padding-left:0} /* Badges: JS hides whichever chips do not fit whole and rewrites the +N, so a partial chip can never be clipped at the card edge. These rules just make the measurement honest — no shrinking, no ellipsis. */ .lld-badges{flex-wrap:nowrap;overflow:hidden;min-height:30px} .lld-badge{flex:none;min-width:0;white-space:nowrap} .lld-badge[hidden]{display:none} .lld-badge>span{overflow:visible;text-overflow:clip} /* ================= v1.10.3 — the search row was invisible, not missing ================= */ /* * The input never had a background-color. It had border:0, a white inset * highlight and a drop shadow — everything except the white itself — so on the * dark well it rendered transparent and the row read as absent. The theme's own * input background had been the thing filling it before our stylesheet started * loading last, which is why it only became invisible after the load-order fix. * * Belt and braces: colour, caret and placeholder are forced past any theme rule, * the same way the town filter had to be. */ .lld-dial .lld-dview.is-input input{ background:#fff!important;-webkit-text-fill-color:#16233F;color:#16233F!important; caret-color:#0E9F8B;border:0;appearance:none;-webkit-appearance:none} .lld-dial .lld-dview.is-input input::placeholder{color:#7C8AA3;-webkit-text-fill-color:#7C8AA3;opacity:1} .lld-dial .lld-dview.is-input input::-webkit-search-cancel-button{-webkit-appearance:none} /* the Go button sits on the dark ground, so give it the same lift as the input */ .lld-dial .lld-dgo{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px -10px rgba(11,143,124,.7)} /* the label was 78px wide and faint; match the other rows and lift the contrast */ .lld-dial .lld-dialrow.is-search .lld-dlabel{width:70px;color:rgba(255,255,255,.62)} /* ================= v1.11.0 — hero true to mockup D, plus a sticky search ================= */ /* ---- D's typography ---- */ .lld-ahero h1 em{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;color:#9FF0DF} .lld-eyebrow-hero::before{height:1px;background:#9FF0DF;opacity:.75;border-radius:0} .lld-lede{color:rgba(255,255,255,.74)} .lld-ahero{padding:40px 0 0} .lld-ahero h1{font-size:clamp(2rem,4.3vw,2.95rem);margin:10px 0 6px} .lld-lede{max-width:610px;font-size:.96rem} /* ---- the standalone search bar is back ---- */ /* .lld-searchbar was display:none from the W2 fold-in; D puts it above the dial as its own object, so it is restored here rather than by deleting that rule — additive, and the W2 rule stays available if the fold-in is ever wanted back. */ .lld-searchbar{display:flex;gap:10px;margin-top:22px;max-width:none;align-items:stretch} .lld-searchbar input{flex:1;min-width:0;height:58px;border:0;border-radius:15px;padding:0 20px; font:inherit;font-size:16px;background:#fff!important;color:#16233F!important;-webkit-text-fill-color:#16233F; caret-color:#0E9F8B;appearance:none;-webkit-appearance:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 30px -12px rgba(0,0,0,.6)} /* BuddyBoss puts a magnifier background-image and padding-left:2rem on every input[type=search]; the image is overridden above, the padding is not. */ .lld-searchbar input[type=search]{padding-left:20px;background-image:none!important} .lld-searchbar input::placeholder{color:#7C8AA3;-webkit-text-fill-color:#7C8AA3;opacity:1} .lld-searchbar input::-webkit-search-cancel-button{-webkit-appearance:none} .lld-searchbar input:focus{outline:2px solid #9FF0DF;outline-offset:3px} .lld-searchbar .lld-btn{flex:none;height:58px;padding:0 30px;border-radius:15px;font-size:1rem; background:linear-gradient(180deg,#14C4A9,#0B8F7C); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px -8px rgba(11,143,124,.7)} .lld-searchbar .lld-btn:hover{background:linear-gradient(180deg,#17D3B6,#0C9C87)} .lld-dial{margin-top:22px} /* the A-Z is part of the instrument again */ .lld-dial .lld-jump{padding-top:8px;margin-top:4px;border-top:1px solid rgba(255,255,255,.09)} /* ---- sticky search ---- */ /* Fixed, not sticky: the hero is overflow:hidden for the aurora ribbons and position:sticky cannot escape that. z-index 611 sits one below BuddyBoss's fixed header (612) so it slides under rather than over it. */ .lld-stick{position:fixed;left:0;right:0;top:var(--lld-stick-top,0px);z-index:611; transform:translateY(-110%);opacity:0;pointer-events:none; transition:transform .24s cubic-bezier(.2,.7,.3,1),opacity .18s ease; background:linear-gradient(180deg,rgba(6,17,36,.96),rgba(6,17,36,.9)); backdrop-filter:blur(10px) saturate(1.1); border-bottom:1px solid rgba(159,240,223,.18); box-shadow:0 14px 34px -18px rgba(0,0,0,.7)} .lld-stick.is-on{transform:none;opacity:1;pointer-events:auto} .lld-stick-in{max-width:1120px;margin:0 auto;padding:10px 20px} .lld-stick form{display:flex;gap:9px;align-items:stretch} .lld-stick input{flex:1;min-width:0;height:44px;border:0;border-radius:12px;padding:0 16px; font:inherit;font-size:16px;background:#fff!important;color:#16233F!important;-webkit-text-fill-color:#16233F; caret-color:#0E9F8B;appearance:none;-webkit-appearance:none;background-image:none!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} .lld-stick input::placeholder{color:#7C8AA3;-webkit-text-fill-color:#7C8AA3;opacity:1} .lld-stick input:focus{outline:2px solid #9FF0DF;outline-offset:2px} .lld-stick .lld-btn{flex:none;height:44px;padding:0 22px;border-radius:12px; background:linear-gradient(180deg,#14C4A9,#0B8F7C)} @media(prefers-reduced-motion:reduce){.lld-stick{transition:none}} @media(max-width:700px){ .lld-searchbar{flex-wrap:wrap} .lld-searchbar input{height:52px;flex:1 1 100%} .lld-searchbar .lld-btn{height:48px;flex:1 1 100%;padding:0 20px} .lld-stick-in{padding:8px 14px} .lld-stick .lld-btn{padding:0 16px} } /* ================= v1.11.1 — the search bar was being hidden by an inline rule ================= */ /* * ROOT CAUSE of the search bar never appearing, in W2 and in D alike. * * An inline