2
0

main.css 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112
  1. /*
  2. The bakery demo avoids using tooling so doesn't use SASS. This is a static
  3. CSS file that extends Bootstrap. It's deliberately verbose to aid
  4. readability with global themes, themes for each list view and themes for
  5. each detail view
  6. 1. Global styles ---------------------------------------------------------
  7. 2. Page header -----------------------------------------------------------
  8. 3. Main menu -------------------------------------------------------------
  9. 4. Breadcrumb ------------------------------------------------------------
  10. 5. Location styles -------------------------------------------------------
  11. 6. Blog styles -----------------------------------------------------------
  12. 7. Bread styles ----------------------------------------------------------
  13. 8. Form styles -----------------------------------------------------------
  14. 9. Homepage styles -------------------------------------------------------
  15. 9. Miscellaneous/ Helper styles ------------------------------------------
  16. */
  17. /* Global styles */
  18. /* CSS Variables */
  19. :root {
  20. --dark: #333;
  21. --grey: #6e6e6e;
  22. --border-grey: #e1dcd3;
  23. --transparent-border: rgb(135 116 79 / 25%);
  24. --white: #fff;
  25. --cream: #f5f3e9;
  26. --light-brown: #87744f;
  27. --mid-brown: #825600;
  28. --dark-brown: #553801;
  29. --orange: #c55302;
  30. --dark-orange: #833701;
  31. --font--primary: 'Marcellus', serif;
  32. /* stylelint-disable */
  33. --font--secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
  34. Roboto, 'Helvetica Neue', Arial, sans-serif, Apple Color Emoji,
  35. 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  36. /* stylelint-enable */
  37. --font-sm: 1rem;
  38. --font-md: 1.125rem;
  39. }
  40. html {
  41. font-size: 16px;
  42. }
  43. [hidden] {
  44. display: none !important;
  45. }
  46. /* Body */
  47. body {
  48. font-family: var(--font--secondary);
  49. font-size: 1rem;
  50. line-height: 1.5;
  51. padding-top: 0;
  52. padding-bottom: 0;
  53. background: var(--white);
  54. color: var(--dark);
  55. min-height: 100vh;
  56. }
  57. body.no-scroll {
  58. overflow-y: hidden;
  59. }
  60. @media (min-width: 768px) {
  61. body {
  62. font-size: var(--font-md);
  63. line-height: 1.55;
  64. }
  65. }
  66. /* Headings and Paragraphs */
  67. h1,
  68. h2,
  69. h3 {
  70. font-family: var(--font--primary);
  71. font-weight: 400;
  72. color: var(--dark);
  73. }
  74. h1 {
  75. font-size: 2.375rem;
  76. line-height: 1.16;
  77. }
  78. h2 {
  79. font-size: 2rem;
  80. line-height: 1.25;
  81. }
  82. h3 {
  83. font-size: 1.625rem;
  84. line-height: 1.15;
  85. }
  86. h4 {
  87. font-family: var(--font--secondary);
  88. font-style: normal;
  89. font-weight: 600;
  90. font-size: 1.25rem;
  91. line-height: 1.35;
  92. color: var(--dark);
  93. }
  94. p {
  95. font-family: var(--font--secondary);
  96. font-style: normal;
  97. font-weight: 400;
  98. font-size: var(--font-sm);
  99. line-height: 1.5;
  100. color: var(--dark);
  101. }
  102. @media (min-width: 768px) {
  103. body {
  104. font-size: var(--font-md);
  105. line-height: 1.55;
  106. }
  107. h1 {
  108. font-size: 3.75rem;
  109. line-height: 1.07;
  110. }
  111. h2 {
  112. font-size: 2.875rem;
  113. line-height: 1.09;
  114. }
  115. h3 {
  116. font-size: 2rem;
  117. line-height: 1.31;
  118. }
  119. h4 {
  120. font-size: 1.5rem;
  121. line-height: 1.38;
  122. }
  123. p {
  124. font-size: var(--font-md);
  125. line-height: 1.55;
  126. margin: 0 0 30px;
  127. }
  128. }
  129. ol,
  130. ul {
  131. margin-bottom: 30px;
  132. }
  133. .hero h1 {
  134. color: var(--white);
  135. position: relative;
  136. }
  137. @media (min-width: 768px) {
  138. .intro {
  139. font-size: 1.875rem;
  140. margin: 0 0 60px;
  141. }
  142. }
  143. /* Links, Lists, Figures */
  144. a,
  145. a:focus,
  146. a:visited {
  147. color: var(--orange);
  148. text-decoration: none;
  149. }
  150. a:hover {
  151. color: var(--dark-orange);
  152. text-decoration: none;
  153. }
  154. a.btn {
  155. background-color: var(--orange);
  156. color: var(--white);
  157. display: inline-block;
  158. font-family: var(--font--secondary);
  159. font-size: var(--font-md);
  160. line-height: 1.55;
  161. font-weight: 700;
  162. padding: 15px 20px;
  163. }
  164. a.btn:hover {
  165. background-color: var(--grey);
  166. color: var(--white);
  167. }
  168. a.btn-sm {
  169. border-radius: 4px;
  170. font-size: 1rem;
  171. line-height: normal;
  172. padding: 6px 8px;
  173. }
  174. ul {
  175. margin: 0 0 30px;
  176. }
  177. @media (min-width: 768px) {
  178. ul {
  179. margin: 0 0 50px;
  180. }
  181. }
  182. figure {
  183. margin: 30px 0;
  184. position: relative;
  185. }
  186. @media (min-width: 768px) {
  187. figure {
  188. margin: 40px 0;
  189. }
  190. }
  191. figcaption {
  192. color: var(--grey);
  193. font-family: var(--font--secondary);
  194. font-size: 0.875rem;
  195. line-height: 1.57;
  196. padding-top: 10px;
  197. }
  198. @media (min-width: 768px) {
  199. figcaption {
  200. font-size: var(--font-sm);
  201. line-height: 1.5;
  202. }
  203. }
  204. img {
  205. display: block;
  206. width: 100%;
  207. height: auto;
  208. }
  209. figure img {
  210. display: block;
  211. width: 100%;
  212. height: auto;
  213. }
  214. /* Overriding Bootstrap's default caption styles */
  215. caption {
  216. color: var(--dark);
  217. }
  218. /* Generic detail page styles */
  219. .intro {
  220. font-family: var(--font--secondary);
  221. font-weight: 300;
  222. margin: 0 0 40px;
  223. font-size: 1.375rem;
  224. }
  225. .alert {
  226. margin: 40px auto 0;
  227. max-width: 1400px;
  228. border-radius: 0;
  229. background-color: var(--orange);
  230. color: var(--white);
  231. padding: 40px;
  232. }
  233. .alert > .alert__title {
  234. color: var(--white);
  235. font-family: var(--font--primary);
  236. font-size: 1.625rem;
  237. margin-bottom: 5px;
  238. }
  239. .alert__messages {
  240. list-style-type: none;
  241. margin: 0;
  242. padding-left: 0;
  243. }
  244. /* Hero image area */
  245. .hero {
  246. padding: 300px 0 0;
  247. position: relative;
  248. margin: 0 0 10px;
  249. }
  250. .hero-image {
  251. position: absolute;
  252. top: 0;
  253. width: 100%;
  254. height: 100%;
  255. object-fit: cover;
  256. }
  257. @media screen and (min-width: 768px) {
  258. .hero {
  259. padding: 250px 0 0;
  260. margin: 0;
  261. }
  262. .hero.hero--blog {
  263. padding: 400px 0 0;
  264. }
  265. }
  266. .hero-gradient-mask {
  267. position: absolute;
  268. width: 100%;
  269. height: 100%;
  270. bottom: 0;
  271. background: linear-gradient(0deg, #000 11.33%, rgb(0 0 0 / 0%) 100%);
  272. }
  273. @media (min-width: 768px) {
  274. .hero-gradient-mask {
  275. background: linear-gradient(90deg, #000 11.33%, rgb(0 0 0 / 0%) 100%);
  276. }
  277. }
  278. .hero__container {
  279. width: 100%;
  280. padding: 30px 20px 100px;
  281. background-color: var(--orange);
  282. margin: 0 auto;
  283. }
  284. @media (min-width: 768px) {
  285. .hero__container {
  286. background-color: transparent;
  287. max-width: 1400px;
  288. padding: 0 40px;
  289. }
  290. }
  291. .hero__title {
  292. color: var(--white);
  293. font-weight: 400;
  294. font-size: 2.875rem;
  295. line-height: 1.09;
  296. margin: 0;
  297. width: 100%;
  298. }
  299. @media (min-width: 768px) {
  300. .hero__title {
  301. background-color: var(--orange);
  302. width: max-content;
  303. max-width: 100%;
  304. font-size: 6.25rem;
  305. line-height: 0.64;
  306. padding: 75px 65px;
  307. position: absolute;
  308. bottom: 0;
  309. left: 0;
  310. transform: translateY(50%);
  311. }
  312. }
  313. blockquote {
  314. border-left: 3px solid var(--orange);
  315. margin: 40px 0 30px;
  316. padding: 0 0 0 20px;
  317. }
  318. blockquote .text {
  319. color: var(--orange);
  320. margin: 0 0 30px;
  321. font-family: var(--font--primary);
  322. font-size: 1.625rem;
  323. line-height: 1.15;
  324. }
  325. blockquote .attribute-name {
  326. color: var(--dark);
  327. font-size: var(--font-md);
  328. line-height: 1.56;
  329. margin: 0;
  330. padding: 0;
  331. }
  332. @media (min-width: 768px) {
  333. blockquote {
  334. border-left: 3px solid var(--orange);
  335. margin: 50px 0;
  336. padding: 0 40px;
  337. }
  338. blockquote .text {
  339. font-size: 2rem;
  340. line-height: 1.31;
  341. }
  342. }
  343. /* Richtext Styles */
  344. /* stylelint-disable-next-line selector-class-pattern */
  345. .block-paragraph_block p {
  346. color: var(--dark);
  347. }
  348. /* stylelint-disable-next-line selector-class-pattern */
  349. .block-paragraph_block a, .block-ingredients_list a {
  350. text-decoration: underline;
  351. }
  352. /* stylelint-disable-next-line selector-class-pattern */
  353. .block-embed_block iframe {
  354. aspect-ratio: 16 / 9;
  355. width: 100%;
  356. height: 100%;
  357. }
  358. /* stylelint-disable-next-line selector-class-pattern */
  359. .block-paragraph_block iframe {
  360. aspect-ratio: 16 / 9;
  361. width: 100%;
  362. height: 100%;
  363. }
  364. /* stylelint-disable-next-line selector-class-pattern */
  365. :is(.block-table_block, .block-typed_table_block) :is(table, tr, td, th) {
  366. border: 1px solid var(--dark);
  367. padding: 0.25em;
  368. }
  369. /* stylelint-disable-next-line selector-class-pattern */
  370. :is(.block-table_block, .block-typed_table_block) table {
  371. margin-bottom: 30px;
  372. }
  373. @media screen and (min-width: 768px) {
  374. .header,
  375. .footer {
  376. padding-right: 0;
  377. padding-left: 0;
  378. }
  379. }
  380. /* Page header */
  381. .header {
  382. padding: 0;
  383. width: 100%;
  384. background: var(--white);
  385. z-index: 10;
  386. }
  387. .index-header__title {
  388. color: var(--dark);
  389. font-weight: 400;
  390. font-size: 2.875rem;
  391. line-height: 1.09;
  392. margin-top: 30px;
  393. }
  394. .index-header__introduction {
  395. color: var(--dark);
  396. font-family: var(--font--primary);
  397. font-weight: 400;
  398. font-size: 1.625rem;
  399. line-height: 1.15;
  400. margin-top: 20px;
  401. margin-bottom: 60px;
  402. }
  403. .index-header__introduction.index-header__introduction--blog {
  404. margin-bottom: 20px;
  405. }
  406. .index-header__body-introduction p:first-child {
  407. color: var(--dark);
  408. font-family: var(--font--primary);
  409. font-weight: 400;
  410. font-size: 1.625rem;
  411. line-height: 30px;
  412. margin-top: 20px;
  413. margin-bottom: 30px;
  414. }
  415. .index-header__body-introduction {
  416. margin-bottom: 30px;
  417. }
  418. @media (min-width: 768px) {
  419. .index-header__title {
  420. font-size: 6.25rem;
  421. line-height: 0.64;
  422. margin-top: 70px;
  423. }
  424. .index-header__introduction {
  425. font-size: 2rem;
  426. line-height: 1.31;
  427. margin-top: 40px;
  428. margin-bottom: 40px;
  429. }
  430. .index-header__body-introduction p:first-child {
  431. font-size: 2rem;
  432. line-height: 42px;
  433. margin-top: 40px;
  434. margin-bottom: 40px;
  435. }
  436. .index-header__body-introduction {
  437. margin-bottom: 30px;
  438. }
  439. .index-header__title.index-header__title--blog {
  440. line-height: 1.1;
  441. }
  442. }
  443. /* Main menu */
  444. .navigation {
  445. display: flex;
  446. flex-direction: row;
  447. align-items: center;
  448. padding: 25px 0;
  449. }
  450. .navigation__mobile {
  451. position: absolute;
  452. top: 0;
  453. left: 0;
  454. right: 0;
  455. bottom: 0;
  456. background-color: var(--white);
  457. z-index: 10;
  458. display: flex;
  459. flex-direction: column;
  460. align-items: center;
  461. text-align: center;
  462. padding-top: 80px;
  463. }
  464. .navigation__mobile-toggle {
  465. background-color: transparent;
  466. border: none;
  467. margin: 0 0 0 auto;
  468. }
  469. .navigation__mobile-toggle[aria-expanded='true'] {
  470. position: absolute;
  471. z-index: 15;
  472. top: 30px;
  473. right: 20px;
  474. }
  475. @media (min-width: 1150px) {
  476. .navigation__mobile {
  477. display: none;
  478. }
  479. }
  480. .navigation__mobile-toggle[aria-expanded='true'] .navigation__toggle-icon-bar {
  481. opacity: 0;
  482. }
  483. .navigation__mobile-toggle[aria-expanded='true']
  484. .navigation__toggle-icon-bar:first-of-type {
  485. transform: translateY(10px) rotate(45deg);
  486. opacity: 1;
  487. }
  488. .navigation__mobile-toggle[aria-expanded='true']
  489. .navigation__toggle-icon-bar:last-child {
  490. transform: translateY(-10px) rotate(-45deg);
  491. opacity: 1;
  492. }
  493. .navigation__mobile-search {
  494. margin-top: 20px;
  495. position: relative;
  496. }
  497. .navigation__search {
  498. display: none;
  499. margin: 15px 0 0;
  500. position: relative;
  501. }
  502. .navigation__search-icon {
  503. display: block;
  504. position: absolute;
  505. right: 13px;
  506. top: 13px;
  507. }
  508. @media (min-width: 768px) {
  509. .navigation__search-icon {
  510. top: 11px;
  511. }
  512. }
  513. .navigation__search-input {
  514. color: var(--dark);
  515. font-size: var(--font-sm);
  516. line-height: 1.5;
  517. border: 1px solid var(--dark);
  518. padding: 10px;
  519. }
  520. .navigation__items {
  521. list-style: none;
  522. margin: 0;
  523. padding: 20px 0 0;
  524. }
  525. .navigation__desktop {
  526. display: none;
  527. }
  528. @media (min-width: 1150px) {
  529. .navigation__desktop {
  530. display: block;
  531. }
  532. .navigation__search {
  533. display: block;
  534. margin: 0 0 0 auto;
  535. }
  536. .navigation__items {
  537. padding: 0 0 0 20px;
  538. }
  539. }
  540. .navigation__items > li {
  541. padding: 10px 0;
  542. }
  543. .navigation__items > li > a {
  544. color: var(--dark);
  545. font-family: var(--font--secondary);
  546. font-size: var(--font-md);
  547. line-height: 1.55;
  548. padding: 10px 0;
  549. }
  550. @media (min-width: 1150px) {
  551. .navigation__items {
  552. display: block;
  553. }
  554. .navigation__items > li {
  555. padding: 0 0 0 20px;
  556. }
  557. .navigation__items > li > a {
  558. padding: 10px;
  559. }
  560. .navigation__items > li:first-child {
  561. padding: 0 0 0 20px;
  562. }
  563. }
  564. /* N.B. We're overriding Bootstrap's default nav styles here,
  565. these rules set what the currently active nav tab looks like. */
  566. .navigation__items > li.active > a,
  567. .navigation__items > li.active > a:focus,
  568. .navigation__items > li.active > a:hover {
  569. color: var(--dark);
  570. border-radius: 0;
  571. border: none;
  572. background-color: transparent;
  573. }
  574. .navigation__items > li:hover,
  575. .navigation__items > li > a:focus,
  576. .navigation__items > li > a:hover {
  577. text-decoration: underline;
  578. }
  579. /* Required as bootstrap nav automatically hides this otherwise */
  580. @media (min-width: 768px) {
  581. .navigation__mobile-toggle {
  582. display: block;
  583. }
  584. }
  585. @media (min-width: 1150px) {
  586. .navigation__mobile-toggle {
  587. display: none;
  588. }
  589. }
  590. .navigation__toggle-icon-bar {
  591. background-color: var(--dark);
  592. width: 30px;
  593. height: 2px;
  594. margin-bottom: 8px;
  595. display: block;
  596. }
  597. .navigation__toggle-icon-bar:last-child {
  598. margin-bottom: 0;
  599. }
  600. .collapse.in {
  601. padding: 0;
  602. }
  603. @media (max-width: 1150px) {
  604. .collapse.in {
  605. flex-basis: 100%;
  606. overflow-y: hidden;
  607. }
  608. .collapse.in .navigation__items {
  609. display: block;
  610. }
  611. }
  612. .navigation__logo,
  613. .navigation__logo:visited,
  614. .navigation__logo:focus {
  615. display: inline-block;
  616. color: var(--dark);
  617. font-family: var(--font--primary);
  618. font-weight: 400;
  619. font-size: 1.5rem;
  620. line-height: 1.25;
  621. margin: 0;
  622. position: relative;
  623. }
  624. @media (min-width: 1150px) {
  625. .navigation__logo::after {
  626. content: '';
  627. position: absolute;
  628. right: -20px;
  629. top: -5px;
  630. bottom: 0;
  631. width: 1px;
  632. height: 42px;
  633. background-color: var(--border-grey);
  634. }
  635. }
  636. .dropdown-menu {
  637. background-color: var(--cream);
  638. border-radius: 0;
  639. border: transparent;
  640. }
  641. .dropdown-menu > li > a {
  642. border-bottom: 1px solid var(--border-grey);
  643. color: var(--dark);
  644. font-family: var(--font--secondary);
  645. padding: 10px 20px;
  646. }
  647. .dropdown-menu > li > a:hover {
  648. text-decoration: underline;
  649. }
  650. /* Menu dropdown hack to allow toggling */
  651. li.has-submenu a.allow-toggle {
  652. float: left;
  653. padding-right: 0;
  654. }
  655. .caret-custom {
  656. float: right;
  657. padding: 10px 10px 15px 5px !important;
  658. }
  659. .caret-custom::after {
  660. content: '▼' !important;
  661. }
  662. /* Mobile menu styling */
  663. @media (max-width: 1150px) {
  664. .nav-pills > .presentation {
  665. float: none;
  666. width: 100%;
  667. }
  668. }
  669. /* Custom page footer */
  670. hr {
  671. margin: 0;
  672. border-top: 1px solid var(--light-brown);
  673. opacity: 0.25;
  674. }
  675. footer {
  676. padding: 55px 0 30px;
  677. background-color: var(--white);
  678. }
  679. .footer__icon a {
  680. display: inline-grid;
  681. background-color: var(--cream);
  682. color: var(--orange);
  683. padding: 0.5rem;
  684. border-radius: 50%;
  685. }
  686. .copyright p {
  687. color: var(--dark);
  688. font-family: var(--font--secondary);
  689. font-size: var(--font-sm);
  690. line-height: 1.5;
  691. }
  692. @media (min-width: 768px) {
  693. .copyright p {
  694. font-size: var(--font-md);
  695. line-height: 1.55;
  696. }
  697. }
  698. .container {
  699. width: auto;
  700. padding-left: 20px;
  701. padding-right: 20px;
  702. }
  703. @media (min-width: 768px) {
  704. .container {
  705. max-width: 1400px;
  706. padding-left: 40px;
  707. padding-right: 40px;
  708. }
  709. }
  710. .container-narrow > hr {
  711. margin: 30px 0;
  712. }
  713. /* Breadcrumbs */
  714. .breadcrumb-container {
  715. position: relative;
  716. z-index: 3;
  717. margin-bottom: 15px;
  718. }
  719. .breadcrumb {
  720. color: var(--dark);
  721. font-family: var(--font--secondary);
  722. font-size: var(--font-sm);
  723. line-height: 1.5;
  724. margin-bottom: 0;
  725. padding-left: 0;
  726. background-color: transparent;
  727. }
  728. .breadcrumb > li + li::before {
  729. display: none;
  730. }
  731. .breadcrumb__chevron-icon {
  732. width: 8px;
  733. height: 16px;
  734. margin: 0 10px;
  735. }
  736. .breadcrumb__chevron-icon path {
  737. fill: var(--dark);
  738. }
  739. .breadcrumb a,
  740. .breadcrumb .active {
  741. color: var(--dark);
  742. text-decoration: underline;
  743. }
  744. .breadcrumb a:hover {
  745. color: var(--dark-orange);
  746. }
  747. /* Pagination navigation */
  748. .pagination {
  749. display: block;
  750. margin: 0 auto 40px;
  751. }
  752. .pagination__list {
  753. display: flex;
  754. width: 100%;
  755. justify-content: center;
  756. gap: 20px;
  757. list-style-type: none;
  758. padding-left: 0;
  759. }
  760. .pagination .page-item a {
  761. text-transform: capitalize;
  762. text-decoration: underline;
  763. }
  764. .pagination .page-item.active span {
  765. color: var(--grey);
  766. }
  767. .pagination .page-item.disabled a {
  768. color: var(--grey);
  769. text-decoration: none;
  770. cursor: default;
  771. }
  772. /* Search page */
  773. .search__introduction {
  774. color: var(--dark);
  775. font-family: var(--font--primary);
  776. font-weight: 400;
  777. font-size: 1.625rem;
  778. line-height: 1.15;
  779. margin-top: 20px;
  780. margin-bottom: 40px;
  781. }
  782. .search__results {
  783. list-style-type: none;
  784. padding-left: 0;
  785. margin-bottom: 90px;
  786. }
  787. @media (min-width: 768px) {
  788. .search__introduction {
  789. margin-bottom: 60px;
  790. }
  791. .search__results {
  792. margin-bottom: 120px;
  793. }
  794. }
  795. /* Location list page */
  796. .location-list-page {
  797. padding: 0 0 70px;
  798. display: grid;
  799. grid-template-columns: 1fr;
  800. gap: 10px;
  801. }
  802. @media (min-width: 768px) {
  803. .location-list-page {
  804. padding: 50px 0 110px;
  805. grid-template-columns: 1fr 1fr;
  806. gap: 30px;
  807. }
  808. }
  809. /* Location detail page */
  810. .location__meta-title {
  811. font-family: var(--font--primary);
  812. margin-top: 30px;
  813. margin-bottom: 10px;
  814. font-size: 1.625rem;
  815. line-height: 1.23;
  816. }
  817. .location__meta-title:first-child {
  818. margin-top: 0;
  819. }
  820. .location__day {
  821. font-weight: bold;
  822. font-family: var(--font--secondary);
  823. }
  824. .location__time {
  825. display: block;
  826. }
  827. /* ---- Blog Index Page ---- */
  828. .blog-tags {
  829. list-style: none;
  830. display: flex;
  831. flex-wrap: wrap;
  832. padding-left: 0;
  833. row-gap: 25px;
  834. column-gap: 15px;
  835. margin-bottom: 70px;
  836. }
  837. .blog-tags.blog-tags--condensed {
  838. column-gap: 0;
  839. }
  840. .blog-tags__pill {
  841. padding: 10px 18px;
  842. font-size: var(--font-md);
  843. line-height: 1.55;
  844. border: 1px solid var(--orange);
  845. border-radius: 60px;
  846. margin-left: 20px;
  847. text-transform: capitalize;
  848. }
  849. .blog-tags__pill--selected {
  850. background-color: var(--dark-orange);
  851. border: 1px solid var(--dark-orange);
  852. color: var(--white);
  853. }
  854. .blog-tags__pill:hover.blog-tags__pill--selected {
  855. background-color: var(--dark-orange);
  856. }
  857. .blog-tags__pill:first-child {
  858. margin-left: 0;
  859. }
  860. .blog-tags__pill:hover {
  861. background-color: var(--orange);
  862. color: var(--white);
  863. }
  864. .blog-tags__tag {
  865. color: var(--orange);
  866. text-transform: capitalize;
  867. }
  868. .blog-list {
  869. padding: 0;
  870. }
  871. .blog-list-item {
  872. display: flex;
  873. flex-direction: column;
  874. margin-bottom: 20px;
  875. }
  876. .blog-list-item a {
  877. display: flex;
  878. flex-grow: 1;
  879. flex-direction: column;
  880. }
  881. .blog-list-item:hover img {
  882. opacity: 0.3;
  883. }
  884. .blog-list-item .image {
  885. overflow: hidden;
  886. background-color: #eb7400;
  887. flex: 1 0 auto;
  888. }
  889. .blog-list-item .image img {
  890. min-height: 510px;
  891. width: auto;
  892. min-width: 100%;
  893. }
  894. .blog-list-item .text {
  895. background: linear-gradient(
  896. to bottom,
  897. rgb(0 0 0 / 0%) 0%,
  898. rgb(0 0 0 / 60%) 23%,
  899. rgb(0 0 0 / 100%) 50%
  900. );
  901. margin-top: -150px;
  902. padding: 20px;
  903. position: relative;
  904. z-index: 1;
  905. }
  906. .blog-list-item .text h2 {
  907. color: #fff;
  908. font-weight: 200;
  909. margin-top: 0;
  910. }
  911. .blog-list-item .text p {
  912. color: #e3e3e3;
  913. font-size: 0.875rem;
  914. margin-bottom: 0;
  915. }
  916. .blog-list-item .footer {
  917. background-color: #333;
  918. color: #fff;
  919. margin-top: 0;
  920. padding: 20px;
  921. position: relative;
  922. z-index: 1;
  923. }
  924. /* ---- Blog Page ---- */
  925. .blog__meta {
  926. margin-bottom: 20px;
  927. }
  928. .blog__avatar {
  929. border-radius: 100%;
  930. display: inline;
  931. width: unset;
  932. margin-right: 10px;
  933. }
  934. .blog__avatars {
  935. margin-bottom: 20px;
  936. }
  937. .blog__author {
  938. font-family: var(--font--primary);
  939. font-size: 1.375rem;
  940. line-height: 1.18;
  941. display: inline-block;
  942. margin-right: 40px;
  943. margin-bottom: 10px;
  944. }
  945. .blog__published {
  946. color: var(--grey);
  947. margin-bottom: 30px;
  948. }
  949. .blog__tag-introduction {
  950. font-size: var(--font-md);
  951. color: var(--grey);
  952. margin-bottom: 20px;
  953. margin-top: 60px;
  954. }
  955. @media (min-width: 768px) {
  956. .blog__published {
  957. margin-bottom: 40px;
  958. }
  959. .blog__avatars {
  960. margin-bottom: 40px;
  961. }
  962. .blog__tag-introduction {
  963. margin-top: 100px;
  964. }
  965. }
  966. /* ---- Gallery Page ---- */
  967. .gallery__container {
  968. padding-top: 40px;
  969. padding-bottom: 60px;
  970. }
  971. .gallery__introduction {
  972. color: var(--dark);
  973. font-family: var(--font--primary);
  974. font-size: 1.625rem;
  975. line-height: 1.15;
  976. margin: 0 0 60px;
  977. }
  978. .gallery__grid {
  979. display: grid;
  980. grid-template-columns: 1fr;
  981. gap: 10px;
  982. }
  983. @media (min-width: 768px) {
  984. .gallery__container {
  985. padding-top: 180px;
  986. padding-bottom: 80px;
  987. }
  988. .gallery__introduction {
  989. font-size: 2rem;
  990. line-height: 1.31;
  991. margin: 0 0 85px;
  992. }
  993. .gallery__grid {
  994. grid-template-columns: 1fr 1fr;
  995. gap: 30px;
  996. }
  997. }
  998. /* ---- Bread Index Page ---- */
  999. .bread-list {
  1000. list-style-type: none;
  1001. padding-left: 0;
  1002. padding-bottom: 40px;
  1003. }
  1004. @media (min-width: 992px) {
  1005. .bread-list {
  1006. display: grid;
  1007. grid-template-columns: 1fr 1fr;
  1008. gap: 30px;
  1009. padding-top: 30px;
  1010. padding-bottom: 80px;
  1011. }
  1012. }
  1013. /* ---- Bread Detail Page ---- */
  1014. .bread-detail {
  1015. padding-bottom: 60px;
  1016. }
  1017. .bread-detail__introduction {
  1018. color: var(--dark);
  1019. font-family: var(--font--primary);
  1020. font-size: 1.625rem;
  1021. line-height: 1.15;
  1022. margin-top: 50px;
  1023. margin-bottom: 65px;
  1024. }
  1025. @media (min-width: 768px) {
  1026. .bread-detail__introduction {
  1027. font-size: 2rem;
  1028. line-height: 1.31;
  1029. margin-top: 160px;
  1030. }
  1031. }
  1032. .bread-detail figure {
  1033. margin: 35px auto 20px;
  1034. overflow: hidden;
  1035. }
  1036. .bread-detail figure img {
  1037. height: auto;
  1038. }
  1039. .bread-detail__meta {
  1040. background-color: var(--cream);
  1041. padding: 40px;
  1042. margin-right: -15px;
  1043. margin-bottom: 60px;
  1044. }
  1045. .bread-detail__meta ul li {
  1046. border-bottom: 1px solid var(--border-grey);
  1047. list-style: none;
  1048. color: var(--grey);
  1049. max-width: 450px;
  1050. margin-bottom: 15px;
  1051. }
  1052. .bread-detail__meta-title {
  1053. font-family: var(--font--secondary);
  1054. font-weight: 700;
  1055. font-size: var(--font-md);
  1056. line-height: 1.55;
  1057. margin: 0 0 5px;
  1058. }
  1059. .bread-detail__meta-content {
  1060. font-family: var(--font--secondary);
  1061. font-size: var(--font-md);
  1062. line-height: 1.55;
  1063. margin: 0 0 20px;
  1064. }
  1065. .bread-detail__meta-ingredient--draft {
  1066. color: transparent;
  1067. user-select: none;
  1068. cursor: help;
  1069. text-shadow: 0 0 7px rgb(0 0 0 / 50%);
  1070. }
  1071. @media (min-width: 992px) {
  1072. .bread-detail__meta {
  1073. background-color: var(--cream);
  1074. padding: 240px 60px 60px;
  1075. margin-right: -40px;
  1076. margin-bottom: 0;
  1077. }
  1078. }
  1079. /* Forms */
  1080. .form-page {
  1081. padding-bottom: 60px;
  1082. }
  1083. .form-page input,
  1084. textarea,
  1085. select {
  1086. display: block;
  1087. width: 100%;
  1088. padding: 8px;
  1089. border: 1px solid var(--dark);
  1090. }
  1091. .form-page input[type='submit'] {
  1092. border: none;
  1093. color: var(--white);
  1094. background-color: var(--orange);
  1095. font-weight: 700;
  1096. padding: 15px 25px;
  1097. display: inline-block;
  1098. vertical-align: middle;
  1099. transition-duration: 0.1s;
  1100. width: max-content;
  1101. }
  1102. .form-page input[type='submit']:hover {
  1103. background-color: var(--dark);
  1104. }
  1105. .form-page li input[type='checkbox'],
  1106. input[type='radio'] {
  1107. display: inline-block;
  1108. margin-right: 10px;
  1109. }
  1110. .form-page__field ul,
  1111. .form-page__field li {
  1112. list-style: none;
  1113. padding: 0;
  1114. margin: 0;
  1115. }
  1116. .form-page .required {
  1117. color: var(--orange);
  1118. }
  1119. .form-page .help {
  1120. color: var(--dark);
  1121. font-family: var(--font--secondary);
  1122. font-size: var(--font-sm);
  1123. margin-top: 10px;
  1124. max-width: 350px;
  1125. }
  1126. .form-page__field {
  1127. color: var(--dark);
  1128. margin-bottom: 30px;
  1129. }
  1130. .form-page__field label {
  1131. margin-bottom: 10px;
  1132. }
  1133. .form-page__help-text {
  1134. color: var(--grey);
  1135. font-family: var(--font--secondary);
  1136. font-size: var(--font-md);
  1137. line-height: 28px;
  1138. margin: -10px 0 10px;
  1139. }
  1140. @media (min-width: 766px) {
  1141. .form-page input,
  1142. textarea,
  1143. select {
  1144. width: 100%;
  1145. }
  1146. .form-page {
  1147. padding-bottom: 140px;
  1148. }
  1149. .form-page__field {
  1150. margin-bottom: 50px;
  1151. }
  1152. }
  1153. /* Generic title image header include */
  1154. .base-header img {
  1155. height: auto;
  1156. margin-top: 20px;
  1157. max-width: 100%;
  1158. width: auto;
  1159. }
  1160. @media (max-width: 970px) {
  1161. .base-header img {
  1162. width: 100%;
  1163. }
  1164. }
  1165. /* Homepage */
  1166. /* #region -- Hero -- */
  1167. .homepage .hero {
  1168. margin: 0;
  1169. padding: 200px 0 30px;
  1170. }
  1171. .homepage .home-hero {
  1172. margin-bottom: 0;
  1173. padding-bottom: 20px;
  1174. }
  1175. @media (min-width: 768px) {
  1176. .homepage .home-hero {
  1177. padding-bottom: 140px;
  1178. }
  1179. }
  1180. .homepage .home-hero .lead {
  1181. font-family: var(--font--primary);
  1182. font-weight: 400;
  1183. color: var(--white);
  1184. margin: 40px auto;
  1185. font-size: 1.625rem;
  1186. line-height: 1.15;
  1187. }
  1188. @media (min-width: 768px) {
  1189. .homepage .home-hero .lead {
  1190. font-size: 2rem;
  1191. line-height: 1.31;
  1192. }
  1193. }
  1194. .homepage .home-hero .hero-cta-link {
  1195. color: var(--white);
  1196. background-color: var(--orange);
  1197. font-weight: 700;
  1198. padding: 15px 25px;
  1199. display: inline-block;
  1200. vertical-align: middle;
  1201. transition:
  1202. color ease 0.1s,
  1203. background-color ease 0.1s;
  1204. }
  1205. .homepage .home-hero .hero-cta-link:hover {
  1206. background-color: var(--white);
  1207. color: var(--dark-orange);
  1208. }
  1209. /* #endregion */
  1210. /* #region -- Body -- */
  1211. .homepage .streamfield {
  1212. background-color: var(--cream);
  1213. }
  1214. .homepage .streamfield a {
  1215. color: var(--dark-orange);
  1216. }
  1217. .homepage .streamfield-column {
  1218. padding: 80px 20px;
  1219. }
  1220. .homepage .streamfield-column p:first-child {
  1221. color: var(--dark-brown);
  1222. font-family: var(--font--primary);
  1223. font-size: 1.5rem;
  1224. line-height: 1.31;
  1225. margin-bottom: 30px;
  1226. }
  1227. .homepage .streamfield-column p:first-child a {
  1228. text-decoration-skip-ink: none;
  1229. text-decoration-thickness: 3px;
  1230. text-underline-offset: 4px;
  1231. }
  1232. .homepage .streamfield-column p {
  1233. font-size: 0.875rem;
  1234. line-height: 1.57;
  1235. }
  1236. .homepage .streamfield-column p:last-child {
  1237. margin-bottom: 0;
  1238. }
  1239. @media (min-width: 768px) {
  1240. .homepage .streamfield-column p {
  1241. font-size: var(--font-md);
  1242. line-height: 1.55;
  1243. }
  1244. }
  1245. @media (min-width: 992px) {
  1246. .homepage .streamfield-column {
  1247. padding: 140px 0;
  1248. }
  1249. .homepage .streamfield-column p:first-child {
  1250. font-size: 3.75rem;
  1251. line-height: 1.07;
  1252. margin-bottom: 60px;
  1253. }
  1254. }
  1255. /* #endregion */
  1256. /* #region -- Promo Section */
  1257. .homepage .promo-row {
  1258. padding: 40px 0 80px;
  1259. }
  1260. @media (min-width: 768px) {
  1261. .homepage .promo-row {
  1262. padding-top: 80px;
  1263. margin-right: -45px;
  1264. }
  1265. }
  1266. .homepage .promo h2 {
  1267. margin-top: 0;
  1268. margin-bottom: 20px;
  1269. color: var(--white);
  1270. }
  1271. .homepage .promo p,
  1272. .homepage .promo li {
  1273. color: var(--white);
  1274. }
  1275. .homepage .promo a {
  1276. color: var(--white);
  1277. text-decoration: underline;
  1278. }
  1279. .homepage .promo {
  1280. background: var(--light-brown);
  1281. height: 100%;
  1282. padding: 60px 40px;
  1283. margin-top: 40px;
  1284. margin-bottom: 100px;
  1285. }
  1286. .homepage .promo-text {
  1287. padding: 0;
  1288. }
  1289. .homepage .promo figure img {
  1290. margin: 40px 0 -200px;
  1291. width: 100%;
  1292. height: auto;
  1293. }
  1294. @media (min-width: 768px) {
  1295. .homepage .promo {
  1296. margin-top: -180px;
  1297. margin-right: -120px;
  1298. padding: 180px 60px 40px;
  1299. }
  1300. .homepage .promo figure img {
  1301. width: calc(100% + 60px);
  1302. height: auto;
  1303. margin-right: -60px;
  1304. margin-bottom: -280px;
  1305. padding-top: 20px;
  1306. }
  1307. .homepage .promo p {
  1308. font-size: 1.25rem;
  1309. line-height: 1.35;
  1310. }
  1311. }
  1312. /* #endregion */
  1313. /* #region -- Featured Cards Section -- */
  1314. .homepage .featured-cards__list {
  1315. list-style: none;
  1316. padding-left: 0;
  1317. }
  1318. .homepage .featured-cards__title {
  1319. margin-top: 0;
  1320. margin-bottom: 40px;
  1321. }
  1322. .homepage .featured-cards__link {
  1323. display: flex;
  1324. flex-direction: row;
  1325. justify-content: baseline;
  1326. font-family: var(--font--primary);
  1327. margin: 0 auto;
  1328. width: max-content;
  1329. font-size: var(--font-md);
  1330. line-height: 1.28;
  1331. }
  1332. .homepage .featured-cards__chevron-icon {
  1333. margin-left: 8px;
  1334. width: 8px;
  1335. height: 22px;
  1336. transition: transform ease 0.1s;
  1337. }
  1338. .homepage .featured-cards__link:hover {
  1339. text-decoration: underline;
  1340. }
  1341. .homepage .featured-cards__link:hover .featured-cards__chevron-icon {
  1342. transform: translateX(5px);
  1343. }
  1344. .homepage .featured-cards__link:hover .featured-cards__chevron-icon path {
  1345. fill: var(--dark-orange);
  1346. }
  1347. @media (min-width: 768px) {
  1348. .homepage .featured-cards {
  1349. padding-right: 50px;
  1350. }
  1351. .homepage .featured-cards__link {
  1352. font-size: 1.5rem;
  1353. line-height: 30px;
  1354. margin: unset;
  1355. }
  1356. .homepage .featured-cards__chevron-icon {
  1357. width: 12px;
  1358. height: 28px;
  1359. align-self: center;
  1360. }
  1361. }
  1362. /* #endregion */
  1363. /* #region -- Location Section -- */
  1364. .homepage .locations-section {
  1365. padding: 40px 0 20px;
  1366. text-align: center;
  1367. }
  1368. .homepage .locations-section__title {
  1369. color: var(--dark);
  1370. font-style: normal;
  1371. font-weight: 400;
  1372. font-size: 2.375rem;
  1373. line-height: 1.16;
  1374. margin-bottom: 40px;
  1375. }
  1376. @media (min-width: 768px) {
  1377. .homepage .locations-section {
  1378. text-align: left;
  1379. padding: 120px 0 160px;
  1380. }
  1381. .homepage .locations-section__title {
  1382. font-size: 3.75rem;
  1383. line-height: 1.07;
  1384. /* Aligns title with below cards */
  1385. padding-left: 10px;
  1386. }
  1387. }
  1388. /* #endregion */
  1389. /* #region -- Blog Section -- */
  1390. .homepage .blog-section {
  1391. padding: 80px 20px 100px;
  1392. text-align: center;
  1393. }
  1394. .homepage .blog-section__background {
  1395. background-color: var(--cream);
  1396. }
  1397. .homepage .blog-section__title {
  1398. color: var(--dark-brown);
  1399. font-weight: 400;
  1400. font-size: 2.375rem;
  1401. line-height: 1.16;
  1402. margin-bottom: 60px;
  1403. margin-top: 0;
  1404. }
  1405. .homepage .blog-section__grid {
  1406. display: grid;
  1407. gap: 10px;
  1408. grid-template-columns: 1fr;
  1409. }
  1410. @media (min-width: 566px) {
  1411. .homepage .blog-section__grid {
  1412. grid-template-columns: 1fr 1fr;
  1413. }
  1414. }
  1415. @media (min-width: 768px) {
  1416. .homepage .blog-section {
  1417. padding: 90px 0 110px;
  1418. }
  1419. }
  1420. @media (min-width: 966px) {
  1421. .homepage .blog-section__grid {
  1422. grid-template-columns: 1fr 1fr 1fr;
  1423. }
  1424. .homepage .blog-section__title {
  1425. margin-bottom: 90px;
  1426. font-size: 7.5rem;
  1427. line-height: 1.21;
  1428. }
  1429. }
  1430. /* #endregion */
  1431. /* Miscellaneous helper styles */
  1432. /* No gutters */
  1433. .row.no-gutters {
  1434. margin-right: 0;
  1435. margin-left: 0;
  1436. }
  1437. @media (max-width: 970px) {
  1438. .row.no-gutters {
  1439. display: block;
  1440. }
  1441. }
  1442. .row.no-gutters > [class^='col-'],
  1443. .row.no-gutters > [class*=' col-'] {
  1444. padding-right: 0;
  1445. padding-left: 0;
  1446. }
  1447. /* Bootstrap Equal height rows */
  1448. .row-eq-height {
  1449. display: box;
  1450. display: flex;
  1451. display: flexbox;
  1452. display: flex;
  1453. flex-wrap: wrap;
  1454. }
  1455. @media (min-width: 992px) {
  1456. .hidden-md-up {
  1457. display: none;
  1458. }
  1459. }
  1460. @media (max-width: 991px) {
  1461. .hidden-md-down {
  1462. display: none;
  1463. }
  1464. }
  1465. /* From Wagtail core */
  1466. .richtext-image.left {
  1467. float: left;
  1468. width: 50%;
  1469. }
  1470. .richtext-image.right {
  1471. float: right;
  1472. width: 50%;
  1473. }
  1474. /* ---- Component Styles ---- */
  1475. /* #region ---- Picture Card ---- */
  1476. .picture-card {
  1477. position: relative;
  1478. }
  1479. .picture-card__link:hover .picture-card__image img {
  1480. transform: scale(1.00);
  1481. }
  1482. .picture-card__link:hover .picture-card__title {
  1483. text-decoration: underline;
  1484. }
  1485. .picture-card__title {
  1486. color: var(--white);
  1487. font-family: var(--font--primary);
  1488. font-size: 1.625rem;
  1489. line-height: 1.15;
  1490. margin: 0;
  1491. }
  1492. .picture-card__image {
  1493. overflow: hidden;
  1494. margin-bottom: 0;
  1495. }
  1496. .picture-card__image img {
  1497. transition: transform 0.2s ease;
  1498. }
  1499. .picture-card__image::before {
  1500. content: '';
  1501. position: absolute;
  1502. height: 200px;
  1503. left: 0;
  1504. right: 0;
  1505. bottom: 0;
  1506. background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, #000 67.69%);
  1507. z-index: 2;
  1508. }
  1509. .picture-card__contents {
  1510. position: absolute;
  1511. top: 0;
  1512. bottom: 0;
  1513. left: 0;
  1514. right: 0;
  1515. text-align: left;
  1516. display: flex;
  1517. align-items: end;
  1518. padding: 20px;
  1519. z-index: 2;
  1520. }
  1521. @media (min-width: 768px) {
  1522. .picture-card__title {
  1523. font-size: 2rem;
  1524. line-height: 1.31;
  1525. }
  1526. .picture-card__contents {
  1527. padding: 30px 40px;
  1528. }
  1529. }
  1530. /* #endregion */
  1531. /* #region ---- Listing Card ---- */
  1532. .listing-card {
  1533. margin-bottom: 40px;
  1534. }
  1535. .listing-card__meta {
  1536. border-collapse: separate;
  1537. border-spacing: 5px;
  1538. }
  1539. .listing-card__link {
  1540. display: flex;
  1541. flex-direction: row;
  1542. padding-bottom: 30px;
  1543. border-bottom: 1px solid var(--border-grey);
  1544. }
  1545. .listing-card__contents {
  1546. padding-top: 10px;
  1547. padding-left: 25px;
  1548. }
  1549. .listing-card__title {
  1550. color: var(--orange);
  1551. margin-top: 0;
  1552. }
  1553. .listing-card__meta-category {
  1554. color: var(--grey);
  1555. font-size: 0.875rem;
  1556. line-height: 1.57;
  1557. padding-right: 10px;
  1558. vertical-align: top;
  1559. }
  1560. .listing-card__meta-content {
  1561. color: var(--dark);
  1562. font-size: 0.875rem;
  1563. line-height: 1.57;
  1564. vertical-align: top;
  1565. }
  1566. .listing-card__meta-row:last-child {
  1567. margin-bottom: 0;
  1568. }
  1569. .listing-card__image {
  1570. width: 100%;
  1571. overflow: hidden;
  1572. margin: 0;
  1573. max-width: 100px;
  1574. max-height: 110px;
  1575. }
  1576. .listing-card__image img {
  1577. transition: transform ease 0.2s;
  1578. }
  1579. .listing-card:hover .listing-card__image img {
  1580. transform: scale(1.05);
  1581. }
  1582. .listing-card:hover .listing-card__title {
  1583. color: var(--dark-orange);
  1584. text-decoration: underline;
  1585. }
  1586. @media (min-width: 768px) {
  1587. .listing-card__contents {
  1588. padding-left: 45px;
  1589. padding-top: 30px;
  1590. }
  1591. .listing-card__image {
  1592. width: 100%;
  1593. overflow: hidden;
  1594. margin: 0;
  1595. max-width: 180px;
  1596. max-height: 180px;
  1597. }
  1598. .listing-card__meta-category,
  1599. .listing-card__meta-content {
  1600. font-size: var(--font-sm);
  1601. line-height: 1.5;
  1602. }
  1603. }
  1604. /* #endregion */
  1605. /* #region ---- Blog Listing Card ---- */
  1606. .blog-listing-card {
  1607. padding-bottom: 40px;
  1608. width: 100%;
  1609. }
  1610. .blog-listing-card:last-child {
  1611. padding-bottom: 100px;
  1612. }
  1613. .blog-listing-card__link {
  1614. display: flex;
  1615. flex-direction: column;
  1616. padding-bottom: 30px;
  1617. border-bottom: 1px solid var(--transparent-border);
  1618. }
  1619. .blog-listing-card__contents {
  1620. padding-top: 10px;
  1621. }
  1622. .blog-listing-card__title {
  1623. font-size: 1.625rem;
  1624. line-height: 1.15;
  1625. color: var(--orange);
  1626. margin-top: 0;
  1627. margin-bottom: 8px;
  1628. }
  1629. .blog-listing-card__introduction {
  1630. font-size: var(--font-sm);
  1631. line-height: 1.5;
  1632. color: var(--dark);
  1633. margin-bottom: 8px;
  1634. max-width: 530px;
  1635. }
  1636. .blog-listing-card__metadata {
  1637. font-size: 0.875rem;
  1638. line-height: 1.43;
  1639. color: var(--grey);
  1640. margin-bottom: 0;
  1641. }
  1642. .blog-listing-card__image {
  1643. width: 100%;
  1644. overflow: hidden;
  1645. margin: 0;
  1646. }
  1647. .blog-listing-card__image img {
  1648. transition: transform ease 0.2s;
  1649. }
  1650. .blog-listing-card:hover .blog-listing-card__image img {
  1651. transform: scale(1.05);
  1652. }
  1653. .blog-listing-card:hover .blog-listing-card__title {
  1654. color: var(--dark-orange);
  1655. text-decoration: underline;
  1656. }
  1657. @media (min-width: 768px) {
  1658. .blog-listing-card:last-child {
  1659. padding-bottom: 200px;
  1660. }
  1661. .blog-listing-card__link {
  1662. flex-direction: row;
  1663. }
  1664. .blog-listing-card__contents {
  1665. padding-top: 30px;
  1666. padding-left: 45px;
  1667. }
  1668. .blog-listing-card__title {
  1669. font-size: 2rem;
  1670. line-height: 1.31;
  1671. }
  1672. .blog-listing-card__introduction {
  1673. font-size: var(--font-md);
  1674. line-height: 1.55;
  1675. }
  1676. .blog-listing-card__image {
  1677. flex-shrink: 0;
  1678. overflow: hidden;
  1679. margin: 0;
  1680. width: 325px;
  1681. height: 250px;
  1682. }
  1683. }
  1684. /* #endregion */
  1685. /* #region ---- Location Card ---- */
  1686. .location-card {
  1687. display: flex;
  1688. flex-direction: column;
  1689. margin: 0 auto 50px;
  1690. text-align: left;
  1691. }
  1692. .location-card:hover .location-card__image img {
  1693. transform: scale(1.05);
  1694. }
  1695. .location-card:hover .location-card__title {
  1696. color: var(--dark-orange);
  1697. }
  1698. .location-card__image {
  1699. margin-bottom: 0;
  1700. overflow: hidden;
  1701. }
  1702. .location-card__image img {
  1703. object-fit: cover;
  1704. min-height: 210px;
  1705. transition: transform 0.2s ease;
  1706. }
  1707. .location-card__title {
  1708. color: var(--orange);
  1709. font-size: 1.625rem;
  1710. line-height: 1.15;
  1711. margin-bottom: 10px;
  1712. font-weight: 400;
  1713. width: max-content;
  1714. position: relative;
  1715. }
  1716. .location-card__title::before {
  1717. content: '';
  1718. bottom: 3px;
  1719. position: absolute;
  1720. left: 0;
  1721. right: 0;
  1722. height: 2px;
  1723. background-color: var(--dark-orange);
  1724. opacity: 0;
  1725. transition: opacity 0.3s ease;
  1726. }
  1727. .location-card:hover .location-card__title::before {
  1728. opacity: 1;
  1729. }
  1730. .location-card__text {
  1731. color: var(--dark);
  1732. font-size: var(--font-sm);
  1733. line-height: 1.5;
  1734. }
  1735. @media (min-width: 768px) {
  1736. .location-card {
  1737. margin-bottom: 0;
  1738. }
  1739. .location-card__image {
  1740. margin-bottom: 30px;
  1741. }
  1742. .location-card__image img {
  1743. min-height: 320px;
  1744. }
  1745. .location-card__title {
  1746. font-size: 2rem;
  1747. line-height: 1.31;
  1748. margin-bottom: 20px;
  1749. }
  1750. .location-card__text {
  1751. font-size: var(--font-md);
  1752. line-height: 1.55;
  1753. }
  1754. }
  1755. /* #endregion */
  1756. /* Utilities */
  1757. .u-sr-only {
  1758. position: absolute;
  1759. width: 1px;
  1760. height: 1px;
  1761. padding: 0;
  1762. margin: -1px;
  1763. overflow: hidden;
  1764. clip: rect(0, 0, 0, 0);
  1765. white-space: nowrap;
  1766. border: 0;
  1767. }