/* ============================================================ Shooala site stylesheet. THE single place for fonts and styles. Every page needs exactly one line in its : ============================================================ */ /* design-system tokens (colours, spacing, type scale) */ @import url('_ds/shoala-design-system-8e08fdb8-c598-43a3-9db9-6c77d7ef48a9/styles.css'); /* every webfont the site uses */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Suez+One&family=IBM+Plex+Sans+Hebrew:wght@400;500;600;700&family=Karantina:wght@400;700&family=Playpen+Sans+Hebrew:wght@400;500;600&family=Frank+Ruhl+Libre:wght@400;700;800&family=Amatic+SC:wght@700&family=Secular+One&family=Noto+Sans+Hebrew:wght@400;500;700&family=Rubik+Dirt&family=Cardo:ital,wght@0,400;0,700;1,400&family=Cascadia+Mono:wght@200;300;400;500;600;700&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap'); /* ---- ACTIVE FONT COMBINATION ------------------------------- Edit the five font lines below to change the whole site. The three named sets underneath are alternates you can preview without editing anything, by adding data-fonts="..." to . The --w-* values exist because the display faces top out at different weights. Trial: Cardo headlines + M PLUS Rounded 1c body (from fonts2 shortlist). ------------------------------------------------------------ */ :root{ --font-display:'Cardo',Georgia,serif; --font-display-alt1:'Cardo',Georgia,serif; --font-body:'M PLUS Rounded 1c',system-ui,sans-serif; --font-label:'Cardo',Georgia,serif; --font-script:'Playpen Sans Hebrew',cursive; --font-item:'M PLUS Rounded 1c',system-ui,sans-serif; /* menu item names */ --w-hero:700; --w-chapter:700; --radius-badge:4px; /* was 999px pills — sharper button / tag corners */ --surface-page:#FFF1D3; } /* warm: rounded and friendly (mirrors her Canva combination 1) */ [data-fonts="warm"]{ --font-display:'Fredoka',system-ui,sans-serif; --font-display-alt1:'Suez One',Georgia,serif; --font-body:'IBM Plex Sans Hebrew',system-ui,sans-serif; --font-label:'Karantina',system-ui,sans-serif; --font-script:'Playpen Sans Hebrew',cursive; --font-item:'Playpen Sans Hebrew',cursive; --w-hero:700; --w-chapter:400; } /* editorial: serif-led and calmer (mirrors the wine / event posts) */ [data-fonts="editorial"]{ --font-display:'Frank Ruhl Libre',Georgia,serif; --font-display-alt1:'Suez One',Georgia,serif; --font-body:'IBM Plex Sans Hebrew',system-ui,sans-serif; --font-label:'Karantina',system-ui,sans-serif; --font-script:'Amatic SC',cursive; --font-item:'Playpen Sans Hebrew',cursive; --w-hero:800; --w-chapter:400; } /* bold: graphic and loud (mirrors the Cooperative Dirty posts) */ [data-fonts="bold"]{ --font-display:'Secular One',system-ui,sans-serif; --font-display-alt1:'Rubik Dirt',system-ui,sans-serif; --font-body:'Noto Sans Hebrew',system-ui,sans-serif; --font-label:'Karantina',system-ui,sans-serif; --font-script:'Playpen Sans Hebrew',cursive; --font-item:'Playpen Sans Hebrew',cursive; --w-hero:400; --w-chapter:400; } *{box-sizing:border-box} /* ---- accessibility basics --------------------------------- */ .skip-link{position:absolute;top:0;inset-inline-start:0;z-index:200; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; background:var(--brown-900);color:var(--text-inverse); padding:0;border-radius:0 0 var(--radius-sm) 0;font-weight:700} .skip-link:focus{width:auto;height:auto;overflow:visible;clip:auto; padding:12px 20px;color:var(--text-inverse)} :focus-visible{outline:3px solid var(--brown-700);outline-offset:2px;border-radius:2px} .site-header :focus-visible,.site-footer :focus-visible{outline-color:var(--brown-900)} .hero :focus-visible{outline-color:var(--gold-500)} /* only reachable by screen readers */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} body{margin:0;background:var(--surface-page);font-family:var(--font-body);color:var(--ink); min-height:100vh;display:flex;flex-direction:column} a{color:var(--gold-600,#a67c2e);text-decoration:none} a:hover{color:var(--gold-500,#c9922f)} /* ---- site header ---- */ .site-header{flex:none;display:flex;align-items:center;justify-content:space-between; padding:16px 32px;background:#E8D060;position:sticky;top:0;z-index:10} .site-header__logo{height:48px;width:48px;object-fit:contain} .site-nav{display:flex;gap:24px} .site-nav a{font-family:var(--font-body);font-weight:600;color:var(--ink); border-bottom:2px solid transparent;padding-bottom:4px} .site-nav a:hover{color:var(--brown-900)} .site-nav a[aria-current="page"]{color:var(--brown-900);border-bottom-color:var(--brown-900)} /* ---- hero carousel ---- */ .hero{flex:none;position:relative;height:340px;overflow:hidden} .hero__slide{position:absolute;inset:0;width:100%;height:100%; background-size:cover;background-position:center; opacity:0;transition:opacity 1.2s ease;z-index:1} .hero__slide.is-active{opacity:1} .hero__overlay{position:absolute;inset:0; background:linear-gradient(180deg,rgba(43,29,20,.08),rgba(43,29,20,.38)); display:flex;flex-direction:column;align-items:center;justify-content:center; color:#FFF1D3;text-align:center;gap:10px;z-index:2} .hero__title{font-family:var(--font-display);font-weight:var(--w-hero);font-size:60px; color:#FFF1D3;text-shadow:0 2px 18px rgba(43,29,20,.55),0 1px 2px rgba(43,29,20,.4)} .hero__dots{position:absolute;bottom:8px;right:0;left:0; display:flex;justify-content:center;gap:0;z-index:3} .hero__dot{min-width:24px;height:24px;display:grid;place-items:center; border:0;padding:0;background:none;cursor:pointer} .hero__dot::before{content:'';display:block;width:7px;height:7px;border-radius:4px; background:rgba(255,255,255,.5);transition:width .3s ease,background .3s ease} .hero__dot.is-active::before{width:20px;background:var(--gold-500)} /* WCAG 2.2.2: auto-advancing content needs a way to stop it */ .hero__pause{position:absolute;bottom:10px;left:12px;z-index:3; width:32px;height:32px;border:0;border-radius:50%;cursor:pointer; background:rgba(43,29,20,.55);color:#fff;font-size:13px;line-height:1; display:grid;place-items:center} .hero__pause:hover{background:rgba(43,29,20,.8)} /* ---- page body ---- */ .menu-page{max-width:760px;margin:0 auto;padding:var(--space-8) var(--space-5)} .group-title{font-family:var(--font-display-alt1,var(--font-display)); font-weight:var(--w-chapter);font-size:26px;color:var(--ink);margin:0 0 4px;text-align:center} .eyebrow{font-family:var(--font-label);font-weight:700;color:var(--text-muted); font-size:17px;letter-spacing:.6px;margin:28px 0 18px;text-align:center} .group-title + .eyebrow{margin-top:16px} /* ---- DS component: MenuSection ---- */ .menu-section{font-family:var(--font-body);margin-bottom:var(--space-6)} /* ---- DS component: PriceRow ---- */ .price-row{display:flex;justify-content:space-between;align-items:baseline; padding:10px 0;border-bottom:1px solid var(--border-default);font-family:var(--font-body)} .price-row__name{font-family:var(--font-item,var(--font-body)); font-size:19px;color:var(--text-body);font-weight:500} .price-row__note{font-size:var(--text-small);color:var(--text-muted)} .price-row__price{font-size:var(--text-body-lg);color:var(--brown-700); font-weight:700;white-space:nowrap} /* ---- DS component: Tag ---- */ .tag{font-family:var(--font-body);font-weight:600;font-size:14px;padding:6px 16px; border-radius:var(--radius-badge);display:inline-block; background:var(--surface-card);color:var(--text-body);border:1px solid var(--border-default)} .tag--gold{background:var(--gold-500);color:var(--ink);border-color:var(--gold-500)} /* ---- images toggle ---------------------------------------- */ .menu-toggle{display:flex;justify-content:center;padding:var(--space-5) var(--space-4) 0} .menu-toggle button{ font-family:var(--font-display);font-weight:700;font-size:16px; padding:12px 26px;border-radius:var(--radius-badge);border:2px solid transparent; background:var(--gold-500);color:var(--ink);cursor:pointer; transition:transform .15s ease,background .2s ease,box-shadow .2s ease; box-shadow:var(--shadow-soft)} .menu-toggle button:hover{background:var(--gold-300)} .menu-toggle button:active{transform:scale(.97)} .menu-toggle button:focus-visible{outline:3px solid var(--brown-700);outline-offset:2px} /* thumbnails are in the markup but hidden until the toggle is on, so the text-only menu stays the default and lazy loading keeps them off the wire */ .price-row__thumbbtn{display:none} .with-images .price-row{align-items:center;gap:var(--space-4);padding:12px 0} .with-images .price-row__thumbbtn{ display:block;flex:none;width:72px;height:72px;padding:0;border:0;overflow:hidden; border-radius:var(--radius-sm);background:var(--surface-card);cursor:zoom-in; box-shadow:var(--shadow-soft);transition:transform .15s ease,box-shadow .15s ease} .with-images .price-row__thumbbtn:hover{transform:scale(1.05);box-shadow:var(--shadow-card)} .with-images .price-row__thumbbtn:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px} .price-row__thumb{display:block;width:100%;height:100%;object-fit:cover} .with-images .price-row__main{flex:1;min-width:0} /* ---- lightbox --------------------------------------------- */ [hidden]{display:none !important} .lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center; justify-content:center;padding:var(--space-4)} .lightbox__backdrop{position:absolute;inset:0;background:rgba(43,29,20,.82)} .lightbox__panel{position:relative;z-index:1;background:var(--surface-page); border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card); max-width:min(680px,100%);max-height:100%;overflow:auto;text-align:center} .lightbox__name{margin:0 0 var(--space-4);font-family:var(--font-item,var(--font-body)); font-weight:500;font-size:26px;color:var(--ink);padding-left:36px;padding-right:36px} .lightbox__img{display:block;width:100%;height:auto;max-height:66vh;object-fit:contain; border-radius:var(--radius-md);background:var(--surface-card)} .lightbox__close{position:absolute;top:10px;left:12px;width:36px;height:36px; border:0;border-radius:50%;background:var(--surface-card);color:var(--ink); font-size:24px;line-height:1;cursor:pointer;box-shadow:var(--shadow-soft)} .lightbox__close:hover{background:var(--gold-300)} .lightbox__close:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px} body.lightbox-open{overflow:hidden} @media (max-width:600px){ .lightbox__name{font-size:21px} .lightbox__panel{padding:var(--space-4)} } @media (max-width:600px){ .with-images .price-row__thumb{width:58px;height:58px} } /* ---- weekend wine panel ---- */ .wine{margin-top:40px;border:1px dashed var(--gold-500);border-radius:16px;padding:24px; background:var(--surface-card);display:flex;flex-direction:column;gap:12px; align-items:center;text-align:center} .wine__title{font-family:var(--font-display);font-weight:var(--w-hero);font-size:21px} .wine__text{color:var(--text-muted);font-size:14px;max-width:480px} .wine__list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px;margin-top:8px} /* ---- prose pages (accessibility statement, etc.) ---------- */ .prose{max-width:760px;margin:0 auto;padding:var(--space-7) var(--space-5)} .prose h1{font-family:var(--font-display);font-weight:var(--w-hero); font-size:32px;color:var(--ink);margin:0 0 var(--space-2)} .prose .updated{color:var(--text-muted);font-size:14px;margin:0 0 var(--space-6)} .prose h2{font-family:var(--font-display-alt1,var(--font-display)); font-weight:var(--w-chapter);font-size:22px;color:var(--ink); margin:var(--space-7) 0 var(--space-3)} .prose p,.prose li{font-size:16px;line-height:1.75;color:var(--text-body)} .prose ul{padding-inline-start:0;padding-inline-end:22px;margin:0 0 var(--space-4)} .prose li{margin-bottom:6px} .prose a{text-decoration:underline} .prose dl{margin:0} .prose dt{font-weight:700;margin-top:var(--space-3)} .prose dd{margin:2px 0 0} /* anything the owner still has to supply, impossible to miss */ .todo{background:#fff2c2;border:2px dashed var(--rose-500);color:var(--brown-900); border-radius:var(--radius-sm);padding:2px 8px;font-weight:700;display:inline-block} .todo-note{background:var(--surface-card);border-inline-start:4px solid var(--rose-500); border-radius:var(--radius-sm);padding:var(--space-4);margin:var(--space-5) 0;font-size:15px} /* ---- footer ---- */ .site-footer{margin-top:auto;background:#E8D060;color:var(--ink); padding:var(--space-7) var(--space-5);text-align:center;font-family:var(--font-body)} .site-footer__logo{height:56px;width:56px;object-fit:contain;margin-bottom:8px} .site-footer__lines{display:flex;flex-direction:column;gap:4px;align-items:center} .site-footer__social{display:flex;align-items:center;gap:6px; color:rgba(36,26,18,.7);font-size:13px} .site-footer__social a{color:var(--brown-900);display:flex;align-items:center} .site-footer__legal{margin-top:var(--space-3);font-size:13px} .site-footer__legal a{color:var(--brown-900);text-decoration:underline} @media (max-width:600px){ .site-header{padding:12px 16px} .site-nav{gap:16px} .hero{height:260px} .hero__title{font-size:42px} } @media (prefers-reduced-motion:reduce){ .hero__slide,.hero__dot::before,.price-row__thumbbtn,.menu-toggle button{transition:none} .with-images .price-row__thumbbtn:hover{transform:none} }