/* Theme Name: YumYak Child Theme URI: https://www.yumyak.ca/ Description: 2026 redesign layer for the YumYak theme: new logo, #f25812 orange, Fraunces + Inter, cream editorial look. Restyles the parent markup; JS, ads, GTranslate and the cookie banner come from the parent, and only the Contact, Shop, front-page and single-restaurant templates are forked. 1.1: content hubs (neighbourhood, cuisine, Michelin, events). 1.3: Amazon.ca Associates compliant Shop and product blocks, footer disclosure, Google Consent Mode v2 region defaults. Author: YumYak Template: yumyak Version: 1.3.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: yumyak-child */ /* ===================================================================== 0. Tokens (override parent custom properties; light scheme only) ===================================================================== */ :root, html body{ --bg:#fafaf7; --paper:#ffffff; --ink:#141414; --muted:#5f5f5a; --rust:#bf4209; /* text-safe orange on cream (5.0:1) */ --orange:#f25812; /* brand orange (fills, ink text on it 5.4:1) */ --orange-l:#ff8a4c; /* orange text on dark */ --line:#e4e2dc; --soft:#f2f0eb; --cream:#f2f0eb; --shadow:0 10px 30px rgba(20,20,20,.08); --yy-serif:"Fraunces",Georgia,"Times New Roman",serif; --yy-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --yy-r:14px; color-scheme:light; } @media (prefers-color-scheme:dark){ :root,html body{--bg:#fafaf7;--paper:#fff;--ink:#141414;--muted:#5f5f5a;--line:#e4e2dc;--soft:#f2f0eb;--cream:#f2f0eb;color-scheme:light} html body{background:#fafaf7;color:#141414} } /* ===================================================================== 1. Base type ===================================================================== */ html body{background:var(--bg);color:var(--ink);font-family:var(--yy-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} body h1,body h2,body h3,body h4{font-family:var(--yy-serif);font-weight:650;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"opsz" 72} body a{color:inherit} body ::selection{background:var(--orange);color:#141414} body :focus-visible{outline:3px solid var(--orange);outline-offset:2px} body .eyebrow{display:inline-block;font-family:var(--yy-sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);margin:0 0 10px;padding:0;background:none;border:0} body .eyebrow::before,body .eyebrow::after{display:none} body .text-link{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:1px} body .text-link:hover{color:var(--rust)} body .btn{font-family:var(--yy-sans);border-radius:999px;font-weight:700;padding:12px 22px;letter-spacing:0;text-transform:none;box-shadow:none} body .btn.primary{background:var(--orange);color:#141414;border:2px solid var(--orange)} body .btn.primary:hover{background:#ff6d2e;border-color:#ff6d2e;color:#141414} body .btn.secondary{background:transparent;color:var(--ink);border:2px solid var(--ink)} body .btn.secondary:hover{background:var(--ink);color:#fff} /* ===================================================================== 2. Header (single row on desktop, parent mobile behaviour kept) ===================================================================== */ body header.top{background:rgba(250,250,247,.96);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);box-shadow:none} body header.top .site-brand img,body header.top .site-brand .yy-logo{height:46px;width:auto;max-width:none;display:block} body .subscribe-btn{background:var(--orange)!important;color:#141414!important;border:0;border-radius:999px;font-family:var(--yy-sans);font-weight:700;letter-spacing:0;text-transform:none;font-size:14px;padding:10px 18px} body .subscribe-btn:hover{background:#ff6d2e!important} body .social-links a{color:var(--ink);width:32px;height:32px} body .social-links a:hover{background:var(--soft);color:var(--rust)} body .social-links svg{width:17px;height:17px} @media (min-width:761px){ /* one row: logo | menu ... search | lang | socials + subscribe */ body header.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:72px auto;align-items:center;padding-inline:max(18px,calc((100% - 1160px) / 2))} body header.top .masthead{display:contents} body header.top .site-brand{grid-column:1;grid-row:1;justify-self:start;margin:0 24px 0 0;padding:0} body header.top .navrow{grid-column:2;grid-row:1;width:auto;margin:0;border:0!important;padding:0;min-width:0} body header.top .navrow .navlinks{justify-content:flex-start!important;gap:0 2px;flex-wrap:nowrap;padding:0;border:0;background:transparent;width:100%} body header.top .navlinks a,body header.top .navlinks .nav-parent>a{font-family:var(--yy-sans);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:#222;padding:8px 12px;border-bottom:2px solid transparent;white-space:nowrap} body header.top .navlinks a:hover,body header.top .navlinks a.active{color:var(--ink);border-bottom-color:var(--orange);background:transparent} body header.top .navlinks .nav-sep{display:none} body header.top .navlinks .nav-sub-toggle{color:#222;padding:0 6px 0 0;margin-left:-8px;font-size:11px} body header.top .navlinks .nav-search-toggle{margin-left:auto;color:var(--ink);padding:10px} body header.top .navlinks .nav-search-toggle svg{width:20px;height:20px} body header.top .translate-shell{grid-column:3;grid-row:1;justify-self:center;margin:0 8px 0 4px;z-index:2} body header.top .masthead-actions{grid-column:4;grid-row:1;display:flex;align-items:center;gap:6px;justify-self:end;margin:0} body header.top .site-search{grid-column:1/-1;grid-row:2;margin-inline:calc(-1 * max(18px,calc((100vw - 1160px) / 2)))} } @media (min-width:761px) and (max-width:1180px){ body header.top .social-links a:not(.shop-icon){display:none} body header.top .navlinks a,body header.top .navlinks .nav-parent>a{padding:8px 9px;font-size:14px} } @media (max-width:760px){ body header.top .masthead{padding:6px 0} body header.top .site-brand img,body header.top .site-brand .yy-logo{height:36px} body header.top .menu{color:var(--ink)} /* mobile menu panel: clean cream sheet instead of the navy "La Carte" frame */ body header.top .navlinks{background:#fafaf7!important;padding:12px 18px 20px!important;border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(20,20,20,.12)} body .nav-menu-frame{border:0} body .nav-menu-frame-inner{border:0;margin:0;padding:4px 0 8px} body .nav-menu-head{display:none} body header.top .navlinks .nav-menu-frame-inner a{text-align:left;font-family:var(--yy-serif);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink)!important;padding:12px 0} body header.top .navlinks .nav-menu-frame-inner a+a{border-top:1px solid var(--line)} body header.top .navlinks .nav-menu-frame-inner a:hover,body header.top .navlinks .nav-menu-frame-inner a.active{background:transparent;color:var(--rust)!important} body .navlinks .nav-search-form{border-top:1px solid var(--line)} body .navlinks .nav-search-form svg{stroke:var(--ink)} body .navlinks .nav-search-form input[type="search"]{border:1px solid #cfccc4;color:var(--ink)} body .navlinks .nav-search-form button[type="submit"]{background:var(--orange);color:#141414} body .social-links a{width:34px;height:34px} } body .site-search{background:var(--paper);border-bottom:1px solid var(--line)} body .site-search input[type="search"]{border-radius:999px;border:1px solid #cfccc4;font-family:var(--yy-sans)} body .site-search button{border-radius:999px;background:var(--orange);color:#141414;border:0;font-weight:700} /* PWA/app bar */ body .app-bar,body .event-bar{background:var(--soft);font-family:var(--yy-sans)} /* ===================================================================== 3. Home H1 (added by functions.php only if the page has none) ===================================================================== */ body .yy-home-intro{padding:44px 0 20px} body .yy-home-title{font-family:var(--yy-serif);font-weight:600;font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.03em;margin:0 0 12px;max-width:16ch} body .yy-home-title em{font-style:italic;font-weight:500;color:var(--orange)} body .yy-home-dek{font-family:var(--yy-serif);font-size:clamp(18px,2vw,21px);line-height:1.5;color:#444;max-width:60ch;margin:0} @media (max-width:760px){body .yy-home-intro{padding:28px 0 8px}} /* ===================================================================== 4. Sections & section heads ===================================================================== */ body .section-head{display:block;border-top:0;padding-top:0;margin-bottom:26px;max-width:820px} body .section-head .eyebrow{display:block} body .section-head h2,body main section>.wrap>h2{font-family:var(--yy-serif);font-weight:600;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;text-transform:none;margin:0 0 6px} body .section-head p{color:var(--muted);font-size:16px;max-width:62ch} body .section-more{margin-top:20px} body .filters{gap:8px;flex-wrap:wrap} body .filters .filter,body .event-filters .filter,body .filters a,body .filters button{font-family:var(--yy-sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;border:1px solid #d6d3cb;background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 14px;box-shadow:none} body .filters .filter:hover,body .filters a:hover,body .filters button:hover{border-color:var(--ink)} body .filters .filter.active,body .filters a.active,body .filters button.active,body .filters [aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} body .filters-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* ===================================================================== 5. Hero carousel -> feature card ===================================================================== */ body .headbanner{padding-top:12px} body .carousel{border:0!important;border-radius:var(--yy-r);overflow:hidden;background:var(--ink)} body .carousel-slide{min-height:500px} body .carousel-copy{min-height:500px;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.78) 100%);padding:40px 48px 70px} body .carousel-kicker{display:inline-block;align-self:flex-start;background:var(--orange);color:#141414;font-family:var(--yy-sans);font-size:12px;font-weight:700;letter-spacing:.1em;padding:5px 10px;border-radius:999px} body .carousel-slide h2{font-family:var(--yy-serif);font-weight:600;font-size:clamp(30px,4.2vw,52px);line-height:1.04;letter-spacing:-.025em;margin:14px 0 10px} body .carousel-slide p{font-family:var(--yy-sans);color:#ececec;font-size:17px;line-height:1.55} body .carousel-cta{color:#fff;border-bottom:2px solid var(--orange);font-weight:700;font-size:15px;padding-bottom:2px;align-self:flex-start} body .carousel-dot{background:rgba(255,255,255,.45)} body .carousel-dot[aria-current="true"]{background:var(--orange)} body .carousel-arrow{border-radius:999px;background:rgba(255,255,255,.92);border:0;color:var(--ink);width:42px;height:42px} body .yumyak-wm{opacity:.75} @media (max-width:760px){ body .carousel{border-radius:12px} body .carousel-slide,body .carousel-copy{min-height:420px} body .carousel-copy{padding:24px 20px 56px} body .carousel-slide h2{font-size:30px} body .carousel-slide p{font-size:15px} } /* ===================================================================== 6. Cards: radar / michelin / related ===================================================================== */ body .radar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px} @media (max-width:960px){body .radar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}} @media (max-width:600px){body .radar-grid{grid-template-columns:1fr;gap:30px}} body .radar-card{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible} body .radar-media{border-radius:var(--yy-r);overflow:hidden;aspect-ratio:4/3;background:var(--soft);position:relative} body .radar-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} body .radar-card:hover .radar-media img{transform:scale(1.035)} body .radar-content{padding:14px 0 0} body .radar-card h3,body .radar-content h3{font-family:var(--yy-serif);font-weight:600;font-size:23px;line-height:1.18;letter-spacing:-.015em;margin:6px 0 6px} body .radar-card h3 a{text-decoration:none;color:var(--ink)} body .radar-card h3 a:hover{color:var(--rust)} body .radar-card .facts{font-size:14px;color:var(--muted);margin:0} body .radar-card .why{font-size:15px;color:#333;border-top:1px solid var(--line);margin-top:10px;padding-top:10px} body .radar-card .why strong{color:var(--ink)} body .taglabel{font-family:var(--yy-sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);background:none;padding:0;border:0} body .radar-status,body .distbadge,body .tagbadge,body .visit-badge,body .event-status{font-family:var(--yy-sans);font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:none;border-radius:999px;padding:4px 10px;border:0;box-shadow:0 1px 2px rgba(0,0,0,.08);line-height:1.3} body .radar-badges .radar-status,body .radar-badges .distbadge,body .radar-badges .tagbadge{background:rgba(255,255,255,.95);color:var(--ink)} body .radar-status.status-coming_soon,body .event-status.soon{background:var(--orange)!important;color:#141414!important} body .event-status.live{background:#141414;color:#fff} body .event-status.muted{background:var(--soft);color:var(--muted)} body .visit-badge,body .visit-badge.visit-verified{background:#e9f4ec;color:#1d5e33} body .distbadge.dist-star{background:#141414!important;color:#fff!important} body .distbadge.dist-bib{background:#c8102e!important;color:#fff!important} body .distbadge.dist-recommended{background:#3d3d3d!important;color:#fff!important} body .distbadge .michelin-year{color:inherit!important;background:transparent!important;padding:0!important} body .distbadge .michelin-flower{height:13px;width:auto} body .card-link{border:0} /* Michelin band on home (dark section like the mockup) */ body main section:has(> .wrap > .michelin-grid),body main section:has(.michelin-grid):not(:has(.page-intro)){background:#141414;color:#f3f1ec;padding-top:64px;padding-bottom:64px;margin-top:40px} body main section:has(.michelin-grid):not(:has(.page-intro)) .section-head h2,body main section:has(.michelin-grid):not(:has(.page-intro)) h3 a{color:#fff} body main section:has(.michelin-grid):not(:has(.page-intro)) .section-head p,body main section:has(.michelin-grid):not(:has(.page-intro)) .facts,body main section:has(.michelin-grid):not(:has(.page-intro)) .why{color:#cfccc4;border-color:#2c2c2c} body main section:has(.michelin-grid):not(:has(.page-intro)) .why strong{color:#fff} body main section:has(.michelin-grid):not(:has(.page-intro)) .eyebrow,body main section:has(.michelin-grid):not(:has(.page-intro)) .taglabel{color:var(--orange-l)} body main section:has(.michelin-grid):not(:has(.page-intro)) .text-link{color:#fff} body main section:has(.michelin-grid):not(:has(.page-intro)) .filter{background:transparent;color:#fff;border-color:#444} body main section:has(.michelin-grid):not(:has(.page-intro)) .filter.active{background:var(--orange);color:#141414;border-color:var(--orange)} body .disclosure{font-size:13px;color:var(--muted)} /* ===================================================================== 7. Events ===================================================================== */ body .event-list{gap:14px} body .event{background:var(--paper);border:1px solid var(--line);border-radius:var(--yy-r);padding:14px;box-shadow:none;transition:border-color .2s,box-shadow .2s} body .event:hover{border-color:#cfccc4;box-shadow:var(--shadow)} body .event-media{border-radius:10px} body .event-datebadge{background:#fff;color:var(--ink);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.15);font-family:var(--yy-sans);text-align:center;line-height:1.05;padding:6px 8px;border:0} body .event-datebadge .m{color:var(--rust);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;display:block} body .event-datebadge .d{font-family:var(--yy-serif);font-size:24px;font-weight:600;display:block;color:var(--ink)} body .event h3,body .event-head h3{font-family:var(--yy-serif);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em;margin:0} body .event h3 a{text-decoration:none;color:var(--ink)} body .event h3 a:hover{color:var(--rust)} body .event-meta,body .event-facts{color:var(--muted);font-size:14px} body .event-cta-link{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--orange)} /* snapshot band */ body .snapshot{background:var(--soft);border:0;border-radius:var(--yy-r)} /* ===================================================================== 8. Page intro (singles + archives) ===================================================================== */ body .page-intro{padding-top:44px;padding-bottom:24px;max-width:none;width:min(1160px,calc(100% - 36px))} body .page-intro>*{max-width:820px} body .page-intro .article-meta{max-width:820px} body .page-intro h1{font-family:var(--yy-serif);font-weight:600;font-size:clamp(38px,5.6vw,64px);line-height:1.04;letter-spacing:-.03em;text-transform:none;margin:4px 0 14px} body .page-intro>p:not(.place-badges):not(.place-cta):not(.article-meta){font-family:var(--yy-serif);font-size:clamp(18px,2vw,21px);line-height:1.5;color:#444;font-weight:400} body .place-badges{display:flex;flex-wrap:wrap;gap:6px} body .place-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} body .article-meta{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:20px} @media (max-width:760px){body .page-intro{padding-top:26px}} /* ===================================================================== 9. Article body ===================================================================== */ body .article-layout{max-width:740px} body .article-layout:has(> .article-aside){max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start} @media (max-width:960px){body .article-layout:has(> .article-aside){grid-template-columns:1fr;gap:28px}} body .article-body{font-family:var(--yy-sans);min-width:0} body .article-body p,body .article-body li{font-family:var(--yy-sans);font-size:18px;line-height:1.75;color:#222} body .article-body p:first-of-type{font-family:var(--yy-sans);font-size:18px;font-style:normal;font-weight:400;color:#222} body .article-body > p:first-of-type{font-family:var(--yy-serif);font-size:21px;line-height:1.55;color:var(--ink)} body .article-body h2{font-family:var(--yy-serif);font-weight:600;font-size:30px;line-height:1.15;letter-spacing:-.015em;text-transform:none;margin:44px 0 12px} body .article-body h3{font-family:var(--yy-serif);font-weight:600;font-size:22px;margin:30px 0 8px} body .article-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px} body .article-body a:hover{color:var(--rust)} body .article-body a.btn,body .article-body .byg-box a.btn{text-decoration:none} body .article-body blockquote{border-left:4px solid var(--orange);font-family:var(--yy-serif);font-size:22px;padding:4px 0 4px 20px;margin:28px 0} body .story-thumb img,body .article-body figure img{border-radius:var(--yy-r)} body .article-body figcaption{font-size:13px;color:var(--muted)} /* Before-you-go / Google reviews box */ body .byg-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--yy-r);box-shadow:none} body .byg-box .section-head h2{font-size:26px;margin:0} body .gr-review{background:var(--bg);border:1px solid var(--line);border-radius:12px} body .gr-photos img{border-radius:10px} body .gr-more{color:var(--rust);font-weight:700} /* Event / page aside facts card */ body .article-aside{background:var(--paper);border:1px solid var(--line);border-radius:var(--yy-r);padding:22px;position:sticky;top:92px} body .article-aside h2{font-family:var(--yy-sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);margin:0 0 10px} body .fact-list li{border-bottom:1px solid var(--line);padding:10px 0;font-size:15px} body .fact-list li:last-child{border-bottom:0} body .fact-list strong{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} @media (max-width:960px){body .article-aside{position:static}} /* Rank Math FAQ */ body .rank-math-faq-item{border-top:1px solid var(--line);padding:16px 0 4px} body .rank-math-faq-item:last-child{border-bottom:1px solid var(--line)} body .rank-math-question{font-family:var(--yy-serif)!important;font-size:20px!important;margin:0 0 6px!important} /* related */ body .related{border-top:1px solid var(--line);padding-top:48px} /* ads: keep layout neutral, never clip */ body .article-body .code-block,body .ad-inline{margin:32px 0;min-width:0;overflow:visible} /* ===================================================================== 10. Newsletter (orange block like the mockup) ===================================================================== */ body #newsletter .newsletter,body .newsletter.newsletter-a3{background:#1c1a19!important;color:#f5f1ea!important;border:0!important;border-radius:22px;padding:48px;box-shadow:none} body #newsletter .newsletter h2,body .newsletter h2{font-family:var(--yy-serif);font-weight:600;font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.02em;color:#fff!important} body .newsletter p,body .newsletter label{color:#cfc8bf!important}body .newsletter .eyebrow{color:var(--orange)!important} body .newsletter input[type=email],body .newsletter input[type=text]{background:#fff!important;border:0!important;border-radius:999px!important;padding:14px 20px!important;font-family:var(--yy-sans)!important;font-size:16px!important;color:#141414!important;box-shadow:none!important} body .newsletter .sib-default-btn,body .newsletter button[type=submit],body .newsletter input[type=submit]{background:var(--orange)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:14px 24px!important;font-family:var(--yy-sans)!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important} body .newsletter .sib-default-btn:hover,body .newsletter button[type=submit]:hover{background:#d94a0c!important} body .newsletter-note{font-size:13px;opacity:.85} body #newsletter .newsletter h2 em,body .newsletter h2 em{color:var(--orange)!important;font-style:italic} body .carousel h2,body .carousel h3,body .carousel .slide-title{text-shadow:0 2px 18px rgba(0,0,0,.45)} @media (max-width:760px){body #newsletter .newsletter,body .newsletter.newsletter-a3{padding:28px 22px;border-radius:16px}} /* ===================================================================== 11. Footer ===================================================================== */ body footer,body .site-footer{background:#141414!important;color:#cfccc4} body footer .footer-logo,body footer img.footer-logo{height:auto!important;width:140px!important;max-width:140px!important;filter:none!important;background:transparent!important;padding:0!important;border:0!important;object-fit:contain} body footer a{color:#fff} body footer a:hover{color:var(--orange-l)} body .footer-links a{font-weight:600;text-decoration:none} body .back-top{background:var(--orange)!important;color:#141414!important;border-radius:999px;border:0} /* ===================================================================== 12. Plugin chrome: colours only, layout left to the plugins ===================================================================== */ /* myStickymenu welcome bar */ body .mysticky-welcomebar-fixed{background-color:#141414!important;font-family:var(--yy-sans)!important} body .mysticky-welcomebar-fixed .mysticky-welcomebar-content p,body .mysticky-welcomebar-fixed .mysticky-welcomebar-content{color:#fff!important;font-family:var(--yy-sans)!important} body .mysticky-welcomebar-fixed .mysticky-welcomebar-btn a{background:var(--orange)!important;color:#141414!important;border-radius:999px!important;font-family:var(--yy-sans)!important;font-weight:700} body .mysticky-welcomebar-close{color:#fff!important} /* CookieYes banner: brand colours + fonts (consent logic untouched) */ body .cky-consent-container .cky-consent-bar,body .cky-preference-center{font-family:var(--yy-sans)!important;border-radius:14px!important;border-color:var(--line)!important} body .cky-title,body .cky-preference-title{font-family:var(--yy-serif)!important;color:#141414!important} body .cky-notice-des,body .cky-notice-des p{color:#333!important;font-family:var(--yy-sans)!important} body .cky-btn{border-radius:999px!important;font-family:var(--yy-sans)!important;font-weight:700!important} body .cky-btn.cky-btn-accept{background:#f25812!important;border-color:#f25812!important;color:#141414!important} body .cky-btn.cky-btn-reject,body .cky-btn.cky-btn-customize,body .cky-btn.cky-btn-preferences{background:transparent!important;border:2px solid #141414!important;color:#141414!important} body .cky-btn-revisit-wrapper{background:#f25812!important} /* ===================================================================== 1.0.6 responsive fixes (tablet / iPad Safari ~800-1100px) - Events: parent 4.0.92 gives home cards aspect-ratio 16/10 + min-height 260px, which makes each card at least 416px wide (260 x 1.6). In repeat(2,1fr) columns narrower than that (and in Safari already at ~950-1000px) the cards overflow their track and overlap. Tracks are now minmax(0,1fr) and cards may shrink (min-width:0) and clip. - Michelin/radar cards: .radar-top was a non-wrapping flex row with the default align-items:stretch, so a long neighbourhood that wraps made the "Details verified" pill stretch to the row height (huge oval) and get squashed. Row now wraps, badges never shrink or stretch, and the neighbourhood wraps inside its own column. ===================================================================== */ @media (min-width: 651px) { body.home .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.home .radar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body .event-list > .event { min-width: 0; max-width: 100%; overflow: hidden; } body .event-list .event-body { min-width: 0; } body .event-list .event-body h3, body .event-list .event-meta { overflow-wrap: anywhere; } body .radar-grid > .radar-card { min-width: 0; } body .radar-top { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; min-width: 0; } body .radar-top > span { min-width: 0; overflow-wrap: anywhere; } body .radar-top > .taglabel { flex: 0 0 auto; white-space: nowrap; } body .radar-top.has-visit > span:not(.taglabel):not(.visit-badge) { flex: 1 1 7em; } body .radar-top .visit-badge { flex: 0 0 auto; align-self: flex-start; white-space: nowrap; height: auto; max-width: 100%; overflow-wrap: normal; } body .radar-badges > span { flex: 0 0 auto; white-space: nowrap; } /* 1.0.6: on tablet widths the 16:10 frame is too short for long titles, so the text block ran up under the date badge (and was clipped). Between 651px and 1099px the card grows with its text instead: the photo stays a full-bleed background, the text block sits in normal flow at the bottom. */ @media (min-width: 651px) and (max-width: 1099px) { body.home .event-list .event { aspect-ratio: auto; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; } body.home .event-list .event-body { position: relative; left: auto; right: auto; bottom: auto; padding-top: 76px; } } /* ===================================================================== 1.1.0 Content hubs (templates/hub.php, inc/hubs.php) ===================================================================== */ /* Parent main.css styles every