/* ========================================================================= Poblano's Mexican Grill Type: Cucciolo (headings) + Noirden (everything else) Color: keyed to the logo - chile #EA412F, verde #176C37 THEMES — switch by changing the attribute on : (default: espresso + chile + verde) (light: bone-dominant, airy) (dark green-dominant, late-night bar) ========================================================================= */ /* ---------------------------------------------------------------- Fonts -- */ @font-face{ font-family:"Cucciolo"; src:url("assets/fonts/cucciolo.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Cucciolo Rough"; src:url("assets/fonts/cucciolo-rough.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Noirden"; src:url("assets/fonts/noirden-light.woff2") format("woff2"); font-weight:300;font-style:normal;font-display:swap; } @font-face{ font-family:"Noirden"; src:url("assets/fonts/noirden-regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Noirden"; src:url("assets/fonts/noirden-italic.woff2") format("woff2"); font-weight:400;font-style:italic;font-display:swap; } @font-face{ font-family:"Noirden"; src:url("assets/fonts/noirden-semibold.woff2") format("woff2"); font-weight:600;font-style:normal;font-display:swap; } @font-face{ font-family:"Noirden"; src:url("assets/fonts/noirden-bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap; } /* --------------------------------------------------------------- Tokens -- */ :root{ /* Brand constants, straight off the logo */ --chile:#EA412F; --chile-deep:#C22F20; --verde:#176C37; --verde-light:#3BA57C; --verde-deep:#0F4A26; /* Theme: SOBREMESA (default) */ --base:#17110F; /* espresso, page base */ --base-2:#231916; /* raised surface */ --paper:#F6F0E4; /* bone / light plane */ --paper-2:#E7DCC8; --amber:#E9A83C; /* highlight */ --text:#F6F0E4; /* text on base */ --text-dark:#1D1512; /* text on paper / chile / amber */ --display:"Cucciolo","Noirden",system-ui,sans-serif; --body:"Noirden",system-ui,-apple-system,sans-serif; --wrap:1240px; --gutter:clamp(20px,5vw,56px); --rule:3px; } /* Theme: CAL — bone-dominant, airy, chile as the only loud voice */ [data-theme="cal"]{ --base:#F6F0E4; --base-2:#EDE4D3; --paper:#FFFBF3; --paper-2:#E7DCC8; --amber:#E0902A; --text:#1D1512; --text-dark:#1D1512; } [data-theme="cal"] .site-header, [data-theme="cal"] .site-footer, [data-theme="cal"] .hero, [data-theme="cal"] .plane-deep, [data-theme="cal"] .plane-base{background:#1D1512;color:#F6F0E4} [data-theme="cal"] .clock{background:#251A16;color:#F6F0E4} /* Theme: NOCHE — deep verde night, chile as neon */ [data-theme="noche"]{ --base:#0B2418; --base-2:#123122; --paper:#F3EFE2; --paper-2:#DFD6C0; --amber:#F0B23F; --text:#F3EFE2; --text-dark:#0B2418; } *,*::before,*::after{box-sizing:border-box} [hidden]{display:none !important} html{scroll-behavior:smooth;scroll-padding-top:100px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important;transition:none !important} } body{ margin:0;overflow-x:clip; background:var(--base);color:var(--text); font-family:var(--body);font-weight:400; font-size:18px;line-height:1.65; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit} /* ----------------------------------------------------------------- Type -- */ h1,h2,h3,.display{ font-family:var(--display); font-weight:400; line-height:1; letter-spacing:.005em; margin:0 0 .4em; text-wrap:balance; } h1{font-size:clamp(3rem,7.2vw,6.6rem);line-height:1.04} h2{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.05} h3{font-size:clamp(1.5rem,2.1vw,2rem)} p{margin:0 0 1.05em;max-width:62ch} .lede{font-size:clamp(1.08rem,1.35vw,1.25rem);font-weight:300;line-height:1.6} em{font-style:normal;color:var(--chile)} .plane-chile em,.plane-amber em{color:var(--verde-deep)} /* Small caps UI type is Noirden — a brush face doesn't survive 11px tracking */ .label,.btn,.nav-links a,.item__price,.chip,.menu-count,.field label, .hours td,.marquee span,.site-footer h4,.clock__meta b,.mosaic figcaption, .hero__caption,.form-status,.menu-sub,.item__name,.timeline__labels span, .timeline__now::after,.faq summary{ font-family:var(--body); } .label{ display:inline-block;margin:0 0 1.5rem;padding:.5rem .75rem; background:var(--amber);color:var(--text-dark); font-weight:700;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; } .label--chile{background:var(--chile);color:var(--text-dark)} .label--verde{background:var(--verde);color:#fff} .label--paper{background:var(--paper);color:var(--text-dark)} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .section{padding:clamp(72px,10vw,140px) 0} .section--tight{padding:clamp(48px,6vw,84px) 0} .plane-base{background:var(--base);color:var(--text)} .plane-deep{background:var(--base-2);color:var(--text)} .plane-paper{background:var(--paper);color:var(--text-dark)} .plane-verde{background:var(--verde);color:#fff} .plane-chile{background:var(--chile);color:var(--text-dark)} .plane-amber{background:var(--amber);color:var(--text-dark)} /* -------------------------------------------------------------- Buttons -- */ .btn{ --bshadow:var(--amber); display:inline-flex;align-items:center;gap:.5rem; font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; padding:1.05em 1.7em;border:2px solid currentColor;background:transparent;color:inherit; text-decoration:none;cursor:pointer; box-shadow:6px 6px 0 var(--bshadow); transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s cubic-bezier(.2,.8,.3,1),background .16s,color .16s; } .btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--bshadow)} .btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--bshadow)} .btn--chile{background:var(--chile);border-color:var(--chile);color:var(--text-dark);--bshadow:var(--verde)} .btn--paper{background:var(--paper);border-color:var(--paper);color:var(--text-dark);--bshadow:var(--chile)} .btn--dark{background:var(--base);border-color:var(--base);color:var(--text);--bshadow:var(--amber)} .plane-amber .btn--dark{--bshadow:var(--verde)} .plane-chile .btn--dark{--bshadow:var(--amber)} .plane-verde .btn--paper{--bshadow:var(--amber)} .btn-row{display:flex;flex-wrap:wrap;gap:1.15rem;margin-top:2rem} :focus-visible{outline:3px solid var(--amber);outline-offset:3px} /* --------------------------------------------------------------- Header -- */ .site-header{ position:sticky;top:0;z-index:80; background:var(--base);border-bottom:var(--rule) solid var(--chile); } [data-theme="cal"] .site-header{background:#1D1512} .nav{max-width:var(--wrap);margin-inline:auto;padding:12px var(--gutter);display:flex;align-items:center;gap:1.5rem} .brand{flex:none;line-height:0} .brand img{height:60px;width:auto} .nav-links{margin-left:auto;display:flex;align-items:center;gap:1.7rem;list-style:none;margin-block:0;padding:0} .nav-links a{ font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; text-decoration:none;color:#F6F0E4;padding:.4rem 0;border-bottom:2px solid transparent; } .nav-links a:hover{border-color:var(--amber)} .nav-links a[aria-current="page"]{border-color:var(--chile)} .nav-cta{display:flex;gap:.7rem} .nav-cta .btn{padding:.75em 1.15em;box-shadow:4px 4px 0 var(--bshadow)} .nav-toggle{ display:none;margin-left:auto;background:none;border:2px solid #F6F0E4;color:#F6F0E4; font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;padding:.6rem .9rem;cursor:pointer; } @media (max-width:1060px){ .nav-toggle{display:block;position:relative;z-index:2} /* The panel is a full-screen sheet, not a dropdown - so nothing underneath can show through it, and the links get room to breathe. */ .nav-links{ display:none;position:fixed; top:var(--header-h,76px);left:0;right:0;bottom:0; flex-direction:column;align-items:stretch;justify-content:flex-start; gap:0;margin:0;padding:clamp(12px,4vw,28px) var(--gutter) 120px; background:var(--base);overflow-y:auto;overscroll-behavior:contain;z-index:90; } [data-theme="cal"] .nav-links{background:#1D1512} .nav[data-open="true"] .nav-links{display:flex} .nav-links a{ display:block;padding:1.25rem 0; font-size:1.35rem;font-weight:600;letter-spacing:.06em; border-bottom:1px solid rgba(246,240,228,.16); } .nav-links li:last-child a{border-bottom:0} .nav-links a[aria-current="page"]{color:var(--amber);border-color:var(--amber)} /* Language + order pinned to the bottom of the sheet, clear of the action bar */ .nav-cta{ display:none;position:fixed;left:0;right:0; bottom:0;z-index:91; gap:.75rem;padding:1.1rem var(--gutter) calc(1.1rem + env(safe-area-inset-bottom, 0px)); background:var(--base);border-top:2px solid rgba(246,240,228,.16); } body.nav-open .actionbar{display:none} [data-theme="cal"] .nav-cta{background:#1D1512} .nav[data-open="true"] .nav-cta{display:flex;flex-direction:row;align-items:stretch} .nav[data-open="true"] .nav-cta .btn{flex:1;justify-content:center;padding:1.05em 1rem} .nav[data-open="true"] .lang{flex:0 0 68px} .brand img{height:50px} /* Menu open: freeze the page behind it */ body.nav-open{overflow:hidden} } /* The header keeps its own controls visible above the sheet */ @media (max-width:1060px){ .site-header{z-index:95} .nav{position:relative;z-index:96} .nav .nav-links,.nav .nav-cta{z-index:90} } /* ----------------------------------------------------------------- Hero -- */ .hero{background:var(--base);position:relative;padding:clamp(44px,6vw,88px) 0 clamp(56px,7vw,96px)} [data-theme="cal"] .hero{background:#1D1512;color:#F6F0E4} .hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,64px);align-items:end} .hero__copy{padding-bottom:.5rem} .hero h1{margin-bottom:.28em} .hero h1 .line{display:block;overflow:hidden;padding:.2em 0;margin:-.2em 0} .hero h1 .line > span{display:block;animation:rise .95s cubic-bezier(.2,.85,.25,1) both} .hero h1 .line:nth-child(2) > span{animation-delay:.08s} .hero h1 .line:nth-child(3) > span{animation-delay:.16s} @keyframes rise{from{transform:translateY(108%)}to{transform:none}} .hero__copy .lede{max-width:40ch} .hero__figure{position:relative;margin:0 0 18px} .hero__figure img{aspect-ratio:4/5;object-fit:cover;position:relative;z-index:1} .hero__figure::before{content:"";position:absolute;inset:auto -18px -18px auto;width:70%;height:70%;background:var(--verde);z-index:0} .hero__caption{ position:absolute;z-index:2;left:0;bottom:0;transform:translate(-14px,14px); background:var(--amber);color:var(--text-dark); font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:.55rem .8rem; } @media (max-width:920px){ .hero__grid{grid-template-columns:1fr} .hero__figure{margin-top:2.5rem;max-width:440px} .hero__figure img{aspect-ratio:4/3} } /* ------------------------------------------------------------ Day clock -- */ .clock{border-top:var(--rule) solid var(--chile);background:var(--base-2);overflow:hidden;color:var(--text)} [data-theme="cal"] .clock{color:#F6F0E4} .clock__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(24px,3vw,36px) var(--gutter) clamp(30px,3.5vw,42px)} .clock__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;margin-bottom:1.6rem} .clock__status{ font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1; color:var(--amber);margin:0; } .clock__status .dot{ display:inline-block;width:.42em;height:.42em;background:var(--amber);border-radius:50%; margin-right:.45em;vertical-align:.08em;animation:pulse 2.4s ease-in-out infinite; } .clock__status[data-open="false"]{color:var(--paper-2)} .clock__status[data-open="false"] .dot{background:var(--paper-2);animation:none} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} .clock__meta{font-size:.98rem;font-weight:300;opacity:.8;margin:0} .clock__meta b{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9} .timeline{position:relative;padding-bottom:2.8rem} .timeline__track{display:flex;height:14px;background:rgba(246,240,228,.12)} .timeline__seg[data-kind="breakfast"]{background:var(--amber)} .timeline__seg[data-kind="happy"]{background:var(--chile)} .timeline__seg[data-kind="dinner"]{background:var(--verde)} .timeline__labels{display:flex;margin-top:.8rem} .timeline__labels span{ font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; opacity:.75;white-space:nowrap; } .timeline__now{position:absolute;top:-8px;width:2px;height:30px;background:var(--paper);transition:left .6s cubic-bezier(.2,.8,.3,1)} .timeline__now::after{ content:attr(data-time);position:absolute;top:34px;left:50%;transform:translateX(-50%); background:var(--paper);color:var(--text-dark);white-space:nowrap; font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .45rem; } @media (max-width:640px){.timeline__labels span{font-size:.53rem;letter-spacing:.08em}} /* --------------------------------------------------------------- Layout -- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center} .split--top{align-items:start} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)} @media (max-width:900px){.split,.grid-3{grid-template-columns:1fr}} .headline-block{max-width:16ch} .frame{position:relative} .frame img{position:relative;z-index:1;width:100%;object-fit:cover} .frame::before{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:60%;z-index:0;background:var(--amber)} .frame--verde::before{background:var(--verde)} .frame--chile::before{background:var(--chile)} .frame--paper::before{background:var(--paper)} .frame--4x5 img{aspect-ratio:4/5} .frame--4x3 img{aspect-ratio:4/3} .stack{display:grid;gap:2.4rem;margin:0;padding:0;list-style:none} .stack li{border-top:2px solid currentColor;padding-top:1.15rem} .stack h3{margin-bottom:.3rem} .stack p{margin:0;font-weight:300;font-size:1rem;opacity:.9} .big-stat{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap;margin-top:2rem} .big-stat b{display:block;font-family:var(--display);font-size:clamp(3.2rem,6vw,5rem);line-height:.9;font-weight:400} .big-stat span{display:block;margin-top:.6rem;font-size:.95rem;font-weight:300;max-width:20ch} .dish h3{margin:1.2rem 0 .3rem} .dish p{margin:0;font-size:1rem;font-weight:300;opacity:.9} .dish .price{display:block;margin-top:.7rem;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)} .plane-paper .dish .price{color:var(--chile-deep)} .mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rule);background:var(--chile)} .mosaic figure{margin:0;position:relative;overflow:hidden} .mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1} .mosaic figure:first-child{grid-column:span 2;grid-row:span 2} .mosaic figcaption{ position:absolute;left:0;bottom:0;background:var(--base);color:var(--text); font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.45rem .7rem; } @media (max-width:760px){ .mosaic{grid-template-columns:repeat(2,1fr)} .mosaic figure:first-child{grid-column:span 2;grid-row:auto} } .marquee{ background:var(--amber);color:var(--text-dark); border-top:var(--rule) solid var(--base);border-bottom:var(--rule) solid var(--base); overflow:hidden;padding:.9rem 0; } .marquee__track{display:flex;white-space:nowrap;width:max-content;animation:slide 36s linear infinite} .marquee span{ font-weight:700;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase; display:flex;align-items:center;padding-right:3rem; } .marquee span::after{content:"";width:7px;height:7px;background:var(--chile-deep);margin-left:3rem;transform:rotate(45deg)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee__track{animation:none}} /* ------------------------------------------------------ Catering packages -- */ .pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--rule);background:var(--chile)} @media (max-width:820px){.pkg-grid{grid-template-columns:1fr}} .pkg{ background:var(--base);padding:clamp(28px,3vw,40px);margin:0; display:flex;flex-direction:column; } .pkg__head{ display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding-bottom:1rem;margin-bottom:1rem;border-bottom:2px solid rgba(246,240,228,.2); } .pkg__head h3{margin:0;color:var(--text)} .pkg__price{margin:0;display:flex;align-items:baseline;gap:.45rem;white-space:nowrap} .pkg__price b{font-family:var(--display);font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1;color:var(--amber)} .pkg__price span{font-weight:700;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7} .pkg__note{margin:0 0 1.6rem;font-weight:300;font-size:.98rem;opacity:.85} .pkg__label{ margin:0 0 .8rem;font-family:var(--body);font-weight:700;font-size:.62rem; letter-spacing:.2em;text-transform:uppercase;color:var(--verde-light,#3ba57c); } .pkg__list{ list-style:none;margin:0;padding:0;display:grid;gap:.5rem; font-weight:300;font-size:.98rem; } .pkg__list li{display:flex;gap:.6rem;align-items:flex-start} .pkg__list li::before{ content:"";flex:none;width:6px;height:6px;margin-top:.55em; background:var(--chile);transform:rotate(45deg); } .pkg-footnote{ margin:2.5rem 0 0;font-size:.88rem;font-weight:300;opacity:.6;max-width:70ch; } /* ----------------------------------------------------------------- Menu -- */ .menu-tools{position:sticky;top:84px;z-index:40;background:var(--paper);border-bottom:2px solid rgba(29,21,18,.15);padding:1rem 0} .menu-tools__inner{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);display:flex;flex-wrap:wrap;gap:1rem;align-items:center} .menu-search{flex:1 1 240px;min-width:200px} .menu-search input{ width:100%;height:3.4rem;background:transparent; border:2px solid var(--text-dark);color:var(--text-dark); font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.08em; line-height:normal;text-transform:uppercase;padding:0 .9rem; } .menu-search input::-webkit-search-cancel-button{filter:invert(.2)} .menu-search input::placeholder{color:rgba(29,21,18,.45)} .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chip{ display:inline-flex;align-items:center;min-height:2.6rem; font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;line-height:1; padding:0 .85rem;border:2px solid var(--text-dark);background:transparent;color:var(--text-dark);cursor:pointer; } .chip[aria-pressed="true"]{background:var(--chile);border-color:var(--chile);color:var(--text-dark)} .menu-count{font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-left:auto} .menu-section{padding-top:clamp(56px,7vw,88px);scroll-margin-top:160px} .menu-section > h2{color:var(--chile-deep);margin-bottom:.15em} .menu-section__note{font-style:italic;font-weight:300;opacity:.75;max-width:70ch;margin-bottom:2.2rem} .menu-sub{ font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase; margin:2.8rem 0 1.3rem;padding-bottom:.55rem;border-bottom:2px solid rgba(29,21,18,.2); } .menu-sub small{display:block;font-weight:300;font-size:.95rem;letter-spacing:0;text-transform:none;font-style:italic;opacity:.75;margin-top:.45rem} .menu-sub:first-of-type{margin-top:0} .items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem clamp(32px,4vw,64px)} @media (max-width:760px){.items{grid-template-columns:1fr}} .item__top{display:flex;align-items:baseline;gap:1rem} .item__name{font-weight:600;font-size:1rem;letter-spacing:.01em;flex:1} .item__price{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--chile-deep);white-space:nowrap} .item__desc{margin:.35rem 0 0;font-size:.98rem;font-weight:300;opacity:.8;max-width:46ch} .item[hidden],.menu-section[hidden]{display:none} .raw{color:var(--chile-deep)} .pepper{width:.85em;height:.85em;display:inline-block;vertical-align:-.08em;margin-left:.25em} .menu-empty{padding:4rem 0;font-style:italic;opacity:.75} .legend{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:3.5rem;padding-top:1.5rem;border-top:2px solid rgba(29,21,18,.2);font-size:.95rem;font-weight:300;opacity:.85} .legend span{display:flex;align-items:center;gap:.4rem} .fineprint{font-size:.88rem;font-weight:300;opacity:.65;max-width:82ch;margin-top:1.5rem} /* -------------------------------------------------------------- Reviews -- */ .reviews__head{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end;justify-content:space-between;margin-bottom:3rem} .reviews__score{display:flex;align-items:baseline;gap:.8rem} .reviews__score b{font-family:var(--display);font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;color:var(--chile-deep)} .reviews__score span{font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7} .review{margin:0;border-top:2px solid rgba(29,21,18,.25);padding-top:1.2rem} .review__stars{display:flex;gap:.15rem;margin-bottom:.9rem} .star{width:16px;height:16px;fill:var(--chile)} .review blockquote{margin:0;font-size:1.02rem;font-weight:300;line-height:1.6} .review figcaption{margin-top:1rem;font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65} @media (max-width:900px){.reviews__list{gap:2.4rem}} .halal-note{ max-width:var(--wrap);margin:.9rem auto 0;padding-inline:var(--gutter); font-size:.9rem;font-weight:300;line-height:1.5;color:var(--text-dark);opacity:.8; border-left:3px solid var(--verde);padding-left:1rem;margin-left:var(--gutter); } @media (max-width:720px){.halal-note{margin-left:var(--gutter);margin-right:var(--gutter)}} /* ------------------------------------------------------------------ FAQ -- */ .faq{max-width:880px;border-top:2px solid currentColor} .faq details{border-bottom:2px solid currentColor} .faq summary{ cursor:pointer;list-style:none;position:relative;padding:1.4rem 3rem 1.4rem 0; font-weight:600;font-size:1rem;letter-spacing:.02em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:15px;height:2px;background:currentColor} .faq summary::before{content:"";position:absolute;right:6.9px;top:50%;width:2px;height:15px;background:currentColor;transform:translateY(-50%);transition:opacity .2s} .faq details[open] summary::before{opacity:0} .faq p{padding:0 0 1.4rem;margin:0;font-weight:300;opacity:.85;max-width:70ch} /* ----------------------------------------------------------------- Form -- */ .form{display:grid;gap:1.6rem;max-width:780px} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem} @media (max-width:640px){.form .row{grid-template-columns:1fr}} .field label{display:block;font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.6rem;opacity:.85} .field input,.field select,.field textarea{ width:100%;background:transparent;border:2px solid currentColor;color:inherit; font-family:var(--body);font-size:1rem;line-height:1.5;padding:.8rem .9rem; } .field select{height:auto;min-height:3.2rem;appearance:none;background-image: linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 14px) center; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem} .field textarea{min-height:150px;resize:vertical} .field select option{background:var(--base);color:var(--text)} .check{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;font-weight:300} .check input{margin-top:.4rem} .hp{position:absolute;left:-9999px} .form-status{font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;min-height:1.2em;margin:0} .form-status[data-state="ok"]{color:var(--amber)} .form-status[data-state="error"]{color:var(--chile)} .plane-paper .form-status[data-state="ok"]{color:var(--verde)} /* ---------------------------------------------------------------- Visit -- */ .info{list-style:none;margin:0;padding:0;display:grid;gap:2.1rem} .info h3{margin-bottom:.3rem} .info p{font-weight:300;margin-bottom:.4rem} .info a{text-decoration:none;border-bottom:2px solid var(--amber);font-weight:400} .info .address{ display:inline-block;border:0;line-height:1.6; border-bottom:2px solid transparent;transition:border-color .15s; } .info .address:hover{border-color:var(--amber)} .address-hint{ display:block;margin-top:.5rem;font-weight:700;font-size:.66rem; letter-spacing:.16em;text-transform:uppercase;color:var(--amber); } .address-hint::before{content:"";display:inline-block;width:0;height:0;margin-right:.5rem; border:5px solid transparent;border-left-color:currentColor;vertical-align:.05em} .hours{width:100%;border-collapse:collapse;max-width:460px} .hours th{text-align:left;font-weight:300;padding:.6rem 0;font-size:1rem} .hours td{text-align:right;font-weight:700;font-size:.76rem;letter-spacing:.1em;padding:.6rem 0;white-space:nowrap} .hours tr + tr th,.hours tr + tr td{border-top:1px solid rgba(246,240,228,.22)} .plane-paper .hours tr + tr th,.plane-paper .hours tr + tr td{border-color:rgba(29,21,18,.15)} .hours tr[data-today] th,.hours tr[data-today] td{color:var(--amber)} .map{width:100%;min-height:440px;height:100%;border:var(--rule) solid var(--base)} /* --------------------------------------------------------------- Footer -- */ .site-footer{background:var(--base);color:var(--text);border-top:var(--rule) solid var(--chile);padding:clamp(64px,8vw,96px) 0 32px} [data-theme="cal"] .site-footer{background:#1D1512;color:#F6F0E4} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,4vw,64px)} @media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}} .footer-brand img{height:96px;margin-bottom:1.6rem} .site-footer h4{font-weight:700;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin:0 0 1.1rem} .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-weight:300} .site-footer a{text-decoration:none;opacity:.88} .site-footer a:hover{opacity:1;color:var(--amber)} .socials{gap:.85rem} .socials a{display:inline-flex;align-items:center;gap:.65rem} .socials svg{width:20px;height:20px;fill:currentColor;flex:none} .socials a:hover svg{fill:var(--amber)} .site-footer address{font-style:normal;font-weight:300;line-height:1.85;opacity:.88} .footer-bottom{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem; margin-top:clamp(48px,6vw,72px);padding-top:22px; border-top:1px solid rgba(246,240,228,.2);font-size:.84rem;font-weight:300;opacity:.6; } /* ------------------------------------------------------------ Actionbar -- */ .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;border-top:var(--rule) solid var(--base)} .actionbar a{ flex:1;text-align:center;text-decoration:none;padding:1.05rem .5rem; font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; } .actionbar a:first-child{background:var(--amber);color:var(--text-dark)} .actionbar a:last-child{background:var(--chile);color:var(--text-dark)} @media (max-width:720px){ .actionbar{display:flex} body{padding-bottom:58px} .menu-tools{top:76px} } .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} .skip{position:absolute;left:-9999px} .skip:focus{left:var(--gutter);top:10px;z-index:120;background:var(--amber);color:var(--text-dark);padding:.7rem 1rem}