/* ============================================================ THE WHIPPET INN — core stylesheet (built on the "Soul Kitchen / dark" shell) Moody, dark "gothic with a hint of madness" palette. ------------------------------------------------------------ DESIGN TOKENS live in :root below. Restyle the whole site (palette / typography / spacing) by editing token VALUES only — every rule downstream consumes them via var(). Token naming: --whippet--. ============================================================ */ :root{ /* ---------- PALETTE ---------------------------------------- Near-black surfaces, white headings, muted grey body. *-rgb variants expose raw channels for rgba() overlays so opacity can vary while the base colour stays tokenised. */ --whippet-bg:#0a0b0a; /* page background (near-black) */ --whippet-bg-2:#141514; /* raised panels: footer, cards, forms */ --whippet-bg-3:#1b1c1b; /* deepest inset surface */ --whippet-bg-rgb:10,11,10; /* channels of --whippet-bg */ --whippet-text:#ffffff; /* primary text + headings */ --whippet-muted:#aaaaac; /* body copy / secondary text */ --whippet-muted-2:#8a8a8c; /* captions / tertiary text */ --whippet-invert:#000000; /* text on light (solid) buttons */ --whippet-white-rgb:255,255,255; /* for hairlines + light overlays */ --whippet-black-rgb:0,0,0; /* for image-darkening gradients */ --whippet-overlay-rgb:8,9,8; /* promo image scrim (near-bg black) */ --whippet-line:rgba(var(--whippet-white-rgb),.14); /* hairline borders */ --whippet-veg:#7fae6b; /* vegetarian menu marker (accent) */ /* ---------- TYPOGRAPHY ------------------------------------- Jost for display headings, Poppins for everything else. */ --whippet-font-head:'Jost',Helvetica,Arial,sans-serif; --whippet-font-body:'Poppins',Helvetica,Arial,sans-serif; --whippet-weight-body:200; /* default body — airy, light */ --whippet-weight-light:300; /* wine names */ --whippet-weight-medium:400; /* menu item names, testimonials */ --whippet-weight-semibold:500; /* headings, overlines, buttons */ /* ---------- TYPE SCALE ------------------------------------- Base metrics applied to ; display sizes for the canonical headings. Section-specific sizes inherit the family/weight tokens above. */ --whippet-fs-base:15px; --whippet-lh-base:1.75; --whippet-ls-base:.6px; --whippet-fs-overline:12px; /* eyebrow / overline labels */ --whippet-fs-body-lg:16px; /* intro / lead paragraphs */ --whippet-fs-title:42px; /* .section-title */ --whippet-fs-hero:50px; /* hero H1 */ /* ---------- LAYOUT / SPACING ------------------------------- */ --whippet-maxw:1200px; /* content container width */ --whippet-gutter:24px; /* container side padding */ --whippet-section-y:90px; /* default vertical section rhythm */ } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--whippet-bg);color:var(--whippet-text); font-family:var(--whippet-font-body); font-weight:var(--whippet-weight-body);font-size:var(--whippet-fs-base); line-height:var(--whippet-lh-base);letter-spacing:var(--whippet-ls-base); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold);margin:0} p{margin:0 0 1em} .container{max-width:var(--whippet-maxw);margin:0 auto;padding:0 var(--whippet-gutter)} /* ---- typography helpers ---- */ .overline{ font-family:var(--whippet-font-body);font-weight:var(--whippet-weight-semibold);font-size:var(--whippet-fs-overline); letter-spacing:6px;text-transform:uppercase;color:var(--whippet-muted); } .muted{color:var(--whippet-muted)} .center{text-align:center} .section{padding:var(--whippet-section-y) 0} .section-title{font-size:var(--whippet-fs-title);letter-spacing:6px;line-height:1.2} .section-divider{width:1px;height:46px;background:var(--whippet-line);margin:22px auto 0} .vlabel{ /* vertical rotated label */ writing-mode:vertical-rl;transform:rotate(180deg); letter-spacing:8px;text-transform:uppercase;font-size:11px;color:var(--whippet-muted-2); } /* ---- buttons ---- */ .btn{display:inline-block;font-family:var(--whippet-font-body);font-weight:var(--whippet-weight-semibold); font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer; padding:15px 34px;transition:.25s} .btn-outline{border:1px solid rgba(var(--whippet-white-rgb),.45);color:var(--whippet-text);background:transparent} .btn-outline:hover{background:var(--whippet-text);color:var(--whippet-invert)} .btn-solid{background:var(--whippet-text);color:var(--whippet-invert);border:1px solid var(--whippet-text)} .btn-solid:hover{background:transparent;color:var(--whippet-text)} /* ============================================================ HEADER */ .site-header{position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:22px 40px;transition:background .3s} .site-header.scrolled{background:rgba(var(--whippet-bg-rgb),.92);backdrop-filter:blur(6px)} .site-header nav{display:flex;gap:26px} .site-header nav a{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--whippet-muted);white-space:nowrap} .site-header nav a:hover{color:var(--whippet-text)} /* logo sits centre: padding keeps breathing room from the nav clusters either side (the nav-left/right flex:1 columns butt right up against it otherwise) */ .site-header .logo{padding:0 28px;flex:0 0 auto} .site-header .logo img{height:30px} /* wordmark placeholder (shown until a real logo PNG is set in nav.yaml) */ .site-header .logo .logo-text{font-family:var(--whippet-font-head); font-weight:var(--whippet-weight-semibold);font-size:16px;letter-spacing:2px; text-transform:uppercase;color:var(--whippet-text);white-space:nowrap} /* phone + booking CTA (data-driven, from site.yaml / nav.yaml) */ .header-phone{font-size:12px;letter-spacing:1px;color:var(--whippet-muted); white-space:nowrap;transition:color .25s} .header-phone:hover{color:var(--whippet-text)} .header-cta{font-family:var(--whippet-font-head);font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--whippet-text); border:1px solid var(--whippet-line);padding:9px 18px;border-radius:2px; white-space:nowrap;transition:background .25s,color .25s,border-color .25s} .header-cta:hover{background:var(--whippet-text);color:var(--whippet-bg); border-color:var(--whippet-text)} .header-right{display:flex;align-items:center;gap:26px} .header-social{display:flex;gap:16px} .header-social a{font-size:14px;color:var(--whippet-muted)} .header-social a:hover{color:var(--whippet-text)} .nav-left,.nav-right{flex:1} .nav-right{display:flex;justify-content:flex-end;align-items:center;gap:24px} /* ============================================================ HERO */ .hero{display:grid;grid-template-columns:1fr 1fr;min-height:100vh} .hero-left{display:flex;align-items:center;padding:0 0 0 40px;position:relative} .hero-left .vlabel{position:absolute;left:46px;top:50%;transform:translateY(-50%) rotate(180deg)} .hero-copy{max-width:440px;margin-left:90px} .hero-copy .overline{display:block;margin-bottom:22px} .hero h1{font-size:var(--whippet-fs-hero);line-height:1.12;letter-spacing:2px;margin-bottom:24px} .hero-copy p{color:var(--whippet-muted);margin-bottom:34px} .hero-right{background-size:cover;background-position:center} /* ============================================================ FEATURE CARDS */ .feature-cards{display:grid;grid-template-columns:repeat(3,1fr)} .fcard{position:relative;height:330px;overflow:hidden} .fcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .fcard:hover img{transform:scale(1.06)} .fcard .fcard-body{position:absolute;inset:0;display:flex;flex-direction:column; justify-content:flex-end;align-items:center;text-align:center;padding:0 24px 40px; background:linear-gradient(to top,rgba(var(--whippet-black-rgb),.7),rgba(var(--whippet-black-rgb),0) 60%)} .fcard .overline{margin-bottom:10px} .fcard h3{font-size:26px;letter-spacing:1px} /* ============================================================ INTRO */ .intro{padding:80px 0;text-align:center} .intro p{max-width:680px;margin:0 auto 1.2em;color:var(--whippet-muted);font-size:var(--whippet-fs-body-lg)} /* ============================================================ CHEF */ .chef{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:stretch;position:relative} .chef-img{background-size:cover;background-position:center;min-height:560px} .chef-card{background:var(--whippet-bg-2);display:flex;flex-direction:column;justify-content:center; padding:60px 50px;position:relative} .chef-card .vlabel{position:absolute;left:24px;top:50%;transform:translateY(-50%) rotate(180deg)} .chef-card .overline{margin-bottom:14px} .chef-card h3{font-size:30px;margin-bottom:20px;letter-spacing:1px} .chef-card p{color:var(--whippet-muted);margin-bottom:30px} .chef-right{display:grid;grid-template-rows:1fr 1fr} .chef-right>div{background-size:cover;background-position:center} /* ============================================================ PHILOSOPHY */ .philosophy{padding:90px 0 0} .phil-cards{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px} .pcard{position:relative;height:430px;overflow:hidden} .pcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .pcard:hover img{transform:scale(1.06)} .pcard .pcard-body{position:absolute;inset:0;display:flex;flex-direction:column; justify-content:flex-end;align-items:center;text-align:center;padding:0 24px 44px; background:linear-gradient(to top,rgba(var(--whippet-black-rgb),.75),rgba(var(--whippet-black-rgb),0) 55%)} .pcard h3{font-size:24px;margin-bottom:8px} .pcard span{color:var(--whippet-muted);font-size:13px} /* ============================================================ MENU (food + drink) */ .menu-tabs{display:flex;justify-content:center;gap:46px;margin:30px 0 60px} .menu-tabs button{background:none;border:0;color:var(--whippet-muted);cursor:pointer; font-family:var(--whippet-font-body);font-size:12px;letter-spacing:3px;text-transform:uppercase; padding-bottom:8px;border-bottom:1px solid transparent} .menu-tabs button.active{color:var(--whippet-text);border-color:var(--whippet-text)} .tabpane{display:none} .tabpane.active{display:block} .menu-intro{text-align:center;color:var(--whippet-muted);margin-bottom:50px;font-style:italic} .menu-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:54px} .menu-group{margin-bottom:46px} .menu-group>h4{font-size:13px;letter-spacing:6px;text-transform:uppercase;color:var(--whippet-text); margin-bottom:26px} .menu-item{margin-bottom:20px} .menu-item .mi-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px} .menu-item .mi-name{font-family:var(--whippet-font-body);font-weight:var(--whippet-weight-medium);font-size:14px; letter-spacing:1px;color:var(--whippet-text);text-transform:uppercase} .menu-item .mi-price{color:var(--whippet-muted);font-size:14px;white-space:nowrap} .menu-item .mi-desc{color:var(--whippet-muted-2);font-size:12.5px;line-height:1.6;margin-top:4px; max-width:330px} .veg{color:var(--whippet-veg);font-size:11px} /* wine list */ .wine-cols{display:grid;grid-template-columns:1fr 1fr;gap:50px} .wine-box{padding:36px 34px} .wine-box.bordered{border:1px solid var(--whippet-line)} .wine-box.filled{background:var(--whippet-bg-2)} .wine-box h4{font-size:22px;letter-spacing:6px;text-transform:uppercase;margin-bottom:8px} .wine-head{display:flex;justify-content:flex-end;gap:34px;color:var(--whippet-muted-2); font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:18px 0 14px} .wine-row{display:flex;align-items:baseline;gap:14px;padding:10px 0} .wine-row .wr-name{flex:1;font-family:var(--whippet-font-body);font-weight:var(--whippet-weight-light);font-size:14px; letter-spacing:.6px;color:var(--whippet-text)} .wine-row .wr-name small{display:block;color:var(--whippet-muted-2);font-size:12px;margin-top:3px} .wine-row .wr-g,.wine-row .wr-b{width:34px;text-align:right;color:var(--whippet-muted);font-size:14px} /* ============================================================ GALLERY MOSAIC */ .mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:6px} .mosaic div{background-size:cover;background-position:center} .m-a{grid-column:1/3;grid-row:1/3} .m-b{grid-column:3/4;grid-row:1/2} .m-c{grid-column:4/5;grid-row:1/2} .m-d{grid-column:3/5;grid-row:2/4} .m-e{grid-column:1/2;grid-row:3/4} .m-f{grid-column:2/3;grid-row:3/4} /* ============================================================ NEWS */ .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px} .ncard{position:relative;height:430px;overflow:hidden} .ncard img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .ncard:hover img{transform:scale(1.05)} .ncard .ncard-body{position:absolute;inset:0;display:flex;flex-direction:column; justify-content:flex-end;align-items:center;text-align:center;padding:0 24px 40px; background:linear-gradient(to top,rgba(var(--whippet-black-rgb),.78),rgba(var(--whippet-black-rgb),0) 60%)} .ncard .cats{display:flex;gap:14px;margin-bottom:10px} .ncard .cats span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--whippet-muted)} .ncard .date{font-size:11px;letter-spacing:2px;color:var(--whippet-muted);margin-bottom:8px} .ncard h3{font-size:22px;margin-bottom:16px} /* ============================================================ TESTIMONIALS */ .testi{padding:110px 0;text-align:center} /* optional section heading — only renders when the testimonials component is used with chrome (eyebrow/heading); the homepage shim suppresses it */ .testi .overline{margin:0 0 14px} .testi-title{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold); font-size:var(--whippet-fs-title);margin:0 0 46px;letter-spacing:6px} .testi-track{position:relative;max-width:760px;margin:0 auto;min-height:170px} .testi .quote{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none} .testi .quote.active{opacity:1;position:relative;pointer-events:auto} .testi blockquote{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-medium);font-size:28px;line-height:1.5; margin:0 0 26px;letter-spacing:.5px} .testi cite{font-style:normal;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--whippet-muted)} .testi-dots{display:flex;gap:10px;justify-content:center;margin-top:34px} .testi-dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--whippet-muted-2); opacity:.4;cursor:pointer} .testi-dots button.active{opacity:1;background:var(--whippet-text)} /* ============================================================ PRESS */ .press{padding:70px 0} .press .overline{text-align:center;display:block;margin-bottom:46px} .press-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:54px} .press-logos img{height:46px;opacity:.55;filter:grayscale(1) brightness(1.6);transition:.3s} .press-logos img:hover{opacity:1} /* ============================================================ EXPLORE GALLERY */ .explore{padding:90px 0 0;text-align:center} .explore-grid{display:grid;grid-template-columns:repeat(6,1fr);margin-top:54px} .explore-grid a{position:relative;aspect-ratio:1;overflow:hidden} .explore-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .explore-grid a:hover img{transform:scale(1.08)} /* ============================================================ PROMOS */ .promos{display:grid;grid-template-columns:repeat(3,1fr)} .promo{position:relative;height:360px;overflow:hidden;display:flex} .promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .promo .promo-body{position:relative;z-index:2;margin:auto;text-align:center; display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px; width:100%;height:100%;justify-content:center;background:rgba(var(--whippet-overlay-rgb),.45);transition:.3s} .promo:hover .promo-body{background:rgba(var(--whippet-overlay-rgb),.25)} .promo h3{font-size:22px;letter-spacing:4px;text-transform:uppercase} .promo span{color:var(--whippet-muted);font-size:13px;letter-spacing:1px} /* ============================================================ NEWSLETTER */ .newsletter{background:var(--whippet-bg-2);padding:80px 0;text-align:center} .newsletter h3{font-size:30px;margin-bottom:14px} .newsletter p{color:var(--whippet-muted);max-width:520px;margin:0 auto 30px} .newsletter form{display:flex;justify-content:center;gap:0} .newsletter input{background:transparent;border:1px solid var(--whippet-line);color:var(--whippet-text); padding:15px 22px;width:320px;font-family:var(--whippet-font-body);letter-spacing:1px} .newsletter input::placeholder{color:var(--whippet-muted-2);letter-spacing:2px} /* ============================================================ RESERVATIONS STRIP */ .resv-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:70px 0; text-align:center} .resv-strip h4{font-size:15px;letter-spacing:4px;text-transform:uppercase;margin-bottom:10px} .resv-strip span{color:var(--whippet-muted);font-size:13px} /* ============================================================ FIND US / THANK YOU */ .findus{padding:120px 0;text-align:center;position:relative} .findus .overline{display:block;margin-bottom:18px} .findus h2{font-size:40px;letter-spacing:3px;max-width:680px;margin:0 auto 40px;line-height:1.25} .findus-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:820px; margin:0 auto;align-items:center} .findus-cols h4{font-size:13px;letter-spacing:4px;text-transform:uppercase;margin-bottom:8px} .findus-cols span{color:var(--whippet-muted);font-size:13px;display:block} /* ============================================================ FOOTER */ .site-footer{background:var(--whippet-bg-2);padding:80px 0 0} .footer-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px} .footer-cols h4{font-size:13px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px} .footer-cols p,.footer-cols span,.footer-cols a{color:var(--whippet-muted);font-size:13px;line-height:1.9} .footer-cols .blk{margin-bottom:22px} .footer-cols .label{display:block;color:var(--whippet-text);font-size:12px;letter-spacing:2px; text-transform:uppercase;margin-bottom:4px} .footer-cols .links a{display:block} .footer-cols .links a:hover{color:var(--whippet-text)} .footer-social{display:flex;gap:18px;font-size:16px;margin-top:6px} .footer-bar{display:flex;align-items:center;justify-content:space-between; border-top:1px solid var(--whippet-line);margin-top:70px;padding:30px 0} .footer-bar .copyright,.footer-bar .tagline{font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--whippet-muted-2)} .footer-bar .f-logo img{height:26px} /* ============================================================ RESPONSIVE */ @media(max-width:1000px){ /* tablet: drop the phone text so secondary nav + Book CTA never overflow */ .header-phone{display:none} .hero{grid-template-columns:1fr}.hero-right{min-height:420px} .hero-copy{margin-left:60px} .chef{grid-template-columns:1fr}.chef-img{min-height:360px} .chef-right{grid-template-columns:1fr 1fr;grid-template-rows:none}.chef-right>div{min-height:260px} .menu-cols{grid-template-columns:1fr 1fr} .wine-cols{grid-template-columns:1fr} .explore-grid{grid-template-columns:repeat(4,1fr)} .footer-cols{grid-template-columns:1fr 1fr} } @media(max-width:680px){ .site-header{padding:16px 20px} /* compact mobile bar: logo + Book CTA only (full nav drawer is a later task) */ .site-header .nav-left,.header-social,.site-header .nav-right nav,.header-phone{display:none} .nav-right{flex:0;gap:0} .feature-cards,.phil-cards,.news-grid,.promos,.menu-cols,.resv-strip,.findus-cols{grid-template-columns:1fr} .mosaic{grid-template-columns:1fr 1fr} .explore-grid{grid-template-columns:repeat(3,1fr)} .footer-cols{grid-template-columns:1fr} .hero h1{font-size:38px}.section-title{font-size:30px} .newsletter input{width:200px} .section{padding:60px 0} } /* ============================================================ MENU COMPONENT (.wmenu) — rendered by macros/menu.html.twig Reusable, token-driven. Restyle via the --whippet-* tokens in :root above; nothing here hardcodes a colour/font/size. ============================================================ */ .wmenu{max-width:var(--whippet-maxw);margin:0 auto;padding:0 var(--whippet-gutter)} .wmenu__head{text-align:center;margin-bottom:48px} .wmenu__title{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold); color:var(--whippet-text);font-size:var(--whippet-fs-title);margin:0 0 18px;letter-spacing:1px} .wmenu__epigraph{margin:0 auto 14px;max-width:680px;border:0;padding:0} .wmenu__epigraph p{font-family:var(--whippet-font-head);font-style:italic;color:var(--whippet-muted); font-size:var(--whippet-fs-body-lg);line-height:1.6;margin:0} .wmenu__epigraph cite{display:block;margin-top:8px;font-style:normal;color:var(--whippet-muted-2); font-size:var(--whippet-fs-overline);letter-spacing:var(--whippet-ls-base);text-transform:uppercase} .wmenu__intro{color:var(--whippet-muted);font-size:var(--whippet-fs-body-lg);max-width:680px;margin:0 auto} .wmenu__price-note{color:var(--whippet-muted-2);font-size:13px;max-width:760px;margin:14px auto 0} .wmenu__section{margin:0 auto 44px;max-width:760px} .wmenu__section-title{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold); color:var(--whippet-text);font-size:22px;text-transform:uppercase;letter-spacing:1.5px; text-align:center;margin:0 0 6px;padding-bottom:14px;border-bottom:1px solid var(--whippet-line)} .wmenu__section-note{text-align:center;color:var(--whippet-muted-2);font-size:13px; font-style:italic;margin:0 0 18px} .wmenu__items{list-style:none;margin:0;padding:0} .wmenu__item{padding:14px 0;border-bottom:1px solid var(--whippet-line)} .wmenu__item:last-child{border-bottom:0} .wmenu__item-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px} .wmenu__item-name{font-family:var(--whippet-font-body);font-weight:var(--whippet-weight-medium); color:var(--whippet-text);font-size:16px} .wmenu__item-desc{color:var(--whippet-muted);font-size:14px;font-weight:var(--whippet-weight-body); line-height:1.55;margin-top:4px;max-width:90%} .wmenu__region{color:var(--whippet-muted-2);font-size:12px;font-style:italic;font-weight:var(--whippet-weight-light); text-transform:uppercase;letter-spacing:.5px;margin-left:6px} /* price + multi-price (options / wine measures) */ .wmenu__price{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-medium); color:var(--whippet-text);white-space:nowrap;flex:0 0 auto} .wmenu__price--options,.wmenu__price--measures{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:flex-end} .wmenu__price-label{color:var(--whippet-muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.5px; font-weight:var(--whippet-weight-body)} .wmenu__price-sep{color:var(--whippet-muted-2)} /* dietary badges + allergen key */ .wmenu__diet-list{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle} .wmenu__diet{display:inline-block;font-family:var(--whippet-font-body);font-size:10px;font-weight:var(--whippet-weight-semibold); letter-spacing:.5px;color:var(--whippet-veg);border:1px solid var(--whippet-veg);border-radius:3px; padding:1px 4px;line-height:1.3;text-transform:uppercase;cursor:help} .wmenu__notes{max-width:760px;margin:0 auto 36px} .wmenu__note{color:var(--whippet-muted-2);font-size:12px;line-height:1.6;margin:0 0 8px;text-align:center} .wmenu__key{max-width:760px;margin:0 auto;padding-top:20px;border-top:1px solid var(--whippet-line);text-align:center} .wmenu__key-title{display:block;font-family:var(--whippet-font-head);font-size:var(--whippet-fs-overline); text-transform:uppercase;letter-spacing:1.5px;color:var(--whippet-muted-2);margin-bottom:12px} .wmenu__key-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center} .wmenu__key-item{color:var(--whippet-muted);font-size:12px;display:inline-flex;align-items:center;gap:6px} /* availability note (lunch / sunday roast service windows) */ .wmenu__availability{color:var(--whippet-muted-2);font-size:13px;font-style:italic;margin:10px auto 0;max-width:680px} /* set-menu pricing band (e.g. Sunday roast 2/3 courses) */ .wmenu__setmenu{max-width:760px;margin:0 auto 40px;padding:22px 24px;text-align:center; border:1px solid var(--whippet-line);border-radius:4px} .wmenu__setmenu-label{display:block;font-family:var(--whippet-font-head);font-size:var(--whippet-fs-overline); text-transform:uppercase;letter-spacing:1.5px;color:var(--whippet-muted-2);margin-bottom:14px} .wmenu__setmenu-tiers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:center} .wmenu__setmenu-tier{display:inline-flex;align-items:baseline;gap:8px} .wmenu__setmenu-courses{font-family:var(--whippet-font-body);font-weight:var(--whippet-weight-medium);color:var(--whippet-text)} .wmenu__setmenu-price{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-medium);color:var(--whippet-text)} .wmenu__setmenu-supp{color:var(--whippet-muted-2);font-size:12px} /* verify:true marker — visible "to confirm" badge + footnote */ .wmenu__verify-badge{display:inline-block;font-family:var(--whippet-font-body);font-size:9px;font-weight:var(--whippet-weight-semibold); text-transform:uppercase;letter-spacing:.6px;color:#1a1207;background:#d9a441;border-radius:3px; padding:2px 6px;margin-left:6px;vertical-align:middle;white-space:nowrap} .wmenu__verify-badge--block{margin:14px 0 0} .wmenu__verify-note{color:#d9a441;font-size:12px;line-height:1.5;margin:6px 0 0;max-width:640px} @media(max-width:600px){ .wmenu__title{font-size:30px} .wmenu__item-head{flex-wrap:wrap;gap:4px} .wmenu__item-desc{max-width:100%} } /* ============================================================ FIND-US COMPONENTS (P2.3 / task #11738) .whip-nap / .whip-hours / .whip-getting-there — reusable, token-driven. Each is self-contained so it can sit in the findus grid, a contact page, or the footer. Nothing here hardcodes a colour/font/size — all via --whippet-* tokens. ============================================================ */ /* shared small column heading */ .whip-nap__heading,.whip-hours__heading,.whip-gt__heading{ font-family:var(--whippet-font-head);font-size:13px;letter-spacing:4px; text-transform:uppercase;color:var(--whippet-text);margin-bottom:16px} /* ---------- NAP + map ---------- */ .whip-nap__address{font-style:normal;display:block} .whip-nap__name{display:block;color:var(--whippet-text);font-size:14px; letter-spacing:1px;margin-bottom:6px} .whip-nap__line{display:block;color:var(--whippet-muted);font-size:13px;line-height:1.85} /* keep city + postcode on one line: the legacy `.findus-cols span{display:block}` rule leaks onto our inner address spans — re-inline them (0,2,0 beats 0,1,1) */ .whip-nap__line span{display:inline} a.whip-nap__line:hover{color:var(--whippet-text)} .whip-nap__phone,.whip-nap__email{letter-spacing:.5px} .whip-nap__dir{margin-top:16px} .whip-nap__map{margin-top:20px;border:1px solid var(--whippet-line); /* muted/inverted so the bright Google tiles sit in the dark palette */ filter:grayscale(.35) contrast(.95) brightness(.92)} .whip-nap__map iframe{display:block} /* ---------- Opening hours ---------- */ .whip-hours__table{width:100%;border-collapse:collapse} .whip-hours__row{border-bottom:1px solid var(--whippet-line)} .whip-hours__row:last-child{border-bottom:0} .whip-hours__day{text-align:left;font-weight:var(--whippet-weight-body); color:var(--whippet-muted);font-size:13px;letter-spacing:.5px;padding:9px 0} .whip-hours__times{text-align:right;color:var(--whippet-muted);font-size:13px; letter-spacing:.5px;padding:9px 0} .whip-hours__closed{color:var(--whippet-muted-2)} /* each open/close range on its own line (clean for split lunch+dinner days) */ .whip-hours__range{display:block} .whip-hours__row.is-today .whip-hours__day, .whip-hours__row.is-today .whip-hours__times{color:var(--whippet-text); font-weight:var(--whippet-weight-medium)} /* ---------- Getting there ---------- */ .whip-gt__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px} .whip-gt__block--wide{grid-column:1 / -1} .whip-gt__title{font-family:var(--whippet-font-head);font-size:12px;letter-spacing:2px; text-transform:uppercase;color:var(--whippet-text);margin-bottom:8px} .whip-gt__text{color:var(--whippet-muted);font-size:13px;line-height:1.8;margin:0} .whip-gt__parking{list-style:none;margin:0;padding:0} .whip-gt__parking-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px; padding:7px 0;border-bottom:1px solid var(--whippet-line);font-size:13px;line-height:1.6} .whip-gt__parking-item:last-child{border-bottom:0} .whip-gt__parking-name{color:var(--whippet-muted);flex:1 1 auto;min-width:120px} .whip-gt__parking-note{color:var(--whippet-muted-2);font-size:12px;font-style:italic} .whip-gt__parking-time{color:var(--whippet-text);font-size:12px;letter-spacing:.5px;white-space:nowrap} @media(max-width:600px){ .whip-gt__grid{grid-template-columns:1fr} } /* findus section when populated by the P2.3 components (map/table/lists): left-align content + a wider, rebalanced 3-col grid. The section heading stays centred (it sits outside .findus-cols). */ .findus-cols--components{max-width:var(--whippet-maxw);grid-template-columns:1.1fr 1fr 1.4fr; gap:48px;text-align:left;align-items:start} @media(max-width:1000px){ .findus-cols--components{grid-template-columns:1fr 1fr} .findus-cols--components .whip-getting-there{grid-column:1 / -1} } @media(max-width:680px){ .findus-cols--components{grid-template-columns:1fr;gap:40px} } /* ============================================================ PRIVATE-HIRE SPACES (P2.5 / task #11740) .whip-spaces — reusable spaces/capacities table, token-driven. Self-contained: works on a private-dining page, an events block, or the find-us area. Nothing hardcodes a colour/font/size. ============================================================ */ .whip-spaces__eyebrow{margin-bottom:10px} .whip-spaces__heading{font-family:var(--whippet-font-head);font-size:13px;letter-spacing:4px; text-transform:uppercase;color:var(--whippet-text);margin-bottom:14px} .whip-spaces__intro{color:var(--whippet-muted);font-size:14px;line-height:1.8; max-width:62ch;margin:0 0 26px} .whip-spaces__table{width:100%;border-collapse:collapse} .whip-spaces__table th,.whip-spaces__table td{text-align:left;vertical-align:top} .whip-spaces__th{font-family:var(--whippet-font-head); font-weight:var(--whippet-weight-semibold);font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--whippet-muted-2); padding:0 18px 12px 0;border-bottom:1px solid var(--whippet-line)} .whip-spaces__th--notes{padding-right:0} .whip-spaces__row{border-bottom:1px solid var(--whippet-line)} .whip-spaces__row:last-child{border-bottom:0} .whip-spaces__space{padding:14px 18px 14px 0;color:var(--whippet-text); font-weight:var(--whippet-weight-medium);font-size:14px;letter-spacing:.5px;white-space:nowrap} .whip-spaces__aka{display:block;color:var(--whippet-muted-2);font-size:12px;font-style:italic; font-weight:var(--whippet-weight-body);letter-spacing:.5px;white-space:nowrap} .whip-spaces__cap{padding:14px 18px 14px 0;color:var(--whippet-text); font-size:13px;letter-spacing:.5px;white-space:nowrap} .whip-spaces__notes{padding:14px 0;color:var(--whippet-muted);font-size:13px;line-height:1.7} .whip-spaces__row.is-feature{background:rgba(var(--whippet-white-rgb),.03)} /* stack each space to a card on phones — a 3-col table is too wide */ @media(max-width:600px){ .whip-spaces__table,.whip-spaces__table tbody,.whip-spaces__row, .whip-spaces__table th,.whip-spaces__table td{display:block;width:auto} .whip-spaces__table thead{position:absolute;left:-9999px} .whip-spaces__row{padding:14px 0} .whip-spaces__row.is-feature{padding-inline:12px;margin-inline:-12px} .whip-spaces__space,.whip-spaces__cap,.whip-spaces__notes{padding:0;white-space:normal} .whip-spaces__cap{margin:4px 0 8px;color:var(--whippet-muted)} .whip-spaces__cap::before{content:'Capacity: ';color:var(--whippet-muted-2)} } /* ============================================================ FAQ accordion (P2.6 / task #11741) Component: partials/whippet/faq.html.twig ============================================================ */ .whip-faq{max-width:760px;margin:46px auto 0} .whip-faq__intro{max-width:62ch;margin:0 auto} .whip-faq__item{border-bottom:1px solid var(--whippet-line)} .whip-faq__item:first-child{border-top:1px solid var(--whippet-line)} .whip-faq__q{margin:0;font-family:var(--whippet-font-head)} .whip-faq__trigger{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px; background:none;border:0;cursor:pointer;text-align:left; padding:24px 4px;color:var(--whippet-text); font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold); font-size:17px;letter-spacing:.5px;line-height:1.4; transition:color .25s ease; } .whip-faq__trigger:hover .whip-faq__q-text{color:var(--whippet-muted)} .whip-faq__trigger:focus-visible{outline:1px solid var(--whippet-line); outline-offset:4px;border-radius:2px} .whip-faq__q-text{transition:color .25s ease} /* plus/minus icon drawn from two pseudo-bars — no icon-font dependency */ .whip-faq__icon{position:relative;flex:0 0 auto;width:14px;height:14px;margin-top:3px} .whip-faq__icon::before,.whip-faq__icon::after{ content:'';position:absolute;top:50%;left:50%;background:var(--whippet-muted); transition:transform .3s ease,background .25s ease} .whip-faq__icon::before{width:14px;height:1.5px;transform:translate(-50%,-50%)} .whip-faq__icon::after{width:1.5px;height:14px;transform:translate(-50%,-50%)} .whip-faq__item.is-open .whip-faq__icon::after{transform:translate(-50%,-50%) scaleY(0)} .whip-faq__item.is-open .whip-faq__icon::before{background:var(--whippet-text)} .whip-faq__item.is-open .whip-faq__trigger{color:var(--whippet-text)} /* panel: smooth open via grid-rows trick; padding on the inner answer so the collapsed (0fr) state truly measures zero height */ .whip-faq__panel{display:grid;grid-template-rows:1fr; transition:grid-template-rows .32s ease} .whip-faq__answer{overflow:hidden;min-height:0; color:var(--whippet-muted);font-size:14px;line-height:1.85;letter-spacing:.4px; padding:0 40px 26px 4px} .whip-faq__answer a{color:var(--whippet-text);text-decoration:underline; text-underline-offset:3px} /* collapsed state (JS sets [hidden]). Panel is display:grid so override the UA [hidden]{display:none} — we animate height instead of hard-hiding it. */ .whip-faq__panel[hidden]{display:grid;grid-template-rows:0fr} .whip-faq__panel[hidden] .whip-faq__answer{padding-top:0;padding-bottom:0} /* No-JS / pre-enhancement: keep every answer visible & crawlable. */ .whip-faq--nojs .whip-faq__panel[hidden]{grid-template-rows:1fr} .whip-faq--nojs .whip-faq__panel[hidden] .whip-faq__answer{padding:0 40px 26px 4px} .whip-faq--nojs .whip-faq__icon{display:none} @media(max-width:600px){ .whip-faq__trigger{font-size:15px;padding:20px 2px;gap:16px} .whip-faq__answer{padding-right:20px} } /* ============================================================ P2.7 — CTA band / voucher band / footer (task #11742) All colours, type and spacing consume the :root tokens. ============================================================ */ /* ---------- CTA band --------------------------------------- */ .whip-cta{padding:var(--whippet-section-y) 0;background:var(--whippet-bg-2)} .whip-cta__inner{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center} .whip-cta__eyebrow{margin:0 0 16px} .whip-cta__heading{margin:0;color:var(--whippet-text)} .whip-cta__text{max-width:640px;margin:18px auto 0;color:var(--whippet-muted); font-size:var(--whippet-fs-body-lg);line-height:1.7} .whip-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px} /* split variant: heading left, buttons right on wide screens */ .whip-cta--split .whip-cta__inner{flex-direction:row;justify-content:space-between; align-items:center;text-align:left;flex-wrap:wrap} .whip-cta--split .whip-cta__text{margin-left:0;margin-right:0} .whip-cta--split .whip-cta__actions{justify-content:flex-end} /* ---------- Voucher band ----------------------------------- */ .whip-voucher{padding:var(--whippet-section-y) 0;background:var(--whippet-bg-3)} .whip-voucher__inner{display:flex;align-items:center;gap:48px} .whip-voucher--has-image .whip-voucher__copy{flex:1 1 50%} .whip-voucher__copy{max-width:680px} .whip-voucher__eyebrow{margin:0 0 16px} .whip-voucher__heading{font-family:var(--whippet-font-head); font-weight:var(--whippet-weight-semibold);font-size:32px;line-height:1.25; letter-spacing:1px;color:var(--whippet-text);margin:0 0 18px} .whip-voucher__body{color:var(--whippet-muted);font-size:var(--whippet-fs-body-lg); line-height:1.8;margin:0 0 28px} .whip-voucher__media{flex:1 1 50%} .whip-voucher__media img{width:100%;height:100%;max-height:360px;object-fit:cover; display:block;border:1px solid var(--whippet-line)} /* ---------- Footer ----------------------------------------- */ .whip-footer{background:var(--whippet-bg-2);border-top:1px solid var(--whippet-line); padding:72px 0 32px;color:var(--whippet-muted); font-family:var(--whippet-font-body);font-weight:var(--whippet-weight-body)} .whip-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px} .whip-footer__brand,.whip-footer__heading{font-family:var(--whippet-font-head); font-weight:var(--whippet-weight-semibold);color:var(--whippet-text); font-size:16px;letter-spacing:1.5px;margin:0 0 18px} .whip-footer__about{font-size:14px;line-height:1.85;margin:0 0 22px;max-width:34ch} .whip-footer__social{display:flex;gap:14px} .whip-footer__social a{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border:1px solid var(--whippet-line);border-radius:50%; color:var(--whippet-muted);transition:color .25s ease,border-color .25s ease,background .25s ease} .whip-footer__social a:hover{color:var(--whippet-invert);background:var(--whippet-text); border-color:var(--whippet-text)} .whip-footer__links{list-style:none;margin:0 0 18px;padding:0} .whip-footer__links li{margin:0 0 10px} .whip-footer__links a{color:var(--whippet-muted);font-size:14px;text-decoration:none; transition:color .25s ease} .whip-footer__links a:hover{color:var(--whippet-text)} .whip-footer__links--legal{margin-top:6px;padding-top:18px; border-top:1px solid var(--whippet-line)} /* footer reuses the nap + hours partials — soften their headings to footer scale */ .whip-footer .whip-nap__heading,.whip-footer .whip-hours__heading{ font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold); color:var(--whippet-text);font-size:16px;letter-spacing:1.5px;margin:0 0 18px} .whip-footer .whip-nap__dir{margin-top:14px} .whip-footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between; align-items:center;gap:14px;margin-top:56px;padding-top:26px; border-top:1px solid var(--whippet-line)} .whip-footer__copyright{font-size:12.5px;letter-spacing:.4px} .whip-footer__legal-note{display:block;color:var(--whippet-muted-2);margin-top:4px} .whip-footer__tagline{font-family:var(--whippet-font-head);font-style:italic; font-size:13px;letter-spacing:1px;color:var(--whippet-muted-2)} @media(max-width:900px){ .whip-footer__cols{grid-template-columns:1fr 1fr;gap:40px} .whip-voucher__inner{flex-direction:column;gap:32px;text-align:center} .whip-voucher__copy{margin:0 auto} } @media(max-width:600px){ .whip-footer__cols{grid-template-columns:1fr;gap:36px} .whip-cta--split .whip-cta__inner{flex-direction:column;text-align:center} .whip-cta--split .whip-cta__actions{justify-content:center} .whip-footer__bar{flex-direction:column;text-align:center} } /* ============================================================ P3.2 (#11744) — PAGE-TYPE LAYOUT Shell + content/menu/seasonal page types. All colour, type and spacing consume the :root tokens above; nothing hardcoded. ============================================================ */ .whippet-main{padding-top:0} /* ---- generic page hero (content + menu types) ------------- */ .whippet-pagehero{position:relative;padding:calc(var(--whippet-section-y) + 40px) var(--whippet-gutter) var(--whippet-section-y); text-align:center;background:var(--whippet-bg-2);background-size:cover;background-position:center} .whippet-pagehero.has-image::before{content:"";position:absolute;inset:0; background:linear-gradient(rgba(var(--whippet-overlay-rgb),.62),rgba(var(--whippet-overlay-rgb),.62))} .whippet-pagehero__inner{position:relative;max-width:760px;margin:0 auto} .whippet-pagehero__eyebrow,.whippet-seasonal-hero__eyebrow{font-family:var(--whippet-font-head); font-weight:var(--whippet-weight-semibold);font-size:var(--whippet-fs-overline);letter-spacing:4px; text-transform:uppercase;color:var(--whippet-veg);margin:0 0 14px} .whippet-pagehero__title{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold); color:var(--whippet-text);font-size:var(--whippet-fs-title);letter-spacing:5px;line-height:1.18;margin:0} .whippet-pagehero__lead{color:var(--whippet-muted);font-size:var(--whippet-fs-body-lg);margin:18px auto 0;max-width:620px} /* ---- prose band (renders page markdown) ------------------- */ .whippet-prose{padding:var(--whippet-section-y) 0} .whippet-prose__inner{max-width:760px;margin:0 auto;padding:0 var(--whippet-gutter);color:var(--whippet-muted)} .whippet-prose__inner h2{font-family:var(--whippet-font-head);color:var(--whippet-text); font-size:30px;letter-spacing:3px;line-height:1.25;margin:1.6em 0 .6em} .whippet-prose__inner h3{font-family:var(--whippet-font-head);color:var(--whippet-text); font-size:22px;letter-spacing:2px;margin:1.4em 0 .5em} .whippet-prose__inner p{margin:0 0 1.2em;font-size:var(--whippet-fs-body-lg);line-height:var(--whippet-lh-base)} .whippet-prose__inner a{color:var(--whippet-veg);text-decoration:none} .whippet-prose__inner a:hover{text-decoration:underline} .whippet-prose__inner ul,.whippet-prose__inner ol{margin:0 0 1.2em;padding-left:1.3em} .whippet-prose__inner li{margin:0 0 .5em} .whippet-prose__inner img{margin:1.4em auto;border-radius:2px} .whippet-prose__inner blockquote{border-left:2px solid var(--whippet-veg);margin:1.6em 0;padding:.2em 0 .2em 1.2em; font-family:var(--whippet-font-head);color:var(--whippet-text);font-size:20px;letter-spacing:1px} /* ---- seasonal banner hero --------------------------------- */ .whippet-seasonal-hero{position:relative;padding:calc(var(--whippet-section-y) + 60px) var(--whippet-gutter); text-align:center;background:var(--whippet-bg-2);background-size:cover;background-position:center} .whippet-seasonal-hero.has-image::before{content:"";position:absolute;inset:0; background:linear-gradient(rgba(var(--whippet-overlay-rgb),.66),rgba(var(--whippet-overlay-rgb),.66))} .whippet-seasonal-hero__inner{position:relative;max-width:720px;margin:0 auto} .whippet-seasonal-hero__title{font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold); color:var(--whippet-text);font-size:var(--whippet-fs-hero);letter-spacing:4px;line-height:1.15;margin:0} .whippet-seasonal-hero__dates{font-family:var(--whippet-font-head);color:var(--whippet-text); font-size:18px;letter-spacing:3px;text-transform:uppercase;margin:16px 0 0} .whippet-seasonal-hero__lead{color:var(--whippet-muted);font-size:var(--whippet-fs-body-lg);margin:18px auto 30px;max-width:600px} /* ---- shared button (reuses header CTA look) --------------- */ .whippet-btn{display:inline-block;font-family:var(--whippet-font-head);font-weight:var(--whippet-weight-semibold); font-size:13px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;padding:14px 34px; border:1px solid var(--whippet-text);transition:background .2s,color .2s} .whippet-btn--solid{background:var(--whippet-text);color:var(--whippet-invert)} .whippet-btn--solid:hover{background:transparent;color:var(--whippet-text)} @media(max-width:680px){ .whippet-pagehero__title{font-size:30px;letter-spacing:3px} .whippet-seasonal-hero__title{font-size:34px;letter-spacing:2px} }